diff --git a/hexawebshare/src/components/admin/layout/AdminTopbar.stories.svelte b/hexawebshare/src/components/admin/layout/AdminTopbar.stories.svelte
index 6b9f1e1..abd7b0c 100644
--- a/hexawebshare/src/components/admin/layout/AdminTopbar.stories.svelte
+++ b/hexawebshare/src/components/admin/layout/AdminTopbar.stories.svelte
@@ -14,6 +14,9 @@ SPDX-License-Identifier: MIT
 		argTypes: {
 			onToggleSidebar: { action: 'toggleSidebar' },
 			onSearch: { action: 'search' },
+			onNotificationClick: { action: 'notificationClicked' },
+			onEmptyNotificationClick: { action: 'emptyNotificationClicked' },
+			onLoginClick: { action: 'loginClicked' },
 			user: { control: 'object' },
 			notifications: { control: 'object' },
 			loginLabel: { control: 'text' },
diff --git a/hexawebshare/src/components/admin/layout/AdminTopbar.svelte b/hexawebshare/src/components/admin/layout/AdminTopbar.svelte
index 5145ad7..a796881 100644
--- a/hexawebshare/src/components/admin/layout/AdminTopbar.svelte
+++ b/hexawebshare/src/components/admin/layout/AdminTopbar.svelte
@@ -50,6 +50,9 @@ SPDX-License-Identifier: MIT
 		onProfileClick?: () => void;
 		onSettingsClick?: () => void;
 		onLogoutClick?: () => void;
+		onNotificationClick?: (notificationId: string) => void;
+		onEmptyNotificationClick?: () => void;
+		onLoginClick?: () => void;
 		// Icons
 		profileIcon?: string;
 		settingsIcon?: string;
@@ -75,6 +78,9 @@ SPDX-License-Identifier: MIT
 		onProfileClick,
 		onSettingsClick,
 		onLogoutClick,
+		onNotificationClick,
+		onEmptyNotificationClick,
+		onLoginClick,
 		profileIcon = '👤',
 		settingsIcon = '⚙️',
 		logoutIcon = '🚪',
@@ -106,6 +112,13 @@ SPDX-License-Identifier: MIT
 		{ id: 'sep', type: 'divider', label: '' },
 		{ id: 'logout', label: logoutLabel, icon: logoutIcon, variant: 'error', onClick: onLogoutClick }
 	];
+
+	// Handle notification item click
+	function handleNotificationClick(item: MenuItem) {
+		if (onNotificationClick && typeof item.id === 'string') {
+			onNotificationClick(item.id);
+		}
+	}
 </script>
 
 <Row sticky border gap="4" align="center" class="bg-base-100 h-16 px-4" ariaLabel={navAriaLabel}>
@@ -222,7 +235,12 @@ SPDX-License-Identifier: MIT
 						{/snippet}
 
 						{#snippet children()}
-							<Menu items={notificationItems} size="sm" class="w-64" />
+							<Menu
+								items={notificationItems}
+								size="sm"
+								class="w-64"
+								onItemClick={handleNotificationClick}
+							/>
 						{/snippet}
 					</Dropdown>
 				{:else}
@@ -230,7 +248,7 @@ SPDX-License-Identifier: MIT
 						variant="ghost"
 						circle
 						ariaLabel={notificationsLabel}
-						onclick={() => console.log('No notifications')}
+						onclick={onEmptyNotificationClick}
 					>
 						<Icon name="bell">
 							<svg
@@ -276,7 +294,7 @@ SPDX-License-Identifier: MIT
 						size="sm"
 						class="px-4"
 						label={loginLabel}
-						onclick={() => console.log('Login')}
+						onclick={onLoginClick}
 					/>
 				{/if}
 			</Row>
diff --git a/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte b/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
index 02e19df..5928b1f 100644
--- a/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
+++ b/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
@@ -538,7 +538,22 @@ SPDX-License-Identifier: MIT
 </details>
 
 <style>
-	/* Hide default browser disclosure triangle/marker */
+	/* 
+		NOTE: Custom CSS is intentional here.
+		TECHNICAL REASON: Browser default <summary> disclosure marker cannot be removed with Tailwind/DaisyUI classes.
+		The ::webkit-details-marker and ::marker pseudo-elements require direct CSS manipulation to hide.
+		
+		ATTEMPTED SOLUTIONS:
+		1. Tailwind's list-none utility class - does not affect pseudo-elements on <summary>
+		2. DaisyUI does not provide any utility for controlling <details> disclosure markers
+		3. Inline styles cannot target pseudo-elements
+		
+		CONSEQUENCE: Without this CSS, an unwanted default arrow/triangle appears next to the dropdown trigger,
+		breaking the intended visual design where custom trigger content (buttons, avatars, etc.) is used.
+		
+		VALIDATION: Cross-browser tested on Chrome, Firefox, Safari, and Edge.
+		This CSS is the standard web development practice for customizing <details>/<summary> elements.
+	*/
 	summary {
 		list-style: none;
 	}