diff --git a/src/components/Stepper/Step/Step.scss b/src/components/Stepper/Step/Step.scss
new file mode 100644
index 00000000..abe23df8
--- /dev/null
+++ b/src/components/Stepper/Step/Step.scss
@@ -0,0 +1,115 @@
+@import "vanilla-framework";
+
+.p-list__item {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+
+.p-inline-list {
+  display: flex;
+}
+
+.p-inline-list__item {
+  margin: 0;
+}
+
+.step-number {
+  border: 0.08rem solid black;
+  border-radius: 1rem;
+  height: 1.4rem;
+  line-height: 1.3;
+  margin-left: $sph--small;
+  margin-right: 0.1rem;
+  margin-top: 0.1rem;
+  text-align: center;
+  width: 1.4rem;
+}
+
+.step-number-disabled {
+  border: 0.08rem solid #757575;
+  color: #757575;
+}
+
+.step-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin-left: $sph--small;
+}
+
+.step-enabled:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.step-disabled {
+  color: #757575;
+  pointer-events: none;
+}
+
+.step-status-icon {
+  height: 1.6rem;
+  margin-left: 0.4rem;
+  width: 1.6rem;
+}
+
+.step-selected {
+  background-color: var(--vf-color-background-alt);
+}
+
+.step-optional-content {
+  font-size: 12px;
+  max-width: 10rem;
+}
+
+.stepper-horizontal {
+  .step {
+    border-top: 0.2rem solid var(--vf-color-border-default);
+    display: flex;
+    height: 100%;
+    padding: 0.4rem $spv--medium;
+    width: fit-content;
+  }
+
+  .step-status-icon {
+    margin-left: 0;
+  }
+
+  .step-number {
+    margin-left: 0;
+  }
+
+  .step-content {
+    max-width: 10rem;
+  }
+
+  .progress-line {
+    border-top: 0.2rem solid black;
+  }
+
+  :first-child .step {
+    padding-left: 0;
+  }
+}
+
+.stepper-vertical {
+  .step {
+    border-left: 0.2rem solid var(--vf-color-border-default);
+    display: flex;
+    padding: $spv--medium 0;
+    padding-right: 0.5rem;
+    width: fit-content;
+  }
+
+  .progress-line {
+    border-left: 0.2rem solid black;
+  }
+
+  :first-child .step {
+    padding-top: 0;
+  }
+
+  :last-child .step {
+    padding-bottom: 0;
+  }
+}
diff --git a/src/components/Stepper/Step/Step.stories.tsx b/src/components/Stepper/Step/Step.stories.tsx
new file mode 100644
index 00000000..a9c2701f
--- /dev/null
+++ b/src/components/Stepper/Step/Step.stories.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Step from "./Step";
+import Stepper from "../Stepper";
+
+const meta: Meta<typeof Step> = {
+  component: Step,
+  render: (args) => (
+    <Stepper variant="horizontal" steps={[<Step key="step" {...args} />]} />
+  ),
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Step>;
+
+export const Default: Story = {
+  name: "Default",
+
+  args: {
+    title: "Step 1",
+    index: 1,
+    enabled: false,
+    hasProgressLine: false,
+    iconName: "number",
+    handleClick: () => {},
+  },
+};
diff --git a/src/components/Stepper/Step/Step.test.tsx b/src/components/Stepper/Step/Step.test.tsx
new file mode 100644
index 00000000..fb483e84
--- /dev/null
+++ b/src/components/Stepper/Step/Step.test.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Step from "./Step";
+import type { Props } from "./Step";
+
+describe("Step component", () => {
+  const props: Props = {
+    hasProgressLine: true,
+    index: 1,
+    title: "Title",
+    enabled: true,
+    iconName: "number",
+    handleClick: jest.fn(),
+  };
+
+  it("renders the step with the required props", () => {
+    render(<Step {...props} />);
+    expect(screen.getByText("Title")).toBeInTheDocument();
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(document.querySelector(".progress-line")).toBeInTheDocument();
+  });
+
+  it("can display icon", () => {
+    render(<Step {...props} iconName="success" />);
+    expect(document.querySelector(".p-icon--success")).toBeInTheDocument();
+  });
+
+  it("can disable the step", () => {
+    render(<Step {...props} enabled={false} />);
+    expect(screen.getByText("Title")).toHaveClass("step-disabled");
+  });
+
+  it("can select the step", () => {
+    render(<Step {...props} selected={true} />);
+    expect(document.querySelector(".step-selected")).toBeInTheDocument();
+  });
+
+  it("can call handleClick when clicked", async () => {
+    render(<Step {...props} />);
+    await userEvent.click(screen.getByText("Title"));
+    expect(props.handleClick).toHaveBeenCalled();
+  });
+
+  it("can display optional label", () => {
+    render(<Step {...props} label="Optional label" />);
+
+    expect(screen.getByText("Optional label")).toBeInTheDocument();
+  });
+
+  it("can display optional link", () => {
+    const linkProps = {
+      href: "/test-link",
+      children: "Link",
+    };
+    render(<Step {...props} linkProps={linkProps} />);
+    const linkElement = screen.getByRole("link", { name: "Link" });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute("href", "/test-link");
+  });
+});
diff --git a/src/components/Stepper/Step/Step.tsx b/src/components/Stepper/Step/Step.tsx
new file mode 100644
index 00000000..2477e435
--- /dev/null
+++ b/src/components/Stepper/Step/Step.tsx
@@ -0,0 +1,118 @@
+import classNames from "classnames";
+import React from "react";
+import Icon from "components/Icon";
+import Link, { LinkProps } from "components/Link";
+import { ClassName } from "types";
+import "./Step.scss";
+
+export type Props = {
+  /**
+   * Whether the step has a darkened progress line.
+   */
+  hasProgressLine: boolean;
+  /**
+   * Index of the step.
+   */
+  index: number;
+  /**
+   * Title of the step.
+   */
+  title: string;
+  /**
+   * Optional label for the step.
+   */
+  label?: string;
+  /**
+   * Optional props to configure the `Link` component.
+   */
+  linkProps?: LinkProps;
+  /**
+   * Whether the step is clickable. If set to false, the step is not clickable and the text is muted with a light-dark colour.
+   */
+  enabled: boolean;
+  /**
+   * Optional value to highlight the selected step.
+   */
+  selected?: boolean;
+  /**
+   * Icon to display in the step. Specify "number" if the index should be displayed.
+   */
+  iconName: string;
+  /**
+   * Optional class(es) to pass to the Icon component.
+   */
+  iconClassName?: ClassName;
+  /**
+   * Function that is called when the step is clicked.
+   */
+  handleClick: () => void;
+};
+
+const Step = ({
+  hasProgressLine,
+  index,
+  title,
+  label,
+  linkProps,
+  enabled,
+  selected = false,
+  iconName,
+  iconClassName,
+  handleClick,
+  ...props
+}: Props): JSX.Element => {
+  const stepStatusClass = enabled ? "step-enabled" : "step-disabled";
+
+  return (
+    <div
+      className={classNames("step", {
+        "progress-line": hasProgressLine,
+        "step-selected": selected,
+      })}
+      {...props}
+    >
+      {iconName === "number" ? (
+        <span
+          className={classNames("step-number", {
+            "step-number-disabled": !enabled,
+          })}
+        >
+          {index}
+        </span>
+      ) : (
+        <Icon
+          name={iconName}
+          className={classNames("step-status-icon", iconClassName)}
+        />
+      )}
+      <div className="step-content">
+        <span className={classNames(stepStatusClass)} onClick={handleClick}>
+          {title}
+        </span>
+        {label && (
+          <span
+            className={classNames(
+              "step-optional-content",
+              "u-no-margin--bottom",
+              {
+                "step-disabled": !enabled,
+              },
+            )}
+          >
+            {label}
+          </span>
+        )}
+        {linkProps && (
+          <Link
+            className="p-text--small u-no-margin--bottom step-optional-content"
+            {...linkProps}
+          >
+            {linkProps.children}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Step;
diff --git a/src/components/Stepper/Step/index.tsx b/src/components/Stepper/Step/index.tsx
new file mode 100644
index 00000000..cbecee7f
--- /dev/null
+++ b/src/components/Stepper/Step/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./Step";
+export type { Props as StepProps } from "./Step";
diff --git a/src/components/Stepper/Stepper.stories.tsx b/src/components/Stepper/Stepper.stories.tsx
new file mode 100644
index 00000000..b6dfcf1a
--- /dev/null
+++ b/src/components/Stepper/Stepper.stories.tsx
@@ -0,0 +1,318 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Stepper from "./Stepper";
+import Step from "./Step/Step";
+
+const meta: Meta<typeof Stepper> = {
+  component: Stepper,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Stepper>;
+
+export const Default: Story = {
+  name: "Default",
+
+  args: {
+    variant: "vertical",
+    steps: [
+      <Step
+        key="Default Step 1"
+        title="Step 1"
+        index={1}
+        enabled={true}
+        hasProgressLine={true}
+        iconName="success"
+        handleClick={() => {}}
+      />,
+      <Step
+        key="Default Step 2"
+        title="Step 2"
+        index={2}
+        enabled={true}
+        hasProgressLine={true}
+        iconName="spinner"
+        iconClassName="u-animation--spin"
+        handleClick={() => {}}
+      />,
+      <Step
+        key="Default Step 3"
+        title="Step 3"
+        index={3}
+        enabled={false}
+        hasProgressLine={false}
+        iconName="number"
+        handleClick={() => {}}
+      />,
+      <Step
+        key="Default Step 4"
+        title="Step 4"
+        index={4}
+        enabled={false}
+        hasProgressLine={false}
+        iconName="number"
+        handleClick={() => {}}
+      />,
+    ],
+  },
+};
+
+export const HorizontalStepper: Story = {
+  name: "Horizontal Stepper",
+  render: () => (
+    <Stepper
+      variant="horizontal"
+      steps={[
+        <Step
+          key="Horizontal Step 1"
+          title="Step 1"
+          index={1}
+          enabled={false}
+          hasProgressLine={true}
+          iconName="success"
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Horizontal Step 2"
+          title="Step 2"
+          index={2}
+          enabled={false}
+          hasProgressLine={true}
+          iconName="error"
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Horizontal Step 3"
+          title="Step 3"
+          index={3}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="spinner"
+          iconClassName="u-animation--spin"
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Horizontal Step 4"
+          title="Step 4"
+          index={4}
+          enabled={false}
+          hasProgressLine={false}
+          iconName="number"
+          handleClick={() => {}}
+        />,
+      ]}
+    />
+  ),
+};
+
+export const VerticalOptional: Story = {
+  name: "Vertical variant: Optional labels and links",
+  render: () => (
+    <Stepper
+      steps={[
+        <Step
+          key="Vertical optional Step 1"
+          title="Step 1"
+          index={1}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          label="Optional label"
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Vertical optional Step 2"
+          title="Step 2"
+          index={2}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          handleClick={() => {}}
+          label="Optional label"
+        />,
+        <Step
+          key="Vertical optional Step 3"
+          title="Step 3"
+          index={3}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="number"
+          label="Optional label"
+          linkProps={{ children: "Optional link" }}
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Vertical optional Step 4"
+          title="Step 4"
+          index={4}
+          enabled={false}
+          hasProgressLine={false}
+          linkProps={{ children: "Optional link" }}
+          iconName="number"
+          handleClick={() => {}}
+        />,
+      ]}
+    />
+  ),
+};
+
+export const HorizontalOptional: Story = {
+  name: "Horizontal variant: Optional labels and links",
+  render: () => (
+    <Stepper
+      variant="horizontal"
+      steps={[
+        <Step
+          key="Horizontal optional Step 1"
+          title="Step 1"
+          index={1}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          label="Optional label"
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Horizontal optional Step 2"
+          title="Step 2"
+          index={2}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          handleClick={() => {}}
+          label="Optional label"
+        />,
+        <Step
+          key="Horizontal optional Step 3"
+          title="Step 3"
+          index={3}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="number"
+          label="Optional label"
+          linkProps={{ children: "Optional link" }}
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Horizontal optional Step 4"
+          title="Step 4"
+          index={4}
+          enabled={false}
+          hasProgressLine={false}
+          iconName="number"
+          linkProps={{ children: "Optional link" }}
+          handleClick={() => {}}
+        />,
+      ]}
+    />
+  ),
+};
+
+export const VerticalSelected: Story = {
+  name: "Vertical variant: Selected step",
+  render: () => (
+    <Stepper
+      steps={[
+        <Step
+          key="Vertical Selected Step 1"
+          title="Step 1"
+          index={1}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          label="Optional label"
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Vertical Selected Step 2"
+          title="Step 2"
+          index={2}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          handleClick={() => {}}
+          label="Optional label"
+          selected={true}
+        />,
+        <Step
+          key="Vertical Selected Step 3"
+          title="Step 3"
+          index={3}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="number"
+          label="Optional label"
+          linkProps={{ children: "Optional link" }}
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Vertical Selected Step 4"
+          title="Step 4"
+          index={4}
+          enabled={false}
+          hasProgressLine={false}
+          linkProps={{ children: "Optional link" }}
+          iconName="number"
+          label="Optional label"
+          handleClick={() => {}}
+        />,
+      ]}
+    />
+  ),
+};
+
+export const HorizontalSelected: Story = {
+  name: "Horizontal variant: Selected step",
+  render: () => (
+    <Stepper
+      variant="horizontal"
+      steps={[
+        <Step
+          key="Horizontal Selected Step 1"
+          title="Step 1"
+          index={1}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          label="Optional label"
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Horizontal Selected Step 2"
+          title="Step 2"
+          index={2}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="success"
+          selected={true}
+          handleClick={() => {}}
+          label="Optional label"
+        />,
+        <Step
+          key="Horizontal Selected Step 3"
+          title="Step 3"
+          index={3}
+          enabled={true}
+          hasProgressLine={true}
+          iconName="number"
+          label="Optional label"
+          linkProps={{ children: "Optional link" }}
+          handleClick={() => {}}
+        />,
+        <Step
+          key="Horizontal Selected Step 4"
+          title="Step 4"
+          index={4}
+          enabled={false}
+          hasProgressLine={false}
+          iconName="number"
+          label="Optional label"
+          linkProps={{ children: "Optional link" }}
+          handleClick={() => {}}
+        />,
+      ]}
+    />
+  ),
+};
diff --git a/src/components/Stepper/Stepper.test.tsx b/src/components/Stepper/Stepper.test.tsx
new file mode 100644
index 00000000..81ff640d
--- /dev/null
+++ b/src/components/Stepper/Stepper.test.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Step from "./Step";
+import Stepper from "./Stepper";
+
+describe("Step component", () => {
+  const steps = [
+    <Step
+      key="Step 1"
+      title="Step 1"
+      index={1}
+      enabled={true}
+      hasProgressLine={true}
+      iconName="success"
+      label="Optional label"
+      handleClick={() => {}}
+    />,
+    <Step
+      key="Step 2"
+      title="Step 2"
+      index={2}
+      enabled={true}
+      hasProgressLine={true}
+      iconName="success"
+      handleClick={() => {}}
+      label="Optional label"
+    />,
+    <Step
+      key="Step 3"
+      title="Step 3"
+      index={3}
+      enabled={true}
+      hasProgressLine={true}
+      iconName="number"
+      label="Optional label"
+      linkProps={{ children: "Optional link" }}
+      handleClick={() => {}}
+    />,
+    <Step
+      key="Step 4"
+      title="Step 4"
+      index={4}
+      enabled={false}
+      hasProgressLine={false}
+      linkProps={{ children: "Optional link" }}
+      iconName="number"
+      handleClick={() => {}}
+    />,
+  ];
+
+  it("renders the stepper", () => {
+    render(<Stepper steps={steps} />);
+    expect(screen.getByRole("list")).toMatchSnapshot();
+  });
+
+  it("can be a horizontal stepper", () => {
+    render(<Stepper steps={steps} variant="horizontal" />);
+    expect(document.querySelector(".stepper-horizontal")).toBeInTheDocument();
+  });
+
+  it("can be a vertical stepper", () => {
+    render(<Stepper steps={steps} variant="vertical" />);
+    expect(document.querySelector(".stepper-vertical")).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx
new file mode 100644
index 00000000..530053d7
--- /dev/null
+++ b/src/components/Stepper/Stepper.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import List from "components/List";
+import { StepProps } from "./Step";
+import classNames from "classnames";
+
+export type Props = {
+  /**
+   * Optional value that defines the orientation of the stepper. Can either be "horizontal" or "vertical". If not specified, it defaults to "vertical".
+   */
+  variant?: "horizontal" | "vertical";
+  /**
+   * A list of steps.
+   */
+  steps: React.ReactElement<StepProps>[];
+};
+
+/**
+ * This is a stepper component that is used to guide users through a series of sequential steps, providing a clear start and end point. It helps users understand their current position in the process and anticipate upcoming actions. The stepper component should accept a list of Step components for the steps.
+ */
+
+const Stepper = ({ variant = "vertical", steps }: Props): JSX.Element => {
+  return (
+    <List
+      items={steps}
+      inline={variant === "horizontal"}
+      className={classNames({
+        "stepper-horizontal": variant === "horizontal",
+        "stepper-vertical": variant === "vertical",
+      })}
+    />
+  );
+};
+
+export default Stepper;
diff --git a/src/components/Stepper/__snapshots__/Stepper.test.tsx.snap b/src/components/Stepper/__snapshots__/Stepper.test.tsx.snap
new file mode 100644
index 00000000..b30964bf
--- /dev/null
+++ b/src/components/Stepper/__snapshots__/Stepper.test.tsx.snap
@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Step component renders the stepper 1`] = `
+<ul
+  class="stepper-vertical p-list"
+>
+  <li
+    class="p-list__item"
+  >
+    <div
+      class="step progress-line"
+    >
+      <i
+        class="step-status-icon p-icon--success"
+      />
+      <div
+        class="step-content"
+      >
+        <span
+          class="step-enabled"
+        >
+          Step 1
+        </span>
+        <span
+          class="step-optional-content u-no-margin--bottom"
+        >
+          Optional label
+        </span>
+      </div>
+    </div>
+  </li>
+  <li
+    class="p-list__item"
+  >
+    <div
+      class="step progress-line"
+    >
+      <i
+        class="step-status-icon p-icon--success"
+      />
+      <div
+        class="step-content"
+      >
+        <span
+          class="step-enabled"
+        >
+          Step 2
+        </span>
+        <span
+          class="step-optional-content u-no-margin--bottom"
+        >
+          Optional label
+        </span>
+      </div>
+    </div>
+  </li>
+  <li
+    class="p-list__item"
+  >
+    <div
+      class="step progress-line"
+    >
+      <span
+        class="step-number"
+      >
+        3
+      </span>
+      <div
+        class="step-content"
+      >
+        <span
+          class="step-enabled"
+        >
+          Step 3
+        </span>
+        <span
+          class="step-optional-content u-no-margin--bottom"
+        >
+          Optional label
+        </span>
+        <a
+          class="p-text--small u-no-margin--bottom step-optional-content"
+          href="#"
+        >
+          Optional link
+        </a>
+      </div>
+    </div>
+  </li>
+  <li
+    class="p-list__item"
+  >
+    <div
+      class="step"
+    >
+      <span
+        class="step-number step-number-disabled"
+      >
+        4
+      </span>
+      <div
+        class="step-content"
+      >
+        <span
+          class="step-disabled"
+        >
+          Step 4
+        </span>
+        <a
+          class="p-text--small u-no-margin--bottom step-optional-content"
+          href="#"
+        >
+          Optional link
+        </a>
+      </div>
+    </div>
+  </li>
+</ul>
+`;
diff --git a/src/components/Stepper/index.ts b/src/components/Stepper/index.ts
new file mode 100644
index 00000000..407240b7
--- /dev/null
+++ b/src/components/Stepper/index.ts
@@ -0,0 +1,2 @@
+export { default, type Props as StepperProps } from "./Stepper";
+export { default as Step } from "./Step";