diff --git a/public/assets/logo-dark.png b/public/assets/logo-dark.png
new file mode 100644
index 0000000..f8a5f00
Binary files /dev/null and b/public/assets/logo-dark.png differ
diff --git a/public/assets/logo.png b/public/assets/logo.png
index f8a5f00..6d68c15 100644
Binary files a/public/assets/logo.png and b/public/assets/logo.png differ
diff --git a/resources/js/components/SMNavbar.vue b/resources/js/components/SMNavbar.vue
index 8875eb4..e9a8a96 100644
--- a/resources/js/components/SMNavbar.vue
+++ b/resources/js/components/SMNavbar.vue
@@ -7,11 +7,17 @@
             <div id="sm-nav-head">
                 <router-link :to="{ name: 'home' }" id="sm-logo-link">
                     <img
-                        class="sm-nav-logo"
+                        class="sm-nav-logo dark:d-none"
                         src="/assets/logo.png"
                         width="270"
                         height="40"
                         alt="STEMMechanics" />
+                    <img
+                        class="sm-nav-logo light:d-none"
+                        src="/assets/logo-dark.png"
+                        width="270"
+                        height="40"
+                        alt="STEMMechanics" />
                 </router-link>
                 <label id="sm-nav-toggle" @click.stop="handleClickToggleMenu"
                     ><img