diff --git a/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css b/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
index e7cf634b2f5eb..8f34d7b973d50 100644
--- a/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
+++ b/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
@@ -3,9 +3,14 @@
     items-center
     gap-5
     text-sm
-    font-medium
-    text-neutral-800
-    dark:text-neutral-200;
+    font-medium;
+
+  &,
+  > a,
+  > a:hover {
+    @apply text-neutral-800
+      dark:text-neutral-200;
+  }
 
   &.visuallyHidden {
     @apply hidden;
diff --git a/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index 5e0d74b85582c..91747b6ebaa11 100644
--- a/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -1,8 +1,15 @@
-.active {
-  @apply rounded
-    bg-green-600
-    px-2
-    py-1
-    font-semibold
-    text-white;
+.link {
+  &.active {
+    @apply rounded
+      bg-green-600
+      px-2
+      py-1
+      font-semibold
+      text-white;
+
+    &:hover {
+      @apply bg-green-700
+        text-white;
+    }
+  }
 }
diff --git a/components/Common/Breadcrumbs/BreadcrumbLink/index.tsx b/components/Common/Breadcrumbs/BreadcrumbLink/index.tsx
index b518aa7b50c2b..2073102c8066f 100644
--- a/components/Common/Breadcrumbs/BreadcrumbLink/index.tsx
+++ b/components/Common/Breadcrumbs/BreadcrumbLink/index.tsx
@@ -20,7 +20,11 @@ const BreadcrumbLink: FC<BreadcrumbLinkProps> = ({
     itemProp="item"
     itemID={href.toString()}
     href={href}
-    className={classNames({ [styles.active]: active }, props.className)}
+    className={classNames(
+      styles.link,
+      { [styles.active]: active },
+      props.className
+    )}
     aria-current={active ? 'page' : undefined}
     {...props}
   >