diff --git a/packages/legacy/core/App/components/misc/NewQRView.tsx b/packages/legacy/core/App/components/misc/NewQRView.tsx
index c1459015b5..241ea96d7a 100644
--- a/packages/legacy/core/App/components/misc/NewQRView.tsx
+++ b/packages/legacy/core/App/components/misc/NewQRView.tsx
@@ -42,7 +42,7 @@ const NewQRView: React.FC<Props> = ({ defaultToConnect, handleCodeScan, error, e
   const [recordId, setRecordId] = useState<string | undefined>(undefined)
   const { t } = useTranslation()
   const invalidQrCodes = new Set<string>()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPallet, TextTheme, TabTheme } = useTheme()
   const { agent } = useAgent()
   const styles = StyleSheet.create({
     container: {
@@ -84,10 +84,7 @@ const NewQRView: React.FC<Props> = ({ defaultToConnect, handleCodeScan, error, e
     },
     tabContainer: {
       flexDirection: 'row',
-      flexShrink: 1,
-      width: '100%',
-      borderTopWidth: 4,
-      borderTopColor: ColorPallet.brand.primaryBackground,
+      ...TabTheme.tabBarStyle,
     },
     qrContainer: {
       marginTop: 10,
diff --git a/packages/legacy/core/App/components/misc/ScanTab.tsx b/packages/legacy/core/App/components/misc/ScanTab.tsx
index eb08531cf3..80b6e3a286 100644
--- a/packages/legacy/core/App/components/misc/ScanTab.tsx
+++ b/packages/legacy/core/App/components/misc/ScanTab.tsx
@@ -1,32 +1,30 @@
 import React from 'react'
-import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialIcons'
 
 import { useTheme } from '../../contexts/theme'
 import { testIdWithKey } from '../../utils/testable'
 
-interface Props {
+interface ScanTabProps {
   onPress: () => void
   active: boolean
   iconName: string
   title: string
 }
 
-const ScanTab: React.FC<Props> = ({ onPress, active, iconName, title }) => {
-  const { ColorPallet, TextTheme } = useTheme()
+const ScanTab: React.FC<ScanTabProps> = ({ onPress, active, iconName, title }) => {
+  const { TabTheme } = useTheme()
+  const { fontScale } = useWindowDimensions()
+  const showLabels = fontScale * TabTheme.tabBarTextStyle.fontSize < 18
+
   const styles = StyleSheet.create({
     container: {
-      flex: 1,
-      backgroundColor: ColorPallet.grayscale.white,
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: 10,
+      ...TabTheme.tabBarContainerStyle,
     },
     text: {
-      ...TextTheme.normal,
-    },
-    textActive: {
-      color: ColorPallet.brand.primary,
+      ...TabTheme.tabBarTextStyle,
+      color: active ? TabTheme.tabBarActiveTintColor : TabTheme.tabBarInactiveTintColor,
+      fontWeight: active ? 'bold' : 'normal',
     },
   })
   return (
@@ -36,8 +34,8 @@ const ScanTab: React.FC<Props> = ({ onPress, active, iconName, title }) => {
       accessibilityLabel={title}
       testID={testIdWithKey(title)}
     >
-      <Icon name={iconName} size={20} color={active ? styles.textActive.color : styles.text.color}></Icon>
-      <Text style={[styles.text, active && styles.textActive]}>{title}</Text>
+      <Icon name={iconName} size={30} color={styles.text.color}></Icon>
+      {showLabels ? <Text style={styles.text}>{title}</Text> : null}
     </TouchableOpacity>
   )
 }
diff --git a/packages/legacy/core/App/navigators/TabStack.tsx b/packages/legacy/core/App/navigators/TabStack.tsx
index 1b82ab2d2c..dccaedcc08 100644
--- a/packages/legacy/core/App/navigators/TabStack.tsx
+++ b/packages/legacy/core/App/navigators/TabStack.tsx
@@ -18,14 +18,13 @@ import CredentialStack from './CredentialStack'
 import HomeStack from './HomeStack'
 
 const TabStack: React.FC = () => {
-  const { width, height } = useWindowDimensions()
+  const { width, height, fontScale } = useWindowDimensions()
   const { useCustomNotifications, enableReuseConnections, enableImplicitInvitations } = useConfiguration()
   const { total } = useCustomNotifications()
   const { t } = useTranslation()
   const Tab = createBottomTabNavigator<TabStackParams>()
   const { assertConnectedNetwork } = useNetwork()
   const { ColorPallet, TabTheme } = useTheme()
-  const { fontScale } = useWindowDimensions()
   const showLabels = fontScale * TabTheme.tabBarTextStyle.fontSize < 18
   const styles = StyleSheet.create({
     tabBarIcon: {
diff --git a/packages/legacy/core/__tests__/components/__snapshots__/NewQRView.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/NewQRView.test.tsx.snap
index f781112ab1..6d73446028 100644
--- a/packages/legacy/core/__tests__/components/__snapshots__/NewQRView.test.tsx.snap
+++ b/packages/legacy/core/__tests__/components/__snapshots__/NewQRView.test.tsx.snap
@@ -19,11 +19,18 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
   <View
     style={
       Object {
-        "borderTopColor": "#000000",
-        "borderTopWidth": 4,
+        "backgroundColor": "#313132",
+        "borderTopWidth": 0,
         "flexDirection": "row",
-        "flexShrink": 1,
-        "width": "100%",
+        "height": 60,
+        "paddingBottom": 0,
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": -3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.1,
+        "shadowRadius": 6,
       }
     }
   >
@@ -59,11 +66,9 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF",
           "flex": 1,
           "justifyContent": "center",
           "opacity": 1,
-          "padding": 10,
         }
       }
       testID="com.ariesbifold:id/Scan.ScanQRCode"
@@ -75,7 +80,7 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
           Array [
             Object {
               "color": "#42803E",
-              "fontSize": 20,
+              "fontSize": 30,
             },
             undefined,
             Object {
@@ -89,22 +94,6 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
       >
         
       </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 18,
-              "fontWeight": "normal",
-            },
-            Object {
-              "color": "#42803E",
-            },
-          ]
-        }
-      >
-        Scan.ScanQRCode
-      </Text>
     </View>
     <View
       accessibilityLabel="Scan.MyQRCode"
@@ -138,11 +127,9 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF",
           "flex": 1,
           "justifyContent": "center",
           "opacity": 1,
-          "padding": 10,
         }
       }
       testID="com.ariesbifold:id/Scan.MyQRCode"
@@ -154,7 +141,7 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
           Array [
             Object {
               "color": "#FFFFFF",
-              "fontSize": 20,
+              "fontSize": 30,
             },
             undefined,
             Object {
@@ -168,20 +155,6 @@ exports[`NewQRView Component Renders correctly on first tab 1`] = `
       >
         
       </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 18,
-              "fontWeight": "normal",
-            },
-            false,
-          ]
-        }
-      >
-        Scan.MyQRCode
-      </Text>
     </View>
   </View>
 </RNCSafeAreaView>
@@ -369,11 +342,18 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
   <View
     style={
       Object {
-        "borderTopColor": "#000000",
-        "borderTopWidth": 4,
+        "backgroundColor": "#313132",
+        "borderTopWidth": 0,
         "flexDirection": "row",
-        "flexShrink": 1,
-        "width": "100%",
+        "height": 60,
+        "paddingBottom": 0,
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": -3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.1,
+        "shadowRadius": 6,
       }
     }
   >
@@ -409,11 +389,9 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF",
           "flex": 1,
           "justifyContent": "center",
           "opacity": 1,
-          "padding": 10,
         }
       }
       testID="com.ariesbifold:id/Scan.ScanQRCode"
@@ -425,7 +403,7 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
           Array [
             Object {
               "color": "#FFFFFF",
-              "fontSize": 20,
+              "fontSize": 30,
             },
             undefined,
             Object {
@@ -439,20 +417,6 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
       >
         
       </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 18,
-              "fontWeight": "normal",
-            },
-            false,
-          ]
-        }
-      >
-        Scan.ScanQRCode
-      </Text>
     </View>
     <View
       accessibilityLabel="Scan.MyQRCode"
@@ -486,11 +450,9 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "backgroundColor": "#FFFFFF",
           "flex": 1,
           "justifyContent": "center",
           "opacity": 1,
-          "padding": 10,
         }
       }
       testID="com.ariesbifold:id/Scan.MyQRCode"
@@ -502,7 +464,7 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
           Array [
             Object {
               "color": "#42803E",
-              "fontSize": 20,
+              "fontSize": 30,
             },
             undefined,
             Object {
@@ -516,22 +478,6 @@ exports[`NewQRView Component Renders correctly on second tab 1`] = `
       >
         
       </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#FFFFFF",
-              "fontSize": 18,
-              "fontWeight": "normal",
-            },
-            Object {
-              "color": "#42803E",
-            },
-          ]
-        }
-      >
-        Scan.MyQRCode
-      </Text>
     </View>
   </View>
 </RNCSafeAreaView>
diff --git a/packages/legacy/core/__tests__/components/__snapshots__/ScanTab.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/ScanTab.test.tsx.snap
index 1f0f117467..6b528bc5f4 100644
--- a/packages/legacy/core/__tests__/components/__snapshots__/ScanTab.test.tsx.snap
+++ b/packages/legacy/core/__tests__/components/__snapshots__/ScanTab.test.tsx.snap
@@ -33,11 +33,9 @@ exports[`ScanTab Renders correctly 1`] = `
   style={
     Object {
       "alignItems": "center",
-      "backgroundColor": "#FFFFFF",
       "flex": 1,
       "justifyContent": "center",
       "opacity": 1,
-      "padding": 10,
     }
   }
   testID="com.ariesbifold:id/title"
@@ -49,7 +47,7 @@ exports[`ScanTab Renders correctly 1`] = `
       Array [
         Object {
           "color": "#42803E",
-          "fontSize": 20,
+          "fontSize": 30,
         },
         undefined,
         Object {
@@ -63,21 +61,5 @@ exports[`ScanTab Renders correctly 1`] = `
   >
     
   </Text>
-  <Text
-    style={
-      Array [
-        Object {
-          "color": "#FFFFFF",
-          "fontSize": 18,
-          "fontWeight": "normal",
-        },
-        Object {
-          "color": "#42803E",
-        },
-      ]
-    }
-  >
-    title
-  </Text>
 </View>
 `;