diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index 9ec174b74..dac9f0dc5 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -3,9 +3,10 @@
     <div class="card-content">
       <div class="media">
         <div class="media-left">
-          <figure class="image is-48x48">
-            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
+          <figure class="image is-48x48" v-if="group.avatar">
+            <img class="is-rounded" :src="group.avatar.url" alt="" />
           </figure>
+          <b-icon v-else size="is-large" icon="account-group" />
         </div>
         <div class="media-content">
           <router-link
diff --git a/js/src/components/Group/InvitationCard.vue b/js/src/components/Group/InvitationCard.vue
index 5c3de92b5..13fece9fd 100644
--- a/js/src/components/Group/InvitationCard.vue
+++ b/js/src/components/Group/InvitationCard.vue
@@ -8,9 +8,10 @@
       </div>
       <div class="media subfield">
         <div class="media-left">
-          <figure class="image is-48x48">
-            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
+          <figure class="image is-48x48" v-if="member.parent.avatar">
+            <img class="is-rounded" :src="member.parent.avatar.url" alt="" />
           </figure>
+          <b-icon v-else size="is-large" icon="account-group" />
         </div>
         <div class="media-content">
           <div class="level">