diff --git a/weather_app/app/components/airPollution/AirPollution.tsx b/weather_app/app/components/airPollution/AirPollution.tsx
index f81a410..5bbc2c8 100644
--- a/weather_app/app/components/airPollution/AirPollution.tsx
+++ b/weather_app/app/components/airPollution/AirPollution.tsx
@@ -17,6 +17,7 @@ const AirPollution = () => {
     const filterAQI = air_QualityIndex.find((item) => {
         return item.rating === airQualityIndex;
     })
+    console.log(airQualityIndex)
 
 
   return (
diff --git a/weather_app/app/components/daily_forcast/DailyForecast.tsx b/weather_app/app/components/daily_forcast/DailyForecast.tsx
index 0df7ec4..73bea68 100644
--- a/weather_app/app/components/daily_forcast/DailyForecast.tsx
+++ b/weather_app/app/components/daily_forcast/DailyForecast.tsx
@@ -9,7 +9,7 @@ import {
   CarouselItem,
 } from "@/components/ui/carousel"
 import moment from 'moment';
-import { kelvinToCelsius } from '@/app/utils/Misc';
+import { kelvinToFarenheit } from '@/app/utils/Misc';
 
 const DailyForcast = () => {
   const {forecast, dailyForecast} = useGlobalContext();
@@ -58,7 +58,7 @@ const DailyForcast = () => {
                         return <CarouselItem key={forecast.dt_txt} className='flex flex-col gap-4 basis-[6rem] cursor-grab items-center'>
                           <p>{moment(forecast.dt_txt).format("hh:mm")}</p>
                           <p>{getIcon()}</p>
-                          <p className='mt-4'>{kelvinToCelsius(forecast.main.temp)}°F </p>
+                          <p className='mt-4'>{kelvinToFarenheit(forecast.main.temp)}°F </p>
                           </CarouselItem>
                       })
                     }
diff --git a/weather_app/app/components/temp/Temperature.tsx b/weather_app/app/components/temp/Temperature.tsx
index c747a3f..416576b 100644
--- a/weather_app/app/components/temp/Temperature.tsx
+++ b/weather_app/app/components/temp/Temperature.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { useGlobalContext } from '@/app/context/globalContext'
-import { kelvinToCelsius } from '@/app/utils/Misc';
+import { kelvinToFarenheit } from '@/app/utils/Misc';
 import { CloudIcon, CloudRainIcon, SnowflakeIcon, SunIcon, Zap } from 'lucide-react';
 import { IoNavigateOutline } from "react-icons/io5";
 
@@ -13,9 +13,9 @@ const Temperature = () => {
     if(!forecast || !weather){
         return <div>Loading...</div>
     }
-    const temp = kelvinToCelsius(main?.temp);
-    const minTemp = kelvinToCelsius(main?.temp_min);
-    const maxTemp = kelvinToCelsius(main?.temp_max);
+    const temp = kelvinToFarenheit(main?.temp);
+    const minTemp = kelvinToFarenheit(main?.temp_min);
+    const maxTemp = kelvinToFarenheit(main?.temp_max);
 
     //set time, day, weather
     const [localTime, setLocalTime] = useState<String>("");
diff --git a/weather_app/app/components/uvIndex/UVI.tsx b/weather_app/app/components/uvIndex/UVI.tsx
index 886c60e..02cb4e0 100644
--- a/weather_app/app/components/uvIndex/UVI.tsx
+++ b/weather_app/app/components/uvIndex/UVI.tsx
@@ -54,11 +54,11 @@ const UVI = () => {
            <h2 className='flex items-center gap-1 '><TbUvIndex />UV Index</h2> 
            <div className='flex items-center gap-1 pb-2 pt-6'>
             <p>{uvIndexMax}</p>
-            <span className='text-xs'>({uvIndexScale(uvIndexMax).text})</span>
+            <span>({uvIndexScale(uvIndexMax).text})</span>
            </div>
            <Progress value={leftProgress} className='air-progress' max={12}/>
         </div>
-        <p className='text-xs'>{uvIndexScale(uvIndexMax).desc}</p>
+        <p>{uvIndexScale(uvIndexMax).desc}</p>
     </div>
   )
 }
diff --git a/weather_app/app/globals.css b/weather_app/app/globals.css
index b418c5c..63524d6 100644
--- a/weather_app/app/globals.css
+++ b/weather_app/app/globals.css
@@ -76,5 +76,5 @@
 }
 
 .air-progress{
-  background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
+  background-image: linear-gradient(to right, green, yellow, orange, red, indigo, maroon);
 }
\ No newline at end of file
diff --git a/weather_app/app/layout.tsx b/weather_app/app/layout.tsx
index c4d0fe3..91e381f 100644
--- a/weather_app/app/layout.tsx
+++ b/weather_app/app/layout.tsx
@@ -6,7 +6,7 @@ import { ThemeProvider } from "./providers/ThemeProvider";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Weather APP | Tempreture, Air Pollution...",
+  title: "Weather & Forecasting APP | Tempreture, Air Pollution...",
   description: "Openweather application",
 
 };
diff --git a/weather_app/app/page.tsx b/weather_app/app/page.tsx
index 1259660..104c40b 100644
--- a/weather_app/app/page.tsx
+++ b/weather_app/app/page.tsx
@@ -1,9 +1,13 @@
 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 Humidity from "./components/humidity/Humidity";
+import Pressure from "./components/pressure/Pressure";
 import Sunset from "./components/sunset/Sunset";
 import Temperature from "./components/temp/Temperature";
 import UVI from "./components/uvIndex/UVI";
+import Visibility from "./components/visibility/Visibility";
 import Wind from "./components/wind/Wind";
 
 
@@ -22,6 +26,10 @@ export default function Home() {
             <Wind/>
             <DailyForcast/>
             <UVI/>
+            <FeelLike/>
+            <Humidity/>
+            <Visibility/>
+            <Pressure/>
           </div>
         </div>
       </div>