diff --git a/Modules/HospitalPortal/Http/Controllers/Api/NotificationController.php b/Modules/HospitalPortal/Http/Controllers/Api/NotificationController.php
index 54d82e5a..7a5096d5 100644
--- a/Modules/HospitalPortal/Http/Controllers/Api/NotificationController.php
+++ b/Modules/HospitalPortal/Http/Controllers/Api/NotificationController.php
@@ -33,7 +33,7 @@ class NotificationController extends Controller
                     'notifications.description',
                     'notifications.avatar',
                     'notification_types.type',
-                    DB::raw('DATE_FORMAT(notifications.created_at, "%Y-%m-%dT%H:%i:%s.000Z") as createdAt'),
+                    DB::raw('DATE_FORMAT(notifications.created_at, "%Y-%m-%dT%H:%i:%s.000+07:00") as createdAt'),
                     'notifications.isUnRead',
                 )
                 ->where('hospital_id', '=', $hospital_id)
diff --git a/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx b/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx
index e0d2ad19..f0d92aae 100644
--- a/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx
+++ b/frontend/hospital-portal/src/layouts/dashboard/header/NotificationsPopover.tsx
@@ -32,15 +32,18 @@ import { useSnackbar } from 'notistack';
 export default function NotificationsPopover() {
   const [notifications, setNotifications] = useState([]);
   const {enqueueSnackbar} = useSnackbar();
-  useEffect(() => {
+  const getDataNotifications = async () => {
     axios
-      .get('notifications/1')
-      .then((response) => {
-        setNotifications(response.data.data.notifications);
-      })
-      .catch((error) => {
-        enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
-      });
+    .get('notifications/1')
+    .then((response) => {
+      setNotifications(response.data.data.notifications);
+    })
+    .catch((error) => {
+      enqueueSnackbar(error.response.data.meta.message, {variant : "error"});
+    });
+  };
+  useEffect(() => {
+    getDataNotifications();
   }, []); 
 
   const totalUnRead = notifications.filter((item) => item.isUnRead === 1).length;
@@ -102,31 +105,36 @@ export default function NotificationsPopover() {
         <Divider sx={{ borderStyle: 'dashed' }} />
 
         <Scrollbar sx={{ height: { xs: 340, sm: 'auto' } }}>
-          <List
-            disablePadding
-            subheader={
-              <ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
-                New
-              </ListSubheader>
-            }
-          >
-            {notifications.slice(0, 2).map((notification) => (
-              <NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
-            ))}
-          </List>
+          {notifications && notifications.length > 0 ? (
+            <>
+              <List
+                disablePadding
+                subheader={
+                  <ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
+                    New
+                  </ListSubheader>
+                }
+              >
+                {notifications.slice(0, 2).map((notification) => (
+                  <NotificationItem key={notification.id} notification={notification} onClick={notification.id} getDataNotifications={getDataNotifications}/>
+                ))}
+              </List>
 
-          <List
-            disablePadding
-            subheader={
-              <ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
-                Before that
-              </ListSubheader>
-            }
-          >
-            {notifications.slice(2, 5).map((notification) => (
-              <NotificationItem key={notification.id} notification={notification} onClick={notification.id}/>
-            ))}
-          </List>
+              <List
+                disablePadding
+                subheader={
+                  <ListSubheader disableSticky sx={{ py: 1, px: 2.5, typography: 'overline' }}>
+                    Before that
+                  </ListSubheader>
+                }
+              >
+                {notifications.slice(2, 5).map((notification) => (
+                  <NotificationItem key={notification.id} notification={notification} onClick={notification.id} getDataNotifications={getDataNotifications}/>
+                ))}
+              </List>
+            </>
+          ): ''}
+          
         </Scrollbar>
 
         <Divider sx={{ borderStyle: 'dashed' }} />
@@ -153,7 +161,7 @@ type NotificationItemProps = {
   isUnRead: boolean;
 };
 
-function NotificationItem({ notification, onClick }: { notification: NotificationItemProps, onClick: (id: string) => void}) {
+function NotificationItem({ notification, onClick, getDataNotifications }: { notification: NotificationItemProps, onClick: (id: string) => void, getDataNotifications: () => void}) {
   const { avatar, title } = renderContent(notification);
   const {enqueueSnackbar} = useSnackbar();
   const handleClick = () => {
@@ -167,6 +175,7 @@ function NotificationItem({ notification, onClick }: { notification: Notificatio
       .post('set-read-notification', data)
       .then((response) => {
         enqueueSnackbar(response.data.meta.message, {variant : "success"});
+        getDataNotifications();
       })
       .catch((error) => {
         enqueueSnackbar(error.response.data.meta.message, {variant : "error"});