diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 1afa02e..ea23bc8 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -22,6 +22,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "./ui/accordion";
+import AccessCodeSection from "./settings/AccessCodeSection";
 
 interface Props {
   settings: Settings;
@@ -48,26 +49,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 dark:text-white dark:bg-slate-800">
-            <Label htmlFor="access-code">
-              <div>Access Code</div>
-              <div className="font-light mt-1 leading-relaxed">
-                Buy an access code.
-              </div>
-            </Label>
-
-            <Input
-              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) =>
-                setSettings((s) => ({
-                  ...s,
-                  accessCode: e.target.value,
-                }))
-              }
-            />
-          </div>
+          <AccessCodeSection settings={settings} setSettings={setSettings} />
         )}
 
         <div className="flex items-center space-x-2">
diff --git a/frontend/src/components/settings/AccessCodeSection.tsx b/frontend/src/components/settings/AccessCodeSection.tsx
new file mode 100644
index 0000000..0dada1f
--- /dev/null
+++ b/frontend/src/components/settings/AccessCodeSection.tsx
@@ -0,0 +1,36 @@
+import { Settings } from "../../types";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+
+interface Props {
+  settings: Settings;
+  setSettings: React.Dispatch<React.SetStateAction<Settings>>;
+}
+
+function AccessCodeSection({ settings, setSettings }: Props) {
+  return (
+    <div className="flex flex-col space-y-4 bg-slate-200 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">
+          Buy an access code.
+        </div>
+      </Label>
+
+      <Input
+        id="access-code"
+        className="border-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+        placeholder="Enter your Screenshot to Code access code"
+        value={settings.accessCode || ""}
+        onChange={(e) =>
+          setSettings((s) => ({
+            ...s,
+            accessCode: e.target.value,
+          }))
+        }
+      />
+    </div>
+  );
+}
+
+export default AccessCodeSection;