diff --git a/index.css b/index.css
index bf188e7..060a7a5 100644
--- a/index.css
+++ b/index.css
@@ -97,6 +97,7 @@ body.light-mode nav ul li a:hover {
 }
 
 body.light-mode .dark-mode-toggle {
+    color: #242424;
     background-color: #f1f1f1;
 }
 body.light-mode .dark-mode-toggle:hover {
@@ -141,7 +142,7 @@ footer a {
     text-decoration: none;
 }
 footer a:hover {
-    background-color: rgb(20, 23, 26);
+    background-color: #5865f2;
 }
 body.light-mode footer a {
     background-color: rgb(231, 231, 231);
diff --git a/index.html b/index.html
index e3a46af..47ca092 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
             <a href="#contact">Contact</a>
           </li>
         </ul>
-        <button id="dark-mode-toggle" class="dark-mode-toggle">🌙</button>
+        <button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button>
       </nav>
     </header>
 
diff --git a/script.js b/script.js
index 1eae248..6db1174 100644
--- a/script.js
+++ b/script.js
@@ -5,7 +5,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     function toggleDarkMode(save){
         const isLightMode = body.classList.toggle("light-mode");
-        darkModeButton.textContent = isLightMode ? "☀️" : "🌙";
+        darkModeButton.innerHTML = isLightMode ? '<i class="fa-solid fa-sun"></i>' : '<i class="fa-solid fa-moon"></i>';
     
         if (save){
             localStorage.setItem("theme", isLightMode ? "light" : "dark");
@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const theme = localStorage.getItem("theme");
     if (theme === "light"){
         body.classList.add("light-mode");
-        darkModeButton.textContent = "☀️";
+        darkModeButton.innerHTML = '<i class="fa-solid fa-sun"></i>';
     }
 
     darkModeButton.addEventListener("click", () => {