theme toggle problems

public/css/header.css

@@ -71,10 +71,15 @@ header {
     justify-content: center;
     transition: var(--theme-transition);
     border-radius: var(--border-radius);
+    position: relative;
+    width: 40px;
+    height: 40px;
+    margin-left: var(--spacing-sm);
 }
 
 .theme-toggle:hover {
     color: var(--primary);
+    background-color: var(--bg-card);
 }
 
 .theme-toggle:focus-visible {
@@ -83,6 +88,41 @@ header {
     border-radius: var(--border-radius);
 }
 
+.theme-toggle i {
+    font-size: 1.2rem;
+    position: absolute;
+    transition: opacity var(--transition-speed) ease,
+                transform var(--transition-speed) ease;
+    transform: var(--gpu-accelerated);
+}
+
+/* Light Theme Icon States */
+[data-theme="light"] .theme-toggle .fa-moon {
+    opacity: 1;
+    transform: rotate(0) var(--gpu-accelerated);
+}
+
+[data-theme="light"] .theme-toggle .fa-sun {
+    opacity: 0;
+    transform: rotate(-90deg) var(--gpu-accelerated);
+}
+
+/* Dark Theme Icon States */
+[data-theme="dark"] .theme-toggle .fa-moon {
+    opacity: 0;
+    transform: rotate(90deg) var(--gpu-accelerated);
+}
+
+[data-theme="dark"] .theme-toggle .fa-sun {
+    opacity: 1;
+    transform: rotate(0) var(--gpu-accelerated);
+}
+
+/* Hover Animation */
+.theme-toggle:hover i {
+    transform: rotate(15deg) var(--gpu-accelerated);
+}
+
 .mobile-menu-toggle {
     display: none;
     background: none;