diff --git a/client/src/components/masterplanPage/map/Clouds.tsx b/client/src/components/masterplanPage/map/Clouds.tsx
index a9ce853..d4984e9 100644
--- a/client/src/components/masterplanPage/map/Clouds.tsx
+++ b/client/src/components/masterplanPage/map/Clouds.tsx
@@ -11,41 +11,49 @@ function Clouds() {
 
   return (
     <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] 
+      className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
         "
       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`}
+        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-0 left-[50%]"
+          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-[20%] left-[10%]"
+          className="scale-[0.6] absolute top-[3%] left-[10%] "
         />
         <img
           src="/images/clouds/cloud-3.png"
           alt=""
-          className="scale-[0.6] absolute top-[30%] left-[45%]"
+          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-4.png" alt="" className="scale-[0.6] " />
         <img
           src="/images/clouds/cloud-5.png"
           alt=""
-          className="scale-[0.6] absolute top-[50%] left-[15%] "
+          className="scale-[0.6] absolute top-[55%] left-[15%] "
         />
         <img
           src="/images/clouds/cloud-6.png"
           alt=""
-          className="scale-[0.6] absolute top-[35%] left-[25%] "
+          className="scale-[0.6] absolute top-[65%] left-[25%] "
         />
         <img
           src="/images/clouds/cloud-7.png"
@@ -59,33 +67,42 @@ function Clouds() {
         />
       </div>
       <div
-        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation `}
+        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-0 left-[50%]"
+          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-[20%] left-[10%]"
+          className="scale-[0.6] absolute top-[3%] left-[10%] "
         />
         <img
           src="/images/clouds/cloud-3.png"
           alt=""
-          className="scale-[0.6] absolute top-[30%] left-[45%]"
+          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-4.png" alt="" className="scale-[0.6] " />
         <img
           src="/images/clouds/cloud-5.png"
           alt=""
-          className="scale-[0.6] absolute top-[50%] left-[15%] "
+          className="scale-[0.6] absolute top-[55%] left-[15%] "
         />
         <img
           src="/images/clouds/cloud-6.png"
           alt=""
-          className="scale-[0.6] absolute top-[35%] left-[25%] "
+          className="scale-[0.6] absolute top-[65%] left-[25%] "
         />
         <img
           src="/images/clouds/cloud-7.png"
@@ -99,6 +116,95 @@ function Clouds() {
         />
       </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>
   );
 }
 
diff --git a/client/src/index.css b/client/src/index.css
index d396aa6..f56de39 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -55,10 +55,10 @@ body {
 
   @keyframes infiniter {
     from {
-      transform: translateX(0%);
+      transform: translateX(-100%);
     }
     to {
-      transform: translateX(-100%);
+      transform: translateX(0%);
     }
   }
   /* @keyframes infiniter {