diff --git a/public/404.html b/public/404.html
index ed70c39..2d1011a 100644
--- a/public/404.html
+++ b/public/404.html
@@ -1,13 +1,6 @@
 <script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script><main>
     <div class="about">
-      <div>
-        <div style="background: #ed9458; border-radius: 25px;
-        font-size: 20px; 
-        padding: 10px; 
-        border: 1px solid #FFFFFF; 
-        margin: 10px;
-        text-align: center;
-        vertical-align: middle;">
+      <div class="bgbox">
         <p>404</p>
         <p>Page not found, Meaning it either does not exist or is broken.</p>
         <div>
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 18114ad..c2e5248 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -161,7 +161,7 @@ body.dark-mode a:hover {
 }
 .navbar-no-bg {
   padding-top: 10px;
-  background: none;
+  background-color: rgba(68, 68, 68, 0.8); /* Black background with 80% opacity */
 }
 
 ul.navbar-nav {
diff --git a/public/projects/index.html b/public/projects/index.html
index 4be5b6e..dc4c1e3 100644
--- a/public/projects/index.html
+++ b/public/projects/index.html
@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -93,7 +86,7 @@
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b
diff --git a/public/radio/index.html b/public/radio/index.html
index 3c869cf..577efb0 100644
--- a/public/radio/index.html
+++ b/public/radio/index.html
@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -97,7 +90,7 @@
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b
diff --git a/public/salad/index.html b/public/salad/index.html
index 6665e29..1dba596 100644
--- a/public/salad/index.html
+++ b/public/salad/index.html
@@ -13,6 +13,7 @@
     <title></title>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <script src="/assets/js/dark-mode.js"></script>
     <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css" />
     <link
       rel="stylesheet"
@@ -51,15 +52,6 @@
             />
             <script src="/assets/js/lanyard.js"></script>
           </a>
-          <a
-            style="margin-left: 59px; margin-top: 7px; display: inline-block"
-            href="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml"
-          >
-            <img
-              src="https://github.com/tayrp/tayrp.github.io/actions/workflows/hugo.yml/badge.svg?branch=main"
-              alt="Deploy Hugo site to Pages"
-            />
-          </a>
           <link rel="home" href="/" />
         </div>
         <div class="collapse navbar-collapse" id="top-navbar-1">
@@ -70,6 +62,7 @@
             <li><a class="btn btn-link-3" href="/discord">Discord</a></li>
             <li><a class="btn btn-link-3" href="/pages">Pages</a></li>
             <li><a class="btn btn-link-3" href="/credits">Credits</a></li>
+            <li><a class="btn btn-link-3" id="toggle-dark-mode" onclick="toggleDarkMode()">🌙</a></li>
           </ul>
         </div>
       </div>
@@ -103,7 +96,7 @@ <h2>
 
     <footer>
       <div class="container">
-        <div class="bgbox">
+        <div class="bgboxfooter">
           <div class="row">
             &copy;
             <b
diff --git a/static/assets/css/style.css b/static/assets/css/style.css
index 18114ad..c2e5248 100644
--- a/static/assets/css/style.css
+++ b/static/assets/css/style.css
@@ -161,7 +161,7 @@ body.dark-mode a:hover {
 }
 .navbar-no-bg {
   padding-top: 10px;
-  background: none;
+  background-color: rgba(68, 68, 68, 0.8); /* Black background with 80% opacity */
 }
 
 ul.navbar-nav {
diff --git a/static/assets/imgs/status/away.png b/static/assets/imgs/status/away.png
index 2f49e1c..0853e81 100644
Binary files a/static/assets/imgs/status/away.png and b/static/assets/imgs/status/away.png differ
diff --git a/static/assets/imgs/status/dnd.png b/static/assets/imgs/status/dnd.png
index 1e1ea46..b0a1d8a 100644
Binary files a/static/assets/imgs/status/dnd.png and b/static/assets/imgs/status/dnd.png differ
diff --git a/static/assets/imgs/status/offline.png b/static/assets/imgs/status/offline.png
index 3401646..cc66284 100644
Binary files a/static/assets/imgs/status/offline.png and b/static/assets/imgs/status/offline.png differ
diff --git a/static/assets/imgs/status/old/away.png b/static/assets/imgs/status/old/away.png
new file mode 100644
index 0000000..2f49e1c
Binary files /dev/null and b/static/assets/imgs/status/old/away.png differ
diff --git a/static/assets/imgs/status/old/dnd.png b/static/assets/imgs/status/old/dnd.png
new file mode 100644
index 0000000..1e1ea46
Binary files /dev/null and b/static/assets/imgs/status/old/dnd.png differ
diff --git a/static/assets/imgs/status/old/offline.png b/static/assets/imgs/status/old/offline.png
new file mode 100644
index 0000000..3401646
Binary files /dev/null and b/static/assets/imgs/status/old/offline.png differ
diff --git a/static/assets/imgs/status/old/online.png b/static/assets/imgs/status/old/online.png
new file mode 100644
index 0000000..d6e1321
Binary files /dev/null and b/static/assets/imgs/status/old/online.png differ
diff --git a/static/assets/imgs/status/online.png b/static/assets/imgs/status/online.png
index d6e1321..660ee22 100644
Binary files a/static/assets/imgs/status/online.png and b/static/assets/imgs/status/online.png differ
diff --git a/static/assets/imgs/status/status.psd b/static/assets/imgs/status/status.psd
new file mode 100644
index 0000000..d51407d
Binary files /dev/null and b/static/assets/imgs/status/status.psd differ
diff --git a/static/assets/js/dark-mode.js b/static/assets/js/dark-mode.js
index 079e4e8..5b02f60 100644
--- a/static/assets/js/dark-mode.js
+++ b/static/assets/js/dark-mode.js
@@ -9,7 +9,9 @@ function toggleDarkMode() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-  if (localStorage.getItem("dark-mode") === "enabled") {
+  const darkModeSetting = localStorage.getItem("dark-mode");
+  
+  if (darkModeSetting === "enabled" || darkModeSetting === null) {
     document.body.classList.add("dark-mode");
   } else {
     document.body.classList.remove("dark-mode");