diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..059fb45a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -77,20 +77,20 @@ const Navbar: React.FC = () => {
           {/* Theme Toggle */}
           <button
             onClick={toggleTheme}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors transition-all ani-fade-in duration-100"
             aria-label="Toggle Theme"
           >
             {mode === "dark" ? (
               <Sun className="h-5 w-5 text-yellow-400" />
             ) : (
-              <Moon className="h-5 w-5 text-white" />
+              <Moon className="h-5 w-5 text-black" />
             )}
           </button>
 
           {/* Menu Toggle */}
           <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            onClick={() => setIsOpen((prev)=>!prev)}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors transition-all ani-fade-in duration-100"
             aria-label="Toggle Menu"
           >
             {isOpen ? (
@@ -104,7 +104,7 @@ const Navbar: React.FC = () => {
 
       {/* Mobile Menu */}
       {isOpen && (
-        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+        <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 transition-all ani-fade-in duration-100">
           <div className="px-6 py-5 flex flex-col gap-3">
 
             <NavLink
diff --git a/src/index.css b/src/index.css
index 3f5943c5..b422a729 100644
--- a/src/index.css
+++ b/src/index.css
@@ -89,3 +89,21 @@
 .icon-issue-closed {
   color: #cf222e;
 }
+
+@layer utilities{
+  @keyframes fade-in{
+    from {
+      opacity:0; 
+      transform: translateY(20px); 
+      filter:blur(45px);
+    }
+    to{
+      opacity:1;
+      transform: translateY(0); 
+      filter:blur(0);
+    }
+  }
+  .ani-fade-in{
+    animation: fade-in 0.8s ease-out both;
+  }
+}
\ No newline at end of file