diff --git a/src/header.php b/src/header.php
index 80369f7..4554b4f 100644
--- a/src/header.php
+++ b/src/header.php
@@ -31,7 +31,7 @@
         </div>
 	</noscript>
     <mdui-top-app-bar scroll-behavior="shrink" variant="large" class="matecho-app-bar__<?php echo $this->archiveType;?>" id="matecho-app-bar">
-        <mdui-button-icon aria-label="导航栏" id="matecho-drawer-btn">
+        <mdui-button-icon aria-label="导航栏" id="matecho-drawer-btn" class="md:w-56px md:mx-4px">
             <mdui-icon-menu></mdui-icon-menu>
         </mdui-button-icon>
         <mdui-top-app-bar-title id="matecho-app-bar-title" style="display: none;">
diff --git a/src/main.ts b/src/main.ts
index a626839..a3a9842 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -128,6 +128,7 @@ function initOnce() {
       "#matecho-pjax-main",
       "#matecho-app-bar-title__inner",
       "#matecho-sidebar-list",
+      "#matecho-side-nav",
       "meta[name=matecho-template]"
     ],
     cacheBust: false,
diff --git a/src/sidebar.php b/src/sidebar.php
index 4527e32..991e900 100644
--- a/src/sidebar.php
+++ b/src/sidebar.php
@@ -4,6 +4,36 @@
 /** @var \Widget\Archive $this */
 ?>
 
+<mdui-navigation-rail id="matecho-side-nav" class="hidden md:block fixed" contained>
+    <a href="/">
+        <mdui-navigation-rail-item <?php Matecho::activePage($this, "index"); ?> >
+            <mdui-icon-home slot="icon"></mdui-icon-home>
+            首页
+        </mdui-navigation-rail-item>
+    </a>
+    <a>
+    <mdui-navigation-rail-item>
+        <mdui-icon-category slot="icon"></mdui-icon-category>
+        分类
+    </mdui-navigation-rail-item>
+    </a>
+    <?php 
+            $this->widget('Widget_Contents_Page_List')->to($page);
+            /** @var \Widget\Contents\Page\Rows $page */
+		    while ($page->next()) {
+        ?>
+                <a href="<?php $page->permalink() ?>">
+                    <mdui-navigation-rail-item <?php Matecho::activePage($this, "page", $page->cid); ?> >
+                        <?php 
+                            $icon = Matecho::pageIcon($page);
+                            echo "<mdui-icon-$icon slot=\"icon\"></mdui-icon-$icon>" ;
+                        ?>
+                        <?php echo $page->title ?>
+                    </mdui-navigation-rail-item>
+                </a>
+		<?php } ?>
+</mdui-navigation-rail>
+
 <mdui-navigation-drawer close-on-overlay-click id="matecho-drawer" modal>
     <nav>
         <mdui-list id="matecho-sidebar-list">
diff --git a/src/style/index.less b/src/style/index.less
index 4f6df84..cae709a 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -11,7 +11,7 @@
   width: 824px;
   height: 240px;
   top: 223px;
-  left: calc((100% - 824px) / 2);
+  left: calc((100% - 824px + 80px) / 2);
   background-color: transparent;
   box-shadow: none;
 
@@ -20,7 +20,14 @@
   }
 }
 
-@media (width <= 840px) {
+@media (width <= 937px) {
+  .matecho-article-card__animating {
+    width: calc(100% - 80px - 1rem);
+    left: calc(80px + 0.5rem);
+  }
+}
+
+@media (width <= 839px) {
   .matecho-article-card__animating {
     width: 100%;
     top: 198px;
diff --git a/src/style/main.less b/src/style/main.less
index 9ca655c..a55ae09 100644
--- a/src/style/main.less
+++ b/src/style/main.less
@@ -31,6 +31,18 @@ body {
   }
 }
 
+#matecho-side-nav {
+  margin-top: 64px;
+  height: calc(100vh - 64px);
+
+  & > a {
+    text-decoration: none !important;
+    width: 100%;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+}
+
 #matecho-sidebar-list {
   a:hover {
     text-decoration: none;