diff --git a/src/lib/components/admin/Alert.svelte b/src/lib/components/admin/Alert.svelte
new file mode 100644
index 0000000..86b3af7
--- /dev/null
+++ b/src/lib/components/admin/Alert.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let {
+		type = 'error',
+		message,
+		children
+	}: {
+		type?: 'error';
+		message?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class="alert alert-{type}">
+	{#if message}
+		{message}
+	{:else if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.alert {
+		padding: 12px 16px;
+		margin-bottom: 20px;
+		font-weight: 600;
+	}
+
+	.alert-error {
+		background-color: #fdf7f7;
+		border: 2px solid #d9534f;
+		color: #d9534f;
+	}
+</style>
diff --git a/src/lib/components/admin/Button.svelte b/src/lib/components/admin/Button.svelte
new file mode 100644
index 0000000..7507c2e
--- /dev/null
+++ b/src/lib/components/admin/Button.svelte
@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+
+	type BaseProps = {
+		variant?: 'primary' | 'secondary' | 'danger' | 'action';
+		size?: 'sm' | 'md';
+		fullWidth?: boolean;
+		class?: string;
+		children?: Snippet;
+	};
+
+	type ButtonProps = BaseProps &
+		HTMLButtonAttributes & {
+			href?: undefined;
+		};
+
+	type AnchorProps = BaseProps &
+		HTMLAnchorAttributes & {
+			href: string;
+		};
+
+	let {
+		variant = 'secondary',
+		size = 'md',
+		fullWidth = false,
+		href,
+		class: className = '',
+		children,
+		...rest
+	}: ButtonProps | AnchorProps = $props();
+
+	let baseClass = $derived.by(() => {
+		if (variant === 'action') {
+			return `action-btn ${className}`;
+		}
+		let c = `btn btn-${variant}`;
+		if (size === 'sm') c += ' btn-sm';
+		if (fullWidth) c += ' w-full';
+		return `${c} ${className}`;
+	});
+</script>
+
+{#if href !== undefined}
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+	<a {href} class={baseClass} {...rest as HTMLAnchorAttributes}>
+		{@render children?.()}
+	</a>
+{:else}
+	<button class={baseClass} {...rest as HTMLButtonAttributes}>
+		{@render children?.()}
+	</button>
+{/if}
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		padding: 10px 20px;
+		text-decoration: none;
+		font-size: 0.95rem;
+		font-weight: 600;
+		transition: all 0.3s ease;
+		cursor: pointer;
+		border: 1px solid var(--text-color);
+		background-color: transparent;
+		color: var(--text-color);
+		font-family: inherit;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+		line-height: 1;
+	}
+
+	.btn.w-full {
+		width: 100%;
+		text-align: center;
+	}
+
+	.btn-sm {
+		padding: 6px 12px;
+		font-size: 0.85rem;
+	}
+
+	.btn-primary {
+		background-color: var(--text-color);
+		color: var(--bg-color, #ffffff);
+	}
+
+	.btn-primary:hover {
+		background-color: var(--accent-color, #419b38);
+		border-color: var(--accent-color, #419b38);
+		color: white;
+	}
+
+	.btn-secondary:hover {
+		border-color: var(--accent-color, #419b38);
+		color: var(--accent-color, #419b38);
+	}
+
+	.btn-danger {
+		border-color: #d9534f;
+		color: #d9534f;
+	}
+
+	.btn-danger:hover {
+		background-color: #d9534f;
+		color: white;
+	}
+
+	.action-btn {
+		display: inline-block;
+		background: transparent;
+		border: none;
+		padding: 0;
+		margin: 0;
+		font-family: inherit;
+		font-size: 0.9rem;
+		font-weight: 500;
+		line-height: 1;
+		vertical-align: baseline;
+		color: var(--text-color);
+		cursor: pointer;
+		text-decoration: none;
+		transition:
+			color 0.2s,
+			text-decoration-color 0.2s;
+	}
+
+	.action-btn:hover {
+		color: var(--accent-color, #419b38);
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+
+	/* We can target .action-btn.delete directly via class prop */
+	:global(.action-btn.delete) {
+		color: var(--text-color);
+	}
+
+	:global(.action-btn.delete:hover) {
+		color: #d9534f;
+		text-decoration: underline;
+		text-underline-offset: 4px;
+	}
+</style>
diff --git a/src/lib/components/admin/DataTable.svelte b/src/lib/components/admin/DataTable.svelte
new file mode 100644
index 0000000..1e9154b
--- /dev/null
+++ b/src/lib/components/admin/DataTable.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<div class="table-container">
+	<table class="data-table">
+		{@render children()}
+	</table>
+</div>
+
+<style>
+	.table-container {
+		border: 2px solid var(--text-color);
+		overflow-x: auto;
+	}
+
+	.data-table {
+		width: 100%;
+		border-collapse: collapse;
+		text-align: left;
+	}
+
+	:global(.data-table th),
+	:global(.data-table td) {
+		padding: 16px 20px;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	:global(.data-table th) {
+		font-weight: 700;
+		text-transform: uppercase;
+		font-size: 0.9rem;
+		letter-spacing: 1px;
+		color: var(--text-color);
+		background-color: transparent;
+	}
+
+	:global(.data-table tr:last-child td) {
+		border-bottom: none;
+	}
+
+	:global(.data-table tbody tr) {
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.data-table tbody tr:hover) {
+		background-color: rgba(0, 0, 0, 0.02);
+	}
+</style>