diff --git a/src/store/ui.ts b/src/store/ui.ts
new file mode 100644
index 0000000..0361bcf
--- /dev/null
+++ b/src/store/ui.ts
@@ -0,0 +1,31 @@
+import { create } from "zustand";
+
+export type Theme = "light" | "dark" | "system";
+
+interface UiState {
+  theme: Theme;
+  sidebarWidth: number;
+  sidebarCollapsed: boolean;
+  setTheme: (t: Theme) => void;
+  setSidebarWidth: (w: number) => void;
+  toggleSidebar: () => void;
+}
+
+export const useUi = create<UiState>((set) => ({
+  theme: "system",
+  sidebarWidth: 240,
+  sidebarCollapsed: false,
+  setTheme: (theme) => set({ theme }),
+  setSidebarWidth: (sidebarWidth) => set({ sidebarWidth }),
+  toggleSidebar: () =>
+    set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
+}));
+
+/** Apply the theme by toggling the `dark` class on <html>. */
+export function applyTheme(theme: Theme) {
+  const prefersDark = window.matchMedia(
+    "(prefers-color-scheme: dark)",
+  ).matches;
+  const dark = theme === "dark" || (theme === "system" && prefersDark);
+  document.documentElement.classList.toggle("dark", dark);
+}