diff --git a/app/components/CapacityBar.tsx b/app/components/CapacityBar.tsx
index d07497cfb4..92ef1e8b40 100644
--- a/app/components/CapacityBar.tsx
+++ b/app/components/CapacityBar.tsx
@@ -87,10 +87,10 @@ function Bar({ pct }: { pct: number }) {
   return (
     <div className="flex w-full gap-0.5">
       <div
-        className="bg-accent-secondary border-accent-secondary h-3 rounded-l border"
+        className="bg-accent border-accent-secondary h-3 rounded-l-md border"
         style={{ width: `${pct.toFixed(2)}%` }}
       ></div>
-      <div className="bg-info-secondary border-info-secondary h-3 grow rounded-r border"></div>
+      <div className="bg-info-secondary border-info-secondary h-3 grow rounded-r-md border"></div>
     </div>
   )
 }
diff --git a/app/components/CapacityBars.tsx b/app/components/CapacityBars.tsx
index 3b59812bf4..15eae333b1 100644
--- a/app/components/CapacityBars.tsx
+++ b/app/components/CapacityBars.tsx
@@ -23,7 +23,7 @@ export const CapacityBars = ({
   allocatedLabel: string
 }) => {
   return (
-    <div className="1000:flex-row flex min-w-min flex-col gap-3">
+    <div className="1000:flex-row bg-default flex min-w-min flex-col gap-3">
       <CapacityBar
         icon={<Cpu16Icon />}
         title="CPU"
diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index 17fb385b4b..185d7a9489 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -54,7 +54,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
+        className="popover-panel bg-raise light:bg-default shadow-menu z-10 w-96 rounded-lg"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
diff --git a/app/components/ErrorPage.tsx b/app/components/ErrorPage.tsx
index a655a25719..db279eda68 100644
--- a/app/components/ErrorPage.tsx
+++ b/app/components/ErrorPage.tsx
@@ -20,7 +20,7 @@ const GradientBackground = () => (
     className="fixed top-0 right-0 bottom-0 left-0 -z-10"
     style={{
       background:
-        'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
+        'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)',
     }}
   />
 )
@@ -41,10 +41,10 @@ export function ErrorPage({ children }: Props) {
         </Link>
         <SignOutButton className="mt-4 mr-6" />
       </div>
-      <div className="bg-raise! border-secondary elevation-3 absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8">
+      <div className="bg-raise! shadow-modal absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg p-8">
         <div className="my-2 flex h-12 w-12 items-center justify-center">
-          <div className="bg-destructive absolute h-12 w-12 rounded-full opacity-20 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
-          <Error12Icon className="text-error relative h-8 w-8" />
+          <div className="bg-destructive-inverse absolute h-10 w-10 rounded-full opacity-40 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          <Error12Icon className="text-error light:text-error-secondary relative h-8 w-8" />
         </div>
 
         <div className="space-y-2 text-center">{children}</div>
diff --git a/app/components/InstanceAutoRestartPopover.tsx b/app/components/InstanceAutoRestartPopover.tsx
index d94c6c396d..ef4e417962 100644
--- a/app/components/InstanceAutoRestartPopover.tsx
+++ b/app/components/InstanceAutoRestartPopover.tsx
@@ -50,7 +50,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
+        className="popover-panel bg-raise shadow-menu z-10 w-96 rounded-lg"
         anchor={{ to: 'bottom start', gap: 12 }}
       >
         <PopoverRow label="Auto Restart">
diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index 112be767a6..6157116d65 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -29,10 +29,7 @@ export const MoreActionsMenu = ({
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
         aria-label={label}
-        className={cn(
-          'headless-hide-focus rounded',
-          variant === 'filled' && 'h-full w-full'
-        )}
+        className={cn('rounded-md', variant === 'filled' && 'h-full w-full')}
       >
         <div
           className={cn(
diff --git a/app/components/MswBanner.tsx b/app/components/MswBanner.tsx
index 96685833fb..e8440220fb 100644
--- a/app/components/MswBanner.tsx
+++ b/app/components/MswBanner.tsx
@@ -49,7 +49,7 @@ export function MswBanner({ disableButton }: Props) {
   return (
     <>
       {/* The [&+*]:pt-10 style is to ensure the page container isn't pushed out of screen as it uses 100vh for layout */}
-      <aside className="text-sans-md text-info-secondary bg-info-secondary absolute z-(--z-top-bar) flex h-10 w-full items-center justify-center [&+*]:pt-10">
+      <aside className="text-sans-md text-info bg-info absolute z-(--z-top-bar) flex h-10 w-full items-center justify-center [&+*]:pt-10">
         <Info16Icon className="mr-2" /> This is a technical preview.
         <button
           type="button"
diff --git a/app/components/PageSkeleton.tsx b/app/components/PageSkeleton.tsx
index 722500b424..55f07cd49f 100644
--- a/app/components/PageSkeleton.tsx
+++ b/app/components/PageSkeleton.tsx
@@ -52,7 +52,7 @@ export function PageSkeleton({ skipPaths }: { skipPaths?: RegExp[] }) {
             <Block className="h-4 w-14" />
           </div>
         </div>
-        <div className="" />
+        <div className="light:bg-raise" />
       </PageContainer>
     </>
   )
diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx
index 63d253b518..451901c98d 100644
--- a/app/components/RefetchIntervalPicker.tsx
+++ b/app/components/RefetchIntervalPicker.tsx
@@ -52,7 +52,7 @@ export function useIntervalPicker({ enabled, isLoading, fn, className }: Props)
         <button
           type="button"
           className={cn(
-            'border-default flex w-10 items-center justify-center rounded-l border-t border-b border-l disabled:cursor-default',
+            'border-default bg-default flex w-10 items-center justify-center rounded-l-md border-t border-b border-l disabled:cursor-default',
             isLoading && 'hover:bg-hover',
             !enabled && 'bg-disabled cursor-not-allowed'
           )}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 79be17f021..96e00e8a3c 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -19,7 +19,7 @@ const linkStyles = (isActive = false) =>
   cn(
     'flex h-7 items-center rounded-md px-2 text-sans-md [&>svg]:mr-2',
     isActive
-      ? 'text-accent bg-accent-secondary hover:bg-accent-secondary-hover [&>svg]:text-accent-tertiary'
+      ? 'text-accent bg-accent hover:bg-accent-hover [&>svg]:text-accent-tertiary'
       : 'hover:bg-hover [&>svg]:text-quaternary text-default'
   )
 
@@ -84,7 +84,7 @@ Sidebar.Nav = ({ children, heading }: SidebarNav) => (
       </div>
     )}
     <nav aria-label="Sidebar navigation">
-      <ul className="space-y-0.5">{children}</ul>
+      <ul className="space-y-px">{children}</ul>
     </nav>
   </div>
 )
diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
index 9f4c9d3378..5cf3dad155 100644
--- a/app/components/TimeSeriesChart.tsx
+++ b/app/components/TimeSeriesChart.tsx
@@ -64,9 +64,9 @@ const longDateTime = (ts: number) => format(new Date(ts), 'MMM d, yyyy HH:mm:ss
 
 const GRID_GRAY = 'var(--stroke-secondary)'
 const CURSOR = 'var(--chart-stroke-item)'
-const GREEN_400 = 'var(--theme-accent-400)'
-const GREEN_600 = 'var(--theme-accent-600)'
-const GREEN_800 = 'var(--theme-accent-800)'
+const GREEN_400 = 'var(--surface-accent-secondary)'
+const GREEN_600 = 'var(--content-accent-tertiary)'
+const GREEN_800 = 'var(--content-accent)'
 
 // TODO: figure out how to do this with TW classes instead. As far as I can tell
 // ticks only take direct styling
@@ -92,7 +92,7 @@ function renderTooltip(props: TooltipProps<number, string>, unit?: string) {
   } = payload[0]
   if (!timestamp || typeof value !== 'number') return null
   return (
-    <div className="text-sans-md text-secondary bg-raise border-secondary elevation-2 rounded-md border outline-0">
+    <div className="text-sans-md text-secondary bg-raise shadow-tooltip rounded-md outline-0">
       <div className="border-secondary border-b px-3 py-2 pr-6">
         {longDateTime(timestamp)}
       </div>
@@ -315,10 +315,10 @@ const MetricsMessage = ({
       </div>
     </div>
     <div
-      className="bg-accent-secondary absolute inset-x-0 top-1 bottom-12"
+      className="bg-accent absolute inset-x-0 top-1 bottom-12"
       style={{
         background:
-          'radial-gradient(197.76% 54.9% at 50% 50%, var(--surface-default) 0%, rgba(8, 15, 17, 0.00) 100%)',
+          'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)',
       }}
     />
   </>
@@ -344,7 +344,7 @@ const MetricsEmpty = () => (
     description="There is no data for this time period."
   />
 )
-export const ChartContainer = classed.div`flex w-full grow flex-col rounded-lg border border-default`
+export const ChartContainer = classed.div`flex w-full grow flex-col rounded-lg border border-default bg-default`
 
 type ChartHeaderProps = {
   title: string
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 675349eefa..645577552d 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -10,15 +10,20 @@ import { Link } from 'react-router'
 
 import { api, navToLogin, useApiMutation } from '@oxide/api'
 import {
+  DirectionRightIcon,
+  Monitor12Icon,
+  Moon12Icon,
   Organization16Icon,
   Profile16Icon,
   SelectArrows6Icon,
   Servers16Icon,
   Success12Icon,
+  Sun12Icon,
 } from '@oxide/design-system/icons/react'
 
 import { useCrumbs } from '~/hooks/use-crumbs'
 import { useCurrentUser } from '~/hooks/use-current-user'
+import { setThemePreference, useThemeStore, type ThemePreference } from '~/stores/theme'
 import { buttonStyle } from '~/ui/lib/Button'
 import * as DropdownMenu from '~/ui/lib/DropdownMenu'
 import { Identicon } from '~/ui/lib/Identicon'
@@ -50,13 +55,10 @@ export function TopBar({ systemOrSilo }: { systemOrSilo: 'system' | 'silo' }) {
   )
 }
 
-const bigIconBox = 'flex h-[34px] w-[34px] items-center justify-center rounded'
+const bigIconBox = 'flex h-[34px] w-[34px] items-center justify-center rounded-md'
 
 const BigIdenticon = ({ name }: { name: string }) => (
-  <Identicon
-    className={cn(bigIconBox, 'text-accent bg-accent-secondary-hover')}
-    name={name}
-  />
+  <Identicon className={cn(bigIconBox, 'text-accent bg-accent-hover')} name={name} />
 )
 
 const SystemIcon = () => (
@@ -136,7 +138,7 @@ function UserMenu() {
         <div
           className={cn(
             buttonStyle({ size: 'sm', variant: 'ghost' }),
-            'border-secondary! flex items-center gap-1.5 px-2!'
+            'flex items-center gap-1.5 px-2!'
           )}
         >
           <Profile16Icon className="text-tertiary" />
@@ -147,12 +149,77 @@ function UserMenu() {
       </DropdownMenu.Trigger>
       <DropdownMenu.Content gap={8}>
         <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
+        <ThemeSubmenu />
         <DropdownMenu.Item onSelect={() => logout.mutate({})} label="Sign out" />
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   )
 }
 
+function ThemeSubmenu() {
+  const { preference } = useThemeStore()
+  return (
+    <DropdownMenu.Submenu>
+      <DropdownMenu.SubmenuTrigger className="DropdownMenuItem ox-menu-item border-secondary border-b">
+        <span className="flex w-full items-center justify-between">
+          Theme
+          <DirectionRightIcon className="text-quaternary absolute right-3" aria-hidden />
+        </span>
+      </DropdownMenu.SubmenuTrigger>
+      <DropdownMenu.SubContent>
+        <DropdownMenu.RadioGroup
+          value={preference}
+          onValueChange={(v) => setThemePreference(v as ThemePreference)}
+        >
+          <ThemeRadioItem
+            value="light"
+            icon={<Sun12Icon />}
+            label="Light"
+            selected={preference === 'light'}
+          />
+          <ThemeRadioItem
+            value="dark"
+            icon={<Moon12Icon />}
+            label="Dark"
+            selected={preference === 'dark'}
+          />
+          <ThemeRadioItem
+            value="system"
+            icon={<Monitor12Icon />}
+            label="System"
+            selected={preference === 'system'}
+          />
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.SubContent>
+    </DropdownMenu.Submenu>
+  )
+}
+
+function ThemeRadioItem({
+  value,
+  icon,
+  label,
+  selected,
+}: {
+  value: ThemePreference
+  icon: React.ReactNode
+  label: string
+  selected: boolean
+}) {
+  return (
+    <DropdownMenu.RadioItem
+      value={value}
+      className={cn('DropdownMenuItem ox-menu-item', selected && 'is-selected')}
+    >
+      <span className="flex w-full items-center gap-2">
+        <span className="text-quaternary">{icon}</span>
+        <span>{label}</span>
+        {selected && <Success12Icon className="absolute right-3" />}
+      </span>
+    </DropdownMenu.RadioItem>
+  )
+}
+
 /**
  * Choose between System and Silo-scoped route trees, or if the user doesn't
  * have access to system routes (i.e., if /v1/me has fleetViewer: false) show
@@ -161,20 +228,24 @@ function UserMenu() {
 function SiloSystemPicker({ level }: { level: 'silo' | 'system' }) {
   return (
     <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        aria-label="Switch between system and silo"
-        className="headless-hide-focus rounded-md"
-      >
-        <div className="active-clicked text-sans-md text-default border-secondary hover:bg-hover flex items-center rounded-md border px-2 py-1.5">
+      <DropdownMenu.Trigger aria-label="Switch between system and silo">
+        <div
+          className={cn(
+            buttonStyle({ size: 'sm', variant: 'ghost' }),
+            'flex items-center gap-1.5 px-2!'
+          )}
+        >
           <div className="text-tertiary flex items-center">
             {level === 'system' ? <Servers16Icon /> : <Organization16Icon />}
           </div>
-          <div className="mr-3 ml-1.5">{level === 'system' ? 'System' : 'Silo'}</div>
+          <span className="text-sans-md text-default normal-case">
+            {level === 'system' ? 'System' : 'Silo'}
+          </span>
           {/* aria-hidden is a tip from the Reach docs */}
-          <SelectArrows6Icon className="text-quaternary" aria-hidden />
+          <SelectArrows6Icon className="text-quaternary ml-3 w-1.5!" aria-hidden />
         </div>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content className="mt-2 max-h-80 overflow-y-auto" anchor="bottom start">
+      <DropdownMenu.Content className="mt-2" anchor="bottom start">
         <SystemSiloItem to={pb.silos()} label="System" isSelected={level === 'system'} />
         <SystemSiloItem to={pb.projects()} label="Silo" isSelected={level === 'silo'} />
       </DropdownMenu.Content>
diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index 8b3ec80d01..c77852af53 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -675,7 +675,7 @@ export default function ImageCreate() {
                   label="Image uploaded successfully"
                   className={
                     allDone
-                      ? 'bg-accent-secondary *:text-accent transition-colors'
+                      ? 'bg-accent *:text-accent transition-colors'
                       : 'transition-colors'
                   }
                 />
diff --git a/app/layouts/AuthLayout.tsx b/app/layouts/AuthLayout.tsx
index 98cf88fe25..4f5b1c9cdc 100644
--- a/app/layouts/AuthLayout.tsx
+++ b/app/layouts/AuthLayout.tsx
@@ -15,7 +15,7 @@ export default function AuthLayout() {
       className="relative h-screen"
       style={{
         background:
-          'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
+          'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, var(--surface-secondary) 100%)',
       }}
     >
       <OxideLogo className="absolute bottom-8 left-1/2 -translate-x-1/2" />
diff --git a/app/layouts/RootLayout.tsx b/app/layouts/RootLayout.tsx
index 50d5f03d8c..4b9df6da5a 100644
--- a/app/layouts/RootLayout.tsx
+++ b/app/layouts/RootLayout.tsx
@@ -11,6 +11,7 @@ import { Outlet, useNavigation } from 'react-router'
 import { MswBanner } from '~/components/MswBanner'
 import { ToastStack } from '~/components/ToastStack'
 import { useCrumbs } from '~/hooks/use-crumbs'
+import { useApplyTheme } from '~/stores/theme'
 
 /**
  * non top-level route: Instances / mock-project / Projects / maze-war / Oxide Console
@@ -28,6 +29,7 @@ const useTitle = () =>
  * anything to actually belong here.
  */
 export default function RootLayout() {
+  useApplyTheme()
   const title = useTitle()
   useEffect(() => {
     document.title = title
diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index 22530762b9..42244e9c29 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -22,7 +22,7 @@ export function ContentPane() {
   return (
     <div
       ref={ref}
-      className="flex flex-col overflow-auto"
+      className="light:bg-raise flex flex-col overflow-auto"
       id="scroll-container"
       data-testid="scroll-container"
     >
diff --git a/app/pages/DeviceAuthSuccessPage.tsx b/app/pages/DeviceAuthSuccessPage.tsx
index a7e3eccd80..17fdb1b249 100644
--- a/app/pages/DeviceAuthSuccessPage.tsx
+++ b/app/pages/DeviceAuthSuccessPage.tsx
@@ -12,7 +12,7 @@ import { Success12Icon } from '@oxide/design-system/icons/react'
  */
 export default function DeviceAuthSuccessPage() {
   return (
-    <div className="bg-raise! border-secondary elevation-3 flex w-full max-w-[470px] flex-col items-center rounded-lg border p-9 text-center">
+    <div className="bg-raise! shadow-modal flex w-full max-w-[470px] flex-col items-center rounded-lg p-9 text-center">
       <div className="my-2 flex h-12 w-12 items-center justify-center">
         <div className="bg-accent absolute h-12 w-12 rounded-full opacity-20 motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
         <Success12Icon className="text-accent relative h-8 w-8" />
diff --git a/app/pages/DeviceAuthVerifyPage.tsx b/app/pages/DeviceAuthVerifyPage.tsx
index 601a094ab1..28903f8b47 100644
--- a/app/pages/DeviceAuthVerifyPage.tsx
+++ b/app/pages/DeviceAuthVerifyPage.tsx
@@ -33,7 +33,7 @@ export default function DeviceAuthVerifyPage() {
 
   return (
     <form
-      className="bg-raise! border-secondary elevation-3 w-full max-w-[470px] rounded-lg border p-9 text-center"
+      className="bg-raise! shadow-modal w-full max-w-[470px] rounded-lg p-9 text-center"
       onSubmit={(event) => {
         event.preventDefault()
 
diff --git a/app/pages/LoginPage.tsx b/app/pages/LoginPage.tsx
index fecc42df9c..3ca1741a73 100644
--- a/app/pages/LoginPage.tsx
+++ b/app/pages/LoginPage.tsx
@@ -44,7 +44,7 @@ export default function LoginPage() {
     <>
       <div className="mb-3 flex items-end space-x-3">
         <Identicon
-          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
+          className="text-accent bg-accent-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
           name={silo}
         />
         <div className="text-sans-2xl text-raise">{silo}</div>
diff --git a/app/pages/LoginPageSaml.tsx b/app/pages/LoginPageSaml.tsx
index 897dd86e7f..6087da897d 100644
--- a/app/pages/LoginPageSaml.tsx
+++ b/app/pages/LoginPageSaml.tsx
@@ -24,7 +24,7 @@ export default function LoginPageSaml() {
     <>
       <div className="mb-3 flex items-end space-x-3">
         <Identicon
-          className="text-accent bg-accent-secondary-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
+          className="text-accent bg-accent-hover flex h-[34px] w-[34px] items-center justify-center rounded-md"
           name={silo}
         />
         <div className="text-sans-2xl text-raise">{silo}</div>
diff --git a/app/pages/project/instances/SerialConsolePage.tsx b/app/pages/project/instances/SerialConsolePage.tsx
index 2a0eba1cc8..32bf55247b 100644
--- a/app/pages/project/instances/SerialConsolePage.tsx
+++ b/app/pages/project/instances/SerialConsolePage.tsx
@@ -139,7 +139,7 @@ export default function SerialConsolePage() {
     <div className="mx-0! flex h-full max-h-[calc(100vh-var(--top-bar-height))] w-full! flex-col">
       <Link
         to={pb.instance(instanceSelector)}
-        className="bg-accent-secondary mx-3 mt-3 mb-6 flex h-10 shrink-0 items-center rounded-md px-3"
+        className="bg-accent mx-3 mt-3 mb-6 flex h-10 shrink-0 items-center rounded-md px-3"
       >
         <PrevArrow12Icon className="text-accent-tertiary" />
         <div className="text-mono-sm text-accent ml-2">
@@ -183,7 +183,7 @@ function SerialSkeleton({ children, animate }: SkeletonProps) {
         {[...Array(200)].map((_e, i) => (
           <div
             key={i}
-            className={cn('bg-tertiary h-4 rounded', {
+            className={cn('bg-tertiary h-4 rounded-md', {
               'motion-safe:animate-pulse': animate,
             })}
             style={{
@@ -199,7 +199,7 @@ function SerialSkeleton({ children, animate }: SkeletonProps) {
           background: 'linear-gradient(180deg, rgba(8, 15, 17, 0) 0%, #080F11 100%)',
         }}
       />
-      <div className="bg-raise! border-secondary elevation-3 absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-lg border p-12">
+      <div className="bg-raise! shadow-modal absolute top-1/2 left-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-lg p-12">
         {children}
       </div>
     </div>
diff --git a/app/stores/theme.ts b/app/stores/theme.ts
new file mode 100644
index 0000000000..1c71b22c25
--- /dev/null
+++ b/app/stores/theme.ts
@@ -0,0 +1,62 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useEffect, useSyncExternalStore } from 'react'
+import { create } from 'zustand'
+
+export type ThemePreference = 'dark' | 'light' | 'system'
+
+const STORAGE_KEY = 'theme-preference'
+
+function getStoredPreference(): ThemePreference {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light' || stored === 'system') return stored
+  } catch {
+    // localStorage unavailable
+  }
+  return 'dark'
+}
+
+export const useThemeStore = create<{ preference: ThemePreference }>(() => ({
+  preference: getStoredPreference(),
+}))
+
+export function setThemePreference(pref: ThemePreference) {
+  localStorage.setItem(STORAGE_KEY, pref)
+  useThemeStore.setState({ preference: pref })
+}
+
+/** Resolve preference to actual theme, accounting for system media query */
+function resolveTheme(pref: ThemePreference, systemIsLight: boolean): 'dark' | 'light' {
+  if (pref === 'system') return systemIsLight ? 'light' : 'dark'
+  return pref
+}
+
+function subscribeToMediaQuery(cb: () => void) {
+  const mql = window.matchMedia('(prefers-color-scheme: light)')
+  mql.addEventListener('change', cb)
+  return () => mql.removeEventListener('change', cb)
+}
+
+function getSystemIsLight() {
+  return window.matchMedia('(prefers-color-scheme: light)').matches
+}
+
+/**
+ * Hook that applies the resolved theme to the document. Renders in RootLayout
+ * so it runs on every page.
+ */
+export function useApplyTheme() {
+  const { preference } = useThemeStore()
+  const systemIsLight = useSyncExternalStore(subscribeToMediaQuery, getSystemIsLight)
+  const theme = resolveTheme(preference, systemIsLight)
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme
+  }, [theme])
+}
diff --git a/app/table/cells/LinkCell.tsx b/app/table/cells/LinkCell.tsx
index 106917eb87..d77a1e7352 100644
--- a/app/table/cells/LinkCell.tsx
+++ b/app/table/cells/LinkCell.tsx
@@ -13,7 +13,7 @@ import { classed } from '~/util/classed'
 const linkClass = 'link-with-underline group flex h-full w-full items-center text-sans-md'
 
 /** Pushes out the link area to the entire cell for improved clickability™ */
-const Pusher = classed.div`absolute inset-0 w-[calc(100%-2px)] right-[2px] group-hover:bg-raise`
+const Pusher = classed.div`absolute inset-0 group-hover:bg-raise`
 
 /**
  * Because this returns a component, it should only be used in a static context
diff --git a/app/table/columns/action-col.tsx b/app/table/columns/action-col.tsx
index 24857d00df..acb506a875 100644
--- a/app/table/columns/action-col.tsx
+++ b/app/table/columns/action-col.tsx
@@ -85,7 +85,7 @@ export const RowActions = ({ id, copyIdLabel = 'Copy ID', actions }: RowActionsP
     <DropdownMenu.Root>
       {/* stopPropagation prevents clicks from toggling row select in a single select table */}
       <DropdownMenu.Trigger
-        className="headless-hide-focus flex h-full w-full items-center justify-center rounded-md -outline-offset-2"
+        className="flex h-full w-full items-center justify-center rounded-md -outline-offset-2"
         aria-label="Row actions"
         onClick={(e) => e.stopPropagation()}
       >
diff --git a/app/ui/lib/ActionMenu.tsx b/app/ui/lib/ActionMenu.tsx
index 805ea0d954..cf9c989d09 100644
--- a/app/ui/lib/ActionMenu.tsx
+++ b/app/ui/lib/ActionMenu.tsx
@@ -117,7 +117,7 @@ export function ActionMenu(props: ActionMenuProps) {
           >
             <div
               className={cn(
-                'bg-raise border-secondary elevation-3 flex h-14 w-full overflow-y-auto rounded-lg border'
+                'bg-raise shadow-modal flex h-14 w-full overflow-y-auto rounded-lg'
               )}
             >
               <input
@@ -158,7 +158,7 @@ export function ActionMenu(props: ActionMenuProps) {
             </div>
 
             {items.length > 0 && (
-              <div className="elevation-3 relative mt-5 transform-gpu overflow-hidden rounded-lg">
+              <div className="shadow-modal relative mt-5 transform-gpu overflow-hidden rounded-lg">
                 <div
                   className="overflow-y-auto"
                   ref={divRef}
@@ -189,7 +189,7 @@ export function ActionMenu(props: ActionMenuProps) {
                               className={cn(
                                 'text-sans-md border-secondary box-border block h-full w-full cursor-pointer overflow-visible border p-4 select-none',
                                 item.value === selectedItem?.value
-                                  ? 'text-accent bg-accent-secondary hover:bg-accent-secondary-hover'
+                                  ? 'text-accent bg-accent hover:bg-accent-hover'
                                   : 'text-default bg-raise hover:bg-hover'
                               )}
                               aria-selected={item.value === selectedItem?.value}
@@ -206,7 +206,7 @@ export function ActionMenu(props: ActionMenuProps) {
                     ))}
                   </ul>
                 </div>
-                <div className="text-default bg-tertiary flex justify-between rounded-b-[3px] px-4 py-2">
+                <div className="text-default bg-tertiary flex justify-between rounded-b-md px-4 py-2">
                   <ActionMenuHotkey keys={['Enter']} action="submit" />
                   <ActionMenuHotkey keys={['Arrow Up', 'Arrow Down']} action="select" />
                   <ActionMenuHotkey keys={['Esc']} action="close" />
diff --git a/app/ui/lib/BulkActionMenu.tsx b/app/ui/lib/BulkActionMenu.tsx
index b5412f351c..ae4031fcf4 100644
--- a/app/ui/lib/BulkActionMenu.tsx
+++ b/app/ui/lib/BulkActionMenu.tsx
@@ -18,7 +18,7 @@ export interface BulkActionMenuProps {
 export function BulkActionMenu({ children, selectedCount }: BulkActionMenuProps) {
   const actionButtons = flattenChildren(children)
   return (
-    <div className="bg-accent-secondary border-accent flex w-fit rounded-md border *:items-center *:space-x-2 *:p-3">
+    <div className="bg-accent border-accent flex w-fit rounded-md border *:items-center *:space-x-2 *:p-3">
       <div className="border-accent-tertiary flex border-r">{actionButtons}</div>
       <div className="flex">
         <span className="text-sans-sm text-accent">{selectedCount} selected</span>
diff --git a/app/ui/lib/Button.tsx b/app/ui/lib/Button.tsx
index 206f8c036f..a0ec80ef7d 100644
--- a/app/ui/lib/Button.tsx
+++ b/app/ui/lib/Button.tsx
@@ -45,7 +45,7 @@ export const buttonStyle = ({
   variant = 'primary',
 }: ButtonStyleProps = {}) => {
   return cn(
-    'ox-button active-clicked elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0',
+    'ox-button active-clicked rounded-md inline-flex items-center justify-center align-top disabled:cursor-default shrink-0',
     `btn-${variant}`,
     sizeStyle[size],
     variant === 'danger'
diff --git a/app/ui/lib/CalendarCell.tsx b/app/ui/lib/CalendarCell.tsx
index d7aee306f1..3d2273035b 100644
--- a/app/ui/lib/CalendarCell.tsx
+++ b/app/ui/lib/CalendarCell.tsx
@@ -85,17 +85,17 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
           isSelected && !isDisabled
             ? isInvalid
               ? 'text-error bg-error-secondary'
-              : 'text-accent-secondary bg-accent-secondary'
+              : 'text-accent-secondary bg-accent'
             : 'text-secondary hover:bg-tertiary',
           isRoundedLeft && 'rounded-l',
-          isRoundedRight && 'rounded-r',
+          isRoundedRight && 'rounded-r-md',
           // Hover state for non-selected cells.
-          !isSelected && !isDisabled ? 'rounded' : ''
+          !isSelected && !isDisabled ? 'rounded-md' : ''
         )}
       >
         <div
           className={cn(
-            'pointer-events-none absolute top-[0] right-px bottom-[0] left-px rounded',
+            'pointer-events-none absolute top-[0] right-px bottom-[0] left-px rounded-md',
             isSelectionStart || isSelectionEnd
               ? isInvalid
                 ? 'border-error-secondary border'
@@ -104,7 +104,7 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
             isSelected && !isDisabled
               ? isInvalid
                 ? 'group-hover:bg-error-secondary-hover'
-                : 'group-hover:bg-accent-secondary-hover'
+                : 'group-hover:bg-accent-hover'
               : '',
             !isSelected && !isDisabled ? 'hover:bg-tertiary' : ''
           )}
diff --git a/app/ui/lib/CardBlock.tsx b/app/ui/lib/CardBlock.tsx
index 5fd890636f..5b28800575 100644
--- a/app/ui/lib/CardBlock.tsx
+++ b/app/ui/lib/CardBlock.tsx
@@ -28,7 +28,7 @@ export function CardBlock({ children, width = 'full' }: CardBlockProps) {
   return (
     <div
       className={cn(
-        'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b *:last:border-0 *:last:pb-0',
+        'text-sans-md border-default *:border-b-secondary bg-default flex flex-col rounded-lg border py-5 *:border-b *:last:border-0 *:last:pb-0',
         widthClass[width]
       )}
     >
diff --git a/app/ui/lib/Checkbox.tsx b/app/ui/lib/Checkbox.tsx
index cb5d028865..b50b777b0c 100644
--- a/app/ui/lib/Checkbox.tsx
+++ b/app/ui/lib/Checkbox.tsx
@@ -12,19 +12,17 @@ import { Checkmark12Icon } from '@oxide/design-system/icons/react'
 import { classed } from '~/util/classed'
 
 const Check = () => (
-  <Checkmark12Icon className="text-accent pointer-events-none absolute top-0.5 left-0.5 h-3 w-3 fill-current" />
+  <Checkmark12Icon className="text-accent light:text-(--theme-accent-600) pointer-events-none absolute top-0.5 left-0.5 h-3 w-3 fill-current" />
 )
 
-const Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-accent pointer-events-none`
+const Indeterminate = classed.div`absolute w-2 h-0.5 left-1 top-[7px] bg-(--theme-accent-800) light:bg-(--theme-accent-600) pointer-events-none`
 
 const inputStyle = `
-  appearance-none border border-default bg-default h-4 w-4 rounded-sm absolute left-0
+  appearance-none border border-default bg-default h-4 w-4 rounded-sm absolute left-0 outline-none
   disabled:cursor-not-allowed
-  hover:border-hover hover:cursor-pointer
-  checked:bg-accent-secondary checked:border-accent-secondary
-  indeterminate:hover:border-accent checked:hover:border-accent
-  hover:indeterminate:bg-accent-secondary-hover hover:checked:bg-accent-secondary-hover
-  indeterminate:bg-accent-secondary indeterminate:border-accent-secondary
+  hover:border-raise hover:cursor-pointer
+  checked:bg-accent checked:border-accent-tertiary checked:hover:border-accent-secondary checked:hover:light:border-accent
+  indeterminate:bg-accent indeterminate:border-accent-tertiary indeterminate:hover:light:border-accent indeterminate:hover:border-accent-secondary
 `
 
 export type CheckboxProps = {
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index 96aaa0eaf1..085842ac6e 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -176,10 +176,10 @@ export const Combobox = ({
           )}
           <div
             className={cn(
-              `flex rounded-md border focus-within:ring-2`,
+              `bg-default flex rounded-md border focus-within:ring-2`,
               hasError
                 ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
-                : 'border-default focus-within:ring-accent-secondary hover:border-hover',
+                : 'border-default focus-within:ring-accent-secondary hover:border-raise',
               disabled
                 ? 'text-disabled bg-disabled border-default! cursor-not-allowed'
                 : 'bg-default',
@@ -228,7 +228,7 @@ export const Combobox = ({
               placeholder={placeholder}
               disabled={disabled || isLoading}
               className={cn(
-                `text-sans-md text-raise placeholder:text-tertiary h-10 w-full rounded-md border-none! px-3 py-2 outline-hidden!`,
+                `text-sans-md text-raise placeholder:text-tertiary h-10 w-full rounded-md border-none! px-3 py-2 outline-hidden`,
                 disabled
                   ? 'text-disabled bg-disabled border-default! cursor-not-allowed'
                   : 'bg-default',
@@ -251,7 +251,7 @@ export const Combobox = ({
             <ComboboxOptions
               anchor="bottom start"
               // 13px gap is presumably because it's measured from inside the outline or something
-              className={`ox-menu pointer-events-auto ${zIndex} border-secondary relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border outline-hidden! [--anchor-gap:13px] empty:hidden`}
+              className={`ox-menu shadow-menu-inset pointer-events-auto ${zIndex} border-secondary relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border [--anchor-gap:13px] empty:hidden`}
               modal={false}
             >
               {filteredItems.map((item) => (
diff --git a/app/ui/lib/CopyToClipboard.tsx b/app/ui/lib/CopyToClipboard.tsx
index 7330842769..a4d2934ff1 100644
--- a/app/ui/lib/CopyToClipboard.tsx
+++ b/app/ui/lib/CopyToClipboard.tsx
@@ -54,9 +54,9 @@ export const CopyToClipboard = ({
   return (
     <button
       className={cn(
-        'active-clicked relative h-5 w-5 rounded',
+        'active-clicked relative h-5 w-5 rounded-md',
         hasCopied
-          ? 'text-accent bg-accent-secondary'
+          ? 'text-accent bg-accent'
           : 'text-tertiary hover:text-default hover:bg-hover',
 
         className
diff --git a/app/ui/lib/DateField.tsx b/app/ui/lib/DateField.tsx
index ce984fe125..db3a6f7d4a 100644
--- a/app/ui/lib/DateField.tsx
+++ b/app/ui/lib/DateField.tsx
@@ -130,7 +130,7 @@ function DateSegment({
       }}
       className={cn(
         'group box-content rounded-md px-px text-right tabular-nums outline-hidden',
-        !readOnly && 'focus:text-raise focus:bg-accent-secondary-hover',
+        !readOnly && 'focus:text-raise focus:bg-accent-hover',
         segment.type === 'timeZoneName' ? 'text-sans-sm ml-1' : 'text-sans-md'
       )}
       // Segment props turns this into a focusable element
diff --git a/app/ui/lib/DatePicker.tsx b/app/ui/lib/DatePicker.tsx
index c3bdcde3eb..589ab49d20 100644
--- a/app/ui/lib/DatePicker.tsx
+++ b/app/ui/lib/DatePicker.tsx
@@ -55,7 +55,7 @@ export function DatePicker(props: DatePickerProps) {
           type="button"
           className={cn(
             state.isOpen && 'z-10 ring-2',
-            'text-sans-md border-default hover:border-raise relative flex h-11 items-center rounded-l rounded-r border focus-within:ring-2 focus:z-10',
+            'text-sans-md border-default hover:border-raise bg-default relative flex h-11 items-center rounded-l-md rounded-r-md border focus-within:ring-2 focus:z-10',
             state.isInvalid
               ? 'focus-error border-error ring-error-secondary'
               : 'border-default ring-accent-secondary'
@@ -69,7 +69,7 @@ export function DatePicker(props: DatePickerProps) {
               </div>
             )}
           </div>
-          <div className="border-default -ml-px flex h-[calc(100%-12px)] w-10 items-center justify-center rounded-r border-l outline-hidden">
+          <div className="border-default -ml-px flex h-[calc(100%-12px)] w-10 items-center justify-center rounded-r-md border-l outline-hidden">
             <Calendar16Icon className="text-secondary h-4 w-4" />
           </div>
         </button>
diff --git a/app/ui/lib/DateRangePicker.tsx b/app/ui/lib/DateRangePicker.tsx
index ef3bee1978..d7a328451c 100644
--- a/app/ui/lib/DateRangePicker.tsx
+++ b/app/ui/lib/DateRangePicker.tsx
@@ -63,7 +63,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
           type="button"
           className={cn(
             state.isOpen && 'z-10 ring-2',
-            'text-sans-md border-default hover:border-raise relative flex h-11 items-center rounded-l rounded-r border focus-within:ring-2 focus:z-10',
+            'text-sans-md border-default hover:border-raise bg-default relative flex h-11 items-center rounded-l-md rounded-r-md border focus-within:ring-2 focus:z-10',
             state.isInvalid
               ? 'focus-error border-error ring-error-secondary hover:border-error'
               : 'border-default ring-accent-secondary'
@@ -77,7 +77,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
               </div>
             )}
           </div>
-          <div className="border-default -ml-px flex h-[calc(100%-12px)] w-10 items-center justify-center rounded-r border-l outline-hidden">
+          <div className="border-default -ml-px flex h-[calc(100%-12px)] w-10 items-center justify-center rounded-r-md border-l outline-hidden">
             <Calendar16Icon className="text-secondary h-4 w-4" />
           </div>
         </button>
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index 4637b1855f..66dc55fa1a 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -6,13 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
-import {
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItems,
-  type MenuItemsProps,
-} from '@headlessui/react'
+import { Menu } from '@base-ui/react/menu'
 import cn from 'classnames'
 import { type ReactNode, type Ref } from 'react'
 import { Link } from 'react-router'
@@ -22,34 +16,81 @@ import { OpenLink12Icon } from '@oxide/design-system/icons/react'
 import { Wrap } from '../util/wrap'
 import { Tooltip } from './Tooltip'
 
-export const Root = Menu
+// Re-export Root with modal={false} default to prevent scroll locking
+export function Root({ children, ...props }: React.ComponentProps<typeof Menu.Root>) {
+  return (
+    <Menu.Root modal={false} {...props}>
+      {children}
+    </Menu.Root>
+  )
+}
+
+export const Trigger = Menu.Trigger
 
-export const Trigger = MenuButton
+type AnchorProp = string | { to: string; offset?: number; gap?: number }
+
+function parseAnchor(
+  anchor: AnchorProp,
+  gap?: number
+): {
+  side: 'bottom' | 'top' | 'left' | 'right'
+  align: 'start' | 'center' | 'end'
+  sideOffset: number
+  alignOffset: number
+} {
+  const anchorStr = typeof anchor === 'string' ? anchor : anchor.to
+  const parts = anchorStr.split(' ')
+  const side = (parts[0] ?? 'bottom') as 'bottom' | 'top' | 'left' | 'right'
+  const align = (parts[1] ?? 'end') as 'start' | 'center' | 'end'
+  const alignOffset = typeof anchor === 'object' ? (anchor.offset ?? 0) : 0
+  const sideOffset = gap ?? (typeof anchor === 'object' ? (anchor.gap ?? 0) : 0)
+  return { side, align, sideOffset, alignOffset }
+}
 
 type ContentProps = {
   className?: string
   children: ReactNode
-  anchor?: MenuItemsProps['anchor']
-  /** Spacing in px, passed as --anchor-gap */
+  anchor?: AnchorProp
+  /** Spacing in px between trigger and menu */
   gap?: 8
 }
 
 export function Content({ className, children, anchor = 'bottom end', gap }: ContentProps) {
+  const { side, align, sideOffset, alignOffset } = parseAnchor(anchor, gap)
   return (
-    <MenuItems
-      anchor={anchor}
-      // goofy gap because tailwind hates string interpolation
-      className={cn(
-        'dropdown-menu-content elevation-2 outline-hidden',
-        gap === 8 && `[--anchor-gap:8px]`,
-        className
-      )}
-      // necessary to turn off scroll locking so the scrollbar doesn't pop in
-      // and out as menu closes and opens
-      modal={false}
-    >
-      {children}
-    </MenuItems>
+    <Menu.Portal>
+      <Menu.Positioner
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+      >
+        <Menu.Popup
+          className={cn('dropdown-menu-content shadow-menu outline-hidden', className)}
+        >
+          {children}
+        </Menu.Popup>
+      </Menu.Positioner>
+    </Menu.Portal>
+  )
+}
+
+type SubContentProps = {
+  className?: string
+  children: ReactNode
+}
+
+export function SubContent({ className, children }: SubContentProps) {
+  return (
+    <Menu.Portal>
+      <Menu.Positioner sideOffset={1}>
+        <Menu.Popup
+          className={cn('dropdown-menu-content shadow-menu outline-hidden', className)}
+        >
+          {children}
+        </Menu.Popup>
+      </Menu.Positioner>
+    </Menu.Portal>
   )
 }
 
@@ -62,13 +103,14 @@ type LinkItemProps = {
 export function LinkItem({ className, to, children }: LinkItemProps) {
   // rather lazy test for external links
   const ext = /^https?:/.test(to) ? { rel: 'noreferrer', target: '_blank' } : undefined
-  // TODO: external link icon to show when it will open in a new tab
   return (
-    <MenuItem>
-      <Link className={cn('DropdownMenuItem ox-menu-item', className)} to={to} {...ext}>
-        {children} {ext ? <OpenLink12Icon className="ml-1.5" /> : null}
-      </Link>
-    </MenuItem>
+    <Menu.Item
+      render={
+        <Link className={cn('DropdownMenuItem ox-menu-item', className)} to={to} {...ext} />
+      }
+    >
+      {children} {ext ? <OpenLink12Icon className="ml-1.5" /> : null}
+    </Menu.Item>
   )
 }
 
@@ -78,21 +120,24 @@ type ItemProps = {
   onSelect: () => void
   /* If present, ReactNode will be displayed in a tooltip */
   disabled?: React.ReactNode
-  ref?: Ref<HTMLButtonElement>
+  ref?: Ref<HTMLDivElement>
 }
 
-// need to forward ref because of tooltips on disabled menu buttons
 export const Item = ({ className, onSelect, label, disabled, ref }: ItemProps) => (
   <Wrap key={label} when={!!disabled} with={<Tooltip content={disabled} />}>
-    <MenuItem disabled={!!disabled}>
-      <button
-        type="button"
-        className={cn('DropdownMenuItem ox-menu-item', className)}
-        ref={ref}
-        onClick={onSelect}
-      >
-        {label}
-      </button>
-    </MenuItem>
+    <Menu.Item
+      ref={ref}
+      disabled={!!disabled}
+      onClick={onSelect}
+      className={cn('DropdownMenuItem ox-menu-item', className)}
+    >
+      {label}
+    </Menu.Item>
   </Wrap>
 )
+
+export const Submenu = Menu.SubmenuRoot
+export const SubmenuTrigger = Menu.SubmenuTrigger
+export const RadioGroup = Menu.RadioGroup
+export const RadioItem = Menu.RadioItem
+export const Separator = Menu.Separator
diff --git a/app/ui/lib/EmptyMessage.tsx b/app/ui/lib/EmptyMessage.tsx
index c1136384e8..efd6aa8e96 100644
--- a/app/ui/lib/EmptyMessage.tsx
+++ b/app/ui/lib/EmptyMessage.tsx
@@ -43,7 +43,7 @@ export function EmptyMessage(props: Props) {
   return (
     <div className="m-4 flex max-w-[18rem] flex-col items-center text-center">
       {props.icon && (
-        <div className="text-accent bg-accent-secondary mb-4 rounded-md p-1 leading-0">
+        <div className="text-accent bg-accent mb-4 rounded-md p-1 leading-0">
           {props.icon}
         </div>
       )}
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index dc0f34db19..11b9c060c7 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -69,7 +69,7 @@ export function FileInput({
         type="file"
         name="file"
         className={cn(
-          'absolute inset-0 -z-1 w-full cursor-pointer rounded',
+          'absolute inset-0 -z-1 w-full cursor-pointer rounded-md',
           error && 'focus-error'
         )}
         {...inputProps}
@@ -81,16 +81,16 @@ export function FileInput({
       <div
         className={cn(
           'text-raise bg-default pointer-events-none relative z-1 flex flex-col items-center justify-center space-y-0.5 rounded-md border px-4 py-6',
-          dragOver && 'bg-accent-secondary border-accent-secondary!',
+          dragOver && 'bg-accent border-accent-secondary!',
           error
             ? 'border-error-secondary! group-hover:border-error'
-            : 'border-default group-hover:border-hover'
+            : 'border-default group-hover:border-raise'
         )}
       >
         <div
           className={cn(
-            'text-accent bg-accent-secondary flex items-center justify-center rounded-md p-1',
-            dragOver && 'bg-accent-secondary-hover'
+            'text-accent bg-accent flex items-center justify-center rounded-md p-1',
+            dragOver && 'bg-accent-hover'
           )}
         >
           <Document16Icon className="h-4 w-4" />
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
index 0691124bf6..a292195a8b 100644
--- a/app/ui/lib/Listbox.tsx
+++ b/app/ui/lib/Listbox.tsx
@@ -104,7 +104,7 @@ export const Listbox = <Value extends string = string>({
                 `text-sans-md flex h-11 items-center justify-between rounded-md border`,
                 hasError
                   ? 'focus-error border-error-secondary hover:border-error'
-                  : 'border-default hover:border-hover',
+                  : 'border-default hover:border-raise',
                 open && 'ring-accent-secondary ring-2',
                 open && hasError && 'ring-error-secondary',
                 isDisabled
@@ -145,7 +145,7 @@ export const Listbox = <Value extends string = string>({
               anchor={{ gap: 12, to: 'bottom start' }}
               className={cn(
                 zIndex,
-                'ox-menu pointer-events-auto overflow-y-auto outline-hidden!',
+                'ox-menu shadow-menu-inset pointer-events-auto',
                 !hideSelected ? 'w-(--button-width)' : 'min-w-24'
               )}
               // This is to prevent the `useOthersInert` call in ListboxOptions.
diff --git a/app/ui/lib/Message.tsx b/app/ui/lib/Message.tsx
index be3e900720..5fbdcb602b 100644
--- a/app/ui/lib/Message.tsx
+++ b/app/ui/lib/Message.tsx
@@ -38,10 +38,10 @@ const defaultIcon: Record<Variant, ReactElement> = {
 }
 
 const color: Record<Variant, string> = {
-  success: 'bg-accent-secondary border-accent/10',
-  error: 'bg-error-secondary border-destructive/10',
-  notice: 'bg-notice-secondary border-notice/10',
-  info: 'bg-info-secondary border-blue-800/10',
+  success: 'bg-accent',
+  error: 'bg-error',
+  notice: 'bg-notice',
+  info: 'bg-info',
 }
 
 const textColor: Record<Variant, string> = {
@@ -77,7 +77,7 @@ export const Message = ({
   return (
     <div
       className={cn(
-        'elevation-1 relative flex items-start gap-2 overflow-hidden rounded-lg border p-3 pr-5',
+        'relative flex items-start gap-2 overflow-hidden rounded-md p-3 pr-5 ring ring-current/15',
         color[variant],
         textColor[variant],
         className
diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx
index 1f780e550e..8888f509eb 100644
--- a/app/ui/lib/Modal.tsx
+++ b/app/ui/lib/Modal.tsx
@@ -74,11 +74,11 @@ export function Modal({
               animate={{ x: '-50%', y: '-50%' }}
               transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
               className={cn(
-                'bg-raise border-secondary elevation-2 pointer-events-auto fixed top-[min(50%,500px)] left-1/2 z-(--z-modal) m-0 flex max-h-[min(800px,80vh)] flex-col justify-between rounded-lg border p-0',
+                'bg-raise light:bg-default shadow-modal pointer-events-auto fixed top-[min(50%,500px)] left-1/2 z-(--z-modal) m-0 flex max-h-[min(800px,80vh)] flex-col justify-between overflow-hidden rounded-lg p-0',
                 widthClass[width]
               )}
             >
-              <Dialog.Title className="text-sans-semi-lg bg-secondary border-b-secondary border-b px-4 py-4">
+              <Dialog.Title className="text-sans-semi-lg bg-secondary light:bg-raise border-b-secondary border-b px-4 py-4">
                 {title}
               </Dialog.Title>
               {children}
diff --git a/app/ui/lib/NumberInput.tsx b/app/ui/lib/NumberInput.tsx
index fa4c49417b..3792654b7d 100644
--- a/app/ui/lib/NumberInput.tsx
+++ b/app/ui/lib/NumberInput.tsx
@@ -37,7 +37,7 @@ export function NumberInput(props: NumberInputProps) {
         'relative flex rounded-md border',
         props.error
           ? 'border-error-secondary hover:border-error'
-          : 'border-default hover:border-hover',
+          : 'border-default hover:border-raise',
         props.isDisabled && 'border-default!',
         props.className
       )}
diff --git a/app/ui/lib/PageHeader.tsx b/app/ui/lib/PageHeader.tsx
index 53886cdcee..2e72b97d7e 100644
--- a/app/ui/lib/PageHeader.tsx
+++ b/app/ui/lib/PageHeader.tsx
@@ -17,9 +17,9 @@ interface PageTitleProps {
 }
 export const PageTitle = ({ children: title, icon }: PageTitleProps) => {
   return (
-    <h1 className="text-sans-3xl text-accent-secondary inline-flex items-center space-x-2">
+    <h1 className="text-sans-3xl text-accent-secondary light:text-(--theme-accent-1100) inline-flex items-center space-x-2">
       {icon}
-      <span className="text-accent">{title}</span>
+      <span className="text-accent light:text-raise">{title}</span>
     </h1>
   )
 }
diff --git a/app/ui/lib/Popover.tsx b/app/ui/lib/Popover.tsx
index 9387fcba74..2003cdf296 100644
--- a/app/ui/lib/Popover.tsx
+++ b/app/ui/lib/Popover.tsx
@@ -39,7 +39,7 @@ export function Popover(props: PopoverProps) {
       <div
         {...popoverProps}
         ref={ref}
-        className="bg-raise border-secondary elevation-2 absolute top-full z-(--z-popover) mt-2 rounded-lg rounded-md border"
+        className="bg-raise light:bg-default shadow-menu absolute top-full z-(--z-popover) mt-2 rounded-lg"
       >
         <DismissButton onDismiss={state.close} />
         {children}
diff --git a/app/ui/lib/Progress.tsx b/app/ui/lib/Progress.tsx
index 6d12185083..ad80e4775a 100644
--- a/app/ui/lib/Progress.tsx
+++ b/app/ui/lib/Progress.tsx
@@ -20,7 +20,7 @@ export type ProgressProps = {
 export const Progress = (props: ProgressProps) => (
   <div
     role="progressbar"
-    className={cn('bg-accent-secondary h-1 rounded-[1px]', props.className)}
+    className={cn('bg-accent h-1 rounded-[1px]', props.className)}
     aria-valuenow={Math.round(props.value)}
     {...ariaLabel(props)}
   >
diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
index 0393eb8f2e..8315bff809 100644
--- a/app/ui/lib/PropertiesTable.tsx
+++ b/app/ui/lib/PropertiesTable.tsx
@@ -41,7 +41,7 @@ export function PropertiesTable({
       aria-label="Properties table"
       className={cn(
         className,
-        'properties-table border-default min-w-min basis-6/12 rounded-lg border',
+        'properties-table bg-default border-default min-w-min basis-6/12 rounded-lg border',
         '*:border-secondary *:border-t *:pr-6 *:pl-3 [&>*:nth-child(-n+2)]:border-t-0!',
         'grid grid-cols-[minmax(min-content,1fr)_3fr]',
         {
diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx
index 38f4d8fedb..55b211ba61 100644
--- a/app/ui/lib/Radio.tsx
+++ b/app/ui/lib/Radio.tsx
@@ -24,8 +24,8 @@ export type RadioProps = Omit<React.ComponentProps<'input'>, 'type'> & {
 
 const fieldStyles = `
   peer appearance-none absolute outline-hidden
-  border border-default h-4 w-4 rounded-full bg-default hover:border-hover checked:hover:border-accent
-  checked:bg-accent-secondary checked:border-accent-secondary disabled:bg-disabled hover:disabled:bg-disabled
+  border border-default h-4 w-4 rounded-full bg-default hover:border-raise checked:hover:border-accent-secondary checked:hover:light:border-accent
+  checked:bg-accent checked:border-accent-tertiary disabled:bg-disabled hover:disabled:bg-disabled
   disabled:hover:bg-transparent
 `
 
@@ -34,7 +34,7 @@ export const Radio = ({ children, className, alignTop, ...inputProps }: RadioPro
     <span className="relative h-4 w-4 shrink-0">
       <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
       {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
-      <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
+      <div className="bg-accent-inverse light:bg-(--theme-accent-600) pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
     </span>
 
     {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
@@ -42,18 +42,18 @@ export const Radio = ({ children, className, alignTop, ...inputProps }: RadioPro
 )
 
 const cardLabelStyles = `
-  text-sans-md border rounded-md border-default bg-default hover:border-hover
+  text-sans-md border rounded-md border-default bg-default hover:border-raise
   peer-focus:ring-2 peer-focus:ring-accent-secondary w-44 text-raise
 
   *:border-secondary *:p-3
   cursor-pointer
 
-  peer-checked:bg-accent-secondary
+  peer-checked:bg-accent
   peer-checked:border-accent-secondary peer-checked:hover:border-accent peer-checked:*:border-accent peer-checked:*:border-accent-secondary
   peer-checked:text-accent peer-checked:[&>*_.text-default]:text-accent-secondary
 
   peer-disabled:cursor-not-allowed
-  peer-disabled:bg-disabled peer-disabled:peer-checked:bg-accent-secondary
+  peer-disabled:bg-disabled peer-disabled:peer-checked:bg-accent
   peer-checked:peer-disabled:hover:border-accent-secondary peer-disabled:hover:border-default
   peer-disabled:[&>*_.text-default]:text-disabled peer-disabled:text-disabled peer-disabled:peer-checked:text-accent-disabled peer-disabled:peer-checked:[&>*_.text-default]:text-accent-disabled
 `
diff --git a/app/ui/lib/ResourceMeter.tsx b/app/ui/lib/ResourceMeter.tsx
index 539ff995c5..0732e934b7 100644
--- a/app/ui/lib/ResourceMeter.tsx
+++ b/app/ui/lib/ResourceMeter.tsx
@@ -42,7 +42,7 @@ export const ResourceMeter = ({
       ? 'bg-destructive-secondary'
       : value > warningThreshold
         ? 'bg-notice-secondary'
-        : 'bg-accent-secondary'
+        : 'bg-accent'
   return (
     <Tooltip content={label} placement="top">
       <div
diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index c0ab483894..6b73f3a6c0 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -69,7 +69,7 @@ export function SideModal({
               initial={{ x: animate ? 40 : 0 }}
               animate={{ x: 0 }}
               transition={{ type: 'spring', duration: 0.4, bounce: 0 }}
-              className="DialogContent ox-side-modal bg-raise border-secondary elevation-2 pointer-events-auto fixed top-0 right-0 bottom-0 z-(--z-side-modal) m-0 flex w-lg flex-col justify-between border-l p-0"
+              className="DialogContent ox-side-modal bg-raise shadow-modal pointer-events-auto fixed top-0 right-0 bottom-0 z-(--z-side-modal) m-0 flex w-lg flex-col justify-between p-0"
             >
               <div className="items-top mt-8 mb-4">
                 <Dialog.Title className="text-sans-2xl text-raise flex w-full items-center justify-between pr-8 break-words">
diff --git a/app/ui/lib/SkipLink.tsx b/app/ui/lib/SkipLink.tsx
index 66654240b4..a451aa75a3 100644
--- a/app/ui/lib/SkipLink.tsx
+++ b/app/ui/lib/SkipLink.tsx
@@ -13,7 +13,7 @@ const skipLinkStyles = `
     uppercase text-mono-lg rounded
     inline-flex items-center justify-center
     focus:ring-2 focus:ring-accent-secondary
-    bg-accent-secondary border-transparent text-accent text-mono-sm
+    bg-accent border-transparent text-accent text-mono-sm
     transition-all motion-reduce:transform-none
 `
 
diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx
index 25c3ba7515..ca27e061c6 100644
--- a/app/ui/lib/Table.tsx
+++ b/app/ui/lib/Table.tsx
@@ -101,7 +101,7 @@ Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProp
   >
     <div
       className={cn(
-        'border-secondary relative -mr-[2px] flex items-center overflow-hidden border-b border-l px-3 py-2',
+        'border-secondary relative flex items-center overflow-hidden border-b border-l px-3 py-2',
         { 'h-11': height === 'small', 'h-14': height === 'large' }
       )}
     >
diff --git a/app/ui/lib/Tag.tsx b/app/ui/lib/Tag.tsx
index 857d548c06..8b7d4a7bc4 100644
--- a/app/ui/lib/Tag.tsx
+++ b/app/ui/lib/Tag.tsx
@@ -28,7 +28,7 @@ export const tagColors: Record<TagVariant, Partial<Record<TagColor, string>>> =
     notice: 'bg-notice text-inverse',
   },
   secondary: {
-    default: 'bg-accent-secondary text-accent',
+    default: 'bg-accent text-accent',
     destructive: 'bg-destructive-secondary text-destructive',
     notice: 'bg-notice-secondary text-notice',
     neutral: 'bg-secondary text-default',
diff --git a/app/ui/lib/TextInput.tsx b/app/ui/lib/TextInput.tsx
index a5c3fcc908..826d9dd5b5 100644
--- a/app/ui/lib/TextInput.tsx
+++ b/app/ui/lib/TextInput.tsx
@@ -68,7 +68,7 @@ export function TextInput({
         'flex items-center rounded-md border',
         error
           ? 'border-error-secondary hover:border-error'
-          : 'border-default hover:border-hover',
+          : 'border-default hover:border-raise',
         disabled && 'border-default!',
         className
       )}
diff --git a/app/ui/lib/Toast.tsx b/app/ui/lib/Toast.tsx
index 6d31e0d280..27c213c0b6 100644
--- a/app/ui/lib/Toast.tsx
+++ b/app/ui/lib/Toast.tsx
@@ -49,7 +49,7 @@ const defaultTitle: Record<Variant, string> = {
 }
 
 const color: Record<Variant, string> = {
-  success: 'bg-accent-secondary',
+  success: 'bg-accent',
   error: 'bg-error-secondary',
   info: 'bg-notice-secondary',
 }
@@ -84,7 +84,7 @@ export const Toast = ({
   return (
     <div
       className={cn(
-        'elevation-2 relative flex w-96 items-start overflow-hidden rounded-lg p-4',
+        'shadow-toast relative flex w-96 items-start overflow-hidden rounded-lg border border-current/10 p-4',
         color[variant],
         textColor[variant]
       )}
@@ -113,7 +113,7 @@ export const Toast = ({
           type="button"
           aria-label="Dismiss notification"
           className={cn(
-            'hover:bg-accent-secondary-hover -m-2 flex items-center rounded-md border-transparent! p-2',
+            'hover:bg-accent-hover -m-2 flex items-center rounded-md border-transparent! p-2',
             textColor[variant]
           )}
           onClick={onClose}
diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
index 54aa05e10d..9cc6d94108 100644
--- a/app/ui/styles/components/Tabs.css
+++ b/app/ui/styles/components/Tabs.css
@@ -23,7 +23,7 @@
 
 /* Base tab styles */
 .ox-tab {
-  @apply text-mono-sm text-secondary border-secondary h-10 space-x-2 border-b px-1.5 pt-2 pb-1 whitespace-nowrap uppercase !no-underline;
+  @apply text-mono-sm text-tertiary border-secondary h-10 space-x-2 border-b px-1.5 pt-2 pb-1 whitespace-nowrap uppercase !no-underline;
 }
 
 .ox-tabs-list .ox-tab > * {
@@ -37,11 +37,7 @@
 
 /* Active states */
 .ox-tab[data-state='active'] {
-  @apply text-accent border-accent;
-}
-
-.ox-tabs-list .ox-tab[data-state='active']:hover > * {
-  @apply bg-accent-secondary;
+  @apply text-accent border-accent light:border-green-800 light:text-raise;
 }
 
 /* Badge styles */
@@ -54,7 +50,7 @@
 }
 
 .ox-tab[data-state='active'] > .ox-badge {
-  @apply bg-accent-secondary-hover;
+  @apply bg-accent;
 }
 
 /* Full width variants */
@@ -82,16 +78,12 @@
 }
 
 .ox-side-tabs-list .ox-tab[data-state='active'] {
-  @apply text-accent bg-accent-secondary;
+  @apply text-accent bg-accent;
   border: none;
 }
 
-.ox-side-tabs .ox-tabs-panel {
-  @apply mx-0 ml-4;
-}
-
 .ox-side-tabs-list .ox-tab[data-state='active']:hover {
-  @apply bg-accent-secondary-hover;
+  @apply bg-accent-hover;
 }
 
 .ox-side-tabs-list .ox-tab:not([data-state='active']):hover {
diff --git a/app/ui/styles/components/button.css b/app/ui/styles/components/button.css
index 5fc6fe2852..2ab0c0e81b 100644
--- a/app/ui/styles/components/button.css
+++ b/app/ui/styles/components/button.css
@@ -8,43 +8,57 @@
 
 .ox-button {
   @apply relative;
-}
-.active-clicked:active:not(.visually-disabled) {
-  @apply motion-safe:translate-y-px;
-}
-.ox-button:after {
-  content: '';
-  @apply absolute top-0 right-0 bottom-0 left-0 rounded-md border border-current opacity-[0.05];
-}
-.btn-primary {
-  @apply text-accent bg-accent-secondary hover:bg-accent-secondary-hover disabled:text-accent-disabled disabled:bg-accent-secondary;
-}
-.btn-primary:disabled > .spinner,
-.btn-primary.visually-disabled > .spinner {
-  @apply text-accent;
-}
 
-.btn-secondary {
-  @apply text-default bg-secondary hover:bg-hover disabled:text-disabled disabled:bg-secondary;
-}
-.btn-secondary:disabled > .spinner,
-.btn-secondary.visually-disabled > .spinner {
-  @apply text-default;
-}
+  &:after {
+    content: '';
+    @apply absolute top-0 right-0 bottom-0 left-0 rounded-md border border-current/5;
+  }
+  &.btn-primary {
+    @apply text-accent bg-accent hover:bg-accent-hover disabled:text-accent/35 disabled:bg-accent;
+  }
+  &.btn-primary:disabled > .spinner,
+  &.btn-primary.visually-disabled > .spinner {
+    @apply text-accent;
+  }
 
-.btn-danger {
-  @apply text-destructive bg-destructive-secondary hover:bg-destructive-secondary-hover disabled:text-destructive-disabled disabled:bg-destructive-secondary;
-}
-.btn-danger:disabled > .spinner,
-.btn-danger.visually-disabled > .spinner {
-  @apply text-destructive;
-}
+  &.btn-secondary {
+    @apply text-secondary bg-secondary hover:bg-hover disabled:text-secondary/35 disabled:bg-secondary;
+  }
+  &.btn-secondary:disabled > .spinner,
+  &.btn-secondary.visually-disabled > .spinner {
+    @apply text-secondary;
+  }
 
-.btn-ghost {
-  @apply text-default border-default hover:bg-hover disabled:text-disabled border disabled:bg-transparent;
-}
-.btn-ghost:after {
-  @apply hidden;
+  &.btn-danger {
+    @apply text-destructive bg-destructive hover:bg-destructive-hover disabled:text-destructive/35 disabled:bg-destructive;
+  }
+  &.btn-danger:disabled > .spinner,
+  &.btn-danger.visually-disabled > .spinner {
+    @apply text-destructive;
+  }
+
+  &.btn-ghost {
+    @apply text-secondary hover:bg-hover disabled:text-secondary/35 disabled:bg-transparent;
+  }
+  &.btn-ghost:after {
+    @apply border-current/20;
+  }
+
+  &.btn-accent-ghost {
+    @apply text-accent border-accent-secondary hover:bg-accent-hover border;
+  }
+
+  &.btn-accent-ghost:after {
+    @apply hidden;
+  }
+
+  &.btn-accent-solid {
+    @apply text-inverse bg-(--theme-accent-800);
+  }
+
+  &.btn-accent-solid:after {
+    @apply hidden;
+  }
 }
 
 /**
diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index c7ad40e8a7..a818f2d109 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -8,7 +8,7 @@
 
 .dropdown-menu-content {
   /* we want menu popover to be on top of top bar and pagination bar too */
-  @apply bg-raise border-secondary z-(--z-top-bar-dropdown) min-w-36 rounded-md border p-0;
+  @apply bg-raise light:bg-default z-(--z-top-bar-dropdown) min-w-36 rounded-md p-0;
 
   & .DropdownMenuItem {
     @apply text-sans-md text-default border-secondary flex w-full cursor-pointer items-center border-b py-2 pr-6 pl-3 text-left select-none last:border-b-0;
@@ -25,7 +25,7 @@
       @apply text-destructive-disabled;
     }
 
-    &[data-focus] {
+    &[data-highlighted] {
       outline: none;
       @apply bg-tertiary;
     }
diff --git a/app/ui/styles/components/menu-list.css b/app/ui/styles/components/menu-list.css
index 8975447ee1..4745547e68 100644
--- a/app/ui/styles/components/menu-list.css
+++ b/app/ui/styles/components/menu-list.css
@@ -7,7 +7,7 @@
  */
 
 .ox-menu {
-  @apply bg-raise border-secondary elevation-2 !max-h-[17.5rem] overflow-y-auto rounded-md border;
+  @apply bg-raise !max-h-[17.5rem] rounded-md p-px;
 }
 
 .ox-menu-item {
@@ -19,15 +19,15 @@
 }
 
 .ox-menu-item.is-highlighted.is-selected {
-  @apply bg-accent-secondary-hover;
+  @apply bg-accent-hover;
 }
 
 .ox-menu-item.is-selected[data-highlighted] {
-  @apply bg-accent-secondary-hover;
+  @apply bg-accent-hover;
 }
 
 .ox-menu-item.is-selected {
-  @apply text-accent bg-accent-secondary hover:bg-accent-secondary-hover border-0;
+  @apply text-accent bg-accent hover:bg-accent-hover;
   .ox-badge {
     @apply text-inverse bg-accent ring-0;
   }
@@ -36,5 +36,5 @@
 /* beautiful ring */
 .ox-menu-item.is-selected:after {
   content: '';
-  @apply border-accent absolute top-0 right-0 bottom-0 left-0 block rounded-md border;
+  @apply ring-accent absolute inset-0 z-10 block rounded-sm ring;
 }
diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index a34ec314b3..8627454313 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -43,12 +43,12 @@
 
   /* first cell's div */
   & td:first-child > div {
-    @apply ml-2 rounded-l border-l;
+    @apply ml-2 rounded-l-md border-l;
   }
 
   /* second-to-last cell's div */
   & td:nth-last-child(2) > div {
-    @apply rounded-r border-r;
+    @apply rounded-r-md border-r;
   }
 
   /* last cell's div (the div for the delete button) */
diff --git a/app/ui/styles/components/spinner.css b/app/ui/styles/components/spinner.css
index f07f28dce9..060beb4169 100644
--- a/app/ui/styles/components/spinner.css
+++ b/app/ui/styles/components/spinner.css
@@ -83,7 +83,7 @@
 }
 
 .metrics-loading-indicator span {
-  @apply block h-1 w-[3px] rounded-[1px] bg-[--theme-accent-500];
+  @apply block h-1 w-[3px] rounded-[1px] bg-(--theme-accent-500);
   animation: stretch 1.8s infinite both;
 }
 
diff --git a/app/ui/styles/components/table.css b/app/ui/styles/components/table.css
index 231f6ae6b0..1b2b85daf6 100644
--- a/app/ui/styles/components/table.css
+++ b/app/ui/styles/components/table.css
@@ -55,6 +55,17 @@ table.ox-table {
     @apply bg-default sticky left-0 z-10;
   }
 
+  /* Border between sticky first column and second column:
+     first column owns the right border, second column drops its left border */
+  & td:first-of-type > div,
+  & th:first-of-type > div {
+    @apply border-r;
+  }
+  & td:nth-of-type(2) > div,
+  & th:nth-of-type(2) > div {
+    @apply border-l-0;
+  }
+
   /*
   Last column is sticky if it
   is a more actions cell
@@ -306,30 +317,42 @@ table.ox-table {
 Drop shadow appears if content is below a sticky
 cell and the table is overflowing
 */
+td:first-of-type,
+th:first-of-type,
+td:last-of-type.action-col,
+th:last-of-type.action-col {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 250ms;
+}
+
 .scrolled td:first-of-type,
-.scrolled th:first-of-type,
+.scrolled th:first-of-type {
+  box-shadow: 6px 0 8px -2px oklch(0 0 0 / 0.2);
+}
 .overflowing td:last-of-type.action-col,
 .overflowing th:last-of-type.action-col {
-  @apply elevation-2;
+  box-shadow: -6px 0 8px -2px oklch(0 0 0 / 0.2);
+}
+.light .scrolled td:first-of-type,
+.light .scrolled th:first-of-type {
+  box-shadow: 6px 0 8px -2px oklch(0 0 0 / 0.05);
+}
+.light .overflowing td:last-of-type.action-col,
+.light .overflowing th:last-of-type.action-col {
+  box-shadow: -6px 0 8px -2px oklch(0 0 0 / 0.05);
 }
 
 /*
   Stops shadow from overflowing below
-  -1px helps with a visual glitch when a bit
-  underneath shows through
 */
 .scrolled td:first-of-type,
 .scrolled th:first-of-type {
-  clip-path: inset(0px -40px 0px -1px);
+  clip-path: inset(0px -40px 0px 0px);
 }
 .overflowing td:last-of-type.action-col,
 .overflowing th:last-of-type.action-col {
-  clip-path: inset(0px -1px 0px -40px);
-}
-
-.scrolled td:first-of-type:before,
-.scrolled th:first-of-type:before {
-  @apply border-r-secondary absolute top-0 right-0 bottom-0 border-r content-[''];
+  clip-path: inset(0px 0px 0px -40px);
 }
 
 .simplebar-scrollbar {
diff --git a/app/ui/styles/components/tooltip.css b/app/ui/styles/components/tooltip.css
index ebaa86e5de..ad13b7b8b9 100644
--- a/app/ui/styles/components/tooltip.css
+++ b/app/ui/styles/components/tooltip.css
@@ -7,7 +7,7 @@
  */
 
 .ox-tooltip {
-  @apply text-sans-md text-default bg-raise border-secondary elevation-2 rounded-md border p-2;
+  @apply text-sans-md text-default bg-raise shadow-tooltip rounded-md p-2;
 }
 
 .ox-tooltip-arrow {
diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index 6c39b7811d..66e93a470a 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.css
@@ -47,6 +47,7 @@
 
 @import '@xterm/xterm/css/xterm.css' layer(components);
 @source '../../../node_modules/@oxide/design-system/dist';
+@custom-variant light (&:where([data-theme=light], [data-theme=light] *));
 
 @theme {
   --animate-spin-slow: spin 5s linear infinite;
diff --git a/index.html b/index.html
index 0e190e3691..1f7576208b 100644
--- a/index.html
+++ b/index.html
@@ -13,10 +13,23 @@
     <title>Oxide Console</title>
 
     <meta name="viewport" content="width=1050" />
-    <meta name="color-scheme" content="dark" />
+    <meta name="color-scheme" content="dark light" />
 
     <link rel="icon" type="image/svg+xml" href="./app/assets/favicon.svg" />
     <link rel="icon" type="image/png" href="./app/assets/favicon.png" />
+
+    <!-- Set theme before first paint to prevent flash. Mirrors logic in app/stores/theme.ts. -->
+    <script>
+      ;(function () {
+        var p = 'dark'
+        try {
+          p = localStorage.getItem('theme-preference') || 'dark'
+        } catch (e) {}
+        if (p === 'system')
+          p = matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+        document.documentElement.dataset.theme = p
+      })()
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package-lock.json b/package-lock.json
index 9a68ecd67d..192324395f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,9 +10,10 @@
       "hasInstallScript": true,
       "license": "MPL-2.0",
       "dependencies": {
+        "@base-ui/react": "^1.1.0",
         "@floating-ui/react": "^0.26.23",
         "@headlessui/react": "^2.2.9",
-        "@oxide/design-system": "^4.1.0",
+        "@oxide/design-system": "^5.0.0--canary.163.21985709465.0",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-tabs": "^1.1.0",
@@ -262,13 +263,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
@@ -321,6 +319,60 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@base-ui/react": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.1.0.tgz",
+      "integrity": "sha512-ikcJRNj1mOiF2HZ5jQHrXoVoHcNHdBU5ejJljcBl+VTLoYXR6FidjTN86GjO6hyshi6TZFuNvv0dEOgaOFv6Lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@base-ui/utils": "0.2.4",
+        "@floating-ui/react-dom": "^2.1.6",
+        "@floating-ui/utils": "^0.2.10",
+        "reselect": "^5.1.1",
+        "tabbable": "^6.4.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17 || ^18 || ^19",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@base-ui/utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.4.tgz",
+      "integrity": "sha512-smZwpMhjO29v+jrZusBSc5T+IJ3vBb9cjIiBjtKcvWmRj9Z4DWGVR3efr1eHR56/bqY5a4qyY9ElkOY5ljo3ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "@floating-ui/utils": "^0.2.10",
+        "reselect": "^5.1.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17 || ^18 || ^19",
+        "react": "^17 || ^18 || ^19",
+        "react-dom": "^17 || ^18 || ^19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@bundled-es-modules/cookie": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz",
@@ -1565,9 +1617,9 @@
       "license": "MIT"
     },
     "node_modules/@oxide/design-system": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-4.1.0.tgz",
-      "integrity": "sha512-sFNgDf8B8Yial+3uYTfrBaQOT+2BNUlzBgubsHM88m5MMMhjNfPktGZTYy7PtGdYjzkLKSFXWYEjq248l/1MQg==",
+      "version": "5.0.0--canary.163.21985709465.0",
+      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-5.0.0--canary.163.21985709465.0.tgz",
+      "integrity": "sha512-KGXXMmw5V1B6VQdrDB0ughO74lWd73KmyLd1KMDFd1niodPB1LVBnocCD1nK9wA1+lyed0a1eUMZGBgIRyA4fg==",
       "license": "MPL 2.0",
       "dependencies": {
         "@floating-ui/react": "^0.27.16",
@@ -11720,12 +11772,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz",
@@ -11804,6 +11850,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -12406,9 +12458,9 @@
       "license": "MIT"
     },
     "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
+      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
       "license": "MIT"
     },
     "node_modules/tagged-tag": {
diff --git a/package.json b/package.json
index 5df46b5fe6..6bcceeb51c 100644
--- a/package.json
+++ b/package.json
@@ -35,9 +35,10 @@
   },
   "private": true,
   "dependencies": {
+    "@base-ui/react": "^1.1.0",
     "@floating-ui/react": "^0.26.23",
     "@headlessui/react": "^2.2.9",
-    "@oxide/design-system": "^4.1.0",
+    "@oxide/design-system": "^5.0.0--canary.163.21985709465.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-tabs": "^1.1.0",