diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx
index 5d77e94..6b9c6e6 100644
--- a/app/(application)/_layout.tsx
+++ b/app/(application)/_layout.tsx
@@ -20,10 +20,12 @@ import { StatusBar } from 'expo-status-bar';
 import { useEffect } from "react";
 import { Easing, Notifier } from 'react-native-notifier';
 import { Provider } from "react-redux";
+import { useTheme } from "@/providers/ThemeProvider";
 
 export default function RootLayout() {
    const { token, decryptToken, isLoading } = useAuthSession()
    const pathname = usePathname()
+   const { colors } = useTheme()
 
    async function handleReadNotification(id: string, category: string, idContent: string, title: string) {
       try {
@@ -93,11 +95,10 @@ export default function RootLayout() {
          <Stack screenOptions={{
             headerShown: true,
             animation: "slide_from_right",
-
-            // ⬇️ PENTING BANGET
             animationTypeForReplace: "pop",
             fullScreenGestureEnabled: true,
             gestureEnabled: true,
+            contentStyle: { backgroundColor: colors.header },
          }} >
             <Stack.Screen name="home" options={{ title: 'Home' }} />
             <Stack.Screen name="feature" options={{ title: 'Fitur' }} />
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 7f27fbb..5d0acb0 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,5 +1,5 @@
 import AuthProvider from '@/providers/AuthProvider';
-import ThemeProvider from '@/providers/ThemeProvider';
+import ThemeProvider, { useTheme } from '@/providers/ThemeProvider';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
@@ -13,6 +13,22 @@ import Styles from '@/constants/Styles';
 // Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
+// Inner component - berada di dalam ThemeProvider, bisa pakai useTheme()
+function AppStack() {
+  const { colors } = useTheme();
+
+  return (
+    <>
+      <Stack screenOptions={{ contentStyle: { backgroundColor: colors.header } }}>
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+        <Stack.Screen name="verification" options={{ headerShown: false }} />
+        <Stack.Screen name="(application)" options={{ headerShown: false }} />
+      </Stack>
+      <StatusBar style="auto" />
+    </>
+  );
+}
+
 export default function RootLayout() {
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
@@ -33,12 +49,7 @@ export default function RootLayout() {
       <NotifierWrapper>
         <ThemeProvider>
           <AuthProvider>
-            <Stack>
-              <Stack.Screen name="index" options={{ headerShown: false }} />
-              <Stack.Screen name="verification" options={{ headerShown: false }} />
-              <Stack.Screen name="(application)" options={{ headerShown: false }} />
-            </Stack>
-            <StatusBar style="auto" />
+            <AppStack />
           </AuthProvider>
         </ThemeProvider>
       </NotifierWrapper>