diff --git a/.changeset/lemon-ways-search.md b/.changeset/lemon-ways-search.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/lemon-ways-search.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-up/steps/continue.tsx b/packages/ui/src/components/sign-up/steps/continue.tsx
index 4e54848b5f4..d5ace710b1d 100644
--- a/packages/ui/src/components/sign-up/steps/continue.tsx
+++ b/packages/ui/src/components/sign-up/steps/continue.tsx
@@ -9,15 +9,14 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
-import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
 import * as Icon from '~/primitives/icon';
 
 export function SignUpContinue() {
-  const { isDevelopmentOrStaging } = useEnvironment();
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
@@ -25,8 +24,7 @@ export function SignUpContinue() {
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
   const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
-
-  const isDev = isDevelopmentOrStaging();
+  const renderDevModeWarning = useDevModeWarning();
 
   return (
     <Common.Loading scope='global'>
@@ -111,7 +109,7 @@ export function SignUpContinue() {
                     );
                   }}
                 </Common.Loading>
-                {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
+                {renderDevModeWarning ? <Card.Banner>Development mode</Card.Banner> : null}
               </Card.Content>
               <Card.Footer branded={branded}>
                 <Card.FooterAction>
diff --git a/packages/ui/src/components/sign-up/steps/start.tsx b/packages/ui/src/components/sign-up/steps/start.tsx
index 6606004e706..1ae8b95bd6b 100644
--- a/packages/ui/src/components/sign-up/steps/start.tsx
+++ b/packages/ui/src/components/sign-up/steps/start.tsx
@@ -12,6 +12,7 @@ import { PasswordField } from '~/common/password-field';
 import { PhoneNumberField } from '~/common/phone-number-field';
 import { UsernameField } from '~/common/username-field';
 import { useAttributes } from '~/hooks/use-attributes';
+import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
 import { useEnabledConnections } from '~/hooks/use-enabled-connections';
 import { useEnvironment } from '~/hooks/use-environment';
@@ -24,7 +25,7 @@ import { Separator } from '~/primitives/separator';
 export function SignUpStart() {
   const clerk = useClerk();
   const enabledConnections = useEnabledConnections();
-  const { isDevelopmentOrStaging, userSettings } = useEnvironment();
+  const { userSettings } = useEnvironment();
   const { t } = useLocalizations();
   const { enabled: firstNameEnabled, required: firstNameRequired } = useAttributes('first_name');
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
@@ -36,7 +37,8 @@ export function SignUpStart() {
 
   const hasConnection = enabledConnections.length > 0;
   const hasIdentifier = emailAddressEnabled || usernameEnabled || phoneNumberEnabled;
-  const isDev = isDevelopmentOrStaging();
+  const renderDevModeWarning = useDevModeWarning();
+
   return (
     <Common.Loading scope='global'>
       {isGlobalLoading => {
@@ -144,7 +146,7 @@ export function SignUpStart() {
                     }}
                   </Common.Loading>
                 ) : null}
-                {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
+                {renderDevModeWarning ? <Card.Banner>Development mode</Card.Banner> : null}
               </Card.Content>
               <Card.Footer branded={branded}>
                 <Card.FooterAction>
diff --git a/packages/ui/src/components/sign-up/steps/verifications.tsx b/packages/ui/src/components/sign-up/steps/verifications.tsx
index 9e197a7d5ac..634fedd10bb 100644
--- a/packages/ui/src/components/sign-up/steps/verifications.tsx
+++ b/packages/ui/src/components/sign-up/steps/verifications.tsx
@@ -5,8 +5,8 @@ import * as SignUp from '@clerk/elements/sign-up';
 import { GlobalError } from '~/common/global-error';
 import { OTPField } from '~/common/otp-field';
 import { parsePhoneString } from '~/common/phone-number-field/utils';
+import { useDevModeWarning } from '~/hooks/use-dev-mode-warning';
 import { useDisplayConfig } from '~/hooks/use-display-config';
-import { useEnvironment } from '~/hooks/use-environment';
 import { useLocalizations } from '~/hooks/use-localizations';
 import { Button } from '~/primitives/button';
 import * as Card from '~/primitives/card';
@@ -43,11 +43,10 @@ function SignUpIdentifier({ emailAddress, phoneNumber }: Identifier) {
   ============================================ */
 
 export function SignUpVerifications() {
-  const { isDevelopmentOrStaging } = useEnvironment();
   const { t } = useLocalizations();
   const { branded, applicationName, homeUrl, logoImageUrl } = useDisplayConfig();
 
-  const isDev = isDevelopmentOrStaging();
+  const renderDevModeNotice = useDevModeWarning();
 
   return (
     <Common.Loading scope='global'>
@@ -271,7 +270,7 @@ export function SignUpVerifications() {
                     </SignUp.Action>
                   </Card.Body>
                 </SignUp.Strategy>
-                {isDev ? <Card.Banner>Development mode</Card.Banner> : null}
+                {renderDevModeNotice ? <Card.Banner>Development mode</Card.Banner> : null}
               </Card.Content>
               <Card.Footer branded={branded} />
             </Card.Root>
diff --git a/packages/ui/src/hooks/use-appearance.ts b/packages/ui/src/hooks/use-appearance.ts
new file mode 100644
index 00000000000..027ba9a1eb2
--- /dev/null
+++ b/packages/ui/src/hooks/use-appearance.ts
@@ -0,0 +1,8 @@
+import type { Appearance } from '@clerk/types';
+
+import { useOptions } from './use-options';
+
+export function useAppearance() {
+  const { appearance } = useOptions();
+  return (appearance as Appearance) || {};
+}
diff --git a/packages/ui/src/hooks/use-dev-mode-warning.ts b/packages/ui/src/hooks/use-dev-mode-warning.ts
new file mode 100644
index 00000000000..7f2328f8340
--- /dev/null
+++ b/packages/ui/src/hooks/use-dev-mode-warning.ts
@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+
+import { useAppearance } from './use-appearance';
+import { useEnvironment } from './use-environment';
+
+export function useDevModeWarning() {
+  const { displayConfig, isDevelopmentOrStaging } = useEnvironment();
+  const isDevelopment = isDevelopmentOrStaging();
+  const { layout } = useAppearance();
+  const unsafeDisabled = layout?.unsafe_disableDevelopmentModeWarnings || false;
+  const developmentUiDisabled = isDevelopment && unsafeDisabled;
+  const showDevModeWarning = useMemo(
+    () => !developmentUiDisabled && displayConfig.showDevModeWarning,
+    [developmentUiDisabled, displayConfig],
+  );
+  return showDevModeWarning;
+}