diff --git a/web/app/(app)/dashboard/(components)/message-history/sms-details-dialog.tsx b/web/app/(app)/dashboard/(components)/message-history/sms-details-dialog.tsx
index df96a7a..63cdd04 100644
--- a/web/app/(app)/dashboard/(components)/message-history/sms-details-dialog.tsx
+++ b/web/app/(app)/dashboard/(components)/message-history/sms-details-dialog.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, type ReactNode } from 'react'
+import { useState } from 'react'
 import {
   Dialog,
   DialogContent,
@@ -9,14 +9,8 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import {
-  ArrowDownLeft,
-  ArrowUpRight,
-  Copy,
-  MessageSquare,
-  Reply,
-} from 'lucide-react'
-import { toast } from '@/hooks/use-toast'
+import { ArrowDownLeft, ArrowUpRight, MessageSquare, Reply, Smartphone } from 'lucide-react'
+import { CopyButton } from '@/components/shared/copy-button'
 import { getStatusBadge } from './utils'
 import { messageDate, messageDirection } from './group'
 import { toExactLabel } from '@/components/shared/relative-time'
@@ -34,17 +28,9 @@ type SmsDetailsDialogProps = {
   fallbackDeviceId?: string
 }
 
-function Row({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <div className='grid grid-cols-[7rem_1fr] gap-x-4 py-1.5'>
-      <dt className='text-muted-foreground'>{label}</dt>
-      <dd className='min-w-0 break-words'>{children}</dd>
-    </div>
-  )
-}
-
 // Ordered by what people open this for: the message itself first, then the
-// metadata that explains it.
+// few facts that explain it. Copy actions sit next to the thing they copy,
+// rather than a single footer button whose target had to be inferred.
 export default function SmsDetailsDialog({
   message,
   open,
@@ -61,19 +47,17 @@ export default function SmsDetailsDialog({
     : message.sender || 'Unknown'
   const date = messageDate(message)
   const composerDeviceId = message.device?._id || fallbackDeviceId
-
-  const handleCopyMessage = () => {
-    if (message?.message) {
-      navigator.clipboard.writeText(message.message)
-      toast({ title: 'Message copied to clipboard!' })
-    }
-  }
+  const deviceName = [message.device?.brand, message.device?.model]
+    .filter(Boolean)
+    .join(' ')
 
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className='sm:max-w-[550px]'>
-          <DialogHeader>
+        <DialogContent className='sm:max-w-[540px]'>
+          {/* text-left overrides the primitive's mobile centring, which left
+              the title on the left and the date centred under it. */}
+          <DialogHeader className='pr-8 text-left'>
             <DialogTitle className='flex items-center gap-2 text-base'>
               <span
                 className={cn(
@@ -93,6 +77,11 @@ export default function SmsDetailsDialog({
               <span className='min-w-0 truncate'>
                 {isSent ? 'To' : 'From'} {counterparty}
               </span>
+              <CopyButton
+                value={counterparty}
+                label='Number'
+                className='h-7 w-7'
+              />
             </DialogTitle>
             {/* Exact time as text: the hover tooltip in the list is not
                 reachable on touch. */}
@@ -102,40 +91,55 @@ export default function SmsDetailsDialog({
           </DialogHeader>
 
           {/* The message body leads: it is the reason this dialog is open. */}
-          <div className='max-h-56 overflow-y-auto whitespace-pre-wrap break-words rounded-lg bg-muted p-3 text-sm'>
-            {message.message}
+          <div className='relative'>
+            <div className='max-h-56 overflow-y-auto whitespace-pre-wrap break-words rounded-lg bg-muted p-3 pr-11 text-sm'>
+              {message.message}
+            </div>
+            <CopyButton
+              value={message.message ?? ''}
+              label='Message'
+              className='absolute right-1.5 top-1.5 h-7 w-7 bg-background/70 backdrop-blur hover:bg-background'
+            />
           </div>
 
-          <dl className='divide-y divide-border text-sm'>
-            <Row label='Status'>
-              <span
-                className={cn(
-                  'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
-                  statusBadge.color
-                )}
-              >
-                {statusBadge.icon}
-                {statusBadge.label}
+          {/* Facts as chips rather than a label/value table: direction and
+              number were already in the header, so the table mostly repeated
+              itself. */}
+          <div className='flex flex-wrap items-center gap-2 text-xs'>
+            <span
+              className={cn(
+                'inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium',
+                statusBadge.color
+              )}
+            >
+              {statusBadge.icon}
+              {statusBadge.label}
+            </span>
+
+            {deviceName && (
+              <span className='inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-muted-foreground'>
+                <Smartphone className='h-3 w-3' />
+                {deviceName}
               </span>
-            </Row>
-            <Row label='Direction'>{isSent ? 'Sent' : 'Received'}</Row>
-            <Row label='Number'>{counterparty}</Row>
-            <Row label='Device'>
-              {message.device?.brand || message.device?.model
-                ? `${message.device?.brand ?? ''} ${message.device?.model ?? ''}`.trim()
-                : 'Not recorded'}
-            </Row>
+            )}
+
             {message.gatewayMessageId && (
-              <Row label='Gateway ID'>
-                <span className='font-mono text-xs'>
+              <span className='inline-flex min-w-0 items-center gap-1 rounded-full bg-muted py-0.5 pl-2.5 pr-0.5 text-muted-foreground'>
+                <span className='shrink-0'>ID</span>
+                <span className='truncate font-mono'>
                   {message.gatewayMessageId}
                 </span>
-              </Row>
+                <CopyButton
+                  value={message.gatewayMessageId}
+                  label='Gateway ID'
+                  className='h-6 w-6'
+                />
+              </span>
             )}
-          </dl>
+          </div>
 
           {(message.errorCode || message.errorMessage) && (
-            <div className='space-y-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3'>
+            <div className='space-y-1.5 rounded-lg border border-destructive/30 bg-destructive/5 p-3'>
               <p className='text-sm font-medium text-destructive'>
                 Delivery failed
               </p>
@@ -152,16 +156,7 @@ export default function SmsDetailsDialog({
             </div>
           )}
 
-          <div className='flex flex-col gap-2 sm:flex-row sm:justify-end'>
-            <Button
-              variant='outline'
-              size='sm'
-              className='w-full sm:w-auto'
-              onClick={handleCopyMessage}
-            >
-              <Copy className='h-4 w-4' />
-              Copy text
-            </Button>
+          <div className='flex justify-end'>
             {isSent ? (
               <Button
                 size='sm'
diff --git a/web/components/shared/copy-button.tsx b/web/components/shared/copy-button.tsx
index d8ef6f3..b53062d 100644
--- a/web/components/shared/copy-button.tsx
+++ b/web/components/shared/copy-button.tsx
@@ -1,50 +1,57 @@
-"use client";
+'use client'
 
-import { Button } from "@/components/ui/button";
-import { Check, Copy } from "lucide-react";
-import { useState } from "react";
-import { useToast } from "@/hooks/use-toast";
+import { Button } from '@/components/ui/button'
+import { Check, Copy } from 'lucide-react'
+import { useState } from 'react'
+import { useToast } from '@/hooks/use-toast'
+import { cn } from '@/lib/utils'
 
 interface CopyButtonProps {
-  value: string;
-  label: string;
-  className?: string;
+  value: string
+  /** What is being copied, e.g. "Message". Names the button for assistive tech. */
+  label: string
+  className?: string
 }
 
 export function CopyButton({ value, label, className }: CopyButtonProps) {
-  const [copied, setCopied] = useState(false);
-  const { toast } = useToast();
+  const [copied, setCopied] = useState(false)
+  const { toast } = useToast()
 
   const copyToClipboard = async () => {
     try {
-      await navigator.clipboard.writeText(value);
-      setCopied(true);
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
       toast({
-        title: "Copied!",
+        title: 'Copied!',
         description: `${label} copied to clipboard`,
-      });
-      setTimeout(() => setCopied(false), 2000);
+      })
+      setTimeout(() => setCopied(false), 2000)
     } catch (err) {
       toast({
-        title: "Failed to copy",
-        description: "Please try again",
-        variant: "destructive",
-      });
+        title: 'Failed to copy',
+        description: 'Please try again',
+        variant: 'destructive',
+      })
     }
-  };
+  }
 
   return (
     <Button
-      variant="ghost"
-      size="icon"
-      className={className}
+      type='button'
+      variant='ghost'
+      size='icon'
+      // Icon-only buttons carried no accessible name, so several of them in
+      // one view were indistinguishable to a screen reader.
+      aria-label={`Copy ${label.toLowerCase()}`}
+      title={`Copy ${label.toLowerCase()}`}
+      className={cn('shrink-0', className)}
       onClick={copyToClipboard}
     >
       {copied ? (
-        <Check className="h-4 w-4 text-green-500" />
+        <Check className='h-4 w-4 text-green-600 dark:text-green-400' />
       ) : (
-        <Copy className="h-4 w-4" />
+        <Copy className='h-4 w-4' />
       )}
     </Button>
-  );
-}
\ No newline at end of file
+  )
+}
diff --git a/web/e2e/message-history.spec.ts b/web/e2e/message-history.spec.ts
index cc14f04..2724274 100644
--- a/web/e2e/message-history.spec.ts
+++ b/web/e2e/message-history.spec.ts
@@ -187,6 +187,52 @@ test.describe('message history (mocked API, no real backend)', () => {
     await expect(dialog.getByText(/\d{4} at \d{1,2}:\d{2}/)).toBeVisible()
   })
 
+  test('each detail field copies its own value', async ({ page, context }) => {
+    await authenticate(context)
+    await mockApi(page)
+    await context.grantPermissions(['clipboard-read', 'clipboard-write'])
+
+    await page.route('**/api/v1/gateway/devices/*/messages*', (route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          data: [
+            {
+              _id: 'copy_1',
+              recipient: '+15557654321',
+              message: 'Copy me exactly',
+              status: 'delivered',
+              type: 'sent',
+              gatewayMessageId: '665f1c2a9b1e4a0012ab34cd',
+              device: { _id: 'device_1', brand: 'Google', model: 'Pixel 8' },
+              requestedAt: new Date().toISOString(),
+              createdAt: new Date().toISOString(),
+            },
+          ],
+          meta: { total: 1, page: 1, limit: 20, totalPages: 1 },
+        }),
+      })
+    )
+
+    await page.goto('/dashboard/messaging/history')
+    await page.getByRole('button', { name: /Copy me exactly/ }).click()
+
+    const dialog = page.getByRole('dialog')
+    const read = () => page.evaluate(() => navigator.clipboard.readText())
+
+    // One button per field, each named for what it copies, replacing a single
+    // footer "Copy text" whose target had to be inferred.
+    await dialog.getByRole('button', { name: 'Copy number' }).click()
+    expect(await read()).toBe('+15557654321')
+
+    await dialog.getByRole('button', { name: 'Copy message' }).click()
+    expect(await read()).toBe('Copy me exactly')
+
+    await dialog.getByRole('button', { name: 'Copy gateway ID' }).click()
+    expect(await read()).toBe('665f1c2a9b1e4a0012ab34cd')
+  })
+
   test('replying from a received message keeps a device selected', async ({
     page,
     context,