diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5bf973b..4680208 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -51,6 +51,7 @@ function App() {
       isImageGenerationEnabled: true,
       editorTheme: EditorTheme.COBALT,
       isTermOfServiceAccepted: false,
+      accessCode: null,
     },
     "setting"
   );
diff --git a/frontend/src/components/SettingsDialog.tsx b/frontend/src/components/SettingsDialog.tsx
index 215b0ea..8a8be03 100644
--- a/frontend/src/components/SettingsDialog.tsx
+++ b/frontend/src/components/SettingsDialog.tsx
@@ -15,6 +15,7 @@ import { Label } from "./ui/label";
 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";
 
 interface Props {
   settings: Settings;
@@ -38,6 +39,31 @@ function SettingsDialog({ settings, setSettings }: Props) {
         <DialogHeader>
           <DialogTitle className="mb-4">Settings</DialogTitle>
         </DialogHeader>
+
+        {/* Access code */}
+        {IS_RUNNING_ON_CLOUD && (
+          <div className="flex flex-col space-y-4 bg-slate-300 p-4 rounded">
+            <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"
+              placeholder="Enter your Screenshot to Code access code"
+              value={settings.accessCode || ""}
+              onChange={(e) =>
+                setSettings((s) => ({
+                  ...s,
+                  accessCode: e.target.value,
+                }))
+              }
+            />
+          </div>
+        )}
+
         <div className="flex items-center space-x-2">
           <Label htmlFor="image-generation">
             <div>DALL-E Placeholder Image Generation</div>
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index dd432d8..42b06f9 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -25,6 +25,7 @@ export interface Settings {
   isImageGenerationEnabled: boolean;
   editorTheme: EditorTheme;
   isTermOfServiceAccepted: boolean; // Only relevant for hosted version
+  accessCode: string | null; // Only relevant for hosted version
 }
 
 export enum AppState {