diff --git a/site/src/components/FullPageLayout/Sidebar.tsx b/site/src/components/FullPageLayout/Sidebar.tsx
index 8a5eaf9b4f6be..f58e97ac607c2 100644
--- a/site/src/components/FullPageLayout/Sidebar.tsx
+++ b/site/src/components/FullPageLayout/Sidebar.tsx
@@ -1,30 +1,28 @@
-import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import type { ComponentProps, FC, HTMLAttributes } from "react";
 import { Link, type LinkProps } from "react-router";
+import { cn } from "utils/cn";
 import { TopbarIconButton } from "./Topbar";
 
 export const Sidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
-	const theme = useTheme();
 	return (
 		<div
-			css={{
-				width: 260,
-				borderRight: `1px solid ${theme.palette.divider}`,
-				height: "100%",
-				overflow: "auto",
-				flexShrink: 0,
-				padding: "8px 0",
-				display: "flex",
-				flexDirection: "column",
-				gap: 1,
-			}}
+			// TODO: Remove extra border classes once MUI is removed
+			className="flex flex-col gap-px w-64 border-solid border-0 border-r border-r-border h-full py-2 shrink-0 overflow-y-auto"
 			{...props}
 		/>
 	);
 };
 
-export const SidebarLink: FC<LinkProps> = (props) => {
-	return <Link css={styles.sidebarItem} {...props} />;
+export const SidebarLink: FC<LinkProps> = ({ className, ...props }) => {
+	return (
+		<Link
+			className={cn(
+				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary cursor-pointer border-0 no-underline",
+				className,
+			)}
+			{...props}
+		/>
+	);
 };
 
 interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
@@ -33,21 +31,16 @@ interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
 
 export const SidebarItem: FC<SidebarItemProps> = ({
 	isActive,
+	className,
 	...buttonProps
 }) => {
-	const theme = useTheme();
-
 	return (
 		<button
-			css={[
-				styles.sidebarItem,
-				{ opacity: "0.75", "&:hover": { opacity: 1 } },
-				isActive && {
-					background: theme.palette.action.selected,
-					opacity: 1,
-					pointerEvents: "none",
-				},
-			]}
+			className={cn(
+				"text-[13px] text-content-primary py-2 px-4 text-left bg-transparent hover:divide-surface-tertiary opacity-75 hover:opacity-100 cursor-pointer border-0",
+				isActive && "opacity-100 bg-surface-tertiary",
+				className,
+			)}
 			{...buttonProps}
 		/>
 	);
@@ -56,15 +49,7 @@ export const SidebarItem: FC<SidebarItemProps> = ({
 export const SidebarCaption: FC<HTMLAttributes<HTMLSpanElement>> = (props) => {
 	return (
 		<span
-			css={{
-				fontSize: 10,
-				lineHeight: 1.2,
-				padding: "12px 16px",
-				display: "block",
-				textTransform: "uppercase",
-				fontWeight: 500,
-				letterSpacing: "0.1em",
-			}}
+			className="text-[10px] leading-tight py-3 px-4 uppercase font-medium text-content-primary tracking-widest"
 			{...props}
 		/>
 	);
@@ -76,49 +61,17 @@ interface SidebarIconButton extends ComponentProps<typeof TopbarIconButton> {
 
 export const SidebarIconButton: FC<SidebarIconButton> = ({
 	isActive,
+	className,
 	...buttonProps
 }) => {
 	return (
 		<TopbarIconButton
-			css={[
-				{ opacity: 0.75, "&:hover": { opacity: 1 } },
-				isActive && styles.activeSidebarIconButton,
-			]}
+			className={cn(
+				"opacity-75 hover:opacity-100 border-0 border-x-2 border-x-transparent border-solid",
+				isActive && "opacity-100 relative border-l-sky-400",
+				className,
+			)}
 			{...buttonProps}
 		/>
 	);
 };
-
-const styles = {
-	sidebarItem: (theme) => ({
-		fontSize: 13,
-		lineHeight: 1.2,
-		color: theme.palette.text.primary,
-		textDecoration: "none",
-		padding: "8px 16px",
-		display: "block",
-		textAlign: "left",
-		background: "none",
-		border: 0,
-		cursor: "pointer",
-
-		"&:hover": {
-			backgroundColor: theme.palette.action.hover,
-		},
-	}),
-
-	activeSidebarIconButton: (theme) => ({
-		opacity: 1,
-		position: "relative",
-		"&::before": {
-			content: '""',
-			position: "absolute",
-			left: 0,
-			top: 0,
-			bottom: 0,
-			width: 2,
-			backgroundColor: theme.palette.primary.main,
-			height: "100%",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/dashboard/DashboardLayout.tsx b/site/src/modules/dashboard/DashboardLayout.tsx
index 140d8602b2b32..2fdc04d21da9d 100644
--- a/site/src/modules/dashboard/DashboardLayout.tsx
+++ b/site/src/modules/dashboard/DashboardLayout.tsx
@@ -23,10 +23,10 @@ export const DashboardLayout: FC = () => {
 			{canViewDeployment && <LicenseBanner />}
 			<AnnouncementBanners />
 
-			<div className="flex flex-col min-h-full">
+			<div className="flex flex-col h-screen">
 				<Navbar />
 
-				<div className="flex flex-col flex-1 pb-12">
+				<div className="flex flex-col flex-1 min-h-0">
 					<Suspense fallback={<Loader />}>
 						<Outlet />
 					</Suspense>
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
index 14ecbe660d4a6..4a2b3027a47dd 100644
--- a/site/src/modules/dashboard/Navbar/NavbarView.tsx
+++ b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -51,7 +51,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	const webPush = useWebpushNotifications();
 
 	return (
-		<div className="border-0 border-b border-solid h-[72px] flex items-center leading-none px-6">
+		<div className="border-0 border-b border-solid h-[72px] min-h-[72px] flex items-center leading-none px-6">
 			<NavLink to="/workspaces">
 				{logo_url ? (
 					<ExternalImage className="h-7" src={logo_url} alt="Custom Logo" />
diff --git a/site/src/pages/WorkspacePage/HistorySidebar.tsx b/site/src/pages/WorkspacePage/HistorySidebar.tsx
index 2d978fb2a7d83..037aeec4b8b87 100644
--- a/site/src/pages/WorkspacePage/HistorySidebar.tsx
+++ b/site/src/pages/WorkspacePage/HistorySidebar.tsx
@@ -8,6 +8,7 @@ import {
 	SidebarItem,
 	SidebarLink,
 } from "components/FullPageLayout/Sidebar";
+import { ScrollArea } from "components/ScrollArea/ScrollArea";
 import { Spinner } from "components/Spinner/Spinner";
 import {
 	WorkspaceBuildData,
@@ -30,36 +31,40 @@ export const HistorySidebar: FC<HistorySidebarProps> = ({ workspace }) => {
 	return (
 		<Sidebar>
 			<SidebarCaption>History</SidebarCaption>
-			{builds
-				? builds.map((build) => (
-						<SidebarLink
-							target="_blank"
-							key={build.id}
-							to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
-						>
-							<WorkspaceBuildData build={build} />
-						</SidebarLink>
-					))
-				: Array.from({ length: 15 }, (_, i) => (
-						<SidebarItem key={i}>
-							<WorkspaceBuildDataSkeleton />
-						</SidebarItem>
-					))}
-			{buildsQuery.hasNextPage && (
-				<div css={{ padding: 16 }}>
-					<Button
-						onClick={() => buildsQuery.fetchNextPage()}
-						disabled={buildsQuery.isFetchingNextPage}
-						variant="outline"
-						className="w-full"
-					>
-						<Spinner loading={buildsQuery.isFetchingNextPage}>
-							<ArrowDownwardOutlined />
-						</Spinner>
-						Show more builds
-					</Button>
+			<ScrollArea>
+				<div className="flex flex-col gap-px">
+					{builds
+						? builds.map((build) => (
+								<SidebarLink
+									target="_blank"
+									key={build.id}
+									to={`/@${build.workspace_owner_name}/${build.workspace_name}/builds/${build.build_number}`}
+								>
+									<WorkspaceBuildData build={build} />
+								</SidebarLink>
+							))
+						: Array.from({ length: 15 }, (_, i) => (
+								<SidebarItem key={i}>
+									<WorkspaceBuildDataSkeleton />
+								</SidebarItem>
+							))}
+					{buildsQuery.hasNextPage && (
+						<div css={{ padding: 16 }}>
+							<Button
+								onClick={() => buildsQuery.fetchNextPage()}
+								disabled={buildsQuery.isFetchingNextPage}
+								variant="outline"
+								className="w-full"
+							>
+								<Spinner loading={buildsQuery.isFetchingNextPage}>
+									<ArrowDownwardOutlined />
+								</Spinner>
+								Show more builds
+							</Button>
+						</div>
+					)}
 				</div>
-			)}
+			</ScrollArea>
 		</Sidebar>
 	);
 };
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index 07c5ec26d0766..b96ddcdf7b7fe 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -1,5 +1,3 @@
-import type { Interpolation, Theme } from "@emotion/react";
-import { useTheme } from "@emotion/react";
 import HistoryOutlined from "@mui/icons-material/HistoryOutlined";
 import HubOutlined from "@mui/icons-material/HubOutlined";
 import AlertTitle from "@mui/material/AlertTitle";
@@ -68,7 +66,6 @@ export const Workspace: FC<WorkspaceProps> = ({
 	handleDebug,
 }) => {
 	const navigate = useNavigate();
-	const theme = useTheme();
 
 	const transitionStats =
 		template !== undefined ? ActiveTransition(template, workspace) : undefined;
@@ -100,18 +97,7 @@ export const Workspace: FC<WorkspaceProps> = ({
 		workspacePending && !haveBuildLogs && !provisionersHealthy && !isRestarting;
 
 	return (
-		<div
-			css={{
-				flex: 1,
-				display: "grid",
-				gridTemplate: `
-          "topbar topbar topbar" auto
-          "leftbar sidebar content" 1fr / auto auto 1fr
-        `,
-				// We need this to make the sidebar scrollable
-				overflow: "hidden",
-			}}
-		>
+		<div className="flex flex-col flex-1 min-h-0">
 			<WorkspaceTopbar
 				workspace={workspace}
 				template={template}
@@ -130,153 +116,133 @@ export const Workspace: FC<WorkspaceProps> = ({
 				handleToggleFavorite={handleToggleFavorite}
 			/>
 
-			<div
-				css={{
-					gridArea: "leftbar",
-					height: "100%",
-					overflowY: "auto",
-					borderRight: `1px solid ${theme.palette.divider}`,
-					display: "flex",
-					flexDirection: "column",
-				}}
-			>
-				<SidebarIconButton
-					isActive={sidebarOption.value === "resources"}
-					onClick={() => {
-						setSidebarOption("resources");
-					}}
-				>
-					<HubOutlined />
-				</SidebarIconButton>
-				<SidebarIconButton
-					isActive={sidebarOption.value === "history"}
-					onClick={() => {
-						setSidebarOption("history");
-					}}
-				>
-					<HistoryOutlined />
-				</SidebarIconButton>
-			</div>
-
-			{sidebarOption.value === "resources" && (
-				<ResourcesSidebar
-					failed={workspace.latest_build.status === "failed"}
-					resources={resources}
-					isSelected={resourcesNav.isSelected}
-					onChange={resourcesNav.select}
-				/>
-			)}
-			{sidebarOption.value === "history" && (
-				<HistorySidebar workspace={workspace} />
-			)}
-
-			<div css={[styles.content, styles.dotsBackground]}>
-				{selectedResource && (
-					<ResourceMetadata
-						resource={selectedResource}
-						css={{ margin: "-32px -32px 0 -32px", marginBottom: 24 }}
-					/>
-				)}
-				<div
-					css={{
-						display: "flex",
-						flexDirection: "column",
-						gap: 24,
-						maxWidth: 24 * 50,
-						margin: "auto",
-					}}
-				>
-					{workspace.latest_build.status === "deleted" && (
-						<WorkspaceDeletedBanner
-							handleClick={() => navigate("/templates")}
-						/>
-					)}
-
-					{shouldShowProvisionerAlert && (
-						<ProvisionerStatusAlert
-							matchingProvisioners={
-								workspace.latest_build.matched_provisioners?.count
-							}
-							availableProvisioners={
-								workspace.latest_build.matched_provisioners?.available ?? 0
-							}
-							tags={workspace.latest_build.job.tags}
+			<div className="flex flex-1 min-h-0">
+				<div className="flex">
+					<div className="flex flex-col h-full overflow-y-auto border-solid border-0 border-r border-r-border">
+						<SidebarIconButton
+							isActive={sidebarOption.value === "resources"}
+							onClick={() => {
+								setSidebarOption("resources");
+							}}
+						>
+							<HubOutlined />
+						</SidebarIconButton>
+						<SidebarIconButton
+							isActive={sidebarOption.value === "history"}
+							onClick={() => {
+								setSidebarOption("history");
+							}}
+						>
+							<HistoryOutlined />
+						</SidebarIconButton>
+					</div>
+
+					{sidebarOption.value === "resources" && (
+						<ResourcesSidebar
+							failed={workspace.latest_build.status === "failed"}
+							resources={resources}
+							isSelected={resourcesNav.isSelected}
+							onChange={resourcesNav.select}
 						/>
 					)}
-
-					{workspace.latest_build.job.error && (
-						<Alert severity="error">
-							<AlertTitle>Workspace build failed</AlertTitle>
-							<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
-						</Alert>
+					{sidebarOption.value === "history" && (
+						<HistorySidebar workspace={workspace} />
 					)}
+				</div>
 
-					{transitionStats !== undefined && (
-						<WorkspaceBuildProgress
-							workspace={workspace}
-							transitionStats={transitionStats}
+				<div
+					style={{
+						background: `radial-gradient(
+			circle at 1px 1px,
+			hsl(var(--surface-invert-secondary)) 0,
+			transparent 1px
+		) -2px -2px / 16px 16px`,
+					}}
+					className="p-8 overflow-y-auto relative w-full"
+				>
+					{selectedResource && (
+						<ResourceMetadata
+							resource={selectedResource}
+							className="-mx-8 -mt-8 mb-6"
 						/>
 					)}
-
-					{shouldShowBuildLogs && (
-						<WorkspaceBuildLogsSection logs={buildLogs} />
-					)}
-
-					{selectedResource && (
-						<section
-							css={{
-								display: "flex",
-								flexDirection: "column",
-								gap: 24,
-								flexGrow: 1,
-								minWidth: 0 /* Prevent overflow */,
-							}}
-						>
-							{selectedResource.agents
-								// If an agent has a `parent_id`, that means it is
-								// child of another agent. We do not want these agents
-								// to be displayed at the top-level on this page. We
-								// want them to display _as children_ of their parents.
-								?.filter((agent) => agent.parent_id === null)
-								.map((agent) => (
-									<AgentRow
-										key={agent.id}
-										agent={agent}
-										subAgents={selectedResource.agents?.filter(
-											(a) => a.parent_id === agent.id,
-										)}
-										workspace={workspace}
-										template={template}
-										onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
-									/>
-								))}
-
-							{(!selectedResource.agents ||
-								selectedResource.agents?.length === 0) && (
-								<div
-									css={{
-										display: "flex",
-										justifyContent: "center",
-										alignItems: "center",
-										width: "100%",
-										height: "100%",
-									}}
-								>
-									<div>
-										<h4 css={{ fontSize: 16, fontWeight: 500 }}>
-											No agents are currently assigned to this resource.
-										</h4>
+					<div className="flex flex-col gap-6 max-w-[1200px] m-auto">
+						{workspace.latest_build.status === "deleted" && (
+							<WorkspaceDeletedBanner
+								handleClick={() => navigate("/templates")}
+							/>
+						)}
+
+						{shouldShowProvisionerAlert && (
+							<ProvisionerStatusAlert
+								matchingProvisioners={
+									workspace.latest_build.matched_provisioners?.count
+								}
+								availableProvisioners={
+									workspace.latest_build.matched_provisioners?.available ?? 0
+								}
+								tags={workspace.latest_build.job.tags}
+							/>
+						)}
+
+						{workspace.latest_build.job.error && (
+							<Alert severity="error">
+								<AlertTitle>Workspace build failed</AlertTitle>
+								<AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
+							</Alert>
+						)}
+
+						{transitionStats !== undefined && (
+							<WorkspaceBuildProgress
+								workspace={workspace}
+								transitionStats={transitionStats}
+							/>
+						)}
+
+						{shouldShowBuildLogs && (
+							<WorkspaceBuildLogsSection logs={buildLogs} />
+						)}
+
+						{selectedResource && (
+							<section className="flex flex-col gap-6 flex-grow min-w-0">
+								{selectedResource.agents
+									// If an agent has a `parent_id`, that means it is
+									// child of another agent. We do not want these agents
+									// to be displayed at the top-level on this page. We
+									// want them to display _as children_ of their parents.
+									?.filter((agent) => agent.parent_id === null)
+									.map((agent) => (
+										<AgentRow
+											key={agent.id}
+											agent={agent}
+											subAgents={selectedResource.agents?.filter(
+												(a) => a.parent_id === agent.id,
+											)}
+											workspace={workspace}
+											template={template}
+											onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
+										/>
+									))}
+
+								{(!selectedResource.agents ||
+									selectedResource.agents?.length === 0) && (
+									<div className="flex justify-center items-center w-full h-full">
+										<div>
+											<h4 className="text-base font-medium">
+												No agents are currently assigned to this resource.
+											</h4>
+										</div>
 									</div>
-								</div>
-							)}
-						</section>
-					)}
-
-					<WorkspaceTimings
-						provisionerTimings={timings?.provisioner_timings}
-						agentScriptTimings={timings?.agent_script_timings}
-						agentConnectionTimings={timings?.agent_connection_timings}
-					/>
+								)}
+							</section>
+						)}
+
+						<WorkspaceTimings
+							provisionerTimings={timings?.provisioner_timings}
+							agentScriptTimings={timings?.agent_script_timings}
+							agentConnectionTimings={timings?.agent_connection_timings}
+						/>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -286,33 +252,3 @@ export const Workspace: FC<WorkspaceProps> = ({
 const countAgents = (resource: TypesGen.WorkspaceResource) => {
 	return resource.agents ? resource.agents.length : 0;
 };
-
-const styles = {
-	content: {
-		padding: 32,
-		gridArea: "content",
-		overflowY: "auto",
-		position: "relative",
-	},
-
-	dotsBackground: (theme) => ({
-		"--d": "1px",
-		background: `
-      radial-gradient(
-        circle at
-          var(--d)
-          var(--d),
-
-        ${theme.palette.dots} calc(var(--d) - 1px),
-        ${theme.palette.background.default} var(--d)
-      )
-      -2px -2px / 16px 16px
-    `,
-	}),
-
-	actions: (theme) => ({
-		[theme.breakpoints.down("md")]: {
-			flexDirection: "column",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19340.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19340.diff" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19340.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/19340.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>