diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
index 2ac76d686b457..6e1df2055ecdd 100644
--- a/site/src/components/AppLink/AppLink.tsx
+++ b/site/src/components/AppLink/AppLink.tsx
@@ -84,7 +84,6 @@ export const AppLink: FC<AppLinkProps> = ({
 
   const button = (
     <Button
-      size="small"
       startIcon={icon}
       endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
       className={styles.button}
@@ -136,9 +135,18 @@ const useStyles = makeStyles((theme) => ({
   button: {
     whiteSpace: "nowrap",
     backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(0, 3),
+    height: 44,
+    borderRadius: 6,
 
     "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`,
+      backgroundColor: `${theme.palette.background.paper} !important`,
+    },
+
+    "& .MuiButton-startIcon": {
+      width: 16,
+      height: 16,
+      marginRight: theme.spacing(1.5),
     },
   },
 
diff --git a/site/src/components/Logs/Logs.tsx b/site/src/components/Logs/Logs.tsx
index 1918231d69512..99c1e18f156dc 100644
--- a/site/src/components/Logs/Logs.tsx
+++ b/site/src/components/Logs/Logs.tsx
@@ -41,7 +41,7 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
                     ? idx + 1
                     : dayjs(line.time).format(`HH:mm:ss.SSS`)}
                 </span>
-                <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                <span className={styles.space} />
               </>
             )}
             <span>{line.output}</span>
@@ -76,7 +76,7 @@ export const LogLine: FC<{
           <span className={styles.time}>
             {number ? number : dayjs(line.time).format(`HH:mm:ss.SSS`)}
           </span>
-          <span className={styles.space}>&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <span className={styles.space} />
         </>
       )}
       <span
@@ -96,7 +96,6 @@ const useStyles = makeStyles<
 >((theme) => ({
   root: {
     minHeight: 156,
-    fontSize: 13,
     padding: theme.spacing(2, 0),
     borderRadius: theme.shape.borderRadius,
     overflowX: "auto",
@@ -107,12 +106,14 @@ const useStyles = makeStyles<
   },
   line: {
     wordBreak: "break-all",
+    display: "flex",
+    fontSize: 14,
     color: theme.palette.text.primary,
     fontFamily: MONOSPACE_FONT_FAMILY,
     height: ({ lineNumbers }) => (lineNumbers ? logLineHeight : "auto"),
     // Whitespace is significant in terminal output for alignment
     whiteSpace: "pre",
-    padding: theme.spacing(0, 3),
+    padding: theme.spacing(0, 4),
 
     "&.error": {
       backgroundColor: theme.palette.error.dark,
@@ -128,6 +129,9 @@ const useStyles = makeStyles<
   },
   space: {
     userSelect: "none",
+    width: theme.spacing(3),
+    display: "block",
+    flexShrink: 0,
   },
   time: {
     userSelect: "none",
diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
index ff3209fb44d40..b6bf66b93682f 100644
--- a/site/src/components/PortForwardButton/PortForwardButton.tsx
+++ b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -3,7 +3,6 @@ import Link from "@material-ui/core/Link"
 import Popover from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
-import OpenInNewOutlined from "@material-ui/icons/OpenInNewOutlined"
 import { Stack } from "components/Stack/Stack"
 import { useRef, useState, Fragment } from "react"
 import { colors } from "theme/colors"
@@ -149,8 +148,8 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
   return (
     <>
       <Button
+        variant="outlined"
         className={styles.button}
-        startIcon={<OpenInNewOutlined />}
         size="small"
         ref={anchorRef}
         onClick={() => {
@@ -211,11 +210,10 @@ const useStyles = makeStyles((theme) => ({
   },
 
   button: {
-    whiteSpace: "nowrap",
-    backgroundColor: theme.palette.background.default,
-
-    "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`,
-    },
+    fontSize: 12,
+    fontWeight: 500,
+    height: theme.spacing(4),
+    minHeight: theme.spacing(4),
+    borderRadius: 4,
   },
 }))
diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
index 87f8f98832420..60c9867396d30 100644
--- a/site/src/components/Resources/AgentMetadata.tsx
+++ b/site/src/components/Resources/AgentMetadata.tsx
@@ -1,90 +1,19 @@
-import Popover from "@material-ui/core/Popover"
-import CircularProgress from "@material-ui/core/CircularProgress"
 import makeStyles from "@material-ui/core/styles/makeStyles"
 import { watchAgentMetadata } from "api/api"
 import { WorkspaceAgent, WorkspaceAgentMetadata } from "api/typesGenerated"
-import { CodeExample } from "components/CodeExample/CodeExample"
 import { Stack } from "components/Stack/Stack"
-import {
-  HelpTooltipText,
-  HelpTooltipTitle,
-} from "components/Tooltips/HelpTooltip"
 import dayjs from "dayjs"
-import {
-  createContext,
-  FC,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
-import { humanDuration } from "utils/duration"
+import { createContext, FC, useContext, useEffect, useState } from "react"
+import { Skeleton } from "@material-ui/lab"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 
-export const WatchAgentMetadataContext = createContext(watchAgentMetadata)
+type ItemStatus = "stale" | "valid" | "loading"
 
-const MetadataItemValue: FC<
-  PropsWithChildren<{ item: WorkspaceAgentMetadata }>
-> = ({ item, children }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const styles = useStyles()
-  return (
-    <>
-      <div
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        role="presentation"
-      >
-        {children}
-      </div>
-      <Popover
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onClose={() => setIsOpen(false)}
-        PaperProps={{
-          onMouseEnter: () => setIsOpen(true),
-          onMouseLeave: () => setIsOpen(false),
-        }}
-        classes={{ paper: styles.metadataPopover }}
-      >
-        <HelpTooltipTitle>{item.description.display_name}</HelpTooltipTitle>
-        {item.result.value.length > 0 && (
-          <>
-            <HelpTooltipText>Last result:</HelpTooltipText>
-            <HelpTooltipText>
-              <CodeExample code={item.result.value} />
-            </HelpTooltipText>
-          </>
-        )}
-        {item.result.error.length > 0 && (
-          <>
-            <HelpTooltipText>Last error:</HelpTooltipText>
-            <HelpTooltipText>
-              <CodeExample code={item.result.error} />
-            </HelpTooltipText>
-          </>
-        )}
-      </Popover>
-    </>
-  )
-}
+export const WatchAgentMetadataContext = createContext(watchAgentMetadata)
 
 const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   const styles = useStyles()
 
-  const [isOpen, setIsOpen] = useState(false)
-
-  const labelAnchorRef = useRef<HTMLDivElement>(null)
-
   if (item.result === undefined) {
     throw new Error("Metadata item result is undefined")
   }
@@ -97,7 +26,7 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
     5,
   )
 
-  const status: "stale" | "valid" | "loading" = (() => {
+  const status: ItemStatus = (() => {
     const year = dayjs(item.result.collected_at).year()
     if (year <= 1970 || isNaN(year)) {
       return "loading"
@@ -113,7 +42,12 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
   // could be buggy. But, how common is that anyways?
   const value =
     status === "stale" || status === "loading" ? (
-      <CircularProgress size={12} />
+      <Skeleton
+        width={65}
+        height={12}
+        variant="text"
+        className={styles.skeleton}
+      />
     ) : (
       <div
         className={
@@ -128,72 +62,13 @@ const MetadataItem: FC<{ item: WorkspaceAgentMetadata }> = ({ item }) => {
       </div>
     )
 
-  const updatesInSeconds = -(item.description.interval - item.result.age)
-
   return (
-    <>
-      <div className={styles.metadata}>
-        <div
-          className={styles.metadataLabel}
-          onMouseEnter={() => setIsOpen(true)}
-          role="presentation"
-          ref={labelAnchorRef}
-        >
-          {item.description.display_name}
-        </div>
-        <MetadataItemValue item={item}>{value}</MetadataItemValue>
+    <div className={styles.metadata}>
+      <div className={styles.metadataLabel}>
+        {item.description.display_name}
       </div>
-      <Popover
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        open={isOpen}
-        anchorEl={labelAnchorRef.current}
-        onClose={() => setIsOpen(false)}
-        PaperProps={{
-          onMouseEnter: () => setIsOpen(true),
-          onMouseLeave: () => setIsOpen(false),
-        }}
-        classes={{ paper: styles.metadataPopover }}
-      >
-        <HelpTooltipTitle>{item.description.display_name}</HelpTooltipTitle>
-        {status === "stale" ? (
-          <HelpTooltipText>
-            This item is now stale because the agent hasn{"'"}t reported a new
-            value in {humanDuration(item.result.age, "s")}.
-          </HelpTooltipText>
-        ) : (
-          <></>
-        )}
-        {status === "valid" ? (
-          <HelpTooltipText>
-            The agent collected this value {humanDuration(item.result.age, "s")}{" "}
-            ago and will update it in{" "}
-            {humanDuration(Math.min(updatesInSeconds, 0), "s")}.
-          </HelpTooltipText>
-        ) : (
-          <></>
-        )}
-        {status === "loading" ? (
-          <HelpTooltipText>
-            This value is loading for the first time...
-          </HelpTooltipText>
-        ) : (
-          <></>
-        )}
-        <HelpTooltipText>
-          This value is produced by the following script:
-        </HelpTooltipText>
-        <HelpTooltipText>
-          <CodeExample code={item.description.script}></CodeExample>
-        </HelpTooltipText>
-      </Popover>
-    </>
+      <div>{value}</div>
+    </div>
   )
 }
 
@@ -207,21 +82,16 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
     return <></>
   }
   return (
-    <Stack
-      alignItems="flex-start"
-      direction="row"
-      spacing={5}
-      className={styles.metadataStack}
-    >
-      <div className={styles.metadataHeader}>
+    <div className={styles.root}>
+      <Stack alignItems="baseline" direction="row" spacing={6}>
         {metadata.map((m) => {
           if (m.description === undefined) {
             throw new Error("Metadata item description is undefined")
           }
           return <MetadataItem key={m.description.key} item={m} />
         })}
-      </div>
-    </Stack>
+      </Stack>
+    </div>
   )
 }
 
@@ -232,8 +102,8 @@ export const AgentMetadata: FC<{
   const [metadata, setMetadata] = useState<
     WorkspaceAgentMetadata[] | undefined
   >(undefined)
-
   const watchAgentMetadata = useContext(WatchAgentMetadataContext)
+  const styles = useStyles()
 
   useEffect(() => {
     if (storybookMetadata !== undefined) {
@@ -272,13 +142,8 @@ export const AgentMetadata: FC<{
 
   if (metadata === undefined) {
     return (
-      <div
-        style={{
-          marginTop: 16,
-          marginBottom: 16,
-        }}
-      >
-        <CircularProgress size={16} />
+      <div className={styles.root}>
+        <AgentMetadataSkeleton />
       </div>
     )
   }
@@ -286,34 +151,52 @@ export const AgentMetadata: FC<{
   return <AgentMetadataView metadata={metadata} />
 }
 
+export const AgentMetadataSkeleton: FC = () => {
+  const styles = useStyles()
+
+  return (
+    <Stack alignItems="baseline" direction="row" spacing={6}>
+      <div className={styles.metadata}>
+        <Skeleton width={40} height={12} variant="text" />
+        <Skeleton width={65} height={14} variant="text" />
+      </div>
+
+      <div className={styles.metadata}>
+        <Skeleton width={40} height={12} variant="text" />
+        <Skeleton width={65} height={14} variant="text" />
+      </div>
+
+      <div className={styles.metadata}>
+        <Skeleton width={40} height={12} variant="text" />
+        <Skeleton width={65} height={14} variant="text" />
+      </div>
+    </Stack>
+  )
+}
+
 // These are more or less copied from
 // site/src/components/Resources/ResourceCard.tsx
 const useStyles = makeStyles((theme) => ({
-  metadataStack: {
-    border: `2px dashed ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius,
-    width: "100%",
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
-  },
-  metadataHeader: {
-    padding: "8px",
-    display: "flex",
-    gap: theme.spacing(5),
-    rowGap: theme.spacing(3),
+  root: {
+    padding: theme.spacing(2.5, 4),
+    borderTop: `1px solid ${theme.palette.divider}`,
+    background: theme.palette.background.paper,
   },
-
   metadata: {
-    fontSize: 16,
+    fontSize: 12,
+    lineHeight: "normal",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5),
+    overflow: "visible",
   },
 
   metadataLabel: {
-    fontSize: 12,
     color: theme.palette.text.secondary,
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
-    fontWeight: "bold",
+    fontWeight: 500,
   },
 
   metadataValue: {
@@ -321,30 +204,27 @@ const useStyles = makeStyles((theme) => ({
     overflow: "hidden",
     whiteSpace: "nowrap",
     maxWidth: "16em",
+    fontSize: 14,
   },
 
   metadataValueSuccess: {
     color: theme.palette.success.light,
   },
+
   metadataValueError: {
     color: theme.palette.error.main,
   },
 
-  metadataPopover: {
+  skeleton: {
     marginTop: theme.spacing(0.5),
-    padding: theme.spacing(2.5),
-    color: theme.palette.text.secondary,
-    pointerEvents: "auto",
-    maxWidth: "480px",
-
-    "& .MuiButton-root": {
-      padding: theme.spacing(1, 2),
-      borderRadius: 0,
-      border: 0,
+  },
 
-      "&:hover": {
-        background: theme.palette.action.hover,
-      },
-    },
+  inlineCommand: {
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    display: "inline-block",
+    fontWeight: 600,
+    margin: 0,
+    borderRadius: 4,
+    color: theme.palette.text.primary,
   },
 }))
diff --git a/site/src/components/Resources/AgentRow.stories.tsx b/site/src/components/Resources/AgentRow.stories.tsx
index 76678370fe723..c990291cdc7ea 100644
--- a/site/src/components/Resources/AgentRow.stories.tsx
+++ b/site/src/components/Resources/AgentRow.stories.tsx
@@ -43,22 +43,71 @@ const defaultAgentMetadata = [
     result: {
       collected_at: "2021-05-05T00:00:00Z",
       error: "",
-      value: "defvalue",
+      value: "Master",
       age: 5,
     },
     description: {
-      display_name: "DisPlay",
-      key: "defkey",
+      display_name: "Branch",
+      key: "branch",
       interval: 10,
       timeout: 10,
-      script: "some command",
+      script: "git branch",
+    },
+  },
+  {
+    result: {
+      collected_at: "2021-05-05T00:00:00Z",
+      error: "",
+      value: "No changes",
+      age: 5,
+    },
+    description: {
+      display_name: "Changes",
+      key: "changes",
+      interval: 10,
+      timeout: 10,
+      script: "git diff",
+    },
+  },
+  {
+    result: {
+      collected_at: "2021-05-05T00:00:00Z",
+      error: "",
+      value: "2%",
+      age: 5,
+    },
+    description: {
+      display_name: "CPU Usage",
+      key: "cpuUsage",
+      interval: 10,
+      timeout: 10,
+      script: "cpu.sh",
+    },
+  },
+  {
+    result: {
+      collected_at: "2021-05-05T00:00:00Z",
+      error: "",
+      value: "3%",
+      age: 5,
+    },
+    description: {
+      display_name: "Disk Usage",
+      key: "diskUsage",
+      interval: 10,
+      timeout: 10,
+      script: "disk.sh",
     },
   },
 ]
 
 export const Example = Template.bind({})
 Example.args = {
-  agent: MockWorkspaceAgent,
+  agent: {
+    ...MockWorkspaceAgent,
+    startup_script:
+      'set -eux -o pipefail\n\n# install and start code-server\ncurl -fsSL https://code-server.dev/install.sh | sh -s -- --method=standalone --prefix=/tmp/code-server --version 4.8.3\n/tmp/code-server/bin/code-server --auth none --port 13337 >/tmp/code-server.log 2>&1 &\n\n\nif [ ! -d ~/coder ]; then\n  mkdir -p ~/coder\n\n  git clone https://github.com/coder/coder ~/coder\nfi\n\nsudo service docker start\nDOTFILES_URI=" "\nrm -f ~/.personalize.log\nif [ -n "${DOTFILES_URI// }" ]; then\n  coder dotfiles "$DOTFILES_URI" -y 2>&1 | tee -a ~/.personalize.log\nfi\nif [ -x ~/personalize ]; then\n  ~/personalize 2>&1 | tee -a ~/.personalize.log\nelif [ -f ~/personalize ]; then\n  echo "~/personalize is not executable, skipping..." | tee -a ~/.personalize.log\nfi\n',
+  },
   workspace: MockWorkspace,
   applicationsHost: "",
   showApps: true,
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 75d5bea2268a2..fc388b9ddc03a 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -1,13 +1,12 @@
-import Link from "@material-ui/core/Link"
 import Popover from "@material-ui/core/Popover"
 import { makeStyles, useTheme } from "@material-ui/core/styles"
-import PlayCircleOutlined from "@material-ui/icons/PlayCircleFilledOutlined"
-import VisibilityOffOutlined from "@material-ui/icons/VisibilityOffOutlined"
-import VisibilityOutlined from "@material-ui/icons/VisibilityOutlined"
 import { Skeleton } from "@material-ui/lab"
 import { useMachine } from "@xstate/react"
-import { AppLinkSkeleton } from "components/AppLink/AppLinkSkeleton"
-import { Maybe } from "components/Conditionals/Maybe"
+import CodeOutlined from "@material-ui/icons/CodeOutlined"
+import {
+  CloseDropdown,
+  OpenDropdown,
+} from "components/DropdownArrows/DropdownArrows"
 import { LogLine, logLineHeight } from "components/Logs/Logs"
 import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
 import { VSCodeDesktopButton } from "components/VSCodeDesktopButton/VSCodeDesktopButton"
@@ -20,11 +19,12 @@ import {
   useRef,
   useState,
 } from "react"
-import { useTranslation } from "react-i18next"
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
 import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism"
 import AutoSizer from "react-virtualized-auto-sizer"
 import { FixedSizeList as List, ListOnScrollProps } from "react-window"
+import { colors } from "theme/colors"
+import { combineClasses } from "utils/combineClasses"
 import {
   LineWithID,
   workspaceAgentLogsMachine,
@@ -40,8 +40,8 @@ import { Stack } from "../Stack/Stack"
 import { TerminalLink } from "../TerminalLink/TerminalLink"
 import { AgentLatency } from "./AgentLatency"
 import { AgentMetadata } from "./AgentMetadata"
-import { AgentStatus } from "./AgentStatus"
 import { AgentVersion } from "./AgentVersion"
+import { AgentStatus } from "./AgentStatus"
 
 export interface AgentRowProps {
   agent: WorkspaceAgent
@@ -53,7 +53,6 @@ export interface AgentRowProps {
   hideVSCodeDesktopButton?: boolean
   serverVersion: string
   onUpdateAgent: () => void
-
   storybookStartupLogs?: LineWithID[]
   storybookAgentMetadata?: WorkspaceAgentMetadata[]
 }
@@ -72,7 +71,6 @@ export const AgentRow: FC<AgentRowProps> = ({
   sshPrefix,
 }) => {
   const styles = useStyles()
-  const { t } = useTranslation("agent")
   const [logsMachine, sendLogsEvent] = useMachine(workspaceAgentLogsMachine, {
     context: { agentID: agent.id },
     services: process.env.STORYBOOK
@@ -87,9 +85,13 @@ export const AgentRow: FC<AgentRowProps> = ({
       : undefined,
   })
   const theme = useTheme()
-  const startupScriptAnchorRef = useRef<HTMLLinkElement>(null)
+  const startupScriptAnchorRef = useRef<HTMLButtonElement>(null)
   const [startupScriptOpen, setStartupScriptOpen] = useState(false)
-
+  const hasAppsToDisplay = !hideVSCodeDesktopButton || agent.apps.length > 0
+  const shouldDisplayApps =
+    showApps &&
+    ((agent.status === "connected" && hasAppsToDisplay) ||
+      agent.status === "connecting")
   const hasStartupFeatures =
     Boolean(agent.startup_logs_length) ||
     Boolean(logsMachine.context.startupLogs?.length)
@@ -167,303 +169,431 @@ export const AgentRow: FC<AgentRowProps> = ({
 
   return (
     <Stack
-      direction="column"
       key={agent.id}
+      direction="column"
       spacing={0}
-      className={styles.agentWrapper}
+      className={combineClasses([
+        styles.agentRow,
+        styles[`agentRow-${agent.status}`],
+        styles[`agentRow-lifecycle-${agent.lifecycle_state}`],
+      ])}
     >
       <Stack
         direction="row"
         alignItems="center"
-        className={styles.agentRow}
-        spacing={4}
-        style={{
-          justifyContent: "none",
-          alignItems: "center",
-        }}
+        spacing={6}
+        className={styles.agentInfo}
       >
-        <div className={styles.agentStatusWrapper}>
-          <AgentStatus agent={agent} />
-        </div>
-        <div
-          style={{
-            flex: 1,
-          }}
-        >
-          <Stack
-            direction="row"
-            alignItems="center"
-            style={{
-              width: "100%",
-              justifyContent: "space-between",
-            }}
-          >
-            <Stack direction="row" alignItems="baseline">
-              <div>
-                <div className={styles.agentName}>{agent.name}</div>
-                <Stack
-                  direction="row"
-                  alignItems="baseline"
-                  className={styles.agentData}
-                  spacing={1}
-                >
-                  <span className={styles.agentOS}>
-                    {agent.operating_system}
-                  </span>
-
-                  <Maybe condition={agent.status === "connected"}>
-                    <AgentVersion
-                      agent={agent}
-                      serverVersion={serverVersion}
-                      onUpdate={onUpdateAgent}
-                    />
-                  </Maybe>
-
-                  <AgentLatency agent={agent} />
-
-                  <Maybe condition={agent.status === "connecting"}>
-                    <Skeleton width={160} variant="text" />
-                    <Skeleton width={36} variant="text" />
-                  </Maybe>
-
-                  <Maybe condition={agent.status === "timeout"}>
-                    {t("unableToConnect")}
-                  </Maybe>
-                </Stack>
-              </div>
-            </Stack>
-
+        <div className={styles.agentNameAndStatus}>
+          <Stack alignItems="center" direction="row" spacing={3}>
+            <AgentStatus agent={agent} />
+            <div className={styles.agentName}>{agent.name}</div>
             <Stack
               direction="row"
-              alignItems="center"
-              spacing={0.5}
-              wrap="wrap"
-              maxWidth="750px"
+              spacing={2}
+              alignItems="baseline"
+              className={styles.agentDescription}
             >
-              {showApps && agent.status === "connected" && (
+              {agent.status === "connected" && (
                 <>
-                  {agent.apps.map((app) => (
-                    <AppLink
-                      key={app.slug}
-                      appsHost={applicationsHost}
-                      app={app}
-                      agent={agent}
-                      workspace={workspace}
-                    />
-                  ))}
-
-                  <TerminalLink
-                    workspaceName={workspace.name}
-                    agentName={agent.name}
-                    userName={workspace.owner_name}
+                  <span className={styles.agentOS}>
+                    {agent.operating_system}
+                  </span>
+                  <AgentVersion
+                    agent={agent}
+                    serverVersion={serverVersion}
+                    onUpdate={onUpdateAgent}
                   />
-                  {!hideSSHButton && (
-                    <SSHButton
-                      workspaceName={workspace.name}
-                      agentName={agent.name}
-                      sshPrefix={sshPrefix}
-                    />
-                  )}
-                  {!hideVSCodeDesktopButton && (
-                    <VSCodeDesktopButton
-                      userName={workspace.owner_name}
-                      workspaceName={workspace.name}
-                      agentName={agent.name}
-                      folderPath={agent.expanded_directory}
-                    />
-                  )}
-                  {applicationsHost !== undefined &&
-                    applicationsHost !== "" && (
-                      <PortForwardButton
-                        host={applicationsHost}
-                        workspaceName={workspace.name}
-                        agentId={agent.id}
-                        agentName={agent.name}
-                        username={workspace.owner_name}
-                      />
-                    )}
+                  <AgentLatency agent={agent} />
                 </>
               )}
-              {showApps && agent.status === "connecting" && (
+              {agent.status === "connecting" && (
                 <>
-                  <AppLinkSkeleton width={84} />
-                  <AppLinkSkeleton width={112} />
+                  <Skeleton width={160} variant="text" />
+                  <Skeleton width={36} variant="text" />
                 </>
               )}
             </Stack>
           </Stack>
-          <AgentMetadata
-            storybookMetadata={storybookAgentMetadata}
-            agent={agent}
-          />
-          {hasStartupFeatures && (
-            <Stack
-              direction="row"
-              alignItems="baseline"
-              spacing={1}
-              className={styles.startupLinks}
-            >
-              <Link
-                className={styles.startupLink}
-                variant="body2"
-                onClick={() => {
-                  setShowStartupLogs(!showStartupLogs)
-                }}
-              >
-                {showStartupLogs ? (
-                  <VisibilityOffOutlined />
-                ) : (
-                  <VisibilityOutlined />
-                )}
-                {showStartupLogs ? "Hide" : "Show"} Startup Logs
-              </Link>
-
-              {agent.startup_script && (
-                <Link
-                  className={styles.startupLink}
-                  variant="body2"
-                  ref={startupScriptAnchorRef}
-                  onClick={() => {
-                    setStartupScriptOpen(!startupScriptOpen)
-                  }}
-                >
-                  <PlayCircleOutlined />
-                  View Startup Script
-                </Link>
+        </div>
+
+        {agent.status === "connected" && (
+          <div className={styles.agentDefaultActions}>
+            <TerminalLink
+              workspaceName={workspace.name}
+              agentName={agent.name}
+              userName={workspace.owner_name}
+            />
+            {!hideSSHButton && (
+              <SSHButton
+                workspaceName={workspace.name}
+                agentName={agent.name}
+                sshPrefix={sshPrefix}
+              />
+            )}
+            {applicationsHost !== undefined && applicationsHost !== "" && (
+              <PortForwardButton
+                host={applicationsHost}
+                workspaceName={workspace.name}
+                agentId={agent.id}
+                agentName={agent.name}
+                username={workspace.owner_name}
+              />
+            )}
+          </div>
+        )}
+
+        {agent.status === "connecting" && (
+          <div className={styles.agentDefaultActions}>
+            <Skeleton
+              width={80}
+              height={32}
+              variant="rect"
+              className={styles.buttonSkeleton}
+            />
+            <Skeleton
+              width={110}
+              height={32}
+              variant="rect"
+              className={styles.buttonSkeleton}
+            />
+          </div>
+        )}
+      </Stack>
+
+      <AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
+
+      {shouldDisplayApps && (
+        <div className={styles.apps}>
+          {agent.status === "connected" && (
+            <>
+              {!hideVSCodeDesktopButton && (
+                <VSCodeDesktopButton
+                  userName={workspace.owner_name}
+                  workspaceName={workspace.name}
+                  agentName={agent.name}
+                  folderPath={agent.expanded_directory}
+                />
               )}
+              {agent.apps.map((app) => (
+                <AppLink
+                  key={app.slug}
+                  appsHost={applicationsHost}
+                  app={app}
+                  agent={agent}
+                  workspace={workspace}
+                />
+              ))}
+            </>
+          )}
 
-              <Popover
-                classes={{
-                  paper: styles.startupScriptPopover,
-                }}
-                open={startupScriptOpen}
-                onClose={() => setStartupScriptOpen(false)}
-                anchorEl={startupScriptAnchorRef.current}
-                anchorOrigin={{
-                  vertical: "bottom",
-                  horizontal: "left",
-                }}
-                transformOrigin={{
-                  vertical: "top",
-                  horizontal: "left",
-                }}
-              >
-                <div>
-                  <SyntaxHighlighter
-                    style={darcula}
-                    language="shell"
-                    showLineNumbers
-                    // Use inline styles does not work correctly
-                    // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/329
-                    codeTagProps={{ style: {} }}
-                    customStyle={{
-                      background: theme.palette.background.default,
-                      maxWidth: 600,
-                      margin: 0,
-                    }}
-                  >
-                    {agent.startup_script || ""}
-                  </SyntaxHighlighter>
-                </div>
-              </Popover>
-            </Stack>
+          {agent.status === "connecting" && (
+            <>
+              <Skeleton
+                width={80}
+                height={36}
+                variant="rect"
+                className={styles.buttonSkeleton}
+              />
+              <Skeleton
+                width={110}
+                height={36}
+                variant="rect"
+                className={styles.buttonSkeleton}
+              />
+            </>
           )}
         </div>
-      </Stack>
-      {showStartupLogs && (
-        <AutoSizer disableHeight>
-          {({ width }) => (
-            <List
-              ref={logListRef}
-              innerRef={logListDivRef}
-              height={256}
-              itemCount={startupLogs.length}
-              itemSize={logLineHeight}
-              width={width}
-              className={styles.startupLogs}
-              onScroll={handleLogScroll}
-            >
-              {({ index, style }) => (
-                <LogLine
-                  line={startupLogs[index]}
-                  number={index + 1}
-                  style={style}
-                />
+      )}
+
+      {hasStartupFeatures && (
+        <div className={styles.logsPanel}>
+          {showStartupLogs && (
+            <AutoSizer disableHeight>
+              {({ width }) => (
+                <List
+                  ref={logListRef}
+                  innerRef={logListDivRef}
+                  height={256}
+                  itemCount={startupLogs.length}
+                  itemSize={logLineHeight}
+                  width={width}
+                  className={styles.startupLogs}
+                  onScroll={handleLogScroll}
+                >
+                  {({ index, style }) => (
+                    <LogLine
+                      line={startupLogs[index]}
+                      number={index + 1}
+                      style={style}
+                    />
+                  )}
+                </List>
               )}
-            </List>
+            </AutoSizer>
           )}
-        </AutoSizer>
+          <div className={styles.logsPanelButtons}>
+            {showStartupLogs ? (
+              <button
+                className={combineClasses([
+                  styles.logsPanelButton,
+                  styles.toggleLogsButton,
+                ])}
+                onClick={() => {
+                  setShowStartupLogs((v) => !v)
+                }}
+              >
+                <CloseDropdown />
+                Hide startup logs
+              </button>
+            ) : (
+              <button
+                className={combineClasses([
+                  styles.logsPanelButton,
+                  styles.toggleLogsButton,
+                ])}
+                onClick={() => {
+                  setShowStartupLogs((v) => !v)
+                }}
+              >
+                <OpenDropdown />
+                Show startup logs
+              </button>
+            )}
+
+            <button
+              className={combineClasses([
+                styles.logsPanelButton,
+                styles.scriptButton,
+              ])}
+              ref={startupScriptAnchorRef}
+              onClick={() => {
+                setStartupScriptOpen(!startupScriptOpen)
+              }}
+            >
+              <CodeOutlined />
+              Startup scripts
+            </button>
+
+            <Popover
+              classes={{
+                paper: styles.startupScriptPopover,
+              }}
+              open={startupScriptOpen}
+              onClose={() => setStartupScriptOpen(false)}
+              anchorEl={startupScriptAnchorRef.current}
+            >
+              <div>
+                <SyntaxHighlighter
+                  style={darcula}
+                  language="shell"
+                  showLineNumbers
+                  // Use inline styles does not work correctly
+                  // https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/329
+                  codeTagProps={{ style: {} }}
+                  customStyle={{
+                    background: theme.palette.background.default,
+                    maxWidth: 600,
+                    margin: 0,
+                  }}
+                >
+                  {agent.startup_script || ""}
+                </SyntaxHighlighter>
+              </div>
+            </Popover>
+          </div>
+        </div>
       )}
     </Stack>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  agentWrapper: {
-    "&:not(:last-child)": {
-      borderBottom: `1px solid ${theme.palette.divider}`,
-    },
-  },
-
   agentRow: {
-    padding: theme.spacing(3, 4),
     backgroundColor: theme.palette.background.paperLight,
     fontSize: 16,
+    borderLeft: `2px solid ${theme.palette.text.secondary}`,
+
+    "&:not(:first-child)": {
+      borderTop: `2px solid ${theme.palette.divider}`,
+    },
   },
 
-  startupLinks: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(2),
-    marginTop: theme.spacing(0.5),
+  "agentRow-connected": {
+    borderLeftColor: theme.palette.success.light,
   },
 
-  startupLink: {
-    cursor: "pointer",
+  "agentRow-disconnected": {
+    borderLeftColor: theme.palette.text.secondary,
+  },
+
+  "agentRow-connecting": {
+    borderLeftColor: theme.palette.info.light,
+  },
+
+  "agentRow-timeout": {
+    borderLeftColor: theme.palette.warning.light,
+  },
+
+  "agentRow-lifecycle-created": {},
+
+  "agentRow-lifecycle-starting": {
+    borderLeftColor: theme.palette.info.light,
+  },
+
+  "agentRow-lifecycle-ready": {
+    borderLeftColor: theme.palette.success.light,
+  },
+
+  "agentRow-lifecycle-start_timeout": {
+    borderLeftColor: theme.palette.warning.light,
+  },
+
+  "agentRow-lifecycle-start_error": {
+    borderLeftColor: theme.palette.error.light,
+  },
+
+  "agentRow-lifecycle-shutting_down": {
+    borderLeftColor: theme.palette.info.light,
+  },
+
+  "agentRow-lifecycle-shutdown_timeout": {
+    borderLeftColor: theme.palette.warning.light,
+  },
+
+  "agentRow-lifecycle-shutdown_error": {
+    borderLeftColor: theme.palette.error.light,
+  },
+
+  "agentRow-lifecycle-off": {
+    borderLeftColor: theme.palette.text.secondary,
+  },
+
+  agentInfo: {
+    padding: theme.spacing(2, 4),
+  },
+
+  agentDefaultActions: {
     display: "flex",
-    gap: 4,
-    alignItems: "center",
-    userSelect: "none",
-    whiteSpace: "nowrap",
+    gap: theme.spacing(1),
+    marginLeft: "auto",
+  },
 
-    "& svg": {
-      width: 12,
-      height: 12,
-    },
+  agentDescription: {
+    fontSize: 14,
+    color: theme.palette.text.secondary,
   },
 
   startupLogs: {
     maxHeight: 256,
-    background: theme.palette.background.default,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+    paddingTop: theme.spacing(2),
+
+    // We need this to be able to apply the padding top from startupLogs
+    "& > div": {
+      position: "relative",
+    },
   },
 
   startupScriptPopover: {
     backgroundColor: theme.palette.background.default,
   },
 
-  agentStatusWrapper: {
-    width: theme.spacing(4.5),
+  agentNameAndStatus: {
     display: "flex",
-    justifyContent: "center",
+    alignItems: "center",
+    gap: theme.spacing(4),
   },
 
   agentName: {
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: 260,
     fontWeight: 600,
+    fontSize: theme.spacing(2),
   },
 
-  agentOS: {
-    textTransform: "capitalize",
+  agentDataGroup: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: theme.spacing(6),
   },
 
   agentData: {
-    fontSize: 14,
+    display: "flex",
+    flexDirection: "column",
+    fontSize: 12,
+
+    "& > *:first-child": {
+      fontWeight: 500,
+      color: theme.palette.text.secondary,
+    },
+  },
+
+  apps: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(4),
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+
+  logsPanel: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+  },
+
+  logsPanelButtons: {
+    display: "flex",
+  },
+
+  logsPanelButton: {
+    textAlign: "left",
+    background: "transparent",
+    border: 0,
+    fontFamily: "inherit",
+    padding: theme.spacing(1.5, 4),
     color: theme.palette.text.secondary,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    whiteSpace: "nowrap",
+
+    "&:hover": {
+      color: theme.palette.text.primary,
+      backgroundColor: colors.gray[14],
+    },
+
+    "& svg": {
+      color: "inherit",
+    },
+  },
+
+  toggleLogsButton: {
+    width: "100%",
+  },
+
+  buttonSkeleton: {
+    borderRadius: 4,
+  },
+
+  agentErrorMessage: {
+    fontSize: 12,
+    fontWeight: 400,
     marginTop: theme.spacing(0.5),
+    color: theme.palette.warning.light,
   },
 
-  agentStartupLogs: {
-    maxHeight: 200,
-    display: "flex",
-    flexDirection: "column-reverse",
+  scriptButton: {
+    "& svg": {
+      width: theme.spacing(2),
+      height: theme.spacing(2),
+    },
+  },
+
+  agentOS: {
+    textTransform: "capitalize",
   },
 }))
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
index eedd521034e02..d03fb1c664e32 100644
--- a/site/src/components/Resources/AgentStatus.tsx
+++ b/site/src/components/Resources/AgentStatus.tsx
@@ -391,6 +391,7 @@ const useStyles = makeStyles((theme) => ({
     width: theme.spacing(1),
     height: theme.spacing(1),
     borderRadius: "100%",
+    flexShrink: 0,
   },
 
   connected: {
@@ -421,17 +422,15 @@ const useStyles = makeStyles((theme) => ({
 
   timeoutWarning: {
     color: theme.palette.warning.light,
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
+    width: theme.spacing(2),
+    height: theme.spacing(2),
     position: "relative",
-    top: theme.spacing(1),
   },
 
   errorWarning: {
     color: theme.palette.error.main,
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
+    width: theme.spacing(2),
+    height: theme.spacing(2),
     position: "relative",
-    top: theme.spacing(1),
   },
 }))
diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx
index 2f21e79ecff39..713609b686197 100644
--- a/site/src/components/Resources/AgentVersion.tsx
+++ b/site/src/components/Resources/AgentVersion.tsx
@@ -13,13 +13,10 @@ export const AgentVersion: FC<{
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const id = isOpen ? "version-outdated-popover" : undefined
-  const { displayVersion, outdated } = getDisplayVersionStatus(
-    agent.version,
-    serverVersion,
-  )
+  const { outdated } = getDisplayVersionStatus(agent.version, serverVersion)
 
   if (!outdated) {
-    return <span>{displayVersion}</span>
+    return <span>Updated</span>
   }
 
   return (
@@ -32,7 +29,7 @@ export const AgentVersion: FC<{
         onMouseLeave={() => setIsOpen(false)}
         className={styles.trigger}
       >
-        Agent Outdated
+        Outdated
       </span>
       <AgentOutdatedTooltip
         id={id}
diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx
index fbf772eb2c878..6fca82278d808 100644
--- a/site/src/components/SSHButton/SSHButton.tsx
+++ b/site/src/components/SSHButton/SSHButton.tsx
@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button"
 import Popover from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
-import CloudIcon from "@material-ui/icons/CloudOutlined"
 import { useRef, useState } from "react"
 import { CodeExample } from "../CodeExample/CodeExample"
 import { Stack } from "../Stack/Stack"
@@ -37,14 +36,14 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
     <>
       <Button
         className={styles.button}
-        startIcon={<CloudIcon />}
+        variant="outlined"
         size="small"
         ref={anchorRef}
         onClick={() => {
           setIsOpen(true)
         }}
       >
-        SSH
+        Connect SSH
       </Button>
       <Popover
         classes={{ paper: styles.popoverPaper }}
@@ -129,11 +128,10 @@ const useStyles = makeStyles((theme) => ({
   },
 
   button: {
-    whiteSpace: "nowrap",
-    backgroundColor: theme.palette.background.default,
-
-    "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`,
-    },
+    fontSize: 12,
+    fontWeight: 500,
+    height: theme.spacing(4),
+    minHeight: theme.spacing(4),
+    borderRadius: 4,
   },
 }))
diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
index ded51c01d9f94..c4cb39ff1ba38 100644
--- a/site/src/components/TerminalLink/TerminalLink.tsx
+++ b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -1,7 +1,5 @@
 import Button from "@material-ui/core/Button"
-import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import ComputerIcon from "@material-ui/icons/Computer"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { combineClasses } from "../../utils/combineClasses"
@@ -30,7 +28,7 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
   agentName,
   userName = "me",
   workspaceName,
-  className,
+  className = "",
 }) => {
   const styles = useStyles()
   const href = `/@${userName}/${workspaceName}${
@@ -38,9 +36,12 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
   }/terminal`
 
   return (
-    <Link
+    <Button
       href={href}
-      className={combineClasses([styles.link, className])}
+      component="a"
+      size="small"
+      variant="outlined"
+      className={combineClasses([styles.button, className])}
       target="_blank"
       onClick={(event) => {
         event.preventDefault()
@@ -51,28 +52,17 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
         )
       }}
     >
-      <Button
-        startIcon={<ComputerIcon />}
-        size="small"
-        className={styles.button}
-      >
-        {Language.linkText}
-      </Button>
-    </Link>
+      {Language.linkText}
+    </Button>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
-  link: {
-    textDecoration: "none !important",
-  },
-
   button: {
-    whiteSpace: "nowrap",
-    backgroundColor: theme.palette.background.default,
-
-    "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`,
-    },
+    fontSize: 12,
+    fontWeight: 500,
+    height: theme.spacing(4),
+    minHeight: theme.spacing(4),
+    borderRadius: 4,
   },
 }))
diff --git a/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx
index 03789b490e25b..42fd9e430007e 100644
--- a/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx
+++ b/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx
@@ -20,7 +20,6 @@ export const VSCodeDesktopButton: FC<
   return (
     <Button
       startIcon={<VSCodeIcon />}
-      size="small"
       disabled={loading}
       className={styles.button}
       onClick={() => {
@@ -59,9 +58,23 @@ const useStyles = makeStyles((theme) => ({
   button: {
     whiteSpace: "nowrap",
     backgroundColor: theme.palette.background.default,
+    padding: theme.spacing(0, 3),
+    height: 44,
+    borderRadius: 6,
 
     "&:hover": {
-      backgroundColor: `${theme.palette.background.default} !important`,
+      backgroundColor: `${theme.palette.background.paper} !important`,
+    },
+
+    "& .MuiButton-startIcon": {
+      marginRight: theme.spacing(1.5),
+      width: 16,
+      height: 16,
+
+      "& svg": {
+        width: "100%",
+        height: "100%",
+      },
     },
   },
 }))
diff --git a/site/vite.config.ts b/site/vite.config.ts
index 17e146186b13d..9c0d2f50a76ba 100644
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@@ -33,8 +33,9 @@ export default defineConfig({
     port: process.env.PORT ? Number(process.env.PORT) : 8080,
     proxy: {
       "/api": {
-        target: process.env.CODER_HOST || "http://localhost:3000",
         ws: true,
+        changeOrigin: true,
+        target: process.env.CODER_HOST || "http://localhost:3000",
         secure: process.env.NODE_ENV === "production",
       },
       "/swagger": {