diff --git a/app/pages/project/floating-ips/AttachFloatingIpModal.tsx b/app/pages/project/floating-ips/AttachFloatingIpModal.tsx
new file mode 100644
index 000000000..43ce1c090
--- /dev/null
+++ b/app/pages/project/floating-ips/AttachFloatingIpModal.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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 { useForm } from 'react-hook-form'
+
+import { useApiMutation, useApiQueryClient, type FloatingIp, type Instance } from '~/api'
+import { ListboxField } from '~/components/form/fields/ListboxField'
+import { addToast } from '~/stores/toast'
+import { Message } from '~/ui/lib/Message'
+import { Modal } from '~/ui/lib/Modal'
+
+function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
+  return (
+    <div className="text-tertiary selected:text-accent-secondary">
+      <div>{fip.name}</div>
+      <div className="flex gap-0.5">
+        <div>{fip.ip}</div>
+        {fip.description && (
+          <>
+            <span className="mx-1 text-quinary selected:text-accent-disabled">/</span>
+            <div className="flex-grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+              {fip.description}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export const AttachFloatingIpModal = ({
+  floatingIps,
+  instance,
+  project,
+  onDismiss,
+}: {
+  floatingIps: Array<FloatingIp>
+  instance: Instance
+  project: string
+  onDismiss: () => void
+}) => {
+  const queryClient = useApiQueryClient()
+  const floatingIpAttach = useApiMutation('floatingIpAttach', {
+    onSuccess() {
+      queryClient.invalidateQueries('floatingIpList')
+      queryClient.invalidateQueries('instanceExternalIpList')
+      addToast({ content: 'Your floating IP has been attached' })
+      onDismiss()
+    },
+    onError: (err) => {
+      addToast({ title: 'Error', content: err.message, variant: 'error' })
+    },
+  })
+  const form = useForm({ defaultValues: { floatingIp: '' } })
+  const floatingIp = form.watch('floatingIp')
+
+  return (
+    <Modal isOpen title="Attach floating IP" onDismiss={onDismiss}>
+      <Modal.Body>
+        <Modal.Section>
+          <Message
+            variant="info"
+            content={`Instance ‘${instance.name}’ will be reachable at the selected IP address`}
+          />
+          <form>
+            <ListboxField
+              control={form.control}
+              name="floatingIp"
+              label="Floating IP"
+              placeholder="Select floating IP"
+              items={floatingIps.map((ip) => ({
+                value: ip.id,
+                label: <FloatingIpLabel fip={ip} />,
+                labelString: ip.name,
+              }))}
+              required
+            />
+          </form>
+        </Modal.Section>
+      </Modal.Body>
+      <Modal.Footer
+        actionText="Attach"
+        disabled={!floatingIp}
+        onAction={() =>
+          floatingIpAttach.mutate({
+            path: { floatingIp },
+            query: { project },
+            body: { kind: 'instance', parent: instance.id },
+          })
+        }
+        onDismiss={onDismiss}
+      ></Modal.Footer>
+    </Modal>
+  )
+}
diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx
index 1466307c5..a4641dc33 100644
--- a/app/pages/project/floating-ips/FloatingIpsPage.tsx
+++ b/app/pages/project/floating-ips/FloatingIpsPage.tsx
@@ -238,7 +238,7 @@ const AttachFloatingIpModal = ({
   const form = useForm({ defaultValues: { instanceId: '' } })
 
   return (
-    <Modal isOpen title="Attach Floating IP" onDismiss={onDismiss}>
+    <Modal isOpen title="Attach floating IP" onDismiss={onDismiss}>
       <Modal.Body>
         <Modal.Section>
           <Message
diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index b3c5db376..1d5a36fe8 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -192,7 +192,7 @@ export function InstancePage() {
       <RouteTabs fullWidth>
         <Tab to={pb.instanceStorage(instanceSelector)}>Storage</Tab>
         <Tab to={pb.instanceMetrics(instanceSelector)}>Metrics</Tab>
-        <Tab to={pb.nics(instanceSelector)}>Network Interfaces</Tab>
+        <Tab to={pb.nics(instanceSelector)}>Networking</Tab>
         <Tab to={pb.instanceConnect(instanceSelector)}>Connect</Tab>
       </RouteTabs>
     </>
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
index 91fa54c83..f4b877dbe 100644
--- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
+++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -5,8 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
-import { createColumnHelper } from '@tanstack/react-table'
-import { useCallback, useState } from 'react'
+import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useCallback, useMemo, useState } from 'react'
 import { type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
@@ -16,27 +16,29 @@ import {
   useApiQuery,
   useApiQueryClient,
   usePrefetchedApiQuery,
+  type ExternalIp,
   type InstanceNetworkInterface,
 } from '@oxide/api'
 import { Networking24Icon } from '@oxide/design-system/icons/react'
 
+import { HL } from '~/components/HL'
 import { CreateNetworkInterfaceForm } from '~/forms/network-interface-create'
 import { EditNetworkInterfaceForm } from '~/forms/network-interface-edit'
-import {
-  getInstanceSelector,
-  useInstanceSelector,
-  useProjectSelector,
-  useToast,
-} from '~/hooks'
+import { getInstanceSelector, useInstanceSelector, useProjectSelector } from '~/hooks'
+import { AttachFloatingIpModal } from '~/pages/project/floating-ips/AttachFloatingIpModal'
+import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
-import { SkeletonCell } from '~/table/cells/EmptyCell'
+import { addToast } from '~/stores/toast'
+import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell'
 import { LinkCell } from '~/table/cells/LinkCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
-import { Columns } from '~/table/columns/common'
-import { useQueryTable } from '~/table/QueryTable'
+import { Columns, DescriptionCell } from '~/table/columns/common'
+import { Table } from '~/table/Table'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table'
+import { TipIcon } from '~/ui/lib/TipIcon'
 import { pb } from '~/util/path-builder'
 
 import { fancifyStates } from './common'
@@ -75,7 +77,16 @@ NetworkingTab.loader = async ({ params }: LoaderFunctionArgs) => {
   const { project, instance } = getInstanceSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('instanceNetworkInterfaceList', {
-      query: { project, instance, limit: 25 },
+      // we want this to cover all NICs; TODO: determine actual limit?
+      query: { project, instance, limit: 1000 },
+    }),
+    apiQueryClient.prefetchQuery('floatingIpList', {
+      query: { project, limit: 1000 },
+    }),
+    // dupe of page-level fetch but that's fine, RQ dedupes
+    apiQueryClient.prefetchQuery('instanceExternalIpList', {
+      path: { instance },
+      query: { project },
     }),
     // This is covered by the InstancePage loader but there's no downside to
     // being redundant. If it were removed there, we'd still want it here.
@@ -89,17 +100,17 @@ NetworkingTab.loader = async ({ params }: LoaderFunctionArgs) => {
 
 const colHelper = createColumnHelper<InstanceNetworkInterface>()
 const staticCols = [
-  colHelper.accessor((i) => ({ name: i.name, primary: i.primary }), {
+  colHelper.accessor('name', {
     header: 'name',
     cell: (info) => (
       <>
-        <span>{info.getValue().name}</span>
-        {info.getValue().primary ? <Badge className="ml-2">primary</Badge> : null}
+        <span>{info.getValue()}</span>
+        {info.row.original.primary && <Badge className="ml-2">primary</Badge>}
       </>
     ),
   }),
   colHelper.accessor('description', Columns.description),
-  colHelper.accessor('ip', {}),
+  colHelper.accessor('ip', { header: 'Private IP' }),
   colHelper.accessor('vpcId', {
     header: 'vpc',
     cell: (info) => <VpcNameFromId value={info.getValue()} />,
@@ -114,12 +125,20 @@ const updateNicStates = fancifyStates(instanceCan.updateNic.states)
 
 export function NetworkingTab() {
   const instanceSelector = useInstanceSelector()
+  const { instance: instanceName, project } = instanceSelector
 
   const queryClient = useApiQueryClient()
-  const addToast = useToast()
 
   const [createModalOpen, setCreateModalOpen] = useState(false)
   const [editing, setEditing] = useState<InstanceNetworkInterface | null>(null)
+  const [attachModalOpen, setAttachModalOpen] = useState(false)
+
+  // Fetch the floating IPs to show in the "Attach floating IP" modal
+  const { data: ips } = usePrefetchedApiQuery('floatingIpList', {
+    query: { project, limit: 1000 },
+  })
+  // Filter out the IPs that are already attached to an instance
+  const availableIps = useMemo(() => ips.items.filter((ip) => !ip.instanceId), [ips])
 
   const createNic = useApiMutation('instanceNetworkInterfaceCreate', {
     onSuccess() {
@@ -127,14 +146,12 @@ export function NetworkingTab() {
       setCreateModalOpen(false)
     },
   })
-
   const deleteNic = useApiMutation('instanceNetworkInterfaceDelete', {
     onSuccess() {
       queryClient.invalidateQueries('instanceNetworkInterfaceList')
       addToast({ content: 'Network interface deleted' })
     },
   })
-
   const editNic = useApiMutation('instanceNetworkInterfaceUpdate', {
     onSuccess() {
       queryClient.invalidateQueries('instanceNetworkInterfaceList')
@@ -142,8 +159,8 @@ export function NetworkingTab() {
   })
 
   const { data: instance } = usePrefetchedApiQuery('instanceView', {
-    path: { instance: instanceSelector.instance },
-    query: { project: instanceSelector.project },
+    path: { instance: instanceName },
+    query: { project },
   })
   const canUpdateNic = instanceCan.updateNic(instance)
 
@@ -197,54 +214,169 @@ export function NetworkingTab() {
     [canUpdateNic, deleteNic, editNic, instanceSelector]
   )
 
-  const emptyState = (
-    <EmptyMessage
-      icon={<Networking24Icon />}
-      title="No network interfaces"
-      body="You need to create a network interface to be able to see it here"
-    />
+  const columns = useColsWithActions(staticCols, makeActions)
+
+  const rows = usePrefetchedApiQuery('instanceNetworkInterfaceList', {
+    query: { ...instanceSelector, limit: 1000 },
+  }).data.items
+
+  const tableInstance = useReactTable({
+    columns,
+    data: rows || [],
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  // Attached IPs Table
+  const { data: eips } = usePrefetchedApiQuery('instanceExternalIpList', {
+    path: { instance: instanceName },
+    query: { project },
+  })
+
+  const ipColHelper = createColumnHelper<ExternalIp>()
+  const staticIpCols = [
+    ipColHelper.accessor('ip', {}),
+    ipColHelper.accessor('kind', {
+      header: () => (
+        <>
+          Kind
+          <TipIcon className="ml-2">
+            Floating IPs can be detached from this instance and attached to another.
+          </TipIcon>
+        </>
+      ),
+      cell: (info) => <Badge color="neutral">{info.getValue()}</Badge>,
+    }),
+    ipColHelper.accessor('name', {
+      cell: (info) => (info.getValue() ? info.getValue() : <EmptyCell />),
+    }),
+    ipColHelper.accessor((row) => ('description' in row ? row.description : undefined), {
+      header: 'description',
+      cell: (info) => <DescriptionCell text={info.getValue()} />,
+    }),
+  ]
+
+  const floatingIpDetach = useApiMutation('floatingIpDetach', {
+    onSuccess() {
+      queryClient.invalidateQueries('floatingIpList')
+      queryClient.invalidateQueries('instanceExternalIpList')
+      addToast({ content: 'Your floating IP has been detached' })
+    },
+    onError: (err) => {
+      addToast({ title: 'Error', content: err.message, variant: 'error' })
+    },
+  })
+
+  const makeIpActions = useCallback(
+    (externalIp: ExternalIp): MenuAction[] => {
+      const copyAction = {
+        label: 'Copy IP address',
+        onActivate: () => {
+          window.navigator.clipboard.writeText(externalIp.ip)
+        },
+      }
+
+      if (externalIp.kind === 'floating') {
+        return [
+          copyAction,
+          {
+            label: 'Detach',
+            onActivate: () =>
+              confirmAction({
+                actionType: 'danger',
+                doAction: () =>
+                  floatingIpDetach.mutateAsync({
+                    path: { floatingIp: externalIp.name },
+                    query: { project },
+                  }),
+                modalTitle: 'Detach Floating IP',
+                modalContent: (
+                  <p>
+                    Are you sure you want to detach floating IP <HL>{externalIp.name}</HL>?{' '}
+                    The instance <HL>{instanceName}</HL> will no longer be reachable at{' '}
+                    <HL>{externalIp.ip}</HL>.
+                  </p>
+                ),
+                errorTitle: 'Error detaching floating IP',
+              }),
+          },
+        ]
+      }
+      return [copyAction]
+    },
+    [floatingIpDetach, instanceName, project]
   )
 
-  const { Table } = useQueryTable('instanceNetworkInterfaceList', {
-    query: instanceSelector,
+  const ipTableInstance = useReactTable({
+    columns: useColsWithActions(staticIpCols, makeIpActions),
+    data: eips?.items || [],
+    getCoreRowModel: getCoreRowModel(),
   })
 
-  const columns = useColsWithActions(staticCols, makeActions)
+  const disabledReason =
+    eips.items.length >= 32
+      ? 'IP address limit of 32 reached for this instance'
+      : availableIps.length === 0
+        ? 'No available floating IPs'
+        : null
 
   return (
     <>
-      <h2 id="nic-label" className="mb-4 text-mono-sm text-secondary">
-        Network Interfaces
-      </h2>
-      <Table labeled-by="nic-label" columns={columns} emptyState={emptyState} />
-      <div className="mt-4 flex flex-col gap-3">
-        <div className="flex gap-3">
-          <Button
-            size="sm"
-            onClick={() => setCreateModalOpen(true)}
-            disabled={!canUpdateNic}
-            disabledReason={
-              <>Can only create network interface when instance is {updateNicStates}</>
-            }
-          >
-            Add network interface
-          </Button>
-        </div>
-        {!canUpdateNic && (
-          <span className="max-w-xs text-sans-md text-tertiary">
-            A network interface cannot be created or edited unless the instance is{' '}
-            {updateNicStates}.
-          </span>
+      <TableControls>
+        <TableTitle id="attached-ips-label">External IPs</TableTitle>
+        <Button
+          size="sm"
+          onClick={() => setAttachModalOpen(true)}
+          disabled={!!disabledReason}
+          disabledReason={disabledReason}
+        >
+          Attach floating IP
+        </Button>
+        {attachModalOpen && (
+          <AttachFloatingIpModal
+            floatingIps={availableIps}
+            instance={instance}
+            onDismiss={() => setAttachModalOpen(false)}
+            project={project}
+          />
+        )}
+      </TableControls>
+      <Table aria-labelledby="attached-ips-label" table={ipTableInstance} />
+
+      <TableControls className="mt-8">
+        <TableTitle id="nics-label">Network interfaces</TableTitle>
+        <Button
+          size="sm"
+          onClick={() => setCreateModalOpen(true)}
+          disabled={!canUpdateNic}
+          disabledReason={
+            <>
+              A network interface cannot be created or edited unless the instance is{' '}
+              {updateNicStates}.
+            </>
+          }
+        >
+          Add network interface
+        </Button>
+        {createModalOpen && (
+          <CreateNetworkInterfaceForm
+            onDismiss={() => setCreateModalOpen(false)}
+            onSubmit={(body) => createNic.mutate({ query: instanceSelector, body })}
+            submitError={createNic.error}
+          />
         )}
-      </div>
-
-      {createModalOpen && (
-        <CreateNetworkInterfaceForm
-          onDismiss={() => setCreateModalOpen(false)}
-          onSubmit={(body) => createNic.mutate({ query: instanceSelector, body })}
-          submitError={createNic.error}
-        />
+      </TableControls>
+      {rows?.length && rows.length > 0 ? (
+        <Table aria-labelledby="nics-label" table={tableInstance} />
+      ) : (
+        <TableEmptyBox>
+          <EmptyMessage
+            icon={<Networking24Icon />}
+            title="No network interfaces"
+            body="You need to create a network interface to be able to see it here"
+          />
+        </TableEmptyBox>
       )}
+
       {editing && (
         <EditNetworkInterfaceForm editing={editing} onDismiss={() => setEditing(null)} />
       )}
diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx
index e0e3ae7b9..cdf3f066e 100644
--- a/app/pages/project/instances/instance/tabs/StorageTab.tsx
+++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx
@@ -53,7 +53,7 @@ StorageTab.loader = async ({ params }: LoaderFunctionArgs) => {
 
 const colHelper = createColumnHelper<Disk>()
 const staticCols = [
-  colHelper.accessor('name', {}),
+  colHelper.accessor('name', { header: 'Disk' }),
   colHelper.accessor('size', Columns.size),
   colHelper.accessor((row) => row.state.state, {
     header: 'status',
@@ -168,12 +168,7 @@ export function StorageTab() {
 
   return (
     <>
-      <h2 id="disks-label" className="mb-4 text-mono-sm text-secondary">
-        Disks
-      </h2>
-      {/* TODO: need 40px high rows. another table or a flag on Table (ew) */}
-
-      <Table emptyState={emptyState} aria-labelledby="disks-label" columns={columns} />
+      <Table emptyState={emptyState} columns={columns} />
       <div className="mt-4 flex flex-col gap-3">
         <div className="flex gap-3">
           <Button
diff --git a/app/routes.tsx b/app/routes.tsx
index 367a8e729..3081e5aee 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -310,7 +310,7 @@ export const routes = createRoutesFromElements(
                 path="network-interfaces"
                 element={<NetworkingTab />}
                 loader={NetworkingTab.loader}
-                handle={{ crumb: 'Network interfaces' }}
+                handle={{ crumb: 'Networking' }}
               />
               <Route
                 path="metrics"
diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index b9bbe6518..727268463 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -11,6 +11,7 @@ import { filesize } from 'filesize'
 
 import { Truncate } from '~/ui/lib/Truncate'
 
+import { EmptyCell } from '../cells/EmptyCell'
 import { TwoLineCell } from '../cells/TwoLineCell'
 
 // the full type of the info arg is CellContext<Row, Item> from RT, but in these
@@ -31,11 +32,14 @@ function sizeCell(info: Info<number>) {
   )
 }
 
+export const DescriptionCell = ({ text }: { text?: string }) =>
+  text ? <Truncate text={text} maxLength={48} /> : <EmptyCell />
+
 /** Columns used in a bunch of tables */
 export const Columns = {
   /** Truncates text if too long, full text in tooltip */
   description: {
-    cell: (info: Info<string>) => <Truncate text={info.getValue()} maxLength={48} />,
+    cell: (info: Info<string | undefined>) => <DescriptionCell text={info.getValue()} />,
   },
   size: { cell: sizeCell },
   timeCreated: { header: 'created', cell: dateCell },
diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx
index 08c88239e..22511ad85 100644
--- a/app/ui/lib/Table.tsx
+++ b/app/ui/lib/Table.tsx
@@ -140,3 +140,5 @@ export const TableControlsButton = (props: ButtonProps) => (
 export const TableControlsLink = (props: LinkProps) => (
   <Link className={buttonStyle({ size: 'sm' })} {...props} />
 )
+
+export const TableTitle = classed.div`text-sans-lg text-default`
diff --git a/mock-api/msw/handlers.ts b/mock-api/msw/handlers.ts
index 9cc079591..b52c297c3 100644
--- a/mock-api/msw/handlers.ts
+++ b/mock-api/msw/handlers.ts
@@ -261,9 +261,7 @@ export const handlers = makeHandlers({
       }
       floatingIp.name = body.name
     }
-    if (body.description) {
-      floatingIp.description = body.description
-    }
+    floatingIp.description = body.description || ''
     return floatingIp
   },
   floatingIpDelete({ path, query }) {
diff --git a/test/e2e/click-everything.e2e.ts b/test/e2e/click-everything.e2e.ts
index 8db2064c0..95db0babe 100644
--- a/test/e2e/click-everything.e2e.ts
+++ b/test/e2e/click-everything.e2e.ts
@@ -19,7 +19,7 @@ test('Click through instance page', async ({ page }) => {
     'role=heading[name*=db1]',
     'role=tab[name="Storage"]',
     'role=tab[name="Metrics"]',
-    'role=tab[name="Network Interfaces"]',
+    'role=tab[name="Networking"]',
     'role=cell[name="disk-1"]',
     'role=cell[name="disk-2"]',
     // buttons disabled while instance is running
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index d17b86cab..13b82d208 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -70,8 +70,8 @@ test('can create an instance', async ({ page }) => {
   ])
 
   // network tab works
-  await page.getByRole('tab', { name: 'Network Interfaces' }).click()
-  const table = page.getByRole('table')
+  await page.getByRole('tab', { name: 'Networking' }).click()
+  const table = page.getByRole('table', { name: 'Network interfaces' })
   await expectRowVisible(table, {
     name: 'defaultprimary',
     vpc: 'mock-vpc',
@@ -239,7 +239,7 @@ test('create instance with existing disk', async ({ page }) => {
   await page.getByRole('button', { name: 'Create instance' }).click()
   await expect(page).toHaveURL(`/projects/mock-project/instances/${instanceName}/storage`)
   await expectVisible(page, [`h1:has-text("${instanceName}")`, 'text=8 GiB'])
-  await expectRowVisible(page.getByRole('table'), { name: 'disk-3' })
+  await expectRowVisible(page.getByRole('table'), { Disk: 'disk-3' })
 })
 
 test('create instance with a different existing disk', async ({ page }) => {
@@ -252,7 +252,7 @@ test('create instance with a different existing disk', async ({ page }) => {
   await page.getByRole('button', { name: 'Create instance' }).click()
   await expect(page).toHaveURL(`/projects/mock-project/instances/${instanceName}/storage`)
   await expectVisible(page, [`h1:has-text("${instanceName}")`, 'text=8 GiB'])
-  await expectRowVisible(page.getByRole('table'), { name: 'disk-4' })
+  await expectRowVisible(page.getByRole('table'), { Disk: 'disk-4' })
 })
 
 test('start with an existing disk, but then switch to a silo image', async ({ page }) => {
diff --git a/test/e2e/instance/networking.e2e.ts b/test/e2e/instance/networking.e2e.ts
index 43ef5064d..1a75d5ebf 100644
--- a/test/e2e/instance/networking.e2e.ts
+++ b/test/e2e/instance/networking.e2e.ts
@@ -15,7 +15,7 @@ import {
   stopInstance,
 } from '../utils'
 
-test('Instance networking tab', async ({ page }) => {
+test('Instance networking tab — NIC table', async ({ page }) => {
   await page.goto('/projects/mock-project/instances/db1')
 
   // links to VPC and external IPs appear in table
@@ -23,10 +23,11 @@ test('Instance networking tab', async ({ page }) => {
   await expect(page.getByRole('link', { name: '123.4.56.0' })).toBeVisible()
 
   // Instance networking tab
-  await page.click('role=tab[name="Network Interfaces"]')
+  await page.click('role=tab[name="Networking"]')
 
-  const table = page.locator('table')
-  await expectRowVisible(table, { name: 'my-nicprimary' })
+  const nicTable = page.getByRole('table', { name: 'Network interfaces' })
+
+  await expectRowVisible(nicTable, { name: 'my-nicprimary' })
 
   // check VPC link in table points to the right page
   await expect(page.locator('role=cell >> role=link[name="mock-vpc"]')).toHaveAttribute(
@@ -60,8 +61,8 @@ test('Instance networking tab', async ({ page }) => {
 
   // Make this interface primary
   await clickRowAction(page, 'nic-2', 'Make primary')
-  await expectRowVisible(table, { name: 'my-nic' })
-  await expectRowVisible(table, { name: 'nic-2primary' })
+  await expectRowVisible(nicTable, { name: 'my-nic' })
+  await expectRowVisible(nicTable, { name: 'nic-2primary' })
 
   // Make an edit to the network interface
   await clickRowAction(page, 'nic-2', 'Edit')
@@ -76,3 +77,43 @@ test('Instance networking tab', async ({ page }) => {
   await page.getByRole('button', { name: 'Confirm' }).click()
   await expect(nic3).toBeHidden()
 })
+
+test('Instance networking tab — External IPs', async ({ page }) => {
+  await page.goto('/projects/mock-project/instances/db1/network-interfaces')
+  const externalIpTable = page.getByRole('table', { name: 'External IPs' })
+
+  // See list of external IPs
+  await expectRowVisible(externalIpTable, { ip: '123.4.56.0', Kind: 'ephemeral' })
+  await expectRowVisible(externalIpTable, { ip: '123.4.56.5', Kind: 'floating' })
+
+  // Attach a new external IP
+  await page.click('role=button[name="Attach floating IP"]')
+  await expectVisible(page, ['role=heading[name="Attach floating IP"]'])
+
+  // Select the 'rootbeer-float' option
+  const dialog = page.getByRole('dialog')
+  // TODO: this "select the option" syntax is awkward; it's working, but I suspect there's a better way
+  await dialog.getByRole('button', { name: 'Select floating IP' }).click()
+  await page.keyboard.press('ArrowDown')
+  await page.keyboard.press('Enter')
+  // await dialog.getByRole('button', { name: 'rootbeer-float' }).click()
+  // await dialog.getByRole('button', { name: 'rootbeer-float123.4.56.4/A classic.' }).click()
+  await dialog.getByRole('button', { name: 'Attach' }).click()
+
+  // Confirm the modal is gone and the new row is showing on the page
+  await expect(page.getByRole('dialog')).toBeHidden()
+  await expectRowVisible(externalIpTable, { name: 'rootbeer-float' })
+
+  // Verify that the "Attach floating IP" button is disabled, since there shouldn't be any more IPs to attach
+  await expect(page.getByRole('button', { name: 'Attach floating IP' })).toBeDisabled()
+
+  // Detach one of the external IPs
+  await clickRowAction(page, 'cola-float', 'Detach')
+  await page.getByRole('button', { name: 'Confirm' }).click()
+
+  // Since we detached it, we don't expect to see db1 any longer
+  await expect(externalIpTable.getByRole('cell', { name: 'cola-float' })).toBeHidden()
+
+  // And that button shouldbe enabled again
+  await expect(page.getByRole('button', { name: 'Attach floating IP' })).toBeEnabled()
+})
diff --git a/test/e2e/network-interface-create.e2e.ts b/test/e2e/network-interface-create.e2e.ts
index 21c01ae93..888806c0a 100644
--- a/test/e2e/network-interface-create.e2e.ts
+++ b/test/e2e/network-interface-create.e2e.ts
@@ -34,7 +34,8 @@ test('can create a NIC with a specified IP address', async ({ page }) => {
   await sidebar.getByRole('button', { name: 'Add network interface' }).click()
   await expect(sidebar).toBeHidden()
 
-  await expectRowVisible(page.getByRole('table'), { name: 'nic-1', ip: '1.2.3.4' })
+  const table = page.getByRole('table', { name: 'Network interfaces' })
+  await expectRowVisible(table, { name: 'nic-1', 'Private IP': '1.2.3.4' })
 })
 
 test('can create a NIC with a blank IP address', async ({ page }) => {
@@ -74,5 +75,6 @@ test('can create a NIC with a blank IP address', async ({ page }) => {
   await expect(sidebar).toBeHidden()
 
   // ip address is auto-assigned
-  await expectRowVisible(page.getByRole('table'), { name: 'nic-2', ip: '123.45.68.8' })
+  const table = page.getByRole('table', { name: 'Network interfaces' })
+  await expectRowVisible(table, { name: 'nic-2', 'Private IP': '123.45.68.8' })
 })