diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss
new file mode 100644
index 000000000000..37bcac8f8e48
--- /dev/null
+++ b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,18 @@
+@use "scss/colors";
+
+.container {
+  font-weight: normal;
+  cursor: default;
+}
+
+.item {
+  display: inline-block;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.unlinked {
+  font-weight: bold;
+}
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx
index 87df194a700a..40e3a7a034a6 100644
--- a/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx
+++ b/airbyte-webapp/src/components/ui/Breadcrumbs/Breadcrumbs.tsx
@@ -1,28 +1,12 @@
 import React from "react";
-import styled from "styled-components";
 
-const BreadcrumbsContainer = styled.div`
-  font-weight: normal;
-  cursor: default;
-`;
+import { Link } from "components";
 
-const LastBreadcrumbsItem = styled.span`
-  font-weight: bold;
-`;
-
-const BreadcrumbsItem = styled.div`
-  display: inline-block;
-  cursor: pointer;
-  color: ${({ theme }) => theme.primaryColor};
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;
+import styles from "./Breadcrumbs.module.scss";
 
 export interface BreadcrumbsDataItem {
-  name: string | React.ReactNode;
-  onClick?: () => void;
+  label: string;
+  to?: string;
 }
 
 interface BreadcrumbsProps {
@@ -30,20 +14,22 @@ interface BreadcrumbsProps {
 }
 
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ data }) => {
-  const lastIndex = data.length - 1;
-
   return (
-    <BreadcrumbsContainer>
-      {data.map((item, key) =>
-        key === lastIndex ? (
-          <LastBreadcrumbsItem key={`breadcrumbs-item-${key}`}>{item.name}</LastBreadcrumbsItem>
-        ) : (
-          <span key={`breadcrumbs-item-${key}`}>
-            <BreadcrumbsItem onClick={item.onClick}>{item.name}</BreadcrumbsItem>
-            <span> / </span>
-          </span>
-        )
-      )}
-    </BreadcrumbsContainer>
+    <div className={styles.container}>
+      {data.map((item, index) => (
+        <span key={index}>
+          {item.to ? (
+            <Link to={item.to} $clear className={styles.item}>
+              {item.label}
+            </Link>
+          ) : (
+            <span className={styles.unlinked} key={index}>
+              {item.label}
+            </span>
+          )}
+          {index !== data.length - 1 && <span> / </span>}
+        </span>
+      ))}
+    </div>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx b/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx
index 96f93c2f62ef..645309ea5756 100644
--- a/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx
+++ b/airbyte-webapp/src/components/ui/Breadcrumbs/index.stories.tsx
@@ -10,22 +10,17 @@ export default {
 
 const Template: ComponentStory<typeof Breadcrumbs> = (args) => <Breadcrumbs {...args} />;
 
-const onClick = () => {
-  console.log("onClick");
-};
-
 const data: BreadcrumbsDataItem[] = [
   {
-    name: "Workspace",
-    onClick,
+    label: "Workspace",
+    to: "/workspace",
   },
   {
-    name: "Source",
-    onClick,
+    label: "Source",
+    to: "/workspace/source",
   },
   {
-    name: "Settings",
-    onClick,
+    label: "Settings",
   },
 ];
 
diff --git a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
index 849453db15aa..12b2421d2c8f 100644
--- a/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
+++ b/airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense, useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 import { Route, Routes, useNavigate, useParams } from "react-router-dom";
 
 import { LoadingPage } from "components";
@@ -29,6 +29,7 @@ const DestinationItemPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.DESTINATION_ITEM);
   const params = useParams() as { "*": StepsTypes | ""; id: string };
   const navigate = useNavigate();
+  const { formatMessage } = useIntl();
   const currentStep = useMemo<string>(() => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]), [params]);
 
   const { sources } = useSourceList();
@@ -41,8 +42,6 @@ const DestinationItemPage: React.FC = () => {
 
   const { connections } = useConnectionList();
 
-  const onClickBack = () => navigate("..");
-
   const onSelectStep = (id: string) => {
     const path = id === StepsTypes.OVERVIEW ? "." : id.toLowerCase();
     navigate(path);
@@ -50,10 +49,10 @@ const DestinationItemPage: React.FC = () => {
 
   const breadcrumbsData = [
     {
-      name: <FormattedMessage id="admin.destinations" />,
-      onClick: onClickBack,
+      label: formatMessage({ id: "admin.destinations" }),
+      to: "..",
     },
-    { name: destination.name },
+    { label: destination.name },
   ];
 
   const connectionsWithDestination = connections.filter(
diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
index a5ea2816e196..9d9e70da9eab 100644
--- a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
+++ b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
@@ -1,5 +1,5 @@
 import React, { Suspense, useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import { useIntl } from "react-intl";
 import { Route, Routes, useNavigate, useParams } from "react-router-dom";
 
 import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
@@ -29,6 +29,7 @@ const SourceItemPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.SOURCE_ITEM);
   const params = useParams<{ "*": StepsTypes | "" | undefined; id: string }>();
   const navigate = useNavigate();
+  const { formatMessage } = useIntl();
   const currentStep = useMemo<StepsTypes | "" | undefined>(
     () => (params["*"] === "" ? StepsTypes.OVERVIEW : params["*"]),
     [params]
@@ -45,10 +46,10 @@ const SourceItemPage: React.FC = () => {
 
   const breadcrumbsData = [
     {
-      name: <FormattedMessage id="sidebar.sources" />,
-      onClick: () => navigate(".."),
+      label: formatMessage({ id: "sidebar.sources" }),
+      to: "..",
     },
-    { name: source.name },
+    { label: source.name },
   ];
 
   const connectionsWithSource = connections.filter((connectionItem) => connectionItem.sourceId === source.sourceId);