diff --git a/changelog.d/user_profile_redesign.change b/changelog.d/user_profile_redesign.change
new file mode 100644
index 000000000..27fc5f890
--- /dev/null
+++ b/changelog.d/user_profile_redesign.change
@@ -0,0 +1 @@
+User card/profile got an overhaul
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index d66108927..7357784a5 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -149,6 +149,7 @@
     display: flex;
     align-items: flex-end;
     margin-bottom: 1em;
+    container: user-card / inline-size;
 
     > * {
       min-width: 0;
@@ -165,7 +166,9 @@
       --_avatarShadowInset: var(--avatarShadowInset);
 
       width: 7em;
+      width: calc(min(7em, 20cqw));
       height: 7em;
+      height: calc(min(7em, 20cqw));
       object-fit: cover;
     }
   }
@@ -177,12 +180,19 @@
     display: grid;
     grid-auto-flow: column;
     grid-gap: 0.6em;
+    font-size: 110%;
 
-    a, button {
+    a, button, div {
       text-align: center;
       width: 2em;
       height: 2em;
       line-height: 2em;
+      padding: 0.6em;
+      margin: -0.6em;
+
+      &:hover .icon {
+        color: var(--textFaint);
+      }
 
       &:not(:hover) .icon {
         color: var(--lightText);
@@ -260,10 +270,14 @@
       --link: var(--text) !important;
     }
 
-    .top-line, {
+    .top-line {
       display: flex;
+      // these two normalize position and height when custom emoji are used
       line-height: 2;
+      margin-bottom: -0.2em;
       font-weight: 600;
+      font-size: 110%;
+      font-size: calc(max(110%, 4cqw));
     }
 
     .bottom-line {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index b6912066b..94d6a9286 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -31,6 +31,12 @@
   .other-actions {
     top: -0.6em;
     right: -0.6em;
+
+    a, button, div {
+      width: 2em;
+      height: 2em;
+      line-height: 2em;
+    }
   }
 
   .user-info {
@@ -43,7 +49,9 @@
 
     .Avatar {
       width: 5em;
+      width: calc(min(5em, 20cqw));
       height: 5em;
+      height: calc(min(5em, 20cqw));
     }
   }