diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx
index 7ef122899..cf84cb8e3 100644
--- a/src/components/Card/Card.stories.tsx
+++ b/src/components/Card/Card.stories.tsx
@@ -101,3 +101,30 @@ export const Clickable: Story = {
     onClick: () => console.log('Clicked!'),
   },
 }
+
+export const ClickableHover: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Hover a clickable card to surface the `border-hover` color swap.',
+      },
+    },
+  },
+  render: args => (
+    <div className="flex flex-col gap-4">
+      {(['default', 'outline', 'muted'] as const).map(variant => (
+        <Card key={variant} {...args} variant={variant} render={<button />}>
+          <CardHeader>
+            <CardTitle className="capitalize">{variant}</CardTitle>
+            <CardDescription>Hover me</CardDescription>
+          </CardHeader>
+        </Card>
+      ))}
+    </div>
+  ),
+  args: {
+    clickable: true,
+    onClick: () => console.log('Clicked!'),
+  },
+}
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 49a6b706b..4c2012d9e 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -15,7 +15,10 @@ export const cardVariants = cva(
         muted: 'bg-background-muted border-1 border-border-card',
       },
       clickable: {
-        true: ['cursor-pointer hover:opacity-80', focusRingVariants()],
+        true: [
+          'cursor-pointer hover:border-transparent hover:ring-2 hover:ring-border-hover',
+          focusRingVariants(),
+        ],
       },
       disabled: {
         true: 'opacity-50 cursor-default pointer-events-none hover:border-border-card',