diff --git a/app/components/live-participants.hbs b/app/components/live-participants.hbs
new file mode 100644
index 00000000..eb595963
--- /dev/null
+++ b/app/components/live-participants.hbs
@@ -0,0 +1,44 @@
+<div data-test-sidebar-body-role class='body__role-user'>
+  <p
+    data-test-sidebar-body-role-guest
+    class='role-user__type guestUsers'
+  >{{@user}}</p>
+  <ul>
+
+    {{#if (not-eq @minimumParticipants @role)}}
+      <li data-test-sidebar-user={{'peer.id'}} class='user'>
+        <p>No {{@user}} in the stream</p>
+      </li>
+    {{else}}
+
+      {{#each @peers as |peer|}}
+        {{#if (eq peer.roleName @role)}}
+          <li data-test-sidebar-user={{peer.id}} class='user'>
+            <p>{{peer.name}}</p>
+            {{#if
+              (or
+                (eq this.liveService.localPeer.roleName this.ROLES.host)
+                (eq this.liveService.localPeer.roleName this.ROLES.moderator)
+              )
+            }}
+              <button
+                type='button'
+                class='user__btn'
+                {{on 'click' (fn @openKickoutModal peer)}}
+              >
+                <IconifyIcon
+                  data-test-icon='remove'
+                  @icon='material-symbols:person-remove'
+                  width='36'
+                  height='36'
+                  color='red'
+                />
+              </button>
+            {{/if}}
+          </li>
+        {{/if}}
+      {{/each}}
+    {{/if}}
+
+  </ul>
+</div>
\ No newline at end of file
diff --git a/app/components/live-participants.js b/app/components/live-participants.js
new file mode 100644
index 00000000..b7cea4ba
--- /dev/null
+++ b/app/components/live-participants.js
@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { ROLES } from '../constants/live';
+import { getOwner } from '@ember/application';
+
+export default class LiveParticipantsComponent extends Component {
+  ROLES = ROLES;
+
+  get liveService() {
+    return getOwner(this).lookup('service:live');
+  }
+}
diff --git a/app/components/live-sidebar.hbs b/app/components/live-sidebar.hbs
index b97f7bcd..f8ff6b5a 100644
--- a/app/components/live-sidebar.hbs
+++ b/app/components/live-sidebar.hbs
@@ -40,41 +40,26 @@
         {{/each}}
         is presenting</span>
     </div>
-    <div data-test-sidebar-body-role class='body__role-user'>
-      <p
-        data-test-sidebar-body-role-guest
-        class='role-user__type guestUsers'
-      >Guest Users</p>
-      <ul>
-
-        {{#each @peers as |peer|}}
-          {{#if (eq peer.roleName this.ROLES.guest)}}
-            <li data-test-sidebar-user={{peer.id}} class='user'>
-              <p>{{peer.name}}</p>
-              {{#if
-                (or
-                  (eq this.liveService.localPeer.roleName this.ROLES.host)
-                  (eq this.liveService.localPeer.roleName this.ROLES.moderator)
-                )
-              }}
-                <button
-                  type='button'
-                  class='user__btn'
-                  {{on 'click' (fn @openKickoutModal peer)}}
-                >
-                  <IconifyIcon
-                    data-test-icon='remove'
-                    @icon='material-symbols:person-remove'
-                    width='36'
-                    height='36'
-                    color='red'
-                  />
-                </button>
-              {{/if}}
-            </li>
-          {{/if}}
-        {{/each}}
-      </ul>
-    </div>
+    <LiveParticipants
+      @user='Mavens'
+      @role='maven'
+      @peers={{@peers}}
+      @minimumParticipants={{this.liveService.mavenRole}}
+      @openKickoutModal={{@openKickoutModal}}
+    />
+    <LiveParticipants
+      @user='Moderators'
+      @role='moderator'
+      @peers={{@peers}}
+      @minimumParticipants={{this.liveService.moderatorRole}}
+      @openKickoutModal={{@openKickoutModal}}
+    />
+    <LiveParticipants
+      @user='Guests'
+      @role='guest'
+      @peers={{@peers}}
+      @minimumParticipants={{this.liveService.guestRole}}
+      @openKickoutModal={{@openKickoutModal}}
+    />
   </div>
 </div>
\ No newline at end of file
diff --git a/app/components/live-sidebar.js b/app/components/live-sidebar.js
index 9ebce74a..97410018 100644
--- a/app/components/live-sidebar.js
+++ b/app/components/live-sidebar.js
@@ -7,10 +7,12 @@ import { getOwner } from '@ember/application';
 export default class LiveHeaderComponent extends Component {
   @tracked isSideBarOpen = false;
   ROLES = ROLES;
-  get liveService() {
-    return getOwner(this).lookup('service:live');
-  }
+
   @action toggleMobileSidebar() {
     this.isSideBarOpen = !this.isSideBarOpen;
   }
+
+  get liveService() {
+    return getOwner(this).lookup('service:live');
+  }
 }
diff --git a/app/services/live.js b/app/services/live.js
index 740ae6eb..39c1466f 100644
--- a/app/services/live.js
+++ b/app/services/live.js
@@ -31,6 +31,9 @@ export default class LiveService extends Service {
   @globalRef('videoEl') videoEl;
   @tracked peers;
   @tracked isScreenShareOn;
+  @tracked mavenRole = '';
+  @tracked moderatorRole = '';
+  @tracked guestRole = '';
   @tracked roomCodesForMaven = [];
   @tracked roomCodeLoading = false;
   @tracked userData = this.login?.userData;
@@ -360,6 +363,13 @@ export default class LiveService extends Service {
 
   async renderScreenVideoToPeers(peers) {
     this.peers = peers;
+    const maven = peers.find((peer) => peer.roleName === ROLES.maven);
+    const moderator = peers.find((peer) => peer.roleName === ROLES.moderator);
+    const guest = peers.find((peer) => peer.roleName === ROLES.guest);
+    this.mavenRole = maven?.roleName;
+    this.moderatorRole = moderator?.roleName;
+    this.guestRole = guest?.roleName;
+
     const presenterTrackId = peers?.find((p) => p.roleName === ROLES.host)
       ?.auxiliaryTracks[0];
     if (presenterTrackId) {
diff --git a/tests/constants/participants-data.js b/tests/constants/participants-data.js
new file mode 100644
index 00000000..58312fcc
--- /dev/null
+++ b/tests/constants/participants-data.js
@@ -0,0 +1,61 @@
+export const hostPeer = [
+  {
+    id: 1,
+    name: 'Ankush',
+    roleName: 'host',
+  },
+];
+
+export const mavenPeerData = [
+  {
+    id: 1,
+    name: 'Ankush',
+    roleName: 'host',
+  },
+  {
+    id: 2,
+    name: 'Maven1',
+    roleName: 'maven',
+  },
+  {
+    id: 3,
+    name: 'Maven2',
+    roleName: 'maven',
+  },
+];
+
+export const moderatorData = [
+  {
+    id: 1,
+    name: 'Ankush',
+    roleName: 'host',
+  },
+  {
+    id: 2,
+    name: 'Mod1',
+    roleName: 'moderator',
+  },
+  {
+    id: 3,
+    name: 'Mod3',
+    roleName: 'moderator',
+  },
+];
+
+export const guestData = [
+  {
+    id: 1,
+    name: 'Ankush',
+    roleName: 'host',
+  },
+  {
+    id: 2,
+    name: 'Guest1',
+    roleName: 'guest',
+  },
+  {
+    id: 3,
+    name: 'Guest2',
+    roleName: 'guest',
+  },
+];
diff --git a/tests/integration/components/live-participants-test.js b/tests/integration/components/live-participants-test.js
new file mode 100644
index 00000000..a4ea75b5
--- /dev/null
+++ b/tests/integration/components/live-participants-test.js
@@ -0,0 +1,133 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import {
+  hostPeer,
+  mavenPeerData,
+  moderatorData,
+  guestData,
+} from '../../constants/participants-data';
+
+module('Integration | Component | live-participants', function (hooks) {
+  setupRenderingTest(hooks);
+  test('renders No Maven In the stream Text', async function (assert) {
+    this.setProperties({
+      peers: hostPeer,
+      profilePic: 'profilepicurl',
+      isKickoutModalOpen: true,
+    });
+    this.set('openKickoutModal', () => {
+      this.isKickoutModalOpen = true;
+    });
+    await render(hbs`<LiveParticipants
+      @user='Mavens'
+      @role='maven'
+      @peers={{this.peers}}
+      @minimumParticipants=""
+      @openKickoutModal={{this.openKickoutModal}}
+    />`);
+    assert
+      .dom('[data-test-sidebar-body-role] .user')
+      .hasText('No Mavens in the stream');
+  });
+
+  test('renders No Moderators In the stream Text', async function (assert) {
+    this.setProperties({
+      peers: hostPeer,
+      profilePic: 'profilepicurl',
+      isKickoutModalOpen: true,
+    });
+    this.set('openKickoutModal', () => {
+      this.isKickoutModalOpen = true;
+    });
+    await render(hbs` <LiveParticipants
+      @user='Moderators'
+      @role='moderator'
+      @peers={{this.peers}}
+      @minimumParticipants=""
+      @openKickoutModal={{this.openKickoutModal}}
+    />`);
+    assert
+      .dom('[data-test-sidebar-body-role] .user')
+      .hasText('No Moderators in the stream');
+  });
+
+  test('renders No Guests In the stream Text', async function (assert) {
+    this.setProperties({
+      peers: hostPeer,
+      profilePic: 'profilepicurl',
+      isKickoutModalOpen: true,
+    });
+    this.set('openKickoutModal', () => {
+      this.isKickoutModalOpen = true;
+    });
+    await render(hbs`  <LiveParticipants
+      @user='Guests'
+      @role='guest'
+      @peers={{@peers}}
+      @minimumParticipants=""
+      @openKickoutModal={{this.openKickoutModal}}
+    />`);
+    assert
+      .dom('[data-test-sidebar-body-role] .user')
+      .hasText('No Guests in the stream');
+  });
+
+  test('renders Mavens Lists who joined Stream', async function (assert) {
+    this.setProperties({
+      peers: mavenPeerData,
+      profilePic: 'profilepicurl',
+      isKickoutModalOpen: true,
+    });
+    this.set('openKickoutModal', () => {
+      this.isKickoutModalOpen = true;
+    });
+    await render(hbs`<LiveParticipants
+      @user='Mavens'
+      @role='maven'
+      @peers={{this.peers}}
+      @minimumParticipants="maven"
+      @openKickoutModal={{this.openKickoutModal}}
+    />`);
+    assert.dom('[data-test-sidebar-user="2"]').hasText('Maven1');
+  });
+
+  test('renders Moderators Lists who joined Stream', async function (assert) {
+    this.setProperties({
+      peers: moderatorData,
+      profilePic: 'profilepicurl',
+      isKickoutModalOpen: true,
+    });
+    this.set('openKickoutModal', () => {
+      this.isKickoutModalOpen = true;
+    });
+    await render(hbs`<LiveParticipants
+      @user='Moderator'
+      @role='moderator'
+      @peers={{this.peers}}
+      @minimumParticipants="moderator"
+      @openKickoutModal={{this.openKickoutModal}}
+    />`);
+    assert.dom('[data-test-sidebar-user="3"]').hasText('Mod3');
+  });
+
+  test('renders Guests Lists who joined Stream', async function (assert) {
+    this.setProperties({
+      peers: guestData,
+      profilePic: 'profilepicurl',
+      isKickoutModalOpen: true,
+    });
+    this.set('openKickoutModal', () => {
+      this.isKickoutModalOpen = true;
+    });
+    await render(hbs`<LiveParticipants
+      @user='Guest'
+      @role='guest'
+      @peers={{this.peers}}
+      @minimumParticipants="guest"
+      @openKickoutModal={{this.openKickoutModal}}
+    />`);
+    assert.dom('[data-test-sidebar-user="3"]').hasText('Guest2');
+  });
+});
diff --git a/tests/integration/components/live-sidebar-test.js b/tests/integration/components/live-sidebar-test.js
index 5b7f66e9..af38530c 100644
--- a/tests/integration/components/live-sidebar-test.js
+++ b/tests/integration/components/live-sidebar-test.js
@@ -7,7 +7,7 @@ module('Integration | Component | live-sidebar', function (hooks) {
   setupRenderingTest(hooks);
 
   test('live-sidebar renders', async function (assert) {
-    assert.expect(17);
+    assert.expect(12);
     this.setProperties({
       peers: [
         {
@@ -48,17 +48,5 @@ module('Integration | Component | live-sidebar', function (hooks) {
 
     assert.dom('[data-test-sidebar-host-name]').exists();
     assert.dom('[data-test-sidebar-host-name]').hasText('Ankush is presenting');
-
-    assert.dom('[data-test-sidebar-body-role]').exists();
-
-    assert.dom('[data-test-sidebar-body-role-guest]').exists();
-    assert.dom('[data-test-sidebar-body-role-guest]').hasText('Guest Users');
-
-    assert.dom('[data-test-sidebar-user="2"]').exists();
-    assert.strictEqual(
-      document.querySelector(`[data-test-sidebar-user="2"]`).innerText,
-      this.peers[1].name,
-      'guest name is same!'
-    );
   });
 });