diff --git a/lite.todo/app.json b/lite.todo/app.json
index 7322b0f..ff44d82 100755
--- a/lite.todo/app.json
+++ b/lite.todo/app.json
@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "lite.todo",
-    "slug": "lite.todo",
+    "name": "Lite Todo",
+    "slug": "lite-todo",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -16,6 +16,7 @@
       "supportsTablet": true
     },
     "android": {
+      "package": "com.peadorr.litetodo",
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
@@ -25,7 +26,22 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": ["expo-router"],
-    "scheme": "lite-todo-scheme"
+    "plugins": [
+      "expo-router",
+      [
+        "react-native-google-mobile-ads",
+        {
+          "androidAppId": "ca-app-pub-7854988771210967~3806885931"
+        }
+      ]
+    ],
+    "scheme": "lite-todo-scheme",
+    "extra": {
+      "router": {},
+      "eas": {
+        "projectId": "74d1edfd-96bc-4306-a71a-60f7b9f99717"
+      }
+    },
+    "owner": "peadorr"
   }
 }
diff --git a/lite.todo/app/(tabs)/_layout.tsx b/lite.todo/app/(tabs)/_layout.tsx
index 206ba45..f3243cb 100755
--- a/lite.todo/app/(tabs)/_layout.tsx
+++ b/lite.todo/app/(tabs)/_layout.tsx
@@ -1,42 +1,45 @@
 import { Tabs } from "expo-router";
 import { MaterialIcons } from "@expo/vector-icons";
+import { View } from "react-native-animatable";
 
 export default function TabLayout() {
   return (
-    <Tabs
-      screenOptions={{
-        headerShown: false,
-        tabBarStyle: { height: 56 },
-        tabBarLabelStyle: { fontSize: 12 },
-        tabBarHideOnKeyboard: false,
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "할 일",
-          tabBarIcon: ({ color, focused, size }) => (
-            <MaterialIcons
-              name={focused ? "check-box" : "check-box-outline-blank"}
-              size={size ?? 24}
-              color={color}
-            />
-          ),
+    <>
+      <Tabs
+        screenOptions={{
+          headerShown: false,
+          tabBarStyle: { height: 56 },
+          tabBarLabelStyle: { fontSize: 12 },
+          tabBarHideOnKeyboard: false,
         }}
-      />
-      <Tabs.Screen
-        name="done"
-        options={{
-          title: "완료됨",
-          tabBarIcon: ({ color, focused, size }) => (
-            <MaterialIcons
-              name={focused ? "done-all" : "done"}
-              size={size ?? 24}
-              color={color}
-            />
-          ),
-        }}
-      />
-    </Tabs>
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "할 일",
+            tabBarIcon: ({ color, focused, size }) => (
+              <MaterialIcons
+                name={focused ? "check-box" : "check-box-outline-blank"}
+                size={size ?? 24}
+                color={color}
+              />
+            ),
+          }}
+        />
+        <Tabs.Screen
+          name="done"
+          options={{
+            title: "완료됨",
+            tabBarIcon: ({ color, focused, size }) => (
+              <MaterialIcons
+                name={focused ? "done-all" : "done"}
+                size={size ?? 24}
+                color={color}
+              />
+            ),
+          }}
+        />
+      </Tabs>
+    </>
   );
 }
diff --git a/lite.todo/app/(tabs)/done.tsx b/lite.todo/app/(tabs)/done.tsx
index 5f113d1..30d5413 100755
--- a/lite.todo/app/(tabs)/done.tsx
+++ b/lite.todo/app/(tabs)/done.tsx
@@ -6,7 +6,15 @@ import { Text } from "@/components/ui/text";
 import { VStack } from "@/components/ui/vstack";
 import { useTodosCtx } from "@/store/todoProvider";
 import { SafeAreaView } from "react-native-safe-area-context";
+import {
+  BannerAd,
+  BannerAdSize,
+  TestIds,
+} from "react-native-google-mobile-ads";
 
+const BANNER_UNIT_ID = __DEV__
+  ? TestIds.BANNER
+  : "ca-app-pub-7854988771210967~3806885931";
 export default function DoneTab() {
   const { doneTodos, toggle, remove, clearDone } = useTodosCtx();
 
@@ -30,6 +38,10 @@ export default function DoneTab() {
             <ButtonText>완료한 일 모두 지우기</ButtonText>
           </Button>
         </HStack>
+        <BannerAd
+          unitId={BANNER_UNIT_ID}
+          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
+        />
       </VStack>
     </SafeAreaView>
   );
diff --git a/lite.todo/app/(tabs)/index.tsx b/lite.todo/app/(tabs)/index.tsx
index 7d0e497..bedc29f 100755
--- a/lite.todo/app/(tabs)/index.tsx
+++ b/lite.todo/app/(tabs)/index.tsx
@@ -9,6 +9,16 @@ import { useTodosCtx } from "@/store/todoProvider";
 import { useState } from "react";
 import { KeyboardAvoidingView, Platform, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import {
+  BannerAd,
+  BannerAdSize,
+  TestIds,
+} from "react-native-google-mobile-ads";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const BANNER_UNIT_ID = __DEV__
+  ? TestIds.BANNER
+  : "ca-app-pub-7854988771210967~3806885931";
 
 export default function ActiveTab() {
   const { todos, activeTodos, leftCount, add, toggle, completeAll, clearDone } =
@@ -20,6 +30,8 @@ export default function ActiveTab() {
     setTitle("");
   };
 
+  const insets = useSafeAreaInsets();
+
   return (
     <SafeAreaView className="flex-1 px-4 py-1 bg-white dark:bg-neutral-900">
       <VStack className="flex-1 gap-3">
@@ -52,6 +64,10 @@ export default function ActiveTab() {
         >
           <ButtonText>완료한 일 모두 지우기</ButtonText>
         </Button> */}
+        <BannerAd
+          unitId={BANNER_UNIT_ID}
+          size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
+        />
       </VStack>
     </SafeAreaView>
   );
diff --git a/lite.todo/app/_layout.tsx b/lite.todo/app/_layout.tsx
index 8338bec..1215ba6 100755
--- a/lite.todo/app/_layout.tsx
+++ b/lite.todo/app/_layout.tsx
@@ -6,8 +6,16 @@ import { Stack } from "expo-router";
 import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 import "@/global.css";
 import { TodosProvider } from "@/store/todoProvider";
+import { useEffect } from "react";
+import mobileAds from "react-native-google-mobile-ads";
 
 export default function App() {
+  useEffect(() => {
+    mobileAds()
+      .initialize()
+      .catch((e) => console.warn(e));
+  }, []);
+
   return (
     <TodosProvider>
       <GluestackUIProvider mode="light">
diff --git a/lite.todo/eas.json b/lite.todo/eas.json
new file mode 100644
index 0000000..eb60d42
--- /dev/null
+++ b/lite.todo/eas.json
@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 16.18.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}
diff --git a/lite.todo/package-lock.json b/lite.todo/package-lock.json
index 7066a20..d43873f 100755
--- a/lite.todo/package-lock.json
+++ b/lite.todo/package-lock.json
@@ -17,6 +17,7 @@
         "babel-plugin-module-resolver": "^5.0.2",
         "expo": "~53.0.22",
         "expo-constants": "~17.1.7",
+        "expo-dev-client": "~5.2.4",
         "expo-linking": "~7.1.7",
         "expo-router": "~5.1.5",
         "expo-status-bar": "~2.2.3",
@@ -27,6 +28,7 @@
         "react-dom": "^19.1.1",
         "react-native": "0.79.6",
         "react-native-animatable": "^1.4.0",
+        "react-native-google-mobile-ads": "^15.7.0",
         "react-native-reanimated": "^4.1.0",
         "react-native-safe-area-context": "5.4.0",
         "react-native-screens": "~4.11.1",
@@ -2187,6 +2189,12 @@
         "tailwindcss": "*"
       }
     },
+    "node_modules/@iabtcf/core": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@iabtcf/core/-/core-1.5.6.tgz",
+      "integrity": "sha512-u2q9thI9vLurYZdGtyJsDYOqoeLc4EgQsYGSc+UVibYII61B/ENJPZS6eFlML1F0hSoTR/goptpo5nGRDkKd2w==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@internationalized/date": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.9.0.tgz",
@@ -4922,6 +4930,22 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/anser": {
       "version": "1.4.10",
       "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.10.tgz",
@@ -6155,6 +6179,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6494,6 +6527,58 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-dev-client": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/expo-dev-client/-/expo-dev-client-5.2.4.tgz",
+      "integrity": "sha512-s/N/nK5LPo0QZJpV4aPijxyrzV4O49S3dN8D2fljqrX2WwFZzWwFO6dX1elPbTmddxumdcpczsdUPY+Ms8g43g==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-dev-launcher": "5.1.16",
+        "expo-dev-menu": "6.1.14",
+        "expo-dev-menu-interface": "1.10.0",
+        "expo-manifests": "~0.16.6",
+        "expo-updates-interface": "~1.1.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-launcher": {
+      "version": "5.1.16",
+      "resolved": "https://registry.npmjs.org/expo-dev-launcher/-/expo-dev-launcher-5.1.16.tgz",
+      "integrity": "sha512-tbCske9pvbozaEblyxoyo/97D6od9Ma4yAuyUnXtRET1CKAPKYS+c4fiZ+I3B4qtpZwN3JNFUjG3oateN0y6Hg==",
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "8.11.0",
+        "expo-dev-menu": "6.1.14",
+        "expo-manifests": "~0.16.6",
+        "resolve-from": "^5.0.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-menu": {
+      "version": "6.1.14",
+      "resolved": "https://registry.npmjs.org/expo-dev-menu/-/expo-dev-menu-6.1.14.tgz",
+      "integrity": "sha512-yonNMg2GHJZtuisVowdl1iQjZfYP85r1D1IO+ar9D9zlrBPBJhq2XEju52jd1rDmDkmDuEhBSbPNhzIcsBNiPg==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-dev-menu-interface": "1.10.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-dev-menu-interface": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/expo-dev-menu-interface/-/expo-dev-menu-interface-1.10.0.tgz",
+      "integrity": "sha512-NxtM/qot5Rh2cY333iOE87dDg1S8CibW+Wu4WdLua3UMjy81pXYzAGCZGNOeY7k9GpNFqDPNDXWyBSlk9r2pBg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-file-system": {
       "version": "18.1.11",
       "resolved": "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.1.11.tgz",
@@ -6517,6 +6602,12 @@
         "react": "*"
       }
     },
+    "node_modules/expo-json-utils": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/expo-json-utils/-/expo-json-utils-0.15.0.tgz",
+      "integrity": "sha512-duRT6oGl80IDzH2LD2yEFWNwGIC2WkozsB6HF3cDYNoNNdUvFk6uN3YiwsTsqVM/D0z6LEAQ01/SlYvN+Fw0JQ==",
+      "license": "MIT"
+    },
     "node_modules/expo-keep-awake": {
       "version": "14.1.4",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-14.1.4.tgz",
@@ -6541,6 +6632,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-manifests": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/expo-manifests/-/expo-manifests-0.16.6.tgz",
+      "integrity": "sha512-1A+do6/mLUWF9xd3uCrlXr9QFDbjbfqAYmUy8UDLOjof1lMrOhyeC4Yi6WexA/A8dhZEpIxSMCKfn7G4aHAh4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@expo/config": "~11.0.12",
+        "expo-json-utils": "~0.15.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "2.1.14",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.1.14.tgz",
@@ -6636,6 +6740,15 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-updates-interface": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/expo-updates-interface/-/expo-updates-interface-1.1.0.tgz",
+      "integrity": "sha512-DeB+fRe0hUDPZhpJ4X4bFMAItatFBUPjw/TVSbJsaf3Exeami+2qbbJhWkcTMoYHOB73nOIcaYcWXYJnCJXO0w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/exponential-backoff": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.2.tgz",
@@ -7550,6 +7663,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "license": "MIT"
     },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -9698,6 +9817,24 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-google-mobile-ads": {
+      "version": "15.7.0",
+      "resolved": "https://registry.npmjs.org/react-native-google-mobile-ads/-/react-native-google-mobile-ads-15.7.0.tgz",
+      "integrity": "sha512-VAskkfiK/ct9jer0XlASclgpiDLYnaLf4RPCcoenneZ3wVGfPwOtQ2T/HVZ6ZNc42BmRIRefqQSCWZPqIA2Drg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iabtcf/core": "^1.5.3",
+        "use-deep-compare-effect": "^1.8.1"
+      },
+      "peerDependencies": {
+        "expo": ">=47.0.0"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-is-edge-to-edge": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz",
@@ -11316,6 +11453,32 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/use-deep-compare-effect": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz",
+      "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "dequal": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13"
+      }
+    },
     "node_modules/use-latest-callback": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.2.4.tgz",
diff --git a/lite.todo/package.json b/lite.todo/package.json
index b0fc5b0..9058d1d 100755
--- a/lite.todo/package.json
+++ b/lite.todo/package.json
@@ -6,7 +6,9 @@
     "start": "expo start",
     "android": "expo start --android --offline",
     "ios": "expo start --ios --offline",
-    "web": "expo start --web --offline"
+    "web": "expo start --web --offline",
+    "build:android:dev": "eas build -p android --profile development",
+    "dev": "expo start --dev-client"
   },
   "dependencies": {
     "@expo/html-elements": "^0.10.1",
@@ -28,6 +30,7 @@
     "react-dom": "^19.1.1",
     "react-native": "0.79.6",
     "react-native-animatable": "^1.4.0",
+    "react-native-google-mobile-ads": "^15.7.0",
     "react-native-reanimated": "^4.1.0",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
@@ -35,7 +38,8 @@
     "react-native-worklets": "^0.5.0",
     "react-stately": "^3.39.0",
     "tailwind-variants": "^0.1.20",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^3.4.17",
+    "expo-dev-client": "~5.2.4"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
diff --git a/lite.todo/tailwind.config.js b/lite.todo/tailwind.config.js
index 79c0fce..06d4710 100755
--- a/lite.todo/tailwind.config.js
+++ b/lite.todo/tailwind.config.js
@@ -1,15 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: process.env.DARK_MODE ? process.env.DARK_MODE : 'class',
+  darkMode: process.env.DARK_MODE ? process.env.DARK_MODE : "class",
   content: [
-    './app/**/*.{html,js,jsx,ts,tsx,mdx}',
-    './components/**/*.{html,js,jsx,ts,tsx,mdx}',
-    './utils/**/*.{html,js,jsx,ts,tsx,mdx}',
-    './*.{html,js,jsx,ts,tsx,mdx}',
-    './src/**/*.{html,js,jsx,ts,tsx,mdx}',
+    "./app/**/*.{html,js,jsx,ts,tsx,mdx}",
+    "./components/**/*.{html,js,jsx,ts,tsx,mdx}",
+    "./utils/**/*.{html,js,jsx,ts,tsx,mdx}",
+    "./*.{html,js,jsx,ts,tsx,mdx}",
+    "./src/**/*.{html,js,jsx,ts,tsx,mdx}",
   ],
-  presets: [require('nativewind/preset')],
-  important: 'html',
+  presets: [require("nativewind/preset")],
+  important: "html",
   safelist: [
     {
       pattern:
@@ -20,186 +20,186 @@ module.exports = {
     extend: {
       colors: {
         primary: {
-          0: 'rgb(var(--color-primary-0)/<alpha-value>)',
-          50: 'rgb(var(--color-primary-50)/<alpha-value>)',
-          100: 'rgb(var(--color-primary-100)/<alpha-value>)',
-          200: 'rgb(var(--color-primary-200)/<alpha-value>)',
-          300: 'rgb(var(--color-primary-300)/<alpha-value>)',
-          400: 'rgb(var(--color-primary-400)/<alpha-value>)',
-          500: 'rgb(var(--color-primary-500)/<alpha-value>)',
-          600: 'rgb(var(--color-primary-600)/<alpha-value>)',
-          700: 'rgb(var(--color-primary-700)/<alpha-value>)',
-          800: 'rgb(var(--color-primary-800)/<alpha-value>)',
-          900: 'rgb(var(--color-primary-900)/<alpha-value>)',
-          950: 'rgb(var(--color-primary-950)/<alpha-value>)',
+          0: "rgb(var(--color-primary-0)/<alpha-value>)",
+          50: "rgb(var(--color-primary-50)/<alpha-value>)",
+          100: "rgb(var(--color-primary-100)/<alpha-value>)",
+          200: "rgb(var(--color-primary-200)/<alpha-value>)",
+          300: "rgb(var(--color-primary-300)/<alpha-value>)",
+          400: "rgb(var(--color-primary-400)/<alpha-value>)",
+          500: "rgb(var(--color-primary-500)/<alpha-value>)",
+          600: "rgb(var(--color-primary-600)/<alpha-value>)",
+          700: "rgb(var(--color-primary-700)/<alpha-value>)",
+          800: "rgb(var(--color-primary-800)/<alpha-value>)",
+          900: "rgb(var(--color-primary-900)/<alpha-value>)",
+          950: "rgb(var(--color-primary-950)/<alpha-value>)",
         },
         secondary: {
-          0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
-          50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
-          100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
-          200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
-          300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
-          400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
-          500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
-          600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
-          700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
-          800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
-          900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
-          950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
+          0: "rgb(var(--color-secondary-0)/<alpha-value>)",
+          50: "rgb(var(--color-secondary-50)/<alpha-value>)",
+          100: "rgb(var(--color-secondary-100)/<alpha-value>)",
+          200: "rgb(var(--color-secondary-200)/<alpha-value>)",
+          300: "rgb(var(--color-secondary-300)/<alpha-value>)",
+          400: "rgb(var(--color-secondary-400)/<alpha-value>)",
+          500: "rgb(var(--color-secondary-500)/<alpha-value>)",
+          600: "rgb(var(--color-secondary-600)/<alpha-value>)",
+          700: "rgb(var(--color-secondary-700)/<alpha-value>)",
+          800: "rgb(var(--color-secondary-800)/<alpha-value>)",
+          900: "rgb(var(--color-secondary-900)/<alpha-value>)",
+          950: "rgb(var(--color-secondary-950)/<alpha-value>)",
         },
         tertiary: {
-          50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
-          100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
-          200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
-          300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
-          400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
-          500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
-          600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
-          700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
-          800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
-          900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
-          950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
+          50: "rgb(var(--color-tertiary-50)/<alpha-value>)",
+          100: "rgb(var(--color-tertiary-100)/<alpha-value>)",
+          200: "rgb(var(--color-tertiary-200)/<alpha-value>)",
+          300: "rgb(var(--color-tertiary-300)/<alpha-value>)",
+          400: "rgb(var(--color-tertiary-400)/<alpha-value>)",
+          500: "rgb(var(--color-tertiary-500)/<alpha-value>)",
+          600: "rgb(var(--color-tertiary-600)/<alpha-value>)",
+          700: "rgb(var(--color-tertiary-700)/<alpha-value>)",
+          800: "rgb(var(--color-tertiary-800)/<alpha-value>)",
+          900: "rgb(var(--color-tertiary-900)/<alpha-value>)",
+          950: "rgb(var(--color-tertiary-950)/<alpha-value>)",
         },
         error: {
-          0: 'rgb(var(--color-error-0)/<alpha-value>)',
-          50: 'rgb(var(--color-error-50)/<alpha-value>)',
-          100: 'rgb(var(--color-error-100)/<alpha-value>)',
-          200: 'rgb(var(--color-error-200)/<alpha-value>)',
-          300: 'rgb(var(--color-error-300)/<alpha-value>)',
-          400: 'rgb(var(--color-error-400)/<alpha-value>)',
-          500: 'rgb(var(--color-error-500)/<alpha-value>)',
-          600: 'rgb(var(--color-error-600)/<alpha-value>)',
-          700: 'rgb(var(--color-error-700)/<alpha-value>)',
-          800: 'rgb(var(--color-error-800)/<alpha-value>)',
-          900: 'rgb(var(--color-error-900)/<alpha-value>)',
-          950: 'rgb(var(--color-error-950)/<alpha-value>)',
+          0: "rgb(var(--color-error-0)/<alpha-value>)",
+          50: "rgb(var(--color-error-50)/<alpha-value>)",
+          100: "rgb(var(--color-error-100)/<alpha-value>)",
+          200: "rgb(var(--color-error-200)/<alpha-value>)",
+          300: "rgb(var(--color-error-300)/<alpha-value>)",
+          400: "rgb(var(--color-error-400)/<alpha-value>)",
+          500: "rgb(var(--color-error-500)/<alpha-value>)",
+          600: "rgb(var(--color-error-600)/<alpha-value>)",
+          700: "rgb(var(--color-error-700)/<alpha-value>)",
+          800: "rgb(var(--color-error-800)/<alpha-value>)",
+          900: "rgb(var(--color-error-900)/<alpha-value>)",
+          950: "rgb(var(--color-error-950)/<alpha-value>)",
         },
         success: {
-          0: 'rgb(var(--color-success-0)/<alpha-value>)',
-          50: 'rgb(var(--color-success-50)/<alpha-value>)',
-          100: 'rgb(var(--color-success-100)/<alpha-value>)',
-          200: 'rgb(var(--color-success-200)/<alpha-value>)',
-          300: 'rgb(var(--color-success-300)/<alpha-value>)',
-          400: 'rgb(var(--color-success-400)/<alpha-value>)',
-          500: 'rgb(var(--color-success-500)/<alpha-value>)',
-          600: 'rgb(var(--color-success-600)/<alpha-value>)',
-          700: 'rgb(var(--color-success-700)/<alpha-value>)',
-          800: 'rgb(var(--color-success-800)/<alpha-value>)',
-          900: 'rgb(var(--color-success-900)/<alpha-value>)',
-          950: 'rgb(var(--color-success-950)/<alpha-value>)',
+          0: "rgb(var(--color-success-0)/<alpha-value>)",
+          50: "rgb(var(--color-success-50)/<alpha-value>)",
+          100: "rgb(var(--color-success-100)/<alpha-value>)",
+          200: "rgb(var(--color-success-200)/<alpha-value>)",
+          300: "rgb(var(--color-success-300)/<alpha-value>)",
+          400: "rgb(var(--color-success-400)/<alpha-value>)",
+          500: "rgb(var(--color-success-500)/<alpha-value>)",
+          600: "rgb(var(--color-success-600)/<alpha-value>)",
+          700: "rgb(var(--color-success-700)/<alpha-value>)",
+          800: "rgb(var(--color-success-800)/<alpha-value>)",
+          900: "rgb(var(--color-success-900)/<alpha-value>)",
+          950: "rgb(var(--color-success-950)/<alpha-value>)",
         },
         warning: {
-          0: 'rgb(var(--color-warning-0)/<alpha-value>)',
-          50: 'rgb(var(--color-warning-50)/<alpha-value>)',
-          100: 'rgb(var(--color-warning-100)/<alpha-value>)',
-          200: 'rgb(var(--color-warning-200)/<alpha-value>)',
-          300: 'rgb(var(--color-warning-300)/<alpha-value>)',
-          400: 'rgb(var(--color-warning-400)/<alpha-value>)',
-          500: 'rgb(var(--color-warning-500)/<alpha-value>)',
-          600: 'rgb(var(--color-warning-600)/<alpha-value>)',
-          700: 'rgb(var(--color-warning-700)/<alpha-value>)',
-          800: 'rgb(var(--color-warning-800)/<alpha-value>)',
-          900: 'rgb(var(--color-warning-900)/<alpha-value>)',
-          950: 'rgb(var(--color-warning-950)/<alpha-value>)',
+          0: "rgb(var(--color-warning-0)/<alpha-value>)",
+          50: "rgb(var(--color-warning-50)/<alpha-value>)",
+          100: "rgb(var(--color-warning-100)/<alpha-value>)",
+          200: "rgb(var(--color-warning-200)/<alpha-value>)",
+          300: "rgb(var(--color-warning-300)/<alpha-value>)",
+          400: "rgb(var(--color-warning-400)/<alpha-value>)",
+          500: "rgb(var(--color-warning-500)/<alpha-value>)",
+          600: "rgb(var(--color-warning-600)/<alpha-value>)",
+          700: "rgb(var(--color-warning-700)/<alpha-value>)",
+          800: "rgb(var(--color-warning-800)/<alpha-value>)",
+          900: "rgb(var(--color-warning-900)/<alpha-value>)",
+          950: "rgb(var(--color-warning-950)/<alpha-value>)",
         },
         info: {
-          0: 'rgb(var(--color-info-0)/<alpha-value>)',
-          50: 'rgb(var(--color-info-50)/<alpha-value>)',
-          100: 'rgb(var(--color-info-100)/<alpha-value>)',
-          200: 'rgb(var(--color-info-200)/<alpha-value>)',
-          300: 'rgb(var(--color-info-300)/<alpha-value>)',
-          400: 'rgb(var(--color-info-400)/<alpha-value>)',
-          500: 'rgb(var(--color-info-500)/<alpha-value>)',
-          600: 'rgb(var(--color-info-600)/<alpha-value>)',
-          700: 'rgb(var(--color-info-700)/<alpha-value>)',
-          800: 'rgb(var(--color-info-800)/<alpha-value>)',
-          900: 'rgb(var(--color-info-900)/<alpha-value>)',
-          950: 'rgb(var(--color-info-950)/<alpha-value>)',
+          0: "rgb(var(--color-info-0)/<alpha-value>)",
+          50: "rgb(var(--color-info-50)/<alpha-value>)",
+          100: "rgb(var(--color-info-100)/<alpha-value>)",
+          200: "rgb(var(--color-info-200)/<alpha-value>)",
+          300: "rgb(var(--color-info-300)/<alpha-value>)",
+          400: "rgb(var(--color-info-400)/<alpha-value>)",
+          500: "rgb(var(--color-info-500)/<alpha-value>)",
+          600: "rgb(var(--color-info-600)/<alpha-value>)",
+          700: "rgb(var(--color-info-700)/<alpha-value>)",
+          800: "rgb(var(--color-info-800)/<alpha-value>)",
+          900: "rgb(var(--color-info-900)/<alpha-value>)",
+          950: "rgb(var(--color-info-950)/<alpha-value>)",
         },
         typography: {
-          0: 'rgb(var(--color-typography-0)/<alpha-value>)',
-          50: 'rgb(var(--color-typography-50)/<alpha-value>)',
-          100: 'rgb(var(--color-typography-100)/<alpha-value>)',
-          200: 'rgb(var(--color-typography-200)/<alpha-value>)',
-          300: 'rgb(var(--color-typography-300)/<alpha-value>)',
-          400: 'rgb(var(--color-typography-400)/<alpha-value>)',
-          500: 'rgb(var(--color-typography-500)/<alpha-value>)',
-          600: 'rgb(var(--color-typography-600)/<alpha-value>)',
-          700: 'rgb(var(--color-typography-700)/<alpha-value>)',
-          800: 'rgb(var(--color-typography-800)/<alpha-value>)',
-          900: 'rgb(var(--color-typography-900)/<alpha-value>)',
-          950: 'rgb(var(--color-typography-950)/<alpha-value>)',
-          white: '#FFFFFF',
-          gray: '#D4D4D4',
-          black: '#181718',
+          0: "rgb(var(--color-typography-0)/<alpha-value>)",
+          50: "rgb(var(--color-typography-50)/<alpha-value>)",
+          100: "rgb(var(--color-typography-100)/<alpha-value>)",
+          200: "rgb(var(--color-typography-200)/<alpha-value>)",
+          300: "rgb(var(--color-typography-300)/<alpha-value>)",
+          400: "rgb(var(--color-typography-400)/<alpha-value>)",
+          500: "rgb(var(--color-typography-500)/<alpha-value>)",
+          600: "rgb(var(--color-typography-600)/<alpha-value>)",
+          700: "rgb(var(--color-typography-700)/<alpha-value>)",
+          800: "rgb(var(--color-typography-800)/<alpha-value>)",
+          900: "rgb(var(--color-typography-900)/<alpha-value>)",
+          950: "rgb(var(--color-typography-950)/<alpha-value>)",
+          white: "#FFFFFF",
+          gray: "#D4D4D4",
+          black: "#181718",
         },
         outline: {
-          0: 'rgb(var(--color-outline-0)/<alpha-value>)',
-          50: 'rgb(var(--color-outline-50)/<alpha-value>)',
-          100: 'rgb(var(--color-outline-100)/<alpha-value>)',
-          200: 'rgb(var(--color-outline-200)/<alpha-value>)',
-          300: 'rgb(var(--color-outline-300)/<alpha-value>)',
-          400: 'rgb(var(--color-outline-400)/<alpha-value>)',
-          500: 'rgb(var(--color-outline-500)/<alpha-value>)',
-          600: 'rgb(var(--color-outline-600)/<alpha-value>)',
-          700: 'rgb(var(--color-outline-700)/<alpha-value>)',
-          800: 'rgb(var(--color-outline-800)/<alpha-value>)',
-          900: 'rgb(var(--color-outline-900)/<alpha-value>)',
-          950: 'rgb(var(--color-outline-950)/<alpha-value>)',
+          0: "rgb(var(--color-outline-0)/<alpha-value>)",
+          50: "rgb(var(--color-outline-50)/<alpha-value>)",
+          100: "rgb(var(--color-outline-100)/<alpha-value>)",
+          200: "rgb(var(--color-outline-200)/<alpha-value>)",
+          300: "rgb(var(--color-outline-300)/<alpha-value>)",
+          400: "rgb(var(--color-outline-400)/<alpha-value>)",
+          500: "rgb(var(--color-outline-500)/<alpha-value>)",
+          600: "rgb(var(--color-outline-600)/<alpha-value>)",
+          700: "rgb(var(--color-outline-700)/<alpha-value>)",
+          800: "rgb(var(--color-outline-800)/<alpha-value>)",
+          900: "rgb(var(--color-outline-900)/<alpha-value>)",
+          950: "rgb(var(--color-outline-950)/<alpha-value>)",
         },
         background: {
-          0: 'rgb(var(--color-background-0)/<alpha-value>)',
-          50: 'rgb(var(--color-background-50)/<alpha-value>)',
-          100: 'rgb(var(--color-background-100)/<alpha-value>)',
-          200: 'rgb(var(--color-background-200)/<alpha-value>)',
-          300: 'rgb(var(--color-background-300)/<alpha-value>)',
-          400: 'rgb(var(--color-background-400)/<alpha-value>)',
-          500: 'rgb(var(--color-background-500)/<alpha-value>)',
-          600: 'rgb(var(--color-background-600)/<alpha-value>)',
-          700: 'rgb(var(--color-background-700)/<alpha-value>)',
-          800: 'rgb(var(--color-background-800)/<alpha-value>)',
-          900: 'rgb(var(--color-background-900)/<alpha-value>)',
-          950: 'rgb(var(--color-background-950)/<alpha-value>)',
-          error: 'rgb(var(--color-background-error)/<alpha-value>)',
-          warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
-          muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
-          success: 'rgb(var(--color-background-success)/<alpha-value>)',
-          info: 'rgb(var(--color-background-info)/<alpha-value>)',
-          light: '#FBFBFB',
-          dark: '#181719',
+          0: "rgb(var(--color-background-0)/<alpha-value>)",
+          50: "rgb(var(--color-background-50)/<alpha-value>)",
+          100: "rgb(var(--color-background-100)/<alpha-value>)",
+          200: "rgb(var(--color-background-200)/<alpha-value>)",
+          300: "rgb(var(--color-background-300)/<alpha-value>)",
+          400: "rgb(var(--color-background-400)/<alpha-value>)",
+          500: "rgb(var(--color-background-500)/<alpha-value>)",
+          600: "rgb(var(--color-background-600)/<alpha-value>)",
+          700: "rgb(var(--color-background-700)/<alpha-value>)",
+          800: "rgb(var(--color-background-800)/<alpha-value>)",
+          900: "rgb(var(--color-background-900)/<alpha-value>)",
+          950: "rgb(var(--color-background-950)/<alpha-value>)",
+          error: "rgb(var(--color-background-error)/<alpha-value>)",
+          warning: "rgb(var(--color-background-warning)/<alpha-value>)",
+          muted: "rgb(var(--color-background-muted)/<alpha-value>)",
+          success: "rgb(var(--color-background-success)/<alpha-value>)",
+          info: "rgb(var(--color-background-info)/<alpha-value>)",
+          light: "#FBFBFB",
+          dark: "#181719",
         },
         indicator: {
-          primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
-          info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
-          error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
+          primary: "rgb(var(--color-indicator-primary)/<alpha-value>)",
+          info: "rgb(var(--color-indicator-info)/<alpha-value>)",
+          error: "rgb(var(--color-indicator-error)/<alpha-value>)",
         },
       },
       fontFamily: {
         heading: undefined,
         body: undefined,
         mono: undefined,
-        jakarta: ['var(--font-plus-jakarta-sans)'],
-        roboto: ['var(--font-roboto)'],
-        code: ['var(--font-source-code-pro)'],
-        inter: ['var(--font-inter)'],
-        'space-mono': ['var(--font-space-mono)'],
+        jakarta: ["var(--font-plus-jakarta-sans)"],
+        roboto: ["var(--font-roboto)"],
+        code: ["var(--font-source-code-pro)"],
+        inter: ["var(--font-inter)"],
+        "space-mono": ["var(--font-space-mono)"],
       },
       fontWeight: {
-        extrablack: '950',
+        extrablack: "950",
       },
       fontSize: {
-        '2xs': '10px',
+        "2xs": "10px",
       },
       boxShadow: {
-        'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
-        'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
-        'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
-        'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
-        'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
-        'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
-        'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
-        'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
-        'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
+        "hard-1": "-2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
+        "hard-2": "0px 3px 10px 0px rgba(38, 38, 38, 0.20)",
+        "hard-3": "2px 2px 8px 0px rgba(38, 38, 38, 0.20)",
+        "hard-4": "0px -3px 10px 0px rgba(38, 38, 38, 0.20)",
+        "hard-5": "0px 2px 10px 0px rgba(38, 38, 38, 0.10)",
+        "soft-1": "0px 0px 10px rgba(38, 38, 38, 0.1)",
+        "soft-2": "0px 0px 20px rgba(38, 38, 38, 0.2)",
+        "soft-3": "0px 0px 30px rgba(38, 38, 38, 0.1)",
+        "soft-4": "0px 0px 40px rgba(38, 38, 38, 0.1)",
       },
     },
   },