diff --git a/devfront/src/features/audit/AuditLogsPage.tsx b/devfront/src/features/audit/AuditLogsPage.tsx
index 1f20529a..abbab331 100644
--- a/devfront/src/features/audit/AuditLogsPage.tsx
+++ b/devfront/src/features/audit/AuditLogsPage.tsx
@@ -126,16 +126,26 @@ function AuditLogsPage() {
   const [searchClientId, setSearchClientId] = React.useState("");
   const [searchAction, setSearchAction] = React.useState("");
   const [statusFilter, setStatusFilter] = React.useState("all");
+
+  // Use deferred values to avoid UI lag during rapid typing
+  const deferredSearchClientId = React.useDeferredValue(searchClientId.trim());
+  const deferredSearchAction = React.useDeferredValue(searchAction.trim());
+
   const [expandedRows, setExpandedRows] = React.useState<
     Record<string, boolean>
   >({});
 
   const query = useInfiniteQuery({
-    queryKey: ["dev-audit-logs", searchClientId, searchAction, statusFilter],
+    queryKey: [
+      "dev-audit-logs",
+      deferredSearchClientId,
+      deferredSearchAction,
+      statusFilter,
+    ],
     queryFn: ({ pageParam }) =>
       fetchDevAuditLogs(50, pageParam, {
-        client_id: searchClientId.trim() || undefined,
-        action: searchAction.trim() || undefined,
+        client_id: deferredSearchClientId || undefined,
+        action: deferredSearchAction || undefined,
         status: statusFilter !== "all" ? statusFilter : undefined,
       }),
     initialPageParam: undefined as string | undefined,
@@ -160,14 +170,6 @@ function AuditLogsPage() {
     downloadCsv(csv, `dev-audit-logs-${stamp}.csv`);
   };
 
-  if (query.isLoading) {
-    return (
-      <div className="p-8 text-center">
-        {t("msg.dev.audit.loading", "Loading audit logs...")}
-      </div>
-    );
-  }
-
   if (query.error) {
     const axiosError = query.error as AxiosError<{ error?: string }>;
     if (axiosError.response?.status === 403) {
@@ -227,7 +229,13 @@ function AuditLogsPage() {
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="grid gap-2 md:grid-cols-[1fr,1fr,180px]">
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              query.refetch();
+            }}
+            className="grid gap-2 md:grid-cols-[1fr,1fr,180px]"
+          >
             <div className="relative">
               <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
               <Input
@@ -263,142 +271,160 @@ function AuditLogsPage() {
                 {t("ui.common.status.failure", "Failure")}
               </option>
             </select>
-          </div>
+          </form>
 
-          <Table className="table-fixed">
-            <TableHeader>
-              <TableRow>
-                <TableHead className="w-[190px]">
-                  {t("ui.dev.audit.table.time", "Time")}
-                </TableHead>
-                <TableHead className="w-[180px]">
-                  {t("ui.dev.audit.table.actor", "Actor")}
-                </TableHead>
-                <TableHead className="w-[180px]">
-                  {t("ui.dev.audit.table.action", "Action")}
-                </TableHead>
-                <TableHead className="w-[260px]">
-                  {t("ui.dev.audit.table.target", "Target")}
-                </TableHead>
-                <TableHead className="w-[120px]">
-                  {t("ui.dev.audit.table.status", "Status")}
-                </TableHead>
-                <TableHead className="w-[80px]" />
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {logs.length === 0 && (
+          <div
+            className={
+              query.isFetching && !query.isFetchingNextPage
+                ? "opacity-50 transition-opacity"
+                : ""
+            }
+          >
+            <Table className="table-fixed">
+              <TableHeader>
                 <TableRow>
-                  <TableCell
-                    colSpan={6}
-                    className="text-center text-muted-foreground"
-                  >
-                    {t("msg.dev.audit.empty", "No audit logs found.")}
-                  </TableCell>
+                  <TableHead className="w-[190px]">
+                    {t("ui.dev.audit.table.time", "Time")}
+                  </TableHead>
+                  <TableHead className="w-[180px]">
+                    {t("ui.dev.audit.table.actor", "Actor")}
+                  </TableHead>
+                  <TableHead className="w-[180px]">
+                    {t("ui.dev.audit.table.action", "Action")}
+                  </TableHead>
+                  <TableHead className="w-[260px]">
+                    {t("ui.dev.audit.table.target", "Target")}
+                  </TableHead>
+                  <TableHead className="w-[120px]">
+                    {t("ui.dev.audit.table.status", "Status")}
+                  </TableHead>
+                  <TableHead className="w-[80px]" />
                 </TableRow>
-              )}
-              {logs.map((row, index) => {
-                const details = parseDetails(row.details);
-                const actionLabel = details.action || row.event_type;
-                const targetValue = details.target_id || "-";
-                const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
-                const expanded = Boolean(expandedRows[rowKey]);
-                return (
-                  <React.Fragment key={rowKey}>
-                    <TableRow>
-                      <TableCell className="text-xs text-muted-foreground">
-                        {formatDateTime(row.timestamp)}
-                      </TableCell>
-                      <TableCell className="font-mono text-xs">
-                        <div className="flex items-center gap-2">
-                          <span>{row.user_id || "-"}</span>
-                          {row.user_id ? (
+              </TableHeader>
+              <TableBody>
+                {query.isLoading && logs.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={6}
+                      className="py-8 text-center text-muted-foreground"
+                    >
+                      {t("msg.dev.audit.loading", "Loading audit logs...")}
+                    </TableCell>
+                  </TableRow>
+                ) : logs.length === 0 ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={6}
+                      className="text-center text-muted-foreground"
+                    >
+                      {t("msg.dev.audit.empty", "No audit logs found.")}
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  logs.map((row, index) => {
+                    const details = parseDetails(row.details);
+                    const actionLabel = details.action || row.event_type;
+                    const targetValue = details.target_id || "-";
+                    const rowKey = `${row.event_id}-${row.timestamp}-${index}`;
+                    const expanded = Boolean(expandedRows[rowKey]);
+                    return (
+                      <React.Fragment key={rowKey}>
+                        <TableRow>
+                          <TableCell className="text-xs text-muted-foreground">
+                            {formatDateTime(row.timestamp)}
+                          </TableCell>
+                          <TableCell className="font-mono text-xs">
+                            <div className="flex items-center gap-2">
+                              <span>{row.user_id || "-"}</span>
+                              {row.user_id ? (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground"
+                                  onClick={() => handleCopy(row.user_id)}
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              ) : null}
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-xs">{actionLabel}</TableCell>
+                          <TableCell className="font-mono text-xs">
+                            <div className="flex items-center gap-2">
+                              <span className="break-all">{targetValue}</span>
+                              {targetValue !== "-" ? (
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground"
+                                  onClick={() => handleCopy(targetValue)}
+                                >
+                                  <Copy className="h-3 w-3" />
+                                </Button>
+                              ) : null}
+                            </div>
+                          </TableCell>
+                          <TableCell>
+                            <Badge
+                              variant={
+                                row.status === "success" ? "success" : "warning"
+                              }
+                            >
+                              {row.status}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-right">
                             <Button
                               variant="ghost"
-                              size="icon"
-                              className="h-7 w-7 text-muted-foreground"
-                              onClick={() => handleCopy(row.user_id)}
+                              size="sm"
+                              onClick={() =>
+                                setExpandedRows((prev) => ({
+                                  ...prev,
+                                  [rowKey]: !expanded,
+                                }))
+                              }
                             >
-                              <Copy className="h-3 w-3" />
+                              {expanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
                             </Button>
-                          ) : null}
-                        </div>
-                      </TableCell>
-                      <TableCell className="text-xs">{actionLabel}</TableCell>
-                      <TableCell className="font-mono text-xs">
-                        <div className="flex items-center gap-2">
-                          <span className="break-all">{targetValue}</span>
-                          {targetValue !== "-" ? (
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-7 w-7 text-muted-foreground"
-                              onClick={() => handleCopy(targetValue)}
+                          </TableCell>
+                        </TableRow>
+                        {expanded ? (
+                          <TableRow className="bg-card/20">
+                            <TableCell
+                              colSpan={6}
+                              className="text-xs text-muted-foreground"
                             >
-                              <Copy className="h-3 w-3" />
-                            </Button>
-                          ) : null}
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <Badge
-                          variant={
-                            row.status === "success" ? "success" : "warning"
-                          }
-                        >
-                          {row.status}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() =>
-                            setExpandedRows((prev) => ({
-                              ...prev,
-                              [rowKey]: !expanded,
-                            }))
-                          }
-                        >
-                          {expanded ? (
-                            <ChevronUp className="h-4 w-4" />
-                          ) : (
-                            <ChevronDown className="h-4 w-4" />
-                          )}
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                    {expanded ? (
-                      <TableRow className="bg-card/20">
-                        <TableCell
-                          colSpan={6}
-                          className="text-xs text-muted-foreground"
-                        >
-                          <div className="grid gap-3 md:grid-cols-2">
-                            <div className="space-y-1">
-                              <div>
-                                Request ID: {formatValue(details.request_id)}
+                              <div className="grid gap-3 md:grid-cols-2">
+                                <div className="space-y-1">
+                                  <div>
+                                    Request ID: {formatValue(details.request_id)}
+                                  </div>
+                                  <div>Method: {formatValue(details.method)}</div>
+                                  <div>Path: {formatValue(details.path)}</div>
+                                  <div>
+                                    Tenant: {formatValue(details.tenant_id)}
+                                  </div>
+                                </div>
+                                <div className="space-y-1 break-all">
+                                  <div>Before: {formatValue(details.before)}</div>
+                                  <div>After: {formatValue(details.after)}</div>
+                                  <div>Error: {formatValue(details.error)}</div>
+                                </div>
                               </div>
-                              <div>Method: {formatValue(details.method)}</div>
-                              <div>Path: {formatValue(details.path)}</div>
-                              <div>
-                                Tenant: {formatValue(details.tenant_id)}
-                              </div>
-                            </div>
-                            <div className="space-y-1 break-all">
-                              <div>Before: {formatValue(details.before)}</div>
-                              <div>After: {formatValue(details.after)}</div>
-                              <div>Error: {formatValue(details.error)}</div>
-                            </div>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : null}
-                  </React.Fragment>
-                );
-              })}
-            </TableBody>
-          </Table>
+                            </TableCell>
+                          </TableRow>
+                        ) : null}
+                      </React.Fragment>
+                    );
+                  })
+                )}
+              </TableBody>
+            </Table>
+          </div>
 
           {query.hasNextPage ? (
             <div className="flex justify-center">