diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 39c428df4ea..1f29a96a69a 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -26,4 +26,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 1cd0ee8a7cd..ae47324a6f8 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -41,16 +41,6 @@
   </nav>
 
   <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
-    {% unless site.theme_mode %}
-      <button type="button" class="btn btn-link nav-link" aria-label="Switch Mode" id="mode-toggle">
-        <i class="fas fa-adjust"></i>
-      </button>
-
-      {% if site.data.contact.size > 0 %}
-        <span class="icon-border"></span>
-      {% endif %}
-    {% endunless %}
-
     {% for entry in site.data.contact %}
       {%- assign url = null -%}
 
diff --git a/_includes/topbar.html b/_includes/topbar.html
index 735f1d1cf55..73301a39db6 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -54,24 +54,55 @@
         {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
+    {% comment %} Container for buttons {% endcomment %}
+    <div class="d-flex">
+      {% unless site.theme_mode %}
+        <button
+          type="button"
+          class="btn btn-link nav-link"
+          aria-label="Switch Mode"
+          id="mode-toggle"
+          onClick="iconSwap()"
+        >
+          {% comment %} <i class="fas fa-adjust"></i> {% endcomment %}
+          <i class="bi bi-brightness-high-fill"></i>
+        </button>
+      {% endunless %}
+      <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
+        <i class="fas fa-search fa-fw"></i>
+      </button>
 
-    <button type="button" id="search-trigger" class="btn btn-link" aria-label="Search">
-      <i class="fas fa-search fa-fw"></i>
-    </button>
-
-    <search id="search" class="align-items-center ms-3 ms-lg-0">
-      <i class="fas fa-search fa-fw"></i>
-      <input
-        class="form-control"
-        id="search-input"
-        type="search"
-        aria-label="search"
-        autocomplete="off"
-        placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
-      >
-    </search>
-    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
-      {{- site.data.locales[include.lang].search.cancel -}}
-    </button>
+      <search id="search" class="align-items-center">
+        <i class="fas fa-search fa-fw"></i>
+        <input
+          class="form-control"
+          id="search-input"
+          type="search"
+          aria-label="search"
+          autocomplete="off"
+          placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
+        >
+      </search>
+      <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+        {{- site.data.locales[include.lang].search.cancel -}}
+      </button>
+      {% comment %} Theme button {% endcomment %}
+    </div>
   </div>
 </header>
+
+<script>
+  $toggle = document.getElementById('mode-toggle');
+  if (Theme.visualState == 'dark') {
+    $toggle.innerHTML = '<i class="bi bi-brightness-high-fill"></i>';
+  } else if (Theme.visualState == 'light') {
+    $toggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
+  }
+  function iconSwap() {
+    if (Theme.visualState == 'dark') {
+      $toggle.innerHTML = '<i class="bi bi-moon-stars"></i>';
+    } else if (Theme.visualState == 'light') {
+      $toggle.innerHTML = '<i class="bi bi-brightness-high-fill"></i>';
+    }
+  }
+</script>
diff --git a/_javascript/modules/components/mode-toggle.js b/_javascript/modules/components/mode-toggle.js
index 455ff0a02dc..708c2830081 100644
--- a/_javascript/modules/components/mode-toggle.js
+++ b/_javascript/modules/components/mode-toggle.js
@@ -2,9 +2,9 @@
  * Add listener for theme mode toggle
  */
 
-const $toggle = document.getElementById('mode-toggle');
-
 export function modeWatcher() {
+  const $toggle = document.getElementById('mode-toggle');
+  console.log('Mode watcher initialized');
   if (!$toggle) {
     return;
   }
diff --git a/_sass/base/_base.scss b/_sass/base/_base.scss
index b512a484cc2..5db83c5b4ae 100644
--- a/_sass/base/_base.scss
+++ b/_sass/base/_base.scss
@@ -4,6 +4,7 @@
 @use '../abstracts/placeholders';
 @use '../themes/light';
 @use '../themes/dark';
+@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css";
 
 :root {
   font-size: 16px;
diff --git a/_sass/layout/_sidebar.scss b/_sass/layout/_sidebar.scss
index eaad470c6c4..68d0667c080 100644
--- a/_sass/layout/_sidebar.scss
+++ b/_sass/layout/_sidebar.scss
@@ -225,11 +225,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
       line-height: $btn-size;
     }
 
-    #mode-toggle {
-      @extend %button;
-      @extend %sidebar-links;
-      @extend %sidebar-link-hover;
-    }
+
 
     .icon-border {
       @extend %no-cursor;
diff --git a/_sass/layout/_topbar.scss b/_sass/layout/_topbar.scss
index eb0aea9b0ca..083d58366df 100644
--- a/_sass/layout/_topbar.scss
+++ b/_sass/layout/_topbar.scss
@@ -14,6 +14,10 @@
   }
 }
 
+#mode-toggle {
+      margin-right: 1.5rem;
+    }
+
 #topbar {
   @extend %btn-color;