diff --git a/src/components/Header/MenuOverlay.jsx b/src/components/Header/MenuOverlay.jsx
index 2d1ff75..6a9eb80 100644
--- a/src/components/Header/MenuOverlay.jsx
+++ b/src/components/Header/MenuOverlay.jsx
@@ -1,4 +1,4 @@
-import React from "react"; // Importing React to use JSX syntax
+import React, { useState } from "react"; // Importing React to use JSX syntax
 import PropTypes from "prop-types"; // Importing PropTypes for type-checking
 import { Link, NavLink } from "react-router-dom"; // Importing Link and NavLink for navigation
 
@@ -7,11 +7,12 @@ const MenuOverlay = ({ links, setIsNavBarOpen, theme:[theme, handleThemeChange],
   const handleClick = () => {
     toggleBodyScroll();
     setIsNavBarOpen(false);
+    setClosingAnimation(true)
   };
 
   return (
     // ul element to contain the menu links
-    <ul className="absolute md:hidden w-screen items-center text-center z-20 app-header h-[calc(100vh-7.375rem)] flex flex-col justify-evenly">
+    <ul className="absolute md:hidden w-screen items-center text-center z-20 app-header open-animation flex flex-col justify-evenly">
       {/* Mapping over the links array to create each link item */}
       {links.map((link, index) => (
         <li key={index}>
diff --git a/src/index.css b/src/index.css
index 152efc1..3e4787b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -53,6 +53,35 @@ body.dark .blog {
   color: white;
 }
 
+.close-animation{
+  overflow: hidden;
+  animation: close both 0.8s ;
+  }
+  
+  @keyframes close {
+    from{
+      height:calc(100vh - 7.375rem)
+      
+    }to{
+      height: 0px;
+    }
+    
+  }
+
+.open-animation{
+overflow: hidden;
+animation: open both 0.8s ;
+}
+
+@keyframes open {
+  from{
+    height: 0px;
+    
+  }to{
+    height:calc(100vh - 7.375rem)
+  }
+  
+}
 body.dark .contact {
   background-color: black;
   color: white;