diff --git a/src/common/layout/LayoutNotificationBubbleView.tsx b/src/common/layout/LayoutNotificationBubbleView.tsx
index b502b3b..b72fe65 100644
--- a/src/common/layout/LayoutNotificationBubbleView.tsx
+++ b/src/common/layout/LayoutNotificationBubbleView.tsx
@@ -16,7 +16,7 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] ', 'rounded' ];
+        const newClassNames: string[] = [ 'pointer-events-auto text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] ', 'rounded' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
index edd866f..333e51f 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
+++ b/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
@@ -12,11 +12,9 @@ export interface NotificationBadgeReceivedBubbleViewProps extends LayoutNotifica
 export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBubbleViewProps> = props =>
 {
     const { item = null, onClose = null, ...rest } = props;
-    const { badgeCodes = [], toggleBadge = null } = useInventoryBadges();
+    const { activeBadgeCodes = [], toggleBadge = null, isWearingBadge = null, canWearBadges = null } = useInventoryBadges();
 
-    const requestBadgesIfEmpty = useEffectEvent(() =>
-    {
-        if(badgeCodes.length === 0) SendMessageComposer(new RequestBadgesComposer());
+        if(activeBadgeCodes.length === 0) SendMessageComposer(new RequestBadgesComposer());
     });
 
     useEffect(() =>
@@ -24,14 +22,17 @@ export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBu
         requestBadgesIfEmpty();
     }, []);
 
+    const badgeCode = item?.linkUrl ?? null;
+    const isLoaded = activeBadgeCodes.length > 0;
+    const alreadyWearing = !!badgeCode && !!isWearingBadge && isWearingBadge(badgeCode);
+    const slotsAvailable = !!canWearBadges && canWearBadges();
+    const canShowWearButton = !!badgeCode && isLoaded && !alreadyWearing && slotsAvailable;
+
     const handleWear = (event: React.MouseEvent) =>
     {
         event.stopPropagation();
 
-        if(item.linkUrl)
-        {
-            toggleBadge(item.linkUrl);
-        }
+        if(canShowWearButton && toggleBadge) toggleBadge(badgeCode);
 
         if(onClose) onClose();
     };
@@ -59,12 +60,13 @@ export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBu
                     </Flex>
                 </Flex>
                 <Flex alignItems="center" justifyContent="end" gap={ 2 }>
-                    <button
-                        className="btn btn-success w-full btn-sm"
-                        type="button"
-                        onClick={ handleWear }>
-                        { LocalizeText('inventory.badges.wearbadge') }
-                    </button>
+                    { canShowWearButton &&
+                        <button
+                            className="btn btn-success w-full btn-sm"
+                            type="button"
+                            onClick={ handleWear }>
+                            { LocalizeText('inventory.badges.wearbadge') }
+                        </button> }
                     <span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }>
                         { LocalizeText('notifications.button.later') }
                     </span>