diff --git a/resources/js/components/notification.tsx b/resources/js/components/notification.tsx
index ee8d3b50..4aa14686 100644
--- a/resources/js/components/notification.tsx
+++ b/resources/js/components/notification.tsx
@@ -24,9 +24,14 @@ const Notification = () => {
             </Button>
          </PopoverTrigger>
          <PopoverContent align="end" className="w-80 p-0">
-            <div className="flex items-center justify-between border-b px-4 py-2">
+            <div className="flex flex-wrap items-center justify-between gap-2 border-b px-4 py-2">
                <h4 className="font-semibold">{dashboard.notifications}</h4>
-               <Button variant="ghost" size="sm" className="px-2 text-xs" onClick={() => router.put(route('notifications.mark-all-as-read'))}>
+               <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-auto px-2 text-xs leading-snug whitespace-normal"
+                  onClick={() => router.put(route('notifications.mark-all-as-read'))}
+               >
                   {button.mark_all_as_read}
                </Button>
             </div>