From a8966f8174d9350f26a48a97d60eb6284fbbccd5 Mon Sep 17 00:00:00 2001
From: tayloraj10 <taylor.alan.johnson@gmail.com>
Date: Tue, 14 Jul 2026 19:51:40 -0400
Subject: [PATCH 1/3] Add authenticated layout and dashboard redesign

Applies the shared theming and layout components to the authenticated
shell and rebuilds the dashboard page, including the pending-reviews
summary card.
---
 app/routes/authenticated/_layout.tsx   |  82 ++++++---
 app/routes/authenticated/dashboard.tsx | 239 ++++++++++++++++++++++++-
 2 files changed, 284 insertions(+), 37 deletions(-)

diff --git a/app/routes/authenticated/_layout.tsx b/app/routes/authenticated/_layout.tsx
index a0983a8..f2b77f5 100644
--- a/app/routes/authenticated/_layout.tsx
+++ b/app/routes/authenticated/_layout.tsx
@@ -1,42 +1,68 @@
+import { Dashboard, Logout, RateReview } from "@mui/icons-material";
 import { Link, NavLink, Outlet } from "react-router";
-
 import phlasklogo from "~/assets/PHLASK_v2.svg";
+import { ThemeToggle } from "~/components/ThemeToggle";
+import { WaveDivider } from "~/components/WaveDivider";
 
 export const action = () => {};
 
+const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+  `flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-medium transition-colors ${
+    isActive
+      ? "bg-brand-50 text-brand-700 dark:bg-navy-800 dark:text-brand-300"
+      : "text-navy-600 hover:bg-brand-50 dark:text-brand-100/80 dark:hover:bg-navy-800"
+  }`;
+
 export default function DashboardLayout() {
   return (
-    <div className="flex h-screen bg-gray-50 text-gray-900">
-      <aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
-        <div className="p-6 border-b border-gray-100">
-          <h1 className="text-xl font-bold text-blue-600 tracking-tight">
-            <img src={phlasklogo} alt="PHLASK Logo" />
-          </h1>
+    <div className="flex h-screen bg-brand-50 text-navy-900 dark:bg-navy-950 dark:text-brand-50">
+      <aside className="flex w-64 flex-col bg-white dark:bg-navy-900">
+        <div className="relative overflow-hidden bg-gradient-to-br from-brand-400 to-brand-600 pt-6 pb-9 pl-6 dark:from-navy-600 dark:to-navy-800">
+          <div className="inline-flex rounded-xl bg-white/90 p-2 shadow-sm dark:bg-navy-950/70">
+            <img src={phlasklogo} alt="PHLASK Logo" className="h-6 w-auto" />
+          </div>
+          <p className="mt-2 text-xs font-medium text-white/80">
+            Admin dashboard
+          </p>
+          <WaveDivider
+            color="currentColor"
+            height={22}
+            className="bottom-0 text-white dark:text-navy-900"
+            duration={22}
+          />
         </div>
 
-        <nav className="flex flex-col justify-between flex-1 p-4 space-y-1">
-          <ul>
-            <NavLink
-              to="/"
-              end
-              className={({ isActive }) =>
-                `block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
-                  isActive
-                    ? "bg-blue-50 text-blue-700"
-                    : "text-gray-600 hover:bg-gray-100"
-                }`
-              }
-            >
-              Dashboard
-            </NavLink>
+        <nav className="flex flex-1 flex-col justify-between p-4">
+          <ul className="space-y-1">
+            <li>
+              <NavLink to="/" end className={navLinkClass}>
+                <Dashboard fontSize="small" />
+                Dashboard
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/reviews" className={navLinkClass}>
+                <RateReview fontSize="small" />
+                Reviews
+              </NavLink>
+            </li>
           </ul>
 
-          <Link
-            to="/logout"
-            className="block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
-          >
-            Logout
-          </Link>
+          <div className="space-y-2 border-t border-brand-100 pt-3 dark:border-navy-700">
+            <div className="flex items-center justify-between rounded-xl px-3 py-1.5">
+              <span className="text-xs font-semibold text-navy-500 dark:text-brand-100/70">
+                Theme
+              </span>
+              <ThemeToggle />
+            </div>
+            <Link
+              to="/logout"
+              className="flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-medium text-navy-600 transition-colors hover:bg-brand-50 dark:text-brand-100/80 dark:hover:bg-navy-800"
+            >
+              <Logout fontSize="small" />
+              Logout
+            </Link>
+          </div>
         </nav>
       </aside>
 
diff --git a/app/routes/authenticated/dashboard.tsx b/app/routes/authenticated/dashboard.tsx
index 83ac4cf..845c394 100644
--- a/app/routes/authenticated/dashboard.tsx
+++ b/app/routes/authenticated/dashboard.tsx
@@ -1,14 +1,235 @@
-import type { MiddlewareFunction } from "react-router";
+import { HourglassTop, PendingActions, WaterDrop } from "@mui/icons-material";
+import {
+  Box,
+  Chip,
+  Paper,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Tooltip,
+  Typography,
+} from "@mui/material";
+import type { LoaderFunction } from "react-router";
+import { Link, useLoaderData } from "react-router";
+import { getDatabaseClient } from "~/api/client.server";
+import { getResourceRevisionAPI } from "~/api/resource-revisions/methods";
 import { authMiddleware } from "~/middleware/auth";
+import type { ResourceType } from "~/types/ResourceEntry";
+import {
+  resourceTypeChipColor,
+  resourceTypeChipIcon,
+} from "~/utils/chipColors";
 
-export const middleware: MiddlewareFunction[] = [authMiddleware];
+export const middleware = [authMiddleware];
+
+const RESOURCE_TYPES: ResourceType[] = ["WATER", "FOOD", "FORAGE", "BATHROOM"];
+
+export const loader: LoaderFunction = async ({ request }) => {
+  const { client } = getDatabaseClient(request);
+  const revisionAPI = getResourceRevisionAPI(client);
+  const revisions = await revisionAPI.getList();
+
+  const submitterCounts = new Map<string, number>();
+  const outstandingByType = new Map<string, number>();
+  let pendingCount = 0;
+
+  for (const revision of revisions) {
+    const creator = revision.creator || "Unknown";
+    submitterCounts.set(creator, (submitterCounts.get(creator) ?? 0) + 1);
+
+    if (revision.status === "PENDING") {
+      pendingCount += 1;
+      outstandingByType.set(
+        revision.resource_type,
+        (outstandingByType.get(revision.resource_type) ?? 0) + 1,
+      );
+    }
+  }
+
+  const topSubmitters = [...submitterCounts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 5)
+    .map(([creator, count]) => ({ creator, count }));
+
+  const outstanding = RESOURCE_TYPES.map((type) => ({
+    type,
+    count: outstandingByType.get(type) ?? 0,
+  }));
+
+  return {
+    totalRevisions: revisions.length,
+    pendingCount,
+    topSubmitters,
+    outstanding,
+  };
+};
+
+type LoaderData = {
+  totalRevisions: number;
+  pendingCount: number;
+  topSubmitters: { creator: string; count: number }[];
+  outstanding: { type: string; count: number }[];
+};
+
+const StatCard = ({
+  label,
+  value,
+  icon,
+}: {
+  label: string;
+  value: string | number;
+  icon: React.ReactNode;
+}) => (
+  <Paper
+    variant="outlined"
+    sx={{
+      p: 2.5,
+      flex: 1,
+      minWidth: 200,
+      display: "flex",
+      alignItems: "center",
+      gap: 2,
+    }}
+  >
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 48,
+        height: 48,
+        borderRadius: "14px",
+        background: "linear-gradient(135deg, #38c1ff, #0090de)",
+        color: "#fff",
+        flexShrink: 0,
+      }}
+    >
+      {icon}
+    </Box>
+    <Box>
+      <Typography variant="body2" color="text.secondary">
+        {label}
+      </Typography>
+      <Typography variant="h4" fontWeight={700}>
+        {value}
+      </Typography>
+    </Box>
+  </Paper>
+);
+
+const Dashboard = () => {
+  const { totalRevisions, pendingCount, topSubmitters, outstanding } =
+    useLoaderData<LoaderData>();
 
-export default function Dashboard() {
   return (
-    <div>
-      <h1 className="text-3xl font-bold text-gray-900 mb-4">
-        Dashboard Overview
-      </h1>
-    </div>
+    <Stack gap={3}>
+      <Box>
+        <Typography variant="h5" fontWeight={600} gutterBottom>
+          Dashboard overview
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Snapshot of resource edit submissions and review activity.
+        </Typography>
+      </Box>
+
+      <Stack direction="row" gap={2} flexWrap="wrap">
+        <StatCard
+          label="Pending reviews"
+          value={pendingCount}
+          icon={<PendingActions fontSize="small" />}
+        />
+        <StatCard
+          label="Total submissions"
+          value={totalRevisions}
+          icon={<HourglassTop fontSize="small" />}
+        />
+      </Stack>
+
+      <Stack direction={{ xs: "column", md: "row" }} gap={3}>
+        <Paper variant="outlined" sx={{ p: 2.5, flex: 1 }}>
+          <Stack direction="row" alignItems="center" gap={0.75} mb={1}>
+            <WaterDrop fontSize="small" color="primary" />
+            <Typography variant="subtitle1" fontWeight={600}>
+              Outstanding by resource type
+            </Typography>
+          </Stack>
+          <TableContainer>
+            <Table size="small">
+              <TableBody>
+                {outstanding.map(({ type, count }) => (
+                  <TableRow key={type}>
+                    <TableCell>
+                      <Chip
+                        label={type}
+                        size="small"
+                        icon={resourceTypeChipIcon(type)}
+                        color={resourceTypeChipColor(type)}
+                      />
+                    </TableCell>
+                    <TableCell align="right" sx={{ fontWeight: 600 }}>
+                      {count}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <Typography
+            variant="body2"
+            color="primary"
+            component={Link}
+            to="/reviews"
+            sx={{ display: "inline-block", mt: 1.5 }}
+          >
+            View pending reviews →
+          </Typography>
+        </Paper>
+
+        <Paper variant="outlined" sx={{ p: 2.5, flex: 1 }}>
+          <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+            Top submitters
+          </Typography>
+          {topSubmitters.length === 0 ? (
+            <Typography variant="body2" color="text.secondary">
+              No submissions yet.
+            </Typography>
+          ) : (
+            <TableContainer>
+              <Table size="small">
+                <TableBody>
+                  {topSubmitters.map(({ creator, count }) => (
+                    <TableRow key={creator}>
+                      <TableCell>{creator}</TableCell>
+                      <TableCell align="right" sx={{ fontWeight: 600 }}>
+                        {count}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
+        </Paper>
+
+        <Paper
+          variant="outlined"
+          sx={{ p: 2.5, flex: 1, bgcolor: "action.hover" }}
+        >
+          <Tooltip title="resource_revisions has no reviewed_by column yet, so there's no record of who approved/rejected a given submission. Add that column (and set it in the approve/reject action) to unlock this.">
+            <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+              Top approvers
+            </Typography>
+          </Tooltip>
+          <Typography variant="body2" color="text.secondary">
+            Not trackable yet — approvals don't record who approved them.
+          </Typography>
+        </Paper>
+      </Stack>
+    </Stack>
   );
-}
+};
+
+export default Dashboard;

From 13fad621b8da04e2c9726cb118bec02480dd8426 Mon Sep 17 00:00:00 2001
From: tayloraj10 <taylor.alan.johnson@gmail.com>
Date: Tue, 14 Jul 2026 20:37:49 -0400
Subject: [PATCH 2/3] Convert authenticated layout from Tailwind to MUI

---
 app/components/WaveDivider.tsx       |  36 +++--
 app/routes/authenticated/_layout.tsx | 209 ++++++++++++++++++++++-----
 2 files changed, 196 insertions(+), 49 deletions(-)

diff --git a/app/components/WaveDivider.tsx b/app/components/WaveDivider.tsx
index 06057c5..9618bfc 100644
--- a/app/components/WaveDivider.tsx
+++ b/app/components/WaveDivider.tsx
@@ -1,3 +1,5 @@
+import { Box, type SxProps, type Theme } from "@mui/material";
+
 // Two periods of the same wave back-to-back so a -50% translateX loops seamlessly.
 const WAVE_PATH =
   "M0,40 C150,90 350,0 600,40 C850,80 1050,0 1200,40 C1350,80 1550,0 1800,40 C1950,80 2150,0 2400,40 L2400,120 L0,120 Z";
@@ -8,7 +10,7 @@ type WaveDividerProps = {
   opacity?: number;
   duration?: number;
   reverse?: boolean;
-  className?: string;
+  sx?: SxProps<Theme>;
 };
 
 export function WaveDivider({
@@ -17,27 +19,41 @@ export function WaveDivider({
   opacity = 1,
   duration = 18,
   reverse = false,
-  className,
+  sx,
 }: WaveDividerProps) {
   return (
-    <div
+    <Box
       aria-hidden
-      className={`pointer-events-none absolute inset-x-0 overflow-hidden leading-none ${className ?? ""}`}
-      style={{ height }}
+      sx={[
+        {
+          pointerEvents: "none",
+          position: "absolute",
+          insetInline: 0,
+          overflow: "hidden",
+          lineHeight: 0,
+          height,
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
-      <svg
+      <Box
+        component="svg"
         aria-hidden="true"
         viewBox="0 0 2400 120"
         preserveAspectRatio="none"
-        className="absolute inset-y-0 left-0 h-full w-[200%]"
-        style={{
+        sx={{
+          position: "absolute",
+          insetBlock: 0,
+          left: 0,
+          height: "100%",
+          width: "200%",
           animation: `wave-drift ${duration}s linear infinite`,
           animationDirection: reverse ? "reverse" : "normal",
           opacity,
         }}
       >
         <path d={WAVE_PATH} fill={color} />
-      </svg>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/app/routes/authenticated/_layout.tsx b/app/routes/authenticated/_layout.tsx
index f2b77f5..959568c 100644
--- a/app/routes/authenticated/_layout.tsx
+++ b/app/routes/authenticated/_layout.tsx
@@ -1,76 +1,207 @@
 import { Dashboard, Logout, RateReview } from "@mui/icons-material";
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
 import { Link, NavLink, Outlet } from "react-router";
 import phlasklogo from "~/assets/PHLASK_v2.svg";
 import { ThemeToggle } from "~/components/ThemeToggle";
 import { WaveDivider } from "~/components/WaveDivider";
+import { brand, navy } from "~/theme/theme";
 
 export const action = () => {};
 
-const navLinkClass = ({ isActive }: { isActive: boolean }) =>
-  `flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-medium transition-colors ${
-    isActive
-      ? "bg-brand-50 text-brand-700 dark:bg-navy-800 dark:text-brand-300"
-      : "text-navy-600 hover:bg-brand-50 dark:text-brand-100/80 dark:hover:bg-navy-800"
-  }`;
+const SidebarNavLink = styled(NavLink)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1.25),
+  borderRadius: 12,
+  padding: `${theme.spacing(1.25)} ${theme.spacing(2)}`,
+  fontSize: "0.875rem",
+  fontWeight: 500,
+  textDecoration: "none",
+  color: navy[600],
+  transition: "color 0.2s ease, background-color 0.2s ease",
+  "&:hover": { backgroundColor: brand[50] },
+  "&.active": {
+    color: brand[700],
+    backgroundColor: brand[50],
+  },
+  ...theme.applyStyles("dark", {
+    color: `${brand[100]}cc`,
+    "&:hover": { backgroundColor: navy[800] },
+    "&.active": {
+      color: brand[300],
+      backgroundColor: navy[800],
+    },
+  }),
+}));
 
 export default function DashboardLayout() {
   return (
-    <div className="flex h-screen bg-brand-50 text-navy-900 dark:bg-navy-950 dark:text-brand-50">
-      <aside className="flex w-64 flex-col bg-white dark:bg-navy-900">
-        <div className="relative overflow-hidden bg-gradient-to-br from-brand-400 to-brand-600 pt-6 pb-9 pl-6 dark:from-navy-600 dark:to-navy-800">
-          <div className="inline-flex rounded-xl bg-white/90 p-2 shadow-sm dark:bg-navy-950/70">
-            <img src={phlasklogo} alt="PHLASK Logo" className="h-6 w-auto" />
-          </div>
-          <p className="mt-2 text-xs font-medium text-white/80">
+    <Box
+      sx={(theme) => ({
+        display: "flex",
+        height: "100vh",
+        bgcolor: brand[50],
+        color: navy[900],
+        ...theme.applyStyles("dark", { bgcolor: navy[950], color: brand[50] }),
+      })}
+    >
+      <Box
+        component="aside"
+        sx={(theme) => ({
+          display: "flex",
+          width: 256,
+          flexDirection: "column",
+          bgcolor: "#ffffff",
+          ...theme.applyStyles("dark", { bgcolor: navy[900] }),
+        })}
+      >
+        <Box
+          sx={(theme) => ({
+            position: "relative",
+            overflow: "hidden",
+            backgroundImage: `linear-gradient(to bottom right, ${brand[400]}, ${brand[600]})`,
+            pt: 3,
+            pb: 4.5,
+            pl: 3,
+            ...theme.applyStyles("dark", {
+              backgroundImage: `linear-gradient(to bottom right, ${navy[600]}, ${navy[800]})`,
+            }),
+          })}
+        >
+          <Box
+            sx={(theme) => ({
+              display: "inline-flex",
+              borderRadius: 3,
+              bgcolor: "rgba(255,255,255,0.9)",
+              p: 1,
+              boxShadow: 1,
+              ...theme.applyStyles("dark", { bgcolor: `${navy[950]}b3` }),
+            })}
+          >
+            <img
+              src={phlasklogo}
+              alt="PHLASK Logo"
+              style={{ height: 24, width: "auto" }}
+            />
+          </Box>
+          <Box
+            component="p"
+            sx={{
+              mt: 1,
+              fontSize: "0.75rem",
+              fontWeight: 500,
+              color: "rgba(255,255,255,0.8)",
+            }}
+          >
             Admin dashboard
-          </p>
+          </Box>
           <WaveDivider
             color="currentColor"
             height={22}
-            className="bottom-0 text-white dark:text-navy-900"
             duration={22}
+            sx={(theme) => ({
+              bottom: 0,
+              color: "#ffffff",
+              ...theme.applyStyles("dark", { color: navy[900] }),
+            })}
           />
-        </div>
+        </Box>
 
-        <nav className="flex flex-1 flex-col justify-between p-4">
-          <ul className="space-y-1">
+        <Box
+          component="nav"
+          sx={{
+            display: "flex",
+            flex: 1,
+            flexDirection: "column",
+            justifyContent: "space-between",
+            p: 2,
+          }}
+        >
+          <Box
+            component="ul"
+            sx={{ listStyle: "none", m: 0, p: 0, "& > li + li": { mt: 0.5 } }}
+          >
             <li>
-              <NavLink to="/" end className={navLinkClass}>
+              <SidebarNavLink to="/" end>
                 <Dashboard fontSize="small" />
                 Dashboard
-              </NavLink>
+              </SidebarNavLink>
             </li>
             <li>
-              <NavLink to="/reviews" className={navLinkClass}>
+              <SidebarNavLink to="/reviews">
                 <RateReview fontSize="small" />
                 Reviews
-              </NavLink>
+              </SidebarNavLink>
             </li>
-          </ul>
+          </Box>
 
-          <div className="space-y-2 border-t border-brand-100 pt-3 dark:border-navy-700">
-            <div className="flex items-center justify-between rounded-xl px-3 py-1.5">
-              <span className="text-xs font-semibold text-navy-500 dark:text-brand-100/70">
+          <Box
+            sx={(theme) => ({
+              display: "flex",
+              flexDirection: "column",
+              gap: 1,
+              borderTop: `1px solid ${brand[100]}`,
+              pt: 1.5,
+              ...theme.applyStyles("dark", { borderTopColor: navy[700] }),
+            })}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                borderRadius: 3,
+                px: 1.5,
+                py: 0.75,
+              }}
+            >
+              <Box
+                component="span"
+                sx={(theme) => ({
+                  fontSize: "0.75rem",
+                  fontWeight: 600,
+                  ...theme.applyStyles("dark", { color: `${brand[100]}b3` }),
+                })}
+              >
                 Theme
-              </span>
+              </Box>
               <ThemeToggle />
-            </div>
-            <Link
+            </Box>
+            <Box
+              component={Link}
               to="/logout"
-              className="flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-medium text-navy-600 transition-colors hover:bg-brand-50 dark:text-brand-100/80 dark:hover:bg-navy-800"
+              sx={(theme) => ({
+                display: "flex",
+                alignItems: "center",
+                gap: 1.25,
+                borderRadius: 3,
+                px: 2,
+                py: 1.25,
+                fontSize: "0.875rem",
+                fontWeight: 500,
+                textDecoration: "none",
+                color: navy[600],
+                transition: "background-color 0.2s ease",
+                "&:hover": { bgcolor: brand[50] },
+                ...theme.applyStyles("dark", {
+                  color: `${brand[100]}cc`,
+                  "&:hover": { bgcolor: navy[800] },
+                }),
+              })}
             >
               <Logout fontSize="small" />
               Logout
-            </Link>
-          </div>
-        </nav>
-      </aside>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
 
-      <main className="flex-1 overflow-auto">
-        <div className="p-8">
+      <Box component="main" sx={{ flex: 1, overflow: "auto" }}>
+        <Box sx={{ p: 4 }}>
           <Outlet />
-        </div>
-      </main>
-    </div>
+        </Box>
+      </Box>
+    </Box>
   );
 }

From 50c7b46d4433ddc611f0d20d8139d03e1b080fe6 Mon Sep 17 00:00:00 2001
From: tayloraj10 <taylor.alan.johnson@gmail.com>
Date: Tue, 14 Jul 2026 20:53:10 -0400
Subject: [PATCH 3/3] Convert remaining pages to MUI and remove Tailwind CSS
 infrastructure

Converts root.tsx's ErrorBoundary, ThemeToggle, and the unauthenticated
layout from Tailwind classes to MUI, then removes the Tailwind vite
plugin, dependency, and CSS directives now that nothing in this branch
renders with them.
---
 app/app.css                            |  30 ++--
 app/components/ThemeToggle.tsx         |  19 ++-
 app/root.tsx                           |  12 +-
 app/routes/unauthenticated/_layout.tsx |  50 ++++--
 package.json                           |   2 -
 pnpm-lock.yaml                         | 207 +------------------------
 vite.config.ts                         |   3 +-
 7 files changed, 78 insertions(+), 245 deletions(-)

diff --git a/app/app.css b/app/app.css
index ceb77af..342b3a5 100644
--- a/app/app.css
+++ b/app/app.css
@@ -1,40 +1,32 @@
-@import 'tailwindcss';
-
 /* Dark mode is toggled by adding/removing `.dark` on <html> (see ThemeModeProvider),
    rather than following the OS preference, so it can stay in sync with the MUI theme. */
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  --font-sans:
-    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-  /* Water/brand blue, anchored on the PHLASK logo color (#10B6FF = brand-500) */
+:root {
+  /* Water/brand blue, anchored on the PHLASK logo color (#10B6FF = brand-500).
+     Mirrored in app/theme/theme.ts (kept in sync manually). */
   --color-brand-50: #eafaff;
   --color-brand-100: #d6f4ff;
-  --color-brand-200: #ade8ff;
   --color-brand-300: #6fd6ff;
-  --color-brand-400: #38c1ff;
-  --color-brand-500: #10b6ff;
-  --color-brand-600: #0090de;
-  --color-brand-700: #0072b3;
-  --color-brand-800: #045c90;
-  --color-brand-900: #0a3a5c;
 
   /* Deep ocean navy, used for dark-mode surfaces */
   --color-navy-950: #071522;
   --color-navy-900: #0a1929;
-  --color-navy-800: #10263a;
-  --color-navy-700: #17344c;
   --color-navy-600: #1f4560;
 }
 
 html,
 body {
-  @apply bg-brand-50 text-navy-900 dark:bg-navy-950 dark:text-brand-50;
+  background-color: var(--color-brand-50);
+  color: var(--color-navy-900);
   color-scheme: light;
 }
 
+html.dark,
+html.dark body {
+  background-color: var(--color-navy-950);
+  color: var(--color-brand-50);
+}
+
 html.dark {
   color-scheme: dark;
 }
diff --git a/app/components/ThemeToggle.tsx b/app/components/ThemeToggle.tsx
index c5ee989..206b561 100644
--- a/app/components/ThemeToggle.tsx
+++ b/app/components/ThemeToggle.tsx
@@ -4,8 +4,8 @@ import { useThemeMode } from "~/theme/ThemeModeProvider";
 import { brand, navy } from "~/theme/theme";
 
 // Styling and icon visibility are driven purely by the `.dark` class (via
-// theme.applyStyles / Tailwind's dark: variant) rather than the `mode` value
-// from React state, so this can never mismatch between SSR and hydration.
+// theme.applyStyles) rather than the `mode` value from React state, so this
+// can never mismatch between SSR and hydration.
 export function ThemeToggle() {
   const { toggleMode } = useThemeMode();
 
@@ -26,8 +26,19 @@ export function ThemeToggle() {
           }),
         })}
       >
-        <LightMode fontSize="small" className="dark:hidden" />
-        <DarkMode fontSize="small" className="hidden dark:inline-block" />
+        <LightMode
+          fontSize="small"
+          sx={(theme) => ({
+            ...theme.applyStyles("dark", { display: "none" }),
+          })}
+        />
+        <DarkMode
+          fontSize="small"
+          sx={(theme) => ({
+            display: "none",
+            ...theme.applyStyles("dark", { display: "inline-block" }),
+          })}
+        />
       </IconButton>
     </Tooltip>
   );
diff --git a/app/root.tsx b/app/root.tsx
index 346688c..e68b313 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@mui/material";
 import {
   isRouteErrorResponse,
   Links,
@@ -82,14 +83,17 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   }
 
   return (
-    <main className="pt-16 p-4 container mx-auto">
+    <Box
+      component="main"
+      sx={{ pt: 8, p: 2, maxWidth: "lg", mx: "auto", width: "100%" }}
+    >
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
-        <pre className="w-full p-4 overflow-x-auto">
+        <Box component="pre" sx={{ width: "100%", p: 2, overflowX: "auto" }}>
           <code>{stack}</code>
-        </pre>
+        </Box>
       )}
-    </main>
+    </Box>
   );
 }
diff --git a/app/routes/unauthenticated/_layout.tsx b/app/routes/unauthenticated/_layout.tsx
index a855b88..2503c6b 100644
--- a/app/routes/unauthenticated/_layout.tsx
+++ b/app/routes/unauthenticated/_layout.tsx
@@ -1,23 +1,49 @@
+import { Box } from "@mui/material";
 import { Outlet } from "react-router";
 
 import phlasklogo from "~/assets/PHLASK_v2.svg";
 
 export default function UnauthenticatedLayout() {
   return (
-    <div className="flex h-screen bg-gray-50 text-gray-900">
-      <aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
-        <div className="p-6 border-b border-gray-100">
-          <h1 className="text-xl font-bold text-blue-600 tracking-tight">
+    <Box
+      sx={{
+        display: "flex",
+        height: "100vh",
+        bgcolor: "#f9fafb",
+        color: "#111827",
+      }}
+    >
+      <Box
+        component="aside"
+        sx={{
+          display: "flex",
+          width: 256,
+          flexDirection: "column",
+          bgcolor: "#ffffff",
+          borderRight: "1px solid #e5e7eb",
+        }}
+      >
+        <Box sx={{ p: 3, borderBottom: "1px solid #f3f4f6" }}>
+          <Box
+            component="h1"
+            sx={{
+              m: 0,
+              fontSize: "1.25rem",
+              fontWeight: 700,
+              color: "#2563eb",
+              letterSpacing: "-0.025em",
+            }}
+          >
             <img src={phlasklogo} alt="PHLASK Logo" />
-          </h1>
-        </div>
-      </aside>
+          </Box>
+        </Box>
+      </Box>
 
-      <main className="flex-1 overflow-auto">
-        <div className="p-8">
+      <Box component="main" sx={{ flex: 1, overflow: "auto" }}>
+        <Box sx={{ p: 4 }}>
           <Outlet />
-        </div>
-      </main>
-    </div>
+        </Box>
+      </Box>
+    </Box>
   );
 }
diff --git a/package.json b/package.json
index ca30df3..798bbe5 100644
--- a/package.json
+++ b/package.json
@@ -33,12 +33,10 @@
   "devDependencies": {
     "@biomejs/biome": "2.3.14",
     "@react-router/dev": "^7.13.0",
-    "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^22.19.11",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "lefthook": "^2.1.1",
-    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-tsconfig-paths": "^5.1.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f33c4e3..9890669 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,9 +66,6 @@ importers:
       '@react-router/dev':
         specifier: ^7.13.0
         version: 7.13.0(@react-router/serve@7.13.0(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3))(@types/node@22.19.11)(babel-plugin-macros@3.1.0)(jiti@2.6.1)(lightningcss@1.30.2)(react-router@7.13.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2))
-      '@tailwindcss/vite':
-        specifier: ^4.1.18
-        version: 4.1.18(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2))
       '@types/node':
         specifier: ^22.19.11
         version: 22.19.11
@@ -81,9 +78,6 @@ importers:
       lefthook:
         specifier: ^2.1.1
         version: 2.1.1
-      tailwindcss:
-        specifier: ^4.1.18
-        version: 4.1.18
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -831,100 +825,6 @@ packages:
     resolution: {integrity: sha512-KaIHsO6LU1cuqpYMsprQhfedRJFuTAf4dr8/k4/4Po6urRVXIWzmdY/lHPnf8Mzw2Fh0ueQVQYdaXzOvCBGnGQ==}
     engines: {node: '>=20.0.0'}
 
-  '@tailwindcss/node@4.1.18':
-    resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
-
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
-    resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tailwindcss/oxide@4.1.18':
-    resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
-    engines: {node: '>= 10'}
-
-  '@tailwindcss/vite@4.1.18':
-    resolution: {integrity: sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==}
-    peerDependencies:
-      vite: ^5.2.0 || ^6 || ^7
-
   '@tanstack/react-table@8.21.3':
     resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
     engines: {node: '>=12'}
@@ -1135,10 +1035,6 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
-  enhanced-resolve@5.19.0:
-    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
-    engines: {node: '>=10.13.0'}
-
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
@@ -1243,9 +1139,6 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -1452,9 +1345,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  magic-string@0.30.21:
-    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
-
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1748,13 +1638,6 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  tailwindcss@4.1.18:
-    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
-
-  tapable@2.3.0:
-    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
-    engines: {node: '>=6'}
-
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
@@ -2585,74 +2468,6 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@tailwindcss/node@4.1.18':
-    dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.19.0
-      jiti: 2.6.1
-      lightningcss: 1.30.2
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.18
-
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
-    optional: true
-
-  '@tailwindcss/oxide@4.1.18':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-x64': 4.1.18
-      '@tailwindcss/oxide-freebsd-x64': 4.1.18
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
-
-  '@tailwindcss/vite@4.1.18(vite@7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2))':
-    dependencies:
-      '@tailwindcss/node': 4.1.18
-      '@tailwindcss/oxide': 4.1.18
-      tailwindcss: 4.1.18
-      vite: 7.3.1(@types/node@22.19.11)(jiti@2.6.1)(lightningcss@1.30.2)
-
   '@tanstack/react-table@8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
       '@tanstack/table-core': 8.21.3
@@ -2832,7 +2647,8 @@ snapshots:
 
   destroy@1.2.0: {}
 
-  detect-libc@2.1.2: {}
+  detect-libc@2.1.2:
+    optional: true
 
   dom-helpers@5.2.1:
     dependencies:
@@ -2851,11 +2667,6 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
-  enhanced-resolve@5.19.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.0
-
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -3000,8 +2811,6 @@ snapshots:
 
   gopd@1.2.0: {}
 
-  graceful-fs@4.2.11: {}
-
   has-symbols@1.1.0: {}
 
   hasown@2.0.2:
@@ -3043,7 +2852,8 @@ snapshots:
 
   isbot@5.1.35: {}
 
-  jiti@2.6.1: {}
+  jiti@2.6.1:
+    optional: true
 
   js-tokens@4.0.0: {}
 
@@ -3144,6 +2954,7 @@ snapshots:
       lightningcss-linux-x64-musl: 1.30.2
       lightningcss-win32-arm64-msvc: 1.30.2
       lightningcss-win32-x64-msvc: 1.30.2
+    optional: true
 
   lines-and-columns@1.2.4: {}
 
@@ -3157,10 +2968,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  magic-string@0.30.21:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-
   math-intrinsics@1.1.0: {}
 
   media-typer@0.3.0: {}
@@ -3453,10 +3260,6 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  tailwindcss@4.1.18: {}
-
-  tapable@2.3.0: {}
-
   tinyglobby@0.2.15:
     dependencies:
       fdir: 6.5.0(picomatch@4.0.3)
diff --git a/vite.config.ts b/vite.config.ts
index 3f3f041..c4140c9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,9 @@
 import { reactRouter } from "@react-router/dev/vite";
-import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+  plugins: [reactRouter(), tsconfigPaths()],
   server: {
     port: 5174,
   },