diff --git a/app/assets/javascripts/discourse/templates/components/badge-card.hbs b/app/assets/javascripts/discourse/templates/components/badge-card.hbs
index 4d30b969767..787a539e0ae 100644
--- a/app/assets/javascripts/discourse/templates/components/badge-card.hbs
+++ b/app/assets/javascripts/discourse/templates/components/badge-card.hbs
@@ -5,15 +5,13 @@
   <span class='check-display status-checked'>{{d-icon "check"}}</span>
 {{/if}}
 <div class='badge-contents'>
-  <a href={{url}} class="badge-link">
-    <div class='badge-icon {{badge.badgeTypeClassName}}'>
-      {{icon-or-image badge}}
+  <div class='badge-icon {{badge.badgeTypeClassName}}'>
+    <a href={{url}}>{{icon-or-image badge}}</a>
+  </div>
+  <div class='badge-info'>
+    <div class='badge-info-item'>
+      <h3><a href={{url}} class='badge-link'>{{badge.name}}</a></h3>
+      <div class='badge-summary'>{{{summary}}}</div>
     </div>
-    <div class='badge-info'>
-      <div class='badge-info-item'>
-        <h3>{{badge.name}}</h3>
-        <div class='badge-summary'>{{{summary}}}</div>
-      </div>
-    </div>
-  </a>
+  </div>
 </div>
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 304274f0550..b05e2bdacbf 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -147,14 +147,10 @@
     display: flex;
     min-height: 128px;
     height: 100%;
+    padding: 0 10%;
 
     .badge-link {
-      display: flex;
-      flex: 1 1 auto;
-      padding: 0 10%;
-      @include breakpoint(mobile) {
-        padding: 0 5%;
-      }
+      color: $primary;
     }
 
     .badge-icon {
@@ -237,12 +233,9 @@
       margin-right: 1.5em;
     }
     .badge-contents {
-      .badge-link {
-        padding: 0 5%;
-        width: 90%;
-        h3 {
-          font-size: $font-up-3;
-        }
+      padding: 0 5%;
+      h3 {
+        font-size: $font-up-3;
       }
     }
   }