diff --git a/app/index.html b/app/index.html
index cbe820c..fd3c830 100644
--- a/app/index.html
+++ b/app/index.html
@@ -6,15 +6,19 @@
     <title>LLDAP Administration</title>
     <script src="/static/main.js" type="module" defer></script>
     <link
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css"
       rel="preload stylesheet"
-      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+      integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
       crossorigin="anonymous"
       as="style" />
     <script
       src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
       crossorigin="anonymous"></script>
+      <script 
+      src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js" 
+      integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"
+      crossorigin="anonymous"></script>
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
diff --git a/app/index_local.html b/app/index_local.html
index 58e956b..e6c59eb 100644
--- a/app/index_local.html
+++ b/app/index_local.html
@@ -6,13 +6,16 @@
     <title>LLDAP Administration</title>
     <script src="/static/main.js" type="module" defer></script>
     <link
-      href="/static/bootstrap.min.css"
+      href="/static/bootstrap-nightshade.min.css"
       rel="preload stylesheet"
-      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
+      integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
       as="style" />
     <script
       src="/static/bootstrap.bundle.min.js"
       integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"></script>
+    <script 
+    src="/static/darkmode.min.js" 
+    integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"></script>
     <link
       rel="stylesheet"
       href="/static/bootstrap-icons.css"
diff --git a/app/src/components/app.rs b/app/src/components/app.rs
index e20fed7..bfc4ea3 100644
--- a/app/src/components/app.rs
+++ b/app/src/components/app.rs
@@ -26,6 +26,13 @@ use yew_router::{
     router::Router,
     service::RouteService,
 };
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+  #[wasm_bindgen(js_namespace = darkmode)]
+  fn toggleDarkMode(doSave: bool);
+}
 
 pub struct App {
     link: ComponentLink<Self>,
@@ -256,7 +263,7 @@ impl App {
           <header class="p-2 mb-3 border-bottom">
             <div class="container">
               <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
-                <a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-dark text-decoration-none">
+                <a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-body text-decoration-none">
                   <h2>{"LLDAP"}</h2>
                 </a>
 
@@ -265,7 +272,7 @@ impl App {
                     <>
                       <li>
                         <Link
-                          classes="nav-link px-2 link-dark h6"
+                          classes="nav-link px-2 text-body h6"
                           route=AppRoute::ListUsers>
                           <i class="bi-people me-2"></i>
                           {"Users"}
@@ -273,7 +280,7 @@ impl App {
                       </li>
                       <li>
                         <Link
-                          classes="nav-link px-2 link-dark h6"
+                          classes="nav-link px-2 text-body h6"
                           route=AppRoute::ListGroups>
                           <i class="bi-collection me-2"></i>
                           {"Groups"}
@@ -287,8 +294,9 @@ impl App {
                   if let Some((user_id, _)) = &self.user_info {
                     html! {
                       <div class="dropdown text-end">
+                        <input class="form-check-input" onclick={Callback::from(move |_| toggleDarkMode(true))} type="checkbox" id="darkModeToggle"/>
                         <a href="#"
-                          class="d-block link-dark text-decoration-none dropdown-toggle"
+                          class="d-block text-body text-decoration-none dropdown-toggle"
                           id="dropdownUser"
                           data-bs-toggle="dropdown"
                           aria-expanded="false">
diff --git a/app/static/libraries.txt b/app/static/libraries.txt
index 8f513d9..1cc936f 100644
--- a/app/static/libraries.txt
+++ b/app/static/libraries.txt
@@ -1,4 +1,6 @@
 https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css
+https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css
+https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js
 https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js
 https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css
 https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
\ No newline at end of file