diff --git a/apps/frontend/src/components/notifications/notification.component.tsx b/apps/frontend/src/components/notifications/notification.component.tsx
index ecab2113..c679bb6a 100644
--- a/apps/frontend/src/components/notifications/notification.component.tsx
+++ b/apps/frontend/src/components/notifications/notification.component.tsx
@@ -42,7 +42,7 @@ export const NotificationOpenComponent = () => {
   const { data, isLoading } = useSWR('notifications', loadNotifications);
 
   return (
-    <div id="notification-popup" className="opacity-0 animate-normalFadeDown mt-[10px] absolute w-[420px] min-h-[200px] top-[100%] right-0 bg-third text-textColor rounded-[16px] flex flex-col border border-tableBorder z-[2]">
+    <div id="notification-popup" className="opacity-0 animate-normalFadeDown mt-[10px] absolute w-[420px] min-h-[200px] top-[100%] right-0 bg-third text-textColor rounded-[16px] flex flex-col border border-tableBorder z-[20]">
       <div className={`p-[16px] border-b border-tableBorder ${interClass} font-bold`}>
         Notifications
       </div>