diff --git a/webapp/components/Badges.vue b/webapp/components/Badges.vue
index 20a614612..6fbc36ef0 100644
--- a/webapp/components/Badges.vue
+++ b/webapp/components/Badges.vue
@@ -1,7 +1,12 @@
 <template>
   <div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
-    <div v-for="badge in badges" :key="badge.id" class="hc-badge-container">
-      <img :title="badge.key" :src="badge.icon | proxyApiUrl" class="hc-badge" />
+    <div
+      v-for="badge in badges"
+      :key="badge.id"
+      :class="['hc-badge-container', badge.type]"
+      :title="badge.title"
+    >
+      <img v-if="badge.icon" :title="badge.key" :src="badge.icon | proxyApiUrl" class="hc-badge" />
     </div>
   </div>
 </template>
@@ -21,22 +26,34 @@ export default {
 .hc-badges {
   position: relative;
 
-  $badge-size: 30px;
-  $main-badge-size: 60px;
-  $gap-x: -2px;
-  $gap-y: 2px;
-  $slot-x: $badge-size + $gap-x;
-  $slot-y: $badge-size + $gap-y;
-  $offset-y: ($badge-size) / 2 - 2 * $gap-x;
+  $badge-size-x: 30px;
+  $badge-size-y: 26px;
+  $main-badge-size-x: 60px;
+  $main-badge-size-y: 52px;
+  $gap-x: -6px;
+  $gap-y: 1px;
+  $slot-x: $badge-size-x + $gap-x;
+  $slot-y: $badge-size-y + $gap-y;
+  $offset-y: ($badge-size-y) / 2 - 2 * $gap-x;
 
-  width: calc($main-badge-size + 4 * $badge-size + 4 * $gap-x);
-  height: calc(3 * $badge-size + 4 * $gap-y);
+  width: calc($main-badge-size-x + 4 * $badge-size-x + 4 * $gap-x);
+  height: calc(3 * $badge-size-y + 4 * $gap-y);
   margin: auto;
 
   .hc-badge-container {
     position: absolute;
-    width: $badge-size;
-    height: $badge-size;
+    width: $badge-size-x;
+    height: $badge-size-y;
+    background-image: url('/img/badges/slot-empty.svg');
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 10px;
+    color: #333;
   }
 
   .hc-badge {
@@ -46,56 +63,100 @@ export default {
   }
 
   .hc-badge-container:nth-child(1) {
-    width: $main-badge-size;
-    height: $main-badge-size;
+    width: $main-badge-size-x;
+    height: $main-badge-size-y;
     top: $offset-y + calc($gap-y / 2);
     left: 0;
+    font-size: 20px; /* Doubled font size for first slot */
   }
 
   .hc-badge-container:nth-child(2) {
     top: $offset-y + calc(-1 * $gap-y / 2);
-    left: calc($main-badge-size + $gap-x);
+    left: calc($main-badge-size-x + $gap-x);
   }
 
   .hc-badge-container:nth-child(3) {
     top: $offset-y + calc($slot-y + $gap-y / 2);
-    left: calc($main-badge-size + $gap-x);
+    left: calc($main-badge-size-x + $gap-x);
   }
 
   .hc-badge-container:nth-child(4) {
-    top: $offset-y + calc(-1 * $badge-size / 2 - 2 * $gap-y);
-    left: calc($main-badge-size + $gap-x + $slot-x);
+    top: $offset-y + calc(-1 * $badge-size-y / 2 - 2 * $gap-y);
+    left: calc($main-badge-size-x + $gap-x + $slot-x);
   }
 
   .hc-badge-container:nth-child(5) {
-    top: $offset-y + calc($badge-size / 2);
-    left: calc($main-badge-size + $gap-x + $slot-x);
+    top: $offset-y + calc($badge-size-y / 2);
+    left: calc($main-badge-size-x + $gap-x + $slot-x);
   }
 
   .hc-badge-container:nth-child(6) {
-    top: $offset-y + calc(1.5 * $badge-size + 2 * $gap-y);
-    left: calc($main-badge-size + $gap-x + $slot-x);
+    top: $offset-y + calc(1.5 * $badge-size-y + 2 * $gap-y);
+    left: calc($main-badge-size-x + $gap-x + $slot-x);
   }
 
   .hc-badge-container:nth-child(7) {
     top: $offset-y + calc(-1 * $gap-y / 2);
-    left: calc($main-badge-size + $gap-x + 2 * $slot-x);
+    left: calc($main-badge-size-x + $gap-x + 2 * $slot-x);
   }
 
   .hc-badge-container:nth-child(8) {
     top: $offset-y + calc($slot-y + $gap-y / 2);
-    left: calc($main-badge-size + $gap-x + 2 * $slot-x);
+    left: calc($main-badge-size-x + $gap-x + 2 * $slot-x);
   }
 
   .hc-badge-container:nth-child(9) {
-    top: $offset-y + calc($slot-y - ($badge-size / 2) - $gap-y);
-    left: calc($main-badge-size + $gap-x + 3 * $slot-x);
+    top: $offset-y + calc($slot-y - ($badge-size-y / 2) - $gap-y);
+    left: calc($main-badge-size-x + $gap-x + 3 * $slot-x);
   }
 
   .hc-badge-container:nth-child(10) {
-    top: $offset-y + calc($badge-size * 1.5 + 2 * $gap-y);
-    left: calc($main-badge-size + $gap-x + 3 * $slot-x);
+    top: $offset-y + calc($badge-size-y * 1.5 + 2 * $gap-y);
+    left: calc($main-badge-size-x + $gap-x + 3 * $slot-x);
   }
 
+  .nordrhein-westfalen::after {
+    content: "NW";
+  }
+
+  .test-express::after {
+    content: "TE";
+  }
+
+  .liberation-express::after {
+    content: "LE";
+  }
+
+  .nachweis-express::after {
+    content: "NE";
+  }
+
+  .maskenfrei-express::after {
+    content: "ME";
+  }
+
+  .beitragsblocker::after {
+    content: "BB";
+  }
+
+  .beitragsstopper::after {
+    content: "BS";
+  }
+
+  .masern-impfbloker::after {
+    content: "MI";
+  }
+
+  .rundfunk-alarm::after {
+    content: "RA";
+  }
+
+  .freunde-der-demokratie::after {
+    content: "FD";
+  }
+
+  .restart-democracy::after {
+    content: "RD";
+  }
 }
 </style>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 622610b09..20dae8ab3 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -263,15 +263,21 @@ export default {
     user() {
       const user = this.User ? this.User[0] : {}
 
-      // Only for test purposes!
-      if (user.badges && user.badges.length > 0 && user.badges.length < 10) {
-        const lastBadge = user.badges[user.badges.length - 1]
-        const additionalBadges = Array(10 - user.badges.length).fill(lastBadge)
-        user.badges = [...user.badges, ...additionalBadges]
+      const badgeList = [
+        { key: 'NW', title: 'Nordrhein Westfalen', type: 'nordrhein-westfalen', icon: null },
+        { key: 'TE', title: 'Test-Express', type: 'test-express', icon: null },
+        { key: 'LE', title: 'Liberation-Express', type: 'liberation-express', icon: null },
+        { key: 'NE', title: 'Nachweis-Express', type: 'nachweis-express', icon: null },
+        { key: 'ME', title: 'Maskenfrei.Express', type: 'maskenfrei-express', icon: null },
+        { key: 'BB', title: 'Beitragsblocker', type: 'beitragsblocker', icon: null },
+        { key: 'BS', title: 'Beitragsstopper', type: 'beitragsstopper', icon: null },
+        { key: 'MI', title: 'Masern-Impfbloker', type: 'masern-impfbloker', icon: null },
+        { key: 'RA', title: 'Rundfunk-Alarm', type: 'rundfunk-alarm', icon: null },
+        { key: 'FD', title: 'Freunde der Demokratie', type: 'freunde-der-demokratie', icon: null },
+        // { key: 'RD', title: 'Restart Democracy', type: 'restart-democracy', icon: null }
+      ]
 
-        lastBadge.icon = '/img/badges/badges-slot-gray.svg'
-      }
-      // ^^^
+      user.badges = badgeList
 
       return user
     },