diff --git a/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue b/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue
index ed4430ca9e4..f27604aa0ae 100644
--- a/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/TruncatedItemList.vue
@@ -5,17 +5,8 @@
     v-else
     class="items-label"
   >
-    <span v-if="items.length === 1">
-      {{ items[0] }}
-    </span>
-    <span v-else-if="items.length === 2">
-      {{ $tr('twoItems', { item1: items[0], item2: items[1] }) }}
-    </span>
-    <span v-else-if="items.length === 3">
-      {{ $tr('threeItems', { item1: items[0], item2: items[1], item3: items[2] }) }}
-    </span>
-    <span v-else>
-      {{ $tr('manyItems', { item1: items[0], item2: items[1], count: items.length - 2 }) }}
+    <span>
+      {{ getTruncatedItemsString(items) }}
     </span>
   </div>
 
@@ -24,6 +15,8 @@
 
 <script>
 
+  import { getTruncatedItemsString } from './commonCoachStrings';
+
   export default {
     name: 'TruncatedItemList',
     props: {
@@ -32,21 +25,8 @@
         required: true,
       },
     },
-    $trs: {
-      twoItems: {
-        message: '{item1}, {item2}',
-        context:
-          "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
-      threeItems: {
-        message: '{item1}, {item2}, {item3}',
-        context:
-          "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
-      manyItems: {
-        message: '{item1}, {item2}, and {count, number, integer} others',
-        context: "'item' will be replaced by the name of the coach(es) in the list of classes.",
-      },
+    methods: {
+      getTruncatedItemsString,
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
index 9e363c29cd2..bcfd38f20fc 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/AssignmentDetailsModal.vue
@@ -11,6 +11,10 @@
         {{ submitErrorMessage }}
       </UiAlert>
 
+      <!--
+        TODO: Refactor or rename this component, setting a title or a description
+        is not part of an "assignment" process (?)
+      -->
       <fieldset>
         <KGrid>
           <KGridItem
@@ -78,7 +82,19 @@
         <legend>
           {{ recipientsLabel$() }}
         </legend>
+
+        <SidePanelRecipientsSelector
+          v-if="selectRecipientsWithSidePanel"
+          ref="recipientsSelector"
+          v-model="selectedCollectionIds"
+          :groups="groups"
+          :classId="classId"
+          :disabled="disabled || formIsSubmitted"
+          :adHocLearners.sync="adHocLearners"
+          :selectedCollectionIds.sync="selectedCollectionIds"
+        />
         <RecipientSelector
+          v-else
           v-model="selectedCollectionIds"
           :groups="groups"
           :classId="classId"
@@ -118,6 +134,7 @@
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { coachStrings } from '../../common/commonCoachStrings';
   import RecipientSelector from './RecipientSelector';
+  import SidePanelRecipientsSelector from './SidePanelRecipientsSelector';
 
   export default {
     name: 'AssignmentDetailsModal',
@@ -125,6 +142,7 @@
       BottomAppBar,
       RecipientSelector,
       UiAlert,
+      SidePanelRecipientsSelector,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -183,6 +201,10 @@
         type: Boolean,
         default: false,
       },
+      selectRecipientsWithSidePanel: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -255,6 +277,15 @@
       iconName() {
         return this.assignmentIsQuiz ? 'quiz' : 'lesson';
       },
+      submitObject() {
+        return {
+          title: this.title,
+          description: this.description,
+          assignments: this.selectedCollectionIds,
+          active: this.activeIsSelected,
+          learner_ids: this.adHocLearners,
+        };
+      },
     },
     watch: {
       title() {
@@ -269,6 +300,13 @@
       adHocLearners() {
         this.$emit('update', { learner_ids: this.adHocLearners });
       },
+      submitObject() {
+        if (this.showServerError) {
+          this.$nextTick(() => {
+            this.validate(false);
+          });
+        }
+      },
     },
     methods: {
       submitData() {
@@ -292,13 +330,7 @@
 
         if (this.formIsValid) {
           this.formIsSubmitted = true;
-          this.$emit('submit', {
-            title: this.title,
-            description: this.description,
-            assignments: this.selectedCollectionIds,
-            active: this.activeIsSelected,
-            learner_ids: this.adHocLearners,
-          });
+          this.$emit('submit', this.submitObject);
         } else {
           this.formIsSubmitted = false;
         }
@@ -327,6 +359,35 @@
         this.showTitleError = false;
         this.showServerError = false;
       },
+      /**
+       * @public
+       */
+      validate(handleFailure = true) {
+        let error = '';
+        this.showServerError = false;
+        // Validate title
+        if (this.title === '') {
+          if (handleFailure) {
+            this.handleSubmitTitleFailure();
+          }
+          error = this.coreString('requiredFieldError');
+        }
+
+        // Validate recipients
+        const recipientsError = this.$refs.recipientsSelector?.validate();
+        if (!error && recipientsError) {
+          error = recipientsError;
+          if (handleFailure) {
+            this.$refs.recipientsSelector?.handleSubmitRecipientsFailure();
+          }
+        }
+
+        if (error) {
+          this.showServerError = true;
+        }
+
+        return error;
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
similarity index 66%
rename from kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector.vue
rename to kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
index 56316240149..6dd12d83634 100644
--- a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector.vue
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/IndividualLearnerSelectorTable.vue
@@ -1,87 +1,52 @@
 <template>
 
-  <div>
-    <!-- Main checkbox -->
-    <KCheckbox
-      key="adHocLearners"
-      :checked="isVisible"
-      :disabled="disabled"
-      @change="$emit('togglevisibility', $event)"
-    >
-      <KLabeledIcon
-        icon="people"
-        :label="$tr('individualLearnersLabel')"
-      />
-    </KCheckbox>
-
-    <!-- Paginated list of learners -->
-    <div v-if="isVisible">
-      <div class="table-title">
-        {{ $tr('selectedIndividualLearnersLabel') }}
-      </div>
-      <div class="table-description">
-        {{ $tr('onlyShowingEnrolledLabel') }}
-      </div>
-
-      <PaginatedListContainer
-        :items="allLearners"
-        :filterPlaceholder="$tr('searchPlaceholder')"
-        :itemsPerPage="itemsPerPage"
-        @pageChanged="currentPageLearners = $event.items"
+  <PaginatedListContainer
+    :items="sortedAllLearners"
+    :filterPlaceholder="$tr('searchPlaceholder')"
+    :itemsPerPage="itemsPerPage"
+    :searchFieldBlock="searchFieldBlock"
+    @pageChanged="currentPageLearners = $event.items"
+  >
+    <template #default="{ items }">
+      <KTable
+        :rows="getTableRows(items)"
+        :headers="tableHeaders"
+        :emptyMessage="emptyMessage"
+        :caption="$tr('tableCaption')"
       >
-        <template #default="{ items }">
-          <CoreTable
-            :selectable="true"
-            :emptyMessage="emptyMessage"
+        <template #header="{ header, colIndex }">
+          <KCheckbox
+            v-if="colIndex === 0"
+            key="selectAllOnPage"
+            :label="$tr('selectAllLabel')"
+            :checked="selectAllCheckboxProps.checked"
+            :indeterminate="selectAllCheckboxProps.indeterminate"
+            :disabled="selectAllCheckboxProps.disabled"
+            @change="selectVisiblePage"
+          />
+          <span
+            v-else
+            class="table-header"
+          >{{ header.label }}</span>
+        </template>
+        <template #cell="{ content, colIndex }">
+          <KCheckbox
+            v-if="colIndex === 0"
+            :label="content.name"
+            :checked="learnerIsSelected(content)"
+            :disabled="learnerIsNotSelectable(content)"
+            @change="toggleLearner($event, content)"
+          />
+          <span
+            v-else
+            class="table-data"
           >
-            <template #headers>
-              <th class="table-checkbox-header">
-                <KCheckbox
-                  key="selectAllOnPage"
-                  :label="$tr('selectAllLabel')"
-                  :checked="selectAllCheckboxProps.checked"
-                  :indeterminate="selectAllCheckboxProps.indeterminate"
-                  :disabled="selectAllCheckboxProps.disabled"
-                  @change="selectVisiblePage"
-                />
-              </th>
-              <th class="table-header">
-                {{ coreString('usernameLabel') }}
-              </th>
-              <th class="table-header">
-                {{ coachString('groupsLabel') }}
-              </th>
-            </template>
-
-            <template #tbody>
-              <tbody>
-                <tr
-                  v-for="learner in items"
-                  :key="learner.id"
-                >
-                  <td>
-                    <KCheckbox
-                      :key="`select-learner-${learner.id}`"
-                      :label="learner.name"
-                      :checked="learnerIsSelected(learner)"
-                      :disabled="learnerIsNotSelectable(learner)"
-                      @change="toggleLearner($event, learner)"
-                    />
-                  </td>
-                  <td class="table-data">
-                    {{ learner.username }}
-                  </td>
-                  <td class="table-data">
-                    {{ groupNamesForLearner(learner) }}
-                  </td>
-                </tr>
-              </tbody>
-            </template>
-          </CoreTable>
+            {{ content }}
+          </span>
         </template>
-      </PaginatedListContainer>
-    </div>
-  </div>
+      </KTable>
+    </template>
+  </PaginatedListContainer>
 
 </template>
 
@@ -90,7 +55,6 @@
 
   import { mapState } from 'vuex';
   import { formatList } from 'kolibri/utils/i18n';
-  import CoreTable from 'kolibri/components/CoreTable';
   import PaginatedListContainer from 'kolibri-common/components/PaginatedListContainer';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
@@ -98,14 +62,14 @@
   import forEach from 'lodash/forEach';
   import countBy from 'lodash/countBy';
   import every from 'lodash/every';
-  import ClassSummaryResource from '../../../apiResources/classSummary';
-  import commonCoachStrings from '../../common';
+  import ClassSummaryResource from '../../../../apiResources/classSummary';
+  import commonCoachStrings from '../../../common';
 
   const DEFAULT_ITEMS_PER_PAGE = 30;
 
   export default {
     name: 'IndividualLearnerSelector',
-    components: { CoreTable, PaginatedListContainer },
+    components: { PaginatedListContainer },
     mixins: [commonCoreStrings, commonCoachStrings],
     setup() {
       const { noLearnersEnrolled$ } = enhancedQuizManagementStrings;
@@ -115,11 +79,6 @@
       };
     },
     props: {
-      // If true, the main checkbox is checked and the list of learners is shown
-      isVisible: {
-        type: Boolean,
-        required: true,
-      },
       // Used to disable learner rows if already assigned via learner group
       selectedGroupIds: {
         type: Array,
@@ -142,6 +101,10 @@
         required: false,
         default: null,
       },
+      searchFieldBlock: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -174,13 +137,20 @@
           return this.learners;
         }
       },
+      sortedAllLearners() {
+        const allLearners = [...this.allLearners];
+        return allLearners.sort((a, b) => a.name.localeCompare(b.name));
+      },
       currentGroupMap() {
         return this.groupMapFromOtherClass || this.groupMap;
       },
       learnerIdsFromSelectedGroups() {
         // If a learner is part of a Learner Group that has already been selected
         // in RecipientSelector, then disable their row
-        return flatMap(this.selectedGroupIds, groupId => this.currentGroupMap[groupId].member_ids);
+        return flatMap(
+          this.selectedGroupIds,
+          groupId => this.currentGroupMap[groupId]?.member_ids || [],
+        );
       },
       selectAllCheckboxProps() {
         const currentCount = this.currentPageLearners.length;
@@ -210,6 +180,25 @@
           ? this.$tr('noUsersMatch')
           : this.noLearnersEnrolled$({ className: this.className });
       },
+      tableHeaders() {
+        return [
+          {
+            label: this.$tr('selectAllLabel'),
+            dataType: 'undefined',
+            columnId: 'selectAll',
+          },
+          {
+            label: this.coreString('usernameLabel'),
+            dataType: 'string',
+            columnId: 'username',
+          },
+          {
+            label: this.coachString('groupsLabel'),
+            dataType: 'string',
+            columnId: 'groups',
+          },
+        ];
+      },
     },
     methods: {
       fetchOutsideClassroom() {
@@ -224,6 +213,13 @@
           this.fetchingOutside = false;
         });
       },
+      getTableRows(learners) {
+        return learners.map(learner => [
+          learner,
+          learner.username,
+          this.groupNamesForLearner(learner),
+        ]);
+      },
       // Event handlers
       toggleLearner(checked, { id }) {
         let newLearnerIds = [...this.selectedLearnerIds];
@@ -277,25 +273,10 @@
       },
     },
     $trs: {
-      selectedIndividualLearnersLabel: {
-        message: 'Select individual learners',
-        context:
-          'A bolded header for the table where a Coach will select individual learners who will have access to a quiz.',
-      },
-      onlyShowingEnrolledLabel: {
-        message: 'Only showing learners that are enrolled in this class',
-        context:
-          "Shows beneath 'Select individual learners' explaining that the table only includes enrolled learners.",
-      },
       selectAllLabel: {
         message: 'Select all on page',
         context: 'A checkbox label that will select all visible rows in the table',
       },
-      individualLearnersLabel: {
-        message: 'Individual learners',
-        context:
-          'A label for a checkbox that allows the Coach to assign the quiz to individual learners who may not be in a selected group.',
-      },
       searchPlaceholder: {
         message: 'Search for a user…',
         context: 'Indicates the search function which allows admins to import users.',
@@ -305,6 +286,10 @@
         context:
           "When searching for individual learner to add to a lesson, if no search term matches a learner's name this message is displayed.",
       },
+      tableCaption: {
+        message: 'Select individual learners',
+        context: 'Caption for the table containing the list of individual learners.',
+      },
     },
   };
 
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
new file mode 100644
index 00000000000..48022482ae3
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/IndividualLearnerSelector/index.vue
@@ -0,0 +1,130 @@
+<template>
+
+  <div>
+    <!-- Main checkbox -->
+    <KCheckbox
+      key="adHocLearners"
+      :checked="isVisible"
+      :disabled="disabled"
+      @change="$emit('togglevisibility', $event)"
+    >
+      <KLabeledIcon
+        icon="people"
+        :label="coachString('individualLearnersLabel')"
+      />
+    </KCheckbox>
+
+    <!-- Paginated list of learners -->
+    <div v-if="isVisible">
+      <div class="table-title">
+        {{ $tr('selectedIndividualLearnersLabel') }}
+      </div>
+      <div class="table-description">
+        {{ coachString('onlyShowingEnrolledLabel') }}
+      </div>
+
+      <IndividualLearnerSelectorTable
+        :selectedGroupIds="selectedGroupIds"
+        :selectedLearnerIds="selectedLearnerIds"
+        :targetClassId="targetClassId"
+        :disabled="disabled"
+        @update:selectedLearnerIds="$emit('update:selectedLearnerIds', $event)"
+      />
+    </div>
+  </div>
+
+</template>
+
+
+<script>
+
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import commonCoachStrings from '../../../common';
+  import IndividualLearnerSelectorTable from './IndividualLearnerSelectorTable';
+
+  export default {
+    name: 'IndividualLearnerSelector',
+    components: { IndividualLearnerSelectorTable },
+    mixins: [commonCoreStrings, commonCoachStrings],
+    props: {
+      // If true, the main checkbox is checked and the list of learners is shown
+      isVisible: {
+        type: Boolean,
+        required: true,
+      },
+      // Used to disable learner rows if already assigned via learner group
+      selectedGroupIds: {
+        type: Array,
+        required: true,
+      },
+      // List of selected learner IDs (must be .sync'd with parent form)
+      selectedLearnerIds: {
+        type: Array,
+        required: true,
+      },
+      // Disables the entire form
+      disabled: {
+        type: Boolean,
+        required: true,
+        default: false,
+      },
+      // Only given when not used in current class context
+      targetClassId: {
+        type: String,
+        required: false,
+        default: null,
+      },
+    },
+    $trs: {
+      selectedIndividualLearnersLabel: {
+        message: 'Select individual learners',
+        context:
+          'A bolded header for the table where a Coach will select individual learners who will have access to a quiz.',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  fieldset {
+    padding: 0;
+    margin: 24px 0;
+    border: 0;
+  }
+
+  .table-title {
+    margin: 16px 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .table-header {
+    padding: 24px 0;
+  }
+
+  .table-checkbox-header {
+    padding: 8px;
+  }
+
+  .hidden-learners-tooltip {
+    padding: 0 8px;
+  }
+
+  .table-description {
+    margin-bottom: 8px;
+    font-size: 16px;
+  }
+
+  .table-data {
+    padding-top: 6px;
+    vertical-align: middle;
+  }
+
+  .filter-input {
+    margin-top: 16px;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
new file mode 100644
index 00000000000..c22d8ba367b
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/LearnersSelectorSidePanel.vue
@@ -0,0 +1,222 @@
+<template>
+
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    closeButtonIconType="close"
+    @closePanel="$emit('close')"
+    @shouldFocusFirstEl="focusFirstEl"
+  >
+    <template #header>
+      <h1 class="side-panel-title">
+        {{ $tr('selectGroupsAndIndividualLearnersTitle') }}
+      </h1>
+    </template>
+    <template #default>
+      <section>
+        <h2 class="mt-0">
+          {{ coachString('groupsLabel') }}
+        </h2>
+        <KCheckbox
+          v-for="group in sortedGroups"
+          :key="group.id"
+          :checked="groupIsSelected(group)"
+          :disabled="disabled"
+          @change="toggleGroup($event, group)"
+        >
+          <KLabeledIcon
+            :label="group.name"
+            icon="group"
+            class="font-size-14"
+          />
+        </KCheckbox>
+        <KCheckbox
+          :checked="allUngroupedLearnresIsSelected"
+          :disabled="disabled"
+          @change="selectAllUngroupedLearners($event)"
+        >
+          <KLabeledIcon
+            :label="$tr('allUngroupedLearnres')"
+            icon="people"
+            class="font-size-14"
+          />
+        </KCheckbox>
+      </section>
+      <section>
+        <h2>{{ coachString('individualLearnersLabel') }}</h2>
+        <div class="font-size-14">
+          {{ coachString('onlyShowingEnrolledLabel') }}
+        </div>
+        <IndividualLearnerSelectorTable
+          searchFieldBlock
+          :selectedGroupIds="workingSelectedGroupIds"
+          :selectedLearnerIds.sync="workingAdHocLearners"
+          :disabled="disabled"
+          :targetClassId="classId"
+          @update:selectedLearnerIds="updateAdHocLearners"
+        />
+      </section>
+    </template>
+    <template #bottomNavigation>
+      <div class="bottom-nav-container">
+        <KButton
+          primary
+          :text="coreString('saveAction')"
+          @click="save"
+        />
+      </div>
+    </template>
+  </SidePanelModal>
+
+</template>
+
+
+<script>
+
+  import uniq from 'lodash/uniq';
+  import { mapGetters, mapState } from 'vuex';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { coachStringsMixin } from '../../../common/commonCoachStrings';
+  import IndividualLearnerSelectorTable from '../IndividualLearnerSelector/IndividualLearnerSelectorTable';
+
+  export default {
+    name: 'LearnersSelectorSidePanel',
+    components: {
+      SidePanelModal,
+      IndividualLearnerSelectorTable,
+    },
+    mixins: [coachStringsMixin, commonCoreStrings],
+    props: {
+      groups: {
+        type: Array,
+        required: true,
+      },
+      adHocLearners: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+      selectedGroupIds: {
+        type: Array,
+        required: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      classId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        workingAdHocLearners: this.adHocLearners,
+        workingSelectedGroupIds: this.selectedGroupIds,
+      };
+    },
+    computed: {
+      ...mapGetters('classSummary', ['learners']),
+      ...mapState('classSummary', ['groupMap']),
+      sortedGroups() {
+        const groups = [...this.groups];
+        return groups.sort((a, b) => a.name.localeCompare(b.name));
+      },
+      ungroupedLearnersIds() {
+        return this.learners
+          .filter(learner => {
+            return Object.values(this.groupMap).every(
+              group => !group.member_ids.includes(learner.id),
+            );
+          })
+          .map(learner => learner.id);
+      },
+      allUngroupedLearnresIsSelected() {
+        return this.ungroupedLearnersIds.every(learnerId =>
+          this.workingAdHocLearners.includes(learnerId),
+        );
+      },
+    },
+    methods: {
+      focusFirstEl() {
+        this.$nextTick(() => {
+          this.$el.querySelector('input').focus();
+        });
+      },
+      groupIsSelected({ id }) {
+        return this.workingSelectedGroupIds.includes(id);
+      },
+      toggleGroup(isChecked, { id }) {
+        if (isChecked) {
+          this.workingSelectedGroupIds = [...this.workingSelectedGroupIds, id];
+        } else {
+          this.workingSelectedGroupIds = this.workingSelectedGroupIds.filter(
+            groupId => groupId !== id,
+          );
+        }
+      },
+      updateAdHocLearners(learnerIds) {
+        this.workingAdHocLearners = learnerIds;
+      },
+      selectAllUngroupedLearners(isChecked) {
+        if (isChecked) {
+          this.workingAdHocLearners = uniq([
+            ...this.workingAdHocLearners,
+            ...this.ungroupedLearnersIds,
+          ]);
+        } else {
+          this.workingAdHocLearners = this.workingAdHocLearners.filter(
+            learnerId => !this.ungroupedLearnersIds.includes(learnerId),
+          );
+        }
+      },
+      save() {
+        this.$emit('update:adHocLearners', this.workingAdHocLearners);
+        this.$emit('update:selectedGroupIds', this.workingSelectedGroupIds);
+        this.$emit('close');
+      },
+    },
+    $trs: {
+      allUngroupedLearnres: {
+        message: 'All ungrouped learners',
+        context: 'Option to select all learners that are not in a group',
+      },
+      selectGroupsAndIndividualLearnersTitle: {
+        message: 'Select groups and individual learners',
+        context: 'Title for the side panel to select groups and individual learners',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .mt-0 {
+    margin-top: 0;
+  }
+
+  .bottom-nav-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .side-panel-title {
+    font-size: 18px;
+    font-weight: 600;
+  }
+
+  section h2 {
+    margin-top: 24px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .font-size-14 {
+    font-size: 14px;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
new file mode 100644
index 00000000000..4de2e8fe452
--- /dev/null
+++ b/kolibri/plugins/coach/assets/src/views/common/assignments/SidePanelRecipientsSelector/index.vue
@@ -0,0 +1,262 @@
+<template>
+
+  <div>
+    <!-- Entire class -->
+    <KRadioButtonGroup>
+      <KRadioButton
+        v-model="selectedRecipients"
+        :buttonValue="ClassRecipients.ENTIRE_CLASS"
+        :disabled="disabled"
+      >
+        <KLabeledIcon
+          :label="coachString('entireClassLabel')"
+          icon="classes"
+        />
+      </KRadioButton>
+      <KRadioButton
+        v-if="learners.length > 0"
+        ref="groupOrIndividualRadioButton"
+        v-model="selectedRecipients"
+        :buttonValue="ClassRecipients.GROUP_OR_INDIVIDUAL"
+        :disabled="disabled"
+      >
+        <div>
+          <div
+            :style="{
+              display: 'flex',
+              columnGap: '8px',
+              flexDirection: hasGroupOrIndividualRecipients ? 'column' : 'row',
+              alignItems: hasGroupOrIndividualRecipients ? 'flex-start' : 'center',
+            }"
+          >
+            <KLabeledIcon
+              :label="coachString('groupsAndLearnersLabel')"
+              icon="people"
+              style="width: auto"
+            />
+            <span v-if="hasGroupOrIndividualRecipients">
+              {{ selectedMessage }}
+            </span>
+            <KButton
+              v-if="selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL"
+              appearance="basic-link"
+              :text="hasGroupOrIndividualRecipients ? $tr('changeAction') : $tr('selectAction')"
+              @click="isLearnersSelectorOpen = true"
+            />
+          </div>
+          <div
+            v-if="assignmentInvalidText"
+            :style="{
+              color: $themeTokens.error,
+            }"
+          >
+            {{ assignmentInvalidText }}
+          </div>
+        </div>
+      </KRadioButton>
+    </KRadioButtonGroup>
+
+    <LearnersSelectorSidePanel
+      v-if="isLearnersSelectorOpen"
+      :groups="groups"
+      :adHocLearners="adHocLearners"
+      :selectedGroupIds.sync="selectedGroupIds"
+      :disabled="disabled"
+      :classId="classId"
+      @close="closeSidePanel"
+      @update:adHocLearners="updateAdHocLearners"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { mapGetters } from 'vuex';
+  import every from 'lodash/every';
+  import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
+  import { coachStringsMixin, getTruncatedItemsString } from '../../../common/commonCoachStrings';
+  import LearnersSelectorSidePanel from './LearnersSelectorSidePanel';
+
+  const ClassRecipients = {
+    ENTIRE_CLASS: 'entire_class',
+    GROUP_OR_INDIVIDUAL: 'group_or_individual',
+  };
+
+  export default {
+    name: 'SidePanelRecipientsSelector',
+    components: { LearnersSelectorSidePanel },
+    mixins: [coachStringsMixin, commonCoreStrings],
+    setup() {
+      const { sendAssertiveMessage } = useKLiveRegion();
+      return { sendAssertiveMessage };
+    },
+    props: {
+      // Needs to equal [classId] if entire class is selected
+      // Otherwise, [groupId_1, groupId_2] for individual Learner Groups
+      selectedCollectionIds: {
+        type: Array,
+        required: true,
+      },
+      // Array of objects, each with (group) 'id' and 'name'
+      groups: {
+        type: Array,
+        required: true,
+        validator(value) {
+          return every(value, val => val.name && val.id);
+        },
+      },
+      // For the 'Entire Class' option
+      classId: {
+        type: String,
+        required: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      adHocLearners: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        ClassRecipients,
+        selectedRecipients: null,
+        // Determines whether the group's checkbox is checked and affects which
+        // learners are selectable in IndividualLearnerSelector
+        selectedGroupIds: this.selectedCollectionIds.filter(id => id !== this.classId),
+        isLearnersSelectorOpen: false,
+        assignmentInvalidText: '',
+      };
+    },
+    computed: {
+      ...mapGetters('classSummary', ['getRecipientNamesForExam', 'learners']),
+      hasGroupOrIndividualRecipients() {
+        return (
+          this.selectedRecipients === ClassRecipients.GROUP_OR_INDIVIDUAL &&
+          (this.selectedGroupIds.length > 0 || this.adHocLearners.length > 0)
+        );
+      },
+      hasRecipients() {
+        if (this.selectedRecipients === ClassRecipients.ENTIRE_CLASS) {
+          return true;
+        }
+        return this.hasGroupOrIndividualRecipients;
+      },
+      selectedMessage() {
+        if (!this.hasGroupOrIndividualRecipients) {
+          return '';
+        }
+        const recipientsNames = this.getRecipientNamesForExam({
+          learner_ids: this.adHocLearners,
+          assignments: this.selectedGroupIds,
+        });
+        const truncatedItemsString = getTruncatedItemsString(recipientsNames);
+        return this.$tr('selectedLabel', { selected: truncatedItemsString });
+      },
+    },
+    watch: {
+      selectedRecipients(newVal) {
+        if (newVal === ClassRecipients.ENTIRE_CLASS) {
+          // Backup data in case user selects group or individual again.
+          this.selectedGroupsBackedUp = this.selectedGroupIds;
+          this.adHocLearnersBackedUp = this.adHocLearners;
+
+          this.selectedGroupIds = [this.classId];
+          this.updateAdHocLearners([]);
+        } else {
+          if (this.adHocLearnersBackedUp) {
+            this.updateAdHocLearners(this.adHocLearnersBackedUp);
+          }
+          if (this.selectedGroupsBackedUp) {
+            this.selectedGroupIds = this.selectedGroupsBackedUp;
+          } else {
+            this.selectedGroupIds = this.selectedCollectionIds.filter(id => id !== this.classId);
+          }
+        }
+      },
+      selectedGroupIds(newVal) {
+        this.$emit('update:selectedCollectionIds', newVal);
+      },
+    },
+    mounted() {
+      if (this.selectedCollectionIds.includes(this.classId)) {
+        this.selectedRecipients = ClassRecipients.ENTIRE_CLASS;
+      } else {
+        this.selectedRecipients = ClassRecipients.GROUP_OR_INDIVIDUAL;
+      }
+    },
+    methods: {
+      updateAdHocLearners(newVal) {
+        this.$emit('update:adHocLearners', newVal);
+      },
+      async closeSidePanel() {
+        this.isLearnersSelectorOpen = false;
+        await this.$nextTick();
+        if (this.assignmentInvalidText) {
+          this.validate();
+        }
+      },
+      /**
+       * Validates the selected recipients and sets the error message if invalid
+       * @public
+       */
+      validate() {
+        if (!this.hasRecipients) {
+          this.assignmentInvalidText = this.$tr('noRecipientsSelected');
+        } else {
+          this.assignmentInvalidText = '';
+        }
+        return this.assignmentInvalidText;
+      },
+      /**
+       * @public
+       */
+      async handleSubmitRecipientsFailure() {
+        await this.$nextTick();
+        if (!this.assignmentInvalidText) {
+          return;
+        }
+        this.sendAssertiveMessage(this.assignmentInvalidText);
+        this.$refs.groupOrIndividualRadioButton.focus();
+        // Scroll to the radio button in case focus() didn't do that immediately
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      },
+    },
+    $trs: {
+      selectedLabel: {
+        message: 'Selected: {selected}',
+        context: 'Label to show selected items',
+      },
+      selectAction: {
+        message: 'Select',
+        context: 'Button to select groups and learners',
+      },
+      changeAction: {
+        message: 'Change',
+        context: 'Button to change selected groups and learners',
+      },
+      noRecipientsSelected: {
+        message: 'Please select at least one group or learner',
+        context: 'Error message when no recipients are selected',
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .flex-center {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
index 2c602fff59e..06fa823fab9 100644
--- a/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
+++ b/kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js
@@ -200,6 +200,16 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       'A group is a collection of learners created by a coach inside a class to help with differentiated learning. Quizzes and lessons can be assigned to individual groups as well as to the whole class.',
   },
+  individualLearnersLabel: {
+    message: 'Individual learners',
+    context:
+      'A label for a checkbox that allows the Coach to assign the quiz to individual learners who may not be in a selected group.',
+  },
+  onlyShowingEnrolledLabel: {
+    message: 'Only showing learners that are enrolled in this class',
+    context:
+      "Shows beneath 'Select individual learners' explaining that the table only includes enrolled learners.",
+  },
   helpNeededLabel: {
     message: 'Help needed',
     context:
@@ -635,6 +645,11 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       "In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
   },
+  groupsAndLearnersLabel: {
+    message: 'Groups and individual learners',
+    context:
+      'Label for the radio button that allows the coach to select groups or individual learners to assign a quiz to.',
+  },
 });
 
 // Strings for the Missing Content modals, tooltips, alerts, etc.
@@ -656,6 +671,24 @@ const MissingContentStrings = createTranslator('MissingContentStrings', {
   },
 });
 
+// Strings for showing lists of items that can be truncated
+const truncatedItemsStrings = createTranslator('TruncatedItemsStrings', {
+  twoItems: {
+    message: '{item1}, {item2}',
+    context:
+      "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
+  },
+  threeItems: {
+    message: '{item1}, {item2}, {item3}',
+    context:
+      "DO NOT TRANSLATE\nCopy the source string.\n\nFor reference: 'item' will be replaced by the name of the coach(es) in the list of classes.",
+  },
+  manyItems: {
+    message: '{item1}, {item2}, and {count, number, integer} others',
+    context: "'item' will be replaced by the name of the coach(es) in the list of classes.",
+  },
+});
+
 function coachString(key, args) {
   return coachStrings.$tr(key, args);
 }
@@ -669,4 +702,28 @@ const coachStringsMixin = {
   },
 };
 
-export { coachString, coachStrings, coachStringsMixin };
+function getTruncatedItemsString(items) {
+  if (items.length <= 1) {
+    return items[0] || '';
+  }
+  if (items.length === 2) {
+    return truncatedItemsStrings.$tr('twoItems', {
+      item1: items[0],
+      item2: items[1],
+    });
+  }
+  if (items.length === 3) {
+    return truncatedItemsStrings.$tr('threeItems', {
+      item1: items[0],
+      item2: items[1],
+      item3: items[2],
+    });
+  }
+  return truncatedItemsStrings.$tr('manyItems', {
+    item1: items[0],
+    item2: items[1],
+    count: items.length - 2,
+  });
+}
+
+export { coachString, coachStrings, coachStringsMixin, getTruncatedItemsString };
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
index c60b7065895..b160e7eac08 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
@@ -19,6 +19,7 @@
         v-if="quizInitialized"
         ref="detailsModal"
         assignmentType="quiz"
+        :selectRecipientsWithSidePanel="true"
         :assignment="quiz"
         :classId="classId"
         :groups="groups"
@@ -334,6 +335,10 @@
         }
       },
       saveQuizAndRedirect(close = true) {
+        const errorText = this.$refs.detailsModal.validate();
+        if (errorText) {
+          return;
+        }
         this.saveQuiz()
           .then(exam => {
             this.$refs.detailsModal.handleSubmitSuccess();
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue
index fb40a75fc74..68ef7bd45d0 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/QuizOptionsDropdownMenu.vue
@@ -26,26 +26,30 @@
     name: 'QuizOptionsDropdownMenu',
     mixins: [coachStringsMixin, commonCoreStrings],
     props: {
-      draft: {
-        type: Boolean,
-        default: false,
+      exam: {
+        type: Object,
+        required: false,
+        default: null,
       },
     },
     computed: {
       options() {
-        return [
-          {
-            label: this.draft
-              ? this.coreString('editAction')
-              : this.coreString('editDetailsAction'),
-            value: 'EDIT_DETAILS',
-          },
+        const options = [
           {
             label: this.$tr('copyQuizAction'),
             value: 'COPY',
           },
           { label: this.coreString('deleteAction'), value: 'DELETE' },
         ];
+        if (!this.exam?.archive) {
+          options.unshift({
+            label: this.exam?.draft
+              ? this.coreString('editAction')
+              : this.coreString('editDetailsAction'),
+            value: 'EDIT_DETAILS',
+          });
+        }
+        return options;
       },
     },
     $trs: {
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue
index c2f9348159c..7857db317cb 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/QuizSummaryPage/index.vue
@@ -23,7 +23,7 @@
               style="margin-right: 8px"
             />
             <QuizOptionsDropdownMenu
-              :draft="exam && exam.draft"
+              :exam="exam"
               @select="setCurrentAction"
             />
           </template>
diff --git a/packages/kolibri-common/components/PaginatedListContainer.vue b/packages/kolibri-common/components/PaginatedListContainer.vue
index 5facd29b654..58ab38d5a5f 100644
--- a/packages/kolibri-common/components/PaginatedListContainer.vue
+++ b/packages/kolibri-common/components/PaginatedListContainer.vue
@@ -2,16 +2,17 @@
 
   <div>
     <KGrid>
-      <KGridItem :layout12="{ span: 7 }">
+      <KGridItem :layout12="{ span: searchFieldBlock ? 12 : 7 }">
         <slot name="otherFilter"></slot>
       </KGridItem>
       <KGridItem
-        :layout12="{ span: 5, alignment: 'right' }"
+        :layout12="{ span: searchFieldBlock ? 12 : 5, alignment: 'right' }"
         class="text-filter"
       >
         <FilterTextbox
           v-model="filterInput"
           :placeholder="filterPlaceholder"
+          :style="{ width: searchFieldBlock ? '100%' : null }"
         />
       </KGridItem>
     </KGrid>
@@ -75,6 +76,10 @@
         required: false,
         default: 30,
       },
+      searchFieldBlock: {
+        type: Boolean,
+        required: false,
+      },
     },
     data() {
       return {
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index 375714e843f..26b1029c8fe 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -88,8 +88,6 @@
         /* Will be calculated in mounted() as it will get the height of the fixedHeader then */
         // @type {RefImpl<number>}
         windowBreakpoint,
-        fixedHeaderHeight: 0,
-        fixedBottombarHeight: 0,
         lastFocus: null,
       };
     },
@@ -181,11 +179,6 @@
     mounted() {
       const htmlTag = window.document.getElementsByTagName('html')[0];
       htmlTag.style['overflow-y'] = 'hidden';
-      // Gets the height of the fixed header - adds 40 to account for padding + 24 for closeButton
-      this.fixedHeaderHeight = this.$refs.fixedHeader.clientHeight;
-      if (this.$refs.fixedBottombar) {
-        this.fixedBottombarHeight = this.$refs.fixedBottombar.clientHeight;
-      }
       this.$nextTick(() => {
         this.$emit('shouldFocusFirstEl');
       });
diff --git a/packages/kolibri/package.json b/packages/kolibri/package.json
index c00f0ff1a58..da4d73b2d34 100644
--- a/packages/kolibri/package.json
+++ b/packages/kolibri/package.json
@@ -77,7 +77,7 @@
     "frame-throttle": "^3.0.0",
     "intl": "^1.2.4",
     "kolibri-constants": "0.2.8",
-    "kolibri-design-system": "5.0.0-rc11",
+    "kolibri-design-system": "5.0.0-rc12",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "path-to-regexp": "1.9.0",
diff --git a/yarn.lock b/yarn.lock
index 7e6147ae544..c79af4867cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7791,10 +7791,10 @@ kolibri-constants@0.2.8:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.8.tgz#34ad2e2b87cf132ebe8dbaa9b64dc4a7bf261f8d"
   integrity sha512-ycXeK+ePw7zkiNtf+nX/yF5BO52+onoYS2V3d9HZDIvx7X6CDJPtMcypkXrK9aZ0JbWAegRFMD/lAd8q21cf4Q==
 
-kolibri-design-system@5.0.0-rc11:
-  version "5.0.0-rc11"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc11.tgz#433b31d25337255708cf1bc28b86e4d619962f98"
-  integrity sha512-g3mxd+Bd82al5Bf3zfO3tizItI/LeMVCUVXwifv8rtbukIa5aoWDwCTUJkdnEQCFSZR5WQ0k9mhieIAe47ebvQ==
+kolibri-design-system@5.0.0-rc12:
+  version "5.0.0-rc12"
+  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-5.0.0-rc12.tgz#326fa3446dbf597c1cdd8b08e3a4b64cb5d6ea30"
+  integrity sha512-IDbt5ADUSkvG6LyR9tUwMZz26xVcRBk1PBYCTbjNK+dJeuATp92QhTSh87sWXxlSoYV7/1DURqLA3lCefsaQnA==
   dependencies:
     aphrodite "https://github.com/learningequality/aphrodite/"
     autosize "3.0.21"