diff --git a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.stories.svelte b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.stories.svelte
new file mode 100644
index 0000000..b98d8ae
--- /dev/null
+++ b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.stories.svelte
@@ -0,0 +1,1110 @@
+<!--
+SPDX-FileCopyrightText: 2025 hexaTune LLC
+SPDX-License-Identifier: MIT
+-->
+
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DataTableToolbar from './DataTableToolbar.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Admin/CRUD Data/DataTableToolbar',
+		component: DataTableToolbar,
+		tags: ['autodocs'],
+		argTypes: {
+			searchValue: {
+				control: 'text',
+				description: 'Search input value (controlled)'
+			},
+			searchPlaceholder: {
+				control: 'text',
+				description: 'Search input placeholder text'
+			},
+			showSearch: {
+				control: 'boolean',
+				description: 'Whether search input is enabled'
+			},
+			searchSize: {
+				control: { type: 'select' },
+				options: ['xs', 'sm', 'md', 'lg'],
+				description: 'Search input size'
+			},
+			searchDebounceMs: {
+				control: 'number',
+				description: 'Debounce delay for search in milliseconds'
+			},
+			searchOnType: {
+				control: 'boolean',
+				description: 'Whether to trigger search on every input change'
+			},
+			showFilter: {
+				control: 'boolean',
+				description: 'Whether to show filter button'
+			},
+			filterLabel: {
+				control: 'text',
+				description: 'Filter button label text'
+			},
+			showViewOptions: {
+				control: 'boolean',
+				description: 'Whether to show view options'
+			},
+			viewLabel: {
+				control: 'text',
+				description: 'View options label text'
+			},
+			size: {
+				control: { type: 'select' },
+				options: ['sm', 'md', 'lg'],
+				description: 'Toolbar size'
+			},
+			disabled: {
+				control: 'boolean',
+				description: 'Whether the toolbar is disabled'
+			},
+			loading: {
+				control: 'boolean',
+				description: 'Whether the toolbar is in loading state'
+			},
+			selectedCount: {
+				control: 'number',
+				description: 'Number of selected items (triggers bulk actions display)'
+			},
+			selectedLabel: {
+				control: 'text',
+				description: 'Selected items label text'
+			},
+			clearSelectionLabel: {
+				control: 'text',
+				description: 'Clear selection label text'
+			},
+			searchAriaLabel: {
+				control: 'text',
+				description: 'Search input ARIA label'
+			},
+			filterAriaLabel: {
+				control: 'text',
+				description: 'Filter button ARIA label'
+			},
+			viewAriaLabel: {
+				control: 'text',
+				description: 'View options ARIA label'
+			},
+			ariaLabel: {
+				control: 'text',
+				description: 'Toolbar ARIA label'
+			},
+			actions: {
+				control: 'object',
+				description: 'Action buttons to display'
+			},
+			bulkActions: {
+				control: 'object',
+				description: 'Bulk action buttons (shown when items are selected)'
+			},
+			filterOpen: {
+				control: 'boolean',
+				description: 'Whether filter dropdown is open (bindable)'
+			},
+			filterContent: {
+				control: false,
+				description: 'Custom filter content snippet'
+			},
+			viewOptions: {
+				control: 'object',
+				description: 'View options (density, column visibility, etc.)'
+			},
+			viewValue: {
+				control: 'text',
+				description: 'Selected view option value (bindable)'
+			},
+			onsearch: {
+				control: false,
+				description: 'Search event handler'
+			},
+			onViewChange: {
+				control: false,
+				description: 'View option change handler'
+			},
+			onClearSelection: {
+				control: false,
+				description: 'Clear selection handler'
+			},
+			onFilterApply: {
+				control: false,
+				description: 'Filter apply handler'
+			},
+			onFilterClear: {
+				control: false,
+				description: 'Filter clear/reset handler'
+			},
+			class: {
+				control: 'text',
+				description: 'Additional CSS classes'
+			}
+		},
+		args: {
+			onsearch: fn(),
+			onViewChange: fn(),
+			onClearSelection: fn(),
+			onFilterApply: fn(),
+			onFilterClear: fn(),
+			searchPlaceholder: 'Search...',
+			showSearch: true,
+			searchSize: 'md',
+			searchDebounceMs: 300,
+			searchOnType: false,
+			showFilter: false,
+			filterLabel: 'Filter',
+			showViewOptions: false,
+			viewLabel: 'View',
+			size: 'md',
+			disabled: false,
+			loading: false,
+			selectedCount: 0,
+			selectedLabel: 'selected',
+			clearSelectionLabel: 'Clear selection',
+			searchAriaLabel: 'Search table',
+			filterAriaLabel: 'Filter table',
+			viewAriaLabel: 'View options'
+		},
+		parameters: {
+			docs: {
+				description: {
+					component:
+						'A comprehensive toolbar component for data tables with search, actions, filters, and bulk operations. Built with Svelte 5 and DaisyUI.'
+				}
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+	import type { ToolbarAction, BulkAction, ViewOption } from './DataTableToolbar.svelte';
+	import Button from '../../core/buttons/Button.svelte';
+	import Select from '../../core/forms/Select.svelte';
+	import Text from '../../core/typography/Text.svelte';
+	import Tag from '../../core/media/Tag.svelte';
+	import Input from '../../core/forms/Input.svelte';
+	import Toast from '../../core/feedback/Toast.svelte';
+
+	let defaultSearch = $state('');
+	let withActionsSearch = $state('');
+	let withBulkActionsSearch = $state('');
+	let withFiltersSearch = $state('');
+	let withViewOptionsSearch = $state('');
+	let loadingSearch = $state('');
+	let disabledSearch = $state('');
+	let responsiveSearch = $state('');
+	let customActionsSearch = $state('');
+	let playgroundSearch = $state('');
+	let playgroundFilterOpen = $state(true);
+	let playgroundViewValue = $state('comfortable');
+
+	// Filter and view state for stories
+	let withFiltersFilterOpen = $state(true);
+	let withViewOptionsViewValue = $state('comfortable');
+	let appliedStatus = $state('all');
+	let appliedCategory = $state('all');
+	let showFiltersApplyToast = $state(false);
+	let showFiltersResetToast = $state(false);
+
+	// Tag filter state for story
+	let tagFilterSearch = $state('');
+	let selectedTags = $state<string[]>([]);
+	let appliedTags = $state<string[]>([]);
+	let tagFilterOpen = $state(true);
+	let showApplyToast = $state(false);
+	let showClearToast = $state(false);
+
+	const availableTags = [
+		'React',
+		'Vue',
+		'Svelte',
+		'Angular',
+		'TypeScript',
+		'JavaScript',
+		'Python',
+		'Java',
+		'C++',
+		'Go',
+		'Rust',
+		'PHP',
+		'Node.js',
+		'Express',
+		'Next.js',
+		'Nuxt',
+		'Django',
+		'Flask',
+		'Spring',
+		'Laravel'
+	];
+
+	// Filter button variants (can be changed in stories)
+	let applyButtonVariant:
+		| 'primary'
+		| 'secondary'
+		| 'accent'
+		| 'neutral'
+		| 'info'
+		| 'success'
+		| 'warning'
+		| 'error'
+		| 'ghost'
+		| 'link' = 'primary';
+	let resetButtonVariant:
+		| 'primary'
+		| 'secondary'
+		| 'accent'
+		| 'neutral'
+		| 'info'
+		| 'success'
+		| 'warning'
+		| 'error'
+		| 'ghost'
+		| 'link' = 'ghost';
+
+	// Callback functions for Storybook Actions panel
+	const filterApplyCallback = fn();
+	const filterClearCallback = fn();
+	const tagFilterApplyCallback = fn();
+	const tagFilterClearCallback = fn();
+
+	// Handler functions for filter buttons (for Storybook Actions panel)
+	function handleFilterApply() {
+		showFiltersApplyToast = true;
+		withFiltersFilterOpen = false;
+		// Call DataTableToolbar's onFilterApply callback
+		filterApplyCallback({ status: appliedStatus, category: appliedCategory });
+		setTimeout(() => {
+			showFiltersApplyToast = false;
+		}, 3000);
+	}
+
+	function handleFilterReset() {
+		appliedStatus = 'all';
+		appliedCategory = 'all';
+		showFiltersResetToast = true;
+		withFiltersFilterOpen = false;
+		// Call DataTableToolbar's onFilterClear callback
+		filterClearCallback();
+		setTimeout(() => {
+			showFiltersResetToast = false;
+		}, 3000);
+	}
+
+	function handleTagFilterApply() {
+		if (selectedTags.length === 0) {
+			alert('Please select at least one tag before applying filters.');
+			return;
+		}
+		appliedTags = [...selectedTags];
+		showApplyToast = true;
+		tagFilterOpen = false;
+		// Call DataTableToolbar's onFilterApply callback
+		tagFilterApplyCallback({ tags: appliedTags });
+		setTimeout(() => {
+			showApplyToast = false;
+		}, 3000);
+	}
+
+	function handleTagFilterClear() {
+		selectedTags = [];
+		appliedTags = [];
+		tagFilterSearch = '';
+		showClearToast = true;
+		tagFilterOpen = false;
+		// Call DataTableToolbar's onFilterClear callback
+		tagFilterClearCallback();
+		setTimeout(() => {
+			showClearToast = false;
+		}, 3000);
+	}
+
+	const sampleActions: ToolbarAction[] = [
+		{
+			label: 'Add',
+			variant: 'primary',
+			icon: 'add',
+			onclick: fn()
+		},
+		{
+			label: 'Export',
+			variant: 'secondary',
+			icon: 'export',
+			onclick: fn()
+		}
+	];
+
+	const multipleActions: ToolbarAction[] = [
+		{
+			label: 'Add User',
+			variant: 'primary',
+			icon: 'add',
+			onclick: fn()
+		},
+		{
+			label: 'Export',
+			variant: 'secondary',
+			icon: 'export',
+			onclick: fn()
+		},
+		{
+			label: 'Import',
+			variant: 'accent',
+			icon: 'import',
+			onclick: fn()
+		},
+		{
+			label: 'Refresh',
+			variant: 'ghost',
+			icon: 'refresh',
+			onclick: fn()
+		}
+	];
+
+	const bulkActions: BulkAction[] = [
+		{
+			label: 'Delete Selected',
+			variant: 'error',
+			onclick: fn()
+		},
+		{
+			label: 'Export Selected',
+			variant: 'secondary',
+			onclick: fn()
+		},
+		{
+			label: 'Archive Selected',
+			variant: 'primary',
+			onclick: fn()
+		},
+		{
+			label: 'Mark as Read',
+			variant: 'primary',
+			onclick: fn()
+		}
+	];
+
+	const viewOptions: ViewOption[] = [
+		{ value: 'compact', label: 'Compact' },
+		{ value: 'comfortable', label: 'Comfortable' },
+		{ value: 'spacious', label: 'Spacious' }
+	];
+
+	const customActions: ToolbarAction[] = [
+		{
+			label: 'Custom Action 1',
+			variant: 'primary',
+			onclick: fn()
+		},
+		{
+			label: 'Custom Action 2',
+			variant: 'secondary',
+			outline: true,
+			onclick: fn()
+		}
+	];
+</script>
+
+<!-- Filter Content Snippet (defined at file level for reuse) -->
+{#snippet filterContentSnippet()}
+	<div class="min-w-72 space-y-4 p-4">
+		<Text text="Filter Options" weight="bold" size="base" display="block" class="mb-2" />
+		<div>
+			<Select
+				value={appliedStatus}
+				options={[
+					{ value: 'all', label: 'All Status' },
+					{ value: 'active', label: 'Active' },
+					{ value: 'inactive', label: 'Inactive' },
+					{ value: 'pending', label: 'Pending' }
+				]}
+				size="sm"
+				ariaLabel="Status filter"
+				class="w-full min-w-52"
+				onchange={(e) => {
+					appliedStatus = (e.target as HTMLSelectElement).value;
+				}}
+			/>
+		</div>
+		<div>
+			<Select
+				value={appliedCategory}
+				options={[
+					{ value: 'all', label: 'All Categories' },
+					{ value: 'cat1', label: 'Category 1' },
+					{ value: 'cat2', label: 'Category 2' },
+					{ value: 'cat3', label: 'Category 3' }
+				]}
+				size="sm"
+				ariaLabel="Category filter"
+				class="w-full min-w-52"
+				onchange={(e) => {
+					appliedCategory = (e.target as HTMLSelectElement).value;
+				}}
+			/>
+		</div>
+		<div class="flex gap-2 pt-2">
+			<Button label="Apply" variant="primary" size="sm" onclick={handleFilterApply} />
+			<Button label="Reset" variant="ghost" size="sm" onclick={handleFilterReset} />
+		</div>
+	</div>
+{/snippet}
+
+<!-- Tag Filter Content Snippet (with search and removable tags) -->
+{#snippet tagFilterContentSnippet()}
+	<div class="min-w-80 space-y-4 p-4">
+		<Text text="Filter by Tags" weight="bold" size="base" display="block" class="mb-2" />
+
+		<!-- Search Input -->
+		<div>
+			<Input
+				placeholder="Search tags..."
+				size="sm"
+				value={tagFilterSearch}
+				oninput={(e) => {
+					tagFilterSearch = (e.target as HTMLInputElement).value;
+				}}
+				ariaLabel="Search tags"
+				class="w-full"
+			/>
+		</div>
+
+		<!-- Selected Tags Display -->
+		{#if selectedTags.length > 0}
+			<div class="space-y-2">
+				<Text text="Selected Tags" weight="semibold" size="sm" display="block" />
+				<div class="flex flex-wrap gap-2">
+					{#each selectedTags as tag (tag)}
+						<!-- 
+							NOTE: Raw HTML div is intentional here.
+							TECHNICAL REASON: Event propagation must be stopped to prevent Dropdown from closing when Tag is clicked.
+							Tag component's onclick prop doesn't receive event parameter, so wrapper div is needed for stopPropagation().
+							CONSEQUENCE: Without this wrapper, clicking Tag would trigger Dropdown's closeOnSelect behavior.
+							VALIDATION: Dropdown component closes on any click inside when closeOnSelect is true.
+						-->
+						<div role="none" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+							<Tag
+								label={tag}
+								variant="primary"
+								size="sm"
+								removable={true}
+								onRemove={() => {
+									selectedTags = selectedTags.filter((t) => t !== tag);
+								}}
+								removeLabel="Remove {tag}"
+							/>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Available Tags List -->
+		<div class="space-y-2">
+			<Text text="Available Tags" weight="semibold" size="sm" display="block" />
+			<div class="border-base-300 rounded-box max-h-48 overflow-y-auto border p-2">
+				<div class="flex flex-wrap gap-2">
+					{#each availableTags.filter((tag) => !selectedTags.includes(tag) && (tagFilterSearch === '' || tag
+									.toLowerCase()
+									.includes(tagFilterSearch.toLowerCase()))) as tag (tag)}
+						<!-- 
+							NOTE: Raw HTML div is intentional here.
+							TECHNICAL REASON: Event propagation must be stopped to prevent Dropdown from closing when Tag is clicked.
+							Tag component's onclick prop doesn't receive event parameter, so wrapper div is needed for stopPropagation().
+							CONSEQUENCE: Without this wrapper, clicking Tag would trigger Dropdown's closeOnSelect behavior.
+							VALIDATION: Dropdown component closes on any click inside when closeOnSelect is true.
+						-->
+						<div role="none" tabindex="-1" onclick={(e) => e.stopPropagation()}>
+							<Tag
+								label={tag}
+								variant="neutral"
+								size="sm"
+								clickable={true}
+								onclick={() => {
+									if (!selectedTags.includes(tag)) {
+										selectedTags = [...selectedTags, tag];
+									}
+								}}
+								ariaLabel="Select {tag}"
+							/>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+
+		<!-- Action Buttons -->
+		<div class="border-base-300 flex gap-2 border-t pt-2">
+			<Button label="Apply" variant="primary" size="sm" onclick={handleTagFilterApply} />
+			<Button label="Clear All" variant="ghost" size="sm" onclick={handleTagFilterClear} />
+		</div>
+	</div>
+{/snippet}
+
+<!-- Default Story -->
+<Story name="Default" args={{}}>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={defaultSearch}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					showFilter={true}
+					searchSize="md"
+					size="md"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- With Actions Story -->
+<Story name="With Actions" args={{ actions: sampleActions }}>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={withActionsSearch}
+					actions={sampleActions}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					showFilter={true}
+					searchSize="md"
+					size="md"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- With Bulk Actions Story -->
+<Story
+	name="With Bulk Actions"
+	args={{
+		actions: sampleActions,
+		bulkActions: bulkActions,
+		selectedCount: 5
+	}}
+>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={withBulkActionsSearch}
+					actions={sampleActions}
+					{bulkActions}
+					selectedCount={5}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					showFilter={true}
+					searchSize="md"
+					size="md"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- With Filters Story -->
+<Story
+	name="With Filters"
+	args={{
+		showFilter: true,
+		filterContent: filterContentSnippet,
+		onFilterApply: filterApplyCallback,
+		onFilterClear: filterClearCallback
+	}}
+>
+	{#snippet children()}
+		{#snippet customFilterContent()}
+			<div class="min-w-72 space-y-4 p-4">
+				<Text text="Filter Options" weight="bold" size="base" display="block" class="mb-2" />
+				<div>
+					<Select
+						value={appliedStatus}
+						options={[
+							{ value: 'all', label: 'All Status' },
+							{ value: 'active', label: 'Active' },
+							{ value: 'inactive', label: 'Inactive' },
+							{ value: 'pending', label: 'Pending' }
+						]}
+						size="sm"
+						ariaLabel="Status filter"
+						class="w-full min-w-52"
+						onchange={(e) => {
+							appliedStatus = (e.target as HTMLSelectElement).value;
+						}}
+					/>
+				</div>
+				<div>
+					<Select
+						value={appliedCategory}
+						options={[
+							{ value: 'all', label: 'All Categories' },
+							{ value: 'cat1', label: 'Category 1' },
+							{ value: 'cat2', label: 'Category 2' },
+							{ value: 'cat3', label: 'Category 3' }
+						]}
+						size="sm"
+						ariaLabel="Category filter"
+						class="w-full min-w-52"
+						onchange={(e) => {
+							appliedCategory = (e.target as HTMLSelectElement).value;
+						}}
+					/>
+				</div>
+				<div class="flex gap-2 pt-2">
+					<Button
+						label="Apply"
+						variant={applyButtonVariant}
+						size="sm"
+						class="flex-1"
+						onclick={handleFilterApply}
+					/>
+					<Button
+						label="Reset"
+						variant={resetButtonVariant}
+						size="sm"
+						class="flex-1"
+						onclick={handleFilterReset}
+					/>
+				</div>
+			</div>
+		{/snippet}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl space-y-4">
+				<DataTableToolbar
+					bind:searchValue={withFiltersSearch}
+					showFilter={true}
+					bind:filterOpen={withFiltersFilterOpen}
+					filterContent={customFilterContent}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					searchSize="md"
+					size="md"
+					filterLabel="Filter"
+					onFilterApply={filterApplyCallback}
+					onFilterClear={filterClearCallback}
+				/>
+
+				<!-- Applied Filters Display -->
+				{#if appliedStatus !== 'all' || appliedCategory !== 'all'}
+					<div
+						class="bg-success/10 border-success rounded-box border-2 p-4 transition-all duration-300"
+					>
+						<div class="mb-2 flex items-center gap-2">
+							<Text
+								text="✓ Filters Applied Successfully"
+								weight="bold"
+								size="base"
+								display="block"
+								class="text-success"
+							/>
+						</div>
+						<Text
+							text="Applied Filters:"
+							weight="semibold"
+							size="sm"
+							display="block"
+							class="mb-2"
+						/>
+						<div class="flex flex-wrap gap-2">
+							{#if appliedStatus !== 'all'}
+								<Tag label={`Status: ${appliedStatus}`} variant="primary" size="sm" />
+							{/if}
+							{#if appliedCategory !== 'all'}
+								<Tag label={`Category: ${appliedCategory}`} variant="primary" size="sm" />
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="bg-base-200 rounded-box border-base-300 border p-4">
+						<Text
+							text="No filters applied"
+							weight="normal"
+							size="sm"
+							display="block"
+							class="text-base-content/60"
+						/>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Toast Notifications -->
+			{#if showFiltersApplyToast}
+				<Toast
+					title="Filters Applied"
+					message={appliedStatus !== 'all' || appliedCategory !== 'all'
+						? 'Filters have been applied successfully'
+						: 'No filters selected'}
+					variant="success"
+					position="top-right"
+					duration={3000}
+					showIcon={true}
+					closable={true}
+					onDismiss={() => {
+						showFiltersApplyToast = false;
+					}}
+				/>
+			{/if}
+
+			{#if showFiltersResetToast}
+				<Toast
+					title="Filters Reset"
+					message="All filters have been reset"
+					variant="info"
+					position="top-right"
+					duration={3000}
+					showIcon={true}
+					closable={true}
+					onDismiss={() => {
+						showFiltersResetToast = false;
+					}}
+				/>
+			{/if}
+		</div>
+	{/snippet}
+</Story>
+
+<!-- With View Options Story -->
+<Story
+	name="With View Options"
+	args={{
+		actions: sampleActions,
+		showViewOptions: true,
+		viewOptions: viewOptions
+	}}
+>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={withViewOptionsSearch}
+					actions={sampleActions}
+					showViewOptions={true}
+					{viewOptions}
+					bind:viewValue={withViewOptionsViewValue}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					showFilter={true}
+					searchSize="md"
+					size="md"
+					viewLabel="View"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- With Tag Filter Story -->
+<Story
+	name="With Tag Filter"
+	args={{
+		showFilter: true,
+		filterContent: tagFilterContentSnippet,
+		onFilterApply: tagFilterApplyCallback,
+		onFilterClear: tagFilterClearCallback,
+		filterCloseOnSelect: false
+	}}
+>
+	{#snippet children()}
+		{#snippet customTagFilterContent()}
+			<div class="min-w-80 space-y-4 p-4">
+				<Text text="Filter by Tags" weight="bold" size="base" display="block" class="mb-2" />
+
+				<!-- Search Input -->
+				<div>
+					<Input
+						placeholder="Search tags..."
+						size="sm"
+						value={tagFilterSearch}
+						oninput={(e) => {
+							tagFilterSearch = (e.target as HTMLInputElement).value;
+						}}
+						ariaLabel="Search tags"
+						class="w-full"
+					/>
+				</div>
+
+				<!-- Selected Tags Display -->
+				{#if selectedTags.length > 0}
+					<div class="space-y-2">
+						<Text text="Selected Tags" weight="semibold" size="sm" display="block" />
+						<div class="flex flex-wrap gap-2">
+							{#each selectedTags as tag (tag)}
+								<Tag
+									label={tag}
+									variant="primary"
+									size="sm"
+									removable={true}
+									onRemove={() => {
+										selectedTags = selectedTags.filter((t) => t !== tag);
+									}}
+									removeLabel="Remove {tag}"
+								/>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				<!-- Available Tags List -->
+				<div class="space-y-2">
+					<Text text="Available Tags" weight="semibold" size="sm" display="block" />
+					<div class="border-base-300 rounded-box max-h-48 overflow-y-auto border p-2">
+						<div class="flex flex-wrap gap-2">
+							{#each availableTags.filter((tag) => !selectedTags.includes(tag) && (tagFilterSearch === '' || tag
+											.toLowerCase()
+											.includes(tagFilterSearch.toLowerCase()))) as tag (tag)}
+								<Tag
+									label={tag}
+									variant="neutral"
+									size="sm"
+									clickable={true}
+									onclick={() => {
+										if (!selectedTags.includes(tag)) {
+											selectedTags = [...selectedTags, tag];
+										}
+									}}
+									ariaLabel="Select {tag}"
+								/>
+							{/each}
+						</div>
+					</div>
+				</div>
+
+				<!-- Action Buttons -->
+				<div class="border-base-300 flex gap-2 border-t pt-2">
+					<Button
+						label="Apply"
+						variant={applyButtonVariant}
+						size="sm"
+						class="flex-1"
+						onclick={handleTagFilterApply}
+					/>
+					<Button
+						label="Clear All"
+						variant={resetButtonVariant}
+						size="sm"
+						class="flex-1"
+						onclick={handleTagFilterClear}
+					/>
+				</div>
+			</div>
+		{/snippet}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl space-y-4">
+				<DataTableToolbar
+					bind:searchValue={defaultSearch}
+					showFilter={true}
+					bind:filterOpen={tagFilterOpen}
+					filterContent={customTagFilterContent}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					searchSize="md"
+					size="md"
+					filterLabel="Filter by Tags"
+					onFilterApply={tagFilterApplyCallback}
+					onFilterClear={tagFilterClearCallback}
+				/>
+
+				<!-- Applied Filters Display -->
+				{#if appliedTags.length > 0}
+					<div class="bg-success border-success rounded-box border-2 p-4 shadow-lg">
+						<div class="mb-3 flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-success-content h-6 w-6"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							<Text
+								text="Filters Applied Successfully!"
+								weight="bold"
+								size="lg"
+								display="block"
+								class="text-success-content"
+							/>
+						</div>
+						<Text
+							text="Applied Filters:"
+							weight="semibold"
+							size="sm"
+							display="block"
+							class="text-success-content/90 mb-2"
+						/>
+						<div class="flex flex-wrap gap-2">
+							{#each appliedTags as tag (tag)}
+								<Tag label={tag} variant="primary" size="sm" />
+							{/each}
+						</div>
+					</div>
+				{:else}
+					<div class="bg-base-200 rounded-box border-base-300 border p-4">
+						<Text
+							text="No filters applied. Select tags and click Apply button."
+							weight="normal"
+							size="sm"
+							display="block"
+							class="text-base-content/60"
+						/>
+					</div>
+				{/if}
+			</div>
+
+			<!-- Toast Notifications -->
+			{#if showApplyToast}
+				<Toast
+					title="Filters Applied"
+					message={appliedTags.length > 0
+						? `Applied ${appliedTags.length} filter${appliedTags.length > 1 ? 's' : ''}`
+						: 'No filters selected'}
+					variant="success"
+					position="top-right"
+					duration={3000}
+					showIcon={true}
+					closable={true}
+					onDismiss={() => {
+						showApplyToast = false;
+					}}
+				/>
+			{/if}
+
+			{#if showClearToast}
+				<Toast
+					title="Filters Cleared"
+					message="All filters have been cleared"
+					variant="info"
+					position="top-right"
+					duration={3000}
+					showIcon={true}
+					closable={true}
+					onDismiss={() => {
+						showClearToast = false;
+					}}
+				/>
+			{/if}
+		</div>
+	{/snippet}
+</Story>
+
+<!-- Loading State Story -->
+<Story name="Loading State" args={{ actions: sampleActions, loading: true }}>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={loadingSearch}
+					actions={sampleActions}
+					loading={true}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					showFilter={true}
+					searchSize="md"
+					size="md"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- Disabled State Story -->
+<Story name="Disabled State" args={{ actions: sampleActions, disabled: true }}>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={disabledSearch}
+					actions={sampleActions}
+					disabled={true}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					showFilter={true}
+					searchSize="md"
+					size="md"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- Multiple Actions Story -->
+<Story name="Multiple Actions" args={{ actions: multipleActions }}>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={customActionsSearch}
+					actions={multipleActions}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					showFilter={true}
+					searchSize="md"
+					size="md"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- Small Size Story -->
+<Story name="Small Size" args={{ actions: sampleActions, size: 'sm', searchSize: 'sm' }}>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={defaultSearch}
+					actions={sampleActions}
+					showFilter={true}
+					size="sm"
+					searchSize="sm"
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
+
+<!-- Playground Story (Required - Must be last) -->
+<Story
+	name="Playground"
+	args={{
+		showFilter: true,
+		filterContent: filterContentSnippet
+	}}
+>
+	{#snippet children()}
+		<div class="bg-base-100 min-h-screen p-8">
+			<div class="container mx-auto max-w-6xl">
+				<DataTableToolbar
+					bind:searchValue={playgroundSearch}
+					bind:filterOpen={playgroundFilterOpen}
+					bind:viewValue={playgroundViewValue}
+					searchPlaceholder="Search..."
+					showSearch={true}
+					searchSize="md"
+					selectedCount={0}
+					showFilter={true}
+					filterContent={filterContentSnippet}
+					showViewOptions={false}
+					size="md"
+					disabled={false}
+					loading={false}
+					actions={sampleActions}
+					{bulkActions}
+					{viewOptions}
+				/>
+			</div>
+		</div>
+	{/snippet}
+</Story>
diff --git a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte
index 315da07..ed6e875 100644
--- a/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte
+++ b/hexawebshare/src/components/admin/crud-data/DataTableToolbar.svelte
@@ -2,3 +2,788 @@
 SPDX-FileCopyrightText: 2025 hexaTune LLC
 SPDX-License-Identifier: MIT
 -->
+
+<!--
+@component DataTableToolbar
+
+A comprehensive toolbar component for data tables with search, actions, filters, and bulk operations.
+
+**Features:**
+- Search input with debounce support
+- Action buttons (Add, Export, Import, etc.)
+- Filter button with dropdown
+- Bulk actions for selected rows
+- View options (density, column visibility)
+- Loading and disabled states
+- Responsive design
+- Full accessibility support
+
+**Component Architecture:**
+- Uses library primitives: Button, IconButton, Input, Select, Text, Badge
+- Follows Svelte 5 patterns with runes
+- All text content externalized as props for i18n support
+
+**Example:**
+```svelte
+<DataTableToolbar
+  searchValue={search}
+  searchPlaceholder="Search users..."
+  onsearch={(value) => setSearch(value)}
+  actions={[
+    { label: 'Add User', variant: 'primary', onclick: handleAdd }
+  ]}
+  bulkActions={[
+    { label: 'Delete Selected', variant: 'error', onclick: handleDelete }
+  ]}
+  selectedCount={selectedRows.length}
+/>
+```
+-->
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Button from '../../core/buttons/Button.svelte';
+	import IconButton from '../../core/buttons/IconButton.svelte';
+	import Input from '../../core/forms/Input.svelte';
+	import Select from '../../core/forms/Select.svelte';
+	import Text from '../../core/typography/Text.svelte';
+	import Badge from '../../core/media/Badge.svelte';
+	import Icon from '../../core/media/Icon.svelte';
+	import Dropdown from '../../core/overlay-navigation/Dropdown.svelte';
+	import Spinner from '../../core/feedback/Spinner.svelte';
+
+	/**
+	 * Action button configuration
+	 */
+	export interface ToolbarAction {
+		/**
+		 * Button label text
+		 */
+		label: string;
+		/**
+		 * Button variant
+		 * @default 'primary'
+		 */
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'accent'
+			| 'neutral'
+			| 'info'
+			| 'success'
+			| 'warning'
+			| 'error'
+			| 'ghost'
+			| 'link';
+		/**
+		 * Button size
+		 * @default 'md'
+		 */
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		/**
+		 * Whether button has outline style
+		 * @default false
+		 */
+		outline?: boolean;
+		/**
+		 * Whether button is disabled
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Whether button is in loading state
+		 * @default false
+		 */
+		loading?: boolean;
+		/**
+		 * Icon name or custom icon snippet
+		 */
+		icon?: string | Snippet;
+		/**
+		 * Click event handler
+		 */
+		onclick?: () => void;
+		/**
+		 * ARIA label for accessibility
+		 */
+		ariaLabel?: string;
+	}
+
+	/**
+	 * Bulk action configuration
+	 */
+	export interface BulkAction {
+		/**
+		 * Action label text
+		 */
+		label: string;
+		/**
+		 * Action variant
+		 * @default 'primary'
+		 */
+		variant?:
+			| 'primary'
+			| 'secondary'
+			| 'accent'
+			| 'neutral'
+			| 'info'
+			| 'success'
+			| 'warning'
+			| 'error'
+			| 'ghost'
+			| 'link';
+		/**
+		 * Whether action is disabled
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Click event handler
+		 */
+		onclick?: () => void;
+		/**
+		 * ARIA label for accessibility
+		 */
+		ariaLabel?: string;
+	}
+
+	/**
+	 * View option configuration
+	 */
+	export interface ViewOption {
+		/**
+		 * Option value
+		 */
+		value: string;
+		/**
+		 * Option label
+		 */
+		label: string;
+		/**
+		 * Whether option is disabled
+		 * @default false
+		 */
+		disabled?: boolean;
+	}
+
+	interface Props {
+		/**
+		 * Search input value (controlled)
+		 */
+		searchValue?: string;
+		/**
+		 * Search input placeholder text
+		 * @default 'Search...'
+		 */
+		searchPlaceholder?: string;
+		/**
+		 * Whether search input is enabled
+		 * @default true
+		 */
+		showSearch?: boolean;
+		/**
+		 * Search input size
+		 * @default 'md'
+		 */
+		searchSize?: 'xs' | 'sm' | 'md' | 'lg';
+		/**
+		 * Debounce delay for search in milliseconds
+		 * @default 300
+		 */
+		searchDebounceMs?: number;
+		/**
+		 * Whether to trigger search on every input change
+		 * @default false
+		 */
+		searchOnType?: boolean;
+		/**
+		 * Action buttons to display
+		 */
+		actions?: ToolbarAction[];
+		/**
+		 * Bulk action buttons (shown when items are selected)
+		 */
+		bulkActions?: BulkAction[];
+		/**
+		 * Number of selected items (triggers bulk actions display)
+		 * @default 0
+		 */
+		selectedCount?: number;
+		/**
+		 * Whether to show filter button
+		 * @default false
+		 */
+		showFilter?: boolean;
+		/**
+		 * Filter button label text
+		 * @default 'Filter'
+		 */
+		filterLabel?: string;
+		/**
+		 * Whether filter dropdown is open (bindable)
+		 */
+		filterOpen?: boolean;
+		/**
+		 * Custom filter content snippet
+		 */
+		filterContent?: Snippet;
+		/**
+		 * Empty filter state text (shown when no filter content provided)
+		 * @default 'No filter'
+		 */
+		noFilterText?: string;
+		/**
+		 * View options (density, column visibility, etc.)
+		 */
+		viewOptions?: ViewOption[];
+		/**
+		 * Selected view option value
+		 */
+		viewValue?: string;
+		/**
+		 * View options label text
+		 * @default 'View'
+		 */
+		viewLabel?: string;
+		/**
+		 * Whether to show view options
+		 * @default false
+		 */
+		showViewOptions?: boolean;
+		/**
+		 * Toolbar size
+		 * @default 'md'
+		 */
+		size?: 'sm' | 'md' | 'lg';
+		/**
+		 * Whether the toolbar is disabled
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Whether the toolbar is in loading state
+		 * @default false
+		 */
+		loading?: boolean;
+		/**
+		 * Selected items label text
+		 * @default 'selected'
+		 */
+		selectedLabel?: string;
+		/**
+		 * Clear selection label text
+		 * @default 'Clear selection'
+		 */
+		clearSelectionLabel?: string;
+		/**
+		 * Search input ARIA label
+		 * @default 'Search table'
+		 */
+		searchAriaLabel?: string;
+		/**
+		 * Filter button ARIA label
+		 * @default 'Filter table'
+		 */
+		filterAriaLabel?: string;
+		/**
+		 * View options ARIA label
+		 * @default 'View options'
+		 */
+		viewAriaLabel?: string;
+		/**
+		 * Loading spinner ARIA label
+		 * @default 'Loading'
+		 */
+		loadingAriaLabel?: string;
+		/**
+		 * Toolbar ARIA label
+		 */
+		ariaLabel?: string;
+		/**
+		 * Search event handler
+		 */
+		onsearch?: (value: string) => void;
+		/**
+		 * View option change handler
+		 */
+		onViewChange?: (value: string) => void;
+		/**
+		 * Clear selection handler
+		 */
+		onClearSelection?: () => void;
+		/**
+		 * Filter apply handler (called when filter is applied)
+		 */
+		onFilterApply?: (filters: unknown) => void;
+		/**
+		 * Filter clear/reset handler (called when filter is cleared)
+		 */
+		onFilterClear?: () => void;
+		/**
+		 * Whether to close filter dropdown when an item is selected
+		 * @default true
+		 */
+		filterCloseOnSelect?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+	}
+
+	let {
+		searchValue = $bindable(''),
+		searchPlaceholder = 'Search...',
+		showSearch = true,
+		searchSize = 'md',
+		searchDebounceMs = 300,
+		searchOnType = false,
+		actions = [],
+		bulkActions = [],
+		selectedCount = 0,
+		showFilter = false,
+		filterLabel = 'Filter',
+		filterOpen = $bindable(false),
+		filterContent,
+		noFilterText = 'No filter',
+		viewOptions = [],
+		viewValue = $bindable(''),
+		showViewOptions = false,
+		viewLabel = 'View',
+		size = 'md',
+		disabled = false,
+		loading = false,
+		selectedLabel = 'selected',
+		clearSelectionLabel = 'Clear selection',
+		searchAriaLabel = 'Search table',
+		filterAriaLabel = 'Filter table',
+		viewAriaLabel = 'View options',
+		loadingAriaLabel = 'Loading',
+		ariaLabel,
+		onsearch,
+		onViewChange,
+		onClearSelection,
+		onFilterApply,
+		onFilterClear,
+		filterCloseOnSelect = true,
+		class: className = '',
+		...props
+	}: Props = $props();
+
+	// Debounce timer for search
+	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Size-based classes
+	const toolbarSizeClasses = $derived({
+		sm: 'gap-2 p-2',
+		md: 'gap-3 p-3',
+		lg: 'gap-4 p-4'
+	});
+
+	const buttonSize = $derived(size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md');
+
+	// Container classes
+	const containerClasses = $derived(
+		[
+			'data-table-toolbar',
+			'flex',
+			'flex-wrap',
+			'items-center',
+			'justify-between',
+			'bg-base-100',
+			'border',
+			'border-base-300',
+			'rounded-box',
+			toolbarSizeClasses[size],
+			(disabled || loading) && 'opacity-50',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	// Left section classes (search, filters)
+	const leftSectionClasses = $derived(
+		['flex', 'flex-wrap', 'items-center', 'gap-2', 'flex-1', 'min-w-0'].join(' ')
+	);
+
+	// Right section classes (actions, view options)
+	const rightSectionClasses = $derived(
+		['flex', 'flex-wrap', 'items-center', 'gap-2', 'shrink-0'].join(' ')
+	);
+
+	// Search input classes
+	const searchWrapperClasses = $derived(
+		[
+			'flex',
+			'items-center',
+			size === 'sm' ? 'w-full sm:w-64' : size === 'lg' ? 'w-full sm:w-80' : 'w-full sm:w-72'
+		].join(' ')
+	);
+
+	// Handle search input
+	function handleSearchInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		searchValue = target.value;
+
+		if (searchOnType && onsearch) {
+			if (debounceTimer) {
+				clearTimeout(debounceTimer);
+			}
+			debounceTimer = setTimeout(() => {
+				onsearch(searchValue);
+			}, searchDebounceMs);
+		}
+	}
+
+	// Handle search on Enter key
+	function handleSearchKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' && onsearch && !searchOnType) {
+			onsearch(searchValue);
+		}
+	}
+
+	// Handle view option change
+	function handleViewChange(value: string) {
+		viewValue = value;
+		onViewChange?.(value);
+	}
+
+	// Handle clear selection
+	function handleClearSelection() {
+		onClearSelection?.();
+	}
+
+	// Cleanup debounce timer
+	import { onDestroy } from 'svelte';
+	onDestroy(() => {
+		if (debounceTimer) {
+			clearTimeout(debounceTimer);
+		}
+	});
+
+	// Check if bulk actions should be shown
+	const showBulkActions = $derived(selectedCount > 0 && bulkActions.length > 0);
+</script>
+
+<!-- 
+	NOTE: Raw HTML div is intentional here.
+	This is a structural container (toolbar wrapper) with no semantic or interactive behavior.
+	No suitable library component exists for generic layout wrappers.
+-->
+<div class={containerClasses} role="toolbar" aria-label={ariaLabel} aria-busy={loading} {...props}>
+	<!-- Left Section: Search and Filters -->
+	<!-- 
+		NOTE: Raw HTML div is intentional here.
+		This is a structural container (left section wrapper) with no semantic or interactive behavior.
+		No suitable library component exists for generic layout wrappers.
+	-->
+	<div class={leftSectionClasses}>
+		{#if loading}
+			<Spinner size="sm" ariaLabel={loadingAriaLabel} />
+		{/if}
+		{#if showSearch}
+			<!-- 
+				NOTE: Raw HTML div is intentional here.
+				This is a structural container (search wrapper) with no semantic or interactive behavior.
+				No suitable library component exists for generic layout wrappers.
+			-->
+			<div class={searchWrapperClasses}>
+				<Input
+					type="search"
+					value={searchValue}
+					placeholder={searchPlaceholder}
+					disabled={disabled || loading}
+					ariaLabel={searchAriaLabel}
+					oninput={handleSearchInput}
+					onkeydown={handleSearchKeydown}
+					size={searchSize}
+					class="w-full"
+				/>
+			</div>
+		{/if}
+
+		{#if showFilter}
+			{#snippet filterTrigger()}
+				<Button
+					variant="ghost"
+					size={buttonSize}
+					disabled={disabled || loading}
+					ariaLabel={filterAriaLabel}
+					onclick={() => {
+						// Toggle the dropdown by toggling filterOpen state
+						// The Dropdown component will handle the actual DOM manipulation
+						filterOpen = !filterOpen;
+					}}
+				>
+					{#snippet children()}
+						<Icon size="sm" ariaHidden={true}>
+							{#snippet children()}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="2"
+									stroke="currentColor"
+									class="h-4 w-4"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+									/>
+								</svg>
+							{/snippet}
+						</Icon>
+						{filterLabel}
+						<!-- Dropdown arrow icon -->
+						<Icon size="xs" ariaHidden={true}>
+							{#snippet children()}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="2"
+									stroke="currentColor"
+									class="h-3 w-3 transition-transform {filterOpen ? 'rotate-180' : ''}"
+								>
+									<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+								</svg>
+							{/snippet}
+						</Icon>
+					{/snippet}
+				</Button>
+			{/snippet}
+			{#snippet defaultNoFilterContent()}
+				<div class="min-w-48 p-4">
+					<Text
+						text={noFilterText}
+						weight="normal"
+						size="sm"
+						display="block"
+						class="text-base-content/60"
+					/>
+				</div>
+			{/snippet}
+			<Dropdown
+				open={filterOpen}
+				size={buttonSize}
+				disabled={disabled || loading}
+				ariaLabel={filterAriaLabel}
+				closeOnSelect={filterCloseOnSelect}
+				onOpenChange={(open) => {
+					filterOpen = open;
+				}}
+				trigger={filterTrigger}
+			>
+				{#snippet children()}
+					{@render (filterContent || defaultNoFilterContent)()}
+				{/snippet}
+			</Dropdown>
+		{/if}
+
+		<!-- Bulk Actions Badge and Clear -->
+		{#if showBulkActions}
+			<!-- 
+				NOTE: Raw HTML div is intentional here.
+				This is a structural container (bulk actions wrapper) with no semantic or interactive behavior.
+				No suitable library component exists for generic layout wrappers.
+			-->
+			<div class="flex items-center gap-2">
+				<Badge
+					variant="primary"
+					size={size === 'sm' ? 'sm' : 'md'}
+					label={`${selectedCount} ${selectedLabel}`}
+				/>
+				{#if onClearSelection}
+					<Button
+						label={clearSelectionLabel}
+						variant="ghost"
+						size={buttonSize === 'sm' ? 'xs' : 'sm'}
+						disabled={disabled || loading}
+						onclick={handleClearSelection}
+						ariaLabel={clearSelectionLabel}
+					/>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Right Section: Actions and View Options -->
+	<!-- 
+		NOTE: Raw HTML div is intentional here.
+		This is a structural container (right section wrapper) with no semantic or interactive behavior.
+		No suitable library component exists for generic layout wrappers.
+	-->
+	<div class={rightSectionClasses}>
+		<!-- Bulk Actions -->
+		{#if showBulkActions}
+			{#each bulkActions as action (action.label)}
+				<Button
+					label={action.label}
+					variant={action.variant}
+					size={buttonSize}
+					disabled={disabled || loading || action.disabled}
+					onclick={action.onclick}
+					ariaLabel={action.ariaLabel || action.label}
+				/>
+			{/each}
+		{/if}
+
+		<!-- Regular Actions -->
+		{#if actions.length > 0}
+			{#each actions as action (action.label)}
+				{#if typeof action.icon === 'string'}
+					<IconButton
+						variant={action.variant || 'primary'}
+						size={action.size || buttonSize}
+						disabled={disabled || loading || action.disabled}
+						loading={action.loading}
+						onclick={action.onclick}
+						ariaLabel={action.ariaLabel || action.label}
+						title={action.label}
+					>
+						{#snippet children()}
+							<!-- Default icons based on common action types -->
+							{#if action.icon === 'add' || action.icon === 'plus'}
+								<Icon size="md" ariaHidden={true}>
+									{#snippet children()}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="2"
+											stroke="currentColor"
+											class="h-5 w-5"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M12 4.5v15m7.5-7.5h-15"
+											/>
+										</svg>
+									{/snippet}
+								</Icon>
+							{:else if action.icon === 'export' || action.icon === 'download'}
+								<Icon size="md" ariaHidden={true}>
+									{#snippet children()}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="2"
+											stroke="currentColor"
+											class="h-5 w-5"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
+											/>
+										</svg>
+									{/snippet}
+								</Icon>
+							{:else if action.icon === 'import' || action.icon === 'upload'}
+								<Icon size="md" ariaHidden={true}>
+									{#snippet children()}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="2"
+											stroke="currentColor"
+											class="h-5 w-5"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+											/>
+										</svg>
+									{/snippet}
+								</Icon>
+							{:else if action.icon === 'refresh' || action.icon === 'reload'}
+								<Icon size="md" ariaHidden={true}>
+									{#snippet children()}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="2"
+											stroke="currentColor"
+											class="h-5 w-5"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+											/>
+										</svg>
+									{/snippet}
+								</Icon>
+							{/if}
+						{/snippet}
+					</IconButton>
+				{:else if action.icon}
+					<!-- Custom icon snippet -->
+					{@render action.icon()}
+				{:else}
+					<!-- Button with label (no icon) -->
+					<Button
+						label={action.label}
+						variant={action.variant || 'primary'}
+						size={action.size || buttonSize}
+						outline={action.outline}
+						disabled={disabled || loading || action.disabled}
+						loading={action.loading}
+						onclick={action.onclick}
+						ariaLabel={action.ariaLabel || action.label}
+					/>
+				{/if}
+			{/each}
+		{/if}
+
+		<!-- View Options -->
+		{#if showViewOptions && viewOptions.length > 0}
+			<Select
+				value={viewValue}
+				options={viewOptions}
+				size={buttonSize}
+				disabled={disabled || loading}
+				ariaLabel={viewAriaLabel}
+				onchange={(e) => handleViewChange((e.target as HTMLSelectElement).value)}
+				class="min-w-32"
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* Hide native browser search icons for consistent UX */
+	:global(.data-table-toolbar input[type='search'])::-webkit-search-decoration,
+	:global(.data-table-toolbar input[type='search'])::-webkit-search-cancel-button,
+	:global(.data-table-toolbar input[type='search'])::-webkit-search-results-button,
+	:global(.data-table-toolbar input[type='search'])::-webkit-search-results-decoration {
+		-webkit-appearance: none;
+		appearance: none;
+		display: none;
+	}
+
+	/* Firefox */
+	:global(.data-table-toolbar input[type='search'])::-moz-search-clear-button {
+		display: none;
+	}
+
+	/* Hide Dropdown summary marker (triangle icon) - we use custom arrow icon inside button */
+	:global(.data-table-toolbar .dropdown summary) {
+		list-style: none;
+	}
+
+	:global(.data-table-toolbar .dropdown summary::-webkit-details-marker) {
+		display: none;
+	}
+
+	:global(.data-table-toolbar .dropdown summary::marker) {
+		display: none;
+		content: '';
+	}
+</style>
diff --git a/hexawebshare/src/components/core/forms/Input.svelte b/hexawebshare/src/components/core/forms/Input.svelte
index 4939b34..a63d699 100644
--- a/hexawebshare/src/components/core/forms/Input.svelte
+++ b/hexawebshare/src/components/core/forms/Input.svelte
@@ -133,6 +133,10 @@ SPDX-License-Identifier: MIT
 		 * Focus event handler
 		 */
 		onfocus?: (event: Event) => void;
+		/**
+		 * Keydown event handler
+		 */
+		onkeydown?: (event: KeyboardEvent) => void;
 		/**
 		 * Additional CSS classes
 		 */
@@ -161,6 +165,11 @@ SPDX-License-Identifier: MIT
 		loading = false,
 		requiredLabel = 'required',
 		loadingLabel = 'Loading',
+		onchange,
+		oninput,
+		onblur,
+		onfocus,
+		onkeydown,
 		class: className = '',
 		...props
 	}: Props = $props();
@@ -234,6 +243,11 @@ SPDX-License-Identifier: MIT
 			aria-required={required}
 			aria-disabled={disabled}
 			aria-busy={loading}
+			{onchange}
+			{oninput}
+			{onblur}
+			{onfocus}
+			{onkeydown}
 			{...props}
 		/>
 		{#if loading}
diff --git a/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte b/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
index 8b98727..9cfcb61 100644
--- a/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
+++ b/hexawebshare/src/components/core/overlay-navigation/Dropdown.svelte
@@ -425,7 +425,13 @@ SPDX-License-Identifier: MIT
 	}
 </script>
 
-<details bind:this={dropdownElement} class={dropdownClasses} ontoggle={handleToggle} {...props}>
+<details
+	bind:this={dropdownElement}
+	open={isOpen}
+	class={dropdownClasses}
+	ontoggle={handleToggle}
+	{...props}
+>
 	<!-- Trigger -->
 	<summary
 		class={trigger ? triggerClass : triggerClasses}
diff --git a/hexawebshare/src/lib/index.ts b/hexawebshare/src/lib/index.ts
index e003cbd..daf6106 100644
--- a/hexawebshare/src/lib/index.ts
+++ b/hexawebshare/src/lib/index.ts
@@ -110,3 +110,11 @@ export type {
 	SocialLink
 } from '../components/utility/utility/FooterBar.svelte';
 export { default as GlobalSearchBar } from '../components/utility/utility/GlobalSearchBar.svelte';
+
+// Admin / CRUD Data
+export { default as DataTableToolbar } from '../components/admin/crud-data/DataTableToolbar.svelte';
+export type {
+	ToolbarAction,
+	BulkAction,
+	ViewOption
+} from '../components/admin/crud-data/DataTableToolbar.svelte';