diff --git a/kolibri/plugins/coach/assets/src/constants/tabsConstants.js b/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
index cd0b25481e..19d0a538d7 100644
--- a/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
+++ b/kolibri/plugins/coach/assets/src/constants/tabsConstants.js
@@ -5,3 +5,10 @@ export const ReportsTabs = {
   GROUPS: 'tabGroups',
   LEARNERS: 'tabLearners',
 };
+
+export const PLAN_TABS_ID = 'coachPlan';
+export const PlanTabs = {
+  LESSONS: 'tabLessons',
+  QUIZZES: 'tabQuizzes',
+  GROUPS: 'tabGroups',
+};
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue
index 93b477d4dc..6023b774b3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue
@@ -7,153 +7,157 @@
   >
 
     <KPageContainer>
-      <PlanHeader />
-
-      <div class="filter-and-button">
-        <p v-if="filteredExams.length && filteredExams.length > 0">
-          {{ $tr('totalQuizSize', { size: calcTotalSizeOfVisibleQuizzes }) }}
-        </p>
-        <KSelect
-          v-model="statusSelected"
-          :label="coachString('filterQuizStatus')"
-          :options="statusOptions"
-          :inline="true"
-        />
-        <KButtonGroup v-if="practiceQuizzesExist">
-          <KButton
-            primary
-            hasDropdown
-            appearance="raised-button"
-            :text="coachString('newQuizAction')"
-          >
-            <template #menu>
-              <KDropdownMenu
-                :options="dropdownOptions"
-                class="options-btn"
-                @select="handleSelect"
-              />
-            </template>
-          </KButton>
-        </KButtonGroup>
-        <div
-          v-else
-          class="button"
-        >
-          <KRouterLink
-            :primary="true"
-            appearance="raised-button"
-            :to="newExamRoute"
-            :text="coachString('newQuizAction')"
+      <PlanHeader :activeTabId="PlanTabs.QUIZZES" />
+      <KTabsPanel
+        :tabsId="PLAN_TABS_ID"
+        :activeTabId="PlanTabs.QUIZZES"
+      >
+        <div class="filter-and-button">
+          <p v-if="filteredExams.length && filteredExams.length > 0">
+            {{ $tr('totalQuizSize', { size: calcTotalSizeOfVisibleQuizzes }) }}
+          </p>
+          <KSelect
+            v-model="statusSelected"
+            :label="coachString('filterQuizStatus')"
+            :options="statusOptions"
+            :inline="true"
           />
-        </div>
-      </div>
-      <CoreTable>
-        <template #headers>
-          <th>{{ coachString('titleLabel') }}</th>
-          <th>{{ coachString('recipientsLabel') }}</th>
-          <th>{{ coachString('sizeLabel') }}</th>
-          <th class="center-text">
-            {{ coachString('statusLabel') }}
-          </th>
-        </template>
-        <template #tbody>
-          <transition-group
-            tag="tbody"
-            name="list"
-          >
-            <tr
-              v-for="exam in filteredExams"
-              :key="exam.id"
+          <KButtonGroup v-if="practiceQuizzesExist">
+            <KButton
+              primary
+              hasDropdown
+              appearance="raised-button"
+              :text="coachString('newQuizAction')"
             >
-              <td>
-                <KRouterLink
-                  :to="$router.getRoute('QuizSummaryPage', { quizId: exam.id })"
-                  appearance="basic-link"
-                  :text="exam.title"
-                  icon="quiz"
+              <template #menu>
+                <KDropdownMenu
+                  :options="dropdownOptions"
+                  class="options-btn"
+                  @select="handleSelect"
                 />
-              </td>
+              </template>
+            </KButton>
+          </KButtonGroup>
+          <div
+            v-else
+            class="button"
+          >
+            <KRouterLink
+              :primary="true"
+              appearance="raised-button"
+              :to="newExamRoute"
+              :text="coachString('newQuizAction')"
+            />
+          </div>
+        </div>
+        <CoreTable>
+          <template #headers>
+            <th>{{ coachString('titleLabel') }}</th>
+            <th>{{ coachString('recipientsLabel') }}</th>
+            <th>{{ coachString('sizeLabel') }}</th>
+            <th class="center-text">
+              {{ coachString('statusLabel') }}
+            </th>
+          </template>
+          <template #tbody>
+            <transition-group
+              tag="tbody"
+              name="list"
+            >
+              <tr
+                v-for="exam in filteredExams"
+                :key="exam.id"
+              >
+                <td>
+                  <KRouterLink
+                    :to="$router.getRoute('QuizSummaryPage', { quizId: exam.id })"
+                    appearance="basic-link"
+                    :text="exam.title"
+                    icon="quiz"
+                  />
+                </td>
 
-              <td>
-                <Recipients
-                  :groupNames="getRecipientNamesForExam(exam)"
-                  :hasAssignments="exam.assignments.length > 0"
-                />
-              </td>
-              <td>
-                {{ quizSize(exam.id) }}
-              </td>
-              <td class="button-col center-text core-table-button-col">
-                <!-- Open quiz button -->
-                <KButton
-                  v-if="!exam.active && !exam.archive"
-                  :text="coachString('openQuizLabel')"
-                  appearance="flat-button"
-                  @click="showOpenConfirmationModal = true; activeQuizId = exam.id"
-                />
-                <!-- Close quiz button -->
-                <KButton
-                  v-if="exam.active && !exam.archive"
-                  :text="coachString('closeQuizLabel')"
-                  appearance="flat-button"
-                  @click="showCloseConfirmationModal = true; activeQuizId = exam.id;"
-                />
-                <!-- Closed quiz label -->
-                <div v-if="exam.archive">
-                  {{ coachString('quizClosedLabel') }}
-                </div>
-              </td>
+                <td>
+                  <Recipients
+                    :groupNames="getRecipientNamesForExam(exam)"
+                    :hasAssignments="exam.assignments.length > 0"
+                  />
+                </td>
+                <td>
+                  {{ quizSize(exam.id) }}
+                </td>
+                <td class="button-col center-text core-table-button-col">
+                  <!-- Open quiz button -->
+                  <KButton
+                    v-if="!exam.active && !exam.archive"
+                    :text="coachString('openQuizLabel')"
+                    appearance="flat-button"
+                    @click="showOpenConfirmationModal = true; activeQuizId = exam.id"
+                  />
+                  <!-- Close quiz button -->
+                  <KButton
+                    v-if="exam.active && !exam.archive"
+                    :text="coachString('closeQuizLabel')"
+                    appearance="flat-button"
+                    @click="showCloseConfirmationModal = true; activeQuizId = exam.id;"
+                  />
+                  <!-- Closed quiz label -->
+                  <div v-if="exam.archive">
+                    {{ coachString('quizClosedLabel') }}
+                  </div>
+                </td>
 
-            </tr>
-          </transition-group>
-        </template>
-      </CoreTable>
+              </tr>
+            </transition-group>
+          </template>
+        </CoreTable>
 
-      <p v-if="!exams.length">
-        {{ $tr('noExams') }}
-      </p>
-      <p
-        v-else-if="statusSelected.value === coachString('filterQuizStarted') &&
-          !startedExams.length"
-      >
-        {{ $tr('noStartedExams') }}
-      </p>
-      <p
-        v-else-if=" statusSelected.value === coachString('filterQuizNotStarted') &&
-          !notStartedExams.length"
-      >
-        {{ $tr('noExamsNotStarted') }}
-      </p>
-      <p
-        v-else-if=" statusSelected.value === coachString('filterQuizEnded') &&
-          !endedExams.length"
-      >
-        {{ $tr('noEndedExams') }}
-      </p>
+        <p v-if="!exams.length">
+          {{ $tr('noExams') }}
+        </p>
+        <p
+          v-else-if="statusSelected.value === coachString('filterQuizStarted') &&
+            !startedExams.length"
+        >
+          {{ $tr('noStartedExams') }}
+        </p>
+        <p
+          v-else-if=" statusSelected.value === coachString('filterQuizNotStarted') &&
+            !notStartedExams.length"
+        >
+          {{ $tr('noExamsNotStarted') }}
+        </p>
+        <p
+          v-else-if=" statusSelected.value === coachString('filterQuizEnded') &&
+            !endedExams.length"
+        >
+          {{ $tr('noEndedExams') }}
+        </p>
 
-      <!-- Modals for Close & Open of quiz from right-most column -->
-      <KModal
-        v-if="showOpenConfirmationModal"
-        :title="coachString('openQuizLabel')"
-        :submitText="coreString('continueAction')"
-        :cancelText="coreString('cancelAction')"
-        @cancel="showOpenConfirmationModal = false"
-        @submit="handleOpenQuiz(activeQuizId)"
-      >
-        <p>{{ coachString('openQuizModalDetail') }}</p>
-        <p>{{ coachString('lodQuizDetail') }}</p>
-        <p>{{ coachString('fileSizeToDownload', { size: quizSize(activeQuizId) }) }}</p>
-      </KModal>
-      <KModal
-        v-if="showCloseConfirmationModal"
-        :title="coachString('closeQuizLabel')"
-        :submitText="coreString('continueAction')"
-        :cancelText="coreString('cancelAction')"
-        @cancel="showCloseConfirmationModal = false"
-        @submit="handleCloseQuiz(activeQuizId)"
-      >
-        <div>{{ coachString('closeQuizModalDetail') }}</div>
-      </KModal>
+        <!-- Modals for Close & Open of quiz from right-most column -->
+        <KModal
+          v-if="showOpenConfirmationModal"
+          :title="coachString('openQuizLabel')"
+          :submitText="coreString('continueAction')"
+          :cancelText="coreString('cancelAction')"
+          @cancel="showOpenConfirmationModal = false"
+          @submit="handleOpenQuiz(activeQuizId)"
+        >
+          <p>{{ coachString('openQuizModalDetail') }}</p>
+          <p>{{ coachString('lodQuizDetail') }}</p>
+          <p>{{ coachString('fileSizeToDownload', { size: quizSize(activeQuizId) }) }}</p>
+        </KModal>
+        <KModal
+          v-if="showCloseConfirmationModal"
+          :title="coachString('closeQuizLabel')"
+          :submitText="coreString('continueAction')"
+          :cancelText="coreString('cancelAction')"
+          @cancel="showCloseConfirmationModal = false"
+          @submit="handleCloseQuiz(activeQuizId)"
+        >
+          <div>{{ coachString('closeQuizModalDetail') }}</div>
+        </KModal>
+      </KTabsPanel>
     </KPageContainer>
   </CoachAppBarPage>
 
@@ -169,6 +173,7 @@
   import plugin_data from 'plugin_data';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import { PageNames } from '../../../constants';
+  import { PLAN_TABS_ID, PlanTabs } from '../../../constants/tabsConstants';
   import commonCoach from '../../common';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import PlanHeader from '../../plan/PlanHeader';
@@ -183,6 +188,8 @@
     mixins: [commonCoach, commonCoreStrings],
     data() {
       return {
+        PLAN_TABS_ID,
+        PlanTabs,
         statusSelected: {
           label: this.coachString('filterQuizAll'),
           value: this.coachString('filterQuizAll'),
diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
index f25ac4371a..daa81efcba 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
@@ -6,61 +6,65 @@
     :showSubNav="true"
   >
     <KPageContainer>
-      <PlanHeader />
-      <div class="ta-r">
-        <KButton
-          :text="$tr('newGroupAction')"
-          :primary="true"
-          @click="openCreateGroupModal"
+      <PlanHeader :activeTabId="PlanTabs.GROUPS" />
+      <KTabsPanel
+        :tabsId="PLAN_TABS_ID"
+        :activeTabId="PlanTabs.GROUPS"
+      >
+        <div class="ta-r">
+          <KButton
+            :text="$tr('newGroupAction')"
+            :primary="true"
+            @click="openCreateGroupModal"
+          />
+        </div>
+
+        <CoreTable>
+          <template #headers>
+            <th>{{ coachString('nameLabel') }}</th>
+            <th>{{ coreString('learnersLabel') }}</th>
+            <th></th>
+          </template>
+          <template #tbody>
+            <tbody>
+              <GroupRowTr
+                v-for="group in sortedGroups"
+                :key="group.id"
+                :group="group"
+                @rename="openRenameGroupModal"
+                @delete="openDeleteGroupModal"
+              />
+            </tbody>
+          </template>
+        </CoreTable>
+
+        <p v-if="!sortedGroups.length">
+          {{ $tr('noGroups') }}
+        </p>
+
+        <CreateGroupModal
+          v-if="showCreateGroupModal"
+          :groups="sortedGroups"
+          @submit="handleSuccessCreateGroup"
+          @cancel="closeModal"
         />
-      </div>
-
-      <CoreTable>
-        <template #headers>
-          <th>{{ coachString('nameLabel') }}</th>
-          <th>{{ coreString('learnersLabel') }}</th>
-          <th></th>
-        </template>
-        <template #tbody>
-          <tbody>
-            <GroupRowTr
-              v-for="group in sortedGroups"
-              :key="group.id"
-              :group="group"
-              @rename="openRenameGroupModal"
-              @delete="openDeleteGroupModal"
-            />
-          </tbody>
-        </template>
-      </CoreTable>
-
-      <p v-if="!sortedGroups.length">
-        {{ $tr('noGroups') }}
-      </p>
-
-      <CreateGroupModal
-        v-if="showCreateGroupModal"
-        :groups="sortedGroups"
-        @submit="handleSuccessCreateGroup"
-        @cancel="closeModal"
-      />
-
-      <RenameGroupModal
-        v-if="showRenameGroupModal"
-        :groupName="selectedGroup.name"
-        :groupId="selectedGroup.id"
-        :groups="sortedGroups"
-        @cancel="closeModal"
-      />
-
-      <DeleteGroupModal
-        v-if="showDeleteGroupModal"
-        :groupName="selectedGroup.name"
-        :groupId="selectedGroup.id"
-        @submit="handleSuccessDeleteGroup"
-        @cancel="closeModal"
-      />
 
+        <RenameGroupModal
+          v-if="showRenameGroupModal"
+          :groupName="selectedGroup.name"
+          :groupId="selectedGroup.id"
+          :groups="sortedGroups"
+          @cancel="closeModal"
+        />
+
+        <DeleteGroupModal
+          v-if="showDeleteGroupModal"
+          :groupName="selectedGroup.name"
+          :groupId="selectedGroup.id"
+          @submit="handleSuccessDeleteGroup"
+          @cancel="closeModal"
+        />
+      </KTabsPanel>
     </KPageContainer>
   </CoachAppBarPage>
 
@@ -78,6 +82,7 @@
   import CoachAppBarPage from '../../CoachAppBarPage';
   import PlanHeader from '../../plan/PlanHeader';
   import { GroupModals } from '../../../constants';
+  import { PLAN_TABS_ID, PlanTabs } from '../../../constants/tabsConstants';
   import CreateGroupModal from './CreateGroupModal';
   import GroupRowTr from './GroupRow';
   import RenameGroupModal from './RenameGroupModal';
@@ -102,6 +107,8 @@
       });
 
       return {
+        PLAN_TABS_ID,
+        PlanTabs,
         selectedGroup,
         setSelectedGroup(name, id) {
           selectedGroup.value = { name, id };
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
index 792f473988..87b2ade8bb 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
@@ -2,142 +2,147 @@
 
   <CoachAppBarPage :authorized="userIsAuthorized" authorizedRole="adminOrCoach" :showSubNav="true">
     <KPageContainer>
-      <PlanHeader />
-      <p v-if="lessons.length && lessons.length > 0">
-        {{ $tr('totalLessonsSize', { size: calcTotalSizeOfVisibleLessons }) }}
-      </p>
-      <div class="filter-and-button">
-        <KSelect
-          v-model="filterSelection"
-          class="select"
-          :label="coachString('filterLessonStatus')"
-          :options="filterOptions"
-          :inline="true"
-        />
-        <KRouterLink
-          :primary="true"
-          appearance="raised-button"
-          :text="coachString('newLessonAction')"
-          :to="newLessonRoute"
-        />
-      </div>
+      <PlanHeader :activeTabId="PlanTabs.LESSONS" />
+      <KTabsPanel
+        :tabsId="PLAN_TABS_ID"
+        :activeTabId="PlanTabs.LESSONS"
+      >
+        <p v-if="lessons.length && lessons.length > 0">
+          {{ $tr('totalLessonsSize', { size: calcTotalSizeOfVisibleLessons }) }}
+        </p>
+        <div class="filter-and-button">
+          <KSelect
+            v-model="filterSelection"
+            class="select"
+            :label="coachString('filterLessonStatus')"
+            :options="filterOptions"
+            :inline="true"
+          />
+          <KRouterLink
+            :primary="true"
+            appearance="raised-button"
+            :text="coachString('newLessonAction')"
+            :to="newLessonRoute"
+          />
+        </div>
 
-      <CoreTable>
-        <template #headers>
-          <th>{{ coachString('titleLabel') }}</th>
-          <th>{{ $tr('size') }}</th>
-          <th>{{ coachString('recipientsLabel') }}</th>
-          <th>{{ coachString('lessonVisibleLabel') }}</th>
-        </template>
-        <template #tbody>
-          <transition-group tag="tbody" name="list">
-            <tr v-for="lesson in sortedLessons" v-show="showLesson(lesson)" :key="lesson.id">
-              <td>
-                <KRouterLink
-                  :to="lessonSummaryLink({ lessonId: lesson.id, classId })"
-                  :text="lesson.title"
-                  icon="lesson"
-                />
-              </td>
-              <td>
-                {{
-                  coachString('resourcesAndSize', {
-                    value: lesson.resources.length,
-                    size: lessonSize(lesson.id),
-                  })
-                }}
-              </td>
-              <td>
-                <Recipients
-                  :groupNames="getRecipientNamesForLesson(lesson)"
-                  :hasAssignments="
-                    lesson.lesson_assignments.length > 0 || lesson.learner_ids.length > 0
-                  "
-                />
-              </td>
-              <td>
-                <KSwitch
-                  name="toggle-lesson-visibility"
-                  label=""
-                  :checked="lesson.is_active"
-                  :value="lesson.is_active"
-                  @change="toggleModal(lesson)"
-                />
-              </td>
-            </tr>
-          </transition-group>
-        </template>
-      </CoreTable>
+        <CoreTable>
+          <template #headers>
+            <th>{{ coachString('titleLabel') }}</th>
+            <th>{{ $tr('size') }}</th>
+            <th>{{ coachString('recipientsLabel') }}</th>
+            <th>{{ coachString('lessonVisibleLabel') }}</th>
+          </template>
+          <template #tbody>
+            <transition-group tag="tbody" name="list">
+              <tr v-for="lesson in sortedLessons" v-show="showLesson(lesson)" :key="lesson.id">
+                <td>
+                  <KRouterLink
+                    :to="lessonSummaryLink({ lessonId: lesson.id, classId })"
+                    :text="lesson.title"
+                    icon="lesson"
+                  />
+                </td>
+                <td>
+                  {{
+                    coachString('resourcesAndSize', {
+                      value: lesson.resources.length,
+                      size: lessonSize(lesson.id),
+                    })
+                  }}
+                </td>
+                <td>
+                  <Recipients
+                    :groupNames="getRecipientNamesForLesson(lesson)"
+                    :hasAssignments="
+                      lesson.lesson_assignments.length > 0 || lesson.learner_ids.length > 0
+                    "
+                  />
+                </td>
+                <td>
+                  <KSwitch
+                    name="toggle-lesson-visibility"
+                    label=""
+                    :checked="lesson.is_active"
+                    :value="lesson.is_active"
+                    @change="toggleModal(lesson)"
+                  />
+                </td>
+              </tr>
+            </transition-group>
+          </template>
+        </CoreTable>
 
-      <p v-if="!lessons.length">
-        {{ $tr('noLessons') }}
-      </p>
-      <p v-else-if="!hasVisibleLessons">
-        {{ $tr('noVisibleLessons') }}
-      </p>
-      <p v-else-if="!hasLessonsNotVisible">
-        {{ $tr('noLessonsNotVisible') }}
-      </p>
+        <p v-if="!lessons.length">
+          {{ $tr('noLessons') }}
+        </p>
+        <p v-else-if="!hasVisibleLessons">
+          {{ $tr('noVisibleLessons') }}
+        </p>
+        <p v-else-if="!hasLessonsNotVisible">
+          {{ $tr('noLessonsNotVisible') }}
+        </p>
 
-      <KModal
-        v-if="showLessonIsVisibleModal && !userHasDismissedModal"
-        :title="$tr('makeLessonVisibleTitle')"
-        :submitText="coreString('continueAction')"
-        :cancelText="coreString('cancelAction')"
-        @submit="handleToggleVisibility(activeLesson)"
-        @cancel="showLessonIsVisibleModal = false"
-      >
-        <p>{{ $tr('makeLessonVisibleText') }}</p>
-        <p>{{ $tr('fileSizeToDownload', { size: lessonSize(activeLesson.id) }) }}</p>
-        <KCheckbox
-          :checked="dontShowAgainChecked"
-          :label="$tr('dontShowAgain')"
-          @change="dontShowAgainChecked = $event"
-        />
-      </KModal>
+        <KModal
+          v-if="showLessonIsVisibleModal && !userHasDismissedModal"
+          :title="$tr('makeLessonVisibleTitle')"
+          :submitText="coreString('continueAction')"
+          :cancelText="coreString('cancelAction')"
+          @submit="handleToggleVisibility(activeLesson)"
+          @cancel="showLessonIsVisibleModal = false"
+        >
+          <p>{{ $tr('makeLessonVisibleText') }}</p>
+          <p>{{ $tr('fileSizeToDownload', { size: lessonSize(activeLesson.id) }) }}</p>
+          <KCheckbox
+            :checked="dontShowAgainChecked"
+            :label="$tr('dontShowAgain')"
+            @change="dontShowAgainChecked = $event"
+          />
+        </KModal>
 
-      <KModal
-        v-if="showLessonIsNotVisibleModal && !userHasDismissedModal"
-        :title="$tr('makeLessonNotVisibleTitle')"
-        :submitText="coreString('continueAction')"
-        :cancelText="coreString('cancelAction')"
-        @submit="handleToggleVisibility(activeLesson)"
-        @cancel="showLessonIsNotVisibleModal = false"
-      >
-        <p>{{ $tr('makeLessonNotVisibleText') }}</p>
-        <p>{{ $tr('fileSizeToRemove', { size: lessonSize(activeLesson.id) }) }}</p>
-        <KCheckbox
-          :checked="dontShowAgainChecked"
-          :label="$tr('dontShowAgain')"
-          @change="dontShowAgainChecked = $event"
-        />
-      </KModal>
+        <KModal
+          v-if="showLessonIsNotVisibleModal && !userHasDismissedModal"
+          :title="$tr('makeLessonNotVisibleTitle')"
+          :submitText="coreString('continueAction')"
+          :cancelText="coreString('cancelAction')"
+          @submit="handleToggleVisibility(activeLesson)"
+          @cancel="showLessonIsNotVisibleModal = false"
+        >
+          <p>{{ $tr('makeLessonNotVisibleText') }}</p>
+          <p>{{ $tr('fileSizeToRemove', { size: lessonSize(activeLesson.id) }) }}</p>
+          <KCheckbox
+            :checked="dontShowAgainChecked"
+            :label="$tr('dontShowAgain')"
+            @change="dontShowAgainChecked = $event"
+          />
+        </KModal>
 
-      <KModal
-        v-if="showModal"
-        :title="coachString('createLessonAction')"
-        :submitText="coreString('continueAction')"
-        :cancelText="coreString('cancelAction')"
-        :submitDisabled="detailsModalIsDisabled"
-        :cancelDisabled="detailsModalIsDisabled"
-        @cancel="showModal = false"
-        @submit="$refs.detailsModal.submitData()"
-      >
-        <AssignmentDetailsModal
-          ref="detailsModal"
-          assignmentType="new_lesson"
-          :modalTitleErrorMessage="coachString('duplicateLessonTitleError')"
-          :submitErrorMessage="coachString('saveLessonError')"
-          :initialDescription="''"
-          :initialTitle="''"
-          :initialSelectedCollectionIds="[classId]"
-          :classId="classId"
-          :groups="learnerGroups"
-          :disabled="detailsModalIsDisabled"
-          @submit="handleDetailsModalContinue"
+        <KModal
+          v-if="showModal"
+          :title="coachString('createLessonAction')"
+          :submitText="coreString('continueAction')"
+          :cancelText="coreString('cancelAction')"
+          :submitDisabled="detailsModalIsDisabled"
+          :cancelDisabled="detailsModalIsDisabled"
           @cancel="showModal = false"
-        />
-      </KModal>
+          @submit="$refs.detailsModal.submitData()"
+        >
+          <AssignmentDetailsModal
+            ref="detailsModal"
+            assignmentType="new_lesson"
+            :modalTitleErrorMessage="coachString('duplicateLessonTitleError')"
+            :submitErrorMessage="coachString('saveLessonError')"
+            :initialDescription="''"
+            :initialTitle="''"
+            :initialSelectedCollectionIds="[classId]"
+            :classId="classId"
+            :groups="learnerGroups"
+            :disabled="detailsModalIsDisabled"
+            @submit="handleDetailsModalContinue"
+            @cancel="showModal = false"
+          />
+        </KModal>
+      </KTabsPanel>
     </KPageContainer>
   </CoachAppBarPage>
 
@@ -160,6 +165,7 @@
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import { PLAN_TABS_ID, PlanTabs } from '../../../constants/tabsConstants';
   import commonCoach from '../../common';
   import PlanHeader from '../../plan/PlanHeader';
   import AssignmentDetailsModal from '../../plan/assignments/AssignmentDetailsModal';
@@ -176,6 +182,8 @@
     mixins: [commonCoach, commonCoreStrings],
     data() {
       return {
+        PLAN_TABS_ID,
+        PlanTabs,
         showModal: false,
         showLessonIsVisibleModal: false,
         showLessonIsNotVisibleModal: false,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue b/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue
index b137442caf..bf0cb755ee 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/PlanHeader.vue
@@ -10,18 +10,13 @@
     </p>
     <h1>{{ $tr('planYourClassLabel') }}</h1>
     <p>{{ $tr('planYourClassDescription') }}</p>
-    <HeaderTabs>
-      <HeaderTab
-        :text="coreString('lessonsLabel')"
-        :to="classRoute(LessonsPageNames.PLAN_LESSONS_ROOT)"
-      />
-      <HeaderTab
-        :text="coreString('quizzesLabel')"
-        :to="classRoute(PageNames.EXAMS)"
-      />
-      <HeaderTab
-        :text="coachString('groupsLabel')"
-        :to="classRoute('GroupsPage')"
+    <HeaderTabs :style="{ marginTop: '28px' }">
+      <KTabsList
+        :tabsId="PLAN_TABS_ID"
+        ariaLabel="Coach plan"
+        :activeTabId="activeTabId"
+        :tabs="tabs"
+        :style="{ position: 'relative', top: '5px' }"
       />
     </HeaderTabs>
   </div>
@@ -34,16 +29,48 @@
   import { mapGetters } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../common';
+  import { PageNames } from '../../constants';
   import { LessonsPageNames } from '../../constants/lessonsConstants';
+  import { PLAN_TABS_ID, PlanTabs } from '../../constants/tabsConstants';
 
   export default {
     name: 'PlanHeader',
     mixins: [commonCoach, commonCoreStrings],
+    props: {
+      activeTabId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        PLAN_TABS_ID,
+      };
+    },
     computed: {
       ...mapGetters(['classListPageEnabled']),
       LessonsPageNames() {
         return LessonsPageNames;
       },
+      tabs() {
+        return [
+          {
+            id: PlanTabs.LESSONS,
+            label: this.coreString('lessonsLabel'),
+            to: this.classRoute(this.LessonsPageNames.PLAN_LESSONS_ROOT),
+          },
+          {
+            id: PlanTabs.QUIZZES,
+            label: this.coreString('quizzesLabel'),
+            to: this.classRoute(PageNames.EXAMS),
+          },
+          {
+            id: PlanTabs.GROUPS,
+            label: this.coachString('groupsLabel'),
+            to: this.classRoute('GroupsPage'),
+          },
+        ];
+      },
     },
     $trs: {
       planYourClassLabel: {