diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts
index 5ab4d71a..f53fd737 100644
--- a/ui/frontend/build_src/src/api/index.ts
+++ b/ui/frontend/build_src/src/api/index.ts
@@ -31,6 +31,7 @@ export const getSaveDirectory = async () => {
   return data[0];
 };
 
+export const KEY_CONFIG = "config";
 export const getConfig = async () => {
   const response = await fetch(`${API_URL}/app_config`);
   console.log("getConfig response", response);
@@ -38,6 +39,22 @@ export const getConfig = async () => {
   return data;
 };
 
+export const KEY_TOGGLE_CONFIG = "toggle_config";
+export const toggleBetaConfig = async (branch: string) => {
+  const response = await fetch(`${API_URL}/app_config`, {
+    method: "POST",
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      'update_branch': branch
+    })
+
+  });
+  const data = await response.json();
+  return data;
+};
+
 /**
  * post a new request for an image
  */
diff --git a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx
new file mode 100644
index 00000000..477a0f4f
--- /dev/null
+++ b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+import {
+  KEY_CONFIG, getConfig,
+  KEY_TOGGLE_CONFIG, toggleBetaConfig
+} from '../../../api';
+
+
+
+
+
+export default function BetaMode() {
+
+  // gate for the toggle
+  const [shouldSetCofig, setShouldSetConfig] = useState(false);
+  // next branch to get 
+  const [branchToGetNext, setBranchToGetNext] = useState("beta");
+
+  // our basic config
+  const { status: configStatus, data: configData } = useQuery([KEY_CONFIG], getConfig);
+  const queryClient = useQueryClient()
+
+  // the toggle config
+  const { status: toggleStatus, data: toggleData } = useQuery([KEY_TOGGLE_CONFIG], () => toggleBetaConfig(branchToGetNext), {
+    enabled: shouldSetCofig,
+  });
+
+
+  // this is also in the Header Display
+  // TODO: make this a custom hook
+  useEffect(() => {
+
+    if (configStatus === 'success') {
+
+      const { update_branch } = configData;
+
+      if (update_branch === 'main') {
+        setBranchToGetNext('beta');
+      } else {
+        // setIsBeta(true);
+        setBranchToGetNext('main');
+      }
+
+    }
+  }, [configStatus, configData]);
+
+
+  useEffect(() => {
+    if (toggleStatus === 'success') {
+
+      if (toggleData[0] == 'OK') {
+        // force a refetch of the config
+        queryClient.invalidateQueries([KEY_CONFIG])
+      }
+      setShouldSetConfig(false);
+
+    }
+  }, [toggleStatus, toggleData, setShouldSetConfig]);
+
+
+
+  return (
+    <label>
+      <input
+        type="checkbox"
+        checked={branchToGetNext === 'main'}
+        onChange={(e) => {
+          setShouldSetConfig(true);
+        }}
+      />
+      Enable Beta Mode
+    </label>
+  );
+}
+
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
index 7c18ceec..6a4ce5e8 100644
--- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
@@ -11,6 +11,8 @@ import PropertySettings from "./propertySettings";
 import WorkflowSettings from "./workflowSettings";
 import GpuSettings from "./gpuSettings";
 
+import BetaMode from "../../../molecules/betaMode";
+
 function SettingsList() {
   return (
     <ul className={AdvancedSettingsList}>
@@ -26,6 +28,11 @@ function SettingsList() {
       <li className={AdvancedSettingItem}>
         <GpuSettings />
       </li>
+
+      <li className={AdvancedSettingItem}>
+        <BetaMode />
+      </li>
+
     </ul>
   );
 }
diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
index 13631a7a..933e0985 100644
--- a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
+++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import { useQuery } from "@tanstack/react-query";
-import { getConfig } from "../../../api";
+import { KEY_CONFIG, getConfig } from "../../../api";
 
 import StatusDisplay from "./statusDisplay";
 
@@ -10,12 +10,14 @@ import {
 } from "./headerDisplay.css.ts";
 
 export default function HeaderDisplay() {
-  // but this will be moved to the status display when it is created
-  const { status, data } = useQuery(["config"], getConfig);
+
+  const { status, data } = useQuery([KEY_CONFIG], getConfig);
 
   const [version, setVersion] = useState("2.1.0");
   const [release, setRelease] = useState("");
 
+  // this is also in the Beta Mode
+  // TODO: make this a custom hook
   useEffect(() => {
     if (status === "success") {
       // TODO also pass down the actual version
diff --git a/ui/frontend/build_src/src/styles/recipes/index.css.ts b/ui/frontend/build_src/src/styles/recipes/index.css.ts
index e69de29b..1907d2db 100644
--- a/ui/frontend/build_src/src/styles/recipes/index.css.ts
+++ b/ui/frontend/build_src/src/styles/recipes/index.css.ts
@@ -0,0 +1,24 @@
+import { recipe } from '@vanilla-extract/recipes';
+
+
+export const button = recipe({
+  variants: {
+    color: {
+      neutral: { background: 'whitesmoke' },
+      brand: { background: 'blueviolet' },
+      accent: { background: 'slateblue' }
+    },
+    size: {
+      small: { padding: 12 },
+      medium: { padding: 16 },
+      large: { padding: 24 }
+    }
+  }
+});
+
+
+// export const card = recipe({
+//   variants: {
+//     color: {
+
+//       alt: { background: 'whitesmoke' },