diff --git a/src/components/FunctionalArea/FunctionalArea.component.tsx b/src/components/FunctionalArea/FunctionalArea.component.tsx
index 73c95e428367bf997dbd52d787bb3da69708dcef..22043804efe9662d3a6092d79a2ebf05da414b81 100644
--- a/src/components/FunctionalArea/FunctionalArea.component.tsx
+++ b/src/components/FunctionalArea/FunctionalArea.component.tsx
@@ -4,13 +4,13 @@ import { MapNavigation } from '@/components/FunctionalArea/MapNavigation';
 
 export const FunctionalArea = (): JSX.Element => (
   <>
-    <div className="absolute top-0 left-0 z-20 w-full">
+    <div className="absolute top-0 left-0 z-10 w-full">
       <TopBar />
     </div>
-    <div className="absolute left-[88px] top-16 z-20 w-[calc(100%-88px)]">
+    <div className="absolute left-[88px] top-16 z-10 w-[calc(100%-88px)]">
       <MapNavigation />
     </div>
-    <div className="absolute top-16 left-0 z-20 h-[calc(100%-64px)] flex">
+    <div className="absolute top-16 left-0 z-10 h-[calc(100%-64px)] flex">
       <NavBar />
     </div>
   </>
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
index 7fb43320ecb0006f542e6b71bec55408bdc41c86..b2b8b6cbc78f7eac4d945b30b8d0de97d57cee6b 100644
--- a/src/components/Map/Map.component.tsx
+++ b/src/components/Map/Map.component.tsx
@@ -3,7 +3,7 @@ import { Drawer } from '@/components/Map/Drawer';
 import Image from 'next/image';
 
 export const Map = (): JSX.Element => (
-  <div className="w-100 h-screen bg-black relative" data-testid="map-container">
+  <div className="w-100 h-screen bg-black relative z-0" data-testid="map-container">
     <Drawer />
     <Image src={mapImg} fill sizes="100vw" alt="map" className="z-0" />
   </div>