diff --git a/src/routes/posts/[slug]/+page.svelte b/src/routes/posts/[slug]/+page.svelte
index ab981cd..db19b92 100644
--- a/src/routes/posts/[slug]/+page.svelte
+++ b/src/routes/posts/[slug]/+page.svelte
@@ -88,56 +88,59 @@
 			{/if}
 
 			{#if data.series && data.seriesPosts.length > 0}
-				<details class="series-navigation" open>
+				<details class="series-nav" open>
 					<summary class="series-title" id="series-navigation-title">
 						<span
 							>{$page.data.aliases?.series || '系列'} -
 							<a href={resolve('/series/[slug]', { slug: data.series.slug })}>{data.series.name}</a
 							></span
 						>
-						<svg
-							class="details-icon"
-							aria-hidden="true"
-							focusable="false"
-							role="img"
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 256 512"
-							width="12"
-							height="12"
-							><path
-								fill="currentColor"
-								d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-							></path></svg
-						>
+						<span class="details-icon">
+							<svg
+								aria-hidden="true"
+								focusable="false"
+								role="img"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 256 512"
+								width="12"
+								height="12"
+								><path
+									fill="currentColor"
+									d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+								></path></svg
+							>
+						</span>
 					</summary>
 					<div class="series-content">
-						<ol>
-							{#each data.seriesPosts as seriesPost (seriesPost.id)}
-								<li class:current={seriesPost.id === data.post.id}>
-									{#if seriesPost.id === data.post.id}
-										<span aria-current="page">{seriesPost.title}</span>
-									{:else}
-										<a href={resolve('/posts/[slug]', { slug: seriesPost.slug })}
-											>{seriesPost.title}</a
+						<nav>
+							<ul>
+								{#each data.seriesPosts as seriesPost (seriesPost.id)}
+									<li class:current={seriesPost.id === data.post.id}>
+										{#if seriesPost.id === data.post.id}
+											<span class="active" aria-current="page">{seriesPost.title}</span>
+										{:else}
+											<a href={resolve('/posts/[slug]', { slug: seriesPost.slug })}
+												>{seriesPost.title}</a
+											>
+										{/if}
+									</li>
+								{/each}
+							</ul>
+							{#if previousSeriesPost || nextSeriesPost}
+								<div class="series-prev-next" aria-label="系列文章翻页">
+									{#if previousSeriesPost}
+										<a href={resolve('/posts/[slug]', { slug: previousSeriesPost.slug })}
+											>← {previousSeriesPost.title}</a
+										>
+									{:else}<span></span>{/if}
+									{#if nextSeriesPost}
+										<a href={resolve('/posts/[slug]', { slug: nextSeriesPost.slug })}
+											>{nextSeriesPost.title} →</a
 										>
 									{/if}
-								</li>
-							{/each}
-						</ol>
-						{#if previousSeriesPost || nextSeriesPost}
-							<nav class="series-prev-next" aria-label="系列文章翻页">
-								{#if previousSeriesPost}
-									<a href={resolve('/posts/[slug]', { slug: previousSeriesPost.slug })}
-										>← {previousSeriesPost.title}</a
-									>
-								{:else}<span></span>{/if}
-								{#if nextSeriesPost}
-									<a href={resolve('/posts/[slug]', { slug: nextSeriesPost.slug })}
-										>{nextSeriesPost.title} →</a
-									>
-								{/if}
-							</nav>
-						{/if}
+								</div>
+							{/if}
+						</nav>
 					</div>
 				</details>
 			{/if}
@@ -185,102 +188,118 @@
 </main>
 
 <style>
-	.series-navigation {
-		margin: 1.5rem 0;
+	.series-nav {
+		margin: 0.8rem 0;
 		border-radius: 4px;
 		overflow: hidden;
-		border: 1px solid var(--border-color);
 	}
 
-	.series-navigation .series-title {
+	.series-nav .series-title {
+		font-size: 1.15rem;
+		font-weight: bold;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0.75rem 1rem;
-		background: rgba(0, 0, 0, 0.05);
-		font-weight: 600;
+		line-height: 2em;
+		padding: 0 0.75rem;
+		background-color: rgba(0, 0, 0, 0.05);
 		cursor: pointer;
 		list-style: none;
 		user-select: none;
+		transition: background-color 0.3s;
 	}
 
-	.series-navigation .series-title::-webkit-details-marker {
+	.series-nav[open] .series-title {
+		background-color: rgba(0, 0, 0, 0.08);
+	}
+
+	.series-nav .series-title::-webkit-details-marker {
 		display: none;
 	}
 
-	.series-navigation .details-icon {
+	.series-nav .details-icon {
 		transition: transform 0.3s;
+		display: flex;
+		align-items: center;
 	}
 
-	.series-navigation[open] .details-icon {
+	.series-nav[open] .details-icon {
 		transform: rotate(90deg);
 	}
 
-	.series-navigation .series-title a,
-	.series-navigation li a,
-	.series-prev-next a {
+	.series-nav .series-title a,
+	.series-nav li a,
+	.series-nav .series-prev-next a {
 		color: var(--text-color);
 		text-decoration: none;
 	}
 
-	.series-navigation .series-title a:hover,
-	.series-navigation li a:hover,
-	.series-prev-next a:hover {
+	.series-nav .series-title a:hover,
+	.series-nav li a:hover,
+	.series-nav .series-prev-next a:hover {
 		color: var(--accent-color, #419b38);
 	}
 
-	.series-navigation .series-content {
-		padding: 1rem;
-		background: rgba(0, 0, 0, 0.015);
+	.series-nav .series-content {
+		font-size: 1rem;
+		background-color: rgba(0, 0, 0, 0.02);
 	}
 
-	.series-navigation ol {
+	.series-nav .series-content > nav > ul {
 		margin: 0;
-		padding: 0 0 0 1.5rem;
-		list-style-type: none;
+		padding: 0.4rem 1rem 0.4rem 1.8rem;
+		list-style: none;
+		text-indent: -0.85rem;
 	}
 
-	.series-navigation li {
-		padding: 0.35rem 0;
-		position: relative;
+	.series-nav li {
+		padding: 0;
+		line-height: 1.8;
+		padding-left: 0.8rem;
 	}
 
-	.series-navigation li::before {
+	.series-nav li a::before {
 		content: '|';
-		position: absolute;
-		left: -1rem;
-		color: var(--border-color);
-		font-weight: bold;
+		font-weight: bolder;
+		margin-right: 0.5rem;
+		color: var(--text-color);
+		opacity: 0.6;
 	}
 
-	.series-navigation li.current {
-		font-weight: 700;
+	.series-nav li span.active {
+		font-weight: bolder;
+		color: var(--text-color);
+	}
+
+	.series-nav li span.active::before {
+		content: '|';
+		font-weight: bolder;
+		margin-right: 0.5rem;
 		color: var(--accent-color, #419b38);
 	}
 
-	.series-navigation li.current::before {
+	.series-nav li a:hover::before {
 		color: var(--accent-color, #419b38);
 	}
 
-	.series-prev-next {
+	.series-nav .series-prev-next {
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		gap: 1rem;
-		margin-top: 1rem;
-		padding-top: 1rem;
+		padding: 0.8rem 1rem;
 		border-top: 1px dashed var(--border-color, rgba(0, 0, 0, 0.12));
 		font-size: 0.9em;
 	}
 
-	.series-prev-next a:last-child {
+	.series-nav .series-prev-next a:last-child {
 		text-align: right;
 	}
 
 	@media (max-width: 640px) {
-		.series-prev-next {
+		.series-nav .series-prev-next {
 			grid-template-columns: 1fr;
 		}
-		.series-prev-next a:last-child {
+		.series-nav .series-prev-next a:last-child {
 			text-align: left;
 		}
 	}