diff --git a/CHANGELOG.md b/CHANGELOG.md
index 68c5531a7a..9080080e7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,9 @@ right (and close / open it)
 - rename LiveRegistration model in LiveSession
 - Disable jitsi prejoin page
 - Admin can access all LiveSession belonging to a video
+- Move on-stage request functional (in Instructor view) from under
+the video to the ViewersList in the right panel
+
 
 ### Fixed
 
diff --git a/src/frontend/components/Button/ButtonLayout/index.spec.tsx b/src/frontend/components/Button/ButtonLayout/index.spec.tsx
index 8a48b60a26..326add545c 100644
--- a/src/frontend/components/Button/ButtonLayout/index.spec.tsx
+++ b/src/frontend/components/Button/ButtonLayout/index.spec.tsx
@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { ButtonLayout } from '.';
 
 const Icon = jest.fn(() => <span>icon</span>);
-const Badge = () => <span>badge</span>;
+const badge = 'badge';
 
 describe('<ButtonLayout />', () => {
   afterEach(() => {
@@ -29,7 +29,7 @@ describe('<ButtonLayout />', () => {
   it('does not render the badge if there is no Icon set', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         label="Button"
         reversedColor={'reversed-color'}
         tintColor={'int-color'}
@@ -61,7 +61,7 @@ describe('<ButtonLayout />', () => {
   it('renders the icon and the badge and the title', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={() => <span>icon</span>}
         label="Button"
         reversedColor={'reversed-color'}
@@ -78,7 +78,7 @@ describe('<ButtonLayout />', () => {
   it('renders the Button component with default style', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={Icon}
         label="Button"
         reversedColor={'#ffffff'}
@@ -96,7 +96,7 @@ describe('<ButtonLayout />', () => {
       {
         height: '100%',
         iconColor: '#0a67de',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -107,7 +107,7 @@ describe('<ButtonLayout />', () => {
   it('renders the Button component with reversed style', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={Icon}
         label="Button"
         reversed
diff --git a/src/frontend/components/Button/ButtonLayout/index.tsx b/src/frontend/components/Button/ButtonLayout/index.tsx
index d07c4a01c4..795b6c6137 100644
--- a/src/frontend/components/Button/ButtonLayout/index.tsx
+++ b/src/frontend/components/Button/ButtonLayout/index.tsx
@@ -22,7 +22,6 @@ const IconBox = styled(Box)`
 
 const TextBox = styled(Box)`
   display: flex;
-  margin-top: 6px;
   text-align: center;
 `;
 
@@ -34,11 +33,14 @@ const StyledText = styled(Text)`
     screenSize === 'small' ? '-0.3px' : '-0.13px'};
   line-height: ${({ screenSize }: ResponsiveProps) =>
     screenSize === 'small' ? '0.8rem' : '0.9rem'};
-  margin: auto;
+`;
+
+const StyledTextBadge = styled(Text)`
+  font-family: 'Roboto-Bold';
 `;
 
 export interface ButtonLayoutSubComponentProps {
-  badge?: JSX.Element;
+  badge?: string;
   Icon?: React.FC<SvgProps>;
   label?: string;
 }
@@ -61,29 +63,37 @@ export const ButtonLayout = ({
 }: ButtonLayoutProps) => {
   const size = useContext(ResponsiveContext);
 
-  let iconColor;
-  let rectColor;
-
-  if (!reversed) {
-    iconColor = tintColor;
-    rectColor = 'none';
-  } else {
-    iconColor = reversedColor;
-    rectColor = tintColor;
-  }
+  const iconColor = reversed ? reversedColor : tintColor;
+  const rectColor = reversed ? tintColor : undefined;
 
   return (
-    <Box align="center" fill>
+    <Box align="center" flex height="100%">
       {Icon && (
         <IconBox screenSize={size}>
           <Icon iconColor={iconColor} focusColor={rectColor} height="100%" />
-          {badge}
+          {badge && (
+            <Box
+              align="center"
+              background="white"
+              border={{
+                color: tintColor,
+                size: 'xsmall',
+              }}
+              pad={{ horizontal: '3px', vertical: '1px' }}
+              round="6px"
+              style={{ position: 'absolute', bottom: '0px', right: '0px' }}
+            >
+              <StyledTextBadge color={tintColor} size="0.688rem">
+                {badge}
+              </StyledTextBadge>
+            </Box>
+          )}
         </IconBox>
       )}
 
       {label && (
-        <TextBox>
-          <StyledText color={textColor} screenSize={size} size=".8rem">
+        <TextBox align="center" margin={{ top: '6px' }}>
+          <StyledText color={textColor} screenSize={size}>
             {label}
           </StyledText>
         </TextBox>
diff --git a/src/frontend/components/Button/index.spec.tsx b/src/frontend/components/Button/index.spec.tsx
index aa5d96e932..1159b71773 100644
--- a/src/frontend/components/Button/index.spec.tsx
+++ b/src/frontend/components/Button/index.spec.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { Button } from '.';
 
 const Icon = jest.fn(() => <span>icon</span>);
-const Badge = () => <span>badge</span>;
+const badge = 'badge';
 
 describe('<Button />', () => {
   afterEach(() => {
@@ -28,14 +28,14 @@ describe('<Button />', () => {
   });
 
   it('does not render the badge if there is no Icon set', () => {
-    render(<Button label="Button" badge={<Badge />} />);
+    render(<Button label="Button" badge={badge} />);
 
     screen.getByRole('button', { name: /Button/i });
     expect(screen.queryByText('badge')).not.toBeInTheDocument();
   });
 
   it('renders the Button component with default style', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} />);
+    render(<Button label="Button" Icon={Icon} badge={badge} />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -45,7 +45,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -54,7 +54,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with default style disabled', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} disabled />);
+    render(<Button label="Button" Icon={Icon} badge={badge} disabled />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -64,7 +64,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#81ade6',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -73,7 +73,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with default style hovered', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} />);
+    render(<Button label="Button" Icon={Icon} badge={badge} />);
 
     fireEvent.mouseEnter(screen.getByRole('button', { name: /Button/i }));
 
@@ -84,7 +84,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -102,7 +102,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with reversed style', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} reversed />);
+    render(<Button label="Button" Icon={Icon} badge={badge} reversed />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -122,7 +122,7 @@ describe('<Button />', () => {
 
   it('renders the Button component with reversed style disabled', () => {
     render(
-      <Button label="Button" Icon={Icon} badge={<Badge />} disabled reversed />,
+      <Button label="Button" Icon={Icon} badge={badge} disabled reversed />,
     );
 
     screen.getByRole('button', { name: /Button/i });
@@ -142,7 +142,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with reversed style hovered', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} reversed />);
+    render(<Button label="Button" Icon={Icon} badge={badge} reversed />);
 
     fireEvent.mouseEnter(screen.getByRole('button'));
 
@@ -164,7 +164,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
diff --git a/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-instructor-and-compares-it-with-snapshot-1-snap.png b/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-instructor-and-compares-it-with-snapshot-1-snap.png
index af997858bf..3bfc076ddc 100644
Binary files a/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-instructor-and-compares-it-with-snapshot-1-snap.png and b/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-instructor-and-compares-it-with-snapshot-1-snap.png differ
diff --git a/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-student-and-compares-it-with-snapshot-1-snap.png b/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-student-and-compares-it-with-snapshot-1-snap.png
index c5db28e24f..b65c368ae4 100644
Binary files a/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-student-and-compares-it-with-snapshot-1-snap.png and b/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/__image_snapshots__/index-spec-tsx-chat-avatar-renders-the-avatar-for-student-and-compares-it-with-snapshot-1-snap.png differ
diff --git a/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/index.tsx b/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/index.tsx
index d9f75585dc..574a7cdb47 100644
--- a/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/index.tsx
+++ b/src/frontend/components/Chat/SharedChatComponents/ChatAvatar/index.tsx
@@ -1,8 +1,11 @@
 import { Box } from 'grommet';
+import { normalizeColor } from 'grommet/utils';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
 
+import { theme } from 'utils/theme/theme';
+
 const messages = defineMessages({
   avatarTitle: {
     defaultMessage: "The user's avatar",
@@ -11,9 +14,13 @@ const messages = defineMessages({
   },
 });
 
+interface AvatarProps {
+  isInstructor: boolean;
+}
+
 const AvatarBox = styled(Box)`
-  // minWidth is set otherwise avatar width is crushed by the margin of the component next to the avatar
-  min-width: 24px;
+  outline: ${({ isInstructor }: AvatarProps) =>
+    isInstructor && `2px solid ${normalizeColor('blue-active', theme)}`};
 `;
 
 interface ChatAvatarProps {
@@ -24,19 +31,12 @@ export const ChatAvatar = ({ isInstructor }: ChatAvatarProps) => {
   const intl = useIntl();
   return (
     <AvatarBox
-      background="bg-marsha"
-      border={
-        isInstructor
-          ? {
-              color: 'blue-chat',
-              size: 'small',
-            }
-          : undefined
-      }
-      height="24px"
+      background={`${normalizeColor('blue-active', theme)}19`}
+      isInstructor={isInstructor!}
+      height="26px"
       round="6px"
       title={intl.formatMessage(messages.avatarTitle)}
-      width="24px"
+      width="26px"
     />
   );
 };
diff --git a/src/frontend/components/Chat/SharedChatComponents/ChatConversationDisplayer/__image_snapshots__/index-spec-tsx-chat-conversation-displayer-renders-components-with-messages-and-presences-and-compares-it-with-previous-render-1-snap.png b/src/frontend/components/Chat/SharedChatComponents/ChatConversationDisplayer/__image_snapshots__/index-spec-tsx-chat-conversation-displayer-renders-components-with-messages-and-presences-and-compares-it-with-previous-render-1-snap.png
index befc0feb2a..2583cb12fd 100644
Binary files a/src/frontend/components/Chat/SharedChatComponents/ChatConversationDisplayer/__image_snapshots__/index-spec-tsx-chat-conversation-displayer-renders-components-with-messages-and-presences-and-compares-it-with-previous-render-1-snap.png and b/src/frontend/components/Chat/SharedChatComponents/ChatConversationDisplayer/__image_snapshots__/index-spec-tsx-chat-conversation-displayer-renders-components-with-messages-and-presences-and-compares-it-with-previous-render-1-snap.png differ
diff --git a/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-are-several-messages-and-compares-it-with-previous-render-1-snap.png b/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-are-several-messages-and-compares-it-with-previous-render-1-snap.png
index 3197f4eba9..0442129a94 100644
Binary files a/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-are-several-messages-and-compares-it-with-previous-render-1-snap.png and b/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-are-several-messages-and-compares-it-with-previous-render-1-snap.png differ
diff --git a/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-is-only-one-message-and-compares-it-with-previous-render-1-snap.png b/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-is-only-one-message-and-compares-it-with-previous-render-1-snap.png
index 04136b9387..60b2ca9cf7 100644
Binary files a/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-is-only-one-message-and-compares-it-with-previous-render-1-snap.png and b/src/frontend/components/Chat/SharedChatComponents/ChatMessageGroupItem/__image_snapshots__/index-spec-tsx-chat-message-group-item-renders-the-component-when-there-is-only-one-message-and-compares-it-with-previous-render-1-snap.png differ
diff --git a/src/frontend/components/Chat/SharedChatComponents/ChatMessageMetadatas/index.spec.tsx b/src/frontend/components/Chat/SharedChatComponents/ChatMessageMetadatas/index.spec.tsx
index 60372be640..195fda8e50 100644
--- a/src/frontend/components/Chat/SharedChatComponents/ChatMessageMetadatas/index.spec.tsx
+++ b/src/frontend/components/Chat/SharedChatComponents/ChatMessageMetadatas/index.spec.tsx
@@ -23,8 +23,8 @@ describe('<ChatMessageMetadatas />', () => {
     );
 
     expect(chatAvatarDiv).toHaveStyle({
-      width: '24px',
-      height: '24px',
+      width: '26px',
+      height: '26px',
     });
     expect(senderNameDiv).toHaveTextContent('John Doe');
     expect(messageTimeDiv).toHaveTextContent('12:12');
diff --git a/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx
deleted file mode 100644
index 612516a956..0000000000
--- a/src/frontend/components/DashboardJoinDiscussion/index.spec.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { render, screen, within } from '@testing-library/react';
-import React from 'react';
-
-import { videoMockFactory } from 'utils/tests/factories';
-import { wrapInIntlProvider } from 'utils/tests/intl';
-import { DashboardJoinDiscussion } from '.';
-
-jest.mock('utils/window', () => ({
-  converse: {
-    acceptParticipantToJoin: jest.fn(),
-    kickParticipant: jest.fn(),
-    rejectParticipantToJoin: jest.fn(),
-  },
-}));
-
-describe('<DashboardJoinDiscussion />', () => {
-  it('renders the components and updates the participant list', () => {
-    const participant1 = {
-      id: 'participant1',
-      name: 'John Doe',
-    };
-    const participant2 = {
-      id: 'participant2',
-      name: 'Jane Doe',
-    };
-
-    const video = videoMockFactory();
-
-    // participant 1 is in the waiting list
-    const { rerender } = render(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussion
-          video={{ ...video, participants_asking_to_join: [participant1] }}
-        />,
-      ),
-    );
-
-    const askParticipant1 = screen.getByTestId('ask-participant1');
-    within(askParticipant1).getByText('John Doe');
-    within(askParticipant1).getByRole('button', { name: 'accept' });
-    within(askParticipant1).getByRole('button', {
-      name: 'reject',
-    });
-
-    // reject the request
-    rerender(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussion
-          video={{ ...video, participants_asking_to_join: [] }}
-        />,
-      ),
-    );
-
-    // nobody is in the waiting list
-    expect(screen.queryByTestId('ask-participant1')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('ask-participant2')).not.toBeInTheDocument();
-
-    // add participant 2 to the waiting list
-    rerender(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussion
-          video={{ ...video, participants_asking_to_join: [participant2] }}
-        />,
-      ),
-    );
-
-    const askParticipant2 = screen.getByTestId('ask-participant2');
-    within(askParticipant2).getByText('Jane Doe');
-    within(askParticipant2).getByRole('button', {
-      name: 'accept',
-    });
-    within(askParticipant1).getByRole('button', { name: 'reject' });
-
-    // nobody is in the discussion
-    expect(screen.queryByTestId('in-participant1')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('in-participant2')).not.toBeInTheDocument();
-
-    // accept the participant 2
-    rerender(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussion
-          video={{ ...video, participants_in_discussion: [participant2] }}
-        />,
-      ),
-    );
-
-    // participant 2 is in the discussion
-    const inParticipant2 = screen.getByTestId('in-participant2');
-
-    within(inParticipant2).getByRole('button', {
-      name: 'kick out participant',
-    });
-
-    // remove participant 2 from discussion
-    rerender(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussion
-          video={{
-            ...video,
-            participants_asking_to_join: [],
-            participants_in_discussion: [],
-          }}
-        />,
-      ),
-    );
-
-    // nobody in the waiting list nor in the discussion
-    expect(screen.queryByTestId('ask-participant1')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('ask-participant2')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('in-participant1')).not.toBeInTheDocument();
-    expect(screen.queryByTestId('in-participant2')).not.toBeInTheDocument();
-  });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussion/index.tsx b/src/frontend/components/DashboardJoinDiscussion/index.tsx
deleted file mode 100644
index 506ebad684..0000000000
--- a/src/frontend/components/DashboardJoinDiscussion/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Box, Text } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { DashboardJoinDiscussionAcceptButton } from 'components/DashboardJoinDiscussionAcceptButton';
-import { DashboardJoinDiscussionRejectButton } from 'components/DashboardJoinDiscussionRejectButton';
-import { DashboardJoinDiscussionKickButton } from 'components/DashboardJoinDiscussionKickButton';
-import { Video } from 'types/tracks';
-
-const messages = defineMessages({
-  participantAsking: {
-    defaultMessage: 'is asking to join the discussion.',
-    description:
-      'Message to inform the instructor that a participant is asking to join the discussion',
-    id: 'components.DashboardJoinDiscussion.participantAsking',
-  },
-  participantInDiscussion: {
-    defaultMessage: 'has joined the discussion.',
-    description:
-      'Message to inform the instructor that a participant has joined the discussion',
-    id: 'components.DashboardJoinDiscussion.participantInDiscussion',
-  },
-});
-
-interface DashboardJoinDiscussionProps {
-  video: Video;
-}
-
-export const DashboardJoinDiscussion = ({
-  video,
-}: DashboardJoinDiscussionProps) => (
-  <Box direction="column" margin="small">
-    {video.participants_asking_to_join?.map((participant) => (
-      <Box
-        direction="row"
-        align="center"
-        margin="small"
-        key={`${participant.id}`}
-        data-testid={`ask-${participant.id}`}
-      >
-        <Text weight="bold" margin="small">
-          {participant.name}{' '}
-        </Text>
-        <FormattedMessage {...messages.participantAsking} />
-        <DashboardJoinDiscussionAcceptButton
-          participant={participant}
-          video={video}
-        />
-        <DashboardJoinDiscussionRejectButton participant={participant} />
-      </Box>
-    ))}
-    {video.participants_in_discussion?.map((participant) => (
-      <Box
-        direction="row"
-        align="center"
-        margin="small"
-        key={`${participant.id}`}
-        data-testid={`in-${participant.id}`}
-      >
-        <Text weight="bold" margin="small">
-          {participant.name}{' '}
-        </Text>
-        <FormattedMessage {...messages.participantInDiscussion} />
-        <DashboardJoinDiscussionKickButton participant={participant} />
-      </Box>
-    ))}
-  </Box>
-);
diff --git a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx
deleted file mode 100644
index 9eadaab395..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.spec.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { videoMockFactory } from '../../utils/tests/factories';
-import { wrapInIntlProvider } from '../../utils/tests/intl';
-import * as mockWindow from '../../utils/window';
-import { DashboardJoinDiscussionAcceptButton } from '.';
-
-jest.mock('../../utils/window', () => ({
-  converse: {
-    acceptParticipantToJoin: jest.fn(),
-  },
-}));
-
-describe('<DashboardJoinDiscussionAcceptButton />', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-  it('renders the accept button and click on it', () => {
-    const participant = {
-      id: 'participant1',
-      name: 'John Doe',
-    };
-
-    const video = videoMockFactory();
-
-    render(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussionAcceptButton
-          participant={participant}
-          video={video}
-        />,
-      ),
-    );
-
-    const acceptButton = screen.getByRole('button', { name: 'accept' });
-
-    fireEvent.click(acceptButton);
-
-    expect(mockWindow.converse.acceptParticipantToJoin).toHaveBeenCalledWith(
-      participant,
-      video,
-    );
-  });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx b/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx
deleted file mode 100644
index e6eaa484d6..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionAcceptButton/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Button } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { Participant } from '../../types/Participant';
-import { Video } from '../../types/tracks';
-import { converse } from '../../utils/window';
-
-const messages = defineMessages({
-  acceptParticipant: {
-    defaultMessage: 'accept',
-    description: 'Accept the participant in the discussion',
-    id: 'components.DashboardJoinDiscussionAcceptButton.acceptParticipant',
-  },
-});
-
-interface DashboardJoinDiscussionAcceptButtonProps {
-  participant: Participant;
-  video: Video;
-}
-
-export const DashboardJoinDiscussionAcceptButton = ({
-  participant,
-  video,
-}: DashboardJoinDiscussionAcceptButtonProps) => {
-  const onClick = () => {
-    converse.acceptParticipantToJoin(participant, video);
-  };
-
-  return (
-    <Button
-      label={<FormattedMessage {...messages.acceptParticipant} />}
-      primary={true}
-      onClick={onClick}
-      margin="small"
-      size="small"
-    />
-  );
-};
diff --git a/src/frontend/components/DashboardJoinDiscussionKickButton/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussionKickButton/index.spec.tsx
deleted file mode 100644
index 13d8272c63..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionKickButton/index.spec.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { wrapInIntlProvider } from '../../utils/tests/intl';
-import * as mockWindow from '../../utils/window';
-import { DashboardJoinDiscussionKickButton } from '.';
-
-jest.mock('../../utils/window', () => ({
-  converse: {
-    kickParticipant: jest.fn(),
-  },
-}));
-
-describe('<DashboardJoinDiscussionKickButton />', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-  it('renders the button and click on it', () => {
-    const participant = {
-      id: 'participant1',
-      name: 'John Doe',
-    };
-
-    render(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussionKickButton participant={participant} />,
-      ),
-    );
-
-    const kickButton = screen.getByRole('button', {
-      name: 'kick out participant',
-    });
-
-    fireEvent.click(kickButton);
-
-    expect(mockWindow.converse.kickParticipant).toHaveBeenCalledWith(
-      participant,
-    );
-  });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussionKickButton/index.tsx b/src/frontend/components/DashboardJoinDiscussionKickButton/index.tsx
deleted file mode 100644
index b96238cfe6..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionKickButton/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Button } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { Participant } from '../../types/Participant';
-import { converse } from '../../utils/window';
-
-const messages = defineMessages({
-  kickParticipant: {
-    defaultMessage: 'kick out participant',
-    description: 'Kick the participant out of the discussion',
-    id: 'components.DashboardJoinDiscussionKickButton.kickParticipant',
-  },
-});
-
-interface DashboardJoinDiscussionKickButtonProps {
-  participant: Participant;
-}
-
-export const DashboardJoinDiscussionKickButton = ({
-  participant,
-}: DashboardJoinDiscussionKickButtonProps) => {
-  const onClick = () => {
-    converse.kickParticipant(participant);
-  };
-
-  return (
-    <Button
-      label={<FormattedMessage {...messages.kickParticipant} />}
-      primary={true}
-      onClick={onClick}
-      margin="small"
-      size="small"
-    />
-  );
-};
diff --git a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.spec.tsx b/src/frontend/components/DashboardJoinDiscussionRejectButton/index.spec.tsx
deleted file mode 100644
index 93e1b7162d..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.spec.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { wrapInIntlProvider } from '../../utils/tests/intl';
-import * as mockWindow from '../../utils/window';
-import { DashboardJoinDiscussionRejectButton } from '.';
-
-jest.mock('../../utils/window', () => ({
-  converse: {
-    rejectParticipantToJoin: jest.fn(),
-  },
-}));
-
-describe('<DashboardJoinDiscussionRejectButton />', () => {
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
-  it('renders the button and click on it', () => {
-    const participant = {
-      id: 'participant1',
-      name: 'John Doe',
-    };
-
-    render(
-      wrapInIntlProvider(
-        <DashboardJoinDiscussionRejectButton participant={participant} />,
-      ),
-    );
-
-    const rejectButton = screen.getByRole('button', { name: 'reject' });
-
-    fireEvent.click(rejectButton);
-    expect(mockWindow.converse.rejectParticipantToJoin).toHaveBeenCalledWith(
-      participant,
-    );
-  });
-});
diff --git a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.tsx b/src/frontend/components/DashboardJoinDiscussionRejectButton/index.tsx
deleted file mode 100644
index bc26435c41..0000000000
--- a/src/frontend/components/DashboardJoinDiscussionRejectButton/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Button } from 'grommet';
-import React from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
-
-import { Participant } from '../../types/Participant';
-import { converse } from '../../utils/window';
-
-const messages = defineMessages({
-  rejectParticipant: {
-    defaultMessage: 'reject',
-    description: 'Reject the participant who requests to join the discussion',
-    id: 'components.DashboardJoinDiscussionRejectButton.rejectParticipant',
-  },
-});
-
-interface DashboardJoinDiscussionRejectButtonProps {
-  participant: Participant;
-}
-
-export const DashboardJoinDiscussionRejectButton = ({
-  participant,
-}: DashboardJoinDiscussionRejectButtonProps) => {
-  const onClick = () => {
-    converse.rejectParticipantToJoin(participant);
-  };
-
-  return (
-    <Button
-      label={<FormattedMessage {...messages.rejectParticipant} />}
-      onClick={onClick}
-      margin="small"
-      size="small"
-    />
-  );
-};
diff --git a/src/frontend/components/DashboardVideoLive/index.tsx b/src/frontend/components/DashboardVideoLive/index.tsx
index d7b7df454d..1b2a369f15 100644
--- a/src/frontend/components/DashboardVideoLive/index.tsx
+++ b/src/frontend/components/DashboardVideoLive/index.tsx
@@ -3,7 +3,6 @@ import React, { Fragment, useEffect, useState } from 'react';
 
 import { ConverseInitializer } from 'components/ConverseInitializer';
 import { DashboardVideoLivePairing } from 'components/DashboardVideoLivePairing';
-import { DashboardVideoLiveRunning } from 'components/DashboardVideoLiveRunning';
 import { LiveVideoLayout } from 'components/LiveVideoLayout';
 import { LiveVideoPanel } from 'components/LiveVideoPanel';
 import { ScheduledVideoForm } from 'components/ScheduledVideoForm';
@@ -107,9 +106,6 @@ export const DashboardVideoLive = ({ video }: DashboardVideoLiveProps) => {
                 [liveState.IDLE, liveState.PAUSED].includes(
                   video.live_state,
                 ) && <TeacherLiveTypeSwitch video={video} />}
-              {video.live_state === liveState.RUNNING && (
-                <DashboardVideoLiveRunning video={video} />
-              )}
             </Box>
 
             {video.live_state !== liveState.STOPPED && (
diff --git a/src/frontend/components/DashboardVideoLiveRunning/index.spec.tsx b/src/frontend/components/DashboardVideoLiveRunning/index.spec.tsx
deleted file mode 100644
index 88687e4819..0000000000
--- a/src/frontend/components/DashboardVideoLiveRunning/index.spec.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { LiveModeType } from 'types/tracks';
-import { videoMockFactory } from 'utils/tests/factories';
-import { wrapInIntlProvider } from 'utils/tests/intl';
-
-import { DashboardVideoLiveRunning } from '.';
-
-jest.mock('data/appData', () => ({
-  appData: { jwt: 'cool_token_m8' },
-}));
-
-describe('<DashboardVideoLiveRunning />', () => {
-  it('renders participants in the discussion', () => {
-    const video = videoMockFactory({
-      live_type: LiveModeType.JITSI,
-      participants_in_discussion: [{ id: 'an_other_id', name: 'his name' }],
-    });
-
-    render(wrapInIntlProvider(<DashboardVideoLiveRunning video={video} />));
-
-    screen.getByText('his name');
-    screen.getByText('has joined the discussion.');
-    screen.getByRole('button', { name: 'kick out participant' });
-  });
-
-  it('renders participants asking to join', () => {
-    const video = videoMockFactory({
-      live_type: LiveModeType.JITSI,
-      participants_asking_to_join: [{ id: 'some_id', name: 'my name' }],
-    });
-
-    render(wrapInIntlProvider(<DashboardVideoLiveRunning video={video} />));
-
-    screen.getByText('my name');
-    screen.getByText('is asking to join the discussion.');
-    screen.getByRole('button', { name: 'accept' });
-    screen.getByRole('button', { name: 'reject' });
-  });
-});
diff --git a/src/frontend/components/DashboardVideoLiveRunning/index.tsx b/src/frontend/components/DashboardVideoLiveRunning/index.tsx
deleted file mode 100644
index 17d4096c6e..0000000000
--- a/src/frontend/components/DashboardVideoLiveRunning/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Box } from 'grommet';
-import React from 'react';
-
-import { DashboardJoinDiscussion } from 'components/DashboardJoinDiscussion';
-import { LiveModeType, Video } from 'types/tracks';
-
-interface DashboardVideoLiveRunningProps {
-  video: Video;
-}
-
-export const DashboardVideoLiveRunning = ({
-  video,
-}: DashboardVideoLiveRunningProps) => {
-  return (
-    <Box fill>
-      {video.live_type === LiveModeType.JITSI && (
-        <DashboardJoinDiscussion video={video} />
-      )}
-    </Box>
-  );
-};
diff --git a/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/__image_snapshots__/index-spec-tsx-student-hide-viewers-button-closes-the-panel-and-select-viewers-item-1-snap.png b/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/__image_snapshots__/index-spec-tsx-student-hide-viewers-button-closes-the-panel-and-select-viewers-item-1-snap.png
new file mode 100644
index 0000000000..29d2e18fc0
Binary files /dev/null and b/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/__image_snapshots__/index-spec-tsx-student-hide-viewers-button-closes-the-panel-and-select-viewers-item-1-snap.png differ
diff --git a/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/index.tsx b/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/index.tsx
index 71309827c4..15e98a2409 100644
--- a/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/index.tsx
+++ b/src/frontend/components/LiveControls/ViewersWrapper/StudentHideViewersButton/index.tsx
@@ -18,7 +18,13 @@ const messages = defineMessages({
   },
 });
 
-export const StudentHideViewersButton = () => {
+interface StudentHideViewersButtonProps {
+  nbrOfOnStageRequests?: number;
+}
+
+export const StudentHideViewersButton = ({
+  nbrOfOnStageRequests,
+}: StudentHideViewersButtonProps) => {
   const intl = useIntl();
   const { setPanelVisibility } = useLivePanelState((state) => ({
     setPanelVisibility: state.setPanelVisibility,
@@ -27,6 +33,11 @@ export const StudentHideViewersButton = () => {
   return (
     <Button
       label={intl.formatMessage(messages.viewers)}
+      badge={
+        nbrOfOnStageRequests !== 0
+          ? nbrOfOnStageRequests?.toString()
+          : undefined
+      }
       Icon={ViewersSVG}
       onClick={() => {
         setPanelVisibility(false);
diff --git a/src/frontend/components/LiveControls/ViewersWrapper/StudentShowViewersButton/index.tsx b/src/frontend/components/LiveControls/ViewersWrapper/StudentShowViewersButton/index.tsx
index 817c441c88..b2c540acdd 100644
--- a/src/frontend/components/LiveControls/ViewersWrapper/StudentShowViewersButton/index.tsx
+++ b/src/frontend/components/LiveControls/ViewersWrapper/StudentShowViewersButton/index.tsx
@@ -21,7 +21,12 @@ const messages = defineMessages({
   },
 });
 
-export const StudentShowViewersButton = () => {
+interface StudentShowViewersButtonProps {
+  nbrOfOnStageRequests?: number;
+}
+export const StudentShowViewersButton = ({
+  nbrOfOnStageRequests,
+}: StudentShowViewersButtonProps) => {
   const intl = useIntl();
   const { setPanelVisibility } = useLivePanelState((state) => ({
     setPanelVisibility: state.setPanelVisibility,
@@ -29,6 +34,11 @@ export const StudentShowViewersButton = () => {
 
   return (
     <Button
+      badge={
+        nbrOfOnStageRequests !== 0
+          ? nbrOfOnStageRequests?.toString()
+          : undefined
+      }
       label={intl.formatMessage(messages.viewers)}
       Icon={ViewersSVG}
       onClick={() => {
diff --git a/src/frontend/components/LiveControls/ViewersWrapper/index.spec.tsx b/src/frontend/components/LiveControls/ViewersWrapper/index.spec.tsx
index aeddda3eb0..7509f50432 100644
--- a/src/frontend/components/LiveControls/ViewersWrapper/index.spec.tsx
+++ b/src/frontend/components/LiveControls/ViewersWrapper/index.spec.tsx
@@ -5,6 +5,10 @@ import {
   LivePanelItem,
   useLivePanelState,
 } from 'data/stores/useLivePanelState';
+import {
+  participantMockFactory,
+  videoMockFactory,
+} from 'utils/tests/factories';
 import { wrapInIntlProvider } from 'utils/tests/intl';
 import { ViewersWrapper } from '.';
 
@@ -65,4 +69,56 @@ describe('<ViewersWrapper />', () => {
     ).not.toBeInTheDocument();
     screen.getByRole('button', { name: 'Hide viewers' });
   });
+
+  it('renders <StudentShowViewersButton /> with one user wanting to go on stage', () => {
+    const video = videoMockFactory({
+      participants_asking_to_join: [participantMockFactory()],
+    });
+
+    useLivePanelState.setState({
+      isPanelVisible: true,
+      currentItem: LivePanelItem.VIEWERS_LIST,
+      availableItems: [LivePanelItem.VIEWERS_LIST, LivePanelItem.APPLICATION],
+    });
+
+    render(wrapInIntlProvider(<ViewersWrapper video={video} />));
+
+    expect(
+      screen.queryByRole('button', { name: 'Show viewers' }),
+    ).not.toBeInTheDocument();
+    screen.getByRole('button', { name: 'Hide viewers' });
+    screen.getByText(1);
+  });
+
+  it('renders <StudentShowViewersButton /> with several users wanting to go on stage', () => {
+    const video = videoMockFactory({
+      participants_asking_to_join: [
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+        participantMockFactory(),
+      ],
+    });
+
+    useLivePanelState.setState({
+      isPanelVisible: true,
+      currentItem: LivePanelItem.VIEWERS_LIST,
+      availableItems: [LivePanelItem.VIEWERS_LIST, LivePanelItem.APPLICATION],
+    });
+
+    render(wrapInIntlProvider(<ViewersWrapper video={video} />));
+
+    expect(
+      screen.queryByRole('button', { name: 'Show viewers' }),
+    ).not.toBeInTheDocument();
+    screen.getByRole('button', { name: 'Hide viewers' });
+    screen.getByText(11);
+  });
 });
diff --git a/src/frontend/components/LiveControls/ViewersWrapper/index.tsx b/src/frontend/components/LiveControls/ViewersWrapper/index.tsx
index e9c8786732..d363234cad 100644
--- a/src/frontend/components/LiveControls/ViewersWrapper/index.tsx
+++ b/src/frontend/components/LiveControls/ViewersWrapper/index.tsx
@@ -4,19 +4,30 @@ import {
   LivePanelItem,
   useLivePanelState,
 } from 'data/stores/useLivePanelState';
-
+import { Video } from 'types/tracks';
 import { StudentHideViewersButton } from './StudentHideViewersButton';
 import { StudentShowViewersButton } from './StudentShowViewersButton';
 
-export const ViewersWrapper = () => {
+interface ViewersWrapperProps {
+  video?: Video;
+}
+
+export const ViewersWrapper = ({ video }: ViewersWrapperProps) => {
   const { currentItem, isPanelVisible } = useLivePanelState((state) => ({
     currentItem: state.currentItem,
     isPanelVisible: state.isPanelVisible,
   }));
 
+  const nbrOfOnStageRequests =
+    video && video.participants_asking_to_join.length;
+
   if (currentItem === LivePanelItem.VIEWERS_LIST && isPanelVisible) {
-    return <StudentHideViewersButton />;
+    return (
+      <StudentHideViewersButton nbrOfOnStageRequests={nbrOfOnStageRequests} />
+    );
   } else {
-    return <StudentShowViewersButton />;
+    return (
+      <StudentShowViewersButton nbrOfOnStageRequests={nbrOfOnStageRequests} />
+    );
   }
 };
diff --git a/src/frontend/components/LiveVideoPanel/index.spec.tsx b/src/frontend/components/LiveVideoPanel/index.spec.tsx
index c29e3cf147..69ee31148c 100644
--- a/src/frontend/components/LiveVideoPanel/index.spec.tsx
+++ b/src/frontend/components/LiveVideoPanel/index.spec.tsx
@@ -1,29 +1,48 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { getDecodedJwt } from 'data/appData';
 import {
   LivePanelItem,
   useLivePanelState,
 } from 'data/stores/useLivePanelState';
-import { videoMockFactory } from 'utils/tests/factories';
+import { useParticipantsStore } from 'data/stores/useParticipantsStore';
+import {
+  participantMockFactory,
+  videoMockFactory,
+} from 'utils/tests/factories';
 import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
 import { wrapInIntlProvider } from 'utils/tests/intl';
-
+import { DecodedJwt } from 'types/jwt';
 import { LiveVideoPanel } from '.';
 
+const mockAskingParticipant = participantMockFactory();
+const mockParticipant = participantMockFactory();
+
+const mockVideo = videoMockFactory({
+  participants_asking_to_join: [mockAskingParticipant],
+  participants_in_discussion: [mockParticipant],
+});
+
 jest.mock('data/appData', () => ({
-  getDecodedJwt: () => ({
-    permissions: {
-      can_access_dashboard: false,
-      can_update: false,
-    },
-  }),
+  getDecodedJwt: jest.fn(),
 }));
-
-const video = videoMockFactory();
+const mockGetDecodedJwt = getDecodedJwt as jest.MockedFunction<
+  typeof getDecodedJwt
+>;
 
 describe('<LiveVideoPanel />', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
   it('closes the panel if no item is selected', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     const mockSetPanelVisibility = jest.fn();
     useLivePanelState.setState({
       currentItem: undefined,
@@ -36,7 +55,7 @@ describe('<LiveVideoPanel />', () => {
     });
 
     const { container } = render(
-      wrapInIntlProvider(<LiveVideoPanel video={video} />),
+      wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />),
     );
 
     expect(mockSetPanelVisibility).toBeCalled();
@@ -47,6 +66,12 @@ describe('<LiveVideoPanel />', () => {
   });
 
   it('renders the content with selection', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [
@@ -56,7 +81,7 @@ describe('<LiveVideoPanel />', () => {
       ],
     });
 
-    render(wrapInIntlProvider(<LiveVideoPanel video={video} />));
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
 
     screen.getByRole('tablist');
     screen.getByRole('tab', { name: 'application' });
@@ -66,13 +91,96 @@ describe('<LiveVideoPanel />', () => {
     screen.getByText('application content');
   });
 
+  it('renders the correct viewers list if the user is not an instructor', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_update: false,
+      },
+    } as DecodedJwt);
+
+    useParticipantsStore.setState({
+      participants: [
+        {
+          ...mockParticipant,
+          isInstructor: false,
+          isOnStage: false,
+        },
+      ],
+    });
+    useLivePanelState.setState({
+      currentItem: LivePanelItem.VIEWERS_LIST,
+      availableItems: [
+        LivePanelItem.APPLICATION,
+        LivePanelItem.CHAT,
+        LivePanelItem.VIEWERS_LIST,
+      ],
+    });
+
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
+
+    screen.getByRole('tablist');
+    screen.getByRole('tab', { name: 'application' });
+    screen.getByRole('tab', { name: 'chat' });
+    screen.getByRole('tab', { name: 'viewers' });
+
+    screen.getByText('On stage');
+    screen.getByText(mockParticipant.name);
+    expect(screen.queryByText('Demands')).toEqual(null);
+    expect(screen.queryByText(mockAskingParticipant.name)).toEqual(null);
+  });
+
+  it('renders the correct viewers list if the user is an instructor', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_update: true,
+      },
+    } as DecodedJwt);
+
+    useParticipantsStore.setState({
+      participants: [
+        {
+          ...mockParticipant,
+          isInstructor: false,
+          isOnStage: false,
+        },
+      ],
+    });
+
+    useLivePanelState.setState({
+      currentItem: LivePanelItem.VIEWERS_LIST,
+      availableItems: [
+        LivePanelItem.APPLICATION,
+        LivePanelItem.CHAT,
+        LivePanelItem.VIEWERS_LIST,
+      ],
+    });
+
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
+
+    screen.getByRole('tablist');
+    screen.getByRole('tab', { name: 'application' });
+    screen.getByRole('tab', { name: 'chat' });
+    screen.getByRole('tab', { name: 'viewers' });
+
+    screen.getByText('On stage');
+    screen.getByText(mockParticipant.name);
+    screen.getByText('Demands');
+    screen.getByText(mockAskingParticipant.name);
+  });
+
   it('does not render tabs with only one item available', () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [LivePanelItem.APPLICATION],
     });
 
-    render(wrapInIntlProvider(<LiveVideoPanel video={video} />));
+    render(wrapInIntlProvider(<LiveVideoPanel video={mockVideo} />));
 
     expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
     expect(
@@ -87,6 +195,12 @@ describe('<LiveVideoPanel />', () => {
   });
 
   it('renders with appropriate style on large screen', async () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [
@@ -96,10 +210,16 @@ describe('<LiveVideoPanel />', () => {
       ],
     });
 
-    await renderImageSnapshot(<LiveVideoPanel video={video} />);
+    await renderImageSnapshot(<LiveVideoPanel video={mockVideo} />);
   });
 
   it('renders with appropriate style on small screen', async () => {
+    mockGetDecodedJwt.mockReturnValue({
+      permissions: {
+        can_access_dashboard: false,
+        can_update: false,
+      },
+    } as DecodedJwt);
     useLivePanelState.setState({
       currentItem: LivePanelItem.APPLICATION,
       availableItems: [
@@ -109,6 +229,6 @@ describe('<LiveVideoPanel />', () => {
       ],
     });
 
-    await renderImageSnapshot(<LiveVideoPanel video={video} />, 300, 300);
+    await renderImageSnapshot(<LiveVideoPanel video={mockVideo} />, 300, 300);
   });
 });
diff --git a/src/frontend/components/LiveVideoPanel/index.tsx b/src/frontend/components/LiveVideoPanel/index.tsx
index c9421aa1bf..23cf904259 100644
--- a/src/frontend/components/LiveVideoPanel/index.tsx
+++ b/src/frontend/components/LiveVideoPanel/index.tsx
@@ -3,7 +3,8 @@ import { Tabs, Box, Grommet, ResponsiveContext, ThemeType } from 'grommet';
 import styled from 'styled-components';
 
 import { Chat } from 'components/Chat';
-import { StudentViewersList } from 'components/StudentViewersList';
+import { ViewersList } from 'components/ViewersList';
+import { getDecodedJwt } from 'data/appData';
 import {
   LivePanelItem,
   useLivePanelState,
@@ -11,7 +12,6 @@ import {
 import { Video } from 'types/tracks';
 import { ShouldNotHappen } from 'utils/errors/exception';
 import { theme } from 'utils/theme/theme';
-
 import { LiveVideoTabPanel } from './LiveVideoTabPanel';
 
 const StyledGrommet = styled(Grommet)`
@@ -57,6 +57,7 @@ export const LiveVideoPanel = ({ video }: LiveVideoPanelProps) => {
       setPanelVisibility: state.setPanelVisibility,
     }),
   );
+  const canUpdate = getDecodedJwt().permissions.can_update;
 
   //  close panel if there is nothing to display
   useEffect(() => {
@@ -97,7 +98,7 @@ export const LiveVideoPanel = ({ video }: LiveVideoPanelProps) => {
       content = <p>application content</p>;
       break;
     case LivePanelItem.VIEWERS_LIST:
-      content = <StudentViewersList video={video} />;
+      content = <ViewersList isInstructor={canUpdate} video={video} />;
       break;
     default:
       throw new ShouldNotHappen(currentItem);
diff --git a/src/frontend/components/SVGIcons/__image_snapshots__/join-discussion-svg-spec-tsx-join-discussion-svg-renders-join-discussion-svg-focus-2-snap.png b/src/frontend/components/SVGIcons/__image_snapshots__/join-discussion-svg-spec-tsx-join-discussion-svg-renders-join-discussion-svg-focus-2-snap.png
new file mode 100644
index 0000000000..9e5e96a430
Binary files /dev/null and b/src/frontend/components/SVGIcons/__image_snapshots__/join-discussion-svg-spec-tsx-join-discussion-svg-renders-join-discussion-svg-focus-2-snap.png differ
diff --git a/src/frontend/components/SVGIcons/__image_snapshots__/viewers-svg-spec-tsx-viewers-svg-renders-viewers-svg-focus-2-snap.png b/src/frontend/components/SVGIcons/__image_snapshots__/viewers-svg-spec-tsx-viewers-svg-renders-viewers-svg-focus-2-snap.png
new file mode 100644
index 0000000000..7ba55661bb
Binary files /dev/null and b/src/frontend/components/SVGIcons/__image_snapshots__/viewers-svg-spec-tsx-viewers-svg-renders-viewers-svg-focus-2-snap.png differ
diff --git a/src/frontend/components/SVGIcons/__image_snapshots__/waiting-join-discussion-svg-spec-tsx-waiting-join-discussion-svg-renders-waiting-join-discussion-svg-focus-2-snap.png b/src/frontend/components/SVGIcons/__image_snapshots__/waiting-join-discussion-svg-spec-tsx-waiting-join-discussion-svg-renders-waiting-join-discussion-svg-focus-2-snap.png
new file mode 100644
index 0000000000..62accbfa5f
Binary files /dev/null and b/src/frontend/components/SVGIcons/__image_snapshots__/waiting-join-discussion-svg-spec-tsx-waiting-join-discussion-svg-renders-waiting-join-discussion-svg-focus-2-snap.png differ
diff --git a/src/frontend/components/StudentLiveWrapper/index.spec.tsx b/src/frontend/components/StudentLiveWrapper/index.spec.tsx
index a59c762aa9..afad6c6596 100644
--- a/src/frontend/components/StudentLiveWrapper/index.spec.tsx
+++ b/src/frontend/components/StudentLiveWrapper/index.spec.tsx
@@ -280,7 +280,8 @@ describe('<StudentLiveWrapper /> as a viewer', () => {
 
     const viewersTabButton = screen.getByRole('tab', { name: 'viewers' });
     userEvent.click(viewersTabButton);
-    screen.getByText('Other participants');
+    expect(screen.queryByText('On stage')).toBeNull();
+    expect(screen.queryByText('Other participants')).toBeNull();
 
     expect(useLivePanelState.getState().availableItems).toEqual([
       LivePanelItem.CHAT,
@@ -586,7 +587,8 @@ describe('<StudentLiveWrapper /> as a streamer', () => {
 
     const viewersTabButton = screen.getByRole('tab', { name: 'viewers' });
     userEvent.click(viewersTabButton);
-    screen.getByText('Other participants');
+    expect(screen.queryByText('On stage')).toBeNull();
+    expect(screen.queryByText('Other participants')).toBeNull();
 
     expect(useLivePanelState.getState().availableItems).toEqual([
       LivePanelItem.CHAT,
diff --git a/src/frontend/components/StudentViewersList/StudentViewersListHeader/index.spec.tsx b/src/frontend/components/StudentViewersList/StudentViewersListHeader/index.spec.tsx
deleted file mode 100644
index 08787821a4..0000000000
--- a/src/frontend/components/StudentViewersList/StudentViewersListHeader/index.spec.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-
-import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
-import { StudentViewersListHeader } from '.';
-
-describe('<StudentViewersListHeader />', () => {
-  it('renders StudentViewersListHeader component and compares it with previous render.', async () => {
-    await renderImageSnapshot(
-      <StudentViewersListHeader text="An example text" />,
-    );
-    screen.getByText('An example text');
-  });
-});
diff --git a/src/frontend/components/StudentViewersList/StudentViewersListItem/index.spec.tsx b/src/frontend/components/StudentViewersList/StudentViewersListItem/index.spec.tsx
deleted file mode 100644
index d3dcc26f0f..0000000000
--- a/src/frontend/components/StudentViewersList/StudentViewersListItem/index.spec.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-
-import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
-import { StudentViewersListItem } from '.';
-
-describe('<StudentViewersListItem />', () => {
-  it('renders StudentViewersListItem component, for a student, and compares it with previous render.', async () => {
-    await renderImageSnapshot(
-      <StudentViewersListItem isInstructor={false} name={'An example name'} />,
-    );
-    screen.getByText('An example name');
-  });
-
-  it('renders StudentViewersListItem component, for an instructor, and compares it with previous render.', async () => {
-    await renderImageSnapshot(
-      <StudentViewersListItem isInstructor={true} name={'An example name'} />,
-    );
-    screen.getByText('An example name');
-  });
-});
diff --git a/src/frontend/components/StudentViewersList/__image_snapshots__/index-spec-tsx-student-viewers-list-renders-student-viewers-list-component-with-data-and-compares-it-with-previous-render-1-snap.png b/src/frontend/components/StudentViewersList/__image_snapshots__/index-spec-tsx-student-viewers-list-renders-student-viewers-list-component-with-data-and-compares-it-with-previous-render-1-snap.png
deleted file mode 100644
index 8c8d755dcb..0000000000
Binary files a/src/frontend/components/StudentViewersList/__image_snapshots__/index-spec-tsx-student-viewers-list-renders-student-viewers-list-component-with-data-and-compares-it-with-previous-render-1-snap.png and /dev/null differ
diff --git a/src/frontend/components/StudentViewersList/__image_snapshots__/index-spec-tsx-student-viewers-list-renders-student-viewers-list-component-with-data-and-compares-it-with-previous-render-2-snap.png b/src/frontend/components/StudentViewersList/__image_snapshots__/index-spec-tsx-student-viewers-list-renders-student-viewers-list-component-with-data-and-compares-it-with-previous-render-2-snap.png
deleted file mode 100644
index 9efc7f2dff..0000000000
Binary files a/src/frontend/components/StudentViewersList/__image_snapshots__/index-spec-tsx-student-viewers-list-renders-student-viewers-list-component-with-data-and-compares-it-with-previous-render-2-snap.png and /dev/null differ
diff --git a/src/frontend/components/StudentViewersList/index.spec.tsx b/src/frontend/components/StudentViewersList/index.spec.tsx
deleted file mode 100644
index 8bd76c4be2..0000000000
--- a/src/frontend/components/StudentViewersList/index.spec.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Grommet } from 'grommet';
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
-
-import { useParticipantsStore } from 'data/stores/useParticipantsStore';
-import { imageSnapshot } from 'utils/tests/imageSnapshot';
-import { wrapInIntlProvider } from 'utils/tests/intl';
-import { theme } from 'utils/theme/theme';
-import { StudentViewersList } from '.';
-import { GlobalStyles } from 'utils/theme/baseStyles';
-import {
-  participantMockFactory,
-  videoMockFactory,
-} from 'utils/tests/factories';
-
-describe('<StudentViewersList />', () => {
-  it('adds and removes several users from the list.', () => {
-    const video = videoMockFactory();
-    const { rerender } = render(
-      wrapInIntlProvider(<StudentViewersList video={video} />),
-    );
-    expect(screen.queryByText('On stage')).toEqual(null);
-    screen.getByText('Other participants');
-
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: true,
-        isOnStage: true,
-        name: 'Instructor',
-      }),
-    );
-    screen.getByText('Instructor');
-
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: false,
-        isOnStage: false,
-        name: 'Student 1',
-      }),
-    );
-    screen.getByText('Student 1');
-
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: false,
-        isOnStage: false,
-        name: 'Student 2',
-      }),
-    );
-    screen.getByText('Student 2');
-
-    act(() => useParticipantsStore.getState().removeParticipant('Student 2'));
-    expect(screen.queryByText('Student 2')).not.toBeInTheDocument();
-
-    const student2 = participantMockFactory({ name: 'Student 2' });
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: false,
-        isOnStage: false,
-        name: 'Student 2',
-      }),
-    );
-    rerender(
-      wrapInIntlProvider(
-        <StudentViewersList
-          video={{ ...video, participants_in_discussion: [student2] }}
-        />,
-      ),
-    );
-    screen.getByText('Student 2');
-  });
-
-  it('renders StudentViewersList component with data, and compares it with previous render.', async () => {
-    const video = videoMockFactory();
-    render(
-      wrapInIntlProvider(
-        <Grommet theme={theme}>
-          <StudentViewersList video={video} />
-          <GlobalStyles />
-        </Grommet>,
-      ),
-    );
-
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: true,
-        isOnStage: true,
-        name: 'Instructor',
-      }),
-    );
-
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: false,
-        isOnStage: false,
-        name: 'Student 1',
-      }),
-    );
-
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: false,
-        isOnStage: false,
-        name: 'Student 2',
-      }),
-    );
-
-    act(() =>
-      useParticipantsStore.getState().addParticipant({
-        isInstructor: false,
-        isOnStage: true,
-        name: 'Student 3',
-      }),
-    );
-
-    await imageSnapshot();
-
-    act(() => useParticipantsStore.getState().removeParticipant('Student 2'));
-
-    await imageSnapshot();
-  });
-});
diff --git a/src/frontend/components/StudentViewersList/index.tsx b/src/frontend/components/StudentViewersList/index.tsx
deleted file mode 100644
index 283bbd2b96..0000000000
--- a/src/frontend/components/StudentViewersList/index.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import { Box, List } from 'grommet';
-import { defineMessages, useIntl } from 'react-intl';
-
-import {
-  useParticipantsStore,
-  ParticipantType,
-} from 'data/stores/useParticipantsStore/index';
-import { Video } from 'types/tracks';
-import { StudentViewersListHeader } from './StudentViewersListHeader';
-import { StudentViewersListItem } from './StudentViewersListItem';
-
-const messages = defineMessages({
-  onStage: {
-    defaultMessage: 'On stage',
-    description: 'On-stage participants are displayed under this label.',
-    id: 'components.ViewersList.onStage',
-  },
-  otherViewers: {
-    defaultMessage: 'Other participants',
-    description: 'Connected participants are displayed under this label.',
-    id: 'components.ViewersList.otherViewers',
-  },
-});
-
-interface StudentViewersListProps {
-  video: Video;
-}
-
-export const StudentViewersList = ({ video }: StudentViewersListProps) => {
-  const participants = useParticipantsStore((state) => state.participants);
-  const participantsOnStage = participants.filter(
-    (participant) =>
-      video.participants_in_discussion.some(
-        (p) => p.name === participant.name,
-      ) || participant.isInstructor,
-  );
-
-  const participantsNotOnStage = participants.filter(
-    (participant) => !participantsOnStage.includes(participant),
-  );
-  const intl = useIntl();
-
-  return (
-    <Box
-      fill
-      gap="30px"
-      overflow={{
-        horizontal: 'hidden',
-        vertical: 'auto',
-      }}
-      pad={{ bottom: '20px', horizontal: '20px', top: '30px' }}
-    >
-      {participantsOnStage.length !== 0 && (
-        <Box>
-          <StudentViewersListHeader
-            text={intl.formatMessage(messages.onStage)}
-          />
-          <List border={false} data={participantsOnStage} pad={{ top: '8px' }}>
-            {(item: ParticipantType, index: number) => (
-              <StudentViewersListItem
-                isInstructor={item.isInstructor}
-                key={index}
-                name={item.name}
-              />
-            )}
-          </List>
-        </Box>
-      )}
-      <Box>
-        <StudentViewersListHeader
-          text={intl.formatMessage(messages.otherViewers)}
-        />
-        <List border={false} data={participantsNotOnStage} pad={{ top: '8px' }}>
-          {(item: ParticipantType, index: number) => (
-            <StudentViewersListItem
-              isInstructor={item.isInstructor}
-              key={index}
-              name={item.name}
-            />
-          )}
-        </List>
-      </Box>
-    </Box>
-  );
-};
diff --git a/src/frontend/components/TeacherLiveControlBar/index.tsx b/src/frontend/components/TeacherLiveControlBar/index.tsx
index 108dc8822c..b6fcf07eaa 100644
--- a/src/frontend/components/TeacherLiveControlBar/index.tsx
+++ b/src/frontend/components/TeacherLiveControlBar/index.tsx
@@ -65,7 +65,7 @@ export const TeacherLiveControlBar = ({
 
       {availableItems.includes(LivePanelItem.VIEWERS_LIST) && (
         <Box height="100%" style={{ minWidth: '60px' }}>
-          <ViewersWrapper />
+          <ViewersWrapper video={video} />
         </Box>
       )}
 
diff --git a/src/frontend/components/StudentViewersList/StudentViewersListHeader/__image_snapshots__/index-spec-tsx-student-viewers-list-header-renders-student-viewers-list-header-component-and-compares-it-with-previous-render-1-snap.png b/src/frontend/components/ViewersList/components/ViewersListHeader/__image_snapshots__/index-spec-tsx-viewers-list-header-renders-viewers-list-header-component-and-compares-it-with-previous-render-1-snap.png
similarity index 100%
rename from src/frontend/components/StudentViewersList/StudentViewersListHeader/__image_snapshots__/index-spec-tsx-student-viewers-list-header-renders-student-viewers-list-header-component-and-compares-it-with-previous-render-1-snap.png
rename to src/frontend/components/ViewersList/components/ViewersListHeader/__image_snapshots__/index-spec-tsx-viewers-list-header-renders-viewers-list-header-component-and-compares-it-with-previous-render-1-snap.png
diff --git a/src/frontend/components/ViewersList/components/ViewersListHeader/index.spec.tsx b/src/frontend/components/ViewersList/components/ViewersListHeader/index.spec.tsx
new file mode 100644
index 0000000000..40ec9aa9b8
--- /dev/null
+++ b/src/frontend/components/ViewersList/components/ViewersListHeader/index.spec.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
+import { ViewersListHeader } from '.';
+
+describe('<ViewersListHeader />', () => {
+  it('renders ViewersListHeader component and compares it with previous render.', async () => {
+    await renderImageSnapshot(
+      <ViewersListHeader margin={{ bottom: '6px' }} text="An example text" />,
+    );
+    screen.getByText('An example text');
+  });
+});
diff --git a/src/frontend/components/StudentViewersList/StudentViewersListHeader/index.tsx b/src/frontend/components/ViewersList/components/ViewersListHeader/index.tsx
similarity index 58%
rename from src/frontend/components/StudentViewersList/StudentViewersListHeader/index.tsx
rename to src/frontend/components/ViewersList/components/ViewersListHeader/index.tsx
index 48f1bd3f9e..005f237c9d 100644
--- a/src/frontend/components/StudentViewersList/StudentViewersListHeader/index.tsx
+++ b/src/frontend/components/ViewersList/components/ViewersListHeader/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Text } from 'grommet';
+import { Box, BoxProps, Text } from 'grommet';
 import styled from 'styled-components';
 
 const StyledTextHeader = styled(Text)`
@@ -7,20 +7,16 @@ const StyledTextHeader = styled(Text)`
   letter-spacing: -0.2px;
 `;
 
-interface StudentViewersListHeaderProps {
+interface ViewersListHeaderProps extends BoxProps {
   text: string;
 }
 
-export const StudentViewersListHeader = ({
+export const ViewersListHeader = ({
   text,
-}: StudentViewersListHeaderProps) => {
+  ...boxProps
+}: ViewersListHeaderProps) => {
   return (
-    <Box
-      align="start"
-      margin={{
-        bottom: '6px',
-      }}
-    >
+    <Box align="start" {...boxProps}>
       <Box
         align="center"
         border={{
@@ -28,12 +24,12 @@ export const StudentViewersListHeader = ({
           size: 'xsmall',
         }}
         pad={{
-          horizontal: '12px',
+          horizontal: 'small',
           vertical: '2px',
         }}
         round="14px"
       >
-        <StyledTextHeader color="blue-active" size="10px" weight="normal">
+        <StyledTextHeader color="blue-active" size="0.625rem" weight="normal">
           {text}
         </StyledTextHeader>
       </Box>
diff --git a/src/frontend/components/StudentViewersList/StudentViewersListItem/__image_snapshots__/index-spec-tsx-student-viewers-list-item-renders-student-viewers-list-item-component-for-a-student-and-compares-it-with-previous-render-1-snap.png b/src/frontend/components/ViewersList/components/ViewersListItem/__image_snapshots__/index-spec-tsx-viewers-list-item-renders-viewers-list-item-component-for-a-student-and-compares-it-with-previous-render-1-snap.png
similarity index 55%
rename from src/frontend/components/StudentViewersList/StudentViewersListItem/__image_snapshots__/index-spec-tsx-student-viewers-list-item-renders-student-viewers-list-item-component-for-a-student-and-compares-it-with-previous-render-1-snap.png
rename to src/frontend/components/ViewersList/components/ViewersListItem/__image_snapshots__/index-spec-tsx-viewers-list-item-renders-viewers-list-item-component-for-a-student-and-compares-it-with-previous-render-1-snap.png
index a410003448..ac3792acf1 100644
Binary files a/src/frontend/components/StudentViewersList/StudentViewersListItem/__image_snapshots__/index-spec-tsx-student-viewers-list-item-renders-student-viewers-list-item-component-for-a-student-and-compares-it-with-previous-render-1-snap.png and b/src/frontend/components/ViewersList/components/ViewersListItem/__image_snapshots__/index-spec-tsx-viewers-list-item-renders-viewers-list-item-component-for-a-student-and-compares-it-with-previous-render-1-snap.png differ
diff --git a/src/frontend/components/StudentViewersList/StudentViewersListItem/__image_snapshots__/index-spec-tsx-student-viewers-list-item-renders-student-viewers-list-item-component-for-an-instructor-and-compares-it-with-previous-render-1-snap.png b/src/frontend/components/ViewersList/components/ViewersListItem/__image_snapshots__/index-spec-tsx-viewers-list-item-renders-viewers-list-item-component-for-an-instructor-and-compares-it-with-previous-render-1-snap.png
similarity index 51%
rename from src/frontend/components/StudentViewersList/StudentViewersListItem/__image_snapshots__/index-spec-tsx-student-viewers-list-item-renders-student-viewers-list-item-component-for-an-instructor-and-compares-it-with-previous-render-1-snap.png
rename to src/frontend/components/ViewersList/components/ViewersListItem/__image_snapshots__/index-spec-tsx-viewers-list-item-renders-viewers-list-item-component-for-an-instructor-and-compares-it-with-previous-render-1-snap.png
index 47fdf16720..5464131f66 100644
Binary files a/src/frontend/components/StudentViewersList/StudentViewersListItem/__image_snapshots__/index-spec-tsx-student-viewers-list-item-renders-student-viewers-list-item-component-for-an-instructor-and-compares-it-with-previous-render-1-snap.png and b/src/frontend/components/ViewersList/components/ViewersListItem/__image_snapshots__/index-spec-tsx-viewers-list-item-renders-viewers-list-item-component-for-an-instructor-and-compares-it-with-previous-render-1-snap.png differ
diff --git a/src/frontend/components/ViewersList/components/ViewersListItem/index.spec.tsx b/src/frontend/components/ViewersList/components/ViewersListItem/index.spec.tsx
new file mode 100644
index 0000000000..d83f9469d0
--- /dev/null
+++ b/src/frontend/components/ViewersList/components/ViewersListItem/index.spec.tsx
@@ -0,0 +1,21 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderImageSnapshot } from 'utils/tests/imageSnapshot';
+import { ViewersListItem } from '.';
+
+describe('<ViewersListItem />', () => {
+  it('renders ViewersListItem component, for a student, and compares it with previous render.', async () => {
+    await renderImageSnapshot(
+      <ViewersListItem isInstructor={false} name={'An example name'} />,
+    );
+    screen.getByText('An example name');
+  });
+
+  it('renders ViewersListItem component, for an instructor, and compares it with previous render.', async () => {
+    await renderImageSnapshot(
+      <ViewersListItem isInstructor={true} name={'An example name'} />,
+    );
+    screen.getByText('An example name');
+  });
+});
diff --git a/src/frontend/components/StudentViewersList/StudentViewersListItem/index.tsx b/src/frontend/components/ViewersList/components/ViewersListItem/index.tsx
similarity index 84%
rename from src/frontend/components/StudentViewersList/StudentViewersListItem/index.tsx
rename to src/frontend/components/ViewersList/components/ViewersListItem/index.tsx
index d316a52584..263adeae69 100644
--- a/src/frontend/components/StudentViewersList/StudentViewersListItem/index.tsx
+++ b/src/frontend/components/ViewersList/components/ViewersListItem/index.tsx
@@ -9,15 +9,15 @@ const StyledText = styled(Text)`
   letter-spacing: 0.07px;
 `;
 
-interface StudentViewersListItemProps {
+interface ViewersListItemProps {
   isInstructor: boolean;
   name: string;
 }
 
-export const StudentViewersListItem = ({
+export const ViewersListItem = ({
   isInstructor,
   name,
-}: StudentViewersListItemProps) => {
+}: ViewersListItemProps) => {
   return (
     <Box align="center" direction="row" gap="10px">
       <ChatAvatar isInstructor={isInstructor} />
diff --git a/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.spec.tsx b/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.spec.tsx
new file mode 100644
index 0000000000..b4c65fdb73
--- /dev/null
+++ b/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.spec.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import { normalizeColor } from 'grommet/utils';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { theme } from 'utils/theme/theme';
+import { ViewersListItemContainer } from '.';
+
+const GenericChild = () => <p>Some text</p>;
+
+describe('<ViewersListItemContainer />', () => {
+  it('renders ViewersListItemContainer, with a child', () => {
+    render(
+      <ViewersListItemContainer>
+        <GenericChild />
+      </ViewersListItemContainer>,
+    );
+    screen.getByText('Some text');
+  });
+
+  it('checks hover style is applied', async () => {
+    const tree = renderer
+      .create(
+        <ViewersListItemContainer>
+          <GenericChild />
+        </ViewersListItemContainer>,
+      )
+      .toJSON();
+
+    expect(tree).toHaveStyleRule(
+      'background',
+      normalizeColor('bg-marsha', theme),
+      {
+        modifier: ':hover',
+      },
+    );
+  });
+});
diff --git a/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.tsx b/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.tsx
new file mode 100644
index 0000000000..1dd2aa5bd2
--- /dev/null
+++ b/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.tsx
@@ -0,0 +1,26 @@
+import { Box } from 'grommet';
+import { normalizeColor } from 'grommet/utils';
+import React from 'react';
+import styled from 'styled-components';
+
+import { theme } from 'utils/theme/theme';
+
+const StyledItemContainer = styled(Box)`
+  &:hover {
+    background: ${normalizeColor('bg-marsha', theme)};
+  }
+`;
+
+export const ViewersListItemContainer = ({
+  children,
+}: React.PropsWithChildren<{}>) => (
+  <StyledItemContainer
+    align="center"
+    justify="between"
+    direction="row"
+    gap="small"
+    pad={{ horizontal: 'medium', vertical: 'xsmall' }}
+  >
+    {children}
+  </StyledItemContainer>
+);
diff --git a/src/frontend/components/ViewersList/components/ViewersListTextButton/index.spec.tsx b/src/frontend/components/ViewersList/components/ViewersListTextButton/index.spec.tsx
new file mode 100644
index 0000000000..73446617f7
--- /dev/null
+++ b/src/frontend/components/ViewersList/components/ViewersListTextButton/index.spec.tsx
@@ -0,0 +1,21 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { ViewersListTextButton } from '.';
+
+const mockOnClick = jest.fn();
+
+describe('<ViewersListTextButton />', () => {
+  beforeEach(() => jest.resetAllMocks());
+
+  it('renders ViewersListTextButton component and clicks on it', () => {
+    render(
+      <ViewersListTextButton onClick={mockOnClick} text="An example text" />,
+    );
+    screen.getByText('An example text');
+    const button = screen.getByRole('button', { name: 'An example text' });
+    act(() => userEvent.click(button));
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/frontend/components/ViewersList/components/ViewersListTextButton/index.tsx b/src/frontend/components/ViewersList/components/ViewersListTextButton/index.tsx
new file mode 100644
index 0000000000..90d922df05
--- /dev/null
+++ b/src/frontend/components/ViewersList/components/ViewersListTextButton/index.tsx
@@ -0,0 +1,36 @@
+import { Button, Text } from 'grommet';
+import React from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled(Button)`
+  align-items: center;
+  display: flex;
+  height: 20px;
+  padding: 0px 10px;
+`;
+
+const StyledTextButton = styled(Text)`
+  color: white;
+  font-family: 'Roboto-Bold';
+`;
+
+interface ViewersListTextButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+export const ViewersListTextButton = ({
+  onClick,
+  text,
+}: ViewersListTextButtonProps) => {
+  return (
+    <StyledButton
+      a11yTitle={text}
+      color="blue-active"
+      label={<StyledTextButton size="0.625rem">{text}</StyledTextButton>}
+      onClick={onClick}
+      primary
+      title={text}
+    />
+  );
+};
diff --git a/src/frontend/components/ViewersList/index.spec.tsx b/src/frontend/components/ViewersList/index.spec.tsx
new file mode 100644
index 0000000000..f3f799fb12
--- /dev/null
+++ b/src/frontend/components/ViewersList/index.spec.tsx
@@ -0,0 +1,246 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+
+import {
+  participantMockFactory,
+  videoMockFactory,
+} from 'utils/tests/factories';
+import { wrapInIntlProvider } from 'utils/tests/intl';
+import { useParticipantsStore } from 'data/stores/useParticipantsStore/index';
+import { converse } from 'utils/window';
+import { ViewersList } from '.';
+
+jest.mock('utils/window', () => ({
+  converse: {
+    acceptParticipantToJoin: jest.fn(),
+    askParticipantToJoin: jest.fn(),
+    kickParticipant: jest.fn(),
+    rejectParticipantToJoin: jest.fn(),
+  },
+}));
+
+const mockedParticipantOnDemands1 = participantMockFactory();
+const mockedParticipantOnDemands2 = participantMockFactory();
+
+const mockedParticipantOnStage1 = participantMockFactory();
+const mockedParticipantOnStage2 = participantMockFactory();
+
+const mockedParticipantOnStage1Full = {
+  ...mockedParticipantOnStage1,
+  isInstructor: false,
+  isOnStage: true,
+};
+
+const mockedParticipantOnStage2Full = {
+  ...mockedParticipantOnStage2,
+  isInstructor: false,
+  isOnStage: true,
+};
+
+const participant1 = {
+  id: 'example.jid.student1@prosody.org',
+  isInstructor: true,
+  isOnStage: false,
+  name: 'Student 1',
+};
+
+const participant2 = {
+  id: 'example.jid.student2@prosody.org',
+  isInstructor: false,
+  isOnStage: false,
+  name: 'Student 2',
+};
+
+const participant3 = {
+  id: 'example.jid.student3@prosody.org',
+  isInstructor: false,
+  isOnStage: false,
+  name: 'Student 3',
+};
+
+describe('<ViewersList /> when user is an instructor', () => {
+  beforeEach(() => jest.resetAllMocks());
+
+  it('displays severals participants, not on stage and not asking, and then remove some of them', () => {
+    const video = videoMockFactory();
+
+    render(
+      wrapInIntlProvider(<ViewersList isInstructor={true} video={video} />),
+    );
+
+    expect(screen.queryByText('Demands')).toEqual(null);
+    expect(screen.queryByText('On stage')).toEqual(null);
+    expect(screen.queryByText('Other participants')).toEqual(null);
+
+    act(() => useParticipantsStore.getState().addParticipant(participant1));
+    act(() => useParticipantsStore.getState().addParticipant(participant2));
+    act(() => useParticipantsStore.getState().addParticipant(participant3));
+
+    screen.getByText('Student 1');
+    screen.getByText('Student 2');
+    screen.getByText('Student 3');
+
+    act(() => useParticipantsStore.getState().removeParticipant('Student 2'));
+
+    expect(screen.queryByText('Student 2')).not.toBeInTheDocument();
+  });
+
+  it('displays severals participants, some on stage, and some asking, and some not on stage and not asking', () => {
+    const video = videoMockFactory({
+      participants_asking_to_join: [
+        mockedParticipantOnDemands1,
+        mockedParticipantOnDemands2,
+      ],
+      participants_in_discussion: [
+        mockedParticipantOnStage1,
+        mockedParticipantOnStage2,
+      ],
+    });
+
+    useParticipantsStore.setState({
+      participants: [
+        participant1,
+        participant2,
+        mockedParticipantOnStage1Full,
+        mockedParticipantOnStage2Full,
+      ],
+    });
+
+    render(
+      wrapInIntlProvider(<ViewersList isInstructor={true} video={video} />),
+    );
+
+    screen.getByText('Demands');
+    screen.getByText('On stage');
+    screen.getByText('Other participants');
+
+    screen.getByText('Student 1');
+    screen.getByText('Student 2');
+    screen.getByText(mockedParticipantOnDemands1.name);
+    screen.getByText(mockedParticipantOnDemands2.name);
+    screen.getByText(mockedParticipantOnStage1Full.name);
+    screen.getByText(mockedParticipantOnStage2Full.name);
+  });
+
+  it('displays a demanding participant and accepts it', () => {
+    const video = videoMockFactory({
+      participants_asking_to_join: [mockedParticipantOnDemands1],
+    });
+
+    render(
+      wrapInIntlProvider(<ViewersList isInstructor={true} video={video} />),
+    );
+
+    screen.getByText('Demands');
+    expect(screen.queryByText('On stage')).toEqual(null);
+    expect(screen.queryByText('Other participants')).toEqual(null);
+    screen.getByText(mockedParticipantOnDemands1.name);
+
+    const acceptButton = screen.getByRole('button', { name: 'Accept' });
+    act(() => userEvent.click(acceptButton));
+    expect(converse.acceptParticipantToJoin).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays a demanding participant and rejects it', () => {
+    const video = videoMockFactory({
+      participants_asking_to_join: [mockedParticipantOnDemands1],
+    });
+
+    render(
+      wrapInIntlProvider(<ViewersList isInstructor={true} video={video} />),
+    );
+
+    screen.getByText('Demands');
+    expect(screen.queryByText('On stage')).toEqual(null);
+    expect(screen.queryByText('Other participants')).toEqual(null);
+    screen.getByText(mockedParticipantOnDemands1.name);
+
+    const rejectButton = screen.getAllByRole('button')[0];
+    act(() => userEvent.click(rejectButton));
+    expect(converse.rejectParticipantToJoin).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays an on-stage participant and kicks it', () => {
+    const video = videoMockFactory({
+      participants_in_discussion: [mockedParticipantOnStage1],
+    });
+
+    useParticipantsStore.setState({
+      participants: [mockedParticipantOnStage1Full],
+    });
+
+    render(
+      wrapInIntlProvider(<ViewersList isInstructor={true} video={video} />),
+    );
+
+    expect(screen.queryByText('Demands')).toEqual(null);
+    screen.getByText('On stage');
+    expect(screen.queryByText('Other participants')).toEqual(null);
+    screen.getByText(mockedParticipantOnStage1Full.name);
+
+    const terminateButton = screen.getByRole('button', { name: 'Terminate' });
+    act(() => userEvent.click(terminateButton));
+    expect(converse.kickParticipant).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe('<ViewersList /> when user is a student', () => {
+  it('adds and removes several users from the list.', () => {
+    const video = videoMockFactory();
+    const { rerender } = render(
+      wrapInIntlProvider(<ViewersList isInstructor={false} video={video} />),
+    );
+    expect(screen.queryByText('Demands')).toEqual(null);
+    expect(screen.queryByText('On stage')).toEqual(null);
+    expect(screen.queryByText('Other participants')).toEqual(null);
+
+    act(() =>
+      useParticipantsStore.getState().addParticipant({
+        id: 'example.jid.instructor@prosody.org',
+        isInstructor: true,
+        isOnStage: true,
+        name: 'Instructor',
+      }),
+    );
+    screen.getByText('Instructor');
+
+    act(() =>
+      useParticipantsStore.getState().addParticipant({
+        id: 'example.jid.student1@prosody.org',
+        isInstructor: false,
+        isOnStage: false,
+        name: 'Student 1',
+      }),
+    );
+    screen.getByText('Student 1');
+
+    act(() =>
+      useParticipantsStore.getState().addParticipant({
+        id: 'example.jid.student2@prosody.org',
+        isInstructor: false,
+        isOnStage: false,
+        name: 'Student 2',
+      }),
+    );
+    screen.getByText('Student 2');
+
+    expect(screen.queryByText('Demands')).toEqual(null);
+
+    act(() => useParticipantsStore.getState().removeParticipant('Student 2'));
+    expect(screen.queryByText('Student 2')).not.toBeInTheDocument();
+
+    act(() =>
+      useParticipantsStore.getState().addParticipant({
+        id: 'example.jid.student2@prosody.org',
+        isInstructor: false,
+        isOnStage: false,
+        name: 'Student 2',
+      }),
+    );
+    rerender(
+      wrapInIntlProvider(<ViewersList isInstructor={false} video={video} />),
+    );
+    screen.getByText('Student 2');
+  });
+});
diff --git a/src/frontend/components/ViewersList/index.tsx b/src/frontend/components/ViewersList/index.tsx
new file mode 100644
index 0000000000..91459440c8
--- /dev/null
+++ b/src/frontend/components/ViewersList/index.tsx
@@ -0,0 +1,185 @@
+import React, { useMemo } from 'react';
+import { Box, Button, List } from 'grommet';
+import { AddCircle } from 'grommet-icons';
+import { defineMessages, useIntl } from 'react-intl';
+
+import {
+  useParticipantsStore,
+  ParticipantType,
+} from 'data/stores/useParticipantsStore';
+import { Video } from 'types/tracks';
+import { ViewersListHeader } from 'components/ViewersList/components/ViewersListHeader';
+import { ViewersListItem } from 'components/ViewersList/components/ViewersListItem';
+import { converse } from 'utils/window';
+import { ViewersListItemContainer } from 'components/ViewersList/components/ViewersListItemContainer';
+import { ViewersListTextButton } from 'components/ViewersList/components/ViewersListTextButton';
+
+const messages = defineMessages({
+  demands: {
+    defaultMessage: 'Demands',
+    description:
+      'Participants asking for going on stage are displayed under this label.',
+    id: 'components.ViewersList.demands',
+  },
+  onStage: {
+    defaultMessage: 'On stage',
+    description: 'On-stage participants are displayed under this label.',
+    id: 'components.ViewersList.onStage',
+  },
+  otherViewers: {
+    defaultMessage: 'Other participants',
+    description: 'Connected participants are displayed under this label.',
+    id: 'components.ViewersList.otherViewers',
+  },
+  acceptButton: {
+    defaultMessage: 'Accept',
+    description:
+      'The text displayed in the button in charge of accepting on-stage request, in the viewers list.',
+    id: 'components.ViewersList.acceptButton',
+  },
+  endOnStageButton: {
+    defaultMessage: 'Terminate',
+    description:
+      'The text displayed in the button in charge of making students on stage exiting the stage, in the viewers list.',
+    id: 'components.ViewersList.endOnStageButton',
+  },
+});
+
+interface ViewersListProps {
+  isInstructor: boolean;
+  video: Video;
+}
+
+export const ViewersList = ({ isInstructor, video }: ViewersListProps) => {
+  const participants = useParticipantsStore((state) => state.participants);
+  const participantsOnStage = useMemo(
+    () =>
+      participants.filter(
+        (participant) =>
+          participant.isInstructor ||
+          video.participants_in_discussion.some(
+            (p) => p.name === participant.name,
+          ),
+      ),
+    [participants, video.participants_in_discussion],
+  );
+
+  const participantsNotOnStageAndNotAsking = useMemo(
+    () =>
+      participants.filter(
+        (participant) =>
+          !participantsOnStage.includes(participant) &&
+          (isInstructor
+            ? !video.participants_asking_to_join.some(
+                (p) => p.name === participant.name,
+              )
+            : true),
+      ),
+    [
+      isInstructor,
+      participants,
+      participantsOnStage,
+      video.participants_asking_to_join,
+    ],
+  );
+  const intl = useIntl();
+
+  return (
+    <Box
+      fill
+      gap="30px"
+      overflow={{
+        horizontal: 'hidden',
+        vertical: 'auto',
+      }}
+      pad={{ bottom: 'medium', top: '30px' }}
+    >
+      {isInstructor && video.participants_asking_to_join.length !== 0 && (
+        <React.Fragment>
+          <ViewersListHeader
+            margin={{ left: 'medium', bottom: 'xsmall' }}
+            text={intl.formatMessage(messages.demands)}
+          />
+          <List
+            border={false}
+            data={video.participants_asking_to_join.sort(
+              (participantA, participantB) =>
+                participantA.name.localeCompare(participantB.name),
+            )}
+            pad="none"
+          >
+            {(item: ParticipantType, index: number) => (
+              <ViewersListItemContainer key={index}>
+                <ViewersListItem
+                  isInstructor={item.isInstructor}
+                  name={item.name}
+                />
+                <Box direction="row" align="center" gap="small">
+                  <Button
+                    icon={<AddCircle color="red-active" size="20px" />}
+                    onClick={() => converse.rejectParticipantToJoin(item)}
+                    plain
+                    style={{ padding: '0px', transform: 'rotate(45deg)' }}
+                  />
+                  <ViewersListTextButton
+                    onClick={() =>
+                      converse.acceptParticipantToJoin(item, video)
+                    }
+                    text={intl.formatMessage(messages.acceptButton)}
+                  />
+                </Box>
+              </ViewersListItemContainer>
+            )}
+          </List>
+        </React.Fragment>
+      )}
+
+      {participantsOnStage.length !== 0 && (
+        <React.Fragment>
+          <ViewersListHeader
+            margin={{ left: 'medium', bottom: 'xsmall' }}
+            text={intl.formatMessage(messages.onStage)}
+          />
+          <List border={false} data={participantsOnStage} pad="none">
+            {(item: ParticipantType, index: number) => (
+              <ViewersListItemContainer key={index}>
+                <ViewersListItem
+                  isInstructor={item.isInstructor}
+                  name={item.name}
+                />
+                {isInstructor && !item.isInstructor && (
+                  <ViewersListTextButton
+                    onClick={() => converse.kickParticipant(item)}
+                    text={intl.formatMessage(messages.endOnStageButton)}
+                  />
+                )}
+              </ViewersListItemContainer>
+            )}
+          </List>
+        </React.Fragment>
+      )}
+      {participantsNotOnStageAndNotAsking.length !== 0 && (
+        <React.Fragment>
+          <ViewersListHeader
+            margin={{ left: 'medium', bottom: 'xsmall' }}
+            text={intl.formatMessage(messages.otherViewers)}
+          />
+          <List
+            border={false}
+            data={participantsNotOnStageAndNotAsking}
+            pad="none"
+          >
+            {(item: ParticipantType, index: number) => (
+              <ViewersListItemContainer key={index}>
+                <ViewersListItem
+                  isInstructor={item.isInstructor}
+                  name={item.name}
+                />
+              </ViewersListItemContainer>
+            )}
+          </List>
+        </React.Fragment>
+      )}
+    </Box>
+  );
+};
diff --git a/src/frontend/data/stores/useParticipantsStore/index.spec.tsx b/src/frontend/data/stores/useParticipantsStore/index.spec.tsx
index a6193a6743..7fe707db44 100644
--- a/src/frontend/data/stores/useParticipantsStore/index.spec.tsx
+++ b/src/frontend/data/stores/useParticipantsStore/index.spec.tsx
@@ -1,35 +1,62 @@
 import { useParticipantsStore } from '.';
 
 const participant1 = {
+  id: 'example.jid.instructor1@prosody.org',
   isInstructor: true,
   isOnStage: true,
-  name: 'Instructor',
+  name: 'Instructor 1',
 };
 
 const participant2 = {
+  id: 'example.jid.instructor2@prosody.org',
+  isInstructor: true,
+  isOnStage: true,
+  name: 'Instructor 2',
+};
+
+const participant3 = {
+  id: 'example.jid.student1@prosody.org',
   isInstructor: false,
   isOnStage: true,
   name: 'Student 1',
 };
 
-const participant3 = {
+const participant4 = {
+  id: 'example.jid.student2@prosody.org',
   isInstructor: false,
   isOnStage: false,
   name: 'Student 2',
 };
 
+const sameIdParticipant1 = {
+  id: 'example.jid.instructor1@prosody.org',
+  isInstructor: false,
+  isOnStage: false,
+  name: 'Generic participant',
+};
+
+const sameNameParticipant1 = {
+  id: 'example.jid.generic@prosody.org',
+  isInstructor: false,
+  isOnStage: false,
+  name: 'Instructor 1',
+};
+
 describe('useParticipantsStore', () => {
   it('executes useParticipantsStore/addParticipant', () => {
     expect(useParticipantsStore.getState().participants).toEqual([]);
 
+    useParticipantsStore.getState().addParticipant(participant4);
     useParticipantsStore.getState().addParticipant(participant1);
-    useParticipantsStore.getState().addParticipant(participant2);
     useParticipantsStore.getState().addParticipant(participant3);
+    useParticipantsStore.getState().addParticipant(participant2);
 
+    // Expect array to be alphabetically ordered, with instructors first
     expect(useParticipantsStore.getState().participants).toEqual([
       participant1,
       participant2,
       participant3,
+      participant4,
     ]);
   });
 
@@ -46,4 +73,14 @@ describe('useParticipantsStore', () => {
       participant2,
     ]);
   });
+
+  it('tries to add participant with same id and same name', () => {
+    useParticipantsStore.getState().addParticipant(participant1);
+    useParticipantsStore.getState().addParticipant(sameIdParticipant1);
+    useParticipantsStore.getState().addParticipant(sameNameParticipant1);
+
+    expect(useParticipantsStore.getState().participants).toEqual([
+      participant1,
+    ]);
+  });
 });
diff --git a/src/frontend/data/stores/useParticipantsStore/index.ts b/src/frontend/data/stores/useParticipantsStore/index.ts
index e41b59ff3e..c69671ff16 100644
--- a/src/frontend/data/stores/useParticipantsStore/index.ts
+++ b/src/frontend/data/stores/useParticipantsStore/index.ts
@@ -1,6 +1,7 @@
 import create from 'zustand';
 
 export type ParticipantType = {
+  id: string;
   isInstructor: boolean;
   isOnStage: boolean;
   name: string;
@@ -18,18 +19,21 @@ export const useParticipantsStore = create<State>((set) => ({
     set((state) => {
       if (
         !state.participants.some(
-          (participant) => participant.name === newParticipant.name,
+          (participant) =>
+            participant.name === newParticipant.name ||
+            participant.id === newParticipant.id,
         )
       ) {
         return {
           participants: state.participants
-            .concat({
-              isInstructor: newParticipant.isInstructor,
-              isOnStage: newParticipant.isOnStage,
-              name: newParticipant.name,
-            })
+            .concat(newParticipant)
+            // Order participants alphabetically, with instructors first
             .sort((participantA, participantB) =>
-              participantA.name.localeCompare(participantB.name),
+              participantA.isInstructor === participantB.isInstructor
+                ? participantA.name.localeCompare(participantB.name)
+                : participantA.isInstructor
+                ? -1
+                : 1,
             ),
         };
       } else {
diff --git a/src/frontend/types/libs/converse/index.d.ts b/src/frontend/types/libs/converse/index.d.ts
index a3ce959e01..c1c87c8d0b 100644
--- a/src/frontend/types/libs/converse/index.d.ts
+++ b/src/frontend/types/libs/converse/index.d.ts
@@ -14,7 +14,6 @@ declare namespace converse {
     kickParticipant: (participant: Participant) => void;
     rejectParticipantToJoin: (participant: Participant) => void;
     participantLeaves: () => void;
-    insertInto: (container: HTMLElement) => void;
     initialize: (options: Options) => void;
     sendMessage: (message: string) => void;
     claimNewNicknameInChatRoom: (
diff --git a/src/frontend/utils/conversejs/converse-plugins/participantsTrackingPlugin.ts b/src/frontend/utils/conversejs/converse-plugins/participantsTrackingPlugin.ts
index 84a7403420..e745736b72 100644
--- a/src/frontend/utils/conversejs/converse-plugins/participantsTrackingPlugin.ts
+++ b/src/frontend/utils/conversejs/converse-plugins/participantsTrackingPlugin.ts
@@ -12,36 +12,26 @@ const addParticipantsTrackingPlugin = () =>
       _converse.on('initialized', () => {
         _converse.connection.addHandler(
           (stanza: HTMLElement) => {
-            if (
-              stanza.getAttribute('from') !== null &&
-              stanza.getAttribute('to') !== null
-            ) {
-              const participantDisplayName = getNameFromJID(
-                stanza.getAttribute('from')!,
-              );
+            const jid = stanza.getAttribute('from');
+            if (jid && stanza.getAttribute('to')) {
+              const item = stanza.getElementsByTagName('item')[0];
+              const participantDisplayName = getNameFromJID(jid);
               if (
-                stanza.getAttribute('type') !== null &&
+                stanza.getAttribute('type') &&
                 stanza.getAttribute('type') === 'unavailable'
               ) {
                 useParticipantsStore
                   .getState()
                   .removeParticipant(participantDisplayName);
               } else if (
-                stanza.getElementsByTagName('item')[0] !== null &&
-                stanza
-                  .getElementsByTagName('item')[0]
-                  .getAttribute('affiliation') !== null &&
-                stanza
-                  .getElementsByTagName('item')[0]
-                  .getAttribute('affiliation') !== 'none'
+                item &&
+                item.getAttribute('affiliation') &&
+                item.getAttribute('affiliation') !== 'none'
               ) {
                 const participantIsInstructor =
-                  stanza
-                    .getElementsByTagName('item')[0]
-                    .getAttribute('affiliation') === 'owner'
-                    ? true
-                    : false;
+                  item.getAttribute('affiliation') === 'owner';
                 useParticipantsStore.getState().addParticipant({
+                  id: jid,
                   isInstructor: participantIsInstructor,
                   isOnStage: false,
                   name: participantDisplayName,