diff --git a/.changeset/flat-ravens-call.md b/.changeset/flat-ravens-call.md
new file mode 100644
index 00000000000..4182328bd63
--- /dev/null
+++ b/.changeset/flat-ravens-call.md
@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+'@clerk/vue': minor
+---
+
+Introduce in-app development prompt to enable the Organizations feature
+
+In development instances, when using organization components or hooks for the first time, developers will see a prompt to enable the Organizations feature directly in their app, eliminating the need to visit the Clerk Dashboard.
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 509aa6dfaba..acb9612d4a7 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,11 +1,11 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "840KB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "81KB" },
-    { "path": "./dist/clerk.channel.browser.js", "maxSize": "81KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "123KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "83KB" },
+    { "path": "./dist/clerk.channel.browser.js", "maxSize": "83KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "127KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "65KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "117.1KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "119KB" },
     { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "122KB" },
     { "path": "./dist/vendors*.js", "maxSize": "47KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
@@ -23,6 +23,7 @@
     { "path": "./dist/onetap*.js", "maxSize": "1KB" },
     { "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
+    { "path": "./dist/enableOrganizationsPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
     { "path": "./dist/checkout*.js", "maxSize": "8.82KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
diff --git a/packages/clerk-js/src/core/__tests__/clerk.test.ts b/packages/clerk-js/src/core/__tests__/clerk.test.ts
index 1cccffbbcd8..d93d9bbfc20 100644
--- a/packages/clerk-js/src/core/__tests__/clerk.test.ts
+++ b/packages/clerk-js/src/core/__tests__/clerk.test.ts
@@ -2508,4 +2508,128 @@ describe('Clerk singleton', () => {
       });
     });
   });
+
+  describe('__internal_attemptToEnableEnvironmentSetting', () => {
+    describe('for organizations', () => {
+      it('does not open prompt if organizations is enabled in development', async () => {
+        mockEnvironmentFetch.mockReturnValue(
+          Promise.resolve({
+            userSettings: mockUserSettings,
+            displayConfig: mockDisplayConfig,
+            isSingleSession: () => false,
+            isProduction: () => false,
+            isDevelopmentOrStaging: () => true,
+            organizationSettings: {
+              enabled: true,
+            },
+          }),
+        );
+
+        const sut = new Clerk(productionPublishableKey);
+
+        const __internal_openEnableOrganizationsPromptSpy = vi.fn();
+        sut.__internal_openEnableOrganizationsPrompt = __internal_openEnableOrganizationsPromptSpy;
+
+        await sut.load();
+
+        const result = await sut.__internal_attemptToEnableEnvironmentSetting({
+          for: 'organizations',
+          caller: 'OrganizationSwitcher',
+        });
+
+        expect(result?.isEnabled).toBe(true);
+        expect(__internal_openEnableOrganizationsPromptSpy).not.toHaveBeenCalled();
+      });
+
+      it('does not open prompt if organizations is enabled in production', async () => {
+        mockEnvironmentFetch.mockReturnValue(
+          Promise.resolve({
+            userSettings: mockUserSettings,
+            displayConfig: mockDisplayConfig,
+            isSingleSession: () => false,
+            isProduction: () => true,
+            isDevelopmentOrStaging: () => true,
+            organizationSettings: {
+              enabled: true,
+            },
+          }),
+        );
+
+        const sut = new Clerk(productionPublishableKey);
+
+        const __internal_openEnableOrganizationsPromptSpy = vi.fn();
+        sut.__internal_openEnableOrganizationsPrompt = __internal_openEnableOrganizationsPromptSpy;
+
+        await sut.load();
+
+        const result = await sut.__internal_attemptToEnableEnvironmentSetting({
+          for: 'organizations',
+          caller: 'OrganizationSwitcher',
+        });
+
+        expect(result?.isEnabled).toBe(true);
+        expect(__internal_openEnableOrganizationsPromptSpy).not.toHaveBeenCalled();
+      });
+
+      it('opens prompt if organizations is disabled in development', async () => {
+        mockEnvironmentFetch.mockReturnValue(
+          Promise.resolve({
+            userSettings: mockUserSettings,
+            displayConfig: mockDisplayConfig,
+            isSingleSession: () => false,
+            isProduction: () => false,
+            isDevelopmentOrStaging: () => true,
+            organizationSettings: {
+              enabled: false,
+            },
+          }),
+        );
+
+        const sut = new Clerk(developmentPublishableKey);
+
+        const __internal_openEnableOrganizationsPromptSpy = vi.fn();
+        sut.__internal_openEnableOrganizationsPrompt = __internal_openEnableOrganizationsPromptSpy;
+
+        await sut.load();
+
+        const result = await sut.__internal_attemptToEnableEnvironmentSetting({
+          for: 'organizations',
+          caller: 'OrganizationSwitcher',
+        });
+
+        expect(result?.isEnabled).toBe(false);
+        expect(__internal_openEnableOrganizationsPromptSpy).toHaveBeenCalled();
+      });
+
+      it('does not open prompt if organizations is disabled in production', async () => {
+        mockEnvironmentFetch.mockReturnValue(
+          Promise.resolve({
+            userSettings: mockUserSettings,
+            displayConfig: mockDisplayConfig,
+            isSingleSession: () => false,
+            isProduction: () => false,
+            isDevelopmentOrStaging: () => true,
+            organizationSettings: {
+              enabled: false,
+            },
+          }),
+        );
+
+        const sut = new Clerk(productionPublishableKey);
+
+        const __internal_openEnableOrganizationsPromptSpy = vi.fn();
+        sut.__internal_openEnableOrganizationsPrompt = __internal_openEnableOrganizationsPromptSpy;
+
+        await sut.load();
+
+        const result = await sut.__internal_attemptToEnableEnvironmentSetting({
+          for: 'organizations',
+          caller: 'OrganizationSwitcher',
+        });
+
+        expect(result?.isEnabled).toBe(false);
+        expect(__internal_openEnableOrganizationsPromptSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
 });
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 6353d4c09d3..e95a590c633 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -22,7 +22,10 @@ import {
 import type {
   __experimental_CheckoutInstance,
   __experimental_CheckoutOptions,
+  __internal_AttemptToEnableEnvironmentSettingParams,
+  __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -745,6 +748,56 @@ export class Clerk implements ClerkInterface {
     void this.#componentControls.ensureMounted().then(controls => controls.closeModal('userVerification'));
   };
 
+  public __internal_attemptToEnableEnvironmentSetting = (
+    params: __internal_AttemptToEnableEnvironmentSettingParams,
+  ): __internal_AttemptToEnableEnvironmentSettingResult => {
+    const { for: setting, caller } = params;
+
+    if (!this.user) {
+      logger.warnOnce(
+        `Clerk: "${caller}" requires an active user session. Ensure a user is signed in before executing ${caller}.`,
+      );
+    }
+
+    switch (setting) {
+      case 'organizations': {
+        const isSettingDisabled = disabledOrganizationsFeature(this, this.environment);
+
+        if (!isSettingDisabled) {
+          return { isEnabled: true };
+        }
+
+        if (this.#instanceType === 'development') {
+          this.__internal_openEnableOrganizationsPrompt({
+            caller,
+            // Reload current window to all invalidate all resources
+            // related to organizations, eg: roles
+            onSuccess: () => window.location.reload(),
+            onClose: params.onClose,
+          } as __internal_EnableOrganizationsPromptProps);
+        }
+
+        return { isEnabled: false };
+      }
+      default:
+        throw new Error(`Attempted to enable an unknown or unsupported setting "${setting}".`);
+    }
+  };
+
+  public __internal_openEnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls
+      .ensureMounted({ preloadHint: 'EnableOrganizationsPrompt' })
+      .then(controls => controls.openModal('enableOrganizationsPrompt', props || {}));
+
+    this.telemetry?.record(eventPrebuiltComponentMounted('EnableOrganizationsPrompt', props));
+  };
+
+  public __internal_closeEnableOrganizationsPrompt = (): void => {
+    this.assertComponentsReady(this.#componentControls);
+    void this.#componentControls.ensureMounted().then(controls => controls.closeModal('enableOrganizationsPrompt'));
+  };
+
   public __internal_openBlankCaptchaModal = (): Promise<unknown> => {
     this.assertComponentsReady(this.#componentControls);
     return this.#componentControls
@@ -816,14 +869,21 @@ export class Clerk implements ClerkInterface {
 
   public openOrganizationProfile = (props?: OrganizationProfileProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
+
+    const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationProfile',
+      onClose: () => {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
-      }
+      },
+    });
+
+    if (!isOrganizationsEnabled) {
       return;
     }
+
     if (noOrganizationExists(this)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderComponentWhenOrgDoesNotExist, {
@@ -846,14 +906,21 @@ export class Clerk implements ClerkInterface {
 
   public openCreateOrganization = (props?: CreateOrganizationProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
+
+    const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'CreateOrganization',
+      onClose: () => {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
-      }
+      },
+    });
+
+    if (!isOrganizationsEnabled) {
       return;
     }
+
     void this.#componentControls
       .ensureMounted({ preloadHint: 'CreateOrganization' })
       .then(controls => controls.openModal('createOrganization', props || {}));
@@ -988,14 +1055,21 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationProfile = (node: HTMLDivElement, props?: OrganizationProfileProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
+
+    const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationProfile',
+      onClose: () => {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationProfile'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
-      }
+      },
+    });
+
+    if (!isOrganizationsEnabled) {
       return;
     }
+
     const userExists = !noUserExists(this);
     if (noOrganizationExists(this) && userExists) {
       if (this.#instanceType === 'development') {
@@ -1028,14 +1102,21 @@ export class Clerk implements ClerkInterface {
 
   public mountCreateOrganization = (node: HTMLDivElement, props?: CreateOrganizationProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
+
+    const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'CreateOrganization',
+      onClose: () => {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('CreateOrganization'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
-      }
+      },
+    });
+
+    if (!isOrganizationsEnabled) {
       return;
     }
+
     void this.#componentControls?.ensureMounted({ preloadHint: 'CreateOrganization' }).then(controls =>
       controls.mountComponent({
         name: 'CreateOrganization',
@@ -1059,14 +1140,21 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationSwitcher = (node: HTMLDivElement, props?: OrganizationSwitcherProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
+
+    const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationSwitcher',
+      onClose: () => {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationSwitcher'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
-      }
+      },
+    });
+
+    if (!isOrganizationsEnabled) {
       return;
     }
+
     void this.#componentControls?.ensureMounted({ preloadHint: 'OrganizationSwitcher' }).then(controls =>
       controls.mountComponent({
         name: 'OrganizationSwitcher',
@@ -1098,14 +1186,21 @@ export class Clerk implements ClerkInterface {
 
   public mountOrganizationList = (node: HTMLDivElement, props?: OrganizationListProps) => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
+
+    const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'OrganizationList',
+      onClose: () => {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('OrganizationList'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
-      }
+      },
+    });
+
+    if (!isOrganizationsEnabled) {
       return;
     }
+
     void this.#componentControls?.ensureMounted({ preloadHint: 'OrganizationList' }).then(controls =>
       controls.mountComponent({
         name: 'OrganizationList',
@@ -1294,12 +1389,17 @@ export class Clerk implements ClerkInterface {
   public mountTaskChooseOrganization = (node: HTMLDivElement, props?: TaskChooseOrganizationProps) => {
     this.assertComponentsReady(this.#componentControls);
 
-    if (disabledOrganizationsFeature(this, this.environment)) {
-      if (this.#instanceType === 'development') {
+    const { isEnabled: isOrganizationsEnabled } = this.__internal_attemptToEnableEnvironmentSetting({
+      for: 'organizations',
+      caller: 'TaskChooseOrganization',
+      onClose: () => {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyOrganizationComponent('TaskChooseOrganization'), {
           code: CANNOT_RENDER_ORGANIZATIONS_DISABLED_ERROR_CODE,
         });
-      }
+      },
+    });
+
+    if (!isOrganizationsEnabled) {
       return;
     }
 
diff --git a/packages/clerk-js/src/core/resources/DevTools.ts b/packages/clerk-js/src/core/resources/DevTools.ts
new file mode 100644
index 00000000000..9a517858604
--- /dev/null
+++ b/packages/clerk-js/src/core/resources/DevTools.ts
@@ -0,0 +1,21 @@
+import type { ClerkResourceJSON, DevToolsResource, EnableEnvironmentSettingParams } from '@clerk/shared/types';
+
+import { BaseResource } from './Base';
+
+/**
+ * @internal
+ */
+export class DevTools extends BaseResource implements DevToolsResource {
+  pathRoot = '/dev_tools';
+
+  protected fromJSON(_data: ClerkResourceJSON | null): this {
+    return this;
+  }
+
+  async __internal_enableEnvironmentSetting(params: EnableEnvironmentSettingParams) {
+    await this._basePatch({
+      path: `${this.pathRoot}/enable_environment_setting`,
+      body: params,
+    });
+  }
+}
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index 148736665ce..6f3be02ea95 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -1,5 +1,6 @@
 import type {
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
   __internal_UserVerificationProps,
@@ -27,6 +28,7 @@ import type { ClerkComponentName } from './lazyModules/components';
 import {
   BlankCaptchaModal,
   CreateOrganizationModal,
+  EnableOrganizationsPrompt,
   ImpersonationFab,
   KeylessPrompt,
   OrganizationProfileModal,
@@ -40,6 +42,7 @@ import {
 import { MountedCheckoutDrawer, MountedPlanDetailDrawer, MountedSubscriptionDetailDrawer } from './lazyModules/drawers';
 import {
   LazyComponentRenderer,
+  LazyEnableOrganizationsPromptProvider,
   LazyImpersonationFabProvider,
   LazyModalRenderer,
   LazyOneTapRenderer,
@@ -79,7 +82,8 @@ export type ComponentControls = {
       | 'createOrganization'
       | 'userVerification'
       | 'waitlist'
-      | 'blankCaptcha',
+      | 'blankCaptcha'
+      | 'enableOrganizationsPrompt',
   >(
     modal: T,
     props: T extends 'signIn'
@@ -90,7 +94,9 @@ export type ComponentControls = {
           ? __internal_UserVerificationProps
           : T extends 'waitlist'
             ? WaitlistProps
-            : UserProfileProps,
+            : T extends 'enableOrganizationsPrompt'
+              ? __internal_EnableOrganizationsPromptProps
+              : UserProfileProps,
   ) => void;
   closeModal: (
     modal:
@@ -102,7 +108,8 @@ export type ComponentControls = {
       | 'createOrganization'
       | 'userVerification'
       | 'waitlist'
-      | 'blankCaptcha',
+      | 'blankCaptcha'
+      | 'enableOrganizationsPrompt',
     options?: {
       notify?: boolean;
     },
@@ -152,6 +159,7 @@ interface ComponentsState {
   userVerificationModal: null | __internal_UserVerificationProps;
   organizationProfileModal: null | OrganizationProfileProps;
   createOrganizationModal: null | CreateOrganizationProps;
+  enableOrganizationsPromptModal: null | __internal_EnableOrganizationsPromptProps;
   blankCaptchaModal: null;
   organizationSwitcherPrefetch: boolean;
   waitlistModal: null | WaitlistProps;
@@ -245,6 +253,7 @@ const Components = (props: ComponentsProps) => {
     userVerificationModal: null,
     organizationProfileModal: null,
     createOrganizationModal: null,
+    enableOrganizationsPromptModal: null,
     organizationSwitcherPrefetch: false,
     waitlistModal: null,
     blankCaptchaModal: null,
@@ -325,9 +334,10 @@ const Components = (props: ComponentsProps) => {
       clearUrlStateParam();
       setState(s => {
         function handleCloseModalForExperimentalUserVerification() {
-          const modal = s[`${name}Modal`] || {};
+          const modal = s[`${name}Modal`];
           if (modal && typeof modal === 'object' && 'afterVerificationCancelled' in modal && notify) {
-            modal.afterVerificationCancelled?.();
+            // TypeScript doesn't narrow properly with template literal access and 'in' operator
+            (modal as { afterVerificationCancelled?: () => void }).afterVerificationCancelled?.();
           }
         }
 
@@ -342,6 +352,20 @@ const Components = (props: ComponentsProps) => {
     };
 
     componentsControls.openModal = (name, props) => {
+      // Prevent opening enableOrganizations prompt if it's already open
+      // It should open the first call and ignore the subsequent calls
+      if (name === 'enableOrganizationsPrompt') {
+        setState(prev => {
+          // Modal is already open, don't update state
+          if (prev.enableOrganizationsPromptModal) {
+            return prev;
+          }
+
+          return { ...prev, [`${name}Modal`]: props };
+        });
+        return;
+      }
+
       function handleCloseModalForExperimentalUserVerification() {
         if (!('afterVerificationCancelled' in props)) {
           return;
@@ -612,6 +636,12 @@ const Components = (props: ComponentsProps) => {
           </LazyImpersonationFabProvider>
         )}
 
+        {state.enableOrganizationsPromptModal && (
+          <LazyEnableOrganizationsPromptProvider globalAppearance={state.appearance}>
+            <EnableOrganizationsPrompt {...state.enableOrganizationsPromptModal} />
+          </LazyEnableOrganizationsPromptProvider>
+        )}
+
         {state.options?.__internal_keyless_claimKeylessApplicationUrl &&
           state.options?.__internal_keyless_copyInstanceKeysUrl && (
             <LazyImpersonationFabProvider globalAppearance={state.appearance}>
diff --git a/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx b/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx
index f60898e19d2..3d560ab09b6 100644
--- a/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx
+++ b/packages/clerk-js/src/ui/components/APIKeys/APIKeys.tsx
@@ -1,5 +1,10 @@
 import { isClerkAPIResponseError } from '@clerk/shared/error';
-import { __experimental_useAPIKeys as useAPIKeys, useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import {
+  __experimental_useAPIKeys as useAPIKeys,
+  useClerk,
+  useOrganizationContext,
+  useUser,
+} from '@clerk/shared/react';
 import type { APIKeyResource } from '@clerk/shared/types';
 import { lazy, useState } from 'react';
 
@@ -234,9 +239,10 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
 const _APIKeys = () => {
   const ctx = useAPIKeysContext();
   const { user } = useUser();
-  const { organization } = useOrganization();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
+  const organizationCtx = useOrganizationContext();
 
-  const subject = organization?.id ?? user?.id ?? '';
+  const subject = organizationCtx?.organization?.id ?? user?.id ?? '';
 
   return (
     <Flow.Root
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx b/packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx
deleted file mode 100644
index c963d1bfd77..00000000000
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/ClerkLogoIcon.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Custom icon specifically used for the Keyless toast. Not intended to be used anywhere else
-
-export function ClerkLogoIcon() {
-  return (
-    <svg
-      width='1rem'
-      height='1.25rem'
-      viewBox='0 0 16 20'
-      fill='none'
-      aria-hidden
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <g filter='url(#filter0_i_438_501)'>
-        <path
-          d='M10.4766 9.99979C10.4766 11.3774 9.35978 12.4942 7.98215 12.4942C6.60452 12.4942 5.48773 11.3774 5.48773 9.99979C5.48773 8.62216 6.60452 7.50537 7.98215 7.50537C9.35978 7.50537 10.4766 8.62216 10.4766 9.99979Z'
-          fill='#BBBBBB'
-        />
-        <path
-          d='M12.4176 3.36236C12.6676 3.52972 12.6889 3.88187 12.4762 4.09457L10.6548 5.91595C10.4897 6.08107 10.2336 6.10714 10.0257 6.00071C9.41273 5.68684 8.71811 5.50976 7.98214 5.50976C5.5024 5.50976 3.49219 7.51998 3.49219 9.99972C3.49219 10.7357 3.66926 11.4303 3.98314 12.0433C4.08957 12.2511 4.06349 12.5073 3.89837 12.6724L2.07699 14.4938C1.86429 14.7065 1.51215 14.6851 1.34479 14.4352C0.495381 13.1666 0 11.641 0 9.99972C0 5.5913 3.57373 2.01758 7.98214 2.01758C9.62345 2.01758 11.1491 2.51296 12.4176 3.36236Z'
-          fill='#8F8F8F'
-        />
-        <path
-          d='M12.4762 15.905C12.6889 16.1177 12.6675 16.4698 12.4176 16.6372C11.149 17.4866 9.62342 17.982 7.9821 17.982C6.34078 17.982 4.81516 17.4866 3.54661 16.6372C3.29666 16.4698 3.27531 16.1177 3.48801 15.905L5.30938 14.0836C5.4745 13.9185 5.73066 13.8924 5.93851 13.9988C6.55149 14.3127 7.24612 14.4898 7.9821 14.4898C8.71808 14.4898 9.4127 14.3127 10.0257 13.9988C10.2335 13.8924 10.4897 13.9185 10.6548 14.0836L12.4762 15.905Z'
-          fill='#BBBBBB'
-        />
-      </g>
-      <defs>
-        <filter
-          id='filter0_i_438_501'
-          x='0'
-          y='1.86758'
-          width='12.6217'
-          height='16.1144'
-          filterUnits='userSpaceOnUse'
-          colorInterpolationFilters='sRGB'
-        >
-          <feFlood
-            floodOpacity='0'
-            result='BackgroundImageFix'
-          />
-          <feBlend
-            mode='normal'
-            in='SourceGraphic'
-            in2='BackgroundImageFix'
-            result='shape'
-          />
-          <feColorMatrix
-            in='SourceAlpha'
-            type='matrix'
-            values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
-            result='hardAlpha'
-          />
-          <feOffset dy='-0.15' />
-          <feGaussianBlur stdDeviation='0.15' />
-          <feComposite
-            in2='hardAlpha'
-            operator='arithmetic'
-            k2='-1'
-            k3='1'
-          />
-          <feColorMatrix
-            type='matrix'
-            values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
-          />
-          <feBlend
-            mode='normal'
-            in2='shape'
-            result='effect1_innerShadow_438_501'
-          />
-        </filter>
-      </defs>
-    </svg>
-  );
-}
diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
new file mode 100644
index 00000000000..b9f69180db2
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -0,0 +1,667 @@
+import { useClerk } from '@clerk/shared/react';
+import type { __internal_EnableOrganizationsPromptProps, EnableEnvironmentSettingParams } from '@clerk/shared/types';
+// eslint-disable-next-line no-restricted-imports
+import type { SerializedStyles } from '@emotion/react';
+// eslint-disable-next-line no-restricted-imports
+import { css, type Theme } from '@emotion/react';
+import { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';
+
+import { useEnvironment } from '@/ui/contexts';
+import { Modal } from '@/ui/elements/Modal';
+import { common, InternalThemeProvider } from '@/ui/styledSystem';
+
+import { DevTools } from '../../../../core/resources/DevTools';
+import { Box, Flex, Span } from '../../../customizables';
+import { Portal } from '../../../elements/Portal';
+import { basePromptElementStyles, ClerkLogoIcon, PromptContainer, PromptSuccessIcon } from '../shared';
+
+const organizationsDashboardUrl = 'https://dashboard.clerk.com/~/organizations-settings';
+
+const EnableOrganizationsPromptInternal = ({
+  caller,
+  onSuccess,
+  onClose,
+}: __internal_EnableOrganizationsPromptProps) => {
+  const clerk = useClerk();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isEnabled, setIsEnabled] = useState(false);
+  const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);
+
+  const initialFocusRef = useRef<HTMLHeadingElement>(null);
+  const environment = useEnvironment();
+
+  const isComponent = !caller.startsWith('use');
+
+  // 'forceOrganizationSelection' is omitted from the environment settings object if the instance does not have it available as a feature
+  const hasPersonalAccountsEnabled =
+    typeof environment?.organizationSettings.forceOrganizationSelection !== 'undefined';
+
+  const handleEnableOrganizations = () => {
+    setIsLoading(true);
+
+    const params: EnableEnvironmentSettingParams = {
+      enable_organizations: true,
+    };
+
+    if (hasPersonalAccountsEnabled) {
+      params.organization_allow_personal_accounts = allowPersonalAccount;
+    }
+
+    void new DevTools()
+      .__internal_enableEnvironmentSetting(params)
+      .then(() => {
+        setIsEnabled(true);
+        setIsLoading(false);
+      })
+      .catch(() => {
+        setIsLoading(false);
+      });
+  };
+
+  return (
+    <Portal>
+      <Modal
+        canCloseModal={false}
+        containerSx={() => ({ alignItems: 'center' })}
+        initialFocusRef={initialFocusRef}
+      >
+        <PromptContainer
+          sx={() => ({
+            display: 'flex',
+            flexDirection: 'column',
+            width: '30rem',
+            maxWidth: 'calc(100vw - 2rem)',
+          })}
+        >
+          <Flex
+            direction='col'
+            sx={t => ({
+              padding: `${t.sizes.$4} ${t.sizes.$6}`,
+              paddingBottom: t.sizes.$4,
+              gap: t.sizes.$2,
+            })}
+          >
+            <Flex
+              as='header'
+              align='center'
+              sx={t => ({
+                gap: t.sizes.$2,
+              })}
+            >
+              <CoinFlip isEnabled={isEnabled} />
+
+              <h1
+                css={[
+                  basePromptElementStyles,
+                  css`
+                    color: white;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    outline: none;
+                  `,
+                ]}
+                tabIndex={-1}
+                ref={initialFocusRef}
+              >
+                {isEnabled ? 'Organizations feature enabled' : 'Organizations feature required'}
+              </h1>
+            </Flex>
+
+            <Flex
+              direction='col'
+              align='start'
+              sx={t => ({
+                gap: t.sizes.$0x5,
+              })}
+            >
+              {isEnabled ? (
+                <p
+                  css={[
+                    basePromptElementStyles,
+                    css`
+                      color: #b4b4b4;
+                      font-size: 0.8125rem;
+                      font-weight: 400;
+                      line-height: 1.3;
+                    `,
+                  ]}
+                >
+                  {clerk.user
+                    ? `The Organizations feature has been enabled for your application. A default organization named "My Organization" was created automatically. You can manage or rename it in your`
+                    : `The Organizations feature has been enabled for your application. You can manage it in your`}{' '}
+                  <Link
+                    href={organizationsDashboardUrl}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    dashboard
+                  </Link>
+                  .
+                </p>
+              ) : (
+                <>
+                  <p
+                    css={[
+                      basePromptElementStyles,
+                      css`
+                        color: #b4b4b4;
+                        font-size: 0.8125rem;
+                        font-weight: 400;
+                        line-height: 1.23;
+                      `,
+                    ]}
+                  >
+                    Enable Organizations to use{' '}
+                    <code
+                      css={[
+                        basePromptElementStyles,
+                        css`
+                          font-size: 0.75rem;
+                          color: white;
+                          font-family: monospace;
+                          line-height: 1.23;
+                        `,
+                      ]}
+                    >
+                      {isComponent ? `<${caller} />` : caller}
+                    </code>{' '}
+                  </p>
+
+                  <Link
+                    href='https://clerk.com/docs/guides/organizations/overview'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    Learn more
+                  </Link>
+                </>
+              )}
+            </Flex>
+
+            {hasPersonalAccountsEnabled && (
+              <Box
+                sx={t => ({
+                  display: 'grid',
+                  gridTemplateRows: isEnabled ? '0fr' : '1fr',
+                  transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
+                  marginInline: '-0.5rem',
+                  overflow: 'hidden',
+                })}
+                {...(isEnabled && { inert: '' })}
+              >
+                <Flex
+                  sx={t => ({
+                    minHeight: 0,
+                    paddingInline: '0.5rem',
+                    opacity: isEnabled ? 0 : 1,
+                    transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
+                  })}
+                >
+                  <Flex sx={t => ({ marginTop: t.sizes.$2 })}>
+                    <Switch
+                      label='Allow personal account'
+                      description='Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.'
+                      checked={allowPersonalAccount}
+                      onChange={() => setAllowPersonalAccount(prev => !prev)}
+                    />
+                  </Flex>
+                </Flex>
+              </Box>
+            )}
+          </Flex>
+
+          <span
+            css={css`
+              height: 1px;
+              display: block;
+              width: calc(100% - 2px);
+              margin-inline: auto;
+              background-color: #151515;
+              box-shadow: 0px 1px 0px 0px #424242;
+            `}
+          />
+
+          <Flex
+            justify='center'
+            sx={t => ({
+              padding: `${t.sizes.$4} ${t.sizes.$6}`,
+              gap: t.sizes.$3,
+              justifyContent: 'flex-end',
+            })}
+          >
+            {isEnabled ? (
+              <PromptButton
+                variant='solid'
+                onClick={() => {
+                  if (!clerk.user) {
+                    void clerk.redirectToSignIn();
+                    clerk.__internal_closeEnableOrganizationsPrompt?.();
+                  } else {
+                    onSuccess?.();
+                  }
+                }}
+              >
+                {clerk.user ? 'Continue' : 'Sign in to continue'}
+              </PromptButton>
+            ) : (
+              <>
+                <PromptButton
+                  variant='outline'
+                  onClick={() => {
+                    clerk?.__internal_closeEnableOrganizationsPrompt?.();
+                    onClose?.();
+                  }}
+                >
+                  I&apos;ll remove it myself
+                </PromptButton>
+
+                <PromptButton
+                  variant='solid'
+                  onClick={handleEnableOrganizations}
+                  disabled={isLoading}
+                >
+                  Enable Organizations
+                </PromptButton>
+              </>
+            )}
+          </Flex>
+        </PromptContainer>
+      </Modal>
+    </Portal>
+  );
+};
+
+/**
+ * A prompt that allows the user to enable the Organizations feature for their development instance
+ * @internal
+ */
+export const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {
+  return (
+    <InternalThemeProvider>
+      <EnableOrganizationsPromptInternal {...props} />
+    </InternalThemeProvider>
+  );
+};
+
+const baseButtonStyles = css`
+  ${basePromptElementStyles};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.12px;
+  color: white;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);
+  white-space: nowrap;
+  user-select: none;
+  color: white;
+  outline: none;
+
+  &:not(:disabled) {
+    transition: 120ms ease-in-out;
+    transition-property: background-color, border-color, box-shadow, color;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible:not(:disabled) {
+    outline: 2px solid white;
+    outline-offset: 2px;
+  }
+`;
+
+const buttonSolidStyles = css`
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;
+  box-shadow:
+    0 0 3px 0 rgba(253, 224, 71, 0) inset,
+    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
+    0 0 0 1px rgba(0, 0, 0, 0.12),
+    0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
+
+  &:hover:not(:disabled) {
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;
+    box-shadow:
+      0 0 3px 0 rgba(253, 224, 71, 0) inset,
+      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
+      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
+      0 0 0 1px rgba(0, 0, 0, 0.12),
+      0 1.5px 2px 0 rgba(0, 0, 0, 0.48);
+  }
+`;
+
+const buttonOutlineStyles = css`
+  border: 1px solid rgba(118, 118, 132, 0.25);
+  background: rgba(69, 69, 69, 0.1);
+
+  &:hover:not(:disabled) {
+    border-color: rgba(118, 118, 132, 0.5);
+  }
+`;
+
+const buttonVariantStyles = {
+  solid: buttonSolidStyles,
+  outline: buttonOutlineStyles,
+} as const;
+
+type PromptButtonVariant = keyof typeof buttonVariantStyles;
+
+type PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {
+  variant?: PromptButtonVariant;
+};
+
+const PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant = 'solid', ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      type='button'
+      css={[baseButtonStyles, buttonVariantStyles[variant]]}
+      {...props}
+    />
+  );
+});
+
+type SwitchProps = React.ComponentProps<'input'> & {
+  label: string;
+  description?: string;
+};
+
+const TRACK_PADDING = '2px';
+const TRACK_INNER_WIDTH = (t: Theme) => t.sizes.$6;
+const TRACK_HEIGHT = (t: Theme) => t.sizes.$4;
+const THUMB_WIDTH = (t: Theme) => t.sizes.$3;
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  ({ label, description, checked: controlledChecked, defaultChecked, onChange, ...props }, ref) => {
+    const descriptionId = useId();
+
+    const isControlled = controlledChecked !== undefined;
+    const [internalChecked, setInternalChecked] = useState(!!defaultChecked);
+    const checked = isControlled ? controlledChecked : internalChecked;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalChecked(e.target.checked);
+      }
+      onChange?.(e);
+    };
+
+    return (
+      <Flex
+        direction='col'
+        gap={1}
+      >
+        <Flex
+          as='label'
+          gap={2}
+          align='center'
+          sx={{
+            isolation: 'isolate',
+            userSelect: 'none',
+            '&:has(input:focus-visible) > input + span': {
+              outline: '2px solid white',
+              outlineOffset: '2px',
+            },
+            '&:has(input:disabled) > input + span': {
+              opacity: 0.6,
+              cursor: 'not-allowed',
+              pointerEvents: 'none',
+            },
+          }}
+        >
+          <input
+            type='checkbox'
+            {...props}
+            ref={ref}
+            role='switch'
+            {...(isControlled ? { checked } : { defaultChecked })}
+            onChange={handleChange}
+            css={{ ...common.visuallyHidden() }}
+            aria-describedby={description ? descriptionId : undefined}
+          />
+          <Span
+            sx={t => {
+              const trackWidth = `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING})`;
+              const trackHeight = `calc(${TRACK_HEIGHT(t)} + ${TRACK_PADDING})`;
+              return {
+                display: 'flex',
+                alignItems: 'center',
+                paddingInline: TRACK_PADDING,
+                width: trackWidth,
+                height: trackHeight,
+                border: '1px solid rgba(255, 255, 255, 0.2)',
+                backgroundColor: checked ? '#6C47FF' : 'rgba(0, 0, 0, 0.2)',
+                borderRadius: 999,
+                transition: 'background-color 0.2s ease-in-out',
+              };
+            }}
+          >
+            <Span
+              sx={t => {
+                const size = THUMB_WIDTH(t);
+                const maxTranslateX = `calc(${TRACK_INNER_WIDTH(t)} - ${size} - ${TRACK_PADDING})`;
+                return {
+                  width: size,
+                  height: size,
+                  borderRadius: 9999,
+                  backgroundColor: 'white',
+                  boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.1)',
+                  transform: `translateX(${checked ? maxTranslateX : '0'})`,
+                  transition: 'transform 0.2s ease-in-out',
+                  '@media (prefers-reduced-motion: reduce)': {
+                    transition: 'none',
+                  },
+                };
+              }}
+            />
+          </Span>
+          <span
+            css={[
+              basePromptElementStyles,
+              css`
+                font-size: 0.875rem;
+                font-weight: 500;
+                line-height: 1.25;
+                color: white;
+              `,
+            ]}
+          >
+            {label}
+          </span>
+        </Flex>
+        {description ? (
+          <Span
+            id={descriptionId}
+            sx={t => [
+              basePromptElementStyles,
+              {
+                display: 'block',
+                paddingInlineStart: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING} + ${t.sizes.$2})`,
+                fontSize: '0.75rem',
+                lineHeight: '1.3333333333',
+                color: '#c3c3c6',
+                textWrap: 'pretty',
+              },
+            ]}
+          >
+            {description}
+          </Span>
+        ) : null}
+      </Flex>
+    );
+  },
+);
+
+const Link = forwardRef<HTMLAnchorElement, React.ComponentProps<'a'> & { css?: SerializedStyles }>(
+  ({ children, css: cssProp, ...props }, ref) => {
+    return (
+      <a
+        ref={ref}
+        {...props}
+        css={[
+          basePromptElementStyles,
+          css`
+            color: #a8a8ff;
+            font-size: inherit;
+            font-weight: 500;
+            line-height: 1.3;
+            font-size: 0.8125rem;
+            min-width: 0;
+          `,
+          cssProp,
+        ]}
+      >
+        {children}
+      </a>
+    );
+  },
+);
+
+const CoinFlip = ({ isEnabled }: { isEnabled: boolean }) => {
+  const [rotation, setRotation] = useState(0);
+
+  useLayoutEffect(() => {
+    if (isEnabled) {
+      setRotation(r => (r === 0 ? 180 : 0));
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setRotation(r => (r === 0 ? 180 : 0));
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [isEnabled]);
+
+  let frontFaceType: 'idle' | 'success' = 'idle';
+  let backFaceType: 'warning' | 'success' = 'warning';
+
+  if (isEnabled) {
+    if (rotation === 0) {
+      frontFaceType = 'success';
+      backFaceType = 'warning';
+    } else {
+      backFaceType = 'success';
+      frontFaceType = 'idle';
+    }
+  }
+
+  const renderContent = (type: 'idle' | 'warning' | 'success') => {
+    switch (type) {
+      case 'idle':
+        return <ClerkLogoIcon />;
+      case 'success':
+        return (
+          <PromptSuccessIcon
+            css={css`
+              width: 1.25rem;
+              height: 1.25rem;
+            `}
+          />
+        );
+      case 'warning':
+        return (
+          <svg
+            css={css`
+              width: 1.25rem;
+              height: 1.25rem;
+            `}
+            viewBox='0 0 20 20'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+          >
+            <path
+              opacity='0.2'
+              d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'
+              fill='#EAB308'
+            />
+            <path
+              fillRule='evenodd'
+              clipRule='evenodd'
+              d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'
+              fill='#EAB308'
+            />
+            <path
+              fillRule='evenodd'
+              clipRule='evenodd'
+              d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'
+              fill='#EAB308'
+            />
+            <path
+              fillRule='evenodd'
+              clipRule='evenodd'
+              d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'
+              fill='#EAB308'
+            />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <div
+      css={css`
+        perspective: 1000px;
+        width: 1.25rem;
+        height: 1.25rem;
+      `}
+    >
+      <div
+        css={css`
+          position: relative;
+          width: 100%;
+          height: 100%;
+          transform-style: preserve-3d;
+          transition: transform 0.6s ease-in-out;
+          transform: rotateY(${rotation}deg);
+
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
+        `}
+      >
+        <span
+          aria-hidden
+          css={css`
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            -webkit-font-smoothing: antialiased;
+            transform: rotateY(0deg);
+          `}
+        >
+          {renderContent(frontFaceType)}
+        </span>
+
+        <span
+          aria-hidden
+          css={css`
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            transform: rotateY(180deg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            -webkit-font-smoothing: antialiased;
+          `}
+        >
+          {renderContent(backFaceType)}
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/KeySlashIcon.tsx
similarity index 100%
rename from packages/clerk-js/src/ui/components/KeylessPrompt/KeySlashIcon.tsx
rename to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/KeySlashIcon.tsx
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
similarity index 82%
rename from packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
rename to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
index 4e354ad4f44..d6e5070cdd4 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/index.tsx
@@ -5,10 +5,16 @@ import type { PropsWithChildren } from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { Flex, Link } from '../../customizables';
-import { Portal } from '../../elements/Portal';
-import { InternalThemeProvider } from '../../styledSystem';
-import { ClerkLogoIcon } from './ClerkLogoIcon';
+import { Flex, Link } from '../../../customizables';
+import { Portal } from '../../../elements/Portal';
+import { InternalThemeProvider } from '../../../styledSystem';
+import {
+  basePromptElementStyles,
+  ClerkLogoIcon,
+  handleDashboardUrlParsing,
+  PromptContainer,
+  PromptSuccessIcon,
+} from '../shared';
 import { KeySlashIcon } from './KeySlashIcon';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
 
@@ -22,30 +28,6 @@ const buttonIdentifierPrefix = `--clerk-keyless-prompt`;
 const buttonIdentifier = `${buttonIdentifierPrefix}-button`;
 const contentIdentifier = `${buttonIdentifierPrefix}-content`;
 
-const baseElementStyles = css`
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  line-height: 1.5;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    avenir next,
-    avenir,
-    segoe ui,
-    helvetica neue,
-    helvetica,
-    Cantarell,
-    Ubuntu,
-    roboto,
-    noto,
-    arial,
-    sans-serif;
-  text-decoration: none;
-`;
-
 /**
  * If we cannot reconstruct the url properly, then simply fallback to Clerk Dashboard
  */
@@ -57,25 +39,6 @@ function withLastActiveFallback(cb: () => string): string {
   }
 }
 
-function handleDashboardUrlParsing(url: string) {
-  // make sure this is a valid url
-  const __url = new URL(url);
-  const regex = /^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/;
-
-  const match = __url.href.match(regex);
-
-  if (!match) {
-    throw new Error('invalid value dashboard url structure');
-  }
-
-  // Extracting base domain, app ID with prefix, and instanceId with prefix
-  return {
-    baseDomain: `https://${match[1]}`,
-    appId: `app_${match[2]}`,
-    instanceId: `ins_${match[3]}`,
-  };
-}
-
 const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);
@@ -122,7 +85,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   }, [_props.copyKeysUrl]);
 
   const mainCTAStyles = css`
-    ${baseElementStyles};
+    ${basePromptElementStyles};
     display: flex;
     align-items: center;
     justify-content: center;
@@ -150,7 +113,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
 
   return (
     <Portal>
-      <Flex
+      <PromptContainer
         data-expanded={isForcedExpanded}
         sx={t => ({
           position: 'fixed',
@@ -160,10 +123,6 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           minWidth: '13.4rem',
           paddingLeft: `${t.space.$3}`,
           borderRadius: '1.25rem',
-          fontFamily: t.fonts.$main,
-          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
-          boxShadow:
-            '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
           transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
 
           '&[data-expanded="false"]:hover': {
@@ -192,7 +151,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           id={buttonIdentifier}
           onClick={() => !claimed && setIsExpanded(prev => !prev)}
           css={css`
-            ${baseElementStyles};
+            ${basePromptElementStyles};
             width: 100%;
             display: flex;
             justify-content: space-between;
@@ -206,29 +165,12 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             })}
           >
             {success ? (
-              <svg
-                width='1rem'
-                height='1rem'
-                viewBox='0 0 16 17'
-                fill='none'
-                aria-hidden
-                xmlns='http://www.w3.org/2000/svg'
-              >
-                <g opacity='0.88'>
-                  <path
-                    d='M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
-                    fill='#22C543'
-                    fillOpacity='0.16'
-                  />
-                  <path
-                    d='M6.06686 8.68372L7.51686 10.1337L9.93353 6.75039M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
-                    stroke='#22C543'
-                    strokeWidth='1.2'
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                  />
-                </g>
-              </svg>
+              <PromptSuccessIcon
+                css={css`
+                  width: 1rem;
+                  height: 1rem;
+                `}
+              />
             ) : claimed ? (
               <svg
                 width='1rem'
@@ -315,7 +257,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
                 success ? 'Claim completed' : claimed ? 'Missing environment keys' : 'Clerk is in keyless mode'
               }
               css={css`
-                ${baseElementStyles};
+                ${basePromptElementStyles};
                 color: #d9d9d9;
                 font-size: 0.875rem;
                 font-weight: 500;
@@ -381,7 +323,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           >
             <p
               css={css`
-                ${baseElementStyles};
+                ${basePromptElementStyles};
                 color: #b4b4b4;
                 font-size: 0.8125rem;
                 font-weight: 400;
@@ -532,7 +474,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
                       target='_blank'
                       rel='noopener noreferrer'
                       css={css`
-                        ${baseElementStyles};
+                        ${basePromptElementStyles};
                         color: #ffffff9e;
                         font-size: 0.75rem;
                         transition: color 120ms ease-out;
@@ -565,7 +507,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
               </Flex>
             ))}
         </Flex>
-      </Flex>
+      </PromptContainer>
       <BodyPortal>
         <a
           href={`#${buttonIdentifier}`}
diff --git a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts
similarity index 91%
rename from packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts
rename to packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts
index fca17dc5c6f..937585eee90 100644
--- a/packages/clerk-js/src/ui/components/KeylessPrompt/use-revalidate-environment.ts
+++ b/packages/clerk-js/src/ui/components/devPrompts/KeylessPrompt/use-revalidate-environment.ts
@@ -1,9 +1,9 @@
 import { useClerk } from '@clerk/shared/react';
 import { useEffect, useReducer, useRef } from 'react';
 
-import type { Clerk } from '../../../core/clerk';
-import type { Environment } from '../../../core/resources';
-import { useEnvironment } from '../../contexts';
+import type { Clerk } from '../../../../core/clerk';
+import type { Environment } from '../../../../core/resources';
+import { useEnvironment } from '../../../contexts';
 
 const THROTTLE_DURATION_MS = 10 * 1000;
 
diff --git a/packages/clerk-js/src/ui/components/devPrompts/shared.tsx b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
new file mode 100644
index 00000000000..c75db72821c
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/devPrompts/shared.tsx
@@ -0,0 +1,176 @@
+// eslint-disable-next-line no-restricted-imports
+import { css } from '@emotion/react';
+
+import { Flex } from '@/ui/customizables';
+
+/**
+ * A container for prompt components
+ * @internal
+ */
+export function PromptContainer({ children, sx, ...props }: React.ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      sx={t => [
+        {
+          borderRadius: '1.25rem',
+          fontFamily: t.fonts.$main,
+          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
+          boxShadow:
+            '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
+        },
+        sx,
+      ]}
+      {...props}
+    >
+      {children}
+    </Flex>
+  );
+}
+
+/**
+ * @internal
+ */
+export const basePromptElementStyles = css`
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: none;
+  line-height: 1.5;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif;
+  text-decoration: none;
+`;
+
+export function PromptSuccessIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      {...props}
+      viewBox='0 0 16 17'
+      fill='none'
+      aria-hidden
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g opacity='0.88'>
+        <path
+          d='M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
+          fill='#22C543'
+          fillOpacity='0.16'
+        />
+        <path
+          d='M6.06686 8.68372L7.51686 10.1337L9.93353 6.75039M13.8002 8.20039C13.8002 8.96206 13.6502 9.71627 13.3587 10.42C13.0672 11.1236 12.64 11.763 12.1014 12.3016C11.5628 12.8402 10.9234 13.2674 10.2198 13.5589C9.51607 13.8504 8.76186 14.0004 8.0002 14.0004C7.23853 14.0004 6.48432 13.8504 5.78063 13.5589C5.07694 13.2674 4.43756 12.8402 3.89898 12.3016C3.3604 11.763 2.93317 11.1236 2.64169 10.42C2.35022 9.71627 2.2002 8.96206 2.2002 8.20039C2.2002 6.66214 2.81126 5.18688 3.89898 4.09917C4.98669 3.01146 6.46194 2.40039 8.0002 2.40039C9.53845 2.40039 11.0137 3.01146 12.1014 4.09917C13.1891 5.18688 13.8002 6.66214 13.8002 8.20039Z'
+          stroke='#22C543'
+          strokeWidth='1.2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function handleDashboardUrlParsing(url: string) {
+  const __url = new URL(url);
+  const regex = /^https?:\/\/(.*?)\/apps\/app_(.+?)\/instances\/ins_(.+?)(?:\/.*)?$/;
+
+  const match = __url.href.match(regex);
+
+  if (!match) {
+    throw new Error('Invalid value Dashboard URL structure');
+  }
+
+  // Extracting base domain, app ID with prefix, and instanceId with prefix
+  return {
+    baseDomain: `https://${match[1]}`,
+    appId: `app_${match[2]}`,
+    instanceId: `ins_${match[3]}`,
+  };
+}
+
+/**
+ * @internal
+ */
+export function ClerkLogoIcon() {
+  return (
+    <svg
+      width='1rem'
+      height='1.25rem'
+      viewBox='0 0 16 20'
+      fill='none'
+      aria-hidden
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g filter='url(#filter0_i_438_501)'>
+        <path
+          d='M10.4766 9.99979C10.4766 11.3774 9.35978 12.4942 7.98215 12.4942C6.60452 12.4942 5.48773 11.3774 5.48773 9.99979C5.48773 8.62216 6.60452 7.50537 7.98215 7.50537C9.35978 7.50537 10.4766 8.62216 10.4766 9.99979Z'
+          fill='#BBBBBB'
+        />
+        <path
+          d='M12.4176 3.36236C12.6676 3.52972 12.6889 3.88187 12.4762 4.09457L10.6548 5.91595C10.4897 6.08107 10.2336 6.10714 10.0257 6.00071C9.41273 5.68684 8.71811 5.50976 7.98214 5.50976C5.5024 5.50976 3.49219 7.51998 3.49219 9.99972C3.49219 10.7357 3.66926 11.4303 3.98314 12.0433C4.08957 12.2511 4.06349 12.5073 3.89837 12.6724L2.07699 14.4938C1.86429 14.7065 1.51215 14.6851 1.34479 14.4352C0.495381 13.1666 0 11.641 0 9.99972C0 5.5913 3.57373 2.01758 7.98214 2.01758C9.62345 2.01758 11.1491 2.51296 12.4176 3.36236Z'
+          fill='#8F8F8F'
+        />
+        <path
+          d='M12.4762 15.905C12.6889 16.1177 12.6675 16.4698 12.4176 16.6372C11.149 17.4866 9.62342 17.982 7.9821 17.982C6.34078 17.982 4.81516 17.4866 3.54661 16.6372C3.29666 16.4698 3.27531 16.1177 3.48801 15.905L5.30938 14.0836C5.4745 13.9185 5.73066 13.8924 5.93851 13.9988C6.55149 14.3127 7.24612 14.4898 7.9821 14.4898C8.71808 14.4898 9.4127 14.3127 10.0257 13.9988C10.2335 13.8924 10.4897 13.9185 10.6548 14.0836L12.4762 15.905Z'
+          fill='#BBBBBB'
+        />
+      </g>
+      <defs>
+        <filter
+          id='filter0_i_438_501'
+          x='0'
+          y='1.86758'
+          width='12.6217'
+          height='16.1144'
+          filterUnits='userSpaceOnUse'
+          colorInterpolationFilters='sRGB'
+        >
+          <feFlood
+            floodOpacity='0'
+            result='BackgroundImageFix'
+          />
+          <feBlend
+            mode='normal'
+            in='SourceGraphic'
+            in2='BackgroundImageFix'
+            result='shape'
+          />
+          <feColorMatrix
+            in='SourceAlpha'
+            type='matrix'
+            values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+            result='hardAlpha'
+          />
+          <feOffset dy='-0.15' />
+          <feGaussianBlur stdDeviation='0.15' />
+          <feComposite
+            in2='hardAlpha'
+            operator='arithmetic'
+            k2='-1'
+            k3='1'
+          />
+          <feColorMatrix
+            type='matrix'
+            values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
+          />
+          <feBlend
+            mode='normal'
+            in2='shape'
+            result='effect1_innerShadow_438_501'
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/clerk-js/src/ui/customizables/parseAppearance.ts b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
index 11348a8f29d..cc2c53bb0bc 100644
--- a/packages/clerk-js/src/ui/customizables/parseAppearance.ts
+++ b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
@@ -27,7 +27,7 @@ type PublicAppearanceTopLevelKey = keyof Omit<
 export type AppearanceCascade = {
   globalAppearance?: Appearance;
   appearance?: Appearance;
-  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab';
+  appearanceKey: PublicAppearanceTopLevelKey | 'impersonationFab' | 'enableOrganizationsPrompt';
 };
 
 export type ParsedAppearance = {
diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx
index 193bf40d4f3..46934f2a5d8 100644
--- a/packages/clerk-js/src/ui/elements/Modal.tsx
+++ b/packages/clerk-js/src/ui/elements/Modal.tsx
@@ -20,11 +20,13 @@ type ModalProps = React.PropsWithChildren<{
   canCloseModal?: boolean;
   style?: React.CSSProperties;
   portalRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null>;
+  initialFocusRef?: number | React.MutableRefObject<HTMLElement | null>;
 }>;
 
 export const Modal = withFloatingTree((props: ModalProps) => {
   const { disableScrollLock, enableScrollLock } = useScrollLock();
-  const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot } = props;
+  const { handleClose, handleOpen, contentSx, containerSx, canCloseModal, id, style, portalRoot, initialFocusRef } =
+    props;
   const overlayRef = useRef<HTMLDivElement>(null);
   const { floating, isOpen, context, nodeId, toggle } = usePopover({
     defaultOpen: true,
@@ -57,6 +59,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
       isOpen={isOpen}
       outsideElementsInert
       root={portalRoot}
+      initialFocus={initialFocusRef}
     >
       <ModalContext.Provider value={modalCtx}>
         <Flex
diff --git a/packages/clerk-js/src/ui/elements/contexts/index.tsx b/packages/clerk-js/src/ui/elements/contexts/index.tsx
index f14986eedd2..fb38f0bb4ed 100644
--- a/packages/clerk-js/src/ui/elements/contexts/index.tsx
+++ b/packages/clerk-js/src/ui/elements/contexts/index.tsx
@@ -101,7 +101,8 @@ export type FlowMetadata = {
     | 'oauthConsent'
     | 'subscriptionDetails'
     | 'tasks'
-    | 'taskChooseOrganization';
+    | 'taskChooseOrganization'
+    | 'enableOrganizations';
   part?:
     | 'start'
     | 'emailCode'
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
index 3a5ecee7a9c..cd00ce8ee0b 100644
--- a/packages/clerk-js/src/ui/lazyModules/components.ts
+++ b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -17,7 +17,7 @@ const componentImportPaths = {
   BlankCaptchaModal: () => import(/* webpackChunkName: "blankcaptcha" */ './../components/BlankCaptchaModal'),
   UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
   Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
-  KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt'),
+  KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/devPrompts/KeylessPrompt'),
   PricingTable: () => import(/* webpackChunkName: "pricingTable" */ '../components/PricingTable'),
   Checkout: () => import(/* webpackChunkName: "checkout" */ '../components/Checkout'),
   SessionTasks: () => import(/* webpackChunkName: "sessionTasks" */ '../components/SessionTasks'),
@@ -27,6 +27,8 @@ const componentImportPaths = {
   SubscriptionDetails: () => import(/* webpackChunkName: "subscriptionDetails" */ '../components/SubscriptionDetails'),
   APIKeys: () => import(/* webpackChunkName: "apiKeys" */ '../components/APIKeys/APIKeys'),
   OAuthConsent: () => import(/* webpackChunkName: "oauthConsent" */ '../components/OAuthConsent/OAuthConsent'),
+  EnableOrganizationsPrompt: () =>
+    import(/* webpackChunkName: "enableOrganizationsPrompt" */ '../components/devPrompts/EnableOrganizationsPrompt'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -44,6 +46,10 @@ export const UserVerificationModal = lazy(() =>
   componentImportPaths.UserVerification().then(module => ({ default: module.UserVerificationModal })),
 );
 
+export const EnableOrganizationsPrompt = lazy(() =>
+  componentImportPaths.EnableOrganizationsPrompt().then(module => ({ default: module.EnableOrganizationsPrompt })),
+);
+
 export const SignUp = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUp })));
 
 export const SignUpModal = lazy(() => componentImportPaths.SignUp().then(module => ({ default: module.SignUpModal })));
@@ -144,6 +150,7 @@ export const ClerkComponents = {
   UserButton,
   UserProfile,
   UserVerification,
+  EnableOrganizationsPrompt,
   OrganizationSwitcher,
   OrganizationList,
   OrganizationProfile,
diff --git a/packages/clerk-js/src/ui/lazyModules/providers.tsx b/packages/clerk-js/src/ui/lazyModules/providers.tsx
index 9e2c871f23d..827d869a650 100644
--- a/packages/clerk-js/src/ui/lazyModules/providers.tsx
+++ b/packages/clerk-js/src/ui/lazyModules/providers.tsx
@@ -209,6 +209,23 @@ export const LazyImpersonationFabProvider = (
   );
 };
 
+export const LazyEnableOrganizationsPromptProvider = (
+  props: React.PropsWithChildren<{ globalAppearance: Appearance | undefined }>,
+) => {
+  return (
+    <Suspense>
+      <VirtualRouter startPath=''>
+        <AppearanceProvider
+          globalAppearance={props.globalAppearance}
+          appearanceKey={'enableOrganizationsPrompt'}
+        >
+          {props.children}
+        </AppearanceProvider>
+      </VirtualRouter>
+    </Suspense>
+  );
+};
+
 type LazyOneTapRendererProps = React.PropsWithChildren<
   {
     componentProps: any;
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index bb0ffd1633c..fc8b450987f 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -2,7 +2,10 @@ import { inBrowser } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { loadClerkJsScript } from '@clerk/shared/loadClerkJsScript';
 import type {
+  __internal_AttemptToEnableEnvironmentSettingParams,
+  __internal_AttemptToEnableEnvironmentSettingResult,
   __internal_CheckoutProps,
+  __internal_EnableOrganizationsPromptProps,
   __internal_OAuthConsentProps,
   __internal_PlanDetailsProps,
   __internal_SubscriptionDetailsProps,
@@ -122,6 +125,7 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
   private clerkjs: BrowserClerk | HeadlessBrowserClerk | null = null;
   private preopenOneTap?: null | GoogleOneTapProps = null;
   private preopenUserVerification?: null | __internal_UserVerificationProps = null;
+  private preopenEnableOrganizationsPrompt?: null | __internal_EnableOrganizationsPromptProps = null;
   private preopenSignIn?: null | SignInProps = null;
   private preopenCheckout?: null | __internal_CheckoutProps = null;
   private preopenPlanDetails: null | __internal_PlanDetailsProps = null;
@@ -624,6 +628,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       clerkjs.openWaitlist(this.preOpenWaitlist);
     }
 
+    if (this.preopenEnableOrganizationsPrompt) {
+      clerkjs.__internal_openEnableOrganizationsPrompt(this.preopenEnableOrganizationsPrompt);
+    }
+
     this.premountSignInNodes.forEach((props, node) => {
       clerkjs.mountSignIn(node, props);
     });
@@ -865,6 +873,22 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     }
   };
 
+  __internal_openEnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__internal_openEnableOrganizationsPrompt(props);
+    } else {
+      this.preopenEnableOrganizationsPrompt = props;
+    }
+  };
+
+  __internal_closeEnableOrganizationsPrompt = () => {
+    if (this.clerkjs && this.loaded) {
+      this.clerkjs.__internal_closeEnableOrganizationsPrompt();
+    } else {
+      this.preopenEnableOrganizationsPrompt = null;
+    }
+  };
+
   openGoogleOneTap = (props?: GoogleOneTapProps) => {
     if (this.clerkjs && this.loaded) {
       this.clerkjs.openGoogleOneTap(props);
@@ -1462,4 +1486,15 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
       this.premountMethodCalls.set('signOut', callback);
     }
   };
+
+  __internal_attemptToEnableEnvironmentSetting = (
+    options: __internal_AttemptToEnableEnvironmentSettingParams,
+  ): __internal_AttemptToEnableEnvironmentSettingResult | void => {
+    const callback = () => this.clerkjs?.__internal_attemptToEnableEnvironmentSetting(options);
+    if (this.clerkjs && this.loaded) {
+      return callback() as __internal_AttemptToEnableEnvironmentSettingResult;
+    } else {
+      this.premountMethodCalls.set('__internal_attemptToEnableEnvironmentSetting', callback);
+    }
+  };
 }
diff --git a/packages/shared/src/organization.ts b/packages/shared/src/organization.ts
index 12d8ea0689e..36b1905acff 100644
--- a/packages/shared/src/organization.ts
+++ b/packages/shared/src/organization.ts
@@ -1,7 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+import { useClerk } from './react';
 import type { OrganizationMembershipResource } from './types';
 
 /**
  * Finds the organization membership for a given organization ID from a list of memberships
+ *
  * @param organizationMemberships - Array of organization memberships to search through
  * @param organizationId - ID of the organization to find the membership for
  * @returns The matching organization membership or undefined if not found
@@ -14,3 +18,27 @@ export function getCurrentOrganizationMembership(
     organizationMembership => organizationMembership.organization.id === organizationId,
   );
 }
+
+/**
+ * Attempts to enable the organizations environment setting for a given caller
+ *
+ * @internal
+ */
+export function useAttemptToEnableOrganizations(caller: 'useOrganization' | 'useOrganizationList') {
+  const clerk = useClerk();
+  const hasAttempted = useRef(false);
+
+  useEffect(() => {
+    // Guard to not run this effect twice on Clerk resource update
+    if (hasAttempted.current) {
+      return;
+    }
+
+    hasAttempted.current = true;
+    // Optional chaining is important for `@clerk/clerk-react` usage with older clerk-js versions that don't have the method
+    clerk.__internal_attemptToEnableEnvironmentSetting?.({
+      for: 'organizations',
+      caller,
+    });
+  }, [clerk, caller]);
+}
diff --git a/packages/shared/src/react/__tests__/payment-element.test.tsx b/packages/shared/src/react/__tests__/payment-element.test.tsx
index 67b2e7b8674..c932c5ee78c 100644
--- a/packages/shared/src/react/__tests__/payment-element.test.tsx
+++ b/packages/shared/src/react/__tests__/payment-element.test.tsx
@@ -53,12 +53,6 @@ vi.mock('../hooks/useUser', () => ({
   }),
 }));
 
-vi.mock('../hooks/useOrganization', () => ({
-  useOrganization: () => ({
-    organization: null,
-  }),
-}));
-
 const mockInitializePaymentMethod = vi.fn().mockResolvedValue({
   externalGatewayId: 'acct_123',
   externalClientSecret: 'seti_123',
diff --git a/packages/shared/src/react/hooks/useCheckout.ts b/packages/shared/src/react/hooks/useCheckout.ts
index 146727ebc1d..950db1d6c61 100644
--- a/packages/shared/src/react/hooks/useCheckout.ts
+++ b/packages/shared/src/react/hooks/useCheckout.ts
@@ -122,6 +122,7 @@ export const useCheckout = (options?: UseCheckoutParams): __experimental_UseChec
   const { for: forOrganization, planId, planPeriod } = options || contextOptions;
 
   const clerk = useClerk();
+  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance
   const { organization } = useOrganizationContext();
   const { isLoaded, user } = useUser();
 
diff --git a/packages/shared/src/react/hooks/useOrganization.tsx b/packages/shared/src/react/hooks/useOrganization.tsx
index b6e716324bd..28ee4b9bee8 100644
--- a/packages/shared/src/react/hooks/useOrganization.tsx
+++ b/packages/shared/src/react/hooks/useOrganization.tsx
@@ -1,4 +1,4 @@
-import { getCurrentOrganizationMembership } from '../../organization';
+import { getCurrentOrganizationMembership, useAttemptToEnableOrganizations } from '../../organization';
 import { eventMethodCalled } from '../../telemetry/events/method-called';
 import type {
   GetDomainsParams,
@@ -280,6 +280,7 @@ export function useOrganization<T extends UseOrganizationParams>(params?: T): Us
   } = params || {};
 
   useAssertWrappedByClerkProvider('useOrganization');
+  useAttemptToEnableOrganizations('useOrganization');
 
   const { organization } = useOrganizationContext();
   const session = useSessionContext();
diff --git a/packages/shared/src/react/hooks/useOrganizationList.tsx b/packages/shared/src/react/hooks/useOrganizationList.tsx
index 280e9b18363..a75f124307d 100644
--- a/packages/shared/src/react/hooks/useOrganizationList.tsx
+++ b/packages/shared/src/react/hooks/useOrganizationList.tsx
@@ -1,3 +1,4 @@
+import { useAttemptToEnableOrganizations } from '../../organization';
 import { eventMethodCalled } from '../../telemetry/events/method-called';
 import type {
   CreateOrganizationParams,
@@ -251,6 +252,7 @@ export function useOrganizationList<T extends UseOrganizationListParams>(params?
   const { userMemberships, userInvitations, userSuggestions } = params || {};
 
   useAssertWrappedByClerkProvider('useOrganizationList');
+  useAttemptToEnableOrganizations('useOrganizationList');
 
   const userMembershipsSafeValues = useWithSafeValues(userMemberships, {
     initialPage: 1,
diff --git a/packages/shared/src/types/appearance.ts b/packages/shared/src/types/appearance.ts
index 117548c680f..71ba756dbcd 100644
--- a/packages/shared/src/types/appearance.ts
+++ b/packages/shared/src/types/appearance.ts
@@ -1035,6 +1035,7 @@ export type OrganizationListTheme = Theme;
 export type OrganizationProfileTheme = Theme;
 export type CreateOrganizationTheme = Theme;
 export type UserVerificationTheme = Theme;
+export type EnableOrganizationsTheme = Theme;
 export type WaitlistTheme = Theme;
 export type PricingTableTheme = Theme;
 export type CheckoutTheme = Theme;
@@ -1123,4 +1124,8 @@ export type Appearance<T = Theme> = T &
      * Theme overrides that only apply to the `<TaskChooseOrganization />` component
      */
     taskChooseOrganization?: T;
+    /**
+     * Theme overrides that only apply to the `<EnableOrganizations/>` component
+     */
+    enableOrganizations?: T;
   };
diff --git a/packages/shared/src/types/clerk.ts b/packages/shared/src/types/clerk.ts
index b37e7d0a8a8..1100d1543e5 100644
--- a/packages/shared/src/types/clerk.ts
+++ b/packages/shared/src/types/clerk.ts
@@ -320,6 +320,23 @@ export interface Clerk {
    */
   __internal_closeReverification: () => void;
 
+  /**
+   * Attempts to enable a environment setting from a development instance, prompting if disabled.
+   */
+  __internal_attemptToEnableEnvironmentSetting: (
+    options: __internal_AttemptToEnableEnvironmentSettingParams,
+  ) => __internal_AttemptToEnableEnvironmentSettingResult;
+
+  /**
+   * Opens the Clerk Enable Organizations prompt for development instance
+   */
+  __internal_openEnableOrganizationsPrompt: (props: __internal_EnableOrganizationsPromptProps) => void;
+
+  /**
+   * Closes the Clerk Enable Organizations modal.
+   */
+  __internal_closeEnableOrganizationsPrompt: () => void;
+
   /**
    * Opens the Google One Tap component.
    *
@@ -1429,25 +1446,33 @@ export type __internal_UserVerificationProps = RoutingOptions & {
 
 export type __internal_UserVerificationModalProps = WithoutRouting<__internal_UserVerificationProps>;
 
-export type __internal_ComponentNavigationContext = {
-  /**
-   * The `navigate` reference within the component router context
-   */
-  navigate: (
-    to: string,
-    options?: {
-      searchParams?: URLSearchParams;
-    },
-  ) => Promise<unknown>;
-  /**
-   * This path represents the root route for a specific component type and is used
-   * for internal routing and navigation.
-   *
-   * @example
-   * indexPath: '/sign-in'  // When <SignIn path='/sign-in' />
-   * indexPath: '/sign-up'  // When <SignUp path='/sign-up' />
-   */
-  indexPath: string;
+export type __internal_EnableOrganizationsPromptProps = {
+  onSuccess?: () => void;
+  onClose?: () => void;
+} & {
+  caller:
+    | 'OrganizationSwitcher'
+    | 'OrganizationProfile'
+    | 'OrganizationList'
+    | 'useOrganizationList'
+    | 'useOrganization';
+};
+
+export type __internal_AttemptToEnableEnvironmentSettingParams = {
+  for: 'organizations';
+  caller:
+    | 'OrganizationSwitcher'
+    | 'OrganizationProfile'
+    | 'OrganizationList'
+    | 'CreateOrganization'
+    | 'TaskChooseOrganization'
+    | 'useOrganizationList'
+    | 'useOrganization';
+  onClose?: () => void;
+};
+
+export type __internal_AttemptToEnableEnvironmentSettingResult = {
+  isEnabled: boolean;
 };
 
 type GoogleOneTapRedirectUrlProps = SignInForceRedirectUrl & SignUpForceRedirectUrl;
diff --git a/packages/shared/src/types/devtools.ts b/packages/shared/src/types/devtools.ts
new file mode 100644
index 00000000000..93a46416245
--- /dev/null
+++ b/packages/shared/src/types/devtools.ts
@@ -0,0 +1,13 @@
+import type { ClerkResource } from './resource';
+
+export type EnableEnvironmentSettingParams = {
+  enable_organizations: boolean;
+  organization_allow_personal_accounts?: boolean;
+};
+
+/**
+ * @internal
+ */
+export interface DevToolsResource extends ClerkResource {
+  __internal_enableEnvironmentSetting: (params: EnableEnvironmentSettingParams) => Promise<void>;
+}
diff --git a/packages/shared/src/types/index.ts b/packages/shared/src/types/index.ts
index 833538f382b..57123038f78 100644
--- a/packages/shared/src/types/index.ts
+++ b/packages/shared/src/types/index.ts
@@ -12,6 +12,7 @@ export type * from './commerceSettings';
 export type * from './customMenuItems';
 export type * from './customPages';
 export type * from './deletedObject';
+export type * from './devtools';
 export type * from './displayConfig';
 export type * from './elementIds';
 export type * from './emailAddress';
diff --git a/packages/vue/src/composables/useOrganization.ts b/packages/vue/src/composables/useOrganization.ts
index 409d31396e2..7310cae8add 100644
--- a/packages/vue/src/composables/useOrganization.ts
+++ b/packages/vue/src/composables/useOrganization.ts
@@ -1,6 +1,6 @@
 import { getCurrentOrganizationMembership } from '@clerk/shared/organization';
 import type { OrganizationMembershipResource, OrganizationResource } from '@clerk/shared/types';
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 
 import type { ToComputedRefs } from '../utils';
 import { toComputedRefs } from '../utils';
@@ -56,6 +56,21 @@ export const useOrganization: UseOrganization = () => {
   const { clerk, organizationCtx } = useClerkContext('useOrganization');
   const { session } = useSession();
 
+  const unwatch = watch(
+    clerk,
+    value => {
+      if (value) {
+        // Optional chaining is important for `@clerk/vue` usage with older clerk-js versions that don't have the method
+        value.__internal_attemptToEnableEnvironmentSetting?.({
+          for: 'organizations',
+          caller: 'useOrganization',
+        });
+        unwatch();
+      }
+    },
+    { immediate: true },
+  );
+
   const result = computed<UseOrganizationReturn>(() => {
     if (organizationCtx.value === undefined) {
       return { isLoaded: false, organization: undefined, membership: undefined };