diff --git a/assets/package.json b/assets/package.json
index c44d720253..c2c61b85ad 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -7,7 +7,7 @@
     "start": "vite",
     "start:dev": "BASE_URL=console.plrl-dev-aws.onplural.sh yarn start",
     "start:cd": "BASE_URL=console.boot-aws.onplural.sh yarn start",
-    "start:prod": "yarn build && BASE_URL=console.plrl-dev-aws.onplural.sh vite preview",
+    "start:prod": "VITE_PROD_SECRET_KEY=1234567890 vite build && BASE_URL=console.boot-aws.onplural.sh vite preview",
     "build": "tsc --build && vite build",
     "test": "vitest --run",
     "test:watch": "vitest",
@@ -49,7 +49,7 @@
     "@nivo/radial-bar": "0.88.0",
     "@nivo/tooltip": "0.88.0",
     "@nivo/treemap": "0.88.0",
-    "@pluralsh/design-system": "5.7.0",
+    "@pluralsh/design-system": "5.7.1",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-table": "8.20.5",
diff --git a/assets/src/components/cd/cluster/node/NodeEvents.tsx b/assets/src/components/cd/cluster/node/NodeEvents.tsx
index fb441a2935..bfb2e18352 100644
--- a/assets/src/components/cd/cluster/node/NodeEvents.tsx
+++ b/assets/src/components/cd/cluster/node/NodeEvents.tsx
@@ -1,6 +1,6 @@
-import { useOutletContext } from 'react-router-dom'
-import { Flex } from 'honorable'
+import { Flex } from '@pluralsh/design-system'
 import LoadingIndicator from 'components/utils/LoadingIndicator'
+import { useOutletContext } from 'react-router-dom'
 
 import { Node } from 'generated/graphql'
 
diff --git a/assets/src/components/cd/cluster/node/NodeMetadata.tsx b/assets/src/components/cd/cluster/node/NodeMetadata.tsx
index dab69459d2..c91488325c 100644
--- a/assets/src/components/cd/cluster/node/NodeMetadata.tsx
+++ b/assets/src/components/cd/cluster/node/NodeMetadata.tsx
@@ -1,12 +1,12 @@
-import { useOutletContext } from 'react-router-dom'
-import { Flex } from 'honorable'
+import { Flex } from '@pluralsh/design-system'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
+import { MetadataGrid, MetadataItem } from 'components/utils/Metadata'
 import { Node } from 'generated/graphql'
+import { useOutletContext } from 'react-router-dom'
 import { nodeStatusToReadiness } from 'utils/status'
-import { MetadataGrid, MetadataItem } from 'components/utils/Metadata'
-import LoadingIndicator from 'components/utils/LoadingIndicator'
 
-import { StatusChip } from '../../../cluster/TableElements'
 import { LabelsAnnotations } from '../../../cluster/LabelsAnnotations'
+import { StatusChip } from '../../../cluster/TableElements'
 
 export default function NodeMetadata() {
   const { node } = useOutletContext() as { node: Node }
diff --git a/assets/src/components/cd/cluster/node/NodeRaw.tsx b/assets/src/components/cd/cluster/node/NodeRaw.tsx
index 722935d292..d143bf0415 100644
--- a/assets/src/components/cd/cluster/node/NodeRaw.tsx
+++ b/assets/src/components/cd/cluster/node/NodeRaw.tsx
@@ -1,7 +1,7 @@
+import { Flex } from '@pluralsh/design-system'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
 import { useOutletContext } from 'react-router-dom'
 import { stringify } from 'yaml'
-import { Flex } from 'honorable'
-import LoadingIndicator from 'components/utils/LoadingIndicator'
 
 import { Node } from '../../../../generated/graphql'
 import { RawPageCode } from '../../../utils/RawPageCode.tsx'
diff --git a/assets/src/components/cd/cluster/pod/Pod.tsx b/assets/src/components/cd/cluster/pod/Pod.tsx
index ba11d5d400..011e7ae47c 100644
--- a/assets/src/components/cd/cluster/pod/Pod.tsx
+++ b/assets/src/components/cd/cluster/pod/Pod.tsx
@@ -120,7 +120,7 @@ export default function Pod() {
       </ResponsiveLayoutSidenavContainer>
       <ResponsiveLayoutSpacer />
       <TabPanel
-        as={<ResponsiveLayoutContentContainer overflow="visible" />}
+        as={<ResponsiveLayoutContentContainer css={{ overflow: 'visible' }} />}
         stateRef={tabStateRef}
       >
         <Outlet context={{ pod }} />
diff --git a/assets/src/components/cd/cluster/pod/PodContainers.tsx b/assets/src/components/cd/cluster/pod/PodContainers.tsx
index 58c5b31193..87fc6da691 100644
--- a/assets/src/components/cd/cluster/pod/PodContainers.tsx
+++ b/assets/src/components/cd/cluster/pod/PodContainers.tsx
@@ -1,6 +1,7 @@
 import {
   Chip,
   CollapseIcon,
+  Flex,
   IconFrame,
   Prop,
   Table,
@@ -11,18 +12,18 @@ import { createColumnHelper, Row } from '@tanstack/react-table'
 import { UnstyledLink } from 'components/utils/Link'
 import { filesize } from 'filesize'
 import { Container, ContainerStatus, Maybe, Port } from 'generated/graphql'
-import { Flex, Span } from 'honorable'
+import { Span } from 'honorable'
 import { ComponentProps, CSSProperties, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 import { cpuParser, memoryParser } from 'utils/kubernetes'
 import {
+  containerStatusToReadiness,
   Readiness,
   ReadinessT,
-  containerStatusToReadiness,
+  readinessToContainerLabel,
   readinessToLabel,
   readinessToSeverity,
-  readinessToContainerLabel,
 } from 'utils/status'
 
 import { Overline } from 'components/cd/utils/PermissionsModal.tsx'
diff --git a/assets/src/components/cd/cluster/pod/PodInfo.tsx b/assets/src/components/cd/cluster/pod/PodInfo.tsx
index b42f500e90..af0b0ab2c3 100644
--- a/assets/src/components/cd/cluster/pod/PodInfo.tsx
+++ b/assets/src/components/cd/cluster/pod/PodInfo.tsx
@@ -1,27 +1,27 @@
-import { Link, useOutletContext, useParams } from 'react-router-dom'
-import { Flex } from 'honorable'
+import { Button, Flex, LogsIcon } from '@pluralsh/design-system'
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
 import { ContainerStatus, Maybe, Pod } from 'generated/graphql'
-import { Button, LogsIcon } from '@pluralsh/design-system'
+import { Link, useOutletContext, useParams } from 'react-router-dom'
 
 import { SubTitle } from '../../../utils/SubTitle'
 
-import { Readiness } from '../../../../utils/status'
 import { getServicePodDetailsPath } from '../../../../routes/cdRoutesConsts'
+import { Readiness } from '../../../../utils/status'
 import { PodConditions } from './PodConditions.tsx'
-import { PodMetadata } from './PodMetadata.tsx'
 import {
   ColCpuReservation,
+  ColExpander,
   ColImage,
   ColMemoryReservation,
   ColName,
   ColPorts,
   ColStatus,
-  ShellLink,
   columnHelper,
-  ColExpander,
   PodContainers,
+  ShellLink,
 } from './PodContainers.tsx'
+import { PodMetadata } from './PodMetadata.tsx'
+import { useTheme } from 'styled-components'
 
 export const statusesToRecord = (statuses?: Maybe<Maybe<ContainerStatus>[]>) =>
   (statuses || []).reduce(
@@ -94,6 +94,7 @@ const columns = [
 
 // It's used by multiple routes.
 export default function PodInfo() {
+  const { spacing } = useTheme()
   const { clusterId, serviceId } = useParams()
   const { pod } = useOutletContext() as { pod: Pod }
   const containers = pod.spec.containers || []
@@ -112,7 +113,7 @@ export default function PodInfo() {
       <Flex
         direction="column"
         gap="xlarge"
-        paddingBottom="large"
+        paddingBottom={spacing.large}
       >
         <section>
           <SubTitle>Containers</SubTitle>
diff --git a/assets/src/components/cd/cluster/pod/PodMetadata.tsx b/assets/src/components/cd/cluster/pod/PodMetadata.tsx
index b259ad8c92..4746a1f89e 100644
--- a/assets/src/components/cd/cluster/pod/PodMetadata.tsx
+++ b/assets/src/components/cd/cluster/pod/PodMetadata.tsx
@@ -1,9 +1,7 @@
-import { Card } from '@pluralsh/design-system'
+import { Card, Flex } from '@pluralsh/design-system'
 
-import { Flex } from 'honorable'
-
-import { Pod } from 'generated/graphql'
 import { LabelPairsSection } from 'components/utils/LabelPairsSection'
+import { Pod } from 'generated/graphql'
 
 import { useTheme } from 'styled-components'
 
diff --git a/assets/src/components/cd/logs/LogsInfoPanel.tsx b/assets/src/components/cd/logs/LogsInfoPanel.tsx
index 395e597ad8..998028f19b 100644
--- a/assets/src/components/cd/logs/LogsInfoPanel.tsx
+++ b/assets/src/components/cd/logs/LogsInfoPanel.tsx
@@ -1,5 +1,5 @@
-import { CloseIcon, Modal } from '@pluralsh/design-system'
-import { Div, Flex, Span } from 'honorable'
+import { CloseIcon, Flex, Modal } from '@pluralsh/design-system'
+import { Div, Span } from 'honorable'
 
 export function LogsInfoPanel({
   title,
diff --git a/assets/src/components/cd/services/service/pod/Pod.tsx b/assets/src/components/cd/services/service/pod/Pod.tsx
index 7277c6bcda..48583dafa8 100644
--- a/assets/src/components/cd/services/service/pod/Pod.tsx
+++ b/assets/src/components/cd/services/service/pod/Pod.tsx
@@ -130,7 +130,7 @@ export default function Pod() {
       </ResponsiveLayoutSidenavContainer>
       <ResponsiveLayoutSpacer />
       <TabPanel
-        as={<ResponsiveLayoutContentContainer overflow="visible" />}
+        as={<ResponsiveLayoutContentContainer css={{ overflow: 'visible' }} />}
         stateRef={tabStateRef}
       >
         <Outlet context={{ pod }} />
diff --git a/assets/src/components/cluster/ContainerStatuses.tsx b/assets/src/components/cluster/ContainerStatuses.tsx
index 323e2de521..ff1a3fbee8 100644
--- a/assets/src/components/cluster/ContainerStatuses.tsx
+++ b/assets/src/components/cluster/ContainerStatuses.tsx
@@ -1,9 +1,9 @@
-import { Tooltip } from '@pluralsh/design-system'
-import { Div, Flex, Span } from 'honorable'
+import { Flex, Tooltip } from '@pluralsh/design-system'
+import { Div, Span } from 'honorable'
 import styled from 'styled-components'
 import { Readiness, ReadinessT, readinessToContainerLabel } from 'utils/status'
 
-import { ReactElement, type JSX } from 'react'
+import { type JSX, ReactElement } from 'react'
 import { ContainerStatusT } from '../cd/cluster/pod/PodsList.tsx'
 
 const iconBaseProps = {
diff --git a/assets/src/components/cluster/Gauges.tsx b/assets/src/components/cluster/Gauges.tsx
index e5235d0545..576894d2ae 100644
--- a/assets/src/components/cluster/Gauges.tsx
+++ b/assets/src/components/cluster/Gauges.tsx
@@ -1,8 +1,8 @@
-import { ReactNode, useMemo } from 'react'
 import { filesize } from 'filesize'
+import { ReactNode, useMemo } from 'react'
 import styled from 'styled-components'
 
-import { Flex, FlexProps } from 'honorable'
+import { Flex, FlexProps } from '@pluralsh/design-system'
 
 import RadialBarChart from 'components/utils/RadialBarChart'
 
diff --git a/assets/src/components/cluster/LabelsAnnotations.tsx b/assets/src/components/cluster/LabelsAnnotations.tsx
index 2cff77e104..f8cc5fd629 100644
--- a/assets/src/components/cluster/LabelsAnnotations.tsx
+++ b/assets/src/components/cluster/LabelsAnnotations.tsx
@@ -1,8 +1,8 @@
-import { CardProps, ChipList } from '@pluralsh/design-system'
-import { Div, Flex } from 'honorable'
-import { ReactNode } from 'react'
-import type { LabelPair, Maybe, Metadata as MetadataT } from 'generated/graphql'
+import { CardProps, ChipList, Flex } from '@pluralsh/design-system'
 import { CARD_CONTENT_MAX_WIDTH, MetadataCard } from 'components/utils/Metadata'
+import type { LabelPair, Maybe, Metadata as MetadataT } from 'generated/graphql'
+import { Div } from 'honorable'
+import { ReactNode } from 'react'
 import { useTheme } from 'styled-components'
 
 export const mapify = (tags) =>
diff --git a/assets/src/components/cluster/TableElements.tsx b/assets/src/components/cluster/TableElements.tsx
index 4f0de493fd..f1e2a4153c 100644
--- a/assets/src/components/cluster/TableElements.tsx
+++ b/assets/src/components/cluster/TableElements.tsx
@@ -2,15 +2,15 @@ import {
   AppIcon,
   CaretRightIcon,
   Chip,
-  IconFrame,
   ChipProps,
+  Flex,
+  IconFrame,
 } from '@pluralsh/design-system'
 import { SortingFn } from '@tanstack/table-core'
 import { UnstyledLink } from 'components/utils/Link'
 import { Maybe } from 'generated/graphql'
-import { Flex } from 'honorable'
 import { ComponentProps, ReactNode } from 'react'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
 import {
   PhaseT,
   phaseToSeverity,
@@ -151,11 +151,9 @@ export function LabelWithIcon({
   label?: Maybe<string>
   icon?: Maybe<string>
 }) {
-  const theme = useTheme()
-
   return (
     <Flex
-      gap={theme.spacing.xsmall}
+      gap="xsmall"
       alignItems="center"
     >
       {icon && (
diff --git a/assets/src/components/cluster/containers/ContainerShell.tsx b/assets/src/components/cluster/containers/ContainerShell.tsx
index ef428b70f0..22e9aa8dbb 100644
--- a/assets/src/components/cluster/containers/ContainerShell.tsx
+++ b/assets/src/components/cluster/containers/ContainerShell.tsx
@@ -1,6 +1,6 @@
-import { Button, ToolIcon, Tooltip } from '@pluralsh/design-system'
+import { Button, Flex, ToolIcon, Tooltip } from '@pluralsh/design-system'
+import { Div } from 'honorable'
 import { useContext, useState } from 'react'
-import { Div, Flex } from 'honorable'
 
 import TerminalThemeSelector from 'components/terminal/TerminalThemeSelector'
 
diff --git a/assets/src/components/cluster/containers/ShellCommandEditor.tsx b/assets/src/components/cluster/containers/ShellCommandEditor.tsx
index d90a08d349..bb9694e6e2 100644
--- a/assets/src/components/cluster/containers/ShellCommandEditor.tsx
+++ b/assets/src/components/cluster/containers/ShellCommandEditor.tsx
@@ -5,8 +5,8 @@ import {
   Input,
   PencilIcon,
 } from '@pluralsh/design-system'
+import { Form } from 'honorable'
 import { useEffect, useRef, useState } from 'react'
-import { Flex, Form } from 'honorable'
 import styled from 'styled-components'
 
 export const CODELINE_HEIGHT = 42
@@ -102,7 +102,7 @@ export function ShellCommandEditor({
 }) {
   const [isEditing, setIsEditing] = useState(false)
   const [inputVal, setInputVal] = useState(command)
-  const inputWrapRef = useRef<HTMLDivElement>(undefined)
+  const inputWrapRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     if (!isEditing) {
@@ -136,13 +136,7 @@ export function ShellCommandEditor({
       flex="1 1"
       overflow="hidden"
     >
-      <Flex
-        ref={inputWrapRef as any}
-        minWidth={50}
-        // width="50px"
-        flex="1 1"
-        overflow="hidden"
-      >
+      <WrapperSC ref={inputWrapRef}>
         <CodeWrap
           $isEditing={isEditing}
           className="codeWrap"
@@ -169,7 +163,7 @@ export function ShellCommandEditor({
             }}
           />
         )}
-      </Flex>
+      </WrapperSC>
       {!isEditing && (
         <Button
           floating
@@ -208,3 +202,10 @@ export function ShellCommandEditor({
     </Form>
   )
 }
+
+const WrapperSC = styled.div(() => ({
+  display: 'flex',
+  minWidth: 50,
+  flex: '1 1',
+  overflow: 'hidden',
+}))
diff --git a/assets/src/components/cluster/nodes/ClusterMetrics.tsx b/assets/src/components/cluster/nodes/ClusterMetrics.tsx
index 9447f83b09..d1da5853a3 100644
--- a/assets/src/components/cluster/nodes/ClusterMetrics.tsx
+++ b/assets/src/components/cluster/nodes/ClusterMetrics.tsx
@@ -1,14 +1,13 @@
-import { Flex } from 'honorable'
+import { Card, Flex } from '@pluralsh/design-system'
+import { useDeploymentSettings } from 'components/contexts/DeploymentSettingsContext'
 import {
   ClusterFragment,
   ClusterNodeFragment,
   Maybe,
   useClusterMetricsQuery,
 } from 'generated/graphql'
-import { useDeploymentSettings } from 'components/contexts/DeploymentSettingsContext'
-import { Card } from '@pluralsh/design-system'
-import { useTheme } from 'styled-components'
 import { isNull } from 'lodash'
+import { useTheme } from 'styled-components'
 
 import { Prometheus } from '../../../utils/prometheus'
 import LoadingIndicator from '../../utils/LoadingIndicator'
@@ -51,62 +50,47 @@ export function ClusterMetrics({
   return (
     <Card css={{ padding: theme.spacing.xlarge }}>
       <Flex
-        flex={false}
-        direction="column"
-        gap="xlarge"
-        align="center"
+        width="100%"
+        gap="xsmall"
       >
-        <Flex
-          flex={false}
-          flexDirection="row"
-          alignItems="stretch"
-          justifyContent="center"
-          width="100%"
-          gap="xsmall"
-          overflow="visible"
-          wrap="wrap"
-        >
-          <ClusterGauges
-            cpu={{
-              usage: Prometheus.toValues(
-                data?.cluster?.clusterMetrics?.cpuUsage
-              ),
-              requests: Prometheus.toValues(
-                data?.cluster?.clusterMetrics?.cpuRequests
-              ),
-              limits: Prometheus.toValues(
-                data?.cluster?.clusterMetrics?.cpuLimits
-              ),
-              total: cpuTotal!,
-            }}
-            memory={{
-              usage: Prometheus.toValues(
-                data?.cluster?.clusterMetrics?.memoryUsage
-              ),
-              requests: Prometheus.toValues(
-                data?.cluster?.clusterMetrics?.memoryRequests
-              ),
-              limits: Prometheus.toValues(
-                data?.cluster?.clusterMetrics?.memoryLimits
-              ),
-              total: memTotal!,
-            }}
-            pods={{
-              used: Prometheus.toValues(data?.cluster?.clusterMetrics?.pods),
-              total: podsTotal!,
-            }}
-          />
-          <SaturationGraphs
-            cpuUsage={Prometheus.toValues(
-              data?.cluster?.clusterMetrics?.cpuUsage
-            )}
-            cpuTotal={cpuTotal!}
-            memUsage={Prometheus.toValues(
+        <ClusterGauges
+          cpu={{
+            usage: Prometheus.toValues(data?.cluster?.clusterMetrics?.cpuUsage),
+            requests: Prometheus.toValues(
+              data?.cluster?.clusterMetrics?.cpuRequests
+            ),
+            limits: Prometheus.toValues(
+              data?.cluster?.clusterMetrics?.cpuLimits
+            ),
+            total: cpuTotal!,
+          }}
+          memory={{
+            usage: Prometheus.toValues(
               data?.cluster?.clusterMetrics?.memoryUsage
-            )}
-            memTotal={memTotal!}
-          />
-        </Flex>
+            ),
+            requests: Prometheus.toValues(
+              data?.cluster?.clusterMetrics?.memoryRequests
+            ),
+            limits: Prometheus.toValues(
+              data?.cluster?.clusterMetrics?.memoryLimits
+            ),
+            total: memTotal!,
+          }}
+          pods={{
+            used: Prometheus.toValues(data?.cluster?.clusterMetrics?.pods),
+            total: podsTotal!,
+          }}
+        />
+        <SaturationGraphs
+          cpuUsage={Prometheus.toValues(
+            data?.cluster?.clusterMetrics?.cpuUsage
+          )}
+          cpuTotal={cpuTotal!}
+          memUsage={Prometheus.toValues(
+            data?.cluster?.clusterMetrics?.memoryUsage
+          )}
+          memTotal={memTotal!}
+        />
       </Flex>
     </Card>
   )
diff --git a/assets/src/components/edge/clusters/Clusters.tsx b/assets/src/components/edge/clusters/Clusters.tsx
index 952839d446..b1c80bb36e 100644
--- a/assets/src/components/edge/clusters/Clusters.tsx
+++ b/assets/src/components/edge/clusters/Clusters.tsx
@@ -2,6 +2,7 @@ import {
   AppIcon,
   Button,
   ChipList,
+  Flex,
   LoopingLogo,
   Table,
 } from '@pluralsh/design-system'
@@ -15,7 +16,6 @@ import {
   ClusterRegistrationFragment,
   useClusterRegistrationsQuery,
 } from 'generated/graphql'
-import { Flex } from 'honorable'
 import { ReactNode, useMemo, useState } from 'react'
 import { mapExistingNodes } from 'utils/graphql'
 import { DateTimeCol } from '../../utils/table/DateTimeCol.tsx'
diff --git a/assets/src/components/layout/Console.tsx b/assets/src/components/layout/Console.tsx
index 688e0d054d..205c779309 100644
--- a/assets/src/components/layout/Console.tsx
+++ b/assets/src/components/layout/Console.tsx
@@ -1,10 +1,10 @@
+import { Flex, MarkdocContextProvider, Toast } from '@pluralsh/design-system'
 import { Suspense } from 'react'
-import { MarkdocContextProvider, Toast } from '@pluralsh/design-system'
 
 import BillingSubscriptionProvider from 'components/billing/BillingSubscriptionProvider'
 import BreadcrumbsProvider from 'components/contexts/BreadcrumbsProvider'
 import ConsoleNavContextProvider from 'components/contexts/NavigationContext'
-import { A, Flex, Span } from 'honorable'
+import { A, Span } from 'honorable'
 import { Outlet } from 'react-router-dom'
 
 import LoadingIndicator from 'components/utils/LoadingIndicator'
@@ -21,13 +21,13 @@ import { ProjectsProvider } from '../contexts/ProjectsContext'
 
 import { ShareSecretProvider } from '../sharesecret/ShareSecretContext'
 
+import { AIContextProvider } from 'components/ai/AIContext'
+import { CloudConsoleWelcomeModal } from './CloudConsoleWelcomeModal'
 import Header from './Header'
 import { ContentOverlay } from './Overlay'
 import Sidebar from './Sidebar'
 import Subheader from './Subheader'
 import WithApplicationUpdate from './WithApplicationUpdate'
-import { CloudConsoleWelcomeModal } from './CloudConsoleWelcomeModal'
-import { AIContextProvider } from 'components/ai/AIContext'
 
 export default function Console() {
   return (
diff --git a/assets/src/components/layout/Header.tsx b/assets/src/components/layout/Header.tsx
index 42e77b598b..a90f15c562 100644
--- a/assets/src/components/layout/Header.tsx
+++ b/assets/src/components/layout/Header.tsx
@@ -1,10 +1,13 @@
-import { Flex } from 'honorable'
-import { LightDarkSwitch, setThemeColorMode } from '@pluralsh/design-system'
-import styled, { useTheme } from 'styled-components'
+import {
+  Flex,
+  LightDarkSwitch,
+  setThemeColorMode,
+} from '@pluralsh/design-system'
 import { useNavigate } from 'react-router-dom'
+import styled, { useTheme } from 'styled-components'
 
-import BillingSubscriptionChip from 'components/billing/BillingSubscriptionChip'
 import BillingLegacyUserMessage from 'components/billing/BillingLegacyUserMessage'
+import BillingSubscriptionChip from 'components/billing/BillingSubscriptionChip'
 import CommandPaletteLauncher from 'components/commandpalette/CommandPaletteLauncher'
 
 import NotificationsLauncher from '../notifications/NotificationsLauncher'
diff --git a/assets/src/components/layout/Notification.tsx b/assets/src/components/layout/Notification.tsx
index 54f8e242f5..9a2f979fe1 100644
--- a/assets/src/components/layout/Notification.tsx
+++ b/assets/src/components/layout/Notification.tsx
@@ -1,5 +1,5 @@
-import { Accordion, AccordionItem } from '@pluralsh/design-system'
-import { Flex, P } from 'honorable'
+import { Accordion, AccordionItem, Flex } from '@pluralsh/design-system'
+import { P } from 'honorable'
 import { useTheme } from 'styled-components'
 import { formatDateTime } from 'utils/datetime'
 
diff --git a/assets/src/components/layout/NotificationsPanel.tsx b/assets/src/components/layout/NotificationsPanel.tsx
index 786745a820..349d0033c5 100644
--- a/assets/src/components/layout/NotificationsPanel.tsx
+++ b/assets/src/components/layout/NotificationsPanel.tsx
@@ -1,10 +1,11 @@
-import { Flex, P } from 'honorable'
+import { Flex } from '@pluralsh/design-system'
+import { P } from 'honorable'
 
+import { useApolloClient, useQuery, useSubscription } from '@apollo/client'
 import { ME_Q, NOTIFICATIONS_Q } from 'components/graphql/users'
 import InfiniteScroller from 'components/utils/InfiniteScroller'
-import { useApolloClient, useQuery, useSubscription } from '@apollo/client'
-import { extendConnection, updateCache } from 'utils/graphql'
 import { Dispatch, useEffect } from 'react'
+import { extendConnection, updateCache } from 'utils/graphql'
 
 import Notification from './Notification'
 import { NOTIFS_SUB } from './queries'
diff --git a/assets/src/components/layout/NotificationsPanelOverlay.tsx b/assets/src/components/layout/NotificationsPanelOverlay.tsx
index 8678e77c32..dfdb199814 100644
--- a/assets/src/components/layout/NotificationsPanelOverlay.tsx
+++ b/assets/src/components/layout/NotificationsPanelOverlay.tsx
@@ -1,9 +1,14 @@
+import {
+  AnimatedDiv,
+  CloseIcon,
+  Flex,
+  IconFrame,
+} from '@pluralsh/design-system'
+import { Checkbox, P, useOutsideClick } from 'honorable'
 import { Dispatch, SetStateAction, useMemo, useRef, useState } from 'react'
-import { Checkbox, Flex, P, useOutsideClick } from 'honorable'
-import { AnimatedDiv, CloseIcon, IconFrame } from '@pluralsh/design-system'
 import { useTransition } from 'react-spring'
 
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import { NotificationsPanel } from './NotificationsPanel'
 
@@ -56,6 +61,7 @@ export function NotificationsPanelOverlay({
   isOpen: boolean
   setIsOpen: Dispatch<SetStateAction<boolean>>
 }) {
+  const theme = useTheme()
   const notificationsPanelRef = useRef<any>(undefined)
   const [all, setAll] = useState<boolean>(false)
 
@@ -76,7 +82,7 @@ export function NotificationsPanelOverlay({
           align="center"
           justify="space-between"
           padding="medium"
-          borderBottom="1px solid border"
+          borderBottom={theme.borders.default}
         >
           <P subtitle2>Notifications</P>
           <Flex
diff --git a/assets/src/components/login/Invite.tsx b/assets/src/components/login/Invite.tsx
index 88503cae8f..7d1c3a89a2 100644
--- a/assets/src/components/login/Invite.tsx
+++ b/assets/src/components/login/Invite.tsx
@@ -1,15 +1,15 @@
-import { ComponentProps, useState } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
 import { useMutation, useQuery } from '@apollo/client'
-import { Div, Flex, Form, P } from 'honorable'
-import { Button } from '@pluralsh/design-system'
+import { Button, Flex } from '@pluralsh/design-system'
 import { GqlError } from 'components/utils/Alert'
 import { WelcomeHeader } from 'components/utils/WelcomeHeader'
+import { Div, Form, P } from 'honorable'
+import { ComponentProps, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
 
 import { setRefreshToken, setToken } from '../../helpers/auth'
 
-import { LabelledInput } from '../utils/LabelledInput'
 import { INVITE_Q, SIGNUP } from '../graphql/users'
+import { LabelledInput } from '../utils/LabelledInput'
 
 import { LoginPortal } from './LoginPortal'
 import {
@@ -18,6 +18,7 @@ import {
   PasswordErrorMessage,
   validatePassword,
 } from './PasswordValidation'
+import { useTheme } from 'styled-components'
 
 function InvalidInvite() {
   return (
@@ -91,6 +92,7 @@ export function ConfirmPasswordField({
 }
 
 export default function Invite() {
+  const { spacing } = useTheme()
   const navigate = useNavigate()
   const { inviteId } = useParams()
   const [attributes, setAttributes] = useState({ name: '', password: '' })
@@ -154,7 +156,7 @@ export default function Invite() {
         <Flex
           flexDirection="column"
           gap="small"
-          marginBottom="small"
+          marginBottom={spacing.small}
         >
           <LabelledInput
             label="Email"
diff --git a/assets/src/components/login/Login.tsx b/assets/src/components/login/Login.tsx
index fed6be6015..c1141adfed 100644
--- a/assets/src/components/login/Login.tsx
+++ b/assets/src/components/login/Login.tsx
@@ -1,9 +1,9 @@
 import { ApolloError, useMutation, useQuery } from '@apollo/client'
-import { Button, LoopingLogo } from '@pluralsh/design-system'
+import { Button, Flex, LoopingLogo } from '@pluralsh/design-system'
 import { WelcomeHeader } from 'components/utils/WelcomeHeader'
-import { User, useMeQuery } from 'generated/graphql'
+import { useMeQuery, User } from 'generated/graphql'
 import gql from 'graphql-tag'
-import { Div, Flex, Form, P } from 'honorable'
+import { Div, Form, P } from 'honorable'
 import { RefObject, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { isValidEmail } from 'utils/email'
@@ -255,7 +255,7 @@ export default function Login() {
           <Flex
             flexDirection="column"
             gap="small"
-            marginBottom="small"
+            marginBottom={theme.spacing.small}
           >
             <LabelledInput
               ref={emailRef}
diff --git a/assets/src/components/pr/scm/CreateScmWebhook.tsx b/assets/src/components/pr/scm/CreateScmWebhook.tsx
index 8ec683e245..dbbd29aa1b 100644
--- a/assets/src/components/pr/scm/CreateScmWebhook.tsx
+++ b/assets/src/components/pr/scm/CreateScmWebhook.tsx
@@ -1,11 +1,12 @@
-import { useCallback, useState } from 'react'
 import {
   Button,
   Codeline,
+  Flex,
   FormField,
   Input2,
   Modal,
 } from '@pluralsh/design-system'
+import { useCallback, useState } from 'react'
 import { useTheme } from 'styled-components'
 
 import {
@@ -17,8 +18,6 @@ import {
 import { useUpdateState } from 'components/hooks/useUpdateState'
 import { ModalMountTransition } from 'components/utils/ModalMountTransition'
 
-import { Flex } from 'honorable'
-
 import { GqlError } from 'components/utils/Alert'
 
 import { Body2P } from 'components/utils/typography/Text'
diff --git a/assets/src/components/profile/Permissions.tsx b/assets/src/components/profile/Permissions.tsx
index b7b538fffc..a310071936 100644
--- a/assets/src/components/profile/Permissions.tsx
+++ b/assets/src/components/profile/Permissions.tsx
@@ -3,13 +3,14 @@ import {
   Chip,
   Code,
   ContentCard,
+  Flex,
   Modal,
   Tooltip,
   useSetBreadcrumbs,
 } from '@pluralsh/design-system'
 import { LoginContext } from 'components/contexts'
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
-import { Flex, H3 } from 'honorable'
+import { H3 } from 'honorable'
 import { useContext, useMemo, useState } from 'react'
 import { stringify } from 'yaml'
 
diff --git a/assets/src/components/profile/Security.tsx b/assets/src/components/profile/Security.tsx
index ca096b1c70..a59b22e5dc 100644
--- a/assets/src/components/profile/Security.tsx
+++ b/assets/src/components/profile/Security.tsx
@@ -1,11 +1,9 @@
+import { Flex, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
-import { Flex } from 'honorable'
-
-import { useSetBreadcrumbs } from '@pluralsh/design-system'
 
+import { PROFILE_BREADCRUMBS } from './MyProfile'
 import SecurityAccess from './SecurityAccess'
 import SecurityPassword from './SecurityPassword'
-import { PROFILE_BREADCRUMBS } from './MyProfile'
 
 const breadcrumbs = [...PROFILE_BREADCRUMBS, { label: 'security' }]
 
diff --git a/assets/src/components/settings/audits/AuditsList.tsx b/assets/src/components/settings/audits/AuditsList.tsx
index c27897e050..93aea066c5 100644
--- a/assets/src/components/settings/audits/AuditsList.tsx
+++ b/assets/src/components/settings/audits/AuditsList.tsx
@@ -1,11 +1,15 @@
-import { AppIcon, Table, useSetBreadcrumbs } from '@pluralsh/design-system'
+import {
+  AppIcon,
+  Flex,
+  Table,
+  useSetBreadcrumbs,
+} from '@pluralsh/design-system'
 import { createColumnHelper } from '@tanstack/react-table'
 import LoadingIndicator from 'components/utils/LoadingIndicator'
 import { DateTimeCol } from 'components/utils/table/DateTimeCol'
 import { StackedText } from 'components/utils/table/StackedText'
 import { InlineLink } from 'components/utils/typography/InlineLink'
 import { useAuditsQuery } from 'generated/graphql'
-import { Flex } from 'honorable'
 import { useCallback, useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import { useTheme } from 'styled-components'
diff --git a/assets/src/components/settings/usermanagement/groups/GroupEdit.tsx b/assets/src/components/settings/usermanagement/groups/GroupEdit.tsx
index 17e5208ff3..302744fac7 100644
--- a/assets/src/components/settings/usermanagement/groups/GroupEdit.tsx
+++ b/assets/src/components/settings/usermanagement/groups/GroupEdit.tsx
@@ -2,12 +2,12 @@ import { useApolloClient } from '@apollo/client'
 import {
   Button,
   ComboBox,
+  Flex,
   FormField,
   Modal,
   Switch,
   ValidatedInput,
 } from '@pluralsh/design-system'
-import { Flex } from 'honorable'
 import { ComponentProps, ReactNode, useEffect, useState } from 'react'
 
 import { fetchUsers } from 'components/utils/BindingInput'
diff --git a/assets/src/components/settings/usermanagement/personas/PersonaActions.tsx b/assets/src/components/settings/usermanagement/personas/PersonaActions.tsx
index d0368ec6a6..0c72186e14 100644
--- a/assets/src/components/settings/usermanagement/personas/PersonaActions.tsx
+++ b/assets/src/components/settings/usermanagement/personas/PersonaActions.tsx
@@ -1,21 +1,26 @@
-import { GearTrainIcon, IconFrame, PeopleIcon } from '@pluralsh/design-system'
-import { useContext, useState } from 'react'
-import { Confirm } from 'components/utils/Confirm'
+import {
+  Flex,
+  GearTrainIcon,
+  IconFrame,
+  PeopleIcon,
+} from '@pluralsh/design-system'
 import { LoginContext } from 'components/contexts'
-import { Button, Flex } from 'honorable'
+import { Confirm } from 'components/utils/Confirm'
+import { DeleteIconButton } from 'components/utils/IconButtons'
 import {
   Persona as PersonaT,
   PersonasDocument,
   useDeletePersonaMutation,
 } from 'generated/graphql'
-import { DeleteIconButton } from 'components/utils/IconButtons'
+import { Button } from 'honorable'
+import { useContext, useState } from 'react'
 
 import { removeConnection, updateCache } from '../../../../utils/graphql'
-import { Permissions, hasRbac } from '../misc'
+import { hasRbac, Permissions } from '../misc'
 
 import { EditPersonaAttributes } from './PersonaAttributesEdit'
-import PersonaView from './PersonaView'
 import { EditPersonaBindings } from './PersonaBindingsEdit'
+import PersonaView from './PersonaView'
 
 export default function PersonaActions({ persona }: { persona: PersonaT }) {
   const { me } = useContext<any>(LoginContext)
@@ -39,79 +44,67 @@ export default function PersonaActions({ persona }: { persona: PersonaT }) {
   return (
     <Flex
       width="100%"
-      flexDirection="row"
       alignItems="center"
     >
-      <Flex
-        flex={false}
-        direction="row"
-        gap="large"
-        align="center"
-      >
-        {!editable && (
-          <Button
-            secondary
-            small
-            onClick={() => dialogKey === '' && setDialogKey('viewPersona')}
-          >
-            View
-          </Button>
-        )}
-        {editable && (
-          <Flex gap="xsmall">
-            <>
-              <IconFrame
-                clickable
-                size="medium"
-                onClick={() => dialogKey === '' && setDialogKey('editAttrs')}
-                tooltip="Edit attributes"
-                icon={<GearTrainIcon />}
-              />
-              <IconFrame
-                clickable
-                size="medium"
-                onClick={() => setDialogKey('editBindings')}
-                tooltip="Edit members"
-                icon={<PeopleIcon />}
-              />
-              <DeleteIconButton onClick={() => setDialogKey('confirmDelete')} />
-            </>
-          </Flex>
-        )}
-      </Flex>
-      <>
-        <PersonaView
-          open={dialogKey === 'viewPersona'}
-          onClose={() => dialogKey === 'viewPersona' && setDialogKey('')}
-          persona={persona}
-        />
-        <EditPersonaAttributes
-          persona={persona}
-          open={dialogKey === 'editAttrs'}
-          onClose={() => dialogKey === 'editAttrs' && setDialogKey('')}
-        />
-        <EditPersonaBindings
-          persona={persona}
-          open={dialogKey === 'editBindings'}
-          onClose={() => dialogKey === 'editBindings' && setDialogKey('')}
-        />
-        <Confirm
-          open={dialogKey === 'confirmDelete'}
-          text={
-            <>
-              Are you sure you want to delete the <b>{persona.name}</b> persona?
-              This could have downstream effects on a large number of users and
-              their personas.
-            </>
-          }
-          close={() => dialogKey === 'confirmDelete' && setDialogKey('')}
-          label="Delete persona"
-          submit={() => mutation()}
-          loading={loading}
-          destructive
-          error={error}
-        />
-      </>
+      {editable ? (
+        <Flex gap="xsmall">
+          <IconFrame
+            clickable
+            size="medium"
+            onClick={() => dialogKey === '' && setDialogKey('editAttrs')}
+            tooltip="Edit attributes"
+            icon={<GearTrainIcon />}
+          />
+          <IconFrame
+            clickable
+            size="medium"
+            onClick={() => setDialogKey('editBindings')}
+            tooltip="Edit members"
+            icon={<PeopleIcon />}
+          />
+          <DeleteIconButton onClick={() => setDialogKey('confirmDelete')} />
+        </Flex>
+      ) : (
+        <Button
+          secondary
+          small
+          onClick={() => dialogKey === '' && setDialogKey('viewPersona')}
+        >
+          View
+        </Button>
+      )}
+
+      <PersonaView
+        open={dialogKey === 'viewPersona'}
+        onClose={() => dialogKey === 'viewPersona' && setDialogKey('')}
+        persona={persona}
+      />
+      <EditPersonaAttributes
+        persona={persona}
+        open={dialogKey === 'editAttrs'}
+        onClose={() => dialogKey === 'editAttrs' && setDialogKey('')}
+      />
+      <EditPersonaBindings
+        persona={persona}
+        open={dialogKey === 'editBindings'}
+        onClose={() => dialogKey === 'editBindings' && setDialogKey('')}
+      />
+      <Confirm
+        open={dialogKey === 'confirmDelete'}
+        text={
+          <>
+            Are you sure you want to delete the <b>{persona.name}</b> persona?
+            This could have downstream effects on a large number of users and
+            their personas.
+          </>
+        }
+        close={() => dialogKey === 'confirmDelete' && setDialogKey('')}
+        label="Delete persona"
+        submit={() => mutation()}
+        loading={loading}
+        destructive
+        error={error}
+      />
     </Flex>
   )
 }
diff --git a/assets/src/components/settings/usermanagement/personas/PersonaAttributesEdit.tsx b/assets/src/components/settings/usermanagement/personas/PersonaAttributesEdit.tsx
index d550e16f3e..3f3f4bcf8a 100644
--- a/assets/src/components/settings/usermanagement/personas/PersonaAttributesEdit.tsx
+++ b/assets/src/components/settings/usermanagement/personas/PersonaAttributesEdit.tsx
@@ -1,23 +1,12 @@
 import {
   Button,
+  Flex,
   FormField,
   Input2,
   Modal,
   ValidatedInput,
 } from '@pluralsh/design-system'
-import {
-  ComponentProps,
-  FormEventHandler,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-import { Flex } from 'honorable'
 import { RequiredDeep } from 'type-fest'
-import mergeWith from 'lodash/mergeWith'
-import { useTheme } from 'styled-components'
 
 import {
   PersonaConfigurationAttributes,
@@ -25,15 +14,27 @@ import {
   useUpdatePersonaMutation,
 } from 'generated/graphql'
 
-import { deepOmitKey } from 'utils/deepOmitKey'
-import { ModalMountTransition } from 'components/utils/ModalMountTransition'
 import { GqlError } from 'components/utils/Alert'
-import { useUpdateState } from 'components/hooks/useUpdateState'
+import { ModalMountTransition } from 'components/utils/ModalMountTransition'
 
 import { Body2P } from 'components/utils/typography/Text'
 
+import { useUpdateState } from 'components/hooks/useUpdateState'
 import { PersonaConfiguration } from './PersonaConfiguration'
 
+import { mergeWith } from 'lodash'
+import {
+  ComponentProps,
+  FormEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useTheme } from 'styled-components'
+import { deepOmitKey } from 'utils/deepOmitKey'
+
 const BASE_CONFIGURATION: PersonaConfigurationAttributes = {
   all: false,
   home: {
diff --git a/assets/src/components/settings/usermanagement/roles/Roles.tsx b/assets/src/components/settings/usermanagement/roles/Roles.tsx
index c30aecc134..8938b133a4 100644
--- a/assets/src/components/settings/usermanagement/roles/Roles.tsx
+++ b/assets/src/components/settings/usermanagement/roles/Roles.tsx
@@ -1,12 +1,15 @@
+import {
+  Flex,
+  Input,
+  SearchIcon,
+  useSetBreadcrumbs,
+} from '@pluralsh/design-system'
 import BillingFeatureBlockBanner from 'components/billing/BillingFeatureBlockBanner'
 import BillingLegacyUserBanner from 'components/billing/BillingLegacyUserBanner'
 import SubscriptionContext from 'components/contexts/SubscriptionContext'
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
-import { Flex } from 'honorable'
 import { useContext, useState } from 'react'
 
-import { Input, SearchIcon, useSetBreadcrumbs } from '@pluralsh/design-system'
-
 import { List } from '../../../utils/List'
 
 import { getUserManagementBreadcrumbs } from '../UserManagement'
diff --git a/assets/src/components/settings/usermanagement/webhooks/Webhook.tsx b/assets/src/components/settings/usermanagement/webhooks/Webhook.tsx
index 92d8390b27..0c9f4b9c06 100644
--- a/assets/src/components/settings/usermanagement/webhooks/Webhook.tsx
+++ b/assets/src/components/settings/usermanagement/webhooks/Webhook.tsx
@@ -3,9 +3,13 @@ import { useState } from 'react'
 
 import { formatDateTime } from 'utils/datetime'
 
-import { Div, Flex, P } from 'honorable'
-
-import { IconFrame, SlackLogoIcon, TrashCanIcon } from '@pluralsh/design-system'
+import {
+  Flex,
+  IconFrame,
+  SlackLogoIcon,
+  TrashCanIcon,
+} from '@pluralsh/design-system'
+import { Div, P } from 'honorable'
 
 import { Confirm } from 'components/utils/Confirm'
 
@@ -16,8 +20,10 @@ import { removeConnection, updateCache } from '../../../../utils/graphql'
 import { DELETE_WEBHOOK, WEBHOOKS_Q } from '../../../graphql/webhooks'
 
 import WebhookHealth from './WebhookHealth'
+import { useTheme } from 'styled-components'
 
 export default function Webhook({ hook: { id, url, health, insertedAt } }) {
+  const { borders } = useTheme()
   const [confirm, setConfirm] = useState(false)
   const [mutation, { loading }] = useMutation(DELETE_WEBHOOK, {
     variables: { id },
@@ -33,7 +39,7 @@ export default function Webhook({ hook: { id, url, health, insertedAt } }) {
   return (
     <>
       <Flex
-        borderBottom="1px solid border"
+        borderBottom={borders.default}
         gap="small"
         justify="center"
         padding="small"
diff --git a/assets/src/components/settings/usermanagement/webhooks/Webhooks.tsx b/assets/src/components/settings/usermanagement/webhooks/Webhooks.tsx
index bade74b550..035bf10170 100644
--- a/assets/src/components/settings/usermanagement/webhooks/Webhooks.tsx
+++ b/assets/src/components/settings/usermanagement/webhooks/Webhooks.tsx
@@ -1,13 +1,11 @@
-import { Flex } from 'honorable'
+import { Flex, useSetBreadcrumbs } from '@pluralsh/design-system'
 
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
 
-import { useSetBreadcrumbs } from '@pluralsh/design-system'
-
 import { getUserManagementBreadcrumbs } from '../UserManagement'
 
-import WebhooksList from './WebhooksList'
 import WebhooksHeader from './WebhooksHeader'
+import WebhooksList from './WebhooksList'
 
 const breadcrumbs = getUserManagementBreadcrumbs('webhooks')
 
diff --git a/assets/src/components/stacks/run/Route.tsx b/assets/src/components/stacks/run/Route.tsx
index fa92a5b388..7292e9d4e6 100644
--- a/assets/src/components/stacks/run/Route.tsx
+++ b/assets/src/components/stacks/run/Route.tsx
@@ -90,7 +90,7 @@ export default function StackRunDetail(): ReactNode {
 
   return (
     <ResponsiveLayoutPage css={{ paddingBottom: theme.spacing.large }}>
-      <ResponsiveLayoutContentContainer maxWidth-desktopLarge-up="100%">
+      <ResponsiveLayoutContentContainer css={{ maxWidth: '100%' }}>
         <StackRunHeader
           stackRun={stackRun}
           refetch={refetch}
diff --git a/assets/src/components/stacks/run/plan/Plan.tsx b/assets/src/components/stacks/run/plan/Plan.tsx
index df14954aa5..e917858de6 100644
--- a/assets/src/components/stacks/run/plan/Plan.tsx
+++ b/assets/src/components/stacks/run/plan/Plan.tsx
@@ -13,7 +13,6 @@ export default function StackRunPlan(): ReactNode {
   return (
     <Card
       flexGrow={1}
-      fontFamily="Monument Mono"
       overflowY="auto"
       maxHeight="100%"
     >
diff --git a/assets/src/components/stacks/run/progress/Progress.tsx b/assets/src/components/stacks/run/progress/Progress.tsx
index d3064ecc86..532b8f0d7b 100644
--- a/assets/src/components/stacks/run/progress/Progress.tsx
+++ b/assets/src/components/stacks/run/progress/Progress.tsx
@@ -40,7 +40,6 @@ export default function StackRunProgress(): ReactNode {
     >
       <Card
         flexGrow={1}
-        fontFamily="Monument Mono"
         overflowY="auto"
         maxHeight="100%"
       >
diff --git a/assets/src/components/stacks/run/progress/Step.tsx b/assets/src/components/stacks/run/progress/Step.tsx
index e73fcb86a3..b1ed74d568 100644
--- a/assets/src/components/stacks/run/progress/Step.tsx
+++ b/assets/src/components/stacks/run/progress/Step.tsx
@@ -3,9 +3,11 @@ import {
   CaretRightIcon,
   CheckIcon,
   ErrorIcon,
+  Flex,
   Spinner,
 } from '@pluralsh/design-system'
-import { Div, Flex } from 'honorable'
+import { Div } from 'honorable'
+import sortBy from 'lodash/sortBy'
 import {
   ReactNode,
   useCallback,
@@ -14,7 +16,6 @@ import {
   useRef,
   useState,
 } from 'react'
-import sortBy from 'lodash/sortBy'
 
 import {
   RunLogs,
@@ -23,6 +24,7 @@ import {
   useLogsDeltaSubscription,
 } from '../../../../generated/graphql'
 import CommandLog from '../../../utils/CommandLog.tsx'
+import styled from 'styled-components'
 
 interface StepProps {
   step: RunStep
@@ -70,20 +72,8 @@ export default function Step({ step, open }: StepProps): ReactNode {
 
   return (
     <Div ref={ref}>
-      <Flex
-        gap="small"
-        paddingHorizontal="large"
-        paddingVertical="xsmall"
-        justify="space-between"
-        backgroundColor="fill-two"
-        _hover={{
-          backgroundColor: logs.length > 0 ? 'fill-two-hover' : 'none',
-        }}
-        css={{
-          position: 'sticky',
-          top: 0,
-          cursor: logs.length > 0 ? 'pointer' : 'cursor',
-        }}
+      <TriggerSC
+        $hasLogs={logs.length > 0}
         onClick={() => logs.length > 0 && setFolded(!(folded ?? !open))}
       >
         <Flex
@@ -105,7 +95,7 @@ export default function Step({ step, open }: StepProps): ReactNode {
           <span>{command}</span>
         </Flex>
         <Status status={step.status} />
-      </Flex>
+      </TriggerSC>
       {show && (
         <CommandLog
           text={toLogsString(logs)}
@@ -147,3 +137,18 @@ function Status({ status }: StepStatusProps): ReactNode {
       )
   }
 }
+
+const TriggerSC = styled.div<{ $hasLogs: boolean }>(({ theme, $hasLogs }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  gap: theme.spacing.small,
+  fontFamily: 'Monument Mono',
+  padding: `${theme.spacing.xsmall}px ${theme.spacing.large}px`,
+  backgroundColor: theme.colors['fill-two'],
+  '&:hover': {
+    backgroundColor: $hasLogs ? theme.colors['fill-two-hover'] : 'none',
+  },
+  position: 'sticky',
+  top: 0,
+  cursor: $hasLogs ? 'pointer' : 'cursor',
+}))
diff --git a/assets/src/components/terminal/Terminal.tsx b/assets/src/components/terminal/Terminal.tsx
index 4f65fc9516..9d01ed5fa8 100644
--- a/assets/src/components/terminal/Terminal.tsx
+++ b/assets/src/components/terminal/Terminal.tsx
@@ -1,7 +1,7 @@
 import 'xterm/css/xterm.css'
 
 import {
-  MutableRefObject,
+  RefObject,
   createContext,
   useCallback,
   useContext,
@@ -187,6 +187,6 @@ export function TerminalScreen({
 }
 
 export type TerminalActions = { handleResetSize: () => void }
-export const ShellContext = createContext<MutableRefObject<TerminalActions>>({
+export const ShellContext = createContext<RefObject<TerminalActions>>({
   current: { handleResetSize: () => {} },
 })
diff --git a/assets/src/components/terminal/TerminalThemeSelector.tsx b/assets/src/components/terminal/TerminalThemeSelector.tsx
index d9da87606d..e29b8c1922 100644
--- a/assets/src/components/terminal/TerminalThemeSelector.tsx
+++ b/assets/src/components/terminal/TerminalThemeSelector.tsx
@@ -1,19 +1,19 @@
-import { useContext, useState } from 'react'
-import { Flex } from 'honorable'
-import Fuse from 'fuse.js'
-
 import {
+  Flex,
+  FlexProps,
   Input,
   ListBoxItem,
   MagnifyingGlassIcon,
   Select,
   SprayIcon,
 } from '@pluralsh/design-system'
+import Fuse from 'fuse.js'
+import { useContext, useState } from 'react'
 
 import { HeaderIconButton } from 'components/cluster/containers/ContainerShell'
 
-import { normalizedThemes, themeNames } from './themes'
 import TerminalThemeContext from './TerminalThemeContext'
+import { normalizedThemes, themeNames } from './themes'
 
 const fuse = new Fuse(themeNames, { threshold: 0.25 })
 
@@ -61,19 +61,17 @@ function TerminalThemeSelector() {
           key={t}
           label={t}
           textValue={t}
-          leftContent={
-            <TerminalThemePreview
-              theme={normalizedThemes[t]}
-              marginRight="small"
-            />
-          }
+          leftContent={<TerminalThemePreview theme={normalizedThemes[t]} />}
         />
       ))}
     </Select>
   )
 }
 
-function TerminalThemePreview({ theme, ...props }: any) {
+function TerminalThemePreview({
+  theme,
+  ...props
+}: { theme: object } & FlexProps) {
   return (
     <Flex {...props}>
       {Object.entries(theme).map(([key, hex]) => (
diff --git a/assets/src/components/utils/CommandLog.tsx b/assets/src/components/utils/CommandLog.tsx
index c3f2c5171d..525c66980a 100644
--- a/assets/src/components/utils/CommandLog.tsx
+++ b/assets/src/components/utils/CommandLog.tsx
@@ -1,8 +1,10 @@
+import { Flex } from '@pluralsh/design-system'
 import { ansiToJson } from 'anser'
 import { textStyle } from 'components/utils/AnsiText'
 import escapeCarriageReturn from 'escape-carriage'
-import { Flex, Span } from 'honorable'
+import { Span } from 'honorable'
 import { useEffect, useMemo, useRef } from 'react'
+import styled, { useTheme } from 'styled-components'
 
 function CommandLogLine({ line, number, follow }) {
   const mounted = useRef<any>(undefined)
@@ -24,14 +26,7 @@ function CommandLogLine({ line, number, follow }) {
   }, [follow, lineRef, line])
 
   return (
-    <Flex
-      align="center"
-      color="text-light"
-      gap="medium"
-      paddingLeft="medium"
-      ref={lineRef}
-      _hover={{ backgroundColor: 'fill-one-hover' }}
-    >
+    <LineWrapperSC ref={lineRef}>
       <Span
         color="text-xlight"
         width={35}
@@ -47,11 +42,12 @@ function CommandLogLine({ line, number, follow }) {
           {json.content}
         </Span>
       ))}
-    </Flex>
+    </LineWrapperSC>
   )
 }
 
 export default function CommandLog({ text, follow }) {
+  const { spacing } = useTheme()
   if (!text) return null
 
   const lines = text.match(/[^\r\n]+/g)
@@ -59,7 +55,9 @@ export default function CommandLog({ text, follow }) {
   return (
     <Flex
       direction="column"
-      paddingVertical="small"
+      fontFamily="Monument Mono"
+      paddingTop={spacing.small}
+      paddingBottom={spacing.small}
       overflowY="auto"
     >
       {lines.map((line, i) => (
@@ -73,3 +71,14 @@ export default function CommandLog({ text, follow }) {
     </Flex>
   )
 }
+
+const LineWrapperSC = styled.div(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  color: theme.colors['text-light'],
+  gap: theme.spacing.medium,
+  paddingLeft: theme.spacing.medium,
+  '&:hover': {
+    backgroundColor: theme.colors['fill-one-hover'],
+  },
+}))
diff --git a/assets/src/components/utils/FractionalChip.tsx b/assets/src/components/utils/FractionalChip.tsx
index bea54d8227..2d8cdc3b9a 100644
--- a/assets/src/components/utils/FractionalChip.tsx
+++ b/assets/src/components/utils/FractionalChip.tsx
@@ -1,5 +1,4 @@
-import { Flex } from 'honorable'
-import { Chip } from '@pluralsh/design-system'
+import { Chip, Flex } from '@pluralsh/design-system'
 
 interface FractionalChipProps {
   label?: string
diff --git a/assets/src/components/utils/Metadata.tsx b/assets/src/components/utils/Metadata.tsx
index 4a2c60fce3..86c068edb0 100644
--- a/assets/src/components/utils/Metadata.tsx
+++ b/assets/src/components/utils/Metadata.tsx
@@ -1,6 +1,6 @@
-import { Card, type Sidecar } from '@pluralsh/design-system'
-import { CardProps, Div, Flex, H2 } from 'honorable'
-import { Children, ComponentProps, forwardRef } from 'react'
+import { Card, Flex, FlexProps, SidecarProps } from '@pluralsh/design-system'
+import { CardProps, Div, H2 } from 'honorable'
+import { Children } from 'react'
 import styled from 'styled-components'
 import { makeGrid } from 'utils/makeGrid'
 
@@ -51,35 +51,39 @@ export function MetadataGrid(props) {
   )
 }
 
-export const MetadataItem = forwardRef<
-  HTMLDivElement,
-  ComponentProps<typeof Sidecar>
->(({ heading, headingProps, contentProps, children, ...props }, ref) => (
-  <Flex
-    ref={ref}
-    direction="column"
-    gap="xsmall"
-    {...props}
-  >
-    {heading && (
-      <H2
-        body1
-        bold
-        color="text-default"
-        {...headingProps}
-      >
-        {heading}
-      </H2>
-    )}
-    {children && (
-      <Div
-        body1
-        color="text-xlight"
-        overflowWrap="anywhere"
-        {...contentProps}
-      >
-        {children}
-      </Div>
-    )}
-  </Flex>
-))
+export function MetadataItem({
+  heading,
+  headingProps,
+  contentProps,
+  children,
+  ...props
+}: SidecarProps & FlexProps) {
+  return (
+    <Flex
+      direction="column"
+      gap="xsmall"
+      {...props}
+    >
+      {heading && (
+        <H2
+          body1
+          bold
+          color="text-default"
+          {...headingProps}
+        >
+          {heading}
+        </H2>
+      )}
+      {children && (
+        <Div
+          body1
+          color="text-xlight"
+          overflowWrap="anywhere"
+          {...contentProps}
+        >
+          {children}
+        </Div>
+      )}
+    </Flex>
+  )
+}
diff --git a/assets/src/components/utils/layout/ConsolePageTitle.tsx b/assets/src/components/utils/layout/ConsolePageTitle.tsx
index 722c4321ae..026f6d0cba 100644
--- a/assets/src/components/utils/layout/ConsolePageTitle.tsx
+++ b/assets/src/components/utils/layout/ConsolePageTitle.tsx
@@ -1,34 +1,39 @@
-import { DivProps, Flex, FlexProps, H1 } from 'honorable'
-import { ReactNode, forwardRef } from 'react'
+import { DivProps, H1 } from 'honorable'
+import { ComponentPropsWithRef, ReactNode } from 'react'
+import styled from 'styled-components'
 
 export type PageTitleProps = {
   heading?: ReactNode
   headingProps?: DivProps
-} & FlexProps
+} & ComponentPropsWithRef<typeof WrapperSC>
 
-const ConsolePageTitle = forwardRef<HTMLDivElement, PageTitleProps>(
-  ({ heading, headingProps = {}, children, ...props }, ref) => (
-    <Flex
-      ref={ref}
-      gap="large"
-      alignItems="center"
-      justifyContent="space-between"
-      position="relative"
-      minHeight={40}
-      {...props}
-    >
+export default function ConsolePageTitle({
+  heading,
+  headingProps = {},
+  children,
+  ...props
+}: PageTitleProps) {
+  return (
+    <WrapperSC {...props}>
       {heading && (
         <H1
           title2
-          marginBottom="-0.1em" // optically center title
+          paddingTop="0.2em" // optically center title
           {...headingProps}
         >
           {heading}
         </H1>
       )}
       {children}
-    </Flex>
+    </WrapperSC>
   )
-)
+}
 
-export default ConsolePageTitle
+const WrapperSC = styled.div(({ theme }) => ({
+  display: 'flex',
+  gap: theme.spacing.large,
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  position: 'relative',
+  minHeight: 40,
+}))
diff --git a/assets/src/components/utils/layout/ResponsiveLayoutContentContainer.tsx b/assets/src/components/utils/layout/ResponsiveLayoutContentContainer.tsx
index 487c807e87..94f2ac74c9 100644
--- a/assets/src/components/utils/layout/ResponsiveLayoutContentContainer.tsx
+++ b/assets/src/components/utils/layout/ResponsiveLayoutContentContainer.tsx
@@ -1,22 +1,16 @@
-import { Flex, FlexProps } from 'honorable'
+import styled from 'styled-components'
 
 export const RESPONSIVE_LAYOUT_CONTENT_WIDTH = 896
 
-export function ResponsiveLayoutContentContainer({ ref, ...props }: FlexProps) {
-  return (
-    <Flex
-      ref={ref}
-      direction="column"
-      flexGrow={1}
-      flexShrink={1}
-      height="100%"
-      maxHeight="100%"
-      width={RESPONSIVE_LAYOUT_CONTENT_WIDTH}
-      maxWidth-desktopLarge-up={RESPONSIVE_LAYOUT_CONTENT_WIDTH}
-      width-desktopLarge-up={RESPONSIVE_LAYOUT_CONTENT_WIDTH}
-      overflowY="auto"
-      overflowX="hidden"
-      {...props}
-    />
-  )
-}
+export const ResponsiveLayoutContentContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  flexShrink: 1,
+  height: '100%',
+  maxHeight: '100%',
+  width: RESPONSIVE_LAYOUT_CONTENT_WIDTH,
+  maxWidth: RESPONSIVE_LAYOUT_CONTENT_WIDTH,
+  overflowY: 'auto',
+  overflowX: 'hidden',
+})
diff --git a/assets/src/components/utils/layout/ScrollablePage.tsx b/assets/src/components/utils/layout/ScrollablePage.tsx
index 7a6f49c6c3..b0e7343404 100644
--- a/assets/src/components/utils/layout/ScrollablePage.tsx
+++ b/assets/src/components/utils/layout/ScrollablePage.tsx
@@ -1,8 +1,8 @@
-import { Div, FlexProps } from 'honorable'
+import { Div } from 'honorable'
 import { ReactNode, RefObject } from 'react'
 import styled, { CSSProperties } from 'styled-components'
 
-import ConsolePageTitle from './ConsolePageTitle'
+import ConsolePageTitle, { PageTitleProps } from './ConsolePageTitle'
 
 const ScrollablePageContent = styled.div<{
   $scrollable?: boolean
@@ -81,7 +81,7 @@ export function ScrollablePage({
   fullWidth?: boolean
   scrollRef?: RefObject<HTMLDivElement>
   noPadding?: boolean
-} & FlexProps) {
+} & PageTitleProps) {
   return (
     <>
       {(heading || headingContent) && (
diff --git a/assets/yarn.lock b/assets/yarn.lock
index 29e6e0a3ea..3b1d1113d0 100644
--- a/assets/yarn.lock
+++ b/assets/yarn.lock
@@ -4395,9 +4395,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pluralsh/design-system@npm:5.7.0":
-  version: 5.7.0
-  resolution: "@pluralsh/design-system@npm:5.7.0"
+"@pluralsh/design-system@npm:5.7.1":
+  version: 5.7.1
+  resolution: "@pluralsh/design-system@npm:5.7.1"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.13.3
     "@loomhq/loom-embed": 1.5.0
@@ -4442,7 +4442,7 @@ __metadata:
     react-dom: ">=19.0.0"
     react-transition-group: ">=4.4.5"
     styled-components: ">=6.1.15"
-  checksum: 774d7193c25ef7f0d147fe6c0f596d4e59639ea510c275a839f934d36541bd8c701c5e383e5a9efbe6b70aa416ec5c8875086393c1828bea98fcbd080c7243eb
+  checksum: fb53af6c0aed2c2ac5da1010e188abda6304f54be8635418c83942a04dffd979e5ab42b2c95c8c54dd6c8cfc523d25641c8697bc9419119de7d5d21eb440d9aa
   languageName: node
   linkType: hard
 
@@ -10355,7 +10355,7 @@ __metadata:
     "@nivo/radial-bar": 0.88.0
     "@nivo/tooltip": 0.88.0
     "@nivo/treemap": 0.88.0
-    "@pluralsh/design-system": 5.7.0
+    "@pluralsh/design-system": 5.7.1
     "@pluralsh/eslint-config-typescript": 2.5.150
     "@pluralsh/stylelint-config": 2.0.10
     "@react-hooks-library/core": 0.6.0