diff --git a/README.md b/README.md
index 1341bbb..ec3dcf4 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,8 @@
 **@svelte-atoms/core** is a comprehensive Svelte component library that provides fundamental building blocks ("atoms") for creating sophisticated, interactive design systems. Each component is designed with accessibility, type safety, and developer experience in mind. Built with Svelte 5 runes for optimal reactivity and performance.
 
 [![npm version](https://img.shields.io/npm/v/@svelte-atoms/core.svg)](https://www.npmjs.com/package/@svelte-atoms/core)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/svelte-atoms/core)
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 
 ---
 
diff --git a/src/app.css b/src/app.css
index a765faa..a8b856e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -41,18 +41,18 @@
 	--secondary-foreground: oklch(0.205 0 0);
 	--muted: oklch(0.97 0 0);
 	--muted-foreground: oklch(0.556 0 0);
-	--accent: var(--palette-proton);
+	--accent: oklch(0.97 0 0);
 	--accent-foreground: oklch(0.205 0 0);
 	--destructive: oklch(0.577 0.245 27.325);
-	--destructive-foreground: oklch(1 0 0);
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
 	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.81 0.1 252);
-	--chart-2: oklch(0.62 0.19 260);
-	--chart-3: oklch(0.55 0.22 263);
-	--chart-4: oklch(0.49 0.22 264);
-	--chart-5: oklch(0.42 0.18 266);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
 	--sidebar: oklch(0.985 0 0);
 	--sidebar-foreground: oklch(0.145 0 0);
 	--sidebar-primary: oklch(0.205 0 0);
@@ -70,24 +70,22 @@
 		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
 		monospace;
 	--radius: 0.625rem;
-	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--shadow-x: 0px;
+	--shadow-y: 1px;
+	--shadow-blur: 2px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.18;
+	--shadow-color: hsl(0 0% 0%);
 	--tracking-normal: 0em;
 	--spacing: 0.25rem;
 }
 
 .dark {
-	--background: var(--palette-carbon);
+	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);
 	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.269 0 0);
+	--popover: oklch(0.205 0 0);
 	--popover-foreground: oklch(0.985 0 0);
 	--primary: oklch(0.922 0 0);
 	--primary-foreground: oklch(0.205 0 0);
@@ -95,26 +93,25 @@
 	--secondary-foreground: oklch(0.985 0 0);
 	--muted: oklch(0.269 0 0);
 	--muted-foreground: oklch(0.708 0 0);
-	--accent: var(--palette-proton);
+	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: oklch(0.704 0.191 22.216);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.275 0 0);
-	--input: oklch(0.325 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
 	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.81 0.1 252);
-	--chart-2: oklch(0.62 0.19 260);
-	--chart-3: oklch(0.55 0.22 263);
-	--chart-4: oklch(0.49 0.22 264);
-	--chart-5: oklch(0.42 0.18 266);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
 	--sidebar: oklch(0.205 0 0);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
 	--sidebar-accent: oklch(0.269 0 0);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.275 0 0);
-	--sidebar-ring: oklch(0.439 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
 	--font-sans:
 		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
@@ -123,15 +120,7 @@
 	--font-mono:
 		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
 		monospace;
-	--radius: 0.625rem;
-	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--shadow-color: hsl(0, 0%, 100%);
 }
 
 @theme inline {
diff --git a/src/docs/components/README.md b/src/docs/components/README.md
new file mode 100644
index 0000000..281832e
--- /dev/null
+++ b/src/docs/components/README.md
@@ -0,0 +1,290 @@
+# Documentation Components
+
+Reusable components for creating consistent, rich, and easy-to-maintain component documentation pages.
+
+## Components
+
+### PageHeader
+
+Displays the component title, description, and status badge.
+
+```svelte
+<PageHeader
+	title="Accordion"
+	description="Collapsible content sections for organizing information."
+	status="stable"
+/>
+```
+
+**Props:**
+
+- `title: string` - Component name
+- `description: string` - Component description
+- `status?: 'stable' | 'beta' | 'experimental' | 'deprecated'` - Status badge (default: 'stable')
+- `children?: Snippet` - Optional additional content
+
+---
+
+### Breadcrumb
+
+Navigation breadcrumb trail.
+
+```svelte
+<Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Accordion' }]} />
+```
+
+**Props:**
+
+- `items: Array<{ label: string; href?: string }>` - Breadcrumb items
+
+---
+
+### Section
+
+Section container with title and optional description.
+
+```svelte
+<Section title="Examples" description="Explore different variations">
+	<!-- Content -->
+</Section>
+```
+
+**Props:**
+
+- `title: string` - Section title
+- `description?: string` - Optional section description
+- `children: Snippet` - Section content
+- `class?: string` - Optional CSS classes
+
+---
+
+### Installation
+
+Installation and import instructions with copy functionality.
+
+```svelte
+<Installation
+	packageName="@svelte-atoms/core"
+	importCode="import {Accordion} from '@svelte-atoms/core/accordion';"
+/>
+```
+
+**Props:**
+
+- `packageName: string` - NPM package name
+- `importCode: string` - Import statement code
+
+---
+
+### FeatureGrid
+
+Grid display of component features with icons.
+
+```svelte
+<FeatureGrid
+	columns={2}
+	features={[
+		{
+			title: 'Fully Accessible',
+			description: 'Built with ARIA best practices...',
+			color: 'purple',
+			iconPath: '<svg>...</svg>'
+		}
+	]}
+/>
+```
+
+**Props:**
+
+- `features: Array<Feature>` - Array of features
+- `columns?: 1 | 2 | 3 | 4` - Grid columns (default: 2)
+
+**Feature Object:**
+
+- `title: string` - Feature title
+- `description: string` - Feature description
+- `color: 'purple' | 'blue' | 'green' | 'pink' | 'yellow' | 'red'` - Color theme
+- `icon?: Snippet` - Optional icon snippet
+- `iconPath?: string` - Optional icon SVG string (easier to use)
+
+---
+
+### AccessibilityInfo
+
+Accessibility features information panel.
+
+```svelte
+<AccessibilityInfo
+	features={['Proper ARIA attributes', 'Keyboard navigation support', 'Focus management']}
+/>
+```
+
+**Props:**
+
+- `features: string[]` - List of accessibility features
+- `title?: string` - Optional custom title (default: 'Built-in Accessibility Features')
+
+---
+
+### PageNavigation
+
+Previous/next page navigation links.
+
+```svelte
+<PageNavigation
+	prev={{ label: 'Back to Components', href: '/components' }}
+	next={{ label: 'Next: Button', href: '/components/button' }}
+/>
+```
+
+**Props:**
+
+- `prev?: { label: string; href: string }` - Previous page link
+- `next?: { label: string; href: string }` - Next page link
+
+---
+
+### DemoExample
+
+Interactive component example with preview and code display.
+
+```svelte
+<DemoExample
+	title="Basic Accordion"
+	description="Simple accordion with collapsible sections"
+	code={accordionCode}
+>
+	<Accordion>
+		<!-- Demo content -->
+	</Accordion>
+</DemoExample>
+```
+
+**Props:**
+
+- `title: string` - Example title
+- `description?: string` - Optional example description
+- `code: string` - Code to display
+- `children: Snippet` - Component preview/demo
+
+---
+
+### Props
+
+API reference table for component props.
+
+```svelte
+<Props
+	data={[
+		{
+			name: 'multiple',
+			type: 'boolean',
+			default: 'false',
+			description: 'Allow multiple panels open'
+		}
+	]}
+/>
+```
+
+**Props:**
+
+- `data: Array<PropItem>` - Array of prop definitions
+
+**PropItem Object:**
+
+- `name: string` - Prop name
+- `type: string` - TypeScript type
+- `default: string` - Default value
+- `description: string` - Prop description
+
+---
+
+## Usage Example
+
+```svelte
+<script lang="ts">
+	import { YourComponent } from '$lib/components/your-component';
+	import {
+		PageHeader,
+		Breadcrumb,
+		Section,
+		Installation,
+		FeatureGrid,
+		AccessibilityInfo,
+		PageNavigation,
+		DemoExample,
+		Props
+	} from '$docs/components';
+
+	const basicCode = `<YourComponent>
+  Basic usage
+</YourComponent>`;
+</script>
+
+<svelte:head>
+	<title>YourComponent - Atomic SV</title>
+	<meta name="description" content="Component description" />
+</svelte:head>
+
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
+	<Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'YourComponent' }]} />
+
+	<PageHeader title="YourComponent" description="What your component does" status="stable" />
+
+	<Section title="Installation">
+		<Installation
+			packageName="@svelte-atoms/core"
+			importCode="import {YourComponent} from '@svelte-atoms/core/your-component';"
+		/>
+	</Section>
+
+	<Section title="Examples">
+		<DemoExample title="Basic Example" code={basicCode}>
+			<YourComponent>Demo</YourComponent>
+		</DemoExample>
+	</Section>
+
+	<Section title="Features">
+		<FeatureGrid
+			features={[
+				/* features */
+			]}
+		/>
+	</Section>
+
+	<Section title="API Reference">
+		<Props
+			data={[
+				/* props */
+			]}
+		/>
+	</Section>
+
+	<Section title="Accessibility">
+		<AccessibilityInfo
+			features={[
+				/* features */
+			]}
+		/>
+	</Section>
+
+	<PageNavigation
+		prev={{ label: 'Previous', href: '/prev' }}
+		next={{ label: 'Next', href: '/next' }}
+	/>
+</div>
+```
+
+## Benefits
+
+✅ **Consistency** - All component pages follow the same structure  
+✅ **Maintainability** - Update one component, all pages benefit  
+✅ **Speed** - Create new documentation pages quickly  
+✅ **Rich Features** - Copy buttons, syntax highlighting, responsive design  
+✅ **Easy Updates** - Simple props interface for customization
+
+## See Also
+
+- [Component Documentation Template](../COMPONENT_DOCUMENTATION_TEMPLATE.md) - Full template and guidelines
+- [Accordion Example](../../src/routes/components/accordion/+page.svelte) - Complete working example
+- [Button Example](../../src/routes/components/button/+page.svelte) - Another example implementation
diff --git a/src/docs/components/accessibility-info.svelte b/src/docs/components/accessibility-info.svelte
new file mode 100644
index 0000000..e30eff3
--- /dev/null
+++ b/src/docs/components/accessibility-info.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	type Props = {
+		features: string[];
+		title?: string;
+	};
+
+	let { features, title = 'Built-in Accessibility Features' }: Props = $props();
+</script>
+
+<div class="rounded-lg border border-palette-ion/30 bg-palette-ion/10 p-6">
+	<div class="flex items-start">
+		<svg
+			class="mt-1 mr-3 h-6 w-6 flex-shrink-0 text-palette-ion"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+		<div>
+			<h3 class="text-foreground mb-2 text-lg font-semibold">{title}</h3>
+			<ul class="text-foreground/90 space-y-1">
+				{#each features as feature}
+					<li>• {feature}</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+</div>
diff --git a/src/docs/components/breadcrumb.svelte b/src/docs/components/breadcrumb.svelte
new file mode 100644
index 0000000..4992bfc
--- /dev/null
+++ b/src/docs/components/breadcrumb.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	type Props = {
+		items: Array<{ label: string; href?: string }>;
+	};
+
+	let { items }: Props = $props();
+</script>
+
+<nav class="text-muted-foreground mb-8 flex items-center space-x-2 text-sm">
+	{#each items as item, index}
+		{#if index > 0}
+			<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+				<path
+					fill-rule="evenodd"
+					d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+		{#if item.href}
+			<a href={item.href} class="hover:text-accent transition-colors">{item.label}</a>
+		{:else}
+			<span class="text-foreground">{item.label}</span>
+		{/if}
+	{/each}
+</nav>
diff --git a/src/docs/components/demo-example.svelte b/src/docs/components/demo-example.svelte
new file mode 100644
index 0000000..04f17eb
--- /dev/null
+++ b/src/docs/components/demo-example.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		title: string;
+		description?: string;
+		code: string;
+		children: Snippet;
+	};
+
+	let { title, description, code, children }: Props = $props();
+
+	let copySuccess = $state(false);
+
+	function copyToClipboard(text: string) {
+		navigator.clipboard.writeText(text);
+		copySuccess = true;
+		setTimeout(() => (copySuccess = false), 2000);
+	}
+</script>
+
+<div class="border-border overflow-hidden rounded-lg border">
+	<!-- Header -->
+	<div class="border-border bg-muted border-b px-6 py-4">
+		<h3 class="text-foreground text-lg font-semibold">{title}</h3>
+		{#if description}
+			<p class="text-muted-foreground mt-1 text-sm">{description}</p>
+		{/if}
+	</div>
+
+	<!-- Preview -->
+	<div class="bg-background p-6">
+		<div class="mx-auto max-w-2xl">
+			{@render children()}
+		</div>
+	</div>
+
+	<!-- Code -->
+	<div class="border-border bg-card border-t p-4">
+		<div class="mb-2 flex items-center justify-between">
+			<span class="text-muted-foreground text-sm">Code</span>
+			<button
+				class="text-muted-foreground hover:text-foreground transition-colors"
+				onclick={() => copyToClipboard(code)}
+			>
+				{#if copySuccess}
+					<svg
+						class="h-4 w-4 text-palette-electron"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M5 13l4 4L19 7"
+						/>
+					</svg>
+				{:else}
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+						/>
+					</svg>
+				{/if}
+			</button>
+		</div>
+		<pre class="text-foreground overflow-x-auto font-mono text-sm whitespace-pre-wrap">{code}</pre>
+	</div>
+</div>
diff --git a/src/docs/components/feature-grid.svelte b/src/docs/components/feature-grid.svelte
new file mode 100644
index 0000000..e0fb05d
--- /dev/null
+++ b/src/docs/components/feature-grid.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Feature = {
+		title: string;
+		description: string;
+		icon?: Snippet;
+		iconPath?: string;
+		color: 'purple' | 'blue' | 'green' | 'pink' | 'yellow' | 'red';
+	};
+
+	type Props = {
+		features: Feature[];
+		columns?: 1 | 2 | 3 | 4;
+	};
+
+	let { features, columns = 2 }: Props = $props();
+
+	const colorClasses = {
+		purple: {
+			gradient: 'from-accent/10 to-accent/20',
+			icon: 'bg-accent text-accent-foreground'
+		},
+		blue: {
+			gradient: 'from-palette-ion/10 to-palette-ion/20',
+			icon: 'bg-palette-ion text-foreground'
+		},
+		green: {
+			gradient: 'from-palette-electron/10 to-palette-electron/20',
+			icon: 'bg-palette-electron text-foreground'
+		},
+		pink: {
+			gradient: 'from-palette-fusion/10 to-palette-fusion/20',
+			icon: 'bg-palette-fusion text-foreground'
+		},
+		yellow: {
+			gradient: 'from-palette-energy/10 to-palette-energy/20',
+			icon: 'bg-palette-energy text-foreground'
+		},
+		red: {
+			gradient: 'from-destructive/10 to-destructive/20',
+			icon: 'bg-destructive text-destructive-foreground'
+		}
+	};
+
+	const gridCols = {
+		1: 'grid-cols-1',
+		2: 'grid-cols-1 md:grid-cols-2',
+		3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+		4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
+	};
+</script>
+
+<div class="grid {gridCols[columns]} gap-6">
+	{#each features as feature}
+		<div
+			class="border-border rounded-lg border bg-gradient-to-br {colorClasses[feature.color]
+				.gradient} p-6 transition-transform hover:scale-[1.02]"
+		>
+			<div
+				class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg {colorClasses[
+					feature.color
+				].icon}"
+			>
+				{#if feature.icon}
+					{@render feature.icon()}
+				{:else if feature.iconPath}
+					{@html feature.iconPath}
+				{/if}
+			</div>
+			<h3 class="text-foreground mb-2 text-lg font-semibold">{feature.title}</h3>
+			<p class="text-muted-foreground text-sm">{feature.description}</p>
+		</div>
+	{/each}
+</div>
diff --git a/src/docs/components/index.ts b/src/docs/components/index.ts
new file mode 100644
index 0000000..c2d5269
--- /dev/null
+++ b/src/docs/components/index.ts
@@ -0,0 +1,9 @@
+export { default as PageHeader } from './page-header.svelte';
+export { default as Breadcrumb } from './breadcrumb.svelte';
+export { default as Section } from './section.svelte';
+export { default as Installation } from './installation.svelte';
+export { default as FeatureGrid } from './feature-grid.svelte';
+export { default as AccessibilityInfo } from './accessibility-info.svelte';
+export { default as PageNavigation } from './page-navigation.svelte';
+export { default as DemoExample } from './demo-example.svelte';
+export { default as Props } from '../props-datagrid.svelte';
diff --git a/src/docs/components/installation.svelte b/src/docs/components/installation.svelte
new file mode 100644
index 0000000..e85ae54
--- /dev/null
+++ b/src/docs/components/installation.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Button } from '$lib/components/button';
+	import { Icon } from '$lib/components/icon';
+
+	type Props = {
+		packageName: string;
+		importCode: string;
+	};
+
+	let { packageName, importCode }: Props = $props();
+
+	let copySuccess = $state(false);
+
+	function copyToClipboard(text: string) {
+		navigator.clipboard.writeText(text);
+		copySuccess = true;
+		setTimeout(() => (copySuccess = false), 2000);
+	}
+</script>
+
+<div class="space-y-4">
+	<!-- NPM Install -->
+	<div class="border-border bg-card rounded-lg border p-4">
+		<div class="mb-2 flex items-center justify-between">
+			<span class="text-muted-foreground text-sm">Install Package</span>
+			<Button
+				class="text-muted-foreground hover:text-foreground transition-colors"
+				onclick={() => copyToClipboard(`npm install ${packageName}`)}
+			>
+				{#if copySuccess}
+					<Icon name="check" class="h-4 w-4 text-palette-electron" />
+				{:else}
+					<Icon name="copy" class="h-4 w-4" />
+				{/if}
+			</Button>
+		</div>
+		<code class="text-foreground font-mono text-sm">
+			<span class="text-accent">npm install</span>
+			<span class="text-palette-electron">{packageName}</span>
+		</code>
+	</div>
+
+	<!-- Import Code -->
+	<div class="border-border bg-card rounded-lg border p-4">
+		<div class="mb-2 flex items-center justify-between">
+			<span class="text-muted-foreground text-sm">Import</span>
+			<Button
+				class="text-muted-foreground hover:text-foreground transition-colors"
+				onclick={() => copyToClipboard(importCode)}
+			>
+				{#if copySuccess}
+					<Icon name="check" class="h-4 w-4 text-palette-electron" />
+				{:else}
+					<Icon name="copy" class="h-4 w-4" />
+				{/if}
+			</Button>
+		</div>
+		<pre class="text-foreground font-mono text-sm">{importCode}</pre>
+	</div>
+</div>
diff --git a/src/docs/components/page-header.svelte b/src/docs/components/page-header.svelte
new file mode 100644
index 0000000..c60d7d0
--- /dev/null
+++ b/src/docs/components/page-header.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import Badge from '$lib/components/badge/badge.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		title: string;
+		description: string;
+		status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+		children?: Snippet;
+	};
+
+	let { title, description, status = 'stable', children }: Props = $props();
+
+	const statusStyles = {
+		stable: 'bg-green-100 text-green-800',
+		beta: 'bg-blue-100 text-blue-800',
+		experimental: 'bg-yellow-100 text-yellow-800',
+		deprecated: 'bg-red-100 text-red-800'
+	};
+</script>
+
+<div class="mb-12">
+	<div class="mb-4 flex items-center gap-4">
+		<h1 class="text-foreground text-4xl font-bold md:text-5xl">{title}</h1>
+		<Badge class="{statusStyles[status]} px-3 py-1 capitalize">{status}</Badge>
+	</div>
+	<p class="text-muted-foreground max-w-3xl text-xl">
+		{description}
+	</p>
+	{#if children}
+		<div class="mt-4">
+			{@render children()}
+		</div>
+	{/if}
+</div>
diff --git a/src/docs/components/page-navigation.svelte b/src/docs/components/page-navigation.svelte
new file mode 100644
index 0000000..879ddc5
--- /dev/null
+++ b/src/docs/components/page-navigation.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	type Props = {
+		prev?: { label: string; href: string };
+		next?: { label: string; href: string };
+	};
+
+	let { prev, next }: Props = $props();
+</script>
+
+<div class="border-border flex items-center justify-between border-t pt-8">
+	{#if prev}
+		<a
+			href={prev.href}
+			class="text-accent hover:text-accent/80 inline-flex items-center transition-colors"
+		>
+			<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+			{prev.label}
+		</a>
+	{:else}
+		<div></div>
+	{/if}
+
+	{#if next}
+		<a
+			href={next.href}
+			class="text-accent hover:text-accent/80 inline-flex items-center transition-colors"
+		>
+			{next.label}
+			<svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+			</svg>
+		</a>
+	{/if}
+</div>
diff --git a/src/docs/components/section.svelte b/src/docs/components/section.svelte
new file mode 100644
index 0000000..e17500f
--- /dev/null
+++ b/src/docs/components/section.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		title: string;
+		description?: string;
+		children: Snippet;
+		class?: string;
+	};
+
+	let { title, description, children, class: className = '' }: Props = $props();
+</script>
+
+<section class="mb-12 {className}">
+	<div class="mb-6">
+		<h2 class="text-foreground text-2xl font-bold">{title}</h2>
+		{#if description}
+			<p class="text-muted-foreground mt-2">{description}</p>
+		{/if}
+	</div>
+	{@render children()}
+</section>
diff --git a/src/docs/index.ts b/src/docs/index.ts
index e69de29..1ba17a2 100644
--- a/src/docs/index.ts
+++ b/src/docs/index.ts
@@ -0,0 +1,2 @@
+export * as Preview from './preview';
+export * from './components';
diff --git a/src/docs/props-datagrid.svelte b/src/docs/props-datagrid.svelte
index 72d5295..6b56133 100644
--- a/src/docs/props-datagrid.svelte
+++ b/src/docs/props-datagrid.svelte
@@ -4,24 +4,24 @@
 	let { data = [] } = $props();
 </script>
 
-<div class="overflow-x-auto rounded-lg border border-gray-200 bg-white">
+<div class="border-border bg-card overflow-x-auto rounded-lg border">
 	<DataGrid.Root class="min-w-full">
-		<DataGrid.Header class="bg-gray-50">
+		<DataGrid.Header class="bg-muted">
 			<DataGrid.Tr>
 				<DataGrid.Th
-					class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+					class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
 					>Prop</DataGrid.Th
 				>
 				<DataGrid.Th
-					class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+					class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
 					>Type</DataGrid.Th
 				>
 				<DataGrid.Th
-					class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+					class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
 					>Default</DataGrid.Th
 				>
 				<DataGrid.Th
-					class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+					class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
 					width="2fr">Description</DataGrid.Th
 				>
 			</DataGrid.Tr>
@@ -30,16 +30,16 @@
 		<DataGrid.Body>
 			{#each data as item (item)}
 				<DataGrid.Tr>
-					<DataGrid.Td class="px-6 py-4 font-mono text-sm whitespace-nowrap text-purple-600"
+					<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
 						>{item.name}</DataGrid.Td
 					>
-					<DataGrid.Td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600"
+					<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
 						>{item.type}</DataGrid.Td
 					>
-					<DataGrid.Td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600"
+					<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
 						>{item.default}</DataGrid.Td
 					>
-					<DataGrid.Td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600"
+					<DataGrid.Td class="text-foreground px-6 py-4 text-sm whitespace-nowrap"
 						>{item.description}</DataGrid.Td
 					>
 				</DataGrid.Tr>
diff --git a/src/knowledge/philosophy.md b/src/knowledge/philosophy.md
deleted file mode 100644
index fbf049b..0000000
--- a/src/knowledge/philosophy.md
+++ /dev/null
@@ -1,23 +0,0 @@
-The Atomic Svelte philosophy is centered around creating a modular, composable UI library that treats components as fundamental building blocks. Here are the core principles:
-
-# 🧱 Atomic Architecture
-
-The philosophy is built around the concept of "atoms" - self-contained, reusable UI components that encapsulate their own state and DOM management. Think of it like chemistry: components are the basic elements that can be combined to create more complex molecules (UI patterns).
-
-# Core Structure
-
-Atoms: The smallest composable UI pieces - fundamental building blocks
-Bonds: The logic that holds atoms together and enables synchronization between them
-Protons, Neutrons, Electrons: Functions that can be attached to atoms to add incremental functionality
-
-# Key Philosophy Points
-
-🔗 Context-Driven Communication: Components communicate through Svelte's context API, enabling powerful parent-child relationships without prop drilling.
-
-- ♿ Accessibility First: Every component includes proper ARIA attributes, keyboard navigation, and focus management out of the box.
-- 🎨 Headless & Stylable: Components are headless by default, giving you complete control over styling while providing sensible defaults.
-- ⚡ Reactive by Design: Leverages Svelte's fine-grained reactivity system for optimal performance and smooth user interactions.
-- 🔧 Highly Extensible: Easily extend components with custom behaviors, animations, and styling while maintaining core functionality.
-- 🎯 Type Safety: Fully written in TypeScript with comprehensive type definitions for a robust development experience.
-
-The philosophy treats the library as "raw material" - providing low-level, customizable, scalable UI components that teams can use to build their own custom design systems rather than prescriptive, opinionated components. This approach gives developers maximum flexibility while ensuring consistency and accessibility across their applications.
diff --git a/src/knowledge/usage.md b/src/knowledge/usage.md
deleted file mode 100644
index 32a83df..0000000
--- a/src/knowledge/usage.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# Component Usage Patterns
-
-## Namespace.Atom Pattern
-
-Components follow a hierarchical naming pattern using dot notation:
-
-```svelte
-<Form.Root>
-	<Form.Field>
-		<Form.Label />
-		<Form.Control />
-	</Form.Field>
-</Form.Root>
-```
-
-## Naming Convention
-
-- **Namespace** = Component family (e.g., `Form`, `Button`, `Dropdown`)
-- **Atom** = Specific component within the family (e.g., `Root`, `Field`, `Label`)
-
-## Import Pattern
-
-```javascript
-import { Form } from '$lib/components/form';
-
-// Usage
-<Form.Root>
-	<Form.Field>
-		<Form.Label>Username</Form.Label>
-		<Form.Control type="text" />
-	</Form.Field>
-</Form.Root>;
-```
-
-## Benefits
-
-- **Clear hierarchy** - Components group logically
-- **Namespace isolation** - Prevents naming conflicts
-- **Discoverable API** - IDE autocomplete shows related components
-- **Consistent patterns** - Same structure across all component families
-
-## Examples
-
-- `Button.Root`, `Button.Icon`, `Button.Text`
-- `Dropdown.Root`, `Dropdown.Trigger`, `Dropdown.Content`
-- `Form.Root`, `Form.Field`, `Form.Label`, `Form.Control`
diff --git a/src/lib/components/atom/html-atom.svelte b/src/lib/components/atom/html-atom.svelte
index 6b1f40b..2d0e0c5 100644
--- a/src/lib/components/atom/html-atom.svelte
+++ b/src/lib/components/atom/html-atom.svelte
@@ -96,7 +96,9 @@
 		};
 	});
 
-	const _klass = $derived([compilePresetPlaceholder(klass), mergedVariants?.class ?? '']);
+	const _klass = $derived(
+		cn(klass, mergedVariants?.class ?? '').replaceAll('$preset', cn(preset?.class))
+	);
 
 	const _base = $derived(base ?? preset?.base);
 	const _as = $derived(as ?? preset?.as);
@@ -121,24 +123,6 @@
 
 	const Component = $derived(base ?? atom) as ComponentBase;
 
-	function compilePresetPlaceholder(klass: ClassValue): ReturnType<typeof toClassValue> {
-		if (Array.isArray(klass)) {
-			return klass.map((k) => compilePresetPlaceholder(k));
-		}
-
-		const compiled = toClassValue.apply(bond, [klass, bond]);
-
-		if (Array.isArray(compiled)) {
-			return compiled.map((c) => compilePresetPlaceholder(c));
-		}
-
-		if (typeof compiled === 'string') {
-			return compiled.replace('$preset', cn(preset?.class));
-		}
-
-		return compiled;
-	}
-
 	/**
 	 * Resolve variant definition to props
 	 */
diff --git a/src/lib/components/button/types.ts b/src/lib/components/button/types.ts
index b20fc7b..bda24d0 100644
--- a/src/lib/components/button/types.ts
+++ b/src/lib/components/button/types.ts
@@ -1,4 +1,4 @@
-import type { HtmlAtomProps } from '$lib/helpers';
+import type { HtmlAtomProps } from '$svelte-atoms/core/components/atom/types';
 import type { Snippet } from 'svelte';
 
 export type ButtonProps = HtmlAtomProps<'button'> & {
diff --git a/src/lib/components/checkbox/checkbox.svelte b/src/lib/components/checkbox/checkbox.svelte
index 96a0fcf..b2ef9d6 100644
--- a/src/lib/components/checkbox/checkbox.svelte
+++ b/src/lib/components/checkbox/checkbox.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
+	import { circOut } from 'svelte/easing';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { scale } from 'svelte/transition';
-	import type { CheckboxProps } from './types';
 	import { Icon } from '$svelte-atoms/core/components/icon';
 	import { HtmlAtom } from '$svelte-atoms/core/components/atom';
 	import CheckmarkRegularIcon from '$svelte-atoms/core/icons/icon-checkmark.svelte';
-	import './checkbox.css';
 	import { DURATION } from '$svelte-atoms/core/shared';
-	import { circOut } from 'svelte/easing';
+	import type { CheckboxProps } from './types';
+	import './checkbox.css';
 
 	let {
 		class: klass = '',
 		checked = $bindable(false),
-		indeterminate = $bindable(),
+		indeterminate = $bindable(false),
 		value = $bindable(undefined),
 		group = $bindable([]),
 		id,
+		name,
 		checkedContent,
 		indeterminateContent,
 		enter,
@@ -31,29 +32,25 @@
 
 	let checkboxElement: HTMLInputElement | undefined = $state();
 
-	function handleChange(ev: Event) {
-		const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
+	// Computed state for visual representation
+	const isChecked = $derived(checked === true);
+	const isIndeterminate = $derived(indeterminate === true);
+	const showCheckmark = $derived(isChecked && !isIndeterminate);
 
+	function handleChange(ev: Event) {
 		onchange?.(ev, {
-			checked,
+			checked: checked,
 			value: checked,
 			type: 'boolean'
 		});
 	}
 
 	function handleInput(ev: Event) {
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-		const _checked = currentTarget?.checked ?? false;
-
 		oninput?.(ev, {
-			checked: _checked,
-			value: _checked,
+			checked: checked,
+			value: checked,
 			type: 'boolean'
 		});
-
-		if (ev.defaultPrevented) {
-			return;
-		}
 	}
 
 	function handleClick(ev: MouseEvent) {
@@ -63,7 +60,18 @@
 			return;
 		}
 
-		checkboxElement?.click();
+		// Handle indeterminate → checked → unchecked cycle
+		if (indeterminate) {
+			// Indeterminate → checked
+			indeterminate = false;
+			checked = true;
+		} else {
+			// Toggle checked state
+			checked = !checked;
+		}
+
+		// Trigger input event manually if needed
+		handleInput(ev);
 	}
 </script>
 
@@ -71,15 +79,16 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <HtmlAtom
 	preset="checkbox"
-	as="button"
+	as="div"
 	class={[
-		'checkbox-root border-border outline-primary bg-foreground/5 aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
-		checked && 'bg-foreground',
-		!checked && '',
+		'checkbox-root border-border outline-primary bg-input text-foreground aspect-square h-5 w-fit cursor-pointer rounded-sm border outline-0 outline-offset-2 transition-colors duration-100',
+		isChecked && 'bg-foreground',
 		'$preset',
 		klass,
 		'relative'
 	]}
+	role="checkbox"
+	aria-checked={isIndeterminate ? 'mixed' : isChecked}
 	{enter}
 	{exit}
 	{initial}
@@ -87,6 +96,7 @@
 	{...restProps}
 >
 	<input
+		bind:this={checkboxElement}
 		bind:checked
 		bind:group
 		bind:indeterminate
@@ -94,34 +104,35 @@
 		class="checkbox-input pointer-events-none"
 		{value}
 		{id}
+		{name}
 		onchange={handleChange}
 		oninput={handleInput}
 		{onblur}
 		{onfocus}
 		hidden
-		{@attach (node) => {
-			checkboxElement = node;
-		}}
+		tabindex="-1"
 	/>
 
-	{#if indeterminate}
+	{#if isIndeterminate}
 		{#if indeterminateContent}
 			<HtmlAtom
 				preset="checkbox.indeterminate"
-				class={['checkbox-indeterminate flex size-full items-center justify-center p-1']}
+				class={[
+					'checkbox-indeterminate pointer-events-none flex size-full items-center justify-center p-1'
+				]}
 				base={indeterminateContent}
 			/>
 		{:else}
 			<HtmlAtom
 				preset="checkbox.indeterminate"
 				class={[
-					'checkbox-indeterminate text-foreground flex size-full items-center justify-center p-1'
+					'checkbox-indeterminate text-foreground pointer-events-none flex size-full items-center justify-center  p-1'
 				]}
 			>
 				<div class={['size-full rounded-xs bg-current']}></div>
 			</HtmlAtom>
 		{/if}
-	{:else if checked === true}
+	{:else if showCheckmark}
 		{#if checkedContent}
 			<HtmlAtom
 				preset="checkbox.checkmark"
diff --git a/src/lib/components/dialog/dialog-content.svelte b/src/lib/components/dialog/dialog-content.svelte
index ddae726..215ff26 100644
--- a/src/lib/components/dialog/dialog-content.svelte
+++ b/src/lib/components/dialog/dialog-content.svelte
@@ -7,8 +7,9 @@
 
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import { animate as motion } from 'motion';
-	import { DialogBond } from './bond.svelte';
+	import { DURATION } from '$svelte-atoms/core/shared';
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import { DialogBond } from './bond.svelte';
 
 	const bond = DialogBond.get();
 
@@ -32,20 +33,16 @@
 	const open = $derived(bond?.state?.props?.open ?? false);
 
 	function _animate(node: HTMLElement) {
+		if (open) {
+			bond?.elements.root?.show?.();
+		}
+
 		motion(
 			node,
 			{ scale: 0.9 + 0.1 * +open, opacity: +open },
 			{
-				duration: 0.3,
-				ease: 'anticipate',
-				onComplete: () => {
-					if (!open) {
-						const root = bond?.elements.root;
-
-						root?.close?.();
-						console.log(root);
-					}
-				}
+				duration: DURATION.normal / 1000,
+				ease: 'anticipate'
 			}
 		);
 	}
diff --git a/src/lib/components/dialog/dialog-root.svelte b/src/lib/components/dialog/dialog-root.svelte
index 3b8f3f3..2756221 100644
--- a/src/lib/components/dialog/dialog-root.svelte
+++ b/src/lib/components/dialog/dialog-root.svelte
@@ -13,10 +13,11 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
 	import type { Snippet } from 'svelte';
 	import { animate as motion } from 'motion';
-	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
 	import { Teleport, ActivePortal } from '$svelte-atoms/core/components/portal';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
 	import type { HtmlAtomProps, Base } from '$svelte-atoms/core/components/atom';
+	import { DURATION } from '$svelte-atoms/core/shared';
+	import { DialogBond, DialogBondState, type DialogBondProps } from './bond.svelte';
 
 	let {
 		class: klass = '',
@@ -59,19 +60,21 @@
 	}
 
 	function _animate(node: HTMLDialogElement) {
-		if (open) {
-			bond.elements.root?.show?.();
-			motion(
-				node,
-				{
-					opacity: +open
-				},
-				{
-					duration: 0,
-					ease: 'anticipate'
+		motion(
+			node,
+			{
+				opacity: +open
+			},
+			{
+				duration: DURATION.normal / 1000,
+				ease: 'anticipate',
+				onComplete: () => {
+					if (!open) {
+						node?.close?.();
+					}
 				}
-			);
-		}
+			}
+		);
 	}
 
 	function onclickDialogElement(ev: MouseEvent) {
diff --git a/src/lib/components/dropdown/dropdown-value.svelte b/src/lib/components/dropdown/dropdown-value.svelte
index e3decc9..511d6f0 100644
--- a/src/lib/components/dropdown/dropdown-value.svelte
+++ b/src/lib/components/dropdown/dropdown-value.svelte
@@ -28,8 +28,6 @@
 		ev.preventDefault();
 		ev.stopPropagation();
 
-		console.log('unselect', value);
-
 		bond?.state.unselect([value]);
 	}
 </script>
diff --git a/src/lib/components/dropdown/item/bond.svelte.ts b/src/lib/components/dropdown/item/bond.svelte.ts
index 0351608..252f106 100644
--- a/src/lib/components/dropdown/item/bond.svelte.ts
+++ b/src/lib/components/dropdown/item/bond.svelte.ts
@@ -2,6 +2,7 @@ import type { PopoverStateProps } from '$svelte-atoms/core/components/popover/bo
 import { getContext, setContext } from 'svelte';
 import { Bond, BondState, type BondStateProps } from '$svelte-atoms/core/shared/bond.svelte';
 import { DropdownBond, DropdownBondState } from '../bond.svelte';
+import { createAttachmentKey } from 'svelte/attachments';
 
 export type DropdownItemBondProps<T> = BondStateProps & {
 	value: string;
@@ -62,6 +63,15 @@ export class DropdownItemBond<T = unknown> extends Bond<
 		return DropdownItemBond.set<T>(this) as this;
 	}
 
+	root() {
+		return {
+			'data-selected': this.state.isSelected,
+			[createAttachmentKey()]: (node: HTMLElement) => {
+				this.elements.root = node;
+			}
+		};
+	}
+
 	static get(): DropdownItemBond | undefined {
 		return getContext(DropdownItemBond.CONTEXT_KEY);
 	}
diff --git a/src/lib/components/dropdown/item/dropdown-item.svelte b/src/lib/components/dropdown/item/dropdown-item.svelte
index f30f7ff..f94b87d 100644
--- a/src/lib/components/dropdown/item/dropdown-item.svelte
+++ b/src/lib/components/dropdown/item/dropdown-item.svelte
@@ -41,6 +41,11 @@
 	const unmount = bond.mount();
 	$effect(() => unmount);
 
+	const rootProps = $derived({
+		...bond?.root?.(),
+		...restProps
+	});
+
 	function _factory() {
 		const item = dropdown?.state.item(value);
 
@@ -56,7 +61,7 @@
 		return new DropdownItemBond(bondState);
 	}
 
-	function _onclick(ev: MouseEvent) {
+	function handleClick(ev: MouseEvent) {
 		onclick?.(ev);
 
 		if (ev.defaultPrevented) {
@@ -76,12 +81,11 @@
 </script>
 
 <Item
-	{@attach (node) => (bond.elements.root = node)}
 	{bond}
 	{preset}
 	class={[
-		bond.state.isHighlighted && 'bg-foreground/10',
-		bond.state.isSelected && 'bg-accent/10',
+		bond.state.isHighlighted && 'bg-foreground/5',
+		bond.state.isSelected && 'bg-primary/5 hover:bg-primary/10 active:bg-primary/15',
 		'$preset',
 		klass
 	]}
@@ -91,8 +95,8 @@
 	animate={animate?.bind(bond.state)}
 	onmount={onmount?.bind(bond.state)}
 	ondestroy={ondestroy?.bind(bond.state)}
-	onclick={_onclick}
-	{...restProps}
+	onclick={handleClick}
+	{...rootProps}
 >
 	{@render children?.({ dropdownItem: bond })}
 </Item>
diff --git a/src/lib/components/form/field/bond.svelte.ts b/src/lib/components/form/field/bond.svelte.ts
index b186496..e8dbe23 100644
--- a/src/lib/components/form/field/bond.svelte.ts
+++ b/src/lib/components/form/field/bond.svelte.ts
@@ -76,6 +76,10 @@ export type FieldStateProps<
 	readonly: boolean;
 	name?: string;
 	value?: Value;
+	files?: File[];
+	date?: Date | null;
+	number?: number;
+	checked?: boolean;
 	schema?: Schema;
 	validator?: ValidationAdapter<Schema, Value>;
 	onvalidation?: (errors: ValidationError[]) => void;
@@ -158,7 +162,7 @@ export class FieldBondState<
 	constructor(props: () => Props) {
 		super(props);
 
-		this.#form = FormBond.get().state;
+		this.#form = FormBond.get()?.state;
 
 		if (!this.#form) {
 			throw new Error(
@@ -171,6 +175,22 @@ export class FieldBondState<
 		return this.props.value;
 	}
 
+	get files() {
+		return this.props.files;
+	}
+
+	get date() {
+		return this.props.date;
+	}
+
+	get number() {
+		return this.props.number;
+	}
+
+	get checked() {
+		return this.props.checked;
+	}
+
 	get errors() {
 		return [...this.#errors];
 	}
diff --git a/src/lib/components/form/field/field-control.svelte b/src/lib/components/form/field/field-control.svelte
index 33e3f9b..e8ef4b6 100644
--- a/src/lib/components/form/field/field-control.svelte
+++ b/src/lib/components/form/field/field-control.svelte
@@ -26,6 +26,9 @@
 		class: klass = '',
 		value = $bindable(),
 		checked = $bindable(),
+		number = $bindable(),
+		date = $bindable(),
+		files = $bindable(),
 		children = undefined,
 		oninput = undefined,
 		...restProps
@@ -41,6 +44,10 @@
 		}
 
 		bond.state.props.value = value = detail?.value;
+		bond.state.props.files = files = detail?.files ?? [];
+		bond.state.props.date = date = detail?.date ?? null;
+		bond.state.props.number = number = detail?.number ?? null;
+		bond.state.props.checked = checked = detail?.checked ?? false;
 	}
 </script>
 
diff --git a/src/lib/components/form/form.stories.svelte b/src/lib/components/form/form.stories.svelte
index f5ba2be..79ea79f 100644
--- a/src/lib/components/form/form.stories.svelte
+++ b/src/lib/components/form/form.stories.svelte
@@ -72,7 +72,7 @@
 
 				<div class="flex flex-col">
 					<Field.Root name="is admin" schema={personSchema.shape.isAdmin}>
-						<Field.Label>Is Admin</Field.Label>
+						<Field.Label>Is Admin?</Field.Label>
 						<Field.Control base={Checkbox} />
 					</Field.Root>
 				</div>
diff --git a/src/lib/components/input/input-root.svelte b/src/lib/components/input/input-root.svelte
index a98d235..af4a8e8 100644
--- a/src/lib/components/input/input-root.svelte
+++ b/src/lib/components/input/input-root.svelte
@@ -1,17 +1,9 @@
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
 	import { InputBond, InputState, type InputStateProps } from './bond.svelte';
-	import { defineProperty, defineState, toClassValue } from '$svelte-atoms/core/utils';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '$svelte-atoms/core/components/atom';
+	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import type { InputRootProps } from './types';
 
-	type Element = ElementType<E>;
-
 	let {
 		class: klass = '',
 		value,
@@ -69,7 +61,7 @@
 <HtmlAtom
 	{preset}
 	class={[
-		'border-border text-foreground bg-input relative flex h-10 items-center overflow-hidden rounded-md border',
+		'border-border text-foreground bg-input relative flex h-10 w-auto items-center overflow-hidden rounded-md border',
 		'$preset',
 		klass
 	]}
diff --git a/src/lib/components/popover/bond.svelte.ts b/src/lib/components/popover/bond.svelte.ts
index b379279..dd20462 100644
--- a/src/lib/components/popover/bond.svelte.ts
+++ b/src/lib/components/popover/bond.svelte.ts
@@ -254,7 +254,7 @@ function popover(bond: PopoverBond) {
 			return;
 		}
 
-		node.style.minWidth = bond.elements.trigger.clientWidth + 'px';
+		bond.elements.content.style.minWidth = bond.elements.trigger.clientWidth + 'px';
 
 		const middleware: ComputePositionConfig['middleware'] = [];
 
diff --git a/src/lib/components/popover/popover-content.svelte b/src/lib/components/popover/popover-content.svelte
index 387bc56..029339a 100644
--- a/src/lib/components/popover/popover-content.svelte
+++ b/src/lib/components/popover/popover-content.svelte
@@ -28,6 +28,7 @@
 	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
 	import type { HtmlElementTagName, HtmlElementType } from '$svelte-atoms/core/components/element';
 	import { PopoverBond } from './bond.svelte';
+	import { DURATION } from '$svelte-atoms/core/shared';
 
 	type Element = HtmlElementType<E>;
 
@@ -110,7 +111,7 @@
 				opacity: +isOpen,
 				y: (isOpen ? 0 : -1) * dy * 8
 			},
-			{ duration: 0.2 }
+			{ duration: DURATION.fast / 1000 }
 		);
 	}
 </script>
@@ -130,7 +131,7 @@
 		{bond}
 		preset="popover.content"
 		class={[
-			'popover-content bg-background border-border rounded-md border p-2 opacity-0 shadow-lg',
+			'popover-content bg-popover text-popover-foreground border-border rounded-md border p-2 opacity-0 shadow-lg',
 			'$preset',
 			klass
 		]}
diff --git a/src/lib/components/radio/radio-group.stories.svelte b/src/lib/components/radio/radio-group.stories.svelte
index 96d6711..241e084 100644
--- a/src/lib/components/radio/radio-group.stories.svelte
+++ b/src/lib/components/radio/radio-group.stories.svelte
@@ -20,22 +20,22 @@
 				<div class="flex h-full w-full flex-col items-center justify-center">
 					<RadioGroupComponent class="gap-4" name="choice" bind:value>
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t1" />
+							<RadioComponent class="size-8" value="t1" />
 							<div>Test 1</div>
 						</label>
 
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t2" />
+							<RadioComponent class="size-8" value="t2" />
 							<div>Test 2</div>
 						</label>
 
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t3" />
+							<RadioComponent class="size-8" value="t3" />
 							<div>Test 3</div>
 						</label>
 
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t4" />
+							<RadioComponent class="size-8" value="t4" />
 							<div>Test 4</div>
 						</label>
 					</RadioGroupComponent>
diff --git a/src/lib/components/radio/radio.svelte b/src/lib/components/radio/radio.svelte
index 8e204d9..23dbc9a 100644
--- a/src/lib/components/radio/radio.svelte
+++ b/src/lib/components/radio/radio.svelte
@@ -72,7 +72,7 @@
 <Stack.Root
 	preset="radio"
 	class={[
-		'text-foreground box-border inline-flex aspect-square size-4 max-w-fit cursor-pointer place-items-center rounded-full border p-[3px]',
+		'text-foreground bg-input box-border inline-flex aspect-square size-4 max-w-fit cursor-pointer place-items-center rounded-full border p-0',
 		isDisabled && 'pointer-events-none opacity-50',
 		'$preset',
 		toClassValue.apply(null, [klass, {}])
@@ -99,11 +99,11 @@
 	{#if isChecked}
 		{#if checkedContent}
 			<HtmlAtom
-				class="rounded-inherit pointer-events-none size-full bg-current"
+				class="rounded-inherit pointer-events-none size-1/2 bg-current"
 				base={checkedContent}
 			/>
 		{:else}
-			<Stack.Item class="rounded-inherit pointer-events-none size-full bg-current"></Stack.Item>
+			<Stack.Item class="rounded-inherit pointer-events-none size-1/2 bg-current"></Stack.Item>
 		{/if}
 	{/if}
 </Stack.Root>
diff --git a/src/lib/components/root/root.css b/src/lib/components/root/root.css
index 5b5f183..b29485f 100644
--- a/src/lib/components/root/root.css
+++ b/src/lib/components/root/root.css
@@ -20,11 +20,12 @@
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
 	--ring: oklch(0.708 0 0);
-	--chart-1: oklch(0.81 0.1 252);
-	--chart-2: oklch(0.62 0.19 260);
-	--chart-3: oklch(0.55 0.22 263);
-	--chart-4: oklch(0.49 0.22 264);
-	--chart-5: oklch(0.42 0.18 266);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
 	--sidebar: oklch(0.985 0 0);
 	--sidebar-foreground: oklch(0.145 0 0);
 	--sidebar-primary: oklch(0.205 0 0);
@@ -33,23 +34,13 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
-	--font-sans:
-		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-		'Segoe UI Symbol', 'Noto Color Emoji';
-	--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-	--font-mono:
-		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-		monospace;
 	--radius: 0.625rem;
-	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--shadow-x: 0px;
+	--shadow-y: 1px;
+	--shadow-blur: 2px;
+	--shadow-spread: 0px;
+	--shadow-opacity: 0.18;
+	--shadow-color: hsl(0 0% 0%);
 	--tracking-normal: 0em;
 	--spacing: 0.25rem;
 }
@@ -59,7 +50,7 @@
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);
 	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.269 0 0);
+	--popover: oklch(0.205 0 0);
 	--popover-foreground: oklch(0.985 0 0);
 	--primary: oklch(0.922 0 0);
 	--primary-foreground: oklch(0.205 0 0);
@@ -67,43 +58,27 @@
 	--secondary-foreground: oklch(0.985 0 0);
 	--muted: oklch(0.269 0 0);
 	--muted-foreground: oklch(0.708 0 0);
-	--accent: oklch(0.371 0 0);
+	--accent: oklch(0.269 0 0);
 	--accent-foreground: oklch(0.985 0 0);
 	--destructive: oklch(0.704 0.191 22.216);
 	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.275 0 0);
-	--input: oklch(0.325 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
 	--ring: oklch(0.556 0 0);
-	--chart-1: oklch(0.81 0.1 252);
-	--chart-2: oklch(0.62 0.19 260);
-	--chart-3: oklch(0.55 0.22 263);
-	--chart-4: oklch(0.49 0.22 264);
-	--chart-5: oklch(0.42 0.18 266);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
 	--sidebar: oklch(0.205 0 0);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
 	--sidebar-accent: oklch(0.269 0 0);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(0.275 0 0);
-	--sidebar-ring: oklch(0.439 0 0);
-	--font-sans:
-		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-		'Segoe UI Symbol', 'Noto Color Emoji';
-	--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
-	--font-mono:
-		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-		monospace;
-	--radius: 0.625rem;
-	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+	--shadow-color: hsl(0, 0%, 100%);
 }
 
 @theme inline {
@@ -140,22 +115,5 @@
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
 
-	--font-sans: var(--font-sans);
-	--font-mono: var(--font-mono);
-	--font-serif: var(--font-serif);
-
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
 	--radius-inherit: inherit;
-
-	--shadow-2xs: var(--shadow-2xs);
-	--shadow-xs: var(--shadow-xs);
-	--shadow-sm: var(--shadow-sm);
-	--shadow: var(--shadow);
-	--shadow-md: var(--shadow-md);
-	--shadow-lg: var(--shadow-lg);
-	--shadow-xl: var(--shadow-xl);
-	--shadow-2xl: var(--shadow-2xl);
 }
diff --git a/src/lib/components/sidebar/sidebar-content.svelte b/src/lib/components/sidebar/sidebar-content.svelte
index a12463e..176cd62 100644
--- a/src/lib/components/sidebar/sidebar-content.svelte
+++ b/src/lib/components/sidebar/sidebar-content.svelte
@@ -1,21 +1,7 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-
-	export type SlideoverContentProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ sidebar?: SidebarBond<any> }]>;
-		}
-	>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
 	import { SidebarBond } from './bond.svelte';
-	import type { Override } from '$svelte-atoms/core/types';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
+	import type { SlideoverContentProps } from './types';
 
 	const bond = SidebarBond.get();
 
diff --git a/src/lib/components/sidebar/sidebar-root.svelte b/src/lib/components/sidebar/sidebar-root.svelte
index 53bd642..e1a9cdc 100644
--- a/src/lib/components/sidebar/sidebar-root.svelte
+++ b/src/lib/components/sidebar/sidebar-root.svelte
@@ -1,27 +1,8 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { Factory } from '$svelte-atoms/core/types';
-
-	export type SlideoverRootProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = Override<
-		HtmlAtomProps<E, B>,
-		{
-			children?: Snippet<[{ sidebar?: SidebarBond }]>;
-		}
-	> & {
-		open?: boolean;
-		disabled?: boolean;
-		factory?: Factory<SidebarBond>;
-	};
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
 	import { defineProperty, defineState } from '$svelte-atoms/core/utils';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '$svelte-atoms/core/components/atom';
-	import type { Override } from '$svelte-atoms/core/types';
+	import { HtmlAtom, type Base } from '$svelte-atoms/core/components/atom';
+	import { SidebarBond, SidebarBondState, type SidebarBondProps } from './bond.svelte';
+	import type { SlideoverRootProps } from './types';
 
 	let {
 		open = $bindable(false),
diff --git a/src/lib/components/sidebar/types.ts b/src/lib/components/sidebar/types.ts
new file mode 100644
index 0000000..9bd8dbe
--- /dev/null
+++ b/src/lib/components/sidebar/types.ts
@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { Override } from '$svelte-atoms/core/types';
+import type { Factory } from '$svelte-atoms/core/types';
+import type { SidebarBond } from './bond.svelte';
+import type { Base, HtmlAtomProps } from '../atom';
+
+export type SlideoverRootProps<
+	E extends keyof HTMLElementTagNameMap = 'div',
+	B extends Base = Base
+> = Override<
+	HtmlAtomProps<E, B>,
+	{
+		children?: Snippet<[{ sidebar?: SidebarBond }]>;
+	}
+> & {
+	open?: boolean;
+	disabled?: boolean;
+	factory?: Factory<SidebarBond>;
+};
+
+export type SlideoverContentProps<
+	E extends keyof HTMLElementTagNameMap,
+	B extends Base = Base
+> = Override<
+	HtmlAtomProps<E, B>,
+	{
+		children?: Snippet<[{ sidebar?: SidebarBond<any> }]>;
+	}
+>;
diff --git a/src/lib/components/tabs/tab/tab-header.svelte b/src/lib/components/tabs/tab/tab-header.svelte
index 1cb3cc1..01cb0dd 100644
--- a/src/lib/components/tabs/tab/tab-header.svelte
+++ b/src/lib/components/tabs/tab/tab-header.svelte
@@ -58,8 +58,8 @@
 	preset="tab.header"
 	as="button"
 	class={[
-		'border-border text-foreground/60 hover:text-foreground/80 active:text-foreground/100 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
-		isActive && 'text-primary',
+		'border-border text-foreground/60 hover:text-foreground/80 active:text-foreground/100 bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
+		isActive && 'text-primary bg-accent/10 hover:bg-accent/15 active:bg-accent/20',
 		isDisabled && 'opacity-50',
 		'$preset',
 		klass
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 044deec..9aeda05 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -55,7 +55,7 @@
 			<Scrollable.Content>
 				<Header />
 
-				<main class="flex-1">
+				<main class="flex-1 pt-20">
 					{@render children?.()}
 				</main>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de02685..1649705 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,7 +34,7 @@
 			iconClass: 'bg-palette-ion/20'
 		},
 		{
-			title: 'Accessible Fusion',
+			title: 'Accessible',
 			description:
 				'ARIA-compliant components that seamlessly fuse accessibility with modern interactions.',
 			icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
@@ -43,7 +43,7 @@
 			iconClass: 'bg-palette-energy/20'
 		},
 		{
-			title: 'Atomic Modularity',
+			title: 'Composable Design',
 			description:
 				'Each component is atomically independent and perfectly tree-shakable for optimal bundle size.',
 			icon: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z',
@@ -52,7 +52,7 @@
 			iconClass: 'bg-palette-neutron/20'
 		},
 		{
-			title: 'Fusion Customization',
+			title: 'Headless & Stylable',
 			description:
 				'Seamlessly fuse your design system with atomic-level control over every visual aspect.',
 			icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
@@ -62,7 +62,7 @@
 			iconClass: 'bg-palette-fusion/20'
 		},
 		{
-			title: 'TypeScript Reactive',
+			title: 'TypeScript First',
 			description:
 				'First-class TypeScript support with reactive type inference for maximum developer productivity.',
 			icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
@@ -220,7 +220,7 @@
 							</h3>
 							<div class="rounded-lg bg-palette-carbon/50 p-4 font-mono text-sm">
 								<span class="text-gray-500 dark:text-gray-400">$</span>
-								<span class="text-orange-600 dark:text-orange-400">npm install</span> atomic-sv
+								<span class="text-orange-600 dark:text-orange-400">npm install</span> @svelte-atoms/core
 							</div>
 						</div>
 
@@ -231,7 +231,7 @@
 							<div class="rounded-lg bg-palette-carbon/50 p-4 font-mono text-sm">
 								<div class="text-blue-600 dark:text-red-400">&lt;script&gt;</div>
 								<div class="ml-4 text-gray-700 dark:text-gray-300">
-									import {'{'} Button {'}'} from 'atomic-sv/button';
+									import {'{'} Button {'}'} from '@svelte-atoms/core/button';
 								</div>
 								<div class="text-blue-600 dark:text-red-400">&lt;/script&gt;</div>
 								<br />
diff --git a/src/routes/components/accordion/+page.svelte b/src/routes/components/accordion/+page.svelte
index f87aadc..539e352 100644
--- a/src/routes/components/accordion/+page.svelte
+++ b/src/routes/components/accordion/+page.svelte
@@ -1,15 +1,48 @@
 <script lang="ts">
 	import { Accordion, AccordionItem } from '$lib/components/accordion';
-	import Badge from '$lib/components/badge/badge.svelte';
-	import Button from '$lib/components/button/button.svelte';
+	import {
+		PageHeader,
+		Breadcrumb,
+		Section,
+		Installation,
+		AccessibilityInfo,
+		PageNavigation,
+		DemoExample,
+		Props
+	} from '$docs/components';
 
-	let copySuccess = $state(false);
+	const accordionCode = `<Accordion>
+  <AccordionItem.Root>
+    <AccordionItem.Header>
+      What is Atomic SV?
+    </AccordionItem.Header>
+    <AccordionItem.Body>
+      Atomic SV is a modular, accessible, and extensible 
+      Svelte UI component library built with Svelte 5.
+    </AccordionItem.Body>
+  </AccordionItem.Root>
+  
+  <AccordionItem.Root>
+    <AccordionItem.Header>
+      How do I install it?
+    </AccordionItem.Header>
+    <AccordionItem.Body>
+      Simply run npm install atomic-sv
+    </AccordionItem.Body>
+  </AccordionItem.Root>
+</Accordion>`;
 
-	function copyToClipboard(text: string) {
-		navigator.clipboard.writeText(text);
-		copySuccess = true;
-		setTimeout(() => (copySuccess = false), 2000);
-	}
+	const multipleCode = `<Accordion multiple={true}>
+  <AccordionItem.Root>
+    <AccordionItem.Header>Section 1</AccordionItem.Header>
+    <AccordionItem.Body>Content 1</AccordionItem.Body>
+  </AccordionItem.Root>
+  
+  <AccordionItem.Root>
+    <AccordionItem.Header>Section 2</AccordionItem.Header>
+    <AccordionItem.Body>Content 2</AccordionItem.Body>
+  </AccordionItem.Root>
+</Accordion>`;
 </script>
 
 <svelte:head>
@@ -18,275 +51,126 @@
 </svelte:head>
 
 <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
-	<!-- Breadcrumb -->
-	<nav class="mb-8 flex items-center space-x-2 text-sm text-gray-500">
-		<a href="/components" class="transition-colors hover:text-purple-600">Components</a>
-		<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-			<path
-				fill-rule="evenodd"
-				d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-				clip-rule="evenodd"
-			/>
-		</svg>
-		<span class="text-gray-900">Accordion</span>
-	</nav>
-
-	<!-- Header -->
-	<div class="mb-12">
-		<div class="mb-4 flex items-center gap-4">
-			<h1 class="text-4xl font-bold text-gray-900 md:text-5xl">Accordion</h1>
-			<Badge class="bg-green-100 px-3 py-1 text-green-800">Stable</Badge>
-		</div>
-		<p class="max-w-3xl text-xl text-gray-600">
-			Collapsible content sections for organizing information. Perfect for FAQs, settings panels,
-			and content organization.
-		</p>
-	</div>
+	<Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Accordion' }]} />
 
-	<!-- Installation -->
-	<section class="mb-12">
-		<h2 class="mb-4 text-2xl font-bold text-gray-900">Installation</h2>
-		<div class="rounded-lg bg-gray-900 p-4">
-			<div class="mb-2 flex items-center justify-between">
-				<span class="text-sm text-gray-400">Installation</span>
-				<button
-					class="text-gray-400 transition-colors hover:text-white"
-					onclick={() => copyToClipboard("import { Accordion } from 'atomic-sv/accordion';")}
-				>
-					{#if copySuccess}
-						<svg
-							class="h-4 w-4 text-green-400"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M5 13l4 4L19 7"
-							/>
-						</svg>
-					{:else}
-						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-							/>
-						</svg>
-					{/if}
-				</button>
-			</div>
-			<code class="font-mono text-sm text-white">
-				<span class="text-purple-400">import</span>
-				<span class="text-gray-300">&#123;</span>
-				<span class="text-blue-400">Accordion</span>
-				<span>,</span>
-				<span class="text-blue-400">AccordionItem</span>
-				<span class="text-gray-300">&#125;</span>
-				<span class="text-purple-400">from</span>
-				<span class="text-green-400">'atomic-sv/accordion'</span><span class="text-gray-300">;</span
-				>
-			</code>
-		</div>
-	</section>
+	<PageHeader
+		title="Accordion"
+		description="Collapsible content sections for organizing information. Perfect for FAQs, settings panels, and content organization."
+		status="stable"
+	/>
 
-	<!-- Examples -->
-	<section class="mb-12">
-		<h2 class="mb-6 text-2xl font-bold text-gray-900">Examples</h2>
+	<Section title="Installation">
+		<Installation
+			packageName="@svelte-atoms/core"
+			importCode="import &#123; Accordion, AccordionItem &#125; from '@svelte-atoms/core/accordion';"
+		/>
+	</Section>
 
+	<Section title="Examples" description="Explore different accordion variations and use cases">
 		<div class="space-y-8">
-			<!-- Basic Accordion -->
-			<div class="overflow-hidden rounded-lg border border-gray-200">
-				<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
-					<h3 class="text-lg font-semibold text-gray-900">Basic Accordion</h3>
-					<p class="mt-1 text-sm text-gray-600">Simple accordion with collapsible sections</p>
-				</div>
-
-				<div class="bg-white p-6">
-					<div class="mx-auto max-w-md">
-						<!-- Simulated Accordion since we don't have the full implementation -->
-						<Accordion class="overflow-hidden rounded-lg border border-gray-200">
-							<AccordionItem.Root class="border-b border-gray-200 last:border-b-0">
-								<AccordionItem.Header
-									class="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-gray-100/10"
-								>
-									<span class="font-medium text-gray-900">What is Atomic SV?</span>
-									<AccordionItem.Indicator>
-										<svg
-											class="h-5 w-5 text-gray-500"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M9 5l7 7-7 7"
-											/>
-										</svg>
-									</AccordionItem.Indicator>
-								</AccordionItem.Header>
-								<AccordionItem.Body class="px-4 pb-3 text-sm text-gray-600">
-									Atomic SV is a modular, accessible, and extensible Svelte UI component library
-									built with Svelte 5.
-								</AccordionItem.Body>
-							</AccordionItem.Root>
-
-							<AccordionItem.Root class="border-b border-gray-200 last:border-b-0">
-								<AccordionItem.Header
-									class="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-gray-100/10"
-								>
-									<span class="font-medium text-gray-900">How do I install it?</span>
-									<AccordionItem.Indicator>
-										<svg
-											class="h-5 w-5 text-gray-500"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M9 5l7 7-7 7"
-											/>
-										</svg>
-									</AccordionItem.Indicator>
-								</AccordionItem.Header>
-								<AccordionItem.Body class="px-4 pb-3 text-sm text-gray-600">
-									Simply run npm install atomic-sv to add it to your project. Import components as
-									needed.
-								</AccordionItem.Body>
-							</AccordionItem.Root>
-
-							<AccordionItem.Root class="border-b border-gray-200 last:border-b-0">
-								<AccordionItem.Header
-									class="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-gray-100/10"
+			<DemoExample
+				title="Basic Accordion"
+				description="Simple accordion with collapsible sections"
+				code={accordionCode}
+			>
+				<Accordion class="border-border overflow-hidden rounded-lg border">
+					<AccordionItem.Root class="border-border border-b last:border-b-0">
+						<AccordionItem.Header
+							class="hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 text-left transition-colors"
+						>
+							<span class="text-foreground font-medium">What is Atomic SV?</span>
+							<AccordionItem.Indicator>
+								<svg
+									class="text-muted-foreground h-5 w-5"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
 								>
-									<span class="font-medium text-gray-900">Is it accessible?</span>
-									<AccordionItem.Indicator>
-										<svg
-											class="h-5 w-5 text-gray-500"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M9 5l7 7-7 7"
-											/>
-										</svg>
-									</AccordionItem.Indicator>
-								</AccordionItem.Header>
-								<AccordionItem.Body class="px-4 pb-3 text-sm text-gray-600">
-									Yes, all Atomic SV components are built with accessibility in mind. They include
-									proper ARIA attributes, keyboard navigation, and screen reader support out of the
-									box.
-								</AccordionItem.Body>
-							</AccordionItem.Root>
-						</Accordion>
-					</div>
-				</div>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</AccordionItem.Indicator>
+						</AccordionItem.Header>
+						<AccordionItem.Body class="text-muted-foreground px-4 pb-3 text-sm">
+							Atomic SV is a modular, accessible, and extensible Svelte UI component library built
+							with Svelte 5.
+						</AccordionItem.Body>
+					</AccordionItem.Root>
 
-				<div class="bg-gray-900 p-4">
-					<div class="mb-2 flex items-center justify-between">
-						<span class="text-sm text-gray-400">Code</span>
-						<button
-							class="text-gray-400 transition-colors hover:text-white"
-							onclick={() =>
-								copyToClipboard(`<Accordion class="overflow-hidden rounded-lg border border-gray-200">
-							<AccordionItem.Root class="border-b border-gray-200 last:border-b-0">
-								<AccordionItem.Header
-									class="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-gray-100/10"
+					<AccordionItem.Root class="border-border border-b last:border-b-0">
+						<AccordionItem.Header
+							class="hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 text-left transition-colors"
+						>
+							<span class="text-foreground font-medium">How do I install it?</span>
+							<AccordionItem.Indicator>
+								<svg
+									class="text-muted-foreground h-5 w-5"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
 								>
-									<span class="font-medium text-gray-900">What is Atomic SV?</span>
-									<AccordionItem.Indicator>
-										<svg
-											class="h-5 w-5 text-gray-500"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M9 5l7 7-7 7"
-											/>
-										</svg>
-									</AccordionItem.Indicator>
-								</AccordionItem.Header>
-								<AccordionItem.Body class="px-4 pb-3 text-sm text-gray-600">
-									Atomic SV is a modular, accessible, and extensible Svelte UI component library
-									built with Svelte 5.
-								</AccordionItem.Body>
-							</AccordionItem.Root>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</AccordionItem.Indicator>
+						</AccordionItem.Header>
+						<AccordionItem.Body class="text-muted-foreground px-4 pb-3 text-sm">
+							Simply run npm install @svelte-atoms/core to add it to your project. Import components
+							as needed.
+						</AccordionItem.Body>
+					</AccordionItem.Root>
 
-							<AccordionItem.Root class="border-b border-gray-200 last:border-b-0">
-								<AccordionItem.Header
-									class="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-gray-100/10"
+					<AccordionItem.Root class="border-border border-b last:border-b-0">
+						<AccordionItem.Header
+							class="hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 text-left transition-colors"
+						>
+							<span class="text-foreground font-medium">Is it accessible?</span>
+							<AccordionItem.Indicator>
+								<svg
+									class="text-muted-foreground h-5 w-5"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
 								>
-									<span class="font-medium text-gray-900">How do I install it?</span>
-									<AccordionItem.Indicator>
-										<svg
-											class="h-5 w-5 text-gray-500"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M9 5l7 7-7 7"
-											/>
-										</svg>
-									</AccordionItem.Indicator>
-								</AccordionItem.Header>
-								<AccordionItem.Body class="px-4 pb-3 text-sm text-gray-600">
-									Simply run npm install atomic-sv to add it to your project. Import components as
-									needed.
-								</AccordionItem.Body>
-							</AccordionItem.Root>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 5l7 7-7 7"
+									/>
+								</svg>
+							</AccordionItem.Indicator>
+						</AccordionItem.Header>
+						<AccordionItem.Body class="text-muted-foreground px-4 pb-3 text-sm">
+							Yes, all Atomic SV components are built with accessibility in mind. They include
+							proper ARIA attributes, keyboard navigation, and screen reader support out of the box.
+						</AccordionItem.Body>
+					</AccordionItem.Root>
+				</Accordion>
+			</DemoExample>
 
-							<AccordionItem.Root class="border-b border-gray-200 last:border-b-0">
-								<AccordionItem.Header
-									class="flex w-full items-center justify-between px-4 py-3 text-left transition-colors hover:bg-gray-100/10"
-								>
-									<span class="font-medium text-gray-900">Is it accessible?</span>
-									<AccordionItem.Indicator>
-										<svg
-											class="h-5 w-5 text-gray-500"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M9 5l7 7-7 7"
-											/>
-										</svg>
-									</AccordionItem.Indicator>
-								</AccordionItem.Header>
-								<AccordionItem.Body class="px-4 pb-3 text-sm text-gray-600">
-									Yes, all Atomic SV components are built with accessibility in mind. They include
-									proper ARIA attributes, keyboard navigation, and screen reader support out of the
-									box.
-								</AccordionItem.Body>
-							</AccordionItem.Root>
-						</Accordion>`)}
+			<DemoExample
+				title="Multiple Mode"
+				description="Allow multiple sections to be open at once"
+				code={multipleCode}
+			>
+				<Accordion multiple={true} class="border-border overflow-hidden rounded-lg border">
+					<AccordionItem.Root class="border-border border-b last:border-b-0">
+						<AccordionItem.Header
+							class="hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 text-left transition-colors"
 						>
-							{#if copySuccess}
+							<span class="text-foreground font-medium">Section 1</span>
+							<AccordionItem.Indicator>
 								<svg
-									class="h-4 w-4 text-green-400"
+									class="text-muted-foreground h-5 w-5"
 									fill="none"
 									stroke="currentColor"
 									viewBox="0 0 24 24"
@@ -295,238 +179,111 @@
 										stroke-linecap="round"
 										stroke-linejoin="round"
 										stroke-width="2"
-										d="M5 13l4 4L19 7"
+										d="M9 5l7 7-7 7"
 									/>
 								</svg>
-							{:else}
-								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							</AccordionItem.Indicator>
+						</AccordionItem.Header>
+						<AccordionItem.Body class="text-muted-foreground px-4 pb-3 text-sm">
+							Multiple sections can be open at the same time.
+						</AccordionItem.Body>
+					</AccordionItem.Root>
+
+					<AccordionItem.Root class="border-border border-b last:border-b-0">
+						<AccordionItem.Header
+							class="hover:bg-muted/50 flex w-full items-center justify-between px-4 py-3 text-left transition-colors"
+						>
+							<span class="text-foreground font-medium">Section 2</span>
+							<AccordionItem.Indicator>
+								<svg
+									class="text-muted-foreground h-5 w-5"
+									fill="none"
+									stroke="currentColor"
+									viewBox="0 0 24 24"
+								>
 									<path
 										stroke-linecap="round"
 										stroke-linejoin="round"
 										stroke-width="2"
-										d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+										d="M9 5l7 7-7 7"
 									/>
 								</svg>
-							{/if}
-						</button>
-					</div>
-					<pre class="overflow-x-auto font-mono text-sm text-white">{`<Accordion>
-  <AccordionItem>
-    <AccordionHeader>What is Atomic SV?</AccordionHeader>
-    <AccordionBody>
-      Atomic SV is a modular, accessible, and extensible 
-      Svelte UI component library built with Svelte 5.
-    </AccordionBody>
-  </AccordionItem>
-  <AccordionItem>
-    <AccordionHeader>How do I install it?</AccordionHeader>
-    <AccordionBody>
-      Simply run npm install atomic-sv
-    </AccordionBody>
-  </AccordionItem>
-</Accordion>`}</pre>
-				</div>
-			</div>
+							</AccordionItem.Indicator>
+						</AccordionItem.Header>
+						<AccordionItem.Body class="text-muted-foreground px-4 pb-3 text-sm">
+							Opening this section won't close the others.
+						</AccordionItem.Body>
+					</AccordionItem.Root>
+				</Accordion>
+			</DemoExample>
 		</div>
-	</section>
-
-	<!-- Features -->
-	<section class="mb-12">
-		<h2 class="mb-6 text-2xl font-bold text-gray-900">Features</h2>
-		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-			<div class="rounded-lg bg-gradient-to-br from-purple-50 to-purple-100 p-6">
-				<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-purple-600">
-					<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
-				</div>
-				<h3 class="mb-2 text-lg font-semibold text-gray-900">Fully Accessible</h3>
-				<p class="text-sm text-gray-600">
-					Built with ARIA best practices, keyboard navigation, and screen reader support.
-				</p>
-			</div>
-
-			<div class="rounded-lg bg-gradient-to-br from-blue-50 to-blue-100 p-6">
-				<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600">
-					<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-					</svg>
-				</div>
-				<h3 class="mb-2 text-lg font-semibold text-gray-900">Customizable</h3>
-				<p class="text-sm text-gray-600">
-					Style with Tailwind CSS or your own CSS. Full control over appearance and behavior.
-				</p>
-			</div>
-
-			<div class="rounded-lg bg-gradient-to-br from-green-50 to-green-100 p-6">
-				<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-green-600">
-					<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M13 10V3L4 14h7v7l9-11h-7z"
-						/>
-					</svg>
-				</div>
-				<h3 class="mb-2 text-lg font-semibold text-gray-900">Smooth Animations</h3>
-				<p class="text-sm text-gray-600">
-					Built-in smooth expand/collapse animations with respect for reduced motion preferences.
-				</p>
-			</div>
-
-			<div class="rounded-lg bg-gradient-to-br from-pink-50 to-pink-100 p-6">
-				<div class="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-pink-600">
-					<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"
-						/>
-					</svg>
-				</div>
-				<h3 class="mb-2 text-lg font-semibold text-gray-900">Flexible Modes</h3>
-				<p class="text-sm text-gray-600">
-					Supports single or multiple panel expansion modes for different use cases.
-				</p>
-			</div>
-		</div>
-	</section>
-
-	<!-- API Reference -->
-	<section class="mb-12">
-		<h2 class="mb-6 text-2xl font-bold text-gray-900">API Reference</h2>
+	</Section>
 
+	<Section title="API Reference">
 		<div class="space-y-6">
-			<!-- Accordion Props -->
 			<div>
-				<h3 class="mb-3 text-lg font-semibold text-gray-900">Accordion Props</h3>
-				<div class="overflow-x-auto">
-					<table class="min-w-full rounded-lg border border-gray-200">
-						<thead class="bg-gray-50">
-							<tr>
-								<th
-									class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
-									>Prop</th
-								>
-								<th
-									class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
-									>Type</th
-								>
-								<th
-									class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
-									>Default</th
-								>
-								<th
-									class="border-b border-gray-200 px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
-									>Description</th
-								>
-							</tr>
-						</thead>
-						<tbody class="divide-y divide-gray-200 bg-white">
-							<tr>
-								<td class="px-6 py-4 font-mono text-sm whitespace-nowrap text-purple-600"
-									>multiple</td
-								>
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600">boolean</td>
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600">false</td>
-								<td class="px-6 py-4 text-sm text-gray-600"
-									>Allow multiple panels to be open simultaneously</td
-								>
-							</tr>
-							<tr>
-								<td class="px-6 py-4 font-mono text-sm whitespace-nowrap text-purple-600"
-									>collapsible</td
-								>
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600">boolean</td>
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600">true</td>
-								<td class="px-6 py-4 text-sm text-gray-600"
-									>Allow panels to be collapsed when in single mode</td
-								>
-							</tr>
-							<tr>
-								<td class="px-6 py-4 font-mono text-sm whitespace-nowrap text-purple-600">class</td>
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600">string</td>
-								<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-600">''</td>
-								<td class="px-6 py-4 text-sm text-gray-600">Additional CSS classes</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
+				<h3 class="text-foreground mb-3 text-lg font-semibold">Accordion Props</h3>
+				<Props
+					data={[
+						{
+							name: 'multiple',
+							type: 'boolean',
+							default: 'false',
+							description: 'Allow multiple panels to be open simultaneously'
+						},
+						{
+							name: 'collapsible',
+							type: 'boolean',
+							default: 'true',
+							description: 'Allow panels to be collapsed when in single mode'
+						},
+						{
+							name: 'class',
+							type: 'string',
+							default: "''",
+							description: 'Additional CSS classes'
+						}
+					]}
+				/>
 			</div>
-		</div>
-	</section>
 
-	<!-- Accessibility -->
-	<section class="mb-12">
-		<h2 class="mb-6 text-2xl font-bold text-gray-900">Accessibility</h2>
-		<div class="rounded-lg border border-blue-200 bg-blue-50 p-6">
-			<div class="flex items-start">
-				<svg
-					class="mt-1 mr-3 h-6 w-6 flex-shrink-0 text-blue-600"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-					/>
-				</svg>
-				<div>
-					<h3 class="mb-2 text-lg font-semibold text-blue-900">Built-in Accessibility Features</h3>
-					<ul class="space-y-1 text-blue-800">
-						<li>• Proper ARIA attributes (aria-expanded, aria-controls, etc.)</li>
-						<li>• Keyboard navigation (Enter, Space, Arrow keys)</li>
-						<li>• Focus management with visible indicators</li>
-						<li>• Screen reader announcements for state changes</li>
-						<li>• Semantic HTML structure</li>
-						<li>• Respects prefers-reduced-motion setting</li>
-					</ul>
-				</div>
+			<div>
+				<h3 class="text-foreground mb-3 text-lg font-semibold">AccordionItem.Header Props</h3>
+				<Props
+					data={[
+						{
+							name: 'class',
+							type: 'string',
+							default: "''",
+							description: 'Additional CSS classes'
+						},
+						{
+							name: 'children',
+							type: 'Snippet',
+							default: '-',
+							description: 'Content to render in the header'
+						}
+					]}
+				/>
 			</div>
 		</div>
-	</section>
+	</Section>
 
-	<!-- Navigation -->
-	<div class="flex items-center justify-between border-t border-gray-200 pt-8">
-		<a
-			href="/components"
-			class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
-		>
-			<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-			</svg>
-			Back to Components
-		</a>
+	<Section title="Accessibility">
+		<AccessibilityInfo
+			features={[
+				'Proper ARIA attributes (aria-expanded, aria-controls, etc.)',
+				'Keyboard navigation (Enter, Space, Arrow keys)',
+				'Focus management with visible indicators',
+				'Screen reader announcements for state changes',
+				'Semantic HTML structure',
+				'Respects prefers-reduced-motion setting'
+			]}
+		/>
+	</Section>
 
-		<a
-			href="/components/button"
-			class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
-		>
-			Next: Button
-			<svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-			</svg>
-		</a>
-	</div>
+	<PageNavigation
+		prev={{ label: 'Back to Components', href: '/components' }}
+		next={{ label: 'Next: Button', href: '/components/button' }}
+	/>
 </div>
diff --git a/src/routes/components/button/+page.svelte b/src/routes/components/button/+page.svelte
index e32aae0..d2d29ff 100644
--- a/src/routes/components/button/+page.svelte
+++ b/src/routes/components/button/+page.svelte
@@ -1,176 +1,191 @@
 <script lang="ts">
 	import Button from '$lib/components/button/button.svelte';
-	import Badge from '$lib/components/badge/badge.svelte';
-	import { Preview } from '$docs/preview';
-	import Props from '$docs/props-datagrid.svelte';
-	import ContentSidebar from '$docs/content-sidebar.svelte';
-	import Code from '$docs/code/code.svelte';
-	import { buttonCode } from './code';
-	import { Alert } from '$lib/components/alert';
+	import {
+		PageHeader,
+		Breadcrumb,
+		Section,
+		Installation,
+		AccessibilityInfo,
+		PageNavigation,
+		DemoExample,
+		Props
+	} from '$docs/components';
+
+	const buttonCode = `<script lang="ts">
+  import { Button } from '@svelte-atoms/core/button';
+<\/script>
+
+<Button>Click me</Button>`;
+
+	const variantsCode = `<Button class="bg-primary text-white hover:bg-primary/90">
+  Primary Button
+</Button>
+
+<Button class="bg-secondary text-white hover:bg-secondary/90">
+  Secondary Button
+</Button>
+
+<Button class="border border-border hover:bg-muted">
+  Outline Button
+</Button>`;
+
+	const sizesCode = `<Button class="px-3 py-1.5 text-sm">Small</Button>
+<Button class="px-4 py-2">Medium</Button>
+<Button class="px-6 py-3 text-lg">Large</Button>`;
+
+	const statesCode = `<Button disabled>Disabled Button</Button>`;
 </script>
 
 <svelte:head>
-	<title>Button | Atomic SV</title>
+	<title>Button - Atomic SV</title>
 	<meta name="description" content="Interactive button component for triggering actions." />
 </svelte:head>
 
-<div class="page-grid">
-	<div></div>
-
-	<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
-		<!-- Breadcrumb -->
-		<nav class="mb-8 flex items-center space-x-2 text-sm text-gray-500">
-			<a href="/components" class="transition-colors hover:text-purple-600">Components</a>
-			<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-				<path
-					fill-rule="evenodd"
-					d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-			<span class="text-gray-900">Button</span>
-		</nav>
-
-		<!-- Header -->
-		<div class="mb-12">
-			<div class="mb-4 flex items-center gap-4">
-				<h1 class="text-4xl font-bold text-gray-900 md:text-5xl">Button</h1>
-				<Badge class="bg-green-100 px-3 py-1 text-green-800">Stable</Badge>
-			</div>
-			<p class="max-w-3xl text-xl text-gray-600">
-				Interactive element for triggering actions. Supports various styles, sizes, and states.
-			</p>
-		</div>
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
+	<Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Button' }]} />
+
+	<PageHeader
+		title="Button"
+		description="Interactive element for triggering actions. Supports various styles, sizes, and states."
+		status="stable"
+	/>
+
+	<Section title="Installation">
+		<Installation
+			packageName="@svelte-atoms/core"
+			importCode="import &#123; Button &#125; from '@svelte-atoms/core/button';"
+		/>
+	</Section>
 
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Simple Usage</h2>
-
-			<Code code={buttonCode} />
-		</section>
-
-		<!-- Playground -->
-		<!-- <Playground /> -->
-
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Preview</h2>
-
-			<Preview.Root>
-				<Preview.Content class="bg-background flex h-96 items-center justify-center rounded-lg">
-					<Button>Click me</Button>
-				</Preview.Content>
-			</Preview.Root>
-		</section>
-
-		<!-- Props Documentation -->
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Props</h2>
-			<Props
-				data={[
-					{
-						name: 'class',
-						type: 'string',
-						default: '',
-						description: 'Additional CSS classes to apply'
-					},
-					{
-						name: 'children',
-						type: 'Snippet',
-						default: '-',
-						description: 'Content to render inside the button'
-					},
-					{
-						name: 'disabled',
-						type: 'boolean',
-						default: 'false',
-						description: 'Whether the button is disabled'
-					},
-					{
-						name: 'type',
-						type: "'button' | 'submit' | 'reset'",
-						default: "'button'",
-						description: 'Button type attribute'
-					},
-					{
-						name: 'onclick',
-						type: 'function',
-						default: '-',
-						description: 'Click event handler'
-					}
-				]}
-			></Props>
-		</section>
-
-		<!-- Accessibility -->
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Accessibility</h2>
-			<Alert.Root class="flex flex-col bg-blue-600/5 text-blue-600">
-				<div class="flex items-center gap-2">
-					<Alert.Icon class="h-6">
-						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
-					</Alert.Icon>
-					<Alert.Title class="text-lg">Built-in Accessibility Features</Alert.Title>
+	<Section title="Examples" description="Explore different button variations and use cases">
+		<div class="space-y-8">
+			<DemoExample
+				title="Basic Button"
+				description="Simple button with default styling"
+				code={buttonCode}
+			>
+				<Button
+					class="bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white transition-colors"
+				>
+					Click me
+				</Button>
+			</DemoExample>
+
+			<DemoExample
+				title="Button Variants"
+				description="Different visual styles for various contexts"
+				code={variantsCode}
+			>
+				<div class="flex flex-wrap gap-3">
+					<Button
+						class="bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white transition-colors"
+					>
+						Primary Button
+					</Button>
+					<Button
+						class="bg-secondary hover:bg-secondary/90 rounded-lg px-4 py-2 text-white transition-colors"
+					>
+						Secondary Button
+					</Button>
+					<Button
+						class="border-border hover:bg-muted rounded-lg border px-4 py-2 transition-colors"
+					>
+						Outline Button
+					</Button>
 				</div>
-				<Alert.Description>
-					<ul class="space-y-1">
-						<li>• Proper semantic button element with role</li>
-						<li>• Keyboard navigation support (Enter and Space keys)</li>
-						<li>• Focus management with visible focus indicators</li>
-						<li>• Screen reader compatible with proper ARIA attributes</li>
-						<li>• Disabled state handling</li>
-					</ul>
-				</Alert.Description>
-			</Alert.Root>
-		</section>
-
-		<!-- Navigation -->
-		<div class="flex items-center justify-between border-t border-gray-200 pt-8">
-			<a
-				href="/components"
-				class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
+			</DemoExample>
+
+			<DemoExample
+				title="Button Sizes"
+				description="Different sizes for various use cases"
+				code={sizesCode}
 			>
-				<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M15 19l-7-7 7-7"
-					/>
-				</svg>
-				Back to Components
-			</a>
-
-			<a
-				href="/components/checkbox"
-				class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
+				<div class="flex flex-wrap items-center gap-3">
+					<Button
+						class="bg-primary hover:bg-primary/90 rounded-lg px-3 py-1.5 text-sm text-white transition-colors"
+					>
+						Small
+					</Button>
+					<Button
+						class="bg-primary hover:bg-primary/90 rounded-lg px-4 py-2 text-white transition-colors"
+					>
+						Medium
+					</Button>
+					<Button
+						class="bg-primary hover:bg-primary/90 rounded-lg px-6 py-3 text-lg text-white transition-colors"
+					>
+						Large
+					</Button>
+				</div>
+			</DemoExample>
+
+			<DemoExample
+				title="Disabled State"
+				description="Disabled buttons are non-interactive"
+				code={statesCode}
 			>
-				Next: Checkbox
-				<svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-				</svg>
-			</a>
+				<Button
+					disabled
+					class="bg-primary cursor-not-allowed rounded-lg px-4 py-2 text-white opacity-50"
+				>
+					Disabled Button
+				</Button>
+			</DemoExample>
 		</div>
-	</div>
-
-	<ContentSidebar
-		data={[
-			{ title: 'Installation', href: '/components/button#installation' },
-			{ title: 'Usage', href: '/components/button#usage' },
-			{ title: 'Variants', href: '/components/button#variants' },
-			{ title: 'Accessibility', href: '/components/button#accessibility' }
-		]}
+	</Section>
+
+	<Section title="API Reference">
+		<Props
+			data={[
+				{
+					name: 'class',
+					type: 'string',
+					default: "''",
+					description: 'Additional CSS classes to apply'
+				},
+				{
+					name: 'children',
+					type: 'Snippet',
+					default: '-',
+					description: 'Content to render inside the button'
+				},
+				{
+					name: 'disabled',
+					type: 'boolean',
+					default: 'false',
+					description: 'Whether the button is disabled'
+				},
+				{
+					name: 'type',
+					type: "'button' | 'submit' | 'reset'",
+					default: "'button'",
+					description: 'Button type attribute'
+				},
+				{
+					name: 'onclick',
+					type: 'function',
+					default: '-',
+					description: 'Click event handler'
+				}
+			]}
+		/>
+	</Section>
+
+	<Section title="Accessibility">
+		<AccessibilityInfo
+			features={[
+				'Proper semantic button element with role',
+				'Keyboard navigation support (Enter and Space keys)',
+				'Focus management with visible focus indicators',
+				'Screen reader compatible with proper ARIA attributes',
+				'Disabled state handling with aria-disabled',
+				'Clear visual feedback for all interactive states'
+			]}
+		/>
+	</Section>
+
+	<PageNavigation
+		prev={{ label: 'Back to Components', href: '/components' }}
+		next={{ label: 'Next: Checkbox', href: '/components/checkbox' }}
 	/>
 </div>
-
-<style>
-	.page-grid {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-	}
-</style>
diff --git a/src/routes/components/checkbox/+page.svelte b/src/routes/components/checkbox/+page.svelte
index e55b5e5..779dbe2 100644
--- a/src/routes/components/checkbox/+page.svelte
+++ b/src/routes/components/checkbox/+page.svelte
@@ -1,14 +1,40 @@
 <script lang="ts">
 	import Checkbox from '$lib/components/checkbox/checkbox.svelte';
-	import Badge from '$lib/components/badge/badge.svelte';
+	import {
+		PageHeader,
+		Breadcrumb,
+		Section,
+		Installation,
+		AccessibilityInfo,
+		PageNavigation,
+		DemoExample,
+		Props
+	} from '$docs/components';
 
-	let copySuccess = $state(false);
+	const basicCode = `<script lang="ts">
+  import { Checkbox } from '@svelte-atoms/core/checkbox';
+<\/script>
 
-	function copyToClipboard(text: string) {
-		navigator.clipboard.writeText(text);
-		copySuccess = true;
-		setTimeout(() => (copySuccess = false), 2000);
-	}
+<Checkbox id="basic" />
+<label for="basic">Accept terms and conditions</label>`;
+
+	const groupCode = `<div class="space-y-3">
+  <div class="flex items-center space-x-2">
+    <Checkbox id="option1" />
+    <label for="option1">Newsletter updates</label>
+  </div>
+  <div class="flex items-center space-x-2">
+    <Checkbox id="option2" />
+    <label for="option2">Marketing emails</label>
+  </div>
+  <div class="flex items-center space-x-2">
+    <Checkbox id="option3" />
+    <label for="option3">Product announcements</label>
+  </div>
+</div>`;
+
+	const disabledCode = `<Checkbox id="disabled" disabled />
+<label for="disabled">Disabled checkbox</label>`;
 </script>
 
 <svelte:head>
@@ -17,258 +43,126 @@
 </svelte:head>
 
 <div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
-	<!-- Breadcrumb -->
-	<nav class="mb-8 flex items-center space-x-2 text-sm text-gray-500">
-		<a href="/components" class="transition-colors hover:text-purple-600">Components</a>
-		<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-			<path
-				fill-rule="evenodd"
-				d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-				clip-rule="evenodd"
-			/>
-		</svg>
-		<span class="text-gray-900">Checkbox</span>
-	</nav>
-
-	<!-- Header -->
-	<div class="mb-12">
-		<div class="mb-4 flex items-center gap-4">
-			<h1 class="text-4xl font-bold text-gray-900 md:text-5xl">Checkbox</h1>
-			<Badge class="bg-green-100 px-3 py-1 text-green-800">Stable</Badge>
-		</div>
-		<p class="max-w-3xl text-xl text-gray-600">
-			Selection control for multiple choices. Allows users to select one or more options from a set.
-		</p>
-	</div>
+	<Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Checkbox' }]} />
 
-	<!-- Installation -->
-	<section class="mb-12">
-		<h2 class="mb-4 text-2xl font-bold text-gray-900">Installation</h2>
-		<div class="rounded-lg bg-gray-900 p-4">
-			<div class="mb-2 flex items-center justify-between">
-				<span class="text-sm text-gray-400">Installation</span>
-				<button
-					class="text-gray-400 transition-colors hover:text-white"
-					onclick={() => copyToClipboard("import Checkbox from 'atomic-sv/checkbox';")}
-				>
-					{#if copySuccess}
-						<svg
-							class="h-4 w-4 text-green-400"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M5 13l4 4L19 7"
-							/>
-						</svg>
-					{:else}
-						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-							/>
-						</svg>
-					{/if}
-				</button>
-			</div>
-			<code class="font-mono text-sm text-white">
-				<span class="text-purple-400">import</span> <span class="text-blue-400">Checkbox</span>
-				<span class="text-purple-400">from</span>
-				<span class="text-green-400">'atomic-sv/checkbox'</span><span class="text-gray-300">;</span>
-			</code>
-		</div>
-	</section>
+	<PageHeader
+		title="Checkbox"
+		description="Selection control for multiple choices. Allows users to select one or more options from a set."
+		status="stable"
+	/>
 
-	<!-- Examples -->
-	<section class="mb-12">
-		<h2 class="mb-6 text-2xl font-bold text-gray-900">Examples</h2>
+	<Section title="Installation">
+		<Installation
+			packageName="@svelte-atoms/core"
+			importCode="import &#123; Checkbox &#125; from '@svelte-atoms/core/checkbox';"
+		/>
+	</Section>
 
+	<Section title="Examples" description="Explore different checkbox variations and use cases">
 		<div class="space-y-8">
-			<!-- Basic Checkbox -->
-			<div class="overflow-hidden rounded-lg border border-gray-200">
-				<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
-					<h3 class="text-lg font-semibold text-gray-900">Basic Checkbox</h3>
-					<p class="mt-1 text-sm text-gray-600">Simple checkbox with label</p>
+			<DemoExample title="Basic Checkbox" description="Simple checkbox with label" code={basicCode}>
+				<div class="flex items-center space-x-2">
+					<Checkbox id="basic" />
+					<label for="basic" class="text-foreground cursor-pointer text-sm">
+						Accept terms and conditions
+					</label>
 				</div>
+			</DemoExample>
 
-				<div class="bg-white p-6">
-					<div
-						class="flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100 py-8"
-					>
-						<div class="flex items-center space-x-2">
-							<Checkbox id="basic" />
-							<label for="basic" class="cursor-pointer text-sm text-gray-700">
-								Accept terms and conditions
-							</label>
-						</div>
+			<DemoExample
+				title="Checkbox Group"
+				description="Multiple checkboxes for selecting multiple options"
+				code={groupCode}
+			>
+				<div class="space-y-3">
+					<div class="flex items-center space-x-2">
+						<Checkbox id="option1" />
+						<label for="option1" class="text-foreground cursor-pointer text-sm">
+							Newsletter updates
+						</label>
 					</div>
-				</div>
-
-				<div class="bg-gray-900 p-4">
-					<div class="mb-2 flex items-center justify-between">
-						<span class="text-sm text-gray-400">Code</span>
-						<button
-							class="text-gray-400 transition-colors hover:text-white"
-							onclick={() =>
-								copyToClipboard(`<Checkbox id="basic" />
-<label for="basic">Accept terms and conditions</label>`)}
-						>
-							{#if copySuccess}
-								<svg
-									class="h-4 w-4 text-green-400"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 13l4 4L19 7"
-									/>
-								</svg>
-							{:else}
-								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-									/>
-								</svg>
-							{/if}
-						</button>
+					<div class="flex items-center space-x-2">
+						<Checkbox id="option2" />
+						<label for="option2" class="text-foreground cursor-pointer text-sm">
+							Marketing emails
+						</label>
 					</div>
-					<pre class="overflow-x-auto font-mono text-sm text-white">{`<Checkbox id="basic" />
-<label for="basic">Accept terms and conditions</label>`}</pre>
-				</div>
-			</div>
-
-			<!-- Checkbox Group -->
-			<div class="overflow-hidden rounded-lg border border-gray-200">
-				<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
-					<h3 class="text-lg font-semibold text-gray-900">Checkbox Group</h3>
-					<p class="mt-1 text-sm text-gray-600">
-						Multiple checkboxes for selecting multiple options
-					</p>
-				</div>
-
-				<div class="bg-white p-6">
-					<div
-						class="flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100 py-8"
-					>
-						<div class="space-y-3">
-							<div class="flex items-center space-x-2">
-								<Checkbox id="option1" />
-								<label for="option1" class="cursor-pointer text-sm text-gray-700">
-									Newsletter updates
-								</label>
-							</div>
-							<div class="flex items-center space-x-2">
-								<Checkbox id="option2" />
-								<label for="option2" class="cursor-pointer text-sm text-gray-700">
-									Marketing emails
-								</label>
-							</div>
-							<div class="flex items-center space-x-2">
-								<Checkbox id="option3" />
-								<label for="option3" class="cursor-pointer text-sm text-gray-700">
-									Product announcements
-								</label>
-							</div>
-						</div>
+					<div class="flex items-center space-x-2">
+						<Checkbox id="option3" />
+						<label for="option3" class="text-foreground cursor-pointer text-sm">
+							Product announcements
+						</label>
 					</div>
 				</div>
+			</DemoExample>
 
-				<div class="bg-gray-900 p-4">
-					<div class="mb-2 flex items-center justify-between">
-						<span class="text-sm text-gray-400">Code</span>
-						<button
-							class="text-gray-400 transition-colors hover:text-white"
-							onclick={() =>
-								copyToClipboard(`<div class="space-y-3">
-  <div class="flex items-center space-x-2">
-    <Checkbox id="option1" />
-    <label for="option1">Newsletter updates</label>
-  </div>
-  <div class="flex items-center space-x-2">
-    <Checkbox id="option2" />
-    <label for="option2">Marketing emails</label>
-  </div>
-  <div class="flex items-center space-x-2">
-    <Checkbox id="option3" />
-    <label for="option3">Product announcements</label>
-  </div>
-</div>`)}
-						>
-							{#if copySuccess}
-								<svg
-									class="h-4 w-4 text-green-400"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 13l4 4L19 7"
-									/>
-								</svg>
-							{:else}
-								<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-									/>
-								</svg>
-							{/if}
-						</button>
-					</div>
-					<pre class="overflow-x-auto font-mono text-sm text-white">{`<div class="space-y-3">
-  <div class="flex items-center space-x-2">
-    <Checkbox id="option1" />
-    <label for="option1">Newsletter updates</label>
-  </div>
-  <div class="flex items-center space-x-2">
-    <Checkbox id="option2" />
-    <label for="option2">Marketing emails</label>
-  </div>
-  <div class="flex items-center space-x-2">
-    <Checkbox id="option3" />
-    <label for="option3">Product announcements</label>
-  </div>
-</div>`}</pre>
+			<DemoExample
+				title="Disabled State"
+				description="Checkbox in disabled state"
+				code={disabledCode}
+			>
+				<div class="flex items-center space-x-2">
+					<Checkbox id="disabled" disabled />
+					<label for="disabled" class="text-muted-foreground cursor-pointer text-sm">
+						Disabled checkbox
+					</label>
 				</div>
-			</div>
+			</DemoExample>
 		</div>
-	</section>
+	</Section>
+
+	<Section title="API Reference">
+		<Props
+			data={[
+				{
+					name: 'id',
+					type: 'string',
+					default: '-',
+					description: 'Unique identifier for the checkbox'
+				},
+				{
+					name: 'checked',
+					type: 'boolean',
+					default: 'false',
+					description: 'Whether the checkbox is checked'
+				},
+				{
+					name: 'disabled',
+					type: 'boolean',
+					default: 'false',
+					description: 'Whether the checkbox is disabled'
+				},
+				{
+					name: 'class',
+					type: 'string',
+					default: "''",
+					description: 'Additional CSS classes to apply'
+				},
+				{
+					name: 'onchange',
+					type: 'function',
+					default: '-',
+					description: 'Change event handler'
+				}
+			]}
+		/>
+	</Section>
 
-	<!-- Navigation -->
-	<div class="flex items-center justify-between border-t border-gray-200 pt-8">
-		<a
-			href="/components/button"
-			class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
-		>
-			<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-			</svg>
-			Previous: Button
-		</a>
+	<Section title="Accessibility">
+		<AccessibilityInfo
+			features={[
+				'Proper semantic input element with type="checkbox"',
+				'Keyboard navigation support (Space key to toggle)',
+				'Focus management with visible focus indicators',
+				'Screen reader compatible with proper labels',
+				'Disabled state handling with aria-disabled',
+				'Associated label support for larger click targets'
+			]}
+		/>
+	</Section>
 
-		<a
-			href="/components"
-			class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
-		>
-			Back to Components
-		</a>
-	</div>
+	<PageNavigation
+		prev={{ label: 'Previous: Button', href: '/components/button' }}
+		next={{ label: 'Back to Components', href: '/components' }}
+	/>
 </div>
diff --git a/src/routes/components/form/+page.svelte b/src/routes/components/form/+page.svelte
index 1caa0e7..118e6c7 100644
--- a/src/routes/components/form/+page.svelte
+++ b/src/routes/components/form/+page.svelte
@@ -1,85 +1,17 @@
 <script lang="ts">
 	import { Form, Field } from '$lib/components/form';
 	import Button from '$lib/components/button/button.svelte';
-	import Badge from '$lib/components/badge/badge.svelte';
-	import { Preview } from '$docs/preview';
-	import Props from '$docs/props-datagrid.svelte';
-	import ContentSidebar from '$docs/content-sidebar.svelte';
 	import { Input } from '$lib/components/input';
-	import Playground from './playground.svelte';
-
-	let copySuccess = $state(false);
-
-	function copyToClipboard(text: string) {
-		navigator.clipboard.writeText(text);
-		copySuccess = true;
-		setTimeout(() => (copySuccess = false), 2000);
-	}
-
-	const examples = [
-		{
-			title: 'Basic Form',
-			description: 'Simple form with text inputs and basic validation',
-			code: `<form>
-	<div>
-		<label for="name">Name</label>
-		<input id="name" type="text" placeholder="Enter your name" />
-	</div>
-	<div>
-		<label for="email">Email</label>
-		<input id="email" type="email" placeholder="Enter your email" />
-	</div>
-	<button type="submit">Submit</button>
-</form>`
-		},
-		{
-			title: 'Form with Validation',
-			description: 'Form with built-in validation and error states',
-			code: `<Form renderless={false}>
-	{#snippet children({ form })}
-		<Field.Root name="email" bind:value={email}>
-			{#snippet children({ field })}
-				<Field.Label>Email Address</Field.Label>
-				<Field.Control 
-					type="email" 
-					placeholder="Enter your email"
-					required
-				/>
-			{/snippet}
-		</Field.Root>
-	{/snippet}
-</Form>`
-		},
-		{
-			title: 'Advanced Form',
-			description: 'Complex form with multiple field types and custom validation',
-			code: `<Form>
-	{#snippet children({ form })}
-		<Field.Root name="profile">
-			{#snippet children({ field })}
-				<Field.Label>Profile Information</Field.Label>
-				<Field.Control 
-					component="textarea"
-					placeholder="Tell us about yourself"
-					rows="4"
-				/>
-			{/snippet}
-		</Field.Root>
-		
-		<Field.Root name="terms">
-			{#snippet children({ field })}
-				<div class="flex items-center space-x-2">
-					<Field.Control type="checkbox" />
-					<Field.Label>I agree to the terms</Field.Label>
-				</div>
-			{/snippet}
-		</Field.Root>
-	{/snippet}
-</Form>`
-		}
-	];
-
-	// Example form data
+	import {
+		PageHeader,
+		Breadcrumb,
+		Section,
+		Installation,
+		AccessibilityInfo,
+		PageNavigation,
+		DemoExample
+	} from '$docs/components';
+	import { DataGrid } from '$lib/components/datagrid'; // Example form data
 	let basicFormData = $state({
 		name: '',
 		email: ''
@@ -90,513 +22,458 @@
 		password: ''
 	});
 
-	let advancedFormData = $state({
-		profile: '',
-		preferences: '',
-		newsletter: false
-	});
+	const basicCode = `<script lang="ts">
+  import { Form, Field } from '@svelte-atoms/core/form';
+  import { Input } from '@svelte-atoms/core/input';
+<\/script>
+
+<Form onsubmit={(e) => e.preventDefault()}>
+  <Field.Root>
+    <Field.Label for="name">Name</Field.Label>
+    <Field.Control component={Input.Root}>
+      <Input.Value bind:value={formData.name} />
+    </Field.Control>
+  </Field.Root>
+  
+  <button type="submit">Submit</button>
+</Form>`;
+
+	const validatedCode = `<Form onsubmit={(e) => e.preventDefault()}>
+  <div>
+    <label for="email">Email Address</label>
+    <input
+      id="email"
+      type="email"
+      bind:value={formData.email}
+      placeholder="Enter your email"
+      required
+    />
+  </div>
+  
+  <div>
+    <label for="password">Password</label>
+    <input
+      id="password"
+      type="password"
+      bind:value={formData.password}
+      placeholder="Enter your password"
+      required
+      minlength="8"
+    />
+  </div>
+  
+  <button type="submit">Create Account</button>
+</Form>`;
 </script>
 
 <svelte:head>
-	<title>Form & Field Components - Atomic SV</title>
+	<title>Form & Field - Atomic SV</title>
 	<meta
 		name="description"
 		content="Flexible form and field components for building accessible forms with validation."
 	/>
 </svelte:head>
 
-<div class="page-grid">
-	<div></div>
-
-	<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
-		<!-- Breadcrumb -->
-		<nav class="mb-8 flex items-center space-x-2 text-sm text-gray-500">
-			<a href="/components" class="transition-colors hover:text-purple-600">Components</a>
-			<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-				<path
-					fill-rule="evenodd"
-					d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-			<span class="text-gray-900">Form</span>
-		</nav>
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
+	<Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Form' }]} />
 
-		<!-- Header -->
-		<div class="mb-12">
-			<div class="mb-4 flex items-center gap-4">
-				<h1 class="text-4xl font-bold text-gray-900 md:text-5xl">Form & Field</h1>
-				<Badge class="bg-green-100 px-3 py-1 text-green-800">Stable</Badge>
-			</div>
-			<p class="max-w-3xl text-xl text-gray-600">
-				Composable form and field components for building accessible, validated forms with powerful
-				state management.
-			</p>
-		</div>
+	<PageHeader
+		title="Form & Field"
+		description="Composable form and field components for building accessible, validated forms with powerful state management."
+		status="stable"
+	/>
 
-		<!-- Installation -->
-		<section class="mb-12">
-			<h2 class="mb-4 text-2xl font-bold text-gray-900">Installation</h2>
-			<div class="rounded-lg bg-gray-900 p-4">
-				<div class="mb-2 flex items-center justify-between">
-					<span class="text-sm text-gray-400">Installation</span>
-					<button
-						class="text-gray-400 transition-colors hover:text-white"
-						onclick={() => copyToClipboard("import { Form, Field } from 'atomic-sv/form';")}
-					>
-						{#if copySuccess}
-							<svg
-								class="h-4 w-4 text-green-400"
-								fill="none"
-								stroke="currentColor"
-								viewBox="0 0 24 24"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M5 13l4 4L19 7"
-								/>
-							</svg>
-						{:else}
-							<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-								/>
-							</svg>
-						{/if}
-					</button>
-				</div>
-				<code class="font-mono text-sm text-white">
-					<span class="text-purple-400">import</span>
-					<span class="text-blue-400">{{ Form, Field }}</span>
-					<span class="text-purple-400">from</span>
-					<span class="text-green-400">'atomic-sv/form'</span><span class="text-gray-300">;</span>
-				</code>
-			</div>
-		</section>
+	<Section title="Installation">
+		<Installation
+			packageName="@svelte-atoms/core"
+			importCode="import &#123; Form, Field &#125; from '@svelte-atoms/core/form';"
+		/>
+	</Section>
 
-		<Playground />
+	<Section title="Examples" description="Explore different form variations and use cases">
+		<div class="space-y-8">
+			<DemoExample title="Basic Form" description="Simple form with text inputs" code={basicCode}>
+				<Form class="w-full max-w-md space-y-4" onsubmit={(e) => e.preventDefault()}>
+					<Field.Root>
+						<Field.Label for="basic-name" class="text-foreground mb-1 block text-sm font-medium">
+							Name
+						</Field.Label>
+						<Field.Control component={Input.Root}>
+							<Input.Value
+								bind:value={basicFormData.name}
+								class="border-border bg-background focus:border-primary focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
+							/>
+						</Field.Control>
+					</Field.Root>
 
-		<!-- Examples -->
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Examples</h2>
+					<div>
+						<label for="basic-email" class="text-foreground mb-1 block text-sm font-medium">
+							Email
+						</label>
+						<input
+							id="basic-email"
+							type="email"
+							bind:value={basicFormData.email}
+							placeholder="Enter your email"
+							class="border-border bg-background focus:border-primary focus:ring-primary w-full rounded-md border px-3 py-2 text-sm focus:ring-1 focus:outline-none"
+						/>
+					</div>
 
-			<div class="space-y-8">
-				{#each examples as example, i}
-					<Preview.Root class="overflow-hidden rounded-lg border border-gray-200">
-						<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
-							<h3 class="text-lg font-semibold text-gray-900">{example.title}</h3>
-							<p class="mt-1 text-sm text-gray-600">{example.description}</p>
-						</div>
+					<Button class="bg-primary hover:bg-primary/90 w-full rounded-md px-4 py-2 text-white">
+						Submit
+					</Button>
+				</Form>
+			</DemoExample>
 
-						<!-- Preview -->
-						<Preview.Content class="bg-white p-6">
-							<div
-								class="flex items-center justify-center rounded-lg bg-gradient-to-br from-gray-50 to-gray-100 py-8"
-							>
-								{#if i === 0}
-									<!-- Basic Form -->
-									<Form class="w-full max-w-md space-y-4" onsubmit={(e) => e.preventDefault()}>
-										<Field.Root>
-											<Field.Label
-												for="basic-name"
-												class="mb-1 block text-sm font-medium text-gray-700"
-											>
-												Name
-											</Field.Label>
-											<Field.Control component={Input.Root}>
-												<Input.Value bind:value={basicFormData.name} />
-											</Field.Control>
-										</Field.Root>
-										<div>
-											<label for="basic-email" class="mb-1 block text-sm font-medium text-gray-700">
-												Email
-											</label>
-											<input
-												id="basic-email"
-												type="email"
-												bind:value={basicFormData.email}
-												placeholder="Enter your email"
-												class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none"
-											/>
-										</div>
-										<Button class="w-full bg-purple-600 text-white hover:bg-purple-700">
-											Submit
-										</Button>
-									</Form>
-								{:else if i === 1}
-									<!-- Validated Form -->
-									<Form class="w-full max-w-md space-y-4" onsubmit={(e) => e.preventDefault()}>
-										<div>
-											<label
-												for="validated-email"
-												class="mb-1 block text-sm font-medium text-gray-700"
-											>
-												Email Address
-											</label>
-											<input
-												id="validated-email"
-												type="email"
-												bind:value={validatedFormData.email}
-												placeholder="Enter your email"
-												required
-												class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm invalid:border-red-500 invalid:ring-red-500 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none"
-											/>
-										</div>
-										<div>
-											<label
-												for="validated-password"
-												class="mb-1 block text-sm font-medium text-gray-700"
-											>
-												Password
-											</label>
-											<input
-												id="validated-password"
-												type="password"
-												bind:value={validatedFormData.password}
-												placeholder="Enter your password"
-												required
-												minlength="8"
-												class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm invalid:border-red-500 invalid:ring-red-500 focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none"
-											/>
-										</div>
-										<Button class="w-full bg-purple-600 text-white hover:bg-purple-700">
-											Create Account
-										</Button>
-									</Form>
-								{:else if i === 2}
-									<!-- Advanced Form -->
-									<Form class="w-full max-w-md space-y-4" onsubmit={(e) => e.preventDefault()}>
-										<div>
-											<label
-												for="advanced-profile"
-												class="mb-1 block text-sm font-medium text-gray-700"
-											>
-												Profile Information
-											</label>
-											<textarea
-												id="advanced-profile"
-												bind:value={advancedFormData.profile}
-												placeholder="Tell us about yourself"
-												rows="4"
-												class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none"
-											></textarea>
-										</div>
-										<div>
-											<label
-												for="advanced-preferences"
-												class="mb-1 block text-sm font-medium text-gray-700"
-											>
-												Preferences
-											</label>
-											<select
-												id="advanced-preferences"
-												bind:value={advancedFormData.preferences}
-												class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-purple-500 focus:ring-1 focus:ring-purple-500 focus:outline-none"
-											>
-												<option value="">Select preferences</option>
-												<option value="email">Email notifications</option>
-												<option value="sms">SMS notifications</option>
-												<option value="none">No notifications</option>
-											</select>
-										</div>
-										<div class="flex items-center space-x-2">
-											<input
-												id="advanced-newsletter"
-												type="checkbox"
-												bind:checked={advancedFormData.newsletter}
-												class="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
-											/>
-											<label for="advanced-newsletter" class="text-sm text-gray-700">
-												I agree to the terms
-											</label>
-										</div>
-										<Button class="w-full bg-purple-600 text-white hover:bg-purple-700">
-											Save Profile
-										</Button>
-									</Form>
-								{/if}
-							</div>
-						</Preview.Content>
+			<DemoExample
+				title="Form with Validation"
+				description="Form with built-in validation and error states"
+				code={validatedCode}
+			>
+				<Form class="w-full max-w-md space-y-4" onsubmit={(e) => e.preventDefault()}>
+					<div>
+						<label for="validated-email" class="text-foreground mb-1 block text-sm font-medium">
+							Email Address
+						</label>
+						<input
+							id="validated-email"
+							type="email"
+							bind:value={validatedFormData.email}
+							placeholder="Enter your email"
+							required
+							class="border-border bg-background focus:border-primary focus:ring-primary w-full rounded-md border px-3 py-2 text-sm invalid:border-red-500 invalid:ring-red-500 focus:ring-1 focus:outline-none"
+						/>
+					</div>
 
-						<!-- Code -->
-						<Preview.Code code={example.code}></Preview.Code>
-					</Preview.Root>
-				{/each}
-			</div>
-		</section>
+					<div>
+						<label for="validated-password" class="text-foreground mb-1 block text-sm font-medium">
+							Password
+						</label>
+						<input
+							id="validated-password"
+							type="password"
+							bind:value={validatedFormData.password}
+							placeholder="Enter your password"
+							required
+							minlength="8"
+							class="border-border bg-background focus:border-primary focus:ring-primary w-full rounded-md border px-3 py-2 text-sm invalid:border-red-500 invalid:ring-red-500 focus:ring-1 focus:outline-none"
+						/>
+						<p class="text-muted-foreground mt-1 text-xs">Password must be at least 8 characters</p>
+					</div>
 
-		<!-- Form Component Props -->
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Form Component Props</h2>
-			<Props
-				data={[
-					{
-						name: 'renderless',
-						type: 'boolean',
-						default: 'false',
-						description: 'Whether to render as a renderless component (no DOM output)'
-					},
-					{
-						name: 'build',
-						type: 'function',
-						default: '-',
-						description: 'Custom form builder function for advanced state management'
-					},
-					{
-						name: 'children',
-						type: 'Snippet<[{ form: FormBond }]>',
-						default: '-',
-						description: 'Content to render with access to form state'
-					},
-					{
-						name: 'class',
-						type: 'string',
-						default: '',
-						description: 'Additional CSS classes to apply to the form element'
-					}
-				]}
-			></Props>
-		</section>
+					<Button class="bg-primary hover:bg-primary/90 w-full rounded-md px-4 py-2 text-white">
+						Create Account
+					</Button>
+				</Form>
+			</DemoExample>
+		</div>
+	</Section>
 
-		<!-- Field Component Props -->
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Field Component Props</h2>
+	<Section title="API Reference">
+		<div class="space-y-6">
+			<div>
+				<h3 class="text-foreground mb-3 text-lg font-semibold">Form Props</h3>
+				<div class="border-border bg-card overflow-x-auto rounded-lg border">
+					<DataGrid.Root class="min-w-full">
+						<DataGrid.Header class="bg-muted">
+							<DataGrid.Tr>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Prop</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Type</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Default</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									width="2fr">Description</DataGrid.Th
+								>
+							</DataGrid.Tr>
+						</DataGrid.Header>
 
-			<div class="space-y-8">
-				<div>
-					<h3 class="mb-4 text-lg font-semibold text-gray-900">Field.Root</h3>
-					<Props
-						data={[
-							{
-								name: 'name',
-								type: 'string',
-								default: '-',
-								description: 'Unique name identifier for the field'
-							},
-							{
-								name: 'value',
-								type: 'any',
-								default: '-',
-								description: 'The current value of the field (bindable)'
-							},
-							{
-								name: 'disabled',
-								type: 'boolean',
-								default: 'false',
-								description: 'Whether the field is disabled'
-							},
-							{
-								name: 'readonly',
-								type: 'boolean',
-								default: 'false',
-								description: 'Whether the field is read-only'
-							},
-							{
-								name: 'schema',
-								type: 'any',
-								default: '-',
-								description: 'Validation schema for the field'
-							},
-							{
-								name: 'parser',
-								type: 'function',
-								default: '-',
-								description: 'Function to parse and validate the schema'
-							},
-							{
-								name: 'children',
-								type: 'Snippet<[{ field: FieldBond }]>',
-								default: '-',
-								description: 'Content to render with access to field state'
-							}
-						]}
-					></Props>
+						<DataGrid.Body>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>class</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>string</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>''</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>Additional CSS classes to apply</DataGrid.Td
+								>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>onsubmit</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>function</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>-</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>Form submission handler</DataGrid.Td
+								>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>children</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>Snippet</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>-</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm">Form content</DataGrid.Td>
+							</DataGrid.Tr>
+						</DataGrid.Body>
+					</DataGrid.Root>
 				</div>
+			</div>
 
-				<div>
-					<h3 class="mb-4 text-lg font-semibold text-gray-900">Field.Label</h3>
-					<Props
-						data={[
-							{
-								name: 'class',
-								type: 'string',
-								default: '',
-								description: 'Additional CSS classes to apply to the label'
-							},
-							{
-								name: 'children',
-								type: 'Snippet',
-								default: '-',
-								description: 'Label content to render'
-							}
-						]}
-					></Props>
-				</div>
+			<div>
+				<h3 class="text-foreground mb-3 text-lg font-semibold">Field.Root Props</h3>
+				<div class="border-border bg-card overflow-x-auto rounded-lg border">
+					<DataGrid.Root class="min-w-full">
+						<DataGrid.Header class="bg-muted">
+							<DataGrid.Tr>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Prop</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Type</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Default</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									width="2fr">Description</DataGrid.Th
+								>
+							</DataGrid.Tr>
+						</DataGrid.Header>
 
-				<div>
-					<h3 class="mb-4 text-lg font-semibold text-gray-900">Field.Control</h3>
-					<Props
-						data={[
-							{
-								name: 'component',
-								type: 'Component',
-								default: '-',
-								description: 'Custom component to use for the control (e.g., "textarea")'
-							},
-							{
-								name: 'value',
-								type: 'any',
-								default: '-',
-								description: 'The current value of the control (bindable)'
-							},
-							{
-								name: 'class',
-								type: 'string',
-								default: '',
-								description: 'Additional CSS classes to apply to the control'
-							},
-							{
-								name: 'children',
-								type: 'Snippet',
-								default: '-',
-								description: 'Content to render inside the control'
-							},
-							{
-								name: '...restProps',
-								type: 'HTMLAttributes',
-								default: '-',
-								description: 'All standard HTML input/textarea attributes'
-							}
-						]}
-					></Props>
+						<DataGrid.Body>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>name</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>string</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>-</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>Field name for form data</DataGrid.Td
+								>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>value</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>any</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>''</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm">Field value</DataGrid.Td>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>class</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>string</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>''</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>Additional CSS classes</DataGrid.Td
+								>
+							</DataGrid.Tr>
+						</DataGrid.Body>
+					</DataGrid.Root>
 				</div>
 			</div>
-		</section>
 
-		<!-- Accessibility -->
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Accessibility</h2>
-			<div class="rounded-lg border border-blue-200 bg-blue-50 p-6">
-				<div class="flex items-start">
-					<svg
-						class="mt-1 mr-3 h-6 w-6 flex-shrink-0 text-blue-600"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-						/>
-					</svg>
-					<div>
-						<h3 class="mb-2 text-lg font-semibold text-blue-900">
-							Built-in Accessibility Features
-						</h3>
-						<ul class="space-y-1 text-blue-800">
-							<li>• Automatic label-control association with proper `for` attributes</li>
-							<li>• Semantic form structure with proper roles and ARIA attributes</li>
-							<li>• Keyboard navigation support for all form controls</li>
-							<li>• Screen reader compatibility with descriptive labels</li>
-							<li>• Focus management with visible focus indicators</li>
-							<li>• Form validation states communicated to assistive technologies</li>
-							<li>• Proper fieldset and legend usage for grouped controls</li>
-						</ul>
-					</div>
+			<div>
+				<h3 class="text-foreground mb-3 text-lg font-semibold">Field.Label Props</h3>
+				<div class="border-border bg-card overflow-x-auto rounded-lg border">
+					<DataGrid.Root class="min-w-full">
+						<DataGrid.Header class="bg-muted">
+							<DataGrid.Tr>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Prop</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Type</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Default</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									width="2fr">Description</DataGrid.Th
+								>
+							</DataGrid.Tr>
+						</DataGrid.Header>
+
+						<DataGrid.Body>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>for</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>string</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>-</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>ID of the associated form control</DataGrid.Td
+								>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>class</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>string</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>''</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>Additional CSS classes</DataGrid.Td
+								>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>children</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>Snippet</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>-</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm">Label content</DataGrid.Td>
+							</DataGrid.Tr>
+						</DataGrid.Body>
+					</DataGrid.Root>
 				</div>
 			</div>
-		</section>
 
-		<!-- Usage Patterns -->
-		<section class="mb-12">
-			<h2 class="mb-6 text-2xl font-bold text-gray-900">Usage Patterns</h2>
-			<div class="grid gap-6 md:grid-cols-2">
-				<div class="rounded-lg border border-gray-200 p-6">
-					<h3 class="mb-3 text-lg font-semibold text-gray-900">Simple Form</h3>
-					<p class="mb-4 text-sm text-gray-600">
-						Use standard HTML form elements for basic forms without complex state management needs.
-					</p>
-					<div class="rounded bg-gray-100 p-3">
-						<code class="text-sm">
-							&lt;form&gt;<br />
-							&nbsp;&nbsp;&lt;input type="text" /&gt;<br />
-							&nbsp;&nbsp;&lt;button&gt;Submit&lt;/button&gt;<br />
-							&lt;/form&gt;
-						</code>
-					</div>
-				</div>
+			<div>
+				<h3 class="text-foreground mb-3 text-lg font-semibold">Field.Control Props</h3>
+				<div class="border-border bg-card overflow-x-auto rounded-lg border">
+					<DataGrid.Root class="min-w-full">
+						<DataGrid.Header class="bg-muted">
+							<DataGrid.Tr>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Prop</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Type</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									>Default</DataGrid.Th
+								>
+								<DataGrid.Th
+									class="border-border text-muted-foreground border-b px-6 py-3 text-left text-xs font-medium tracking-wider uppercase"
+									width="2fr">Description</DataGrid.Th
+								>
+							</DataGrid.Tr>
+						</DataGrid.Header>
 
-				<div class="rounded-lg border border-gray-200 p-6">
-					<h3 class="mb-3 text-lg font-semibold text-gray-900">Advanced Form</h3>
-					<p class="mb-4 text-sm text-gray-600">
-						Use Form and Field components for complex forms with validation, state management, and
-						dynamic behavior.
-					</p>
-					<div class="rounded bg-gray-100 p-3">
-						<code class="text-sm">
-							&lt;Form&gt;<br />
-							&nbsp;&nbsp;&lt;Field.Root&gt;<br />
-							&nbsp;&nbsp;&nbsp;&nbsp;&lt;Field.Label /&gt;<br />
-							&nbsp;&nbsp;&nbsp;&nbsp;&lt;Field.Control /&gt;<br />
-							&nbsp;&nbsp;&lt;/Field.Root&gt;<br />
-							&lt;/Form&gt;
-						</code>
-					</div>
+						<DataGrid.Body>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>component</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>Component</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>-</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>Component to use for the control</DataGrid.Td
+								>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>class</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>string</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>''</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>Additional CSS classes</DataGrid.Td
+								>
+							</DataGrid.Tr>
+							<DataGrid.Tr>
+								<DataGrid.Td class="text-accent px-6 py-4 font-mono text-sm whitespace-nowrap"
+									>...props</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>any</DataGrid.Td
+								>
+								<DataGrid.Td class="text-muted-foreground px-6 py-4 text-sm whitespace-nowrap"
+									>-</DataGrid.Td
+								>
+								<DataGrid.Td class="text-foreground px-6 py-4 text-sm"
+									>All other props passed to control component</DataGrid.Td
+								>
+							</DataGrid.Tr>
+						</DataGrid.Body>
+					</DataGrid.Root>
 				</div>
 			</div>
-		</section>
-
-		<!-- Navigation -->
-		<div class="flex items-center justify-between border-t border-gray-200 pt-8">
-			<a
-				href="/components/button"
-				class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
-			>
-				<svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M15 19l-7-7 7-7"
-					/>
-				</svg>
-				Previous: Button
-			</a>
-
-			<a
-				href="/components/input"
-				class="inline-flex items-center text-purple-600 transition-colors hover:text-purple-700"
-			>
-				Next: Input
-				<svg class="ml-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-				</svg>
-			</a>
 		</div>
-	</div>
+	</Section>
 
-	<ContentSidebar
-		data={[
-			{ title: 'Installation', href: '/components/form#installation' },
-			{ title: 'Examples', href: '/components/form#examples' },
-			{ title: 'Form Props', href: '/components/form#form-props' },
-			{ title: 'Field Props', href: '/components/form#field-props' },
-			{ title: 'Accessibility', href: '/components/form#accessibility' },
-			{ title: 'Usage Patterns', href: '/components/form#usage-patterns' }
-		]}
+	<Section title="Accessibility">
+		<AccessibilityInfo
+			features={[
+				'Proper semantic form and input elements',
+				'Label association with for/id attributes',
+				'Keyboard navigation and focus management',
+				'Built-in validation with aria-invalid',
+				'Screen reader compatible error messages',
+				'Support for required and optional fields'
+			]}
+		/>
+	</Section>
+
+	<PageNavigation
+		prev={{ label: 'Back to Components', href: '/components' }}
+		next={{ label: 'Next: Accordion', href: '/components/accordion' }}
 	/>
 </div>
-
-<style>
-	.page-grid {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-	}
-</style>
diff --git a/src/routes/header.svelte b/src/routes/header.svelte
index a99ba83..97aa8ce 100644
--- a/src/routes/header.svelte
+++ b/src/routes/header.svelte
@@ -27,12 +27,12 @@
 				<div class="flex items-center gap-8">
 					<a href="/" class="group flex items-center space-x-3">
 						<div
-							class=" flex h-10 w-10 transform items-center justify-center rounded-lg transition-transform duration-200 group-hover:scale-105"
+							class=" flex h-12 w-12 transform items-center justify-center rounded-lg transition-transform duration-200 group-hover:scale-105"
 						>
 							<Logo class="text-palette-proton" />
 						</div>
 						<div>
-							<h1 class="bg-gradient-to-r text-xl font-bold text-palette-ion">Atomic SV</h1>
+							<h1 class="bg-gradient-to-r text-xl font-bold text-palette-ion">Atoms</h1>
 							<p class="text-xs text-gray-500 dark:text-gray-400">UI Component Library</p>
 						</div>
 					</a>