diff --git a/app/assets/global.css b/app/assets/global.css
index 777240b..d96e074 100644
--- a/app/assets/global.css
+++ b/app/assets/global.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+@import "@catppuccin/tailwindcss/mocha.css";
 
 @theme {
     --font-mono: "JetBrains Mono", monospace;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ae2a5fe..cc2444d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-screen h-full flex items-center justify-start flex-col font-mono">
+    <div class="w-screen h-full flex items-center justify-start flex-col font-mono bg-ctp-base">
         <div class="w-1 h-10 shrink-10" />
 
         <div
@@ -20,7 +20,7 @@
             <p class="mr-16">{{ $t("main.note.accessibility") }}</p>
             <div class="h-4" />
 
-            <h1 class="text-xl">
+            <h1 class="text-xl text-ctp-primary">
                 {{ $t("main.intro.0") }}
                 <span class="font-bold">{{ $t("main.intro.1") }}</span> ({{
                     $t("main.intro.2")
diff --git a/bun.lock b/bun.lock
index 4027e19..cf062bd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "svitan-dev-new",
@@ -13,6 +12,9 @@
         "vue": "^3.5.26",
         "vue-router": "^4.6.4",
       },
+      "devDependencies": {
+        "@catppuccin/tailwindcss": "^1.0.0",
+      },
     },
   },
   "packages": {
@@ -76,6 +78,8 @@
 
     "@capsizecss/unpack": ["@capsizecss/unpack@3.0.1", "", { "dependencies": { "fontkit": "^2.0.2" } }, "sha512-8XqW8xGn++Eqqbz3e9wKuK7mxryeRjs4LOHLxbh2lwKeSbuNR4NFifDZT4KzvjU6HMOPbiNTsWpniK5EJfTWkg=="],
 
+    "@catppuccin/tailwindcss": ["@catppuccin/tailwindcss@1.0.0", "", {}, "sha512-l8pOlcYe2ncGd8a1gUmL5AHmKlxR2+CHuG5kt4Me6IZwzntW1DoLmj89BH+DcsPHBsdDGLrTSv35emlYyU3FeQ=="],
+
     "@clack/core": ["@clack/core@1.0.0-alpha.7", "", { "dependencies": { "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } }, "sha512-3vdh6Ar09D14rVxJZIm3VQJkU+ZOKKT5I5cC0cOVazy70CNyYYjiwRj9unwalhESndgxx6bGc/m6Hhs4EKF5XQ=="],
 
     "@clack/prompts": ["@clack/prompts@1.0.0-alpha.9", "", { "dependencies": { "@clack/core": "1.0.0-alpha.7", "picocolors": "^1.0.0", "sisteransi": "^1.0.5" } }, "sha512-sKs0UjiHFWvry4SiRfBi5Qnj0C/6AYx8aKkFPZQSuUZXgAram25ZDmhQmP7vj1aFyLpfHWtLQjWvOvcat0TOLg=="],
diff --git a/package.json b/package.json
index 0bf7274..2f9813b 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,8 @@
     "typescript": "^5.6.3",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@catppuccin/tailwindcss": "^1.0.0"
   }
 }