diff --git a/frontend-v2/src/app.css b/frontend-v2/src/app.css
index c8aae39..f2b2352 100644
--- a/frontend-v2/src/app.css
+++ b/frontend-v2/src/app.css
@@ -1,14 +1,28 @@
+@import 'tailwindcss';
+
 @font-face {
-  font-family: 'HackNerdMono';
-  src: url('/font/HackNerdMono.woff2') format('woff2');
+	font-family: 'HackNerdMono';
+	src: url('/font/HackNerdMono.woff2') format('woff2');
 }
 
-:root {
-  --font-noto-sans-tc: 'Noto Sans TC', sans-serif;
-  --font-noto-sans-mono: 'Noto Sans Mono', monospace;
-  --font-hack-nerd-mono: 'HackNerdMono', monospace;
+@theme {
+	--font-sans: 'Noto Sans TC', sans-serif;
+	--font-mono: 'HackNerdMono', 'Noto Sans Mono', monospace;
+	--spacing-toolbar-height: 4rem;
+	--spacing-content-height: calc(100vh - var(--spacing-toolbar-height));
 }
 
 body {
-  font-family: var(--font-noto-sans-tc);
-}
\ No newline at end of file
+	@apply bg-white font-sans text-base font-normal text-gray-600;
+}
+
+pre,
+code,
+kbd,
+samp {
+	@apply font-mono;
+}
+
+.toolbar {
+	@apply h-[--tool-bar-height];
+}
diff --git a/frontend-v2/src/app.html b/frontend-v2/src/app.html
index 79eeda9..f891aca 100644
--- a/frontend-v2/src/app.html
+++ b/frontend-v2/src/app.html
@@ -9,10 +9,10 @@
 		<meta name="description" content="程式、科技、教學、分享" />
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&family=Noto+Sans+TC:wght@100..900&display=swap" rel="stylesheet">
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="antialiased">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/frontend-v2/src/lib/Action.svelte b/frontend-v2/src/lib/Action.svelte
new file mode 100644
index 0000000..c5c906c
--- /dev/null
+++ b/frontend-v2/src/lib/Action.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { label, link, isSelected } = $props();
+</script>
+
+<div class:rounded={isSelected} class:px-1.5={isSelected} class:bg-blue-600={isSelected} class:bg-transparent={!isSelected}>
+  <a class:font-extrabold={true} class:text-white={isSelected} class:text-gray-800={!isSelected} href={link}>
+    {label}
+  </a>
+</div>
diff --git a/frontend-v2/src/lib/Navbar.svelte b/frontend-v2/src/lib/Navbar.svelte
new file mode 100644
index 0000000..b28d27a
--- /dev/null
+++ b/frontend-v2/src/lib/Navbar.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import Action from '$lib/Action.svelte';
+</script>
+
+<div class="border-b border-gray-300">
+  <div class="mx-auto flex h-toolbar-height max-w-screen-xl flex-row items-center justify-between px-4 md:px-6">
+    <a class="flex flex-row items-center gap-x-2" href="/">
+      <img class="mt-1 size-10" src="/icon/logo-light.svg" alt="SquidSpirit" />
+      <span class="text-2xl font-black text-gray-800">魚之魷魂</span>
+    </a>
+    <div class="flex flex-row items-center gap-x-6">
+      <Action label="首頁" link="/" isSelected={page.url.pathname === '/'} />
+    </div>
+  </div>
+</div>
diff --git a/frontend-v2/src/routes/+layout.svelte b/frontend-v2/src/routes/+layout.svelte
index b93e9ba..77bd187 100644
--- a/frontend-v2/src/routes/+layout.svelte
+++ b/frontend-v2/src/routes/+layout.svelte
@@ -1,7 +1,8 @@
-<script lang="ts">
-	import '../app.css';
-
-	let { children } = $props();
+<script>
+  import Navbar from "$lib/Navbar.svelte";
+  import "../app.css";
 </script>
 
-{@render children()}
+<Navbar />
+
+<slot />
\ No newline at end of file
