diff --git a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.module.scss b/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.module.scss
deleted file mode 100644
index db56d0a1d0c..00000000000
--- a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.module.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@use "scss/colors";
-@use "scss/variables";
-
-.steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: variables.$spacing-md;
-  margin-bottom: variables.$spacing-lg;
-}
-
-.tooltip {
-  display: flex;
-}
-
-.step {
-  display: inline-block;
-  width: 35px;
-  height: 4px;
-  border-radius: variables.$border-radius-2xs;
-  background-color: colors.$grey-300;
-
-  // Give the element a bit larger hover area for the tooltip to show
-  margin: 8px 0;
-
-  &.completed {
-    background-color: colors.$blue-200;
-  }
-
-  &.current {
-    background-color: colors.$blue;
-  }
-}
diff --git a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.stories.tsx b/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.stories.tsx
deleted file mode 100644
index 02cd5e33cb2..00000000000
--- a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-
-import { StepsIndicator } from "./StepsIndicator";
-
-export default {
-  title: "UI/StepsIndicator",
-  component: StepsIndicator,
-  argTypes: {},
-} as ComponentMeta<typeof StepsIndicator>;
-
-const Template: ComponentStory<typeof StepsIndicator> = (args) => <StepsIndicator {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  steps: [
-    {
-      id: "source",
-      name: "Create source",
-    },
-    {
-      id: "destination",
-      name: "Create destination",
-    },
-    {
-      id: "connection",
-      name: "Create connection",
-    },
-  ],
-  activeStep: "destination",
-};
diff --git a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.tsx b/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.tsx
deleted file mode 100644
index 65bac7e382c..00000000000
--- a/airbyte-webapp/src/components/ui/StepsIndicator/StepsIndicator.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import classNames from "classnames";
-import { FormattedMessage } from "react-intl";
-
-import { Tooltip } from "components/ui/Tooltip";
-
-import styles from "./StepsIndicator.module.scss";
-
-interface Step {
-  id: string;
-  name: string;
-}
-
-interface StepIndicatorProps {
-  step: Step;
-  isCurrent: boolean;
-  isCompleted: boolean;
-}
-
-interface StepsIndicatorProps {
-  steps: Step[];
-  activeStep: string;
-  className?: string;
-}
-
-const StepIndicator: React.FC<StepIndicatorProps> = ({ step, isCurrent, isCompleted }) => {
-  return (
-    <Tooltip
-      containerClassName={styles.tooltip}
-      control={
-        <span
-          aria-label={step.name}
-          aria-current={isCurrent ? "step" : undefined}
-          className={classNames(styles.step, { [styles.current]: isCurrent, [styles.completed]: isCompleted })}
-        />
-      }
-    >
-      {step.name} {isCurrent && <FormattedMessage id="ui.stepIndicator.currentStep" />}
-    </Tooltip>
-  );
-};
-
-export const StepsIndicator: React.FC<StepsIndicatorProps> = ({ className, steps, activeStep }) => {
-  const activeIndex = steps.findIndex((step) => step.id === activeStep);
-  return (
-    <div className={classNames(className, styles.steps)}>
-      {steps.map((step, index) => (
-        <StepIndicator key={step.id} step={step} isCurrent={activeStep === step.id} isCompleted={index < activeIndex} />
-      ))}
-    </div>
-  );
-};
diff --git a/airbyte-webapp/src/components/ui/StepsIndicator/index.ts b/airbyte-webapp/src/components/ui/StepsIndicator/index.ts
deleted file mode 100644
index 9cc8dadf174..00000000000
--- a/airbyte-webapp/src/components/ui/StepsIndicator/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { StepsIndicator } from "./StepsIndicator";
diff --git a/airbyte-webapp/src/components/ui/StepsMenu/Step.tsx b/airbyte-webapp/src/components/ui/StepsMenu/Step.tsx
deleted file mode 100644
index 25b9909f8a7..00000000000
--- a/airbyte-webapp/src/components/ui/StepsMenu/Step.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, { useCallback } from "react";
-import styled from "styled-components";
-
-interface StepProps {
-  id: string;
-  lightMode?: boolean;
-  name: string | React.ReactNode;
-  onClick?: (id: string) => void;
-  isActive?: boolean;
-  icon?: React.ReactNode;
-  num: number;
-  disabled?: boolean;
-}
-
-const StepView = styled.div<{
-  isActive?: boolean;
-  lightMode?: boolean;
-  nonClickable?: boolean;
-  hidden?: boolean;
-}>`
-  width: ${({ lightMode }) => (lightMode ? "auto" : "212px")};
-  min-width: ${({ lightMode }) => (lightMode ? "100px" : "auto")};
-  min-height: 28px;
-  padding: 6px 14px;
-  border-radius: 28px;
-  pointer-events: ${({ isActive, nonClickable }) => (isActive || nonClickable ? "none" : "all")};
-  cursor: ${({ nonClickable }) => (nonClickable ? "default" : "pointer")};
-  text-align: center;
-  background: ${({ theme, isActive }) => (isActive ? theme.primaryColor12 : "none")};
-  color: ${({ theme, isActive }) => (isActive ? theme.primaryColor : theme.greyColor60)};
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 15px;
-  transition: 0.3s;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  pointer-events: ${({ nonClickable }) => (nonClickable ? "none" : "initial")};
-  opacity: ${({ nonClickable }) => (nonClickable ? "0.5" : "1")};
-`;
-
-const Num = styled.div<{ isActive?: boolean }>`
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  text-align: center;
-  background: ${({ theme, isActive }) => (isActive ? theme.primaryColor : theme.greyColor60)};
-  color: ${({ theme }) => theme.whiteColor};
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 16px;
-  display: inline-block;
-  margin-right: 6px;
-  box-shadow: 0 1px 2px 0 ${({ theme }) => theme.shadowColor};
-`;
-
-export const Step: React.FC<StepProps> = ({ name, id, isActive, onClick, num, lightMode, icon, disabled }) => {
-  const onItemClickItem = useCallback(() => onClick?.(id), [id, onClick]);
-
-  return (
-    <StepView
-      data-id={`${id.toLowerCase()}-step`}
-      nonClickable={!onClick || disabled}
-      onClick={onItemClickItem}
-      isActive={isActive}
-      lightMode={lightMode}
-    >
-      {lightMode ? null : <Num isActive={isActive}>{num}</Num>}
-      {icon}
-      {name}
-    </StepView>
-  );
-};
diff --git a/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.stories.tsx b/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.stories.tsx
deleted file mode 100644
index 3da86bfd513..00000000000
--- a/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.stories.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-
-import { StepsMenu } from "./StepsMenu";
-
-export default {
-  title: "UI/StepsMenu",
-  component: StepsMenu,
-  argTypes: {},
-} as ComponentMeta<typeof StepsMenu>;
-
-const Template: ComponentStory<typeof StepsMenu> = (args) => <StepsMenu {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  data: [
-    {
-      id: "status",
-      name: "Status",
-    },
-    {
-      id: "replication",
-      name: "Replication",
-    },
-    {
-      id: "transformation",
-      name: "Transformation",
-    },
-  ],
-  activeStep: "replication",
-};
diff --git a/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.tsx b/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.tsx
deleted file mode 100644
index 9e22a0cb370..00000000000
--- a/airbyte-webapp/src/components/ui/StepsMenu/StepsMenu.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import { Step } from "./Step";
-
-export interface StepMenuItem {
-  id: string;
-  name: string | React.ReactNode;
-  icon?: React.ReactNode;
-  onSelect?: () => void;
-}
-
-interface StepMenuProps {
-  lightMode?: boolean;
-  data: StepMenuItem[];
-  activeStep?: string;
-  onSelect?: (id: string) => void;
-  disabled?: boolean;
-}
-
-const Content = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  font-family: ${({ theme }) => theme.regularFont};
-`;
-
-export const StepsMenu: React.FC<StepMenuProps> = ({ data, onSelect, activeStep, lightMode, disabled }) => {
-  return (
-    <Content>
-      {data.map((item, key) => (
-        <Step
-          icon={item.icon}
-          lightMode={lightMode}
-          key={item.id}
-          num={key + 1}
-          name={item.name}
-          id={item.id}
-          onClick={item.onSelect || onSelect}
-          isActive={activeStep === item.id}
-          disabled={disabled}
-        />
-      ))}
-    </Content>
-  );
-};
diff --git a/airbyte-webapp/src/components/ui/StepsMenu/index.tsx b/airbyte-webapp/src/components/ui/StepsMenu/index.tsx
deleted file mode 100644
index 986f569b1b7..00000000000
--- a/airbyte-webapp/src/components/ui/StepsMenu/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./StepsMenu";