diff --git a/apps/client/src/widgets/react/Card.css b/apps/client/src/widgets/react/Card.css
index 5bbe0f6ab4..1472dc135a 100644
--- a/apps/client/src/widgets/react/Card.css
+++ b/apps/client/src/widgets/react/Card.css
@@ -14,7 +14,7 @@
     text-transform: uppercase;
 }
 
-.tn-card {
+.tn-card-body {
     display: flex;
     flex-direction: column;
     gap: var(--card-section-gap);
diff --git a/apps/client/src/widgets/react/Card.tsx b/apps/client/src/widgets/react/Card.tsx
index 3a805ff731..6f41a2e6f3 100644
--- a/apps/client/src/widgets/react/Card.tsx
+++ b/apps/client/src/widgets/react/Card.tsx
@@ -10,12 +10,12 @@ interface CardProps {
 }
 
 export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <>
+    return <div class={clsx("tn-card", props.className)}>
         {props.heading && <h5 class="tn-card-heading">{props.heading}</h5>}
-        <div className={clsx(["tn-card", props.className])}>
+        <div className="tn-card-body">
             {props.children}
         </div>
-    </>;
+    </div>;
 }
 
 interface CardSectionProps {