diff --git a/playground/app.config.ts b/playground/app.config.ts
index 09936edf..ee42683c 100644
--- a/playground/app.config.ts
+++ b/playground/app.config.ts
@@ -1,6 +1,6 @@
 export default defineAppConfig({
   ui: {
-    primary: 'green',
+    primary: 'sky',
     button: {
       base: 'font-semibold',
       variants: {
diff --git a/playground/app.vue b/playground/app.vue
index e3da49e2..968afa14 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,16 +1,23 @@
 <script setup lang="ts">
+useHead({
+  bodyAttrs: {
+    class: 'antialiased font-sans text-gray-900 dark:text-white bg-white dark:bg-gray-900'
+  }
+})
+
+const components = ['button', 'tooltip']
 </script>
 
 <template>
-  <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="/" />
+  <UProvider>
+    <UContainer class="min-h-screen flex flex-col gap-4 items-center justify-center">
+      <div class="flex gap-1">
+        <ULink v-for="component in components" :key="component" :to="`/${component}`" active-class="text-primary capitalize text-sm">
+          {{ component }}
+        </ULink>
+      </div>
 
-      <UButton color="green" trailing-icon="i-heroicons-light-bulb" to="/about" label="/about" />
-
-      <UButton color="red" label="Button" class="font-bold" />
-    </div>
-
-    <NuxtPage />
-  </UContainer>
+      <NuxtPage />
+    </UContainer>
+  </UProvider>
 </template>
\ No newline at end of file
diff --git a/playground/pages/[...slug].vue b/playground/pages/[...slug].vue
deleted file mode 100644
index 4f942585..00000000
--- a/playground/pages/[...slug].vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div class="text-primary-500">
-    Route: {{ $route.path }}
-  </div>
-</template>
-
-<script setup lang="ts">
-</script>
\ No newline at end of file
diff --git a/playground/pages/button.vue b/playground/pages/button.vue
new file mode 100644
index 00000000..6e8927c1
--- /dev/null
+++ b/playground/pages/button.vue
@@ -0,0 +1,9 @@
+<template>
+  <div class="flex gap-1">
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="outline" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="soft" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="ghost" />
+    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="link" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
new file mode 100644
index 00000000..aaddf417
--- /dev/null
+++ b/playground/pages/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>
\ No newline at end of file
diff --git a/playground/pages/tooltip.vue b/playground/pages/tooltip.vue
new file mode 100644
index 00000000..00e65f52
--- /dev/null
+++ b/playground/pages/tooltip.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="flex gap-1">
+    <UTooltip text="Tooltip">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
+    </UTooltip>
+  </div>
+</template>
\ No newline at end of file