diff --git a/base/filters.py b/base/filters.py
index 92c6599b7..df0ac788d 100644
--- a/base/filters.py
+++ b/base/filters.py
@@ -43,6 +43,7 @@ class ShiftRequestFilter(FilterSet):
         fields = "__all__"
         model = ShiftRequest
         fields = [
+            "id",
             "employee_id",
             "requested_date",
             "previous_shift_id",
diff --git a/base/urls.py b/base/urls.py
index fac4d5589..dd9f6c32d 100644
--- a/base/urls.py
+++ b/base/urls.py
@@ -29,6 +29,7 @@ urlpatterns = [
         "settings/user-group-create/", views.user_group_table, name="user-group-create"
     ),
     path("settings/user-group-view/", views.user_group, name="user-group-view"),
+    path("settings/user-group-search/", views.user_group_search, name="user-group-search"),
     path(
         "settings/user-group-update/<int:id>/",
         views.user_group_update,
@@ -516,7 +517,9 @@ urlpatterns = [
     ),
     path("notifications", views.notifications, name="notifications"),
     path("clear-notifications", views.clear_notification, name="clear-notifications"),
+    path("delete-all-notifications", views.delete_all_notifications, name="delete-all-notifications"),
     path("read-notifications", views.read_notifications, name="read-notifications"),
+    path('mark-as-read-notification/', views.mark_as_read_notification, name='mark-as-read-notification'),
     path("all-notifications", views.all_notifications, name="all-notifications"),
     path(
         "delete-notifications/<id>/",
diff --git a/templates/index.html b/templates/index.html
index 68de02165..8e4a7899d 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -282,20 +282,44 @@
       overflow: hidden;
       
     }
-    .perm-accordion{
-      border: 1px solid #6c757d1c !important;
-      margin: 0 0 2px 0 !important;
-      width: -100%;
-    }
-    .app-permissions{
-      background-color: rgba(242, 249, 255, 0.586);
-    }
-    .perm-accordion-active{
-      background-color: rgba(215, 233, 251, 0.621) !important;
-    }
-    .perm-accordion-active:hover{
-      background-color: rgba(215, 233, 251, 0.408) !important;
-    }
+.perm-accordion{
+  border: 1px solid #6c757d1c !important;
+  margin: 0 0 2px 0 !important;
+  width: -100%;
+}
+.app-permissions{
+  background-color: rgba(242, 249, 255, 0.586);
+}
+.perm-accordion-active{
+  background-color: rgba(215, 233, 251, 0.621) !important;
+}
+.perm-accordion-active:hover{
+  background-color: rgba(215, 233, 251, 0.408) !important;
+}    
+.arrow-up::before {
+  content: '\25B2';
+  font-size:12px;
+  display: inline-block;
+  margin-right: 5px; 
+}
+.arrow-down::before {
+  content: '\25BC';
+  font-size:12px;
+  display: inline-block;
+  margin-right: 5px; 
+}
+.oh-activity-sidebar__header {
+    position: relative; 
+}
+
+.delete-all-link {
+    position: absolute;
+    color: rgb(63 124 242);
+    top: -5px; 
+    right: 10px; 
+    margin: 10px; 
+    cursor: pointer;
+}
   </style>
 </head>
 
@@ -363,16 +387,17 @@
     <!-- End of Confirm Modal -->
     <div class="oh-activity-sidebar " id="allNotifications">
       <div class="oh-activity-sidebar__header">
-        {% comment %} <ion-icon name="chevron-back-outline" id="notificationClose" class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close md hydrated"  role="img" aria-label="chevron back outline"></ion-icon> {% endcomment %}
         <span id="notificationClose" style="cursor: pointer;" title="{% trans 'Close' %}">
-          <ion-icon
-            name="chevron-back-outline"
-            class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
-            id="close"
-            data-target="#activitySidebar"
-            style="font-size: 24px;"
-          ></ion-icon>
+            <ion-icon
+                name="chevron-back-outline"
+                class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
+                id="close"
+                data-target="#activitySidebar"
+                style="font-size: 24px;"
+            ></ion-icon>
+        </span>
         <span class="oh-activity-sidebar__title"> {% trans "All Notifications" %}</span>
+        <a class="delete-all-link" hx-target="#allNotificationBody" hx-post="{% url 'delete-all-notifications'%}">{% trans "Delete all" %}</a>    
       </div>
       <div class="oh-activity-sidebar__body" id="allNotificationBody">
         {% include "notification/all_notifications.html" %}
diff --git a/templates/notification/all_notifications.html b/templates/notification/all_notifications.html
index 499bac3e1..914cfb85b 100644
--- a/templates/notification/all_notifications.html
+++ b/templates/notification/all_notifications.html
@@ -20,18 +20,21 @@
                 <span style="width: 10px;height: 10px;border-radius: 100%; background-color: hsl(8deg,77%,56%);display: inline-block;right: 5px;"></span>
                 {% endif %}
                 {% if LANGUAGE_CODE == 'ar' %}
-                    <p class="oh-navbar__notification-text" :class="markRead ? '' : 'oh-navbar__notification-text--unread' ">{{ notification.data.verb_ar }}</p>
+                    <p class="oh-navbar__notification-text" class="oh-navbar__notification-text--unread">{{ notification.data.verb_ar }}</p>
                 {% elif LANGUAGE_CODE == 'de' %}
-                    <p class="oh-navbar__notification-text" :class="markRead ? '' : 'oh-navbar__notification-text--unread' ">{{ notification.data.verb_de }}</p>
+                    <p class="oh-navbar__notification-text" class="oh-navbar__notification-text--unread">{{ notification.data.verb_de }}</p>
                 {% elif LANGUAGE_CODE == 'fr' %}
-                    <p class="oh-navbar__notification-text" :class="markRead ? '' : 'oh-navbar__notification-text--unread' ">{{ notification.data.verb_fr }}</p>
+                    <p class="oh-navbar__notification-text" class="oh-navbar__notification-text--unread">{{ notification.data.verb_fr }}</p>
                 {% elif LANGUAGE_CODE == 'es' %}
-                    <p class="oh-navbar__notification-text" :class="markRead ? '' : 'oh-navbar__notification-text--unread' ">{{ notification.data.verb_es }}</p>
+                    <p class="oh-navbar__notification-text" class="oh-navbar__notification-text--unread">{{ notification.data.verb_es }}</p>
                 {% else %}
-                    <p class="oh-navbar__notification-text" :class="markRead ? '' : 'oh-navbar__notification-text--unread' ">{{ notification.verb }}</p>
+                    <p class="oh-navbar__notification-text" class="oh-navbar__notification-text--unread">{{ notification.verb }}</p>
                 {% endif %}
             </span>
-        <ion-icon name="close-outline" hx-target="#allNotificationBody" hx-post="{% url 'delete-notifications' notification.id %}" role="img" aria-label="close outline"></ion-icon>
+        <div hx-target="#allNotificationBody" hx-post="{% url 'delete-notifications' notification.id %}">
+            <ion-icon name="close-outline"role="img" aria-label="close outline"></ion-icon>
+        </div>
+        
     </div>
         <span class="oh-activity-sidebar__a">
         {{ notification.timesince }} {% trans "ago by" %}<img src="https://ui-avatars.com/api/?name={{notification.actor}}&amp;background=random" style="width: 1.5em; border-radius: 100%;" alt="User"> {{notification.actor}} 
diff --git a/templates/notification/notification_items.html b/templates/notification/notification_items.html
index 6052947a2..cb9b1f0a4 100644
--- a/templates/notification/notification_items.html
+++ b/templates/notification/notification_items.html
@@ -10,8 +10,8 @@
     </div>
     {% endif %}
 <ul class="oh-navbar__nofication-list"> 
-    {% for notification in notifications %}
-    <a class="oh-navbar__notification-item" href="{{notification.data.redirect}}#">
+  {% for notification in notifications %}
+    <a class="oh-navbar__notification-item" href="{{notification.data.redirect}}#" id="notification" data-id={{notification.id}}> 
       <div>
         {% if notification.unread %}
         <span class="oh-navbar__notification-dot oh-navbar__notification-dot--green"
@@ -40,5 +40,38 @@
         </div>
       </div>
     </a>
-    {% endfor %}
-  </ul>
\ No newline at end of file
+  {% endfor %}
+</ul>
+<script>
+  $(document).ready(function() {
+      $('.oh-navbar__notification-item').on('click', function(event) {
+          event.preventDefault();
+          var notificationLink = $(this);
+          var notificationId = notificationLink.data('id');
+          $.ajax({
+              type: "post",
+              url: '/mark-as-read-notification/',
+              data: {
+                  csrfmiddlewaretoken: getCookie("csrftoken"),
+                  'notification_id': notificationId
+              },
+              success: function(response) {
+                  if (response.success) {
+                      window.location.href = notificationLink.attr('href');
+                  } else {
+                      window.location.href = notificationLink.attr('href');
+                      console.error('Failed to mark notification as read');
+                      if (response.error) {
+                          console.error('Error:', response.error);
+                      }
+                  }
+              },
+              error: function(xhr, status, error) {
+                  window.location.href = notificationLink.attr('href');
+                  console.error('Error:', status, error);
+              }
+          });
+      });
+  });
+</script>
+