diff --git a/app.json b/app.json
index 6a0ea7c..ef2036a 100644
--- a/app.json
+++ b/app.json
@@ -6,6 +6,9 @@
     "orientation": "portrait",
     "userInterfaceStyle": "dark",
     "backgroundColor": "#0f1117",
+    "splash": {
+      "backgroundColor": "#0f1117"
+    },
     "scheme": "sheethappens",
     "android": {
       "adaptiveIcon": {
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 2e56cf7..f96836a 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,14 +1,22 @@
 import { useEffect } from "react";
-import { Stack, router } from "expo-router";
+import { Stack, router, SplashScreen } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import "../global.css";
 import { Colors } from "@/constants/theme";
 import { useSettings } from "@/hooks/useSettings";
 
+SplashScreen.preventAutoHideAsync();
+
 export default function RootLayout() {
   const { settings, ready } = useSettings();
 
+  useEffect(() => {
+    if (!ready) return;
+    SplashScreen.hideAsync();
+  }, [ready]);
+
   useEffect(() => {
     if (!ready) return;
     if (!settings.onboardingDone) {
@@ -17,23 +25,25 @@ export default function RootLayout() {
   }, [ready, settings.onboardingDone]);
 
   return (
-    <GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
-      <StatusBar style="light" />
-      <Stack
-        screenOptions={{
-          headerStyle: { backgroundColor: Colors.surface },
-          headerTintColor: Colors.text1,
-          headerTitleStyle: { color: Colors.text1 },
-          contentStyle: { backgroundColor: Colors.bg },
-          animation: "slide_from_right",
-        }}
-      >
-        <Stack.Screen name="index" options={{ title: "SheetHappens" }} />
-        <Stack.Screen name="new" options={{ title: "New Incident", presentation: "modal" }} />
-        <Stack.Screen name="incident/[id]" options={{ title: "Incident" }} />
-        <Stack.Screen name="settings" options={{ title: "Settings" }} />
-        <Stack.Screen name="onboarding" options={{ headerShown: false }} />
-      </Stack>
-    </GestureHandlerRootView>
+    <SafeAreaProvider>
+      <GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
+        <StatusBar style="light" />
+        <Stack
+          screenOptions={{
+            headerStyle: { backgroundColor: Colors.surface },
+            headerTintColor: Colors.text1,
+            headerTitleStyle: { color: Colors.text1 },
+            contentStyle: { backgroundColor: Colors.bg },
+            animation: "slide_from_right",
+          }}
+        >
+          <Stack.Screen name="index" options={{ title: "SheetHappens" }} />
+          <Stack.Screen name="new" options={{ title: "New Incident", presentation: "modal" }} />
+          <Stack.Screen name="incident/[id]" options={{ title: "Incident" }} />
+          <Stack.Screen name="settings" options={{ title: "Settings" }} />
+          <Stack.Screen name="onboarding" options={{ headerShown: false }} />
+        </Stack>
+      </GestureHandlerRootView>
+    </SafeAreaProvider>
   );
 }