diff --git a/weather_app/app/components/daily_forcast/DailyForecast.tsx b/weather_app/app/components/daily_forcast/DailyForecast.tsx
index 73bea68..031f3b2 100644
--- a/weather_app/app/components/daily_forcast/DailyForecast.tsx
+++ b/weather_app/app/components/daily_forcast/DailyForecast.tsx
@@ -48,7 +48,7 @@ const DailyForcast = () => {
   return (
     <div className = 'flex flex-col justify-center gap-8 dark:bg-darkGgray shadow-sm dark:shadow-none pt-8 h-[12rem] border rounded-lg col-span-full sm-2:col-span-2 md:col-span-2 xl:col-span-2'>
         <div className='h-full flex gap-4 overflow-hidden'>
-          {todayForecast.length < 1 ? (<div>Loading...</div>) :
+          {todayForecast.length < 1 ? (<div className='px-5'>Loading...</div>) :
             (
               <div className='w-full'>
                 <Carousel>
diff --git a/weather_app/app/components/fiveDaysForecast/FiveDaysForecast.tsx b/weather_app/app/components/fiveDaysForecast/FiveDaysForecast.tsx
new file mode 100644
index 0000000..977c29f
--- /dev/null
+++ b/weather_app/app/components/fiveDaysForecast/FiveDaysForecast.tsx
@@ -0,0 +1,72 @@
+"use client"
+import { useGlobalContext } from '@/app/context/globalContext';
+import { kelvinToFarenheit, unixToDay, unixToTime } from '@/app/utils/Misc';
+import { Skeleton } from '@/components/ui/skeleton';
+import React from 'react'
+import { FaCalendarAlt } from "react-icons/fa";
+
+const FiveDaysForecast = () => {
+    const {dailyForecast} = useGlobalContext();
+    const {city, list} = dailyForecast;
+    if(!dailyForecast || !city || !list){
+        return <Skeleton className='h-[12rem] w-full'/>
+    }
+    const processData = (
+        dailyData: {
+            dt:number;
+            main:{temp_min: number,temp_max: number}; 
+        }[]
+        ) => {
+        let minTemp = Number.MAX_VALUE;
+        let maxTemp = Number.MIN_VALUE;
+
+        dailyData.forEach((
+            day: {
+                dt: number;
+                main: {temp_min: number, temp_max: number};
+            }
+        ) => {
+            if(day.main.temp_min < minTemp){
+                minTemp = day.main.temp_min;
+            }
+            if(day.main.temp_max > maxTemp){
+                maxTemp = day.main.temp_max;
+            }
+        });
+        return {
+            day: unixToDay(dailyData[0].dt),
+            minTemp: kelvinToFarenheit(minTemp),
+            maxTemp: kelvinToFarenheit(maxTemp),
+        }
+    };
+    const dailyForecasts = []
+        for(let i = 0; i < 40; i += 8){
+            const dailyData = list.slice(i, i+8);
+            dailyForecasts.push(processData(dailyData));
+        }
+
+
+  return (
+    <div className='flex flex-col flex-1 justify-between pt-6 px-4 pb-5 border rounded-lg dark:bg-darkGgray shadow-sm dark:shadow-none'>
+        <div>
+            <h2 className='flex items-center gap-2'><FaCalendarAlt/> 5 Days Forecast for {city.name}</h2>
+            <div className='pt-3'>{dailyForecasts.map((day, i) => {
+                return <div key={i} className='py-4 flex flex-col justify-evenly border-b-2'>
+                    <p className='min-w-[3rem] pb-1'>{day.day}</p>
+                    <p className='text-xs flex justify-between pb-1'>
+                        <span>(Low)</span>
+                        <span>(High)</span>
+                    </p>
+                    <div className='text-xs flex flex-1 justify-between items-center gap-4'>
+                        <p>{day.minTemp.toFixed(0)}°F</p>
+                        <div className='flex-1 w-full h-1 rounded-lg temp-progress'></div>
+                        <p>{day.maxTemp.toFixed(0)}°F</p>
+                    </div>
+                </div>
+            })}</div>
+        </div>
+    </div>
+  )
+}
+
+export default FiveDaysForecast
\ No newline at end of file
diff --git a/weather_app/app/components/humidity/Humidity.tsx b/weather_app/app/components/humidity/Humidity.tsx
index 1ac2ac2..7be706c 100644
--- a/weather_app/app/components/humidity/Humidity.tsx
+++ b/weather_app/app/components/humidity/Humidity.tsx
@@ -29,7 +29,7 @@ const Humidity = () => {
     <div className='flex flex-col justify-center gap-5 dark:bg-darkGgray shadow-sm dark:shadow-none sm-2:col-span-2  px-4 h-[12rem] border rounded-lg'>
         <div>
             <h2 className='flex items-center gap-2'><WiHumidity /> Humidity</h2>
-            <p className='pt-4 text-2xl'>{humidity} %</p>
+            <p className='pt-4 text-2xl'>{humidity}%</p>
         </div>
         <p className='text-sm'>{humidityData(humidity)}</p>
     </div>
diff --git a/weather_app/app/components/map/MapApp.tsx b/weather_app/app/components/map/MapApp.tsx
index 6a88627..cf88824 100644
--- a/weather_app/app/components/map/MapApp.tsx
+++ b/weather_app/app/components/map/MapApp.tsx
@@ -34,7 +34,7 @@ const MapApp = () => {
 
 
   return (
-    <div className='flex-1 basis-[50%] border col-span-4 rounded-lg h-[30rem]'>
+    <div className='flex-1 basis-[50%] border col-span-4 rounded-lg h-[20rem]'>
         <MapContainer center={[activeCityCords.lat, activeCityCords.lon]} zoom = {13} scrollWheelZoom = {false} style = {{height: "calc(100% - 2rem)", width: "calc(100% - 2rem)"}} className='rounded-lg m-4'>
             <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'/>
             <FlyToActiveCity activeCityCords={activeCityCords}/>
diff --git a/weather_app/app/components/uvIndex/UVI.tsx b/weather_app/app/components/uvIndex/UVI.tsx
index 02cb4e0..a85ca30 100644
--- a/weather_app/app/components/uvIndex/UVI.tsx
+++ b/weather_app/app/components/uvIndex/UVI.tsx
@@ -11,8 +11,10 @@ const UVI = () => {
         return <Skeleton className='h-[12rem] w-full'/>
     }
     const {daily} = uvIndex;
+    //console.log(uvIndex)
     const {uv_index_clearsky_max, uv_index_max} = daily;
     const uvIndexMax = uv_index_max[0].toFixed(0);
+    //console.log(uvIndexMax)
     const uvIndexScale = (uvIndex: number) => {
         if(uvIndex <= 2){
             return{
diff --git a/weather_app/app/globals.css b/weather_app/app/globals.css
index 63524d6..4db93d9 100644
--- a/weather_app/app/globals.css
+++ b/weather_app/app/globals.css
@@ -77,4 +77,8 @@
 
 .air-progress{
   background-image: linear-gradient(to right, green, yellow, orange, red, indigo, maroon);
+}
+
+.temp-progress{
+  background-image: linear-gradient(to right, #67C6E3, #74E291, yellow, orange);
 }
\ No newline at end of file
diff --git a/weather_app/app/page.tsx b/weather_app/app/page.tsx
index cd10ff5..ec409f7 100644
--- a/weather_app/app/page.tsx
+++ b/weather_app/app/page.tsx
@@ -2,6 +2,7 @@ import Navbar from "./components/Navbar";
 import AirPollution from "./components/airPollution/AirPollution";
 import DailyForcast from "./components/daily_forcast/DailyForecast";
 import FeelLike from "./components/feelLike/FeelLike";
+import FiveDaysForecast from "./components/fiveDaysForecast/FiveDaysForecast";
 import Humidity from "./components/humidity/Humidity";
 import MapApp from "./components/map/MapApp";
 import Pressure from "./components/pressure/Pressure";
@@ -19,6 +20,7 @@ export default function Home() {
       <div className="flex flex-col pt-5 pb-5 gap-4 md:flex-row">
         <div className="flex flex-col gap-4 w-full min-w-[18rem] md:w-[35rem]">
           <Temperature/>
+          <FiveDaysForecast/>
         </div>
         <div className="flex flex-col w-full">
           <div className="grid h-full gap-4 col-span-full sm-2:col-span-2 lg:grid-cols-3 xl:grid-cols-4">
diff --git a/weather_app/app/utils/DefaultState.tsx b/weather_app/app/utils/DefaultState.tsx
new file mode 100644
index 0000000..1a99a25
--- /dev/null
+++ b/weather_app/app/utils/DefaultState.tsx
@@ -0,0 +1,33 @@
+const DefaultState = [
+    {
+        name: "Chicago",
+        country: "US",
+        state: "Illinois",
+        lat: 41.8781, 
+        lon: -87.6298,
+    },
+    {
+        name: "Madison",
+        country: "US",
+        state: "Wisconsin",
+        lat: 43.0722, 
+        lon: -89.4008,
+    },
+    {
+        name: "New York",
+        country: "US",
+        state: "New York",
+        lat: 40.7127, 
+        lon: -74.0059,
+    },
+    {
+        name: "Los Angeles",
+        country: "US",
+        state: "Califonia",
+        lat:  34.0989, 
+        lon:  -118.3277,
+    },
+]
+
+export default DefaultState
+  
\ No newline at end of file
diff --git a/weather_app/app/utils/Misc.tsx b/weather_app/app/utils/Misc.tsx
new file mode 100644
index 0000000..7e1bd53
--- /dev/null
+++ b/weather_app/app/utils/Misc.tsx
@@ -0,0 +1,54 @@
+import moment from "moment";
+
+// temperature
+export const kelvinToFarenheit = (kelvin: number) => {
+    return Math.round(((kelvin - 273.15) * 1.8) + 32);
+}
+//aqi
+export const air_QualityIndex = [
+    {
+        rating: 10,
+        desc: "good",        
+    },
+    {
+        rating: 20,
+        desc: "good",        
+    },
+    {
+        rating: 30,
+        desc: "moderate",        
+    },
+    {
+        rating: 40,
+        desc: "moderate",        
+    },
+    {
+        rating: 50,
+        desc: "unhealthy",        
+    },
+    {
+        rating: 60,
+        desc: "unhealthy",        
+    },
+    {
+        rating: 70,
+        desc: "very unhealthy",        
+    },
+    {
+        rating: 80,
+        desc: "very unhealthy",        
+    },
+    {
+        rating: 100,
+        desc: "Hazardous",        
+    }
+]
+//sunset-sunrise
+export const unixToTime = (unix: number, timezone: number) => {
+    return moment.unix(unix).utcOffset(timezone / 60).format("hh:mm");
+};
+
+export const unixToDay = (unix: number) => {
+    return moment.unix(unix).format("ddd");
+}
+