diff --git a/.changeset/rare-sour-safe.md b/.changeset/rare-sour-safe.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/rare-sour-safe.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
index ac9df7d908b..a17147343c4 100644
--- a/packages/clerk-js/sandbox/app.ts
+++ b/packages/clerk-js/sandbox/app.ts
@@ -43,18 +43,32 @@ type AvailableComponent = (typeof AVAILABLE_COMPONENTS)[number];
 const AVAILABLE_SCENARIOS = Object.keys(scenarios) as (keyof typeof scenarios)[];
 type AvailableScenario = (typeof AVAILABLE_SCENARIOS)[number];
 
-function fillLocalizationSelect() {
-  const select = document.getElementById('localizationSelect') as HTMLSelectElement;
+const COLOR_DEFAULTS: Record<string, string> = {
+  colorPrimary: '#2F3037',
+  colorNeutral: '#000000',
+  colorBackground: '#ffffff',
+  colorPrimaryForeground: '#ffffff',
+  colorDanger: '#EF4444',
+  colorSuccess: '#22C543',
+  colorWarning: '#F36B16',
+  colorForeground: '#212126',
+  colorMutedForeground: '#747686',
+  colorInputForeground: '#000000',
+  colorInput: '#ffffff',
+  colorShimmer: '#ffffff',
+};
 
-  for (const locale of AVAILABLE_LOCALES) {
-    if (locale === 'enUS') {
-      select.add(new Option(locale, locale, true, true));
-      continue;
-    }
+const VARIABLE_DEFAULTS: Record<string, string> = {
+  ...COLOR_DEFAULTS,
+  spacing: '1rem',
+  borderRadius: '0.375rem',
+};
 
-    select.add(new Option(locale, locale));
-  }
-}
+const OTHER_DEFAULTS = {
+  localization: 'enUS',
+  elevation: 'raised' as const,
+  devWarnings: true,
+};
 
 function getScenario(): (() => MockScenario) | null {
   const scenarioName = localStorage.getItem(`${COMPONENT_PROPS_NAMESPACE}-scenario`);
@@ -175,21 +189,10 @@ function mountIndex(element: HTMLDivElement) {
   element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
-function mountOpenSignInButton(element: HTMLDivElement, props: any) {
+function mountOpenButton(element: HTMLDivElement, label: string, openFn: (props: any) => void, props: any) {
   const button = document.createElement('button');
-  button.textContent = 'Open Sign In';
-  button.onclick = () => {
-    Clerk?.openSignIn(props);
-  };
-  element.appendChild(button);
-}
-
-function mountOpenSignUpButton(element: HTMLDivElement, props: any) {
-  const button = document.createElement('button');
-  button.textContent = 'Open Sign Up';
-  button.onclick = () => {
-    Clerk?.openSignUp(props);
-  };
+  button.textContent = label;
+  button.onclick = () => openFn(props);
   element.appendChild(button);
 }
 
@@ -202,155 +205,143 @@ function addCurrentRouteIndicator(currentRoute: string) {
   link.setAttribute('aria-current', 'page');
 }
 
-function appearanceVariableOptions() {
+async function initControls() {
   assertClerkIsLoaded(Clerk);
 
-  const resetVariablesBtn = document.getElementById('resetVariablesBtn');
-
-  const variableInputIds = [
-    'colorPrimary',
-    'colorNeutral',
-    'colorBackground',
-    'colorPrimaryForeground',
-    'colorForeground',
-    'colorDanger',
-    'colorSuccess',
-    'colorWarning',
-    'colorMutedForeground',
-    'colorInputForeground',
-    'colorInput',
-    'colorShimmer',
-    'spacing',
-    'borderRadius',
-  ] as const;
-
-  const variableInputs = variableInputIds.reduce(
-    (acc, id) => {
-      const element = document.getElementById(id) as HTMLInputElement | null;
-      if (!element) {
-        throw new Error(`Could not find input element with id: ${id}`);
-      }
-      acc[id] = element;
-      return acc;
-    },
-    {} as Record<(typeof variableInputIds)[number], HTMLInputElement>,
-  );
+  const { Pane } = (await import(
+    /* webpackIgnore: true */ 'https://cdn.jsdelivr.net/npm/tweakpane@4.0.5/dist/tweakpane.js'
+  )) as any;
 
-  Object.entries(variableInputs).forEach(([key, input]) => {
-    const savedColor = sessionStorage.getItem(key);
-    if (savedColor) {
-      input.value = savedColor;
+  const PARAMS: Record<string, any> = {};
+  for (const [key, def] of Object.entries(VARIABLE_DEFAULTS)) {
+    PARAMS[key] = sessionStorage.getItem(key) ?? def;
+  }
+  PARAMS.baseTheme = sessionStorage.getItem('baseTheme') ?? '';
+  PARAMS.darkMode = document.documentElement.classList.contains('dark');
+  PARAMS.localization = sessionStorage.getItem('localization') ?? OTHER_DEFAULTS.localization;
+  PARAMS.elevation = sessionStorage.getItem('elevation') ?? OTHER_DEFAULTS.elevation;
+  PARAMS.devWarnings = sessionStorage.getItem('devWarnings') !== 'off';
+
+  const pane = new Pane({ title: 'Controls', expanded: false });
+
+  const applyVariables = () => {
+    const vars: Record<string, string> = {};
+    for (const key of Object.keys(VARIABLE_DEFAULTS)) {
+      sessionStorage.setItem(key, PARAMS[key]);
+      vars[key] = PARAMS[key];
     }
-  });
-
-  const updateVariables = () => {
     void Clerk.__internal_updateProps({
       appearance: {
-        // Preserve existing appearance properties like baseTheme
         ...Clerk.__internal_getOption('appearance'),
-        variables: Object.fromEntries(
-          Object.entries(variableInputs).map(([key, input]) => {
-            sessionStorage.setItem(key, input.value);
-            return [key, input.value];
-          }),
-        ),
+        variables: vars,
       },
     });
   };
 
-  Object.values(variableInputs).forEach(input => {
-    input.addEventListener('change', updateVariables);
-  });
-
-  resetVariablesBtn?.addEventListener('click', () => {
-    Object.values(variableInputs).forEach(input => {
-      input.value = input.defaultValue;
+  const applyTheme = () => {
+    sessionStorage.setItem('baseTheme', PARAMS.baseTheme);
+    const currentAppearance = Clerk.__internal_getOption('appearance') ?? {};
+    void Clerk.__internal_updateProps({
+      appearance: {
+        ...currentAppearance,
+        theme: PARAMS.baseTheme ? themes[PARAMS.baseTheme] : undefined,
+      },
     });
-    updateVariables();
-  });
-
-  return { updateVariables };
-}
-
-function otherOptions() {
-  assertClerkIsLoaded(Clerk);
-
-  const resetOtherOptionsBtn = document.getElementById('resetOtherOptionsBtn');
-
-  const otherOptionsInputs: Record<string, HTMLSelectElement> = {
-    localization: document.getElementById('localizationSelect') as HTMLSelectElement,
   };
 
-  const elevationSelect = document.getElementById('elevationSelect') as HTMLSelectElement;
-  const devWarningsToggle = document.getElementById('devWarningsToggle') as HTMLInputElement;
-
-  Object.entries(otherOptionsInputs).forEach(([key, input]) => {
-    const savedValue = sessionStorage.getItem(key);
-    if (savedValue) {
-      input.value = savedValue;
-    }
-  });
-
-  const savedElevation = sessionStorage.getItem('elevation');
-  if (savedElevation) {
-    elevationSelect.value = savedElevation;
-  }
-
-  const savedDevWarnings = sessionStorage.getItem('devWarnings');
-  if (savedDevWarnings !== null) {
-    devWarningsToggle.checked = savedDevWarnings === 'on';
-  }
-
-  const updateOtherOptions = () => {
+  const applyLocalization = () => {
+    sessionStorage.setItem('localization', PARAMS.localization);
     void Clerk.__internal_updateProps({
-      options: Object.fromEntries(
-        Object.entries(otherOptionsInputs).map(([key, input]) => {
-          sessionStorage.setItem(key, input.value);
-
-          if (key === 'localization') {
-            return [key, l[input.value as keyof typeof l]];
-          }
-
-          return [key, input.value];
-        }),
-      ),
+      options: { localization: l[PARAMS.localization as keyof typeof l] },
     });
   };
 
-  const updateAppearanceOptions = () => {
-    sessionStorage.setItem('elevation', elevationSelect.value);
-    sessionStorage.setItem('devWarnings', devWarningsToggle.checked ? 'on' : 'off');
+  const applyAppearanceOptions = () => {
+    sessionStorage.setItem('elevation', PARAMS.elevation);
+    sessionStorage.setItem('devWarnings', PARAMS.devWarnings ? 'on' : 'off');
     const currentAppearance = Clerk.__internal_getOption('appearance') ?? {};
     void Clerk.__internal_updateProps({
       appearance: {
         ...currentAppearance,
         options: {
           ...(currentAppearance as any).options,
-          elevation: elevationSelect.value as 'raised' | 'flush',
-          unsafe_disableDevelopmentModeWarnings: !devWarningsToggle.checked,
+          elevation: PARAMS.elevation as 'raised' | 'flush',
+          unsafe_disableDevelopmentModeWarnings: !PARAMS.devWarnings,
         },
       },
     });
   };
 
-  Object.values(otherOptionsInputs).forEach(input => {
-    input.addEventListener('change', updateOtherOptions);
+  // Theme folder
+  const themeFolder = pane.addFolder({ title: 'Theme', expanded: false });
+  themeFolder
+    .addBinding(PARAMS, 'baseTheme', {
+      options: {
+        default: '',
+        dark: 'dark',
+        shadesOfPurple: 'shadesOfPurple',
+        neobrutalism: 'neobrutalism',
+        shadcn: 'shadcn',
+      },
+    })
+    .on('change', applyTheme);
+  themeFolder.addButton({ title: 'Reset' }).on('click', () => {
+    PARAMS.baseTheme = '';
+    sessionStorage.removeItem('baseTheme');
+    pane.refresh();
+    applyTheme();
   });
 
-  elevationSelect.addEventListener('change', updateAppearanceOptions);
-  devWarningsToggle.addEventListener('change', updateAppearanceOptions);
+  // Variables folder
+  const varFolder = pane.addFolder({ title: 'Variables' });
+  for (const key of Object.keys(COLOR_DEFAULTS)) {
+    varFolder.addBinding(PARAMS, key).on('change', applyVariables);
+  }
+  varFolder.addBinding(PARAMS, 'spacing').on('change', applyVariables);
+  varFolder.addBinding(PARAMS, 'borderRadius').on('change', applyVariables);
+  varFolder.addButton({ title: 'Reset' }).on('click', () => {
+    Object.assign(PARAMS, VARIABLE_DEFAULTS);
+    pane.refresh();
+    applyVariables();
+  });
 
-  resetOtherOptionsBtn?.addEventListener('click', () => {
-    otherOptionsInputs.localization.value = 'enUS';
-    elevationSelect.value = 'raised';
-    devWarningsToggle.checked = true;
+  // Options folder
+  const otherFolder = pane.addFolder({ title: 'Options', expanded: false });
+  const localeOptions: Record<string, string> = {};
+  for (const locale of AVAILABLE_LOCALES) {
+    localeOptions[locale] = locale;
+  }
+  otherFolder.addBinding(PARAMS, 'localization', { options: localeOptions }).on('change', applyLocalization);
+  otherFolder
+    .addBinding(PARAMS, 'elevation', { options: { raised: 'raised' as const, flush: 'flush' as const } })
+    .on('change', applyAppearanceOptions);
+  otherFolder.addBinding(PARAMS, 'devWarnings').on('change', applyAppearanceOptions);
+  otherFolder.addButton({ title: 'Reset' }).on('click', () => {
+    PARAMS.localization = OTHER_DEFAULTS.localization;
+    PARAMS.elevation = OTHER_DEFAULTS.elevation;
+    PARAMS.devWarnings = OTHER_DEFAULTS.devWarnings;
+    sessionStorage.removeItem('localization');
     sessionStorage.removeItem('elevation');
     sessionStorage.removeItem('devWarnings');
-    updateOtherOptions();
-    updateAppearanceOptions();
+    pane.refresh();
+    applyLocalization();
+    applyAppearanceOptions();
+  });
+
+  // Page folder
+  const pageFolder = pane.addFolder({ title: 'Page', expanded: false });
+  pageFolder.addBinding(PARAMS, 'darkMode', { label: 'Dark mode' }).on('change', (ev: any) => {
+    document.documentElement.classList.toggle('dark', ev.value);
+    localStorage.setItem('clerk-js-sandbox-dark-mode', ev.value ? 'on' : 'off');
+  });
+  pageFolder.addButton({ title: 'Reset' }).on('click', () => {
+    PARAMS.darkMode = false;
+    document.documentElement.classList.remove('dark');
+    localStorage.removeItem('clerk-js-sandbox-dark-mode');
+    pane.refresh();
   });
 
-  return { updateOtherOptions, updateAppearanceOptions };
+  return { pane, applyVariables, applyTheme, applyLocalization, applyAppearanceOptions };
 }
 
 const themes: Record<string, unknown> = {
@@ -360,77 +351,6 @@ const themes: Record<string, unknown> = {
   shadcn,
 };
 
-function themeSelector() {
-  assertClerkIsLoaded(Clerk);
-
-  const themeSelect = document.getElementById('themeSelect') as HTMLSelectElement;
-
-  const savedTheme = sessionStorage.getItem('baseTheme') ?? '';
-  themeSelect.value = savedTheme;
-
-  const updateTheme = () => {
-    const themeName = themeSelect.value;
-    sessionStorage.setItem('baseTheme', themeName);
-
-    const currentAppearance = Clerk.__internal_getOption('appearance') ?? {};
-    void Clerk.__internal_updateProps({
-      appearance: {
-        ...currentAppearance,
-        theme: themeName ? themes[themeName] : undefined,
-      },
-    });
-  };
-
-  themeSelect.addEventListener('change', updateTheme);
-
-  return { updateTheme };
-}
-
-type Preset = { elements: Record<string, any>; options?: Record<string, any>; variables?: Record<string, any> };
-
-function presetToAppearance(preset: Preset | undefined) {
-  if (!preset) return {};
-  return {
-    elements: preset.elements,
-    ...(preset.options ? { options: preset.options } : {}),
-    ...(preset.variables ? { variables: preset.variables } : {}),
-  };
-}
-
-const presets: Record<string, Preset> = {};
-
-function presetSelector() {
-  assertClerkIsLoaded(Clerk);
-
-  const presetSelect = document.getElementById('presetSelect') as HTMLSelectElement;
-
-  // Populate dropdown from presets map
-  for (const name of Object.keys(presets)) {
-    presetSelect.add(new Option(name, name));
-  }
-
-  const savedPreset = sessionStorage.getItem('preset') ?? '';
-  presetSelect.value = savedPreset;
-
-  const updatePreset = () => {
-    const presetName = presetSelect.value;
-    sessionStorage.setItem('preset', presetName);
-
-    const currentAppearance = Clerk.__internal_getOption('appearance') ?? {};
-    void Clerk.__internal_updateProps({
-      appearance: {
-        ...currentAppearance,
-        elements: {},
-        ...presetToAppearance(presetName ? presets[presetName] : undefined),
-      },
-    });
-  };
-
-  presetSelect.addEventListener('change', updatePreset);
-
-  return { updatePreset };
-}
-
 const urlParams = new URL(window.location.href).searchParams;
 for (const [component, encodedProps] of urlParams.entries()) {
   if (AVAILABLE_COMPONENTS.includes(component as AvailableComponent)) {
@@ -444,55 +364,45 @@ for (const [component, encodedProps] of urlParams.entries()) {
 
 void (async () => {
   assertClerkIsLoaded(Clerk);
-  fillLocalizationSelect();
-  const { updateVariables } = appearanceVariableOptions();
-  const { updateTheme } = themeSelector();
-  const { updatePreset } = presetSelector();
-  const { updateOtherOptions, updateAppearanceOptions } = otherOptions();
-
-  const sidebars = document.querySelectorAll('[data-sidebar]');
-  document.addEventListener('keydown', e => {
-    if (e.key === '/') {
-      sidebars.forEach(s => s.classList.toggle('hidden'));
-    }
-  });
 
   const app = document.getElementById('app') as HTMLDivElement;
 
-  const routes = {
-    '/': () => {
-      mountIndex(app);
-    },
-    '/sign-in': () => {
-      Clerk.mountSignIn(app, componentControls.signIn.getProps() ?? {});
-    },
-    '/sign-up': () => {
-      Clerk.mountSignUp(app, componentControls.signUp.getProps() ?? {});
-    },
-    '/user-avatar': () => {
-      Clerk.mountUserAvatar(app, componentControls.userAvatar.getProps() ?? {});
-    },
-    '/user-button': () => {
-      Clerk.mountUserButton(app, componentControls.userButton.getProps() ?? {});
-    },
-    '/user-profile': () => {
-      Clerk.mountUserProfile(app, componentControls.userProfile.getProps() ?? {});
-    },
-    '/create-organization': () => {
-      Clerk.mountCreateOrganization(app, componentControls.createOrganization.getProps() ?? {});
-    },
-    '/organization-list': () => {
-      Clerk.mountOrganizationList(app, componentControls.organizationList.getProps() ?? {});
+  const mountableRoutes: Record<
+    string,
+    { mount: string; component: AvailableComponent; defaultProps?: Record<string, unknown> }
+  > = {
+    '/sign-in': { mount: 'mountSignIn', component: 'signIn' },
+    '/sign-up': { mount: 'mountSignUp', component: 'signUp' },
+    '/user-avatar': { mount: 'mountUserAvatar', component: 'userAvatar' },
+    '/user-button': { mount: 'mountUserButton', component: 'userButton' },
+    '/user-profile': { mount: 'mountUserProfile', component: 'userProfile' },
+    '/create-organization': { mount: 'mountCreateOrganization', component: 'createOrganization' },
+    '/organization-list': { mount: 'mountOrganizationList', component: 'organizationList' },
+    '/organization-profile': { mount: 'mountOrganizationProfile', component: 'organizationProfile' },
+    '/organization-switcher': { mount: 'mountOrganizationSwitcher', component: 'organizationSwitcher' },
+    '/waitlist': { mount: 'mountWaitlist', component: 'waitlist' },
+    '/pricing-table': { mount: 'mountPricingTable', component: 'pricingTable' },
+    '/api-keys': { mount: 'mountAPIKeys', component: 'apiKeys' },
+    '/configure-sso': { mount: 'mountConfigureSSO', component: 'configureSSO' },
+    '/task-choose-organization': {
+      mount: 'mountTaskChooseOrganization',
+      component: 'taskChooseOrganization',
+      defaultProps: { redirectUrlComplete: '/user-profile' },
     },
-    '/organization-profile': () => {
-      Clerk.mountOrganizationProfile(app, componentControls.organizationProfile.getProps() ?? {});
+    '/task-reset-password': {
+      mount: 'mountTaskResetPassword',
+      component: 'taskResetPassword',
+      defaultProps: { redirectUrlComplete: '/user-profile' },
     },
-    '/organization-switcher': () => {
-      Clerk.mountOrganizationSwitcher(app, componentControls.organizationSwitcher.getProps() ?? {});
-    },
-    '/waitlist': () => {
-      Clerk.mountWaitlist(app, componentControls.waitlist.getProps() ?? {});
+    '/task-setup-mfa': {
+      mount: 'mountTaskSetupMFA',
+      component: 'taskSetupMFA',
+      defaultProps: { redirectUrlComplete: '/user-profile' },
     },
+  };
+
+  const routes: Record<string, () => void> = {
+    '/': () => mountIndex(app),
     '/keyless': () => {
       void Clerk.__internal_updateProps({
         options: {
@@ -501,15 +411,6 @@ void (async () => {
         },
       });
     },
-    '/pricing-table': () => {
-      Clerk.mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
-    },
-    '/api-keys': () => {
-      Clerk.mountAPIKeys(app, componentControls.apiKeys.getProps() ?? {});
-    },
-    '/configure-sso': () => {
-      Clerk.mountConfigureSSO(app, componentControls.configureSSO.getProps() ?? {});
-    },
     '/oauth-consent': () => {
       const searchParams = new URLSearchParams(window.location.search);
       const scopes = (searchParams.get('scope')?.split(',') ?? []).map(scope => ({
@@ -526,38 +427,18 @@ void (async () => {
         },
       );
     },
-    '/task-choose-organization': () => {
-      Clerk.mountTaskChooseOrganization(
-        app,
-        componentControls.taskChooseOrganization.getProps() ?? {
-          redirectUrlComplete: '/user-profile',
-        },
-      );
-    },
-    '/task-reset-password': () => {
-      Clerk.mountTaskResetPassword(
-        app,
-        componentControls.taskResetPassword.getProps() ?? {
-          redirectUrlComplete: '/user-profile',
-        },
-      );
-    },
-    '/task-setup-mfa': () => {
-      Clerk.mountTaskSetupMFA(
-        app,
-        componentControls.taskSetupMFA.getProps() ?? {
-          redirectUrlComplete: '/user-profile',
-        },
-      );
-    },
-    '/open-sign-in': () => {
-      mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
-    },
-    '/open-sign-up': () => {
-      mountOpenSignUpButton(app, componentControls.signUp.getProps() ?? {});
-    },
+    '/open-sign-in': () =>
+      mountOpenButton(app, 'Open Sign In', p => Clerk?.openSignIn(p), componentControls.signIn.getProps() ?? {}),
+    '/open-sign-up': () =>
+      mountOpenButton(app, 'Open Sign Up', p => Clerk?.openSignUp(p), componentControls.signUp.getProps() ?? {}),
   };
 
+  for (const [path, { mount, component, defaultProps }] of Object.entries(mountableRoutes)) {
+    routes[path] = () => {
+      (Clerk as any)[mount](app, componentControls[component].getProps() ?? defaultProps ?? {});
+    };
+  }
+
   const route = window.location.pathname as keyof typeof routes;
   if (route in routes) {
     const renderCurrentRoute = routes[route];
@@ -575,8 +456,6 @@ void (async () => {
 
     const initialThemeName = sessionStorage.getItem('baseTheme') ?? '';
     const initialTheme = initialThemeName ? themes[initialThemeName] : undefined;
-    const initialPresetName = sessionStorage.getItem('preset') ?? '';
-    const initialPreset = initialPresetName ? presets[initialPresetName] : undefined;
     const initialElevation = sessionStorage.getItem('elevation') as 'raised' | 'flush' | null;
     const initialDevWarnings = sessionStorage.getItem('devWarnings');
     const initialAppearanceOptions: Record<string, unknown> = {};
@@ -587,27 +466,42 @@ void (async () => {
       initialAppearanceOptions.unsafe_disableDevelopmentModeWarnings = true;
     }
 
+    const initialVariables: Record<string, string> = {};
+    for (const [key, def] of Object.entries(VARIABLE_DEFAULTS)) {
+      initialVariables[key] = sessionStorage.getItem(key) ?? def;
+    }
+
+    const initialLocale = sessionStorage.getItem('localization') ?? 'enUS';
+
     await Clerk.load({
       ...(componentControls.clerk.getProps() ?? {}),
       signInUrl: '/sign-in',
       signUpUrl: '/sign-up',
       ui: { ClerkUI: window.__internal_ClerkUICtor },
       appearance: {
-        ...(initialTheme ? { theme: initialTheme } : {}),
-        ...presetToAppearance(initialPreset),
+        ...(initialTheme ? { theme: initialTheme } : { variables: initialVariables }),
         ...(Object.keys(initialAppearanceOptions).length ? { options: initialAppearanceOptions } : {}),
       },
+      localization: l[initialLocale as keyof typeof l],
     });
     renderCurrentRoute();
-    updateTheme();
-    updatePreset();
-    // Only apply sandbox variable overrides when using the default theme.
-    // Prebuilt themes (raw, dark, etc.) define their own variables.
-    if (!initialTheme) {
-      updateVariables();
-    }
-    updateOtherOptions();
-    updateAppearanceOptions();
+    const { pane } = await initControls();
+
+    const leftSidebar = document.querySelector('[data-sidebar]') as HTMLElement;
+    const sidebarToggle = document.getElementById('sidebarToggle');
+
+    const toggleSidebar = () => {
+      leftSidebar?.classList.toggle('max-lg:hidden');
+    };
+
+    sidebarToggle?.addEventListener('click', toggleSidebar);
+
+    document.addEventListener('keydown', e => {
+      if (e.key === '/') {
+        leftSidebar?.classList.toggle('hidden');
+        pane.hidden = !pane.hidden;
+      }
+    });
   } else {
     console.error(`Unknown route: "${route}".`);
   }
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index 0a15fd55400..7e4f449be2b 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -7,43 +7,64 @@
       name="viewport"
       content="width=device-width,initial-scale=1"
     />
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      @custom-variant dark (&:where(.dark, .dark *));
+      @theme {
+        --color-sidebar: oklch(0.985 0 0);
+        --color-sidebar-foreground: oklch(0.145 0 0);
+        --color-sidebar-border: oklch(0.922 0 0);
+        --color-sidebar-accent: oklch(0.97 0 0);
+        --color-sidebar-accent-foreground: oklch(0.145 0 0);
+        --color-sidebar-muted-foreground: oklch(0.556 0 0);
+      }
+      .dark {
+        color-scheme: dark;
+        --color-sidebar: oklch(0.205 0 0);
+        --color-sidebar-foreground: oklch(0.985 0 0);
+        --color-sidebar-border: oklch(0.274 0 0);
+        --color-sidebar-accent: oklch(0.269 0 0);
+        --color-sidebar-accent-foreground: oklch(0.985 0 0);
+        --color-sidebar-muted-foreground: oklch(0.708 0 0);
+      }
+    </style>
+    <script>
+      (function () {
+        var saved = localStorage.getItem('clerk-js-sandbox-dark-mode');
+        if (saved === 'on' || (saved === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
     <script>
-      if (localStorage.getItem('clerk-js-sandbox-tailwind') !== 'off') {
-        document.write('<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"><\/script>');
-      } else {
-        document.documentElement.setAttribute('data-no-tailwind', '');
-        document.write(
-          '<style>' +
-            'html[data-no-tailwind] { height: 100% }' +
-            'html[data-no-tailwind] body { display: flex; min-height: 100%; margin: 0; font-family: system-ui, sans-serif; background: #f9fafb }' +
-            'html[data-no-tailwind] [data-sidebar] { position: fixed; top: 0; bottom: 0; width: 18rem; overflow-y: auto; background: #fff; border: 1px solid #eee; padding: 0.5rem; font-size: 13px }' +
-            'html[data-no-tailwind] body > [data-sidebar]:nth-child(1) { left: 0 }' +
-            'html[data-no-tailwind] body > [data-sidebar]:nth-child(2) { right: 0 }' +
-            'html[data-no-tailwind] body:has([data-sidebar]:not(.hidden)) { padding: 0 18rem }' +
-            'html[data-no-tailwind] main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem }' +
-            'html[data-no-tailwind] main > div { width: 100% }' +
-            'html[data-no-tailwind] fieldset { margin-top: 1rem }' +
-            'html[data-no-tailwind] legend { font-size: 14px; font-weight: 500 }' +
-            'html[data-no-tailwind] [data-sidebar] label { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-top: 1px solid #f3f4f6 }' +
-            'html[data-no-tailwind] nav ul { list-style: none; padding: 0 }' +
-            'html[data-no-tailwind] nav a { display: block; padding: 0.3rem 0.5rem; text-decoration: none; color: inherit; font-size: 14px }' +
-            'html[data-no-tailwind] nav a:hover { background: #f9fafb }' +
-            '<\/style>',
-        );
+      class NavLink extends HTMLElement {
+        connectedCallback() {
+          var href = this.getAttribute('href');
+          var label = this.getAttribute('label');
+          this.innerHTML =
+            '<li class="relative"><a class="relative isolate flex w-full rounded-md border border-transparent px-2 py-[0.4375rem] text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground aria-[current]:bg-sidebar-accent aria-[current]:text-sidebar-accent-foreground" href="' +
+            href +
+            '">' +
+            label +
+            '</a></li>';
+        }
       }
+      customElements.define('nav-link', NavLink);
     </script>
   </head>
-  <body class="flex min-h-full flex-col overflow-x-hidden bg-white lg:has-[*[data-sidebar]:not(.hidden)]:px-72">
+  <body
+    class="flex min-h-full flex-col overflow-x-hidden bg-white lg:has-[*[data-sidebar]:not(.hidden)]:pl-72 dark:bg-neutral-950"
+  >
     <div
       data-sidebar
-      class="fixed inset-y-0 left-0 w-72 overflow-y-auto border-r border-gray-100 bg-white px-2 py-4 max-lg:hidden"
+      class="border-sidebar-border bg-sidebar text-sidebar-foreground fixed inset-y-0 left-0 z-40 w-72 overflow-y-auto border-r px-2 py-4 max-lg:hidden"
     >
-      <header class="mb-2 flex items-center justify-center gap-x-2 border-b border-gray-100 pb-4">
+      <header class="border-sidebar-border mb-2 flex items-center justify-center gap-x-2 border-b pb-4">
         <svg
           viewBox="0 0 62 18"
           fill="none"
           aria-hidden="true"
-          class="h-[1.125rem] text-gray-950"
+          class="text-sidebar-foreground h-[1.125rem]"
         >
           <ellipse
             cx="8.99999"
@@ -69,398 +90,123 @@
           ></path>
         </svg>
         <div
-          class="bg-gray-25 mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium text-gray-600 ring-1 ring-inset ring-gray-100"
+          class="bg-sidebar-accent text-sidebar-muted-foreground ring-sidebar-border mt-0.5 rounded-full px-2 py-1 text-[0.625rem]/3 font-medium ring-1 ring-inset"
         >
           Sandbox
         </div>
       </header>
       <nav>
         <ul role="list">
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/"
-              >Home</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/sign-in"
-              >Sign In</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/sign-up"
-              >Sign Up</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/user-avatar"
-              >User Avatar</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/user-button"
-              >User Button</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/user-profile"
-              >User Profile</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/create-organization"
-              >Create Organization</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/organization-list"
-              >Organization List</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/organization-profile"
-              >Organization Profile</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/organization-switcher"
-              >Organization Switcher</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/waitlist"
-              >Waitlist</a
-            >
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/keyless"
-            >
-              Keyless
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/pricing-table"
-            >
-              PricingTable
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/api-keys"
-            >
-              API Keys
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/configure-sso"
-            >
-              ConfigureSSO
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/oauth-consent"
-            >
-              OAuthConsent
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/task-choose-organization"
-            >
-              TaskChooseOrganization
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/task-setup-mfa"
-            >
-              TaskSetupMFA
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/open-sign-in"
-            >
-              Open sign in
-            </a>
-          </li>
-          <li class="relative">
-            <a
-              class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
-              href="/open-sign-up"
-            >
-              Open sign up
-            </a>
-          </li>
+          <nav-link
+            href="/"
+            label="Home"
+          ></nav-link>
+          <nav-link
+            href="/sign-in"
+            label="Sign In"
+          ></nav-link>
+          <nav-link
+            href="/sign-up"
+            label="Sign Up"
+          ></nav-link>
+          <nav-link
+            href="/user-avatar"
+            label="User Avatar"
+          ></nav-link>
+          <nav-link
+            href="/user-button"
+            label="User Button"
+          ></nav-link>
+          <nav-link
+            href="/user-profile"
+            label="User Profile"
+          ></nav-link>
+          <nav-link
+            href="/create-organization"
+            label="Create Organization"
+          ></nav-link>
+          <nav-link
+            href="/organization-list"
+            label="Organization List"
+          ></nav-link>
+          <nav-link
+            href="/organization-profile"
+            label="Organization Profile"
+          ></nav-link>
+          <nav-link
+            href="/organization-switcher"
+            label="Organization Switcher"
+          ></nav-link>
+          <nav-link
+            href="/waitlist"
+            label="Waitlist"
+          ></nav-link>
+          <nav-link
+            href="/keyless"
+            label="Keyless"
+          ></nav-link>
+          <nav-link
+            href="/pricing-table"
+            label="PricingTable"
+          ></nav-link>
+          <nav-link
+            href="/api-keys"
+            label="API Keys"
+          ></nav-link>
+          <nav-link
+            href="/configure-sso"
+            label="ConfigureSSO"
+          ></nav-link>
+          <nav-link
+            href="/oauth-consent"
+            label="OAuthConsent"
+          ></nav-link>
+          <nav-link
+            href="/task-choose-organization"
+            label="TaskChooseOrganization"
+          ></nav-link>
+          <nav-link
+            href="/task-setup-mfa"
+            label="TaskSetupMFA"
+          ></nav-link>
+          <nav-link
+            href="/open-sign-in"
+            label="Open sign in"
+          ></nav-link>
+          <nav-link
+            href="/open-sign-up"
+            label="Open sign up"
+          ></nav-link>
         </ul>
       </nav>
     </div>
 
-    <div
-      data-sidebar
-      class="fixed inset-y-0 right-0 w-72 overflow-y-auto border-l border-gray-100 bg-white px-2 py-4 max-lg:hidden"
+    <button
+      id="sidebarToggle"
+      class="border-sidebar-border bg-sidebar text-sidebar-foreground fixed left-3 top-3 z-50 rounded-md border p-1.5 lg:hidden"
+      aria-label="Toggle sidebar"
     >
-      <fieldset>
-        <div class="mb-2 flex items-center justify-between">
-          <legend class="block text-sm">Variables</legend>
-          <button
-            id="resetVariablesBtn"
-            class="text-sm"
-          >
-            Reset
-          </button>
-        </div>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorPrimary</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorPrimary"
-            value="#2F3037"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorNeutral</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorNeutral"
-            value="#000000"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorBackground</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorBackground"
-            value="#ffffff"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorPrimaryForeground</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorPrimaryForeground"
-            value="#ffffff"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorDanger</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorDanger"
-            value="#EF4444"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorSuccess</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorSuccess"
-            value="#22C543"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorWarning</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorWarning"
-            value="#F36B16"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorForeground</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorForeground"
-            value="#212126"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorMutedForeground</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorMutedForeground"
-            value="#747686"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorInputForeground</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorInputForeground"
-            value="#000000"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorInput</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorInput"
-            value="#ffffff"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorShimmer</span>
-          <input
-            class="border border-gray-200"
-            type="color"
-            id="colorShimmer"
-            value="#ffffff"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">spacing</span>
-          <input
-            type="text"
-            id="spacing"
-            value="1rem"
-            class="text-sm outline-none [field-sizing:content]"
-          />
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">borderRadius</span>
-          <input
-            type="text"
-            id="borderRadius"
-            value="0.375rem"
-            class="text-sm outline-none [field-sizing:content]"
-          />
-        </label>
-      </fieldset>
-      <fieldset>
-        <div class="mb-2 mt-4 flex items-center justify-between">
-          <legend class="block text-sm">Theme</legend>
-        </div>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">baseTheme</span>
-          <select
-            id="themeSelect"
-            class="text-sm"
-          >
-            <option value="">default</option>
-            <option value="dark">dark</option>
-            <option value="shadesOfPurple">shadesOfPurple</option>
-            <option value="neobrutalism">neobrutalism</option>
-            <option value="shadcn">shadcn</option>
-          </select>
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">preset</span>
-          <select
-            id="presetSelect"
-            class="text-sm"
-          >
-            <option value="">none</option>
-          </select>
-        </label>
-      </fieldset>
-      <fieldset>
-        <div class="mb-2 mt-4 flex items-center justify-between">
-          <legend class="block text-sm">Page</legend>
-        </div>
-        <label
-          class="flex items-center justify-between border-t border-gray-100 py-2"
-          style="font-size: 12px; font-family: monospace"
-        >
-          <span>Tailwind CSS</span>
-          <input
-            type="checkbox"
-            id="tailwindToggle"
-          />
-        </label>
-        <script>
-          (function () {
-            var cb = document.getElementById('tailwindToggle');
-            cb.checked = localStorage.getItem('clerk-js-sandbox-tailwind') !== 'off';
-            cb.addEventListener('change', function () {
-              localStorage.setItem('clerk-js-sandbox-tailwind', cb.checked ? 'on' : 'off');
-              location.reload();
-            });
-          })();
-        </script>
-      </fieldset>
-      <fieldset>
-        <div class="mb-2 mt-4 flex items-center justify-between">
-          <legend class="block text-sm">Other options</legend>
-          <button
-            id="resetOtherOptionsBtn"
-            class="text-sm"
-          >
-            Reset
-          </button>
-        </div>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">localization</span>
-          <select id="localizationSelect"></select>
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">elevation</span>
-          <select
-            id="elevationSelect"
-            class="text-sm"
-          >
-            <option value="raised">raised</option>
-            <option value="flush">flush</option>
-          </select>
-        </label>
-        <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">devWarnings</span>
-          <input
-            type="checkbox"
-            id="devWarningsToggle"
-            checked
-          />
-        </label>
-      </fieldset>
-    </div>
+      <svg
+        class="size-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+        />
+      </svg>
+    </button>
 
-    <main class="flex h-full min-w-px flex-1 items-center justify-center overflow-y-auto overflow-x-hidden py-12">
+    <main
+      class="flex h-full min-w-px flex-1 items-center justify-center overflow-y-auto overflow-x-hidden px-4 py-12 md:px-12"
+    >
       <div
         id="app"
-        class="container w-full p-12"
+        class="container grid w-full place-content-center p-12"
       ></div>
     </main>