Works

apk/app/index.tsx

@@ -1,12 +1,25 @@
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 
 import { BirthdayList } from "@/components/birthdate-list";
+import { useRouter } from "expo-router";
 
 export default function HomeScreen() {
+  
+  const router = useRouter();
+
   return (
     <SafeAreaView style={styles.screen} edges={["top", "bottom"]}>
       <View style={styles.content}>
+        <View style={styles.actionsContainer}>
+          <Text style={styles.title}>Upcoming Birthdays</Text>
+          <TouchableOpacity
+            onPress={() => router.push("/add")}
+            style={styles.addButton}
+          >
+            <Text style={styles.addButtonText}>+</Text>
+          </TouchableOpacity>
+        </View>
         <BirthdayList />
       </View>
     </SafeAreaView>
@@ -23,4 +36,30 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 12,
   },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    paddingHorizontal: 5,
+    paddingBottom: 10,
+  },
+  addButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "#007AFF",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  addButtonText: {
+    fontSize: 24,
+    color: "white",
+    fontWeight: "bold",
+  },
+  actionsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: 12,
+    paddingHorizontal: 5,
+    paddingBottom: 10,
+  },
 });