diff --git a/app/app.vue b/app/app.vue
index 8ddedd1..e8947b9 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,17 +1,13 @@
 <template>
   <div>
     <NuxtRouteAnnouncer />
-    <NuxtPage />
-    <SearchModal />
-    <Loader />
-    <Player />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
   </div>
 </template>
 
 <script setup>
-import SearchModal from '~/components/SearchModal.vue'
-import Player from '~/components/player.vue'
-import Loader from '~/components/Loader.vue'
 import { useUiStore } from '~/store/ui'
 import { usePlayerStore } from '~/store/player'
 import { watch, computed } from 'vue'
diff --git a/layouts/default.vue b/app/layouts/default.vue
similarity index 80%
rename from layouts/default.vue
rename to app/layouts/default.vue
index 5f5f828..e2e8a72 100644
--- a/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -2,7 +2,7 @@
   <div class="w-full min-h-screen flex flex-col items-center bg-gray-50">
     <!-- Header avec logo -->
     <header class="w-full py-4 px-6 bg-white shadow-sm">
-      <div class="max-w-7xl mx-auto w-full">
+      <div class="max-w-7xl mx-auto w-full flex justify-center">
         <div @click="navigateToHome" class="cursor-pointer inline-block">
           <logo />
         </div>
@@ -15,7 +15,9 @@
     </main>
 
     <!-- Player de musique fixe en bas -->
-    <player class="w-full border-t border-gray-200" />
+    <SearchModal />
+    <Loader />
+    <Player class="w-full border-t border-gray-200" />
   </div>
 </template>
 
diff --git a/app/pages/box/[id].vue b/app/pages/box/[id].vue
index 04a1c37..5a335af 100644
--- a/app/pages/box/[id].vue
+++ b/app/pages/box/[id].vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <boxes />
-  </div>
+  <boxes />
 </template>
 
 <script setup lang="ts">
@@ -25,7 +23,7 @@ onMounted(async () => {
   const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
   if (typeof idParam === 'string' && idParam.length > 0) {
     uiStore.selectBox(idParam)
-    
+
     // Lire automatiquement la box si on est sur la page d'une box
     const box = dataStore.boxes.find(b => b.id === idParam)
     if (box) {
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c4b1588..a094760 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <boxes />
-  </div>
+  <boxes />
 </template>
 
 <script setup>
diff --git a/app/pages/track/[id].vue b/app/pages/track/[id].vue
index aff108e..06b5ced 100644
--- a/app/pages/track/[id].vue
+++ b/app/pages/track/[id].vue
@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <boxes />
-  </div>
+  <boxes />
 </template>
 
 <script setup>