diff --git a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
index 0969c8e..7b57db3 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
+++ b/src/components/notification-center/views/bubble-layouts/NotificationBadgeReceivedBubbleView.tsx
@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { LocalizeText, NotificationBubbleItem } from '../../../../api';
+import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
+import { FC, useEffect } from 'react';
+import { LocalizeText, NotificationBubbleItem, SendMessageComposer } from '../../../../api';
 import { Flex, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps, Text } from '../../../../common';
 import { useInventoryBadges } from '../../../../hooks';
 
@@ -11,36 +12,55 @@ export interface NotificationBadgeReceivedBubbleViewProps extends LayoutNotifica
 export const NotificationBadgeReceivedBubbleView: FC<NotificationBadgeReceivedBubbleViewProps> = props =>
 {
     const { item = null, onClose = null, ...rest } = props;
-    const { toggleBadge = null } = useInventoryBadges();
+    const { badgeCodes = [], toggleBadge = null } = useInventoryBadges();
 
-    const handleWear = () =>
+    useEffect(() =>
     {
-        if(item.linkUrl) toggleBadge(item.linkUrl);
-        onClose();
+        if(badgeCodes.length === 0) SendMessageComposer(new RequestBadgesComposer());
+    }, []);
+
+    const handleWear = (event: React.MouseEvent) =>
+    {
+        event.stopPropagation();
+
+        if(item.linkUrl)
+        {
+            toggleBadge(item.linkUrl);
+        }
+
+        if(onClose) onClose();
+    };
+
+    const handleDismiss = (event: React.MouseEvent) =>
+    {
+        event.stopPropagation();
+        if(onClose) onClose();
     };
 
     return (
         <LayoutNotificationBubbleView className="flex-col" onClose={ onClose } { ...rest }>
-            <Flex alignItems="center" gap={ 2 } className="mb-2">
-                <Flex center className="w-[50px] h-[50px] shrink-0">
-                    { item.iconUrl && <img alt="" className="no-select" src={ item.iconUrl } /> }
+            <div onClick={ (e) => e.stopPropagation() }>
+                <Flex alignItems="center" gap={ 2 } className="mb-2">
+                    <Flex center className="w-[50px] h-[50px] shrink-0">
+                        { item.iconUrl && <img alt="" className="no-select" src={ item.iconUrl } /> }
+                    </Flex>
+                    <Flex column gap={ 0 }>
+                        <Text bold variant="white">{ LocalizeText('notification.badge.received') }</Text>
+                        <Text variant="white" small>{ item.message }</Text>
+                    </Flex>
                 </Flex>
-                <Flex column gap={ 0 }>
-                    <Text bold variant="white">{ LocalizeText('notification.badge.received') }</Text>
-                    <Text variant="white" small>{ item.message }</Text>
+                <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>
+                    <span className="underline cursor-pointer text-nowrap" onClick={ handleDismiss }>
+                        { LocalizeText('notifications.button.later') }
+                    </span>
                 </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>
-                <span className="underline cursor-pointer text-nowrap" onClick={ onClose }>
-                    { LocalizeText('notifications.button.later') }
-                </span>
-            </Flex>
+            </div>
         </LayoutNotificationBubbleView>
     );
 };
diff --git a/src/hooks/notification/useNotification.ts b/src/hooks/notification/useNotification.ts
index c13c499..007a61c 100644
--- a/src/hooks/notification/useNotification.ts
+++ b/src/hooks/notification/useNotification.ts
@@ -356,6 +356,9 @@ const useNotificationState = () =>
     {
         const parser = event.getParser();
 
+        // Skip badge notifications — handled by BadgeReceivedEvent with "Wear" button
+        if(parser.type === 'badge_received' || parser.type === 'badges' || parser.type.includes('badge')) return;
+
         showNotification(parser.type, parser.parameters);
     });