diff --git a/app/(root)/page.jsx b/app/(root)/page.jsx
index bb9cb4f..c2cadb6 100644
--- a/app/(root)/page.jsx
+++ b/app/(root)/page.jsx
@@ -45,7 +45,7 @@ const MyPage = () => {
 										type: "spring",
 									}}>
 									<div className="block md:hidden col-span-1 mx-auto my-10">
-										<div className="bg-slate-500 rounded-full h-60 w-60 grayscale hover:grayscale-0">
+										<div className="bg-slate-500 rounded-full h-60 w-60 grayscale hover:grayscale-0 transition-all ease duration-300">
 											<Image
 												src={Me}
 												width={500}
@@ -100,7 +100,9 @@ const MyPage = () => {
 											type: "spring",
 										}}>
 										<Button variation="primary">
-											<Link href={"/docs/cv.pdf"}>Download CV</Link>
+											<Link href={"/docs/cv.pdf"}>
+												Download CV
+											</Link>
 										</Button>
 										<Button variation="secondary">
 											<a href="#contact">Contact Me</a>
@@ -115,7 +117,7 @@ const MyPage = () => {
 										delay: 0.7,
 										type: "spring",
 									}}>
-									<div className="rounded-full h-auto w-auto  lg:px-12 grayscale hover:grayscale-0">
+									<div className="rounded-full h-auto w-auto  lg:px-12 grayscale hover:grayscale-0 transition-all ease duration-300">
 										<Image
 											src={Me}
 											width={400}
@@ -132,7 +134,7 @@ const MyPage = () => {
 							<div className="relative md:h-screen w-screen gap-4 flex justify-center items-center flex-col overflow-hidden">
 								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<motion.div
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
 										initial={{
 											x: 300,
 											opacity: 0,
@@ -201,7 +203,7 @@ const MyPage = () => {
 							<div className="relative md:h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
 								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<motion.div
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
 										initial={{
 											x: 300,
 											opacity: 0,
@@ -274,7 +276,7 @@ const MyPage = () => {
 							<div className="relative md:h-screen w-screen  gap-4 p-10 flex justify-center items-center flex-col overflow-hidden">
 								<div className="z-0 mb-48 md:mb-0  md:absolute top-1/4  md:right-[10%] md:-translate-y-16 ">
 									<motion.div
-										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0"
+										className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300"
 										initial={{
 											x: 300,
 											opacity: 0,
diff --git a/app/about/page.jsx b/app/about/page.jsx
index 7d8b095..eef8eff 100644
--- a/app/about/page.jsx
+++ b/app/about/page.jsx
@@ -38,7 +38,7 @@ export default function Page() {
 							initial={{ scale: 1 }}
 							animate={{ scale: 1.6 }}
 							transition={{ ease: "circOut", duration: 1 }}
-							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0">
+							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300">
 							<Image
 								src={Me2}
 								alt="Alvalens"
diff --git a/app/projects/page.jsx b/app/projects/page.jsx
index 635b66f..f238c48 100644
--- a/app/projects/page.jsx
+++ b/app/projects/page.jsx
@@ -114,7 +114,7 @@ export default function Page() {
 							initial={{ scale: 1 }}
 							animate={{ scale: 1.6 }}
 							transition={{ duration: 1, ease: "circOut" }}
-							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0">
+							className="bg-slate-300 rounded-sm h-[400px] md:h-[600px] w-[80vw] md:w-[30vw] grayscale hover:grayscale-0 transition-all ease duration-300">
 							<Image
 								src={ProjectAll}
 								alt="Alvalens"
diff --git a/components/FixedButton.jsx b/components/FixedButton.jsx
index e7d05bc..ab24aa0 100644
--- a/components/FixedButton.jsx
+++ b/components/FixedButton.jsx
@@ -1,9 +1,9 @@
 const FixedButton = ({ children, onClick }) => (
-  <button
-  onClick={onClick}
-    className="fixed top-2 -left-2 md:left-10 flex justify-center items-center  rounded-full p-4  transition duration-300 ease-in-out z-50 transparent">
-    {children}
-  </button>
+	<button
+		onClick={onClick}
+		className="fixed top-2 -left-2 md:left-10 flex justify-center items-center  rounded-full p-4  transition duration-300 ease-in-out z-50 transparent">
+		{children}
+	</button>
 );
 
-export default FixedButton;
\ No newline at end of file
+export default FixedButton;
diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index 667b179..6867e20 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -80,15 +80,26 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 			});
 	}
 	const itemVariants = {
-		open: {
+		open: (custom) => ({
 			opacity: 1,
-			y: 0,
+			x: 0,
 			rotate: 0,
-		},
+			transition: {
+				delay: custom,
+				type: "spring",
+				stiffness: 400,
+				damping: 40,
+			},
+		}),
 		closed: {
 			opacity: 0,
-			y: -40,
+			x: -80,
 			rotate: 0,
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 40,
+		},
 		},
 	};
 
@@ -103,23 +114,20 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 					<div className="flex flex-col items-center space-y-8 my-auto mx-0">
 						{/* title */}
 						<motion.h1
-							animate={{ opacity: 1 }}
-							initial={{ opacity: 0 }}
-							transition={{ delay: 0.5, duration: 1 }}
+							variants={itemVariants}
+							animate={isNavOpen ? "open" : "closed"}
 							className="text-6xl font-bold text-white ">
 							Menu
 						</motion.h1>
 						<a href="/#home">
 							<div
-								onClick={handleItemClick}
 								className="text-2xl font-bold text-white"
-								variants={itemVariants}
-								animate={isNavOpen ? "open" : "closed"}
-								delay={1}>
+								onClick={handleItemClick}>
 								<motion.h2
 									className="text-white"
 									variants={itemVariants}
-									animate={isNavOpen ? "open" : "closed"}>
+									animate={isNavOpen ? "open" : "closed"}
+									custom={0.1}>
 									Home
 								</motion.h2>
 							</div>
@@ -127,14 +135,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 						<Link href="/about">
 							<div
 								onClick={handleItemClick}
-								className="text-2xl font-bold text-white"
-								variants={itemVariants}
-								animate={isNavOpen ? "open" : "closed"}
-								delay={1.2}>
+								className="text-2xl font-bold text-white">
 								<motion.h2
 									className="text-white"
 									variants={itemVariants}
-									animate={isNavOpen ? "open" : "closed"}>
+									animate={isNavOpen ? "open" : "closed"}
+									custom={0.2}>
 									About
 								</motion.h2>
 							</div>
@@ -142,14 +148,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 						<Link href="/projects">
 							<div
 								onClick={handleItemClick}
-								className="text-2xl font-bold text-white"
-								variants={itemVariants}
-								animate={isNavOpen ? "open" : "closed"}
-								delay={1.3}>
+								className="text-2xl font-bold text-white">
 								<motion.h2
 									className="text-white"
 									variants={itemVariants}
-									animate={isNavOpen ? "open" : "closed"}>
+									animate={isNavOpen ? "open" : "closed"}
+									custom={0.3}>
 									Projects
 								</motion.h2>
 							</div>
@@ -157,14 +161,12 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
 						<a href="/#contact">
 							<div
 								onClick={handleItemClick}
-								className="text-2xl font-bold text-white"
-								variants={itemVariants}
-								animate={isNavOpen ? "open" : "closed"}
-								delay={1.4}>
+								className="text-2xl font-bold text-white">
 								<motion.h2
 									className="text-white"
 									variants={itemVariants}
-									animate={isNavOpen ? "open" : "closed"}>
+									animate={isNavOpen ? "open" : "closed"}
+									custom={0.4}>
 									Contact
 								</motion.h2>
 							</div>
@@ -190,12 +192,12 @@ const Navbar = () => {
 				ref={navRef}
 				className={`navbar px-5 md:px-24 w-screen fixed transition-colors ease duration-500 ${
 					isNavOpen
-						? "bg-transparent"
+						? "backdrop-filter backdrop-blur-md bg-gray-700 bg-opacity-50"
 						: "backdrop-filter backdrop-blur-md"
 				} inset-0  bg-opacity-50 flex flex-row justify-between items-center h-16 z-50 `}>
 				<div>
 					<h1
-						className={`text-2xl ml-2 md:ml-0  ${
+						className={`text-2xl ml-2 md:ml-0 transition-colors ease duration-500 ${
 							isNavOpen ? "text-white" : ""
 						}`}>
 						Alvalens