Ok it might work

apk/app/(tabs)/_layout.tsx

@@ -1,5 +1,25 @@
 import { Tabs } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function TabsLayout() {
-  return <Tabs />;
-}
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Tabs.Screen name="index" options={{ 
+        title: "Birthdays",
+        tabBarIcon: ({ color, size }) => (
+          <Ionicons name="gift" size={size} color={color} />
+        ),
+        }} />
+      <Tabs.Screen name="settings" options={{ 
+        title: "Settings",
+        tabBarIcon: ({ color, size }) => (
+          <Ionicons name="settings" size={size} color={color} />
+        ),
+        }} />
+    </Tabs>
+  );
+}

apk/app/(tabs)/add.tsx

@@ -1,173 +0,0 @@
-import DateTimePicker, {
-  DateTimePickerEvent,
-} from "@react-native-community/datetimepicker";
-import { useBirthdays } from "@/context/birthdays-context";
-import { useRouter } from "expo-router";
-import React, { useState } from "react";
-import {
-    Alert,
-    KeyboardAvoidingView,
-    Platform,
-    ScrollView,
-    StyleSheet,
-    Text,
-    TextInput,
-    TouchableOpacity,
-    View,
-} from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-
-export default function SimpleForm() {
-  const router = useRouter();
-  const { addBirthday } = useBirthdays();
-  const [name, setName] = useState("");
-  const [date, setDate] = useState(new Date());
-  const [showPicker, setShowPicker] = useState(false);
-
-  const onChangeDate = (
-    event: DateTimePickerEvent,
-    selectedDate?: Date
-  ) => {
-    setShowPicker(Platform.OS === "ios");
-    if (selectedDate) {
-      setDate(selectedDate);
-    }
-  };
-
-  const handleSubmit = () => {
-    if (!name.trim()) {
-      Alert.alert("Missing name", "Enter a name before saving.");
-      return;
-    }
-
-    addBirthday({
-      name,
-      date: formatBirthdayDate(date),
-    });
-    setName("");
-    setDate(new Date());
-    router.back();
-  };
-
-  return (
-    <SafeAreaView style={styles.safeArea} edges={["top", "bottom"]}>
-      <KeyboardAvoidingView
-        style={styles.keyboardContainer}
-        behavior={Platform.OS === "ios" ? "padding" : undefined}
-      >
-        <View style={styles.content}>
-          <Text style={styles.title}>Add Birthday</Text>
-          <ScrollView
-            contentContainerStyle={styles.scrollContent}
-            keyboardShouldPersistTaps="handled"
-          >
-            <View style={styles.formCard}>
-              <Text style={styles.label}>Name:</Text>
-              <TextInput
-                style={styles.input}
-                placeholder="Enter name of the person"
-                value={name}
-                onChangeText={setName}
-              />
-
-              <Text style={styles.label}>Date:</Text>
-              <TouchableOpacity
-                onPress={() => {
-                  setShowPicker(true);
-                }}
-                style={[{ backgroundColor: "#00adaa" }, styles.button]}
-              >
-                <Text style={styles.buttonText}>Select Date</Text>
-              </TouchableOpacity>
-
-              <Text style={styles.dateText}>
-                {"Selected date: " + date.toDateString()}
-              </Text>
-
-              {showPicker && (
-                <DateTimePicker
-                  value={date}
-                  mode="date"
-                  display="default"
-                  onChange={onChangeDate}
-                />
-              )}
-
-              <TouchableOpacity
-                onPress={handleSubmit}
-                style={[{ backgroundColor: "#00984c" }, styles.button]}
-              >
-                <Text style={styles.buttonText}>Save</Text>
-              </TouchableOpacity>
-            </View>
-          </ScrollView>
-        </View>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    backgroundColor: "#fff",
-    justifyContent: "center",
-    marginBottom: 0,
-  },
-  keyboardContainer: {
-    flex: 1,
-  },
-  content: {
-    flex: 1,
-    paddingHorizontal: 16,
-    paddingTop: 12,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: "bold",
-    paddingHorizontal: 5,
-    paddingBottom: 10,
-  },
-  scrollContent: {
-    flexGrow: 1,
-    paddingHorizontal: 20,
-    paddingBottom: 20,
-  },
-  formCard: {
-    gap: 12,
-  },
-  label: {
-    paddingTop: 20,
-    fontSize: 16,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ccc",
-    padding: 10,
-    borderRadius: 5,
-  },
-  dateText: {
-    fontSize: 16,
-    marginBottom: 8,
-  },
-  button: {
-    borderRadius: 10,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    elevation: 8
-  },
-  buttonText: {
-    fontSize: 18,
-    color: "#fff",
-    fontWeight: "bold",
-    alignSelf: "center"
-  }
-});
-
-function formatBirthdayDate(date: Date) {
-  const year = date.getFullYear();
-  const month = `${date.getMonth() + 1}`.padStart(2, "0");
-  const day = `${date.getDate()}`.padStart(2, "0");
-
-  return `${year}-${month}-${day}`;
-}

apk/app/(tabs)/index.tsx

@@ -14,7 +14,11 @@ export default function HomeScreen() {
         <View style={styles.actionsContainer}>
           <Text style={styles.title}>Upcoming Birthdays</Text>
           <TouchableOpacity
-            onPress={() => router.push("/add")}
+            onPress={() => {
+              router.push("/add");
+            }
+            }
+
             style={styles.addButton}
           >
             <Text style={styles.addButtonText}>+</Text>

apk/app/(tabs)/settings.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { StyleSheet, Text, View, TouchableOpacity, Alert } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { useRouter } from "expo-router";
+import { useAuth } from "@/context/auth-context";
+
+export default function SettingsScreen() {
+  const router = useRouter()
+  const { logout } = useAuth();
+  const [theme, setTheme] = useState("light"); // light | dark | system
+
+  const handleLogout = () => {
+    Alert.alert("Logout", "Are you sure you want to logout?", [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Logout",
+        style: "destructive",
+        onPress: () => {
+          // TODO: clear auth state here
+          router.replace("/login");
+            logout();
+        },
+      },
+    ]);
+  };
+
+  const toggleTheme = (value) => {
+    setTheme(value);
+    // TODO: persist theme (AsyncStorage / context / zustand)
+  };
+
+  return (
+    <SafeAreaView style={styles.screen} edges={["top", "bottom"]}>
+      <View style={styles.content}>
+        
+        <Text style={styles.title}>Settings</Text>
+
+        {/* Theme Selector */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Theme</Text>
+
+          <View style={styles.row}>
+            <ThemeButton
+              label="Light"
+              active={theme === "light"}
+              onPress={() => toggleTheme("light")}
+            />
+            <ThemeButton
+              label="Dark"
+              active={theme === "dark"}
+              onPress={() => toggleTheme("dark")}
+            />
+            <ThemeButton
+              label="System"
+              active={theme === "system"}
+              onPress={() => toggleTheme("system")}
+            />
+          </View>
+        </View>
+
+        {/* Logout */}
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Account</Text>
+
+          <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
+            <Text style={styles.logoutText}>Log Out</Text>
+          </TouchableOpacity>
+        </View>
+
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function ThemeButton({ label, active, onPress }) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.themeButton, active && styles.themeButtonActive]}
+    >
+      <Text style={[styles.themeText, active && styles.themeTextActive]}>
+        {label}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    marginBottom: 20,
+  },
+
+  section: {
+    marginBottom: 24,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 10,
+  },
+
+  row: {
+    flexDirection: "row",
+    gap: 10,
+  },
+
+  themeButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#ccc",
+  },
+  themeButtonActive: {
+    backgroundColor: "#111",
+    borderColor: "#111",
+  },
+  themeText: {
+    color: "#333",
+    paddingHorizontal: 5,
+  },
+  themeTextActive: {
+    color: "#fff",
+  },
+
+  logoutButton: {
+    padding: 14,
+    borderRadius: 10,
+    backgroundColor: "#ff3b30",
+    alignItems: "center",
+  },
+  logoutText: {
+    color: "#fff",
+    fontWeight: "600",
+  },
+});