diff --git a/web/app.vue b/web/app.vue
index 09f935b..537a040 100644
--- a/web/app.vue
+++ b/web/app.vue
@@ -1,6 +1,9 @@
+<script setup lang="ts">
+import { UApp } from '#components';
+</script>
+
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+	<UApp>
+		<NuxtPage />
+	</UApp>
 </template>
diff --git a/web/assets/css/main.css b/web/assets/css/main.css
new file mode 100644
index 0000000..f8ca0cd
--- /dev/null
+++ b/web/assets/css/main.css
@@ -0,0 +1,45 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+:root {
+  --ui-primary: #C02942;
+--ui-text-dimmed: var(--ui-color-neutral-400);
+  --ui-text-muted: var(--ui-color-neutral-500);
+  --ui-text-toned: var(--ui-color-neutral-600);
+  --ui-text: var(--ui-color-neutral-700);
+  --ui-text-highlighted: var(--ui-color-neutral-900);
+  --ui-text-inverted: var(--color-white);
+
+  --ui-bg: var(--color-white);
+  --ui-bg-muted: var(--ui-color-neutral-50);
+  --ui-bg-elevated: var(--ui-color-neutral-100);
+  --ui-bg-accented: var(--ui-color-neutral-200);
+  --ui-bg-inverted: var(--ui-color-neutral-900);
+
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-border-muted: var(--ui-color-neutral-200);
+  --ui-border-accented: var(--ui-color-neutral-300);
+  --ui-border-inverted: var(--ui-color-neutral-900);
+}
+
+.dark {
+  --ui-primary: #C02942;
+--ui-text-dimmed: var(--ui-color-neutral-400);
+  --ui-text-muted: var(--ui-color-neutral-500);
+  --ui-text-toned: var(--ui-color-neutral-600);
+  --ui-text: var(--ui-color-neutral-700);
+  --ui-text-highlighted: var(--ui-color-neutral-900);
+  --ui-text-inverted: var(--color-white);
+
+  --ui-bg: var(--color-white);
+  --ui-bg-muted: var(--ui-color-neutral-50);
+  --ui-bg-elevated: var(--ui-color-neutral-100);
+  --ui-bg-accented: var(--ui-color-neutral-200);
+  --ui-bg-inverted: var(--ui-color-neutral-900);
+
+  --ui-border: var(--ui-color-neutral-200);
+  --ui-border-muted: var(--ui-color-neutral-200);
+  --ui-border-accented: var(--ui-color-neutral-300);
+  --ui-border-inverted: var(--ui-color-neutral-900);
+}
+
diff --git a/web/bun.lock b/web/bun.lock
index 1517b04..ca2df90 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -4,6 +4,7 @@
     "": {
       "name": "nuxt-app",
       "dependencies": {
+        "@internationalized/date": "^3.8.0",
         "@nuxt/eslint": "1.3.0",
         "@nuxt/test-utils": "3.18.0",
         "@nuxt/ui": "3.1.1",
diff --git a/web/nuxt.config.ts b/web/nuxt.config.ts
index 221e451..3deba03 100644
--- a/web/nuxt.config.ts
+++ b/web/nuxt.config.ts
@@ -2,8 +2,9 @@
 export default defineNuxtConfig({
 	compatibilityDate: '2024-11-01',
 	devtools: { enabled: true },
+	css: ['~/assets/css/main.css'],
 	modules: ['@nuxt/eslint', '@nuxt/test-utils', '@nuxt/ui'],
 	app: {
 		baseURL: process.env.BASE_URL,
-	},
+	}
 })
diff --git a/web/package.json b/web/package.json
index 37b92a0..08d7c44 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@internationalized/date": "^3.8.0",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/test-utils": "3.18.0",
     "@nuxt/ui": "3.1.1",
diff --git a/web/pages/index.vue b/web/pages/index.vue
index af75d86..84991c4 100644
--- a/web/pages/index.vue
+++ b/web/pages/index.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { UButton } from '#components';
+
 
 </script>
 
 <template>
 	<div>
-		indx
+		<UButton>Click me</UButton>
 	</div>
 </template>