diff --git a/app/pages/project/instances/instance/InstancePage.tsx b/app/pages/project/instances/instance/InstancePage.tsx
index 890062f7ec..f36c8c289c 100644
--- a/app/pages/project/instances/instance/InstancePage.tsx
+++ b/app/pages/project/instances/instance/InstancePage.tsx
@@ -144,9 +144,7 @@ export function InstancePage() {
             </span>
           </PropertiesTable.Row>
           <PropertiesTable.Row label="external IP">
-            <span className="text-secondary">
-              {ExternalIpsFromInstanceName({ value: true })}
-            </span>
+            {ExternalIpsFromInstanceName({ value: true })}
           </PropertiesTable.Row>
         </PropertiesTable>
       </PropertiesTable.Group>
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
index 1a08115bd5..62983f15dc 100644
--- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
+++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx
@@ -21,6 +21,7 @@ import { useQueryTable, type MenuAction } from '@oxide/table'
 import {
   Badge,
   Button,
+  CopyToClipboard,
   EmptyMessage,
   Networking24Icon,
   Spinner,
@@ -101,7 +102,13 @@ export function ExternalIpsFromInstanceName({ value: primary }: { value: boolean
     </Fragment>
   ))
 
-  return <span className="text-secondary">{primary ? ips : <>&mdash;</>}</span>
+  return (
+    <div className="flex items-center gap-1 text-secondary">
+      {primary ? ips : <>&mdash;</>}
+      {/* If there's exactly one IP here, render a copy to clipboard button */}
+      {data?.items.length === 1 && <CopyToClipboard text={data.items[0].ip} />}
+    </div>
+  )
 }
 
 NetworkingTab.loader = async ({ params }: LoaderFunctionArgs) => {
diff --git a/libs/ui/lib/copy-to-clipboard/CopyToClipboard.tsx b/libs/ui/lib/copy-to-clipboard/CopyToClipboard.tsx
index c521346eaf..2979d73629 100644
--- a/libs/ui/lib/copy-to-clipboard/CopyToClipboard.tsx
+++ b/libs/ui/lib/copy-to-clipboard/CopyToClipboard.tsx
@@ -6,9 +6,11 @@
  * Copyright Oxide Computer Company
  */
 
+import { animated, config, useTransition } from '@react-spring/web'
+import cn from 'classnames'
 import { useState } from 'react'
 
-import { Clipboard16Icon, Success12Icon, useTimeout } from '@oxide/ui'
+import { Copy12Icon, Success12Icon, useTimeout } from '@oxide/ui'
 
 export const CopyToClipboard = ({
   ariaLabel = 'Click to copy this text',
@@ -27,18 +29,35 @@ export const CopyToClipboard = ({
     })
   }
 
+  const transitions = useTransition(hasCopied, {
+    from: { opacity: 0, transform: 'scale(0.8)' },
+    enter: { opacity: 1, transform: 'scale(1)' },
+    leave: { opacity: 0, transform: 'scale(0.8)' },
+    config: config.stiff,
+    trail: 100,
+    initial: null,
+  })
+
   return (
     <button
-      className="text-tertiary hover:text-accent-secondary"
+      className={cn(
+        'relative h-5 w-5 rounded',
+        hasCopied
+          ? 'text-accent bg-accent-secondary'
+          : 'text-quaternary hover:text-secondary hover:bg-hover'
+      )}
       onClick={handleCopy}
       type="button"
       aria-label={hasCopied ? 'Copied' : ariaLabel}
     >
-      {hasCopied ? (
-        <Success12Icon className="text-accent-secondary" />
-      ) : (
-        <Clipboard16Icon className="h-3 w-3" />
-      )}
+      {transitions((styles, item) => (
+        <animated.div
+          style={styles}
+          className="absolute inset-0 flex items-center justify-center"
+        >
+          {item ? <Success12Icon /> : <Copy12Icon />}
+        </animated.div>
+      ))}
     </button>
   )
 }
diff --git a/package-lock.json b/package-lock.json
index 24ded399aa..54b05e76a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
       "dependencies": {
         "@floating-ui/react": "^0.26.4",
         "@headlessui/react": "^1.7.17",
-        "@oxide/design-system": "^1.2.9",
+        "@oxide/design-system": "^1.2.10",
         "@oxide/identicon": "0.0.4",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -2543,9 +2543,9 @@
       "dev": true
     },
     "node_modules/@oxide/design-system": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.2.9.tgz",
-      "integrity": "sha512-uLKLFEmr7DTYXqTVhI1rdTRHR2x2tkkEGC2o2gzTse6fqvRxoKGAMhlWt2rMJMCI0hxgUIYuYPCaWO6/6smNBA==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.2.10.tgz",
+      "integrity": "sha512-L7KhX2rRYy/+QDnc7yW5ie/5IzmX+gCB8R6+zSjt7f+Za9oRkLHecw47KLUWr5lOTgJM4QaJubrlD0nUYb0cJw==",
       "dependencies": {
         "@figma-export/output-components-as-svgr": "^4.7.0",
         "@floating-ui/react": "^0.25.1",
@@ -23098,9 +23098,9 @@
       "dev": true
     },
     "@oxide/design-system": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.2.9.tgz",
-      "integrity": "sha512-uLKLFEmr7DTYXqTVhI1rdTRHR2x2tkkEGC2o2gzTse6fqvRxoKGAMhlWt2rMJMCI0hxgUIYuYPCaWO6/6smNBA==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-1.2.10.tgz",
+      "integrity": "sha512-L7KhX2rRYy/+QDnc7yW5ie/5IzmX+gCB8R6+zSjt7f+Za9oRkLHecw47KLUWr5lOTgJM4QaJubrlD0nUYb0cJw==",
       "requires": {
         "@figma-export/output-components-as-svgr": "^4.7.0",
         "@floating-ui/react": "^0.25.1",
diff --git a/package.json b/package.json
index e89b7671e7..a3a98d812f 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "@headlessui/react": "^1.7.17",
-    "@oxide/design-system": "^1.2.9",
+    "@oxide/design-system": "^1.2.10",
     "@oxide/identicon": "0.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",