diff --git a/playground/app.config.ts b/playground/app.config.ts
index ece5376c..09936edf 100644
--- a/playground/app.config.ts
+++ b/playground/app.config.ts
@@ -1,5 +1,6 @@
 export default defineAppConfig({
   ui: {
+    primary: 'green',
     button: {
       base: 'font-semibold',
       variants: {
diff --git a/playground/app.vue b/playground/app.vue
index ae6d0b65..e3da49e2 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,8 +1,16 @@
+<script setup lang="ts">
+</script>
+
 <template>
-  <div class="max-w-7xl mx-auto py-24">
-    <UButton color="green" icon="i-heroicons-rocket-launch" to="/" label="/" />
-    <UButton color="red" icon="i-heroicons-rocket-launch" to="/about" label="/about" square />
+  <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center">
+    <div class="flex gap-1">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="/" />
+
+      <UButton color="green" trailing-icon="i-heroicons-light-bulb" to="/about" label="/about" />
+
+      <UButton color="red" label="Button" class="font-bold" />
+    </div>
 
     <NuxtPage />
-  </div>
+  </UContainer>
 </template>
\ No newline at end of file
diff --git a/playground/pages/[...slug].vue b/playground/pages/[...slug].vue
index 9382da64..4f942585 100644
--- a/playground/pages/[...slug].vue
+++ b/playground/pages/[...slug].vue
@@ -1,5 +1,7 @@
 <template>
-  <div>{{ $route.path }}</div>
+  <div class="text-primary-500">
+    Route: {{ $route.path }}
+  </div>
 </template>
 
 <script setup lang="ts">