diff --git a/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue b/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
index b552955..df0de6b 100644
--- a/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
+++ b/assets/vue/app/domain/setting/presentation/pages/UserPreferencesPage.vue
@@ -13,13 +13,13 @@
         </div>
 
         <!-- Apparence -->
-        <section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
-            <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
+            <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
                 {{ t('preferences.sections.appearance') }}
             </h2>
-            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+            <div class="space-y-1">
                 <!-- Thème -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.theme.label') }}</label>
                     <select
                         :value="store.theme"
@@ -31,7 +31,7 @@
                     </select>
                 </div>
                 <!-- Langue -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.language.label') }}</label>
                     <select
                         :value="store.language"
@@ -45,13 +45,13 @@
         </section>
 
         <!-- Affichage collection -->
-        <section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
-            <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
+            <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
                 {{ t('preferences.sections.collection') }}
             </h2>
-            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+            <div class="space-y-1">
                 <!-- Vue par défaut -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.defaultView.label') }}</label>
                     <div class="flex gap-2">
                         <button
@@ -67,7 +67,7 @@
                     </div>
                 </div>
                 <!-- Mangas par page -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.itemsPerPage.label') }}</label>
                     <div class="flex gap-2">
                         <button
@@ -80,7 +80,7 @@
                     </div>
                 </div>
                 <!-- Tri par défaut -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.sortBy.label') }}</label>
                     <select
                         :value="store.sortBy"
@@ -95,13 +95,13 @@
         </section>
 
         <!-- Lecture -->
-        <section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
-            <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
+            <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
                 {{ t('preferences.sections.reading') }}
             </h2>
-            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+            <div class="space-y-1">
                 <!-- Direction de lecture -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.readingDirection.label') }}</label>
                     <select
                         :value="store.readingDirection"
@@ -112,7 +112,7 @@
                     </select>
                 </div>
                 <!-- Mode d'affichage -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.readingMode.label') }}</label>
                     <select
                         :value="store.readingMode"
@@ -124,7 +124,7 @@
                     </select>
                 </div>
                 <!-- Auto plein écran -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <div>
                         <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.autoFullscreen.label') }}</p>
                         <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('preferences.autoFullscreen.description') }}</p>
@@ -138,7 +138,7 @@
                     </button>
                 </div>
                 <!-- Auto-hide header -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <div>
                         <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.autoHideHeaderReader.label') }}</p>
                         <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('preferences.autoHideHeaderReader.description') }}</p>
@@ -155,13 +155,13 @@
         </section>
 
         <!-- Notifications -->
-        <section class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-4">
-            <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider px-6 pt-5 pb-3">
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mb-6">
+            <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
                 {{ t('preferences.sections.notifications') }}
             </h2>
-            <div class="divide-y divide-gray-100 dark:divide-gray-700">
+            <div class="space-y-1">
                 <!-- Durée des toasts -->
-                <div class="flex items-center justify-between px-6 py-4">
+                <div class="flex items-center justify-between py-3">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('preferences.toastDuration.label') }}</label>
                     <div class="flex gap-2">
                         <button