diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index 9c82d7136d..416943ed31 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -1,13 +1,13 @@
 /* Background of stable should be green */
-#version_switcher a[data-version-name*="stable"] {
+.version-switcher__container a[data-version-name*="stable"] {
   position: relative;
 }
 
-#version_switcher a[data-version-name*="stable"] span {
+.version-switcher__container a[data-version-name*="stable"] span {
   color: var(--pst-color-success);
 }
 
-#version_switcher a[data-version-name*="stable"] span:before {
+.version-switcher__container a[data-version-name*="stable"] span:before {
   content: "";
   width: 100%;
   height: 100%;
diff --git a/docs/user_guide/version-dropdown.rst b/docs/user_guide/version-dropdown.rst
index ebd6ecc896..2973a0241d 100644
--- a/docs/user_guide/version-dropdown.rst
+++ b/docs/user_guide/version-dropdown.rst
@@ -195,12 +195,12 @@ You can create CSS rules that select this metadata like so:
 .. code-block:: scss
 
    // Style all links with a specific subset of versions
-   #version_switcher a[data-version="0.2"],
-   #version_switcher a[data-version="0.3"] {
+   .version-switcher__container a[data-version="0.2"],
+   .version-switcher__container a[data-version="0.3"] {
       background-color: red;
    }
    // Style all links with `stable` in the version name
-   #version_switcher a[data-version-name*="stable"] {
+   .version-switcher__container a[data-version-name*="stable"] {
       background-color: green;
    }
 
@@ -214,7 +214,7 @@ version, you could use the following CSS selector:
 .. code-block:: scss
 
    // If the active version has the name "dev", style it orange
-   #version_switcher_button[data-active-version-name*="dev"] {
+   .version-switcher__button[data-active-version-name*="dev"] {
       background-color: var(--pst-color-secondary);
    }
 
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
index 1ec90be7bc..c82e20d67c 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-theme.scss
@@ -1,32 +1,38 @@
 // the icons for theme change
 .theme-switch-button {
-  // to overide bootstrap settings
+  // overide bootstrap settings
   border-color: var(--pst-color-on-background);
-  padding: 0.25rem 0.5rem;
   font-size: 1.1rem;
   margin: 0 -0.5rem;
 
   a {
-    color: var(--pst-color-text-muted);
     display: none;
+    color: var(--pst-color-text-muted);
+    padding: 0.25rem 0.12rem;
+    &:hover,
+    &:active,
+    &:focus {
+      text-decoration: none;
+    }
   }
 
-  &:hover {
-    background-color: var(--pst-color-on-surface);
-    border-color: var(--pst-color-on-background);
-
+  &:hover,
+  &:active {
+    // overide bootstrap settings
+    background-color: var(--pst-color-on-surface) !important;
+    border-color: var(--pst-color-on-background) !important;
     a {
-      color: var(--pst-color-text-base);
+      color: var(--pst-color-text-muted);
     }
   }
 }
 
 html[data-mode="auto"] .theme-switch-button a[data-mode="auto"] {
-  display: block;
+  display: flex;
 }
 html[data-mode="light"] .theme-switch-button a[data-mode="light"] {
-  display: block;
+  display: flex;
 }
 html[data-mode="dark"] .theme-switch-button a[data-mode="dark"] {
-  display: block;
+  display: flex;
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
index 89caca7f95..02bcdeb997 100644
--- a/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
+++ b/src/pydata_sphinx_theme/assets/styles/components/_switcher-version.scss
@@ -1,9 +1,13 @@
-#version_switcher_button {
+button.version-switcher__button {
   border-color: var(--pst-color-border);
   color: var(--pst-color-text-base);
+
+  &:hover {
+    color: var(--pst-color-text-base);
+  }
 }
 
-#version_switcher_menu {
+.version-switcher__menu {
   border-color: var(--pst-color-border);
 
   a.list-group-item {
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
index 4ece6f2904..f14b3cd9b9 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_header.scss
@@ -67,6 +67,7 @@
 
       .dropdown-menu {
         z-index: $zindex-popover;
+        border: 1px solid var(--pst-color-border);
         box-shadow: 0 0 0.3rem 0.1rem var(--pst-color-shadow);
         background-color: var(--pst-color-on-background);
         padding: 0.5rem 1rem;
diff --git a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
index f5226646e8..70d707c4f6 100644
--- a/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
+++ b/src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss
@@ -31,6 +31,16 @@
     }
   }
 
+  .sidebar-primary__section {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .sidebar-start-items__item,
+  .sidebar-end-items__item {
+    padding: 0.25rem 0;
+  }
+
   // Hide the sidebar header items on widescreen since they are visible in the header
   .sidebar-header-items {
     display: flex;
@@ -74,7 +84,6 @@
   }
 
   .sidebar-start-items {
-    padding-top: 1rem;
     border-top: 1px solid var(--pst-color-border);
   }
 
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html
index 9e35926c06..576492b8f3 100644
--- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html
+++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/page-toc.html
@@ -4,8 +4,7 @@
 <div class="tocsection onthispage">
     <i class="fas fa-list"></i> {{ _("On this page") }}
 </div>
-{%- endif %}
-
 <nav id="bd-toc-nav" class="page-toc">
     {{ page_toc }}
 </nav>
+{%- endif %}
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html
index 78aa9e1459..7e674f7742 100644
--- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html
+++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/version-switcher.html
@@ -1,9 +1,9 @@
-<div class="dropdown" id="version_switcher">
-    <button type="button" class="btn btn-sm navbar-btn dropdown-toggle" id="version_switcher_button" data-toggle="dropdown">
+<div class="version-switcher__container dropdown">
+    <button type="button" class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-toggle="dropdown">
         {{ theme_switcher.get('version_match') }}  <!-- this text may get changed later by javascript -->
         <span class="caret"></span>
     </button>
-    <div id="version_switcher_menu" class="dropdown-menu list-group-flush py-0" aria-labelledby="version_switcher_button">
+    <div class="version-switcher__menu dropdown-menu list-group-flush py-0" aria-labelledby="version-switcher__button">
     <!-- dropdown will be populated by javascript on page load -->
     </div>
 </div>
@@ -39,10 +39,12 @@
 (function () {
     $.getJSON("{{ theme_switcher.get('json_url') }}", function(data, textStatus, jqXHR) {
         const currentFilePath = "{{ pagename }}.html";
-        let btn = document.getElementById("version_switcher_button");
-        // Set empty strings by default so that these attributes exist and can be used in CSS selectors
-        btn.dataset["activeVersionName"] = "";
-        btn.dataset["activeVersion"] = "";
+        let btns = document.querySelectorAll("version-switcher__button");
+        btns.forEach((btn) => {
+            // Set empty strings by default so that these attributes exist and can be used in CSS selectors
+            btn.dataset["activeVersionName"] = "";
+            btn.dataset["activeVersion"] = "";
+        });
         // create links to the corresponding page in the other docs versions
         $.each(data, function(index, entry) {
             // if no custom name specified (e.g., "latest"), use version string
@@ -67,15 +69,17 @@
             node.dataset["versionName"] = entry.name;
             node.dataset["version"] = entry.version;
 
-            $("#version_switcher_menu").append(node);
+            $(".version-switcher__menu").append(node);
             // replace dropdown button text with the preferred display name of
             // this version, rather than using sphinx's {{ version }} variable.
             // also highlight the dropdown entry for the currently-viewed
             // version's entry
             if (entry.version == "{{ theme_switcher.get('version_match') }}") {
                 node.classList.add("active");
-                btn.innerText = btn.dataset["activeVersionName"] = entry.name;
-                btn.dataset["activeVersion"] = entry.version;
+                btns.forEach((btn) => {
+                    btn.innerText = btn.dataset["activeVersionName"] = entry.name;
+                    btn.dataset["activeVersion"] = entry.version;
+                });
             }
         });
     });
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html
index 224f338b2c..6f2cec993b 100644
--- a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html
+++ b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/sidebar-primary.html
@@ -2,7 +2,7 @@
 
 <div class="bd-sidebar-primary bd-sidebar{% if not sidebars %} hide-on-wide{% endif %}">
   {# Header items that will be displayed in the sidebar on mobile #}
-  <div class="sidebar-header-items">
+  <div class="sidebar-header-items sidebar-primary__section">
     <p class="sidebar-header-items__title" role="heading" aria-label="{{ _('Navigation') }}">
       {{ _("Navigation") }}
     </p>
@@ -30,17 +30,21 @@
   </div>
 
   {% if sidebars %}
-  <div class="sidebar-start-items">
+  <div class="sidebar-start-items sidebar-primary__section">
     {%- for sidebartemplate in sidebars %}
+    <div class="sidebar-start-items__item"">
     {%- include sidebartemplate %}
+    </div>
     {%- endfor %}
   </div>
   {% endif %}
 
   {# Items that will snap to the bottom of the screen#}
-  <div class="sidebar-end-items">
-    {%- for leftsidebartemplate in theme_left_sidebar_end %}
-    {%- include leftsidebartemplate %}
+  <div class="sidebar-end-items sidebar-primary__section">
+    {%- for sidebartemplate in theme_left_sidebar_end %}
+    <div class="sidebar-end-items__item">
+    {%- include sidebartemplate %}
+    </div>
     {%- endfor %}
   </div>
 </div>
diff --git a/tests/test_build.py b/tests/test_build.py
index d20c5942ad..74133ad5b4 100644
--- a/tests/test_build.py
+++ b/tests/test_build.py
@@ -68,9 +68,6 @@ def test_build_html(sphinx_build_factory, file_regression):
     navbar = index_html.select("div#navbar-center")[0]
     file_regression.check(navbar.prettify(), basename="navbar_ix", extension=".html")
 
-    # Sidebars should be hidden on index page because there is no sub-page
-    assert not index_html.select(".bd-sidebar-primary")
-
     # Sidebar subpage
     sidebar = subpage_html.select(".bd-sidebar")[0]
     file_regression.check(
@@ -271,7 +268,7 @@ def test_navbar_align_default(sphinx_build_factory):
     """The navbar items align with the proper part of the page."""
     sphinx_build = sphinx_build_factory("base").build()
     index_html = sphinx_build.html_tree("index.html")
-    assert "col-lg-9" in index_html.select("div#navbar-collapsible")[0].attrs["class"]
+    assert "col-lg-9" in index_html.select(".navbar-header-items")[0].attrs["class"]
 
 
 def test_navbar_align_right(sphinx_build_factory):
@@ -281,7 +278,7 @@ def test_navbar_align_right(sphinx_build_factory):
 
     # Both the column alignment and the margin should be changed
     index_html = sphinx_build.html_tree("index.html")
-    assert "col-lg-9" not in index_html.select("div#navbar-center")[0].attrs["class"]
+    assert "col-lg-9" not in index_html.select(".navbar-header-items")[0].attrs["class"]
     assert "ml-auto" in index_html.select("div#navbar-center")[0].attrs["class"]
 
 
@@ -599,7 +596,11 @@ def test_version_switcher(sphinx_build_factory, file_regression):
         }
     }
     sphinx_build = sphinx_build_factory("base", confoverrides=confoverrides).build()
-    switcher = sphinx_build.html_tree("index.html").select("#version_switcher")[0]
+    switcher = sphinx_build.html_tree("index.html").select(
+        ".version-switcher__container"
+    )[
+        0
+    ]  # noqa
     file_regression.check(
         switcher.prettify(), basename="navbar_switcher", extension=".html"
     )
diff --git a/tests/test_build/navbar_switcher.html b/tests/test_build/navbar_switcher.html
index 4a2acd7ce5..c3692e738a 100644
--- a/tests/test_build/navbar_switcher.html
+++ b/tests/test_build/navbar_switcher.html
@@ -1,11 +1,11 @@
-<div class="dropdown" id="version_switcher">
- <button class="btn btn-sm navbar-btn dropdown-toggle" data-toggle="dropdown" id="version_switcher_button" type="button">
+<div class="version-switcher__container dropdown">
+ <button class="version-switcher__button btn btn-sm navbar-btn dropdown-toggle" data-toggle="dropdown" type="button">
   0.7.1
   <!-- this text may get changed later by javascript -->
   <span class="caret">
   </span>
  </button>
- <div aria-labelledby="version_switcher_button" class="dropdown-menu list-group-flush py-0" id="version_switcher_menu">
+ <div aria-labelledby="version-switcher__button" class="version-switcher__menu dropdown-menu list-group-flush py-0">
   <!-- dropdown will be populated by javascript on page load -->
  </div>
 </div>
diff --git a/tests/test_build/navbar_theme.html b/tests/test_build/navbar_theme.html
index cc250fd0bc..f2d8c5f417 100644
--- a/tests/test_build/navbar_theme.html
+++ b/tests/test_build/navbar_theme.html
@@ -1,4 +1,4 @@
-<span class="btn btn-sm btn-outline-primary navbar-btn rounded-circle" id="theme-switch">
+<span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle">
  <a class="theme-switch" data-mode="light">
   <i class="fas fa-sun">
   </i>
diff --git a/tests/test_build/sidebar_subpage.html b/tests/test_build/sidebar_subpage.html
index ab34fad19f..77f38c86f2 100644
--- a/tests/test_build/sidebar_subpage.html
+++ b/tests/test_build/sidebar_subpage.html
@@ -1,22 +1,100 @@
 <div class="bd-sidebar-primary bd-sidebar">
- <div class="sidebar-start-items">
-  <nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
-   <div class="bd-toc-item active">
-    <ul class="nav bd-sidenav">
-     <li class="toctree-l1">
-      <a class="reference internal" href="page1.html">
-       3.1. Section 1 page1
+ <div class="sidebar-header-items sidebar-primary__section">
+  <p aria-label="Navigation" class="sidebar-header-items__title" role="heading">
+   Navigation
+  </p>
+  <div class="sidebar-header-items__center">
+   <div class="navbar-center-item">
+    <ul class="navbar-nav" id="navbar-main-elements">
+     <li class="toctree-l1 nav-item">
+      <a class="reference internal nav-link" href="../page1.html">
+       1. Page 1
       </a>
      </li>
-     <li class="toctree-l1">
-      <a class="reference external" href="https://google.com">
-       https://google.com
+     <li class="toctree-l1 nav-item">
+      <a class="reference internal nav-link" href="../page2.html">
+       2. Page 2
+      </a>
+     </li>
+     <li class="toctree-l1 current active nav-item">
+      <a class="current reference internal nav-link" href="#">
+       3. Section 1 index
       </a>
      </li>
     </ul>
    </div>
-  </nav>
+  </div>
+  <div class="sidebar-header-items__end">
+   <div class="navbar-end-item">
+    <!-- A button that will trigger a search field to be displayed on click. -->
+    <!-- An overlay that will expand in the background and cause the search to disappear when clicked -->
+    <button class="btn btn-sm navbar-btn search-button" id="bd-search-button" title="Search">
+     <i class="fas fa-search">
+     </i>
+    </button>
+    <div class="search-button__overlay">
+    </div>
+    <div class="search-button__search-container">
+     <form action="../search.html" class="bd-search d-flex align-items-center" method="get">
+      <i class="icon fas fa-search">
+      </i>
+      <input aria-label="Search the docs ..." autocomplete="off" class="form-control" id="search-input" name="q" placeholder="Search the docs ..." type="search"/>
+      <span class="search-button__kbd-shortcut">
+       <kbd class="kbd-shortcut__modifier">
+        Ctrl
+       </kbd>
+       +
+       <kbd>
+        K
+       </kbd>
+      </span>
+     </form>
+    </div>
+   </div>
+   <div class="navbar-end-item">
+    <span class="theme-switch-button btn btn-sm btn-outline-primary navbar-btn rounded-circle">
+     <a class="theme-switch" data-mode="light">
+      <i class="fas fa-sun">
+      </i>
+     </a>
+     <a class="theme-switch" data-mode="dark">
+      <i class="far fa-moon">
+      </i>
+     </a>
+     <a class="theme-switch" data-mode="auto">
+      <i class="fas fa-adjust">
+      </i>
+     </a>
+    </span>
+   </div>
+   <div class="navbar-end-item">
+    <ul aria-label="Icon Links" class="navbar-nav" id="navbar-icon-links">
+    </ul>
+   </div>
+  </div>
+ </div>
+ <div class="sidebar-start-items sidebar-primary__section">
+  <div "="" class="sidebar-start-items__item">
+   <nav aria-label="Section navigation" class="bd-links" id="bd-docs-nav">
+    <div class="bd-toc-item navbar-nav">
+     <ul class="nav bd-sidenav">
+      <li class="toctree-l1">
+       <a class="reference internal" href="page1.html">
+        3.1. Section 1 page1
+       </a>
+      </li>
+      <li class="toctree-l1">
+       <a class="reference external" href="https://google.com">
+        https://google.com
+       </a>
+      </li>
+     </ul>
+    </div>
+   </nav>
+  </div>
  </div>
- <div class="sidebar-end-items">
+ <div class="sidebar-end-items sidebar-primary__section">
+  <div class="sidebar-end-items__item">
+  </div>
  </div>
 </div>
diff --git a/tests/test_build/test_sidebars_captions.html b/tests/test_build/test_sidebars_captions.html
index 7580dd856d..a007dd0768 100644
--- a/tests/test_build/test_sidebars_captions.html
+++ b/tests/test_build/test_sidebars_captions.html
@@ -1,5 +1,5 @@
-<nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
- <div class="bd-toc-item active">
+<nav aria-label="Section navigation" class="bd-links" id="bd-docs-nav">
+ <div class="bd-toc-item navbar-nav">
   <p aria-level="2" class="caption" role="heading">
    <span class="caption-text">
     Section 1
diff --git a/tests/test_build/test_sidebars_nested_page.html b/tests/test_build/test_sidebars_nested_page.html
index fd682e2039..51300ebb92 100644
--- a/tests/test_build/test_sidebars_nested_page.html
+++ b/tests/test_build/test_sidebars_nested_page.html
@@ -1,5 +1,5 @@
-<nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
- <div class="bd-toc-item active">
+<nav aria-label="Section navigation" class="bd-links" id="bd-docs-nav">
+ <div class="bd-toc-item navbar-nav">
   <p aria-level="2" class="caption" role="heading">
    <span class="caption-text">
     Section 1
diff --git a/tests/test_build/test_sidebars_single.html b/tests/test_build/test_sidebars_single.html
deleted file mode 100644
index efe243d38d..0000000000
--- a/tests/test_build/test_sidebars_single.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<nav aria-label="Main navigation" class="bd-links" id="bd-docs-nav">
- <div class="bd-toc-item active">
-  <!-- Specify a startdepth of 0 instead of default of 1 -->
-  <p aria-level="2" class="caption" role="heading">
-   <span class="caption-text">
-    Caption 1
-   </span>
-  </p>
-  <ul class="nav bd-sidenav">
-   <li class="toctree-l1">
-    <a class="reference internal" href="section1/index.html">
-     Section 1 index
-    </a>
-   </li>
-  </ul>
-  <p aria-level="2" class="caption" role="heading">
-   <span class="caption-text">
-    Caption 2
-   </span>
-  </p>
-  <ul class="nav bd-sidenav">
-   <li class="toctree-l1">
-    <a class="reference internal" href="section2/index.html">
-     Section 2 index
-    </a>
-   </li>
-  </ul>
- </div>
-</nav>