diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 6fffa48..4419eda 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -67,26 +67,52 @@ const isOutdated = entry.data.outdated;
             {}
         ]}>
             <!-- word count and reading time -->
-            <div class="flex flex-row flex-wrap text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
-                <div class="flex flex-row items-center pointer-events-none select-none cursor-default">
-                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
-                        <Icon name="material-symbols:notes-rounded"></Icon>
+            <div class="flex flex-col gap-3 mb-3 transition onload-animation md:flex-row md:items-start md:justify-between">
+                <div class="flex flex-row flex-wrap text-black/30 dark:text-white/30 gap-5 transition">
+                    <div class="flex flex-row items-center pointer-events-none select-none cursor-default">
+                        <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
+                            <Icon name="material-symbols:notes-rounded"></Icon>
+                        </div>
+                        <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
                     </div>
-                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
-                </div>
-                <div class="flex flex-row items-center pointer-events-none select-none cursor-default">
-                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
-                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
+                    <div class="flex flex-row items-center pointer-events-none select-none cursor-default">
+                        <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
+                            <Icon name="material-symbols:schedule-outline-rounded"></Icon>
+                        </div>
+                        <div class="text-sm">
+                            大约 {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
+                        </div>
                     </div>
-                    <div class="text-sm">
-                        大约 {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
+                    <div class="flex flex-row items-center pointer-events-none select-none cursor-default">
+                        <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
+                            <Icon name="material-symbols:visibility-outline-rounded"></Icon>
+                        </div>
+                        <div class="text-sm" id="post-top-page-views">加载中...</div>
                     </div>
                 </div>
-                <div class="flex flex-row items-center pointer-events-none select-none cursor-default">
-                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
-                        <Icon name="material-symbols:visibility-outline-rounded"></Icon>
-                    </div>
-                    <div class="text-sm" id="post-top-page-views">加载中...</div>
+                <div class="flex items-center justify-end gap-2 text-black/40 dark:text-white/40 md:shrink-0">
+                    <a
+                        href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
+                        aria-label={entry.data.nextTitle ? `上一篇：${entry.data.nextTitle}` : "没有上一篇"}
+                        title={entry.data.nextTitle || undefined}
+                        class:list={[
+                            "btn-card h-9 w-9 rounded-xl active:scale-95",
+                            {"pointer-events-none opacity-40": !entry.data.nextSlug},
+                        ]}
+                    >
+                        <Icon name="material-symbols:chevron-left-rounded" class="text-[1.5rem] text-[var(--primary)]"></Icon>
+                    </a>
+                    <a
+                        href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
+                        aria-label={entry.data.prevTitle ? `下一篇：${entry.data.prevTitle}` : "没有下一篇"}
+                        title={entry.data.prevTitle || undefined}
+                        class:list={[
+                            "btn-card h-9 w-9 rounded-xl active:scale-95",
+                            {"pointer-events-none opacity-40": !entry.data.prevSlug},
+                        ]}
+                    >
+                        <Icon name="material-symbols:chevron-right-rounded" class="text-[1.5rem] text-[var(--primary)]"></Icon>
+                    </a>
                 </div>
             </div>