diff --git a/client/src/capsules/dark_mode_btn.rs b/client/src/capsules/dark_mode_btn.rs
index 649076d..f33fd55 100644
--- a/client/src/capsules/dark_mode_btn.rs
+++ b/client/src/capsules/dark_mode_btn.rs
@@ -11,13 +11,46 @@ lazy_static! {
 fn dark_mode_btn<G: Html>(cx: Scope, _props: ()) -> View<G> {
     let global_state = Reactor::<G>::from_cx(cx).get_global_state::<AppStateRx>(cx);
 
+    let dark_mode = &global_state.dark_mode;
+
     let toggle_dark_mode = move |_| {
-        global_state.dark_mode.set(!*global_state.dark_mode.get());
+        dark_mode.set(!*dark_mode.get());
     };
 
     view! { cx,
-        button (on:click=toggle_dark_mode, class="py-1 px-2 mx-1 rounded-full bg-slate-200 dark:bg-slate-800")
-        { "Toggle dark mode" }
+        (if *dark_mode.get() {
+            view! {cx,
+                div(on:click=toggle_dark_mode, class="py-1 px-2 mx-1 rounded-full bg-slate-200 dark:bg-slate-800") {
+                    svg(xmlns="http://www.w3.org/2000/svg", version="1.1", width="25", height="25", viewBox="0 0 256 256") {
+                        g(style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;", transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)") {
+                            path(d="M 89.634 59.683 c -0.338 -0.276 -0.816 -0.302 -1.184 -0.062 c -16.514 10.864 -38.661 8.589 -52.661 -5.41 C 21.79 40.212 19.515 18.065 30.38 1.551 c 0.24 -0.366 0.215 -0.845 -0.062 -1.183 c -0.277 -0.339 -0.741 -0.46 -1.148 -0.294 c -5.826 2.349 -11.048 5.809 -15.523 10.283 c -18.195 18.195 -18.195 47.802 0 65.997 C 22.744 85.451 34.695 90 46.645 90 c 11.951 0 23.901 -4.549 32.999 -13.646 c 4.475 -4.476 7.935 -9.699 10.284 -15.523 C 90.091 60.425 89.972 59.96 89.634 59.683 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(230,230,230); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 77.254 40.17 c -4.894 -1.63 -8.788 -5.525 -10.42 -10.419 c -0.27 -0.81 -0.992 -1.334 -1.841 -1.334 c -0.848 0 -1.571 0.524 -1.84 1.335 c -1.631 4.893 -5.526 8.787 -10.419 10.418 c -0.811 0.27 -1.334 0.993 -1.334 1.841 c 0 0.848 0.524 1.571 1.334 1.841 c 4.894 1.631 8.788 5.525 10.418 10.419 h 0.001 c 0.27 0.811 0.992 1.334 1.84 1.334 c 0.849 0 1.572 -0.524 1.841 -1.334 c 1.631 -4.893 5.526 -8.788 10.419 -10.419 c 0.812 -0.27 1.335 -0.992 1.335 -1.841 C 78.588 41.162 78.064 40.439 77.254 40.17 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(230,230,230); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 81.635 11.577 c -2.597 -0.865 -4.664 -2.932 -5.53 -5.529 c -0.208 -0.626 -0.789 -1.046 -1.446 -1.046 c -0.657 0 -1.239 0.421 -1.448 1.047 c -0.864 2.596 -2.93 4.663 -5.527 5.528 c -0.626 0.208 -1.047 0.789 -1.047 1.446 s 0.421 1.238 1.046 1.446 c 2.596 0.865 4.663 2.932 5.529 5.529 c 0.208 0.625 0.788 1.046 1.445 1.047 c 0.001 0 0.001 0 0.002 0 c 0.656 0 1.238 -0.421 1.446 -1.046 c 0.866 -2.597 2.933 -4.664 5.53 -5.529 c 0.625 -0.209 1.046 -0.79 1.046 -1.446 C 82.681 12.367 82.26 11.786 81.635 11.577 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(230,230,230); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 52.274 18.689 c -3.232 -1.076 -5.805 -3.649 -6.882 -6.881 c -0.224 -0.674 -0.849 -1.126 -1.556 -1.126 c -0.706 0 -1.331 0.453 -1.556 1.126 c -1.077 3.232 -3.649 5.804 -6.881 6.881 c -0.674 0.224 -1.126 0.849 -1.126 1.556 s 0.453 1.331 1.126 1.556 c 3.232 1.077 5.805 3.65 6.881 6.882 c 0.224 0.674 0.849 1.126 1.556 1.126 c 0.706 0 1.331 -0.453 1.556 -1.126 c 1.077 -3.232 3.649 -5.805 6.881 -6.882 c 0.674 -0.224 1.127 -0.849 1.127 -1.556 S 52.947 18.913 52.274 18.689 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(230,230,230); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                        }
+                    }
+                }
+            }
+        } else {
+            view! {cx,
+                div(on:click=toggle_dark_mode, class="py-1 px-2 mx-1 rounded-full bg-slate-200 dark:bg-slate-800") {
+                    svg(xmlns="http://www.w3.org/2000/svg", version="1.1", width="25", height="25", viewBox="0 0 256 256") {
+                        g(style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;", transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)") {
+                            path(d="M 45 68 c -12.682 0 -23 -10.317 -23 -23 c 0 -12.682 10.318 -23 23 -23 c 12.683 0 23 10.318 23 23 C 68 57.683 57.683 68 45 68 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 45 17.556 c -1.657 0 -3 -1.343 -3 -3 V 3 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 v 11.556 C 48 16.212 46.657 17.556 45 17.556 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 45 90 c -1.657 0 -3 -1.343 -3 -3 V 75.444 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 V 87 C 48 88.657 46.657 90 45 90 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 14.556 48 H 3 c -1.657 0 -3 -1.343 -3 -3 c 0 -1.657 1.343 -3 3 -3 h 11.556 c 1.657 0 3 1.343 3 3 C 17.556 46.657 16.212 48 14.556 48 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 87 48 H 75.444 c -1.657 0 -3 -1.343 -3 -3 c 0 -1.657 1.343 -3 3 -3 H 87 c 1.657 0 3 1.343 3 3 C 90 46.657 88.657 48 87 48 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 66.527 26.473 c -0.768 0 -1.535 -0.293 -2.121 -0.878 c -1.172 -1.172 -1.172 -3.071 0 -4.243 l 8.171 -8.171 c 1.172 -1.172 3.07 -1.171 4.242 0 c 1.172 1.172 1.172 3.071 0 4.243 l -8.171 8.171 C 68.063 26.18 67.295 26.473 66.527 26.473 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 15.302 77.698 c -0.768 0 -1.536 -0.293 -2.121 -0.879 c -1.172 -1.171 -1.172 -3.071 0 -4.242 l 8.171 -8.171 c 1.171 -1.172 3.071 -1.172 4.242 0 c 1.172 1.171 1.172 3.071 0 4.242 l -8.171 8.171 C 16.837 77.405 16.069 77.698 15.302 77.698 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 23.473 26.473 c -0.768 0 -1.536 -0.293 -2.121 -0.878 l -8.171 -8.171 c -1.172 -1.172 -1.172 -3.071 0 -4.243 c 1.172 -1.172 3.072 -1.171 4.243 0 l 8.171 8.171 c 1.172 1.172 1.172 3.071 0 4.243 C 25.008 26.18 24.24 26.473 23.473 26.473 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                            path(d="M 74.698 77.698 c -0.768 0 -1.535 -0.293 -2.121 -0.879 l -8.171 -8.171 c -1.172 -1.171 -1.172 -3.071 0 -4.242 c 1.172 -1.172 3.07 -1.172 4.242 0 l 8.171 8.171 c 1.172 1.171 1.172 3.071 0 4.242 C 76.233 77.405 75.466 77.698 74.698 77.698 z", style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;", transform=" matrix(1 0 0 1 0 0) ", stroke-linecap="round") {}
+                        }
+                    }
+                }
+
+            }
+        })
     }
 }