diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 3b52e69..5a240e4 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -1,27 +1,49 @@
 // import React from 'react'
-import {  useState } from 'react'
+import {  useEffect, useState } from 'react'
 // import './App.css'
 import  {  egyptGovernorates } from '../governments';
 import NightDetails from './PrayerTimes';
 
 export default function Home() {
-    const [city, setCity] = useState<string | null>('cairo');
+    const [city, setCity] = useState<string>( window.localStorage.getItem('city') || 'cairo'  );
+    const [twelveHour, setTwelveHour] = useState<boolean>(JSON.parse(window.localStorage.getItem('twelveHour') || 'true'));
+    useEffect(() => {
+        
+    })
     return (
     
         <div className="App">
             <div className="container h-svh">
-                <select
-                    onChange={(e) => setCity(e.target.value)}
-                    id="underline_select"
-                    className="block cursor-pointer py-3 px-0  sm:text-5xl text-3xl text-navy  bg-transparent  border-b-2 border-gray-300 border-transparent hover:border-b-gray-500  transition-all border-b-gray-300 outline-none ">
-                    {
-                        egyptGovernorates.map(city => {
-                            return <option className='text-lg' key={city.url} value={city.url}>{city.name}</option>
-                        })
-                    }
-                </select>
+                <div className='w-full flex justify-between items-center'>
+                    <select
+                        onChange={
+                            (e) => {
+                                setCity(e.target.value) 
+                                window.localStorage.setItem('city', e.target.value)
+                            }}
+                        value={city}
+                        id="underline_select"
+                        className="block cursor-pointer py-3 px-0  sm:text-5xl text-3xl text-navy  bg-transparent  border-b-2 border-gray-300 border-transparent hover:border-b-gray-500  transition-all border-b-gray-300 outline-none ">
+                        {
+                            egyptGovernorates.map(city => {
+                                return <option className='text-lg' key={city.url} value={city.url}>{city.name}</option>
+                            })
+                        }
+                    </select>
+
+                    {/* changing 12 hour mode */}
+                    <button
+                        onClick={() => {
+                            setTwelveHour(!twelveHour);
+                            window.localStorage.setItem('twelveHour', JSON.stringify(!twelveHour));
+                        }} 
+                        className='border-2 border-navy text-navy px-4 h-10 rounded-lg hover:bg-navy hover:text-gold transition-all'
+                    >
+                    {twelveHour ? '24h' : '12h'}
+                    </button>
+                </div>
                 
-                <NightDetails city={city} data={null} />
+                <NightDetails city={city} data={null} twelveHour={twelveHour } />
                 
             </div>
 
diff --git a/src/components/ManualCalc.tsx b/src/components/ManualCalc.tsx
index 4f5e750..07e3bd7 100644
--- a/src/components/ManualCalc.tsx
+++ b/src/components/ManualCalc.tsx
@@ -38,6 +38,24 @@ export default function ManualCalc() {
 
                 <h2 className='text-3xl mt-10'>أدخل مواعيد الصلوات</h2>
                 <form dir='ltr' className="max-w-[20rem] mx-auto grid grid-cols-2 gap-4 mt-3">
+                    <div>
+                        {/* fajr Time input */}
+                        <label htmlFor="end-time" className="block mb-2 text-lg font-medium w-36 text-navy">موعد صلاة الفجر</label>
+                        <div className="relative">
+                            <div className="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
+                                <svg className="w-4 h-4 text-gray-400 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+                                    <path fillRule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clipRule="evenodd"/>
+                                </svg>
+                            </div>
+                            <input type="time" id="end-time" className=" border leading-none  text-gray-900 text-sm rounded-lg  block w-full p-2.5 bg-navy border-gray-600 placeholder-gray-400 dark:text-white "
+                                min="01:00"
+                                max="07:00"
+                                // value={fajrTime || '06:00'}
+                                required
+                                onChange={(e) => setFajrTime(e.target.value)}
+                            />
+                        </div>
+                    </div>
                     <div>
                         {/* maghrip Time input */}
                         <label  htmlFor="start-time" className="block mb-2 text-lg font-medium w-36 text-navy">موعد صلاة المغرب</label>
@@ -58,29 +76,11 @@ export default function ManualCalc() {
                             />
                         </div>
                     </div>
-                    <div>
-                        {/* fajr Time input */}
-                        <label htmlFor="end-time" className="block mb-2 text-lg font-medium w-36 text-navy">موعد صلاة الفجر</label>
-                        <div className="relative">
-                            <div className="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
-                                <svg className="w-4 h-4 text-gray-400 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
-                                    <path fillRule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clipRule="evenodd"/>
-                                </svg>
-                            </div>
-                            <input type="time" id="end-time" className=" border leading-none  text-gray-900 text-sm rounded-lg  block w-full p-2.5 bg-navy border-gray-600 placeholder-gray-400 dark:text-white "
-                                min="01:00"
-                                max="07:00"
-                                // value={fajrTime || '06:00'}
-                                required
-                                onChange={(e) => setFajrTime(e.target.value)}
-                            />
-                        </div>
-                    </div>
+                    
                 </form>
                 {
                     (fajrTime && maghripTime) &&
-                    <NightDetails city={null} data={data } />
-
+                    <NightDetails city={null} data={data} twelveHour={true} />
                 }
             </div>
         </>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index db072ea..bea8b87 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ export default function Navbar() {
 
     return (
         <nav>
-            <div className=" sm:px-8 px-3 py-5 flex justify-between items-center  bg-navy text-gold">
+            <div className=" sm:px-8 px-3 py-5 flex justify-between items-center  bg-navy text-gold z-5">
                 <div className="flex">
                     <Link to={'/'}>
                         <img src={logoPng} alt="logo" className="inline ml-4 h-8 sm:h-10"/>
@@ -15,8 +15,8 @@ export default function Navbar() {
                 </div>
                 <div>
                     {(location.pathname === '/manual-calculation')
-                        ? <Link to={'/'} className="h-8 sm:h-10 py-2 px-4  rounded-lg bg-gold text-navy text-xs sm:text-lg">الرئيسية</Link>
-                        : <Link to={'/manual-calculation'} className="h-8 sm:h-10 py-2 px-4  rounded-lg bg-gold text-navy text-xs sm:text-lg">الحساب يدويََا</Link>
+                        ? <Link to={'/'} className="h-8 sm:h-10 py-2 px-4  rounded-lg bg-gold text-navy text-xs sm:text-lg hover:bg-orange-50 transition-all">الرئيسية</Link>
+                        : <Link to={'/manual-calculation'} className="h-8 sm:h-10 py-2 px-4  rounded-lg bg-gold text-navy text-xs sm:text-lg hover:bg-orange-50  transition-all">الحساب يدويََا</Link>
                     }
                 </div>
             </div>
diff --git a/src/components/PrayerTimes.tsx b/src/components/PrayerTimes.tsx
index 424f1db..2cde300 100644
--- a/src/components/PrayerTimes.tsx
+++ b/src/components/PrayerTimes.tsx
@@ -59,23 +59,31 @@ type Data = {
     date: string | null,
     nightDuration: number | null
 }
-export default function NightDetails({ city , data }: { city: (string | null) , data: (Data | null)}) {
+export default function NightDetails({ city , data , twelveHour}: { city: (string | null) , data: (Data | null), twelveHour: boolean} ) {
     const [fajrTime, setFajrTime] = useState<string | null>(null);
     const [maghripTime, setMaghripTime] = useState<string | null>(null);
     const [lastThirdNight, setLastThirdNight] = useState<string | null>(null);
-    const [date] = useState<string | null>(null);
+    const [date , setDate ] = useState<Date >(new Date());
     const [weekDay, setWeekDay] = useState<string | null>(null);
     const [day, setDay] = useState<string | null>(null);
     const [month, setMonth] = useState<string | null>(null);
     const [year, setYear] = useState<string | null>(null);
     const [nightDuration, setNightDuration] = useState<number | null>(null);
     const minsDuration: (number | null) = nightDuration ? (nightDuration - Math.floor(nightDuration)) * 60 : null;
+    const [fajrDate, setFajrDate] = useState<string | null>(null);
+    const [maghripDate, setMaghripDate] = useState<string | null>(null);
+    
+
+    useEffect(() => {
+        setDate(new Date());
+    }, [])
 
     //getting the prayer times from the api
     useEffect(() => {
+        const apiDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
         if (city) {
             const getPrayerTimes = async (): Promise<PrayerTimes> => {
-                const url = `https://api.aladhan.com/v1/timingsByCity/${date}?city=${city}&country=EG&method=5`;
+                const url = `https://api.aladhan.com/v1/timingsByCity/${apiDate}?city=${city}&country=EG&method=5`;
                 const res = await fetch(url);
                 const data = await res.json();
                 return data;
@@ -99,19 +107,28 @@ export default function NightDetails({ city , data }: { city: (string | null) ,
 
     //calculating the last third of the night
     useEffect(() => {
-        const date = new Date();
+        const now: Date = date;
+        
         if (fajrTime && maghripTime) {
-            const a = date.setHours(parseInt(fajrTime.slice(0, 2)), parseInt(fajrTime.slice(3, 5)), 0, 0);
-            const b = date.setHours(parseInt(maghripTime.slice(0, 2)), parseInt(maghripTime.slice(3, 5)), 0, 0);
+            //fajr time
+            const a = now.setHours(parseInt(fajrTime.slice(0, 2)), parseInt(fajrTime.slice(3, 5)), 0, 0);
+            setFajrDate(new Date(a).toLocaleTimeString(undefined, { hour12: twelveHour, hour: 'numeric', minute: '2-digit' }));
+            
+            //maghrip time
+            const b = now.setHours(parseInt(maghripTime.slice(0, 2)), parseInt(maghripTime.slice(3, 5)), 0, 0);
+            setMaghripDate(new Date(b).toLocaleTimeString(undefined, { hour12: twelveHour, hour: 'numeric', minute: '2-digit'  }));
+
+            //calculating the difference between fajr and maghrip
             const diff = Math.abs(a - b);
             const hourDiff = 24 - (diff / (1000 * 60 * 60));
             setNightDuration(hourDiff);
-            setLastThirdNight(new Date(a - ((hourDiff / 3) * 1000 * 60 * 60)).toLocaleTimeString());
+            setLastThirdNight(new Date(a - ((hourDiff / 3) * 1000 * 60 * 60)).toLocaleTimeString(undefined, { hour12: twelveHour, hour: '2-digit', minute: '2-digit', second: '2-digit' }));
         }
 
-    }, [fajrTime, maghripTime])
+    }, [fajrTime, maghripTime, date , twelveHour])
     return (
         <>
+            
             <h2 className='sm:text-2xl mt-2 font-normal  m-auto text-right w-full text-navy'>{weekDay } {day} {month} {year}</h2>
             <h1 className="mb-1 mt-20  text-5xl font-extrabold leading-none tracking-tight text-navy md:text-5xl lg:text-6xl ">
                 الثلث الأخير من الليل:
@@ -120,23 +137,25 @@ export default function NightDetails({ city , data }: { city: (string | null) ,
                 {lastThirdNight}
             </h1>
 
-            <h1 className='text-3xl mt-20 mb-5 text-navy'></h1>
-            <h2 className='text-2xl sm:inline mx-5 font-normal text-navy'>صلاة الفجر: {fajrTime}</h2>
-            <h2 className='text-2xl sm:inline mx-5 font-normal text-navy'>صلاة المغرب: {maghripTime}</h2>
-            <h2 className='text-2xl w-full sm:inline mx-auto sm:mx-5 font-normal text-navy'>
-            طول الليلة: {
-                nightDuration && Math.floor(nightDuration) 
-                    + 
+            <h2  className='text-2xl lg:inline-block lg:mx-5 font-normal mt-14 text-navy '>صلاة الفجر: <span dir="ltr" className=""> {fajrDate}</span></h2>
+            <h2  className='text-2xl lg:inline lg:mx-5 font-normal text-navy '>صلاة المغرب: <span dir="ltr"> {maghripDate}</span></h2>
+            <h2 className='text-2xl w-full lg:inline mx-auto lg:mx-5 font-normal text-navy'>
+            طول الليلة:  
+                <span>
+                {
+                    nightDuration && ' ' + Math.floor(nightDuration) 
+                    +   
                     (
                         (nightDuration && nightDuration >= 11) ?
-                        `ساعة `
-                        : `ساعات `
+                        ` ساعة `
+                        : ` ساعات `
                     )
                 } 
                 {(minsDuration && minsDuration > 0) ?
                     `و ` +  Math.floor(minsDuration) + ` دقيقة`
                     : null
                 }
+                </span>
             
             </h2>
         </>
diff --git a/src/governments.ts b/src/governments.ts
index 603d3f7..192f743 100644
--- a/src/governments.ts
+++ b/src/governments.ts
@@ -2,7 +2,7 @@ export const egyptGovernorates = [
     { "name": "القاهرة", "url": "cairo" },
     { "name": "الإسماعيلية", "url": "ismailia" },
     { "name": "الجيزة", "url": "giza" },
-    { "name": "الأسكندرية", "url": "alexandria" },
+    { "name": "الإسكندرية", "url": "alexandria" },
     { "name": "الدقهلية", "url": "dakahlia" },
     { "name": "البحيرة", "url": "beheira" },
     { "name": "الفيوم", "url": "fayoum" },