diff --git a/.env b/.env
index 43c3d48..321d3d6 100644
--- a/.env
+++ b/.env
@@ -3,4 +3,5 @@
 # VITE_API_URL=http://194.26.138.94:4002
 # VITE_API_URL=https://irthtest.online/api
 VITE_API_URL=https://irth.graff.estate/api
-GOOGLE_MAP_API_KEY=AIzaSyD1aCnh8qEIh9ACrZWeHddYJLyHMX4KsoE
\ No newline at end of file
+VITE_GOOGLE_MAP_API_KEY=AIzaSyD1aCnh8qEIh9ACrZWeHddYJLyHMX4KsoE
+VITE_GOOGLE_MAP_ID=30ff24bdc133c941ee0d0608
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index f10e965..3015dad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,5 @@ public/virtual-tours
 *.njsproj
 *.sln
 *.sw?
+
+.env
\ No newline at end of file
diff --git a/src/components/GoogleMap.tsx b/src/components/GoogleMap.tsx
index 496b5b9..96fb9b8 100644
--- a/src/components/GoogleMap.tsx
+++ b/src/components/GoogleMap.tsx
@@ -13,6 +13,7 @@ interface IGMapProps {
   mobileActive?: boolean;
 }
 
+export type MapFilter = "All" | "Hotels" | "Malls" | "Entertainment" | "Other";
 export default function GoogleMap({
   mapCenter,
   markers,
@@ -21,7 +22,7 @@ export default function GoogleMap({
   mobile = false,
   mobileActive = false,
 }: IGMapProps) {
-  const [mapMarkersFilter, setMapMarkersFilter] = useState("All");
+  const [mapMarkersFilter, setMapMarkersFilter] = useState<MapFilter>("All");
   const [isInteractale, setIsInteractale] = useState(!mobile);
   const map = useMap();
 
@@ -46,7 +47,7 @@ export default function GoogleMap({
       }`}
     >
       <Map
-        mapId={"30ff24bdc133c941ee0d0608"}
+        mapId={import.meta.env.VITE_GOOGLE_MAP_ID}
         defaultCenter={mapCenter}
         defaultZoom={defaultZoom}
         disableDefaultUI={true}
diff --git a/src/components/GoogleMapFilterButtons.tsx b/src/components/GoogleMapFilterButtons.tsx
index 9d29227..29ca769 100644
--- a/src/components/GoogleMapFilterButtons.tsx
+++ b/src/components/GoogleMapFilterButtons.tsx
@@ -5,6 +5,8 @@ import HotelIcon from "./icons/map/HotelIcon";
 import MallsIcon from "./icons/map/MallsIcon";
 import OtherIcon from "./icons/map/OtherIcon";
 import Button from "./ui/Button";
+import { AnimatePresence, motion } from "motion/react";
+import { MapFilter } from "./GoogleMap";
 
 export default function GoogleMapFilterButtons({
   mobile,
@@ -14,49 +16,72 @@ export default function GoogleMapFilterButtons({
 }: {
   mobile: boolean;
   mobileActive: boolean;
-  currentFilter: string;
-  onChange: (newFilter: string) => void;
+  currentFilter: MapFilter;
+  onChange: (newFilter: MapFilter) => void;
 }) {
-  const filters = ["All", "Hotels", "Malls", "Entertainment", "Other"];
+  const filters: MapFilter[] = [
+    "All",
+    "Hotels",
+    "Malls",
+    "Entertainment",
+    "Other",
+  ];
   const [expanded, setExpanded] = useState(false);
   const buttonsVisisble = (expanded && mobile && mobileActive) || !mobile;
 
+  const IconsByFilter = {
+    All: <AllIcon />,
+    Hotels: <HotelIcon />,
+    Malls: <MallsIcon />,
+    Entertainment: <EntertainmentIcon />,
+    Other: <OtherIcon />,
+  };
+
   return (
     <div
       className={`flex gap-[0.556vw] absolute items-center bottom-[1.111vw] left-1/2 -translate-x-1/2 ${
-        mobile && "flex-col"
+        mobile &&
+        `flex-col gap-[1.111vw] w-full pt-5 translate-y-2 ${
+          expanded && "backdrop-blur-[1px]"
+        }`
       }`}
     >
-      {buttonsVisisble &&
-        filters.map((key) => (
-          <Button
-            key={key}
-            onClick={() => onChange(key)}
-            variant={key === currentFilter ? "cta" : "secondary"}
-          >
-            <div className="size-5">
-              {key === "All" && <AllIcon />}
-              {key === "Hotels" && <HotelIcon />}
-              {key === "Malls" && <MallsIcon />}
-              {key === "Entertainment" && <EntertainmentIcon />}
-              {key === "Other" && <OtherIcon />}
-            </div>
-            {key}
-          </Button>
-        ))}
+      <AnimatePresence>
+        {buttonsVisisble &&
+          filters.map((key) => (
+            <motion.div
+              initial={{ translateY: 150, opacity: 0 }}
+              animate={{ translateY: 0, opacity: 1 }}
+              exit={{ translateY: 150, opacity: 0 }}
+              // transition={{ duration: 0.1, delay: index * 0.1 }}
+              key={key}
+            >
+              <Button
+                onClick={() => onChange(key)}
+                variant={key === currentFilter ? "cta" : "secondary"}
+              >
+                <div className="size-5">{IconsByFilter[key]}</div>
+                {key}
+              </Button>
+            </motion.div>
+          ))}
+      </AnimatePresence>
 
       {mobile && mobileActive && (
         <Button
           onClick={() => setExpanded(!expanded)}
           variant={expanded ? "cta" : "secondary"}
-          className="my-4"
+          className="my-4 px-[3.889vw] py-[2.778vw] z-10 h-10 transition-all"
         >
-          {!expanded && (
-            <div>
-              <AllIcon />
-            </div>
+          {!expanded && <div>{IconsByFilter[currentFilter]}</div>}
+
+          {expanded ? (
+            <span>Apply</span>
+          ) : currentFilter === "All" ? (
+            <span>Select Category</span>
+          ) : (
+            <span>{currentFilter}</span>
           )}
-          {!expanded ? <span>Select Category</span> : <span>Apply</span>}
         </Button>
       )}
     </div>
diff --git a/src/components/ui/MapMarker.tsx b/src/components/ui/MapMarker.tsx
index 837e037..d3e324e 100644
--- a/src/components/ui/MapMarker.tsx
+++ b/src/components/ui/MapMarker.tsx
@@ -21,13 +21,14 @@ export default function MapMarker({
     <AdvancedMarker
       onClick={() => {
         map?.panTo(poi.location);
-        map?.setZoom(15);
+        map?.setZoom(17);
       }}
       key={markerKey}
       position={poi.location}
-      ref={(marker) =>
-        !poi.ignoreClusterization && setMarkerRef(marker, markerKey.toString())
-      }
+      ref={(marker) => {
+        if (!poi.ignoreClusterization)
+          setMarkerRef(marker, markerKey.toString());
+      }}
     >
       <Pin
         background={"transparent"}
@@ -35,10 +36,7 @@ export default function MapMarker({
         borderColor={"transparent"}
         scale={poi.clickableAreaScale || 1}
       >
-        <>
-          {children}
-          <span className={`text-black text-center opacity-[1]`}></span>
-        </>
+        <>{children}</>
       </Pin>
     </AdvancedMarker>
   );
diff --git a/src/data/marasiDriveMapData.tsx b/src/data/marasiDriveMapData.tsx
index 2b15d00..f8d1d9f 100644
--- a/src/data/marasiDriveMapData.tsx
+++ b/src/data/marasiDriveMapData.tsx
@@ -22,8 +22,8 @@ const DubaiMarinaMarker = (
 
 function Marker(type: "Hotels" | "Malls" | "Entertainment" | "Other") {
   const SvgByType = {
-    Hotels: <MallsIcon className="size-[80%]" />,
-    Malls: <HotelIcon className="size-[80%]" />,
+    Hotels: <HotelIcon className="size-[80%]" />,
+    Malls: <MallsIcon className="size-[80%]" />,
     Entertainment: <EntertainmentIcon className="size-[80%]" />,
     Other: <OtherIcon className="size-[80%]" />,
   };
@@ -47,18 +47,21 @@ export const MarasiDriveMapData: {
       location: { lat: 25.13046499761402, lng: 55.11718843636159 },
       type: "Hotels",
       customMarker: Marker("Hotels"),
+      label: "Atlantis the Palm",
     },
     {
       //Atlantis the Royal
       location: { lat: 25.138673890838593, lng: 55.12795877692962 },
       type: "Hotels",
       customMarker: Marker("Hotels"),
+      label: "Atlantis the Royal",
     },
     {
       //Rove JBR
       location: { lat: 25.083013494794002, lng: 55.13925845861501 },
       type: "Hotels",
       customMarker: Marker("Hotels"),
+      label: "Rove JBR",
     },
     {
       //Rove Dubai Marina Hotel
@@ -67,12 +70,14 @@ export const MarasiDriveMapData: {
       ignoreClusterization: true,
       customMarker: DubaiMarinaMarker,
       clickableAreaScale: 3,
+      label: "Rove Dubai Marina Hotel",
     },
     {
       //Jumeirah Burj Al Arab
       location: { lat: 25.14125865549382, lng: 55.18534065404832 },
       type: "Hotels",
       customMarker: Marker("Hotels"),
+      label: "Jumeirah Burj Al Arab",
     },
 
     // MALLS
@@ -81,6 +86,7 @@ export const MarasiDriveMapData: {
       location: { lat: 25.076382747164647, lng: 55.14196528147056 },
       type: "Malls",
       customMarker: Marker("Malls"),
+      label: "Dubai Marina Mall",
     },
 
     // ENTERTAINMENT
@@ -89,18 +95,21 @@ export const MarasiDriveMapData: {
       location: { lat: 25.090979874826218, lng: 55.13798324927472 },
       type: "Entertainment",
       customMarker: Marker("Entertainment"),
+      label: "Skydive Dubai",
     },
     {
       // JBR Beach
       location: { lat: 25.077626143690992, lng: 55.131404670555284 },
       type: "Entertainment",
       customMarker: Marker("Entertainment"),
+      label: "JBR Beach",
     },
     {
       // Emirates Golf Club
       location: { lat: 25.08540156566801, lng: 55.16017556009668 },
       type: "Entertainment",
       customMarker: Marker("Entertainment"),
+      label: "Emirates Golf Club",
     },
 
     // OTHER
@@ -109,42 +118,49 @@ export const MarasiDriveMapData: {
       location: { lat: 25.116513748878386, lng: 55.13630547853065 },
       type: "Other",
       customMarker: Marker("Other"),
+      label: "Palm Jumeirah",
     },
     {
       // Dubai Harbour
       location: { lat: 25.093312800021923, lng: 55.14276330405519 },
       type: "Other",
       customMarker: Marker("Other"),
+      label: "Dubai Harbour",
     },
     {
       // Emirates Hills
       location: { lat: 25.06922740304993, lng: 55.171394810795576 },
       type: "Other",
       customMarker: Marker("Other"),
+      label: "Emirates Hills",
     },
     {
       // Internet City
       location: { lat: 25.09899279065803, lng: 55.16505834170482 },
       type: "Other",
       customMarker: Marker("Other"),
+      label: "Internet City",
     },
     {
       // JLT
       location: { lat: 25.078250849819398, lng: 55.1499560328892 },
       type: "Other",
       customMarker: Marker("Other"),
+      label: "JLT",
     },
     {
       // Jumeirah Islands
       location: { lat: 25.05800902880235, lng: 55.15510123900208 },
       type: "Other",
       customMarker: Marker("Other"),
+      label: "Jumeirah Islands",
     },
     {
       // Bluewaters Island
       location: { lat: 25.080169343022643, lng: 55.121785121589454 },
       type: "Other",
       customMarker: Marker("Other"),
+      label: "Bluewaters Island",
     },
 
     {
@@ -153,6 +169,7 @@ export const MarasiDriveMapData: {
       ignoreClusterization: true,
       customMarker: marasiDriveMarker,
       clickableAreaScale: 3,
+      label: "Marasi Drive",
     },
   ],
 };
diff --git a/src/main.tsx b/src/main.tsx
index 9e330ee..a4d0a5c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -89,7 +89,7 @@ const route = createBrowserRouter([
 
 createRoot(document.getElementById("root")!).render(
   <>
-    <APIProvider apiKey={"AIzaSyD1aCnh8qEIh9ACrZWeHddYJLyHMX4KsoE"}>
+    <APIProvider apiKey={import.meta.env.VITE_GOOGLE_MAP_API_KEY}>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={route} />
         <PopupContainer />
diff --git a/src/types/IGMapPoi.ts b/src/types/IGMapPoi.ts
index 28f45a5..108cf4a 100644
--- a/src/types/IGMapPoi.ts
+++ b/src/types/IGMapPoi.ts
@@ -5,5 +5,6 @@ export default interface IGMapPoi {
 
   // Scale multiplyer for Pin (MapMarker.tsx) component. (To match visible marker size).
   clickableAreaScale?:number; 
+  label?:string;
   customMarker?: React.ReactNode;
 }
\ No newline at end of file