diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs
index 07debfc77..28e1f869f 100644
--- a/ui/desktop/app/components/card/index.hbs
+++ b/ui/desktop/app/components/card/index.hbs
@@ -1,12 +1,12 @@
 <section class='card'>
   <header class='card-header'>
     {{#if @heading}}
-      <div>
+      <h2>
         {{#if @icon}}
           <Rose::Icon @name={{@icon}} @size='medium' />
         {{/if}}
         {{@heading}}
-      </div>
+      </h2>
     {{/if}}
     {{yield to='header'}}
   </header>
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index b829c2938..e314e01ce 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -369,12 +369,19 @@
   margin-bottom: sizing.rems(m);
 
   .card-header {
+    align-items: center;
     border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
     display: flex;
     justify-content: flex-start;
     padding: sizing.rems(s);
 
-    div {
+    h2 {
+      @include type.type(s, normal);
+      color: var(--ui-gray-starker-1);
+    }
+
+    div,
+    h2 {
       display: flex;
       flex-shrink: 1;
       width: 100%;