diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css
index 0c795e600..c7e461113 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.css
+++ b/apps/client/src/widgets/BreadcrumbBadges.css
@@ -11,5 +11,13 @@
         font-size: 0.75em;
         background-color: var(--badge-background-color);
         color: var(--badge-text-color);
+
+        &.clickable {
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--badge-background-hover-color);
+            }
+        }
     }
 }
diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index f77cc477c..e1e592538 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/apps/client/src/widgets/BreadcrumbBadges.tsx
@@ -4,6 +4,7 @@ import { ComponentChildren } from "preact";
 import { useIsNoteReadOnly, useNoteContext } from "./react/hooks";
 import Icon from "./react/Icon";
 import { useShareInfo } from "./shared_info";
+import clsx from "clsx";
 
 export default function NoteBadges() {
     return (
@@ -43,7 +44,10 @@ function ShareBadge() {
 
 function Badge({ icon, children, onClick }: { icon: string, children: ComponentChildren, onClick?: () => void }) {
     return (
-        <div className="breadcrumb-badge" onClick={onClick}>
+        <div
+            className={clsx("breadcrumb-badge", { "clickable": !!onClick })}
+            onClick={onClick}
+        >
             <Icon icon={icon} />&nbsp;
             {children}
         </div>