diff --git a/client/src/api/urls.ts b/client/src/api/urls.ts
index ddb8774..09939a2 100644
--- a/client/src/api/urls.ts
+++ b/client/src/api/urls.ts
@@ -1,6 +1,10 @@
 // const serverApi = "http://192.168.56.1:3000";
 const serverApi = "http://194.26.138.94:4002";
 // const serverApi = import.meta.env.VITE_SERVER_API;
+const city = "Dubai";
+const contry = "UAE";
+const weatherApiKey = "908ad75f36452c11ff4306cd53162218";
+const weatherApi = `https://api.openweathermap.org/data/2.5/forecast?q=${city},${contry}&units=metric&appid=${weatherApiKey}`;
 
 const apartmentsApi = `${serverApi}/apartments`;
 
@@ -8,4 +12,4 @@ const currentApartmentApi = `${serverApi}/apartment`;
 
 const updateAccessTokenApi = `${serverApi}/updateAccessToken`;
 
-export { apartmentsApi, updateAccessTokenApi, currentApartmentApi };
+export { apartmentsApi, updateAccessTokenApi, currentApartmentApi, weatherApi };
diff --git a/client/src/api/weather.ts b/client/src/api/weather.ts
new file mode 100644
index 0000000..c1b196d
--- /dev/null
+++ b/client/src/api/weather.ts
@@ -0,0 +1,72 @@
+import { weatherApi } from "./urls";
+
+/**
+ *
+ *
+ */
+
+type WeatherRes = {
+  cod: string;
+  message: number;
+  cnt: number;
+  list: {
+    dt: number;
+    main: {
+      temp: number;
+      feels_like: number;
+      temp_min: number;
+      temp_max: number;
+      pressure: number;
+      sea_level: number;
+      grnd_level: number;
+      humidity: number;
+      temp_kf: number;
+    };
+    weather: {
+      id: number;
+      main: string;
+      description: string;
+      icon: string;
+    }[];
+    clouds: {
+      all: number;
+    };
+    wind: {
+      speed: number;
+      deg: number;
+      gust: number;
+    };
+    visibility: number;
+    pop: number;
+    sys: {
+      pod: string;
+    };
+    dt_txt: string;
+  }[];
+  city: {
+    id: number;
+    name: string;
+    coord: {
+      lat: number;
+      lon: number;
+    };
+    country: string;
+    population: number;
+    timezone: number;
+    sunrise: number;
+    sunset: number;
+  };
+};
+
+async function getWeather() {
+  const response = await fetch(weatherApi);
+  const fetchedData: WeatherRes = await response.json();
+
+  const listByDay = fetchedData.list.filter((day) =>
+    day.dt_txt.endsWith("15:00:00")
+  );
+
+  return listByDay;
+}
+
+export { getWeather };
diff --git a/client/src/components/masterplanPage/map/Clouds.tsx b/client/src/components/masterplanPage/map/Clouds.tsx
index d4984e9..6328571 100644
--- a/client/src/components/masterplanPage/map/Clouds.tsx
+++ b/client/src/components/masterplanPage/map/Clouds.tsx
@@ -11,14 +11,14 @@ function Clouds() {
 
   return (
     <div
-      className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
+      className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex top-0 -left-[50vw] 
         "
       style={{
         opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
       }}
     >
       <div
-        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
+        className={`w-[150vw] h-[100vw] relative transition-opacity ease-in-out infinite-animation opacity-40`}
       >
         <img
           src="/images/clouds/cloud-1.png"
@@ -67,7 +67,7 @@ function Clouds() {
         />
       </div>
       <div
-        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
+        className={`w-[150vw] h-[100vw] relative transition-opacity ease-in-out infinite-animation opacity-40 `}
       >
         <img
           src="/images/clouds/cloud-1.png"
diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx
index 65f2f97..3636a47 100644
--- a/client/src/components/masterplanPage/map/Map.tsx
+++ b/client/src/components/masterplanPage/map/Map.tsx
@@ -6,6 +6,9 @@ import { markers } from "../../../consts/markers";
 import useMarker from "../../../store/useMarker";
 import ZoomControlls from "./ZoomControlls";
 import { Clouds } from "./Clouds";
+import { getWeather } from "../../../api/weather";
+import { useEffect } from "react";
+import WeatherWidget from "./WeatherWidget";
 
 const Map = () => {
   const { hoveredMarker } = useMarker();
@@ -18,6 +21,12 @@ const Map = () => {
     };
   });
 
+  useEffect(() => {
+    getWeather().then((data) => {
+      console.log(data);
+    });
+  }, []);
+
   return (
     <div className="relative">
       <TransformWrapper
@@ -32,6 +41,7 @@ const Map = () => {
           animationTime: 500,
         }}
       >
+        <WeatherWidget />
         <ZoomControlls />
         <TransformComponent
           wrapperStyle={{
diff --git a/client/src/components/masterplanPage/map/WeatherWidget.tsx b/client/src/components/masterplanPage/map/WeatherWidget.tsx
new file mode 100644
index 0000000..a74ab84
--- /dev/null
+++ b/client/src/components/masterplanPage/map/WeatherWidget.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { getWeather } from "../../../api/weather";
+
+const WeatherWidget = () => {
+  const [temperature, setTemperature] = useState(0);
+
+  const date = new Date();
+
+  const day = date.toLocaleDateString("en-US", {
+    weekday: "short",
+  });
+  const month = date.toLocaleDateString("en-US", {
+    month: "short",
+  });
+
+  const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const dayPart = `${date.getHours() >= 12 ? "PM" : "AM"}`;
+  const formattedTime = `${hours}:${minutes}`;
+
+  useEffect(() => {
+    getWeather().then((data) => {
+      const temp = Math.round(data[0].main.temp);
+      setTemperature(temp);
+    });
+  }, []);
+
+  return (
+    <div className="absolute top-[73.5px] left-4 bg-black rounded-2xl z-50 text-white bg-opacity-40 w-[144px] pt-4">
+      <div className="flex justify-between px-4 text-[14px] font-medium">
+        <p>{day}</p>
+        <p>{formattedTime}</p>
+      </div>
+      <div className="flex justify-between px-4 text-[12px] opacity-60  border-b font-medium pb-4">
+        <p>
+          {date.getDate()} {month}
+        </p>
+        <p>{dayPart}</p>
+      </div>
+      <div className="px-4 items-center flex pb-2 pt-2">
+        <p className="text-[32px] font-medium">{temperature}°C</p>
+      </div>
+    </div>
+  );
+};
+
+export default WeatherWidget;
diff --git a/client/src/index.css b/client/src/index.css
index 40d1e65..bdb9e8c 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -55,20 +55,9 @@ body {
 
   @keyframes infiniter {
     from {
-      transform: translateX(0%);
-    }
-    to {
-      transform: translateX(-100%);
-    }
-  }
-
-  @keyframes infiniter {
-    from {
-      transform: translateX(0%);
       transform: translateX(-100%);
     }
     to {
-      transform: translateX(-100%);
       transform: translateX(0%);
     }
   }