diff --git a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx b/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
index 68c28564d1..ad7a85cc0e 100644
--- a/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
+++ b/frontend/src/component/common/AvatarGroup/AvatarGroup.tsx
@@ -32,6 +32,7 @@ type AvatarGroupProps = {
     users: User[];
     avatarLimit?: number;
     AvatarComponent?: typeof UserAvatar;
+    className?: string;
 };
 
 export const AvatarGroup = ({
@@ -40,18 +41,19 @@ export const AvatarGroup = ({
 }: AvatarGroupProps) => {
     const Avatar = StyledAvatar(AvatarComponent ?? UserAvatar);
 
-    return <GroupCardAvatarsInner AvatarComponent={Avatar} {...props} />;
+    return <AvatarGroupInner AvatarComponent={Avatar} {...props} />;
 };
 
-type GroupCardAvatarsInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
+type AvatarGroupInnerProps = Omit<AvatarGroupProps, 'AvatarComponent'> & {
     AvatarComponent: typeof UserAvatar;
 };
 
-const GroupCardAvatarsInner = ({
+const AvatarGroupInner = ({
     users = [],
     avatarLimit = 9,
     AvatarComponent,
-}: GroupCardAvatarsInnerProps) => {
+    className,
+}: AvatarGroupInnerProps) => {
     const shownUsers = useMemo(
         () =>
             users
@@ -72,7 +74,7 @@ const GroupCardAvatarsInner = ({
     );
 
     return (
-        <StyledAvatars>
+        <StyledAvatars className={className}>
             {shownUsers.map((user) => (
                 <AvatarComponent key={objectId(user)} user={user} />
             ))}
diff --git a/frontend/src/component/feature/FeatureView/Collaborators.tsx b/frontend/src/component/feature/FeatureView/Collaborators.tsx
index 829eca8cea..a936cd55e3 100644
--- a/frontend/src/component/feature/FeatureView/Collaborators.tsx
+++ b/frontend/src/component/feature/FeatureView/Collaborators.tsx
@@ -16,6 +16,7 @@ const SectionContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(0.5),
     alignItems: 'flex-start',
     height: 'min-content',
+    whiteSpace: 'nowrap',
 }));
 
 const LastModifiedByAvatarAndLink = styled('div')(({ theme }) => ({
@@ -36,15 +37,19 @@ const LastModifiedBy: FC<Collaborator> = ({ id, name, imageUrl }) => {
     );
 };
 
+const StyledAvatarGroup = styled(AvatarGroup)({
+    flexWrap: 'nowrap',
+});
+
 const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
     collaborators,
 }) => {
     return (
         <SectionContainer>
             <span className='description'>Collaborators</span>
-            <AvatarGroup
+            <StyledAvatarGroup
                 users={collaborators}
-                avatarLimit={8}
+                avatarLimit={6}
                 AvatarComponent={StyledAvatar}
             />
         </SectionContainer>
@@ -54,18 +59,24 @@ const CollaboratorList: FC<{ collaborators: Collaborator[] }> = ({
 const Container = styled('article')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'row',
-    gap: theme.spacing(10),
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'right',
     [theme.breakpoints.down('xl')]: {
         display: 'none',
     },
+    flex: 1,
 }));
 
 type Props = {
     collaborators: Collaborator[] | undefined;
 };
 
+const Separator = styled('div')(({ theme }) => ({
+    maxWidth: theme.spacing(10),
+    minWidth: theme.spacing(2),
+    flexGrow: 1,
+}));
+
 export const Collaborators: FC<Props> = ({ collaborators }) => {
     if (!collaborators || collaborators.length === 0) {
         return null;
@@ -76,6 +87,7 @@ export const Collaborators: FC<Props> = ({ collaborators }) => {
     return (
         <Container>
             <LastModifiedBy {...lastModifiedBy} />
+            <Separator />
             <CollaboratorList collaborators={collaborators} />
         </Container>
     );