diff --git a/archivist/apps/templates/includes/navigation-transparent.html b/archivist/apps/templates/includes/navigation-transparent.html
index 43798ef..22e3376 100644
--- a/archivist/apps/templates/includes/navigation-transparent.html
+++ b/archivist/apps/templates/includes/navigation-transparent.html
@@ -48,6 +48,57 @@
                     </form>
                 </li>
             
+                <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+                    <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+                    <hr class="d-lg-none my-2">
+                </li>
+
+                <!-- Theme Selector -->
+                <li class="nav-item dropdown ms-auto mx-auto">    
+                    <div class="d-flex align-items-center dropdown-center ">
+                        <button class="btn btn-link text-body-emphasis px-0 text-decoration-none dropdown-toggle d-flex align-items-center icon-link"
+                                id="bd-theme"
+                                type="button"
+                                aria-expanded="false"
+                                data-bs-toggle="dropdown"
+                                data-bs-display="static"
+                                aria-label="Toggle theme">
+                            <svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg>
+                            <span class="d-lg-none ms-0" id="bd-theme-text"></span>
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="bd-theme" >
+                            <li>
+                                <button type="button" class="dropdown-item d-flex align-items-center icon-link" data-bs-theme-value="light">
+                                    <svg class="bi me-2 opacity-50 theme-icon"><use href="#sun-fill"></use></svg>
+                                    Light
+                                    <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" class="dropdown-item d-flex align-items-center icon-link" data-bs-theme-value="dark">
+                                    <svg class="bi me-2 opacity-50 theme-icon"><use href="#moon-stars-fill"></use></svg>
+                                    Dark
+                                    <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+
+                                </button>
+                            </li>
+                            <li>
+                                <button type="button" class="dropdown-item d-flex align-items-center active icon-link" data-bs-theme-value="auto">
+                                    <svg class="bi me-2 opacity-50 theme-icon"><use href="#circle-half"></use></svg>
+                                    Auto
+                                    <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <!-- End Theme Selector -->
+            
+                <li class="nav-item py-2 py-lg-1 col-12 col-lg-auto">
+                    <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+                    <hr class="d-lg-none my-2">
+                </li>
+            
                 {% else %}
             
                 <!-- Theme Selector -->