diff --git a/.changeset/sharp-terms-boil.md b/.changeset/sharp-terms-boil.md
new file mode 100644
index 00000000000..b6f1405c609
--- /dev/null
+++ b/.changeset/sharp-terms-boil.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Add mobile support for `<ConfigureSSO />` navbar to display application name, logo and organization name
diff --git a/.changeset/snapi-bump-version.md b/.changeset/snapi-bump-version.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/snapi-bump-version.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/workflows/api-changes.yml b/.github/workflows/api-changes.yml
index 8d838b8ccdf..471f9a7727c 100644
--- a/.github/workflows/api-changes.yml
+++ b/.github/workflows/api-changes.yml
@@ -30,7 +30,7 @@ concurrency:
   cancel-in-progress: ${{ github.event_name == 'pull_request' }}
 
 env:
-  SNAPI_PACKAGE: https://pkg.pr.new/clerk/snapi/@clerk/snapi@d42ed8b7857f9254bbb2a6e9ead44d5e7b1aa60c
+  SNAPI_PACKAGE: https://pkg.pr.new/clerk/snapi/@clerk/snapi@763ad1bb1da1da52fd8525a038405bb6ee1b7347
   SNAPI_FILTERS: >-
     --filter=@clerk/backend
     --filter=@clerk/clerk-js
diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
index 678f1212793..70095ea44bd 100644
--- a/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
+++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSO.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 
 import { useProtect } from '@/common';
 import { withCoreUserGuard } from '@/contexts';
-import { Col, descriptors, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables';
+import { Col, Flex, Flow, Heading, Icon, localizationKeys, Text } from '@/customizables';
 import { useCardState, withCardStateProvider } from '@/elements/contexts';
 import { ProfileCard } from '@/elements/ProfileCard';
 import { ExclamationTriangle } from '@/icons';
@@ -43,23 +43,7 @@ const AuthenticatedContent = withCoreUserGuard(() => {
       sx={t => ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })}
     >
       <ConfigureSSONavbar contentRef={contentRef}>
-        <Col
-          ref={contentRef}
-          elementDescriptor={descriptors.scrollBox}
-          sx={t => ({
-            backgroundColor: t.colors.$colorBackground,
-            position: 'relative',
-            borderRadius: t.radii.$lg,
-            width: '100%',
-            overflow: 'hidden',
-            borderWidth: t.borderWidths.$normal,
-            borderStyle: t.borderStyles.$solid,
-            borderColor: t.colors.$borderAlpha150,
-            flex: 1,
-          })}
-        >
-          <ConfigureSSOContent contentRef={contentRef} />
-        </Col>
+        <ConfigureSSOContent contentRef={contentRef} />
       </ConfigureSSONavbar>
     </ProfileCard.Root>
   );
diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
index e45f1d871b2..28fffea2d2d 100644
--- a/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
+++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSONavbar.tsx
@@ -1,11 +1,12 @@
-import { useOrganization } from '@clerk/shared/react/index';
+import { __internal_useOrganizationBase } from '@clerk/shared/react/index';
 import React from 'react';
 
 import { useEnvironment } from '@/contexts';
-import { Box, Col, Flex, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
+import { Box, Col, descriptors, Flex, Heading, Icon, localizationKeys, Text, useAppearance } from '@/customizables';
 import { ApplicationLogo } from '@/elements/ApplicationLogo';
 import { NavBar, NavbarContextProvider } from '@/elements/Navbar';
 import { BoxIcon } from '@/icons';
+import { mqu } from '@/styledSystem';
 
 type ConfigureSSONavbarProps = React.PropsWithChildren<{
   contentRef: React.RefObject<HTMLDivElement>;
@@ -73,18 +74,118 @@ export const ConfigureSSONavbar = ({ children, contentRef }: ConfigureSSONavbarP
               >
                 {applicationName}
               </Text>
-              {organizationSettings.enabled && <OrganizationSidebarSubtitle />}
+              {organizationSettings.enabled && <OrganizationSubtitle />}
             </Col>
           </Flex>
         }
       />
-      {children}
+      <Col
+        ref={contentRef}
+        elementDescriptor={descriptors.scrollBox}
+        sx={t => ({
+          backgroundColor: t.colors.$colorBackground,
+          position: 'relative',
+          borderRadius: t.radii.$lg,
+          width: '100%',
+          overflow: 'hidden',
+          borderWidth: t.borderWidths.$normal,
+          borderStyle: t.borderStyles.$solid,
+          borderColor: t.colors.$borderAlpha150,
+          flex: 1,
+        })}
+      >
+        <ConfigureSSOMobileNavbar />
+        {children}
+      </Col>
     </NavbarContextProvider>
   );
 };
 
-const OrganizationSidebarSubtitle = (): JSX.Element | null => {
-  const { organization } = useOrganization();
+const ConfigureSSOMobileNavbar = () => {
+  const { parsedOptions } = useAppearance();
+  const {
+    organizationSettings,
+    displayConfig: { applicationName, logoImageUrl },
+  } = useEnvironment();
+
+  const hasLogo = Boolean(parsedOptions.logoImageUrl || logoImageUrl);
+
+  return (
+    <Col
+      as='header'
+      elementDescriptor={descriptors.configureSSOMobileNavbar}
+      sx={t => ({
+        display: 'none',
+        [mqu.md]: {
+          display: 'flex',
+        },
+        gap: t.space.$4,
+        padding: t.space.$5,
+        borderBottomWidth: t.borderWidths.$normal,
+        borderBottomStyle: t.borderStyles.$solid,
+        borderBottomColor: t.colors.$borderAlpha100,
+      })}
+    >
+      <Flex
+        align='center'
+        sx={t => ({
+          gap: t.space.$2,
+          maxWidth: '100%',
+        })}
+      >
+        {hasLogo ? (
+          <ApplicationLogo
+            sx={t => ({
+              width: t.space.$9,
+              height: t.space.$9,
+              borderRadius: t.radii.$md,
+              overflow: 'hidden',
+            })}
+          />
+        ) : (
+          <Box
+            sx={t => ({
+              width: t.space.$9,
+              height: t.space.$9,
+              flexShrink: 0,
+              borderRadius: t.radii.$md,
+              backgroundColor: t.colors.$primary500,
+              color: t.colors.$colorPrimaryForeground,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            })}
+            aria-hidden
+          >
+            <Icon
+              icon={BoxIcon}
+              sx={t => ({ width: t.sizes.$4, height: t.sizes.$4 })}
+            />
+          </Box>
+        )}
+
+        <Col sx={{ minWidth: 0 }}>
+          <Text
+            as='p'
+            truncate
+          >
+            {applicationName}
+          </Text>
+          {organizationSettings.enabled && <OrganizationSubtitle />}
+        </Col>
+      </Flex>
+
+      <Heading
+        as='h3'
+        localizationKey={localizationKeys('configureSSO.navbar.title')}
+        sx={t => ({ fontSize: t.fontSizes.$lg })}
+      />
+    </Col>
+  );
+};
+
+const OrganizationSubtitle = (): JSX.Element | null => {
+  const organization = __internal_useOrganizationBase();
 
   if (!organization) {
     return null;
diff --git a/packages/ui/src/customizables/elementDescriptors.ts b/packages/ui/src/customizables/elementDescriptors.ts
index 40600bfd2fd..688e0728bc5 100644
--- a/packages/ui/src/customizables/elementDescriptors.ts
+++ b/packages/ui/src/customizables/elementDescriptors.ts
@@ -538,6 +538,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'enterpriseConnectionButtonText',
 
   'configureSSOHeader',
+  'configureSSOMobileNavbar',
   'configureSSOStepper',
   'configureSSOStepperItem',
   'configureSSOStepperItemBullet',
diff --git a/packages/ui/src/internal/appearance.ts b/packages/ui/src/internal/appearance.ts
index fbdd5e1fefa..daade5167bc 100644
--- a/packages/ui/src/internal/appearance.ts
+++ b/packages/ui/src/internal/appearance.ts
@@ -674,6 +674,7 @@ export type ElementsConfig = {
   enterpriseConnectionButtonText: WithOptions;
 
   configureSSOHeader: WithOptions;
+  configureSSOMobileNavbar: WithOptions;
   configureSSOStepper: WithOptions;
   configureSSOStepperItem: WithOptions<string, ActiveState>;
   configureSSOStepperItemBullet: WithOptions<string, ActiveState>;