diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index feafe32e..4e2e7f80 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -8,7 +8,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v1
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 893eddd6..70ffdf77 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["icomoon"],
+  "cSpell.words": ["icomoon", "notificated", "postsecondary"],
   "todohighlight.keywords": [
     {
       "text": "CONFIG:",
diff --git a/App.tsx b/App.tsx
index d7211dba..e22bc10e 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,12 +1,15 @@
 // FIXME: see how why did you render works
 // import './wdyr'
+
+// This is added to support web for reaniamted: https://github.com/software-mansion/react-native-reanimated/issues/4140#issuecomment-1455209588
 import 'setimmediate'
 import 'react-native-reanimated'
+
+// Rest imports
 import '~i18n'
 import * as Device from 'expo-device'
+import 'expo-router/entry'
 
-import { Navigation } from '~navigation'
-import { Providers } from '~providers'
 import { enableAndroidBackgroundNotificationListener, startMockedServer } from '~services'
 
 // FIXME: there is some issue with miragejs that causes console.log to not work
@@ -27,13 +30,3 @@ if (DISABLE_CONSOLE_ENABLE_MOCKED_SERVER) {
 if (Device.isDevice) {
   enableAndroidBackgroundNotificationListener()
 }
-
-const App = (): JSX.Element => {
-  return (
-    <Providers>
-      <Navigation />
-    </Providers>
-  )
-}
-
-export default App
diff --git a/app.json b/app.json
index ece771cb..660fdbf7 100644
--- a/app.json
+++ b/app.json
@@ -22,6 +22,9 @@
     },
     "userInterfaceStyle": "automatic",
     "version": "2.1.0",
-    "plugins": ["expo-font", "expo-localization", "expo-secure-store"]
+    "plugins": ["expo-font", "expo-localization", "expo-secure-store", "expo-router"],
+    "web": {
+      "bundler": "metro"
+    }
   }
 }
diff --git a/app/(app)/(auth)/_layout.tsx b/app/(app)/(auth)/_layout.tsx
new file mode 100644
index 00000000..df38fb8e
--- /dev/null
+++ b/app/(app)/(auth)/_layout.tsx
@@ -0,0 +1,17 @@
+import { Redirect, Stack } from 'expo-router'
+
+import { useAuth } from '~hooks'
+
+export const unstable_settings = {
+  initialRouteName: 'sign-in',
+}
+
+export default function AuthLayout() {
+  const { isSignedIn } = useAuth()
+
+  if (isSignedIn === true) {
+    return <Redirect href="/home" />
+  }
+
+  return <Stack />
+}
diff --git a/app/(app)/(auth)/sign-in.tsx b/app/(app)/(auth)/sign-in.tsx
new file mode 100644
index 00000000..f75d4a25
--- /dev/null
+++ b/app/(app)/(auth)/sign-in.tsx
@@ -0,0 +1,3 @@
+import { SignInScreen } from '~screens'
+
+export default SignInScreen
diff --git a/app/(app)/(auth)/sign-up.tsx b/app/(app)/(auth)/sign-up.tsx
new file mode 100644
index 00000000..94ad1b91
--- /dev/null
+++ b/app/(app)/(auth)/sign-up.tsx
@@ -0,0 +1,3 @@
+import { SignUpScreen } from '~screens'
+
+export default SignUpScreen
diff --git a/app/(app)/(modals)/_layout.tsx b/app/(app)/(modals)/_layout.tsx
new file mode 100644
index 00000000..47022e3b
--- /dev/null
+++ b/app/(app)/(modals)/_layout.tsx
@@ -0,0 +1,9 @@
+import { Stack } from 'expo-router'
+
+export const unstable_settings = {
+  initialRouteName: 'application-info',
+}
+
+export default function ModalsLayout() {
+  return <Stack />
+}
diff --git a/app/(app)/(modals)/application-info.tsx b/app/(app)/(modals)/application-info.tsx
new file mode 100644
index 00000000..d6ae0616
--- /dev/null
+++ b/app/(app)/(modals)/application-info.tsx
@@ -0,0 +1,3 @@
+import { ApplicationInfoScreen } from '~screens'
+
+export default ApplicationInfoScreen
diff --git a/app/(app)/(tabs)/_layout.tsx b/app/(app)/(tabs)/_layout.tsx
new file mode 100644
index 00000000..4209b19f
--- /dev/null
+++ b/app/(app)/(tabs)/_layout.tsx
@@ -0,0 +1,18 @@
+import { Redirect } from 'expo-router'
+
+import { useAuth } from '~hooks'
+import { ResponsiveNavigator } from '~navigation/tabNavigator/navigator'
+
+export const unstable_settings = {
+  initialRouteName: 'home',
+}
+
+export default function TabLayout() {
+  const { isSignedIn } = useAuth()
+
+  if (isSignedIn === false) {
+    return <Redirect href="/sign-in" />
+  }
+
+  return <ResponsiveNavigator />
+}
diff --git a/app/(app)/(tabs)/example/_layout.tsx b/app/(app)/(tabs)/example/_layout.tsx
new file mode 100644
index 00000000..92789ee5
--- /dev/null
+++ b/app/(app)/(tabs)/example/_layout.tsx
@@ -0,0 +1,9 @@
+import { Stack } from 'expo-router'
+
+export const unstable_settings = {
+  initialRouteName: 'index',
+}
+
+export default function DynamicLayout() {
+  return <Stack />
+}
diff --git a/app/(app)/(tabs)/example/colors.tsx b/app/(app)/(tabs)/example/colors.tsx
new file mode 100644
index 00000000..6721eee5
--- /dev/null
+++ b/app/(app)/(tabs)/example/colors.tsx
@@ -0,0 +1,3 @@
+import { ColorsScreen } from '~screens'
+
+export default ColorsScreen
diff --git a/app/(app)/(tabs)/example/components.tsx b/app/(app)/(tabs)/example/components.tsx
new file mode 100644
index 00000000..6f5c79e2
--- /dev/null
+++ b/app/(app)/(tabs)/example/components.tsx
@@ -0,0 +1,3 @@
+import { ComponentsScreen } from '~screens'
+
+export default ComponentsScreen
diff --git a/app/(app)/(tabs)/example/data-from-be.tsx b/app/(app)/(tabs)/example/data-from-be.tsx
new file mode 100644
index 00000000..e7368d3a
--- /dev/null
+++ b/app/(app)/(tabs)/example/data-from-be.tsx
@@ -0,0 +1,3 @@
+import { DataFromBeScreen_EXAMPLE } from '~screens'
+
+export default DataFromBeScreen_EXAMPLE
diff --git a/app/(app)/(tabs)/example/index.tsx b/app/(app)/(tabs)/example/index.tsx
new file mode 100644
index 00000000..5343ca7f
--- /dev/null
+++ b/app/(app)/(tabs)/example/index.tsx
@@ -0,0 +1,3 @@
+import { ExamplesScreen } from '~screens'
+
+export default ExamplesScreen
diff --git a/app/(app)/(tabs)/example/test-form.tsx b/app/(app)/(tabs)/example/test-form.tsx
new file mode 100644
index 00000000..16c87b63
--- /dev/null
+++ b/app/(app)/(tabs)/example/test-form.tsx
@@ -0,0 +1,3 @@
+import { TestFormScreen } from '~screens'
+
+export default TestFormScreen
diff --git a/app/(app)/(tabs)/example/typography.tsx b/app/(app)/(tabs)/example/typography.tsx
new file mode 100644
index 00000000..467b08e6
--- /dev/null
+++ b/app/(app)/(tabs)/example/typography.tsx
@@ -0,0 +1,3 @@
+import { TypographyScreen } from '~screens'
+
+export default TypographyScreen
diff --git a/app/(app)/(tabs)/home/_layout.tsx b/app/(app)/(tabs)/home/_layout.tsx
new file mode 100644
index 00000000..92789ee5
--- /dev/null
+++ b/app/(app)/(tabs)/home/_layout.tsx
@@ -0,0 +1,9 @@
+import { Stack } from 'expo-router'
+
+export const unstable_settings = {
+  initialRouteName: 'index',
+}
+
+export default function DynamicLayout() {
+  return <Stack />
+}
diff --git a/app/(app)/(tabs)/home/details.tsx b/app/(app)/(tabs)/home/details.tsx
new file mode 100644
index 00000000..45347ddb
--- /dev/null
+++ b/app/(app)/(tabs)/home/details.tsx
@@ -0,0 +1,3 @@
+import { DetailsScreen } from '~screens'
+
+export default DetailsScreen
diff --git a/app/(app)/(tabs)/home/index.tsx b/app/(app)/(tabs)/home/index.tsx
new file mode 100644
index 00000000..dbfe4261
--- /dev/null
+++ b/app/(app)/(tabs)/home/index.tsx
@@ -0,0 +1,3 @@
+import { HomeScreen } from '~screens'
+
+export default HomeScreen
diff --git a/app/(app)/(tabs)/settings/_layout.tsx b/app/(app)/(tabs)/settings/_layout.tsx
new file mode 100644
index 00000000..92789ee5
--- /dev/null
+++ b/app/(app)/(tabs)/settings/_layout.tsx
@@ -0,0 +1,9 @@
+import { Stack } from 'expo-router'
+
+export const unstable_settings = {
+  initialRouteName: 'index',
+}
+
+export default function DynamicLayout() {
+  return <Stack />
+}
diff --git a/app/(app)/(tabs)/settings/index.tsx b/app/(app)/(tabs)/settings/index.tsx
new file mode 100644
index 00000000..8e6518a0
--- /dev/null
+++ b/app/(app)/(tabs)/settings/index.tsx
@@ -0,0 +1,3 @@
+import { SettingsScreen } from '~screens'
+
+export default SettingsScreen
diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx
new file mode 100644
index 00000000..c4bc25a2
--- /dev/null
+++ b/app/(app)/_layout.tsx
@@ -0,0 +1,11 @@
+import { Stack } from 'expo-router'
+
+export default function AppLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="(tabs)" />
+      <Stack.Screen name="(auth)" />
+      <Stack.Screen name="(modals)" options={{ presentation: 'modal' }} />
+    </Stack>
+  )
+}
diff --git a/app/+html.tsx b/app/+html.tsx
new file mode 100644
index 00000000..94f3c90c
--- /dev/null
+++ b/app/+html.tsx
@@ -0,0 +1,46 @@
+import { ScrollViewStyleReset } from 'expo-router/html'
+
+// This file is web-only and used to configure the root HTML for every
+// web page during static rendering.
+// The contents of this function only run in Node.js environments and
+// do not have access to the DOM or browser APIs.
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+
+        {/* 
+          This viewport disables scaling which makes the mobile website act more like a native app.
+          However this does reduce built-in accessibility. If you want to enable scaling, use this instead:
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+        */}
+        <meta
+          name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover"
+        />
+        {/* 
+          Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. 
+          However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
+        */}
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+        {/* Add any additional <head> elements that you want globally available on web... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`
diff --git a/app/[...unmatched].tsx b/app/[...unmatched].tsx
new file mode 100644
index 00000000..97b638f5
--- /dev/null
+++ b/app/[...unmatched].tsx
@@ -0,0 +1,3 @@
+import { NotFoundScreen } from '~screens'
+
+export default NotFoundScreen
diff --git a/app/_layout.tsx b/app/_layout.tsx
new file mode 100644
index 00000000..65648c9d
--- /dev/null
+++ b/app/_layout.tsx
@@ -0,0 +1,37 @@
+import { ThemeProvider } from '@react-navigation/native'
+import { Slot } from 'expo-router'
+
+import { AbsoluteFullFill, Loader } from '~components'
+import { useAuth, useNavigationTheme } from '~hooks'
+import { Providers } from '~providers'
+
+export const unstable_settings = {
+  initialRouteName: 'index',
+}
+
+const Layout = () => {
+  const { isSignedIn } = useAuth()
+  const { navigationTheme } = useNavigationTheme()
+
+  if (isSignedIn === null) {
+    return (
+      <AbsoluteFullFill w="full" h="full" justifyContent="center" alignItems="center">
+        <Loader type="bubbles" />
+      </AbsoluteFullFill>
+    )
+  }
+
+  return (
+    <ThemeProvider value={navigationTheme}>
+      <Slot />
+    </ThemeProvider>
+  )
+}
+
+export default function RootLayout() {
+  return (
+    <Providers>
+      <Layout />
+    </Providers>
+  )
+}
diff --git a/app/index.tsx b/app/index.tsx
new file mode 100644
index 00000000..dd6b8465
--- /dev/null
+++ b/app/index.tsx
@@ -0,0 +1,13 @@
+import { Redirect } from 'expo-router'
+
+import { useAuth } from '~hooks'
+
+export default function Root() {
+  const { isSignedIn } = useAuth()
+
+  if (isSignedIn === false) {
+    return <Redirect href="/sign-in" />
+  }
+
+  return <Redirect href="/home" />
+}
diff --git a/assets/logo/logo-full-dark.png b/assets/logo/logo-full-dark.png
new file mode 100644
index 00000000..a14668ad
Binary files /dev/null and b/assets/logo/logo-full-dark.png differ
diff --git a/assets/logo/logo-full-light.png b/assets/logo/logo-full-light.png
new file mode 100644
index 00000000..5f767a5a
Binary files /dev/null and b/assets/logo/logo-full-light.png differ
diff --git a/assets/logo/logo-sygnet-dark.png b/assets/logo/logo-sygnet-dark.png
new file mode 100644
index 00000000..a64f209b
Binary files /dev/null and b/assets/logo/logo-sygnet-dark.png differ
diff --git a/assets/logo/logo-sygnet-light.png b/assets/logo/logo-sygnet-light.png
new file mode 100644
index 00000000..eaba3433
Binary files /dev/null and b/assets/logo/logo-sygnet-light.png differ
diff --git a/declaration.d.ts b/declaration.d.ts
new file mode 100644
index 00000000..acd2815e
--- /dev/null
+++ b/declaration.d.ts
@@ -0,0 +1,5 @@
+// declaration.d.ts
+declare module '*.scss' {
+  const content: Record<string, string>
+  export default content
+}
diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 43a51177..95c575b1 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -2,7 +2,7 @@ import type * as Preset from '@docusaurus/preset-classic'
 import type { Config } from '@docusaurus/types'
 import { themes as prismThemes } from 'prism-react-renderer'
 
-const repoLink = 'https://github.com/binarapps/expo-ts-template'
+const repoLink = 'https://github.com/binarapps/baca-react-native-template'
 
 const config: Config = {
   title: 'BACA - react native starter',
@@ -39,15 +39,7 @@ const config: Config = {
           sidebarPath: './sidebars.ts',
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-        },
-        blog: {
-          showReadingTime: true,
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
-          editUrl:
-            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          editUrl: repoLink + '/tree/main/docs/',
         },
         theme: {
           customCss: './src/css/custom.css',
diff --git a/package.json b/package.json
index 0ded92dc..a9cc6573 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "eslint",
     "prettier"
   ],
+  "main": "expo-router/entry",
   "repository": {
     "type": "git",
     "url": "https://github.com/binarapps/baca-react-native-template.git"
@@ -85,6 +86,7 @@
     "whoami": "expo whoami"
   },
   "dependencies": {
+    "@bacons/react-views": "^1.1.3",
     "@expo/config-plugins": "~7.8.0",
     "@expo/prebuild-config": "~6.7.0",
     "@expo/vector-icons": "^14.0.0",
@@ -116,6 +118,7 @@
     "expo-localization": "~14.8.3",
     "expo-network": "~5.8.0",
     "expo-notifications": "~0.27.5",
+    "expo-router": "~3.4.6",
     "expo-screen-orientation": "~6.4.1",
     "expo-secure-store": "~12.8.1",
     "expo-splash-screen": "~0.26.4",
@@ -140,6 +143,7 @@
     "react-native-svg": "14.1.0",
     "react-native-web": "~0.19.6",
     "reactotron-react-native": "^5.0.3",
+    "sass": "^1.70.0",
     "setimmediate": "^1.0.5",
     "use-debounce": "^9.0.4"
   },
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 00000000..5ce3536e
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,48 @@
+import { NativeStackHeaderProps } from '@react-navigation/native-stack'
+import { useRouter } from 'expo-router'
+
+import { Touchable } from './atoms'
+
+import { Box, Column, Row, Icon, Text } from '~components/atoms'
+
+const logoHeight = 24
+
+export const Header = ({ options, ...rest }: NativeStackHeaderProps) => {
+  const router = useRouter()
+
+  console.log('options', {
+    options,
+    rest,
+    canGoBack: router.canGoBack(),
+    restxd: rest.navigation.getState(),
+    canGoBack2: rest.navigation.canGoBack(),
+  })
+
+  return (
+    <Column bg="white">
+      <Row bg="white" zIndex={3} justifyContent="space-between" alignItems="center">
+        <Box ml={4} width={24}>
+          {router.canGoBack() && (
+            <Touchable onPress={router.back}>
+              <Icon name="arrow-left-line" size={24} color="text" />
+            </Touchable>
+          )}
+        </Box>
+        {options.title ? (
+          <>
+            <Box height={logoHeight} />
+            <Row ml={8} flex={1}>
+              <Text.H4Bold numberOfLines={1} color="text">
+                {options.title}
+              </Text.H4Bold>
+            </Row>
+          </>
+        ) : (
+          <Box />
+        )}
+
+        <Box mr={4} width={24} />
+      </Row>
+    </Column>
+  )
+}
diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx
index 13c57580..39e65ed8 100644
--- a/src/components/LanguagePicker.tsx
+++ b/src/components/LanguagePicker.tsx
@@ -21,7 +21,7 @@ export const LanguagePicker: React.FC = () => {
 
   const { colorScheme } = useColorScheme()
   const { i18n } = useTranslation()
-  const language = i18n.language.slice(0, 2).toUpperCase() as keyof typeof languages
+  const language = i18n?.language?.slice?.(0, 2).toUpperCase() as keyof typeof languages
   const isOpen = useSharedValue(false)
 
   const rotateZ = useDerivedValue(() => withTiming(isOpen.value ? 180 : 0))
@@ -49,7 +49,7 @@ export const LanguagePicker: React.FC = () => {
         <Touchable {...props}>
           <Row alignItems="center">
             <Text fontSize="xl" pr={2}>
-              {languages[language].emoji}
+              {languages?.[language]?.emoji}
             </Text>
             <Animated.View style={[animatedIconStyle, styles.icon]}>
               <Icon size={24} name="arrow-down-s-line" color={iconColor} />
diff --git a/src/components/README.md b/src/components/README.md
index 96e9044a..815855c1 100644
--- a/src/components/README.md
+++ b/src/components/README.md
@@ -61,9 +61,9 @@ import { Input, AbsoluteFullFill } from '~components'
 const MyComponent: React.FC = () => (
   <AbsoluteFullFill>
     <Input
-      returnKeyType="next"
+      enterKeyHint="next"
       label="E-mail"
-      keyboardType="email-address"
+      inputMode="email"
       autoCapitalize="none"
       placeholder="E-mail placeholder"
     />
@@ -107,18 +107,18 @@ import { Spacer, Input, Container } from '~components'
 const MyComponent: React.FC = () => (
   <Container>
     <Input
-      returnKeyType="next"
-      label="E-mail"
-      keyboardType="email-address"
       autoCapitalize="none"
+      enterKeyHint="next"
+      inputMode="email"
+      label="E-mail"
       placeholder="E-mail placeholder"
     />
     <Spacer y="8" flex={1} />
     <Input
-      returnKeyType="next"
-      label="Confirm e-mail"
-      keyboardType="email-address"
       autoCapitalize="none"
+      enterKeyHint="next"
+      inputMode="email"
+      label="Confirm e-mail"
       placeholder="Confirm e-mail placeholder"
     />
   </Container>
@@ -195,12 +195,12 @@ import { Field } from '~components'
 
 const MyComponent: React.FC = () => (
   <Field.Input
-    isRequired
     autoCapitalize="none"
-    keyboardType="email-address"
+    enterKeyHint="next"
+    inputMode="email"
+    isRequired
     label="Email"
     placeholder="Email placeholder"
-    returnKeyType="next"
   />
 )
 
@@ -285,16 +285,15 @@ const MyComponent: React.FC = () => {
 
   return (
     <ControlledField.Input
+      {...{ control, errors }}
       autoCapitalize="none"
-      control={control}
-      errors={errors}
+      enterKeyHint="next"
+      inputMode="email"
       isRequired
-      keyboardType="email-address"
       label="Email"
       name="email"
       onSubmitEditing={passwordInputRef.current?.focus}
       placeholder="Email placeholder"
-      returnKeyType="next"
       rules={{
         required: 'Required',
         pattern: {
diff --git a/src/components/Version.tsx b/src/components/Version.tsx
index d6587dd4..47d210b0 100644
--- a/src/components/Version.tsx
+++ b/src/components/Version.tsx
@@ -20,7 +20,7 @@ export const Version = ({ onPress }: { onPress: () => void }) => {
   }, [version])
 
   return (
-    <Pressable onPress={handleShortPress} onLongPress={onPress} delayLongPress={7000}>
+    <Pressable onPress={handleShortPress} onLongPress={onPress} delayLongPress={1000}>
       <Text opacity={40}>{version}</Text>
       <Spacer y="1" />
     </Pressable>
diff --git a/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap b/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap
index 79fca203..7f4b1f9b 100644
--- a/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`Button renders correctly 1`] = `
     style={
       {
         "color": "#ffffff",
-        "fontFamily": "Lato-Regular",
+        "fontFamily": "Lato_700Bold",
         "fontSize": 16,
         "fontStyle": "normal",
         "fontWeight": "400",
diff --git a/src/components/atoms/Input.tsx b/src/components/atoms/Input.tsx
index a865864e..f574ac73 100644
--- a/src/components/atoms/Input.tsx
+++ b/src/components/atoms/Input.tsx
@@ -1,5 +1,11 @@
 import { forwardRef } from 'react'
-import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextStyle } from 'react-native'
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput,
+  TextInputFocusEventData,
+  TextStyle,
+} from 'react-native'
 
 import { Box } from './Box'
 import { Icon } from './Icon'
@@ -191,11 +197,12 @@ export const Input = forwardRef<TextInput, InputProps>(
 
     const handleFocus = useCallback(
       (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        if (isDisabled) return
         _inputRef.current?.focus()
         setIsFocused(true)
         if (onFocus && e) onFocus(e)
       },
-      [setIsFocused, onFocus]
+      [isDisabled, onFocus]
     )
 
     const handleBlur = useCallback(
@@ -236,7 +243,10 @@ export const Input = forwardRef<TextInput, InputProps>(
           autoCapitalize="none"
           color={isInvalid ? 'danger' : 'text'}
           cursorColor={colors.primaryLight}
-          editable={!isDisabled}
+          {...Platform.select({
+            default: { editable: !isDisabled },
+            web: { disabled: isDisabled },
+          })}
           flex={1}
           fontFamily="regular"
           fontSize="xs"
diff --git a/src/components/atoms/Text/Text.test.tsx b/src/components/atoms/Text/Text.test.tsx
index 249d6f84..40449834 100644
--- a/src/components/atoms/Text/Text.test.tsx
+++ b/src/components/atoms/Text/Text.test.tsx
@@ -5,6 +5,9 @@ import { cleanup, render } from '~utils/testUtils'
 
 afterEach(cleanup)
 
+console.error = jest.fn()
+console.warn = jest.fn()
+
 const defaultTextStyles = {
   textTransform: 'none',
   color: theme.light.colors.text,
@@ -115,8 +118,8 @@ describe('Text', () => {
     )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontWeight: 'bold',
       fontStyle: 'italic',
+      fontWeight: 'bold',
       color: theme.light.colors.red[400],
       textDecorationLine: 'underline',
     })
@@ -126,9 +129,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H1">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 48,
-      fontWeight: 'normal',
     })
   })
 
@@ -136,9 +138,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H1>Hello World</Text.H1>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 48,
-      fontWeight: 'normal',
     })
   })
 
@@ -146,9 +147,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H1Bold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 48,
-      fontWeight: 'bold',
     })
   })
 
@@ -156,9 +156,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H1Bold>Hello World</Text.H1Bold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 48,
-      fontWeight: 'bold',
     })
   })
 
@@ -166,9 +165,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H2">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 36,
-      fontWeight: 'normal',
     })
   })
 
@@ -176,9 +174,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H2>Hello World</Text.H2>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 36,
-      fontWeight: 'normal',
     })
   })
 
@@ -186,9 +183,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H2Bold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 36,
-      fontWeight: 'bold',
     })
   })
 
@@ -196,9 +192,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H2Bold>Hello World</Text.H2Bold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 36,
-      fontWeight: 'bold',
     })
   })
 
@@ -206,9 +201,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H3">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 30,
-      fontWeight: 'normal',
     })
   })
 
@@ -216,9 +210,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H3>Hello World</Text.H3>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 30,
-      fontWeight: 'normal',
     })
   })
 
@@ -226,9 +219,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H3Bold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 30,
-      fontWeight: 'bold',
     })
   })
 
@@ -236,9 +228,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H3Bold>Hello World</Text.H3Bold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 30,
-      fontWeight: 'bold',
     })
   })
 
@@ -246,9 +237,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H4">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 24,
-      fontWeight: 'normal',
     })
   })
 
@@ -256,9 +246,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H4>Hello World</Text.H4>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 24,
-      fontWeight: 'normal',
     })
   })
 
@@ -266,9 +255,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H4Bold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 24,
-      fontWeight: 'bold',
     })
   })
 
@@ -276,9 +264,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H4Bold>Hello World</Text.H4Bold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 24,
-      fontWeight: 'bold',
     })
   })
 
@@ -286,9 +273,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H5">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 20,
-      fontWeight: 'normal',
     })
   })
 
@@ -296,9 +282,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H5>Hello World</Text.H5>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 20,
-      fontWeight: 'normal',
     })
   })
 
@@ -306,9 +291,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H5Bold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 20,
-      fontWeight: 'bold',
     })
   })
 
@@ -316,9 +300,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H5Bold>Hello World</Text.H5Bold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 20,
-      fontWeight: 'bold',
     })
   })
 
@@ -326,9 +309,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H6">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 18,
-      fontWeight: 'normal',
     })
   })
 
@@ -336,9 +318,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H6>Hello World</Text.H6>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_400Regular',
       fontSize: 18,
-      fontWeight: 'normal',
     })
   })
 
@@ -346,9 +327,8 @@ describe('Text', () => {
     const { getByText } = render(<Text variant="H6Bold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 18,
-      fontWeight: 'bold',
     })
   })
 
@@ -356,9 +336,8 @@ describe('Text', () => {
     const { getByText } = render(<Text.H6Bold>Hello World</Text.H6Bold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
-      fontFamily: 'Lato-Bold',
+      fontFamily: 'Lato_700Bold',
       fontSize: 18,
-      fontWeight: 'bold',
     })
   })
 })
diff --git a/src/components/atoms/Text/Text.tsx b/src/components/atoms/Text/Text.tsx
index c88b92ac..a540f81d 100644
--- a/src/components/atoms/Text/Text.tsx
+++ b/src/components/atoms/Text/Text.tsx
@@ -12,7 +12,7 @@ type TypographyProps = {
   fontSize?: FontSizes | number
   letterSpacing?: LetterSpacings
   lineHeight?: LineHeights
-  fontWeight?: FontWeights
+  fontWeight?: TextStyle['fontWeight']
   fontFamily?: Fonts
   color?: ColorNames
   noOfLines?: number
@@ -46,6 +46,7 @@ const RawText = memo(
         textTransform,
         underline,
         uppercase,
+        fontWeight,
         lowercase,
         style,
         variant,
@@ -140,7 +141,7 @@ const RawText = memo(
       const textStyle = useMemo(
         () =>
           generateStyleSheet<TextStyle>([
-            bold && { fontWeight: 'bold' },
+            (fontWeight || bold) && { fontWeight: fontWeight || 'bold' },
             italic && { fontStyle: 'italic' },
             fontFamilyStyle,
             fontSizeStyle,
@@ -153,15 +154,16 @@ const RawText = memo(
             style,
           ]),
         [
+          fontWeight,
           bold,
           italic,
           fontFamilyStyle,
           fontSizeStyle,
           textAlignmentStyle,
-          letterSpacingStyle,
-          lineHeightStyle,
           textColor,
           textDecorationStyle,
+          letterSpacingStyle,
+          lineHeightStyle,
           textTransformStyle,
           style,
         ]
diff --git a/src/components/molecules/Field/Input.tsx b/src/components/molecules/Field/Input.tsx
index 21c35918..b0e9186e 100644
--- a/src/components/molecules/Field/Input.tsx
+++ b/src/components/molecules/Field/Input.tsx
@@ -34,7 +34,6 @@ const layoutPropsKeys = [
 export const Input = forwardRef<Partial<TextInput>, FieldInputProps>(
   (
     {
-      isDisabled,
       isRequired,
       isInvalid,
       label,
diff --git a/src/constants/images.ts b/src/constants/images.ts
index e8414bd7..fa14b904 100644
--- a/src/constants/images.ts
+++ b/src/constants/images.ts
@@ -1,3 +1,9 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 export const darkLogo = require('~assets/logo-dark.png')
 export const lightLogo = require('~assets/logo-light.png')
+
+export const darkLogoFull = require('~assets/logo/logo-full-dark.png')
+export const lightLogoFull = require('~assets/logo/logo-full-light.png')
+
+export const darkLogoSygnet = require('~assets/logo/logo-sygnet-dark.png')
+export const lightLogoSygnet = require('~assets/logo/logo-sygnet-light.png')
diff --git a/src/hooks/navigation/index.ts b/src/hooks/navigation/index.ts
index 52c79acc..3dca4660 100644
--- a/src/hooks/navigation/index.ts
+++ b/src/hooks/navigation/index.ts
@@ -16,5 +16,6 @@ export { useCardAnimation, useGestureHandlerRef } from '@react-navigation/stack'
 export * from './useNavigationStatePersistence'
 export * from './useNavigationTheme'
 export * from './usePreventGoBack'
+export * from './useScreenOptions'
 export * from './useScreenTracker'
 export * from './useWeb'
diff --git a/src/hooks/navigation/useNavigationStatePersistence.ts b/src/hooks/navigation/useNavigationStatePersistence.ts
index 1f735f5b..88cf54ac 100644
--- a/src/hooks/navigation/useNavigationStatePersistence.ts
+++ b/src/hooks/navigation/useNavigationStatePersistence.ts
@@ -20,6 +20,7 @@ type NavigationStatePersistenceReturn = {
 
 const { NAVIGATION_STATE } = ASYNC_STORAGE_KEYS
 
+// TODO: make this work on expo router
 export const useNavigationStatePersistence = (): NavigationStatePersistenceReturn => {
   const [isReady, setIsReady] = useState(isProduction)
   const [initialState, setInitialState] = useState<InitialState>()
diff --git a/src/hooks/navigation/useNavigationTheme.ts b/src/hooks/navigation/useNavigationTheme.ts
index 2ef7fc5f..a2eb1c41 100644
--- a/src/hooks/navigation/useNavigationTheme.ts
+++ b/src/hooks/navigation/useNavigationTheme.ts
@@ -17,6 +17,9 @@ export const useNavigationTheme = () => {
         backgroundColor: colorScheme === 'dark' ? colors.gray[900] : colors.light,
         paddingTop: 4,
       },
+      tabBarIconStyle: {
+        marginTop: 0,
+      },
     }),
     [colors.primary, colors.gray, colors.light, colorScheme]
   )
diff --git a/src/hooks/navigation/usePreventGoBack.ts b/src/hooks/navigation/usePreventGoBack.ts
index ab2012e9..98494015 100644
--- a/src/hooks/navigation/usePreventGoBack.ts
+++ b/src/hooks/navigation/usePreventGoBack.ts
@@ -1,42 +1,66 @@
-import { useNavigation } from '@react-navigation/native'
-import { useEffect } from 'react'
+import {
+  EventListenerCallback,
+  EventMapCore,
+  usePreventRemoveContext,
+  useRoute,
+} from '@react-navigation/native'
+import { useNavigation } from 'expo-router'
+import { nanoid } from 'nanoid/non-secure'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
+import useLatestCallback from 'use-latest-callback'
 
 import { alert } from '~utils'
 
-export const usePreventGoBack = (shouldPrevent = true): void => {
+// This is copy of this hook: usePreventRemove
+// https://github.com/react-navigation/react-navigation/blob/90cfbf23bcc5259f3262691a9eec6c5b906e5262/packages/core/src/usePreventRemove.tsx#L17
+// Previous implementation wasn't working properly on expo router
+export const usePreventGoBack = (preventRemove = true) => {
   const { t } = useTranslation()
+  const [id] = React.useState(() => nanoid())
+
   const navigation = useNavigation()
+  const { key: routeKey } = useRoute()
+
+  const { setPreventRemove } = usePreventRemoveContext()
 
-  useEffect(() => {
+  React.useEffect(() => {
+    setPreventRemove(id, routeKey, preventRemove)
+    return () => {
+      setPreventRemove(id, routeKey, false)
+    }
+  }, [setPreventRemove, id, routeKey, preventRemove])
+
+  const beforeRemoveListener = useLatestCallback<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const callback = (event: any) => {
-      if (!shouldPrevent) {
-        return
-      }
-
-      event?.preventDefault()
-
-      alert(
-        t('navigation.prevent_go_back_alert.title'),
-        t('navigation.prevent_go_back_alert.description'),
-        [
-          {
-            text: t('navigation.prevent_go_back_alert.dont_leave'),
-            style: 'cancel',
-            onPress: () => undefined,
-          },
-          {
-            text: t('navigation.prevent_go_back_alert.discard'),
-            style: 'destructive',
-            onPress: () => navigation.dispatch(event?.data?.action),
-          },
-        ]
-      )
+    EventListenerCallback<EventMapCore<any>, 'beforeRemove'>
+  >((e) => {
+    if (!preventRemove) {
+      return
     }
 
-    navigation.addListener('beforeRemove', callback)
+    e.preventDefault()
+
+    alert(
+      t('navigation.prevent_go_back_alert.title'),
+      t('navigation.prevent_go_back_alert.description'),
+      [
+        {
+          text: t('navigation.prevent_go_back_alert.do_not_leave'),
+          style: 'cancel',
+          onPress: () => undefined,
+        },
+        {
+          text: t('navigation.prevent_go_back_alert.discard'),
+          style: 'destructive',
+          onPress: () => navigation.dispatch(e?.data?.action),
+        },
+      ]
+    )
+  })
 
-    return () => navigation.removeListener('beforeRemove', callback)
-  }, [navigation, shouldPrevent, t])
+  React.useEffect(
+    () => navigation?.addListener('beforeRemove', beforeRemoveListener),
+    [navigation, beforeRemoveListener]
+  )
 }
diff --git a/src/hooks/navigation/useScreenOptions.ts b/src/hooks/navigation/useScreenOptions.ts
new file mode 100644
index 00000000..82374a63
--- /dev/null
+++ b/src/hooks/navigation/useScreenOptions.ts
@@ -0,0 +1,16 @@
+import { useNavigation } from 'expo-router'
+import { useLayoutEffect } from 'react'
+
+export const useScreenOptions = ({
+  title,
+  presentation,
+}: {
+  title?: string
+  presentation?: string
+}) => {
+  const navigation = useNavigation()
+
+  useLayoutEffect(() => {
+    navigation.setOptions({ title, presentation })
+  }, [navigation, presentation, title])
+}
diff --git a/src/hooks/navigation/useScreenTracker.ts b/src/hooks/navigation/useScreenTracker.ts
index d2761201..a88695fe 100644
--- a/src/hooks/navigation/useScreenTracker.ts
+++ b/src/hooks/navigation/useScreenTracker.ts
@@ -16,6 +16,7 @@ type ScreenTrackerReturn = {
   onStateChange: () => Promise<void>
 }
 
+// TODO: make this work on expo router
 export const useScreenTracker = (callback = defaultCallback): ScreenTrackerReturn => {
   const routeNameRef = useRef<string>()
 
diff --git a/src/hooks/navigation/useWeb.ts b/src/hooks/navigation/useWeb.ts
index bebff2a5..44f85d1e 100644
--- a/src/hooks/navigation/useWeb.ts
+++ b/src/hooks/navigation/useWeb.ts
@@ -13,8 +13,6 @@ const { desktop, tablet } = breakpoints
 export const useWeb: () => ReturnType = () => {
   const [width, setWidth] = useState<number>(0)
 
-  console.log('useWeb', width)
-
   useEffect(() => {
     const setDimensions = (windowWidth: number, screenWidth: number) => {
       switch (true) {
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index b0d3d8e1..5024e7bd 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -1,7 +1,31 @@
 {
+  "common": {
+    "add": "Add",
+    "back": "Back",
+    "cancel": "Cancel",
+    "email_label": "E-mail",
+    "email_placeholder": "john@doe.com",
+    "empty_list": "The list is empty",
+    "go_back": "Go back",
+    "log_in": "Login",
+    "phone_label": "Telephone",
+    "remove": "Remove",
+    "save": "Save",
+    "search": "Search",
+    "send_again": "Send again",
+    "show_on_map": "Show on map",
+    "sign_in": "Sign in",
+    "sign_up": "Register",
+    "try_again_later": "Please try again later",
+    "try_again": "Try again",
+    "user_label": "User",
+    "user_placeholder": "user"
+  },
   "errors": {
     "screen_not_found": "NotFound screen",
-    "something_went_wrong": "Something went wrong"
+    "something_went_wrong": "Something went wrong",
+    "token_expired": "Token expired",
+    "missing_auth": "Missing auth"
   },
   "form": {
     "invalid_email_format": "Incorrect e-mail address",
@@ -11,77 +35,41 @@
     "prevent_go_back_alert": {
       "title": "Discard changes?",
       "description": "You have unsaved changes. Are you sure to discard them and leave the screen?",
-      "dont_leave": "Don't leave",
+      "do_not_leave": "Don't leave",
       "discard": "Discard"
     },
     "screen_titles": {
-      "home_stack": "Home",
+      "application_info": "ApplicationInfo",
+      "colors": "Colors",
+      "components": "Components",
+      "data_from_be_screen_example": "Data from BE",
+      "details": "Details",
       "examples_stack": "Examples",
       "examples": "Examples",
-      "components": "Components",
-      "colors": "Colors",
-      "typography": "Typography",
+      "home_stack": "Home",
       "home": "Home",
-      "details": "Details",
-      "sign_in": "Sign in",
-      "sign_up": "Sign up",
       "main_tab": "MainTab",
+      "not_found": "Not Found",
       "settings": "Settings",
-      "application_info": "ApplicationInfo",
-      "not_found": "NotFound",
-      "data_from_be_screen_example": "Data from BE"
+      "sign_in": "Sign in",
+      "sign_up": "Sign up",
+      "typography": "Typography"
     }
   },
-  "application_info_screen": {
-    "navigation_info": "When you will try to go back it will double ask if you really want to leave \n"
+  "update": {
+    "alert_title": "New version available",
+    "alert_message": "You will have to restart the application to have better experiences while using it",
+    "restart": "Restart"
   },
-  "sign_in_screen": {
-    "sign_in": "Sign in",
-    "sign_up": "Sign up",
-    "dont_have_an_account": "Don't have an account?",
-    "forgot_password": "Forgot your password?",
-    "or_pass": "or enter:",
-    "email_helper_text": "Email must be here",
-    "password_label": "Password",
-    "password_helper_text": "Password must be here",
-    "password_placeholder": "password",
-    "remember_me": "Remember me"
-  },
-  "sign_up_screen": {
-    "agree_terms_label": "I agree to the Terms and Conditions",
-    "newsletter_label": "Subscribe to our newsletter",
-    "sign_up": "Sign up"
+  "examples_component": {
+    "example": "Example"
   },
-  "home_screen": {
-    "details": "Details"
+  "application_info_screen": {
+    "navigation_info": "When you will try to go back it will double ask if you really want to leave \n"
   },
   "colors_screen": {
     "colors_label": "Colors"
   },
-  "typography_screen": {
-    "text_font_size": "Text.fontSize: ",
-    "heading_size": "Heading.size: "
-  },
-  "details_screen": {
-    "title": "This is details screen",
-    "open_bottom_sheet": "Open BottomSheetModal",
-    "screen_params": "Screen params: {{params}}",
-    "awesome": "Awesome 🎉"
-  },
-  "examples_component": {
-    "example": "Example"
-  },
-  "examples_screen": {
-    "header": "This is Example screen",
-    "go_to_application_info": "Go to ApplicationInfo",
-    "go_to_colors": "Go to Colors",
-    "go_to_components": "Go to Components",
-    "go_to_typography": "Go to Typography",
-    "go_to_home_stack_details": "Go to HomeStackDetails",
-    "go_to_settings": "Go to Settings",
-    "go_to_screen_with_BEdata": "Go to screen with data from BE",
-    "go_to_screen_test_form": "Go to test form"
-  },
   "components_screen": {
     "test_notification": "Test notification",
     "typography": {
@@ -96,101 +84,120 @@
       "4xl": "4xl"
     },
     "button_variants": {
-      "header": "Button variants",
-      "primary": "Button primary",
-      "secondary": "Button secondary",
-      "outline": "Button outline",
+      "disabled": "Button disabled",
       "ghost": "Button ghost",
+      "header": "Button variants",
       "link": "Button link",
-      "disabled": "Button disabled",
       "loading": "Button loading",
+      "outline": "Button outline",
+      "primary": "Button primary",
+      "secondary": "Button secondary",
       "with_icons": "Button with icons"
     },
     "loader_variants": {
-      "header": "Loader variants",
-      "circle": "Circle loader",
-      "bubbles": "Bubbles loader",
       "bricks": "Bricks loader",
+      "bubbles": "Bubbles loader",
+      "circle": "Circle loader",
+      "default": "Default loader",
       "disk": "Disk loader",
-      "default": "Default loader"
+      "header": "Loader variants"
     },
     "notification": {
-      "title": "In-app notification example",
-      "description": "by react-native-notificated 🎉"
+      "description": "by react-native-notificated 🎉",
+      "title": "In-app notification example"
     }
   },
+  "details_screen": {
+    "awesome": "Awesome 🎉",
+    "open_bottom_sheet": "Open BottomSheetModal",
+    "screen_params": "Screen params: {{params}}",
+    "title": "This is details screen"
+  },
+  "examples_screen": {
+    "go_to_application_info": "Go to ApplicationInfo",
+    "go_to_colors": "Go to Colors",
+    "go_to_components": "Go to Components",
+    "go_to_home_stack_details": "Go to HomeStackDetails",
+    "go_to_screen_test_form": "Go to test form",
+    "go_to_screen_with_BEdata": "Go to screen with data from BE",
+    "go_to_settings": "Go to Settings",
+    "go_to_typography": "Go to Typography",
+    "header": "This is Example screen"
+  },
+  "home_screen": {
+    "details": "Details"
+  },
   "settings_screen": {
     "copy_push_token": "Copy push token",
     "current_theme": "Current theme: {{theme}}",
     "sign_out": "Sign out!",
     "selected": " - selected"
   },
+  "sign_in_screen": {
+    "do_not_have_an_account": "Don't have an account?",
+    "email_helper_text": "Email must be here",
+    "forgot_password": "Forgot your password?",
+    "or_pass": "or enter:",
+    "password_helper_text": "Password must be here",
+    "password_label": "Password",
+    "password_placeholder": "password",
+    "remember_me": "Remember me",
+    "sign_in": "Sign in",
+    "sign_up": "Sign up"
+  },
+  "sign_up_screen": {
+    "agree_terms_label": "I agree to the Terms and Conditions",
+    "newsletter_label": "Subscribe to our newsletter",
+    "sign_up": "Sign up"
+  },
   "test_form": {
-    "interests": "Interests",
+    "additional_comment": "Additional comment",
+    "age": "Age",
+    "city_placeholder": "City",
+    "classic_music": "Classic music",
+    "comment": "Comment",
+    "contact_data": "Contact data",
     "cooking": "Cooking",
-    "sport": "Sport",
-    "games": "Games",
     "dancing": "Dancing",
-    "age": "Age",
     "education": "Education",
-    "primary": "Primary",
+    "email_placeholder": "E-mail",
+    "errors": {
+      "age": "Age is required",
+      "city": "City is required",
+      "education": "Education is required",
+      "email": "Email is required",
+      "interests": "At least 1 interest is needed",
+      "music": "At least 1 music is needed",
+      "name": "Name is required",
+      "phone_format": "Phone number must be in form 000-000-000",
+      "phone": "Phone is required",
+      "postalCode_format": "Postal code must be in form 00-000",
+      "postalCode": "Postal code is required",
+      "sex": "Sex is is required",
+      "shoeSize": "Shoe size is required",
+      "surname": "Surname is required"
+    },
+    "female": "Female",
+    "games": "Games",
+    "interests": "Interests",
+    "male": "Male",
     "middle": "Middle",
-    "secondary": "Secondary",
-    "postsecondary": "Postsecondary",
-    "contact_data": "Contact data",
     "name_placeholder": "Name",
-    "surname_placeholder": "Surname",
-    "email_placeholder": "E-mail",
     "phone_placeholder": "Phone number",
     "postalCode_placeholder": "Postal code",
-    "city_placeholder": "City",
+    "postsecondary": "Postsecondary",
+    "primary": "Primary",
+    "secondary": "Secondary",
     "sex": "Sex",
-    "male": "Male",
-    "female": "Female",
     "shoe_size": "Shoe size",
-    "which_music": "what kind of music do you listen ?",
-    "classic_music": "Classic music",
-    "additiona_comment": "Additional comment",
-    "comment": "Comment",
+    "sport": "Sport",
     "submit": "Submit",
-    "errors": {
-      "name": "Name is required",
-      "surname": "Surname is required",
-      "email": "Email is required",
-      "city": "City is required",
-      "postalCode": "Postal code is required",
-      "postalCode_format": "Postal code must be in form 00-000",
-      "phone": "Phone is required",
-      "phone_format": "Phone number must be in form 000-000-000",
-      "age": "Age is required",
-      "sex": "Sex is is required",
-      "education": "Education is required",
-      "shoeSize": "Shoe size is required",
-      "music": "Atleast 1 music is needed",
-      "interests": "Atleast 1 interest is needed"
-    }
+    "surname_placeholder": "Surname",
+    "which_music": "what kind of music do you listen ?"
   },
-  "common": {
-    "add": "Add",
-    "back": "Back",
-    "cancel": "Cancel",
-    "email_label": "E-mail",
-    "email_placeholder": "john@doe.com",
-    "empty_list": "The list is empty",
-    "go_back": "Go back",
-    "log_in": "Login",
-    "phone_label": "Telephone",
-    "remove": "Remove",
-    "save": "Save",
-    "search": "Search",
-    "send_again": "Send again",
-    "show_on_map": "Show on map",
-    "sign_in": "Sign in",
-    "sign_up": "Register",
-    "try_again_later": "Please try again later",
-    "try_again": "Try again",
-    "user_label": "User",
-    "user_placeholder": "user"
+  "typography_screen": {
+    "heading_size": "Heading.size: ",
+    "text_font_size": "Text.fontSize: "
   },
   "hello": "Welcome",
   "thanks": "Thank you for using the best template for expo apps",
diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json
index 05431078..f03692f9 100644
--- a/src/i18n/translations/pl.json
+++ b/src/i18n/translations/pl.json
@@ -1,7 +1,31 @@
 {
+  "common": {
+    "add": "Dodaj",
+    "back": "Cofnij",
+    "cancel": "Anuluj",
+    "email_label": "E-mail",
+    "email_placeholder": "john@doe.com",
+    "empty_list": "Lista jest pusta",
+    "go_back": "Cofnij",
+    "log_in": "Login",
+    "phone_label": "Telefon",
+    "remove": "Usuń",
+    "save": "Zapisz",
+    "search": "Szukaj",
+    "send_again": "Wyślij ponownie",
+    "show_on_map": "Pokaż na mapie",
+    "sign_in": "Zaloguj",
+    "sign_up": "Zarejestruj",
+    "try_again_later": "Proszę spróbuj ponownie później",
+    "try_again": "Spróbuj ponownie",
+    "user_label": "Użytkownik",
+    "user_placeholder": "Użytkownik"
+  },
   "errors": {
+    "missing_auth": "Brak autoryzacji",
     "screen_not_found": "NotFound screen",
-    "something_went_wrong": "Coś poszło nie tak"
+    "something_went_wrong": "Coś poszło nie tak",
+    "token_expired": "Token wygasł"
   },
   "form": {
     "invalid_email_format": "Zły adres e-mail",
@@ -9,79 +33,43 @@
   },
   "navigation": {
     "prevent_go_back_alert": {
-      "title": "Anulować zmiany?",
       "description": "Masz niezapisane zmiany. Jesteś pewny, że chcesz je porzucić i wyjść?",
-      "dont_leave": "Nie wychodź",
-      "discard": "Porzuć"
+      "discard": "Porzuć",
+      "do_not_leave": "Nie wychodź",
+      "title": "Anulować zmiany?"
     },
     "screen_titles": {
-      "home_stack": "Home",
+      "application_info": "ApplicationInfo",
+      "colors": "Colors",
+      "components": "Components",
+      "data_from_be_screen_example": "Dane z backend-u",
+      "details": "Details",
       "examples_stack": "Examples",
       "examples": "Examples",
-      "components": "Components",
-      "colors": "Colors",
-      "typography": "Typography",
+      "home_stack": "Home",
       "home": "Home",
-      "details": "Details",
-      "sign_in": "Sign in",
-      "sign_up": "Sign up",
       "main_tab": "MainTab",
-      "settings": "Settings",
-      "application_info": "ApplicationInfo",
       "not_found": "NotFound",
-      "data_from_be_screen_example": "Dane z backendu"
+      "settings": "Settings",
+      "sign_in": "Sign in",
+      "sign_up": "Sign up",
+      "typography": "Typography"
     }
   },
-  "application_info_screen": {
-    "navigation_info": "Kiedy będziesz próbował cofnąć to zostaniesz podwójnie zapytany, czy na pewno tego chcesz \n"
-  },
-  "sign_in_screen": {
-    "sign_in": "Zaloguj",
-    "sign_up": "Zarejestruj",
-    "dont_have_an_account": "Nie masz konta?",
-    "forgot_password": "Zapomniałeś hasła?",
-    "or_pass": "lub wprowadź:",
-    "email_helper_text": "Email",
-    "password_label": "Hasło",
-    "password_helper_text": "Hasła muszą być takie same",
-    "password_placeholder": "hasło",
-    "remember_me": "Zapamiętaj mnie"
+  "update": {
+    "alert_message": "Będziesz musiał zrestartować aplikację, żeby mieć lepsze doświadczenia podczas jej używania",
+    "alert_title": "Aktualizacja",
+    "restart": "Zrestartuj"
   },
-  "sign_up_screen": {
-    "agree_terms_label": "Zgadzam się z warunkami użytkowania",
-    "newsletter_label": "Subskrybuj nasz newsletter",
-    "sign_up": "Zarejestruj"
+  "examples_component": {
+    "example": "Przykład"
   },
-  "home_screen": {
-    "details": "Detale"
+  "application_info_screen": {
+    "navigation_info": "Kiedy będziesz próbował cofnąć to zostaniesz podwójnie zapytany, czy na pewno tego chcesz \n"
   },
   "colors_screen": {
     "colors_label": "Kolory"
   },
-  "typography_screen": {
-    "text_font_size": "Text.fontSize: ",
-    "heading_size": "Heading.size: "
-  },
-  "details_screen": {
-    "title": "To jest przykładowy widok",
-    "open_bottom_sheet": "Otwórz BottomSheetModal",
-    "screen_params": "Parametry widoku: {{params}}",
-    "awesome": "Wspaniale 🎉"
-  },
-  "examples_component": {
-    "example": "Przyklad"
-  },
-  "examples_screen": {
-    "header": "To jest przykładowy widok",
-    "go_to_application_info": "Idź do ApplicationInfo",
-    "go_to_colors": "Idź do Kolorów",
-    "go_to_components": "Idź do Komponentów",
-    "go_to_typography": "Idź do Typografii",
-    "go_to_home_stack_details": "Idź do HomeStackDetails",
-    "go_to_settings": "Idź do Ustawień",
-    "go_to_screen_with_BEdata": "Idź do widoku z danymi z backendu",
-    "go_to_screen_test_form": "Idź do formularza testowego"
-  },
   "components_screen": {
     "test_notification": "Test notification",
     "typography": {
@@ -96,100 +84,119 @@
       "4xl": "4xl"
     },
     "button_variants": {
-      "header": "Button variants",
-      "primary": "Button primary",
-      "secondary": "Button secondary",
-      "outline": "Button outline",
+      "disabled": "Button disabled",
       "ghost": "Button ghost",
+      "header": "Button variants",
       "link": "Button link",
-      "disabled": "Button disabled",
       "loading": "Button loading",
+      "outline": "Button outline",
+      "primary": "Button primary",
+      "secondary": "Button secondary",
       "with_icons": "Button with icons"
     },
     "loader_variants": {
-      "header": "Loader variants",
-      "circle": "Circle loader",
-      "bubbles": "Bubbles loader",
       "bricks": "Bricks loader",
+      "bubbles": "Bubbles loader",
+      "circle": "Circle loader",
+      "default": "Default loader",
       "disk": "Disk loader",
-      "default": "Default loader"
+      "header": "Loader variants"
     },
     "notification": {
-      "title": "In-app notification example",
-      "description": "by react-native-notificated 🎉"
+      "description": "by react-native-notificated 🎉",
+      "title": "In-app notification example"
     }
   },
+  "details_screen": {
+    "title": "To jest przykładowy widok",
+    "open_bottom_sheet": "Otwórz BottomSheetModal",
+    "screen_params": "Parametry widoku: {{params}}",
+    "awesome": "Wspaniale 🎉"
+  },
+  "examples_screen": {
+    "header": "To jest przykładowy widok",
+    "go_to_application_info": "Idź do ApplicationInfo",
+    "go_to_colors": "Idź do Kolorów",
+    "go_to_components": "Idź do Komponentów",
+    "go_to_typography": "Idź do Typografii",
+    "go_to_home_stack_details": "Idź do HomeStackDetails",
+    "go_to_settings": "Idź do Ustawień",
+    "go_to_screen_with_BEdata": "Idź do widoku z danymi z backend-u",
+    "go_to_screen_test_form": "Idź do formularza testowego"
+  },
+  "home_screen": {
+    "details": "Detale"
+  },
   "settings_screen": {
     "current_theme": "Current theme: {{theme}}",
-    "sign_out": "Wyloguj!",
-    "selected": " - wybrano"
+    "selected": " - wybrano",
+    "sign_out": "Wyloguj!"
+  },
+  "sign_in_screen": {
+    "do_not_have_an_account": "Nie masz konta?",
+    "email_helper_text": "Email",
+    "forgot_password": "Zapomniałeś hasła?",
+    "or_pass": "lub wprowadź:",
+    "password_helper_text": "Hasła muszą być takie same",
+    "password_label": "Hasło",
+    "password_placeholder": "hasło",
+    "remember_me": "Zapamiętaj mnie",
+    "sign_in": "Zaloguj",
+    "sign_up": "Zarejestruj"
+  },
+  "sign_up_screen": {
+    "agree_terms_label": "Zgadzam się z warunkami użytkowania",
+    "newsletter_label": "Subskrybuj nasz newsletter",
+    "sign_up": "Zarejestruj"
   },
   "test_form": {
-    "interests": "Zainteresowania",
+    "additional_comment": "Dodatkowy komentarz",
+    "age": "Wiek",
+    "city_placeholder": "Miasto",
+    "classic_music": "Muzyka klasyczna",
+    "comment": "Komentarz",
+    "contact_data": "Dane kontaktowe",
     "cooking": "Gotowanie",
-    "sport": "Sport",
-    "games": "Gry",
     "dancing": "Taniec",
-    "age": "Wiek",
     "education": "Wykształcenie",
-    "primary": "Podstawowe",
+    "email_placeholder": "E-mail",
+    "errors": {
+      "age": "Wiek jest wymagany",
+      "city": "Miasto jest wymagane",
+      "education": "Wykształcenie jest wymagane",
+      "email": "Email jest wymagany",
+      "interests": "Zaznacz przynajmniej 1 zainteresowanie",
+      "music": "Zaznacz przynajmniej 1 rodzaj muzyki",
+      "name": "Imie jest wymagane",
+      "phone_format": "Numer telefonu musi byc w formacie 000-000-000",
+      "phone": "Number telefonu jest wymagany",
+      "postalCode_format": "Kod pocztowy musi byc w formacie 00-000",
+      "postalCode": "Kod pocztowy jest wymagany",
+      "sex": "Płeć jest wymagana",
+      "shoeSize": "Rozmiar buta jest wymagany",
+      "surname": "Nazwisko jest wymagane"
+    },
+    "female": "Kobieta",
+    "games": "Gry",
+    "interests": "Zainteresowania",
+    "male": "Mezczyzna",
     "middle": "Gimnazjalne",
-    "secondary": "Zawodowe",
-    "postsecondary": "Wyzsze",
-    "contact_data": "Dane kontaktowe",
     "name_placeholder": "Imie",
-    "surname_placeholder": "Nazwisko",
-    "email_placeholder": "E-mail",
     "phone_placeholder": "Telefon",
     "postalCode_placeholder": "Kod pocztowy",
-    "city_placeholder": "Miasto",
+    "postsecondary": "Wyższe",
+    "primary": "Podstawowe",
+    "secondary": "Zawodowe",
     "sex": "Płeć",
-    "male": "Mezczyzna",
-    "female": "Kobieta",
     "shoe_size": "Rozmiar buta",
-    "which_music": "Jakiej muzyki sluchasz ?",
-    "classic_music": "Muzyka klasyczna",
-    "additiona_comment": "Dodatkowy komentarz",
-    "comment": "Komentarz",
+    "sport": "Sport",
     "submit": "Zatwierdź",
-    "errors": {
-      "name": "Imie jest wymagane",
-      "surname": "Nazwisko jest wymagane",
-      "email": "Email jest wymagany",
-      "city": "Miasto jest wymagane",
-      "postalCode": "Kod pocztowy jest wymagany",
-      "postalCode_format": "Kod pocztowy musi byc w formacie 00-000",
-      "phone": "Number telefonu jest wymagany",
-      "phone_format": "Numer telefonu musi byc w formacie 000-000-000",
-      "age": "Wiek jest wymagany",
-      "sex": "Płeć jest wymagana",
-      "education": "Wykształcenie jest wymagane",
-      "shoeSize": "Rozmiar buta jest wymagany",
-      "music": "Zaznacz przynajmniej 1 rodzaj muzyki",
-      "interests": "Zaznacz przynajmniej 1 zainteresowanie"
-    }
+    "surname_placeholder": "Nazwisko",
+    "which_music": "Jakiej muzyki słuchasz ?"
   },
-  "common": {
-    "add": "Dodaj",
-    "back": "Cofnij",
-    "cancel": "Anuluj",
-    "email_label": "E-mail",
-    "email_placeholder": "john@doe.com",
-    "empty_list": "Lista jest pusta",
-    "go_back": "Cofnij",
-    "log_in": "Login",
-    "phone_label": "Telefon",
-    "remove": "Usuń",
-    "save": "Zapisz",
-    "search": "Szukaj",
-    "send_again": "Wyślij ponownie",
-    "show_on_map": "Pokaż na mapie",
-    "sign_in": "Zaloguj",
-    "sign_up": "Zarejestruj",
-    "try_again_later": "Proszę spróbuj ponownie później",
-    "try_again": "Spróbuj ponownie",
-    "user_label": "Użytkownik",
-    "user_placeholder": "Użytkownik"
+  "typography_screen": {
+    "text_font_size": "Text.fontSize: ",
+    "heading_size": "Heading.size: "
   },
   "hello": "Witaj",
   "thanks": "Dzięki za używanie najlepszej templatki dla aplikacji expo",
diff --git a/src/navigation/tabNavigator/components/AppHeader.tsx b/src/navigation/tabNavigator/components/AppHeader.tsx
new file mode 100644
index 00000000..5f3eef5e
--- /dev/null
+++ b/src/navigation/tabNavigator/components/AppHeader.tsx
@@ -0,0 +1,44 @@
+import { Image, Platform, StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { TabColorsStrings } from '../config'
+
+import { darkLogoFull, lightLogoFull } from '~constants'
+import { useColorScheme } from '~contexts'
+
+export function AppHeader() {
+  const { colorScheme } = useColorScheme()
+  const { top } = useSafeAreaInsets()
+
+  const height = 60 + top
+  return (
+    <View
+      style={[
+        { height, paddingTop: top },
+        jsStyles.appHeader,
+        Platform.select({ default: { display: 'none' }, web: { display: 'flex' } }),
+      ]}
+    >
+      <Image
+        resizeMethod="resize"
+        resizeMode="contain"
+        source={colorScheme === 'light' ? lightLogoFull : darkLogoFull}
+        style={jsStyles.logoWide}
+      />
+    </View>
+  )
+}
+
+const jsStyles = StyleSheet.create({
+  appHeader: {
+    alignItems: 'center',
+    borderBottomColor: TabColorsStrings.lightGray,
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    width: '100%',
+    zIndex: 10,
+  },
+  logoWide: { height: 60, width: 150 },
+})
diff --git a/src/navigation/tabNavigator/components/BottomBar.tsx b/src/navigation/tabNavigator/components/BottomBar.tsx
new file mode 100644
index 00000000..206bc3bb
--- /dev/null
+++ b/src/navigation/tabNavigator/components/BottomBar.tsx
@@ -0,0 +1,73 @@
+import { Platform, StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { TabBarItemWrapper } from './TabBarItemWrapper'
+import { bottomTabs, TabColors, TabColorsStrings } from '../config'
+import { cns } from '../utils'
+
+import { Icon } from '~components'
+import { useColorScheme } from '~contexts'
+import cssStyles from '~styles'
+
+export function BottomBar({ visible }: { visible: boolean }) {
+  const { colorScheme } = useColorScheme()
+  return (
+    <View
+      style={[
+        {
+          paddingBottom: useSafeAreaInsets().bottom,
+        },
+        Platform.select({
+          default: {
+            display: visible ? 'flex' : 'none',
+          },
+          web: cns(cssStyles.smallVisible),
+        }),
+      ]}
+    >
+      <View style={jsStyles.nav}>
+        {bottomTabs.map((tab, i) => (
+          <TabBarItemWrapper key={i} name={tab.name} id={tab.id} params={tab.params}>
+            {({ focused, pressed, hovered }) => (
+              <Icon
+                name={focused ? tab.iconFocused : tab.icon}
+                size={40}
+                color={colorScheme === 'light' ? TabColors.tabIconDark : TabColors.tabIconLight}
+                style={[
+                  jsStyles.tabIcon,
+                  pressed && jsStyles.tabIconPressed,
+                  Platform.select({
+                    web: {
+                      transitionDuration: '200ms',
+                      transform: hovered ? [{ scale: 1.2 }] : [{ scale: 1 }],
+                    },
+                  }),
+                ]}
+              />
+            )}
+          </TabBarItemWrapper>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const jsStyles = StyleSheet.create({
+  nav: {
+    alignItems: 'center',
+    borderTopColor: TabColorsStrings.lightGray,
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    height: 49,
+    justifyContent: 'space-around',
+    paddingHorizontal: 16,
+  },
+
+  tabIcon: {
+    paddingHorizontal: 8,
+  },
+  tabIconPressed: {
+    opacity: 0.8,
+    transform: [{ scale: 0.9 }],
+  },
+})
diff --git a/src/navigation/tabNavigator/components/HeaderLogo.tsx b/src/navigation/tabNavigator/components/HeaderLogo.tsx
new file mode 100644
index 00000000..c7e6d338
--- /dev/null
+++ b/src/navigation/tabNavigator/components/HeaderLogo.tsx
@@ -0,0 +1,93 @@
+import { Pressable, Text } from '@bacons/react-views'
+import { Link } from 'expo-router'
+import { Image, Platform, StyleSheet, View } from 'react-native'
+
+import { TabColorsStrings } from '../config'
+import { useWidth } from '../hooks'
+import { cns } from '../utils'
+
+import { darkLogoFull, darkLogoSygnet, lightLogoFull, lightLogoSygnet } from '~constants'
+import { useColorScheme } from '~contexts'
+import cssStyles from '~styles'
+
+export function HeaderLogo() {
+  const { colorScheme } = useColorScheme()
+  const isLargeHorizontal = useWidth(1264)
+
+  return (
+    <View
+      style={Platform.select({
+        default: jsStyles.headerContainer,
+        web: cns(cssStyles.headerContainer),
+      })}
+    >
+      <Link
+        style={Platform.select({
+          default: jsStyles.headerLink,
+          web: cns(cssStyles.headerLink),
+        })}
+        href="/"
+        asChild
+      >
+        <Pressable>
+          {({ hovered }) => (
+            <Text
+              style={[
+                jsStyles.headerLogo,
+                {
+                  backgroundColor: hovered
+                    ? TabColorsStrings.lightGray50
+                    : TabColorsStrings.transparent,
+                },
+              ]}
+            >
+              <Image
+                resizeMethod="resize"
+                resizeMode="contain"
+                source={colorScheme === 'light' ? lightLogoFull : darkLogoFull}
+                style={[
+                  jsStyles.logoWide,
+                  Platform.select({
+                    default: !isLargeHorizontal ? { display: 'none' } : {},
+                    web: cns(cssStyles.wideVisible),
+                  }),
+                ]}
+              />
+              <Image
+                resizeMethod="resize"
+                resizeMode="contain"
+                source={colorScheme === 'light' ? lightLogoSygnet : darkLogoSygnet}
+                style={[
+                  jsStyles.logoSygnet,
+                  Platform.select({
+                    default: isLargeHorizontal ? { display: 'none' } : {},
+                    web: cns(cssStyles.wideHidden),
+                  }),
+                ]}
+              />
+            </Text>
+          )}
+        </Pressable>
+      </Link>
+    </View>
+  )
+}
+
+const jsStyles = StyleSheet.create({
+  headerContainer: {
+    height: 96,
+    minHeight: 96,
+    paddingTop: 0,
+  },
+  headerLink: {
+    alignItems: 'center',
+  },
+  headerLogo: {
+    alignItems: 'center',
+    borderRadius: 8,
+    display: 'flex',
+    margin: 0,
+  },
+  logoSygnet: { height: 60, width: 40 },
+  logoWide: { height: 60, width: 150 },
+})
diff --git a/src/navigation/tabNavigator/components/SideBar.tsx b/src/navigation/tabNavigator/components/SideBar.tsx
new file mode 100644
index 00000000..8c480e91
--- /dev/null
+++ b/src/navigation/tabNavigator/components/SideBar.tsx
@@ -0,0 +1,121 @@
+import { Platform, StyleSheet, View } from 'react-native'
+
+import { HeaderLogo } from './HeaderLogo'
+import { SideBarTabItem } from './SideBarTabItem'
+import { TabColorsStrings, upperSideTabs } from '../config'
+import { useWidth } from '../hooks'
+import { cns } from '../utils'
+
+import { useAuth } from '~hooks'
+import cssStyles from '~styles'
+
+const NAV_MEDIUM_WIDTH = 244
+
+export function SideBar({ visible }: { visible: boolean }) {
+  const isLarge = useWidth(1264)
+  const { signOut } = useAuth()
+
+  return (
+    <View
+      style={[
+        jsStyles.sideBar,
+        ...Platform.select({
+          default: [
+            !visible &&
+              ({
+                display: 'none',
+              } as const),
+            isLarge &&
+              ({
+                minWidth: NAV_MEDIUM_WIDTH,
+              } as const),
+          ],
+
+          web: [cns(cssStyles.largeVisible, cssStyles.sideBar)],
+        }),
+      ]}
+    >
+      <View
+        style={[
+          jsStyles.sidebarInner,
+          ...Platform.select({
+            default: [
+              isLarge &&
+                ({
+                  width: NAV_MEDIUM_WIDTH,
+                  minWidth: NAV_MEDIUM_WIDTH,
+                  alignItems: 'flex-start',
+                } as const),
+            ],
+            web: [cns(cssStyles.sideBarInner)],
+          }),
+        ]}
+      >
+        <View
+          style={[
+            jsStyles.sidebarInner2,
+            ...Platform.select({
+              default: [
+                !isLarge &&
+                  ({
+                    alignItems: 'center',
+                  } as const),
+              ],
+              web: [cns(cssStyles.sideBarHeader)],
+            }),
+          ]}
+        >
+          <HeaderLogo />
+
+          <View style={[jsStyles.sidebarTabs]}>
+            {upperSideTabs.map((tab) => (
+              <SideBarTabItem key={tab.name} {...tab}>
+                {tab.displayedName}
+              </SideBarTabItem>
+            ))}
+          </View>
+          <View>
+            <SideBarTabItem
+              icon="logout-box-line"
+              iconFocused="logout-box-fill"
+              name="/sign-in"
+              onPress={signOut}
+              // eslint-disable-next-line react-native/no-raw-text
+            >
+              Logout
+            </SideBarTabItem>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+const jsStyles = StyleSheet.create({
+  sideBar: {
+    minWidth: 72,
+    width: 72,
+  },
+
+  sidebarInner: {
+    alignItems: 'stretch',
+    borderRightColor: TabColorsStrings.lightGray,
+    borderRightWidth: 1,
+    height: '100%',
+    maxHeight: '100%',
+    minWidth: 72,
+    paddingBottom: 20,
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    position: 'absolute',
+    width: 72,
+  },
+  sidebarInner2: {
+    alignItems: 'stretch',
+    flex: 1,
+    height: '100%',
+    justifyContent: 'space-between',
+  },
+
+  sidebarTabs: { flex: 1, gap: 4 },
+})
diff --git a/src/navigation/tabNavigator/components/SideBarTabItem.tsx b/src/navigation/tabNavigator/components/SideBarTabItem.tsx
new file mode 100644
index 00000000..e656e47e
--- /dev/null
+++ b/src/navigation/tabNavigator/components/SideBarTabItem.tsx
@@ -0,0 +1,116 @@
+import { Text } from '@bacons/react-views'
+import { Platform, StyleSheet, View } from 'react-native'
+
+import { TabBarItemWrapper } from './TabBarItemWrapper'
+import { TabColors, TabColorsStrings } from '../config'
+import { useWidth } from '../hooks'
+import { cns } from '../utils'
+
+import { Icon } from '~components'
+import { useColorScheme } from '~contexts'
+import cssStyles from '~styles'
+import { IconNames } from '~types/icon'
+
+export function SideBarTabItem({
+  children,
+  icon,
+  iconFocused,
+  name,
+  onPress,
+  params,
+}: {
+  children: string
+  icon: IconNames
+  iconFocused: IconNames
+  name: string
+  onPress?(): void
+  params?: Record<string, string>
+}) {
+  const isLarge = useWidth(1264)
+  const { colorScheme } = useColorScheme()
+
+  return (
+    <TabBarItemWrapper {...{ name, onPress, params }} id={name} style={jsStyles.sidebarTabItem}>
+      {({ focused, hovered }) => (
+        <View
+          style={[
+            jsStyles.sidebarItemContainer,
+            hovered && {
+              backgroundColor: TabColorsStrings.lightGray50,
+            },
+          ]}
+        >
+          <View
+            style={[
+              jsStyles.sidebarIconContainer,
+              hovered && {
+                transform: [{ scale: 1.1 }],
+              },
+            ]}
+          >
+            <Icon
+              name={focused ? iconFocused : icon}
+              size={30}
+              color={colorScheme === 'light' ? TabColors.tabIconDark : TabColors.tabIconLight}
+            />
+          </View>
+
+          <Text
+            style={[
+              jsStyles.sidebarItemText,
+              Platform.select({
+                default: {
+                  display: isLarge ? 'flex' : 'none',
+                },
+                web: cns(cssStyles.sideBarTabItemText),
+              }),
+              {
+                color:
+                  colorScheme === 'light'
+                    ? TabColorsStrings.tabTextDark
+                    : TabColorsStrings.tabTextLight,
+              },
+              focused && jsStyles.fontBold,
+            ]}
+          >
+            {children}
+          </Text>
+        </View>
+      )}
+    </TabBarItemWrapper>
+  )
+}
+
+const jsStyles = StyleSheet.create({
+  fontBold: { fontWeight: 'bold' },
+  sidebarIconContainer: Platform.select({
+    default: { padding: 0 },
+    web: {
+      transitionDuration: '150ms',
+      transitionProperty: ['transform'],
+      transitionTimingFunction: 'cubic-bezier(0.17, 0.17, 0, 1)',
+    },
+  }),
+  sidebarItemContainer: {
+    alignItems: 'center',
+    borderRadius: 8,
+    flexDirection: 'row',
+    padding: 8,
+    ...Platform.select({
+      web: {
+        transitionDuration: '200ms',
+        transitionProperty: ['background-color', 'box-shadow'],
+      },
+    }),
+  },
+  sidebarItemText: {
+    fontSize: 16,
+    lineHeight: 24,
+    marginLeft: 16,
+    marginRight: 16,
+  },
+  sidebarTabItem: {
+    paddingVertical: 4,
+    width: '100%',
+  },
+})
diff --git a/src/navigation/tabNavigator/components/TabBarItemWrapper.tsx b/src/navigation/tabNavigator/components/TabBarItemWrapper.tsx
new file mode 100644
index 00000000..2ac29c1e
--- /dev/null
+++ b/src/navigation/tabNavigator/components/TabBarItemWrapper.tsx
@@ -0,0 +1,43 @@
+import { Pressable } from '@bacons/react-views'
+import { Link } from 'expo-router'
+import { PressableStateCallbackType, ViewStyle } from 'react-native'
+
+import { useIsTabSelected } from '../hooks'
+import { TabbedNavigator } from '../tab-slot'
+
+export function TabBarItemWrapper({
+  children,
+  id,
+  name,
+  onPress,
+  params,
+  style,
+}: {
+  children?: (
+    props: PressableStateCallbackType & { hovered: boolean; focused: boolean }
+  ) => JSX.Element
+  id: string
+  name: string
+  onPress?: () => void
+  params?: Record<string, string>
+  style?: ViewStyle
+}) {
+  const focused = useIsTabSelected(id)
+
+  if (onPress) {
+    return <Pressable onPress={onPress}>{(props) => children?.({ ...props, focused })}</Pressable>
+  }
+
+  if (name.startsWith('/') || name.startsWith('.')) {
+    return (
+      <Link href={{ pathname: name, params }} asChild style={style}>
+        <Pressable>{(props) => children?.({ ...props, focused })}</Pressable>
+      </Link>
+    )
+  }
+  return (
+    <TabbedNavigator.Link name={id} asChild style={style}>
+      <Pressable>{(props) => children?.({ ...props, focused })}</Pressable>
+    </TabbedNavigator.Link>
+  )
+}
diff --git a/src/navigation/tabNavigator/components/index.ts b/src/navigation/tabNavigator/components/index.ts
new file mode 100644
index 00000000..29d34def
--- /dev/null
+++ b/src/navigation/tabNavigator/components/index.ts
@@ -0,0 +1,3 @@
+export * from './AppHeader'
+export * from './BottomBar'
+export * from './SideBar'
diff --git a/src/navigation/tabNavigator/config.ts b/src/navigation/tabNavigator/config.ts
new file mode 100644
index 00000000..5903b051
--- /dev/null
+++ b/src/navigation/tabNavigator/config.ts
@@ -0,0 +1,63 @@
+import { palette } from '~constants'
+import { IconNames } from '~types/icon'
+import { hex2rgba } from '~utils'
+
+type Tab = {
+  displayedName: string
+  icon: IconNames
+  iconFocused: IconNames
+  id: string
+  name: string
+  params?: Record<string, string>
+}
+type Tabs = Tab[]
+
+// name with '/' at the begging will not be resolved as 'bottom tab', will be as usual screen
+export const upperSideTabs: Tabs = [
+  {
+    displayedName: 'Home',
+    icon: 'home-3-line',
+    iconFocused: 'home-3-fill',
+    id: 'home',
+    name: 'home',
+  },
+  {
+    displayedName: 'Example',
+    icon: 'aliens-line',
+    iconFocused: 'aliens-fill',
+    id: 'example',
+    name: 'example',
+  },
+  {
+    displayedName: 'Settings',
+    icon: 'settings-2-line',
+    iconFocused: 'settings-2-fill',
+    id: 'settings',
+    name: 'settings',
+  },
+  {
+    displayedName: 'Details',
+    icon: 'baidu-line',
+    iconFocused: 'baidu-fill',
+    id: 'details',
+    name: '/home/details',
+    params: { user: 'example@test.com' },
+  },
+]
+
+export const bottomSideTabs: Tabs = []
+
+export const bottomTabs: Tabs = [...upperSideTabs]
+
+export const TabColors: Record<string, ColorNames> = {
+  tabIconDark: 'gray.700',
+  tabIconLight: 'gray.200',
+} as const
+
+export const TabColorsStrings = {
+  lightGray: palette.gray['300'],
+  lightGray50: hex2rgba(palette.gray['50'], 0.5),
+  tabTextDark: palette.gray['700'],
+  tabTextLight: palette.gray['300'],
+  transparent: 'transparent',
+} as const
diff --git a/src/navigation/tabNavigator/hooks/index.ts b/src/navigation/tabNavigator/hooks/index.ts
new file mode 100644
index 00000000..a84485b9
--- /dev/null
+++ b/src/navigation/tabNavigator/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from './useIsTabSelected'
+export * from './useWidth'
+export * from './useContextRoute'
+export * from './useLinkBuilder'
+export * from './useNavigatorContext'
diff --git a/src/navigation/tabNavigator/hooks/useContextRoute.ts b/src/navigation/tabNavigator/hooks/useContextRoute.ts
new file mode 100644
index 00000000..4d3e206a
--- /dev/null
+++ b/src/navigation/tabNavigator/hooks/useContextRoute.ts
@@ -0,0 +1,30 @@
+import { Navigator } from 'expo-router'
+
+export function useContextRoute(name: string) {
+  const context = Navigator.useContext()
+
+  const { state, navigation, descriptors } = context
+
+  const route = state.routes.find((route) => {
+    return route.name === name
+  })
+
+  if (!route) {
+    console.warn(
+      `Could not find route with name: ${name}. Options: ${state.routes
+        .map((r) => r.name)
+        .join(', ')}`
+    )
+  }
+
+  if (!route) {
+    return null
+  }
+
+  return {
+    route,
+    target: state.key,
+    navigation,
+    descriptor: descriptors[route.key],
+  }
+}
diff --git a/src/navigation/tabNavigator/hooks/useIsTabSelected.ts b/src/navigation/tabNavigator/hooks/useIsTabSelected.ts
new file mode 100644
index 00000000..8fc52cdc
--- /dev/null
+++ b/src/navigation/tabNavigator/hooks/useIsTabSelected.ts
@@ -0,0 +1,10 @@
+import { useNavigatorContext } from './useNavigatorContext'
+
+export function useIsTabSelected(name: string): boolean {
+  const { navigation } = useNavigatorContext()
+
+  const state = navigation.getState()
+  const current = state.routes.find((_, i) => state.index === i)
+
+  return current?.name === name
+}
diff --git a/src/navigation/tabNavigator/hooks/useLinkBuilder.tsx b/src/navigation/tabNavigator/hooks/useLinkBuilder.tsx
new file mode 100644
index 00000000..79138fe0
--- /dev/null
+++ b/src/navigation/tabNavigator/hooks/useLinkBuilder.tsx
@@ -0,0 +1,70 @@
+import {
+  NavigationHelpers,
+  NavigationHelpersContext,
+  NavigationProp,
+  ParamListBase,
+} from '@react-navigation/core'
+import { LinkingContext } from '@react-navigation/native'
+import * as React from 'react'
+
+type NavigationObject = NavigationHelpers<ParamListBase> | NavigationProp<ParamListBase>
+
+type MinimalState = {
+  index: number
+  routes: { name: string; params?: object; state?: MinimalState }[]
+}
+
+const getRootStateForNavigate = (
+  navigation: NavigationObject,
+  state: MinimalState
+): MinimalState => {
+  const parent = navigation.getParent()
+
+  if (parent) {
+    const parentState = parent.getState()
+
+    return getRootStateForNavigate(parent, {
+      index: 0,
+      routes: [
+        {
+          ...parentState.routes[parentState.index],
+          state,
+        },
+      ],
+    })
+  }
+
+  return state
+}
+
+/**
+ * Build destination link for a navigate action.
+ * Useful for showing anchor tags on the web for buttons that perform navigation.
+ */
+export function useLinkBuilder() {
+  const navigation = React.useContext(NavigationHelpersContext)
+  const linking = React.useContext(LinkingContext)
+
+  const buildLink = React.useCallback(
+    (name: string, params?: object) => {
+      const state = navigation
+        ? getRootStateForNavigate(navigation, {
+            index: 0,
+            routes: [{ name, params }],
+          })
+        : // If we couldn't find a navigation object in context, we're at root
+          // So we'll construct a basic state object to use
+          {
+            index: 0,
+            routes: [{ name, params }],
+          }
+
+      const out = linking.options!.getPathFromState?.(state, linking.options!.config)
+
+      return out
+    },
+    [linking, navigation]
+  )
+
+  return buildLink
+}
diff --git a/src/navigation/tabNavigator/hooks/useNavigatorContext.ts b/src/navigation/tabNavigator/hooks/useNavigatorContext.ts
new file mode 100644
index 00000000..9b9204a8
--- /dev/null
+++ b/src/navigation/tabNavigator/hooks/useNavigatorContext.ts
@@ -0,0 +1,16 @@
+import { TabRouter } from '@react-navigation/routers'
+import { Navigator } from 'expo-router'
+
+export function useNavigatorContext() {
+  const context = Navigator.useContext()
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (!(context.router.name === 'TabRouter' || context.router instanceof TabRouter)) {
+      throw new Error(
+        'useTabbedSlot must be used inside a Navigator with a tab router: <Navigator route={TabRouter} />'
+      )
+    }
+  }
+
+  return context
+}
diff --git a/src/navigation/tabNavigator/hooks/useWidth.ts b/src/navigation/tabNavigator/hooks/useWidth.ts
new file mode 100644
index 00000000..093b9fcb
--- /dev/null
+++ b/src/navigation/tabNavigator/hooks/useWidth.ts
@@ -0,0 +1,12 @@
+import { Platform, useWindowDimensions } from 'react-native'
+
+export function useWidth(size: number): boolean {
+  const { width } = useWindowDimensions()
+  if (typeof window === 'undefined') {
+    return true
+  }
+  if (Platform.OS === 'ios' || Platform.OS === 'android') {
+    return false
+  }
+  return width >= size
+}
diff --git a/src/navigation/tabNavigator/navigator.tsx b/src/navigation/tabNavigator/navigator.tsx
new file mode 100644
index 00000000..9af562c9
--- /dev/null
+++ b/src/navigation/tabNavigator/navigator.tsx
@@ -0,0 +1,45 @@
+import { StyleSheet } from '@bacons/react-views'
+import React from 'react'
+import { Platform, View } from 'react-native'
+
+import { AppHeader, BottomBar, SideBar } from './components'
+import { useWidth } from './hooks'
+import { TabbedNavigator } from './tab-slot'
+import { cns } from './utils'
+
+import cssStyles from '~styles'
+
+export function ResponsiveNavigator() {
+  const isRowLayout = useWidth(768)
+
+  return (
+    <TabbedNavigator>
+      <View
+        style={[
+          jsStyles.flex1,
+          Platform.select({
+            default: {
+              flexDirection: isRowLayout ? 'row' : 'column',
+            },
+            web: cns(cssStyles.container),
+          }),
+        ]}
+      >
+        <SideBar visible={isRowLayout} />
+        <View style={jsStyles.flexGrow1}>
+          <AppHeader />
+          <View style={jsStyles.flex1}>
+            <TabbedNavigator.Slot />
+          </View>
+        </View>
+
+        <BottomBar visible={!isRowLayout} />
+      </View>
+    </TabbedNavigator>
+  )
+}
+
+const jsStyles = StyleSheet.create({
+  flex1: { flex: 1 },
+  flexGrow1: { flexGrow: 1 },
+})
diff --git a/src/navigation/tabNavigator/tab-slot.tsx b/src/navigation/tabNavigator/tab-slot.tsx
new file mode 100644
index 00000000..c53a2490
--- /dev/null
+++ b/src/navigation/tabNavigator/tab-slot.tsx
@@ -0,0 +1,136 @@
+// Like <Slot /> from Expo Router but with stored tab history.
+import { CommonActions } from '@react-navigation/native'
+import { TabRouter } from '@react-navigation/routers'
+import { Link, Navigator } from 'expo-router'
+import { Screen as RouterScreen } from 'expo-router/build/views/Screen'
+import * as React from 'react'
+import { GestureResponderEvent, StyleSheet, ViewStyle } from 'react-native'
+import { Screen, ScreenContainer } from 'react-native-screens'
+
+import { useContextRoute, useLinkBuilder, useNavigatorContext } from './hooks'
+
+export function TabbedNavigator(props: React.ComponentProps<typeof Navigator>) {
+  return <Navigator {...props} router={TabRouter} />
+}
+
+export default function TabbedSlot({
+  detachInactiveScreens = true,
+  style,
+}: {
+  detachInactiveScreens?: boolean
+  style?: ViewStyle
+}) {
+  const { state, descriptors } = useNavigatorContext()
+  const focusedRouteKey = state.routes[state.index].key
+  const [loaded, setLoaded] = React.useState([focusedRouteKey])
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey])
+  }
+
+  const { routes } = state
+
+  return (
+    <ScreenContainer enabled={detachInactiveScreens} hasTwoStates style={styles.container}>
+      {routes.map((route, index) => {
+        const descriptor = descriptors[route.key]
+        const {
+          freezeOnBlur,
+          lazy = true,
+          unmountOnBlur,
+        } = descriptor.options as unknown as {
+          lazy: boolean
+          unmountOnBlur?: boolean
+          freezeOnBlur: boolean
+        }
+        const isFocused = state.index === index
+
+        if (unmountOnBlur && !isFocused) {
+          return null
+        }
+
+        if (lazy && !loaded.includes(route.key) && !isFocused) {
+          // Don't render a lazy screen if we've never navigated to it
+          return null
+        }
+
+        const zIndex = { zIndex: isFocused ? 0 : -1 }
+
+        return (
+          <Screen
+            activityState={isFocused ? 2 : 0}
+            key={route.key}
+            style={[styles.screen, style, zIndex]}
+            accessibilityElementsHidden={!isFocused}
+            importantForAccessibility={isFocused ? 'auto' : 'no-hide-descendants'}
+            enabled={detachInactiveScreens}
+            freezeOnBlur={freezeOnBlur}
+          >
+            {descriptor.render()}
+          </Screen>
+        )
+      })}
+    </ScreenContainer>
+  )
+}
+
+export function TabLink({
+  name,
+  params,
+  ...props
+}: { name: string; params?: Record<string, string> } & Omit<
+  React.ComponentProps<typeof Link>,
+  'href' | 'onPress' | 'onLongPress'
+>) {
+  const buildLink = useLinkBuilder()
+  const ctxRoute = useContextRoute(name)
+
+  if (!ctxRoute) {
+    return null
+  }
+
+  const { route, target, navigation } = ctxRoute
+
+  const onPress = (
+    e: GestureResponderEvent | React.MouseEvent<HTMLAnchorElement, globalThis.MouseEvent>
+  ) => {
+    const event = navigation.emit({
+      type: 'tabPress',
+      target: route.key,
+      canPreventDefault: true,
+    })
+
+    // @ts-expect-error: event type does not contain defaultPrevented, which should be available here on web
+    if (!event.defaultPrevented) {
+      e.preventDefault()
+      navigation.dispatch({
+        ...CommonActions.navigate({ name: route.name, merge: true, params }),
+        target,
+      })
+    }
+  }
+
+  const onLongPress = () => {
+    navigation.emit({
+      type: 'tabLongPress',
+      target: route.key,
+    })
+  }
+
+  return <Link {...{ ...props, onPress, onLongPress }} href={buildLink(name) || '/'} />
+}
+
+TabbedNavigator.Slot = TabbedSlot
+TabbedNavigator.Link = TabLink
+TabbedNavigator.Screen = RouterScreen
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  screen: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+})
diff --git a/src/navigation/tabNavigator/utils/cns.ts b/src/navigation/tabNavigator/utils/cns.ts
new file mode 100644
index 00000000..6ccb48de
--- /dev/null
+++ b/src/navigation/tabNavigator/utils/cns.ts
@@ -0,0 +1,6 @@
+export const cns = (
+  ...classes: (string | false | undefined | null)[]
+): Record<string, unknown> => ({
+  $$css: true,
+  _: classes.filter(Boolean).join(' ') as unknown as string[],
+})
diff --git a/src/navigation/tabNavigator/utils/index.ts b/src/navigation/tabNavigator/utils/index.ts
new file mode 100644
index 00000000..817041e1
--- /dev/null
+++ b/src/navigation/tabNavigator/utils/index.ts
@@ -0,0 +1 @@
+export * from './cns'
diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx
index dc5c6ce4..d9548d3c 100644
--- a/src/providers/Providers.tsx
+++ b/src/providers/Providers.tsx
@@ -1,7 +1,7 @@
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'
 import { PortalProvider } from '@gorhom/portal'
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
-import { ReactNode } from 'react'
+import { FC, PropsWithChildren } from 'react'
 import { StyleSheet } from 'react-native'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
@@ -17,7 +17,7 @@ import { checkForUpdates } from '~utils'
 
 const queryClient = new QueryClient({})
 
-export const Providers = ({ children }: { children: ReactNode }): JSX.Element => {
+export const Providers: FC<PropsWithChildren> = ({ children }) => {
   useAppStateActive(checkForUpdates, false)
 
   return (
diff --git a/src/screens/ApplicationInfoScreen.tsx b/src/screens/ApplicationInfoScreen.tsx
index 710ac0ed..a440352d 100644
--- a/src/screens/ApplicationInfoScreen.tsx
+++ b/src/screens/ApplicationInfoScreen.tsx
@@ -7,19 +7,24 @@ import { ScrollView, StyleSheet } from 'react-native'
 
 import { Button, Text } from '~components'
 import { isExpoGo } from '~constants'
-import { useCallback, usePreventGoBack, useTranslation } from '~hooks'
+import { useCallback, usePreventGoBack, useScreenOptions, useTranslation } from '~hooks'
 
 const projectId = Constants.expoConfig?.extra?.eas?.projectId
 
 export const ApplicationInfoScreen = (): JSX.Element => {
   const { i18n, t } = useTranslation()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.application_info'),
+  })
+
   usePreventGoBack()
 
   const handleCopyPushToken = useCallback(async () => {
     try {
       if (!isExpoGo && !projectId) {
         throw new Error(
-          'You must set `projectId` in eas build then value will be avaliable from Constants?.expoConfig?.extra?.eas?.projectId'
+          'You must set `projectId` in eas build then value will be available from Constants?.expoConfig?.extra?.eas?.projectId'
         )
       }
       const token = (
diff --git a/src/screens/ColorsScreen.tsx b/src/screens/ColorsScreen.tsx
index b6ab9051..75a4ad4d 100644
--- a/src/screens/ColorsScreen.tsx
+++ b/src/screens/ColorsScreen.tsx
@@ -1,4 +1,5 @@
 import { Text, Center, ScrollView } from '~components'
+import { useScreenOptions, useTranslation } from '~hooks'
 
 const colorsVariants: NestedKeys<Colors>[] = [
   'primary',
@@ -11,19 +12,27 @@ const colorsVariants: NestedKeys<Colors>[] = [
   'light',
 ]
 
-export const ColorsScreen = (): JSX.Element => (
-  <ScrollView flexGrow={1} p={4}>
-    {colorsVariants.map((colorVariant) => (
-      <Center
-        mb={4}
-        key={colorVariant}
-        height={8}
-        width="full"
-        alignSelf="stretch"
-        backgroundColor={colorVariant}
-      >
-        <Text color="white">{colorVariant}</Text>
-      </Center>
-    ))}
-  </ScrollView>
-)
+export const ColorsScreen = (): JSX.Element => {
+  const { t } = useTranslation()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.colors'),
+  })
+
+  return (
+    <ScrollView flexGrow={1} p={4}>
+      {colorsVariants.map((colorVariant) => (
+        <Center
+          alignSelf="stretch"
+          backgroundColor={colorVariant}
+          height={8}
+          key={colorVariant}
+          mb={4}
+          width="full"
+        >
+          <Text color="white">{colorVariant}</Text>
+        </Center>
+      ))}
+    </ScrollView>
+  )
+}
diff --git a/src/screens/ComponentsScreen.tsx b/src/screens/ComponentsScreen.tsx
index 37a0124d..0debc739 100644
--- a/src/screens/ComponentsScreen.tsx
+++ b/src/screens/ComponentsScreen.tsx
@@ -1,7 +1,7 @@
 import * as Linking from 'expo-linking'
 
 import { Icon, Loader, Box, Text, Button, Center, ScrollView } from '~components'
-import { useCallback, useNotifications, useTranslation } from '~hooks'
+import { useCallback, useNotifications, useScreenOptions, useTranslation } from '~hooks'
 
 const headingSizes = ['xs', 'sm', 'md', 'lg', '2xl', '3xl', '4xl'] as const
 const loaderVariants = [
@@ -28,8 +28,13 @@ const loaderVariants = [
 ] as const
 
 export const ComponentsScreen = (): JSX.Element => {
-  const { notify } = useNotifications()
   const { t } = useTranslation()
+  const { notify } = useNotifications()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.components'),
+  })
+
   const testNotification = useCallback(
     () =>
       notify('info', {
diff --git a/src/screens/DataFromBeScreen_EXAMPLE.tsx b/src/screens/DataFromBeScreen_EXAMPLE.tsx
index b0daca05..89938ba4 100644
--- a/src/screens/DataFromBeScreen_EXAMPLE.tsx
+++ b/src/screens/DataFromBeScreen_EXAMPLE.tsx
@@ -1,11 +1,17 @@
 import React, { useCallback } from 'react'
 import { ListRenderItem, FlatList } from 'react-native'
 
-import { Loader, Center, Text, Box } from '~components'
-import { Spacer } from '~components/atoms'
+import { Loader, Center, Text, Box, Spacer } from '~components'
+import { useScreenOptions, useTranslation } from '~hooks'
 import { useGetCity_EXAMPLE } from '~query-hooks'
 import { TodoItem } from '~types/todos'
+
 export const DataFromBeScreen_EXAMPLE = () => {
+  const { t } = useTranslation()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.data_from_be_screen_example'),
+  })
   const { dataList, isFetchedDataAfterMount } = useGetCity_EXAMPLE()
 
   const renderItem: ListRenderItem<TodoItem> = useCallback(({ item: { title, id } }) => {
diff --git a/src/screens/DetailsScreen.tsx b/src/screens/DetailsScreen.tsx
index 5e4397dd..474ffaf5 100644
--- a/src/screens/DetailsScreen.tsx
+++ b/src/screens/DetailsScreen.tsx
@@ -1,16 +1,20 @@
+import { useLocalSearchParams } from 'expo-router'
+
 import { useBottomSheet, Center, Text, Button, Box } from '~components'
-import { useState, useTranslation } from '~hooks'
+import { useScreenOptions, useState, useTranslation } from '~hooks'
 
-export const DetailsScreen = (props: DetailsScreenProps): JSX.Element => {
-  const {
-    route: { params },
-  } = props
+export const DetailsScreen = (): JSX.Element => {
+  const { t } = useTranslation()
+  const localParams = useLocalSearchParams<{ user: string }>()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.details'),
+  })
 
   const [items, setItems] = useState<string[]>([])
   const { bottomSheetComponentRenderFunction, presentBottomSheet } = useBottomSheet({
     title: 'Details bottom sheet',
   })
-  const { t } = useTranslation()
 
   const bottomSheet = bottomSheetComponentRenderFunction(
     <Box px={4} py={10}>
@@ -29,7 +33,7 @@ export const DetailsScreen = (props: DetailsScreenProps): JSX.Element => {
       <Text>{t('details_screen.title')}</Text>
       <Button onPress={presentBottomSheet}>{t('details_screen.open_bottom_sheet')}</Button>
       <Text color="text">
-        {t('details_screen.screen_params', { params: JSON.stringify(params) })}
+        {t('details_screen.screen_params', { params: JSON.stringify(localParams) })}
       </Text>
       {bottomSheet}
     </Center>
diff --git a/src/screens/ExamplesScreen.tsx b/src/screens/ExamplesScreen.tsx
index 0c8fc550..d95941e3 100644
--- a/src/screens/ExamplesScreen.tsx
+++ b/src/screens/ExamplesScreen.tsx
@@ -1,27 +1,24 @@
-import { Button, ScrollView } from '~components'
-import { useTranslation, useCallback } from '~hooks'
+import { useRouter } from 'expo-router'
 
-export const ExamplesScreen = (props: ExamplesScreenProps): JSX.Element => {
-  const {
-    navigation: { navigate },
-  } = props
+import { Button, ScrollView } from '~components'
+import { useCallback, useTranslation, useScreenOptions } from '~hooks'
 
+export const ExamplesScreen = () => {
+  const { push } = useRouter()
   const { t } = useTranslation()
 
-  const goToApplicationInfo = useCallback(() => navigate('ApplicationInfo'), [navigate])
-  const goToColors = useCallback(() => navigate('Colors'), [navigate])
-  const goToComponents = useCallback(() => navigate('Components'), [navigate])
-  const goToTypography = useCallback(() => navigate('Typography'), [navigate])
-  const goToCityListScreen_EXAMPLE = useCallback(
-    () => navigate('DataFromBeScreen_EXAMPLE'),
-    [navigate]
-  )
-  const goToTestForm = useCallback(() => navigate('TestForm'), [navigate])
+  useScreenOptions({
+    title: t('navigation.screen_titles.examples'),
+  })
 
-  const goToHomeStackDetails = useCallback(
-    () => navigate('Details', { id: 'example-id' }),
-    [navigate]
-  )
+  const goToApplicationInfo = useCallback(() => push('/application-info'), [push])
+  const goToColors = useCallback(() => push('/example/colors'), [push])
+  const goToComponents = useCallback(() => push('/example/components'), [push])
+  const goToTypography = useCallback(() => push('/example/typography'), [push])
+  const goToCityListScreen_EXAMPLE = useCallback(() => push('/example/data-from-be'), [push])
+  const goToTestForm = useCallback(() => push('/example/test-form'), [push])
+
+  const goToHomeStackDetails = useCallback(() => push('/home/details'), [push])
 
   return (
     <ScrollView p={4}>
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index 56c9e492..c08e12de 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -1,28 +1,34 @@
+import { router } from 'expo-router'
 import { Image, StyleSheet } from 'react-native'
 
-import { Button, Center, Text } from '~components/atoms'
+import { Button, Center, Text } from '~components'
 import { darkLogo, lightLogo } from '~constants'
 import { useColorScheme } from '~contexts'
-import { useCallback, useTranslation } from '~hooks'
+import { useCallback, useScreenOptions, useTranslation } from '~hooks'
 
-export const HomeScreen = (props: HomeScreenProps): JSX.Element => {
-  const {
-    navigation: { navigate },
-  } = props
+export const HomeScreen = () => {
   const { t } = useTranslation()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.home'),
+  })
+
   const { colorScheme } = useColorScheme()
 
   const navigateToDetails = useCallback(() => {
-    navigate('Details', { id: 'home-id' })
-  }, [navigate])
+    router.navigate({
+      pathname: 'home/details',
+      params: { user: 'example@example.com' },
+    })
+  }, [])
 
   return (
     <Center flex={1} px={4}>
       <Image
+        resizeMethod="resize"
+        resizeMode="contain"
         source={colorScheme === 'light' ? lightLogo : darkLogo}
         style={styles.logo}
-        resizeMode="contain"
-        resizeMethod="resize"
       />
       <Text.H3Bold textAlign="center">{t('hello')}</Text.H3Bold>
       <Text.Caption textAlign="center">{t('thanks')}</Text.Caption>
diff --git a/src/screens/NotFoundScreen.tsx b/src/screens/NotFoundScreen.tsx
index 141fadf1..8726b1ec 100644
--- a/src/screens/NotFoundScreen.tsx
+++ b/src/screens/NotFoundScreen.tsx
@@ -1,8 +1,13 @@
 import { Center, Text } from '~components/atoms'
-import { useTranslation } from '~hooks'
+import { useScreenOptions, useTranslation } from '~hooks'
 
 export const NotFoundScreen = (): JSX.Element => {
   const { t } = useTranslation()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.not_found'),
+  })
+
   return (
     <Center>
       <Text>{t('errors.screen_not_found')}</Text>
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
index 482510db..a5610fc3 100644
--- a/src/screens/SettingsScreen.tsx
+++ b/src/screens/SettingsScreen.tsx
@@ -1,12 +1,17 @@
 import { Version, Spacer, Button, Center, Text, ScrollView } from '~components'
 import { colorSchemesList } from '~constants'
 import { useColorScheme } from '~contexts'
-import { useAuth, useCallback, useTranslation } from '~hooks'
+import { useAuth, useCallback, useScreenOptions, useTranslation } from '~hooks'
 import { noop } from '~utils'
 
 export const SettingsScreen = (): JSX.Element => {
   const { t } = useTranslation()
   const { setColorSchemeSetting, colorSchemeSetting } = useColorScheme()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.settings'),
+  })
+
   const { signOut } = useAuth()
 
   const handleColorSchemeSettingChange = useCallback(
diff --git a/src/screens/SignInScreen.test.tsx b/src/screens/SignInScreen.test.tsx
deleted file mode 100644
index e692fe3a..00000000
--- a/src/screens/SignInScreen.test.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { SignInScreen } from './SignInScreen'
-
-import { act, cleanup, fireEvent, render } from '~utils/testUtils'
-
-afterEach(cleanup)
-
-describe('SignInScreen', () => {
-  it('should skip', () => {
-    expect(true).toBe(true)
-  })
-
-  it('should render SignIn screen with the key elements', () => {
-    const { getByTestId, getAllByRole } = render(<SignInScreen />)
-    const emailInput = getByTestId('emailInput')
-    const passwordInput = getByTestId('passwordInput')
-    const confirmationCheckbox = getByTestId('confirmCheckbox')
-    const buttons = getAllByRole('button')
-
-    expect(emailInput).toBeDefined()
-    expect(passwordInput).toBeDefined()
-    expect(confirmationCheckbox).toBeDefined()
-    expect(buttons.length).toBe(2)
-  })
-
-  it('should display errors on required fields', async () => {
-    const { findAllByText, getByTestId, update } = render(<SignInScreen />)
-    const emailInput = getByTestId('emailInput')
-    const passwordInput = getByTestId('passwordInput')
-    const signInButton = getByTestId('signInButton')
-
-    expect(signInButton).toBeDefined()
-    fireEvent.changeText(emailInput, '')
-    fireEvent.changeText(passwordInput, '')
-    fireEvent.press(signInButton)
-
-    await act(async () => {
-      update(<SignInScreen />)
-      const requiredInputs = await findAllByText('This field is required')
-      expect(requiredInputs.length).toBe(2)
-    })
-  })
-
-  it('should validate email format', async () => {
-    const { getByTestId, getByText, update } = render(<SignInScreen />)
-
-    const emailInput = getByTestId('emailInput')
-    fireEvent.changeText(emailInput, 'test@test')
-
-    const signInButton = getByTestId('signInButton')
-    expect(signInButton).toBeDefined()
-
-    fireEvent.press(signInButton)
-
-    await act(async () => {
-      update(<SignInScreen />)
-    })
-
-    expect(getByText('Incorrect e-mail address')).toBeTruthy()
-  })
-})
diff --git a/src/screens/SignInScreen.tsx b/src/screens/SignInScreen.tsx
index a38277f0..aead3936 100644
--- a/src/screens/SignInScreen.tsx
+++ b/src/screens/SignInScreen.tsx
@@ -1,3 +1,4 @@
+import { useRouter } from 'expo-router'
 import { StyleSheet, Image } from 'react-native'
 
 import {
@@ -13,13 +14,17 @@ import {
 } from '~components'
 import { REGEX, darkLogo, lightLogo } from '~constants'
 import { useColorScheme } from '~contexts'
-import { useCallback, useSignInForm, useNavigation, useTranslation, useEffect } from '~hooks'
+import { useCallback, useSignInForm, useTranslation, useEffect, useScreenOptions } from '~hooks'
 
 export const SignInScreen = (): JSX.Element => {
-  const { navigate } = useNavigation()
+  const { push } = useRouter()
   const { t } = useTranslation()
   const { colorScheme } = useColorScheme()
 
+  useScreenOptions({
+    title: t('navigation.screen_titles.sign_in'),
+  })
+
   const { control, errors, submit, isSubmitting, setFocus } = useSignInForm()
 
   useEffect(() => {
@@ -28,8 +33,8 @@ export const SignInScreen = (): JSX.Element => {
     }, 500)
   }, [setFocus])
 
-  const navigateToSignUp = useCallback(() => navigate('SignUp'), [navigate])
-  const navigateToAppInfo = useCallback(() => navigate('ApplicationInfo'), [navigate])
+  const navigateToSignUp = useCallback(() => push('/sign-up'), [push])
+  const navigateToAppInfo = useCallback(() => push('/application-info'), [push])
   const focusPasswordInput = useCallback(() => setFocus('password'), [setFocus])
 
   return (
@@ -46,16 +51,15 @@ export const SignInScreen = (): JSX.Element => {
         />
         <Spacer y="8" />
         <ControlledField.Input
+          {...{ control, errors }}
           autoCapitalize="none"
-          control={control}
-          errors={errors}
+          enterKeyHint="next"
+          inputMode="email"
           isRequired
-          keyboardType="email-address"
           label={t('common.email_label')}
           name="email"
           onSubmitEditing={focusPasswordInput}
           placeholder={t('common.email_placeholder')}
-          returnKeyType="next"
           rules={{
             required: t('form.required'),
             pattern: {
@@ -66,15 +70,14 @@ export const SignInScreen = (): JSX.Element => {
           testID="emailInput"
         />
         <ControlledField.Input
+          {...{ control, errors }}
           autoCapitalize="none"
-          control={control}
-          errors={errors}
+          enterKeyHint="send"
           isRequired
           label={t('sign_in_screen.password_label')}
           name="password"
           onSubmitEditing={submit}
           placeholder={t('sign_in_screen.password_placeholder')}
-          returnKeyType="send"
           rules={{
             required: t('form.required'),
           }}
@@ -83,10 +86,9 @@ export const SignInScreen = (): JSX.Element => {
         />
         <Center mt={8}>
           <ControlledField.Checkbox
-            control={control}
-            errors={errors}
-            name="confirm"
+            {...{ control, errors }}
             checkboxText={t('sign_in_screen.remember_me')}
+            name="confirm"
             size={18}
             testID="confirmCheckbox"
           />
@@ -100,7 +102,7 @@ export const SignInScreen = (): JSX.Element => {
             {t('sign_in_screen.sign_in')}
           </Button>
           <Text bold mb={4}>
-            {t('sign_in_screen.dont_have_an_account')}
+            {t('sign_in_screen.do_not_have_an_account')}
           </Text>
           <Button.Link onPress={navigateToSignUp}>{t('sign_in_screen.sign_up')}</Button.Link>
         </Center>
diff --git a/src/screens/SignUpScreen.tsx b/src/screens/SignUpScreen.tsx
index d76f49e9..73b34dc5 100644
--- a/src/screens/SignUpScreen.tsx
+++ b/src/screens/SignUpScreen.tsx
@@ -1,13 +1,16 @@
 import { useCallback, useEffect } from 'react'
 
-import { ControlledField, KeyboardAwareScrollView } from '~components'
-import { Button, Center, Spacer } from '~components/atoms'
+import { Button, Center, Spacer, ControlledField, KeyboardAwareScrollView } from '~components'
 import { REGEX } from '~constants'
-import { useSignUpForm, useTranslation } from '~hooks'
+import { useScreenOptions, useSignUpForm, useTranslation } from '~hooks'
 
 export const SignUpScreen = () => {
   const { t } = useTranslation()
 
+  useScreenOptions({
+    title: t('navigation.screen_titles.sign_up'),
+  })
+
   const { control, errors, submit, isSubmitting, setFocus } = useSignUpForm()
 
   useEffect(() => {
@@ -23,29 +26,29 @@ export const SignUpScreen = () => {
     <KeyboardAwareScrollView>
       <Center px={8} flex={1} flexGrow={1}>
         <ControlledField.Input
-          mb={2}
+          {...{ control, errors }}
           autoCapitalize="none"
-          control={control}
-          errors={errors}
-          name="user"
+          enterKeyHint="next"
           label={t('common.user_label')}
+          mb={2}
+          name="user"
+          onSubmitEditing={focusEmailInput}
           placeholder={t('common.user_placeholder')}
           rules={{
             required: t('form.required'),
           }}
-          returnKeyType="next"
-          onSubmitEditing={focusEmailInput}
         />
         <ControlledField.Input
+          {...{ control, errors }}
+          enterKeyHint="next"
           autoCapitalize="none"
+          inputMode="email"
+          isRequired
           label={t('common.email_label')}
-          control={control}
-          errors={errors}
-          keyboardType="email-address"
-          placeholder={t('common.email_placeholder')}
+          mb={2}
           name="email"
-          returnKeyType="next"
           onSubmitEditing={focusPasswordInput}
+          placeholder={t('common.email_placeholder')}
           rules={{
             required: t('form.required'),
             pattern: {
@@ -53,45 +56,40 @@ export const SignUpScreen = () => {
               message: t('form.invalid_email_format'),
             },
           }}
-          isRequired
-          mb={2}
         />
         <ControlledField.Input
+          {...{ control, errors }}
+          enterKeyHint="next"
+          autoCapitalize="none"
           isRequired
-          mb={16}
-          returnKeyType="next"
-          onSubmitEditing={submit}
           label={t('sign_in_screen.password_label')}
-          control={control}
-          errors={errors}
+          mb={16}
           name="password"
-          type="password"
-          autoCapitalize="none"
+          onSubmitEditing={submit}
           placeholder={t('sign_in_screen.password_placeholder')}
           rules={{
             required: t('form.required'),
           }}
+          type="password"
         />
         <Spacer y={2} />
         <ControlledField.Checkbox
+          {...{ control, errors }}
+          checkboxText={t('sign_up_screen.agree_terms_label')}
           isRequired
-          control={control}
-          errors={errors}
           name="agree"
           size={18}
-          checkboxText={t('sign_up_screen.agree_terms_label')}
         />
         <Spacer y={2} />
         <ControlledField.Checkbox
+          {...{ control, errors }}
+          checkboxText={t('sign_up_screen.newsletter_label')}
           isRequired
-          control={control}
-          errors={errors}
           name="newsletter"
           size={18}
-          checkboxText={t('sign_up_screen.newsletter_label')}
         />
         <Spacer y={2} />
-        <Button onPress={submit} loading={isSubmitting} disabled={isSubmitting}>
+        <Button disabled={isSubmitting} loading={isSubmitting} onPress={submit}>
           {t('sign_up_screen.sign_up')}
         </Button>
       </Center>
diff --git a/src/screens/TestFormScreen.tsx b/src/screens/TestFormScreen.tsx
index 18c5d8e2..f758a37c 100644
--- a/src/screens/TestFormScreen.tsx
+++ b/src/screens/TestFormScreen.tsx
@@ -2,7 +2,7 @@ import { Controller } from 'react-hook-form'
 import { StyleSheet } from 'react-native'
 
 import { ControlledField, KeyboardAwareScrollView, TextArea, Button, Text } from '~components'
-import { useMemo, useTestForm, useTranslation } from '~hooks'
+import { useMemo, useScreenOptions, useTestForm, useTranslation } from '~hooks'
 
 const shoeSizes = [
   '34',
@@ -25,6 +25,11 @@ const MUSICS = ['Metal', 'Heavy Metal', 'Rock', 'Pop', 'Rap']
 
 export const TestFormScreen = (): JSX.Element => {
   const { t } = useTranslation()
+
+  useScreenOptions({
+    title: t('navigation.screen_titles.colors'),
+  })
+
   const { control, errors, submit, VALIDATION, setFocus } = useTestForm()
 
   const INTERESTS = useMemo(
@@ -69,125 +74,113 @@ export const TestFormScreen = (): JSX.Element => {
         {t('test_form.contact_data')}
       </Text>
       <ControlledField.Input
-        isRequired={true}
-        control={control}
-        errors={errors}
-        placeholder={t('test_form.name_placeholder')}
+        {...{ control, errors }}
+        enterKeyHint="next"
+        isRequired
         name="name"
-        returnKeyType="next"
         onSubmitEditing={setFocus('surname')}
+        placeholder={t('test_form.name_placeholder')}
       />
       <ControlledField.Input
-        control={control}
-        errors={errors}
-        placeholder={t('test_form.surname_placeholder')}
-        name="surname"
-        returnKeyType="next"
+        {...{ control, errors }}
+        enterKeyHint="next"
         mt={2}
+        name="surname"
         onSubmitEditing={setFocus('email')}
+        placeholder={t('test_form.surname_placeholder')}
       />
       <ControlledField.Input
-        control={control}
-        errors={errors}
-        placeholder={t('test_form.email_placeholder')}
-        name="email"
-        returnKeyType="next"
+        {...{ control, errors }}
+        enterKeyHint="next"
         mt={2}
+        name="email"
         onSubmitEditing={setFocus('phone')}
+        placeholder={t('test_form.email_placeholder')}
       />
       <ControlledField.Input
-        control={control}
-        errors={errors}
-        placeholder={t('test_form.phone_placeholder')}
-        name="phone"
-        returnKeyType="next"
+        {...{ control, errors }}
+        enterKeyHint="next"
         mt={2}
+        name="phone"
         onSubmitEditing={setFocus('postalCode')}
+        placeholder={t('test_form.phone_placeholder')}
       />
       <ControlledField.Input
-        control={control}
-        errors={errors}
-        placeholder={t('test_form.postalCode_placeholder')}
-        name="postalCode"
-        returnKeyType="next"
+        {...{ control, errors }}
+        enterKeyHint="next"
         mt={2}
+        name="postalCode"
         onSubmitEditing={setFocus('city')}
+        placeholder={t('test_form.postalCode_placeholder')}
       />
       <ControlledField.Input
-        control={control}
-        errors={errors}
-        placeholder={t('test_form.city_placeholder')}
-        name="city"
-        returnKeyType="next"
+        {...{ control, errors }}
+        enterKeyHint="next"
         mt={2}
+        name="city"
+        placeholder={t('test_form.city_placeholder')}
       />
       <ControlledField.Radio
+        {...{ control, errors }}
         isRequired
-        control={control}
-        errors={errors}
         name="age"
         radioOptions={AGES}
         rules={VALIDATION.age}
         label={t('test_form.age')}
       />
       <ControlledField.Radio
+        {...{ control, errors }}
         isRequired
-        control={control}
-        errors={errors}
         name="sex"
         radioOptions={[t('test_form.male'), t('test_form.female')]}
         rules={VALIDATION.sex}
         label={t('test_form.sex')}
       />
       <ControlledField.Select
-        label={t('test_form.education')}
+        {...{ control, errors }}
+        isRequired
         items={education}
-        control={control}
+        label={t('test_form.education')}
         name="education"
-        errors={errors}
         placeholder={t('test_form.education')}
-        isRequired
         rules={VALIDATION.education}
       />
       <ControlledField.Select
+        {...{ control, errors }}
+        isRequired
         items={mappedShoeSizes}
-        control={control}
-        errors={errors}
+        label={t('test_form.shoe_size')}
         name="shoeSize"
         placeholder={t('test_form.shoe_size')}
         rules={VALIDATION.shoeSize}
-        isRequired
-        label={t('test_form.shoe_size')}
       />
       <ControlledField.Checkbox
+        {...{ control, errors }}
         checkboxes={MUSICS}
-        control={control}
-        errors={errors}
+        isRequired
+        label={t('test_form.which_music')}
         name="music"
         rules={VALIDATION.music}
-        label={t('test_form.which_music')}
-        isRequired
       />
       <ControlledField.Checkbox
-        control={control}
-        errors={errors}
-        name="interests"
+        {...{ control, errors }}
         checkboxes={INTERESTS}
-        rules={VALIDATION.interests}
-        label={t('test_form.interests')}
         isRequired
+        label={t('test_form.interests')}
+        name="interests"
+        rules={VALIDATION.interests}
       />
       <Text fontSize="xl" fontWeight="bold" py={2}>
-        {t('test_form.additiona_comment')}
+        {t('test_form.additional_comment')}
       </Text>
       <Controller
-        control={control}
+        {...{ control }}
         name="comment"
         render={({ field }) => (
           <TextArea
             placeholder={t('test_form.comment')}
             value={field.value}
-            onChangeText={(value) => field.onChange(value)}
+            onChangeText={field.onChange}
           />
         )}
       />
diff --git a/src/screens/TypographyScreen.test.tsx b/src/screens/TypographyScreen.test.tsx
deleted file mode 100644
index a8291999..00000000
--- a/src/screens/TypographyScreen.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TypographyScreen, fontSizes } from './TypographyScreen'
-
-import { cleanup, render } from '~utils/testUtils'
-
-afterEach(cleanup)
-
-describe('TypographyScreen', () => {
-  it('should render Typography screen with the key elements', () => {
-    const { getByText, getByRole } = render(<TypographyScreen />)
-
-    const colorModeSwitch = getByRole('switch')
-    expect(colorModeSwitch).toBeTruthy()
-
-    fontSizes.forEach((fontSize) => {
-      expect(getByText(`Text - ${fontSize}`)).toBeDefined()
-    })
-  })
-})
diff --git a/src/screens/TypographyScreen.tsx b/src/screens/TypographyScreen.tsx
index bd149f45..1b095739 100644
--- a/src/screens/TypographyScreen.tsx
+++ b/src/screens/TypographyScreen.tsx
@@ -22,9 +22,8 @@ export const fontSizes = [
 const isWeb = Platform.OS === 'web'
 
 export const TypographyScreen = (): JSX.Element => {
-  const { setColorSchemeSetting, colorScheme } = useColorScheme()
-
   const { t } = useTranslation()
+  const { setColorSchemeSetting, colorScheme } = useColorScheme()
 
   return (
     <ScrollView>
diff --git a/src/screens/index.ts b/src/screens/index.ts
index ddaf4ff9..41d01881 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -9,6 +9,5 @@ export * from './NotFoundScreen'
 export * from './SettingsScreen'
 export * from './SignInScreen'
 export * from './SignUpScreen'
-export * from './TypographyScreen'
-
 export * from './TestFormScreen'
+export * from './TypographyScreen'
diff --git a/src/styles/index.ts b/src/styles/index.ts
new file mode 100644
index 00000000..a3b56794
--- /dev/null
+++ b/src/styles/index.ts
@@ -0,0 +1,3 @@
+import cssStyles from './root-layout.module.scss'
+
+export default cssStyles
diff --git a/src/styles/root-layout.module.scss b/src/styles/root-layout.module.scss
new file mode 100644
index 00000000..0329ef73
--- /dev/null
+++ b/src/styles/root-layout.module.scss
@@ -0,0 +1,87 @@
+$size-xs: 768px;
+$size-l: 1264px;
+$ui-sidebar: 244px;
+
+.container {
+  flex-direction: column;
+  @media (min-width: $size-xs) {
+    flex-direction: row;
+  }
+}
+// Header Logo
+.headerContainer {
+  padding-top: 0px;
+  min-height: 96px;
+  height: 96px;
+}
+
+.headerLink {
+  margin-bottom: 24px;
+}
+
+.headerLogo {
+  @media (min-width: $size-xs) and (max-width: $size-l) {
+    padding-top: 0px;
+    margin-top: 12px;
+    padding-bottom: 23px;
+  }
+  @media (min-width: $size-l) {
+    width: 40%;
+  }
+}
+
+.sideBarTabItemText {
+  @media (max-width: $size-l) {
+    display: none;
+    user-select: none;
+  }
+}
+
+.smallVisible {
+  display: flex;
+  @media (min-width: $size-xs) {
+    display: none;
+  }
+}
+
+.largeVisible {
+  display: none;
+  @media (min-width: $size-xs) {
+    display: flex;
+  }
+}
+
+.wideHidden {
+  @media (min-width: $size-l) {
+    display: none;
+  }
+}
+
+.wideVisible {
+  @media (max-width: $size-l) {
+    display: none;
+  }
+}
+
+.sideBar {
+  display: none;
+  @media (min-width: $size-xs) {
+    display: flex;
+  }
+  @media (min-width: $size-l) {
+    min-width: $ui-sidebar;
+    width: $ui-sidebar;
+  }
+}
+
+.sideBarInner {
+  @media (min-width: $size-l) {
+    min-width: $ui-sidebar;
+    width: $ui-sidebar;
+    align-items: flex-start;
+  }
+}
+
+.sideBarHeader {
+  align-items: center;
+}
diff --git a/src/types/i18next.d.ts b/src/types/i18next.d.ts
index 8819e31b..ae30cf94 100644
--- a/src/types/i18next.d.ts
+++ b/src/types/i18next.d.ts
@@ -1,7 +1,14 @@
 import 'i18next'
+import english from '~i18n/translations/en.json'
+
+type EN = typeof english
 
 declare module 'i18next' {
   interface CustomTypeOptions {
+    defaultNS: 'en'
     returnNull: false
+    resources: {
+      en: EN
+    }
   }
 }
diff --git a/src/utils/getApiError.ts b/src/utils/getApiError.ts
index 54ef65ad..7469669d 100644
--- a/src/utils/getApiError.ts
+++ b/src/utils/getApiError.ts
@@ -2,8 +2,8 @@ import i18n from '../i18n'
 
 //CONFIG: This are examples errors, change it
 export const API_ERRORS = [
-  { errorMessage: 'ERROR.INCORRECT.EMAIL', translation: i18n.t('errors.incorrect.email') },
-  { errorMessage: 'Token invalid', translation: i18n.t('errors.token.expired') },
+  { errorMessage: 'ERROR.INCORRECT.EMAIL', translation: i18n.t('form.invalid_email_format') },
+  { errorMessage: 'Token invalid', translation: i18n.t('errors.token_expired') },
   { errorMessage: 'Missing authentication', translation: i18n.t('errors.missing_auth') },
 ]
 export const getApiError = (errorMessage: string) => {
diff --git a/src/utils/testUtils.tsx b/src/utils/testUtils.tsx
index 56846976..37666204 100644
--- a/src/utils/testUtils.tsx
+++ b/src/utils/testUtils.tsx
@@ -1,5 +1,4 @@
 import { PortalProvider } from '@gorhom/portal'
-import { NavigationContainer } from '@react-navigation/native'
 import { render, RenderAPI } from '@testing-library/react-native'
 import { PropsWithChildren, ReactElement } from 'react'
 import { I18nextProvider } from 'react-i18next'
@@ -13,11 +12,9 @@ type RenderOptions = Parameters<typeof render>[1]
 const ProvidersWrapper: React.FC<PropsWithChildren> = ({ children }) => (
   <PortalProvider>
     <AuthProvider>
-      <NavigationContainer>
-        <ColorSchemeProvider>
-          <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
-        </ColorSchemeProvider>
-      </NavigationContainer>
+      <ColorSchemeProvider>
+        <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+      </ColorSchemeProvider>
     </AuthProvider>
   </PortalProvider>
 )
diff --git a/yarn.lock b/yarn.lock
index b25e555a..71bd7153 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1166,7 +1166,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -1207,6 +1207,11 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@bacons/react-views@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@bacons/react-views/-/react-views-1.1.3.tgz#06e7ae8803cc363d13d6fd06b828e10ad8bb3910"
+  integrity sha512-aLipQAkQKRzG64e28XHBpByyBPfANz0A6POqYHGyryHizG9vLCLNQwLe8gwFANEMBWW2Mx5YdQ7RkNdQMQ+CXQ==
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1601,6 +1606,11 @@
     resolve-from "^5.0.0"
     sucrase "3.34.0"
 
+"@expo/metro-runtime@3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@expo/metro-runtime/-/metro-runtime-3.1.2.tgz#4cc4fe53aa8f716307f584c67db76268d38c2ed7"
+  integrity sha512-Wekv2AZ3HY0NG9Im8AMB1KHGyHjmALg6xekVK34724I/DLtcocLKtQEP04oI9GcAZBotAhROHH5E4ADhJAEgYg==
+
 "@expo/osascript@^2.0.31":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@expo/osascript/-/osascript-2.1.0.tgz#c407dfe839b5e898829d31e6accd962f91adac1c"
@@ -1695,6 +1705,16 @@
   resolved "https://registry.yarnpkg.com/@expo/sdk-runtime-versions/-/sdk-runtime-versions-1.0.0.tgz#d7ebd21b19f1c6b0395e50d78da4416941c57f7c"
   integrity sha512-Doz2bfiPndXYFPMRwPyGa1k5QaKDVpY806UJj570epIiMzWaYyCtobasyfC++qfIXVb5Ocy7r3tP9d62hAQ7IQ==
 
+"@expo/server@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@expo/server/-/server-0.3.0.tgz#b16767999382b0f5ea88d86609a5ceabcff1388c"
+  integrity sha512-5oIqedpLVMnf1LGI9Xd5OOGmK3DjgH9VpuqVN4e/6DwLT05RZJMyI7ylfG6QSy1e44yOgjv242tLyg0e/zdZ+A==
+  dependencies:
+    "@remix-run/node" "^1.19.3"
+    abort-controller "^3.0.0"
+    debug "^4.3.4"
+    source-map-support "~0.5.21"
+
 "@expo/spawn-async@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@expo/spawn-async/-/spawn-async-1.5.0.tgz#799827edd8c10ef07eb1a2ff9dcfe081d596a395"
@@ -2246,6 +2266,21 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-slot@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
 "@react-native-async-storage/async-storage@1.21.0":
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.21.0.tgz#d7e370028e228ab84637016ceeb495878b7a44c8"
@@ -2623,7 +2658,7 @@
     invariant "^2.2.4"
     nullthrows "^1.1.1"
 
-"@react-navigation/bottom-tabs@^6.5.11":
+"@react-navigation/bottom-tabs@^6.5.11", "@react-navigation/bottom-tabs@~6.5.7":
   version "6.5.11"
   resolved "https://registry.yarnpkg.com/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz#b6e67a3aa19e60ed9c1139fa0253586c479832d5"
   integrity sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==
@@ -2649,7 +2684,7 @@
   resolved "https://registry.yarnpkg.com/@react-navigation/elements/-/elements-1.3.21.tgz#debac6becc6b6692da09ec30e705e476a780dfe1"
   integrity sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==
 
-"@react-navigation/native-stack@^6.9.17":
+"@react-navigation/native-stack@^6.9.17", "@react-navigation/native-stack@~6.9.12":
   version "6.9.17"
   resolved "https://registry.yarnpkg.com/@react-navigation/native-stack/-/native-stack-6.9.17.tgz#4fc370b14be07296423ae8c00940fb002c6001b5"
   integrity sha512-X8p8aS7JptQq7uZZNFEvfEcPf6tlK4PyVwYDdryRbG98B4bh2wFQYMThxvqa+FGEN7USEuHdv2mF0GhFKfX0ew==
@@ -2657,7 +2692,7 @@
     "@react-navigation/elements" "^1.3.21"
     warn-once "^0.1.0"
 
-"@react-navigation/native@^6.1.9":
+"@react-navigation/native@^6.1.9", "@react-navigation/native@~6.1.6":
   version "6.1.9"
   resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-6.1.9.tgz#8ef87095cd9c2ed094308c726157c7f6fc28796e"
   integrity sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==
@@ -2683,6 +2718,81 @@
     color "^4.2.3"
     warn-once "^0.1.0"
 
+"@remix-run/node@^1.19.3":
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/@remix-run/node/-/node-1.19.3.tgz#d27e2f742fc45379525cb3fca466a883ca06d6c9"
+  integrity sha512-z5qrVL65xLXIUpU4mkR4MKlMeKARLepgHAk4W5YY3IBXOreRqOGUC70POViYmY7x38c2Ia1NwqL80H+0h7jbMw==
+  dependencies:
+    "@remix-run/server-runtime" "1.19.3"
+    "@remix-run/web-fetch" "^4.3.6"
+    "@remix-run/web-file" "^3.0.3"
+    "@remix-run/web-stream" "^1.0.4"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    abort-controller "^3.0.0"
+    cookie-signature "^1.1.0"
+    source-map-support "^0.5.21"
+    stream-slice "^0.1.2"
+
+"@remix-run/router@1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.7.2.tgz#cba1cf0a04bc04cb66027c51fa600e9cbc388bc8"
+  integrity sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==
+
+"@remix-run/server-runtime@1.19.3":
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/@remix-run/server-runtime/-/server-runtime-1.19.3.tgz#206b55337c266c5bc254878f8ff3cd5677cc60fb"
+  integrity sha512-KzQ+htUsKqpBgKE2tWo7kIIGy3MyHP58Io/itUPvV+weDjApwr9tQr9PZDPA3yAY6rAzLax7BU0NMSYCXWFY5A==
+  dependencies:
+    "@remix-run/router" "1.7.2"
+    "@types/cookie" "^0.4.1"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    cookie "^0.4.1"
+    set-cookie-parser "^2.4.8"
+    source-map "^0.7.3"
+
+"@remix-run/web-blob@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/web-blob/-/web-blob-3.1.0.tgz#e0c669934c1eb6028960047e57a13ed38bbfb434"
+  integrity sha512-owGzFLbqPH9PlKb8KvpNJ0NO74HWE2euAn61eEiyCXX/oteoVzTVSN8mpLgDjaxBf2btj5/nUllSUgpyd6IH6g==
+  dependencies:
+    "@remix-run/web-stream" "^1.1.0"
+    web-encoding "1.1.5"
+
+"@remix-run/web-fetch@^4.3.6":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/web-fetch/-/web-fetch-4.4.2.tgz#ce7aedef72cc26e15060e8cf84674029f92809b6"
+  integrity sha512-jgKfzA713/4kAW/oZ4bC3MoLWyjModOVDjFPNseVqcJKSafgIscrYL9G50SurEYLswPuoU3HzSbO0jQCMYWHhA==
+  dependencies:
+    "@remix-run/web-blob" "^3.1.0"
+    "@remix-run/web-file" "^3.1.0"
+    "@remix-run/web-form-data" "^3.1.0"
+    "@remix-run/web-stream" "^1.1.0"
+    "@web3-storage/multipart-parser" "^1.0.0"
+    abort-controller "^3.0.0"
+    data-uri-to-buffer "^3.0.1"
+    mrmime "^1.0.0"
+
+"@remix-run/web-file@^3.0.3", "@remix-run/web-file@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/web-file/-/web-file-3.1.0.tgz#07219021a2910e90231bc30ca1ce693d0e9d3825"
+  integrity sha512-dW2MNGwoiEYhlspOAXFBasmLeYshyAyhIdrlXBi06Duex5tDr3ut2LFKVj7tyHLmn8nnNwFf1BjNbkQpygC2aQ==
+  dependencies:
+    "@remix-run/web-blob" "^3.1.0"
+
+"@remix-run/web-form-data@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/web-form-data/-/web-form-data-3.1.0.tgz#47f9ad8ce8bf1c39ed83eab31e53967fe8e3df6a"
+  integrity sha512-NdeohLMdrb+pHxMQ/Geuzdp0eqPbea+Ieo8M8Jx2lGC6TBHsgHzYcBvr0LyPdPVycNRDEpWpiDdCOdCryo3f9A==
+  dependencies:
+    web-encoding "1.1.5"
+
+"@remix-run/web-stream@^1.0.4", "@remix-run/web-stream@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/web-stream/-/web-stream-1.1.0.tgz#b93a8f806c2c22204930837c44d81fdedfde079f"
+  integrity sha512-KRJtwrjRV5Bb+pM7zxcTJkhIqWWSy+MYsIxHK+0m5atcznsf15YwUBWHWulZerV2+vvHH1Lp1DD7pw6qKW8SgA==
+  dependencies:
+    web-streams-polyfill "^3.1.1"
+
 "@segment/loosely-validate-event@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz#87dfc979e5b4e7b82c5f1d8b722dfd5d77644681"
@@ -2833,6 +2943,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
+  integrity sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==
+
 "@types/eslint-scope@^3.7.3":
   version "3.7.7"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
@@ -3306,6 +3421,11 @@
     "@urql/core" ">=2.3.1"
     wonka "^4.0.14"
 
+"@web3-storage/multipart-parser@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@web3-storage/multipart-parser/-/multipart-parser-1.0.0.tgz#6b69dc2a32a5b207ba43e556c25cc136a56659c4"
+  integrity sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw==
+
 "@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
   version "1.11.6"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
@@ -3459,6 +3579,11 @@
   resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
 
+"@zxing/text-encoding@0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
+  integrity sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==
+
 abab@^2.0.5, abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -4396,6 +4521,21 @@ charenc@0.0.2, charenc@~0.0.1:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -4757,11 +4897,21 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
+cookie-signature@^1.1.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.2.1.tgz#790dea2cce64638c7ae04d9fabed193bd7ccf3b4"
+  integrity sha512-78KWk9T26NhzXtuL26cIJ8/qNHANyJ/ZYrmEXFzUmhZdjpBv+DlWlOANRTGBt48YcyslsLrj0bMLFTmXvLRCOw==
+
 cookie@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
+cookie@^0.4.1:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
+  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+
 copy-webpack-plugin@^10.2.0:
   version "10.2.4"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-10.2.4.tgz#6c854be3fdaae22025da34b9112ccf81c63308fe"
@@ -5019,6 +5169,11 @@ dag-map@~1.0.0:
   resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-1.0.2.tgz#e8379f041000ed561fc515475c1ed2c85eece8d7"
   integrity sha512-+LSAiGFwQ9dRnRdOeaj7g47ZFJcOUPukAP8J3A3fuZ1g9Y44BG+P1sgApjLXTQPOzC4+7S9Wr8kXsfpINM4jpw==
 
+data-uri-to-buffer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz#594b8973938c5bc2c33046535785341abc4f3636"
+  integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
+
 data-urls@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
@@ -6109,6 +6264,21 @@ expo-pwa@0.0.127:
     commander "2.20.0"
     update-check "1.5.3"
 
+expo-router@~3.4.6:
+  version "3.4.6"
+  resolved "https://registry.yarnpkg.com/expo-router/-/expo-router-3.4.6.tgz#ef0c8b06e7e0e370ca8d0a1c4564996f788feb38"
+  integrity sha512-yxl0QE4KAqLmLyH8AxWsGSV3M34jsAE8X75cOB2oaK0+Pu9VHSUf6w3iRi93IiJ0rOUXm8jKrjhfhZOrrNh7EA==
+  dependencies:
+    "@expo/metro-runtime" "3.1.2"
+    "@expo/server" "^0.3.0"
+    "@radix-ui/react-slot" "1.0.1"
+    "@react-navigation/bottom-tabs" "~6.5.7"
+    "@react-navigation/native" "~6.1.6"
+    "@react-navigation/native-stack" "~6.9.12"
+    expo-splash-screen "0.26.4"
+    react-helmet-async "^1.3.0"
+    schema-utils "^4.0.1"
+
 expo-screen-orientation@~6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-6.4.1.tgz#1c4428a058921e48b5caa45367e626b8bec10e24"
@@ -6119,6 +6289,13 @@ expo-secure-store@~12.8.1:
   resolved "https://registry.yarnpkg.com/expo-secure-store/-/expo-secure-store-12.8.1.tgz#369a570702fa1dc0c49ea41a5ab18aca2a986d38"
   integrity sha512-Ju3jmkHby4w7rIzdYAt9kQyQ7HhHJ0qRaiQOInknhOLIltftHjEgF4I1UmzKc7P5RCfGNmVbEH729Pncp/sHXQ==
 
+expo-splash-screen@0.26.4, expo-splash-screen@~0.26.4:
+  version "0.26.4"
+  resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.26.4.tgz#bc1fb226c6eae03ee351a3ebe5521a37f868cbc7"
+  integrity sha512-2DwofTQ0FFQCsvDysm/msENsbyNsJiAJwK3qK/oXeizECAPqD7bK19J4z9kuEbr7ORPX9MLnTQYKl6kmX3keUg==
+  dependencies:
+    "@expo/prebuild-config" "6.7.4"
+
 expo-splash-screen@~0.17.0:
   version "0.17.5"
   resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.17.5.tgz#a18dc59c1cc28ebbedbf0a7529a419d18ab0b311"
@@ -6127,13 +6304,6 @@ expo-splash-screen@~0.17.0:
     "@expo/configure-splash-screen" "^0.6.0"
     "@expo/prebuild-config" "5.0.7"
 
-expo-splash-screen@~0.26.4:
-  version "0.26.4"
-  resolved "https://registry.yarnpkg.com/expo-splash-screen/-/expo-splash-screen-0.26.4.tgz#bc1fb226c6eae03ee351a3ebe5521a37f868cbc7"
-  integrity sha512-2DwofTQ0FFQCsvDysm/msENsbyNsJiAJwK3qK/oXeizECAPqD7bK19J4z9kuEbr7ORPX9MLnTQYKl6kmX3keUg==
-  dependencies:
-    "@expo/prebuild-config" "6.7.4"
-
 expo-status-bar@~1.11.1:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/expo-status-bar/-/expo-status-bar-1.11.1.tgz#a11318741d361048c11db2b16c4364a79a74af30"
@@ -7203,6 +7373,11 @@ image-size@^1.0.2:
   dependencies:
     queue "6.0.2"
 
+immutable@^4.0.0:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.5.tgz#f8b436e66d59f99760dc577f5c99a4fd2a5cc5a0"
+  integrity sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -9145,6 +9320,11 @@ mri@^1.2.0:
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
   integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
+mrmime@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
+  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -10457,11 +10637,27 @@ react-error-overlay@6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-fast-compare@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-freeze@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d"
   integrity sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==
 
+react-helmet-async@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
+  integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.2.0"
+    shallowequal "^1.1.0"
+
 react-hook-form@^7.49.3:
   version "7.49.3"
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.49.3.tgz#576a4567f8a774830812f4855e89f5da5830435c"
@@ -11044,6 +11240,15 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.70.0:
+  version "1.70.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.70.0.tgz#761197419d97b5358cb25f9dd38c176a8a270a75"
+  integrity sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@>=0.6.0, sax@^1.2.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
@@ -11088,7 +11293,7 @@ schema-utils@^3.1.1, schema-utils@^3.2.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-schema-utils@^4.0.0:
+schema-utils@^4.0.0, schema-utils@^4.0.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"
   integrity sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==
@@ -11210,6 +11415,11 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+set-cookie-parser@^2.4.8:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz#131921e50f62ff1a66a461d7d62d7b21d5d15a51"
+  integrity sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==
+
 set-function-length@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.0.tgz#2f81dc6c16c7059bda5ab7c82c11f03a515ed8e1"
@@ -11252,6 +11462,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -11384,7 +11599,7 @@ source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -11406,7 +11621,7 @@ source-map-support@0.5.13:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@^0.5.16, source-map-support@~0.5.20, source-map-support@~0.5.21:
+source-map-support@^0.5.16, source-map-support@^0.5.21, source-map-support@~0.5.20, source-map-support@~0.5.21:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -11544,6 +11759,11 @@ stream-buffers@2.2.x:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
+stream-slice@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/stream-slice/-/stream-slice-0.1.2.tgz#2dc4f4e1b936fb13f3eb39a2def1932798d07a4b"
+  integrity sha512-QzQxpoacatkreL6jsxnVb7X5R/pGw9OUv2qWTYWnmLpg4NdN31snPy/f3TdQE1ZUXaThRvj1Zw4/OGg0ZkaLMA==
+
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -12352,7 +12572,7 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-util@^0.12.5:
+util@^0.12.3, util@^0.12.5:
   version "0.12.5"
   resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
   integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==
@@ -12460,6 +12680,20 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-encoding@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/web-encoding/-/web-encoding-1.1.5.tgz#fc810cf7667364a6335c939913f5051d3e0c4864"
+  integrity sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==
+  dependencies:
+    util "^0.12.3"
+  optionalDependencies:
+    "@zxing/text-encoding" "0.9.0"
+
+web-streams-polyfill@^3.1.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.2.tgz#32e26522e05128203a7de59519be3c648004343b"
+  integrity sha512-3pRGuxRF5gpuZc0W+EpwQRmCD7gRqcDOMt688KmdlDAgAyaB1XlN0zq2njfDNm44XVdIouE7pZ6GzbdyH47uIQ==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"