diff --git a/app/(dashboard)/access-lists/AccessListsClient.tsx b/app/(dashboard)/access-lists/AccessListsClient.tsx
index 1c848f2c..170612c1 100644
--- a/app/(dashboard)/access-lists/AccessListsClient.tsx
+++ b/app/(dashboard)/access-lists/AccessListsClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Trash2 } from "lucide-react";
+import { PageHeader } from "@/components/ui/PageHeader";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -35,10 +36,10 @@ export default function AccessListsClient({ lists, pagination }: Props) {
 
   return (
     <div className="flex flex-col gap-6 w-full">
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-bold tracking-tight">Access Lists</h1>
-        <p className="text-sm text-muted-foreground">Protect proxy hosts with HTTP basic authentication credentials.</p>
-      </div>
+      <PageHeader
+        title="Access Lists"
+        description="Protect proxy hosts with HTTP basic authentication credentials."
+      />
 
       <div className="flex flex-col gap-4">
         {lists.map((list) => (
diff --git a/app/(dashboard)/audit-log/AuditLogClient.tsx b/app/(dashboard)/audit-log/AuditLogClient.tsx
index 2005dd3c..d1592bcc 100644
--- a/app/(dashboard)/audit-log/AuditLogClient.tsx
+++ b/app/(dashboard)/audit-log/AuditLogClient.tsx
@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { DataTable } from "@/components/ui/DataTable";
 import { SearchField } from "@/components/ui/SearchField";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 type EventRow = {
   id: number;
@@ -96,10 +97,13 @@ export default function AuditLogClient({ events, pagination, initialSearch }: Pr
   );
 
   return (
-    <div className="flex flex-col gap-4 w-full">
-      <h1 className="text-2xl font-bold tracking-tight">Audit Log</h1>
-      <p className="text-sm text-muted-foreground">Review configuration changes and user activity.</p>
+    <div className="flex flex-col gap-6 w-full">
+      <PageHeader
+        title="Audit Log"
+        description="Review configuration changes and user activity."
+      />
 
+      <div className="flex items-center gap-2">
       <SearchField
         value={searchTerm}
         onChange={(e) => {
@@ -108,6 +112,7 @@ export default function AuditLogClient({ events, pagination, initialSearch }: Pr
         }}
         placeholder="Search audit log..."
       />
+      </div>
 
       <DataTable
         columns={columns}
diff --git a/app/(dashboard)/certificates/CertificatesClient.tsx b/app/(dashboard)/certificates/CertificatesClient.tsx
index 08d25272..58f1fe68 100644
--- a/app/(dashboard)/certificates/CertificatesClient.tsx
+++ b/app/(dashboard)/certificates/CertificatesClient.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { PageHeader } from "@/components/ui/PageHeader";
 import type { AcmeHost, CaCertificateView, CertExpiryStatus, ImportedCertView, ManagedCertView } from "./page";
 import { StatusSummaryBar } from "./components/StatusSummaryBar";
 import { AcmeTab } from "./components/AcmeTab";
@@ -61,15 +62,11 @@ export default function CertificatesClient({
   }
 
   return (
-    <div className="flex flex-col gap-4 w-full">
-      {/* Page header */}
-      <div className="flex flex-col gap-1">
-        <h1 className="text-2xl font-bold tracking-tight">SSL/TLS Certificates</h1>
-        <p className="text-sm text-muted-foreground">
-          Caddy automatically handles HTTPS certificates for all proxy hosts using Let&apos;s Encrypt.
-          Import custom certificates only when needed (internal CA, special requirements, etc.).
-        </p>
-      </div>
+    <div className="flex flex-col gap-6 w-full">
+      <PageHeader
+        title="SSL/TLS Certificates"
+        description="Caddy automatically handles HTTPS certificates via Let's Encrypt. Import custom certificates only when needed."
+      />
 
       {/* Status summary bar */}
       <StatusSummaryBar
diff --git a/app/(dashboard)/l4-proxy-hosts/L4ProxyHostsClient.tsx b/app/(dashboard)/l4-proxy-hosts/L4ProxyHostsClient.tsx
index 91079804..7eb01246 100644
--- a/app/(dashboard)/l4-proxy-hosts/L4ProxyHostsClient.tsx
+++ b/app/(dashboard)/l4-proxy-hosts/L4ProxyHostsClient.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import { Pencil, Trash2, Copy } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 import type { L4ProxyHost } from "@/src/lib/models/l4-proxy-hosts";
 import { toggleL4ProxyHostAction } from "./actions";
 import { PageHeader } from "@/components/ui/PageHeader";
@@ -11,8 +11,14 @@ import { DataTable } from "@/components/ui/DataTable";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { CreateL4HostDialog, EditL4HostDialog, DeleteL4HostDialog } from "@/components/l4-proxy-hosts/L4HostDialogs";
 import { L4PortsApplyBanner } from "@/components/l4-proxy-hosts/L4PortsApplyBanner";
 
@@ -24,14 +30,10 @@ type Props = {
 
 function formatMatcher(host: L4ProxyHost): string {
   switch (host.matcher_type) {
-    case "tls_sni":
-      return `SNI: ${host.matcher_value.join(", ")}`;
-    case "http_host":
-      return `Host: ${host.matcher_value.join(", ")}`;
-    case "proxy_protocol":
-      return "Proxy Protocol";
-    default:
-      return "None";
+    case "tls_sni":    return `SNI: ${host.matcher_value.join(", ")}`;
+    case "http_host":  return `Host: ${host.matcher_value.join(", ")}`;
+    case "proxy_protocol": return "Proxy Protocol";
+    default:           return "None";
   }
 }
 
@@ -50,20 +52,14 @@ export default function L4ProxyHostsClient({ hosts, pagination, initialSearch }:
 
   const signalBannerRefresh = () => setBannerRefresh(n => n + 1);
 
-  useEffect(() => {
-    setSearchTerm(initialSearch);
-  }, [initialSearch]);
+  useEffect(() => { setSearchTerm(initialSearch); }, [initialSearch]);
 
   function handleSearchChange(value: string) {
     setSearchTerm(value);
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {
       const params = new URLSearchParams(searchParams.toString());
-      if (value.trim()) {
-        params.set("search", value.trim());
-      } else {
-        params.delete("search");
-      }
+      if (value.trim()) { params.set("search", value.trim()); } else { params.delete("search"); }
       params.set("page", "1");
       router.push(`${pathname}?${params.toString()}`);
     }, 400);
@@ -79,13 +75,16 @@ export default function L4ProxyHostsClient({ hosts, pagination, initialSearch }:
       id: "name",
       label: "Name",
       render: (host: L4ProxyHost) => (
-        <span className="text-sm font-semibold">{host.name}</span>
+        <div>
+          <p className="text-sm font-medium">{host.name}</p>
+          <p className="text-xs text-muted-foreground">{formatMatcher(host)}</p>
+        </div>
       ),
     },
     {
       id: "protocol",
       label: "Protocol",
-      width: 80,
+      width: 90,
       render: (host: L4ProxyHost) => (
         <Badge variant={host.protocol === "tcp" ? "default" : "secondary"}>
           {host.protocol.toUpperCase()}
@@ -99,76 +98,55 @@ export default function L4ProxyHostsClient({ hosts, pagination, initialSearch }:
         <span className="text-sm text-muted-foreground font-mono">{host.listen_address}</span>
       ),
     },
-    {
-      id: "matcher",
-      label: "Matcher",
-      render: (host: L4ProxyHost) => (
-        <span className="text-sm text-muted-foreground">{formatMatcher(host)}</span>
-      ),
-    },
     {
       id: "upstreams",
       label: "Upstreams",
       render: (host: L4ProxyHost) => (
         <span className="text-sm text-muted-foreground font-mono">
-          {host.upstreams[0]}
-          {host.upstreams.length > 1 && ` +${host.upstreams.length - 1} more`}
+          {host.upstreams[0]}{host.upstreams.length > 1 && ` +${host.upstreams.length - 1} more`}
         </span>
       ),
     },
     {
-      id: "actions",
-      label: "Actions",
-      align: "right" as const,
-      width: 150,
+      id: "status",
+      label: "Status",
+      width: 100,
       render: (host: L4ProxyHost) => (
-        <div className="flex flex-row gap-1 justify-end items-center">
+        <Badge variant={host.enabled ? "default" : "secondary"}>
+          {host.enabled ? "Active" : "Paused"}
+        </Badge>
+      ),
+    },
+    {
+      id: "actions",
+      label: "",
+      align: "right" as const,
+      width: 80,
+      render: (host: L4ProxyHost) => (
+        <div className="flex items-center gap-2 justify-end">
           <Switch
             checked={host.enabled}
             onCheckedChange={(checked) => handleToggleEnabled(host.id, checked)}
           />
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => {
-                  setDuplicateHost(host);
-                  setCreateOpen(true);
-                }}
-              >
-                <Copy className="h-4 w-4" />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <MoreHorizontal className="h-4 w-4" />
+                <span className="sr-only">Open menu</span>
               </Button>
-            </TooltipTrigger>
-            <TooltipContent>Duplicate</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => setEditHost(host)}
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Edit</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-destructive hover:text-destructive"
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setEditHost(host)}>Edit</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => { setDuplicateHost(host); setCreateOpen(true); }}>Duplicate</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
                 onClick={() => setDeleteHost(host)}
               >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Delete</TooltipContent>
-          </Tooltip>
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       ),
     },
@@ -177,89 +155,62 @@ export default function L4ProxyHostsClient({ hosts, pagination, initialSearch }:
   const mobileCard = (host: L4ProxyHost) => (
     <Card>
       <CardContent className="p-4">
-        <div className="flex flex-col gap-2">
-          <div className="flex flex-row justify-between items-center">
-            <div className="flex flex-row gap-2 items-center">
-              <span className="text-sm font-bold">{host.name}</span>
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex flex-col gap-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <p className="text-sm font-medium truncate">{host.name}</p>
               <Badge variant={host.protocol === "tcp" ? "default" : "secondary"}>
                 {host.protocol.toUpperCase()}
               </Badge>
             </div>
-            <div className="flex flex-row gap-1 items-center">
-              <Switch
-                checked={host.enabled}
-                onCheckedChange={(checked) => handleToggleEnabled(host.id, checked)}
-              />
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={() => {
-                      setDuplicateHost(host);
-                      setCreateOpen(true);
-                    }}
-                  >
-                    <Copy className="h-4 w-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Duplicate</TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8"
-                    onClick={() => setEditHost(host)}
-                  >
-                    <Pencil className="h-4 w-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Edit</TooltipContent>
-              </Tooltip>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 text-destructive hover:text-destructive"
-                    onClick={() => setDeleteHost(host)}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Delete</TooltipContent>
-              </Tooltip>
-            </div>
+            <p className="text-xs text-muted-foreground font-mono truncate">
+              {host.listen_address} → {host.upstreams[0]}{host.upstreams.length > 1 ? ` +${host.upstreams.length - 1}` : ""}
+            </p>
+            <Badge variant={host.enabled ? "default" : "secondary"} className="w-fit mt-1">
+              {host.enabled ? "Active" : "Paused"}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-1 shrink-0">
+            <Switch
+              checked={host.enabled}
+              onCheckedChange={(checked) => handleToggleEnabled(host.id, checked)}
+            />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setEditHost(host)}>Edit</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => { setDuplicateHost(host); setCreateOpen(true); }}>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => setDeleteHost(host)}>Delete</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
-          <span className="text-xs text-muted-foreground font-mono">
-            {host.listen_address} {"\u2192"} {host.upstreams[0]}
-            {host.upstreams.length > 1 ? ` +${host.upstreams.length - 1}` : ""}
-          </span>
         </div>
       </CardContent>
     </Card>
   );
 
   return (
-    <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-6">
       <L4PortsApplyBanner refreshSignal={bannerRefresh} />
+
       <PageHeader
         title="L4 Proxy Hosts"
-        description="Define TCP/UDP stream proxies powered by caddy-l4. Port mappings are applied automatically by the L4 port manager."
-        action={{
-          label: "Create L4 Host",
-          onClick: () => setCreateOpen(true),
-        }}
+        description="Define TCP/UDP stream proxies powered by caddy-l4. Port mappings are applied automatically."
+        action={{ label: "Create L4 Host", onClick: () => setCreateOpen(true) }}
       />
 
-      <SearchField
-        value={searchTerm}
-        onChange={(e) => handleSearchChange(e.target.value)}
-        placeholder="Search L4 hosts..."
-      />
+      <div className="flex items-center gap-2">
+        <SearchField
+          value={searchTerm}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          placeholder="Search L4 hosts..."
+        />
+      </div>
 
       <DataTable
         columns={columns}
@@ -272,11 +223,7 @@ export default function L4ProxyHostsClient({ hosts, pagination, initialSearch }:
 
       <CreateL4HostDialog
         open={createOpen}
-        onClose={() => {
-          setCreateOpen(false);
-          setTimeout(() => setDuplicateHost(null), 200);
-          signalBannerRefresh();
-        }}
+        onClose={() => { setCreateOpen(false); setTimeout(() => setDuplicateHost(null), 200); signalBannerRefresh(); }}
         initialData={duplicateHost}
       />
 
@@ -284,10 +231,7 @@ export default function L4ProxyHostsClient({ hosts, pagination, initialSearch }:
         <EditL4HostDialog
           open={!!editHost}
           host={editHost}
-          onClose={() => {
-            setEditHost(null);
-            signalBannerRefresh();
-          }}
+          onClose={() => { setEditHost(null); signalBannerRefresh(); }}
         />
       )}
 
@@ -295,10 +239,7 @@ export default function L4ProxyHostsClient({ hosts, pagination, initialSearch }:
         <DeleteL4HostDialog
           open={!!deleteHost}
           host={deleteHost}
-          onClose={() => {
-            setDeleteHost(null);
-            signalBannerRefresh();
-          }}
+          onClose={() => { setDeleteHost(null); signalBannerRefresh(); }}
         />
       )}
     </div>
diff --git a/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx b/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
index 2e07d03c..72f52d82 100644
--- a/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
+++ b/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import { Copy, Pencil, Trash2 } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 import type { AccessList } from "@/lib/models/access-lists";
 import type { Certificate } from "@/lib/models/certificates";
 import type { ProxyHost } from "@/lib/models/proxy-hosts";
@@ -14,9 +14,16 @@ import { SearchField } from "@/components/ui/SearchField";
 import { DataTable } from "@/components/ui/DataTable";
 import { CreateHostDialog, EditHostDialog, DeleteHostDialog } from "@/components/proxy-hosts/HostDialogs";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { Card } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 type Props = {
   hosts: ProxyHost[];
@@ -68,144 +75,102 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, caC
       id: "name",
       label: "Name",
       render: (host: ProxyHost) => (
-        <p className="text-sm font-semibold">{host.name}</p>
-      )
+        <div>
+          <p className="text-sm font-medium">{host.name}</p>
+          <p className="text-xs text-muted-foreground font-mono">
+            {host.domains[0]}{host.domains.length > 1 && ` +${host.domains.length - 1}`}
+          </p>
+        </div>
+      ),
     },
     {
-      id: "domains",
-      label: "Domains",
-      render: (host: ProxyHost) => (
-        <p className="text-sm text-muted-foreground">
-          {host.domains[0]}
-          {host.domains.length > 1 && ` +${host.domains.length - 1} more`}
-        </p>
-      )
-    },
-    {
-      id: "upstreams",
+      id: "target",
       label: "Target",
       render: (host: ProxyHost) => (
         <p className="text-sm text-muted-foreground font-mono">
-          {host.upstreams[0]}
-          {host.upstreams.length > 1 && ` +${host.upstreams.length - 1} more`}
+          {host.upstreams[0]}{host.upstreams.length > 1 && ` +${host.upstreams.length - 1} more`}
         </p>
-      )
+      ),
+    },
+    {
+      id: "status",
+      label: "Status",
+      width: 100,
+      render: (host: ProxyHost) => (
+        <Badge variant={host.enabled ? "default" : "secondary"}>
+          {host.enabled ? "Active" : "Paused"}
+        </Badge>
+      ),
     },
     {
       id: "actions",
-      label: "Actions",
+      label: "",
       align: "right" as const,
-      width: 150,
+      width: 80,
       render: (host: ProxyHost) => (
-        <div className="flex items-center gap-1 justify-end">
+        <div className="flex items-center gap-2 justify-end">
           <Switch
             checked={host.enabled}
             onCheckedChange={(checked) => handleToggleEnabled(host.id, checked)}
           />
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-blue-400"
-                onClick={() => {
-                  setDuplicateHost(host);
-                  setCreateOpen(true);
-                }}
-              >
-                <Copy className="h-4 w-4" />
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <MoreHorizontal className="h-4 w-4" />
+                <span className="sr-only">Open menu</span>
               </Button>
-            </TooltipTrigger>
-            <TooltipContent>Duplicate</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8"
-                onClick={() => setEditHost(host)}
-              >
-                <Pencil className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Edit</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-8 w-8 text-destructive"
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setEditHost(host)}>Edit</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => { setDuplicateHost(host); setCreateOpen(true); }}>Duplicate</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive focus:text-destructive"
                 onClick={() => setDeleteHost(host)}
               >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Delete</TooltipContent>
-          </Tooltip>
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
-      )
-    }
+      ),
+    },
   ];
 
   const mobileCard = (host: ProxyHost) => (
-    <Card className="p-4">
-      <div className="flex flex-col gap-1">
-        <div className="flex justify-between items-center">
-          <p className="text-sm font-bold">{host.name}</p>
-          <div className="flex items-center gap-0.5">
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex flex-col gap-1 min-w-0">
+            <p className="text-sm font-medium truncate">{host.name}</p>
+            <p className="text-xs text-muted-foreground font-mono truncate">
+              {host.domains[0]}{host.domains.length > 1 ? ` +${host.domains.length - 1}` : ""} → {host.upstreams[0]}
+            </p>
+            <Badge variant={host.enabled ? "default" : "secondary"} className="w-fit mt-1">
+              {host.enabled ? "Active" : "Paused"}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-1 shrink-0">
             <Switch
               checked={host.enabled}
               onCheckedChange={(checked) => handleToggleEnabled(host.id, checked)}
             />
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-blue-400"
-                  onClick={() => { setDuplicateHost(host); setCreateOpen(true); }}
-                >
-                  <Copy className="h-3.5 w-3.5" />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <MoreHorizontal className="h-4 w-4" />
                 </Button>
-              </TooltipTrigger>
-              <TooltipContent>Duplicate</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  aria-label="Edit"
-                  onClick={() => setEditHost(host)}
-                >
-                  <Pencil className="h-3.5 w-3.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Edit</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-destructive"
-                  aria-label="Delete"
-                  onClick={() => setDeleteHost(host)}
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Delete</TooltipContent>
-            </Tooltip>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => setEditHost(host)}>Edit</DropdownMenuItem>
+                <DropdownMenuItem onClick={() => { setDuplicateHost(host); setCreateOpen(true); }}>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive focus:text-destructive" onClick={() => setDeleteHost(host)}>Delete</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
-        <p className="text-xs text-muted-foreground font-mono">
-          {host.domains[0]}{host.domains.length > 1 ? ` +${host.domains.length - 1}` : ""} → {host.upstreams[0]}{host.upstreams.length > 1 ? ` +${host.upstreams.length - 1}` : ""}
-        </p>
-      </div>
+      </CardContent>
     </Card>
   );
 
@@ -214,17 +179,16 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, caC
       <PageHeader
         title="Proxy Hosts"
         description="Define HTTP(S) reverse proxies orchestrated by Caddy with automated certificates."
-        action={{
-          label: "Create Host",
-          onClick: () => setCreateOpen(true)
-        }}
+        action={{ label: "Create Host", onClick: () => setCreateOpen(true) }}
       />
 
-      <SearchField
-        value={searchTerm}
-        onChange={(e) => handleSearchChange(e.target.value)}
-        placeholder="Search hosts..."
-      />
+      <div className="flex items-center gap-2">
+        <SearchField
+          value={searchTerm}
+          onChange={(e) => handleSearchChange(e.target.value)}
+          placeholder="Search hosts..."
+        />
+      </div>
 
       <DataTable
         columns={columns}
@@ -237,11 +201,7 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, caC
 
       <CreateHostDialog
         open={createOpen}
-        onClose={() => {
-          setCreateOpen(false);
-          // Clear duplicate host after dialog transition
-          setTimeout(() => setDuplicateHost(null), 200);
-        }}
+        onClose={() => { setCreateOpen(false); setTimeout(() => setDuplicateHost(null), 200); }}
         initialData={duplicateHost}
         certificates={certificates}
         accessLists={accessLists}