diff --git a/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.stories.tsx b/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.stories.tsx
index 7f62b6a08..2c184b55b 100644
--- a/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.stories.tsx
+++ b/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.stories.tsx
@@ -32,3 +32,10 @@ export const MiddleStep: StoryFn<BreadcrumbProps> = () => (
 export const LastStep: StoryFn<BreadcrumbProps> = () => (
   <Breadcrumb {...BASE_PROPS} activeStep={4} />
 );
+
+/** Narrow container — verifies wrap behavior at constrained widths (e.g., 200% zoom). */
+export const NarrowContainer: StoryFn<BreadcrumbProps> = () => (
+  <div style={{ width: 500, border: '1px dashed #ccc' }}>
+    <Breadcrumb {...BASE_PROPS} activeStep={4} />
+  </div>
+);
diff --git a/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.tsx b/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.tsx
index 328f6a6d2..c9fa49083 100644
--- a/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.tsx
+++ b/plugins/aks-desktop/src/components/CreateAKSProject/components/Breadcrumb.tsx
@@ -27,12 +27,10 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({ steps, activeStep, onSte
         alignItems: 'center',
         // @ts-ignore todo: fix this
         backgroundColor: theme.palette.background.muted,
+        flexWrap: 'wrap',
+        gap: 1,
         px: 3,
         py: 2,
-        overflowX: 'auto',
-        [theme.breakpoints.down('md')]: {
-          flexDirection: 'column',
-        },
       })}
     >
       {steps.map((label, index) => (
@@ -100,13 +98,17 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({ steps, activeStep, onSte
             >
               {label}
             </Typography>
-          </Box>
 
-          {index < steps.length - 1 && (
-            <Typography variant="body1" sx={{ mx: 2, color: 'text.secondary' }}>
-              &gt;
-            </Typography>
-          )}
+            {index < steps.length - 1 && (
+              <Typography
+                variant="body1"
+                sx={{ ml: 1, color: 'text.secondary' }}
+                aria-hidden="true"
+              >
+                &gt;
+              </Typography>
+            )}
+          </Box>
         </React.Fragment>
       ))}
     </Box>