diff --git a/.github/workflows/upload-assets.yaml b/.github/workflows/upload-assets.yaml
index 8b2dfadb9..d3e81ab2c 100644
--- a/.github/workflows/upload-assets.yaml
+++ b/.github/workflows/upload-assets.yaml
@@ -25,7 +25,7 @@ jobs:
           cache: 'yarn'
       - run: yarn install
       - name: Build for Nexus
-        run: yarn build-for-nexus
+        run: SHA=${{ github.sha }} yarn build-for-nexus
       - run: mkdir -p releases/console
       - name: Make <sha>.tar.gz
         run: tar czf releases/console/${{ github.sha }}.tar.gz --directory=dist .
diff --git a/OMICRON_VERSION b/OMICRON_VERSION
index 40116ffe3..e162c681d 100644
--- a/OMICRON_VERSION
+++ b/OMICRON_VERSION
@@ -1 +1 @@
-af1049c5f72cc91c4ce89650b74d92c9e26484a6
\ No newline at end of file
+154a4a6cd623497cbe893c2cd3ea1c241516bc21
\ No newline at end of file
diff --git a/app/components/Breadcrumbs.e2e.tsx b/app/components/Breadcrumbs.e2e.tsx
index 245edc466..47a8152da 100644
--- a/app/components/Breadcrumbs.e2e.tsx
+++ b/app/components/Breadcrumbs.e2e.tsx
@@ -8,9 +8,11 @@ type Crumb = {
 
 async function expectCrumbs(page: Page, crumbs: Crumb[]) {
   const crumbsInPage = page.locator(`data-testid=Breadcrumbs >> role=listitem`)
-  await expect(crumbsInPage).toHaveCount(crumbs.length)
+  // crumbs should be shorter by one
+  // since that is the page we are already on
+  await expect(crumbsInPage).toHaveCount(Math.max(crumbs.length - 1, 0)) // unmatched route should = 0 not -1
 
-  for (let i = 0; i < crumbs.length; i++) {
+  for (let i = 0; i < crumbs.length - 1; i++) {
     const { text, href } = crumbs[i]
     const listItem = crumbsInPage.nth(i)
     await expect(listItem).toHaveText(text)
@@ -23,19 +25,15 @@ async function expectCrumbs(page: Page, crumbs: Crumb[]) {
   }
 }
 
+async function expectTitle(page: Page, title: string) {
+  expect(await page.title()).toEqual(title)
+}
+
 test.describe('Breadcrumbs', () => {
   test('not present on unmatched route', async ({ page }) => {
     await page.goto('/abc/def')
     await expectCrumbs(page, [])
-  })
-
-  test('work on new project', async ({ page }) => {
-    await page.goto('/orgs/maze-war/projects/new')
-    await expectCrumbs(page, [
-      { text: 'maze-war', href: '/orgs/maze-war' },
-      { text: 'Projects', href: '/orgs/maze-war/projects' },
-      { text: 'Create project' },
-    ])
+    await expectTitle(page, 'Oxide Console')
   })
 
   test('works on VPC detail', async ({ page }) => {
@@ -53,5 +51,10 @@ test.describe('Breadcrumbs', () => {
       },
       { text: 'mock-vpc' },
     ])
+
+    await expectTitle(
+      page,
+      'mock-vpc / VPCs / mock-project / Projects / maze-war / Oxide Console'
+    )
   })
 })
diff --git a/app/components/Breadcrumbs.tsx b/app/components/Breadcrumbs.tsx
index dd41210d0..a4a57423b 100644
--- a/app/components/Breadcrumbs.tsx
+++ b/app/components/Breadcrumbs.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { useMatches } from 'react-router-dom'
 import invariant from 'tiny-invariant'
 import type { Merge, SetRequired } from 'type-fest'
@@ -26,12 +27,27 @@ const useCrumbs = () =>
     // hasCrumb could be inline (m) => m.handle?.crumb, but it's extracted so we can
     // give it a guard type so the typing is nice around filter()
     .filter(hasCrumb)
-    .map((m, i, arr) => ({
+    .map((m) => ({
       label: typeof m.handle.crumb === 'function' ? m.handle.crumb(m) : m.handle.crumb,
-      // last one is the page we're on, so no link
-      href: i < arr.length - 1 ? m.pathname : undefined,
+      href: m.pathname,
     }))
 
 export function Breadcrumbs() {
-  return <BreadcrumbsPure data={useCrumbs()} />
+  const crumbs = useCrumbs()
+  // output
+  // non top-level route: Instances / mock-project / Projects / maze-war / Oxide Console
+  // top-level route: Oxide Console
+  const title = crumbs
+    .slice() // avoid mutating original with reverse()
+    .reverse()
+    .map((item) => item.label)
+    .concat('Oxide Console')
+    .join(' / ')
+
+  useEffect(() => {
+    document.title = title
+  }, [title])
+
+  // remove last crumb which is the page we are on
+  return <BreadcrumbsPure data={crumbs.slice(0, -1)} />
 }
diff --git a/app/components/FormPage.tsx b/app/components/FormPage.tsx
index 727bb2742..ec91740ca 100644
--- a/app/components/FormPage.tsx
+++ b/app/components/FormPage.tsx
@@ -1,29 +1,20 @@
 import React, { Suspense } from 'react'
 import { useNavigate } from 'react-router-dom'
 
-import { PageHeader, PageTitle } from '@oxide/ui'
-
 interface FormPageProps {
-  Form: React.ComponentType<{
-    onSuccess: (data: { name: string }) => void
-  }>
+  // TODO: This obviously shouldn't be any, but the lower form types are fucked
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Form: React.ComponentType<any>
   goToCreatedPage?: boolean
-  title: string
-  icon?: React.ReactElement
 }
 
-export function FormPage({ Form, title, icon, goToCreatedPage = true }: FormPageProps) {
+export function FormPage({ Form, goToCreatedPage = true }: FormPageProps) {
   const navigate = useNavigate()
   return (
     // TODO: Add a proper loading state
     <Suspense fallback={null}>
-      {title && (
-        <PageHeader>
-          <PageTitle icon={icon}>{title}</PageTitle>
-        </PageHeader>
-      )}
       <Form
-        onSuccess={(data) =>
+        onSuccess={(data: { name: string }) =>
           goToCreatedPage ? navigate(`../${data.name}`) : navigate('..')
         }
       />
diff --git a/app/components/MoreActionsMenu.tsx b/app/components/MoreActionsMenu.tsx
index fdabe1564..349616ded 100644
--- a/app/components/MoreActionsMenu.tsx
+++ b/app/components/MoreActionsMenu.tsx
@@ -11,12 +11,20 @@ interface MoreActionsMenuProps {
 export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
   return (
     <Menu>
-      <MenuButton aria-label={label}>
+      <MenuButton
+        aria-label={label}
+        className="w-6 h-6 border border-default flex rounded items-center justify-center hover:bg-hover"
+      >
         <More12Icon className="text-tertiary" />
       </MenuButton>
-      <MenuList>
+      <MenuList className="mt-2">
         {actions.map((a) => (
-          <MenuItem disabled={a.disabled} key={a.label} onSelect={a.onActivate}>
+          <MenuItem
+            className={a.className}
+            disabled={a.disabled}
+            key={a.label}
+            onSelect={a.onActivate}
+          >
             {a.label}
           </MenuItem>
         ))}
diff --git a/app/components/PageActions.tsx b/app/components/PageActions.tsx
new file mode 100644
index 000000000..5d3eecfd1
--- /dev/null
+++ b/app/components/PageActions.tsx
@@ -0,0 +1,6 @@
+import { tunnel } from '@oxide/util'
+
+const Tunnel = tunnel('page-actions')
+
+export const PageActions = Tunnel.In
+export const PageActionsTarget = Tunnel.Out
diff --git a/app/components/ProjectSelector.tsx b/app/components/ProjectSelector.tsx
index 094a1a8a1..344ecb86d 100644
--- a/app/components/ProjectSelector.tsx
+++ b/app/components/ProjectSelector.tsx
@@ -1,8 +1,11 @@
-import cn from 'classnames'
-import { useParams as useRRParams } from 'react-router-dom'
+import { Menu, MenuButton, MenuItem, MenuLink, MenuList } from '@reach/menu-button'
+import { Link } from 'react-router-dom'
 
+import { useApiQuery } from '@oxide/api'
 import { SelectArrows6Icon } from '@oxide/ui'
 
+import { useParams } from 'app/hooks'
+
 /**
  * This is mostly temporary until we figure out the proper thing to go here
  */
@@ -18,21 +21,56 @@ const BrandIcon = () => (
   </svg>
 )
 
-interface ProjectSelectorProps {
-  className?: string
-}
-export const ProjectSelector = ({ className }: ProjectSelectorProps) => {
-  const { orgName, projectName } = useRRParams()
+export const ProjectSelector = () => {
+  const { orgName, projectName } = useParams('orgName')
+
+  const { data } = useApiQuery('organizationProjectsGet', { orgName, limit: 20 })
+
+  // filter out current project if there is one. if there isn't one, it'll be
+  // undefined and it won't match any
+  const projects = (data?.items || []).filter((p) => p.name !== projectName)
+
   return (
-    <div className={cn('mt-1 flex items-center justify-between', className)}>
-      <div className="flex items-center">
-        <BrandIcon />
-        <div className="ml-2 pb-0.5 leading-4 text-sans-sm">
-          <div>{orgName}</div>
-          <div className="text-secondary">{projectName || 'select a project'}</div>
+    <Menu>
+      <MenuButton
+        aria-label="Switch project"
+        className="mt-1 flex items-center justify-between w-full group"
+      >
+        <div className="flex items-center">
+          <BrandIcon />
+          <div className="ml-2 pb-0.5 leading-4 text-sans-sm text-left">
+            <div>{orgName}</div>
+            <div className="text-secondary w-[140px] text-ellipsis whitespace-nowrap overflow-hidden">
+              {projectName || 'select a project'}
+            </div>
+          </div>
+        </div>
+        {/* aria-hidden is a tip from the Reach docs */}
+        <div className="flex flex-shrink-0 w-[1.125rem] h-[1.625rem] rounded border border-secondary justify-center items-center group-hover:bg-hover">
+          <SelectArrows6Icon className="text-secondary" aria-hidden />
         </div>
-      </div>
-      <SelectArrows6Icon className="text-secondary" />
-    </div>
+      </MenuButton>
+      <MenuList className="mt-2">
+        {projects.length > 0 ? (
+          projects.map((project) => (
+            <MenuLink
+              key={project.name}
+              as={Link}
+              to={`/orgs/${orgName}/projects/${project.name}`}
+            >
+              {project.name}
+            </MenuLink>
+          ))
+        ) : (
+          <MenuItem
+            className="!text-center hover:cursor-default !pr-3 !text-secondary"
+            onSelect={() => {}}
+            disabled
+          >
+            No other projects found
+          </MenuItem>
+        )}
+      </MenuList>
+    </Menu>
   )
 }
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 7fb494df9..6435a5eb3 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -1,26 +1,29 @@
 import cn from 'classnames'
-import { NavLink as RRNavLink, useLocation } from 'react-router-dom'
+import { NavLink as RRNavLink } from 'react-router-dom'
 
-import { Document16Icon, Settings16Icon } from '@oxide/ui'
+import { Document16Icon } from '@oxide/ui'
+import { flattenChildren, pluckFirstOfType } from '@oxide/util'
+
+import { ProjectSelector } from 'app/components/ProjectSelector'
 
 interface SidebarProps {
   children: React.ReactNode
 }
 export function Sidebar({ children }: SidebarProps) {
-  const { pathname } = useLocation()
+  const childArray = flattenChildren(children)
+  const projectSelector = pluckFirstOfType(childArray, ProjectSelector)
+
   return (
-    <div className="ox-sidebar space-y-10 overflow-auto border-r px-3 pb-6 pt-5 text-sans-md text-default border-secondary">
-      {children}
-      <Sidebar.Footer>
-        <NavLinkItem to="https://docs.oxide.computer">
-          <Document16Icon /> Documentation
-        </NavLinkItem>
-        {!pathname.startsWith('/settings') && (
-          <NavLinkItem to="/settings">
-            <Settings16Icon /> Settings
+    <div className="ox-sidebar relative flex flex-col border-r px-3 pt-5 text-sans-md text-default border-secondary">
+      {projectSelector}
+      <div className="overflow-y-auto mt-10 flex flex-col flex-grow">
+        {childArray}
+        <Sidebar.Footer>
+          <NavLinkItem to="https://docs.oxide.computer">
+            <Document16Icon /> Documentation
           </NavLinkItem>
-        )}
-      </Sidebar.Footer>
+        </Sidebar.Footer>
+      </div>
     </div>
   )
 }
@@ -31,7 +34,7 @@ interface SidebarNav {
 }
 Sidebar.Nav = ({ children, heading }: SidebarNav) => {
   return (
-    <div className="mt-8 space-y-1">
+    <div className="ox-sidebar-nav space-y-1">
       {heading ? <span className="ml-2 text-mono-sm text-secondary">{heading}</span> : null}
       <nav>
         <ul className="space-y-0.5">{children}</ul>
@@ -45,8 +48,11 @@ interface SidebarFooter {
 }
 Sidebar.Footer = ({ children }: SidebarFooter) => {
   return (
-    // TODO: The `w-[12.5rem] is hand calculated and very likely isn't what we want. Do something better here
-    <ul className="absolute bottom-0 w-[12.5rem] space-y-0.5 pb-3">{children}</ul>
+    <ul className="ox-sidebar-footer w-full pb-3">
+      <span className="heading hidden ml-2 text-mono-sm text-secondary">More</span>
+
+      <div>{children}</div>
+    </ul>
   )
 }
 
diff --git a/app/components/StatusBadge.tsx b/app/components/StatusBadge.tsx
index 6a0866a3d..084738eb0 100644
--- a/app/components/StatusBadge.tsx
+++ b/app/components/StatusBadge.tsx
@@ -19,7 +19,7 @@ export const InstanceStatusBadge = (props: {
   status: InstanceState
   className?: string
 }) => (
-  <Badge variant="secondary" {...INSTANCE_COLORS[props.status]} className={props.className}>
+  <Badge variant="default" {...INSTANCE_COLORS[props.status]} className={props.className}>
     {props.status}
   </Badge>
 )
@@ -37,7 +37,7 @@ const DISK_COLORS: Record<DiskStateStr, BadgeColor> = {
 }
 
 export const DiskStatusBadge = (props: { status: DiskStateStr; className?: string }) => (
-  <Badge variant="secondary" color={DISK_COLORS[props.status]} className={props.className}>
+  <Badge variant="default" color={DISK_COLORS[props.status]} className={props.className}>
     {props.status}
   </Badge>
 )
diff --git a/app/components/Terminal.tsx b/app/components/Terminal.tsx
new file mode 100644
index 000000000..e6bca7c0d
--- /dev/null
+++ b/app/components/Terminal.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useRef, useState } from 'react'
+import type { ITerminalAddon, ITerminalOptions } from 'xterm'
+import { Terminal as XTerm } from 'xterm'
+import { FitAddon } from 'xterm-addon-fit'
+import 'xterm/css/xterm.css'
+
+interface TerminalProps {
+  data?: number[]
+  className?: string
+}
+
+const options: ITerminalOptions = {
+  allowTransparency: false,
+  screenReaderMode: true,
+  rendererType: 'dom',
+  fontFamily: '"GT America Mono", monospace',
+  fontSize: 14,
+  lineHeight: 1.2,
+  minimumContrastRatio: 21,
+  windowOptions: {
+    fullscreenWin: true,
+    refreshWin: true,
+  },
+}
+
+export const Terminal = ({ data, className }: TerminalProps) => {
+  const [term, setTerm] = useState<XTerm | null>(null)
+  const terminalRef = useRef(null)
+
+  useEffect(() => {
+    const style = getComputedStyle(document.body)
+    const newTerm = new XTerm({
+      theme: {
+        background: style.getPropertyValue('--surface-default'),
+        foreground: style.getPropertyValue('--content-default'),
+        black: style.getPropertyValue('--surface-default'),
+        brightBlack: style.getPropertyValue('--surface-secondary'),
+        white: style.getPropertyValue('--content-default'),
+        brightWhite: style.getPropertyValue('--content-secondary'),
+        blue: style.getPropertyValue('--base-blue-500'),
+        brightBlue: style.getPropertyValue('--base-blue-900'),
+        green: style.getPropertyValue('--content-success'),
+        brightGreen: style.getPropertyValue('--content-success-secondary'),
+        red: style.getPropertyValue('--content-error'),
+        brightRed: style.getPropertyValue('--content-error-secondary'),
+        yellow: style.getPropertyValue('--content-notice'),
+        brightYellow: style.getPropertyValue('--content-notice-secondary'),
+        cursor: style.getPropertyValue('--content-default'),
+        cursorAccent: style.getPropertyValue('--content-accent'),
+      },
+      ...options,
+    })
+
+    // Persist terminal instance, initialize terminal
+    setTerm(newTerm)
+    if (terminalRef.current) {
+      newTerm.open(terminalRef.current)
+    }
+
+    // Setup terminal addons
+    const fitAddon = new FitAddon()
+    const addons: ITerminalAddon[] = [fitAddon]
+    for (const addon of addons) {
+      newTerm.loadAddon(addon)
+    }
+    // Handle window resizing
+    const resize = () => {
+      fitAddon.fit()
+    }
+    resize()
+    window.addEventListener('resize', resize)
+    return () => {
+      newTerm.dispose()
+      window.removeEventListener('resize', resize)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if (data) {
+      term?.clear()
+      term?.write(new Uint8Array(data))
+    }
+  }, [term, data])
+
+  return <div className={className} ref={terminalRef} />
+}
+
+export default Terminal
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index b70195685..655117828 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -1,9 +1,17 @@
-import { Link } from 'react-router-dom'
+import { Menu, MenuButton, MenuItem, MenuList } from '@reach/menu-button'
+import { useNavigate } from 'react-router-dom'
 
 import { navToLogin, useApiMutation, useApiQuery } from '@oxide/api'
-import { Button, buttonStyle } from '@oxide/ui'
+import {
+  Button,
+  DirectionDownIcon,
+  Info16Icon,
+  Notifications16Icon,
+  Profile16Icon,
+} from '@oxide/ui'
 
 export function TopBar() {
+  const navigate = useNavigate()
   const logout = useApiMutation('logout', {
     onSuccess: () => {
       // server will respond to /login with a login redirect
@@ -18,23 +26,42 @@ export function TopBar() {
     { cacheTime: 0, refetchOnWindowFocus: false }
   )
 
-  let contents = (
-    <Link to="/login" className={buttonStyle({ variant: 'link' })}>
-      Log in
-    </Link>
-  )
-
-  if (user || !error) {
-    contents = (
-      <Button variant="link" onClick={() => logout.mutate({})}>
-        Log out
-      </Button>
-    )
-  }
+  const loggedIn = user && !error
 
   return (
-    <div className="flex h-10 justify-end">
-      <div>{contents}</div>
+    // shrink-0 is needed to prevent getting squished by body content
+    <div className="flex shrink-0 h-10 items-center justify-end">
+      <Button variant="link" size="xs" className="-mr-0.5 !text-tertiary" title="Info">
+        <Info16Icon />
+      </Button>
+      <Button variant="link" size="xs" className="!text-tertiary" title="Notifications">
+        <Notifications16Icon />
+      </Button>
+      <Menu>
+        <MenuButton
+          aria-label="User menu"
+          className="flex ml-1.5 text-tertiary items-center"
+          title="User menu"
+        >
+          <Profile16Icon /> <DirectionDownIcon className="ml-0.5 !w-2.5" />
+        </MenuButton>
+        <MenuList className="mt-2">
+          <MenuItem
+            onSelect={() => {
+              navigate('/settings')
+            }}
+          >
+            Settings
+          </MenuItem>
+          {loggedIn ? (
+            <MenuItem onSelect={() => logout.mutate({})}>Sign out</MenuItem>
+          ) : (
+            <MenuItem onSelect={() => navToLogin({ includeCurrent: true })}>
+              Sign In
+            </MenuItem>
+          )}
+        </MenuList>
+      </Menu>
     </div>
   )
 }
diff --git a/app/components/form/Form.tsx b/app/components/form/Form.tsx
index ef309803c..0572a91a6 100644
--- a/app/components/form/Form.tsx
+++ b/app/components/form/Form.tsx
@@ -1,133 +1,68 @@
 import cn from 'classnames'
 import type { FormikConfig } from 'formik'
-import { Formik } from 'formik'
+import { Formik, Form as FormikForm } from 'formik'
+import { useFormikContext } from 'formik'
 import type { ReactNode } from 'react'
 import { cloneElement } from 'react'
+import { useEffect } from 'react'
 import invariant from 'tiny-invariant'
 
-import type { Error, ErrorResponse } from '@oxide/api'
 import type { ButtonProps } from '@oxide/ui'
 import { Error12Icon } from '@oxide/ui'
 import { Button } from '@oxide/ui'
-import { SideModal } from '@oxide/ui'
-import { useIsInSideModal } from '@oxide/ui'
-import {
-  Wrap,
-  addProps,
-  classed,
-  flattenChildren,
-  isOneOf,
-  pluckFirstOfType,
-  tunnel,
-} from '@oxide/util'
+import { addProps, classed, flattenChildren, isOneOf, pluckFirstOfType } from '@oxide/util'
 
 import './form.css'
 
-const PageActionsTunnel = tunnel('form-page-actions')
-const SideModalActionsTunnel = tunnel('form-sidebar-actions')
-
-const PageActionsContainer = classed.div`flex h-20 items-center`
-
-export type FormMutation =
-  | {
-      status: 'idle' | 'loading'
-      data: undefined
-      error: null
-    }
-  | {
-      status: 'success'
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      data: any
-      error: null
-    }
-  | {
-      status: 'error'
-      data: undefined
-      error: ErrorResponse
-    }
-
 export interface FormProps<Values> extends FormikConfig<Values> {
   id: string
-  title?: ReactNode
+  className?: string
   children: ReactNode
-  onDismiss?: () => void
-  mutation: FormMutation
+  /** true if submission can happen, false otherwise */
+  setSubmitState?: (state: boolean) => void
 }
 
 export function Form<Values>({
   id,
-  title,
   children,
-  mutation,
-  onDismiss,
+  className,
+  setSubmitState,
   ...formikProps
 }: FormProps<Values>) {
-  const isSideModal = useIsInSideModal()
-  const childArray = flattenChildren(children)
-  const actions = pluckFirstOfType(childArray, Form.Actions)
-
+  // Coerce container so it can be used in wrap
   return (
-    <>
-      {title && isSideModal && (
-        <SideModal.Title id={`${id}-title`}>{title}</SideModal.Title>
-      )}
-      <Wrap with={<SideModal.Body />} when={isSideModal}>
-        <Formik {...formikProps} validateOnBlur={false}>
-          {(props) => (
-            <>
-              <form
-                id={id}
-                className={cn('ox-form', {
-                  'pb-20': !isSideModal,
-                  'is-side-modal': isSideModal,
-                })}
-                onReset={props.handleReset}
-                onSubmit={props.handleSubmit}
-              >
-                <>{childArray}</>
-              </form>
-              {actions &&
-                (isSideModal ? (
-                  <SideModalActionsTunnel.In>
-                    {cloneElement(actions, {
-                      formId: id,
-                      submitDisabled:
-                        !props.dirty || !props.isValid || mutation.status === 'loading',
-                      error: mutation.error?.error,
-                      onDismiss,
-                    })}
-                  </SideModalActionsTunnel.In>
-                ) : (
-                  <PageActionsTunnel.In>
-                    <PageActionsContainer>
-                      {cloneElement(actions, {
-                        formId: id,
-                        submitDisabled:
-                          !props.dirty || !props.isValid || mutation.status === 'loading',
-                        error: mutation.error?.error,
-                      })}
-                    </PageActionsContainer>
-                  </PageActionsTunnel.In>
-                ))}
-            </>
-          )}
-        </Formik>
-      </Wrap>
-      {actions && isSideModal && (
-        <SideModal.Footer>
-          <SideModalActionsTunnel.Out />
-        </SideModal.Footer>
-      )}
-    </>
+    <Formik {...formikProps} validateOnBlur={false} isInitialValid={false}>
+      <FormikForm id={id} className={cn('ox-form', className)}>
+        {children}
+        <FormSubmitState setSubmitState={setSubmitState} />
+      </FormikForm>
+    </Formik>
   )
 }
 
+/**
+ * This annoying little component exists solely to inform the parent when the submit state changes.
+ */
+const FormSubmitState = ({
+  setSubmitState,
+}: {
+  setSubmitState?: (state: boolean) => void
+}) => {
+  const context = useFormikContext()
+  useEffect(() => {
+    if (setSubmitState) {
+      setSubmitState(context.dirty && context.isValid)
+    }
+  }, [context.dirty, context.isValid, setSubmitState])
+  return null
+}
+
 interface FormActionsProps {
   formId?: string
   children: React.ReactNode
   submitDisabled?: boolean
-  onDismiss?: () => void
   error?: Error | null
+  className?: string
 }
 
 /**
@@ -140,15 +75,13 @@ Form.Actions = ({
   children,
   formId,
   submitDisabled = true,
-  onDismiss,
   error,
+  className,
 }: FormActionsProps) => {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const isSideModal = useIsInSideModal()
   const childArray = flattenChildren(children).map(
     addProps<typeof Button>((i, props) => ({
       size: 'sm',
-      color: 'accent',
       ...props,
     }))
   )
@@ -159,18 +92,14 @@ Form.Actions = ({
   )
 
   const submit = pluckFirstOfType(childArray, Form.Submit)
-  const cancel = pluckFirstOfType(childArray, Form.Cancel)
 
   invariant(submit, 'Form.Actions must contain a Form.Submit component')
 
   return (
     <div
-      className={cn('flex w-full items-center gap-[0.625rem] children:shrink-0', {
-        'flex-row-reverse': isSideModal,
-      })}
+      className={cn('flex w-full items-center gap-[0.625rem] children:shrink-0', className)}
     >
       {cloneElement(submit, { form: formId, disabled: submitDisabled })}
-      {isSideModal && cancel && cloneElement(cancel, { onClick: onDismiss })}
       {childArray}
       {error && (
         <div className="flex !shrink grow items-start justify-end text-mono-sm text-error">
@@ -185,13 +114,11 @@ Form.Actions = ({
 Form.Submit = (props: ButtonProps) => <Button type="submit" variant="default" {...props} />
 
 Form.Cancel = (props: ButtonProps) => (
-  <Button variant="secondary" {...props}>
+  <Button variant="ghost" color="secondary" {...props}>
     Cancel
   </Button>
 )
 
-Form.PageActions = PageActionsTunnel.Out
-
 Form.Heading = classed.h2`ox-form-heading text-content text-sans-2xl`
 export interface FormSectionProps {
   id?: string
diff --git a/app/components/form/FullPageForm.tsx b/app/components/form/FullPageForm.tsx
new file mode 100644
index 000000000..484f41b9b
--- /dev/null
+++ b/app/components/form/FullPageForm.tsx
@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react'
+import { useState } from 'react'
+import { cloneElement } from 'react'
+
+import { PageHeader, PageTitle } from '@oxide/ui'
+import { classed, flattenChildren, pluckFirstOfType } from '@oxide/util'
+
+import { PageActions } from '../PageActions'
+import type { FormProps } from './Form'
+import { Form } from './Form'
+
+export interface FullPageFormProps<Values>
+  extends Omit<FormProps<Values>, 'setSubmitState'> {
+  id: string
+  title: string
+  icon: ReactElement
+  submitDisabled?: boolean
+  error?: Error
+}
+
+const PageActionsContainer = classed.div`flex h-20 items-center`
+
+export function FullPageForm<Values>({
+  title,
+  children,
+  submitDisabled = false,
+  error,
+  icon,
+  ...formProps
+}: FullPageFormProps<Values>) {
+  const [submitState, setSubmitState] = useState(true)
+  const childArray = flattenChildren(children)
+  const actions = pluckFirstOfType(childArray, Form.Actions)
+
+  return (
+    <>
+      <PageHeader>
+        <PageTitle icon={icon}>{title}</PageTitle>
+      </PageHeader>
+      <Form setSubmitState={setSubmitState} className="pb-20" {...formProps}>
+        {childArray}
+      </Form>
+      {actions && (
+        <PageActions>
+          <PageActionsContainer>
+            {cloneElement(actions, {
+              formId: formProps.id,
+              submitDisabled: submitDisabled || !submitState,
+              error,
+            })}
+          </PageActionsContainer>
+        </PageActions>
+      )}
+    </>
+  )
+}
diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
new file mode 100644
index 000000000..6e62c0570
--- /dev/null
+++ b/app/components/form/SideModalForm.tsx
@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react'
+import { useState } from 'react'
+
+import { SideModal } from '@oxide/ui'
+import { flattenChildren, pluckFirstOfType } from '@oxide/util'
+
+import type { FormProps } from './Form'
+import { Form } from './Form'
+
+interface SideModalFormProps<Values> extends Omit<FormProps<Values>, 'setSubmitState'> {
+  isOpen: boolean
+  onDismiss: () => void
+  submitDisabled?: boolean
+  error?: Error
+  title: ReactNode
+}
+
+export function SideModalForm<Values>({
+  id,
+  children,
+  onDismiss,
+  isOpen,
+  submitDisabled = false,
+  error,
+  title,
+  ...formProps
+}: SideModalFormProps<Values>) {
+  const [submitState, setSubmitState] = useState(true)
+  const childArray = flattenChildren(children)
+  const submit = pluckFirstOfType(childArray, Form.Submit)
+
+  return (
+    <SideModal id={`${id}-modal`} onDismiss={onDismiss} isOpen={isOpen}>
+      {title && <SideModal.Title id={`${id}-title`}>{title}</SideModal.Title>}
+      <SideModal.Body>
+        <Form
+          id={id}
+          className="is-side-modal"
+          setSubmitState={setSubmitState}
+          {...formProps}
+        >
+          {childArray}
+        </Form>
+      </SideModal.Body>
+      <SideModal.Footer>
+        <Form.Actions
+          formId={id}
+          submitDisabled={submitDisabled || !submitState}
+          error={error}
+          className="flex-row-reverse"
+        >
+          {submit || <Form.Submit>{title}</Form.Submit>}
+          <Form.Cancel onClick={onDismiss} />
+        </Form.Actions>
+      </SideModal.Footer>
+    </SideModal>
+  )
+}
diff --git a/app/components/form/fields/ComboboxField.tsx b/app/components/form/fields/ComboboxField.tsx
deleted file mode 100644
index 4bb0825f3..000000000
--- a/app/components/form/fields/ComboboxField.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import cn from 'classnames'
-import { useField } from 'formik'
-
-import { Combobox, FieldLabel, TextFieldHint } from '@oxide/ui'
-
-export type ComboboxFieldProps = {
-  name: string
-  id: string
-  label: string
-  items: string[] // TODO: accept ReactElement[] probably
-  disabled?: boolean
-  required?: boolean
-  helpText?: string
-  description?: string
-}
-
-// TODO: description passed to aria-describedby and FieldLabel `tip`
-
-export function ComboboxField({
-  id,
-  items,
-  label,
-  name,
-  disabled,
-  required,
-  description,
-  helpText,
-}: ComboboxFieldProps) {
-  const [, { value }, { setValue }] = useField({ name })
-  return (
-    <div>
-      <FieldLabel id={`${id}-label`} tip={description} optional={!required}>
-        {label}
-      </FieldLabel>
-      {helpText && <TextFieldHint id={`${id}-help-text`}>{helpText}</TextFieldHint>}
-      <Combobox
-        items={items}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onSelect={(value) => setValue(value)}
-        disabled={disabled}
-        aria-labelledby={cn(`${id}-label`, {
-          [`${id}-help-text`]: !!description,
-        })}
-        aria-describedby={description ? `${id}-label-tip` : undefined}
-      />
-    </div>
-  )
-}
diff --git a/app/components/form/fields/DiskSizeField.tsx b/app/components/form/fields/DiskSizeField.tsx
index ff8e7ceb1..4e69908ba 100644
--- a/app/components/form/fields/DiskSizeField.tsx
+++ b/app/components/form/fields/DiskSizeField.tsx
@@ -1,44 +1,24 @@
-import { useFormikContext } from 'formik'
-import React from 'react'
-import invariant from 'tiny-invariant'
-
-import { GiB } from '@oxide/util'
-
 import type { TextFieldProps } from './TextField'
 import { TextField } from './TextField'
 
 interface DiskSizeProps extends Omit<TextFieldProps, 'validate'> {
-  blockSizeField?: string
+  minSize?: number
 }
 
 export function DiskSizeField({
   required = true,
   name = 'diskSize',
-  // TODO: combine disk size and block size fields into one component so we
-  // don't have to sync them this way. (Or constrain disk size to integer GiB so
-  // we don't have to validate — all integer GiB are multiples of 4096 bytes.)
-  blockSizeField = 'blockSize',
+  minSize = 1,
   ...props
 }: DiskSizeProps) {
-  const { values } = useFormikContext<Record<string, number>>()
-  invariant(blockSizeField in values, `expected form values to contain ${blockSizeField}`)
-  const blockSize = values[blockSizeField]
   return (
     <TextField
       units="GiB"
-      validate={getDiskValidator(blockSize)}
       type="number"
       required={required}
       name={name}
+      min={minSize}
       {...props}
     />
   )
 }
-
-export const getDiskValidator = (blockSize: number) => (size: number) => {
-  if (size === 0) {
-    return 'Disk size must be greater than 0'
-  } else if ((size * GiB) % blockSize !== 0) {
-    return 'Disk size must be a multiple of the block size'
-  }
-}
diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index c6a3f4054..dedd5758c 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -2,10 +2,10 @@ import { useField } from 'formik'
 import { useState } from 'react'
 
 import type { DiskCreate, DiskIdentifier } from '@oxide/api'
-import { Button, Error16Icon, FieldLabel, MiniTable, SideModal } from '@oxide/ui'
+import { Button, Error16Icon, FieldLabel, MiniTable } from '@oxide/ui'
 
-import { AttachDiskForm } from 'app/forms/disk-attach'
-import { CreateDiskForm } from 'app/forms/disk-create'
+import AttachDiskSideModalForm from 'app/forms/disk-attach'
+import CreateDiskSideModalForm from 'app/forms/disk-create'
 
 export type DiskTableItem =
   | (DiskCreate & { type: 'create' })
@@ -56,39 +56,31 @@ export function DisksTableField() {
         )}
 
         <div className="space-x-3">
-          <Button variant="secondary" size="sm" onClick={() => setShowDiskCreate(true)}>
+          <Button variant="default" size="sm" onClick={() => setShowDiskCreate(true)}>
             Create new disk
           </Button>
-          <Button variant="secondary" size="sm" onClick={() => setShowDiskAttach(true)}>
+          <Button variant="default" size="sm" onClick={() => setShowDiskAttach(true)}>
             Attach existing disk
           </Button>
         </div>
       </div>
 
-      <SideModal
-        id="create-disk-modal"
+      <CreateDiskSideModalForm
         isOpen={showDiskCreate}
+        onSubmit={(values) => {
+          setItems([...items, { type: 'create', ...values }])
+          setShowDiskCreate(false)
+        }}
         onDismiss={() => setShowDiskCreate(false)}
-      >
-        <CreateDiskForm
-          onSubmit={(values) => {
-            setItems([...items, { type: 'create', ...values }])
-            setShowDiskCreate(false)
-          }}
-        />
-      </SideModal>
-      <SideModal
-        id="attach-disk-modal"
+      />
+      <AttachDiskSideModalForm
         isOpen={showDiskAttach}
         onDismiss={() => setShowDiskAttach(false)}
-      >
-        <AttachDiskForm
-          onSubmit={(values) => {
-            setItems([...items, { type: 'attach', ...values }])
-            setShowDiskAttach(false)
-          }}
-        />
-      </SideModal>
+        onSubmit={(values) => {
+          setItems([...items, { type: 'attach', ...values }])
+          setShowDiskAttach(false)
+        }}
+      />
     </>
   )
 }
diff --git a/app/components/form/fields/NetworkInterfaceField.tsx b/app/components/form/fields/NetworkInterfaceField.tsx
index 6ea47fae2..ce5f2dadc 100644
--- a/app/components/form/fields/NetworkInterfaceField.tsx
+++ b/app/components/form/fields/NetworkInterfaceField.tsx
@@ -2,10 +2,10 @@ import { useField } from 'formik'
 import { useState } from 'react'
 
 import type { InstanceNetworkInterfaceAttachment, NetworkInterfaceCreate } from '@oxide/api'
-import { Button, Error16Icon, MiniTable, Radio, SideModal } from '@oxide/ui'
+import { Button, Error16Icon, MiniTable, Radio } from '@oxide/ui'
 
 import { RadioField } from 'app/components/form'
-import CreateNetworkInterfaceForm from 'app/forms/network-interface-create'
+import CreateNetworkInterfaceSideModalForm from 'app/forms/network-interface-create'
 
 export function NetworkInterfaceField() {
   const [showForm, setShowForm] = useState(false)
@@ -85,24 +85,19 @@ export function NetworkInterfaceField() {
             </MiniTable.Table>
           )}
 
-          <SideModal
-            id="create-disk-modal"
+          <CreateNetworkInterfaceSideModalForm
             isOpen={showForm}
+            onSubmit={(networkInterface) => {
+              setValue({
+                type: 'create',
+                params: [...value.params, networkInterface],
+              })
+              setShowForm(false)
+            }}
             onDismiss={() => setShowForm(false)}
-          >
-            <CreateNetworkInterfaceForm
-              onSubmit={(networkInterface) => {
-                setValue({
-                  type: 'create',
-                  params: [...value.params, networkInterface],
-                })
-                setShowForm(false)
-              }}
-              onDismiss={() => setShowForm(false)}
-            />
-          </SideModal>
+          />
           <div className="space-x-3">
-            <Button variant="secondary" size="sm" onClick={() => setShowForm(true)}>
+            <Button variant="default" size="sm" onClick={() => setShowForm(true)}>
               Add network interface
             </Button>
           </div>
diff --git a/app/components/form/fields/SubnetCombobox.tsx b/app/components/form/fields/SubnetListbox.tsx
similarity index 80%
rename from app/components/form/fields/SubnetCombobox.tsx
rename to app/components/form/fields/SubnetListbox.tsx
index 082367a37..ec8dc44bb 100644
--- a/app/components/form/fields/SubnetCombobox.tsx
+++ b/app/components/form/fields/SubnetListbox.tsx
@@ -5,10 +5,10 @@ import { useApiQuery } from '@oxide/api'
 
 import { useParams } from 'app/hooks'
 
-import type { ComboboxFieldProps } from './ComboboxField'
-import { ComboboxField } from './ComboboxField'
+import type { ListboxFieldProps } from './ListboxField'
+import { ListboxField } from './ListboxField'
 
-type SubnetComboboxProps = Omit<ComboboxFieldProps, 'items'> & {
+type SubnetListboxProps = Omit<ListboxFieldProps, 'items'> & {
   /** `name` of the Formik field to read the `vpcName` from */
   vpcNameField: string
   /**
@@ -27,7 +27,7 @@ type SubnetComboboxProps = Omit<ComboboxFieldProps, 'items'> & {
  * Needs to be its own component so it can go *inside* the `<Formik>` element in
  * order to have access to the context.
  */
-export function SubnetCombobox({ vpcNameField, vpcs, ...fieldProps }: SubnetComboboxProps) {
+export function SubnetListbox({ vpcNameField, vpcs, ...fieldProps }: SubnetListboxProps) {
   const pathParams = useParams('orgName', 'projectName')
   const [, { value: vpcNameRaw }] = useField<string>({ name: vpcNameField })
 
@@ -47,9 +47,9 @@ export function SubnetCombobox({ vpcNameField, vpcs, ...fieldProps }: SubnetComb
     ).data?.items || []
 
   return (
-    <ComboboxField
+    <ListboxField
       {...fieldProps}
-      items={subnets.map((x) => x.name)}
+      items={subnets.map(({ name }) => ({ value: name, label: name }))}
       disabled={!vpcExists}
     />
   )
diff --git a/app/components/form/fields/TagsField.tsx b/app/components/form/fields/TagsField.tsx
index b555fea3c..1a88bbef3 100644
--- a/app/components/form/fields/TagsField.tsx
+++ b/app/components/form/fields/TagsField.tsx
@@ -19,7 +19,7 @@ export function TagsField(props: TagsFieldProps) {
       {/* TODO: Should TextFieldHint be grouped with FieldLabel? */}
       {hint && <TextFieldHint id={`${id}-hint`}>{hint}</TextFieldHint>}
       <Button
-        variant="secondary"
+        variant="default"
         size="sm"
         onClick={() => {
           // TODO: Replace with toast. Toast is grouped in app, probably shouldn't be?
diff --git a/app/components/form/fields/TextField.tsx b/app/components/form/fields/TextField.tsx
index e6d3880c9..67a7c6630 100644
--- a/app/components/form/fields/TextField.tsx
+++ b/app/components/form/fields/TextField.tsx
@@ -1,6 +1,9 @@
 import cn from 'classnames'
 
-import type { TextFieldProps as UITextFieldProps } from '@oxide/ui'
+import type {
+  TextAreaProps as UITextAreaProps,
+  TextFieldBaseProps as UITextFieldProps,
+} from '@oxide/ui'
 import { TextFieldError } from '@oxide/ui'
 import { TextFieldHint } from '@oxide/ui'
 import { FieldLabel, TextField as UITextField } from '@oxide/ui'
@@ -40,7 +43,7 @@ export function TextField({
   label = capitalize(name),
   units,
   ...props
-}: TextFieldProps) {
+}: TextFieldProps & UITextAreaProps) {
   const { description, helpText, required } = props
   const error = useFieldError(name)
   return (
diff --git a/app/components/form/fields/index.ts b/app/components/form/fields/index.ts
index 23384fe3f..c8911ac82 100644
--- a/app/components/form/fields/index.ts
+++ b/app/components/form/fields/index.ts
@@ -1,4 +1,3 @@
-export * from './ComboboxField'
 export * from './DescriptionField'
 export * from './DiskSizeField'
 export * from './DisksTableField'
diff --git a/app/components/form/index.ts b/app/components/form/index.ts
index dcf2030d1..dfe159bd9 100644
--- a/app/components/form/index.ts
+++ b/app/components/form/index.ts
@@ -1,2 +1,4 @@
-export * from './Form'
 export * from './fields'
+export * from './Form'
+export * from './FullPageForm'
+export * from './SideModalForm'
diff --git a/app/forms/__tests__/instance-create.e2e.ts b/app/forms/__tests__/instance-create.e2e.ts
index 08fdc5ae3..19bb62412 100644
--- a/app/forms/__tests__/instance-create.e2e.ts
+++ b/app/forms/__tests__/instance-create.e2e.ts
@@ -12,15 +12,13 @@ test.describe('Instance Create Form', () => {
     await page.fill('input[name=bootDiskName]', 'my-boot-disk')
     await page.fill('input[name=bootDiskSize]', '20')
 
-    await page.locator('input[value=ubuntu] ~ .ox-radio-card').click()
+    await page.locator('input[value=ubuntu-1] ~ .ox-radio-card').click()
 
     await page.locator('button:has-text("Create instance")').click()
 
     await page.waitForNavigation()
 
-    expect(page.url()).toContain(
-      '/orgs/maze-war/projects/mock-project/instances/mock-instance'
-    )
+    expect(page).toHaveURL('/orgs/maze-war/projects/mock-project/instances/mock-instance')
 
     await expect(page.locator('h1:has-text("mock-instance")')).toBeVisible()
   })
diff --git a/app/forms/add-user-to-project.tsx b/app/forms/add-user-to-project.tsx
deleted file mode 100644
index f13795475..000000000
--- a/app/forms/add-user-to-project.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useMemo } from 'react'
-
-import type { ProjectRoles, ProjectRolesPolicy } from '@oxide/api'
-import { useApiQueryClient } from '@oxide/api'
-import { useApiMutation } from '@oxide/api'
-import { useApiQuery } from '@oxide/api'
-
-import { Form, ListboxField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
-import { useParams } from 'app/hooks'
-
-type AddUserValues = {
-  userId: string
-  roleName: ProjectRoles | ''
-}
-
-const initialValues: AddUserValues = {
-  userId: '',
-  roleName: '',
-}
-
-type RoleItem = { value: ProjectRoles; label: string }
-
-const roles: RoleItem[] = [
-  { value: 'admin', label: 'Admin' },
-  { value: 'collaborator', label: 'Collaborator' },
-  { value: 'viewer', label: 'Viewer' },
-]
-
-export function AddUserToProjectForm({
-  onSubmit,
-  onSuccess,
-  ...props
-}: PrebuiltFormProps<AddUserValues, ProjectRolesPolicy>) {
-  const projectParams = useParams('orgName', 'projectName')
-  const queryClient = useApiQueryClient()
-  const { data: users } = useApiQuery('usersGet', {})
-  const { data: policy } = useApiQuery(
-    'organizationProjectsGetProjectPolicy',
-    projectParams
-  )
-  const userItems = useMemo(
-    () => users?.items.map((u) => ({ value: u.id, label: u.name })) || [],
-    [users]
-  )
-
-  const updatePolicy = useApiMutation('organizationProjectsPutProjectPolicy', {
-    onSuccess: (data) => {
-      queryClient.invalidateQueries('organizationProjectsGetProjectPolicy', projectParams)
-      onSuccess?.(data)
-    },
-  })
-
-  return (
-    <Form
-      title="Add user to project"
-      id="add-user-to-project-form"
-      initialValues={initialValues}
-      onSubmit={
-        onSubmit ||
-        (({ userId, roleName }) => {
-          // TODO: validate properly so you can't submit if it's ''
-          if (roleName === '') return
-
-          updatePolicy.mutate({
-            ...projectParams,
-            body: {
-              // TODO: this is Not Entirely Right
-              roleAssignments: [
-                ...(policy?.roleAssignments || []),
-                { identityId: userId, identityType: 'silo_user', roleName },
-              ],
-            },
-          })
-        })
-      }
-      mutation={updatePolicy}
-      {...props}
-    >
-      <ListboxField id="userId" name="userId" items={userItems} label="User" required />
-      <ListboxField id="roleName" name="roleName" label="Role" items={roles} required />
-      <Form.Actions>
-        <Form.Submit>Add user</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
-  )
-}
diff --git a/app/forms/disk-attach.tsx b/app/forms/disk-attach.tsx
index 8d14aafca..8ede052bf 100644
--- a/app/forms/disk-attach.tsx
+++ b/app/forms/disk-attach.tsx
@@ -1,18 +1,17 @@
 import invariant from 'tiny-invariant'
 
-import type { Disk } from '@oxide/api'
+import type { Disk, DiskIdentifier } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 
-import { ComboboxField, Form } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { ListboxField } from 'app/components/form'
+import { SideModalForm } from 'app/components/form/SideModalForm'
+import type { CreateSideModalFormProps } from 'app/forms'
 import { useParams } from 'app/hooks'
 
 const values = { name: '' }
 
-export type DiskAttachValues = typeof values
-
-export function AttachDiskForm({
+export function AttachDiskSideModalForm({
   id = 'form-disk-attach',
   title = 'Attach Disk',
   initialValues = values,
@@ -20,7 +19,7 @@ export function AttachDiskForm({
   onSuccess,
   onError,
   ...props
-}: PrebuiltFormProps<DiskAttachValues, Disk>) {
+}: CreateSideModalFormProps<DiskIdentifier, Disk>) {
   const queryClient = useApiQueryClient()
   const pathParams = useParams('orgName', 'projectName')
 
@@ -47,7 +46,7 @@ export function AttachDiskForm({
     ) || []
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
       initialValues={initialValues}
@@ -63,22 +62,18 @@ export function AttachDiskForm({
           })
         })
       }
-      mutation={attachDisk}
+      submitDisabled={attachDisk.isLoading}
+      error={attachDisk.error?.error as Error | undefined}
       {...props}
     >
-      <ComboboxField
+      <ListboxField
         label="Disk name"
         id="disk-name"
         name="name"
-        items={detachedDisks.map((d) => d.name)}
+        items={detachedDisks.map(({ name }) => ({ value: name, label: name }))}
       />
-
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
 
-export default AttachDiskForm
+export default AttachDiskSideModalForm
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
index 1cfdef0a8..8240bb17a 100644
--- a/app/forms/disk-create.tsx
+++ b/app/forms/disk-create.tsx
@@ -3,17 +3,18 @@ import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Divider } from '@oxide/ui'
 import { GiB } from '@oxide/util'
 
+import { SideModalForm } from 'app/components/form'
 import {
   DescriptionField,
   DiskSizeField,
-  Form,
   NameField,
   Radio,
   RadioField,
 } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
 import { useParams } from 'app/hooks'
 
+import type { CreateSideModalFormProps } from '.'
+
 const values: DiskCreate = {
   name: '',
   description: '',
@@ -24,15 +25,16 @@ const values: DiskCreate = {
   },
 }
 
-export function CreateDiskForm({
+export function CreateDiskSideModalForm({
   id = 'create-disk-form',
   title = 'Create Disk',
   initialValues = values,
   onSubmit,
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: PrebuiltFormProps<DiskCreate, Disk>) {
+}: CreateSideModalFormProps<DiskCreate, Disk>) {
   const queryClient = useApiQueryClient()
   const pathParams = useParams('orgName', 'projectName')
 
@@ -40,15 +42,17 @@ export function CreateDiskForm({
     onSuccess(data) {
       queryClient.invalidateQueries('projectDisksGet', pathParams)
       onSuccess?.(data)
+      onDismiss()
     },
     onError,
   })
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
       initialValues={initialValues}
+      onDismiss={onDismiss}
       onSubmit={
         onSubmit ||
         ((values) => {
@@ -61,7 +65,8 @@ export function CreateDiskForm({
           })
         })
       }
-      mutation={createDisk}
+      submitDisabled={createDisk.isLoading}
+      error={createDisk.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="disk-name" />
@@ -78,12 +83,8 @@ export function CreateDiskForm({
         <Radio value="4096">4096</Radio>
       </RadioField>
       <DiskSizeField id="disk-size" name="size" />
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
 
-export default CreateDiskForm
+export default CreateDiskSideModalForm
diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx
index 5a2b211d7..7f1ba5fd6 100644
--- a/app/forms/firewall-rules-create.tsx
+++ b/app/forms/firewall-rules-create.tsx
@@ -24,10 +24,11 @@ import {
   TextFieldHint,
 } from '@oxide/ui'
 
-import { Form, ListboxField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { Form, ListboxField, SideModalForm } from 'app/components/form'
 import { useParams } from 'app/hooks'
 
+import type { CreateSideModalFormProps } from '.'
+
 export type FirewallRuleValues = {
   enabled: boolean
   priority: string
@@ -163,11 +164,11 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
 
       <div className="flex justify-end">
         {/* TODO does this clear out the form or the existing targets? */}
-        <Button variant="ghost" color="neutral" className="mr-2.5">
+        <Button variant="ghost" color="secondary" className="mr-2.5">
           Clear
         </Button>
         <Button
-          variant="secondary"
+          variant="default"
           onClick={() => {
             // TODO: show error instead of ignoring click
             if (
@@ -238,9 +239,9 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
         ]}
       />
       <div className="space-y-0.5">
-        {/* For everything but IP this is a name, but for IP it's an IP. 
+        {/* For everything but IP this is a name, but for IP it's an IP.
           So we should probably have the label on this field change when the
-          host type changes. Also need to confirm that it's just an IP and 
+          host type changes. Also need to confirm that it's just an IP and
           not a block. */}
         <FieldLabel id="hostValue-label" htmlFor="hostValue">
           Value
@@ -252,11 +253,11 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
       </div>
 
       <div className="flex justify-end">
-        <Button variant="ghost" color="neutral" className="mr-2.5">
+        <Button variant="ghost" color="secondary" className="mr-2.5">
           Clear
         </Button>
         <Button
-          variant="secondary"
+          variant="default"
           onClick={() => {
             // TODO: show error instead of ignoring click
             if (
@@ -323,11 +324,11 @@ export const CommonFields = ({ error }: { error: ErrorResponse | null }) => {
         <TextField id="portRange" name="portRange" aria-describedby="portRange-hint" />
         <TextFieldError name="portRange" />
         <div className="flex justify-end">
-          <Button variant="ghost" color="neutral" className="mr-2.5">
+          <Button variant="ghost" color="secondary" className="mr-2.5">
             Clear
           </Button>
           <Button
-            variant="secondary"
+            variant="default"
             onClick={() => {
               const portRange = values.portRange.trim()
               // TODO: show error instead of ignoring the click
@@ -400,11 +401,21 @@ export const validationSchema = Yup.object({
   priority: Yup.number().integer().min(0).max(65535).required('Required'),
 })
 
-type Props = PrebuiltFormProps<FirewallRuleValues, VpcFirewallRules> & {
+type CreateFirewallRuleSideModalProps = CreateSideModalFormProps<
+  FirewallRuleValues,
+  VpcFirewallRules
+> & {
   existingRules: VpcFirewallRule[]
 }
 
-export function CreateFirewallRuleForm({ onSuccess, existingRules, ...props }: Props) {
+export function CreateFirewallRuleSideModalForm({
+  id = 'create-firewall-rule-form',
+  title = 'Add firewall rule',
+  onSuccess,
+  onDismiss,
+  existingRules,
+  ...props
+}: CreateFirewallRuleSideModalProps) {
   const parentNames = useParams('orgName', 'projectName', 'vpcName')
   const queryClient = useApiQueryClient()
 
@@ -412,14 +423,16 @@ export function CreateFirewallRuleForm({ onSuccess, existingRules, ...props }: P
     onSuccess(data) {
       queryClient.invalidateQueries('vpcFirewallRulesGet', parentNames)
       onSuccess?.(data)
+      onDismiss()
     },
   })
 
   return (
-    <Form
-      id="create-firewall-rule-form"
-      title="Add firewall rule"
+    <SideModalForm
+      id={id}
+      title={title}
       initialValues={initialValues}
+      onDismiss={onDismiss}
       onSubmit={(values) => {
         // TODO: this silently overwrites existing rules with the current name.
         // we should probably at least warn and confirm, if not reject as invalid
@@ -433,16 +446,14 @@ export function CreateFirewallRuleForm({ onSuccess, existingRules, ...props }: P
           },
         })
       }}
-      mutation={updateRules}
       validationSchema={validationSchema}
       validateOnBlur
+      submitDisabled={updateRules.isLoading}
+      error={updateRules.error?.error as Error | undefined}
       {...props}
     >
       <CommonFields error={updateRules.error} />
-      <Form.Actions>
-        <Form.Submit>Add rule</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+      <Form.Submit>Add rule</Form.Submit>
+    </SideModalForm>
   )
 }
diff --git a/app/forms/firewall-rules-edit.tsx b/app/forms/firewall-rules-edit.tsx
index 361d84882..f0301d438 100644
--- a/app/forms/firewall-rules-edit.tsx
+++ b/app/forms/firewall-rules-edit.tsx
@@ -1,24 +1,28 @@
 import type { VpcFirewallRule, VpcFirewallRules } from '@oxide/api'
 import { firewallRuleGetToPut, useApiMutation, useApiQueryClient } from '@oxide/api'
 
-import { Form } from 'app/components/form'
+import { Form, SideModalForm } from 'app/components/form'
 import { useParams } from 'app/hooks'
 
-import type { PrebuiltFormProps } from '.'
+import type { EditSideModalFormProps } from '.'
 import { CommonFields, validationSchema, valuesToRuleUpdate } from './firewall-rules-create'
 import type { FirewallRuleValues } from './firewall-rules-create'
 
-type Props = PrebuiltFormProps<FirewallRuleValues, VpcFirewallRules> & {
+type EditFirewallRuleSideModalFormProps = Omit<
+  EditSideModalFormProps<FirewallRuleValues, VpcFirewallRules>,
+  'initialValues'
+> & {
   originalRule: VpcFirewallRule
   existingRules: VpcFirewallRule[]
 }
 
 export function EditFirewallRuleForm({
   onSuccess,
+  onDismiss,
   existingRules,
   originalRule,
   ...props
-}: Props) {
+}: EditFirewallRuleSideModalFormProps) {
   const parentNames = useParams('orgName', 'projectName', 'vpcName')
   const queryClient = useApiQueryClient()
 
@@ -26,9 +30,12 @@ export function EditFirewallRuleForm({
     onSuccess(data) {
       queryClient.invalidateQueries('vpcFirewallRulesGet', parentNames)
       onSuccess?.(data)
+      onDismiss()
     },
   })
 
+  if (Object.keys(originalRule).length === 0) return null
+
   const initialValues = {
     enabled: originalRule.status === 'enabled',
     name: originalRule.name,
@@ -56,10 +63,11 @@ export function EditFirewallRuleForm({
   }
 
   return (
-    <Form
+    <SideModalForm
       id="create-firewall-rule-form"
       title="Edit rule"
       initialValues={initialValues}
+      onDismiss={onDismiss}
       onSubmit={(values) => {
         // note different filter logic from create: filter out the rule with the
         // *original* name because we need to overwrite that rule
@@ -73,16 +81,14 @@ export function EditFirewallRuleForm({
           },
         })
       }}
-      mutation={updateRules}
       validationSchema={validationSchema}
       validateOnBlur
+      submitDisabled={updateRules.isLoading}
+      error={updateRules.error?.error as Error | undefined}
       {...props}
     >
       <CommonFields error={updateRules.error} />
-      <Form.Actions>
-        <Form.Submit>Update rule</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+      <Form.Submit>Update rule</Form.Submit>
+    </SideModalForm>
   )
 }
diff --git a/app/forms/index.ts b/app/forms/index.ts
index 96714e2bc..50b3198c6 100644
--- a/app/forms/index.ts
+++ b/app/forms/index.ts
@@ -1,15 +1,32 @@
+import type { SetRequired } from 'type-fest'
+
 import type { ErrorResponse } from '@oxide/api'
+import type { SideModalProps } from '@oxide/ui'
 
-import type { FormProps } from 'app/components/form'
+import type { FormProps, FullPageFormProps } from 'app/components/form'
 
-/**
- * A form that's built out ahead of time and intended to be re-used dynamically. Fields
- * that are expected to be provided by default are set to optional.
- */
-export type PrebuiltFormProps<Values, Data> = Omit<
-  Optional<FormProps<Values>, 'id' | 'title' | 'initialValues' | 'onSubmit' | 'mutation'>,
+type CreateFormProps<Values, Data> = Omit<
+  Optional<FormProps<Values>, 'id' | 'initialValues' | 'onSubmit'>,
   'children'
 > & {
   onSuccess?: (data: Data) => void
   onError?: (err: ErrorResponse) => void
 }
+
+export type CreateSideModalFormProps<Values, Data> = CreateFormProps<Values, Data> &
+  Omit<SideModalProps, 'id'>
+
+export type CreateFullPageFormProps<Values, Data> = CreateFormProps<Values, Data> &
+  Omit<FullPageFormProps<Values>, 'icon'>
+
+export type EditSideModalFormProps<Values, Data> = SetRequired<
+  CreateFormProps<Values, Data>,
+  'initialValues'
+> &
+  CreateSideModalFormProps<Values, Data>
+
+export type EditFullPageFormProps<Values, Data> = SetRequired<
+  CreateFormProps<Values, Data>,
+  'initialValues'
+> &
+  CreateFullPageFormProps<Values, Data>
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index 4e12c61c4..55256846e 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -9,7 +9,7 @@ import { useApiQuery } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import {
   Divider,
-  Radio,
+  Instances24Icon,
   RadioCard,
   Success16Icon,
   Tab,
@@ -19,6 +19,7 @@ import {
 import { GiB } from '@oxide/util'
 
 import type { DiskTableItem } from 'app/components/form'
+import { FullPageForm } from 'app/components/form'
 import { DiskSizeField } from 'app/components/form'
 import {
   DescriptionField,
@@ -27,23 +28,20 @@ import {
   NameField,
   NetworkInterfaceField,
   RadioField,
-  TagsField,
   TextField,
 } from 'app/components/form'
 import { ImageSelectField } from 'app/components/form/fields/ImageSelectField'
-import type { PrebuiltFormProps } from 'app/forms'
+import type { CreateFullPageFormProps } from 'app/forms'
 import { useParams, useToast } from 'app/hooks'
 
 type InstanceCreateInput = Assign<
   InstanceCreate,
   {
-    tags: object
     networkInterfaceType: InstanceNetworkInterfaceAttachment['type']
     type: typeof INSTANCE_SIZES[number]['id']
     disks: DiskTableItem[]
     bootDiskName: string
     bootDiskSize: number
-    bootDiskBlockSize: '512' | '4096'
     globalImage: string
   }
 >
@@ -51,7 +49,6 @@ type InstanceCreateInput = Assign<
 const values: InstanceCreateInput = {
   name: '',
   description: '',
-  tags: {},
   /**
    * This value controls the selector which drives memory and ncpus. It's not actually
    * submitted to the API.
@@ -62,8 +59,7 @@ const values: InstanceCreateInput = {
   hostname: '',
 
   bootDiskName: '',
-  bootDiskSize: 0,
-  bootDiskBlockSize: '4096',
+  bootDiskSize: 1,
   globalImage: '',
 
   disks: [],
@@ -83,7 +79,7 @@ export default function CreateInstanceForm({
   onSuccess,
   onError,
   ...props
-}: PrebuiltFormProps<typeof values, Instance>) {
+}: CreateFullPageFormProps<InstanceCreateInput, Instance>) {
   const queryClient = useApiQueryClient()
   const addToast = useToast()
   const pageParams = useParams('orgName', 'projectName')
@@ -113,21 +109,28 @@ export default function CreateInstanceForm({
 
   const images = useApiQuery('imagesGet', {}).data?.items || []
 
+  initialValues.globalImage = images[0]?.id || ''
+
   return (
-    <Form
+    <FullPageForm
       id={id}
       initialValues={initialValues}
       title={title}
+      icon={<Instances24Icon />}
       onSubmit={
         onSubmit ||
         (async (values) => {
           const instance = INSTANCE_SIZES.find((option) => option.id === values['type'])
           invariant(instance, 'Expected instance type to be defined')
+          const image = images.find((i) => values.globalImage === i.id)
+          invariant(image, 'Expected image to be defined')
           await createDisk.mutateAsync({
             ...pageParams,
             body: {
-              name: values.bootDiskName,
+              // TODO: Determine the pattern of the default boot disk name
+              name: values.bootDiskName || `${values.name}-${image.name}-boot-disk`,
               description: `Created as a boot disk for ${values.bootDiskName}`,
+              // TODO: Verify size is larger than the minimum image size
               size: values.bootDiskSize * GiB,
               diskSource: {
                 type: 'global_image',
@@ -154,12 +157,12 @@ export default function CreateInstanceForm({
           })
         })
       }
-      mutation={createInstance}
       {...props}
+      submitDisabled={createDisk.isLoading || createInstance.isLoading}
+      error={(createDisk.error?.error || createInstance.error?.error) as Error | undefined}
     >
       <NameField id="name" />
       <DescriptionField id="description" />
-      <TagsField id="tags" />
 
       <Divider />
 
@@ -213,30 +216,21 @@ export default function CreateInstanceForm({
       <Tabs id="boot-disk-tabs" aria-describedby="boot-disk" fullWidth>
         <Tab>Distros</Tab>
         <Tab.Panel className="space-y-4">
-          <ImageSelectField id="boot-disk-image" name="globalImage" images={images} />
+          <ImageSelectField
+            id="boot-disk-image"
+            name="globalImage"
+            images={images}
+            required={true}
+          />
 
           <NameField
             id="boot-disk-name"
             name="bootDiskName"
             label="Disk name"
             description="Will be autogenerated if name not provided"
+            required={false}
           />
-          <RadioField
-            column
-            id="boot-disk-block-size"
-            name="bootDiskBlockSize"
-            label="Block size"
-            units="Bytes"
-          >
-            <Radio value="512">512</Radio>
-            <Radio value="4096">4096</Radio>
-          </RadioField>
-          <DiskSizeField
-            id="disk-size"
-            label="Disk size"
-            blockSizeField="bootDiskBlockSize"
-            name="bootDiskSize"
-          />
+          <DiskSizeField id="disk-size" label="Disk size" name="bootDiskSize" />
         </Tab.Panel>
         <Tab>Images</Tab>
         <Tab.Panel></Tab.Panel>
@@ -259,7 +253,7 @@ export default function CreateInstanceForm({
         <Form.Submit>{title}</Form.Submit>
         <Form.Cancel />
       </Form.Actions>
-    </Form>
+    </FullPageForm>
   )
 }
 
diff --git a/app/forms/network-interface-create.tsx b/app/forms/network-interface-create.tsx
index d7c414627..29758362a 100644
--- a/app/forms/network-interface-create.tsx
+++ b/app/forms/network-interface-create.tsx
@@ -1,19 +1,19 @@
 import invariant from 'tiny-invariant'
 
-import type { NetworkInterface } from '@oxide/api'
+import type { NetworkInterface, NetworkInterfaceCreate } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
 import { nullIfEmpty, useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Divider } from '@oxide/ui'
 
 import {
-  ComboboxField,
   DescriptionField,
-  Form,
+  ListboxField,
   NameField,
+  SideModalForm,
   TextField,
 } from 'app/components/form'
-import { SubnetCombobox } from 'app/components/form/fields/SubnetCombobox'
-import type { PrebuiltFormProps } from 'app/forms'
+import { SubnetListbox } from 'app/components/form/fields/SubnetListbox'
+import type { CreateSideModalFormProps } from 'app/forms'
 import { useParams } from 'app/hooks'
 
 const values = {
@@ -24,7 +24,7 @@ const values = {
   vpcName: '',
 }
 
-export default function CreateNetworkInterfaceForm({
+export default function CreateNetworkInterfaceSideModalForm({
   id = 'create-network-interface-form',
   title = 'Add network interface',
   initialValues = values,
@@ -32,7 +32,7 @@ export default function CreateNetworkInterfaceForm({
   onSuccess,
   onError,
   ...props
-}: PrebuiltFormProps<typeof values, NetworkInterface>) {
+}: CreateSideModalFormProps<NetworkInterfaceCreate, NetworkInterface>) {
   const queryClient = useApiQueryClient()
   const pathParams = useParams('orgName', 'projectName')
 
@@ -52,7 +52,7 @@ export default function CreateNetworkInterfaceForm({
   const vpcs = useApiQuery('projectVpcsGet', { ...pathParams, limit: 50 }).data?.items || []
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
       initialValues={initialValues}
@@ -72,21 +72,22 @@ export default function CreateNetworkInterfaceForm({
           })
         })
       }
-      mutation={createNetworkInterface}
+      submitDisabled={createNetworkInterface.isLoading}
+      error={createNetworkInterface.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="nic-name" />
       <DescriptionField id="nic-description" />
       <Divider />
 
-      <ComboboxField
+      <ListboxField
         id="nic-vpc"
         name="vpcName"
         label="VPC"
-        items={vpcs.map((x) => x.name)}
+        items={vpcs.map(({ name }) => ({ label: name, value: name }))}
         // required
       />
-      <SubnetCombobox
+      <SubnetListbox
         id="nic-subnet"
         name="subnetName"
         label="Subnet"
@@ -95,11 +96,6 @@ export default function CreateNetworkInterfaceForm({
         // required
       />
       <TextField id="nic-ip" name="ip" label="IP Address" />
-
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
diff --git a/app/forms/org-access.tsx b/app/forms/org-access.tsx
new file mode 100644
index 000000000..707d9b5d7
--- /dev/null
+++ b/app/forms/org-access.tsx
@@ -0,0 +1,137 @@
+import * as Yup from 'yup'
+
+import type { OrganizationRole, OrganizationRolePolicy } from '@oxide/api'
+import { orgRoles, useUsersNotInPolicy } from '@oxide/api'
+import { setUserRole } from '@oxide/api'
+import { useApiQueryClient } from '@oxide/api'
+import { useApiMutation } from '@oxide/api'
+import { capitalize } from '@oxide/util'
+
+import { Form, ListboxField, SideModalForm } from 'app/components/form'
+import { useParams } from 'app/hooks'
+
+import type { CreateSideModalFormProps, EditSideModalFormProps } from '.'
+
+type AddUserValues = {
+  userId: string
+  roleName: OrganizationRole | ''
+}
+
+const initialValues: AddUserValues = {
+  userId: '',
+  roleName: '',
+}
+
+const roleItems = orgRoles.map((role) => ({ value: role, label: capitalize(role) }))
+
+type AddRoleModalProps = CreateSideModalFormProps<AddUserValues, OrganizationRolePolicy> & {
+  policy: OrganizationRolePolicy
+}
+
+export function OrgAccessAddUserSideModal({
+  onSubmit,
+  onSuccess,
+  onDismiss,
+  policy,
+  ...props
+}: AddRoleModalProps) {
+  const orgParams = useParams('orgName')
+
+  const users = useUsersNotInPolicy(policy)
+  const userItems = users.map((u) => ({ value: u.id, label: u.id }))
+
+  const queryClient = useApiQueryClient()
+  const updatePolicy = useApiMutation('organizationPutPolicy', {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries('organizationGetPolicy', orgParams)
+      onSuccess?.(data)
+      onDismiss()
+    },
+  })
+
+  return (
+    <SideModalForm
+      onDismiss={onDismiss}
+      title="Add user to organization"
+      id="org-access-add-user"
+      initialValues={initialValues}
+      onSubmit={
+        onSubmit ||
+        (({ userId, roleName }) => {
+          // can't happen because roleName is validated not to be '', but TS
+          // wants to be sure
+          if (roleName === '') return
+
+          updatePolicy.mutate({
+            ...orgParams,
+            body: setUserRole(userId, roleName, policy),
+          })
+        })
+      }
+      validationSchema={Yup.object({
+        userId: Yup.string().required(),
+        roleName: Yup.string().required(),
+      })}
+      submitDisabled={updatePolicy.isLoading}
+      error={updatePolicy.error?.error as Error | undefined}
+      {...props}
+    >
+      <ListboxField id="userId" name="userId" items={userItems} label="User" required />
+      <ListboxField id="roleName" name="roleName" label="Role" items={roleItems} required />
+      <Form.Submit>Add user</Form.Submit>
+    </SideModalForm>
+  )
+}
+
+type EditUserValues = {
+  roleName: OrganizationRole
+}
+
+type EditRoleModalProps = EditSideModalFormProps<EditUserValues, OrganizationRolePolicy> & {
+  userId: string
+  policy: OrganizationRolePolicy
+}
+
+export function OrgAccessEditUserSideModal({
+  onSubmit,
+  onSuccess,
+  onDismiss,
+  userId,
+  policy,
+  ...props
+}: EditRoleModalProps) {
+  const orgParams = useParams('orgName')
+
+  const queryClient = useApiQueryClient()
+  const updatePolicy = useApiMutation('organizationPutPolicy', {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries('organizationGetPolicy', orgParams)
+      onSuccess?.(data)
+      onDismiss()
+    },
+  })
+
+  return (
+    <SideModalForm
+      onDismiss={onDismiss}
+      // TODO: show user name in header or SOMEWHERE
+      title="Change user role"
+      id="org-access-edit-user"
+      onSubmit={
+        onSubmit ||
+        (({ roleName }) => {
+          updatePolicy.mutate({
+            ...orgParams,
+            body: setUserRole(userId, roleName, policy),
+          })
+        })
+      }
+      submitDisabled={updatePolicy.isLoading || !policy}
+      error={updatePolicy.error?.error as Error | undefined}
+      {...props}
+    >
+      <ListboxField id="roleName" name="roleName" label="Role" items={roleItems} required />
+      <Form.Submit>Update role</Form.Submit>
+    </SideModalForm>
+  )
+}
diff --git a/app/forms/org-create.tsx b/app/forms/org-create.tsx
index 022198b11..2490ee55c 100644
--- a/app/forms/org-create.tsx
+++ b/app/forms/org-create.tsx
@@ -1,25 +1,30 @@
-import type { Organization } from '@oxide/api'
+import { useNavigate } from 'react-router-dom'
+
+import type { Organization, OrganizationCreate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Success16Icon } from '@oxide/ui'
 
-import { DescriptionField, Form, NameField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
 import { useToast } from 'app/hooks'
 
+import type { CreateSideModalFormProps } from '.'
+
 const values = {
   name: '',
   description: '',
 }
 
-export function CreateOrgForm({
+export function CreateOrgSideModalForm({
   id = 'create-org-form',
   title = 'Create organization',
   initialValues = values,
   onSubmit,
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: PrebuiltFormProps<typeof values, Organization>) {
+}: CreateSideModalFormProps<OrganizationCreate, Organization>) {
+  const navigate = useNavigate()
   const queryClient = useApiQueryClient()
   const addToast = useToast()
 
@@ -35,15 +40,17 @@ export function CreateOrgForm({
         timeout: 5000,
       })
       onSuccess?.(org)
+      navigate(`/orgs/${org.name}/projects`)
     },
     onError,
   })
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
       initialValues={initialValues}
+      onDismiss={onDismiss}
       onSubmit={
         onSubmit ??
         (({ name, description }) =>
@@ -51,17 +58,12 @@ export function CreateOrgForm({
             body: { name, description },
           }))
       }
-      mutation={createOrg}
+      submitDisabled={createOrg.isLoading}
+      error={createOrg.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="org-name" />
       <DescriptionField id="org-description" />
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
-
-export default CreateOrgForm
diff --git a/app/forms/org-edit.tsx b/app/forms/org-edit.tsx
new file mode 100644
index 000000000..d3c445ece
--- /dev/null
+++ b/app/forms/org-edit.tsx
@@ -0,0 +1,63 @@
+import type { Organization, OrganizationCreate } from '@oxide/api'
+import { useApiMutation, useApiQueryClient } from '@oxide/api'
+import { Success16Icon } from '@oxide/ui'
+
+import { DescriptionField, Form, NameField, SideModalForm } from 'app/components/form'
+import { useToast } from 'app/hooks'
+
+import type { EditSideModalFormProps } from '.'
+
+export function EditOrgSideModalForm({
+  id = 'edit-org-form',
+  title = 'Edit organization',
+  initialValues,
+  onSubmit,
+  onSuccess,
+  onError,
+  onDismiss,
+  ...props
+}: EditSideModalFormProps<OrganizationCreate, Organization>) {
+  const queryClient = useApiQueryClient()
+  const addToast = useToast()
+
+  const updateOrg = useApiMutation('organizationsPutOrganization', {
+    onSuccess(org) {
+      queryClient.invalidateQueries('organizationsGet', {})
+      // avoid the org fetch when the org page loads since we have the data
+      queryClient.setQueryData('organizationsGetOrganization', { orgName: org.name }, org)
+      addToast({
+        icon: <Success16Icon />,
+        title: 'Success!',
+        content: 'Your organization has been updated.',
+        timeout: 5000,
+      })
+      onSuccess?.(org)
+      onDismiss()
+    },
+    onError,
+  })
+
+  return (
+    <SideModalForm
+      id={id}
+      title={title}
+      initialValues={initialValues}
+      onDismiss={onDismiss}
+      onSubmit={
+        onSubmit ??
+        (({ name, description }) =>
+          updateOrg.mutate({
+            orgName: initialValues.name,
+            body: { name, description },
+          }))
+      }
+      submitDisabled={updateOrg.isLoading}
+      error={updateOrg.error?.error as Error | undefined}
+      {...props}
+    >
+      <NameField id="org-name" />
+      <DescriptionField id="org-description" />
+      <Form.Submit>Save changes</Form.Submit>
+    </SideModalForm>
+  )
+}
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
new file mode 100644
index 000000000..12509deba
--- /dev/null
+++ b/app/forms/project-access.tsx
@@ -0,0 +1,138 @@
+import * as Yup from 'yup'
+
+import type { ProjectRole, ProjectRolePolicy } from '@oxide/api'
+import { projectRoles } from '@oxide/api'
+import { useUsersNotInPolicy } from '@oxide/api'
+import { setUserRole } from '@oxide/api'
+import { useApiQueryClient } from '@oxide/api'
+import { useApiMutation } from '@oxide/api'
+import { capitalize } from '@oxide/util'
+
+import { Form, ListboxField, SideModalForm } from 'app/components/form'
+import { useParams } from 'app/hooks'
+
+import type { CreateSideModalFormProps, EditSideModalFormProps } from '.'
+
+type AddUserValues = {
+  userId: string
+  roleName: ProjectRole | ''
+}
+
+const initialValues: AddUserValues = {
+  userId: '',
+  roleName: '',
+}
+
+const roleItems = projectRoles.map((role) => ({ value: role, label: capitalize(role) }))
+
+type AddRoleModalProps = CreateSideModalFormProps<AddUserValues, ProjectRolePolicy> & {
+  policy: ProjectRolePolicy
+}
+
+export function ProjectAccessAddUserSideModal({
+  onSubmit,
+  onSuccess,
+  onDismiss,
+  policy,
+  ...props
+}: AddRoleModalProps) {
+  const projectParams = useParams('orgName', 'projectName')
+
+  const users = useUsersNotInPolicy(policy)
+  const userItems = users.map((u) => ({ value: u.id, label: u.id }))
+
+  const queryClient = useApiQueryClient()
+  const updatePolicy = useApiMutation('organizationProjectsPutProjectPolicy', {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries('organizationProjectsGetProjectPolicy', projectParams)
+      onSuccess?.(data)
+      onDismiss()
+    },
+  })
+
+  return (
+    <SideModalForm
+      onDismiss={onDismiss}
+      title="Add user to project"
+      id="project-access-add-user"
+      initialValues={initialValues}
+      onSubmit={
+        onSubmit ||
+        (({ userId, roleName }) => {
+          // can't happen because roleName is validated not to be '', but TS
+          // wants to be sure
+          if (roleName === '') return
+
+          updatePolicy.mutate({
+            ...projectParams,
+            body: setUserRole(userId, roleName, policy),
+          })
+        })
+      }
+      validationSchema={Yup.object({
+        userId: Yup.string().required(),
+        roleName: Yup.string().required(),
+      })}
+      submitDisabled={updatePolicy.isLoading}
+      error={updatePolicy.error?.error as Error | undefined}
+      {...props}
+    >
+      <ListboxField id="userId" name="userId" items={userItems} label="User" required />
+      <ListboxField id="roleName" name="roleName" label="Role" items={roleItems} required />
+      <Form.Submit>Add user</Form.Submit>
+    </SideModalForm>
+  )
+}
+
+type EditUserValues = {
+  roleName: ProjectRole
+}
+
+type EditRoleModalProps = EditSideModalFormProps<EditUserValues, ProjectRolePolicy> & {
+  userId: string
+  policy: ProjectRolePolicy
+}
+
+export function ProjectAccessEditUserSideModal({
+  onSubmit,
+  onSuccess,
+  onDismiss,
+  userId,
+  policy,
+  ...props
+}: EditRoleModalProps) {
+  const projectParams = useParams('orgName', 'projectName')
+
+  const queryClient = useApiQueryClient()
+  const updatePolicy = useApiMutation('organizationProjectsPutProjectPolicy', {
+    onSuccess: (data) => {
+      queryClient.invalidateQueries('organizationProjectsGetProjectPolicy', projectParams)
+      onSuccess?.(data)
+      onDismiss()
+    },
+  })
+
+  return (
+    <SideModalForm
+      onDismiss={onDismiss}
+      // TODO: show user name in header or SOMEWHERE
+      title="Change user role"
+      id="project-access-edit-user"
+      onSubmit={
+        onSubmit ||
+        (({ roleName }) => {
+          updatePolicy.mutate({
+            ...projectParams,
+            body: setUserRole(userId, roleName, policy),
+          })
+        })
+      }
+      submitDisabled={updatePolicy.isLoading || !policy}
+      error={updatePolicy.error?.error as Error | undefined}
+      {...props}
+    >
+      <ListboxField id="roleName" name="roleName" label="Role" items={roleItems} required />
+      <Form.Submit>Update role</Form.Submit>
+    </SideModalForm>
+  )
+}
diff --git a/app/forms/project-create.tsx b/app/forms/project-create.tsx
index 55a6b7b78..16f2548b6 100644
--- a/app/forms/project-create.tsx
+++ b/app/forms/project-create.tsx
@@ -1,9 +1,11 @@
-import type { Project } from '@oxide/api'
+import { useNavigate } from 'react-router-dom'
+
+import type { Project, ProjectCreate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Success16Icon } from '@oxide/ui'
 
-import { DescriptionField, Form, NameField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
+import type { CreateSideModalFormProps } from 'app/forms'
 
 import { useParams, useToast } from '../hooks'
 
@@ -12,15 +14,17 @@ const values = {
   description: '',
 }
 
-export function CreateProjectForm({
+export function CreateProjectSideModalForm({
   id = 'create-project-form',
   title = 'Create project',
   initialValues = values,
   onSubmit,
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: PrebuiltFormProps<typeof values, Project>) {
+}: CreateSideModalFormProps<ProjectCreate, Project>) {
+  const navigate = useNavigate()
   const queryClient = useApiQueryClient()
   const addToast = useToast()
 
@@ -43,15 +47,17 @@ export function CreateProjectForm({
         timeout: 5000,
       })
       onSuccess?.(project)
+      navigate(`/orgs/${orgName}/projects/${project.name}/instances`)
     },
     onError,
   })
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       initialValues={initialValues}
       title={title}
+      onDismiss={onDismiss}
       onSubmit={
         onSubmit ||
         (({ name, description }) => {
@@ -61,17 +67,14 @@ export function CreateProjectForm({
           })
         })
       }
-      mutation={createProject}
+      submitDisabled={createProject.isLoading}
+      error={createProject.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="name" />
       <DescriptionField id="description" />
-      <Form.Actions>
-        <Form.Submit>Create project</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
 
-export default CreateProjectForm
+export default CreateProjectSideModalForm
diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx
new file mode 100644
index 000000000..508df6e9a
--- /dev/null
+++ b/app/forms/project-edit.tsx
@@ -0,0 +1,74 @@
+import type { Project, ProjectCreate } from '@oxide/api'
+import { useApiMutation, useApiQueryClient } from '@oxide/api'
+import { Success16Icon } from '@oxide/ui'
+
+import { DescriptionField, Form, NameField, SideModalForm } from 'app/components/form'
+
+import type { EditSideModalFormProps } from '.'
+import { useParams, useToast } from '../hooks'
+
+export function EditProjectSideModalForm({
+  id = 'edit-project-form',
+  title = 'Edit project',
+  initialValues,
+  onSubmit,
+  onSuccess,
+  onError,
+  onDismiss,
+  ...props
+}: EditSideModalFormProps<ProjectCreate, Project>) {
+  const queryClient = useApiQueryClient()
+  const addToast = useToast()
+
+  const { orgName } = useParams('orgName')
+
+  const editProject = useApiMutation('organizationProjectsPutProject', {
+    onSuccess(project) {
+      // refetch list of projects in sidebar
+      queryClient.invalidateQueries('organizationProjectsGet', { orgName })
+      // avoid the project fetch when the project page loads since we have the data
+      queryClient.setQueryData(
+        'organizationProjectsGetProject',
+        { orgName, projectName: project.name },
+        project
+      )
+      addToast({
+        icon: <Success16Icon />,
+        title: 'Success!',
+        content: 'Your project has been updated.',
+        timeout: 5000,
+      })
+      onSuccess?.(project)
+      onDismiss()
+    },
+    onError,
+  })
+
+  return (
+    <SideModalForm
+      id={id}
+      initialValues={initialValues}
+      title={title}
+      onDismiss={onDismiss}
+      onSubmit={
+        onSubmit ||
+        (({ name, description }) => {
+          editProject.mutate({
+            projectName: initialValues.name,
+            orgName,
+            body: { name, description },
+          })
+        })
+      }
+      submitDisabled={editProject.isLoading}
+      error={editProject.error?.error as Error | undefined}
+      {...props}
+    >
+      <NameField id="name" />
+      <DescriptionField id="description" />
+      <Form.Submit>Save changes</Form.Submit>
+    </SideModalForm>
+  )
+}
+
+export default EditProjectSideModalForm
diff --git a/app/forms/ssh-key-create.tsx b/app/forms/ssh-key-create.tsx
index 42b710b2a..c3120174f 100644
--- a/app/forms/ssh-key-create.tsx
+++ b/app/forms/ssh-key-create.tsx
@@ -2,9 +2,9 @@ import type { SshKey, SshKeyCreate } from '@oxide/api'
 import { useApiMutation } from '@oxide/api'
 import { useApiQueryClient } from '@oxide/api'
 
-import { DescriptionField, Form, NameField, TextField } from 'app/components/form'
+import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
 
-import type { PrebuiltFormProps } from '.'
+import type { CreateSideModalFormProps } from '.'
 
 const values: SshKeyCreate = {
   name: '',
@@ -12,47 +12,47 @@ const values: SshKeyCreate = {
   publicKey: '',
 }
 
-export function CreateSSHKeyForm({
+export function CreateSSHKeySideModalForm({
   id = 'create-ssh-key-form',
   title = 'Add SSH key',
   initialValues = values,
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: PrebuiltFormProps<SshKeyCreate, SshKey>) {
+}: CreateSideModalFormProps<SshKeyCreate, SshKey>) {
   const queryClient = useApiQueryClient()
 
   const createSshKey = useApiMutation('sshkeysPost', {
     onSuccess(data) {
       queryClient.invalidateQueries('sshkeysGet', {})
       onSuccess?.(data)
+      onDismiss()
     },
     onError,
   })
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
       initialValues={initialValues}
+      onDismiss={onDismiss}
       onSubmit={(body) => createSshKey.mutate({ body })}
-      mutation={createSshKey}
+      submitDisabled={createSshKey.isLoading}
+      error={createSshKey.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="ssh-key-name" />
       <DescriptionField id="ssh-key-description" />
-      {/* TODO: Turn into a text area */}
       <TextField
+        as="textarea"
         id="ssh-key-public-key"
         name="publicKey"
-        label="SSH key content"
+        label="Public key"
         required
+        rows={8}
       />
-
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx
index f5822a8e5..a15d6ecd8 100644
--- a/app/forms/subnet-create.tsx
+++ b/app/forms/subnet-create.tsx
@@ -1,11 +1,12 @@
-import type { VpcSubnet } from '@oxide/api'
+import type { VpcSubnet, VpcSubnetCreate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Divider } from '@oxide/ui'
 
-import { DescriptionField, Form, NameField, TextField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
 import { useParams } from 'app/hooks'
 
+import type { CreateSideModalFormProps } from '.'
+
 const values = {
   name: '',
   description: '',
@@ -13,16 +14,15 @@ const values = {
   ipv6Block: '',
 }
 
-export type VpcSubnetFieldValues = typeof values
-
-export function CreateSubnetForm({
+export function CreateSubnetSideModalForm({
   id = 'create-subnet-form',
   title = 'Create subnet',
   initialValues = values,
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: PrebuiltFormProps<VpcSubnetFieldValues, VpcSubnet>) {
+}: CreateSideModalFormProps<VpcSubnetCreate, VpcSubnet>) {
   const parentNames = useParams('orgName', 'projectName', 'vpcName')
   const queryClient = useApiQueryClient()
 
@@ -30,16 +30,19 @@ export function CreateSubnetForm({
     onSuccess(data) {
       queryClient.invalidateQueries('vpcSubnetsGet', parentNames)
       onSuccess?.(data)
+      onDismiss()
     },
     onError,
   })
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
       initialValues={initialValues}
+      onDismiss={onDismiss}
       onSubmit={(body) => createSubnet.mutate({ ...parentNames, body })}
-      mutation={createSubnet}
+      submitDisabled={createSubnet.isLoading}
+      error={createSubnet.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="subnet-name" />
@@ -47,12 +50,8 @@ export function CreateSubnetForm({
       <Divider />
       <TextField id="subnet-ipv4-block" name="ipv4Block" label="IPv4 block" />
       <TextField id="subnet-ipv6-block" name="ipv6Block" label="IPv6 block" />
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
 
-export default CreateSubnetForm
+export default CreateSubnetSideModalForm
diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx
index dbcff9bb1..b0f6f7f91 100644
--- a/app/forms/subnet-edit.tsx
+++ b/app/forms/subnet-edit.tsx
@@ -1,22 +1,21 @@
-import type { SetRequired } from 'type-fest'
+import invariant from 'tiny-invariant'
 
-import type { VpcSubnet } from '@oxide/api'
+import type { VpcSubnet, VpcSubnetUpdate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Divider } from '@oxide/ui'
 
-import { DescriptionField, Form, NameField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { DescriptionField, Form, NameField, SideModalForm } from 'app/components/form'
+import type { EditSideModalFormProps } from 'app/forms'
 import { useParams } from 'app/hooks'
 
-import type { VpcSubnetFieldValues } from './subnet-create'
-
-export function EditSubnetForm({
+export function EditSubnetSideModalForm({
   id = 'edit-subnet-form',
   title = 'Edit subnet',
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: SetRequired<PrebuiltFormProps<VpcSubnetFieldValues, VpcSubnet>, 'initialValues'>) {
+}: EditSideModalFormProps<VpcSubnetUpdate, VpcSubnet>) {
   const parentNames = useParams('orgName', 'projectName', 'vpcName')
   const queryClient = useApiQueryClient()
 
@@ -24,15 +23,21 @@ export function EditSubnetForm({
     onSuccess(data) {
       queryClient.invalidateQueries('vpcSubnetsGet', parentNames)
       onSuccess?.(data)
+      onDismiss()
     },
     onError,
   })
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
+      onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
+        invariant(
+          props.initialValues.name,
+          'Tried to edit a subnet without providing an initial name'
+        )
         updateSubnet.mutate({
           ...parentNames,
           subnetName: props.initialValues.name,
@@ -42,18 +47,16 @@ export function EditSubnetForm({
           },
         })
       }}
-      mutation={updateSubnet}
+      submitDisabled={updateSubnet.isLoading}
+      error={updateSubnet.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="subnet-name" />
       <DescriptionField id="subnet-description" />
       <Divider />
-      <Form.Actions>
-        <Form.Submit>Update subnet</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+      <Form.Submit>Update subnet</Form.Submit>
+    </SideModalForm>
   )
 }
 
-export default EditSubnetForm
+export default EditSubnetSideModalForm
diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx
index 8370b935d..906451bbd 100644
--- a/app/forms/vpc-create.tsx
+++ b/app/forms/vpc-create.tsx
@@ -1,9 +1,9 @@
-import type { Vpc } from '@oxide/api'
+import type { Vpc, VpcCreate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Success16Icon } from '@oxide/ui'
 
-import { DescriptionField, Form, NameField, TextField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { DescriptionField, NameField, SideModalForm, TextField } from 'app/components/form'
+import type { CreateSideModalFormProps } from 'app/forms'
 import { useParams, useToast } from 'app/hooks'
 
 const values = {
@@ -13,7 +13,7 @@ const values = {
   ipv6Prefix: '',
 }
 
-export function CreateVpcForm({
+export function CreateVpcSideModalForm({
   id = 'create-vpc-form',
   title = 'Create VPC',
   initialValues = values,
@@ -21,7 +21,7 @@ export function CreateVpcForm({
   onSuccess,
   onError,
   ...props
-}: PrebuiltFormProps<typeof values, Vpc>) {
+}: CreateSideModalFormProps<VpcCreate, Vpc>) {
   const parentNames = useParams('orgName', 'projectName')
   const queryClient = useApiQueryClient()
   const addToast = useToast()
@@ -47,7 +47,7 @@ export function CreateVpcForm({
   })
 
   return (
-    <Form
+    <SideModalForm
       id={id}
       title={title}
       initialValues={initialValues}
@@ -59,19 +59,16 @@ export function CreateVpcForm({
             body: { name, description, dnsName, ipv6Prefix },
           }))
       }
-      mutation={createVpc}
+      submitDisabled={createVpc.isLoading}
+      error={createVpc.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="vpc-name" />
       <DescriptionField id="vpc-description" />
       <NameField id="vpc-dns-name" name="dnsName" label="DNS name" required={false} />
       <TextField id="vpc-ipv6-prefix" name="ipv6Prefix" label="IPV6 prefix" />
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
 
-export default CreateVpcForm
+export default CreateVpcSideModalForm
diff --git a/app/forms/vpc-router-create.tsx b/app/forms/vpc-router-create.tsx
index 1f563ea2f..700675484 100644
--- a/app/forms/vpc-router-create.tsx
+++ b/app/forms/vpc-router-create.tsx
@@ -1,9 +1,9 @@
-import type { VpcRouter } from '@oxide/api'
+import type { VpcRouter, VpcRouterCreate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { Success16Icon } from '@oxide/ui'
 
-import { DescriptionField, Form, NameField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
+import type { CreateSideModalFormProps } from 'app/forms'
 import { useParams, useToast } from 'app/hooks'
 
 const values = {
@@ -11,13 +11,14 @@ const values = {
   description: '',
 }
 
-export type VpcRouterFieldValues = typeof values
-
 export function CreateVpcRouterForm({
+  id = 'create-vpc-router-form',
+  title = 'Create VPC Router',
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: PrebuiltFormProps<VpcRouterFieldValues, VpcRouter>) {
+}: CreateSideModalFormProps<VpcRouterCreate, VpcRouter>) {
   const parentNames = useParams('orgName', 'projectName', 'vpcName')
   const queryClient = useApiQueryClient()
   const addToast = useToast()
@@ -38,29 +39,26 @@ export function CreateVpcRouterForm({
         timeout: 5000,
       })
       onSuccess?.(router)
+      onDismiss()
     },
     onError,
   })
 
-  const title = 'Create VPC router'
-
   return (
-    <Form
-      id="create-vpc-router-form"
+    <SideModalForm
+      id={id}
       title={title}
       initialValues={values}
+      onDismiss={onDismiss}
       onSubmit={({ name, description }) =>
         createRouter.mutate({ ...parentNames, body: { name, description } })
       }
-      mutation={createRouter}
+      submitDisabled={createRouter.isLoading}
+      error={createRouter.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="router-name" />
       <DescriptionField id="router-description" />
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
diff --git a/app/forms/vpc-router-edit.tsx b/app/forms/vpc-router-edit.tsx
index 0da9c5de6..37c979e97 100644
--- a/app/forms/vpc-router-edit.tsx
+++ b/app/forms/vpc-router-edit.tsx
@@ -1,20 +1,21 @@
-import type { SetRequired } from 'type-fest'
+import invariant from 'tiny-invariant'
 
-import type { VpcRouter } from '@oxide/api'
+import type { VpcRouter, VpcRouterUpdate } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 
-import { DescriptionField, Form, NameField } from 'app/components/form'
-import type { PrebuiltFormProps } from 'app/forms'
+import { DescriptionField, NameField, SideModalForm } from 'app/components/form'
 import { useParams } from 'app/hooks'
 
-import type { VpcRouterFieldValues } from './vpc-router-create'
+import type { EditSideModalFormProps } from '.'
 
 export function EditVpcRouterForm({
+  id = 'edit-vpc-router-form',
   title = 'Edit VPC router',
   onSuccess,
   onError,
+  onDismiss,
   ...props
-}: SetRequired<PrebuiltFormProps<VpcRouterFieldValues, VpcRouter>, 'initialValues'>) {
+}: EditSideModalFormProps<VpcRouterUpdate, VpcRouter>) {
   const parentNames = useParams('orgName', 'projectName', 'vpcName')
   const queryClient = useApiQueryClient()
 
@@ -22,30 +23,33 @@ export function EditVpcRouterForm({
     onSuccess(data) {
       queryClient.invalidateQueries('vpcRoutersGet', parentNames)
       onSuccess?.(data)
+      onDismiss()
     },
     onError,
   })
 
   return (
-    <Form
-      id="edit-vpc-router-form"
+    <SideModalForm
+      id={id}
       title={title}
+      onDismiss={onDismiss}
       onSubmit={({ name, description }) => {
+        invariant(
+          props.initialValues.name,
+          'Expected initial name to be passed to update router'
+        )
         updateRouter.mutate({
           ...parentNames,
           routerName: props.initialValues.name,
           body: { name, description },
         })
       }}
-      mutation={updateRouter}
+      submitDisabled={updateRouter.isLoading}
+      error={updateRouter.error?.error as Error | undefined}
       {...props}
     >
       <NameField id="router-name" />
       <DescriptionField id="router-description" />
-      <Form.Actions>
-        <Form.Submit>{title}</Form.Submit>
-        <Form.Cancel />
-      </Form.Actions>
-    </Form>
+    </SideModalForm>
   )
 }
diff --git a/app/layouts/OrgLayout.tsx b/app/layouts/OrgLayout.tsx
index f25d69184..6522ff519 100644
--- a/app/layouts/OrgLayout.tsx
+++ b/app/layouts/OrgLayout.tsx
@@ -4,8 +4,8 @@ import { useApiQuery } from '@oxide/api'
 import { Pagination } from '@oxide/pagination'
 import { SkipLinkTarget } from '@oxide/ui'
 
+import { PageActionsTarget } from 'app/components/PageActions'
 import { ProjectSelector } from 'app/components/ProjectSelector'
-import { Form } from 'app/components/form'
 
 import { Breadcrumbs } from '../components/Breadcrumbs'
 import { NavLinkItem, Sidebar } from '../components/Sidebar'
@@ -18,23 +18,31 @@ import {
   PageContainer,
 } from './helpers'
 
+// We need to use absolute paths here because sometimes this layout is rendered
+// at `/orgs/:orgName` and other times it's rendered at `/orgs/:orgName/access`.
+// Relative paths would resolve differently in the two locations.
+
 const OrgLayout = () => {
   const { orgName } = useParams('orgName')
   const { data: projects } = useApiQuery('organizationProjectsGet', {
     orgName,
     limit: 10,
   })
+
   return (
     <PageContainer>
       <Sidebar>
         <ProjectSelector />
         <Sidebar.Nav heading="projects">
           {projects?.items.map((project) => (
-            <NavLinkItem key={project.id} to={project.name}>
+            <NavLinkItem key={project.id} to={`/orgs/${orgName}/projects/${project.name}`}>
               {project.name}
             </NavLinkItem>
           ))}
         </Sidebar.Nav>
+        <Sidebar.Nav heading="Organization">
+          <NavLinkItem to={`/orgs/${orgName}/access`}>Access &amp; IAM</NavLinkItem>
+        </Sidebar.Nav>
       </Sidebar>
       <ContentPaneWrapper>
         <ContentPane>
@@ -45,7 +53,7 @@ const OrgLayout = () => {
         </ContentPane>
         <ContentPaneActions>
           <Pagination.Target />
-          <Form.PageActions />
+          <PageActionsTarget />
         </ContentPaneActions>
       </ContentPaneWrapper>
     </PageContainer>
diff --git a/app/layouts/ProjectLayout.tsx b/app/layouts/ProjectLayout.tsx
index ef6c9cc38..b8837e25c 100644
--- a/app/layouts/ProjectLayout.tsx
+++ b/app/layouts/ProjectLayout.tsx
@@ -12,8 +12,8 @@ import {
   Storage16Icon,
 } from '@oxide/ui'
 
+import { PageActionsTarget } from 'app/components/PageActions'
 import { ProjectSelector } from 'app/components/ProjectSelector'
-import { Form } from 'app/components/form'
 import { useParams, useQuickActions } from 'app/hooks'
 
 import { Breadcrumbs } from '../components/Breadcrumbs'
@@ -86,7 +86,7 @@ const ProjectLayout = () => {
         </ContentPane>
         <ContentPaneActions>
           <Pagination.Target />
-          <Form.PageActions />
+          <PageActionsTarget />
         </ContentPaneActions>
       </ContentPaneWrapper>
     </PageContainer>
diff --git a/app/layouts/RootLayout.tsx b/app/layouts/RootLayout.tsx
index 80f7549cc..c7034538f 100644
--- a/app/layouts/RootLayout.tsx
+++ b/app/layouts/RootLayout.tsx
@@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom'
 import { Pagination } from '@oxide/pagination'
 import { SkipLinkTarget } from '@oxide/ui'
 
-import { Form } from 'app/components/form'
+import { PageActionsTarget } from 'app/components/PageActions'
 
 import { Breadcrumbs } from '../components/Breadcrumbs'
 import { TopBar } from '../components/TopBar'
@@ -18,7 +18,7 @@ import {
 const RootLayout = () => {
   return (
     <PageContainer>
-      <Sidebar>TBD</Sidebar>
+      <Sidebar></Sidebar>
       <ContentPaneWrapper>
         <ContentPane>
           <TopBar />
@@ -28,7 +28,7 @@ const RootLayout = () => {
         </ContentPane>
         <ContentPaneActions>
           <Pagination.Target />
-          <Form.PageActions />
+          <PageActionsTarget />
         </ContentPaneActions>
       </ContentPaneWrapper>
     </PageContainer>
diff --git a/app/layouts/SettingsLayout.tsx b/app/layouts/SettingsLayout.tsx
index 92bdfb7a3..5058fffa0 100644
--- a/app/layouts/SettingsLayout.tsx
+++ b/app/layouts/SettingsLayout.tsx
@@ -4,7 +4,7 @@ import { Outlet, matchPath, useLocation, useNavigate } from 'react-router-dom'
 import { Pagination } from '@oxide/pagination'
 import { Button, DirectionLeftIcon, SkipLinkTarget } from '@oxide/ui'
 
-import { Form } from 'app/components/form'
+import { PageActionsTarget } from 'app/components/PageActions'
 import { useQuickActions } from 'app/hooks'
 
 import { Breadcrumbs } from '../components/Breadcrumbs'
@@ -65,7 +65,7 @@ const SettingsLayout = () => {
         </ContentPane>
         <ContentPaneActions>
           <Pagination.Target />
-          <Form.PageActions />
+          <PageActionsTarget />
         </ContentPaneActions>
       </ContentPaneWrapper>
     </PageContainer>
diff --git a/app/layouts/helpers.css b/app/layouts/helpers.css
index 4bad737e0..4d1e6c3cc 100644
--- a/app/layouts/helpers.css
+++ b/app/layouts/helpers.css
@@ -3,7 +3,34 @@
 }
 
 .ox-sidebar {
-  @apply overflow-auto border-r px-3 pb-6 pt-6 bg-default border-secondary;
+  @apply overflow-auto border-r px-3 pt-6 bg-default border-secondary;
+}
+
+.ox-sidebar .ox-sidebar-nav:last-of-type {
+  @apply flex-grow;
+}
+
+.ox-sidebar-nav {
+  @apply mt-6;
+}
+
+.ox-sidebar .ox-sidebar-nav:first-of-type {
+  @apply mt-0;
+}
+
+@media screen and (max-height: 600px) {
+  .ox-sidebar-nav,
+  .ox-sidebar .ox-sidebar-nav:last-of-type {
+    @apply flex-grow-0;
+  }
+
+  .ox-sidebar-footer {
+    @apply mt-4 pb-6;
+
+    & .hidden {
+      display: block;
+    }
+  }
 }
 
 .ox-content-pane-wrapper {
diff --git a/app/main.tsx b/app/main.tsx
index a3272c08e..97e03126e 100644
--- a/app/main.tsx
+++ b/app/main.tsx
@@ -8,6 +8,13 @@ import { ErrorBoundary } from './components/ErrorBoundary'
 import { QuickActions, ToastProvider } from './hooks'
 import { Router } from './routes'
 
+if (process.env.SHA) {
+  console.info(
+    'Oxide Web Console version',
+    `https://github.com/oxidecomputer/console/commits/${process.env.SHA}`
+  )
+}
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
diff --git a/app/pages/LoginPage.tsx b/app/pages/LoginPage.tsx
index 1586e779e..4de350415 100644
--- a/app/pages/LoginPage.tsx
+++ b/app/pages/LoginPage.tsx
@@ -63,7 +63,7 @@ export default function LoginPage() {
       </Button>
       <Button
         type="submit"
-        variant="secondary"
+        variant="default"
         className="w-full"
         disabled={loginPost.isLoading}
         onClick={() => loginPost.mutate({ body: { username: 'unprivileged' } })}
diff --git a/app/pages/OrgAccessPage.tsx b/app/pages/OrgAccessPage.tsx
new file mode 100644
index 000000000..d06161c6a
--- /dev/null
+++ b/app/pages/OrgAccessPage.tsx
@@ -0,0 +1,110 @@
+import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
+import { useMemo, useState } from 'react'
+
+import {
+  orgRoleOrder,
+  setUserRole,
+  useApiMutation,
+  useApiQueryClient,
+  useUserAccessRows,
+} from '@oxide/api'
+import type { OrganizationRole, UserAccessRow } from '@oxide/api'
+import { useApiQuery } from '@oxide/api'
+import { Table, createTable, getActionsCol } from '@oxide/table'
+import { Access24Icon, Badge, Button, PageHeader, PageTitle, TableActions } from '@oxide/ui'
+
+import { OrgAccessAddUserSideModal, OrgAccessEditUserSideModal } from 'app/forms/org-access'
+import { useParams } from 'app/hooks'
+
+type UserRow = UserAccessRow<OrganizationRole>
+
+const table = createTable().setRowType<UserRow>()
+
+export const OrgAccessPage = () => {
+  const [addModalOpen, setAddModalOpen] = useState(false)
+  const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
+  const orgParams = useParams('orgName')
+  const { data: policy } = useApiQuery('organizationGetPolicy', orgParams)
+
+  const rows = useUserAccessRows(policy, orgRoleOrder)
+
+  const queryClient = useApiQueryClient()
+  const updatePolicy = useApiMutation('organizationPutPolicy', {
+    onSuccess: () => queryClient.invalidateQueries('organizationGetPolicy', orgParams),
+    // TODO: handle 403
+  })
+
+  // TODO: checkboxes and bulk delete? not sure
+  // TODO: disable delete on permissions you can't delete
+
+  const columns = useMemo(
+    () => [
+      table.createDataColumn('id', { header: 'ID' }),
+      table.createDataColumn('name', { header: 'Name' }),
+      table.createDataColumn('roleName', {
+        header: 'Role',
+        cell: (info) => <Badge color="neutral">{info.getValue()}</Badge>,
+      }),
+      table.createDisplayColumn(
+        getActionsCol((row) => [
+          {
+            label: 'Change role',
+            onActivate: () => setEditingUserRow(row),
+          },
+          // TODO: only show if you have permission to do this
+          {
+            label: 'Delete',
+            onActivate() {
+              // TODO: confirm delete
+              updatePolicy.mutate({
+                ...orgParams,
+                // we know policy is there, otherwise there's no row to display
+                body: setUserRole(row.id, null, policy!),
+              })
+            },
+          },
+        ])
+      ),
+    ],
+    [policy, orgParams, updatePolicy]
+  )
+
+  const tableInstance = useTableInstance(table, {
+    columns,
+    data: rows,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <>
+      <PageHeader>
+        <PageTitle icon={<Access24Icon />}>Access &amp; IAM</PageTitle>
+      </PageHeader>
+
+      <TableActions>
+        <Button size="xs" variant="default" onClick={() => setAddModalOpen(true)}>
+          Add user to organization
+        </Button>
+      </TableActions>
+      {policy && (
+        <OrgAccessAddUserSideModal
+          isOpen={addModalOpen}
+          onDismiss={() => setAddModalOpen(false)}
+          onSuccess={() => setAddModalOpen(false)}
+          policy={policy}
+        />
+      )}
+      {policy && editingUserRow && (
+        <OrgAccessEditUserSideModal
+          isOpen={!!editingUserRow}
+          onDismiss={() => setEditingUserRow(null)}
+          onSuccess={() => setEditingUserRow(null)}
+          policy={policy}
+          userId={editingUserRow.id}
+          initialValues={{ roleName: editingUserRow.roleName }}
+        />
+      )}
+      <Table table={tableInstance} />
+    </>
+  )
+}
diff --git a/app/pages/OrgsPage.tsx b/app/pages/OrgsPage.tsx
index ea8bca644..394dbe94d 100644
--- a/app/pages/OrgsPage.tsx
+++ b/app/pages/OrgsPage.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 
 import type { Organization } from '@oxide/api'
 import { useApiQueryClient } from '@oxide/api'
@@ -15,6 +15,9 @@ import {
   buttonStyle,
 } from '@oxide/ui'
 
+import { CreateOrgSideModalForm } from 'app/forms/org-create'
+import { EditOrgSideModalForm } from 'app/forms/org-edit'
+
 import { useQuickActions } from '../hooks'
 
 const EmptyState = () => (
@@ -27,9 +30,16 @@ const EmptyState = () => (
   />
 )
 
-const OrgsPage = () => {
-  const queryClient = useApiQueryClient()
+interface OrgsPageProps {
+  modal?: 'createOrg' | 'editOrg'
+}
+
+const OrgsPage = ({ modal }: OrgsPageProps) => {
+  const navigate = useNavigate()
+  const location = useLocation()
+
   const { Table, Column } = useQueryTable('organizationsGet', {})
+  const queryClient = useApiQueryClient()
 
   const { data: orgs } = useApiQuery('organizationsGet', {
     limit: 10, // to have same params as QueryTable
@@ -42,6 +52,12 @@ const OrgsPage = () => {
   })
 
   const makeActions = (org: Organization): MenuAction[] => [
+    {
+      label: 'Edit',
+      onActivate() {
+        navigate(`edit/${org.name}`, { state: org })
+      },
+    },
     {
       label: 'Delete',
       onActivate: () => {
@@ -50,7 +66,6 @@ const OrgsPage = () => {
     },
   ]
 
-  const navigate = useNavigate()
   useQuickActions(
     useMemo(
       () => [
@@ -71,7 +86,7 @@ const OrgsPage = () => {
         <PageTitle icon={<Folder24Icon />}>Organizations</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to="new" className={buttonStyle({ variant: 'secondary', size: 'xs' })}>
+        <Link to="new" className={buttonStyle({ variant: 'default', size: 'xs' })}>
           New Organization
         </Link>
       </TableActions>
@@ -80,6 +95,15 @@ const OrgsPage = () => {
         <Column accessor="description" />
         <Column accessor="timeModified" header="Last updated" cell={DateCell} />
       </Table>
+      <CreateOrgSideModalForm
+        isOpen={modal === 'createOrg'}
+        onDismiss={() => navigate('..')}
+      />
+      <EditOrgSideModalForm
+        isOpen={modal === 'editOrg'}
+        onDismiss={() => navigate('../..')}
+        initialValues={location.state}
+      />
     </>
   )
 }
diff --git a/app/pages/ProjectsPage.tsx b/app/pages/ProjectsPage.tsx
index e5a3e8f70..11699750a 100644
--- a/app/pages/ProjectsPage.tsx
+++ b/app/pages/ProjectsPage.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 
 import type { Project } from '@oxide/api'
 import { useApiMutation, useApiQuery, useApiQueryClient } from '@oxide/api'
@@ -14,6 +14,9 @@ import {
   buttonStyle,
 } from '@oxide/ui'
 
+import CreateProjectSideModalForm from 'app/forms/project-create'
+import EditProjectSideModalForm from 'app/forms/project-edit'
+
 import { useParams, useQuickActions } from '../hooks'
 
 const EmptyState = () => (
@@ -26,7 +29,14 @@ const EmptyState = () => (
   />
 )
 
-const ProjectsPage = () => {
+interface ProjectsPageProps {
+  modal?: 'createProject' | 'editProject'
+}
+
+const ProjectsPage = ({ modal }: ProjectsPageProps) => {
+  const navigate = useNavigate()
+  const location = useLocation()
+
   const queryClient = useApiQueryClient()
   const { orgName } = useParams('orgName')
   const { Table, Column } = useQueryTable('organizationProjectsGet', {
@@ -45,6 +55,12 @@ const ProjectsPage = () => {
   })
 
   const makeActions = (project: Project): MenuAction[] => [
+    {
+      label: 'Edit',
+      onActivate: () => {
+        navigate(`./edit/${project.name}`, { state: project })
+      },
+    },
     {
       label: 'Delete',
       onActivate: () => {
@@ -53,7 +69,6 @@ const ProjectsPage = () => {
     },
   ]
 
-  const navigate = useNavigate()
   useQuickActions(
     useMemo(
       () => [
@@ -74,10 +89,7 @@ const ProjectsPage = () => {
         <PageTitle icon={<Folder24Icon />}>Projects</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link
-          to={`/orgs/${orgName}/projects/new`}
-          className={buttonStyle({ size: 'xs', variant: 'secondary' })}
-        >
+        <Link to="new" className={buttonStyle({ variant: 'default', size: 'xs' })}>
           New Project
         </Link>
       </TableActions>
@@ -89,6 +101,15 @@ const ProjectsPage = () => {
         <Column accessor="description" />
         <Column accessor="timeModified" header="Last updated" cell={DateCell} />
       </Table>
+      <CreateProjectSideModalForm
+        isOpen={modal === 'createProject'}
+        onDismiss={() => navigate('..')}
+      />
+      <EditProjectSideModalForm
+        isOpen={modal === 'editProject'}
+        onDismiss={() => navigate('../..')}
+        initialValues={location.state}
+      />
     </>
   )
 }
diff --git a/app/pages/__tests__/click-everything.e2e.ts b/app/pages/__tests__/click-everything.e2e.ts
index 8e68af4d0..becc86561 100644
--- a/app/pages/__tests__/click-everything.e2e.ts
+++ b/app/pages/__tests__/click-everything.e2e.ts
@@ -53,7 +53,6 @@ test("Click through everything and make it's all there", async ({ page }) => {
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=textbox[name="Disk name"]',
-    'role=radiogroup[name="Block size (Bytes)"]',
     'role=spinbutton[name="Disk size (GiB)"]',
     'role=radiogroup[name="Network interface"]',
     'role=textbox[name="Hostname"]',
@@ -92,14 +91,11 @@ test("Click through everything and make it's all there", async ({ page }) => {
     'role=spinbutton[name="Size (GiB)"]',
     'role=button[name="Create Disk"][disabled]',
   ])
-  await page.click('role=button[name="Close form"]')
-
-  await page.click('role=button[name="Create new disk"]')
   await page.click('role=button[name="Cancel"]')
 
   // Attach existing disk form
   await page.click('role=button[name="Attach existing disk"]')
-  await page.click('role=combobox[name="Disk name"]')
+  await page.click('role=button[name="Disk name"]')
   await expectVisible(page, ['role=option[name="disk-3"]', 'role=option[name="disk-4"]'])
 
   // Attach disk-3
@@ -120,15 +116,15 @@ test("Click through everything and make it's all there", async ({ page }) => {
     'role=heading[name="Add network interface"]',
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
-    'role=combobox[name="VPC"]',
-    'role=combobox[name="Subnet"]',
+    'role=button[name="VPC"]', // listbox
+    'role=button[name="Subnet"]', // listbox
     'role=textbox[name="IP Address"]',
   ])
 
   await page.fill('role=textbox[name="Name"]', 'nic-2')
-  await page.click('role=combobox[name="VPC"]')
+  await page.click('role=button[name="VPC"]')
   await page.click('role=option[name="mock-vpc"]')
-  await page.click('role=combobox[name="Subnet"]')
+  await page.click('role=button[name="Subnet"]')
   await page.click('role=option[name="mock-subnet"]')
   await page.click('role=button[name="Add network interface"]')
   await expectVisible(page, ['role=cell[name="nic-2"]'])
@@ -171,7 +167,7 @@ test("Click through everything and make it's all there", async ({ page }) => {
   // Create disk form
   await page.click('role=link[name="New Disk"]')
   await expectVisible(page, [
-    'role=heading[name*="Create disk"]',
+    'role=heading[name*="Create Disk"]',
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
     'role=radiogroup[name="Block size (Bytes)"]',
@@ -214,7 +210,7 @@ test("Click through everything and make it's all there", async ({ page }) => {
   ])
 
   // New VPC form
-  await page.click('role=link[name="New VPC"]')
+  await page.click('role=link[name="New Vpc"]')
   await expectVisible(page, [
     'role=textbox[name="Name"]',
     'role=textbox[name="Description"]',
@@ -233,7 +229,6 @@ test("Click through everything and make it's all there", async ({ page }) => {
     'role=tab[name="System Routes"]',
     'role=tab[name="Routers"]',
     'role=tab[name="Firewall Rules"]',
-    'role=tab[name="Gateways"]',
     'role=cell[name="mock-subnet"]',
     // TODO: assert minitable contents
   ])
@@ -275,11 +270,11 @@ test("Click through everything and make it's all there", async ({ page }) => {
   await expectVisible(page, ['role=cell[name="system"] >> nth=0'])
   await page.click('role=button[name="New router"]')
   await expectVisible(page, [
-    'role=heading[name="Create VPC router"]',
-    'role=button[name="Create VPC router"][disabled]',
+    'role=heading[name="Create VPC Router"]',
+    'role=button[name="Create VPC Router"][disabled]',
   ])
   await page.fill('role=textbox[name="Name"]', 'new-router')
-  await page.click('role=button[name="Create VPC router"]')
+  await page.click('role=button[name="Create VPC Router"]')
   await expectVisible(page, ['role=cell[name="new-router"]', 'role=cell[name="custom"]'])
 
   // Firewall rules
@@ -290,8 +285,4 @@ test("Click through everything and make it's all there", async ({ page }) => {
     'role=cell[name="allow-rdp"]',
     'role=cell[name="allow-ssh"]',
   ])
-
-  // Gateways
-  await page.click('role=tab[name="Gateways"]')
-  // not implemeneted
 })
diff --git a/app/pages/__tests__/org-access.e2e.ts b/app/pages/__tests__/org-access.e2e.ts
new file mode 100644
index 000000000..3d649918f
--- /dev/null
+++ b/app/pages/__tests__/org-access.e2e.ts
@@ -0,0 +1,62 @@
+import { test } from '@playwright/test'
+
+import { expectNotVisible, expectRowVisible, expectVisible } from 'app/util/e2e'
+
+test('Click through org access page', async ({ page }) => {
+  await page.goto('/orgs/maze-war')
+
+  // page is there, we see AL but not FDR
+  await page.click('role=link[name*="Access & IAM"]')
+  await expectVisible(page, ['role=heading[name*="Access & IAM"]'])
+  await expectRowVisible(page, 'user-1', ['user-1', '', 'admin'])
+  await expectNotVisible(page, ['role=cell[name="user-2"]'])
+
+  // Add FDR as collab
+  await page.click('role=button[name="Add user to organization"]')
+  await expectVisible(page, ['role=heading[name*="Add user to organization"]'])
+
+  await page.click('role=button[name="User"]')
+  // only users not already on the org should be visible
+  await expectNotVisible(page, ['role=option[name="user-1"]'])
+  await expectVisible(page, ['role=option[name="user-2"]'])
+
+  await page.click('role=option[name="user-2"]')
+
+  await page.click('role=button[name="Role"]')
+  await expectVisible(page, [
+    'role=option[name="Admin"]',
+    'role=option[name="Collaborator"]',
+    'role=option[name="Viewer"]',
+  ])
+
+  await page.click('role=option[name="Collaborator"]')
+  await page.click('role=button[name="Add user"]')
+
+  // FDR shows up in the table
+  await expectRowVisible(page, 'user-2', ['user-2', '', 'collaborator'])
+
+  // now change FDR's role from collab to viewer
+  await page
+    .locator('role=row', { hasText: 'user-2' })
+    .locator('role=button[name="Row actions"]')
+    .click()
+  await page.click('role=menuitem[name="Change role"]')
+
+  await expectVisible(page, ['role=heading[name*="Change user role"]'])
+  await expectVisible(page, ['button:has-text("Collaborator")'])
+
+  await page.click('role=button[name="Role"]')
+  await page.click('role=option[name="Viewer"]')
+  await page.click('role=button[name="Update role"]')
+
+  await expectRowVisible(page, 'user-2', ['user-2', '', 'viewer'])
+
+  // now delete FDR
+  await page
+    .locator('role=row', { hasText: 'user-2' })
+    .locator('role=button[name="Row actions"]')
+    .click()
+  await expectVisible(page, ['role=cell[name=user-2]'])
+  await page.click('role=menuitem[name="Delete"]')
+  await expectNotVisible(page, ['role=cell[name=user-2]'])
+})
diff --git a/app/pages/__tests__/project-access.e2e.ts b/app/pages/__tests__/project-access.e2e.ts
index e6f72c21c..f70473f60 100644
--- a/app/pages/__tests__/project-access.e2e.ts
+++ b/app/pages/__tests__/project-access.e2e.ts
@@ -5,28 +5,22 @@ import { expectNotVisible, expectRowVisible, expectVisible } from 'app/util/e2e'
 test('Click through project access page', async ({ page }) => {
   await page.goto('/orgs/maze-war/projects/mock-project')
 
+  // page is there, we see AL but not FDR
   await page.click('role=link[name*="Access & IAM"]')
   await expectVisible(page, ['role=heading[name*="Access & IAM"]'])
-  await expectRowVisible(page, 'user-1', [
-    'user-1',
-    'Abraham Lincoln',
-    'Prohibited',
-    'Prohibited',
-    'Permitted',
-  ])
-
-  await expectNotVisible(page, ['role=cell[name="Franklin Delano Roosevelt"]'])
+  await expectRowVisible(page, 'user-1', ['user-1', '', 'admin'])
+  await expectNotVisible(page, ['role=cell[name="user-2"]'])
 
+  // Add FDR as collab
   await page.click('role=button[name="Add user to project"]')
   await expectVisible(page, ['role=heading[name*="Add user to project"]'])
 
   await page.click('role=button[name="User"]')
-  await expectVisible(page, [
-    'role=option[name="Abraham Lincoln"]',
-    'role=option[name="Franklin Delano Roosevelt"]',
-  ])
+  // only users not already on the project should be visible
+  await expectNotVisible(page, ['role=option[name="user-1"]'])
+  await expectVisible(page, ['role=option[name="user-2"]'])
 
-  await page.click('role=option[name="Franklin Delano Roosevelt"]')
+  await page.click('role=option[name="user-2"]')
 
   await page.click('role=button[name="Role"]')
   await expectVisible(page, [
@@ -36,14 +30,33 @@ test('Click through project access page', async ({ page }) => {
   ])
 
   await page.click('role=option[name="Collaborator"]')
-
   await page.click('role=button[name="Add user"]')
 
-  await expectRowVisible(page, 'user-2', [
-    'user-2',
-    'Franklin Delano Roosevelt',
-    'Prohibited',
-    'Permitted',
-    'Prohibited',
-  ])
+  // FDR shows up in the table
+  await expectRowVisible(page, 'user-2', ['user-2', '', 'collaborator'])
+
+  // now change FDR's role from collab to viewer
+  await page
+    .locator('role=row', { hasText: 'user-2' })
+    .locator('role=button[name="Row actions"]')
+    .click()
+  await page.click('role=menuitem[name="Change role"]')
+
+  await expectVisible(page, ['role=heading[name*="Change user role"]'])
+  await expectVisible(page, ['button:has-text("Collaborator")'])
+
+  await page.click('role=button[name="Role"]')
+  await page.click('role=option[name="Viewer"]')
+  await page.click('role=button[name="Update role"]')
+
+  await expectRowVisible(page, 'user-2', ['user-2', '', 'viewer'])
+
+  // now delete FDR
+  await page
+    .locator('role=row', { hasText: 'user-2' })
+    .locator('role=button[name="Row actions"]')
+    .click()
+  await expectVisible(page, ['role=cell[name=user-2]'])
+  await page.click('role=menuitem[name="Delete"]')
+  await expectNotVisible(page, ['role=cell[name=user-2]'])
 })
diff --git a/app/pages/__tests__/project-selector.e2e.ts b/app/pages/__tests__/project-selector.e2e.ts
new file mode 100644
index 000000000..8e2b75949
--- /dev/null
+++ b/app/pages/__tests__/project-selector.e2e.ts
@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test'
+
+import { expectVisible } from 'app/util/e2e'
+
+test('Project selector', async ({ page }) => {
+  // create a second project
+  await page.goto('/orgs/maze-war/projects/new')
+  await page.fill('role=textbox[name="Name"]', 'other-project')
+  await page.click('role=button[name="Create project"]')
+
+  // go to projects page and make sure they're both there
+  await page.click('role=link[name="Projects"]')
+  await expect(page).toHaveURL('/orgs/maze-war/projects')
+  await expectVisible(page, [
+    'role=cell[name="mock-project"]',
+    'role=cell[name="other-project"]',
+  ])
+
+  // switcher button is present, has text indicating no project selected
+  await expect(page.locator('role=button[name="Switch project"]')).toHaveText(
+    'maze-warselect a project'
+  )
+  await page.click('role=button[name="Switch project"]')
+  await expectVisible(page, [
+    'role=menuitem[name="mock-project"]',
+    'role=menuitem[name="other-project"]',
+  ])
+
+  // picking mock-project in the menu takes you there
+  await page.click('role=menuitem[name="mock-project"]')
+  await expect(page).toHaveURL('/orgs/maze-war/projects/mock-project/instances')
+  await expect(page.locator('role=button[name="Switch project"]')).toHaveText(
+    'maze-warmock-project'
+  )
+
+  // picking other-project in the menu takes you there
+  await page.click('role=button[name="Switch project"]')
+  await page.click('role=menuitem[name="other-project"]')
+  await expect(page).toHaveURL('/orgs/maze-war/projects/other-project/instances')
+  await expect(page.locator('role=button[name="Switch project"]')).toHaveText(
+    'maze-warother-project'
+  )
+})
diff --git a/app/pages/__tests__/row-select.e2e.ts b/app/pages/__tests__/row-select.e2e.ts
index 56b106090..334ca10fa 100644
--- a/app/pages/__tests__/row-select.e2e.ts
+++ b/app/pages/__tests__/row-select.e2e.ts
@@ -2,7 +2,10 @@ import { expect, test } from '@playwright/test'
 
 import { forEach } from 'app/util/e2e'
 
-// this could easily be done as a testing-lib test but I want it in a real table
+// This could easily be done as a testing-lib test but I want it in a real
+// table. The .is-selected asserts are slightly brittle (and contrary to our
+// usual testing philosophy), but they let us make sure selection is being
+// passed through to the UI Table.
 
 test('Row select works as expected', async ({ page }) => {
   // SETUP
@@ -37,19 +40,23 @@ test('Row select works as expected', async ({ page }) => {
 
   await expect(bodyCheckboxes).toHaveCount(4)
   await expectRowsAllUnchecked()
+  await expect(page.locator('.is-selected')).toHaveCount(0)
 
   // check first row, header is now mixed
   await bodyCheckboxes.first().check()
+  await expect(page.locator('.is-selected')).toHaveCount(1)
   await expectHeadMixed()
 
   // uncheck first row, header goes back to empty
   await bodyCheckboxes.first().uncheck()
   await expectHeadNotMixed()
+  await expect(page.locator('.is-selected')).toHaveCount(0)
 
   // can also uncheck the row by checking and unchecking the header checkbox
   await bodyCheckboxes.first().check()
   await headCheckbox.click() // first click selects all
   await expectRowsAllChecked()
+  await expect(page.locator('.is-selected')).toHaveCount(4)
   await headCheckbox.click() // second click unselects all
   await expectRowsAllUnchecked()
 
@@ -57,9 +64,11 @@ test('Row select works as expected', async ({ page }) => {
   await bodyCheckboxes.nth(0).check()
   await bodyCheckboxes.nth(1).check()
   await bodyCheckboxes.nth(2).check()
+  await expect(page.locator('.is-selected')).toHaveCount(3)
   await expectHeadMixed()
 
   // check the 4th and it switches to checked
   await bodyCheckboxes.nth(3).check()
   await expect(headCheckbox).toBeChecked()
+  await expect(page.locator('.is-selected')).toHaveCount(4)
 })
diff --git a/app/pages/__tests__/ssh-keys.e2e.ts b/app/pages/__tests__/ssh-keys.e2e.ts
new file mode 100644
index 000000000..4916d2bdd
--- /dev/null
+++ b/app/pages/__tests__/ssh-keys.e2e.ts
@@ -0,0 +1,29 @@
+import { test } from '@playwright/test'
+
+import { expectNotVisible, expectRowVisible, expectVisible } from 'app/util/e2e'
+
+test('SSH keys', async ({ page }) => {
+  await page.goto('/settings/ssh-keys')
+
+  await expectVisible(page, ['role=heading[name*="SSH Keys"]', 'text="No SSH keys"'])
+
+  // there are two of these, but it doesn't matter which one we click
+  await page.click('role=button[name="Add SSH key"]')
+
+  // fill out form and submit
+  await page.fill('role=textbox[name="Name"]', 'my-key')
+  await page.fill('role=textbox[name="Description"]', 'definitely a key')
+  await page.fill('role=textbox[name="Public key"]', 'key contents')
+  await page.click('role=button[name="Add SSH key"]')
+
+  // it's there in the table
+  await expectNotVisible(page, ['text="No SSH keys"'])
+  await expectRowVisible(page, 'my-key', ['', 'my-key', 'definitely a key'])
+
+  // now delete it
+  await page.click('role=button[name="Row actions"]')
+  await page.click('role=menuitem[name="Delete"]')
+
+  await expectNotVisible(page, ['role=cell[name="my-key"]'])
+  await expectVisible(page, ['text="No SSH keys"'])
+})
diff --git a/app/pages/project/access/AccessPage.tsx b/app/pages/project/access/AccessPage.tsx
deleted file mode 100644
index 79d598379..000000000
--- a/app/pages/project/access/AccessPage.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
-import { useMemo, useState } from 'react'
-
-import { useApiQuery } from '@oxide/api'
-import { Table, createTable } from '@oxide/table'
-import {
-  Access24Icon,
-  Button,
-  PageHeader,
-  PageTitle,
-  SideModal,
-  Success16Icon,
-  TableActions,
-  Unauthorized12Icon,
-} from '@oxide/ui'
-import { groupBy } from '@oxide/util'
-
-import { AddUserToProjectForm } from 'app/forms/add-user-to-project'
-import { useParams } from 'app/hooks'
-
-const AccessIcon = ({ value }: { value: boolean }) => (
-  <div className="text-center">
-    {value ? (
-      <Success16Icon title="Permitted" className="text-accent" />
-    ) : (
-      <Unauthorized12Icon title="Prohibited" className="text-error" />
-    )}
-  </div>
-)
-
-type RoleRow = {
-  id: string
-  name: string
-  admin: boolean
-  collaborator: boolean
-  viewer: boolean
-}
-
-const table = createTable().setRowType<RoleRow>()
-
-const columns = [
-  table.createDataColumn('id', { header: 'ID' }),
-  table.createDataColumn('name', { header: 'Name' }),
-  table.createDataColumn('viewer', {
-    header: 'Viewer',
-    cell: (info) => <AccessIcon value={info.getValue()} />,
-  }),
-  table.createDataColumn('collaborator', {
-    header: 'Collaborator',
-    cell: (info) => <AccessIcon value={info.getValue()} />,
-  }),
-  table.createDataColumn('admin', {
-    header: 'Admin',
-    cell: (info) => <AccessIcon value={info.getValue()} />,
-  }),
-]
-
-// when you build this page for real, check the git history of this file. there
-// might be something useful in the old placeholder
-export const AccessPage = () => {
-  const [addModalOpen, setAddModalOpen] = useState(false)
-  const projectParams = useParams('orgName', 'projectName')
-  const { data: policy } = useApiQuery(
-    'organizationProjectsGetProjectPolicy',
-    projectParams
-  )
-
-  const { data: users } = useApiQuery('usersGet', { limit: 200 })
-
-  // HACK: because the policy has no names, we are fetching ~all the users,
-  // putting them in a dictionary, and adding the names to the rows
-  const usersDict = useMemo(
-    () => Object.fromEntries((users?.items || []).map((u) => [u.id, u])),
-    [users]
-  )
-
-  const rows: RoleRow[] = useMemo(() => {
-    // each group represents a user with multiple role assignments
-    const groups = groupBy(policy?.roleAssignments || [], (u) => u.identityId)
-    return Object.entries(groups).map(([userId, roleAssignments]) => ({
-      id: userId,
-      name: usersDict[userId]?.name || '',
-      admin: roleAssignments.some((ra) => ra.roleName === 'admin'),
-      collaborator: roleAssignments.some((ra) => ra.roleName === 'collaborator'),
-      viewer: roleAssignments.some((ra) => ra.roleName === 'viewer'),
-    }))
-  }, [policy, usersDict])
-
-  // TODO: delete action on table rows
-  // TODO: checkboxes and bulk delete? not sure
-  // TODO: disable delete on permissions you can't delete
-
-  const tableInstance = useTableInstance(table, {
-    columns,
-    data: rows,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
-  return (
-    <>
-      <PageHeader>
-        <PageTitle icon={<Access24Icon />}>Access &amp; IAM</PageTitle>
-      </PageHeader>
-
-      <TableActions>
-        <Button size="xs" variant="secondary" onClick={() => setAddModalOpen(true)}>
-          Add user to project
-        </Button>
-      </TableActions>
-      <SideModal
-        id="add-user-to-project-modal"
-        isOpen={addModalOpen}
-        onDismiss={() => setAddModalOpen(false)}
-      >
-        <AddUserToProjectForm
-          onSuccess={() => setAddModalOpen(false)}
-          onDismiss={() => setAddModalOpen(false)}
-        />
-      </SideModal>
-      <Table table={tableInstance} />
-    </>
-  )
-}
diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx
new file mode 100644
index 000000000..e656d1156
--- /dev/null
+++ b/app/pages/project/access/ProjectAccessPage.tsx
@@ -0,0 +1,115 @@
+import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
+import { useMemo, useState } from 'react'
+
+import {
+  projectRoleOrder,
+  setUserRole,
+  useApiMutation,
+  useApiQueryClient,
+  useUserAccessRows,
+} from '@oxide/api'
+import type { ProjectRole, UserAccessRow } from '@oxide/api'
+import { useApiQuery } from '@oxide/api'
+import { Table, createTable, getActionsCol } from '@oxide/table'
+import { Access24Icon, Badge, Button, PageHeader, PageTitle, TableActions } from '@oxide/ui'
+
+import {
+  ProjectAccessAddUserSideModal,
+  ProjectAccessEditUserSideModal,
+} from 'app/forms/project-access'
+import { useParams } from 'app/hooks'
+
+type UserRow = UserAccessRow<ProjectRole>
+
+const table = createTable().setRowType<UserRow>()
+
+export const ProjectAccessPage = () => {
+  const [addModalOpen, setAddModalOpen] = useState(false)
+  const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
+  const projectParams = useParams('orgName', 'projectName')
+  const { data: policy } = useApiQuery(
+    'organizationProjectsGetProjectPolicy',
+    projectParams
+  )
+
+  const rows = useUserAccessRows(policy, projectRoleOrder)
+
+  const queryClient = useApiQueryClient()
+  const updatePolicy = useApiMutation('organizationProjectsPutProjectPolicy', {
+    onSuccess: () =>
+      queryClient.invalidateQueries('organizationProjectsGetProjectPolicy', projectParams),
+    // TODO: handle 403
+  })
+
+  // TODO: checkboxes and bulk delete? not sure
+  // TODO: disable delete on permissions you can't delete
+
+  const columns = useMemo(
+    () => [
+      table.createDataColumn('id', { header: 'ID' }),
+      table.createDataColumn('name', { header: 'Name' }),
+      table.createDataColumn('roleName', {
+        header: 'Role',
+        cell: (info) => <Badge color="neutral">{info.getValue()}</Badge>,
+      }),
+      table.createDisplayColumn(
+        getActionsCol((row) => [
+          {
+            label: 'Change role',
+            onActivate: () => setEditingUserRow(row),
+          },
+          // TODO: only show if you have permission to do this
+          {
+            label: 'Delete',
+            onActivate() {
+              // TODO: confirm delete
+              updatePolicy.mutate({
+                ...projectParams,
+                // we know policy is there, otherwise there's no row to display
+                body: setUserRole(row.id, null, policy!),
+              })
+            },
+          },
+        ])
+      ),
+    ],
+    [policy, projectParams, updatePolicy]
+  )
+
+  const tableInstance = useTableInstance(table, {
+    columns,
+    data: rows,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <>
+      <PageHeader>
+        <PageTitle icon={<Access24Icon />}>Access &amp; IAM</PageTitle>
+      </PageHeader>
+
+      <TableActions>
+        <Button size="xs" variant="default" onClick={() => setAddModalOpen(true)}>
+          Add user to project
+        </Button>
+      </TableActions>
+      {policy && (
+        <ProjectAccessAddUserSideModal
+          isOpen={addModalOpen}
+          onDismiss={() => setAddModalOpen(false)}
+          policy={policy}
+        />
+      )}
+      {policy && editingUserRow && (
+        <ProjectAccessEditUserSideModal
+          isOpen={!!editingUserRow}
+          onDismiss={() => setEditingUserRow(null)}
+          policy={policy}
+          userId={editingUserRow.id}
+          initialValues={{ roleName: editingUserRow.roleName }}
+        />
+      )}
+      <Table table={tableInstance} />
+    </>
+  )
+}
diff --git a/app/pages/project/access/index.ts b/app/pages/project/access/index.ts
index 826f39d4d..ae7b26810 100644
--- a/app/pages/project/access/index.ts
+++ b/app/pages/project/access/index.ts
@@ -1 +1 @@
-export * from './AccessPage'
+export * from './ProjectAccessPage'
diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx
index ac1338c38..13971bd1e 100644
--- a/app/pages/project/disks/DisksPage.tsx
+++ b/app/pages/project/disks/DisksPage.tsx
@@ -1,6 +1,11 @@
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
+import type { Disk } from '@oxide/api'
+import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
+import type { MenuAction } from '@oxide/table'
+import { DateCell } from '@oxide/table'
+import { SizeCell } from '@oxide/table'
 import { useQueryTable } from '@oxide/table'
 import {
   EmptyMessage,
@@ -12,6 +17,7 @@ import {
 } from '@oxide/ui'
 
 import { DiskStatusBadge } from 'app/components/StatusBadge'
+import CreateDiskSideModalForm from 'app/forms/disk-create'
 import { useParams } from 'app/hooks'
 
 function AttachedInstance(props: {
@@ -28,7 +34,10 @@ function AttachedInstance(props: {
   })
   const instance = instances?.items.find((i) => i.id === props.instanceId)
   return instance ? (
-    <Link className="text-accent" to={`../../instances/${instance.name}`}>
+    <Link
+      className="text-sans-semi-md text-accent hover:underline"
+      to={`../instances/${instance.name}`}
+    >
       {instance.name}
     </Link>
   ) : null
@@ -44,7 +53,14 @@ const EmptyState = () => (
   />
 )
 
-export function DisksPage() {
+interface DisksPageProps {
+  modal?: 'createDisk'
+}
+
+export function DisksPage({ modal }: DisksPageProps) {
+  const navigate = useNavigate()
+
+  const queryClient = useApiQueryClient()
   const { orgName, projectName } = useParams('orgName', 'projectName')
   const { Table, Column } = useQueryTable(
     'projectDisksGet',
@@ -52,20 +68,32 @@ export function DisksPage() {
     { refetchInterval: 5000 }
   )
 
+  const deleteDisk = useApiMutation('projectDisksDeleteDisk', {
+    onSuccess() {
+      queryClient.invalidateQueries('projectDisksGet', { orgName, projectName })
+    },
+  })
+
+  const makeActions = (disk: Disk): MenuAction[] => [
+    {
+      label: 'Delete',
+      onActivate: () => {
+        deleteDisk.mutate({ orgName, projectName, diskName: disk.name })
+      },
+    },
+  ]
+
   return (
     <>
       <PageHeader>
         <PageTitle icon={<Storage24Icon />}>Disks</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link
-          to={`/orgs/${orgName}/projects/${projectName}/disks/new`}
-          className={buttonStyle({ size: 'xs', variant: 'secondary' })}
-        >
+        <Link to="new" className={buttonStyle({ size: 'xs', variant: 'default' })}>
           New Disk
         </Link>
       </TableActions>
-      <Table emptyState={<EmptyState />}>
+      <Table emptyState={<EmptyState />} makeActions={makeActions}>
         <Column accessor="name" header="Disk" />
         {/* TODO: show info about the instance it's attached to */}
         <Column
@@ -86,12 +114,18 @@ export function DisksPage() {
             ) : null
           }
         />
+        <Column header="Size" accessor="size" cell={SizeCell} />
         <Column
           id="status"
           accessor={(row) => row.state.state}
           cell={({ value }) => <DiskStatusBadge status={value} />}
         />
+        <Column header="Created" accessor="timeCreated" cell={DateCell} />
       </Table>
+      <CreateDiskSideModalForm
+        isOpen={modal === 'createDisk'}
+        onDismiss={() => navigate('..')}
+      />
     </>
   )
 }
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index 0623dbd9d..a63d20744 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -79,7 +79,7 @@ export const InstancesPage = () => {
       <TableActions>
         <Link
           to={`/orgs/${orgName}/projects/${projectName}/instances/new`}
-          className={buttonStyle({ size: 'xs', variant: 'secondary' })}
+          className={buttonStyle({ size: 'xs', variant: 'default' })}
         >
           New Instance
         </Link>
diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx
index 608d63989..713e1c338 100644
--- a/app/pages/project/instances/actions.tsx
+++ b/app/pages/project/instances/actions.tsx
@@ -1,4 +1,5 @@
 import { useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import type { Instance } from '@oxide/api'
 import { useApiMutation } from '@oxide/api'
@@ -27,6 +28,7 @@ export const useMakeInstanceActions = (
   projectParams: { orgName: string; projectName: string },
   options: Options = {}
 ): MakeActions<Instance> => {
+  const navigate = useNavigate()
   const addToast = useToast()
   const successToast = (title: string) =>
     addToast({ icon: <Success16Icon />, title, timeout: 5000 })
@@ -78,6 +80,12 @@ export const useMakeInstanceActions = (
         },
         disabled: !instanceCan.reboot(instance),
       },
+      {
+        label: 'View serial console',
+        onActivate() {
+          navigate('serial-console')
+        },
+      },
       {
         label: 'Delete',
         onActivate() {
@@ -92,6 +100,7 @@ export const useMakeInstanceActions = (
           )
         },
         disabled: !instanceCan.delete(instance),
+        className: 'destructive',
       },
     ]
     // TODO: fix this lol
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 712b38bed..d4850fb41 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -1,5 +1,5 @@
 import filesize from 'filesize'
-import { useMemo } from 'react'
+import { memo, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { useApiQuery, useApiQueryClient } from '@oxide/api'
@@ -14,8 +14,30 @@ import { useParams, useQuickActions } from 'app/hooks'
 import { useMakeInstanceActions } from '../actions'
 import { MetricsTab } from './tabs/MetricsTab'
 import { NetworkingTab } from './tabs/NetworkingTab'
+import { SerialConsoleTab } from './tabs/SerialConsoleTab'
 import { StorageTab } from './tabs/StorageTab'
 
+const InstanceTabs = memo(() => (
+  <Tabs id="tabs-instance" fullWidth>
+    <Tab>Storage</Tab>
+    <Tab.Panel>
+      <StorageTab />
+    </Tab.Panel>
+    <Tab>Metrics</Tab>
+    <Tab.Panel>
+      <MetricsTab />
+    </Tab.Panel>
+    <Tab>Networking</Tab>
+    <Tab.Panel>
+      <NetworkingTab />
+    </Tab.Panel>
+    <Tab>Serial Console</Tab>
+    <Tab.Panel>
+      <SerialConsoleTab />
+    </Tab.Panel>
+  </Tabs>
+))
+
 export const InstancePage = () => {
   const instanceParams = useParams('orgName', 'projectName', 'instanceName')
 
@@ -80,20 +102,7 @@ export const InstancePage = () => {
           </PropertiesTable.Row>
         </PropertiesTable>
       </PropertiesTable.Group>
-      <Tabs id="tabs-instance" fullWidth>
-        <Tab>Storage</Tab>
-        <Tab.Panel>
-          <StorageTab />
-        </Tab.Panel>
-        <Tab>Metrics</Tab>
-        <Tab.Panel>
-          <MetricsTab />
-        </Tab.Panel>
-        <Tab>Networking</Tab>
-        <Tab.Panel>
-          <NetworkingTab />
-        </Tab.Panel>
-      </Tabs>
+      <InstanceTabs />
     </>
   )
 }
diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx
new file mode 100644
index 000000000..877573ba2
--- /dev/null
+++ b/app/pages/project/instances/instance/SerialConsolePage.tsx
@@ -0,0 +1,46 @@
+import { Suspense } from 'react'
+import React from 'react'
+
+import { useApiQuery } from '@oxide/api'
+import { Button, Divider, PageHeader, PageTitle, Terminal24Icon } from '@oxide/ui'
+import { MiB } from '@oxide/util'
+
+import { PageActions } from 'app/components/PageActions'
+import { useParams } from 'app/hooks'
+
+const Terminal = React.lazy(() => import('app/components/Terminal'))
+
+export function SerialConsolePage() {
+  const { orgName, projectName, instanceName } = useParams(
+    'orgName',
+    'projectName',
+    'instanceName'
+  )
+
+  const { data, refetch } = useApiQuery('projectInstancesInstanceSerialGet', {
+    maxBytes: 10 * MiB,
+    fromStart: 0,
+    orgName,
+    projectName,
+    instanceName,
+  })
+
+  return (
+    <>
+      <PageHeader>
+        <PageTitle icon={<Terminal24Icon />}>Serial Console</PageTitle>
+      </PageHeader>
+      <Divider className="!m-0 !w-full !-mt-12" />
+      <Suspense fallback={<>Loading</>}>
+        <Terminal className="w-full h-full -mb-10 mt-1" data={data?.data} />
+      </Suspense>
+      <PageActions>
+        <div className="flex h-20 items-center">
+          <Button variant="default" size="sm" onClick={() => refetch()}>
+            Refresh
+          </Button>
+        </div>
+      </PageActions>
+    </>
+  )
+}
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
index de33c8e93..d756c192d 100644
--- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
+++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -10,11 +10,10 @@ import {
   EmptyMessage,
   Info16Icon,
   Networking24Icon,
-  SideModal,
   Tooltip,
 } from '@oxide/ui'
 
-import CreateNetworkInterfaceForm from 'app/forms/network-interface-create'
+import CreateNetworkInterfaceSideModalForm from 'app/forms/network-interface-create'
 import { useParams, useToast } from 'app/hooks'
 
 export function NetworkingTab() {
@@ -80,22 +79,17 @@ export function NetworkingTab() {
         }
         <Button
           size="xs"
-          variant="secondary"
+          variant="default"
           onClick={() => setCreateModalOpen(true)}
           disabled={!instanceStopped}
         >
           Add network interface
         </Button>
-        <SideModal
-          id="create-nic-modal"
+        <CreateNetworkInterfaceSideModalForm
           isOpen={createModalOpen}
           onDismiss={() => setCreateModalOpen(false)}
-        >
-          <CreateNetworkInterfaceForm
-            onSuccess={() => setCreateModalOpen(false)}
-            onDismiss={() => setCreateModalOpen(false)}
-          />
-        </SideModal>
+          onSuccess={() => setCreateModalOpen(false)}
+        />
       </div>
       <Table makeActions={makeActions} emptyState={emptyState}>
         <Column accessor="name" />
diff --git a/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx b/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx
new file mode 100644
index 000000000..14535d070
--- /dev/null
+++ b/app/pages/project/instances/instance/tabs/SerialConsoleTab.tsx
@@ -0,0 +1,43 @@
+import { Suspense, lazy } from 'react'
+
+import { useApiQuery } from '@oxide/api'
+import { Button } from '@oxide/ui'
+import { MiB } from '@oxide/util'
+
+import { PageActions } from 'app/components/PageActions'
+import { useParams } from 'app/hooks'
+
+const Terminal = lazy(() => import('app/components/Terminal'))
+
+export function SerialConsoleTab() {
+  const { orgName, projectName, instanceName } = useParams(
+    'orgName',
+    'projectName',
+    'instanceName'
+  )
+
+  const { data, refetch } = useApiQuery('projectInstancesInstanceSerialGet', {
+    maxBytes: 10 * MiB,
+    fromStart: 0,
+    orgName,
+    projectName,
+    instanceName,
+  })
+
+  return (
+    <>
+      <div className="-mb-10 !w-[calc(100%-var(--content-gutter))] relative">
+        <Suspense fallback={<>Loading</>}>
+          <Terminal className="mb-2 w-full" data={data?.data} />
+        </Suspense>
+      </div>
+      <PageActions>
+        <div className="flex h-20 items-center">
+          <Button variant="default" size="sm" onClick={() => refetch()}>
+            Refresh
+          </Button>
+        </div>
+      </PageActions>
+    </>
+  )
+}
diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index 144ee33e4..042b7cf80 100644
--- a/app/pages/project/instances/instance/tabs/StorageTab.tsx
+++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -1,24 +1,16 @@
 import { getCoreRowModel, useTableInstance } from '@tanstack/react-table'
-import { useMemo } from 'react'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import type { Disk } from '@oxide/api'
 import { useApiMutation, useApiQueryClient } from '@oxide/api'
 import { useApiQuery } from '@oxide/api'
 import type { MenuAction } from '@oxide/table'
 import { DateCell, SizeCell, Table, createTable, getActionsCol } from '@oxide/table'
-import {
-  Button,
-  EmptyMessage,
-  Error16Icon,
-  OpenLink12Icon,
-  SideModal,
-  TableEmptyBox,
-} from '@oxide/ui'
+import { Button, EmptyMessage, Error16Icon, OpenLink12Icon, TableEmptyBox } from '@oxide/ui'
 
 import { DiskStatusBadge } from 'app/components/StatusBadge'
-import AttachDiskForm from 'app/forms/disk-attach'
-import CreateDiskForm from 'app/forms/disk-create'
+import AttachDiskSideModalForm from 'app/forms/disk-attach'
+import CreateDiskSideModalForm from 'app/forms/disk-create'
 import { useParams, useToast } from 'app/hooks'
 
 const OtherDisksEmpty = () => (
@@ -144,7 +136,7 @@ export function StorageTab() {
       <div className="mt-4 flex flex-col gap-3">
         <div className="flex gap-3">
           <Button
-            variant="secondary"
+            variant="default"
             size="sm"
             onClick={() => setShowDiskCreate(true)}
             disabled={!instanceStopped}
@@ -152,7 +144,7 @@ export function StorageTab() {
             Create new disk
           </Button>
           <Button
-            variant="secondary"
+            variant="default"
             size="sm"
             onClick={() => setShowDiskAttach(true)}
             disabled={!instanceStopped}
@@ -170,36 +162,26 @@ export function StorageTab() {
           </span>
         )}
       </div>
-      <SideModal
-        id="create-disk-modal"
+      <CreateDiskSideModalForm
         isOpen={showDiskCreate}
         onDismiss={() => setShowDiskCreate(false)}
-      >
-        <CreateDiskForm
-          onSuccess={(disk) => {
-            setShowDiskCreate(false)
-            attachDisk.mutate({
-              ...instanceParams,
-              body: {
-                name: disk.name,
-              },
-            })
-          }}
-          onDismiss={() => setShowDiskCreate(false)}
-        />
-      </SideModal>
-      <SideModal
-        id="attach-disk-modal"
+        onSuccess={(disk) => {
+          setShowDiskCreate(false)
+          attachDisk.mutate({
+            ...instanceParams,
+            body: {
+              name: disk.name,
+            },
+          })
+        }}
+      />
+      <AttachDiskSideModalForm
         isOpen={showDiskAttach}
+        onSuccess={() => {
+          setShowDiskAttach(false)
+        }}
         onDismiss={() => setShowDiskAttach(false)}
-      >
-        <AttachDiskForm
-          onSuccess={() => {
-            setShowDiskAttach(false)
-          }}
-          onDismiss={() => setShowDiskAttach(false)}
-        />
-      </SideModal>
+      />
     </div>
   )
 }
diff --git a/app/pages/project/networking/VpcPage/VpcPage.tsx b/app/pages/project/networking/VpcPage/VpcPage.tsx
index d44300a27..682de8646 100644
--- a/app/pages/project/networking/VpcPage/VpcPage.tsx
+++ b/app/pages/project/networking/VpcPage/VpcPage.tsx
@@ -54,8 +54,6 @@ export const VpcPage = () => {
         <Tab.Panel>
           <VpcFirewallRulesTab />
         </Tab.Panel>
-        <Tab>Gateways</Tab>
-        <Tab.Panel>Not implemented</Tab.Panel>
       </Tabs>
     </>
   )
diff --git a/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx
index dd26e07b7..f3951ea30 100644
--- a/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx
+++ b/app/pages/project/networking/VpcPage/tabs/VpcFirewallRulesTab.tsx
@@ -13,9 +13,9 @@ import {
   getActionsCol,
   getSelectCol,
 } from '@oxide/table'
-import { Button, EmptyMessage, SideModal, TableEmptyBox } from '@oxide/ui'
+import { Button, EmptyMessage, TableEmptyBox } from '@oxide/ui'
 
-import { CreateFirewallRuleForm } from 'app/forms/firewall-rules-create'
+import { CreateFirewallRuleSideModalForm } from 'app/forms/firewall-rules-create'
 import { EditFirewallRuleForm } from 'app/forms/firewall-rules-edit'
 import { useParams } from 'app/hooks'
 
@@ -85,34 +85,20 @@ export const VpcFirewallRulesTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-4">
-        <Button size="xs" variant="secondary" onClick={() => setCreateModalOpen(true)}>
+        <Button size="xs" variant="default" onClick={() => setCreateModalOpen(true)}>
           New rule
         </Button>
-        <SideModal
-          id="create-firewall-rule-modal"
+        <CreateFirewallRuleSideModalForm
           isOpen={createModalOpen}
+          existingRules={rules}
           onDismiss={() => setCreateModalOpen(false)}
-        >
-          <CreateFirewallRuleForm
-            existingRules={rules}
-            onSuccess={() => setCreateModalOpen(false)}
-            onDismiss={() => setCreateModalOpen(false)}
-          />
-        </SideModal>
-        <SideModal
-          id="create-firewall-rule-modal"
+        />
+        <EditFirewallRuleForm
           isOpen={!!editing}
+          existingRules={rules}
+          originalRule={editing || ({} as VpcFirewallRule)}
           onDismiss={() => setEditing(null)}
-        >
-          {editing && (
-            <EditFirewallRuleForm
-              existingRules={rules}
-              originalRule={editing}
-              onSuccess={() => setEditing(null)}
-              onDismiss={() => setEditing(null)}
-            />
-          )}
-        </SideModal>
+        />
       </div>
       {rules.length > 0 || isLoading ? <Table table={table} /> : emptyState}
     </>
diff --git a/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx
index f522282f4..3503979bd 100644
--- a/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx
+++ b/app/pages/project/networking/VpcPage/tabs/VpcRoutersTab.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react'
 import type { VpcRouter } from '@oxide/api'
 import type { MenuAction } from '@oxide/table'
 import { DateCell, LabelCell, useQueryTable } from '@oxide/table'
-import { Button, EmptyMessage, SideModal } from '@oxide/ui'
+import { Button, EmptyMessage } from '@oxide/ui'
 
 import { CreateVpcRouterForm } from 'app/forms/vpc-router-create'
 import { EditVpcRouterForm } from 'app/forms/vpc-router-edit'
@@ -36,32 +36,20 @@ export const VpcRoutersTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-4">
-        <Button size="xs" variant="secondary" onClick={() => setCreateModalOpen(true)}>
+        <Button size="xs" variant="default" onClick={() => setCreateModalOpen(true)}>
           New router
         </Button>
-        <SideModal
-          id="create-router-modal"
+        <CreateVpcRouterForm
           isOpen={createModalOpen}
+          onSuccess={() => setCreateModalOpen(false)}
           onDismiss={() => setCreateModalOpen(false)}
-        >
-          <CreateVpcRouterForm
-            onSuccess={() => setCreateModalOpen(false)}
-            onDismiss={() => setCreateModalOpen(false)}
-          />
-        </SideModal>
-        <SideModal
-          id="edit-router-modal"
+        />
+        <EditVpcRouterForm
           isOpen={!!editing}
+          initialValues={editing || {}}
+          onSuccess={() => setEditing(null)}
           onDismiss={() => setEditing(null)}
-        >
-          {editing && (
-            <EditVpcRouterForm
-              initialValues={editing}
-              onSuccess={() => setEditing(null)}
-              onDismiss={() => setEditing(null)}
-            />
-          )}
-        </SideModal>
+        />
       </div>
       <Table makeActions={makeActions} emptyState={emptyState}>
         <Column accessor="name" />
diff --git a/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx b/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx
index 39d238a33..fe1c4e923 100644
--- a/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx
+++ b/app/pages/project/networking/VpcPage/tabs/VpcSubnetsTab.tsx
@@ -3,10 +3,10 @@ import { useState } from 'react'
 import type { VpcSubnet } from '@oxide/api'
 import type { MenuAction } from '@oxide/table'
 import { DateCell, TwoLineCell, useQueryTable } from '@oxide/table'
-import { Button, EmptyMessage, SideModal } from '@oxide/ui'
+import { Button, EmptyMessage } from '@oxide/ui'
 
-import { CreateSubnetForm } from 'app/forms/subnet-create'
-import { EditSubnetForm } from 'app/forms/subnet-edit'
+import { CreateSubnetSideModalForm } from 'app/forms/subnet-create'
+import { EditSubnetSideModalForm } from 'app/forms/subnet-edit'
 import { useParams } from 'app/hooks'
 
 export const VpcSubnetsTab = () => {
@@ -35,32 +35,18 @@ export const VpcSubnetsTab = () => {
   return (
     <>
       <div className="mb-3 flex justify-end space-x-4">
-        <Button size="xs" variant="secondary" onClick={() => setCreateModalOpen(true)}>
+        <Button size="xs" variant="default" onClick={() => setCreateModalOpen(true)}>
           New subnet
         </Button>
-        <SideModal
-          id="create-subnet-modal"
+        <CreateSubnetSideModalForm
           isOpen={createModalOpen}
           onDismiss={() => setCreateModalOpen(false)}
-        >
-          <CreateSubnetForm
-            onSuccess={() => setCreateModalOpen(false)}
-            onDismiss={() => setCreateModalOpen(false)}
-          />
-        </SideModal>
-        <SideModal
-          id="edit-subnet-modal"
+        />
+        <EditSubnetSideModalForm
           isOpen={!!editing}
+          initialValues={editing || {}}
           onDismiss={() => setEditing(null)}
-        >
-          {editing && (
-            <EditSubnetForm
-              initialValues={editing}
-              onDismiss={() => setEditing(null)}
-              onSuccess={() => setEditing(null)}
-            />
-          )}
-        </SideModal>
+        />
       </div>
       <Table makeActions={makeActions} emptyState={emptyState}>
         <Column accessor="name" />
diff --git a/app/pages/project/networking/VpcsPage.tsx b/app/pages/project/networking/VpcsPage.tsx
index 0e60e9734..c07cc4c62 100644
--- a/app/pages/project/networking/VpcsPage.tsx
+++ b/app/pages/project/networking/VpcsPage.tsx
@@ -12,6 +12,7 @@ import {
   buttonStyle,
 } from '@oxide/ui'
 
+import CreateVpcSideModalForm from 'app/forms/vpc-create'
 import { useParams, useQuickActions } from 'app/hooks'
 
 const EmptyState = () => (
@@ -24,7 +25,11 @@ const EmptyState = () => (
   />
 )
 
-export const VpcsPage = () => {
+interface VpcsPageProps {
+  modal?: 'createVpc'
+}
+
+export const VpcsPage = ({ modal }: VpcsPageProps) => {
   const projectParams = useParams('orgName', 'projectName')
   const { orgName, projectName } = projectParams
   const { data: vpcs } = useApiQuery('projectVpcsGet', {
@@ -51,8 +56,8 @@ export const VpcsPage = () => {
         <PageTitle icon={<Networking24Icon />}>VPCs</PageTitle>
       </PageHeader>
       <TableActions>
-        <Link to="new" className={buttonStyle({ variant: 'secondary', size: 'xs' })}>
-          New VPC
+        <Link to="new" className={buttonStyle({ size: 'xs', variant: 'default' })}>
+          New Vpc
         </Link>
       </TableActions>
       <Table emptyState={<EmptyState />}>
@@ -64,6 +69,10 @@ export const VpcsPage = () => {
         <Column accessor="description" />
         <Column accessor="timeCreated" cell={DateCell} />
       </Table>
+      <CreateVpcSideModalForm
+        isOpen={modal === 'createVpc'}
+        onDismiss={() => navigate('..')}
+      />
     </>
   )
 }
diff --git a/app/pages/settings/AppearancePage.tsx b/app/pages/settings/AppearancePage.tsx
index 8bf84167b..0c388aaed 100644
--- a/app/pages/settings/AppearancePage.tsx
+++ b/app/pages/settings/AppearancePage.tsx
@@ -1,30 +1,19 @@
-import { PageHeader, PageTitle, Radio, RadioCard } from '@oxide/ui'
+import { Radio, RadioCard, Settings24Icon } from '@oxide/ui'
 
 import { DarkTheme, LightTheme } from 'app/components/ThemeIcons'
-import type { FormMutation } from 'app/components/form'
+import { FullPageForm } from 'app/components/form'
 import { Form, RadioField } from 'app/components/form'
 
-const manualMutation: FormMutation = {
-  status: 'error',
-  data: undefined,
-  error: {
-    // @ts-expect-error Just let folks know this doesn't work yet
-    error: new Error('This form is not yet implemented'),
-  },
-}
-
 export function AppearancePage() {
   return (
     <>
-      <PageHeader>
-        <PageTitle>Appearance</PageTitle>
-      </PageHeader>
-      <Form
+      <FullPageForm
         id="appearance-form"
         title="Appearance"
         initialValues={{ theme: 'dark', contrast: 'default', reducedMotion: 'system' }}
         onSubmit={() => {}}
-        mutation={manualMutation}
+        icon={<Settings24Icon />}
+        error={new Error('This form is not yet implemented')}
       >
         <RadioField id="theme-select" name="theme" label="Theme mode">
           <RadioCard value="dark">
@@ -57,10 +46,8 @@ export function AppearancePage() {
           <Radio value="disabled">Disabled</Radio>
         </RadioField>
 
-        <Form.Actions>
-          <Form.Submit disabled>Save</Form.Submit>
-        </Form.Actions>
-      </Form>
+        <Form.Submit disabled>Save</Form.Submit>
+      </FullPageForm>
     </>
   )
 }
diff --git a/app/pages/settings/HotkeysPage.tsx b/app/pages/settings/HotkeysPage.tsx
index ef2b92dc1..e93378560 100644
--- a/app/pages/settings/HotkeysPage.tsx
+++ b/app/pages/settings/HotkeysPage.tsx
@@ -1,36 +1,24 @@
-import { PageHeader, PageTitle } from '@oxide/ui'
+import { Settings24Icon } from '@oxide/ui'
 
-import type { FormMutation } from 'app/components/form'
-import { Radio, RadioField } from 'app/components/form'
+import { FullPageForm, Radio, RadioField } from 'app/components/form'
 import { ListboxField } from 'app/components/form'
 import { Form } from 'app/components/form'
 
 const Meta = navigator.userAgent.match(/Mac/i) ? '⌘' : 'Ctrl'
 
-const manualMutation: FormMutation = {
-  status: 'error',
-  data: undefined,
-  error: {
-    // @ts-expect-error Just let folks know this doesn't work yet
-    error: new Error('This form is not yet implemented'),
-  },
-}
-
 export function HotkeysPage() {
   return (
     <>
-      <PageHeader>
-        <PageTitle>Hotkeys</PageTitle>
-      </PageHeader>
-      <Form
-        id="profile-form"
-        title="Profile"
+      <FullPageForm
+        id="hotkeys-form"
+        title="Hotkeys"
         initialValues={{
           actionMenuHotkey: 'cmd+k',
           hotkeys: 'enabled',
         }}
         onSubmit={() => {}}
-        mutation={manualMutation}
+        icon={<Settings24Icon />}
+        error={new Error('This form is not yet implemented')}
       >
         <ListboxField
           id="action-menu-hotkey"
@@ -44,10 +32,8 @@ export function HotkeysPage() {
           <Radio value="enabled">Enabled</Radio>
           <Radio value="disabled">Disabled</Radio>
         </RadioField>
-        <Form.Actions>
-          <Form.Submit>Save</Form.Submit>
-        </Form.Actions>
-      </Form>
+        <Form.Submit>Save</Form.Submit>
+      </FullPageForm>
     </>
   )
 }
diff --git a/app/pages/settings/ProfilePage.tsx b/app/pages/settings/ProfilePage.tsx
index 9063fdec0..7db5bb58a 100644
--- a/app/pages/settings/ProfilePage.tsx
+++ b/app/pages/settings/ProfilePage.tsx
@@ -1,41 +1,30 @@
-import { PageHeader, PageTitle } from '@oxide/ui'
+import { Settings24Icon } from '@oxide/ui'
 
-import type { FormMutation } from 'app/components/form'
-import { Form, TextField } from 'app/components/form'
-
-const manualMutation: FormMutation = {
-  status: 'idle',
-  data: undefined,
-  error: null,
-}
+import { FullPageForm, TextField } from 'app/components/form'
 
 export function ProfilePage() {
   return (
-    <>
-      <PageHeader>
-        <PageTitle>Profile</PageTitle>
-      </PageHeader>
-      <Form
-        id="profile-form"
-        title="Profile"
-        initialValues={{}}
-        onSubmit={() => {}}
-        mutation={manualMutation}
-      >
-        <TextField id="profile-name" name="name" required disabled />
-        <TextField id="profile-username" name="username" required disabled />
-        <TextField id="profile-email" name="email" required disabled />
-        <span className="inline-block text-secondary">
-          <span>Your user information is managed by your organization. </span>
-          <span className="md+:block">
-            To update, contact your{' '}
-            <a className="external-link" href="#/">
-              IDP admin
-            </a>
-            .
-          </span>
+    <FullPageForm
+      id="profile-form"
+      title="Profile"
+      initialValues={{}}
+      onSubmit={() => {}}
+      error={new Error('This form is not yet implemented')}
+      icon={<Settings24Icon />}
+    >
+      <TextField id="profile-name" name="name" required disabled />
+      <TextField id="profile-username" name="username" required disabled />
+      <TextField id="profile-email" name="email" required disabled />
+      <span className="inline-block text-secondary">
+        <span>Your user information is managed by your organization. </span>
+        <span className="md+:block">
+          To update, contact your{' '}
+          <a className="external-link" href="#/">
+            IDP admin
+          </a>
+          .
         </span>
-      </Form>
-    </>
+      </span>
+    </FullPageForm>
   )
 }
diff --git a/app/pages/settings/SSHKeysPage.tsx b/app/pages/settings/SSHKeysPage.tsx
index ba775476d..982b1ee6b 100644
--- a/app/pages/settings/SSHKeysPage.tsx
+++ b/app/pages/settings/SSHKeysPage.tsx
@@ -11,11 +11,10 @@ import {
   Key16Icon,
   PageHeader,
   PageTitle,
-  SideModal,
   TableActions,
 } from '@oxide/ui'
 
-import { CreateSSHKeyForm } from 'app/forms/ssh-key-create'
+import { CreateSSHKeySideModalForm } from 'app/forms/ssh-key-create'
 
 export function SSHKeysPage() {
   const { Table, Column } = useQueryTable('sshkeysGet', {})
@@ -46,19 +45,13 @@ export function SSHKeysPage() {
         <PageTitle>SSH Keys</PageTitle>
       </PageHeader>
       <TableActions>
-        <Button size="xs" variant="secondary" onClick={() => setCreateModalOpen(true)}>
-          Add SSH Key
+        <Button size="xs" variant="default" onClick={() => setCreateModalOpen(true)}>
+          Add SSH key
         </Button>
-        <SideModal
-          id="create-ssh-key-modal"
+        <CreateSSHKeySideModalForm
           isOpen={createModalOpen}
           onDismiss={() => setCreateModalOpen(false)}
-        >
-          <CreateSSHKeyForm
-            onSuccess={() => setCreateModalOpen(false)}
-            onDismiss={() => setCreateModalOpen(false)}
-          />
-        </SideModal>
+        />
       </TableActions>
       <Table
         makeActions={makeActions}
diff --git a/app/routes.tsx b/app/routes.tsx
index ce92adc16..861713b28 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import { DataBrowserRouter, Navigate, Route } from 'react-router-dom'
 
-import { Folder24Icon, Instances24Icon, Networking24Icon, Storage24Icon } from '@oxide/ui'
-
 import type { CrumbFunc } from './components/Breadcrumbs'
 import { RouterDataErrorBoundary } from './components/ErrorBoundary'
 import { FormPage } from './components/FormPage'
@@ -14,28 +12,26 @@ import SettingsLayout from './layouts/SettingsLayout'
 import DeviceAuthVerifyPage from './pages/DeviceAuthVerifyPage'
 import LoginPage from './pages/LoginPage'
 import NotFound from './pages/NotFound'
+import { OrgAccessPage } from './pages/OrgAccessPage'
 import OrgsPage from './pages/OrgsPage'
 import ProjectsPage from './pages/ProjectsPage'
 import {
-  AccessPage,
   DisksPage,
   ImagesPage,
   InstancePage,
   InstancesPage,
+  ProjectAccessPage,
   SnapshotsPage,
   VpcPage,
   VpcsPage,
 } from './pages/project'
+import { SerialConsolePage } from './pages/project/instances/instance/SerialConsolePage'
 import { AppearancePage } from './pages/settings/AppearancePage'
 import { HotkeysPage } from './pages/settings/HotkeysPage'
 import { ProfilePage } from './pages/settings/ProfilePage'
 import { SSHKeysPage } from './pages/settings/SSHKeysPage'
 
-const OrgCreateForm = React.lazy(() => import('./forms/org-create'))
-const ProjectCreateForm = React.lazy(() => import('./forms/project-create'))
 const InstanceCreateForm = React.lazy(() => import('./forms/instance-create'))
-const VpcCreateForm = React.lazy(() => import('./forms/vpc-create'))
-const DiskCreateForm = React.lazy(() => import('./forms/disk-create'))
 
 const orgCrumb: CrumbFunc = (m) => m.params.orgName!
 const projectCrumb: CrumbFunc = (m) => m.params.projectName!
@@ -58,29 +54,29 @@ export const Router = () => (
     <Route path="orgs" errorElement={<RouterDataErrorBoundary />}>
       <Route element={<RootLayout />}>
         <Route index element={<OrgsPage />} />
-        <Route
-          path="new"
-          element={
-            <FormPage
-              Form={OrgCreateForm}
-              title="Create organization"
-              icon={<Folder24Icon />}
-            />
-          }
-        />
+        <Route path="new" element={<OrgsPage modal="createOrg" />} />
+        <Route path="edit">
+          <Route path=":orgName" element={<OrgsPage modal="editOrg" />} />
+        </Route>
       </Route>
 
       <Route path=":orgName" handle={{ crumb: orgCrumb }}>
         <Route index element={<Navigate to="projects" replace />} />
+        <Route element={<OrgLayout />}>
+          <Route
+            path="access"
+            element={<OrgAccessPage />}
+            handle={{ crumb: 'Access & IAM' }}
+          />
+        </Route>
         <Route path="projects" handle={{ crumb: 'Projects' }}>
           {/* ORG */}
           <Route element={<OrgLayout />}>
             <Route index element={<ProjectsPage />} />
-            <Route
-              path="new"
-              element={<FormPage Form={ProjectCreateForm} title="Create project" />}
-              handle={{ crumb: 'Create project' }}
-            />
+            <Route path="new" element={<ProjectsPage modal="createProject" />} />
+            <Route path="edit">
+              <Route path=":projectName" element={<ProjectsPage modal="editProject" />} />
+            </Route>
           </Route>
 
           {/* PROJECT */}
@@ -92,49 +88,24 @@ export const Router = () => (
             <Route index element={<Navigate to="instances" replace />} />
             <Route path="instances" handle={{ crumb: 'Instances' }}>
               <Route index element={<InstancesPage />} />
-              <Route
-                path="new"
-                element={
-                  <FormPage
-                    Form={InstanceCreateForm}
-                    title="Create instance"
-                    icon={<Instances24Icon />}
-                  />
-                }
-              />
-              <Route
-                path=":instanceName"
-                element={<InstancePage />}
-                handle={{ crumb: instanceCrumb }}
-              />
+              <Route path="new" element={<FormPage Form={InstanceCreateForm} />} />
+              <Route path=":instanceName" handle={{ crumb: instanceCrumb }}>
+                <Route index element={<InstancePage />} />
+                <Route
+                  path="serial-console"
+                  element={<SerialConsolePage />}
+                  handle={{ crumb: 'serial-console' }}
+                />
+              </Route>
             </Route>
             <Route path="vpcs" handle={{ crumb: 'VPCs' }}>
               <Route index element={<VpcsPage />} />
-              <Route
-                path="new"
-                element={
-                  <FormPage
-                    Form={VpcCreateForm}
-                    title="Create VPC"
-                    icon={<Networking24Icon />}
-                  />
-                }
-              />
+              <Route path="new" element={<VpcsPage modal="createVpc" />} />
               <Route path=":vpcName" element={<VpcPage />} handle={{ crumb: vpcCrumb }} />
             </Route>
             <Route path="disks" handle={{ crumb: 'Disks' }}>
               <Route index element={<DisksPage />} />
-              <Route
-                path="new"
-                element={
-                  <FormPage
-                    Form={DiskCreateForm}
-                    goToCreatedPage={false}
-                    title="Create disk"
-                    icon={<Storage24Icon />}
-                  />
-                }
-              />
+              <Route path="new" element={<DisksPage modal="createDisk" />} />
             </Route>
             <Route
               path="snapshots"
@@ -144,7 +115,7 @@ export const Router = () => (
             <Route path="images" element={<ImagesPage />} handle={{ crumb: 'Images' }} />
             <Route
               path="access"
-              element={<AccessPage />}
+              element={<ProjectAccessPage />}
               handle={{ crumb: 'Access & IAM' }}
             />
           </Route>
diff --git a/app/util/e2e.ts b/app/util/e2e.ts
index 751f820f5..a01721d08 100644
--- a/app/util/e2e.ts
+++ b/app/util/e2e.ts
@@ -23,7 +23,8 @@ export async function expectNotVisible(page: Page, selectors: string[]) {
 /**
  * Assert about the values of a row, identified by `rowSelectorText`. It doesn't
  * need to be the entire row; the test will pass as long as the identified row
- * exists and the first N cells match the N values in `cellTexts`.
+ * exists and the first N cells match the N values in `cellTexts`. Pass `''` for
+ * a checkbox cell.
  *
  * @param rowSelectorText Text that should uniquely identify the row, like an ID
  * @param cellTexts Text to match in each cell of that row
diff --git a/libs/api-mocks/disk.ts b/libs/api-mocks/disk.ts
index 6e8b0ed28..247b030b6 100644
--- a/libs/api-mocks/disk.ts
+++ b/libs/api-mocks/disk.ts
@@ -1,4 +1,5 @@
 import type { Disk } from '@oxide/api'
+import { GiB } from '@oxide/util'
 
 import type { Json } from './json-type'
 import { project } from './project'
@@ -13,7 +14,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'attached', instance: 'abc123' },
     device_path: '/abc',
-    size: 2048,
+    size: 2 * GiB,
     block_size: 2048,
   },
   {
@@ -25,7 +26,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'attached', instance: 'abc123' },
     device_path: '/def',
-    size: 4096,
+    size: 4 * GiB,
     block_size: 2048,
   },
   {
@@ -37,7 +38,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/ghi',
-    size: 6144,
+    size: 6 * GiB,
     block_size: 2048,
   },
   {
@@ -49,7 +50,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 64 * GiB,
     block_size: 2048,
   },
   {
@@ -61,7 +62,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 128 * GiB,
     block_size: 2048,
   },
   {
@@ -73,7 +74,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 20 * GiB,
     block_size: 2048,
   },
   {
@@ -85,7 +86,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 24 * GiB,
     block_size: 2048,
   },
   {
@@ -97,7 +98,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 16 * GiB,
     block_size: 2048,
   },
   {
@@ -109,7 +110,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 32 * GiB,
     block_size: 2048,
   },
   {
@@ -121,7 +122,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 24 * GiB,
     block_size: 2048,
   },
   {
@@ -133,7 +134,7 @@ export const disks: Json<Disk>[] = [
     time_modified: new Date().toISOString(),
     state: { state: 'detached' },
     device_path: '/jkl',
-    size: 8192,
+    size: 12 * GiB,
     block_size: 2048,
   },
 ]
diff --git a/libs/api-mocks/msw/db.ts b/libs/api-mocks/msw/db.ts
index a19cc8adb..c81927a86 100644
--- a/libs/api-mocks/msw/db.ts
+++ b/libs/api-mocks/msw/db.ts
@@ -2,6 +2,7 @@ import type { Merge } from 'type-fest'
 
 import * as mock from '@oxide/api-mocks'
 import type { ApiTypes as Api } from '@oxide/api'
+import { sessionMe } from '@oxide/api-mocks'
 
 import type { Json } from '../json-type'
 import { json } from './util'
@@ -129,6 +130,14 @@ export function lookupGlobalImage(
   return Ok(image)
 }
 
+export function lookupSshKey(params: SshKeyParams): Result<Json<Api.SshKey>> {
+  const sshKey = db.sshKeys.find(
+    (key) => key.name === params.sshKeyName && key.silo_user_id === sessionMe.id
+  )
+  if (!sshKey) return Err(notFoundErr)
+  return Ok(sshKey)
+}
+
 const initDb = {
   disks: [...mock.disks],
   globalImages: [...mock.globalImages],
diff --git a/libs/api-mocks/msw/handlers.ts b/libs/api-mocks/msw/handlers.ts
index 0f9b865f1..978769d11 100644
--- a/libs/api-mocks/msw/handlers.ts
+++ b/libs/api-mocks/msw/handlers.ts
@@ -4,8 +4,10 @@ import type { ApiTypes as Api } from '@oxide/api'
 import { pick, sortBy } from '@oxide/util'
 
 import type { Json } from '../json-type'
+import { serial } from '../serial'
 import { sessionMe } from '../session'
 import type {
+  DiskParams,
   GlobalImageParams,
   InstanceParams,
   NetworkInterfaceParams,
@@ -17,8 +19,9 @@ import type {
   VpcRouterParams,
   VpcSubnetParams,
 } from './db'
+import { lookupSshKey } from './db'
+import { lookupDisk } from './db'
 import { lookupGlobalImage } from './db'
-import { notFoundErr } from './db'
 import {
   db,
   lookupInstance,
@@ -113,10 +116,8 @@ export const handlers = [
   rest.delete<never, SshKeyParams, GetErr>(
     '/api/session/me/sshkeys/:sshKeyName',
     (req, res, ctx) => {
-      const sshKey = db.sshKeys.find(
-        (key) => key.name === req.params.sshKeyName && key.silo_user_id === sessionMe.id
-      )
-      if (!sshKey) return res(notFoundErr)
+      const [sshKey, err] = lookupSshKey(req.params)
+      if (err) return res(err)
       db.sshKeys = db.sshKeys.filter((i) => i.id !== sshKey.id)
       return res(ctx.status(204))
     }
@@ -161,6 +162,66 @@ export const handlers = [
     }
   ),
 
+  rest.put<Json<Api.OrganizationUpdate>, OrgParams, Json<Api.Organization> | PostErr>(
+    '/api/organizations/:orgName',
+    (req, res) => {
+      const [org, err] = lookupOrg(req.params)
+      if (err) return res(err)
+
+      if (!req.body.name) {
+        return res(badRequest('name requires at least one character'))
+      }
+      org.name = req.body.name
+      org.description = req.body.description || ''
+
+      return res(json(org, 200))
+    }
+  ),
+
+  rest.get<never, ProjectParams, Json<Api.ProjectRolePolicy> | GetErr>(
+    '/api/organizations/:orgName/policy',
+    (req, res) => {
+      const [org, err] = lookupOrg(req.params)
+      if (err) return res(err)
+      const role_assignments = db.roleAssignments
+        .filter((r) => r.resource_type === 'organization' && r.resource_id === org.id)
+        .map((r) => pick(r, 'identity_id', 'identity_type', 'role_name'))
+
+      return res(json({ role_assignments }))
+    }
+  ),
+
+  rest.put<
+    Json<Api.OrganizationRolePolicy>,
+    ProjectParams,
+    Json<Api.OrganizationRolePolicy> | PostErr
+  >('/api/organizations/:orgName/policy', (req, res) => {
+    const [org, err] = lookupOrg(req.params)
+    if (err) return res(err)
+
+    // TODO: validate input lol
+    const newAssignments = req.body.role_assignments.map((r) => ({
+      resource_type: 'organization' as const,
+      resource_id: org.id,
+      ...pick(r, 'identity_id', 'identity_type', 'role_name'),
+    }))
+
+    const unrelatedAssignments = db.roleAssignments.filter(
+      (r) => !(r.resource_type === 'organization' && r.resource_id === org.id)
+    )
+
+    db.roleAssignments = [...unrelatedAssignments, ...newAssignments]
+
+    return res(json(req.body))
+  }),
+
+  rest.delete<never, OrgParams, GetErr>('/api/organizations/:orgName', (req, res, ctx) => {
+    const [org, err] = lookupOrg(req.params)
+    if (err) return res(err)
+    db.orgs = db.orgs.filter((o) => o.id !== org.id)
+    return res(ctx.status(204))
+  }),
+
   rest.get<never, OrgParams, Json<Api.ProjectResultsPage> | GetErr>(
     '/api/organizations/:orgName/projects',
     (req, res) => {
@@ -208,12 +269,37 @@ export const handlers = [
     }
   ),
 
-  rest.get<never, ProjectParams, Json<Api.ProjectRolesPolicy> | GetErr>(
-    '/api/organizations/:orgName/projects/:projectName/policy',
+  rest.put<Json<Api.ProjectUpdate>, ProjectParams, Json<Api.Project> | PostErr>(
+    '/api/organizations/:orgName/projects/:projectName',
     (req, res) => {
       const [project, err] = lookupProject(req.params)
       if (err) return res(err)
 
+      if (!req.body.name) {
+        return res(badRequest('name requires at least one character'))
+      }
+      project.name = req.body.name
+      project.description = req.body.description || ''
+
+      return res(json(project, 200))
+    }
+  ),
+
+  rest.delete<never, ProjectParams, GetErr>(
+    '/api/organizations/:orgName/projects/:projectName',
+    (req, res, ctx) => {
+      const [project, err] = lookupProject(req.params)
+      if (err) return res(err)
+      db.projects = db.projects.filter((p) => p.id !== project.id)
+      return res(ctx.status(204))
+    }
+  ),
+
+  rest.get<never, ProjectParams, Json<Api.ProjectRolePolicy> | GetErr>(
+    '/api/organizations/:orgName/projects/:projectName/policy',
+    (req, res) => {
+      const [project, err] = lookupProject(req.params)
+      if (err) return res(err)
       const role_assignments = db.roleAssignments
         .filter((r) => r.resource_type === 'project' && r.resource_id === project.id)
         .map((r) => pick(r, 'identity_id', 'identity_type', 'role_name'))
@@ -223,9 +309,9 @@ export const handlers = [
   ),
 
   rest.put<
-    Json<Api.ProjectRolesPolicy>,
+    Json<Api.ProjectRolePolicy>,
     ProjectParams,
-    Json<Api.ProjectRolesPolicy> | PostErr
+    Json<Api.ProjectRolePolicy> | PostErr
   >('/api/organizations/:orgName/projects/:projectName/policy', (req, res) => {
     const [project, err] = lookupProject(req.params)
     if (err) return res(err)
@@ -343,10 +429,8 @@ export const handlers = [
       if (instance.run_state !== 'stopped') {
         return res(badRequest('instance must be stopped'))
       }
-      const disk = db.disks.find((d) => d.name === req.body.name)
-      if (!disk) {
-        return res(badRequest('disk not found'))
-      }
+      const [disk, diskErr] = lookupDisk({ ...req.params, diskName: req.body.name })
+      if (diskErr) return res(diskErr)
       disk.state = {
         state: 'attached',
         instance: instance.id,
@@ -363,10 +447,8 @@ export const handlers = [
       if (instance.run_state !== 'stopped') {
         return res(badRequest('instance must be stopped'))
       }
-      const disk = db.disks.find((d) => d.name === req.body.name)
-      if (!disk) {
-        return res(badRequest('disk not found'))
-      }
+      const [disk, diskErr] = lookupDisk({ ...req.params, diskName: req.body.name })
+      if (diskErr) return res(diskErr)
       disk.state = {
         state: 'detached',
       }
@@ -456,6 +538,14 @@ export const handlers = [
     }
   ),
 
+  rest.get<never, InstanceParams, Json<Api.InstanceSerialConsoleData> | GetErr>(
+    '/api/organizations/:orgName/projects/:projectName/instances/:instanceName/serial',
+    (req, res) => {
+      // TODO: Add support for query params
+      return res(json(serial))
+    }
+  ),
+
   rest.get<never, ProjectParams, Json<Api.DiskResultsPage> | GetErr>(
     '/api/organizations/:orgName/projects/:projectName/disks',
     (req, res) => {
@@ -499,6 +589,16 @@ export const handlers = [
     }
   ),
 
+  rest.delete<never, DiskParams, GetErr>(
+    '/api/organizations/:orgName/projects/:projectName/disks/:diskName',
+    (req, res, ctx) => {
+      const [disk, err] = lookupDisk(req.params)
+      if (err) return res(err)
+      db.disks = db.disks.filter((d) => d.id !== disk.id)
+      return res(ctx.status(204))
+    }
+  ),
+
   rest.get<never, ProjectParams, Json<Api.ImageResultsPage> | GetErr>(
     '/api/organizations/:orgName/projects/:projectName/images',
     (req, res) => {
@@ -735,6 +835,9 @@ export const handlers = [
     }
   ),
 
+  // note that in the API this is meant for system users, but that could change.
+  // kind of a hack to pretend it's about normal users.
+  // see https://github.com/oxidecomputer/omicron/issues/1235
   rest.get<never, never, Json<Api.UserResultsPage> | GetErr>('/api/users', (req, res) => {
     return res(json(paginated(req.url.search, db.users)))
   }),
diff --git a/libs/api-mocks/msw/util.spec.ts b/libs/api-mocks/msw/util.spec.ts
new file mode 100644
index 000000000..82f2a98df
--- /dev/null
+++ b/libs/api-mocks/msw/util.spec.ts
@@ -0,0 +1,72 @@
+import { paginated } from './util'
+
+describe('paginated', () => {
+  it('should return the first page', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c' }]
+    const page = paginated('', items)
+    expect(page.items).toEqual([{ id: 'a' }, { id: 'b' }, { id: 'c' }])
+    expect(page.nextPage).toBeNull()
+  })
+
+  it('should return the first 10 items with no limit passed', () => {
+    const items = [
+      { id: 'a' },
+      { id: 'b' },
+      { id: 'c' },
+      { id: 'd' },
+      { id: 'e' },
+      { id: 'f' },
+      { id: 'g' },
+      { id: 'h' },
+      { id: 'i' },
+      { id: 'j' },
+      { id: 'k' },
+    ]
+    const page = paginated('', items)
+    expect(page.items.length).toBe(10)
+    expect(page.items).toEqual(items.slice(0, 10))
+    expect(page.nextPage).toBe('k')
+  })
+
+  it('should return page with null `nextPage` if items equal page', () => {
+    const items = [
+      { id: 'a' },
+      { id: 'b' },
+      { id: 'c' },
+      { id: 'd' },
+      { id: 'e' },
+      { id: 'f' },
+      { id: 'g' },
+      { id: 'h' },
+      { id: 'i' },
+      { id: 'j' },
+    ]
+    const page = paginated('', items)
+    expect(page.items.length).toBe(10)
+    expect(page.items).toEqual(items.slice(0, 10))
+    expect(page.nextPage).toBeNull()
+  })
+
+  it('should return 5 items with a limit of 5', () => {
+    const items = [
+      { id: 'a' },
+      { id: 'b' },
+      { id: 'c' },
+      { id: 'd' },
+      { id: 'e' },
+      { id: 'f' },
+    ]
+    const page = paginated('?limit=5', items)
+    expect(page.items.length).toBe(5)
+    expect(page.items).toEqual(items.slice(0, 5))
+    expect(page.nextPage).toBe('f')
+  })
+
+  it('should return the second page when given a `page_token`', () => {
+    const items = [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' }]
+    const page = paginated('?page_token=b', items)
+    expect(page.items.length).toBe(3)
+    expect(page.items).toEqual([{ id: 'b' }, { id: 'c' }, { id: 'd' }])
+    expect(page.nextPage).toBeNull()
+  })
+})
diff --git a/libs/api-mocks/msw/util.ts b/libs/api-mocks/msw/util.ts
index 5758e3717..591306853 100644
--- a/libs/api-mocks/msw/util.ts
+++ b/libs/api-mocks/msw/util.ts
@@ -33,7 +33,7 @@ export const paginated = <I extends { id: string }>(
     }
   }
 
-  if (limit + startIndex > items.length) {
+  if (limit + startIndex >= items.length) {
     return {
       items: items.slice(startIndex),
       nextPage: null,
diff --git a/libs/api-mocks/project.ts b/libs/api-mocks/project.ts
index 77de46468..016049b00 100644
--- a/libs/api-mocks/project.ts
+++ b/libs/api-mocks/project.ts
@@ -1,4 +1,4 @@
-import type { Project, ProjectResultsPage, ProjectRolesPolicy } from '@oxide/api'
+import type { Project, ProjectResultsPage, ProjectRolePolicy } from '@oxide/api'
 
 import type { Json } from './json-type'
 import { org } from './org'
@@ -15,7 +15,7 @@ export const project: Json<Project> = {
 
 export const projects: Json<ProjectResultsPage> = { items: [project] }
 
-export const projectRolePolicy: Json<ProjectRolesPolicy> = {
+export const projectRolePolicy: Json<ProjectRolePolicy> = {
   role_assignments: [
     {
       identity_id: user1.id,
diff --git a/libs/api-mocks/role-assignment.ts b/libs/api-mocks/role-assignment.ts
index bcbb51259..17d12da7a 100644
--- a/libs/api-mocks/role-assignment.ts
+++ b/libs/api-mocks/role-assignment.ts
@@ -1,6 +1,6 @@
 import type {
-  OrganizationRolesRoleAssignment,
-  ProjectRolesRoleAssignment,
+  OrganizationRoleRoleAssignment,
+  ProjectRoleRoleAssignment,
 } from 'libs/api/__generated__/Api'
 
 import type { Json } from './json-type'
@@ -15,8 +15,8 @@ import { user1 } from './user'
 // assignments and then collecting them into a policy object at request time.
 // See https://github.com/oxidecomputer/omicron/issues/1165
 type DbRoleAssignment = { resource_id: string } & (
-  | ({ resource_type: 'project' } & Json<ProjectRolesRoleAssignment>)
-  | ({ resource_type: 'organization' } & Json<OrganizationRolesRoleAssignment>)
+  | ({ resource_type: 'project' } & Json<ProjectRoleRoleAssignment>)
+  | ({ resource_type: 'organization' } & Json<OrganizationRoleRoleAssignment>)
 )
 
 export const roleAssignments: DbRoleAssignment[] = [
diff --git a/libs/api-mocks/serial.ts b/libs/api-mocks/serial.ts
new file mode 100644
index 000000000..cfb4ac27d
--- /dev/null
+++ b/libs/api-mocks/serial.ts
@@ -0,0 +1,3481 @@
+import type { InstanceSerialConsoleData } from '@oxide/api'
+
+import type { Json } from './json-type'
+
+export const serial: Json<InstanceSerialConsoleData> = {
+  last_byte_offset: 7351,
+  data: [
+    27,
+    91,
+    50,
+    74,
+    27,
+    91,
+    48,
+    49,
+    59,
+    48,
+    49,
+    72,
+    27,
+    91,
+    61,
+    51,
+    104,
+    27,
+    91,
+    50,
+    74,
+    27,
+    91,
+    48,
+    49,
+    59,
+    48,
+    49,
+    72,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    53,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    55,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    53,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    55,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    66,
+    100,
+    115,
+    68,
+    120,
+    101,
+    58,
+    32,
+    108,
+    111,
+    97,
+    100,
+    105,
+    110,
+    103,
+    32,
+    66,
+    [111, 2],
+    116,
+    [48, 3],
+    49,
+    32,
+    34,
+    85,
+    69,
+    70,
+    73,
+    32,
+    34,
+    32,
+    102,
+    114,
+    111,
+    109,
+    32,
+    80,
+    99,
+    105,
+    82,
+    [111, 2],
+    116,
+    40,
+    48,
+    120,
+    48,
+    41,
+    47,
+    80,
+    99,
+    105,
+    40,
+    48,
+    120,
+    49,
+    48,
+    44,
+    48,
+    120,
+    48,
+    41,
+    47,
+    78,
+    86,
+    77,
+    101,
+    40,
+    48,
+    120,
+    49,
+    44,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    41,
+    13,
+    10,
+    66,
+    100,
+    115,
+    68,
+    120,
+    101,
+    58,
+    32,
+    115,
+    116,
+    97,
+    114,
+    116,
+    105,
+    110,
+    103,
+    32,
+    66,
+    [111, 2],
+    116,
+    [48, 3],
+    49,
+    32,
+    34,
+    85,
+    69,
+    70,
+    73,
+    32,
+    34,
+    32,
+    102,
+    114,
+    111,
+    109,
+    32,
+    80,
+    99,
+    105,
+    82,
+    [111, 2],
+    116,
+    40,
+    48,
+    120,
+    48,
+    41,
+    47,
+    80,
+    99,
+    105,
+    40,
+    48,
+    120,
+    49,
+    48,
+    44,
+    48,
+    120,
+    48,
+    41,
+    47,
+    78,
+    86,
+    77,
+    101,
+    40,
+    48,
+    120,
+    49,
+    44,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    45,
+    [48, 2],
+    41,
+    13,
+    10,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    48,
+    109,
+    27,
+    91,
+    52,
+    55,
+    109,
+    87,
+    101,
+    108,
+    99,
+    111,
+    109,
+    101,
+    32,
+    116,
+    111,
+    32,
+    71,
+    82,
+    85,
+    66,
+    33,
+    10,
+    13,
+    10,
+    13,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    55,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    48,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    50,
+    74,
+    27,
+    91,
+    48,
+    49,
+    59,
+    48,
+    49,
+    72,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    55,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    48,
+    50,
+    59,
+    51,
+    48,
+    72,
+    71,
+    78,
+    85,
+    32,
+    71,
+    82,
+    85,
+    66,
+    [32, 2],
+    118,
+    101,
+    114,
+    115,
+    105,
+    111,
+    110,
+    32,
+    50,
+    46,
+    48,
+    54,
+    10,
+    13,
+    10,
+    13,
+    27,
+    91,
+    48,
+    52,
+    59,
+    48,
+    50,
+    72,
+    218,
+    [196, 76],
+    191,
+    27,
+    91,
+    48,
+    53,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    48,
+    53,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    48,
+    54,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    48,
+    54,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    48,
+    55,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    48,
+    55,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    48,
+    56,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    48,
+    56,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    48,
+    57,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    48,
+    57,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    48,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    49,
+    48,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    [49, 2],
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    [49, 2],
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    50,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    49,
+    50,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    51,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    49,
+    51,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    52,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    49,
+    52,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    53,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    49,
+    53,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    54,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    49,
+    54,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    55,
+    59,
+    48,
+    50,
+    72,
+    179,
+    27,
+    91,
+    49,
+    55,
+    59,
+    55,
+    57,
+    72,
+    179,
+    27,
+    91,
+    49,
+    56,
+    59,
+    48,
+    50,
+    72,
+    192,
+    [196, 76],
+    217,
+    27,
+    91,
+    49,
+    57,
+    59,
+    48,
+    50,
+    72,
+    27,
+    91,
+    50,
+    48,
+    59,
+    48,
+    50,
+    72,
+    [32, 5],
+    85,
+    115,
+    101,
+    32,
+    116,
+    104,
+    101,
+    32,
+    94,
+    32,
+    97,
+    110,
+    100,
+    32,
+    118,
+    32,
+    107,
+    101,
+    121,
+    115,
+    32,
+    116,
+    111,
+    32,
+    115,
+    101,
+    108,
+    101,
+    99,
+    116,
+    32,
+    119,
+    104,
+    105,
+    99,
+    104,
+    32,
+    101,
+    110,
+    116,
+    114,
+    121,
+    32,
+    105,
+    115,
+    32,
+    104,
+    105,
+    103,
+    104,
+    108,
+    105,
+    103,
+    104,
+    116,
+    101,
+    100,
+    46,
+    [32, 10],
+    10,
+    13,
+    [32, 6],
+    80,
+    114,
+    101,
+    [115, 2],
+    32,
+    101,
+    110,
+    116,
+    101,
+    114,
+    32,
+    116,
+    111,
+    32,
+    98,
+    [111, 2],
+    116,
+    32,
+    116,
+    104,
+    101,
+    32,
+    115,
+    101,
+    108,
+    101,
+    99,
+    116,
+    101,
+    100,
+    32,
+    79,
+    83,
+    44,
+    32,
+    96,
+    101,
+    39,
+    32,
+    116,
+    111,
+    32,
+    101,
+    100,
+    105,
+    116,
+    32,
+    116,
+    104,
+    101,
+    32,
+    99,
+    111,
+    [109, 2],
+    97,
+    110,
+    100,
+    115,
+    [32, 7],
+    10,
+    13,
+    [32, 6],
+    98,
+    101,
+    102,
+    111,
+    114,
+    101,
+    32,
+    98,
+    [111, 2],
+    116,
+    105,
+    110,
+    103,
+    32,
+    111,
+    114,
+    32,
+    96,
+    99,
+    39,
+    32,
+    102,
+    111,
+    114,
+    32,
+    97,
+    32,
+    99,
+    111,
+    [109, 2],
+    97,
+    110,
+    100,
+    45,
+    108,
+    105,
+    110,
+    101,
+    46,
+    [32, 27],
+    27,
+    91,
+    48,
+    53,
+    59,
+    56,
+    48,
+    72,
+    32,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    48,
+    109,
+    27,
+    91,
+    52,
+    55,
+    109,
+    27,
+    91,
+    48,
+    53,
+    59,
+    48,
+    51,
+    72,
+    42,
+    76,
+    105,
+    110,
+    117,
+    120,
+    32,
+    118,
+    105,
+    114,
+    116,
+    [32, 65],
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    55,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    48,
+    53,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    48,
+    54,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    48,
+    54,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    48,
+    55,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    48,
+    55,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    48,
+    56,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    48,
+    56,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    48,
+    57,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    48,
+    57,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    48,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    49,
+    48,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    [49, 2],
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    [49, 2],
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    50,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    49,
+    50,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    51,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    49,
+    51,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    52,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    49,
+    52,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    53,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    49,
+    53,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    54,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    49,
+    54,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    55,
+    59,
+    48,
+    51,
+    72,
+    [32, 76],
+    27,
+    91,
+    49,
+    55,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    49,
+    55,
+    59,
+    56,
+    48,
+    72,
+    32,
+    27,
+    91,
+    48,
+    53,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    50,
+    51,
+    59,
+    48,
+    49,
+    72,
+    [32, 3],
+    84,
+    104,
+    101,
+    32,
+    104,
+    105,
+    103,
+    104,
+    108,
+    105,
+    103,
+    104,
+    116,
+    101,
+    100,
+    32,
+    101,
+    110,
+    116,
+    114,
+    121,
+    32,
+    119,
+    105,
+    [108, 2],
+    32,
+    98,
+    101,
+    32,
+    101,
+    120,
+    101,
+    99,
+    117,
+    116,
+    101,
+    100,
+    32,
+    97,
+    117,
+    116,
+    111,
+    109,
+    97,
+    116,
+    105,
+    99,
+    97,
+    [108, 2],
+    121,
+    32,
+    105,
+    110,
+    32,
+    49,
+    115,
+    46,
+    [32, 17],
+    27,
+    91,
+    48,
+    53,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    50,
+    51,
+    59,
+    48,
+    49,
+    72,
+    [32, 3],
+    84,
+    104,
+    101,
+    32,
+    104,
+    105,
+    103,
+    104,
+    108,
+    105,
+    103,
+    104,
+    116,
+    101,
+    100,
+    32,
+    101,
+    110,
+    116,
+    114,
+    121,
+    32,
+    119,
+    105,
+    [108, 2],
+    32,
+    98,
+    101,
+    32,
+    101,
+    120,
+    101,
+    99,
+    117,
+    116,
+    101,
+    100,
+    32,
+    97,
+    117,
+    116,
+    111,
+    109,
+    97,
+    116,
+    105,
+    99,
+    97,
+    [108, 2],
+    121,
+    32,
+    105,
+    110,
+    32,
+    48,
+    115,
+    46,
+    [32, 17],
+    27,
+    91,
+    48,
+    53,
+    59,
+    55,
+    56,
+    72,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    48,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    50,
+    74,
+    27,
+    91,
+    48,
+    49,
+    59,
+    48,
+    49,
+    72,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    55,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    48,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    27,
+    91,
+    50,
+    74,
+    27,
+    91,
+    48,
+    49,
+    59,
+    48,
+    49,
+    72,
+    27,
+    91,
+    48,
+    109,
+    27,
+    91,
+    51,
+    55,
+    109,
+    27,
+    91,
+    52,
+    48,
+    109,
+    [32, 2],
+    66,
+    [111, 2],
+    116,
+    105,
+    110,
+    103,
+    32,
+    96,
+    76,
+    105,
+    110,
+    117,
+    120,
+    32,
+    118,
+    105,
+    114,
+    116,
+    39,
+    10,
+    13,
+    10,
+    13,
+    27,
+    55,
+    [32, 2],
+    48,
+    37,
+    [32, 45],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    [32, 2],
+    54,
+    37,
+    32,
+    [35, 3],
+    [32, 41],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    49,
+    53,
+    37,
+    32,
+    [35, 6],
+    [32, 38],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    49,
+    54,
+    37,
+    32,
+    [35, 7],
+    [32, 37],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    49,
+    57,
+    37,
+    32,
+    [35, 8],
+    [32, 36],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    48,
+    37,
+    32,
+    [35, 9],
+    [32, 35],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    49,
+    37,
+    32,
+    [35, 9],
+    [32, 35],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    [50, 2],
+    37,
+    32,
+    [35, 9],
+    [32, 35],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    [50, 2],
+    37,
+    32,
+    [35, 10],
+    [32, 34],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    51,
+    37,
+    32,
+    [35, 10],
+    [32, 34],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    52,
+    37,
+    32,
+    [35, 10],
+    [32, 34],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    53,
+    37,
+    32,
+    [35, 11],
+    [32, 33],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    54,
+    37,
+    32,
+    [35, 11],
+    [32, 33],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    55,
+    37,
+    32,
+    [35, 11],
+    [32, 33],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    55,
+    37,
+    32,
+    [35, 12],
+    [32, 32],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    56,
+    37,
+    32,
+    [35, 12],
+    [32, 32],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    57,
+    37,
+    32,
+    [35, 12],
+    [32, 32],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    50,
+    57,
+    37,
+    32,
+    [35, 13],
+    [32, 31],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    48,
+    37,
+    32,
+    [35, 13],
+    [32, 31],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    49,
+    37,
+    32,
+    [35, 13],
+    [32, 31],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    49,
+    37,
+    32,
+    [35, 14],
+    [32, 30],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    50,
+    37,
+    32,
+    [35, 14],
+    [32, 30],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    [51, 2],
+    37,
+    32,
+    [35, 14],
+    [32, 30],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    52,
+    37,
+    32,
+    [35, 15],
+    [32, 29],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    53,
+    37,
+    32,
+    [35, 15],
+    [32, 29],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    54,
+    37,
+    32,
+    [35, 15],
+    [32, 29],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    54,
+    37,
+    32,
+    [35, 16],
+    [32, 28],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    55,
+    37,
+    32,
+    [35, 16],
+    [32, 28],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    56,
+    37,
+    32,
+    [35, 16],
+    [32, 28],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    56,
+    37,
+    32,
+    [35, 17],
+    [32, 27],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    51,
+    57,
+    37,
+    32,
+    [35, 17],
+    [32, 27],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    48,
+    37,
+    32,
+    [35, 17],
+    [32, 27],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    48,
+    37,
+    32,
+    [35, 18],
+    [32, 26],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    49,
+    37,
+    32,
+    [35, 18],
+    [32, 26],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    50,
+    37,
+    32,
+    [35, 18],
+    [32, 26],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    51,
+    37,
+    32,
+    [35, 19],
+    [32, 25],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    53,
+    37,
+    32,
+    [35, 19],
+    [32, 25],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    53,
+    37,
+    32,
+    [35, 20],
+    [32, 24],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    54,
+    37,
+    32,
+    [35, 20],
+    [32, 24],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    55,
+    37,
+    32,
+    [35, 20],
+    [32, 24],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    55,
+    37,
+    32,
+    [35, 21],
+    [32, 23],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    52,
+    57,
+    37,
+    32,
+    [35, 21],
+    [32, 23],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    53,
+    48,
+    37,
+    32,
+    [35, 22],
+    [32, 22],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    55,
+    49,
+    37,
+    32,
+    [35, 31],
+    [32, 13],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    55,
+    54,
+    37,
+    32,
+    [35, 33],
+    [32, 11],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    [55, 2],
+    37,
+    32,
+    [35, 34],
+    [32, 10],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    56,
+    50,
+    37,
+    32,
+    [35, 36],
+    [32, 8],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    56,
+    51,
+    37,
+    32,
+    [35, 36],
+    [32, 8],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    56,
+    52,
+    37,
+    32,
+    [35, 37],
+    [32, 7],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    56,
+    54,
+    37,
+    32,
+    [35, 37],
+    [32, 7],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    56,
+    55,
+    37,
+    32,
+    [35, 38],
+    [32, 6],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    [56, 2],
+    37,
+    32,
+    [35, 38],
+    [32, 6],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    [56, 2],
+    37,
+    32,
+    [35, 39],
+    [32, 5],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    56,
+    57,
+    37,
+    32,
+    [35, 39],
+    [32, 5],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    57,
+    48,
+    37,
+    32,
+    [35, 39],
+    [32, 5],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    57,
+    48,
+    37,
+    32,
+    [35, 40],
+    [32, 4],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    57,
+    49,
+    37,
+    32,
+    [35, 40],
+    [32, 4],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    57,
+    50,
+    37,
+    32,
+    [35, 40],
+    [32, 4],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    57,
+    51,
+    37,
+    32,
+    [35, 40],
+    [32, 4],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    32,
+    57,
+    51,
+    37,
+    32,
+    [35, 41],
+    [32, 3],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    27,
+    55,
+    49,
+    [48, 2],
+    37,
+    32,
+    [35, 44],
+    27,
+    56,
+    27,
+    91,
+    48,
+    75,
+    13,
+    10,
+    13,
+    10,
+    [32, 3],
+    79,
+    112,
+    101,
+    110,
+    82,
+    67,
+    32,
+    48,
+    46,
+    [52, 2],
+    46,
+    49,
+    48,
+    32,
+    105,
+    115,
+    32,
+    115,
+    116,
+    97,
+    114,
+    116,
+    105,
+    110,
+    103,
+    32,
+    117,
+    112,
+    32,
+    76,
+    105,
+    110,
+    117,
+    120,
+    32,
+    53,
+    46,
+    49,
+    53,
+    46,
+    52,
+    49,
+    45,
+    48,
+    45,
+    118,
+    105,
+    114,
+    116,
+    32,
+    40,
+    120,
+    56,
+    54,
+    95,
+    54,
+    52,
+    41,
+    13,
+    10,
+    13,
+    10,
+    32,
+    42,
+    32,
+    47,
+    112,
+    114,
+    111,
+    99,
+    32,
+    105,
+    115,
+    32,
+    97,
+    108,
+    114,
+    101,
+    97,
+    100,
+    121,
+    32,
+    109,
+    111,
+    117,
+    110,
+    116,
+    101,
+    100,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    47,
+    114,
+    117,
+    110,
+    32,
+    [46, 3],
+    32,
+    42,
+    32,
+    47,
+    114,
+    117,
+    110,
+    47,
+    111,
+    112,
+    101,
+    110,
+    114,
+    99,
+    58,
+    32,
+    99,
+    114,
+    101,
+    97,
+    116,
+    105,
+    110,
+    103,
+    32,
+    100,
+    105,
+    114,
+    101,
+    99,
+    116,
+    111,
+    114,
+    121,
+    13,
+    10,
+    32,
+    42,
+    32,
+    47,
+    114,
+    117,
+    110,
+    47,
+    108,
+    111,
+    99,
+    107,
+    58,
+    32,
+    99,
+    114,
+    101,
+    97,
+    116,
+    105,
+    110,
+    103,
+    32,
+    100,
+    105,
+    114,
+    101,
+    99,
+    116,
+    111,
+    114,
+    121,
+    13,
+    10,
+    32,
+    42,
+    32,
+    47,
+    114,
+    117,
+    110,
+    47,
+    108,
+    111,
+    99,
+    107,
+    58,
+    32,
+    99,
+    111,
+    [114, 2],
+    101,
+    99,
+    116,
+    105,
+    110,
+    103,
+    32,
+    111,
+    119,
+    110,
+    101,
+    114,
+    13,
+    10,
+    32,
+    42,
+    32,
+    67,
+    97,
+    99,
+    104,
+    105,
+    110,
+    103,
+    32,
+    115,
+    101,
+    114,
+    118,
+    105,
+    99,
+    101,
+    32,
+    100,
+    101,
+    112,
+    101,
+    110,
+    100,
+    101,
+    110,
+    99,
+    105,
+    101,
+    115,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    82,
+    101,
+    109,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    100,
+    101,
+    118,
+    116,
+    109,
+    112,
+    102,
+    115,
+    32,
+    111,
+    110,
+    32,
+    47,
+    100,
+    101,
+    118,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    47,
+    100,
+    101,
+    118,
+    47,
+    109,
+    113,
+    117,
+    101,
+    117,
+    101,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    109,
+    111,
+    100,
+    108,
+    [111, 2],
+    112,
+    [32, 2],
+    [46, 3],
+    32,
+    42,
+    32,
+    86,
+    101,
+    114,
+    105,
+    102,
+    121,
+    105,
+    110,
+    103,
+    32,
+    109,
+    111,
+    100,
+    108,
+    [111, 2],
+    112,
+    13,
+    10,
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    115,
+    101,
+    99,
+    117,
+    114,
+    105,
+    116,
+    121,
+    32,
+    102,
+    105,
+    108,
+    101,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    100,
+    101,
+    98,
+    117,
+    103,
+    32,
+    102,
+    105,
+    108,
+    101,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    112,
+    101,
+    114,
+    115,
+    105,
+    115,
+    116,
+    101,
+    110,
+    116,
+    32,
+    115,
+    116,
+    111,
+    114,
+    97,
+    103,
+    101,
+    32,
+    40,
+    112,
+    115,
+    116,
+    111,
+    114,
+    101,
+    41,
+    32,
+    102,
+    105,
+    108,
+    101,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    101,
+    102,
+    105,
+    118,
+    97,
+    114,
+    102,
+    115,
+    32,
+    102,
+    105,
+    108,
+    101,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    83,
+    116,
+    97,
+    114,
+    116,
+    105,
+    110,
+    103,
+    32,
+    98,
+    117,
+    115,
+    121,
+    98,
+    111,
+    120,
+    32,
+    109,
+    100,
+    101,
+    118,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    76,
+    111,
+    97,
+    100,
+    105,
+    110,
+    103,
+    32,
+    104,
+    97,
+    114,
+    100,
+    119,
+    97,
+    114,
+    101,
+    32,
+    100,
+    114,
+    105,
+    118,
+    101,
+    114,
+    115,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    76,
+    111,
+    97,
+    100,
+    105,
+    110,
+    103,
+    32,
+    109,
+    111,
+    100,
+    117,
+    108,
+    101,
+    115,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    83,
+    101,
+    [116, 2],
+    105,
+    110,
+    103,
+    32,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    32,
+    99,
+    108,
+    111,
+    99,
+    107,
+    32,
+    117,
+    115,
+    105,
+    110,
+    103,
+    32,
+    116,
+    104,
+    101,
+    32,
+    104,
+    97,
+    114,
+    100,
+    119,
+    97,
+    114,
+    101,
+    32,
+    99,
+    108,
+    111,
+    99,
+    107,
+    32,
+    91,
+    85,
+    84,
+    67,
+    93,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    67,
+    104,
+    101,
+    99,
+    107,
+    105,
+    110,
+    103,
+    32,
+    108,
+    111,
+    99,
+    97,
+    108,
+    32,
+    102,
+    105,
+    108,
+    101,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    115,
+    [32, 2],
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    82,
+    101,
+    109,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    102,
+    105,
+    108,
+    101,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    115,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    111,
+    117,
+    110,
+    116,
+    105,
+    110,
+    103,
+    32,
+    108,
+    111,
+    99,
+    97,
+    108,
+    32,
+    102,
+    105,
+    108,
+    101,
+    115,
+    121,
+    115,
+    116,
+    101,
+    109,
+    115,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    67,
+    111,
+    110,
+    102,
+    105,
+    103,
+    117,
+    114,
+    105,
+    110,
+    103,
+    32,
+    107,
+    101,
+    114,
+    110,
+    101,
+    108,
+    32,
+    112,
+    97,
+    114,
+    97,
+    109,
+    101,
+    116,
+    101,
+    114,
+    115,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    77,
+    105,
+    103,
+    114,
+    97,
+    116,
+    105,
+    110,
+    103,
+    32,
+    47,
+    118,
+    97,
+    114,
+    47,
+    108,
+    111,
+    99,
+    107,
+    32,
+    116,
+    111,
+    32,
+    47,
+    114,
+    117,
+    110,
+    47,
+    108,
+    111,
+    99,
+    107,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    67,
+    114,
+    101,
+    97,
+    116,
+    105,
+    110,
+    103,
+    32,
+    117,
+    115,
+    101,
+    114,
+    32,
+    108,
+    111,
+    103,
+    105,
+    110,
+    32,
+    114,
+    101,
+    99,
+    111,
+    114,
+    100,
+    115,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    67,
+    108,
+    101,
+    97,
+    110,
+    105,
+    110,
+    103,
+    32,
+    47,
+    116,
+    109,
+    112,
+    32,
+    100,
+    105,
+    114,
+    101,
+    99,
+    116,
+    111,
+    114,
+    121,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    83,
+    101,
+    [116, 2],
+    105,
+    110,
+    103,
+    32,
+    104,
+    111,
+    115,
+    116,
+    110,
+    97,
+    109,
+    101,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    83,
+    116,
+    97,
+    114,
+    116,
+    105,
+    110,
+    103,
+    32,
+    98,
+    117,
+    115,
+    121,
+    98,
+    111,
+    120,
+    32,
+    115,
+    121,
+    115,
+    108,
+    111,
+    103,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    32,
+    42,
+    32,
+    83,
+    116,
+    97,
+    114,
+    116,
+    105,
+    110,
+    103,
+    32,
+    102,
+    105,
+    114,
+    115,
+    116,
+    98,
+    [111, 2],
+    116,
+    32,
+    [46, 3],
+    32,
+    91,
+    32,
+    111,
+    107,
+    32,
+    93,
+    13,
+    10,
+    [13, 2],
+    10,
+    87,
+    101,
+    108,
+    99,
+    111,
+    109,
+    101,
+    32,
+    116,
+    111,
+    32,
+    65,
+    108,
+    112,
+    105,
+    110,
+    101,
+    32,
+    76,
+    105,
+    110,
+    117,
+    120,
+    32,
+    51,
+    46,
+    49,
+    54,
+    13,
+    10,
+    13,
+    75,
+    101,
+    114,
+    110,
+    101,
+    108,
+    32,
+    53,
+    46,
+    49,
+    53,
+    46,
+    52,
+    49,
+    45,
+    48,
+    45,
+    118,
+    105,
+    114,
+    116,
+    32,
+    111,
+    110,
+    32,
+    97,
+    110,
+    32,
+    120,
+    56,
+    54,
+    95,
+    54,
+    52,
+    32,
+    40,
+    47,
+    100,
+    101,
+    118,
+    47,
+    [116, 2],
+    121,
+    83,
+    48,
+    41,
+    13,
+    10,
+    [13, 2],
+    10,
+    13,
+    108,
+    111,
+    99,
+    97,
+    108,
+    104,
+    111,
+    115,
+    116,
+    32,
+    108,
+    111,
+    103,
+    105,
+    110,
+    58,
+    32,
+  ].flatMap((v) => (Array.isArray(v) ? Array(v[1]).fill(v[0]) : v)),
+}
diff --git a/libs/api-mocks/user.ts b/libs/api-mocks/user.ts
index d49e7e545..f24897c16 100644
--- a/libs/api-mocks/user.ts
+++ b/libs/api-mocks/user.ts
@@ -3,19 +3,11 @@ import type { User } from '@oxide/api'
 import type { Json } from './json-type'
 
 export const user1: Json<User> = {
-  name: 'Abraham Lincoln',
-  description: 'A decent president',
   id: 'user-1',
-  time_created: new Date(2021, 1, 1).toISOString(),
-  time_modified: new Date(2021, 1, 2).toISOString(),
 }
 
 export const user2: Json<User> = {
-  name: 'Franklin Delano Roosevelt',
-  description: 'A pretty good president',
   id: 'user-2',
-  time_created: new Date(2021, 1, 3).toISOString(),
-  time_modified: new Date(2021, 1, 4).toISOString(),
 }
 
 export const users = [user1, user2]
diff --git a/libs/api/__generated__/Api.ts b/libs/api/__generated__/Api.ts
index 12f60eae4..ec51809b1 100644
--- a/libs/api/__generated__/Api.ts
+++ b/libs/api/__generated__/Api.ts
@@ -134,12 +134,18 @@ export type DiskState =
   | { state: 'faulted' }
 
 /**
- * Distribution must begin with a lower case ASCII letter, be composed exclusively of lowercase ASCII, uppercase ASCII, numbers, and '-', and may not end with a '-'.
+ * OS image distribution
  */
-export type Distribution = string
-
-/** Regex pattern for validating Distribution */
-export const distributionPattern = '[a-z](|[a-zA-Z0-9-]*[a-zA-Z0-9])'
+export type Distribution = {
+  /**
+   * The name of the distribution (e.g. "alpine" or "ubuntu")
+   */
+  name: Name
+  /**
+   * The version of the distribution (e.g. "3.10" or "18.04")
+   */
+  version: string
+}
 
 /**
  * Error information from a response.
@@ -169,18 +175,18 @@ export type FieldSource = 'target' | 'metric'
  */
 export type FieldType = 'string' | 'i64' | 'ip_addr' | 'uuid' | 'bool'
 
-export type FleetRoles = 'admin' | 'collaborator' | 'viewer'
+export type FleetRole = 'admin' | 'collaborator' | 'viewer'
 
 /**
  * Client view of a `Policy`, which describes how this resource may be accessed
  *
  * Note that the Policy only describes access granted explicitly for this resource.  The policies of parent resources can also cause a user to have access to this resource.
  */
-export type FleetRolesPolicy = {
+export type FleetRolePolicy = {
   /**
    * Roles directly assigned on this resource
    */
-  roleAssignments: FleetRolesRoleAssignment[]
+  roleAssignments: FleetRoleRoleAssignment[]
 }
 
 /**
@@ -188,10 +194,10 @@ export type FleetRolesPolicy = {
  *
  * The resource is not part of this structure.  Rather, `RoleAssignment`s are put into a `Policy` and that Policy is applied to a particular resource.
  */
-export type FleetRolesRoleAssignment = {
+export type FleetRoleRoleAssignment = {
   identityId: string
   identityType: IdentityType
-  roleName: FleetRoles
+  roleName: FleetRole
 }
 
 /**
@@ -262,10 +268,6 @@ export type GlobalImageCreate = {
    * The source of the image's contents.
    */
   source: ImageSource
-  /**
-   * image version
-   */
-  version: string
 }
 
 /**
@@ -551,6 +553,20 @@ export type InstanceResultsPage = {
   nextPage?: string | null
 }
 
+/**
+ * Contents of an Instance's serial console buffer.
+ */
+export type InstanceSerialConsoleData = {
+  /**
+   * The bytes starting from the requested offset up to either the end of the buffer or the request's `max_bytes`. Provided as a u8 array rather than a string, as it may not be UTF-8.
+   */
+  data: number[]
+  /**
+   * The absolute offset since boot (suitable for use as `byte_offset` in a subsequent request) of the last byte returned in `data`.
+   */
+  lastByteOffset: number
+}
+
 /**
  * Running state of an Instance (primarily: booted or stopped)
  *
@@ -570,6 +586,86 @@ export type InstanceState =
 
 export type IpNet = Ipv4Net | Ipv6Net
 
+/**
+ * Identity-related metadata that's included in nearly all public API objects
+ */
+export type IpPool = {
+  /**
+   * human-readable free-form text about a resource
+   */
+  description: string
+  /**
+   * unique, immutable, system-controlled identifier for each resource
+   */
+  id: string
+  /**
+   * unique, mutable, user-controlled identifier for each resource
+   */
+  name: Name
+  /**
+   * timestamp when this resource was created
+   */
+  timeCreated: Date
+  /**
+   * timestamp when this resource was last modified
+   */
+  timeModified: Date
+}
+
+/**
+ * Create-time parameters for an IP Pool.
+ *
+ * See {@link IpPool}
+ */
+export type IpPoolCreate = {
+  description: string
+  name: Name
+}
+
+export type IpPoolRange = {
+  id: string
+  range: IpRange
+  timeCreated: Date
+}
+
+/**
+ * A single page of results
+ */
+export type IpPoolRangeResultsPage = {
+  /**
+   * list of items on this page of results
+   */
+  items: IpPoolRange[]
+  /**
+   * token used to fetch the next page of results (if any)
+   */
+  nextPage?: string | null
+}
+
+/**
+ * A single page of results
+ */
+export type IpPoolResultsPage = {
+  /**
+   * list of items on this page of results
+   */
+  items: IpPool[]
+  /**
+   * token used to fetch the next page of results (if any)
+   */
+  nextPage?: string | null
+}
+
+/**
+ * Parameters for updating an IP Pool
+ */
+export type IpPoolUpdate = {
+  description?: string | null
+  name?: Name | null
+}
+
+export type IpRange = Ipv4Range | Ipv6Range
+
 /**
  * An IPv4 subnet, including prefix and subnet mask
  */
@@ -579,6 +675,16 @@ export type Ipv4Net = string
 export const ipv4NetPattern =
   '(^(10.(25[0-5]|[1-2][0-4][0-9]|[1-9][0-9]|[0-9].){2}(25[0-5]|[1-2][0-4][0-9]|[1-9][0-9]|[0-9])/(1[0-9]|2[0-8]|[8-9]))$)|(^(172.16.(25[0-5]|[1-2][0-4][0-9]|[1-9][0-9]|[0-9]).(25[0-5]|[1-2][0-4][0-9]|[1-9][0-9]|[0-9])/(1[2-9]|2[0-8]))$)|(^(192.168.(25[0-5]|[1-2][0-4][0-9]|[1-9][0-9]|[0-9]).(25[0-5]|[1-2][0-4][0-9]|[1-9][0-9]|[0-9])/(1[6-9]|2[0-8]))$)'
 
+/**
+ * A non-decreasing IPv4 address range, inclusive of both ends.
+ *
+ * The first address must be less than or equal to the last address.
+ */
+export type Ipv4Range = {
+  first: string
+  last: string
+}
+
 /**
  * An IPv6 subnet, including prefix and subnet mask
  */
@@ -588,6 +694,16 @@ export type Ipv6Net = string
 export const ipv6NetPattern =
   '^(fd|FD)[0-9a-fA-F]{2}:((([0-9a-fA-F]{1,4}:){6}[0-9a-fA-F]{1,4})|(([0-9a-fA-F]{1,4}:){1,6}:))/(6[4-9]|[7-9][0-9]|1[0-1][0-9]|12[0-6])$'
 
+/**
+ * A non-decreasing IPv6 address range, inclusive of both ends.
+ *
+ * The first address must be less than or equal to the last address.
+ */
+export type Ipv6Range = {
+  first: string
+  last: string
+}
+
 /**
  * An inclusive-inclusive range of IP ports. The second port may be omitted to represent a single port
  */
@@ -696,6 +812,24 @@ export type NetworkInterfaceResultsPage = {
   nextPage?: string | null
 }
 
+/**
+ * Parameters for updating a {@link NetworkInterface}.
+ *
+ * Note that modifying IP addresses for an interface is not yet supported, a new interface must be created instead.
+ */
+export type NetworkInterfaceUpdate = {
+  description?: string | null
+  /**
+   * Make a secondary interface the instance's primary interface.
+   *
+   * If applied to a secondary interface, that interface will become the primary on the next reboot of the instance. Note that this may have implications for routing between instances, as the new primary interface will be on a distinct subnet from the previous primary interface.
+   *
+   * Note that this can only be used to select a new primary interface for an instance. Requests to change the primary interface into a secondary will return an error.
+   */
+  makePrimary?: boolean | null
+  name?: Name | null
+}
+
 /**
  * Client view of an {@link Organization}
  */
@@ -744,18 +878,18 @@ export type OrganizationResultsPage = {
   nextPage?: string | null
 }
 
-export type OrganizationRoles = 'admin' | 'collaborator' | 'viewer'
+export type OrganizationRole = 'admin' | 'collaborator' | 'viewer'
 
 /**
  * Client view of a `Policy`, which describes how this resource may be accessed
  *
  * Note that the Policy only describes access granted explicitly for this resource.  The policies of parent resources can also cause a user to have access to this resource.
  */
-export type OrganizationRolesPolicy = {
+export type OrganizationRolePolicy = {
   /**
    * Roles directly assigned on this resource
    */
-  roleAssignments: OrganizationRolesRoleAssignment[]
+  roleAssignments: OrganizationRoleRoleAssignment[]
 }
 
 /**
@@ -763,10 +897,10 @@ export type OrganizationRolesPolicy = {
  *
  * The resource is not part of this structure.  Rather, `RoleAssignment`s are put into a `Policy` and that Policy is applied to a particular resource.
  */
-export type OrganizationRolesRoleAssignment = {
+export type OrganizationRoleRoleAssignment = {
   identityId: string
   identityType: IdentityType
-  roleName: OrganizationRoles
+  roleName: OrganizationRole
 }
 
 /**
@@ -826,18 +960,18 @@ export type ProjectResultsPage = {
   nextPage?: string | null
 }
 
-export type ProjectRoles = 'admin' | 'collaborator' | 'viewer'
+export type ProjectRole = 'admin' | 'collaborator' | 'viewer'
 
 /**
  * Client view of a `Policy`, which describes how this resource may be accessed
  *
  * Note that the Policy only describes access granted explicitly for this resource.  The policies of parent resources can also cause a user to have access to this resource.
  */
-export type ProjectRolesPolicy = {
+export type ProjectRolePolicy = {
   /**
    * Roles directly assigned on this resource
    */
-  roleAssignments: ProjectRolesRoleAssignment[]
+  roleAssignments: ProjectRoleRoleAssignment[]
 }
 
 /**
@@ -845,10 +979,10 @@ export type ProjectRolesPolicy = {
  *
  * The resource is not part of this structure.  Rather, `RoleAssignment`s are put into a `Policy` and that Policy is applied to a particular resource.
  */
-export type ProjectRolesRoleAssignment = {
+export type ProjectRoleRoleAssignment = {
   identityId: string
   identityType: IdentityType
-  roleName: ProjectRoles
+  roleName: ProjectRole
 }
 
 /**
@@ -863,18 +997,10 @@ export type ProjectUpdate = {
  * Client view of an {@link Rack}
  */
 export type Rack = {
-  /**
-   * human-readable free-form text about a resource
-   */
-  description: string
   /**
    * unique, immutable, system-controlled identifier for each resource
    */
   id: string
-  /**
-   * unique, mutable, user-controlled identifier for each resource
-   */
-  name: Name
   /**
    * timestamp when this resource was created
    */
@@ -1204,18 +1330,18 @@ export type SiloResultsPage = {
   nextPage?: string | null
 }
 
-export type SiloRoles = 'admin' | 'collaborator' | 'viewer'
+export type SiloRole = 'admin' | 'collaborator' | 'viewer'
 
 /**
  * Client view of a `Policy`, which describes how this resource may be accessed
  *
  * Note that the Policy only describes access granted explicitly for this resource.  The policies of parent resources can also cause a user to have access to this resource.
  */
-export type SiloRolesPolicy = {
+export type SiloRolePolicy = {
   /**
    * Roles directly assigned on this resource
    */
-  roleAssignments: SiloRolesRoleAssignment[]
+  roleAssignments: SiloRoleRoleAssignment[]
 }
 
 /**
@@ -1223,28 +1349,20 @@ export type SiloRolesPolicy = {
  *
  * The resource is not part of this structure.  Rather, `RoleAssignment`s are put into a `Policy` and that Policy is applied to a particular resource.
  */
-export type SiloRolesRoleAssignment = {
+export type SiloRoleRoleAssignment = {
   identityId: string
   identityType: IdentityType
-  roleName: SiloRoles
+  roleName: SiloRole
 }
 
 /**
  * Client view of an {@link Sled}
  */
 export type Sled = {
-  /**
-   * human-readable free-form text about a resource
-   */
-  description: string
   /**
    * unique, immutable, system-controlled identifier for each resource
    */
   id: string
-  /**
-   * unique, mutable, user-controlled identifier for each resource
-   */
-  name: Name
   serviceAddress: string
   /**
    * timestamp when this resource was created
@@ -1428,6 +1546,13 @@ export type TimeseriesSchemaResultsPage = {
  * Client view of a {@link User}
  */
 export type User = {
+  id: string
+}
+
+/**
+ * Client view of a {@link UserBuiltin}
+ */
+export type UserBuiltin = {
   /**
    * human-readable free-form text about a resource
    */
@@ -1450,6 +1575,20 @@ export type User = {
   timeModified: Date
 }
 
+/**
+ * A single page of results
+ */
+export type UserBuiltinResultsPage = {
+  /**
+   * list of items on this page of results
+   */
+  items: UserBuiltin[]
+  /**
+   * token used to fetch the next page of results (if any)
+   */
+  nextPage?: string | null
+}
+
 /**
  * A single page of results
  */
@@ -1903,6 +2042,44 @@ export interface ImagesDeleteImageParams {
   imageName: Name
 }
 
+export interface IpPoolsGetParams {
+  limit?: number | null
+
+  pageToken?: string | null
+
+  sortBy?: NameOrIdSortMode
+}
+
+export interface IpPoolsPostParams {}
+
+export interface IpPoolsGetIpPoolParams {
+  poolName: Name
+}
+
+export interface IpPoolsPutIpPoolParams {
+  poolName: Name
+}
+
+export interface IpPoolsDeleteIpPoolParams {
+  poolName: Name
+}
+
+export interface IpPoolRangesGetParams {
+  poolName: Name
+
+  limit?: number | null
+
+  pageToken?: string | null
+}
+
+export interface IpPoolRangesAddParams {
+  poolName: Name
+}
+
+export interface IpPoolRangesDeleteParams {
+  poolName: Name
+}
+
 export interface SpoofLoginParams {}
 
 export interface LoginParams {
@@ -2153,6 +2330,16 @@ export interface InstanceNetworkInterfacesGetInterfaceParams {
   projectName: Name
 }
 
+export interface InstanceNetworkInterfacesPutInterfaceParams {
+  instanceName: Name
+
+  interfaceName: Name
+
+  orgName: Name
+
+  projectName: Name
+}
+
 export interface InstanceNetworkInterfacesDeleteInterfaceParams {
   instanceName: Name
 
@@ -2171,6 +2358,20 @@ export interface ProjectInstancesInstanceRebootParams {
   projectName: Name
 }
 
+export interface ProjectInstancesInstanceSerialGetParams {
+  instanceName: Name
+
+  orgName: Name
+
+  projectName: Name
+
+  fromStart?: number | null
+
+  maxBytes?: number | null
+
+  mostRecent?: number | null
+}
+
 export interface ProjectInstancesInstanceStartParams {
   instanceName: Name
 
@@ -2573,7 +2774,15 @@ export interface TimeseriesSchemaGetParams {
 
 export interface UpdatesRefreshParams {}
 
-export interface UsersGetParams {
+export interface SiloUsersGetParams {
+  limit?: number | null
+
+  pageToken?: string | null
+
+  sortBy?: IdSortMode
+}
+
+export interface BuiltinUsersGetParams {
   limit?: number | null
 
   pageToken?: string | null
@@ -2581,7 +2790,7 @@ export interface UsersGetParams {
   sortBy?: NameSortMode
 }
 
-export interface UsersGetUserParams {
+export interface BuiltinUsersGetUserParams {
   userName: Name
 }
 
@@ -2890,6 +3099,114 @@ export class Api extends HttpClient {
         ...params,
       }),
 
+    /**
+     * List IP Pools.
+     */
+    ipPoolsGet: (query: IpPoolsGetParams, params: RequestParams = {}) =>
+      this.request<IpPoolResultsPage>({
+        path: `/ip-pools`,
+        method: 'GET',
+        query,
+        ...params,
+      }),
+
+    /**
+     * Create a new IP Pool.
+     */
+    ipPoolsPost: (
+      query: IpPoolsPostParams,
+      body: IpPoolCreate,
+      params: RequestParams = {}
+    ) =>
+      this.request<IpPool>({
+        path: `/ip-pools`,
+        method: 'POST',
+        body,
+        ...params,
+      }),
+
+    /**
+     * Fetch a single IP Pool.
+     */
+    ipPoolsGetIpPool: ({ poolName }: IpPoolsGetIpPoolParams, params: RequestParams = {}) =>
+      this.request<IpPool>({
+        path: `/ip-pools/${poolName}`,
+        method: 'GET',
+        ...params,
+      }),
+
+    /**
+     * Update an IP Pool.
+     */
+    ipPoolsPutIpPool: (
+      { poolName }: IpPoolsPutIpPoolParams,
+      body: IpPoolUpdate,
+      params: RequestParams = {}
+    ) =>
+      this.request<IpPool>({
+        path: `/ip-pools/${poolName}`,
+        method: 'PUT',
+        body,
+        ...params,
+      }),
+
+    /**
+     * Delete an IP Pool.
+     */
+    ipPoolsDeleteIpPool: (
+      { poolName }: IpPoolsDeleteIpPoolParams,
+      params: RequestParams = {}
+    ) =>
+      this.request<void>({
+        path: `/ip-pools/${poolName}`,
+        method: 'DELETE',
+        ...params,
+      }),
+
+    /**
+     * List the ranges of IP addresses within an existing IP Pool.
+     */
+    ipPoolRangesGet: (
+      { poolName, ...query }: IpPoolRangesGetParams,
+      params: RequestParams = {}
+    ) =>
+      this.request<IpPoolRangeResultsPage>({
+        path: `/ip-pools/${poolName}/ranges`,
+        method: 'GET',
+        query,
+        ...params,
+      }),
+
+    /**
+     * Add a new range to an existing IP Pool.
+     */
+    ipPoolRangesAdd: (
+      { poolName }: IpPoolRangesAddParams,
+      body: IpRange,
+      params: RequestParams = {}
+    ) =>
+      this.request<IpPoolRange>({
+        path: `/ip-pools/${poolName}/ranges/add`,
+        method: 'POST',
+        body,
+        ...params,
+      }),
+
+    /**
+     * Remove a range from an existing IP Pool.
+     */
+    ipPoolRangesDelete: (
+      { poolName }: IpPoolRangesDeleteParams,
+      body: IpRange,
+      params: RequestParams = {}
+    ) =>
+      this.request<void>({
+        path: `/ip-pools/${poolName}/ranges/delete`,
+        method: 'POST',
+        body,
+        ...params,
+      }),
+
     spoofLogin: (
       query: SpoofLoginParams,
       body: SpoofLoginBody,
@@ -3006,7 +3323,7 @@ export class Api extends HttpClient {
       { orgName }: OrganizationGetPolicyParams,
       params: RequestParams = {}
     ) =>
-      this.request<OrganizationRolesPolicy>({
+      this.request<OrganizationRolePolicy>({
         path: `/organizations/${orgName}/policy`,
         method: 'GET',
         ...params,
@@ -3017,10 +3334,10 @@ export class Api extends HttpClient {
      */
     organizationPutPolicy: (
       { orgName }: OrganizationPutPolicyParams,
-      body: OrganizationRolesPolicy,
+      body: OrganizationRolePolicy,
       params: RequestParams = {}
     ) =>
-      this.request<OrganizationRolesPolicy>({
+      this.request<OrganizationRolePolicy>({
         path: `/organizations/${orgName}/policy`,
         method: 'PUT',
         body,
@@ -3362,6 +3679,26 @@ export class Api extends HttpClient {
         ...params,
       }),
 
+    /**
+     * Update information about an instance's network interface
+     */
+    instanceNetworkInterfacesPutInterface: (
+      {
+        instanceName,
+        interfaceName,
+        orgName,
+        projectName,
+      }: InstanceNetworkInterfacesPutInterfaceParams,
+      body: NetworkInterfaceUpdate,
+      params: RequestParams = {}
+    ) =>
+      this.request<NetworkInterface>({
+        path: `/organizations/${orgName}/projects/${projectName}/instances/${instanceName}/network-interfaces/${interfaceName}`,
+        method: 'PUT',
+        body,
+        ...params,
+      }),
+
     /**
      * Detach a network interface from an instance.
      */
@@ -3393,6 +3730,25 @@ export class Api extends HttpClient {
         ...params,
       }),
 
+    /**
+     * Get contents of an instance's serial console.
+     */
+    projectInstancesInstanceSerialGet: (
+      {
+        instanceName,
+        orgName,
+        projectName,
+        ...query
+      }: ProjectInstancesInstanceSerialGetParams,
+      params: RequestParams = {}
+    ) =>
+      this.request<InstanceSerialConsoleData>({
+        path: `/organizations/${orgName}/projects/${projectName}/instances/${instanceName}/serial`,
+        method: 'GET',
+        query,
+        ...params,
+      }),
+
     /**
      * Boot an instance.
      */
@@ -3426,7 +3782,7 @@ export class Api extends HttpClient {
       { orgName, projectName }: OrganizationProjectsGetProjectPolicyParams,
       params: RequestParams = {}
     ) =>
-      this.request<ProjectRolesPolicy>({
+      this.request<ProjectRolePolicy>({
         path: `/organizations/${orgName}/projects/${projectName}/policy`,
         method: 'GET',
         ...params,
@@ -3437,10 +3793,10 @@ export class Api extends HttpClient {
      */
     organizationProjectsPutProjectPolicy: (
       { orgName, projectName }: OrganizationProjectsPutProjectPolicyParams,
-      body: ProjectRolesPolicy,
+      body: ProjectRolePolicy,
       params: RequestParams = {}
     ) =>
-      this.request<ProjectRolesPolicy>({
+      this.request<ProjectRolePolicy>({
         path: `/organizations/${orgName}/projects/${projectName}/policy`,
         method: 'PUT',
         body,
@@ -3840,7 +4196,7 @@ export class Api extends HttpClient {
      * Fetch the top-level IAM policy
      */
     policyGet: (query: PolicyGetParams, params: RequestParams = {}) =>
-      this.request<FleetRolesPolicy>({
+      this.request<FleetRolePolicy>({
         path: `/policy`,
         method: 'GET',
         ...params,
@@ -3851,10 +4207,10 @@ export class Api extends HttpClient {
      */
     policyPut: (
       query: PolicyPutParams,
-      body: FleetRolesPolicy,
+      body: FleetRolePolicy,
       params: RequestParams = {}
     ) =>
-      this.request<FleetRolesPolicy>({
+      this.request<FleetRolePolicy>({
         path: `/policy`,
         method: 'PUT',
         body,
@@ -4022,7 +4378,7 @@ export class Api extends HttpClient {
       { siloName }: SilosGetSiloPolicyParams,
       params: RequestParams = {}
     ) =>
-      this.request<SiloRolesPolicy>({
+      this.request<SiloRolePolicy>({
         path: `/silos/${siloName}/policy`,
         method: 'GET',
         ...params,
@@ -4033,10 +4389,10 @@ export class Api extends HttpClient {
      */
     silosPutSiloPolicy: (
       { siloName }: SilosPutSiloPolicyParams,
-      body: SiloRolesPolicy,
+      body: SiloRolePolicy,
       params: RequestParams = {}
     ) =>
-      this.request<SiloRolesPolicy>({
+      this.request<SiloRolePolicy>({
         path: `/silos/${siloName}/policy`,
         method: 'PUT',
         body,
@@ -4093,9 +4449,9 @@ export class Api extends HttpClient {
       }),
 
     /**
-     * List the built-in system users
+     * List users
      */
-    usersGet: (query: UsersGetParams, params: RequestParams = {}) =>
+    siloUsersGet: (query: SiloUsersGetParams, params: RequestParams = {}) =>
       this.request<UserResultsPage>({
         path: `/users`,
         method: 'GET',
@@ -4103,12 +4459,26 @@ export class Api extends HttpClient {
         ...params,
       }),
 
+    /**
+     * List the built-in system users
+     */
+    builtinUsersGet: (query: BuiltinUsersGetParams, params: RequestParams = {}) =>
+      this.request<UserBuiltinResultsPage>({
+        path: `/users_builtin`,
+        method: 'GET',
+        query,
+        ...params,
+      }),
+
     /**
      * Fetch a specific built-in system user
      */
-    usersGetUser: ({ userName }: UsersGetUserParams, params: RequestParams = {}) =>
-      this.request<User>({
-        path: `/users/${userName}`,
+    builtinUsersGetUser: (
+      { userName }: BuiltinUsersGetUserParams,
+      params: RequestParams = {}
+    ) =>
+      this.request<UserBuiltin>({
+        path: `/users_builtin/${userName}`,
         method: 'GET',
         ...params,
       }),
diff --git a/libs/api/__generated__/OMICRON_VERSION b/libs/api/__generated__/OMICRON_VERSION
index 45f25d83d..50acf1766 100644
--- a/libs/api/__generated__/OMICRON_VERSION
+++ b/libs/api/__generated__/OMICRON_VERSION
@@ -1,2 +1,2 @@
 # generated file. do not update manually. see docs/update-pinned-api.md
-c45136595220c8566aabd77cf6f12d29b1ca5a91
+0d2410071711d7ecdd3c115ebfb93b3ea3e1e16b
diff --git a/libs/api/index.ts b/libs/api/index.ts
index 2eaf97785..649963907 100644
--- a/libs/api/index.ts
+++ b/libs/api/index.ts
@@ -27,6 +27,7 @@ export const useApiQuery = getUseApiQuery(api.methods, handleErrors)
 export const useApiMutation = getUseApiMutation(api.methods, handleErrors)
 export const useApiQueryClient = getUseApiQueryClient<ApiMethods>()
 
+export * from './roles'
 export * from './util'
 export * from './__generated__/Api'
 
diff --git a/libs/api/roles.spec.ts b/libs/api/roles.spec.ts
new file mode 100644
index 000000000..94a7bf160
--- /dev/null
+++ b/libs/api/roles.spec.ts
@@ -0,0 +1,72 @@
+import type { ProjectRolePolicy } from './__generated__/Api'
+import {
+  getMainRole,
+  getOrgRole,
+  getProjectRole,
+  orgRoleOrder,
+  projectRoleOrder,
+  setUserRole,
+} from './roles'
+
+// not strictly necessary since we're testing the other functions, but it's nice
+// to show how it works
+describe('getMainRole', () => {
+  it('uses role order to choose which role to return', () => {
+    expect(getMainRole({ x: 0, y: 3 })(['x', 'y'])).toEqual('x')
+    expect(getMainRole({ x: 4, y: 1 })(['x', 'y'])).toEqual('y')
+  })
+})
+
+describe('getMainProjectRole', () => {
+  it('returns null when the list of role assignments is empty', () => {
+    expect(getProjectRole([])).toBeNull()
+    expect(getOrgRole([])).toBeNull()
+  })
+
+  it('returns the strongest role when there are multiple roles, regardless of policy order', () => {
+    expect(getProjectRole(['admin', 'collaborator'])).toEqual('admin')
+    expect(getProjectRole(['collaborator', 'admin'])).toEqual('admin')
+
+    expect(getOrgRole(['collaborator', 'viewer'])).toEqual('collaborator')
+    expect(getOrgRole(['viewer', 'collaborator'])).toEqual('collaborator')
+  })
+
+  it("type errors when passed a role that's not in the enum", () => {
+    // @ts-expect-error
+    getProjectRole(['fake!'])
+    // @ts-expect-error
+    getOrgRole(['fake!'])
+  })
+})
+
+const keyCount = (rec: Record<string, number>) => Object.keys(rec).length
+const valueCount = (rec: Record<string, number>) => new Set(Object.values(rec)).size
+
+test('role orders assign a different order number to every role', () => {
+  expect(keyCount(projectRoleOrder)).toEqual(valueCount(projectRoleOrder))
+  expect(keyCount(orgRoleOrder)).toEqual(valueCount(orgRoleOrder))
+})
+
+const emptyPolicy = { roleAssignments: [] }
+
+const abcAdmin: ProjectRolePolicy = {
+  roleAssignments: [{ identityId: 'abc', identityType: 'silo_user', roleName: 'admin' }],
+}
+
+const abcViewer: ProjectRolePolicy = {
+  roleAssignments: [{ identityId: 'abc', identityType: 'silo_user', roleName: 'viewer' }],
+}
+
+describe('setUserRole', () => {
+  it('adds a user', () => {
+    expect(setUserRole('abc', 'admin', emptyPolicy)).toEqual(abcAdmin)
+  })
+
+  it('overrides an existing user', () => {
+    expect(setUserRole('abc', 'viewer', abcAdmin)).toEqual(abcViewer)
+  })
+
+  it('deletes a user when passed a roleId of null', () => {
+    expect(setUserRole('abc', null, abcViewer)).toEqual(emptyPolicy)
+  })
+})
diff --git a/libs/api/roles.ts b/libs/api/roles.ts
new file mode 100644
index 000000000..5a96ce592
--- /dev/null
+++ b/libs/api/roles.ts
@@ -0,0 +1,144 @@
+/*
+ * Utilities around resource roles and policies. This logic belongs in the data
+ * layer and not in app/ because we are experimenting with it to decide whether
+ * it belongs in the API proper.
+ */
+import { useMemo } from 'react'
+
+import { groupBy, sortBy } from '@oxide/util'
+
+import { useApiQuery } from '.'
+import type { IdentityType, OrganizationRole, ProjectRole } from './__generated__/Api'
+
+/** Given a role order and a list of roles, get the one that sorts earliest */
+export const getMainRole =
+  <Role extends string>(roleOrder: Record<Role, number>) =>
+  (userRoles: Role[]): Role | null =>
+    userRoles.length > 0 ? sortBy(userRoles, (r) => roleOrder[r])[0] : null
+
+/** Turn a role order record into a sorted array of strings. */
+const flatRoles = <Role extends string>(roleOrder: Record<Role, number>): Role[] =>
+  sortBy(Object.entries(roleOrder), ([_role, order]) => order).map(([role]) => role as Role)
+
+////////////////////////////
+// Project roles
+////////////////////////////
+
+/** Project roles from most to least permissive */
+export const projectRoleOrder: Record<ProjectRole, number> = {
+  admin: 0,
+  collaborator: 1,
+  viewer: 2,
+}
+
+/** Given a user ID and a policy, get the most permissive role for that user */
+export const getProjectRole = getMainRole(projectRoleOrder)
+
+/** `projectRoleOrder` record converted to a sorted array of roles. */
+export const projectRoles = flatRoles(projectRoleOrder)
+
+////////////////////////////
+// Org roles
+////////////////////////////
+
+// right now orgs and projects are identical, so the below feels a bit silly
+// using Record for the orders ensures the ordering includes all roles
+
+/** Org roles from most to least permissive */
+export const orgRoleOrder: Record<OrganizationRole, number> = {
+  admin: 0,
+  collaborator: 1,
+  viewer: 2,
+}
+
+/** `orgRoleOrder` record converted to a sorted array of roles. */
+export const orgRoles = flatRoles(orgRoleOrder)
+
+/** Given a user ID and a policy, get the most permissive role for that user */
+export const getOrgRole = getMainRole(orgRoleOrder)
+
+////////////////////////////
+// Policy helpers
+////////////////////////////
+
+// generic policy, used to represent org and project policies while agnostic
+// about the roles enum
+type RoleAssignment<Role> = {
+  identityId: string
+  identityType: IdentityType
+  roleName: Role
+}
+type Policy<Role extends string> = { roleAssignments: RoleAssignment<Role>[] }
+
+/**
+ * Returns a new updated policy. Does not modify the passed-in policy.
+ *
+ * @param roleName Pass `null` to delete the user from the policy.
+ */
+export function setUserRole<Role extends string>(
+  userId: string,
+  roleName: Role | null,
+  policy: Policy<Role>
+): Policy<Role> {
+  // filter out any existing role assignments — we're pretending for now that you can only
+  const roleAssignments = policy.roleAssignments.filter((ra) => ra.identityId !== userId)
+  if (roleName !== null) {
+    roleAssignments.push({
+      identityId: userId,
+      identityType: 'silo_user',
+      roleName,
+    })
+  }
+  return { roleAssignments }
+}
+
+export type UserAccessRow<Role extends string> = {
+  id: string
+  name: string
+  roleName: Role
+}
+
+/**
+ * Role assignments come from the API in (user, role) pairs without display
+ * names. This groups those pairs into one row per user, picks the strongest
+ * role as that user's "main" role, and uses a fetched list of "all" users to
+ * add a display name for each user. It's a bit awkward, but the logic is
+ * identical between projects and orgs so it is worth sharing.
+ */
+export function useUserAccessRows<Role extends string>(
+  // allow undefined because this is fetched with RQ
+  policy: Policy<Role> | undefined,
+  roleOrder: Record<Role, number>
+): UserAccessRow<Role>[] {
+  return useMemo(() => {
+    const roleAssignments = policy?.roleAssignments || []
+    const groups = groupBy(roleAssignments, (u) => u.identityId)
+    return Object.entries(groups).map(([userId, groupRoleAssignments]) => ({
+      id: userId,
+      name: '', // placeholder until we get names, obviously
+      // assert non-null because we know there has to be one, otherwise there
+      // wouldn't be a group
+      roleName: getMainRole(roleOrder)(groupRoleAssignments.map((ra) => ra.roleName))!,
+    }))
+  }, [policy, roleOrder])
+}
+
+/**
+ * Fetch list of users and filter out the ones that are already in the given
+ * policy.
+ */
+export function useUsersNotInPolicy<Role extends string>(
+  // allow undefined because this is fetched with RQ
+  policy: Policy<Role> | undefined
+) {
+  const { data: users } = useApiQuery('siloUsersGet', {})
+  return useMemo(() => {
+    // IDs are UUIDs, so no need to include identity type in set value to disambiguate
+    const usersInPolicy = new Set(policy?.roleAssignments.map((ra) => ra.identityId) || [])
+    return (
+      users?.items
+        // only show users for adding if they're not already in the policy
+        .filter((u) => !usersInPolicy.has(u.id)) || []
+    )
+  }, [users, policy])
+}
diff --git a/libs/api/util.ts b/libs/api/util.ts
index d68593ebf..91ff4a8fd 100644
--- a/libs/api/util.ts
+++ b/libs/api/util.ts
@@ -37,5 +37,5 @@ export const firewallRuleGetToPut = (
     'targets'
   )
 
-export const nullIfEmpty = (s: string): string | null =>
-  typeof s === 'string' && s.trim().length === 0 ? null : s
+export const nullIfEmpty = (s: string | null | undefined): string | null =>
+  typeof s === 'string' && s.trim().length > 0 ? s : null
diff --git a/libs/table/Table.tsx b/libs/table/Table.tsx
index 4ec91792b..db44b66a4 100644
--- a/libs/table/Table.tsx
+++ b/libs/table/Table.tsx
@@ -48,7 +48,7 @@ export const Table = <TGenerics extends OurTableGenerics>({
     </UITable.Header>
     <UITable.Body>
       {table.getRowModel().rows.map((row) => (
-        <UITable.Row className={rowClassName} key={row.id}>
+        <UITable.Row className={rowClassName} selected={row.getIsSelected()} key={row.id}>
           {row.getAllCells().map((cell) => (
             <UITable.Cell key={cell.column.id}>{cell.renderCell()}</UITable.Cell>
           ))}
diff --git a/libs/table/cells/EnabledCell.tsx b/libs/table/cells/EnabledCell.tsx
index 7154dd4e4..b94e309fb 100644
--- a/libs/table/cells/EnabledCell.tsx
+++ b/libs/table/cells/EnabledCell.tsx
@@ -7,12 +7,12 @@ export const EnabledCell = ({ value }: Cell<VpcFirewallRuleStatus>) =>
   value === 'enabled' ? (
     <>
       <Success12Icon className="mr-1 text-accent" />
-      <Badge variant="secondary">Enabled</Badge>
+      <Badge variant="default">Enabled</Badge>
     </>
   ) : (
     <>
       <Success12Icon className="mr-1 text-notice" />
-      <Badge color="notice" variant="secondary">
+      <Badge color="notice" variant="default">
         Disabled
       </Badge>
     </>
diff --git a/libs/table/cells/FirewallFilterCell.tsx b/libs/table/cells/FirewallFilterCell.tsx
index ad4cd2df5..c741fc791 100644
--- a/libs/table/cells/FirewallFilterCell.tsx
+++ b/libs/table/cells/FirewallFilterCell.tsx
@@ -11,7 +11,7 @@ export const FirewallFilterCell = ({
     {hosts && hosts.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} value={tv} />)}
     {protocols &&
       protocols.map((p, i) => (
-        <Badge key={`${p}-${i}`} variant="secondary">
+        <Badge key={`${p}-${i}`} variant="default">
           {p}
         </Badge>
       ))}
diff --git a/libs/table/cells/InstanceStatusCell.tsx b/libs/table/cells/InstanceStatusCell.tsx
index eed32442d..10769910d 100644
--- a/libs/table/cells/InstanceStatusCell.tsx
+++ b/libs/table/cells/InstanceStatusCell.tsx
@@ -1,8 +1,8 @@
-import { formatDistanceToNow } from 'date-fns'
-
 import type { Instance } from '@oxide/api'
 import { Badge } from '@oxide/ui'
 
+import { timeAgoAbbr } from 'app/util/date'
+
 import type { Cell } from './Cell'
 import { TwoLineCell } from './TwoLineCell'
 
@@ -11,12 +11,12 @@ export const InstanceStatusCell = ({
 }: Cell<Pick<Instance, 'runState' | 'timeRunStateUpdated'>>) => {
   return (
     <TwoLineCell
-      detailsClass="text-mono-sm"
+      detailsClass="text-mono-sm !lowercase"
       value={[
-        <Badge variant="secondary" key="run-state">
+        <Badge variant="default" key="run-state">
           {value.runState}
         </Badge>,
-        formatDistanceToNow(value.timeRunStateUpdated),
+        timeAgoAbbr(value.timeRunStateUpdated),
       ]}
     ></TwoLineCell>
   )
diff --git a/libs/table/cells/LinkCell.tsx b/libs/table/cells/LinkCell.tsx
index 1185cdf11..86f1d70d6 100644
--- a/libs/table/cells/LinkCell.tsx
+++ b/libs/table/cells/LinkCell.tsx
@@ -6,7 +6,7 @@ export const linkCell =
   (makeHref: (value: string) => string) =>
   ({ value }: Cell<string>) => {
     return (
-      <Link className="text-accent" to={makeHref(value)}>
+      <Link className="text-sans-semi-md text-accent hover:underline" to={makeHref(value)}>
         {value}
       </Link>
     )
diff --git a/libs/table/cells/SizeCell.tsx b/libs/table/cells/SizeCell.tsx
index 5df276d97..2c202a86c 100644
--- a/libs/table/cells/SizeCell.tsx
+++ b/libs/table/cells/SizeCell.tsx
@@ -3,6 +3,11 @@ import fileSize from 'filesize'
 import type { Cell } from './Cell'
 
 /** Human-readable format for size in bytes */
-export const SizeCell = ({ value: bytes }: Cell<number>) => (
-  <span className="text-default">{fileSize(bytes, { base: 2 })}</span>
-)
+export const SizeCell = ({ value: bytes }: Cell<number>) => {
+  const size = fileSize(bytes, { base: 2, output: 'object' })
+  return (
+    <span className="text-default">
+      {size.value} <span className="text-secondary">{size.unit}</span>
+    </span>
+  )
+}
diff --git a/libs/table/cells/TypeValueCell.tsx b/libs/table/cells/TypeValueCell.tsx
index 3ad43b690..51dc39dea 100644
--- a/libs/table/cells/TypeValueCell.tsx
+++ b/libs/table/cells/TypeValueCell.tsx
@@ -9,7 +9,7 @@ export type TypeValue = {
 
 export const TypeValueCell = ({ value: { type, value } }: Cell<TypeValue>) => (
   <div className="space-x-1">
-    <Badge variant="secondary">{type}</Badge>
+    <Badge variant="default">{type}</Badge>
     <Badge>{value}</Badge>
   </div>
 )
diff --git a/libs/table/columns/action-col.tsx b/libs/table/columns/action-col.tsx
index b21607423..088103f13 100644
--- a/libs/table/columns/action-col.tsx
+++ b/libs/table/columns/action-col.tsx
@@ -10,6 +10,7 @@ export type MenuAction = {
   label: string
   onActivate: () => void
   disabled?: boolean
+  className?: string
 }
 
 export const getActionsCol = <TGenerics extends TableGenerics>(
@@ -32,6 +33,7 @@ export const getActionsCol = <TGenerics extends TableGenerics>(
             {actions.map((action) => {
               return (
                 <MenuItem
+                  className={action.className}
                   key={kebabCase(`action-${action.label}`)}
                   onSelect={action.onActivate}
                   disabled={action.disabled}
diff --git a/libs/ui/index.ts b/libs/ui/index.ts
index df15b0a19..e0326edf7 100644
--- a/libs/ui/index.ts
+++ b/libs/ui/index.ts
@@ -6,7 +6,6 @@ export * from './lib/badge/Badge'
 export * from './lib/breadcrumbs/Breadcrumbs'
 export * from './lib/button/Button'
 export * from './lib/checkbox/Checkbox'
-export * from './lib/combobox/Combobox'
 export * from './lib/divider/Divider'
 export * from './lib/empty-message/EmptyMessage'
 export * from './lib/field-label/FieldLabel'
diff --git a/libs/ui/lib/breadcrumbs/Breadcrumbs.stories.tsx b/libs/ui/lib/breadcrumbs/Breadcrumbs.stories.tsx
index 9118a6210..f7101e3d4 100644
--- a/libs/ui/lib/breadcrumbs/Breadcrumbs.stories.tsx
+++ b/libs/ui/lib/breadcrumbs/Breadcrumbs.stories.tsx
@@ -22,7 +22,7 @@ export const Default: Story = {
       { href: '/', label: 'Home' },
       { href: '/first', label: 'First page' },
       { href: '/second', label: 'Second page' },
-      { label: 'Third page' },
+      { href: '/third', label: 'Third page' },
     ],
   },
 }
diff --git a/libs/ui/lib/breadcrumbs/Breadcrumbs.tsx b/libs/ui/lib/breadcrumbs/Breadcrumbs.tsx
index 6763e5679..4a36665b7 100644
--- a/libs/ui/lib/breadcrumbs/Breadcrumbs.tsx
+++ b/libs/ui/lib/breadcrumbs/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom'
 
-type Crumb = { href?: string; label: string }
+type Crumb = { href: string; label: string }
 
 export interface BreadcrumbsProps {
   data: Crumb[]
@@ -10,17 +10,13 @@ export const Breadcrumbs = ({ data }: BreadcrumbsProps) => (
   <ol className="text-mono-md" data-testid="Breadcrumbs">
     {data.map(({ href, label }) => (
       <li
-        className="inline-block before:mx-2 
+        className="inline-block before:mx-2
                    before:content-['/'] before:text-quaternary before:first-of-type:content-none"
         key={`${href}-${label}`}
       >
-        {href ? (
-          <Link to={href} className="text-tertiary hover:text-secondary">
-            {label}
-          </Link>
-        ) : (
-          <span className="text-secondary">{label}</span>
-        )}
+        <Link to={href} className="text-tertiary hover:text-secondary">
+          {label}
+        </Link>
       </li>
     ))}
   </ol>
diff --git a/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx b/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx
index b63ac43d4..7bfba6d5e 100644
--- a/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx
+++ b/libs/ui/lib/bulk-action-menu/BulkActionMenu.tsx
@@ -24,7 +24,7 @@ export function BulkActionMenu({ children, selectedCount }: BulkActionMenuProps)
 BulkActionMenu.Button = (props: Omit<ButtonProps, 'size' | 'variant'>) => (
   <Button
     size="xs"
-    variant="secondary"
+    variant="default"
     // TODO: Remove this border once the proper button styles are available
     className="rounded border !border-accent-secondary"
     {...props}
diff --git a/libs/ui/lib/button/Button.stories.tsx b/libs/ui/lib/button/Button.stories.tsx
index 9b6470ac8..beee4ff14 100644
--- a/libs/ui/lib/button/Button.stories.tsx
+++ b/libs/ui/lib/button/Button.stories.tsx
@@ -58,12 +58,3 @@ export const All = () => {
     </div>
   )
 }
-
-export const Selected = () => {
-  return (
-    <div className="is-selected -m-4 p-4 bg-accent-secondary">
-      <All />
-    </div>
-  )
-}
-Selected.storyName = `Theme/Selected`
diff --git a/libs/ui/lib/button/Button.tsx b/libs/ui/lib/button/Button.tsx
index b39171e63..b8d536fdc 100644
--- a/libs/ui/lib/button/Button.tsx
+++ b/libs/ui/lib/button/Button.tsx
@@ -6,8 +6,8 @@ import { assertUnreachable } from '@oxide/util'
 import './button.css'
 
 export const buttonSizes = ['xs', 'sm', 'base'] as const
-export const variants = ['default', 'secondary', 'ghost', 'link'] as const
-export const colors = ['accent', 'destructive', 'notice', 'neutral'] as const
+export const variants = ['default', 'ghost', 'link'] as const
+export const colors = ['primary', 'secondary', 'destructive', 'notice'] as const
 
 export type ButtonSize = typeof buttonSizes[number]
 export type Variant = typeof variants[number]
@@ -22,38 +22,30 @@ const sizeStyle: Record<ButtonSize, string> = {
 const colorStyle = (variant: Variant, color: Color): string => {
   const style: `${Variant} ${Color}` = `${variant} ${color}`
   switch (style) {
-    case 'default accent':
-      return 'btn-accent'
-    case 'default notice':
-      return 'btn-notice'
+    case 'default primary':
+      return 'btn-primary'
+    case 'default secondary':
+      return 'btn-secondary-solid'
     case 'default destructive':
       return 'btn-destructive'
-    case 'default neutral':
+    case 'default notice':
+      return 'btn-notice'
+    case 'ghost primary':
+      return 'btn-primary-ghost'
+    case 'ghost secondary':
       return 'btn-secondary'
-    case 'secondary accent':
-      return 'btn-accent-secondary'
-    case 'secondary notice':
-      return 'btn-notice-secondary'
-    case 'secondary destructive':
-      return 'btn-destructive-secondary'
-    case 'secondary neutral':
-      return 'btn-not-implemented'
-    case 'ghost accent':
-      return 'btn-ghost-accent'
-    case 'ghost notice':
-      return 'btn-ghost-notice'
     case 'ghost destructive':
-      return 'btn-ghost-destructive'
-    case 'ghost neutral':
-      return 'btn-ghost-secondary'
-    case 'link accent':
-      return 'btn-link-accent'
+      return 'btn-destructive-ghost'
+    case 'ghost notice':
+      return 'btn-notice-ghost'
+    case 'link primary':
+      return 'btn-primary-link'
+    case 'link secondary':
+      return 'btn-secondary-link'
     case 'link notice':
-      return 'btn-link-notice'
+      return 'btn-notice-link'
     case 'link destructive':
-      return 'btn-link-destructive'
-    case 'link neutral':
-      return 'btn-link-secondary'
+      return 'btn-destructive-link'
     default:
       assertUnreachable(`Invalid button state ${style}`, style)
   }
@@ -82,7 +74,7 @@ export type ButtonProps = React.ComponentPropsWithRef<'button'> & ButtonStylePro
 export const buttonStyle = ({
   size = 'base',
   variant = 'default',
-  color = 'accent',
+  color = 'primary',
 }: ButtonStyleProps = {}) => {
   return cn(
     'ox-button',
diff --git a/libs/ui/lib/button/button.css b/libs/ui/lib/button/button.css
index 24806f4a1..a9b90d495 100644
--- a/libs/ui/lib/button/button.css
+++ b/libs/ui/lib/button/button.css
@@ -1,92 +1,52 @@
 /**
  * Default
  */
-.btn-accent {
-  @apply text-inverse bg-accent hover:bg-accent-hover disabled:text-accent-disabled disabled:bg-accent;
+.btn-primary {
+  @apply text-accent bg-accent-secondary hover:bg-accent-secondary-hover disabled:text-accent-disabled disabled:bg-accent-secondary;
 }
 
-.btn-notice {
-  @apply text-inverse bg-notice hover:bg-notice-hover disabled:text-notice-disabled disabled:bg-notice;
+/* Using `-solid` since ghost version is used as default secondary button state */
+.btn-secondary-solid {
+  @apply text-secondary bg-secondary hover:bg-secondary-hover disabled:text-quaternary disabled:bg-secondary;
 }
 
 .btn-destructive {
-  @apply text-inverse bg-destructive hover:bg-destructive-hover disabled:text-destructive-disabled disabled:bg-destructive;
-}
-
-.btn-secondary {
-  @apply text-secondary bg-secondary hover:bg-secondary-hover disabled:bg-secondary;
-}
-
-/**
- * Secondary
- */
-.btn-accent-secondary {
-  @apply text-accent bg-accent-secondary hover:bg-accent-secondary-hover disabled:text-accent-disabled disabled:bg-accent-secondary;
-}
-
-.btn-destructive-secondary {
   @apply text-destructive bg-destructive-secondary hover:bg-destructive-secondary-hover disabled:text-destructive-disabled disabled:bg-destructive-secondary;
 }
 
-.btn-notice-secondary {
+.btn-notice {
   @apply text-notice bg-notice-secondary hover:bg-notice-secondary-hover disabled:text-notice-disabled disabled:bg-notice-secondary;
 }
 
 /**
  * Ghost
  */
-.btn-ghost-accent {
-  @apply border text-accent border-accent-tertiary hover:bg-accent-secondary-hover disabled:bg-transparent;
-}
-.btn-ghost-notice {
-  @apply border text-notice border-notice-secondary hover:bg-notice-secondary-hover disabled:bg-transparent;
-}
-.btn-ghost-destructive {
-  @apply border text-destructive border-destructive-secondary hover:bg-destructive-secondary-hover disabled:bg-transparent;
-}
-.btn-ghost-secondary {
-  @apply border text-secondary border-default hover:bg-raise disabled:bg-transparent;
+.btn-primary-ghost {
+  @apply border text-accent border-accent-tertiary hover:bg-accent-secondary disabled:bg-transparent;
 }
 
-/**
- * Link
- */
-.btn-link-accent {
-  @apply text-accent hover:underline disabled:no-underline;
-}
-
-.btn-link-notice {
-  @apply text-notice hover:underline disabled:no-underline;
+/* Removing `-ghost` so this version is default `btn-secondary` */
+.btn-secondary {
+  @apply border text-secondary border-default hover:bg-secondary disabled:bg-transparent;
 }
 
-.btn-link-destructive {
-  @apply text-destructive hover:underline disabled:no-underline;
+.btn-destructive-ghost {
+  @apply border text-destructive border-destructive-secondary hover:bg-destructive-secondary disabled:bg-transparent;
 }
 
-.btn-link-secondary {
-  @apply text-secondary hover:underline disabled:no-underline;
+.btn-notice-ghost {
+  @apply border text-notice border-notice-secondary hover:bg-notice-secondary disabled:bg-transparent;
 }
 
 /**
- * Disabled
+ * Link
  */
-.btn-accent:disabled,
-.btn-accent-secondary:disabled {
-  @apply text-accent-disabled bg-accent-secondary;
-}
-
-.btn-notice:disabled,
-.btn-notice-secondary:disabled {
-  @apply text-notice-disabled bg-notice-secondary;
-}
-
-.btn-destructive:disabled,
-.btn-destructive-secondary:disabled {
-  @apply text-destructive-disabled bg-destructive-secondary;
+.btn-link-accent {
+  @apply text-accent hover:underline disabled:no-underline;
 }
 
 /**
- * A class to make it very visually obvious that a button style is missing 
+ * A class to make it very visually obvious that a button style is missing
  */
 .btn-not-implemented {
   @apply cursor-not-allowed text-transparent focus:ring-transparent;
diff --git a/libs/ui/lib/checkbox/Checkbox.tsx b/libs/ui/lib/checkbox/Checkbox.tsx
index 26b14fdae..b7b1631f6 100644
--- a/libs/ui/lib/checkbox/Checkbox.tsx
+++ b/libs/ui/lib/checkbox/Checkbox.tsx
@@ -15,7 +15,7 @@ const inputStyle = `
   appearance-none border border-default bg-default h-4 w-4 rounded absolute left-0 outline-none
   disabled:cursor-not-allowed
   focus:ring-2 focus:ring-accent-secondary
-  hover:bg-secondary
+  hover:bg-secondary hover:cursor-pointer
   checked:bg-accent-secondary checked:border-accent hover:checked:bg-accent-secondary-hover
   indeterminate:bg-accent-secondary indeterminate:border-accent hover:indeterminate:bg-accent-secondary-hover
 `
diff --git a/libs/ui/lib/combobox/Combobox.css b/libs/ui/lib/combobox/Combobox.css
deleted file mode 100644
index 6ba879c3f..000000000
--- a/libs/ui/lib/combobox/Combobox.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/* 
- * Make Reach not whine about us not importing their CSS file, which doesn't do
- * anything useful
- */
-:root {
-  --reach-combobox: 1;
-}
-
-[data-reach-combobox-option] {
-  @apply rounded border border-transparent;
-
-  &:hover {
-  }
-
-  &[aria-selected='true'],
-  &[data-highlighted] {
-    @apply text-accent bg-accent-secondary border-accent;
-  }
-}
diff --git a/libs/ui/lib/combobox/Combobox.tsx b/libs/ui/lib/combobox/Combobox.tsx
deleted file mode 100644
index 249b66d84..000000000
--- a/libs/ui/lib/combobox/Combobox.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
-  ComboboxInput,
-  ComboboxList,
-  ComboboxOption,
-  ComboboxPopover,
-  Combobox as RCombobox,
-} from '@reach/combobox'
-import { matchSorter } from 'match-sorter'
-import type { ChangeEvent } from 'react'
-
-import './Combobox.css'
-
-type ComboboxProps = {
-  items: string[]
-  value: string
-  disabled?: boolean
-  onSelect: (value: string) => void
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void
-}
-
-/**
- * Reach Combobox with match filtering and sorting powered by match-sorter.
- */
-export function Combobox({
-  items,
-  onChange,
-  onSelect,
-  value,
-  disabled,
-  ...props
-}: ComboboxProps) {
-  const matches = matchSorter(items, value)
-  return (
-    <RCombobox
-      openOnFocus
-      className="rounded border bg-default border-default focus-within:border-accent hover:focus-within:border-accent"
-      onSelect={onSelect}
-      {...props}
-    >
-      <ComboboxInput
-        className={`w-full border-none bg-transparent
-        py-[0.5625rem] px-3
-        text-sans-md text-default focus:outline-none disabled:cursor-not-allowed`}
-        onChange={onChange}
-        // TODO: better disabled styling
-        disabled={disabled}
-        // Note that unlike with a plain <input>, passing `onChange` does not
-        // also require passing in `value`, and in fact passing in `value`
-        // causes weird behavior. Our `onChange` is called in addition to the
-        // built-in one that allows it to manage its own state internally; our
-        // callback does not replace theirs. In short, do not pass `value` here.
-      />
-      <ComboboxPopover className="mt-2 bg-default">
-        {matches.length === 0 ? (
-          <p className="rounded border px-3 py-2 italic text-sans-sm text-secondary border-default">
-            {/* TODO: would be nicer to say something custom like "No matching disks found" */}
-            No matches found
-          </p>
-        ) : (
-          <ComboboxList persistSelection className="rounded border border-default">
-            {matches.map((item, i) => (
-              <ComboboxOption
-                // TODO: make border overlap container border like Justin's beautiful tables
-                className="cursor-pointer rounded border px-3 py-2 text-sans-sm border-default hover:bg-hover"
-                key={item}
-                value={item}
-                // looks pointless but is needed to prevent weird ordering bugs
-                // when using arrow keys. See https://github.com/reach/reach-ui/issues/840
-                index={i}
-              />
-            ))}
-          </ComboboxList>
-        )}
-      </ComboboxPopover>
-    </RCombobox>
-  )
-}
diff --git a/libs/ui/lib/empty-message/EmptyMessage.tsx b/libs/ui/lib/empty-message/EmptyMessage.tsx
index 303e8d988..a149a9c77 100644
--- a/libs/ui/lib/empty-message/EmptyMessage.tsx
+++ b/libs/ui/lib/empty-message/EmptyMessage.tsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 
 import { Button, buttonStyle } from '../button/Button'
 
-const buttonStyleProps = { variant: 'ghost', size: 'xs', color: 'neutral' } as const
+const buttonStyleProps = { variant: 'ghost', size: 'xs', color: 'secondary' } as const
 
 type Props = {
   icon?: ReactElement
diff --git a/libs/ui/lib/listbox/Listbox.tsx b/libs/ui/lib/listbox/Listbox.tsx
index d61bebe82..3ca6fe85c 100644
--- a/libs/ui/lib/listbox/Listbox.tsx
+++ b/libs/ui/lib/listbox/Listbox.tsx
@@ -2,7 +2,8 @@ import cn from 'classnames'
 import { useSelect } from 'downshift'
 import type { FC } from 'react'
 
-import { DirectionDownIcon } from '../icons'
+import { SelectArrows6Icon } from '@oxide/ui'
+import { classed } from '@oxide/util'
 
 type Item = { value: string; label: string }
 
@@ -34,44 +35,53 @@ export const Listbox: FC<ListboxProps> = ({
     },
   })
 
+  const Outline = classed.div`absolute z-10 h-full w-full rounded border border-accent pointer-events-none`
+
   return (
     <div className={cn('relative', className)}>
       <button
         type="button"
         className={cn(
-          `mt-1 flex w-full items-center justify-between rounded border
-          py-2 px-4 text-sans-md bg-default border-default
-          hover:bg-hover focus:ring-1 focus:ring-accent-secondary
+          `flex w-full items-center justify-between rounded border
+          h-[2.625rem] px-3 text-sans-md bg-default border-default
+          focus:outline-none focus:ring-2 focus:ring-accent-secondary
           disabled:cursor-not-allowed disabled:bg-disabled`,
-          select.isOpen ? 'text-secondary' : 'text-default'
+          select.isOpen ? 'text-secondary ring-2 ring-accent-secondary' : 'text-default'
         )}
         {...select.getToggleButtonProps()}
         {...props}
       >
         <span>{select.selectedItem ? itemToString(select.selectedItem) : placeholder}</span>
-        <DirectionDownIcon title="Select" className="ml-5" />
+
+        <div className="ml-5 flex h-[calc(100%-12px)] border-l border-secondary items-center">
+          <SelectArrows6Icon title="Select" className="ml-3 w-2 text-tertiary" />
+        </div>
       </button>
       <ul
         className={cn(
-          '!children:border-b-secondary absolute left-0 right-0 z-10 mt-1 overflow-y-auto rounded border-0 bg-default children:border children:border-b-0 children:border-default last:children:border-b',
+          '!children:border-b-secondary absolute left-0 right-0 z-10 mt-3 overflow-y-auto rounded border-secondary bg-raise children:border-b children:border-secondary last:children:border-b-0 focus:outline-none max-h-[17.5rem]',
           select.isOpen && 'border'
         )}
         {...select.getMenuProps()}
       >
         {select.isOpen &&
           items.map((item, index) => (
-            <li
-              key={item.value}
-              className={cn(
-                'py-2 px-4 text-sans-sm text-default hover:bg-raise',
-                select.selectedItem?.value === item.value &&
-                  'm-0.5 rounded outline outline-accent-secondary',
-                select.highlightedIndex === index && 'bg-raise'
-              )}
-              {...select.getItemProps({ item, index })}
-            >
-              {item.label}
-            </li>
+            <div key={index} className="relative">
+              {item.value === select.selectedItem?.value && <Outline />}
+
+              <li
+                key={item.value}
+                className={cn(
+                  'p-3 text-sans-sm text-default hover:bg-raise-hover cursor-pointer',
+                  select.selectedItem?.value === item.value &&
+                    'text-accent bg-accent-secondary hover:bg-accent-secondary-hover',
+                  select.highlightedIndex === index && 'bg-raise-hover'
+                )}
+                {...select.getItemProps({ item, index })}
+              >
+                {item.label}
+              </li>
+            </div>
           ))}
       </ul>
     </div>
diff --git a/libs/ui/lib/multi-select/MultiSelect.tsx b/libs/ui/lib/multi-select/MultiSelect.tsx
index ad7cddbf5..6bd2b187a 100644
--- a/libs/ui/lib/multi-select/MultiSelect.tsx
+++ b/libs/ui/lib/multi-select/MultiSelect.tsx
@@ -80,7 +80,7 @@ export const MultiSelect = ({
             ? ms.selectedItems?.map((selectedItem, index) => (
                 <Badge
                   key={selectedItem.value}
-                  variant="secondary"
+                  variant="default"
                   onClose={() => ms.removeSelectedItem(selectedItem)}
                   {...ms.getSelectedItemProps({ selectedItem, index })}
                 >
diff --git a/libs/ui/lib/pagination/Pagination.tsx b/libs/ui/lib/pagination/Pagination.tsx
index 904d2efef..1df2b634e 100644
--- a/libs/ui/lib/pagination/Pagination.tsx
+++ b/libs/ui/lib/pagination/Pagination.tsx
@@ -44,7 +44,7 @@ export const Pagination = ({
       <div
         className={cn(
           type === 'page' && 'py-5',
-          'flex items-center justify-between text-mono-xs text-default bg-default',
+          'flex items-center justify-between text-mono-sm text-default bg-default',
           className
         )}
       >
@@ -52,26 +52,26 @@ export const Pagination = ({
           rows per page <PageInput number={pageSize} />
         </span>
         {(hasNext || hasPrev) && (
-          <span className="flex space-x-2">
+          <span className="flex space-x-3">
             <button
-              className={cn(!hasPrev && 'text-secondary', 'flex items-center text-mono-xs')}
+              className={cn(!hasPrev && 'text-secondary', 'flex items-center text-mono-sm')}
               disabled={!hasPrev}
               onClick={onPrev}
             >
               <DirectionLeftIcon
-                className={cn('mr-0.5', hasPrev ? 'text-default' : 'text-quaternary')}
+                className={cn('mr-1', hasPrev ? 'text-default' : 'text-quaternary')}
               />
               prev
             </button>
             <button
-              className={cn(!hasNext && 'text-secondary', 'flex items-center text-mono-xs')}
+              className={cn(!hasNext && 'text-secondary', 'flex items-center text-mono-sm')}
               disabled={!hasNext}
               // nextPage will be defined if hasNext is true
               onClick={onNext.bind(null, nextPage!)}
             >
               next
               <DirectionRightIcon
-                className={cn('ml-0.5', hasNext ? 'text-default' : 'text-quaternary')}
+                className={cn('ml-1', hasNext ? 'text-default' : 'text-quaternary')}
               />
             </button>
           </span>
diff --git a/libs/ui/lib/properties-table/PropertiesTable.tsx b/libs/ui/lib/properties-table/PropertiesTable.tsx
index 9d1d99983..d5ad977c6 100644
--- a/libs/ui/lib/properties-table/PropertiesTable.tsx
+++ b/libs/ui/lib/properties-table/PropertiesTable.tsx
@@ -21,7 +21,7 @@ export function PropertiesTable({ className, children }: PropertiesTableProps) {
     <div
       className={cn(
         className,
-        'properties-table grid min-w-min flex-grow divide-y rounded border border-default children:p-3 children:border-secondary'
+        'properties-table grid min-w-min basis-6/12 divide-y rounded border border-default children:p-3 children:border-secondary'
       )}
     >
       {children}
diff --git a/libs/ui/lib/side-modal/SideModal.tsx b/libs/ui/lib/side-modal/SideModal.tsx
index 9b223082e..ba1837eb4 100644
--- a/libs/ui/lib/side-modal/SideModal.tsx
+++ b/libs/ui/lib/side-modal/SideModal.tsx
@@ -5,8 +5,7 @@ import React, { createContext, useContext } from 'react'
 import { classed } from '@oxide/util'
 import type { ChildrenProp } from '@oxide/util'
 
-import { Button } from '../button/Button'
-import { Close12Icon, OpenLink12Icon } from '../icons'
+import { OpenLink12Icon } from '../icons'
 import './side-modal.css'
 
 const SideModalContext = createContext(false)
@@ -15,11 +14,12 @@ export const useIsInSideModal = () => {
   return useContext(SideModalContext)
 }
 
-export interface SideModalProps extends DialogProps, ChildrenProp {
+export interface SideModalProps extends Omit<DialogProps, 'isOpen'>, ChildrenProp {
   id: string
   title?: string
   // it's optional on DialogProps but we want to require it
-  onDismiss: DialogProps['onDismiss']
+  onDismiss: () => void
+  isOpen: boolean
 }
 
 export function SideModal({
@@ -40,15 +40,6 @@ export function SideModal({
         className="ox-side-modal absolute right-0 top-0 bottom-0 m-0 flex w-[32rem] flex-col justify-between border-l p-0 bg-default border-secondary"
         aria-labelledby={titleId}
       >
-        <Button
-          variant="link"
-          onClick={onDismiss}
-          // 1.875rem is roughly the space between the close icon and its border
-          className="absolute right-[calc(var(--content-gutter)-1.1875rem)] top-[1.8125rem] z-10 h-11 w-11 px-0"
-          aria-label="Close form"
-        >
-          <Close12Icon className="text-tertiary" />
-        </Button>
         {title && <SideModal.Title id={`${id}-title`}>title</SideModal.Title>}
         {children}
       </Dialog>
@@ -88,8 +79,4 @@ SideModal.Docs = ({ children }: ChildrenProp) => (
   </SideModal.Section>
 )
 
-SideModal.Footer = ({ children }: ChildrenProp) => (
-  <footer className="flex flex-row-reverse items-center justify-between border-t py-5 border-secondary">
-    {children}
-  </footer>
-)
+SideModal.Footer = classed.footer`flex py-5 border-t border-secondary`
diff --git a/libs/ui/lib/text-field/TextField.stories.tsx b/libs/ui/lib/text-field/TextField.stories.tsx
index 53147ffd4..a281f2c92 100644
--- a/libs/ui/lib/text-field/TextField.stories.tsx
+++ b/libs/ui/lib/text-field/TextField.stories.tsx
@@ -22,3 +22,11 @@ export const WithValue: Story = {
     value: 'Something here',
   },
 }
+
+export const AsTextArea: Story = {
+  args: {
+    value: 'Something here',
+    as: 'textarea',
+    rows: 10,
+  },
+}
diff --git a/libs/ui/lib/text-field/TextField.tsx b/libs/ui/lib/text-field/TextField.tsx
index ed231d167..c25ebbb20 100644
--- a/libs/ui/lib/text-field/TextField.tsx
+++ b/libs/ui/lib/text-field/TextField.tsx
@@ -3,12 +3,30 @@ import cn from 'classnames'
 import type { FieldValidator } from 'formik'
 import { ErrorMessage, Field } from 'formik'
 
+/**
+ * This is a little complicated. We only want to allow the `rows` prop if
+ * `as="textarea"`. But the derivatives of `TextField`, like `NameField`, etc.,
+ * can't use `as` no matter what. So we have them only use `TextFieldBaseProps`,
+ * which doesn't know about `as`. But `TextField` itself secretly takes
+ * `TextFieldBaseProps & TextAreaProps`.
+ */
+export type TextAreaProps =
+  | {
+      as: 'textarea'
+      /** Only used with `as="textarea"` */
+      rows?: number
+    }
+  | {
+      as?: never
+      rows?: never
+    }
+
 // would prefer to refer directly to the props of Field and pass them all
 // through, but couldn't get it to work. FieldAttributes<string> is closest but
 // it makes a bunch of props required that should be optional. Instead we simply
 // take the props of an input field (which are part of the Field props) and
 // manually tack on validate.
-export type TextFieldProps = React.ComponentProps<'input'> & {
+export type TextFieldBaseProps = React.ComponentProps<'input'> & {
   validate?: FieldValidator
   // error is used to style the wrapper, also to put aria-invalid on the input
   error?: boolean
@@ -22,13 +40,12 @@ export const TextField = ({
   className,
   fieldClassName,
   ...fieldProps
-}: TextFieldProps) => (
+}: TextFieldBaseProps & TextAreaProps) => (
   <div
     className={cn(
       'flex rounded border border-default',
-      'focus-within:border-accent hover:focus-within:border-accent',
+      'focus-within:ring-2 focus-within:ring-accent-secondary',
       error && '!border-destructive',
-      !fieldProps.disabled && 'hover:border-raise',
       className
     )}
   >
@@ -36,7 +53,7 @@ export const TextField = ({
       type="text"
       className={cn(
         `w-full border-none bg-transparent
-        py-[0.5625rem] px-3
+        py-[0.6875rem] px-3
         text-sans-md text-default focus:outline-none
         disabled:cursor-not-allowed disabled:text-tertiary disabled:bg-disabled`,
         fieldClassName
@@ -54,7 +71,7 @@ export const TextField = ({
 export const NumberTextField = ({
   fieldClassName,
   ...props
-}: Omit<TextFieldProps, 'type'>) => (
+}: Omit<TextFieldBaseProps, 'type'>) => (
   <TextField
     type="number"
     {...props}
diff --git a/libs/ui/lib/toast/Toast.tsx b/libs/ui/lib/toast/Toast.tsx
index 760f5b4b7..54ba090b9 100644
--- a/libs/ui/lib/toast/Toast.tsx
+++ b/libs/ui/lib/toast/Toast.tsx
@@ -2,9 +2,7 @@ import Alert from '@reach/alert'
 import cn from 'classnames'
 import type { ReactElement } from 'react'
 
-import { Button } from '../button/Button'
 import { Close12Icon } from '../icons'
-import { TimeoutIndicator } from '../timeout-indicator/TimeoutIndicator'
 
 type Variant = 'success' | 'error' | 'info'
 
@@ -18,9 +16,15 @@ export interface ToastProps {
 }
 
 const color: Record<Variant, string> = {
-  success: 'bg-accent-secondary text-accent',
-  error: 'bg-error-secondary text-error',
-  info: 'bg-accent-secondary text-accent',
+  success: 'bg-accent-secondary',
+  error: 'bg-error-secondary',
+  info: 'bg-notice-secondary',
+}
+
+const textColor: Record<Variant, string> = {
+  success: 'text-accent children:text-accent',
+  error: 'text-error children:text-error',
+  info: 'text-notice children:text-notice',
 }
 
 export const Toast = ({
@@ -28,31 +32,22 @@ export const Toast = ({
   content,
   icon,
   onClose,
-  timeout,
   variant = 'success',
 }: ToastProps) => (
-  <Alert className={cn('flex w-96 items-center space-x-2 rounded p-4', color[variant])}>
+  <Alert
+    className={cn('flex w-96 items-start rounded p-4', color[variant], textColor[variant])}
+  >
     {icon}
-    <div className="flex-1 space-y-1 pl-2">
-      <div className="text-sans-xl">{title}</div>
+    <div className="flex-1 pl-2.5">
+      <div className="text-sans-semi-md">{title}</div>
       <div className="text-sans-md">{content}</div>
     </div>
-    <div>
-      <Button
-        aria-label="Dismiss notification"
-        className="flex !border-transparent"
-        variant="ghost"
-        onClick={onClose}
-        color={variant === 'error' ? 'destructive' : 'accent'}
-      >
-        {timeout !== undefined ? (
-          <TimeoutIndicator timeout={timeout} onTimeoutEnd={onClose}>
-            <Close12Icon />
-          </TimeoutIndicator>
-        ) : (
-          <Close12Icon />
-        )}
-      </Button>
-    </div>
+    <button
+      aria-label="Dismiss notification"
+      className={cn('flex !border-transparent p-2 -m-2 h-auto', textColor[variant])}
+      onClick={onClose}
+    >
+      <Close12Icon />
+    </button>
   </Alert>
 )
diff --git a/libs/ui/styles/components/menu-button.css b/libs/ui/styles/components/menu-button.css
index 154a87788..5c5b42374 100644
--- a/libs/ui/styles/components/menu-button.css
+++ b/libs/ui/styles/components/menu-button.css
@@ -1,11 +1,41 @@
 [data-reach-menu-list] {
-  @apply rounded border py-2 bg-default border-default;
+  @apply rounded border p-0 bg-raise border-default;
 
   & [data-reach-menu-item] {
-    @apply px-4 py-2 text-left text-sans-sm;
+    @apply min-w-[14rem] border-b py-2 pl-3 pr-6 text-left text-sans-sm text-secondary border-secondary last-of-type:border-b-0;
+
+    &.destructive {
+      @apply text-destructive;
+    }
+
+    &[aria-disabled] {
+      @apply opacity-100 text-quaternary;
+    }
 
     &[data-selected] {
       @apply bg-secondary;
     }
   }
 }
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/*
+  CSS animation for dropdown (only works on first open)
+  Could narrow down with a class if we have other non-dropdown MenuLists in the future
+*/
+@media (prefers-reduced-motion: no-preference) {
+  [data-reach-menu-list],
+  [data-reach-menu-items] {
+    animation: slide-down 0.2s ease;
+  }
+}
diff --git a/libs/util/classed.ts b/libs/util/classed.ts
index ef0a5c422..c8427fe1a 100644
--- a/libs/util/classed.ts
+++ b/libs/util/classed.ts
@@ -19,6 +19,7 @@ const make =
 export const classed = {
   button: make('button'),
   div: make('div'),
+  footer: make('footer'),
   h1: make('h1'),
   h2: make('h2'),
   h3: make('h3'),
diff --git a/package.json b/package.json
index e9fb806d5..f55cc4aaa 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "e2e": "playwright test",
     "e2ec": "playwright test --project=chromium",
     "lint": "eslint --ext .js,.ts,.tsx,.json .",
-    "fmt": "prettier --write .",
+    "fmt": "prettier --cache --write .",
     "gen": "plop",
     "gen-api": "./tools/generate_api_client.sh",
     "storybook": "start-storybook --ci -c libs/ui/.storybook -p 4400",
@@ -30,11 +30,10 @@
   "dependencies": {
     "@popperjs/core": "^2.9.2",
     "@reach/alert": "^0.16.0",
-    "@reach/combobox": "^0.17.0",
     "@reach/dialog": "^0.16.2",
     "@reach/menu-button": "^0.16.2",
     "@reach/tabs": "^0.16.4",
-    "@tanstack/react-table": "^8.0.0-beta.4",
+    "@tanstack/react-table": "8.0.0-beta.4",
     "classnames": "^2.3.1",
     "date-fns": "^2.21.2",
     "downshift": "^6.1.2",
@@ -49,7 +48,7 @@
     "react-is": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-query": "^4.0.0-alpha.20",
-    "react-router-dom": "^6.4.0-pre.2",
+    "react-router-dom": "^6.4.0-pre.8",
     "react-transition-group": "^4.4.1",
     "recharts": "^2.1.6",
     "tiny-invariant": "^1.2.0",
@@ -57,6 +56,8 @@
     "tslib": "^2.0.0",
     "tunnel-rat": "^0.0.3",
     "uuid": "^8.3.2",
+    "xterm": "^4.18.0",
+    "xterm-addon-fit": "^0.5.0",
     "yup": "^0.32.11",
     "zustand": "^3.7.1"
   },
@@ -86,7 +87,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^7.0.1",
-    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
+    "@trivago/prettier-plugin-sort-imports": "3.2.0",
     "@types/babel__core": "^7.1.19",
     "@types/jscodeshift": "^0.11.2",
     "@types/mousetrap": "^1.6.8",
@@ -94,7 +95,6 @@
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
     "@types/react-is": "^17.0.1",
-    "@types/react-table": "^7.7.8",
     "@types/react-transition-group": "^4.4.1",
     "@types/testing-library__jest-dom": "^5.14.0",
     "@types/uuid": "^8.3.0",
@@ -124,18 +124,17 @@
     "postcss-import": "^14.0.2",
     "postcss-nesting": "^10.1.4",
     "postcss-pseudo-classes": "^0.2.1",
-    "prettier": "2.5.0",
-    "prettier-plugin-tailwindcss": "^0.1.8",
+    "prettier": "2.7.0",
     "style-dictionary": "^3.1.1",
     "tailwindcss": "^3.0.24",
     "token-transformer": "^0.0.18",
     "ts-unused-exports": "^7.0.3",
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "type-fest": "^2.10.0",
-    "typescript": "4.7.3",
+    "typescript": "4.7.4",
     "url-loader": "^4.1.1",
-    "vite": "^2.9.9",
-    "vitest": "^0.12.6",
+    "vite": "^2.9.12",
+    "vitest": "^0.15.2",
     "webpack": "^5.40.0",
     "whatwg-fetch": "^3.6.2"
   },
diff --git a/playwright.config.ts b/playwright.config.ts
index 294d06d81..9da957ae4 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -16,7 +16,7 @@ const config: PlaywrightTestConfig = {
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 10000,
-    baseURL: 'http://localhost:4001',
+    baseURL: 'http://localhost:4009',
     trace: 'on-first-retry',
   },
 
@@ -37,8 +37,8 @@ const config: PlaywrightTestConfig = {
 
   // use different port so it doesn't conflict with local dev server
   webServer: {
-    command: 'yarn start:msw --port 4001',
-    port: 4001,
+    command: 'yarn start:msw --port 4009',
+    port: 4009,
   },
 }
 
diff --git a/tools/bump-omicron.sh b/tools/bump-omicron.sh
new file mode 100755
index 000000000..0069b28fe
--- /dev/null
+++ b/tools/bump-omicron.sh
@@ -0,0 +1,43 @@
+#!/bin/bash
+
+# Automatically update tools/console_version in ../omicron with current console
+# commit hash and tarball hash. Then create PR in Omicron with that change.
+#
+# Requirements/assumptions:
+#
+# - GitHub CLI
+# - Omicron is a sibling dir to console
+
+set -o errexit
+set -o pipefail
+
+if ! command -v gh &> /dev/null; then
+  echo "Error: GitHub CLI not found. This script needs it to create a PR. Please install it and try again."
+  exit
+fi
+
+if [ ! -d "../omicron" ]; then
+  echo "Error: This script assumes omicron shares a parent directory with console."
+  exit
+fi
+
+# note that this will fail unless the current console commit has a release on
+# dl.oxide.computer, i.e., it is a commit on main that has been pushed to GH.
+CONSOLE_VERSION=$(git rev-parse HEAD)
+# short hash used in branch name to avoid collisions
+CONSOLE_VERSION_SHORT=$(git rev-parse --short HEAD)
+SHA2=$(curl --fail-with-body "https://dl.oxide.computer/releases/console/$CONSOLE_VERSION.sha256.txt")
+
+cd ../omicron
+git checkout main
+git pull
+git checkout -b "bump-console-$CONSOLE_VERSION_SHORT"
+
+cat <<EOF > tools/console_version
+COMMIT="$CONSOLE_VERSION"
+SHA2="$SHA2"
+EOF
+
+git add --all
+git commit -m "Bump console to latest main"
+gh pr create --fill --web
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index c9fa15f53..99aec4f32 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -23,6 +23,7 @@ export default defineConfig(({ mode }) => ({
   define: {
     'process.env.API_URL': JSON.stringify(process.env.API_URL ?? '/api'),
     'process.env.MSW': JSON.stringify(mode !== 'production' && process.env.MSW),
+    'process.env.SHA': JSON.stringify(process.env.SHA),
   },
   plugins: [
     splitVendorChunkPlugin(),
@@ -51,6 +52,11 @@ export default defineConfig(({ mode }) => ({
     proxy: {
       '/api': {
         target: 'http://localhost:12220',
+        configure(proxy) {
+          proxy.on('error', (_, req) => {
+            console.error('    to', '/api' + req.url)
+          })
+        },
         rewrite: (path) => path.replace(/^\/api/, ''),
       },
       // We want to actually hit Nexus for this because it gives us a login redirect
diff --git a/yarn.lock b/yarn.lock
index e5c6763fa..ed9b83765 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2093,28 +2093,6 @@
     "@reach/utils" "0.16.0"
     tslib "^2.3.0"
 
-"@reach/auto-id@0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.17.0.tgz#60cce65eb7a0d6de605820727f00dfe2b03b5f17"
-  integrity sha512-ud8iPwF52RVzEmkHq1twuqGuPA+moreumUHdtgvU3sr3/15BNhwp3KyDLrKKSz0LP1r3V4pSdyF9MbYM8BoSjA==
-  dependencies:
-    "@reach/utils" "0.17.0"
-    tslib "^2.3.0"
-
-"@reach/combobox@^0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@reach/combobox/-/combobox-0.17.0.tgz#fb9d71d2d5aff3b339dce0ec5e3b73628a51b009"
-  integrity sha512-2mYvU5agOBCQBMdlM4cri+P1BbNwp05P1OuDyc33xJSNiBG7BMy4+ZSHJ0X4fyle6rHwSgCAOCLOeWV1XUYjoQ==
-  dependencies:
-    "@reach/auto-id" "0.17.0"
-    "@reach/descendants" "0.17.0"
-    "@reach/popover" "0.17.0"
-    "@reach/portal" "0.17.0"
-    "@reach/utils" "0.17.0"
-    prop-types "^15.7.2"
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
-
 "@reach/descendants@0.16.1":
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f"
@@ -2123,14 +2101,6 @@
     "@reach/utils" "0.16.0"
     tslib "^2.3.0"
 
-"@reach/descendants@0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.17.0.tgz#3fb087125a67870acd4dee1528449ed546829b67"
-  integrity sha512-c7lUaBfjgcmKFZiAWqhG+VnXDMEhPkI4kAav/82XKZD6NVvFjsQOTH+v3tUkskrAPV44Yuch0mFW/u5Ntifr7Q==
-  dependencies:
-    "@reach/utils" "0.17.0"
-    tslib "^2.3.0"
-
 "@reach/dialog@^0.16.2":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@reach/dialog/-/dialog-0.16.2.tgz#567e6f59d0a6dabe84b2ba4c456404efa6cb7d03"
@@ -2182,17 +2152,6 @@
     tabbable "^4.0.0"
     tslib "^2.3.0"
 
-"@reach/popover@0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.17.0.tgz#feda6961f37d17b8738d2d52af6bfc5c4584464f"
-  integrity sha512-yYbBF4fMz4Ml4LB3agobZjcZ/oPtPsNv70ZAd7lEC2h7cvhF453pA+zOBGYTPGupKaeBvgAnrMjj7RnxDU5hoQ==
-  dependencies:
-    "@reach/portal" "0.17.0"
-    "@reach/rect" "0.17.0"
-    "@reach/utils" "0.17.0"
-    tabbable "^4.0.0"
-    tslib "^2.3.0"
-
 "@reach/portal@0.16.2":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.2.tgz#ca83696215ee03acc2bb25a5ae5d8793eaaf2f64"
@@ -2202,15 +2161,6 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/portal@0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.17.0.tgz#1dd69ffc8ffc8ba3e26dd127bf1cc4b15f0c6bdc"
-  integrity sha512-+IxsgVycOj+WOeNPL2NdgooUdHPSY285wCtj/iWID6akyr4FgGUK7sMhRM9aGFyrGpx2vzr+eggbUmAVZwOz+A==
-  dependencies:
-    "@reach/utils" "0.17.0"
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
-
 "@reach/rect@0.16.0":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16"
@@ -2222,17 +2172,6 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/rect@0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.17.0.tgz#804f0cfb211e0beb81632c64d4532ec9d1d73c48"
-  integrity sha512-3YB7KA5cLjbLc20bmPkJ06DIfXSK06Cb5BbD2dHgKXjUkT9WjZaLYIbYCO8dVjwcyO3GCNfOmPxy62VsPmZwYA==
-  dependencies:
-    "@reach/observe-rect" "1.2.0"
-    "@reach/utils" "0.17.0"
-    prop-types "^15.7.2"
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
-
 "@reach/tabs@^0.16.4":
   version "0.16.4"
   resolved "https://registry.yarnpkg.com/@reach/tabs/-/tabs-0.16.4.tgz#7da85e46f64052bdd1c0f9582f900e379b098ac5"
@@ -2252,14 +2191,6 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/utils@0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303"
-  integrity sha512-M5y8fCBbrWeIsxedgcSw6oDlAMQDkl5uv3VnMVJ7guwpf4E48Xlh1v66z/1BgN/WYe2y8mB/ilFD2nysEfdGeA==
-  dependencies:
-    tiny-warning "^1.0.3"
-    tslib "^2.3.0"
-
 "@reach/visually-hidden@0.16.0":
   version "0.16.0"
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.16.0.tgz#2a5e834af9e93c554065ff8cbb0907fbeb26ad02"
@@ -2268,10 +2199,10 @@
     prop-types "^15.7.2"
     tslib "^2.3.0"
 
-"@remix-run/router@^0.1.0":
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-0.1.0.tgz#9dee1610f5ba730e4c67e5de517912f71c627031"
-  integrity sha512-mK2wZWAFsijTGIk7ZhKvEAzU7qIS6F6RhPy5AiEosaEs3mB3J2NvUWRoN3W74V+5Jju/AisT5NaM2pIbnfGXWg==
+"@remix-run/router@0.2.0-pre.3":
+  version "0.2.0-pre.3"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-0.2.0-pre.3.tgz#2864cf275433ec39d2370a1aec28a5957060f47a"
+  integrity sha512-/1vRiMh8j31PBgLgB2lqcwDDEBEwsnucOouZ8GvJTRNHULkPOU3kvQ1ZUpt9IPd1lS5AVC93I9pVLnFhlNA4Mw==
 
 "@rollup/pluginutils@^4.1.2":
   version "4.1.2"
@@ -3328,7 +3259,7 @@
     "@svgr/hast-util-to-babel-ast" "^6.2.1"
     svg-parser "^2.0.2"
 
-"@tanstack/react-table@^8.0.0-beta.4":
+"@tanstack/react-table@8.0.0-beta.4":
   version "8.0.0-beta.4"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.0.0-beta.4.tgz#3c2be1cb247ebbdde46484bd769994937ce28f83"
   integrity sha512-0GM6V+eupU8/0ja+rQ0F9d7UCq4kA9D0UBSdZMjv1MJryTu2apDc8bOTyOkwmQiqNl2JMj3pBg7A9izXM6ozzA==
@@ -3408,7 +3339,7 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@trivago/prettier-plugin-sort-imports@^3.2.0":
+"@trivago/prettier-plugin-sort-imports@3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-3.2.0.tgz#7a32b6b3085c436eda0143b2710c440a4a56db90"
   integrity sha512-DnwLe+z8t/dZX5xBbYZV1+C5STkyK/P6SSq3Nk6NXlJZsgvDZX2eN4ND7bMFgGV/NL/YChWzcNf6ziGba1ktQQ==
@@ -3784,13 +3715,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-table@^7.7.8":
-  version "7.7.8"
-  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.8.tgz#b1aa5fb7a54432969262d2306b87fdbb9a5ee647"
-  integrity sha512-OMhbPlf+uUGte3M1WdArEKeBkyQ1XJxKvFYs+o1dGGGyaSVIqxPPQmBZ6Skkw0V9y0F/kOY7rnTD8r9GbfpBOg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-test-renderer@>=16.9.0":
   version "17.0.1"
   resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz"
@@ -6432,6 +6356,13 @@ debug@^4.3.3:
   dependencies:
     ms "2.1.2"
 
+debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 decimal.js-light@^2.4.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
@@ -11613,15 +11544,10 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier-plugin-tailwindcss@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.8.tgz#ba0f606ed91959ede670303d905b99106e9e6293"
-  integrity sha512-hwarSBCswAXa+kqYtaAkFr3Vop9o04WOyZs0qo3NyvW8L7f1rif61wRyq0+ArmVThOuRBcJF5hjGXYk86cwemg==
-
-prettier@2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893"
-  integrity sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg==
+prettier@2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.0.tgz#a4fdae07e5596c51c9857ea676cd41a0163879d6"
+  integrity sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==
 
 "prettier@>=2.2.1 <=2.3.0":
   version "2.3.0"
@@ -12089,12 +12015,12 @@ react-router-dom@^6.0.0:
     history "^5.2.0"
     react-router "6.2.1"
 
-react-router-dom@^6.4.0-pre.2:
-  version "6.4.0-pre.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.0-pre.2.tgz#6c34e3a96db3712a79dd78416b01dbb40f18aae7"
-  integrity sha512-Y6tOV4zs7uS+7pTbMoOcMWP9H5hVKINIyLIO1oWVVQEKv2KDEQx0njyPnhso4LkbOK6l7JhUMNO5DLwMqZVWFQ==
+react-router-dom@^6.4.0-pre.8:
+  version "6.4.0-pre.8"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.0-pre.8.tgz#1f784fa09719801250070431703dd02c5fdcde6e"
+  integrity sha512-5hxQdiPOG98YOANbJ8IBUKbRgU6k4/TSX4VyO6jRWoG6KY0K2EG5wjEZgZ0tlAN9fXFgnHsro/HKi/r+HxugAg==
   dependencies:
-    react-router "6.4.0-pre.2"
+    react-router "6.4.0-pre.8"
 
 react-router@6.2.1, react-router@^6.0.0:
   version "6.2.1"
@@ -12103,13 +12029,12 @@ react-router@6.2.1, react-router@^6.0.0:
   dependencies:
     history "^5.2.0"
 
-react-router@6.4.0-pre.2:
-  version "6.4.0-pre.2"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.0-pre.2.tgz#f80856faae0a1163ca58aad6ddf82e00a03264a3"
-  integrity sha512-JFwatrS+QFmyoOrjUNpHFeAO72Y1FUZ9wOfQoCm1a6cRglAbLXAdKll/WEGUtGUb3LwLx3uAZ57kPXHQX5vutw==
+react-router@6.4.0-pre.8:
+  version "6.4.0-pre.8"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.0-pre.8.tgz#90ce4cc590b453fc26ad2d131f51d908783c9091"
+  integrity sha512-xwt2s9jW5NaakymlSRG0hZoGda6E/Skfgmj/4vlwvRX/kqoO8jU0g+Vi3sHDCatH/V+GjDyTQkdMEDm8qGsBsQ==
   dependencies:
-    "@remix-run/router" "^0.1.0"
-    use-sync-external-store "1.1.0"
+    "@remix-run/router" "0.2.0-pre.3"
 
 react-sizeme@^3.0.1:
   version "3.0.2"
@@ -13754,10 +13679,10 @@ tinypool@^0.1.3:
   resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-0.1.3.tgz#b5570b364a1775fd403de5e7660b325308fee26b"
   integrity sha512-2IfcQh7CP46XGWGGbdyO4pjcKqsmVqFAPcXfPxcPXmOWt9cYkTP9HcDmGgsfijYoAEc4z9qcpM/BaBz46Y9/CQ==
 
-tinyspy@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-0.3.2.tgz#2f95cb14c38089ca690385f339781cd35faae566"
-  integrity sha512-2+40EP4D3sFYy42UkgkFFB+kiX2Tg3URG/lVvAZFfLxgGpnWl5qQJuBw1gaLttq8UOS+2p3C0WrhJnQigLTT2Q==
+tinyspy@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-0.3.3.tgz#8b57f8aec7fe1bf583a3a49cb9ab30c742f69237"
+  integrity sha512-gRiUR8fuhUf0W9lzojPf1N1euJYA30ISebSfgca8z76FOvXtVXqd5ojEIaKLWbDQhAaC3ibxZIjqbyi4ybjcTw==
 
 title-case@^2.1.0:
   version "2.1.1"
@@ -14029,10 +13954,10 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@4.7.3:
-  version "4.7.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
-  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
+typescript@4.7.4:
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235"
+  integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
 uglify-js@^3.1.4:
   version "3.14.1"
@@ -14307,11 +14232,6 @@ use-sidecar@^1.0.1, use-sidecar@^1.0.5:
     detect-node-es "^1.1.0"
     tslib "^1.9.3"
 
-use-sync-external-store@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
-  integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
@@ -14431,10 +14351,10 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vite@^2.9.8, vite@^2.9.9:
-  version "2.9.9"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.9.tgz#8b558987db5e60fedec2f4b003b73164cb081c5e"
-  integrity sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==
+vite@^2.9.12:
+  version "2.9.12"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.12.tgz#b1d636b0a8ac636afe9d83e3792d4895509a941b"
+  integrity sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==
   dependencies:
     esbuild "^0.14.27"
     postcss "^8.4.13"
@@ -14443,18 +14363,20 @@ vite@^2.9.8, vite@^2.9.9:
   optionalDependencies:
     fsevents "~2.3.2"
 
-vitest@^0.12.6:
-  version "0.12.6"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.12.6.tgz#9de2cca78e97effe5395230486ebd3830d0721dd"
-  integrity sha512-YWbCTv0XKBuBw5YtuW/iufuguoi8QhGpYyi2g57Oo7akpscMkkWTAaZGgY0ux1oJJtO/pc/8GFt0EF32WFBUUQ==
+vitest@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-0.15.2.tgz#3931c390685ff03331298c7719d27d691f79e782"
+  integrity sha512-cMabuUqu+nNHafkdN7H8Z20+UZTrrUfqjGwAoLwUwrqFGWBz3gXwxndjbLf6mgSFs9lF/JWjKeNM1CXKwtk26w==
   dependencies:
     "@types/chai" "^4.3.1"
     "@types/chai-subset" "^1.3.3"
+    "@types/node" "*"
     chai "^4.3.6"
+    debug "^4.3.4"
     local-pkg "^0.4.1"
     tinypool "^0.1.3"
-    tinyspy "^0.3.2"
-    vite "^2.9.8"
+    tinyspy "^0.3.3"
+    vite "^2.9.12"
 
 vm-browserify@^1.0.1:
   version "1.1.2"
@@ -14827,6 +14749,16 @@ xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
   resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+xterm-addon-fit@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
+  integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
+
+xterm@^4.18.0:
+  version "4.18.0"
+  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.18.0.tgz#a1f6ab2c330c3918fb094ae5f4c2562987398ea1"
+  integrity sha512-JQoc1S0dti6SQfI0bK1AZvGnAxH4MVw45ZPFSO6FHTInAiau3Ix77fSxNx3mX4eh9OL4AYa8+4C8f5UvnSfppQ==
+
 y18n@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz"