diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 41f25d1..e06b63e 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,12 +1,19 @@
-import { NavigationContainer } from "@react-navigation/native";
+import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
+import { Box } from "@gluestack-ui/themed";
 
 import { AuthRoutes } from "./auth.routes";
+import { gluestackUIConfig } from "../../config/gluestack-ui.config";
 
 export function Routes() {
+  const theme = DefaultTheme;
+  theme.colors.background = gluestackUIConfig.tokens.colors.gray700;
+
   return (
-    <NavigationContainer>
-      <AuthRoutes />
-    </NavigationContainer>
+    <Box flex={1} bg="$gray700">
+      <NavigationContainer theme={theme}>
+        <AuthRoutes />
+      </NavigationContainer>
+    </Box>
   )
 }
       
diff --git a/src/screens/SignIn.tsx b/src/screens/SignIn.tsx
index 94bb058..a8aadcd 100644
--- a/src/screens/SignIn.tsx
+++ b/src/screens/SignIn.tsx
@@ -11,7 +11,7 @@ export function SignIn() {
       contentContainerStyle={{ flexGrow: 1 }}
       showsVerticalScrollIndicator={false}
     >
-    <VStack flex={1} bg="$gray700">
+    <VStack flex={1}>
       <Image
         source={BackgroundImg}
         defaultSource={BackgroundImg}
diff --git a/src/screens/SignUp.tsx b/src/screens/SignUp.tsx
index 1fda82b..b809184 100644
--- a/src/screens/SignUp.tsx
+++ b/src/screens/SignUp.tsx
@@ -11,7 +11,7 @@ export function SignUp() {
       contentContainerStyle={{ flexGrow: 1 }}
       showsVerticalScrollIndicator={false}
     >
-    <VStack flex={1} bg="$gray700">
+    <VStack flex={1}>
       <Image
         source={BackgroundImg}
         defaultSource={BackgroundImg}