diff --git a/src/app/app.component.html b/src/app/app.component.html
index 8239c6b..436615b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="min-h-screen bg-gray-100">
+<div class="min-h-screen bg-gray-100 dark:bg-gray-950">
   <app-navbar *ngIf="authService.isAdmin()"></app-navbar>
   <main>
     <router-outlet></router-outlet>
diff --git a/src/app/components/config/config.component.html b/src/app/components/config/config.component.html
index e345b8e..3092e23 100644
--- a/src/app/components/config/config.component.html
+++ b/src/app/components/config/config.component.html
@@ -1,18 +1,18 @@
 <div class="container mx-auto px-4 py-8">
-  <h1 class="text-3xl font-bold mb-8">Configuration du système</h1>
+  <h1 class="text-3xl font-bold mb-8 dark:text-white">Configuration du système</h1>
 
   <form (ngSubmit)="saveConfig()" class="max-w-2xl">
-    <div class="bg-white rounded-lg shadow p-6 space-y-6">
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-6">
       <!-- Taille maximale des images -->
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
           Taille maximale des images (MB)
         </label>
         <input
           type="number"
           [(ngModel)]="config.max_image_size"
           name="max_image_size"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
           [ngModel]="config.max_image_size / (1024 * 1024)"
           (ngModelChange)="config.max_image_size = $event * 1024 * 1024"
         />
@@ -20,33 +20,33 @@
 
       <!-- Nombre maximum d'images par pin -->
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
           Nombre maximum d'images par pin
         </label>
         <input
           type="number"
           [(ngModel)]="config.max_images_per_pin"
           name="max_images_per_pin"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
         />
       </div>
 
       <!-- Nombre maximum d'images par utilisateur -->
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
           Nombre maximum d'images par utilisateur
         </label>
         <input
           type="number"
           [(ngModel)]="config.max_images_per_user"
           name="max_images_per_user"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
         />
       </div>
 
       <!-- Types d'images autorisés -->
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
           Types d'images autorisés
         </label>
         <div class="space-y-2">
@@ -55,12 +55,12 @@
               type="text"
               [value]="imgType"
               [name]="'type_' + imgType"
-              class="flex-1 px-3 py-2 border border-gray-300 rounded-md"
+              class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
             />
             <button
               type="button"
               (click)="removeImageType(imgType)"
-              class="ml-2 text-red-600 hover:text-red-800"
+              class="ml-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
             >
               Supprimer
             </button>
@@ -68,7 +68,7 @@
           <button
             type="button"
             (click)="addImageType()"
-            class="text-blue-600 hover:text-blue-800"
+            class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
           >
             + Ajouter un type
           </button>
@@ -77,27 +77,27 @@
 
       <!-- Nombre maximum de pins par utilisateur -->
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
           Nombre maximum de pins par utilisateur
         </label>
         <input
           type="number"
           [(ngModel)]="config.max_pins_per_user"
           name="max_pins_per_user"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
         />
       </div>
 
       <!-- Nombre maximum d'amis par utilisateur -->
       <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
           Nombre maximum d'amis par utilisateur
         </label>
         <input
           type="number"
           [(ngModel)]="config.max_friends_per_user"
           name="max_friends_per_user"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md"
+          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
         />
       </div>
 
@@ -106,13 +106,13 @@
         <button
           type="button"
           (click)="resetConfig()"
-          class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"
+          class="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600"
         >
           Réinitialiser
         </button>
         <button
           type="submit"
-          class="px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700"
+          class="px-4 py-2 text-white bg-blue-600 dark:bg-blue-700 rounded-md hover:bg-blue-700 dark:hover:bg-blue-800"
         >
           Enregistrer
         </button>
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index bc9da8d..c9ffe82 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -1,52 +1,52 @@
 <div class="container mx-auto px-4 py-8">
-  <h1 class="text-3xl font-bold mb-8">Tableau de bord</h1>
+  <h1 class="text-3xl font-bold mb-8 dark:text-white">Tableau de bord</h1>
 
   <!-- Statistiques générales -->
   <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-    <div class="bg-white rounded-lg shadow p-6">
-      <h2 class="text-xl font-semibold mb-4">Utilisateurs</h2>
-      <p class="text-3xl font-bold">{{ stats.general.total_users }}</p>
-      <p class="text-sm text-gray-500">+{{ stats.last_30_days.new_users }} ce mois</p>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h2 class="text-xl font-semibold mb-4 dark:text-white">Utilisateurs</h2>
+      <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_users }}</p>
+      <p class="text-sm text-gray-500 dark:text-gray-400">+{{ stats.last_30_days.new_users }} ce mois</p>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-6">
-      <h2 class="text-xl font-semibold mb-4">Pins</h2>
-      <p class="text-3xl font-bold">{{ stats.general.total_pins }}</p>
-      <p class="text-sm text-gray-500">+{{ stats.last_30_days.new_pins }} ce mois</p>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h2 class="text-xl font-semibold mb-4 dark:text-white">Pins</h2>
+      <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_pins }}</p>
+      <p class="text-sm text-gray-500 dark:text-gray-400">+{{ stats.last_30_days.new_pins }} ce mois</p>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-6">
-      <h2 class="text-xl font-semibold mb-4">Images</h2>
-      <p class="text-3xl font-bold">{{ stats.general.total_images }}</p>
-      <p class="text-sm text-gray-500">+{{ stats.last_30_days.new_images }} ce mois</p>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h2 class="text-xl font-semibold mb-4 dark:text-white">Images</h2>
+      <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_images }}</p>
+      <p class="text-sm text-gray-500 dark:text-gray-400">+{{ stats.last_30_days.new_images }} ce mois</p>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-6">
-      <h2 class="text-xl font-semibold mb-4">Amis</h2>
-      <p class="text-3xl font-bold">{{ stats.general.total_friends }}</p>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h2 class="text-xl font-semibold mb-4 dark:text-white">Amis</h2>
+      <p class="text-3xl font-bold dark:text-white">{{ stats.general.total_friends }}</p>
     </div>
 
-    <div class="bg-white rounded-lg shadow p-6">
-      <h2 class="text-xl font-semibold mb-4">Stockage</h2>
-      <p class="text-3xl font-bold">{{ formatBytes(stats.general.total_storage_bytes) }}</p>
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h2 class="text-xl font-semibold mb-4 dark:text-white">Stockage</h2>
+      <p class="text-3xl font-bold dark:text-white">{{ formatBytes(stats.general.total_storage_bytes) }}</p>
     </div>
   </div>
 
   <!-- Top utilisateurs -->
-  <div class="bg-white rounded-lg shadow p-6 mb-8">
-    <h2 class="text-xl font-semibold mb-4">Top utilisateurs</h2>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
+    <h2 class="text-xl font-semibold mb-4 dark:text-white">Top utilisateurs</h2>
     <div class="overflow-x-auto">
       <table class="min-w-full">
         <thead>
           <tr>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre de pins</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Utilisateur</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Nombre de pins</th>
           </tr>
         </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
-          <tr *ngFor="let user of stats.top_users">
-            <td class="px-6 py-4 whitespace-nowrap">{{ user.username }}</td>
-            <td class="px-6 py-4 whitespace-nowrap">{{ user.pin_count }}</td>
+        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+          <tr *ngFor="let user of stats.top_users" class="dark:hover:bg-gray-700">
+            <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ user.username }}</td>
+            <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ user.pin_count }}</td>
           </tr>
         </tbody>
       </table>
@@ -54,20 +54,20 @@
   </div>
 
   <!-- Top pins partagés -->
-  <div class="bg-white rounded-lg shadow p-6">
-    <h2 class="text-xl font-semibold mb-4">Top pins partagés</h2>
+  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+    <h2 class="text-xl font-semibold mb-4 dark:text-white">Top pins partagés</h2>
     <div class="overflow-x-auto">
       <table class="min-w-full">
         <thead>
           <tr>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Titre</th>
-            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nombre de partages</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Titre</th>
+            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Nombre de partages</th>
           </tr>
         </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
-          <tr *ngFor="let pin of stats.top_shared_pins">
-            <td class="px-6 py-4 whitespace-nowrap">{{ pin.title }}</td>
-            <td class="px-6 py-4 whitespace-nowrap">{{ pin.share_count }}</td>
+        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+          <tr *ngFor="let pin of stats.top_shared_pins" class="dark:hover:bg-gray-700">
+            <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ pin.title }}</td>
+            <td class="px-6 py-4 whitespace-nowrap dark:text-white">{{ pin.share_count }}</td>
           </tr>
         </tbody>
       </table>
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 0e815b2..f55d30b 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,36 +1,39 @@
-<nav class="bg-white shadow">
-  <div class="container mx-auto px-4">
-    <div class="flex justify-between h-16">
-      <div class="flex">
-        <div class="flex-shrink-0 flex items-center">
-          <a routerLink="/" class="text-xl font-bold text-gray-800">MemoryMap Admin</a>
-        </div>
-        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-          <a
-            routerLink="/dashboard"
-            routerLinkActive="border-blue-500 text-gray-900"
-            [routerLinkActiveOptions]="{exact: true}"
-            class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
-          >
-            Tableau de bord
-          </a>
-          <a
-            routerLink="/config"
-            routerLinkActive="border-blue-500 text-gray-900"
-            class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300"
-          >
-            Configuration
-          </a>
-        </div>
-      </div>
-      <div class="flex items-center">
-        <button
-          (click)="logout()"
-          class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
-        >
-          Déconnexion
-        </button>
+<nav class="bg-white border-gray-200 dark:bg-gray-900">
+  <div class="max-w-screen-2xl flex flex-wrap items-center justify-between mx-auto p-2">
+    <a routerLink="/" class="flex items-center rtl:space-x-reverse">
+      <img src="./logo.png" class="h-14" alt="Memory Map Logo" />
+      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white hidden lg:inline">Memory Map Admin</span>
+    </a>
+
+    <!-- Menu principal -->
+    <div class="w-full lg:flex lg:w-auto lg:order-1 lg:flex-1 pl-10">
+      <div class="w-full flex flex-col lg:flex-row">
+        <ul class="w-full flex p-4 flex-col lg:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 lg:space-x-8 lg:flex-row lg:mt-0 lg:border-0 lg:bg-white dark:bg-gray-800 lg:dark:bg-gray-900 dark:border-gray-700">
+          <li>
+            <a routerLink="/dashboard" 
+               routerLinkActive="text-blue-700 dark:text-blue-500"
+               [routerLinkActiveOptions]="{exact: true}"
+               class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
+              Tableau de bord
+            </a>
+          </li>
+          <li>
+            <a routerLink="/config"
+               routerLinkActive="text-blue-700 dark:text-blue-500"
+               class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">
+              Configuration
+            </a>
+          </li>
+        </ul>
       </div>
     </div>
+
+    <!-- Bouton de déconnexion -->
+    <div class="flex lg:order-2">
+      <button (click)="logout()"
+              class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
+        Déconnexion
+      </button>
+    </div>
   </div>
 </nav> 
\ No newline at end of file