diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 58eb66d5c..4fdc73777 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -111,15 +111,20 @@
     }
   }
 
-  .banner-overlay,
-  .banner-image {
+  .header-overlay {
     position: absolute;
     inset: 0;
     right: -1.2em;
     left: -1.2em;
     top: -1.4em;
-    padding: 0;
     mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
+  }
+
+  .banner-overlay,
+  .banner-image {
+    position: absolute;
+    inset: 0;
+    padding: 0;
     border-top-left-radius: calc(var(--roundness) - 1px);
     border-top-right-radius: calc(var(--roundness) - 1px);
   }
@@ -136,6 +141,7 @@
 
   .banner-overlay {
     background-color: var(--profileTint);
+    opacity: 0.5;
     pointer-events: none; // let user copy bg url
     z-index: -1;
   }
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
new file mode 100644
index 000000000..2c84b2759
--- /dev/null
+++ b/src/components/user_card/user_card.style.js
@@ -0,0 +1,37 @@
+export default {
+  name: 'UserCard',
+  selector: '.user-card',
+  notEditable: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0,
+        roundness: 3,
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }],
+        '--profileTint': 'color | $alpha(--background 1)'
+      }
+    },
+    {
+      parent: {
+        component: 'UserCard'
+      },
+      component: 'RichContent',
+      directives: {
+        opacity: 0
+      }
+    }
+  ]
+}
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 52dab5069..d6edc021f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -3,16 +3,18 @@
     <div class="user-card-inner">
       <div class="user-info">
         <div class="user-identity">
-          <div class="banner-image">
-            <img
-              :src="bannerImgSrc"
+          <div class="header-overlay">
+            <div class="banner-image">
+              <img
+                :src="bannerImgSrc"
+                :class="{ 'hide-bio': hideBio }"
+              >
+            </div>
+            <div
+              class="banner-overlay"
               :class="{ 'hide-bio': hideBio }"
-            >
+            />
           </div>
-          <div
-            class="banner-overlay"
-            :class="{ 'hide-bio': hideBio }"
-          />
           <a
             v-if="avatarAction === 'zoom'"
             class="user-info-avatar -link"