diff --git a/kolibri/plugins/coach/assets/src/routes/examRoutes.js b/kolibri/plugins/coach/assets/src/routes/examRoutes.js
index 3e438dd6e74..bbe39391cbf 100644
--- a/kolibri/plugins/coach/assets/src/routes/examRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/examRoutes.js
@@ -1,12 +1,12 @@
 import store from 'kolibri/store';
 import { PageNames } from '../constants';
 import CreateExamPage from '../views/quizzes/CreateExamPage';
-import SectionEditor from '../views/quizzes/CreateExamPage/SectionEditor.vue';
-import ResourceSelection from '../views/quizzes/CreateExamPage/ResourceSelection.vue';
-import ReplaceQuestions from '../views/quizzes/CreateExamPage/ReplaceQuestions.vue';
+import SectionEditor from '../views/quizzes/CreateExamPage/SidePanels/SectionEditor.vue';
+import ResourceSelection from '../views/quizzes/CreateExamPage/SidePanels/ResourceSelection.vue';
+import ReplaceQuestions from '../views/quizzes/CreateExamPage/SidePanels/ReplaceQuestions.vue';
+import SectionOrder from '../views/quizzes/CreateExamPage/SidePanels/SectionOrder';
 import ExamsRootPage from '../views/quizzes/ExamsRootPage';
 import QuizSummaryPage from '../views/quizzes/QuizSummaryPage';
-import SectionOrder from '../views/quizzes/CreateExamPage/SectionOrder';
 import LearnerQuizPage from '../views/common/reports/LearnerQuizPage.vue';
 import QuizPreviewPage from '../views/quizzes/reports/QuizPreviewPage.vue';
 import { generateExamReportDetailHandler } from '../modules/examReportDetail/handlers';
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails.vue
index d10355ae6c0..01b74dd5a7d 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails.vue
@@ -3,7 +3,6 @@
   <SidePanelModal
     alignment="right"
     sidePanelWidth="700px"
-    closeButtonIconType="close"
     @closePanel="() => $router.go(-1)"
     @shouldFocusFirstEl="() => null"
   >
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
index 93ec98fa5f4..df42f123e41 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
@@ -3,7 +3,6 @@
   <SidePanelModal
     alignment="right"
     sidePanelWidth="700px"
-    closeButtonIconType="close"
     @closePanel="closeSidePanel"
     @shouldFocusFirstEl="() => null"
   >
diff --git a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue
index ab66b490d4c..86e35631996 100644
--- a/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue
+++ b/kolibri/plugins/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources.vue
@@ -3,7 +3,6 @@
   <SidePanelModal
     alignment="right"
     sidePanelWidth="700px"
-    closeButtonIconType="close"
     @closePanel="() => $router.go(-1)"
     @shouldFocusFirstEl="() => null"
   >
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue
deleted file mode 100644
index e2d86e26eb4..00000000000
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionSidePanel.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-
-  <SidePanelModal
-    v-if="showSidePanel"
-    ref="resourcePanel"
-    alignment="right"
-    sidePanelWidth="700px"
-    closeButtonIconType="close"
-    @closePanel="handleClosePanel"
-    @shouldFocusFirstEl="findFirstEl()"
-  >
-    <template #header>
-      <KIconButton
-        v-if="canGoBack"
-        icon="back"
-        :style="backButtonStyles"
-        @click="$router.go(-1)"
-      />
-    </template>
-    <router-view @closePanel="handleClosePanel" />
-  </SidePanelModal>
-
-</template>
-
-
-<script>
-
-  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
-  import { ref, watch, computed, getCurrentInstance } from '@vue/composition-api';
-  import { PageNames } from '../../../constants';
-
-  export default {
-    name: 'SectionSidePanel',
-    components: {
-      SidePanelModal,
-    },
-    setup() {
-      const store = getCurrentInstance().proxy.$store;
-      const router = getCurrentInstance().proxy.$router;
-      const route = computed(() => store.state.route);
-
-      const canGoBack = ref(false);
-      const showSidePanel = computed(() => route.value?.name !== PageNames.EXAM_CREATION_ROOT);
-
-      function handleClosePanel() {
-        router.push({
-          name: PageNames.EXAM_CREATION_ROOT,
-          params: {
-            classId: route.value.params.classId,
-            quizId: route.value.params.quizId,
-            sectionIndex: route.value.params.sectionIndex,
-          },
-          query: { ...route.value.query },
-        });
-      }
-
-      watch(route, (newRoute, oldRoute) => {
-        // Here we basically handle all of the edge cases around when we do and don't show the back
-        // button in the heading of the side panel -- basically, we're going for:
-        //  - If we just loaded, no back arrow (ie, refresh the page w/ the panel open)
-        //  - If we're viewing bookmarks or have gone into a topic show the back arrow
-        //  - If we're still not on the same route as before, then show it
-        canGoBack.value =
-          oldRoute.name !== PageNames.EXAM_CREATION_ROOT && // We didn't just get here
-          newRoute.name !== PageNames.QUIZ_SECTION_EDITOR && // The new route isn't section editor // One of these is also true...
-          (Boolean(newRoute.query.showBookmarks) || // We're viewing bookmarks
-            Boolean(newRoute.params.topic_id) || // We're viewing a topic
-            oldRoute.name !== newRoute.name); // We're just not on the same page within the panel
-      });
-
-      return {
-        canGoBack,
-        showSidePanel,
-        handleClosePanel,
-      };
-    },
-    computed: {
-      backButtonStyles() {
-        if (this.isRtl) {
-          return {
-            position: 'absolute',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            right: '1em',
-            'z-index': '24',
-          };
-        } else {
-          return {
-            position: 'absolute',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            left: '1em',
-            'z-index': '24',
-          };
-        }
-      },
-    },
-    methods: {
-      /**
-       * Calls the currently displayed ref's focusFirstEl method.
-       */
-      findFirstEl() {
-        this.$refs.resourcePanel.focusFirstEl();
-      },
-    },
-  };
-
-</script>
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/ReplaceQuestions.vue
similarity index 64%
rename from kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue
rename to kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/ReplaceQuestions.vue
index 8bef1535797..ec9162bd56a 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ReplaceQuestions.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/ReplaceQuestions.vue
@@ -1,117 +1,126 @@
 <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"
+    @closePanel="handleClosePanel"
+  >
+    <template #header>
+      <h1>
+        {{
+          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"
-      />
     </div>
     <KModal
       v-if="showReplacementConfirmation"
+      appendToOverlay
       :submitText="coreString('confirmAction')"
       :cancelText="coreString('cancelAction')"
       :title="
@@ -129,6 +138,7 @@
     </KModal>
     <KModal
       v-if="showCloseConfirmation"
+      appendToOverlay
       :submitText="coreString('continueAction')"
       :cancelText="coreString('cancelAction')"
       :title="closeConfirmationTitle$()"
@@ -137,7 +147,7 @@
     >
       {{ closeConfirmationMessage$() }}
     </KModal>
-  </div>
+  </SidePanelModal>
 
 </template>
 
@@ -153,21 +163,23 @@
   import { get } from '@vueuse/core';
   import isEqual from 'lodash/isEqual';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import AccordionItem from 'kolibri-common/components/AccordionItem';
   import AccordionContainer from 'kolibri-common/components/AccordionContainer';
   import useAccordion from 'kolibri-common/components/useAccordion';
   import useSnackbar from 'kolibri/composables/useSnackbar';
-  import { injectQuizCreation } from '../../../composables/useQuizCreation';
-  import { PageNames } from '../../../constants/index';
+  import { injectQuizCreation } from '../../../../composables/useQuizCreation';
+  import { PageNames } from '../../../../constants/index';
 
   export default {
     name: 'ReplaceQuestions',
     components: {
       AccordionContainer,
       AccordionItem,
+      SidePanelModal,
     },
     mixins: [commonCoreStrings],
-    setup(_, context) {
+    setup() {
       const { createSnackbar } = useSnackbar();
 
       const router = getCurrentInstance().proxy.$router;
@@ -217,7 +229,14 @@
 
       function handleConfirmClose() {
         replacements.value = [];
-        context.emit('closePanel');
+        router.push({
+          name: PageNames.EXAM_CREATION_ROOT,
+          params: {
+            classId: this.$route.params.classId,
+            quizId: this.$route.params.quizId,
+            sectionIndex: this.$route.params.sectionIndex,
+          },
+        });
       }
 
       function submitReplacement() {
@@ -329,10 +348,10 @@
         };
       },
       /**
-      If we don't have replacement.length then there are no changes to prompt about.
-      But if there are we only show if the number of replacements is the same as the number
-      of selected questions to be replaced
-    */
+        If we don't have replacement.length then there are no changes to prompt about.
+        But if there are we only show if the number of replacements is the same as the number
+        of selected questions to be replaced
+      */
       canProceedToReplace() {
         return (
           this.replacements.length &&
@@ -353,6 +372,7 @@
         }
       },
     },
+    /* eslint-disable-line no-unused-vars */
     beforeRouteLeave(_, __, next) {
       if (
         !this.showCloseConfirmation && // We aren't here because the user confirmed closing
@@ -366,6 +386,11 @@
         next();
       }
     },
+    methods: {
+      handleClosePanel() {
+        this.$router.push({ name: PageNames.EXAM_CREATION_ROOT });
+      },
+    },
   };
 
 </script>
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/ResourceSelection.vue
similarity index 76%
rename from kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
rename to kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/ResourceSelection.vue
index 3818e5d4f1e..6f5dc512aac 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/ResourceSelection.vue
@@ -1,10 +1,13 @@
 <template>
 
-  <div class="select-resource">
-    <div v-if="loading && !loadingMore">
-      <KCircularLoader />
-    </div>
-    <div v-else-if="!showSearch">
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    :showBackButton="canGoBack"
+    @goBack="handleGoBack"
+    @closePanel="handleClosePanel"
+  >
+    <template #header>
       <h1
         v-if="selectPracticeQuiz"
         class="select-folder-style"
@@ -12,188 +15,180 @@
         {{ selectPracticeQuizLabel$() }}
       </h1>
       <div v-else>
-        <h1 class="select-folder-style">
+        <h1>
           {{
             selectResourcesDescription$({
               sectionTitle: displaySectionTitle(activeSection, activeSectionIndex),
             })
           }}
         </h1>
-        <p>
+        <p style="margin: 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 style="margin-top: 0">{{ 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 && !showSearch">
-        <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"
-      />
-
-      <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
-        v-if="!showSearch"
-        :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>
+        <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"
+        appendToOverlay
+        :submitText="coreString('continueAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="closeConfirmationTitle$()"
+        @cancel="handleCancelClose"
+        @submit="handleConfirmClose"
+      >
+        {{ closeConfirmationMessage$() }}
+      </KModal>
     </div>
-
-    <SearchFiltersPanel
-      v-if="showSearch"
-      ref="sidePanel"
-      v-model="searchTerms"
-      data-test="side-panel"
-      width="100%"
-      :accordion="true"
-      :showActivities="false"
-      @close="showSearch = false"
-    />
-
-    <KModal
-      v-if="showCloseConfirmation"
-      :submitText="coreString('continueAction')"
-      :cancelText="coreString('cancelAction')"
-      :title="closeConfirmationTitle$()"
-      @cancel="handleCancelClose"
-      @submit="handleConfirmClose"
-    >
-      {{ closeConfirmationMessage$() }}
-    </KModal>
-  </div>
+  </SidePanelModal>
 
 </template>
 
@@ -214,26 +209,25 @@
   import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
   import { ContentNodeKinds, MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri/constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
-  import useBaseSearch from 'kolibri-common/composables/useBaseSearch';
-  import SearchFiltersPanel from 'kolibri-common/components/SearchFiltersPanel';
-  import { exerciseToQuestionArray } from '../../../utils/selectQuestions';
-  import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
-  import BookmarkIcon from '../../lessons/LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
-  import useQuizResources from '../../../composables/useQuizResources';
-  import { injectQuizCreation } from '../../../composables/useQuizCreation';
-  import ContentCardList from '../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
-  import ResourceSelectionBreadcrumbs from '../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
+  import { exerciseToQuestionArray } from '../../../../utils/selectQuestions';
+  import { PageNames, ViewMoreButtonStates } from '../../../../constants/index';
+  import BookmarkIcon from '../../../lessons/LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
+  import useQuizResources from '../../../../composables/useQuizResources';
+  import { injectQuizCreation } from '../../../../composables/useQuizCreation';
+  import ContentCardList from '../../../lessons/LessonResourceSelectionPage/ContentCardList.vue';
+  import ResourceSelectionBreadcrumbs from '../../../lessons/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs.vue';
 
   export default {
     name: 'ResourceSelection',
     components: {
-      SearchFiltersPanel,
+      SidePanelModal,
       ContentCardList,
       BookmarkIcon,
       ResourceSelectionBreadcrumbs,
     },
     mixins: [commonCoreStrings],
-    setup(props, context) {
+    setup(props) {
       const store = getCurrentInstance().proxy.$store;
       const route = computed(() => store.state.route);
       const topicId = computed(() => route.value.params.topic_id);
@@ -491,9 +485,6 @@
         loadingMore,
       } = useQuizResources({ topicId, practiceQuiz: selectPracticeQuiz.value });
 
-      const { searchTerms, search } = useBaseSearch({ descendant: topic });
-      search();
-
       const _loading = ref(true);
 
       const channels = ref([]);
@@ -631,10 +622,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 }));
         }
@@ -668,7 +659,8 @@
       }
 
       function handleConfirmClose() {
-        context.emit('closePanel');
+        // When the user is saying "yes lose my changes", then we can close the panel
+        this.$router.push({ name: PageNames.EXAM_CREATION_ROOT });
       }
 
       const workingPoolHasChanged = computed(() => {
@@ -712,8 +704,26 @@
         }
       }
 
+      const prevRoute = ref({ name: PageNames.EXAM_CREATION_ROOT });
+
+      // Can only go back w/ the arrow if the last route isn't the root,
+      // otherwise we only allow close
+      const canGoBack = computed(() => {
+        return Boolean(
+          // If we can go back to the section editor (another side panel) we can go back from here
+          // The beforeRouteLeave will catch and ask the user to confirm that navigation if needed
+          (prevRoute.value.name && prevRoute.value.name === PageNames.QUIZ_SECTION_EDITOR) ||
+            // prevRoute.value.name is falsy if we only just loaded, so we'll never show the back
+            // arrow in that case. Here we check if there is a valid prevRoute and if there is,
+            // then we know we can go back if we have a topicId or are showing bookmarks
+            // TODO When we add search it'll probably want to be here too
+            (prevRoute.value.name && (topicId.value || showBookmarks.value)),
+        );
+      });
+
       return {
-        showSearch: ref(false),
+        canGoBack,
+        prevRoute,
         nodeIsSelectableOrUnselectable,
         showCheckbox,
         displaySectionTitle,
@@ -778,7 +788,6 @@
         selectPracticeQuizLabel$,
         numberOfQuestionsLabel$,
         addNumberOfQuestions$,
-        searchTerms,
       };
     },
     props: {
@@ -823,20 +832,34 @@
         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) {
         this.bookmarksCount = newVal.length;
       },
     },
-    beforeRouteLeave(_, __, next) {
-      if (!this.showCloseConfirmation && this.workingPoolHasChanged) {
+    beforeRouteEnter(to, from, next) {
+      next(vm => {
+        vm.prevRoute = from;
+      });
+    },
+    /* eslint-disable-line no-unused-vars */
+    beforeRouteLeave(to, __, next) {
+      if (
+        // Not showing the modal already
+        !this.showCloseConfirmation &&
+        // User has changes
+        this.workingPoolHasChanged &&
+        // User is not trying to navigate within ResourceSelection
+        to.name !== this.$route.name
+      ) {
+        // Don't navigate, show confirmation modal
         this.showCloseConfirmation = true;
         next(false);
       } else {
@@ -848,6 +871,12 @@
       focusFirstEl() {
         this.$refs.textbox.focus();
       },
+      handleGoBack() {
+        this.$router.back();
+      },
+      handleClosePanel() {
+        this.$router.push({ name: PageNames.EXAM_CREATION_ROOT });
+      },
       contentLink(content) {
         const { name, params, query } = this.$route;
         if (!content.is_leaf) {
@@ -926,7 +955,7 @@
 </script>
 
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
@@ -1004,15 +1033,6 @@
     border-top: 1px solid black;
   }
 
-  .select-folder-style {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-  }
-
-  .align-select-folder-style {
-    margin-top: 2em;
-  }
-
   .shadow {
     box-shadow:
       0 1px 3px 0 rgba(0, 0, 0, 0.2),
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/SectionEditor.vue
similarity index 74%
rename from kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
rename to kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/SectionEditor.vue
index 25c23ab75d1..2c2e8b5856a 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/SectionEditor.vue
@@ -1,122 +1,132 @@
 <template>
 
-  <div
-    v-if="activeSection"
-    class="section-settings-content"
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    @closePanel="handleClosePanel"
   >
-    <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"
+        appendToOverlay
+        :submitText="coreString('continueAction')"
+        :cancelText="coreString('cancelAction')"
+        :title="closeConfirmationTitle$()"
+        @cancel="handleCancelClose"
+        @submit="handleConfirmClose"
+      >
+        {{ closeConfirmationMessage$() }}
+      </KModal>
+      <KModal
+        v-if="showDeleteConfirmation"
+        appendToOverlay
+        :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>
 
@@ -130,18 +140,20 @@
     displaySectionTitle,
     enhancedQuizManagementStrings,
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import { MAX_QUESTIONS_PER_QUIZ_SECTION } from 'kolibri/constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import useSnackbar from 'kolibri/composables/useSnackbar';
-  import { PageNames } from '../../../constants/index';
-  import { injectQuizCreation } from '../../../composables/useQuizCreation.js';
-  import useDrag from './useDrag.js';
+  import { PageNames } from '../../../../constants/index';
+  import { injectQuizCreation } from '../../../../composables/useQuizCreation.js';
+  import useDrag from '../useDrag.js';
 
   export default {
     name: 'SectionEditor',
+    components: { SidePanelModal },
     mixins: [commonCoreStrings],
-    setup(_, context) {
+    setup() {
       const router = getCurrentInstance().proxy.$router;
       const store = getCurrentInstance().proxy.$store;
       const route = computed(() => store.state.route);
@@ -191,7 +203,7 @@
       }
 
       function handleConfirmClose() {
-        context.emit('closePanel');
+        this.$router.back();
       }
 
       const showDeleteConfirmation = ref(false);
@@ -355,6 +367,7 @@
         return { name: PageNames.QUIZ_SELECT_RESOURCES };
       },
     },
+    /* eslint-disable-line no-unused-vars */
     beforeRouteLeave(to, __, next) {
       if (this.formDataHasChanged && !this.showDeleteConfirmation) {
         if (this.showCloseConfirmation) {
@@ -374,6 +387,9 @@
       next();
     },
     methods: {
+      handleClosePanel() {
+        this.$router.push({ name: PageNames.EXAM_CREATION_ROOT });
+      },
       applySettings(nextRouteName = PageNames.EXAM_CREATION_ROOT) {
         if (this.sectionTitleInvalid) {
           this.$refs.sectionTitle.focus();
diff --git a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/SectionOrder.vue
similarity index 71%
rename from kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
rename to kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/SectionOrder.vue
index da8b66a1ee8..0c0db2e8b31 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SectionOrder.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/SidePanels/SectionOrder.vue
@@ -1,85 +1,96 @@
 <template>
 
-  <div
-    v-if="activeSection"
-    class="section-settings-content"
+  <SidePanelModal
+    alignment="right"
+    sidePanelWidth="700px"
+    @closePanel="handleClosePanel"
   >
-    <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"
+        appendToOverlay
+        :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,15 +103,16 @@
     displaySectionTitle,
     enhancedQuizManagementStrings,
   } from 'kolibri-common/strings/enhancedQuizManagementStrings';
+  import SidePanelModal from 'kolibri-common/components/SidePanelModal';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import Draggable from 'kolibri-common/components/sortable/Draggable';
   import DragContainer from 'kolibri-common/components/sortable/DragContainer';
   import DragHandle from 'kolibri-common/components/sortable/DragHandle';
   import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
-  import { PageNames } from '../../../constants/index';
-  import { injectQuizCreation } from '../../../composables/useQuizCreation';
-  import useDrag from './useDrag.js';
+  import { PageNames } from '../../../../constants/index';
+  import { injectQuizCreation } from '../../../../composables/useQuizCreation';
+  import useDrag from '../useDrag.js';
 
   export default {
     name: 'SectionOrder',
@@ -109,9 +121,10 @@
       DragContainer,
       DragHandle,
       DragSortWidget,
+      SidePanelModal,
     },
     mixins: [commonCoreStrings],
-    setup(_, context) {
+    setup() {
       const {
         sectionSettings$,
         sectionTitle$,
@@ -155,7 +168,7 @@
       }
 
       function handleConfirmClose() {
-        context.emit('closePanel');
+        this.$router.back();
       }
 
       // This is used to track the section that was moved
@@ -249,7 +262,8 @@
         };
       },
     },
-    beforeRouteLeave(to, __, next) {
+    /* eslint-disable-line no-unused-vars */
+    beforeRouteLeave(_, __, next) {
       if (this.formDataHasChanged && !this.showCloseConfirmation) {
         this.showCloseConfirmation = true;
         next(false);
@@ -258,6 +272,9 @@
       }
     },
     methods: {
+      handleClosePanel() {
+        this.$router.push({ name: PageNames.EXAM_CREATION_ROOT });
+      },
       handleSectionSort(e) {
         this.sectionOrderList = e.newArray;
         const reorderedId = this.allSections[this.activeSectionIndex].section_id;
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 063c3f73aa0..4e7e1bc7063 100644
--- a/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/quizzes/CreateExamPage/index.vue
@@ -102,7 +102,7 @@
       {{ closeConfirmationMessage$() }}
     </KModal>
 
-    <SectionSidePanel v-if="quizInitialized" />
+    <router-view />
   </CoachImmersivePage>
 
 </template>
@@ -125,7 +125,6 @@
   import AssignmentDetailsModal from '../../common/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/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
index 8bfcb53ff4e..6dc53545956 100644
--- a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
@@ -46,7 +46,6 @@
       v-if="sidePanelContent"
       class="fix-pos"
       alignment="right"
-      closeButtonIconType="close"
       @closePanel="sidePanelContent = null"
       @shouldFocusFirstEl="findFirstEl()"
     >
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
index 54efdcef921..90a566e078a 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
@@ -117,7 +117,6 @@
       ref="resourcePanel"
       class="also-in-this-side-panel"
       alignment="right"
-      closeButtonIconType="close"
       @closePanel="showViewResourcesSidePanel = false"
       @shouldFocusFirstEl="findFirstEl()"
     >
diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
index 610ddc2ea42..9b8189ac301 100644
--- a/packages/kolibri-common/components/SearchFiltersPanel/index.vue
+++ b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -2,7 +2,6 @@
 
   <section
     role="region"
-    :closeButtonIconType="closeButtonIcon"
     :aria-label="filterAndSearchLabel$()"
     :ariaLabel="filterAndSearchLabel$()"
     :style="
@@ -256,9 +255,6 @@
       },
     },
     computed: {
-      closeButtonIcon() {
-        return this.currentCategory ? 'back' : 'close';
-      },
       inputValue: {
         get() {
           return this.value;
diff --git a/packages/kolibri-common/components/SidePanelModal/index.vue b/packages/kolibri-common/components/SidePanelModal/index.vue
index 6dfd0da30cd..91af7ae0ba3 100644
--- a/packages/kolibri-common/components/SidePanelModal/index.vue
+++ b/packages/kolibri-common/components/SidePanelModal/index.vue
@@ -24,10 +24,18 @@
             :style="fixedHeaderStyles"
           >
             <div class="header-content">
+              <KIconButton
+                v-if="showBackButton"
+                icon="back"
+                class="back-button"
+                :style="backButtonStyle"
+                :ariaLabel="backButtonMessage"
+                :tooltip="backButtonMessage"
+                @click="goBack"
+              />
               <slot name="header"> </slot>
               <KIconButton
-                v-if="closeButtonIconType"
-                :icon="closeButtonIconType"
+                icon="close"
                 class="close-button"
                 :style="closeButtonStyle"
                 :ariaLabel="closeButtonMessage"
@@ -88,14 +96,11 @@
       };
     },
     props: {
-      /* CloseButtonIconType icon from parent component */
-      closeButtonIconType: {
-        type: String,
+      /* Whether or not we should show the back button */
+      showBackButton: {
+        type: Boolean,
         required: false,
-        default: 'close',
-        validator: value => {
-          return ['close', 'back'].includes(value);
-        },
+        default: false,
       },
       /* Optionally override the default width of the side panel with valid CSS value */
       sidePanelWidth: {
@@ -152,7 +157,11 @@
           top: 0,
           backgroundColor: this.$themeTokens.surface,
           borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
-          padding: '0 1em',
+          padding: '0',
+          paddingLeft: this.showBackButton ? '4em' : '2em',
+          paddingRight: this.showBackButton ? '2em' : '4em',
+          display: 'flex',
+          alignItems: 'center',
           // Header border stays over content with this, but under any tooltips
           'z-index': 16,
         };
@@ -168,33 +177,34 @@
           'z-index': 12,
         };
       },
+      backButtonMessage() {
+        return this.coreString('backAction');
+      },
       closeButtonMessage() {
-        return this.closeButtonIconType === 'back'
-          ? this.coreString('backAction')
-          : this.coreString('closeAction');
+        return this.coreString('closeAction');
+      },
+      backButtonStyle() {
+        if (this.isRtl) {
+          return {
+            position: 'absolute',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            right: '1em',
+            'z-index': '24',
+          };
+        } else {
+          return {
+            position: 'absolute',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            left: '1em',
+            'z-index': '24',
+          };
+        }
       },
       /* Change of position with change of close button type, default is close */
       closeButtonStyle() {
         if (this.isRtl) {
-          if (this.closeButtonIconType === 'close') {
-            return {
-              position: 'absolute',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              left: '1em',
-              'z-index': '24',
-            };
-          } else {
-            return {
-              position: 'absolute',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              right: '1em',
-              'z-index': '24',
-            };
-          }
-        }
-        if (this.closeButtonIconType === 'back') {
           return {
             position: 'absolute',
             top: '50%',
@@ -246,6 +256,9 @@
       window.setTimeout(() => this.lastFocus.focus());
     },
     methods: {
+      goBack() {
+        this.$emit('goBack');
+      },
       closePanel() {
         this.$emit('closePanel');
       },
@@ -293,4 +306,11 @@
     text-align: center;
   }
 
+  /** When an h1 is passed to the header slot we set it's styles here */
+  /deep/ h1 {
+    display: inline;
+    margin: 0;
+    font-size: 1.25rem;
+  }
+
 </style>