diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index ec2c787d4..880b29a7f 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -22,6 +22,8 @@
 .siteTitleFlipper {
 	min-width: 0;
 	overflow: hidden;
+	padding: 3px;
+	margin: -3px;
 }
 
 .siteTitle {
@@ -31,6 +33,8 @@
 	height: 100%;
 	min-width: 0;
 	overflow: hidden;
+	padding: 3px;
+	margin: -3px;
 }
 
 .siteLogo {
@@ -101,6 +105,18 @@
 	}
 }
 
+.breadcrumbLink {
+	display: flex;
+	align-items: center;
+	text-decoration: none;
+	border-radius: var(--radius-field);
+}
+
+.breadcrumbLink:focus-visible {
+	outline: var(--focus-ring);
+	outline-offset: 1px;
+}
+
 .pageName {
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx
index 46fe2480e..4352198d7 100644
--- a/app/components/layout/index.tsx
+++ b/app/components/layout/index.tsx
@@ -470,12 +470,22 @@ function SiteTitle() {
 
 				{hasBreadcrumbs ? (
 					<>
-						{breadcrumbs.map((crumb) => (
-							<React.Fragment key={crumb.href}>
-								<span className={styles.separator}>/</span>
-								<PageIcon crumb={crumb} />
-							</React.Fragment>
-						))}
+						{breadcrumbs.map((crumb) => {
+							const isCurrentPage = location.pathname === crumb.href;
+
+							return (
+								<React.Fragment key={crumb.href}>
+									<span className={styles.separator}>/</span>
+									{isCurrentPage ? (
+										<PageIcon crumb={crumb} />
+									) : (
+										<Link to={crumb.href} className={styles.breadcrumbLink}>
+											<PageIcon crumb={crumb} />
+										</Link>
+									)}
+								</React.Fragment>
+							);
+						})}
 
 						{currentPageText ? (
 							<span className={styles.pageName}>{currentPageText}</span>