diff --git a/app/App.tsx b/app/App.tsx
index 62e4004a..192ba88a 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -21,7 +21,6 @@ import { useTranslation } from 'react-i18next'
 import { StatusBar } from 'react-native'
 import { isTablet } from 'react-native-device-info'
 import Orientation from 'react-native-orientation-locker'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
 import SplashScreen from 'react-native-splash-screen'
 import Toast from 'react-native-toast-message'
 import { container } from 'tsyringe'
@@ -83,9 +82,7 @@ const App = () => {
                     overlayColor={'black'}
                     overlayOpacity={0.7}
                   >
-                    <SafeAreaProvider>
-                      <RootStack />
-                    </SafeAreaProvider>
+                    <RootStack />
                   </TourProvider>
                   <Toast topOffset={15} config={toastConfig} />
                 </NetworkProvider>
diff --git a/app/src/navigators/TabStack.tsx b/app/src/navigators/TabStack.tsx
index 6391c4e7..25dad065 100644
--- a/app/src/navigators/TabStack.tsx
+++ b/app/src/navigators/TabStack.tsx
@@ -39,10 +39,10 @@ const TabStack: React.FC = () => {
 
   const tabBarIconContainerStyles = (focused: boolean): ViewStyle => ({
     ...TabTheme.tabBarContainerStyle,
-    borderTopWidth: focused ? 4 : 0,
-    borderTopColor: ColorPallet.brand.primary,
+    borderTopWidth: 4,
+    borderTopColor: focused ? ColorPallet.brand.primary : ColorPallet.brand.primaryBackground,
     width: '100%',
-    justifyContent: showLabels ? 'flex-end' : 'center',
+    justifyContent: 'center',
   })
 
   const tabs = [
@@ -89,7 +89,7 @@ const TabStack: React.FC = () => {
             <View
               style={{
                 position: 'absolute',
-                top: props.focused ? 2 : 10,
+                top: 2,
                 left: '55%',
                 width: 16,
                 height: 16,
@@ -97,7 +97,6 @@ const TabStack: React.FC = () => {
                 backgroundColor: ColorPallet.brand.primary,
                 justifyContent: 'center',
                 alignItems: 'center',
-                borderWidth: 1,
               }}
             >
               <Text
@@ -117,7 +116,7 @@ const TabStack: React.FC = () => {
   }
 
   return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: ColorPallet.brand.primary }}>
+    <SafeAreaView edges={['top']} style={{ flex: 1, backgroundColor: ColorPallet.brand.primary }}>
       <Tab.Navigator
         initialRouteName={TabStacks.HomeStack}
         screenOptions={{
diff --git a/app/src/theme.ts b/app/src/theme.ts
index e4933f0c..896f4a83 100644
--- a/app/src/theme.ts
+++ b/app/src/theme.ts
@@ -431,7 +431,7 @@ export const ListItems = StyleSheet.create({
 
 export const TabTheme = {
   tabBarStyle: {
-    height: 72,
+    height: 80,
     backgroundColor: ColorPallet.brand.secondaryBackground,
     shadowOffset: { width: 0, height: -3 },
     shadowRadius: 6,
@@ -439,6 +439,7 @@ export const TabTheme = {
     shadowOpacity: 0.1,
     borderTopWidth: 0,
     paddingBottom: 0,
+    elevation: 6,
   },
   tabBarContainerStyle: {
     flex: 1,