diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index d6ddf4d..d362c46 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,46 +1,55 @@
+import { Icon } from "@/shared/ui/icon";
+import { DefaultNavigationOptions } from "@/shared/ui/navigation";
 import { Tabs } from "expo-router";
+import { useMemo } from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
 
-export default function TabsLayout() {
-  return (
-    <Tabs
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
-      <Tabs.Screen
-        name="home"
-        options={{
-          title: "홈",
-        }}
-      />
-
-      <Tabs.Screen
-        name="archive"
-        options={{
-          title: "아카이브",
-        }}
-      />
-
-      <Tabs.Screen
-        name="upload"
-        options={{
-          title: "업로드",
-        }}
-      />
+export default function TabLayout() {
+  const screenOptions = useMemo(() => {
+    return {
+      ...DefaultNavigationOptions,
+    };
+  }, []);
 
-      <Tabs.Screen
-        name="awards"
-        options={{
-          title: "우수작",
-        }}
-      />
-
-      <Tabs.Screen
-        name="profile"
-        options={{
-          title: "마이",
-        }}
-      />
-    </Tabs>
+  return (
+    <SafeAreaView edges={["top"]} style={{ flex: 1 }}>
+      <Tabs screenOptions={screenOptions}>
+        <Tabs.Screen
+          name="home"
+          options={{
+            title: "홈",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "home_active" : "home"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="archive"
+          options={{
+            title: "아카이빙",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "archiving_active" : "archiving"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="upload"
+          options={{
+            title: "업로드",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "uploading_active" : "uploading"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="awards"
+          options={{
+            title: "우수작",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "ranking_active" : "ranking"} />,
+          }}
+        />
+        <Tabs.Screen
+          name="profile"
+          options={{
+            title: "마이",
+            tabBarIcon: ({ focused }) => <Icon name={focused ? "my_active" : "my"} />,
+          }}
+        />
+      </Tabs>
+    </SafeAreaView>
   );
 }
diff --git a/app/index.tsx b/app/index.tsx
index 0e74ba1..86ad714 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -6,25 +6,26 @@ import { View, ActivityIndicator } from "react-native";
 
 export default function App() {
   const router = useRouter();
-  const { userInfo } = useAuth();
+  // const { userInfo } = useAuth();
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      if (userInfo) {
-        // 로그인된 사용자면, 홈 네비게이션으로 이동
-        router.replace("/(tabs)/home");
-      } else {
-        // 로그인되지 않았으면 로그인 페이지로 이동
-        router.replace("/login");
-      }
+      router.replace("/(tabs)/home");
+      // if (userInfo) {
+      //   // 로그인된 사용자면, 홈 네비게이션으로 이동
+      //   router.replace("/(tabs)/home");
+      // } else {
+      //   // 로그인되지 않았으면 로그인 페이지로 이동
+      //   router.replace("/login");
+      // }
     }, 100);
 
     return () => clearTimeout(timer);
-  }, [userInfo, router]);
+  }, [router]);
 
   // 로딩 화면 표시. TODO: 추후에 디자인 된 로딩스피너로 수정
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
       <ActivityIndicator size="large" color="#195B35" />
     </View>
   );
diff --git a/metro.config.js b/metro.config.js
index 007f5a0..7f2d06d 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -1,8 +1,19 @@
 const { getDefaultConfig } = require("expo/metro-config");
 
-/** @type {import('expo/metro-config').MetroConfig} */
-const config = getDefaultConfig(__dirname);
-config.resolver.sourceExts.push("css");
-config.resolver.assetExts.push("png", "jpg", "jpeg", "gif", "svg");
+module.exports = (() => {
+  const config = getDefaultConfig(__dirname);
 
-module.exports = config;
+  const { transformer, resolver } = config;
+
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve("react-native-svg-transformer/expo"),
+  };
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter(ext => ext !== "svg"),
+    sourceExts: [...resolver.sourceExts, "svg"],
+  };
+
+  return config;
+})();
diff --git a/package-lock.json b/package-lock.json
index 4b75ba9..cea580c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,37 +9,38 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/config-plugins": "~9.0.0",
-        "@react-native-community/netinfo": "^11.4.1",
-        "@tanstack/react-query": "^5.76.1",
-        "axios": "^1.10.0",
+        "@react-native-community/netinfo": "11.4.1",
+        "@tanstack/react-query": "5.76.1",
+        "axios": "1.10.0",
         "expo": "~52.0.47",
         "expo-constants": "~17.0.8",
         "expo-linking": "~7.0.5",
         "expo-router": "4.0.21",
         "expo-status-bar": "~2.0.1",
-        "nativewind": "^2.0.11",
+        "nativewind": "2.0.11",
         "react": "18.3.1",
         "react-native": "0.76.9",
         "react-native-safe-area-context": "4.12.0",
         "react-native-screens": "~4.4.0",
-        "react-native-svg": "15.8.0",
+        "react-native-svg": "^15.8.0",
         "react-native-webview": "13.12.5",
-        "tailwindcss": "^3.3.0",
-        "zod": "^3.25.7"
+        "tailwindcss": "3.3.0",
+        "zod": "3.25.7"
       },
       "devDependencies": {
-        "@babel/core": "^7.25.2",
-        "@commitlint/cli": "^19.8.1",
-        "@commitlint/config-conventional": "^19.8.1",
+        "@babel/core": "7.25.2",
+        "@commitlint/cli": "19.8.1",
+        "@commitlint/config-conventional": "19.8.1",
         "@types/react": "~18.3.12",
-        "babel-plugin-module-resolver": "^5.0.2",
-        "eslint": "^8.57.0",
+        "babel-plugin-module-resolver": "5.0.2",
+        "eslint": "8.57.0",
         "eslint-config-expo": "~8.0.1",
-        "eslint-config-prettier": "^10.1.1",
-        "eslint-plugin-prettier": "^5.2.5",
-        "husky": "^9.1.7",
-        "prettier": "^3.6.2",
-        "typescript": "^5.3.3"
+        "eslint-config-prettier": "10.1.1",
+        "eslint-plugin-prettier": "5.2.5",
+        "husky": "9.1.7",
+        "prettier": "3.6.2",
+        "react-native-svg-transformer": "^1.5.1",
+        "typescript": "5.3.3"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -90,19 +91,21 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.26.10",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
+      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.26.2",
-        "@babel/generator": "^7.26.10",
-        "@babel/helper-compilation-targets": "^7.26.5",
-        "@babel/helper-module-transforms": "^7.26.0",
-        "@babel/helpers": "^7.26.10",
-        "@babel/parser": "^7.26.10",
-        "@babel/template": "^7.26.9",
-        "@babel/traverse": "^7.26.10",
-        "@babel/types": "^7.26.10",
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-module-transforms": "^7.25.2",
+        "@babel/helpers": "^7.25.0",
+        "@babel/parser": "^7.25.0",
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.2",
+        "@babel/types": "^7.25.2",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -2535,7 +2538,9 @@
       "license": "MIT"
     },
     "node_modules/@eslint/js": {
-      "version": "8.57.1",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3051,11 +3056,14 @@
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.13.0",
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+      "deprecated": "Use @eslint/config-array instead",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.3",
+        "@humanwhocodes/object-schema": "^2.0.2",
         "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
@@ -3077,6 +3085,9 @@
     },
     "node_modules/@humanwhocodes/object-schema": {
       "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+      "deprecated": "Use @eslint/object-schema instead",
       "dev": true,
       "license": "BSD-3-Clause"
     },
@@ -3850,6 +3861,320 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
+      "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cosmiconfig": "^8.1.3",
+        "deepmerge": "^4.3.1",
+        "svgo": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.76.0",
       "license": "MIT",
@@ -3872,6 +4197,16 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "license": "MIT",
@@ -5685,6 +6020,42 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "devOptional": true,
@@ -6069,6 +6440,17 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "dev": true,
@@ -6360,15 +6742,18 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.1",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.1",
-        "@humanwhocodes/config-array": "^0.13.0",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -9072,6 +9457,16 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "license": "ISC"
@@ -9813,6 +10208,17 @@
       "version": "1.0.5",
       "license": "MIT"
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-dir": {
       "version": "0.1.17",
       "license": "MIT",
@@ -10317,6 +10723,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "license": "MIT",
@@ -10665,6 +11078,15 @@
         }
       }
     },
+    "node_modules/postcss-load-config/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss-nested": {
       "version": "6.0.0",
       "license": "MIT",
@@ -11109,6 +11531,8 @@
     },
     "node_modules/react-native-svg": {
       "version": "15.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-15.8.0.tgz",
+      "integrity": "sha512-KHJzKpgOjwj1qeZzsBjxNdoIgv2zNCO9fVcoq2TEhTRsVV5DGTZ9JzUZwybd7q4giT/H3RdtqC3u44dWdO0Ffw==",
       "license": "MIT",
       "dependencies": {
         "css-select": "^5.1.0",
@@ -11120,6 +11544,23 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg-transformer": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg-transformer/-/react-native-svg-transformer-1.5.1.tgz",
+      "integrity": "sha512-dFvBNR8A9VPum9KCfh+LE49YiJEF8zUSnEFciKQroR/bEOhlPoZA0SuQ0qNk7m2iZl2w59FYjdRe0pMHWMDl0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0",
+        "@svgr/plugin-svgo": "^8.1.0",
+        "path-dirname": "^1.0.2"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.59.0",
+        "react-native-svg": ">=12.0.0"
+      }
+    },
     "node_modules/react-native-webview": {
       "version": "13.12.5",
       "license": "MIT",
@@ -11914,6 +12355,17 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "license": "BSD-3-Clause",
@@ -12265,6 +12717,70 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/svgo/node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/svgo/node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/synckit": {
       "version": "0.10.3",
       "dev": true,
@@ -12546,11 +13062,13 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.12",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2"
       },
       "engines": {
@@ -12561,7 +13079,9 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.3",
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -12575,6 +13095,8 @@
     },
     "node_modules/tinyglobby/node_modules/picomatch": {
       "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -12757,7 +13279,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.8.2",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -13289,13 +13813,6 @@
       "version": "4.0.0",
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "1.10.2",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "license": "MIT",
diff --git a/package.json b/package.json
index d1b106d..9b821b8 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "react-native": "0.76.9",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
-    "react-native-svg": "15.8.0",
+    "react-native-svg": "^15.8.0",
     "react-native-webview": "13.12.5",
     "tailwindcss": "3.3.0",
     "zod": "3.25.7"
@@ -45,6 +45,7 @@
     "eslint-plugin-prettier": "5.2.5",
     "husky": "9.1.7",
     "prettier": "3.6.2",
+    "react-native-svg-transformer": "^1.5.1",
     "typescript": "5.3.3"
   },
   "private": true
diff --git a/shared/assets/icons/archiving.svg b/shared/assets/icons/archiving.svg
new file mode 100644
index 0000000..c997970
--- /dev/null
+++ b/shared/assets/icons/archiving.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79883 11.6663H11.2207C11.5894 11.6663 11.9113 11.8336 12.125 12.1047V12.1057C12.8924 13.0935 14.1004 13.7875 15.4062 13.7961H24.2012C24.2579 13.7961 24.2891 13.7963 24.3154 13.7981C24.3238 13.7987 24.3295 13.7996 24.333 13.8L24.3701 13.8098L24.4082 13.8167C24.536 13.8373 24.6537 13.8825 24.7705 13.9543L24.7881 13.9641C25.1207 14.1549 25.3496 14.5218 25.3496 14.9456V24.2083C25.3495 24.8352 24.8385 25.3498 24.2012 25.3499H7.79883C7.16154 25.3498 6.65047 24.8352 6.65039 24.2083V12.8147C6.65043 12.3946 6.87558 12.0301 7.20508 11.8411L7.21875 11.8333L7.23242 11.8245C7.33099 11.7614 7.45687 11.7106 7.60547 11.6819L7.61816 11.6799C7.65423 11.6723 7.71613 11.6663 7.79883 11.6663Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.3"/>
+<path d="M10.0426 6.65039H21.9576C22.7259 6.65039 23.3463 7.27489 23.3463 8.03906V11.3477C23.3462 11.4297 23.2805 11.4941 23.1988 11.4941H15.4176C14.9849 11.494 14.4828 11.2723 14.0914 10.8721L13.9313 10.6904C13.2789 9.8502 12.2867 9.36426 11.2203 9.36426H8.80041C8.71839 9.3641 8.65392 9.29841 8.65392 9.2168V8.03906C8.65392 7.27635 9.27988 6.65039 10.0426 6.65039Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/archiving_active.svg b/shared/assets/icons/archiving_active.svg
new file mode 100644
index 0000000..3acb55b
--- /dev/null
+++ b/shared/assets/icons/archiving_active.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="8" fill="#195B35"/>
+<path d="M7.79883 11.6663H11.2207C11.5894 11.6663 11.9113 11.8336 12.125 12.1047V12.1057C12.8924 13.0935 14.1004 13.7875 15.4062 13.7961H24.2012C24.2579 13.7961 24.2891 13.7963 24.3154 13.7981C24.3238 13.7987 24.3295 13.7996 24.333 13.8L24.3701 13.8098L24.4082 13.8167C24.536 13.8373 24.6537 13.8825 24.7705 13.9543L24.7881 13.9641C25.1207 14.1549 25.3496 14.5218 25.3496 14.9456V24.2083C25.3495 24.8352 24.8385 25.3498 24.2012 25.3499H7.79883C7.16154 25.3498 6.65047 24.8352 6.65039 24.2083V12.8147C6.65043 12.3946 6.87558 12.0301 7.20508 11.8411L7.21875 11.8333L7.23242 11.8245C7.33099 11.7614 7.45687 11.7106 7.60547 11.6819L7.61816 11.6799C7.65423 11.6723 7.71613 11.6663 7.79883 11.6663Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.3"/>
+<path d="M10.0426 6.65039H21.9576C22.7259 6.65039 23.3463 7.27489 23.3463 8.03906V11.3477C23.3462 11.4297 23.2805 11.4941 23.1988 11.4941H15.4176C14.9849 11.494 14.4828 11.2723 14.0914 10.8721L13.9313 10.6904C13.2789 9.8502 12.2867 9.36426 11.2203 9.36426H8.80041C8.71839 9.3641 8.65392 9.29841 8.65392 9.2168V8.03906C8.65392 7.27635 9.27988 6.65039 10.0426 6.65039Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/home.svg b/shared/assets/icons/home.svg
new file mode 100644
index 0000000..43d26f8
--- /dev/null
+++ b/shared/assets/icons/home.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0449 6.99316C15.6016 6.53594 16.3904 6.53548 16.9473 6.99219V6.99316L24.7656 13.4365V13.4375C25.1308 13.742 25.3496 14.206 25.3496 14.6992V23.7441C25.3496 24.6488 24.6414 25.3496 23.8135 25.3496H8.18652C7.35864 25.3496 6.65039 24.6488 6.65039 23.7441V14.6992C6.65041 14.206 6.86924 13.742 7.23438 13.4375L7.2334 13.4365L15.0449 6.99316Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/home_active.svg b/shared/assets/icons/home_active.svg
new file mode 100644
index 0000000..e371337
--- /dev/null
+++ b/shared/assets/icons/home_active.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="8" fill="#195B35"/>
+<path d="M15.0449 6.99316C15.6016 6.53594 16.3904 6.53548 16.9473 6.99219V6.99316L24.7656 13.4365V13.4375C25.1308 13.742 25.3496 14.206 25.3496 14.6992V23.7441C25.3496 24.6488 24.6414 25.3496 23.8135 25.3496H8.18652C7.35864 25.3496 6.65039 24.6488 6.65039 23.7441V14.6992C6.65041 14.206 6.86924 13.742 7.23438 13.4375L7.2334 13.4365L15.0449 6.99316Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/index.ts b/shared/assets/icons/index.ts
index c900ca9..ffca581 100644
--- a/shared/assets/icons/index.ts
+++ b/shared/assets/icons/index.ts
@@ -1 +1,11 @@
 export { default as search } from "./search.svg";
+export { default as home } from "./home.svg";
+export { default as archiving } from "./archiving.svg";
+export { default as uploading } from "./uploading.svg";
+export { default as ranking } from "./ranking.svg";
+export { default as my } from "./my.svg";
+export { default as home_active } from "./home_active.svg";
+export { default as archiving_active } from "./archiving_active.svg";
+export { default as uploading_active } from "./uploading_active.svg";
+export { default as ranking_active } from "./ranking_active.svg";
+export { default as my_active } from "./my_active.svg";
diff --git a/shared/assets/icons/my.svg b/shared/assets/icons/my.svg
new file mode 100644
index 0000000..7e3e936
--- /dev/null
+++ b/shared/assets/icons/my.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9966 6.65039C18.3999 6.65049 20.3482 8.5986 20.3482 11.002C20.3481 13.4052 18.3999 15.3534 15.9966 15.3535C13.5933 15.3535 11.6452 13.4053 11.6451 11.002C11.6451 8.59854 13.5932 6.65039 15.9966 6.65039Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.3"/>
+<path d="M16 18.0858H16.376C20.8087 18.2272 24.3848 20.8554 25.3223 24.2098L25.3232 24.2118C25.3932 24.4594 25.3262 24.7202 25.1143 24.9452C24.898 25.1745 24.5375 25.3504 24.0928 25.3504H7.90723C7.46106 25.3504 7.10121 25.1758 6.88574 24.9481C6.70126 24.753 6.62547 24.5284 6.65723 24.3055L6.67773 24.2108C7.64851 20.768 11.3954 18.0858 16 18.0858Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/my_active.svg b/shared/assets/icons/my_active.svg
new file mode 100644
index 0000000..e23887b
--- /dev/null
+++ b/shared/assets/icons/my_active.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="8" fill="#195B35"/>
+<path d="M15.9966 6.65039C18.3999 6.65049 20.3482 8.5986 20.3482 11.002C20.3481 13.4052 18.3999 15.3534 15.9966 15.3535C13.5933 15.3535 11.6452 13.4053 11.6451 11.002C11.6451 8.59854 13.5932 6.65039 15.9966 6.65039Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.3"/>
+<path d="M16 18.0858H16.376C20.8087 18.2272 24.3848 20.8554 25.3223 24.2098L25.3232 24.2118C25.3932 24.4594 25.3262 24.7202 25.1143 24.9452C24.898 25.1745 24.5375 25.3504 24.0928 25.3505H7.90723C7.46106 25.3504 7.10121 25.1758 6.88574 24.9481C6.70126 24.753 6.62547 24.5284 6.65723 24.3055L6.67773 24.2108C7.64851 20.768 11.3954 18.0858 16 18.0858Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/ranking.svg b/shared/assets/icons/ranking.svg
new file mode 100644
index 0000000..e824183
--- /dev/null
+++ b/shared/assets/icons/ranking.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.87598 6.65039H24.124C24.8015 6.65039 25.3496 7.19869 25.3496 7.87695V9.09668C25.3496 9.47167 25.1781 9.82739 24.8906 10.0557L24.8887 10.0566L21.835 12.498L21.3281 12.9033L21.7334 13.4111C22.7391 14.6704 23.3477 16.2642 23.3477 18C23.3477 22.0575 20.0555 25.3496 16 25.3496C11.9445 25.3496 8.65234 22.0575 8.65234 18C8.65234 16.2642 9.26092 14.6704 10.2666 13.4111L10.6719 12.9033L10.165 12.498L7.11133 10.0566C6.81812 9.81772 6.65039 9.46664 6.65039 9.09668V7.87695C6.65039 7.19869 7.19851 6.65039 7.87598 6.65039Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.3"/>
+<path d="M15.9999 12.9996C17.569 12.9996 18.9731 13.7336 19.8934 14.8795L20.0077 15.0221C20.6266 15.86 20.992 16.8822 20.9921 17.9928C20.9921 20.7451 18.7507 22.9869 15.9999 22.9869C13.2491 22.9868 11.0087 20.7451 11.0087 17.9928C11.0087 16.8208 11.4192 15.7356 12.1063 14.8795L12.1073 14.8775C13.0192 13.7342 14.4295 12.9997 15.9999 12.9996Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/ranking_active.svg b/shared/assets/icons/ranking_active.svg
new file mode 100644
index 0000000..2fd1cb6
--- /dev/null
+++ b/shared/assets/icons/ranking_active.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="8" fill="#195B35"/>
+<path d="M7.87598 6.65039H24.124C24.8015 6.65039 25.3496 7.19869 25.3496 7.87695V9.09668C25.3496 9.47167 25.1781 9.82739 24.8906 10.0557L24.8887 10.0566L21.835 12.498L21.3281 12.9033L21.7334 13.4111C22.7391 14.6704 23.3477 16.2642 23.3477 18C23.3477 22.0575 20.0555 25.3496 16 25.3496C11.9445 25.3496 8.65234 22.0575 8.65234 18C8.65234 16.2642 9.26092 14.6704 10.2666 13.4111L10.6719 12.9033L10.165 12.498L7.11133 10.0566C6.81812 9.81772 6.65039 9.46664 6.65039 9.09668V7.87695C6.65039 7.19869 7.19851 6.65039 7.87598 6.65039Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.3"/>
+<path d="M15.9999 12.9996C17.569 12.9996 18.9731 13.7336 19.8934 14.8795L20.0077 15.0221C20.6266 15.86 20.992 16.8822 20.9921 17.9928C20.9921 20.7451 18.7507 22.9869 15.9999 22.9869C13.2491 22.9868 11.0087 20.7451 11.0087 17.9928C11.0087 16.8208 11.4192 15.7356 12.1063 14.8795L12.1073 14.8775C13.0192 13.7342 14.4295 12.9997 15.9999 12.9996Z" fill="#195B35" stroke="#195B35" stroke-width="1.3"/>
+</svg>
diff --git a/shared/assets/icons/uploading.svg b/shared/assets/icons/uploading.svg
new file mode 100644
index 0000000..84140c8
--- /dev/null
+++ b/shared/assets/icons/uploading.svg
@@ -0,0 +1,8 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0424 7.06076C13.1127 7.03761 13.1992 7.06915 13.2387 7.13596L13.2397 7.13693L16.0893 11.9348C16.1552 12.0494 16.0699 12.1926 15.9418 12.1926H7.68106C7.54853 12.1926 7.47938 12.0583 7.52481 11.9621L7.52579 11.9612C8.6064 9.66043 10.603 7.87028 13.0414 7.06174L13.0424 7.06076Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.2"/>
+<path d="M16.0616 19.7995H24.3233C24.4556 19.7997 24.5238 19.9339 24.4786 20.03L24.4776 20.032C23.397 22.3395 21.4013 24.1297 18.963 24.9382L18.962 24.9392C18.8916 24.9625 18.8052 24.9309 18.7657 24.864L18.7648 24.863L15.9161 20.0593C15.8488 19.9446 15.9332 19.7998 16.0616 19.7995Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.2"/>
+<path d="M15.4577 6.61816C17.9957 6.45914 20.5223 7.35401 22.405 9.10449L22.4206 9.11914C22.4649 9.17432 22.4754 9.25589 22.4382 9.31934L19.5945 14.1318V14.1328C19.5298 14.2424 19.3697 14.2464 19.3025 14.125L15.3327 6.86719L15.3318 6.86621L15.3161 6.82617C15.3054 6.78495 15.3112 6.74132 15.3327 6.70117C15.3537 6.66237 15.3833 6.6367 15.4197 6.625L15.4577 6.61816Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.2"/>
+<path d="M12.4102 17.867C12.4668 17.7715 12.5955 17.7562 12.6719 17.8348L12.7012 17.8748L16.6719 25.1326V25.1346C16.7004 25.1866 16.7004 25.2454 16.6719 25.2986C16.6441 25.3506 16.5998 25.3782 16.5459 25.3817C14.0082 25.5405 11.4822 24.6456 9.59962 22.8953L9.57912 22.8768C9.53803 22.8215 9.53 22.7422 9.56642 22.6805L12.4092 17.868L12.4102 17.867Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.2"/>
+<path d="M23.5456 10.824C23.6039 10.7274 23.7258 10.7196 23.7966 10.781L23.824 10.8113C25.1527 12.8081 25.6715 15.258 25.2585 17.6346L25.1618 18.076C25.1467 18.1449 25.08 18.2039 24.9929 18.2039L19.4177 18.1629H19.4128C19.2924 18.1627 19.2082 18.0221 19.2761 17.9109L19.2781 17.908L23.5456 10.824Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.2"/>
+<path d="M12.5791 13.8379H12.584C12.7045 13.8379 12.7887 13.9776 12.7207 14.0888L12.7188 14.0918L8.45117 21.1767C8.38454 21.2869 8.23444 21.2808 8.17285 21.1884C6.83032 19.1707 6.31682 16.6907 6.75391 14.291L6.83496 13.9238C6.85013 13.8551 6.9163 13.7953 7.00293 13.7949L12.5791 13.8379Z" stroke="#195B35" stroke-opacity="0.5" stroke-width="1.2"/>
+</svg>
diff --git a/shared/assets/icons/uploading_active.svg b/shared/assets/icons/uploading_active.svg
new file mode 100644
index 0000000..dfbb529
--- /dev/null
+++ b/shared/assets/icons/uploading_active.svg
@@ -0,0 +1,9 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="8" fill="#195B35"/>
+<path d="M13.0424 7.06076C13.1127 7.03761 13.1992 7.06915 13.2387 7.13596L13.2397 7.13693L16.0893 11.9348C16.1552 12.0494 16.0699 12.1926 15.9418 12.1926H7.68106C7.54853 12.1926 7.47938 12.0583 7.52481 11.9621L7.52579 11.9612C8.6064 9.66043 10.603 7.87028 13.0414 7.06174L13.0424 7.06076Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.2"/>
+<path d="M16.0616 19.7995H24.3233C24.4556 19.7997 24.5238 19.9339 24.4786 20.03L24.4776 20.032C23.397 22.3395 21.4013 24.1297 18.963 24.9382L18.962 24.9392C18.8916 24.9625 18.8052 24.9309 18.7657 24.864L18.7648 24.863L15.9161 20.0593C15.8488 19.9446 15.9332 19.7998 16.0616 19.7995Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.2"/>
+<path d="M15.4577 6.61816C17.9957 6.45914 20.5223 7.35401 22.405 9.10449L22.4206 9.11914C22.4649 9.17432 22.4754 9.25589 22.4382 9.31934L19.5945 14.1318V14.1328C19.5298 14.2424 19.3697 14.2464 19.3025 14.125L15.3327 6.86719L15.3318 6.86621L15.3161 6.82617C15.3054 6.78495 15.3112 6.74132 15.3327 6.70117C15.3537 6.66237 15.3833 6.6367 15.4197 6.625L15.4577 6.61816Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.2"/>
+<path d="M12.4102 17.867C12.4668 17.7715 12.5955 17.7562 12.6719 17.8348L12.7012 17.8748L16.6719 25.1326V25.1346C16.7004 25.1866 16.7004 25.2454 16.6719 25.2987C16.6441 25.3506 16.5998 25.3782 16.5459 25.3817C14.0082 25.5405 11.4822 24.6456 9.59962 22.8953L9.57912 22.8768C9.53803 22.8215 9.53 22.7422 9.56642 22.6805L12.4092 17.868L12.4102 17.867Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.2"/>
+<path d="M23.5456 10.824C23.6039 10.7274 23.7258 10.7196 23.7966 10.781L23.824 10.8113C25.1527 12.8081 25.6715 15.258 25.2585 17.6346L25.1618 18.076C25.1467 18.1449 25.08 18.2039 24.9929 18.2039L19.4177 18.1629H19.4128C19.2924 18.1627 19.2082 18.0221 19.2761 17.9109L19.2781 17.908L23.5456 10.824Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.2"/>
+<path d="M12.5791 13.8379H12.584C12.7045 13.8379 12.7887 13.9776 12.7207 14.0888L12.7188 14.0918L8.45117 21.1767C8.38454 21.2869 8.23444 21.2808 8.17285 21.1884C6.83032 19.1707 6.31682 16.6907 6.75391 14.291L6.83496 13.9238C6.85013 13.8551 6.9163 13.7953 7.00293 13.7949L12.5791 13.8379Z" fill="#FFFDF5" stroke="#FFFDF5" stroke-width="1.2"/>
+</svg>
diff --git a/shared/tokens/colors.ts b/shared/tokens/colors.ts
new file mode 100644
index 0000000..991be18
--- /dev/null
+++ b/shared/tokens/colors.ts
@@ -0,0 +1,5 @@
+export const basicColors = {
+  beige: "#FFFDF5",
+  green100: "#195B35",
+  green50: "rgba(25, 91, 53, 0.5)",
+};
diff --git a/shared/ui/navigation/index.tsx b/shared/ui/navigation/index.tsx
new file mode 100644
index 0000000..db25e95
--- /dev/null
+++ b/shared/ui/navigation/index.tsx
@@ -0,0 +1,19 @@
+import { basicColors } from "@/shared/tokens/colors";
+
+export const DefaultNavigationOptions = {
+  tabBarActiveTintColor: basicColors.green100,
+  tabBarInactiveTintColor: basicColors.green50,
+  tabBarIconStyle: {
+    marginBottom: 4,
+    width: 32,
+    height: 32,
+  },
+  tabBarStyle: {
+    paddingHorizontal: 34,
+    backgroundColor: basicColors.beige,
+  },
+  tabBarLabelStyle: {
+    fontSize: 12,
+  },
+  headerShown: false,
+} as const;