diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 45e5ee755e..d93a1387a4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2065,6 +2065,9 @@ importers:
       '@semcore/modal':
         specifier: ^17.2.0
         version: link:../modal
+      '@semcore/typography':
+        specifier: ^17.2.0
+        version: link:../typography
     devDependencies:
       '@semcore/base-components':
         specifier: workspace:*
@@ -19613,7 +19616,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.17
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.15))(terser@5.48.0)(yaml@2.8.3)
+      vitest: 3.2.4(@types/debug@4.1.13)(@types/node@25.5.2)(@vitest/browser@3.2.4)(@vitest/ui@3.2.4)(happy-dom@9.20.3)(jsdom@22.1.0)(lightningcss@1.31.1)(sass@1.100.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.48.0)(yaml@2.8.3)
 
   '@vitest/utils@3.2.4':
     dependencies:
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx b/semcore/wizard/__tests__/wizard.browser-test.tsx
index 9f7f20400c..af7fbe1e67 100644
--- a/semcore/wizard/__tests__/wizard.browser-test.tsx
+++ b/semcore/wizard/__tests__/wizard.browser-test.tsx
@@ -259,6 +259,34 @@ test.describe(`${TAG.VISUAL}`, () => {
         await expect(page).toHaveScreenshot();
       });
     });
+
+    test('Verify long first step title wraps inside content', {
+      tag: [
+        TAG.PRIORITY_HIGH,
+        '@wizard',
+        '@typography',
+        '@base-components'],
+    },
+    async ({ page }) => {
+      const firstStepTitle = 'PersonalInfovfdnvmdfnbmvfdnbnnmdlymmvdvd'.repeat(3);
+
+      await loadPage(page, 'stories/components/wizard/tests/examples/steps_and_buttons_states.tsx', 'en', {
+        firstStepTitle,
+      });
+
+      await locators.button(page).click();
+      await locators.button(page, 'Close').waitFor({ state: 'visible' });
+
+      const title = page.getByRole('heading', { level: 3, name: firstStepTitle });
+      await expect(title).toBeVisible();
+
+      const titleBox = await title.boundingBox();
+      const contentBox = await locators.contentPanel(page).boundingBox();
+
+      expect(titleBox).not.toBeNull();
+      expect(contentBox).not.toBeNull();
+      expect(titleBox!.x + titleBox!.width).toBeLessThanOrEqual(contentBox!.x + contentBox!.width);
+    });
   });
 
   test('Verify WizardContent is not right rounded when noSidebar=false', {
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png
index bf2a8e8d72..3f956cf34d 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-1-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png
index 42c2a74b5c..0228038b2f 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-2-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png
index 89cb8f1388..6838dd210b 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-3-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png
index 62fa863b96..6f36d39a07 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-4-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png
index 5358166cef..982a94d410 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Steps-on-hover-and-focus---small-state-5-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png
index ef5b478de3..600f829c59 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-1-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png
index 0368755a1b..e49a0bbb98 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-2-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png
index 884616ffd6..f94b95342a 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-3-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png
index 9954f915a5..e7045273ed 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-4-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png
index 18cd31a067..d8f0897da0 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-5-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png
index 171a14cbf2..8ec2d7e3ee 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-6-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png
index eecd5d99ad..08a09950a7 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Steps-and-buttons-states-Verify-Steps-on-hover-and-focus---expanded-state-7-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png
index 323475151c..cb3c69d6ee 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-chromium-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png
index af79117403..4e7fc83806 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-firefox-linux.png differ
diff --git a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png
index a4eb7405ec..3713e20df3 100644
Binary files a/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png and b/semcore/wizard/__tests__/wizard.browser-test.tsx-snapshots/-visual-Verify-Custom-step-example-1-webkit-linux.png differ
diff --git a/semcore/wizard/package.json b/semcore/wizard/package.json
index 3324e7cbc1..ccfa7ab242 100644
--- a/semcore/wizard/package.json
+++ b/semcore/wizard/package.json
@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "@semcore/button": "^17.2.0",
-    "@semcore/modal": "^17.2.0"
+    "@semcore/modal": "^17.2.0",
+    "@semcore/typography": "^17.2.0"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.2.0",
diff --git a/semcore/wizard/src/Wizard.tsx b/semcore/wizard/src/Wizard.tsx
index 54698adb6f..71a376bf86 100644
--- a/semcore/wizard/src/Wizard.tsx
+++ b/semcore/wizard/src/Wizard.tsx
@@ -11,6 +11,7 @@ import ArrowLeft from '@semcore/icon/ArrowLeft/m';
 import ArrowRight from '@semcore/icon/ArrowRight/m';
 import CheckM from '@semcore/icon/Check/m';
 import Modal from '@semcore/modal';
+import { Text } from '@semcore/typography';
 import React from 'react';
 
 import style from './style/wizard.shadow.css';
@@ -354,6 +355,15 @@ function StepNext(props: Required<WizardStepNextProps> & IRootComponentProps) {
   );
 }
 
+function StepTitle(props: Intergalactic.InternalTypings.InferChildComponentProps<WizardType, typeof WizardRoot, 'StepTitle'>) {
+  const SWizardStepTitle = Root;
+  const { styles } = props;
+
+  return sstyled(styles)(
+    <SWizardStepTitle render={Text} tag='h3' size={500} />,
+  );
+}
+
 /**
  * Wizard
  *
@@ -366,6 +376,7 @@ const Wizard = createComponent<
   Sidebar,
   Content,
   Step,
+  StepTitle,
   Stepper,
   StepBack,
   StepNext,
diff --git a/semcore/wizard/src/Wizard.types.ts b/semcore/wizard/src/Wizard.types.ts
index a7e6db79c0..1551c7ac95 100644
--- a/semcore/wizard/src/Wizard.types.ts
+++ b/semcore/wizard/src/Wizard.types.ts
@@ -3,6 +3,7 @@ import type { ButtonProps } from '@semcore/button';
 import type { Intergalactic } from '@semcore/core';
 import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
 import type { ModalProps } from '@semcore/modal';
+import type { Text, NSText } from '@semcore/typography';
 import type React from 'react';
 
 /** Ordered step position from 0 */
@@ -137,6 +138,9 @@ export type WizardDefaultProps = {
   locale: 'en';
 };
 
+// Need this for API page in docs
+export type WizardStepTitleProps = NSText.Props;
+
 export type IntergalacticWizardStepperComponent<PropsExtending = {}> = (<
   Tag extends Intergalactic.Tag = 'div',
 >(
@@ -148,6 +152,7 @@ Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', WizardStepperProps
 export type WizardType = Intergalactic.Component<'div', WizardProps> & {
   Sidebar: Intergalactic.Component<'div', WizardSidebarProps>;
   Step: Intergalactic.Component<'div', WizardStepProps>;
+  StepTitle: typeof Text;
   Stepper: IntergalacticWizardStepperComponent;
   Content: Intergalactic.Component<'div', WizardContentProps>;
   StepBack: Intergalactic.Component<'button', WizardStepBackProps>;
diff --git a/semcore/wizard/src/style/wizard.shadow.css b/semcore/wizard/src/style/wizard.shadow.css
index 1a8f4f7ab0..af4766df84 100644
--- a/semcore/wizard/src/style/wizard.shadow.css
+++ b/semcore/wizard/src/style/wizard.shadow.css
@@ -97,10 +97,18 @@ SStepDescription {
 
 SContent {
   padding: var(--intergalactic-spacing-10x, 40px);
-  width: 100%;
+  overflow: hidden;
+  flex: 1;
   border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px)
     0;
   background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+
+  SWizardStepTitle {
+    display: block;
+    word-break: break-word;
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin-bottom: var(--intergalactic-spacing-5x, 20px);
+  }
 }
 SContent[noSidebar] {
   border-radius: var(--intergalactic-modal-rounded, 14px);
diff --git a/stories/components/wizard/docs/examples/basic_example.tsx b/stories/components/wizard/docs/examples/basic_example.tsx
index d350f9f6f0..6996b09af4 100644
--- a/stories/components/wizard/docs/examples/basic_example.tsx
+++ b/stories/components/wizard/docs/examples/basic_example.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@semcore/ui/base-components';
+import { Box, Flex } from '@semcore/ui/base-components';
 import Button from '@semcore/ui/button';
 import { Text } from '@semcore/ui/typography';
 import Wizard from '@semcore/ui/wizard';
@@ -30,19 +30,19 @@ const Demo = () => {
         </Wizard.Sidebar>
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between'>
           <Wizard.Step step={1}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[0].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={2}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[1].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={3}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[2].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Flex mt={5}>
             {step > 1 && (
diff --git a/stories/components/wizard/docs/examples/custom_step.tsx b/stories/components/wizard/docs/examples/custom_step.tsx
index 1495c8ad82..3088acefdd 100644
--- a/stories/components/wizard/docs/examples/custom_step.tsx
+++ b/stories/components/wizard/docs/examples/custom_step.tsx
@@ -7,11 +7,11 @@ import React from 'react';
 
 const Step1 = React.forwardRef(function (_props, ref: React.Ref<HTMLDivElement>) {
   return (
-    <Flex ref={ref} direction='column' gap={4}>
-      <Text size={500} tag='h3'>
+    <Flex ref={ref} direction='column'>
+      <Wizard.StepTitle>
         Keywords
-      </Text>
-      <Input>
+      </Wizard.StepTitle>
+      <Input mb={4}>
         <Input.Value placeholder='Keyword 1' aria-label='Keyword 1' />
       </Input>
       <Input>
@@ -57,10 +57,10 @@ const Demo = () => {
             }}
           </Wizard.Step>
           <Wizard.Step step={3}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               Final step
-            </Text>
-            <Text tag='p' mt={2}>
+            </Wizard.StepTitle>
+            <Text tag='p'>
               Congratulations on passing all the steps!
             </Text>
           </Wizard.Step>
diff --git a/stories/components/wizard/docs/examples/custom_stepper.tsx b/stories/components/wizard/docs/examples/custom_stepper.tsx
index f1d43d39d1..6029a39e71 100644
--- a/stories/components/wizard/docs/examples/custom_stepper.tsx
+++ b/stories/components/wizard/docs/examples/custom_stepper.tsx
@@ -87,9 +87,9 @@ const Demo = () => {
             </RadioGroup>
           </Wizard.Step>
           <Wizard.Step step={4}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               Final step
-            </Text>
+            </Wizard.StepTitle>
             <Text tag='p' mt={2}>
               Congratulations on passing all the steps!
             </Text>
diff --git a/stories/components/wizard/tests/Wizard.stories.tsx b/stories/components/wizard/tests/Wizard.stories.tsx
index 2b0bfc4e74..ec194dd010 100644
--- a/stories/components/wizard/tests/Wizard.stories.tsx
+++ b/stories/components/wizard/tests/Wizard.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import FocusNextPrevExample from './examples/focus-next-prev';
 import SidebarAsComponentExample, { defaultExampleNoSideBarProps } from './examples/sidebar-as-component';
-import SteppersAndButtonsStatesExample from './examples/steps_and_buttons_states';
+import SteppersAndButtonsStatesExample, { defaultProps as steppersAndButtonsStatesProps } from './examples/steps_and_buttons_states';
 import WithScrollAreaExample from './examples/with-scroll-area';
 import WizardContentExample from './examples/wizard-content';
 
@@ -15,8 +15,17 @@ export default meta;
 
 type Story = StoryObj<typeof Wizard>;
 
-export const SteppersAndButtonsStates: Story = {
+export const SteppersAndButtonsStates: StoryObj<typeof steppersAndButtonsStatesProps> = {
   render: SteppersAndButtonsStatesExample,
+  argTypes: {
+    firstStepTitle: {
+      control: { type: 'text' },
+    },
+    ellipsis: {
+      control: { type: 'boolean' },
+    },
+  },
+  args: steppersAndButtonsStatesProps,
 };
 
 export const WizardContent: Story = {
diff --git a/stories/components/wizard/tests/examples/focus-next-prev.tsx b/stories/components/wizard/tests/examples/focus-next-prev.tsx
index 87edf291c1..67fb559907 100644
--- a/stories/components/wizard/tests/examples/focus-next-prev.tsx
+++ b/stories/components/wizard/tests/examples/focus-next-prev.tsx
@@ -62,19 +62,19 @@ const Demo = () => {
         </Wizard.Sidebar>
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between'>
           <Wizard.Step step={1}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[0].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={2}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[1].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={3}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[2].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Flex mt={5}>
             {step > 1 && (
diff --git a/stories/components/wizard/tests/examples/sidebar-as-component.tsx b/stories/components/wizard/tests/examples/sidebar-as-component.tsx
index cd7ff9b40f..740aae40e8 100644
--- a/stories/components/wizard/tests/examples/sidebar-as-component.tsx
+++ b/stories/components/wizard/tests/examples/sidebar-as-component.tsx
@@ -25,9 +25,9 @@ const Demo = (props: WizardContentProps) => {
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between' noSidebar={props.noSidebar}>
           {steps.map((s, i) => (
             <Wizard.Step key={s.title} step={i + 1}>
-              <Text size={500} tag='h3'>
+              <Wizard.StepTitle>
                 {s.title}
-              </Text>
+              </Wizard.StepTitle>
             </Wizard.Step>
           ))}
 
diff --git a/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx b/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx
index c8de5d248a..1200f58446 100644
--- a/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx
+++ b/stories/components/wizard/tests/examples/steps_and_buttons_states.tsx
@@ -18,9 +18,23 @@ const steps = [
   { title: 'Something else' },
 ];
 
-const Demo = () => {
+type StepsAndButtonsStatesProps = {
+  firstStepTitle: string;
+  ellipsis: boolean;
+};
+
+export const defaultProps: StepsAndButtonsStatesProps = {
+  firstStepTitle: steps[0].title,
+  ellipsis: true,
+};
+
+const Demo = ({ firstStepTitle, ellipsis }: StepsAndButtonsStatesProps) => {
   const [step, setStep] = React.useState(1);
   const [visible, setVisible] = React.useState(false);
+  const configurableSteps = [
+    { ...steps[0], title: firstStepTitle },
+    ...steps.slice(1),
+  ];
 
   const handleOpen = () => setVisible(true);
   const handleClose = () => setVisible(false);
@@ -35,17 +49,17 @@ const Demo = () => {
       <Wizard visible={visible} step={step} w={600} onClose={handleClose}>
         <Wizard.Sidebar title='Site Audit Settings'>
           <Wizard.Stepper step={1} onActive={handleStepChange(1)} completed>
-            {steps[0].title}
+            {configurableSteps[0].title}
           </Wizard.Stepper>
           <Wizard.Stepper step={2} onActive={handleStepChange(2)} number={1.1}>
-            {steps[1].title}
+            {configurableSteps[1].title}
             <Text color='text-secondary-invert' fontWeight={400} tag='div'>
               optional
             </Text>
           </Wizard.Stepper>
           <Wizard.Stepper step={3} onActive={handleStepChange(3)} number={1.2}>
             <Text color='text-secondary-invert' fontWeight={400}>
-              {steps[2].title}
+              {configurableSteps[2].title}
             </Text>
             <Text color='text-secondary-invert' fontWeight={400} tag='div'>
               Optional step
@@ -53,41 +67,43 @@ const Demo = () => {
           </Wizard.Stepper>
           <Wizard.Stepper step={4} onActive={handleStepChange(4)} number={1.3}>
             <Text color='text-secondary-invert' fontWeight={400}>
-              {steps[3].title}
+              {configurableSteps[3].title}
             </Text>
           </Wizard.Stepper>
           <Wizard.Stepper step={5} onActive={handleStepChange(5)}>
-            {steps[4].title}
+            {configurableSteps[4].title}
           </Wizard.Stepper>
           <Wizard.Stepper step={6} onActive={handleStepChange(6)}>
-            {steps[5].title}
+            {configurableSteps[5].title}
           </Wizard.Stepper>
           <Wizard.Stepper step={7} onActive={handleStepChange(7)}>
-            {steps[6].title}
+            {configurableSteps[6].title}
             <Text color='text-secondary-invert' fontWeight={400} tag='div'>
               optional
             </Text>
           </Wizard.Stepper>
           <Wizard.Stepper step={8} onActive={handleStepChange(8)}>
-            {steps[7].title}
+            {configurableSteps[7].title}
           </Wizard.Stepper>
           <Wizard.Stepper step={9} onActive={handleStepChange(9)} disabled>
-            {steps[8].title}
+            {configurableSteps[8].title}
           </Wizard.Stepper>
           <Wizard.Stepper step={10} onActive={handleStepChange(10)} disabled number={8.1}>
-            {steps[9].title}
+            {configurableSteps[9].title}
           </Wizard.Stepper>
           <Wizard.Stepper step={11} onActive={handleStepChange(11)} disabled number={8.1} completed>
-            {steps[10].title}
+            {configurableSteps[10].title}
           </Wizard.Stepper>
         </Wizard.Sidebar>
 
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between'>
-          {steps.map((stepData, index) => (
+          {configurableSteps.map((stepData, index) => (
             <Wizard.Step key={index} step={index + 1}>
-              <Text size={500} tag='h3'>
+              <Wizard.StepTitle
+                ellipsis={ellipsis}
+              >
                 {stepData.title}
-              </Text>
+              </Wizard.StepTitle>
             </Wizard.Step>
           ))}
 
@@ -95,16 +111,16 @@ const Demo = () => {
             {step > 1 && (
               <Wizard.StepBack
                 onActive={handleStepChange(step - 1)}
-                stepName={steps[step - 2].title}
+                stepName={configurableSteps[step - 2].title}
                 disabled={step === 2}
               />
             )}
-            {step !== steps.length - 1 && (
+            {step !== configurableSteps.length - 1 && (
               <Wizard.StepNext
                 ml='auto'
                 onActive={handleStepChange(step + 1)}
-                stepName={steps[step].title}
-                disabled={step === steps.length - 3}
+                stepName={configurableSteps[step].title}
+                disabled={step === configurableSteps.length - 3}
               />
             )}
           </Flex>
@@ -114,4 +130,6 @@ const Demo = () => {
   );
 };
 
+Demo.defaultProps = defaultProps;
+
 export default Demo;
diff --git a/stories/components/wizard/tests/examples/wizard-content.tsx b/stories/components/wizard/tests/examples/wizard-content.tsx
index ec4bf40c27..7f2b1f0b36 100644
--- a/stories/components/wizard/tests/examples/wizard-content.tsx
+++ b/stories/components/wizard/tests/examples/wizard-content.tsx
@@ -35,9 +35,9 @@ const Demo = () => {
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between'>
           {steps.map((stepData, index) => (
             <Wizard.Step key={index} step={index + 1}>
-              <Text size={500} tag='h3'>
+              <Wizard.StepTitle>
                 {stepData.title}
-              </Text>
+              </Wizard.StepTitle>
             </Wizard.Step>
           ))}
 
diff --git a/website/docs/components/wizard/wizard-api.md b/website/docs/components/wizard/wizard-api.md
index c394e6281f..abc9cc2882 100644
--- a/website/docs/components/wizard/wizard-api.md
+++ b/website/docs/components/wizard/wizard-api.md
@@ -41,6 +41,15 @@ import Wizard from '@semcore/ui/wizard';
 
 <TypesView type="WizardStepProps" :types={...types} />
 
+## Wizard.StepTitle
+
+```jsx
+import Wizard from '@semcore/ui/wizard';
+<Wizard.StepTitle />;
+```
+
+<TypesView type="WizardStepTitleProps" :types={...types} />
+
 ## Wizard.Content
 
 ```jsx