diff --git a/src/_includes/toc-and-content.html b/src/_includes/toc-and-content.html
deleted file mode 100644
index d753d6a6..00000000
--- a/src/_includes/toc-and-content.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div class="row" id="toc-and-content">
-  <div class="toc col-md-3">
-    <div class="toc-container bg-white">
-      <h2 class="h4 d-none d-md-block d-lg-block">Table of contents</h2>
-      <button
-        class="toggle-menu rounded-0 btn btn-secondary dropdown-toggle d-sm-block d-xs-block d-md-none d-lg-none"
-        type="button"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        data-bs-display="static"
-      >
-        Table of contents
-      </button>
-      <div class="d-none d-md-block d-lg-block">
-        {% for item in include.toc_data %}
-        <h3 class="h4">{{ item.title }}</h3>
-        <ul>
-          {% for subsection_item in item.subsection_items %}
-          <li class="h5">
-            <a href="#{{ subsection_item.url }}">{{ subsection_item.title }}</a>
-          </li>
-          {% endfor %}
-        </ul>
-        {% endfor %}
-      </div>
-      <div class="d-block d-md-none d-lg-none">
-        <ul class="dropdown-menu w-100 border-left-0 border-right-0">
-          {% for item in include.toc_data %}
-          <li><span class="h4 dropdown-item-text">{{ item.title }}</span></li>
-          {% for subsection_item in item.subsection_items %}
-          <li class="h5">
-            <a class="dropdown-item" href="#{{ subsection_item.url }}">{{ subsection_item.title }}</a>
-          </li>
-          {% endfor %} {% endfor %}
-        </ul>
-      </div>
-    </div>
-  </div>
-  <div class="col-md-9 content-container">
-    {% for item in include.toc_data %}
-    <h2>{{ item.title }}</h2>
-    {% for subsection_item in item.subsection_items %}
-    <h3 id="{{ subsection_item.url }}">{{ subsection_item.title }}</h3>
-    {% for paragraph in subsection_item.paragraphs %} {% if paragraph.title %}
-    <h4>{{ paragraph.title }}</h4>
-    {% endif %}
-    <p>{{ paragraph.text }}</p>
-    {% if paragraph.html %} {% include {{paragraph.html}} %}{% endif %} {% endfor %} {% endfor %} {% endfor %}
-  </div>
-</div>
diff --git a/src/_layouts/sidebar-toc.html b/src/_layouts/sidebar-toc.html
index cda37c65..dc182823 100644
--- a/src/_layouts/sidebar-toc.html
+++ b/src/_layouts/sidebar-toc.html
@@ -9,9 +9,9 @@
 {{ preface }}
 
 <section class="{{ page.content_class }}">
-  <div class="row position-relative" id="toc-and-content">
-    <div class="col-md-3">
-      <div class="bg-white position-sticky top-0">
+  <div class="row" id="toc-and-content">
+    <div class="toc col-md-3">
+      <div class="toc-container bg-white">
         <h2 class="h4 d-none d-md-block d-lg-block">Table of contents</h2>
         <button
           class="toggle-menu rounded-0 btn btn-secondary dropdown-toggle d-sm-block d-xs-block d-md-none d-lg-none"
@@ -22,8 +22,11 @@ <h2 class="h4 d-none d-md-block d-lg-block">Table of contents</h2>
         >
           Table of contents
         </button>
-        <div>
-          {% include toc.html html=real_content class="list-unstyled.table-of-contents" submenu_class="list-unstyled" h_max=3 %}
+        <div class="d-none d-md-block d-lg-block">
+          {% include toc.html html=real_content class="table-of-contents" h_max=3 %}
+        </div>
+        <div class="d-block d-md-none d-lg-none">
+          {% include toc.html html=real_content class="dropdown-menu table-of-contents w-100" anchor_class="dropdown-item" h_max=3 %}
         </div>
       </div>
     </div>
diff --git a/src/_sass/components/_toc-and-content.scss b/src/_sass/components/_toc-and-content.scss
index 72d9949d..8a64ef40 100644
--- a/src/_sass/components/_toc-and-content.scss
+++ b/src/_sass/components/_toc-and-content.scss
@@ -1,12 +1,154 @@
+.toc {
+  .toc-container {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        padding: 12px 0;
+        margin: 0;
+      }
+    }
+
+    a {
+      text-decoration: none !important;
+      border: none;
+      font-weight: 500;
+    }
+  }
+}
+
+.content-container {
+  h2:first-child {
+    margin-top: calc(8rem / 16);
+  }
+  h2 {
+    margin-top: calc(56rem / 16);
+    margin-bottom: calc(48rem / 16);
+  }
+  h3 {
+    margin-top: calc(56rem / 16);
+    margin-bottom: calc(24rem / 16);
+  }
+}
+
+@include media-breakpoint-up(md) {
+  #toc-and-content {
+    div :target::before {
+      // see: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
+      display: block;
+      content: "";
+      height: 1px !important;
+      margin: -1px 0 0 !important;
+    }
+  }
+
+  .toc {
+    .toc-container {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 0;
+
+      .h4 {
+        font-family: var(--bs-body-font-family) !important;
+        padding: 12px 0;
+        margin: 0;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  #toc-and-content {
+    div :target::before {
+      // this ensures clicking an anchor tag takes you to the right spot
+      display: block; // without this code, the fixed header blocks the anchor tag from showing up
+      content: ""; // see: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
+      height: 68px !important;
+      margin: -68px 0 0 !important;
+    }
+  }
+
+  .toc {
+    padding: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    z-index: 1020;
+    top: 0;
+
+    .toc-container {
+      .toggle-menu {
+        width: 100%;
+        background: white;
+        color: $primary;
+        border-top: 1px solid #d7d7d7;
+        border-left: none;
+        border-right: none;
+        border-bottom: 1px solid #d7d7d7;
+        text-align: left;
+        height: 64px;
+        padding-left: 16px;
+
+        &.show {
+          border-bottom: 1px solid #ffffff;
+        }
+
+        &::after {
+          position: absolute;
+          content: "";
+          border: solid $primary;
+          border-width: 0 3px 3px 0;
+          display: inline-block;
+          padding: 3px;
+          top: calc(50% - 6px);
+          right: 20px;
+          transform: rotate(45deg);
+          transition: transform 0.3s ease-in-out;
+        }
+
+        &.show::after {
+          transform: rotate(225deg);
+        }
+      }
+    }
+  }
+
+  .table-of-contents {
+    border-bottom: 1px solid #d7d7d7;
+    border-top: 1px solid #ffffff;
+
+    & > li > a {
+      padding-bottom: 0;
+      padding-top: 0;
+    }
+  }
+}
+
 .table-of-contents {
-  & > li > a {
-    color: #000;
-    font-family: var(--bs-body-font-family) !important;
-    font-weight: 700;
+  line-height: 1.2;
+  margin: 0;
+  padding: 0;
+
+  & > li {
+    padding: 0 !important;
+
+    & > a {
+      color: #000;
+      font-family: var(--bs-body-font-family) !important;
+      font-weight: 700 !important;
+    }
+  }
+
+  & > li > ul {
+    li a {
+      color: $primary;
+      white-space: break-spaces;
+    }
   }
 
   li {
-    margin: 1.25rem 0;
+    margin: 1.25rem;
   }
 
   ul {
@@ -14,4 +156,16 @@
       font-weight: 500 !important;
     }
   }
+
+  & > li > a {
+    display: inline-block;
+    padding-bottom: 12px;
+    padding-top: 12px;
+    width: 100%
+  }
+
+  ul .dropdown-item {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
 }