diff --git a/_layouts/post.html b/_layouts/post.html
index 9d7d497cb48..c34ba68815f 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -111,13 +111,13 @@ <h1 data-toc-skip>{{ page.title }}</h1>
     </button>
 
     <dialog id="toc-popup" class="p-0">
-      <div class="header d-flex flex-row align-items-center justify-content-between ps-3">
+      <div class="header d-flex flex-row align-items-center justify-content-between ps-4">
         <div class="label text-truncate py-2">{{- page.title -}}</div>
         <button id="toc-popup-close" type="button" class="btn btn-link">
           <i class="fas fa-close fa-fw"></i>
         </button>
       </div>
-      <div id="toc-popup-content" class="p-4 pt-2 ps-2"></div>
+      <div id="toc-popup-content" class="px-4 py-3 pb-4"></div>
     </dialog>
   {% endif %}
 
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index a3c9b35b1d8..01f5094bfd0 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -395,22 +395,31 @@ header {
 
   ul {
     list-style-type: none;
-    padding-left: 1.25rem;
+    padding-left: 0;
 
     li {
-      line-height: 1.5rem;
-      margin-top: 0.75rem;
-    }
+      ul,
+      & + li {
+        margin-top: 0.25rem;
+      }
 
-    ul {
-      border-left: 1px solid var(--main-border-color);
-      margin-left: 2px;
-      padding-left: calc(1.25rem - 3px);
+      a {
+        display: flex;
+        line-height: 1.5;
+        padding: 0.375rem 0;
+        padding-right: 1.125rem;
+
+        &.toc-link::before {
+          display: none;
+        }
+      }
     }
   }
 
-  .toc-link::before {
-    display: none;
+  @for $i from 2 through 4 {
+    .node-name--H#{$i} {
+      padding-left: 1.125rem * ($i - 1);
+    }
   }
 
   .is-active-link {