diff --git a/src/components/l4-proxy-hosts/L4HostDialogs.tsx b/src/components/l4-proxy-hosts/L4HostDialogs.tsx
index 423d71ca..3cfa030a 100644
--- a/src/components/l4-proxy-hosts/L4HostDialogs.tsx
+++ b/src/components/l4-proxy-hosts/L4HostDialogs.tsx
@@ -1,5 +1,5 @@
-import { Accordion, AccordionDetails, AccordionSummary, Alert, Box, FormControlLabel, MenuItem, Stack, Switch, TextField, Typography } from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+"use client";
+
 import { useFormState } from "react-dom";
 import { useEffect, useState } from "react";
 import {
@@ -7,9 +7,49 @@ import {
   deleteL4ProxyHostAction,
   updateL4ProxyHostAction,
 } from "@/app/(dashboard)/l4-proxy-hosts/actions";
-import { INITIAL_ACTION_STATE } from "@/src/lib/actions";
-import type { L4ProxyHost } from "@/src/lib/models/l4-proxy-hosts";
-import { AppDialog } from "@/src/components/ui/AppDialog";
+import { INITIAL_ACTION_STATE } from "@/lib/actions";
+import type { L4ProxyHost } from "@/lib/models/l4-proxy-hosts";
+import { AppDialog } from "@/components/ui/AppDialog";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+function FormField({
+  label,
+  htmlFor,
+  helperText,
+  children,
+}: {
+  label: string;
+  htmlFor: string;
+  helperText?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor={htmlFor}>{label}</Label>
+      {children}
+      {helperText && (
+        <p className="text-xs text-muted-foreground">{helperText}</p>
+      )}
+    </div>
+  );
+}
 
 function L4HostForm({
   formId,
@@ -23,310 +63,694 @@ function L4HostForm({
   initialData?: L4ProxyHost | null;
 }) {
   const [protocol, setProtocol] = useState(initialData?.protocol ?? "tcp");
-  const [matcherType, setMatcherType] = useState(initialData?.matcher_type ?? "none");
+  const [matcherType, setMatcherType] = useState(
+    initialData?.matcher_type ?? "none"
+  );
+
+  const defaultLbAccordion = initialData?.load_balancer?.enabled
+    ? "load-balancer"
+    : undefined;
+  const defaultDnsAccordion = initialData?.dns_resolver?.enabled
+    ? "dns-resolver"
+    : undefined;
+  const defaultGeoblockAccordion = initialData?.geoblock?.enabled
+    ? "geoblock"
+    : undefined;
+  const defaultUpstreamDnsAccordion =
+    initialData?.upstream_dns_resolution?.enabled === true
+      ? "upstream-dns"
+      : undefined;
 
   return (
-    <Stack component="form" id={formId} action={formAction} spacing={2.5}>
+    <form id={formId} action={formAction} className="flex flex-col gap-5">
       {state.status !== "idle" && state.message && (
-        <Alert severity={state.status === "error" ? "error" : "success"}>
-          {state.message}
+        <Alert variant={state.status === "error" ? "destructive" : "default"}>
+          <AlertDescription>{state.message}</AlertDescription>
         </Alert>
       )}
 
       <input type="hidden" name="enabled_present" value="1" />
-      <FormControlLabel
-        control={
-          <Switch
-            name="enabled"
-            defaultChecked={initialData?.enabled ?? true}
-            color="success"
-          />
-        }
-        label="Enabled"
-      />
+      <div className="flex items-center gap-2">
+        <Switch
+          id="enabled"
+          name="enabled"
+          defaultChecked={initialData?.enabled ?? true}
+        />
+        <Label htmlFor="enabled">Enabled</Label>
+      </div>
 
-      <TextField
-        name="name"
-        label="Name"
-        placeholder="PostgreSQL Proxy"
-        defaultValue={initialData?.name ?? ""}
-        required
-        fullWidth
-      />
+      <FormField label="Name" htmlFor="name">
+        <Input
+          id="name"
+          name="name"
+          placeholder="PostgreSQL Proxy"
+          defaultValue={initialData?.name ?? ""}
+          required
+        />
+      </FormField>
 
-      <TextField
-        select
-        name="protocol"
-        label="Protocol"
-        value={protocol}
-        onChange={(e) => setProtocol(e.target.value as "tcp" | "udp")}
-        fullWidth
-      >
-        <MenuItem value="tcp">TCP</MenuItem>
-        <MenuItem value="udp">UDP</MenuItem>
-      </TextField>
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="protocol">Protocol</Label>
+        <Select
+          name="protocol"
+          value={protocol}
+          onValueChange={(v) => setProtocol(v as "tcp" | "udp")}
+        >
+          <SelectTrigger id="protocol">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="tcp">TCP</SelectItem>
+            <SelectItem value="udp">UDP</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
 
-      <TextField
-        name="listen_address"
+      <FormField
         label="Listen Address"
-        placeholder=":5432"
-        defaultValue={initialData?.listen_address ?? ""}
+        htmlFor="listen_address"
         helperText="Format: :PORT or HOST:PORT. Make sure to expose this port in docker-compose.yml on the caddy service."
-        required
-        fullWidth
-      />
-
-      <TextField
-        name="upstreams"
-        label="Upstreams"
-        placeholder={"10.0.0.1:5432\n10.0.0.2:5432"}
-        defaultValue={initialData?.upstreams.join("\n") ?? ""}
-        helperText="One per line in host:port format."
-        multiline
-        minRows={2}
-        required
-        fullWidth
-      />
-
-      <TextField
-        select
-        name="matcher_type"
-        label="Matcher"
-        value={matcherType}
-        onChange={(e) => setMatcherType(e.target.value as "none" | "tls_sni" | "http_host" | "proxy_protocol")}
-        helperText="Match incoming connections before proxying. 'None' matches all connections on this port."
-        fullWidth
       >
-        <MenuItem value="none">None (catch-all)</MenuItem>
-        <MenuItem value="tls_sni">TLS SNI</MenuItem>
-        <MenuItem value="http_host">HTTP Host</MenuItem>
-        <MenuItem value="proxy_protocol">Proxy Protocol</MenuItem>
-      </TextField>
+        <Input
+          id="listen_address"
+          name="listen_address"
+          placeholder=":5432"
+          defaultValue={initialData?.listen_address ?? ""}
+          required
+        />
+      </FormField>
+
+      <FormField
+        label="Upstreams"
+        htmlFor="upstreams"
+        helperText="One per line in host:port format."
+      >
+        <Textarea
+          id="upstreams"
+          name="upstreams"
+          placeholder={"10.0.0.1:5432\n10.0.0.2:5432"}
+          defaultValue={initialData?.upstreams.join("\n") ?? ""}
+          rows={2}
+          required
+        />
+      </FormField>
+
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="matcher_type">Matcher</Label>
+        <Select
+          name="matcher_type"
+          value={matcherType}
+          onValueChange={(v) =>
+            setMatcherType(
+              v as "none" | "tls_sni" | "http_host" | "proxy_protocol"
+            )
+          }
+        >
+          <SelectTrigger id="matcher_type">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="none">None (catch-all)</SelectItem>
+            <SelectItem value="tls_sni">TLS SNI</SelectItem>
+            <SelectItem value="http_host">HTTP Host</SelectItem>
+            <SelectItem value="proxy_protocol">Proxy Protocol</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          Match incoming connections before proxying. &apos;None&apos; matches
+          all connections on this port.
+        </p>
+      </div>
 
       {(matcherType === "tls_sni" || matcherType === "http_host") && (
-        <TextField
-          name="matcher_value"
+        <FormField
           label={matcherType === "tls_sni" ? "SNI Hostnames" : "HTTP Hostnames"}
-          placeholder="db.example.com, api.example.com"
-          defaultValue={initialData?.matcher_value?.join(", ") ?? ""}
+          htmlFor="matcher_value"
           helperText="Comma-separated list of hostnames to match."
-          required
-          fullWidth
-        />
+        >
+          <Input
+            id="matcher_value"
+            name="matcher_value"
+            placeholder="db.example.com, api.example.com"
+            defaultValue={initialData?.matcher_value?.join(", ") ?? ""}
+            required
+          />
+        </FormField>
       )}
 
       {protocol === "tcp" && (
-        <FormControlLabel
-          control={
-            <Switch
-              name="tls_termination"
-              defaultChecked={initialData?.tls_termination ?? false}
-            />
-          }
-          label="TLS Termination"
-          sx={{ ml: 0 }}
-        />
+        <div className="flex items-center gap-2">
+          <Switch
+            id="tls_termination"
+            name="tls_termination"
+            defaultChecked={initialData?.tls_termination ?? false}
+          />
+          <Label htmlFor="tls_termination">TLS Termination</Label>
+        </div>
       )}
 
-      <FormControlLabel
-        control={
-          <Switch
-            name="proxy_protocol_receive"
-            defaultChecked={initialData?.proxy_protocol_receive ?? false}
-          />
-        }
-        label="Accept inbound PROXY protocol"
-        sx={{ ml: 0 }}
-      />
+      <div className="flex items-center gap-2">
+        <Switch
+          id="proxy_protocol_receive"
+          name="proxy_protocol_receive"
+          defaultChecked={initialData?.proxy_protocol_receive ?? false}
+        />
+        <Label htmlFor="proxy_protocol_receive">
+          Accept inbound PROXY protocol
+        </Label>
+      </div>
 
-      <TextField
-        select
-        name="proxy_protocol_version"
-        label="Send PROXY protocol to upstream"
-        defaultValue={initialData?.proxy_protocol_version ?? ""}
-        fullWidth
-      >
-        <MenuItem value="">None</MenuItem>
-        <MenuItem value="v1">v1</MenuItem>
-        <MenuItem value="v2">v2</MenuItem>
-      </TextField>
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="proxy_protocol_version">
+          Send PROXY protocol to upstream
+        </Label>
+        <Select
+          name="proxy_protocol_version"
+          defaultValue={initialData?.proxy_protocol_version ?? ""}
+        >
+          <SelectTrigger id="proxy_protocol_version">
+            <SelectValue placeholder="None" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="">None</SelectItem>
+            <SelectItem value="v1">v1</SelectItem>
+            <SelectItem value="v2">v2</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
 
       {/* Load Balancer */}
-      <Accordion variant="outlined" defaultExpanded={!!initialData?.load_balancer?.enabled}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography variant="subtitle2">Load Balancer</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Stack spacing={2}>
-            <input type="hidden" name="lb_present" value="1" />
-            <input type="hidden" name="lb_enabled_present" value="1" />
-            <FormControlLabel
-              control={<Switch name="lb_enabled" defaultChecked={initialData?.load_balancer?.enabled ?? false} />}
-              label="Enable Load Balancing"
-            />
-            <TextField
-              select
-              name="lb_policy"
-              label="Policy"
-              defaultValue={initialData?.load_balancer?.policy ?? "random"}
-              fullWidth
-              size="small"
-            >
-              <MenuItem value="random">Random</MenuItem>
-              <MenuItem value="round_robin">Round Robin</MenuItem>
-              <MenuItem value="least_conn">Least Connections</MenuItem>
-              <MenuItem value="ip_hash">IP Hash</MenuItem>
-              <MenuItem value="first">First Available</MenuItem>
-            </TextField>
-            <TextField name="lb_try_duration" label="Try Duration" placeholder="5s" defaultValue={initialData?.load_balancer?.tryDuration ?? ""} size="small" fullWidth />
-            <TextField name="lb_try_interval" label="Try Interval" placeholder="250ms" defaultValue={initialData?.load_balancer?.tryInterval ?? ""} size="small" fullWidth />
-            <TextField name="lb_retries" label="Retries" type="number" defaultValue={initialData?.load_balancer?.retries ?? ""} size="small" fullWidth />
+      <Accordion
+        type="single"
+        collapsible
+        defaultValue={defaultLbAccordion}
+        className="border rounded-md px-3"
+      >
+        <AccordionItem value="load-balancer" className="border-b-0">
+          <AccordionTrigger className="text-sm font-medium">
+            Load Balancer
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col gap-3 pt-1">
+              <input type="hidden" name="lb_present" value="1" />
+              <input type="hidden" name="lb_enabled_present" value="1" />
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="lb_enabled"
+                  name="lb_enabled"
+                  defaultChecked={
+                    initialData?.load_balancer?.enabled ?? false
+                  }
+                />
+                <Label htmlFor="lb_enabled">Enable Load Balancing</Label>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="lb_policy">Policy</Label>
+                <Select
+                  name="lb_policy"
+                  defaultValue={
+                    initialData?.load_balancer?.policy ?? "random"
+                  }
+                >
+                  <SelectTrigger id="lb_policy">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="random">Random</SelectItem>
+                    <SelectItem value="round_robin">Round Robin</SelectItem>
+                    <SelectItem value="least_conn">
+                      Least Connections
+                    </SelectItem>
+                    <SelectItem value="ip_hash">IP Hash</SelectItem>
+                    <SelectItem value="first">First Available</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <FormField label="Try Duration" htmlFor="lb_try_duration">
+                <Input
+                  id="lb_try_duration"
+                  name="lb_try_duration"
+                  placeholder="5s"
+                  defaultValue={
+                    initialData?.load_balancer?.tryDuration ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Try Interval" htmlFor="lb_try_interval">
+                <Input
+                  id="lb_try_interval"
+                  name="lb_try_interval"
+                  placeholder="250ms"
+                  defaultValue={
+                    initialData?.load_balancer?.tryInterval ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Retries" htmlFor="lb_retries">
+                <Input
+                  id="lb_retries"
+                  name="lb_retries"
+                  type="number"
+                  defaultValue={initialData?.load_balancer?.retries ?? ""}
+                />
+              </FormField>
 
-            <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>Active Health Check</Typography>
-            <input type="hidden" name="lb_active_health_enabled_present" value="1" />
-            <FormControlLabel
-              control={<Switch name="lb_active_health_enabled" defaultChecked={initialData?.load_balancer?.activeHealthCheck?.enabled ?? false} size="small" />}
-              label="Enable Active Health Check"
-            />
-            <TextField name="lb_active_health_port" label="Health Check Port" type="number" defaultValue={initialData?.load_balancer?.activeHealthCheck?.port ?? ""} size="small" fullWidth />
-            <TextField name="lb_active_health_interval" label="Interval" placeholder="30s" defaultValue={initialData?.load_balancer?.activeHealthCheck?.interval ?? ""} size="small" fullWidth />
-            <TextField name="lb_active_health_timeout" label="Timeout" placeholder="5s" defaultValue={initialData?.load_balancer?.activeHealthCheck?.timeout ?? ""} size="small" fullWidth />
+              <p className="text-xs text-muted-foreground font-medium mt-1">
+                Active Health Check
+              </p>
+              <input
+                type="hidden"
+                name="lb_active_health_enabled_present"
+                value="1"
+              />
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="lb_active_health_enabled"
+                  name="lb_active_health_enabled"
+                  defaultChecked={
+                    initialData?.load_balancer?.activeHealthCheck?.enabled ??
+                    false
+                  }
+                />
+                <Label htmlFor="lb_active_health_enabled">
+                  Enable Active Health Check
+                </Label>
+              </div>
+              <FormField
+                label="Health Check Port"
+                htmlFor="lb_active_health_port"
+              >
+                <Input
+                  id="lb_active_health_port"
+                  name="lb_active_health_port"
+                  type="number"
+                  defaultValue={
+                    initialData?.load_balancer?.activeHealthCheck?.port ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Interval" htmlFor="lb_active_health_interval">
+                <Input
+                  id="lb_active_health_interval"
+                  name="lb_active_health_interval"
+                  placeholder="30s"
+                  defaultValue={
+                    initialData?.load_balancer?.activeHealthCheck?.interval ??
+                    ""
+                  }
+                />
+              </FormField>
+              <FormField label="Timeout" htmlFor="lb_active_health_timeout">
+                <Input
+                  id="lb_active_health_timeout"
+                  name="lb_active_health_timeout"
+                  placeholder="5s"
+                  defaultValue={
+                    initialData?.load_balancer?.activeHealthCheck?.timeout ?? ""
+                  }
+                />
+              </FormField>
 
-            <Typography variant="caption" color="text.secondary" sx={{ mt: 1 }}>Passive Health Check</Typography>
-            <input type="hidden" name="lb_passive_health_enabled_present" value="1" />
-            <FormControlLabel
-              control={<Switch name="lb_passive_health_enabled" defaultChecked={initialData?.load_balancer?.passiveHealthCheck?.enabled ?? false} size="small" />}
-              label="Enable Passive Health Check"
-            />
-            <TextField name="lb_passive_health_fail_duration" label="Fail Duration" placeholder="30s" defaultValue={initialData?.load_balancer?.passiveHealthCheck?.failDuration ?? ""} size="small" fullWidth />
-            <TextField name="lb_passive_health_max_fails" label="Max Fails" type="number" defaultValue={initialData?.load_balancer?.passiveHealthCheck?.maxFails ?? ""} size="small" fullWidth />
-            <TextField name="lb_passive_health_unhealthy_latency" label="Unhealthy Latency" placeholder="5s" defaultValue={initialData?.load_balancer?.passiveHealthCheck?.unhealthyLatency ?? ""} size="small" fullWidth />
-          </Stack>
-        </AccordionDetails>
+              <p className="text-xs text-muted-foreground font-medium mt-1">
+                Passive Health Check
+              </p>
+              <input
+                type="hidden"
+                name="lb_passive_health_enabled_present"
+                value="1"
+              />
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="lb_passive_health_enabled"
+                  name="lb_passive_health_enabled"
+                  defaultChecked={
+                    initialData?.load_balancer?.passiveHealthCheck?.enabled ??
+                    false
+                  }
+                />
+                <Label htmlFor="lb_passive_health_enabled">
+                  Enable Passive Health Check
+                </Label>
+              </div>
+              <FormField
+                label="Fail Duration"
+                htmlFor="lb_passive_health_fail_duration"
+              >
+                <Input
+                  id="lb_passive_health_fail_duration"
+                  name="lb_passive_health_fail_duration"
+                  placeholder="30s"
+                  defaultValue={
+                    initialData?.load_balancer?.passiveHealthCheck
+                      ?.failDuration ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Max Fails" htmlFor="lb_passive_health_max_fails">
+                <Input
+                  id="lb_passive_health_max_fails"
+                  name="lb_passive_health_max_fails"
+                  type="number"
+                  defaultValue={
+                    initialData?.load_balancer?.passiveHealthCheck?.maxFails ??
+                    ""
+                  }
+                />
+              </FormField>
+              <FormField
+                label="Unhealthy Latency"
+                htmlFor="lb_passive_health_unhealthy_latency"
+              >
+                <Input
+                  id="lb_passive_health_unhealthy_latency"
+                  name="lb_passive_health_unhealthy_latency"
+                  placeholder="5s"
+                  defaultValue={
+                    initialData?.load_balancer?.passiveHealthCheck
+                      ?.unhealthyLatency ?? ""
+                  }
+                />
+              </FormField>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
       </Accordion>
 
       {/* DNS Resolver */}
-      <Accordion variant="outlined" defaultExpanded={!!initialData?.dns_resolver?.enabled}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography variant="subtitle2">Custom DNS Resolvers</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Stack spacing={2}>
-            <input type="hidden" name="dns_present" value="1" />
-            <input type="hidden" name="dns_enabled_present" value="1" />
-            <FormControlLabel
-              control={<Switch name="dns_enabled" defaultChecked={initialData?.dns_resolver?.enabled ?? false} />}
-              label="Enable Custom DNS"
-            />
-            <TextField
-              name="dns_resolvers"
-              label="DNS Resolvers"
-              placeholder={"1.1.1.1\n8.8.8.8"}
-              defaultValue={initialData?.dns_resolver?.resolvers?.join("\n") ?? ""}
-              helperText="One per line. Used for upstream hostname resolution."
-              multiline
-              minRows={2}
-              size="small"
-              fullWidth
-            />
-            <TextField
-              name="dns_fallbacks"
-              label="Fallback Resolvers"
-              placeholder="8.8.4.4"
-              defaultValue={initialData?.dns_resolver?.fallbacks?.join("\n") ?? ""}
-              helperText="Fallback DNS servers (one per line)."
-              multiline
-              minRows={1}
-              size="small"
-              fullWidth
-            />
-            <TextField name="dns_timeout" label="Timeout" placeholder="5s" defaultValue={initialData?.dns_resolver?.timeout ?? ""} size="small" fullWidth />
-          </Stack>
-        </AccordionDetails>
+      <Accordion
+        type="single"
+        collapsible
+        defaultValue={defaultDnsAccordion}
+        className="border rounded-md px-3"
+      >
+        <AccordionItem value="dns-resolver" className="border-b-0">
+          <AccordionTrigger className="text-sm font-medium">
+            Custom DNS Resolvers
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col gap-3 pt-1">
+              <input type="hidden" name="dns_present" value="1" />
+              <input type="hidden" name="dns_enabled_present" value="1" />
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="dns_enabled"
+                  name="dns_enabled"
+                  defaultChecked={initialData?.dns_resolver?.enabled ?? false}
+                />
+                <Label htmlFor="dns_enabled">Enable Custom DNS</Label>
+              </div>
+              <FormField
+                label="DNS Resolvers"
+                htmlFor="dns_resolvers"
+                helperText="One per line. Used for upstream hostname resolution."
+              >
+                <Textarea
+                  id="dns_resolvers"
+                  name="dns_resolvers"
+                  placeholder={"1.1.1.1\n8.8.8.8"}
+                  defaultValue={
+                    initialData?.dns_resolver?.resolvers?.join("\n") ?? ""
+                  }
+                  rows={2}
+                />
+              </FormField>
+              <FormField
+                label="Fallback Resolvers"
+                htmlFor="dns_fallbacks"
+                helperText="Fallback DNS servers (one per line)."
+              >
+                <Textarea
+                  id="dns_fallbacks"
+                  name="dns_fallbacks"
+                  placeholder="8.8.4.4"
+                  defaultValue={
+                    initialData?.dns_resolver?.fallbacks?.join("\n") ?? ""
+                  }
+                  rows={1}
+                />
+              </FormField>
+              <FormField label="Timeout" htmlFor="dns_timeout">
+                <Input
+                  id="dns_timeout"
+                  name="dns_timeout"
+                  placeholder="5s"
+                  defaultValue={initialData?.dns_resolver?.timeout ?? ""}
+                />
+              </FormField>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
       </Accordion>
 
       {/* Geo Blocking */}
-      <Accordion variant="outlined" defaultExpanded={!!initialData?.geoblock?.enabled}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography variant="subtitle2">Geo Blocking</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Stack spacing={2}>
-            <input type="hidden" name="geoblock_present" value="1" />
-            <FormControlLabel
-              control={<Switch name="geoblock_enabled" defaultChecked={initialData?.geoblock?.enabled ?? false} />}
-              label="Enable Geo Blocking"
-            />
-            <TextField
-              select
-              name="geoblock_mode"
-              label="Mode"
-              defaultValue={initialData?.geoblock_mode ?? "merge"}
-              size="small"
-              fullWidth
-            >
-              <MenuItem value="merge">Merge with global settings</MenuItem>
-              <MenuItem value="override">Override global settings</MenuItem>
-            </TextField>
-            <Typography variant="caption" color="text.secondary">Block Rules</Typography>
-            <TextField name="geoblock_block_countries" label="Block Countries" placeholder="CN, RU, KP" defaultValue={initialData?.geoblock?.block_countries?.join(", ") ?? ""} helperText="ISO 3166-1 alpha-2 codes, comma-separated" size="small" fullWidth />
-            <TextField name="geoblock_block_continents" label="Block Continents" placeholder="AF, AS" defaultValue={initialData?.geoblock?.block_continents?.join(", ") ?? ""} helperText="AF, AN, AS, EU, NA, OC, SA" size="small" fullWidth />
-            <TextField name="geoblock_block_asns" label="Block ASNs" placeholder="12345, 67890" defaultValue={initialData?.geoblock?.block_asns?.join(", ") ?? ""} size="small" fullWidth />
-            <TextField name="geoblock_block_cidrs" label="Block CIDRs" placeholder="192.0.2.0/24" defaultValue={initialData?.geoblock?.block_cidrs?.join(", ") ?? ""} size="small" fullWidth />
-            <TextField name="geoblock_block_ips" label="Block IPs" placeholder="203.0.113.1" defaultValue={initialData?.geoblock?.block_ips?.join(", ") ?? ""} size="small" fullWidth />
-            <Typography variant="caption" color="text.secondary">Allow Rules (override blocks)</Typography>
-            <TextField name="geoblock_allow_countries" label="Allow Countries" placeholder="US, DE" defaultValue={initialData?.geoblock?.allow_countries?.join(", ") ?? ""} size="small" fullWidth />
-            <TextField name="geoblock_allow_continents" label="Allow Continents" placeholder="EU, NA" defaultValue={initialData?.geoblock?.allow_continents?.join(", ") ?? ""} size="small" fullWidth />
-            <TextField name="geoblock_allow_asns" label="Allow ASNs" placeholder="11111" defaultValue={initialData?.geoblock?.allow_asns?.join(", ") ?? ""} size="small" fullWidth />
-            <TextField name="geoblock_allow_cidrs" label="Allow CIDRs" placeholder="10.0.0.0/8" defaultValue={initialData?.geoblock?.allow_cidrs?.join(", ") ?? ""} size="small" fullWidth />
-            <TextField name="geoblock_allow_ips" label="Allow IPs" placeholder="1.2.3.4" defaultValue={initialData?.geoblock?.allow_ips?.join(", ") ?? ""} size="small" fullWidth />
-            <Alert severity="info" sx={{ mt: 1 }}>
-              At L4, geo blocking uses the client&apos;s direct IP address (no X-Forwarded-For support). Blocked connections are immediately closed.
-            </Alert>
-          </Stack>
-        </AccordionDetails>
+      <Accordion
+        type="single"
+        collapsible
+        defaultValue={defaultGeoblockAccordion}
+        className="border rounded-md px-3"
+      >
+        <AccordionItem value="geoblock" className="border-b-0">
+          <AccordionTrigger className="text-sm font-medium">
+            Geo Blocking
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col gap-3 pt-1">
+              <input type="hidden" name="geoblock_present" value="1" />
+              <div className="flex items-center gap-2">
+                <Switch
+                  id="geoblock_enabled"
+                  name="geoblock_enabled"
+                  defaultChecked={initialData?.geoblock?.enabled ?? false}
+                />
+                <Label htmlFor="geoblock_enabled">Enable Geo Blocking</Label>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="geoblock_mode">Mode</Label>
+                <Select
+                  name="geoblock_mode"
+                  defaultValue={initialData?.geoblock_mode ?? "merge"}
+                >
+                  <SelectTrigger id="geoblock_mode">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="merge">
+                      Merge with global settings
+                    </SelectItem>
+                    <SelectItem value="override">
+                      Override global settings
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <p className="text-xs text-muted-foreground font-medium">
+                Block Rules
+              </p>
+              <FormField
+                label="Block Countries"
+                htmlFor="geoblock_block_countries"
+                helperText="ISO 3166-1 alpha-2 codes, comma-separated"
+              >
+                <Input
+                  id="geoblock_block_countries"
+                  name="geoblock_block_countries"
+                  placeholder="CN, RU, KP"
+                  defaultValue={
+                    initialData?.geoblock?.block_countries?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField
+                label="Block Continents"
+                htmlFor="geoblock_block_continents"
+                helperText="AF, AN, AS, EU, NA, OC, SA"
+              >
+                <Input
+                  id="geoblock_block_continents"
+                  name="geoblock_block_continents"
+                  placeholder="AF, AS"
+                  defaultValue={
+                    initialData?.geoblock?.block_continents?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Block ASNs" htmlFor="geoblock_block_asns">
+                <Input
+                  id="geoblock_block_asns"
+                  name="geoblock_block_asns"
+                  placeholder="12345, 67890"
+                  defaultValue={
+                    initialData?.geoblock?.block_asns?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Block CIDRs" htmlFor="geoblock_block_cidrs">
+                <Input
+                  id="geoblock_block_cidrs"
+                  name="geoblock_block_cidrs"
+                  placeholder="192.0.2.0/24"
+                  defaultValue={
+                    initialData?.geoblock?.block_cidrs?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Block IPs" htmlFor="geoblock_block_ips">
+                <Input
+                  id="geoblock_block_ips"
+                  name="geoblock_block_ips"
+                  placeholder="203.0.113.1"
+                  defaultValue={
+                    initialData?.geoblock?.block_ips?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <p className="text-xs text-muted-foreground font-medium">
+                Allow Rules (override blocks)
+              </p>
+              <FormField
+                label="Allow Countries"
+                htmlFor="geoblock_allow_countries"
+              >
+                <Input
+                  id="geoblock_allow_countries"
+                  name="geoblock_allow_countries"
+                  placeholder="US, DE"
+                  defaultValue={
+                    initialData?.geoblock?.allow_countries?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField
+                label="Allow Continents"
+                htmlFor="geoblock_allow_continents"
+              >
+                <Input
+                  id="geoblock_allow_continents"
+                  name="geoblock_allow_continents"
+                  placeholder="EU, NA"
+                  defaultValue={
+                    initialData?.geoblock?.allow_continents?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Allow ASNs" htmlFor="geoblock_allow_asns">
+                <Input
+                  id="geoblock_allow_asns"
+                  name="geoblock_allow_asns"
+                  placeholder="11111"
+                  defaultValue={
+                    initialData?.geoblock?.allow_asns?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Allow CIDRs" htmlFor="geoblock_allow_cidrs">
+                <Input
+                  id="geoblock_allow_cidrs"
+                  name="geoblock_allow_cidrs"
+                  placeholder="10.0.0.0/8"
+                  defaultValue={
+                    initialData?.geoblock?.allow_cidrs?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <FormField label="Allow IPs" htmlFor="geoblock_allow_ips">
+                <Input
+                  id="geoblock_allow_ips"
+                  name="geoblock_allow_ips"
+                  placeholder="1.2.3.4"
+                  defaultValue={
+                    initialData?.geoblock?.allow_ips?.join(", ") ?? ""
+                  }
+                />
+              </FormField>
+              <Alert className="mt-1">
+                <AlertDescription>
+                  At L4, geo blocking uses the client&apos;s direct IP address
+                  (no X-Forwarded-For support). Blocked connections are
+                  immediately closed.
+                </AlertDescription>
+              </Alert>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
       </Accordion>
 
       {/* Upstream DNS Resolution / Pinning */}
-      <Accordion variant="outlined" defaultExpanded={initialData?.upstream_dns_resolution?.enabled === true}>
-        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography variant="subtitle2">Upstream DNS Pinning</Typography>
-        </AccordionSummary>
-        <AccordionDetails>
-          <Stack spacing={2}>
-            <input type="hidden" name="upstream_dns_resolution_present" value="1" />
-            <Typography variant="body2" color="text.secondary">
-              When enabled, upstream hostnames are resolved to IP addresses at config time, pinning DNS resolution.
-            </Typography>
-            <TextField
-              select
-              name="upstream_dns_resolution_mode"
-              label="Resolution Mode"
-              defaultValue={initialData?.upstream_dns_resolution?.enabled === true ? "enabled" : initialData?.upstream_dns_resolution?.enabled === false ? "disabled" : "inherit"}
-              size="small"
-              fullWidth
-            >
-              <MenuItem value="inherit">Inherit from global settings</MenuItem>
-              <MenuItem value="enabled">Enabled</MenuItem>
-              <MenuItem value="disabled">Disabled</MenuItem>
-            </TextField>
-            <TextField
-              select
-              name="upstream_dns_resolution_family"
-              label="Address Family Preference"
-              defaultValue={initialData?.upstream_dns_resolution?.family ?? "inherit"}
-              size="small"
-              fullWidth
-            >
-              <MenuItem value="inherit">Inherit from global settings</MenuItem>
-              <MenuItem value="both">Both (IPv6 + IPv4)</MenuItem>
-              <MenuItem value="ipv6">IPv6 only</MenuItem>
-              <MenuItem value="ipv4">IPv4 only</MenuItem>
-            </TextField>
-          </Stack>
-        </AccordionDetails>
+      <Accordion
+        type="single"
+        collapsible
+        defaultValue={defaultUpstreamDnsAccordion}
+        className="border rounded-md px-3"
+      >
+        <AccordionItem value="upstream-dns" className="border-b-0">
+          <AccordionTrigger className="text-sm font-medium">
+            Upstream DNS Pinning
+          </AccordionTrigger>
+          <AccordionContent>
+            <div className="flex flex-col gap-3 pt-1">
+              <input
+                type="hidden"
+                name="upstream_dns_resolution_present"
+                value="1"
+              />
+              <p className="text-sm text-muted-foreground">
+                When enabled, upstream hostnames are resolved to IP addresses at
+                config time, pinning DNS resolution.
+              </p>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="upstream_dns_resolution_mode">
+                  Resolution Mode
+                </Label>
+                <Select
+                  name="upstream_dns_resolution_mode"
+                  defaultValue={
+                    initialData?.upstream_dns_resolution?.enabled === true
+                      ? "enabled"
+                      : initialData?.upstream_dns_resolution?.enabled === false
+                      ? "disabled"
+                      : "inherit"
+                  }
+                >
+                  <SelectTrigger id="upstream_dns_resolution_mode">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="inherit">
+                      Inherit from global settings
+                    </SelectItem>
+                    <SelectItem value="enabled">Enabled</SelectItem>
+                    <SelectItem value="disabled">Disabled</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="upstream_dns_resolution_family">
+                  Address Family Preference
+                </Label>
+                <Select
+                  name="upstream_dns_resolution_family"
+                  defaultValue={
+                    initialData?.upstream_dns_resolution?.family ?? "inherit"
+                  }
+                >
+                  <SelectTrigger id="upstream_dns_resolution_family">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="inherit">
+                      Inherit from global settings
+                    </SelectItem>
+                    <SelectItem value="both">Both (IPv6 + IPv4)</SelectItem>
+                    <SelectItem value="ipv6">IPv6 only</SelectItem>
+                    <SelectItem value="ipv4">IPv4 only</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
       </Accordion>
-    </Stack>
+    </form>
   );
 }
 
@@ -339,7 +763,10 @@ export function CreateL4HostDialog({
   onClose: () => void;
   initialData?: L4ProxyHost | null;
 }) {
-  const [state, formAction] = useFormState(createL4ProxyHostAction, INITIAL_ACTION_STATE);
+  const [state, formAction] = useFormState(
+    createL4ProxyHostAction,
+    INITIAL_ACTION_STATE
+  );
 
   useEffect(() => {
     if (state.status === "success") {
@@ -355,14 +782,18 @@ export function CreateL4HostDialog({
       maxWidth="sm"
       submitLabel="Create"
       onSubmit={() => {
-        (document.getElementById("create-l4-host-form") as HTMLFormElement)?.requestSubmit();
+        (
+          document.getElementById("create-l4-host-form") as HTMLFormElement
+        )?.requestSubmit();
       }}
     >
       <L4HostForm
         formId="create-l4-host-form"
         formAction={formAction}
         state={state}
-        initialData={initialData ? { ...initialData, name: `${initialData.name} (Copy)` } : null}
+        initialData={
+          initialData ? { ...initialData, name: `${initialData.name} (Copy)` } : null
+        }
       />
     </AppDialog>
   );
@@ -377,7 +808,10 @@ export function EditL4HostDialog({
   host: L4ProxyHost;
   onClose: () => void;
 }) {
-  const [state, formAction] = useFormState(updateL4ProxyHostAction.bind(null, host.id), INITIAL_ACTION_STATE);
+  const [state, formAction] = useFormState(
+    updateL4ProxyHostAction.bind(null, host.id),
+    INITIAL_ACTION_STATE
+  );
 
   useEffect(() => {
     if (state.status === "success") {
@@ -393,7 +827,9 @@ export function EditL4HostDialog({
       maxWidth="sm"
       submitLabel="Save Changes"
       onSubmit={() => {
-        (document.getElementById("edit-l4-host-form") as HTMLFormElement)?.requestSubmit();
+        (
+          document.getElementById("edit-l4-host-form") as HTMLFormElement
+        )?.requestSubmit();
       }}
     >
       <L4HostForm
@@ -415,7 +851,10 @@ export function DeleteL4HostDialog({
   host: L4ProxyHost;
   onClose: () => void;
 }) {
-  const [state, formAction] = useFormState(deleteL4ProxyHostAction.bind(null, host.id), INITIAL_ACTION_STATE);
+  const [state, formAction] = useFormState(
+    deleteL4ProxyHostAction.bind(null, host.id),
+    INITIAL_ACTION_STATE
+  );
 
   useEffect(() => {
     if (state.status === "success") {
@@ -431,36 +870,45 @@ export function DeleteL4HostDialog({
       maxWidth="sm"
       submitLabel="Delete"
       onSubmit={() => {
-        (document.getElementById("delete-l4-host-form") as HTMLFormElement)?.requestSubmit();
+        (
+          document.getElementById("delete-l4-host-form") as HTMLFormElement
+        )?.requestSubmit();
       }}
     >
-      <Stack component="form" id="delete-l4-host-form" action={formAction} spacing={2}>
+      <form
+        id="delete-l4-host-form"
+        action={formAction}
+        className="flex flex-col gap-4"
+      >
         {state.status !== "idle" && state.message && (
-          <Alert severity={state.status === "error" ? "error" : "success"}>
-            {state.message}
+          <Alert
+            variant={state.status === "error" ? "destructive" : "default"}
+          >
+            <AlertDescription>{state.message}</AlertDescription>
           </Alert>
         )}
-        <Typography variant="body1">
-          Are you sure you want to delete the L4 proxy host <strong>{host.name}</strong>?
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
+        <p className="text-sm">
+          Are you sure you want to delete the L4 proxy host{" "}
+          <strong>{host.name}</strong>?
+        </p>
+        <p className="text-sm text-muted-foreground">
           This will remove the configuration for:
-        </Typography>
-        <Box sx={{ pl: 2 }}>
-          <Typography variant="body2" color="text.secondary">
-            {"\u2022"} Protocol: {host.protocol.toUpperCase()}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {"\u2022"} Listen: {host.listen_address}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {"\u2022"} Upstreams: {host.upstreams.join(", ")}
-          </Typography>
-        </Box>
-        <Typography variant="body2" color="error.main" fontWeight={500}>
+        </p>
+        <div className="pl-4 flex flex-col gap-1">
+          <p className="text-sm text-muted-foreground">
+            &bull; Protocol: {host.protocol.toUpperCase()}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            &bull; Listen: {host.listen_address}
+          </p>
+          <p className="text-sm text-muted-foreground">
+            &bull; Upstreams: {host.upstreams.join(", ")}
+          </p>
+        </div>
+        <p className="text-sm text-destructive font-medium">
           This action cannot be undone.
-        </Typography>
-      </Stack>
+        </p>
+      </form>
     </AppDialog>
   );
 }
diff --git a/src/components/l4-proxy-hosts/L4PortsApplyBanner.tsx b/src/components/l4-proxy-hosts/L4PortsApplyBanner.tsx
index 4159b841..0b1626b7 100644
--- a/src/components/l4-proxy-hosts/L4PortsApplyBanner.tsx
+++ b/src/components/l4-proxy-hosts/L4PortsApplyBanner.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { Alert, Button, Chip, CircularProgress, Stack, Typography } from "@mui/material";
-import SyncIcon from "@mui/icons-material/Sync";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorIcon from "@mui/icons-material/Error";
+import { RefreshCw, CheckCircle, XCircle } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 
 type PortsDiff = {
   currentPorts: string[];
@@ -54,11 +55,15 @@ export function L4PortsApplyBanner({ refreshSignal }: { refreshSignal?: number }
 
   useEffect(() => {
     if (!data) return;
-    const shouldPoll = data.status.state === "pending" || data.status.state === "applying";
+    const shouldPoll =
+      data.status.state === "pending" || data.status.state === "applying";
     if (shouldPoll && !polling) {
       setPolling(true);
       const interval = setInterval(fetchStatus, 2000);
-      return () => { clearInterval(interval); setPolling(false); };
+      return () => {
+        clearInterval(interval);
+        setPolling(false);
+      };
     }
     if (!shouldPoll && polling) {
       setPolling(false);
@@ -88,54 +93,80 @@ export function L4PortsApplyBanner({ refreshSignal }: { refreshSignal?: number }
     return null;
   }
 
-  const stateIcon = {
-    idle: null,
-    pending: <CircularProgress size={16} />,
-    applying: <CircularProgress size={16} />,
-    applied: <CheckCircleIcon color="success" fontSize="small" />,
-    failed: <ErrorIcon color="error" fontSize="small" />,
-  }[status.state];
+  const isSpinning =
+    status.state === "pending" || status.state === "applying";
 
-  const severity = status.state === "failed" ? "error"
-    : status.state === "applied" ? "success"
-    : diff.needsApply ? "warning"
-    : "info";
+  const alertVariant: "default" | "destructive" =
+    status.state === "failed" ? "destructive" : "default";
+
+  const stateIcon =
+    status.state === "applied" ? (
+      <CheckCircle className="h-4 w-4 text-green-500" />
+    ) : status.state === "failed" ? (
+      <XCircle className="h-4 w-4 text-destructive" />
+    ) : isSpinning ? (
+      <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+    ) : null;
 
   return (
     <Alert
-      severity={severity}
-      icon={stateIcon || undefined}
-      action={
-        diff.needsApply ? (
-          <Button
-            color="inherit"
-            size="small"
-            onClick={handleApply}
-            disabled={applying || status.state === "pending" || status.state === "applying"}
-            startIcon={applying ? <CircularProgress size={14} /> : <SyncIcon />}
-          >
-            Apply Ports
-          </Button>
-        ) : undefined
-      }
+      variant={alertVariant}
+      className={cn(
+        "flex items-start gap-3",
+        status.state === "applied" && "border-green-500/50 text-green-700 dark:text-green-400",
+        diff.needsApply && status.state !== "failed" && status.state !== "applied" && "border-yellow-500/50 text-yellow-800 dark:text-yellow-400"
+      )}
     >
-      <Stack spacing={0.5}>
-        {diff.needsApply ? (
-          <Typography variant="body2">
-            <strong>Docker port changes pending.</strong> The caddy container needs to be recreated to expose L4 ports.
-            {diff.requiredPorts.length > 0 && (
-              <> Required: {diff.requiredPorts.map(p => (
-                <Chip key={p} label={p} size="small" variant="outlined" sx={{ ml: 0.5, height: 20, fontSize: "0.7rem" }} />
-              ))}</>
-            )}
-          </Typography>
-        ) : (
-          <Typography variant="body2">{status.message}</Typography>
-        )}
-        {status.state === "failed" && status.error && (
-          <Typography variant="caption" color="error.main">{status.error}</Typography>
-        )}
-      </Stack>
+      {stateIcon && <div className="mt-0.5 shrink-0">{stateIcon}</div>}
+      <AlertDescription className="flex-1">
+        <div className="flex flex-col gap-1">
+          {diff.needsApply ? (
+            <p className="text-sm">
+              <strong>Docker port changes pending.</strong> The caddy container
+              needs to be recreated to expose L4 ports.
+              {diff.requiredPorts.length > 0 && (
+                <span className="inline-flex items-center gap-1 ml-1 flex-wrap">
+                  Required:{" "}
+                  {diff.requiredPorts.map((p) => (
+                    <Badge
+                      key={p}
+                      variant="outline"
+                      className="text-[0.7rem] h-5 px-1.5"
+                    >
+                      {p}
+                    </Badge>
+                  ))}
+                </span>
+              )}
+            </p>
+          ) : (
+            <p className="text-sm">{status.message}</p>
+          )}
+          {status.state === "failed" && status.error && (
+            <p className="text-xs text-destructive">{status.error}</p>
+          )}
+        </div>
+      </AlertDescription>
+      {diff.needsApply && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleApply}
+          disabled={
+            applying ||
+            status.state === "pending" ||
+            status.state === "applying"
+          }
+          className="shrink-0 ml-auto"
+        >
+          {applying ? (
+            <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-current border-t-transparent mr-1.5" />
+          ) : (
+            <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
+          )}
+          Apply Ports
+        </Button>
+      )}
     </Alert>
   );
 }