diff --git a/src/lib/components/Navbar.stories.svelte b/src/lib/components/Navbar.stories.svelte
new file mode 100644
index 0000000..fe5c161
--- /dev/null
+++ b/src/lib/components/Navbar.stories.svelte
@@ -0,0 +1,12 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Navbar from './Navbar.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Navbar',
+		component: Navbar,
+		tags: ['autodocs']
+	});
+</script>
+
+<Story name="Default" args={{ title: 'Storybook' }} />
\ No newline at end of file
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
new file mode 100644
index 0000000..5e0a0e4
--- /dev/null
+++ b/src/lib/components/Navbar.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	let { title }: { title: string } = $props();
+</script>
+
+<header>
+	<div class="navbar">
+		<div>
+			<h2>Hestia</h2>
+		</div>
+		<div>
+			<h1>{title}</h1>
+		</div>
+		<div>
+			<p>Welcome!</p>
+		</div>
+	</div>
+</header>
+
+<style>
+	.navbar {
+		@apply flex items-center justify-between border-b-slate-200 bg-slate-100 px-6 py-2 drop-shadow;
+	}
+
+	.navbar h1 {
+		@apply text-2xl;
+	}
+
+	.navbar h2 {
+		@apply text-xl;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..1689ba6
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1 @@
+export * from './Navbar.svelte';
\ No newline at end of file
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 856f2b6..e5efcb2 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,2 @@
 // place files you want to import through the `$lib` alias in this folder.
+export * from './components';
\ No newline at end of file