diff --git a/js/src/views/Group/GroupView.vue b/js/src/views/Group/GroupView.vue
index cf092bb67..6a1f81bef 100644
--- a/js/src/views/Group/GroupView.vue
+++ b/js/src/views/Group/GroupView.vue
@@ -21,7 +21,8 @@
           <div class="flex self-center h-0 mt-4 items-end">
             <figure class="" v-if="group.avatar">
               <img
-                class="rounded-full border h-32 w-32"
+                class="rounded-full border h-32 w-32 group-pfp"
+                :style="`background-image: url(${group.avatar.url})`"
                 :src="group.avatar.url"
                 alt=""
                 width="128"
@@ -1185,6 +1186,16 @@ watch(isCurrentActorAGroupMember, () => {
 </script>
 <style lang="scss" scoped>
 @use "@/styles/_mixins" as *;
+
+.group-pfp {
+  object-fit: contain;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-blend-mode: darken;
+  background-color: rgba(0, 0, 0, 0.8);
+  background-position: center;
+}
+
 div.container {
   .block-container {
     display: flex;