diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
index 59ec489c..b490c498 100644
--- a/components/Navbar/navbar.js
+++ b/components/Navbar/navbar.js
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import links from '../../config/links.json';
 import NavDrop from './navDrop';
 import Hamburger from '../illustration/hamburger';
@@ -12,6 +12,19 @@ function Navbar() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
 	const [drop, setDrop] = useState(false);
 	const [show, setShow] = useState(null);
+	useEffect(() => {
+		function handleOutsideClick(event) {
+			console.log(event.target.closest('.subMenu'))
+		  if (show && !event.target.closest('.subMenu')) {
+			setShow(false);
+		  }
+		}
+	  
+		document.addEventListener('mousedown', handleOutsideClick);
+		return () => {
+		  document.removeEventListener('mousedown', handleOutsideClick);
+		};
+	  }, [show]);
 	return (
 		<div className='container flex justify-center items-center sticky top-0 backdrop-blur z-[99]'>
 			<div className='w-[1131px]'>
@@ -43,11 +56,11 @@ function Navbar() {
 										onClick={() =>
 											show === link.title ? setShow(null) : setShow(link.title)
 										}
-										className='text-[#F0F4F5] ml-16 text-[15px] cursor-pointer relative flex flex-col'
+										className='text-[#F0F4F5] ml-16 text-[15px] group cursor-pointer relative flex flex-col'
 									>
 										<div>
 											{link.subMenu ? (
-												<div className='flex items-center'>
+												<div className='flex items-center '>
 													{link.title}{' '}
 													{link.subMenu && (
 														<Dropdown
@@ -61,7 +74,7 @@ function Navbar() {
 											)}
 										</div>
 										{show && show === link.title && link.subMenu && (
-											<div className='absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
+											<div className='subMenu absolute group-hover:bg-red-300 z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
 												{link.subMenu.map((subL) => (
 													<Link href={subL.ref} key={subL.title}>
 														<div className='h-[32px] text-[16px]'>