diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
index ef9eaadd..6ad73c61 100644
--- a/src/components/Appbar.tsx
+++ b/src/components/Appbar.tsx
@@ -18,23 +18,31 @@ export const menuOptions = [
   { id: 5, name: 'Watch History', Component: History, href: '/watch-history' },
 ];
 
-// Custom hook for media query
-const useMediaQuery = (query: string) => {
-  const [matches, setMatches] = useState(false);
+//Added Eventlistener 
+const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState<boolean>(false);
 
   useEffect(() => {
     const media = window.matchMedia(query);
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
-    const listener = () => setMatches(media.matches);
-    media.addListener(listener);
-    return () => media.removeListener(listener);
-  }, [matches, query]);
+    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+
+    // Use addEventListener instead of addListener
+    media.addEventListener("change", listener);
+    
+    // Set the initial match state
+    setMatches(media.matches);
+
+    // Cleanup function to remove the event listener
+    return () => {
+      media.removeEventListener("change", listener);
+    };
+  }, [query]);
 
   return matches;
 };
 
+export default useMediaQuery;
+
 export const Appbar = () => {
   const [isCollapsed, setIsCollapsed] = useState(true);
   const [isMounted, setIsMounted] = useState(false);