diff --git a/package/src/components/Message/MessageSimple/MessageReplies.tsx b/package/src/components/Message/MessageSimple/MessageReplies.tsx
index 56f40c8eb4..1c4df86f00 100644
--- a/package/src/components/Message/MessageSimple/MessageReplies.tsx
+++ b/package/src/components/Message/MessageSimple/MessageReplies.tsx
@@ -221,8 +221,6 @@ const useStyles = () => {
         alignItems: 'center',
         flexDirection: 'row',
         gap: primitives.spacingXs,
-        paddingTop: primitives.spacingXs,
-        paddingBottom: primitives.spacingXxs,
       },
       messageRepliesText: {
         color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
diff --git a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
index 7dec17f847..fccd5171a1 100644
--- a/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
+++ b/package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap
@@ -27,134 +27,143 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
   >
     <View
       style={
-        [
-          {
-            "alignItems": "center",
-            "flexDirection": "row",
-          },
-          {
-            "width": 51.2,
-          },
-        ]
+        {
+          "flexDirection": "row",
+        }
       }
     >
       <View
         style={
           [
             {
-              "position": "absolute",
+              "alignItems": "center",
+              "flexDirection": "row",
             },
             {
-              "left": 0,
+              "height": 32,
+              "width": 51.2,
             },
           ]
         }
       >
         <View
-          testID="user-avatar"
+          style={
+            [
+              {
+                "position": "absolute",
+              },
+              {
+                "left": 0,
+              },
+            ]
+          }
         >
           <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "borderRadius": 9999,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                },
-                {
-                  "height": 32,
-                  "width": 32,
-                },
-                {
-                  "backgroundColor": "#fcd579",
-                },
-                {
-                  "borderColor": "rgba(0, 0, 0, 0.1)",
-                  "borderWidth": 1,
-                },
-                undefined,
-              ]
-            }
-            testID="avatar-image"
+            testID="user-avatar"
           >
-            <Image
-              onError={[Function]}
-              source={
-                {
-                  "uri": "https://i.imgur.com/LuuGvh0.png",
-                }
-              }
+            <View
               style={
                 [
-                  {},
+                  {
+                    "alignItems": "center",
+                    "borderRadius": 9999,
+                    "justifyContent": "center",
+                    "overflow": "hidden",
+                  },
                   {
                     "height": 32,
                     "width": 32,
                   },
+                  {
+                    "backgroundColor": "#fcd579",
+                  },
+                  {
+                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                    "borderWidth": 1,
+                  },
+                  undefined,
                 ]
               }
-            />
+              testID="avatar-image"
+            >
+              <Image
+                onError={[Function]}
+                source={
+                  {
+                    "uri": "https://i.imgur.com/LuuGvh0.png",
+                  }
+                }
+                style={
+                  [
+                    {},
+                    {
+                      "height": 32,
+                      "width": 32,
+                    },
+                  ]
+                }
+              />
+            </View>
           </View>
         </View>
-      </View>
-      <View
-        style={
-          [
-            {
-              "position": "absolute",
-            },
-            {
-              "left": 19.2,
-            },
-          ]
-        }
-      >
         <View
-          testID="user-avatar"
+          style={
+            [
+              {
+                "position": "absolute",
+              },
+              {
+                "left": 19.2,
+              },
+            ]
+          }
         >
           <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "borderRadius": 9999,
-                  "justifyContent": "center",
-                  "overflow": "hidden",
-                },
-                {
-                  "height": 32,
-                  "width": 32,
-                },
-                {
-                  "backgroundColor": "#8febbd",
-                },
-                {
-                  "borderColor": "rgba(0, 0, 0, 0.1)",
-                  "borderWidth": 1,
-                },
-                undefined,
-              ]
-            }
-            testID="avatar-image"
+            testID="user-avatar"
           >
-            <Image
-              onError={[Function]}
-              source={
-                {
-                  "uri": "https://i.imgur.com/spueyAP.png",
-                }
-              }
+            <View
               style={
                 [
-                  {},
+                  {
+                    "alignItems": "center",
+                    "borderRadius": 9999,
+                    "justifyContent": "center",
+                    "overflow": "hidden",
+                  },
                   {
                     "height": 32,
                     "width": 32,
                   },
+                  {
+                    "backgroundColor": "#8febbd",
+                  },
+                  {
+                    "borderColor": "rgba(0, 0, 0, 0.1)",
+                    "borderWidth": 1,
+                  },
+                  undefined,
                 ]
               }
-            />
+              testID="avatar-image"
+            >
+              <Image
+                onError={[Function]}
+                source={
+                  {
+                    "uri": "https://i.imgur.com/spueyAP.png",
+                  }
+                }
+                style={
+                  [
+                    {},
+                    {
+                      "height": 32,
+                      "width": 32,
+                    },
+                  ]
+                }
+              />
+            </View>
           </View>
         </View>
       </View>
diff --git a/package/src/components/ui/Avatar/AvatarStack.tsx b/package/src/components/ui/Avatar/AvatarStack.tsx
index bdb6991fbc..e3c11f19c3 100644
--- a/package/src/components/ui/Avatar/AvatarStack.tsx
+++ b/package/src/components/ui/Avatar/AvatarStack.tsx
@@ -10,7 +10,7 @@ import { UserAvatar } from './UserAvatar';
 import { BadgeCount } from '../Badge';
 
 export type AvatarStackProps = {
-  avatarSize?: 'sm' | 'md' | 'xs';
+  avatarSize?: 'md' | 'sm' | 'xs';
   maxVisible?: number;
   items: React.ReactNode[];
   overlap?: number;
@@ -24,41 +24,50 @@ export const AvatarStack = (props: AvatarStackProps) => {
   const visibleItems = items.slice(0, maxVisible);
   const extraCount = items.length - visibleItems.length;
 
-  if (extraCount > 0) {
-    visibleItems.push(
-      <BadgeCount
-        count={extraCount}
-        size={avatarSize === 'sm' || avatarSize === 'md' ? 'md' : 'sm'}
-      />,
-    );
-  }
-
   const totalWidth = diameter + (visibleItems.length - 1) * visiblePortion;
 
+  const badgeCountSize = avatarSize === 'md' ? 'lg' : avatarSize === 'sm' ? 'md' : 'sm';
+
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          width: totalWidth,
-        },
-      ]}
-    >
-      {visibleItems.map((item, index) => {
-        return (
-          <View
-            style={[
-              styles.item,
-              {
-                left: index * visiblePortion,
-              },
-            ]}
-            key={index}
-          >
-            {item}
-          </View>
-        );
-      })}
+    <View style={styles.wrapper}>
+      <View
+        style={[
+          styles.container,
+          {
+            width: totalWidth,
+            height: diameter,
+          },
+        ]}
+      >
+        {visibleItems.map((item, index) => {
+          return (
+            <View
+              style={[
+                styles.item,
+                {
+                  left: index * visiblePortion,
+                },
+              ]}
+              key={index}
+            >
+              {item}
+            </View>
+          );
+        })}
+      </View>
+
+      {extraCount > 0 && (
+        <View
+          style={[
+            styles.badgeCount,
+            {
+              marginLeft: -(overlap * diameter),
+            },
+          ]}
+        >
+          <BadgeCount count={extraCount} size={badgeCountSize} />
+        </View>
+      )}
     </View>
   );
 };
@@ -100,6 +109,10 @@ const useStyles = () => {
         item: {
           position: 'absolute',
         },
+        badgeCount: {},
+        wrapper: {
+          flexDirection: 'row',
+        },
       }),
     [],
   );