diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
index 572533788b..12c20e9b4a 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
@@ -1,149 +1,157 @@
 <template>
 
-  <div class="wrapper">
-    <h1 class="section-header">
-      {{
-        replaceQuestions$({
-          sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
-        })
-      }}
-    </h1>
-    <p>{{ replaceQuestionsHeading$() }}</p>
-    <span
-      class="divider"
-      :style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
-    >
-    </span>
-    <AccordionContainer :items="replacementQuestionPool">
-      <template #left-actions>
-        <KCheckbox
-          ref="selectAllCheckbox"
-          class="select-all-box"
-          :label="selectAllLabel$()"
-          :checked="selectAllIsChecked"
-          :indeterminate="selectAllIsIndeterminate"
-          @change="selectAllReplacementQuestions"
-        />
-      </template>
-      <template #right-actions>
-        <KIconButton
-          icon="expandAll"
-          :tooltip="expandAll$()"
-          :disabled="!canExpandAll"
-          @click="expandAll"
-        />
-        <KIconButton
-          icon="collapseAll"
-          :tooltip="collapseAll$()"
-          :disabled="!canCollapseAll"
-          @click="collapseAll"
-        />
-      </template>
-      <AccordionItem
-        v-for="(question, index) in replacementQuestionPool"
-        :id="`replacement-question-${question.item}`"
-        :key="`replacement-question-${question.item}`"
-        :title="displayQuestionTitle(question, activeResourceMap[question.exercise_id].title)"
-        :aria-selected="
-          replacements.length && replacements.length === selectedActiveQuestions.length
-        "
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+  >
+    <template #header>
+      <h1 class="section-header">
+        {{
+          replaceQuestions$({
+            sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
+          })
+        }}
+      </h1>
+    </template>
+    <div class="wrapper">
+      <p>{{ replaceQuestionsHeading$() }}</p>
+      <span
+        class="divider"
+        :style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
       >
-        <template #heading="{ title }">
-          <h3 class="accordion-header">
-            <KCheckbox
-              class="accordion-checkbox"
-              :checked="replacements.map(r => r.item).includes(question.item)"
-              @change="() => toggleInReplacements(question)"
-            />
-            <KButton
-              tabindex="0"
-              appearance="basic-link"
-              :style="accordionStyleOverrides"
-              class="accordion-header-label"
-              :aria-expanded="isExpanded(question.item)"
-              :aria-controls="`question-panel-${question.item}`"
-              @click="toggle(index)"
-            >
-              <span>{{ title }}</span>
-              <KIcon
-                class="chevron-icon"
-                :icon="isExpanded(index) ? 'chevronUp' : 'chevronRight'"
-              />
-            </KButton>
-          </h3>
+      </span>
+      <AccordionContainer :items="replacementQuestionPool">
+        <template #left-actions>
+          <KCheckbox
+            ref="selectAllCheckbox"
+            class="select-all-box"
+            :label="selectAllLabel$()"
+            :checked="selectAllIsChecked"
+            :indeterminate="selectAllIsIndeterminate"
+            @change="selectAllReplacementQuestions"
+          />
         </template>
-        <template #content>
-          <div
-            v-if="isExpanded(index)"
-            :id="`question-panel-${question.item}`"
-            :ref="`question-panel-${question.item}`"
-            :style="{ userSelect: dragActive ? 'none!important' : 'text' }"
-          >
-            <ContentRenderer
-              :ref="`contentRenderer-${question.item}`"
-              :kind="activeResourceMap[question.exercise_id].kind"
-              :lang="activeResourceMap[question.exercise_id].lang"
-              :files="activeResourceMap[question.exercise_id].files"
-              :available="activeResourceMap[question.exercise_id].available"
-              :itemId="question.question_id"
-              :assessment="true"
-              :allowHints="false"
-              :interactive="false"
-              @interaction="() => null"
-              @updateProgress="() => null"
-              @updateContentState="() => null"
-              @error="err => $emit('error', err)"
-            />
-          </div>
+        <template #right-actions>
+          <KIconButton
+            icon="expandAll"
+            :tooltip="expandAll$()"
+            :disabled="!canExpandAll"
+            @click="expandAll"
+          />
+          <KIconButton
+            icon="collapseAll"
+            :tooltip="collapseAll$()"
+            :disabled="!canCollapseAll"
+            @click="collapseAll"
+          />
         </template>
-      </AccordionItem>
-    </AccordionContainer>
-
-    <div class="bottom-navigation">
-      <div>
-        {{ replaceSelectedQuestionsString }}
+        <AccordionItem
+          v-for="(question, index) in replacementQuestionPool"
+          :id="`replacement-question-${question.item}`"
+          :key="`replacement-question-${question.item}`"
+          :title="displayQuestionTitle(question, activeResourceMap[question.exercise_id].title)"
+          :aria-selected="
+            replacements.length && replacements.length === selectedActiveQuestions.length
+          "
+        >
+          <template #heading="{ title }">
+            <h3 class="accordion-header">
+              <KCheckbox
+                class="accordion-checkbox"
+                :checked="replacements.map(r => r.item).includes(question.item)"
+                @change="() => toggleInReplacements(question)"
+              />
+              <KButton
+                tabindex="0"
+                appearance="basic-link"
+                :style="accordionStyleOverrides"
+                class="accordion-header-label"
+                :aria-expanded="isExpanded(question.item)"
+                :aria-controls="`question-panel-${question.item}`"
+                @click="toggle(index)"
+              >
+                <span>{{ title }}</span>
+                <KIcon
+                  class="chevron-icon"
+                  :icon="isExpanded(index) ? 'chevronUp' : 'chevronRight'"
+                />
+              </KButton>
+            </h3>
+          </template>
+          <template #content>
+            <div
+              v-if="isExpanded(index)"
+              :id="`question-panel-${question.item}`"
+              :ref="`question-panel-${question.item}`"
+              :style="{ userSelect: dragActive ? 'none!important' : 'text' }"
+            >
+              <ContentRenderer
+                :ref="`contentRenderer-${question.item}`"
+                :kind="activeResourceMap[question.exercise_id].kind"
+                :lang="activeResourceMap[question.exercise_id].lang"
+                :files="activeResourceMap[question.exercise_id].files"
+                :available="activeResourceMap[question.exercise_id].available"
+                :itemId="question.question_id"
+                :assessment="true"
+                :allowHints="false"
+                :interactive="false"
+                @interaction="() => null"
+                @updateProgress="() => null"
+                @updateContentState="() => null"
+                @error="err => $emit('error', err)"
+              />
+            </div>
+          </template>
+        </AccordionItem>
+      </AccordionContainer>
+
+      <div class="bottom-navigation">
+        <div>
+          {{ replaceSelectedQuestionsString }}
+        </div>
+        <KButton
+          :primary="true"
+          :text="replaceAction$()"
+          :disabled="!canProceedToReplace"
+          @click="confirmReplacement"
+        />
       </div>
-      <KButton
-        :primary="true"
-        :text="replaceAction$()"
-        :disabled="!canProceedToReplace"
-        @click="confirmReplacement"
-      />
+      <KModal
+        v-if="showReplacementConfirmation"
+        :submitText="coreString('confirmAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="
+          replaceQuestions$({
+            sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
+          })
+        "
+        @cancel="showReplacementConfirmation = false"
+        @submit="submitReplacement"
+      >
+        <div>{{ replaceQuestionsExplaination$() }}</div>
+        <div style="font-weight: bold">
+          {{ noUndoWarning$() }}
+        </div>
+      </KModal>
+      <KModal
+        v-if="showCloseConfirmation"
+        :submitText="coreString('continueAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="closeConfirmationTitle$()"
+        @cancel="showCloseConfirmation = false"
+        @submit="handleConfirmClose"
+      >
+        {{ closeConfirmationMessage$() }}
+      </KModal>
     </div>
-    <KModal
-      v-if="showReplacementConfirmation"
-      :submitText="coreString('confirmAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="
-        replaceQuestions$({
-          sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
-        })
-      "
-      @cancel="showReplacementConfirmation = false"
-      @submit="submitReplacement"
-    >
-      <div>{{ replaceQuestionsExplaination$() }}</div>
-      <div style="font-weight: bold">
-        {{ noUndoWarning$() }}
-      </div>
-    </KModal>
-    <KModal
-      v-if="showCloseConfirmation"
-      :submitText="coreString('continueAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="closeConfirmationTitle$()"
-      @cancel="showCloseConfirmation = false"
-      @submit="handleConfirmClose"
-    >
-      {{ closeConfirmationMessage$() }}
-    </KModal>
-  </div>
+  </SidePanelModal>
 
 </template>
 
 
 <script>
 
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import {
     displaySectionTitle,
     enhancedQuizManagementStrings,
@@ -165,6 +173,7 @@
     components: {
       AccordionContainer,
       AccordionItem,
+      SidePanelModal,
     },
     mixins: [commonCoreStrings],
     setup(_, context) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 02bbb6748e..f2db57cafd 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -1,10 +1,11 @@
 <template>
 
-  <div class="select-resource">
-    <div v-if="loading && !loadingMore">
-      <KCircularLoader />
-    </div>
-    <div v-else>
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    @closePanel="handleClosePanel"
+  >
+    <template #header>
       <h1
         v-if="selectPracticeQuiz"
         class="select-folder-style"
@@ -12,181 +13,185 @@
         {{ selectPracticeQuizLabel$() }}
       </h1>
       <div v-else>
-        <h1 class="select-folder-style">
+        <h1 style="margin-bottom: 0.25em">
           {{
             selectResourcesDescription$({
               sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
             })
           }}
         </h1>
-        <p>
+        <p style="margin-top: 0">
           {{ numberOfQuestionsSelected$({ count: activeQuestions.length }) }}
-          <span
-            class="divider"
-            :style="{ borderTop: `solid 1px ${$themeTokens.fineLine}` }"
-          >
-          </span>
         </p>
-        <p>{{ numberOfQuestionsToAdd$() }}</p>
-        <div class="number-question">
-          <div>
-            <KTextbox
-              ref="numQuest"
-              v-model.number="questionCount"
-              type="number"
-              :label="numberOfQuestionsLabel$()"
-              :max="maxQuestions"
-              :min="1"
-              :invalid="questionCount > maxQuestions"
-              :invalidText="maxNumberOfQuestions$({ count: maxQuestions })"
-              :showInvalidText="true"
-            />
-          </div>
-          <div>
-            <div
-              :style="borderStyle"
-              class="group-button-border"
-            >
-              <KIconButton
-                icon="minus"
-                aria-hidden="true"
-                class="number-btn"
-                :disabled="questionCount === 1"
-                @click="questionCount -= 1"
-              />
-              <span :style="dividerStyle"> | </span>
-              <KIconButton
-                icon="plus"
-                aria-hidden="true"
-                class="number-btn"
-                :disabled="questionCount >= maxQuestions"
-                @click="questionCount += 1"
+      </div>
+    </template>
+    <div class="select-resource">
+      <div v-if="loading && !loadingMore">
+        <KCircularLoader />
+      </div>
+      <div v-else>
+        <div>
+          <p>{{ numberOfQuestionsToAdd$() }}</p>
+          <div class="number-question">
+            <div>
+              <KTextbox
+                ref="numQuest"
+                v-model.number="questionCount"
+                type="number"
+                :label="numberOfQuestionsLabel$()"
+                :max="maxQuestions"
+                :min="1"
+                :invalid="questionCount > maxQuestions"
+                :invalidText="maxNumberOfQuestions$({ count: maxQuestions })"
+                :showInvalidText="true"
               />
             </div>
+            <div>
+              <div
+                :style="borderStyle"
+                class="group-button-border"
+              >
+                <KIconButton
+                  icon="minus"
+                  aria-hidden="true"
+                  class="number-btn"
+                  :disabled="questionCount === 1"
+                  @click="questionCount -= 1"
+                />
+                <span :style="dividerStyle"> | </span>
+                <KIconButton
+                  icon="plus"
+                  aria-hidden="true"
+                  class="number-btn"
+                  :disabled="questionCount >= maxQuestions"
+                  @click="questionCount += 1"
+                />
+              </div>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">
-        <p>{{ coreString('selectFromBookmarks') }}</p>
+        <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">
+          <p>{{ coreString('selectFromBookmarks') }}</p>
 
-        <div>
-          <KRouterLink
-            :appearanceOverrides="{
-              width: '100%',
-              textDecoration: 'none',
-              color: $themeTokens.text,
-            }"
-            :to="getBookmarksLink"
-          >
-            <div :class="windowIsSmall ? 'mobile-bookmark-container' : 'bookmark-container'">
-              <BookmarkIcon :class="windowIsSmall ? 'mobile-bookmark-icon' : ''" />
-              <div :class="windowIsSmall ? 'mobile-text' : 'text'">
-                <h3>{{ coreString('bookmarksLabel') }}</h3>
-                <p>{{ numberOfSelectedBookmarks$({ count: bookmarks.length }) }}</p>
+          <div>
+            <KRouterLink
+              :appearanceOverrides="{
+                width: '100%',
+                textDecoration: 'none',
+                color: $themeTokens.text,
+              }"
+              :to="getBookmarksLink"
+            >
+              <div :class="windowIsSmall ? 'mobile-bookmark-container' : 'bookmark-container'">
+                <BookmarkIcon :class="windowIsSmall ? 'mobile-bookmark-icon' : ''" />
+                <div :class="windowIsSmall ? 'mobile-text' : 'text'">
+                  <h3>{{ coreString('bookmarksLabel') }}</h3>
+                  <p>{{ numberOfSelectedBookmarks$({ count: bookmarks.length }) }}</p>
+                </div>
               </div>
-            </div>
-          </KRouterLink>
+            </KRouterLink>
+          </div>
         </div>
-      </div>
 
-      <ResourceSelectionBreadcrumbs
-        v-if="isTopicIdSet"
-        :ancestors="[...topic.ancestors, topic]"
-        :channelsLink="channelsLink"
-        :topicsLink="topicsLink"
-      />
-
-      <LessonsSearchBox
-        v-if="!showBookmarks"
-        @clear="clearSearchTerm"
-        @searchterm="handleSearchTermChange"
-      />
-
-      <div
-        v-if="showNumberOfQuestionsWarning"
-        class="shadow"
-        :style="{
-          padding: '1em',
-          marginTop: '2em',
-          marginBottom: '2em',
-          backgroundColor: $themePalette.grey.v_200,
-          position: 'sticky',
-          insetBlockStart: '0',
-          zIndex: '4',
-        }"
-      >
-        {{
-          cannotSelectSomeTopicWarning$({
-            count: Math.max(maxSectionQuestionOptions, workingPoolUnusedQuestions),
-          })
-        }}
-      </div>
+        <ResourceSelectionBreadcrumbs
+          v-if="isTopicIdSet"
+          :ancestors="[...topic.ancestors, topic]"
+          :channelsLink="channelsLink"
+          :topicsLink="topicsLink"
+        />
 
-      <ContentCardList
-        :contentList="contentList"
-        :showSelectAll="showSelectAll"
-        :viewMoreButtonState="viewMoreButtonState"
-        :selectAllChecked="selectAllChecked"
-        :selectAllIndeterminate="selectAllIndeterminate"
-        :contentIsChecked="contentPresentInWorkingResourcePool"
-        :contentIsIndeterminate="contentPartlyPresentInWorkingResourcePool"
-        :contentHasCheckbox="showCheckbox"
-        :contentCheckboxDisabled="
-          c =>
-            !nodeIsSelectableOrUnselectable(c) && !(c.is_leaf && workingPoolUnusedQuestions === 0)
-        "
-        :contentCardMessage="selectionMetadata"
-        :contentCardLink="contentLink"
-        :loadingMoreState="loadingMore"
-        :showRadioButtons="selectPracticeQuiz"
-        @changeselectall="handleSelectAll"
-        @change_content_card="toggleSelected"
-        @moreresults="fetchMoreResources"
-      />
-
-      <div class="bottom-navigation">
-        <div>
-          <span v-if="!selectPracticeQuiz">
-            <span v-if="tooManyQuestions">
-              {{
-                tooManyQuestions$({
-                  count: maxSectionQuestionOptions,
-                })
-              }}
-            </span>
-            <span v-else>
-              {{
-                questionsFromResources$({
-                  questions: workingPoolUnusedQuestions,
-                })
-              }}
-            </span>
-          </span>
+        <LessonsSearchBox
+          v-if="!showBookmarks"
+          @clear="clearSearchTerm"
+          @searchterm="handleSearchTermChange"
+        />
+
+        <div
+          v-if="showNumberOfQuestionsWarning"
+          class="shadow"
+          :style="{
+            padding: '1em',
+            marginTop: '2em',
+            marginBottom: '2em',
+            backgroundColor: $themePalette.grey.v_200,
+            position: 'sticky',
+            insetBlockStart: '0',
+            zIndex: '4',
+          }"
+        >
+          {{
+            cannotSelectSomeTopicWarning$({
+              count: Math.max(maxSectionQuestionOptions, workingPoolUnusedQuestions),
+            })
+          }}
         </div>
-        <KButton
-          :text="
-            selectPracticeQuiz
-              ? selectQuiz$()
-              : addNumberOfQuestions$({ count: Math.max(1, questionCount) })
+
+        <ContentCardList
+          :contentList="contentList"
+          :showSelectAll="showSelectAll"
+          :viewMoreButtonState="viewMoreButtonState"
+          :selectAllChecked="selectAllChecked"
+          :selectAllIndeterminate="selectAllIndeterminate"
+          :contentIsChecked="contentPresentInWorkingResourcePool"
+          :contentIsIndeterminate="contentPartlyPresentInWorkingResourcePool"
+          :contentHasCheckbox="showCheckbox"
+          :contentCheckboxDisabled="
+            c =>
+              !nodeIsSelectableOrUnselectable(c) && !(c.is_leaf && workingPoolUnusedQuestions === 0)
           "
-          :primary="true"
-          :disabled="disableSave"
-          @click="saveSelectedResource"
+          :contentCardMessage="selectionMetadata"
+          :contentCardLink="contentLink"
+          :loadingMoreState="loadingMore"
+          :showRadioButtons="selectPracticeQuiz"
+          @changeselectall="handleSelectAll"
+          @change_content_card="toggleSelected"
+          @moreresults="fetchMoreResources"
         />
+
+        <div class="bottom-navigation">
+          <div>
+            <span v-if="!selectPracticeQuiz">
+              <span v-if="tooManyQuestions">
+                {{
+                  tooManyQuestions$({
+                    count: maxSectionQuestionOptions,
+                  })
+                }}
+              </span>
+              <span v-else>
+                {{
+                  questionsFromResources$({
+                    questions: workingPoolUnusedQuestions,
+                  })
+                }}
+              </span>
+            </span>
+          </div>
+          <KButton
+            :text="
+              selectPracticeQuiz
+                ? selectQuiz$()
+                : addNumberOfQuestions$({ count: Math.max(1, questionCount) })
+            "
+            :primary="true"
+            :disabled="disableSave"
+            @click="saveSelectedResource"
+          />
+        </div>
       </div>
+      <KModal
+        v-if="showCloseConfirmation"
+        :submitText="coreString('continueAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="closeConfirmationTitle$()"
+        @cancel="handleCancelClose"
+        @submit="handleConfirmClose"
+      >
+        {{ closeConfirmationMessage$() }}
+      </KModal>
     </div>
-    <KModal
-      v-if="showCloseConfirmation"
-      :submitText="coreString('continueAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="closeConfirmationTitle$()"
-      @cancel="handleCancelClose"
-      @submit="handleConfirmClose"
-    >
-      {{ closeConfirmationMessage$() }}
-    </KModal>
-  </div>
+  </SidePanelModal>
 
 </template>
 
@@ -206,6 +211,7 @@
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds, MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { exerciseToQuestionArray } from '../../../utils/selectQuestions';
   import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
   import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
@@ -218,6 +224,7 @@
   export default {
     name: 'ResourceSelection',
     components: {
+      SidePanelModal,
       ContentCardList,
       BookmarkIcon,
       LessonsSearchBox,
@@ -619,10 +626,10 @@
 
       const contentList = computed(() => {
         /*
-        if (!topicId.value) {
-          return channels.value;
-        }
-        */
+          if (!topicId.value) {
+            return channels.value;
+          }
+          */
         if (showBookmarks.value) {
           return bookmarks.value.map(item => ({ ...item, is_leaf: true }));
         }
@@ -809,12 +816,12 @@
         return `color : ${this.$themeTokens.fineLine}`;
       },
       /*
-      selectAllIsVisible() {
-        TO BE IMPLEMENTED IN https://github.com/learningequality/kolibri/issues/11734
-        Should only be visible if there are any checkboxes at all -- we'll only be showing
-        checkboxes for Exercises, not topics
-      },
-      */
+        selectAllIsVisible() {
+          TO BE IMPLEMENTED IN https://github.com/learningequality/kolibri/issues/11734
+          Should only be visible if there are any checkboxes at all -- we'll only be showing
+          checkboxes for Exercises, not topics
+        },
+        */
     },
     watch: {
       bookmarks(newVal) {
@@ -834,6 +841,9 @@
       focusFirstEl() {
         this.$refs.textbox.focus();
       },
+      handleClosePanel() {
+        this.$router.push({ name: PageNames.EXAM_CREATION_ROOT });
+      },
       contentLink(content) {
         const { name, params, query } = this.$route;
         if (!content.is_leaf) {
@@ -1004,11 +1014,6 @@
     border-top: 1px solid black;
   }
 
-  .select-folder-style {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-
   .align-select-folder-style {
     margin-top: 2em;
   }
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index 0fac760036..f9d1e84402 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -1,122 +1,129 @@
 <template>
 
-  <div
-    v-if="activeSection"
-    class="section-settings-content"
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
   >
-    <h1 :style="{ color: $themeTokens.text }">
-      {{ sectionSettings$() }}
-    </h1>
-
-    <KTextbox
-      ref="sectionTitle"
-      v-model="section_title"
-      :label="sectionTitle$()"
-      :invalid="sectionTitleInvalid"
-      :invalidText="sectionTitleInvalidText"
-      :maxlength="100"
-    />
-
-    <KTextbox
-      v-model="description"
-      :label="optionalDescriptionLabel$()"
-      :maxlength="400"
-      :textArea="true"
-      class="description-ktextbox-style"
-    />
-
-    <hr :style="dividerStyle" >
-
-    <div>
-      <h5 class="section-settings-heading">
-        {{ questionOrder$() }}
-      </h5>
-      <KGrid>
-        <KGridItem
-          :layout12="{ span: 6 }"
-          :layout8="{ span: 4 }"
-          :layout4="{ span: 2 }"
-        >
-          <KRadioButton
-            v-model="learners_see_fixed_order"
-            :label="randomizedLabel$()"
-            :buttonValue="false"
-            :description="randomizedOptionDescription$()"
-          />
-        </KGridItem>
-        <KGridItem
-          :layout12="{ span: 6 }"
-          :layout8="{ span: 4 }"
-          :layout4="{ span: 2 }"
-        >
-          <KRadioButton
-            v-model="learners_see_fixed_order"
-            :label="fixedLabel$()"
-            :buttonValue="true"
-            :description="fixedOptionDescription$()"
-          />
-        </KGridItem>
-      </KGrid>
-    </div>
-
-    <hr :style="dividerStyle" >
-
-    <h5 class="section-settings-heading">
-      {{
-        numberOfQuestionsSelected$({
-          count: activeQuestions.length,
-        })
-      }}
-    </h5>
-
-    <KRouterLink
-      v-if="showResourceButton"
-      appearance="raised-button"
-      :to="selectResourcesRoute"
-      style="margin-bottom: 1em"
-      iconAfter="forward"
+    <template #header>
+      <h1 :style="{ color: $themeTokens.text }">
+        {{ sectionSettings$() }}
+      </h1>
+    </template>
+
+    <div
+      v-if="activeSection"
+      class="section-settings-content"
     >
-      {{ resourceButtonLabel }}
-    </KRouterLink>
-    <p v-else>
-      {{ maxQuestionsLabel }}
-    </p>
-    <div class="bottom-navigation">
-      <KButton
-        :text="deleteSectionLabel$()"
-        @click="handleDeleteSection()"
+      <KTextbox
+        ref="sectionTitle"
+        v-model="section_title"
+        :label="sectionTitle$()"
+        :invalid="sectionTitleInvalid"
+        :invalidText="sectionTitleInvalidText"
+        :maxlength="100"
       />
-      <KButton
-        :primary="true"
-        :text="applySettings$()"
-        @click="applySettings()"
+
+      <KTextbox
+        v-model="description"
+        :label="optionalDescriptionLabel$()"
+        :maxlength="400"
+        :textArea="true"
+        class="description-ktextbox-style"
       />
+
+      <hr :style="dividerStyle" >
+
+      <div>
+        <h5 class="section-settings-heading">
+          {{ questionOrder$() }}
+        </h5>
+        <KGrid>
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+            :layout4="{ span: 2 }"
+          >
+            <KRadioButton
+              v-model="learners_see_fixed_order"
+              :label="randomizedLabel$()"
+              :buttonValue="false"
+              :description="randomizedOptionDescription$()"
+            />
+          </KGridItem>
+          <KGridItem
+            :layout12="{ span: 6 }"
+            :layout8="{ span: 4 }"
+            :layout4="{ span: 2 }"
+          >
+            <KRadioButton
+              v-model="learners_see_fixed_order"
+              :label="fixedLabel$()"
+              :buttonValue="true"
+              :description="fixedOptionDescription$()"
+            />
+          </KGridItem>
+        </KGrid>
+      </div>
+
+      <hr :style="dividerStyle" >
+
+      <h5 class="section-settings-heading">
+        {{
+          numberOfQuestionsSelected$({
+            count: activeQuestions.length,
+          })
+        }}
+      </h5>
+
+      <KRouterLink
+        v-if="showResourceButton"
+        appearance="raised-button"
+        :to="selectResourcesRoute"
+        style="margin-bottom: 1em"
+        iconAfter="forward"
+      >
+        {{ resourceButtonLabel }}
+      </KRouterLink>
+      <p v-else>
+        {{ maxQuestionsLabel }}
+      </p>
+      <div class="bottom-navigation">
+        <KButton
+          :text="deleteSectionLabel$()"
+          @click="handleDeleteSection()"
+        />
+        <KButton
+          :primary="true"
+          :text="applySettings$()"
+          @click="applySettings()"
+        />
+      </div>
+      <KModal
+        v-if="showCloseConfirmation"
+        :submitText="coreString('continueAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="closeConfirmationTitle$()"
+        @cancel="handleCancelClose"
+        @submit="handleConfirmClose"
+      >
+        {{ closeConfirmationMessage$() }}
+      </KModal>
+      <KModal
+        v-if="showDeleteConfirmation"
+        :title="deleteSectionLabel$()"
+        :submitText="coreString('deleteAction')"
+        :cancelText="coreString('cancelAction')"
+        @cancel="handleCancelDelete"
+        @submit="handleConfirmDelete"
+      >
+        {{
+          deleteConfirmation$({
+            section_title: displaySectionTitle(activeSection, activeSectionIndex),
+          })
+        }}
+      </KModal>
     </div>
-    <KModal
-      v-if="showCloseConfirmation"
-      :submitText="coreString('continueAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="closeConfirmationTitle$()"
-      @cancel="handleCancelClose"
-      @submit="handleConfirmClose"
-    >
-      {{ closeConfirmationMessage$() }}
-    </KModal>
-    <KModal
-      v-if="showDeleteConfirmation"
-      :title="deleteSectionLabel$()"
-      :submitText="coreString('deleteAction')"
-      :cancelText="coreString('cancelAction')"
-      @cancel="handleCancelDelete"
-      @submit="handleConfirmDelete"
-    >
-      {{
-        deleteConfirmation$({
-          section_title: displaySectionTitle(activeSection, activeSectionIndex),
-        })
-      }}
-    </KModal>
-  </div>
+  </SidePanelModal>
 
 </template>
 
@@ -134,12 +141,14 @@
   import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import { PageNames } from '../../../constants/index';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
   import useDrag from './useDrag.js';
 
   export default {
     name: 'SectionEditor',
+    components: { SidePanelModal },
     mixins: [commonCoreStrings],
     setup(_, context) {
       const router = getCurrentInstance().proxy.$router;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionOrder.vue
index 123275279e..b3b425272d 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionOrder.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionOrder.vue
@@ -1,85 +1,94 @@
 <template>
 
-  <div
-    v-if="activeSection"
-    class="section-settings-content"
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
   >
-    <h1>
-      {{ coreString('editAction') + ' - ' + sectionOrderLabel$() }}
-    </h1>
-
-    <DragContainer
-      v-if="sectionOrderList.length > 0"
-      :items="sectionOrderList"
-      @sort="handleSectionSort"
+    <template #header>
+      <h1>
+        {{ coreString('editAction') + ' - ' + sectionOrderLabel$() }}
+      </h1>
+    </template>
+
+    <div
+      v-if="activeSection"
+      class="section-settings-content"
     >
-      <transition-group>
-        <Draggable
-          v-for="(section, index) in sectionOrderList"
-          :key="section.section_id"
-          :style="draggableStyle"
-        >
-          <DragHandle>
-            <div
-              :style="
-                activeSection.section_id === section.section_id ? activeSectionStyles : borderStyle
-              "
-              class="section-order-list"
-            >
-              <DragSortWidget
-                class="drag-title"
-                moveUpText="up"
-                moveDownText="down"
-                :noDrag="true"
-                :isFirst="index === 0"
-                :isLast="index === sectionOrderList.length - 1"
-                @moveUp="() => handleKeyboardDragUp(index, sectionOrderList)"
-                @moveDown="() => handleKeyboardDragDown(index, sectionOrderList)"
-              />
-              <span
-                class="drag-title"
-                style="flex: 1"
+      <DragContainer
+        v-if="sectionOrderList.length > 0"
+        :items="sectionOrderList"
+        @sort="handleSectionSort"
+      >
+        <transition-group>
+          <Draggable
+            v-for="(section, index) in sectionOrderList"
+            :key="section.section_id"
+            :style="draggableStyle"
+          >
+            <DragHandle>
+              <div
+                :style="
+                  activeSection.section_id === section.section_id
+                    ? activeSectionStyles
+                    : borderStyle
+                "
+                class="section-order-list"
               >
-                {{ sectionOrderingTitle(section) }}
-              </span>
-              <span
-                v-if="section.description"
-                class="current-section-style"
-                style="flex: 2; text-overflow: ellipsis"
-              >
-                {{ section.description }}
-              </span>
-              <span
-                v-if="section.section_id === activeSection.section_id"
-                class="current-section-text"
-              >
-                ({{ currentSection$() }})
-              </span>
-            </div>
-          </DragHandle>
-        </Draggable>
-      </transition-group>
-    </DragContainer>
-
-    <div class="bottom-buttons-style">
-      <KButton
-        :primary="true"
-        :text="applySettings$()"
-        @click="applySettings()"
-      />
+                <DragSortWidget
+                  class="drag-title"
+                  moveUpText="up"
+                  moveDownText="down"
+                  :noDrag="true"
+                  :isFirst="index === 0"
+                  :isLast="index === sectionOrderList.length - 1"
+                  @moveUp="() => handleKeyboardDragUp(index, sectionOrderList)"
+                  @moveDown="() => handleKeyboardDragDown(index, sectionOrderList)"
+                />
+                <span
+                  class="drag-title"
+                  style="flex: 1"
+                >
+                  {{ sectionOrderingTitle(section) }}
+                </span>
+                <span
+                  v-if="section.description"
+                  class="current-section-style"
+                  style="flex: 2; text-overflow: ellipsis"
+                >
+                  {{ section.description }}
+                </span>
+                <span
+                  v-if="section.section_id === activeSection.section_id"
+                  class="current-section-text"
+                >
+                  ({{ currentSection$() }})
+                </span>
+              </div>
+            </DragHandle>
+          </Draggable>
+        </transition-group>
+      </DragContainer>
+
+      <div class="bottom-buttons-style">
+        <KButton
+          :primary="true"
+          :text="applySettings$()"
+          @click="applySettings()"
+        />
+      </div>
+
+      <KModal
+        v-if="showCloseConfirmation"
+        :submitText="coreString('continueAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="closeConfirmationTitle$()"
+        @cancel="handleCancelClose"
+        @submit="handleConfirmClose"
+      >
+        {{ closeConfirmationMessage$() }}
+      </KModal>
     </div>
-
-    <KModal
-      v-if="showCloseConfirmation"
-      :submitText="coreString('continueAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="closeConfirmationTitle$()"
-      @cancel="handleCancelClose"
-      @submit="handleConfirmClose"
-    >
-      {{ closeConfirmationMessage$() }}
-    </KModal>
-  </div>
+  </SidePanelModal>
 
 </template>
 
@@ -92,6 +101,7 @@
     displaySectionTitle,
     enhancedQuizManagementStrings,
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import Draggable from 'kolibri.coreVue.components.Draggable';
@@ -109,6 +119,7 @@
       DragContainer,
       DragHandle,
       DragSortWidget,
+      SidePanelModal,
     },
     mixins: [commonCoreStrings],
     setup(_, context) {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 6a295164ca..303a91bdfe 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -102,7 +102,7 @@
       {{ closeConfirmationMessage$() }}
     </KModal>
 
-    <SectionSidePanel v-if="quizInitialized" />
+    <router-view />
   </CoachImmersivePage>
 
 </template>
@@ -125,7 +125,6 @@
   import AssignmentDetailsModal from '../assignments/AssignmentDetailsModal';
   import useCoreCoach from '../../../composables/useCoreCoach';
   import CreateQuizSection from './CreateQuizSection';
-  import SectionSidePanel from './SectionSidePanel';
 
   export default {
     name: 'CreateExamPage',
@@ -134,7 +133,6 @@
       BottomAppBar,
       CreateQuizSection,
       AssignmentDetailsModal,
-      SectionSidePanel,
     },
     mixins: [commonCoreStrings],
     setup() {
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index 338c21c272..714bf8a167 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -20,7 +20,6 @@
           <!-- Fixed header -->
           <div
             ref="fixedHeader"
-            class="fixed-header"
             :style="fixedHeaderStyles"
           >
             <div class="header-content">
@@ -146,7 +145,9 @@
           top: 0,
           backgroundColor: this.$themeTokens.surface,
           borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
-          padding: '0 1em',
+          padding: '0',
+          paddingLeft: this.closeButtonIconType === 'back' ? '4em' : '2em',
+          paddingRight: this.closeButtonIconType === 'back' ? '2em' : '4em',
           // Header border stays over content with this, but under any tooltips
           'z-index': 16,
         };