diff --git a/core/frontend/src/cards/css/header.css b/core/frontend/src/cards/css/header.css
index 7b268254db..aeb0e8c6e7 100644
--- a/core/frontend/src/cards/css/header.css
+++ b/core/frontend/src/cards/css/header.css
@@ -5,19 +5,25 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: var(--white);
+    color: #ffffff;
     transition: background-color var(--animation-speed-fast) ease-in-out;
 }
 
 .kg-header-card h2,
 .kg-header-card h3 {
-    color: var(--white);
-    margin-top: 0 !important;
+    color: #ffffff;
+    margin: 0;
 }
 
 .kg-header-card h2 {
     font-size: 5em;
     font-weight: 700;
+    line-height: 1.1em;
+    margin: 0 0 0.125em;
+}
+
+.kg-header-card h3 {
+    line-height: 1.3em;
 }
 
 .kg-header-card.kg-size-small {
@@ -77,23 +83,23 @@
 }
 
 .kg-header-card.kg-style-invert {
-    background: var(--black);
-    color: var(--white);
+    background: #15171a;
+    color: #ffffff;
 }
 
 .kg-header-card.kg-style-clear {
-    color: var(--black);
-    border: 1px solid var(--lightgrey);
-    border-width: 1px 0;
+    color: #15171a;
+    border-top: 1px solid rgba(124, 139, 154, 0.25);
+    border-bottom: 1px solid rgba(124, 139, 154, 0.25);
 }
 
 .kg-header-card.kg-style-clear h2,
 .kg-header-card.kg-style-clear h3 {
-    color: var(--black);
+    color: #15171a;
 }
 
 .kg-header-card.kg-style-accent {
-    background-color: var(--accent-color);
+    background-color: var(--ghost-accent-color);
 }
 
 .kg-header-card.kg-style-image {
@@ -102,26 +108,74 @@
     background-position: center center;
 }
 
-.kg-header-card-button {
-    margin-top: 1.75em;
-    font-weight: 700;
+.gh-content a.kg-header-card-button {
+    display: flex;
+    position: static;
+    align-items: center;
+    padding: 0 1.2em;
+    height: 2.4em;
+    line-height: 1em;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    font-size: 0.95em;
+    font-weight: 600;
+    text-decoration: none !important;
+    border-radius: 5px;
+    transition: opacity 0.2s ease-in-out;
+    background-color: var(--ghost-accent-color);
+    color: #ffffff !important;
+    margin: 1.75em 0 0;
 }
 
-.kg-size-large .kg-header-card-button {
+.gh-content a.kg-header-card-button:hover {
+    opacity: 0.85;
+}
+
+.gh-content .kg-size-large a.kg-header-card-button {
     margin-top: 2em;
 }
 
-.kg-size-small .kg-header-card-button {
+.gh-content .kg-size-small a.kg-header-card-button {
     margin-top: 1.5em;
 }
 
-.kg-style-invert .kg-header-card-button,
-.kg-style-image .kg-header-card-button {
-    background: var(--white);
-    color: var(--black);
+.gh-content .kg-style-image a.kg-header-card-button,
+.gh-content .kg-style-invert a.kg-header-card-button {
+    background: #ffffff;
+    color: #15171a !important;
 }
 
-.kg-style-accent .kg-header-card-button {
-    background: var(--white);
-    color: var(--accent-color);
+.gh-content .kg-style-accent a.kg-header-card-button {
+    background: #ffffff;
+    color: var(--ghost-accent-color) !important;
+}
+
+@media (max-width: 640px) {
+    .kg-header-card {
+        padding-left: 1em;
+        padding-right: 1em;
+    }
+
+    .kg-header-card h2 {
+        font-size: 3.5em;
+    }
+
+    .kg-header-card.kg-size-large h2 {
+        font-size: 4em;
+    }
+    
+    .kg-header-card.kg-size-small h2 {
+        font-size: 3em;
+    }
+
+    .kg-header-card h3 {
+        font-size: 1.25em;
+    }
+
+    .kg-header-card.kg-size-large h3 {
+        font-size: 1.5em;
+    }
+    
+    .kg-header-card.kg-size-small h3 {
+        font-size: 1em;
+    }
 }
diff --git a/core/server/services/mega/template.js b/core/server/services/mega/template.js
index d1b5fdb2b3..deee58447f 100644
--- a/core/server/services/mega/template.js
+++ b/core/server/services/mega/template.js
@@ -638,6 +638,117 @@ figure blockquote p {
     font-size: 20px;
 }
 
+.kg-header-card {
+    margin: 0 0 1.5em 0;
+    padding: 6em 2em;
+    text-align: center;
+}
+
+.kg-header-card.kg-size-small {
+    padding-top: 4em;
+    padding-bottom: 4em;
+}
+
+.kg-header-card.kg-size-large {
+    padding-top: 8em;
+    padding-bottom: 8em;
+}
+
+.kg-header-card.kg-align-left {
+    text-align: left;
+}
+
+.kg-header-card.kg-style-invert {
+    background: #15171a;
+    color: #ffffff;
+}
+
+.kg-header-card.kg-style-clear {
+    border-top: 1px solid #e5eff6;
+    border-bottom: 1px solid #e5eff6;
+}
+
+.kg-header-card.kg-style-accent {
+    background: ${templateSettings.accentColor || '#15171a'};
+    color: #ffffff;
+}
+
+.kg-header-card.kg-style-image {
+    background-color: #e7e7eb;
+    background-size: cover;
+    background-position: center center;
+    color: #ffffff;
+}
+
+.kg-header-card h2 {
+    font-size: 5em;
+    font-weight: 700;
+    line-height: 1.1em;
+    margin: 0 0 0.125em;
+}
+
+.kg-header-card h2 strong {
+    font-weight: 800;
+}
+
+.kg-header-card.kg-size-small h2 {
+    font-size: 4em;
+}
+
+.kg-header-card.kg-size-large h2 {
+    font-size: 6em;
+}
+
+.kg-header-card h3 {
+    font-size: 1.5em;
+    font-weight: 500;
+    line-height: 1.3em;
+    margin: 0;
+}
+
+.kg-header-card h3 strong {
+    font-weight: 600;
+}
+
+.kg-header-card.kg-size-large h3 {
+    font-size: 1.75em;
+}
+
+.kg-header-card.kg-size-small h3 {
+    font-size: 1.25em;
+}
+
+.kg-header-card-button {
+    margin-top: 1.75em;
+    overflow-wrap: anywhere;
+    background: ${templateSettings.accentColor || '#15212A'};
+    border: solid 1px ${templateSettings.accentColor || '#15212A'};
+    border-radius: 5px;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    margin: 0;
+    padding: 8px 16px;
+    text-decoration: none !important;
+    color: #FFFFFF !important;
+}
+
+.kg-size-large .kg-header-card-button {
+    margin-top: 2em;
+}
+
+.kg-size-small .kg-header-card-button {
+    margin-top: 1.5em;
+}
+
+.kg-style-accent .kg-header-card-button {
+    background: #ffffff;
+    color: ${templateSettings.accentColor || '#15212A'} !important;
+}
+
+
 /* -------------------------------------
     HEADER, FOOTER, MAIN
 ------------------------------------- */