diff --git a/app/(dashboard)/waf-events/WafEventsClient.tsx b/app/(dashboard)/waf-events/WafEventsClient.tsx
index 5348a3df..93e04086 100644
--- a/app/(dashboard)/waf-events/WafEventsClient.tsx
+++ b/app/(dashboard)/waf-events/WafEventsClient.tsx
@@ -2,8 +2,19 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { Chip, Stack, TextField, Tooltip, Typography } from "@mui/material";
+import {
+  Box,
+  Chip,
+  Divider,
+  Drawer,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import CloseIcon from "@mui/icons-material/Close";
 import { DataTable } from "@/src/components/ui/DataTable";
 import type { WafEvent } from "@/src/lib/models/waf-events";
 
@@ -29,11 +40,107 @@ function SeverityChip({ severity }: { severity: string | null }) {
   return <Chip label={upper} size="small" color={color} variant="outlined" sx={{ fontWeight: 600, fontSize: "0.7rem" }} />;
 }
 
+function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <Box>
+      <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}>
+        {label}
+      </Typography>
+      <Box mt={0.25}>{children}</Box>
+    </Box>
+  );
+}
+
+function WafEventDrawer({ event, onClose }: { event: WafEvent | null; onClose: () => void }) {
+  // Parse rawData safely — render as text only, never as HTML
+  let parsedRaw: unknown = null;
+  if (event?.rawData) {
+    try { parsedRaw = JSON.parse(event.rawData); } catch { parsedRaw = event.rawData; }
+  }
+
+  return (
+    <Drawer anchor="right" open={!!event} onClose={onClose} PaperProps={{ sx: { width: { xs: "100%", sm: 520 }, p: 3 } }}>
+      {event && (
+        <Stack spacing={2.5} sx={{ height: "100%", overflow: "auto" }}>
+          {/* Header */}
+          <Stack direction="row" alignItems="center" justifyContent="space-between">
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <SeverityChip severity={event.severity} />
+              <Typography variant="h6" fontWeight={600}>WAF Event</Typography>
+            </Stack>
+            <IconButton onClick={onClose} size="small"><CloseIcon /></IconButton>
+          </Stack>
+
+          <Divider />
+
+          {/* Fields */}
+          <DetailRow label="Time">
+            <Typography variant="body2">{new Date(event.ts * 1000).toLocaleString()}</Typography>
+          </DetailRow>
+
+          <DetailRow label="Host">
+            <Typography variant="body2" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>{event.host || "—"}</Typography>
+          </DetailRow>
+
+          <DetailRow label="Client IP">
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Typography variant="body2" sx={{ fontFamily: "monospace" }}>{event.clientIp}</Typography>
+              {event.countryCode && <Chip label={event.countryCode} size="small" variant="outlined" sx={{ height: 18, fontSize: "0.65rem" }} />}
+            </Stack>
+          </DetailRow>
+
+          <DetailRow label="Request">
+            <Typography variant="body2" sx={{ fontFamily: "monospace", wordBreak: "break-all" }}>
+              {event.method} {event.uri}
+            </Typography>
+          </DetailRow>
+
+          <DetailRow label="Rule ID">
+            <Typography variant="body2" sx={{ fontFamily: "monospace" }}>{event.ruleId ?? "—"}</Typography>
+          </DetailRow>
+
+          <DetailRow label="Rule Message">
+            <Typography variant="body2" sx={{ wordBreak: "break-word" }}>{event.ruleMessage ?? "—"}</Typography>
+          </DetailRow>
+
+          <Divider />
+
+          {/* Raw audit log — rendered as plain text, never as HTML */}
+          <DetailRow label="Raw Audit Data">
+            {parsedRaw !== null ? (
+              <Box
+                component="pre"
+                sx={{
+                  m: 0,
+                  p: 1.5,
+                  borderRadius: 1,
+                  bgcolor: "action.hover",
+                  fontSize: "0.7rem",
+                  fontFamily: "monospace",
+                  overflowX: "auto",
+                  whiteSpace: "pre-wrap",
+                  wordBreak: "break-all",
+                  userSelect: "text",
+                }}
+              >
+                {JSON.stringify(parsedRaw, null, 2)}
+              </Box>
+            ) : (
+              <Typography variant="body2" color="text.disabled">—</Typography>
+            )}
+          </DetailRow>
+        </Stack>
+      )}
+    </Drawer>
+  );
+}
+
 export default function WafEventsClient({ events, pagination, initialSearch }: Props) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const [searchTerm, setSearchTerm] = useState(initialSearch);
+  const [selected, setSelected] = useState<WafEvent | null>(null);
   useEffect(() => { setSearchTerm(initialSearch); }, [initialSearch]);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -175,7 +282,10 @@ export default function WafEventsClient({ events, pagination, initialSearch }: P
         keyField="id"
         emptyMessage="No WAF events found. Enable the WAF in Settings and send some traffic to see events here."
         pagination={pagination}
+        onRowClick={setSelected}
       />
+
+      <WafEventDrawer event={selected} onClose={() => setSelected(null)} />
     </Stack>
   );
 }
diff --git a/src/components/ui/DataTable.tsx b/src/components/ui/DataTable.tsx
index 7f5dcd81..ab60d48d 100644
--- a/src/components/ui/DataTable.tsx
+++ b/src/components/ui/DataTable.tsx
@@ -29,6 +29,7 @@ type DataTableProps<T> = {
   keyField: keyof T;
   emptyMessage?: string;
   loading?: boolean;
+  onRowClick?: (row: T) => void;
   pagination?: {
     total: number;
     page: number;
@@ -69,6 +70,7 @@ export function DataTable<T>({
   keyField,
   emptyMessage = "No data available",
   loading = false,
+  onRowClick,
   pagination,
 }: DataTableProps<T>) {
   return (
@@ -97,7 +99,11 @@ export function DataTable<T>({
               </TableRow>
             ) : (
               data.map((row) => (
-                <TableRow key={String(row[keyField])}>
+                <TableRow
+                  key={String(row[keyField])}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  sx={onRowClick ? { cursor: "pointer", "&:hover": { bgcolor: "action.hover" } } : undefined}
+                >
                   {columns.map((col) => (
                     <TableCell key={col.id} align={col.align || "left"}>
                       {col.render ? col.render(row) : (row as Record<string, unknown>)[col.id] as ReactNode}
diff --git a/src/lib/models/waf-events.ts b/src/lib/models/waf-events.ts
index 61d457e8..fd34793f 100644
--- a/src/lib/models/waf-events.ts
+++ b/src/lib/models/waf-events.ts
@@ -13,6 +13,7 @@ export type WafEvent = {
   ruleId: number | null;
   ruleMessage: string | null;
   severity: string | null;
+  rawData: string | null;
 };
 
 function buildSearch(search?: string) {
@@ -53,5 +54,6 @@ export async function listWafEvents(limit = 50, offset = 0, search?: string): Pr
     ruleId: r.ruleId ?? null,
     ruleMessage: r.ruleMessage ?? null,
     severity: r.severity ?? null,
+    rawData: r.rawData ?? null,
   }));
 }