From 07bb2d7e4b44666c53bef543fa3f66dab27becf2 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 03:16:34 +0000
Subject: [PATCH 01/29] feat: "v1" of changes (WIP)

---
 site/src/components/Alert/Alert.tsx           |  7 +-
 site/src/components/Avatar/AvatarCard.tsx     | 16 ++--
 site/src/components/CustomLogo/CustomLogo.tsx |  3 +-
 .../Dialogs/DeleteDialog/DeleteDialog.tsx     |  2 +-
 .../DurationField/DurationField.tsx           |  7 +-
 site/src/modules/resources/AgentRow.tsx       |  6 +-
 .../pages/CreateTokenPage/CreateTokenPage.tsx |  7 +-
 .../pages/CreateUserPage/CreateUserForm.tsx   | 16 +---
 .../pages/DeploymentSettingsPage/Fieldset.tsx | 31 ++------
 .../TemplateVariablesPageView.tsx             |  4 +-
 .../UsersPage/UsersTable/UserGroupsCell.tsx   | 15 +---
 .../UsersPage/UsersTable/UsersTableBody.tsx   |  6 +-
 site/src/pages/WorkspaceBuildPage/Sidebar.tsx | 44 +++--------
 .../pages/WorkspacePage/HistorySidebar.tsx    |  2 +-
 .../pages/WorkspacePage/ResourcesSidebar.tsx  | 39 ++--------
 .../BuildParametersPopover.tsx                | 26 +++----
 .../WorkspaceActions/WorkspaceActions.tsx     |  5 +-
 .../WorkspaceBuildLogsSection.tsx             | 36 ++-------
 .../WorkspacePage/WorkspaceBuildProgress.tsx  |  6 +-
 .../WorkspaceNotifications/Notifications.tsx  | 41 +++-------
 .../WorkspaceNotifications.tsx                | 12 +--
 .../src/pages/WorkspacePage/WorkspacePage.tsx |  2 +-
 .../WorkspaceScheduleControls.tsx             | 73 +++++-------------
 .../pages/WorkspacePage/WorkspaceTopbar.tsx   | 60 ++++-----------
 .../WorkspaceParametersPage.tsx               |  7 +-
 .../WorkspaceScheduleForm.tsx                 | 11 +--
 .../WorkspaceSchedulePage.tsx                 |  2 +-
 .../WorkspaceSettingsForm.tsx                 | 14 ++--
 .../WorkspaceSettingsLayout.tsx               |  4 +-
 .../WorkspaceSettingsPageView.tsx             |  6 +-
 .../pages/WorkspacesPage/WorkspacesButton.tsx | 76 +++++--------------
 .../WorkspacesPage/WorkspacesPageView.tsx     | 10 +--
 32 files changed, 142 insertions(+), 454 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index 86ae99b3b0c86..b0db11f0c8da5 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -40,7 +40,7 @@ export const Alert: FC<AlertProps> = ({
 		<Collapse in>
 			<MuiAlert
 				{...alertProps}
-				css={{ textAlign: "left" }}
+				className="text-left"
 				severity={severity}
 				action={
 					<>
@@ -72,10 +72,7 @@ export const Alert: FC<AlertProps> = ({
 
 export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<span
-			css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
-			data-chromatic="ignore"
-		>
+		<span className={"text-sm text-content-secondary"} data-chromatic="ignore">
 			{children}
 		</span>
 	);
diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx
index 97df5c6ee765c..187c9ffa50cdd 100644
--- a/site/src/components/Avatar/AvatarCard.tsx
+++ b/site/src/components/Avatar/AvatarCard.tsx
@@ -1,6 +1,7 @@
 import { type CSSObject, useTheme } from "@emotion/react";
 import { Avatar } from "components/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
+import { cn } from "utils/cn";
 
 type AvatarCardProps = {
 	header: string;
@@ -19,16 +20,13 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 
 	return (
 		<div
+			className={cn(
+				"flex flex-row flex-nowrap items-center gap-4",
+				"p-4 rounded-lg cursor-default border border-solid border-zinc-700",
+			)}
+			// TODO: We don't actually use this prop, so we should remove it.
 			css={{
 				maxWidth: maxWidth === "none" ? undefined : `${maxWidth}px`,
-				display: "flex",
-				flexFlow: "row nowrap",
-				alignItems: "center",
-				border: `1px solid ${theme.palette.divider}`,
-				gap: "16px",
-				padding: "16px",
-				borderRadius: "8px",
-				cursor: "default",
 			}}
 		>
 			{/**
@@ -37,7 +35,7 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 			 *
 			 * @see {@link https://css-tricks.com/flexbox-truncated-text/}
 			 */}
-			<div css={{ marginRight: "auto", minWidth: 0 }}>
+			<div className="mr-auto min-w-0">
 				<h3
 					// Lets users hover over truncated text to see whole thing
 					title={header}
diff --git a/site/src/components/CustomLogo/CustomLogo.tsx b/site/src/components/CustomLogo/CustomLogo.tsx
index 0e8c080d4375c..ca6a7da781d06 100644
--- a/site/src/components/CustomLogo/CustomLogo.tsx
+++ b/site/src/components/CustomLogo/CustomLogo.tsx
@@ -24,8 +24,7 @@ export const CustomLogo: FC<{ css?: Interpolation<Theme> }> = (props) => {
 			onLoad={(e) => {
 				e.currentTarget.style.display = "inline";
 			}}
-			css={{ maxWidth: 200 }}
-			className="application-logo"
+			className="application-logo max-w-50"
 		/>
 	) : (
 		<CoderIcon {...props} className="w-12 h-12" />
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
index 9bee94fe24714..851dd5534c836 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -78,7 +78,7 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({
 						<TextField
 							fullWidth
 							autoFocus
-							css={{ marginTop: 24 }}
+							className="mt-6"
 							name="confirmation"
 							autoComplete="off"
 							id={`${hookId}-confirm`}
diff --git a/site/src/components/DurationField/DurationField.tsx b/site/src/components/DurationField/DurationField.tsx
index 9a2cb602fb469..a051324996367 100644
--- a/site/src/components/DurationField/DurationField.tsx
+++ b/site/src/components/DurationField/DurationField.tsx
@@ -77,12 +77,7 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
 
 	return (
 		<div>
-			<div
-				css={{
-					display: "flex",
-					gap: 8,
-				}}
-			>
+			<div className="flex gap-2">
 				<TextField
 					{...textFieldProps}
 					fullWidth
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 9838e7ca8360c..544ef5341bf12 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -296,11 +296,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 			</div>
 
 			{hasStartupFeatures && (
-				<section
-					css={(theme) => ({
-						borderTop: `1px solid ${theme.palette.divider}`,
-					})}
-				>
+				<section className="border-0 border-solid border-t border-border-default">
 					<Collapse in={showLogs}>
 						<AutoSizer disableHeight>
 							{({ width }) => (
diff --git a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
index 5184efb908d1d..813a81be1cdd1 100644
--- a/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
+++ b/site/src/pages/CreateTokenPage/CreateTokenPage.tsx
@@ -72,12 +72,7 @@ const CreateTokenPage: FC = () => {
 			<CodeExample
 				secret={false}
 				code={newToken?.key ?? ""}
-				css={{
-					minHeight: "auto",
-					userSelect: "all",
-					width: "100%",
-					marginTop: 24,
-				}}
+				className="min-h-[auto] select-all w-full mt-6"
 			/>
 		</>
 	);
diff --git a/site/src/pages/CreateUserPage/CreateUserForm.tsx b/site/src/pages/CreateUserPage/CreateUserForm.tsx
index 3cad2f2a718cb..9961f788aa287 100644
--- a/site/src/pages/CreateUserPage/CreateUserForm.tsx
+++ b/site/src/pages/CreateUserPage/CreateUserForm.tsx
@@ -188,21 +188,9 @@ export const CreateUserForm: FC<
 							const language = authMethodLanguage[value];
 							return (
 								<MenuItem key={value} id={`item-${value}`} value={value}>
-									<Stack
-										spacing={0}
-										css={{
-											maxWidth: 400,
-										}}
-									>
+									<Stack spacing={0} className="max-w-100">
 										{language.displayName}
-										<span
-											css={(theme) => ({
-												fontSize: 14,
-												color: theme.palette.text.secondary,
-												wordWrap: "normal",
-												whiteSpace: "break-spaces",
-											})}
-										>
+										<span className="text-sm text-content-secondary whitespace-break-spaces break-normal">
 											{language.description}
 										</span>
 									</Stack>
diff --git a/site/src/pages/DeploymentSettingsPage/Fieldset.tsx b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
index 9a6e479fa8bc7..f9c5cf5c26325 100644
--- a/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
+++ b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
@@ -25,34 +25,13 @@ export const Fieldset: FC<FieldsetProps> = ({
 
 	return (
 		<form
-			css={{
-				borderRadius: 8,
-				border: `1px solid ${theme.palette.divider}`,
-				marginTop: 32,
-				overflow: "hidden",
-			}}
+			className="rounded-lg border border-solid border-zinc-700 overflow-hidden"
 			onSubmit={onSubmit}
 		>
-			<header css={{ padding: 24 }}>
-				<div
-					css={{
-						fontSize: 20,
-						margin: 0,
-						fontWeight: 600,
-					}}
-				>
-					{title}
-				</div>
+			<header className="p-6">
+				<div className="text-xl font-semibold m-0">{title}</div>
 				{subtitle && (
-					<div
-						css={{
-							color: theme.palette.text.secondary,
-							fontSize: 14,
-							marginTop: 8,
-						}}
-					>
-						{subtitle}
-					</div>
+					<div className="text-sm text-content-secondary mt-2">{subtitle}</div>
 				)}
 				<div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
 					{children}
@@ -70,7 +49,7 @@ export const Fieldset: FC<FieldsetProps> = ({
 					},
 				]}
 			>
-				<div css={{ color: theme.palette.text.secondary }}>{validation}</div>
+				<div className="text-content-secondary">{validation}</div>
 				{button || (
 					<Button type="submit" disabled={isSubmitting}>
 						Submit
diff --git a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
index fa41553045bc5..35647cdd4d8ef 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateVariablesPage/TemplateVariablesPageView.tsx
@@ -44,11 +44,11 @@ export const TemplateVariablesPageView: FC<TemplateVariablesPageViewProps> = ({
 
 	return (
 		<>
-			<PageHeader css={{ paddingTop: 0 }}>
+			<PageHeader className="pt-0">
 				<PageHeaderTitle>Template variables</PageHeaderTitle>
 			</PageHeader>
 			{hasError && (
-				<Stack css={{ marginBottom: 64 }}>
+				<Stack className="mb-16">
 					{Boolean(errors.buildError) && (
 						<ErrorAlert error={errors.buildError} />
 					)}
diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
index 909c62c26a552..056f08a4e7b92 100644
--- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -76,10 +76,7 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
 										return (
 											<ListItem
 												key={group.id}
-												css={{
-													columnGap: 10,
-													alignItems: "center",
-												}}
+												className="gap-x-2.5 items-center"
 											>
 												<Avatar
 													size="sm"
@@ -88,15 +85,7 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
 													fallback={groupName}
 												/>
 
-												<span
-													css={{
-														whiteSpace: "nowrap",
-														textOverflow: "ellipsis",
-														overflow: "hidden",
-														lineHeight: 1,
-														margin: 0,
-													}}
-												>
+												<span className="whitespace-nowrap text-ellipsis overflow-hidden leading-none m-0">
 													{groupName || <em>N/A</em>}
 												</span>
 											</ListItem>
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
index c605928dbb059..abd742618ef68 100644
--- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
@@ -124,7 +124,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
 					<Cond condition={isNonInitialPage}>
 						<TableRow>
 							<TableCell colSpan={999}>
-								<div css={{ padding: 32 }}>
+								<div className="p-8">
 									<EmptyState message="No users found on this page" />
 								</div>
 							</TableCell>
@@ -134,7 +134,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
 					<Cond>
 						<TableRow>
 							<TableCell colSpan={999}>
-								<div css={{ padding: 32 }}>
+								<div className="p-8">
 									<EmptyState message="No users found" />
 								</div>
 							</TableCell>
@@ -289,7 +289,7 @@ const LoginType: FC<LoginTypeProps> = ({ authMethods, value }) => {
 	}
 
 	return (
-		<div css={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14 }}>
+		<div className="flex items-center gap-2 text-sm">
 			{icon}
 			{displayName}
 		</div>
diff --git a/site/src/pages/WorkspaceBuildPage/Sidebar.tsx b/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
index 4e38d39cb228a..56df404a4dcd3 100644
--- a/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
+++ b/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
@@ -1,17 +1,12 @@
 import type { FC, HTMLAttributes } from "react";
+import { cn } from "utils/cn";
 export const Sidebar: FC<HTMLAttributes<HTMLElement>> = ({
 	children,
 	...attrs
 }) => {
 	return (
 		<nav
-			css={(theme) => ({
-				width: 256,
-				flexShrink: 0,
-				borderRight: `1px solid ${theme.palette.divider}`,
-				height: "100%",
-				overflowY: "auto",
-			})}
+			className="w-64 flex-shrink-0 border-0 border-r border-solid border-zinc-700 h-full overflow-y-auto"
 			{...attrs}
 		>
 			{children}
@@ -30,25 +25,13 @@ export const SidebarItem: FC<SidebarItemProps> = ({
 }) => {
 	return (
 		<button
-			css={(theme) => ({
-				background: active ? theme.experimental.l2.background : "none",
-				border: "none",
-				fontSize: 14,
-				width: "100%",
-				textAlign: "left",
-				padding: "0 24px",
-				cursor: "pointer",
-				pointerEvents: active ? "none" : "auto",
-				color: active
-					? theme.palette.text.primary
-					: theme.palette.text.secondary,
-				"&:hover": {
-					background: theme.palette.action.hover,
-					color: theme.palette.text.primary,
-				},
-				paddingTop: 10,
-				paddingBottom: 10,
-			})}
+			className={cn(
+				"bg-transparent border-none text-sm w-full text-left",
+				"cursor-pointer py-2.5 px-6",
+				"hover:bg-surface-secondary hover:text-content-primary",
+				active && "none text-content-primary",
+				!active && "pointer-events-auto text-content-secondary",
+			)}
 			{...attrs}
 		>
 			{children}
@@ -62,14 +45,7 @@ export const SidebarCaption: FC<HTMLAttributes<HTMLDivElement>> = ({
 }) => {
 	return (
 		<div
-			css={(theme) => ({
-				fontSize: 10,
-				textTransform: "uppercase",
-				fontWeight: 500,
-				color: theme.palette.text.secondary,
-				padding: "12px 24px",
-				letterSpacing: "0.5px",
-			})}
+			className="text-[10px] uppercase font-medium text-content-secondary tracking-widest py-3 px-4"
 			{...attrs}
 		>
 			{children}
diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
index 3ab9966d3d1e6..729a8a6a22b79 100644
--- a/site/src/pages/WorkspacePage/HistorySidebar.tsx
+++ b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -49,7 +49,7 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 								</SidebarItem>
 							))}
 					{buildsQuery.hasNextPage && (
-						<div css={{ padding: 16 }}>
+						<div className="p-4">
 							<Button
 								onClick={() => buildsQuery.fetchNextPage()}
 								disabled={buildsQuery.isFetchingNextPage}
diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
index 4a60443a98ddb..3d85a6bea19e4 100644
--- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
@@ -28,15 +28,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 		<Sidebar>
 			<SidebarCaption>Resources</SidebarCaption>
 			{failed && (
-				<p
-					css={{
-						margin: 0,
-						padding: "0 16px",
-						fontSize: 13,
-						color: theme.palette.text.secondary,
-						lineHeight: "1.5",
-					}}
-				>
+				<p className="m-0 py-4 text-sm text-content-secondary leading-normal">
 					Your workspace build failed, so the necessary resources couldn&apos;t
 					be created.
 				</p>
@@ -55,30 +47,16 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 					key={r.id}
 					css={styles.root}
 				>
-					<div
-						css={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							lineHeight: 0,
-							width: 16,
-							height: 16,
-							padding: 2,
-						}}
-					>
+					<div className="flex items-center justify-center leading-[0] w-4 h-4 p-0.5">
 						<img
-							css={{ width: "100%", height: "100%", objectFit: "contain" }}
+							className="w-full h-full object-contain"
 							src={getResourceIconPath(r.type)}
 							alt=""
 						/>
 					</div>
-					<div
-						css={{ display: "flex", flexDirection: "column", fontWeight: 500 }}
-					>
+					<div className="flex flex-col font-medium">
 						<span>{r.name}</span>
-						<span css={{ fontSize: 12, color: theme.palette.text.secondary }}>
-							{r.type}
-						</span>
+						<span className="text-xs text-content-secondary">{r.type}</span>
 					</div>
 				</SidebarItem>
 			))}
@@ -92,12 +70,7 @@ const ResourceSidebarItemSkeleton: FC = () => {
 			<Skeleton variant="circular" width={16} height={16} />
 			<div>
 				<Skeleton variant="text" width={94} height={16} />
-				<Skeleton
-					variant="text"
-					width={60}
-					height={14}
-					css={{ marginTop: 2 }}
-				/>
+				<Skeleton variant="text" width={60} height={14} className="mt-0.5" />
 			</div>
 		</div>
 	);
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
index a39dcd949c642..44a6ae38c1d7b 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
@@ -28,6 +28,7 @@ import { useFormik } from "formik";
 import { ChevronDownIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useQuery } from "react-query";
+import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import { getFormHelpers } from "utils/formUtils";
 import {
@@ -69,7 +70,7 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
 					className="min-w-fit"
 				>
 					<ChevronDownIcon />
-					<span css={{ ...visuallyHidden }}>{label}</span>
+					<span className="sr-only">{label}</span>
 				</TopbarButton>
 			</PopoverTrigger>
 			<PopoverContent
@@ -150,19 +151,13 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
 			{buildParameters && ephemeralParameters ? (
 				ephemeralParameters.length > 0 ? (
 					<>
-						<div
-							css={{
-								color: theme.palette.text.secondary,
-								padding: 20,
-								borderBottom: `1px solid ${theme.palette.divider}`,
-							}}
-						>
+						<div className="text-content-secondary p-5 border-0 border-t border-solid border-zinc-700">
 							<HelpTooltipTitle>Build Options</HelpTooltipTitle>
 							<HelpTooltipText>
 								These parameters only apply for a single workspace start.
 							</HelpTooltipText>
 						</div>
-						<div css={{ padding: 20 }}>
+						<div className="p-5">
 							<Form
 								onSubmit={(buildParameters) => {
 									onSubmit(buildParameters);
@@ -180,11 +175,10 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
 					</>
 				) : (
 					<div
-						css={{
-							color: theme.palette.text.secondary,
-							padding: 20,
-							borderBottom: `1px solid ${theme.palette.divider}`,
-						}}
+						className={cn([
+							"text-content-secondary p-5",
+							"border-0 border-b border-solid border-zinc-700",
+						])}
 					>
 						<HelpTooltipTitle>Build Options</HelpTooltipTitle>
 						<HelpTooltipText>
@@ -252,11 +246,11 @@ const Form: FC<FormProps> = ({
 					);
 				})}
 			</FormFields>
-			<div css={{ paddingTop: "24px", paddingBottom: "8px" }}>
+			<div className="pt-6 pb-2">
 				<Button
 					data-testid="build-parameters-submit"
 					type="submit"
-					css={{ width: "100%" }}
+					className="w-full"
 				>
 					Build workspace
 				</Button>
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
index f46589a0a67fb..7173b3d4933d0 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/WorkspaceActions.tsx
@@ -167,10 +167,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
 	};
 
 	return (
-		<div
-			css={{ display: "flex", alignItems: "center", gap: 8 }}
-			data-testid="workspace-actions"
-		>
+		<div className="flex items-center gap-2" data-testid="workspace-actions">
 			{/* Restarting must be handled separately, because it otherwise would appear as stopping */}
 			{isUpdating
 				? buttonMapping.updating
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
index e5d74cf3c422f..58343c772b519 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
@@ -14,45 +14,19 @@ export const WorkspaceBuildLogsSection: FC<WorkspaceBuildLogsSectionProps> = ({
 	const theme = useTheme();
 
 	return (
-		<div
-			css={{
-				borderRadius: 8,
-				border: `1px solid ${theme.palette.divider}`,
-				overflow: "hidden",
-				background: theme.palette.background.default,
-			}}
-		>
-			<header
-				css={{
-					background: theme.palette.background.paper,
-					borderBottom: `1px solid ${theme.palette.divider}`,
-					padding: "8px 8px 8px 24px",
-					fontSize: 13,
-					fontWeight: 600,
-					display: "flex",
-					alignItems: "center",
-					borderRadius: "8px 8px 0 0",
-				}}
-			>
+		<div className="rounded-lg border border-solid border-zinc-700 overflow-hidden bg-surface-secondary">
+			<header className="bg-surface-secondary border-0 border-b border-solid border-zinc-700 p-3 text-sm font-semibold flex items-center rounded-t-lg">
 				Build logs
 			</header>
-			<div css={{ height: "400px", overflowY: "auto" }}>
+			<div className="h-100 overflow-y-auto">
 				{logs ? (
 					<WorkspaceBuildLogs
 						sticky
 						logs={logs}
-						css={{ border: 0, borderRadius: 0 }}
+						className="border-0 rounded-none"
 					/>
 				) : (
-					<div
-						css={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							width: "100%",
-							height: "100%",
-						}}
-					>
+					<div className="flex items-center justify-center w-full h-full">
 						<Loader />
 					</div>
 				)}
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
index 32061f2a6590e..32833c780d26c 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
@@ -120,7 +120,7 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 		return null;
 	}
 	return (
-		<div css={styles.stack}>
+		<div className="px-2">
 			{variant === "task" && (
 				<div className="mb-1 text-center">
 					<div css={styles.label} data-chromatic="ignore">
@@ -174,10 +174,6 @@ const classNames = {
 };
 
 const styles = {
-	stack: {
-		paddingLeft: 2,
-		paddingRight: 2,
-	},
 	label: (theme) => ({
 		fontSize: 12,
 		display: "block",
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index 308a763716969..776d4b8ba929e 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -10,6 +10,7 @@ import {
 } from "components/Tooltip/Tooltip";
 import { type FC, type ReactNode, useState } from "react";
 import type { ThemeRole } from "theme/roles";
+import { cn } from "utils/cn";
 
 export type NotificationItem = {
 	title: string;
@@ -36,10 +37,7 @@ export const Notifications: FC<NotificationsProps> = ({
 		<TooltipProvider>
 			<Tooltip open={isOpen} onOpenChange={setIsOpen} delayDuration={0}>
 				<TooltipTrigger asChild>
-					<div
-						css={styles.pillContainer}
-						data-testid={`${severity}-notifications`}
-					>
+					<div className="py-2" data-testid={`${severity}-notifications`}>
 						<NotificationPill
 							items={items}
 							severity={severity}
@@ -94,10 +92,16 @@ interface NotificationItemProps {
 
 const NotificationItem: FC<NotificationItemProps> = ({ notification }) => {
 	return (
-		<article css={styles.notificationItem}>
-			<h4 css={{ margin: 0, fontWeight: 500 }}>{notification.title}</h4>
+		<article
+			className={cn([
+				"p-5 leading-normal border-0 border-t border-solid border-zinc-700 first:border-t-0",
+			])}
+		>
+			<h4 className="m-0 font-medium">{notification.title}</h4>
 			{notification.detail && (
-				<p css={styles.notificationDetail}>{notification.detail}</p>
+				<p className="m-0 text-content-secondary leading-6 block mt-2">
+					{notification.detail}
+				</p>
 			)}
 			<div className="mt-2 flex items-center gap-1">{notification.actions}</div>
 		</article>
@@ -107,26 +111,3 @@ const NotificationItem: FC<NotificationItemProps> = ({ notification }) => {
 export const NotificationActionButton: FC<ButtonProps> = (props) => {
 	return <Button variant="outline" size="sm" {...props} />;
 };
-
-const styles = {
-	// Adds some spacing from the Tooltip content
-	pillContainer: {
-		padding: "8px 0",
-	},
-	notificationItem: (theme) => ({
-		padding: 20,
-		lineHeight: "1.5",
-		borderTop: `1px solid ${theme.palette.divider}`,
-
-		"&:first-of-type": {
-			borderTop: 0,
-		},
-	}),
-	notificationDetail: (theme) => ({
-		margin: 0,
-		color: theme.palette.text.secondary,
-		lineHeight: 1.6,
-		display: "block",
-		marginTop: 8,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
index f0e91ad7b400d..dbff2e55fdc1c 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
@@ -213,7 +213,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 					This workspace build job is waiting for a provisioner to become
 					available. If you have been waiting for an extended period of time,
 					please contact your administrator for assistance.
-					<span css={{ display: "block", marginTop: 12 }}>
+					<span className="block mt-3">
 						Position in queue:{" "}
 						<strong>{workspace.latest_build.job.queue_position}</strong>
 					</span>
@@ -247,7 +247,7 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 	}
 
 	return (
-		<div css={styles.notificationsGroup}>
+		<div className="flex items-center gap-3">
 			{infoNotifications.length > 0 && (
 				<Notifications
 					items={infoNotifications}
@@ -267,14 +267,6 @@ export const WorkspaceNotifications: FC<WorkspaceNotificationsProps> = ({
 	);
 };
 
-const styles = {
-	notificationsGroup: {
-		display: "flex",
-		alignItems: "center",
-		gap: 12,
-	},
-} satisfies Record<string, Interpolation<Theme>>;
-
 export const findTroubleshootingURL = (
 	workspaceBuild: WorkspaceBuild,
 ): string | undefined => {
diff --git a/site/src/pages/WorkspacePage/WorkspacePage.tsx b/site/src/pages/WorkspacePage/WorkspacePage.tsx
index ae3e5a017f6d3..8efe08e970f2a 100644
--- a/site/src/pages/WorkspacePage/WorkspacePage.tsx
+++ b/site/src/pages/WorkspacePage/WorkspacePage.tsx
@@ -105,7 +105,7 @@ const WorkspacePage: FC = () => {
 
 	return pageError ? (
 		<Margins>
-			<ErrorAlert error={pageError} css={{ marginTop: 16, marginBottom: 16 }} />
+			<ErrorAlert error={pageError} className="my-4" />
 		</Margins>
 	) : isLoading ? (
 		<Loader />
diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index 1968f48a2f3fb..7f4115c0fbc0f 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import Link, { type LinkProps } from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
@@ -18,6 +17,7 @@ import { getWorkspaceActivityStatus } from "modules/workspaces/activity";
 import { type FC, forwardRef, type ReactNode, useRef, useState } from "react";
 import { useMutation, useQueryClient } from "react-query";
 import { Link as RouterLink } from "react-router";
+import { cn } from "utils/cn";
 import {
 	autostartDisplay,
 	autostopDisplay,
@@ -51,7 +51,9 @@ const WorkspaceScheduleContainer: FC<WorkspaceScheduleContainerProps> = ({
 						type="button"
 						data-testid="schedule-icon-button"
 						onClick={onClickIcon}
-						css={styles.scheduleIconButton}
+						className={
+							"flex items-center bg-transparent border-0 p-0 font-inherit cursor-pointer"
+						}
 					>
 						{icon}
 					</button>
@@ -80,7 +82,10 @@ export const WorkspaceScheduleControls: FC<WorkspaceScheduleControlsProps> = ({
 	}
 
 	return (
-		<div css={styles.scheduleValue} data-testid="schedule-controls">
+		<div
+			className="flex items-center gap-12 tabular-nums"
+			data-testid="schedule-controls"
+		>
 			{isWorkspaceOn(workspace) ? (
 				<AutostopDisplay
 					workspace={workspace}
@@ -187,24 +192,21 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 	const display = (
 		<ScheduleSettingsLink
 			data-testid="schedule-controls-autostop"
-			css={
-				danger &&
-				((theme) => ({
-					color: `${theme.roles.danger.fill.outline} !important`,
-				}))
-			}
+			className={cn([danger && "!text-content-destructive"])}
 		>
 			{message}
 		</ScheduleSettingsLink>
 	);
 
 	const controls = canUpdateSchedule && canEditDeadline(workspace) && (
-		<div css={styles.scheduleControls}>
+		<div className="flex items-center gap-4">
 			<Tooltip title="Subtract 1 hour from deadline">
 				<IconButton
 					disabled={!deadlineMinusEnabled}
 					size="small"
-					css={styles.scheduleButton}
+					className={
+						"border border-solid border-zinc-700 rounded-sm w-5 h-5 [&>svg]:size-icon-xs"
+					}
 					onClick={() => {
 						handleDeadlineChange(deadline.subtract(1, "h"));
 					}}
@@ -217,7 +219,9 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 				<IconButton
 					disabled={!deadlinePlusEnabled}
 					size="small"
-					css={styles.scheduleButton}
+					className={
+						"border border-solid border-zinc-700 rounded-sm w-5 h-5 [&>svg]:size-icon-xs"
+					}
 					onClick={() => {
 						handleDeadlineChange(deadline.add(1, "h"));
 					}}
@@ -253,12 +257,7 @@ const ScheduleSettingsLink = forwardRef<HTMLAnchorElement, LinkProps>(
 				ref={ref}
 				component={RouterLink}
 				to="settings/schedule"
-				css={{
-					color: "inherit",
-					"&:first-letter": {
-						textTransform: "uppercase",
-					},
-				}}
+				className="text-inherit [&:first-letter]:uppercase"
 				{...props}
 			/>
 		);
@@ -282,41 +281,3 @@ const shouldDisplayScheduleControls = (workspace: Workspace): boolean => {
 	const willAutoStart = !isWorkspaceOn(workspace) && hasAutoStart(workspace);
 	return willAutoStop || willAutoStart;
 };
-
-const styles = {
-	scheduleIconButton: {
-		display: "flex",
-		alignItems: "center",
-		background: "transparent",
-		border: 0,
-		padding: 0,
-		fontSize: "inherit",
-		lineHeight: "inherit",
-		cursor: "pointer",
-	},
-
-	scheduleValue: {
-		display: "flex",
-		alignItems: "center",
-		gap: 12,
-		fontVariantNumeric: "tabular-nums",
-	},
-
-	scheduleControls: {
-		display: "flex",
-		alignItems: "center",
-		gap: 4,
-	},
-
-	scheduleButton: (theme) => ({
-		border: `1px solid ${theme.palette.divider}`,
-		borderRadius: 4,
-		width: 20,
-		height: 20,
-
-		"& svg.MuiSvgIcon-root": {
-			width: 12,
-			height: 12,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index 59b7b9472e2b5..1b3649e423daa 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -1,4 +1,4 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { useTheme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import { workspaceQuota } from "api/queries/workspaceQuota";
 import type * as TypesGen from "api/typesGenerated";
@@ -111,7 +111,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 	);
 
 	return (
-		<Topbar css={{ gridArea: "topbar" }}>
+		<Topbar className="[grid-area:topbar]">
 			<Tooltip>
 				<TooltipTrigger asChild>
 					<TopbarIconButton component={RouterLink} to="/workspaces">
@@ -121,7 +121,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 				<TooltipContent side="bottom">Back to workspaces</TooltipContent>
 			</Tooltip>
 
-			<div css={styles.topbarLeft}>
+			<div className="flex items-center gap-x-6 gap-y-2 flex-wrap p-3 mr-auto">
 				<TopbarData>
 					<OwnerBreadcrumb
 						ownerName={workspace.owner_name}
@@ -158,7 +158,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 				{quota && quota.budget > 0 && (
 					<Link
 						component={RouterLink}
-						css={{ color: "inherit" }}
+						className="text-inherit"
 						to={
 							showOrganizations
 								? `/workspaces?filter=organization:${encodeURIComponent(workspace.organization_name)}`
@@ -180,9 +180,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 
 							<span>
 								{workspace.latest_build.daily_cost}{" "}
-								<span css={{ color: theme.palette.text.secondary }}>
-									credits of
-								</span>{" "}
+								<span className="text-content-secondary">credits of</span>{" "}
 								{quota.budget}
 							</span>
 						</TopbarData>
@@ -198,7 +196,7 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 							component={RouterLink}
 							to={`${templateLink}/settings/schedule`}
 							title="Schedule settings"
-							css={{ color: "inherit" }}
+							className="text-inherit"
 						>
 							{workspace.deleting_at ? (
 								<>
@@ -265,9 +263,9 @@ const OwnerBreadcrumb: FC<OwnerBreadcrumbProps> = ({
 	return (
 		<HelpTooltip>
 			<HelpTooltipTrigger asChild>
-				<span css={styles.breadcrumbSegment}>
+				<span className="flex items-center flex-row flex-nowrap gap-2 max-w-40 whitespace-nowrap cursor-default">
 					<Avatar size="sm" fallback={ownerName} src={ownerAvatarUrl} />
-					<span css={styles.breadcrumbText}>{ownerName}</span>
+					<span className="overflow-x-hidden text-ellipsis">{ownerName}</span>
 				</span>
 			</HelpTooltipTrigger>
 
@@ -292,14 +290,14 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 	return (
 		<HelpTooltip>
 			<HelpTooltipTrigger asChild>
-				<span css={styles.breadcrumbSegment}>
+				<span className="flex items-center flex-row flex-nowrap gap-2 max-w-40 whitespace-nowrap cursor-default">
 					<Avatar
 						size="sm"
 						variant="icon"
 						src={orgIconUrl}
 						fallback={orgName}
 					/>
-					<span css={styles.breadcrumbText}>{orgName}</span>
+					<span className="overflow-x-hidden text-ellipsis">{orgName}</span>
 				</span>
 			</HelpTooltipTrigger>
 
@@ -310,7 +308,7 @@ const OrganizationBreadcrumb: FC<OrganizationBreadcrumbProps> = ({
 							<Link
 								component={RouterLink}
 								to={orgPageUrl}
-								css={{ color: "inherit" }}
+								className="text-inherit"
 							>
 								{orgName}
 							</Link>
@@ -352,13 +350,13 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 		<div className="flex items-center">
 			<HelpTooltip>
 				<HelpTooltipTrigger asChild>
-					<span css={styles.breadcrumbSegment}>
+					<span className="flex items-center flex-row flex-nowrap gap-2 max-w-40 whitespace-nowrap cursor-default">
 						<TopbarAvatar
 							src={templateIconUrl}
 							fallback={templateDisplayName}
 						/>
 
-						<span css={[styles.breadcrumbText, { fontWeight: 500 }]}>
+						<span className="overflow-x-hidden text-ellipsis font-medium">
 							{workspaceName}
 						</span>
 					</span>
@@ -370,7 +368,7 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 							<Link
 								component={RouterLink}
 								to={rootTemplateUrl}
-								css={{ color: "inherit" }}
+								className="text-inherit"
 							>
 								{templateDisplayName}
 							</Link>
@@ -379,7 +377,7 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 							<Link
 								component={RouterLink}
 								to={`${rootTemplateUrl}/versions/${encodeURIComponent(templateVersionName)}`}
-								css={{ color: "inherit" }}
+								className="text-inherit"
 							>
 								Version: {latestBuildVersionName}
 							</Link>
@@ -399,31 +397,3 @@ const WorkspaceBreadcrumb: FC<WorkspaceBreadcrumbProps> = ({
 		</div>
 	);
 };
-
-const styles = {
-	topbarLeft: {
-		display: "flex",
-		alignItems: "center",
-		columnGap: 24,
-		rowGap: 8,
-		flexWrap: "wrap",
-		// 12px - It is needed to keep vertical spacing when the content is wrapped
-		padding: "12px",
-		marginRight: "auto",
-	},
-
-	breadcrumbSegment: {
-		display: "flex",
-		alignItems: "center",
-		flexFlow: "row nowrap",
-		gap: "8px",
-		maxWidth: "160px",
-		whiteSpace: "nowrap",
-		cursor: "default",
-	},
-
-	breadcrumbText: {
-		overflowX: "hidden",
-		textOverflow: "ellipsis",
-	},
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
index db67b52429fa1..0e4dc63a8501b 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPage.tsx
@@ -151,7 +151,7 @@ export const WorkspaceParametersPageView: FC<
 			</header>
 
 			{submitError && !isApiValidationError(submitError) ? (
-				<ErrorAlert error={submitError} css={{ marginBottom: 48 }} />
+				<ErrorAlert error={submitError} className="mb-12" />
 			) : null}
 
 			{templateVersionParameters && buildParameters ? (
@@ -185,10 +185,7 @@ export const WorkspaceParametersPageView: FC<
 								</a>
 							</Button>
 						}
-						css={(theme) => ({
-							border: `1px solid ${theme.palette.divider}`,
-							borderRadius: 8,
-						})}
+						className="border border-solid border-zinc-700 rounded-lg"
 					/>
 				)
 			) : (
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
index cdf1f5b0d9726..c6fdc4ed73c5d 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx
@@ -334,18 +334,11 @@ export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
 					</Stack>
 
 					<FormControl component="fieldset" error={Boolean(form.errors.monday)}>
-						<FormLabel css={{ fontSize: 12 }} component="legend">
+						<FormLabel className="text-xs" component="legend">
 							{Language.daysOfWeekLabel}
 						</FormLabel>
 
-						<FormGroup
-							css={{
-								display: "flex",
-								flexDirection: "row",
-								flexWrap: "wrap",
-								paddingTop: 4,
-							}}
-						>
+						<FormGroup className="flex flex-row flex-wrap pt-1">
 							{checkboxes.map((checkbox) => (
 								<FormControlLabel
 									control={
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
index 6e429f433b0f5..cf9dbed5e36df 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -79,7 +79,7 @@ const WorkspaceSchedulePage: FC = () => {
 		<>
 			<title>{pageTitle(workspaceName, "Schedule")}</title>
 
-			<PageHeader css={{ paddingTop: 0 }}>
+			<PageHeader className="pt-0">
 				<PageHeaderTitle>Workspace Schedule</PageHeaderTitle>
 			</PageHeader>
 
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
index 0b388e913ed07..5b5ede52d0529 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
@@ -17,6 +17,7 @@ import { Spinner } from "components/Spinner/Spinner";
 import { useFormik } from "formik";
 import upperFirst from "lodash/upperFirst";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 import {
 	getFormHelpers,
 	nameValidator,
@@ -75,7 +76,10 @@ export const WorkspaceSettingsForm: FC<WorkspaceSettingsFormProps> = ({
 						autoFocus
 						fullWidth
 						label="Name"
-						css={workspace.allow_renames && styles.nameWarning}
+						className={cn([
+							workspace.allow_renames &&
+								"[& .MuiFormHelperText-root]:text-warning-light",
+						])}
 						helperText={
 							workspace.allow_renames
 								? form.values.name !== form.initialValues.name &&
@@ -131,11 +135,3 @@ export const WorkspaceSettingsForm: FC<WorkspaceSettingsFormProps> = ({
 		</HorizontalForm>
 	);
 };
-
-const styles = {
-	nameWarning: (theme: Theme) => ({
-		"& .MuiFormHelperText-root": {
-			color: theme.palette.warning.light,
-		},
-	}),
-};
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
index 57bf6a07df80a..1bdbe27c5bae3 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
@@ -46,7 +46,7 @@ export const WorkspaceSettingsLayout: FC = () => {
 			<title>{pageTitle(workspaceName, "Settings")}</title>
 
 			<Margins>
-				<Stack css={{ padding: "48px 0" }} direction="row" spacing={10}>
+				<Stack className="px-12" direction="row" spacing={10}>
 					{isError ? (
 						<ErrorAlert error={error} />
 					) : (
@@ -54,7 +54,7 @@ export const WorkspaceSettingsLayout: FC = () => {
 							<WorkspaceSettings.Provider value={workspace}>
 								<Sidebar workspace={workspace} username={username} />
 								<Suspense fallback={<Loader />}>
-									<main css={{ width: "100%" }}>
+									<main className="w-full">
 										<Outlet />
 									</main>
 								</Suspense>
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx
index beedf9dffc48f..d080234bb4d38 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsPageView.tsx
@@ -18,11 +18,7 @@ export const WorkspaceSettingsPageView: FC<WorkspaceSettingsPageViewProps> = ({
 }) => {
 	return (
 		<>
-			<PageHeader
-				css={{
-					paddingTop: 0,
-				}}
-			>
+			<PageHeader className="pt-0">
 				<PageHeaderTitle>Workspace Settings</PageHeaderTitle>
 			</PageHeader>
 
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 38e5adc10c2e5..7bd121fb22b76 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -19,6 +19,7 @@ import {
 	Link as RouterLink,
 	type LinkProps as RouterLinkProps,
 } from "react-router";
+import { cn } from "utils/cn";
 
 type TemplatesQuery = UseQueryResult<Template[]>;
 
@@ -72,15 +73,7 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 					aria-label="Template select for workspace"
 				/>
 
-				<OverflowY
-					maxHeight={380}
-					css={{
-						display: "flex",
-						flexDirection: "column",
-						paddingTop: "8px",
-						paddingBottom: "8px",
-					}}
-				>
+				<OverflowY maxHeight={380} className="flex flex-col py-2">
 					{templatesFetchStatus === "pending" ? (
 						<Loader size="sm" />
 					) : (
@@ -94,20 +87,10 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
 					)}
 				</OverflowY>
 
-				<div
-					css={(theme) => ({
-						padding: "8px 0",
-						borderTop: `1px solid ${theme.palette.divider}`,
-					})}
-				>
+				<div className="py-2 border-0 border-t border-solid border-zinc-700">
 					<PopoverLink
 						to="/templates"
-						css={(theme) => ({
-							display: "flex",
-							alignItems: "center",
-							columnGap: 12,
-							color: theme.palette.primary.main,
-						})}
+						className="flex items-center gap-x-3 text-content-link"
 					>
 						<ExternalLinkIcon className="size-icon-xs" />
 						<span>See all templates</span>
@@ -131,11 +114,7 @@ const WorkspaceResultsRow: FC<WorkspaceResultsRowProps> = ({ template }) => {
 	return (
 		<PopoverLink
 			to={`${templateLink}/workspace`}
-			css={{
-				display: "flex",
-				gap: 12,
-				alignItems: "center",
-			}}
+			className="flex items-center gap-3"
 		>
 			<Avatar
 				variant="icon"
@@ -143,25 +122,11 @@ const WorkspaceResultsRow: FC<WorkspaceResultsRowProps> = ({ template }) => {
 				fallback={template.display_name || template.name}
 			/>
 
-			<div
-				css={(theme) => ({
-					color: theme.palette.text.primary,
-					display: "flex",
-					flexDirection: "column",
-					lineHeight: "140%",
-					fontSize: 14,
-					overflow: "hidden",
-				})}
-			>
-				<span css={{ whiteSpace: "nowrap", textOverflow: "ellipsis" }}>
+			<div className="text-content-primary flex flex-col text-sm leading-5 overflow-hidden">
+				<span className="whitespace-nowrap text-ellipsis">
 					{template.display_name || template.name || "[Unnamed]"}
 				</span>
-				<span
-					css={(theme) => ({
-						fontSize: 13,
-						color: theme.palette.text.secondary,
-					})}
-				>
+				<span className="text-content-secondary text-xs">
 					{/*
 					 * There are some templates that have -1 as their user count –
 					 * basically functioning like a null value in JS. Can safely just
@@ -176,24 +141,19 @@ const WorkspaceResultsRow: FC<WorkspaceResultsRowProps> = ({ template }) => {
 	);
 };
 
-const PopoverLink: FC<RouterLinkProps> = ({ children, ...linkProps }) => {
+const PopoverLink: FC<RouterLinkProps> = ({
+	children,
+	className,
+	...linkProps
+}) => {
 	return (
 		<RouterLink
 			{...linkProps}
-			css={(theme) => ({
-				color: theme.palette.text.primary,
-				padding: "8px 16px",
-				fontSize: 14,
-				outline: "none",
-				textDecoration: "none",
-				"&:focus": {
-					backgroundColor: theme.palette.action.focus,
-				},
-				"&:hover": {
-					textDecoration: "none",
-					backgroundColor: theme.palette.action.hover,
-				},
-			})}
+			className={cn(
+				className,
+				"text-sky-500 px-4 py-2 text-sm outline-none no-underline",
+				"focus:bg-surface-tertiary hover:no-underline hover:bg-zinc-800",
+			)}
 		>
 			{children}
 		</RouterLink>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index 06250c181789a..b442eadd45b29 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -201,18 +201,14 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 							limit={limit}
 							totalRecords={count}
 							currentOffsetStart={(page - 1) * limit + 1}
-							css={{ paddingBottom: "0" }}
+							className="pb-0"
 						/>
 					)
 				)}
 			</TableToolbar>
-
 			{pageNumberIsInvalid ? (
 				<EmptyState
-					css={(theme) => ({
-						border: `1px solid ${theme.palette.divider}`,
-						borderRadius: theme.shape.borderRadius,
-					})}
+					className="border border-solid border-zinc-700 rounded-md"
 					message="Page not found"
 					description="The page you are trying to access does not exist."
 					cta={
@@ -243,7 +239,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 				// Temporary styling stopgap before component is migrated to using
 				// PaginationContainer (which renders PaginationWidgetBase using CSS
 				// flexbox gaps)
-				<div css={{ paddingTop: "16px" }}>
+				<div className="pt-4">
 					<PaginationWidgetBase
 						totalRecords={count}
 						pageSize={limit}

From 564cfd3453b8a467b3c5429968f1480d7f402456 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 06:46:54 +0000
Subject: [PATCH 02/29] fix: resolve `<Alert />` issues

---
 site/src/components/Alert/Alert.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
index b0db11f0c8da5..65d826daf60de 100644
--- a/site/src/components/Alert/Alert.tsx
+++ b/site/src/components/Alert/Alert.tsx
@@ -11,6 +11,7 @@ import {
 	type ReactNode,
 	useState,
 } from "react";
+import { cn } from "utils/cn";
 export type AlertColor = MuiAlertColor;
 
 export type AlertProps = MuiAlertProps & {
@@ -40,7 +41,7 @@ export const Alert: FC<AlertProps> = ({
 		<Collapse in>
 			<MuiAlert
 				{...alertProps}
-				className="text-left"
+				className={cn("text-left", alertProps.className)}
 				severity={severity}
 				action={
 					<>
@@ -72,7 +73,10 @@ export const Alert: FC<AlertProps> = ({
 
 export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<span className={"text-sm text-content-secondary"} data-chromatic="ignore">
+		<span
+			className={"text-[13px] text-content-secondary"}
+			data-chromatic="ignore"
+		>
 			{children}
 		</span>
 	);

From e228572392a0c1ae413ff0397828aee9c2ea1860 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 06:58:04 +0000
Subject: [PATCH 03/29] fix: resolve `<Fieldset />`

---
 site/src/pages/DeploymentSettingsPage/Fieldset.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/Fieldset.tsx b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
index f9c5cf5c26325..9414ba081afa9 100644
--- a/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
+++ b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
@@ -25,13 +25,17 @@ export const Fieldset: FC<FieldsetProps> = ({
 
 	return (
 		<form
-			className="rounded-lg border border-solid border-zinc-700 overflow-hidden"
+			className="rounded-lg border border-solid border-zinc-700 overflow-hidden mt-8"
 			onSubmit={onSubmit}
 		>
 			<header className="p-6">
-				<div className="text-xl font-semibold m-0">{title}</div>
+				<div className="text-xl font-semibold m-0 leading-[inherit]">
+					{title}
+				</div>
 				{subtitle && (
-					<div className="text-sm text-content-secondary mt-2">{subtitle}</div>
+					<div className="text-sm text-content-secondary mt-2 leading-[inherit]">
+						{subtitle}
+					</div>
 				)}
 				<div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
 					{children}

From dff4c4f3a373dee603e8ee771aad2f52ce074d7f Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 07:02:45 +0000
Subject: [PATCH 04/29] chore: resolve `<WorkspaceBuildProgress />`

---
 site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
index 32833c780d26c..529c739847613 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
@@ -120,7 +120,7 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 		return null;
 	}
 	return (
-		<div className="px-2">
+		<div className="px-0.5">
 			{variant === "task" && (
 				<div className="mb-1 text-center">
 					<div css={styles.label} data-chromatic="ignore">

From 22c50b0352cc49157277991be249d14c5bd52eac Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 07:09:32 +0000
Subject: [PATCH 05/29] fix: resolve colors on `schedule-controls-autostop`

---
 site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index 7f4115c0fbc0f..871b252603bae 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -192,14 +192,14 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 	const display = (
 		<ScheduleSettingsLink
 			data-testid="schedule-controls-autostop"
-			className={cn([danger && "!text-content-destructive"])}
+			className={cn(["text-inherit", danger && "!text-content-destructive"])}
 		>
 			{message}
 		</ScheduleSettingsLink>
 	);
 
 	const controls = canUpdateSchedule && canEditDeadline(workspace) && (
-		<div className="flex items-center gap-4">
+		<div className="flex items-center gap-1">
 			<Tooltip title="Subtract 1 hour from deadline">
 				<IconButton
 					disabled={!deadlineMinusEnabled}

From e43653c9dd6ceb2c8309ea121eb1af8450aecb5c Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 07:44:00 +0000
Subject: [PATCH 06/29] fix: resolve unused variables

---
 site/src/pages/WorkspacePage/ResourcesSidebar.tsx             | 4 +---
 .../WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx | 4 ----
 site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx    | 3 ---
 .../WorkspacePage/WorkspaceNotifications/Notifications.tsx    | 2 +-
 .../WorkspaceNotifications/WorkspaceNotifications.tsx         | 1 -
 site/src/pages/WorkspacePage/WorkspaceTopbar.tsx              | 2 --
 .../src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx | 1 -
 7 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
index 3d85a6bea19e4..7cfb91f35f2a9 100644
--- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
@@ -1,4 +1,4 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import type { Interpolation, Theme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
 import type { WorkspaceResource } from "api/typesGenerated";
 import {
@@ -22,8 +22,6 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 	isSelected,
 	resources,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<Sidebar>
 			<SidebarCaption>Resources</SidebarCaption>
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
index 44a6ae38c1d7b..d13d182db1b68 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
@@ -1,5 +1,3 @@
-import { useTheme } from "@emotion/react";
-import visuallyHidden from "@mui/utils/visuallyHidden";
 import { richParameters } from "api/queries/templates";
 import { workspaceBuildParameters } from "api/queries/workspaceBuilds";
 import type {
@@ -104,8 +102,6 @@ const BuildParametersPopoverContent: FC<BuildParametersPopoverContentProps> = ({
 	onSubmit,
 	setIsOpen,
 }) => {
-	const theme = useTheme();
-
 	if (
 		!workspace.template_use_classic_parameter_flow &&
 		ephemeralParameters &&
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
index 58343c772b519..7df420d9b011a 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import type { ProvisionerJobLog } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
 import { WorkspaceBuildLogs } from "modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs";
@@ -11,8 +10,6 @@ interface WorkspaceBuildLogsSectionProps {
 export const WorkspaceBuildLogsSection: FC<WorkspaceBuildLogsSectionProps> = ({
 	logs,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<div className="rounded-lg border border-solid border-zinc-700 overflow-hidden bg-surface-secondary">
 			<header className="bg-surface-secondary border-0 border-b border-solid border-zinc-700 p-3 text-sm font-semibold flex items-center rounded-t-lg">
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index 776d4b8ba929e..515e498480a3e 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -1,4 +1,4 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
+import { useTheme } from "@emotion/react";
 import type { AlertProps } from "components/Alert/Alert";
 import { Button, type ButtonProps } from "components/Button/Button";
 import { Pill } from "components/Pill/Pill";
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
index dbff2e55fdc1c..630c3b5078046 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { workspaceResolveAutostart } from "api/queries/workspaceQuota";
 import type {
 	Template,
diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
index 1b3649e423daa..f16083e071689 100644
--- a/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import { workspaceQuota } from "api/queries/workspaceQuota";
 import type * as TypesGen from "api/typesGenerated";
@@ -73,7 +72,6 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 }) => {
 	const { entitlements, organizations, showOrganizations } = useDashboard();
 	const getLink = useLinks();
-	const theme = useTheme();
 
 	// Quota
 	const hasDailyCost = workspace.latest_build.daily_cost > 0;
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
index 5b5ede52d0529..1654836a531a5 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsForm.tsx
@@ -1,4 +1,3 @@
-import type { Theme } from "@emotion/react";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
 import {

From 84fb26de6884880494cbe215bdca11dfad2840d2 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 13:26:53 +0000
Subject: [PATCH 07/29] feat: "v2" of changes (WIP)

---
 site/src/components/Avatar/AvatarCard.tsx     |  12 +-
 site/src/components/Badges/Badges.stories.tsx |  12 ++
 site/src/components/Badges/Badges.tsx         | 161 ++++++------------
 .../components/CodeExample/CodeExample.tsx    |  50 ++----
 .../Dialogs/DeleteDialog/DeleteDialog.tsx     |  17 +-
 .../DropdownArrow/DropdownArrow.tsx           |  16 +-
 site/src/components/Filter/Filter.tsx         |  16 +-
 site/src/components/Filter/SelectFilter.tsx   |   6 +-
 site/src/components/Form/Form.tsx             |   4 +-
 site/src/components/FullPageLayout/Topbar.tsx |  22 +--
 .../GlobalSnackbar/GlobalSnackbar.tsx         |   4 +-
 .../components/HelpTooltip/HelpTooltip.tsx    |  10 +-
 site/src/components/IconField/IconField.tsx   |  30 ++--
 site/src/components/Logs/Logs.tsx             |   2 +-
 site/src/components/Margins/Margins.tsx       |   4 +-
 site/src/components/Markdown/Markdown.tsx     |   8 +-
 site/src/components/Menu/MenuSearch.tsx       |   3 +-
 .../OverflowY/OverflowY.stories.tsx           |   5 +-
 site/src/components/OverflowY/OverflowY.tsx   |   4 +-
 .../PageHeader/FullWidthPageHeader.tsx        |  33 +---
 site/src/components/PageHeader/PageHeader.tsx |  28 +--
 site/src/modules/apps/AppStatusStateIcon.tsx  |   3 +-
 .../LicenseBanner/LicenseBannerView.tsx       | 103 ++++++-----
 .../OrganizationSettingsPageView.tsx          |   4 +-
 .../TemplateSchedulePage/ScheduleDialog.tsx   |   4 +-
 .../TemplateVersionEditor.tsx                 | 111 ++----------
 .../SSHKeysPage/SSHKeysPageView.tsx           |  23 +--
 .../SecurityPage/SingleSignOnSection.tsx      |  17 +-
 .../WorkspaceProxyPage/WorkspaceProxyRow.tsx  |  26 +--
 .../UsersPage/UsersTable/UserGroupsCell.tsx   |  22 +--
 .../UsersPage/UsersTable/UsersTableBody.tsx   |   2 +-
 .../pages/WorkspacePage/ResourceMetadata.tsx  |  50 ++----
 32 files changed, 230 insertions(+), 582 deletions(-)

diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx
index 187c9ffa50cdd..3b1a4f57c091f 100644
--- a/site/src/components/Avatar/AvatarCard.tsx
+++ b/site/src/components/Avatar/AvatarCard.tsx
@@ -39,16 +39,8 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 				<h3
 					// Lets users hover over truncated text to see whole thing
 					title={header}
-					css={[
-						theme.typography.body1 as CSSObject,
-						{
-							lineHeight: 1.4,
-							margin: 0,
-							overflow: "hidden",
-							whiteSpace: "nowrap",
-							textOverflow: "ellipsis",
-						},
-					]}
+					css={[theme.typography.body1 as CSSObject]}
+					className="leading-[1.4] m-0 overflow-hidden whitespace-nowrap text-ellipsis"
 				>
 					{header}
 				</h3>
diff --git a/site/src/components/Badges/Badges.stories.tsx b/site/src/components/Badges/Badges.stories.tsx
index 36c8fddb37ea9..2deca004660a1 100644
--- a/site/src/components/Badges/Badges.stories.tsx
+++ b/site/src/components/Badges/Badges.stories.tsx
@@ -2,8 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	AlphaBadge,
 	Badges,
+	DeprecatedBadge,
 	DisabledBadge,
 	EnabledBadge,
+	EnterpriseBadge,
 	EntitledBadge,
 	HealthyBadge,
 	NotHealthyBadge,
@@ -50,6 +52,11 @@ export const Disabled: Story = {
 		children: <DisabledBadge />,
 	},
 };
+export const Enterprise: Story = {
+	args: {
+		children: <EnterpriseBadge />,
+	},
+};
 export const Premium: Story = {
 	args: {
 		children: <PremiumBadge />,
@@ -65,3 +72,8 @@ export const Alpha: Story = {
 		children: <AlphaBadge />,
 	},
 };
+export const Deprecated: Story = {
+	args: {
+		children: <DeprecatedBadge />,
+	},
+};
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index cef5288091373..f18a7134d00cc 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -1,5 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
-import { Stack } from "components/Stack/Stack";
 import {
 	Tooltip,
 	TooltipContent,
@@ -11,49 +9,44 @@ import {
 	type HTMLAttributes,
 	type PropsWithChildren,
 } from "react";
+import { cn } from "utils/cn";
 
-const styles = {
-	badge: {
-		fontSize: 10,
-		height: 24,
-		fontWeight: 600,
-		textTransform: "uppercase",
-		letterSpacing: "0.085em",
-		padding: "0 12px",
-		borderRadius: 9999,
-		display: "flex",
-		alignItems: "center",
-		width: "fit-content",
-		whiteSpace: "nowrap",
-	},
-
-	enabledBadge: (theme) => ({
-		border: `1px solid ${theme.roles.success.outline}`,
-		backgroundColor: theme.roles.success.background,
-		color: theme.roles.success.text,
-	}),
-	errorBadge: (theme) => ({
-		border: `1px solid ${theme.roles.error.outline}`,
-		backgroundColor: theme.roles.error.background,
-		color: theme.roles.error.text,
-	}),
-	warnBadge: (theme) => ({
-		border: `1px solid ${theme.roles.warning.outline}`,
-		backgroundColor: theme.roles.warning.background,
-		color: theme.roles.warning.text,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const badgeClasses = {
+	root: [
+		"text-[10px] h-6 font-semibold uppercase tracking-[0.085em]",
+		"px-3 rounded-full flex items-center w-fit whitespace-nowrap",
+		"border border-solid",
+	],
+	enabled: ["border-green-500 bg-green-950 text-green-50"],
+	error: ["border-red-600 bg-red-950 text-red-50"],
+	warn: ["border-amber-300 bg-amber-950 text-amber-50"],
+	enterprise: ["border-blue-400 bg-blue-950 text-blue-50"],
+	disabled: ["border-zinc-700 bg-zinc-900 text-white"],
+	premium: ["border-violet-400 bg-violet-950 text-violet-50"],
+	preview: ["border-violet-500 bg-violet-950 text-violet-50"],
+	deprecated: ["border-orange-500 bg-orange-950 text-orange-50"],
+} as const;
 
 export const EnabledBadge: FC = () => {
 	return (
-		<span css={[styles.badge, styles.enabledBadge]} className="option-enabled">
+		<span
+			className={cn([
+				"option-enabled",
+				badgeClasses.root,
+				badgeClasses.enabled,
+			])}
+		>
 			Enabled
 		</span>
 	);
 };
 
 export const EntitledBadge: FC = () => {
-	return <span css={[styles.badge, styles.enabledBadge]}>Entitled</span>;
+	return (
+		<span className={cn(badgeClasses.root, badgeClasses.enabled)}>
+			Entitled
+		</span>
+	);
 };
 
 interface HealthyBadge {
@@ -61,21 +54,25 @@ interface HealthyBadge {
 }
 export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
 	return (
-		<span css={[styles.badge, styles.enabledBadge]}>
+		<span className={cn(badgeClasses.root, badgeClasses.enabled)}>
 			{derpOnly ? "Healthy (DERP only)" : "Healthy"}
 		</span>
 	);
 };
 
 export const NotHealthyBadge: FC = () => {
-	return <span css={[styles.badge, styles.errorBadge]}>Unhealthy</span>;
+	return (
+		<span className={cn(badgeClasses.root, badgeClasses.error)}>Unhealthy</span>
+	);
 };
 
 export const NotRegisteredBadge: FC = () => {
 	return (
 		<Tooltip>
 			<TooltipTrigger asChild>
-				<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
+				<span className={cn(badgeClasses.root, badgeClasses.warn)}>
+					Never seen
+				</span>
 			</TooltipTrigger>
 			<TooltipContent side="bottom" className="max-w-xs">
 				Workspace Proxy has never come online and needs to be started.
@@ -88,7 +85,9 @@ export const NotReachableBadge: FC = () => {
 	return (
 		<Tooltip>
 			<TooltipTrigger asChild>
-				<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
+				<span className={cn(badgeClasses.root, badgeClasses.warn)}>
+					Not reachable
+				</span>
 			</TooltipTrigger>
 			<TooltipContent side="bottom" className="max-w-xs">
 				Workspace Proxy not responding to http(s) requests.
@@ -105,15 +104,11 @@ export const DisabledBadge: FC = forwardRef<
 		<span
 			{...props}
 			ref={ref}
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.experimental.l1.outline}`,
-					backgroundColor: theme.experimental.l1.background,
-					color: theme.experimental.l1.text,
-				}),
-			]}
-			className="option-disabled"
+			className={cn([
+				"option-disabled",
+				badgeClasses.root,
+				badgeClasses.disabled,
+			])}
 		>
 			Disabled
 		</span>
@@ -122,16 +117,7 @@ export const DisabledBadge: FC = forwardRef<
 
 export const EnterpriseBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					backgroundColor: theme.branding.enterprise.background,
-					border: `1px solid ${theme.branding.enterprise.border}`,
-					color: theme.branding.enterprise.text,
-				}),
-			]}
-		>
+		<span className={cn(badgeClasses.root, badgeClasses.enterprise)}>
 			Enterprise
 		</span>
 	);
@@ -139,67 +125,25 @@ export const EnterpriseBadge: FC = () => {
 
 export const PremiumBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					backgroundColor: theme.branding.premium.background,
-					border: `1px solid ${theme.branding.premium.border}`,
-					color: theme.branding.premium.text,
-				}),
-			]}
-		>
-			Premium
-		</span>
+		<span className={cn(badgeClasses.root, badgeClasses.premium)}>Premium</span>
 	);
 };
 
 export const PreviewBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.roles.preview.outline}`,
-					backgroundColor: theme.roles.preview.background,
-					color: theme.roles.preview.text,
-				}),
-			]}
-		>
-			Preview
-		</span>
+		<span className={cn(badgeClasses.root, badgeClasses.preview)}>Preview</span>
 	);
 };
 
 export const AlphaBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.roles.preview.outline}`,
-					backgroundColor: theme.roles.preview.background,
-					color: theme.roles.preview.text,
-				}),
-			]}
-		>
-			Alpha
-		</span>
+		<span className={cn(badgeClasses.root, badgeClasses.preview)}>Alpha</span>
 	);
 };
 
 export const DeprecatedBadge: FC = () => {
 	return (
-		<span
-			css={[
-				styles.badge,
-				(theme) => ({
-					border: `1px solid ${theme.roles.danger.outline}`,
-					backgroundColor: theme.roles.danger.background,
-					color: theme.roles.danger.text,
-				}),
-			]}
-		>
+		<span className={cn(badgeClasses.root, badgeClasses.deprecated)}>
 			Deprecated
 		</span>
 	);
@@ -207,13 +151,6 @@ export const DeprecatedBadge: FC = () => {
 
 export const Badges: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<Stack
-			css={{ margin: "0 0 16px" }}
-			direction="row"
-			alignItems="center"
-			spacing={1}
-		>
-			{children}
-		</Stack>
+		<div className="flex flex-row items-center gap-2 mb-4">{children}</div>
 	);
 };
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index 42759889fd1eb..c349884d7775a 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { Button } from "components/Button/Button";
 import {
 	Tooltip,
@@ -7,7 +6,7 @@ import {
 } from "components/Tooltip/Tooltip";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type FC, useState } from "react";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { cn } from "utils/cn";
 import { CopyButton } from "../CopyButton/CopyButton";
 
 interface CodeExampleProps {
@@ -52,8 +51,21 @@ export const CodeExample: FC<CodeExampleProps> = ({
 	);
 
 	return (
-		<div css={styles.container} className={className}>
-			<code css={[styles.code, secret && styles.secret]}>
+		<div
+			className={cn(
+				"cursor-pointer flex flex-row items-center text-sm font-mono rounded-lg p-2",
+				"leading-normal text-content-primary border border-solid",
+				"border-gray-300 hover:bg-gray-200",
+				"dark:bg-zinc-800 dark:border-zinc-700 dark:hover:bg-zinc-800",
+				className,
+			)}
+		>
+			<code
+				className={cn(
+					"px-2 flex-grow break-all",
+					secret && "[text-security:disc] [-webkit-text-security:disc]",
+				)}
+			>
 				{secret ? (
 					<>
 						{/*
@@ -99,33 +111,3 @@ export const CodeExample: FC<CodeExampleProps> = ({
 function obfuscateText(text: string): string {
 	return new Array(text.length).fill("*").join("");
 }
-
-const styles = {
-	container: (theme) => ({
-		cursor: "pointer",
-		display: "flex",
-		flexDirection: "row",
-		alignItems: "center",
-		color: theme.experimental.l1.text,
-		fontFamily: MONOSPACE_FONT_FAMILY,
-		fontSize: 14,
-		borderRadius: 8,
-		padding: 8,
-		lineHeight: "150%",
-		border: `1px solid ${theme.experimental.l1.outline}`,
-
-		"&:hover": {
-			backgroundColor: theme.experimental.l2.hover.background,
-		},
-	}),
-
-	code: {
-		padding: "0 8px",
-		flexGrow: 1,
-		wordBreak: "break-all",
-	},
-
-	secret: {
-		"-webkit-text-security": "disc", // also supported by firefox
-	},
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
index 851dd5534c836..cdc4b63949e63 100644
--- a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
+++ b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import TextField from "@mui/material/TextField";
 import { type FC, type FormEvent, useId, useState } from "react";
 import { Stack } from "../../Stack/Stack";
@@ -67,7 +66,11 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({
 							{verb ?? "Deleting"} this {entity} is irreversible!
 						</p>
 
-						{Boolean(info) && <div css={styles.callout}>{info}</div>}
+						{Boolean(info) && (
+							<div className="border border-solid border-orange-500 bg-orange-950 text-orange-50 rounded-lg py-2 px-4">
+								{info}
+							</div>
+						)}
 
 						<p>
 							Type <strong>{name}</strong> below to confirm.
@@ -105,13 +108,3 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({
 		/>
 	);
 };
-
-const styles = {
-	callout: (theme) => ({
-		backgroundColor: theme.roles.danger.background,
-		border: `1px solid ${theme.roles.danger.outline}`,
-		borderRadius: theme.shape.borderRadius,
-		color: theme.roles.danger.text,
-		padding: "8px 16px",
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
index a791f2e26e1cc..abf230b5f8a90 100644
--- a/site/src/components/DropdownArrow/DropdownArrow.tsx
+++ b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -1,6 +1,6 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 
 interface ArrowProps {
 	margin?: boolean;
@@ -18,20 +18,8 @@ export const DropdownArrow: FC<ArrowProps> = ({
 	return (
 		<Arrow
 			aria-label={close ? "close-dropdown" : "open-dropdown"}
-			css={[styles.base, margin && styles.withMargin]}
+			className={cn("size-4 text-current", margin && "ml-2")}
 			style={{ color }}
 		/>
 	);
 };
-
-const styles = {
-	base: {
-		color: "currentcolor",
-		width: 16,
-		height: 16,
-	},
-
-	withMargin: {
-		marginLeft: 8,
-	},
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
index 1ee162acccf99..18ddaf2b8c395 100644
--- a/site/src/components/Filter/Filter.tsx
+++ b/site/src/components/Filter/Filter.tsx
@@ -15,6 +15,7 @@ import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
 import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
 import { type FC, type ReactNode, useEffect, useRef, useState } from "react";
+import { cn } from "utils/cn";
 
 type PresetFilter = {
 	name: string;
@@ -133,8 +134,8 @@ const BaseSkeleton: FC<SkeletonProps> = ({ children, ...skeletonProps }) => {
 			{...skeletonProps}
 			css={(theme) => ({
 				backgroundColor: theme.palette.background.paper,
-				borderRadius: "6px",
 			})}
+			className={cn("rounded-md", skeletonProps.className)}
 		>
 			{children}
 		</Skeleton>
@@ -142,7 +143,7 @@ const BaseSkeleton: FC<SkeletonProps> = ({ children, ...skeletonProps }) => {
 };
 
 export const MenuSkeleton: FC = () => {
-	return <BaseSkeleton css={{ minWidth: 200, flexShrink: 0 }} />;
+	return <BaseSkeleton className="min-w-50 flex-shrink-0" />;
 };
 
 type FilterProps = {
@@ -201,12 +202,9 @@ export const Filter: FC<FilterProps> = ({
 
 	return (
 		<div
+			className="flex gap-2 mb-4"
 			css={{
-				display: "flex",
-				gap: 8,
-				marginBottom: 16,
 				flexWrap: "wrap",
-
 				[theme.breakpoints.up(singleRowBreakpoint)]: {
 					flexWrap: "nowrap",
 				},
@@ -219,7 +217,7 @@ export const Filter: FC<FilterProps> = ({
 				</>
 			) : (
 				<>
-					<InputGroup css={{ width: "100%" }}>
+					<InputGroup className="w-full">
 						<PresetMenu
 							onSelect={(query) => filter.update(query)}
 							presets={presets}
@@ -228,7 +226,7 @@ export const Filter: FC<FilterProps> = ({
 							learnMoreLink2={learnMoreLink2}
 						/>
 						<SearchField
-							css={{ flex: 1 }}
+							className="flex-1"
 							error={shouldDisplayError}
 							helperText={
 								shouldDisplayError
@@ -306,7 +304,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 			>
 				{presets.map((presetFilter) => (
 					<MenuItem
-						css={{ fontSize: 14 }}
+						className="text-sm leading-none"
 						key={presetFilter.name}
 						onClick={() => {
 							onSelect(presetFilter.query);
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index 786698e230b7a..4f13c8684ad96 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -97,13 +97,9 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 					) : (
 						<div
 							css={(theme) => ({
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								padding: 32,
 								color: theme.palette.text.secondary,
-								lineHeight: 1,
 							})}
+							className="flex items-center justify-center p-8 leading-none"
 						>
 							{emptyText || "No options found"}
 						</div>
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index d535a63642324..08c0b3fffc2db 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -29,11 +29,9 @@ export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
 		<FormContext.Provider value={{ direction }}>
 			<form
 				{...formProps}
+				className="flex flex-col"
 				css={{
-					display: "flex",
-					flexDirection: "column",
 					gap: direction === "horizontal" ? 80 : 40,
-
 					[theme.breakpoints.down("md")]: {
 						gap: 64,
 					},
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index ac972b7af04f1..10efade7e0871 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -20,13 +20,11 @@ export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
 		<header
 			{...props}
 			css={{
-				minHeight: 48,
 				borderBottom: `1px solid ${theme.palette.divider}`,
-				display: "flex",
-				alignItems: "center",
 				fontSize: 13,
 				lineHeight: "1.2",
 			}}
+			className="min-h-12 flex items-center"
 		/>
 	);
 };
@@ -39,15 +37,11 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 				{...props}
 				size="small"
 				css={{
-					padding: 0,
-					borderRadius: 0,
-					height: 48,
-					width: 48,
-
 					"& svg": {
 						fontSize: 20,
 					},
 				}}
+				className="p-0 rounded-none size-12"
 			/>
 		);
 	},
@@ -60,17 +54,7 @@ export const TopbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 export const TopbarData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-	return (
-		<div
-			{...props}
-			css={{
-				display: "flex",
-				gap: 8,
-				alignItems: "center",
-				justifyContent: "center",
-			}}
-		/>
-	);
+	return <div {...props} className="flex gap-2 items-center justify-center" />;
 };
 
 export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
index 081bdf7f3a826..9eed091766c6a 100644
--- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
+++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -46,7 +46,7 @@ export const GlobalSnackbar: FC = () => {
 			}
 			anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
 			message={
-				<div css={{ display: "flex" }}>
+				<div className="flex">
 					{notificationMsg.msgType === MsgType.Error && (
 						<ErrorIcon css={styles.errorIcon} />
 					)}
@@ -85,7 +85,7 @@ const AdditionalMessageDisplay: FC<AdditionalMessageDisplayProps> = ({
 
 	if (isNotificationList(message)) {
 		return (
-			<ul css={{ paddingLeft: 0 }}>
+			<ul className="pl-0">
 				{message.map((item, idx) => (
 					<li key={idx}>
 						<span css={styles.messageSubtitle}>{item}</span>
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 7b73aec7067e4..51f87cd73c8a3 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -84,15 +84,6 @@ export const HelpTooltipIconTrigger = forwardRef<
 				ref={ref}
 				css={[
 					css`
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						padding: 4px 0;
-						border: 0;
-						background: transparent;
-						cursor: pointer;
-						color: inherit;
-
 						& svg {
 							width: ${getIconSpacingFromSize(size)}px;
 							height: ${getIconSpacingFromSize(size)}px;
@@ -100,6 +91,7 @@ export const HelpTooltipIconTrigger = forwardRef<
 					`,
 					hoverEffect ? hoverEffectStyles : null,
 				]}
+				className="flex items-center justify-center py-1 border-none bg-transparent cursor-pointer text-inherit"
 			>
 				{children}
 			</button>
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index 4c6156899b1f1..30d013b2fc0a7 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -48,18 +48,7 @@ export const IconField: FC<IconFieldProps> = ({
 					endAdornment: hasIcon ? (
 						<InputAdornment
 							position="end"
-							css={{
-								width: 24,
-								height: 24,
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-
-								"& img": {
-									maxWidth: "100%",
-									objectFit: "contain",
-								},
-							}}
+							className="size-6 flex items-center justify-center [& img]:max-w-full [& img]:object-contain"
 						>
 							<ExternalImage
 								alt=""
@@ -108,15 +97,16 @@ export const IconField: FC<IconFieldProps> = ({
 			</Popover>
 
 			{/*
-      - This component takes a long time to load (easily several seconds), so we
-      don't want to wait until the user actually clicks the button to start loading.
-      Unfortunately, React doesn't provide an API to start warming a lazy component,
-      so we just have to sneak it into the DOM, which is kind of annoying, but means
-      that users shouldn't ever spend time waiting for it to load.
-      - Except we don't do it when running tests, because Jest doesn't define
-      `IntersectionObserver`, and it would make them slower anyway. */}
+				- This component takes a long time to load (easily several seconds), so we
+				don't want to wait until the user actually clicks the button to start loading.
+				Unfortunately, React doesn't provide an API to start warming a lazy component,
+				so we just have to sneak it into the DOM, which is kind of annoying, but means
+				that users shouldn't ever spend time waiting for it to load.
+				- Except we don't do it when running tests, because Jest doesn't define
+				`IntersectionObserver`, and it would make them slower anyway.
+			*/}
 			{process.env.NODE_ENV !== "test" && (
-				<div css={{ ...visuallyHidden }}>
+				<div className="sr-only">
 					<Suspense>
 						<EmojiPicker onEmojiSelect={() => {}} />
 					</Suspense>
diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx
index 75a7acc961913..cf40855b34b15 100644
--- a/site/src/components/Logs/Logs.tsx
+++ b/site/src/components/Logs/Logs.tsx
@@ -18,7 +18,7 @@ export const Logs: FC<LogsProps> = ({
 }) => {
 	return (
 		<div css={styles.root} className={`${className} logs-container`}>
-			<div css={{ minWidth: "fit-content" }}>
+			<div className="min-w-fit">
 				{lines.map((line) => (
 					<LogLine key={line.id} level={line.level}>
 						{!hideTimestamps && (
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
index cd7a9db9e4b62..2e2ed8242a5eb 100644
--- a/site/src/components/Margins/Margins.tsx
+++ b/site/src/components/Margins/Margins.tsx
@@ -27,13 +27,11 @@ export const Margins: FC<MarginsProps> = ({
 		<div
 			{...divProps}
 			css={{
-				marginLeft: "auto",
-				marginRight: "auto",
 				maxWidth: maxWidth,
 				paddingLeft: sidePadding,
 				paddingRight: sidePadding,
-				width: "100%",
 			}}
+			className="ml-auto mr-auto w-full"
 		>
 			{children}
 		</div>
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index d131861e35aa5..f0ee50432dbde 100644
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@@ -85,12 +85,10 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 					) : (
 						<code
 							css={(theme) => ({
-								padding: "1px 4px",
 								background: theme.palette.divider,
-								borderRadius: 4,
 								color: theme.palette.text.primary,
-								fontSize: 14,
 							})}
+							className="py-[1px] px-1 rounded-sm text-sm leading-none"
 							{...props}
 						>
 							{children}
@@ -206,12 +204,10 @@ export const InlineMarkdown: FC<InlineMarkdownProps> = (props) => {
 				code: ({ node, className, children, style, ...props }) => (
 					<code
 						css={(theme) => ({
-							padding: "1px 4px",
 							background: theme.palette.divider,
-							borderRadius: 4,
 							color: theme.palette.text.primary,
-							fontSize: 14,
 						})}
+						className="py-[1px] px-1 rounded-sm text-sm leading-none"
 						{...props}
 					>
 						{children}
diff --git a/site/src/components/Menu/MenuSearch.tsx b/site/src/components/Menu/MenuSearch.tsx
index c7e6607d9d0a7..99c7720544560 100644
--- a/site/src/components/Menu/MenuSearch.tsx
+++ b/site/src/components/Menu/MenuSearch.tsx
@@ -9,13 +9,12 @@ export const MenuSearch: FC<SearchFieldProps> = (props) => {
 			fullWidth
 			css={(theme) => ({
 				"& fieldset": {
-					border: 0,
-					borderRadius: 0,
 					// MUI has so many nested selectors that it's easier to just
 					// override the border directly using the `!important` hack
 					borderBottom: `1px solid ${theme.palette.divider} !important`,
 				},
 			})}
+			className={"[& fieldset]:border-0 [& fieldset]:rounded-none"}
 			{...props}
 		/>
 	);
diff --git a/site/src/components/OverflowY/OverflowY.stories.tsx b/site/src/components/OverflowY/OverflowY.stories.tsx
index 65a76755ef3a2..d1e3e61f48dd7 100644
--- a/site/src/components/OverflowY/OverflowY.stories.tsx
+++ b/site/src/components/OverflowY/OverflowY.stories.tsx
@@ -15,12 +15,9 @@ const meta: Meta<typeof OverflowY> = {
 			<p
 				key={num}
 				css={{
-					height: "50px",
-					padding: 0,
-					margin: 0,
-					color: "black",
 					backgroundColor: i % 2 === 0 ? "white" : "gray",
 				}}
+				className="h-12.5 p-0 m-0 text-black"
 			>
 				Element {num}
 			</p>
diff --git a/site/src/components/OverflowY/OverflowY.tsx b/site/src/components/OverflowY/OverflowY.tsx
index 46c553f8a37f1..3513283ae84bb 100644
--- a/site/src/components/OverflowY/OverflowY.tsx
+++ b/site/src/components/OverflowY/OverflowY.tsx
@@ -28,12 +28,10 @@ export const OverflowY: FC<OverflowYProps> = ({
 	return (
 		<div
 			css={{
-				width: "100%",
 				height: computedHeight,
 				maxHeight: computedMaxHeight,
-				overflowY: "auto",
-				flexShrink: 1,
 			}}
+			className="w-full overflow-y-auto flex-shrink-1"
 			{...attrs}
 		>
 			{children}
diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx
index f369c88fb619e..ea40a8edffd6b 100644
--- a/site/src/components/PageHeader/FullWidthPageHeader.tsx
+++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx
@@ -1,5 +1,6 @@
 import { type CSSObject, useTheme } from "@emotion/react";
 import type { FC, PropsWithChildren, ReactNode } from "react";
+import { cn } from "utils/cn";
 
 interface FullWidthPageHeaderProps {
 	children?: ReactNode;
@@ -17,16 +18,8 @@ export const FullWidthPageHeader: FC<FullWidthPageHeaderProps> = ({
 			css={[
 				{
 					...(theme.typography.body2 as CSSObject),
-					padding: 24,
 					background: theme.palette.background.default,
 					borderBottom: `1px solid ${theme.palette.divider}`,
-					display: "flex",
-					alignItems: "center",
-					gap: 48,
-
-					zIndex: 10,
-					flexWrap: "wrap",
-
 					[theme.breakpoints.down("lg")]: {
 						position: "unset",
 						alignItems: "flex-start",
@@ -35,11 +28,11 @@ export const FullWidthPageHeader: FC<FullWidthPageHeaderProps> = ({
 						flexDirection: "column",
 					},
 				},
-				sticky && {
-					position: "sticky",
-					top: 0,
-				},
 			]}
+			className={cn(
+				"p-6 flex items-center gap-12 z-10 flex-wrap",
+				sticky && "sticky top-0",
+			)}
 		>
 			{children}
 		</header>
@@ -63,18 +56,7 @@ const _PageHeaderActions: FC<PropsWithChildren> = ({ children }) => {
 };
 
 export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
-	return (
-		<h1
-			css={{
-				fontSize: 18,
-				fontWeight: 500,
-				margin: 0,
-				lineHeight: "24px",
-			}}
-		>
-			{children}
-		</h1>
-	);
+	return <h1 className="text-lg leading-6 font-medium m-0">{children}</h1>;
 };
 
 export const PageHeaderSubtitle: FC<PropsWithChildren> = ({ children }) => {
@@ -82,10 +64,9 @@ export const PageHeaderSubtitle: FC<PropsWithChildren> = ({ children }) => {
 	return (
 		<span
 			css={{
-				fontSize: 14,
 				color: theme.palette.text.secondary,
-				display: "block",
 			}}
+			className="text-sm leading-none block"
 		>
 			{children}
 		</span>
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index c839700c995ac..42294f98c718d 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -1,4 +1,5 @@
 import type { FC, PropsWithChildren, ReactNode } from "react";
+import { cn } from "utils/cn";
 import { Stack } from "../Stack/Stack";
 
 interface PageHeaderProps {
@@ -14,19 +15,13 @@ export const PageHeader: FC<PageHeaderProps> = ({
 }) => {
 	return (
 		<header
-			className={className}
 			css={(theme) => ({
-				display: "flex",
-				alignItems: "center",
-				paddingTop: 48,
-				paddingBottom: 48,
-				gap: 32,
-
 				[theme.breakpoints.down("md")]: {
 					flexDirection: "column",
 					alignItems: "flex-start",
 				},
 			})}
+			className={cn("flex items-center py-12 gap-8", className)}
 			data-testid="header"
 		>
 			<hgroup>{children}</hgroup>
@@ -51,18 +46,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
 
 export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<h1
-			css={{
-				fontSize: 24,
-				fontWeight: 400,
-				margin: 0,
-				display: "flex",
-				alignItems: "center",
-				lineHeight: "140%",
-			}}
-		>
-			{children}
-		</h1>
+		<h1 className="text-2xl font-normal m-0 flex items-center">{children}</h1>
 	);
 };
 
@@ -78,14 +62,10 @@ export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 	return (
 		<h2
 			css={(theme) => ({
-				fontSize: 16,
 				color: theme.palette.text.secondary,
-				fontWeight: 400,
-				display: "block",
-				margin: 0,
 				marginTop: condensed ? 4 : 8,
-				lineHeight: "140%",
 			})}
+			className="text-base font-normal block m-0"
 		>
 			{children}
 		</h2>
diff --git a/site/src/modules/apps/AppStatusStateIcon.tsx b/site/src/modules/apps/AppStatusStateIcon.tsx
index 1800c81958c4e..7f724140a0338 100644
--- a/site/src/modules/apps/AppStatusStateIcon.tsx
+++ b/site/src/modules/apps/AppStatusStateIcon.tsx
@@ -36,9 +36,8 @@ export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({
 			// remove the stroke so it is not overly thick.
 			return (
 				<PauseIcon
-					css={{ strokeWidth: 0 }}
 					className={cn([
-						"text-content-secondary",
+						"text-content-secondary stroke-0",
 						className,
 						disabled ? "fill-content-disabled" : "fill-content-secondary",
 					])}
diff --git a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
index ee91ee81b2f76..c545044f3ee8d 100644
--- a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -50,63 +50,60 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
 	const isError = errors.length > 0;
 	const messages = [...errors, ...warnings];
 	const type = isError ? "error" : "warning";
-
-	const containerStyles = css`
-    ${theme.typography.body2 as CSSObject}
-
-    display: flex;
-    align-items: center;
-    padding: 12px;
-    background-color: ${theme.roles[type].background};
-  `;
-
 	const textColor = theme.roles[type].text;
 
-	if (messages.length === 1) {
-		return (
-			<div css={containerStyles}>
-				<Pill type={type}>{Language.licenseIssue}</Pill>
-				<div css={styles.leftContent}>
-					<span>{formatMessage(messages[0])}</span>
-					&nbsp;
-					<Link
-						color={textColor}
-						fontWeight="medium"
-						href="mailto:sales@coder.com"
-					>
-						{messages[0] === LicenseTelemetryRequiredErrorText
-							? Language.exception
-							: Language.upgrade}
-					</Link>
-				</div>
-			</div>
-		);
-	}
-
 	return (
-		<div css={containerStyles}>
-			<Pill type={type}>{Language.licenseIssues(messages.length)}</Pill>
+		<div
+			css={{
+				...(theme.typography.body2 as CSSObject),
+				backgroundColor: theme.roles[type].background,
+			}}
+			className="flex items-center p-3"
+		>
+			<Pill type={type}>
+				{messages.length === 1
+					? Language.licenseIssue
+					: Language.licenseIssues(messages.length)}
+			</Pill>
 			<div css={styles.leftContent}>
-				<div>
-					{Language.exceeded}
-					&nbsp;
-					<Link
-						color={textColor}
-						fontWeight="medium"
-						href="mailto:sales@coder.com"
-					>
-						{Language.upgrade}
-					</Link>
-				</div>
-				<Expander expanded={showDetails} setExpanded={setShowDetails}>
-					<ul css={{ padding: 8, margin: 0 }}>
-						{messages.map((message) => (
-							<li css={{ margin: 4 }} key={message}>
-								{formatMessage(message)}
-							</li>
-						))}
-					</ul>
-				</Expander>
+				{messages.length === 1 ? (
+					<>
+						<span>{formatMessage(messages[0])}</span>
+						&nbsp;
+						<Link
+							color={textColor}
+							fontWeight="medium"
+							href="mailto:sales@coder.com"
+						>
+							{messages[0] === LicenseTelemetryRequiredErrorText
+								? Language.exception
+								: Language.upgrade}
+						</Link>
+					</>
+				) : (
+					<>
+						<div>
+							{Language.exceeded}
+							&nbsp;
+							<Link
+								color={textColor}
+								fontWeight="medium"
+								href="mailto:sales@coder.com"
+							>
+								{Language.upgrade}
+							</Link>
+						</div>
+						<Expander expanded={showDetails} setExpanded={setShowDetails}>
+							<ul className="p-2 m-0">
+								{messages.map((message) => (
+									<li className="m-1" key={message}>
+										{formatMessage(message)}
+									</li>
+								))}
+							</ul>
+						</Expander>
+					</>
+				)}
 			</div>
 		</div>
 	);
diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
index a5891df618471..bc7ac515214f8 100644
--- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.tsx
@@ -74,7 +74,7 @@ export const OrganizationSettingsPageView: FC<
 			</SettingsHeader>
 
 			{Boolean(error) && !isApiValidationError(error) && (
-				<div css={{ marginBottom: 32 }}>
+				<div className="mb-8">
 					<ErrorAlert error={error} />
 				</div>
 			)}
@@ -89,7 +89,7 @@ export const OrganizationSettingsPageView: FC<
 				>
 					<fieldset
 						disabled={form.isSubmitting}
-						css={{ border: "unset", padding: 0, margin: 0, width: "100%" }}
+						className="border-none p-0 m-0 w-full"
 					>
 						<FormFields>
 							<TextField
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
index 9c3ac62692155..428edf5a0e889 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx
@@ -79,7 +79,7 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
 							inactivity period for all template workspaces?
 						</p>
 						<FormControlLabel
-							css={{ marginTop: 16 }}
+							className="mt-4"
 							control={
 								<Checkbox
 									size="small"
@@ -109,7 +109,7 @@ export const ScheduleDialog: FC<ScheduleDialogProps> = ({
 							dormancy period for all template workspaces?
 						</p>
 						<FormControlLabel
-							css={{ marginTop: 16 }}
+							className="mt-4"
 							control={
 								<Checkbox
 									size="small"
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 93ed0219890d7..92a84c2720094 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -212,14 +212,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
 	return (
 		<>
-			<div css={{ height: "100%", display: "flex", flexDirection: "column" }}>
-				<Topbar
-					css={{
-						display: "grid",
-						gridTemplateColumns: "1fr 2fr 1fr",
-					}}
-					data-testid="topbar"
-				>
+			<div className="h-full flex flex-col">
+				<Topbar className="grid grid-cols-[1fr_2fr_1fr]" data-testid="topbar">
 					<div>
 						<Tooltip>
 							<TooltipTrigger asChild>
@@ -242,12 +236,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							to={templateLink}
 							css={{
 								color: theme.palette.text.primary,
-								textDecoration: "none",
-
-								"&:hover": {
-									textDecoration: "underline",
-								},
 							}}
+							className="no-underline hover:underline"
 						>
 							{template.display_name || template.name}
 						</RouterLink>
@@ -257,15 +247,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						</span>
 					</TopbarData>
 
-					<div
-						css={{
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "flex-end",
-							gap: 8,
-							paddingRight: 16,
-						}}
-					>
+					<div className="flex items-center justify-end gap-2 pr-4">
 						<span className="mr-2">
 							<Button asChild size="sm" variant="outline">
 								<a
@@ -309,28 +291,13 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					</div>
 				</Topbar>
 
-				<div
-					css={{
-						display: "flex",
-						flex: 1,
-						flexBasis: 0,
-						overflow: "hidden",
-						position: "relative",
-					}}
-				>
+				<div className="flex-1 flex-basis-0 overflow-hidden relative">
 					{publishedVersion && (
 						<div
 							// We need this to reset the dismissable state of the component
 							// when the published version changes
 							key={publishedVersion.id}
-							css={{
-								position: "absolute",
-								width: "100%",
-								display: "flex",
-								justifyContent: "center",
-								padding: 12,
-								zIndex: 10,
-							}}
+							className="absolute w-full flex justify-center p-3 z-10"
 						>
 							<Alert
 								severity="success"
@@ -351,14 +318,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					)}
 
 					<Sidebar>
-						<div
-							css={{
-								height: 42,
-								padding: "0 8px 0 16px",
-								display: "flex",
-								alignItems: "center",
-							}}
-						>
+						<div className="h-10.5 pr-2 pl-4 flex items-center">
 							<span
 								css={{
 									color: theme.palette.text.primary,
@@ -369,8 +329,8 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							</span>
 
 							<div
+								className="ml-auto"
 								css={{
-									marginLeft: "auto",
 									"& svg": {
 										fill: theme.palette.text.primary,
 									},
@@ -457,51 +417,22 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						/>
 					</Sidebar>
 
-					<div
-						css={{
-							display: "flex",
-							flexDirection: "column",
-							width: "100%",
-							minHeight: "100%",
-							overflow: "hidden",
-						}}
-					>
-						<div css={{ flex: 1, overflowY: "auto" }} data-chromatic="ignore">
+					<div className="flex flex-col w-full min-h-full overflow-hidden">
+						<div className="flex-1 overflow-y-auto" data-chromatic="ignore">
 							{activePath ? (
 								isEditorValueBinary ? (
 									<div
 										role="alert"
-										css={{
-											width: "100%",
-											height: "100%",
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "center",
-											padding: 40,
-										}}
+										className="w-full h-full flex items-center justify-center p-10"
 									>
-										<div
-											css={{
-												display: "flex",
-												flexDirection: "column",
-												alignItems: "center",
-												maxWidth: 420,
-												textAlign: "center",
-											}}
-										>
+										<div className="flex flex-col items-center max-w-105 text-center">
 											<TriangleAlertIcon
 												css={{
 													color: theme.roles.warning.fill.outline,
 												}}
 												className="size-icon-lg"
 											/>
-											<p
-												css={{
-													margin: 0,
-													padding: 0,
-													marginTop: 24,
-												}}
-											>
+											<p className="m-0 p-0 mt-6">
 												The file is not displayed in the text editor because it
 												is either binary or uses an unsupported text encoding.
 											</p>
@@ -530,19 +461,16 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						<div
 							css={{
 								borderTop: `1px solid ${theme.palette.divider}`,
-								overflow: "hidden",
-								display: "flex",
-								flexDirection: "column",
 							}}
+							className="overflow-hidden flex flex-col"
 						>
 							<div
 								css={{
-									display: "flex",
-									alignItems: "center",
 									borderBottom: selectedTab
 										? `1px solid ${theme.palette.divider}`
 										: 0,
 								}}
+								className="flex items-center"
 							>
 								<div
 									css={{
@@ -586,12 +514,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 										onClick={() => {
 											setSelectedTab(undefined);
 										}}
-										css={{
-											marginLeft: "auto",
-											width: 36,
-											height: 36,
-											borderRadius: 0,
-										}}
+										className="ml-auto size-9 rounded-none"
 									>
 										<XIcon className="size-icon-xs" />
 									</IconButton>
@@ -619,7 +542,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 													tags={templateVersion.job.tags}
 													variant={AlertVariant.Inline}
 												/>
-												<Loader css={{ height: "100%" }} />
+												<Loader className="h-full" />
 											</>
 										)
 									)}
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx
index 2bc0ad5d320c5..6694824d16fc4 100644
--- a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx
+++ b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
 import type { GitSSHKey } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -20,11 +19,9 @@ export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
 	sshKey,
 	onRegenerateClick,
 }) => {
-	const theme = useTheme();
-
 	if (isLoading) {
 		return (
-			<div css={{ padding: 32 }}>
+			<div className="p-8">
 				<CircularProgress size={26} />
 			</div>
 		);
@@ -38,25 +35,11 @@ export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
 
 			{sshKey && (
 				<>
-					<p
-						css={{
-							fontSize: 14,
-							color: theme.palette.text.secondary,
-							margin: 0,
-						}}
-					>
+					<p className="text-sm text-content-secondary m-0">
 						The following public key is used to authenticate Git in workspaces.
 						You may add it to Git services (such as GitHub) that you need to
 						access from your workspace. Coder configures authentication via{" "}
-						<code
-							css={{
-								background: theme.palette.divider,
-								fontSize: 12,
-								padding: "2px 4px",
-								color: theme.palette.text.primary,
-								borderRadius: 2,
-							}}
-						>
+						<code className="bg-surface-quaternary text-xs px-1 py-0.5 rounded-sm text-content-primary">
 							$GIT_SSH_COMMAND
 						</code>
 						.
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index d8f1a51f13d2b..55208a6264862 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -144,7 +144,7 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 				title="Single Sign On"
 				description="Authenticate in Coder using one-click"
 			>
-				<div css={{ display: "grid", gap: "16px" }}>
+				<div className="grid gap-4">
 					{userLoginType.login_type === "password" ? (
 						<>
 							{authMethods.github.enabled && (
@@ -179,14 +179,9 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 						<div
 							css={{
 								background: theme.palette.background.paper,
-								borderRadius: 8,
 								border: `1px solid ${theme.palette.divider}`,
-								padding: 16,
-								display: "flex",
-								gap: 16,
-								alignItems: "center",
-								fontSize: 14,
 							}}
+							className="text-sm flex items-center gap-4 p-4 rounded-lg"
 						>
 							<CircleCheckIcon
 								css={{
@@ -202,7 +197,7 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 										: getOIDCLabel(authMethods.oidc)}
 								</strong>
 							</span>
-							<div css={{ marginLeft: "auto", lineHeight: 1 }}>
+							<div className="ml-auto leading-none">
 								{userLoginType.login_type === "github" ? (
 									<ExternalImage src="/icon/github.svg" />
 								) : (
@@ -235,11 +230,7 @@ const OIDCIcon: FC<OIDCIconProps> = ({ oidcAuth }) => {
 	}
 
 	return (
-		<img
-			alt="Open ID Connect icon"
-			src={oidcAuth.iconUrl}
-			css={{ width: 16, height: 16 }}
-		/>
+		<img alt="Open ID Connect icon" src={oidcAuth.iconUrl} className="size-4" />
 	);
 };
 
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
index 17fa32fc8443a..d80cdcaa9a2ff 100644
--- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
+++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -76,22 +76,18 @@ export const ProxyRow: FC<ProxyRowProps> = ({ proxy, latency }) => {
 				</TableCell>
 				<TableCell
 					css={{
-						fontSize: 14,
-						textAlign: "right",
 						color: latency
 							? getLatencyColor(theme, latency.latencyMS)
 							: theme.palette.text.secondary,
 					}}
+					className="text-sm text-right"
 				>
 					{latency ? `${latency.latencyMS.toFixed(0)} ms` : "Not available"}
 				</TableCell>
 			</TableRow>
 			{shouldShowMessages && (
 				<TableRow>
-					<TableCell
-						colSpan={4}
-						css={{ padding: "0 !important", borderBottom: 0 }}
-					>
+					<TableCell colSpan={4} className="!p-0 border-b-0">
 						<ProxyMessagesRow
 							proxy={proxy as WorkspaceProxy}
 							extraWarnings={extraWarnings}
@@ -150,25 +146,11 @@ const ProxyMessagesList: FC<ProxyMessagesListProps> = ({ title, messages }) => {
 				padding: "16px 64px",
 			}}
 		>
-			<div
-				id="nested-list-subheader"
-				css={{
-					marginBottom: 4,
-					fontSize: 13,
-					fontWeight: 600,
-				}}
-			>
+			<div id="nested-list-subheader" className="mb-1 text-[13px] font-medium">
 				{title}
 			</div>
 			{messages.map((error, index) => (
-				<pre
-					key={index}
-					css={{
-						margin: "0 0 8px",
-						fontSize: 14,
-						whiteSpace: "pre-wrap",
-					}}
-				>
+				<pre key={index} className="m-2 text-sm whitespace-pre-wrap">
 					{error}
 				</pre>
 			))}
diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
index 056f08a4e7b92..429b60c82adbc 100644
--- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import type { Group } from "api/typesGenerated";
@@ -20,28 +19,19 @@ type GroupsCellProps = {
 };
 
 export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
-	const theme = useTheme();
-
 	return (
 		<TableCell>
 			{userGroups === undefined ? (
 				// Felt right to add emphasis to the undefined state for semantics
 				// ("hey, this isn't normal"), but the default italics looked weird in
 				// the table UI
-				<em css={{ fontStyle: "normal" }}>N/A</em>
+				<em className="not-italic">N/A</em>
 			) : (
 				<TooltipProvider>
 					<Tooltip delayDuration={0}>
 						<TooltipTrigger asChild>
 							<button
-								css={{
-									cursor: "pointer",
-									backgroundColor: "transparent",
-									border: "none",
-									padding: 0,
-									color: "inherit",
-									lineHeight: "1",
-								}}
+								className="cursor-pointer bg-transparent border-none p-0 color-inherit leading-none"
 								type="button"
 							>
 								<div className="flex flex-row gap-2 items-center">
@@ -63,13 +53,7 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
 							<OverflowY maxHeight={400}>
 								<List
 									component="ul"
-									css={{
-										display: "flex",
-										flexFlow: "column nowrap",
-										fontSize: theme.typography.body2.fontSize,
-										padding: "4px 2px",
-										gap: 0,
-									}}
+									className="flex flex-col flex-nowrap py-1 px-0.5 gap-0 text-sm leading-tight"
 								>
 									{userGroups.map((group) => {
 										const groupName = group.display_name || group.name;
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
index abd742618ef68..cac147801f318 100644
--- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
@@ -178,7 +178,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
 						>
 							<div>{user.status}</div>
 							{(user.status === "active" || user.status === "dormant") && (
-								<LastSeen at={user.last_seen_at} css={{ fontSize: 12 }} />
+								<LastSeen at={user.last_seen_at} className="text-xs" />
 							)}
 						</TableCell>
 
diff --git a/site/src/pages/WorkspacePage/ResourceMetadata.tsx b/site/src/pages/WorkspacePage/ResourceMetadata.tsx
index 6581a8fdcf3c1..6e1cb8a0fb0bd 100644
--- a/site/src/pages/WorkspacePage/ResourceMetadata.tsx
+++ b/site/src/pages/WorkspacePage/ResourceMetadata.tsx
@@ -1,9 +1,9 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { WorkspaceResource } from "api/typesGenerated";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { SensitiveValue } from "modules/resources/SensitiveValue";
 import { Children, type FC, type HTMLAttributes } from "react";
+import { cn } from "utils/cn";
 
 type ResourceMetadataProps = Omit<HTMLAttributes<HTMLElement>, "resource"> & {
 	resource: WorkspaceResource;
@@ -28,11 +28,18 @@ export const ResourceMetadata: FC<ResourceMetadataProps> = ({
 	}
 
 	return (
-		<header css={styles.root} {...headerProps}>
+		<header
+			{...headerProps}
+			className={cn(
+				"p-6 flex flex-wrap gap-12 gap-y-6 mb-6 text-sm",
+				"bg-gradient-to-b from-surface-primary via-surface-primary via-25% to-transparent",
+				headerProps.className,
+			)}
+		>
 			{metadata.map((meta) => {
 				return (
-					<div css={styles.item} key={meta.key}>
-						<div css={styles.value}>
+					<div className="leading-normal" key={meta.key}>
+						<div className="text-ellipsis overflow-hidden whitespace-nowrap">
 							{meta.sensitive ? (
 								<SensitiveValue value={meta.value} />
 							) : (
@@ -59,41 +66,12 @@ export const ResourceMetadata: FC<ResourceMetadataProps> = ({
 								</MemoizedInlineMarkdown>
 							)}
 						</div>
-						<div css={styles.label}>{meta.key}</div>
+						<div className="text-[13px] text-content-secondary text-ellipsis overflow-hidden whitespace-nowrap">
+							{meta.key}
+						</div>
 					</div>
 				);
 			})}
 		</header>
 	);
 };
-
-const styles = {
-	root: (theme) => ({
-		padding: 24,
-		display: "flex",
-		flexWrap: "wrap",
-		gap: 48,
-		rowGap: 24,
-		marginBottom: 24,
-		fontSize: 14,
-		background: `linear-gradient(180deg, ${theme.palette.background.default} 25%, rgba(0, 0, 0, 0) 100%)`,
-	}),
-
-	item: {
-		lineHeight: "1.5",
-	},
-
-	label: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		textOverflow: "ellipsis",
-		overflow: "hidden",
-		whiteSpace: "nowrap",
-	}),
-
-	value: {
-		textOverflow: "ellipsis",
-		overflow: "hidden",
-		whiteSpace: "nowrap",
-	},
-} satisfies Record<string, Interpolation<Theme>>;

From 9070cf0a0ce552e021b9d228aab7bdf3da12b5c5 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 23:47:08 +0000
Subject: [PATCH 08/29] fix: resolve `<PageHeader />` and `<HelpTooltip />`

---
 site/src/components/HelpTooltip/HelpTooltip.tsx | 2 +-
 site/src/components/PageHeader/PageHeader.tsx   | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 51f87cd73c8a3..403ec680424b5 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -91,7 +91,7 @@ export const HelpTooltipIconTrigger = forwardRef<
 					`,
 					hoverEffect ? hoverEffectStyles : null,
 				]}
-				className="flex items-center justify-center py-1 border-none bg-transparent cursor-pointer text-inherit"
+				className="flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit"
 			>
 				{children}
 			</button>
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 42294f98c718d..51d134c143141 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -46,7 +46,9 @@ export const PageHeader: FC<PageHeaderProps> = ({
 
 export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<h1 className="text-2xl font-normal m-0 flex items-center">{children}</h1>
+		<h1 className="text-2xl font-normal m-0 flex items-center leading-[1.4]">
+			{children}
+		</h1>
 	);
 };
 
@@ -65,7 +67,7 @@ export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 				color: theme.palette.text.secondary,
 				marginTop: condensed ? 4 : 8,
 			})}
-			className="text-base font-normal block m-0"
+			className="text-base font-normal block mb-0 leading-[1.4]"
 		>
 			{children}
 		</h2>

From 64dd242e8423aa25c1db433e5bfe7e7a2fca53c9 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 23:56:15 +0000
Subject: [PATCH 09/29] fix: lint

---
 site/src/components/IconField/IconField.tsx                    | 1 -
 site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index 30d013b2fc0a7..027c2238f327b 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -1,7 +1,6 @@
 import { css, Global, useTheme } from "@emotion/react";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
-import { visuallyHidden } from "@mui/utils";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
diff --git a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
index c545044f3ee8d..51014f0fe98d7 100644
--- a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
@@ -1,6 +1,5 @@
 import {
 	type CSSObject,
-	css,
 	type Interpolation,
 	type Theme,
 	useTheme,

From fff1dc5e8f583d752501752f71c036ea4e51ccfe Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Mon, 8 Dec 2025 23:59:26 +0000
Subject: [PATCH 10/29] fix: resolve `<CodeExample />` background color

---
 site/src/components/CodeExample/CodeExample.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
index c349884d7775a..58f4411b836da 100644
--- a/site/src/components/CodeExample/CodeExample.tsx
+++ b/site/src/components/CodeExample/CodeExample.tsx
@@ -56,7 +56,7 @@ export const CodeExample: FC<CodeExampleProps> = ({
 				"cursor-pointer flex flex-row items-center text-sm font-mono rounded-lg p-2",
 				"leading-normal text-content-primary border border-solid",
 				"border-gray-300 hover:bg-gray-200",
-				"dark:bg-zinc-800 dark:border-zinc-700 dark:hover:bg-zinc-800",
+				"dark:border-zinc-700 dark:hover:bg-zinc-800",
 				className,
 			)}
 		>

From 115d9918b89efbda626de97bd7a5bd1597805d93 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:01:03 +0000
Subject: [PATCH 11/29] fix: resolve `IconField` adornment size

---
 site/src/components/IconField/IconField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index 027c2238f327b..a5047e9a9ca31 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -47,7 +47,7 @@ export const IconField: FC<IconFieldProps> = ({
 					endAdornment: hasIcon ? (
 						<InputAdornment
 							position="end"
-							className="size-6 flex items-center justify-center [& img]:max-w-full [& img]:object-contain"
+							className="size-6 flex items-center justify-center [&_img]:max-w-full [&_img]:object-contain"
 						>
 							<ExternalImage
 								alt=""

From 6f764394db052dc74aab2ce05c05314794a22ec9 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:02:13 +0000
Subject: [PATCH 12/29] chore: fix resolve `<PageHeader />` sizing

---
 site/src/components/PageHeader/PageHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 51d134c143141..0eda021a3880d 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -21,7 +21,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
 					alignItems: "flex-start",
 				},
 			})}
-			className={cn("flex items-center py-12 gap-8", className)}
+			className={cn("flex items-center pt-2 pb-12 gap-8", className)}
 			data-testid="header"
 		>
 			<hgroup>{children}</hgroup>

From 674f47610729998201731c6f6339a5818a5f652d Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:04:15 +0000
Subject: [PATCH 13/29] fix: resolve `<UserGroupsCell />`

---
 site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
index 429b60c82adbc..79cf7a0de76c6 100644
--- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -31,7 +31,7 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
 					<Tooltip delayDuration={0}>
 						<TooltipTrigger asChild>
 							<button
-								className="cursor-pointer bg-transparent border-none p-0 color-inherit leading-none"
+								className="cursor-pointer bg-transparent border-none p-0 text-inherit leading-none"
 								type="button"
 							>
 								<div className="flex flex-row gap-2 items-center">

From 7f354e174f0def3d99c1c74bb096825c3ec99a76 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:22:37 +0000
Subject: [PATCH 14/29] Revert "chore: fix resolve `<PageHeader />` sizing"

This reverts commit 6f764394db052dc74aab2ce05c05314794a22ec9.
---
 site/src/components/PageHeader/PageHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 0eda021a3880d..51d134c143141 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -21,7 +21,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
 					alignItems: "flex-start",
 				},
 			})}
-			className={cn("flex items-center pt-2 pb-12 gap-8", className)}
+			className={cn("flex items-center py-12 gap-8", className)}
 			data-testid="header"
 		>
 			<hgroup>{children}</hgroup>

From f2b203ced5b0dfb395f17ec5d159f8dd772ecab7 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:32:08 +0000
Subject: [PATCH 15/29] fix: resolve `<HelpTooltip />`

---
 site/src/components/HelpTooltip/HelpTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 403ec680424b5..e88453a84eed1 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -91,7 +91,7 @@ export const HelpTooltipIconTrigger = forwardRef<
 					`,
 					hoverEffect ? hoverEffectStyles : null,
 				]}
-				className="flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit"
+				className="flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit opacity-100 hover:opacity-100"
 			>
 				{children}
 			</button>

From f489159d15bb68bfe192e9b30c715a6bb4a5ef32 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:36:27 +0000
Subject: [PATCH 16/29] fix: properly center the `<Badge />`'s

---
 site/src/components/Badges/Badges.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
index f18a7134d00cc..fe0a45db2dad1 100644
--- a/site/src/components/Badges/Badges.tsx
+++ b/site/src/components/Badges/Badges.tsx
@@ -15,7 +15,7 @@ const badgeClasses = {
 	root: [
 		"text-[10px] h-6 font-semibold uppercase tracking-[0.085em]",
 		"px-3 rounded-full flex items-center w-fit whitespace-nowrap",
-		"border border-solid",
+		"border border-solid leading-none",
 	],
 	enabled: ["border-green-500 bg-green-950 text-green-50"],
 	error: ["border-red-600 bg-red-950 text-red-50"],

From f0a5e1020a34e853930394098609a628eefdc948 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:38:51 +0000
Subject: [PATCH 17/29] Revert "fix: resolve `<HelpTooltip />`"

This reverts commit f2b203ced5b0dfb395f17ec5d159f8dd772ecab7.
---
 site/src/components/HelpTooltip/HelpTooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index e88453a84eed1..403ec680424b5 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -91,7 +91,7 @@ export const HelpTooltipIconTrigger = forwardRef<
 					`,
 					hoverEffect ? hoverEffectStyles : null,
 				]}
-				className="flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit opacity-100 hover:opacity-100"
+				className="flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit"
 			>
 				{children}
 			</button>

From 758a2f4cec8464bf995d9888c8e4a008abb5118e Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:39:03 +0000
Subject: [PATCH 18/29] fix: merge classes on `<Topbar />`

---
 site/src/components/FullPageLayout/Topbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index 10efade7e0871..d292a135e2e4b 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -24,7 +24,7 @@ export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
 				fontSize: 13,
 				lineHeight: "1.2",
 			}}
-			className="min-h-12 flex items-center"
+			className={cn("min-h-12 flex items-center", props.className)}
 		/>
 	);
 };

From 2d33d83d90e27aff667a887d24a8eef121f08bce Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 00:45:37 +0000
Subject: [PATCH 19/29] chore: replace `10.5` with `[42px]`

---
 .../pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 92a84c2720094..41fdeeafae30b 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -318,7 +318,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					)}
 
 					<Sidebar>
-						<div className="h-10.5 pr-2 pl-4 flex items-center">
+						<div className="h-[42px] pr-2 pl-4 flex items-center">
 							<span
 								css={{
 									color: theme.palette.text.primary,

From 6e0076eb2035b33a0dabeb9538874d49502a758a Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 02:02:07 +0000
Subject: [PATCH 20/29] chore: resolve `<PageHeader />` mobile responsive

---
 site/src/components/PageHeader/PageHeader.tsx | 23 ++++---------------
 1 file changed, 5 insertions(+), 18 deletions(-)

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 51d134c143141..641076f2753d0 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -15,28 +15,15 @@ export const PageHeader: FC<PageHeaderProps> = ({
 }) => {
 	return (
 		<header
-			css={(theme) => ({
-				[theme.breakpoints.down("md")]: {
-					flexDirection: "column",
-					alignItems: "flex-start",
-				},
-			})}
-			className={cn("flex items-center py-12 gap-8", className)}
+			className={cn(
+				"flex flex-col md:flex-row items-start md:items-center py-12 gap-8",
+				className,
+			)}
 			data-testid="header"
 		>
 			<hgroup>{children}</hgroup>
 			{actions && (
-				<Stack
-					direction="row"
-					css={(theme) => ({
-						marginLeft: "auto",
-
-						[theme.breakpoints.down("md")]: {
-							marginLeft: "initial",
-							width: "100%",
-						},
-					})}
-				>
+				<Stack direction="row" className="md:ml-auto">
 					{actions}
 				</Stack>
 			)}

From fb54ddf906802b740e8f4e344772a0ac7ed4143e Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 02:10:34 +0000
Subject: [PATCH 21/29] fix: resolve `<TemplateVersionEditor />`

---
 .../pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 41fdeeafae30b..7a06d6094f70a 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -291,7 +291,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					</div>
 				</Topbar>
 
-				<div className="flex-1 flex-basis-0 overflow-hidden relative">
+				<div className="flex flex-1 flex-basis-0 overflow-hidden relative">
 					{publishedVersion && (
 						<div
 							// We need this to reset the dismissable state of the component

From 81fa9d8d076f5991b4a13efc6692abda959183d0 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 03:11:37 +0000
Subject: [PATCH 22/29] fix: resolve content paddings

---
 site/src/components/FullPageLayout/Sidebar.tsx    |  5 +++--
 site/src/components/FullPageLayout/Topbar.tsx     |  2 +-
 site/src/components/HelpTooltip/HelpTooltip.tsx   | 14 +++++---------
 site/src/components/InfoTooltip/InfoTooltip.tsx   | 15 ++++-----------
 .../components/OverflowY/OverflowY.stories.tsx    |  2 +-
 .../components/PageHeader/FullWidthPageHeader.tsx |  7 ++-----
 site/src/components/PageHeader/PageHeader.tsx     |  2 +-
 .../pages/GroupsPage/GroupSettingsPageView.tsx    |  2 +-
 .../TemplateSettingsPageView.tsx                  |  2 +-
 .../TemplateSchedulePageView.tsx                  |  2 +-
 .../WorkspaceProxyPage/WorkspaceProxyRow.tsx      | 10 ++++++++--
 site/src/pages/WorkspacePage/ResourcesSidebar.tsx |  6 ++++--
 .../WorkspacePage/WorkspaceBuildLogsSection.tsx   |  2 +-
 .../WorkspaceSchedulePage.tsx                     |  2 +-
 .../WorkspaceSettingsLayout.tsx                   |  2 +-
 .../pages/WorkspacesPage/WorkspacesPageView.tsx   |  2 +-
 16 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
index f58e97ac607c2..6d0e1a4bb0b2c 100644
--- a/site/src/components/FullPageLayout/Sidebar.tsx
+++ b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -66,12 +66,13 @@ export const SidebarIconButton: FC<SidebarIconButton> = ({
 }) => {
 	return (
 		<TopbarIconButton
+			{...buttonProps}
 			className={cn(
-				"opacity-75 hover:opacity-100 border-0 border-x-2 border-x-transparent border-solid",
+				"border-0 border-x-2 border-x-transparent border-solid",
+				!isActive && "opacity-75 hover:opacity-100",
 				isActive && "opacity-100 relative border-l-sky-400",
 				className,
 			)}
-			{...buttonProps}
 		/>
 	);
 };
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index d292a135e2e4b..c33a91f305e88 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -41,7 +41,7 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 						fontSize: 20,
 					},
 				}}
-				className="p-0 rounded-none size-12"
+				className={cn("p-0 rounded-none size-12", props.className)}
 			/>
 		);
 	},
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 403ec680424b5..7d433e08b4c13 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -69,13 +69,6 @@ export const HelpTooltipIconTrigger = forwardRef<
 		...buttonProps
 	} = props;
 
-	const hoverEffectStyles = css({
-		opacity: 0.5,
-		"&:hover": {
-			opacity: 0.75,
-		},
-	});
-
 	return (
 		<HelpTooltipTrigger asChild>
 			<button
@@ -89,9 +82,12 @@ export const HelpTooltipIconTrigger = forwardRef<
 							height: ${getIconSpacingFromSize(size)}px;
 						}
 					`,
-					hoverEffect ? hoverEffectStyles : null,
 				]}
-				className="flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit"
+				className={cn(
+					"flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit",
+					hoverEffect && "opacity-50 hover:opacity-75",
+					buttonProps.className,
+				)}
 			>
 				{children}
 			</button>
diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 411d9aef69d1c..872d5c3ed0e88 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -26,7 +26,10 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
 
 	return (
 		<HelpTooltip>
-			<HelpTooltipIconTrigger size="small" css={styles.button}>
+			<HelpTooltipIconTrigger
+				size="small"
+				className="opacity-100 hover:opacity-100"
+			>
 				<HelpTooltipIcon css={{ color: iconColor }} />
 			</HelpTooltipIconTrigger>
 			<HelpTooltipContent>
@@ -36,13 +39,3 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
 		</HelpTooltip>
 	);
 };
-
-const styles = {
-	button: css`
-		opacity: 1;
-
-		&:hover {
-			opacity: 1;
-		}
-	`,
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/OverflowY/OverflowY.stories.tsx b/site/src/components/OverflowY/OverflowY.stories.tsx
index d1e3e61f48dd7..5e762a995607c 100644
--- a/site/src/components/OverflowY/OverflowY.stories.tsx
+++ b/site/src/components/OverflowY/OverflowY.stories.tsx
@@ -17,7 +17,7 @@ const meta: Meta<typeof OverflowY> = {
 				css={{
 					backgroundColor: i % 2 === 0 ? "white" : "gray",
 				}}
-				className="h-12.5 p-0 m-0 text-black"
+				className="h-[50px] p-0 m-0 text-black"
 			>
 				Element {num}
 			</p>
diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx
index ea40a8edffd6b..c8cb59e5e56de 100644
--- a/site/src/components/PageHeader/FullWidthPageHeader.tsx
+++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx
@@ -29,10 +29,7 @@ export const FullWidthPageHeader: FC<FullWidthPageHeaderProps> = ({
 					},
 				},
 			]}
-			className={cn(
-				"p-6 flex items-center gap-12 z-10 flex-wrap",
-				sticky && "sticky top-0",
-			)}
+			className={cn("p-6 flex gap-12 z-10 flex-wrap", sticky && "sticky top-0")}
 		>
 			{children}
 		</header>
@@ -66,7 +63,7 @@ export const PageHeaderSubtitle: FC<PropsWithChildren> = ({ children }) => {
 			css={{
 				color: theme.palette.text.secondary,
 			}}
-			className="text-sm leading-none block"
+			className="text-sm leading-[22.4px] block"
 		>
 			{children}
 		</span>
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 641076f2753d0..6ee1a6b00c2b4 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -16,7 +16,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
 	return (
 		<header
 			className={cn(
-				"flex flex-col md:flex-row items-start md:items-center py-12 gap-8",
+				"flex flex-col md:flex-row items-start md:items-center pt-12 gap-8",
 				className,
 			)}
 			data-testid="header"
diff --git a/site/src/pages/GroupsPage/GroupSettingsPageView.tsx b/site/src/pages/GroupsPage/GroupSettingsPageView.tsx
index c99495d1c92ab..7b7f7f0f0ca38 100644
--- a/site/src/pages/GroupsPage/GroupSettingsPageView.tsx
+++ b/site/src/pages/GroupsPage/GroupSettingsPageView.tsx
@@ -158,7 +158,7 @@ const GroupSettingsPageView: FC<SettingsGroupPageViewProps> = ({
 			<ResourcePageHeader
 				displayName={group!.display_name}
 				name={group!.name}
-				css={{ paddingTop: 8 }}
+				className="pt-2"
 			/>
 			<UpdateGroupForm
 				group={group!}
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx
index e267d25ce572e..0fb54dc8ca7f2 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsPageView.tsx
@@ -30,7 +30,7 @@ export const TemplateSettingsPageView: FC<TemplateSettingsPageViewProps> = ({
 }) => {
 	return (
 		<>
-			<PageHeader css={{ paddingTop: 0 }}>
+			<PageHeader className="pt-0">
 				<PageHeaderTitle>General Settings</PageHeaderTitle>
 			</PageHeader>
 
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx
index 6a371ed068060..61f81b7423978 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateSchedulePageView.tsx
@@ -26,7 +26,7 @@ export const TemplateSchedulePageView: FC<TemplateSchedulePageViewProps> = ({
 }) => {
 	return (
 		<>
-			<PageHeader css={{ paddingTop: 0 }}>
+			<PageHeader className="pt-0">
 				<PageHeaderTitle>Template schedule</PageHeaderTitle>
 			</PageHeader>
 
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
index d80cdcaa9a2ff..cfde27fc6c94e 100644
--- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
+++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -146,11 +146,17 @@ const ProxyMessagesList: FC<ProxyMessagesListProps> = ({ title, messages }) => {
 				padding: "16px 64px",
 			}}
 		>
-			<div id="nested-list-subheader" className="mb-1 text-[13px] font-medium">
+			<div
+				id="nested-list-subheader"
+				className="mb-1 text-[13px] font-semibold"
+			>
 				{title}
 			</div>
 			{messages.map((error, index) => (
-				<pre key={index} className="m-2 text-sm whitespace-pre-wrap">
+				<pre
+					key={index}
+					className="mt-0 mb-2 text-sm whitespace-pre-wrap leading-[16px]"
+				>
 					{error}
 				</pre>
 			))}
diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
index 7cfb91f35f2a9..a640931130215 100644
--- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
@@ -26,7 +26,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 		<Sidebar>
 			<SidebarCaption>Resources</SidebarCaption>
 			{failed && (
-				<p className="m-0 py-4 text-sm text-content-secondary leading-normal">
+				<p className="m-0 px-4 text-[13px] text-content-secondary leading-normal">
 					Your workspace build failed, so the necessary resources couldn&apos;t
 					be created.
 				</p>
@@ -54,7 +54,9 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 					</div>
 					<div className="flex flex-col font-medium">
 						<span>{r.name}</span>
-						<span className="text-xs text-content-secondary">{r.type}</span>
+						<span className="text-xs leading-[18px] text-content-secondary">
+							{r.type}
+						</span>
 					</div>
 				</SidebarItem>
 			))}
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
index 7df420d9b011a..ab7d50f1491ab 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
@@ -12,7 +12,7 @@ export const WorkspaceBuildLogsSection: FC<WorkspaceBuildLogsSectionProps> = ({
 }) => {
 	return (
 		<div className="rounded-lg border border-solid border-zinc-700 overflow-hidden bg-surface-secondary">
-			<header className="bg-surface-secondary border-0 border-b border-solid border-zinc-700 p-3 text-sm font-semibold flex items-center rounded-t-lg">
+			<header className="bg-surface-secondary border-0 border-b border-solid border-zinc-700 p-2 pl-6 text-[13px] font-semibold flex items-center rounded-t-lg">
 				Build logs
 			</header>
 			<div className="h-100 overflow-y-auto">
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
index cf9dbed5e36df..09775057cd037 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceSchedulePage.tsx
@@ -79,7 +79,7 @@ const WorkspaceSchedulePage: FC = () => {
 		<>
 			<title>{pageTitle(workspaceName, "Schedule")}</title>
 
-			<PageHeader className="pt-0">
+			<PageHeader className="pt-0 pb-12">
 				<PageHeaderTitle>Workspace Schedule</PageHeaderTitle>
 			</PageHeader>
 
diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
index 1bdbe27c5bae3..47921cf4f6a53 100644
--- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
+++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx
@@ -46,7 +46,7 @@ export const WorkspaceSettingsLayout: FC = () => {
 			<title>{pageTitle(workspaceName, "Settings")}</title>
 
 			<Margins>
-				<Stack className="px-12" direction="row" spacing={10}>
+				<Stack className="py-12" direction="row" spacing={10}>
 					{isError ? (
 						<ErrorAlert error={error} />
 					) : (
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
index b442eadd45b29..00ab628a761f5 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -208,7 +208,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 			</TableToolbar>
 			{pageNumberIsInvalid ? (
 				<EmptyState
-					className="border border-solid border-zinc-700 rounded-md"
+					className="border border-solid border-zinc-700 rounded-lg"
 					message="Page not found"
 					description="The page you are trying to access does not exist."
 					cta={

From 107b165a435b53bc2518f3b2ca9f7650c40dcf82 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 03:20:13 +0000
Subject: [PATCH 23/29] fix: ensure `py-12` (not sure why this being
 overwritten differently)

---
 site/src/components/PageHeader/PageHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 6ee1a6b00c2b4..641076f2753d0 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -16,7 +16,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
 	return (
 		<header
 			className={cn(
-				"flex flex-col md:flex-row items-start md:items-center pt-12 gap-8",
+				"flex flex-col md:flex-row items-start md:items-center py-12 gap-8",
 				className,
 			)}
 			data-testid="header"

From 32dadf07b8afb81e63ac572387f103f640c2e4f7 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 09:23:00 +0000
Subject: [PATCH 24/29] feat: "v3" of changes (WIP)

---
 .../Dialogs/ConfirmDialog/ConfirmDialog.tsx   |  97 ++++----
 .../DurationField/DurationField.tsx           |   2 +-
 site/src/components/FileUpload/FileUpload.tsx |  93 +++----
 site/src/components/Filter/Filter.tsx         |  16 +-
 site/src/components/FullPageLayout/Topbar.tsx |   7 +-
 site/src/components/Loader/Loader.tsx         |   1 +
 site/src/components/OverflowY/OverflowY.tsx   |   5 +-
 site/src/components/PageHeader/PageHeader.tsx |   7 +-
 .../PaginationWidget/PaginationContainer.tsx  |  10 +-
 .../PaginationWidget/PaginationHeader.tsx     |  14 +-
 .../src/components/Paywall/PopoverPaywall.tsx |   4 +-
 site/src/components/Sidebar/Sidebar.tsx       |   8 +-
 .../management/DeploymentSettingsLayout.tsx   |   2 +-
 site/src/modules/provisioners/Provisioner.tsx |  52 +---
 .../modules/provisioners/ProvisionerTag.tsx   |   2 +-
 site/src/modules/resources/AgentLatency.tsx   |   5 +-
 .../resources/AgentLogs/AgentLogLine.tsx      |   2 +-
 .../modules/resources/PortForwardButton.tsx   |  27 +--
 .../PortForwardPopoverView.stories.tsx        |   3 +-
 .../VSCodeDesktopButton.tsx                   |   8 +-
 .../VSCodeDevContainerButton.tsx              |   8 +-
 .../TemplateExampleCard.tsx                   |   8 +-
 .../TemplateFileTree.stories.tsx              |   3 +-
 .../templates/TemplateFiles/TemplateFiles.tsx |  11 +-
 .../WorkspaceBuildData/WorkspaceBuildData.tsx |  26 +-
 .../UpdateBuildParametersDialog.tsx           |   2 +-
 .../WorkspaceDeleteDialog.tsx                 |  14 +-
 .../WorkspaceOutdatedTooltip.tsx              |   4 +-
 .../WorkspaceTiming/StagesChart.tsx           |   8 +-
 .../WorkspaceTiming/WorkspaceTimings.tsx      |   6 +-
 .../CliInstallPage/CliInstallPageView.tsx     |   6 +-
 .../CreateTemplateGalleryPageView.tsx         |  24 +-
 .../StarterTemplates.tsx                      |  11 +-
 .../CreateTemplatePage/CreateTemplateForm.tsx |  13 +-
 .../pages/CreateUserPage/CreateUserForm.tsx   |   2 +-
 .../AnnouncementBannerDialog.tsx              |   2 +-
 .../AnnouncementBannerSettings.tsx            |  19 +-
 .../AppearanceSettingsPageView.tsx            |   9 +-
 .../ExternalAuthSettingsPageView.tsx          |   9 +-
 .../pages/DeploymentSettingsPage/Fieldset.tsx |   5 +-
 .../AddNewLicensePageView.tsx                 |   2 +-
 .../NotificationsPage/NotificationEvents.tsx  |   6 +-
 .../NotificationsPage/Troubleshooting.tsx     |   4 +-
 .../EditOAuth2AppPageView.tsx                 |   9 +-
 .../OAuth2AppsSettingsPage/OAuth2AppForm.tsx  |   2 +-
 .../OAuth2AppsSettingsPageView.tsx            |   4 +-
 .../pages/DeploymentSettingsPage/Option.tsx   |  27 +--
 .../ExternalAuthPage/ExternalAuthPage.tsx     |   2 +-
 site/src/pages/GroupsPage/GroupPage.tsx       |   2 +-
 site/src/pages/GroupsPage/GroupsPageView.tsx  |   2 +-
 site/src/pages/HealthPage/Content.tsx         |  72 ++----
 site/src/pages/HealthPage/DERPPage.tsx        |   6 +-
 site/src/pages/HealthPage/DERPRegionPage.tsx  |  30 +--
 .../pages/HealthPage/DismissWarningButton.tsx |   2 +-
 site/src/pages/HealthPage/WebsocketPage.tsx   |   5 +-
 .../pages/HealthPage/WorkspaceProxyPage.tsx   |  50 +---
 site/src/pages/IconsPage/IconsPage.tsx        |  29 +--
 site/src/pages/LoginPage/OAuthSignInForm.tsx  |   4 +-
 .../pages/LoginPage/PasswordSignInForm.tsx    |   6 +-
 .../CreateOrganizationPageView.tsx            |   2 +-
 .../ResetPasswordPage/ChangePasswordPage.tsx  |  17 +-
 .../ResetPasswordPage/RequestOTPPage.tsx      |  35 +--
 site/src/pages/SetupPage/SetupPageView.tsx    |  36 +--
 .../StarterTemplatePageView.tsx               |  24 +-
 .../TemplateDocsPage/TemplateDocsPage.tsx     |  13 +-
 .../TemplateEmbedPage/TemplateEmbedPage.tsx   |  25 +-
 .../TemplateInsightsPage/IntervalMenu.tsx     |   4 +-
 .../TemplateInsightsPage.tsx                  | 227 +++++-------------
 .../TemplateInsightsPage/WeekPicker.tsx       |   5 +-
 .../TemplateVersionsPage/VersionsTable.tsx    |   2 +-
 .../TemplateSettingsForm.tsx                  |   2 +-
 .../TemplateSettingsLayout.tsx                |   4 +-
 .../ProvisionerTagsPopover.tsx                |   7 +-
 .../pages/TemplatesPage/EmptyTemplates.tsx    |   2 +-
 .../pages/TemplatesPage/TemplatesPageView.tsx |   9 +-
 .../src/pages/TerminalPage/TerminalAlerts.tsx |   5 +-
 site/src/pages/TerminalPage/TerminalPage.tsx  |  10 +-
 .../AccountPage/AccountUserGroups.tsx         |   5 +-
 .../ExternalAuthPage/ExternalAuthPageView.tsx |   6 +-
 site/src/pages/UserSettingsPage/Layout.tsx    |   4 +-
 .../NotificationsPage/NotificationsPage.tsx   |  69 +++---
 .../OAuth2ProviderPageView.tsx                |   2 +-
 site/src/pages/UserSettingsPage/Section.tsx   |  18 +-
 .../TokensPage/TokensPage.tsx                 |   2 +-
 .../WorkspaceProxyPage/WorkspaceProxyRow.tsx  |   4 +-
 .../pages/UsersPage/ResetPasswordDialog.tsx   |   7 +-
 86 files changed, 419 insertions(+), 946 deletions(-)

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
index 1b253ad848c77..24d4f294ca8dd 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -52,48 +52,6 @@ export interface ConfirmDialogProps
 	readonly title: string;
 }
 
-const styles = {
-	dialogWrapper: (theme) => ({
-		"& .MuiPaper-root": {
-			background: theme.palette.background.paper,
-			border: `1px solid ${theme.palette.divider}`,
-			width: "100%",
-			maxWidth: 440,
-		},
-		"& .MuiDialogActions-spacing": {
-			padding: "0 40px 40px",
-		},
-	}),
-	dialogContent: (theme) => ({
-		color: theme.palette.text.secondary,
-		padding: "40px 40px 20px",
-	}),
-	dialogTitle: (theme) => ({
-		margin: 0,
-		marginBottom: 16,
-		color: theme.palette.text.primary,
-		fontWeight: 400,
-		fontSize: 20,
-	}),
-	dialogDescription: (theme) => ({
-		color: theme.palette.text.secondary,
-		lineHeight: "160%",
-		fontSize: 16,
-
-		"& strong": {
-			color: theme.palette.text.primary,
-		},
-
-		"& p:not(.MuiFormHelperText-root)": {
-			margin: 0,
-		},
-
-		"& > p": {
-			margin: "8px 0",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
 /**
  * Quick-use version of the Dialog component with slightly alternative styles,
  * great to use for dialogs that don't have any interaction beyond yes / no.
@@ -119,14 +77,61 @@ export const ConfirmDialog: FC<ConfirmDialogProps> = ({
 
 	return (
 		<Dialog
-			css={styles.dialogWrapper}
+			css={(theme) => ({
+				"& .MuiPaper-root": {
+					background: theme.palette.background.paper,
+					border: `1px solid ${theme.palette.divider}`,
+					width: "100%",
+					maxWidth: 440,
+				},
+				"& .MuiDialogActions-spacing": {
+					padding: "0 40px 40px",
+				},
+			})}
 			onClose={onClose}
 			open={open}
 			data-testid="dialog"
 		>
-			<div css={styles.dialogContent}>
-				<h3 css={styles.dialogTitle}>{title}</h3>
-				{description && <div css={styles.dialogDescription}>{description}</div>}
+			<div
+				css={(theme) => ({
+					color: theme.palette.text.secondary,
+					padding: "40px 40px 20px",
+				})}
+			>
+				<h3
+					css={(theme) => ({
+						margin: 0,
+						marginBottom: 16,
+						color: theme.palette.text.primary,
+						fontWeight: 400,
+						fontSize: 20,
+					})}
+				>
+					{title}
+				</h3>
+				{description && (
+					<div
+						css={(theme) => ({
+							color: theme.palette.text.secondary,
+							lineHeight: "160%",
+							fontSize: 16,
+
+							"& strong": {
+								color: theme.palette.text.primary,
+							},
+
+							"& p:not(.MuiFormHelperText-root)": {
+								margin: 0,
+							},
+
+							"& > p": {
+								margin: "8px 0",
+							},
+						})}
+					>
+						{description}
+					</div>
+				)}
 			</div>
 
 			<DialogActions>
diff --git a/site/src/components/DurationField/DurationField.tsx b/site/src/components/DurationField/DurationField.tsx
index a051324996367..8d94ae6f87037 100644
--- a/site/src/components/DurationField/DurationField.tsx
+++ b/site/src/components/DurationField/DurationField.tsx
@@ -104,7 +104,7 @@ export const DurationField: FC<DurationFieldProps> = (props) => {
 				/>
 				<Select
 					disabled={props.disabled}
-					css={{ width: 120, "& .MuiSelect-icon": { padding: 2 } }}
+					className="w-[120px] [&_.MuiSelect-icon]:p-0.5"
 					value={state.unit}
 					onChange={(e) => {
 						const unit = e.target.value as TimeUnit;
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
index 95c7baa816032..037503a906d20 100644
--- a/site/src/components/FileUpload/FileUpload.tsx
+++ b/site/src/components/FileUpload/FileUpload.tsx
@@ -5,6 +5,7 @@ import { Stack } from "components/Stack/Stack";
 import { useClickable } from "hooks/useClickable";
 import { CloudUploadIcon, FolderIcon, TrashIcon } from "lucide-react";
 import { type DragEvent, type FC, type ReactNode, useRef } from "react";
+import { cn } from "utils/cn";
 
 interface FileUploadProps {
 	isUploading: boolean;
@@ -36,7 +37,11 @@ export const FileUpload: FC<FileUploadProps> = ({
 	if (!isUploading && file) {
 		return (
 			<Stack
-				css={styles.file}
+				css={(theme) => ({
+					border: `1px solid ${theme.palette.divider}`,
+					background: theme.palette.background.paper,
+				})}
+				className="rounded-lg p-4"
 				direction="row"
 				justifyContent="space-between"
 				alignItems="center"
@@ -57,12 +62,26 @@ export const FileUpload: FC<FileUploadProps> = ({
 		<>
 			<div
 				data-testid="drop-zone"
-				css={[styles.root, isUploading && styles.disabled]}
+				css={[
+					(theme) => css`
+						border: 2px dashed ${theme.palette.divider};
+						&:hover {
+						background-color: ${theme.palette.background.paper};
+						}
+					`,
+				]}
+				className={cn(
+					"flex items-center justify-center rounded-lg p-12 cursor-pointer",
+					isUploading && "pointer-events-none opacity-75",
+				)}
 				{...clickable}
 				{...fileDrop}
 			>
 				<Stack alignItems="center" spacing={1}>
-					<div css={styles.iconWrapper}>
+					<div
+						// Used to maintain the size of icon and spinner
+						className="size-16 flex items-center justify-center"
+					>
 						{isUploading ? (
 							<CircularProgress size={32} />
 						) : (
@@ -71,8 +90,15 @@ export const FileUpload: FC<FileUploadProps> = ({
 					</div>
 
 					<Stack alignItems="center" spacing={0.5}>
-						<span css={styles.title}>{title}</span>
-						<span css={styles.description}>{description}</span>
+						<span className="text-base leading-none">{title}</span>
+						<span
+							css={(theme) => ({
+								color: theme.palette.text.secondary,
+							})}
+							className="text-center max-w-[400px] text-sm leading-normal mt-1"
+						>
+							{description}
+						</span>
 					</Stack>
 				</Stack>
 			</div>
@@ -81,7 +107,7 @@ export const FileUpload: FC<FileUploadProps> = ({
 				type="file"
 				data-testid="file-upload"
 				ref={inputRef}
-				css={styles.input}
+				className="hidden"
 				accept={extensions?.map((ext) => `.${ext}`).join(",")}
 				onChange={(event) => {
 					const file = event.currentTarget.files?.[0];
@@ -134,58 +160,3 @@ const useFileDrop = (
 		onDrop,
 	};
 };
-
-const styles = {
-	root: (theme) => css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 8px;
-    border: 2px dashed ${theme.palette.divider};
-    padding: 48px;
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${theme.palette.background.paper};
-    }
-  `,
-
-	disabled: {
-		pointerEvents: "none",
-		opacity: 0.75,
-	},
-
-	// Used to maintain the size of icon and spinner
-	iconWrapper: {
-		width: 64,
-		height: 64,
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-	},
-
-	title: {
-		fontSize: 16,
-		lineHeight: "1",
-	},
-
-	description: (theme) => ({
-		color: theme.palette.text.secondary,
-		textAlign: "center",
-		maxWidth: 400,
-		fontSize: 14,
-		lineHeight: "1.5",
-		marginTop: 4,
-	}),
-
-	input: {
-		display: "none",
-	},
-
-	file: (theme) => ({
-		borderRadius: 8,
-		border: `1px solid ${theme.palette.divider}`,
-		padding: 16,
-		background: theme.palette.background.paper,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
index 18ddaf2b8c395..6580d8a9a26e3 100644
--- a/site/src/components/Filter/Filter.tsx
+++ b/site/src/components/Filter/Filter.tsx
@@ -201,18 +201,10 @@ export const Filter: FC<FilterProps> = ({
 	const shouldDisplayError = hasError(error) && isApiValidationError(error);
 
 	return (
-		<div
-			className="flex gap-2 mb-4"
-			css={{
-				flexWrap: "wrap",
-				[theme.breakpoints.up(singleRowBreakpoint)]: {
-					flexWrap: "nowrap",
-				},
-			}}
-		>
+		<div className="flex gap-2 mb-4 flex-nowrap lg:flex-wrap">
 			{isLoading ? (
 				<>
-					<BaseSkeleton width="100%" />
+					<BaseSkeleton className="w-full" />
 					{optionsSkeleton}
 				</>
 			) : (
@@ -322,7 +314,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 						component="a"
 						href={learnMoreLink}
 						target="_blank"
-						css={{ fontSize: 13, fontWeight: 500 }}
+						className="text-[13px] font-medium"
 						onClick={() => {
 							setIsOpen(false);
 						}}
@@ -336,7 +328,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 						component="a"
 						href={learnMoreLink2}
 						target="_blank"
-						css={{ fontSize: 13, fontWeight: 500 }}
+						className="text-[13px] font-medium"
 						onClick={() => {
 							setIsOpen(false);
 						}}
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index c33a91f305e88..54a824b6358ed 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -21,10 +21,11 @@ export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
 			{...props}
 			css={{
 				borderBottom: `1px solid ${theme.palette.divider}`,
-				fontSize: 13,
-				lineHeight: "1.2",
 			}}
-			className={cn("min-h-12 flex items-center", props.className)}
+			className={cn(
+				"min-h-12 flex items-center text-[13px] leading-tight",
+				props.className,
+			)}
 		/>
 	);
 };
diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
index ef590aecfbca0..8fd43c2010e32 100644
--- a/site/src/components/Loader/Loader.tsx
+++ b/site/src/components/Loader/Loader.tsx
@@ -1,6 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import { Spinner } from "components/Spinner/Spinner";
 import type { FC, HTMLAttributes } from "react";
+import { cn } from "utils/cn";
 
 interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
 	fullscreen?: boolean;
diff --git a/site/src/components/OverflowY/OverflowY.tsx b/site/src/components/OverflowY/OverflowY.tsx
index 3513283ae84bb..dc804528e8789 100644
--- a/site/src/components/OverflowY/OverflowY.tsx
+++ b/site/src/components/OverflowY/OverflowY.tsx
@@ -2,6 +2,7 @@
  * @file Provides reusable vertical overflow behavior.
  */
 import type { FC, ReactNode } from "react";
+import { cn } from "utils/cn";
 
 type OverflowYProps = {
 	children?: ReactNode;
@@ -27,12 +28,12 @@ export const OverflowY: FC<OverflowYProps> = ({
 
 	return (
 		<div
+			{...attrs}
 			css={{
 				height: computedHeight,
 				maxHeight: computedMaxHeight,
 			}}
-			className="w-full overflow-y-auto flex-shrink-1"
-			{...attrs}
+			className={cn("w-full overflow-y-auto flex-shrink-1", attrs.className)}
 		>
 			{children}
 		</div>
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 641076f2753d0..3695fa5d409a0 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -52,9 +52,12 @@ export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 		<h2
 			css={(theme) => ({
 				color: theme.palette.text.secondary,
-				marginTop: condensed ? 4 : 8,
 			})}
-			className="text-base font-normal block mb-0 leading-[1.4]"
+			className={cn(
+				"text-base font-normal block mb-0 leading-[1.4]",
+				condensed && "mt-1",
+				!condensed && "mt-2",
+			)}
 		>
 			{children}
 		</h2>
diff --git a/site/src/components/PaginationWidget/PaginationContainer.tsx b/site/src/components/PaginationWidget/PaginationContainer.tsx
index c480b41e8a2f1..5a62578735238 100644
--- a/site/src/components/PaginationWidget/PaginationContainer.tsx
+++ b/site/src/components/PaginationWidget/PaginationContainer.tsx
@@ -1,5 +1,6 @@
 import type { PaginationResultInfo } from "hooks/usePaginatedQuery";
 import type { FC, HTMLAttributes } from "react";
+import { cn } from "utils/cn";
 import { PaginationHeader } from "./PaginationHeader";
 import { PaginationWidgetBase } from "./PaginationWidgetBase";
 
@@ -28,12 +29,11 @@ export const PaginationContainer: FC<PaginationProps> = ({
 			/>
 
 			<div
-				css={{
-					display: "flex",
-					flexFlow: "column nowrap",
-					rowGap: "16px",
-				}}
 				{...delegatedProps}
+				className={cn(
+					"flex flex-col flex-nowrap row-gap-4",
+					delegatedProps.className,
+				)}
 			>
 				{children}
 
diff --git a/site/src/components/PaginationWidget/PaginationHeader.tsx b/site/src/components/PaginationWidget/PaginationHeader.tsx
index bb0f8f6925777..e52e9929dfccc 100644
--- a/site/src/components/PaginationWidget/PaginationHeader.tsx
+++ b/site/src/components/PaginationWidget/PaginationHeader.tsx
@@ -1,6 +1,7 @@
 import { useTheme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 
 type PaginationHeaderProps = {
 	paginationUnitLabel: string;
@@ -25,19 +26,16 @@ export const PaginationHeader: FC<PaginationHeaderProps> = ({
 	return (
 		<div
 			css={{
-				display: "flex",
-				flexFlow: "row nowrap",
-				alignItems: "center",
-				margin: 0,
-				fontSize: "13px",
-				paddingBottom: "8px",
 				color: theme.palette.text.secondary,
-				height: "36px", // The size of a small button
 				"& strong": {
 					color: theme.palette.text.primary,
 				},
 			}}
-			className={className}
+			className={cn(
+				className,
+				"flex flex-nowrap items-center m-0 text-[13px] pb-2",
+				"h-9", // The size of a small button
+			)}
 		>
 			{totalRecords !== undefined ? (
 				<>
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
index 360c8b87ced0b..d088242977247 100644
--- a/site/src/components/Paywall/PopoverPaywall.tsx
+++ b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -28,7 +28,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 			]}
 		>
 			<div>
-				<Stack direction="row" alignItems="center" css={{ marginBottom: 18 }}>
+				<Stack direction="row" alignItems="center" className="mb-6">
 					<h5 css={styles.title}>{message}</h5>
 					<PremiumBadge />
 				</Stack>
@@ -38,7 +38,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
 					href={documentationLink}
 					target="_blank"
 					rel="noreferrer"
-					css={{ fontWeight: 600 }}
+					className="font-semibold"
 				>
 					Read the documentation
 				</Link>
diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx
index 4f626b8802354..9c8f12e884842 100644
--- a/site/src/components/Sidebar/Sidebar.tsx
+++ b/site/src/components/Sidebar/Sidebar.tsx
@@ -33,13 +33,7 @@ export const SidebarHeader: FC<SidebarHeaderProps> = ({
 	return (
 		<Stack direction="row" spacing={1} className="mb-4">
 			{avatar}
-			<div
-				css={{
-					overflow: "hidden",
-					display: "flex",
-					flexDirection: "column",
-				}}
-			>
+			<div className="overflow-hidden flex flex-col">
 				{linkTo ? (
 					<Link className={cn(titleStyles.normal, "no-underline")} to={linkTo}>
 						{title}
diff --git a/site/src/modules/management/DeploymentSettingsLayout.tsx b/site/src/modules/management/DeploymentSettingsLayout.tsx
index 82e49a3a234b6..19f180a961188 100644
--- a/site/src/modules/management/DeploymentSettingsLayout.tsx
+++ b/site/src/modules/management/DeploymentSettingsLayout.tsx
@@ -54,7 +54,7 @@ const DeploymentSettingsLayout: FC = () => {
 				<div className="px-10 max-w-screen-2xl">
 					<div className="flex flex-row gap-28 py-10">
 						<DeploymentSidebar />
-						<main css={{ flexGrow: 1 }}>
+						<main className="flex-grow">
 							<Suspense fallback={<Loader />}>
 								<Outlet />
 							</Suspense>
diff --git a/site/src/modules/provisioners/Provisioner.tsx b/site/src/modules/provisioners/Provisioner.tsx
index 755c21fd96d21..3d499fd451668 100644
--- a/site/src/modules/provisioners/Provisioner.tsx
+++ b/site/src/modules/provisioners/Provisioner.tsx
@@ -36,58 +36,28 @@ export const Provisioner: FC<ProvisionerProps> = ({
 	return (
 		<div
 			key={provisioner.name}
+			className="rounded-lg text-md leading-none"
 			css={[
 				{
-					borderRadius: 8,
 					border: `1px solid ${theme.palette.divider}`,
-					fontSize: 14,
 				},
 				isWarning && { borderColor: theme.palette.warning.light },
 			]}
 		>
-			<header
-				css={{
-					padding: 24,
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					gap: 24,
-				}}
-			>
-				<div
-					css={{
-						display: "flex",
-						alignItems: "center",
-						gap: 24,
-						objectFit: "fill",
-					}}
-				>
-					<div css={{ lineHeight: "160%" }}>
-						<h4 css={{ fontWeight: 500, margin: 0 }}>{provisioner.name}</h4>
+			<header className="p-6 flex items-center justify-between gap-6">
+				<div className="flex items-center gap-6 object-fill">
+					<div className="leading-[160%]">
+						<h4 className="font-semibold m-0">{provisioner.name}</h4>
 						<span css={{ color: theme.palette.text.secondary }}>
 							<code>{provisioner.version}</code>
 						</span>
 					</div>
 				</div>
-				<div
-					css={{
-						marginLeft: "auto",
-						display: "flex",
-						flexWrap: "wrap",
-						gap: 12,
-						justifyContent: "right",
-					}}
-				>
+				<div className="ml-auto flex flex-wrap gap-3 justify-end">
 					<Tooltip>
 						<TooltipTrigger asChild>
 							<Pill size="lg" icon={iconScope}>
-								<span
-									css={{
-										":first-letter": { textTransform: "uppercase" },
-									}}
-								>
-									{daemonScope}
-								</span>
+								<span className="first-letter:uppercase">{daemonScope}</span>
 							</Pill>
 						</TooltipTrigger>
 						<TooltipContent side="bottom">Scope</TooltipContent>
@@ -101,16 +71,12 @@ export const Provisioner: FC<ProvisionerProps> = ({
 			<div
 				css={{
 					borderTop: `1px solid ${theme.palette.divider}`,
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-					padding: "8px 24px",
-					fontSize: 12,
 					color: theme.palette.text.secondary,
 				}}
+				className="flex items-center justify-between py-2 px-6 text-sm leading-none"
 			>
 				{warnings && warnings.length > 0 ? (
-					<div css={{ display: "flex", flexDirection: "column" }}>
+					<div className="flex flex-col">
 						{warnings.map((warning) => (
 							<span key={warning.code}>{warning.message}</span>
 						))}
diff --git a/site/src/modules/provisioners/ProvisionerTag.tsx b/site/src/modules/provisioners/ProvisionerTag.tsx
index 62806edc4c15e..61839d2efe00e 100644
--- a/site/src/modules/provisioners/ProvisionerTag.tsx
+++ b/site/src/modules/provisioners/ProvisionerTag.tsx
@@ -35,7 +35,7 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
 	const { valid, value: boolValue } = parseBool(tagValue);
 	const kv = (
 		<>
-			<span css={{ fontWeight: 600 }}>{tagName}</span> <span>{tagValue}</span>
+			<span className="font-semibold">{tagName}</span> <span>{tagValue}</span>
 		</>
 	);
 	const content = onDelete ? (
diff --git a/site/src/modules/resources/AgentLatency.tsx b/site/src/modules/resources/AgentLatency.tsx
index 2e50c63d0c205..8cba72ec7bd47 100644
--- a/site/src/modules/resources/AgentLatency.tsx
+++ b/site/src/modules/resources/AgentLatency.tsx
@@ -48,7 +48,8 @@ export const AgentLatency: FC<AgentLatencyProps> = ({ agent }) => {
 				<span
 					role="presentation"
 					aria-label="latency"
-					css={{ cursor: "pointer", color: latency.color }}
+					css={{ color: latency.color }}
+					className="cursor-pointer"
 				>
 					{Math.round(latency.latency_ms)}ms
 				</span>
@@ -59,7 +60,7 @@ export const AgentLatency: FC<AgentLatencyProps> = ({ agent }) => {
 					This is the latency overhead on non peer to peer connections. The
 					first row is the preferred relay.
 				</HelpTooltipText>
-				<Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
+				<Stack direction="column" spacing={1} className="mt-4">
 					{Object.entries(agent.latency)
 						.sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
 						.map(([regionName, region]) => (
diff --git a/site/src/modules/resources/AgentLogs/AgentLogLine.tsx b/site/src/modules/resources/AgentLogs/AgentLogLine.tsx
index ef216ca81fd58..bb3d0828f86d2 100644
--- a/site/src/modules/resources/AgentLogs/AgentLogLine.tsx
+++ b/site/src/modules/resources/AgentLogs/AgentLogLine.tsx
@@ -27,7 +27,7 @@ export const AgentLogLine: FC<AgentLogLineProps> = ({
 	}, [line.output]);
 
 	return (
-		<LogLine css={{ paddingLeft: 16 }} level={line.level} style={style}>
+		<LogLine className="pl-4" level={line.level} style={style}>
 			{sourceIcon}
 			<LogLinePrefix
 				css={styles.number}
diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
index b92218993d7e6..6775aa2f42721 100644
--- a/site/src/modules/resources/PortForwardButton.tsx
+++ b/site/src/modules/resources/PortForwardButton.tsx
@@ -251,18 +251,8 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 
 	return (
 		<>
-			<div
-				css={{
-					maxHeight: 320,
-					overflowY: "auto",
-				}}
-			>
-				<Stack
-					direction="column"
-					css={{
-						padding: 20,
-					}}
-				>
+			<div className="max-h-[320px] overflow-y-auto">
+				<Stack direction="column" className="p-5">
 					<Stack
 						direction="row"
 						justifyContent="space-between"
@@ -280,13 +270,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 							The listening ports are exclusively accessible to you. Selecting
 							HTTP/S will change the protocol for all listening ports.
 						</HelpTooltipText>
-						<Stack
-							direction="row"
-							gap={2}
-							css={{
-								paddingBottom: 8,
-							}}
-						>
+						<Stack direction="row" gap={2} className="pb-2">
 							<FormControl size="small" css={styles.protocolFormControl}>
 								<Select
 									css={styles.listeningPortProtocol}
@@ -427,9 +411,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 			</div>
 			<div
 				css={{
-					padding: 20,
 					borderTop: `1px solid ${theme.palette.divider}`,
 				}}
+				className="p-5"
 			>
 				<HelpTooltipTitle>Shared Ports</HelpTooltipTitle>
 				<HelpTooltipText css={{ color: theme.palette.text.secondary }}>
@@ -536,10 +520,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
 										>
 											<XIcon
 												css={{
-													width: 14,
-													height: 14,
 													color: theme.palette.text.primary,
 												}}
+												className="size-3.5"
 											/>
 										</Button>
 									</Stack>
diff --git a/site/src/modules/resources/PortForwardPopoverView.stories.tsx b/site/src/modules/resources/PortForwardPopoverView.stories.tsx
index e1663f1db4590..c116d1403e416 100644
--- a/site/src/modules/resources/PortForwardPopoverView.stories.tsx
+++ b/site/src/modules/resources/PortForwardPopoverView.stories.tsx
@@ -16,11 +16,10 @@ const meta: Meta<typeof PortForwardPopoverView> = {
 		(Story) => (
 			<div
 				css={(theme) => ({
-					width: 404,
 					border: `1px solid ${theme.palette.divider}`,
-					borderRadius: 8,
 					backgroundColor: theme.palette.background.paper,
 				})}
+				className="w-[404px] rounded-lg"
 			>
 				<Story />
 			</div>
diff --git a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
index 56f3b5d07027c..5ff59698ba423 100644
--- a/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
+++ b/site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
@@ -78,21 +78,21 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
 				}}
 			>
 				<MenuItem
-					css={{ fontSize: 14 }}
+					className="text-sm leading-none"
 					onClick={() => {
 						selectVariant("vscode");
 					}}
 				>
-					<VSCodeIcon css={{ width: 12, height: 12 }} />
+					<VSCodeIcon className="size-3" />
 					{DisplayAppNameMap.vscode}
 				</MenuItem>
 				<MenuItem
-					css={{ fontSize: 14 }}
+					className="text-sm leading-none"
 					onClick={() => {
 						selectVariant("vscode-insiders");
 					}}
 				>
-					<VSCodeInsidersIcon css={{ width: 12, height: 12 }} />
+					<VSCodeInsidersIcon className="size-3" />
 					{DisplayAppNameMap.vscode_insiders}
 				</MenuItem>
 			</Menu>
diff --git a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
index efd6ecc9bc00c..9afca2b364240 100644
--- a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
+++ b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
@@ -82,21 +82,21 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
 				}}
 			>
 				<MenuItem
-					css={{ fontSize: 14 }}
+					className="text-sm leading-none"
 					onClick={() => {
 						selectVariant("vscode");
 					}}
 				>
-					<VSCodeIcon css={{ width: 12, height: 12 }} />
+					<VSCodeIcon className="size-3" />
 					{DisplayAppNameMap.vscode}
 				</MenuItem>
 				<MenuItem
-					css={{ fontSize: 14 }}
+					className="text-sm leading-none"
 					onClick={() => {
 						selectVariant("vscode-insiders");
 					}}
 				>
-					<VSCodeInsidersIcon css={{ width: 12, height: 12 }} />
+					<VSCodeInsidersIcon className="size-3" />
 					{DisplayAppNameMap.vscode_insiders}
 				</MenuItem>
 			</Menu>
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 6ecdc11ed84d9..1ef73c1fe98d7 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -23,7 +23,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 				<div css={styles.icon}>
 					<ExternalImage
 						src={example.icon}
-						css={{ width: "100%", height: "100%", objectFit: "contain" }}
+						className="w-full h-full object-contain"
 					/>
 				</div>
 
@@ -39,15 +39,13 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 			</div>
 
 			<div>
-				<h4 css={{ fontSize: 14, fontWeight: 600, margin: 0, marginBottom: 4 }}>
-					{example.name}
-				</h4>
+				<h4 className="text-sm font-semibold m-0 mb-1">{example.name}</h4>
 				<span css={styles.description}>
 					{example.description}{" "}
 					<Link
 						component={RouterLink}
 						to={`/starter-templates/${example.id}`}
-						css={{ display: "inline-block", fontSize: 13, marginTop: 4 }}
+						className="inline-block text-[13px] leading-none mt-2"
 					>
 						Read more
 					</Link>
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
index 45191a2320a3f..96f71e80772bb 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx
@@ -27,10 +27,9 @@ const meta: Meta<typeof TemplateFileTree> = {
 			return (
 				<div
 					css={{
-						maxWidth: 260,
-						borderRadius: 8,
 						border: `1px solid ${theme.palette.divider}`,
 					}}
+					className="max-w-[260px] rounded-lg"
 				>
 					<Story />
 				</div>
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
index e23a42762013a..698c261cef8d0 100644
--- a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
+++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -61,7 +61,7 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 
 	return (
 		<div>
-			<div css={{ display: "flex", alignItems: "flex-start", gap: 32 }}>
+			<div className="flex items-start gap-8">
 				<div css={styles.sidebar}>
 					<TemplateFileTree
 						fileTree={fileTree}
@@ -102,21 +102,16 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 											{filename}
 										</span>
 
-										<div css={{ marginLeft: "auto" }}>
+										<div className="ml-auto">
 											<Link
 												to={`${versionLink}/edit?path=${filename}`}
 												css={{
-													display: "flex",
-													gap: 4,
-													alignItems: "center",
-													fontSize: 14,
 													color: theme.palette.text.secondary,
-													textDecoration: "none",
-
 													"&:hover": {
 														color: theme.palette.text.primary,
 													},
 												}}
+												className="flex gap-1 items-center text-sm leading-none no-underline"
 											>
 												<EditIcon className="text-inherit size-icon-xs" />
 												Edit
diff --git a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx
index 9cd258caf892d..b396b05fc4890 100644
--- a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx
+++ b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx
@@ -25,26 +25,19 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
 			<BuildIcon
 				transition={build.transition}
 				css={{
-					width: 16,
-					height: 16,
 					color: theme.roles[statusType].fill.solid,
 				}}
+				className="size-4"
 			/>
-			<div css={{ overflow: "hidden" }}>
+			<div className="overflow-hidden">
 				<div
 					css={{
 						color: theme.palette.text.primary,
-						textOverflow: "ellipsis",
-						overflow: "hidden",
-						whiteSpace: "nowrap",
-						display: "flex",
-						alignItems: "center",
-						gap: 4,
 					}}
+					className="truncate flex items-center gap-1"
 				>
-					<span css={{ textTransform: "capitalize" }}>{build.transition}</span>{" "}
-					by{" "}
-					<span css={{ fontWeight: 500 }}>
+					<span className="capitalize">{build.transition}</span> by{" "}
+					<span className="font-medium">
 						{getDisplayWorkspaceBuildInitiatedBy(build)}
 					</span>
 					{!systemBuildReasons.includes(build.reason) &&
@@ -66,9 +59,9 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
 				</div>
 				<div
 					css={{
-						fontSize: 12,
 						color: theme.palette.text.secondary,
 					}}
+					className="text-sm leading-none"
 				>
 					{createDayString(build.created_at)}
 				</div>
@@ -83,12 +76,7 @@ export const WorkspaceBuildDataSkeleton = () => {
 			<Skeleton variant="circular" width={16} height={16} />
 			<div>
 				<Skeleton variant="text" width={94} height={16} />
-				<Skeleton
-					variant="text"
-					width={60}
-					height={14}
-					css={{ marginTop: 2 }}
-				/>
+				<Skeleton variant="text" width={60} height={14} className="mt-0.5" />
 			</div>
 		</div>
 	);
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx
index 20f962eb41fb9..b94efb168a32d 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx
@@ -61,7 +61,7 @@ export const UpdateBuildParametersDialog: FC<
 				Workspace parameters
 			</DialogTitle>
 			<DialogContent css={styles.content}>
-				<DialogContentText css={{ margin: 0 }}>
+				<DialogContentText className="m-0">
 					This template has new parameters that must be configured to complete
 					the update
 				</DialogContentText>
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
index 245f95c0f74d8..1ed7e573165db 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
@@ -74,7 +74,7 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 							<p className="name">{workspace.name}</p>
 							<p className="label">workspace</p>
 						</div>
-						<div css={{ textAlign: "right" }}>
+						<div className="text-right">
 							<p className="info">{dayjs(workspace.created_at).fromNow()}</p>
 							<p className="label">created</p>
 						</div>
@@ -90,7 +90,7 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 						<TextField
 							fullWidth
 							autoFocus
-							css={{ marginTop: 32 }}
+							className="mt-8"
 							name="confirmation"
 							autoComplete="off"
 							id={`${hookId}-confirm`}
@@ -113,9 +113,9 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 						/>
 						{hasTask && (
 							<div css={styles.warnContainer}>
-								<div css={{ flexDirection: "column" }}>
+								<div className="flex flex-col">
 									<p className="info">This workspace is related to a task</p>
-									<span css={{ fontSize: 12, marginTop: 4, display: "block" }}>
+									<span className="text-xs leading-none mt-1 block">
 										Deleting this workspace will also delete{" "}
 										<Link
 											href={`/tasks/${workspace.owner_name}/${workspace.task_id}`}
@@ -129,7 +129,7 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 						)}
 						{canOrphan && (
 							<div css={styles.warnContainer}>
-								<div css={{ flexDirection: "column" }}>
+								<div className="flex flex-col">
 									<Checkbox
 										id="orphan_resources"
 										size="small"
@@ -143,9 +143,9 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 										data-testid="orphan-checkbox"
 									/>
 								</div>
-								<div css={{ flexDirection: "column" }}>
+								<div className="flex flex-col">
 									<p className="info">Orphan Resources</p>
-									<span css={{ fontSize: 12, marginTop: 4, display: "block" }}>
+									<span className="text-xs leading-none mt-1 block">
 										As a Template Admin, you may skip resource cleanup to delete
 										a failed workspace. Resources such as volumes and virtual
 										machines will not be destroyed.&nbsp;
diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
index 6de6f2c40df50..db8b4f0c54ee8 100644
--- a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+++ b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -79,7 +79,7 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipContentProps> = ({
 				</HelpTooltipText>
 
 				<div css={styles.container}>
-					<div css={{ lineHeight: "1.6" }}>
+					<div className="leading-[1.6]">
 						<div css={styles.bold}>New version</div>
 						<div>
 							{activeVersion ? (
@@ -96,7 +96,7 @@ const WorkspaceOutdatedTooltipContent: FC<TooltipContentProps> = ({
 						</div>
 					</div>
 
-					<div css={{ lineHeight: "1.6" }}>
+					<div className="leading-[1.6]">
 						<div css={styles.bold}>Message</div>
 						<div>
 							{activeVersion ? (
diff --git a/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
index 103d4717f20c6..692bbb40926a3 100644
--- a/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
+++ b/site/src/modules/workspaces/WorkspaceTiming/StagesChart.tsx
@@ -159,13 +159,7 @@ export const StagesChart: FC<StagesChartProps> = ({
 													}}
 												>
 													{t.error && (
-														<CircleAlertIcon
-															className="size-icon-sm"
-															css={{
-																color: "#F87171",
-																marginRight: 4,
-															}}
-														/>
+														<CircleAlertIcon className="size-icon-sm text-[#F87171] mr-1" />
 													)}
 													<Blocks count={t.visibleResources} />
 												</ClickableBar>
diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
index c4e0e63228314..30bcca10a3594 100644
--- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
+++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx
@@ -107,14 +107,14 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 				onClick={() => setIsOpen((o) => !o)}
 			>
 				{isOpen ? (
-					<ChevronUpIcon css={{ width: 16, height: 16, marginRight: 16 }} />
+					<ChevronUpIcon className="size-4 mr-4" />
 				) : (
-					<ChevronDownIcon css={{ width: 16, height: 16, marginRight: 16 }} />
+					<ChevronDownIcon className="size-4 mr-4" />
 				)}
 				<span>Build timeline</span>
 				<span
+					className="ml-auto"
 					css={(theme) => ({
-						marginLeft: "auto",
 						color: theme.palette.text.secondary,
 					})}
 				>
diff --git a/site/src/pages/CliInstallPage/CliInstallPageView.tsx b/site/src/pages/CliInstallPage/CliInstallPageView.tsx
index 0dc7240870759..ca1fd3874a1fb 100644
--- a/site/src/pages/CliInstallPage/CliInstallPageView.tsx
+++ b/site/src/pages/CliInstallPage/CliInstallPageView.tsx
@@ -15,16 +15,16 @@ export const CliInstallPageView: FC<CliInstallPageViewProps> = ({ origin }) => {
 
 			<p css={styles.instructions}>
 				Copy the command below and{" "}
-				<strong css={{ display: "block" }}>paste it in your terminal.</strong>
+				<strong className="block">paste it in your terminal.</strong>
 			</p>
 
 			<CodeExample
-				css={{ maxWidth: "100%" }}
+				className="max-w-full"
 				code={`curl -fsSL ${origin}/install.sh | sh`}
 				secret={false}
 			/>
 
-			<div css={{ paddingTop: 16 }}>
+			<div className="pt-4">
 				<RouterLink to="/workspaces" css={styles.backLink}>
 					Go to workspaces
 				</RouterLink>
diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
index 0dfdb4a219504..fc87dcbb2958e 100644
--- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.tsx
@@ -44,38 +44,24 @@ export const CreateTemplateGalleryPageView: FC<
 			</PageHeader>
 			<Stack spacing={8}>
 				<Stack direction="row" spacing={4}>
-					<div css={{ width: 202 }}>
+					<div className="w-[202px]">
 						<h2 css={styles.sectionTitle}>
 							Choose a starting point for your new template
 						</h2>
 					</div>
-					<div
-						css={{
-							display: "flex",
-							flexWrap: "wrap",
-							gap: 32,
-							height: "max-content",
-						}}
-					>
-						<Card variant="outlined" css={{ width: 320, borderRadius: 6 }}>
+					<div className="flex flex-wrap gap-8 h-max">
+						<Card variant="outlined" className="w-[320px] rounded-md">
 							<CardActionArea
 								component={RouterLink}
 								to="/templates/new"
 								sx={{ height: 115, padding: 1 }}
 							>
 								<CardContent>
-									<Stack
-										direction="row"
-										spacing={3}
-										css={{ alignItems: "center" }}
-									>
+									<Stack direction="row" spacing={3} className="items-center">
 										<div css={styles.icon}>
 											<ExternalImage
 												src="/emojis/1f4e1.png"
-												css={{
-													width: "100%",
-													height: "100%",
-												}}
+												className="w-full h-full"
 											/>
 										</div>
 										<div>
diff --git a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
index 7f7171af551dd..9916e9f7caef5 100644
--- a/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
+++ b/site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
@@ -66,7 +66,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 	return (
 		<Stack direction="row" spacing={4} alignItems="flex-start">
 			{starterTemplatesByTag && tags && (
-				<Stack css={{ width: 202, flexShrink: 0, position: "sticky" }}>
+				<Stack className="w-[202px] flex-shrink-0 sticky">
 					<h2 css={styles.sectionTitle}>Choose a starter template</h2>
 					<span css={styles.filterCaption}>Filter</span>
 					{tags.map((tag) => (
@@ -81,14 +81,7 @@ export const StarterTemplates: FC<StarterTemplatesProps> = ({
 				</Stack>
 			)}
 
-			<div
-				css={{
-					display: "flex",
-					flexWrap: "wrap",
-					gap: 32,
-					height: "max-content",
-				}}
-			>
+			<div className="flex flex-wrap gap-8 h-max">
 				{visibleTemplates?.map((example) => (
 					<TemplateExampleCard
 						css={(theme) => ({
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index e3528e9b707be..f23c41a4b037b 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -30,6 +30,7 @@ import { SelectedTemplate } from "pages/CreateWorkspacePage/SelectedTemplate";
 import { type FC, useState } from "react";
 import { useQuery } from "react-query";
 import { useSearchParams } from "react-router";
+import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import {
 	displayNameValidator,
@@ -389,19 +390,15 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
 						type="button"
 						onClick={onOpenBuildLogsDrawer}
 						css={(theme) => ({
-							backgroundColor: "transparent",
-							border: 0,
-							fontWeight: 500,
-							fontSize: 14,
-							cursor: "pointer",
 							color: theme.palette.text.secondary,
-
 							"&:hover": {
-								textDecoration: "underline",
-								textUnderlineOffset: 4,
 								color: theme.palette.text.primary,
 							},
 						})}
+						className={cn([
+							"bg-transparent border-0 font-medium text-sm leading-normal cursor-pointer",
+							"hover:underline hover:underline-offset-4",
+						])}
 					>
 						Show build logs
 					</button>
diff --git a/site/src/pages/CreateUserPage/CreateUserForm.tsx b/site/src/pages/CreateUserPage/CreateUserForm.tsx
index 9961f788aa287..bca8e47fd043e 100644
--- a/site/src/pages/CreateUserPage/CreateUserForm.tsx
+++ b/site/src/pages/CreateUserPage/CreateUserForm.tsx
@@ -124,7 +124,7 @@ export const CreateUserForm: FC<
 	return (
 		<FullPageForm title="Create user">
 			{isApiError(error) && !hasApiFieldErrors(error) && (
-				<ErrorAlert error={error} css={{ marginBottom: 32 }} />
+				<ErrorAlert error={error} className="mb-8" />
 			)}
 			<form onSubmit={form.handleSubmit} autoComplete="off">
 				<Stack spacing={2.5}>
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx
index 510a369c85807..432127fcfee0b 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerDialog.tsx
@@ -41,7 +41,7 @@ export const AnnouncementBannerDialog: FC<AnnouncementBannerDialogProps> = ({
 	return (
 		<Dialog css={styles.dialogWrapper} open onClose={onCancel}>
 			{/* Banner preview */}
-			<div css={{ position: "fixed", top: 0, left: 0, right: 0 }}>
+			<div className="fixed top-0 left-0 right-0">
 				<AnnouncementBannerView
 					message={bannerForm.values.message}
 					backgroundColor={bannerForm.values.background_color}
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
index fb9978f84d1fa..1c9c9f01ce2ee 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
@@ -67,11 +67,9 @@ export const AnnouncementBannerSettings: FC<
 		<>
 			<div
 				css={{
-					borderRadius: 8,
 					border: `1px solid ${theme.palette.divider}`,
-					marginTop: 32,
-					overflow: "hidden",
 				}}
+				className="rounded-lg mt-8 overflow-hidden"
 			>
 				<div className="p-6">
 					<Stack
@@ -79,13 +77,7 @@ export const AnnouncementBannerSettings: FC<
 						justifyContent="space-between"
 						alignItems="center"
 					>
-						<h3
-							css={{
-								fontSize: 20,
-								margin: 0,
-								fontWeight: 600,
-							}}
-						>
+						<h3 className="text-xl font-semibold m-0 leading-none">
 							Announcement Banners
 						</h3>
 						<Button
@@ -100,14 +92,13 @@ export const AnnouncementBannerSettings: FC<
 					<div
 						css={{
 							color: theme.palette.text.secondary,
-							fontSize: 14,
-							marginTop: 8,
 						}}
+						className="text-sm mt-2 leading-none"
 					>
 						Display message banners to all users.
 					</div>
 
-					<div css={[theme.typography.body2 as CSSObject, { paddingTop: 16 }]}>
+					<div css={[theme.typography.body2 as CSSObject]} className="pt-4">
 						<Table>
 							<TableHeader>
 								<TableRow>
@@ -152,9 +143,9 @@ export const AnnouncementBannerSettings: FC<
 							theme.typography.body2 as CSSObject,
 							{
 								background: theme.palette.background.paper,
-								padding: "16px 24px",
 							},
 						]}
+						className="py-4 px-6"
 					>
 						<div className="text-content-secondary">
 							<p>
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
index 52f8f690de2e1..7ff17d1b59212 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -132,14 +132,7 @@ export const AppearanceSettingsPageView: FC<
 						endAdornment: (
 							<InputAdornment
 								position="end"
-								css={{
-									width: 24,
-									height: 24,
-
-									"& img": {
-										maxWidth: "100%",
-									},
-								}}
+								className="size-6 [&_img]:max-w-full"
 							>
 								<img
 									alt=""
diff --git a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
index 1f7d2d59ecc6a..cbe126a952ef2 100644
--- a/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx
@@ -50,12 +50,7 @@ export const ExternalAuthSettingsPageView: FC<
 				}}
 			/>
 
-			<div
-				css={{
-					marginTop: 24,
-					marginBottom: 24,
-				}}
-			>
+			<div className="mt-6 mb-6">
 				<Alert severity="info" actions={<PremiumBadge key="enterprise" />}>
 					Integrating with multiple External authentication providers is an
 					Premium feature.
@@ -87,7 +82,7 @@ export const ExternalAuthSettingsPageView: FC<
 						config.external_auth?.length === 0) && (
 						<TableRow>
 							<TableCell colSpan={999}>
-								<div css={{ textAlign: "center" }}>
+								<div className="text-center">
 									No providers have been configured!
 								</div>
 							</TableCell>
diff --git a/site/src/pages/DeploymentSettingsPage/Fieldset.tsx b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
index 9414ba081afa9..4dfaa661c2e37 100644
--- a/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
+++ b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
@@ -46,12 +46,9 @@ export const Fieldset: FC<FieldsetProps> = ({
 					theme.typography.body2 as CSSObject,
 					{
 						background: theme.palette.background.paper,
-						padding: "16px 24px",
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "space-between",
 					},
 				]}
+				className="py-4 px-6 flex items-center justify-between"
 			>
 				<div className="text-content-secondary">{validation}</div>
 				{button || (
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
index 2815bfe15aa83..060f7fd9c44cf 100644
--- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx
@@ -79,7 +79,7 @@ export const AddNewLicensePageView: FC<AddNewLicenseProps> = ({
 				description="Select a text file that contains your license key."
 			/>
 
-			<Stack css={{ paddingTop: 40 }}>
+			<Stack className="pt-10">
 				<DividerWithText>or</DividerWithText>
 
 				<Fieldset
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx
index d116718be1898..83580df92b12e 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx
@@ -105,11 +105,7 @@ export const NotificationEvents: FC<NotificationEventsProps> = ({
 			)}
 
 			{Object.entries(templatesByGroup).map(([group, templates]) => (
-				<Card
-					key={group}
-					variant="outlined"
-					css={{ background: "transparent", width: "100%" }}
-				>
+				<Card key={group} variant="outlined" className="bg-transparent w-full">
 					<List>
 						<ListItem css={styles.listHeader}>
 							<ListItemText css={styles.listItemText} primary={group} />
diff --git a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
index 8d773942c1582..f3b00258b3a04 100644
--- a/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
+++ b/site/src/pages/DeploymentSettingsPage/NotificationsPage/Troubleshooting.tsx
@@ -18,11 +18,9 @@ export const Troubleshooting: FC = () => {
 		<>
 			<div
 				css={{
-					fontSize: 14,
 					color: theme.palette.text.secondary,
-					lineHeight: "160%",
-					marginBottom: 16,
 				}}
+				className="text-sm leading-relaxed mb-4"
 			>
 				Send a test notification to troubleshoot your notification settings.
 			</div>
diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx
index 7e2c4e31bcd06..1ebe3a32339af 100644
--- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx
@@ -111,12 +111,7 @@ export const EditOAuth2AppPageView: FC<EditOAuth2AppProps> = ({
 							</p>
 							<CodeExample
 								code={fullNewSecret.client_secret_full}
-								css={{
-									minHeight: "auto",
-									userSelect: "all",
-									width: "100%",
-									marginTop: 24,
-								}}
+								className="min-h-auto user-select-all w-full mt-6"
 							/>
 						</>
 					}
@@ -248,7 +243,7 @@ const OAuth2AppSecretsTable: FC<OAuth2AppSecretsTableProps> = ({
 					{!isLoadingSecrets && (!secrets || secrets.length === 0) && (
 						<TableRow>
 							<TableCell colSpan={999}>
-								<div css={{ textAlign: "center" }}>
+								<div className="text-center">
 									No client secrets have been generated.
 								</div>
 							</TableCell>
diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx
index 0bb08327f5fa3..3d7459d59f9c1 100644
--- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppForm.tsx
@@ -31,7 +31,7 @@ export const OAuth2AppForm: FC<OAuth2AppFormProps> = ({
 
 	return (
 		<form
-			css={{ marginTop: 10 }}
+			className="mt-2.5"
 			onSubmit={(event) => {
 				event.preventDefault();
 				const formData = new FormData(event.target as HTMLFormElement);
diff --git a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
index 3c40874ef453f..6416002d8ee04 100644
--- a/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx
@@ -76,7 +76,7 @@ const OAuth2AppsSettingsPageView: FC<OAuth2AppsSettingsProps> = ({
 					{apps?.length === 0 && (
 						<TableRow>
 							<TableCell colSpan={999}>
-								<div css={{ textAlign: "center" }}>
+								<div className="text-center">
 									No OAuth2 applications have been configured.
 								</div>
 							</TableCell>
@@ -109,7 +109,7 @@ const OAuth2AppRow: FC<OAuth2AppRowProps> = ({ app }) => {
 			</TableCell>
 
 			<TableCell>
-				<div css={{ display: "flex", paddingLeft: 16 }}>
+				<div className="flex pl-4">
 					<ChevronRightIcon className="size-icon-sm" />
 				</div>
 			</TableCell>
diff --git a/site/src/pages/DeploymentSettingsPage/Option.tsx b/site/src/pages/DeploymentSettingsPage/Option.tsx
index ae13db003c41e..a8ff8de41bd07 100644
--- a/site/src/pages/DeploymentSettingsPage/Option.tsx
+++ b/site/src/pages/DeploymentSettingsPage/Option.tsx
@@ -3,6 +3,7 @@ import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 import { WrenchIcon } from "lucide-react";
 import type { FC, HTMLAttributes, PropsWithChildren } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { cn } from "utils/cn";
 
 export const OptionName: FC<PropsWithChildren> = ({ children }) => {
 	return (
@@ -58,7 +59,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 
 	if (typeof value === "object" && !Array.isArray(value)) {
 		return (
-			<ul css={{ listStyle: "none" }} className="option-array">
+			<ul className="option-array list-none">
 				{Object.entries(value)
 					.sort((a, b) => a[0].localeCompare(b[0]))
 					.map(([option, isEnabled]) => (
@@ -67,20 +68,16 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
 							css={[
 								styles.option,
 								!isEnabled && {
-									marginLeft: 32,
 									color: theme.palette.text.disabled,
 								},
 							]}
-							className={`option-array-item-${option} ${
-								isEnabled ? "option-enabled" : "option-disabled"
-							}`}
+							className={cn([
+								`option-array-item-${option}`,
+								isEnabled && "option-enabled",
+								!isEnabled && "option-disabled ml-8",
+							])}
 						>
-							<div
-								css={{
-									display: "inline-flex",
-									alignItems: "center",
-								}}
-							>
+							<div className="inline-flex items-center">
 								{isEnabled && <WrenchIcon className="size-4 mx-2" />}
 								{option}
 							</div>
@@ -127,16 +124,10 @@ export const OptionConfigFlag: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 	return (
 		<div
 			{...props}
-			className="OptionConfigFlag"
 			css={{
-				fontSize: 10,
-				fontWeight: 600,
-				display: "block",
 				backgroundColor: theme.palette.divider,
-				lineHeight: 1,
-				padding: "2px 4px",
-				borderRadius: 1,
 			}}
+			className="OptionConfigFlag text-[10px] leading-none font-semibold block py-0.5 px-1 rounded-[1px]"
 		/>
 	);
 };
diff --git a/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx b/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
index c4ae645d015c2..1da00f2f18aae 100644
--- a/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
+++ b/site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx
@@ -83,7 +83,7 @@ const ExternalAuthPage: FC = () => {
 				<SignInLayout>
 					<Welcome>Failed to validate oauth access token</Welcome>
 
-					<p css={{ textAlign: "center" }}>
+					<p className="text-center">
 						Attempted to validate the user&apos;s oauth access token from the
 						authentication flow. This situation may occur as a result of an
 						external authentication provider misconfiguration. Verify the
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index 4213a0ac20400..d0e12cfc656b3 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -320,7 +320,7 @@ const GroupMemberRow: FC<GroupMemberRowProps> = ({
 				css={[styles.status, member.status === "suspended" && styles.suspended]}
 			>
 				<div>{member.status}</div>
-				<LastSeen at={member.last_seen_at} css={{ fontSize: 12 }} />
+				<LastSeen at={member.last_seen_at} className="text-xs leading-none" />
 			</TableCell>
 			<TableCell width="1%">
 				{canUpdate && (
diff --git a/site/src/pages/GroupsPage/GroupsPageView.tsx b/site/src/pages/GroupsPage/GroupsPageView.tsx
index 1eb3f6b809648..2ac3a154f5950 100644
--- a/site/src/pages/GroupsPage/GroupsPageView.tsx
+++ b/site/src/pages/GroupsPage/GroupsPageView.tsx
@@ -167,7 +167,7 @@ const TableLoader: FC = () => {
 		<TableLoaderSkeleton>
 			<TableRowSkeleton>
 				<TableCell>
-					<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
+					<div className="flex items-center gap-2">
 						<AvatarDataSkeleton />
 					</div>
 				</TableCell>
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
index 97729a12184c3..b1f2e8bd4c61c 100644
--- a/site/src/pages/HealthPage/Content.tsx
+++ b/site/src/pages/HealthPage/Content.tsx
@@ -14,6 +14,7 @@ import {
 	type HTMLAttributes,
 	type ReactElement,
 } from "react";
+import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import { healthyColor } from "./healthyColor";
 
@@ -23,11 +24,9 @@ export const Header: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 	return (
 		<header
 			css={{
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "space-between",
 				padding: `36px ${CONTENT_PADDING}px`,
 			}}
+			className="flex items-center justify-between"
 			{...props}
 		/>
 	);
@@ -36,15 +35,10 @@ export const Header: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 export const HeaderTitle: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 	return (
 		<h2
-			css={{
-				margin: 0,
-				lineHeight: "1.2",
-				fontSize: 20,
-				fontWeight: 500,
-				display: "flex",
-				alignItems: "center",
-				gap: 16,
-			}}
+			className={cn(
+				"m-0 leading-tight text-xl font-medium flex items-center gap-4",
+				props.className,
+			)}
 			{...props}
 		/>
 	);
@@ -73,11 +67,9 @@ export const HealthyDot: FC<HealthyDotProps> = ({ severity }) => {
 	return (
 		<div
 			css={{
-				width: 8,
-				height: 8,
-				borderRadius: 9999,
 				backgroundColor: healthyColor(theme, severity),
 			}}
+			className="size-2 rounded-full"
 		/>
 	);
 };
@@ -87,10 +79,8 @@ export const Main: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 		<main
 			css={{
 				padding: `0 ${CONTENT_PADDING}px ${CONTENT_PADDING}px`,
-				display: "flex",
-				flexDirection: "column",
-				gap: 36,
 			}}
+			className="flex flex-col gap-9"
 			{...props}
 		/>
 	);
@@ -99,15 +89,7 @@ export const Main: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 export const GridData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 	return (
 		<div
-			css={{
-				lineHeight: "1.4",
-				display: "grid",
-				gridTemplateColumns: "auto auto",
-				gap: 12,
-				columnGap: 48,
-				width: "min-content",
-				whiteSpace: "nowrap",
-			}}
+			className="leading-snug grid grid-cols-[auto_auto] gap-x-3 gap-y-12 min-w-min whitespace-nowrap"
 			{...props}
 		/>
 	);
@@ -118,10 +100,9 @@ export const GridDataLabel: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 	return (
 		<span
 			css={{
-				fontSize: 14,
-				fontWeight: 500,
 				color: theme.palette.text.secondary,
 			}}
+			className="text-sm font-medium leading-none"
 			{...props}
 		/>
 	);
@@ -132,9 +113,9 @@ export const GridDataValue: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 	return (
 		<span
 			css={{
-				fontSize: 14,
 				color: theme.palette.text.primary,
 			}}
+			className="text-sm leading-none"
 			{...props}
 		/>
 	);
@@ -142,16 +123,7 @@ export const GridDataValue: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 
 export const SectionLabel: FC<HTMLAttributes<HTMLHeadingElement>> = (props) => {
 	return (
-		<h4
-			{...props}
-			css={{
-				fontSize: 14,
-				fontWeight: 500,
-				margin: 0,
-				lineHeight: "1.2",
-				marginBottom: 16,
-			}}
-		/>
+		<h4 {...props} className="text-sm font-medium m-0 leading-tight mb-4" />
 	);
 };
 
@@ -167,17 +139,9 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
 		<div
 			ref={ref}
 			css={{
-				display: "inline-flex",
-				alignItems: "center",
-				height: 32,
-				borderRadius: 9999,
 				border: `1px solid ${theme.palette.divider}`,
-				fontSize: 12,
-				fontWeight: 500,
-				padding: 8,
-				gap: 8,
-				cursor: "default",
 			}}
+			className="inline-flex items-center h-8 rounded-full text-xs font-medium gap-2 p-2 cursor-default"
 			{...divProps}
 		>
 			{cloneElement(icon, { className: "size-[14px]" })}
@@ -222,19 +186,13 @@ export const Logs: FC<LogsProps> = ({ lines, ...divProps }) => {
 	return (
 		<div
 			css={{
-				fontFamily: "monospace",
-				fontSize: 13,
-				lineHeight: "160%",
-				padding: 24,
 				backgroundColor: theme.palette.background.paper,
-				overflowX: "auto",
-				whiteSpace: "pre-wrap",
-				wordBreak: "break-all",
 			}}
+			className="font-mono text-[13px] leading-[160%] p-6 overflow-x-auto whitespace-pre-wrap break-all"
 			{...divProps}
 		>
 			{lines.map((line, index) => (
-				<span css={{ display: "block" }} key={index}>
+				<span className="block" key={index}>
 					{line}
 				</span>
 			))}
diff --git a/site/src/pages/HealthPage/DERPPage.tsx b/site/src/pages/HealthPage/DERPPage.tsx
index 3a913f23e05d5..d614e2741ae43 100644
--- a/site/src/pages/HealthPage/DERPPage.tsx
+++ b/site/src/pages/HealthPage/DERPPage.tsx
@@ -75,7 +75,7 @@ const DERPPage: FC = () => {
 
 				<section>
 					<SectionLabel>Flags</SectionLabel>
-					<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
+					<div className="flex flex-wrap gap-3">
 						{flags.map((flag) => (
 							<BooleanPill key={flag} value={safeNetcheck[flag]}>
 								{flag}
@@ -86,7 +86,7 @@ const DERPPage: FC = () => {
 
 				<section>
 					<SectionLabel>Regions</SectionLabel>
-					<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
+					<div className="flex flex-wrap gap-3">
 						{Object.values(regions ?? {})
 							.filter((region) => {
 								// Values can technically be null
@@ -123,10 +123,10 @@ const DERPPage: FC = () => {
 					<Logs
 						lines={logs}
 						css={(theme) => ({
-							borderRadius: 8,
 							border: `1px solid ${theme.palette.divider}`,
 							color: theme.palette.text.secondary,
 						})}
+						className="rounded-lg"
 					/>
 				</section>
 			</Main>
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index bc0830fbf5fb8..30907320838d1 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -47,24 +47,15 @@ const DERPRegionPage: FC = () => {
 				<hgroup>
 					<Link
 						css={{
-							fontSize: 12,
-							textDecoration: "none",
 							color: theme.palette.text.secondary,
-							fontWeight: 500,
-							display: "inline-flex",
-							alignItems: "center",
 							"&:hover": {
 								color: theme.palette.text.primary,
 							},
-							marginBottom: 8,
-							lineHeight: "1.2",
 						}}
+						className="text-xs no-underline font-medium inline-flex items-center mb-2 leading-tight"
 						to="/health/derp"
 					>
-						<ChevronLeftIcon
-							className="size-icon-xs"
-							css={{ verticalAlign: "middle", marginRight: 8 }}
-						/>
+						<ChevronLeftIcon className="size-icon-xs align-middle mr-2" />
 						Back to DERP
 					</Link>
 					<HeaderTitle>
@@ -88,7 +79,7 @@ const DERPRegionPage: FC = () => {
 				})}
 
 				<section>
-					<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
+					<div className="flex flex-wrap gap-3">
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<Pill icon={<HashIcon className="size-icon-sm" />}>
@@ -123,9 +114,8 @@ const DERPRegionPage: FC = () => {
 							key={node!.HostName}
 							css={{
 								border: `1px solid ${theme.palette.divider}`,
-								borderRadius: 8,
-								fontSize: 14,
 							}}
+							className="text-sm leading-none rounded-lg"
 						>
 							<header css={reportStyles.header}>
 								<div>
@@ -177,20 +167,12 @@ type StatusCircleProps = { color: string };
 
 const StatusCircle: FC<StatusCircleProps> = ({ color }) => {
 	return (
-		<div
-			css={{
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-			}}
-		>
+		<div className="flex items-center justify-center">
 			<div
 				css={{
-					width: 8,
-					height: 8,
 					backgroundColor: color,
-					borderRadius: 9999,
 				}}
+				className="size-2 rounded-full"
 			/>
 		</div>
 	);
diff --git a/site/src/pages/HealthPage/DismissWarningButton.tsx b/site/src/pages/HealthPage/DismissWarningButton.tsx
index b1d04d2859b7a..71af70e313630 100644
--- a/site/src/pages/HealthPage/DismissWarningButton.tsx
+++ b/site/src/pages/HealthPage/DismissWarningButton.tsx
@@ -23,7 +23,7 @@ export const DismissWarningButton = (props: { healthcheck: HealthSection }) => {
 				variant="rectangular"
 				height={36}
 				width={170}
-				css={{ borderRadius: 8 }}
+				className="rounded-lg"
 			/>
 		);
 	}
diff --git a/site/src/pages/HealthPage/WebsocketPage.tsx b/site/src/pages/HealthPage/WebsocketPage.tsx
index d91e1cfca6634..7c50ab70f574c 100644
--- a/site/src/pages/HealthPage/WebsocketPage.tsx
+++ b/site/src/pages/HealthPage/WebsocketPage.tsx
@@ -65,11 +65,8 @@ const WebsocketPage = () => {
 						css={{
 							backgroundColor: theme.palette.background.paper,
 							border: `1px solid ${theme.palette.divider}`,
-							borderRadius: 8,
-							fontSize: 14,
-							padding: 24,
-							fontFamily: MONOSPACE_FONT_FAMILY,
 						}}
+						className="rounded-lg text-sm p-6 font-mono"
 					>
 						{websocket.body !== "" ? (
 							websocket.body
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index e80786e1dffa0..9aeb3f82ef041 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -64,51 +64,32 @@ const WorkspaceProxyPage: FC = () => {
 						<div
 							key={region.id}
 							css={{
-								borderRadius: 8,
 								border: `1px solid ${
 									region.healthy
 										? theme.palette.divider
 										: theme.palette.warning.light
 								}`,
-								fontSize: 14,
 							}}
+							className="rounded-lg text-sm leading-none"
 						>
-							<header
-								css={{
-									padding: 24,
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "space-between",
-									gap: 24,
-								}}
-							>
-								<div css={{ display: "flex", alignItems: "center", gap: 24 }}>
-									<div
-										css={{
-											width: 36,
-											height: 36,
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "center",
-										}}
-									>
+							<header className="p-6 flex items-center justify-between gap-6">
+								<div className="flex items-center gap-6">
+									<div className="size-9 flex items-center justify-center">
 										<img
 											src={region.icon_url}
-											css={{ objectFit: "fill", width: "100%", height: "100%" }}
+											className="object-fill w-full h-full"
 											alt=""
 										/>
 									</div>
-									<div css={{ lineHeight: "160%" }}>
-										<h4 css={{ fontWeight: 500, margin: 0 }}>
-											{region.display_name}
-										</h4>
+									<div className="leading-relaxed">
+										<h4 className="m-0 font-medium">{region.display_name}</h4>
 										<span css={{ color: theme.palette.text.secondary }}>
 											{region.version}
 										</span>
 									</div>
 								</div>
 
-								<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
+								<div className="flex flex-wrap gap-3">
 									{region.wildcard_hostname && (
 										<Tooltip>
 											<TooltipTrigger asChild>
@@ -150,27 +131,18 @@ const WorkspaceProxyPage: FC = () => {
 							<div
 								css={{
 									borderTop: `1px solid ${theme.palette.divider}`,
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "space-between",
-									padding: "8px 24px",
-									fontSize: 12,
 									color: theme.palette.text.secondary,
 								}}
+								className="flex items-center justify-between py-2 px-4 text-xs leading-none"
 							>
 								{region.status?.status === "unregistered" ? (
 									<span>Has not connected yet</span>
 								) : warnings.length === 0 && errors.length === 0 ? (
 									<span>OK</span>
 								) : (
-									<div css={{ display: "flex", flexDirection: "column" }}>
+									<div className="flex flex-col">
 										{[...errors, ...warnings].map((msg) => (
-											<span
-												key={msg}
-												css={{
-													":first-letter": { textTransform: "uppercase" },
-												}}
-											>
+											<span key={msg} className="first-letter:uppercase">
 												{msg}
 											</span>
 										))}
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
index 801601f7adc12..0879d537d2b5f 100644
--- a/site/src/pages/IconsPage/IconsPage.tsx
+++ b/site/src/pages/IconsPage/IconsPage.tsx
@@ -150,30 +150,13 @@ const IconsPage: FC = () => {
 								<img
 									alt={icon.url}
 									src={icon.url}
-									css={[
-										{
-											width: 60,
-											height: 60,
-											objectFit: "contain",
-											pointerEvents: "none",
-											padding: 12,
-										},
-										parseImageParameters(
-											theme.externalImages,
-											defaultParametersForBuiltinIcons.get(icon.url) ?? "",
-										),
-									]}
+									css={parseImageParameters(
+										theme.externalImages,
+										defaultParametersForBuiltinIcons.get(icon.url) ?? "",
+									)}
+									className="w-15 h-15 object-contain pointer-events-none p-3"
 								/>
-								<figcaption
-									css={{
-										width: 88,
-										height: 48,
-										fontSize: 13,
-										textOverflow: "ellipsis",
-										textAlign: "center",
-										overflow: "hidden",
-									}}
-								>
+								<figcaption className="w-22 h-12 text-[13px] text-center truncate">
 									{icon.description}
 								</figcaption>
 							</div>
diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
index 9cf90c9a83b7c..8780b29be4b2b 100644
--- a/site/src/pages/LoginPage/OAuthSignInForm.tsx
+++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -18,7 +18,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
 	authMethods,
 }) => {
 	return (
-		<div css={{ display: "grid", gap: "16px" }}>
+		<div className="grid gap-4">
 			{authMethods?.github.enabled && (
 				<Button
 					variant="outline"
@@ -80,7 +80,7 @@ const OidcIcon: FC<OidcIconProps> = ({ iconUrl }) => {
 	return (
 		<>
 			<img alt="" src={iconUrl} aria-labelledby={oidcId} />
-			<div id={oidcId} css={{ ...visuallyHidden }}>
+			<div id={oidcId} className="sr-only">
 				Open ID Connect
 			</div>
 		</>
diff --git a/site/src/pages/LoginPage/PasswordSignInForm.tsx b/site/src/pages/LoginPage/PasswordSignInForm.tsx
index 4ba897464d31c..749828953f848 100644
--- a/site/src/pages/LoginPage/PasswordSignInForm.tsx
+++ b/site/src/pages/LoginPage/PasswordSignInForm.tsx
@@ -72,11 +72,7 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
 				<Link
 					component={RouterLink}
 					to="/reset-password"
-					css={{
-						fontSize: 12,
-						fontWeight: 500,
-						lineHeight: "16px",
-					}}
+					className="text-sm font-medium leading-4"
 				>
 					Forgot password?
 				</Link>
diff --git a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx
index 074019bb95689..d385f0ec93e85 100644
--- a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPageView.tsx
@@ -75,7 +75,7 @@ export const CreateOrganizationPageView: FC<
 			<div className="flex flex-col gap-4 w-full min-w-96 mx-auto">
 				<div className="flex flex-col items-center">
 					{Boolean(error) && !isApiValidationError(error) && (
-						<div css={{ marginBottom: 32 }}>
+						<div className="mb-8">
 							<ErrorAlert error={error} />
 						</div>
 					)}
diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
index 9ec361a39932c..bbf0ea2ba4658 100644
--- a/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
+++ b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
@@ -70,25 +70,14 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 			<div css={styles.root}>
 				<main css={styles.container}>
 					<CustomLogo css={styles.logo} />
-					<h1
-						css={{
-							margin: 0,
-							marginBottom: 24,
-							fontSize: 20,
-							fontWeight: 600,
-							lineHeight: "28px",
-						}}
-					>
+					<h1 className="m-0 mb-6 text-lg font-semibold leading-7">
 						Choose a new password
 					</h1>
 					{changePasswordMutation.error &&
 					!isApiValidationError(changePasswordMutation.error) ? (
-						<ErrorAlert
-							error={changePasswordMutation.error}
-							css={{ marginBottom: 24 }}
-						/>
+						<ErrorAlert error={changePasswordMutation.error} className="mb-6" />
 					) : null}
-					<form css={{ width: "100%" }} onSubmit={form.handleSubmit}>
+					<form className="w-full" onSubmit={form.handleSubmit}>
 						<fieldset disabled={form.isSubmitting}>
 							<Stack spacing={2.5}>
 								<TextField
diff --git a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
index 553e6479e0423..02e7c1c60d664 100644
--- a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
+++ b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
@@ -54,20 +54,12 @@ const RequestOTP: FC<RequestOTPProps> = ({
 	return (
 		<div css={styles.container}>
 			<div>
-				<h1
-					css={{
-						margin: 0,
-						marginBottom: 24,
-						fontSize: 20,
-						fontWeight: 600,
-						lineHeight: "28px",
-					}}
-				>
+				<h1 className="m-0 mb-6 text-lg font-semibold leading-7">
 					Enter your email to reset the password
 				</h1>
-				{error ? <ErrorAlert error={error} css={{ marginBottom: 24 }} /> : null}
+				{error ? <ErrorAlert error={error} className="mb-6" /> : null}
 				<form
-					css={{ width: "100%" }}
+					className="w-full"
 					onSubmit={(e) => {
 						e.preventDefault();
 						const email = e.currentTarget.email.value;
@@ -112,18 +104,16 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => {
 
 	return (
 		<div
-			css={{
-				...styles.container,
-				maxWidth: 380,
-				fontWeight: 500,
-				fontSize: 14,
-				lineHeight: "24px",
-			}}
+			css={styles.container}
+			className="max-w-[380px] font-medium text-sm leading-6"
 		>
 			<div>
-				<p css={{ margin: 0, marginBottom: 56 }}>
+				<p className="m-0 mb-14">
 					If the account{" "}
-					<span css={{ fontWeight: 600, color: theme.palette.text.secondary }}>
+					<span
+						className="font-semibold"
+						css={{ color: theme.palette.text.secondary }}
+					>
 						{email}
 					</span>{" "}
 					exists, you will get an email with instructions on resetting your
@@ -132,12 +122,9 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => {
 
 				<p
 					css={{
-						margin: 0,
-						fontSize: 12,
-						lineHeight: "16px",
 						color: theme.palette.text.secondary,
-						marginBottom: 48,
 					}}
+					className="m-0 text-xs leading-4 mb-12"
 				>
 					Contact your deployment administrator if you encounter issues.
 				</p>
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
index 28e750bfb31dc..97a89fc29ae78 100644
--- a/site/src/pages/SetupPage/SetupPageView.tsx
+++ b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -143,22 +143,16 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 
 	return (
 		<SignInLayout>
-			<header css={{ textAlign: "center", marginBottom: 32 }}>
+			<header className="text-center mb-8">
 				<CoderIcon className="w-12 h-12" />
-				<h1
-					css={{
-						fontWeight: 400,
-						margin: 0,
-						marginTop: 16,
-					}}
-				>
+				<h1 className="font-normal m-0 mt-4">
 					Welcome to <strong>Coder</strong>
 				</h1>
 				<div
 					css={(theme) => ({
-						marginTop: 12,
 						color: theme.palette.text.secondary,
 					})}
+					className="mt-3"
 				>
 					Let&lsquo;s create your first admin user account
 				</div>
@@ -202,14 +196,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 					/>
 					<label
 						htmlFor="trial"
-						css={{
-							display: "flex",
-							cursor: "pointer",
-							alignItems: "flex-start",
-							gap: 4,
-							marginTop: -4,
-							marginBottom: 8,
-						}}
+						className="flex cursor-pointer items-start gap-1 -mt-1 mb-2"
 					>
 						<Checkbox
 							id="trial"
@@ -220,17 +207,15 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 							size="small"
 						/>
 
-						<div css={{ fontSize: 14, paddingTop: 4 }}>
-							<span css={{ display: "block", fontWeight: 600 }}>
+						<div className="text-sm leading-none pt-1">
+							<span className="block font-semibold">
 								Start a free trial of Enterprise
 							</span>
 							<span
 								css={(theme) => ({
-									display: "block",
-									fontSize: 13,
 									color: theme.palette.text.secondary,
-									lineHeight: "1.6",
 								})}
+								className="block text-[13px] leading-relaxed"
 							>
 								Get access to high availability, template RBAC, audit logging,
 								quotas, and more.
@@ -238,7 +223,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 							<Link
 								href="https://coder.com/pricing"
 								target="_blank"
-								css={{ marginTop: 4, display: "inline-block", fontSize: 13 }}
+								className="mt-1 text-[13px] inline-block"
 							>
 								Read more
 							</Link>
@@ -331,11 +316,8 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 							<div
 								css={(theme) => ({
 									color: theme.palette.text.secondary,
-									fontSize: 11,
-									textAlign: "center",
-									marginTop: -5,
-									lineHeight: 1.5,
 								})}
+								className="text-[11px] text-center mt-[-5px] leading-normal"
 							>
 								Complete the form to receive your trial license and be contacted
 								about Coder products and solutions. The information you provide
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index c4bb59f7717ab..e44a7cb8aa2d1 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -60,19 +60,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 				}
 			>
 				<Stack direction="row" spacing={3} alignItems="center">
-					<div
-						css={{
-							height: 48,
-							width: 48,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-
-							"& img": {
-								width: "100%",
-							},
-						}}
-					>
+					<div className="size-12 flex items-center justify-center [&_img]:w-full">
 						<ExternalImage src={starterTemplate.icon} />
 					</div>
 					<div>
@@ -88,17 +76,11 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 				css={{
 					background: theme.palette.background.paper,
 					border: `1px solid ${theme.palette.divider}`,
-					borderRadius: 8,
 				}}
+				className="rounded-lg"
 				id="readme"
 			>
-				<div
-					css={{
-						padding: "40px 40px 64px",
-						maxWidth: 800,
-						margin: "auto",
-					}}
-				>
+				<div className="pt-10 px-10 pb-16 max-w-[800px] m-auto">
 					<MemoizedMarkdown>{starterTemplate.markdown}</MemoizedMarkdown>
 				</div>
 			</div>
diff --git a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
index c4961acf6c9a9..7a3db3a4765dd 100644
--- a/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateDocsPage/TemplateDocsPage.tsx
@@ -19,27 +19,20 @@ export default function TemplateDocsPage() {
 				css={{
 					background: theme.palette.background.paper,
 					border: `1px solid ${theme.palette.divider}`,
-					borderRadius: 8,
 				}}
+				className="rounded-lg"
 				id="readme"
 			>
 				<div
 					css={{
 						color: theme.palette.text.secondary,
-						fontWeight: 600,
-						padding: "16px 24px",
 						borderBottom: `1px solid ${theme.palette.divider}`,
 					}}
+					className="font-semibold py-4 px-6"
 				>
 					README.md
 				</div>
-				<div
-					css={{
-						padding: "0 24px 40px",
-						maxWidth: 800,
-						margin: "auto",
-					}}
-				>
+				<div className="pt-0 px-6 pb-10 max-w-[800px] m-auto">
 					<MemoizedMarkdown>{readme.body}</MemoizedMarkdown>
 				</div>
 			</div>
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
index 8b50ef2447652..4a7bd32ddadeb 100644
--- a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPage.tsx
@@ -174,9 +174,7 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 							</div>
 
 							{templateParameters.length > 0 && (
-								<div
-									css={{ display: "flex", flexDirection: "column", gap: 36 }}
-								>
+								<div className="flex flex-col gap-9">
 									{templateParameters.map((parameter) => {
 										const parameterValue =
 											buttonValues[`param.${parameter.name}`] ?? "";
@@ -205,30 +203,13 @@ export const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 							// 80px for padding, 36px is for the status bar. We want to use `vh`
 							// so that it will be relative to the screen and not the parent layout.
 							height: "calc(100vh - (80px + 36px))",
-							top: 40,
-							position: "sticky",
-							display: "flex",
-							padding: 64,
-							flex: 1,
-							alignItems: "center",
-							justifyContent: "center",
-							borderRadius: 8,
 							backgroundColor: theme.palette.background.paper,
 							border: `1px solid ${theme.palette.divider}`,
 						})}
+						className="top-10 sticky flex p-16 flex-1 items-center justify-center rounded-lg"
 					>
 						<img src="/open-in-coder.svg" alt="Open in Coder button" />
-						<div
-							css={{
-								padding: "48px 16px",
-								position: "absolute",
-								bottom: 0,
-								left: 0,
-								display: "flex",
-								justifyContent: "center",
-								width: "100%",
-							}}
-						>
+						<div className="py-12 px-4 absolute bottom-0 left-0 flex justify-center w-full">
 							<Button
 								className="rounded-full"
 								disabled={clipboard.showCopiedSuccess}
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
index 5aa98a7665d19..00b0746a2f589 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
@@ -62,7 +62,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
 				{Object.entries(insightsIntervals).map(([interval, { label }]) => {
 					return (
 						<MenuItem
-							css={{ fontSize: 14, justifyContent: "space-between" }}
+							className="text-sm leading-none justify-between"
 							key={interval}
 							onClick={() => {
 								onChange(interval as InsightsInterval);
@@ -70,7 +70,7 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
 							}}
 						>
 							{label}
-							<div css={{ width: 16, height: 16 }}>
+							<div className="size-4">
 								{value === interval && <CheckIcon className="size-icon-xs" />}
 							</div>
 						</MenuItem>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index 47e8f951eb369..311546abcbc21 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -220,26 +220,10 @@ export const TemplateInsightsPageView: FC<TemplateInsightsPageViewProps> = ({
 }) => {
 	return (
 		<>
-			<div
-				css={{
-					marginBottom: 32,
-					display: "flex",
-					alignItems: "center",
-					gap: 8,
-				}}
-			>
-				{controls}
-			</div>
-			<div
-				css={{
-					display: "grid",
-					gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-					gridTemplateRows: "440px 440px auto",
-					gap: 24,
-				}}
-			>
+			<div className="mb-8 flex items-center gap-2">{controls}</div>
+			<div className="grid grid-cols-3 grid-rows-[440px_440px_auto] gap-6">
 				<ActiveUsersPanel
-					css={{ gridColumn: "span 2" }}
+					className="col-span-2"
 					interval={interval}
 					userLimit={
 						entitlements?.features.user_limit.enabled
@@ -250,12 +234,12 @@ export const TemplateInsightsPageView: FC<TemplateInsightsPageViewProps> = ({
 				/>
 				<UsersLatencyPanel data={userLatency} />
 				<TemplateUsagePanel
-					css={{ gridColumn: "span 2" }}
+					className="col-span-2"
 					data={templateInsights?.report?.apps_usage}
 				/>
 				<UsersActivityPanel data={userActivity} />
 				<TemplateParametersUsagePanel
-					css={{ gridColumn: "span 3" }}
+					className="col-span-3"
 					data={templateInsights?.report?.parameters_usage}
 				/>
 			</div>
@@ -283,7 +267,7 @@ const ActiveUsersPanel: FC<ActiveUsersPanelProps> = ({
 				</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!data && <Loader css={{ height: "100%" }} />}
+				{!data && <Loader className="h-full" />}
 				{data && data.length === 0 && <NoDataAvailable />}
 				{data && data.length > 0 && (
 					<ActiveUserChart
@@ -310,9 +294,9 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 	const users = data?.report.users;
 
 	return (
-		<Panel {...panelProps} css={{ overflowY: "auto" }}>
+		<Panel {...panelProps} className="overflow-y-auto">
 			<PanelHeader>
-				<PanelTitle css={{ display: "flex", alignItems: "center", gap: 8 }}>
+				<PanelTitle className="flex items-center gap-2">
 					Latency by user
 					<HelpTooltip>
 						<HelpTooltipIconTrigger size="small" />
@@ -327,7 +311,7 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 			</PanelHeader>
 
 			<PanelContent>
-				{!data && <Loader css={{ height: "100%" }} />}
+				{!data && <Loader className="h-full" />}
 				{users && users.length === 0 && <NoDataAvailable />}
 				{users &&
 					[...users]
@@ -335,26 +319,17 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
 						.map((row) => (
 							<div
 								key={row.user_id}
-								css={{
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "center",
-									fontSize: 14,
-									paddingTop: 8,
-									paddingBottom: 8,
-								}}
+								className="flex justify-between items-center font-sm leading-none py-2"
 							>
-								<div css={{ display: "flex", alignItems: "center", gap: 12 }}>
+								<div className="flex items-center gap-3">
 									<Avatar fallback={row.username} src={row.avatar_url} />
-									<div css={{ fontWeight: 500 }}>{row.username}</div>
+									<div className="font-medium">{row.username}</div>
 								</div>
 								<div
 									css={{
 										color: getLatencyColor(theme, row.latency_ms.p50),
-										fontWeight: 500,
-										fontSize: 13,
-										textAlign: "right",
 									}}
+									className="font-medium text-[13px] text-right"
 								>
 									{row.latency_ms.p50.toFixed(0)}ms
 								</div>
@@ -378,9 +353,9 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 	const users = data?.report.users;
 
 	return (
-		<Panel {...panelProps} css={{ overflowY: "auto" }}>
+		<Panel {...panelProps} className="overflow-y-auto">
 			<PanelHeader>
-				<PanelTitle css={{ display: "flex", alignItems: "center", gap: 8 }}>
+				<PanelTitle className="flex items-center gap-2">
 					Activity by user
 					<HelpTooltip>
 						<HelpTooltipIconTrigger size="small" />
@@ -395,7 +370,7 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 				</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!data && <Loader css={{ height: "100%" }} />}
+				{!data && <Loader className="h-full" />}
 				{users && users.length === 0 && <NoDataAvailable />}
 				{users &&
 					[...users]
@@ -403,25 +378,17 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
 						.map((row) => (
 							<div
 								key={row.user_id}
-								css={{
-									display: "flex",
-									justifyContent: "space-between",
-									alignItems: "center",
-									fontSize: 14,
-									paddingTop: 8,
-									paddingBottom: 8,
-								}}
+								className="flex justify-between items-center font-sm py-2"
 							>
-								<div css={{ display: "flex", alignItems: "center", gap: 12 }}>
+								<div className="flex items-center gap-3">
 									<Avatar fallback={row.username} src={row.avatar_url} />
-									<div css={{ fontWeight: 500 }}>{row.username}</div>
+									<div className="font-medium">{row.username}</div>
 								</div>
 								<div
 									css={{
 										color: theme.palette.text.secondary,
-										fontSize: 13,
-										textAlign: "right",
 									}}
+									className="text-[13px] text-right"
 								>
 									{formatTime(row.seconds)}
 								</div>
@@ -454,49 +421,28 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 	const hasDataAvailable = validUsage && validUsage.length > 0;
 
 	return (
-		<Panel {...panelProps} css={{ overflowY: "auto" }}>
+		<Panel {...panelProps} className="overflow-y-auto">
 			<PanelHeader>
 				<PanelTitle>App & IDE Usage</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!data && <Loader css={{ height: "100%" }} />}
+				{!data && <Loader className="h-full" />}
 				{data && !hasDataAvailable && <NoDataAvailable />}
 				{data && hasDataAvailable && (
-					<div
-						css={{
-							display: "flex",
-							flexDirection: "column",
-							gap: 24,
-						}}
-					>
+					<div className="flex flex-col gap-6">
 						{validUsage.map((usage, i) => {
 							const percentage = (usage.seconds / totalInSeconds) * 100;
 							return (
-								<div
-									key={usage.slug}
-									css={{ display: "flex", gap: 24, alignItems: "center" }}
-								>
-									<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
-										<div
-											css={{
-												width: 20,
-												height: 20,
-												display: "flex",
-												alignItems: "center",
-												justifyContent: "center",
-											}}
-										>
+								<div key={usage.slug} className="flex gap-6 items-center">
+									<div className="flex items-center gap-2">
+										<div className="size-5 flex items-center justify-center">
 											<img
 												src={usage.icon}
 												alt=""
-												style={{
-													objectFit: "contain",
-													width: "100%",
-													height: "100%",
-												}}
+												className="object-contain w-full h-full"
 											/>
 										</div>
-										<div css={{ fontSize: 13, fontWeight: 500, width: 200 }}>
+										<div className="text-[13px] font-medium w-[200px]">
 											{usage.display_name}
 										</div>
 									</div>
@@ -506,14 +452,12 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 												value={percentage}
 												variant="determinate"
 												css={{
-													width: "100%",
-													height: 8,
 													backgroundColor: theme.palette.divider,
 													"& .MuiLinearProgress-bar": {
 														backgroundColor: usageColors[i],
-														borderRadius: 999,
 													},
 												}}
+												className="w-full h-2 [&>_.MuiLinearProgress-bar]:rounded-full"
 											/>
 										</TooltipTrigger>
 										<TooltipContent>
@@ -524,20 +468,17 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 									<Stack
 										spacing={0}
 										css={{
-											fontSize: 13,
 											color: theme.palette.text.secondary,
-											width: 120,
-											flexShrink: 0,
-											lineHeight: "1.5",
 										}}
+										className="text-[13px] w-[120px] flex-shrink-0 leading-normal"
 									>
 										{formatTime(usage.seconds)}
 										{usage.times_used > 0 && (
 											<span
 												css={{
-													fontSize: 12,
 													color: theme.palette.text.disabled,
 												}}
+												className="text-[12px]"
 											>
 												Opened {usage.times_used.toLocaleString()}{" "}
 												{usage.times_used === 1 ? "time" : "times"}
@@ -570,8 +511,8 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 				<PanelTitle>Parameters usage</PanelTitle>
 			</PanelHeader>
 			<PanelContent>
-				{!data && <Loader css={{ height: 200 }} />}
-				{data && data.length === 0 && <NoDataAvailable css={{ height: 200 }} />}
+				{!data && <Loader className="h-[200px]" />}
+				{data && data.length === 0 && <NoDataAvailable className="h-[200px]" />}
 				{data &&
 					data.length > 0 &&
 					data.map((parameter, parameterIndex) => {
@@ -582,41 +523,20 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 						return (
 							<div
 								key={parameter.name}
-								css={{
-									display: "flex",
-									alignItems: "start",
-									padding: 24,
-									marginLeft: -24,
-									marginRight: -24,
-									borderTop: `1px solid ${theme.palette.divider}`,
-									width: "calc(100% + 48px)",
-									"&:first-of-type": {
-										borderTop: 0,
-									},
-									gap: 24,
-								}}
+								className="flex items-start p-6 -mx-6 w-[calc(100%_+_48px)] first-of-type:border-t-0 gap-6"
 							>
-								<div css={{ flex: 1 }}>
-									<div css={{ fontWeight: 500 }}>{label}</div>
-									<p
-										css={{
-											fontSize: 14,
-											color: theme.palette.text.secondary,
-											maxWidth: 400,
-											margin: 0,
-										}}
-									>
+								<div className="flex-1">
+									<div className="font-medium">{label}</div>
+									<p className="text-sm leading-none max-w-[400px] m-0">
 										{parameter.description}
 									</p>
 								</div>
-								<div css={{ flex: 1, fontSize: 14, flexGrow: 2 }}>
+								<div className="flex-1 font-sm flex-grow-2">
 									<ParameterUsageRow
 										css={{
 											color: theme.palette.text.secondary,
-											fontWeight: 500,
-											fontSize: 13,
-											cursor: "default",
 										}}
+										className="font-medium text-[13px] cursor-default"
 									>
 										<div>Value</div>
 										<Tooltip>
@@ -639,7 +559,7 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 													usage={usage}
 													parameter={parameter}
 												/>
-												<div css={{ textAlign: "right" }}>{usage.count}</div>
+												<div className="text-right">{usage.count}</div>
 											</ParameterUsageRow>
 										))}
 								</div>
@@ -666,15 +586,7 @@ const ParameterUsageRow: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div
-			css={{
-				display: "flex",
-				alignItems: "baseline",
-				justifyContent: "space-between",
-				padding: "4px 0",
-			}}
-			{...attrs}
-		>
+		<div className="flex items-baseline justify-between py-1" {...attrs}>
 			{children}
 		</div>
 	);
@@ -698,23 +610,13 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 		const label = option.name;
 
 		return (
-			<div
-				css={{
-					display: "flex",
-					alignItems: "center",
-					gap: 16,
-				}}
-			>
+			<div className="flex items-center gap-4">
 				{icon && (
-					<div css={{ width: 16, height: 16, lineHeight: 1 }}>
+					<div className="size-4 leading-none">
 						<img
 							alt=""
 							src={icon}
-							css={{
-								objectFit: "contain",
-								width: "100%",
-								height: "100%",
-							}}
+							className="object-contain w-full h-full"
 							aria-labelledby={ariaId}
 						/>
 					</div>
@@ -731,11 +633,9 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 				target="_blank"
 				rel="noreferrer"
 				css={{
-					display: "flex",
-					alignItems: "center",
-					gap: 1,
 					color: theme.palette.text.primary,
 				}}
+				className="flex items-center gap-[1px]"
 			>
 				<TextValue>{usage.value}</TextValue>
 				<LinkIcon className="size-icon-xs text-content-link" />
@@ -746,16 +646,14 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 	if (parameter.type === "list(string)") {
 		const values = JSON.parse(usage.value) as string[];
 		return (
-			<div css={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+			<div className="flex gap-2 flex-wrap">
 				{values.map((v, i) => (
 					<div
 						key={i}
 						css={{
-							padding: "2px 12px",
-							borderRadius: 999,
 							background: theme.palette.divider,
-							whiteSpace: "nowrap",
 						}}
+						className="px-3 py-0.5 rounded-full whitespace-nowrap"
 					>
 						{v}
 					</div>
@@ -766,13 +664,7 @@ const ParameterUsageLabel: FC<ParameterUsageLabelProps> = ({
 
 	if (parameter.type === "bool") {
 		return (
-			<div
-				css={{
-					display: "flex",
-					alignItems: "center",
-					gap: 8,
-				}}
-			>
+			<div className="flex items-center gap-2">
 				{usage.value === "false" ? (
 					<>
 						<CircleXIcon className="size-icon-xs text-content-destructive" />
@@ -804,12 +696,10 @@ const Panel: FC<PanelProps> = ({ children, ...attrs }) => {
 	return (
 		<div
 			css={{
-				borderRadius: 8,
 				border: `1px solid ${theme.palette.divider}`,
 				backgroundColor: theme.palette.background.paper,
-				display: "flex",
-				flexDirection: "column",
 			}}
+			className="rounded-lg flex flex-col"
 			{...attrs}
 		>
 			{children}
@@ -822,7 +712,7 @@ const PanelHeader: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div css={{ padding: "20px 24px 24px" }} {...attrs}>
+		<div className="pt-5 px-6 pb-6" {...attrs}>
 			{children}
 		</div>
 	);
@@ -833,7 +723,7 @@ const PanelTitle: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div css={{ fontSize: 14, fontWeight: 500 }} {...attrs}>
+		<div className="text-sm font-medium leading-none" {...attrs}>
 			{children}
 		</div>
 	);
@@ -844,7 +734,7 @@ const PanelContent: FC<HTMLAttributes<HTMLDivElement>> = ({
 	...attrs
 }) => {
 	return (
-		<div css={{ padding: "0 24px 24px", flex: 1 }} {...attrs}>
+		<div className="pt-0 px-6 pb-6 flex-1" {...attrs}>
 			{children}
 		</div>
 	);
@@ -857,14 +747,9 @@ const NoDataAvailable = (props: HTMLAttributes<HTMLDivElement>) => {
 		<div
 			{...props}
 			css={{
-				fontSize: 13,
 				color: theme.palette.text.secondary,
-				textAlign: "center",
-				height: "100%",
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
 			}}
+			className="text-[13px] text-center h-full flex items-center justify-center"
 		>
 			No data available
 		</div>
@@ -879,9 +764,8 @@ const TextValue: FC<PropsWithChildren> = ({ children }) => {
 			<span
 				css={{
 					color: theme.palette.text.secondary,
-					weight: 600,
-					marginRight: 2,
 				}}
+				className="w-[600px] mr-0.5"
 			>
 				&quot;
 			</span>
@@ -889,9 +773,8 @@ const TextValue: FC<PropsWithChildren> = ({ children }) => {
 			<span
 				css={{
 					color: theme.palette.text.secondary,
-					weight: 600,
-					marginLeft: 2,
 				}}
+				className="w-[600px] ml-0.5"
 			>
 				&quot;
 			</span>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
index e203e8e406f86..82a59c7aedafe 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
@@ -64,7 +64,8 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
 
 					return (
 						<MenuItem
-							css={{ fontSize: 14, justifyContent: "space-between" }}
+							css={{ fontSize: 14 }}
+							className="text-sm justify-between leading-normal"
 							key={option}
 							onClick={() => {
 								onChange(optionRange);
@@ -72,7 +73,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
 							}}
 						>
 							Last {option} weeks
-							<div css={{ width: 16, height: 16 }}>
+							<div className="size-4">
 								{numberOfWeeks === option && (
 									<CheckIcon className="size-icon-xs" />
 								)}
diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
index ec340ceba7197..94bb170324d29 100644
--- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
+++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionsTable.tsx
@@ -69,7 +69,7 @@ export const VersionsTable: FC<VersionsTableProps> = ({
 				{versions && versions.length === 0 && (
 					<TableRow>
 						<TableCell colSpan={999}>
-							<div css={{ padding: 32 }}>
+							<div className="p-8">
 								<EmptyState message={Language.emptyMessage} />
 							</div>
 						</TableCell>
diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
index e1ed15d198a0e..4952a7660ca58 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -222,7 +222,7 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
 											direction="row"
 											spacing={2}
 											alignItems="center"
-											css={{ marginTop: 16 }}
+											className="mt-4"
 										>
 											<PremiumBadge />
 											<span>Premium license required to be enabled.</span>
diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
index 11e8d96950ba8..f9ee1914c5422 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx
@@ -54,7 +54,7 @@ export const TemplateSettingsLayout: FC = () => {
 			<title>{pageTitle(templateName, "Settings")}</title>
 
 			<Margins>
-				<Stack css={{ padding: "48px 0" }} direction="row" spacing={10}>
+				<Stack className="py-12 px-0" direction="row" spacing={10}>
 					{templateQuery.isError || permissionsQuery.isError ? (
 						<ErrorAlert error={templateQuery.error} />
 					) : (
@@ -66,7 +66,7 @@ export const TemplateSettingsLayout: FC = () => {
 						>
 							<Sidebar template={templateQuery.data} />
 							<Suspense fallback={<Loader />}>
-								<main css={{ width: "100%" }}>
+								<main className="w-full">
 									<Outlet />
 								</main>
 							</Suspense>
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
index 6b4c16100dab0..545468812edba 100644
--- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -27,10 +27,7 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
-				<TopbarButton
-					color="neutral"
-					css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
-				>
+				<TopbarButton color="neutral" className="px-0 !min-w-[28px]">
 					<ChevronDownIcon className="size-icon-xs" />
 					<span className="sr-only">Expand provisioner tags</span>
 				</TopbarButton>
@@ -42,9 +39,9 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 				<div
 					css={{
 						color: theme.palette.text.secondary,
-						padding: 20,
 						borderBottom: `1px solid ${theme.palette.divider}`,
 					}}
+					className="p-5"
 				>
 					<FormSection
 						classes={{
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
index 72a47c3417d5e..8ba04d0f0505d 100644
--- a/site/src/pages/TemplatesPage/EmptyTemplates.tsx
+++ b/site/src/pages/TemplatesPage/EmptyTemplates.tsx
@@ -78,7 +78,7 @@ export const EmptyTemplates: FC<EmptyTemplatesProps> = ({
 							))}
 						</div>
 
-						<Button size="sm" asChild css={{ borderRadius: 9999 }}>
+						<Button size="sm" asChild className="rounded-full">
 							<RouterLink to="/starter-templates">
 								View all starter templates
 							</RouterLink>
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 5408ad742722c..7623801755103 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -130,12 +130,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 
 			<TableCell css={styles.secondary}>
 				{showOrganizations ? (
-					<Stack
-						spacing={0}
-						css={{
-							width: "100%",
-						}}
-					>
+					<Stack spacing={0} className="w-full">
 						<span css={styles.cellPrimaryLine}>
 							{template.organization_display_name}
 						</span>
@@ -282,7 +277,7 @@ const TableLoader: FC = () => {
 		<TableLoaderSkeleton>
 			<TableRowSkeleton>
 				<TableCell>
-					<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
+					<div className="flex items-center gap-2">
 						<AvatarDataSkeleton />
 					</div>
 				</TableCell>
diff --git a/site/src/pages/TerminalPage/TerminalAlerts.tsx b/site/src/pages/TerminalPage/TerminalAlerts.tsx
index 6a06a76964128..99e3ee67316b6 100644
--- a/site/src/pages/TerminalPage/TerminalAlerts.tsx
+++ b/site/src/pages/TerminalPage/TerminalAlerts.tsx
@@ -158,14 +158,11 @@ const TerminalAlert: FC<AlertProps> = (props) => {
 		<Alert
 			{...props}
 			css={(theme) => ({
-				borderRadius: 0,
-				borderWidth: 0,
-				borderBottomWidth: 1,
 				borderBottomColor: theme.palette.divider,
 				backgroundColor: theme.palette.background.paper,
 				borderLeft: `3px solid ${theme.palette[props.severity!].light}`,
-				marginBottom: 1,
 			})}
+			className="rounded-none border-0 border-b-1 border-solid mb-[1px]"
 		/>
 	);
 };
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index ed8f9ffa1373b..ba8c4a3eba8c5 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -418,10 +418,7 @@ const TerminalPage: FC = () => {
 				</title>
 			)}
 
-			<div
-				css={{ display: "flex", flexDirection: "column", height: "100vh" }}
-				data-status={connectionStatus}
-			>
+			<div className="flex flex-col h-screen" data-status={connectionStatus}>
 				<TerminalAlerts
 					agent={workspaceAgent}
 					status={connectionStatus}
@@ -439,12 +436,9 @@ const TerminalPage: FC = () => {
 			{latency && isDebugging && (
 				<span
 					css={{
-						position: "absolute",
-						bottom: 24,
-						right: 24,
 						color: theme.palette.text.disabled,
-						fontSize: 14,
 					}}
+					className="absolute bottom-6 right-6 text-sm leading-none"
 				>
 					Latency: {latency.latencyMS.toFixed(0)}ms
 				</span>
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
index 49c30523519a1..ba7830ebbc980 100644
--- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
+++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
@@ -33,10 +33,9 @@ export const AccountUserGroups: FC<AccountGroupsProps> = ({
 						You are in{" "}
 						<em
 							css={{
-								fontStyle: "normal",
 								color: theme.palette.text.primary,
-								fontWeight: 600,
 							}}
+							className="[font-style:normal] font-semibold"
 						>
 							{groups.length} group
 							{groups.length !== 1 && "s"}
@@ -45,7 +44,7 @@ export const AccountUserGroups: FC<AccountGroupsProps> = ({
 				)
 			}
 		>
-			<div css={{ display: "flex", flexFlow: "column nowrap", rowGap: "24px" }}>
+			<div className="flex flex-col flex-nowrap gap-6">
 				{isApiError(error) && <ErrorAlert error={error} />}
 
 				{groups && (
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index b4a09c0e379c3..879fb4c7b8809 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -152,9 +152,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 
 					{link?.validate_error && (
 						<span>
-							<span
-								css={{ paddingLeft: "1em", color: theme.palette.error.light }}
-							>
+							<span css={{ color: theme.palette.error.light }} className="pl-4">
 								Error:{" "}
 							</span>
 							{link?.validate_error}
@@ -162,7 +160,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 					)}
 				</Stack>
 			</TableCell>
-			<TableCell css={{ textAlign: "right" }}>
+			<TableCell className="text-right">
 				<Button
 					disabled={authenticated || externalAuthPollingState === "polling"}
 					onClick={() => {
diff --git a/site/src/pages/UserSettingsPage/Layout.tsx b/site/src/pages/UserSettingsPage/Layout.tsx
index 7cee385e103d2..350dbf97e1259 100644
--- a/site/src/pages/UserSettingsPage/Layout.tsx
+++ b/site/src/pages/UserSettingsPage/Layout.tsx
@@ -15,10 +15,10 @@ const Layout: FC = () => {
 			<title>{pageTitle("Settings")}</title>
 
 			<Margins>
-				<Stack css={{ padding: "48px 0" }} direction="row" spacing={6}>
+				<Stack className="py-12 px-0" direction="row" spacing={6}>
 					<Sidebar user={me} />
 					<Suspense fallback={<Loader />}>
-						<main css={{ maxWidth: 800, width: "100%" }}>
+						<main className="max-w-[800px] w-full">
 							<Outlet />
 						</main>
 					</Suspense>
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
index 7af3401d8f56a..5d1bbb28d8aee 100644
--- a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
+++ b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -133,13 +133,14 @@ const NotificationsPage: FC = () => {
 							});
 
 							return (
-								<Card
-									variant="outlined"
-									css={{ background: "transparent" }}
-									key={group}
-								>
+								<Card variant="outlined" className="bg-transparent" key={group}>
 									<List>
-										<ListItem css={styles.listHeader}>
+										<ListItem
+											css={(theme) => ({
+												background: theme.palette.background.paper,
+												borderBottom: `1px solid ${theme.palette.divider}`,
+											})}
+										>
 											<ListItemIcon>
 												<Switch
 													id={group}
@@ -158,7 +159,16 @@ const NotificationsPage: FC = () => {
 												/>
 											</ListItemIcon>
 											<ListItemText
-												css={styles.listItemText}
+												css={{
+													[`& .${listItemTextClasses.primary}`]: {
+														fontSize: 14,
+														fontWeight: 500,
+														textTransform: "capitalize",
+													},
+													[`& .${listItemTextClasses.secondary}`]: {
+														fontSize: 14,
+													},
+												}}
 												primary={group}
 												primaryTypographyProps={{
 													component: "label",
@@ -219,11 +229,26 @@ const NotificationsPage: FC = () => {
 																component: "label",
 																htmlFor: tmpl.id,
 															}}
-															css={styles.listItemText}
+															css={{
+																[`& .${listItemTextClasses.primary}`]: {
+																	fontSize: 14,
+																	fontWeight: 500,
+																	textTransform: "capitalize",
+																},
+																[`& .${listItemTextClasses.secondary}`]: {
+																	fontSize: 14,
+																},
+															}}
 															primary={tmpl.name}
 														/>
 														<ListItemIcon
-															css={styles.listItemEndIcon}
+															css={(theme) => ({
+																color: theme.palette.text.secondary,
+																"& svg": {
+																	fontSize: "inherit",
+																},
+															})}
+															className="min-w-0 text-xl leading-none"
 															aria-label="Delivery method"
 														>
 															<Tooltip>
@@ -272,29 +297,3 @@ function canSeeNotificationGroup(
 			return false;
 	}
 }
-
-const styles = {
-	listHeader: (theme) => ({
-		background: theme.palette.background.paper,
-		borderBottom: `1px solid ${theme.palette.divider}`,
-	}),
-	listItemText: {
-		[`& .${listItemTextClasses.primary}`]: {
-			fontSize: 14,
-			fontWeight: 500,
-			textTransform: "capitalize",
-		},
-		[`& .${listItemTextClasses.secondary}`]: {
-			fontSize: 14,
-		},
-	},
-	listItemEndIcon: (theme) => ({
-		minWidth: 0,
-		fontSize: 20,
-		color: theme.palette.text.secondary,
-
-		"& svg": {
-			fontSize: "inherit",
-		},
-	}),
-} as Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx
index 7d2ee3a8840b0..00f1b6464db85 100644
--- a/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx
+++ b/site/src/pages/UserSettingsPage/OAuth2ProviderPage/OAuth2ProviderPageView.tsx
@@ -46,7 +46,7 @@ const OAuth2ProviderPageView: FC<OAuth2ProviderPageViewProps> = ({
 					{apps?.length === 0 && (
 						<TableRow>
 							<TableCell colSpan={999}>
-								<div css={{ textAlign: "center" }}>
+								<div className="text-center">
 									No OAuth2 applications have been authorized.
 								</div>
 							</TableCell>
diff --git a/site/src/pages/UserSettingsPage/Section.tsx b/site/src/pages/UserSettingsPage/Section.tsx
index 2227dcd9cdbf8..25cdc54f76c57 100644
--- a/site/src/pages/UserSettingsPage/Section.tsx
+++ b/site/src/pages/UserSettingsPage/Section.tsx
@@ -5,6 +5,7 @@ import {
 } from "components/FeatureStageBadge/FeatureStageBadge";
 import { Stack } from "components/Stack/Stack";
 import type { FC, ReactNode } from "react";
+import { cn } from "utils/cn";
 
 type SectionLayout = "fixed" | "fluid";
 
@@ -34,27 +35,18 @@ export const Section: FC<SectionProps> = ({
 }) => {
 	return (
 		<section className={className} id={id} data-testid={id}>
-			<div css={{ maxWidth: layout === "fluid" ? "100%" : 500 }}>
+			<div className={cn(layout === "fluid" ? "w-full" : "max-w-[500px]")}>
 				{(title || description) && (
 					<div css={styles.header}>
 						<div>
 							{title && (
 								<Stack direction="row" alignItems="center">
-									<h4
-										css={{
-											fontSize: 24,
-											fontWeight: 500,
-											margin: 0,
-											marginBottom: 8,
-										}}
-									>
-										{title}
-									</h4>
+									<h4 className="text-2xl leading-normal m-0 mb-2">{title}</h4>
 									{featureStage && (
 										<FeatureStageBadge
 											contentType={featureStage}
 											size="md"
-											css={{ marginBottom: "5px" }}
+											className="mb-[5px]"
 										/>
 									)}
 								</Stack>
@@ -69,7 +61,7 @@ export const Section: FC<SectionProps> = ({
 						{toolbar && <div>{toolbar}</div>}
 					</div>
 				)}
-				{alert && <div css={{ marginBottom: 8 }}>{alert}</div>}
+				{alert && <div className="mb-2">{alert}</div>}
 				{children}
 			</div>
 		</section>
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
index 818e5d0445b38..f483a0e285b53 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
+++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
@@ -64,7 +64,7 @@ const TokensPage: FC = () => {
 };
 
 const TokenActions: FC = () => (
-	<Stack direction="row" justifyContent="end" css={{ marginBottom: 8 }}>
+	<Stack direction="row" justifyContent="end" className="mb-2">
 		<Button asChild variant="outline">
 			<RouterLink to="new">
 				<PlusIcon />
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
index cfde27fc6c94e..6b9efe373e679 100644
--- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
+++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -141,10 +141,10 @@ const ProxyMessagesList: FC<ProxyMessagesListProps> = ({ title, messages }) => {
 	return (
 		<div
 			css={{
-				borderBottom: `1px solid ${theme.palette.divider}`,
+				borderColor: theme.palette.divider,
 				backgroundColor: theme.palette.background.default,
-				padding: "16px 64px",
 			}}
+			className="border-0 border-b border-solid py-4 px-6"
 		>
 			<div
 				id="nested-list-subheader"
diff --git a/site/src/pages/UsersPage/ResetPasswordDialog.tsx b/site/src/pages/UsersPage/ResetPasswordDialog.tsx
index dfe26593ce87a..24768a6ef297b 100644
--- a/site/src/pages/UsersPage/ResetPasswordDialog.tsx
+++ b/site/src/pages/UsersPage/ResetPasswordDialog.tsx
@@ -36,12 +36,7 @@ export const ResetPasswordDialog: FC<ResetPasswordDialogProps> = ({
 			<CodeExample
 				secret={false}
 				code={newPassword ?? ""}
-				css={{
-					minHeight: "auto",
-					userSelect: "all",
-					width: "100%",
-					marginTop: 24,
-				}}
+				className="min-h-auto select-all w-full mt-6"
 			/>
 		</>
 	);

From 72a3f0f794768ac9cb2131287f9de3079c104c66 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 09:33:07 +0000
Subject: [PATCH 25/29] fix: resolve `<IconsPage />`

---
 site/src/pages/IconsPage/IconsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
index 0879d537d2b5f..763ab11076959 100644
--- a/site/src/pages/IconsPage/IconsPage.tsx
+++ b/site/src/pages/IconsPage/IconsPage.tsx
@@ -154,7 +154,7 @@ const IconsPage: FC = () => {
 										theme.externalImages,
 										defaultParametersForBuiltinIcons.get(icon.url) ?? "",
 									)}
-									className="w-15 h-15 object-contain pointer-events-none p-3"
+									className="w-[60px] h-[60px] object-contain pointer-events-none p-3"
 								/>
 								<figcaption className="w-22 h-12 text-[13px] text-center truncate">
 									{icon.description}

From 84b74827659189f3d43e102e201685c57e8e7292 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 09:44:17 +0000
Subject: [PATCH 26/29] fix: resolve wrapping

---
 site/src/components/Filter/Filter.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
index 6580d8a9a26e3..663af022f211c 100644
--- a/site/src/components/Filter/Filter.tsx
+++ b/site/src/components/Filter/Filter.tsx
@@ -175,9 +175,7 @@ export const Filter: FC<FilterProps> = ({
 	learnMoreLabel2,
 	learnMoreLink2,
 	presets,
-	singleRowBreakpoint = "lg",
 }) => {
-	const theme = useTheme();
 	// Storing local copy of the filter query so that it can be updated more
 	// aggressively without re-renders rippling out to the rest of the app every
 	// single time. Exists for performance reasons - not really a good way to
@@ -201,7 +199,7 @@ export const Filter: FC<FilterProps> = ({
 	const shouldDisplayError = hasError(error) && isApiValidationError(error);
 
 	return (
-		<div className="flex gap-2 mb-4 flex-nowrap lg:flex-wrap">
+		<div className="flex gap-2 mb-4 flex-wrap lg:flex-nowrap">
 			{isLoading ? (
 				<>
 					<BaseSkeleton className="w-full" />

From cc63af3a2bc9010d7e65ee999ea993c657ebe090 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 10:40:33 +0000
Subject: [PATCH 27/29] feat: resolve layout issues

---
 site/src/modules/provisioners/Provisioner.tsx  |  4 ++--
 .../WorkspaceBuildData/WorkspaceBuildData.tsx  |  2 +-
 .../WorkspaceDeleteDialog.tsx                  |  2 +-
 .../AnnouncementBannerSettings.tsx             |  2 +-
 site/src/pages/HealthPage/Content.tsx          | 18 ++++++++++++------
 site/src/pages/HealthPage/DERPRegionPage.tsx   |  2 +-
 .../pages/HealthPage/WorkspaceProxyPage.tsx    |  2 +-
 site/src/pages/IconsPage/IconsPage.tsx         |  2 +-
 .../src/pages/LoginPage/PasswordSignInForm.tsx |  2 +-
 .../ResetPasswordPage/ChangePasswordPage.tsx   |  2 +-
 .../pages/ResetPasswordPage/RequestOTPPage.tsx |  2 +-
 site/src/pages/SetupPage/SetupPageView.tsx     |  2 +-
 .../TemplateInsightsPage/WeekPicker.tsx        |  2 +-
 .../ProvisionerTagsPopover.tsx                 |  2 +-
 .../ExternalAuthPage/ExternalAuthPageView.tsx  |  2 +-
 site/src/pages/UserSettingsPage/Section.tsx    |  4 +++-
 .../WorkspaceProxyPage/WorkspaceProxyRow.tsx   |  2 +-
 site/src/pages/WorkspaceBuildPage/Sidebar.tsx  |  6 +++---
 .../WorkspaceBuildLogsSection.tsx              |  2 +-
 19 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/site/src/modules/provisioners/Provisioner.tsx b/site/src/modules/provisioners/Provisioner.tsx
index 3d499fd451668..6dec571b73e12 100644
--- a/site/src/modules/provisioners/Provisioner.tsx
+++ b/site/src/modules/provisioners/Provisioner.tsx
@@ -36,7 +36,7 @@ export const Provisioner: FC<ProvisionerProps> = ({
 	return (
 		<div
 			key={provisioner.name}
-			className="rounded-lg text-md leading-none"
+			className="rounded-lg text-sm leading-none"
 			css={[
 				{
 					border: `1px solid ${theme.palette.divider}`,
@@ -73,7 +73,7 @@ export const Provisioner: FC<ProvisionerProps> = ({
 					borderTop: `1px solid ${theme.palette.divider}`,
 					color: theme.palette.text.secondary,
 				}}
-				className="flex items-center justify-between py-2 px-6 text-sm leading-none"
+				className="flex items-center justify-between py-2 px-6 text-xs leading-loose"
 			>
 				{warnings && warnings.length > 0 ? (
 					<div className="flex flex-col">
diff --git a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx
index b396b05fc4890..8aa6e10a61939 100644
--- a/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx
+++ b/site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx
@@ -61,7 +61,7 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
 					css={{
 						color: theme.palette.text.secondary,
 					}}
-					className="text-sm leading-none"
+					className="text-xs leading-[18px]"
 				>
 					{createDayString(build.created_at)}
 				</div>
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
index 1ed7e573165db..2ff6982ae64eb 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
@@ -115,7 +115,7 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 							<div css={styles.warnContainer}>
 								<div className="flex flex-col">
 									<p className="info">This workspace is related to a task</p>
-									<span className="text-xs leading-none mt-1 block">
+									<span className="text-xs mt-1 block">
 										Deleting this workspace will also delete{" "}
 										<Link
 											href={`/tasks/${workspace.owner_name}/${workspace.task_id}`}
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
index 1c9c9f01ce2ee..97c21e2f15ead 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
@@ -93,7 +93,7 @@ export const AnnouncementBannerSettings: FC<
 						css={{
 							color: theme.palette.text.secondary,
 						}}
-						className="text-sm mt-2 leading-none"
+						className="text-sm leading-none"
 					>
 						Display message banners to all users.
 					</div>
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
index b1f2e8bd4c61c..911ebc49974c4 100644
--- a/site/src/pages/HealthPage/Content.tsx
+++ b/site/src/pages/HealthPage/Content.tsx
@@ -35,11 +35,11 @@ export const Header: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 export const HeaderTitle: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 	return (
 		<h2
+			{...props}
 			className={cn(
 				"m-0 leading-tight text-xl font-medium flex items-center gap-4",
 				props.className,
 			)}
-			{...props}
 		/>
 	);
 };
@@ -89,7 +89,7 @@ export const Main: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 export const GridData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 	return (
 		<div
-			className="leading-snug grid grid-cols-[auto_auto] gap-x-3 gap-y-12 min-w-min whitespace-nowrap"
+			className="leading-snug grid grid-cols-[auto_auto] gap-x-12 gap-y-3 w-min whitespace-nowrap"
 			{...props}
 		/>
 	);
@@ -102,7 +102,7 @@ export const GridDataLabel: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 			css={{
 				color: theme.palette.text.secondary,
 			}}
-			className="text-sm font-medium leading-none"
+			className="text-sm font-medium leading-snug"
 			{...props}
 		/>
 	);
@@ -115,7 +115,7 @@ export const GridDataValue: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 			css={{
 				color: theme.palette.text.primary,
 			}}
-			className="text-sm leading-none"
+			className="text-sm leading-none leading-snug"
 			{...props}
 		/>
 	);
@@ -141,8 +141,11 @@ export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
 			css={{
 				border: `1px solid ${theme.palette.divider}`,
 			}}
-			className="inline-flex items-center h-8 rounded-full text-xs font-medium gap-2 p-2 cursor-default"
 			{...divProps}
+			className={cn(
+				"inline-flex items-center h-8 rounded-full text-xs font-medium gap-2 p-2 cursor-default",
+				divProps.className,
+			)}
 		>
 			{cloneElement(icon, { className: "size-[14px]" })}
 			{children}
@@ -188,8 +191,11 @@ export const Logs: FC<LogsProps> = ({ lines, ...divProps }) => {
 			css={{
 				backgroundColor: theme.palette.background.paper,
 			}}
-			className="font-mono text-[13px] leading-[160%] p-6 overflow-x-auto whitespace-pre-wrap break-all"
 			{...divProps}
+			className={cn(
+				"font-mono text-[13px] leading-[160%] p-6 overflow-x-auto whitespace-pre-wrap break-all",
+				divProps.className,
+			)}
 		>
 			{lines.map((line, index) => (
 				<span className="block" key={index}>
diff --git a/site/src/pages/HealthPage/DERPRegionPage.tsx b/site/src/pages/HealthPage/DERPRegionPage.tsx
index 30907320838d1..cc89b3f5f4e25 100644
--- a/site/src/pages/HealthPage/DERPRegionPage.tsx
+++ b/site/src/pages/HealthPage/DERPRegionPage.tsx
@@ -58,7 +58,7 @@ const DERPRegionPage: FC = () => {
 						<ChevronLeftIcon className="size-icon-xs align-middle mr-2" />
 						Back to DERP
 					</Link>
-					<HeaderTitle>
+					<HeaderTitle className="leading-tight">
 						<HealthyDot severity={severity as HealthSeverity} />
 						{region!.RegionName}
 					</HeaderTitle>
diff --git a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
index 9aeb3f82ef041..bbb01d4729731 100644
--- a/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
+++ b/site/src/pages/HealthPage/WorkspaceProxyPage.tsx
@@ -133,7 +133,7 @@ const WorkspaceProxyPage: FC = () => {
 									borderTop: `1px solid ${theme.palette.divider}`,
 									color: theme.palette.text.secondary,
 								}}
-								className="flex items-center justify-between py-2 px-4 text-xs leading-none"
+								className="flex items-center justify-between py-2.5 px-6 text-xs leading-relaxed"
 							>
 								{region.status?.status === "unregistered" ? (
 									<span>Has not connected yet</span>
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
index 763ab11076959..c4d2c911952ab 100644
--- a/site/src/pages/IconsPage/IconsPage.tsx
+++ b/site/src/pages/IconsPage/IconsPage.tsx
@@ -156,7 +156,7 @@ const IconsPage: FC = () => {
 									)}
 									className="w-[60px] h-[60px] object-contain pointer-events-none p-3"
 								/>
-								<figcaption className="w-22 h-12 text-[13px] text-center truncate">
+								<figcaption className="w-[88px] h-12 text-[13px] text-center text-ellipsis overflow-hidden">
 									{icon.description}
 								</figcaption>
 							</div>
diff --git a/site/src/pages/LoginPage/PasswordSignInForm.tsx b/site/src/pages/LoginPage/PasswordSignInForm.tsx
index 749828953f848..417413949f473 100644
--- a/site/src/pages/LoginPage/PasswordSignInForm.tsx
+++ b/site/src/pages/LoginPage/PasswordSignInForm.tsx
@@ -72,7 +72,7 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
 				<Link
 					component={RouterLink}
 					to="/reset-password"
-					className="text-sm font-medium leading-4"
+					className="text-xs font-medium leading-4"
 				>
 					Forgot password?
 				</Link>
diff --git a/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
index bbf0ea2ba4658..94987b9dbc531 100644
--- a/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
+++ b/site/src/pages/ResetPasswordPage/ChangePasswordPage.tsx
@@ -70,7 +70,7 @@ const ChangePasswordPage: FC<ChangePasswordChangeProps> = ({ redirect }) => {
 			<div css={styles.root}>
 				<main css={styles.container}>
 					<CustomLogo css={styles.logo} />
-					<h1 className="m-0 mb-6 text-lg font-semibold leading-7">
+					<h1 className="m-0 mb-6 text-xl font-semibold leading-7">
 						Choose a new password
 					</h1>
 					{changePasswordMutation.error &&
diff --git a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
index 02e7c1c60d664..f0b296505eb32 100644
--- a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
+++ b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
@@ -54,7 +54,7 @@ const RequestOTP: FC<RequestOTPProps> = ({
 	return (
 		<div css={styles.container}>
 			<div>
-				<h1 className="m-0 mb-6 text-lg font-semibold leading-7">
+				<h1 className="m-0 mb-6 text-xl font-semibold leading-7">
 					Enter your email to reset the password
 				</h1>
 				{error ? <ErrorAlert error={error} className="mb-6" /> : null}
diff --git a/site/src/pages/SetupPage/SetupPageView.tsx b/site/src/pages/SetupPage/SetupPageView.tsx
index 97a89fc29ae78..84995666f4fcb 100644
--- a/site/src/pages/SetupPage/SetupPageView.tsx
+++ b/site/src/pages/SetupPage/SetupPageView.tsx
@@ -207,7 +207,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
 							size="small"
 						/>
 
-						<div className="text-sm leading-none pt-1">
+						<div className="text-sm leading-loose pt-1">
 							<span className="block font-semibold">
 								Start a free trial of Enterprise
 							</span>
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
index 82a59c7aedafe..3b2b845e08161 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/WeekPicker.tsx
@@ -65,7 +65,7 @@ export const WeekPicker: FC<WeekPickerProps> = ({ value, onChange }) => {
 					return (
 						<MenuItem
 							css={{ fontSize: 14 }}
-							className="text-sm justify-between leading-normal"
+							className="text-sm justify-between leading-relaxed"
 							key={option}
 							onClick={() => {
 								onChange(optionRange);
diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
index 545468812edba..14ec625e3327f 100644
--- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.tsx
@@ -27,7 +27,7 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
-				<TopbarButton color="neutral" className="px-0 !min-w-[28px]">
+				<TopbarButton color="neutral" className="!min-w-[28px]">
 					<ChevronDownIcon className="size-icon-xs" />
 					<span className="sr-only">Expand provisioner tags</span>
 				</TopbarButton>
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index 879fb4c7b8809..4116944c0f3da 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -152,7 +152,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 
 					{link?.validate_error && (
 						<span>
-							<span css={{ color: theme.palette.error.light }} className="pl-4">
+							<span css={{ color: theme.palette.error.light }} className="pl-3">
 								Error:{" "}
 							</span>
 							{link?.validate_error}
diff --git a/site/src/pages/UserSettingsPage/Section.tsx b/site/src/pages/UserSettingsPage/Section.tsx
index 25cdc54f76c57..0f3de7ae9cf68 100644
--- a/site/src/pages/UserSettingsPage/Section.tsx
+++ b/site/src/pages/UserSettingsPage/Section.tsx
@@ -41,7 +41,9 @@ export const Section: FC<SectionProps> = ({
 						<div>
 							{title && (
 								<Stack direction="row" alignItems="center">
-									<h4 className="text-2xl leading-normal m-0 mb-2">{title}</h4>
+									<h4 className="text-2xl font-medium leading-none m-0 mb-2">
+										{title}
+									</h4>
 									{featureStage && (
 										<FeatureStageBadge
 											contentType={featureStage}
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
index 6b9efe373e679..56e5344a2d070 100644
--- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
+++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -144,7 +144,7 @@ const ProxyMessagesList: FC<ProxyMessagesListProps> = ({ title, messages }) => {
 				borderColor: theme.palette.divider,
 				backgroundColor: theme.palette.background.default,
 			}}
-			className="border-0 border-b border-solid py-4 px-6"
+			className="border-0 border-b border-solid py-4 px-16"
 		>
 			<div
 				id="nested-list-subheader"
diff --git a/site/src/pages/WorkspaceBuildPage/Sidebar.tsx b/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
index 56df404a4dcd3..55ebe191d74ef 100644
--- a/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
+++ b/site/src/pages/WorkspaceBuildPage/Sidebar.tsx
@@ -28,8 +28,8 @@ export const SidebarItem: FC<SidebarItemProps> = ({
 			className={cn(
 				"bg-transparent border-none text-sm w-full text-left",
 				"cursor-pointer py-2.5 px-6",
-				"hover:bg-surface-secondary hover:text-content-primary",
-				active && "none text-content-primary",
+				"hover:bg-surface-tertiary hover:text-content-primary",
+				active && "bg-surface-secondary text-content-primary",
 				!active && "pointer-events-auto text-content-secondary",
 			)}
 			{...attrs}
@@ -45,7 +45,7 @@ export const SidebarCaption: FC<HTMLAttributes<HTMLDivElement>> = ({
 }) => {
 	return (
 		<div
-			className="text-[10px] uppercase font-medium text-content-secondary tracking-widest py-3 px-4"
+			className="text-[10px] uppercase font-medium text-content-secondary tracking-[0.5px] py-3 px-6"
 			{...attrs}
 		>
 			{children}
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
index ab7d50f1491ab..7df7df4c7540c 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildLogsSection.tsx
@@ -15,7 +15,7 @@ export const WorkspaceBuildLogsSection: FC<WorkspaceBuildLogsSectionProps> = ({
 			<header className="bg-surface-secondary border-0 border-b border-solid border-zinc-700 p-2 pl-6 text-[13px] font-semibold flex items-center rounded-t-lg">
 				Build logs
 			</header>
-			<div className="h-100 overflow-y-auto">
+			<div className="h-[400px] overflow-y-auto">
 				{logs ? (
 					<WorkspaceBuildLogs
 						sticky

From 20780ac69ad96ab987e7df0a546d43efb084b588 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Tue, 9 Dec 2025 11:07:40 +0000
Subject: [PATCH 28/29] feat: resolve further layout issues

---
 .../src/components/PaginationWidget/PaginationContainer.tsx | 2 +-
 site/src/components/PaginationWidget/PaginationHeader.tsx   | 2 +-
 site/src/modules/resources/AgentRow.tsx                     | 2 +-
 .../WorkspaceMoreActions/WorkspaceDeleteDialog.tsx          | 2 +-
 .../AppearanceSettingsPage/AnnouncementBannerSettings.tsx   | 6 ++----
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/site/src/components/PaginationWidget/PaginationContainer.tsx b/site/src/components/PaginationWidget/PaginationContainer.tsx
index 5a62578735238..e912f1eb21c58 100644
--- a/site/src/components/PaginationWidget/PaginationContainer.tsx
+++ b/site/src/components/PaginationWidget/PaginationContainer.tsx
@@ -31,7 +31,7 @@ export const PaginationContainer: FC<PaginationProps> = ({
 			<div
 				{...delegatedProps}
 				className={cn(
-					"flex flex-col flex-nowrap row-gap-4",
+					"flex flex-col flex-nowrap gap-y-4",
 					delegatedProps.className,
 				)}
 			>
diff --git a/site/src/components/PaginationWidget/PaginationHeader.tsx b/site/src/components/PaginationWidget/PaginationHeader.tsx
index e52e9929dfccc..9cb8a4f5100f8 100644
--- a/site/src/components/PaginationWidget/PaginationHeader.tsx
+++ b/site/src/components/PaginationWidget/PaginationHeader.tsx
@@ -32,9 +32,9 @@ export const PaginationHeader: FC<PaginationHeaderProps> = ({
 				},
 			}}
 			className={cn(
-				className,
 				"flex flex-nowrap items-center m-0 text-[13px] pb-2",
 				"h-9", // The size of a small button
+				className,
 			)}
 		>
 			{totalRecords !== undefined ? (
diff --git a/site/src/modules/resources/AgentRow.tsx b/site/src/modules/resources/AgentRow.tsx
index 544ef5341bf12..0c490d43da65e 100644
--- a/site/src/modules/resources/AgentRow.tsx
+++ b/site/src/modules/resources/AgentRow.tsx
@@ -296,7 +296,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 			</div>
 
 			{hasStartupFeatures && (
-				<section className="border-0 border-solid border-t border-border-default">
+				<section className="border-0 border-solid border-t border-surface-quaternary">
 					<Collapse in={showLogs}>
 						<AutoSizer disableHeight>
 							{({ width }) => (
diff --git a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
index 2ff6982ae64eb..9f387323a806c 100644
--- a/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
+++ b/site/src/modules/workspaces/WorkspaceMoreActions/WorkspaceDeleteDialog.tsx
@@ -145,7 +145,7 @@ export const WorkspaceDeleteDialog: FC<WorkspaceDeleteDialogProps> = ({
 								</div>
 								<div className="flex flex-col">
 									<p className="info">Orphan Resources</p>
-									<span className="text-xs leading-none mt-1 block">
+									<span className="text-xs leading-[18px] mt-1 block">
 										As a Template Admin, you may skip resource cleanup to delete
 										a failed workspace. Resources such as volumes and virtual
 										machines will not be destroyed.&nbsp;
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
index 97c21e2f15ead..503d4776d4b32 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AnnouncementBannerSettings.tsx
@@ -77,9 +77,7 @@ export const AnnouncementBannerSettings: FC<
 						justifyContent="space-between"
 						alignItems="center"
 					>
-						<h3 className="text-xl font-semibold m-0 leading-none">
-							Announcement Banners
-						</h3>
+						<h3 className="text-xl font-semibold m-0">Announcement Banners</h3>
 						<Button
 							disabled={!isEntitled}
 							onClick={() => addBanner()}
@@ -93,7 +91,7 @@ export const AnnouncementBannerSettings: FC<
 						css={{
 							color: theme.palette.text.secondary,
 						}}
-						className="text-sm leading-none"
+						className="text-sm mt-2"
 					>
 						Display message banners to all users.
 					</div>

From fbd33a7e3a151f7552c11e44334296d35221b828 Mon Sep 17 00:00:00 2001
From: Jake Howell <jake@hwll.me>
Date: Wed, 10 Dec 2025 10:31:03 +0000
Subject: [PATCH 29/29] feat: "v4" of changes (WIP)

---
 site/src/components/Avatar/AvatarCard.tsx     |  20 +---
 .../Dialogs/ConfirmDialog/ConfirmDialog.tsx   |  55 ++-------
 site/src/components/Expander/Expander.tsx     |  32 ++---
 site/src/components/FileUpload/FileUpload.tsx |  22 +---
 site/src/components/Filter/Filter.tsx         |  13 +-
 site/src/components/Filter/SelectFilter.tsx   |   7 +-
 site/src/components/Form/Form.tsx             | 111 ++++--------------
 site/src/components/FullPageLayout/Topbar.tsx |  19 +--
 .../GitDeviceAuth/GitDeviceAuth.tsx           |  65 +++-------
 .../GlobalSnackbar/GlobalSnackbar.tsx         |  34 ++----
 .../components/HelpTooltip/HelpTooltip.tsx    |  84 +++++--------
 site/src/components/Icons/JetBrainsIcon.tsx   |   2 +-
 .../components/InfoTooltip/InfoTooltip.tsx    |   5 +-
 site/src/components/Loader/Loader.tsx         |  31 ++---
 site/src/components/Logs/LogLine.tsx          |  93 ++++++---------
 site/src/components/Logs/Logs.tsx             |  26 ++--
 site/src/components/Margins/Margins.tsx       |   9 +-
 .../components/Markdown/Markdown.stories.tsx  |   8 ++
 site/src/components/Markdown/Markdown.tsx     |  20 ++--
 site/src/components/Menu/MenuSearch.tsx       |  15 ++-
 .../OrganizationAutocomplete.tsx              |   6 +-
 .../OverflowY/OverflowY.stories.tsx           |   2 +-
 site/src/components/OverflowY/OverflowY.tsx   |  13 +-
 .../PageHeader/FullWidthPageHeader.tsx        |  22 +---
 site/src/components/PageHeader/PageHeader.tsx |  15 +--
 .../PaginationWidget/PaginationHeader.tsx     |  10 +-
 site/src/components/Paywall/Paywall.tsx       |  45 ++-----
 .../RichParameterInput/RichParameterInput.tsx |   2 +-
 .../components/Timeline/TimelineDateRow.tsx   |  24 ++--
 .../UserAutocomplete/UserAutocomplete.tsx     |   6 +-
 .../modules/dashboard/Navbar/ProxyMenu.tsx    |  37 ++----
 .../resources/AgentLogs/AgentLogLine.tsx      |  12 +-
 .../VSCodeDevContainerButton.tsx              |   7 +-
 .../TemplateExampleCard.tsx                   | 103 +++++-----------
 .../TemplateVersionEditor.tsx                 |  59 +++-------
 .../src/pages/TerminalPage/TerminalAlerts.tsx |   6 +-
 site/src/pages/TerminalPage/TerminalPage.tsx  |   7 +-
 .../AccountPage/AccountUserGroups.tsx         |   7 +-
 .../ExternalAuthPage/ExternalAuthPageView.tsx |   6 +-
 .../NotificationsPage/NotificationsPage.tsx   |  16 +--
 site/src/pages/UserSettingsPage/Section.tsx   |  25 +---
 .../SecurityPage/SecurityPageView.stories.tsx |   6 +-
 .../SecurityPage/SingleSignOnSection.tsx      |  20 +---
 .../TokensPage/TokensPage.tsx                 |  19 +--
 .../WorkspaceProxyPage/WorkspaceProxyRow.tsx  |  24 +---
 .../UsersPage/UsersTable/UsersTableBody.tsx   |  38 +++---
 .../pages/WorkspacePage/ResourcesSidebar.tsx  |  17 +--
 .../WorkspacePage/WorkspaceBuildProgress.tsx  |  26 +---
 .../WorkspaceNotifications/Notifications.tsx  |  13 +-
 .../pages/WorkspacesPage/WorkspacesButton.tsx |   2 +-
 50 files changed, 385 insertions(+), 881 deletions(-)

diff --git a/site/src/components/Avatar/AvatarCard.tsx b/site/src/components/Avatar/AvatarCard.tsx
index 3b1a4f57c091f..c7f29a66ad616 100644
--- a/site/src/components/Avatar/AvatarCard.tsx
+++ b/site/src/components/Avatar/AvatarCard.tsx
@@ -1,4 +1,3 @@
-import { type CSSObject, useTheme } from "@emotion/react";
 import { Avatar } from "components/Avatar/Avatar";
 import type { FC, ReactNode } from "react";
 import { cn } from "utils/cn";
@@ -16,17 +15,16 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 	subtitle,
 	maxWidth = "none",
 }) => {
-	const theme = useTheme();
-
 	return (
 		<div
 			className={cn(
 				"flex flex-row flex-nowrap items-center gap-4",
-				"p-4 rounded-lg cursor-default border border-solid border-zinc-700",
+				"p-4 rounded-lg cursor-default",
+				"border border-solid border-zinc-200 dark:border-zinc-700",
 			)}
 			// TODO: We don't actually use this prop, so we should remove it.
-			css={{
-				maxWidth: maxWidth === "none" ? undefined : `${maxWidth}px`,
+			style={{
+				...(maxWidth !== "none" ? { maxWidth: `${maxWidth}px` } : {}),
 			}}
 		>
 			{/**
@@ -39,19 +37,13 @@ export const AvatarCard: FC<AvatarCardProps> = ({
 				<h3
 					// Lets users hover over truncated text to see whole thing
 					title={header}
-					css={[theme.typography.body1 as CSSObject]}
-					className="leading-[1.4] m-0 overflow-hidden whitespace-nowrap text-ellipsis"
+					className="leading-[1.4] m-0 overflow-hidden whitespace-nowrap text-ellipsis font-normal text-base"
 				>
 					{header}
 				</h3>
 
 				{subtitle && (
-					<div
-						css={[
-							theme.typography.body2 as CSSObject,
-							{ color: theme.palette.text.secondary },
-						]}
-					>
+					<div className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
 						{subtitle}
 					</div>
 				)}
diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
index 24d4f294ca8dd..6ffd7075a3d10 100644
--- a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
+++ b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx
@@ -1,6 +1,6 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import DialogActions from "@mui/material/DialogActions";
 import type { FC, ReactNode } from "react";
+import { cn } from "utils/cn";
 import {
 	Dialog,
 	DialogActionButtons,
@@ -77,58 +77,21 @@ export const ConfirmDialog: FC<ConfirmDialogProps> = ({
 
 	return (
 		<Dialog
-			css={(theme) => ({
-				"& .MuiPaper-root": {
-					background: theme.palette.background.paper,
-					border: `1px solid ${theme.palette.divider}`,
-					width: "100%",
-					maxWidth: 440,
-				},
-				"& .MuiDialogActions-spacing": {
-					padding: "0 40px 40px",
-				},
-			})}
+			className={cn(
+				"[&_.MuiPaper-root]:bg-surface-secondary [&_.MuiPaper-root]:border",
+				"[&_.MuiPaper-root]:border-solid [&_.MuiPaper-root]:w-full [&_.MuiPaper-root]:max-w-[440px]",
+				"[&_.MuiDialogActions-spacing]:pt-0 [&_.MuiDialogActions-spacing]:px-10 [&_.MuiDialogActions-spacing]:pb-10",
+			)}
 			onClose={onClose}
 			open={open}
 			data-testid="dialog"
 		>
-			<div
-				css={(theme) => ({
-					color: theme.palette.text.secondary,
-					padding: "40px 40px 20px",
-				})}
-			>
-				<h3
-					css={(theme) => ({
-						margin: 0,
-						marginBottom: 16,
-						color: theme.palette.text.primary,
-						fontWeight: 400,
-						fontSize: 20,
-					})}
-				>
+			<div className="pt-10 px-10 pb-5 text-content-secondary">
+				<h3 className="m-0 mb-4 font-normal text-xl text-content-primary">
 					{title}
 				</h3>
 				{description && (
-					<div
-						css={(theme) => ({
-							color: theme.palette.text.secondary,
-							lineHeight: "160%",
-							fontSize: 16,
-
-							"& strong": {
-								color: theme.palette.text.primary,
-							},
-
-							"& p:not(.MuiFormHelperText-root)": {
-								margin: 0,
-							},
-
-							"& > p": {
-								margin: "8px 0",
-							},
-						})}
-					>
+					<div className="text-content-secondary leading-relaxed text-base [&_strong]:text-content-primary [&_p:not(.MuiFormHelperText-root)]:m-0 [&_>p]:my-2">
 						{description}
 					</div>
 				)}
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
index 394f6081e2897..d05bdff2bbab4 100644
--- a/site/src/components/Expander/Expander.tsx
+++ b/site/src/components/Expander/Expander.tsx
@@ -1,8 +1,8 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import type { FC, ReactNode } from "react";
+import { cn } from "utils/cn";
 
 interface ExpanderProps {
 	expanded: boolean;
@@ -20,22 +20,22 @@ export const Expander: FC<ExpanderProps> = ({
 	return (
 		<>
 			{!expanded && (
-				<Link onClick={toggleExpanded} css={styles.expandLink}>
-					<span css={styles.text}>
+				<Link onClick={toggleExpanded} className={classNames.expandLink}>
+					<span className={classNames.text}>
 						Click here to learn more
 						<DropdownArrow margin={false} />
 					</span>
 				</Link>
 			)}
 			<Collapse in={expanded}>
-				<div css={styles.text}>{children}</div>
+				<div className={classNames.text}>{children}</div>
 			</Collapse>
 			{expanded && (
 				<Link
 					onClick={toggleExpanded}
-					css={[styles.expandLink, styles.collapseLink]}
+					className={cn([classNames.expandLink, classNames.collapseLink])}
 				>
-					<span css={styles.text}>
+					<span className={classNames.text}>
 						Click here to hide
 						<DropdownArrow margin={false} close />
 					</span>
@@ -45,18 +45,8 @@ export const Expander: FC<ExpanderProps> = ({
 	);
 };
 
-const styles = {
-	expandLink: (theme) => ({
-		cursor: "pointer",
-		color: theme.palette.text.secondary,
-	}),
-	collapseLink: {
-		marginTop: 16,
-	},
-	text: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		color: theme.palette.text.secondary,
-		fontSize: theme.typography.caption.fontSize,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	expandLink: "cursor-pointer text-content-secondary",
+	collapseLink: "mt-4",
+	text: "flex items-center text-content-secondary text-xs leading-loose",
+};
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
index 037503a906d20..d4afb2ccd13f4 100644
--- a/site/src/components/FileUpload/FileUpload.tsx
+++ b/site/src/components/FileUpload/FileUpload.tsx
@@ -37,11 +37,7 @@ export const FileUpload: FC<FileUploadProps> = ({
 	if (!isUploading && file) {
 		return (
 			<Stack
-				css={(theme) => ({
-					border: `1px solid ${theme.palette.divider}`,
-					background: theme.palette.background.paper,
-				})}
-				className="rounded-lg p-4"
+				className="rounded-lg p-4 border border-solid bg-surface-secondary"
 				direction="row"
 				justifyContent="space-between"
 				alignItems="center"
@@ -62,16 +58,9 @@ export const FileUpload: FC<FileUploadProps> = ({
 		<>
 			<div
 				data-testid="drop-zone"
-				css={[
-					(theme) => css`
-						border: 2px dashed ${theme.palette.divider};
-						&:hover {
-						background-color: ${theme.palette.background.paper};
-						}
-					`,
-				]}
 				className={cn(
 					"flex items-center justify-center rounded-lg p-12 cursor-pointer",
+					"border-2 border-dashed hover:bg-surface-secondary",
 					isUploading && "pointer-events-none opacity-75",
 				)}
 				{...clickable}
@@ -91,12 +80,7 @@ export const FileUpload: FC<FileUploadProps> = ({
 
 					<Stack alignItems="center" spacing={0.5}>
 						<span className="text-base leading-none">{title}</span>
-						<span
-							css={(theme) => ({
-								color: theme.palette.text.secondary,
-							})}
-							className="text-center max-w-[400px] text-sm leading-normal mt-1"
-						>
+						<span className="text-center text-content-secondary max-w-[400px] text-sm leading-normal mt-1">
 							{description}
 						</span>
 					</Stack>
diff --git a/site/src/components/Filter/Filter.tsx b/site/src/components/Filter/Filter.tsx
index 663af022f211c..c4d2610f463df 100644
--- a/site/src/components/Filter/Filter.tsx
+++ b/site/src/components/Filter/Filter.tsx
@@ -132,10 +132,7 @@ const BaseSkeleton: FC<SkeletonProps> = ({ children, ...skeletonProps }) => {
 			variant="rectangular"
 			height={36}
 			{...skeletonProps}
-			css={(theme) => ({
-				backgroundColor: theme.palette.background.paper,
-			})}
-			className={cn("rounded-md", skeletonProps.className)}
+			className={cn("rounded-md bg-surface-secondary", skeletonProps.className)}
 		>
 			{children}
 		</Skeleton>
@@ -290,11 +287,11 @@ const PresetMenu: FC<PresetMenuProps> = ({
 					vertical: "top",
 					horizontal: "left",
 				}}
-				css={{ "& .MuiMenu-paper": { paddingTop: 8, paddingBottom: 8 } }}
+				className="[&_.MuiMenu-paper]:py-2"
 			>
 				{presets.map((presetFilter) => (
 					<MenuItem
-						className="text-sm leading-none"
+						className="text-sm leading-relaxed"
 						key={presetFilter.name}
 						onClick={() => {
 							onSelect(presetFilter.query);
@@ -304,9 +301,7 @@ const PresetMenu: FC<PresetMenuProps> = ({
 						{presetFilter.name}
 					</MenuItem>
 				))}
-				{learnMoreLink && (
-					<Divider css={{ borderColor: theme.palette.divider }} />
-				)}
+				{learnMoreLink && <Divider />}
 				{learnMoreLink && (
 					<MenuItem
 						component="a"
diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index 4f13c8684ad96..9b9093c94497f 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -95,12 +95,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 							})}
 						</SelectMenuList>
 					) : (
-						<div
-							css={(theme) => ({
-								color: theme.palette.text.secondary,
-							})}
-							className="flex items-center justify-center p-8 leading-none"
-						>
+						<div className="flex items-center justify-center p-8 leading-none text-content-secondary">
 							{emptyText || "No options found"}
 						</div>
 					)
diff --git a/site/src/components/Form/Form.tsx b/site/src/components/Form/Form.tsx
index 08c0b3fffc2db..b59e528b3b1d1 100644
--- a/site/src/components/Form/Form.tsx
+++ b/site/src/components/Form/Form.tsx
@@ -1,4 +1,3 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -23,19 +22,15 @@ type FormProps = HTMLProps<HTMLFormElement> & {
 };
 
 export const Form: FC<FormProps> = ({ direction, ...formProps }) => {
-	const theme = useTheme();
-
 	return (
 		<FormContext.Provider value={{ direction }}>
 			<form
 				{...formProps}
-				className="flex flex-col"
-				css={{
-					gap: direction === "horizontal" ? 80 : 40,
-					[theme.breakpoints.down("md")]: {
-						gap: 64,
-					},
-				}}
+				className={cn(
+					"flex flex-col gap-16",
+					direction === "horizontal" && "md:gap-80",
+					direction !== "horizontal" && "md:gap-40",
+				)}
 			/>
 		</FormContext.Provider>
 	);
@@ -93,25 +88,33 @@ export const FormSection = forwardRef<HTMLDivElement, FormSectionProps>(
 		return (
 			<section
 				ref={ref}
-				css={[
-					styles.formSection,
-					direction === "horizontal" && styles.formSectionHorizontal,
-				]}
-				className={classes.root}
+				className={cn(
+					classes.root,
+					"flex flex-col items-start gap-4 lg:gap-6",
+					direction === "horizontal" && "flex-row gap-30",
+				)}
 			>
 				<div
-					css={[
-						styles.formSectionInfo,
-						direction === "horizontal" && styles.formSectionInfoHorizontal,
-					]}
-					className={classes.sectionInfo}
+					className={cn(
+						classes.sectionInfo,
+						"w-full position-[initial] top-6 flex-shrink-0",
+						direction === "horizontal" && "max-w-[312px] lg:sticky",
+					)}
 				>
-					<h2 css={styles.formSectionInfoTitle} className={classes.infoTitle}>
+					<h2
+						className={cn(
+							classes.infoTitle,
+							"text-2xl text-content-primary font-medium m-0 mb-2",
+							"flex flex-row items-center gap-3",
+						)}
+					>
 						{title}
 						{alpha && <AlphaBadge />}
 						{deprecated && <DeprecatedBadge />}
 					</h2>
-					<div css={styles.formSectionInfoDescription}>{description}</div>
+					<div className={"text-content-secondary text-sm leading-relaxed m-0"}>
+						{description}
+					</div>
 				</div>
 
 				{children}
@@ -122,72 +125,10 @@ export const FormSection = forwardRef<HTMLDivElement, FormSectionProps>(
 
 export const FormFields: FC<ComponentProps<typeof Stack>> = (props) => {
 	return (
-		<Stack
-			direction="column"
-			spacing={3}
-			{...props}
-			css={styles.formSectionFields}
-		/>
+		<Stack direction="column" spacing={3} {...props} className={"w-full"} />
 	);
 };
 
-const styles = {
-	formSection: (theme) => ({
-		display: "flex",
-		alignItems: "flex-start",
-		flexDirection: "column",
-		gap: 24,
-
-		[theme.breakpoints.down("lg")]: {
-			flexDirection: "column",
-			gap: 16,
-		},
-	}),
-	formSectionHorizontal: {
-		flexDirection: "row",
-		gap: 120,
-	},
-	formSectionInfo: (theme) => ({
-		width: "100%",
-		flexShrink: 0,
-		top: 24,
-
-		[theme.breakpoints.down("md")]: {
-			width: "100%",
-			position: "initial" as const,
-		},
-	}),
-	formSectionInfoHorizontal: (theme) => ({
-		maxWidth: 312,
-
-		[theme.breakpoints.up("lg")]: {
-			position: "sticky",
-		},
-	}),
-	formSectionInfoTitle: (theme) => ({
-		fontSize: 20,
-		color: theme.palette.text.primary,
-		fontWeight: 500,
-		margin: 0,
-		marginBottom: 8,
-		display: "flex",
-		flexDirection: "row",
-		alignItems: "center",
-		gap: 12,
-	}),
-
-	formSectionInfoDescription: (theme) => ({
-		fontSize: 14,
-		color: theme.palette.text.secondary,
-		lineHeight: "160%",
-		margin: 0,
-	}),
-
-	formSectionFields: {
-		width: "100%",
-	},
-} satisfies Record<string, Interpolation<Theme>>;
-
 export const FormFooter: FC<HTMLProps<HTMLDivElement>> = ({
 	className,
 	...props
diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
index 54a824b6358ed..f2d7ba4b0c356 100644
--- a/site/src/components/FullPageLayout/Topbar.tsx
+++ b/site/src/components/FullPageLayout/Topbar.tsx
@@ -14,16 +14,12 @@ import {
 import { cn } from "utils/cn";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
-	const theme = useTheme();
-
 	return (
 		<header
 			{...props}
-			css={{
-				borderBottom: `1px solid ${theme.palette.divider}`,
-			}}
 			className={cn(
 				"min-h-12 flex items-center text-[13px] leading-tight",
+				"border-0 border-b border-solid",
 				props.className,
 			)}
 		/>
@@ -37,12 +33,10 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 				ref={ref}
 				{...props}
 				size="small"
-				css={{
-					"& svg": {
-						fontSize: 20,
-					},
-				}}
-				className={cn("p-0 rounded-none size-12", props.className)}
+				className={cn(
+					"p-0 rounded-none size-12 [&_svg]:text-xl leading-none",
+					props.className,
+				)}
 			/>
 		);
 	},
@@ -59,9 +53,8 @@ export const TopbarData: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
 };
 
 export const TopbarDivider: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
-	const theme = useTheme();
 	return (
-		<span {...props} css={{ color: theme.palette.divider }}>
+		<span {...props} className={cn("text-surface-quaternary", props.className)}>
 			/
 		</span>
 	);
diff --git a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
index 7b3d8091abfeb..58aebaaf54f78 100644
--- a/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
+++ b/site/src/components/GitDeviceAuth/GitDeviceAuth.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import AlertTitle from "@mui/material/AlertTitle";
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
@@ -73,7 +72,7 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 	deviceExchangeError,
 }) => {
 	let status = (
-		<p css={styles.status}>
+		<p className={classNames.status}>
 			<CircularProgress size={16} color="secondary" data-chromatic="ignore" />
 			Checking for authentication...
 		</p>
@@ -130,10 +129,12 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 
 	return (
 		<div>
-			<p css={styles.text}>
+			<p className={classNames.text}>
 				Copy your one-time code:&nbsp;
-				<div css={styles.copyCode}>
-					<span css={styles.code}>{externalAuthDevice.user_code}</span>
+				<div className={classNames.copyCode}>
+					<span className={classNames.code}>
+						{externalAuthDevice.user_code}
+					</span>
 					&nbsp;{" "}
 					<CopyButton
 						text={externalAuthDevice.user_code}
@@ -143,9 +144,9 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 				<br />
 				Then open the link below and paste it:
 			</p>
-			<div css={styles.links}>
+			<div className={classNames.links}>
 				<Link
-					css={styles.link}
+					className={classNames.link}
 					href={externalAuthDevice.verification_uri}
 					target="_blank"
 					rel="noreferrer"
@@ -160,45 +161,11 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 	);
 };
 
-const styles = {
-	text: (theme) => ({
-		fontSize: 16,
-		color: theme.palette.text.secondary,
-		textAlign: "center",
-		lineHeight: "160%",
-		margin: 0,
-	}),
-
-	copyCode: {
-		display: "inline-flex",
-		alignItems: "center",
-	},
-
-	code: (theme) => ({
-		fontWeight: "bold",
-		color: theme.palette.text.primary,
-	}),
-
-	links: {
-		display: "flex",
-		gap: 4,
-		margin: 16,
-		flexDirection: "column",
-	},
-
-	link: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		fontSize: 16,
-		gap: 8,
-	},
-
-	status: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-		gap: 8,
-		color: theme.palette.text.disabled,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	text: "text-base text-content-secondary text-center leading-relaxed m-0",
+	copyCode: "inline-flex items-center",
+	code: "font-bold text-content-primary",
+	links: "flex flex-col gap-1 m-4",
+	link: "flex items-center justify-center font-base gap-2",
+	status: "flex items-center justify-center gap-2 text-content-disabled",
+};
diff --git a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
index 9eed091766c6a..916f4c6e6b870 100644
--- a/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
+++ b/site/src/components/GlobalSnackbar/GlobalSnackbar.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { useCustomEvent } from "hooks/events";
 import { type FC, useState } from "react";
 import { ErrorIcon } from "../Icons/ErrorIcon";
@@ -48,11 +47,13 @@ export const GlobalSnackbar: FC = () => {
 			message={
 				<div className="flex">
 					{notificationMsg.msgType === MsgType.Error && (
-						<ErrorIcon css={styles.errorIcon} />
+						<ErrorIcon className={classNames.errorIcon} />
 					)}
 
 					<div className="max-w-[670px] flex flex-col">
-						<span css={styles.messageTitle}>{notificationMsg.msg}</span>
+						<span className={classNames.messageTitle}>
+							{notificationMsg.msg}
+						</span>
 
 						{notificationMsg.additionalMsgs?.map((msg, index) => (
 							<AdditionalMessageDisplay key={index} message={msg} />
@@ -72,12 +73,12 @@ const AdditionalMessageDisplay: FC<AdditionalMessageDisplayProps> = ({
 	message,
 }) => {
 	if (isNotificationText(message)) {
-		return <span css={styles.messageSubtitle}>{message}</span>;
+		return <span className={classNames.messageSubtitle}>{message}</span>;
 	}
 
 	if (isNotificationTextPrefixed(message)) {
 		return (
-			<span css={styles.messageSubtitle}>
+			<span className={classNames.messageSubtitle}>
 				<strong>{message.prefix}:</strong> {message.text}
 			</span>
 		);
@@ -88,7 +89,7 @@ const AdditionalMessageDisplay: FC<AdditionalMessageDisplayProps> = ({
 			<ul className="pl-0">
 				{message.map((item, idx) => (
 					<li key={idx}>
-						<span css={styles.messageSubtitle}>{item}</span>
+						<span className={classNames.messageSubtitle}>{item}</span>
 					</li>
 				))}
 			</ul>
@@ -98,19 +99,8 @@ const AdditionalMessageDisplay: FC<AdditionalMessageDisplayProps> = ({
 	return null;
 };
 
-const styles = {
-	messageTitle: {
-		fontSize: 14,
-		fontWeight: 600,
-	},
-	messageSubtitle: {
-		marginTop: 4,
-		"&:first-letter": {
-			textTransform: "uppercase",
-		},
-	},
-	errorIcon: (theme) => ({
-		color: theme.palette.error.contrastText,
-		marginRight: 16,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	messageTitle: "text-sm font-semibold",
+	messageSubtitle: "mt-1 first-letter:uppercase",
+	errorIcon: "text-content-destructive mr-4",
+};
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 7d433e08b4c13..e446e8b38f249 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -75,16 +75,12 @@ export const HelpTooltipIconTrigger = forwardRef<
 				{...buttonProps}
 				aria-label="More info"
 				ref={ref}
-				css={[
-					css`
-						& svg {
-							width: ${getIconSpacingFromSize(size)}px;
-							height: ${getIconSpacingFromSize(size)}px;
-						}
-					`,
-				]}
+				style={{
+					"--icon-spacing": `${getIconSpacingFromSize(size)}px`,
+				}}
 				className={cn(
-					"flex items-center justify-center py-1 px-0 border-none bg-transparent cursor-pointer text-inherit",
+					"flex items-center justify-center py-1 px-0 border-none bg-transparent",
+					"cursor-pointer text-inherit [&_svg]:size-[var(--icon-spacing)]",
 					hoverEffect && "opacity-50 hover:opacity-75",
 					buttonProps.className,
 				)}
@@ -100,7 +96,7 @@ export const HelpTooltipTitle: FC<HTMLAttributes<HTMLHeadingElement>> = ({
 	...attrs
 }) => {
 	return (
-		<h4 css={styles.title} {...attrs}>
+		<h4 className={classNames.title} {...attrs}>
 			{children}
 		</h4>
 	);
@@ -111,7 +107,7 @@ export const HelpTooltipText: FC<HTMLAttributes<HTMLParagraphElement>> = ({
 	...attrs
 }) => {
 	return (
-		<p css={styles.text} {...attrs}>
+		<p className={classNames.text} css={styles.text} {...attrs}>
 			{children}
 		</p>
 	);
@@ -124,8 +120,14 @@ interface HelpTooltipLink {
 
 export const HelpTooltipLink: FC<HelpTooltipLink> = ({ children, href }) => {
 	return (
-		<Link href={href} target="_blank" rel="noreferrer" css={styles.link}>
-			<ExternalLinkIcon className="size-icon-xs" css={styles.linkIcon} />
+		<Link
+			href={href}
+			target="_blank"
+			rel="noreferrer"
+			className={classNames.link}
+			css={styles.link}
+		>
+			<ExternalLinkIcon className={classNames.linkIcon} />
 			{children}
 		</Link>
 	);
@@ -148,10 +150,11 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
 		<button
 			type="button"
 			aria-label={ariaLabel ?? ""}
+			className={classNames.action}
 			css={styles.action}
 			onClick={onClick}
 		>
-			<Icon css={styles.actionIcon} />
+			<Icon className={classNames.actionIcon} />
 			{children}
 		</button>
 	);
@@ -159,7 +162,7 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
 
 export const HelpTooltipLinksGroup: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<Stack spacing={1} css={styles.linksGroup}>
+		<Stack spacing={1} className={classNames.linksGroup}>
 			{children}
 		</Stack>
 	);
@@ -174,55 +177,26 @@ const getIconSpacingFromSize = (size?: Size): number => {
 	}
 };
 
-const styles = {
-	title: (theme) => ({
-		marginTop: 0,
-		marginBottom: 8,
-		color: theme.palette.text.primary,
-		fontSize: 14,
-		lineHeight: "150%",
-		fontWeight: 600,
-	}),
+const classNames = {
+	title: "mt-0 mb-2 text-content-primary text-sm leading-relaxed font-semibold",
+	text: "my-1",
+	link: "flex items-center",
+	linkIcon: "size-icon-xs mr-2 text-inherit",
+	linksGroup: "mt-4",
+	action:
+		"flex items-center bg-transparent border-none p-0 cursor-pointer text-sm",
+	actionIcon: "text-inherit size-3.5 mr-2",
+};
 
+const styles = {
 	text: (theme) => ({
-		marginTop: 4,
-		marginBottom: 4,
 		...(theme.typography.body2 as CSSObject),
 	}),
-
 	link: (theme) => ({
-		display: "flex",
-		alignItems: "center",
 		...(theme.typography.body2 as CSSObject),
 		color: theme.roles.active.fill.outline,
 	}),
-
-	linkIcon: {
-		color: "inherit",
-		width: 14,
-		height: 14,
-		marginRight: 8,
-	},
-
-	linksGroup: {
-		marginTop: 16,
-	},
-
 	action: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		background: "none",
-		border: 0,
 		color: theme.palette.primary.light,
-		padding: 0,
-		cursor: "pointer",
-		fontSize: 14,
 	}),
-
-	actionIcon: {
-		color: "inherit",
-		width: 14,
-		height: 14,
-		marginRight: 8,
-	},
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Icons/JetBrainsIcon.tsx b/site/src/components/Icons/JetBrainsIcon.tsx
index 033f65186a3ab..ddaebd031628f 100644
--- a/site/src/components/Icons/JetBrainsIcon.tsx
+++ b/site/src/components/Icons/JetBrainsIcon.tsx
@@ -24,7 +24,7 @@ export const JetBrainsIcon = (props: SvgIconProps): JSX.Element => (
                25.59l85.73-58.84a7.35 7.35 0 0 0 3.17-6.05z"
 				fill="#fff"
 			/>
-			<path d="m60 60h60v60h-60z" css={{ fill: "#000 !important" }} />
+			<path d="m60 60h60v60h-60z" style={{ fill: "#000000 !important" }} />
 			<g fill="#fff">
 				<path d="m66.53 108.75h22.5v3.75h-22.5z" />
 				<path
diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 872d5c3ed0e88..3fa4262875a37 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -30,7 +30,10 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
 				size="small"
 				className="opacity-100 hover:opacity-100"
 			>
-				<HelpTooltipIcon css={{ color: iconColor }} />
+				<HelpTooltipIcon
+					style={{ "--icon-color": iconColor }}
+					className="text-[var(--icon-color)]"
+				/>
 			</HelpTooltipIconTrigger>
 			<HelpTooltipContent>
 				<HelpTooltipTitle>{title}</HelpTooltipTitle>
diff --git a/site/src/components/Loader/Loader.tsx b/site/src/components/Loader/Loader.tsx
index 8fd43c2010e32..418e4da74a7c8 100644
--- a/site/src/components/Loader/Loader.tsx
+++ b/site/src/components/Loader/Loader.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import { Spinner } from "components/Spinner/Spinner";
 import type { FC, HTMLAttributes } from "react";
 import { cn } from "utils/cn";
@@ -20,7 +19,10 @@ export const Loader: FC<LoaderProps> = ({
 }) => {
 	return (
 		<div
-			css={fullscreen ? styles.fullscreen : styles.inline}
+			className={cn(
+				fullscreen && classNames.fullscreen,
+				!fullscreen && classNames.inline,
+			)}
 			data-testid="loader"
 			{...attrs}
 		>
@@ -29,23 +31,8 @@ export const Loader: FC<LoaderProps> = ({
 	);
 };
 
-const styles = {
-	inline: {
-		padding: 32,
-		width: "100%",
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "center",
-	},
-	fullscreen: (theme) => ({
-		position: "absolute",
-		top: "0",
-		left: "0",
-		right: "0",
-		bottom: "0",
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center",
-		background: theme.palette.background.default,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	inline: "p-8 w-full flex items-center justify-center",
+	fullscreen:
+		"absolute inset-0 flex justify-center items-center bg-content-primary",
+};
diff --git a/site/src/components/Logs/LogLine.tsx b/site/src/components/Logs/LogLine.tsx
index 7c2e56f190568..bb41648d1b5cd 100644
--- a/site/src/components/Logs/LogLine.tsx
+++ b/site/src/components/Logs/LogLine.tsx
@@ -1,7 +1,6 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import type { LogLevel } from "api/typesGenerated";
 import type { FC, HTMLAttributes } from "react";
-import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { cn } from "utils/cn";
 
 const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
 
@@ -20,62 +19,48 @@ type LogLineProps = {
 export const LogLine: FC<LogLineProps> = ({ level, ...divProps }) => {
 	return (
 		<pre
-			css={styles.line}
-			className={`${level} ${divProps.className} logs-line`}
+			css={(theme) => ({
+				padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
+				"&.error": {
+					backgroundColor: theme.roles.error.background,
+					color: theme.roles.error.text,
+					"& .dashed-line": {
+						backgroundColor: theme.roles.error.outline,
+					},
+				},
+				"&.debug": {
+					backgroundColor: theme.roles.notice.background,
+					color: theme.roles.notice.text,
+					"& .dashed-line": {
+						backgroundColor: theme.roles.notice.outline,
+					},
+				},
+				"&.warn": {
+					backgroundColor: theme.roles.warning.background,
+					color: theme.roles.warning.text,
+
+					"& .dashed-line": {
+						backgroundColor: theme.roles.warning.outline,
+					},
+				},
+			})}
+			className={cn(
+				"m-0 break-all flex items-center text-[13px]",
+				"text-content-primary font-mono h-auto",
+				level,
+				divProps.className,
+				"logs-line",
+			)}
 			{...divProps}
 		/>
 	);
 };
 
 export const LogLinePrefix: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
-	return <pre css={styles.prefix} {...props} />;
+	return (
+		<pre
+			className="select-none m-0 inline-block text-content-secondary mr-6"
+			{...props}
+		/>
+	);
 };
-
-const styles = {
-	line: (theme) => ({
-		margin: 0,
-		wordBreak: "break-all",
-		display: "flex",
-		alignItems: "center",
-		fontSize: 13,
-		color: theme.palette.text.primary,
-		fontFamily: MONOSPACE_FONT_FAMILY,
-		height: "auto",
-		padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
-
-		"&.error": {
-			backgroundColor: theme.roles.error.background,
-			color: theme.roles.error.text,
-
-			"& .dashed-line": {
-				backgroundColor: theme.roles.error.outline,
-			},
-		},
-
-		"&.debug": {
-			backgroundColor: theme.roles.notice.background,
-			color: theme.roles.notice.text,
-
-			"& .dashed-line": {
-				backgroundColor: theme.roles.notice.outline,
-			},
-		},
-
-		"&.warn": {
-			backgroundColor: theme.roles.warning.background,
-			color: theme.roles.warning.text,
-
-			"& .dashed-line": {
-				backgroundColor: theme.roles.warning.outline,
-			},
-		},
-	}),
-
-	prefix: (theme) => ({
-		userSelect: "none",
-		margin: 0,
-		display: "inline-block",
-		color: theme.palette.text.secondary,
-		marginRight: 24,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx
index cf40855b34b15..89186506c0479 100644
--- a/site/src/components/Logs/Logs.tsx
+++ b/site/src/components/Logs/Logs.tsx
@@ -1,6 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import dayjs from "dayjs";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 import { type Line, LogLine, LogLinePrefix } from "./LogLine";
 
 export const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
@@ -17,7 +18,15 @@ export const Logs: FC<LogsProps> = ({
 	className = "",
 }) => {
 	return (
-		<div css={styles.root} className={`${className} logs-container`}>
+		<div
+			className={cn(
+				"logs-container",
+				"min-h-[156px] py-2 rounded-lg overflow-x-auto bg-surface-primary",
+				"[&:not(:last-child)]:border-0 [&:not(:last-child)]:border-b",
+				"[&:not(:last-child)]:rounded-none [&:not(:last-child)]:border-b-border",
+				className,
+			)}
+		>
 			<div className="min-w-fit">
 				{lines.map((line) => (
 					<LogLine key={line.id} level={line.level}>
@@ -33,18 +42,3 @@ export const Logs: FC<LogsProps> = ({
 		</div>
 	);
 };
-
-const styles = {
-	root: (theme) => ({
-		minHeight: 156,
-		padding: "8px 0",
-		borderRadius: 8,
-		overflowX: "auto",
-		background: theme.palette.background.default,
-
-		"&:not(:last-child)": {
-			borderBottom: `1px solid ${theme.palette.divider}`,
-			borderRadius: 0,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
index 2e2ed8242a5eb..b2e750a6e2e92 100644
--- a/site/src/components/Margins/Margins.tsx
+++ b/site/src/components/Margins/Margins.tsx
@@ -26,12 +26,11 @@ export const Margins: FC<MarginsProps> = ({
 	return (
 		<div
 			{...divProps}
-			css={{
-				maxWidth: maxWidth,
-				paddingLeft: sidePadding,
-				paddingRight: sidePadding,
+			style={{
+				"--max-width": maxWidth,
+				"--padding": `${sidePadding}px`,
 			}}
-			className="ml-auto mr-auto w-full"
+			className="mx-[var(--padding, auto)] w-full max-w-[var(--max-width, 100%)]"
 		>
 			{children}
 		</div>
diff --git a/site/src/components/Markdown/Markdown.stories.tsx b/site/src/components/Markdown/Markdown.stories.tsx
index b2351c1d43153..b60637ec93391 100644
--- a/site/src/components/Markdown/Markdown.stories.tsx
+++ b/site/src/components/Markdown/Markdown.stories.tsx
@@ -10,6 +10,14 @@ export default meta;
 type Story = StoryObj<typeof Markdown>;
 
 export const WithCode: Story = {
+	args: {
+		children: `
+		foobar
+		`,
+	},
+};
+
+export const WithCodeblock: Story = {
 	args: {
 		children: `
   ## Required permissions / policy
diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx
index f0ee50432dbde..39d4edb6d1b55 100644
--- a/site/src/components/Markdown/Markdown.tsx
+++ b/site/src/components/Markdown/Markdown.tsx
@@ -84,12 +84,13 @@ export const Markdown: FC<MarkdownProps> = (props) => {
 						</SyntaxHighlighter>
 					) : (
 						<code
-							css={(theme) => ({
-								background: theme.palette.divider,
-								color: theme.palette.text.primary,
-							})}
-							className="py-[1px] px-1 rounded-sm text-sm leading-none"
 							{...props}
+							className={cn([
+								"py-[1px] px-1 rounded-sm text-sm leading-none",
+								"bg-surface-tertiary dark:bg-surface-quaternary",
+								"text-content-primary",
+								props.className,
+							])}
 						>
 							{children}
 						</code>
@@ -203,11 +204,10 @@ export const InlineMarkdown: FC<InlineMarkdownProps> = (props) => {
 
 				code: ({ node, className, children, style, ...props }) => (
 					<code
-						css={(theme) => ({
-							background: theme.palette.divider,
-							color: theme.palette.text.primary,
-						})}
-						className="py-[1px] px-1 rounded-sm text-sm leading-none"
+						className={cn(
+							"py-[1px] px-1 rounded-sm text-sm leading-none text-content-primary",
+							"bg-surface-tertiary dark:bg-surface-quaternary",
+						)}
 						{...props}
 					>
 						{children}
diff --git a/site/src/components/Menu/MenuSearch.tsx b/site/src/components/Menu/MenuSearch.tsx
index 99c7720544560..62fd9246a2b57 100644
--- a/site/src/components/Menu/MenuSearch.tsx
+++ b/site/src/components/Menu/MenuSearch.tsx
@@ -3,18 +3,17 @@ import {
 	type SearchFieldProps,
 } from "components/SearchField/SearchField";
 import type { FC } from "react";
+import { cn } from "utils/cn";
+
 export const MenuSearch: FC<SearchFieldProps> = (props) => {
 	return (
 		<SearchField
 			fullWidth
-			css={(theme) => ({
-				"& fieldset": {
-					// MUI has so many nested selectors that it's easier to just
-					// override the border directly using the `!important` hack
-					borderBottom: `1px solid ${theme.palette.divider} !important`,
-				},
-			})}
-			className={"[& fieldset]:border-0 [& fieldset]:rounded-none"}
+			className={cn(
+				"[&_fieldset]:border-0 [&_fieldset]:rounded-none",
+				"[&_fieldset]:!border-0 [&_fieldset]:!border-b",
+				"[&_fieldset]:!border-surface-quaternary",
+			)}
 			{...props}
 		/>
 	);
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
index 5b29a8a22c0ef..08358c6180c3d 100644
--- a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
+++ b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
@@ -111,11 +111,7 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 					size={size}
 					label={label}
 					placeholder="Organization name"
-					css={{
-						"&:not(:has(label))": {
-							margin: 0,
-						},
-					}}
+					className="[&:not(:has(label))]:m-0"
 					InputProps={{
 						...params.InputProps,
 						startAdornment: selected && (
diff --git a/site/src/components/OverflowY/OverflowY.stories.tsx b/site/src/components/OverflowY/OverflowY.stories.tsx
index 5e762a995607c..406e817dafa69 100644
--- a/site/src/components/OverflowY/OverflowY.stories.tsx
+++ b/site/src/components/OverflowY/OverflowY.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<typeof OverflowY> = {
 		children: numbers.map((num, i) => (
 			<p
 				key={num}
-				css={{
+				style={{
 					backgroundColor: i % 2 === 0 ? "white" : "gray",
 				}}
 				className="h-[50px] p-0 m-0 text-black"
diff --git a/site/src/components/OverflowY/OverflowY.tsx b/site/src/components/OverflowY/OverflowY.tsx
index dc804528e8789..50b67db501528 100644
--- a/site/src/components/OverflowY/OverflowY.tsx
+++ b/site/src/components/OverflowY/OverflowY.tsx
@@ -29,11 +29,16 @@ export const OverflowY: FC<OverflowYProps> = ({
 	return (
 		<div
 			{...attrs}
-			css={{
-				height: computedHeight,
-				maxHeight: computedMaxHeight,
+			style={{
+				"--computed-height": computedHeight,
+				"--computed-max-height": computedMaxHeight,
 			}}
-			className={cn("w-full overflow-y-auto flex-shrink-1", attrs.className)}
+			className={cn(
+				"w-full overflow-y-auto flex-shrink-1",
+				"h-[var(--computed-height)]",
+				"max-h-[var(--computed-max-height)]",
+				attrs.className,
+			)}
 		>
 			{children}
 		</div>
diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx
index c8cb59e5e56de..2c340fab097ec 100644
--- a/site/src/components/PageHeader/FullWidthPageHeader.tsx
+++ b/site/src/components/PageHeader/FullWidthPageHeader.tsx
@@ -37,19 +37,7 @@ export const FullWidthPageHeader: FC<FullWidthPageHeaderProps> = ({
 };
 
 const _PageHeaderActions: FC<PropsWithChildren> = ({ children }) => {
-	const theme = useTheme();
-	return (
-		<div
-			css={{
-				marginLeft: "auto",
-				[theme.breakpoints.down("md")]: {
-					marginLeft: "unset",
-				},
-			}}
-		>
-			{children}
-		</div>
-	);
+	return <div className="ml-[unset] md:ml-auto">{children}</div>;
 };
 
 export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
@@ -57,14 +45,8 @@ export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
 };
 
 export const PageHeaderSubtitle: FC<PropsWithChildren> = ({ children }) => {
-	const theme = useTheme();
 	return (
-		<span
-			css={{
-				color: theme.palette.text.secondary,
-			}}
-			className="text-sm leading-[22.4px] block"
-		>
+		<span className="text-sm text-content-secondary leading-[22.4px] block">
 			{children}
 		</span>
 	);
diff --git a/site/src/components/PageHeader/PageHeader.tsx b/site/src/components/PageHeader/PageHeader.tsx
index 3695fa5d409a0..75dbca4b167f6 100644
--- a/site/src/components/PageHeader/PageHeader.tsx
+++ b/site/src/components/PageHeader/PageHeader.tsx
@@ -50,11 +50,8 @@ export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 }) => {
 	return (
 		<h2
-			css={(theme) => ({
-				color: theme.palette.text.secondary,
-			})}
 			className={cn(
-				"text-base font-normal block mb-0 leading-[1.4]",
+				"text-base font-normal block mb-0 text-content-secondary leading-[1.4]",
 				condensed && "mt-1",
 				!condensed && "mt-2",
 			)}
@@ -66,15 +63,7 @@ export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 
 export const PageHeaderCaption: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<span
-			css={(theme) => ({
-				fontSize: 12,
-				color: theme.palette.text.secondary,
-				fontWeight: 600,
-				textTransform: "uppercase",
-				letterSpacing: "0.1em",
-			})}
-		>
+		<span className="text-xs text-content-secondary font-semibold uppercase tracking-[0.1em]">
 			{children}
 		</span>
 	);
diff --git a/site/src/components/PaginationWidget/PaginationHeader.tsx b/site/src/components/PaginationWidget/PaginationHeader.tsx
index 9cb8a4f5100f8..3647999833c15 100644
--- a/site/src/components/PaginationWidget/PaginationHeader.tsx
+++ b/site/src/components/PaginationWidget/PaginationHeader.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
 import type { FC } from "react";
 import { cn } from "utils/cn";
@@ -21,18 +20,11 @@ export const PaginationHeader: FC<PaginationHeaderProps> = ({
 	currentOffsetStart,
 	className,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<div
-			css={{
-				color: theme.palette.text.secondary,
-				"& strong": {
-					color: theme.palette.text.primary,
-				},
-			}}
 			className={cn(
 				"flex flex-nowrap items-center m-0 text-[13px] pb-2",
+				"text-content-secondary [&_strong]:text-content-primary",
 				"h-9", // The size of a small button
 				className,
 			)}
diff --git a/site/src/components/Paywall/Paywall.tsx b/site/src/components/Paywall/Paywall.tsx
index cde84315b3617..8f17dc372a13a 100644
--- a/site/src/components/Paywall/Paywall.tsx
+++ b/site/src/components/Paywall/Paywall.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import { PremiumBadge } from "components/Badges/Badges";
 import { Button } from "components/Button/Button";
@@ -18,7 +17,7 @@ export const Paywall: FC<PaywallProps> = ({
 	documentationLink,
 }) => {
 	return (
-		<div css={styles.root}>
+		<div className={classNames.root}>
 			<div>
 				<Stack direction="row" alignItems="center" className="mb-6">
 					<h5 className="font-semibold font-inherit text-xl m-0">{message}</h5>
@@ -40,19 +39,19 @@ export const Paywall: FC<PaywallProps> = ({
 			<div className="w-px h-[220px] bg-highlight-purple/50 ml-2" />
 			<Stack direction="column" alignItems="left" spacing={3}>
 				<ul className="m-0 px-6 text-sm font-medium">
-					<li css={styles.feature}>
+					<li className={classNames.feature}>
 						<FeatureIcon />
 						High availability & workspace proxies
 					</li>
-					<li css={styles.feature}>
+					<li className={classNames.feature}>
 						<FeatureIcon />
 						Multi-org & role-based access control
 					</li>
-					<li css={styles.feature}>
+					<li className={classNames.feature}>
 						<FeatureIcon />
 						24x7 global support with SLA
 					</li>
-					<li css={styles.feature}>
+					<li className={classNames.feature}>
 						<FeatureIcon />
 						Unlimited Git & external auth integrations
 					</li>
@@ -77,33 +76,15 @@ const FeatureIcon: FC = () => {
 	return (
 		<CircleCheckBigIcon
 			aria-hidden="true"
-			className="size-icon-sm"
-			css={[
-				(theme) => ({
-					color: theme.branding.premium.border,
-				}),
-			]}
+			className="size-icon-sm text-violet-400"
 		/>
 	);
 };
 
-const styles = {
-	root: (theme) => ({
-		display: "flex",
-		flexDirection: "row",
-		justifyContent: "center",
-		alignItems: "center",
-		minHeight: 280,
-		padding: 24,
-		borderRadius: 8,
-		gap: 32,
-		backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.premium.background})`,
-		border: `1px solid ${theme.branding.premium.border}`,
-	}),
-	feature: {
-		display: "flex",
-		alignItems: "center",
-		padding: 3,
-		gap: 8,
-	},
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	root: [
+		"flex flex-row justify-center items-center min-h-[280px] p-6 rounded-lg gap-8",
+		"bg-gradient-to-b from-transparent to-violet-950",
+	].join(" "),
+	feature: "flex items-center p-[3px] gap-2",
+};
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index 1852d50af9f4e..0c402499f4807 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -222,7 +222,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
 			data-testid={`parameter-field-${parameter.name}`}
 		>
 			<ParameterLabel parameter={parameter} isPreset={isPreset} />
-			<div css={{ display: "flex", flexDirection: "column" }}>
+			<div className="flex flex-col">
 				<RichParameterField
 					{...fieldProps}
 					onChange={onChange}
diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
index 4f38f7b34a759..a294fd74ab4f6 100644
--- a/site/src/components/Timeline/TimelineDateRow.tsx
+++ b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -1,6 +1,6 @@
-import { css, useTheme } from "@emotion/react";
 import { TableCell, TableRow } from "components/Table/Table";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 import { createDisplayDate } from "./utils";
 
 export interface TimelineDateRow {
@@ -8,25 +8,17 @@ export interface TimelineDateRow {
 }
 
 export const TimelineDateRow: FC<TimelineDateRow> = ({ date }) => {
-	const theme = useTheme();
-
 	return (
 		<TableRow
-			css={css`
-        &:not(:first-of-type) td {
-          border-top: 1px solid ${theme.palette.divider};
-        }
-      `}
+			className={cn([
+				"[&:not(:first-of-type)_td]:border-0",
+				"[&:not(:first-of-type)_td]:border-t",
+				"[&:not(:first-of-type)_td]:border-border",
+				"[&:not(:first-of-type)_td]:border-solid",
+			])}
 		>
 			<TableCell
-				css={{
-					padding: "8px 32px !important",
-					background: `${theme.palette.background.paper} !important`,
-					fontSize: 12,
-					position: "relative",
-					color: theme.palette.text.secondary,
-					textTransform: "capitalize",
-				}}
+				className="!py-2 !px-8 bg-surface-primary text-xs relative text-content-secondary capitalize"
 				title={date.toLocaleDateString()}
 			>
 				{createDisplayDate(date)}
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
index 21a7fce03a923..7cd42db5656e0 100644
--- a/site/src/components/UserAutocomplete/UserAutocomplete.tsx
+++ b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -160,11 +160,7 @@ const InnerAutocomplete = <T extends SelectedUser>({
 					size={size}
 					label={label}
 					placeholder="User email or username"
-					css={{
-						"&:not(:has(label))": {
-							margin: 0,
-						},
-					}}
+					className="[&:not(:has(label))]:m-0"
 					InputProps={{
 						...params.InputProps,
 						onChange: debouncedInputOnChange,
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
index cb20f2bae132a..5fc5bb40bfec8 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
@@ -63,7 +63,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 			<Skeleton
 				width="110px"
 				height={40}
-				css={{ borderRadius: 6, transform: "none" }}
+				className="rounded-md transform-none"
 			/>
 		);
 	}
@@ -76,7 +76,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 				onClick={() => setIsOpen(true)}
 				size="lg"
 			>
-				<span css={{ ...visuallyHidden }}>
+				<span className="sr-only">
 					Latency for {selectedProxy?.display_name ?? "your region"}
 				</span>
 
@@ -106,48 +106,27 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 				anchorEl={buttonRef.current}
 				onClick={closeMenu}
 				onClose={closeMenu}
-				css={{ "& .MuiMenu-paper": { paddingTop: 8, paddingBottom: 8 } }}
 				// autoFocus here does not affect modal focus; it affects whether the
 				// first item in the list will get auto-focus when the menu opens. Have
 				// to turn this off because otherwise, screen readers will skip over all
 				// the descriptive text and will only have access to the latency options
 				autoFocus={false}
-				className="z-0"
+				className="z-0 [&_.MuiMenu-paper]:py-2"
 			>
 				{proxyContextValue.proxies &&
 					proxyContextValue.proxies.length > 1 && [
 						<div
 							key="description"
-							css={{
-								width: "100%",
-								maxWidth: "320px",
-								fontSize: 14,
-								padding: 16,
-								lineHeight: "140%",
-							}}
+							className="w-full max-w-[320px] font-size-sm p-4 leading-snug"
 						>
 							<h4
 								tabIndex={-1}
-								css={{
-									fontSize: "inherit",
-									fontWeight: 600,
-									lineHeight: "inherit",
-									margin: 0,
-									marginBottom: 4,
-								}}
+								className="[font-size:inherit] font-semibold [line-height:inherit] m-0 mb-1"
 							>
 								Select a region nearest to you
 							</h4>
 
-							<p
-								css={{
-									fontSize: 13,
-									color: theme.palette.text.secondary,
-									lineHeight: "inherit",
-									marginTop: 0.5,
-									marginBottom: 0,
-								}}
-							>
+							<p className="font-[13px] text-content-secondary [line-height:inherit] mb-0 mt-[0.5px]">
 								Workspace proxies improve terminal and web app connections to
 								workspaces. This does not apply to{" "}
 								<Abbr title="Command-Line Interface" pronunciation="initialism">
@@ -204,7 +183,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 
 				{Boolean(permissions.editWorkspaceProxies) && (
 					<MenuItem
-						css={{ fontSize: 14 }}
+						className="text-sm"
 						onClick={() => {
 							navigate("/deployment/workspace-proxies");
 						}}
@@ -214,7 +193,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 				)}
 
 				<MenuItem
-					css={{ fontSize: 14 }}
+					className="text-sm"
 					onClick={(e) => {
 						// Stop the menu from closing
 						e.stopPropagation();
diff --git a/site/src/modules/resources/AgentLogs/AgentLogLine.tsx b/site/src/modules/resources/AgentLogs/AgentLogLine.tsx
index bb3d0828f86d2..dcedc1238c91a 100644
--- a/site/src/modules/resources/AgentLogs/AgentLogLine.tsx
+++ b/site/src/modules/resources/AgentLogs/AgentLogLine.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import AnsiToHTML from "ansi-to-html";
 import { type Line, LogLine, LogLinePrefix } from "components/Logs/LogLine";
 import { type FC, type ReactNode, useMemo } from "react";
@@ -30,10 +29,10 @@ export const AgentLogLine: FC<AgentLogLineProps> = ({
 		<LogLine className="pl-4" level={line.level} style={style}>
 			{sourceIcon}
 			<LogLinePrefix
-				css={styles.number}
 				style={{
 					minWidth: `${maxLineNumber.toString().length - 1}em`,
 				}}
+				className="w-[32px] text-right text-content-disabled flex-shrink-0"
 			>
 				{number}
 			</LogLinePrefix>
@@ -46,12 +45,3 @@ export const AgentLogLine: FC<AgentLogLineProps> = ({
 		</LogLine>
 	);
 };
-
-const styles = {
-	number: (theme) => ({
-		width: 32,
-		textAlign: "right",
-		flexShrink: 0,
-		color: theme.palette.text.disabled,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
index 9afca2b364240..4016fc2b754d7 100644
--- a/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
+++ b/site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx
@@ -75,11 +75,10 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
 				open={isVariantMenuOpen}
 				anchorEl={menuAnchorRef.current}
 				onClose={() => setIsVariantMenuOpen(false)}
-				css={{
-					"& .MuiMenu-paper": {
-						width: menuAnchorRef.current?.clientWidth,
-					},
+				style={{
+					"--anchor-width": menuAnchorRef.current?.clientWidth,
 				}}
+				className="[&_.MuiMenu-paper]:w-[var(--anchor-width)]"
 			>
 				<MenuItem
 					className="text-sm leading-none"
diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
index 1ef73c1fe98d7..7c4c2f2154801 100644
--- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
+++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import type { TemplateExample } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
@@ -6,6 +5,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Pill } from "components/Pill/Pill";
 import type { FC, HTMLAttributes } from "react";
 import { Link as RouterLink } from "react-router";
+import { cn } from "utils/cn";
 
 type TemplateExampleCardProps = HTMLAttributes<HTMLDivElement> & {
 	example: TemplateExample;
@@ -18,19 +18,24 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 	...divProps
 }) => {
 	return (
-		<div css={styles.card} {...divProps}>
-			<div css={styles.header}>
-				<div css={styles.icon}>
+		<div className={classNames.card} {...divProps}>
+			<div className={classNames.header}>
+				<div className={classNames.icon}>
 					<ExternalImage
 						src={example.icon}
 						className="w-full h-full object-contain"
 					/>
 				</div>
 
-				<div css={styles.tags}>
+				<div className={classNames.tags}>
 					{example.tags.map((tag) => (
 						<RouterLink key={tag} to={`/starter-templates?tag=${tag}`}>
-							<Pill css={[styles.tag, activeTag === tag && styles.activeTag]}>
+							<Pill
+								className={cn([
+									classNames.tag,
+									activeTag === tag && classNames.activeTag,
+								])}
+							>
 								{tag}
 							</Pill>
 						</RouterLink>
@@ -40,7 +45,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 
 			<div>
 				<h4 className="text-sm font-semibold m-0 mb-1">{example.name}</h4>
-				<span css={styles.description}>
+				<span className={classNames.description}>
 					{example.description}{" "}
 					<Link
 						component={RouterLink}
@@ -52,7 +57,7 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 				</span>
 			</div>
 
-			<div css={styles.useButtonContainer}>
+			<div className={classNames.useButtonContainer}>
 				<Button asChild className="w-full">
 					<RouterLink to={`/templates/new?exampleId=${example.id}`}>
 						Use template
@@ -63,66 +68,22 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
 	);
 };
 
-const styles = {
-	card: (theme) => ({
-		width: "320px",
-		padding: 24,
-		borderRadius: 6,
-		border: `1px solid ${theme.palette.divider}`,
-		textAlign: "left",
-		color: "inherit",
-		display: "flex",
-		flexDirection: "column",
-	}),
-
-	header: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "space-between",
-		marginBottom: 24,
-	},
-
-	icon: {
-		flexShrink: 0,
-		paddingTop: 4,
-		width: 32,
-		height: 32,
-	},
-
-	tags: {
-		display: "flex",
-		flexWrap: "wrap",
-		gap: 8,
-		justifyContent: "end",
-	},
-
-	tag: (theme) => ({
-		borderColor: theme.palette.divider,
-		textDecoration: "none",
-		cursor: "pointer",
-		"&: hover": {
-			borderColor: theme.palette.primary.main,
-		},
-	}),
-
-	activeTag: (theme) => ({
-		borderColor: theme.roles.active.outline,
-		backgroundColor: theme.roles.active.background,
-	}),
-
-	description: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		lineHeight: "1.6",
-		display: "block",
-	}),
-
-	useButtonContainer: {
-		display: "flex",
-		gap: 12,
-		flexDirection: "column",
-		paddingTop: 24,
-		marginTop: "auto",
-		alignItems: "center",
-	},
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	card: "w-[320px] p-6 rounded-md border border-solid border-border dark:border-surface-quaternary text-left text-inherit flex flex-col",
+	header: "flex items-center justify-between mb-6",
+	icon: "flex-shrink-0 pt-1 w-8 h-8",
+	tags: "flex flex-wrap gap-2 justify-end",
+	// TODO: Add over state
+	// "&: hover": {
+	// 	  borderColor: theme.palette.primary.main,
+	// },
+	tag: "border border-solid border-border dark:border-surface-quaternary text-decoration-none cursor-pointer",
+	// TODO: Add state
+	// activeTag: (theme) => ({
+	// 	borderColor: theme.roles.active.outline,
+	// 	backgroundColor: theme.roles.active.background,
+	// }),
+	activeTag: "",
+	description: "text-[13px] leading-relaxed block text-content-secondary",
+	useButtonContainer: "flex flex-col items-center gap-3 pt-6 mt-auto",
+};
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
index 7a06d6094f70a..68b598170b306 100644
--- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -53,6 +53,7 @@ import {
 	unstable_usePrompt as usePrompt,
 } from "react-router";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
+import { cn } from "utils/cn";
 import {
 	createFile,
 	existsFile,
@@ -234,15 +235,12 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 						/>
 						<RouterLink
 							to={templateLink}
-							css={{
-								color: theme.palette.text.primary,
-							}}
-							className="no-underline hover:underline"
+							className="text-content-primary no-underline hover:underline"
 						>
 							{template.display_name || template.name}
 						</RouterLink>
 						<TopbarDivider />
-						<span css={{ color: theme.palette.text.secondary }}>
+						<span className="text-content-secondary">
 							{templateVersion.name}
 						</span>
 					</TopbarData>
@@ -319,23 +317,9 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 
 					<Sidebar>
 						<div className="h-[42px] pr-2 pl-4 flex items-center">
-							<span
-								css={{
-									color: theme.palette.text.primary,
-									fontSize: 13,
-								}}
-							>
-								Files
-							</span>
+							<span className="text-content-primary text-[13px]">Files</span>
 
-							<div
-								className="ml-auto"
-								css={{
-									"& svg": {
-										fill: theme.palette.text.primary,
-									},
-								}}
-							>
+							<div className="ml-auto [&_svg]:text-content-primary">
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<IconButton
@@ -458,31 +442,20 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 							)}
 						</div>
 
-						<div
-							css={{
-								borderTop: `1px solid ${theme.palette.divider}`,
-							}}
-							className="overflow-hidden flex flex-col"
-						>
+						<div className="overflow-hidden flex flex-col border-0 border-t border-solid border-border">
 							<div
-								css={{
-									borderBottom: selectedTab
-										? `1px solid ${theme.palette.divider}`
-										: 0,
-								}}
-								className="flex items-center"
+								className={cn(
+									"flex items-center",
+									selectedTab && "border-0 border-b border-solid border-border",
+								)}
 							>
 								<div
-									css={{
-										display: "flex",
-
-										"& .MuiTab-root": {
-											padding: 0,
-											fontSize: 14,
-											textTransform: "none",
-											letterSpacing: "unset",
-										},
-									}}
+									className={cn(
+										"flex",
+										"[&_.MuiTab-root]:p-0 [&_.MuiTab-root]:text-[14px]",
+										"[&_.MuiTab-root]:[text-transform:none]",
+										"[&_.MuiTab-root]:tracking-[unset]",
+									)}
 								>
 									<button
 										type="button"
diff --git a/site/src/pages/TerminalPage/TerminalAlerts.tsx b/site/src/pages/TerminalPage/TerminalAlerts.tsx
index 99e3ee67316b6..ab7e33baba8d0 100644
--- a/site/src/pages/TerminalPage/TerminalAlerts.tsx
+++ b/site/src/pages/TerminalPage/TerminalAlerts.tsx
@@ -158,11 +158,9 @@ const TerminalAlert: FC<AlertProps> = (props) => {
 		<Alert
 			{...props}
 			css={(theme) => ({
-				borderBottomColor: theme.palette.divider,
-				backgroundColor: theme.palette.background.paper,
-				borderLeft: `3px solid ${theme.palette[props.severity!].light}`,
+				borderLeftColor: theme.palette[props.severity!].light,
 			})}
-			className="rounded-none border-0 border-b-1 border-solid mb-[1px]"
+			className="rounded-none border-0 border-b border-solid border-l-[3px] mb-[1px] bg-surface-secondary border-b-surface-quaternary"
 		/>
 	);
 };
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index ba8c4a3eba8c5..4310521ddaee0 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -434,12 +434,7 @@ const TerminalPage: FC = () => {
 			</div>
 
 			{latency && isDebugging && (
-				<span
-					css={{
-						color: theme.palette.text.disabled,
-					}}
-					className="absolute bottom-6 right-6 text-sm leading-none"
-				>
+				<span className="absolute bottom-6 right-6 text-sm leading-none text-content-disabled">
 					Latency: {latency.latencyMS.toFixed(0)}ms
 				</span>
 			)}
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
index ba7830ebbc980..9bab9a0ddf05b 100644
--- a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
+++ b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
@@ -31,12 +31,7 @@ export const AccountUserGroups: FC<AccountGroupsProps> = ({
 				groups && (
 					<span>
 						You are in{" "}
-						<em
-							css={{
-								color: theme.palette.text.primary,
-							}}
-							className="[font-style:normal] font-semibold"
-						>
+						<em className="text-content-primary [font-style:normal] font-semibold">
 							{groups.length} group
 							{groups.length !== 1 && "s"}
 						</em>
diff --git a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
index 4116944c0f3da..c4ed0c52ac55b 100644
--- a/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
+++ b/site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import { externalAuthProvider } from "api/queries/externalAuth";
 import type {
 	ExternalAuthLink,
@@ -114,7 +113,6 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 	onUnlinkExternalAuth,
 	onValidateExternalAuth,
 }) => {
-	const theme = useTheme();
 	const name = app.display_name || app.id || app.type;
 	const authURL = `/external-auth/${app.id}`;
 
@@ -152,9 +150,7 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 
 					{link?.validate_error && (
 						<span>
-							<span css={{ color: theme.palette.error.light }} className="pl-3">
-								Error:{" "}
-							</span>
+							<span className="pl-3 text-content-destructive">Error: </span>
 							{link?.validate_error}
 						</span>
 					)}
diff --git a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
index 5d1bbb28d8aee..d1e17f1061111 100644
--- a/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
+++ b/site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Card from "@mui/material/Card";
 import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
@@ -135,12 +134,7 @@ const NotificationsPage: FC = () => {
 							return (
 								<Card variant="outlined" className="bg-transparent" key={group}>
 									<List>
-										<ListItem
-											css={(theme) => ({
-												background: theme.palette.background.paper,
-												borderBottom: `1px solid ${theme.palette.divider}`,
-											})}
-										>
+										<ListItem className="bg-surface-secondary dark:border-surface-quaternary border-0 border-b border-solid">
 											<ListItemIcon>
 												<Switch
 													id={group}
@@ -242,13 +236,7 @@ const NotificationsPage: FC = () => {
 															primary={tmpl.name}
 														/>
 														<ListItemIcon
-															css={(theme) => ({
-																color: theme.palette.text.secondary,
-																"& svg": {
-																	fontSize: "inherit",
-																},
-															})}
-															className="min-w-0 text-xl leading-none"
+															className="min-w-0 text-xl leading-none text-content-secondary [&_svg]:[font-size:inherit]"
 															aria-label="Delivery method"
 														>
 															<Tooltip>
diff --git a/site/src/pages/UserSettingsPage/Section.tsx b/site/src/pages/UserSettingsPage/Section.tsx
index 0f3de7ae9cf68..f1d8d52b284fb 100644
--- a/site/src/pages/UserSettingsPage/Section.tsx
+++ b/site/src/pages/UserSettingsPage/Section.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import {
 	FeatureStageBadge,
 	type featureStageBadgeTypes,
@@ -37,7 +36,7 @@ export const Section: FC<SectionProps> = ({
 		<section className={className} id={id} data-testid={id}>
 			<div className={cn(layout === "fluid" ? "w-full" : "max-w-[500px]")}>
 				{(title || description) && (
-					<div css={styles.header}>
+					<div className="mb-6 flex flew-row justify-between">
 						<div>
 							{title && (
 								<Stack direction="row" alignItems="center">
@@ -54,10 +53,10 @@ export const Section: FC<SectionProps> = ({
 								</Stack>
 							)}
 							{description && typeof description === "string" && (
-								<p css={styles.description}>{description}</p>
+								<p className={classNames.description}>{description}</p>
 							)}
 							{description && typeof description !== "string" && (
-								<div css={styles.description}>{description}</div>
+								<div className={classNames.description}>{description}</div>
 							)}
 						</div>
 						{toolbar && <div>{toolbar}</div>}
@@ -70,18 +69,6 @@ export const Section: FC<SectionProps> = ({
 	);
 };
 
-const styles = {
-	header: {
-		marginBottom: 24,
-		display: "flex",
-		flexDirection: "row",
-		justifyContent: "space-between",
-	},
-	description: (theme) => ({
-		color: theme.palette.text.secondary,
-		fontSize: 16,
-		margin: 0,
-		marginTop: 4,
-		lineHeight: "140%",
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	description: "text-content-secondary m-0 mt-1 leading-snug",
+};
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx
index 149c1015b35b7..9da6ae2b257b6 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPageView.stories.tsx
@@ -55,7 +55,11 @@ export const UserLoginTypeIsPassword: Story = {
 	args: set("oidc.section.authMethods", MockAuthMethodsAll, defaultArgs),
 };
 
-export const ConfirmingOIDCConversion: Story = {
+export const UserLoginTypeIsOIDC: Story = {
+	args: set("oidc.section.userLoginType", { login_type: "oidc" }, defaultArgs),
+};
+
+export const OIDCAuthenticated: Story = {
 	args: set(
 		"oidc.section",
 		{
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
index 55208a6264862..7e3555442781b 100644
--- a/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
+++ b/site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx
@@ -1,4 +1,3 @@
-import { useTheme } from "@emotion/react";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
 import { API } from "api/api";
@@ -17,6 +16,7 @@ import { Stack } from "components/Stack/Stack";
 import { CircleCheck as CircleCheckIcon, KeyIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { useMutation } from "react-query";
+import { cn } from "utils/cn";
 import { docs } from "utils/docs";
 import { Section } from "../Section";
 
@@ -133,8 +133,6 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 	isConfirming,
 	error,
 }) => {
-	const theme = useTheme();
-
 	const noSsoEnabled = !authMethods.github.enabled && !authMethods.oidc.enabled;
 
 	return (
@@ -177,18 +175,12 @@ export const SingleSignOnSection: FC<SingleSignOnSectionProps> = ({
 						</>
 					) : (
 						<div
-							css={{
-								background: theme.palette.background.paper,
-								border: `1px solid ${theme.palette.divider}`,
-							}}
-							className="text-sm flex items-center gap-4 p-4 rounded-lg"
+							className={cn([
+								"text-sm flex items-center gap-4 p-4 rounded-lg border border-solid",
+								"bg-surface-secondary border-border dark:border-content-disabled",
+							])}
 						>
-							<CircleCheckIcon
-								css={{
-									color: theme.palette.success.light,
-								}}
-								className="size-icon-xs"
-							/>
+							<CircleCheckIcon className="size-icon-xs text-content-success" />
 							<span>
 								Authenticated with{" "}
 								<strong>
diff --git a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
index f483a0e285b53..4767482f5c48e 100644
--- a/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
+++ b/site/src/pages/UserSettingsPage/TokensPage/TokensPage.tsx
@@ -1,10 +1,10 @@
-import { css, type Interpolation, type Theme } from "@emotion/react";
 import type { APIKeyWithOwner } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { Stack } from "components/Stack/Stack";
 import { PlusIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router";
+import { cn } from "utils/cn";
 import { Section } from "../Section";
 import { ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
 import { useTokensData } from "./hooks";
@@ -33,7 +33,10 @@ const TokensPage: FC = () => {
 		<>
 			<Section
 				title="Tokens"
-				css={styles.section}
+				className={cn([
+					"[&_code]:bg-surface-primary [&_code]:text-content-primary",
+					"[&_code]:text-xs [&_code]:py-0.5 [&_code]:px-1 [&_code]:rounded-sm",
+				])}
 				description={
 					<>
 						Tokens are used to authenticate with the Coder API. You can create a
@@ -74,16 +77,4 @@ const TokenActions: FC = () => (
 	</Stack>
 );
 
-const styles = {
-	section: (theme) => css`
-    & code {
-      background: ${theme.palette.divider};
-      font-size: 12px;
-      padding: 2px 4px;
-      color: ${theme.palette.text.primary};
-      border-radius: 2px;
-    }
-  `,
-} satisfies Record<string, Interpolation<Theme>>;
-
 export default TokensPage;
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
index 56e5344a2d070..e811acd9f89b0 100644
--- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
+++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyRow.tsx
@@ -75,12 +75,12 @@ export const ProxyRow: FC<ProxyRowProps> = ({ proxy, latency }) => {
 					<div className="flex items-center justify-end">{statusBadge}</div>
 				</TableCell>
 				<TableCell
-					css={{
-						color: latency
+					style={{
+						"--latency-color": latency
 							? getLatencyColor(theme, latency.latencyMS)
 							: theme.palette.text.secondary,
 					}}
-					className="text-sm text-right"
+					className="text-sm text-right text-[var(--latency-color)]"
 				>
 					{latency ? `${latency.latencyMS.toFixed(0)} ms` : "Not available"}
 				</TableCell>
@@ -108,18 +108,14 @@ const ProxyMessagesRow: FC<ProxyMessagesRowProps> = ({
 	proxy,
 	extraWarnings,
 }) => {
-	const theme = useTheme();
-
 	return (
 		<>
 			<ProxyMessagesList
-				title={<span css={{ color: theme.palette.error.light }}>Errors</span>}
+				title={<span className="text-content-destructive">Errors</span>}
 				messages={proxy.status?.report?.errors}
 			/>
 			<ProxyMessagesList
-				title={
-					<span css={{ color: theme.palette.warning.light }}>Warnings</span>
-				}
+				title={<span className="text-content-warning">Warnings</span>}
 				messages={[...(proxy.status?.report?.warnings ?? []), ...extraWarnings]}
 			/>
 		</>
@@ -132,20 +128,12 @@ interface ProxyMessagesListProps {
 }
 
 const ProxyMessagesList: FC<ProxyMessagesListProps> = ({ title, messages }) => {
-	const theme = useTheme();
-
 	if (!messages) {
 		return null;
 	}
 
 	return (
-		<div
-			css={{
-				borderColor: theme.palette.divider,
-				backgroundColor: theme.palette.background.default,
-			}}
-			className="border-0 border-b border-solid py-4 px-16"
-		>
+		<div className="border-0 border-b border-solid py-4 px-16 bg-surface-primary">
 			<div
 				id="nested-list-subheader"
 				className="mb-1 text-[13px] font-semibold"
diff --git a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
index cac147801f318..239acfeff8bf8 100644
--- a/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx
@@ -33,6 +33,7 @@ import {
 	UserLockIcon,
 } from "lucide-react";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 import { UserRoleCell } from "../../OrganizationSettingsPage/UserTable/UserRoleCell";
 import { UserGroupsCell } from "./UserGroupsCell";
 
@@ -171,10 +172,10 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
 						</TableCell>
 
 						<TableCell
-							css={[
-								styles.status,
-								user.status === "suspended" && styles.suspended,
-							]}
+							className={cn([
+								"capitalize",
+								user.status === "suspended" && "text-content-secondary",
+							])}
 						>
 							<div>{user.status}</div>
 							{(user.status === "active" || user.status === "dormant") && (
@@ -263,27 +264,27 @@ const LoginType: FC<LoginTypeProps> = ({ authMethods, value }) => {
 
 	if (value === "password") {
 		displayName = "Password";
-		icon = <UserLockIcon css={styles.icon} />;
+		icon = <UserLockIcon className={classNames.icon} />;
 	} else if (value === "none") {
 		displayName = "None";
-		icon = <BanIcon css={styles.icon} />;
+		icon = <BanIcon className={classNames.icon} />;
 	} else if (value === "github") {
 		displayName = "GitHub";
-		icon = <ExternalImage src="/icon/github.svg" css={styles.icon} />;
+		icon = <ExternalImage src="/icon/github.svg" className={classNames.icon} />;
 	} else if (value === "token") {
 		displayName = "Token";
-		icon = <KeyIcon css={styles.icon} />;
+		icon = <KeyIcon className={classNames.icon} />;
 	} else if (value === "oidc") {
 		displayName =
 			authMethods.oidc.signInText === "" ? "OIDC" : authMethods.oidc.signInText;
 		icon =
 			authMethods.oidc.iconUrl === "" ? (
-				<ShieldIcon css={styles.icon} />
+				<ShieldIcon className={classNames.icon} />
 			) : (
 				<img
 					alt="Open ID Connect icon"
 					src={authMethods.oidc.iconUrl}
-					css={styles.icon}
+					className={classNames.icon}
 				/>
 			);
 	}
@@ -296,17 +297,6 @@ const LoginType: FC<LoginTypeProps> = ({ authMethods, value }) => {
 	);
 };
 
-const styles = {
-	icon: {
-		width: 14,
-		height: 14,
-	},
-
-	status: {
-		textTransform: "capitalize",
-	},
-
-	suspended: (theme) => ({
-		color: theme.palette.text.secondary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	icon: "size-3.5",
+};
diff --git a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
index a640931130215..85a34367a25cf 100644
--- a/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
+++ b/site/src/pages/WorkspacePage/ResourcesSidebar.tsx
@@ -1,4 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
 import type { WorkspaceResource } from "api/typesGenerated";
 import {
@@ -7,6 +6,7 @@ import {
 	SidebarItem,
 } from "components/FullPageLayout/Sidebar";
 import type { FC } from "react";
+import { cn } from "utils/cn";
 import { getResourceIconPath } from "utils/workspace";
 
 type ResourcesSidebarProps = {
@@ -43,7 +43,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 					onClick={() => onChange(r)}
 					isActive={isSelected(r)}
 					key={r.id}
-					css={styles.root}
+					className={classNames.root}
 				>
 					<div className="flex items-center justify-center leading-[0] w-4 h-4 p-0.5">
 						<img
@@ -66,7 +66,7 @@ export const ResourcesSidebar: FC<ResourcesSidebarProps> = ({
 
 const ResourceSidebarItemSkeleton: FC = () => {
 	return (
-		<div css={[styles.root, { pointerEvents: "none" }]}>
+		<div className={cn([classNames.root, "pointer-events-none"])}>
 			<Skeleton variant="circular" width={16} height={16} />
 			<div>
 				<Skeleton variant="text" width={94} height={16} />
@@ -76,11 +76,6 @@ const ResourceSidebarItemSkeleton: FC = () => {
 	);
 };
 
-const styles = {
-	root: {
-		lineHeight: "1.5",
-		display: "flex",
-		alignItems: "center",
-		gap: 12,
-	},
-} satisfies Record<string, Interpolation<Theme>>;
+const classNames = {
+	root: "leading-normal flex items-center gap-3",
+};
diff --git a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
index 529c739847613..75e4ad80c9c7e 100644
--- a/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx
@@ -1,5 +1,3 @@
-import { css } from "@emotion/css";
-import type { Interpolation, Theme } from "@emotion/react";
 import LinearProgress from "@mui/material/LinearProgress";
 import type { Template, TransitionStats, Workspace } from "api/typesGenerated";
 import dayjs, { type Dayjs } from "dayjs";
@@ -123,7 +121,7 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 		<div className="px-0.5">
 			{variant === "task" && (
 				<div className="mb-1 text-center">
-					<div css={styles.label} data-chromatic="ignore">
+					<div className={classNames.label} data-chromatic="ignore">
 						{progressText}
 					</div>
 				</div>
@@ -152,10 +150,10 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 			/>
 			{variant !== "task" && (
 				<div className="flex mt-1 justify-between">
-					<div css={styles.label}>
+					<div className={classNames.label}>
 						{capitalize(workspace.latest_build.status)} workspace...
 					</div>
-					<div css={styles.label} data-chromatic="ignore">
+					<div className={classNames.label} data-chromatic="ignore">
 						{progressText}
 					</div>
 				</div>
@@ -165,19 +163,7 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 };
 
 const classNames = {
-	bar: css`
-    transition: none;
-  `,
-	root: css`
-    border-radius: 0;
-  `,
+	root: "rounded-none",
+	bar: "transition-none",
+	label: "text-xs block font-semibold text-content-secondary leading-loose",
 };
-
-const styles = {
-	label: (theme) => ({
-		fontSize: 12,
-		display: "block",
-		fontWeight: 600,
-		color: theme.palette.text.secondary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
index 515e498480a3e..b73ee776b918f 100644
--- a/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx
@@ -73,13 +73,18 @@ const NotificationPill: FC<NotificationPillProps> = ({
 	icon,
 	isTooltipOpen,
 }) => {
+	const theme = useTheme();
+
 	return (
 		<Pill
 			icon={icon}
-			css={(theme) => ({
-				"& svg": { color: theme.roles[severity].outline },
-				borderColor: isTooltipOpen ? theme.roles[severity].outline : undefined,
-			})}
+			style={{
+				"--pill-color": theme.roles[severity].outline,
+			}}
+			className={cn([
+				"[& svg]:text-[var(--pill-color)]",
+				isTooltipOpen && "border-[var(--pill-color)]",
+			])}
 		>
 			{items.length}
 		</Pill>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
index 7bd121fb22b76..39f46c96c1894 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -126,7 +126,7 @@ const WorkspaceResultsRow: FC<WorkspaceResultsRowProps> = ({ template }) => {
 				<span className="whitespace-nowrap text-ellipsis">
 					{template.display_name || template.name || "[Unnamed]"}
 				</span>
-				<span className="text-content-secondary text-xs">
+				<span className="text-content-secondary text-[13px]">
 					{/*
 					 * There are some templates that have -1 as their user count –
 					 * basically functioning like a null value in JS. Can safely just