diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs
index d0d766aeb..07debfc77 100644
--- a/ui/desktop/app/components/card/index.hbs
+++ b/ui/desktop/app/components/card/index.hbs
@@ -1,17 +1,15 @@
 <section class='card'>
   <header class='card-header'>
-    <div>
-      {{#if @icon}}
-        <Rose::Icon @name={{@icon}} @size='medium' />
-      {{/if}}
-      {{@heading}}
-    </div>
-    {{yield (hash header=(component 'rose/anonymous'))}}
+    {{#if @heading}}
+      <div>
+        {{#if @icon}}
+          <Rose::Icon @name={{@icon}} @size='medium' />
+        {{/if}}
+        {{@heading}}
+      </div>
+    {{/if}}
+    {{yield to='header'}}
   </header>
-  {{yield
-    (hash
-      body=(component 'rose/anonymous' tagName='div' class='card-body')
-      footer=(component 'rose/anonymous' tagName='footer' class='card-footer')
-    )
-  }}
+  <div class='card-body'>{{yield to='body'}}</div>
+  <footer class='card-footer'>{{yield to='footer'}}</footer>
 </section>
\ No newline at end of file
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index de383ddd5..b829c2938 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -371,6 +371,14 @@
   .card-header {
     border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
     display: flex;
+    justify-content: flex-start;
+    padding: sizing.rems(s);
+
+    div {
+      display: flex;
+      flex-shrink: 1;
+      width: 100%;
+    }
   }
 
   .card-body {