diff --git a/ui/src/components/ThemeSwitcher.tsx b/ui/src/components/ThemeSwitcher.tsx
new file mode 100644
index 0000000..1bff4f1
--- /dev/null
+++ b/ui/src/components/ThemeSwitcher.tsx
@@ -0,0 +1,60 @@
+import { Switch } from "../ui-library/switch";
+import { twMerge } from "tailwind-merge";
+import { useTheme } from "../contexts/ThemeContext";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <Switch
+      isSelected={theme === "dark"}
+      onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
+      className={twMerge(
+        "p-2 rounded-full",
+        "bg-slate-100 dark:bg-slate-800",
+        "border border-slate-200 dark:border-slate-700",
+        "hover:bg-slate-200 dark:hover:bg-slate-700",
+        "transition-colors"
+      )}
+    >
+      <div className="flex items-center gap-2">
+        {theme === "dark" ? (
+          <svg
+            className="w-4 h-4 text-slate-600 dark:text-slate-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+            />
+          </svg>
+        ) : (
+          <svg
+            className="w-4 h-4 text-slate-600 dark:text-slate-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+            />
+          </svg>
+        )}
+        <span className="text-sm text-slate-600 dark:text-slate-400">
+          {theme === "dark"
+            ? "Mode sombre"
+            : theme === "light"
+            ? "Mode clair"
+            : "Mode système"}
+        </span>
+      </div>
+    </Switch>
+  );
+}
diff --git a/ui/src/components/header.tsx b/ui/src/components/header.tsx
index 9cbc99c..bc246ad 100644
--- a/ui/src/components/header.tsx
+++ b/ui/src/components/header.tsx
@@ -1,13 +1,10 @@
 import { Button } from "../ui-library/button";
-import { Switch } from "../ui-library/switch";
 import { twMerge } from "tailwind-merge";
 import logo from "../assets/icon.jpg";
 import { Link } from "react-router-dom";
-import { useTheme } from "../contexts/ThemeContext";
+import { ThemeSwitcher } from "./ThemeSwitcher";
 
 export function Header() {
-  const { theme, setTheme } = useTheme();
-
   return (
     <>
       <header className="sticky top-0 z-50 w-full border-b border-emerald-200 dark:border-emerald-900/30 bg-emerald-100/90 dark:bg-[#0a1f0a]/90 backdrop-blur-lg">
@@ -72,56 +69,7 @@ export function Header() {
                     S&apos;inscrire
                   </Button>
                 </Link>
-                <Switch
-                  isSelected={theme === "dark"}
-                  onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
-                  className={twMerge(
-                    "p-2 rounded-full",
-                    "bg-slate-100 dark:bg-slate-800",
-                    "border border-slate-200 dark:border-slate-700",
-                    "hover:bg-slate-200 dark:hover:bg-slate-700",
-                    "transition-colors"
-                  )}
-                >
-                  <div className="flex items-center gap-2">
-                    {theme === "dark" ? (
-                      <svg
-                        className="w-4 h-4 text-slate-600 dark:text-slate-400"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
-                        />
-                      </svg>
-                    ) : (
-                      <svg
-                        className="w-4 h-4 text-slate-600 dark:text-slate-400"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
-                        />
-                      </svg>
-                    )}
-                    <span className="text-sm text-slate-600 dark:text-slate-400">
-                      {theme === "dark"
-                        ? "Mode sombre"
-                        : theme === "light"
-                        ? "Mode clair"
-                        : "Mode système"}
-                    </span>
-                  </div>
-                </Switch>
+                <ThemeSwitcher />
               </div>
             </div>
           </nav>