diff --git a/src/routes/posts/[slug]/+page.server.ts b/src/routes/posts/[slug]/+page.server.ts
index c1d7475..353b4d7 100644
--- a/src/routes/posts/[slug]/+page.server.ts
+++ b/src/routes/posts/[slug]/+page.server.ts
@@ -32,7 +32,11 @@ export const load: PageServerLoad = async ({ platform, params }) => {
 				content: dummyMarkdown,
 				date: '2026-07-12',
 				author: 'Admin'
-			}
+			},
+			tags: [
+				{ name: 'Welcome', id: 1 },
+				{ name: 'Design', id: 2 }
+			]
 		};
 	}
 
@@ -48,11 +52,20 @@ export const load: PageServerLoad = async ({ platform, params }) => {
 			error(404, 'Post not found');
 		}
 
+		const tagsQuery: any = await db.prepare(
+			`SELECT t.name, t.id
+			 FROM tags t
+			 JOIN post_tags pt ON t.id = pt.tag_id
+			 WHERE pt.post_id = ?`
+		).bind(post.id).all();
+		const tags = tagsQuery.results || [];
+
 		return {
 			post: {
 				...post,
 				date: new Date(post.date as string).toLocaleDateString()
-			}
+			},
+			tags
 		};
 	} catch (err) {
 		console.error('Error fetching post:', err);
diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index 75c3251..54d1690 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -156,6 +156,18 @@
 			sidebarShow = false;
 		}
 
+		$effect(() => {
+			if (sidebarShow) {
+				document.body.classList.add('sidebar-show');
+			} else {
+				document.body.classList.remove('sidebar-show');
+			}
+			
+			return () => {
+				document.body.classList.remove('sidebar-show');
+			};
+		});
+
 		// 绑定 Fancybox
 		Fancybox.bind('[data-fancybox]', {});
 
@@ -276,20 +288,28 @@
 	<title>{data.post.title} - BlogFlare</title>
 </svelte:head>
 
-<main id="pjax-container" class:sidebar-show={sidebarShow}>
+<main id="pjax-container">
 	<div class="wrapper container narrow contents-wrap">
 		<article class="article-detail yue">
-			<header class="article-header">
-				<h1 class="title">{data.post.title}</h1>
-				<div class="headline-meta">
-					<time>Posted on {data.post.date}</time> 
-					<span class="word-count">&bull; {data.post.author}</span>
-				</div>
-			</header>
+			<div class="banner-title">
+				<h1 class="post-title">{data.post.title}</h1>
+				<p class="post-meta">
+					<span><a href="/">{data.post.author}</a></span>&nbsp;&bull;&nbsp;
+					<time>{data.post.date}</time>
+				</p>
+			</div>
 			
 			<section class="articleBody article-content js-toc-content">
 				{@html htmlContent}
 			</section>
+
+			{#if data.tags && data.tags.length > 0}
+				<section class="tags">
+					{#each data.tags as tag}
+						<a href="/tags/{tag.name}" rel="tag" class="tag-item">{tag.name}</a>
+					{/each}
+				</section>
+			{/if}
 		</article>
 	</div>
 
@@ -304,7 +324,6 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div id="toggle-toc" class="ctrler-item" onclick={() => sidebarShow = !sidebarShow}>
-		<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
+		<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L27 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 120.8c9.8 9.3 10 24.8.4 34.3z"></path></svg>
 	</div>
 </main>
-