diff --git a/app/(dashboard)/OverviewClient.tsx b/app/(dashboard)/OverviewClient.tsx
index 1f0993fc..9b20bee0 100644
--- a/app/(dashboard)/OverviewClient.tsx
+++ b/app/(dashboard)/OverviewClient.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import Link from "next/link";
-import Grid from "@mui/material/Grid";
-import { Card, CardActionArea, CardContent, Paper, Stack, Typography, Box } from "@mui/material";
-import BarChartIcon from "@mui/icons-material/BarChart";
+import { Card, CardContent } from "@/components/ui/card";
+import { BarChart2 } from "lucide-react";
 import { ReactNode } from "react";
 
 type StatCard = {
@@ -35,155 +34,111 @@ export default function OverviewClient({
   recentEvents: RecentEvent[];
 }) {
   return (
-    <Stack spacing={5}>
-      <Stack spacing={1.5}>
-        <Typography variant="overline" sx={{ color: "rgba(148, 163, 184, 0.6)", letterSpacing: 4 }}>
+    <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-1.5">
+        <span className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400/60">
           Control Center
-        </Typography>
-        <Typography
-          variant="h4"
-          sx={{
-            fontWeight: 700,
+        </span>
+        <h1
+          className="text-3xl font-bold"
+          style={{
             background: "linear-gradient(120deg, rgba(127, 91, 255, 1) 0%, rgba(34, 211, 238, 0.9) 80%)",
             WebkitBackgroundClip: "text",
-            color: "transparent"
+            WebkitTextFillColor: "transparent"
           }}
         >
           Welcome back, {userName}
-        </Typography>
-        <Typography color="text.secondary" sx={{ maxWidth: 560 }}>
+        </h1>
+        <p className="text-sm text-muted-foreground max-w-[560px]">
           Everything you need to orchestrate Caddy proxies, certificates, and secure edge services lives here.
-        </Typography>
-      </Stack>
+        </p>
+      </div>
 
-      <Grid container spacing={3}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
         {stats.map((stat) => (
-          <Grid key={stat.label} size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-            <Card
-              elevation={0}
-              sx={{
-                height: "100%",
-                border: "1px solid rgba(148, 163, 184, 0.14)"
-              }}
+          <Card
+            key={stat.label}
+            className="border border-slate-400/10 bg-transparent shadow-none h-full"
+          >
+            <Link
+              href={stat.href}
+              className="block h-full transition-colors hover:bg-gradient-to-br hover:from-violet-500/10 hover:to-cyan-400/[0.06] rounded-[inherit]"
             >
-              <CardActionArea
-                component={Link}
-                href={stat.href}
-                sx={{
-                  height: "100%",
-                  p: 0,
-                  "&:hover": {
-                    background: "linear-gradient(135deg, rgba(127, 91, 255, 0.16), rgba(34, 211, 238, 0.08))"
-                  }
-                }}
-              >
-                <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-                  <Box
-                    sx={{
-                      color: "rgba(127, 91, 255, 0.8)",
-                      display: "flex",
-                      alignItems: "center"
-                    }}
-                  >
-                    {stat.icon}
-                  </Box>
-                  <Typography variant="h4" sx={{ fontWeight: 700, letterSpacing: "-0.03em" }}>
-                    {stat.count}
-                  </Typography>
-                  <Typography color="text.secondary" sx={{ fontWeight: 500 }}>
-                    {stat.label}
-                  </Typography>
-                </CardContent>
-              </CardActionArea>
-            </Card>
-          </Grid>
+              <CardContent className="flex flex-col gap-1 pt-6">
+                <div className="text-violet-400/80 flex items-center">
+                  {stat.icon}
+                </div>
+                <span className="text-3xl font-bold tracking-tight">
+                  {stat.count}
+                </span>
+                <span className="text-sm text-muted-foreground font-medium">
+                  {stat.label}
+                </span>
+              </CardContent>
+            </Link>
+          </Card>
         ))}
 
         {/* Traffic (24h) card */}
-        <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-          <Card elevation={0} sx={{ height: "100%", border: "1px solid rgba(148, 163, 184, 0.14)" }}>
-            <CardActionArea
-              component={Link}
-              href="/analytics"
-              sx={{
-                height: "100%",
-                p: 0,
-                "&:hover": {
-                  background: "linear-gradient(135deg, rgba(127, 91, 255, 0.16), rgba(34, 211, 238, 0.08))"
-                }
-              }}
-            >
-              <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
-                <Box sx={{ color: "rgba(127, 91, 255, 0.8)", display: "flex", alignItems: "center" }}>
-                  <BarChartIcon fontSize="large" />
-                </Box>
-                {trafficSummary ? (
-                  <>
-                    <Typography variant="h4" sx={{ fontWeight: 700, letterSpacing: "-0.03em" }}>
-                      {trafficSummary.totalRequests.toLocaleString()}
-                    </Typography>
-                    <Typography color="text.secondary" sx={{ fontWeight: 500 }}>
-                      Traffic (24h)
-                      {trafficSummary.totalRequests > 0 && (
-                        <Box component="span" sx={{ ml: 1, color: trafficSummary.blockedPercent > 0 ? "error.light" : "text.secondary", fontSize: "0.8em" }}>
-                          · {trafficSummary.blockedPercent}% blocked
-                        </Box>
-                      )}
-                    </Typography>
-                  </>
-                ) : (
-                  <>
-                    <Typography variant="h4" sx={{ fontWeight: 700, letterSpacing: "-0.03em" }}>—</Typography>
-                    <Typography color="text.secondary" sx={{ fontWeight: 500 }}>Traffic (24h)</Typography>
-                  </>
-                )}
-              </CardContent>
-            </CardActionArea>
-          </Card>
-        </Grid>
-      </Grid>
-
-      <Stack spacing={2}>
-        <Typography variant="h6" sx={{ fontWeight: 600, letterSpacing: -0.2 }}>
-          Recent Activity
-        </Typography>
-        {recentEvents.length === 0 ? (
-          <Paper
-            elevation={0}
-            sx={{
-              p: 4,
-              textAlign: "center",
-              color: "text.secondary",
-              background: "rgba(12, 18, 30, 0.7)"
-            }}
+        <Card className="border border-slate-400/10 bg-transparent shadow-none h-full">
+          <Link
+            href="/analytics"
+            className="block h-full transition-colors hover:bg-gradient-to-br hover:from-violet-500/10 hover:to-cyan-400/[0.06] rounded-[inherit]"
           >
+            <CardContent className="flex flex-col gap-1 pt-6">
+              <div className="text-violet-400/80 flex items-center">
+                <BarChart2 className="h-8 w-8" />
+              </div>
+              {trafficSummary ? (
+                <>
+                  <span className="text-3xl font-bold tracking-tight">
+                    {trafficSummary.totalRequests.toLocaleString()}
+                  </span>
+                  <span className="text-sm text-muted-foreground font-medium">
+                    Traffic (24h)
+                    {trafficSummary.totalRequests > 0 && (
+                      <span
+                        className={`ml-1 text-[0.8em] ${trafficSummary.blockedPercent > 0 ? "text-red-400" : "text-muted-foreground"}`}
+                      >
+                        · {trafficSummary.blockedPercent}% blocked
+                      </span>
+                    )}
+                  </span>
+                </>
+              ) : (
+                <>
+                  <span className="text-3xl font-bold tracking-tight">—</span>
+                  <span className="text-sm text-muted-foreground font-medium">Traffic (24h)</span>
+                </>
+              )}
+            </CardContent>
+          </Link>
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <h2 className="text-lg font-semibold tracking-tight">Recent Activity</h2>
+        {recentEvents.length === 0 ? (
+          <div className="p-8 text-center text-muted-foreground rounded-md bg-[rgba(12,18,30,0.7)]">
             No activity recorded yet.
-          </Paper>
+          </div>
         ) : (
-          <Stack spacing={1.5}>
+          <div className="flex flex-col gap-1.5">
             {recentEvents.map((event, index) => (
-              <Paper
+              <div
                 key={`${event.created_at}-${index}`}
-                elevation={0}
-                sx={{
-                  p: 3,
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  gap: 2,
-                  background: "linear-gradient(120deg, rgba(17, 25, 40, 0.9), rgba(15, 23, 42, 0.7))",
-                  border: "1px solid rgba(148, 163, 184, 0.08)"
-                }}
+                className="flex justify-between items-center gap-2 rounded-md p-4 border border-slate-400/[0.08]"
+                style={{ background: "linear-gradient(120deg, rgba(17, 25, 40, 0.9), rgba(15, 23, 42, 0.7))" }}
               >
-                <Typography fontWeight={500}>{event.summary}</Typography>
-                <Typography variant="body2" color="text.secondary">
+                <span className="text-sm font-medium">{event.summary}</span>
+                <span className="text-sm text-muted-foreground whitespace-nowrap">
                   {new Date(event.created_at).toLocaleString()}
-                </Typography>
-              </Paper>
+                </span>
+              </div>
             ))}
-          </Stack>
+          </div>
         )}
-      </Stack>
-    </Stack>
+      </div>
+    </div>
   );
 }
diff --git a/app/(dashboard)/access-lists/AccessListsClient.tsx b/app/(dashboard)/access-lists/AccessListsClient.tsx
index 82babb69..1c848f2c 100644
--- a/app/(dashboard)/access-lists/AccessListsClient.tsx
+++ b/app/(dashboard)/access-lists/AccessListsClient.tsx
@@ -1,23 +1,12 @@
 "use client";
 
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Divider,
-  IconButton,
-  List,
-  ListItem,
-  ListItemSecondaryAction,
-  ListItemText,
-  Pagination,
-  Stack,
-  TextField,
-  Typography
-} from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
-import type { AccessList } from "@/src/lib/models/access-lists";
+import { Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import type { AccessList } from "@/lib/models/access-lists";
 import {
   addAccessEntryAction,
   createAccessListAction,
@@ -38,128 +27,157 @@ export default function AccessListsClient({ lists, pagination }: Props) {
   const searchParams = useSearchParams();
   const pageCount = Math.ceil(pagination.total / pagination.perPage);
 
-  function handlePageChange(_: React.ChangeEvent<unknown>, page: number) {
+  function handlePageChange(page: number) {
     const params = new URLSearchParams(searchParams.toString());
     params.set("page", String(page));
     router.push(`${pathname}?${params.toString()}`);
   }
-  return (
-    <Stack spacing={4} sx={{ width: "100%" }}>
-      <Stack spacing={1}>
-        <Typography variant="h4" fontWeight={600}>
-          Access Lists
-        </Typography>
-        <Typography color="text.secondary">Protect proxy hosts with HTTP basic authentication credentials.</Typography>
-      </Stack>
 
-      <Stack spacing={3}>
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-bold tracking-tight">Access Lists</h1>
+        <p className="text-sm text-muted-foreground">Protect proxy hosts with HTTP basic authentication credentials.</p>
+      </div>
+
+      <div className="flex flex-col gap-4">
         {lists.map((list) => (
           <Card key={list.id}>
-            <CardContent sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-              <Stack component="form" action={(formData) => updateAccessListAction(list.id, formData)} spacing={2}>
-                <Typography variant="h6" fontWeight={600}>
-                  Access List
-                </Typography>
-                <TextField name="name" label="Name" defaultValue={list.name} fullWidth />
-                <TextField
-                  name="description"
-                  label="Description"
-                  defaultValue={list.description ?? ""}
-                  multiline
-                  minRows={2}
-                  fullWidth
-                />
-                <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1 }}>
-                  <Button type="submit" variant="contained">
+            <CardContent className="flex flex-col gap-4 pt-6">
+              <form action={(formData) => updateAccessListAction(list.id, formData)} className="flex flex-col gap-3">
+                <h2 className="text-lg font-semibold">Access List</h2>
+                <div className="flex flex-col gap-1.5">
+                  <Label htmlFor={`name-${list.id}`}>Name</Label>
+                  <Input id={`name-${list.id}`} name="name" defaultValue={list.name} />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label htmlFor={`desc-${list.id}`}>Description</Label>
+                  <textarea
+                    id={`desc-${list.id}`}
+                    name="description"
+                    defaultValue={list.description ?? ""}
+                    rows={2}
+                    className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                  />
+                </div>
+                <div className="flex justify-end gap-2">
+                  <Button type="submit" variant="default">
                     Save
                   </Button>
                   <Button
                     type="submit"
                     formAction={deleteAccessListAction.bind(null, list.id)}
-                    variant="outlined"
-                    color="error"
+                    variant="outline"
+                    className="text-destructive hover:text-destructive"
                   >
                     Delete list
                   </Button>
-                </Box>
-              </Stack>
+                </div>
+              </form>
 
-              <Divider sx={{ my: 1 }} />
+              <Separator />
 
-              <Stack spacing={1.5}>
-                <Typography fontWeight={600}>Accounts</Typography>
+              <div className="flex flex-col gap-2">
+                <p className="font-semibold">Accounts</p>
                 {list.entries.length === 0 ? (
-                  <Typography color="text.secondary">No credentials configured.</Typography>
+                  <p className="text-sm text-muted-foreground">No credentials configured.</p>
                 ) : (
-                  <List dense disablePadding>
+                  <div className="flex flex-col gap-2">
                     {list.entries.map((entry) => (
-                      <ListItem key={entry.id} sx={{ bgcolor: "background.default", borderRadius: 2, mb: 1 }}>
-                        <ListItemText primary={entry.username} secondary={`Created ${new Date(entry.created_at).toLocaleDateString()}`} />
-                        <ListItemSecondaryAction>
-                          <form action={deleteAccessEntryAction.bind(null, list.id, entry.id)}>
-                            <IconButton type="submit" edge="end" color="error">
-                              <DeleteIcon fontSize="small" />
-                            </IconButton>
-                          </form>
-                        </ListItemSecondaryAction>
-                      </ListItem>
+                      <div
+                        key={entry.id}
+                        className="flex items-center justify-between rounded-md bg-muted/40 px-3 py-2"
+                      >
+                        <div>
+                          <p className="text-sm font-medium">{entry.username}</p>
+                          <p className="text-xs text-muted-foreground">
+                            Created {new Date(entry.created_at).toLocaleDateString()}
+                          </p>
+                        </div>
+                        <form action={deleteAccessEntryAction.bind(null, list.id, entry.id)}>
+                          <Button type="submit" variant="ghost" size="icon" className="h-8 w-8 text-destructive">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </form>
+                      </div>
                     ))}
-                  </List>
+                  </div>
                 )}
-              </Stack>
+              </div>
 
-              <Divider sx={{ my: 1 }} />
+              <Separator />
 
-              <Stack component="form" action={(formData) => addAccessEntryAction(list.id, formData)} spacing={1.5} direction={{ xs: "column", sm: "row" }}>
-                <TextField name="username" label="Username" required fullWidth />
-                <TextField name="password" label="Password" type="password" required fullWidth />
-                <Button type="submit" variant="contained">
-                  Add
-                </Button>
-              </Stack>
+              <form
+                action={(formData) => addAccessEntryAction(list.id, formData)}
+                className="flex flex-col sm:flex-row gap-2 items-end"
+              >
+                <div className="flex flex-col gap-1.5 w-full">
+                  <Label htmlFor={`username-${list.id}`}>Username</Label>
+                  <Input id={`username-${list.id}`} name="username" required />
+                </div>
+                <div className="flex flex-col gap-1.5 w-full">
+                  <Label htmlFor={`password-${list.id}`}>Password</Label>
+                  <Input id={`password-${list.id}`} name="password" type="password" required />
+                </div>
+                <Button type="submit" className="shrink-0">Add</Button>
+              </form>
             </CardContent>
           </Card>
         ))}
-      </Stack>
+      </div>
 
       {pageCount > 1 && (
-        <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
-          <Pagination
-            count={pageCount}
-            page={pagination.page}
-            onChange={handlePageChange}
-            color="primary"
-            shape="rounded"
-          />
-        </Box>
+        <div className="flex justify-center gap-2 mt-2">
+          {Array.from({ length: pageCount }, (_, i) => i + 1).map((page) => (
+            <Button
+              key={page}
+              variant={page === pagination.page ? "default" : "outline"}
+              size="sm"
+              onClick={() => handlePageChange(page)}
+            >
+              {page}
+            </Button>
+          ))}
+        </div>
       )}
 
-      <Stack spacing={2} component="section">
-        <Typography variant="h6" fontWeight={600}>
-          Create access list
-        </Typography>
+      <section className="flex flex-col gap-3">
+        <h2 className="text-lg font-semibold">Create access list</h2>
         <Card>
-          <CardContent>
-            <Stack component="form" action={createAccessListAction} spacing={2}>
-              <TextField name="name" label="Name" placeholder="Internal users" required fullWidth />
-              <TextField name="description" label="Description" placeholder="Optional description" multiline minRows={2} fullWidth />
-              <TextField
-                name="users"
-                label="Seed members"
-                helperText="One per line, username:password"
-                multiline
-                minRows={3}
-                fullWidth
-              />
-              <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-                <Button type="submit" variant="contained">
-                  Create Access List
-                </Button>
-              </Box>
-            </Stack>
+          <CardContent className="pt-6">
+            <form action={createAccessListAction} className="flex flex-col gap-3">
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="create-name">Name</Label>
+                <Input id="create-name" name="name" placeholder="Internal users" required />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="create-description">Description</Label>
+                <textarea
+                  id="create-description"
+                  name="description"
+                  placeholder="Optional description"
+                  rows={2}
+                  className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                />
+              </div>
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="create-users">Seed members</Label>
+                <textarea
+                  id="create-users"
+                  name="users"
+                  rows={3}
+                  placeholder="One per line, username:password"
+                  className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+                />
+                <p className="text-xs text-muted-foreground">One per line, username:password</p>
+              </div>
+              <div className="flex justify-end">
+                <Button type="submit">Create Access List</Button>
+              </div>
+            </form>
           </CardContent>
         </Card>
-      </Stack>
-    </Stack>
+      </section>
+    </div>
   );
 }
diff --git a/app/(dashboard)/audit-log/AuditLogClient.tsx b/app/(dashboard)/audit-log/AuditLogClient.tsx
index f868a57b..2005dd3c 100644
--- a/app/(dashboard)/audit-log/AuditLogClient.tsx
+++ b/app/(dashboard)/audit-log/AuditLogClient.tsx
@@ -2,9 +2,10 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { Card, Chip, Stack, TextField, Typography } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-import { DataTable } from "@/src/components/ui/DataTable";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { DataTable } from "@/components/ui/DataTable";
+import { SearchField } from "@/components/ui/SearchField";
 
 type EventRow = {
   id: number;
@@ -58,9 +59,9 @@ export default function AuditLogClient({ events, pagination, initialSearch }: Pr
       label: "Time",
       width: 180,
       render: (r: EventRow) => (
-        <Typography variant="body2" color="text.secondary" sx={{ whiteSpace: "nowrap" }}>
+        <span className="text-sm text-muted-foreground whitespace-nowrap">
           {new Date(r.created_at).toLocaleString()}
-        </Typography>
+        </span>
       ),
     },
     {
@@ -68,53 +69,44 @@ export default function AuditLogClient({ events, pagination, initialSearch }: Pr
       label: "User",
       width: 160,
       render: (r: EventRow) => (
-        <Chip label={r.user} size="small" variant="outlined" />
+        <Badge variant="outline">{r.user}</Badge>
       ),
     },
     {
       id: "summary",
       label: "Event",
       render: (r: EventRow) => (
-        <Typography variant="body2">{r.summary}</Typography>
+        <p className="text-sm">{r.summary}</p>
       ),
     },
   ];
 
   const mobileCard = (r: EventRow) => (
-    <Card variant="outlined" sx={{ p: 2 }}>
-      <Stack spacing={0.5}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center">
-          <Chip label={r.user} size="small" variant="outlined" />
-          <Typography variant="caption" color="text.secondary">
+    <Card>
+      <CardContent className="p-3 flex flex-col gap-1">
+        <div className="flex justify-between items-center">
+          <Badge variant="outline">{r.user}</Badge>
+          <span className="text-xs text-muted-foreground">
             {new Date(r.created_at).toLocaleString()}
-          </Typography>
-        </Stack>
-        <Typography variant="body2">{r.summary}</Typography>
-      </Stack>
+          </span>
+        </div>
+        <p className="text-sm">{r.summary}</p>
+      </CardContent>
     </Card>
   );
 
   return (
-    <Stack spacing={2} sx={{ width: "100%" }}>
-      <Typography variant="h4" fontWeight={600}>
-        Audit Log
-      </Typography>
-      <Typography color="text.secondary">Review configuration changes and user activity.</Typography>
+    <div className="flex flex-col gap-4 w-full">
+      <h1 className="text-2xl font-bold tracking-tight">Audit Log</h1>
+      <p className="text-sm text-muted-foreground">Review configuration changes and user activity.</p>
 
-      <TextField
-        placeholder="Search audit log..."
+      <SearchField
         value={searchTerm}
         onChange={(e) => {
           setSearchTerm(e.target.value);
           updateSearch(e.target.value);
         }}
-        slotProps={{
-          input: {
-            startAdornment: <SearchIcon sx={{ mr: 1, color: "rgba(255, 255, 255, 0.5)" }} />,
-          },
-        }}
-        size="small"
-        sx={{ maxWidth: 400 }}
+        placeholder="Search audit log..."
       />
 
       <DataTable
@@ -125,6 +117,6 @@ export default function AuditLogClient({ events, pagination, initialSearch }: Pr
         pagination={pagination}
         mobileCard={mobileCard}
       />
-    </Stack>
+    </div>
   );
 }
diff --git a/app/(dashboard)/certificates/CertificatesClient.tsx b/app/(dashboard)/certificates/CertificatesClient.tsx
index 6b37e669..08d25272 100644
--- a/app/(dashboard)/certificates/CertificatesClient.tsx
+++ b/app/(dashboard)/certificates/CertificatesClient.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { Box, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
 import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import type { AcmeHost, CaCertificateView, CertExpiryStatus, ImportedCertView, ManagedCertView } from "./page";
 import { StatusSummaryBar } from "./components/StatusSummaryBar";
 import { AcmeTab } from "./components/AcmeTab";
@@ -54,23 +55,21 @@ export default function CertificatesClient({
   const setSearch =
     activeTab === "acme" ? setSearchAcme : activeTab === "imported" ? setSearchImported : setSearchCa;
 
-  function handleTabChange(_: React.SyntheticEvent, value: TabId) {
-    setActiveTab(value);
+  function handleTabChange(value: string) {
+    setActiveTab(value as TabId);
     setStatusFilter(null);
   }
 
   return (
-    <Stack spacing={3} sx={{ width: "100%" }}>
+    <div className="flex flex-col gap-4 w-full">
       {/* Page header */}
-      <Stack spacing={1}>
-        <Typography variant="h4" fontWeight={600}>
-          SSL/TLS Certificates
-        </Typography>
-        <Typography color="text.secondary">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-bold tracking-tight">SSL/TLS Certificates</h1>
+        <p className="text-sm text-muted-foreground">
           Caddy automatically handles HTTPS certificates for all proxy hosts using Let&apos;s Encrypt.
           Import custom certificates only when needed (internal CA, special requirements, etc.).
-        </Typography>
-      </Stack>
+        </p>
+      </div>
 
       {/* Status summary bar */}
       <StatusSummaryBar
@@ -81,26 +80,8 @@ export default function CertificatesClient({
         onFilter={setStatusFilter}
       />
 
-      {/* Tabs */}
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-        <Tabs value={activeTab} onChange={handleTabChange}>
-          <Tab
-            label={`ACME (${acmePagination.total})`}
-            value="acme"
-          />
-          <Tab
-            label={`Imported (${importedCerts.length})`}
-            value="imported"
-          />
-          <Tab
-            label={`CA / mTLS (${caCertificates.length})`}
-            value="ca"
-          />
-        </Tabs>
-      </Box>
-
       {/* Per-tab search */}
-      <TextField
+      <Input
         placeholder={
           activeTab === "acme"
             ? "Search by host name or domain…"
@@ -110,35 +91,42 @@ export default function CertificatesClient({
         }
         value={search}
         onChange={(e) => setSearch(e.target.value)}
-        size="small"
-        sx={{ maxWidth: 400 }}
-        inputProps={{ "aria-label": "search" }}
+        className="max-w-sm"
+        aria-label="search"
       />
 
-      {/* Tab panels */}
-      {activeTab === "acme" && (
-        <AcmeTab
-          acmeHosts={acmeHosts}
-          acmePagination={acmePagination}
-          search={searchAcme}
-          statusFilter={statusFilter}
-        />
-      )}
-      {activeTab === "imported" && (
-        <ImportedTab
-          importedCerts={importedCerts}
-          managedCerts={managedCerts}
-          search={searchImported}
-          statusFilter={statusFilter}
-        />
-      )}
-      {activeTab === "ca" && (
-        <CaTab
-          caCertificates={caCertificates}
-          search={searchCa}
-          statusFilter={statusFilter}
-        />
-      )}
-    </Stack>
+      {/* Tabs */}
+      <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+        <TabsList>
+          <TabsTrigger value="acme">ACME ({acmePagination.total})</TabsTrigger>
+          <TabsTrigger value="imported">Imported ({importedCerts.length})</TabsTrigger>
+          <TabsTrigger value="ca">CA / mTLS ({caCertificates.length})</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="acme" className="mt-4">
+          <AcmeTab
+            acmeHosts={acmeHosts}
+            acmePagination={acmePagination}
+            search={searchAcme}
+            statusFilter={statusFilter}
+          />
+        </TabsContent>
+        <TabsContent value="imported" className="mt-4">
+          <ImportedTab
+            importedCerts={importedCerts}
+            managedCerts={managedCerts}
+            search={searchImported}
+            statusFilter={statusFilter}
+          />
+        </TabsContent>
+        <TabsContent value="ca" className="mt-4">
+          <CaTab
+            caCertificates={caCertificates}
+            search={searchCa}
+            statusFilter={statusFilter}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
   );
 }
diff --git a/app/(dashboard)/page.tsx b/app/(dashboard)/page.tsx
index e1578ca4..3ebe0930 100644
--- a/app/(dashboard)/page.tsx
+++ b/app/(dashboard)/page.tsx
@@ -8,9 +8,7 @@ import {
   proxyHosts
 } from "@/src/lib/db/schema";
 import { count, desc, isNull, sql } from "drizzle-orm";
-import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
-import SecurityIcon from "@mui/icons-material/Security";
-import VpnKeyIcon from "@mui/icons-material/VpnKey";
+import { ArrowLeftRight, ShieldCheck, KeyRound } from "lucide-react";
 import { ReactNode } from "react";
 import { getAnalyticsSummary } from "@/src/lib/analytics-db";
 
@@ -38,9 +36,9 @@ async function loadStats(): Promise<StatCard[]> {
   const accessListsCount = accessListCountResult[0]?.value ?? 0;
 
   return [
-    { label: "Proxy Hosts", icon: <SwapHorizIcon fontSize="large" />, count: proxyHostsCount, href: "/proxy-hosts" },
-    { label: "Certificates", icon: <SecurityIcon fontSize="large" />, count: certificatesCount, href: "/certificates" },
-    { label: "Access Lists", icon: <VpnKeyIcon fontSize="large" />, count: accessListsCount, href: "/access-lists" }
+    { label: "Proxy Hosts", icon: <ArrowLeftRight className="h-8 w-8" />, count: proxyHostsCount, href: "/proxy-hosts" },
+    { label: "Certificates", icon: <ShieldCheck className="h-8 w-8" />, count: certificatesCount, href: "/certificates" },
+    { label: "Access Lists", icon: <KeyRound className="h-8 w-8" />, count: accessListsCount, href: "/access-lists" }
   ];
 }
 
diff --git a/app/(dashboard)/profile/ProfileClient.tsx b/app/(dashboard)/profile/ProfileClient.tsx
index 88018aa3..f7a12043 100644
--- a/app/(dashboard)/profile/ProfileClient.tsx
+++ b/app/(dashboard)/profile/ProfileClient.tsx
@@ -1,36 +1,26 @@
 "use client";
 
 import { useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
-  Alert,
-  Avatar,
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Chip,
   Dialog,
-  DialogActions,
   DialogContent,
-  DialogContentText,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
   DialogTitle,
-  Divider,
-  IconButton,
-  Stack,
-  TextField,
-  Typography
-} from "@mui/material";
-import type { ChipProps } from "@mui/material";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { signIn } from "next-auth/react";
-import PersonIcon from "@mui/icons-material/Person";
-import LockIcon from "@mui/icons-material/Lock";
-import LinkIcon from "@mui/icons-material/Link";
-import LinkOffIcon from "@mui/icons-material/LinkOff";
-import LoginIcon from "@mui/icons-material/Login";
-import PhotoCamera from "@mui/icons-material/PhotoCamera";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { Camera, Link, LogIn, Lock, Trash2, Unlink, User } from "lucide-react";
 
-interface User {
+interface UserData {
   id: number;
   email: string;
   name: string | null;
@@ -42,7 +32,7 @@ interface User {
 }
 
 interface ProfileClientProps {
-  user: User;
+  user: UserData;
   enabledProviders: Array<{ id: string; name: string }>;
 }
 
@@ -262,295 +252,277 @@ export default function ProfileClient({ user, enabledProviders }: ProfileClientP
     return provider;
   };
 
-  const getProviderColor = (provider: string): ChipProps["color"] => {
-    if (provider === "credentials") return "default";
-    return "primary";
-  };
-
   return (
-    <Box>
-      <Typography variant="h4" gutterBottom>
-        Profile & Account Settings
-      </Typography>
+    <div className="flex flex-col gap-6">
+      <h1 className="text-2xl font-bold tracking-tight">Profile & Account Settings</h1>
 
       {error && (
-        <Alert severity="error" sx={{ mb: 3 }} onClose={() => setError(null)}>
-          {error}
+        <Alert variant="destructive">
+          <AlertDescription className="flex justify-between items-center">
+            {error}
+            <Button variant="ghost" size="sm" onClick={() => setError(null)} className="h-auto p-0 text-xs">Dismiss</Button>
+          </AlertDescription>
         </Alert>
       )}
 
       {success && (
-        <Alert severity="success" sx={{ mb: 3 }} onClose={() => setSuccess(null)}>
-          {success}
+        <Alert>
+          <AlertDescription className="flex justify-between items-center">
+            {success}
+            <Button variant="ghost" size="sm" onClick={() => setSuccess(null)} className="h-auto p-0 text-xs">Dismiss</Button>
+          </AlertDescription>
         </Alert>
       )}
 
-      <Stack spacing={3}>
+      <div className="flex flex-col gap-4">
         {/* Account Information */}
         <Card>
-          <CardContent>
-            <Stack spacing={2}>
-              <Box display="flex" alignItems="center" gap={1}>
-                <PersonIcon color="primary" />
-                <Typography variant="h6">Account Information</Typography>
-              </Box>
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <div className="flex items-center gap-2">
+              <User className="h-5 w-5 text-primary" />
+              <h2 className="text-lg font-semibold">Account Information</h2>
+            </div>
 
-              <Divider />
+            <Separator />
 
-              {/* Avatar Section */}
-              <Box>
-                <Typography variant="body2" color="text.secondary" gutterBottom>
-                  Profile Picture
-                </Typography>
-                <Box display="flex" alignItems="center" gap={2}>
-                  <Avatar
-                    src={avatarUrl || undefined}
-                    alt={user.name || user.email}
-                    sx={{ width: 80, height: 80 }}
-                  >
+            {/* Avatar Section */}
+            <div className="flex flex-col gap-2">
+              <p className="text-sm text-muted-foreground">Profile Picture</p>
+              <div className="flex items-center gap-4">
+                <Avatar className="h-20 w-20">
+                  <AvatarImage src={avatarUrl || undefined} alt={user.name || user.email} />
+                  <AvatarFallback className="text-2xl">
                     {(!avatarUrl && user.name) ? user.name.charAt(0).toUpperCase() : user.email.charAt(0).toUpperCase()}
-                  </Avatar>
-                  <Box display="flex" gap={1}>
-                    <Button
-                      variant="outlined"
-                      component="label"
-                      startIcon={<PhotoCamera />}
-                      disabled={loading}
-                    >
+                  </AvatarFallback>
+                </Avatar>
+                <div className="flex gap-2">
+                  <Button variant="outline" asChild disabled={loading}>
+                    <label className="cursor-pointer">
+                      <Camera className="h-4 w-4 mr-2" />
                       Upload
                       <input
                         type="file"
-                        hidden
+                        className="hidden"
                         accept="image/*"
                         onChange={handleAvatarUpload}
                       />
+                    </label>
+                  </Button>
+                  {avatarUrl && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="text-destructive"
+                      onClick={handleAvatarDelete}
+                      disabled={loading}
+                    >
+                      <Trash2 className="h-4 w-4" />
                     </Button>
-                    {avatarUrl && (
-                      <IconButton
-                        color="error"
-                        onClick={handleAvatarDelete}
-                        disabled={loading}
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    )}
-                  </Box>
-                </Box>
-                <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
-                  Recommended: Square image, max 2MB
-                </Typography>
-              </Box>
+                  )}
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">Recommended: Square image, max 2MB</p>
+            </div>
 
-              <Divider />
+            <Separator />
 
-              <Box>
-                <Typography variant="body2" color="text.secondary">
-                  Email
-                </Typography>
-                <Typography variant="body1">{user.email}</Typography>
-              </Box>
+            <div>
+              <p className="text-sm text-muted-foreground">Email</p>
+              <p className="text-sm">{user.email}</p>
+            </div>
 
-              <Box>
-                <Typography variant="body2" color="text.secondary">
-                  Name
-                </Typography>
-                <Typography variant="body1">{user.name || "Not set"}</Typography>
-              </Box>
+            <div>
+              <p className="text-sm text-muted-foreground">Name</p>
+              <p className="text-sm">{user.name || "Not set"}</p>
+            </div>
 
-              <Box>
-                <Typography variant="body2" color="text.secondary">
-                  Role
-                </Typography>
-                <Chip label={user.role} size="small" color="primary" />
-              </Box>
+            <div>
+              <p className="text-sm text-muted-foreground">Role</p>
+              <Badge>{user.role}</Badge>
+            </div>
 
-              <Box>
-                <Typography variant="body2" color="text.secondary">
-                  Authentication Method
-                </Typography>
-                <Chip
-                  label={getProviderName(user.provider)}
-                  size="small"
-                  color={getProviderColor(user.provider)}
-                />
-              </Box>
+            <div>
+              <p className="text-sm text-muted-foreground">Authentication Method</p>
+              <Badge variant={user.provider === "credentials" ? "secondary" : "default"}>
+                {getProviderName(user.provider)}
+              </Badge>
+            </div>
 
-              {hasPassword && (
-                <Box>
-                  <Typography variant="body2" color="text.secondary">
-                    Password
-                  </Typography>
-                  <Typography variant="body1" color="success.main">
-                    ✓ Password is set
-                  </Typography>
-                </Box>
-              )}
-            </Stack>
+            {hasPassword && (
+              <div>
+                <p className="text-sm text-muted-foreground">Password</p>
+                <p className="text-sm text-green-600 dark:text-green-400">&#10003; Password is set</p>
+              </div>
+            )}
           </CardContent>
         </Card>
 
         {/* Password Management */}
         <Card>
-          <CardContent>
-            <Stack spacing={2}>
-              <Box display="flex" alignItems="center" gap={1}>
-                <LockIcon color="primary" />
-                <Typography variant="h6">Password Management</Typography>
-              </Box>
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <div className="flex items-center gap-2">
+              <Lock className="h-5 w-5 text-primary" />
+              <h2 className="text-lg font-semibold">Password Management</h2>
+            </div>
 
-              <Divider />
+            <Separator />
 
-              {hasPassword ? (
-                <Box>
-                  <Typography variant="body2" color="text.secondary" gutterBottom>
-                    Change your password to maintain account security
-                  </Typography>
-                  <Button
-                    variant="outlined"
-                    onClick={() => setPasswordDialogOpen(true)}
-                    sx={{ mt: 1 }}
-                  >
-                    Change Password
-                  </Button>
-                </Box>
-              ) : (
-                <Box>
-                  <Alert severity="warning" sx={{ mb: 2 }}>
+            {hasPassword ? (
+              <div>
+                <p className="text-sm text-muted-foreground mb-2">Change your password to maintain account security</p>
+                <Button variant="outline" onClick={() => setPasswordDialogOpen(true)}>
+                  Change Password
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3">
+                <Alert className="border-yellow-500/50 text-yellow-700 dark:text-yellow-400">
+                  <AlertDescription>
                     You are using OAuth-only authentication. Setting a password will allow you to
                     sign in with either OAuth or credentials.
-                  </Alert>
-                  <Button
-                    variant="contained"
-                    onClick={() => setPasswordDialogOpen(true)}
-                  >
-                    Set Password
-                  </Button>
-                </Box>
-              )}
-            </Stack>
+                  </AlertDescription>
+                </Alert>
+                <Button onClick={() => setPasswordDialogOpen(true)}>
+                  Set Password
+                </Button>
+              </div>
+            )}
           </CardContent>
         </Card>
 
         {/* OAuth Management */}
         {enabledProviders.length > 0 && (
           <Card>
-            <CardContent>
-              <Stack spacing={2}>
-                <Box display="flex" alignItems="center" gap={1}>
-                  <LinkIcon color="primary" />
-                  <Typography variant="h6">OAuth Connections</Typography>
-                </Box>
+            <CardContent className="flex flex-col gap-4 pt-6">
+              <div className="flex items-center gap-2">
+                <Link className="h-5 w-5 text-primary" />
+                <h2 className="text-lg font-semibold">OAuth Connections</h2>
+              </div>
 
-                <Divider />
+              <Separator />
 
-                {hasOAuth ? (
-                  <Box>
-                    <Typography variant="body2" color="text.secondary" gutterBottom>
-                      Your account is linked to {getProviderName(user.provider)}
-                    </Typography>
+              {hasOAuth ? (
+                <div>
+                  <p className="text-sm text-muted-foreground mb-2">
+                    Your account is linked to {getProviderName(user.provider)}
+                  </p>
 
-                    {hasPassword ? (
+                  {hasPassword ? (
+                    <Button
+                      variant="outline"
+                      className="text-yellow-600 border-yellow-600/50"
+                      onClick={() => setUnlinkDialogOpen(true)}
+                    >
+                      <Unlink className="h-4 w-4 mr-2" />
+                      Unlink OAuth Account
+                    </Button>
+                  ) : (
+                    <Alert className="border-blue-500/50 text-blue-700 dark:text-blue-400">
+                      <AlertDescription>
+                        To unlink OAuth, you must first set a password as a fallback authentication method.
+                      </AlertDescription>
+                    </Alert>
+                  )}
+                </div>
+              ) : (
+                <div>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    Link an OAuth provider to enable single sign-on
+                  </p>
+
+                  <div className="flex flex-col gap-2">
+                    {enabledProviders.map((provider) => (
                       <Button
-                        variant="outlined"
-                        color="warning"
-                        startIcon={<LinkOffIcon />}
-                        onClick={() => setUnlinkDialogOpen(true)}
-                        sx={{ mt: 1 }}
+                        key={provider.id}
+                        variant="outline"
+                        onClick={() => handleLinkOAuth(provider.id)}
+                        className="w-full"
                       >
-                        Unlink OAuth Account
+                        <LogIn className="h-4 w-4 mr-2" />
+                        Link {provider.name}
                       </Button>
-                    ) : (
-                      <Alert severity="info" sx={{ mt: 1 }}>
-                        To unlink OAuth, you must first set a password as a fallback authentication
-                        method.
-                      </Alert>
-                    )}
-                  </Box>
-                ) : (
-                  <Box>
-                    <Typography variant="body2" color="text.secondary" gutterBottom>
-                      Link an OAuth provider to enable single sign-on
-                    </Typography>
-
-                    <Stack spacing={1} sx={{ mt: 2 }}>
-                      {enabledProviders.map((provider) => (
-                        <Button
-                          key={provider.id}
-                          variant="outlined"
-                          startIcon={<LoginIcon />}
-                          onClick={() => handleLinkOAuth(provider.id)}
-                          fullWidth
-                        >
-                          Link {provider.name}
-                        </Button>
-                      ))}
-                    </Stack>
-                  </Box>
-                )}
-              </Stack>
+                    ))}
+                  </div>
+                </div>
+              )}
             </CardContent>
           </Card>
         )}
-      </Stack>
+      </div>
 
       {/* Change Password Dialog */}
-      <Dialog open={passwordDialogOpen} onClose={() => setPasswordDialogOpen(false)} maxWidth="sm" fullWidth>
-        <DialogTitle>{hasPassword ? "Change Password" : "Set Password"}</DialogTitle>
-        <DialogContent>
-          <Stack spacing={2} sx={{ mt: 1 }}>
+      <Dialog open={passwordDialogOpen} onOpenChange={setPasswordDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{hasPassword ? "Change Password" : "Set Password"}</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col gap-3 mt-2">
             {hasPassword && (
-              <TextField
-                label="Current Password"
-                type="password"
-                value={currentPassword}
-                onChange={(e) => setCurrentPassword(e.target.value)}
-                fullWidth
-                autoComplete="current-password"
-              />
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="currentPassword">Current Password</Label>
+                <Input
+                  id="currentPassword"
+                  type="password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  autoComplete="current-password"
+                />
+              </div>
             )}
-            <TextField
-              label="New Password"
-              type="password"
-              value={newPassword}
-              onChange={(e) => setNewPassword(e.target.value)}
-              fullWidth
-              autoComplete="new-password"
-              helperText="Minimum 12 characters"
-            />
-            <TextField
-              label="Confirm New Password"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              fullWidth
-              autoComplete="new-password"
-            />
-          </Stack>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="newPassword">New Password</Label>
+              <Input
+                id="newPassword"
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                autoComplete="new-password"
+              />
+              <p className="text-xs text-muted-foreground">Minimum 12 characters</p>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="confirmPassword">Confirm New Password</Label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                autoComplete="new-password"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPasswordDialogOpen(false)}>Cancel</Button>
+            <Button onClick={handlePasswordChange} disabled={loading}>
+              {loading ? "Saving..." : hasPassword ? "Change Password" : "Set Password"}
+            </Button>
+          </DialogFooter>
         </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setPasswordDialogOpen(false)}>Cancel</Button>
-          <Button onClick={handlePasswordChange} variant="contained" disabled={loading}>
-            {loading ? "Saving..." : hasPassword ? "Change Password" : "Set Password"}
-          </Button>
-        </DialogActions>
       </Dialog>
 
       {/* Unlink OAuth Dialog */}
-      <Dialog open={unlinkDialogOpen} onClose={() => setUnlinkDialogOpen(false)} maxWidth="sm" fullWidth>
-        <DialogTitle>Unlink OAuth Account</DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            Are you sure you want to unlink your {getProviderName(user.provider)} account?
-            You will only be able to sign in with your username and password after this.
-          </DialogContentText>
+      <Dialog open={unlinkDialogOpen} onOpenChange={setUnlinkDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Unlink OAuth Account</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to unlink your {getProviderName(user.provider)} account?
+              You will only be able to sign in with your username and password after this.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setUnlinkDialogOpen(false)}>Cancel</Button>
+            <Button
+              onClick={handleUnlinkOAuth}
+              className="text-yellow-600 border-yellow-600/50"
+              variant="outline"
+              disabled={loading}
+            >
+              {loading ? "Unlinking..." : "Unlink OAuth"}
+            </Button>
+          </DialogFooter>
         </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setUnlinkDialogOpen(false)}>Cancel</Button>
-          <Button onClick={handleUnlinkOAuth} variant="contained" color="warning" disabled={loading}>
-            {loading ? "Unlinking..." : "Unlink OAuth"}
-          </Button>
-        </DialogActions>
       </Dialog>
-    </Box>
+    </div>
   );
 }
diff --git a/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx b/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
index a09b6f9a..2e07d03c 100644
--- a/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
+++ b/app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
@@ -2,20 +2,21 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter, usePathname, useSearchParams } from "next/navigation";
-import { Card, IconButton, Stack, Switch, Tooltip, Typography } from "@mui/material";
-import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import type { AccessList } from "@/src/lib/models/access-lists";
-import type { Certificate } from "@/src/lib/models/certificates";
-import type { ProxyHost } from "@/src/lib/models/proxy-hosts";
-import type { CaCertificate } from "@/src/lib/models/ca-certificates";
-import type { AuthentikSettings } from "@/src/lib/settings";
+import { Copy, Pencil, Trash2 } from "lucide-react";
+import type { AccessList } from "@/lib/models/access-lists";
+import type { Certificate } from "@/lib/models/certificates";
+import type { ProxyHost } from "@/lib/models/proxy-hosts";
+import type { CaCertificate } from "@/lib/models/ca-certificates";
+import type { AuthentikSettings } from "@/lib/settings";
 import { toggleProxyHostAction } from "./actions";
-import { PageHeader } from "@/src/components/ui/PageHeader";
-import { SearchField } from "@/src/components/ui/SearchField";
-import { DataTable } from "@/src/components/ui/DataTable";
-import { CreateHostDialog, EditHostDialog, DeleteHostDialog } from "@/src/components/proxy-hosts/HostDialogs";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { SearchField } from "@/components/ui/SearchField";
+import { DataTable } from "@/components/ui/DataTable";
+import { CreateHostDialog, EditHostDialog, DeleteHostDialog } from "@/components/proxy-hosts/HostDialogs";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Card } from "@/components/ui/card";
 
 type Props = {
   hosts: ProxyHost[];
@@ -67,33 +68,27 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, caC
       id: "name",
       label: "Name",
       render: (host: ProxyHost) => (
-        <Stack>
-          <Typography variant="body2" fontWeight={600}>
-            {host.name}
-          </Typography>
-        </Stack>
+        <p className="text-sm font-semibold">{host.name}</p>
       )
     },
     {
       id: "domains",
       label: "Domains",
       render: (host: ProxyHost) => (
-        <Stack>
-          <Typography variant="body2" color="text.secondary">
-            {host.domains[0]}
-            {host.domains.length > 1 && ` +${host.domains.length - 1} more`}
-          </Typography>
-        </Stack>
+        <p className="text-sm text-muted-foreground">
+          {host.domains[0]}
+          {host.domains.length > 1 && ` +${host.domains.length - 1} more`}
+        </p>
       )
     },
     {
       id: "upstreams",
       label: "Target",
       render: (host: ProxyHost) => (
-        <Typography variant="body2" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+        <p className="text-sm text-muted-foreground font-mono">
           {host.upstreams[0]}
           {host.upstreams.length > 1 && ` +${host.upstreams.length - 1} more`}
-        </Typography>
+        </p>
       )
     },
     {
@@ -102,80 +97,120 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, caC
       align: "right" as const,
       width: 150,
       render: (host: ProxyHost) => (
-        <Stack direction="row" spacing={1} justifyContent="flex-end" alignItems="center">
+        <div className="flex items-center gap-1 justify-end">
           <Switch
             checked={host.enabled}
-            onChange={(e) => handleToggleEnabled(host.id, e.target.checked)}
-            size="small"
-            color="success"
+            onCheckedChange={(checked) => handleToggleEnabled(host.id, checked)}
           />
-          <Tooltip title="Duplicate">
-            <IconButton
-              size="small"
-              onClick={() => {
-                setDuplicateHost(host);
-                setCreateOpen(true);
-              }}
-              color="info"
-            >
-              <ContentCopyIcon fontSize="small" />
-            </IconButton>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-blue-400"
+                onClick={() => {
+                  setDuplicateHost(host);
+                  setCreateOpen(true);
+                }}
+              >
+                <Copy className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Duplicate</TooltipContent>
           </Tooltip>
-          <Tooltip title="Edit">
-            <IconButton size="small" onClick={() => setEditHost(host)} color="primary">
-              <EditIcon fontSize="small" />
-            </IconButton>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => setEditHost(host)}
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Edit</TooltipContent>
           </Tooltip>
-          <Tooltip title="Delete">
-            <IconButton size="small" onClick={() => setDeleteHost(host)} color="error">
-              <DeleteIcon fontSize="small" />
-            </IconButton>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-destructive"
+                onClick={() => setDeleteHost(host)}
+              >
+                <Trash2 className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Delete</TooltipContent>
           </Tooltip>
-        </Stack>
+        </div>
       )
     }
   ];
 
   const mobileCard = (host: ProxyHost) => (
-    <Card variant="outlined" sx={{ p: 2 }}>
-      <Stack spacing={1}>
-        <Stack direction="row" justifyContent="space-between" alignItems="center">
-          <Typography variant="subtitle2" fontWeight={700}>
-            {host.name}
-          </Typography>
-          <Stack direction="row" spacing={0.5} alignItems="center">
+    <Card className="p-4">
+      <div className="flex flex-col gap-1">
+        <div className="flex justify-between items-center">
+          <p className="text-sm font-bold">{host.name}</p>
+          <div className="flex items-center gap-0.5">
             <Switch
               checked={host.enabled}
-              onChange={(e) => handleToggleEnabled(host.id, e.target.checked)}
-              size="small"
-              color="success"
+              onCheckedChange={(checked) => handleToggleEnabled(host.id, checked)}
             />
-            <Tooltip title="Duplicate">
-              <IconButton size="small" onClick={() => { setDuplicateHost(host); setCreateOpen(true); }} color="info">
-                <ContentCopyIcon fontSize="small" />
-              </IconButton>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-blue-400"
+                  onClick={() => { setDuplicateHost(host); setCreateOpen(true); }}
+                >
+                  <Copy className="h-3.5 w-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Duplicate</TooltipContent>
             </Tooltip>
-            <Tooltip title="Edit">
-              <IconButton size="small" aria-label="Edit" onClick={() => setEditHost(host)} color="primary">
-                <EditIcon fontSize="small" />
-              </IconButton>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  aria-label="Edit"
+                  onClick={() => setEditHost(host)}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Edit</TooltipContent>
             </Tooltip>
-            <Tooltip title="Delete">
-              <IconButton size="small" aria-label="Delete" onClick={() => setDeleteHost(host)} color="error">
-                <DeleteIcon fontSize="small" />
-              </IconButton>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-destructive"
+                  aria-label="Delete"
+                  onClick={() => setDeleteHost(host)}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Delete</TooltipContent>
             </Tooltip>
-          </Stack>
-        </Stack>
-        <Typography variant="body2" color="text.secondary" sx={{ fontFamily: "monospace", fontSize: "0.75rem" }}>
+          </div>
+        </div>
+        <p className="text-xs text-muted-foreground font-mono">
           {host.domains[0]}{host.domains.length > 1 ? ` +${host.domains.length - 1}` : ""} → {host.upstreams[0]}{host.upstreams.length > 1 ? ` +${host.upstreams.length - 1}` : ""}
-        </Typography>
-      </Stack>
+        </p>
+      </div>
     </Card>
   );
 
   return (
-    <Stack spacing={4}>
+    <div className="flex flex-col gap-6">
       <PageHeader
         title="Proxy Hosts"
         description="Define HTTP(S) reverse proxies orchestrated by Caddy with automated certificates."
@@ -232,6 +267,6 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, caC
           onClose={() => setDeleteHost(null)}
         />
       )}
-    </Stack>
+    </div>
   );
 }
diff --git a/app/(dashboard)/settings/SettingsClient.tsx b/app/(dashboard)/settings/SettingsClient.tsx
index 4797240a..179fec18 100644
--- a/app/(dashboard)/settings/SettingsClient.tsx
+++ b/app/(dashboard)/settings/SettingsClient.tsx
@@ -2,7 +2,13 @@
 
 import { useState } from "react";
 import { useFormState } from "react-dom";
-import { Alert, Box, Button, Card, CardContent, Checkbox, FormControlLabel, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import type {
   GeneralSettings,
   AuthentikSettings,
@@ -11,8 +17,8 @@ import type {
   DnsSettings,
   UpstreamDnsResolutionSettings,
   GeoBlockSettings,
-} from "@/src/lib/settings";
-import { GeoBlockFields } from "@/src/components/proxy-hosts/GeoBlockFields";
+} from "@/lib/settings";
+import { GeoBlockFields } from "@/components/proxy-hosts/GeoBlockFields";
 import {
   updateCloudflareSettingsAction,
   updateGeneralSettingsAction,
@@ -30,6 +36,33 @@ import {
   updateGeoBlockSettingsAction,
 } from "./actions";
 
+// Helper to render a status alert with appropriate color
+function StatusAlert({ message, success }: { message: string; success: boolean }) {
+  return (
+    <Alert variant={success ? "default" : "destructive"}>
+      <AlertDescription>{message}</AlertDescription>
+    </Alert>
+  );
+}
+
+// Info alert
+function InfoAlert({ children }: { children: React.ReactNode }) {
+  return (
+    <Alert className="border-blue-500/50 text-blue-700 dark:text-blue-400 [&>svg]:text-blue-500">
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  );
+}
+
+// Warning alert
+function WarnAlert({ children }: { children: React.ReactNode }) {
+  return (
+    <Alert className="border-yellow-500/50 text-yellow-700 dark:text-yellow-400 [&>svg]:text-yellow-500">
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  );
+}
+
 type Props = {
   general: GeneralSettings | null;
   cloudflare: {
@@ -118,666 +151,650 @@ export default function SettingsClient({
   );
 
   return (
-    <Stack spacing={4} sx={{ width: "100%" }}>
-      <Stack spacing={1}>
-        <Typography variant="h4" fontWeight={600}>
-          Settings
-        </Typography>
-        <Typography color="text.secondary">Configure organization-wide defaults and DNS automation.</Typography>
-      </Stack>
+    <div className="flex flex-col gap-6 w-full">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
+        <p className="text-sm text-muted-foreground">Configure organization-wide defaults and DNS automation.</p>
+      </div>
 
+      {/* Instance Sync */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            Instance Sync
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">Instance Sync</h2>
+          <p className="text-sm text-muted-foreground">
             Choose whether this instance acts independently, pushes configuration to slave nodes, or pulls configuration from a master.
-          </Typography>
-          <Stack component="form" action={instanceModeFormAction} spacing={2}>
+          </p>
+          <form action={instanceModeFormAction} className="flex flex-col gap-3">
             {instanceSync.modeFromEnv && (
-              <Alert severity="info">
+              <InfoAlert>
                 Instance mode is configured via INSTANCE_MODE environment variable and cannot be changed at runtime.
-              </Alert>
+              </InfoAlert>
             )}
             {instanceModeState?.message && (
-              <Alert severity={instanceModeState.success ? "success" : "error"}>
-                {instanceModeState.message}
-              </Alert>
+              <StatusAlert message={instanceModeState.message} success={instanceModeState.success} />
             )}
-            <TextField
-              name="mode"
-              label="Instance mode"
-              select
-              defaultValue={instanceSync.mode}
-              disabled={instanceSync.modeFromEnv}
-              fullWidth
-            >
-              <MenuItem value="standalone">Standalone</MenuItem>
-              <MenuItem value="master">Master</MenuItem>
-              <MenuItem value="slave">Slave</MenuItem>
-            </TextField>
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained" disabled={instanceSync.modeFromEnv}>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="instance-mode">Instance mode</Label>
+              <Select name="mode" defaultValue={instanceSync.mode} disabled={instanceSync.modeFromEnv}>
+                <SelectTrigger id="instance-mode">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="standalone">Standalone</SelectItem>
+                  <SelectItem value="master">Master</SelectItem>
+                  <SelectItem value="slave">Slave</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex justify-end">
+              <Button type="submit" disabled={instanceSync.modeFromEnv}>
                 Save instance mode
               </Button>
-            </Box>
-          </Stack>
+            </div>
+          </form>
 
           {isSlave && (
-            <Stack spacing={2} sx={{ mt: 3 }}>
-              <Typography variant="subtitle1" fontWeight={600}>
-                Master Connection
-              </Typography>
-              <Stack component="form" action={slaveTokenFormAction} spacing={2}>
+            <div className="flex flex-col gap-3 mt-2">
+              <h3 className="font-semibold">Master Connection</h3>
+              <form action={slaveTokenFormAction} className="flex flex-col gap-3">
                 {instanceSync.tokenFromEnv && (
-                  <Alert severity="info">
+                  <InfoAlert>
                     Sync token is configured via INSTANCE_SYNC_TOKEN environment variable and cannot be changed at runtime.
-                  </Alert>
+                  </InfoAlert>
                 )}
                 {slaveTokenState?.message && (
-                  <Alert severity={slaveTokenState.success ? "success" : "error"}>
-                    {slaveTokenState.message}
-                  </Alert>
+                  <StatusAlert message={slaveTokenState.message} success={slaveTokenState.success} />
                 )}
                 {instanceSync.slave?.hasToken && !instanceSync.tokenFromEnv && (
-                  <Alert severity="info">
-                    A master sync token is configured. Leave the token field blank to keep it, or select "Remove existing token" to delete it.
-                  </Alert>
+                  <InfoAlert>
+                    A master sync token is configured. Leave the token field blank to keep it, or select &ldquo;Remove existing token&rdquo; to delete it.
+                  </InfoAlert>
                 )}
-                <TextField
-                  name="masterToken"
-                  label="Master sync token"
-                  type="password"
-                  autoComplete="new-password"
-                  placeholder="Enter new token"
-                  disabled={instanceSync.tokenFromEnv}
-                  fullWidth
-                />
-                <FormControlLabel
-                  control={<Checkbox name="clearToken" />}
-                  label="Remove existing token"
-                  disabled={!instanceSync.slave?.hasToken || instanceSync.tokenFromEnv}
-                />
-                <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-                  <Button type="submit" variant="contained" disabled={instanceSync.tokenFromEnv}>
+                <div className="flex flex-col gap-1.5">
+                  <Label htmlFor="masterToken">Master sync token</Label>
+                  <Input
+                    id="masterToken"
+                    name="masterToken"
+                    type="password"
+                    autoComplete="new-password"
+                    placeholder="Enter new token"
+                    disabled={instanceSync.tokenFromEnv}
+                  />
+                </div>
+                <div className="flex items-center gap-2">
+                  <Checkbox
+                    id="clearToken"
+                    name="clearToken"
+                    disabled={!instanceSync.slave?.hasToken || instanceSync.tokenFromEnv}
+                  />
+                  <Label htmlFor="clearToken">Remove existing token</Label>
+                </div>
+                <div className="flex justify-end">
+                  <Button type="submit" disabled={instanceSync.tokenFromEnv}>
                     Save master token
                   </Button>
-                </Box>
-              </Stack>
-              <Alert severity={instanceSync.slave?.lastSyncError ? "warning" : "info"}>
-                {instanceSync.slave?.lastSyncAt
-                  ? `Last sync: ${instanceSync.slave.lastSyncAt}${instanceSync.slave.lastSyncError ? ` (${instanceSync.slave.lastSyncError})` : ""}`
-                  : "No sync payload has been received yet."}
-              </Alert>
-            </Stack>
+                </div>
+              </form>
+              {instanceSync.slave?.lastSyncError ? (
+                <WarnAlert>
+                  {instanceSync.slave?.lastSyncAt
+                    ? `Last sync: ${instanceSync.slave.lastSyncAt} (${instanceSync.slave.lastSyncError})`
+                    : "No sync payload has been received yet."}
+                </WarnAlert>
+              ) : (
+                <InfoAlert>
+                  {instanceSync.slave?.lastSyncAt
+                    ? `Last sync: ${instanceSync.slave.lastSyncAt}`
+                    : "No sync payload has been received yet."}
+                </InfoAlert>
+              )}
+            </div>
           )}
 
           {isMaster && (
-            <Stack spacing={2} sx={{ mt: 3 }}>
-              <Typography variant="subtitle1" fontWeight={600}>
-                Slave Instances
-              </Typography>
-              <Stack component="form" action={slaveInstanceFormAction} spacing={2}>
+            <div className="flex flex-col gap-3 mt-2">
+              <h3 className="font-semibold">Slave Instances</h3>
+              <form action={slaveInstanceFormAction} className="flex flex-col gap-3">
                 {slaveInstanceState?.message && (
-                  <Alert severity={slaveInstanceState.success ? "success" : "error"}>
-                    {slaveInstanceState.message}
-                  </Alert>
+                  <StatusAlert message={slaveInstanceState.message} success={slaveInstanceState.success} />
                 )}
-                <TextField name="name" label="Instance name" placeholder="Edge node EU-1" fullWidth />
-                <TextField name="baseUrl" label="Base URL" placeholder="https://slave-1.example.com" fullWidth />
-                <TextField name="apiToken" label="Slave API token" type="password" autoComplete="new-password" fullWidth />
-                <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-                  <Button type="submit" variant="contained">
-                    Add slave instance
-                  </Button>
-                </Box>
-              </Stack>
+                <div className="flex flex-col gap-1.5">
+                  <Label htmlFor="inst-name">Instance name</Label>
+                  <Input id="inst-name" name="name" placeholder="Edge node EU-1" />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label htmlFor="inst-base-url">Base URL</Label>
+                  <Input id="inst-base-url" name="baseUrl" placeholder="https://slave-1.example.com" />
+                </div>
+                <div className="flex flex-col gap-1.5">
+                  <Label htmlFor="inst-api-token">Slave API token</Label>
+                  <Input id="inst-api-token" name="apiToken" type="password" autoComplete="new-password" />
+                </div>
+                <div className="flex justify-end">
+                  <Button type="submit">Add slave instance</Button>
+                </div>
+              </form>
 
-              <Stack component="form" action={syncFormAction} spacing={2}>
+              <form action={syncFormAction} className="flex flex-col gap-3">
                 {syncState?.message && (
-                  <Alert severity={syncState.success ? "success" : "warning"}>
-                    {syncState.message}
-                  </Alert>
+                  <StatusAlert message={syncState.message} success={syncState.success} />
                 )}
-                <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-                  <Button type="submit" variant="outlined">
-                    Sync now
-                  </Button>
-                </Box>
-              </Stack>
+                <div className="flex justify-end">
+                  <Button type="submit" variant="outline">Sync now</Button>
+                </div>
+              </form>
 
               {instanceSync.master?.instances.length === 0 && instanceSync.master?.envInstances.length === 0 && (
-                <Alert severity="info">No slave instances configured yet.</Alert>
+                <InfoAlert>No slave instances configured yet.</InfoAlert>
               )}
 
               {instanceSync.master?.envInstances && instanceSync.master.envInstances.length > 0 && (
                 <>
-                  <Typography variant="subtitle2" color="text.secondary" sx={{ mt: 1 }}>
+                  <p className="text-sm text-muted-foreground mt-1">
                     Environment-configured instances (via INSTANCE_SLAVES)
-                  </Typography>
+                  </p>
                   {instanceSync.master.envInstances.map((instance, index) => (
-                    <Box
+                    <div
                       key={`env-${index}`}
-                      sx={{
-                        border: "1px solid",
-                        borderColor: "divider",
-                        borderRadius: 2,
-                        p: 2,
-                        display: "flex",
-                        flexWrap: "wrap",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        gap: 2,
-                        bgcolor: "action.hover"
-                      }}
+                      className="flex flex-wrap items-center justify-between gap-4 rounded-md border p-4 bg-muted/40"
                     >
-                      <Box>
-                        <Typography fontWeight={600}>{instance.name}</Typography>
-                        <Typography variant="body2" color="text.secondary">
-                          {instance.url}
-                        </Typography>
-                        <Typography variant="caption" color="text.secondary">
-                          Configured via environment variable
-                        </Typography>
-                      </Box>
-                    </Box>
+                      <div>
+                        <p className="font-semibold">{instance.name}</p>
+                        <p className="text-sm text-muted-foreground">{instance.url}</p>
+                        <span className="text-xs text-muted-foreground">Configured via environment variable</span>
+                      </div>
+                    </div>
                   ))}
                 </>
               )}
 
               {instanceSync.master?.instances && instanceSync.master.instances.length > 0 && (
-                <Typography variant="subtitle2" color="text.secondary" sx={{ mt: 1 }}>
-                  UI-configured instances
-                </Typography>
+                <p className="text-sm text-muted-foreground mt-1">UI-configured instances</p>
               )}
               {instanceSync.master?.instances.map((instance) => (
-                <Box
+                <div
                   key={instance.id}
-                  sx={{
-                    border: "1px solid",
-                    borderColor: "divider",
-                    borderRadius: 2,
-                    p: 2,
-                    display: "flex",
-                    flexWrap: "wrap",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    gap: 2
-                  }}
+                  className="flex flex-wrap items-center justify-between gap-4 rounded-md border p-4"
                 >
-                  <Box>
-                    <Typography fontWeight={600}>{instance.name}</Typography>
-                    <Typography variant="body2" color="text.secondary">
-                      {instance.base_url}
-                    </Typography>
-                    <Typography variant="caption" color="text.secondary">
+                  <div>
+                    <p className="font-semibold">{instance.name}</p>
+                    <p className="text-sm text-muted-foreground">{instance.base_url}</p>
+                    <span className="text-xs text-muted-foreground">
                       {instance.last_sync_at ? `Last sync: ${instance.last_sync_at}` : "No sync yet"}
-                    </Typography>
+                    </span>
                     {instance.last_sync_error && (
-                      <Typography variant="caption" color="error" display="block">
-                        {instance.last_sync_error}
-                      </Typography>
+                      <span className="block text-xs text-destructive">{instance.last_sync_error}</span>
                     )}
-                  </Box>
-                  <Stack direction="row" spacing={1}>
-                    <Box component="form" action={toggleSlaveInstanceAction}>
+                  </div>
+                  <div className="flex gap-2">
+                    <form action={toggleSlaveInstanceAction}>
                       <input type="hidden" name="instanceId" value={instance.id} />
                       <input type="hidden" name="enabled" value={instance.enabled ? "" : "on"} />
-                      <Button type="submit" variant="outlined" color={instance.enabled ? "warning" : "success"}>
+                      <Button type="submit" variant="outline" className={instance.enabled ? "text-yellow-600 border-yellow-600/50" : "text-green-600 border-green-600/50"}>
                         {instance.enabled ? "Disable" : "Enable"}
                       </Button>
-                    </Box>
-                    <Box component="form" action={deleteSlaveInstanceAction}>
+                    </form>
+                    <form action={deleteSlaveInstanceAction}>
                       <input type="hidden" name="instanceId" value={instance.id} />
-                      <Button type="submit" variant="outlined" color="error">
+                      <Button type="submit" variant="outline" className="text-destructive border-destructive/50">
                         Remove
                       </Button>
-                    </Box>
-                  </Stack>
-                </Box>
+                    </form>
+                  </div>
+                </div>
               ))}
-            </Stack>
+            </div>
           )}
         </CardContent>
       </Card>
 
+      {/* General */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            General
-          </Typography>
-          <Stack component="form" action={generalFormAction} spacing={2}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">General</h2>
+          <form action={generalFormAction} className="flex flex-col gap-3">
             {generalState?.message && (
-              <Alert severity={generalState.success ? "success" : "error"}>
-                {generalState.message}
-              </Alert>
+              <StatusAlert message={generalState.message} success={generalState.success} />
             )}
             {isSlave && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="overrideEnabled"
-                    checked={generalOverride}
-                    onChange={(event) => setGeneralOverride(event.target.checked)}
-                  />
-                }
-                label="Override master settings"
-              />
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="general-override"
+                  name="overrideEnabled"
+                  checked={generalOverride}
+                  onCheckedChange={(v) => setGeneralOverride(!!v)}
+                />
+                <Label htmlFor="general-override">Override master settings</Label>
+              </div>
             )}
-            <TextField
-              name="primaryDomain"
-              label="Primary domain"
-              defaultValue={general?.primaryDomain ?? "caddyproxymanager.com"}
-              required
-              disabled={isSlave && !generalOverride}
-              fullWidth
-            />
-            <TextField
-              name="acmeEmail"
-              label="ACME contact email"
-              type="email"
-              defaultValue={general?.acmeEmail ?? ""}
-              disabled={isSlave && !generalOverride}
-              fullWidth
-            />
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save general settings
-              </Button>
-            </Box>
-          </Stack>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="primaryDomain">Primary domain</Label>
+              <Input
+                id="primaryDomain"
+                name="primaryDomain"
+                defaultValue={general?.primaryDomain ?? "caddyproxymanager.com"}
+                required
+                disabled={isSlave && !generalOverride}
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="acmeEmail">ACME contact email</Label>
+              <Input
+                id="acmeEmail"
+                name="acmeEmail"
+                type="email"
+                defaultValue={general?.acmeEmail ?? ""}
+                disabled={isSlave && !generalOverride}
+              />
+            </div>
+            <div className="flex justify-end">
+              <Button type="submit">Save general settings</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
 
+      {/* Cloudflare DNS */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            Cloudflare DNS
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">Cloudflare DNS</h2>
+          <p className="text-sm text-muted-foreground">
             Configure a Cloudflare API token with Zone.DNS Edit permissions to enable DNS-01 challenges for wildcard certificates.
-          </Typography>
+          </p>
           {cloudflare.hasToken && (
-            <Alert severity="info">
-              A Cloudflare API token is already configured. Leave the token field blank to keep it, or select “Remove existing token” to delete it.
-            </Alert>
+            <InfoAlert>
+              A Cloudflare API token is already configured. Leave the token field blank to keep it, or select &ldquo;Remove existing token&rdquo; to delete it.
+            </InfoAlert>
           )}
-          <Stack component="form" action={cloudflareFormAction} spacing={2}>
+          <form action={cloudflareFormAction} className="flex flex-col gap-3">
             {cloudflareState?.message && (
-              <Alert severity={cloudflareState.success ? "success" : "warning"}>
-                {cloudflareState.message}
-              </Alert>
+              <StatusAlert message={cloudflareState.message} success={cloudflareState.success} />
             )}
             {isSlave && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="overrideEnabled"
-                    checked={cloudflareOverride}
-                    onChange={(event) => setCloudflareOverride(event.target.checked)}
-                  />
-                }
-                label="Override master settings"
-              />
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="cloudflare-override"
+                  name="overrideEnabled"
+                  checked={cloudflareOverride}
+                  onCheckedChange={(v) => setCloudflareOverride(!!v)}
+                />
+                <Label htmlFor="cloudflare-override">Override master settings</Label>
+              </div>
             )}
-            <TextField
-              name="apiToken"
-              label="API token"
-              type="password"
-              autoComplete="new-password"
-              placeholder="Enter new token"
-              disabled={isSlave && !cloudflareOverride}
-              fullWidth
-            />
-            <FormControlLabel
-              control={<Checkbox name="clearToken" />}
-              label="Remove existing token"
-              disabled={!cloudflare.hasToken || (isSlave && !cloudflareOverride)}
-            />
-            <TextField name="zoneId" label="Zone ID" defaultValue={cloudflare.zoneId ?? ""} disabled={isSlave && !cloudflareOverride} fullWidth />
-            <TextField name="accountId" label="Account ID" defaultValue={cloudflare.accountId ?? ""} disabled={isSlave && !cloudflareOverride} fullWidth />
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save Cloudflare settings
-              </Button>
-            </Box>
-          </Stack>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="cf-apiToken">API token</Label>
+              <Input
+                id="cf-apiToken"
+                name="apiToken"
+                type="password"
+                autoComplete="new-password"
+                placeholder="Enter new token"
+                disabled={isSlave && !cloudflareOverride}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="cf-clearToken"
+                name="clearToken"
+                disabled={!cloudflare.hasToken || (isSlave && !cloudflareOverride)}
+              />
+              <Label htmlFor="cf-clearToken">Remove existing token</Label>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="cf-zoneId">Zone ID</Label>
+              <Input id="cf-zoneId" name="zoneId" defaultValue={cloudflare.zoneId ?? ""} disabled={isSlave && !cloudflareOverride} />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="cf-accountId">Account ID</Label>
+              <Input id="cf-accountId" name="accountId" defaultValue={cloudflare.accountId ?? ""} disabled={isSlave && !cloudflareOverride} />
+            </div>
+            <div className="flex justify-end">
+              <Button type="submit">Save Cloudflare settings</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
 
+      {/* DNS Resolvers */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            DNS Resolvers
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">DNS Resolvers</h2>
+          <p className="text-sm text-muted-foreground">
             Configure custom DNS resolvers for ACME DNS-01 challenges. These resolvers will be used to verify DNS records during certificate issuance.
-          </Typography>
-          <Stack component="form" action={dnsFormAction} spacing={2}>
+          </p>
+          <form action={dnsFormAction} className="flex flex-col gap-3">
             {dnsState?.message && (
-              <Alert severity={dnsState.success ? "success" : "error"}>
-                {dnsState.message}
-              </Alert>
+              <StatusAlert message={dnsState.message} success={dnsState.success} />
             )}
             {isSlave && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="overrideEnabled"
-                    checked={dnsOverride}
-                    onChange={(event) => setDnsOverride(event.target.checked)}
-                  />
-                }
-                label="Override master settings"
-              />
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="dns-override"
+                  name="overrideEnabled"
+                  checked={dnsOverride}
+                  onCheckedChange={(v) => setDnsOverride(!!v)}
+                />
+                <Label htmlFor="dns-override">Override master settings</Label>
+              </div>
             )}
-            <FormControlLabel
-              control={<Checkbox name="enabled" defaultChecked={dns?.enabled ?? false} disabled={isSlave && !dnsOverride} />}
-              label="Enable custom DNS resolvers"
-            />
-            <TextField
-              name="resolvers"
-              label="Primary DNS Resolvers"
-              placeholder="1.1.1.1&#10;8.8.8.8"
-              defaultValue={dns?.resolvers?.join("\n") ?? ""}
-              helperText="One resolver per line (e.g., 1.1.1.1, 8.8.8.8). Used for ACME DNS verification."
-              multiline
-              minRows={2}
-              disabled={isSlave && !dnsOverride}
-              fullWidth
-            />
-            <TextField
-              name="fallbacks"
-              label="Fallback DNS Resolvers (Optional)"
-              placeholder="8.8.4.4&#10;1.0.0.1"
-              defaultValue={dns?.fallbacks?.join("\n") ?? ""}
-              helperText="Fallback resolvers if primary fails. One per line."
-              multiline
-              minRows={2}
-              disabled={isSlave && !dnsOverride}
-              fullWidth
-            />
-            <TextField
-              name="timeout"
-              label="DNS Query Timeout"
-              placeholder="5s"
-              defaultValue={dns?.timeout ?? ""}
-              helperText="Timeout for DNS queries (e.g., 5s, 10s)"
-              disabled={isSlave && !dnsOverride}
-              fullWidth
-            />
-            <Alert severity="info">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="dns-enabled"
+                name="enabled"
+                defaultChecked={dns?.enabled ?? false}
+                disabled={isSlave && !dnsOverride}
+              />
+              <Label htmlFor="dns-enabled">Enable custom DNS resolvers</Label>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="dns-resolvers">Primary DNS Resolvers</Label>
+              <textarea
+                id="dns-resolvers"
+                name="resolvers"
+                placeholder={"1.1.1.1\n8.8.8.8"}
+                defaultValue={dns?.resolvers?.join("\n") ?? ""}
+                rows={2}
+                disabled={isSlave && !dnsOverride}
+                className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+              />
+              <p className="text-xs text-muted-foreground">One resolver per line (e.g., 1.1.1.1, 8.8.8.8). Used for ACME DNS verification.</p>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="dns-fallbacks">Fallback DNS Resolvers (Optional)</Label>
+              <textarea
+                id="dns-fallbacks"
+                name="fallbacks"
+                placeholder={"8.8.4.4\n1.0.0.1"}
+                defaultValue={dns?.fallbacks?.join("\n") ?? ""}
+                rows={2}
+                disabled={isSlave && !dnsOverride}
+                className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
+              />
+              <p className="text-xs text-muted-foreground">Fallback resolvers if primary fails. One per line.</p>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="dns-timeout">DNS Query Timeout</Label>
+              <Input
+                id="dns-timeout"
+                name="timeout"
+                placeholder="5s"
+                defaultValue={dns?.timeout ?? ""}
+                disabled={isSlave && !dnsOverride}
+              />
+              <p className="text-xs text-muted-foreground">Timeout for DNS queries (e.g., 5s, 10s)</p>
+            </div>
+            <InfoAlert>
               Custom DNS resolvers are useful when your DNS provider has slow propagation or when using split-horizon DNS.
               Common public resolvers: 1.1.1.1 (Cloudflare), 8.8.8.8 (Google), 9.9.9.9 (Quad9).
-            </Alert>
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save DNS settings
-              </Button>
-            </Box>
-          </Stack>
+            </InfoAlert>
+            <div className="flex justify-end">
+              <Button type="submit">Save DNS settings</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
 
+      {/* Upstream DNS Pinning */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            Upstream DNS Pinning
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">Upstream DNS Pinning</h2>
+          <p className="text-sm text-muted-foreground">
             Optionally resolve upstream hostnames when applying config and pin reverse proxy upstream dials to IP addresses.
             This can avoid runtime DNS churn and lets you force IPv6, IPv4, or both (IPv6 preferred).
-          </Typography>
-          <Stack component="form" action={upstreamDnsResolutionFormAction} spacing={2}>
+          </p>
+          <form action={upstreamDnsResolutionFormAction} className="flex flex-col gap-3">
             {upstreamDnsResolutionState?.message && (
-              <Alert severity={upstreamDnsResolutionState.success ? "success" : "error"}>
-                {upstreamDnsResolutionState.message}
-              </Alert>
+              <StatusAlert message={upstreamDnsResolutionState.message} success={upstreamDnsResolutionState.success} />
             )}
             {isSlave && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="overrideEnabled"
-                    checked={upstreamDnsResolutionOverride}
-                    onChange={(event) => setUpstreamDnsResolutionOverride(event.target.checked)}
-                  />
-                }
-                label="Override master settings"
-              />
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="udns-override"
+                  name="overrideEnabled"
+                  checked={upstreamDnsResolutionOverride}
+                  onCheckedChange={(v) => setUpstreamDnsResolutionOverride(!!v)}
+                />
+                <Label htmlFor="udns-override">Override master settings</Label>
+              </div>
             )}
-            <FormControlLabel
-              control={<Checkbox name="enabled" defaultChecked={upstreamDnsResolution?.enabled ?? false} disabled={isSlave && !upstreamDnsResolutionOverride} />}
-              label="Enable upstream DNS pinning during config apply"
-            />
-            <TextField
-              name="family"
-              label="Address Family Preference"
-              select
-              defaultValue={upstreamDnsResolution?.family ?? "both"}
-              helperText="Both resolves AAAA + A with IPv6 preferred ordering."
-              disabled={isSlave && !upstreamDnsResolutionOverride}
-              fullWidth
-            >
-              <MenuItem value="both">Both (Prefer IPv6)</MenuItem>
-              <MenuItem value="ipv6">IPv6 only</MenuItem>
-              <MenuItem value="ipv4">IPv4 only</MenuItem>
-            </TextField>
-            <Alert severity="info">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="udns-enabled"
+                name="enabled"
+                defaultChecked={upstreamDnsResolution?.enabled ?? false}
+                disabled={isSlave && !upstreamDnsResolutionOverride}
+              />
+              <Label htmlFor="udns-enabled">Enable upstream DNS pinning during config apply</Label>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="udns-family">Address Family Preference</Label>
+              <Select
+                name="family"
+                defaultValue={upstreamDnsResolution?.family ?? "both"}
+                disabled={isSlave && !upstreamDnsResolutionOverride}
+              >
+                <SelectTrigger id="udns-family">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <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">Both resolves AAAA + A with IPv6 preferred ordering.</p>
+            </div>
+            <InfoAlert>
               Host-level settings can override this default. Resolution happens at config save/reload time and resolved IPs are written into
-              Caddy's active config. If one handler has multiple different HTTPS upstream hostnames, HTTPS pinning is skipped for those
+              Caddy&apos;s active config. If one handler has multiple different HTTPS upstream hostnames, HTTPS pinning is skipped for those
               HTTPS upstreams to avoid SNI mismatch.
-            </Alert>
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save upstream DNS pinning settings
-              </Button>
-            </Box>
-          </Stack>
+            </InfoAlert>
+            <div className="flex justify-end">
+              <Button type="submit">Save upstream DNS pinning settings</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
 
+      {/* Authentik Defaults */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            Authentik Defaults
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">Authentik Defaults</h2>
+          <p className="text-sm text-muted-foreground">
             Set default Authentik forward authentication values. These will be pre-filled when creating new proxy hosts but can be customized per host.
-          </Typography>
-          <Stack component="form" action={authentikFormAction} spacing={2}>
+          </p>
+          <form action={authentikFormAction} className="flex flex-col gap-3">
             {authentikState?.message && (
-              <Alert severity={authentikState.success ? "success" : "error"}>
-                {authentikState.message}
-              </Alert>
+              <StatusAlert message={authentikState.message} success={authentikState.success} />
             )}
             {isSlave && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="overrideEnabled"
-                    checked={authentikOverride}
-                    onChange={(event) => setAuthentikOverride(event.target.checked)}
-                  />
-                }
-                label="Override master settings"
-              />
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="authentik-override"
+                  name="overrideEnabled"
+                  checked={authentikOverride}
+                  onCheckedChange={(v) => setAuthentikOverride(!!v)}
+                />
+                <Label htmlFor="authentik-override">Override master settings</Label>
+              </div>
             )}
-            <TextField
-              name="outpostDomain"
-              label="Outpost Domain"
-              placeholder="outpost.goauthentik.io"
-              defaultValue={authentik?.outpostDomain ?? ""}
-              helperText="Authentik outpost domain"
-              required
-              disabled={isSlave && !authentikOverride}
-              fullWidth
-            />
-            <TextField
-              name="outpostUpstream"
-              label="Outpost Upstream"
-              placeholder="http://authentik-server:9000"
-              defaultValue={authentik?.outpostUpstream ?? ""}
-              helperText="Internal URL of Authentik outpost"
-              required
-              disabled={isSlave && !authentikOverride}
-              fullWidth
-            />
-            <TextField
-              name="authEndpoint"
-              label="Authpost Endpoint"
-              placeholder="/outpost.goauthentik.io/auth/caddy"
-              defaultValue={authentik?.authEndpoint ?? ""}
-              helperText="Authpost endpoint path"
-              disabled={isSlave && !authentikOverride}
-              fullWidth
-            />
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save Authentik defaults
-              </Button>
-            </Box>
-          </Stack>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="outpostDomain">Outpost Domain</Label>
+              <Input
+                id="outpostDomain"
+                name="outpostDomain"
+                placeholder="outpost.goauthentik.io"
+                defaultValue={authentik?.outpostDomain ?? ""}
+                required
+                disabled={isSlave && !authentikOverride}
+              />
+              <p className="text-xs text-muted-foreground">Authentik outpost domain</p>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="outpostUpstream">Outpost Upstream</Label>
+              <Input
+                id="outpostUpstream"
+                name="outpostUpstream"
+                placeholder="http://authentik-server:9000"
+                defaultValue={authentik?.outpostUpstream ?? ""}
+                required
+                disabled={isSlave && !authentikOverride}
+              />
+              <p className="text-xs text-muted-foreground">Internal URL of Authentik outpost</p>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="authEndpoint">Authpost Endpoint</Label>
+              <Input
+                id="authEndpoint"
+                name="authEndpoint"
+                placeholder="/outpost.goauthentik.io/auth/caddy"
+                defaultValue={authentik?.authEndpoint ?? ""}
+                disabled={isSlave && !authentikOverride}
+              />
+              <p className="text-xs text-muted-foreground">Authpost endpoint path</p>
+            </div>
+            <div className="flex justify-end">
+              <Button type="submit">Save Authentik defaults</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
 
+      {/* Metrics & Monitoring */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            Metrics & Monitoring
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">Metrics & Monitoring</h2>
+          <p className="text-sm text-muted-foreground">
             Enable Caddy metrics exposure for monitoring with Prometheus, Grafana, or other observability tools.
             Metrics will be available at http://caddy:{metrics?.port ?? 9090}/metrics on a separate port (NOT the admin API port for security).
-          </Typography>
-          <Stack component="form" action={metricsFormAction} spacing={2}>
+          </p>
+          <form action={metricsFormAction} className="flex flex-col gap-3">
             {metricsState?.message && (
-              <Alert severity={metricsState.success ? "success" : "warning"}>
-                {metricsState.message}
-              </Alert>
+              <StatusAlert message={metricsState.message} success={metricsState.success} />
             )}
             {isSlave && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="overrideEnabled"
-                    checked={metricsOverride}
-                    onChange={(event) => setMetricsOverride(event.target.checked)}
-                  />
-                }
-                label="Override master settings"
-              />
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="metrics-override"
+                  name="overrideEnabled"
+                  checked={metricsOverride}
+                  onCheckedChange={(v) => setMetricsOverride(!!v)}
+                />
+                <Label htmlFor="metrics-override">Override master settings</Label>
+              </div>
             )}
-            <FormControlLabel
-              control={<Checkbox name="enabled" defaultChecked={metrics?.enabled ?? false} disabled={isSlave && !metricsOverride} />}
-              label="Enable metrics endpoint"
-            />
-            <TextField
-              name="port"
-              label="Metrics Port"
-              type="number"
-              defaultValue={metrics?.port ?? 9090}
-              helperText="Port to expose metrics on (default: 9090, separate from admin API on 2019)"
-              disabled={isSlave && !metricsOverride}
-              fullWidth
-            />
-            <Alert severity="info">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="metrics-enabled"
+                name="enabled"
+                defaultChecked={metrics?.enabled ?? false}
+                disabled={isSlave && !metricsOverride}
+              />
+              <Label htmlFor="metrics-enabled">Enable metrics endpoint</Label>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="metrics-port">Metrics Port</Label>
+              <Input
+                id="metrics-port"
+                name="port"
+                type="number"
+                defaultValue={metrics?.port ?? 9090}
+                disabled={isSlave && !metricsOverride}
+              />
+              <p className="text-xs text-muted-foreground">Port to expose metrics on (default: 9090, separate from admin API on 2019)</p>
+            </div>
+            <InfoAlert>
               After enabling metrics, configure your monitoring tool to scrape http://caddy-proxy-manager-caddy:{metrics?.port ?? 9090}/metrics from within the Docker network.
-              To expose metrics externally, add a port mapping like "{metrics?.port ?? 9090}:{metrics?.port ?? 9090}" in docker-compose.yml.
-            </Alert>
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save metrics settings
-              </Button>
-            </Box>
-          </Stack>
+              To expose metrics externally, add a port mapping like &ldquo;{metrics?.port ?? 9090}:{metrics?.port ?? 9090}&rdquo; in docker-compose.yml.
+            </InfoAlert>
+            <div className="flex justify-end">
+              <Button type="submit">Save metrics settings</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
 
+      {/* Access Logging */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            Access Logging
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">Access Logging</h2>
+          <p className="text-sm text-muted-foreground">
             Enable HTTP access logging to track all requests going through your proxy hosts.
             Logs will be stored in the caddy-logs directory and mounted at /logs/access.log inside the container.
-          </Typography>
-          <Stack component="form" action={loggingFormAction} spacing={2}>
+          </p>
+          <form action={loggingFormAction} className="flex flex-col gap-3">
             {loggingState?.message && (
-              <Alert severity={loggingState.success ? "success" : "warning"}>
-                {loggingState.message}
-              </Alert>
+              <StatusAlert message={loggingState.message} success={loggingState.success} />
             )}
             {isSlave && (
-              <FormControlLabel
-                control={
-                  <Checkbox
-                    name="overrideEnabled"
-                    checked={loggingOverride}
-                    onChange={(event) => setLoggingOverride(event.target.checked)}
-                  />
-                }
-                label="Override master settings"
-              />
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="logging-override"
+                  name="overrideEnabled"
+                  checked={loggingOverride}
+                  onCheckedChange={(v) => setLoggingOverride(!!v)}
+                />
+                <Label htmlFor="logging-override">Override master settings</Label>
+              </div>
             )}
-            <FormControlLabel
-              control={<Checkbox name="enabled" defaultChecked={logging?.enabled ?? false} disabled={isSlave && !loggingOverride} />}
-              label="Enable access logging"
-            />
-            <TextField
-              name="format"
-              label="Log Format"
-              select
-              defaultValue={logging?.format ?? "json"}
-              helperText="Format for access logs"
-              disabled={isSlave && !loggingOverride}
-              fullWidth
-            >
-              <MenuItem value="json">JSON</MenuItem>
-              <MenuItem value="console">Console (Common Log Format)</MenuItem>
-            </TextField>
-            <Alert severity="info">
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="logging-enabled"
+                name="enabled"
+                defaultChecked={logging?.enabled ?? false}
+                disabled={isSlave && !loggingOverride}
+              />
+              <Label htmlFor="logging-enabled">Enable access logging</Label>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="logging-format">Log Format</Label>
+              <Select
+                name="format"
+                defaultValue={logging?.format ?? "json"}
+                disabled={isSlave && !loggingOverride}
+              >
+                <SelectTrigger id="logging-format">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="json">JSON</SelectItem>
+                  <SelectItem value="console">Console (Common Log Format)</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">Format for access logs</p>
+            </div>
+            <InfoAlert>
               Access logs are stored in the caddy-logs Docker volume.
               You can view them with: docker exec caddy-proxy-manager-caddy tail -f /logs/access.log
-            </Alert>
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save logging settings
-              </Button>
-            </Box>
-          </Stack>
+            </InfoAlert>
+            <div className="flex justify-end">
+              <Button type="submit">Save logging settings</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
 
+      {/* Global Geoblocking */}
       <Card>
-        <CardContent>
-          <Typography variant="h6" fontWeight={600} gutterBottom>
-            Global Geoblocking
-          </Typography>
-          <Typography color="text.secondary" variant="body2" sx={{ mb: 2 }}>
+        <CardContent className="flex flex-col gap-4 pt-6">
+          <h2 className="text-lg font-semibold">Global Geoblocking</h2>
+          <p className="text-sm text-muted-foreground">
             Configure default geoblocking rules applied to all proxy hosts. Per-host rules can merge with or override these global defaults.
-          </Typography>
-          <Stack component="form" action={geoBlockFormAction} spacing={2}>
+          </p>
+          <form action={geoBlockFormAction} className="flex flex-col gap-3">
             {geoBlockState?.message && (
-              <Alert severity={geoBlockState.success ? "success" : "error"}>
-                {geoBlockState.message}
-              </Alert>
+              <StatusAlert message={geoBlockState.message} success={geoBlockState.success} />
             )}
             <GeoBlockFields
               initialValues={{ geoblock: globalGeoBlock ?? null, geoblock_mode: "merge" }}
               showModeSelector={false}
             />
-            <Box sx={{ display: "flex", justifyContent: "flex-end" }}>
-              <Button type="submit" variant="contained">
-                Save geoblocking settings
-              </Button>
-            </Box>
-          </Stack>
+            <div className="flex justify-end">
+              <Button type="submit">Save geoblocking settings</Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
-
-    </Stack>
+    </div>
   );
 }
diff --git a/app/providers.tsx b/app/providers.tsx
index 4f32cb18..657dc3b4 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -3,11 +3,14 @@
 import { ReactNode } from "react";
 import { ThemeProvider } from "next-themes";
 import { Toaster } from "sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 export default function Providers({ children }: { children: ReactNode }) {
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
-      {children}
+      <TooltipProvider>
+        {children}
+      </TooltipProvider>
       <Toaster richColors position="bottom-right" />
     </ThemeProvider>
   );