diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index 8bf6972..5cbf679 100644
--- a/components/Navbar/Navbar.tsx
+++ b/components/Navbar/Navbar.tsx
@@ -49,13 +49,13 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
         showBackground ? "backdrop-blur" : "bg-transparent"
       } fixed start-0 top-0 z-20 w-full bg-transparent dark:border-gray-600 dark:bg-gray-900`}
     >
-      <section className="MOBILE-MENU flex hidden" style={mobileNavStyle}>
+      <section className="MOBILE-MENU flex hidden backdrop-blur-lg" style={mobileNavStyle}>
         <div>
           {" "}
           <div className="CROSS-ICON absolute right-0 top-0 px-8 py-8">
             <button onClick={() => setIsNavOpen(!isNavOpen)}>
               <svg
-                className="h-8 w-8 text-gray-600"
+                className="h-8 w-8 text-white"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -68,24 +68,24 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
               </svg>
             </button>
           </div>
-          <ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white backdrop-blur">
+          <ul className="MENU-LINK-MOBILE-OPEN flex min-h-[300px] flex-col items-center justify-center text-white">
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="/about">Home</a>
+              <a href="#">Home</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="/portfolio">Services</a>
+              <a href="#">Services</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="/contact">Portfolio</a>
+              <a href="#">Portfolio</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="/contact">About</a>
+              <a href="#">About</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="/contact">Sign In</a>
+              <a href="#">Sign In</a>
             </li>
             <li className="my-2 border-b border-gray-400 uppercase">
-              <a href="/contact">Sign Up</a>
+              <a href="#">Sign Up</a>
             </li>
           </ul>
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index d392dd9..c0016ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,9 +2,7 @@
 const { pick, omit } = require("lodash")
 const colors = require("tailwindcss/colors")
 const defaultTheme = require("tailwindcss/defaultTheme")
-const {
-  default: flattenColorPalette,
-} = require("tailwindcss/lib/util/flattenColorPalette");
+const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette")
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
@@ -19,7 +17,7 @@ module.exports = {
   theme: {
     extend: {
       boxShadow: {
-        '3xl': '0 35px 60px -15px rgba(0, 0, 200, 0.3)',
+        "3xl": "0 35px 60px -15px rgba(0, 0, 200, 0.3)",
       },
       colors: {
         black: "#0f172a",
@@ -95,6 +93,8 @@ module.exports = {
       },
       animation: {
         ["infinite-slider"]: "infiniteSlider 20s linear infinite",
+        openmenu: "openmenu 1s ease-in",
+        closemenu: "closemenu 1s ease-in",
       },
       keyframes: {
         infiniteSlider: {
@@ -106,22 +106,17 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    require('@codaworks/react-glow/tailwind'),
-    addVariablesForColors
-  ],
+  plugins: [require("@codaworks/react-glow/tailwind"), addVariablesForColors],
   future: {
     hoverOnlyWhenSupported: true,
   },
 }
 
 function addVariablesForColors({ addBase, theme }) {
-  let allColors = flattenColorPalette(theme("colors"));
-  let newVars = Object.fromEntries(
-    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
-  );
+  let allColors = flattenColorPalette(theme("colors"))
+  let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [`--${key}`, val]))
 
   addBase({
     ":root": newVars,
-  });
+  })
 }