diff --git a/src/assets/vectors/icons/close.svg b/src/assets/vectors/icons/close.svg
new file mode 100644
index 0000000000000000000000000000000000000000..72a0b270af58e2a5b2a748147ad3dc85c968821f
--- /dev/null
+++ b/src/assets/vectors/icons/close.svg
@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2059_12637)">
+<path d="M11.9997 10.5867L16.9497 5.63672L18.3637 7.05072L13.4137 12.0007L18.3637 16.9507L16.9497 18.3647L11.9997 13.4147L7.04974 18.3647L5.63574 16.9507L10.5857 12.0007L5.63574 7.05072L7.04974 5.63672L11.9997 10.5867Z" fill="#070130"/>
+</g>
+<defs>
+<clipPath id="clip0_2059_12637">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/FunctionalArea/FunctionalArea.component.tsx b/src/components/FunctionalArea/FunctionalArea.component.tsx
index 22043804efe9662d3a6092d79a2ebf05da414b81..73c95e428367bf997dbd52d787bb3da69708dcef 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-10 w-full">
+    <div className="absolute top-0 left-0 z-20 w-full">
       <TopBar />
     </div>
-    <div className="absolute left-[88px] top-16 z-10 w-[calc(100%-88px)]">
+    <div className="absolute left-[88px] top-16 z-20 w-[calc(100%-88px)]">
       <MapNavigation />
     </div>
-    <div className="absolute top-16 left-0 z-10 h-[calc(100%-64px)] flex">
+    <div className="absolute top-16 left-0 z-20 h-[calc(100%-64px)] flex">
       <NavBar />
     </div>
   </>
diff --git a/src/components/Map/Drawer/Drawer.component.tsx b/src/components/Map/Drawer/Drawer.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5bdf85b02f5c83c56dcb123f0b64449d08cb866a
--- /dev/null
+++ b/src/components/Map/Drawer/Drawer.component.tsx
@@ -0,0 +1,37 @@
+import Image from 'next/image';
+import closeIcon from '@/assets/vectors/icons/close.svg';
+import { useState } from 'react';
+import { Button } from '@/shared/Button';
+import { twMerge } from 'tailwind-merge';
+
+export const Drawer = (): JSX.Element | null => {
+  const [open, setOpenDrawer] = useState(false);
+
+  return (
+    <>
+      <Button
+        className="absolute top-[100px] left-[100px] z-20 peer"
+        onClick={() => setOpenDrawer(true)}
+      >
+        Open Drawer
+      </Button>
+
+      <div
+        className={twMerge(
+          'absolute top-[104px] left-[88px] w-[432px] h-calc-drawer bg-white-pearl text-font-500 transition-all duration-500 transform -translate-x-full',
+          open && 'translate-x-0',
+        )}
+      >
+        <div className="flex justify-between text-xl px-6 py-8 border-b border-b-[#E1E0E6]">
+          <div>
+            <span className="font-normal">Search: </span>
+            <span className="font-semibold">NADH</span>
+          </div>
+          <div className="cursor-pointer" onClick={() => setOpenDrawer(false)}>
+            <Image src={closeIcon} alt="close drawer" width="24" height="24" />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/Map/Drawer/index.ts b/src/components/Map/Drawer/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1c73307cde3d4eba0c979efef619faccb268d19f
--- /dev/null
+++ b/src/components/Map/Drawer/index.ts
@@ -0,0 +1 @@
+export { Drawer } from './Drawer.component';
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
index 8c11af5fbec6e194ad6cea178f68b8f86498291b..7fb43320ecb0006f542e6b71bec55408bdc41c86 100644
--- a/src/components/Map/Map.component.tsx
+++ b/src/components/Map/Map.component.tsx
@@ -1,8 +1,10 @@
 import mapImg from '@/assets/images/image.jpg';
+import { Drawer } from '@/components/Map/Drawer';
 import Image from 'next/image';
 
 export const Map = (): JSX.Element => (
-  <div className="w-100 h-screen bg-black" data-testid="map-container">
-    <Image src={mapImg} fill sizes="100vw" alt="map" />
+  <div className="w-100 h-screen bg-black relative" data-testid="map-container">
+    <Drawer />
+    <Image src={mapImg} fill sizes="100vw" alt="map" className="z-0" />
   </div>
 );
diff --git a/src/shared/Icon/Icon.component.tsx b/src/shared/Icon/Icon.component.tsx
index 09ab33c8f3b5c828b5b30247f419f986fc6af4be..fd68463ec9241c123ba8d532558269ef0728cadb 100644
--- a/src/shared/Icon/Icon.component.tsx
+++ b/src/shared/Icon/Icon.component.tsx
@@ -1,16 +1,16 @@
-import { ChevronRightIcon } from '@/assets/vectors/icons/ChevronRightIcon';
-import { ChevronLeftIcon } from '@/assets/vectors/icons/ChevronLeftIcon';
-import { ChevronUpIcon } from '@/assets/vectors/icons/ChevronUpIcon';
-import { ChevronDownIcon } from '@/assets/vectors/icons/ChevronDownIcon';
-import { PlusIcon } from '@/assets/vectors/icons/PlusIcon';
-import { ArrowIcon } from '@/assets/vectors/icons/ArrowIcon';
-import { DotsIcon } from '@/assets/vectors/icons/DotsIcon';
-import { AdminIcon } from '@/assets/vectors/icons/AdminIcon';
-import { ExportIcon } from '@/assets/vectors/icons/ExportIcon';
-import { InfoIcon } from '@/assets/vectors/icons/InfoIcon';
-import { LegendIcon } from '@/assets/vectors/icons/LegendIcon';
-import { PageIcon } from '@/assets/vectors/icons/PageIcon';
-import { PluginIcon } from '@/assets/vectors/icons/PluginIcon';
+import { ChevronRightIcon } from '@/shared/Icon/Icons/ChevronRightIcon';
+import { ChevronLeftIcon } from '@/shared/Icon/Icons/ChevronLeftIcon';
+import { AdminIcon } from '@/shared/Icon/Icons/AdminIcon';
+import { ArrowIcon } from '@/shared/Icon/Icons/ArrowIcon';
+import { ChevronDownIcon } from '@/shared/Icon/Icons/ChevronDownIcon';
+import { ChevronUpIcon } from '@/shared/Icon/Icons/ChevronUpIcon';
+import { DotsIcon } from '@/shared/Icon/Icons/DotsIcon';
+import { ExportIcon } from '@/shared/Icon/Icons/ExportIcon';
+import { InfoIcon } from '@/shared/Icon/Icons/InfoIcon';
+import { LegendIcon } from '@/shared/Icon/Icons/LegendIcon';
+import { PageIcon } from '@/shared/Icon/Icons/PageIcon';
+import { PluginIcon } from '@/shared/Icon/Icons/PluginIcon';
+import { PlusIcon } from '@/shared/Icon/Icons/PlusIcon';
 
 import type { IconTypes } from '@/types/iconTypes';
 
diff --git a/src/assets/vectors/icons/AdminIcon.tsx b/src/shared/Icon/Icons/AdminIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/AdminIcon.tsx
rename to src/shared/Icon/Icons/AdminIcon.tsx
diff --git a/src/assets/vectors/icons/ArrowIcon.tsx b/src/shared/Icon/Icons/ArrowIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ArrowIcon.tsx
rename to src/shared/Icon/Icons/ArrowIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronDownIcon.tsx b/src/shared/Icon/Icons/ChevronDownIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronDownIcon.tsx
rename to src/shared/Icon/Icons/ChevronDownIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronLeftIcon.tsx b/src/shared/Icon/Icons/ChevronLeftIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronLeftIcon.tsx
rename to src/shared/Icon/Icons/ChevronLeftIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronRightIcon.tsx b/src/shared/Icon/Icons/ChevronRightIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronRightIcon.tsx
rename to src/shared/Icon/Icons/ChevronRightIcon.tsx
diff --git a/src/assets/vectors/icons/ChevronUpIcon.tsx b/src/shared/Icon/Icons/ChevronUpIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ChevronUpIcon.tsx
rename to src/shared/Icon/Icons/ChevronUpIcon.tsx
diff --git a/src/assets/vectors/icons/DotsIcon.tsx b/src/shared/Icon/Icons/DotsIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/DotsIcon.tsx
rename to src/shared/Icon/Icons/DotsIcon.tsx
diff --git a/src/assets/vectors/icons/ExportIcon.tsx b/src/shared/Icon/Icons/ExportIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/ExportIcon.tsx
rename to src/shared/Icon/Icons/ExportIcon.tsx
diff --git a/src/assets/vectors/icons/InfoIcon.tsx b/src/shared/Icon/Icons/InfoIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/InfoIcon.tsx
rename to src/shared/Icon/Icons/InfoIcon.tsx
diff --git a/src/assets/vectors/icons/LegendIcon.tsx b/src/shared/Icon/Icons/LegendIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/LegendIcon.tsx
rename to src/shared/Icon/Icons/LegendIcon.tsx
diff --git a/src/assets/vectors/icons/PageIcon.tsx b/src/shared/Icon/Icons/PageIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/PageIcon.tsx
rename to src/shared/Icon/Icons/PageIcon.tsx
diff --git a/src/assets/vectors/icons/PluginIcon.tsx b/src/shared/Icon/Icons/PluginIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/PluginIcon.tsx
rename to src/shared/Icon/Icons/PluginIcon.tsx
diff --git a/src/assets/vectors/icons/PlusIcon.tsx b/src/shared/Icon/Icons/PlusIcon.tsx
similarity index 100%
rename from src/assets/vectors/icons/PlusIcon.tsx
rename to src/shared/Icon/Icons/PlusIcon.tsx
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 18b85c28fe6459f3c5806534c12dc18ee2507fd6..aaf81f9d4a4919533e1ed15b0eb54885bec5f937 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -25,6 +25,9 @@ const config: Config = {
         cultured: '#f7f7f8',
         'white-pearl': '#ffffff',
       },
+      height: {
+        'calc-drawer': 'calc(100% - 104px)',
+      },
     },
     fontFamily: {
       manrope: ['var(--font-manrope)'],