diff --git a/features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/AvatarRow.kt b/features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/AvatarRow.kt
new file mode 100644
index 0000000000..f532857280
--- /dev/null
+++ b/features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/AvatarRow.kt
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+package io.element.android.features.knockrequests.impl.banner
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.CompositingStrategy
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+
+@Composable
+fun AvatarRow(
+    avatarDataList: List<AvatarData>,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier,
+    ) {
+        val lastItemIndex = avatarDataList.size - 1
+        val avatarSize = avatarDataList.firstOrNull()?.size?.dp ?: return
+        avatarDataList
+            .reversed()
+            .forEachIndexed { index, avatarData ->
+                Avatar(
+                    modifier = Modifier
+                        .padding(start = avatarSize / 2 * (lastItemIndex - index))
+                        .graphicsLayer {
+                            compositingStrategy = CompositingStrategy.Offscreen
+                        }
+                        .drawWithContent {
+                            // Draw content and clear the pixels for the avatar on the left.
+                            drawContent()
+                            if (index < lastItemIndex) {
+                                drawCircle(
+                                    color = Color.Black,
+                                    center = Offset(
+                                        x = 0f,
+                                        y = size.height / 2,
+                                    ),
+                                    radius = avatarSize.toPx() / 2,
+                                    blendMode = BlendMode.Clear,
+                                )
+                            }
+                        }
+                        .size(size = avatarSize)
+                        .padding(2.dp),
+                    avatarData = avatarData,
+                )
+            }
+    }
+}
diff --git a/features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt b/features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt
index d029b80906..a7307d605b 100644
--- a/features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt
+++ b/features/knockrequests/impl/src/main/kotlin/io/element/android/features/knockrequests/impl/banner/KnockRequestsBannerView.kt
@@ -19,19 +19,12 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawWithContent
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.BlendMode
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.CompositingStrategy
-import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -120,9 +113,9 @@ private fun KnockRequestsBannerContent(
     }
 
     Column(
-            modifier
-                    .fillMaxWidth()
-                    .padding(all = 16.dp)
+        modifier
+            .fillMaxWidth()
+            .padding(all = 16.dp)
     ) {
         Row {
             KnockRequestAvatarView(
@@ -212,44 +205,15 @@ private fun KnockRequestAvatarListView(
     knockRequests: ImmutableList<KnockRequestPresentable>,
     modifier: Modifier = Modifier,
 ) {
-    val avatarSize = AvatarSize.KnockRequestBanner.dp
-    Box(
+    val avatars = knockRequests
+        .take(MAX_AVATAR_COUNT)
+        .map { knockRequest ->
+            knockRequest.getAvatarData(AvatarSize.KnockRequestBanner)
+        }
+    AvatarRow(
+        avatarDataList = avatars,
         modifier = modifier,
-    ) {
-        knockRequests
-            .take(MAX_AVATAR_COUNT)
-            .reversed()
-            .let { smallReversedList ->
-                val lastItemIndex = smallReversedList.size - 1
-                smallReversedList.forEachIndexed { index, knockRequest ->
-                    Avatar(
-                        modifier = Modifier
-                                .padding(start = avatarSize / 2 * (lastItemIndex - index))
-                                .graphicsLayer {
-                                    compositingStrategy = CompositingStrategy.Offscreen
-                                }
-                                .drawWithContent {
-                                    // Draw content and clear the pixels for the avatar on the left.
-                                    drawContent()
-                                    if (index < lastItemIndex) {
-                                        drawCircle(
-                                                color = Color.Black,
-                                                center = Offset(
-                                                        x = 0f,
-                                                        y = size.height / 2,
-                                                ),
-                                                radius = avatarSize.toPx() / 2,
-                                                blendMode = BlendMode.Clear,
-                                        )
-                                    }
-                                }
-                                .size(size = avatarSize)
-                                .padding(2.dp),
-                        avatarData = knockRequest.getAvatarData(AvatarSize.KnockRequestBanner),
-                    )
-                }
-            }
-    }
+    )
 }
 
 @Composable