diff --git a/docs/content/getting-started/create-site/index.md b/docs/content/getting-started/create-site/index.md
index 430295a..471c924 100644
--- a/docs/content/getting-started/create-site/index.md
+++ b/docs/content/getting-started/create-site/index.md
@@ -1,5 +1,6 @@
 ---
 title: 创建网站
+icon: folder-plus
 ---
 
 安装 PageForge 后，你可以使用它来创建你的网站。您需要跳转到需要创建网站的文件夹，该文件夹必须是一个空文件夹。然后，您可以使用 PageForge 的命令行工具来创建网站。
diff --git a/docs/content/getting-started/customization.md b/docs/content/getting-started/customization.md
index be54d9f..2714a9a 100644
--- a/docs/content/getting-started/customization.md
+++ b/docs/content/getting-started/customization.md
@@ -1,5 +1,6 @@
 ---
 title: 自定义网站
+icon: dessert
 ---
 
 PageForge 提供了一些可选的自定义选项，以满足不同的需求。
diff --git a/docs/content/getting-started/get-started.md b/docs/content/getting-started/get-started.md
index 9c94a07..942cc94 100644
--- a/docs/content/getting-started/get-started.md
+++ b/docs/content/getting-started/get-started.md
@@ -1,5 +1,6 @@
 ---
 title: 快速上手
+icon: crosshair
 ---
 
 PageForge 是一款现代化的静态页面生成与部署平台，旨在帮助用户快速创建精美的静态网站，并一键部署到 GitHub Pages。 无论是个人博客、项目文档还是企业官网，PageForge 都能让你轻松实现高效构建、智能部署和即时上线。
diff --git a/docs/content/getting-started/publish-site.md b/docs/content/getting-started/publish-site.md
index ed3e051..471fe07 100644
--- a/docs/content/getting-started/publish-site.md
+++ b/docs/content/getting-started/publish-site.md
@@ -1,5 +1,6 @@
 ---
 title: 发布网站
+icon: upload
 ---
 
 在 git 存储库中托管项目文档的好处是能够在推送新更改时自动部署它。PageForge 将帮助您让这一切变得非常简单。
diff --git a/templates/components/span-code.js b/templates/components/span-code.js
index 3f87272..82f8a80 100644
--- a/templates/components/span-code.js
+++ b/templates/components/span-code.js
@@ -1,5 +1,5 @@
 module.exports = function template(item) {
     return `
-        <code class="bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono mx-1 inline">${item.text}</code>
+        <code class="bg-gray-100 text-gray-900 px-1.5 py-0.5 rounded text-sm font-mono mx-1 inline break-words whitespace-pre-wrap">${item.text}</code>
     `;
 };
\ No newline at end of file
diff --git a/templates/components/tabs.js b/templates/components/tabs.js
index 60fdeaf..048ebc4 100644
--- a/templates/components/tabs.js
+++ b/templates/components/tabs.js
@@ -4,28 +4,24 @@ module.exports = function tabs({tabs}) {
 
     // 生成 tab 按钮 HTML
     const tabButtons = tabs.map((tab, index) => `
-        <button
+        <button role="tab"
             class="px-4 py-2 text-sm font-medium border-b-2 transition-colors duration-200
                    ${index === 0 ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}
                    focus:outline-none"
             onclick="switchTab(event, '${tabGroupId}', ${index})"
-            role="tab"
             aria-selected="${index === 0 ? 'true' : 'false'}"
             aria-controls="${tabGroupId}-panel-${index}"
-            id="${tabGroupId}-tab-${index}"
-        >
+            id="${tabGroupId}-tab-${index}">
             ${tab.title}
         </button>
     `).join('');
 
     // 生成 tab 内容 HTML
     const tabPanels = tabs.map((tab, index) => `
-        <div
-            class="p-4 ${index === 0 ? '' : 'hidden'}"
+        <div class="p-4 ${index === 0 ? '' : 'hidden'}"
             role="tabpanel"
             aria-labelledby="${tabGroupId}-tab-${index}"
-            id="${tabGroupId}-panel-${index}"
-        >
+            id="${tabGroupId}-panel-${index}">
             ${tab.content}
         </div>
     `).join('');
diff --git a/templates/includes/footer.ejs b/templates/includes/footer.ejs
index 2e13030..cb45ed1 100644
--- a/templates/includes/footer.ejs
+++ b/templates/includes/footer.ejs
@@ -1,33 +1,43 @@
 <footer class="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
     <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8">
-        <div class="md:flex md:justify-between">
-            <div class="mb-6 md:mb-0 w-1/3">
+        <div class="flex flex-col md:flex-row md:justify-between gap-8">
+            <!-- Logo 和描述部分 -->
+            <div class="md:w-1/3">
                 <% if (site.logo) { %>
-                    <a href="/" class="flex items-center">
-                        <img src="<%= basePath %>/<%= site.logo || '/assets/logo.svg' %>"
-                             alt="<%= site.title %>"
-                             class="h-12 me-3">
-                    </a>
-                    <a href="/" class="text-xl font-bold text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
-                        <%= !site.hiddenTitle ? site.title : '' %>
-                    </a>
+                    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+                        <a href="/" class="flex items-center">
+                            <img src="<%= basePath %>/<%= site.logo || '/assets/logo.svg' %>"
+                                 alt="<%= site.title %>"
+                                 class="h-12">
+                        </a>
+                        <a href="/" class="text-xl font-bold text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
+                            <%= !site.hiddenTitle ? site.title : '' %>
+                        </a>
+                    </div>
                 <% } %>
 
-                <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+                <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                     <%= site.description %>
                 </div>
             </div>
 
+            <!-- 链接部分 -->
             <% if (locals.footer && locals.footer.links) { %>
-                <div class="grid grid-cols-2 gap-8 sm:gap-20 sm:grid-cols-4">
+                <!-- 如果居中显示使用这个 -->
+                <!--            <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 lg:gap-12 text-center sm:text-left">-->
+                <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8 lg:gap-12">
                     <% for(let category of footer.links) { %>
                         <div>
                             <% const categoryName = Object.keys(category)[0]; %>
-                            <h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white"><%= categoryName %></h2>
-                            <ul class="text-gray-500 dark:text-gray-400 font-medium">
+                            <h2 class="mb-4 text-sm font-semibold text-gray-900 uppercase dark:text-white"><%= categoryName %></h2>
+                            <ul class="text-gray-500 dark:text-gray-400 font-medium space-y-3">
                                 <% for(let item of category[categoryName]) { %>
-                                    <li class="mb-4">
-                                        <a href="<%= item.href %>" class="hover:underline" target="_blank"><%= item.title %></a>
+                                    <li>
+                                        <a href="<%= item.href %>"
+                                           class="text-sm hover:text-gray-900 dark:hover:text-white hover:underline"
+                                           target="_blank">
+                                            <%= item.title %>
+                                        </a>
                                     </li>
                                 <% } %>
                             </ul>
@@ -39,43 +49,55 @@
 
         <hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"/>
 
-        <div class="sm:flex sm:items-center sm:justify-between">
-            <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400"><%= locals.footer && locals.footer.copyright %></span>
+        <!-- 底部版权和社交链接 -->
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+                <%= locals.footer && locals.footer.copyright %>
+            </span>
+
             <% if (locals.footer && locals.footer.social) { %>
-                <div class="flex mt-4 sm:justify-center sm:mt-0">
+                <div class="flex items-center gap-4">
                     <% if (footer.social.facebook) { %>
-                        <a href="<%= footer.social.facebook.href %>" class="text-gray-500 hover:text-gray-900 dark:hover:text-white" target="_blank">
-                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
+                        <a href="<%= footer.social.facebook.href %>"
+                           class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+                           target="_blank">
+                            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
                                 <path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
                                       clip-rule="evenodd"/>
                             </svg>
-                            <span class="sr-only"><%= footer.social.facebook.title %><</span>
+                            <span class="sr-only"><%= footer.social.facebook.title %></span>
                         </a>
                     <% } %>
 
                     <% if (footer.social.discord) { %>
-                        <a href="<%= footer.social.discord.href %>" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5" target="_blank">
-                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 16">
+                        <a href="<%= footer.social.discord.href %>"
+                           class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+                           target="_blank">
+                            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 16">
                                 <path d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"/>
                             </svg>
-                            <span class="sr-only"><%= footer.social.discord.title %><</span>
+                            <span class="sr-only"><%= footer.social.discord.title %></span>
                         </a>
                     <% } %>
 
                     <% if (footer.social.twitter) { %>
-                        <a href="<%= footer.social.twitter.href %>" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5" target="_blank">
-                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
+                        <a href="<%= footer.social.twitter.href %>"
+                           class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+                           target="_blank">
+                            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
                                 <path fill-rule="evenodd"
                                       d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
                                       clip-rule="evenodd"/>
                             </svg>
-                            <span class="sr-only"><%= footer.social.twitter.title %><</span>
+                            <span class="sr-only"><%= footer.social.twitter.title %></span>
                         </a>
                     <% } %>
 
                     <% if (footer.social.github) { %>
-                        <a href="<%= footer.social.github.href %>" class="text-gray-500 hover:text-gray-900 dark:hover:text-white ms-5" target="_blank">
-                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                        <a href="<%= footer.social.github.href %>"
+                           class="text-gray-500 hover:text-gray-900 dark:hover:text-white"
+                           target="_blank">
+                            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                 <path fill-rule="evenodd"
                                       d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
                                       clip-rule="evenodd"/>
diff --git a/templates/includes/header.ejs b/templates/includes/header.ejs
index ed23410..3f0b5df 100644
--- a/templates/includes/header.ejs
+++ b/templates/includes/header.ejs
@@ -29,10 +29,10 @@ function isPathInNavItem(currentPath, navItem) {
 %>
 
 <header>
-    <nav class="fixed top-0 w-full bg-white dark:bg-gray-800 border-b z-10">
+    <nav class="fixed top-0 w-full bg-white dark:bg-gray-800 border-b z-40">
         <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
-            <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-8">
+            <div class="flex items-center justify-between h-16">
+                <div class="flex items-center justify-between flex-1 lg:flex-none">
                     <div class="flex items-center space-x-4 shrink-0">
                         <% if (site.logo) { %>
                             <a href="/" class="flex items-center">
@@ -46,26 +46,80 @@ function isPathInNavItem(currentPath, navItem) {
                         </a>
                     </div>
 
-                    <ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
-                        <% for(let item of nav) { %>
-                            <li class="shrink-0">
-                                <a href="<%= item.href %>"
-                                   class="inline-flex items-center rounded-lg justify-center px-4 py-3
-                                          text-sm font-medium leading-none dark:text-white
-                                          <%=
-                                       isPathInNavItem(page.path, item)
-                                               ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
-                                               : 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
-                                   %>">
-                                    <%= item.title %>
-                                </a>
-                            </li>
-                        <% } %>
-                    </ul>
+                    <!-- 移动端菜单按钮 -->
+                    <button type="button"
+                            class="lg:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-gray-700"
+                            onclick="document.getElementById('mobile-menu').classList.toggle('hidden');
+                                     this.querySelector('svg:first-child').classList.toggle('hidden');
+                                     this.querySelector('svg:last-child').classList.toggle('hidden');">
+                        <!-- 菜单图标 -->
+                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+                        </svg>
+                        <!-- 关闭图标 -->
+                        <svg class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- 桌面端导航 -->
+                <ul class="hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center">
+                    <% for(let item of nav) { %>
+                        <li class="shrink-0">
+                            <a href="<%= item.href %>"
+                               class="inline-flex items-center rounded-lg justify-center px-4 py-3
+                                      text-sm font-medium leading-none dark:text-white
+                                      <%=
+                                   isPathInNavItem(page.path, item)
+                                           ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
+                                           : 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
+                               %>">
+                                <%= item.title %>
+                            </a>
+                        </li>
+                    <% } %>
+                </ul>
+
+                <!-- 仓库链接 -->
+                <div class="hidden lg:block">
+                    <%- include('./repo') %>
                 </div>
+            </div>
+        </div>
 
-                <%- include('./repo') %>
+        <!-- 移动端菜单 -->
+        <div class="hidden lg:hidden" id="mobile-menu">
+            <div class="px-2 pt-2 pb-3 space-y-1 border-t dark:border-gray-700">
+                <% for(let item of nav) { %>
+                    <a href="<%= item.href %>"
+                       class="block px-3 py-2 rounded-md text-base font-medium
+                              <%= isPathInNavItem(page.path, item)
+                               ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20'
+                               : 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700'
+                       %>">
+                        <%= item.title %>
+                    </a>
+                <% } %>
+                <!-- 移动端的仓库链接 -->
+                <div class="px-3 py-2">
+                    <%- include('./repo') %>
+                </div>
             </div>
         </div>
     </nav>
-</header>
\ No newline at end of file
+</header>
+
+<script>
+    // 点击外部区域关闭移动端菜单
+    document.addEventListener('click', function (event) {
+        const mobileMenu = document.getElementById('mobile-menu');
+        const menuButton = document.querySelector('button[onclick*="mobile-menu"]');
+
+        if (!mobileMenu.contains(event.target) && !menuButton.contains(event.target) && !mobileMenu.classList.contains('hidden')) {
+            mobileMenu.classList.add('hidden');
+            menuButton.querySelector('svg:first-child').classList.remove('hidden');
+            menuButton.querySelector('svg:last-child').classList.add('hidden');
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/templates/includes/sidebar.ejs b/templates/includes/sidebar.ejs
index e49d593..611449e 100644
--- a/templates/includes/sidebar.ejs
+++ b/templates/includes/sidebar.ejs
@@ -21,32 +21,32 @@ sidebar = nav.find(item => {
 
 <% function isActive(href) { return href === page.path} %>
 
-
 <% if (typeof sidebar === 'object' && sidebar !== null) { %>
-    <div class="text-[0.9375rem] text-gray-600 dark:text-gray-300 overflow-y-auto max-h-[calc(100vh-4rem)] pageforge-scrollbar">
+    <div class="text-[0.9375rem] text-gray-600 dark:text-gray-300 overflow-y-auto max-h-[calc(100vh-4rem)] pageforge-scrollbar
+                sm:max-h-screen md:h-auto lg:max-h-[calc(100vh-2rem)]">
         <div class="mb-6">
             <ul class="space-y-1.5">
                 <% sidebar.items.forEach(item => { %>
                     <li class="relative">
                         <a href="<%= item.href %>"
                            class="group block">
-                            <div class="relative flex items-center px-4 py-2
+                            <div class="relative flex items-center px-2 sm:px-3 md:px-4 py-1.5 sm:py-2
                                         <%=
-                                            isActive(item.href)
-                                                ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
-                                                : 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
-                                        %>
+                                isActive(item.href)
+                                        ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium'
+                                        : 'hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40'
+                            %>
                                        rounded-md transition-all duration-200 ease-in-out">
 
                                 <% if (item.icon) { %>
-                                    <span class="inline-flex mr-2 text-gray-500 dark:text-gray-400 transition-colors duration-200">
+                                    <span class="inline-flex mr-1 sm:mr-2 text-gray-500 dark:text-gray-400 transition-colors duration-200">
                                        <!-- 骨架屏 -->
-                                       <div class="w-4 h-4 animate-pulse bg-gray-200 dark:bg-gray-700 rounded"></div>
+                                       <div class="w-3 h-3 sm:w-4 sm:h-4 animate-pulse bg-gray-200 dark:bg-gray-700 rounded"></div>
 
-                                       <!-- 图标 -->
+                                        <!-- 图标 -->
                                        <i data-lucide="<%= item.icon %>"
                                           style="display: none;"
-                                          class="w-4 h-4
+                                          class="w-3 h-3 sm:w-4 sm:h-4
                                                <%= isActive(item.href)
                                                   ? 'text-blue-600 dark:text-blue-400'
                                                   : 'group-hover:text-gray-900 dark:group-hover:text-gray-200'
@@ -55,11 +55,11 @@ sidebar = nav.find(item => {
                                    </span>
                                 <% } %>
 
-                                <span class="flex-grow"><%= item.title %></span>
+                                <span class="flex-grow text-sm sm:text-base"><%= item.title %></span>
 
                                 <% if (item.items && item.items.length > 0) { %>
                                     <svg xmlns="http://www.w3.org/2000/svg"
-                                         class="h-4 w-4 ml-2 text-gray-400 transition-all duration-200 <%= isActive(item.href) || item.items.some(child => isActive(child.href)) ? 'rotate-90 text-blue-600 dark:text-blue-400' : 'group-hover:text-gray-600 dark:group-hover:text-gray-300' %>"
+                                         class="h-3 w-3 sm:h-4 sm:w-4 ml-1 sm:ml-2 text-gray-400 transition-all duration-200 <%= isActive(item.href) || item.items.some(child => isActive(child.href)) ? 'rotate-90 text-blue-600 dark:text-blue-400' : 'group-hover:text-gray-600 dark:group-hover:text-gray-300' %>"
                                          viewBox="0 0 20 20"
                                          fill="currentColor">
                                         <path fill-rule="evenodd"
@@ -71,14 +71,14 @@ sidebar = nav.find(item => {
                         </a>
 
                         <% if (item.items && item.items.length > 0) { %>
-                            <ul class="mt-1 mb-2 ml-4 pl-4 border-l border-gray-200 dark:border-gray-700 space-y-1.5">
+                            <ul class="mt-1 mb-2 ml-2 sm:ml-3 md:ml-4 pl-2 sm:pl-3 md:pl-4 border-l border-gray-200 dark:border-gray-700 space-y-1.5">
                                 <% item.items.forEach(child => { %>
                                     <li>
                                         <a href="<%= child.href %>"
-                                           class="group flex items-center px-4 py-2 text-[0.875rem] <%= isActive(child.href) ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium' : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40' %> rounded-md transition-all duration-200 ease-in-out">
+                                           class="group flex items-center px-2 sm:px-3 md:px-4 py-1.5 sm:py-2 text-xs sm:text-sm md:text-base <%= isActive(child.href) ? 'text-blue-600 dark:text-blue-400 bg-blue-50/80 dark:bg-blue-900/20 font-medium' : 'text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800/40' %> rounded-md transition-all duration-200 ease-in-out">
 
                                             <% if (child.icon) { %>
-                                                <span class="mr-3 text-gray-400 dark:text-gray-500 <%= isActive(child.href) ? 'text-blue-600 dark:text-blue-400' : '' %>">
+                                                <span class="mr-2 sm:mr-3 text-gray-400 dark:text-gray-500 <%= isActive(child.href) ? 'text-blue-600 dark:text-blue-400' : '' %>">
                                                     <i class="<%= child.icon %>"></i>
                                                 </span>
                                             <% } %>
@@ -95,8 +95,8 @@ sidebar = nav.find(item => {
         </div>
 
         <% if (page.sidebar_footnote) { %>
-            <div class="mt-8 mx-2">
-                <div class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-700/50">
+            <div class="mt-6 sm:mt-8 mx-1 sm:mx-2">
+                <div class="px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-700/50">
                     <%= page.sidebar_footnote %>
                 </div>
             </div>
diff --git a/templates/layouts/base.ejs b/templates/layouts/base.ejs
index a1d447e..ac1cdc3 100644
--- a/templates/layouts/base.ejs
+++ b/templates/layouts/base.ejs
@@ -26,11 +26,36 @@
         <%- include('../includes/header') %>
     <% } %>
 
-    <div class="container mx-auto px-4 py-8 flex-grow flex pt-16">
-        <!-- 左侧列表 -->
+    <!-- 移动端菜单按钮 -->
+    <% if (page.config && page.config.sidebar !== false) { %>
+        <button class="md:hidden fixed left-4 bottom-4 z-20 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg"
+                onclick="document.getElementById('sidebar-menu').classList.remove('-translate-x-full');
+                         document.getElementById('sidebar-overlay').classList.remove('hidden');">
+            <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
+        </button>
+    <% } %>
+
+    <div class="container mx-auto px-4 py-4 md:py-8 flex-grow flex flex-col md:flex-row pt-16">
+        <!-- 左侧列表 - 移动端隐藏，可通过菜单触发显示 -->
         <% if (page.config && page.config.sidebar !== false) { %>
-            <aside class="w-64 flex-shrink-0 pr-8">
-                <nav class="sticky top-20">
+            <aside class="fixed md:relative md:w-56 lg:w-64 flex-shrink-0 md:pr-4 lg:pr-8
+                         inset-y-0 left-0 transform -translate-x-full md:translate-x-0
+                         transition duration-200 ease-in-out
+                         md:block z-30 bg-white dark:bg-gray-900 md:bg-transparent
+                         w-3/4 sm:w-64"
+                   id="sidebar-menu">
+                <div class="h-16 md:hidden flex items-center justify-end px-4 border-b dark:border-gray-800">
+                    <button class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
+                            onclick="document.getElementById('sidebar-menu').classList.add('-translate-x-full');
+                                     document.getElementById('sidebar-overlay').classList.add('hidden');">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+                </div>
+                <nav class="md:sticky md:top-20 p-4 md:p-0">
                     <div class="space-y-4">
                         <%- include('../includes/sidebar') %>
                     </div>
@@ -39,15 +64,65 @@
         <% } %>
 
         <!-- 中间内容 -->
-        <main class="flex-grow mt-6 w-2">
-            <article class="prose dark:prose-invert lg:prose-lg mx-auto">
+        <main class="flex-grow w-full mt-4 md:w-2 md:mt-12">
+            <article class="prose dark:prose-invert lg:prose-lg mx-auto
+                          max-w-none md:max-w-2xl lg:max-w-4xl">
                 <%- include(`../layouts/${page.layout || 'content'}`) %>
             </article>
         </main>
 
         <!-- 右侧目录 -->
         <% if (page.config && page.config.toc !== false && page.toc.length > 0) { %>
-            <%- include('../includes/toc') %>
+            <div class="hidden lg:block flex-none w-64 pl-8 mr-8">
+                <div class="sticky top-20">
+                    <div class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-4">目录</div>
+                    <nav class="overflow-y-auto max-h-[calc(100vh-8rem)] pr-4 -mr-4 space-y-1 pageforge-scrollbar"
+                         id="table-of-contents">
+                        <% function renderTocItem(items) { %>
+                            <% items.forEach(item => { %>
+                                <div class="pl-<%= (item.level - 1) * 4 %>">
+                                    <a href="#<%= item.slug %>"
+                                       class="block px-3 py-1 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition-colors duration-150 toc-link"
+                                       data-slug="<%= item.slug %>">
+                                        <%- item.text %>
+                                    </a>
+                                </div>
+                                <% if (item.children && item.children.length > 0) { %>
+                                    <% renderTocItem(item.children) %>
+                                <% } %>
+                            <% }) %>
+                        <% } %>
+                        <% renderTocItem(page.toc) %>
+                    </nav>
+                </div>
+            </div>
+
+            <!-- 移动端目录按钮 -->
+            <button class="lg:hidden fixed right-4 bottom-4 z-20 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg"
+                    onclick="document.getElementById('toc-mobile').classList.toggle('translate-y-full')">
+                <svg class="w-6 h-6 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path>
+                </svg>
+            </button>
+
+            <!-- 移动端底部目录面板 -->
+            <div id="toc-mobile"
+                 class="lg:hidden fixed bottom-0 inset-x-0 z-30 bg-white dark:bg-gray-800
+                        transform translate-y-full transition duration-200 ease-in-out
+                        p-4 rounded-t-2xl shadow-lg">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">目录</h3>
+                    <button onclick="document.getElementById('toc-mobile').classList.add('translate-y-full')"
+                            class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                        </svg>
+                    </button>
+                </div>
+                <nav class="overflow-y-auto max-h-[60vh] space-y-1">
+                    <% renderTocItem(page.toc) %>
+                </nav>
+            </div>
         <% } %>
     </div>
 
@@ -55,11 +130,27 @@
         <%- include('../includes/footer') %>
     <% } %>
 </div>
+
+<!-- 遮罩层 - 移动端菜单打开时显示 -->
+<% if (page.config && page.config.sidebar !== false) { %>
+    <div class="md:hidden fixed inset-0 bg-gray-900 bg-opacity-50 z-20 hidden"
+         id="sidebar-overlay"
+         onclick="document.getElementById('sidebar-menu').classList.add('-translate-x-full');
+                  this.classList.add('hidden');">
+    </div>
+<% } %>
 </body>
 
 <!-- 基础脚本文件 -->
 <script src="/assets/pageforge.min.js"></script>
 
+<script>
+    // 移动端侧边栏打开时显示遮罩
+    document.querySelector('[onclick*="sidebar-menu"]').addEventListener('click', function () {
+        document.getElementById('sidebar-overlay').classList.remove('hidden');
+    });
+</script>
+
 <!-- 加载主题配置中的额外 JS 文件 -->
 <% if (locals.theme?.extraJs && Array.isArray(theme.extraJs)) { %>
     <% theme.extraJs.forEach(js_path => { %>