diff --git a/package-lock.json b/package-lock.json
index ef0429b7..fc839af2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "react-dom": "^19.2.5"
       },
       "devDependencies": {
+        "@eslint/js": "^10.0.1",
         "@playwright/test": "^1.40.0",
         "@tailwindcss/vite": "^4.2.1",
         "@testing-library/dom": "^10.4.1",
@@ -1129,6 +1130,27 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@eslint/js": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
+      "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "eslint": "^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@eslint/object-schema": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-3.0.2.tgz",
diff --git a/package.json b/package.json
index ad7e6e31..e01fc1fe 100644
--- a/package.json
+++ b/package.json
@@ -19,38 +19,43 @@
   },
   "dependencies": {
     "framer-motion": "^12.38.0",
-    "heroicons": "^2.1.0",
+    "heroicons": "^2.2.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.0",
-    "@tailwindcss/vite": "^4.2.1",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.59.1",
+    "@tailwindcss/vite": "^4.2.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.13",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.58.1",
-    "@vitejs/plugin-react": "^5.1.4",
-    "@vitest/coverage-v8": "^4.1.3",
-    "eslint": "^10.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.0",
+    "@typescript-eslint/parser": "^8.59.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.5",
+    "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.4.0",
+    "globals": "^17.5.0",
     "husky": "^9.1.7",
-    "jsdom": "^28.1.0",
+    "jsdom": "^29.0.2",
     "jsonc-eslint-parser": "^3.1.0",
     "lint-staged": "^16.4.0",
     "prettier": "^3.8.3",
-    "tailwindcss": "^4.2.0",
-    "typescript": "^5.2.0",
-    "vite": "^7.3.1",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.10",
     "vitest": "^4.1.5"
   },
+  "engines": {
+    "node": "^20.19.0 || ^22.13.0 || >=24.0.0"
+  },
+  },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
       "eslint --max-warnings 0 --fix",
diff --git a/src/index.css b/src/index.css
index 093e9a60..dcc766be 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,27 +1,37 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
-@layer base {
-  html {
-    scroll-behavior: smooth;
-  }
+@theme {
+  --color-light-50: oklch(97.95% 0.014 250.75);
+  --color-light-900: oklch(20.49% 0.038 264.38);
+  --color-dark-950: oklch(7.37% 0.019 285.85);
+  --color-dark-100: oklch(90.45% 0.02 285.85);
+  --color-teal-400: oklch(78.86% 0.162 174.21);
+  --color-teal-600: oklch(49.62% 0.104 181.28);
+}
 
-  body {
-    @apply bg-light-50 text-light-900 transition-colors duration-300;
-  }
+html {
+  scroll-behavior: smooth;
+}
 
-  .dark body {
-    @apply bg-dark-950 text-dark-100;
-  }
+body {
+  background-color: var(--color-light-50);
+  color: var(--color-light-900);
+  transition: color 300ms, background-color 300ms;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+:is(.dark) body {
+  background-color: var(--color-dark-950);
+  color: var(--color-dark-100);
+}
 
-  .gradient-text {
-    @apply bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-teal-600;
-  }
+@utility text-balance {
+  text-wrap: balance;
 }
+
+@utility gradient-text {
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  background-image: linear-gradient(to right, var(--color-teal-400), var(--color-teal-600));
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 7c5af2e3..345d5f84 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,9 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   server: {
     port: 3000,
   },