diff --git a/assets/style.css b/assets/style.css
index 5cbeec4..c5fa064 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -236,3 +236,43 @@ html {
 h1{
   margin-bottom: 0;
 }
+
+/* Sidebar Layout */
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (min-width: 1200px) {
+  body {
+    max-width: 80vw;
+  }
+
+  .content-wrapper {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 2rem;
+  }
+
+  .main-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .toc-sidebar {
+    width: 250px;
+    flex-shrink: 0;
+    order: 2;
+    border-left: 1px solid var(--border);
+    padding-left: 1rem;
+    font-size: 0.9em;
+  }
+
+  .toc-sticky {
+    position: sticky;
+    top: 50%;
+    transform: translateY(-50%);
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+}
\ No newline at end of file
diff --git a/layouts/learn.shtml b/layouts/learn.shtml
index 70ae568..5e5789c 100644
--- a/layouts/learn.shtml
+++ b/layouts/learn.shtml
@@ -3,21 +3,27 @@
 </head>
 <body id="body">
   <h1 :text="$page.title"></h1>
-  <div class="docs" :if="$page.custom.getOr('toc', true).and($page.isSection().not()).and($page.toc().len().gt(11))">
-    <h1>Table of Contents</h1>
-    <div :html="$page.toc()"></div>
-  </div>
-  <div :html="$page.content()"></div>
-  <div id="prev-next" :if="$page.isSection().not()">
-    <div :if="$page.prevPage?()">
-      <a href="$if.link()">
-        <span :text="$if.title"></span>
-      </a>
+  <div class="content-wrapper">
+    <div class="toc-sidebar" :if="$page.custom.getOr('toc', true).and($page.isSection().not()).and($page.toc().len().gt(11))">
+      <div class="toc-sticky">
+        <h3>TOC</h3>
+        <div :html="$page.toc()"></div>
+      </div>
     </div>
-    <div :if="$page.nextPage?()">
-      <a href="$if.link()">
-        <span :text="$if.title"></span>
-      </a>
+    <div class="main-content">
+      <div :html="$page.content()"></div>
+      <div id="prev-next" :if="$page.isSection().not()">
+        <div :if="$page.prevPage?()">
+          <a href="$if.link()">
+            <span :text="$if.title"></span>
+          </a>
+        </div>
+        <div :if="$page.nextPage?()">
+          <a href="$if.link()">
+            <span :text="$if.title"></span>
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </body>
diff --git a/layouts/monthly.shtml b/layouts/monthly.shtml
index 06a3d9c..981189b 100644
--- a/layouts/monthly.shtml
+++ b/layouts/monthly.shtml
@@ -1,6 +1,6 @@
 <extend template="content.shtml">
 <head id="head">
 </head>
-<body id="body">
+<div id="content">
   <div :html="$page.content()"></div>
-</body>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/layouts/page.shtml b/layouts/page.shtml
index 06a3d9c..981189b 100644
--- a/layouts/page.shtml
+++ b/layouts/page.shtml
@@ -1,6 +1,6 @@
 <extend template="content.shtml">
 <head id="head">
 </head>
-<body id="body">
+<div id="content">
   <div :html="$page.content()"></div>
-</body>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/layouts/post.shtml b/layouts/post.shtml
index af26f52..2dcd8d5 100644
--- a/layouts/post.shtml
+++ b/layouts/post.shtml
@@ -14,6 +14,6 @@
     <script defer src="https://mirrors.sustech.edu.cn/cdnjs/ajax/libs/mermaid/8.14.0/mermaid.min.js" integrity="sha512-vLumCjg7NKEQKGM+xAgBYTvQ90DVu6Eo7vS1T/iPf2feNLcrpGxvumuUUmE3CPiCUPgviyKbtpWGDbhnVnmJxg==" onload="mermaid.initialize({startOnLoad:true});"></script>
   </ctx>
 </head>
-<body id="body">
+<div id="content">
   <div :html="$page.content()"></div>
-</body>
+</div>
diff --git a/layouts/templates/content.shtml b/layouts/templates/content.shtml
index 45c2603..7644cae 100644
--- a/layouts/templates/content.shtml
+++ b/layouts/templates/content.shtml
@@ -19,21 +19,27 @@
       </a>
     </li>
   </ul>
-  <div class="docs" :if="$page.custom.getOr('toc', true).and($page.isSection().not())">
-    <h1>TOC</h1>
-    <div :html="$page.toc()"></div>
-  </div>
-  <super>
-  <div id="prev-next" :if="$page.isSection().not()">
-    <div :if="$page.prevPage?()">
-      <a href="$if.link()">
-        <span :text="$if.title"></span>
-      </a>
+  <div class="content-wrapper">
+    <div class="toc-sidebar" :if="$page.custom.getOr('toc', true).and($page.isSection().not())">
+      <div class="toc-sticky">
+        <h3>TOC</h3>
+        <div :html="$page.toc()"></div>
+      </div>
     </div>
-    <div :if="$page.nextPage?()">
-      <a href="$if.link()">
-        <span :text="$if.title"></span>
-      </a>
+    <div class="main-content" id="content">
+      <super>
+      <div id="prev-next" :if="$page.isSection().not()">
+        <div :if="$page.prevPage?()">
+          <a href="$if.link()">
+            <span :text="$if.title"></span>
+          </a>
+        </div>
+        <div :if="$page.nextPage?()">
+          <a href="$if.link()">
+            <span :text="$if.title"></span>
+          </a>
+        </div>
+      </div>
     </div>
   </div>
 </body>
