diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index 82362feb14..2f00aff171 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -48,8 +48,8 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
         <Info16Icon aria-label="Links to docs" className="shrink-0" />
       </PopoverButton>
       <PopoverPanel
-        // DocsPopoverPanel needed for enter animation
-        className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
+        // popover-panel needed for enter animation
+        className="popover-panel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
diff --git a/app/components/InstanceAutoRestartPopover.tsx b/app/components/InstanceAutoRestartPopover.tsx
new file mode 100644
index 0000000000..daca276832
--- /dev/null
+++ b/app/components/InstanceAutoRestartPopover.tsx
@@ -0,0 +1,150 @@
+/*
+ * 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 { CloseButton, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import cn from 'classnames'
+import { formatDistanceToNow } from 'date-fns'
+import { useState, type ReactNode } from 'react'
+import { Link } from 'react-router'
+
+import {
+  AutoRestart12Icon,
+  NextArrow12Icon,
+  OpenLink12Icon,
+} from '@oxide/design-system/icons/react'
+
+import type { InstanceAutoRestartPolicy } from '~/api'
+import { HL } from '~/components/HL'
+import { useInstanceSelector } from '~/hooks/use-params'
+import { Badge } from '~/ui/lib/Badge'
+import { Spinner } from '~/ui/lib/Spinner'
+import { useInterval } from '~/ui/lib/use-interval'
+import { pb } from '~/util/path-builder'
+
+const helpText = {
+  enabled: (
+    <>
+      The control plane will attempt to automatically restart instance this instance after
+      entering the <HL>failed</HL> state.
+    </>
+  ),
+  disabled: (
+    <>
+      The control plane will not attempt to automatically restart it after entering the{' '}
+      <HL>failed</HL> state.
+    </>
+  ),
+  never: (
+    <>
+      Instance auto-restart policy is set to never. The control plane will not attempt to
+      automatically restart it after entering the <HL>failed</HL> state.
+    </>
+  ),
+  starting: (
+    <>
+      Instance auto-restart policy is queued to start. The control plane will begin the
+      restart process shortly.
+    </>
+  ),
+}
+
+export const InstanceAutoRestartPopover = ({
+  enabled,
+  policy,
+  cooldownExpiration,
+}: {
+  enabled: boolean
+  policy?: InstanceAutoRestartPolicy
+  cooldownExpiration: Date | undefined
+}) => {
+  const instanceSelector = useInstanceSelector()
+  const [now, setNow] = useState(new Date())
+
+  useInterval({ fn: () => setNow(new Date()), delay: 1000 })
+
+  const isQueued = cooldownExpiration && new Date(cooldownExpiration) < now
+
+  let helpTextState: keyof typeof helpText = 'disabled'
+  if (isQueued) helpTextState = 'starting' // Expiration is in the past and queued for restart
+  if (policy === 'never') helpTextState = 'never' // Will never auto-restart
+  if (enabled) helpTextState = 'enabled' // Restart enabled and cooldown as not expired
+
+  return (
+    <Popover>
+      <PopoverButton className="group flex h-6 w-6 items-center justify-center rounded border border-default hover:bg-hover">
+        <AutoRestart12Icon
+          className={cn('shrink-0 transition-transform', enabled && 'animate-spin-slow')}
+        />
+      </PopoverButton>
+      <PopoverPanel
+        // popover-panel needed for enter animation
+        className="popover-panel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
+        anchor={{ to: 'bottom start', gap: 12 }}
+      >
+        <PopoverRow label="Auto Restart">
+          {enabled ? <Badge>Enabled</Badge> : <Badge color="neutral">Disabled</Badge>}
+        </PopoverRow>
+        <PopoverRow label="Policy">
+          <CloseButton
+            as={Link}
+            to={pb.instanceSettings(instanceSelector)}
+            className="group -m-1 flex w-full items-center justify-between rounded px-1"
+          >
+            {policy ? (
+              policy === 'never' ? (
+                <Badge color="neutral" variant="solid">
+                  never
+                </Badge>
+              ) : (
+                <Badge>best effort</Badge>
+              )
+            ) : (
+              <Badge color="neutral">Default</Badge>
+            )}
+            <div className="transition-transform group-hover:translate-x-1">
+              <NextArrow12Icon />
+            </div>
+          </CloseButton>
+        </PopoverRow>
+        {cooldownExpiration && (
+          <PopoverRow label="Cooldown">
+            {isQueued ? (
+              <>
+                <Spinner /> Queued for restart…
+              </>
+            ) : (
+              <div>
+                Waiting{' '}
+                <span className="text-tertiary">
+                  ({formatDistanceToNow(cooldownExpiration)})
+                </span>
+              </div>
+            )}
+          </PopoverRow>
+        )}
+        <div className="p-3 text-sans-md text-default">
+          <p className="mb-2 pr-4">{helpText[helpTextState]}</p>
+          <a href="/">
+            <span className="inline-block max-w-[300px] truncate align-middle">
+              Learn about <span className="text-raise">Instance Auto-Restart</span>
+            </span>
+            <OpenLink12Icon className="ml-1 translate-y-[1px] text-secondary" />
+          </a>
+        </div>
+      </PopoverPanel>
+    </Popover>
+  )
+}
+
+const PopoverRow = ({ label, children }: { label: string; children: ReactNode }) => (
+  <div className="flex h-10 items-center border-b border-b-secondary">
+    <div className="w-32 pl-3 pr-2 text-mono-sm text-tertiary">{label}</div>
+    <div className="flex h-10 flex-grow items-center gap-1.5 pr-2 text-sans-md">
+      {children}
+    </div>
+  </div>
+)
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 22acc7c97e..d882615bdb 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -29,6 +29,7 @@ import {
 import { ExternalIps } from '~/components/ExternalIps'
 import { NumberField } from '~/components/form/fields/NumberField'
 import { HL } from '~/components/HL'
+import { InstanceAutoRestartPopover } from '~/components/InstanceAutoRestartPopover'
 import { InstanceDocsPopover } from '~/components/InstanceDocsPopover'
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { RefreshButton } from '~/components/RefreshButton'
@@ -168,6 +169,9 @@ export function InstancePage() {
 
   const memory = filesize(instance.memory, { output: 'object', base: 2 })
 
+  // Document when this popover is showing
+  const hasAutoRestart = !!instance.autoRestartCooldownExpiration
+
   return (
     <>
       <PageHeader>
@@ -203,7 +207,7 @@ export function InstancePage() {
             <span className="ml-1 text-tertiary"> {memory.unit}</span>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="state">
-            <div className="flex">
+            <div className="flex items-center gap-2">
               <InstanceStateBadge state={instance.runState} />
               {polling && (
                 <Tooltip content="Auto-refreshing while state changes" delay={150}>
@@ -212,6 +216,13 @@ export function InstancePage() {
                   </button>
                 </Tooltip>
               )}
+              {hasAutoRestart && (
+                <InstanceAutoRestartPopover
+                  enabled={instance.autoRestartEnabled}
+                  cooldownExpiration={instance.autoRestartCooldownExpiration}
+                  policy={instance.autoRestartPolicy}
+                />
+              )}
             </div>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="vpc">
@@ -241,6 +252,7 @@ export function InstancePage() {
         <Tab to={pb.instanceMetrics(instanceSelector)}>Metrics</Tab>
         <Tab to={pb.instanceNetworking(instanceSelector)}>Networking</Tab>
         <Tab to={pb.instanceConnect(instanceSelector)}>Connect</Tab>
+        <Tab to={pb.instanceSettings(instanceSelector)}>Settings</Tab>
       </RouteTabs>
       {resizeInstance && (
         <ResizeInstanceModal
diff --git a/app/pages/project/instances/instance/tabs/SettingsTab.tsx b/app/pages/project/instances/instance/tabs/SettingsTab.tsx
new file mode 100644
index 0000000000..90a89dbe54
--- /dev/null
+++ b/app/pages/project/instances/instance/tabs/SettingsTab.tsx
@@ -0,0 +1,166 @@
+/*
+ * 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 { format, formatDistanceToNow } from 'date-fns'
+import { useId, useState, type ReactNode } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { apiQueryClient, useApiMutation, usePrefetchedApiQuery } from '~/api'
+import { ListboxField } from '~/components/form/fields/ListboxField'
+import { useInstanceSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
+import { Button } from '~/ui/lib/Button'
+import { FieldLabel } from '~/ui/lib/FieldLabel'
+import { LearnMore, SettingsGroup } from '~/ui/lib/SettingsGroup'
+import { TipIcon } from '~/ui/lib/TipIcon'
+import { useInterval } from '~/ui/lib/use-interval'
+import { links } from '~/util/links'
+
+Component.displayName = 'SettingsTab'
+export function Component() {
+  const instanceSelector = useInstanceSelector()
+
+  const [now, setNow] = useState(new Date())
+
+  useInterval({ fn: () => setNow(new Date()), delay: 1000 })
+
+  const { data: instance } = usePrefetchedApiQuery('instanceView', {
+    path: { instance: instanceSelector.instance },
+    query: { project: instanceSelector.project },
+  })
+
+  const instanceUpdate = useApiMutation('instanceUpdate', {
+    onSuccess() {
+      apiQueryClient.invalidateQueries('instanceView')
+      addToast({ content: 'Instance auto-restart policy updated' })
+    },
+  })
+
+  const form = useForm({
+    defaultValues: {
+      autoRestartPolicy: instance.autoRestartPolicy,
+    },
+  })
+  const { isDirty } = form.formState
+
+  const onSubmit = form.handleSubmit((values) => {
+    instanceUpdate.mutate({
+      path: { instance: instanceSelector.instance },
+      query: { project: instanceSelector.project },
+      body: {
+        ncpus: instance.ncpus,
+        memory: instance.memory,
+        bootDisk: instance.bootDiskId,
+        autoRestartPolicy: values.autoRestartPolicy,
+      },
+    })
+  })
+
+  return (
+    <form className="space-y-6" onSubmit={onSubmit}>
+      <SettingsGroup.Container>
+        <SettingsGroup.Header>
+          <SettingsGroup.Title>Auto-restart</SettingsGroup.Title>
+          <p>The auto-restart policy configured for this instance</p>
+        </SettingsGroup.Header>
+        <SettingsGroup.Body>
+          <ListboxField
+            control={form.control}
+            name="autoRestartPolicy"
+            label="Policy"
+            description="If unconfigured, this instance uses the default auto-restart policy, which may or may not allow it to be restarted."
+            placeholder="Default"
+            items={[
+              { value: '', label: 'Default' },
+              { value: 'never', label: 'Never' },
+              { value: 'best_effort', label: 'Best effort' },
+            ]}
+            required
+            className="max-w-none"
+          />
+          <FormMeta
+            label="Enabled"
+            helpText="If enabled this instance will automatically restart it if it enters the Failed state."
+          >
+            {instance.autoRestartEnabled ? 'True' : 'False'}{' '}
+            {instance.autoRestartEnabled && !instance.autoRestartPolicy && (
+              <span className="text-tertiary">(Project default)</span>
+            )}
+          </FormMeta>
+          <FormMeta
+            label="Cooldown expiration"
+            helpText="The time at which the auto-restart cooldown period for this instance completes. If n/a, then either the instance has never been automatically restarted, or the cooldown period has already expired"
+          >
+            {instance.autoRestartCooldownExpiration ? (
+              <>
+                {format(
+                  new Date(instance.autoRestartCooldownExpiration),
+                  'MMM d, yyyy HH:mm:ss zz'
+                )}{' '}
+                {new Date(instance.autoRestartCooldownExpiration) > now && (
+                  <span className="text-tertiary">
+                    ({formatDistanceToNow(new Date(instance.autoRestartCooldownExpiration))}
+                    )
+                  </span>
+                )}
+              </>
+            ) : (
+              <span className="text-tertiary">n/a</span>
+            )}
+          </FormMeta>
+          <FormMeta
+            label="Last auto-restarted"
+            helpText="When this instance was last automatically restarted. Empty if never auto-restarted."
+          >
+            {instance.timeLastAutoRestarted ? (
+              <>
+                {format(
+                  new Date(instance.timeLastAutoRestarted),
+                  'MMM d, yyyy HH:mm:ss zz'
+                )}
+              </>
+            ) : (
+              <span className="text-tertiary">n/a</span>
+            )}
+          </FormMeta>
+        </SettingsGroup.Body>
+        <SettingsGroup.Footer>
+          <div>
+            <LearnMore text="Auto-Restart" href={links.sshDocs} />
+          </div>
+          <Button size="sm" type="submit" disabled={!isDirty}>
+            Save
+          </Button>
+        </SettingsGroup.Footer>
+      </SettingsGroup.Container>
+    </form>
+  )
+}
+
+const FormMeta = ({
+  label,
+  helpText,
+  children,
+}: {
+  label: string
+  helpText?: string
+  children: ReactNode
+}) => {
+  const id = useId()
+  return (
+    <div>
+      <div className="mb-2 flex items-center gap-1 border-b pb-2 border-secondary">
+        <FieldLabel id={`${id}-label`} htmlFor={id}>
+          {label}
+        </FieldLabel>
+        {helpText && <TipIcon>{helpText}</TipIcon>}
+      </div>
+      {children}
+    </div>
+  )
+}
diff --git a/app/routes.tsx b/app/routes.tsx
index 780e603b5c..d71ffea989 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -62,6 +62,7 @@ import * as SerialConsole from './pages/project/instances/instance/SerialConsole
 import * as ConnectTab from './pages/project/instances/instance/tabs/ConnectTab'
 import * as MetricsTab from './pages/project/instances/instance/tabs/MetricsTab'
 import * as NetworkingTab from './pages/project/instances/instance/tabs/NetworkingTab'
+import * as SettingsTab from './pages/project/instances/instance/tabs/SettingsTab'
 import * as StorageTab from './pages/project/instances/instance/tabs/StorageTab'
 import { InstancesPage } from './pages/project/instances/InstancesPage'
 import { SnapshotsPage } from './pages/project/snapshots/SnapshotsPage'
@@ -295,6 +296,7 @@ export const routes = createRoutesFromElements(
                 />
                 <Route {...MetricsTab} path="metrics" handle={{ crumb: 'Metrics' }} />
                 <Route {...ConnectTab} path="connect" handle={{ crumb: 'Connect' }} />
+                <Route {...SettingsTab} path="settings" handle={{ crumb: 'Settings' }} />
               </Route>
             </Route>
           </Route>
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index a6cf724d3c..f70954c30c 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -35,7 +35,7 @@ export function Content({ className, children, anchor = 'bottom end', gap }: Con
       anchor={anchor}
       // goofy gap because tailwind hates string interpolation
       className={cn(
-        'DropdownMenuContent elevation-2',
+        'dropdown-menu-content elevation-2',
         gap === 8 && `[--anchor-gap:8px]`,
         className
       )}
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
index 6cd7af0106..c1617bb758 100644
--- a/app/ui/lib/Listbox.tsx
+++ b/app/ui/lib/Listbox.tsx
@@ -82,7 +82,7 @@ export const Listbox = <Value extends string = string>({
         {({ open }) => (
           <>
             {label && (
-              <div className="mb-2">
+              <div className="mb-2 max-w-lg">
                 <FieldLabel
                   id={`${id}-label`}
                   htmlFor={id}
diff --git a/app/ui/lib/SettingsGroup.tsx b/app/ui/lib/SettingsGroup.tsx
index b26f4a7cfb..65c99fcc23 100644
--- a/app/ui/lib/SettingsGroup.tsx
+++ b/app/ui/lib/SettingsGroup.tsx
@@ -28,7 +28,9 @@ export const LearnMore = ({ href, text }: { href: string; text: React.ReactNode
 /** Use size=sm on buttons and links! */
 export const SettingsGroup = {
   Container: classed.div`w-full max-w-[660px] rounded-lg border text-sans-md text-default border-default`,
-  Body: classed.div`p-6`,
+  Header: classed.div`border-b px-6 py-5 border-default`,
+  Body: classed.div`p-6 space-y-5`,
   Title: classed.div`mb-1 text-sans-lg text-raise`,
-  Footer: classed.div`flex items-center justify-between border-t px-6 py-3 border-default h-14`,
+  Description: classed.div`text-sans-md text-default`,
+  Footer: classed.div`flex items-center justify-between border-t px-6 py-4 border-default min-h-14`,
 }
diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index b9f3617b19..93b01b36b9 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
-.DropdownMenuContent {
+.dropdown-menu-content {
   /* we want menu popover to be on top of top bar and pagination bar too */
   @apply z-topBarDropdown min-w-36 rounded border p-0 bg-raise border-secondary;
 
@@ -43,14 +43,14 @@
   }
 }
 
-.DropdownMenuContent,
-.DocsPopoverPanel {
+.dropdown-menu-content,
+.popover-panel {
   animation: slide-down 0.2s var(--ease-out-quad);
 }
 
 @media (prefers-reduced-motion) {
-  .DropdownMenuContent,
-  .DocsPopoverPanel {
+  .dropdown-menu-content,
+  .popover-panel {
     animation-name: none;
   }
 }
diff --git a/app/util/__snapshots__/path-builder.spec.ts.snap b/app/util/__snapshots__/path-builder.spec.ts.snap
index 7142b88c84..0682007ae5 100644
--- a/app/util/__snapshots__/path-builder.spec.ts.snap
+++ b/app/util/__snapshots__/path-builder.spec.ts.snap
@@ -171,6 +171,28 @@ exports[`breadcrumbs 2`] = `
       "path": "/projects/p/instances/i/networking",
     },
   ],
+  "instanceSettings (/projects/p/instances/i/settings)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Instances",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "i",
+      "path": "/projects/p/instances/i/storage",
+    },
+    {
+      "label": "Settings",
+      "path": "/projects/p/instances/i/settings",
+    },
+  ],
   "instanceStorage (/projects/p/instances/i/storage)": [
     {
       "label": "Projects",
diff --git a/app/util/path-builder.spec.ts b/app/util/path-builder.spec.ts
index e81423bb4f..f094d10312 100644
--- a/app/util/path-builder.spec.ts
+++ b/app/util/path-builder.spec.ts
@@ -50,6 +50,7 @@ test('path builder', () => {
         "instanceConnect": "/projects/p/instances/i/connect",
         "instanceMetrics": "/projects/p/instances/i/metrics",
         "instanceNetworking": "/projects/p/instances/i/networking",
+        "instanceSettings": "/projects/p/instances/i/settings",
         "instanceStorage": "/projects/p/instances/i/storage",
         "instances": "/projects/p/instances",
         "instancesNew": "/projects/p/instances-new",
diff --git a/app/util/path-builder.ts b/app/util/path-builder.ts
index 5b5ab823f9..d227511a18 100644
--- a/app/util/path-builder.ts
+++ b/app/util/path-builder.ts
@@ -44,6 +44,7 @@ export const pb = {
   instanceConnect: (params: PP.Instance) => `${instanceBase(params)}/connect`,
   instanceNetworking: (params: PP.Instance) => `${instanceBase(params)}/networking`,
   serialConsole: (params: PP.Instance) => `${instanceBase(params)}/serial-console`,
+  instanceSettings: (params: PP.Instance) => `${instanceBase(params)}/settings`,
 
   disksNew: (params: PP.Project) => `${projectBase(params)}/disks-new`,
   disks: (params: PP.Project) => `${projectBase(params)}/disks`,
diff --git a/mock-api/instance.ts b/mock-api/instance.ts
index c274e1f16c..3f93b6a4f5 100644
--- a/mock-api/instance.ts
+++ b/mock-api/instance.ts
@@ -42,6 +42,8 @@ const failedInstance: Json<Instance> = {
   hostname: 'oxide.com',
   project_id: project.id,
   run_state: 'failed',
+  auto_restart_cooldown_expiration: new Date(Date.now() + 5 * 60 * 1000).toISOString(), // 5 mins in the future
+  time_last_auto_restarted: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(), // one month ago
 }
 
 const startingInstance: Json<Instance> = {
diff --git a/mock-api/msw/handlers.ts b/mock-api/msw/handlers.ts
index 376ad49714..36e0e7a263 100644
--- a/mock-api/msw/handlers.ts
+++ b/mock-api/msw/handlers.ts
@@ -584,7 +584,23 @@ export const handlers = makeHandlers({
 
     return json(newInstance, { status: 201 })
   },
-  instanceView: ({ path, query }) => lookup.instance({ ...path, ...query }),
+  instanceView: ({ path, query }) => {
+    const instance = lookup.instance({ ...path, ...query })
+
+    // if empty uses default auto-restart behaviour
+    // if set, is based off of the policy
+    // https://github.com/oxidecomputer/omicron/blob/f63ed095e744fb8d2383fda6799eb0b2d6dfbd3c/nexus/db-queries/src/db/datastore/instance.rs#L228C26-L239
+    if (instance.auto_restart_policy === 'never') {
+      instance.auto_restart_enabled = false
+    } else if (
+      instance.auto_restart_policy === 'best_effort' ||
+      !instance.auto_restart_policy // included for posterity but this has to be set in the mock data anyway
+    ) {
+      instance.auto_restart_enabled = true
+    }
+
+    return instance
+  },
   instanceUpdate({ path, query, body }) {
     const instance = lookup.instance({ ...path, ...query })
 
@@ -613,6 +629,10 @@ export const handlers = makeHandlers({
       instance.boot_disk_id = undefined
     }
 
+    if (body.auto_restart_policy !== undefined) {
+      instance.auto_restart_policy = body.auto_restart_policy
+    }
+
     // always present on the body, always set them
     instance.ncpus = body.ncpus
     instance.memory = body.memory
diff --git a/package-lock.json b/package-lock.json
index f646265b4d..a56de5dfb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
       "dependencies": {
         "@floating-ui/react": "^0.26.23",
         "@headlessui/react": "^2.2.0",
-        "@oxide/design-system": "^3.0.0",
+        "@oxide/design-system": "^2.1.0",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-focus-guards": "1.0.1",
@@ -1547,9 +1547,9 @@
       "license": "MIT"
     },
     "node_modules/@oxide/design-system": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-3.0.0.tgz",
-      "integrity": "sha512-GB35TIZXD4zEjQjoYKvJqBPuuABD76QJr1pP+huJHKixrQY1UO83DZeqSNBQ6ifdBTTMqLtgHDxcroHLM7BXTQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-2.1.0.tgz",
+      "integrity": "sha512-aQpD+vZQIgkBzi9jcX35m1z1milAf4PzewVH9FlMMGniwUNCXw6G6KT8t3Unnwy3egUQ/qvhdQqm9VSdoDQwsA==",
       "license": "MPL 2.0",
       "dependencies": {
         "@floating-ui/react": "^0.25.1",
diff --git a/package.json b/package.json
index a1ed316fb4..0544ff0e31 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.23",
     "@headlessui/react": "^2.2.0",
-    "@oxide/design-system": "^3.0.0",
+    "@oxide/design-system": "^2.1.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-focus-guards": "1.0.1",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4203962afd..e68c978a34 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -61,6 +61,9 @@ export default {
       transparent: 'transparent',
       current: 'currentColor',
     },
+    animation: {
+      'spin-slow': 'spin 5s linear infinite',
+    },
   },
   plugins: [
     plugin(({ addVariant, addUtilities }) => {