diff --git a/site/src/@types/mui.d.ts b/site/src/@types/mui.d.ts
index 255981fdf60fc..e2cd8d3d1493c 100644
--- a/site/src/@types/mui.d.ts
+++ b/site/src/@types/mui.d.ts
@@ -3,10 +3,12 @@ import type { PaletteColor, PaletteColorOptions } from "@mui/material/styles";
 declare module "@mui/material/styles" {
   interface Palette {
     neutral: PaletteColor;
+    dots: string;
   }
 
   interface PaletteOptions {
     neutral?: PaletteColorOptions;
+    dots?: string;
   }
 }
 
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
index 886862d96d119..e3d16bb1b6c01 100644
--- a/site/src/components/Resources/AgentMetadata.tsx
+++ b/site/src/components/Resources/AgentMetadata.tsx
@@ -248,7 +248,7 @@ const styles = {
   },
 
   metadataValueSuccess: (theme) => ({
-    color: theme.experimental.roles.success.outline,
+    color: theme.experimental.roles.success.fill,
   }),
 
   metadataValueError: (theme) => ({
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 81abc9fbb45b6..c0663116435ff 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -509,6 +509,7 @@ const styles = {
     border: `1px solid ${theme.palette.text.secondary}`,
     backgroundColor: theme.palette.background.default,
     borderRadius: 8,
+    boxShadow: theme.shadows[3],
   }),
 
   "agentRow-connected": (theme) => ({
@@ -562,14 +563,13 @@ const styles = {
   }),
 
   header: (theme) => ({
-    padding: "12px 24px",
+    padding: "16px 16px 0 32px",
     display: "flex",
     gap: 24,
     alignItems: "center",
     justifyContent: "space-between",
     flexWrap: "wrap",
     lineHeight: "1.5",
-    borderBottom: `1px solid ${theme.palette.divider}`,
 
     [theme.breakpoints.down("md")]: {
       gap: 16,
@@ -581,7 +581,7 @@ const styles = {
     alignItems: "center",
     gap: 24,
     color: theme.palette.text.secondary,
-    fontSize: 13,
+    fontSize: 14,
   }),
 
   agentNameAndInfo: (theme) => ({
@@ -596,7 +596,7 @@ const styles = {
   }),
 
   content: {
-    padding: "32px 24px",
+    padding: 32,
     display: "flex",
     flexDirection: "column",
     gap: 32,
@@ -637,7 +637,7 @@ const styles = {
   agentNameAndStatus: (theme) => ({
     display: "flex",
     alignItems: "center",
-    gap: 12,
+    gap: 16,
 
     [theme.breakpoints.down("md")]: {
       width: "100%",
@@ -652,7 +652,7 @@ const styles = {
     fontWeight: 600,
     flexShrink: 0,
     width: "fit-content",
-    fontSize: 14,
+    fontSize: 16,
     color: theme.palette.text.primary,
 
     [theme.breakpoints.down("md")]: {
@@ -682,7 +682,7 @@ const styles = {
     background: "transparent",
     border: 0,
     fontFamily: "inherit",
-    padding: "12px 24px",
+    padding: "16px 32px",
     color: theme.palette.text.secondary,
     cursor: "pointer",
     display: "flex",
diff --git a/site/src/pages/WorkspacePage/ResourceMetadata.tsx b/site/src/pages/WorkspacePage/ResourceMetadata.tsx
index c2385e8bc4a00..bc7aeda23ed89 100644
--- a/site/src/pages/WorkspacePage/ResourceMetadata.tsx
+++ b/site/src/pages/WorkspacePage/ResourceMetadata.tsx
@@ -68,7 +68,7 @@ const styles = {
     rowGap: 24,
     marginBottom: 24,
     fontSize: 14,
-    background: `linear-gradient(180deg, ${theme.palette.background.default} 0%, rgba(0, 0, 0, 0) 100%)`,
+    background: `linear-gradient(180deg, ${theme.palette.background.default} 25%, rgba(0, 0, 0, 0) 100%)`,
   }),
 
   item: () => ({
diff --git a/site/src/pages/WorkspacePage/Workspace.tsx b/site/src/pages/WorkspacePage/Workspace.tsx
index c6f1b93fc717a..4ecf95bc2527f 100644
--- a/site/src/pages/WorkspacePage/Workspace.tsx
+++ b/site/src/pages/WorkspacePage/Workspace.tsx
@@ -182,101 +182,97 @@ export const Workspace: FC<WorkspaceProps> = ({
         <HistorySidebar workspace={workspace} />
       )}
 
-      <div css={styles.content}>
-        <div css={styles.dotBackground}>
-          {selectedResource && (
-            <ResourceMetadata
-              resource={selectedResource}
-              css={{ margin: "-48px 0 24px -48px" }}
+      <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`)}
             />
           )}
-          <div
-            css={{
-              display: "flex",
-              flexDirection: "column",
-              gap: 24,
-              maxWidth: 24 * 50,
-              margin: "auto",
-            }}
-          >
-            {workspace.latest_build.status === "deleted" && (
-              <WorkspaceDeletedBanner
-                handleClick={() => navigate(`/templates`)}
-              />
-            )}
 
-            {workspace.latest_build.job.error && (
-              <Alert
-                severity="error"
-                actions={
-                  <Button
-                    onClick={
-                      canRetryDebugMode
-                        ? handleBuildRetryDebug
-                        : handleBuildRetry
-                    }
-                    variant="text"
-                    size="small"
-                  >
-                    Retry{canRetryDebugMode && " in debug mode"}
-                  </Button>
-                }
-              >
-                <AlertTitle>Workspace build failed</AlertTitle>
-                <AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
-              </Alert>
-            )}
+          {workspace.latest_build.job.error && (
+            <Alert
+              severity="error"
+              actions={
+                <Button
+                  onClick={
+                    canRetryDebugMode ? handleBuildRetryDebug : handleBuildRetry
+                  }
+                  variant="text"
+                  size="small"
+                >
+                  Retry{canRetryDebugMode && " in debug mode"}
+                </Button>
+              }
+            >
+              <AlertTitle>Workspace build failed</AlertTitle>
+              <AlertDetail>{workspace.latest_build.job.error}</AlertDetail>
+            </Alert>
+          )}
 
-            {transitionStats !== undefined && (
-              <WorkspaceBuildProgress
-                workspace={workspace}
-                transitionStats={transitionStats}
-              />
-            )}
+          {transitionStats !== undefined && (
+            <WorkspaceBuildProgress
+              workspace={workspace}
+              transitionStats={transitionStats}
+            />
+          )}
 
-            {buildLogs}
+          {buildLogs}
 
-            {selectedResource && (
-              <section
-                css={{ display: "flex", flexDirection: "column", gap: 24 }}
-              >
-                {selectedResource.agents?.map((agent) => (
-                  <AgentRow
-                    key={agent.id}
-                    agent={agent}
-                    workspace={workspace}
-                    sshPrefix={sshPrefix}
-                    showApps={permissions.updateWorkspace}
-                    showBuiltinApps={permissions.updateWorkspace}
-                    hideSSHButton={hideSSHButton}
-                    hideVSCodeDesktopButton={hideVSCodeDesktopButton}
-                    serverVersion={buildInfo?.version || ""}
-                    serverAPIVersion={buildInfo?.agent_api_version || ""}
-                    onUpdateAgent={handleUpdate} // On updating the workspace the agent version is also updated
-                  />
-                ))}
+          {selectedResource && (
+            <section
+              css={{ display: "flex", flexDirection: "column", gap: 24 }}
+            >
+              {selectedResource.agents?.map((agent) => (
+                <AgentRow
+                  key={agent.id}
+                  agent={agent}
+                  workspace={workspace}
+                  sshPrefix={sshPrefix}
+                  showApps={permissions.updateWorkspace}
+                  showBuiltinApps={permissions.updateWorkspace}
+                  hideSSHButton={hideSSHButton}
+                  hideVSCodeDesktopButton={hideVSCodeDesktopButton}
+                  serverVersion={buildInfo?.version || ""}
+                  serverAPIVersion={buildInfo?.agent_api_version || ""}
+                  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>
+              {(!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>
-                )}
-              </section>
-            )}
-          </div>
+                </div>
+              )}
+            </section>
+          )}
         </div>
       </div>
     </div>
@@ -289,15 +285,13 @@ const countAgents = (resource: TypesGen.WorkspaceResource) => {
 
 const styles = {
   content: {
-    padding: 24,
+    padding: 32,
     gridArea: "content",
     overflowY: "auto",
     position: "relative",
   },
 
-  dotBackground: (theme) => ({
-    minHeight: "100%",
-    padding: 23,
+  dotsBackground: (theme) => ({
     "--d": "1px",
     background: `
       radial-gradient(
@@ -305,10 +299,10 @@ const styles = {
           var(--d)
           var(--d),
 
-        ${theme.palette.text.secondary} calc(var(--d) - 1px),
+        ${theme.palette.dots} calc(var(--d) - 1px),
         ${theme.palette.background.default} var(--d)
       )
-      0 0 / 24px 24px
+      -2px -2px / 16px 16px
     `,
   }),
 
diff --git a/site/src/theme/dark/mui.ts b/site/src/theme/dark/mui.ts
index 52927eda2e0c9..310c116579328 100644
--- a/site/src/theme/dark/mui.ts
+++ b/site/src/theme/dark/mui.ts
@@ -54,6 +54,7 @@ const muiTheme = createTheme({
     neutral: {
       main: tw.zinc[50],
     },
+    dots: tw.zinc[500],
   },
   typography: {
     fontFamily: BODY_FONT_FAMILY,
diff --git a/site/src/theme/darkBlue/mui.ts b/site/src/theme/darkBlue/mui.ts
index ecf5022323005..65da18b772739 100644
--- a/site/src/theme/darkBlue/mui.ts
+++ b/site/src/theme/darkBlue/mui.ts
@@ -54,6 +54,7 @@ const muiTheme = createTheme({
     neutral: {
       main: tw.gray[50],
     },
+    dots: tw.gray[500],
   },
   typography: {
     fontFamily: BODY_FONT_FAMILY,
diff --git a/site/src/theme/light/mui.ts b/site/src/theme/light/mui.ts
index e508dabc3c789..a5af28ee39368 100644
--- a/site/src/theme/light/mui.ts
+++ b/site/src/theme/light/mui.ts
@@ -56,6 +56,7 @@ const muiTheme = createTheme({
     neutral: {
       main: tw.zinc[950],
     },
+    dots: tw.zinc[400],
   },
   typography: {
     fontFamily: BODY_FONT_FAMILY,

<!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/11822.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/11822.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/11822.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/11822.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>