diff --git a/src/components/FunctionalArea/FunctionalArea.component.tsx b/src/components/FunctionalArea/FunctionalArea.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..22043804efe9662d3a6092d79a2ebf05da414b81
--- /dev/null
+++ b/src/components/FunctionalArea/FunctionalArea.component.tsx
@@ -0,0 +1,17 @@
+import { TopBar } from '@/components/FunctionalArea/TopBar';
+import { NavBar } from '@/components/FunctionalArea/NavBar';
+import { MapNavigation } from '@/components/FunctionalArea/MapNavigation';
+
+export const FunctionalArea = (): JSX.Element => (
+  <>
+    <div className="absolute top-0 left-0 z-10 w-full">
+      <TopBar />
+    </div>
+    <div className="absolute left-[88px] top-16 z-10 w-[calc(100%-88px)]">
+      <MapNavigation />
+    </div>
+    <div className="absolute top-16 left-0 z-10 h-[calc(100%-64px)] flex">
+      <NavBar />
+    </div>
+  </>
+);
diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9aaf502039fe0b5c7f4e8a725c46949708bdb077
--- /dev/null
+++ b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
@@ -0,0 +1 @@
+export const MapNavigation = (): JSX.Element => <div className="w-full h-10 bg-slate-200">.</div>;
diff --git a/src/components/FunctionalArea/MapNavigation/index.ts b/src/components/FunctionalArea/MapNavigation/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fd325db169b280ef67d7bf8eb4d116c91a039a07
--- /dev/null
+++ b/src/components/FunctionalArea/MapNavigation/index.ts
@@ -0,0 +1 @@
+export { MapNavigation } from './MapNavigation.component';
diff --git a/src/components/FunctionalArea/NavBar/NavBar.component.tsx b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ccff87b8c145fdc6b7b93f57972ded6d8fac3504
--- /dev/null
+++ b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
@@ -0,0 +1 @@
+export const NavBar = (): JSX.Element => <div className="w-[88px] min-h-100 bg-slate-700 ">.</div>;
diff --git a/src/components/FunctionalArea/NavBar/index.ts b/src/components/FunctionalArea/NavBar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..045daa8a19ca64b8d80cc96caa8076bfed602209
--- /dev/null
+++ b/src/components/FunctionalArea/NavBar/index.ts
@@ -0,0 +1 @@
+export { NavBar } from './NavBar.component';
diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd98c130abf162bacb8b0f40ed226e3b91b07ba2
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
@@ -0,0 +1 @@
+export const TopBar = (): JSX.Element => <div className="w-100 bg-slate-600 h-16">.</div>;
diff --git a/src/components/FunctionalArea/TopBar/index.ts b/src/components/FunctionalArea/TopBar/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b8f65d8078e5cede49851ee86701ea6f29a7e69
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/index.ts
@@ -0,0 +1 @@
+export { TopBar } from './TopBar.component';
diff --git a/src/components/FunctionalArea/index.ts b/src/components/FunctionalArea/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c882de0edecc4f460bd17a0ba2a231925537cab8
--- /dev/null
+++ b/src/components/FunctionalArea/index.ts
@@ -0,0 +1 @@
+export { FunctionalArea } from './FunctionalArea.component';
diff --git a/src/components/SPA/MinervaSPA.component.tsx b/src/components/SPA/MinervaSPA.component.tsx
index afc8ac649caf550b9438ad3a456a63c948060378..72989e4fe22b36769c0a1d7bd1574c447bf1bb37 100644
--- a/src/components/SPA/MinervaSPA.component.tsx
+++ b/src/components/SPA/MinervaSPA.component.tsx
@@ -1,7 +1,9 @@
 import { Map } from '@/components/Map';
+import { FunctionalArea } from '@/components/FunctionalArea';
 
 export const MinervaSPA = (): JSX.Element => (
   <div className="relative">
+    <FunctionalArea />
     <Map />
   </div>
 );