diff --git a/src/components/AvatarStack/AvatarStack.scss b/src/components/AvatarStack/AvatarStack.scss
index 970f814b8b..26413ff5dc 100644
--- a/src/components/AvatarStack/AvatarStack.scss
+++ b/src/components/AvatarStack/AvatarStack.scss
@@ -10,7 +10,7 @@ $block: '.#{variables.$ns}avatar-stack';
 
     display: inline-flex;
     justify-content: flex-end;
-    flex-direction: row-reverse;
+    flex-direction: row;
 
     margin: 0;
     padding: 0;
@@ -31,8 +31,7 @@ $block: '.#{variables.$ns}avatar-stack';
         display: flex;
         z-index: 0;
         border-radius: 100%;
-
-        &:not(:first-child) {
+        &:not(:last-child) {
             margin-inline-end: calc(-1 * var(--_--overlap));
         }
     }
diff --git a/src/components/AvatarStack/AvatarStack.tsx b/src/components/AvatarStack/AvatarStack.tsx
index 9578e5c914..b9a521ee78 100644
--- a/src/components/AvatarStack/AvatarStack.tsx
+++ b/src/components/AvatarStack/AvatarStack.tsx
@@ -12,6 +12,9 @@ import './AvatarStack.scss';
 
 const b = block('avatar-stack');
 
+// Default style for more button item
+const DEFAULT_MORE_BUTTON_STYLE = {zIndex: 0};
+
 const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps>(
     (
         {
@@ -43,10 +46,17 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
                 return;
             }
 
-            const item = <AvatarStackItem key={visibleItems.length}>{child}</AvatarStackItem>;
+            const item = (
+                <AvatarStackItem
+                    key={visibleItems.length}
+                    style={{zIndex: normalizedMax - visibleItems.length}}
+                >
+                    {child}
+                </AvatarStackItem>
+            );
 
             if (visibleItems.length < normalizedMax) {
-                visibleItems.unshift(item);
+                visibleItems.push(item);
             }
         });
 
@@ -57,8 +67,9 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
             // to restore role manually
             // eslint-disable-next-line jsx-a11y/no-redundant-roles
             <ul className={b({'overlap-size': overlapSize}, className)} role={'list'} ref={ref}>
+                {visibleItems}
                 {hasMoreButton ? (
-                    <AvatarStackItem key="more-button">
+                    <AvatarStackItem key="more-button" style={DEFAULT_MORE_BUTTON_STYLE}>
                         {renderMore ? (
                             renderMore({count: moreItems})
                         ) : (
@@ -66,7 +77,6 @@ const AvatarStackComponent = React.forwardRef<HTMLUListElement, AvatarStackProps
                         )}
                     </AvatarStackItem>
                 ) : null}
-                {visibleItems}
             </ul>
         );
     },
diff --git a/src/components/AvatarStack/AvatarStackItem.tsx b/src/components/AvatarStack/AvatarStackItem.tsx
index 37ca62a698..ac67beb289 100644
--- a/src/components/AvatarStack/AvatarStackItem.tsx
+++ b/src/components/AvatarStack/AvatarStackItem.tsx
@@ -4,10 +4,14 @@ import {block} from '../utils/cn';
 
 const b = block('avatar-stack');
 
-type Props = React.PropsWithChildren<{}>;
+type Props = React.PropsWithChildren<Pick<React.HTMLAttributes<HTMLLIElement>, 'style'>>;
 
-export const AvatarStackItem = ({children}: Props) => {
-    return <li className={b('item')}>{children}</li>;
+export const AvatarStackItem = ({children, style}: Props) => {
+    return (
+        <li className={b('item')} style={style}>
+            {children}
+        </li>
+    );
 };
 
 AvatarStackItem.displayName = 'AvatarStack.Item';