diff --git a/flaskr/static/style.css b/flaskr/static/style.css
index d57c61f0..2acb2e1c 100644
--- a/flaskr/static/style.css
+++ b/flaskr/static/style.css
@@ -162,6 +162,9 @@ input[type=submit]:hover {
   border-radius: 25px;
   cursor: pointer;
   transition: background 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #theme-toggle:before {
@@ -174,6 +177,16 @@ input[type=submit]:hover {
   background: white;
   border-radius: 50%;
   transition: transform 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#theme-icon {
+  position: absolute;
+  font-size: 14px;
+  color: #333;
+  transition: color 0.3s;
 }
 
 body.dark-mode #theme-toggle {
@@ -184,6 +197,10 @@ body.dark-mode #theme-toggle:before {
   transform: translateX(25px);
 }
 
+body.dark-mode #theme-icon {
+  color: #e0e0e0;
+}
+
 body.dark-mode {
   background: #121212;
   color: #e0e0e0;
diff --git a/flaskr/templates/base.html b/flaskr/templates/base.html
index 6faf1e7d..12542b27 100644
--- a/flaskr/templates/base.html
+++ b/flaskr/templates/base.html
@@ -7,7 +7,7 @@
   <ul>
     <li>
       <div id="theme-toggle" aria-label="Toggle Dark Mode">
-        <i id="theme-icon" class="fas"></i>
+        <i id="theme-icon" class="fas fa-moon"></i>
       </div>
     </li>
     {% if g.user %}
@@ -36,9 +36,8 @@
 
     if (currentTheme === 'dark') {
       document.body.classList.add('dark-mode');
+      themeIcon.classList.remove('fa-moon');
       themeIcon.classList.add('fa-sun');
-    } else {
-      themeIcon.classList.add('fa-moon');
     }
 
     themeToggle.addEventListener('click', function() {