diff --git a/src/app.scss b/src/app.scss
index 3368530d..9240ba5b 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -19,7 +19,6 @@ body {
 	font-family: var(--font-family);
 	font-size: 1.4rem;
 	height: 100%;
-	padding: spacing.$unit-2x !important;
 
 	&.no-scroll {
 		overflow: hidden;
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 43cf4814..3f6f9bbc 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -152,6 +152,7 @@
 		flex-direction: row;
 		justify-content: space-between;
 		align-items: center;
+		padding-top: spacing.$unit-2x;
 
 		ul {
 			background-color: var(--menu-bg);
diff --git a/src/lib/components/ui/Sidebar.svelte b/src/lib/components/ui/Sidebar.svelte
new file mode 100644
index 00000000..c61e9713
--- /dev/null
+++ b/src/lib/components/ui/Sidebar.svelte
@@ -0,0 +1,91 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import SidebarHeader from './SidebarHeader.svelte'
+	import { SIDEBAR_WIDTH } from '$lib/stores/sidebar.svelte'
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		/** Whether the sidebar is open */
+		open?: boolean
+		/** Title for the sidebar header */
+		title?: string
+		/** Callback when close is requested */
+		onclose?: () => void
+		/** Content to render in the sidebar */
+		children?: Snippet
+		/** Optional header actions */
+		headerActions?: Snippet
+	}
+
+	const {
+		open = false,
+		title,
+		onclose,
+		children,
+		headerActions
+	}: Props = $props()
+</script>
+
+<aside
+	class="sidebar"
+	class:open
+	style:--sidebar-width={open ? SIDEBAR_WIDTH : '0'}
+>
+	{#if title}
+		<SidebarHeader {title} {onclose} actions={headerActions} />
+	{/if}
+
+	<div class="sidebar-content">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</aside>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+	@use '$src/themes/layout' as *;
+	@use '$src/themes/effects' as *;
+
+	.sidebar {
+		height: 100vh;
+		background: var(--bg-primary);
+		border-left: 1px solid var(--border-primary);
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		width: 0;
+		overflow: hidden;
+		transition: width $duration-slide ease-in-out;
+
+		&.open {
+			width: var(--sidebar-width);
+		}
+
+		.sidebar-content {
+			flex: 1;
+			overflow-y: auto;
+			padding: $unit-2x;
+		}
+
+		// Mobile styles - overlay approach
+		@media (max-width: 768px) {
+			position: fixed;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 100;
+			transform: translateX(100%);
+			transition: transform $duration-slide ease-in-out, width 0s;
+			width: 100vw !important;
+			max-width: 400px;
+
+			&.open {
+				transform: translateX(0);
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/ui/SidebarHeader.svelte b/src/lib/components/ui/SidebarHeader.svelte
new file mode 100644
index 00000000..f4c4c321
--- /dev/null
+++ b/src/lib/components/ui/SidebarHeader.svelte
@@ -0,0 +1,100 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import Button from './Button.svelte'
+	import closeIcon from '$src/assets/icons/close.svg?raw'
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		/** Title for the sidebar header */
+		title: string
+		/** Callback when close is requested */
+		onclose?: () => void
+		/** Optional additional actions to render in the header */
+		actions?: Snippet
+	}
+
+	const { title, onclose, actions }: Props = $props()
+</script>
+
+<div class="sidebar-header">
+	<h2 class="sidebar-title">{title}</h2>
+
+	{#if actions}
+		<div class="header-actions">
+			{@render actions()}
+		</div>
+	{/if}
+
+	{#if onclose}
+		<button
+			onclick={onclose}
+			class="close-button"
+			aria-label="Close sidebar"
+		>
+			{@html closeIcon}
+		</button>
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+
+	.sidebar-header {
+		display: flex;
+		align-items: center;
+		gap: $unit;
+		padding: $unit-2x;
+		border-bottom: 1px solid var(--border-primary);
+		flex-shrink: 0;
+		background: var(--bg-primary);
+
+		.sidebar-title {
+			flex: 1;
+			margin: 0;
+			font-size: $font-large;
+			font-weight: $bold;
+			color: var(--text-primary);
+		}
+
+		.header-actions {
+			display: flex;
+			gap: $unit;
+			align-items: center;
+		}
+
+		.close-button {
+			margin-left: $unit;
+			padding: $unit;
+			background: transparent;
+			border: none;
+			cursor: pointer;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 4px;
+			color: var(--text-secondary);
+			transition: background-color 0.2s, color 0.2s;
+			width: 32px;
+			height: 32px;
+			flex-shrink: 0;
+
+			:global(svg) {
+				width: 14px;
+				height: 14px;
+				fill: currentColor;
+			}
+
+			&:hover {
+				background-color: var(--button-bg);
+				color: var(--text-primary);
+			}
+
+			&:active {
+				transform: translateY(1px);
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/stores/sidebar.svelte.ts b/src/lib/stores/sidebar.svelte.ts
new file mode 100644
index 00000000..5c38830b
--- /dev/null
+++ b/src/lib/stores/sidebar.svelte.ts
@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte'
+
+// Standard sidebar width
+export const SIDEBAR_WIDTH = '420px'
+
+interface SidebarState {
+	open: boolean
+	title?: string
+	content?: Snippet
+}
+
+class SidebarStore {
+	state = $state<SidebarState>({
+		open: false,
+		title: undefined,
+		content: undefined
+	})
+
+	open(title?: string, content?: Snippet) {
+		this.state.open = true
+		this.state.title = title
+		this.state.content = content
+	}
+
+	close() {
+		this.state.open = false
+		// Clear content after animation
+		setTimeout(() => {
+			this.state.title = undefined
+			this.state.content = undefined
+		}, 300)
+	}
+
+	toggle() {
+		if (this.state.open) {
+			this.close()
+		} else {
+			this.open()
+		}
+	}
+
+	get isOpen() {
+		return this.state.open
+	}
+
+	get title() {
+		return this.state.title
+	}
+
+	get content() {
+		return this.state.content
+	}
+}
+
+export const sidebar = new SidebarStore()
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d4c24a4c..458e9d08 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
 	import '$src/app.scss'
 
 	import Navigation from '$lib/components/Navigation.svelte'
+	import Sidebar from '$lib/components/ui/Sidebar.svelte'
+	import { sidebar } from '$lib/stores/sidebar.svelte'
 	import { Tooltip } from 'bits-ui'
 
 	// Get `data` and `children` from the router via $props()
@@ -19,8 +21,38 @@
 </svelte:head>
 
 <Tooltip.Provider>
-	<main>
-		<Navigation isAuthenticated={data?.isAuthenticated} username={data?.account?.username} role={data?.account?.role} />
-		{@render children?.()}
-	</main>
+	<div class="app-container">
+		<main class:sidebar-open={sidebar.isOpen}>
+			<Navigation isAuthenticated={data?.isAuthenticated} username={data?.account?.username} role={data?.account?.role} />
+			{@render children?.()}
+		</main>
+
+		<Sidebar
+			open={sidebar.isOpen}
+			title={sidebar.title}
+			onclose={() => sidebar.close()}
+		>
+			{#if sidebar.content}
+				{@render sidebar.content()}
+			{/if}
+		</Sidebar>
+	</div>
 </Tooltip.Provider>
+
+<style lang="scss">
+	@use '$src/themes/effects' as *;
+
+	.app-container {
+		display: flex;
+		min-height: 100vh;
+		width: 100%;
+		overflow-x: hidden;
+	}
+
+	main {
+		flex: 1;
+		min-width: 0;
+		overflow-x: auto;
+		transition: margin-right $duration-slide ease-in-out;
+	}
+</style>
diff --git a/src/routes/test-sidebar/+page.svelte b/src/routes/test-sidebar/+page.svelte
new file mode 100644
index 00000000..d2a623e2
--- /dev/null
+++ b/src/routes/test-sidebar/+page.svelte
@@ -0,0 +1,192 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { sidebar } from '$lib/stores/sidebar.svelte'
+	import Button from '$lib/components/ui/Button.svelte'
+
+	function openSearchSidebar() {
+		sidebar.open('Search', searchContent)
+	}
+
+	function openDetailsSidebar() {
+		sidebar.open('Item Details', detailsContent)
+	}
+
+	function openFilterSidebar() {
+		sidebar.open('Filters', filterContent)
+	}
+</script>
+
+<div class="container">
+	<h1>Sidebar Test Page</h1>
+	<p>Click the buttons below to test different sidebar configurations:</p>
+
+	<div class="button-group">
+		<Button variant="primary" onclick={openSearchSidebar}>
+			Open Search Sidebar
+		</Button>
+		<Button variant="secondary" onclick={openDetailsSidebar}>
+			Open Details Sidebar
+		</Button>
+		<Button variant="secondary" onclick={openFilterSidebar}>
+			Open Filter Sidebar
+		</Button>
+	</div>
+
+	<div class="content">
+		<h2>Main Content Area</h2>
+		<p>This content will shrink when the sidebar opens, creating a two-pane layout.</p>
+		<p>All sidebars have a standard width of 420px for consistency.</p>
+		<p>On mobile devices, the sidebar will overlay the main content instead of shrinking it.</p>
+	</div>
+</div>
+
+{#snippet searchContent()}
+	<div class="sidebar-demo-content">
+		<input type="text" placeholder="Search..." class="search-input" />
+		<div class="search-results">
+			<div class="result-item">Result 1</div>
+			<div class="result-item">Result 2</div>
+			<div class="result-item">Result 3</div>
+		</div>
+	</div>
+{/snippet}
+
+{#snippet detailsContent()}
+	<div class="sidebar-demo-content">
+		<h3>Item Name</h3>
+		<p>This is a detailed view of an item with lots of information.</p>
+		<div class="detail-section">
+			<h4>Statistics</h4>
+			<ul>
+				<li>Attack: 1000</li>
+				<li>HP: 500</li>
+				<li>Element: Fire</li>
+			</ul>
+		</div>
+		<div class="detail-section">
+			<h4>Description</h4>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+		</div>
+	</div>
+{/snippet}
+
+{#snippet filterContent()}
+	<div class="sidebar-demo-content">
+		<div class="filter-group">
+			<h4>Element</h4>
+			<label><input type="checkbox" /> Fire</label>
+			<label><input type="checkbox" /> Water</label>
+			<label><input type="checkbox" /> Earth</label>
+			<label><input type="checkbox" /> Wind</label>
+		</div>
+		<div class="filter-group">
+			<h4>Rarity</h4>
+			<label><input type="checkbox" /> SSR</label>
+			<label><input type="checkbox" /> SR</label>
+			<label><input type="checkbox" /> R</label>
+		</div>
+		<Button variant="primary" fullWidth onclick={() => sidebar.close()}>
+			Apply Filters
+		</Button>
+	</div>
+{/snippet}
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/colors' as *;
+	@use '$src/themes/typography' as *;
+
+	.container {
+		padding: $unit-3x;
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	.button-group {
+		display: flex;
+		gap: $unit;
+		margin: $unit-2x 0;
+		flex-wrap: wrap;
+	}
+
+	.content {
+		margin-top: $unit-3x;
+		padding: $unit-2x;
+		background: var(--bg-secondary);
+		border-radius: 8px;
+	}
+
+	:global(.sidebar-demo-content) {
+		.search-input {
+			width: 100%;
+			padding: $unit;
+			border: 1px solid var(--border-primary);
+			border-radius: 4px;
+			background: var(--bg-secondary);
+			color: var(--text-primary);
+			font-size: $font-regular;
+			margin-bottom: $unit-2x;
+
+			&:focus {
+				outline: none;
+				border-color: var(--accent-blue);
+			}
+		}
+
+		.search-results {
+			display: flex;
+			flex-direction: column;
+			gap: $unit;
+		}
+
+		.result-item {
+			padding: $unit;
+			background: var(--bg-secondary);
+			border-radius: 4px;
+			cursor: pointer;
+
+			&:hover {
+				background: var(--bg-tertiary);
+			}
+		}
+
+		.detail-section {
+			margin: $unit-2x 0;
+
+			h4 {
+				margin-bottom: $unit;
+				color: var(--text-secondary);
+			}
+
+			ul {
+				list-style: none;
+				padding: 0;
+				margin: 0;
+
+				li {
+					padding: $unit-half 0;
+				}
+			}
+		}
+
+		.filter-group {
+			margin-bottom: $unit-2x;
+
+			h4 {
+				margin-bottom: $unit;
+				color: var(--text-secondary);
+			}
+
+			label {
+				display: block;
+				padding: $unit-half 0;
+				cursor: pointer;
+
+				input {
+					margin-right: $unit;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/themes/_effects.scss b/src/themes/_effects.scss
index 361eeeb9..23ccf941 100644
--- a/src/themes/_effects.scss
+++ b/src/themes/_effects.scss
@@ -22,6 +22,7 @@ $duration-opacity-fade: 0.12s;
 $duration-instant: 100ms; // For immediate feedback (switch toggle)
 $duration-quick: 0.15s; // For quick transitions (dropdowns, menus)
 $duration-standard: 0.2s; // For standard animations (modals, segments)
+$duration-slide: 0.3s; // For sliding panels and sidebars
 
 // Gradients
 $hero--gradient--light: