diff --git a/client/public/images/clouds/cloud-1.png b/client/public/images/clouds/cloud-1.png
new file mode 100644
index 0000000..cac80ed
Binary files /dev/null and b/client/public/images/clouds/cloud-1.png differ
diff --git a/client/public/images/clouds/cloud-10.png b/client/public/images/clouds/cloud-10.png
new file mode 100644
index 0000000..adcb97f
Binary files /dev/null and b/client/public/images/clouds/cloud-10.png differ
diff --git a/client/public/images/clouds/cloud-11.png b/client/public/images/clouds/cloud-11.png
new file mode 100644
index 0000000..c549d6c
Binary files /dev/null and b/client/public/images/clouds/cloud-11.png differ
diff --git a/client/public/images/clouds/cloud-12.png b/client/public/images/clouds/cloud-12.png
new file mode 100644
index 0000000..557b99b
Binary files /dev/null and b/client/public/images/clouds/cloud-12.png differ
diff --git a/client/public/images/clouds/cloud-13.png b/client/public/images/clouds/cloud-13.png
new file mode 100644
index 0000000..1cb94ab
Binary files /dev/null and b/client/public/images/clouds/cloud-13.png differ
diff --git a/client/public/images/clouds/cloud-2.png b/client/public/images/clouds/cloud-2.png
new file mode 100644
index 0000000..2949a86
Binary files /dev/null and b/client/public/images/clouds/cloud-2.png differ
diff --git a/client/public/images/clouds/cloud-3.png b/client/public/images/clouds/cloud-3.png
new file mode 100644
index 0000000..f62322a
Binary files /dev/null and b/client/public/images/clouds/cloud-3.png differ
diff --git a/client/public/images/clouds/cloud-4.png b/client/public/images/clouds/cloud-4.png
new file mode 100644
index 0000000..70c2880
Binary files /dev/null and b/client/public/images/clouds/cloud-4.png differ
diff --git a/client/public/images/clouds/cloud-5.png b/client/public/images/clouds/cloud-5.png
new file mode 100644
index 0000000..5005a5c
Binary files /dev/null and b/client/public/images/clouds/cloud-5.png differ
diff --git a/client/public/images/clouds/cloud-6.png b/client/public/images/clouds/cloud-6.png
new file mode 100644
index 0000000..0d0c272
Binary files /dev/null and b/client/public/images/clouds/cloud-6.png differ
diff --git a/client/public/images/clouds/cloud-7.png b/client/public/images/clouds/cloud-7.png
new file mode 100644
index 0000000..f6180a4
Binary files /dev/null and b/client/public/images/clouds/cloud-7.png differ
diff --git a/client/public/images/clouds/cloud-8.png b/client/public/images/clouds/cloud-8.png
new file mode 100644
index 0000000..5cca0d8
Binary files /dev/null and b/client/public/images/clouds/cloud-8.png differ
diff --git a/client/public/images/clouds/cloud-9.png b/client/public/images/clouds/cloud-9.png
new file mode 100644
index 0000000..0c0af80
Binary files /dev/null and b/client/public/images/clouds/cloud-9.png differ
diff --git a/client/src/components/masterplanPage/map/Clouds.tsx b/client/src/components/masterplanPage/map/Clouds.tsx
new file mode 100644
index 0000000..d4984e9
--- /dev/null
+++ b/client/src/components/masterplanPage/map/Clouds.tsx
@@ -0,0 +1,211 @@
+import { useState } from "react";
+import { useTransformEffect } from "react-zoom-pan-pinch";
+
+function Clouds() {
+  const [mapScale, setMapScale] = useState(1);
+
+  useTransformEffect(({ state }) => {
+    const scale = 1 / state.scale;
+    setMapScale(scale);
+  });
+
+  return (
+    <div
+      className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
+        "
+      style={{
+        opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
+      }}
+    >
+      <div
+        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
+      >
+        <img
+          src="/images/clouds/cloud-1.png"
+          alt=""
+          className="scale-[0.6] absolute top-[2%] left-[50%] "
+        />
+        <img
+          src="/images/clouds/cloud-12.png"
+          alt=""
+          className="scale-[0.6] absolute top-[5%] left-[20%] "
+        />
+        <img
+          src="/images/clouds/cloud-2.png"
+          alt=""
+          className="scale-[0.6] absolute top-[3%] left-[10%] "
+        />
+        <img
+          src="/images/clouds/cloud-3.png"
+          alt=""
+          className="scale-[0.6] absolute top-[25%] left-[45%] "
+        />
+        <img
+          src="/images/clouds/cloud-4.png"
+          alt=""
+          className="scale-[0.6] absolute top-[32%] left-[48%] "
+        />
+        <img
+          src="/images/clouds/cloud-5.png"
+          alt=""
+          className="scale-[0.6] absolute top-[55%] left-[15%] "
+        />
+        <img
+          src="/images/clouds/cloud-6.png"
+          alt=""
+          className="scale-[0.6] absolute top-[65%] left-[25%] "
+        />
+        <img
+          src="/images/clouds/cloud-7.png"
+          alt=""
+          className="scale-[0.6] absolute top-[35%] left-[30%] "
+        />
+        <img
+          src="/images/clouds/cloud-8.png"
+          alt=""
+          className="scale-[0.6] absolute top-[35%] left-[80%] "
+        />
+      </div>
+      <div
+        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
+      >
+        <img
+          src="/images/clouds/cloud-1.png"
+          alt=""
+          className="scale-[0.6] absolute top-[2%] left-[50%] "
+        />
+        <img
+          src="/images/clouds/cloud-12.png"
+          alt=""
+          className="scale-[0.6] absolute top-[5%] left-[20%] "
+        />
+        <img
+          src="/images/clouds/cloud-2.png"
+          alt=""
+          className="scale-[0.6] absolute top-[3%] left-[10%] "
+        />
+        <img
+          src="/images/clouds/cloud-3.png"
+          alt=""
+          className="scale-[0.6] absolute top-[25%] left-[45%] "
+        />
+        <img
+          src="/images/clouds/cloud-4.png"
+          alt=""
+          className="scale-[0.6] absolute top-[32%] left-[48%] "
+        />
+        <img
+          src="/images/clouds/cloud-5.png"
+          alt=""
+          className="scale-[0.6] absolute top-[55%] left-[15%] "
+        />
+        <img
+          src="/images/clouds/cloud-6.png"
+          alt=""
+          className="scale-[0.6] absolute top-[65%] left-[25%] "
+        />
+        <img
+          src="/images/clouds/cloud-7.png"
+          alt=""
+          className="scale-[0.6] absolute top-[35%] left-[30%] "
+        />
+        <img
+          src="/images/clouds/cloud-8.png"
+          alt=""
+          className="scale-[0.6] absolute top-[35%] left-[80%] "
+        />
+      </div>
+    </div>
+    // <div
+    //   className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex top-[150vw] left-[-150vw]
+    //     "
+    //   style={{
+    //     transform: "rotate(125deg)",
+    //     opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
+    //   }}
+    // >
+    //   <div
+    //     className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation`}
+    //   >
+    //     <img
+    //       src="/images/clouds/cloud-1.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-0 left-[50%]"
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-2.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[20%] left-[10%]"
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-3.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[30%] left-[45%]"
+    //     />
+    //     <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
+    //     <img
+    //       src="/images/clouds/cloud-5.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[50%] left-[15%] "
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-6.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[35%] left-[25%] "
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-7.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[35%] left-[30%] "
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-8.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[35%] left-[80%] "
+    //     />
+    //   </div>
+    //   <div
+    //     className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation `}
+    //   >
+    //     <img
+    //       src="/images/clouds/cloud-1.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-0 left-[50%]"
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-2.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[20%] left-[10%]"
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-3.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[30%] left-[45%]"
+    //     />
+    //     <img src="/images/clouds/cloud-4.png" alt="" className="scale-[0.6] " />
+    //     <img
+    //       src="/images/clouds/cloud-5.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[50%] left-[15%] "
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-6.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[35%] left-[25%] "
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-7.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[35%] left-[30%] "
+    //     />
+    //     <img
+    //       src="/images/clouds/cloud-8.png"
+    //       alt=""
+    //       className="scale-[0.6] absolute top-[35%] left-[80%] "
+    //     />
+    //   </div>
+    // </div>
+  );
+}
+
+export { Clouds };
diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx
index 690bea1..65f2f97 100644
--- a/client/src/components/masterplanPage/map/Map.tsx
+++ b/client/src/components/masterplanPage/map/Map.tsx
@@ -5,6 +5,7 @@ import Marker from "./Marker";
 import { markers } from "../../../consts/markers";
 import useMarker from "../../../store/useMarker";
 import ZoomControlls from "./ZoomControlls";
+import { Clouds } from "./Clouds";
 
 const Map = () => {
   const { hoveredMarker } = useMarker();
@@ -39,6 +40,14 @@ const Map = () => {
           }}
           wrapperClass={"top-[-50px] left-[-200px]"}
         >
+          <ImageMarker
+            src="images/Map.jpg"
+            markers={imageMarkers}
+            markerComponent={Clouds}
+            extraClass={`transition-all absolute top-0 left-0 duration-300 ease-in-out z-50 ${
+              hoveredMarker ? "brightness-[.7]" : ""
+            }`}
+          />
           <ImageMarker
             src="images/Map.jpg"
             markers={imageMarkers}
diff --git a/client/src/index.css b/client/src/index.css
index 943de7c..f56de39 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -49,6 +49,27 @@ body {
 }
 
 @layer components {
+  .infinite-animation {
+    animation: infiniter 75s linear infinite;
+  }
+
+  @keyframes infiniter {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(0%);
+    }
+  }
+  /* @keyframes infiniter {
+    from {
+      transform: "rotate(0deg)";
+    }
+    to {
+      transform: "rotate(360deg)";
+    }
+  } */
+
   .desc-shadow {
     box-shadow: 0px 4px 20px 1px #00000026;
   }