diff --git a/components/post-storyline-nav.tsx b/components/post-storyline-nav.tsx
index ab45c3d..851ac53 100644
--- a/components/post-storyline-nav.tsx
+++ b/components/post-storyline-nav.tsx
@@ -13,7 +13,6 @@ interface StationConfig {
   label: string;
   post?: Post;
   hint: string;
-  align: 'start' | 'center' | 'end';
   rel?: 'prev' | 'next';
 }
 
@@ -21,144 +20,94 @@ export function PostStorylineNav({ current, newer, older }: Props) {
   const stations: StationConfig[] = [
     {
       key: 'older',
-      label: '回程站',
+      label: '上一站',
       post: older,
-      hint: older
-        ? `發表於 ${formatDate(older.published_at)}`
-        : '這裡已是最早的文章',
-      align: 'start',
+      hint: older ? `發表於 ${formatDate(older.published_at)}` : '沒有更早的文章',
       rel: 'prev'
     },
     {
       key: 'current',
       label: '你在這裡',
       post: current,
-      hint: current.published_at
-        ? `本篇發表於 ${formatDate(current.published_at)}`
-        : '草稿狀態',
-      align: 'center'
+      hint: current.published_at ? formatDate(current.published_at) : '草稿'
     },
     {
       key: 'newer',
-      label: '前進站',
+      label: '下一站',
       post: newer,
-      hint: newer
-        ? `發表於 ${formatDate(newer.published_at)}`
-        : '還沒有更新的文章',
-      align: 'end',
+      hint: newer ? `發表於 ${formatDate(newer.published_at)}` : '還沒有新文章',
       rel: 'next'
     }
   ];
 
   return (
-    <nav
-      aria-label="文章導覽"
-      className="relative mt-10 overflow-hidden rounded-[32px] border border-slate-200/70 bg-white/90 p-6 shadow-xl dark:border-slate-800/80 dark:bg-slate-900/80"
-    >
-      <div className="pointer-events-none absolute left-8 right-8 top-1/2 hidden h-px -translate-y-1/2 border-t border-dashed border-slate-200 opacity-70 dark:border-slate-700 md:block" />
-      <div className="pointer-events-none absolute left-1/2 top-1/2 hidden h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/10 blur-3xl dark:bg-blue-400/10 md:block" />
-      <div className="relative grid gap-6 md:grid-cols-3">
-        {stations.map((station) => (
-          <Station key={station.key} station={station} />
-        ))}
+    <nav aria-label="文章導覽" className="relative mt-10">
+      <div className="relative overflow-hidden rounded-[32px] border border-slate-200/70 bg-gradient-to-r from-white via-slate-50 to-white p-6 shadow-lg dark:border-slate-800/70 dark:from-slate-900 dark:via-slate-900/80 dark:to-slate-900">
+        <div className="pointer-events-none absolute inset-0 opacity-60">
+          <div className="absolute left-6 right-6 top-1/2 hidden h-px -translate-y-1/2 bg-gradient-to-r from-transparent via-blue-500/30 to-transparent md:block" />
+          <div className="absolute left-1/2 top-1/2 hidden h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/15 blur-3xl dark:bg-blue-400/15 md:block" />
+        </div>
+        <div className="relative grid gap-6 md:grid-cols-3">
+          {stations.map((station) => (
+            <Station key={station.key} station={station} />
+          ))}
+        </div>
       </div>
     </nav>
   );
 }
 
 function Station({ station }: { station: StationConfig }) {
-  const { post, label, hint, align, key, rel } = station;
-  const alignClass =
-    align === 'start'
-      ? 'items-start text-left'
-      : align === 'end'
-        ? 'items-end text-right'
-        : 'items-center text-center';
+  const { post, label, hint, key, rel } = station;
+  const isCurrent = key === 'current';
 
-  const baseCard = `group relative flex w-full flex-col gap-2 rounded-3xl border border-slate-200/70 bg-white/95 px-4 py-5 text-slate-800 shadow-sm transition duration-300 hover:-translate-y-0.5 hover:shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/70 dark:border-slate-800/70 dark:bg-slate-900/80 dark:text-slate-100 ${alignClass}`;
+  const base = `group flex flex-col gap-3 rounded-3xl px-4 py-5 transition duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 dark:focus-visible:ring-blue-300/70 ${
+    isCurrent
+      ? 'bg-white/80 shadow-md ring-1 ring-blue-200/60 dark:bg-slate-900/80 dark:ring-blue-500/20'
+      : 'bg-white/60 shadow-sm hover:-translate-y-0.5 hover:shadow-lg dark:bg-slate-900/70'
+  }`;
 
-  const circleClass = (() => {
-    if (!post && key !== 'current') {
-      return 'border-dashed border-slate-300 dark:border-slate-700';
-    }
-    if (key === 'current') {
-      return 'border-blue-500 bg-blue-500 shadow-[0_0_0_6px_rgba(59,130,246,0.15)] dark:border-blue-400 dark:bg-blue-400';
-    }
-    return 'border-blue-500 bg-white shadow-[0_0_0_4px_rgba(59,130,246,0.08)] dark:border-blue-400 dark:bg-slate-900';
-  })();
+  const circle = (
+    <span
+      className={`flex h-12 w-12 items-center justify-center rounded-full border text-xs font-semibold uppercase tracking-[0.3em] ${
+        isCurrent
+          ? 'border-blue-500 bg-blue-500 text-white shadow-[0_0_0_8px_rgba(59,130,246,0.15)]'
+          : post
+            ? 'border-slate-300 bg-white text-slate-500 dark:border-slate-700 dark:bg-slate-900'
+            : 'border-dashed border-slate-300 text-slate-300 dark:border-slate-700'
+      }`}
+    >
+      {label === '下一站' ? 'NEXT' : label === '上一站' ? 'PREV' : 'NOW'}
+    </span>
+  );
 
-  const content = post ? (
-    <Link href={post.url} rel={rel} className={baseCard}>
-      <StationHeader label={label} hint={hint} circleClass={circleClass} align={align} hasPost />
-      <h3 className="text-base font-semibold leading-snug text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-50 dark:group-hover:text-blue-300">
-        {post.title}
-      </h3>
-      {post.published_at && (
-        <p className="text-xs text-slate-500 dark:text-slate-400">{formatDate(post.published_at)}</p>
-      )}
-      {post.tags && post.tags.length > 0 && (
-        <div className={`flex flex-wrap gap-2 text-[11px] ${getJustifyClass(align)}`}>
-          {post.tags.slice(0, 3).map((tag) => (
-            <span
-              key={`${post._id}-${tag}`}
-              className="rounded-full bg-accent-soft/70 px-2 py-0.5 text-accent-textLight dark:bg-slate-800/80 dark:text-slate-100"
-            >
-              #{tag}
-            </span>
-          ))}
+  if (!post) {
+    return (
+      <div className={`${base} cursor-default opacity-60`}> 
+        {circle}
+        <p className="text-sm text-slate-500 dark:text-slate-400">{hint}</p>
+      </div>
+    );
+  }
+
+  return (
+    <Link href={post.url} rel={rel} className={`${base} text-slate-900 dark:text-slate-100`}>
+      <div className="flex items-center gap-4">
+        {circle}
+        <div className="text-xs uppercase tracking-[0.35em] text-slate-400 dark:text-slate-500">
+          {label}
         </div>
-      )}
-      <span
-        aria-hidden="true"
-        className={`text-sm text-blue-600 opacity-0 transition group-hover:opacity-100 dark:text-blue-400 ${align === 'end' ? 'self-end' : 'self-start'}`}
-      >
-        {align === 'end' ? '→ 前往下一站' : '探索此站 →'}
-      </span>
+      </div>
+      <p className="text-lg font-semibold leading-snug tracking-tight text-slate-900 transition-colors group-hover:text-blue-600 dark:text-slate-50 dark:group-hover:text-blue-300">
+        {post.title}
+      </p>
+      <div className="flex items-center justify-between text-xs text-slate-500 dark:text-slate-400">
+        <span>{hint}</span>
+        <span className="text-sm font-medium text-blue-600 opacity-0 transition group-hover:opacity-100 dark:text-blue-400">
+          {label === '下一站' ? '→ 前往' : label === '上一站' ? '回顧 ←' : '正在閱讀'}
+        </span>
+      </div>
     </Link>
-  ) : (
-    <div className={`${baseCard} cursor-default opacity-60 hover:translate-y-0 hover:shadow-none`}>
-      <StationHeader label={label} hint={hint} circleClass={circleClass} align={align} />
-      <p className="text-sm text-slate-500 dark:text-slate-400">{hint}</p>
-    </div>
-  );
-
-  return (
-    <div className="relative">
-      {content}
-    </div>
-  );
-}
-
-function StationHeader({
-  label,
-  hint,
-  circleClass,
-  align,
-  hasPost
-}: {
-  label: string;
-  hint: string;
-  circleClass: string;
-  align: 'start' | 'center' | 'end';
-  hasPost?: boolean;
-}) {
-  return (
-    <div className={`flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400 ${align === 'end' ? 'justify-end' : align === 'center' ? 'justify-center' : ''}`}>
-      {align === 'end' && (
-        <span className="text-[10px] font-normal tracking-normal text-slate-400 dark:text-slate-500">
-          {hint}
-        </span>
-      )}
-      <span className={`flex h-5 w-5 items-center justify-center rounded-full border ${circleClass}`}>
-        {hasPost && <span className="h-1.5 w-1.5 rounded-full bg-white dark:bg-slate-900" />}
-      </span>
-      <span>{label}</span>
-      {align !== 'end' && (
-        <span className="text-[10px] font-normal tracking-normal text-slate-400 dark:text-slate-500">
-          {hint}
-        </span>
-      )}
-    </div>
   );
 }
 
@@ -171,9 +120,3 @@ function formatDate(input?: string | Date) {
     day: '2-digit'
   });
 }
-
-function getJustifyClass(align: 'start' | 'center' | 'end') {
-  if (align === 'end') return 'justify-end';
-  if (align === 'center') return 'justify-center';
-  return 'justify-start';
-}