diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 44ca1d1..8913f39 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -85,17 +85,9 @@ const Navbar: React.FC = () => {
             aria-label="Toggle Theme"
           >
             {mode === "dark" ? (
-              <Sun
-                className={`h-5 w-5 text-yellow-400 transition-all duration-300 ${
-                  isThemeToggling ? 'rotate-180 scale-0' : 'rotate-0 scale-100'
-                }`}
-              />
+              <Sun key="sun-icon" className="theme-toggle-icon h-5 w-5 text-yellow-400" />
             ) : (
-              <Moon
-                className={`h-5 w-5 text-slate-700 transition-all duration-300 ${
-                  isThemeToggling ? 'rotate-180 scale-0' : 'rotate-0 scale-100'
-                }`}
-              />
+              <Moon key="moon-icon" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" />
             )}
           </button>
         </div>
@@ -116,11 +108,7 @@ const Navbar: React.FC = () => {
                 }`}
               />
             ) : (
-              <Moon
-                className={`h-5 w-5 text-white transition-all duration-300 ${
-                  isThemeToggling ? 'rotate-180 scale-0' : 'rotate-0 scale-100'
-                }`}
-              />
+              <Moon key="moon-icon-mobile" className="theme-toggle-icon h-5 w-5 text-slate-700 dark:text-white" />
             )}
           </button>
 
diff --git a/src/context/ThemeContext.tsx b/src/context/ThemeContext.tsx
index 85c8b29..809e215 100644
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -39,9 +39,15 @@ const ThemeWrapper = ({ children }: { children: ReactNode }) => {
     return () => clearTimeout(timer);
   }, [mode]);
 
-  const toggleTheme = () => {
-    setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
-  };
+ const toggleTheme = () => {
+  document.documentElement.classList.add("theme-transitioning");
+
+  window.setTimeout(() => {
+    document.documentElement.classList.remove("theme-transitioning");
+  }, 650);
+
+  setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+};
 
   const muiTheme: Theme = useMemo(
     () => createTheme({ palette: { mode } }),
diff --git a/src/index.css b/src/index.css
index 3f5943c..cf61745 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,3 +89,37 @@
 .icon-issue-closed {
   color: #cf222e;
 }
+
+html.theme-transitioning,
+html.theme-transitioning *,
+html.theme-transitioning *::before,
+html.theme-transitioning *::after {
+  transition-property: background-color, border-color, color, fill, stroke, box-shadow, opacity, transform;
+  transition-duration: 600ms;
+  transition-timing-function: ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.theme-transitioning,
+  html.theme-transitioning *,
+  html.theme-transitioning *::before,
+  html.theme-transitioning *::after {
+    transition-duration: 0ms;
+  }
+}
+
+@keyframes theme-icon-pop {
+  0% {
+    opacity: 0;
+    transform: rotate(-90deg) scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+.theme-toggle-icon {
+  animation: theme-icon-pop 500ms ease-out;
+}
\ No newline at end of file