diff --git a/client/components/SettingsToggle.tsx b/client/components/SettingsToggle.tsx
index 25ce424..d7bacf9 100644
--- a/client/components/SettingsToggle.tsx
+++ b/client/components/SettingsToggle.tsx
@@ -20,4 +20,4 @@ const SettingsToggle: React.FC<SettingsToggleProp> = ({ name, value, onValueChan
     </View>
   );
 };
-export default SettingsToggle;
+export default SettingsToggle;
\ No newline at end of file
diff --git a/client/package-lock.json b/client/package-lock.json
index 943c105..547ac11 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2494,18 +2494,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@expo/cli/node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "license": "MIT",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@expo/cli/node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -3735,9 +3723,10 @@
       }
     },
     "node_modules/@expo/spawn-async/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -8080,10 +8069,11 @@
       "dev": true
     },
     "node_modules/eslint/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -8733,9 +8723,10 @@
       "dev": true
     },
     "node_modules/fast-loops": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.3.tgz",
-      "integrity": "sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g=="
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/fast-loops/-/fast-loops-1.1.4.tgz",
+      "integrity": "sha512-8dbd3XWoKCTms18ize6JmQF1SFnnfj5s0B7rRry22EofgMu7B6LKHVh+XfFqFGsqnbH54xgeO83PzpKI+ODhlg==",
+      "license": "MIT"
     },
     "node_modules/fastq": {
       "version": "1.16.0",
@@ -11864,6 +11855,18 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -12060,15 +12063,16 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -13942,9 +13946,10 @@
       }
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -13968,6 +13973,7 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
       "dependencies": {
         "ms": "2.0.0"
       }
@@ -13975,23 +13981,14 @@
     "node_modules/send/node_modules/debug/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/send/node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
     },
     "node_modules/send/node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
       "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -14003,6 +14000,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
@@ -14017,19 +14015,29 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "license": "MIT",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/serve-static/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/set-function-length": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
@@ -15184,9 +15192,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.0.tgz",
-      "integrity": "sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==",
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.1.tgz",
+      "integrity": "sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==",
       "license": "MIT",
       "engines": {
         "node": ">=18.17"
diff --git a/client/screens/Alarms.tsx b/client/screens/Alarms.tsx
index af6512e..049673d 100644
--- a/client/screens/Alarms.tsx
+++ b/client/screens/Alarms.tsx
@@ -16,9 +16,10 @@ export default function Alarms() {
 
   // Define dynamic styles based on isDarkMode
   const dynamicStyles = {
-    backgroundColor: isDarkMode ? 'darkgrey' : 'white',
+    backgroundColor: isDarkMode ? '#1c1c1c' : '#ffffff',
     color: isDarkMode ? 'white' : 'black',
   };
+  
 
   // Function to handle saving alarm data
   const handleSaveAlarm = (alarmData: Alarm) => {
diff --git a/client/screens/Home.tsx b/client/screens/Home.tsx
index 71054b6..29d1f59 100644
--- a/client/screens/Home.tsx
+++ b/client/screens/Home.tsx
@@ -24,9 +24,10 @@ export default function Home() {
 
   // Define dynamic styles based on isDarkMode
   const dynamicStyles = {
-    backgroundColor: isDarkMode ? 'darkgrey' : 'white',
+    backgroundColor: isDarkMode ? '#1c1c1c' : '#ffffff',
     color: isDarkMode ? 'white' : 'black',
   };
+  
 
   const addNewTimeZone = (zone: TimeZone) => {
     if (!screenClock.includes(zone)) {
diff --git a/client/screens/Settings.tsx b/client/screens/Settings.tsx
index 8ae1176..5c0d872 100644
--- a/client/screens/Settings.tsx
+++ b/client/screens/Settings.tsx
@@ -4,6 +4,8 @@ import { styles, textStyles } from '../styles';
 import { useDarkMode } from '../contexts/DarkModeContext'; // Make sure to import useDarkMode
 import SettingsToggle from '../components/SettingsToggle';
 import * as Notifications from 'expo-notifications';
+import { SafeAreaView } from 'react-native';
+
 
 function Setting() {
   useEffect(() => {
@@ -56,22 +58,32 @@ function Setting() {
 
   const { isDarkMode, toggleSwitch } = useDarkMode(); // Use the useDarkMode hook
 
-  const backgroundColor = isDarkMode ? 'darkgrey' : 'white';
-  const textColor = isDarkMode ? 'white' : 'black';
+  const backgroundColor = isDarkMode ? '#1c1c1c' : '#ffffff';
 
+  const textColor = isDarkMode ? 'white' : 'black';
   return (
-    <View style={[styles.container, { backgroundColor }]}>
-      <Text style={[textStyles.titleText, { color: textColor }]}>Settings</Text>
-
-      <SettingsToggle
-        name="Dark Mode"
-        value={isDarkMode}
-        onValueChange={toggleSwitch}
-      ></SettingsToggle>
-
-      <Button title="Schedule Notification" onPress={scheduleNotification} />
-    </View>
+    <SafeAreaView style={{ flex: 1, backgroundColor: isDarkMode ? '#1c1c1c' : '#ffffff' }}>
+      <View style={isDarkMode ? styles.darkTopBar : styles.topNavBar}>
+        <Text style={isDarkMode ? styles.darkTopBarText : styles.topBarText}>Settings</Text>
+      </View>
+      <View style={{ flex: 1, padding: 20 }}>
+        <View style={isDarkMode ? styles.darkToggleContainer : styles.container}>
+          <SettingsToggle
+            name="Dark Mode"
+            value={isDarkMode}
+            onValueChange={toggleSwitch}
+          />
+        </View>
+        <View style={{ marginTop: 20 }}>
+          <Button title="Schedule Notification" onPress={scheduleNotification} color="#007AFF" />
+        </View>
+      </View>
+    </SafeAreaView>
   );
+  
+  
+  
+    
 }
 
 export default Setting;
diff --git a/client/styles/index.ts b/client/styles/index.ts
index 58783e5..77867a3 100644
--- a/client/styles/index.ts
+++ b/client/styles/index.ts
@@ -13,11 +13,52 @@ const styles = StyleSheet.create({
   },
   darkContainer: {
     flex: 1,
-    backgroundColor: '#333',
+    backgroundColor: '#1c1c1c',
     padding: 20,
-    paddingBottom: 5,
-    marginTop: 20,
+    paddingBottom: 20,
+    marginTop: 0,
+    color: '#fff',
+  },
+  
+  darkText: {
+    color: '#fff',
+  },
+  darkButton: {
+    backgroundColor: '#555',
+    color: '#fff',
+  },
+ 
+  darkTabBar: {
+    backgroundColor: '#1c1c1c',
+    borderTopWidth: 0,
+    paddingBottom: 20,
+  },
+  
+  darkTopBar: {
+    backgroundColor: '#121212',
+    padding: 20,
+    paddingTop: 40,
+    borderBottomWidth: 1,
+    borderBottomColor: '#333333',
+  },
+  darkTopBarText: {
+    color: '#ffffff',
+    fontSize: 22,
+    fontWeight: 'bold',
+    letterSpacing: 1,
+  },
+  darkToggleContainer: {
+    backgroundColor: '#2a2a2a',
+    borderRadius: 12,
+    padding: 15,
+    marginTop: 15,
+    marginBottom: 15,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 5,
   },
+    
   button: {
     backgroundColor: 'lightgreen',
     paddingVertical: 15,
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e49cdbb
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Alarm-Clock",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}