diff --git a/assets/vue/app/domain/manga/presentation/components/MangaHeader.vue b/assets/vue/app/domain/manga/presentation/components/MangaHeader.vue
index d31f1b5..fa1fe01 100644
--- a/assets/vue/app/domain/manga/presentation/components/MangaHeader.vue
+++ b/assets/vue/app/domain/manga/presentation/components/MangaHeader.vue
@@ -1,46 +1,46 @@
 <template>
     <div class="shadow-lg text-white">
-        <div class="relative h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${manga.imageUrl}')` }">
+        <div class="relative h-64 sm:h-80 lg:h-96 bg-cover bg-center" :style="{ backgroundImage: `url('${manga.imageUrl}')` }">
             <div class="absolute inset-0 bg-black opacity-50"></div>
-            <div class="absolute inset-0 flex flex-row justify-center p-4">
-                <!-- Image de couverture -->
-                <div class="hidden mr-12 xl:block 2xl:block">
-                    <img :src="manga.thumbnailUrl" :alt="manga.title" class="max-w-72 max-h-72 ml-4" />
+            <div class="absolute inset-0 flex flex-col lg:flex-row justify-center p-4 lg:p-6">
+                <!-- Image de couverture - cachée sur mobile, visible sur desktop -->
+                <div class="hidden lg:block mr-12">
+                    <img :src="manga.thumbnailUrl" :alt="manga.title" class="max-w-48 lg:max-w-72 max-h-48 lg:max-h-72" />
                 </div>
 
                 <!-- Informations du manga -->
-                <div class="flex flex-col">
-                    <div class="flex items-center mb-4">
-                        <BookmarkIcon class="h-8 w-8 text-white" />
-                        <h1 class="text-3xl font-bold ml-4">{{ manga.title }}</h1>
+                <div class="flex flex-col space-y-3 lg:space-y-4 flex-1 min-w-0">
+                    <div class="flex items-start lg:items-center space-x-3">
+                        <BookmarkIcon class="h-6 w-6 lg:h-8 lg:w-8 text-white flex-shrink-0 mt-1 lg:mt-0" />
+                        <h1 class="text-xl sm:text-2xl lg:text-3xl font-bold leading-tight">{{ manga.title }}</h1>
                     </div>
 
-                    <div class="flex items-center mb-4">
-                        <span class="mr-4">{{ manga.year }}</span>
+                    <div class="flex flex-wrap items-center gap-4 text-sm lg:text-base">
+                        <span>{{ manga.year }}</span>
                         <span>Chapitres: {{ manga.totalChapters }}</span>
                     </div>
 
-                    <div class="flex items-center mb-4">
-                        <FolderIcon class="h-6 w-6 text-gray-400 mr-2" />
-                        <span class="truncate">/media/mangas/{{ manga.title }} ({{ manga.year }})</span>
-                        <span class="ml-auto bg-green-600 py-1 px-2 rounded">{{ manga.status || 'Terminé' }}</span>
-                    </div>
-
-                    <div class="flex items-center mb-4">
-                        <template v-if="manga.tags?.length">
-                            <template v-for="(tag, index) in manga.tags.slice(0, 5)" :key="index">
-                                <span class="bg-gray-700 py-1 px-2 rounded-sm mr-2">{{ tag }}</span>
-                            </template>
-                            <span v-if="manga.tags.length > 5" class="bg-gray-700 py-1 px-2 rounded-sm mr-2">...</span>
-                        </template>
-                    </div>
-
-                    <div class="mb-4">
-                        <div class="flex items-center mb-2">
-                            <HeartIcon class="h-6 w-6 text-red-500 mr-2" />
-                            <span>{{ manga.rating }}</span>
+                    <div class="flex items-start lg:items-center space-x-2">
+                        <FolderIcon class="h-5 w-5 lg:h-6 lg:w-6 text-gray-400 flex-shrink-0 mt-0.5 lg:mt-0" />
+                        <div class="flex flex-col lg:flex-row lg:items-center lg:space-x-4 min-w-0 flex-1">
+                            <span class="truncate text-sm lg:text-base">/media/mangas/{{ manga.title }} ({{ manga.year }})</span>
+                            <span class="bg-green-600 py-1 px-2 rounded text-xs lg:text-sm self-start lg:self-auto">{{ manga.status || 'Terminé' }}</span>
                         </div>
-                        <p class="line-clamp-5">{{ manga.description }}</p>
+                    </div>
+
+                    <div class="flex flex-wrap gap-2" v-if="manga.tags?.length">
+                        <template v-for="(tag, index) in manga.tags.slice(0, isMobile ? 3 : 5)" :key="index">
+                            <span class="bg-gray-700 py-1 px-2 rounded-sm text-xs lg:text-sm">{{ tag }}</span>
+                        </template>
+                        <span v-if="manga.tags.length > (isMobile ? 3 : 5)" class="bg-gray-700 py-1 px-2 rounded-sm text-xs lg:text-sm">...</span>
+                    </div>
+
+                    <div class="space-y-2">
+                        <div class="flex items-center space-x-2">
+                            <HeartIcon class="h-5 w-5 lg:h-6 lg:w-6 text-red-500" />
+                            <span class="text-sm lg:text-base">{{ manga.rating }}</span>
+                        </div>
+                        <p class="text-sm lg:text-base line-clamp-3 lg:line-clamp-5">{{ manga.description }}</p>
                     </div>
                 </div>
             </div>
@@ -50,6 +50,7 @@
 
 <script setup>
     import { BookmarkIcon, FolderIcon, HeartIcon } from '@heroicons/vue/24/outline';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
     defineProps({
         manga: {
@@ -57,10 +58,37 @@
             required: true
         }
     });
+
+    // Détection du mobile
+    const windowWidth = ref(window.innerWidth);
+    const isMobile = computed(() => windowWidth.value < 1024);
+
+    const updateWindowWidth = () => {
+        windowWidth.value = window.innerWidth;
+    };
+
+    onMounted(() => {
+        window.addEventListener('resize', updateWindowWidth);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateWindowWidth);
+    });
 </script>
 
 <style scoped>
     /* Pour s'assurer que line-clamp fonctionne */
+    @supports (-webkit-line-clamp: 3) {
+        .line-clamp-3 {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+    }
+
     @supports (-webkit-line-clamp: 5) {
         .line-clamp-5 {
             overflow: hidden;
diff --git a/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue b/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue
index 6dc9b1a..d8b4ab7 100644
--- a/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue
+++ b/assets/vue/app/domain/manga/presentation/components/MangaVolume.vue
@@ -1,55 +1,62 @@
 <template>
     <div class="bg-white rounded-sm shadow mb-2">
         <!-- En-tête du volume -->
-        <div class="relative flex items-center justify-between bg-white p-4 rounded-t-sm">
-            <!-- Partie gauche -->
-            <div class="flex items-center space-x-4">
-                <BookmarkIcon class="h-8 w-8 text-gray-500" />
-                <h2 class="text-xl font-semibold w-28">Volume {{ String(volume.number).padStart(2, '0') }}</h2>
-                <div class="flex items-center w-16">
-                    <span
-                        :class="[
-                            'px-2 py-1 text-sm rounded w-full text-center text-white',
-                            {
-                                'bg-red-500': volume.downloadedChapter === 0,
-                                'bg-yellow-500':
-                                    volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
-                                'bg-green-500': volume.downloadedChapter === volume.totalChapter
-                            }
-                        ]">
-                        {{ volume.downloadedChapter }}/{{ volume.totalChapter }}
-                    </span>
+        <div class="relative bg-white p-3 sm:p-4 rounded-t-sm">
+            <!-- Layout mobile/desktop -->
+            <div class="flex items-center justify-between">
+                <!-- Partie gauche -->
+                <div class="flex items-center space-x-1 sm:space-x-4 flex-1 min-w-0">
+                    <BookmarkIcon class="h-6 w-6 sm:h-8 sm:w-8 text-gray-500 flex-shrink-0" />
+                    <h2 class="text-lg sm:text-xl font-semibold w-20 sm:w-28 flex-shrink-0">Vol {{ String(volume.number).padStart(2, '0') }}</h2>
+                    <div class="flex items-center">
+                        <span
+                            :class="[
+                                'px-2 py-1 text-xs sm:text-sm rounded text-center text-white min-w-[3rem] sm:min-w-[4rem]',
+                                {
+                                    'bg-red-500': volume.downloadedChapter === 0,
+                                    'bg-yellow-500':
+                                        volume.downloadedChapter < volume.totalChapter && volume.downloadedChapter > 0,
+                                    'bg-green-500': volume.downloadedChapter === volume.totalChapter
+                                }
+                            ]">
+                            {{ volume.downloadedChapter }}/{{ volume.totalChapter }}
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Actions du volume -->
+                <div class="flex items-center space-x-1 sm:space-x-2">
+                    <button
+                        class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center"
+                        @click="handleSearch"
+                        :class="{
+                            'text-yellow-500 cursor-wait': isSearching,
+                            'text-gray-500 hover:text-green-500': !isSearching
+                        }">
+                        <MagnifyingGlassIcon class="h-5 w-5 sm:h-6 sm:w-6" />
+                    </button>
+                    <button
+                        class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center"
+                        @click="handleDownload"
+                        :class="{
+                            'text-yellow-500 cursor-wait': isDownloading,
+                            'text-gray-500 hover:text-green-500': !isDownloading
+                        }"
+                        :disabled="isDownloading">
+                        <ArrowDownTrayIcon class="h-5 w-5 sm:h-6 sm:w-6" />
+                    </button>
                 </div>
             </div>
 
-            <!-- Bouton toggle -->
+            <!-- Bouton toggle centré -->
             <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <component
-                    :is="isOpen ? ChevronUpIcon : ChevronDownIcon"
-                    class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
-                    @click="toggleVolume" />
-            </div>
-
-            <!-- Actions du volume -->
-            <div class="flex space-x-2 text-xl text-bold">
                 <button
-                    class="w-8 text-center"
-                    @click="handleSearch"
-                    :class="{
-                        'text-yellow-500 cursor-wait': isSearching,
-                        'text-gray-500 hover:text-green-500': !isSearching
-                    }">
-                    <MagnifyingGlassIcon class="h-6 w-6" />
-                </button>
-                <button
-                    class="w-8 text-center"
-                    @click="handleDownload"
-                    :class="{
-                        'text-yellow-500 cursor-wait': isDownloading,
-                        'text-gray-500 hover:text-green-500': !isDownloading
-                    }"
-                    :disabled="isDownloading">
-                    <ArrowDownTrayIcon class="h-6 w-6" />
+                    @click="toggleVolume"
+                    class="w-8 sm:w-10 h-8 sm:h-10 flex items-center justify-center">
+                    <component
+                        :is="isOpen ? ChevronUpIcon : ChevronDownIcon"
+                        class="h-5 w-5 sm:h-6 sm:w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
+                    />
                 </button>
             </div>
         </div>
@@ -58,10 +65,12 @@
         <MangaChapterList v-show="isOpen" :chapters="volume.chapters" :manga-slug="mangaSlug" :manga-id="mangaId" />
 
         <!-- Chevron de fermeture -->
-        <div v-show="isOpen" class="flex justify-center p-2 py bg-white rounded-b-sm">
-            <ChevronUpIcon
-                class="h-6 w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
-                @click="toggleVolume" />
+        <div v-show="isOpen" class="flex justify-center p-2 bg-white rounded-b-sm">
+            <button @click="toggleVolume" class="w-8 h-8 flex items-center justify-center">
+                <ChevronUpIcon
+                    class="h-5 w-5 sm:h-6 sm:w-6 bg-gray-400 rounded-full p-1 text-white hover:bg-green-500 cursor-pointer"
+                />
+            </button>
         </div>
     </div>
 </template>
diff --git a/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue b/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue
index a81f7aa..e04be61 100644
--- a/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue
+++ b/assets/vue/app/domain/manga/presentation/components/MangaVolumeList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="p-4">
+    <div>
         <MangaVolume
             v-for="(volume, index) in volumes"
             :key="volume.number"
diff --git a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
index ae83d46..3635841 100644
--- a/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/MangaDetails.vue
@@ -1,47 +1,52 @@
 <template>
-    <div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-        {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
-    </div>
-
-    <div v-else-if="currentManga" class="relative">
-        <!-- Composant invisible qui écoute les mises à jour Mercure -->
-        <MercureListener :manga-id="mangaId" />
-
-        <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
-
-        <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500">
-            <ArrowPathIcon class="h-5 w-5 animate-spin" />
-        </div>
-        <MangaHeader :manga="currentManga" />
-
-        <!-- Section Volumes -->
-        <div class="mt-8">
-            <div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
-                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
-            </div>
-            <div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-                {{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
-            </div>
-            <MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" :manga-id="mangaId" />
+    <div class="min-h-screen bg-gray-50">
+        <div v-if="errorDetails" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mx-4 mt-4">
+            {{ errorDetails.message || 'Une erreur est survenue lors du chargement des détails.' }}
         </div>
 
-        <!-- Modale des sources préférées -->
-        <MangaPreferredSourcesModal
-            :is-open="isPreferredSourcesModalOpen"
-            :sources="preferredSources"
-            :is-loading="isLoadingSources"
-            :error="sourcesError"
-            :is-saving="isSavingSources"
-            @close="closePreferredSourcesModal"
-            @save="savePreferredSources"
-        />
-    </div>
+        <div v-else-if="currentManga" class="relative">
+            <!-- Composant invisible qui écoute les mises à jour Mercure -->
+            <MercureListener :manga-id="mangaId" />
 
-    <div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
-        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
-    </div>
+            <Toolbar :config="toolbarConfig" class="sticky top-16 z-10" />
 
-    <div v-else class="text-center text-gray-500 py-10"> Aucun manga sélectionné ou trouvé. </div>
+            <div v-if="isRefreshingDetails" class="absolute top-2 right-2 text-gray-500 z-20">
+                <ArrowPathIcon class="h-5 w-5 animate-spin" />
+            </div>
+
+            <MangaHeader :manga="currentManga" />
+
+            <!-- Section Volumes avec conteneur mobile -->
+            <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 pb-8">
+                <div v-if="isLoadingVolumes" class="flex justify-center items-center h-32">
+                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                </div>
+                <div v-else-if="errorVolumes" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+                    {{ errorVolumes.message || 'Une erreur est survenue lors du chargement des volumes.' }}
+                </div>
+                <MangaVolumeList v-else :volumes="volumes" :manga-slug="currentManga.slug" :manga-id="mangaId" />
+            </div>
+
+            <!-- Modale des sources préférées -->
+            <MangaPreferredSourcesModal
+                :is-open="isPreferredSourcesModalOpen"
+                :sources="preferredSources"
+                :is-loading="isLoadingSources"
+                :error="sourcesError"
+                :is-saving="isSavingSources"
+                @close="closePreferredSourcesModal"
+                @save="savePreferredSources"
+            />
+        </div>
+
+        <div v-else-if="isLoadingDetails" class="flex justify-center items-center h-64">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+        </div>
+
+        <div v-else class="text-center text-gray-500 py-10 px-4">
+            Aucun manga sélectionné ou trouvé.
+        </div>
+    </div>
 </template>
 
 <script setup>
diff --git a/assets/vue/app/shared/components/ui/ToolbarButton.vue b/assets/vue/app/shared/components/ui/ToolbarButton.vue
index 3517e6a..e685e31 100644
--- a/assets/vue/app/shared/components/ui/ToolbarButton.vue
+++ b/assets/vue/app/shared/components/ui/ToolbarButton.vue
@@ -2,19 +2,18 @@
     <button
         @click="$emit('click')"
         :class="[
-            'flex flex-col items-center justify-around min-h-14 w-min ml-4 rounded group text-white',
+            'flex flex-col items-center justify-center min-h-12 sm:min-h-14 w-min px-2 sm:ml-4 ml-1 rounded group text-white',
             active
                 ? 'text-green-500' // Style actif
                 : 'hover:text-green-500' // Effet de survol
         ]"
         :aria-label="label || 'Toolbar button'">
-        <component v-if="icon" :is="icon" class="h-6 w-6" />
+        <component v-if="icon" :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" />
         <ToolbarLabel :label="label" />
     </button>
 </template>
 
 <script setup>
-    import { computed } from 'vue';
     import ToolbarLabel from './ToolbarLabel.vue';
 
     defineProps({
diff --git a/assets/vue/app/shared/components/ui/ToolbarDropdown.vue b/assets/vue/app/shared/components/ui/ToolbarDropdown.vue
index cef3617..b605fa1 100644
--- a/assets/vue/app/shared/components/ui/ToolbarDropdown.vue
+++ b/assets/vue/app/shared/components/ui/ToolbarDropdown.vue
@@ -3,11 +3,11 @@
         <div class="h-full">
             <MenuButton
                 :class="[
-                    'flex flex-col items-center justify-around min-h-14 w-min ml-4 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
+                    'flex flex-col items-center justify-center min-h-12 sm:min-h-14 w-min px-2 sm:ml-4 ml-1 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
                     active ? 'text-green-500' : ''
                 ]"
                 :aria-label="label || 'Options'">
-                <component v-if="icon" :is="icon" class="h-6 w-6" aria-hidden="true" />
+                <component v-if="icon" :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" aria-hidden="true" />
                 <ToolbarLabel :label="label" />
             </MenuButton>
         </div>
@@ -32,8 +32,8 @@
 </template>
 
 <script setup>
-    import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue';
-    import ToolbarLabel from './ToolbarLabel.vue';
+    import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
+import ToolbarLabel from './ToolbarLabel.vue';
 
     defineProps({
         icon: {
diff --git a/assets/vue/app/shared/components/ui/ToolbarLabel.vue b/assets/vue/app/shared/components/ui/ToolbarLabel.vue
index eb5f6f1..1e00e25 100644
--- a/assets/vue/app/shared/components/ui/ToolbarLabel.vue
+++ b/assets/vue/app/shared/components/ui/ToolbarLabel.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-if="label" class="text-xs">{{ label }}</span>
+    <span v-if="label" class="text-xs hidden sm:inline">{{ label }}</span>
 </template>
 
 <script setup>
diff --git a/src/Domain/Manga/Infrastructure/ApiPlatform/Dto/MangaDetail.php b/src/Domain/Manga/Infrastructure/ApiPlatform/Dto/MangaDetail.php
index 376d228..748f551 100644
--- a/src/Domain/Manga/Infrastructure/ApiPlatform/Dto/MangaDetail.php
+++ b/src/Domain/Manga/Infrastructure/ApiPlatform/Dto/MangaDetail.php
@@ -18,6 +18,7 @@ readonly class MangaDetail
         public string $status,
         public ?string $externalId,
         public ?string $imageUrl,
+        public ?string $thumbnailUrl,
         public ?float $rating
     ) {}
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/Domain/Manga/Infrastructure/ApiPlatform/State/Provider/GetMangaStateProvider.php b/src/Domain/Manga/Infrastructure/ApiPlatform/State/Provider/GetMangaStateProvider.php
index 69d20b2..9741a5f 100644
--- a/src/Domain/Manga/Infrastructure/ApiPlatform/State/Provider/GetMangaStateProvider.php
+++ b/src/Domain/Manga/Infrastructure/ApiPlatform/State/Provider/GetMangaStateProvider.php
@@ -30,6 +30,7 @@ readonly class GetMangaStateProvider implements ProviderInterface
             status: $response->status,
             externalId: $response->externalId,
             imageUrl: $response->imageUrl,
+            thumbnailUrl: $response->thumbnailUrl,
             rating: $response->rating
         );
     }