diff --git a/client/src/pages/Alerts.jsx b/client/src/pages/Alerts.jsx
index 197b4ea..24fa682 100644
--- a/client/src/pages/Alerts.jsx
+++ b/client/src/pages/Alerts.jsx
@@ -49,6 +49,33 @@ const Alerts = () => {
     }
   };
 
+  // Group alerts by alert_event_id to show related alerts together
+  const groupAlertsByEvent = (logs) => {
+    const grouped = {};
+    const ungrouped = [];
+
+    logs.forEach(log => {
+      if (log.alert_event_id) {
+        if (!grouped[log.alert_event_id]) {
+          grouped[log.alert_event_id] = [];
+        }
+        grouped[log.alert_event_id].push(log);
+      } else {
+        ungrouped.push(log);
+      }
+    });
+
+    // Convert grouped object to array of arrays, sorted by most recent alert in each group
+    const groupedArrays = Object.values(grouped).map(group => 
+      group.sort((a, b) => new Date(b.sent_at) - new Date(a.sent_at))
+    ).sort((a, b) => new Date(b[0].sent_at) - new Date(a[0].sent_at));
+
+    // Add ungrouped alerts as individual groups
+    ungrouped.forEach(log => groupedArrays.push([log]));
+
+    return groupedArrays;
+  };
+
   const handleDeleteRule = async (ruleId) => {
     if (window.confirm('Are you sure you want to delete this alert rule?')) {
       try {
@@ -356,72 +383,183 @@ const Alerts = () => {
                     <th>{t('alerts.detection')}</th>
                     <th>{t('alerts.message')}</th>
                     <th>{t('alerts.sentAt')}</th>
+                    <th>Event ID</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {(alertLogs || []).map((log) => (
-                    <tr key={log.id} className="hover:bg-gray-50">
-                      <td>
-                        <div className="flex items-center space-x-2">
-                          {getStatusIcon(log.status)}
-                          <span className="text-sm text-gray-900 capitalize">
-                            {log.status}
-                          </span>
-                        </div>
-                      </td>
-                      <td>
-                        <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
-                          {log.alert_type}
-                        </span>
-                      </td>
-                      <td>
-                        <div className="text-sm text-gray-900">
-                          {log.recipient}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="text-sm text-gray-900">
-                          {log.rule?.name || t('alerts.unknownRule')}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="text-sm text-gray-900">
-                          {log.detection?.drone_id ? (
-                            <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs font-mono">
-                              {log.detection.drone_id}
-                            </span>
-                          ) : (
-                            <span className="text-gray-400 text-sm">{t('alerts.na')}</span>
-                          )}
-                        </div>
-                      </td>
-                      <td>
-                        {log.detection_id ? (
-                          <button
-                            onClick={() => handleViewDetection(log.detection_id)}
-                            className="text-primary-600 hover:text-primary-900 text-sm font-medium"
-                          >
-                            {t('alerts.viewDetails')}
-                          </button>
-                        ) : (
-                          <span className="text-gray-400 text-sm">{t('alerts.na')}</span>
-                        )}
-                      </td>
-                      <td>
-                        <div className="text-sm text-gray-900 max-w-xs truncate">
-                          {log.message}
-                        </div>
-                      </td>
-                      <td>
-                        <div className="text-sm text-gray-900">
-                          {log.sent_at 
-                            ? format(new Date(log.sent_at), 'MMM dd, HH:mm')
-                            : 'Not sent'
-                          }
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
+                  {groupAlertsByEvent(alertLogs || []).map((alertGroup, groupIndex) => {
+                    // Display the primary alert (first in group)
+                    const primaryAlert = alertGroup[0];
+                    const relatedAlerts = alertGroup.slice(1);
+                    
+                    return (
+                      <React.Fragment key={`group-${groupIndex}`}>
+                        <tr className="hover:bg-gray-50 border-b-2 border-gray-200">
+                          <td>
+                            <div className="flex items-center space-x-2">
+                              {getStatusIcon(primaryAlert.status)}
+                              <span className="text-sm text-gray-900 capitalize">
+                                {primaryAlert.status}
+                              </span>
+                              {relatedAlerts.length > 0 && (
+                                <span className="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
+                                  +{relatedAlerts.length} more
+                                </span>
+                              )}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="flex flex-wrap gap-1">
+                              <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">
+                                {primaryAlert.alert_type}
+                              </span>
+                              {relatedAlerts.map((alert, idx) => (
+                                <span key={idx} className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">
+                                  {alert.alert_type}
+                                </span>
+                              ))}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="text-sm text-gray-900">
+                              {primaryAlert.recipient}
+                              {relatedAlerts.length > 0 && relatedAlerts.some(a => a.recipient !== primaryAlert.recipient) && (
+                                <div className="text-xs text-gray-500 mt-1">
+                                  +{relatedAlerts.filter(a => a.recipient !== primaryAlert.recipient).length} others
+                                </div>
+                              )}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="text-sm text-gray-900">
+                              {primaryAlert.rule?.name || t('alerts.unknownRule')}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="text-sm text-gray-900">
+                              {primaryAlert.detection?.drone_id ? (
+                                <span className="px-2 py-1 bg-purple-100 text-purple-800 rounded text-xs font-mono">
+                                  {primaryAlert.detection.drone_id}
+                                </span>
+                              ) : (
+                                <span className="text-gray-400 text-sm">{t('alerts.na')}</span>
+                              )}
+                            </div>
+                          </td>
+                          <td>
+                            {primaryAlert.detection_id ? (
+                              <button
+                                onClick={() => handleViewDetection(primaryAlert.detection_id)}
+                                className="text-blue-600 hover:text-blue-800 text-sm underline"
+                              >
+                                {t('alerts.viewDetails')}
+                              </button>
+                            ) : (
+                              <span className="text-gray-400 text-sm">{t('alerts.na')}</span>
+                            )}
+                          </td>
+                          <td>
+                            <div className="text-sm text-gray-900 max-w-xs overflow-hidden">
+                              <div className="truncate" title={primaryAlert.message}>
+                                {primaryAlert.message}
+                              </div>
+                            </div>
+                          </td>
+                          <td>
+                            <div className="text-sm text-gray-900">
+                              {format(new Date(primaryAlert.sent_at), 'MMM dd, HH:mm')}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="text-xs text-gray-500 font-mono">
+                              {primaryAlert.alert_event_id ? (
+                                <span title={primaryAlert.alert_event_id}>
+                                  {primaryAlert.alert_event_id.substring(0, 8)}...
+                                </span>
+                              ) : (
+                                <span className="text-gray-400">-</span>
+                              )}
+                            </div>
+                          </td>
+                        </tr>
+                        
+                        {/* Show related alerts as sub-rows if any */}
+                        {relatedAlerts.map((alert, alertIndex) => (
+                          <tr key={`related-${groupIndex}-${alertIndex}`} className="bg-gray-50 border-l-4 border-blue-200">
+                            <td className="pl-8">
+                              <div className="flex items-center space-x-2">
+                                {getStatusIcon(alert.status)}
+                                <span className="text-sm text-gray-700 capitalize">
+                                  {alert.status}
+                                </span>
+                              </div>
+                            </td>
+                            <td>
+                              <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">
+                                {alert.alert_type}
+                              </span>
+                            </td>
+                            <td>
+                              <div className="text-sm text-gray-700">
+                                {alert.recipient}
+                              </div>
+                            </td>
+                            <td>
+                              <div className="text-sm text-gray-700">
+                                {alert.rule?.name || t('alerts.unknownRule')}
+                              </div>
+                            </td>
+                            <td>
+                              <div className="text-sm text-gray-700">
+                                {alert.detection?.drone_id ? (
+                                  <span className="px-2 py-1 bg-purple-50 text-purple-600 rounded text-xs font-mono">
+                                    {alert.detection.drone_id}
+                                  </span>
+                                ) : (
+                                  <span className="text-gray-400 text-sm">{t('alerts.na')}</span>
+                                )}
+                              </div>
+                            </td>
+                            <td>
+                              {alert.detection_id ? (
+                                <button
+                                  onClick={() => handleViewDetection(alert.detection_id)}
+                                  className="text-blue-500 hover:text-blue-700 text-sm underline"
+                                >
+                                  {t('alerts.viewDetails')}
+                                </button>
+                              ) : (
+                                <span className="text-gray-400 text-sm">{t('alerts.na')}</span>
+                              )}
+                            </td>
+                            <td>
+                              <div className="text-sm text-gray-700 max-w-xs overflow-hidden">
+                                <div className="truncate" title={alert.message}>
+                                  {alert.message}
+                                </div>
+                              </div>
+                            </td>
+                            <td>
+                              <div className="text-sm text-gray-700">
+                                {format(new Date(alert.sent_at), 'MMM dd, HH:mm')}
+                              </div>
+                            </td>
+                            <td>
+                              <div className="text-xs text-gray-400 font-mono">
+                                {alert.alert_event_id ? (
+                                  <span title={alert.alert_event_id}>
+                                    {alert.alert_event_id.substring(0, 8)}...
+                                  </span>
+                                ) : (
+                                  <span>-</span>
+                                )}
+                              </div>
+                            </td>
+                          </tr>
+                        ))}
+                      </React.Fragment>
+                    );
+                  })}
                 </tbody>
               </table>
             </div>