diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx
index ec84799197..14fba06792 100644
--- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx
+++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx
@@ -120,7 +120,7 @@ class RegistrationForm extends Component {
       <div className={baseClass}>
         <div className={formSectionClasses}>
           <div className={adminDetailsContainerClass}>
-            <h2>Setup user</h2>
+            <h2>Set up user</h2>
             <AdminDetails
               formData={formData}
               handleSubmit={onPageFormSubmit}
diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx
index 119d9c4e31..704c04e82a 100644
--- a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx
+++ b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx
@@ -10,7 +10,7 @@ describe("RegistrationForm - component", () => {
     expect(
       container.querySelectorAll(".user-registration__container--admin").length
     ).toEqual(1);
-    expect(screen.getByText("Setup user")).toBeInTheDocument();
+    expect(screen.getByText("Set up user")).toBeInTheDocument();
   });
 
   it("renders OrgDetails on the second page", () => {
diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss
index cbe28f73ca..e4dfb02a99 100644
--- a/frontend/components/forms/RegistrationForm/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/_styles.scss
@@ -181,7 +181,7 @@
 
     .button {
       width: 160px;
-      margin-top: $pad-xxlarge;
+      margin-top: $pad-medium; // 40px total (24px gap + 16px more)
     }
   }
 }
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx
deleted file mode 100644
index 549c00d6d2..0000000000
--- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
-
-class Breadcrumbs extends Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-    pageProgress: PropTypes.number,
-  };
-
-  static defaultProps = {
-    pageProgress: 1,
-  };
-
-  onClick = (page) => {
-    return (evt) => {
-      evt.preventDefault();
-
-      const { onClick: handleClick } = this.props;
-
-      return handleClick(page);
-    };
-  };
-
-  render() {
-    const { onClick } = this;
-    const { pageProgress } = this.props;
-    const baseClass = "registration-breadcrumbs";
-    const pageBaseClass = `${baseClass}__page`;
-    const page1ClassName = classnames(
-      pageBaseClass,
-      `${pageBaseClass}--1`,
-      "button--unstyled",
-      {
-        [`${pageBaseClass}--active`]: pageProgress === 1,
-        [`${pageBaseClass}--complete`]: pageProgress > 1,
-      }
-    );
-    const page2TabIndex = pageProgress >= 2 ? 0 : -1;
-    const page2ClassName = classnames(
-      pageBaseClass,
-      `${pageBaseClass}--2`,
-      "button--unstyled",
-      {
-        [`${pageBaseClass}--active`]: pageProgress === 2,
-        [`${pageBaseClass}--complete`]: pageProgress > 2,
-      }
-    );
-    const page3TabIndex = pageProgress >= 3 ? 0 : -1;
-    const page3ClassName = classnames(
-      pageBaseClass,
-      `${pageBaseClass}--3`,
-      "button--unstyled",
-      {
-        [`${pageBaseClass}--active`]: pageProgress === 3,
-        [`${pageBaseClass}--complete`]: pageProgress > 3,
-      }
-    );
-
-    return (
-      <div className={baseClass}>
-        <button className={page1ClassName} onClick={onClick(1)}>
-          Setup user
-        </button>
-        <button
-          className={page2ClassName}
-          onClick={onClick(2)}
-          tabIndex={page2TabIndex}
-        >
-          Organization details
-        </button>
-        <button
-          className={page3ClassName}
-          onClick={onClick(3)}
-          tabIndex={page3TabIndex}
-        >
-          Set Fleet URL
-        </button>
-      </div>
-    );
-  }
-}
-
-export default Breadcrumbs;
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx
deleted file mode 100644
index c94ea32525..0000000000
--- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs";
-
-describe("Breadcrumbs - component", () => {
-  it("renders 3 Button components", () => {
-    render(<Breadcrumbs page={1} />);
-    expect(screen.getAllByRole("button").length).toEqual(3);
-  });
-
-  it("renders page 1 Button as active when the page prop is 1", () => {
-    const { container } = render(<Breadcrumbs page={1} />);
-    const page1Btn = container.querySelector(
-      "button.registration-breadcrumbs__page--1"
-    );
-    const page2Btn = container.querySelector(
-      "button.registration-breadcrumbs__page--2"
-    );
-    const page3Btn = container.querySelector(
-      "button.registration-breadcrumbs__page--3"
-    );
-
-    expect(page1Btn.className).toContain(
-      "registration-breadcrumbs__page--active"
-    );
-    expect(page2Btn.className).not.toContain(
-      "registration-breadcrumbs__page--active"
-    );
-    expect(page3Btn.className).not.toContain(
-      "registration-breadcrumbs__page--active"
-    );
-  });
-
-  it("calls the onClick prop with the page number when clicked", () => {
-    const onClickSpy = jest.fn();
-    const { container } = render(<Breadcrumbs page={1} onClick={onClickSpy} />);
-    const page1Btn = container.querySelector(
-      "button.registration-breadcrumbs__page--1"
-    );
-    const page2Btn = container.querySelector(
-      "button.registration-breadcrumbs__page--2"
-    );
-    const page3Btn = container.querySelector(
-      "button.registration-breadcrumbs__page--3"
-    );
-
-    fireEvent.click(page1Btn);
-
-    expect(onClickSpy).toHaveBeenCalledWith(1);
-
-    fireEvent.click(page2Btn);
-
-    expect(onClickSpy).toHaveBeenCalledWith(2);
-
-    fireEvent.click(page3Btn);
-
-    expect(onClickSpy).toHaveBeenCalledWith(3);
-  });
-});
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx
new file mode 100644
index 0000000000..74714ba4c2
--- /dev/null
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { noop } from "lodash";
+
+import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs";
+
+describe("Breadcrumbs - component", () => {
+  it("renders 3 Button components", () => {
+    render(<Breadcrumbs onSetPage={noop} pageProgress={1} currentPage={1} />);
+    expect(screen.getAllByRole("button").length).toEqual(3);
+  });
+
+  it("renders page 1 Button as active when the current page prop is 1", () => {
+    const { container } = render(
+      <Breadcrumbs onSetPage={noop} pageProgress={1} currentPage={1} />
+    );
+    const page1Btn = container.querySelector(
+      "button.registration-breadcrumbs__page--1"
+    );
+    const page2Btn = container.querySelector(
+      "button.registration-breadcrumbs__page--2"
+    );
+    const page3Btn = container.querySelector(
+      "button.registration-breadcrumbs__page--3"
+    );
+
+    expect(page1Btn?.className).toContain(
+      "registration-breadcrumbs__page--active"
+    );
+    expect(page2Btn?.className).not.toContain(
+      "registration-breadcrumbs__page--active"
+    );
+    expect(page3Btn?.className).not.toContain(
+      "registration-breadcrumbs__page--active"
+    );
+  });
+});
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..edeeef39ba
--- /dev/null
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,64 @@
+import React, { MouseEventHandler } from "react";
+import classnames from "classnames";
+
+import Button from "components/buttons/Button";
+
+interface IBreadcrumbs {
+  onSetPage: (page: number) => void;
+  currentPage: number;
+  pageProgress: number;
+}
+const baseClass = "registration-breadcrumbs";
+
+const Breadcrumbs = ({
+  onSetPage,
+  currentPage = 1,
+  pageProgress = 1,
+}: IBreadcrumbs): JSX.Element => {
+  const pageBaseClass = `${baseClass}__page`;
+  const page1ClassName = classnames(pageBaseClass, `${pageBaseClass}--1`, {
+    [`${pageBaseClass}--active`]: currentPage === 1,
+    [`${pageBaseClass}--complete`]: pageProgress > 1,
+  });
+
+  const page2TabIndex = pageProgress >= 2 ? 0 : -1;
+  const page2ClassName = classnames(pageBaseClass, `${pageBaseClass}--2`, {
+    [`${pageBaseClass}--active`]: currentPage === 2,
+    [`${pageBaseClass}--complete`]: pageProgress > 2,
+  });
+  const page3TabIndex = pageProgress >= 3 ? 0 : -1;
+  const page3ClassName = classnames(pageBaseClass, `${pageBaseClass}--3`, {
+    [`${pageBaseClass}--active`]: currentPage === 3,
+    [`${pageBaseClass}--complete`]: pageProgress > 3,
+  });
+
+  return (
+    <div className={baseClass}>
+      <Button
+        className={page1ClassName}
+        onClick={() => onSetPage(1)}
+        variant="unstyled"
+      >
+        Set up user
+      </Button>
+      <Button
+        className={page2ClassName}
+        onClick={() => onSetPage(2)}
+        tabIndex={page2TabIndex}
+        variant="unstyled"
+      >
+        Organization details
+      </Button>
+      <Button
+        className={page3ClassName}
+        onClick={() => onSetPage(3)}
+        tabIndex={page3TabIndex}
+        variant="unstyled"
+      >
+        Set Fleet URL
+      </Button>
+    </div>
+  );
+};
+
+export default Breadcrumbs;
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
index 97b54005d6..d8fe1f1695 100644
--- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
@@ -71,7 +71,6 @@
 
     &--active {
       font-weight: $bold;
-      color: $core-white;
     }
 
     &--1 {
@@ -97,7 +96,7 @@
 
       &.registration-breadcrumbs__page--complete {
         &::before {
-          background-color: $core-white;
+          background: $core-white;
           background-size: auto;
           z-index: 2;
         }
diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/index.js b/frontend/pages/RegistrationPage/Breadcrumbs/index.ts
similarity index 100%
rename from frontend/pages/RegistrationPage/Breadcrumbs/index.js
rename to frontend/pages/RegistrationPage/Breadcrumbs/index.ts
diff --git a/frontend/pages/RegistrationPage/RegistrationPage.tsx b/frontend/pages/RegistrationPage/RegistrationPage.tsx
index 5d0fbd6445..84323d68e9 100644
--- a/frontend/pages/RegistrationPage/RegistrationPage.tsx
+++ b/frontend/pages/RegistrationPage/RegistrationPage.tsx
@@ -86,8 +86,8 @@ const RegistrationPage = ({ router }: IRegistrationPageProps) => {
         className={`${baseClass}__logo`}
       />
       <Breadcrumbs
-        onClick={onSetPage}
-        page={page}
+        currentPage={page}
+        onSetPage={onSetPage}
         pageProgress={pageProgress}
       />
       <RegistrationForm