diff --git a/frontend/src/components/Layouts/AppSidebar.vue b/frontend/src/components/Layouts/AppSidebar.vue
index 10f9c859..86e12133 100644
--- a/frontend/src/components/Layouts/AppSidebar.vue
+++ b/frontend/src/components/Layouts/AppSidebar.vue
@@ -9,6 +9,7 @@
     <div class="flex-1 overflow-y-auto">
       <div class="mb-3 flex flex-col">
         <SidebarLink
+          id="notifications-btn"
           label="Notifications"
           :icon="NotificationsIcon"
           :isCollapsed="isSidebarCollapsed"
diff --git a/frontend/src/components/Notifications.vue b/frontend/src/components/Notifications.vue
index 762028ed..ccb4bc7a 100644
--- a/frontend/src/components/Notifications.vue
+++ b/frontend/src/components/Notifications.vue
@@ -72,11 +72,24 @@ import UserAvatar from '@/components/UserAvatar.vue'
 import { notificationsStore } from '@/stores/notifications'
 import { globalStore } from '@/stores/global'
 import { timeAgo } from '@/utils'
-import { computed } from 'vue'
-import { FeatherIcon } from 'frappe-ui'
+import { onClickOutside } from '@vueuse/core'
+import { ref, computed } from 'vue'
 
 const isSidebarCollapsed = computed(() => globalStore().isSidebarCollapsed)
 
+const target = ref(null)
+onClickOutside(
+  target,
+  () => {
+    if (notificationsStore().visible) {
+      toggleNotificationPanel()
+    }
+  },
+  {
+    ignore: ['#notifications-btn'],
+  }
+)
+
 function toggleNotificationPanel() {
   notificationsStore().toggle()
 }
@@ -97,7 +110,7 @@ function getRoute(notification) {
   return {
     name: notification.route_name,
     params: params,
-    hash: "#" + notification.comment,
+    hash: '#' + notification.comment,
   }
 }
 </script>