diff --git a/src/components/Inbox/GroupDialogAvatar.module.scss b/src/components/Inbox/GroupDialogAvatar.module.scss
index e053442d..feb5ea84 100644
--- a/src/components/Inbox/GroupDialogAvatar.module.scss
+++ b/src/components/Inbox/GroupDialogAvatar.module.scss
@@ -23,8 +23,8 @@
   }
 
   .counter {
-    width: 23px;
-    height: 23px;
+    width: 24px;
+    height: 24px;
     position: absolute;
     bottom: 0;
     right: 0;
diff --git a/src/components/Inbox/GroupDialogAvatar.tsx b/src/components/Inbox/GroupDialogAvatar.tsx
index ec81df57..f68a4b17 100644
--- a/src/components/Inbox/GroupDialogAvatar.tsx
+++ b/src/components/Inbox/GroupDialogAvatar.tsx
@@ -1,3 +1,4 @@
+import { For } from 'solid-js'
 import './DialogCard.module.scss'
 import styles from './GroupDialogAvatar.module.scss'
 import { clsx } from 'clsx'
@@ -17,15 +18,17 @@ const GroupDialogAvatar = (props: Props) => {
   }
   return (
     <div class={styles.GroupDialogAvatar}>
-      {slicedUsers().map((user) => (
-        <DialogAvatar
-          className={styles.grouped}
-          bordered={true}
-          size="small"
-          name={user.name}
-          url={user.userpic}
-        />
-      ))}
+      <For each={slicedUsers()}>
+        {(user) => (
+          <DialogAvatar
+            className={styles.grouped}
+            bordered={true}
+            size="small"
+            name={user.name}
+            url={user.userpic}
+          />
+        )}
+      </For>
       {props.users.length > 3 && (
         <div class={clsx(styles.counter, { [styles.hundred]: props.users.length >= 100 })}>
           {++props.users.length}