diff --git a/.eslintrc.js b/.eslintrc.js
index 934a04b..b7954f1 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -17,6 +17,17 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint"],
-  rules: {},
+  plugins: ["react", "@typescript-eslint", "sort-keys-fix"],
+  rules: {
+    "react/jsx-sort-props": 1,
+    "sort-keys-fix/sort-keys-fix": "warn",
+    "sort-keys": [
+      "error",
+      "asc",
+      {
+        caseSensitive: true,
+        natural: true,
+      },
+    ],
+  },
 };
diff --git a/package.json b/package.json
index 1c110c9..c1d9a58 100644
--- a/package.json
+++ b/package.json
@@ -119,6 +119,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-security": "^1.5.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
     "husky": "^8.0.1",
     "jsdom": "^20.0.0",
     "mini-css-extract-plugin": "^2.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cf9c389..0466b7b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,7 @@ specifiers:
   eslint-plugin-promise: ^6.0.0
   eslint-plugin-react: ^7.30.0
   eslint-plugin-security: ^1.5.0
+  eslint-plugin-sort-keys-fix: ^1.1.2
   husky: ^8.0.1
   jsdom: ^20.0.0
   mini-css-extract-plugin: ^2.6.1
@@ -89,6 +90,7 @@ devDependencies:
   eslint-plugin-promise: 6.0.0_eslint@8.18.0
   eslint-plugin-react: 7.30.0_eslint@8.18.0
   eslint-plugin-security: 1.5.0
+  eslint-plugin-sort-keys-fix: 1.1.2
   husky: 8.0.1
   jsdom: 20.0.0
   mini-css-extract-plugin: 2.6.1_webpack@5.73.0
@@ -2338,6 +2340,14 @@ packages:
       acorn: 8.7.1
     dev: true
 
+  /acorn-jsx/5.3.2_acorn@7.4.1:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 7.4.1
+    dev: true
+
   /acorn-jsx/5.3.2_acorn@8.7.1:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -4444,6 +4454,16 @@ packages:
       safe-regex: 2.1.1
     dev: true
 
+  /eslint-plugin-sort-keys-fix/1.1.2:
+    resolution: {integrity: sha512-DNPHFGCA0/hZIsfODbeLZqaGY/+q3vgtshF85r+YWDNCQ2apd9PNs/zL6ttKm0nD1IFwvxyg3YOTI7FHl4unrw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      espree: 6.2.1
+      esutils: 2.0.3
+      natural-compare: 1.4.0
+      requireindex: 1.2.0
+    dev: true
+
   /eslint-scope/5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -4536,6 +4556,15 @@ packages:
       - supports-color
     dev: true
 
+  /espree/6.2.1:
+    resolution: {integrity: sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2_acorn@7.4.1
+      eslint-visitor-keys: 1.3.0
+    dev: true
+
   /espree/9.3.2:
     resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -8046,6 +8075,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /requireindex/1.2.0:
+    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
+    engines: {node: '>=0.10.5'}
+    dev: true
+
   /resolve-cwd/3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
diff --git a/src/App.tsx b/src/App.tsx
index 16472b5..1e40022 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,50 +1,27 @@
 import "./App.css";
 import { Wizard } from "./components/wizard";
-import { Box, Dollar, Twitter, User } from "./example-assets";
 
 function App() {
   return (
     <div
       className="App"
-      style={{ width: "950px", margin: "0 auto", marginTop: "1rem" }}
+      style={{ margin: "0 auto", marginTop: "1rem", width: "950px" }}
     >
       <Wizard
-        silent
-        theme={{
-          primary: "#007fff",
-          background: "#000",
-          textColor: "#fff",
-          formFieldBackground: "#282828",
-          formFieldBorder: "#000",
-          success: "#519259",
-          fail: "#cf352e",
-          inputBackground: "#464646",
-          inputTextColor: "#fff",
-          tabLineColor: "#464646",
-          tabColor: "#7d7d7d",
-        }}
-        icons={[
-          <User key="usr" />,
-          <Box key="box" />,
-          <Twitter key="twitter" />,
-          <Dollar key="dollar" />,
-        ]}
         bodyHeight={750}
         highlightFieldsOnValidation
-        validationDelay={100}
+        noPageTitle
         strict={false}
-        // RTL
         onFinish={(val) => console.log(val)}
         pages={[
           {
-            title: "Introduction",
             fields: [
               {
+                isRequired: true,
                 label: "First Name",
                 name: "firstName",
-                type: "text",
-                isRequired: true,
                 placeholder: "Enter your first name",
+                type: "text",
                 validationMessage: "You cannot leave this field empty",
               },
               {
@@ -53,26 +30,26 @@ function App() {
                 type: "text",
               },
               {
+                label: "Date of Birth",
                 name: "dateOfBirth",
                 type: "date",
-                label: "Date of Birth",
               },
               {
+                isRequired: true,
                 label: "Email",
                 name: "email",
                 type: "email",
-                isRequired: true,
                 validationMessage: "Incorrect email id. example: xxxx@yyy.com",
               },
               {
-                name: "Phone number",
                 label: "Phone",
+                name: "Phone number",
                 type: "phone",
               },
             ],
+            title: "Introduction",
           },
           {
-            title: "Employment",
             fields: [
               {
                 label: "Company Name",
@@ -90,42 +67,42 @@ function App() {
                 type: "textarea",
               },
               {
+                isRequired: true,
                 label: "Are you currently working?",
                 name: "employed",
-                type: "radio",
-                isRequired: true,
                 options: [
                   { name: "yes", value: true },
                   { name: "no", value: false },
                 ],
+                type: "radio",
               },
               {
+                isRequired: true,
                 label: "Choose your skills",
                 name: "skills",
-                type: "checkbox",
-                isRequired: true,
                 options: [
                   { name: "HTML", value: "html" },
                   { name: "CSS", value: "css" },
                   { name: "JavaScript", value: "javascript" },
                   { name: "React", value: "react" },
                 ],
+                type: "checkbox",
               },
             ],
+            title: "Employment",
           },
           {
-            title: "CV & Social Links",
             fields: [
               {
-                name: "CV",
                 label: "Upload your CV",
+                name: "CV",
                 type: "file",
               },
               {
+                isRequired: true,
                 label: "Portfolio URL",
                 name: "Portfolio",
                 type: "url",
-                isRequired: true,
               },
               {
                 label: "Linkedin URL",
@@ -138,25 +115,25 @@ function App() {
                 type: "url",
               },
               {
-                name: "twitter",
                 label: "Twitter URL",
+                name: "twitter",
                 type: "url",
               },
             ],
+            title: "CV & Social Links",
           },
           {
-            title: "salary",
             fields: [
               {
+                isRequired: true,
                 label: "Select your current salary range",
                 name: "salaryRange",
-                type: "select",
-                isRequired: true,
-
                 options: [
                   { name: "10,000$ - 50,000$", value: "10-50k" },
                   { name: "50,000$ - 100,000$", value: "50-100k" },
                 ],
+
+                type: "select",
               },
               {
                 label: "Expected Salary",
@@ -164,8 +141,35 @@ function App() {
                 type: "text",
               },
             ],
+            title: "salary",
           },
         ]}
+        // noPageTitle
+        // icons={[
+        //   <User key="usr" />,
+        //   <Box key="box" />,
+        //   <Twitter key="twitter" />,
+        //   <Dollar key="dollar" />,
+        // ]}
+        showStepperTitles
+        silent
+        // silent
+        // strict={false}
+        // RTL
+        theme={{
+          background: "#000",
+          fail: "#cf352e",
+          formFieldBackground: "#282828",
+          formFieldBorder: "#000",
+          inputBackground: "#464646",
+          inputTextColor: "#fff",
+          primary: "#007fff",
+          success: "#519259",
+          tabColor: "#7d7d7d",
+          tabLineColor: "#464646",
+          textColor: "#fff",
+        }}
+        validationDelay={100}
       />
     </div>
   );
diff --git a/src/components/form-field/form-field-input.tsx b/src/components/form-field/form-field-input.tsx
index 6b29a8d..5e64093 100644
--- a/src/components/form-field/form-field-input.tsx
+++ b/src/components/form-field/form-field-input.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { FunctionComponent, useContext, useMemo } from "react";
 import Asterisk from "../../icons/asterisk";
-import { WizardContext } from "../wizard";
+import { WizardContext } from "../wizard-context";
 import { FormChangeEvent, FormFieldProps } from "./form-field.model";
 import styles from "./form-field.module.scss";
 
@@ -39,21 +39,21 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
     if (isTextField) {
       return (
         <input
-          type={type === "datetime" ? "datetime-local" : type}
-          required={isRequired}
           aria-labelledby={labelId}
+          disabled={disabled}
+          name={name}
           onChange={handleChange}
           placeholder={placeholder}
-          name={name}
-          disabled={disabled}
+          required={isRequired}
+          type={type === "datetime" ? "datetime-local" : type}
         />
       );
     } else if (type === "select") {
       return (
         <select
-          onChange={handleChange}
-          disabled={disabled}
           aria-labelledby={labelId}
+          disabled={disabled}
+          onChange={handleChange}
           placeholder={placeholder}
         >
           {options.map((option) => (
@@ -64,12 +64,12 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
     } else if (type === "textarea") {
       return (
         <textarea
-          disabled={disabled}
           aria-labelledby={labelId}
-          required={isRequired}
-          onChange={handleChange}
+          disabled={disabled}
           name={name}
+          onChange={handleChange}
           placeholder={placeholder}
+          required={isRequired}
         ></textarea>
       );
     } else if (type === "radio" || type === "checkbox") {
@@ -78,13 +78,13 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
           {options.map(({ name: optionName, id, value }) => (
             <label key={id}>
               <input
-                type={type}
-                name={name}
-                value={value as string}
-                onChange={handleChange}
                 id={id}
                 key={id}
+                name={name}
+                onChange={handleChange}
                 placeholder={placeholder}
+                type={type}
+                value={value as string}
               />
               {optionName}
             </label>
@@ -99,9 +99,9 @@ const FormFieldInput: FunctionComponent<FormFieldInputProps> = ({
       {getInputType}
       {isRequired && (
         <span
+          aria-label="important field"
           className={classNames(styles.asterisk, RTL ? styles.RTL : "")}
           role="img"
-          aria-label="important field"
         >
           <Asterisk />
         </span>
diff --git a/src/components/form-field/form-field.tsx b/src/components/form-field/form-field.tsx
index d93ddec..419ee48 100644
--- a/src/components/form-field/form-field.tsx
+++ b/src/components/form-field/form-field.tsx
@@ -10,7 +10,7 @@ import {
 } from "react";
 import CheckIcon from "../../icons/check";
 import Exclamation from "../../icons/exclamation";
-import { WizardContext } from "./../wizard";
+import { WizardContext } from "../wizard-context";
 import { FormFieldInput } from "./form-field-input";
 import { FormFieldMessage } from "./form-field-message";
 import { FormChangeEvent, FormFieldProps } from "./form-field.model";
@@ -75,7 +75,7 @@ const FormField: FunctionComponent<FormFieldProps> = ({
         isValid ? styles.is_valid : isValid !== null ? styles.is_not_valid : "",
         highlight ? styles.highlight : "",
         RTL ? styles.RTL : "",
-        silent ? styles.no_border : ''
+        silent ? styles.no_border : ""
       ),
     [isValid, highlight, silent]
   );
@@ -119,11 +119,11 @@ const FormField: FunctionComponent<FormFieldProps> = ({
   return (
     <div className={fieldClass} {...conditionalProps}>
       {canShowCheckIcon ? (
-        <span className={checkClass} role="img" aria-label="success">
+        <span aria-label="success" className={checkClass} role="img">
           <CheckIcon />
         </span>
       ) : !isValid && isValid !== null ? (
-        <span className={warnClass} role="img" aria-label="fail">
+        <span aria-label="fail" className={warnClass} role="img">
           <Exclamation />
         </span>
       ) : null}
@@ -132,21 +132,21 @@ const FormField: FunctionComponent<FormFieldProps> = ({
       </label>
       <div className={styles.input_wrapper}>
         <FormFieldInput
-          type={type}
           disabled={disabled}
+          handleChange={
+            type === "checkbox" ? handleCheckBoxChange : handleChange
+          }
           id={id}
-          options={_options.current}
           isRequired={isRequired}
           name={name}
+          options={_options.current}
           placeholder={placeholder}
-          handleChange={
-            type === "checkbox" ? handleCheckBoxChange : handleChange
-          }
+          type={type}
         />
         <FormFieldMessage
-          message={validationMessage}
           RTL={RTL}
           isValid={isValid}
+          message={validationMessage}
           show={showFieldMessage}
         />
       </div>
diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
index c01e502..117619a 100644
--- a/src/components/page/page.tsx
+++ b/src/components/page/page.tsx
@@ -7,13 +7,13 @@ import {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState,
+  useState
 } from "react";
 import { getValidationMessage, validator } from "../../utils";
 import { FormField } from "../form-field/form-field";
 import { FormFieldProps } from "../form-field/form-field.model";
 import { PageModelProps } from "../page/page.model";
-import { WizardContext } from "../wizard";
+import { WizardContext } from './../wizard-context';
 import styles from "./page.module.scss";
 
 const Page = forwardRef<{ height: number; id: string }, PageModelProps>(
@@ -109,7 +109,7 @@ const Page = forwardRef<{ height: number; id: string }, PageModelProps>(
     }, [JSON.stringify(_fields)]);
 
     return (
-      <div className={pageClass} ref={pageRef} style={style} data-title={title}>
+      <div className={pageClass} data-title={title} ref={pageRef} style={style}>
         {!noPageTitle && (
           <header className={classNames(styles.header, RTL ? styles.RTL : "")}>
             {title}
@@ -122,8 +122,8 @@ const Page = forwardRef<{ height: number; id: string }, PageModelProps>(
             <FormField
               key={field.id}
               {...field}
-              onInput={onHandleInput}
               disabled={hide}
+              onInput={onHandleInput}
             />
           ))}
         </div>
@@ -135,3 +135,4 @@ const Page = forwardRef<{ height: number; id: string }, PageModelProps>(
 Page.displayName = "Page";
 
 export { Page };
+
diff --git a/src/components/theme-default.tsx b/src/components/theme-default.tsx
index fe3c50e..cff820a 100644
--- a/src/components/theme-default.tsx
+++ b/src/components/theme-default.tsx
@@ -1,16 +1,16 @@
 import { Theme } from "./wizard.model";
 
 export const ThemeDefaults: Theme = {
-  primary: "#007fff",
   background: "#f8f8f8",
-  formFieldBackground: "#fff",
-  success: "#1db954",
   fail: "#de1738",
-  textColor: "#000",
+  formFieldBackground: "#fff",
   formFieldBorder: "#dcdcdc",
   inputBackground: "#e8e8e8",
   inputTextColor: "#000",
+  primary: "#007fff",
+  success: "#1db954",
   tabColor: "#f8f8f8",
   tabLineColor: "#ccc",
+  textColor: "#000",
   warning: "#ffae42",
 };
diff --git a/src/components/wizard-context.ts b/src/components/wizard-context.ts
new file mode 100644
index 0000000..3c017f7
--- /dev/null
+++ b/src/components/wizard-context.ts
@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { contextType } from "./wizard.model";
+
+export const WizardContext = createContext<contextType>({
+  RTL: false,
+  highlightFieldsOnValidation: false,
+  noPageTitle: false,
+  silent: false,
+  strict: true,
+  validationDelay: 250,
+});
diff --git a/src/components/wizard-footer/__tests__/wizard-footer.test.tsx b/src/components/wizard-footer/__tests__/wizard-footer.test.tsx
index d00acdc..42ffb9a 100644
--- a/src/components/wizard-footer/__tests__/wizard-footer.test.tsx
+++ b/src/components/wizard-footer/__tests__/wizard-footer.test.tsx
@@ -1,5 +1,4 @@
 import { fireEvent, render } from "@testing-library/react";
-import React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { PageModelProps } from "../../page/page.model";
 import { WizardFooter } from "../wizard-footer";
@@ -82,12 +81,12 @@ describe.concurrent("WizardFooter", () => {
       <WizardFooter
         pages={pages}
         activeId={"page2"}
-        message="Please correct the errors in the form."
+        message="Please correct errors in the form."
       />
     );
 
     expect(getByRole("alert")).toHaveTextContent(
-      "Please correct the errors in the form."
+      "Please correct errors in the form."
     );
   });
 });
diff --git a/src/components/wizard-footer/wizard-footer.tsx b/src/components/wizard-footer/wizard-footer.tsx
index 44ccc41..f587daf 100644
--- a/src/components/wizard-footer/wizard-footer.tsx
+++ b/src/components/wizard-footer/wizard-footer.tsx
@@ -2,8 +2,8 @@ import classNames from "classnames";
 import { FunctionComponent, useContext, useMemo } from "react";
 import ChevronLeft from "../../icons/chevron-left";
 import ChevronRight from "../../icons/chevron-right";
-import { WizardContext } from "../wizard";
 import { WizardFooterProps } from "../wizard-footer/wizard-footer.model";
+import { WizardContext } from "./../wizard-context";
 import styles from "./wizard-footer.module.scss";
 
 const WizardFooter: FunctionComponent<WizardFooterProps> = ({
@@ -86,13 +86,13 @@ const WizardFooter: FunctionComponent<WizardFooterProps> = ({
       <div className={buttonControlsClass}>
         {!hideBack && (
           <button
+            aria-label="go back"
             className={classNames(
               styles.button,
               styles.back,
               RTL ? styles.RTL : ""
             )}
             onClick={onPrev}
-            aria-label="go back"
           >
             <span className={styles.btn_icon}>
               <ChevronLeft />
@@ -102,11 +102,11 @@ const WizardFooter: FunctionComponent<WizardFooterProps> = ({
         )}
         {!hideNext && (
           <button
-            className={nextButtonClass}
-            onClick={handleNext}
-            aria-label="go forward"
             aria-disabled={disableNext}
+            aria-label="go forward"
+            className={nextButtonClass}
             disabled={disableNext}
+            onClick={handleNext}
           >
             <span>Next</span>
             <span className={styles.btn_icon}>
@@ -116,10 +116,10 @@ const WizardFooter: FunctionComponent<WizardFooterProps> = ({
         )}
         {showFinish && (
           <button
-            className={nextButtonClass}
             aria-label="finish"
-            onClick={onFinish}
+            className={nextButtonClass}
             disabled={disableNext}
+            onClick={onFinish}
           >
             <span>Finish</span>
             <span className={styles.btn_icon}>
diff --git a/src/components/wizard-header/wizard-header-tab.tsx b/src/components/wizard-header/wizard-header-tab.tsx
new file mode 100644
index 0000000..e384264
--- /dev/null
+++ b/src/components/wizard-header/wizard-header-tab.tsx
@@ -0,0 +1,89 @@
+import classNames from "classnames";
+import { CSSProperties, FunctionComponent, useContext, useMemo } from "react";
+import CheckIcon from "../../icons/check";
+import WarnIcon from "../../icons/warning";
+import { WizardContext } from "../wizard-context";
+import { WizardTabProps } from "./wizard-header.model";
+import styles from "./wizard-header.module.scss";
+
+const WizardHeaderTab: FunctionComponent<WizardTabProps> = ({
+  id,
+  onSelect,
+  selected,
+  state,
+  label,
+  highlight,
+  disable,
+  RTL,
+  icon,
+  title,
+}) => {
+  const containerClass = useMemo(
+    () =>
+      classNames(
+        styles.icon_container,
+        {
+          [styles[state.toLowerCase()]]: true,
+        },
+        selected ? styles.selected : ""
+      ),
+    [state, selected]
+  );
+
+  const { stepperItemWidth, showStepperTitles, noPageTitle } =
+    useContext(WizardContext);
+
+  const canShowTitle = useMemo(
+    () => showStepperTitles || noPageTitle,
+    [showStepperTitles, noPageTitle]
+  );
+
+  const tabClass = useMemo(
+    () =>
+      classNames(
+        styles.tab,
+        selected ? styles.selected : "",
+        {
+          [styles[state.toLowerCase()]]: true,
+        },
+        highlight ? styles.highlight : "",
+        disable ? styles.disabled : "",
+        RTL ? styles.RTL : ""
+      ),
+    [state, selected, highlight, disable]
+  );
+
+  const getLabel = useMemo(
+    () => state.split("_").join(" ").toLowerCase(),
+    [state]
+  );
+
+  const style = useMemo(
+    () =>
+      ({
+        "--rc-wiz-tab-width": stepperItemWidth,
+      } as CSSProperties),
+    [stepperItemWidth]
+  );
+
+  return (
+    <li
+      aria-disabled={disable}
+      className={tabClass}
+      key={id}
+      onClick={() => onSelect?.(id)}
+      role="tab"
+      style={style}
+      tabIndex={0}
+    >
+      <span aria-label={getLabel} className={containerClass} role="img">
+        {icon || (state === "NOT_VALIDATED" ? label : null)}
+        {state === "SUCCESS" && !icon ? <CheckIcon /> : null}
+        {state === "FAIL" && !icon ? <WarnIcon /> : null}
+      </span>
+      {canShowTitle ? <div className={styles.tab_title}>{title}</div> : null}{" "}
+    </li>
+  );
+};
+
+export { WizardHeaderTab };
diff --git a/src/components/wizard-header/wizard-header.model.ts b/src/components/wizard-header/wizard-header.model.ts
index 2eba29f..5362b9e 100644
--- a/src/components/wizard-header/wizard-header.model.ts
+++ b/src/components/wizard-header/wizard-header.model.ts
@@ -16,4 +16,5 @@ export type WizardTabProps = Pick<WizardHeaderProps, "onSelect"> &
     highlight?: boolean;
     RTL?: boolean;
     icon?: ReactNode;
+    title?: string;
   };
diff --git a/src/components/wizard-header/wizard-header.module.scss b/src/components/wizard-header/wizard-header.module.scss
index 3a1aa2f..db5003e 100644
--- a/src/components/wizard-header/wizard-header.module.scss
+++ b/src/components/wizard-header/wizard-header.module.scss
@@ -3,6 +3,10 @@
   align-items: center;
   justify-content: flex-start;
 
+  &.stepper_title_enabled {
+    margin-bottom: 2rem;
+  }
+
   &.RTL {
     direction: rtl;
   }
@@ -19,13 +23,13 @@
 
 .tab {
   border-radius: 50%;
-  background: var(--rc-wiz-tabColor);
+  // background: var(--rc-wiz-tabColor);
   color: #000;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--rc-wiz-tab-width);
+  height: 2rem;
   cursor: pointer;
   font-size: 1rem;
   position: relative;
@@ -33,18 +37,6 @@
     0 0 2px 1px rgba(0, 0, 0, 0.2);
   transition: background 0.1s ease-in, color 0.1s ease-in;
 
-  &.fail {
-    background: var(--rc-wiz-fail);
-  }
-
-  &:not(:first-child) {
-    margin: 0 4rem;
-  }
-
-  &:not(.RTL):first-child {
-    margin-right: 4rem;
-  }
-
   &.RTL:first-child {
     margin-left: 4rem;
   }
@@ -52,12 +44,12 @@
   &.disabled {
     cursor: not-allowed;
     pointer-events: none;
-    opacity: 0.75;
+    // opacity: 0.75;
   }
 
   &.selected:not(.fail),
   &.success {
-    background: var(--rc-wiz-primary);
+    // background: var(--rc-wiz-primary);
     color: #fff;
   }
 
@@ -79,38 +71,38 @@
     z-index: 1;
   }
 
-  &.selected.fail:before {
-    border: 2px solid var(--rc-wiz-fail);
-    box-shadow: 0 0 4px 1px rgba(var(--rc-wiz-fail), 0.5);
-  }
-
-  &.selected:not(.fail):before {
-    box-shadow: 0 0 4px 1px rgba(var(--rc-wiz-primary), 0.5);
-    border: 2px solid var(--rc-wiz-primary);
-  }
-
-  &:not(:last-child)::after {
+  // &:not(:last-child)::after {
+  &::after {
     content: "";
     display: block;
-    width: 8rem;
+    width: 100%;
     height: 3px;
     position: absolute;
     z-index: 0;
   }
 
-  &:not(:last-child):not(.RTL)::after {
-    left: 1.5rem;
-  }
-
   &:not(:last-child).RTL::after {
     right: 1.5rem;
   }
 
-  &:not(:last-child).highlight::after {
+  &:not(:last-child):not(.selected).highlight::after {
     background: var(--rc-wiz-primary);
   }
 
-  &:not(:last-child):not(.highlight)::after {
+  &.selected.highlight:not(:last-child)::after {
+    background: linear-gradient(
+      to right,
+      var(--rc-wiz-primary) 0%,
+      var(--rc-wiz-primary) 50%,
+      var(--rc-wiz-tabLineColor) 100%
+    );
+  }
+
+  &.selected:last-child::after {
+    background: var(--rc-wiz-primary);
+  }
+
+  &:not(.highlight)::after {
     background: var(--rc-wiz-tabLineColor);
   }
 }
@@ -122,6 +114,33 @@
   height: 1.25rem;
   width: 1.25rem;
   z-index: 1;
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    width: calc(100% + 6px);
+    height: calc(100% + 6px);
+    border-radius: 50%;
+    z-index: -1;
+  }
+
+  &.selected.fail::after {
+    border: 2px solid var(--rc-wiz-fail);
+    background: var(--rc-wiz-fail);
+    box-shadow: 0 0 4px 1px rgba(var(--rc-wiz-fail), 0.5);
+  }
+
+  &:not(.selected)::after {
+    background: var(--rc-wiz-tabColor);
+  }
+
+  &.selected:not(.fail)::after {
+    background: var(--rc-wiz-primary);
+  }
 
   &.fail {
     color: #fff;
@@ -132,3 +151,10 @@
     height: 80%;
   }
 }
+
+.tab_title {
+  position: absolute;
+  top: 2rem;
+  color: var(--rc-wiz-textColor);
+  text-transform: capitalize;
+}
diff --git a/src/components/wizard-header/wizard-header.tsx b/src/components/wizard-header/wizard-header.tsx
index c7ba587..8ce485e 100644
--- a/src/components/wizard-header/wizard-header.tsx
+++ b/src/components/wizard-header/wizard-header.tsx
@@ -1,96 +1,44 @@
 import classNames from "classnames";
 import { FunctionComponent, useContext, useMemo } from "react";
-import CheckIcon from "../../icons/check";
-import WarnIcon from "../../icons/warning";
-import { WizardContext } from "../wizard";
-import { WizardHeaderProps, WizardTabProps } from "./wizard-header.model";
+import { WizardContext } from "../wizard-context";
+import { WizardHeaderTab } from "./wizard-header-tab";
+import { WizardHeaderProps } from "./wizard-header.model";
 import styles from "./wizard-header.module.scss";
 
-const WizardTab: FunctionComponent<WizardTabProps> = ({
-  id,
-  onSelect,
-  selected,
-  state,
-  label,
-  highlight,
-  disable,
-  RTL,
-  icon,
-}) => {
-  const containerClass = useMemo(
-    () =>
-      classNames(styles.icon_container, {
-        [styles[state.toLowerCase()]]: true,
-      }),
-    [state]
-  );
-
-  const tabClass = useMemo(
-    () =>
-      classNames(
-        styles.tab,
-        selected ? styles.selected : "",
-        {
-          [styles[state.toLowerCase()]]: true,
-        },
-        highlight ? styles.highlight : "",
-        disable ? styles.disabled : "",
-        RTL ? styles.RTL : ""
-      ),
-    [state, selected, highlight, disable]
-  );
-
-  const getLabel = useMemo(
-    () => state.split("_").join(" ").toLowerCase(),
-    [state]
-  );
-
-  return (
-    <li
-      key={id}
-      className={tabClass}
-      onClick={() => onSelect?.(id)}
-      role="tab"
-      aria-disabled={disable}
-      tabIndex={0}
-    >
-      <span className={containerClass} role="img" aria-label={getLabel}>
-        {icon || (state === "NOT_VALIDATED" ? label : null)}
-        {state === "SUCCESS" && !icon ? <CheckIcon /> : null}
-        {state === "FAIL" && !icon ? <WarnIcon /> : null}
-      </span>
-    </li>
-  );
-};
-
 const WizardHeader: FunctionComponent<WizardHeaderProps> = ({
   pages,
   onSelect,
   activeIndex,
   icons,
 }) => {
-  const { strict } = useContext(WizardContext);
-  const { RTL } = useContext(WizardContext);
+  const { strict, RTL, noPageTitle, showStepperTitles } =
+    useContext(WizardContext);
 
   const wrapperClass = useMemo(
-    () => classNames(styles.wrapper, RTL ? styles.RTL : ""),
+    () =>
+      classNames(
+        styles.wrapper,
+        RTL ? styles.RTL : "",
+        noPageTitle || showStepperTitles ? styles.stepper_title_enabled : ""
+      ),
     []
   );
   return (
     <div className={wrapperClass}>
       <ul className={styles.tabs} role="tablist">
-        {pages.map(({ id, isActive, state }, index) => (
-          <WizardTab
-            key={id}
+        {pages.map(({ id, isActive, state, title }, index) => (
+          <WizardHeaderTab
+            RTL={RTL}
+            disable={strict && state !== "SUCCESS"}
+            highlight={index <= activeIndex}
+            icon={icons && icons[index]}
             id={id}
-            selected={isActive}
+            key={id}
+            label={index + 1 + ""}
             onSelect={(id) => onSelect?.(id)}
+            selected={isActive}
             state={state}
-            label={index + 1 + ""}
-            highlight={index < activeIndex}
-            disable={strict && state !== "SUCCESS"}
-            RTL={RTL}
-            icon={icons && icons[index]}
+            title={title}
           />
         ))}
       </ul>
diff --git a/src/components/wizard.model.ts b/src/components/wizard.model.ts
index 387150c..df81900 100644
--- a/src/components/wizard.model.ts
+++ b/src/components/wizard.model.ts
@@ -32,6 +32,8 @@ export type WizardProps = {
   noPageTitle?: boolean;
   icons?: ReactNode[];
   silent?: boolean;
+  stepperItemWidth?: string;
+  showStepperTitles?: boolean;
 };
 
 export type PageDim = {
@@ -47,4 +49,6 @@ export type contextType = Pick<
   | "RTL"
   | "noPageTitle"
   | "silent"
+  | "stepperItemWidth"
+  | "showStepperTitles"
 >;
diff --git a/src/components/wizard.tsx b/src/components/wizard.tsx
index df309fc..0a84327 100644
--- a/src/components/wizard.tsx
+++ b/src/components/wizard.tsx
@@ -1,6 +1,5 @@
 import { nanoid } from "nanoid";
 import {
-  createContext,
   CSSProperties,
   FunctionComponent,
   useCallback,
@@ -13,21 +12,13 @@ import { FormFieldProps } from "./form-field/form-field.model";
 import { Page } from "./page/page";
 import { PageModelProps } from "./page/page.model";
 import { ThemeDefaults } from "./theme-default";
+import { WizardContext } from "./wizard-context";
 import { WizardFinish } from "./wizard-finish";
 import { WizardFooter } from "./wizard-footer/wizard-footer";
 import { WizardHeader } from "./wizard-header/wizard-header";
-import { contextType, PageDim, WizardProps } from "./wizard.model";
+import { PageDim, WizardProps } from "./wizard.model";
 import styles from "./wizard.module.scss";
 
-export const WizardContext = createContext<contextType>({
-  highlightFieldsOnValidation: false,
-  strict: true,
-  validationDelay: 250,
-  RTL: false,
-  noPageTitle: false,
-  silent: false,
-});
-
 const Wizard: FunctionComponent<WizardProps> = ({
   pages = [],
   theme,
@@ -42,6 +33,8 @@ const Wizard: FunctionComponent<WizardProps> = ({
   noPageTitle = false,
   icons = [],
   silent = false,
+  stepperItemWidth = "200px",
+  showStepperTitles = false
 }) => {
   /** pages state */
   const [wizardPages, setWizardPages] = useState<PageModelProps[]>(
@@ -212,36 +205,38 @@ const Wizard: FunctionComponent<WizardProps> = ({
   return (
     <WizardContext.Provider
       value={{
-        highlightFieldsOnValidation,
-        strict,
-        validationDelay,
         RTL,
+        highlightFieldsOnValidation,
         noPageTitle,
+        showStepperTitles,
         silent,
+        stepperItemWidth,
+        strict,
+        validationDelay
       }}
     >
       <div className={styles.wrapper} style={rootStyle}>
         <div className={styles.header_wrapper}>
           {!wizardComplete && (
             <WizardHeader
-              pages={wizardPages}
-              onSelect={handleSelection}
               activeIndex={activeIndex}
               icons={icons}
+              onSelect={handleSelection}
+              pages={wizardPages}
             />
           )}
         </div>
-        <div className={styles.body_wrapper} style={bodyStyle} ref={onBodyRef}>
+        <div className={styles.body_wrapper} ref={onBodyRef} style={bodyStyle}>
           <div className={styles.pages_wrapper} style={pagesStyle}>
             {!wizardComplete &&
               wizardPages.map((page, index) => (
                 <Page
                   {...page}
+                  hide={activeIndex !== index}
                   key={page.id}
+                  onChange={onChange}
                   ref={initHeights}
                   width={wizardWidth}
-                  hide={activeIndex !== index}
-                  onChange={onChange}
                 />
               ))}
           </div>
@@ -250,12 +245,12 @@ const Wizard: FunctionComponent<WizardProps> = ({
         <div className={styles.footer_wrapper}>
           {!wizardComplete && (
             <WizardFooter
+              activeId={activePageId}
+              message={globalFormErrorMessage}
+              onFinish={handleFinish}
               onNext={handleNext}
               onPrev={handlePrevious}
-              onFinish={handleFinish}
               pages={wizardPages}
-              activeId={activePageId}
-              message={globalFormErrorMessage}
             />
           )}
         </div>