From bca14e0fe024a7df93ee5ebeca3cbac46dcf29a0 Mon Sep 17 00:00:00 2001
From: fuomag9 <1580624+fuomag9@users.noreply.github.com>
Date: Sun, 22 Mar 2026 13:40:47 +0100
Subject: [PATCH] feat: rewrite proxy-host feature components with shadcn

Replace all MUI imports (Stack, Box, Typography, TextField, Switch, Checkbox,
Collapse, Accordion, Chip, etc.) with shadcn/ui + Tailwind equivalents across
all 13 proxy host component files. Lucide icons replace MUI icons throughout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../proxy-hosts/AuthentikFields.tsx           | 203 ++---
 .../proxy-hosts/DnsResolverFields.tsx         | 126 +--
 src/components/proxy-hosts/GeoBlockFields.tsx | 853 ++++++++----------
 src/components/proxy-hosts/HostDialogs.tsx    | 319 ++++---
 .../proxy-hosts/LoadBalancerFields.tsx        | 508 +++++------
 src/components/proxy-hosts/MtlsConfig.tsx     | 142 ++-
 .../proxy-hosts/RedirectsFields.tsx           | 115 ++-
 src/components/proxy-hosts/RewriteFields.tsx  |  23 +-
 .../proxy-hosts/SettingsToggles.tsx           | 109 +--
 .../UpstreamDnsResolutionFields.tsx           | 145 +--
 src/components/proxy-hosts/UpstreamInput.tsx  |  98 +-
 src/components/proxy-hosts/WafFields.tsx      | 375 ++++----
 .../proxy-hosts/WafRuleExclusions.tsx         |  66 +-
 13 files changed, 1394 insertions(+), 1688 deletions(-)

diff --git a/src/components/proxy-hosts/AuthentikFields.tsx b/src/components/proxy-hosts/AuthentikFields.tsx
index 5a3c0b90..ed1c5abe 100644
--- a/src/components/proxy-hosts/AuthentikFields.tsx
+++ b/src/components/proxy-hosts/AuthentikFields.tsx
@@ -1,8 +1,11 @@
-
-import { Box, Checkbox, Collapse, FormControlLabel, Stack, Switch, TextField, Typography } from "@mui/material";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
 import { useState } from "react";
-import { AuthentikSettings } from "@/src/lib/settings";
-import { ProxyHost } from "@/src/lib/models/proxy-hosts";
+import { AuthentikSettings } from "@/lib/settings";
+import { ProxyHost } from "@/lib/models/proxy-hosts";
 
 const AUTHENTIK_DEFAULT_HEADERS = [
     "X-Authentik-Username",
@@ -35,26 +38,28 @@ function HiddenCheckboxField({
     helperText?: string;
 }) {
     return (
-        <Box>
+        <div>
             <input type="hidden" name={`${name}_present`} value="1" />
-            <FormControlLabel
-                control={
-                    <Checkbox
-                        name={name}
-                        defaultChecked={defaultChecked}
-                        disabled={disabled}
-                        size="small"
-                    />
-                }
-                label={<Typography variant="body2">{label}</Typography>}
-                disabled={disabled}
-            />
+            <div className={cn("flex items-start gap-2", disabled && "opacity-50")}>
+                <Checkbox
+                    id={`checkbox-${name}`}
+                    name={name}
+                    defaultChecked={defaultChecked}
+                    disabled={disabled}
+                />
+                <label
+                    htmlFor={`checkbox-${name}`}
+                    className={cn("text-sm cursor-pointer", disabled && "cursor-not-allowed")}
+                >
+                    {label}
+                </label>
+            </div>
             {helperText && (
-                <Typography variant="caption" color="text.secondary" sx={{ display: "block", ml: 4, mt: -0.5 }}>
+                <p className="text-xs text-muted-foreground ml-6 -mt-0.5">
                     {helperText}
-                </Typography>
+                </p>
             )}
-        </Box>
+        </div>
     );
 }
 
@@ -77,90 +82,86 @@ export function AuthentikFields({
     const setHostHeaderDefault = initial?.setOutpostHostHeader ?? true;
 
     return (
-        <Box
-            sx={{
-                borderRadius: 2,
-                border: "1px solid",
-                borderColor: "primary.main",
-                bgcolor: "rgba(99, 102, 241, 0.05)",
-                p: 2.5
-            }}
-        >
+        <div className="rounded-lg border border-primary bg-primary/5 p-5">
             <input type="hidden" name="authentik_present" value="1" />
             <input type="hidden" name="authentik_enabled_present" value="1" />
-            <Stack spacing={2}>
-                <Stack direction="row" alignItems="center" justifyContent="space-between">
-                    <Box>
-                        <Typography variant="subtitle1" fontWeight={600}>
-                            Authentik Forward Auth
-                        </Typography>
-                        <Typography variant="body2" color="text.secondary">
-                            Proxy authentication via Authentik outpost
-                        </Typography>
-                    </Box>
+            <div className="flex flex-col gap-4">
+                <div className="flex flex-row items-center justify-between">
+                    <div>
+                        <p className="text-sm font-semibold">Authentik Forward Auth</p>
+                        <p className="text-sm text-muted-foreground">Proxy authentication via Authentik outpost</p>
+                    </div>
                     <Switch
                         name="authentik_enabled"
                         checked={enabled}
-                        onChange={(_, checked) => setEnabled(checked)}
+                        onCheckedChange={setEnabled}
                     />
-                </Stack>
+                </div>
 
-                <Collapse in={enabled} timeout="auto" unmountOnExit>
-                    <Stack spacing={2}>
-                        <TextField
-                            name="authentik_outpost_domain"
-                            label="Outpost Domain"
-                            placeholder="outpost.goauthentik.io"
-                            defaultValue={initial?.outpostDomain ?? defaults?.outpostDomain ?? ""}
-                            required={enabled}
-                            disabled={!enabled}
-                            fullWidth
-                        />
-                        <TextField
-                            name="authentik_outpost_upstream"
-                            label="Outpost Upstream URL"
-                            placeholder="https://outpost.internal:9000"
-                            defaultValue={initial?.outpostUpstream ?? defaults?.outpostUpstream ?? ""}
-                            required={enabled}
-                            disabled={!enabled}
-                            fullWidth
-                        />
-                        {/* ... other fields ... */}
-                        <TextField
-                            name="authentik_auth_endpoint"
-                            label="Auth Endpoint (Optional)"
-                            placeholder="/outpost.goauthentik.io/auth/caddy"
-                            defaultValue={initial?.authEndpoint ?? defaults?.authEndpoint ?? ""}
-                            disabled={!enabled}
-                            fullWidth
-                        />
-                        <TextField
-                            name="authentik_copy_headers"
-                            label="Headers to Copy"
-                            defaultValue={copyHeadersValue}
-                            disabled={!enabled}
-                            multiline
-                            minRows={3}
-                            fullWidth
-                        />
-                        <TextField
-                            name="authentik_trusted_proxies"
-                            label="Trusted Proxies"
-                            defaultValue={trustedProxiesValue}
-                            disabled={!enabled}
-                            fullWidth
-                        />
-                        <TextField
-                            name="authentik_protected_paths"
-                            label="Protected Paths (Optional)"
-                            placeholder="/secret/*, /admin/*"
-                            helperText="Leave empty to protect entire domain. Specify paths to protect specific routes only."
-                            defaultValue={initial?.protectedPaths?.join(", ") ?? ""}
-                            disabled={!enabled}
-                            multiline
-                            minRows={2}
-                            fullWidth
-                        />
+                <div className={cn(
+                    "overflow-hidden transition-all duration-200",
+                    enabled ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+                )}>
+                    <div className="flex flex-col gap-4">
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Outpost Domain</label>
+                            <Input
+                                name="authentik_outpost_domain"
+                                placeholder="outpost.goauthentik.io"
+                                defaultValue={initial?.outpostDomain ?? defaults?.outpostDomain ?? ""}
+                                required={enabled}
+                                disabled={!enabled}
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Outpost Upstream URL</label>
+                            <Input
+                                name="authentik_outpost_upstream"
+                                placeholder="https://outpost.internal:9000"
+                                defaultValue={initial?.outpostUpstream ?? defaults?.outpostUpstream ?? ""}
+                                required={enabled}
+                                disabled={!enabled}
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Auth Endpoint (Optional)</label>
+                            <Input
+                                name="authentik_auth_endpoint"
+                                placeholder="/outpost.goauthentik.io/auth/caddy"
+                                defaultValue={initial?.authEndpoint ?? defaults?.authEndpoint ?? ""}
+                                disabled={!enabled}
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Headers to Copy</label>
+                            <Textarea
+                                name="authentik_copy_headers"
+                                defaultValue={copyHeadersValue}
+                                disabled={!enabled}
+                                rows={3}
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Trusted Proxies</label>
+                            <Input
+                                name="authentik_trusted_proxies"
+                                defaultValue={trustedProxiesValue}
+                                disabled={!enabled}
+                            />
+                        </div>
+                        <div>
+                            <label className="text-sm font-medium mb-1 block">Protected Paths (Optional)</label>
+                            <Textarea
+                                name="authentik_protected_paths"
+                                placeholder="/secret/*, /admin/*"
+                                defaultValue={initial?.protectedPaths?.join(", ") ?? ""}
+                                disabled={!enabled}
+                                rows={2}
+                            />
+                            <p className="text-xs text-muted-foreground mt-1">
+                                Leave empty to protect entire domain. Specify paths to protect specific routes only.
+                            </p>
+                        </div>
                         <HiddenCheckboxField
                             name="authentik_set_host_header"
                             defaultChecked={setHostHeaderDefault}
@@ -168,9 +169,9 @@ export function AuthentikFields({
                             disabled={!enabled}
                             helperText="Recommended: Keep enabled. Only disable if using IP-based outpost access or troubleshooting routing issues."
                         />
-                    </Stack>
-                </Collapse>
-            </Stack>
-        </Box>
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 }
diff --git a/src/components/proxy-hosts/DnsResolverFields.tsx b/src/components/proxy-hosts/DnsResolverFields.tsx
index 82ef9c5f..44468b89 100644
--- a/src/components/proxy-hosts/DnsResolverFields.tsx
+++ b/src/components/proxy-hosts/DnsResolverFields.tsx
@@ -1,6 +1,10 @@
-import { Box, Collapse, Stack, Switch, TextField, Typography, Alert } from "@mui/material";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
 import { useState } from "react";
-import { ProxyHost } from "@/src/lib/models/proxy-hosts";
+import { ProxyHost } from "@/lib/models/proxy-hosts";
 
 export function DnsResolverFields({
   dnsResolver
@@ -11,75 +15,71 @@ export function DnsResolverFields({
   const [enabled, setEnabled] = useState(initial?.enabled ?? false);
 
   return (
-    <Box
-      sx={{
-        borderRadius: 2,
-        border: "1px solid",
-        borderColor: "warning.main",
-        bgcolor: "rgba(237, 108, 2, 0.05)",
-        p: 2.5
-      }}
-    >
+    <div className="rounded-lg border border-yellow-500/60 bg-yellow-500/5 p-5">
       <input type="hidden" name="dns_present" value="1" />
       <input type="hidden" name="dns_enabled_present" value="1" />
-      <Stack spacing={2}>
-        <Stack direction="row" alignItems="center" justifyContent="space-between">
-          <Box>
-            <Typography variant="subtitle1" fontWeight={600}>
-              Custom DNS Resolvers
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row items-center justify-between">
+          <div>
+            <p className="text-sm font-semibold">Custom DNS Resolvers</p>
+            <p className="text-sm text-muted-foreground">
               Configure per-host DNS resolution for upstream discovery and health checks
-            </Typography>
-          </Box>
+            </p>
+          </div>
           <Switch
             name="dns_enabled"
             checked={enabled}
-            onChange={(_, checked) => setEnabled(checked)}
+            onCheckedChange={setEnabled}
           />
-        </Stack>
+        </div>
 
-        <Collapse in={enabled} timeout="auto" unmountOnExit>
-          <Stack spacing={2.5}>
-            <TextField
-              name="dns_resolvers"
-              label="DNS Resolvers"
-              placeholder={"1.1.1.1\n8.8.8.8"}
-              defaultValue={initial?.resolvers?.join("\n") ?? ""}
-              helperText="One resolver per line (e.g., 1.1.1.1, 8.8.8.8). Used for dynamic upstream DNS resolution."
-              multiline
-              minRows={2}
-              fullWidth
-              size="small"
-            />
-            <TextField
-              name="dns_fallbacks"
-              label="Fallback DNS Resolvers (Optional)"
-              placeholder={"8.8.4.4\n1.0.0.1"}
-              defaultValue={initial?.fallbacks?.join("\n") ?? ""}
-              helperText="Fallback resolvers if primary fails. One per line."
-              multiline
-              minRows={2}
-              fullWidth
-              size="small"
-            />
-            <TextField
-              name="dns_timeout"
-              label="DNS Query Timeout"
-              placeholder="5s"
-              defaultValue={initial?.timeout ?? ""}
-              helperText="Timeout for DNS queries (e.g., 5s, 10s)"
-              fullWidth
-              size="small"
-            />
-            <Alert severity="info">
-              Per-host DNS resolvers override global settings for this specific proxy host.
-              Useful for upstream services that require specific DNS resolution (e.g., internal DNS, service discovery).
-              Common resolvers: 1.1.1.1 (Cloudflare), 8.8.8.8 (Google), 9.9.9.9 (Quad9).
+        <div className={cn(
+          "overflow-hidden transition-all duration-200",
+          enabled ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+        )}>
+          <div className="flex flex-col gap-5">
+            <div>
+              <label className="text-sm font-medium mb-1 block">DNS Resolvers</label>
+              <Textarea
+                name="dns_resolvers"
+                placeholder={"1.1.1.1\n8.8.8.8"}
+                defaultValue={initial?.resolvers?.join("\n") ?? ""}
+                rows={2}
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                One resolver per line (e.g., 1.1.1.1, 8.8.8.8). Used for dynamic upstream DNS resolution.
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium mb-1 block">Fallback DNS Resolvers (Optional)</label>
+              <Textarea
+                name="dns_fallbacks"
+                placeholder={"8.8.4.4\n1.0.0.1"}
+                defaultValue={initial?.fallbacks?.join("\n") ?? ""}
+                rows={2}
+              />
+              <p className="text-xs text-muted-foreground mt-1">Fallback resolvers if primary fails. One per line.</p>
+            </div>
+            <div>
+              <label className="text-sm font-medium mb-1 block">DNS Query Timeout</label>
+              <Input
+                name="dns_timeout"
+                placeholder="5s"
+                defaultValue={initial?.timeout ?? ""}
+                className="h-8 text-sm"
+              />
+              <p className="text-xs text-muted-foreground mt-1">Timeout for DNS queries (e.g., 5s, 10s)</p>
+            </div>
+            <Alert>
+              <AlertDescription>
+                Per-host DNS resolvers override global settings for this specific proxy host.
+                Useful for upstream services that require specific DNS resolution (e.g., internal DNS, service discovery).
+                Common resolvers: 1.1.1.1 (Cloudflare), 8.8.8.8 (Google), 9.9.9.9 (Quad9).
+              </AlertDescription>
             </Alert>
-          </Stack>
-        </Collapse>
-      </Stack>
-    </Box>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/GeoBlockFields.tsx b/src/components/proxy-hosts/GeoBlockFields.tsx
index 179b3300..3cae7448 100644
--- a/src/components/proxy-hosts/GeoBlockFields.tsx
+++ b/src/components/proxy-hosts/GeoBlockFields.tsx
@@ -2,39 +2,21 @@
 
 import {
   Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  CircularProgress,
-  Collapse,
-  Divider,
-  FormControlLabel,
-  Grid,
-  IconButton,
-  InputAdornment,
-  Stack,
-  Switch,
-  Tab,
-  Tabs,
-  TextField,
-  Tooltip,
-  Typography
-} from "@mui/material";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorIcon from "@mui/icons-material/Error";
-import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import PublicIcon from "@mui/icons-material/Public";
-import SearchIcon from "@mui/icons-material/Search";
-import CloseIcon from "@mui/icons-material/Close";
-import { useState, useEffect, useMemo, useCallback, SyntheticEvent } from "react";
-import { GeoBlockSettings } from "@/src/lib/settings";
-import { GeoBlockMode } from "@/src/lib/models/proxy-hosts";
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { Globe, X } from "lucide-react";
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { GeoBlockSettings } from "@/lib/settings";
+import { GeoBlockMode } from "@/lib/models/proxy-hosts";
 import { COUNTRIES, flagEmoji } from "./countries";
 
 // ─── GeoIpStatus ─────────────────────────────────────────────────────────────
@@ -54,14 +36,12 @@ function GeoIpStatus() {
   }, []);
 
   if (loading) {
-    return <CircularProgress size={12} sx={{ color: "text.disabled" }} />;
+    return <span className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent inline-block" />;
   }
 
   const allLoaded = status?.country && status?.asn;
   const noneLoaded = !status?.country && !status?.asn;
 
-  const color = allLoaded ? "success" : noneLoaded ? "error" : "warning";
-  const Icon = allLoaded ? CheckCircleIcon : noneLoaded ? ErrorIcon : WarningAmberIcon;
   const label = allLoaded ? "GeoIP ready" : noneLoaded ? "GeoIP missing" : "GeoIP partial";
   const tooltip = noneLoaded
     ? "GeoIP databases not found — country/continent/ASN blocking will not work. Enable the geoipupdate service."
@@ -72,16 +52,17 @@ function GeoIpStatus() {
     : "GeoLite2-Country and GeoLite2-ASN databases loaded";
 
   return (
-    <Tooltip title={tooltip} placement="right">
-      <Chip
-        size="small"
-        icon={<Icon sx={{ fontSize: "14px !important" }} />}
-        label={label}
-        color={color}
-        variant="outlined"
-        sx={{ height: 22, fontSize: "0.7rem", fontWeight: 600, letterSpacing: 0.3, cursor: "default", "& .MuiChip-icon": { ml: "6px" } }}
-      />
-    </Tooltip>
+    <span title={tooltip}>
+      <Badge
+        variant="outline"
+        className={cn(
+          "h-[22px] text-[0.7rem] font-semibold tracking-wide cursor-default",
+          allLoaded ? "border-green-500 text-green-600" : noneLoaded ? "border-destructive text-destructive" : "border-yellow-500 text-yellow-600"
+        )}
+      >
+        {label}
+      </Badge>
+    </span>
   );
 }
 
@@ -145,162 +126,131 @@ function CountryPicker({ name, initialValues = [], accentColor = "warning" }: Co
   const selectedInFiltered = filtered.filter((c) => selected.has(c.code)).length;
   const allFilteredSelected = filtered.length > 0 && selectedInFiltered === filtered.length;
 
+  const isWarning = accentColor === "warning";
+
   return (
-    <Box>
+    <div>
       <input type="hidden" name={name} value={[...selected].join(",")} />
 
       {/* Search */}
-      <TextField
-        fullWidth
-        size="small"
-        placeholder="Search by country name or code…"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-        slotProps={{
-          input: {
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon sx={{ fontSize: 16, color: "text.disabled" }} />
-              </InputAdornment>
-            ),
-            endAdornment: search ? (
-              <InputAdornment position="end">
-                <IconButton size="small" onClick={() => setSearch("")} edge="end" sx={{ p: 0.25 }}>
-                  <CloseIcon sx={{ fontSize: 14 }} />
-                </IconButton>
-              </InputAdornment>
-            ) : null,
-          },
-        }}
-        sx={{ mb: 0.75 }}
-      />
+      <div className="relative mb-1.5">
+        <Input
+          placeholder="Search by country name or code…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="h-8 text-sm pr-8"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => setSearch("")}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        )}
+      </div>
 
       {/* Toolbar */}
-      <Stack direction="row" alignItems="center" justifyContent="space-between" mb={0.75}>
-        <Typography variant="caption" color="text.secondary">
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-xs text-muted-foreground">
           {selected.size > 0 ? (
             <>{selected.size} selected{search && `, ${selectedInFiltered} shown`}</>
           ) : (
-            <Box component="span" sx={{ opacity: 0.5 }}>None selected</Box>
+            <span className="opacity-50">None selected</span>
           )}
-        </Typography>
-        <Stack direction="row" spacing={0.25}>
+        </span>
+        <div className="flex items-center gap-0.5">
           <Button
-            size="small"
+            type="button"
+            variant="ghost"
+            size="sm"
             onClick={selectFiltered}
             disabled={allFilteredSelected}
-            sx={{ fontSize: "0.7rem", py: 0.25, px: 0.75, minWidth: 0, textTransform: "none" }}
+            className="text-[0.7rem] py-0.5 px-1.5 h-auto"
           >
             {search ? "Select matching" : "Select all"}
           </Button>
-          <Typography variant="caption" color="text.disabled" sx={{ alignSelf: "center" }}>·</Typography>
+          <span className="text-xs text-muted-foreground">·</span>
           <Button
-            size="small"
+            type="button"
+            variant="ghost"
+            size="sm"
             onClick={clearFiltered}
             disabled={selectedInFiltered === 0}
-            sx={{ fontSize: "0.7rem", py: 0.25, px: 0.75, minWidth: 0, textTransform: "none" }}
+            className="text-[0.7rem] py-0.5 px-1.5 h-auto"
           >
             {search ? "Clear matching" : "Clear all"}
           </Button>
-        </Stack>
-      </Stack>
+        </div>
+      </div>
 
       {/* Grid */}
-      <Box
-        sx={{
-          maxHeight: 220,
-          overflowY: "auto",
-          display: "flex",
-          flexWrap: "wrap",
-          gap: 0.5,
-          p: 0.75,
-          borderRadius: 1.5,
-          border: "1px solid",
-          borderColor: "divider",
-          bgcolor: (t) => t.palette.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.015)",
-          "&::-webkit-scrollbar": { width: 5 },
-          "&::-webkit-scrollbar-thumb": { borderRadius: 3, bgcolor: "divider" },
-          "&::-webkit-scrollbar-track": { bgcolor: "transparent" },
-        }}
-      >
+      <div className="max-h-[220px] overflow-y-auto flex flex-wrap gap-1 p-1.5 rounded-xl border border-border bg-black/[0.015] dark:bg-white/[0.02]">
         {filtered.length === 0 ? (
-          <Typography variant="caption" color="text.disabled" sx={{ p: 0.5 }}>
+          <span className="text-xs text-muted-foreground p-1">
             No countries match &ldquo;{search}&rdquo;
-          </Typography>
+          </span>
         ) : (
           filtered.map((country) => {
             const isSelected = selected.has(country.code);
             return (
-              <Chip
+              <button
                 key={country.code}
-                label={
-                  <Box component="span" sx={{ display: "flex", alignItems: "center", gap: "4px" }}>
-                    <Box component="span" sx={{ fontSize: "0.85rem", lineHeight: 1 }}>
-                      {flagEmoji(country.code)}
-                    </Box>
-                    <Box component="span">{country.name}</Box>
-                    <Box component="span" sx={{ opacity: 0.55, fontSize: "0.6rem", fontFamily: "monospace" }}>
-                      {country.code}
-                    </Box>
-                  </Box>
-                }
-                size="small"
+                type="button"
                 onClick={() => toggle(country.code)}
-                color={isSelected ? accentColor : "default"}
-                variant={isSelected ? "filled" : "outlined"}
-                sx={{
-                  cursor: "pointer",
-                  fontSize: "0.72rem",
-                  height: 26,
-                  transition: "all 0.1s ease",
-                  "& .MuiChip-label": { px: 0.75 },
-                  ...(!isSelected && {
-                    borderColor: "divider",
-                    "&:hover": { borderColor: "text.disabled", bgcolor: "action.hover" },
-                  }),
-                  ...(isSelected && {
-                    fontWeight: 600,
-                    boxShadow: accentColor === "warning"
-                      ? "0 0 0 1px rgba(237,108,2,0.3)"
-                      : "0 0 0 1px rgba(46,125,50,0.3)",
-                  }),
-                }}
-              />
+                className={cn(
+                  "inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs border transition-all duration-100 cursor-pointer h-[26px]",
+                  isSelected
+                    ? isWarning
+                      ? "border-yellow-500 bg-yellow-500/10 font-semibold text-yellow-700 dark:text-yellow-400"
+                      : "border-green-500 bg-green-500/10 font-semibold text-green-700 dark:text-green-400"
+                    : "border-border hover:border-muted-foreground hover:bg-accent"
+                )}
+              >
+                <span className="text-[0.85rem] leading-none">{flagEmoji(country.code)}</span>
+                <span>{country.name}</span>
+                <span className="opacity-55 text-[0.6rem] font-mono">{country.code}</span>
+              </button>
             );
           })
         )}
-      </Box>
+      </div>
 
       {/* Selected summary chips (shown when search is active and selected items are hidden) */}
       {search && selected.size > 0 && (
-        <Box mt={0.75}>
-          <Typography variant="caption" color="text.disabled" display="block" mb={0.5}>
-            All selected ({selected.size}):
-          </Typography>
-          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5, maxHeight: 72, overflowY: "auto" }}>
+        <div className="mt-1.5">
+          <span className="text-xs text-muted-foreground block mb-1">All selected ({selected.size}):</span>
+          <div className="flex flex-wrap gap-1 max-h-[72px] overflow-y-auto">
             {[...selected].map((code) => {
               const country = COUNTRIES.find((c) => c.code === code);
               return (
-                <Chip
+                <Badge
                   key={code}
-                  label={
-                    <Box component="span" sx={{ display: "flex", alignItems: "center", gap: "3px" }}>
-                      <Box component="span" sx={{ fontSize: "0.8rem" }}>{flagEmoji(code)}</Box>
-                      <Box component="span">{country?.name ?? code}</Box>
-                    </Box>
-                  }
-                  size="small"
-                  onDelete={() => toggle(code)}
-                  color={accentColor}
-                  variant="filled"
-                  sx={{ fontSize: "0.7rem", height: 22, fontWeight: 600, "& .MuiChip-label": { px: 0.6 } }}
-                />
+                  variant="secondary"
+                  className={cn(
+                    "gap-1 pr-1 text-[0.7rem] h-[22px] font-semibold",
+                    isWarning
+                      ? "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400"
+                      : "bg-green-500/10 text-green-700 dark:text-green-400"
+                  )}
+                >
+                  <span className="text-[0.8rem]">{flagEmoji(code)}</span>
+                  {country?.name ?? code}
+                  <button
+                    type="button"
+                    onClick={() => toggle(code)}
+                    className="rounded-full hover:bg-destructive/20 p-0.5"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </Badge>
               );
             })}
-          </Box>
-        </Box>
+          </div>
+        </div>
       )}
-    </Box>
+    </div>
   );
 }
 
@@ -329,102 +279,70 @@ function ContinentPicker({ name, initialValues = [], accentColor = "warning" }:
   const isWarning = accentColor === "warning";
 
   return (
-    <Box>
+    <div>
       <input type="hidden" name={name} value={[...selected].join(",")} />
-      <Stack direction="row" alignItems="center" justifyContent="space-between" mb={0.75}>
-        <Typography variant="caption" color="text.secondary">
-          {selected.size > 0 ? `${selected.size} selected` : <Box component="span" sx={{ opacity: 0.5 }}>None selected</Box>}
-        </Typography>
-        <Stack direction="row" spacing={0.25}>
+      <div className="flex items-center justify-between mb-1.5">
+        <span className="text-xs text-muted-foreground">
+          {selected.size > 0 ? `${selected.size} selected` : <span className="opacity-50">None selected</span>}
+        </span>
+        <div className="flex items-center gap-0.5">
           <Button
-            size="small"
+            type="button"
+            variant="ghost"
+            size="sm"
             onClick={() => setSelected(new Set(CONTINENTS.map((c) => c.code)))}
             disabled={selected.size === CONTINENTS.length}
-            sx={{ fontSize: "0.7rem", py: 0.25, px: 0.75, minWidth: 0, textTransform: "none" }}
+            className="text-[0.7rem] py-0.5 px-1.5 h-auto"
           >
             Select all
           </Button>
-          <Typography variant="caption" color="text.disabled" sx={{ alignSelf: "center" }}>·</Typography>
+          <span className="text-xs text-muted-foreground">·</span>
           <Button
-            size="small"
+            type="button"
+            variant="ghost"
+            size="sm"
             onClick={() => setSelected(new Set())}
             disabled={selected.size === 0}
-            sx={{ fontSize: "0.7rem", py: 0.25, px: 0.75, minWidth: 0, textTransform: "none" }}
+            className="text-[0.7rem] py-0.5 px-1.5 h-auto"
           >
             Clear all
           </Button>
-        </Stack>
-      </Stack>
-      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.75 }}>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-1.5">
         {CONTINENTS.map((c) => {
           const isSelected = selected.has(c.code);
           return (
-            <Box
+            <button
               key={c.code}
+              type="button"
               onClick={() => toggle(c.code)}
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                gap: 0.75,
-                px: 1.25,
-                py: 0.75,
-                borderRadius: 1.5,
-                border: "1.5px solid",
-                borderColor: isSelected
-                  ? isWarning ? "warning.main" : "success.main"
-                  : "divider",
-                bgcolor: isSelected
-                  ? (t) => t.palette.mode === "dark"
-                    ? isWarning ? "rgba(237,108,2,0.15)" : "rgba(46,125,50,0.15)"
-                    : isWarning ? "rgba(237,108,2,0.08)" : "rgba(46,125,50,0.08)"
-                  : "transparent",
-                cursor: "pointer",
-                userSelect: "none",
-                transition: "all 0.12s ease",
-                "&:hover": {
-                  borderColor: isSelected
-                    ? isWarning ? "warning.dark" : "success.dark"
-                    : "text.disabled",
-                  bgcolor: isSelected
-                    ? (t) => t.palette.mode === "dark"
-                      ? isWarning ? "rgba(237,108,2,0.22)" : "rgba(46,125,50,0.22)"
-                      : isWarning ? "rgba(237,108,2,0.13)" : "rgba(46,125,50,0.13)"
-                    : "action.hover",
-                },
-                ...(isSelected && {
-                  boxShadow: isWarning
-                    ? "0 0 0 1px rgba(237,108,2,0.25)"
-                    : "0 0 0 1px rgba(46,125,50,0.25)",
-                }),
-              }}
+              className={cn(
+                "flex items-center gap-1.5 px-2.5 py-1.5 rounded-xl border-[1.5px] cursor-pointer select-none transition-all duration-100",
+                isSelected
+                  ? isWarning
+                    ? "border-yellow-500 bg-yellow-500/10 shadow-[0_0_0_1px_rgba(237,108,2,0.25)]"
+                    : "border-green-500 bg-green-500/10 shadow-[0_0_0_1px_rgba(46,125,50,0.25)]"
+                  : "border-border hover:border-muted-foreground hover:bg-accent"
+              )}
             >
-              <Typography sx={{ fontSize: "1rem", lineHeight: 1 }}>{c.emoji}</Typography>
-              <Box>
-                <Typography
-                  variant="caption"
-                  fontWeight={isSelected ? 700 : 400}
-                  color={isSelected
-                    ? isWarning ? "warning.main" : "success.main"
-                    : "text.primary"}
-                  display="block"
-                  lineHeight={1.2}
-                  sx={{ transition: "all 0.12s ease" }}
-                >
+              <span className="text-base leading-none">{c.emoji}</span>
+              <div>
+                <span className={cn(
+                  "block text-xs leading-snug transition-all duration-100",
+                  isSelected
+                    ? isWarning ? "font-bold text-yellow-700 dark:text-yellow-400" : "font-bold text-green-700 dark:text-green-400"
+                    : "font-normal text-foreground"
+                )}>
                   {c.name}
-                </Typography>
-                <Typography
-                  variant="caption"
-                  color="text.disabled"
-                  sx={{ fontSize: "0.62rem", fontFamily: "monospace" }}
-                >
-                  {c.code}
-                </Typography>
-              </Box>
-            </Box>
+                </span>
+                <span className="text-[0.62rem] text-muted-foreground font-mono">{c.code}</span>
+              </div>
+            </button>
           );
         })}
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }
 
@@ -461,47 +379,47 @@ function TagInput({ name, label, initialValues = [], placeholder, helperText, va
   }
 
   return (
-    <Box>
+    <div>
       <input type="hidden" name={name} value={tags.join(",")} />
-      <TextField
-        label={label}
-        size="small"
-        fullWidth
-        value={inputValue}
-        placeholder={tags.length === 0 ? placeholder : undefined}
-        helperText={helperText}
-        onChange={(e) => setInputValue(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "," || e.key === " " || e.key === "Enter") {
-            e.preventDefault();
-            commitInput(inputValue);
-          }
-          if (e.key === "Backspace" && !inputValue && tags.length > 0) {
-            setTags((prev) => prev.slice(0, -1));
-          }
-        }}
-        onBlur={() => {
-          if (inputValue.trim()) commitInput(inputValue);
-        }}
-        slotProps={{
-          input: {
-            startAdornment: tags.length > 0 ? (
-              <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.4, mr: 0.5, my: 0.25 }}>
-                {tags.map((tag) => (
-                  <Chip
-                    key={tag}
-                    label={tag}
-                    size="small"
-                    onDelete={() => setTags((prev) => prev.filter((t) => t !== tag))}
-                    sx={{ height: 20, fontSize: "0.68rem", "& .MuiChip-label": { px: 0.6 }, "& .MuiChip-deleteIcon": { fontSize: 12 } }}
-                  />
-                ))}
-              </Box>
-            ) : undefined,
-          },
-        }}
-      />
-    </Box>
+      <label className="text-sm font-medium mb-1 block">{label}</label>
+      <div className={cn(
+        "flex flex-wrap items-center gap-1 min-h-9 border border-input rounded-md px-3 py-1 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        tags.length > 0 && "pb-1"
+      )}>
+        {tags.map((tag) => (
+          <Badge key={tag} variant="secondary" className="gap-1 pr-1 text-xs h-5">
+            {tag}
+            <button
+              type="button"
+              onClick={() => setTags((prev) => prev.filter((t) => t !== tag))}
+              className="rounded-full hover:bg-destructive/20 p-0.5"
+            >
+              <X className="h-2.5 w-2.5" />
+            </button>
+          </Badge>
+        ))}
+        <input
+          type="text"
+          value={inputValue}
+          placeholder={tags.length === 0 ? placeholder : undefined}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "," || e.key === " " || e.key === "Enter") {
+              e.preventDefault();
+              commitInput(inputValue);
+            }
+            if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+              setTags((prev) => prev.slice(0, -1));
+            }
+          }}
+          onBlur={() => {
+            if (inputValue.trim()) commitInput(inputValue);
+          }}
+          className="flex-1 min-w-[80px] bg-transparent outline-none text-sm placeholder:text-muted-foreground"
+        />
+      </div>
+      {helperText && <p className="text-xs text-muted-foreground mt-1">{helperText}</p>}
+    </div>
   );
 }
 
@@ -515,51 +433,55 @@ function ResponseHeadersEditor({ initialHeaders }: { initialHeaders: Record<stri
   );
 
   return (
-    <Box>
-      <Stack direction="row" alignItems="center" justifyContent="space-between" mb={rows.length > 0 ? 1 : 0}>
-        <Typography variant="body2" color="text.secondary">
-          Custom Response Headers
-        </Typography>
-        <Tooltip title="Add header">
-          <IconButton size="small" onClick={() => setRows((prev) => [...prev, { key: "", value: "" }])}>
-            <AddIcon fontSize="small" />
-          </IconButton>
-        </Tooltip>
-      </Stack>
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <p className="text-sm text-muted-foreground">Custom Response Headers</p>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7"
+          onClick={() => setRows((prev) => [...prev, { key: "", value: "" }])}
+          title="Add header"
+        >
+          <span className="text-base leading-none">+</span>
+        </Button>
+      </div>
       {rows.length === 0 ? (
-        <Typography variant="caption" color="text.disabled">
-          No custom headers — click + to add one.
-        </Typography>
+        <span className="text-xs text-muted-foreground">No custom headers — click + to add one.</span>
       ) : (
-        <Stack spacing={1}>
+        <div className="flex flex-col gap-2">
           {rows.map((row, i) => (
-            <Stack key={i} direction="row" spacing={1} alignItems="flex-start">
+            <div key={i} className="flex items-start gap-2">
               <input type="hidden" name="geoblock_response_headers_keys[]" value={row.key} />
               <input type="hidden" name="geoblock_response_headers_values[]" value={row.value} />
-              <TextField
-                label="Header"
+              <Input
+                placeholder="Header"
                 value={row.key}
                 onChange={(e) => setRows((prev) => prev.map((r, j) => j === i ? { ...r, key: e.target.value } : r))}
-                size="small"
-                fullWidth
+                className="h-8 text-sm"
               />
-              <TextField
-                label="Value"
+              <Input
+                placeholder="Value"
                 value={row.value}
                 onChange={(e) => setRows((prev) => prev.map((r, j) => j === i ? { ...r, value: e.target.value } : r))}
-                size="small"
-                fullWidth
+                className="h-8 text-sm"
               />
-              <Tooltip title="Remove">
-                <IconButton size="small" color="error" onClick={() => setRows((prev) => prev.filter((_, j) => j !== i))} sx={{ mt: 0.5 }}>
-                  <DeleteIcon fontSize="small" />
-                </IconButton>
-              </Tooltip>
-            </Stack>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive hover:text-destructive shrink-0"
+                onClick={() => setRows((prev) => prev.filter((_, j) => j !== i))}
+                title="Remove"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            </div>
           ))}
-        </Stack>
+        </div>
       )}
-    </Box>
+    </div>
   );
 }
 
@@ -579,34 +501,30 @@ function RulesPanel({ prefix, initial }: RulesPanelProps) {
   const ips = prefix === "block" ? (initial?.block_ips ?? []) : (initial?.allow_ips ?? []);
 
   return (
-    <Stack spacing={2.5}>
+    <div className="flex flex-col gap-6">
       {/* Countries */}
-      <Box>
-        <Typography variant="body2" fontWeight={600} mb={1} color="text.primary">
-          Countries
-        </Typography>
+      <div>
+        <p className="text-sm font-semibold mb-2">Countries</p>
         <CountryPicker
           name={`geoblock_${prefix}_countries`}
           initialValues={countries}
           accentColor={accentColor}
         />
-      </Box>
+      </div>
 
-      <Divider />
+      <div className="border-t border-border" />
 
       {/* Continents */}
-      <Box>
-        <Typography variant="body2" fontWeight={600} mb={1} color="text.primary">
-          Continents
-        </Typography>
+      <div>
+        <p className="text-sm font-semibold mb-2">Continents</p>
         <ContinentPicker
           name={`geoblock_${prefix}_continents`}
           initialValues={continents}
           accentColor={accentColor}
         />
-      </Box>
+      </div>
 
-      <Divider />
+      <div className="border-t border-border" />
 
       {/* ASNs */}
       <TagInput
@@ -619,27 +537,23 @@ function RulesPanel({ prefix, initial }: RulesPanelProps) {
       />
 
       {/* CIDRs + IPs */}
-      <Grid container spacing={2}>
-        <Grid size={6}>
-          <TagInput
-            name={`geoblock_${prefix}_cidrs`}
-            label="CIDRs"
-            initialValues={cidrs}
-            placeholder="10.0.0.0/8…"
-            helperText="Press Enter or comma to add"
-          />
-        </Grid>
-        <Grid size={6}>
-          <TagInput
-            name={`geoblock_${prefix}_ips`}
-            label="IP Addresses"
-            initialValues={ips}
-            placeholder="1.2.3.4…"
-            helperText="Press Enter or comma to add"
-          />
-        </Grid>
-      </Grid>
-    </Stack>
+      <div className="grid grid-cols-2 gap-4">
+        <TagInput
+          name={`geoblock_${prefix}_cidrs`}
+          label="CIDRs"
+          initialValues={cidrs}
+          placeholder="10.0.0.0/8…"
+          helperText="Press Enter or comma to add"
+        />
+        <TagInput
+          name={`geoblock_${prefix}_ips`}
+          label="IP Addresses"
+          initialValues={ips}
+          placeholder="1.2.3.4…"
+          helperText="Press Enter or comma to add"
+        />
+      </div>
+    </div>
   );
 }
 
@@ -657,138 +571,97 @@ export function GeoBlockFields({ initialValues, showModeSelector = true }: GeoBl
   const initial = initialValues?.geoblock ?? null;
   const [enabled, setEnabled] = useState(initial?.enabled ?? false);
   const [mode, setMode] = useState<GeoBlockMode>(initialValues?.geoblock_mode ?? "merge");
-  const [rulesTab, setRulesTab] = useState(0);
 
   return (
-    <Box
-      sx={{
-        borderRadius: 2,
-        border: "1px solid",
-        borderColor: "warning.main",
-        bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(237,108,2,0.06)" : "rgba(237,108,2,0.04)",
-        p: 2
-      }}
-    >
+    <div className="rounded-lg border border-yellow-500/60 bg-yellow-500/5 p-4">
       <input type="hidden" name="geoblock_present" value="1" />
 
       {/* Header */}
-      <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
-        <Stack direction="row" alignItems="flex-start" spacing={1.5} flex={1} minWidth={0}>
-          <Box
-            sx={{
-              mt: 0.25,
-              width: 32,
-              height: 32,
-              borderRadius: 1.5,
-              bgcolor: "warning.main",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0,
-            }}
-          >
-            <PublicIcon sx={{ fontSize: 18, color: "#fff" }} />
-          </Box>
-          <Box minWidth={0}>
-            <Stack direction="row" alignItems="center" spacing={1} flexWrap="wrap">
-              <Typography variant="subtitle1" fontWeight={700} lineHeight={1.3}>
-                Geo Blocking
-              </Typography>
+      <div className="flex flex-row items-start justify-between gap-2">
+        <div className="flex flex-row items-start gap-3 flex-1 min-w-0">
+          <div className="mt-0.5 w-8 h-8 rounded-xl bg-yellow-500 flex items-center justify-center shrink-0">
+            <Globe className="h-4 w-4 text-white" />
+          </div>
+          <div className="min-w-0">
+            <div className="flex flex-row items-center gap-2 flex-wrap">
+              <p className="text-sm font-bold leading-snug">Geo Blocking</p>
               <GeoIpStatus />
-            </Stack>
-            <Typography variant="body2" color="text.secondary" mt={0.25}>
+            </div>
+            <p className="text-sm text-muted-foreground mt-0.5">
               Block or allow traffic by country, continent, ASN, CIDR, or IP
-            </Typography>
-          </Box>
-        </Stack>
+            </p>
+          </div>
+        </div>
         <Switch
           name="geoblock_enabled"
           checked={enabled}
-          onChange={(_, checked) => setEnabled(checked)}
-          sx={{ flexShrink: 0 }}
+          onCheckedChange={setEnabled}
+          className="shrink-0"
         />
-      </Stack>
+      </div>
 
       {/* Mode selector */}
       <input type="hidden" name="geoblock_mode" value={mode} />
 
       {/* Detail fields */}
-      <Collapse in={enabled} timeout="auto" unmountOnExit>
-        <Box mt={2}>
-          {showModeSelector && (
-            <>
-              <Stack direction="row" spacing={1}>
-                {(["merge", "override"] as GeoBlockMode[]).map((v) => (
-                  <Box
-                    key={v}
-                    onClick={() => setMode(v)}
-                    sx={{
-                      flex: 1,
-                      py: 0.75,
-                      px: 1.5,
-                      borderRadius: 1.5,
-                      border: "1.5px solid",
-                      borderColor: mode === v ? "warning.main" : "divider",
-                      bgcolor: mode === v
-                        ? (theme) => theme.palette.mode === "dark" ? "rgba(237,108,2,0.12)" : "rgba(237,108,2,0.08)"
-                        : "transparent",
-                      cursor: "pointer",
-                      textAlign: "center",
-                      transition: "all 0.15s ease",
-                      userSelect: "none",
-                      "&:hover": {
-                        borderColor: mode === v ? "warning.main" : "text.disabled",
-                      },
-                    }}
-                  >
-                    <Typography
-                      variant="body2"
-                      fontWeight={mode === v ? 600 : 400}
-                      color={mode === v ? "warning.main" : "text.secondary"}
-                      sx={{ transition: "all 0.15s ease" }}
-                    >
-                      {v === "merge" ? "Merge with global" : "Override global"}
-                    </Typography>
-                  </Box>
-                ))}
-              </Stack>
-              <Divider sx={{ mt: 2, mb: 2 }} />
-            </>
-          )}
-          {!showModeSelector && <Divider sx={{ mb: 2 }} />}
+      <div className={cn(
+        "overflow-hidden transition-all duration-200",
+        enabled ? "max-h-[3000px] opacity-100 mt-4" : "max-h-0 opacity-0 pointer-events-none"
+      )}>
+        {showModeSelector && (
+          <>
+            <div className="flex gap-2">
+              {(["merge", "override"] as GeoBlockMode[]).map((v) => (
+                <div
+                  key={v}
+                  onClick={() => setMode(v)}
+                  className={cn(
+                    "flex-1 py-2 px-3 rounded-xl border-[1.5px] cursor-pointer text-center transition-all duration-150 select-none",
+                    mode === v
+                      ? "border-yellow-500 bg-yellow-500/10"
+                      : "border-border hover:border-muted-foreground"
+                  )}
+                >
+                  <p className={cn(
+                    "text-sm transition-all duration-150",
+                    mode === v ? "font-semibold text-yellow-700 dark:text-yellow-400" : "font-normal text-muted-foreground"
+                  )}>
+                    {v === "merge" ? "Merge with global" : "Override global"}
+                  </p>
+                </div>
+              ))}
+            </div>
+            <div className="border-t border-border mt-4 mb-4" />
+          </>
+        )}
+        {!showModeSelector && <div className="border-t border-border mb-4" />}
 
-          {/* Block / Allow tabs */}
-          <Tabs
-            value={rulesTab}
-            onChange={(_: SyntheticEvent, v: number) => setRulesTab(v)}
-            variant="fullWidth"
-            sx={{ mb: 2.5, "& .MuiTab-root": { textTransform: "none", fontWeight: 500 } }}
-          >
-            <Tab label="Block Rules" />
-            <Tab label="Allow Rules" />
-          </Tabs>
-
-          <Box hidden={rulesTab !== 0}>
+        {/* Block / Allow tabs */}
+        <Tabs defaultValue="block">
+          <TabsList className="w-full">
+            <TabsTrigger value="block" className="flex-1">Block Rules</TabsTrigger>
+            <TabsTrigger value="allow" className="flex-1">Allow Rules</TabsTrigger>
+          </TabsList>
+          <TabsContent value="block" className="mt-4">
             <RulesPanel prefix="block" initial={initial} />
-          </Box>
-
-          <Box hidden={rulesTab !== 1}>
-            <Box mb={1.5}>
-              <Typography variant="caption" color="text.secondary">
-                Allow rules take precedence over block rules.
-              </Typography>
-            </Box>
+          </TabsContent>
+          <TabsContent value="allow" className="mt-4">
+            <p className="text-xs text-muted-foreground mb-3">
+              Allow rules take precedence over block rules.
+            </p>
             <RulesPanel prefix="allow" initial={initial} />
-          </Box>
+          </TabsContent>
+        </Tabs>
 
-          {/* Advanced: Trusted Proxies + Block Response */}
-          <Box mt={2.5}>
-            <Accordion disableGutters elevation={0} sx={{ bgcolor: "transparent", border: "1px solid", borderColor: "divider", borderRadius: 1, "&:before": { display: "none" } }}>
-              <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ minHeight: 44, "& .MuiAccordionSummary-content": { my: 0.5 } }}>
-                <Typography variant="body2" fontWeight={500}>Trusted Proxies &amp; Block Response</Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Stack spacing={2}>
+        {/* Advanced: Trusted Proxies + Block Response */}
+        <div className="mt-6">
+          <Accordion type="single" collapsible>
+            <AccordionItem value="advanced" className="border rounded-lg border-border">
+              <AccordionTrigger className="px-4 py-2.5 text-sm font-medium hover:no-underline">
+                Trusted Proxies &amp; Block Response
+              </AccordionTrigger>
+              <AccordionContent className="px-4 pb-4">
+                <div className="flex flex-col gap-4">
                   <TagInput
                     name="geoblock_trusted_proxies"
                     label="Trusted Proxies"
@@ -797,64 +670,60 @@ export function GeoBlockFields({ initialValues, showModeSelector = true }: GeoBl
                     helperText="Used to parse X-Forwarded-For. Use private_ranges for all RFC-1918 ranges."
                   />
 
-                  <Tooltip title="When enabled, requests where the real client IP cannot be determined (e.g. behind a trusted proxy with no usable X-Forwarded-For) are blocked. Default: off (fail-open).">
-                    <FormControlLabel
-                      control={
-                        <Checkbox
-                          name="geoblock_fail_closed"
-                          defaultChecked={initial?.fail_closed ?? false}
-                          size="small"
-                        />
-                      }
-                      label={<Typography variant="body2">Fail closed (block indeterminate IPs)</Typography>}
+                  <div className="flex items-center gap-2" title="When enabled, requests where the real client IP cannot be determined (e.g. behind a trusted proxy with no usable X-Forwarded-For) are blocked. Default: off (fail-open).">
+                    <Checkbox
+                      id="geoblock-fail-closed"
+                      name="geoblock_fail_closed"
+                      defaultChecked={initial?.fail_closed ?? false}
                     />
-                  </Tooltip>
+                    <label htmlFor="geoblock-fail-closed" className="text-sm cursor-pointer">
+                      Fail closed (block indeterminate IPs)
+                    </label>
+                  </div>
 
-                  <Divider />
+                  <div className="border-t border-border" />
 
-                  <Grid container spacing={2}>
-                    <Grid size={4}>
-                      <TextField
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="col-span-1">
+                      <label className="text-sm font-medium mb-1 block">Status Code</label>
+                      <Input
                         name="geoblock_response_status"
-                        label="Status Code"
                         type="number"
-                        inputProps={{ min: 100, max: 599 }}
+                        min={100}
+                        max={599}
                         defaultValue={initial?.response_status ?? 403}
-                        helperText="HTTP status when blocked"
-                        fullWidth
-                        size="small"
+                        className="h-8 text-sm"
                       />
-                    </Grid>
-                    <Grid size={8}>
-                      <TextField
+                      <p className="text-xs text-muted-foreground mt-1">HTTP status when blocked</p>
+                    </div>
+                    <div className="col-span-2">
+                      <label className="text-sm font-medium mb-1 block">Response Body</label>
+                      <Input
                         name="geoblock_response_body"
-                        label="Response Body"
                         defaultValue={initial?.response_body ?? "Forbidden"}
-                        helperText="Body text returned to blocked clients"
-                        fullWidth
-                        size="small"
+                        className="h-8 text-sm"
                       />
-                    </Grid>
-                    <Grid size={12}>
-                      <TextField
+                      <p className="text-xs text-muted-foreground mt-1">Body text returned to blocked clients</p>
+                    </div>
+                    <div className="col-span-3">
+                      <label className="text-sm font-medium mb-1 block">Redirect URL</label>
+                      <Input
                         name="geoblock_redirect_url"
-                        label="Redirect URL"
                         defaultValue={initial?.redirect_url ?? ""}
-                        helperText="If set, sends a 302 redirect instead of status/body above"
-                        fullWidth
-                        size="small"
                         placeholder="https://example.com/blocked"
+                        className="h-8 text-sm"
                       />
-                    </Grid>
-                  </Grid>
+                      <p className="text-xs text-muted-foreground mt-1">If set, sends a 302 redirect instead of status/body above</p>
+                    </div>
+                  </div>
 
                   <ResponseHeadersEditor initialHeaders={initial?.response_headers ?? {}} />
-                </Stack>
-              </AccordionDetails>
-            </Accordion>
-          </Box>
-        </Box>
-      </Collapse>
-    </Box>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/HostDialogs.tsx b/src/components/proxy-hosts/HostDialogs.tsx
index 62d77aa2..9968bfba 100644
--- a/src/components/proxy-hosts/HostDialogs.tsx
+++ b/src/components/proxy-hosts/HostDialogs.tsx
@@ -1,5 +1,7 @@
-
-import { Alert, Box, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import { useFormState } from "react-dom";
 import { useEffect } from "react";
 import {
@@ -7,12 +9,12 @@ import {
     deleteProxyHostAction,
     updateProxyHostAction
 } from "@/app/(dashboard)/proxy-hosts/actions";
-import { INITIAL_ACTION_STATE } from "@/src/lib/actions";
-import { AccessList } from "@/src/lib/models/access-lists";
-import { Certificate } from "@/src/lib/models/certificates";
-import { ProxyHost } from "@/src/lib/models/proxy-hosts";
-import { AuthentikSettings } from "@/src/lib/settings";
-import { AppDialog } from "@/src/components/ui/AppDialog";
+import { INITIAL_ACTION_STATE } from "@/lib/actions";
+import { AccessList } from "@/lib/models/access-lists";
+import { Certificate } from "@/lib/models/certificates";
+import { ProxyHost } from "@/lib/models/proxy-hosts";
+import { AuthentikSettings } from "@/lib/settings";
+import { AppDialog } from "@/components/ui/AppDialog";
 import { AuthentikFields } from "./AuthentikFields";
 import { DnsResolverFields } from "./DnsResolverFields";
 import { LoadBalancerFields } from "./LoadBalancerFields";
@@ -24,7 +26,7 @@ import { WafFields } from "./WafFields";
 import { MtlsFields } from "./MtlsConfig";
 import { RedirectsFields } from "./RedirectsFields";
 import { RewriteFields } from "./RewriteFields";
-import type { CaCertificate } from "@/src/lib/models/ca-certificates";
+import type { CaCertificate } from "@/lib/models/ca-certificates";
 
 export function CreateHostDialog({
     open,
@@ -59,14 +61,13 @@ export function CreateHostDialog({
             maxWidth="md"
             submitLabel="Create"
             onSubmit={() => {
-                // Trigger generic form submit
                 (document.getElementById("create-host-form") as HTMLFormElement)?.requestSubmit();
             }}
         >
-            <Stack component="form" id="create-host-form" action={formAction} spacing={2.5}>
+            <form id="create-host-form" 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>
                 )}
                 <SettingsToggles
@@ -74,64 +75,85 @@ export function CreateHostDialog({
                     skipHttpsValidation={initialData?.skip_https_hostname_validation}
                     enabled={true}
                 />
-                <TextField
-                    name="name"
-                    label="Name"
-                    placeholder="My Service"
-                    defaultValue={initialData ? `${initialData.name} (Copy)` : ""}
-                    required
-                    fullWidth
-                />
-                <TextField
-                    name="domains"
-                    label="Domains"
-                    placeholder="app.example.com"
-                    defaultValue={initialData?.domains.join("\n") ?? ""}
-                    helperText="One per line or comma-separated. Wildcards like *.example.com are supported."
-                    multiline
-                    minRows={2}
-                    required
-                    fullWidth
-                />
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Name</label>
+                    <Input
+                        name="name"
+                        placeholder="My Service"
+                        defaultValue={initialData ? `${initialData.name} (Copy)` : ""}
+                        required
+                    />
+                </div>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Domains</label>
+                    <Textarea
+                        name="domains"
+                        placeholder="app.example.com"
+                        defaultValue={initialData?.domains.join("\n") ?? ""}
+                        required
+                        rows={2}
+                    />
+                    <p className="text-xs text-muted-foreground mt-1">
+                        One per line or comma-separated. Wildcards like *.example.com are supported.
+                    </p>
+                </div>
                 <UpstreamInput defaultUpstreams={initialData?.upstreams} />
-                <TextField select name="certificate_id" label="Certificate" defaultValue={initialData?.certificate_id ?? ""} fullWidth>
-                    <MenuItem value="">Managed by Caddy (Auto)</MenuItem>
-                    {certificates.map((cert) => (
-                        <MenuItem key={cert.id} value={cert.id}>
-                            {cert.name}
-                        </MenuItem>
-                    ))}
-                </TextField>
-                <TextField select name="access_list_id" label="Access List" defaultValue={initialData?.access_list_id ?? ""} fullWidth>
-                    <MenuItem value="">None</MenuItem>
-                    {accessLists.map((list) => (
-                        <MenuItem key={list.id} value={list.id}>
-                            {list.name}
-                        </MenuItem>
-                    ))}
-                </TextField>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Certificate</label>
+                    <Select name="certificate_id" defaultValue={String(initialData?.certificate_id ?? "")}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="Managed by Caddy (Auto)" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="">Managed by Caddy (Auto)</SelectItem>
+                            {certificates.map((cert) => (
+                                <SelectItem key={cert.id} value={String(cert.id)}>
+                                    {cert.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Access List</label>
+                    <Select name="access_list_id" defaultValue={String(initialData?.access_list_id ?? "")}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="None" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="">None</SelectItem>
+                            {accessLists.map((list) => (
+                                <SelectItem key={list.id} value={String(list.id)}>
+                                    {list.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
                 <RedirectsFields initialData={initialData?.redirects} />
                 <RewriteFields initialData={initialData?.rewrite} />
-                <TextField
-                    name="custom_pre_handlers_json"
-                    label="Custom Pre-Handlers (JSON)"
-                    placeholder='[{"handler": "headers", ...}]'
-                    defaultValue={initialData?.custom_pre_handlers_json ?? ""}
-                    helperText="Optional JSON array of Caddy handlers"
-                    multiline
-                    minRows={3}
-                    fullWidth
-                />
-                <TextField
-                    name="custom_reverse_proxy_json"
-                    label="Custom Reverse Proxy (JSON)"
-                    placeholder='{"headers": {"request": {...}}}'
-                    defaultValue={initialData?.custom_reverse_proxy_json ?? ""}
-                    helperText="Deep-merge into reverse_proxy handler (only applies in proxy mode)"
-                    multiline
-                    minRows={3}
-                    fullWidth
-                />
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Custom Pre-Handlers (JSON)</label>
+                    <Textarea
+                        name="custom_pre_handlers_json"
+                        placeholder='[{"handler": "headers", ...}]'
+                        defaultValue={initialData?.custom_pre_handlers_json ?? ""}
+                        rows={3}
+                    />
+                    <p className="text-xs text-muted-foreground mt-1">Optional JSON array of Caddy handlers</p>
+                </div>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Custom Reverse Proxy (JSON)</label>
+                    <Textarea
+                        name="custom_reverse_proxy_json"
+                        placeholder='{"headers": {"request": {...}}}'
+                        defaultValue={initialData?.custom_reverse_proxy_json ?? ""}
+                        rows={3}
+                    />
+                    <p className="text-xs text-muted-foreground mt-1">
+                        Deep-merge into reverse_proxy handler (only applies in proxy mode)
+                    </p>
+                </div>
                 <AuthentikFields defaults={authentikDefaults} authentik={initialData?.authentik} />
                 <LoadBalancerFields loadBalancer={initialData?.load_balancer} />
                 <DnsResolverFields dnsResolver={initialData?.dns_resolver} />
@@ -139,7 +161,7 @@ export function CreateHostDialog({
                 <GeoBlockFields />
                 <WafFields value={initialData?.waf} />
                 <MtlsFields value={initialData?.mtls} caCertificates={caCertificates} />
-            </Stack>
+            </form>
         </AppDialog>
     );
 }
@@ -178,10 +200,10 @@ export function EditHostDialog({
                 (document.getElementById("edit-host-form") as HTMLFormElement)?.requestSubmit();
             }}
         >
-            <Stack component="form" id="edit-host-form" action={formAction} spacing={2.5}>
+            <form id="edit-host-form" 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>
                 )}
                 <SettingsToggles
@@ -189,66 +211,89 @@ export function EditHostDialog({
                     skipHttpsValidation={host.skip_https_hostname_validation}
                     enabled={host.enabled}
                 />
-                <TextField name="name" label="Name" defaultValue={host.name} required fullWidth />
-                <TextField
-                    name="domains"
-                    label="Domains"
-                    defaultValue={host.domains.join("\n")}
-                    helperText="One per line or comma-separated. Wildcards like *.example.com are supported."
-                    multiline
-                    minRows={2}
-                    fullWidth
-                />
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Name</label>
+                    <Input name="name" defaultValue={host.name} required />
+                </div>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Domains</label>
+                    <Textarea
+                        name="domains"
+                        defaultValue={host.domains.join("\n")}
+                        rows={2}
+                    />
+                    <p className="text-xs text-muted-foreground mt-1">
+                        One per line or comma-separated. Wildcards like *.example.com are supported.
+                    </p>
+                </div>
                 <UpstreamInput defaultUpstreams={host.upstreams} />
-                <TextField select name="certificate_id" label="Certificate" defaultValue={host.certificate_id ?? ""} fullWidth>
-                    <MenuItem value="">Managed by Caddy (Auto)</MenuItem>
-                    {certificates.map((cert) => (
-                        <MenuItem key={cert.id} value={cert.id}>
-                            {cert.name}
-                        </MenuItem>
-                    ))}
-                </TextField>
-                <TextField select name="access_list_id" label="Access List" defaultValue={host.access_list_id ?? ""} fullWidth>
-                    <MenuItem value="">None</MenuItem>
-                    {accessLists.map((list) => (
-                        <MenuItem key={list.id} value={list.id}>
-                            {list.name}
-                        </MenuItem>
-                    ))}
-                </TextField>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Certificate</label>
+                    <Select name="certificate_id" defaultValue={String(host.certificate_id ?? "")}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="Managed by Caddy (Auto)" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="">Managed by Caddy (Auto)</SelectItem>
+                            {certificates.map((cert) => (
+                                <SelectItem key={cert.id} value={String(cert.id)}>
+                                    {cert.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Access List</label>
+                    <Select name="access_list_id" defaultValue={String(host.access_list_id ?? "")}>
+                        <SelectTrigger>
+                            <SelectValue placeholder="None" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="">None</SelectItem>
+                            {accessLists.map((list) => (
+                                <SelectItem key={list.id} value={String(list.id)}>
+                                    {list.name}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
                 <RedirectsFields initialData={host.redirects} />
                 <RewriteFields initialData={host.rewrite} />
-                <TextField
-                    name="custom_pre_handlers_json"
-                    label="Custom Pre-Handlers (JSON)"
-                    defaultValue={host.custom_pre_handlers_json ?? ""}
-                    helperText="Optional JSON array of Caddy handlers"
-                    multiline
-                    minRows={3}
-                    fullWidth
-                />
-                <TextField
-                    name="custom_reverse_proxy_json"
-                    label="Custom Reverse Proxy (JSON)"
-                    defaultValue={host.custom_reverse_proxy_json ?? ""}
-                    helperText="Deep-merge into reverse_proxy handler (only applies in proxy mode)"
-                    multiline
-                    minRows={3}
-                    fullWidth
-                />
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Custom Pre-Handlers (JSON)</label>
+                    <Textarea
+                        name="custom_pre_handlers_json"
+                        defaultValue={host.custom_pre_handlers_json ?? ""}
+                        rows={3}
+                    />
+                    <p className="text-xs text-muted-foreground mt-1">Optional JSON array of Caddy handlers</p>
+                </div>
+                <div>
+                    <label className="text-sm font-medium mb-1 block">Custom Reverse Proxy (JSON)</label>
+                    <Textarea
+                        name="custom_reverse_proxy_json"
+                        defaultValue={host.custom_reverse_proxy_json ?? ""}
+                        rows={3}
+                    />
+                    <p className="text-xs text-muted-foreground mt-1">
+                        Deep-merge into reverse_proxy handler (only applies in proxy mode)
+                    </p>
+                </div>
                 <AuthentikFields authentik={host.authentik} />
                 <LoadBalancerFields loadBalancer={host.load_balancer} />
                 <DnsResolverFields dnsResolver={host.dns_resolver} />
                 <UpstreamDnsResolutionFields upstreamDnsResolution={host.upstream_dns_resolution} />
                 <GeoBlockFields
-                  initialValues={{
-                    geoblock: host.geoblock,
-                    geoblock_mode: host.geoblock_mode,
-                  }}
+                    initialValues={{
+                        geoblock: host.geoblock,
+                        geoblock_mode: host.geoblock_mode,
+                    }}
                 />
                 <WafFields value={host.waf} />
                 <MtlsFields value={host.mtls} caCertificates={caCertificates} />
-            </Stack>
+            </form>
         </AppDialog>
     );
 }
@@ -281,30 +326,26 @@ export function DeleteHostDialog({
                 (document.getElementById("delete-host-form") as HTMLFormElement)?.requestSubmit();
             }}
         >
-            <Stack component="form" id="delete-host-form" action={formAction} spacing={2}>
+            <form id="delete-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">
+                <p className="text-sm">
                     Are you sure you want to delete the proxy host <strong>{host.name}</strong>?
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
+                </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">
-                        • Domains: {host.domains.join(", ")}
-                    </Typography>
-                    <Typography variant="body2" color="text.secondary">
-                        • Upstreams: {host.upstreams.join(", ")}
-                    </Typography>
-                </Box>
-                <Typography variant="body2" color="error.main" fontWeight={500}>
+                </p>
+                <div className="pl-4">
+                    <p className="text-sm text-muted-foreground">• Domains: {host.domains.join(", ")}</p>
+                    <p className="text-sm text-muted-foreground">• 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/proxy-hosts/LoadBalancerFields.tsx b/src/components/proxy-hosts/LoadBalancerFields.tsx
index 979793bb..0065ced6 100644
--- a/src/components/proxy-hosts/LoadBalancerFields.tsx
+++ b/src/components/proxy-hosts/LoadBalancerFields.tsx
@@ -1,7 +1,9 @@
-
-import { Box, Collapse, FormControlLabel, Stack, Switch, TextField, Typography, MenuItem } from "@mui/material";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
 import { useState } from "react";
-import { ProxyHost, LoadBalancingPolicy } from "@/src/lib/models/proxy-hosts";
+import { ProxyHost, LoadBalancingPolicy } from "@/lib/models/proxy-hosts";
 
 const LOAD_BALANCING_POLICIES = [
   { value: "random", label: "Random", description: "Random selection (default)" },
@@ -29,311 +31,245 @@ export function LoadBalancerFields({
   const showCookieFields = policy === "cookie";
 
   return (
-    <Box
-      sx={{
-        borderRadius: 2,
-        border: "1px solid",
-        borderColor: "info.main",
-        bgcolor: "rgba(2, 136, 209, 0.05)",
-        p: 2.5
-      }}
-    >
+    <div className="rounded-lg border border-blue-500/60 bg-blue-500/5 p-5">
       <input type="hidden" name="lb_present" value="1" />
       <input type="hidden" name="lb_enabled_present" value="1" />
-      <Stack spacing={2}>
-        <Stack direction="row" alignItems="center" justifyContent="space-between">
-          <Box>
-            <Typography variant="subtitle1" fontWeight={600}>
-              Load Balancer
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row items-center justify-between">
+          <div>
+            <p className="text-sm font-semibold">Load Balancer</p>
+            <p className="text-sm text-muted-foreground">
               Configure load balancing and health checks for multiple upstreams
-            </Typography>
-          </Box>
+            </p>
+          </div>
           <Switch
             name="lb_enabled"
             checked={enabled}
-            onChange={(_, checked) => setEnabled(checked)}
+            onCheckedChange={setEnabled}
           />
-        </Stack>
+        </div>
 
-        <Collapse in={enabled} timeout="auto" unmountOnExit>
-          <Stack spacing={2.5}>
+        <div className={cn(
+          "overflow-hidden transition-all duration-200",
+          enabled ? "max-h-[3000px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+        )}>
+          <div className="flex flex-col gap-6">
             {/* Policy Selection */}
-            <Box>
-              <Typography variant="subtitle2" gutterBottom>
-                Selection Policy
-              </Typography>
-              <TextField
-                select
-                name="lb_policy"
-                label="Load Balancing Policy"
-                value={policy}
-                onChange={(e) => setPolicy(e.target.value as LoadBalancingPolicy)}
-                fullWidth
-                size="small"
-              >
-                {LOAD_BALANCING_POLICIES.map((p) => (
-                  <MenuItem key={p.value} value={p.value}>
-                    {p.label} - {p.description}
-                  </MenuItem>
-                ))}
-              </TextField>
-            </Box>
+            <div>
+              <p className="text-sm font-semibold mb-2">Selection Policy</p>
+              <input type="hidden" name="lb_policy" value={policy} />
+              <Select value={policy} onValueChange={(v) => setPolicy(v as LoadBalancingPolicy)}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select policy" />
+                </SelectTrigger>
+                <SelectContent>
+                  {LOAD_BALANCING_POLICIES.map((p) => (
+                    <SelectItem key={p.value} value={p.value}>
+                      {p.label} - {p.description}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
 
             {/* Header-based policy fields */}
-            <Collapse in={showHeaderField} timeout="auto" unmountOnExit>
-              <TextField
-                name="lb_policy_header_field"
-                label="Header Field Name"
-                placeholder="X-Custom-Header"
-                defaultValue={initial?.policyHeaderField ?? ""}
-                helperText="The request header to hash for upstream selection"
-                fullWidth
-                size="small"
-              />
-            </Collapse>
+            <div className={cn(
+              "overflow-hidden transition-all duration-200",
+              showHeaderField ? "max-h-[200px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+            )}>
+              <div>
+                <label className="text-sm font-medium mb-1 block">Header Field Name</label>
+                <Input
+                  name="lb_policy_header_field"
+                  placeholder="X-Custom-Header"
+                  defaultValue={initial?.policyHeaderField ?? ""}
+                  className="h-8 text-sm"
+                />
+                <p className="text-xs text-muted-foreground mt-1">The request header to hash for upstream selection</p>
+              </div>
+            </div>
 
             {/* Cookie-based policy fields */}
-            <Collapse in={showCookieFields} timeout="auto" unmountOnExit>
-              <Stack spacing={2}>
-                <TextField
-                  name="lb_policy_cookie_name"
-                  label="Cookie Name"
-                  placeholder="server_id"
-                  defaultValue={initial?.policyCookieName ?? ""}
-                  helperText="Name of the cookie for sticky sessions"
-                  fullWidth
-                  size="small"
-                />
-                <TextField
-                  name="lb_policy_cookie_secret"
-                  label="Cookie Secret (Optional)"
-                  placeholder="your-secret-key"
-                  defaultValue={initial?.policyCookieSecret ?? ""}
-                  helperText="Secret key for HMAC cookie signing"
-                  fullWidth
-                  size="small"
-                />
-              </Stack>
-            </Collapse>
+            <div className={cn(
+              "overflow-hidden transition-all duration-200",
+              showCookieFields ? "max-h-[300px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+            )}>
+              <div className="flex flex-col gap-4">
+                <div>
+                  <label className="text-sm font-medium mb-1 block">Cookie Name</label>
+                  <Input
+                    name="lb_policy_cookie_name"
+                    placeholder="server_id"
+                    defaultValue={initial?.policyCookieName ?? ""}
+                    className="h-8 text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">Name of the cookie for sticky sessions</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium mb-1 block">Cookie Secret (Optional)</label>
+                  <Input
+                    name="lb_policy_cookie_secret"
+                    placeholder="your-secret-key"
+                    defaultValue={initial?.policyCookieSecret ?? ""}
+                    className="h-8 text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">Secret key for HMAC cookie signing</p>
+                </div>
+              </div>
+            </div>
 
             {/* Retry Settings */}
-            <Box>
-              <Typography variant="subtitle2" gutterBottom>
-                Retry Settings
-              </Typography>
-              <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                <TextField
-                  name="lb_try_duration"
-                  label="Try Duration"
-                  placeholder="5s"
-                  defaultValue={initial?.tryDuration ?? ""}
-                  helperText="How long to try upstreams"
-                  fullWidth
-                  size="small"
-                />
-                <TextField
-                  name="lb_try_interval"
-                  label="Try Interval"
-                  placeholder="250ms"
-                  defaultValue={initial?.tryInterval ?? ""}
-                  helperText="Wait between attempts"
-                  fullWidth
-                  size="small"
-                />
-                <TextField
-                  name="lb_retries"
-                  label="Max Retries"
-                  type="number"
-                  inputProps={{ min: 0 }}
-                  defaultValue={initial?.retries ?? ""}
-                  helperText="Maximum retry attempts"
-                  fullWidth
-                  size="small"
-                />
-              </Stack>
-            </Box>
+            <div>
+              <p className="text-sm font-semibold mb-2">Retry Settings</p>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <div>
+                  <label className="text-sm font-medium mb-1 block">Try Duration</label>
+                  <Input
+                    name="lb_try_duration"
+                    placeholder="5s"
+                    defaultValue={initial?.tryDuration ?? ""}
+                    className="h-8 text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">How long to try upstreams</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium mb-1 block">Try Interval</label>
+                  <Input
+                    name="lb_try_interval"
+                    placeholder="250ms"
+                    defaultValue={initial?.tryInterval ?? ""}
+                    className="h-8 text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">Wait between attempts</p>
+                </div>
+                <div>
+                  <label className="text-sm font-medium mb-1 block">Max Retries</label>
+                  <Input
+                    name="lb_retries"
+                    type="number"
+                    min={0}
+                    defaultValue={initial?.retries ?? ""}
+                    className="h-8 text-sm"
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">Maximum retry attempts</p>
+                </div>
+              </div>
+            </div>
 
             {/* Active Health Checks */}
-            <Box
-              sx={{
-                borderRadius: 1,
-                border: "1px solid",
-                borderColor: "divider",
-                p: 2
-              }}
-            >
+            <div className="rounded-lg border border-border p-4">
               <input type="hidden" name="lb_active_health_enabled_present" value="1" />
-              <Stack spacing={2}>
-                <FormControlLabel
-                  control={
-                    <Switch
-                      name="lb_active_health_enabled"
-                      checked={activeHealthEnabled}
-                      onChange={(_, checked) => setActiveHealthEnabled(checked)}
-                      size="small"
-                    />
-                  }
-                  label={
-                    <Box>
-                      <Typography variant="subtitle2">Active Health Checks</Typography>
-                      <Typography variant="caption" color="text.secondary">
-                        Periodically probe upstreams to check health
-                      </Typography>
-                    </Box>
-                  }
-                />
+              <div className="flex flex-col gap-4">
+                <div className="flex items-start gap-3">
+                  <Switch
+                    name="lb_active_health_enabled"
+                    checked={activeHealthEnabled}
+                    onCheckedChange={setActiveHealthEnabled}
+                  />
+                  <div>
+                    <p className="text-sm font-semibold">Active Health Checks</p>
+                    <span className="text-xs text-muted-foreground">Periodically probe upstreams to check health</span>
+                  </div>
+                </div>
 
-                <Collapse in={activeHealthEnabled} timeout="auto" unmountOnExit>
-                  <Stack spacing={2}>
-                    <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                      <TextField
-                        name="lb_active_health_uri"
-                        label="Health Check URI"
-                        placeholder="/health"
-                        defaultValue={initial?.activeHealthCheck?.uri ?? ""}
-                        helperText="Path to probe for health"
-                        fullWidth
-                        size="small"
-                      />
-                      <TextField
-                        name="lb_active_health_port"
-                        label="Health Check Port"
-                        type="number"
-                        inputProps={{ min: 1, max: 65535 }}
-                        defaultValue={initial?.activeHealthCheck?.port ?? ""}
-                        helperText="Override upstream port"
-                        fullWidth
-                        size="small"
-                      />
-                    </Stack>
-                    <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                      <TextField
-                        name="lb_active_health_interval"
-                        label="Check Interval"
-                        placeholder="30s"
-                        defaultValue={initial?.activeHealthCheck?.interval ?? ""}
-                        helperText="How often to check"
-                        fullWidth
-                        size="small"
-                      />
-                      <TextField
-                        name="lb_active_health_timeout"
-                        label="Check Timeout"
-                        placeholder="5s"
-                        defaultValue={initial?.activeHealthCheck?.timeout ?? ""}
-                        helperText="Timeout for health probe"
-                        fullWidth
-                        size="small"
-                      />
-                    </Stack>
-                    <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                      <TextField
-                        name="lb_active_health_status"
-                        label="Expected Status Code"
-                        type="number"
-                        inputProps={{ min: 100, max: 599 }}
-                        defaultValue={initial?.activeHealthCheck?.status ?? ""}
-                        helperText="Expected HTTP status"
-                        fullWidth
-                        size="small"
-                      />
-                      <TextField
-                        name="lb_active_health_body"
-                        label="Expected Body"
-                        placeholder="OK"
-                        defaultValue={initial?.activeHealthCheck?.body ?? ""}
-                        helperText="Expected response body"
-                        fullWidth
-                        size="small"
-                      />
-                    </Stack>
-                  </Stack>
-                </Collapse>
-              </Stack>
-            </Box>
+                <div className={cn(
+                  "overflow-hidden transition-all duration-200",
+                  activeHealthEnabled ? "max-h-[500px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+                )}>
+                  <div className="flex flex-col gap-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Health Check URI</label>
+                        <Input name="lb_active_health_uri" placeholder="/health" defaultValue={initial?.activeHealthCheck?.uri ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Path to probe for health</p>
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Health Check Port</label>
+                        <Input name="lb_active_health_port" type="number" min={1} max={65535} defaultValue={initial?.activeHealthCheck?.port ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Override upstream port</p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Check Interval</label>
+                        <Input name="lb_active_health_interval" placeholder="30s" defaultValue={initial?.activeHealthCheck?.interval ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">How often to check</p>
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Check Timeout</label>
+                        <Input name="lb_active_health_timeout" placeholder="5s" defaultValue={initial?.activeHealthCheck?.timeout ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Timeout for health probe</p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Expected Status Code</label>
+                        <Input name="lb_active_health_status" type="number" min={100} max={599} defaultValue={initial?.activeHealthCheck?.status ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Expected HTTP status</p>
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Expected Body</label>
+                        <Input name="lb_active_health_body" placeholder="OK" defaultValue={initial?.activeHealthCheck?.body ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Expected response body</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
 
             {/* Passive Health Checks */}
-            <Box
-              sx={{
-                borderRadius: 1,
-                border: "1px solid",
-                borderColor: "divider",
-                p: 2
-              }}
-            >
+            <div className="rounded-lg border border-border p-4">
               <input type="hidden" name="lb_passive_health_enabled_present" value="1" />
-              <Stack spacing={2}>
-                <FormControlLabel
-                  control={
-                    <Switch
-                      name="lb_passive_health_enabled"
-                      checked={passiveHealthEnabled}
-                      onChange={(_, checked) => setPassiveHealthEnabled(checked)}
-                      size="small"
-                    />
-                  }
-                  label={
-                    <Box>
-                      <Typography variant="subtitle2">Passive Health Checks</Typography>
-                      <Typography variant="caption" color="text.secondary">
-                        Mark upstreams unhealthy based on response failures
-                      </Typography>
-                    </Box>
-                  }
-                />
+              <div className="flex flex-col gap-4">
+                <div className="flex items-start gap-3">
+                  <Switch
+                    name="lb_passive_health_enabled"
+                    checked={passiveHealthEnabled}
+                    onCheckedChange={setPassiveHealthEnabled}
+                  />
+                  <div>
+                    <p className="text-sm font-semibold">Passive Health Checks</p>
+                    <span className="text-xs text-muted-foreground">Mark upstreams unhealthy based on response failures</span>
+                  </div>
+                </div>
 
-                <Collapse in={passiveHealthEnabled} timeout="auto" unmountOnExit>
-                  <Stack spacing={2}>
-                    <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                      <TextField
-                        name="lb_passive_health_fail_duration"
-                        label="Fail Duration"
-                        placeholder="30s"
-                        defaultValue={initial?.passiveHealthCheck?.failDuration ?? ""}
-                        helperText="How long to remember failures"
-                        fullWidth
-                        size="small"
-                      />
-                      <TextField
-                        name="lb_passive_health_max_fails"
-                        label="Max Failures"
-                        type="number"
-                        inputProps={{ min: 0 }}
-                        defaultValue={initial?.passiveHealthCheck?.maxFails ?? ""}
-                        helperText="Failures before marking unhealthy"
-                        fullWidth
-                        size="small"
-                      />
-                    </Stack>
-                    <Stack direction={{ xs: "column", sm: "row" }} spacing={2}>
-                      <TextField
-                        name="lb_passive_health_unhealthy_status"
-                        label="Unhealthy Status Codes"
-                        placeholder="500, 502, 503"
-                        defaultValue={initial?.passiveHealthCheck?.unhealthyStatus?.join(", ") ?? ""}
-                        helperText="Comma-separated status codes"
-                        fullWidth
-                        size="small"
-                      />
-                      <TextField
-                        name="lb_passive_health_unhealthy_latency"
-                        label="Unhealthy Latency"
-                        placeholder="5s"
-                        defaultValue={initial?.passiveHealthCheck?.unhealthyLatency ?? ""}
-                        helperText="Latency threshold for unhealthy"
-                        fullWidth
-                        size="small"
-                      />
-                    </Stack>
-                  </Stack>
-                </Collapse>
-              </Stack>
-            </Box>
-          </Stack>
-        </Collapse>
-      </Stack>
-    </Box>
+                <div className={cn(
+                  "overflow-hidden transition-all duration-200",
+                  passiveHealthEnabled ? "max-h-[400px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+                )}>
+                  <div className="flex flex-col gap-4">
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Fail Duration</label>
+                        <Input name="lb_passive_health_fail_duration" placeholder="30s" defaultValue={initial?.passiveHealthCheck?.failDuration ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">How long to remember failures</p>
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Max Failures</label>
+                        <Input name="lb_passive_health_max_fails" type="number" min={0} defaultValue={initial?.passiveHealthCheck?.maxFails ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Failures before marking unhealthy</p>
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Unhealthy Status Codes</label>
+                        <Input name="lb_passive_health_unhealthy_status" placeholder="500, 502, 503" defaultValue={initial?.passiveHealthCheck?.unhealthyStatus?.join(", ") ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Comma-separated status codes</p>
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-1 block">Unhealthy Latency</label>
+                        <Input name="lb_passive_health_unhealthy_latency" placeholder="5s" defaultValue={initial?.passiveHealthCheck?.unhealthyLatency ?? ""} className="h-8 text-sm" />
+                        <p className="text-xs text-muted-foreground mt-1">Latency threshold for unhealthy</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/MtlsConfig.tsx b/src/components/proxy-hosts/MtlsConfig.tsx
index 69a189f8..3ba7e5a7 100644
--- a/src/components/proxy-hosts/MtlsConfig.tsx
+++ b/src/components/proxy-hosts/MtlsConfig.tsx
@@ -1,19 +1,13 @@
 "use client";
 
-import {
-  Alert,
-  Box,
-  Checkbox,
-  Collapse,
-  FormControlLabel,
-  Stack,
-  Switch,
-  Typography,
-} from "@mui/material";
-import LockPersonIcon from "@mui/icons-material/LockPerson";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+import { LockKeyhole } from "lucide-react";
 import { useState } from "react";
-import type { CaCertificate } from "@/src/lib/models/ca-certificates";
-import type { MtlsConfig } from "@/src/lib/models/proxy-hosts";
+import type { CaCertificate } from "@/lib/models/ca-certificates";
+import type { MtlsConfig } from "@/lib/models/proxy-hosts";
 
 type Props = {
   value?: MtlsConfig | null;
@@ -31,16 +25,7 @@ export function MtlsFields({ value, caCertificates }: Props) {
   }
 
   return (
-    <Box
-      sx={{
-        borderRadius: 2,
-        border: "1px solid",
-        borderColor: "info.main",
-        bgcolor: (theme) =>
-          theme.palette.mode === "dark" ? "rgba(2,136,209,0.06)" : "rgba(2,136,209,0.04)",
-        p: 2,
-      }}
-    >
+    <div className="rounded-lg border border-blue-500/60 bg-blue-500/5 p-4">
       <input type="hidden" name="mtls_present" value="1" />
       <input type="hidden" name="mtls_enabled" value={enabled ? "true" : "false"} />
       {enabled && selectedIds.map(id => (
@@ -48,79 +33,60 @@ export function MtlsFields({ value, caCertificates }: Props) {
       ))}
 
       {/* Header */}
-      <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
-        <Stack direction="row" alignItems="flex-start" spacing={1.5} flex={1} minWidth={0}>
-          <Box
-            sx={{
-              mt: 0.25,
-              width: 32,
-              height: 32,
-              borderRadius: 1.5,
-              bgcolor: "info.main",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0,
-            }}
-          >
-            <LockPersonIcon sx={{ fontSize: 18, color: "#fff" }} />
-          </Box>
-          <Box minWidth={0}>
-            <Typography variant="subtitle1" fontWeight={700} lineHeight={1.3}>
-              Mutual TLS (mTLS)
-            </Typography>
-            <Typography variant="body2" color="text.secondary" mt={0.25}>
+      <div className="flex flex-row items-start justify-between gap-2">
+        <div className="flex flex-row items-start gap-3 flex-1 min-w-0">
+          <div className="mt-0.5 w-8 h-8 rounded-xl bg-blue-500 flex items-center justify-center shrink-0">
+            <LockKeyhole className="h-4 w-4 text-white" />
+          </div>
+          <div className="min-w-0">
+            <p className="text-sm font-bold leading-snug">Mutual TLS (mTLS)</p>
+            <p className="text-sm text-muted-foreground mt-0.5">
               Require clients to present a certificate signed by a trusted CA
-            </Typography>
-          </Box>
-        </Stack>
+            </p>
+          </div>
+        </div>
         <Switch
           checked={enabled}
-          onChange={(_, checked) => setEnabled(checked)}
-          sx={{ flexShrink: 0 }}
+          onCheckedChange={setEnabled}
+          className="shrink-0"
         />
-      </Stack>
+      </div>
 
-      <Collapse in={enabled} timeout="auto" unmountOnExit>
-        <Box mt={2}>
-          <Alert severity="info" sx={{ mb: 2 }}>
+      <div className={cn(
+        "overflow-hidden transition-all duration-200",
+        enabled ? "max-h-[1000px] opacity-100 mt-4" : "max-h-0 opacity-0 pointer-events-none"
+      )}>
+        <Alert className="mb-4">
+          <AlertDescription>
             mTLS requires TLS to be configured on this host (certificate must be set).
-          </Alert>
+          </AlertDescription>
+        </Alert>
 
-          <Typography
-            variant="caption"
-            color="text.secondary"
-            fontWeight={600}
-            sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}
-          >
-            Trusted Client CA Certificates
-          </Typography>
+        <span className="text-xs text-muted-foreground font-semibold uppercase tracking-wide">
+          Trusted Client CA Certificates
+        </span>
 
-          {caCertificates.length === 0 ? (
-            <Typography variant="body2" color="text.secondary" mt={1}>
-              No CA certificates configured. Add them on the Certificates page.
-            </Typography>
-          ) : (
-            <Stack mt={0.5}>
-              {caCertificates.map(ca => (
-                <FormControlLabel
-                  key={ca.id}
-                  control={
-                    <Checkbox
-                      checked={selectedIds.includes(ca.id)}
-                      onChange={() => toggleId(ca.id)}
-                      size="small"
-                    />
-                  }
-                  label={
-                    <Typography variant="body2">{ca.name}</Typography>
-                  }
+        {caCertificates.length === 0 ? (
+          <p className="text-sm text-muted-foreground mt-2">
+            No CA certificates configured. Add them on the Certificates page.
+          </p>
+        ) : (
+          <div className="flex flex-col mt-1">
+            {caCertificates.map(ca => (
+              <div key={ca.id} className="flex items-center gap-2 py-1">
+                <Checkbox
+                  id={`ca-cert-${ca.id}`}
+                  checked={selectedIds.includes(ca.id)}
+                  onCheckedChange={() => toggleId(ca.id)}
                 />
-              ))}
-            </Stack>
-          )}
-        </Box>
-      </Collapse>
-    </Box>
+                <label htmlFor={`ca-cert-${ca.id}`} className="text-sm cursor-pointer">
+                  {ca.name}
+                </label>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/RedirectsFields.tsx b/src/components/proxy-hosts/RedirectsFields.tsx
index 586caa40..2ca97a3c 100644
--- a/src/components/proxy-hosts/RedirectsFields.tsx
+++ b/src/components/proxy-hosts/RedirectsFields.tsx
@@ -1,12 +1,10 @@
 "use client";
 import { useState } from "react";
-import {
-  Box, Button, IconButton, MenuItem, Select,
-  Table, TableBody, TableCell, TableHead, TableRow, TextField, Typography,
-} from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import AddIcon from "@mui/icons-material/Add";
-import type { RedirectRule } from "@/src/lib/models/proxy-hosts";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Trash2, Plus } from "lucide-react";
+import type { RedirectRule } from "@/lib/models/proxy-hosts";
 
 type Props = { initialData?: RedirectRule[] };
 
@@ -23,66 +21,65 @@ export function RedirectsFields({ initialData = [] }: Props) {
     setRules((r) => r.map((rule, idx) => (idx === i ? { ...rule, [key]: value } : rule)));
 
   return (
-    <Box>
-      <Typography variant="subtitle2" gutterBottom>
-        Redirects
-      </Typography>
+    <div>
+      <p className="text-sm font-semibold mb-2">Redirects</p>
       <input type="hidden" name="redirects_json" value={JSON.stringify(rules)} />
       {rules.length > 0 && (
-        <Table size="small" sx={{ mb: 1 }}>
-          <TableHead>
-            <TableRow>
-              <TableCell>From Path</TableCell>
-              <TableCell>To URL / Path</TableCell>
-              <TableCell>Status</TableCell>
-              <TableCell />
-            </TableRow>
-          </TableHead>
-          <TableBody>
+        <div className="mb-2">
+          <div className="grid grid-cols-[1fr_1fr_90px_40px] gap-2 mb-1">
+            <span className="text-xs font-medium text-muted-foreground px-1">From Path</span>
+            <span className="text-xs font-medium text-muted-foreground px-1">To URL / Path</span>
+            <span className="text-xs font-medium text-muted-foreground px-1">Status</span>
+            <span />
+          </div>
+          <div className="flex flex-col gap-2">
             {rules.map((rule, i) => (
-              <TableRow key={i}>
-                <TableCell>
-                  <TextField
-                    size="small"
-                    placeholder="/.well-known/carddav"
-                    value={rule.from}
-                    onChange={(e) => updateRule(i, "from", e.target.value)}
-                    fullWidth
-                  />
-                </TableCell>
-                <TableCell>
-                  <TextField
-                    size="small"
-                    placeholder="/remote.php/dav/"
-                    value={rule.to}
-                    onChange={(e) => updateRule(i, "to", e.target.value)}
-                    fullWidth
-                  />
-                </TableCell>
-                <TableCell sx={{ width: 90 }}>
-                  <Select
-                    size="small"
-                    value={rule.status}
-                    onChange={(e) => updateRule(i, "status", Number(e.target.value))}
-                  >
+              <div key={i} className="grid grid-cols-[1fr_1fr_90px_40px] gap-2 items-center">
+                <Input
+                  size={1}
+                  placeholder="/.well-known/carddav"
+                  value={rule.from}
+                  onChange={(e) => updateRule(i, "from", e.target.value)}
+                  className="h-8 text-sm"
+                />
+                <Input
+                  size={1}
+                  placeholder="/remote.php/dav/"
+                  value={rule.to}
+                  onChange={(e) => updateRule(i, "to", e.target.value)}
+                  className="h-8 text-sm"
+                />
+                <Select
+                  value={String(rule.status)}
+                  onValueChange={(v) => updateRule(i, "status", Number(v))}
+                >
+                  <SelectTrigger className="h-8 text-sm">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
                     {[301, 302, 307, 308].map((s) => (
-                      <MenuItem key={s} value={s}>{s}</MenuItem>
+                      <SelectItem key={s} value={String(s)}>{s}</SelectItem>
                     ))}
-                  </Select>
-                </TableCell>
-                <TableCell sx={{ width: 40 }}>
-                  <IconButton size="small" onClick={() => removeRule(i)}>
-                    <DeleteIcon fontSize="small" />
-                  </IconButton>
-                </TableCell>
-              </TableRow>
+                  </SelectContent>
+                </Select>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={() => removeRule(i)}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
             ))}
-          </TableBody>
-        </Table>
+          </div>
+        </div>
       )}
-      <Button size="small" startIcon={<AddIcon />} onClick={addRule}>
+      <Button type="button" variant="ghost" size="sm" onClick={addRule}>
+        <Plus className="h-4 w-4 mr-1" />
         Add Redirect
       </Button>
-    </Box>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/RewriteFields.tsx b/src/components/proxy-hosts/RewriteFields.tsx
index 0c8ee84c..9f2f2a47 100644
--- a/src/components/proxy-hosts/RewriteFields.tsx
+++ b/src/components/proxy-hosts/RewriteFields.tsx
@@ -1,17 +1,20 @@
-import { TextField } from "@mui/material";
-import type { RewriteConfig } from "@/src/lib/models/proxy-hosts";
+import { Input } from "@/components/ui/input";
+import type { RewriteConfig } from "@/lib/models/proxy-hosts";
 
 type Props = { initialData?: RewriteConfig | null };
 
 export function RewriteFields({ initialData }: Props) {
   return (
-    <TextField
-      name="rewrite_path_prefix"
-      label="Path Prefix Rewrite"
-      placeholder="/recipes"
-      defaultValue={initialData?.path_prefix ?? ""}
-      helperText="Prepend this prefix to every request before proxying (e.g. /recipes → /recipes/original/path)"
-      fullWidth
-    />
+    <div>
+      <label className="text-sm font-medium mb-1 block">Path Prefix Rewrite</label>
+      <Input
+        name="rewrite_path_prefix"
+        placeholder="/recipes"
+        defaultValue={initialData?.path_prefix ?? ""}
+      />
+      <p className="text-xs text-muted-foreground mt-1">
+        Prepend this prefix to every request before proxying (e.g. /recipes → /recipes/original/path)
+      </p>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/SettingsToggles.tsx b/src/components/proxy-hosts/SettingsToggles.tsx
index d5f0d826..126df54d 100644
--- a/src/components/proxy-hosts/SettingsToggles.tsx
+++ b/src/components/proxy-hosts/SettingsToggles.tsx
@@ -1,6 +1,5 @@
-
-import { Box, Stack, Switch, Typography } from "@mui/material";
-import type { SwitchProps } from "@mui/material";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
 import { useState } from "react";
 
 type ToggleSetting = {
@@ -8,7 +7,6 @@ type ToggleSetting = {
     label: string;
     description: string;
     defaultChecked: boolean;
-    color?: SwitchProps["color"];
 };
 
 type SettingsTogglesProps = {
@@ -28,12 +26,8 @@ export function SettingsToggles({
         enabled: enabled
     });
 
-    const handleChange = (name: keyof typeof values) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        setValues(prev => ({ ...prev, [name]: event.target.checked }));
-    };
-
-    const handleEnabledChange = (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
-        setValues(prev => ({ ...prev, enabled: checked }));
+    const handleChange = (name: keyof typeof values) => (checked: boolean) => {
+        setValues(prev => ({ ...prev, [name]: checked }));
     };
 
     const settings: ToggleSetting[] = [
@@ -42,98 +36,67 @@ export function SettingsToggles({
             label: "HSTS Subdomains",
             description: "Include subdomains in the Strict-Transport-Security header",
             defaultChecked: values.hsts_subdomains,
-            color: "primary"
         },
         {
             name: "skip_https_hostname_validation",
             label: "Skip HTTPS Validation",
             description: "Skip SSL certificate hostname verification for backend connections",
             defaultChecked: values.skip_https_hostname_validation,
-            color: "primary"
         }
     ];
 
     return (
-        <Stack spacing={3}>
+        <div className="flex flex-col gap-6">
             <input type="hidden" name="enabled_present" value="1" />
             <input type="hidden" name="enabled" value={values.enabled ? "on" : ""} />
 
             {/* Main Enable Switch */}
-            <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="space-between"
-                sx={{
-                    p: 2,
-                    borderRadius: 2,
-                    border: "1px solid",
-                    borderColor: values.enabled ? "primary.main" : "divider",
-                    bgcolor: values.enabled ? "rgba(99, 102, 241, 0.04)" : "background.paper",
-                    transition: "all 0.2s ease"
-                }}
-            >
-                <Box>
-                    <Typography variant="subtitle1" fontWeight={600} color={values.enabled ? "primary.main" : "text.primary"}>
+            <div className={cn(
+                "flex flex-row items-center justify-between p-4 rounded-lg border transition-all duration-200",
+                values.enabled
+                    ? "border-primary bg-primary/5"
+                    : "border-border bg-background"
+            )}>
+                <div>
+                    <p className={cn("text-sm font-semibold", values.enabled ? "text-primary" : "text-foreground")}>
                         {values.enabled ? "Proxy Host Enabled" : "Proxy Host Paused"}
-                    </Typography>
-                    <Typography variant="body2" color="text.secondary">
+                    </p>
+                    <p className="text-sm text-muted-foreground">
                         {values.enabled
                             ? "This host is active and routing traffic"
                             : "This host is disabled and will not respond to requests"}
-                    </Typography>
-                </Box>
+                    </p>
+                </div>
                 <Switch
                     checked={values.enabled}
-                    onChange={handleEnabledChange}
-                    color="primary"
+                    onCheckedChange={handleChange("enabled")}
                 />
-            </Stack>
+            </div>
 
             {/* Advanced Options */}
-            <Box
-                sx={{
-                    borderRadius: 2,
-                    border: "1px solid",
-                    borderColor: "divider",
-                    bgcolor: "background.paper",
-                    overflow: "hidden"
-                }}
-            >
-                <Box sx={{ px: 2, py: 1.5, borderBottom: "1px solid", borderColor: "divider", bgcolor: "rgba(255,255,255,0.02)" }}>
-                    <Typography variant="subtitle2" fontWeight={600}>
-                        Advanced Options
-                    </Typography>
-                </Box>
-                <Stack divider={<Box sx={{ borderBottom: "1px solid", borderColor: "divider" }} />}>
+            <div className="rounded-lg border border-border bg-background overflow-hidden">
+                <div className="px-4 py-3 border-b border-border bg-white/5 dark:bg-white/2">
+                    <p className="text-sm font-semibold">Advanced Options</p>
+                </div>
+                <div className="divide-y divide-border">
                     {settings.map((setting) => (
-                        <Box key={setting.name}>
+                        <div key={setting.name}>
                             <input type="hidden" name={`${setting.name}_present`} value="1" />
-                            <Stack
-                                direction="row"
-                                alignItems="center"
-                                justifyContent="space-between"
-                                sx={{ px: 2, py: 1.5 }}
-                            >
-                                <Box sx={{ pr: 2 }}>
-                                    <Typography variant="body2" fontWeight={500}>
-                                        {setting.label}
-                                    </Typography>
-                                    <Typography variant="caption" color="text.secondary">
-                                        {setting.description}
-                                    </Typography>
-                                </Box>
+                            <div className="flex flex-row items-center justify-between px-4 py-3">
+                                <div className="pr-4">
+                                    <p className="text-sm font-medium">{setting.label}</p>
+                                    <span className="text-xs text-muted-foreground">{setting.description}</span>
+                                </div>
                                 <Switch
                                     name={setting.name}
                                     checked={values[setting.name]}
-                                    onChange={handleChange(setting.name)}
-                                    size="small"
-                                    color={setting.color}
+                                    onCheckedChange={handleChange(setting.name)}
                                 />
-                            </Stack>
-                        </Box>
+                            </div>
+                        </div>
                     ))}
-                </Stack>
-            </Box>
-        </Stack>
+                </div>
+            </div>
+        </div>
     );
 }
diff --git a/src/components/proxy-hosts/UpstreamDnsResolutionFields.tsx b/src/components/proxy-hosts/UpstreamDnsResolutionFields.tsx
index ab3e6e4f..9123e672 100644
--- a/src/components/proxy-hosts/UpstreamDnsResolutionFields.tsx
+++ b/src/components/proxy-hosts/UpstreamDnsResolutionFields.tsx
@@ -1,7 +1,10 @@
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { Alert, Box, Collapse, IconButton, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
 import { useState } from "react";
-import type { ProxyHost } from "@/src/lib/models/proxy-hosts";
+import type { ProxyHost } from "@/lib/models/proxy-hosts";
 
 type ResolutionMode = "inherit" | "enabled" | "disabled";
 type FamilyMode = "inherit" | "ipv6" | "ipv4" | "both";
@@ -27,80 +30,84 @@ export function UpstreamDnsResolutionFields({
   const mode = toResolutionMode(upstreamDnsResolution?.enabled);
   const family = toFamilyMode(upstreamDnsResolution?.family);
   const [expanded, setExpanded] = useState(mode !== "inherit" || family !== "inherit");
-  const summary = mode === "inherit" && family === "inherit"
+  const [currentMode, setCurrentMode] = useState<ResolutionMode>(mode);
+  const [currentFamily, setCurrentFamily] = useState<FamilyMode>(family);
+
+  const summary = currentMode === "inherit" && currentFamily === "inherit"
     ? "Using global upstream DNS pinning defaults"
-    : `Override: ${mode === "inherit" ? "inherit mode" : mode}, ${family === "inherit" ? "inherit family" : family}`;
+    : `Override: ${currentMode === "inherit" ? "inherit mode" : currentMode}, ${currentFamily === "inherit" ? "inherit family" : currentFamily}`;
 
   return (
-    <Box
-      sx={{
-        borderRadius: 2,
-        border: "1px solid",
-        borderColor: "info.main",
-        bgcolor: "rgba(2, 136, 209, 0.06)",
-        p: 2.5
-      }}
-    >
+    <div className="rounded-lg border border-blue-500/60 bg-blue-500/5 p-5">
       <input type="hidden" name="upstream_dns_resolution_present" value="1" />
-      <Stack spacing={2}>
-        <Stack direction="row" alignItems="center" justifyContent="space-between">
-          <Box>
-            <Typography variant="subtitle1" fontWeight={600}>
-              Upstream DNS Pinning
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              {summary}
-            </Typography>
-          </Box>
-          <IconButton
-            size="small"
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row items-center justify-between">
+          <div>
+            <p className="text-sm font-semibold">Upstream DNS Pinning</p>
+            <p className="text-sm text-muted-foreground">{summary}</p>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
             aria-label={expanded ? "Collapse upstream DNS pinning options" : "Expand upstream DNS pinning options"}
             onClick={() => setExpanded(prev => !prev)}
-            sx={{
-              transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-              transition: "transform 0.2s ease"
-            }}
+            className="h-8 w-8"
           >
-            <ExpandMoreIcon fontSize="small" />
-          </IconButton>
-        </Stack>
+            <ChevronDown className={cn(
+              "h-4 w-4 transition-transform duration-200",
+              expanded && "rotate-180"
+            )} />
+          </Button>
+        </div>
 
-        <Collapse in={expanded} timeout="auto" unmountOnExit={false}>
-          <Stack spacing={2}>
-            <TextField
-              name="upstream_dns_resolution_mode"
-              label="Resolution Mode"
-              select
-              defaultValue={mode}
-              helperText="Inherit uses the global setting. Enabled/Disabled overrides per host."
-              size="small"
-              fullWidth
-            >
-              <MenuItem value="inherit">Inherit Global</MenuItem>
-              <MenuItem value="enabled">Enabled</MenuItem>
-              <MenuItem value="disabled">Disabled</MenuItem>
-            </TextField>
-            <TextField
-              name="upstream_dns_resolution_family"
-              label="Address Family Preference"
-              select
-              defaultValue={family}
-              helperText="Both resolves AAAA + A with IPv6 preferred ordering."
-              size="small"
-              fullWidth
-            >
-              <MenuItem value="inherit">Inherit Global</MenuItem>
-              <MenuItem value="both">Both (Prefer IPv6)</MenuItem>
-              <MenuItem value="ipv6">IPv6 only</MenuItem>
-              <MenuItem value="ipv4">IPv4 only</MenuItem>
-            </TextField>
-            <Alert severity="info">
-              When enabled, hostname upstreams are resolved during config apply and written to Caddy as concrete IP dials. If this handler has
-              multiple different HTTPS upstream hostnames, HTTPS pinning is skipped for those HTTPS upstreams to avoid SNI mismatch.
+        <div className={cn(
+          "overflow-hidden transition-all duration-200",
+          expanded ? "max-h-[600px] opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+        )}>
+          <div className="flex flex-col gap-4">
+            <div>
+              <label className="text-sm font-medium mb-1 block">Resolution Mode</label>
+              <input type="hidden" name="upstream_dns_resolution_mode" value={currentMode} />
+              <Select value={currentMode} onValueChange={(v) => setCurrentMode(v as ResolutionMode)}>
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="inherit">Inherit Global</SelectItem>
+                  <SelectItem value="enabled">Enabled</SelectItem>
+                  <SelectItem value="disabled">Disabled</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground mt-1">
+                Inherit uses the global setting. Enabled/Disabled overrides per host.
+              </p>
+            </div>
+            <div>
+              <label className="text-sm font-medium mb-1 block">Address Family Preference</label>
+              <input type="hidden" name="upstream_dns_resolution_family" value={currentFamily} />
+              <Select value={currentFamily} onValueChange={(v) => setCurrentFamily(v as FamilyMode)}>
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="inherit">Inherit Global</SelectItem>
+                  <SelectItem value="both">Both (Prefer IPv6)</SelectItem>
+                  <SelectItem value="ipv6">IPv6 only</SelectItem>
+                  <SelectItem value="ipv4">IPv4 only</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground mt-1">Both resolves AAAA + A with IPv6 preferred ordering.</p>
+            </div>
+            <Alert>
+              <AlertDescription>
+                When enabled, hostname upstreams are resolved during config apply and written to Caddy as concrete IP dials. If this handler has
+                multiple different HTTPS upstream hostnames, HTTPS pinning is skipped for those HTTPS upstreams to avoid SNI mismatch.
+              </AlertDescription>
             </Alert>
-          </Stack>
-        </Collapse>
-      </Stack>
-    </Box>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/UpstreamInput.tsx b/src/components/proxy-hosts/UpstreamInput.tsx
index 49428316..42a70a16 100644
--- a/src/components/proxy-hosts/UpstreamInput.tsx
+++ b/src/components/proxy-hosts/UpstreamInput.tsx
@@ -1,10 +1,9 @@
-import { Box, Button, IconButton, Stack, TextField, Tooltip, Typography, Autocomplete } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
-import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { MinusCircle, Plus } from "lucide-react";
 import { useState } from "react";
 
-const PROTOCOL_OPTIONS = ["http://", "https://"];
-
 type UpstreamEntry = {
     protocol: string;
     address: string;
@@ -33,7 +32,7 @@ export function UpstreamInput({
 
     const [entries, setEntries] = useState<UpstreamEntry[]>(initialEntries);
 
-    const handleProtocolChange = (index: number, newProtocol: string | null) => {
+    const handleProtocolChange = (index: number, newProtocol: string) => {
         const updated = [...entries];
         updated[index].protocol = newProtocol || "http://";
         setEntries(updated);
@@ -69,69 +68,56 @@ export function UpstreamInput({
         .join("\n");
 
     return (
-        <Box>
+        <div>
             <input type="hidden" name={name} value={serializedValue} />
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                Upstreams
-            </Typography>
-            <Stack spacing={1.5}>
+            <p className="text-sm text-muted-foreground mb-1">Upstreams</p>
+            <div className="flex flex-col gap-3">
                 {entries.map((entry, index) => (
-                    <Stack key={index} direction="row" spacing={1} alignItems="flex-start">
-                        <Autocomplete
-                            freeSolo
-                            options={PROTOCOL_OPTIONS}
-                            value={entry.protocol}
-                            onChange={(_, newValue) => handleProtocolChange(index, newValue)}
-                            onInputChange={(_, newInputValue) => {
-                                if (newInputValue) {
-                                    handleProtocolChange(index, newInputValue);
-                                }
-                            }}
-                            disableClearable
-                            sx={{ width: 140 }}
-                            renderInput={(params) => (
-                                <TextField
-                                    {...params}
-                                    size="small"
-                                    placeholder="http://"
-                                />
-                            )}
-                        />
-                        <TextField
+                    <div key={index} className="flex items-start gap-2">
+                        <Select value={entry.protocol} onValueChange={(val) => handleProtocolChange(index, val)}>
+                            <SelectTrigger className="w-28">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="http://">http://</SelectItem>
+                                <SelectItem value="https://">https://</SelectItem>
+                            </SelectContent>
+                        </Select>
+                        <Input
                             value={entry.address}
                             onChange={(e) => handleAddressChange(index, e.target.value)}
                             placeholder="10.0.0.5:8080"
-                            size="small"
-                            fullWidth
+                            className="flex-1"
                             required={index === 0}
                         />
-                        <Tooltip title={entries.length === 1 ? "At least one upstream required" : "Remove upstream"}>
-                            <span>
-                                <IconButton
-                                    size="small"
-                                    onClick={() => handleRemove(index)}
-                                    disabled={entries.length === 1}
-                                    color="error"
-                                    sx={{ mt: 0.5 }}
-                                >
-                                    <RemoveCircleIcon fontSize="small" />
-                                </IconButton>
-                            </span>
-                        </Tooltip>
-                    </Stack>
+                        <span title={entries.length === 1 ? "At least one upstream required" : "Remove upstream"}>
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                onClick={() => handleRemove(index)}
+                                disabled={entries.length === 1}
+                                className="text-destructive hover:text-destructive mt-0.5"
+                            >
+                                <MinusCircle className="h-4 w-4" />
+                            </Button>
+                        </span>
+                    </div>
                 ))}
                 <Button
-                    startIcon={<AddIcon />}
+                    type="button"
+                    variant="ghost"
+                    size="sm"
                     onClick={handleAdd}
-                    size="small"
-                    sx={{ alignSelf: "flex-start" }}
+                    className="self-start"
                 >
+                    <Plus className="h-4 w-4 mr-1" />
                     Add Upstream
                 </Button>
-            </Stack>
-            <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: "block" }}>
+            </div>
+            <span className="text-xs text-muted-foreground mt-0.5 block">
                 Backend servers to proxy requests to
-            </Typography>
-        </Box>
+            </span>
+        </div>
     );
 }
diff --git a/src/components/proxy-hosts/WafFields.tsx b/src/components/proxy-hosts/WafFields.tsx
index f7a63f4f..15154c67 100644
--- a/src/components/proxy-hosts/WafFields.tsx
+++ b/src/components/proxy-hosts/WafFields.tsx
@@ -1,22 +1,13 @@
 "use client";
 
-import {
-  Box,
-  Button,
-  Checkbox,
-  Collapse,
-  Divider,
-  FormControlLabel,
-  Stack,
-  Switch,
-  TextField,
-  Typography,
-} from "@mui/material";
-import GppBadIcon from "@mui/icons-material/GppBad";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { ChevronDown, ClipboardCopy, ShieldOff } from "lucide-react";
 import { useState } from "react";
-import { type WafHostConfig } from "@/src/lib/models/proxy-hosts";
+import { type WafHostConfig } from "@/lib/models/proxy-hosts";
 import { WafRuleExclusions } from "./WafRuleExclusions";
 
 type WafMode = "merge" | "override";
@@ -45,16 +36,7 @@ export function WafFields({ value, showModeSelector = true }: Props) {
   const [showTemplates, setShowTemplates] = useState(false);
 
   return (
-    <Box
-      sx={{
-        borderRadius: 2,
-        border: "1px solid",
-        borderColor: "error.main",
-        bgcolor: (theme) =>
-          theme.palette.mode === "dark" ? "rgba(211,47,47,0.06)" : "rgba(211,47,47,0.04)",
-        p: 2,
-      }}
-    >
+    <div className="rounded-lg border border-destructive bg-destructive/5 p-4">
       <input type="hidden" name="waf_present" value="1" />
       <input type="hidden" name="waf_enabled" value={enabled ? "on" : ""} />
       <input type="hidden" name="waf_mode" value={wafMode} />
@@ -63,211 +45,158 @@ export function WafFields({ value, showModeSelector = true }: Props) {
       <input type="hidden" name="waf_custom_directives" value={customDirectives} />
 
       {/* Header */}
-      <Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
-        <Stack direction="row" alignItems="flex-start" spacing={1.5} flex={1} minWidth={0}>
-          <Box
-            sx={{
-              mt: 0.25,
-              width: 32,
-              height: 32,
-              borderRadius: 1.5,
-              bgcolor: "error.main",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flexShrink: 0,
-            }}
-          >
-            <GppBadIcon sx={{ fontSize: 18, color: "#fff" }} />
-          </Box>
-          <Box minWidth={0}>
-            <Typography variant="subtitle1" fontWeight={700} lineHeight={1.3}>
-              Web Application Firewall
-            </Typography>
-            <Typography variant="body2" color="text.secondary" mt={0.25}>
+      <div className="flex flex-row items-start justify-between gap-2">
+        <div className="flex flex-row items-start gap-3 flex-1 min-w-0">
+          <div className="mt-0.5 w-8 h-8 rounded-xl bg-destructive flex items-center justify-center shrink-0">
+            <ShieldOff className="h-4 w-4 text-white" />
+          </div>
+          <div className="min-w-0">
+            <p className="text-sm font-bold leading-snug">Web Application Firewall</p>
+            <p className="text-sm text-muted-foreground mt-0.5">
               Inspect and block malicious requests via Coraza / OWASP CRS
-            </Typography>
-          </Box>
-        </Stack>
+            </p>
+          </div>
+        </div>
         <Switch
           checked={enabled}
-          onChange={(_, checked) => setEnabled(checked)}
-          sx={{ flexShrink: 0 }}
+          onCheckedChange={setEnabled}
+          className="shrink-0"
         />
-      </Stack>
+      </div>
 
       {/* Expanded content */}
-      <Collapse in={enabled} timeout="auto" unmountOnExit>
-        <Box mt={2}>
-          {/* Override mode selector */}
-          {showModeSelector && (
-            <>
-              <Stack direction="row" spacing={1}>
-                {(["merge", "override"] as WafMode[]).map((v) => (
-                  <Box
-                    key={v}
-                    onClick={() => setWafMode(v)}
-                    sx={{
-                      flex: 1,
-                      py: 0.75,
-                      px: 1.5,
-                      borderRadius: 1.5,
-                      border: "1.5px solid",
-                      borderColor: wafMode === v ? "error.main" : "divider",
-                      bgcolor:
-                        wafMode === v
-                          ? (theme) =>
-                              theme.palette.mode === "dark"
-                                ? "rgba(211,47,47,0.12)"
-                                : "rgba(211,47,47,0.08)"
-                          : "transparent",
-                      cursor: "pointer",
-                      textAlign: "center",
-                      transition: "all 0.15s ease",
-                      userSelect: "none",
-                      "&:hover": {
-                        borderColor: wafMode === v ? "error.main" : "text.disabled",
-                      },
-                    }}
-                  >
-                    <Typography
-                      variant="body2"
-                      fontWeight={wafMode === v ? 600 : 400}
-                      color={wafMode === v ? "error.main" : "text.secondary"}
-                      sx={{ transition: "all 0.15s ease" }}
-                    >
-                      {v === "merge" ? "Merge with global" : "Override global"}
-                    </Typography>
-                  </Box>
-                ))}
-              </Stack>
-              <Divider sx={{ mt: 2, mb: 2 }} />
-            </>
-          )}
-          {!showModeSelector && <Divider sx={{ mb: 2 }} />}
-
-          {/* Engine mode */}
-          <Typography
-            variant="caption"
-            color="text.secondary"
-            fontWeight={600}
-            sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}
-          >
-            Engine Mode
-          </Typography>
-          <Stack direction="row" spacing={1} mt={0.75}>
-            {(["inherit", "Off", "On"] as EngineMode[]).map((v) => (
-              <Box
-                key={v}
-                onClick={() => setEngineMode(v)}
-                sx={{
-                  flex: 1,
-                  py: 0.75,
-                  px: 1,
-                  borderRadius: 1.5,
-                  border: "1.5px solid",
-                  borderColor: engineMode === v ? "error.main" : "divider",
-                  bgcolor:
-                    engineMode === v
-                      ? (theme) =>
-                          theme.palette.mode === "dark"
-                            ? "rgba(211,47,47,0.12)"
-                            : "rgba(211,47,47,0.08)"
-                      : "transparent",
-                  cursor: "pointer",
-                  textAlign: "center",
-                  transition: "all 0.15s ease",
-                  userSelect: "none",
-                  "&:hover": {
-                    borderColor: engineMode === v ? "error.main" : "text.disabled",
-                  },
-                }}
-              >
-                <Typography
-                  variant="body2"
-                  fontWeight={engineMode === v ? 600 : 400}
-                  color={engineMode === v ? "error.main" : "text.secondary"}
-                  sx={{ transition: "all 0.15s ease", fontSize: "0.8rem" }}
+      <div className={cn(
+        "overflow-hidden transition-all duration-200",
+        enabled ? "max-h-[2000px] opacity-100 mt-4" : "max-h-0 opacity-0 pointer-events-none"
+      )}>
+        {/* Override mode selector */}
+        {showModeSelector && (
+          <>
+            <div className="flex gap-2">
+              {(["merge", "override"] as WafMode[]).map((v) => (
+                <div
+                  key={v}
+                  onClick={() => setWafMode(v)}
+                  className={cn(
+                    "flex-1 py-2 px-3 rounded-xl border-[1.5px] cursor-pointer text-center transition-all duration-150 select-none",
+                    wafMode === v
+                      ? "border-destructive bg-destructive/10"
+                      : "border-border hover:border-muted-foreground"
+                  )}
                 >
-                  {v === "inherit" ? "Global default" : v}
-                </Typography>
-              </Box>
-            ))}
-          </Stack>
+                  <p className={cn(
+                    "text-sm transition-all duration-150",
+                    wafMode === v ? "font-semibold text-destructive" : "font-normal text-muted-foreground"
+                  )}>
+                    {v === "merge" ? "Merge with global" : "Override global"}
+                  </p>
+                </div>
+              ))}
+            </div>
+            <div className="border-t border-border mt-4 mb-4" />
+          </>
+        )}
+        {!showModeSelector && <div className="border-t border-border mb-4" />}
 
-          <Divider sx={{ mt: 2, mb: 1.5 }} />
-
-          {/* OWASP CRS */}
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={loadCrs}
-                onChange={(_, checked) => setLoadCrs(checked)}
-                size="small"
-              />
-            }
-            label={
-              <Box>
-                <Typography variant="body2" fontWeight={500}>
-                  Load OWASP Core Rule Set
-                </Typography>
-                <Typography variant="caption" color="text.secondary">
-                  Covers SQLi, XSS, LFI, RCE and hundreds of other attack patterns
-                </Typography>
-              </Box>
-            }
-          />
-
-          {/* Excluded rule IDs */}
-          <Box mt={1.5}>
-            <WafRuleExclusions value={value?.excluded_rule_ids} />
-          </Box>
-
-          {/* Custom directives */}
-          <Box mt={1.5}>
-            <TextField
-              label="Custom SecLang Directives"
-              multiline
-              minRows={3}
-              maxRows={10}
-              value={customDirectives}
-              onChange={(e) => setCustomDirectives(e.target.value)}
-              placeholder={`SecRule REQUEST_URI "@contains /secret" "id:9001,deny,status:403,log,msg:'Blocked path'"`}
-              inputProps={{ style: { fontFamily: "monospace", fontSize: "0.8rem" } }}
-              helperText="ModSecurity SecLang syntax. Appended after OWASP CRS if enabled."
-              fullWidth
-            />
-          </Box>
-
-          {/* Quick Templates */}
-          <Box mt={0.5}>
-            <Button
-              size="small"
-              endIcon={<ExpandMoreIcon sx={{ transform: showTemplates ? "rotate(180deg)" : "none", transition: "transform 0.2s" }} />}
-              onClick={() => setShowTemplates((v) => !v)}
-              sx={{ color: "text.secondary", textTransform: "none", px: 0 }}
+        {/* Engine mode */}
+        <span className="text-xs text-muted-foreground font-semibold uppercase tracking-wide">
+          Engine Mode
+        </span>
+        <div className="flex gap-2 mt-1.5">
+          {(["inherit", "Off", "On"] as EngineMode[]).map((v) => (
+            <div
+              key={v}
+              onClick={() => setEngineMode(v)}
+              className={cn(
+                "flex-1 py-2 px-2 rounded-xl border-[1.5px] cursor-pointer text-center transition-all duration-150 select-none",
+                engineMode === v
+                  ? "border-destructive bg-destructive/10"
+                  : "border-border hover:border-muted-foreground"
+              )}
             >
-              Quick Templates
-            </Button>
-            <Collapse in={showTemplates}>
-              <Stack spacing={0.75} mt={0.75}>
-                {QUICK_TEMPLATES.map((t) => (
-                  <Button
-                    key={t.label}
-                    size="small"
-                    variant="outlined"
-                    startIcon={<ContentCopyIcon fontSize="inherit" />}
-                    onClick={() => setCustomDirectives((prev) => prev ? `${prev}\n${t.snippet}` : t.snippet)}
-                    sx={{ justifyContent: "flex-start", textTransform: "none", fontFamily: "monospace", fontSize: "0.72rem" }}
-                  >
-                    {t.label}
-                  </Button>
-                ))}
-              </Stack>
-            </Collapse>
-          </Box>
-        </Box>
-      </Collapse>
-    </Box>
+              <p className={cn(
+                "text-[0.8rem] transition-all duration-150",
+                engineMode === v ? "font-semibold text-destructive" : "font-normal text-muted-foreground"
+              )}>
+                {v === "inherit" ? "Global default" : v}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="border-t border-border mt-4 mb-3" />
+
+        {/* OWASP CRS */}
+        <div className="flex items-start gap-2">
+          <Checkbox
+            id="waf-load-crs"
+            checked={loadCrs}
+            onCheckedChange={(checked) => setLoadCrs(!!checked)}
+          />
+          <label htmlFor="waf-load-crs" className="cursor-pointer">
+            <p className="text-sm font-medium">Load OWASP Core Rule Set</p>
+            <span className="text-xs text-muted-foreground">
+              Covers SQLi, XSS, LFI, RCE and hundreds of other attack patterns
+            </span>
+          </label>
+        </div>
+
+        {/* Excluded rule IDs */}
+        <div className="mt-4">
+          <WafRuleExclusions value={value?.excluded_rule_ids} />
+        </div>
+
+        {/* Custom directives */}
+        <div className="mt-4">
+          <Textarea
+            placeholder={`SecRule REQUEST_URI "@contains /secret" "id:9001,deny,status:403,log,msg:'Blocked path'"`}
+            value={customDirectives}
+            onChange={(e) => setCustomDirectives(e.target.value)}
+            className="font-mono text-xs min-h-[80px]"
+            rows={3}
+          />
+          <p className="text-xs text-muted-foreground mt-1">
+            Custom SecLang Directives — ModSecurity SecLang syntax. Appended after OWASP CRS if enabled.
+          </p>
+        </div>
+
+        {/* Quick Templates */}
+        <div className="mt-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowTemplates((v) => !v)}
+            className="text-muted-foreground px-0 text-sm"
+          >
+            Quick Templates
+            <ChevronDown className={cn(
+              "h-4 w-4 ml-1 transition-transform duration-200",
+              showTemplates && "rotate-180"
+            )} />
+          </Button>
+          <div className={cn(
+            "overflow-hidden transition-all duration-200",
+            showTemplates ? "max-h-[500px] opacity-100 mt-2" : "max-h-0 opacity-0 pointer-events-none"
+          )}>
+            <div className="flex flex-col gap-1.5">
+              {QUICK_TEMPLATES.map((t) => (
+                <Button
+                  key={t.label}
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={() => setCustomDirectives((prev) => prev ? `${prev}\n${t.snippet}` : t.snippet)}
+                  className="justify-start font-mono text-[0.72rem]"
+                >
+                  <ClipboardCopy className="h-3 w-3 mr-1 shrink-0" />
+                  {t.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/src/components/proxy-hosts/WafRuleExclusions.tsx b/src/components/proxy-hosts/WafRuleExclusions.tsx
index 7716814f..9acb21f9 100644
--- a/src/components/proxy-hosts/WafRuleExclusions.tsx
+++ b/src/components/proxy-hosts/WafRuleExclusions.tsx
@@ -1,7 +1,9 @@
 "use client";
 
-import { Box, Chip, IconButton, Stack, TextField, Typography } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Plus, X } from "lucide-react";
 import { useState } from "react";
 
 type Props = {
@@ -25,39 +27,45 @@ export function WafRuleExclusions({ value }: Props) {
   }
 
   return (
-    <Box>
+    <div>
       <input type="hidden" name="waf_excluded_rule_ids" value={JSON.stringify(ids)} />
-      <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ textTransform: "uppercase", letterSpacing: 0.5 }}>
+      <span className="text-xs text-muted-foreground font-semibold uppercase tracking-wide">
         Excluded Rule IDs
-      </Typography>
-      <Typography variant="caption" color="text.secondary" display="block" mb={0.75}>
+      </span>
+      <span className="text-xs text-muted-foreground block mb-2">
         Rules listed here are disabled via <code>SecRuleRemoveById</code>
-      </Typography>
-      <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" gap={0.75} mb={ids.length ? 1 : 0}>
-        {ids.map((id) => (
-          <Chip
-            key={id}
-            label={id}
-            size="small"
-            onDelete={() => removeId(id)}
-            sx={{ fontFamily: "monospace", fontSize: "0.75rem" }}
-          />
-        ))}
-      </Stack>
-      <Stack direction="row" spacing={1} alignItems="center" sx={{ maxWidth: 260 }}>
-        <TextField
-          size="small"
-          label="Rule ID"
+      </span>
+      {ids.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mb-2">
+          {ids.map((id) => (
+            <Badge key={id} variant="secondary" className="gap-1 pr-1 font-mono text-xs">
+              {id}
+              <button
+                type="button"
+                onClick={() => removeId(id)}
+                className="rounded-full hover:bg-destructive/20 p-0.5"
+              >
+                <X className="h-3 w-3" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+      <div className="flex items-center gap-2 max-w-[260px]">
+        <Input
+          size={1}
+          placeholder="Rule ID"
           value={inputVal}
           onChange={(e) => setInputVal(e.target.value)}
           onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addId(); } }}
-          inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
-          sx={{ flex: 1 }}
+          inputMode="numeric"
+          pattern="[0-9]*"
+          className="flex-1 h-8 text-sm"
         />
-        <IconButton size="small" onClick={addId} color="primary">
-          <AddIcon fontSize="small" />
-        </IconButton>
-      </Stack>
-    </Box>
+        <Button type="button" size="icon" variant="ghost" onClick={addId} className="h-8 w-8">
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
   );
 }