diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 397ce02..f101f83 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -104,7 +104,21 @@ function SettingsDialog({ settings, setSettings }: Props) {
               }))
             }
           />
-
+          <Label htmlFor="app-theme">
+            <div>App Theme</div>
+          </Label>
+          <div>
+            <button
+            className="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
+            onClick={() => {
+              document.querySelector("div.mt-2")?.classList.toggle("dark"); // enable dark mode for sidebar
+              document.body.classList.toggle("dark");
+              document.querySelector('div[role="presentation"]')?.classList.toggle("dark"); // enable dark mode for upload container
+            }}
+            >
+              Toggle dark mode
+            </button>
+          </div>
           <Label htmlFor="editor-theme">
             <div>Editor Theme</div>
           </Label>