diff --git a/hexawebshare/src/components/admin/layout/AdminTopbar.stories.svelte b/hexawebshare/src/components/admin/layout/AdminTopbar.stories.svelte
new file mode 100644
index 0000000..6b9f1e1
--- /dev/null
+++ b/hexawebshare/src/components/admin/layout/AdminTopbar.stories.svelte
@@ -0,0 +1,111 @@
+<!--
+SPDX-FileCopyrightText: 2025 hexaTune LLC
+SPDX-License-Identifier: MIT
+-->
+
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import AdminTopbar from './AdminTopbar.svelte';
+
+	const { Story } = defineMeta({
+		component: AdminTopbar,
+		title: 'Admin/Layout/AdminTopbar',
+		tags: ['autodocs'],
+		argTypes: {
+			onToggleSidebar: { action: 'toggleSidebar' },
+			onSearch: { action: 'search' },
+			user: { control: 'object' },
+			notifications: { control: 'object' },
+			loginLabel: { control: 'text' },
+			searchLabel: { control: 'text' },
+			navAriaLabel: { control: 'text' },
+			notificationsLabel: { control: 'text' },
+			profileLabel: { control: 'text' },
+			logoutLabel: { control: 'text' },
+			settingsLabel: { control: 'text' },
+			menuLabel: { control: 'text' },
+			closeLabel: { control: 'text' },
+			onProfileClick: { action: 'profileClicked' },
+			onSettingsClick: { action: 'settingsClicked' },
+			onLogoutClick: { action: 'logoutClicked' },
+			profileIcon: { control: 'text' },
+			settingsIcon: { control: 'text' },
+			logoutIcon: { control: 'text' },
+			badgeVariant: {
+				control: 'select',
+				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']
+			}
+		},
+		parameters: {
+			layout: 'fullscreen'
+		}
+	});
+</script>
+
+<script lang="ts">
+	const defaultUser = {
+		name: 'John Doe',
+		avatar: 'https://i.pravatar.cc/150?u=a042581f4e29026024d',
+		email: 'john@example.com'
+	};
+
+	const notifications = [
+		{ id: '1', title: 'New order received', read: false },
+		{ id: '2', title: 'Server update completed', read: false },
+		{ id: '3', title: 'New user registered', read: true }
+	];
+</script>
+
+<!-- 1. Default: Standard User with no notifications -->
+<Story name="Default" args={{ user: defaultUser }} />
+
+<!-- 2. Guest: No user provided, shows fallback initials -->
+<Story
+	name="Guest"
+	args={{
+		user: undefined
+	}}
+/>
+
+<!-- 3. Notifications: Show active badge and dropdown items -->
+<Story
+	name="With Notifications"
+	args={{
+		user: defaultUser,
+		notifications: notifications
+	}}
+/>
+
+<!-- 4. Without Search: Search bar hidden (useful for small headers) -->
+<Story
+	name="No Search"
+	args={{
+		user: defaultUser,
+		onSearch: undefined
+	}}
+/>
+
+<!-- 5. Custom Branding: Demonstrate custom icons and text -->
+<Story
+	name="Custom Branding"
+	args={{
+		user: defaultUser,
+		notifications: notifications,
+		notificationsLabel: 'Alerts',
+		profileLabel: 'My Account',
+		profileIcon: '👤',
+		settingsIcon: '🛠️',
+		logoutIcon: '🏃'
+	}}
+/>
+
+<!-- 5. Playground: All options enabled -->
+<Story
+	name="Playground"
+	args={{
+		user: defaultUser,
+		notifications: notifications,
+		placeholder: 'Type to find anything...',
+		notificationsLabel: 'New Alerts'
+	}}
+/>
diff --git a/hexawebshare/src/components/admin/layout/AdminTopbar.svelte b/hexawebshare/src/components/admin/layout/AdminTopbar.svelte
index 315da07..5145ad7 100644
--- a/hexawebshare/src/components/admin/layout/AdminTopbar.svelte
+++ b/hexawebshare/src/components/admin/layout/AdminTopbar.svelte
@@ -2,3 +2,284 @@
 SPDX-FileCopyrightText: 2025 hexaTune LLC
 SPDX-License-Identifier: MIT
 -->
+
+<script lang="ts">
+	import {
+		IconButton,
+		SearchInput,
+		Avatar,
+		Dropdown,
+		Icon,
+		Badge,
+		Menu,
+		Row,
+		Col,
+		Button
+	} from '../../../lib/index.js';
+	import type { MenuItem } from '../../../lib/index.js';
+
+	interface User {
+		name: string;
+		avatar?: string;
+		email?: string;
+		role?: string;
+	}
+
+	interface Notification {
+		id: string;
+		title: string;
+		read: boolean;
+	}
+
+	interface Props {
+		onToggleSidebar?: () => void;
+		user?: User;
+		notifications?: Notification[];
+		onSearch?: (query: string) => void;
+		placeholder?: string;
+		notificationsLabel?: string;
+		profileLabel?: string;
+		logoutLabel?: string;
+		settingsLabel?: string;
+		menuLabel?: string;
+		loginLabel?: string;
+		searchLabel?: string;
+		closeLabel?: string;
+		navAriaLabel?: string;
+		// Callbacks
+		onProfileClick?: () => void;
+		onSettingsClick?: () => void;
+		onLogoutClick?: () => void;
+		// Icons
+		profileIcon?: string;
+		settingsIcon?: string;
+		logoutIcon?: string;
+		badgeVariant?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+	}
+
+	const {
+		onToggleSidebar,
+		user = { name: 'Guest' },
+		notifications = [],
+		onSearch,
+		placeholder = 'Search...',
+		notificationsLabel = 'Notifications',
+		profileLabel = 'Profile',
+		logoutLabel = 'Logout',
+		settingsLabel = 'Settings',
+		menuLabel = 'Menu',
+		loginLabel = 'Login',
+		searchLabel = 'Search',
+		closeLabel = 'Close',
+		navAriaLabel = 'Admin topbar navigation',
+		onProfileClick,
+		onSettingsClick,
+		onLogoutClick,
+		profileIcon = '👤',
+		settingsIcon = '⚙️',
+		logoutIcon = '🚪',
+		badgeVariant = 'primary'
+	}: Props = $props();
+
+	let unreadCount = $derived(notifications.filter((n) => !n.read).length);
+
+	// Mobile Search State
+	let isMobileSearchOpen = $state(false);
+
+	// UX: Check if user is actually logged in (Guest name is considered not logged in)
+	let isLoggedIn = $derived(user && user.name !== 'Guest' && (user.email || user.avatar));
+
+	// Notification Menu Items
+	let notificationItems: MenuItem[] = $derived([
+		{ id: 'title', label: notificationsLabel, type: 'title', divider: true },
+		...notifications.map((n) => ({
+			id: n.id,
+			label: n.title,
+			active: !n.read
+		}))
+	]);
+
+	// Profile Menu Items (Only for logged in users)
+	const profileItems: MenuItem[] = [
+		{ id: 'profile', label: profileLabel, icon: profileIcon, onClick: onProfileClick },
+		{ id: 'settings', label: settingsLabel, icon: settingsIcon, onClick: onSettingsClick },
+		{ id: 'sep', type: 'divider', label: '' },
+		{ id: 'logout', label: logoutLabel, icon: logoutIcon, variant: 'error', onClick: onLogoutClick }
+	];
+</script>
+
+<Row sticky border gap="4" align="center" class="bg-base-100 h-16 px-4" ariaLabel={navAriaLabel}>
+	{#if isMobileSearchOpen}
+		<!-- Mobile Search Overlay -->
+		<Col flex="grow" class="flex w-full flex-row items-center gap-2">
+			<SearchInput
+				class="flex-grow"
+				{placeholder}
+				onsearch={(q) => {
+					onSearch?.(q);
+					if (q) isMobileSearchOpen = false;
+				}}
+			/>
+			<Button
+				variant="ghost"
+				class="flex-shrink-0 text-sm font-medium"
+				onclick={() => {
+					isMobileSearchOpen = false;
+				}}
+			>
+				{closeLabel}
+			</Button>
+		</Col>
+	{:else}
+		<!-- Left: Sidebar Toggle -->
+		<Col flex="none" hideAbove="lg">
+			<IconButton variant="ghost" circle ariaLabel={menuLabel} onclick={onToggleSidebar}>
+				<Icon name="menu">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+						/>
+					</svg>
+				</Icon>
+			</IconButton>
+		</Col>
+
+		<!-- Center: Search -->
+		<Col flex="grow" hideBelow="md" class="mx-auto max-w-xl">
+			{#if onSearch}
+				<SearchInput {placeholder} onsearch={onSearch} />
+			{/if}
+		</Col>
+
+		<!-- Right: Actions -->
+		<Col flex="none" class="ml-auto">
+			<Row gap="2" align="center">
+				<!-- Mobile Search Toggle -->
+				{#if onSearch}
+					<Col hideAbove="md">
+						<IconButton
+							variant="ghost"
+							circle
+							ariaLabel={searchLabel}
+							onclick={() => (isMobileSearchOpen = true)}
+						>
+							<Icon name="search">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+									/>
+								</svg>
+							</Icon>
+						</IconButton>
+					</Col>
+				{/if}
+
+				<!-- Notifications -->
+				{#if notifications.length > 0}
+					<Dropdown position="bottom" align="end" triggerClass="btn btn-ghost btn-circle">
+						{#snippet trigger()}
+							<div class="indicator">
+								<Icon name="bell">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+										/>
+									</svg>
+								</Icon>
+								{#if unreadCount > 0}
+									<Badge
+										variant={badgeVariant}
+										size="xs"
+										class="indicator-item"
+										label={String(unreadCount)}
+									/>
+								{/if}
+							</div>
+						{/snippet}
+
+						{#snippet children()}
+							<Menu items={notificationItems} size="sm" class="w-64" />
+						{/snippet}
+					</Dropdown>
+				{:else}
+					<IconButton
+						variant="ghost"
+						circle
+						ariaLabel={notificationsLabel}
+						onclick={() => console.log('No notifications')}
+					>
+						<Icon name="bell">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+								/>
+							</svg>
+						</Icon>
+					</IconButton>
+				{/if}
+
+				<!-- User Profile / Login -->
+				{#if isLoggedIn}
+					<Dropdown
+						position="bottom"
+						align="end"
+						triggerClass="btn btn-ghost btn-circle p-0.5 overflow-hidden"
+					>
+						{#snippet trigger()}
+							<Avatar
+								src={user.avatar}
+								alt={user.name}
+								size="sm"
+								status="online"
+								fallbackChar={user.name.charAt(0)}
+								class="h-full w-full"
+							/>
+						{/snippet}
+
+						<Menu items={profileItems} size="sm" class="w-52" />
+					</Dropdown>
+				{:else}
+					<Button
+						variant="primary"
+						size="sm"
+						class="px-4"
+						label={loginLabel}
+						onclick={() => console.log('Login')}
+					/>
+				{/if}
+			</Row>
+		</Col>
+	{/if}
+</Row>
diff --git a/hexawebshare/src/components/core/buttons/Button.svelte b/hexawebshare/src/components/core/buttons/Button.svelte
index 850edbf..9040bf8 100644
--- a/hexawebshare/src/components/core/buttons/Button.svelte
+++ b/hexawebshare/src/components/core/buttons/Button.svelte
@@ -69,32 +69,30 @@ SPDX-License-Identifier: MIT
 	}: Props = $props();
 
 	let buttonClasses = $derived(
-		// If custom class is provided, use it (for menu items and special cases)
-		className
-			? className
-			: [
-					'btn',
-					variant === 'primary' && 'btn-primary',
-					variant === 'secondary' && 'btn-secondary',
-					variant === 'accent' && 'btn-accent',
-					variant === 'neutral' && 'btn-neutral',
-					variant === 'info' && 'btn-info',
-					variant === 'success' && 'btn-success',
-					variant === 'warning' && 'btn-warning',
-					variant === 'error' && 'btn-error',
-					variant === 'ghost' && 'btn-ghost',
-					variant === 'link' && 'btn-link',
-					size === 'xs' && 'btn-xs',
-					size === 'sm' && 'btn-sm',
-					size === 'md' && 'btn-md',
-					size === 'lg' && 'btn-lg',
-					outline && 'btn-outline',
-					wide && 'btn-wide',
-					block && 'btn-block',
-					glass && 'glass'
-				]
-					.filter(Boolean)
-					.join(' ')
+		[
+			'btn',
+			variant === 'primary' && 'btn-primary',
+			variant === 'secondary' && 'btn-secondary',
+			variant === 'accent' && 'btn-accent',
+			variant === 'neutral' && 'btn-neutral',
+			variant === 'info' && 'btn-info',
+			variant === 'success' && 'btn-success',
+			variant === 'warning' && 'btn-warning',
+			variant === 'error' && 'btn-error',
+			variant === 'ghost' && 'btn-ghost',
+			variant === 'link' && 'btn-link',
+			size === 'xs' && 'btn-xs',
+			size === 'sm' && 'btn-sm',
+			size === 'md' && 'btn-md',
+			size === 'lg' && 'btn-lg',
+			outline && 'btn-outline',
+			wide && 'btn-wide',
+			block && 'btn-block',
+			glass && 'glass',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
 	);
 </script>
 
diff --git a/hexawebshare/src/components/core/buttons/IconButton.svelte b/hexawebshare/src/components/core/buttons/IconButton.svelte
index 056b29d..483cfb0 100644
--- a/hexawebshare/src/components/core/buttons/IconButton.svelte
+++ b/hexawebshare/src/components/core/buttons/IconButton.svelte
@@ -75,12 +75,13 @@ SPDX-License-Identifier: MIT
 		defaultIconPoints = '12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2',
 		defaultIconWidth = '20',
 		defaultIconHeight = '20',
+		onclick,
+		onkeydown,
 		...props
 	}: Props = $props();
 
 	let buttonClasses = $derived(
 		[
-			className,
 			'btn',
 			variant === 'primary' && 'btn-primary',
 			variant === 'secondary' && 'btn-secondary',
@@ -113,6 +114,8 @@ SPDX-License-Identifier: MIT
 	{disabled}
 	aria-label={ariaLabel}
 	aria-expanded={ariaExpanded}
+	{onclick}
+	{onkeydown}
 	{...props}
 >
 	{#if loading}
diff --git a/hexawebshare/src/components/core/forms/SearchInput.svelte b/hexawebshare/src/components/core/forms/SearchInput.svelte
index 5cce02e..085ae7c 100644
--- a/hexawebshare/src/components/core/forms/SearchInput.svelte
+++ b/hexawebshare/src/components/core/forms/SearchInput.svelte
@@ -179,21 +179,24 @@ SPDX-License-Identifier: MIT
 		[
 			'input',
 			'input-bordered',
+			'bg-base-200/40',
+			'transition-all duration-200 ease-in-out',
+			'focus:outline-none focus:border-primary/40 focus:ring-4 focus:ring-primary/5',
 			'w-full',
 			'pl-10',
 			showClearButton && value ? 'pr-10' : 'pr-4',
-			variant === 'primary' && 'input-primary',
-			variant === 'secondary' && 'input-secondary',
-			variant === 'accent' && 'input-accent',
-			variant === 'info' && 'input-info',
-			variant === 'success' && 'input-success',
-			variant === 'warning' && 'input-warning',
-			variant === 'error' && 'input-error',
+			variant === 'primary' && 'input-primary focus:ring-primary/10',
+			variant === 'secondary' && 'input-secondary focus:ring-secondary/10',
+			variant === 'accent' && 'input-accent focus:ring-accent/10',
+			variant === 'info' && 'input-info focus:ring-info/10',
+			variant === 'success' && 'input-success focus:ring-success/10',
+			variant === 'warning' && 'input-warning focus:ring-warning/10',
+			variant === 'error' && 'input-error focus:ring-error/10',
 			size === 'xs' && 'input-xs',
 			size === 'sm' && 'input-sm',
 			size === 'md' && 'input-md',
 			size === 'lg' && 'input-lg',
-			error !== undefined && error !== '' && 'input-error'
+			error !== undefined && error !== '' && 'input-error focus:ring-error/10'
 		]
 			.filter(Boolean)
 			.join(' ')
@@ -333,7 +336,7 @@ SPDX-License-Identifier: MIT
 		/>
 
 		<!-- Clear Button or Loading Spinner -->
-		<div class="absolute top-1/2 -translate-y-1/2 {iconRightClass}">
+		<div class="absolute top-1/2 z-10 -translate-y-1/2 {iconRightClass}">
 			{#if loading}
 				<Spinner size={spinnerSize} class="text-base-content/50" ariaLabel={searchingLabel} />
 			{:else if showClearButton && value}
@@ -344,7 +347,7 @@ SPDX-License-Identifier: MIT
 					onclick={handleClear}
 					{disabled}
 					ariaLabel={clearLabel}
-					class="h-auto min-h-0 p-0.5"
+					class="h-8 min-h-0 w-8 p-0"
 				>
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
diff --git a/hexawebshare/src/components/core/layout/Col.svelte b/hexawebshare/src/components/core/layout/Col.svelte
index 316ccf7..6d19817 100644
--- a/hexawebshare/src/components/core/layout/Col.svelte
+++ b/hexawebshare/src/components/core/layout/Col.svelte
@@ -103,6 +103,19 @@ SPDX-License-Identifier: MIT
 		 */
 		align?: 'auto' | 'start' | 'center' | 'end' | 'stretch';
 
+		/**
+		 * Flexbox control
+		 * @default undefined
+		 */
+		flex?: 'none' | '1' | 'auto' | 'initial' | 'grow' | 'shrink';
+		/**
+		 * Hide the column below a certain breakpoint
+		 */
+		hideBelow?: 'sm' | 'md' | 'lg' | 'xl';
+		/**
+		 * Hide the column above a certain breakpoint
+		 */
+		hideAbove?: 'sm' | 'md' | 'lg' | 'xl';
 		/**
 		 * Additional CSS classes to apply to the column
 		 * @default ''
@@ -125,6 +138,9 @@ SPDX-License-Identifier: MIT
 		xl,
 		order,
 		align,
+		flex,
+		hideBelow,
+		hideAbove,
 		ariaLabel = 'Grid column',
 		class: className = '',
 		...props
@@ -370,9 +386,54 @@ SPDX-License-Identifier: MIT
 							: ''
 	);
 
+	// Flex classes
+	let flexClass = $derived(
+		flex === 'none'
+			? 'flex-none'
+			: flex === '1'
+				? 'flex-1'
+				: flex === 'auto'
+					? 'flex-auto'
+					: flex === 'initial'
+						? 'flex-initial'
+						: flex === 'grow'
+							? 'flex-grow'
+							: flex === 'shrink'
+								? 'flex-shrink'
+								: ''
+	);
+
+	// Visibility classes
+	let visibilityClasses = $derived(
+		[
+			hideBelow === 'sm' && 'hidden sm:block',
+			hideBelow === 'md' && 'hidden md:block',
+			hideBelow === 'lg' && 'hidden lg:block',
+			hideBelow === 'xl' && 'hidden xl:block',
+			hideAbove === 'sm' && 'sm:hidden',
+			hideAbove === 'md' && 'md:hidden',
+			hideAbove === 'lg' && 'lg:hidden',
+			hideAbove === 'xl' && 'xl:hidden'
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
 	// Combine all classes
 	let colClasses = $derived(
-		[spanClass, startClass, smClass, mdClass, lgClass, xlClass, orderClass, alignClass, className]
+		[
+			spanClass,
+			startClass,
+			smClass,
+			mdClass,
+			lgClass,
+			xlClass,
+			orderClass,
+			alignClass,
+			flexClass,
+			visibilityClasses,
+			className
+		]
 			.filter(Boolean)
 			.join(' ')
 	);
diff --git a/hexawebshare/src/components/core/layout/Row.svelte b/hexawebshare/src/components/core/layout/Row.svelte
index 5ff9a78..99f3e0a 100644
--- a/hexawebshare/src/components/core/layout/Row.svelte
+++ b/hexawebshare/src/components/core/layout/Row.svelte
@@ -41,6 +41,24 @@ SPDX-License-Identifier: MIT
 		 */
 		ariaLabel?: string;
 
+		/**
+		 * Whether the row should be sticky to the top
+		 * @default false
+		 */
+		sticky?: boolean;
+		/**
+		 * Whether the row should have a bottom border
+		 * @default false
+		 */
+		border?: boolean;
+		/**
+		 * Hide the row below a certain breakpoint
+		 */
+		hideBelow?: 'sm' | 'md' | 'lg' | 'xl';
+		/**
+		 * Hide the row above a certain breakpoint
+		 */
+		hideAbove?: 'sm' | 'md' | 'lg' | 'xl';
 		/**
 		 * Additional CSS classes
 		 * @default ''
@@ -54,6 +72,10 @@ SPDX-License-Identifier: MIT
 		align = 'center',
 		justify = 'start',
 		wrap = false,
+		sticky = false,
+		border = false,
+		hideBelow,
+		hideAbove,
 		ariaLabel,
 		class: className = '',
 		...props
@@ -112,10 +134,30 @@ SPDX-License-Identifier: MIT
 
 	// Static class mapping for Wrap
 	let wrapClass = $derived(wrap ? 'flex-wrap' : 'flex-nowrap');
+
+	// Visibility and Layout classes
+	let visibilityClasses = $derived(
+		[
+			hideBelow === 'sm' && 'hidden sm:flex',
+			hideBelow === 'md' && 'hidden md:flex',
+			hideBelow === 'lg' && 'hidden lg:flex',
+			hideBelow === 'xl' && 'hidden xl:flex',
+			hideAbove === 'sm' && 'sm:hidden',
+			hideAbove === 'md' && 'md:hidden',
+			hideAbove === 'lg' && 'lg:hidden',
+			hideAbove === 'xl' && 'xl:hidden'
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	let layoutClasses = $derived(
+		[sticky && 'sticky top-0 z-30', border && 'border-b border-base-200'].filter(Boolean).join(' ')
+	);
 </script>
 
 <div
-	class="flex {gapClass} {alignClass} {justifyClass} {wrapClass} {className}"
+	class="flex {gapClass} {alignClass} {justifyClass} {wrapClass} {visibilityClasses} {layoutClasses} {className}"
 	role="group"
 	aria-label={ariaLabel}
 	{...props}
diff --git a/hexawebshare/src/components/core/media/Avatar.svelte b/hexawebshare/src/components/core/media/Avatar.svelte
index f0035e1..c61ad7a 100644
--- a/hexawebshare/src/components/core/media/Avatar.svelte
+++ b/hexawebshare/src/components/core/media/Avatar.svelte
@@ -144,6 +144,11 @@ SPDX-License-Identifier: MIT
 						? '2xl'
 						: '2xl' // xl avatar
 	) as 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+
+	// Placeholder/Fallback display classes
+	let fallbackClasses = $derived(
+		'bg-neutral text-neutral-content flex h-full w-full items-center justify-center'
+	);
 </script>
 
 <div
@@ -168,11 +173,14 @@ SPDX-License-Identifier: MIT
 			/>
 		{:else if !loading}
 			{#if placeholder}
-				<Text size={placeholderSize}>{placeholder}</Text>
+				<Text size={placeholderSize} display="block" class={fallbackClasses}>
+					{placeholder}
+				</Text>
 			{:else}
 				<!-- Fallback: Show first letter of alt text -->
 				<Text
 					size={placeholderSize}
+					display="block"
 					class="bg-base-300 text-base-content flex h-full w-full items-center justify-center"
 				>
 					{alt.charAt(0).toUpperCase() || fallbackChar}
diff --git a/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte b/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
index 8b98727..13610cf 100644
--- a/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
+++ b/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
@@ -402,9 +402,10 @@ SPDX-License-Identifier: MIT
 			'bg-base-100',
 			'rounded-box',
 			'z-50',
-			'shadow-lg',
+			'shadow-xl',
 			'border',
-			'border-base-300',
+			'border-base-200',
+			'mt-2',
 			size === 'sm' && 'p-1 min-w-40',
 			size === 'md' && 'p-2 min-w-48',
 			size === 'lg' && 'p-3 min-w-56',
@@ -476,7 +477,7 @@ SPDX-License-Identifier: MIT
 							<a
 								id="{dropdownId}-item-{index}"
 								href={item.href}
-								class="flex items-center gap-2"
+								class="flex items-center gap-3 py-2 max-sm:py-2.5"
 								tabindex={item.disabled ? -1 : 0}
 								role="menuitem"
 								aria-disabled={item.disabled}
@@ -486,29 +487,20 @@ SPDX-License-Identifier: MIT
 								onblur={handleItemBlur}
 							>
 								{#if item.icon}
-									<span class="text-lg" aria-hidden="true">{item.icon}</span>
+									<span class="text-xl max-sm:text-xl" aria-hidden="true">{item.icon}</span>
 								{/if}
 								<span class="flex flex-col">
-									<Text text={item.label} />
+									<Text text={item.label} class="max-sm:text-base" />
 									{#if item.description}
-										<Text text={item.description} size="xs" class="opacity-60" />
+										<Text text={item.description} size="xs" class="opacity-60 max-sm:text-xs" />
 									{/if}
 								</span>
 							</a>
 						{:else}
-							<!-- 
-							NOTE: Raw HTML <button> is intentional here instead of Button component.
-							TECHNICAL REASON: 
-							1. WAI-ARIA menuitem pattern requires <button role="menuitem"> for dropdown items
-							2. DaisyUI's dropdown-content pattern expects unstyled buttons (no .btn classes)
-							3. Button component adds .btn classes that conflict with dropdown styling
-							CONSEQUENCE: Using Button component would break DaisyUI dropdown CSS and menuitem ARIA pattern
-							VALIDATION: WAI-ARIA Menu pattern + DaisyUI v4.x dropdown docs
-						-->
 							<button
 								type="button"
 								id="{dropdownId}-item-{index}"
-								class="flex w-full items-center gap-2 text-left"
+								class="flex w-full items-center gap-3 py-2 text-left max-sm:py-2.5"
 								tabindex={item.disabled ? -1 : 0}
 								disabled={item.disabled || disabled}
 								role="menuitem"
@@ -519,12 +511,12 @@ SPDX-License-Identifier: MIT
 								onblur={handleItemBlur}
 							>
 								{#if item.icon}
-									<span class="text-lg" aria-hidden="true">{item.icon}</span>
+									<span class="text-xl max-sm:text-xl" aria-hidden="true">{item.icon}</span>
 								{/if}
 								<span class="flex flex-col">
-									<Text text={item.label} />
+									<Text text={item.label} class="max-sm:text-base" />
 									{#if item.description}
-										<Text text={item.description} size="xs" class="opacity-60" />
+										<Text text={item.description} size="xs" class="opacity-60 max-sm:text-xs" />
 									{/if}
 								</span>
 							</button>
@@ -538,3 +530,20 @@ SPDX-License-Identifier: MIT
 		{/if}
 	</div>
 </details>
+
+<style>
+	/* Hide default browser disclosure triangle/marker */
+	summary {
+		list-style: none;
+	}
+
+	summary::-webkit-details-marker {
+		display: none;
+	}
+
+	/* Also for Firefox and other browsers */
+	summary::marker {
+		content: none;
+		display: none;
+	}
+</style>
diff --git a/hexawebshare/src/components/core/overlay-navigation/Menu.svelte b/hexawebshare/src/components/core/overlay-navigation/Menu.svelte
index ba91d9d..5f517e6 100644
--- a/hexawebshare/src/components/core/overlay-navigation/Menu.svelte
+++ b/hexawebshare/src/components/core/overlay-navigation/Menu.svelte
@@ -18,7 +18,7 @@ SPDX-License-Identifier: MIT
 		/**
 		 * Label text displayed in the menu item
 		 */
-		label: string;
+		label?: string;
 		/**
 		 * Optional description or subtitle
 		 */
@@ -32,6 +32,15 @@ SPDX-License-Identifier: MIT
 		 * @default false
 		 */
 		disabled?: boolean;
+		/**
+		 * Type of the menu item
+		 * @default 'item'
+		 */
+		type?: 'item' | 'title' | 'divider';
+		/**
+		 * Visual variant of the item
+		 */
+		variant?: 'default' | 'error';
 		/**
 		 * Whether the item is active/selected
 		 * @default false
@@ -142,7 +151,13 @@ SPDX-License-Identifier: MIT
 
 	// Compute item classes based on state
 	const getItemClasses = (item: MenuItem, index: number) =>
-		[item.active && 'active', item.disabled && 'disabled', focusedIndex === index && 'focus']
+		[
+			item.type === 'title' && 'menu-title',
+			item.active && 'active',
+			item.disabled && 'disabled',
+			item.variant === 'error' && 'text-error',
+			focusedIndex === index && 'focus'
+		]
 			.filter(Boolean)
 			.join(' ');
 
@@ -278,56 +293,72 @@ SPDX-License-Identifier: MIT
 			VALIDATION: WAI-ARIA Authoring Practices Guide + DaisyUI v4.x menu documentation
 		-->
 		{#each items as item, index (item.id)}
-			<li class={getItemClasses(item, index)}>
-				{#if item.href && !item.disabled}
-					<a
-						id="{menuId}-item-{index}"
-						href={item.href}
-						class="flex items-center gap-2"
-						tabindex={item.disabled ? -1 : 0}
-						aria-disabled={item.disabled}
-						onclick={() => handleItemClick(item, index)}
-						onkeydown={(e) => handleKeyDown(e, item, index)}
-						onfocus={() => handleFocus(index)}
-						onblur={handleBlur}
-					>
-						{#if item.icon}
-							<span class="text-lg" aria-hidden="true">{item.icon}</span>
-						{/if}
-						<span class="flex flex-col">
-							<Text text={item.label} />
-							{#if item.description}
-								<Text text={item.description} size="xs" class="opacity-60" />
+			{#if item.type === 'title'}
+				<li
+					class="{getItemClasses(item, index)} {item.divider
+						? 'border-base-200 mb-1 border-b pb-1.5'
+						: ''} pointer-events-none cursor-default select-none"
+				>
+					<Text
+						text={item.label}
+						size="xs"
+						class="font-semibold tracking-wider uppercase opacity-60"
+					/>
+				</li>
+			{:else if item.type === 'divider'}
+				<li class="border-base-200 my-1 border-b" role="separator"></li>
+			{:else}
+				<li class={getItemClasses(item, index)}>
+					{#if item.href && !item.disabled}
+						<a
+							id="{menuId}-item-{index}"
+							href={item.href}
+							class="flex items-center gap-2.5 py-1.5 max-sm:py-2"
+							tabindex={item.disabled ? -1 : 0}
+							aria-disabled={item.disabled}
+							onclick={() => handleItemClick(item, index)}
+							onkeydown={(e) => handleKeyDown(e, item, index)}
+							onfocus={() => handleFocus(index)}
+							onblur={handleBlur}
+						>
+							{#if item.icon}
+								<span class="text-lg" aria-hidden="true">{item.icon}</span>
 							{/if}
-						</span>
-					</a>
-				{:else}
-					<button
-						type="button"
-						id="{menuId}-item-{index}"
-						class="flex w-full items-center gap-2 text-left"
-						tabindex={item.disabled ? -1 : 0}
-						disabled={item.disabled || disabled}
-						aria-disabled={item.disabled || disabled}
-						onclick={() => handleItemClick(item, index)}
-						onkeydown={(e) => handleKeyDown(e, item, index)}
-						onfocus={() => handleFocus(index)}
-						onblur={handleBlur}
-					>
-						{#if item.icon}
-							<span class="text-lg" aria-hidden="true">{item.icon}</span>
-						{/if}
-						<span class="flex flex-col">
-							<Text text={item.label} />
-							{#if item.description}
-								<Text text={item.description} size="xs" class="opacity-60" />
+							<span class="flex flex-col">
+								<Text text={item.label} size="sm" />
+								{#if item.description}
+									<Text text={item.description} size="xs" class="opacity-60" />
+								{/if}
+							</span>
+						</a>
+					{:else}
+						<button
+							type="button"
+							id="{menuId}-item-{index}"
+							class="flex w-full items-center gap-2.5 py-1.5 text-left max-sm:py-2"
+							tabindex={item.disabled ? -1 : 0}
+							disabled={item.disabled || disabled}
+							aria-disabled={item.disabled || disabled}
+							onclick={() => handleItemClick(item, index)}
+							onkeydown={(e) => handleKeyDown(e, item, index)}
+							onfocus={() => handleFocus(index)}
+							onblur={handleBlur}
+						>
+							{#if item.icon}
+								<span class="text-lg" aria-hidden="true">{item.icon}</span>
 							{/if}
-						</span>
-					</button>
-				{/if}
-			</li>
+							<span class="flex flex-col">
+								<Text text={item.label} size="sm" />
+								{#if item.description}
+									<Text text={item.description} size="xs" class="opacity-60" />
+								{/if}
+							</span>
+						</button>
+					{/if}
+				</li>
+			{/if}
 			{#if item.divider && index < items.length - 1}
-				<div class="divider my-1" role="separator" aria-orientation="horizontal"></div>
+				<li class="border-base-200 my-1 border-b" role="separator"></li>
 			{/if}
 		{/each}
 	{/if}