diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index a28ec62..143e62b 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,6 +1,7 @@
 import { Tabs } from 'expo-router';
 import React from 'react';
 import { Feather } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { HapticTab } from '@/components/haptic-tab';
 import { AppColors } from '@/constants/theme';
@@ -9,6 +10,14 @@ import { useColorScheme } from '@/hooks/use-color-scheme';
 export default function TabLayout() {
   const colorScheme = useColorScheme();
   const isDark = colorScheme === 'dark';
+  const insets = useSafeAreaInsets();
+
+  // Calculate tab bar height based on safe area
+  // On Android with navigation buttons (Samsung), insets.bottom is the nav bar height
+  // On iOS with home indicator, insets.bottom is ~34px
+  // Minimum padding of 10px for devices without safe area
+  const bottomPadding = Math.max(insets.bottom, 10);
+  const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding
 
   return (
     <Tabs
@@ -18,8 +27,8 @@ export default function TabLayout() {
         tabBarStyle: {
           backgroundColor: isDark ? '#151718' : AppColors.background,
           borderTopColor: isDark ? '#2D3135' : AppColors.border,
-          height: 85,
-          paddingBottom: 25,
+          height: tabBarHeight,
+          paddingBottom: bottomPadding,
           paddingTop: 10,
         },
         tabBarLabelStyle: {