diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index cc88802630..7f08da88da 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -6,8 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
-import { autoUpdate, offset, useFloating } from '@floating-ui/react'
-import { Popover } from '@headlessui/react'
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import cn from 'classnames'
 
 import { OpenLink12Icon, Question12Icon } from '@oxide/design-system/icons/react'
@@ -43,27 +42,15 @@ type DocsPopoverProps = {
 }
 
 export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps) => {
-  const { refs, floatingStyles } = useFloating({
-    placement: 'bottom-end',
-    middleware: [offset(12)],
-    whileElementsMounted: autoUpdate,
-    // Needs to be off because it breaks the enter animation
-    // https://floating-ui.com/docs/usefloating#transform
-    transform: false,
-  })
   return (
     <Popover>
-      <Popover.Button
-        ref={refs.setReference}
-        className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-9')}
-      >
+      <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-9')}>
         <Question12Icon aria-label="Links to docs" className="shrink-0" />
-      </Popover.Button>
-      <Popover.Panel
+      </PopoverButton>
+      <PopoverPanel
         // DocsPopoverPanel needed for enter animation
         className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-1"
-        ref={refs.setFloating}
-        style={floatingStyles}
+        anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
           <h2 className="mt-4 flex items-center gap-1 text-sans-md">
@@ -78,7 +65,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
             <DocsPopoverLink key={link.href} {...link} />
           ))}
         </div>
-      </Popover.Panel>
+      </PopoverPanel>
     </Popover>
   )
 }
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
index f61c4aadcd..2ef78f8b73 100644
--- a/app/ui/lib/Listbox.tsx
+++ b/app/ui/lib/Listbox.tsx
@@ -6,14 +6,12 @@
  * Copyright Oxide Computer Company
  */
 import {
-  autoUpdate,
-  flip,
-  FloatingPortal,
-  offset,
-  size,
-  useFloating,
-} from '@floating-ui/react'
-import { Listbox as Select } from '@headlessui/react'
+  Listbox as HListbox,
+  Label,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@headlessui/react'
 import cn from 'classnames'
 import type { ReactNode } from 'react'
 
@@ -61,21 +59,6 @@ export const Listbox = <Value extends string = string>({
   isLoading = false,
   ...props
 }: ListboxProps<Value>) => {
-  const { refs, floatingStyles } = useFloating({
-    middleware: [
-      offset(12),
-      flip(),
-      size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
-          })
-        },
-      }),
-    ],
-    whileElementsMounted: autoUpdate,
-  })
-
   const selectedItem = selected && items.find((i) => i.value === selected)
   const noItems = !isLoading && items.length === 0
   const isDisabled = disabled || noItems
@@ -83,7 +66,7 @@ export const Listbox = <Value extends string = string>({
 
   return (
     <div className={cn('relative', className)}>
-      <Select
+      <HListbox
         value={selected}
         // you shouldn't ever be able to select null, but we check here anyway
         // to make TS happy so the calling code doesn't have to. note `val !==
@@ -96,14 +79,13 @@ export const Listbox = <Value extends string = string>({
             {label && (
               <div className="mb-2">
                 <FieldLabel id={``} as="div" tip={tooltipText} optional={!required}>
-                  <Select.Label>{label}</Select.Label>
+                  <Label>{label}</Label>
                 </FieldLabel>
                 {description && <TextInputHint id={``}>{description}</TextInputHint>}
               </div>
             )}
-            <Select.Button
+            <ListboxButton
               name={name}
-              ref={refs.setReference}
               className={cn(
                 `flex h-10 w-full items-center justify-between
                     rounded border text-sans-md`,
@@ -136,37 +118,44 @@ export const Listbox = <Value extends string = string>({
               >
                 <SelectArrows6Icon title="Select" className="w-2 text-tertiary" />
               </div>
-            </Select.Button>
-            <FloatingPortal>
-              <Select.Options
-                ref={refs.setFloating}
-                style={floatingStyles}
-                className={`ox-menu pointer-events-auto ${zIndex} overflow-y-auto !outline-none`}
-              >
-                {items.map((item) => (
-                  <Select.Option
-                    key={item.value}
-                    value={item.value}
-                    className="relative border-b border-secondary last:border-0"
-                  >
-                    {({ active, selected }) => (
-                      <div
-                        className={cn(
-                          'ox-menu-item text-secondary',
-                          selected && 'is-selected',
-                          active && 'is-highlighted'
-                        )}
-                      >
-                        {item.label}
-                      </div>
-                    )}
-                  </Select.Option>
-                ))}
-              </Select.Options>
-            </FloatingPortal>
+            </ListboxButton>
+            <ListboxOptions
+              anchor={{ gap: 12 }}
+              className={`ox-menu pointer-events-auto ${zIndex} w-[var(--button-width)] overflow-y-auto !outline-none`}
+              // This is to prevent the `useOthersInert` call in ListboxOptions.
+              // Without this, when the listbox options box scrolls under the
+              // top bar (for example) you can click through the top bar to the
+              // options because the topbar (and all other elements) has been
+              // marked "inert", which means it does not catch mouse events.
+              // This would not be necessary if useScrollLock in ListboxOptions
+              // worked, but we suspect it doesn't work because the page as a
+              // whole is not the scroll container.
+              modal={false}
+            >
+              {items.map((item) => (
+                <ListboxOption
+                  key={item.value}
+                  value={item.value}
+                  className="relative border-b border-secondary last:border-0"
+                >
+                  {({ active, selected }) => (
+                    // TODO: redo active styling with `data-active` somehow
+                    <div
+                      className={cn(
+                        'ox-menu-item text-secondary',
+                        selected && 'is-selected',
+                        active && 'is-highlighted'
+                      )}
+                    >
+                      {item.label}
+                    </div>
+                  )}
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
           </>
         )}
-      </Select>
+      </HListbox>
     </div>
   )
 }
diff --git a/app/ui/styles/components/menu-list.css b/app/ui/styles/components/menu-list.css
index 8a9d719712..35c28f87a5 100644
--- a/app/ui/styles/components/menu-list.css
+++ b/app/ui/styles/components/menu-list.css
@@ -7,7 +7,7 @@
  */
 
 .ox-menu {
-  @apply max-h-[17.5rem] overflow-y-auto rounded border bg-raise border-secondary elevation-2;
+  @apply !max-h-[17.5rem] overflow-y-auto rounded border bg-raise border-secondary elevation-2;
 }
 
 .ox-menu-item {
diff --git a/package-lock.json b/package-lock.json
index 73944a37f2..94fd5795d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "license": "MPL-2.0",
       "dependencies": {
         "@floating-ui/react": "^0.26.13",
-        "@headlessui/react": "^1.7.18",
+        "@headlessui/react": "^2.0.3",
         "@oxide/design-system": "^1.4.6",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-dialog": "^1.0.5",
@@ -1281,19 +1281,21 @@
       }
     },
     "node_modules/@headlessui/react": {
-      "version": "1.7.18",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
-      "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.0.3.tgz",
+      "integrity": "sha512-Xd1h0YZgfhxZ7W1w4TvK0/TZ1c4qaX4liYVUkAXqW1HCLcXSqnMeYAUGJS/BBroBAUL9HErjyFcRpCWRQZ/0lA==",
       "dependencies": {
-        "@tanstack/react-virtual": "^3.0.0-beta.60",
-        "client-only": "^0.0.1"
+        "@floating-ui/react": "^0.26.13",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@tanstack/react-virtual": "3.5.0"
       },
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "react": "^16 || ^17 || ^18",
-        "react-dom": "^16 || ^17 || ^18"
+        "react": "^18",
+        "react-dom": "^18"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
@@ -2086,6 +2088,22 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@oxide/design-system/node_modules/@headlessui/react": {
+      "version": "1.7.19",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
+      "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==",
+      "dependencies": {
+        "@tanstack/react-virtual": "^3.0.0-beta.60",
+        "client-only": "^0.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@oxide/openapi-gen-ts": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@oxide/openapi-gen-ts/-/openapi-gen-ts-0.2.2.tgz",
@@ -5197,11 +5215,11 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.4.tgz",
-      "integrity": "sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.5.0.tgz",
+      "integrity": "sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.0.0"
+        "@tanstack/virtual-core": "3.5.0"
       },
       "funding": {
         "type": "github",
@@ -5225,9 +5243,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz",
-      "integrity": "sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.5.0.tgz",
+      "integrity": "sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -20504,12 +20522,14 @@
       }
     },
     "@headlessui/react": {
-      "version": "1.7.18",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.18.tgz",
-      "integrity": "sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.0.3.tgz",
+      "integrity": "sha512-Xd1h0YZgfhxZ7W1w4TvK0/TZ1c4qaX4liYVUkAXqW1HCLcXSqnMeYAUGJS/BBroBAUL9HErjyFcRpCWRQZ/0lA==",
       "requires": {
-        "@tanstack/react-virtual": "^3.0.0-beta.60",
-        "client-only": "^0.0.1"
+        "@floating-ui/react": "^0.26.13",
+        "@react-aria/focus": "^3.16.2",
+        "@react-aria/interactions": "^3.21.1",
+        "@tanstack/react-virtual": "3.5.0"
       }
     },
     "@humanwhocodes/config-array": {
@@ -21125,6 +21145,15 @@
             "@floating-ui/utils": "^0.1.1",
             "tabbable": "^6.0.1"
           }
+        },
+        "@headlessui/react": {
+          "version": "1.7.19",
+          "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
+          "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==",
+          "requires": {
+            "@tanstack/react-virtual": "^3.0.0-beta.60",
+            "client-only": "^0.0.1"
+          }
         }
       }
     },
@@ -23146,11 +23175,11 @@
       }
     },
     "@tanstack/react-virtual": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.4.tgz",
-      "integrity": "sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.5.0.tgz",
+      "integrity": "sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==",
       "requires": {
-        "@tanstack/virtual-core": "3.0.0"
+        "@tanstack/virtual-core": "3.5.0"
       }
     },
     "@tanstack/table-core": {
@@ -23159,9 +23188,9 @@
       "integrity": "sha512-dCG8vQGk4js5v88/k83tTedWOwjGnIyONrKpHpfmSJB8jwFHl8GSu1sBBxbtACVAPtAQgwNxl0rw1d3RqRM1Tg=="
     },
     "@tanstack/virtual-core": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz",
-      "integrity": "sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.5.0.tgz",
+      "integrity": "sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg=="
     },
     "@testing-library/dom": {
       "version": "10.1.0",
diff --git a/package.json b/package.json
index bd94e27f9a..a542aef807 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   "private": true,
   "dependencies": {
     "@floating-ui/react": "^0.26.13",
-    "@headlessui/react": "^1.7.18",
+    "@headlessui/react": "^2.0.3",
     "@oxide/design-system": "^1.4.6",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index d8b8ed006d..4ff6a7b5ed 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -62,6 +62,7 @@ test('can create an instance', async ({ page }) => {
   await expect(assignEphemeralIpCheckbox).toBeChecked()
   await assignEphemeralIpButton.click()
   await expect(page.getByRole('option', { name: 'ip-pool-1' })).toBeEnabled()
+  await assignEphemeralIpButton.click() // click closes the listbox so we can do more stuff
 
   // unchecking the box should disable the selector
   await assignEphemeralIpCheckbox.uncheck()