diff --git a/static/css/components/header.css b/static/css/components/header.css
index 9b5e8b92..0cac5bfb 100644
--- a/static/css/components/header.css
+++ b/static/css/components/header.css
@@ -110,8 +110,18 @@
   transform: translateY(-2px);
 }
 
-.theme-toggle .light-icon {
+.theme-toggle {
+  position: relative; /* Ensure relative positioning for the container */
+}
+
+.theme-toggle .light-icon,
+.theme-toggle .dark-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Center perfectly */
   opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
 .theme-toggle .dark-icon {