diff --git a/package.json b/package.json
index 00b78c2..ffd1c2e 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",
+    "@fontsource-variable/outfit": "^5.1.0",
     "@iconify-json/mynaui": "^1.2.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/compiler-sfc": "^3.5.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1f728e1..b45cab0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,9 @@ importers:
       '@eslint/js':
         specifier: ^9.14.0
         version: 9.15.0
+      '@fontsource-variable/outfit':
+        specifier: ^5.1.0
+        version: 5.1.0
       '@iconify-json/mynaui':
         specifier: ^1.2.7
         version: 1.2.7
@@ -382,6 +385,9 @@ packages:
     resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fontsource-variable/outfit@5.1.0':
+    resolution: {integrity: sha512-WUZiMehPerX/sUWC65Ku9hQ741cJtkCiy5T9XSZd1XbyYudNd/qoZSbUyEbiC00+4rGheNcKzaFdMGp5uonQog==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -2007,6 +2013,8 @@ snapshots:
     dependencies:
       levn: 0.4.1
 
+  '@fontsource-variable/outfit@5.1.0': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
diff --git a/src/assets/index.css b/src/assets/index.css
index b5c61c9..292b86d 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  font-family: 'Outfit Variable', sans-serif;
+}
diff --git a/src/main.js b/src/main.js
index 0aebd42..9cabdfe 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
 import './assets/index.css'
+import '@fontsource-variable/outfit'
 
 import { createApp } from 'vue'
 import App from './App.vue'
diff --git a/tailwind.config.js b/tailwind.config.js
index c1da0e5..c970f5e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,17 @@
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#9D59A8',
+        secondary: '#B59BBA',
+        background: '#FFFCF8',
+        customGray: '#404040',
+      },
+      boxShadow: {
+        button: '0 12px 24px 0 rgba(0, 0, 0, 0.25)',
+      },
+    },
   },
   plugins: [],
 }