diff --git a/assets/logo/logo-sygnet-dark.png b/assets/logo/logo-sygnet-dark.png
index a64f209b..09ce2d5d 100644
Binary files a/assets/logo/logo-sygnet-dark.png and b/assets/logo/logo-sygnet-dark.png differ
diff --git a/src/components/LandingHeader.tsx b/src/components/LandingHeader.tsx
index f001e4ea..e28eb5af 100644
--- a/src/components/LandingHeader.tsx
+++ b/src/components/LandingHeader.tsx
@@ -1,8 +1,7 @@
 import { lightBinarLogo, darkBinarLogo } from '@baca/constants'
 import { useColorScheme } from '@baca/contexts'
 import { Box, Button, Icon, Pressable, Spacer } from '@baca/design-system'
-import { useCallback, useTranslation } from '@baca/hooks'
-import { TabColorsStrings } from '@baca/navigation/tabNavigator/navigation-config'
+import { useCallback, useTheme, useTranslation } from '@baca/hooks'
 import { isSignedInAtom } from '@baca/store/auth'
 import { useRouter } from 'expo-router'
 import { useAtomValue } from 'jotai'
@@ -11,6 +10,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 export function LandingHeader() {
   const { colorScheme } = useColorScheme()
+  const { colors } = useTheme()
   const { top } = useSafeAreaInsets()
   const { t } = useTranslation()
   const { push, canGoBack, back } = useRouter()
@@ -25,7 +25,7 @@ export function LandingHeader() {
   return (
     <View
       style={[
-        { height, paddingTop: top },
+        { borderBottomColor: colors.border.secondary, height, paddingTop: top },
         jsStyles.appHeader,
         Platform.select({ default: {}, web: { display: 'flex' } }),
       ]}
@@ -58,7 +58,6 @@ export function LandingHeader() {
 const jsStyles = StyleSheet.create({
   appHeader: {
     alignItems: 'center',
-    borderBottomColor: TabColorsStrings.lightGray,
     borderBottomWidth: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
diff --git a/src/navigation/tabNavigator/components/AppHeader.tsx b/src/navigation/tabNavigator/components/AppHeader.tsx
index eb030c2f..ce31c2c2 100644
--- a/src/navigation/tabNavigator/components/AppHeader.tsx
+++ b/src/navigation/tabNavigator/components/AppHeader.tsx
@@ -1,11 +1,11 @@
 import { CompanyLogo } from '@baca/components'
 import { isWeb } from '@baca/constants'
+import { useTheme } from '@baca/hooks'
 import { StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
-import { TabColorsStrings } from '../navigation-config'
-
 export function AppHeader() {
+  const { colors } = useTheme()
   const { top } = useSafeAreaInsets()
 
   if (!isWeb) return null
@@ -13,7 +13,12 @@ export function AppHeader() {
   const height = 60 + top
 
   return (
-    <View style={[{ height, paddingTop: top }, jsStyles.appHeader]}>
+    <View
+      style={[
+        { borderBottomColor: colors.border.secondary, height, paddingTop: top },
+        jsStyles.appHeader,
+      ]}
+    >
       <CompanyLogo height={60} width={150} />
     </View>
   )
@@ -22,7 +27,6 @@ export function AppHeader() {
 const jsStyles = StyleSheet.create({
   appHeader: {
     alignItems: 'center',
-    borderBottomColor: TabColorsStrings.lightGray,
     borderBottomWidth: 1,
     display: 'flex',
     flexDirection: 'row',
diff --git a/src/navigation/tabNavigator/components/BottomBar.tsx b/src/navigation/tabNavigator/components/BottomBar.tsx
index 18b95580..66ed2d21 100644
--- a/src/navigation/tabNavigator/components/BottomBar.tsx
+++ b/src/navigation/tabNavigator/components/BottomBar.tsx
@@ -1,15 +1,15 @@
-import { useColorScheme } from '@baca/contexts'
 import { Icon } from '@baca/design-system'
+import { useTheme } from '@baca/hooks'
 import cssStyles from '@baca/styles'
 import { Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 import { TabBarItemWrapper } from './TabBarItemWrapper'
-import { bottomTabs, TabColors, TabColorsStrings } from '../navigation-config'
+import { bottomTabs } from '../navigation-config'
 import { cns } from '../utils'
 
 export function BottomBar({ visible }: { visible: boolean }) {
-  const { colorScheme } = useColorScheme()
+  const { colors } = useTheme()
   return (
     <View
       style={[
@@ -24,14 +24,14 @@ export function BottomBar({ visible }: { visible: boolean }) {
         }),
       ]}
     >
-      <View style={jsStyles.nav}>
+      <View style={[jsStyles.nav, { borderTopColor: colors.border.secondary }]}>
         {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}
+                color="nav.item.button.icon.fg"
                 style={[
                   jsStyles.tabIcon,
                   pressed && jsStyles.tabIconPressed,
@@ -54,7 +54,6 @@ export function BottomBar({ visible }: { visible: boolean }) {
 const jsStyles = StyleSheet.create({
   nav: {
     alignItems: 'center',
-    borderTopColor: TabColorsStrings.lightGray,
     borderTopWidth: 1,
     flexDirection: 'row',
     height: 49,
diff --git a/src/navigation/tabNavigator/components/HeaderLogo.tsx b/src/navigation/tabNavigator/components/HeaderLogo.tsx
index 4eb285b6..2eebb657 100644
--- a/src/navigation/tabNavigator/components/HeaderLogo.tsx
+++ b/src/navigation/tabNavigator/components/HeaderLogo.tsx
@@ -1,14 +1,15 @@
 import { CompanyLogo } from '@baca/components'
+import { useTheme } from '@baca/hooks'
 import cssStyles from '@baca/styles'
 import { Pressable } from '@bacons/react-views'
 import { Link } from 'expo-router'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import { useWidth } from '../hooks'
-import { TabColorsStrings } from '../navigation-config'
 import { cns } from '../utils'
 
 export function HeaderLogo() {
+  const { colors } = useTheme()
   const isLargeHorizontal = useWidth(1264)
 
   return (
@@ -32,9 +33,7 @@ export function HeaderLogo() {
               style={[
                 jsStyles.headerLogo,
                 {
-                  backgroundColor: hovered
-                    ? TabColorsStrings.lightGray50
-                    : TabColorsStrings.transparent,
+                  backgroundColor: hovered ? colors.bg.tertiary : colors.Base.transparent,
                 },
               ]}
             >
diff --git a/src/navigation/tabNavigator/components/SideBar.tsx b/src/navigation/tabNavigator/components/SideBar.tsx
index ea94fa78..704649d7 100644
--- a/src/navigation/tabNavigator/components/SideBar.tsx
+++ b/src/navigation/tabNavigator/components/SideBar.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@baca/hooks'
 import { signOut } from '@baca/store/auth'
 import cssStyles from '@baca/styles'
 import { Platform, StyleSheet, View } from 'react-native'
@@ -5,12 +6,13 @@ import { Platform, StyleSheet, View } from 'react-native'
 import { HeaderLogo } from './HeaderLogo'
 import { SideBarTabItem } from './SideBarTabItem'
 import { useWidth } from '../hooks'
-import { TabColorsStrings, upperSideTabs } from '../navigation-config'
+import { upperSideTabs } from '../navigation-config'
 import { cns } from '../utils'
 
 const NAV_MEDIUM_WIDTH = 244
 
 export function SideBar({ visible }: { visible: boolean }) {
+  const { colors } = useTheme()
   const isLarge = useWidth(1264)
 
   return (
@@ -36,6 +38,7 @@ export function SideBar({ visible }: { visible: boolean }) {
       <View
         style={[
           jsStyles.sidebarInner,
+          { borderRightColor: colors.border.secondary },
           ...Platform.select({
             default: [
               isLarge &&
@@ -97,7 +100,6 @@ const jsStyles = StyleSheet.create({
 
   sidebarInner: {
     alignItems: 'stretch',
-    borderRightColor: TabColorsStrings.lightGray,
     borderRightWidth: 1,
     height: '100%',
     maxHeight: '100%',
diff --git a/src/navigation/tabNavigator/components/SideBarTabItem.tsx b/src/navigation/tabNavigator/components/SideBarTabItem.tsx
index 845cd23a..cc00ba9d 100644
--- a/src/navigation/tabNavigator/components/SideBarTabItem.tsx
+++ b/src/navigation/tabNavigator/components/SideBarTabItem.tsx
@@ -1,14 +1,10 @@
-import { useColorScheme } from '@baca/contexts'
-import { Icon } from '@baca/design-system'
-import cssStyles from '@baca/styles'
+import { Icon, Text } from '@baca/design-system'
+import { useTheme } from '@baca/hooks'
 import { IconNames } from '@baca/types/icon'
-import { Text } from '@bacons/react-views'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import { TabBarItemWrapper } from './TabBarItemWrapper'
 import { useWidth } from '../hooks'
-import { TabColors, TabColorsStrings } from '../navigation-config'
-import { cns } from '../utils'
 
 export function SideBarTabItem({
   children,
@@ -26,7 +22,7 @@ export function SideBarTabItem({
   params?: Record<string, string>
 }) {
   const isLarge = useWidth(1264)
-  const { colorScheme } = useColorScheme()
+  const { colors } = useTheme()
 
   return (
     <TabBarItemWrapper {...{ name, onPress, params }} id={name} style={jsStyles.sidebarTabItem}>
@@ -35,7 +31,7 @@ export function SideBarTabItem({
           style={[
             jsStyles.sidebarItemContainer,
             hovered && {
-              backgroundColor: TabColorsStrings.lightGray50,
+              backgroundColor: colors.bg.tertiary,
             },
           ]}
         >
@@ -47,30 +43,13 @@ export function SideBarTabItem({
               },
             ]}
           >
-            <Icon
-              name={focused ? iconFocused : icon}
-              size={30}
-              color={colorScheme === 'light' ? TabColors.tabIconDark : TabColors.tabIconLight}
-            />
+            <Icon color="nav.item.button.icon.fg" name={focused ? iconFocused : icon} size={30} />
           </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,
-            ]}
+            color="text.secondary"
+            // eslint-disable-next-line react-native/no-inline-styles
+            style={[jsStyles.sidebarItemText, { display: isLarge ? 'flex' : 'none' }]}
+            variant={focused ? 'MdBold' : 'MdSemibold'}
           >
             {children}
           </Text>
@@ -81,7 +60,6 @@ export function SideBarTabItem({
 }
 
 const jsStyles = StyleSheet.create({
-  fontBold: { fontWeight: 'bold' },
   sidebarIconContainer: Platform.select({
     default: { padding: 0 },
     web: {
@@ -103,10 +81,9 @@ const jsStyles = StyleSheet.create({
     }),
   },
   sidebarItemText: {
-    fontSize: 16,
-    lineHeight: 24,
     marginLeft: 16,
     marginRight: 16,
+    userSelect: 'none',
   },
   sidebarTabItem: {
     paddingVertical: 4,
diff --git a/src/navigation/tabNavigator/navigation-config.ts b/src/navigation/tabNavigator/navigation-config.ts
index 061f97d3..81ba8419 100644
--- a/src/navigation/tabNavigator/navigation-config.ts
+++ b/src/navigation/tabNavigator/navigation-config.ts
@@ -1,6 +1,4 @@
-import { palette } from '@baca/design-system'
 import { IconNames } from '@baca/types/icon'
-import { hex2rgba } from '@baca/utils'
 
 type Tab = {
   displayedName: string
@@ -64,16 +62,3 @@ export const upperSideTabs: Tabs = [
 export const bottomSideTabs: Tabs = []
 
 export const bottomTabs: Tabs = [...upperSideTabs]
-
-export const TabColors: Record<string, ColorNames> = {
-  tabIconDark: 'text.brand.tertiary',
-  tabIconLight: 'text.success.primary',
-} 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/screens/UserSessionScreen.tsx b/src/screens/UserSessionScreen.tsx
index 99dddbe9..72aec0a8 100644
--- a/src/screens/UserSessionScreen.tsx
+++ b/src/screens/UserSessionScreen.tsx
@@ -2,6 +2,7 @@ import { useAuthControllerMe } from '@baca/api/query/auth/auth'
 import { Box, Button, ScrollView, Text } from '@baca/design-system'
 import { Token, getToken } from '@baca/services'
 import { isRefreshingTokenAtom } from '@baca/store'
+import { wait } from '@baca/utils'
 import { useAtomValue } from 'jotai'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -22,7 +23,11 @@ export const UserSessionScreen = () => {
 
   const fetchUser = useCallback(async () => {
     await refetch()
-  }, [refetch])
+
+    // Refetch function could refresh token, so we are fetching it from store again
+    await wait(100)
+    await fetchToken()
+  }, [fetchToken, refetch])
 
   useEffect(() => {
     fetchToken()
diff --git a/src/services/TokenService.ts b/src/services/TokenService.ts
index 0ada592f..40b71e4a 100644
--- a/src/services/TokenService.ts
+++ b/src/services/TokenService.ts
@@ -50,7 +50,13 @@ export const refreshTokenIfNeeded = async (token: Token): Promise<Token> => {
       return token
     }
 
-    const refetchTriggerTime = Date.now() + 1000 * 14.9 * 60 //CONFIG: add time when to refetch token before current token expiration f.e. 1 hour -> 1000 * 60 * 60
+    // CONFIG: add time when to refetch token before current token expiration f.e. 1 hour -> 1000 * 60 * 60
+    // Current time - 14.9 minute
+    // If token is valid for 20 minute, it will be refreshed after 6 minutes
+    // Current time is set like that to easily test this logic, but in production app it could be 1 or 2 minutes
+    const timeBeforeTokenShouldBeRefetched = 1000 * 60 * 14.9
+
+    const refetchTriggerTime = Date.now() + timeBeforeTokenShouldBeRefetched
     const shouldRefreshToken = expirationTime < Math.round(refetchTriggerTime)
 
     // If token is still refreshing and there is no logout message shown app should try again to get token after 0.5 second