diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index 6a5a436..514ad17 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -17,6 +17,7 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: Colors[theme].tint,
+        tabBarInactiveTintColor: Colors[theme].tabIconDefault,
         headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 3c9d5bf..49eaa5b 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -7,6 +7,7 @@ import { Stack } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
 
+import { Colors } from "@/constants/theme";
 import { ThemeProvider } from "@/context/ThemeContext";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 import "@/i18n"; // Initialize i18n
@@ -25,11 +26,35 @@ export default function RootLayout() {
 
 function RootLayoutNav() {
   const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  // Custom navigation theme to ensure proper colors
+  const navigationTheme = isDark
+    ? {
+        ...DarkTheme,
+        colors: {
+          ...DarkTheme.colors,
+          background: Colors.dark.background,
+          card: Colors.dark.background,
+          text: Colors.dark.text,
+          border: Colors.dark.background,
+          notification: Colors.dark.tint,
+        },
+      }
+    : {
+        ...DefaultTheme,
+        colors: {
+          ...DefaultTheme.colors,
+          background: Colors.light.background,
+          card: Colors.light.background,
+          text: Colors.light.text,
+          border: Colors.light.background,
+          notification: Colors.light.tint,
+        },
+      };
 
   return (
-    <NavigationThemeProvider
-      value={colorScheme === "dark" ? DarkTheme : DefaultTheme}
-    >
+    <NavigationThemeProvider value={navigationTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen
diff --git a/components/ui/tab-bar-background.ios.tsx b/components/ui/tab-bar-background.ios.tsx
index a0b6f70..2ae72b8 100644
--- a/components/ui/tab-bar-background.ios.tsx
+++ b/components/ui/tab-bar-background.ios.tsx
@@ -3,12 +3,16 @@ import { BlurView } from "expo-blur";
 import { StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+import { useTheme } from "@/context/ThemeContext";
+
 export default function BlurTabBarBackground() {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+
   return (
     <BlurView
-      // System chrome material automatically adapts to the system's theme
-      // and matches the native tab bar appearance on iOS.
-      tint="systemChromeMaterial"
+      // Use theme-specific tint to ensure proper background color
+      tint={isDark ? "dark" : "light"}
       intensity={100}
       style={StyleSheet.absoluteFill}
     />