diff --git a/src/components/ui/AppDialog.tsx b/src/components/ui/AppDialog.tsx
index bb110360..ff06379a 100644
--- a/src/components/ui/AppDialog.tsx
+++ b/src/components/ui/AppDialog.tsx
@@ -1,77 +1,84 @@
-
 import {
-    Dialog,
-    DialogTitle,
-    DialogContent,
-    DialogActions,
-    IconButton,
-    Typography,
-    Button
-} from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
 import { ReactNode } from "react";
 
 type AppDialogProps = {
-    open: boolean;
-    onClose: () => void;
-    title: string;
-    children: ReactNode;
-    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
-    actions?: ReactNode;
-    submitLabel?: string;
-    onSubmit?: () => void;
-    isSubmitting?: boolean;
+  open: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
+  actions?: ReactNode;
+  submitLabel?: string;
+  onSubmit?: () => void;
+  isSubmitting?: boolean;
+};
+
+const MAX_WIDTH_CLASS: Record<NonNullable<AppDialogProps["maxWidth"]>, string> = {
+  xs: "max-w-xs",
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
 };
 
 export function AppDialog({
-    open,
-    onClose,
-    title,
-    children,
-    maxWidth = "sm",
-    actions,
-    submitLabel = "Save",
-    onSubmit,
-    isSubmitting = false
+  open,
+  onClose,
+  title,
+  children,
+  maxWidth = "sm",
+  actions,
+  submitLabel = "Save",
+  onSubmit,
+  isSubmitting = false,
 }: AppDialogProps) {
-    return (
-        <Dialog
-            open={open}
-            onClose={onClose}
-            maxWidth={maxWidth}
-            fullWidth
-            PaperProps={{
-                elevation: 0,
-                variant: "outlined"
-            }}
-        >
-            <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                <Typography variant="h6">{title}</Typography>
-                <IconButton onClick={onClose} size="small" sx={{ color: "text.secondary" }}>
-                    <CloseIcon fontSize="small" />
-                </IconButton>
-            </DialogTitle>
-            <DialogContent dividers>
-                {children}
-            </DialogContent>
-            <DialogActions sx={{ p: 2 }}>
-                {actions ? actions : (
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className={MAX_WIDTH_CLASS[maxWidth]}>
+        <DialogHeader className="flex flex-row items-center justify-between pr-6">
+          <DialogTitle>{title}</DialogTitle>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute right-4 top-4 h-6 w-6"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </DialogHeader>
+
+        <div className="overflow-y-auto py-4 px-1">{children}</div>
+
+        <DialogFooter>
+          {actions ?? (
+            <>
+              <Button variant="outline" onClick={onClose}>
+                Cancel
+              </Button>
+              {onSubmit && (
+                <Button onClick={onSubmit} disabled={isSubmitting}>
+                  {isSubmitting ? (
                     <>
-                        <Button onClick={onClose} color="inherit">
-                            Cancel
-                        </Button>
-                        {onSubmit && (
-                            <Button
-                                onClick={onSubmit}
-                                variant="contained"
-                                disabled={isSubmitting}
-                            >
-                                {submitLabel}
-                            </Button>
-                        )}
+                      <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent mr-2" />
+                      Saving…
                     </>
-                )}
-            </DialogActions>
-        </Dialog>
-    );
+                  ) : (
+                    submitLabel
+                  )}
+                </Button>
+              )}
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
 }
diff --git a/src/components/ui/DataTable.tsx b/src/components/ui/DataTable.tsx
index 8e0502e7..c6883fa7 100644
--- a/src/components/ui/DataTable.tsx
+++ b/src/components/ui/DataTable.tsx
@@ -1,20 +1,16 @@
 "use client";
 
 import {
-  Box,
-  Card,
-  Pagination,
-  Stack,
   Table,
   TableBody,
   TableCell,
-  TableContainer,
   TableHead,
+  TableHeader,
   TableRow,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
+} from "@/components/ui/table";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { ReactNode } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
@@ -38,7 +34,6 @@ type DataTableProps<T> = {
     page: number;
     perPage: number;
   };
-  /** If provided, renders this instead of the table on xs/sm screens */
   mobileCard?: (row: T) => ReactNode;
 };
 
@@ -50,22 +45,91 @@ function PaginationBar({ page, perPage, total }: { page: number; perPage: number
 
   if (pageCount <= 1) return null;
 
-  function handlePageChange(_: React.ChangeEvent<unknown>, newPage: number) {
+  function goTo(newPage: number) {
     const params = new URLSearchParams(searchParams.toString());
     params.set("page", String(newPage));
     router.push(`${pathname}?${params.toString()}`);
   }
 
   return (
-    <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
-      <Pagination
-        count={pageCount}
-        page={page}
-        onChange={handlePageChange}
-        color="primary"
-        shape="rounded"
-      />
-    </Box>
+    <div className="flex items-center justify-center gap-2 mt-4">
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => goTo(page - 1)}
+        disabled={page <= 1}
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      <span className="text-sm text-muted-foreground">
+        Page {page} of {pageCount}
+      </span>
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => goTo(page + 1)}
+        disabled={page >= pageCount}
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+
+function DesktopTable<T>({
+  columns, data, keyField, emptyMessage, onRowClick, isEmpty,
+}: {
+  columns: Column<T>[];
+  data: T[];
+  keyField: keyof T;
+  emptyMessage: string;
+  onRowClick?: (row: T) => void;
+  isEmpty: boolean;
+}) {
+  return (
+    <div className="rounded-md border overflow-x-auto">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((col) => (
+              <TableHead
+                key={col.id}
+                style={{ width: col.width }}
+                className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : ""}
+              >
+                {col.label}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {isEmpty ? (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="text-center py-12 text-muted-foreground">
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          ) : (
+            data.map((row) => (
+              <TableRow
+                key={String(row[keyField])}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+                className={onRowClick ? "cursor-pointer hover:bg-muted/50" : ""}
+              >
+                {columns.map((col) => (
+                  <TableCell
+                    key={col.id}
+                    className={col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : ""}
+                  >
+                    {col.render ? col.render(row) : (row as Record<string, unknown>)[col.id] as ReactNode}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
   );
 }
 
@@ -79,76 +143,47 @@ export function DataTable<T>({
   pagination,
   mobileCard,
 }: DataTableProps<T>) {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
-
   const isEmpty = data.length === 0 && !loading;
 
-  if (isMobile && mobileCard) {
+  if (mobileCard) {
     return (
-      <Box>
-        {isEmpty ? (
-          <Card variant="outlined" sx={{ py: 6, textAlign: "center" }}>
-            <Typography color="text.secondary">{emptyMessage}</Typography>
-          </Card>
-        ) : (
-          <Stack spacing={1.5}>
-            {data.map((row) => (
-              <Box key={String(row[keyField])}>
-                {mobileCard(row)}
-              </Box>
-            ))}
-          </Stack>
-        )}
-        {pagination && <PaginationBar {...pagination} />}
-      </Box>
+      <div>
+        <div className="block md:hidden">
+          {isEmpty ? (
+            <Card>
+              <CardContent className="py-12 text-center text-muted-foreground">
+                {emptyMessage}
+              </CardContent>
+            </Card>
+          ) : (
+            <div className="flex flex-col gap-3">
+              {data.map((row) => (
+                <div key={String(row[keyField])}>{mobileCard(row)}</div>
+              ))}
+            </div>
+          )}
+          {pagination && <PaginationBar {...pagination} />}
+        </div>
+        <div className="hidden md:block">
+          <DesktopTable
+            columns={columns} data={data} keyField={keyField}
+            emptyMessage={emptyMessage} onRowClick={onRowClick}
+            isEmpty={isEmpty}
+          />
+          {pagination && <PaginationBar {...pagination} />}
+        </div>
+      </div>
     );
   }
 
   return (
-    <Box>
-      <TableContainer component={Card} variant="outlined" sx={{ overflowX: "auto" }}>
-        <Table sx={{ minWidth: 600 }}>
-          <TableHead>
-            <TableRow>
-              {columns.map((col) => (
-                <TableCell
-                  key={col.id}
-                  align={col.align || "left"}
-                  width={col.width}
-                >
-                  {col.label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {isEmpty ? (
-              <TableRow>
-                <TableCell colSpan={columns.length} align="center" sx={{ py: 8 }}>
-                  <Typography color="text.secondary">{emptyMessage}</Typography>
-                </TableCell>
-              </TableRow>
-            ) : (
-              data.map((row) => (
-                <TableRow
-                  key={String(row[keyField])}
-                  onClick={onRowClick ? () => onRowClick(row) : undefined}
-                  sx={onRowClick ? { cursor: "pointer", "&:hover": { bgcolor: "action.hover" } } : undefined}
-                >
-                  {columns.map((col) => (
-                    <TableCell key={col.id} align={col.align || "left"}>
-                      {col.render ? col.render(row) : (row as Record<string, unknown>)[col.id] as ReactNode}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </TableContainer>
-
+    <div>
+      <DesktopTable
+        columns={columns} data={data} keyField={keyField}
+        emptyMessage={emptyMessage} onRowClick={onRowClick}
+        isEmpty={isEmpty}
+      />
       {pagination && <PaginationBar {...pagination} />}
-    </Box>
+    </div>
   );
 }
diff --git a/src/components/ui/PageHeader.tsx b/src/components/ui/PageHeader.tsx
index c559a2d3..eb19075c 100644
--- a/src/components/ui/PageHeader.tsx
+++ b/src/components/ui/PageHeader.tsx
@@ -1,47 +1,32 @@
-import { Button, Stack, Typography } from "@mui/material";
-import AddIcon from "@mui/icons-material/Add";
+import { Plus } from "lucide-react";
 import { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
 
 type PageHeaderProps = {
-    title: string;
-    description?: string;
-    action?: {
-        label: string;
-        onClick: () => void;
-        icon?: ReactNode;
-    };
+  title: string;
+  description?: string;
+  action?: {
+    label: string;
+    onClick: () => void;
+    icon?: ReactNode;
+  };
 };
 
 export function PageHeader({ title, description, action }: PageHeaderProps) {
-    return (
-        <Stack
-            direction={{ xs: "column", sm: "row" }}
-            justifyContent="space-between"
-            alignItems={{ xs: "flex-start", sm: "flex-start" }}
-            spacing={2}
-            sx={{ mb: 4 }}
-        >
-            <Stack spacing={1}>
-                <Typography variant="h4" color="text.primary">
-                    {title}
-                </Typography>
-                {description && (
-                    <Typography variant="body1" color="text.secondary" sx={{ maxWidth: 600 }}>
-                        {description}
-                    </Typography>
-                )}
-            </Stack>
-            {action && (
-                <Button
-                    variant="contained"
-                    startIcon={action.icon ?? <AddIcon />}
-                    onClick={action.onClick}
-                    color="primary"
-                    sx={{ fontWeight: 600 }}
-                >
-                    {action.label}
-                </Button>
-            )}
-        </Stack>
-    );
+  return (
+    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between mb-8">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground max-w-xl">{description}</p>
+        )}
+      </div>
+      {action && (
+        <Button onClick={action.onClick} className="shrink-0">
+          {action.icon ?? <Plus className="h-4 w-4" />}
+          {action.label}
+        </Button>
+      )}
+    </div>
+  );
 }
diff --git a/src/components/ui/SearchField.tsx b/src/components/ui/SearchField.tsx
index fd052fc0..3ecb0eeb 100644
--- a/src/components/ui/SearchField.tsx
+++ b/src/components/ui/SearchField.tsx
@@ -1,37 +1,21 @@
+import { Search } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { InputHTMLAttributes } from "react";
 
-import { InputAdornment, TextField, TextFieldProps } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
+type SearchFieldProps = InputHTMLAttributes<HTMLInputElement> & {
+  className?: string;
+};
 
-export function SearchField(props: TextFieldProps) {
-    return (
-        <TextField
-            placeholder="Search..."
-            variant="outlined"
-            size="small"
-            slotProps={{
-                input: {
-                    startAdornment: (
-                        <InputAdornment position="start">
-                            <SearchIcon sx={{ color: "text.secondary" }} />
-                        </InputAdornment>
-                    )
-                }
-            }}
-            sx={{
-                maxWidth: 400,
-                "& .MuiOutlinedInput-root": {
-                    bgcolor: "background.paper",
-                    transition: "all 0.2s",
-                    "&:hover": {
-                        bgcolor: "action.hover"
-                    },
-                    "&.Mui-focused": {
-                        bgcolor: "background.paper",
-                        boxShadow: "0 4px 20px rgba(0,0,0,0.2)"
-                    }
-                }
-            }}
-            {...props}
-        />
-    );
+export function SearchField({ className, ...props }: SearchFieldProps) {
+  return (
+    <div className={cn("relative max-w-xs", className)}>
+      <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+      <Input
+        placeholder="Search..."
+        className="pl-8"
+        {...props}
+      />
+    </div>
+  );
 }
diff --git a/src/components/ui/StatusChip.tsx b/src/components/ui/StatusChip.tsx
index daa54e06..4588517a 100644
--- a/src/components/ui/StatusChip.tsx
+++ b/src/components/ui/StatusChip.tsx
@@ -1,58 +1,34 @@
-import { Box, Typography } from "@mui/material";
-import type { SxProps, Theme } from "@mui/material";
+import { cn } from "@/lib/utils";
 
 type StatusType = "active" | "inactive" | "error" | "warning";
 
 type StatusChipProps = {
-    status: StatusType;
-    label?: string;
-    sx?: SxProps<Theme>;
+  status: StatusType;
+  label?: string;
+  className?: string;
 };
 
-const STATUS_CONFIG: Record<StatusType, { color: string; label: string }> = {
-    active: { color: "#22c55e", label: "Active" },   // Green-500
-    inactive: { color: "#71717a", label: "Paused" }, // Zinc-500
-    error: { color: "#ef4444", label: "Error" },     // Red-500
-    warning: { color: "#f59e0b", label: "Warning" }  // Amber-500
+const STATUS_CONFIG: Record<StatusType, { dot: string; text: string; label: string }> = {
+  active:   { dot: "bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]",  text: "text-green-500",  label: "Active"  },
+  inactive: { dot: "bg-zinc-500",                                          text: "text-zinc-400",   label: "Paused"  },
+  error:    { dot: "bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]",    text: "text-red-500",    label: "Error"   },
+  warning:  { dot: "bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]", text: "text-amber-500",  label: "Warning" },
 };
 
-export function StatusChip({ status, label, sx }: StatusChipProps) {
-    const config = STATUS_CONFIG[status];
-    const displayLabel = label || config.label;
+export function StatusChip({ status, label, className }: StatusChipProps) {
+  const config = STATUS_CONFIG[status];
+  const displayLabel = label ?? config.label;
 
-    return (
-        <Box
-            sx={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: 1,
-                px: 1.5,
-                py: 0.5,
-                borderRadius: "9999px",
-                bgcolor: "rgba(255,255,255,0.03)",
-                border: "1px solid rgba(255,255,255,0.08)",
-                ...sx
-            }}
-        >
-            <Box
-                sx={{
-                    width: 8,
-                    height: 8,
-                    borderRadius: "50%",
-                    bgcolor: config.color,
-                    boxShadow: `0 0 8px ${config.color}66`
-                }}
-            />
-            <Typography
-                variant="caption"
-                sx={{
-                    fontWeight: 600,
-                    color: "text.primary",
-                    lineHeight: 1
-                }}
-            >
-                {displayLabel}
-            </Typography>
-        </Box>
-    );
+  return (
+    <span className={cn(
+      "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full",
+      "bg-white/[0.03] border border-white/[0.08]",
+      className
+    )}>
+      <span className={cn("w-2 h-2 rounded-full shrink-0", config.dot)} />
+      <span className={cn("text-xs font-semibold leading-none", config.text)}>
+        {displayLabel}
+      </span>
+    </span>
+  );
 }