MAJOR UPDATE ALERT!!!!!

mobile/App.tsx

@@ -1,10 +1,12 @@
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View } from "react-native";
 import { BottomNav } from "./src/components/BottomNav";
+import { colors } from "./src/styles";
 import { NotFoundPage } from "./src/pages/NotFound";
 import { DataCardsPage } from "./src/pages/datacards";
 import { ImagePage } from "./src/pages/image";
 import { IndexPage } from "./src/pages/index";
+import { SettingsPage } from "./src/pages/settings";
 import { TextPage } from "./src/pages/text";
 import { Route, RouterProvider, useRouter } from "./src/router";
 interface Tab {
@@ -17,7 +19,13 @@ const TABS: Tab[] = [
   { label: "Home", route: "home", page: IndexPage },
   { label: "Text", route: "text", page: TextPage, hideInNav: true },
   { label: "Image", route: "image", page: ImagePage, hideInNav: true },
-  { label: "Data Cards", route: "datacards", page: DataCardsPage, hideInNav: true },
+  {
+    label: "Data Cards",
+    route: "datacards",
+    page: DataCardsPage,
+    hideInNav: true,
+  },
+  { label: "Settings", route: "settings", page: SettingsPage },
 ];
 export { TABS, type Tab };
 
@@ -41,8 +49,10 @@ export default function App() {
   return (
     <RouterProvider>
       <View style={styles.container}>
-        <StatusBar style="auto" />
-        <Screen />
+        <StatusBar style="light" />
+        <View style={{ flex: 1, marginTop: 12 }}>
+          <Screen />
+        </View>
         <BottomNav />
       </View>
     </RouterProvider>
@@ -52,6 +62,6 @@ export default function App() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
+    backgroundColor: colors.bg,
   },
 });