diff --git a/apps/mobile/app.json b/apps/mobile/app.json
index 868366f..5c59f8e 100644
--- a/apps/mobile/app.json
+++ b/apps/mobile/app.json
@@ -6,6 +6,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "scheme": "kittygram",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
diff --git a/apps/mobile/src/app/_layout.tsx b/apps/mobile/src/app/_layout.tsx
index 5bc5c8c..78bb290 100644
--- a/apps/mobile/src/app/_layout.tsx
+++ b/apps/mobile/src/app/_layout.tsx
@@ -1,6 +1,7 @@
 import { Stack } from 'expo-router/stack';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Toast from 'react-native-toast-message';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
 import { Provider } from 'react-redux';
 import { CustomToast } from '../components/CustomToast';
 import { store } from '../store/store';
@@ -11,20 +12,27 @@ const toastConfig = {
 };
 
 const NavigationLayout = () => {
+  const { styles } = useStyles(stylesheet);
   return (
     <Stack>
-      <Stack.Screen name="index" options={{ title: 'KittyGram' }} />
+      <Stack.Screen
+        name="index"
+        options={{ headerStyle: styles.header, title: 'KittyGram' }}
+      />
     </Stack>
   );
 };
 
+const stylesheet = createStyleSheet((theme) => ({
+  header: { backgroundColor: theme.colors.background.$3 },
+}));
+
 const ProviderLayout = () => {
   return (
     <GestureHandlerRootView>
       <Provider store={store}>
         <NavigationLayout />
         <Toast config={toastConfig} />
-        {/*<Toast />*/}
       </Provider>
     </GestureHandlerRootView>
   );
diff --git a/apps/mobile/src/app/index.tsx b/apps/mobile/src/app/index.tsx
index 82dcc0f..dd25e34 100644
--- a/apps/mobile/src/app/index.tsx
+++ b/apps/mobile/src/app/index.tsx
@@ -56,7 +56,8 @@ const Home = () => {
 const stylesheet = createStyleSheet((theme, runtime) => ({
   container: {
     flex: 1,
-    padding: 16,
+    padding: theme.space.$2,
+    backgroundColor: theme.colors.background.$5,
   },
   overlay: {
     position: 'absolute',
diff --git a/apps/mobile/src/components/BottomSheet.tsx b/apps/mobile/src/components/BottomSheet.tsx
index 0ab806c..6c56102 100644
--- a/apps/mobile/src/components/BottomSheet.tsx
+++ b/apps/mobile/src/components/BottomSheet.tsx
@@ -21,6 +21,8 @@ export const BottomSheet = ({
 
   return (
     <RNBottomSheet
+      backgroundStyle={styles.root}
+      // containerStyle={styles.root}
       enablePanDownToClose={true}
       index={open ? 0 : -1}
       snapPoints={[200]}
@@ -35,7 +37,7 @@ export const BottomSheet = ({
 
 const stylesheet = createStyleSheet((theme, runtime) => ({
   root: {
-    flex: 1,
+    backgroundColor: theme.colors.background.$3,
   },
   content: {
     flex: 1,
diff --git a/apps/mobile/src/components/CustomToast.tsx b/apps/mobile/src/components/CustomToast.tsx
index 8f2a6cb..658506e 100644
--- a/apps/mobile/src/components/CustomToast.tsx
+++ b/apps/mobile/src/components/CustomToast.tsx
@@ -1,15 +1,18 @@
 import { ComponentProps } from 'react';
 import { BaseToast } from 'react-native-toast-message';
+import { useStyles } from 'react-native-unistyles';
 
 export const CustomToast = (props: ComponentProps<typeof BaseToast>) => {
+  const { theme } = useStyles();
+
   return (
     <BaseToast
       {...props}
       style={{ borderLeftColor: 'transparent' }}
       contentContainerStyle={{ paddingHorizontal: 15 }}
       text1Style={{
-        fontSize: 15,
-        fontWeight: '400',
+        fontSize: theme.fontSizes.$2,
+        fontWeight: theme.fontWeights.bold,
       }}
     />
   );
diff --git a/apps/mobile/src/components/ImageSource.tsx b/apps/mobile/src/components/ImageSource.tsx
index 2504aa7..15ab30e 100644
--- a/apps/mobile/src/components/ImageSource.tsx
+++ b/apps/mobile/src/components/ImageSource.tsx
@@ -1,8 +1,10 @@
 import { FontAwesome5 } from '@expo/vector-icons';
 import { ComponentProps } from 'react';
-import { Pressable, StyleProp, Text, ViewStyle } from 'react-native';
+import { Pressable, StyleProp, ViewStyle } from 'react-native';
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
 
+import { Text } from './Text';
+
 export type ImageSourceProps = ComponentProps<typeof Pressable> & {
   icon: string;
   label?: string;
@@ -28,9 +30,10 @@ const stylesheet = createStyleSheet((theme) => ({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: theme.colors.background.$5,
     borderStyle: 'dashed',
-    borderWidth: 1,
-    borderRadius: 10,
-    rowGap: 8,
+    borderWidth: theme.borderWidths.$1,
+    borderRadius: theme.radii.$2,
+    rowGap: theme.space.$2,
   },
 }));
diff --git a/apps/mobile/src/components/Text.tsx b/apps/mobile/src/components/Text.tsx
new file mode 100644
index 0000000..383002f
--- /dev/null
+++ b/apps/mobile/src/components/Text.tsx
@@ -0,0 +1,16 @@
+import { ComponentProps } from 'react';
+import { Text as RNText } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+export type TextProps = ComponentProps<typeof RNText>;
+
+export const Text = ({ style, ...props }: TextProps) => {
+  const { styles } = useStyles(stylesheet);
+  return <RNText style={[styles.root, style]} {...props} />;
+};
+
+const stylesheet = createStyleSheet((theme) => ({
+  root: {
+    color: theme.colors.typography.$5,
+  },
+}));
diff --git a/apps/mobile/src/features/CatCard/CardActions.tsx b/apps/mobile/src/features/CatCard/CardActions.tsx
index fbddd52..2b79a1a 100644
--- a/apps/mobile/src/features/CatCard/CardActions.tsx
+++ b/apps/mobile/src/features/CatCard/CardActions.tsx
@@ -65,17 +65,17 @@ export const CardActions = ({ item }: CardProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {},
   inner: {
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+    backgroundColor: theme.colors.background.translucent,
     flexDirection: 'row',
     justifyContent: 'space-around',
-    borderBottomLeftRadius: 15,
-    borderBottomRightRadius: 15,
+    borderBottomLeftRadius: theme.radii.$3,
+    borderBottomRightRadius: theme.radii.$3,
   },
   voteCount: {
     alignSelf: 'center',
-    fontSize: 20,
+    fontSize: theme.fontSizes.$3,
   },
-});
+}));
diff --git a/apps/mobile/src/features/CatCard/CatCard.tsx b/apps/mobile/src/features/CatCard/CatCard.tsx
index 19a4b92..310abba 100644
--- a/apps/mobile/src/features/CatCard/CatCard.tsx
+++ b/apps/mobile/src/features/CatCard/CatCard.tsx
@@ -18,15 +18,15 @@ export const CatCard = ({ item }: CardProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {
-    width: '100%',
+    width: theme.space.full,
   },
   image: {
-    borderTopLeftRadius: 15,
-    borderTopRightRadius: 15,
-    width: '100%',
+    borderTopLeftRadius: theme.radii.$3,
+    borderTopRightRadius: theme.radii.$3,
+    width: theme.space.full,
     height: 200,
-    backgroundColor: 'white',
+    backgroundColor: theme.colors.background.$5,
   },
-});
+}));
diff --git a/apps/mobile/src/features/CatCard/ImageOverlay.tsx b/apps/mobile/src/features/CatCard/ImageOverlay.tsx
index b839334..6028661 100644
--- a/apps/mobile/src/features/CatCard/ImageOverlay.tsx
+++ b/apps/mobile/src/features/CatCard/ImageOverlay.tsx
@@ -54,18 +54,18 @@ export const ImageOverlay = ({ item }: CardProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {
     position: 'absolute',
     right: 0,
   },
   favorite: {
+    flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    borderRadius: 100,
-    margin: 8,
-    padding: 16,
-    flex: 1,
+    backgroundColor: theme.colors.background.translucent,
+    borderRadius: theme.radii.circle,
+    margin: theme.space.$1,
+    padding: theme.space.$2,
   },
-});
+}));
diff --git a/apps/mobile/src/features/CatCard/VoteButton.tsx b/apps/mobile/src/features/CatCard/VoteButton.tsx
index 7bd696d..d9597a5 100644
--- a/apps/mobile/src/features/CatCard/VoteButton.tsx
+++ b/apps/mobile/src/features/CatCard/VoteButton.tsx
@@ -18,10 +18,10 @@ export const VoteButton = ({ style, iconProps, ...props }: VoteButtonProps) => {
   );
 };
 
-const stylesheet = createStyleSheet({
+const stylesheet = createStyleSheet((theme) => ({
   root: {
-    marginVertical: 8,
+    marginVertical: theme.space.$2,
     flexDirection: 'row',
-    columnGap: 8,
+    columnGap: theme.space.$2,
   },
-});
+}));
diff --git a/apps/mobile/src/features/HomePage/ImageList.tsx b/apps/mobile/src/features/HomePage/ImageList.tsx
index fcd889e..7ad1358 100644
--- a/apps/mobile/src/features/HomePage/ImageList.tsx
+++ b/apps/mobile/src/features/HomePage/ImageList.tsx
@@ -24,10 +24,10 @@ export const ImageList = () => {
 
 const stylesheet = createStyleSheet((theme) => ({
   root: {
-    width: '100%',
-    height: '100%',
+    width: theme.space.full,
+    height: theme.space.full,
   },
   list: {
-    rowGap: 16,
+    rowGap: theme.space.$2,
   },
 }));
diff --git a/apps/mobile/src/features/HomePage/NoImagesFound.tsx b/apps/mobile/src/features/HomePage/NoImagesFound.tsx
index 5d41699..b547494 100644
--- a/apps/mobile/src/features/HomePage/NoImagesFound.tsx
+++ b/apps/mobile/src/features/HomePage/NoImagesFound.tsx
@@ -22,12 +22,12 @@ const stylesheet = createStyleSheet((theme) => ({
     alignItems: 'center',
   },
   message: {
-    borderRadius: 15,
-    padding: 16,
-    backgroundColor: 'lightgrey',
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    columnGap: 16,
-    flexDirection: 'row',
+    padding: theme.space.$2,
+    borderRadius: theme.radii.$3,
+    backgroundColor: theme.colors.background.$6,
+    columnGap: theme.space.$2,
   },
 }));
diff --git a/apps/mobile/src/features/UploadImageModal/UploadImageSheet.tsx b/apps/mobile/src/features/UploadImageModal/UploadImageSheet.tsx
index da6f8da..09748bc 100644
--- a/apps/mobile/src/features/UploadImageModal/UploadImageSheet.tsx
+++ b/apps/mobile/src/features/UploadImageModal/UploadImageSheet.tsx
@@ -10,8 +10,8 @@ export type UploadImageSheetProps = ComponentProps<typeof BottomSheet>;
 export const UploadImageSheet = ({ open, onClose }: UploadImageSheetProps) => {
   const { styles } = useStyles(stylesheet);
   return (
-    <BottomSheet open={open} onClose={onClose}>
-      <View style={styles.root}>
+    <BottomSheet style={styles.root} open={open} onClose={onClose}>
+      <View style={styles.inner}>
         <ImageSourceButton source="camera" />
         <ImageSourceButton source="library" />
       </View>
@@ -21,9 +21,12 @@ export const UploadImageSheet = ({ open, onClose }: UploadImageSheetProps) => {
 
 const stylesheet = createStyleSheet((theme) => ({
   root: {
+    // backgroundColor: theme.colors.background.$3
+  },
+  inner: {
     flex: 1,
     flexDirection: 'row',
-    padding: 16,
-    columnGap: 16,
+    padding: theme.space.$2,
+    columnGap: theme.space.$2,
   },
 }));
diff --git a/apps/mobile/src/theme/themes.ts b/apps/mobile/src/theme/themes.ts
index d24c105..4e4abc4 100644
--- a/apps/mobile/src/theme/themes.ts
+++ b/apps/mobile/src/theme/themes.ts
@@ -1,25 +1,159 @@
+const sharedColors = {
+  primary: {
+    $1: '#e8d3f9',
+    $2: '#d0a8f1',
+    $3: '#b67de9',
+    $4: '#9950e0',
+    $5: '#7819d7',
+    $6: '#601aa8',
+    $7: '#49197b',
+    $8: '#331551',
+    $9: '#1e102b',
+  },
+  secondary: {
+    $1: '#faf7d7',
+    $2: '#f3efae',
+    $3: '#ebe785',
+    $4: '#e2df59',
+    $5: '#d7d719',
+    $6: '#a8a81d',
+    $7: '#7c7b1d',
+    $8: '#525119',
+    $9: '#2b2a12',
+  },
+  accent: {
+    $1: '#def8d6',
+    $2: '#bbf1ad',
+    $3: '#95e983',
+    $4: '#68e057',
+    $5: '#19d719',
+    $6: '#23a81c',
+    $7: '#237b1c',
+    $8: '#1f5118',
+    $9: '#162b11',
+  },
+} as const;
+
+const shared = {
+  space: {
+    $1: 8,
+    $2: 16,
+    $3: 24,
+    $4: 28,
+    $5: 36,
+    $6: 48,
+    $7: 64,
+    $8: 72,
+    $9: 128,
+
+    none: 0,
+    auto: 'auto',
+    full: '100%',
+  },
+
+  fontSizes: {
+    $1: 14,
+    $2: 16,
+    $3: 20,
+    $4: 24,
+    $5: 28,
+    $6: 36,
+    $7: 48,
+    $8: 64,
+    $9: 72,
+  },
+
+  fontWeights: {
+    bold: '500',
+  },
+
+  radii: {
+    $1: 5,
+    $2: 10,
+    $3: 15,
+    $4: 20,
+    $5: 25,
+    $6: 50,
+    $7: 75,
+
+    none: 0,
+    circle: 100,
+  },
+
+  borderWidths: {
+    $1: 1,
+    $2: 2,
+    $3: 3,
+    $4: 4,
+    $5: 5,
+    $6: 6,
+    $7: 7,
+    $8: 8,
+
+    none: 0,
+  },
+} as const;
+
 export const lightTheme = {
+  ...shared,
   colors: {
-    typography: '#000000',
-    background: '#ffffff',
-  },
-  margins: {
-    sm: 2,
-    md: 4,
-    lg: 8,
-    xl: 12,
+    ...sharedColors,
+    typography: {
+      $1: '#d6d6d6',
+      $2: '#aeaeae',
+      $3: '#888888',
+      $4: '#646464',
+      $5: '#424242',
+      $6: '#353535',
+      $7: '#292929',
+      $8: '#1e1e1e',
+      $9: '#121212',
+    },
+    background: {
+      $1: '#ffffff',
+      $2: '#ffffff',
+      $3: '#ffffff',
+      $4: '#ffffff',
+      $5: '#ffffff',
+      $6: '#c6c6c6',
+      $7: '#919191',
+      $8: '#5e5e5e',
+      $9: '#303030',
+
+      transparent: 'transparent',
+      translucent: 'rgba(255, 255, 255, 0.8)',
+    },
   },
 } as const;
 
 export const darkTheme = {
+  ...shared,
   colors: {
-    typography: '#ffffff',
-    background: '#000000',
-  },
-  margins: {
-    sm: 2,
-    md: 4,
-    lg: 8,
-    xl: 12,
+    ...sharedColors,
+    typography: {
+      $1: '#ffffff',
+      $2: '#ffffff',
+      $3: '#ffffff',
+      $4: '#ffffff',
+      $5: '#ffffff',
+      $6: '#c6c6c6',
+      $7: '#919191',
+      $8: '#5e5e5e',
+      $9: '#303030',
+    },
+    background: {
+      $1: '#d6d6d6',
+      $2: '#aeaeae',
+      $3: '#888888',
+      $4: '#646464',
+      $5: '#424242',
+      $6: '#353535',
+      $7: '#292929',
+      $8: '#1e1e1e',
+      $9: '#121212',
+
+      transparent: 'transparent',
+      translucent: 'rgba(0, 0, 0, 0.8)',
+    },
   },
 } as const;
diff --git a/bun.lockb b/bun.lockb
index 8c6a42c..a2a4647 100755
Binary files a/bun.lockb and b/bun.lockb differ