diff --git a/packages/react/src/MainLayout.tsx b/packages/react/src/MainLayout.tsx
index f0feab0..da8a21d 100644
--- a/packages/react/src/MainLayout.tsx
+++ b/packages/react/src/MainLayout.tsx
@@ -1,51 +1,78 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import { Button } from "../components/Button";
 import RouteObject from "./RouteObject";
 import { Toaster } from "@components/Toast";
+import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
 
-type Theme = "light" | "dark";
+type Theme = "light" | "dark" | "system";
 
 function ThemeButton() {
-  const [theme, _setTheme] = useState<Theme>("light");
-  function setTheme(t: Theme) {
-    _setTheme(t);
-    document.documentElement.classList.toggle("dark", t === "dark");
-  }
+  const [theme, setTheme] = useState<Theme>(
+    (localStorage.getItem("theme") as Theme) || "system"
+  );
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.documentElement.classList.toggle("system", theme === "system");
+    localStorage.setItem("theme", theme);
+  }, [theme]);
 
   return (
-    <Button
-      preset="ghost"
-      size="icon"
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-    >
-      {/* material-symbols:light-mode */}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1.2em"
-        height="1.2em"
-        viewBox="0 0 24 24"
-        className="dark:hidden"
-      >
-        <path
-          fill="currentColor"
-          d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z"
-        />
-      </svg>
-      {/* material-symbols:dark-mode */}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="1.2em"
-        height="1.2em"
-        viewBox="0 0 24 24"
-        className="hidden dark:block"
-      >
-        <path
-          fill="currentColor"
-          d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21"
-        />
-      </svg>
-    </Button>
+    <Popover>
+      <PopoverTrigger>
+        <Button preset="ghost" size="icon">
+          {/* material-symbols:light-mode */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2em"
+            height="1.2em"
+            viewBox="0 0 24 24"
+            className="dark:hidden"
+          >
+            <path
+              fill="currentColor"
+              d="M12 17q-2.075 0-3.537-1.463T7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17m-7-4H1v-2h4zm18 0h-4v-2h4zM11 5V1h2v4zm0 18v-4h2v4zM6.4 7.75L3.875 5.325L5.3 3.85l2.4 2.5zm12.3 12.4l-2.425-2.525L17.6 16.25l2.525 2.425zM16.25 6.4l2.425-2.525L20.15 5.3l-2.5 2.4zM3.85 18.7l2.525-2.425L7.75 17.6l-2.425 2.525z"
+            />
+          </svg>
+          {/* material-symbols:dark-mode */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1.2em"
+            height="1.2em"
+            viewBox="0 0 24 24"
+            className="hidden dark:block"
+          >
+            <path
+              fill="currentColor"
+              d="M12 21q-3.75 0-6.375-2.625T3 12t2.625-6.375T12 3q.35 0 .688.025t.662.075q-1.025.725-1.638 1.888T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q1.375 0 2.525-.613T20.9 10.65q.05.325.075.662T21 12q0 3.75-2.625 6.375T12 21"
+            />
+          </svg>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent anchor="bottomLeft" className="w-32">
+        <Button
+          preset="ghost"
+          onClick={() => setTheme("light")}
+          className="w-full px-2 py-1.5 text-sm"
+        >
+          Light
+        </Button>
+        <Button
+          preset="ghost"
+          onClick={() => setTheme("dark")}
+          className="w-full px-2 py-1.5 text-sm"
+        >
+          Dark
+        </Button>
+        <Button
+          preset="ghost"
+          onClick={() => setTheme("system")}
+          className="w-full px-2 py-1.5 text-sm"
+        >
+          System
+        </Button>
+      </PopoverContent>
+    </Popover>
   );
 }