diff --git a/pyproject.toml b/pyproject.toml
index c6423f82..2aae5191 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -22,8 +22,8 @@ readme = "README.md"
 
 requires-python = ">=3.7"
 dependencies = [
-  "sphinx>=3,<5",
-  "pydata-sphinx-theme~=0.8.0",
+  "sphinx>=3,<6",
+  "pydata-sphinx-theme~=0.10.1",
   "pyyaml",
 ]
 
diff --git a/src/sphinx_book_theme/__init__.py b/src/sphinx_book_theme/__init__.py
index a01b1574..1e627e64 100644
--- a/src/sphinx_book_theme/__init__.py
+++ b/src/sphinx_book_theme/__init__.py
@@ -111,7 +111,7 @@ def hash_html_assets(app, pagename, templatename, context, doctree):
     hash_assets_for_files(assets, get_html_theme_path() / "static", context)
 
 
-def update_thebe_config(app):
+def update_mode_thebe_config(app):
     """Update thebe configuration with SBT-specific values"""
     theme_options = app.env.config.html_theme_options
     if theme_options.get("launch_buttons", {}).get("thebe") is True:
@@ -144,6 +144,12 @@ def update_thebe_config(app):
 
     app.env.config.thebe_config = thebe_config
 
+    # setting default mode to light for now.
+    # TODO: provide a button, and add css for dark theme.
+    # sphinx-build command does not call config-inited,
+    # so setting this in builder-inited.
+    app.config.html_context["default_mode"] = "light"
+
 
 class Margin(Sidebar):
     """Goes in the margin to the right of the page."""
@@ -185,7 +191,7 @@ def setup(app: Sphinx):
     app.add_message_catalog(MESSAGE_CATALOG_NAME, locale_dir)
 
     # Events
-    app.connect("builder-inited", update_thebe_config)
+    app.connect("builder-inited", update_mode_thebe_config)
     app.connect("config-inited", update_general_config)
     app.connect("html-page-context", add_metadata_to_page)
     app.connect("html-page-context", hash_html_assets)
diff --git a/src/sphinx_book_theme/assets/scripts/index.js b/src/sphinx_book_theme/assets/scripts/index.js
index 2ba4b99e..eadafd0a 100644
--- a/src/sphinx_book_theme/assets/scripts/index.js
+++ b/src/sphinx_book_theme/assets/scripts/index.js
@@ -49,27 +49,6 @@ var toggleFullScreen = () => {
   }
 };
 
-/**
- * Sidebar scroll on load.
- *
- * Detect the active page in the sidebar, and scroll so that it is centered on
- * the screen.
- */
-var scrollToActive = () => {
-  var navbar = document.getElementById("site-navigation");
-  var navbar_scrollable = navbar.children[0];
-  var active_pages = navbar.querySelectorAll(".active");
-  var active_page = active_pages[active_pages.length - 1];
-  // Only scroll the navbar if the active link is lower than 50% of the page
-  if (
-    active_page !== undefined &&
-    active_page.offsetTop > $(window).height() * 0.5
-  ) {
-    navbar_scrollable.scrollTop =
-      active_page.offsetTop - $(window).height() * 0.2;
-  }
-};
-
 /**
  * Called when the "print to PDF" button is clicked.
  * This is a hack to prevent tooltips from showing up in the printed PDF.
@@ -118,9 +97,9 @@ var initTocHide = () => {
 
     // Hide the TOC if any margin content is displayed on the screen
     if (onScreenItems.length > 0) {
-      $("div.bd-toc").removeClass("show");
+      $("div.bd-sidebar-secondary").removeClass("show");
     } else {
-      $("div.bd-toc").addClass("show");
+      $("div.bd-sidebar-secondary").addClass("show");
     }
   };
   let manageScrolledClassOnBody = (entries, observer) => {
@@ -218,6 +197,27 @@ function initRTDObserver() {
   observer.observe(document.body, config);
 }
 
+/**
+ * Add no print class to certain DOM elements
+ */
+
+function addNoPrint() {
+  $("div.bd-sidebar-primary").addClass("noprint");
+  $("div.bd-header-article").addClass("noprint");
+  $("div.bd-header-announcement").addClass("noprint");
+  $("footer.bd-footer-article").addClass("noprint");
+}
+
+/**
+ * Set Mode of the theme
+ * Remove this function once all modes are supported.
+ */
+
+function setMode() {
+  document.documentElement.dataset.mode = "light";
+  document.documentElement.dataset.theme = "light";
+}
+
 /**
  * Set up callback functions for UI click actions
  */
@@ -229,6 +229,7 @@ window.toggleFullScreen = toggleFullScreen;
  * Set up functions to load when the DOM is ready
  */
 sbRunWhenDOMLoaded(initTooltips);
-sbRunWhenDOMLoaded(scrollToActive);
 sbRunWhenDOMLoaded(initTocHide);
 sbRunWhenDOMLoaded(initRTDObserver);
+sbRunWhenDOMLoaded(addNoPrint);
+sbRunWhenDOMLoaded(setMode);
diff --git a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
index bb2bbbfe..b046618b 100644
--- a/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
+++ b/src/sphinx_book_theme/assets/styles/abstracts/_variables.scss
@@ -24,7 +24,7 @@ $leftbar-width-mobile: 75%;
 $leftbar-width-wide: 275px;
 $toc-width-mobile: 75%;
 // Main content, to leave room for the margin
-$content-max-width: 70%;
+$content-max-width: 75%;
 
 // Consistent styling for page elements
 $box-border-radius: 0.4em;
@@ -35,26 +35,13 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
 
 // Overrides for pydata sphinx theme.
 // See https://github.com/pydata/pydata-sphinx-theme/blob/master/pydata_sphinx_theme/static/css/theme.css
-:root {
+:root[data-theme="light"] {
   // Over-ride the pydata theme so that readers can use their system base
   --pst-font-size-base: none;
 
-  // Pulling colors from the Binder logo since they are complementary and on-brand
-  --pst-color-primary: 87, 154, 202;
-  --pst-color-admonition-note: var(--pst-color-primary);
-  --pst-color-admonition-default: var(--pst-color-primary);
-
-  --pst-color-info: 255, 193, 7;
-  --pst-color-admonition-tip: var(--pst-color-info);
-  --pst-color-admonition-hint: var(--pst-color-info);
-  --pst-color-admonition-important: var(--pst-color-info);
-
-  --pst-color-warning: 245, 162, 82;
-
-  --pst-color-danger: 230, 101, 129;
-  --pst-color-admonition-warning: var(--pst-color-danger);
-
-  --pst-color-link: 0, 113, 188;
+  --pst-color-primary: rgb(87, 154, 202);
+  --pst-color-link: rgb(0, 113, 188);
+  --pst-color-border: rgb(238, 238, 238);
 
   // Font sizes
   --sbt-font-size-regular: 100%;
@@ -67,4 +54,11 @@ $border-thin: 1px solid rgba(0, 0, 0, 0.1);
   --sbt-header-article-font-size: var(--sbt-font-size-small-1);
   --sbt-prevnext-font-size: var(--sbt-font-size-small-1);
   --sbt-footer-font-size: var(--sbt-font-size-small-1);
+
+  // Search variables
+  --sbt-color-search-highlighted: rgb(243, 119, 38);
+  --sbt-color-search-icon: rgb(164, 166, 167);
+
+  // Announcement
+  --sbt-color-announcement: rgb(97, 97, 97);
 }
diff --git a/src/sphinx_book_theme/assets/styles/base/_base.scss b/src/sphinx_book_theme/assets/styles/base/_base.scss
index 75653d23..b80896e6 100644
--- a/src/sphinx_book_theme/assets/styles/base/_base.scss
+++ b/src/sphinx_book_theme/assets/styles/base/_base.scss
@@ -28,6 +28,11 @@
   display: none;
 }
 
+// default color for all the links
+a {
+  color: var(--pst-color-link);
+}
+
 // Print-specific utility classes
 .onlyprint {
   display: none;
diff --git a/src/sphinx_book_theme/assets/styles/base/_print.scss b/src/sphinx_book_theme/assets/styles/base/_print.scss
index 4f8bd106..8b240980 100644
--- a/src/sphinx_book_theme/assets/styles/base/_print.scss
+++ b/src/sphinx_book_theme/assets/styles/base/_print.scss
@@ -2,65 +2,86 @@
 * Print-specific CSS *
 *********************************************/
 @media print {
-  // Structural elements
-  #jb-print-docs-body {
-    max-width: 90%;
-    margin: auto;
+  .bd-main {
+    .bd-content {
+      margin-left: 3rem;
+      height: auto;
+      // Structural elements
+      #jb-print-docs-body {
+        margin-left: 0rem;
 
-    h1 {
-      font-size: 3em;
-      text-align: center;
-      margin-bottom: 0;
-    }
-  }
+        h1 {
+          font-size: 3em;
+          text-align: center;
+          margin-bottom: 0;
+        }
+      }
+      // Main content adjustments
+      .bd-article {
+        padding-top: 0;
 
-  // Main content adjustments to center it a bit more
-  #main-content {
-    max-width: 67% !important;
-    margin-left: 5% !important;
-    padding-top: 0;
+        // The first H1 is the title, we've already displayed above
+        h1:first-of-type {
+          display: none;
+        }
+      }
 
-    // The first H1 is the title, we've already displayed above
-    h1:first-of-type {
-      display: none;
-    }
-  }
+      // HACK: Without this, some code cells take the whole width
+      .container {
+        min-width: 0% !important;
+      }
 
-  // HACK: Without this, some code cells take the whole width
-  .container {
-    min-width: 0% !important;
-  }
+      // Content
+      h1 {
+        margin-top: 1em;
+        margin-bottom: 1em;
+      }
+      h1,
+      h2,
+      h3,
+      h4 {
+        break-after: avoid;
+        color: black;
+      }
 
-  // Content
-  h1 {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-  h1,
-  h2,
-  h3,
-  h4 {
-    break-after: avoid;
-    color: black;
-  }
+      table {
+        break-inside: avoid;
+      }
 
-  table {
-    break-inside: avoid;
-  }
-
-  pre {
-    word-wrap: break-word;
-  }
+      pre {
+        word-wrap: break-word;
+      }
 
-  a.headerlink {
-    display: none;
-  }
+      a.headerlink {
+        display: none;
+      }
 
-  blockquote.epigraph {
-    border: none;
-  }
+      blockquote.epigraph {
+        border: none;
+      }
 
-  .footer {
-    margin-top: 1em;
+      .footer {
+        margin-top: 1em;
+      }
+      // Print-only table of contents
+      #jb-print-toc {
+        margin-bottom: 1.5rem;
+        margin-left: 0rem;
+        .section-nav {
+          border-left: 0px !important;
+          list-style-type: disc !important;
+          margin-left: 3em !important;
+          a {
+            text-decoration: none !important;
+          }
+          li {
+            display: list-item !important;
+          }
+          .nav {
+            display: none;
+          }
+        }
+      }
+    }
   }
 }
diff --git a/src/sphinx_book_theme/assets/styles/base/_typography.scss b/src/sphinx_book_theme/assets/styles/base/_typography.scss
index a811b603..41b0bf0f 100644
--- a/src/sphinx_book_theme/assets/styles/base/_typography.scss
+++ b/src/sphinx_book_theme/assets/styles/base/_typography.scss
@@ -2,7 +2,7 @@
 * Basic text formatting and content structure *
 *********************************************/
 
-.content-container {
+.bd-article-container {
   // Content links and link color
   a.headerlink {
     opacity: 0;
@@ -10,14 +10,15 @@
 
     &:hover {
       background-color: transparent;
-      color: rgba(var(--pst-color-link), 1);
+      color: var(--pst-color-link);
       opacity: 1 !important;
     }
   }
 
   a,
+  a.nav-link, // to be more specific, so that pst style doesn't override
   a:visited {
-    color: rgba(var(--pst-color-link), 1);
+    color: var(--pst-color-link);
   }
 
   h1,
@@ -55,10 +56,4 @@
   p.centered {
     text-align: center;
   }
-
-  // Footnotes and Citations
-  .footnote-reference,
-  a.bibtex.internal {
-    font-size: 1em;
-  }
 }
diff --git a/src/sphinx_book_theme/assets/styles/components/_buttons.scss b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
index fba7a86d..ab7acdb6 100644
--- a/src/sphinx_book_theme/assets/styles/components/_buttons.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_buttons.scss
@@ -110,7 +110,7 @@ div.header-article-main {
 /**
  * In-page table of contents
  */
-.headerbtn-page-toc {
+.headerbtn-secondary {
   // Hide the button on wide screens since we display the TOC.
   display: block;
   @media (min-width: $breakpoint-md) {
diff --git a/src/sphinx_book_theme/assets/styles/components/_search.scss b/src/sphinx_book_theme/assets/styles/components/_search.scss
index 3b86c944..2ecf07aa 100644
--- a/src/sphinx_book_theme/assets/styles/components/_search.scss
+++ b/src/sphinx_book_theme/assets/styles/components/_search.scss
@@ -5,5 +5,14 @@
 // Highlighted search items are a slightly lighter version of Jupyter orange
 dt:target,
 span.highlighted {
-  background-color: #f3772642;
+  background-color: var(--sbt-color-search-highlighted);
+}
+
+.bd-search {
+  .icon {
+    color: var(--sbt-color-search-icon);
+  }
+  .search-button__kbd-shortcut {
+    display: none;
+  }
 }
diff --git a/src/sphinx_book_theme/assets/styles/content/_admonitions.scss b/src/sphinx_book_theme/assets/styles/content/_admonitions.scss
deleted file mode 100644
index 255e8da2..00000000
--- a/src/sphinx_book_theme/assets/styles/content/_admonitions.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.admonition {
-  // Soften admonition styling from the PyData Theme
-  border-radius: $box-border-radius;
-  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05),
-    0 0 0.0625rem rgba(0, 0, 0, 0.1);
-
-  // Admonition seealso styling
-  &.seealso {
-    border-color: #28a745;
-
-    .admonition-title {
-      background-color: rgba(40, 167, 70, 0.1);
-
-      &:before {
-        color: #28a745;
-        content: "\f064";
-      }
-    }
-  }
-}
diff --git a/src/sphinx_book_theme/assets/styles/content/_code.scss b/src/sphinx_book_theme/assets/styles/content/_code.scss
index 5f6882a2..d0484b9d 100644
--- a/src/sphinx_book_theme/assets/styles/content/_code.scss
+++ b/src/sphinx_book_theme/assets/styles/content/_code.scss
@@ -41,3 +41,7 @@ div.highlight {
   border: var(--jp-border-width) solid var(--jp-cell-editor-active-border-color);
   margin: -1px;
 }
+
+div.literal-block-wrapper {
+  border: none;
+}
diff --git a/src/sphinx_book_theme/assets/styles/content/_margin.scss b/src/sphinx_book_theme/assets/styles/content/_margin.scss
index 14f345ef..dc4b40d3 100644
--- a/src/sphinx_book_theme/assets/styles/content/_margin.scss
+++ b/src/sphinx_book_theme/assets/styles/content/_margin.scss
@@ -109,8 +109,8 @@ figure.margin-caption figcaption {
 // Full-width content
 div.cell.tag_full-width,
 div.cell.tag_full_width,
-.full_width,
-.full-width {
+div.full_width,
+div.full-width {
   @media (min-width: $breakpoint-md) {
     max-width: $content-fullwidth-width;
     width: $content-fullwidth-width;
diff --git a/src/sphinx_book_theme/assets/styles/content/_sidebar.scss b/src/sphinx_book_theme/assets/styles/content/_sidebar.scss
index 1d11d401..97c08b4c 100644
--- a/src/sphinx_book_theme/assets/styles/content/_sidebar.scss
+++ b/src/sphinx_book_theme/assets/styles/content/_sidebar.scss
@@ -13,4 +13,12 @@ aside.sidebar {
       margin: 0 -35% 0 $content-margin-gutter;
     }
   }
+  .admonition {
+    padding-left: 0.6rem;
+    padding-right: 0.8rem;
+  }
+  > p {
+    padding-left: 0rem;
+    padding-right: 0rem;
+  }
 }
diff --git a/src/sphinx_book_theme/assets/styles/content/_tableofcontents.scss b/src/sphinx_book_theme/assets/styles/content/_tableofcontents.scss
index 7541c170..f34f49e3 100644
--- a/src/sphinx_book_theme/assets/styles/content/_tableofcontents.scss
+++ b/src/sphinx_book_theme/assets/styles/content/_tableofcontents.scss
@@ -47,26 +47,3 @@ div.contents {
     }
   }
 }
-
-// Print-only table of contents
-@media print {
-  #jb-print-toc {
-    margin-bottom: 1.5rem;
-
-    .section-nav {
-      border-left: 0px;
-      list-style-type: disc;
-      margin-left: 3em;
-      a {
-        text-decoration: none;
-        padding-left: 0px;
-      }
-      li {
-        display: list-item !important;
-      }
-      .nav {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/sphinx_book_theme/assets/styles/extensions/_readthedocs.scss b/src/sphinx_book_theme/assets/styles/extensions/_readthedocs.scss
index f4533792..82059ad9 100644
--- a/src/sphinx_book_theme/assets/styles/extensions/_readthedocs.scss
+++ b/src/sphinx_book_theme/assets/styles/extensions/_readthedocs.scss
@@ -1,9 +1,9 @@
 /**
  * ReadTheDocs pop-up menu over-rides.
- * We nest everything under `.bd-sidebar` so that we use more selective
+ * We nest everything under `.bd-sidebar-primary` so that we use more selective
  * selectors than what RTD CSS uses.
  */
-.bd-sidebar {
+.bd-sidebar-primary {
   // Parent container for everything else
   div#rtd-footer-container {
     position: sticky;
diff --git a/src/sphinx_book_theme/assets/styles/index.scss b/src/sphinx_book_theme/assets/styles/index.scss
index 8219bd1a..ea51490b 100644
--- a/src/sphinx_book_theme/assets/styles/index.scss
+++ b/src/sphinx_book_theme/assets/styles/index.scss
@@ -17,6 +17,7 @@
 @import "base/print";
 
 // Major theme layout, skeleton, and whitespace
+@import "sections/announcement";
 @import "sections/article";
 @import "sections/footer-article";
 @import "sections/footer-content";
@@ -31,7 +32,6 @@
 @import "components/search.scss";
 
 // Content blocks in standard Sphinx
-@import "content/admonitions";
 @import "content/code";
 @import "content/field-lists";
 @import "content/footnotes";
diff --git a/src/sphinx_book_theme/assets/styles/pages/_search.scss b/src/sphinx_book_theme/assets/styles/pages/_search.scss
index 0bfe4565..5bfceb8b 100644
--- a/src/sphinx_book_theme/assets/styles/pages/_search.scss
+++ b/src/sphinx_book_theme/assets/styles/pages/_search.scss
@@ -2,46 +2,55 @@
  * Search page special-cases
  */
 
+#search-input::placeholder {
+  color: var(--pst-color-text-muted);
+}
+
 // Turn off the extra search UI at the top of the page
-#search-documentation {
-  display: none;
-  & ~ p,
-  ~ form {
+.bd-search-container {
+  padding: 2rem;
+  h1 {
     display: none;
   }
-}
-
-// Whitespace
-div#search-results > h2 {
-  margin-top: 0;
-}
+  form:first-of-type {
+    display: none !important;
+  }
 
-// The results of a search
-ul.search {
-  margin: 0;
-  list-style: none;
+  // Whitespace
+  div#search-results {
+    padding: 2rem;
+    > h2 {
+      margin-top: 0;
+    }
+  }
+  // The results of a search
+  ul.search {
+    margin: 0;
+    list-style: none;
 
-  li {
-    background-image: none;
-    padding: 0;
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-    border-bottom: $border-thin;
+    li {
+      background-image: none;
+      padding: 0;
+      margin-bottom: 1em;
+      padding-bottom: 1em;
+      border-bottom: $border-thin;
+      border-top: none;
 
-    // First link is the page title, it should be a bit bigger
-    > a {
-      font-size: 1.2em;
-    }
+      // First link is the page title, it should be a bit bigger
+      > a {
+        font-size: 1.2em;
+      }
 
-    div.context,
-    p.context {
-      margin: 0.5em 0 0 0;
+      div.context,
+      p.context {
+        margin: 0.5em 0 0 0;
 
-      // Add a # before page section titles to make it clear they are sections
-      a:before {
-        content: "#";
-        padding-right: 0.2em;
-        color: $grey--medium;
+        // Add a # before page section titles to make it clear they are sections
+        a:before {
+          content: "#";
+          padding-right: 0.2em;
+          color: $grey--medium;
+        }
       }
     }
   }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_announcement.scss b/src/sphinx_book_theme/assets/styles/sections/_announcement.scss
new file mode 100644
index 00000000..5ff068f9
--- /dev/null
+++ b/src/sphinx_book_theme/assets/styles/sections/_announcement.scss
@@ -0,0 +1,4 @@
+.bd-header-announcement {
+  background-color: var(--sbt-color-announcement);
+  color: #fff;
+}
diff --git a/src/sphinx_book_theme/assets/styles/sections/_article.scss b/src/sphinx_book_theme/assets/styles/sections/_article.scss
index b87e9c89..5e8ac3ae 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_article.scss
@@ -1,20 +1,22 @@
 /*********************************************
 * Main content layout *
 *********************************************/
-
-body {
-  padding-top: 0px !important;
-}
-
-#main-content,
-#print-main-content {
-  transition: padding $animation-time ease-out;
-  padding-top: 1.5em;
-}
-
-// On wide screens, make space for the right margin
-@media (min-width: $breakpoint-md) {
-  #main-content {
-    max-width: $content-max-width;
+.bd-main {
+  .bd-content {
+    padding: 0rem;
+    justify-content: revert;
+    .bd-article-container {
+      position: relative; // needed for postion:sticky header-article
+      overflow-x: unset; // needed for postion:sticky header-article
+      padding: 0%;
+      min-width: 0; // to prevent overflow in mobile website for flex containers
+    }
+    .bd-article {
+      padding-right: 2rem;
+      @media (max-width: $breakpoint-md) {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+    }
   }
 }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_footer-article.scss b/src/sphinx_book_theme/assets/styles/sections/_footer-article.scss
index 6da1e1a5..77a1285a 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_footer-article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_footer-article.scss
@@ -3,21 +3,15 @@
 *********************************************/
 
 // Previous and next area at the bottom
-footer.footer-article {
+footer.bd-footer-article {
   border-top: none;
   padding: 0;
 
   .prev-next-area {
     font-size: var(--sbt-prevnext-font-size);
 
-    a {
-      margin-bottom: 1em;
-      padding-left: 0;
-      padding-right: 0;
-    }
-    // On wide screens, make space for the right margin
-    @media (min-width: $breakpoint-md) {
-      max-width: $content-max-width;
+    p.prev-next-title {
+      color: var(--pst-color-link);
     }
   }
 }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss b/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss
index 6c147a44..24ea7d9c 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_footer-content.scss
@@ -3,4 +3,10 @@
 *********************************************/
 footer {
   font-size: var(--sbt-font-size-small-1);
+  &.bd-footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 15px;
+    border-top: 1px solid #ccc;
+  }
 }
diff --git a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
index 70cfc82f..1917bf46 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_header-article.scss
@@ -2,11 +2,14 @@
 * Top Bar *
 * TODO: Rename much of these to article-header to conform with sphinx-basic-ng
 *********************************************/
-.header-article {
+.bd-header-article {
   height: $header-article-height; // Fix the height so the TOC doesn't grow it
   background-color: white;
   transition: left 0.2s;
   font-size: var(--sbt-header-article-font-size);
+  position: sticky;
+  top: 0;
+  z-index: 1018;
 
   @include header-height-mobile;
 
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
index 5ea829e3..b0f054e1 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss
@@ -1,11 +1,14 @@
 /*********************************************
 * Left Nav Bar *
 *********************************************/
-#site-navigation {
+.bd-sidebar-primary {
   padding-top: 0;
-  width: $leftbar-width-wide;
+  padding: 0em;
+  flex-basis: $leftbar-width-wide;
   font-size: var(--sbt-sidebar-font-size);
   top: 0px !important;
+  max-height: 100vh;
+  max-width: 100%;
   background: white;
   border-right: $border-thin;
   transition: margin-left $animation-time ease 0s,
@@ -33,13 +36,13 @@
   }
 
   // Apply some basic padding so the dropdown buttons don't overlap w/ scrollbar
-  .bd-sidebar__top,
-  .bd-sidebar__bottom {
-    padding: 0 1rem 0rem 1.5rem;
+  .sidebar-start-items,
+  .sidebar-end-items {
+    padding: 1rem 1rem 1rem 1.5rem;
   }
 
   // This should always snap to the bottom even if there's no sidebar content
-  .bd-sidebar__bottom {
+  .sidebar-end-items {
     margin-top: auto;
     margin-bottom: 2em;
   }
@@ -49,11 +52,12 @@
     li a,
     ul li a {
       color: $non-content-grey;
+      padding-right: 1.5rem;
     }
     a:hover,
     li.active > a,
     li.active > a:hover {
-      color: rgba(var(--pst-color-link), 1);
+      color: var(--pst-color-link);
     }
 
     // Adjust padding to be a bit tighter
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss
index da6e8fd5..413e5afa 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss
@@ -2,13 +2,67 @@
 * Table of Contents (right nav bar)          *
 *********************************************/
 
-.bd-toc {
+.bd-sidebar-secondary {
   padding: 0px !important;
   right: -1em;
   height: auto;
-  transition: margin-right $animation-time ease 0s,
-    opacity $animation-time ease 0s, visibility $animation-time ease 0s;
+  position: static; // .toc-item is made sticky so that z-index works well, for margin content
+  max-height: unset;
+  overflow-y: unset;
+  max-width: 25%;
+  flex: 0 0 25%;
+  transition: margin-right 0.25s ease 0s, opacity 0.25s ease 0s,
+    visibility 0.25s ease 0s;
 
+  .tocsection {
+    padding: 0.5rem 1rem !important;
+    .scrolled & {
+      box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);
+    }
+
+    &:after {
+      content: "\f107";
+      font-family: "Font Awesome 5 Free";
+      font-weight: 900;
+      padding-left: 0.5em;
+      transition: opacity 0.3s ease;
+    }
+  }
+
+  // Show / hide the in-page TOC items
+  @mixin show-inpage-toc {
+    nav {
+      max-height: 90vh;
+      opacity: 1;
+      overflow-y: auto;
+    }
+
+    // Hide the arrow when we display the toc
+    .tocsection:after {
+      opacity: 0;
+    }
+  }
+
+  .toc-item {
+    padding: 0rem;
+    position: sticky; // this is made sticky so that z-index works well, for margin content
+    z-index: 3;
+    top: 0;
+    height: auto;
+    background: white;
+    // On wide screens, show the TOC with hover or w/ a show class
+    &:hover {
+      @include show-inpage-toc;
+    }
+  }
+
+  &.show {
+    @include show-inpage-toc;
+  }
+
+  .toc-h2 {
+    font-size: 0.85rem;
+  }
   // Colors
   div.onthispage,
   .toc-entry a {
@@ -37,70 +91,39 @@
 
   // By default the nav is hidden unless a few conditions are met
   nav {
-    opacity: 0;
+    opacity: 1;
     max-height: 0;
-    transition: opacity 0.2s ease, max-height 0.7s ease;
     overflow-y: hidden;
     background: white;
+    transition: opacity 0.4s ease, max-height 0.7s ease;
     @include scrollbar-style();
     @include scrollbar-on-hover();
-
     // TOC link color
     a:hover,
     li.active > a.active {
-      color: rgba(var(--pst-color-link), 1);
+      color: var(--pst-color-link);
     }
 
     li.active > a.active {
-      border-left: 2px solid rgba(var(--pst-color-link), 1);
-    }
-
-    > .nav {
-      border-left: 1px solid #eee;
-      .nav {
-        border-left: none;
-      }
-    }
-  }
-
-  // Show / hide the in-page TOC items
-  @mixin show-inpage-toc {
-    nav {
-      max-height: 90vh;
-      opacity: 1;
-      overflow-y: auto;
-    }
-
-    // Hide the arrow when we display the toc
-    .tocsection:after {
-      opacity: 0;
+      border-left: 2px solid var(--pst-color-link);
     }
   }
-  // On wide screens, show the TOC with hover or w/ a show class
-  &:hover,
-  &.show {
-    @include show-inpage-toc;
-  }
 
   // On narrow screens, it should always be shown because it's off to the right
   @media (max-width: $breakpoint-md) {
     @include show-inpage-toc;
   }
 
-  .tocsection {
-    padding: 0.5rem 0 0.5rem 1rem !important;
-
-    &:after {
-      content: "\f107";
-      font-family: "Font Awesome 5 Free";
-      font-weight: 900;
-      padding-left: 0.5em;
-      transition: opacity 0.3s ease;
+  @media (min-width: $breakpoint-md) {
+    max-width: 25%; // taken from col-md-3 used in prev HTML
+    .toc-item {
+      border-left: 1px solid var(--pst-color-border);
     }
   }
 
-  .toc-entry a {
+  .toc-entry a.nav-link {
     padding: 0.125rem 1rem !important;
+    margin-left: 0rem;
   }
 
   // Make sure the pydata sphinx theme edit button doesn't show up
diff --git a/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss b/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss
index 4d1ecbe9..91bcb204 100644
--- a/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss
+++ b/src/sphinx_book_theme/assets/styles/sections/_sidebars-toggle.scss
@@ -6,18 +6,18 @@ input.sidebar-toggle {
   position: absolute;
 }
 
-input#__navigation {
+input#__primary {
   // On wide screens, checking will hide everything
   @media (min-width: $breakpoint-md) {
     &:checked {
-      & ~ .container-xl #site-navigation {
+      & ~ .bd-container .bd-sidebar {
         visibility: hidden;
         opacity: 0;
         margin-left: -$leftbar-width-wide;
       }
 
       // When we hide the sidebar on widescreen, add some padding to content
-      & ~ .container-xl #main-content {
+      & ~ .bd-container .bd-main {
         padding-left: 4rem;
         padding-right: 4rem;
       }
@@ -26,7 +26,7 @@ input#__navigation {
 
   // On narrow screens, *unchecking* will hide everything, so it's hidden by default
   @media (max-width: $breakpoint-md) {
-    &:not(:checked) ~ .container-xl #site-navigation {
+    &:not(:checked) ~ .bd-container .bd-sidebar {
       visibility: hidden;
       opacity: 0;
       margin-left: -$leftbar-width-mobile;
@@ -34,10 +34,10 @@ input#__navigation {
   }
 }
 
-input#__page-toc {
+input#__secondary {
   // On narrow screens, it's hidden by default
   @media (max-width: $breakpoint-md) {
-    &:not(:checked) ~ .container-xl .bd-toc {
+    &:not(:checked) ~ .bd-container .bd-toc {
       visibility: hidden;
       opacity: 0;
       margin-right: -$leftbar-width-mobile;
@@ -48,7 +48,8 @@ input#__page-toc {
 // **** Utility functions ****
 // Label at the top of the page
 label.overlay {
-  &.overlay-navbar {
+  &.overlay-primary,
+  &.overlay-secondary {
     background-color: rgba(0, 0, 0, 0.54);
   }
   height: 0;
@@ -62,11 +63,11 @@ label.overlay {
 // On narrow screens, we use this overlay to close the sidebar
 @media (max-width: $breakpoint-md) {
   input:checked + label.overlay {
-    &.overlay-navbar {
+    &.overlay-primary {
       z-index: $zindex-offcanvas - 1; // This puts it just below the primary sidebar
     }
 
-    &.overlay-pagetoc {
+    &.overlay-secondary {
       z-index: $zindex-sticky - 1; // This puts it just below the header
     }
     height: 100%;
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/components/sbt-sidebar-nav.html b/src/sphinx_book_theme/theme/sphinx_book_theme/components/sbt-sidebar-nav.html
index 3101f8b6..7ba7101f 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/components/sbt-sidebar-nav.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/components/sbt-sidebar-nav.html
@@ -1,5 +1,5 @@
 <nav class="bd-links" id="bd-docs-nav" aria-label="Main">
-    <div class="bd-toc-item active">
+    <div class="bd-toc-item navbar-nav active">
         {% if theme_home_page_in_toc == True %}
         {#- This mimicks the pydata theme list style so we can append an extra item at the top #}
         <ul class="nav bd-sidenav bd-sidenav__home-link">
@@ -11,8 +11,8 @@
         </ul>
         {% endif -%}
 
-        {# Ref: https://github.com/pydata/pydata-sphinx-theme/blob/8453f38ea6543e778bfc12d5c38239d25b8e30f8/src/pydata_sphinx_theme/__init__.py#L68 #}
-        {{- generate_nav_html(
+        {# Ref: https://github.com/pydata/pydata-sphinx-theme/blob/ebf7f704879a1cdc6016d6111062103353ac7677/src/pydata_sphinx_theme/__init__.py#L302 #}
+        {{- generate_toctree_html(
             startdepth=0,
             kind="sidebar",
             maxdepth=4,
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/components/toc-button.html b/src/sphinx_book_theme/theme/sphinx_book_theme/components/toc-button.html
index 87da6724..950a0d06 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/components/toc-button.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/components/toc-button.html
@@ -1,4 +1,4 @@
-<label class="d-block d-md-none nav-toggle-button headerbtn" for="__page-toc">
+<label class="d-block d-md-none nav-toggle-button headerbtn" for="__secondary">
   <div class="visually-hidden">{{ translate('Toggle Table of Contents') }}</div>
   <i class="fas fa-list"></i>
 </label>
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
index 37f19bce..ade964cf 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/layout.html
@@ -3,102 +3,43 @@
 
 {% set is_single_page = (theme_single_page == True) or (theme_single_page == "True") %}
 
-
-{% block content %}
-<!-- Checkboxes to toggle the left sidebar -->
-<input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation" aria-label="Toggle navigation sidebar">
-<label class="overlay overlay-navbar" for="__navigation">
-    <div class="visually-hidden">Toggle navigation sidebar</div>
-</label>
-<!-- Checkboxes to toggle the in-page toc -->
-<input type="checkbox" class="sidebar-toggle" name="__page-toc" id="__page-toc" aria-label="Toggle in-page Table of Contents">
-<label class="overlay overlay-pagetoc" for="__page-toc">
-    <div class="visually-hidden">Toggle in-page Table of Contents</div>
-</label>
-<!-- Headers at the top -->
-<div class="announcement header-item noprint">
-    {%- include "sections/announcement.html" -%}
-</div>
-<div class="header header-item noprint">
-    {%- include "sections/header.html" -%}
-</div>
+{% block docs_main %}
+<!-- A tiny helper pixel to detect if we've scrolled -->
+<div class="sbt-scroll-pixel-helper"></div>
 {{ super() }}
 {% endblock %}
 
-<!-- Docs TOC is "d-none d-xl-block col-xl-2" -->
-{% block docs_sidebar %}
-<!-- Sidebar -->
-<div class="bd-sidebar noprint{% if is_single_page %} single-page{% endif %}" id="site-navigation">
-    {%- if not is_single_page %}
-    <div class="bd-sidebar__content">
-        <div class="bd-sidebar__top">
-            {%- include "sections/sidebar.html" -%}
-        </div>
-        <div class="bd-sidebar__bottom">
-            {% if theme_navbar_footer_text %}{% set theme_extra_navbar=theme_navbar_footer_text %}{% endif %} <!-- To handle the deprecated key -->
-            {% if theme_extra_navbar %}
-            <div class="navbar_extra_footer">
-            {{ theme_extra_navbar }}
-            </div>
-            {% endif %}
-        </div>
-    </div>
-    <div id="rtd-footer-container"></div>
-    {%- endif %}
-</div>
+{# Secondary sidebar #}
+{% block docs_toc %}
+{% if not remove_sidebar_secondary %}
+    {% include "sections/sidebar-secondary.html" %}
+{% endif %}
 {% endblock %}
 
-{% block docs_main %}
-<!-- A tiny helper pixel to detect if we've scrolled -->
-<div class="sbt-scroll-pixel-helper"></div>
-<!-- Main content -->
-<div class="col py-0 content-container">
-    {% block docs_body %}
-    <div class="header-article row sticky-top noprint">
-        {% include "sections/header-article.html" %}
-    </div>
-    <div class="article row">
-        <div class="col pl-md-3 pl-lg-5 content-container">
-            <!-- Table of contents that is only displayed when printing the page -->
-            <div id="jb-print-docs-body" class="onlyprint">
-                <h1>{{ pagetitle }}</h1>
-                <!-- Table of contents -->
-                <div id="print-main-content">
-                    <div id="jb-print-toc">
-                        {% set page_toc = generate_toc_html() %}
-                        {%- if page_toc | length >= 1 %}
-                        <div>
-                            <h2> {{ translate(theme_toc_title) }} </h2>
-                        </div>
-                        <nav aria-label="Page">
-                            {{ page_toc }}
-                        </nav>
-                        {%- endif %}
-                    </div>
-                </div>
+{% block docs_body %}
+<!-- Table of contents that is only displayed when printing the page -->
+<div id="jb-print-docs-body" class="onlyprint">
+    <h1>{{ pagetitle }}</h1>
+    <!-- Table of contents -->
+    <div id="print-main-content">
+        <div id="jb-print-toc">
+            {% set page_toc = generate_toc_html() %}
+            {%- if page_toc | length >= 1 %}
+            <div>
+                <h2> {{ translate(theme_toc_title) }} </h2>
             </div>
-            <main id="main-content" role="main">
-                {{ super() }}
-            </main>
-            <footer class="footer-article noprint">
-                {% include "sections/footer-article.html" %}
-            </footer>
+            <nav aria-label="Page">
+                {{ page_toc }}
+            </nav>
+            {%- endif %}
         </div>
     </div>
-    <div class="footer-content row">
-        <footer class="col footer">
-            {%- include "sections/footer-content.html" %}
-        </footer>
-    </div>
-    {% endblock %}
 </div>
-{% endblock %}
-
-{% block docs_toc %}
+{{ super() }}
 {% endblock %}
 
 {% block docs_navbar %}
-{%- endblock %}
+{% endblock %}
 
 {%- block footer %}
 {%- endblock %}
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/announcement.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/announcement.html
deleted file mode 100644
index 73a3f718..00000000
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/announcement.html
+++ /dev/null
@@ -1 +0,0 @@
-{{- theme_announcement -}}
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/footer-article.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/footer-article.html
deleted file mode 100644
index 298225eb..00000000
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/footer-article.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{%- if theme_show_prev_next -%}
-    {# stored in _templates because we inherit from the pydata theme #}
-    {% include "_templates/prev-next.html" %}
-{%- endif -%}
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html
index 318edb89..8863d125 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/header-article.html
@@ -5,7 +5,7 @@
 <div class="col py-1 d-flex header-article-main">
     <div class="header-article__left">
         {% if theme_single_page != True %}
-        {{ render_label_input_button(for_input="__navigation", tooltip="Toggle navigation", icon="fas fa-bars", tooltip_placement="right") }}
+        {{ render_label_input_button(for_input="__primary", tooltip="Toggle navigation", icon="fas fa-bars", tooltip_placement="right") }}
         {% endif %}
     </div>
     <div class="header-article__right">
@@ -14,19 +14,7 @@
         {%- endfor -%}
 
         {% if page_toc -%}
-        {{ render_label_input_button("__page-toc", icon="fas fa-list", label="page-toc") }}
+        {{ render_label_input_button("__secondary", icon="fas fa-list", label="secondary") }}
         {%- endif %}
     </div>
 </div>
-
-<!-- Table of contents -->
-<div class="col-md-3 bd-toc show noprint">
-    {%- if page_toc | length >= 1 %}
-    <div class="tocsection onthispage pt-5 pb-3">
-        <i class="fas fa-list"></i> {{ translate(theme_toc_title) }}
-    </div>
-    <nav id="bd-toc-nav" aria-label="Page">
-        {{ page_toc }}
-    </nav>
-    {%- endif %}
-</div>
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar-primary.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar-primary.html
new file mode 100644
index 00000000..4fbed576
--- /dev/null
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar-primary.html
@@ -0,0 +1,24 @@
+{% block docs_sidebar %}
+
+{% if sidebars and not is_single_page%}
+    <div class="bd-sidebar__content">
+        <div class="sidebar-start-items">
+            {%- for sidebartemplate in sidebars %}
+            {%- include sidebartemplate %}
+            {%- endfor %}
+        </div>
+        <div class="sidebar-end-items">
+            {%- for leftsidebartemplate in theme_left_sidebar_end %}
+            {%- include leftsidebartemplate %}
+            {%- endfor %}
+            {% if theme_navbar_footer_text %}{% set theme_extra_navbar=theme_navbar_footer_text %}{% endif %} <!-- To handle the deprecated key -->
+            {% if theme_extra_navbar %}
+                <div class="navbar_extra_footer">
+                {{ theme_extra_navbar }}
+                </div>
+            {% endif %}
+        </div>
+    </div>
+    <div id="rtd-footer-container"></div>
+{% endif %}
+{% endblock %}
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar-secondary.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar-secondary.html
new file mode 100644
index 00000000..e083adaf
--- /dev/null
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar-secondary.html
@@ -0,0 +1,16 @@
+<!-- Table of contents -->
+{% set page_toc = generate_toc_html() %}
+{% block docs_toc %}
+<div class="bd-sidebar-secondary bd-toc show noprint">
+    {%- if page_toc | length >= 1 %}
+    <div class="toc-item">
+        <div class="tocsection onthispage">
+            <i class="fas fa-list"></i> {{ translate(theme_toc_title) }}
+        </div>
+        <nav id="bd-toc-nav" aria-label="Page">
+            {{ page_toc }}
+        </nav>
+    </div>
+    {%- endif %}
+</div>
+{% endblock %}
diff --git a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar.html b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar.html
index 3a26131e..e69de29b 100644
--- a/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar.html
+++ b/src/sphinx_book_theme/theme/sphinx_book_theme/sections/sidebar.html
@@ -1,3 +0,0 @@
-{%- for sidebartemplate in sidebars %}
-{%- include sidebartemplate %}
-{%- endfor %}
diff --git a/tests/test_build.py b/tests/test_build.py
index 6accf30f..f05c2350 100644
--- a/tests/test_build.py
+++ b/tests/test_build.py
@@ -109,7 +109,7 @@ def test_build_book(sphinx_build_factory, file_regression):
 
     # -- Header ---------------------------------------------------------------
     header_article = sphinx_build.html_tree("section1", "ntbk.html").find(
-        "div", class_="header-article"
+        "div", class_="bd-header-article"
     )
 
     file_regression.check(
@@ -157,10 +157,12 @@ def test_navbar_options_single_page(sphinx_build_factory):
         assert_pass=True
     )  # type: SphinxBuild
     sidebar = sphinx_build.html_tree("section1", "ntbk.html").find(
-        "div", id="site-navigation"
+        "div", attrs={"class": "bd-sidebar-primary"}
     )
     assert len(sidebar.find_all("div")) == 0  # Sidebar should be empty
-    assert "single-page" in sidebar.attrs["class"]  # Class added on single page
+    # HTML structure for below assertion is not supported in the latest version,
+    # the class just removes a border as of now, which we can do without.
+    # assert "single-page" in sidebar.attrs["class"]  # Class added on single page
 
 
 @pytest.mark.parametrize(
diff --git a/tests/test_build/build__header-article.html b/tests/test_build/build__header-article.html
index 74bc3326..ed74d4a8 100644
--- a/tests/test_build/build__header-article.html
+++ b/tests/test_build/build__header-article.html
@@ -1,7 +1,7 @@
-<div class="header-article row sticky-top noprint">
+<div class="bd-header-article">
  <div class="col py-1 d-flex header-article-main">
   <div class="header-article__left">
-   <label class="headerbtn" data-placement="right" data-toggle="tooltip" for="__navigation" title="Toggle navigation">
+   <label class="headerbtn" data-placement="right" data-toggle="tooltip" for="__primary" title="Toggle navigation">
     <span class="headerbtn__icon-container">
      <i class="fas fa-bars">
      </i>
@@ -110,7 +110,4 @@
    </div>
   </div>
  </div>
- <!-- Table of contents -->
- <div class="col-md-3 bd-toc show noprint">
- </div>
 </div>
diff --git a/tests/test_build/build__pagetoc--page-multipletitles.html b/tests/test_build/build__pagetoc--page-multipletitles.html
index c4132f9b..81f29615 100644
--- a/tests/test_build/build__pagetoc--page-multipletitles.html
+++ b/tests/test_build/build__pagetoc--page-multipletitles.html
@@ -1,35 +1,37 @@
-<div class="col-md-3 bd-toc show noprint">
- <div class="tocsection onthispage pt-5 pb-3">
-  <i class="fas fa-list">
-  </i>
-  Contents
+<div class="bd-sidebar-secondary bd-toc show noprint">
+ <div class="toc-item">
+  <div class="tocsection onthispage">
+   <i class="fas fa-list">
+   </i>
+   Contents
+  </div>
+  <nav aria-label="Page" id="bd-toc-nav">
+   <ul class="visible nav section-nav flex-column">
+    <li class="toc-h1 nav-item toc-entry">
+     <a class="reference internal nav-link" href="#">
+      4.1. A page with multiple top-level titles
+     </a>
+     <ul class="visible nav section-nav flex-column">
+      <li class="toc-h2 nav-item toc-entry">
+       <a class="reference internal nav-link" href="#a-sub-heading">
+        4.1.1. A sub-heading
+       </a>
+      </li>
+     </ul>
+    </li>
+    <li class="toc-h1 nav-item toc-entry">
+     <a class="reference internal nav-link" href="#another-top-level-title">
+      4.2. Another top-level title
+     </a>
+     <ul class="visible nav section-nav flex-column">
+      <li class="toc-h2 nav-item toc-entry">
+       <a class="reference internal nav-link" href="#another-sub-heading">
+        4.2.1. Another sub-heading
+       </a>
+      </li>
+     </ul>
+    </li>
+   </ul>
+  </nav>
  </div>
- <nav aria-label="Page" id="bd-toc-nav">
-  <ul class="visible nav section-nav flex-column">
-   <li class="toc-h1 nav-item toc-entry">
-    <a class="reference internal nav-link" href="#">
-     4.1. A page with multiple top-level titles
-    </a>
-    <ul class="visible nav section-nav flex-column">
-     <li class="toc-h2 nav-item toc-entry">
-      <a class="reference internal nav-link" href="#a-sub-heading">
-       4.1.1. A sub-heading
-      </a>
-     </li>
-    </ul>
-   </li>
-   <li class="toc-h1 nav-item toc-entry">
-    <a class="reference internal nav-link" href="#another-top-level-title">
-     4.2. Another top-level title
-    </a>
-    <ul class="visible nav section-nav flex-column">
-     <li class="toc-h2 nav-item toc-entry">
-      <a class="reference internal nav-link" href="#another-sub-heading">
-       4.2.1. Another sub-heading
-      </a>
-     </li>
-    </ul>
-   </li>
-  </ul>
- </nav>
 </div>
diff --git a/tests/test_build/build__pagetoc--page-onetitle.html b/tests/test_build/build__pagetoc--page-onetitle.html
index b7c5b6b8..2ddeaa7b 100644
--- a/tests/test_build/build__pagetoc--page-onetitle.html
+++ b/tests/test_build/build__pagetoc--page-onetitle.html
@@ -1,21 +1,23 @@
-<div class="col-md-3 bd-toc show noprint">
- <div class="tocsection onthispage pt-5 pb-3">
-  <i class="fas fa-list">
-  </i>
-  Contents
+<div class="bd-sidebar-secondary bd-toc show noprint">
+ <div class="toc-item">
+  <div class="tocsection onthispage">
+   <i class="fas fa-list">
+   </i>
+   Contents
+  </div>
+  <nav aria-label="Page" id="bd-toc-nav">
+   <ul class="visible nav section-nav flex-column">
+    <li class="toc-h2 nav-item toc-entry">
+     <a class="reference internal nav-link" href="#here-s-a-sub-heading">
+      4.3.1. Here’s a sub-heading
+     </a>
+    </li>
+    <li class="toc-h2 nav-item toc-entry">
+     <a class="reference internal nav-link" href="#here-s-another">
+      4.3.2. Here’s another
+     </a>
+    </li>
+   </ul>
+  </nav>
  </div>
- <nav aria-label="Page" id="bd-toc-nav">
-  <ul class="visible nav section-nav flex-column">
-   <li class="toc-h2 nav-item toc-entry">
-    <a class="reference internal nav-link" href="#here-s-a-sub-heading">
-     4.3.1. Here’s a sub-heading
-    </a>
-   </li>
-   <li class="toc-h2 nav-item toc-entry">
-    <a class="reference internal nav-link" href="#here-s-another">
-     4.3.2. Here’s another
-    </a>
-   </li>
-  </ul>
- </nav>
 </div>
diff --git a/tests/test_build/build__pagetoc--page-onetitlenoheadings.html b/tests/test_build/build__pagetoc--page-onetitlenoheadings.html
index ec08e7c4..250ec2d6 100644
--- a/tests/test_build/build__pagetoc--page-onetitlenoheadings.html
+++ b/tests/test_build/build__pagetoc--page-onetitlenoheadings.html
@@ -1,2 +1,2 @@
-<div class="col-md-3 bd-toc show noprint">
+<div class="bd-sidebar-secondary bd-toc show noprint">
 </div>
diff --git a/tests/test_build/build__sidebar-primary__nav.html b/tests/test_build/build__sidebar-primary__nav.html
index 79936224..88298cb4 100644
--- a/tests/test_build/build__sidebar-primary__nav.html
+++ b/tests/test_build/build__sidebar-primary__nav.html
@@ -1,5 +1,5 @@
 <nav aria-label="Main" class="bd-links" id="bd-docs-nav">
- <div class="bd-toc-item active">
+ <div class="bd-toc-item navbar-nav active">
   <p aria-level="2" class="caption" role="heading">
    <span class="caption-text">
     My caption
@@ -21,7 +21,7 @@
      3. Section 1 index
     </a>
     <input class="toctree-checkbox" id="toctree-checkbox-1" name="toctree-checkbox-1" type="checkbox">
-     <label for="toctree-checkbox-1">
+     <label class="toctree-toggle" for="toctree-checkbox-1">
       <i class="fas fa-chevron-down">
       </i>
      </label>
@@ -59,7 +59,7 @@
      4. Testing titles and TOCtree
     </a>
     <input class="toctree-checkbox" id="toctree-checkbox-2" name="toctree-checkbox-2" type="checkbox">
-     <label for="toctree-checkbox-2">
+     <label class="toctree-toggle" for="toctree-checkbox-2">
       <i class="fas fa-chevron-down">
       </i>
      </label>
diff --git a/tests/test_build/test_right_sidebar_title.html b/tests/test_build/test_right_sidebar_title.html
index 43cfeedd..37e4ce6a 100644
--- a/tests/test_build/test_right_sidebar_title.html
+++ b/tests/test_build/test_right_sidebar_title.html
@@ -1,4 +1,4 @@
-<div class="tocsection onthispage pt-5 pb-3">
+<div class="tocsection onthispage">
  <i class="fas fa-list">
  </i>
  My Contents