diff --git a/playground/app.vue b/playground/app.vue
index 63182f3a..4f458369 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -49,10 +49,10 @@ function upperName(name: string) {
 
 <template>
   <UApp :toaster="appConfig.toaster">
-    <div class="min-h-screen w-screen flex flex-col items-center justify-center overflow-y-auto bg-white dark:bg-gray-900" vaul-drawer-wrapper>
+    <div class="min-h-screen w-screen overflow-hidden flex flex-col items-center justify-center overflow-y-auto bg-white dark:bg-gray-900" vaul-drawer-wrapper>
       <UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2" />
 
-      <div class="flex-1 flex flex-col justify-center py-12">
+      <div class="flex-1 flex flex-col items-center justify-center w-full py-12 px-4">
         <NuxtPage />
       </div>
     </div>
diff --git a/playground/pages/navigation-menu.vue b/playground/pages/navigation-menu.vue
index a227eafb..07bb6399 100644
--- a/playground/pages/navigation-menu.vue
+++ b/playground/pages/navigation-menu.vue
@@ -36,7 +36,7 @@ const links = [
 </script>
 
 <template>
-  <div class="flex flex-col gap-12 w-4xl">
+  <div class="flex flex-col gap-12 w-full max-w-4xl">
     <UNavigationMenu :links="links" class="border-b border-gray-200 dark:border-gray-800" />
 
     <UNavigationMenu :links="links" orientation="vertical" class="w-48" />