diff --git a/src/Breadcrumbs/Breadcrumbs.story.tsx b/src/Breadcrumbs/Breadcrumbs.story.tsx
index 8509d0e88..5d6f9555c 100644
--- a/src/Breadcrumbs/Breadcrumbs.story.tsx
+++ b/src/Breadcrumbs/Breadcrumbs.story.tsx
@@ -2,9 +2,9 @@ import React from "react";
import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
import { Link } from "../Link";
import { Text } from "../Type";
-import { Breadcrumbs } from "./index";
import { Flex } from "../Flex";
import dashed from "../utils/dashed";
+import { Breadcrumbs } from "./index";
export default {
title: "Components/Breadcrumbs",
@@ -17,7 +17,7 @@ export const _Breadcrumbs = () => (
Home
- Tenants
+ Tenants
>
);
@@ -44,7 +44,7 @@ export const WithDifferentSizes = () => (
export const WithoutLink = () => (
Home
- Tenants
+ Tenants
Current Tenant
);
@@ -59,7 +59,7 @@ export const WithReactRouter = () => (
Home
-
+
Tenants
Current Tenant
diff --git a/src/Breadcrumbs/BreadcrumbsListItem.tsx b/src/Breadcrumbs/BreadcrumbsListItem.tsx
index 9cb0b42f6..313071a36 100644
--- a/src/Breadcrumbs/BreadcrumbsListItem.tsx
+++ b/src/Breadcrumbs/BreadcrumbsListItem.tsx
@@ -28,9 +28,10 @@ export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>(
listStyle: "none",
display: "inline-flex",
alignSelf: "center",
- color: theme.colors.darkBlue,
+ color: theme.colors.midGrey,
a: {
color: theme.colors.darkBlue,
+ textDecorationLine: "none",
},
"a:visited": {
color: theme.colors.darkBlue,
@@ -46,7 +47,7 @@ export const BreadcrumbsListItem = styled.li<{ size: ComponentSize }>(
large: {
"a, p": {
py: "x2",
- px: "x1",
+ px: "x0",
fontSize: "medium",
},
},