diff --git a/app/components/form/fields/DisksTableField.tsx b/app/components/form/fields/DisksTableField.tsx
index 6a78ce9f6a..e5af57ff36 100644
--- a/app/components/form/fields/DisksTableField.tsx
+++ b/app/components/form/fields/DisksTableField.tsx
@@ -13,16 +13,15 @@ import type { DiskCreate } from '@oxide/api'
 import { AttachDiskModalForm } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import type { InstanceCreateInput } from '~/forms/instance-create'
-import { EmptyCell } from '~/table/cells/EmptyCell'
+import { sizeCellInner } from '~/table/columns/common'
 import { Badge } from '~/ui/lib/Badge'
 import { Button } from '~/ui/lib/Button'
-import * as MiniTable from '~/ui/lib/MiniTable'
+import { MiniTable } from '~/ui/lib/MiniTable'
 import { Truncate } from '~/ui/lib/Truncate'
-import { bytesToGiB } from '~/util/units'
 
 export type DiskTableItem =
   | (DiskCreate & { type: 'create' })
-  | { name: string; type: 'attach' }
+  | { name: string; type: 'attach'; size: number }
 
 /**
  * Designed less for reuse, more to encapsulate logic that would otherwise
@@ -47,54 +46,28 @@ export function DisksTableField({
   return (
     <>
       <div className="flex max-w-lg flex-col items-end gap-3">
-        <MiniTable.Table aria-label="Disks">
-          <MiniTable.Header>
-            <MiniTable.HeadCell>Name</MiniTable.HeadCell>
-            <MiniTable.HeadCell>Type</MiniTable.HeadCell>
-            <MiniTable.HeadCell>Size</MiniTable.HeadCell>
-            {/* For remove button */}
-            <MiniTable.HeadCell />
-          </MiniTable.Header>
-          <MiniTable.Body>
-            {items.length ? (
-              items.map((item, index) => (
-                <MiniTable.Row
-                  tabIndex={0}
-                  aria-rowindex={index + 1}
-                  aria-label={`Name: ${item.name}, Type: ${item.type}`}
-                  key={item.name}
-                >
-                  <MiniTable.Cell>
-                    <Truncate text={item.name} maxLength={35} />
-                  </MiniTable.Cell>
-                  <MiniTable.Cell>
-                    <Badge>{item.type}</Badge>
-                  </MiniTable.Cell>
-                  <MiniTable.Cell>
-                    {item.type === 'attach' ? (
-                      <EmptyCell />
-                    ) : (
-                      <>
-                        <span>{bytesToGiB(item.size)}</span>
-                        <span className="ml-1 inline-block text-tertiary">GiB</span>
-                      </>
-                    )}
-                  </MiniTable.Cell>
-                  <MiniTable.RemoveCell
-                    onClick={() => onChange(items.filter((i) => i.name !== item.name))}
-                    label={`remove disk ${item.name}`}
-                  />
-                </MiniTable.Row>
-              ))
-            ) : (
-              <MiniTable.EmptyState
-                title="No disks"
-                body="Add a disk to see it here"
-                colSpan={4}
-              />
-            )}
-          </MiniTable.Body>
-        </MiniTable.Table>
+        <MiniTable
+          ariaLabel="Disks"
+          items={items}
+          columns={[
+            {
+              header: 'Name',
+              cell: (item) => <Truncate text={item.name} maxLength={35} />,
+            },
+            {
+              header: 'Type',
+              cell: (item) => <Badge>{item.type}</Badge>,
+            },
+            {
+              header: 'Size',
+              cell: (item) => sizeCellInner(item.size),
+            },
+          ]}
+          rowKey={(item) => item.name}
+          onRemoveItem={(item) => onChange(items.filter((i) => i.name !== item.name))}
+          removeLabel={(item) => `Remove disk ${item.name}`}
+          emptyState={{ title: 'No disks', body: 'Add a disk to see it here' }}
+        />
 
         <div className="space-x-3">
           <Button size="sm" onClick={() => setShowDiskCreate(true)} disabled={disabled}>
@@ -124,8 +97,8 @@ export function DisksTableField({
       {showDiskAttach && (
         <AttachDiskModalForm
           onDismiss={() => setShowDiskAttach(false)}
-          onSubmit={(values) => {
-            onChange([...items, { type: 'attach', ...values }])
+          onSubmit={({ name, size }: { name: string; size: number }) => {
+            onChange([...items, { type: 'attach', name, size } satisfies DiskTableItem])
             setShowDiskAttach(false)
           }}
           diskNamesToExclude={items.filter((i) => i.type === 'attach').map((i) => i.name)}
diff --git a/app/components/form/fields/NetworkInterfaceField.tsx b/app/components/form/fields/NetworkInterfaceField.tsx
index 7bdae2f57c..3de33ddbed 100644
--- a/app/components/form/fields/NetworkInterfaceField.tsx
+++ b/app/components/form/fields/NetworkInterfaceField.tsx
@@ -17,7 +17,7 @@ import type { InstanceCreateInput } from '~/forms/instance-create'
 import { CreateNetworkInterfaceForm } from '~/forms/network-interface-create'
 import { Button } from '~/ui/lib/Button'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
-import * as MiniTable from '~/ui/lib/MiniTable'
+import { MiniTable } from '~/ui/lib/MiniTable'
 import { Radio } from '~/ui/lib/Radio'
 import { RadioGroup } from '~/ui/lib/RadioGroup'
 
@@ -75,40 +75,24 @@ export function NetworkInterfaceField({
         </RadioGroup>
         {value.type === 'create' && (
           <>
-            {value.params.length > 0 && (
-              <MiniTable.Table className="pt-2">
-                <MiniTable.Header>
-                  <MiniTable.HeadCell>Name</MiniTable.HeadCell>
-                  <MiniTable.HeadCell>VPC</MiniTable.HeadCell>
-                  <MiniTable.HeadCell>Subnet</MiniTable.HeadCell>
-                  {/* For remove button */}
-                  <MiniTable.HeadCell className="w-12" />
-                </MiniTable.Header>
-                <MiniTable.Body>
-                  {value.params.map((item, index) => (
-                    <MiniTable.Row
-                      tabIndex={0}
-                      aria-rowindex={index + 1}
-                      aria-label={`Name: ${item.name}, Vpc: ${item.vpcName}, Subnet: ${item.subnetName}`}
-                      key={item.name}
-                    >
-                      <MiniTable.Cell>{item.name}</MiniTable.Cell>
-                      <MiniTable.Cell>{item.vpcName}</MiniTable.Cell>
-                      <MiniTable.Cell>{item.subnetName}</MiniTable.Cell>
-                      <MiniTable.RemoveCell
-                        onClick={() =>
-                          onChange({
-                            type: 'create',
-                            params: value.params.filter((i) => i.name !== item.name),
-                          })
-                        }
-                        label={`remove network interface ${item.name}`}
-                      />
-                    </MiniTable.Row>
-                  ))}
-                </MiniTable.Body>
-              </MiniTable.Table>
-            )}
+            <MiniTable
+              className="pt-2"
+              ariaLabel="Network Interfaces"
+              items={value.params}
+              columns={[
+                { header: 'Name', cell: (item) => item.name },
+                { header: 'VPC', cell: (item) => item.vpcName },
+                { header: 'Subnet', cell: (item) => item.subnetName },
+              ]}
+              rowKey={(item) => item.name}
+              onRemoveItem={(item) =>
+                onChange({
+                  type: 'create',
+                  params: value.params.filter((i) => i.name !== item.name),
+                })
+              }
+              removeLabel={(item) => `remove network interface ${item.name}`}
+            />
 
             {showForm && (
               <CreateNetworkInterfaceForm
diff --git a/app/components/form/fields/TlsCertsField.tsx b/app/components/form/fields/TlsCertsField.tsx
index 39cffa5d3e..824f986121 100644
--- a/app/components/form/fields/TlsCertsField.tsx
+++ b/app/components/form/fields/TlsCertsField.tsx
@@ -14,7 +14,7 @@ import type { CertificateCreate } from '@oxide/api'
 import type { SiloCreateFormValues } from '~/forms/silo-create'
 import { Button } from '~/ui/lib/Button'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
-import * as MiniTable from '~/ui/lib/MiniTable'
+import { MiniTable } from '~/ui/lib/MiniTable'
 import { Modal } from '~/ui/lib/Modal'
 
 import { DescriptionField } from './DescriptionField'
@@ -46,31 +46,15 @@ export function TlsCertsField({ control }: { control: Control<SiloCreateFormValu
         <FieldLabel id="tls-certificates-label" className="mb-3">
           TLS Certificates
         </FieldLabel>
-        {!!items.length && (
-          <MiniTable.Table className="mb-4">
-            <MiniTable.Header>
-              <MiniTable.HeadCell>Name</MiniTable.HeadCell>
-              {/* For remove button */}
-              <MiniTable.HeadCell className="w-12" />
-            </MiniTable.Header>
-            <MiniTable.Body>
-              {items.map((item, index) => (
-                <MiniTable.Row
-                  tabIndex={0}
-                  aria-rowindex={index + 1}
-                  aria-label={`Name: ${item.name}, Description: ${item.description}`}
-                  key={item.name}
-                >
-                  <MiniTable.Cell>{item.name}</MiniTable.Cell>
-                  <MiniTable.RemoveCell
-                    onClick={() => onChange(items.filter((i) => i.name !== item.name))}
-                    label={`remove cert ${item.name}`}
-                  />
-                </MiniTable.Row>
-              ))}
-            </MiniTable.Body>
-          </MiniTable.Table>
-        )}
+        <MiniTable
+          className="mb-4"
+          ariaLabel="TLS Certificates"
+          items={items}
+          columns={[{ header: 'Name', cell: (item) => item.name }]}
+          rowKey={(item) => item.name}
+          onRemoveItem={(item) => onChange(items.filter((i) => i.name !== item.name))}
+          removeLabel={(item) => `remove cert ${item.name}`}
+        />
 
         {/* ref on button element allows scrollTo to work when the form has a "missing TLS cert" error */}
         <Button size="sm" onClick={() => setShowAddCert(true)} ref={ref}>
diff --git a/app/forms/disk-attach.tsx b/app/forms/disk-attach.tsx
index f3f07d841a..b35f42735e 100644
--- a/app/forms/disk-attach.tsx
+++ b/app/forms/disk-attach.tsx
@@ -20,7 +20,7 @@ const defaultValues = { name: '' }
 
 type AttachDiskProps = {
   /** If defined, this overrides the usual mutation */
-  onSubmit: (diskAttach: { name: string }) => void
+  onSubmit: (diskAttach: { name: string; size: number }) => void
   onDismiss: () => void
   diskNamesToExclude?: string[]
   loading?: boolean
@@ -64,7 +64,13 @@ export function AttachDiskModalForm({
       submitError={submitError}
       loading={loading}
       title="Attach disk"
-      onSubmit={onSubmit}
+      onSubmit={({ name }) => {
+        // because the ComboboxField is required and does not allow arbitrary
+        // values (values not in the list of disks), we can only get here if the
+        // disk is defined and in the list
+        const disk = data!.items.find((d) => d.name === name)!
+        onSubmit({ name, size: disk.size })
+      }}
     >
       <ComboboxField
         label="Disk name"
diff --git a/app/forms/firewall-rules-common.tsx b/app/forms/firewall-rules-common.tsx
index aefc29fb11..0e1698b2a9 100644
--- a/app/forms/firewall-rules-common.tsx
+++ b/app/forms/firewall-rules-common.tsx
@@ -33,7 +33,7 @@ import { toComboboxItems } from '~/ui/lib/Combobox'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Message } from '~/ui/lib/Message'
-import * as MiniTable from '~/ui/lib/MiniTable'
+import { ClearAndAddButtons, MiniTable } from '~/ui/lib/MiniTable'
 import { SideModal } from '~/ui/lib/SideModal'
 import { TextInputHint } from '~/ui/lib/TextInput'
 import { KEYS } from '~/ui/util/keys'
@@ -148,11 +148,12 @@ const TargetAndHostFilterSubform = ({
     subform.setValue('value', value)
   }
 
+  const noun = sectionType === 'target' ? 'target' : 'host filter'
+  const nounTitle = capitalize(noun) + 's'
+
   return (
     <>
-      <SideModal.Heading>
-        {sectionType === 'target' ? 'Targets' : 'Host filters'}
-      </SideModal.Heading>
+      <SideModal.Heading>{nounTitle}</SideModal.Heading>
 
       <Message variant="info" content={messageContent} />
       <ListboxField
@@ -209,48 +210,25 @@ const TargetAndHostFilterSubform = ({
           }
         />
       )}
-      <MiniTable.ClearAndAddButtons
-        addButtonCopy={`Add ${sectionType === 'host' ? 'host filter' : 'target'}`}
+      <ClearAndAddButtons
+        addButtonCopy={`Add ${noun}`}
         disabled={!value}
         onClear={() => subform.reset()}
         onSubmit={submitSubform}
       />
-      {field.value.length > 0 && (
-        <MiniTable.Table
-          className="mb-4"
-          aria-label={sectionType === 'target' ? 'Targets' : 'Host filters'}
-        >
-          <MiniTable.Header>
-            <MiniTable.HeadCell>Type</MiniTable.HeadCell>
-            <MiniTable.HeadCell>Value</MiniTable.HeadCell>
-            {/* For remove button */}
-            <MiniTable.HeadCell className="w-12" />
-          </MiniTable.Header>
-          <MiniTable.Body>
-            {field.value.map(({ type, value }, index) => (
-              <MiniTable.Row
-                tabIndex={0}
-                aria-rowindex={index + 1}
-                aria-label={`Name: ${value}, Type: ${type}`}
-                key={`${type}|${value}`}
-              >
-                <MiniTable.Cell>
-                  <Badge>{type}</Badge>
-                </MiniTable.Cell>
-                <MiniTable.Cell>{value}</MiniTable.Cell>
-                <MiniTable.RemoveCell
-                  onClick={() =>
-                    field.onChange(
-                      field.value.filter((i) => !(i.value === value && i.type === type))
-                    )
-                  }
-                  label={`remove ${sectionType} ${value}`}
-                />
-              </MiniTable.Row>
-            ))}
-          </MiniTable.Body>
-        </MiniTable.Table>
-      )}
+      <MiniTable
+        className="mb-4"
+        ariaLabel={nounTitle}
+        items={field.value}
+        columns={[
+          { header: 'Type', cell: (item) => <Badge>{item.type}</Badge> },
+          { header: 'Value', cell: (item) => item.value },
+        ]}
+        rowKey={({ type, value }) => `${type}|${value}`}
+        onRemoveItem={({ type, value }) => {
+          field.onChange(field.value.filter((i) => !(i.value === value && i.type === type)))
+        }}
+      />
     </>
   )
 }
@@ -450,7 +428,7 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
             }}
           />
         </div>
-        <MiniTable.ClearAndAddButtons
+        <ClearAndAddButtons
           addButtonCopy="Add port filter"
           disabled={!portValue}
           onClear={() => portRangeForm.reset()}
@@ -458,24 +436,16 @@ export const CommonFields = ({ control, nameTaken, error }: CommonFieldsProps) =
         />
       </div>
       {ports.value.length > 0 && (
-        <MiniTable.Table className="mb-4" aria-label="Port filters">
-          <MiniTable.Header>
-            <MiniTable.HeadCell>Port ranges</MiniTable.HeadCell>
-            {/* For remove button */}
-            <MiniTable.HeadCell className="w-12" />
-          </MiniTable.Header>
-          <MiniTable.Body>
-            {ports.value.map((p) => (
-              <MiniTable.Row tabIndex={0} aria-label={p} key={p}>
-                <MiniTable.Cell>{p}</MiniTable.Cell>
-                <MiniTable.RemoveCell
-                  onClick={() => ports.onChange(ports.value.filter((p1) => p1 !== p))}
-                  label={`remove port ${p}`}
-                />
-              </MiniTable.Row>
-            ))}
-          </MiniTable.Body>
-        </MiniTable.Table>
+        <MiniTable
+          className="mb-4"
+          ariaLabel="Port filters"
+          items={ports.value}
+          columns={[{ header: 'Port ranges', cell: (p) => p }]}
+          rowKey={(port) => port}
+          emptyState={{ title: 'No ports', body: 'Add a port to see it here' }}
+          onRemoveItem={(p) => ports.onChange(ports.value.filter((p1) => p1 !== p))}
+          removeLabel={(port) => `remove port ${port}`}
+        />
       )}
 
       <fieldset className="space-y-0.5">
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index 281aabc484..5415e5de07 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -67,7 +67,7 @@ import { FormDivider } from '~/ui/lib/Divider'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { Listbox } from '~/ui/lib/Listbox'
 import { Message } from '~/ui/lib/Message'
-import * as MiniTable from '~/ui/lib/MiniTable'
+import { MiniTable } from '~/ui/lib/MiniTable'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { RadioCard } from '~/ui/lib/Radio'
@@ -694,8 +694,6 @@ const AdvancedAccordion = ({
     )
   }
 
-  const isFloatingIpAttached = attachedFloatingIps.some((ip) => ip.floatingIp !== '')
-
   const selectedFloatingIpMessage = (
     <>
       This instance will be reachable at{' '}
@@ -786,40 +784,18 @@ const AdvancedAccordion = ({
               />
             </div>
           ) : (
-            <div className="flex flex-col items-end gap-3">
-              <MiniTable.Table>
-                <MiniTable.Header>
-                  <MiniTable.HeadCell>Name</MiniTable.HeadCell>
-                  <MiniTable.HeadCell>IP</MiniTable.HeadCell>
-                  {/* For remove button */}
-                  <MiniTable.HeadCell className="w-12" />
-                </MiniTable.Header>
-                <MiniTable.Body>
-                  {isFloatingIpAttached ? (
-                    attachedFloatingIpsData.map((item, index) => (
-                      <MiniTable.Row
-                        tabIndex={0}
-                        aria-rowindex={index + 1}
-                        aria-label={`Name: ${item.name}, IP: ${item.ip}`}
-                        key={item.name}
-                      >
-                        <MiniTable.Cell>{item.name}</MiniTable.Cell>
-                        <MiniTable.Cell>{item.ip}</MiniTable.Cell>
-                        <MiniTable.RemoveCell
-                          onClick={() => detachFloatingIp(item.name)}
-                          label={`remove floating IP ${item.name}`}
-                        />
-                      </MiniTable.Row>
-                    ))
-                  ) : (
-                    <MiniTable.EmptyState
-                      title="No floating IPs attached"
-                      body="Attach a floating IP to see it here"
-                      colSpan={3}
-                    />
-                  )}
-                </MiniTable.Body>
-              </MiniTable.Table>
+            <div className="flex flex-col items-start gap-3">
+              <MiniTable
+                ariaLabel="Floating IPs"
+                items={attachedFloatingIpsData}
+                columns={[
+                  { header: 'Name', cell: (item) => item.name },
+                  { header: 'IP', cell: (item) => item.ip },
+                ]}
+                rowKey={(item) => item.name}
+                onRemoveItem={(item) => detachFloatingIp(item.name)}
+                removeLabel={(item) => `remove floating IP ${item.name}`}
+              />
               <Button
                 variant="secondary"
                 size="sm"
diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx
index 78c0f53065..f0cd11e63d 100644
--- a/app/forms/network-interface-edit.tsx
+++ b/app/forms/network-interface-edit.tsx
@@ -25,7 +25,7 @@ import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
-import * as MiniTable from '~/ui/lib/MiniTable'
+import { ClearAndAddButtons, MiniTable } from '~/ui/lib/MiniTable'
 import { TextInputHint } from '~/ui/lib/TextInput'
 import { KEYS } from '~/ui/util/keys'
 import { validateIpNet } from '~/util/ip'
@@ -126,43 +126,27 @@ export function EditNetworkInterfaceForm({
             placeholder="Enter an IP network"
           />
         </div>
-        <MiniTable.ClearAndAddButtons
+        <ClearAndAddButtons
           addButtonCopy="Add Transit IP"
           disabled={!transitIpValue}
           onClear={() => transitIpsForm.reset()}
           onSubmit={submitTransitIp}
         />
       </div>
-      {transitIps.length > 0 && (
-        <MiniTable.Table className="mb-4" aria-label="Transit IPs">
-          <MiniTable.Header>
-            <MiniTable.HeadCell>Transit IPs</MiniTable.HeadCell>
-            {/* For remove button */}
-            <MiniTable.HeadCell className="w-12" />
-          </MiniTable.Header>
-          <MiniTable.Body>
-            {transitIps.map((ip, index) => (
-              <MiniTable.Row
-                tabIndex={0}
-                aria-rowindex={index + 1}
-                aria-label={ip}
-                key={ip}
-              >
-                <MiniTable.Cell>{ip}</MiniTable.Cell>
-                <MiniTable.RemoveCell
-                  label={`remove IP ${ip}`}
-                  onClick={() => {
-                    form.setValue(
-                      'transitIps',
-                      transitIps.filter((item) => item !== ip)
-                    )
-                  }}
-                />
-              </MiniTable.Row>
-            ))}
-          </MiniTable.Body>
-        </MiniTable.Table>
-      )}
+      <MiniTable
+        className="mb-4"
+        ariaLabel="Transit IPs"
+        items={transitIps}
+        columns={[{ header: 'Transit IPs', cell: (ip) => ip }]}
+        rowKey={(ip) => ip}
+        onRemoveItem={(ip) => {
+          form.setValue(
+            'transitIps',
+            transitIps.filter((item) => item !== ip)
+          )
+        }}
+        removeLabel={(ip) => `remove IP ${ip}`}
+      />
     </SideModalForm>
   )
 }
diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index 21c368f3cb..e6cb831039 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -38,8 +38,9 @@ function instanceStateCell(info: Info<InstanceState>) {
   return <InstanceStateBadge state={info.getValue()} />
 }
 
-function sizeCell(info: Info<number>) {
-  const size = filesize(info.getValue(), { base: 2, output: 'object' })
+// not using Info<number> so this can also be used for minitables
+export function sizeCellInner(value: number) {
+  const size = filesize(value, { base: 2, output: 'object' })
   return (
     <span className="text-default">
       {size.value} <span className="text-tertiary">{size.unit}</span>
@@ -55,7 +56,7 @@ export const Columns = {
   },
   id: { header: 'ID', cell: idCell },
   instanceState: { header: 'state', cell: instanceStateCell },
-  size: { cell: sizeCell },
+  size: { cell: (info: Info<number>) => sizeCellInner(info.getValue()) },
   timeCreated: { header: 'created', cell: dateCell },
   timeModified: { header: 'modified', cell: dateCell },
 }
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 601fe99d7b..18e31fc0f4 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -15,21 +15,21 @@ import { Table as BigTable } from './Table'
 
 type Children = { children: React.ReactNode }
 
-export const Table = classed.table`ox-mini-table w-full border-separate text-sans-md`
+const Table = classed.table`ox-mini-table w-full border-separate text-sans-md`
 
-export const Header = ({ children }: Children) => (
+const Header = ({ children }: Children) => (
   <BigTable.Header>
     <BigTable.HeaderRow>{children}</BigTable.HeaderRow>
   </BigTable.Header>
 )
 
-export const HeadCell = BigTable.HeadCell
+const HeadCell = BigTable.HeadCell
 
-export const Body = classed.tbody``
+const Body = classed.tbody``
 
-export const Row = classed.tr`is-selected children:border-default first:children:border-l children:last:border-b last:children:border-r`
+const Row = classed.tr`is-selected children:border-default first:children:border-l children:last:border-b last:children:border-r`
 
-export const Cell = ({ children }: Children) => {
+const Cell = ({ children }: Children) => {
   return (
     <td>
       <div>{children}</div>
@@ -37,7 +37,7 @@ export const Cell = ({ children }: Children) => {
   )
 }
 
-export const EmptyState = (props: { title: string; body: string; colSpan: number }) => (
+const EmptyState = (props: { title: string; body: string; colSpan: number }) => (
   <Row>
     <td colSpan={props.colSpan}>
       <div className="!m-0 !w-full !flex-col !border-none !bg-transparent !py-14">
@@ -70,7 +70,7 @@ export const InputCell = ({
 
 // followed this for icon in button best practices
 // https://www.sarasoueidan.com/blog/accessible-icon-buttons/
-export const RemoveCell = ({ onClick, label }: { onClick: () => void; label: string }) => (
+const RemoveCell = ({ onClick, label }: { onClick: () => void; label: string }) => (
   <Cell>
     <button type="button" onClick={onClick} aria-label={label}>
       <Error16Icon aria-hidden focusable="false" />
@@ -104,3 +104,71 @@ export const ClearAndAddButtons = ({
     </Button>
   </div>
 )
+
+type Column<T> = {
+  header: string
+  cell: (item: T, index: number) => React.ReactNode
+}
+
+type MiniTableProps<T> = {
+  ariaLabel: string
+  items: T[]
+  columns: Column<T>[]
+  rowKey: (item: T, index: number) => string
+  onRemoveItem: (item: T) => void
+  removeLabel?: (item: T) => string
+  /**
+   * If empty state is not provided, the entire table will disappear when items
+   * is empty
+   */
+  emptyState?: { title: string; body: string }
+  className?: string
+}
+
+/** If `emptyState` is left out, `MiniTable` renders null when `items` is empty. */
+export function MiniTable<T>({
+  ariaLabel,
+  items,
+  columns,
+  rowKey,
+  onRemoveItem,
+  removeLabel,
+  emptyState,
+  className,
+}: MiniTableProps<T>) {
+  if (!emptyState && items.length === 0) return null
+
+  return (
+    <Table aria-label={ariaLabel} className={className}>
+      <Header>
+        {columns.map((column, index) => (
+          <HeadCell key={index}>{column.header}</HeadCell>
+        ))}
+        <HeadCell /> {/* For remove button */}
+      </Header>
+
+      <Body>
+        {items.length ? (
+          items.map((item, index) => (
+            <Row tabIndex={0} aria-rowindex={index + 1} key={rowKey(item, index)}>
+              {columns.map((column, colIndex) => (
+                <Cell key={colIndex}>{column.cell(item, index)}</Cell>
+              ))}
+
+              <RemoveCell
+                onClick={() => onRemoveItem(item)}
+                label={removeLabel?.(item) || `Remove item ${index + 1}`}
+              />
+            </Row>
+          ))
+        ) : emptyState ? (
+          <EmptyState
+            title={emptyState.title}
+            body={emptyState.body}
+            colSpan={columns.length + 1}
+          />
+        ) : null}
+      </Body>
+    </Table>
+  )
+}
diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index 5bbcc717bc..3bf03222fa 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -2,7 +2,7 @@
  * 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
  */
 
@@ -28,6 +28,10 @@
     content: ' ';
   }
 
+  & tr td:last-child:before {
+    @apply hidden;
+  }
+
   & tr:last-child td + td:before {
     @apply bottom-[calc(0.5rem+2px)];
   }
diff --git a/package-lock.json b/package-lock.json
index 74dd734ce7..73524f7779 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -57,7 +57,7 @@
         "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
         "@mswjs/http-middleware": "^0.10.3",
         "@oxide/openapi-gen-ts": "~0.7.0",
-        "@playwright/test": "^1.52.0",
+        "@playwright/test": "^1.53.1",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
@@ -1758,13 +1758,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
-      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
+      "version": "1.53.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.53.1.tgz",
+      "integrity": "sha512-Z4c23LHV0muZ8hfv4jw6HngPJkbbtZxTkxPNIg7cJcTc9C28N/p2q7g3JZS2SiKBBHJ3uM1dgDye66bB7LEk5w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.52.0"
+        "playwright": "1.53.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -11298,13 +11298,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
-      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
+      "version": "1.53.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.1.tgz",
+      "integrity": "sha512-LJ13YLr/ocweuwxyGf1XNFWIU4M2zUSo149Qbp+A4cpwDjsxRPj7k6H25LBrEHiEwxvRbD8HdwvQmRMSvquhYw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.52.0"
+        "playwright-core": "1.53.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -11317,9 +11317,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
-      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
+      "version": "1.53.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.1.tgz",
+      "integrity": "sha512-Z46Oq7tLAyT0lGoFx4DOuB1IA9D1TPj0QkYxpPVUnGDqHHvDpCftu1J2hM2PiWsNMoZh8+LQaarAWcDfPBc6zg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/package.json b/package.json
index f86d570968..65dde430ea 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@mswjs/http-middleware": "^0.10.3",
     "@oxide/openapi-gen-ts": "~0.7.0",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.53.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
diff --git a/test/e2e/firewall-rules.e2e.ts b/test/e2e/firewall-rules.e2e.ts
index 9ad4af8fd4..e62761ca4b 100644
--- a/test/e2e/firewall-rules.e2e.ts
+++ b/test/e2e/firewall-rules.e2e.ts
@@ -506,7 +506,7 @@ test('create from existing rule', async ({ page }) => {
   await expect(portFilters).toBeHidden()
 
   const targets = modal.getByRole('table', { name: 'Targets' })
-  await expect(targets.getByRole('row', { name: 'Name: default, Type: vpc' })).toBeVisible()
+  await expect(targets.getByRole('row', { name: 'vpc default' })).toBeVisible()
 
   // close the modal
   await page.keyboard.press('Escape')
@@ -526,7 +526,7 @@ test('create from existing rule', async ({ page }) => {
   await expect(modal.getByRole('checkbox', { name: 'UDP' })).not.toBeChecked()
   await expect(modal.getByRole('checkbox', { name: 'ICMP' })).not.toBeChecked()
 
-  await expect(targets.getByRole('row', { name: 'Name: default, Type: vpc' })).toBeVisible()
+  await expect(targets.getByRole('row', { name: 'vpc default' })).toBeVisible()
 })
 
 const rulePath = '/projects/mock-project/vpcs/mock-vpc/firewall-rules/allow-icmp/edit'
diff --git a/test/e2e/instance-create.e2e.ts b/test/e2e/instance-create.e2e.ts
index 9d9357b381..33bba89cca 100644
--- a/test/e2e/instance-create.e2e.ts
+++ b/test/e2e/instance-create.e2e.ts
@@ -583,7 +583,7 @@ test('create instance with additional disks', async ({ page }) => {
 
   const disksTable = page.getByRole('table', { name: 'Disks' })
   await expect(disksTable.getByText('disk-6')).toBeHidden()
-  await expectRowVisible(disksTable, { Name: 'new-disk-1', Type: 'create', Size: '5GiB' })
+  await expectRowVisible(disksTable, { Name: 'new-disk-1', Type: 'create', Size: '5 GiB' })
 
   // now that name is taken too, so disk create disallows it
   await page.getByRole('button', { name: 'Create new disk' }).click()
@@ -597,7 +597,7 @@ test('create instance with additional disks', async ({ page }) => {
   await selectOption(page, 'Disk name', 'disk-3')
   await page.getByRole('button', { name: 'Attach disk' }).click()
 
-  await expectRowVisible(disksTable, { Name: 'disk-3', Type: 'attach', Size: '—' })
+  await expectRowVisible(disksTable, { Name: 'disk-3', Type: 'attach', Size: '6 GiB' })
 
   // Create the instance
   await page.getByRole('button', { name: 'Create instance' }).click()