diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cb32240..8911165 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -170,6 +170,7 @@ function App() {
     }));
   };
 
+  return (
     <div className="mt-2 dark:bg-black dark:text-white">
       {IS_RUNNING_ON_CLOUD && <PicoBadge settings={settings} />}
       {IS_RUNNING_ON_CLOUD && (
diff --git a/frontend/src/components/OutputSettingsSection.tsx b/frontend/src/components/OutputSettingsSection.tsx
index 43318f8..cc927a5 100644
--- a/frontend/src/components/OutputSettingsSection.tsx
+++ b/frontend/src/components/OutputSettingsSection.tsx
@@ -50,7 +50,7 @@ function generateDisplayString(settings: OutputSettings) {
     settings.css === CSSOption.TAILWIND
   ) {
     return (
-      <div>
+      <div className="text-gray-800 dark:text-white">
         Generating <span className="font-bold">React</span> +{" "}
         <span className="font-bold">Tailwind</span> code
       </div>
@@ -60,7 +60,7 @@ function generateDisplayString(settings: OutputSettings) {
     settings.css === CSSOption.TAILWIND
   ) {
     return (
-      <div className="text-gray-800">
+      <div className="text-gray-800 dark:text-white">
         Generating <span className="font-bold">HTML</span> +{" "}
         <span className="font-bold">Tailwind</span> code
       </div>
@@ -70,7 +70,7 @@ function generateDisplayString(settings: OutputSettings) {
     settings.css === CSSOption.BOOTSTRAP
   ) {
     return (
-      <div>
+      <div className="text-gray-800 dark:text-white">
         Generating <span className="font-bold">HTML</span> +{" "}
         <span className="font-bold">Bootstrap</span> code
       </div>
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 9d9a70b..361d194 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -16,6 +16,12 @@ import { Input } from "./ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
 import { capitalize } from "../lib/utils";
 import { IS_RUNNING_ON_CLOUD } from "../config";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./ui/accordion";
 
 interface Props {
   settings: Settings;
@@ -42,7 +48,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
 
         {/* Access code */}
         {IS_RUNNING_ON_CLOUD && (
-          <div className="flex flex-col space-y-4 bg-slate-300 p-4 rounded">
+          <div className="flex flex-col space-y-4 bg-slate-300 p-4 rounded dark:text-white dark:bg-slate-800">
             <Label htmlFor="access-code">
               <div>Access Code</div>
               <div className="font-light mt-1 leading-relaxed">
@@ -51,7 +57,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
             </Label>
 
             <Input
-              id="access-code"
+              id="access-code dark:border-gray-700 dark:bg-gray-800 dark:text-white"
               placeholder="Enter your Screenshot to Code access code"
               value={settings.accessCode || ""}
               onChange={(e) =>
@@ -103,67 +109,90 @@ function SettingsDialog({ settings, setSettings }: Props) {
             }
           />
 
-          <Label htmlFor="screenshot-one-api-key">
-            <div>
-              ScreenshotOne API key (optional - only needed if you want to use
-              URLs directly instead of taking the screenshot yourself)
-            </div>
-            <div className="font-light mt-2 leading-relaxed">
-              Only stored in your browser. Never stored on servers.{" "}
-              <a
-                href="https://screenshotone.com?via=screenshot-to-code"
-                className="underline"
-                target="_blank"
-              >
-                Get 100 screenshots/mo for free.
-              </a>
-            </div>
-          </Label>
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
+              <AccordionContent>
+                <Label htmlFor="screenshot-one-api-key">
+                  <div className="leading-normal font-normal text-xs">
+                    If you want to use URLs directly instead of taking the
+                    screenshot yourself, add a ScreenshotOne API key.{" "}
+                    <a
+                      href="https://screenshotone.com?via=screenshot-to-code"
+                      className="underline"
+                      target="_blank"
+                    >
+                      Get 100 screenshots/mo for free.
+                    </a>
+                  </div>
+                </Label>
 
-          <Input
-            id="screenshot-one-api-key"
-            placeholder="ScreenshotOne API key"
-            value={settings.screenshotOneApiKey || ""}
-            onChange={(e) =>
-              setSettings((s) => ({
-                ...s,
-                screenshotOneApiKey: e.target.value,
-              }))
-            }
-          />
-          <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>
-          <div>
-            <Select // Use the custom Select component here
-              name="editor-theme"
-              value={settings.editorTheme}
-              onValueChange={(value) => handleThemeChange(value as EditorTheme)}
-            >
-              <SelectTrigger className="w-[180px]">
-                {capitalize(settings.editorTheme)}
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="cobalt">Cobalt</SelectItem>
-                <SelectItem value="espresso">Espresso</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+                <Input
+                  id="screenshot-one-api-key"
+                  className="mt-2"
+                  placeholder="ScreenshotOne API key"
+                  value={settings.screenshotOneApiKey || ""}
+                  onChange={(e) =>
+                    setSettings((s) => ({
+                      ...s,
+                      screenshotOneApiKey: e.target.value,
+                    }))
+                  }
+                />
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="item-1">
+              <AccordionTrigger>Theme Settings</AccordionTrigger>
+              <AccordionContent className="space-y-4 flex flex-col">
+                <div className="flex items-center justify-between">
+                  <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>
+                </div>
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="editor-theme">
+                    <div>Code Editor Theme</div>
+                  </Label>
+                  <div>
+                    <Select // Use the custom Select component here
+                      name="editor-theme"
+                      value={settings.editorTheme}
+                      onValueChange={(value) =>
+                        handleThemeChange(value as EditorTheme)
+                      }
+                    >
+                      <SelectTrigger className="w-[180px]">
+                        {capitalize(settings.editorTheme)}
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="cobalt">Cobalt</SelectItem>
+                        <SelectItem value="espresso">Espresso</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         </div>
 
         <DialogFooter>