diff --git a/.changeset/two-baboons-taste.md b/.changeset/two-baboons-taste.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/two-baboons-taste.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
index 3459f928a3c..3ae39245c2a 100644
--- a/packages/ui/src/primitives/card.tsx
+++ b/packages/ui/src/primitives/card.tsx
@@ -10,9 +10,11 @@ export const Root = React.forwardRef(function CardRoot(
   return (
     <div
       ref={forwardedRef}
+      data-card-root=''
       {...props}
       className={cx(
         '[--card-body-padding:theme(spacing.10)]',
+        '[--card-content-rounded-b:theme(borderRadius.lg)]',
         'bg-gray-2 border-gray-a6 shadow-gray-a5 relative w-96 overflow-hidden rounded-xl border bg-clip-padding shadow-xl',
         className,
       )}
@@ -29,9 +31,10 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
   return (
     <div
       ref={forwardedRef}
+      data-card-content=''
       {...props}
       className={cx(
-        'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] border p-[--card-body-padding] shadow-sm',
+        'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -m-px flex flex-col gap-8 rounded-[inherit] rounded-b-[--card-content-rounded-b] border p-[--card-body-padding] shadow-sm',
         className,
       )}
     >
@@ -47,6 +50,7 @@ export const Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
   return (
     <div
       ref={forwardedRef}
+      data-card-header=''
       {...props}
       className={cx('z-1 flex flex-col gap-1 text-center', className)}
     >
@@ -67,8 +71,9 @@ export const Logo = React.forwardRef(function Logo(
 ) {
   const img = (
     <img
-      crossOrigin='anonymous'
       ref={forwardedRef}
+      data-card-logo=''
+      crossOrigin='anonymous'
       {...props}
       className={cx('max-h-24 max-w-24 object-contain', className)}
     />
@@ -96,6 +101,7 @@ export const Title = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<H
   return (
     <h2
       ref={forwardedRef}
+      data-card-title=''
       {...props}
       className={cx('leading-medium text-gray-12 text-lg font-bold', className)}
     >
@@ -125,8 +131,9 @@ export const Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
   return (
     <div
       ref={forwardedRef}
+      data-card-body=''
       {...props}
-      className={cx('z-1 flex flex-col gap-6 rounded-lg', className)}
+      className={cx('z-1 flex flex-col gap-6', className)}
     >
       {children}
     </div>
@@ -138,12 +145,15 @@ export const Banner = React.forwardRef(function CardBanner(
   forwardedRef: React.ForwardedRef<HTMLParagraphElement>,
 ) {
   return (
-    <div className={cx('absolute inset-0 isolate')}>
+    <div
+      data-card-banner=''
+      className={cx('absolute inset-0 isolate')}
+    >
       <div
         className={cx(
           'pointer-events-none absolute inset-0 w-full',
           // manually nudge the radius by `1px` for a snug fit
-          'rounded-b-[calc(theme(borderRadius.xl)-0.0625rem)]',
+          'rounded-b-[calc(var(--card-content-rounded-b)-1px)]',
           '[background-image:repeating-linear-gradient(-45deg,theme(colors.orange.50),theme(colors.orange.50)_6px,theme(colors.orange.100/0.75)_6px,theme(colors.orange.100/0.75)_12px)]',
           '[mask-image:linear-gradient(to_top,black,transparent_128px)]',
         )}
@@ -168,6 +178,7 @@ export const Footer = React.forwardRef(function Footer(
   return branded || children ? (
     <div
       ref={forwardedRef}
+      data-card-footer=''
       {...props}
       className={cx('grid', className)}
     >
@@ -196,6 +207,7 @@ export const FooterAction = React.forwardRef<HTMLDivElement, React.HTMLAttribute
     return (
       <div
         ref={forwardedRef}
+        data-card-footer-action=''
         {...props}
         className={cx('border-gray-a6 border-b px-6 py-4 last-of-type:border-b-transparent', className)}
       >
@@ -210,6 +222,7 @@ export const FooterActionText = React.forwardRef<HTMLParagraphElement, React.HTM
     return (
       <p
         ref={forwardedRef}
+        data-card-footer-action-text=''
         {...props}
         className={cx('text-gray-a11 text-center text-base', className)}
       >
@@ -226,6 +239,7 @@ export const FooterActionButton = React.forwardRef<HTMLButtonElement, React.Butt
     return (
       <button
         ref={forwardedRef}
+        data-card-footer-action-button=''
         // eslint-disable-next-line react/button-has-type
         type={type}
         className={footerActionButton({ className })}
@@ -242,6 +256,7 @@ export const FooterActionLink = React.forwardRef<HTMLAnchorElement, React.Anchor
     return (
       <a
         ref={forwardedRef}
+        data-card-footer-action-link=''
         {...props}
         className={footerActionButton({ className })}
       >
