diff --git a/js/src/components/Group/GroupMemberCard.vue b/js/src/components/Group/GroupMemberCard.vue
index 748712044..9f12cd793 100644
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="rounded shadow-lg bg-white dark:bg-mbz-purple dark:text-white">
     <div
-      class="bg-yellow-2 text-black flex items-center gap-1 p-2 rounded-t-lg"
+      class="bg-mbz-yellow-alt-50 text-black flex items-center gap-1 p-2 rounded-t-lg"
       dir="auto"
     >
       <figure class="" v-if="member.actor.avatar">
diff --git a/js/src/components/Group/InvitationCard.vue b/js/src/components/Group/InvitationCard.vue
index f3a2888ed..f3ef4bbc4 100644
--- a/js/src/components/Group/InvitationCard.vue
+++ b/js/src/components/Group/InvitationCard.vue
@@ -1,75 +1,54 @@
 <template>
-  <div class="">
-    <div class="">
-      <div class="">
-        <div class="prose dark:prose-invert">
-          <i18n-t
-            tag="p"
-            keypath="You have been invited by {invitedBy} to the following group:"
-          >
-            <template #invitedBy>
-              <b>{{ member?.invitedBy?.name }}</b>
-            </template>
-          </i18n-t>
-        </div>
+  <div class="border rounded p-2 bg-mbz-yellow-alt-50 dark:bg-zinc-700">
+    <div class="prose dark:prose-invert">
+      <i18n-t
+        tag="p"
+        keypath="You have been invited by {invitedBy} to the following group:"
+      >
+        <template #invitedBy>
+          <b>{{ member?.invitedBy?.name }}</b>
+        </template>
+      </i18n-t>
+    </div>
+    <div class="flex justify-between gap-2">
+      <div class="flex gap-2">
         <div class="">
+          <figure v-if="member.parent.avatar">
+            <img
+              class="rounded-full"
+              :src="member.parent.avatar.url"
+              alt=""
+              height="48"
+              width="48"
+            />
+          </figure>
+          <AccountGroup :size="48" v-else />
+        </div>
+        <div class="mr-3">
+          <router-link
+            :to="{
+              name: RouteName.GROUP,
+              params: {
+                preferredUsername: usernameWithDomain(member.parent),
+              },
+            }"
+          >
+            <p class="">{{ member.parent.name }}</p>
+            <p class="text-sm">@{{ usernameWithDomain(member.parent) }}</p>
+          </router-link>
+        </div>
+      </div>
+      <div>
+        <div class="flex gap-2">
           <div class="">
-            <figure v-if="member.parent.avatar">
-              <img
-                class="rounded"
-                :src="member.parent.avatar.url"
-                alt=""
-                height="48"
-                width="48"
-              />
-            </figure>
-            <AccountGroup :size="48" v-else />
+            <o-button variant="success" @click="$emit('accept', member.id)">
+              {{ t("Accept") }}
+            </o-button>
           </div>
-          <div class="media-content">
-            <div class="level">
-              <div class="level-left">
-                <div class="level-item mr-3">
-                  <router-link
-                    :to="{
-                      name: RouteName.GROUP,
-                      params: {
-                        preferredUsername: usernameWithDomain(member.parent),
-                      },
-                    }"
-                  >
-                    <h3 class="">{{ member.parent.name }}</h3>
-                    <p class="">
-                      <span v-if="member.parent.domain">
-                        {{
-                          `@${member.parent.preferredUsername}@${member.parent.domain}`
-                        }}
-                      </span>
-                      <span v-else>{{
-                        `@${member.parent.preferredUsername}`
-                      }}</span>
-                    </p>
-                  </router-link>
-                </div>
-              </div>
-              <div class="">
-                <div class="">
-                  <o-button
-                    variant="success"
-                    @click="$emit('accept', member.id)"
-                  >
-                    {{ $t("Accept") }}
-                  </o-button>
-                </div>
-                <div class="">
-                  <o-button
-                    variant="danger"
-                    @click="$emit('reject', member.id)"
-                  >
-                    {{ $t("Decline") }}
-                  </o-button>
-                </div>
-              </div>
-            </div>
+          <div class="">
+            <o-button variant="danger" @click="$emit('reject', member.id)">
+              {{ t("Decline") }}
+            </o-button>
           </div>
         </div>
       </div>
@@ -82,6 +61,9 @@ import { usernameWithDomain } from "@/types/actor";
 import { IMember } from "@/types/actor/member.model";
 import RouteName from "../../router/name";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
 
 defineProps<{
   member: IMember;
diff --git a/js/src/components/Group/InvitationsList.vue b/js/src/components/Group/InvitationsList.vue
index 868375fcf..4802671f9 100644
--- a/js/src/components/Group/InvitationsList.vue
+++ b/js/src/components/Group/InvitationsList.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="card my-3" v-if="invitations && invitations.length > 0">
+  <section class="my-3" v-if="invitations && invitations.length > 0">
     <InvitationCard
       v-for="member in invitations"
       :key="member.id"