diff --git a/app/components/EquivalentCliCommand.tsx b/app/components/EquivalentCliCommand.tsx
index 9aa882f6a..9fb01aa87 100644
--- a/app/components/EquivalentCliCommand.tsx
+++ b/app/components/EquivalentCliCommand.tsx
@@ -31,7 +31,12 @@ export function EquivalentCliCommand({ command }: { command: string }) {
 
   return (
     <>
-      <Button variant="ghost" size="sm" className="ml-2" onClick={() => setIsOpen(true)}>
+      <Button
+        variant="ghost"
+        size="sm"
+        className="md-:hidden"
+        onClick={() => setIsOpen(true)}
+      >
         Equivalent CLI Command
       </Button>
       <Modal isOpen={isOpen} onDismiss={handleDismiss} title="CLI command">
diff --git a/app/components/ErrorPage.tsx b/app/components/ErrorPage.tsx
index 8292e38af..e68653264 100644
--- a/app/components/ErrorPage.tsx
+++ b/app/components/ErrorPage.tsx
@@ -41,7 +41,7 @@ export function ErrorPage({ children }: Props) {
         </Link>
         <SignOutButton className="mr-6 mt-4" />
       </div>
-      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 !bg-raise border-secondary elevation-3">
+      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 !bg-raise border-secondary elevation-3 md-:w-[calc(100%-(var(--content-gutter)*2))]">
         <div className="my-2 flex h-12 w-12 items-center justify-center">
           <div className="absolute h-12 w-12 rounded-full opacity-20 bg-destructive motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
           <Error12Icon className="relative h-8 w-8 text-error" />
diff --git a/app/components/MswBanner.tsx b/app/components/MswBanner.tsx
index a22f9bd7a..0e684892d 100644
--- a/app/components/MswBanner.tsx
+++ b/app/components/MswBanner.tsx
@@ -5,7 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useState, type ReactNode } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
 
 import { Info16Icon, NextArrow12Icon } from '@oxide/design-system/icons/react'
 
@@ -29,10 +29,18 @@ function ExternalLink({ href, children }: { href: string; children: ReactNode })
 export function MswBanner() {
   const [isOpen, setIsOpen] = useState(false)
   const closeModal = () => setIsOpen(false)
+
+  useEffect(() => {
+    document.body.classList.add('msw-banner')
+
+    return () => {
+      document.body.classList.remove('msw-banner')
+    }
+  }, [])
+
   return (
     <>
-      {/* The [&+*]:pt-10 style is to ensure the page container isn't pushed out of screen as it uses 100vh for layout */}
-      <label className="absolute z-topBar flex h-10 w-full items-center justify-center text-sans-md text-info-secondary bg-info-secondary [&+*]:pt-10">
+      <label className="fixed bottom-0 z-topBar flex h-10 w-full items-center justify-center text-sans-md text-info-secondary bg-info-secondary [&+*]:pt-[calc(--navigation-height)]">
         <Info16Icon className="mr-2" /> This is a technical preview.
         <button
           type="button"
diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx
index 5f68213bf..6d516d7bc 100644
--- a/app/components/RefetchIntervalPicker.tsx
+++ b/app/components/RefetchIntervalPicker.tsx
@@ -54,7 +54,7 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
     intervalMs: (enabled && intervalPresets[intervalPreset]) || undefined,
     intervalPicker: (
       <div className="mb-12 flex items-center justify-between">
-        <div className="hidden items-center gap-2 text-right text-mono-sm text-quaternary lg+:flex">
+        <div className="flex items-center gap-2 text-right text-mono-sm text-quaternary">
           <Time16Icon className="text-quinary" /> Refreshed{' '}
           {toLocaleTimeString(lastFetched)}
         </div>
@@ -75,7 +75,7 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
           </button>
           <Listbox
             selected={enabled ? intervalPreset : 'Off'}
-            className="w-24 [&>button]:!rounded-l-none"
+            className="w-24 md-:w-full [&>button]:!rounded-l-none"
             items={intervalItems}
             onChange={setIntervalPreset}
             disabled={!enabled}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 0cc380ca4..fdf0646ac 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -5,14 +5,27 @@
  *
  * Copyright Oxide Computer Company
  */
+import * as Dialog from '@radix-ui/react-dialog'
+import { animated, useTransition } from '@react-spring/web'
 import cn from 'classnames'
 import { NavLink, useLocation } from 'react-router-dom'
 
-import { Action16Icon, Document16Icon } from '@oxide/design-system/icons/react'
+import {
+  Action16Icon,
+  Document16Icon,
+  Key16Icon,
+  Profile16Icon,
+  SignOut16Icon,
+} from '@oxide/design-system/icons/react'
 
+import { navToLogin, useApiMutation } from '~/api'
+import { closeSidebar, useMenuState } from '~/hooks/use-menu-state'
 import { openQuickActions } from '~/hooks/use-quick-actions'
+import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
 import { Button } from '~/ui/lib/Button'
+import { Divider } from '~/ui/lib/Divider'
 import { Truncate } from '~/ui/lib/Truncate'
+import { pb } from '~/util/path-builder'
 
 const linkStyles =
   'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quinary text-secondary'
@@ -55,12 +68,104 @@ const JumpToButton = () => {
 }
 
 export function Sidebar({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex flex-col border-r text-sans-md text-default border-secondary">
+  const AnimatedDialogContent = animated(Dialog.Content)
+  const { isOpen, isSmallScreen } = useMenuState()
+  const config = { tension: 1200, mass: 0.125 }
+  const { pathname } = useLocation()
+
+  const transitions = useTransition(isOpen, {
+    from: { x: -50 },
+    enter: { x: 0 },
+    config: isOpen ? config : { duration: 0 },
+  })
+
+  const SidebarContent = () => (
+    <>
       <div className="mx-3 mt-4">
         <JumpToButton />
       </div>
       {children}
+      {pathname.split('/')[1] !== 'settings' && <ProfileLinks className="lg+:hidden" />}
+    </>
+  )
+
+  if (isSmallScreen) {
+    return (
+      <>
+        {transitions(
+          ({ x }, item) =>
+            item && (
+              <Dialog.Root
+                open
+                onOpenChange={(open) => {
+                  if (!open) closeSidebar()
+                }}
+                // Modal needs to be false to be able to click on top bar
+                modal={false}
+              >
+                <div
+                  aria-hidden
+                  className="fixed inset-0 top-[61px] z-10 overflow-auto bg-scrim lg+:hidden"
+                />
+                <AnimatedDialogContent
+                  className="fixed z-sideModal flex h-full w-[14.25rem] flex-col border-r text-sans-md text-default border-secondary lg+:!transform-none lg-:inset-y-0 lg-:top-[61px] lg-:bg-default lg-:elevation-2"
+                  style={{
+                    transform: x.to((value) => `translate3d(${value}%, 0px, 0px)`),
+                  }}
+                  forceMount
+                  onInteractOutside={(e) => {
+                    // We want to handle opening / closing with the menu button ourselves
+                    // Not doing this can result in the two events fighting
+                    if ((e.target as HTMLElement)?.title === 'Sidebar') {
+                      e.preventDefault()
+                      e.stopPropagation()
+                      return null
+                    }
+                  }}
+                >
+                  <SidebarContent />
+                </AnimatedDialogContent>
+              </Dialog.Root>
+            )
+        )}
+      </>
+    )
+  } else {
+    return (
+      <div className="fixed z-sideModal flex h-full w-[14.25rem] flex-col border-r text-sans-md text-default border-secondary lg+:!transform-none lg-:inset-y-0 lg-:top-[61px] lg-:bg-default lg-:elevation-2">
+        <SidebarContent />
+      </div>
+    )
+  }
+}
+
+export const ProfileLinks = ({ className }: { className?: string }) => {
+  const { me } = useCurrentUser()
+
+  const logout = useApiMutation('logout', {
+    onSuccess: () => {
+      // server will respond to /login with a login redirect
+      // TODO-usability: do we just want to dump them back to login or is there
+      // another page that would make sense, like a logged out homepage
+      navToLogin({ includeCurrent: false })
+    },
+  })
+
+  return (
+    <div className={cn(className, '')}>
+      <Divider />
+      <Sidebar.Nav heading={me.displayName || 'User'}>
+        <NavLinkItem to={pb.profile()}>
+          <Profile16Icon />
+          Profile
+        </NavLinkItem>
+        <NavLinkItem to={pb.sshKeys()}>
+          <Key16Icon /> SSH Keys
+        </NavLinkItem>
+        <NavButtonItem onClick={() => logout.mutate({})} className="lg+:hidden">
+          <SignOut16Icon /> Sign Out
+        </NavButtonItem>
+      </Sidebar.Nav>
     </div>
   )
 }
@@ -109,3 +214,25 @@ export const NavLinkItem = (props: {
     </li>
   )
 }
+
+export const NavButtonItem = (props: {
+  onClick: () => void
+  children: React.ReactNode
+  disabled?: boolean
+  className?: string
+}) => (
+  <li>
+    <button
+      type="button"
+      onClick={props.onClick}
+      className={cn(
+        linkStyles,
+        { 'pointer-events-none text-disabled': props.disabled },
+        'w-full',
+        props.className
+      )}
+    >
+      {props.children}
+    </button>
+  </li>
+)
diff --git a/app/components/Terminal.tsx b/app/components/Terminal.tsx
index 0a1e7b1fe..f5c60e577 100644
--- a/app/components/Terminal.tsx
+++ b/app/components/Terminal.tsx
@@ -104,8 +104,11 @@ export default function Terminal({ ws }: TerminalProps) {
 
   return (
     <>
-      <div className="h-full w-[calc(100%-3rem)] text-mono-code" ref={terminalRef} />
-      <div className="absolute right-0 top-0 space-y-2 text-secondary">
+      <div
+        className="h-full w-full text-mono-code md+:w-[calc(100%-3rem)]"
+        ref={terminalRef}
+      />
+      <div className="absolute right-0 top-0 space-y-2 text-secondary md-:hidden">
         <ScrollButton onClick={() => term?.scrollToTop()} aria-label="Scroll to top">
           <DirectionUpIcon aria-hidden />
         </ScrollButton>
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 4c5e2e236..ecdca9319 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -5,13 +5,21 @@
  *
  * Copyright Oxide Computer Company
  */
+import cn from 'classnames'
 import React from 'react'
 
 import { navToLogin, useApiMutation } from '@oxide/api'
-import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/react'
+import {
+  DirectionDownIcon,
+  Info16Icon,
+  MenuClose12Icon,
+  MenuOpen12Icon,
+  Profile16Icon,
+} from '@oxide/design-system/icons/react'
 
+import { closeSidebar, openSidebar, useMenuState } from '~/hooks/use-menu-state'
 import { useCurrentUser } from '~/layouts/AuthenticatedLayout'
-import { Button } from '~/ui/lib/Button'
+import { Button, buttonStyle } from '~/ui/lib/Button'
 import { DropdownMenu } from '~/ui/lib/DropdownMenu'
 import { pb } from '~/util/path-builder'
 
@@ -26,20 +34,53 @@ export function TopBar({ children }: { children: React.ReactNode }) {
   // picker is going to come in null when the user isn't supposed to see it
   const [cornerPicker, ...otherPickers] = React.Children.toArray(children)
 
-  // The height of this component is governed by the `PageContainer`
-  // It's important that this component returns two distinct elements (wrapped in a fragment).
-  // Each element will occupy one of the top column slots provided by `PageContainer`.
+  const { isOpen } = useMenuState()
+
   return (
-    <>
-      <div className="flex items-center border-b border-r px-3 border-secondary">
+    <div className="fixed top-0 z-topBar col-span-2 grid h-[var(--navigation-height)] w-full grid-cols-[min-content,auto] bg-default lg+:grid-cols-[var(--sidebar-width),auto]">
+      <div className="flex items-center border-b pl-3 border-secondary lg+:border-r lg+:pr-3">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="mr-2 w-8 shrink-0 lg+:hidden [&>*]:pointer-events-none"
+          title="Sidebar"
+          onClick={() => {
+            if (isOpen) {
+              closeSidebar()
+            } else {
+              openSidebar()
+            }
+          }}
+        >
+          {isOpen ? (
+            <MenuClose12Icon className="text-tertiary" />
+          ) : (
+            <MenuOpen12Icon className="text-tertiary" />
+          )}
+        </Button>
+
         {cornerPicker}
       </div>
-      {/* Height is governed by PageContainer grid */}
-      {/* shrink-0 is needed to prevent getting squished by body content */}
-      <div className="z-topBar border-b bg-default border-secondary">
-        <div className="mx-3 flex h-[60px] shrink-0 items-center justify-between">
-          <div className="flex items-center">{otherPickers}</div>
-          <div className="flex items-center gap-2">
+
+      <div className="border-b bg-default border-secondary">
+        <div className="mr-3 flex h-[var(--navigation-height)] shrink-0 items-center justify-between lg+:ml-3">
+          <div className="pickers before:text-mono-lg flex items-center before:children:content-['/'] before:children:first:mx-3 before:children:first:text-quinary md-:children:hidden lg+:[&>div:first-of-type]:before:hidden md-:[&>div:last-of-type]:flex">
+            {otherPickers}
+          </div>
+          <div>
+            <a
+              id="topbar-info-link"
+              href="https://docs.oxide.computer/guides"
+              target="_blank"
+              rel="noreferrer"
+              aria-label="Link to documentation"
+              className={cn(
+                buttonStyle({ size: 'icon', variant: 'secondary' }),
+                'md-:hidden'
+              )}
+            >
+              <Info16Icon className="text-quaternary" />
+            </a>
             {/* <Button variant="secondary" size="icon" className="ml-2" title="Notifications">
               <Notifications16Icon className="text-quaternary" />
             </Button> */}
@@ -49,6 +90,7 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                   size="sm"
                   variant="secondary"
                   aria-label="User menu"
+                  className="ml-2 md-:hidden"
                   innerClassName="space-x-2"
                 >
                   <Profile16Icon className="text-quaternary" />
@@ -68,6 +110,6 @@ export function TopBar({ children }: { children: React.ReactNode }) {
           </div>
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index 884335fc8..292218f39 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -56,7 +56,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
         // left corner picker. The separator starts from the leftmost of "other
         // pickers". But the leftmost corner one is in its own container and
         // therefore always last-of-type, so it will never get one.
-        className="after:text-mono-lg flex w-full items-center justify-between after:mx-4 after:content-['/'] after:text-quinary last-of-type:after:content-none"
+        className="flex w-full items-center justify-between"
       >
         {props.current ? (
           <Wrap
@@ -65,11 +65,17 @@ const TopBarPicker = (props: TopBarPickerProps) => {
               <Link to={props.to!} className="-m-1 grow rounded-lg p-1 hover:bg-hover" />
             }
           >
-            <div className="flex min-w-[120px] max-w-[185px] items-center pr-2">
+            <div
+              className={cn(
+                'flex max-w-[185px] items-center pr-2 lg+:min-w-[120px]',
+                props.icon && 'md-:pr-0'
+              )}
+            >
               {props.icon ? (
-                <div className="mr-2 flex items-center">{props.icon}</div>
+                <div className="flex items-center md+:mr-2">{props.icon}</div>
               ) : null}
-              <div className="overflow-hidden">
+              {/* If it has an icon it must be a silo picker and has specific styling on mobile */}
+              <div className={cn('overflow-hidden', props.icon && 'md-:hidden')}>
                 <div className="text-mono-xs text-quaternary">{props.category}</div>
                 <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-sans-md text-secondary">
                   {props.display ?? props.current}
@@ -84,7 +90,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
           >
             {props.icon ? <div className="mr-2 flex items-center">{props.icon}</div> : null}
 
-            <div className="min-w-[5rem] text-mono-xs text-quaternary">
+            <div className="text-mono-xs text-quaternary lg+:min-w-[5rem] lg-:mr-1">
               Select
               <br />
               {props.category}
diff --git a/app/components/form/fields/DateTimeRangePicker.tsx b/app/components/form/fields/DateTimeRangePicker.tsx
index 291f7c702..164355c9d 100644
--- a/app/components/form/fields/DateTimeRangePicker.tsx
+++ b/app/components/form/fields/DateTimeRangePicker.tsx
@@ -101,9 +101,9 @@ export function DateTimeRangePicker({
   onRangeChange,
 }: DateTimeRangePickerProps) {
   return (
-    <form className="flex">
+    <form className="flex md-:w-full">
       <Listbox
-        className="z-10 w-[10rem] border-r border-r-default [&>button]:!rounded-r-none [&>button]:!border-r-0"
+        className="w-[10rem] border-r border-r-default md-:flex-grow [&>button]:!rounded-r-none [&>button]:!border-r-0"
         name="preset"
         selected={preset}
         aria-label="Choose a time range preset"
diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index f8389ee65..92e0eaf64 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -86,8 +86,13 @@ export function DisksTableField({
           </MiniTable.Table>
         )}
 
-        <div className="space-x-3">
-          <Button size="sm" onClick={() => setShowDiskCreate(true)} disabled={disabled}>
+        <div className="flex gap-3 md-:flex-col">
+          <Button
+            size="sm"
+            onClick={() => setShowDiskCreate(true)}
+            disabled={disabled}
+            className="w-full"
+          >
             Create new disk
           </Button>
           <Button
@@ -95,6 +100,7 @@ export function DisksTableField({
             size="sm"
             onClick={() => setShowDiskAttach(true)}
             disabled={disabled}
+            className="w-full"
           >
             Attach existing disk
           </Button>
diff --git a/app/hooks/use-menu-state.ts b/app/hooks/use-menu-state.ts
new file mode 100644
index 000000000..d71ecb7c1
--- /dev/null
+++ b/app/hooks/use-menu-state.ts
@@ -0,0 +1,50 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+import { create } from 'zustand'
+import { shallow } from 'zustand/shallow'
+
+import { useWindowSize } from './use-window-size'
+
+type StoreState = {
+  isOpen: boolean
+  isSmallScreen: boolean
+}
+
+const useStore = create<StoreState>(() => ({ isOpen: false, isSmallScreen: false }))
+
+export function openSidebar() {
+  useStore.setState({ isOpen: true })
+}
+
+export function closeSidebar() {
+  useStore.setState({ isOpen: false })
+}
+
+export function toggleSidebar() {
+  useStore.setState((state) => ({ isOpen: !state.isOpen }))
+}
+
+export function useMenuState() {
+  const { size } = useWindowSize()
+  const location = useLocation()
+
+  useEffect(() => {
+    closeSidebar()
+  }, [location.pathname])
+
+  return useStore(
+    (store) => ({
+      isOpen: store.isOpen,
+      isSmallScreen: size.width < 1024,
+    }),
+    shallow
+  )
+}
diff --git a/app/hooks/use-window-size.ts b/app/hooks/use-window-size.ts
new file mode 100644
index 000000000..a1c204509
--- /dev/null
+++ b/app/hooks/use-window-size.ts
@@ -0,0 +1,41 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+
+import { useEffect, useState } from 'react'
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState<{
+    width: number
+    height: number
+  }>({
+    width: 0,
+    height: 0,
+  })
+
+  function handleResize() {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    })
+  }
+
+  useEffect(() => {
+    // Only execute all the code below in client side
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize)
+
+      handleResize()
+
+      return () => window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return {
+    size,
+  }
+}
diff --git a/app/layouts/SettingsLayout.tsx b/app/layouts/SettingsLayout.tsx
index 1fea93b50..555082edf 100644
--- a/app/layouts/SettingsLayout.tsx
+++ b/app/layouts/SettingsLayout.tsx
@@ -8,15 +8,14 @@
 import { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
-import { Folder16Icon, Key16Icon, Profile16Icon } from '@oxide/design-system/icons/react'
+import { Folder16Icon } from '@oxide/design-system/icons/react'
 
 import { TopBar } from '~/components/TopBar'
 import { SiloSystemPicker } from '~/components/TopBarPicker'
 import { useQuickActions } from '~/hooks/use-quick-actions'
-import { Divider } from '~/ui/lib/Divider'
 import { pb } from '~/util/path-builder'
 
-import { DocsLinkItem, NavLinkItem, Sidebar } from '../components/Sidebar'
+import { DocsLinkItem, NavLinkItem, ProfileLinks, Sidebar } from '../components/Sidebar'
 import { ContentPane, PageContainer } from './helpers'
 
 export function SettingsLayout() {
@@ -53,15 +52,7 @@ export function SettingsLayout() {
           </NavLinkItem>
           <DocsLinkItem />
         </Sidebar.Nav>
-        <Divider />
-        <Sidebar.Nav heading="User">
-          <NavLinkItem to={pb.profile()}>
-            <Profile16Icon /> Profile
-          </NavLinkItem>
-          <NavLinkItem to={pb.sshKeys()}>
-            <Key16Icon /> SSH Keys
-          </NavLinkItem>
-        </Sidebar.Nav>
+        <ProfileLinks />
       </Sidebar>
       <ContentPane />
     </PageContainer>
diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index fc6173bd2..e3cdff99a 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -14,20 +14,24 @@ import { useScrollRestoration } from '~/hooks/use-scroll-restoration'
 import { SkipLinkTarget } from '~/ui/lib/SkipLink'
 import { classed } from '~/util/classed'
 
-export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem,1fr] grid-rows-[60px,1fr]`
+export const PageContainer = classed.div`h-full pt-[var(--navigation-height)] [overscroll-behavior-y:none]`
 
 export function ContentPane() {
   const ref = useRef<HTMLDivElement>(null)
   useScrollRestoration(ref)
   return (
-    <div ref={ref} className="flex flex-col overflow-auto" data-testid="scroll-container">
-      <div className="flex grow flex-col pb-8">
+    <div
+      ref={ref}
+      className="flex flex-col lg+:ml-[var(--sidebar-width)] lg-:col-span-2"
+      id="content_pane"
+    >
+      <div className="flex grow flex-col pb-8 md-:pb-16">
         <SkipLinkTarget />
         <main className="[&>*]:gutter">
           <Outlet />
         </main>
       </div>
-      <div className="sticky bottom-0 shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="sticky bottom-0 z-popover flex-shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
         <Pagination.Target />
         <PageActionsTarget />
       </div>
@@ -42,7 +46,7 @@ export function ContentPane() {
  * `<div>` because we don't need it.
  */
 export const SerialConsoleContentPane = () => (
-  <div className="flex flex-col overflow-auto">
+  <div className="flex flex-col overflow-auto lg-:col-span-2" id="content_pane">
     <div className="flex grow flex-col">
       <SkipLinkTarget />
       <main className="[&>*]:gutter h-full">
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 8e1a69ca3..7e6f139a4 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -157,7 +157,7 @@ export function InstancePage() {
           <MoreActionsMenu label="Instance actions" actions={actions} />
         </div>
       </PageHeader>
-      <PropertiesTable.Group className="-mt-8 mb-16">
+      <PropertiesTable.Group className="-mt-8 mb-16 md-:mb-10">
         <PropertiesTable>
           <PropertiesTable.Row label="cpu">
             <span className="text-secondary">{instance.ncpus}</span>
diff --git a/app/pages/project/instances/instance/SerialConsolePage.tsx b/app/pages/project/instances/instance/SerialConsolePage.tsx
index a6f3bdacf..bc6ec0f39 100644
--- a/app/pages/project/instances/instance/SerialConsolePage.tsx
+++ b/app/pages/project/instances/instance/SerialConsolePage.tsx
@@ -157,7 +157,7 @@ export function SerialConsolePage() {
         <Suspense fallback={null}>{ws.current && <Terminal ws={ws.current} />}</Suspense>
       </div>
       <div className="shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
-        <div className="gutter flex h-20 items-center justify-between">
+        <div className="gutter flex items-center justify-between md+:h-20 md-:py-4">
           <div>
             <EquivalentCliCommand command={cliCmd.serialConsole({ project, instance })} />
           </div>
diff --git a/app/pages/project/instances/instance/tabs/MetricsTab.tsx b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
index 20fc68b85..a90227bec 100644
--- a/app/pages/project/instances/instance/tabs/MetricsTab.tsx
+++ b/app/pages/project/instances/instance/tabs/MetricsTab.tsx
@@ -123,14 +123,13 @@ function DiskMetric({
   }
 
   return (
-    <div className="flex w-1/2 grow flex-col">
-      <h2 className="ml-3 flex items-center text-mono-xs text-secondary">
+    <div className="flex grow flex-col lg+:w-1/2">
+      <h2 className="mb-3 ml-3 flex items-center text-mono-xs text-secondary">
         {title} <div className="ml-1 normal-case text-quaternary">{label}</div>
         {isLoading && <Spinner className="ml-2" />}
       </h2>
       <Suspense fallback={<div className="mt-3 h-[300px]" />}>
         <TimeSeriesChart
-          className="mt-3"
           data={data}
           title={title}
           unit={unitForSet}
@@ -197,9 +196,9 @@ export function MetricsTab() {
 
   return (
     <>
-      <div className="mb-4 flex justify-between">
+      <div className="mb-4 flex justify-between md-:flex-col md-:gap-2">
         <Listbox
-          className="w-64"
+          className="lg+:w-64 md-:!w-full xl-:w-40"
           aria-label="Choose disk"
           name="disk-name"
           selected={diskName}
@@ -211,20 +210,20 @@ export function MetricsTab() {
         {dateTimeRangePicker}
       </div>
 
-      <div className="mt-8 space-y-12">
+      <div className="mt-8 space-y-12 md-:space-y-4">
         {/* see the following link for the source of truth on what these mean
             https://github.com/oxidecomputer/crucible/blob/258f162b/upstairs/src/stats.rs#L9-L50 */}
-        <div className="flex w-full space-x-4">
+        <div className="flex w-full gap-4 lg-:flex-col">
           <DiskMetric {...commonProps} title="Reads" unit="Count" metric="read" />
           <DiskMetric {...commonProps} title="Read" unit="Bytes" metric="read_bytes" />
         </div>
 
-        <div className="flex w-full space-x-4">
+        <div className="flex w-full gap-4 lg-:flex-col">
           <DiskMetric {...commonProps} title="Writes" unit="Count" metric="write" />
           <DiskMetric {...commonProps} title="Write" unit="Bytes" metric="write_bytes" />
         </div>
 
-        <div className="flex w-full space-x-4">
+        <div className="flex w-full gap-4 lg-:flex-col">
           <DiskMetric {...commonProps} title="Flushes" unit="Count" metric="flush" />
         </div>
       </div>
diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index d079c975a..158e0aba3 100644
--- a/app/pages/project/instances/instance/tabs/StorageTab.tsx
+++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -174,7 +174,7 @@ export function StorageTab() {
     <>
       <Table emptyState={emptyState} columns={columns} />
       <div className="mt-4 flex flex-col gap-3">
-        <div className="flex gap-3">
+        <div className="flex gap-3 md-:flex-col">
           <Button
             size="sm"
             onClick={() => setShowDiskCreate(true)}
@@ -185,6 +185,7 @@ export function StorageTab() {
               </>
             }
             disabled={!instanceCan.attachDisk(instance)}
+            className="md-:w-full"
           >
             Create new disk
           </Button>
@@ -199,6 +200,7 @@ export function StorageTab() {
               </>
             }
             disabled={!instanceCan.attachDisk(instance)}
+            className="md-:w-full"
           >
             Attach existing disk
           </Button>
diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
index 5c5c5d912..1db87e44d 100644
--- a/app/pages/project/vpcs/VpcPage/VpcPage.tsx
+++ b/app/pages/project/vpcs/VpcPage/VpcPage.tsx
@@ -82,7 +82,7 @@ export function VpcPage() {
           <MoreActionsMenu label="VPC actions" actions={actions} />
         </div>
       </PageHeader>
-      <PropertiesTable.Group className="mb-16">
+      <PropertiesTable.Group className="mb-16 md-:mb-10">
         <PropertiesTable>
           <PropertiesTable.Row label="Description">
             <DescriptionCell text={vpc.description} />
diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
index 8a1e4a567..c2fa9cfba 100644
--- a/app/pages/system/UtilizationPage.tsx
+++ b/app/pages/system/UtilizationPage.tsx
@@ -114,10 +114,10 @@ const MetricsTab = () => {
 
   return (
     <>
-      <div className="mb-3 mt-8 flex justify-between gap-3">
+      <div className="mb-4 flex justify-between md-:flex-col md-:gap-2">
         <Listbox
           selected={filterId}
-          className="w-64"
+          className="lg+:w-64 md-:!w-full xl-:w-40"
           aria-labelledby="filter-id-label"
           name="filter-id"
           items={siloItems}
@@ -129,7 +129,7 @@ const MetricsTab = () => {
 
       {intervalPicker}
 
-      <div className="mb-12 space-y-12">
+      <div className="space-y-12 md+:mb-12">
         <SystemMetric
           {...commonProps}
           metricName="cpus_provisioned"
diff --git a/app/pages/system/inventory/sled/SledPage.tsx b/app/pages/system/inventory/sled/SledPage.tsx
index 633b5f6b3..4f7051b07 100644
--- a/app/pages/system/inventory/sled/SledPage.tsx
+++ b/app/pages/system/inventory/sled/SledPage.tsx
@@ -37,7 +37,7 @@ export function SledPage() {
         <PageTitle icon={<Servers24Icon />}>Sled</PageTitle>
       </PageHeader>
 
-      <PropertiesTable.Group className="-mt-8 mb-16">
+      <PropertiesTable.Group className="-mt-8 mb-16 md-:mb-10">
         <PropertiesTable>
           <PropertiesTable.Row label="sled id">
             <span className="text-secondary">{sled.id}</span>
diff --git a/app/pages/system/silos/SiloPage.tsx b/app/pages/system/silos/SiloPage.tsx
index db8bf4c64..8142d47a2 100644
--- a/app/pages/system/silos/SiloPage.tsx
+++ b/app/pages/system/silos/SiloPage.tsx
@@ -66,7 +66,7 @@ export function SiloPage() {
         />
       </PageHeader>
 
-      <PropertiesTable.Group className="mb-16">
+      <PropertiesTable.Group className="mb-16 md-:mb-10">
         <PropertiesTable>
           <PropertiesTable.Row label="ID">{silo.id}</PropertiesTable.Row>
           <PropertiesTable.Row label="Description">
diff --git a/app/ui/lib/DateRangePicker.tsx b/app/ui/lib/DateRangePicker.tsx
index 8f04817ef..bef6d7624 100644
--- a/app/ui/lib/DateRangePicker.tsx
+++ b/app/ui/lib/DateRangePicker.tsx
@@ -68,7 +68,11 @@ export function DateRangePicker(props: DateRangePickerProps) {
               : 'border-default ring-accent-secondary'
           )}
         >
-          <div className={cn('relative flex w-[17rem] items-center px-3 text-sans-md')}>
+          <div
+            className={cn(
+              'relative flex w-[17rem] items-center px-3 text-sans-md lg-:hidden'
+            )}
+          >
             {label}
             {state.isInvalid && (
               <div className="absolute bottom-0 right-2 top-0 flex items-center text-error">
@@ -76,7 +80,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
               </div>
             )}
           </div>
-          <div className="-ml-px flex h-[calc(100%-12px)] w-10 items-center justify-center rounded-r border-l outline-none border-default">
+          <div className="-ml-px flex h-[calc(100%-12px)] w-10 items-center justify-center rounded-r outline-none border-default md+:border-l">
             <Calendar16Icon className="h-4 w-4 text-tertiary" />
           </div>
         </button>
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index 929296262..068755490 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -33,6 +33,7 @@ export const DropdownMenu = {
   Content: forwardRef(({ className, ...props }: DropdownMenuContentProps, ref: DivRef) => (
     <Content
       {...props}
+      collisionPadding={12}
       // prevents focus ring showing up on trigger when you close the menu
       onCloseAutoFocus={(e) => e.preventDefault()}
       className={cn('DropdownMenuContent', className)}
diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx
index 3994420c0..f5575be5a 100644
--- a/app/ui/lib/Modal.tsx
+++ b/app/ui/lib/Modal.tsx
@@ -56,7 +56,7 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) {
               <Dialog.Portal>
                 <DialogOverlay />
                 <AnimatedDialogContent
-                  className="pointer-events-auto fixed left-1/2 top-1/2 z-modal m-0 flex max-h-[min(800px,80vh)] w-auto min-w-[28rem] max-w-[32rem] flex-col justify-between rounded-lg border p-0 bg-raise border-secondary elevation-2"
+                  className="pointer-events-auto fixed left-1/2 top-1/2 z-modal m-0 flex max-h-[min(800px,80vh)] w-auto max-w-[32rem] flex-col justify-between rounded-lg border p-0 bg-raise border-secondary elevation-2 md+:min-w-[28rem] md-:w-[calc(100vw-2rem)]"
                   aria-labelledby={titleId}
                   style={{
                     transform: y.to((value) => `translate3d(-50%, ${-50 + value}%, 0px)`),
diff --git a/app/ui/lib/PageHeader.tsx b/app/ui/lib/PageHeader.tsx
index 89f11ead0..210ebc583 100644
--- a/app/ui/lib/PageHeader.tsx
+++ b/app/ui/lib/PageHeader.tsx
@@ -9,7 +9,7 @@ import type { ReactElement } from 'react'
 
 import { classed } from '~/util/classed'
 
-export const PageHeader = classed.header`mb-16 mt-12 flex items-center justify-between`
+export const PageHeader = classed.header`mb-16 md-:mt-8 mt-12 flex items-center justify-between`
 
 interface PageTitleProps {
   icon?: ReactElement
diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
index 58590a2fe..6ea9c3f71 100644
--- a/app/ui/lib/PropertiesTable.tsx
+++ b/app/ui/lib/PropertiesTable.tsx
@@ -26,7 +26,7 @@ export function PropertiesTable({ className, children }: PropertiesTableProps) {
     <div
       className={cn(
         className,
-        'properties-table grid min-w-min basis-6/12 divide-y rounded-lg border border-default children:pl-3 children:pr-6 children:border-secondary'
+        'properties-table grid min-w-min basis-6/12 divide-y rounded-lg border border-default'
       )}
     >
       {children}
@@ -43,7 +43,7 @@ PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
     <span className="flex items-center">
       <Badge>{label}</Badge>
     </span>
-    <div className="flex h-11 items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-secondary">
+    <div className="flex items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-secondary md+:h-11">
       {children}
     </div>
   </>
@@ -63,7 +63,7 @@ PropertiesTable.Group = ({ children, className }: PropertiesTableGroupProps) =>
     <div
       className={cn(
         className,
-        'flex min-w-min md-:flex-col md-:first:children:rounded-b-none md-:first:children:border-b-secondary md-:last:children:rounded-t-none md-:last:children:border-t-0 lg+:gap-x-4'
+        'flex min-w-min md+:gap-x-4 md-:flex-col md-:first:children:rounded-b-none md-:first:children:border-b-secondary md-:last:children:rounded-t-none md-:last:children:border-t-0'
       )}
     >
       {children}
diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx
index 777b6c21f..e2d62b8a8 100644
--- a/app/ui/lib/Radio.tsx
+++ b/app/ui/lib/Radio.tsx
@@ -53,13 +53,15 @@ const cardLabelStyles = `
   peer-disabled:bg-disabled peer-disabled:peer-checked:bg-accent-secondary
   peer-checked:peer-disabled:hover:border-accent-secondary peer-disabled:hover:border-default
   peer-disabled:[&>*_.text-secondary]:text-disabled peer-disabled:text-disabled peer-disabled:peer-checked:text-accent-disabled peer-disabled:peer-checked:[&>*_.text-secondary]:text-accent-disabled
+
+  md-:w-full
 `
 
 export function RadioCard({ children, className, ...inputProps }: RadioProps) {
   // HACK: This forces the focus states for storybook stories
   const focus = className?.includes(':focus') ? ':focus' : ''
   return (
-    <label className="inline-flex items-center">
+    <label className="inline-flex items-center md-:w-full">
       <input className={cn(focus, 'peer sr-only')} type="radio" {...inputProps} />
       <span className={cn('ox-radio-card divide-y', cardLabelStyles, className)}>
         {children}
diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index 63b1d8926..aee9ba30e 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -80,7 +80,7 @@ export function SideModal({
               <Dialog.Portal>
                 <DialogOverlay />
                 <AnimatedDialogContent
-                  className="DialogContent ox-side-modal pointer-events-auto fixed bottom-0 right-0 top-0 z-sideModal m-0 flex w-[32rem] flex-col justify-between border-l p-0 bg-raise border-secondary elevation-2"
+                  className="DialogContent ox-side-modal pointer-events-auto fixed bottom-0 right-0 top-0 z-sideModal m-0 flex w-full flex-col justify-between border-l p-0 bg-raise border-secondary elevation-2 md+:w-[32rem]"
                   aria-labelledby={titleId}
                   style={{
                     transform: x.to((value) => `translate3d(${value}%, 0px, 0px)`),
diff --git a/app/ui/lib/Toast.tsx b/app/ui/lib/Toast.tsx
index c11a32d05..083d695ef 100644
--- a/app/ui/lib/Toast.tsx
+++ b/app/ui/lib/Toast.tsx
@@ -88,7 +88,7 @@ export const Toast = ({
   return (
     <div
       className={cn(
-        'relative flex w-96 items-start overflow-hidden rounded-lg p-4',
+        'relative flex w-96 items-start overflow-hidden rounded-lg p-4 md-:w-[calc(100vw-2rem)]',
         color[variant],
         textColor[variant]
       )}
diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
index e085120c7..fb75612c4 100644
--- a/app/ui/styles/components/Tabs.css
+++ b/app/ui/styles/components/Tabs.css
@@ -10,20 +10,35 @@
   @apply !mx-0 !w-full;
 }
 
+@media (max-width: 767px) {
+  .ox-tabs .ox-tabs-list {
+    overflow-x: auto;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* We apply this to the next item not the tab bar so that
+the sticky tab bar finishes at the correct point */
+.ox-tabs > div:not(.ox-tabs-list) {
+  @apply mt-8;
+}
+
 .ox-tabs.full-width .ox-tabs-panel {
   @apply mx-[var(--content-gutter)];
 }
 
 .ox-tabs-list {
-  @apply mb-8 flex bg-transparent;
+  top: var(--navigation-height);
+  @apply sticky z-popover flex bg-transparent bg-default;
 }
 
 .ox-tabs-list:after {
-  @apply block w-full border-b border-secondary;
+  @apply block w-full flex-grow border-b border-secondary md-:w-[var(--content-gutter)] md-:min-w-max md-:flex-shrink-0;
   content: ' ';
 }
 .ox-tabs.full-width .ox-tabs-list:before {
-  @apply block w-10 min-w-max flex-shrink-0 border-b border-secondary;
+  @apply block w-[var(--content-gutter)] min-w-max flex-shrink-0 border-b border-secondary;
   content: ' ';
 }
 
diff --git a/app/ui/styles/components/login-page.css b/app/ui/styles/components/login-page.css
index 60b05b324..ca7f1f265 100644
--- a/app/ui/styles/components/login-page.css
+++ b/app/ui/styles/components/login-page.css
@@ -7,7 +7,7 @@
  */
 
 .hero-rack {
-  @apply absolute left-[calc(50%+40px)] top-[15%] h-[115%] max-h-[1080px] -translate-x-1/2 object-contain md:-mr-10;
+  @apply absolute left-[calc(50%+40px)] top-[15%] h-[115%] max-h-[1080px] -translate-x-1/2 object-contain md-:left-[calc(50%)];
 }
 
 .hero-rack-wrapper {
@@ -28,7 +28,7 @@
   background: linear-gradient(90deg, rgba(42, 46, 49, 0.7) 12.5%, rgba(8, 15, 17, 1) 100%);
 }
 
-@media (max-width: 767px) {
+@media (max-width: 639px) {
   .layout {
     background: radial-gradient(
       200% 100% at 50% 100%,
diff --git a/app/ui/styles/components/properties-table.css b/app/ui/styles/components/properties-table.css
index 75bd70381..9c8b62f8e 100644
--- a/app/ui/styles/components/properties-table.css
+++ b/app/ui/styles/components/properties-table.css
@@ -8,6 +8,14 @@
 
 .properties-table {
   grid-template-columns: minmax(min-content, 1fr) 3fr;
+  @apply children:pl-3 children:border-secondary;
+}
+
+@media (max-width: 768px) {
+  .properties-table {
+    grid-template-columns: 1fr;
+    @apply children:pr-6 odd:children:pb-1 odd:children:pt-2 odd:children:border-secondary even:children:border-none even:children:pb-2;
+  }
 }
 
 .properties-table > *:nth-child(2) {
diff --git a/app/ui/styles/components/side-modal.css b/app/ui/styles/components/side-modal.css
index 4bb1d6776..d8bd2e664 100644
--- a/app/ui/styles/components/side-modal.css
+++ b/app/ui/styles/components/side-modal.css
@@ -10,6 +10,12 @@
   --content-gutter: 2rem;
 }
 
+@media (max-width: 768px) {
+  .ox-side-modal {
+    --content-gutter: 1.5rem;
+  }
+}
+
 .ox-side-modal > :not(.body, button, footer),
 .ox-side-modal > .body > * {
   margin-left: var(--content-gutter);
diff --git a/app/ui/styles/components/table.css b/app/ui/styles/components/table.css
index 044f8ee06..4a6cff11a 100644
--- a/app/ui/styles/components/table.css
+++ b/app/ui/styles/components/table.css
@@ -293,7 +293,10 @@ Drop shadow appears if content is below a sticky
 cell and the table is overflowing
 */
 .scrolled td:first-of-type,
-.scrolled th:first-of-type,
+.scrolled th:first-of-type {
+  box-shadow: var(--elevation-2);
+}
+
 .overflowing td:last-of-type.action-col,
 .overflowing th:last-of-type.action-col {
   box-shadow: var(--elevation-2);
@@ -308,6 +311,7 @@ cell and the table is overflowing
 .scrolled th:first-of-type {
   clip-path: inset(0px -40px 0px -1px);
 }
+
 .overflowing td:last-of-type.action-col,
 .overflowing th:last-of-type.action-col {
   clip-path: inset(0px -1px 0px -40px);
diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index 5746fa8af..d853d6438 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.css
@@ -44,11 +44,34 @@
 
 :root {
   --content-gutter: 2.5rem;
+  --sidebar-width: 14.25rem;
+  --navigation-height: 3.75rem;
+}
+
+@media (max-width: 768px) {
+  :root {
+    --content-gutter: 1.5rem;
+  }
 }
 
 @layer base {
+  html,
+  body,
+  #root {
+    overscroll-behavior-y: none;
+    @apply h-full;
+  }
+
+  #content_pane {
+    @apply min-h-full;
+  }
+
+  .msw-banner #content_pane {
+    @apply pb-10;
+  }
+
   body {
-    @apply overflow-y-hidden text-default bg-default;
+    @apply text-default bg-default;
     font-family:
       SuisseIntl,
       -apple-system,
diff --git a/index.html b/index.html
index 2aab85c67..3b67d172e 100644
--- a/index.html
+++ b/index.html
@@ -12,10 +12,12 @@
     <meta charset="utf-8" />
     <title>Oxide Console</title>
 
-    <meta name="viewport" content="width=1050" />
-
     <link rel="icon" type="image/svg+xml" href="./app/assets/favicon.svg" />
     <link rel="icon" type="image/png" href="./app/assets/favicon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
   </head>
   <body>
     <div id="root"></div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 17b8108be..c9834ec41 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,19 +28,14 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        'xl-': { max: '1535px' },
-        'lg-': { max: '1279px' },
-        'md-': { max: '1023px' },
-        'sm-': { max: '767px' },
         'sm+': { min: '640px' },
         'md+': { min: '768px' },
         'lg+': { min: '1024px' },
         'xl+': { min: '1280px' },
-        '2xl+': { min: '1536px' },
-        sm: { min: '640px', max: '767px' },
-        md: { min: '768px', max: '1023px' },
-        lg: { min: '1024px', max: '1279px' },
-        xl: { min: '1280px', max: '1535px' },
+        'sm-': { max: '639px' },
+        'md-': { max: '767px' },
+        'lg-': { max: '1023px' },
+        'xl-': { max: '1279px' },
       },
       zIndex: {
         toast: '50',
diff --git a/test/e2e/scroll-restore.e2e.ts b/test/e2e/scroll-restore.e2e.ts
index 318b2e8a5..4f85aeb97 100644
--- a/test/e2e/scroll-restore.e2e.ts
+++ b/test/e2e/scroll-restore.e2e.ts
@@ -5,30 +5,34 @@
  *
  * Copyright Oxide Computer Company
  */
-import { expect, test, type Page } from './utils'
+import { expect, expectVisible, test, type Page } from './utils'
 
 async function expectScrollTop(page: Page, expected: number) {
-  const container = page.getByTestId('scroll-container')
-  const getScrollTop = () => container.evaluate((el: HTMLElement) => el.scrollTop)
-  await expect.poll(getScrollTop).toBe(expected)
+  await page.waitForFunction((expected) => window.scrollY === expected, expected)
 }
 
 async function scrollTo(page: Page, to: number) {
-  const container = page.getByTestId('scroll-container')
-  await container.evaluate((el: HTMLElement, to) => el.scrollTo(0, to), to)
+  await page.evaluate((y) => {
+    window.scrollTo(0, y)
+  }, to)
 }
 
 test('scroll restore', async ({ page }) => {
-  // open small window to make scrolling easier
-  await page.setViewportSize({ width: 800, height: 500 })
+  // open short window to make scrolling easier
+  // needs to be wide enough to not require the nav to be opened
+  await page.setViewportSize({ width: 1024, height: 500 })
 
   // nav to disks and scroll it
   await page.goto('/projects/mock-project/disks')
+  // this helps us wait till the page is ready to scroll
+  await expectVisible(page, ['role=heading[name*="Disks"]'])
   await expectScrollTop(page, 0)
   await scrollTo(page, 143)
 
   // nav to snapshots
   await page.getByRole('link', { name: 'Snapshots' }).click()
+  await expectVisible(page, ['role=heading[name*="Snapshots"]'])
+  await expect(page).toHaveURL('/projects/mock-project/snapshots')
   await expectScrollTop(page, 0)
 
   // go back to disks, scroll is restored, scroll it some more
diff --git a/test/e2e/z-index.e2e.ts b/test/e2e/z-index.e2e.ts
index 6379685bc..e4cc81f5b 100644
--- a/test/e2e/z-index.e2e.ts
+++ b/test/e2e/z-index.e2e.ts
@@ -27,7 +27,7 @@ test('Dropdown content can scroll off page and doesn’t hide TopBar', async ({
 
   // scroll the page down just enough that the button and the top item are off
   // screen, but the bottom item is not
-  await page.mouse.wheel(0, 480)
+  await page.mouse.wheel(0, 485)
 
   // if we don't do this, the test doesn't wait long enough for the following
   // assertions to become true