diff --git a/site/src/app.tsx b/site/src/app.tsx
index 4b47895aa4bff..cd055cc7567ca 100644
--- a/site/src/app.tsx
+++ b/site/src/app.tsx
@@ -15,6 +15,7 @@ const queryClient = new QueryClient({
     queries: {
       retry: false,
       cacheTime: 0,
+      refetchOnWindowFocus: false,
     },
   },
 })
diff --git a/site/src/components/DeploySettingsLayout/Fieldset.tsx b/site/src/components/DeploySettingsLayout/Fieldset.tsx
index ea13402982f64..d70d759f1a857 100644
--- a/site/src/components/DeploySettingsLayout/Fieldset.tsx
+++ b/site/src/components/DeploySettingsLayout/Fieldset.tsx
@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
   },
   title: {
     ...theme.typography.h5,
-    fontWeight: "bold",
+    fontWeight: 600,
   },
   body: {
     ...theme.typography.body2,
diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
index f90868e5a2b61..cbdf4e5655159 100644
--- a/site/src/components/Dialogs/Dialog.tsx
+++ b/site/src/components/Dialogs/Dialog.tsx
@@ -89,11 +89,16 @@ const useButtonStyles = makeStyles((theme) => ({
       backgroundColor: colors.red[10],
       borderColor: colors.red[9],
       color: theme.palette.text.primary,
-      "&:hover": {
+
+      "&:hover:not(:disabled)": {
         backgroundColor: colors.red[9],
+        borderColor: colors.red[9],
       },
+
       "&.Mui-disabled": {
-        opacity: 0.5,
+        backgroundColor: colors.red[15],
+        borderColor: colors.red[15],
+        color: colors.red[9],
       },
     },
   },
diff --git a/site/src/components/DropdownButton/ActionCtas.tsx b/site/src/components/DropdownButton/ActionCtas.tsx
index 8be23778a6a85..cc5e48da0b94e 100644
--- a/site/src/components/DropdownButton/ActionCtas.tsx
+++ b/site/src/components/DropdownButton/ActionCtas.tsx
@@ -26,6 +26,7 @@ export const UpdateButton: FC<React.PropsWithChildren<WorkspaceAction>> = ({
 
   return (
     <Button
+      variant="outlined"
       className={styles.actionButton}
       startIcon={<CloudQueueIcon />}
       onClick={handleAction}
@@ -43,6 +44,7 @@ export const ChangeVersionButton: FC<
 
   return (
     <Button
+      variant="outlined"
       className={styles.actionButton}
       startIcon={<UpdateOutlined />}
       onClick={handleAction}
@@ -60,6 +62,7 @@ export const BuildParametersButton: FC<
 
   return (
     <Button
+      variant="outlined"
       className={styles.actionButton}
       startIcon={<SettingsOutlined />}
       onClick={handleAction}
@@ -150,7 +153,7 @@ export const DisabledButton: FC<React.PropsWithChildren<DisabledProps>> = ({
   const styles = useStyles()
 
   return (
-    <Button disabled className={styles.actionButton}>
+    <Button variant="outlined" disabled className={styles.actionButton}>
       {label}
     </Button>
   )
@@ -167,6 +170,7 @@ export const ActionLoadingButton: FC<React.PropsWithChildren<LoadingProps>> = ({
   return (
     <LoadingButton
       loading
+      variant="outlined"
       loadingLabel={label}
       className={combineClasses([styles.loadingButton, styles.actionButton])}
     />
@@ -178,8 +182,13 @@ const useStyles = makeStyles((theme) => ({
     // Set fixed width for the action buttons so they will not change the size
     // during the transitions
     width: theme.spacing(20),
-    border: "none",
     borderRadius: `${theme.shape.borderRadius}px 0px 0px ${theme.shape.borderRadius}px`,
+    // This is used to show the hover effect
+    marginRight: -1,
+    position: "relative",
+    "&:hover": {
+      zIndex: 1,
+    },
   },
   cancelButton: {
     "&.MuiButton-root": {
diff --git a/site/src/components/DropdownButton/DropdownButton.tsx b/site/src/components/DropdownButton/DropdownButton.tsx
index c4067f9293ecc..d1659be56837c 100644
--- a/site/src/components/DropdownButton/DropdownButton.tsx
+++ b/site/src/components/DropdownButton/DropdownButton.tsx
@@ -41,6 +41,7 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
         <>
           {/* popover toggle button */}
           <Button
+            variant="outlined"
             data-testid="workspace-actions-button"
             aria-controls="workspace-actions-menu"
             aria-haspopup="true"
@@ -86,13 +87,9 @@ export const DropdownButton: FC<DropdownButtonProps> = ({
 
 const useStyles = makeStyles((theme) => ({
   buttonContainer: {
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: `${theme.shape.borderRadius}px`,
     display: "inline-flex",
   },
   dropdownButton: {
-    border: "none",
-    borderLeft: `1px solid ${theme.palette.divider}`,
     borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
     minWidth: "unset",
     width: "64px", // matching cancel button so button grouping doesn't grow in size
@@ -110,8 +107,18 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   popoverPaper: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px ${theme.spacing(
-      1,
-    )}px`,
+    padding: 0,
+    width: theme.spacing(28),
+
+    "& .MuiButton-root": {
+      padding: theme.spacing(1, 2),
+      borderRadius: 0,
+      width: "100%",
+      border: 0,
+
+      "&:hover": {
+        background: theme.palette.action.hover,
+      },
+    },
   },
 }))
diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
index 15c6b5ed78430..705762eb95756 100644
--- a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
+++ b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
@@ -23,7 +23,7 @@ export const FullPageHorizontalForm: FC<
     <Margins size="medium">
       <PageHeader
         actions={
-          <Button size="small" onClick={onCancel}>
+          <Button variant="outlined" size="small" onClick={onCancel}>
             Cancel
           </Button>
         }
diff --git a/site/src/components/LicenseBanner/LicenseBannerView.tsx b/site/src/components/LicenseBanner/LicenseBannerView.tsx
index 792bc191a0a2a..6032553e8bc3d 100644
--- a/site/src/components/LicenseBanner/LicenseBannerView.tsx
+++ b/site/src/components/LicenseBanner/LicenseBannerView.tsx
@@ -93,7 +93,7 @@ const useStyles = makeStyles((theme) => ({
   link: {
     color: "inherit",
     textDecoration: "none",
-    fontWeight: "bold",
+    fontWeight: 600,
   },
   list: {
     padding: theme.spacing(1),
diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
index 11c3b41f5f30d..44123fa0100f4 100644
--- a/site/src/components/NavbarView/NavbarView.tsx
+++ b/site/src/components/NavbarView/NavbarView.tsx
@@ -239,7 +239,7 @@ const useStyles = makeStyles((theme) => ({
     // NavLink adds this class when the current route matches.
     "&.active": {
       color: theme.palette.text.primary,
-      fontWeight: "bold",
+      fontWeight: 500,
     },
 
     [theme.breakpoints.up("md")]: {
diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx
index fe27c49539828..b0e1041c0c9f6 100644
--- a/site/src/components/Pill/Pill.tsx
+++ b/site/src/components/Pill/Pill.tsx
@@ -9,15 +9,17 @@ export interface PillProps {
   text: string
   type?: PaletteIndex
   lightBorder?: boolean
+  title?: string
 }
 
 export const Pill: FC<PillProps> = (props) => {
-  const { className, icon, text = false } = props
+  const { className, icon, text = false, title } = props
   const styles = useStyles(props)
   return (
     <div
       className={combineClasses([styles.wrapper, styles.pillColor, className])}
       role="status"
+      title={title}
     >
       {icon && <div className={styles.iconWrapper}>{icon}</div>}
       {text}
diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
index 31267a5e93245..4d73496ecf6c2 100644
--- a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
+++ b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -77,6 +77,7 @@ export const SearchBarWithFilter: React.FC<
       <Stack direction="row" spacing={0}>
         {presetFilters && presetFilters.length > 0 && (
           <Button
+            variant="outlined"
             aria-controls="filter-menu"
             aria-haspopup="true"
             onClick={handleClick}
diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
index 3ddafafb211a7..69498e460fb5c 100644
--- a/site/src/components/TemplateLayout/TemplatePageHeader.tsx
+++ b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -28,6 +28,7 @@ const TemplateSettingsButton: FC<{ templateName: string }> = ({
   templateName,
 }) => (
   <Button
+    variant="outlined"
     component={RouterLink}
     to={`/templates/${templateName}/settings`}
     startIcon={<SettingsOutlined />}
@@ -50,7 +51,7 @@ const CreateWorkspaceButton: FC<{
 )
 
 const DeleteTemplateButton: FC<{ onClick: () => void }> = ({ onClick }) => (
-  <Button startIcon={<DeleteOutlined />} onClick={onClick}>
+  <Button variant="outlined" startIcon={<DeleteOutlined />} onClick={onClick}>
     {Language.deleteButton}
   </Button>
 )
diff --git a/site/src/components/TemplateVersionEditor/FileTreeView.tsx b/site/src/components/TemplateVersionEditor/FileTreeView.tsx
index ba5b2236795c8..b0b7f41fb57b1 100644
--- a/site/src/components/TemplateVersionEditor/FileTreeView.tsx
+++ b/site/src/components/TemplateVersionEditor/FileTreeView.tsx
@@ -8,6 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem"
 import { FC, useState } from "react"
 import { FileTree } from "util/filetree"
 import { DockerIcon } from "components/Icons/DockerIcon"
+import { colors } from "theme/colors"
 
 const sortFileTree = (fileTree: FileTree) => (a: string, b: string) => {
   const contentA = fileTree[a]
@@ -98,7 +99,6 @@ export const FileTreeView: FC<{
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       aria-label="Files"
-      className={styles.fileTree}
     >
       {Object.keys(fileTree)
         .sort(sortFileTree(fileTree))
@@ -156,23 +156,22 @@ export const FileTreeView: FC<{
 }
 
 const useStyles = makeStyles((theme) => ({
-  fileTree: {},
   fileTreeItem: {
     overflow: "hidden",
     userSelect: "none",
 
-    "&:focus": {
-      "& > .MuiTreeItem-content": {
-        background: "rgba(255, 255, 255, 0.1)",
-      },
+    "&:focus:not(.active) > .MuiTreeItem-content": {
+      background: theme.palette.action.hover,
+      color: theme.palette.text.primary,
     },
-    "& > .MuiTreeItem-content:hover": {
-      background: theme.palette.background.paperLight,
+
+    "&:not(:focus):not(.active) > .MuiTreeItem-content:hover": {
+      background: theme.palette.action.hover,
       color: theme.palette.text.primary,
     },
 
     "& > .MuiTreeItem-content": {
-      padding: "1px 16px",
+      padding: theme.spacing(0.25, 2),
       color: theme.palette.text.secondary,
 
       "& svg": {
@@ -182,16 +181,25 @@ const useStyles = makeStyles((theme) => ({
 
       "& > .MuiTreeItem-label": {
         marginLeft: 4,
-        fontSize: 14,
+        fontSize: 13,
         color: "inherit",
       },
     },
 
     "&.active": {
-      background: theme.palette.background.paper,
-
       "& > .MuiTreeItem-content": {
         color: theme.palette.text.primary,
+        background: colors.gray[13],
+        pointerEvents: "none",
+      },
+    },
+
+    "& .MuiTreeItem-group": {
+      marginLeft: 0,
+
+      // We need to find a better way to recursive padding here
+      "& .MuiTreeItem-content": {
+        paddingLeft: theme.spacing(5),
       },
     },
   },
diff --git a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx
index 405a71885c24c..a64b26b7112f4 100644
--- a/site/src/components/TemplateVersionEditor/MonacoEditor.tsx
+++ b/site/src/components/TemplateVersionEditor/MonacoEditor.tsx
@@ -122,7 +122,7 @@ export const MonacoEditor: FC<{
           ],
           colors: {
             "editor.foreground": hslToHex(theme.palette.text.primary),
-            "editor.background": hslToHex(theme.palette.background.paper),
+            "editor.background": hslToHex(theme.palette.background.default),
           },
         })
         editor.updateOptions({
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
index 1f7990099ed32..0ef80162ae375 100644
--- a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
+++ b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -2,9 +2,9 @@ import Button from "@material-ui/core/Button"
 import IconButton from "@material-ui/core/IconButton"
 import { makeStyles, Theme } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
-import CreateIcon from "@material-ui/icons/AddBox"
+import CreateIcon from "@material-ui/icons/AddOutlined"
 import BuildIcon from "@material-ui/icons/BuildOutlined"
-import PreviewIcon from "@material-ui/icons/Visibility"
+import PreviewIcon from "@material-ui/icons/VisibilityOutlined"
 import {
   ProvisionerJobLog,
   Template,
@@ -50,7 +50,7 @@ export interface TemplateVersionEditorProps {
   onUpdate: () => void
 }
 
-const topbarHeight = navHeight
+const topbarHeight = 80
 
 const findInitialFile = (fileTree: FileTree): string | undefined => {
   let initialFile: string | undefined
@@ -161,28 +161,26 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
               )
             }
           />
-          <div>Used By: {template.active_user_count} developers</div>
         </div>
 
         <div className={styles.topbarSides}>
           <div className={styles.buildStatus}>
-            Build Status:
             <TemplateVersionStatusBadge version={templateVersion} />
           </div>
 
           <Button
+            title="Build template (Ctrl + Enter)"
             size="small"
             variant="outlined"
-            color="primary"
             disabled={disablePreview}
             onClick={() => {
               triggerPreview()
             }}
           >
-            Build (Ctrl + Enter)
+            Build template
           </Button>
 
-          <Tooltip
+          <Button
             title={
               dirty
                 ? "You have edited files! Run another build before updating."
@@ -190,28 +188,19 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
                 ? "Something"
                 : ""
             }
+            size="small"
+            disabled={dirty || disableUpdate}
+            onClick={onUpdate}
           >
-            <span>
-              <Button
-                size="small"
-                variant="contained"
-                color="primary"
-                disabled={dirty || disableUpdate}
-                onClick={() => {
-                  onUpdate()
-                }}
-              >
-                Publish New Version
-              </Button>
-            </span>
-          </Tooltip>
+            Publish version
+          </Button>
         </div>
       </div>
 
       <div className={styles.sidebarAndEditor}>
         <div className={styles.sidebar}>
           <div className={styles.sidebarTitle}>
-            Template Editor
+            Template files
             <div className={styles.sidebarActions}>
               <Tooltip title="Create File" placement="top">
                 <IconButton
@@ -413,11 +402,12 @@ const useStyles = makeStyles<
     alignItems: "center",
     justifyContent: "space-between",
     height: topbarHeight,
+    background: theme.palette.background.paper,
   },
   topbarSides: {
     display: "flex",
     alignItems: "center",
-    gap: 16,
+    gap: theme.spacing(2),
   },
   buildStatus: {
     display: "flex",
@@ -430,26 +420,30 @@ const useStyles = makeStyles<
   },
   sidebar: {
     minWidth: 256,
+    backgroundColor: theme.palette.background.paper,
+    borderRight: `1px solid ${theme.palette.divider}`,
   },
   sidebarTitle: {
-    fontSize: 12,
+    fontSize: 10,
     textTransform: "uppercase",
-    padding: "8px 16px",
-    color: theme.palette.text.hint,
+    padding: theme.spacing(1, 2),
+    color: theme.palette.text.primary,
+    fontWeight: 500,
+    letterSpacing: "0.5px",
     display: "flex",
     alignItems: "center",
   },
   sidebarActions: {
     marginLeft: "auto",
     "& svg": {
-      fill: theme.palette.text.hint,
+      fill: theme.palette.text.primary,
     },
   },
   editorPane: {
     display: "grid",
     width: "100%",
     gridTemplateColumns: (props) =>
-      props.showBuildLogs ? "0.6fr 0.4fr" : "1fr 0fr",
+      props.showBuildLogs ? "1fr 1fr" : "1fr 0fr",
     height: `calc(100vh - ${navHeight + topbarHeight}px)`,
     overflow: "hidden",
   },
@@ -464,6 +458,8 @@ const useStyles = makeStyles<
     overflowY: "auto",
   },
   panel: {
+    padding: theme.spacing(1),
+
     "&.hidden": {
       display: "none",
     },
@@ -482,26 +478,42 @@ const useStyles = makeStyles<
   },
   tab: {
     cursor: "pointer",
-    padding: "8px 12px",
-    fontSize: 14,
+    padding: theme.spacing(1.5),
+    fontSize: 10,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    fontWeight: 600,
     background: "transparent",
     fontFamily: "inherit",
     border: 0,
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
     transition: "150ms ease all",
     display: "flex",
     gap: 8,
     alignItems: "center",
     justifyContent: "center",
+    position: "relative",
 
     "& svg": {
-      maxWidth: 16,
-      maxHeight: 16,
+      maxWidth: 12,
+      maxHeight: 12,
     },
 
     "&.active": {
-      color: "white",
-      background: theme.palette.background.paperLight,
+      color: theme.palette.text.primary,
+      "&:after": {
+        content: '""',
+        display: "block",
+        width: "100%",
+        height: 1,
+        backgroundColor: theme.palette.text.primary,
+        bottom: -1,
+        position: "absolute",
+      },
+    },
+
+    "&:hover": {
+      color: theme.palette.text.primary,
     },
   },
   tabBar: {
diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx
index 5dc4c5872cb21..f336ee65ef529 100644
--- a/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx
+++ b/site/src/components/TemplateVersionEditor/TemplateVersionStatusBadge.tsx
@@ -1,7 +1,6 @@
 import { TemplateVersion } from "api/typesGenerated"
 import { FC, ReactNode } from "react"
 import { PaletteIndex } from "theme/palettes"
-
 import CircularProgress from "@material-ui/core/CircularProgress"
 import ErrorIcon from "@material-ui/icons/ErrorOutline"
 import CheckIcon from "@material-ui/icons/CheckOutlined"
@@ -11,7 +10,14 @@ export const TemplateVersionStatusBadge: FC<{
   version: TemplateVersion
 }> = ({ version }) => {
   const { text, icon, type } = getStatus(version)
-  return <Pill icon={icon} text={text} type={type} />
+  return (
+    <Pill
+      icon={icon}
+      text={text}
+      type={type}
+      title={`Build status is ${text}`}
+    />
+  )
 }
 
 const LoadingIcon: FC = () => {
diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx
index b7cd81aa5367e..7cf2f5d37f6d2 100644
--- a/site/src/components/UsersLayout/UsersLayout.tsx
+++ b/site/src/components/UsersLayout/UsersLayout.tsx
@@ -37,6 +37,7 @@ export const UsersLayout: FC = () => {
               {canCreateUser &&
                 authMethods.context.authMethods?.password.enabled && (
                   <Button
+                    variant="outlined"
                     onClick={() => {
                       navigate("/users/create")
                     }}
@@ -51,7 +52,9 @@ export const UsersLayout: FC = () => {
                   component={RouterLink}
                   to="/groups/create"
                 >
-                  <Button startIcon={<GroupAdd />}>Create group</Button>
+                  <Button variant="outlined" startIcon={<GroupAdd />}>
+                    Create group
+                  </Button>
                 </Link>
               )}
             </>
diff --git a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx
index 1cfbd0c17b482..594cd23b75adf 100644
--- a/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx
+++ b/site/src/components/WorkspaceActionButton/WorkspaceActionButton.tsx
@@ -14,6 +14,7 @@ export const WorkspaceActionButton: FC<
 > = ({ label, icon, onClick, className, ariaLabel }) => {
   return (
     <Button
+      variant="outlined"
       className={className}
       startIcon={icon}
       onClick={onClick}
diff --git a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
index e137210df9010..9493a22481472 100644
--- a/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
+++ b/site/src/components/WorkspaceScheduleButton/WorkspaceScheduleButton.tsx
@@ -16,6 +16,7 @@ import timezone from "dayjs/plugin/timezone"
 import utc from "dayjs/plugin/utc"
 import { useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
+import { colors } from "theme/colors"
 import { Workspace } from "../../api/typesGenerated"
 import { isWorkspaceOn } from "../../util/workspace"
 import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
@@ -154,6 +155,7 @@ export const WorkspaceScheduleButton: React.FC<
       </Maybe>
       <>
         <Button
+          variant="outlined"
           ref={anchorRef}
           startIcon={<ScheduleIcon />}
           onClick={() => {
@@ -198,8 +200,6 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   wrapper: {
     display: "inline-flex",
     alignItems: "center",
-    borderRadius: `${theme.shape.borderRadius}px`,
-    border: `1px solid ${theme.palette.divider}`,
 
     [theme.breakpoints.down("sm")]: {
       flexDirection: "column",
@@ -208,6 +208,14 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   label: {
     padding: theme.spacing(0, 2),
     color: theme.palette.text.secondary,
+    borderRadius: theme.shape.borderRadius,
+    border: `1px solid ${colors.gray[11]}`, // Same as outlined button
+    display: "flex",
+    height: theme.spacing(5), // Same as button
+    alignItems: "center",
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderRight: 0,
 
     [theme.breakpoints.down("sm")]: {
       width: "100%",
@@ -224,12 +232,9 @@ const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
     },
   },
   scheduleButton: {
-    border: "none",
-    borderRadius: `${theme.shape.borderRadius}px`,
     flexShrink: 0,
 
     "&.label": {
-      borderLeft: `1px solid ${theme.palette.divider}`,
       borderRadius: `0px ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px`,
     },
 
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index 80ade4b93b413..295e1bcf73a60 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -114,9 +114,12 @@ export const GroupPage: React.FC = () => {
               actions={
                 <Maybe condition={canUpdateGroup}>
                   <Link to="settings" underline="none" component={RouterLink}>
-                    <Button startIcon={<SettingsOutlined />}>Settings</Button>
+                    <Button variant="outlined" startIcon={<SettingsOutlined />}>
+                      Settings
+                    </Button>
                   </Link>
                   <Button
+                    variant="outlined"
                     onClick={() => {
                       send("DELETE")
                     }}
diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
index dc0abef801fd0..79d25aeed653e 100644
--- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
+++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx
@@ -46,6 +46,7 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
         actions={
           <>
             <Button
+              variant="outlined"
               component="a"
               target="_blank"
               href={starterTemplate.url}
diff --git a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
index 6b45d0da56bf3..dd0291fb4b954 100644
--- a/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
+++ b/site/src/pages/TemplateVersionPage/TemplateVersionPageView.tsx
@@ -129,7 +129,9 @@ export const TemplateVersionPageView: FC<TemplateVersionPageViewProps> = ({
               component={RouterLink}
               to={`/templates/${templateName}/versions/${versionName}/edit`}
             >
-              <Button startIcon={<EditIcon />}>Edit</Button>
+              <Button variant="outlined" startIcon={<EditIcon />}>
+                Edit
+              </Button>
             </Link>
           ) : undefined
         }
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index 762339ad5898c..d953dbe6119e0 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -151,7 +151,11 @@ export const TemplatesPageView: FC<
       <PageHeader
         actions={
           <Maybe condition={permissions.createTemplates}>
-            <Button component={RouterLink} to="/starter-templates">
+            <Button
+              variant="outlined"
+              component={RouterLink}
+              to="/starter-templates"
+            >
               Starter templates
             </Button>
             <Button startIcon={<AddIcon />} component={RouterLink} to="new">
diff --git a/site/src/theme/globalFonts.ts b/site/src/theme/globalFonts.ts
index 9d17076521f23..7714377acaf72 100644
--- a/site/src/theme/globalFonts.ts
+++ b/site/src/theme/globalFonts.ts
@@ -4,4 +4,5 @@ import "@fontsource/ibm-plex-mono/600.css"
 // Main body copy font
 import "@fontsource/inter/300.css"
 import "@fontsource/inter/400.css"
+import "@fontsource/inter/500.css"
 import "@fontsource/inter/600.css"
diff --git a/site/src/theme/overrides.ts b/site/src/theme/overrides.ts
index 561a798065b42..88e370af4ba5e 100644
--- a/site/src/theme/overrides.ts
+++ b/site/src/theme/overrides.ts
@@ -1,4 +1,4 @@
-import { lighten, Theme, StyleRules } from "@material-ui/core/styles"
+import { Theme, StyleRules } from "@material-ui/core/styles"
 import { Overrides } from "@material-ui/core/styles/overrides"
 import { SkeletonClassKey } from "@material-ui/lab"
 import { colors } from "./colors"
@@ -54,21 +54,27 @@ export const getOverrides = ({
           outline: `2px solid ${palette.primary.dark}`,
         },
       },
+
       contained: {
         boxShadow: "none",
         color: palette.text.primary,
-        backgroundColor: colors.gray[17],
-
-        "&:hover": {
-          boxShadow: "none",
-          backgroundColor: colors.gray[17],
-          borderColor: lighten(palette.divider, 0.2),
-        },
-
-        "&.Mui-disabled": {
-          backgroundColor: palette.background.paper,
-          color: palette.secondary.main,
-        },
+        backgroundColor: colors.gray[13],
+        borderColor: colors.gray[12],
+
+        "&:hover:not(:disabled):not(.MuiButton-containedPrimary):not(.MuiButton-containedSecondary)":
+          {
+            boxShadow: "none",
+            backgroundColor: colors.gray[12],
+            borderColor: colors.gray[11],
+          },
+
+        "&.Mui-disabled:not(.MuiButton-containedPrimary):not(.MuiButton-containedSecondary)":
+          {
+            color: colors.gray[9],
+            backgroundColor: colors.gray[14],
+            cursor: "not-allowed",
+            pointerEvents: "auto",
+          },
       },
       sizeSmall: {
         padding: `0 16px`,
@@ -89,10 +95,18 @@ export const getOverrides = ({
         },
       },
       outlined: {
-        border: `1px solid ${palette.divider}`,
+        border: `1px solid ${colors.gray[11]}`,
 
-        "&:hover": {
-          backgroundColor: palette.action.hover,
+        "&:hover:not(:disabled)": {
+          borderColor: colors.gray[1],
+          background: "none",
+        },
+
+        "&.Mui-disabled": {
+          color: colors.gray[9],
+          border: `1px solid ${colors.gray[12]}`,
+          pointerEvents: "auto",
+          cursor: "not-allowed",
         },
       },
     },