diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts
index 945c201a6617..3e62a56f152d 100644
--- a/suite-native/app/app.config.ts
+++ b/suite-native/app/app.config.ts
@@ -118,6 +118,7 @@ const getPlugins = (): ExpoPlugins => {
                 },
                 ios: {
                     deploymentTarget: '15.1',
+                    useFrameworks: 'static',
                 },
             },
         ],
@@ -135,6 +136,7 @@ const getPlugins = (): ExpoPlugins => {
                 subdomains: '*',
             },
         ],
+        'react-native-bottom-tabs',
     ];
 
     return [
diff --git a/suite-native/app/package.json b/suite-native/app/package.json
index a47b0b879119..a6a1562d23a0 100644
--- a/suite-native/app/package.json
+++ b/suite-native/app/package.json
@@ -21,6 +21,7 @@
         "reverse-ports": "adb reverse tcp:8081 tcp:8081 && adb reverse tcp:21325 tcp:21325 && adb reverse tcp:19121 tcp:19121"
     },
     "dependencies": {
+        "@bottom-tabs/react-navigation": "^0.7.6",
         "@gorhom/bottom-sheet": "5.0.5",
         "@mobily/ts-belt": "^3.13.1",
         "@react-native-community/netinfo": "^11.4.1",
@@ -36,6 +37,7 @@
         "@suite-common/analytics": "workspace:*",
         "@suite-common/connect-init": "workspace:*",
         "@suite-common/formatters": "workspace:*",
+        "@suite-common/icons": "workspace:*",
         "@suite-common/message-system": "workspace:*",
         "@suite-common/redux-utils": "workspace:*",
         "@suite-common/suite-constants": "workspace:*",
@@ -110,6 +112,7 @@
         "react": "18.2.0",
         "react-intl": "^6.6.8",
         "react-native": "0.76.1",
+        "react-native-bottom-tabs": "^0.7.6",
         "react-native-gesture-handler": "^2.21.0",
         "react-native-keyboard-aware-scroll-view": "0.9.5",
         "react-native-mmkv": "2.12.2",
diff --git a/suite-native/app/src/navigation/AppTabNavigator.tsx b/suite-native/app/src/navigation/AppTabNavigator.tsx
index 1b0a59e47f07..6bf11c756947 100644
--- a/suite-native/app/src/navigation/AppTabNavigator.tsx
+++ b/suite-native/app/src/navigation/AppTabNavigator.tsx
@@ -1,34 +1,87 @@
-import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';
 
 import { ReceiveStackNavigator } from '@suite-native/module-receive';
 import { HomeStackNavigator } from '@suite-native/module-home';
 import { AccountsStackNavigator } from '@suite-native/module-accounts-management';
 import { SettingsStackNavigator } from '@suite-native/module-settings';
-import { AppTabsParamList, AppTabsRoutes, TabBar } from '@suite-native/navigation';
+import { AppTabsRoutes } from '@suite-native/navigation';
 import { useHandleDeviceRequestsPassphrase } from '@suite-native/device-authorization';
+import { useNativeStyles } from '@trezor/styles';
+import { useTranslate } from '@suite-native/intl';
 
-import { rootTabsOptions } from './routes';
-
-const Tab = createBottomTabNavigator<AppTabsParamList>();
+const Tab = createNativeBottomTabNavigator();
 
 export const AppTabNavigator = () => {
     useHandleDeviceRequestsPassphrase();
+    const { utils } = useNativeStyles();
+    const { translate } = useTranslate();
 
     return (
         <Tab.Navigator
             initialRouteName={AppTabsRoutes.HomeStack}
-            screenOptions={{
-                headerShown: false,
-                unmountOnBlur: true,
+            tabLabelStyle={{
+                fontFamily: utils.typography.label.fontFamily,
+                fontSize: utils.typography.label.fontSize,
             }}
-            tabBar={(props: BottomTabBarProps) => (
-                <TabBar tabItemOptions={rootTabsOptions} {...props} />
-            )}
+            barTintColor={utils.colors.backgroundSurfaceElevation0}
+            tabBarActiveTintColor={utils.colors.iconPrimaryDefault}
+            activeIndicatorColor={utils.colors.backgroundNeutralDisabled}
+            tabBarInactiveTintColor={utils.colors.iconDisabled}
+            // disable page animations because it looks strange with device switcher
+            // we should try to move device switcher outside of navigator
+            disablePageAnimations
+            labeled={true}
         >
-            <Tab.Screen name={AppTabsRoutes.HomeStack} component={HomeStackNavigator} />
-            <Tab.Screen name={AppTabsRoutes.AccountsStack} component={AccountsStackNavigator} />
-            <Tab.Screen name={AppTabsRoutes.ReceiveStack} component={ReceiveStackNavigator} />
-            <Tab.Screen name={AppTabsRoutes.SettingsStack} component={SettingsStackNavigator} />
+            <Tab.Screen
+                name={AppTabsRoutes.HomeStack}
+                component={HomeStackNavigator}
+                options={{
+                    tabBarIcon: ({ focused }: { focused: boolean }) =>
+                        focused
+                            ? require('@suite-common/icons/assets/houseFilled.svg')
+                            : require('@suite-common/icons/assets/house.svg'),
+                    tabBarLabel: translate('tabBar.home'),
+                }}
+                testID={`@tabBar/${AppTabsRoutes.HomeStack}`}
+                tabBarButtonTestID={`@tabBar/${AppTabsRoutes.HomeStack}`}
+            />
+            <Tab.Screen
+                name={AppTabsRoutes.AccountsStack}
+                component={AccountsStackNavigator}
+                options={{
+                    tabBarIcon: ({ focused }: { focused: boolean }) =>
+                        focused
+                            ? require('@suite-common/icons/assets/discoverFilled.svg')
+                            : require('@suite-common/icons/assets/discover.svg'),
+                    tabBarLabel: translate('tabBar.accounts'),
+                }}
+                testID={`@tabBar/${AppTabsRoutes.AccountsStack}`}
+                tabBarButtonTestID={`@tabBar/${AppTabsRoutes.AccountsStack}`}
+            />
+            <Tab.Screen
+                name={AppTabsRoutes.ReceiveStack}
+                component={ReceiveStackNavigator}
+                options={{
+                    // filled arrow looks ugly, let's use the same icon for both focused and non-focused
+                    tabBarIcon: () => require('@suite-common/icons/assets/arrowLineDown.svg'),
+                    tabBarLabel: translate('tabBar.receive'),
+                }}
+                testID={`@tabBar/${AppTabsRoutes.ReceiveStack}`}
+                tabBarButtonTestID={`@tabBar/${AppTabsRoutes.ReceiveStack}`}
+            />
+            <Tab.Screen
+                name={AppTabsRoutes.SettingsStack}
+                component={SettingsStackNavigator}
+                options={{
+                    tabBarIcon: ({ focused }: { focused: boolean }) =>
+                        focused
+                            ? require('@suite-common/icons/assets/gearFilled.svg')
+                            : require('@suite-common/icons/assets/gear.svg'),
+                    tabBarLabel: translate('tabBar.settings'),
+                }}
+                key={`@tabBar/${AppTabsRoutes.SettingsStack}`}
+                tabBarButtonTestID={`@tabBar/${AppTabsRoutes.SettingsStack}`}
+            />
         </Tab.Navigator>
     );
 };
diff --git a/suite-native/app/tsconfig.json b/suite-native/app/tsconfig.json
index c60093a96d08..266f140ae013 100644
--- a/suite-native/app/tsconfig.json
+++ b/suite-native/app/tsconfig.json
@@ -11,6 +11,7 @@
         {
             "path": "../../suite-common/formatters"
         },
+        { "path": "../../suite-common/icons" },
         {
             "path": "../../suite-common/message-system"
         },
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
index 2adb3c83787d..08ed59cd30f2 100644
--- a/suite-native/intl/src/en.ts
+++ b/suite-native/intl/src/en.ts
@@ -27,6 +27,12 @@ export const en = {
         offline: "You're offline.",
         tokens: '+ Tokens',
     },
+    tabBar: {
+        home: 'Home',
+        accounts: 'Accounts',
+        receive: 'Receive',
+        settings: 'Settings',
+    },
     messageSystem: {
         killswitch: {
             title: 'Update required',
diff --git a/yarn.lock b/yarn.lock
index bddf3412d726..ef2910ea0fc4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1867,6 +1867,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bottom-tabs/react-navigation@npm:^0.7.6":
+  version: 0.7.6
+  resolution: "@bottom-tabs/react-navigation@npm:0.7.6"
+  dependencies:
+    color: "npm:^4.2.3"
+  peerDependencies:
+    "@react-navigation/native": ">=7"
+    react: "*"
+    react-native: "*"
+    react-native-bottom-tabs: "*"
+  checksum: 10/f8b073763aac499d5189a13bdaad7d955acb288a7719d8d2e4e86903692ba5f66d1f2788bb2b9e0a662aadede1a31b9f45b62af94e706f30d5485f17f4bb18a1
+  languageName: node
+  linkType: hard
+
 "@braintree/sanitize-url@npm:^6.0.1":
   version: 6.0.4
   resolution: "@braintree/sanitize-url@npm:6.0.4"
@@ -9905,6 +9919,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.20.0"
     "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4"
+    "@bottom-tabs/react-navigation": "npm:^0.7.6"
     "@config-plugins/detox": "npm:^8.0.0"
     "@currents/cmd": "npm:^1.6.0"
     "@gorhom/bottom-sheet": "npm:5.0.5"
@@ -9924,6 +9939,7 @@ __metadata:
     "@suite-common/analytics": "workspace:*"
     "@suite-common/connect-init": "workspace:*"
     "@suite-common/formatters": "workspace:*"
+    "@suite-common/icons": "workspace:*"
     "@suite-common/message-system": "workspace:*"
     "@suite-common/redux-utils": "workspace:*"
     "@suite-common/suite-constants": "workspace:*"
@@ -10009,6 +10025,7 @@ __metadata:
     react: "npm:18.2.0"
     react-intl: "npm:^6.6.8"
     react-native: "npm:0.76.1"
+    react-native-bottom-tabs: "npm:^0.7.6"
     react-native-gesture-handler: "npm:^2.21.0"
     react-native-keyboard-aware-scroll-view: "npm:0.9.5"
     react-native-mmkv: "npm:2.12.2"
@@ -35813,6 +35830,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-bottom-tabs@npm:^0.7.6":
+  version: 0.7.6
+  resolution: "react-native-bottom-tabs@npm:0.7.6"
+  dependencies:
+    sf-symbols-typescript: "npm:^2.0.0"
+    use-latest-callback: "npm:^0.2.1"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/29d41409b861dee18d789f676191048a6a3c8d68342252a5234da08953be46f695155baacd8909543aeb3b9f79f6576578f0f631626296079b4b1a7fc1ee31e1
+  languageName: node
+  linkType: hard
+
 "react-native-gesture-handler@npm:^2.21.0":
   version: 2.21.0
   resolution: "react-native-gesture-handler@npm:2.21.0"
@@ -38112,6 +38142,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sf-symbols-typescript@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "sf-symbols-typescript@npm:2.0.0"
+  checksum: 10/dde81c01265bdff16f527e1242af03793460c3c5f34ca6950ab1ca73a3bccd54ebabfcd56961658e72f94baac06ad620134a0bc03b0674dd543d4883c7d5e18f
+  languageName: node
+  linkType: hard
+
 "sha.js@npm:^2.3.6, sha.js@npm:^2.4.0, sha.js@npm:^2.4.8":
   version: 2.4.11
   resolution: "sha.js@npm:2.4.11"