diff --git a/server/prisma/dev.db b/server/prisma/dev.db
index 63b7ea8..2ed7c06 100644
Binary files a/server/prisma/dev.db and b/server/prisma/dev.db differ
diff --git a/webapp/src/routes/__layout.svelte b/webapp/src/routes/__layout.svelte
index 85b713d..fbcb7c8 100644
--- a/webapp/src/routes/__layout.svelte
+++ b/webapp/src/routes/__layout.svelte
@@ -4,7 +4,23 @@
 	import '../app.css';
 </script>
 
-<div class="container mx-auto max-w-2xl mx-auto mt-6 px-4">
+<div id="navbar" class="h-14 border-b border-neutral-200">
+	<div
+		id="navbar-content"
+		class="h-full max-w-6xl mx-auto flex items-center justify-between content-center"
+	>
+		<div id="navbar-left" class="flex gap-8 flex">
+			<span id="name" class="font-extrabold text-lg">[Obsidian Note Sharing]</span>
+			<ul class="flex gap-5 content-center">
+				<li class="hidden lg:block self-center">Install</li>
+				<li class="hidden lg:block self-center">About</li>
+			</ul>
+		</div>
+		<div id="navbar-right">test</div>
+	</div>
+</div>
+
+<div class="container mx-auto max-w-2xl mx-auto mt-6 px-4 2xl:px-0">
 	<slot />
 	<Footer />
 </div>
diff --git a/webapp/tailwind.config.cjs b/webapp/tailwind.config.cjs
index 328b28c..57d1734 100644
--- a/webapp/tailwind.config.cjs
+++ b/webapp/tailwind.config.cjs
@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+	darkMode: 'class',
 	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {}
-	},
-	plugins: []
+	}
 };