diff --git a/.gitignore b/.gitignore
index 0748d1e1d3e..6859e686c65 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,10 +37,6 @@
 /coverage/*
 /client/coverage/*
 
-# Ignore additional themes
-/app/themes/*
-!/app/themes/default/*
-
 # Ignore public download/upload folders
 /public/downloads/*
 /public/uploads/*
diff --git a/app/assets/stylesheets/breadcrumbs.scss b/app/assets/stylesheets/breadcrumbs.scss
deleted file mode 100644
index dfce8b2511c..00000000000
--- a/app/assets/stylesheets/breadcrumbs.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.breadcrumb > li {
-  display: inline;
-}
diff --git a/app/assets/stylesheets/course/dangerously-fit-height-to-viewport.scss b/app/assets/stylesheets/course/dangerously-fit-height-to-viewport.scss
deleted file mode 100644
index 389c6434aba..00000000000
--- a/app/assets/stylesheets/course/dangerously-fit-height-to-viewport.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// TODO: Remove once sidebar is fixed to fill viewport until bottom of viewport.
-// 126px is the height of the topbar + breadcrumb + margins in between.
-.dangerously-fit-height-to-viewport {
-  height: calc(100vh - 126px);
-}
diff --git a/app/controllers/announcements_controller.rb b/app/controllers/announcements_controller.rb
index 1e35cbd2dd6..0eec13d17e7 100644
--- a/app/controllers/announcements_controller.rb
+++ b/app/controllers/announcements_controller.rb
@@ -1,15 +1,13 @@
 # frozen_string_literal: true
 class AnnouncementsController < ApplicationController
-  load_resource :announcement, class: GenericAnnouncement.name, only: :mark_as_read,
-                               id_param: :announcement_id
-
-  add_breadcrumb :index, :announcements_path
+  load_resource :announcement, class: GenericAnnouncement.name, only: :mark_as_read, id_param: :announcement_id
 
   def index
     respond_to do |format|
       format.html
       format.json do
-        @announcements = global_announcements.includes(:creator)
+        announcements = requesting_unread? ? unread_global_announcements : global_announcements
+        @announcements = announcements.includes(:creator)
       end
     end
   end
@@ -20,4 +18,16 @@ def mark_as_read
     @announcement.mark_as_read! for: current_user
     head :ok
   end
+
+  protected
+
+  def publicly_accessible?
+    requesting_unread?
+  end
+
+  private
+
+  def requesting_unread?
+    params[:unread] == 'true'
+  end
 end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index bbadb13c448..6761178fee9 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -7,9 +7,6 @@ class ApplicationController < ActionController::Base
   # Custom flash types. We follow Bootstrap's convention.
   add_flash_types :success, :info, :warning, :danger
 
-  # We allow views to add breadcrumbs
-  helper_method :add_breadcrumb
-
   include ApplicationControllerMultitenancyConcern
   include ApplicationComponentsConcern
   include ApplicationInternationalizationConcern
diff --git a/app/controllers/components/course/achievements_component.rb b/app/controllers/components/course/achievements_component.rb
index 17fcc73b9c9..25644990f9d 100644
--- a/app/controllers/components/course/achievements_component.rb
+++ b/app/controllers/components/course/achievements_component.rb
@@ -14,7 +14,7 @@ def sidebar_items
     [
       {
         key: :achievements,
-        icon: 'trophy',
+        icon: :achievement,
         title: I18n.t('course.achievement.achievements.sidebar_title'),
         weight: 4,
         path: course_achievements_path(current_course),
diff --git a/app/controllers/components/course/announcements_component.rb b/app/controllers/components/course/announcements_component.rb
index b4e0ec81ef7..a82836bc70a 100644
--- a/app/controllers/components/course/announcements_component.rb
+++ b/app/controllers/components/course/announcements_component.rb
@@ -16,7 +16,7 @@ def main_sidebar_items
     [
       {
         key: :announcements,
-        icon: 'bullhorn',
+        icon: :announcement,
         title: settings.title || t('course.announcements.sidebar_title'),
         weight: 1,
         path: course_announcements_path(current_course),
diff --git a/app/controllers/components/course/assessments_component.rb b/app/controllers/components/course/assessments_component.rb
index 71521af429f..6b242b3bcca 100644
--- a/app/controllers/components/course/assessments_component.rb
+++ b/app/controllers/components/course/assessments_component.rb
@@ -25,10 +25,10 @@ def assessment_categories
     current_course.assessment_categories.select(&:persisted?).map do |category|
       {
         key: "assessments_#{category.id}",
-        icon: 'plane', # TODO: category.icon in db that user can select and set
+        icon: :assessment, # TODO: category.icon in db that user can select and set
         title: category.title,
         weight: 2,
-        path: course_assessments_path(current_course, category: category, tab: category.tabs.first),
+        path: course_assessments_path(current_course, category: category),
         unread: 0
       }
     end
@@ -38,7 +38,7 @@ def assessment_submissions
     [
       {
         key: :assessments_submissions,
-        icon: 'upload',
+        icon: :submission,
         title: t('course.assessment.submissions.sidebar_title'),
         weight: 3,
         path: course_submissions_path(current_course),
@@ -53,7 +53,7 @@ def admin_sidebar_items
     [
       {
         key: :assessments_skills,
-        icon: 'bolt',
+        icon: :skills,
         title: t('course.assessment.skills.sidebar_title'),
         type: :admin,
         weight: 8,
diff --git a/app/controllers/components/course/discussion/topics_component.rb b/app/controllers/components/course/discussion/topics_component.rb
index f083e76fffe..5fdadc72759 100644
--- a/app/controllers/components/course/discussion/topics_component.rb
+++ b/app/controllers/components/course/discussion/topics_component.rb
@@ -17,7 +17,7 @@ def main_sidebar_items
     [
       {
         key: :discussion_topics,
-        icon: 'comments',
+        icon: :comments,
         title: settings.title || t('course.discussion.topics.sidebar_title'),
         weight: 5,
         path: course_topics_path(current_course),
diff --git a/app/controllers/components/course/duplication_component.rb b/app/controllers/components/course/duplication_component.rb
index 8300b1ac571..c9d1c7b3c81 100644
--- a/app/controllers/components/course/duplication_component.rb
+++ b/app/controllers/components/course/duplication_component.rb
@@ -12,7 +12,7 @@ def sidebar_items
     [
       {
         key: :duplication,
-        icon: 'clone',
+        icon: :duplication,
         title: t('layouts.duplication.title'),
         type: :admin,
         weight: 5,
diff --git a/app/controllers/components/course/experience_points_component.rb b/app/controllers/components/course/experience_points_component.rb
index c37e9a55671..9f110192800 100644
--- a/app/controllers/components/course/experience_points_component.rb
+++ b/app/controllers/components/course/experience_points_component.rb
@@ -15,7 +15,8 @@ def sidebar_items
 
     [
       {
-        icon: 'magic',
+        key: :disburse_experience_points,
+        icon: :disbursement,
         title: t('course.experience_points.disbursement.sidebar_title'),
         type: :admin,
         weight: 4,
diff --git a/app/controllers/components/course/forums_component.rb b/app/controllers/components/course/forums_component.rb
index 46195959001..93684637214 100644
--- a/app/controllers/components/course/forums_component.rb
+++ b/app/controllers/components/course/forums_component.rb
@@ -16,7 +16,7 @@ def main_sidebar_items
     [
       {
         key: :forums,
-        icon: 'list-ul',
+        icon: :forum,
         title: settings.title || t('course.forum.forums.sidebar_title'),
         weight: 10,
         path: course_forums_path(current_course),
diff --git a/app/controllers/components/course/groups_component.rb b/app/controllers/components/course/groups_component.rb
index dd51ddb2075..ec5c42b0360 100644
--- a/app/controllers/components/course/groups_component.rb
+++ b/app/controllers/components/course/groups_component.rb
@@ -13,7 +13,7 @@ def sidebar_items
     [
       {
         key: :groups,
-        icon: 'share-alt',
+        icon: :groups,
         title: I18n.t('course.groups.sidebar_title'),
         type: :admin,
         weight: 7,
diff --git a/app/controllers/components/course/leaderboard_component.rb b/app/controllers/components/course/leaderboard_component.rb
index 40100cfdf66..ba618f1ee06 100644
--- a/app/controllers/components/course/leaderboard_component.rb
+++ b/app/controllers/components/course/leaderboard_component.rb
@@ -20,7 +20,7 @@ def main_sidebar_items
     [
       {
         key: :leaderboard,
-        icon: 'star',
+        icon: :leaderboard,
         title: settings.title || t('course.leaderboards.sidebar_title'),
         weight: 6,
         path: course_leaderboard_path(current_course)
diff --git a/app/controllers/components/course/learning_map_component.rb b/app/controllers/components/course/learning_map_component.rb
index 046d6ed1004..d22e7661645 100644
--- a/app/controllers/components/course/learning_map_component.rb
+++ b/app/controllers/components/course/learning_map_component.rb
@@ -14,7 +14,7 @@ def sidebar_items
     [
       {
         key: :learning_map,
-        icon: 'map',
+        icon: :map,
         title: t('layouts.learning_map.title'),
         weight: 5,
         path: course_learning_map_path(current_course)
diff --git a/app/controllers/components/course/lesson_plan_component.rb b/app/controllers/components/course/lesson_plan_component.rb
index 67b52be0694..043e44e5979 100644
--- a/app/controllers/components/course/lesson_plan_component.rb
+++ b/app/controllers/components/course/lesson_plan_component.rb
@@ -20,7 +20,7 @@ def main_sidebar_items
     [
       {
         key: :lesson_plan,
-        icon: 'book',
+        icon: :lessonPlan,
         title: I18n.t('course.lesson_plan.items.sidebar_title'),
         weight: 8,
         path: course_lesson_plan_path(current_course)
diff --git a/app/controllers/components/course/levels_component.rb b/app/controllers/components/course/levels_component.rb
index 631df2351b3..d2d75d04100 100644
--- a/app/controllers/components/course/levels_component.rb
+++ b/app/controllers/components/course/levels_component.rb
@@ -16,7 +16,7 @@ def sidebar_items
     [
       {
         key: :levels,
-        icon: 'star-half-o',
+        icon: :levels,
         title: I18n.t('course.levels.sidebar_title'),
         type: :admin,
         weight: 6,
diff --git a/app/controllers/components/course/materials_component.rb b/app/controllers/components/course/materials_component.rb
index 5eed3565d97..5a0d05fbc84 100644
--- a/app/controllers/components/course/materials_component.rb
+++ b/app/controllers/components/course/materials_component.rb
@@ -16,7 +16,7 @@ def main_sidebar_items
     [
       {
         key: :materials,
-        icon: 'folder-open',
+        icon: :material,
         title: settings.title || t('course.material.sidebar_title'),
         weight: 9,
         path: course_material_folder_path(current_course, current_course.root_folder),
diff --git a/app/controllers/components/course/multiple_reference_timelines_component.rb b/app/controllers/components/course/multiple_reference_timelines_component.rb
index 30ebc1bdd4b..7f76a32b3bb 100644
--- a/app/controllers/components/course/multiple_reference_timelines_component.rb
+++ b/app/controllers/components/course/multiple_reference_timelines_component.rb
@@ -16,7 +16,7 @@ def sidebar_items
     [
       {
         key: :reference_timelines,
-        icon: 'random',
+        icon: :timelines,
         type: :admin,
         weight: 8,
         title: t('layouts.multiple_reference_timelines.timeline_designer'),
diff --git a/app/controllers/components/course/settings_component.rb b/app/controllers/components/course/settings_component.rb
index 49b96a0d8bc..8ce746b4758 100644
--- a/app/controllers/components/course/settings_component.rb
+++ b/app/controllers/components/course/settings_component.rb
@@ -22,7 +22,8 @@ def admin_sidebar_items
 
     [
       {
-        icon: 'gear',
+        key: :admin,
+        icon: :settings,
         title: t('layouts.course_admin.title'),
         type: :admin,
         weight: 9,
diff --git a/app/controllers/components/course/statistics_component.rb b/app/controllers/components/course/statistics_component.rb
index bf36448a19b..101d0a01541 100644
--- a/app/controllers/components/course/statistics_component.rb
+++ b/app/controllers/components/course/statistics_component.rb
@@ -12,7 +12,7 @@ def sidebar_items
     [
       {
         key: :statistics,
-        icon: 'bar-chart',
+        icon: :statistics,
         title: t('course.statistics.header'),
         type: :admin,
         weight: 2,
diff --git a/app/controllers/components/course/survey_component.rb b/app/controllers/components/course/survey_component.rb
index 082ef50a78c..1adcf2e71c0 100644
--- a/app/controllers/components/course/survey_component.rb
+++ b/app/controllers/components/course/survey_component.rb
@@ -14,7 +14,7 @@ def sidebar_items
     [
       {
         key: :surveys,
-        icon: 'pie-chart',
+        icon: :survey,
         title: I18n.t('course.surveys.sidebar_title'),
         weight: 11,
         path: course_surveys_path(current_course)
diff --git a/app/controllers/components/course/users_component.rb b/app/controllers/components/course/users_component.rb
index efdeb3b2a65..c383ffaa22b 100644
--- a/app/controllers/components/course/users_component.rb
+++ b/app/controllers/components/course/users_component.rb
@@ -20,7 +20,7 @@ def main_sidebar_items
     [
       {
         key: :users,
-        icon: 'group',
+        icon: :users,
         title: t('course.users.sidebar_title'),
         weight: 7,
         path: course_users_path(current_course)
@@ -39,7 +39,8 @@ def admin_sidebar_items
 
     [
       {
-        icon: 'user-plus',
+        key: :manage_users,
+        icon: :manageUsers,
         title: t('layouts.course_users.title'),
         type: :admin,
         weight: 1,
diff --git a/app/controllers/components/course/videos_component.rb b/app/controllers/components/course/videos_component.rb
index a97adfcb642..1abe751474a 100644
--- a/app/controllers/components/course/videos_component.rb
+++ b/app/controllers/components/course/videos_component.rb
@@ -24,7 +24,7 @@ def main_sidebar_items
     [
       {
         key: :videos,
-        icon: 'video-camera',
+        icon: :video,
         title: settings.title || t('course.video.videos.sidebar_title'),
         weight: 12,
         path: course_videos_path(current_course, tab: current_course.default_video_tab),
diff --git a/app/controllers/concerns/course/users_breadcrumb_concern.rb b/app/controllers/concerns/course/users_breadcrumb_concern.rb
deleted file mode 100644
index 71977fea884..00000000000
--- a/app/controllers/concerns/course/users_breadcrumb_concern.rb
+++ /dev/null
@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-module Course::UsersBreadcrumbConcern
-  extend ActiveSupport::Concern
-
-  included do
-    add_breadcrumb I18n.t('breadcrumbs.course.users.index'), :course_users_path
-  end
-end
diff --git a/app/controllers/course/achievement/controller.rb b/app/controllers/course/achievement/controller.rb
index b1c0b8ce138..69610655d8c 100644
--- a/app/controllers/course/achievement/controller.rb
+++ b/app/controllers/course/achievement/controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::Achievement::Controller < Course::ComponentController
   load_and_authorize_resource :achievement, through: :course, class: Course::Achievement.name
-  add_breadcrumb :index, :course_achievements_path
 
   helper name
 
diff --git a/app/controllers/course/admin/announcement_settings_controller.rb b/app/controllers/course/admin/announcement_settings_controller.rb
index 4c4ac15bc0a..1840514ad1e 100644
--- a/app/controllers/course/admin/announcement_settings_controller.rb
+++ b/app/controllers/course/admin/announcement_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::AnnouncementSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_announcements_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/assessment_settings_controller.rb b/app/controllers/course/admin/assessment_settings_controller.rb
index a1f39b88b5a..4faa659de46 100644
--- a/app/controllers/course/admin/assessment_settings_controller.rb
+++ b/app/controllers/course/admin/assessment_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::AssessmentSettingsController < Course::Admin::Controller
-  add_breadcrumb :index, :course_admin_assessments_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/assessments/categories_controller.rb b/app/controllers/course/admin/assessments/categories_controller.rb
index 85f739f4871..61b11de322e 100644
--- a/app/controllers/course/admin/assessments/categories_controller.rb
+++ b/app/controllers/course/admin/assessments/categories_controller.rb
@@ -4,7 +4,6 @@ class Course::Admin::Assessments::CategoriesController < Course::Admin::Controll
                               through: :course,
                               through_association: :assessment_categories,
                               class: Course::Assessment::Category.name
-  add_breadcrumb :index, :course_admin_assessments_path
 
   def new
   end
diff --git a/app/controllers/course/admin/assessments/tabs_controller.rb b/app/controllers/course/admin/assessments/tabs_controller.rb
index 23c5e689a88..5cdd5c2ca7f 100644
--- a/app/controllers/course/admin/assessments/tabs_controller.rb
+++ b/app/controllers/course/admin/assessments/tabs_controller.rb
@@ -8,9 +8,6 @@ class Course::Admin::Assessments::TabsController < Course::Admin::Controller
                               through: :category,
                               class: Course::Assessment::Tab.name
 
-  add_breadcrumb :index, :course_admin_assessments_path
-  before_action :add_category_breadcrumb
-
   def new
   end
 
@@ -38,10 +35,6 @@ def tab_params
     params.require(:tab).permit(:title, :weight)
   end
 
-  def add_category_breadcrumb
-    add_breadcrumb @category.title, course_admin_assessments_path(current_course)
-  end
-
   # @return [Course::AssessmentsComponent]
   # @return [nil] If component is disabled.
   def component
diff --git a/app/controllers/course/admin/codaveri_settings_controller.rb b/app/controllers/course/admin/codaveri_settings_controller.rb
index 0c7954b5dee..3c93747eeee 100644
--- a/app/controllers/course/admin/codaveri_settings_controller.rb
+++ b/app/controllers/course/admin/codaveri_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::CodaveriSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_codaveri_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/component_settings_controller.rb b/app/controllers/course/admin/component_settings_controller.rb
index 609840f8ad0..d62c79f2c02 100644
--- a/app/controllers/course/admin/component_settings_controller.rb
+++ b/app/controllers/course/admin/component_settings_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::Admin::ComponentSettingsController < Course::Admin::Controller
   before_action :load_settings
-  add_breadcrumb :edit, :course_admin_components_path
 
   def edit
     respond_to do |format|
diff --git a/app/controllers/course/admin/controller.rb b/app/controllers/course/admin/controller.rb
index 1f3e5c29394..2fdea0000b4 100644
--- a/app/controllers/course/admin/controller.rb
+++ b/app/controllers/course/admin/controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::Controller < Course::ComponentController
-  add_breadcrumb :admin, :course_admin_path
-
   before_action :authorize_admin
 
   private
diff --git a/app/controllers/course/admin/discussion/topic_settings_controller.rb b/app/controllers/course/admin/discussion/topic_settings_controller.rb
index 0678f719525..d0cecb1511d 100644
--- a/app/controllers/course/admin/discussion/topic_settings_controller.rb
+++ b/app/controllers/course/admin/discussion/topic_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::Discussion::TopicSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_topics_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/forum_settings_controller.rb b/app/controllers/course/admin/forum_settings_controller.rb
index fa1eadb6f23..222deea6d13 100644
--- a/app/controllers/course/admin/forum_settings_controller.rb
+++ b/app/controllers/course/admin/forum_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::ForumSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_forums_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/leaderboard_settings_controller.rb b/app/controllers/course/admin/leaderboard_settings_controller.rb
index 6c14bd1744e..f075af169d1 100644
--- a/app/controllers/course/admin/leaderboard_settings_controller.rb
+++ b/app/controllers/course/admin/leaderboard_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::LeaderboardSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_leaderboard_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/lesson_plan_settings_controller.rb b/app/controllers/course/admin/lesson_plan_settings_controller.rb
index b9d669b3a8b..8df7618cfde 100644
--- a/app/controllers/course/admin/lesson_plan_settings_controller.rb
+++ b/app/controllers/course/admin/lesson_plan_settings_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::Admin::LessonPlanSettingsController < Course::Admin::Controller
   before_action :load_item_settings
-  add_breadcrumb :edit, :course_admin_lesson_plan_path
 
   def edit
     respond_to do |format|
diff --git a/app/controllers/course/admin/material_settings_controller.rb b/app/controllers/course/admin/material_settings_controller.rb
index 2b0085b92cf..0072946f2d5 100644
--- a/app/controllers/course/admin/material_settings_controller.rb
+++ b/app/controllers/course/admin/material_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::MaterialSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_materials_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/notification_settings_controller.rb b/app/controllers/course/admin/notification_settings_controller.rb
index 2b70214c2da..f6471212917 100644
--- a/app/controllers/course/admin/notification_settings_controller.rb
+++ b/app/controllers/course/admin/notification_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::NotificationSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_notifications_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/sidebar_settings_controller.rb b/app/controllers/course/admin/sidebar_settings_controller.rb
index dba124473c9..0477ed500ce 100644
--- a/app/controllers/course/admin/sidebar_settings_controller.rb
+++ b/app/controllers/course/admin/sidebar_settings_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::Admin::SidebarSettingsController < Course::Admin::Controller
   before_action :load_settings
-  add_breadcrumb :index, :course_admin_sidebar_path
 
   def edit
     respond_to do |format|
diff --git a/app/controllers/course/admin/video_settings_controller.rb b/app/controllers/course/admin/video_settings_controller.rb
index 75acb38735f..000eb91f411 100644
--- a/app/controllers/course/admin/video_settings_controller.rb
+++ b/app/controllers/course/admin/video_settings_controller.rb
@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 class Course::Admin::VideoSettingsController < Course::Admin::Controller
-  add_breadcrumb :edit, :course_admin_videos_path
-
   def edit
     respond_to do |format|
       format.html { render 'course/admin/index' }
diff --git a/app/controllers/course/admin/videos/tabs_controller.rb b/app/controllers/course/admin/videos/tabs_controller.rb
index 87f2f8a3096..88628305564 100644
--- a/app/controllers/course/admin/videos/tabs_controller.rb
+++ b/app/controllers/course/admin/videos/tabs_controller.rb
@@ -5,8 +5,6 @@ class Course::Admin::Videos::TabsController < Course::Admin::Controller
                               through_association: :video_tabs,
                               class: Course::Video::Tab.name
 
-  add_breadcrumb :index, :course_admin_videos_path
-
   def new
   end
 
diff --git a/app/controllers/course/announcements_controller.rb b/app/controllers/course/announcements_controller.rb
index 5bf548ed6c1..c833809490d 100644
--- a/app/controllers/course/announcements_controller.rb
+++ b/app/controllers/course/announcements_controller.rb
@@ -3,7 +3,6 @@ class Course::AnnouncementsController < Course::ComponentController
   include Course::UsersHelper
 
   load_and_authorize_resource :announcement, through: :course, class: Course::Announcement.name
-  before_action :add_announcement_breadcrumb
 
   after_action :mark_announcements_as_read, only: [:index]
 
@@ -19,7 +18,7 @@ def index
 
   def create
     if @announcement.save
-      render partial: 'announcements/announcement_list_data',
+      render partial: 'announcements/announcement_data',
              locals: { announcement: @announcement }
     else
       render json: { errors: @announcement.errors }, status: :bad_request
@@ -28,7 +27,7 @@ def create
 
   def update
     if @announcement.update(announcement_params)
-      render partial: 'announcements/announcement_list_data',
+      render partial: 'announcements/announcement_data',
              locals: { announcement: @announcement },
              status: :ok
     else
@@ -50,10 +49,6 @@ def announcement_params
     params.require(:announcement).permit(:title, :content, :sticky, :start_at, :end_at)
   end
 
-  def add_announcement_breadcrumb
-    add_breadcrumb @settings.title || :index, :course_announcements_path
-  end
-
   # @return [Course::AnnouncementsComponent] The announcement component.
   # @return [nil] If announcement component is disabled.
   def component
diff --git a/app/controllers/course/assessment/component_controller.rb b/app/controllers/course/assessment/component_controller.rb
index 1cab78f8bc0..b2aa1199d22 100644
--- a/app/controllers/course/assessment/component_controller.rb
+++ b/app/controllers/course/assessment/component_controller.rb
@@ -1,10 +1,3 @@
 # frozen_string_literal: true
 class Course::Assessment::ComponentController < Course::Assessment::Controller
-  before_action :add_assessment_breadcrumb
-
-  protected
-
-  def add_assessment_breadcrumb
-    add_breadcrumb @assessment.title, course_assessment_path(current_course, @assessment)
-  end
 end
diff --git a/app/controllers/course/assessment/controller.rb b/app/controllers/course/assessment/controller.rb
index 58ce106c686..af864683e02 100644
--- a/app/controllers/course/assessment/controller.rb
+++ b/app/controllers/course/assessment/controller.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 class Course::Assessment::Controller < Course::ComponentController
   before_action :load_and_authorize_assessment
-  before_action :add_assessment_breadcrumbs
+  before_action :load_category_and_tab
 
   protected
 
@@ -21,26 +21,17 @@ def tab
 
   private
 
+  def load_category_and_tab
+    category
+    tab
+  end
+
   def load_and_authorize_assessment
     options = load_assessment_options.reverse_merge(through: :course,
                                                     class: Course::Assessment.name)
     self.class.cancan_resource_class.new(self, :assessment, options).load_and_authorize_resource
   end
 
-  def add_assessment_breadcrumbs
-    category_path = course_assessments_path(course_id: current_course, category: category)
-    add_breadcrumb(category.title, category_path)
-
-    add_assessment_tab_breadcrumb
-  end
-
-  def add_assessment_tab_breadcrumb
-    return if category.tabs.length == 1
-
-    tab_path = course_assessments_path(course_id: current_course, category: category, tab: tab)
-    add_breadcrumb(tab.title, tab_path)
-  end
-
   # @return [Course::AssessmentsComponent]
   # @return [nil] If component is disabled.
   def component
diff --git a/app/controllers/course/assessment/question_bundle_assignments_controller.rb b/app/controllers/course/assessment/question_bundle_assignments_controller.rb
index 4010b9e4e46..378b01aec93 100644
--- a/app/controllers/course/assessment/question_bundle_assignments_controller.rb
+++ b/app/controllers/course/assessment/question_bundle_assignments_controller.rb
@@ -4,8 +4,6 @@ class Course::Assessment::QuestionBundleAssignmentsController < Course::Assessme
   load_and_authorize_resource :question_bundle_assignment, class: Course::Assessment::QuestionBundleAssignment,
                                                            through: :assessment
 
-  before_action :add_breadcrumbs
-
   def index
     @question_group_lookup = @assessment.question_groups.select(:id, :title).to_h { |qg| [qg.id, qg.title] }
     @question_bundle_lookup = @assessment.question_bundles.select(:id, :title).to_h { |qb| [qb.id, qb.title] }
@@ -91,10 +89,4 @@ def past_assignments_hash
       [submission.creator_id, hash]
     end
   end
-
-  def add_breadcrumbs
-    add_breadcrumb(@assessment.title, course_assessment_path(current_course, @assessment))
-    add_breadcrumb('Question Bundle Assignment',
-                   course_assessment_question_bundle_assignments_path(current_course, @assessment))
-  end
 end
diff --git a/app/controllers/course/assessment/question_bundle_questions_controller.rb b/app/controllers/course/assessment/question_bundle_questions_controller.rb
index 0e914f4ea84..de08f0715e8 100644
--- a/app/controllers/course/assessment/question_bundle_questions_controller.rb
+++ b/app/controllers/course/assessment/question_bundle_questions_controller.rb
@@ -4,8 +4,6 @@ class Course::Assessment::QuestionBundleQuestionsController < Course::Assessment
                                                          through: :assessment
   skip_load_resource :question_bundle_question, only: [:new, :create]
 
-  before_action :add_breadcrumbs
-
   def index
     @question_bundle_questions =
       Course::Assessment::QuestionBundleQuestion.where(id: @question_bundle_questions).
@@ -50,12 +48,6 @@ def destroy
 
   private
 
-  def add_breadcrumbs
-    add_breadcrumb(@assessment.title, course_assessment_path(current_course, @assessment))
-    add_breadcrumb('Question Bundle Questions',
-                   course_assessment_question_bundle_questions_path(current_course, @assessment))
-  end
-
   def question_bundle_question_params
     params.require(:question_bundle_question).permit(:weight, :bundle_id, :question_id)
   end
diff --git a/app/controllers/course/assessment/question_bundles_controller.rb b/app/controllers/course/assessment/question_bundles_controller.rb
index 2b250d49585..8a4a26adbb2 100644
--- a/app/controllers/course/assessment/question_bundles_controller.rb
+++ b/app/controllers/course/assessment/question_bundles_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::Assessment::QuestionBundlesController < Course::Assessment::Controller
   load_and_authorize_resource :question_bundle, class: Course::Assessment::QuestionBundle, through: :assessment
-  before_action :add_breadcrumbs
 
   def index
   end
@@ -40,11 +39,6 @@ def destroy
 
   private
 
-  def add_breadcrumbs
-    add_breadcrumb(@assessment.title, course_assessment_path(current_course, @assessment))
-    add_breadcrumb('Question Bundles', course_assessment_question_bundles_path(current_course, @assessment))
-  end
-
   def question_bundle_params
     params.require(:question_bundle).permit(:title, :group_id)
   end
diff --git a/app/controllers/course/assessment/question_groups_controller.rb b/app/controllers/course/assessment/question_groups_controller.rb
index c89ffd2122a..81c4e8c3f35 100644
--- a/app/controllers/course/assessment/question_groups_controller.rb
+++ b/app/controllers/course/assessment/question_groups_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::Assessment::QuestionGroupsController < Course::Assessment::Controller
   load_and_authorize_resource :question_group, class: Course::Assessment::QuestionGroup, through: :assessment
-  before_action :add_breadcrumbs
 
   def index
     @question_groups = @question_groups.order(:weight)
@@ -40,11 +39,6 @@ def destroy
 
   private
 
-  def add_breadcrumbs
-    add_breadcrumb(@assessment.title, course_assessment_path(current_course, @assessment))
-    add_breadcrumb('Question Groups', course_assessment_question_groups_path(current_course, @assessment))
-  end
-
   def question_group_params
     params.require(:question_group).permit(:title, :weight)
   end
diff --git a/app/controllers/course/assessment/sessions_controller.rb b/app/controllers/course/assessment/sessions_controller.rb
index 0c3977a9e7d..be7e495c850 100644
--- a/app/controllers/course/assessment/sessions_controller.rb
+++ b/app/controllers/course/assessment/sessions_controller.rb
@@ -3,8 +3,6 @@ class Course::Assessment::SessionsController < Course::Assessment::Controller
   before_action :load_and_authorize_submission
 
   def new
-    add_breadcrumb(@assessment.title, course_assessment_path(current_course, @assessment))
-    add_breadcrumb :new
   end
 
   def create
diff --git a/app/controllers/course/assessment/skill_branches_controller.rb b/app/controllers/course/assessment/skill_branches_controller.rb
index 3717072773d..00e5ce0e767 100644
--- a/app/controllers/course/assessment/skill_branches_controller.rb
+++ b/app/controllers/course/assessment/skill_branches_controller.rb
@@ -3,7 +3,6 @@ class Course::Assessment::SkillBranchesController < Course::ComponentController
   load_and_authorize_resource :skill_branch, class: Course::Assessment::SkillBranch.name,
                                              through: :course,
                                              through_association: :assessment_skill_branches
-  add_breadcrumb :index, :course_assessments_skills_path
 
   def create
     if @skill_branch.save
diff --git a/app/controllers/course/assessment/skills_controller.rb b/app/controllers/course/assessment/skills_controller.rb
index f8acd377090..ec777344389 100644
--- a/app/controllers/course/assessment/skills_controller.rb
+++ b/app/controllers/course/assessment/skills_controller.rb
@@ -3,7 +3,6 @@ class Course::Assessment::SkillsController < Course::ComponentController
   load_and_authorize_resource :skill, class: Course::Assessment::Skill.name, through: :course,
                                       through_association: :assessment_skills
   before_action :load_skill_branches
-  add_breadcrumb :index, :course_assessments_skills_path
 
   def index
     @skills = @skills.includes(:skill_branch).group_by(&:skill_branch)
diff --git a/app/controllers/course/assessment/submission/controller.rb b/app/controllers/course/assessment/submission/controller.rb
index 174e9524cb0..29c0ff0f2f2 100644
--- a/app/controllers/course/assessment/submission/controller.rb
+++ b/app/controllers/course/assessment/submission/controller.rb
@@ -1,12 +1,4 @@
 # frozen_string_literal: true
 class Course::Assessment::Submission::Controller < Course::Assessment::Controller
-  load_and_authorize_resource :submission, class: Course::Assessment::Submission.name,
-                                           through: :assessment
-  before_action :add_assessment_breadcrumb
-
-  protected
-
-  def add_assessment_breadcrumb
-    add_breadcrumb(@assessment.title, course_assessment_path(current_course, @assessment))
-  end
+  load_and_authorize_resource :submission, class: Course::Assessment::Submission.name, through: :assessment
 end
diff --git a/app/controllers/course/assessment/submissions_controller.rb b/app/controllers/course/assessment/submissions_controller.rb
index 9cda88e5ea3..3e5356120ad 100644
--- a/app/controllers/course/assessment/submissions_controller.rb
+++ b/app/controllers/course/assessment/submissions_controller.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 class Course::Assessment::SubmissionsController < Course::ComponentController
   before_action :load_submissions
-  before_action :add_submissions_breadcrumb
+  before_action :load_category
   before_action :load_group_managers, only: [:pending, :index]
 
   def index
@@ -59,6 +59,8 @@ def category
       end
   end
 
+  alias_method :load_category, :category
+
   # Load student submissions.
   def load_submissions
     student_ids = if current_course_user&.student?
@@ -99,10 +101,6 @@ def load_assessments
     end
   end
 
-  def add_submissions_breadcrumb
-    add_breadcrumb :index, course_submissions_path(current_course, category: category)
-  end
-
   # @return [Course::AssessmentsComponent]
   # @return [nil] If component is disabled.
   def component
diff --git a/app/controllers/course/controller.rb b/app/controllers/course/controller.rb
index 0641b62fc45..328e924466d 100644
--- a/app/controllers/course/controller.rb
+++ b/app/controllers/course/controller.rb
@@ -4,8 +4,6 @@ class Course::Controller < ApplicationController
   before_action :set_last_active_at
   helper name
 
-  before_action :add_course_breadcrumb
-
   # Gets the sidebar items. The sidebar items are ordered by the settings of current course.
   #
   # @param [Symbol] type The type of sidebar item, all sidebar items will be returned if the type
@@ -77,11 +75,6 @@ def sidebar_items_weights
     defined_sidebar_settings.to_h { |item| [item.id, item.weight] }
   end
 
-  def add_course_breadcrumb
-    add_breadcrumb(current_course.title, course_path(current_course)) if
-      current_course.present? && current_course.id.present?
-  end
-
   def set_last_active_at
     return if current_course.nil? || current_course_user.nil?
 
diff --git a/app/controllers/course/courses_controller.rb b/app/controllers/course/courses_controller.rb
index ebc1b102a05..f6bea291e2e 100644
--- a/app/controllers/course/courses_controller.rb
+++ b/app/controllers/course/courses_controller.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 class Course::CoursesController < Course::Controller
   include Course::ActivityFeedsConcern
-  skip_authorize_resource :course, only: [:show, :index]
+  skip_authorize_resource :course, only: [:show, :index, :sidebar]
 
   def index
     @courses = Course.publicly_accessible
@@ -33,6 +33,9 @@ def create
   def destroy
   end
 
+  def sidebar
+  end
+
   protected
 
   def publicly_accessible?
diff --git a/app/controllers/course/discussion/topics_controller.rb b/app/controllers/course/discussion/topics_controller.rb
index fc28a505c55..cd33aba9b54 100644
--- a/app/controllers/course/discussion/topics_controller.rb
+++ b/app/controllers/course/discussion/topics_controller.rb
@@ -5,7 +5,6 @@ class Course::Discussion::TopicsController < Course::ComponentController
   load_and_authorize_resource :discussion_topic, through: :course, instance_name: :topic,
                                                  class: Course::Discussion::Topic.name,
                                                  parent: false
-  before_action :add_topics_breadcrumb
 
   def index
   end
@@ -93,10 +92,6 @@ def my_students_topics
       preload(:actable)
   end
 
-  def add_topics_breadcrumb
-    add_breadcrumb @settings.title || :index, :course_topics_path
-  end
-
   def component
     current_component_host[:course_discussion_topics_component]
   end
diff --git a/app/controllers/course/experience_points/disbursement_controller.rb b/app/controllers/course/experience_points/disbursement_controller.rb
index 8ec5053da74..6e496961f0c 100644
--- a/app/controllers/course/experience_points/disbursement_controller.rb
+++ b/app/controllers/course/experience_points/disbursement_controller.rb
@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 class Course::ExperiencePoints::DisbursementController < Course::ComponentController
-  include Course::UsersBreadcrumbConcern
   before_action :load_resource
   before_action :authorize_resource
 
diff --git a/app/controllers/course/experience_points_records_controller.rb b/app/controllers/course/experience_points_records_controller.rb
index 1822fc9e657..396d75e8c5d 100644
--- a/app/controllers/course/experience_points_records_controller.rb
+++ b/app/controllers/course/experience_points_records_controller.rb
@@ -1,11 +1,8 @@
 # frozen_string_literal: true
 class Course::ExperiencePointsRecordsController < Course::ComponentController
-  include Course::UsersBreadcrumbConcern
-
   load_resource :course_user, through: :course, id_param: :user_id
   load_and_authorize_resource :experience_points_record, through: :course_user,
                                                          class: Course::ExperiencePointsRecord.name
-  before_action :add_breadcrumbs
 
   def index
     respond_to do |format|
@@ -53,11 +50,6 @@ def experience_points_record_params
     params.require(:experience_points_record).permit(:points_awarded, :reason)
   end
 
-  def add_breadcrumbs
-    add_breadcrumb @course_user.name, course_user_path(current_course, @course_user)
-    add_breadcrumb :index
-  end
-
   # @return [Course::ExperiencePointsComponent]
   # @return [nil] If component is disabled.
   def component
diff --git a/app/controllers/course/forum/component_controller.rb b/app/controllers/course/forum/component_controller.rb
index 9e5878c1086..e237666561d 100644
--- a/app/controllers/course/forum/component_controller.rb
+++ b/app/controllers/course/forum/component_controller.rb
@@ -1,9 +1,3 @@
 # frozen_string_literal: true
 class Course::Forum::ComponentController < Course::Forum::Controller
-  protected
-
-  def add_forum_breadcrumb
-    super
-    add_breadcrumb @forum.name, course_forum_path(current_course, @forum)
-  end
 end
diff --git a/app/controllers/course/forum/controller.rb b/app/controllers/course/forum/controller.rb
index d530809b3a7..45a4eb5a045 100644
--- a/app/controllers/course/forum/controller.rb
+++ b/app/controllers/course/forum/controller.rb
@@ -3,7 +3,6 @@ class Course::Forum::Controller < Course::ComponentController
   helper Course::Forum::ControllerHelper
   before_action :load_forum, unless: :skip_load_forum?
   authorize_resource :forum, class: Course::Forum.name
-  before_action :add_forum_breadcrumb
 
   private
 
@@ -11,11 +10,6 @@ def load_forum
     @forum ||= current_course.forums.friendly.find(params[:forum_id] || params[:id])
   end
 
-  def add_forum_breadcrumb
-    add_breadcrumb component.settings.title || t('breadcrumbs.course.forum.forums.index'),
-                   :course_forums_path
-  end
-
   # @return [Course::ForumsComponent] The forum component.
   # @return [nil] If component is disabled.
   def component
diff --git a/app/controllers/course/forum/forums_controller.rb b/app/controllers/course/forum/forums_controller.rb
index 974a9cb77b8..7fb1c85dcd6 100644
--- a/app/controllers/course/forum/forums_controller.rb
+++ b/app/controllers/course/forum/forums_controller.rb
@@ -2,7 +2,6 @@
 class Course::Forum::ForumsController < Course::Forum::Controller
   include Course::UsersHelper
   load_resource :forum, class: Course::Forum.name, through: :course, only: [:index, :new, :create]
-  before_action :add_forum_item_breadcrumb
 
   def index
     respond_to do |format|
@@ -120,10 +119,6 @@ def forum_params
     params.require(:forum).permit(:name, :description, :forum_topics_auto_subscribe, :course_id)
   end
 
-  def add_forum_item_breadcrumb
-    add_breadcrumb @forum.name, course_forum_path(current_course, @forum) if @forum&.persisted?
-  end
-
   def skip_load_forum?
     [:index, :create, :all_posts, :search, :mark_all_as_read].include?(action_name.to_sym)
   end
diff --git a/app/controllers/course/forum/posts_controller.rb b/app/controllers/course/forum/posts_controller.rb
index 05cf0bf22d4..72be9b9555c 100644
--- a/app/controllers/course/forum/posts_controller.rb
+++ b/app/controllers/course/forum/posts_controller.rb
@@ -4,7 +4,6 @@ class Course::Forum::PostsController < Course::Forum::ComponentController
   authorize_resource :topic
   skip_authorize_resource :post, only: :toggle_answer
   before_action :authorize_locked_topic, only: [:create]
-  before_action :add_topic_breadcrumb
 
   include Course::Discussion::PostsConcern
 
@@ -86,10 +85,6 @@ def load_topic
     @topic ||= @forum.topics.friendly.find(topic_id_param)
   end
 
-  def add_topic_breadcrumb
-    add_breadcrumb @topic.title, course_forum_topic_path(current_course, @forum, @topic)
-  end
-
   def post_vote_param
     params.permit(:vote)[:vote].to_i
   end
diff --git a/app/controllers/course/forum/topics_controller.rb b/app/controllers/course/forum/topics_controller.rb
index 72e4af9f6b1..904298079ab 100644
--- a/app/controllers/course/forum/topics_controller.rb
+++ b/app/controllers/course/forum/topics_controller.rb
@@ -8,7 +8,6 @@ class Course::Forum::TopicsController < Course::Forum::ComponentController
   before_action :load_topic, except: [:create]
   load_resource :topic, class: Course::Forum::Topic.name, through: :forum, only: [:create]
   authorize_resource :topic, class: Course::Forum::Topic.name, except: [:set_resolved]
-  before_action :add_topic_breadcrumb
   after_action :mark_posts_read, only: [:show]
 
   def show
@@ -72,13 +71,6 @@ def load_topic
     @topic ||= @forum.topics.friendly.find(params[:id])
   end
 
-  def add_topic_breadcrumb
-    return unless @topic&.persisted?
-
-    add_breadcrumb @topic.title, course_forum_topic_path(current_course, @forum,
-                                                         @topic)
-  end
-
   def mark_posts_read
     @topic.posts.klass.mark_as_read!(@topic.posts.select(&:persisted?), for: current_user)
   end
diff --git a/app/controllers/course/group/group_categories_controller.rb b/app/controllers/course/group/group_categories_controller.rb
index 5197d609d26..e3eba1118a7 100644
--- a/app/controllers/course/group/group_categories_controller.rb
+++ b/app/controllers/course/group/group_categories_controller.rb
@@ -3,7 +3,6 @@ class Course::Group::GroupCategoriesController < Course::ComponentController
   include Course::Group::GroupManagerConcern
 
   load_and_authorize_resource :group_category, class: Course::GroupCategory
-  before_action :add_group_breadcrumb
 
   def index
     respond_to do |format|
@@ -124,10 +123,6 @@ def update_groups_params
                   ])
   end
 
-  def add_group_breadcrumb
-    add_breadcrumb :index, course_group_categories_path(current_course)
-  end
-
   # @return [Course::GroupsComponent]
   # @return [nil] If component is disabled.
   def component
diff --git a/app/controllers/course/leaderboards_controller.rb b/app/controllers/course/leaderboards_controller.rb
index 402ac851458..9b6b2ca6c88 100644
--- a/app/controllers/course/leaderboards_controller.rb
+++ b/app/controllers/course/leaderboards_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::LeaderboardsController < Course::ComponentController
   include Course::LeaderboardsHelper
-  before_action :add_leaderboard_breadcrumb
   before_action :check_component_settings
   before_action :preload_course_levels, only: [:index]
   before_action :fetch_course_users, only: [:index]
@@ -31,10 +30,6 @@ def preload_course_levels
     @course.levels.to_a
   end
 
-  def add_leaderboard_breadcrumb
-    add_breadcrumb @settings.title || :index, :course_leaderboard_path
-  end
-
   # @return [Course::LeaderboardComponent] The leaderboard component.
   # @return [nil] If leaderboard component is disabled.
   def component
diff --git a/app/controllers/course/learning_map_controller.rb b/app/controllers/course/learning_map_controller.rb
index aceb5922a42..a0752ebc407 100644
--- a/app/controllers/course/learning_map_controller.rb
+++ b/app/controllers/course/learning_map_controller.rb
@@ -5,7 +5,6 @@ class Course::LearningMapController < Course::ComponentController
 
   before_action :authorize_learning_map
   before_action :authorize_update, only: [:add_parent_node, :remove_parent_node, :toggle_satisfiability_type]
-  add_breadcrumb :index, :course_learning_map_path
 
   def index
     respond_to do |format|
diff --git a/app/controllers/course/lesson_plan/controller.rb b/app/controllers/course/lesson_plan/controller.rb
index 2c81dfde1a9..0162000d0f9 100644
--- a/app/controllers/course/lesson_plan/controller.rb
+++ b/app/controllers/course/lesson_plan/controller.rb
@@ -2,8 +2,6 @@
 class Course::LessonPlan::Controller < Course::ComponentController
   include Course::LessonPlan::ActsAsLessonPlanItemConcern
 
-  add_breadcrumb :index, :course_lesson_plan_path
-
   private
 
   # Define lesson plan component for the check whether the component is defined.
diff --git a/app/controllers/course/levels_controller.rb b/app/controllers/course/levels_controller.rb
index 13182e73d50..3f0b94b0d71 100644
--- a/app/controllers/course/levels_controller.rb
+++ b/app/controllers/course/levels_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class Course::LevelsController < Course::ComponentController
   load_and_authorize_resource :level, through: :course, class: Course::Level.name
-  add_breadcrumb :index, :course_levels_path
 
   def index
   end
diff --git a/app/controllers/course/material/controller.rb b/app/controllers/course/material/controller.rb
index 3d066f8db4c..a7b933ed1b3 100644
--- a/app/controllers/course/material/controller.rb
+++ b/app/controllers/course/material/controller.rb
@@ -3,8 +3,6 @@ class Course::Material::Controller < Course::ComponentController
   load_and_authorize_resource :folder, through: :course, through_association: :material_folders,
                                        class: Course::Material::Folder.name
 
-  before_action :add_folder_breadcrumb
-
   private
 
   # @return [Course::MaterialsComponent] The materials component.
@@ -14,16 +12,6 @@ def component
   end
   helper_method :component
 
-  def add_folder_breadcrumb
-    folders_chain = @folder.ancestors.reverse << @folder
-    root_folder = folders_chain.shift
-
-    add_breadcrumb root_folder_name, course_material_folder_path(current_course, root_folder)
-    folders_chain.each do |folder|
-      add_breadcrumb folder.name, course_material_folder_path(current_course, folder)
-    end
-  end
-
   def root_folder_name
     component.settings.title || t('course.material.sidebar_title')
   end
diff --git a/app/controllers/course/survey/controller.rb b/app/controllers/course/survey/controller.rb
index 99b9a72c757..a3048ab1d70 100644
--- a/app/controllers/course/survey/controller.rb
+++ b/app/controllers/course/survey/controller.rb
@@ -3,7 +3,6 @@ class Course::Survey::Controller < Course::ComponentController
   include Course::LessonPlan::ActsAsLessonPlanItemConcern
 
   load_and_authorize_resource :survey, through: :course, class: Course::Survey.name
-  add_breadcrumb :index, :course_surveys_path
 
   private
 
diff --git a/app/controllers/course/user_email_subscriptions_controller.rb b/app/controllers/course/user_email_subscriptions_controller.rb
index 4617037074e..2a2fadb66c7 100644
--- a/app/controllers/course/user_email_subscriptions_controller.rb
+++ b/app/controllers/course/user_email_subscriptions_controller.rb
@@ -1,11 +1,7 @@
 # frozen_string_literal: true
 class Course::UserEmailSubscriptionsController < Course::ComponentController
-  include Course::UsersBreadcrumbConcern
-
   load_resource :course_user, through: :course, id_param: :user_id
 
-  before_action :add_breadcrumbs
-
   def edit
     authorize!(:manage, Course::UserEmailUnsubscription.new(course_user: @course_user))
     load_subscription_settings
@@ -24,11 +20,6 @@ def update
 
   private
 
-  def add_breadcrumbs
-    add_breadcrumb @course_user.name, course_user_path(current_course, @course_user)
-    add_breadcrumb :index
-  end
-
   def email_setting_params
     params.require(:user_email_subscriptions).permit(:component, :course_assessment_category_id, :setting)
   end
diff --git a/app/controllers/course/user_invitations_controller.rb b/app/controllers/course/user_invitations_controller.rb
index 095a03f553e..9228b3c6a54 100644
--- a/app/controllers/course/user_invitations_controller.rb
+++ b/app/controllers/course/user_invitations_controller.rb
@@ -3,7 +3,6 @@ class Course::UserInvitationsController < Course::ComponentController
   before_action :authorize_invitation!
   load_resource :invitation, through: :course, class: Course::UserInvitation, parent: false,
                              only: :destroy
-  add_breadcrumb :index, :course_users_students_path
 
   def index
     respond_to do |format|
diff --git a/app/controllers/course/users_controller.rb b/app/controllers/course/users_controller.rb
index 35424d7fa92..32b8bd22740 100644
--- a/app/controllers/course/users_controller.rb
+++ b/app/controllers/course/users_controller.rb
@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 class Course::UsersController < Course::ComponentController
-  include Course::UsersBreadcrumbConcern
   include Course::UsersControllerManagementConcern
 
   before_action :load_resource
diff --git a/app/controllers/course/video/controller.rb b/app/controllers/course/video/controller.rb
index 7884b27c243..cc129ea8c1d 100644
--- a/app/controllers/course/video/controller.rb
+++ b/app/controllers/course/video/controller.rb
@@ -3,7 +3,6 @@ class Course::Video::Controller < Course::ComponentController
   include Course::LessonPlan::ActsAsLessonPlanItemConcern
 
   load_and_authorize_resource :video, through: :course, class: Course::Video.name
-  before_action :add_videos_breadcrumb
 
   private
 
@@ -11,19 +10,6 @@ def current_tab
     raise NotImplementedError
   end
 
-  def add_videos_breadcrumb
-    add_breadcrumb @settings.title || t('breadcrumbs.course.video.videos.index'),
-                   :course_videos_path
-
-    add_tabs_breadcrumb
-  end
-
-  def add_tabs_breadcrumb
-    return if current_course.video_tabs.count == 1 || current_tab.blank?
-
-    add_breadcrumb current_tab.title, course_videos_path(current_course, tab: current_tab)
-  end
-
   # @return [Course::Video Component] The video component.
   # @return [nil] If video component is disabled.
   def component
diff --git a/app/controllers/course/video/submission/controller.rb b/app/controllers/course/video/submission/controller.rb
index 7ecffd8c17d..183da0ec6b5 100644
--- a/app/controllers/course/video/submission/controller.rb
+++ b/app/controllers/course/video/submission/controller.rb
@@ -1,11 +1,4 @@
 # frozen_string_literal: true
 class Course::Video::Submission::Controller < Course::Video::Controller
   load_and_authorize_resource :submission, class: Course::Video::Submission.name, through: :video
-  before_action :add_video_breadcrumb
-
-  protected
-
-  def add_video_breadcrumb
-    add_breadcrumb(@video.title, course_video_path(current_course, @video))
-  end
 end
diff --git a/app/controllers/course/video/submission/submissions_controller.rb b/app/controllers/course/video/submission/submissions_controller.rb
index e768dfcbe7a..1c1798c48dc 100644
--- a/app/controllers/course/video/submission/submissions_controller.rb
+++ b/app/controllers/course/video/submission/submissions_controller.rb
@@ -6,9 +6,7 @@ class Course::Video::Submission::SubmissionsController < Course::Video::Submissi
 
   def index
     respond_to do |format|
-      format.html do
-        add_breadcrumb t('.submissions')
-      end
+      format.html
       format.json do
         @submissions = @submissions.includes([{ experience_points_record: :course_user }, :statistic])
         @my_students = current_course_user.try(:my_students) || []
diff --git a/app/controllers/course/video/videos_controller.rb b/app/controllers/course/video/videos_controller.rb
index 0f84393416b..83a77598111 100644
--- a/app/controllers/course/video/videos_controller.rb
+++ b/app/controllers/course/video/videos_controller.rb
@@ -26,10 +26,7 @@ def index
 
   def show
     respond_to do |format|
-      format.html do
-        add_breadcrumb @video.title
-        render 'index'
-      end
+      format.html { render 'index' }
       format.json { render 'show' }
     end
   end
diff --git a/app/controllers/course/video_submissions_controller.rb b/app/controllers/course/video_submissions_controller.rb
index 0238c691b6b..1fc571faed4 100644
--- a/app/controllers/course/video_submissions_controller.rb
+++ b/app/controllers/course/video_submissions_controller.rb
@@ -1,11 +1,8 @@
 # frozen_string_literal: true
 class Course::VideoSubmissionsController < Course::ComponentController
-  include Course::UsersBreadcrumbConcern
-
   load_resource :course_user, through: :course, id_param: :user_id
   before_action :authorize_analyze_video!
   before_action :load_video_submissions
-  before_action :add_breadcrumbs
 
   def index
     @videos = @course.videos.ordered_by_date_and_title
@@ -16,11 +13,6 @@ def index
 
   private
 
-  def add_breadcrumbs
-    add_breadcrumb @course_user.name, course_user_path(current_course, @course_user)
-    add_breadcrumb :index
-  end
-
   # @return [Course::VideosComponent]
   # @return [nil] If component is disabled.
   def component
diff --git a/app/controllers/instance_user_role_requests_controller.rb b/app/controllers/instance_user_role_requests_controller.rb
index 5f60872112f..12ed48e9ec3 100644
--- a/app/controllers/instance_user_role_requests_controller.rb
+++ b/app/controllers/instance_user_role_requests_controller.rb
@@ -3,8 +3,6 @@ class InstanceUserRoleRequestsController < ApplicationController
   load_and_authorize_resource :user_role_request, through: :current_tenant, parent: false,
                                                   class: ::Instance::UserRoleRequest.name
   def index
-    add_breadcrumb current_tenant.name, :admin_instance_admin_path
-    add_breadcrumb :index, :instance_user_role_requests_path
     @user_role_requests = @user_role_requests.includes(:confirmer, :user)
 
     respond_to do |format|
diff --git a/app/controllers/system/admin/announcements_controller.rb b/app/controllers/system/admin/announcements_controller.rb
index 5225a156a88..078a37a92a0 100644
--- a/app/controllers/system/admin/announcements_controller.rb
+++ b/app/controllers/system/admin/announcements_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class System::Admin::AnnouncementsController < System::Admin::Controller
   load_and_authorize_resource :announcement, class: System::Announcement.name
-  add_breadcrumb :index, :admin_announcements_path
 
   def index
     respond_to do |format|
@@ -14,7 +13,7 @@ def index
 
   def create
     if @announcement.save
-      render partial: 'announcements/announcement_list_data',
+      render partial: 'announcements/announcement_data',
              locals: { announcement: @announcement },
              status: :ok
     else
@@ -24,7 +23,7 @@ def create
 
   def update
     if @announcement.update(announcement_params)
-      render partial: 'announcements/announcement_list_data',
+      render partial: 'announcements/announcement_data',
              locals: { announcement: @announcement.reload },
              status: :ok
     else
diff --git a/app/controllers/system/admin/controller.rb b/app/controllers/system/admin/controller.rb
index 4b1e25769be..09434f1e216 100644
--- a/app/controllers/system/admin/controller.rb
+++ b/app/controllers/system/admin/controller.rb
@@ -7,6 +7,4 @@ class System::Admin::Controller < ApplicationController
   def authorize_admin
     authorize!(:manage, :all)
   end
-
-  add_breadcrumb :index, :admin_path
 end
diff --git a/app/controllers/system/admin/courses_controller.rb b/app/controllers/system/admin/courses_controller.rb
index af23aa1ed87..8686d87a424 100644
--- a/app/controllers/system/admin/courses_controller.rb
+++ b/app/controllers/system/admin/courses_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class System::Admin::CoursesController < System::Admin::Controller
   around_action :unscope_resources
-  add_breadcrumb :index, :admin_courses_path
 
   def index
     respond_to do |format|
diff --git a/app/controllers/system/admin/instance/announcements_controller.rb b/app/controllers/system/admin/instance/announcements_controller.rb
index 16319f1766f..f1451240c6a 100644
--- a/app/controllers/system/admin/instance/announcements_controller.rb
+++ b/app/controllers/system/admin/instance/announcements_controller.rb
@@ -2,7 +2,6 @@
 class System::Admin::Instance::AnnouncementsController < System::Admin::Instance::Controller
   load_and_authorize_resource :announcement, through: :current_tenant, parent: false,
                                              class: ::Instance::Announcement.name
-  add_breadcrumb :index, :admin_instance_announcements_path
 
   def index
     respond_to do |format|
@@ -15,7 +14,7 @@ def index
 
   def create
     if @announcement.save
-      render partial: 'announcements/announcement_list_data',
+      render partial: 'announcements/announcement_data',
              locals: { announcement: @announcement },
              status: :ok
     else
@@ -25,7 +24,7 @@ def create
 
   def update
     if @announcement.update(announcement_params)
-      render partial: 'announcements/announcement_list_data',
+      render partial: 'announcements/announcement_data',
              locals: { announcement: @announcement.reload },
              status: :ok
     else
diff --git a/app/controllers/system/admin/instance/components_controller.rb b/app/controllers/system/admin/instance/components_controller.rb
index 339ae66f203..e74373cc11d 100644
--- a/app/controllers/system/admin/instance/components_controller.rb
+++ b/app/controllers/system/admin/instance/components_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class System::Admin::Instance::ComponentsController < System::Admin::Instance::Controller
   before_action :settings
-  add_breadcrumb :edit, :admin_instance_components_path
 
   def index
     respond_to do |format|
diff --git a/app/controllers/system/admin/instance/controller.rb b/app/controllers/system/admin/instance/controller.rb
index df0fd3b6ecd..024f11e4aa8 100644
--- a/app/controllers/system/admin/instance/controller.rb
+++ b/app/controllers/system/admin/instance/controller.rb
@@ -2,7 +2,6 @@
 class System::Admin::Instance::Controller < ApplicationController
   before_action :load_instance
   before_action :authorize_instance_admin
-  before_action :add_instance_breadcrumb
 
   private
 
@@ -13,8 +12,4 @@ def load_instance
   def authorize_instance_admin
     authorize!(:show, @instance)
   end
-
-  def add_instance_breadcrumb
-    add_breadcrumb @instance.name, :admin_instance_admin_path
-  end
 end
diff --git a/app/controllers/system/admin/instance/courses_controller.rb b/app/controllers/system/admin/instance/courses_controller.rb
index 471d13dfeab..e395a57e646 100644
--- a/app/controllers/system/admin/instance/courses_controller.rb
+++ b/app/controllers/system/admin/instance/courses_controller.rb
@@ -2,8 +2,6 @@
 class System::Admin::Instance::CoursesController < System::Admin::Instance::Controller
   load_and_authorize_resource :course, through: :instance
 
-  add_breadcrumb :index, :admin_instance_courses_path
-
   def index
     respond_to do |format|
       format.html { render 'system/admin/instance/admin/index' }
diff --git a/app/controllers/system/admin/instance/user_invitations_controller.rb b/app/controllers/system/admin/instance/user_invitations_controller.rb
index e70d493184a..61c67acf60b 100644
--- a/app/controllers/system/admin/instance/user_invitations_controller.rb
+++ b/app/controllers/system/admin/instance/user_invitations_controller.rb
@@ -3,7 +3,6 @@ class System::Admin::Instance::UserInvitationsController < System::Admin::Instan
   load_and_authorize_resource :instance_user, class: InstanceUser.name,
                                               parent: false,
                                               except: [:new, :create, :destroy]
-  add_breadcrumb :index, :admin_instance_users_path
 
   def index
     @invitations = @instance.invitations.order(name: :asc)
diff --git a/app/controllers/system/admin/instance/users_controller.rb b/app/controllers/system/admin/instance/users_controller.rb
index 644b9a6e7a3..82700ea812c 100644
--- a/app/controllers/system/admin/instance/users_controller.rb
+++ b/app/controllers/system/admin/instance/users_controller.rb
@@ -2,7 +2,6 @@
 class System::Admin::Instance::UsersController < System::Admin::Instance::Controller
   load_and_authorize_resource :instance_user, class: InstanceUser.name,
                                               parent: false, except: [:index]
-  add_breadcrumb :index, :admin_instance_users_path
 
   def index
     respond_to do |format|
diff --git a/app/controllers/system/admin/instances_controller.rb b/app/controllers/system/admin/instances_controller.rb
index 6e57a5de3be..6541a0d355e 100644
--- a/app/controllers/system/admin/instances_controller.rb
+++ b/app/controllers/system/admin/instances_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class System::Admin::InstancesController < System::Admin::Controller
   load_and_authorize_resource :instance, class: ::Instance.name
-  add_breadcrumb :index, :admin_instances_path
 
   def index
     respond_to do |format|
diff --git a/app/controllers/system/admin/users_controller.rb b/app/controllers/system/admin/users_controller.rb
index 37f855c9530..13eec4aaa22 100644
--- a/app/controllers/system/admin/users_controller.rb
+++ b/app/controllers/system/admin/users_controller.rb
@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 class System::Admin::UsersController < System::Admin::Controller
   load_and_authorize_resource :user, class: User.name
-  add_breadcrumb :index, :admin_users_path
 
   def index
     respond_to do |format|
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 1f886af09e5..ccd79bdb51f 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -11,7 +11,6 @@ module ApplicationHelper
   include ApplicationNotificationsHelper
 
   include ApplicationFormattersHelper
-  include ApplicationSidebarHelper
   include RouteOverridesHelper
   include FormForWithResourceHelper
   include RenderWithinLayoutHelper
diff --git a/app/helpers/application_sidebar_helper.rb b/app/helpers/application_sidebar_helper.rb
deleted file mode 100644
index f05227d38c8..00000000000
--- a/app/helpers/application_sidebar_helper.rb
+++ /dev/null
@@ -1,63 +0,0 @@
-# frozen_string_literal: true
-# Helpers for displaying sidebars in pages.
-module ApplicationSidebarHelper
-  # Checks if the current page has a sidebar.
-  #
-  # @return [Boolean] True if there is a sidebar for the current page.
-  def sidebar?
-    content_for?(:layout_sidebar)
-  end
-
-  # Sets the current page to have a sidebar.
-  #
-  # The view must still render the sidebar in its content area.
-  def sidebar!
-    content_for(:layout_sidebar) do
-      'true'
-    end
-  end
-
-  # Defines the sidebar for the current page.
-  #
-  # @param [Array<String>] classes An array of classes to apply to the sidebar container.
-  # @return [String] The buffer containing the markup for the sidebar.
-  def sidebar(classes: ['col-lg-2', 'col-md-3', 'col-sm-4'], &block)
-    sidebar!
-
-    render layout: 'layouts/sidebar', locals: { sidebar_classes: classes }, &block
-  end
-
-  # Display the given sidebar items.
-  #
-  # @param [Array] items An array of sidebar items to be displayed.
-  # @param [Array<String>] classes An array of classes to apply to the sidebar items container.
-  # @return [String] The HTML string which will display the sidebar items.
-  def sidebar_items(items, classes: ['nav', 'nav-pills', 'nav-stacked'])
-    sidebar!
-
-    links = items.map { |item| link_to_sidebar_item(item) }
-    content_tag(:ul, class: classes) do
-      links.map { |link| concat(content_tag(:li, link)) }
-    end
-  end
-
-  # Generates the link to the given sidebar item.
-  #
-  # @param item The sidebar item.
-  # @return [String] The HTML string which will display the link.
-  def link_to_sidebar_item(item)
-    link_to(item[:path]) do
-      concat(
-        content_tag(:span, class: ['nav-icons']) do
-          fa_icon item[:icon]
-        end
-      )
-      concat(item[:title])
-      concat(
-        content_tag(:span, class: ['unread']) do
-          badge(item[:unread]) if item[:unread] && item[:unread] > 0
-        end
-      )
-    end
-  end
-end
diff --git a/app/helpers/application_theming_helper.rb b/app/helpers/application_theming_helper.rb
index 728668a65be..80f0e1b9c21 100644
--- a/app/helpers/application_theming_helper.rb
+++ b/app/helpers/application_theming_helper.rb
@@ -4,11 +4,25 @@ def application_resources
     # Used to include external javascript/css files, Currently it's empty
   end
 
+  # TODO: Remove this once fully SPA
   def page_class
     return nil if content_for?(:page_class_specified)
 
     page_class = super
     content_for(:page_class_specified) { page_class }
-    page_class
+    @page_class = page_class
+  end
+
+  # TODO: Remove this once fully SPA
+  def rails_page?
+    class_identifier = page_class.split.first
+
+    [
+      'high-voltage-pages',
+      'user-sessions',
+      'user-registrations',
+      'devise-passwords',
+      'devise-confirmations'
+    ].include? class_identifier
   end
 end
diff --git a/app/helpers/course/controller_helper.rb b/app/helpers/course/controller_helper.rb
index c9c87e0b929..007bc6341b2 100644
--- a/app/helpers/course/controller_helper.rb
+++ b/app/helpers/course/controller_helper.rb
@@ -64,30 +64,10 @@ def link_to_user(user, options = {}, &block)
     end
   end
 
-  # Display the course_user_badge given the course_user
-  #
-  # @param [CourseUser] course_user The CourseUser for which the badge is to be displayed
-  # @return [String] HTML string to render the course_user_badge
-  def display_course_user_badge(course_user)
-    render partial: 'layouts/course_user_badge',
-           locals: { course_user: course_user }
-  end
-
   def url_to_course_logo(course)
     asset_url(course_logo_local_url(course))
   end
 
-  # Helper method to display the course logo. If logo is present, returns the medium version
-  # of the logo (see ImageUploader for more versions). Otherwise, returns the default course
-  # logo.
-  #
-  # @return [String] HTML string to render the course logo
-  def display_course_logo(course)
-    content_tag(:span, class: ['image']) do
-      image_tag(course_logo_local_url(course))
-    end
-  end
-
   def url_to_material(course, folder, material)
     course_material_folder_material_path(course, folder, material)
   end
diff --git a/app/themes/default/assets/stylesheets/default/all.scss.erb b/app/themes/default/assets/stylesheets/default/all.scss.erb
index 49c30ff88b3..36b330cdb5e 100644
--- a/app/themes/default/assets/stylesheets/default/all.scss.erb
+++ b/app/themes/default/assets/stylesheets/default/all.scss.erb
@@ -3,7 +3,8 @@
 // they'll appear at the top of the compiled file, but it's generally better to create a new file
 // per style scope.
 //
-@import 'default/layout';
+@import 'application';
+@import 'pygments-css/github';
 <%
 # Import the rest of the files; @import '**/*' will include application.scss multiple times.
 # This is not perfect because every time a new file is added all assets need to be cleaned for the
diff --git a/app/themes/default/assets/stylesheets/default/layout.scss b/app/themes/default/assets/stylesheets/default/layout.scss
deleted file mode 100644
index 96050ae086d..00000000000
--- a/app/themes/default/assets/stylesheets/default/layout.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'application';
-@import 'pygments-css/github';
-
-body {
-  padding-top: $navbar-height + $navbar-margin-bottom;
-}
-
-.navbar {
-  .courses-menu {
-    max-height: 70vh;
-    overflow-y: scroll;
-  }
-}
diff --git a/app/themes/default/views/layouts/default.html.slim b/app/themes/default/views/layouts/default.html.slim
index 93651dbb6b2..de90559f80e 100644
--- a/app/themes/default/views/layouts/default.html.slim
+++ b/app/themes/default/views/layouts/default.html.slim
@@ -4,6 +4,7 @@ html
     title
       = page_title
     meta http-equiv="X-UA-Compatible" content="IE=edge"
+    meta name="status" content=response.status
     = server_context_meta_tag
     = viewport_meta_tag
     = application_resources
@@ -15,9 +16,13 @@ html
     = render 'layouts/favicon'
 
   body
-    = render 'layouts/topbar'
-    div#root.container-fluid
-      = global_announcements
-      = flash_messages
-      div class=page_class
+    - if rails_page?
+      = render 'layouts/topbar'
+      div#root.container-fluid
+        = global_announcements
+        = flash_messages
+        div class=@page_class
+          = yield
+    - else
+      div#root
         = yield
diff --git a/app/views/announcements/_announcement_data.json.jbuilder b/app/views/announcements/_announcement_data.json.jbuilder
new file mode 100644
index 00000000000..c66b45c08dd
--- /dev/null
+++ b/app/views/announcements/_announcement_data.json.jbuilder
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+json.partial! 'announcements/announcement_list_data', announcement: announcement
+
+json.endTime announcement.end_at
+
+user_or_course_user = local_assigns[:course_user] || announcement.creator
+
+json.creator do
+  json.id user_or_course_user.id
+  json.name user_or_course_user.name
+  json.userUrl url_to_user_or_course_user(@course, user_or_course_user)
+end
+
+json.isUnread !user_signed_in? || announcement.unread?(current_user)
+json.isSticky announcement.sticky?
+json.isCurrentlyActive announcement.currently_active?
+
+json.permissions do
+  json.canEdit can?(:edit, announcement)
+  json.canDelete can?(:destroy, announcement)
+end
diff --git a/app/views/announcements/_announcement_list_data.json.jbuilder b/app/views/announcements/_announcement_list_data.json.jbuilder
index c9d51010c52..71a3a373656 100644
--- a/app/views/announcements/_announcement_list_data.json.jbuilder
+++ b/app/views/announcements/_announcement_list_data.json.jbuilder
@@ -1,24 +1,6 @@
 # frozen_string_literal: true
-
 json.id announcement.id
 json.title announcement.title
 json.content format_ckeditor_rich_text(announcement.content)
 json.startTime announcement.start_at
-json.endTime announcement.end_at
-
-user_or_course_user = local_assigns[:course_user] || announcement.creator
-
-json.creator do
-  json.id user_or_course_user.id
-  json.name user_or_course_user.name
-  json.userUrl url_to_user_or_course_user(@course, user_or_course_user)
-end
-
-json.isUnread announcement.unread?(current_user)
-json.isSticky announcement.sticky?
-json.isCurrentlyActive announcement.currently_active?
-
-json.permissions do
-  json.canEdit can?(:edit, announcement)
-  json.canDelete can?(:destroy, announcement)
-end
+json.markAsReadUrl announcement_mark_as_read_path(announcement)
diff --git a/app/views/announcements/index.json.jbuilder b/app/views/announcements/index.json.jbuilder
index 8d026835448..98e8c837a18 100644
--- a/app/views/announcements/index.json.jbuilder
+++ b/app/views/announcements/index.json.jbuilder
@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 json.announcements @announcements do |announcement|
-  json.partial! 'announcements/announcement_list_data', announcement: announcement
+  json.partial! 'announcements/announcement_data', announcement: announcement
 end
diff --git a/app/views/course/admin/sidebar_settings/edit.json.jbuilder b/app/views/course/admin/sidebar_settings/edit.json.jbuilder
index 8721df2fcd0..bfdcd9cd1f3 100644
--- a/app/views/course/admin/sidebar_settings/edit.json.jbuilder
+++ b/app/views/course/admin/sidebar_settings/edit.json.jbuilder
@@ -5,5 +5,5 @@ json.array! sorted_sidebar_items do |item|
   json.id item.id
   json.title item.title
   json.weight item.weight
-  json.iconClassName "fa fa-#{item.icon}"
+  json.icon item.icon
 end
diff --git a/app/views/course/announcements/index.json.jbuilder b/app/views/course/announcements/index.json.jbuilder
index 0cb679597ae..fd92396add7 100644
--- a/app/views/course/announcements/index.json.jbuilder
+++ b/app/views/course/announcements/index.json.jbuilder
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 json.announcements @announcements do |announcement|
-  json.partial! 'announcements/announcement_list_data',
+  json.partial! 'announcements/announcement_data',
                 announcement: announcement,
                 course_user: @course_users_hash[announcement.creator_id]
 end
diff --git a/app/views/course/assessment/assessments/_achievement_badges.json.jbuilder b/app/views/course/assessment/assessments/_achievement_badges.json.jbuilder
new file mode 100644
index 00000000000..d564a6609c0
--- /dev/null
+++ b/app/views/course/assessment/assessments/_achievement_badges.json.jbuilder
@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+json.array! achievements do |achievement|
+  json.url course_achievement_path(course, achievement)
+  json.badgeUrl achievement_badge_path(achievement)
+  json.title achievement.title
+end
diff --git a/app/views/course/assessment/assessments/authenticate.json.jbuilder b/app/views/course/assessment/assessments/authenticate.json.jbuilder
index 9a878a3df1a..cc3b172cc33 100644
--- a/app/views/course/assessment/assessments/authenticate.json.jbuilder
+++ b/app/views/course/assessment/assessments/authenticate.json.jbuilder
@@ -1,6 +1,9 @@
 # frozen_string_literal: true
 
 json.id @assessment.id
+json.title @assessment.title
+json.tabTitle "#{@category.title}: #{@tab.title}"
+json.tabUrl course_assessments_path(course_id: current_course, category: @category, tab: @tab)
 json.isAuthenticated false
 json.isStartTimeBegin !assessment_not_started(@assessment_time)
 json.startAt @assessment_time.start_at
diff --git a/app/views/course/assessment/assessments/edit.html.slim b/app/views/course/assessment/assessments/edit.html.slim
index 52da0dce0a4..a777c8100dc 100644
--- a/app/views/course/assessment/assessments/edit.html.slim
+++ b/app/views/course/assessment/assessments/edit.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb format_inline_text(@assessment.title)
 div#app-root
diff --git a/app/views/course/assessment/assessments/index.json.jbuilder b/app/views/course/assessment/assessments/index.json.jbuilder
index fe55c1e24c1..f6afc62cf6d 100644
--- a/app/views/course/assessment/assessments/index.json.jbuilder
+++ b/app/views/course/assessment/assessments/index.json.jbuilder
@@ -23,6 +23,8 @@ json.display do
   end
 
   json.tabId @tab.id
+  json.tabTitle "#{@category.title}: #{@tab.title}"
+  json.tabUrl course_assessments_path(course_id: current_course, category: @category, tab: @tab)
 end
 
 json.assessments @assessments do |assessment|
@@ -48,10 +50,8 @@ json.assessments @assessments do |assessment|
     achievement_conditionals = @conditional_service.achievement_conditional_for(assessment)
 
     top_conditionals = achievement_conditionals.first(3)
-    json.topConditionals top_conditionals do |achievement|
-      json.url course_achievement_path(current_course, achievement)
-      json.badgeUrl achievement_badge_path(achievement)
-      json.title achievement.title
+    json.topConditionals do
+      json.partial! 'achievement_badges', achievements: top_conditionals, course: current_course
     end
 
     conditionals_count = achievement_conditionals.size
diff --git a/app/views/course/assessment/assessments/monitoring.html.slim b/app/views/course/assessment/assessments/monitoring.html.slim
index acf71641a32..a777c8100dc 100644
--- a/app/views/course/assessment/assessments/monitoring.html.slim
+++ b/app/views/course/assessment/assessments/monitoring.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb @assessment.title, course_assessment_path(current_course, @assessment)
-- add_breadcrumb I18n.t('layouts.monitoring.pulsegrid')
-div#app-root.dangerously-fit-height-to-viewport
+div#app-root
diff --git a/app/views/course/assessment/assessments/show.html.slim b/app/views/course/assessment/assessments/show.html.slim
index 9e824575343..72c4657f683 100644
--- a/app/views/course/assessment/assessments/show.html.slim
+++ b/app/views/course/assessment/assessments/show.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb format_inline_text(@assessment.title)
 / Randomized Assessment is temporarily hidden (PR#5406)
 / - if @assessment.randomization.present?
 /   = render 'assessment_question_bundle_buttons', assessment: @assessment
diff --git a/app/views/course/assessment/assessments/show.json.jbuilder b/app/views/course/assessment/assessments/show.json.jbuilder
index c25dafba1b3..c724cdb987b 100644
--- a/app/views/course/assessment/assessments/show.json.jbuilder
+++ b/app/views/course/assessment/assessments/show.json.jbuilder
@@ -12,6 +12,8 @@ can_manage = can?(:manage, assessment)
 
 json.id assessment.id
 json.title assessment.title
+json.tabTitle "#{@category.title}: #{@tab.title}"
+json.tabUrl course_assessments_path(course_id: current_course, category: @category, tab: @tab)
 json.description assessment.description unless @assessment.description.blank?
 json.autograded assessment.autograded?
 json.hasTodo assessment.has_todo if can_manage
diff --git a/app/views/course/assessment/assessments/statistics.html.slim b/app/views/course/assessment/assessments/statistics.html.slim
index 91901776da6..a777c8100dc 100644
--- a/app/views/course/assessment/assessments/statistics.html.slim
+++ b/app/views/course/assessment/assessments/statistics.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb format_inline_text(@assessment.title)
-
 div#app-root
diff --git a/app/views/course/assessment/question/forum_post_responses/edit.html.slim b/app/views/course/assessment/question/forum_post_responses/edit.html.slim
index 9d86c9e24b2..a777c8100dc 100644
--- a/app/views/course/assessment/question/forum_post_responses/edit.html.slim
+++ b/app/views/course/assessment/question/forum_post_responses/edit.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb format_inline_text(@question_assessment.display_title)
 div#app-root
diff --git a/app/views/course/assessment/question/forum_post_responses/new.html.slim b/app/views/course/assessment/question/forum_post_responses/new.html.slim
index bdb6d2d746b..a777c8100dc 100644
--- a/app/views/course/assessment/question/forum_post_responses/new.html.slim
+++ b/app/views/course/assessment/question/forum_post_responses/new.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb t('.header')
 div#app-root
diff --git a/app/views/course/assessment/question/multiple_responses/edit.html.slim b/app/views/course/assessment/question/multiple_responses/edit.html.slim
index 9d86c9e24b2..a777c8100dc 100644
--- a/app/views/course/assessment/question/multiple_responses/edit.html.slim
+++ b/app/views/course/assessment/question/multiple_responses/edit.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb format_inline_text(@question_assessment.display_title)
 div#app-root
diff --git a/app/views/course/assessment/question/multiple_responses/new.html.slim b/app/views/course/assessment/question/multiple_responses/new.html.slim
index a70d638c029..a777c8100dc 100644
--- a/app/views/course/assessment/question/multiple_responses/new.html.slim
+++ b/app/views/course/assessment/question/multiple_responses/new.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb @multiple_response_question.multiple_choice? ? t('.multiple_choice_header') : t('.multiple_response_header')
 div#app-root
diff --git a/app/views/course/assessment/question/programming/edit.html.slim b/app/views/course/assessment/question/programming/edit.html.slim
index 9d86c9e24b2..a777c8100dc 100644
--- a/app/views/course/assessment/question/programming/edit.html.slim
+++ b/app/views/course/assessment/question/programming/edit.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb format_inline_text(@question_assessment.display_title)
 div#app-root
diff --git a/app/views/course/assessment/question/programming/new.html.slim b/app/views/course/assessment/question/programming/new.html.slim
index 5128d0f4143..a777c8100dc 100644
--- a/app/views/course/assessment/question/programming/new.html.slim
+++ b/app/views/course/assessment/question/programming/new.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb :new
 div#app-root
diff --git a/app/views/course/assessment/question/scribing/edit.html.slim b/app/views/course/assessment/question/scribing/edit.html.slim
index f07615f8b52..a777c8100dc 100644
--- a/app/views/course/assessment/question/scribing/edit.html.slim
+++ b/app/views/course/assessment/question/scribing/edit.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb format_inline_text(@question_assessment.display_title)
-= page_header format_inline_text(@question_assessment.display_title)
 div#app-root
diff --git a/app/views/course/assessment/question/scribing/new.html.slim b/app/views/course/assessment/question/scribing/new.html.slim
index 10f2918fc1a..a777c8100dc 100644
--- a/app/views/course/assessment/question/scribing/new.html.slim
+++ b/app/views/course/assessment/question/scribing/new.html.slim
@@ -1,4 +1 @@
-- add_breadcrumb :new
-- template = 'course/assessment/question/scribing/scribing_question.json.jbuilder'
-= page_header
 div#app-root
diff --git a/app/views/course/assessment/question/text_responses/edit.html.slim b/app/views/course/assessment/question/text_responses/edit.html.slim
index 9d86c9e24b2..a777c8100dc 100644
--- a/app/views/course/assessment/question/text_responses/edit.html.slim
+++ b/app/views/course/assessment/question/text_responses/edit.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb format_inline_text(@question_assessment.display_title)
 div#app-root
diff --git a/app/views/course/assessment/question/text_responses/new.html.slim b/app/views/course/assessment/question/text_responses/new.html.slim
index e8369f6d9db..a777c8100dc 100644
--- a/app/views/course/assessment/question/text_responses/new.html.slim
+++ b/app/views/course/assessment/question/text_responses/new.html.slim
@@ -1,7 +1 @@
-- if @text_response_question.file_upload_question?
-  - add_breadcrumb t('.file_upload')
-- elsif @text_response_question.comprehension_question?
-  - add_breadcrumb t('.comprehension')
-- else
-  - add_breadcrumb t('.text_response')
 div#app-root
diff --git a/app/views/course/assessment/question/voice_responses/edit.html.slim b/app/views/course/assessment/question/voice_responses/edit.html.slim
index 9d86c9e24b2..a777c8100dc 100644
--- a/app/views/course/assessment/question/voice_responses/edit.html.slim
+++ b/app/views/course/assessment/question/voice_responses/edit.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb format_inline_text(@question_assessment.display_title)
 div#app-root
diff --git a/app/views/course/assessment/question/voice_responses/new.html.slim b/app/views/course/assessment/question/voice_responses/new.html.slim
index 23ca4c33d71..a777c8100dc 100644
--- a/app/views/course/assessment/question/voice_responses/new.html.slim
+++ b/app/views/course/assessment/question/voice_responses/new.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb t('.voice_response_header')
 div#app-root
diff --git a/app/views/course/assessment/question_bundle_assignments/edit.html.slim b/app/views/course/assessment/question_bundle_assignments/edit.html.slim
index 67c4b028f10..1664dfc9a42 100644
--- a/app/views/course/assessment/question_bundle_assignments/edit.html.slim
+++ b/app/views/course/assessment/question_bundle_assignments/edit.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb format_inline_text(@question_bundle_assignment.user.name)
 = page_header 'Edit Question Bundle Assignment'
 
 - url = course_assessment_question_bundle_assignment_path(current_course, @assessment, @question_bundle_assignment)
diff --git a/app/views/course/assessment/question_bundle_questions/edit.html.slim b/app/views/course/assessment/question_bundle_questions/edit.html.slim
index bbce538b39d..df420915434 100644
--- a/app/views/course/assessment/question_bundle_questions/edit.html.slim
+++ b/app/views/course/assessment/question_bundle_questions/edit.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb format_inline_text(@question_bundle_question.question.title)
 = page_header 'Edit Question Bundle Question'
 
 = simple_form_for @question_bundle_question,
diff --git a/app/views/course/assessment/question_bundle_questions/new.html.slim b/app/views/course/assessment/question_bundle_questions/new.html.slim
index bd11ce6d097..690f550fc64 100644
--- a/app/views/course/assessment/question_bundle_questions/new.html.slim
+++ b/app/views/course/assessment/question_bundle_questions/new.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb 'New Question Bundle Question'
 = page_header 'New Question Bundle Question'
 
 = simple_form_for @question_bundle_question, url: course_assessment_question_bundle_questions_path(current_course, @assessment) do |f|
diff --git a/app/views/course/assessment/question_bundles/edit.html.slim b/app/views/course/assessment/question_bundles/edit.html.slim
index 548c0d6cd5c..0be90c31b66 100644
--- a/app/views/course/assessment/question_bundles/edit.html.slim
+++ b/app/views/course/assessment/question_bundles/edit.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb format_inline_text(@question_bundle.title)
 = page_header 'Edit Question Bundle'
 
 = simple_form_for @question_bundle,
diff --git a/app/views/course/assessment/question_bundles/new.html.slim b/app/views/course/assessment/question_bundles/new.html.slim
index 1696b3f9194..f9928623c0f 100644
--- a/app/views/course/assessment/question_bundles/new.html.slim
+++ b/app/views/course/assessment/question_bundles/new.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb 'New Question Bundle'
 = page_header 'New Question Bundle'
 
 = simple_form_for @question_bundle, url: course_assessment_question_bundles_path(current_course, @assessment) do |f|
diff --git a/app/views/course/assessment/question_groups/edit.html.slim b/app/views/course/assessment/question_groups/edit.html.slim
index 2ad374292fd..b354f188834 100644
--- a/app/views/course/assessment/question_groups/edit.html.slim
+++ b/app/views/course/assessment/question_groups/edit.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb format_inline_text(@question_group.title)
 = page_header 'Edit Question Group'
 
 = simple_form_for @question_group,
diff --git a/app/views/course/assessment/question_groups/new.html.slim b/app/views/course/assessment/question_groups/new.html.slim
index 363fa0a1d85..57e486fb60b 100644
--- a/app/views/course/assessment/question_groups/new.html.slim
+++ b/app/views/course/assessment/question_groups/new.html.slim
@@ -1,4 +1,3 @@
-- add_breadcrumb 'New Question Group'
 = page_header 'New Question Group'
 
 = simple_form_for @question_group, url: course_assessment_question_groups_path(current_course, @assessment) do |f|
diff --git a/app/views/course/assessment/submission/logs/index.html.slim b/app/views/course/assessment/submission/logs/index.html.slim
index 8a77a8226af..a777c8100dc 100644
--- a/app/views/course/assessment/submission/logs/index.html.slim
+++ b/app/views/course/assessment/submission/logs/index.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb t('.submissions')
-- add_breadcrumb t('.header')
 div#app-root
diff --git a/app/views/course/assessment/submission/submissions/edit.html.slim b/app/views/course/assessment/submission/submissions/edit.html.slim
index 24550ecd8c8..a777c8100dc 100644
--- a/app/views/course/assessment/submission/submissions/edit.html.slim
+++ b/app/views/course/assessment/submission/submissions/edit.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb t('.attempt')
 div#app-root
diff --git a/app/views/course/assessment/submission/submissions/index.html.slim b/app/views/course/assessment/submission/submissions/index.html.slim
index b9e2d6f6f11..a777c8100dc 100644
--- a/app/views/course/assessment/submission/submissions/index.html.slim
+++ b/app/views/course/assessment/submission/submissions/index.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb t('.submissions')
 div#app-root
diff --git a/app/views/course/courses/_course_data.json.jbuilder b/app/views/course/courses/_course_data.json.jbuilder
index 3056778d368..5083d840089 100644
--- a/app/views/course/courses/_course_data.json.jbuilder
+++ b/app/views/course/courses/_course_data.json.jbuilder
@@ -19,7 +19,7 @@ if can?(:manage, current_course) || current_course.user?(current_user)
   # Announcements
   if @currently_active_announcements && !@currently_active_announcements.empty?
     json.currentlyActiveAnnouncements @currently_active_announcements do |announcement|
-      json.partial! 'announcements/announcement_list_data', announcement: announcement
+      json.partial! 'announcements/announcement_data', announcement: announcement
     end
   else
     json.currentlyActiveAnnouncements nil
diff --git a/app/views/course/courses/_course_list_data.json.jbuilder b/app/views/course/courses/_course_list_data.json.jbuilder
index 1759132aca5..064096f615a 100644
--- a/app/views/course/courses/_course_list_data.json.jbuilder
+++ b/app/views/course/courses/_course_list_data.json.jbuilder
@@ -3,5 +3,5 @@
 json.id course.id
 json.title course.title
 json.description format_ckeditor_rich_text(course.description)
-json.logoUrl display_course_logo(course)
+json.logoUrl url_to_course_logo(course)
 json.startAt course.start_at
diff --git a/app/views/course/courses/_course_user_progress.json.jbuilder b/app/views/course/courses/_course_user_progress.json.jbuilder
new file mode 100644
index 00000000000..a0731445411
--- /dev/null
+++ b/app/views/course/courses/_course_user_progress.json.jbuilder
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+levels_enabled = !current_component_host[:course_levels_component].nil?
+achievements_enabled = !current_component_host[:course_achievements_component].nil?
+
+if levels_enabled
+  json.level course_user.level_number
+  json.nextLevelPercentage course_user.level_progress_percentage
+
+  experience_points = course_user.experience_points
+  json.exp experience_points
+
+  next_threshold = course_user.next_level_threshold
+  difference = next_threshold - experience_points
+  json.nextLevelExpDelta difference > 0 ? difference : 'max'
+end
+
+if achievements_enabled
+  recent_achievements = course_user.achievements.recently_obtained(5)
+
+  json.recentAchievements do
+    json.partial! 'course/assessment/assessments/achievement_badges',
+                  achievements: recent_achievements,
+                  course: course_user.course
+  end
+
+  json.remainingAchievementsCount course_user.achievement_count - recent_achievements.size
+end
diff --git a/app/views/course/courses/_sidebar_items.json.jbuilder b/app/views/course/courses/_sidebar_items.json.jbuilder
new file mode 100644
index 00000000000..61530207369
--- /dev/null
+++ b/app/views/course/courses/_sidebar_items.json.jbuilder
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+json.array! items do |item|
+  json.key item[:key]
+  json.label item[:title]
+  json.path item[:path]
+  json.icon item[:icon]
+  json.unread item[:unread] if item[:unread]&.nonzero?
+end
diff --git a/app/views/course/courses/sidebar.json.jbuilder b/app/views/course/courses/sidebar.json.jbuilder
new file mode 100644
index 00000000000..c20100fc7ff
--- /dev/null
+++ b/app/views/course/courses/sidebar.json.jbuilder
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+json.courseTitle current_course.title
+json.courseUrl course_path(current_course)
+json.courseLogoUrl url_to_course_logo(current_course)
+json.courseUserUrl url_to_user_or_course_user(current_course, current_course_user)
+json.userName current_user.name
+
+if current_course_user.present? && can?(:read, current_course)
+  json.courseUserName current_course_user.name
+  json.courseUserRole current_course_user.role
+  json.userAvatarUrl user_image(current_course_user.user)
+
+  if can?(:manage, Course::UserEmailUnsubscription.new(course_user: current_course_user))
+    json.manageEmailSubscriptionUrl course_user_manage_email_subscription_path(current_course, current_course_user)
+  end
+
+  if current_course_user.student? && current_course.gamified?
+    json.progress do
+      json.partial! 'course_user_progress', course_user: current_course_user
+    end
+  end
+end
+
+if can?(:read, current_course)
+  json.sidebar do
+    json.partial! 'sidebar_items', items: controller.sidebar_items(type: :normal)
+  end
+
+  unless (admin_sidebar_items = controller.sidebar_items(type: :admin)).empty?
+    json.adminSidebar do
+      json.partial! 'sidebar_items', items: admin_sidebar_items
+    end
+  end
+end
diff --git a/app/views/course/duplications/show.html.slim b/app/views/course/duplications/show.html.slim
index 864b8057d21..a777c8100dc 100644
--- a/app/views/course/duplications/show.html.slim
+++ b/app/views/course/duplications/show.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb :show
-
 div#app-root
diff --git a/app/views/course/enrol_requests/index.html.slim b/app/views/course/enrol_requests/index.html.slim
index 3e304bda465..a777c8100dc 100644
--- a/app/views/course/enrol_requests/index.html.slim
+++ b/app/views/course/enrol_requests/index.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb t('.header')
-
 div#app-root
diff --git a/app/views/course/personal_times/index.html.slim b/app/views/course/personal_times/index.html.slim
index bb12b31a621..a777c8100dc 100644
--- a/app/views/course/personal_times/index.html.slim
+++ b/app/views/course/personal_times/index.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb :index
-
 div#app-root
diff --git a/app/views/course/reference_timelines/index.html.slim b/app/views/course/reference_timelines/index.html.slim
index 31712dfc9ce..a777c8100dc 100644
--- a/app/views/course/reference_timelines/index.html.slim
+++ b/app/views/course/reference_timelines/index.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb I18n.t('layouts.multiple_reference_timelines.timeline_designer')
-div#app-root.dangerously-fit-height-to-viewport
+div#app-root
diff --git a/app/views/course/user_invitations/index.html.slim b/app/views/course/user_invitations/index.html.slim
index bb12b31a621..a777c8100dc 100644
--- a/app/views/course/user_invitations/index.html.slim
+++ b/app/views/course/user_invitations/index.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb :index
-
 div#app-root
diff --git a/app/views/course/user_invitations/new.html.slim b/app/views/course/user_invitations/new.html.slim
index 48c1f09dfab..a777c8100dc 100644
--- a/app/views/course/user_invitations/new.html.slim
+++ b/app/views/course/user_invitations/new.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb :invite, :course_users_students_path
-
 div#app-root
diff --git a/app/views/course/users/index.html.slim b/app/views/course/users/index.html.slim
index bdb6d2d746b..a777c8100dc 100644
--- a/app/views/course/users/index.html.slim
+++ b/app/views/course/users/index.html.slim
@@ -1,2 +1 @@
-- add_breadcrumb t('.header')
 div#app-root
diff --git a/app/views/course/users/staff.html.slim b/app/views/course/users/staff.html.slim
index 2f348baa970..a777c8100dc 100644
--- a/app/views/course/users/staff.html.slim
+++ b/app/views/course/users/staff.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb :staff
-
 div#app-root
diff --git a/app/views/course/users/students.html.slim b/app/views/course/users/students.html.slim
index 91bf5a6ebc1..a777c8100dc 100644
--- a/app/views/course/users/students.html.slim
+++ b/app/views/course/users/students.html.slim
@@ -1,3 +1 @@
-- add_breadcrumb :students
-
 div#app-root
diff --git a/app/views/layouts/_course_user_badge.html.slim b/app/views/layouts/_course_user_badge.html.slim
deleted file mode 100644
index d5daab5abfb..00000000000
--- a/app/views/layouts/_course_user_badge.html.slim
+++ /dev/null
@@ -1,35 +0,0 @@
-- levels_enabled = !current_component_host[:course_levels_component].nil?
-- achievements_enabled = !current_component_host[:course_achievements_component].nil?
-
-- if levels_enabled
-  - level_number = course_user.level_number
-  - percentage = course_user.level_progress_percentage
-  - experience_points = course_user.experience_points
-  - next_threshold = course_user.next_level_threshold
-  - difference = next_threshold - experience_points
-
-  div.col-xs-12#course-badge-level
-    = link_to_course_user(course_user) do
-      span.level = t('.level', level: level_number)
-      span.experience-points = t('.experience_points', exp: experience_points)
-
-    - progress_bar_options = { class: ['progress-bar-info', 'course-user-experience-points'],
-                               tooltip_text: t('common.percentage', percentage: percentage),
-                               tooltip_placement: 'right' }
-    = display_progress_bar(percentage, progress_bar_options)
-    div.next-level.text-center
-      - if difference > 0
-        = t('.next_level', difference: difference)
-      - else
-        = t('.max_level')
-
-- if achievements_enabled
-  div.col-xs-12#course-badge-achievement
-    - course_user.achievements.recently_obtained(3).each do |achievement|
-      = content_tag_for(:span, achievement) do
-        = link_to course_achievement_path(current_course, achievement) do
-          = display_achievement_badge(achievement)
-    - if course_user.achievement_count > 3
-      - difference = course_user.achievement_count - 3
-      = link_to t('.achievements', difference: difference),
-                course_achievements_path(current_course), class: ['achievement-difference']
diff --git a/app/views/layouts/_sidebar.html.slim b/app/views/layouts/_sidebar.html.slim
deleted file mode 100644
index 3046ffd6500..00000000000
--- a/app/views/layouts/_sidebar.html.slim
+++ /dev/null
@@ -1,4 +0,0 @@
-div class=sidebar_classes
-  nav.navbar-default role='navigation'
-    div.sidebar.collapse.navbar-collapse#site-navigation-sidebar
-      = yield
diff --git a/app/views/layouts/course.html.slim b/app/views/layouts/course.html.slim
index 0dc7c80d37e..db67704c57f 100644
--- a/app/views/layouts/course.html.slim
+++ b/app/views/layouts/course.html.slim
@@ -1,38 +1,3 @@
 - layout = controller.parent_layout(of_layout: 'course') || controller.current_layout
 = render within_layout: layout do
-  = render_breadcrumbs
-  div.course-layout data-course-id=current_course.id
-    button.btn.btn-default.collapse#show-sidebar type="button" data-toggle="collapse" data-target="#full-sidebar,#show-sidebar" aria-expanded="false" aria-controls="navbar"
-      = fa_icon 'chevron-right'.freeze
-    aside.collapse.in#full-sidebar
-      div.row
-        div.hidden-xs.text-center#course-sidebar-logo
-          button.btn.btn-default.pull-left#hide-sidebar type="button" data-toggle="collapse" data-target="#full-sidebar,#show-sidebar" aria-expanded="false" aria-controls="navbar"
-            = fa_icon 'chevron-left'.freeze
-          = link_to course_path(current_course) do
-            = display_course_logo(current_course)
-        - if current_course_user.present? && can?(:read, current_course)
-          div.user
-            = display_user_image(current_user)
-            span#user-sidebar
-              span#user-link-sidebar = link_to_user(current_course_user || current_user)
-              - if current_course_user && can?(:manage, Course::UserEmailUnsubscription.new(course_user: current_course_user))
-                span#manage-email-subscription-link-sidebar
-                  = link_to course_user_manage_email_subscription_path(current_course, current_course_user) do
-                    = t('.manage_subscriptions')
-                    = fa_icon 'envelope'.freeze
-            button.btn.btn-default.navbar-toggle.collapsed.pull-right type="button" data-toggle="collapse" data-target="#course-navigation-sidebar" aria-expanded="false" aria-controls="navbar"
-              span.glyphicon.glyphicon-menu-hamburger
-          - if current_course_user.student? && current_course.gamified?
-            = display_course_user_badge(current_course_user)
-      nav.navbar-default role='navigation'
-        - if can?(:read, current_course)
-          div.sidebar.collapse.navbar-collapse#course-navigation-sidebar
-            = sidebar_items(controller.sidebar_items(type: :normal))
-
-            - unless (admin_sidebar_items = controller.sidebar_items(type: :admin)).empty?
-              h4#admin-header-sidebar = t('.administration')
-              = sidebar_items(admin_sidebar_items)
-
-    div.page-content class=page_class
-      = yield
+  div#app-root
diff --git a/app/views/layouts/course_admin.html.slim b/app/views/layouts/course_admin.html.slim
deleted file mode 100644
index ee6857437c9..00000000000
--- a/app/views/layouts/course_admin.html.slim
+++ /dev/null
@@ -1,7 +0,0 @@
-= render within_layout: controller.parent_layout(of_layout: 'course_admin') do
-  = page_header t('.title')
-  = tabs do
-    - controller.sidebar_items(type: :settings).each do |item|
-      = nav_to(item[:title], item[:path])
-  div class=page_class
-    = yield
diff --git a/app/views/pages/home.json.jbuilder b/app/views/pages/home.json.jbuilder
new file mode 100644
index 00000000000..48ba8fcf553
--- /dev/null
+++ b/app/views/pages/home.json.jbuilder
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+if user_signed_in?
+  my_courses = Course.containing_user(current_user).ordered_by_start_at
+  if my_courses.present?
+    json.courses my_courses do |course|
+      json.title course.title
+      json.url course_path(course)
+    end
+  end
+
+  json.user do
+    json.name current_user.name
+    json.url user_path(current_user)
+    json.avatarUrl user_image(current_user)
+    json.role current_user.role
+    json.instanceRole controller.current_instance_user.role
+  end
+
+  json.signOutUrl destroy_user_session_path
+
+  if user_masquerade?
+    json.masqueradeUserName current_user.name
+    json.stopMasqueradingUrl back_masquerade_path(current_user)
+  end
+end
diff --git a/app/views/system/admin/announcements/index.json.jbuilder b/app/views/system/admin/announcements/index.json.jbuilder
index 3f0fc92f0a8..e946b6edf9b 100644
--- a/app/views/system/admin/announcements/index.json.jbuilder
+++ b/app/views/system/admin/announcements/index.json.jbuilder
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 json.announcements @announcements do |announcement|
-  json.partial! 'announcements/announcement_list_data', announcement: announcement
+  json.partial! 'announcements/announcement_data', announcement: announcement
 end
 
 json.permissions do
diff --git a/app/views/system/admin/instance/announcements/index.json.jbuilder b/app/views/system/admin/instance/announcements/index.json.jbuilder
index 08ce29813c7..f6d2298a867 100644
--- a/app/views/system/admin/instance/announcements/index.json.jbuilder
+++ b/app/views/system/admin/instance/announcements/index.json.jbuilder
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 json.announcements @announcements do |announcement|
-  json.partial! 'announcements/announcement_list_data', announcement: announcement
+  json.partial! 'announcements/announcement_data', announcement: announcement
 end
 
 json.permissions do
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index cb256ea0b3e..36bd671b604 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -110,7 +110,7 @@ module.exports = {
       },
     ],
     'import/no-extraneous-dependencies': ['warn', { devDependencies: true }],
-    'import/prefer-default-export': 'warn',
+    'import/prefer-default-export': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'jsx-a11y/click-events-have-key-events': 'off',
     'jsx-a11y/label-has-for': 'off',
@@ -170,6 +170,8 @@ module.exports = {
     File: true,
     FileReader: true,
     JSX: true,
+    FIRST_BUILD_YEAR: true,
+    LATEST_BUILD_YEAR: true,
   },
   overrides: [
     {
diff --git a/client/app/App.tsx b/client/app/App.tsx
index 606f8de8bc2..4539ec6e7ab 100644
--- a/client/app/App.tsx
+++ b/client/app/App.tsx
@@ -1,19 +1,14 @@
-import { BrowserRouter } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import ProviderWrapper from 'lib/components/wrappers/ProviderWrapper';
-import NotificationPopup from 'lib/containers/NotificationPopup';
+import Providers from 'lib/components/wrappers/Providers';
 
-import RoutedApp from './RoutedApp';
+import router from './router';
 import { store } from './store';
 
 const App = (): JSX.Element => (
-  <ProviderWrapper store={store}>
-    <BrowserRouter>
-      <RoutedApp />
-    </BrowserRouter>
-
-    <NotificationPopup />
-  </ProviderWrapper>
+  <Providers store={store}>
+    <RouterProvider router={createBrowserRouter(router)} />
+  </Providers>
 );
 
 export default App;
diff --git a/client/app/RoutedApp.tsx b/client/app/RoutedApp.tsx
deleted file mode 100644
index 3ac11f515db..00000000000
--- a/client/app/RoutedApp.tsx
+++ /dev/null
@@ -1,337 +0,0 @@
-import { Navigate, Route, Routes } from 'react-router-dom';
-
-import GlobalAnnouncementIndex from 'bundles/announcements/GlobalAnnouncementIndex';
-import AchievementShow from 'bundles/course/achievement/pages/AchievementShow';
-import AchievementsIndex from 'bundles/course/achievement/pages/AchievementsIndex';
-import SettingsNavigation from 'bundles/course/admin/components/SettingsNavigation';
-import AnnouncementSettings from 'bundles/course/admin/pages/AnnouncementsSettings';
-import AssessmentSettings from 'bundles/course/admin/pages/AssessmentSettings';
-import CodaveriSettings from 'bundles/course/admin/pages/CodaveriSettings';
-import CommentsSettings from 'bundles/course/admin/pages/CommentsSettings';
-import ComponentSettings from 'bundles/course/admin/pages/ComponentSettings';
-import CourseSettings from 'bundles/course/admin/pages/CourseSettings';
-import ForumsSettings from 'bundles/course/admin/pages/ForumsSettings';
-import LeaderboardSettings from 'bundles/course/admin/pages/LeaderboardSettings';
-import LessonPlanSettings from 'bundles/course/admin/pages/LessonPlanSettings';
-import MaterialsSettings from 'bundles/course/admin/pages/MaterialsSettings';
-import NotificationSettings from 'bundles/course/admin/pages/NotificationSettings';
-import SidebarSettings from 'bundles/course/admin/pages/SidebarSettings';
-import VideosSettings from 'bundles/course/admin/pages/VideosSettings';
-import AnnouncementsIndex from 'bundles/course/announcements/pages/AnnouncementsIndex';
-import AssessmentEdit from 'bundles/course/assessment/pages/AssessmentEdit';
-import AssessmentMonitoring from 'bundles/course/assessment/pages/AssessmentMonitoring';
-import AssessmentShow from 'bundles/course/assessment/pages/AssessmentShow';
-import AssessmentsIndex from 'bundles/course/assessment/pages/AssessmentsIndex';
-import AssessmentStatisticsPage from 'bundles/course/assessment/pages/AssessmentStatistics';
-import EditForumPostResponsePage from 'bundles/course/assessment/question/forum-post-responses/EditForumPostResponsePage';
-import NewForumPostResponsePage from 'bundles/course/assessment/question/forum-post-responses/NewForumPostResponsePage';
-import EditMcqMrqPage from 'bundles/course/assessment/question/multiple-responses/EditMcqMrqPage';
-import NewMcqMrqPage from 'bundles/course/assessment/question/multiple-responses/NewMcqMrqPage';
-import EditProgrammingQuestionPage from 'bundles/course/assessment/question/programming/EditProgrammingQuestionPage';
-import NewProgrammingQuestionPage from 'bundles/course/assessment/question/programming/NewProgrammingQuestionPage';
-import ScribingQuestion from 'bundles/course/assessment/question/scribing/ScribingQuestion';
-import EditTextResponse from 'bundles/course/assessment/question/text-responses/EditTextResponsePage';
-import NewTextResponse from 'bundles/course/assessment/question/text-responses/NewTextResponsePage';
-import EditVoicePage from 'bundles/course/assessment/question/voice-responses/EditVoicePage';
-import NewVoicePage from 'bundles/course/assessment/question/voice-responses/NewVoicePage';
-import AssessmentSessionNew from 'bundles/course/assessment/sessions/pages/AssessmentSessionNew';
-import SkillsIndex from 'bundles/course/assessment/skills/pages/SkillsIndex';
-import LogsIndex from 'bundles/course/assessment/submission/pages/LogsIndex';
-import SubmissionEditIndex from 'bundles/course/assessment/submission/pages/SubmissionEditIndex';
-import AssessmentSubmissionsIndex from 'bundles/course/assessment/submission/pages/SubmissionsIndex';
-import SubmissionsIndex from 'bundles/course/assessment/submissions/SubmissionsIndex';
-import CourseShow from 'bundles/course/courses/pages/CourseShow';
-import CoursesIndex from 'bundles/course/courses/pages/CoursesIndex';
-import CommentIndex from 'bundles/course/discussion/topics/pages/CommentIndex';
-import Duplication from 'bundles/course/duplication/pages/Duplication';
-import UserRequests from 'bundles/course/enrol-requests/pages/UserRequests';
-import DisbursementIndex from 'bundles/course/experience-points/disbursement/pages/DisbursementIndex';
-import ForumShow from 'bundles/course/forum/pages/ForumShow';
-import ForumsIndex from 'bundles/course/forum/pages/ForumsIndex';
-import ForumTopicShow from 'bundles/course/forum/pages/ForumTopicShow';
-import GroupIndex from 'bundles/course/group/pages/GroupIndex';
-import GroupShow from 'bundles/course/group/pages/GroupShow';
-import LeaderboardIndex from 'bundles/course/leaderboard/pages/LeaderboardIndex';
-import LearningMap from 'bundles/course/learning-map/containers/LearningMap';
-import LessonPlanLayout from 'bundles/course/lesson-plan/containers/LessonPlanLayout';
-import LessonPlanEdit from 'bundles/course/lesson-plan/pages/LessonPlanEdit';
-import LessonPlanShow from 'bundles/course/lesson-plan/pages/LessonPlanShow';
-import LevelsIndex from 'bundles/course/level/pages/LevelsIndex';
-import FolderShow from 'bundles/course/material/folders/pages/FolderShow';
-import TimelineDesigner from 'bundles/course/reference-timelines/TimelineDesigner';
-import StatisticsIndex from 'bundles/course/statistics/pages/StatisticsIndex';
-import ResponseEdit from 'bundles/course/survey/pages/ResponseEdit';
-import ResponseIndex from 'bundles/course/survey/pages/ResponseIndex';
-import ResponseShow from 'bundles/course/survey/pages/ResponseShow';
-import SurveyIndex from 'bundles/course/survey/pages/SurveyIndex';
-import SurveyResults from 'bundles/course/survey/pages/SurveyResults';
-import SurveyShow from 'bundles/course/survey/pages/SurveyShow';
-import UserEmailSubscriptions from 'bundles/course/user-email-subscriptions/UserEmailSubscriptions';
-import InvitationsIndex from 'bundles/course/user-invitations/pages/InvitationsIndex';
-import InviteUsers from 'bundles/course/user-invitations/pages/InviteUsers';
-import ExperiencePointsRecords from 'bundles/course/users/pages/ExperiencePointsRecords';
-import ManageStaff from 'bundles/course/users/pages/ManageStaff';
-import ManageStudents from 'bundles/course/users/pages/ManageStudents';
-import PersonalTimes from 'bundles/course/users/pages/PersonalTimes';
-import PersonalTimesShow from 'bundles/course/users/pages/PersonalTimesShow';
-import CourseUserShow from 'bundles/course/users/pages/UserShow';
-import UsersIndex from 'bundles/course/users/pages/UsersIndex';
-import VideoShow from 'bundles/course/video/pages/VideoShow';
-import VideosIndex from 'bundles/course/video/pages/VideosIndex';
-import VideoSubmissionEdit from 'bundles/course/video/submission/pages/VideoSubmissionEdit';
-import VideoSubmissionShow from 'bundles/course/video/submission/pages/VideoSubmissionShow';
-import VideoSubmissionsIndex from 'bundles/course/video/submission/pages/VideoSubmissionsIndex';
-import UserVideoSubmissionsIndex from 'bundles/course/video-submissions/pages/UserVideoSubmissionsIndex';
-import AdminIndex from 'bundles/system/admin/admin/pages/AdminIndex';
-import AdminNavigator from 'bundles/system/admin/admin/pages/AdminNavigator';
-import AnnouncementIndex from 'bundles/system/admin/admin/pages/AnnouncementsIndex';
-import CourseIndex from 'bundles/system/admin/admin/pages/CoursesIndex';
-import InstancesIndex from 'bundles/system/admin/admin/pages/InstancesIndex';
-import UserIndex from 'bundles/system/admin/admin/pages/UsersIndex';
-import InstanceAdminIndex from 'bundles/system/admin/instance/instance/pages/InstanceAdminIndex';
-import InstanceAdminNavigator from 'bundles/system/admin/instance/instance/pages/InstanceAdminNavigator';
-import InstanceAnnouncementsIndex from 'bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex';
-import InstanceComponentsIndex from 'bundles/system/admin/instance/instance/pages/InstanceComponentsIndex';
-import InstanceCoursesIndex from 'bundles/system/admin/instance/instance/pages/InstanceCoursesIndex';
-import InstanceUserRoleRequestsIndex from 'bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex';
-import InstanceUsersIndex from 'bundles/system/admin/instance/instance/pages/InstanceUsersIndex';
-import InstanceUsersInvitations from 'bundles/system/admin/instance/instance/pages/InstanceUsersInvitations';
-import InstanceUsersInvite from 'bundles/system/admin/instance/instance/pages/InstanceUsersInvite';
-import AccountSettings from 'bundles/user/AccountSettings';
-import UserShow from 'bundles/users/pages/UserShow';
-import PopupNotifierOutlet from 'course/user-notification/PopupNotifierOutlet';
-
-const RoutedApp = (): JSX.Element => (
-  <Routes>
-    <Route path="courses">
-      <Route element={<CoursesIndex />} index />
-
-      <Route element={<PopupNotifierOutlet />} path=":courseId">
-        <Route element={<CourseShow />} index />
-
-        <Route path="achievements">
-          <Route element={<AchievementsIndex />} index />
-          <Route element={<AchievementShow />} path=":achievementId" />
-        </Route>
-
-        <Route element={<AnnouncementsIndex />} path="announcements" />
-
-        <Route path="assessments">
-          <Route element={<AssessmentsIndex />} index />
-          <Route element={<SubmissionsIndex />} path="submissions" />
-          <Route element={<SkillsIndex />} path="skills" />
-
-          <Route path=":assessmentId">
-            <Route element={<AssessmentShow />} index />
-            <Route element={<AssessmentEdit />} path="edit" />
-            <Route element={<AssessmentMonitoring />} path="monitoring" />
-            <Route element={<AssessmentSessionNew />} path="sessions/new" />
-
-            {/* @ts-ignore `connect` throws error when cannot find `store` as direct parent */}
-            <Route element={<AssessmentStatisticsPage />} path="statistics" />
-
-            <Route path="submissions">
-              <Route element={<AssessmentSubmissionsIndex />} index />
-
-              <Route path=":submissionId">
-                <Route element={<SubmissionEditIndex />} path="edit" />
-                <Route element={<LogsIndex />} path="logs" />
-              </Route>
-            </Route>
-
-            <Route path="question">
-              <Route path="forum_post_responses">
-                <Route element={<NewForumPostResponsePage />} path="new" />
-
-                <Route
-                  element={<EditForumPostResponsePage />}
-                  path=":questionId/edit"
-                />
-              </Route>
-
-              <Route path="multiple_responses">
-                <Route element={<NewMcqMrqPage />} path="new" />
-                <Route element={<EditMcqMrqPage />} path=":questionId/edit" />
-              </Route>
-
-              <Route path="programming">
-                <Route element={<NewProgrammingQuestionPage />} path="new" />
-
-                <Route
-                  element={<EditProgrammingQuestionPage />}
-                  path=":questionId/edit"
-                />
-              </Route>
-
-              <Route path="scribing">
-                <Route element={<ScribingQuestion />} path="new" />
-                <Route element={<ScribingQuestion />} path=":questionId/edit" />
-              </Route>
-
-              <Route path="text_responses">
-                <Route element={<NewTextResponse />} path="new" />
-                <Route element={<EditTextResponse />} path=":questionId/edit" />
-              </Route>
-
-              <Route path="voice_responses">
-                <Route element={<NewVoicePage />} path="new" />
-                <Route element={<EditVoicePage />} path=":questionId/edit" />
-              </Route>
-            </Route>
-          </Route>
-        </Route>
-
-        <Route element={<CommentIndex />} path="comments" />
-        <Route element={<Duplication />} path="duplication" />
-        <Route element={<UserRequests />} path="enrol_requests" />
-
-        <Route path="forums">
-          <Route element={<ForumsIndex />} index />
-
-          <Route path=":forumId">
-            <Route element={<ForumShow />} index />
-            <Route element={<ForumTopicShow />} path="topics/:topicId" />
-          </Route>
-        </Route>
-
-        <Route element={<GroupIndex />} path="groups">
-          <Route element={<GroupShow />} path=":groupCategoryId" />
-        </Route>
-
-        {/* @ts-ignore `connect` throws error when cannot find `store` as direct parent */}
-        <Route element={<LessonPlanLayout />} path="lesson_plan">
-          <Route element={<LessonPlanShow />} index />
-          <Route element={<LessonPlanEdit />} path="edit" />
-        </Route>
-
-        <Route element={<LeaderboardIndex />} path="leaderboard" />
-        <Route element={<LearningMap />} path="learning_map" />
-        <Route element={<LevelsIndex />} path="levels" />
-        <Route element={<FolderShow />} path="materials/folders/:folderId" />
-        <Route element={<StatisticsIndex />} path="statistics" />
-        <Route element={<TimelineDesigner />} path="timelines" />
-
-        <Route path="users">
-          <Route element={<UsersIndex />} index />
-          <Route element={<PersonalTimes />} path="personal_times" />
-          <Route element={<InviteUsers />} path="invite" />
-
-          <Route
-            element={<DisbursementIndex />}
-            path="disburse_experience_points"
-          />
-
-          <Route path=":userId">
-            <Route element={<CourseUserShow />} index />
-            <Route element={<PersonalTimesShow />} path="personal_times" />
-
-            <Route
-              element={<UserVideoSubmissionsIndex />}
-              path="video_submissions"
-            />
-
-            <Route
-              element={<ExperiencePointsRecords />}
-              path="experience_points_records"
-            />
-
-            <Route
-              element={<UserEmailSubscriptions />}
-              path="manage_email_subscription"
-            />
-          </Route>
-        </Route>
-        <Route element={<InvitationsIndex />} path="user_invitations" />
-        <Route element={<ManageStudents />} path="students" />
-        <Route element={<ManageStaff />} path="staff" />
-
-        <Route path="videos">
-          <Route element={<VideosIndex />} index />
-
-          <Route path=":videoId">
-            <Route element={<VideoShow />} index />
-
-            <Route path="submissions">
-              <Route element={<VideoSubmissionsIndex />} index />
-
-              <Route path=":submissionId">
-                <Route element={<VideoSubmissionShow />} index />
-                <Route element={<VideoSubmissionEdit />} path="edit" />
-              </Route>
-            </Route>
-          </Route>
-        </Route>
-
-        <Route path="surveys">
-          <Route element={<SurveyIndex />} index />
-
-          <Route path=":surveyId">
-            <Route element={<SurveyShow />} index />
-            <Route element={<SurveyResults />} path="results" />
-
-            <Route path="responses">
-              <Route element={<ResponseIndex />} index />
-
-              <Route path=":responseId">
-                <Route element={<ResponseShow />} index />
-                <Route element={<ResponseEdit />} path="edit" />
-              </Route>
-            </Route>
-          </Route>
-        </Route>
-
-        <Route element={<SettingsNavigation />} path="admin">
-          <Route element={<CourseSettings />} index />
-          <Route element={<ComponentSettings />} path="components" />
-          <Route element={<SidebarSettings />} path="sidebar" />
-          <Route element={<NotificationSettings />} path="notifications" />
-          <Route element={<AnnouncementSettings />} path="announcements" />
-          <Route element={<AssessmentSettings />} path="assessments" />
-          <Route element={<MaterialsSettings />} path="materials" />
-          <Route element={<ForumsSettings />} path="forums" />
-          <Route element={<LeaderboardSettings />} path="leaderboard" />
-          <Route element={<CommentsSettings />} path="comments" />
-          <Route element={<VideosSettings />} path="videos" />
-          <Route element={<LessonPlanSettings />} path="lesson_plan" />
-          <Route element={<CodaveriSettings />} path="codaveri" />
-        </Route>
-      </Route>
-    </Route>
-
-    <Route element={<GlobalAnnouncementIndex />} path="announcements" />
-
-    <Route element={<UserShow />} path="users/:userId" />
-    <Route element={<AccountSettings />} path="user/profile/edit" />
-
-    <Route element={<AdminNavigator />} path="admin">
-      <Route element={<AdminIndex />} index />
-      <Route element={<AnnouncementIndex />} path="announcements" />
-      <Route element={<UserIndex />} path="users" />
-      <Route element={<InstancesIndex />} path="instances" />
-      <Route element={<CourseIndex />} path="courses" />
-    </Route>
-
-    {/* `admin/instance` cannot be nested in `admin/*` because it has a different container element */}
-    <Route element={<InstanceAdminNavigator />} path="admin/instance">
-      <Route element={<InstanceAdminIndex />} index />
-      <Route element={<InstanceAnnouncementsIndex />} path="announcements" />
-      <Route element={<InstanceComponentsIndex />} path="components" />
-      <Route element={<InstanceCoursesIndex />} path="courses" />
-      <Route element={<InstanceUsersIndex />} path="users" />
-      <Route element={<InstanceUsersInvite />} path="users/invite" />
-      <Route element={<InstanceUsersInvitations />} path="user_invitations" />
-      <Route element={<InstanceUserRoleRequestsIndex />} path="role_requests" />
-    </Route>
-
-    {/* `/role_requests` will be routed without `InstanceAdminNavigator` and its sidebar.
-          Here, we redirect `/role_requests` to `/admin/instance/role_requests`. But until
-          we are loading the page without Rails' router, fresh loads to `/role_requests` will
-          go to 404. Once we are 100% SPA, this is a non-issue. */}
-    <Route
-      element={<Navigate to="/admin/instance/role_requests" />}
-      path="role_requests"
-    />
-  </Routes>
-);
-
-export default RoutedApp;
diff --git a/client/app/__test__/setup.js b/client/app/__test__/setup.js
index f36c68ad55d..641d603e766 100644
--- a/client/app/__test__/setup.js
+++ b/client/app/__test__/setup.js
@@ -72,4 +72,5 @@ jest.mock('lib/components/form/fields/RichTextField', () =>
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useNavigate: jest.fn(),
+  unstable_usePrompt: jest.fn(),
 }));
diff --git a/client/app/api/Announcements.ts b/client/app/api/Announcements.ts
index 02b26b5e66b..931929d575b 100644
--- a/client/app/api/Announcements.ts
+++ b/client/app/api/Announcements.ts
@@ -1,4 +1,4 @@
-import { AnnouncementListData } from 'types/course/announcements';
+import { AnnouncementData } from 'types/course/announcements';
 
 import BaseAPI from './Base';
 import { APIResponse } from './types';
@@ -12,9 +12,13 @@ export default class AnnouncementsAPI extends BaseAPI {
   /**
    * Fetches all the announcements (admin and instance announcements)
    */
-  index(): APIResponse<{
-    announcements: AnnouncementListData[];
+  index(unread = false): APIResponse<{
+    announcements: AnnouncementData[];
   }> {
-    return this.client.get(this.#urlPrefix);
+    return this.client.get(this.#urlPrefix, { params: { unread } });
+  }
+
+  markAsRead(url: string): APIResponse {
+    return this.client.post(url);
   }
 }
diff --git a/client/app/api/Home.ts b/client/app/api/Home.ts
new file mode 100644
index 00000000000..68a687491c6
--- /dev/null
+++ b/client/app/api/Home.ts
@@ -0,0 +1,15 @@
+import { HomeLayoutData } from 'types/home';
+
+import BaseAPI from './Base';
+import { APIResponse } from './types';
+
+export default class HomeAPI extends BaseAPI {
+  // eslint-disable-next-line class-methods-use-this
+  get #urlPrefix(): string {
+    return '/';
+  }
+
+  fetch(): APIResponse<HomeLayoutData> {
+    return this.client.get(this.#urlPrefix);
+  }
+}
diff --git a/client/app/api/Users.ts b/client/app/api/Users.ts
index 05c5fbc9814..c12ee2c36a8 100644
--- a/client/app/api/Users.ts
+++ b/client/app/api/Users.ts
@@ -77,4 +77,8 @@ export default class UsersAPI extends BaseAPI {
   ): APIResponse {
     return this.client.post(url);
   }
+
+  signOut(url: string): APIResponse {
+    return this.client.delete(url);
+  }
 }
diff --git a/client/app/api/course/Announcements.ts b/client/app/api/course/Announcements.ts
index 74f2210647f..61c6d14c961 100644
--- a/client/app/api/course/Announcements.ts
+++ b/client/app/api/course/Announcements.ts
@@ -1,10 +1,10 @@
-import { AxiosResponse } from 'axios';
 import {
   AnnouncementData,
-  AnnouncementListData,
-  AnnouncementPermissions,
+  FetchAnnouncementsData,
 } from 'types/course/announcements';
 
+import { APIResponse } from 'api/types';
+
 import BaseCourseAPI from './Base';
 
 export default class AnnouncementsAPI extends BaseCourseAPI {
@@ -15,19 +15,14 @@ export default class AnnouncementsAPI extends BaseCourseAPI {
   /**
    * Fetches all the announcements
    */
-  index(): Promise<
-    AxiosResponse<{
-      announcements: AnnouncementListData[];
-      permissions: AnnouncementPermissions;
-    }>
-  > {
+  index(): APIResponse<FetchAnnouncementsData> {
     return this.client.get(this.#urlPrefix);
   }
 
   /**
    * Creates a new announcement
    */
-  create(params: FormData): Promise<AxiosResponse<AnnouncementData>> {
+  create(params: FormData): APIResponse<AnnouncementData> {
     return this.client.post(this.#urlPrefix, params);
   }
 
@@ -37,7 +32,7 @@ export default class AnnouncementsAPI extends BaseCourseAPI {
   update(
     announcementId: number,
     params: FormData | object,
-  ): Promise<AxiosResponse<AnnouncementData>> {
+  ): APIResponse<AnnouncementData> {
     return this.client.patch(`${this.#urlPrefix}/${announcementId}`, params);
   }
 
@@ -49,7 +44,7 @@ export default class AnnouncementsAPI extends BaseCourseAPI {
    * success response: {}
    * error response: {}
    */
-  delete(announcementId: number): Promise<AxiosResponse> {
+  delete(announcementId: number): APIResponse {
     return this.client.delete(`${this.#urlPrefix}/${announcementId}`);
   }
 }
diff --git a/client/app/api/course/Courses.ts b/client/app/api/course/Courses.ts
index 5c029f1e841..f70e7128567 100644
--- a/client/app/api/course/Courses.ts
+++ b/client/app/api/course/Courses.ts
@@ -1,11 +1,13 @@
-import { AxiosResponse } from 'axios';
 import {
   CourseData,
+  CourseLayoutData,
   CourseListData,
   CoursePermissions,
 } from 'types/course/courses';
 import { RoleRequestBasicListData } from 'types/system/instance/roleRequests';
 
+import { APIResponse } from 'api/types';
+
 import BaseCourseAPI from './Base';
 
 export default class CoursesAPI extends BaseCourseAPI {
@@ -14,27 +16,27 @@ export default class CoursesAPI extends BaseCourseAPI {
   /**
    * Fetches all of the courses
    */
-  index(): Promise<
-    AxiosResponse<{
-      courses: CourseListData[];
-      instanceUserRoleRequest?: RoleRequestBasicListData;
-      permissions: CoursePermissions;
-    }>
-  > {
+  index(): APIResponse<{
+    courses: CourseListData[];
+    instanceUserRoleRequest?: RoleRequestBasicListData;
+    permissions: CoursePermissions;
+  }> {
     return this.client.get(this.#baseUrlPrefix);
   }
 
   /**
    * Fetches one course
    */
-  fetch(courseId: number): Promise<
-    AxiosResponse<{
-      course: CourseData;
-    }>
-  > {
+  fetch(courseId: number): APIResponse<{
+    course: CourseData;
+  }> {
     return this.client.get(`${this.#baseUrlPrefix}/${courseId}`);
   }
 
+  fetchLayout(courseId: number): APIResponse<CourseLayoutData> {
+    return this.client.get(`${this.#baseUrlPrefix}/${courseId}/sidebar`);
+  }
+
   /**
    * Creates a course.
    *
@@ -47,19 +49,17 @@ export default class CoursesAPI extends BaseCourseAPI {
    * error response: { errors: [] } - An array of errors will be returned upon validation error.
    */
 
-  create(params: FormData): Promise<
-    AxiosResponse<{
-      id: number;
-      title: string;
-    }>
-  > {
+  create(params: FormData): APIResponse<{
+    id: number;
+    title: string;
+  }> {
     return this.client.post(this.#baseUrlPrefix, params);
   }
 
   /**
    * Removes a todo
    */
-  removeTodo(ignoreLink: string): Promise<void> {
+  removeTodo(ignoreLink: string): APIResponse {
     return this.client.post(ignoreLink);
   }
 
@@ -69,7 +69,7 @@ export default class CoursesAPI extends BaseCourseAPI {
   sendNewRegistrationCode(
     registrationLink: string,
     myData: FormData,
-  ): Promise<AxiosResponse<void>> {
+  ): APIResponse {
     return this.client.postForm(registrationLink, myData);
   }
 
@@ -77,14 +77,14 @@ export default class CoursesAPI extends BaseCourseAPI {
    * Submits an enrol request
    */
 
-  submitEnrolRequest(link: string): Promise<AxiosResponse<{ id: number }>> {
+  submitEnrolRequest(link: string): APIResponse<{ id: number }> {
     return this.client.postForm(link);
   }
 
   /**
    * Cancels a pending enrol request
    */
-  cancelEnrolRequest(link: string): Promise<AxiosResponse<void>> {
+  cancelEnrolRequest(link: string): APIResponse {
     return this.client.delete(link);
   }
 }
diff --git a/client/app/api/index.ts b/client/app/api/index.ts
index 427f44a93dd..8e67a2de0a0 100644
--- a/client/app/api/index.ts
+++ b/client/app/api/index.ts
@@ -1,4 +1,5 @@
 import AnnouncementsAPI from './Announcements';
+import HomeAPI from './Home';
 import JobsAPI from './Jobs';
 import UsersAPI from './Users';
 
@@ -6,6 +7,7 @@ const GlobalAPI = {
   announcements: new AnnouncementsAPI(),
   jobs: new JobsAPI(),
   users: new UsersAPI(),
+  home: new HomeAPI(),
 };
 
 Object.freeze(GlobalAPI);
diff --git a/client/app/api/system/Admin.ts b/client/app/api/system/Admin.ts
index 67095c0a7eb..76731a45d71 100644
--- a/client/app/api/system/Admin.ts
+++ b/client/app/api/system/Admin.ts
@@ -1,6 +1,6 @@
 import { AxiosResponse } from 'axios';
 import {
-  AnnouncementListData,
+  AnnouncementData,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import { CourseListData } from 'types/system/courses';
@@ -27,7 +27,7 @@ export default class AdminAPI extends BaseSystemAPI {
    */
   indexAnnouncements(): Promise<
     AxiosResponse<{
-      announcements: AnnouncementListData[];
+      announcements: AnnouncementData[];
       permissions: AnnouncementPermissions;
     }>
   > {
diff --git a/client/app/api/system/InstanceAdmin.ts b/client/app/api/system/InstanceAdmin.ts
index 2e6875d7315..e7695c43e8c 100644
--- a/client/app/api/system/InstanceAdmin.ts
+++ b/client/app/api/system/InstanceAdmin.ts
@@ -1,6 +1,6 @@
 import { AxiosResponse } from 'axios';
 import {
-  AnnouncementListData,
+  AnnouncementData,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import { CourseListData } from 'types/system/courses';
@@ -36,7 +36,7 @@ export default class InstanceAdminAPI extends BaseSystemAPI {
    */
   indexAnnouncements(): Promise<
     AxiosResponse<{
-      announcements: AnnouncementListData[];
+      announcements: AnnouncementData[];
       permissions: AnnouncementPermissions;
     }>
   > {
diff --git a/client/app/bundles/announcements/GlobalAnnouncementIndex.tsx b/client/app/bundles/announcements/GlobalAnnouncementIndex.tsx
index 727a527f39f..0006d00221c 100644
--- a/client/app/bundles/announcements/GlobalAnnouncementIndex.tsx
+++ b/client/app/bundles/announcements/GlobalAnnouncementIndex.tsx
@@ -3,8 +3,8 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import AnnouncementsDisplay from 'bundles/course/announcements/components/misc/AnnouncementsDisplay';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import { indexAnnouncements } from './operations';
@@ -45,12 +45,9 @@ const GlobalAnnouncementsIndex: FC<Props> = (props) => {
     />
   );
 
-  return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
-  );
+  return <Page>{isLoading ? <LoadingIndicator /> : renderBody}</Page>;
 };
 
-export default injectIntl(GlobalAnnouncementsIndex);
+const handle = translations.header;
+
+export default Object.assign(injectIntl(GlobalAnnouncementsIndex), { handle });
diff --git a/client/app/bundles/announcements/operations.ts b/client/app/bundles/announcements/operations.ts
index 0a253b143eb..abeb75319c8 100644
--- a/client/app/bundles/announcements/operations.ts
+++ b/client/app/bundles/announcements/operations.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { Operation } from 'store';
 
 import GlobalAPI from 'api';
diff --git a/client/app/bundles/announcements/selectors.ts b/client/app/bundles/announcements/selectors.ts
index 724684a2343..acc49690923 100644
--- a/client/app/bundles/announcements/selectors.ts
+++ b/client/app/bundles/announcements/selectors.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { AppState } from 'store';
 import { selectMiniEntities } from 'utilities/store';
diff --git a/client/app/bundles/announcements/store.ts b/client/app/bundles/announcements/store.ts
index ea0f6436022..1849d624ed3 100644
--- a/client/app/bundles/announcements/store.ts
+++ b/client/app/bundles/announcements/store.ts
@@ -1,5 +1,5 @@
 import produce from 'immer';
-import { AnnouncementListData } from 'types/course/announcements';
+import { AnnouncementData } from 'types/course/announcements';
 import {
   createEntityStore,
   removeAllFromStore,
@@ -35,7 +35,7 @@ const reducer = produce(
 );
 
 export function saveAnnouncementsList(
-  announcements: AnnouncementListData[],
+  announcements: AnnouncementData[],
 ): SaveAnnouncementListAction {
   return {
     type: SAVE_ANNOUNCEMENT_LIST,
diff --git a/client/app/bundles/announcements/types.ts b/client/app/bundles/announcements/types.ts
index f08a6afe5f5..5162cd38271 100644
--- a/client/app/bundles/announcements/types.ts
+++ b/client/app/bundles/announcements/types.ts
@@ -1,6 +1,6 @@
 import {
-  AnnouncementListData,
-  AnnouncementMiniEntity,
+  AnnouncementData,
+  AnnouncementEntity,
 } from 'types/course/announcements';
 import { EntityStore } from 'types/store';
 
@@ -10,12 +10,12 @@ export const SAVE_ANNOUNCEMENT_LIST = 'system/admin/SAVE_ANNOUNCEMENTS_LIST';
 // Action Types
 export interface SaveAnnouncementListAction {
   type: typeof SAVE_ANNOUNCEMENT_LIST;
-  announcements: AnnouncementListData[];
+  announcements: AnnouncementData[];
 }
 
 export type GlobalActionType = SaveAnnouncementListAction;
 
 // State Types
 export interface GlobalAnnouncementState {
-  announcements: EntityStore<AnnouncementMiniEntity>;
+  announcements: EntityStore<AnnouncementEntity>;
 }
diff --git a/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx b/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx
index 9543ce06a74..731c3c90ce7 100644
--- a/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx
+++ b/client/app/bundles/course/achievement/components/tables/AchievementTable.tsx
@@ -1,6 +1,5 @@
 import { FC, memo } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { DragIndicator } from '@mui/icons-material';
 import { Switch } from '@mui/material';
 import equal from 'fast-deep-equal';
@@ -11,6 +10,7 @@ import {
 } from 'types/course/achievements';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import Note from 'lib/components/core/Note';
 import { getAchievementURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
diff --git a/client/app/bundles/course/achievement/handles.ts b/client/app/bundles/course/achievement/handles.ts
new file mode 100644
index 00000000000..99718ef12e5
--- /dev/null
+++ b/client/app/bundles/course/achievement/handles.ts
@@ -0,0 +1,17 @@
+import { getIdFromUnknown } from 'utilities';
+
+import CourseAPI from 'api/course';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
+
+const getAchievementTitle = async (achievementId: number): Promise<string> => {
+  const { data } = await CourseAPI.achievements.fetch(achievementId);
+  return data.achievement.title;
+};
+
+export const achievementHandle: DataHandle = (match) => {
+  const achievementId = getIdFromUnknown(match.params?.achievementId);
+  if (!achievementId)
+    throw new Error(`Invalid achievement id: ${achievementId}`);
+
+  return { getData: () => getAchievementTitle(achievementId) };
+};
diff --git a/client/app/bundles/course/achievement/pages/AchievementShow/index.tsx b/client/app/bundles/course/achievement/pages/AchievementShow/index.tsx
index 41aeb43aefd..1591ab3bc6e 100644
--- a/client/app/bundles/course/achievement/pages/AchievementShow/index.tsx
+++ b/client/app/bundles/course/achievement/pages/AchievementShow/index.tsx
@@ -1,11 +1,12 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { Grid, Tooltip, Typography } from '@mui/material';
 
 import AvatarWithLabel from 'lib/components/core/AvatarWithLabel';
+import Page from 'lib/components/core/layouts/Page';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
@@ -58,27 +59,22 @@ const AchievementShow: FC<Props> = (props) => {
     return null;
   }
 
-  const headerToolbars: ReactElement[] = [];
-
-  if (achievementMiniEntity.permissions?.canManage) {
-    headerToolbars.push(
-      <AchievementManagementButtons
-        key={achievementMiniEntity.id}
-        achievement={achievementMiniEntity}
-        navigateToIndex
-      />,
-    );
-  }
-
   return (
-    <>
-      <PageHeader
-        returnLink={`/courses/${courseId}/achievements/`}
-        title={intl.formatMessage(translations.header, {
-          title: achievementMiniEntity.title,
-        })}
-        toolbars={headerToolbars}
-      />
+    <Page
+      actions={
+        achievementMiniEntity.permissions?.canManage && (
+          <AchievementManagementButtons
+            key={achievementMiniEntity.id}
+            achievement={achievementMiniEntity}
+            navigateToIndex
+          />
+        )
+      }
+      backTo={`/courses/${courseId}/achievements/`}
+      title={intl.formatMessage(translations.header, {
+        title: achievementMiniEntity.title,
+      })}
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -113,13 +109,13 @@ const AchievementShow: FC<Props> = (props) => {
               if (courseUser.obtainedAt !== null)
                 return (
                   <Grid key={courseUser.id} item lg={1} sm={3} xs={4}>
-                    <a href={getCourseUserURL(courseId, courseUser.id)}>
+                    <Link to={getCourseUserURL(courseId, courseUser.id)}>
                       <AvatarWithLabel
                         imageUrl={courseUser.imageUrl!}
                         label={courseUser.name}
                         size="sm"
                       />
-                    </a>
+                    </Link>
                   </Grid>
                 );
               return null;
@@ -127,7 +123,7 @@ const AchievementShow: FC<Props> = (props) => {
           </Grid>
         )
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/achievement/pages/AchievementsIndex/index.tsx b/client/app/bundles/course/achievement/pages/AchievementsIndex/index.tsx
index 6bbfb04d75e..b29d02b5dc0 100644
--- a/client/app/bundles/course/achievement/pages/AchievementsIndex/index.tsx
+++ b/client/app/bundles/course/achievement/pages/AchievementsIndex/index.tsx
@@ -3,8 +3,8 @@ import { defineMessages } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import AddButton from 'lib/components/core/buttons/AddButton';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -37,6 +37,10 @@ const translations = defineMessages({
     id: 'course.achievement.AchievementsIndex.toggleFailure',
     defaultMessage: 'Failed to update achievement.',
   },
+  achievements: {
+    id: 'course.achievement.AchievementsIndex.achievements',
+    defaultMessage: 'Achievements',
+  },
 });
 
 const AchievementsIndex: FC = () => {
@@ -92,14 +96,11 @@ const AchievementsIndex: FC = () => {
       });
 
   return (
-    <>
-      <PageHeader
-        title={t({
-          id: 'course.achievement.AchievementsIndex.header',
-          defaultMessage: 'Achievements',
-        })}
-        toolbars={headerToolbars}
-      />
+    <Page
+      actions={headerToolbars}
+      title={t(translations.achievements)}
+      unpadded
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -116,8 +117,10 @@ const AchievementsIndex: FC = () => {
           />
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default AchievementsIndex;
+const handle = translations.achievements;
+
+export default Object.assign(AchievementsIndex, { handle });
diff --git a/client/app/bundles/course/admin/components/SettingsNavigation.tsx b/client/app/bundles/course/admin/components/SettingsNavigation.tsx
index 9b3f6ce378d..d9af55245f6 100644
--- a/client/app/bundles/course/admin/components/SettingsNavigation.tsx
+++ b/client/app/bundles/course/admin/components/SettingsNavigation.tsx
@@ -1,17 +1,26 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+import { defineMessages } from 'react-intl';
 import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+  LoaderFunction,
+  Outlet,
+  useLoaderData,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 import { Chip } from '@mui/material';
 import { CourseAdminItems } from 'types/course/admin/course';
 
 import CourseAPI from 'api/course';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import Preload from 'lib/components/wrappers/Preload';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
+
+const translations = defineMessages({
+  courseSettings: {
+    id: 'course.admin.courseSettings',
+    defaultMessage: 'Course Settings',
+  },
+});
 
 const fetchItems = async (): Promise<CourseAdminItems> => {
   const response = await CourseAPI.admin.course.items();
@@ -23,18 +32,10 @@ const ItemsReloaderContext = createContext(() => {});
 export const useItemsReloader = (): (() => void) =>
   useContext(ItemsReloaderContext);
 
-interface LoadedSettingsNavigationProps {
-  data: CourseAdminItems;
-}
-
-const LoadedSettingsNavigation = (
-  props: LoadedSettingsNavigationProps,
-): JSX.Element => {
-  const [items, setItems] = useState(props.data);
+const SettingsNavigation = (): JSX.Element => {
+  const data = useLoaderData() as CourseAdminItems;
 
-  useEffect(() => {
-    fetchItems().then(setItems);
-  }, []);
+  const [items, setItems] = useState(data);
 
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -46,31 +47,49 @@ const LoadedSettingsNavigation = (
   if (!items) return <LoadingIndicator />;
 
   return (
-    <ItemsReloaderContext.Provider value={reloadItems}>
-      <div className="flex flex-col">
-        <div className="-m-2 pb-10">
-          {items.map(({ title, path }) => (
-            <Chip
-              key={path}
-              className={`m-2 ${path === pathname && 'p-[1px]'}`}
-              clickable={path !== pathname}
-              label={title}
-              onClick={(): void => navigate(path)}
-              variant={path === pathname ? 'filled' : 'outlined'}
-            />
-          ))}
-        </div>
+    <Page>
+      <ItemsReloaderContext.Provider value={reloadItems}>
+        <div className="flex flex-col">
+          <div className="-m-2 pb-10">
+            {items.map(({ title, path }) => (
+              <Chip
+                key={path}
+                className={`m-2 ${path === pathname && 'p-[1px]'}`}
+                clickable={path !== pathname}
+                label={title}
+                onClick={(): void => navigate(path)}
+                variant={path === pathname ? 'filled' : 'outlined'}
+              />
+            ))}
+          </div>
 
-        <Outlet />
-      </div>
-    </ItemsReloaderContext.Provider>
+          <Outlet />
+        </div>
+      </ItemsReloaderContext.Provider>
+    </Page>
   );
 };
 
-const SettingsNavigation = (): JSX.Element => (
-  <Preload render={<LoadingIndicator />} while={fetchItems}>
-    {(data): JSX.Element => <LoadedSettingsNavigation data={data} />}
-  </Preload>
-);
+const loader: LoaderFunction = fetchItems;
+
+const handle: DataHandle = (match, location) => {
+  const items = match.data as CourseAdminItems;
+  const currentItem = items.find(({ path }) => path === location.pathname);
+
+  return {
+    shouldRevalidate: true,
+    getData: () => ({
+      content: [
+        {
+          title: translations.courseSettings,
+        },
+        {
+          title: currentItem?.title,
+          url: currentItem?.path,
+        },
+      ],
+    }),
+  };
+};
 
-export default SettingsNavigation;
+export default Object.assign(SettingsNavigation, { loader, handle });
diff --git a/client/app/bundles/course/admin/pages/SidebarSettings/SidebarSettingsForm.tsx b/client/app/bundles/course/admin/pages/SidebarSettings/SidebarSettingsForm.tsx
index 93527508561..6b9aa0c8c2f 100644
--- a/client/app/bundles/course/admin/pages/SidebarSettings/SidebarSettingsForm.tsx
+++ b/client/app/bundles/course/admin/pages/SidebarSettings/SidebarSettingsForm.tsx
@@ -19,6 +19,7 @@ import produce from 'immer';
 import { SidebarItem, SidebarItems } from 'types/course/admin/sidebar';
 
 import Section from 'lib/components/core/layouts/Section';
+import { defensivelyGetIcon } from 'lib/constants/icons';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import translations from './translations';
@@ -54,7 +55,7 @@ const SidebarSettingsForm = (props: SidebarSettingsFormProps): JSX.Element => {
       id: item.id,
       title: item.title,
       weight: index + 1,
-      iconClassName: item.iconClassName,
+      icon: item.icon,
     }));
 
     props.onSubmit(newSidebarItems, setSettings, () =>
@@ -100,6 +101,8 @@ const SidebarSettingsForm = (props: SidebarSettingsFormProps): JSX.Element => {
           transform,
         };
 
+        const Icon = defensivelyGetIcon(item.icon, 'outlined');
+
         return (
           <TableRow
             ref={provided.innerRef}
@@ -119,12 +122,8 @@ const SidebarSettingsForm = (props: SidebarSettingsFormProps): JSX.Element => {
               />
             </TableCell>
 
-            <TableCell className="w-0 border-none">
-              <div
-                className={`${item.iconClassName} w-0 ${
-                  props.disabled && 'text-neutral-400'
-                }`}
-              />
+            <TableCell className="w-0 border-none p-0">
+              <Icon />
             </TableCell>
 
             <TableCell className="border-none">
diff --git a/client/app/bundles/course/announcements/components/misc/AnnouncementCard.tsx b/client/app/bundles/course/announcements/components/misc/AnnouncementCard.tsx
index 4d8bae09307..a767768e579 100644
--- a/client/app/bundles/course/announcements/components/misc/AnnouncementCard.tsx
+++ b/client/app/bundles/course/announcements/components/misc/AnnouncementCard.tsx
@@ -2,25 +2,25 @@ import { FC, memo, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 import { DateRange, PushPin } from '@mui/icons-material';
-import { Link } from '@mui/material';
-import { grey } from '@mui/material/colors';
+import { Paper, Typography } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { Operation } from 'store';
 import {
+  AnnouncementEntity,
   AnnouncementFormData,
-  AnnouncementMiniEntity,
 } from 'types/course/announcements';
 
 import DeleteButton from 'lib/components/core/buttons/DeleteButton';
 import EditButton from 'lib/components/core/buttons/EditButton';
 import CustomTooltip from 'lib/components/core/CustomTooltip';
+import Link from 'lib/components/core/Link';
 import { useAppDispatch } from 'lib/hooks/store';
 import { formatFullDateTime } from 'lib/moment';
 
 import AnnouncementEdit from '../../pages/AnnouncementEdit';
 
 interface Props extends WrappedComponentProps {
-  announcement: AnnouncementMiniEntity;
+  announcement: AnnouncementEntity;
   showEditOptions?: boolean;
   updateOperation?: (
     announcementId: number,
@@ -107,30 +107,22 @@ const AnnouncementCard: FC<Props> = (props) => {
       return <span>{announcement.creator.name}</span>;
     }
     return (
-      <Link
-        href={announcement.creator.userUrl ?? '#'}
-        style={{ textDecoration: 'none' }}
-      >
+      <Link to={announcement.creator.userUrl} underline="hover">
         {announcement.creator.name}
       </Link>
     );
   };
 
-  const backgroundColor = announcement.isUnread ? '#ffe8e8' : '#ffffff';
-
   return (
     <>
-      <div
+      <Paper
         key={announcement.id}
-        className="announcement"
+        className="announcement p-4"
         id={`announcement-${announcement.id}`}
         style={{
-          borderStyle: 'solid',
-          borderWidth: 0.2,
-          borderColor: grey[300],
-          padding: 10,
-          backgroundColor,
+          backgroundColor: announcement.isUnread ? '#ffe8e8' : '#ffffff',
         }}
+        variant="outlined"
       >
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <div style={{ display: 'flex' }}>
@@ -148,7 +140,7 @@ const AnnouncementCard: FC<Props> = (props) => {
                 <DateRange fontSize="small" style={{ marginTop: 3 }} />
               </CustomTooltip>
             )}
-            <h3
+            <Typography
               style={{
                 marginTop: 0,
                 marginBottom: 0,
@@ -159,9 +151,10 @@ const AnnouncementCard: FC<Props> = (props) => {
                 fontWeight: 'bold',
                 overflowWrap: 'anywhere',
               }}
+              variant="h5"
             >
               {announcement.title}
-            </h3>
+            </Typography>
           </div>
           {showEditOptions && updateOperation && deleteOperation && (
             <div style={{ display: 'flex' }}>
@@ -186,15 +179,20 @@ const AnnouncementCard: FC<Props> = (props) => {
           )}
         </div>
 
-        <em className="timestamp">
+        <Typography
+          className="timestamp"
+          color="text.secondary"
+          variant="body2"
+        >
           {formatFullDateTime(announcement.startTime)}{' '}
           {intl.formatMessage(translations.timeSeparator)} {renderUserLink()}
-        </em>
-        <div
+        </Typography>
+        <Typography
           dangerouslySetInnerHTML={{ __html: announcement.content }}
           style={{ marginTop: 15, overflowWrap: 'anywhere' }}
+          variant="body2"
         />
-      </div>
+      </Paper>
       {showEditOptions && updateOperation && (
         <AnnouncementEdit
           announcementId={announcement.id}
diff --git a/client/app/bundles/course/announcements/components/misc/AnnouncementsDisplay.tsx b/client/app/bundles/course/announcements/components/misc/AnnouncementsDisplay.tsx
index 06d6c9fee05..c015da7cbad 100644
--- a/client/app/bundles/course/announcements/components/misc/AnnouncementsDisplay.tsx
+++ b/client/app/bundles/course/announcements/components/misc/AnnouncementsDisplay.tsx
@@ -4,8 +4,8 @@ import { Grid, Stack } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { Operation } from 'store';
 import {
+  AnnouncementEntity,
   AnnouncementFormData,
-  AnnouncementMiniEntity,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 
@@ -16,7 +16,7 @@ import useItems from 'lib/hooks/items/useItems';
 import AnnouncementCard from './AnnouncementCard';
 
 interface Props extends WrappedComponentProps {
-  announcements: AnnouncementMiniEntity[];
+  announcements: AnnouncementEntity[];
   announcementPermissions: AnnouncementPermissions;
   updateOperation?: (
     announcementId: number,
@@ -35,11 +35,11 @@ const translations = defineMessages({
 
 const itemsPerPage = 12;
 
-const searchKeys: (keyof AnnouncementMiniEntity)[] = ['title', 'content'];
+const searchKeys: (keyof AnnouncementEntity)[] = ['title', 'content'];
 
 export const sortFunc = (
-  announcements: AnnouncementMiniEntity[],
-): AnnouncementMiniEntity[] => {
+  announcements: AnnouncementEntity[],
+): AnnouncementEntity[] => {
   const sortedAnnouncements = [...announcements];
   sortedAnnouncements
     .sort((a, b) => Date.parse(b.startTime) - Date.parse(a.startTime))
diff --git a/client/app/bundles/course/announcements/pages/AnnouncementsIndex/index.tsx b/client/app/bundles/course/announcements/pages/AnnouncementsIndex/index.tsx
index c588d208613..e3844a88e55 100644
--- a/client/app/bundles/course/announcements/pages/AnnouncementsIndex/index.tsx
+++ b/client/app/bundles/course/announcements/pages/AnnouncementsIndex/index.tsx
@@ -1,11 +1,12 @@
-import { FC, useEffect, useState } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { useEffect, useState } from 'react';
+import { defineMessages } from 'react-intl';
 import { toast } from 'react-toastify';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
 
 import NewAnnouncementButton from '../../components/buttons/NewAnnouncementButton';
 import AnnouncementsDisplay from '../../components/misc/AnnouncementsDisplay';
@@ -21,8 +22,6 @@ import {
 } from '../../selectors';
 import AnnouncementNew from '../AnnouncementNew';
 
-interface Props extends WrappedComponentProps {}
-
 const translations = defineMessages({
   fetchAnnouncementsFailure: {
     id: 'course.announcements.AnnouncementsIndex.fetchAnnouncementsFailure',
@@ -42,8 +41,8 @@ const translations = defineMessages({
   },
 });
 
-const AnnouncementsIndex: FC<Props> = (props) => {
-  const { intl } = props;
+const AnnouncementsIndex = (): JSX.Element => {
+  const { t } = useTranslation();
 
   // For new announcements form dialog
   const [isOpen, setIsOpen] = useState(false);
@@ -56,33 +55,28 @@ const AnnouncementsIndex: FC<Props> = (props) => {
 
   useEffect(() => {
     dispatch(fetchAnnouncements())
-      .catch(() =>
-        toast.error(intl.formatMessage(translations.fetchAnnouncementsFailure)),
-      )
+      .catch(() => toast.error(t(translations.fetchAnnouncementsFailure)))
       .finally(() => setIsLoading(false));
   }, [dispatch]);
 
   return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(translations.header)}
-        toolbars={
-          announcementPermissions.canCreate
-            ? [
-                <NewAnnouncementButton
-                  key="new-announcement-button"
-                  setIsOpen={setIsOpen}
-                />,
-              ]
-            : undefined
-        }
-      />
+    <Page
+      actions={
+        announcementPermissions.canCreate && (
+          <NewAnnouncementButton
+            key="new-announcement-button"
+            setIsOpen={setIsOpen}
+          />
+        )
+      }
+      title={t(translations.header)}
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
         <>
           {announcements.length === 0 ? (
-            <Note message={intl.formatMessage(translations.noAnnouncements)} />
+            <Note message={t(translations.noAnnouncements)} />
           ) : (
             <AnnouncementsDisplay
               announcementPermissions={announcementPermissions}
@@ -98,8 +92,10 @@ const AnnouncementsIndex: FC<Props> = (props) => {
           />
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(AnnouncementsIndex);
+const handle = translations.header;
+
+export default Object.assign(AnnouncementsIndex, { handle });
diff --git a/client/app/bundles/course/announcements/store.ts b/client/app/bundles/course/announcements/store.ts
index f97cd6d6138..f6eb1cb651e 100644
--- a/client/app/bundles/course/announcements/store.ts
+++ b/client/app/bundles/course/announcements/store.ts
@@ -1,7 +1,6 @@
 import produce from 'immer';
 import {
   AnnouncementData,
-  AnnouncementListData,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import {
@@ -63,7 +62,7 @@ const reducer = produce(
 
 export const actions = {
   saveAnnouncementList: (
-    announcementList: AnnouncementListData[],
+    announcementList: AnnouncementData[],
     announcementPermissions: AnnouncementPermissions,
   ): SaveAnnouncementListAction => {
     return {
diff --git a/client/app/bundles/course/announcements/types.ts b/client/app/bundles/course/announcements/types.ts
index f3b38d38a7d..b3460e703cf 100644
--- a/client/app/bundles/course/announcements/types.ts
+++ b/client/app/bundles/course/announcements/types.ts
@@ -1,7 +1,6 @@
 import {
   AnnouncementData,
-  AnnouncementListData,
-  AnnouncementMiniEntity,
+  AnnouncementEntity,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import { EntityStore } from 'types/store';
@@ -15,7 +14,7 @@ export const DELETE_ANNOUNCEMENT = 'course/announcement/DELETE_ANNOUNCEMENT';
 // Action Types
 export interface SaveAnnouncementListAction {
   type: typeof SAVE_ANNOUNCEMENT_LIST;
-  announcementList: AnnouncementListData[];
+  announcementList: AnnouncementData[];
   announcementPermissions: AnnouncementPermissions;
 }
 
@@ -35,6 +34,6 @@ export type AnnouncementsActionType =
 
 // State Types
 export interface AnnouncementsState {
-  announcements: EntityStore<AnnouncementMiniEntity>;
+  announcements: EntityStore<AnnouncementEntity>;
   permissions: AnnouncementPermissions;
 }
diff --git a/client/app/bundles/course/assessment/components/AssessmentForm/operations.ts b/client/app/bundles/course/assessment/components/AssessmentForm/operations.ts
index e928754eca2..2306eddfe54 100644
--- a/client/app/bundles/course/assessment/components/AssessmentForm/operations.ts
+++ b/client/app/bundles/course/assessment/components/AssessmentForm/operations.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { Operation } from 'store';
 
 import CourseAPI from 'api/course';
diff --git a/client/app/bundles/course/assessment/components/FileManager/index.tsx b/client/app/bundles/course/assessment/components/FileManager/index.tsx
index f5072104012..0d6ce8495c9 100644
--- a/client/app/bundles/course/assessment/components/FileManager/index.tsx
+++ b/client/app/bundles/course/assessment/components/FileManager/index.tsx
@@ -7,6 +7,7 @@ import { AxiosError } from 'axios';
 import CourseAPI from 'api/course';
 import InfoLabel from 'lib/components/core/InfoLabel';
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import { getWorkbinFileURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { formatLongDateTime } from 'lib/moment';
@@ -175,9 +176,9 @@ const FileManager = (props: FileManagerProps): JSX.Element => {
     const url = getWorkbinFileURL(getCourseId(), props.folderId, material.id);
 
     return (
-      <a href={url} rel="noopener noreferrer" target="_blank">
+      <Link href={url} opensInNewTab>
         {value}
-      </a>
+      </Link>
     );
   };
 
diff --git a/client/app/bundles/course/assessment/handles.ts b/client/app/bundles/course/assessment/handles.ts
new file mode 100644
index 00000000000..13eab45b374
--- /dev/null
+++ b/client/app/bundles/course/assessment/handles.ts
@@ -0,0 +1,93 @@
+import { isAuthenticatedAssessmentData } from 'types/course/assessment/assessments';
+import { getIdFromUnknown } from 'utilities';
+
+import { CrumbPath, DataHandle } from 'lib/hooks/router/dynamicNest';
+
+import { fetchAssessment, fetchAssessments } from './operations';
+
+const getTabTitle = async (
+  categoryId?: number,
+  tabId?: number,
+): Promise<CrumbPath> => {
+  const { display } = await fetchAssessments(categoryId, tabId);
+
+  return {
+    activePath: display.tabUrl.split('&tab')[0],
+    content: {
+      url: display.tabUrl,
+      title: display.tabTitle,
+    },
+  };
+};
+
+const getTabTitleFromAssessmentId = async (
+  assessmentId: number,
+): Promise<CrumbPath> => {
+  const data = await fetchAssessment(assessmentId);
+
+  return {
+    activePath: data.tabUrl.split('&tab')[0],
+    content: {
+      url: data.tabUrl,
+      title: data.tabTitle,
+    },
+  };
+};
+
+/**
+ * Gets the crumb data and active path for assessments pages,
+ * except Submissions and Skills.
+ */
+export const assessmentsHandle: DataHandle = (match, location) => {
+  if (location.pathname.includes('assessments/s')) return null;
+
+  let promise: Promise<CrumbPath>;
+
+  const assessmentId = getIdFromUnknown(match.params?.assessmentId);
+  if (assessmentId) {
+    promise = getTabTitleFromAssessmentId(assessmentId);
+  } else {
+    const searchParams = new URLSearchParams(location.search);
+    const categoryId = getIdFromUnknown(searchParams.get('category'));
+    const tabId = getIdFromUnknown(searchParams.get('tab'));
+    promise = getTabTitle(categoryId, tabId);
+  }
+
+  return { shouldRevalidate: true, getData: () => promise };
+};
+
+export const assessmentHandle: DataHandle = (match) => {
+  const assessmentId = getIdFromUnknown(match.params?.assessmentId);
+  if (!assessmentId) throw new Error(`Invalid assessment id: ${assessmentId}`);
+
+  return {
+    getData: async (): Promise<string> => {
+      const data = await fetchAssessment(assessmentId);
+      return data.title;
+    },
+  };
+};
+
+export const questionHandle: DataHandle = (match, location) => {
+  if (location.pathname.endsWith('new')) return null;
+
+  const assessmentId = getIdFromUnknown(match.params?.assessmentId);
+  if (!assessmentId) throw new Error(`Invalid assessment id: ${assessmentId}`);
+
+  return {
+    getData: async (): Promise<string | null> => {
+      const data = await fetchAssessment(assessmentId);
+      if (!isAuthenticatedAssessmentData(data)) return null;
+
+      const question = data.questions?.find(
+        ({ editUrl }) => editUrl === location.pathname,
+      );
+
+      if (!question) return null;
+
+      return question.title
+        ? `${question.defaultTitle}: ${question.title}`
+        : question.defaultTitle;
+    },
+  };
+};
diff --git a/client/app/bundles/course/assessment/pages/AssessmentEdit/AssessmentEditPage.jsx b/client/app/bundles/course/assessment/pages/AssessmentEdit/AssessmentEditPage.jsx
index 2ef7d0ba32b..402aac2df1d 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentEdit/AssessmentEditPage.jsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentEdit/AssessmentEditPage.jsx
@@ -5,7 +5,7 @@ import { Navigate } from 'react-router-dom';
 import { Button } from '@mui/material';
 import PropTypes from 'prop-types';
 
-import PageHeader from 'lib/components/navigation/PageHeader';
+import Page from 'lib/components/core/layouts/Page';
 import { achievementTypesConditionAttributes } from 'lib/types';
 
 import AssessmentForm from '../../components/AssessmentForm';
@@ -67,8 +67,8 @@ class AssessmentEditPage extends Component {
     // TODO: Add a source router props that can be used to determine where
     // did the user come from, and initialise a Back button that goes there.
     return (
-      <main className="space-y-5">
-        <PageHeader title={intl.formatMessage(translations.editAssessment)}>
+      <Page
+        actions={
           <Button
             className="bg-white"
             disabled={disabled}
@@ -78,8 +78,10 @@ class AssessmentEditPage extends Component {
           >
             <FormattedMessage {...translations.updateAssessment} />
           </Button>
-        </PageHeader>
-
+        }
+        className="space-y-5"
+        title={intl.formatMessage(translations.editAssessment)}
+      >
         <AssessmentForm
           canManageMonitor={canManageMonitor}
           conditionAttributes={conditionAttributes}
@@ -97,7 +99,7 @@ class AssessmentEditPage extends Component {
         />
 
         {this.state.redirectUrl && <Navigate to={this.state.redirectUrl} />}
-      </main>
+      </Page>
     );
   }
 }
diff --git a/client/app/bundles/course/assessment/pages/AssessmentEdit/index.tsx b/client/app/bundles/course/assessment/pages/AssessmentEdit/index.tsx
index 107a257e9e1..d4f14ab8eab 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentEdit/index.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentEdit/index.tsx
@@ -4,6 +4,7 @@ import { getAssessmentId } from 'lib/helpers/url-helpers';
 
 import { DEFAULT_MONITORING_OPTIONS } from '../../constants';
 import { fetchAssessmentEditData } from '../../operations';
+import translations from '../../translations';
 import { categoryAndTabTitle } from '../../utils';
 
 import AssessmentEditPage from './AssessmentEditPage';
@@ -60,4 +61,6 @@ const AssessmentEdit = (): JSX.Element => {
   );
 };
 
-export default AssessmentEdit;
+const handle = translations.edit;
+
+export default Object.assign(AssessmentEdit, { handle });
diff --git a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/index.tsx b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/index.tsx
index 34992f4d7bf..dbc033cb522 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/index.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/index.tsx
@@ -2,6 +2,7 @@ import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Preload from 'lib/components/wrappers/Preload';
 
 import { fetchMonitoringData } from '../../operations';
+import translations from '../../translations';
 
 import PulseGrid from './PulseGrid';
 
@@ -13,4 +14,6 @@ const AssessmentMonitoring = (): JSX.Element => {
   );
 };
 
-export default AssessmentMonitoring;
+const handle = translations.pulsegrid;
+
+export default Object.assign(AssessmentMonitoring, { handle });
diff --git a/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowHeader.tsx b/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowHeader.tsx
index 62f851aeddc..c944a2668f8 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowHeader.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowHeader.tsx
@@ -15,7 +15,6 @@ import {
 
 import DeleteButton from 'lib/components/core/buttons/DeleteButton';
 import { PromptText } from 'lib/components/core/dialogs/Prompt';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import { attemptAssessment, deleteAssessment } from '../../operations';
@@ -83,7 +82,7 @@ const AssessmentShowHeader = (
   };
 
   return (
-    <PageHeader returnLink={assessment.indexUrl} title={assessment.title}>
+    <>
       {assessment.deleteUrl && (
         <DeleteButton
           aria-label={t(translations.deleteAssessment)}
@@ -101,10 +100,7 @@ const AssessmentShowHeader = (
       {assessment.editUrl && (
         <Tooltip disableInteractive title={t(translations.editAssessment)}>
           <Link to={assessment.editUrl}>
-            <IconButton
-              aria-label={t(translations.editAssessment)}
-              className="text-white"
-            >
+            <IconButton aria-label={t(translations.editAssessment)}>
               <Create />
             </IconButton>
           </Link>
@@ -114,10 +110,7 @@ const AssessmentShowHeader = (
       {assessment.monitoringUrl && (
         <Tooltip disableInteractive title={t(translations.pulsegrid)}>
           <Link to={assessment.monitoringUrl}>
-            <IconButton
-              aria-label={t(translations.pulsegrid)}
-              className="text-white"
-            >
+            <IconButton aria-label={t(translations.pulsegrid)}>
               <MonitorHeart />
             </IconButton>
           </Link>
@@ -130,10 +123,7 @@ const AssessmentShowHeader = (
           title={t(translations.assessmentStatistics)}
         >
           <Link to={assessment.statisticsUrl}>
-            <IconButton
-              aria-label={t(translations.assessmentStatistics)}
-              className="text-white"
-            >
+            <IconButton aria-label={t(translations.assessmentStatistics)}>
               <Assessment />
             </IconButton>
           </Link>
@@ -143,10 +133,7 @@ const AssessmentShowHeader = (
       {assessment.submissionsUrl && (
         <Tooltip disableInteractive title={t(translations.submissions)}>
           <Link to={assessment.submissionsUrl}>
-            <IconButton
-              aria-label={t(translations.submissions)}
-              className="text-white"
-            >
+            <IconButton aria-label={t(translations.submissions)}>
               <Inventory />
             </IconButton>
           </Link>
@@ -157,16 +144,16 @@ const AssessmentShowHeader = (
         <Link to={actionButtonUrl}>
           <Button
             aria-label={t(ACTION_LABELS[assessment.status])}
-            className="ml-4 bg-white"
+            className="ml-4"
             disabled={attempting}
             onClick={handleActionButton}
-            variant="outlined"
+            variant="contained"
           >
             {t(ACTION_LABELS[assessment.status])}
           </Button>
         </Link>
       )}
-    </PageHeader>
+    </>
   );
 };
 
diff --git a/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowPage.tsx b/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowPage.tsx
index 0b4b9a06683..306974bc7f1 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowPage.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentShow/AssessmentShowPage.tsx
@@ -11,6 +11,7 @@ import {
 import { AssessmentData } from 'types/course/assessment/assessments';
 
 import DescriptionCard from 'lib/components/core/DescriptionCard';
+import Page from 'lib/components/core/layouts/Page';
 import Subsection from 'lib/components/core/layouts/Subsection';
 import Link from 'lib/components/core/Link';
 import useTranslation from 'lib/hooks/useTranslation';
@@ -32,9 +33,12 @@ const AssessmentShowPage = (props: AssessmentShowPageProps): JSX.Element => {
   const { t } = useTranslation();
 
   return (
-    <main className="space-y-5">
-      <AssessmentShowHeader with={assessment} />
-
+    <Page
+      actions={<AssessmentShowHeader with={assessment} />}
+      backTo={assessment.indexUrl}
+      className="space-y-5"
+      title={assessment.title}
+    >
       {assessment.status === 'unavailable' && (
         <UnavailableAlert for={assessment} />
       )}
@@ -166,7 +170,7 @@ const AssessmentShowPage = (props: AssessmentShowPageProps): JSX.Element => {
           )}
         </Subsection>
       )}
-    </main>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/assessment/pages/AssessmentShow/Question.tsx b/client/app/bundles/course/assessment/pages/AssessmentShow/Question.tsx
index fbf196fc2d0..3033ae73834 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentShow/Question.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentShow/Question.tsx
@@ -43,8 +43,8 @@ const Question = (props: QuestionProps): JSX.Element => {
             } ${!dragging ? 'hover?:slot-1-neutral-100' : ''}`}
           >
             <section
-              className={`top-20 flex w-full items-start bg-slot-1 px-6 py-6 ${
-                !dragging ? 'sticky z-10' : ''
+              className={`flex w-full items-start bg-slot-1 px-6 py-6 ${
+                !dragging ? 'sticky top-0 z-10' : ''
               }`}
               {...provided.dragHandleProps}
             >
diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/index.jsx b/client/app/bundles/course/assessment/pages/AssessmentStatistics/index.jsx
index 38a7358833f..10be153672a 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentStatistics/index.jsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentStatistics/index.jsx
@@ -5,8 +5,8 @@ import { useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import ErrorCard from 'lib/components/core/ErrorCard';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 
 import {
   fetchAncestors,
@@ -24,6 +24,10 @@ import AncestorSelect from './AncestorSelect';
 import StatisticsPanel from './StatisticsPanel';
 
 const translations = defineMessages({
+  statistics: {
+    id: 'course.assessment.statistics.statistics',
+    defaultMessage: 'Statistics',
+  },
   header: {
     id: 'course.assessment.statistics.header',
     defaultMessage: 'Statistics for {title}',
@@ -164,17 +168,17 @@ const AssessmentStatisticsPage = ({
   };
 
   return (
-    <main className="space-y-5">
-      <PageHeader
-        returnLink={assessment?.url}
-        title={intl.formatMessage(translations.header, {
-          title: assessment?.title,
-        })}
-      />
+    <Page
+      backTo={assessment?.url}
+      className="space-y-5"
+      title={intl.formatMessage(translations.header, {
+        title: assessment?.title,
+      })}
+    >
       <StatisticsPanel allStudents={allStudents} submissions={submissions} />
       {renderAncestorSelect()}
       <div style={styles.ancestorStatistics}>{renderAncestorStatistics()}</div>
-    </main>
+    </Page>
   );
 };
 
@@ -198,6 +202,11 @@ AssessmentStatisticsPage.propTypes = {
   ancestorAllStudents: PropTypes.arrayOf(courseUserShape),
 };
 
-export default connect(({ assessments }) => assessments.statisticsPage)(
-  injectIntl(AssessmentStatisticsPage),
+const handle = translations.statistics;
+
+export default Object.assign(
+  connect(({ assessments }) => assessments.statisticsPage)(
+    injectIntl(AssessmentStatisticsPage),
+  ),
+  { handle },
 );
diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/utils.js b/client/app/bundles/course/assessment/pages/AssessmentStatistics/utils.js
index 988c26a05b1..fe6c388bb16 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentStatistics/utils.js
+++ b/client/app/bundles/course/assessment/pages/AssessmentStatistics/utils.js
@@ -8,7 +8,6 @@ function processDayDifference(dayDifference) {
   return `D+${dayDifference}`;
 }
 
-// eslint-disable-next-line import/prefer-default-export
 export function processSubmissionsIntoChartData(submissions) {
   const submittedSubmissions = submissions.filter((s) => s.submittedAt != null);
   const mappedSubmissions = submittedSubmissions
diff --git a/client/app/bundles/course/assessment/pages/AssessmentsIndex/ActionButtons.tsx b/client/app/bundles/course/assessment/pages/AssessmentsIndex/ActionButtons.tsx
index 0c40b70bc53..8ff0f1317c0 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentsIndex/ActionButtons.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentsIndex/ActionButtons.tsx
@@ -56,35 +56,22 @@ const ActionButtons = (props: ActionButtonsProps): JSX.Element => {
       .catch(() => setAttempting(false));
   };
 
-  const actionButton = actionButtonUrl && (
-    <Link to={actionButtonUrl}>
-      <Button
-        className="min-w-[8.5rem]"
-        disabled={attempting}
-        onClick={handleActionButton}
-        size="small"
-        variant={assessment.status === 'submitted' ? 'outlined' : 'contained'}
-        // Temporary fix for blue link on hover caused by Bootstrap
-        // TODO: Remove when Bootstrap is finally removed
-        {...((assessment.status === 'open' ||
-          assessment.status === 'attempting' ||
-          assessment.status === 'locked') && {
-          className: 'min-w-[8.5rem] hover:text-white',
-        })}
-      >
-        {t(ACTION_LABELS[assessment.status])}
-      </Button>
-    </Link>
-  );
-
   return (
     <div className="flex items-center">
-      {student ? (
-        actionButton
-      ) : (
-        <div className="hoverable:invisible group-hover?:visible flex h-full items-center transition-position no-hover:mr-4 hoverable:absolute hoverable:right-0 hoverable:pl-8 hoverable:opacity-0 hoverable:bg-fade-to-l-slot-2 group-hover?:right-full group-hover?:opacity-100">
-          {actionButton}
-        </div>
+      {actionButtonUrl && (
+        <Link to={actionButtonUrl}>
+          <Button
+            className="mr-4 min-w-[8.5rem]"
+            disabled={attempting}
+            onClick={handleActionButton}
+            size="small"
+            variant={
+              assessment.status === 'submitted' ? 'outlined' : 'contained'
+            }
+          >
+            {t(ACTION_LABELS[assessment.status])}
+          </Button>
+        </Link>
       )}
 
       {assessment.editUrl && (
diff --git a/client/app/bundles/course/assessment/pages/AssessmentsIndex/AssessmentsTable.tsx b/client/app/bundles/course/assessment/pages/AssessmentsIndex/AssessmentsTable.tsx
index 2d44db24918..65721cc563c 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentsIndex/AssessmentsTable.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentsIndex/AssessmentsTable.tsx
@@ -1,18 +1,18 @@
-import { Link } from 'react-router-dom';
 import {
   AssessmentListData,
   AssessmentsListData,
 } from 'types/course/assessment/assessments';
 
+import Link from 'lib/components/core/Link';
 import Note from 'lib/components/core/Note';
 import PersonalStartEndTime from 'lib/components/extensions/PersonalStartEndTime';
+import StackedBadges from 'lib/components/extensions/StackedBadges';
 import Table, { ColumnTemplate } from 'lib/components/table';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import translations from '../../translations';
 
 import ActionButtons from './ActionButtons';
-import StackedBadges from './StackedBadges';
 import StatusBadges from './StatusBadges';
 
 interface AssessmentsTableProps {
@@ -31,9 +31,9 @@ const AssessmentsTable = (props: AssessmentsTableProps): JSX.Element => {
         <div className="flex flex-col items-start justify-between xl:flex-row xl:items-center">
           <label className="m-0 font-normal" title={assessment.title}>
             <Link
-              // TODO: Change to lg:line-clamp-1 once the current sidebar is gone
               className="line-clamp-2 xl:line-clamp-1"
               to={assessment.url}
+              underline="hover"
             >
               {assessment.title}
             </Link>
@@ -62,9 +62,10 @@ const AssessmentsTable = (props: AssessmentsTableProps): JSX.Element => {
       title: t(translations.neededFor),
       cell: (assessment) => (
         <StackedBadges
-          assessmentUrl={assessment.url}
           badges={assessment.topConditionals}
           remainingCount={assessment.remainingConditionalsCount}
+          seeRemainingTooltip={t(translations.seeAllRequirements)}
+          seeRemainingUrl={assessment.url}
         />
       ),
       unless: !display.isAchievementsEnabled,
@@ -143,7 +144,7 @@ const AssessmentsTable = (props: AssessmentsTableProps): JSX.Element => {
 
   return (
     <Table
-      className="-mx-6 w-screen sm:m-0 sm:mt-8 sm:w-full"
+      className="w-screen border-none sm:w-full"
       columns={columns}
       data={assessments}
       getRowClassName={(assessment): string =>
diff --git a/client/app/bundles/course/assessment/pages/AssessmentsIndex/StackedBadges.tsx b/client/app/bundles/course/assessment/pages/AssessmentsIndex/StackedBadges.tsx
deleted file mode 100644
index 304b2585841..00000000000
--- a/client/app/bundles/course/assessment/pages/AssessmentsIndex/StackedBadges.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { ReactNode } from 'react';
-import { Avatar, Tooltip, Typography } from '@mui/material';
-import { AssessmentListData } from 'types/course/assessment/assessments';
-
-import Link from 'lib/components/core/Link';
-import useTranslation from 'lib/hooks/useTranslation';
-
-import translations from '../../translations';
-
-interface StackableBadgeProps {
-  title: string;
-  src?: string;
-  children?: ReactNode;
-  className?: string;
-}
-
-interface StackedBadgesProps {
-  badges?: AssessmentListData['topConditionals'];
-  remainingCount?: number;
-  assessmentUrl?: string;
-}
-
-const StackableBadge = (props: StackableBadgeProps): JSX.Element => (
-  <Tooltip disableInteractive title={props.title}>
-    <Avatar
-      alt={props.title}
-      className={`outline outline-2 outline-slot-1 transition-all wh-11 hoverable:group-hover/badges:ml-1 hoverable:group-hover/badges:shadow-lg hoverable:group-hover/badges:!outline-none group-hover?:outline-slot-2 ${
-        props.className ?? ''
-      }`}
-      src={props.src}
-    >
-      {props.children}
-    </Avatar>
-  </Tooltip>
-);
-
-const StackedBadges = (props: StackedBadgesProps): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <div className="group/badges relative min-w-[5rem]">
-      <div className="absolute flex h-full items-center -space-x-4 hoverable:group-hover/badges:space-x-0">
-        {props.badges?.map((badge) => (
-          <Link
-            key={badge.url}
-            className="transition-margin hoverable:group-hover/badges:-ml-1"
-            href={badge.url}
-            opensInNewTab
-            underline="hover"
-          >
-            <StackableBadge src={badge.badgeUrl} title={badge.title} />
-          </Link>
-        ))}
-
-        {props.remainingCount && (
-          <Link
-            className="transition-margin hoverable:group-hover/badges:-ml-1"
-            href={props.assessmentUrl}
-            opensInNewTab
-            underline="hover"
-          >
-            <StackableBadge title={t(translations.seeAllRequirements)}>
-              <Typography className="text-white" variant="body2">
-                +{props.remainingCount}
-              </Typography>
-            </StackableBadge>
-          </Link>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default StackedBadges;
diff --git a/client/app/bundles/course/assessment/pages/AssessmentsIndex/index.tsx b/client/app/bundles/course/assessment/pages/AssessmentsIndex/index.tsx
index 2c0c91c74fe..c2117f38608 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentsIndex/index.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentsIndex/index.tsx
@@ -1,10 +1,9 @@
-import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Tab, Tabs } from '@mui/material';
 import { AssessmentsListData } from 'types/course/assessment/assessments';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import Preload from 'lib/components/wrappers/Preload';
 
 import { fetchAssessments } from '../../operations';
@@ -14,57 +13,49 @@ import NewAssessmentFormButton from './NewAssessmentFormButton';
 
 const AssessmentsIndex = (): JSX.Element => {
   const [params, setParams] = useSearchParams();
-  const [currentTab, setCurrentTab] =
-    useState<AssessmentsListData['display']['tabId']>();
+  const categoryId = parseInt(params.get('category') ?? '', 10) || undefined;
+  const tabId = parseInt(params.get('tab') ?? '', 10) || undefined;
 
   const fetchAssessmentsInTab = (): Promise<AssessmentsListData> => {
-    const categoryId = parseInt(params.get('category') ?? '', 10) || undefined;
-    const tabId =
-      currentTab ?? (parseInt(params.get('tab') ?? '', 10) || undefined);
-
     return fetchAssessments(categoryId, tabId);
   };
 
   return (
     <Preload
       render={<LoadingIndicator />}
-      syncsWith={[currentTab]}
+      syncsWith={[categoryId, tabId]}
       while={fetchAssessmentsInTab}
     >
       {(data, refreshable): JSX.Element => (
-        <>
-          <PageHeader
-            title={data.display.category.title}
-            toolbars={
-              data.display.canCreateAssessments
-                ? [
-                    <NewAssessmentFormButton
-                      key={data.display.tabId}
-                      // @ts-ignore: component is still written in JSX
-                      canManageMonitor={data.display.canManageMonitor}
-                      categoryId={data.display.category.id}
-                      gamified={data.display.isGamified}
-                      monitoringEnabled={data.display.isMonitoringEnabled}
-                      randomizationAllowed={data.display.allowRandomization}
-                      tabId={data.display.tabId}
-                    />,
-                  ]
-                : undefined
-            }
-          />
-
+        <Page
+          actions={
+            data.display.canCreateAssessments && (
+              <NewAssessmentFormButton
+                key={data.display.tabId}
+                // @ts-ignore: component is still written in JSX
+                canManageMonitor={data.display.canManageMonitor}
+                categoryId={data.display.category.id}
+                gamified={data.display.isGamified}
+                monitoringEnabled={data.display.isMonitoringEnabled}
+                randomizationAllowed={data.display.allowRandomization}
+                tabId={data.display.tabId}
+              />
+            )
+          }
+          title={data.display.category.title}
+          unpadded
+        >
           {data.display.category.tabs.length > 1 && (
             <Tabs
-              className="sticky top-20 z-20 -mx-6 h-20 w-screen bg-cyan-50 sm:mx-0 sm:w-full sm:rounded-b-md"
+              className="sticky top-0 z-20 h-20 bg-white border-only-b-neutral-200"
               onChange={(_, id): void => {
-                setCurrentTab(id);
                 setParams({
                   category: data.display.category.id.toString(),
                   tab: id.toString(),
                 });
                 window.scrollTo({ top: 0, behavior: 'smooth' });
               }}
-              value={currentTab ?? data.display.tabId}
+              value={tabId ?? data.display.tabId}
               variant="scrollable"
             >
               {data.display.category.tabs.map((tab) => (
@@ -74,7 +65,7 @@ const AssessmentsIndex = (): JSX.Element => {
           )}
 
           {refreshable(<AssessmentsTable assessments={data} />)}
-        </>
+        </Page>
       )}
     </Preload>
   );
diff --git a/client/app/bundles/course/assessment/question/components/QuestionFormOutlet.tsx b/client/app/bundles/course/assessment/question/components/QuestionFormOutlet.tsx
new file mode 100644
index 00000000000..37fc77d2f9a
--- /dev/null
+++ b/client/app/bundles/course/assessment/question/components/QuestionFormOutlet.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom';
+
+import Page from 'lib/components/core/layouts/Page';
+
+const QuestionFormOutlet = (): JSX.Element => (
+  <Page>
+    <Outlet />
+  </Page>
+);
+
+export default QuestionFormOutlet;
diff --git a/client/app/bundles/course/assessment/question/forum-post-responses/NewForumPostResponsePage.tsx b/client/app/bundles/course/assessment/question/forum-post-responses/NewForumPostResponsePage.tsx
index 3d0af502e78..b2699173e1f 100644
--- a/client/app/bundles/course/assessment/question/forum-post-responses/NewForumPostResponsePage.tsx
+++ b/client/app/bundles/course/assessment/question/forum-post-responses/NewForumPostResponsePage.tsx
@@ -45,4 +45,6 @@ const NewForumPostResponsePage = (): JSX.Element => {
   );
 };
 
-export default NewForumPostResponsePage;
+const handle = translations.newForumPostResponse;
+
+export default Object.assign(NewForumPostResponsePage, { handle });
diff --git a/client/app/bundles/course/assessment/question/multiple-responses/NewMcqMrqPage.tsx b/client/app/bundles/course/assessment/question/multiple-responses/NewMcqMrqPage.tsx
index fbd4982f9e7..e978e306de1 100644
--- a/client/app/bundles/course/assessment/question/multiple-responses/NewMcqMrqPage.tsx
+++ b/client/app/bundles/course/assessment/question/multiple-responses/NewMcqMrqPage.tsx
@@ -8,6 +8,7 @@ import {
 
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Preload from 'lib/components/wrappers/Preload';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import translations from '../../translations';
@@ -33,13 +34,15 @@ const NEW_MCQ_MRQ_TEMPLATE: McqMrqData['question'] = {
   randomizeOptions: false,
 };
 
+const getMcqMrqType = (params: URLSearchParams): McqMrqFormData['mcqMrqType'] =>
+  params.get('multiple_choice') === 'true' ? 'mcq' : 'mrq';
+
 const NewMcqMrqPage = (): JSX.Element => {
   const { t } = useTranslation();
 
   const [params] = useSearchParams();
-  const isMcq = params.get('multiple_choice') === 'true';
+  const type = getMcqMrqType(params);
 
-  const type: McqMrqFormData['mcqMrqType'] = isMcq ? 'mcq' : 'mrq';
   const [fetchData, FormComponent] = newMcqMrqAdapters[type];
 
   const handleSubmit = (data: McqMrqData): Promise<void> =>
@@ -58,4 +61,12 @@ const NewMcqMrqPage = (): JSX.Element => {
   );
 };
 
-export default NewMcqMrqPage;
+const handle: DataHandle = (_, location) => {
+  const searchParams = new URLSearchParams(location.search);
+
+  return getMcqMrqType(searchParams) === 'mcq'
+    ? translations.newMultipleChoice
+    : translations.newMultipleResponse;
+};
+
+export default Object.assign(NewMcqMrqPage, { handle });
diff --git a/client/app/bundles/course/assessment/question/programming/NewProgrammingQuestionPage.tsx b/client/app/bundles/course/assessment/question/programming/NewProgrammingQuestionPage.tsx
index 5e640ae65d5..52a53d00871 100644
--- a/client/app/bundles/course/assessment/question/programming/NewProgrammingQuestionPage.tsx
+++ b/client/app/bundles/course/assessment/question/programming/NewProgrammingQuestionPage.tsx
@@ -8,6 +8,8 @@ import {
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Preload from 'lib/components/wrappers/Preload';
 
+import translations from '../../translations';
+
 import buildFormData from './commons/builder';
 import { create, fetchEdit, fetchNew, update } from './operations';
 import ProgrammingForm from './ProgrammingForm';
@@ -67,4 +69,6 @@ const NewProgrammingQuestionPage = (): JSX.Element => {
   );
 };
 
-export default NewProgrammingQuestionPage;
+const handle = translations.newProgramming;
+
+export default Object.assign(NewProgrammingQuestionPage, { handle });
diff --git a/client/app/bundles/course/assessment/question/scribing/ScribingQuestion.tsx b/client/app/bundles/course/assessment/question/scribing/ScribingQuestion.tsx
index 0e268caaf9c..2d93df33c17 100644
--- a/client/app/bundles/course/assessment/question/scribing/ScribingQuestion.tsx
+++ b/client/app/bundles/course/assessment/question/scribing/ScribingQuestion.tsx
@@ -5,6 +5,8 @@ import { getScribingId } from 'lib/helpers/url-helpers';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
+import assessmentsTranslations from '../../translations';
+
 import translations from './ScribingQuestionForm/translations';
 import { fetchScribingQuestion, fetchSkills } from './operations';
 import ScribingQuestionForm from './ScribingQuestionForm';
@@ -38,4 +40,6 @@ const ScribingQuestion = (): JSX.Element => {
   );
 };
 
-export default ScribingQuestion;
+const handle = assessmentsTranslations.newScribing;
+
+export default Object.assign(ScribingQuestion, { handle });
diff --git a/client/app/bundles/course/assessment/question/text-responses/NewTextResponsePage.tsx b/client/app/bundles/course/assessment/question/text-responses/NewTextResponsePage.tsx
index 427cf2f0e73..ccacd59eb07 100644
--- a/client/app/bundles/course/assessment/question/text-responses/NewTextResponsePage.tsx
+++ b/client/app/bundles/course/assessment/question/text-responses/NewTextResponsePage.tsx
@@ -8,6 +8,7 @@ import {
 
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Preload from 'lib/components/wrappers/Preload';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import translations from '../../translations';
@@ -52,15 +53,16 @@ const newTextResponseAdapter: Record<
   ],
 };
 
+const getQuestionType = (
+  params: URLSearchParams,
+): TextResponseFormData['questionType'] =>
+  params.get('file_upload') === 'true' ? 'file_upload' : 'text_response';
+
 const NewTextResponsePage = (): JSX.Element => {
   const { t } = useTranslation();
 
   const [params] = useSearchParams();
-  const isFileUpload = params.get('file_upload') === 'true';
-
-  const type: TextResponseFormData['questionType'] = isFileUpload
-    ? 'file_upload'
-    : 'text_response';
+  const type = getQuestionType(params);
 
   const [fetchData, FormComponent, initialFormValue] =
     newTextResponseAdapter[type];
@@ -81,4 +83,12 @@ const NewTextResponsePage = (): JSX.Element => {
   );
 };
 
-export default NewTextResponsePage;
+const handle: DataHandle = (_, location) => {
+  const searchParams = new URLSearchParams(location.search);
+
+  return getQuestionType(searchParams) === 'file_upload'
+    ? translations.newFileUpload
+    : translations.newTextResponse;
+};
+
+export default Object.assign(NewTextResponsePage, { handle });
diff --git a/client/app/bundles/course/assessment/question/voice-responses/NewVoicePage.tsx b/client/app/bundles/course/assessment/question/voice-responses/NewVoicePage.tsx
index af074b29219..a33ff5c2db4 100644
--- a/client/app/bundles/course/assessment/question/voice-responses/NewVoicePage.tsx
+++ b/client/app/bundles/course/assessment/question/voice-responses/NewVoicePage.tsx
@@ -39,4 +39,6 @@ const NewVoicePage = (): JSX.Element => {
   );
 };
 
-export default NewVoicePage;
+const handle = translations.newAudioResponse;
+
+export default Object.assign(NewVoicePage, { handle });
diff --git a/client/app/bundles/course/assessment/sessions/operations.ts b/client/app/bundles/course/assessment/sessions/operations.ts
index cb8ee5b7683..5df77f6e86a 100644
--- a/client/app/bundles/course/assessment/sessions/operations.ts
+++ b/client/app/bundles/course/assessment/sessions/operations.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { AxiosError } from 'axios';
 import {
   SessionFormData,
diff --git a/client/app/bundles/course/assessment/sessions/pages/AssessmentSessionNew/index.tsx b/client/app/bundles/course/assessment/sessions/pages/AssessmentSessionNew/index.tsx
index 6182a583f9f..975be6bc9a5 100644
--- a/client/app/bundles/course/assessment/sessions/pages/AssessmentSessionNew/index.tsx
+++ b/client/app/bundles/course/assessment/sessions/pages/AssessmentSessionNew/index.tsx
@@ -57,7 +57,7 @@ const AssessmentSessionNew = (): JSX.Element => {
       });
   };
   return (
-    <div className="absolute left-1/2 top-1/4 max-w-md text-center">
+    <div className="m-auto h-full max-w-md py-32 text-center">
       <Lock className="text-9xl" />
       <Typography>{t(translations.lockedSessionAssessment)}</Typography>
       <form
diff --git a/client/app/bundles/course/assessment/skills/components/tables/SkillsTable.scss b/client/app/bundles/course/assessment/skills/components/tables/SkillsTable.scss
deleted file mode 100644
index 9ed1e52e722..00000000000
--- a/client/app/bundles/course/assessment/skills/components/tables/SkillsTable.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// scss-lint:disable ColorVariable
-::-webkit-scrollbar-track {
-  background-color: #f5f5f5;
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar {
-  background-color: #f5f5f5;
-  width: 12px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgb(182, 182, 182);
-  border-radius: 10px;
-}
diff --git a/client/app/bundles/course/assessment/skills/components/tables/SkillsTable.tsx b/client/app/bundles/course/assessment/skills/components/tables/SkillsTable.tsx
index e2f6bdb503b..4760609e4cf 100644
--- a/client/app/bundles/course/assessment/skills/components/tables/SkillsTable.tsx
+++ b/client/app/bundles/course/assessment/skills/components/tables/SkillsTable.tsx
@@ -29,8 +29,6 @@ import Note from 'lib/components/core/Note';
 import { TableEnum } from '../../types';
 import SkillManagementButtons from '../buttons/SkillManagementButtons';
 
-import './SkillsTable.scss';
-
 interface Props extends WrappedComponentProps {
   data: SkillBranchMiniEntity[];
   tableType: TableEnum;
@@ -69,11 +67,11 @@ const translations = defineMessages({
   },
   addSkill: {
     id: 'course.assessment.skills.SkillsTable.addSkill',
-    defaultMessage: 'Add Skill',
+    defaultMessage: 'Skill',
   },
   addSkillBranch: {
     id: 'course.assessment.skills.SkillsTable.addSkillBranch',
-    defaultMessage: 'Add Skill Branch',
+    defaultMessage: 'Skill Branch',
   },
 });
 
@@ -181,6 +179,7 @@ const SkillsTable: FC<Props> = (props: Props) => {
               background: 'white',
               fontSize: 14,
               marginLeft: 12,
+              whiteSpace: 'nowrap',
             }}
             variant="outlined"
           >
@@ -272,6 +271,7 @@ const SkillsTable: FC<Props> = (props: Props) => {
             >
               <Slide
                 appear
+                className="border-only-t-neutral-200"
                 container={containerRef.current}
                 direction="up"
                 in={isOpen}
@@ -280,8 +280,6 @@ const SkillsTable: FC<Props> = (props: Props) => {
                   overflow: 'auto',
                   maxHeight: '20vh',
                   minHeight: '20vh',
-                  borderRadius: '5px',
-                  borderTop: '1px solid #aaaaaa',
                 }}
               >
                 <Box>
diff --git a/client/app/bundles/course/assessment/skills/pages/SkillsIndex/index.tsx b/client/app/bundles/course/assessment/skills/pages/SkillsIndex/index.tsx
index 03fe8baf3ce..a6144fdc6cb 100644
--- a/client/app/bundles/course/assessment/skills/pages/SkillsIndex/index.tsx
+++ b/client/app/bundles/course/assessment/skills/pages/SkillsIndex/index.tsx
@@ -8,8 +8,8 @@ import {
   SkillMiniEntity,
 } from 'types/course/assessment/skills/skills';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import SkillDialog from '../../components/dialogs/SkillDialog';
@@ -137,14 +137,23 @@ const SkillsIndex: FC<Props> = (props) => {
   };
 
   return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.skills)} />
+    <Page title={intl.formatMessage(translations.skills)} unpadded>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
         <>
-          <Grid columnGap={0.2} container direction="row">
-            <Grid id="skill-branches" item xs>
+          <Grid
+            className="border-only-b-neutral-200"
+            columnGap={0.2}
+            container
+            direction="row"
+          >
+            <Grid
+              className="border-only-r-neutral-200"
+              id="skill-branches"
+              item
+              xs
+            >
               <SkillsTable
                 addClick={newSkillBranchClick}
                 addDisabled={!skillPermissions.canCreateSkill}
@@ -185,8 +194,10 @@ const SkillsIndex: FC<Props> = (props) => {
           />
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(SkillsIndex);
+const handle = translations.skills;
+
+export default Object.assign(injectIntl(SkillsIndex), { handle });
diff --git a/client/app/bundles/course/assessment/submission/components/answers/ForumPostResponse/SelectedPostCard.jsx b/client/app/bundles/course/assessment/submission/components/answers/ForumPostResponse/SelectedPostCard.jsx
index 4e486eabe83..61415073808 100644
--- a/client/app/bundles/course/assessment/submission/components/answers/ForumPostResponse/SelectedPostCard.jsx
+++ b/client/app/bundles/course/assessment/submission/components/answers/ForumPostResponse/SelectedPostCard.jsx
@@ -1,16 +1,12 @@
 import { Component } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import {
-  ChevronRight,
-  Delete,
-  ExpandMore,
-  OpenInNew,
-} from '@mui/icons-material';
+import { ChevronRight, Delete, ExpandMore } from '@mui/icons-material';
 import { IconButton } from '@mui/material';
 import { green, red } from '@mui/material/colors';
 import PropTypes from 'prop-types';
 
 import { postPackShape } from 'course/assessment/submission/propTypes';
+import Link from 'lib/components/core/Link';
 import { getForumTopicURL, getForumURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 
@@ -68,9 +64,9 @@ export default class SelectedPostCard extends Component {
       renderedName = `${renderedName.slice(0, MAX_NAME_LENGTH)}...`;
     }
     return (
-      <a href={url} rel="noopener noreferrer" target="_blank">
-        {renderedName} <OpenInNew fontSize="inherit" />
-      </a>
+      <Link opensInNewTab to={url}>
+        {renderedName}
+      </Link>
     );
   }
 
diff --git a/client/app/bundles/course/assessment/submission/components/answers/Programming/ProgrammingFile.jsx b/client/app/bundles/course/assessment/submission/components/answers/Programming/ProgrammingFile.jsx
index 8acbe50584b..a37df45a3e1 100644
--- a/client/app/bundles/course/assessment/submission/components/answers/Programming/ProgrammingFile.jsx
+++ b/client/app/bundles/course/assessment/submission/components/answers/Programming/ProgrammingFile.jsx
@@ -5,6 +5,7 @@ import { Paper } from '@mui/material';
 import { yellow } from '@mui/material/colors';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
 import withRouter from 'lib/components/navigation/withRouter';
 import { getProgrammingFileURL } from 'lib/helpers/url-builders';
 
@@ -64,9 +65,9 @@ class ProgrammingFile extends Component {
           <span>
             <FormattedMessage {...translations.sizeTooBig} />
             &nbsp;
-            <a href={downloadLink}>
+            <Link href={downloadLink}>
               <FormattedMessage {...translations.downloadFile} />
-            </a>
+            </Link>
           </span>
         </Paper>
       );
diff --git a/client/app/bundles/course/assessment/submission/containers/GradingPanel.jsx b/client/app/bundles/course/assessment/submission/containers/GradingPanel.jsx
index 593055126fe..4494e9df66a 100644
--- a/client/app/bundles/course/assessment/submission/containers/GradingPanel.jsx
+++ b/client/app/bundles/course/assessment/submission/containers/GradingPanel.jsx
@@ -14,6 +14,7 @@ import {
 } from '@mui/material';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { formatLongDateTime } from 'lib/moment';
@@ -49,9 +50,9 @@ class VisibleGradingPanel extends Component {
     const courseId = getCourseId();
     if (courseUser && courseUser.id) {
       return (
-        <a href={getCourseUserURL(courseId, courseUser.id)}>
+        <Link to={getCourseUserURL(courseId, courseUser.id)}>
           {courseUser.name}
-        </a>
+        </Link>
       );
     }
     if (courseUser) {
@@ -149,7 +150,7 @@ class VisibleGradingPanel extends Component {
     if (showGrader) {
       if (grader && grader.id) {
         graderInfo = (
-          <a href={getCourseUserURL(courseId, grader.id)}>{grader.name}</a>
+          <Link to={getCourseUserURL(courseId, grader.id)}>{grader.name}</Link>
         );
       } else if (grader) {
         // System or deleted users should not be linked to
diff --git a/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js b/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js
index 576a59257fb..a6a3c8bf384 100644
--- a/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js
+++ b/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js
@@ -1,7 +1,7 @@
 import { mount } from 'enzyme';
 
 import { VisibleTestCaseView } from 'course/assessment/submission/containers/TestCaseView';
-import ProviderWrapper from 'lib/components/wrappers/ProviderWrapper';
+import Providers from 'lib/components/wrappers/Providers';
 
 import { workflowStates } from '../../../constants';
 
@@ -65,9 +65,9 @@ describe('TestCaseView', () => {
   describe('when viewing as staff', () => {
     it('renders all test cases and standard streams', () => {
       const testCaseView = mount(
-        <ProviderWrapper>
+        <Providers>
           <VisibleTestCaseView {...defaultStaffViewProps} />
-        </ProviderWrapper>,
+        </Providers>,
       );
 
       expect(testCaseView.find(publicTestCases).exists()).toBe(true);
@@ -79,9 +79,9 @@ describe('TestCaseView', () => {
 
     it('renders staff-only warnings', () => {
       const testCaseView = mount(
-        <ProviderWrapper>
+        <Providers>
           <VisibleTestCaseView {...defaultStaffViewProps} />
-        </ProviderWrapper>,
+        </Providers>,
       );
 
       expect(testCaseView.find(privateWarningIcon).exists()).toBe(true);
@@ -93,14 +93,14 @@ describe('TestCaseView', () => {
     describe('when showEvaluation & showPrivate are true', () => {
       it('renders staff-only warnings when assessment is not yet published', () => {
         const testCaseView = mount(
-          <ProviderWrapper>
+          <Providers>
             <VisibleTestCaseView
               {...defaultStaffViewProps}
               showEvaluation
               showPrivate
               submissionState={workflowStates.Attempting}
             />
-          </ProviderWrapper>,
+          </Providers>,
         );
 
         expect(testCaseView.find(privateWarningIcon).exists()).toBe(true);
@@ -109,13 +109,13 @@ describe('TestCaseView', () => {
 
       it('does not render staff-only warnings when assessment is published', () => {
         const testCaseView = mount(
-          <ProviderWrapper>
+          <Providers>
             <VisibleTestCaseView
               {...defaultStaffViewProps}
               showEvaluation
               showPrivate
             />
-          </ProviderWrapper>,
+          </Providers>,
         );
 
         expect(testCaseView.find(privateWarningIcon).exists()).toBe(false);
@@ -126,12 +126,12 @@ describe('TestCaseView', () => {
     describe('when students can see standard streams', () => {
       it('does not render staff-only warnings', () => {
         const testCaseView = mount(
-          <ProviderWrapper>
+          <Providers>
             <VisibleTestCaseView
               {...defaultStaffViewProps}
               showStdoutAndStderr
             />
-          </ProviderWrapper>,
+          </Providers>,
         );
 
         expect(testCaseView.find(standardOutputWarningIcon).exists()).toBe(
@@ -147,14 +147,14 @@ describe('TestCaseView', () => {
   describe('when viewing as student', () => {
     it('does not show any staff-only warnings', () => {
       const testCaseView = mount(
-        <ProviderWrapper>
+        <Providers>
           <VisibleTestCaseView
             {...defaultTestCaseViewProps}
             showEvaluation
             showPrivate
             showStdoutAndStderr
           />
-        </ProviderWrapper>,
+        </Providers>,
       );
 
       expect(testCaseView.find(privateWarningIcon).exists()).toBe(false);
@@ -165,12 +165,12 @@ describe('TestCaseView', () => {
 
     it('shows standard streams when the flag is enabled', () => {
       const testCaseView = mount(
-        <ProviderWrapper>
+        <Providers>
           <VisibleTestCaseView
             {...defaultTestCaseViewProps}
             showStdoutAndStderr
           />
-        </ProviderWrapper>,
+        </Providers>,
       );
 
       expect(testCaseView.find(standardOutput).exists()).toBe(true);
@@ -180,13 +180,13 @@ describe('TestCaseView', () => {
     describe('when showEvaluation & showPrivate flags are enabled', () => {
       it('shows private and evaluation tests after assessment is published', () => {
         const testCaseView = mount(
-          <ProviderWrapper>
+          <Providers>
             <VisibleTestCaseView
               {...defaultTestCaseViewProps}
               showEvaluation
               showPrivate
             />
-          </ProviderWrapper>,
+          </Providers>,
         );
 
         expect(testCaseView.find(privateTestCases).exists()).toBe(true);
@@ -195,14 +195,14 @@ describe('TestCaseView', () => {
 
       it('does not show private and evaluation tests before assessment is published', () => {
         const testCaseView = mount(
-          <ProviderWrapper>
+          <Providers>
             <VisibleTestCaseView
               {...defaultTestCaseViewProps}
               showEvaluation
               showPrivate
               submissionState={workflowStates.Attempting}
             />
-          </ProviderWrapper>,
+          </Providers>,
         );
 
         expect(testCaseView.find(privateTestCases).exists()).toBe(false);
diff --git a/client/app/bundles/course/assessment/submission/containers/UploadedFileView.jsx b/client/app/bundles/course/assessment/submission/containers/UploadedFileView.jsx
index 376579dad89..9ef8a80b547 100644
--- a/client/app/bundles/course/assessment/submission/containers/UploadedFileView.jsx
+++ b/client/app/bundles/course/assessment/submission/containers/UploadedFileView.jsx
@@ -5,6 +5,7 @@ import { Chip } from '@mui/material';
 import PropTypes from 'prop-types';
 
 import ConfirmationDialog from 'lib/components/core/dialogs/ConfirmationDialog';
+import Link from 'lib/components/core/Link';
 
 import destroy from '../actions/attachments';
 import { workflowStates } from '../constants';
@@ -65,12 +66,9 @@ class VisibleUploadedFileView extends Component {
         key={attachment.id}
         clickable
         label={
-          <a
-            download
-            href={VisibleUploadedFileView.buildAttachmentUrl(attachment)}
-          >
+          <Link href={VisibleUploadedFileView.buildAttachmentUrl(attachment)}>
             {attachment.name}
-          </a>
+          </Link>
         }
         onDelete={onDelete}
         style={styles.chip}
diff --git a/client/app/bundles/course/assessment/submission/pages/LogsIndex/LogsHead.tsx b/client/app/bundles/course/assessment/submission/pages/LogsIndex/LogsHead.tsx
index 749933ae80b..e468136f920 100644
--- a/client/app/bundles/course/assessment/submission/pages/LogsIndex/LogsHead.tsx
+++ b/client/app/bundles/course/assessment/submission/pages/LogsIndex/LogsHead.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { Link as RouterLink } from 'react-router-dom';
 import { Chip, TableBody, TableCell, TableRow } from '@mui/material';
 import palette from 'theme/palette';
 import { LogsMainInfo } from 'types/course/assessment/submission/logs';
@@ -49,9 +48,7 @@ const LogsHead: FC<Props> = (props) => {
             {t(translations.assessmentTitle)}
           </TableCell>
           <TableCell>
-            <RouterLink to={info.assessmentUrl}>
-              {info.assessmentTitle}
-            </RouterLink>
+            <Link to={info.assessmentUrl}>{info.assessmentTitle}</Link>
           </TableCell>
         </TableRow>
 
@@ -67,7 +64,7 @@ const LogsHead: FC<Props> = (props) => {
             {t(translations.submissionWorkflowState)}
           </TableCell>
           <TableCell>
-            <RouterLink to={info.editUrl}>
+            <Link to={info.editUrl}>
               <Chip
                 label={translateStatus(info.submissionWorkflowState)}
                 style={{
@@ -76,7 +73,7 @@ const LogsHead: FC<Props> = (props) => {
                     palette.submissionStatus[info.submissionWorkflowState],
                 }}
               />
-            </RouterLink>
+            </Link>
           </TableCell>
         </TableRow>
       </TableBody>
diff --git a/client/app/bundles/course/assessment/submission/pages/LogsIndex/index.tsx b/client/app/bundles/course/assessment/submission/pages/LogsIndex/index.tsx
index a4479bad152..0ade3a256db 100644
--- a/client/app/bundles/course/assessment/submission/pages/LogsIndex/index.tsx
+++ b/client/app/bundles/course/assessment/submission/pages/LogsIndex/index.tsx
@@ -1,5 +1,5 @@
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import Preload from 'lib/components/wrappers/Preload';
 import { getAssessmentSubmissionURL } from 'lib/helpers/url-builders';
 import { getAssessmentId, getCourseId } from 'lib/helpers/url-helpers';
@@ -17,22 +17,18 @@ const LogsIndex = (): JSX.Element => {
   return (
     <Preload render={<LoadingIndicator />} while={fetchLogs}>
       {(data): JSX.Element => (
-        <div className="space-y-5">
-          <PageHeader
-            returnLink={getAssessmentSubmissionURL(
-              getCourseId(),
-              getAssessmentId(),
-            )}
-            title={t(translations.accessLogs)}
-          />
-          <div>
-            <LogsHead with={data.info} />
-            <LogsContent with={data.logs} />
-          </div>
-        </div>
+        <Page
+          backTo={getAssessmentSubmissionURL(getCourseId(), getAssessmentId())}
+          title={t(translations.accessLogs)}
+        >
+          <LogsHead with={data.info} />
+          <LogsContent with={data.logs} />
+        </Page>
       )}
     </Preload>
   );
 };
 
-export default LogsIndex;
+const handle = translations.accessLogs;
+
+export default Object.assign(LogsIndex, { handle });
diff --git a/client/app/bundles/course/assessment/submission/pages/SubmissionEditIndex/index.jsx b/client/app/bundles/course/assessment/submission/pages/SubmissionEditIndex/index.jsx
index 959ba6561a9..e6b2596d210 100644
--- a/client/app/bundles/course/assessment/submission/pages/SubmissionEditIndex/index.jsx
+++ b/client/app/bundles/course/assessment/submission/pages/SubmissionEditIndex/index.jsx
@@ -13,11 +13,13 @@ import {
 import PropTypes from 'prop-types';
 import withHeartbeatWorker from 'workers/withHeartbeatWorker';
 
+import Page from 'lib/components/core/layouts/Page';
 import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import withRouter from 'lib/components/navigation/withRouter';
 import { getUrlParameter } from 'lib/helpers/url-helpers';
 
+import assessmentsTranslations from '../../../translations';
 import {
   autogradeSubmission,
   enterStudentView,
@@ -426,11 +428,11 @@ class VisibleSubmissionEditIndex extends Component {
     if (isLoading) return <LoadingIndicator />;
     if (isSubmissionBlocked) return <BlockedSubmission />;
     return (
-      <>
+      <Page>
         {this.renderAssessment()}
         {this.renderProgress()}
         {this.renderContent()}
-      </>
+      </Page>
     );
   }
 }
@@ -486,8 +488,10 @@ function mapStateToProps({ assessments: { submission } }) {
   };
 }
 
+const handle = assessmentsTranslations.attempt;
+
 const SubmissionEditIndex = withRouter(
   withHeartbeatWorker(connect(mapStateToProps)(VisibleSubmissionEditIndex)),
 );
 
-export default SubmissionEditIndex;
+export default Object.assign(SubmissionEditIndex, { handle });
diff --git a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTableRow.jsx b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTableRow.jsx
index 290ae586b0a..6c61248151c 100644
--- a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTableRow.jsx
+++ b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/SubmissionsTableRow.jsx
@@ -1,14 +1,16 @@
 import { memo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
+import { useNavigate } from 'react-router-dom';
 import { Warning } from '@mui/icons-material';
 import Delete from '@mui/icons-material/Delete';
 import History from '@mui/icons-material/History';
 import RemoveCircle from '@mui/icons-material/RemoveCircle';
-import { Chip, IconButton, Link, TableCell, TableRow } from '@mui/material';
+import { Chip, IconButton, TableCell, TableRow } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
 import ConfirmationDialog from 'lib/components/core/dialogs/ConfirmationDialog';
+import Link from 'lib/components/core/Link';
 import GhostIcon from 'lib/components/icons/GhostIcon';
 import {
   getCourseUserURL,
@@ -28,11 +30,6 @@ import translations from '../../translations';
 import submissionsTranslations from './translations';
 
 const styles = {
-  nameWrapper: {
-    display: 'inline',
-    flexWrap: 'nowrap',
-    alignItems: 'center',
-  },
   chip: {
     width: 100,
   },
@@ -81,6 +78,8 @@ const SubmissionsTableRow = (props) => {
     deleteConfirmation: false,
   });
 
+  const navigate = useNavigate();
+
   const getGradeString = () => {
     if (submission.workflowState === workflowStates.Unstarted) return null;
 
@@ -174,17 +173,23 @@ const SubmissionsTableRow = (props) => {
 
     return (
       <span className="submission-access-logs" data-tooltip-id="access-logs">
-        <a href={getSubmissionLogsURL(courseId, assessmentId, submission.id)}>
-          <IconButton size="large" style={styles.button}>
-            <History
-              htmlColor={
-                palette.submissionIcon.history[
-                  submission.logCount > 1 ? 'none' : 'default'
-                ]
-              }
-            />
-          </IconButton>
-        </a>
+        <IconButton
+          onClick={() =>
+            navigate(
+              getSubmissionLogsURL(courseId, assessmentId, submission.id),
+            )
+          }
+          size="large"
+          style={styles.button}
+        >
+          <History
+            htmlColor={
+              palette.submissionIcon.history[
+                submission.logCount > 1 ? 'none' : 'default'
+              ]
+            }
+          />
+        </IconButton>
       </span>
     );
   };
@@ -292,12 +297,9 @@ const SubmissionsTableRow = (props) => {
         <TableCell style={styles.tableCell}>
           <span className="flex items-center">
             {renderPhantomUserIcon(submission)}
-            <a
-              href={getCourseUserURL(courseId, submission.courseUser.id)}
-              style={styles.nameWrapper}
-            >
+            <Link to={getCourseUserURL(courseId, submission.courseUser.id)}>
               {submission.courseUser.name}
-            </a>
+            </Link>
           </span>
         </TableCell>
         <TableCell style={tableCenterCellStyle}>
@@ -321,16 +323,14 @@ const SubmissionsTableRow = (props) => {
           {submission.graders && submission.graders.length > 0
             ? submission.graders.map((grader) => (
                 <div key={`grader_${grader.id}`}>
-                  {!grader.id || grader.id === 0 ? (
-                    <div style={styles.nameWrapper}>{grader.name}</div>
-                  ) : (
-                    <a
-                      href={getCourseUserURL(courseId, grader.id)}
-                      style={styles.nameWrapper}
-                    >
-                      {grader.name}
-                    </a>
-                  )}
+                  <Link
+                    to={
+                      Boolean(grader.id && grader.id !== 0) &&
+                      getCourseUserURL(courseId, grader.id)
+                    }
+                  >
+                    {grader.name}
+                  </Link>
                   <br />
                 </div>
               ))
diff --git a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx
index aba6a2ce9b4..1c75aef8c7f 100644
--- a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx
+++ b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx
@@ -1,6 +1,7 @@
+import { BrowserRouter } from 'react-router-dom';
 import { mount } from 'enzyme';
 
-import ProviderWrapper from 'lib/components/wrappers/ProviderWrapper';
+import Providers from 'lib/components/wrappers/Providers';
 
 import SubmissionsTable from '../SubmissionsTable';
 
@@ -49,9 +50,11 @@ const defaultProps = {
 const setupTest = (propsOverrides) => {
   const props = { ...defaultProps, ...propsOverrides };
   const submissionsTable = mount(
-    <ProviderWrapper>
-      <SubmissionsTable {...props} />
-    </ProviderWrapper>,
+    <Providers>
+      <BrowserRouter>
+        <SubmissionsTable {...props} />
+      </BrowserRouter>
+    </Providers>,
   );
 
   return {
diff --git a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/index.jsx b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/index.jsx
index a91d9b8c92c..751a4689c01 100644
--- a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/index.jsx
+++ b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/index.jsx
@@ -1,15 +1,8 @@
 import { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import Group from '@mui/icons-material/Group';
-import Person from '@mui/icons-material/Person';
-import PersonOutline from '@mui/icons-material/PersonOutline';
 import {
   Button,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
   CircularProgress,
   FormControlLabel,
   Switch,
@@ -21,9 +14,11 @@ import palette from 'theme/palette';
 
 import BarChart from 'lib/components/core/BarChart';
 import ConfirmationDialog from 'lib/components/core/dialogs/ConfirmationDialog';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import withRouter from 'lib/components/navigation/withRouter';
 
+import assessmentsTranslations from '../../../translations';
 import { purgeSubmissionStore } from '../../actions';
 import {
   deleteAllSubmissions,
@@ -161,7 +156,7 @@ class VisibleSubmissionsIndex extends Component {
 
   renderHeader(shownSubmissions) {
     const {
-      assessment: { title, canPublishGrades, canForceSubmit },
+      assessment: { canPublishGrades, canForceSubmit },
       isPublishing,
       isForceSubmitting,
       isDeleting,
@@ -178,34 +173,32 @@ class VisibleSubmissionsIndex extends Component {
     const showRemindButton = tab !== 'staff-tab';
 
     return (
-      <Card style={{ marginBottom: 20 }}>
-        <CardHeader subheader="Submissions" title={<h3>{title}</h3>} />
-        <CardContent style={{ paddingTop: 0, paddingBottom: 0 }}>
-          {this.renderBarChart(shownSubmissions)}
-          <FormControlLabel
-            control={
-              <Switch
-                checked={includePhantoms}
-                className="toggle-phantom"
-                color="primary"
-                onChange={() =>
-                  this.setState({ includePhantoms: !includePhantoms })
-                }
-              />
-            }
-            label={
-              <b>
-                <FormattedMessage
-                  {...submissionsTranslations.includePhantoms}
-                />
-              </b>
-            }
-            labelPlacement="end"
-          />
-        </CardContent>
-        <CardActions>
+      <>
+        {this.renderBarChart(shownSubmissions)}
+
+        <FormControlLabel
+          control={
+            <Switch
+              checked={includePhantoms}
+              className="toggle-phantom"
+              color="primary"
+              onChange={() =>
+                this.setState({ includePhantoms: !includePhantoms })
+              }
+            />
+          }
+          label={
+            <b>
+              <FormattedMessage {...submissionsTranslations.includePhantoms} />
+            </b>
+          }
+          labelPlacement="end"
+        />
+
+        <section className="-m-2 flex-wrap">
           {canPublishGrades && (
             <Button
+              className="m-2"
               color="primary"
               disabled={
                 disableButtons ||
@@ -218,8 +211,10 @@ class VisibleSubmissionsIndex extends Component {
               <FormattedMessage {...submissionsTranslations.publishGrades} />
             </Button>
           )}
+
           {canForceSubmit && (
             <Button
+              className="m-2"
               color="primary"
               disabled={
                 disableButtons ||
@@ -234,8 +229,10 @@ class VisibleSubmissionsIndex extends Component {
               <FormattedMessage {...submissionsTranslations.forceSubmit} />
             </Button>
           )}
+
           {showRemindButton && (
             <Button
+              className="m-2"
               color="primary"
               disabled={
                 disableButtons ||
@@ -250,8 +247,8 @@ class VisibleSubmissionsIndex extends Component {
               <FormattedMessage {...submissionsTranslations.remind} />
             </Button>
           )}
-        </CardActions>
-      </Card>
+        </section>
+      </>
     );
   }
 
@@ -371,20 +368,13 @@ class VisibleSubmissionsIndex extends Component {
   renderTabs(myStudentsExist) {
     return (
       <Tabs
-        onChange={(event, value) => {
-          this.setState({ tab: value });
-        }}
-        style={{
-          backgroundColor: palette.background.default,
-          color: palette.submissionIcon.person,
-        }}
-        TabIndicatorProps={{ color: 'primary', style: { height: 5 } }}
+        className="border-only-y-neutral-200"
+        onChange={(_, value) => this.setState({ tab: value })}
         value={this.state.tab}
         variant="fullWidth"
       >
         {myStudentsExist && (
           <Tab
-            icon={<Group style={{ color: palette.submissionIcon.person }} />}
             id="my-students-tab"
             label={<FormattedMessage {...submissionsTranslations.myStudents} />}
             style={{ color: palette.submissionIcon.person }}
@@ -392,16 +382,12 @@ class VisibleSubmissionsIndex extends Component {
           />
         )}
         <Tab
-          icon={<Person style={{ color: palette.submissionIcon.person }} />}
           id="students-tab"
           label={<FormattedMessage {...submissionsTranslations.students} />}
           value="students-tab"
         />
 
         <Tab
-          icon={
-            <PersonOutline style={{ color: palette.submissionIcon.person }} />
-          }
           id="staff-tab"
           label={<FormattedMessage {...submissionsTranslations.staff} />}
           value="staff-tab"
@@ -411,7 +397,7 @@ class VisibleSubmissionsIndex extends Component {
   }
 
   render() {
-    const { isLoading, submissions } = this.props;
+    const { assessment, isLoading, submissions } = this.props;
     const {
       includePhantoms,
       tab,
@@ -472,9 +458,21 @@ class VisibleSubmissionsIndex extends Component {
     }
 
     return (
-      <>
-        {this.renderHeader(shownSubmissions)}
+      <Page
+        title={
+          <FormattedMessage
+            {...translations.submissionsHeader}
+            values={{ assessment: assessment.title }}
+          />
+        }
+        unpadded
+      >
+        <Page.PaddedSection>
+          {this.renderHeader(shownSubmissions)}
+        </Page.PaddedSection>
+
         {this.renderTabs(myStudentsExist)}
+
         {myStudentsExist &&
           this.renderTable(
             myStudentSubmissions,
@@ -482,28 +480,33 @@ class VisibleSubmissionsIndex extends Component {
             'your students',
             tab === 'my-students-tab',
           )}
+
         {this.renderTable(
           staffSubmissions,
           handleStaffParams,
           'staff',
           tab === 'staff-tab',
         )}
+
         {this.renderTable(
           studentSubmissions,
           handleStudentsParams,
           'students',
           tab === 'students-tab',
         )}
+
         {publishConfirmation &&
           this.renderPublishConfirmation(shownSubmissions, handleActionParams)}
+
         {forceSubmitConfirmation &&
           this.renderForceSubmitConfirmation(
             shownSubmissions,
             handleActionParams,
           )}
+
         {remindConfirmation &&
           this.renderReminderConfirmation(shownSubmissions, handleActionParams)}
-      </>
+      </Page>
     );
   }
 }
@@ -553,5 +556,7 @@ function mapStateToProps({ assessments: { submission } }) {
   };
 }
 
+const handle = assessmentsTranslations.submissions;
+
 const SubmissionsIndex = connect(mapStateToProps)(VisibleSubmissionsIndex);
-export default withRouter(SubmissionsIndex);
+export default Object.assign(withRouter(SubmissionsIndex), { handle });
diff --git a/client/app/bundles/course/assessment/submission/translations.ts b/client/app/bundles/course/assessment/submission/translations.ts
index ed11e44d722..8162014d5cc 100644
--- a/client/app/bundles/course/assessment/submission/translations.ts
+++ b/client/app/bundles/course/assessment/submission/translations.ts
@@ -1,6 +1,10 @@
 import { defineMessages } from 'react-intl';
 
 const translations = defineMessages({
+  submissionsHeader: {
+    id: 'course.assessment.submission.submissionsHeader',
+    defaultMessage: 'Submissions: {assessment}',
+  },
   studentView: {
     id: 'course.assessment.submission.studentView',
     defaultMessage: 'Student View',
diff --git a/client/app/bundles/course/assessment/submissions/SubmissionsIndex.tsx b/client/app/bundles/course/assessment/submissions/SubmissionsIndex.tsx
index 90bc6f1cea2..e11a14b8c28 100644
--- a/client/app/bundles/course/assessment/submissions/SubmissionsIndex.tsx
+++ b/client/app/bundles/course/assessment/submissions/SubmissionsIndex.tsx
@@ -8,8 +8,8 @@ import {
 } from 'types/course/assessment/submissions';
 
 import BackendPagination from 'lib/components/core/layouts/BackendPagination';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -133,8 +133,7 @@ const SubmissionsIndex = (): JSX.Element => {
   }, [dispatch]);
 
   return (
-    <>
-      <PageHeader title={t(translations.header)} />
+    <Page title={t(translations.header)} unpadded>
       {pageIsLoading ? (
         <LoadingIndicator />
       ) : (
@@ -150,18 +149,21 @@ const SubmissionsIndex = (): JSX.Element => {
             tabValue={tabValue}
           />
 
-          <SubmissionFilter
-            key={`submission-filter-${tabValue}`}
-            categoryNum={tabValue - 2}
-            filter={filter}
-            handleFilterOnClick={handleFilter}
-            selectedFilter={selectedFilter}
-            setPageNum={setPageNum}
-            setSelectedFilter={setSelectedFilter}
-            setTableIsLoading={setTableIsLoading}
-            showDetailFilter={submissionPermissions.canManage && tabValue > 1}
-            tabCategories={tabs.categories}
-          />
+          {submissionPermissions.canManage && tabValue > 1 && (
+            <Page.PaddedSection>
+              <SubmissionFilter
+                key={`submission-filter-${tabValue}`}
+                categoryNum={tabValue - 2}
+                filter={filter}
+                handleFilterOnClick={handleFilter}
+                selectedFilter={selectedFilter}
+                setPageNum={setPageNum}
+                setSelectedFilter={setSelectedFilter}
+                setTableIsLoading={setTableIsLoading}
+                tabCategories={tabs.categories}
+              />
+            </Page.PaddedSection>
+          )}
 
           {!isTabChanging && (
             <BackendPagination
@@ -191,8 +193,10 @@ const SubmissionsIndex = (): JSX.Element => {
           )}
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default SubmissionsIndex;
+const handle = translations.header;
+
+export default Object.assign(SubmissionsIndex, { handle });
diff --git a/client/app/bundles/course/assessment/submissions/components/misc/SubmissionFilter.tsx b/client/app/bundles/course/assessment/submissions/components/misc/SubmissionFilter.tsx
index cc615e99200..1e00fceb046 100644
--- a/client/app/bundles/course/assessment/submissions/components/misc/SubmissionFilter.tsx
+++ b/client/app/bundles/course/assessment/submissions/components/misc/SubmissionFilter.tsx
@@ -9,7 +9,6 @@ import {
 } from 'types/course/assessment/submissions';
 
 interface Props extends WrappedComponentProps {
-  showDetailFilter: boolean;
   filter: SubmissionFilterData;
 
   tabCategories: { id: number; title: string }[];
@@ -50,7 +49,6 @@ const translations = defineMessages({
 const SubmissionFilter: FC<Props> = (props) => {
   const {
     intl,
-    showDetailFilter,
     filter,
     tabCategories,
     categoryNum,
@@ -60,8 +58,6 @@ const SubmissionFilter: FC<Props> = (props) => {
   } = props;
   const disableButton = Object.values(selectedFilter).every((x) => x === null);
 
-  if (!showDetailFilter) return null;
-
   return (
     <Stack className="submissions-filter" spacing={1}>
       <Grid columns={{ xs: 1, md: 3 }} container>
diff --git a/client/app/bundles/course/assessment/submissions/components/tables/SubmissionsTable.tsx b/client/app/bundles/course/assessment/submissions/components/tables/SubmissionsTable.tsx
index 7315f72543c..6d48d5df692 100644
--- a/client/app/bundles/course/assessment/submissions/components/tables/SubmissionsTable.tsx
+++ b/client/app/bundles/course/assessment/submissions/components/tables/SubmissionsTable.tsx
@@ -3,9 +3,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import ErrorIcon from '@mui/icons-material/Error';
 import {
   Chip,
-  Link,
   Stack,
-  Table,
   TableBody,
   TableCell,
   TableHead,
@@ -15,6 +13,9 @@ import palette from 'theme/palette';
 import { SubmissionMiniEntity } from 'types/course/assessment/submissions';
 
 import CustomTooltip from 'lib/components/core/CustomTooltip';
+import Page from 'lib/components/core/layouts/Page';
+import TableContainer from 'lib/components/core/layouts/TableContainer';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
 import { getAssessmentURL, getCourseUserURL } from 'lib/helpers/url-builders';
@@ -63,11 +64,11 @@ const translations = defineMessages({
   },
   tableHeaderTotalGrade: {
     id: 'course.assessment.submissions.SubmissionsTable.tableHeaderTotalGrade',
-    defaultMessage: 'Total Grade',
+    defaultMessage: 'Grade',
   },
   tableHeaderExp: {
     id: 'course.assessment.submissions.SubmissionsTable.tableHeaderExp',
-    defaultMessage: 'Exp Awarded',
+    defaultMessage: 'EXP',
   },
   gradeTooltip: {
     id: 'course.assessment.submissions.SubmissionsTable.gradeTooltip',
@@ -114,14 +115,15 @@ const SubmissionsTable: FC<Props> = (props) => {
     return <LoadingIndicator />;
   }
 
-  if (submissions.length === 0) {
+  if (submissions.length === 0)
     return (
-      <Note message={intl.formatMessage(translations.noSubmissionsMessage)} />
+      <Page.PaddedSection>
+        <Note message={intl.formatMessage(translations.noSubmissionsMessage)} />
+      </Page.PaddedSection>
     );
-  }
 
   return (
-    <Table sx={{ marginBottom: 2 }}>
+    <TableContainer dense variant="bare">
       <TableHead>
         <TableRow>
           <TableCell align="center">
@@ -167,7 +169,7 @@ const SubmissionsTable: FC<Props> = (props) => {
             </TableCell>
             <TableCell>
               <Link
-                href={getCourseUserURL(getCourseId(), submission.courseUserId)}
+                to={getCourseUserURL(getCourseId(), submission.courseUserId)}
                 underline="hover"
               >
                 {submission.courseUserName}
@@ -175,7 +177,7 @@ const SubmissionsTable: FC<Props> = (props) => {
             </TableCell>
             <TableCell>
               <Link
-                href={getAssessmentURL(getCourseId(), submission.assessmentId)}
+                to={getAssessmentURL(getCourseId(), submission.assessmentId)}
                 underline="hover"
               >
                 {submission.assessmentTitle}
@@ -200,7 +202,7 @@ const SubmissionsTable: FC<Props> = (props) => {
                     {submission.teachingStaff?.map((staff) => (
                       <Link
                         key={staff.teachingStaffId}
-                        href={getCourseUserURL(
+                        to={getCourseUserURL(
                           getCourseId(),
                           staff.teachingStaffId,
                         )}
@@ -264,7 +266,7 @@ const SubmissionsTable: FC<Props> = (props) => {
           </TableRow>
         ))}
       </TableBody>
-    </Table>
+    </TableContainer>
   );
 };
 
diff --git a/client/app/bundles/course/assessment/translations.ts b/client/app/bundles/course/assessment/translations.ts
index 5edf8abf388..07bd69afe9b 100644
--- a/client/app/bundles/course/assessment/translations.ts
+++ b/client/app/bundles/course/assessment/translations.ts
@@ -436,6 +436,38 @@ const translations = defineMessages({
     id: 'course.assessment.show.forumPostResponse',
     defaultMessage: 'Forum Post Response',
   },
+  newMultipleChoice: {
+    id: 'course.assessment.show.newMultipleChoice',
+    defaultMessage: 'New Multiple Choice Question (MCQ)',
+  },
+  newMultipleResponse: {
+    id: 'course.assessment.show.newMultipleResponse',
+    defaultMessage: 'New Multiple Response Question (MRQ)',
+  },
+  newTextResponse: {
+    id: 'course.assessment.show.newTextResponse',
+    defaultMessage: 'New Text Response Question',
+  },
+  newAudioResponse: {
+    id: 'course.assessment.show.newAudioResponse',
+    defaultMessage: 'New Audio Response Question',
+  },
+  newFileUpload: {
+    id: 'course.assessment.show.newFileUpload',
+    defaultMessage: 'New File Upload Question',
+  },
+  newProgramming: {
+    id: 'course.assessment.show.newProgramming',
+    defaultMessage: 'New Programming Question',
+  },
+  newScribing: {
+    id: 'course.assessment.show.newScribing',
+    defaultMessage: 'New Scribing Question',
+  },
+  newForumPostResponse: {
+    id: 'course.assessment.show.newForumPostResponse',
+    defaultMessage: 'New Forum Post Response Question',
+  },
   newQuestion: {
     id: 'course.assessment.show.newQuestion',
     defaultMessage: 'New Question',
diff --git a/client/app/bundles/course/container/Breadcrumbs/Breadcrumbs.tsx b/client/app/bundles/course/container/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 00000000000..866c17ccbd5
--- /dev/null
+++ b/client/app/bundles/course/container/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,84 @@
+import { useCallback } from 'react';
+import { Breadcrumbs as MuiBreadcrumbs } from '@mui/material';
+
+import LoadingEllipsis from 'lib/components/core/LoadingEllipsis';
+import { CrumbData } from 'lib/hooks/router/dynamicNest';
+import { CrumbContent } from 'lib/hooks/router/dynamicNest/crumbs';
+import useTranslation, { translatable } from 'lib/hooks/useTranslation';
+
+import Crumb from './Crumb';
+import { Slider, useSliders } from './sliders';
+
+interface BreadcrumbProps {
+  in: CrumbData[];
+  className?: string;
+  loading?: boolean;
+}
+
+const Breadcrumbs = (props: BreadcrumbProps): JSX.Element => {
+  const { in: crumbs } = props;
+
+  const { t } = useTranslation();
+
+  const sliders = useSliders();
+
+  const getCrumbElement = useCallback(
+    (content: CrumbContent, disabled: boolean, key: string): JSX.Element => (
+      <Crumb key={key} to={!disabled && content.url}>
+        {translatable(content.title) ? t(content.title) : content.title}
+      </Crumb>
+    ),
+    [],
+  );
+
+  const validCrumbs = crumbs.reduce<JSX.Element[]>((elements, crumb, index) => {
+    const content = crumb.content;
+    if (!content) return elements;
+
+    const isLastCrumb = index >= crumbs.length - 1;
+
+    if (Array.isArray(content)) {
+      content.forEach((item, itemIndex) => {
+        const isLastItem = isLastCrumb && itemIndex >= content.length - 1;
+        const key = `${crumb.pathname}-${itemIndex}`;
+
+        elements.push(getCrumbElement(item, isLastItem, key));
+      });
+    } else {
+      elements.push(getCrumbElement(content, isLastCrumb, crumb.pathname));
+    }
+
+    return elements;
+  }, []);
+
+  return (
+    <div className={`relative flex items-center ${props.className ?? ''}`}>
+      <Slider in={sliders.showStart} onClick={sliders.onClickStart} start />
+      <Slider in={sliders.showEnd} onClick={sliders.onClickEnd} />
+
+      <nav
+        ref={sliders.ref}
+        className="scrollbar-hidden overflow-x-scroll pl-5 pr-20"
+        onScroll={sliders.handleScroll}
+      >
+        <MuiBreadcrumbs
+          classes={{
+            separator: 'mx-2',
+            ol: 'flex-nowrap',
+            li: 'flex items-center',
+          }}
+          className="w-fit"
+          component="div"
+          maxItems={1000}
+          separator={<Crumb.Separator />}
+        >
+          {validCrumbs}
+
+          {props.loading && <LoadingEllipsis />}
+        </MuiBreadcrumbs>
+      </nav>
+    </div>
+  );
+};
+
+export default Breadcrumbs;
diff --git a/client/app/bundles/course/container/Breadcrumbs/Crumb.tsx b/client/app/bundles/course/container/Breadcrumbs/Crumb.tsx
new file mode 100644
index 00000000000..1138e7b55db
--- /dev/null
+++ b/client/app/bundles/course/container/Breadcrumbs/Crumb.tsx
@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { Grow, Typography } from '@mui/material';
+
+import Link from 'lib/components/core/Link';
+
+interface CrumbProps {
+  children: ReactNode;
+  to?: string | false;
+}
+
+const Crumb = (props: CrumbProps): JSX.Element => {
+  const { to: url, children: title } = props;
+
+  const crumbText = (
+    <Typography className="whitespace-nowrap" variant="body2">
+      {title}
+    </Typography>
+  );
+
+  return (
+    <Grow key={title?.toString()} in style={{ transformOrigin: 'center left' }}>
+      <Link to={url} underline="hover">
+        {crumbText}
+      </Link>
+    </Grow>
+  );
+};
+
+const CrumbSeparator = (): JSX.Element => (
+  <Grow in style={{ transformOrigin: 'center left' }}>
+    <Typography color="text.disabled" variant="body2">
+      /
+    </Typography>
+  </Grow>
+);
+
+export default Object.assign(Crumb, { Separator: CrumbSeparator });
diff --git a/client/app/bundles/course/container/Breadcrumbs/index.ts b/client/app/bundles/course/container/Breadcrumbs/index.ts
new file mode 100644
index 00000000000..3ff68ca5894
--- /dev/null
+++ b/client/app/bundles/course/container/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export { default } from './Breadcrumbs';
diff --git a/client/app/bundles/course/container/Breadcrumbs/sliders.tsx b/client/app/bundles/course/container/Breadcrumbs/sliders.tsx
new file mode 100644
index 00000000000..f1d72f8a809
--- /dev/null
+++ b/client/app/bundles/course/container/Breadcrumbs/sliders.tsx
@@ -0,0 +1,88 @@
+import {
+  RefObject,
+  UIEventHandler,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import { IconButton, Slide } from '@mui/material';
+
+interface UseSlidersHook {
+  ref: RefObject<HTMLDivElement>;
+  showStart: boolean;
+  showEnd: boolean;
+  handleScroll: UIEventHandler<Element>;
+  onClickStart: () => void;
+  onClickEnd: () => void;
+}
+
+export const useSliders = (): UseSlidersHook => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [showSliders, setShowSliders] = useState([false, false]);
+
+  const resetShowSliders = (element: Element): void => {
+    const start = element.scrollLeft;
+    const end = element.clientWidth + start;
+
+    const isStartOfScroll = start === 0;
+    const isEndOfScroll = end >= element.scrollWidth;
+
+    setShowSliders([!isStartOfScroll, !isEndOfScroll]);
+  };
+
+  useLayoutEffect(() => {
+    if (!ref.current) return undefined;
+
+    const observer = new ResizeObserver((entries) => {
+      const target = entries[0]?.target;
+      if (!target) return;
+
+      ref.current?.scrollTo({ left: target.scrollWidth });
+      resetShowSliders(target);
+    });
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  return {
+    ref,
+    showStart: showSliders[0],
+    showEnd: showSliders[1],
+    handleScroll: (e) => resetShowSliders(e.currentTarget),
+    onClickStart: () =>
+      ref.current?.scrollBy({
+        left: -((ref.current?.scrollWidth || 100) / 2),
+        behavior: 'smooth',
+      }),
+    onClickEnd: (): void =>
+      ref.current?.scrollBy({
+        left: (ref.current?.scrollWidth || 100) / 2,
+        behavior: 'smooth',
+      }),
+  };
+};
+
+interface SliderProps {
+  in?: boolean;
+  start?: boolean;
+  onClick?: () => void;
+}
+
+export const Slider = (props: SliderProps): JSX.Element => (
+  <Slide direction={props.start ? 'right' : 'left'} in={props.in}>
+    <div
+      className={`absolute top-0 flex h-full items-center ${
+        props.start
+          ? 'left-0 pl-2 pr-5 bg-fade-to-r-white'
+          : 'right-0 pl-5 pr-2 bg-fade-to-l-white'
+      }`}
+    >
+      <IconButton onClick={props.onClick} size="small">
+        {props.start ? <ChevronLeft /> : <ChevronRight />}
+      </IconButton>
+    </div>
+  </Slide>
+);
diff --git a/client/app/bundles/course/container/CourseContainer.tsx b/client/app/bundles/course/container/CourseContainer.tsx
new file mode 100644
index 00000000000..7250214ad20
--- /dev/null
+++ b/client/app/bundles/course/container/CourseContainer.tsx
@@ -0,0 +1,84 @@
+import { ComponentRef, useEffect, useRef, useState } from 'react';
+import {
+  LoaderFunction,
+  Outlet,
+  useLoaderData,
+  useLocation,
+} from 'react-router-dom';
+import { MenuOutlined } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { CourseLayoutData } from 'types/course/courses';
+
+import CourseAPI from 'api/course';
+import PopupNotifier from 'course/user-notification/PopupNotifier';
+import Footer from 'lib/components/core/layouts/Footer';
+import { DataHandle, useDynamicNest } from 'lib/hooks/router/dynamicNest';
+
+import Breadcrumbs from './Breadcrumbs';
+import Sidebar from './Sidebar';
+
+const CourseContainer = (): JSX.Element => {
+  const location = useLocation();
+
+  const data = useLoaderData() as CourseLayoutData;
+
+  const sidebarRef = useRef<ComponentRef<typeof Sidebar>>(null);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    ref.current?.scrollTo({ behavior: 'smooth', top: 0 });
+  }, [location.pathname]);
+
+  const { crumbs, loading, activePath } = useDynamicNest();
+
+  return (
+    <main className="flex h-full min-h-0 w-full">
+      <Sidebar
+        ref={sidebarRef}
+        activePath={activePath}
+        from={data}
+        onChangeVisibility={setSidebarOpen}
+      />
+
+      <div ref={ref} className="h-full w-full overflow-scroll">
+        <div className="flex h-[4rem] w-full items-center">
+          {!sidebarOpen && (
+            <IconButton onClick={(): void => sidebarRef.current?.show()}>
+              <MenuOutlined />
+            </IconButton>
+          )}
+
+          <Breadcrumbs
+            className="h-[4rem] w-full overflow-hidden"
+            in={crumbs}
+            loading={loading}
+          />
+        </div>
+
+        <div className="min-h-[calc(100%_-_4rem)] w-full">
+          <Outlet />
+        </div>
+
+        <Footer />
+      </div>
+
+      <PopupNotifier />
+    </main>
+  );
+};
+
+const loader: LoaderFunction = async ({ params }) => {
+  const id = parseInt(params?.courseId ?? '', 10) || undefined;
+  if (!id) throw new Error(`CourseContainer was loaded with ID: ${id}.`);
+
+  const response = await CourseAPI.courses.fetchLayout(id);
+  return response.data;
+};
+
+const handle: DataHandle = (match) => {
+  return (match.data as CourseLayoutData).courseTitle;
+};
+
+export default Object.assign(CourseContainer, { loader, handle });
diff --git a/client/app/bundles/course/container/Sidebar/CourseItem.tsx b/client/app/bundles/course/container/Sidebar/CourseItem.tsx
new file mode 100644
index 00000000000..a829010341a
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/CourseItem.tsx
@@ -0,0 +1,142 @@
+import { useMemo, useState } from 'react';
+import { defineMessages } from 'react-intl';
+import { Avatar, Typography } from '@mui/material';
+import { CourseLayoutData } from 'types/course/courses';
+
+import SearchField from 'lib/components/core/fields/SearchField';
+import PopupMenu from 'lib/components/core/PopupMenu';
+import { useAppContext } from 'lib/containers/AppContainer';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  thisCourse: {
+    id: 'course.courses.CourseItem.thisCourse',
+    defaultMessage: 'This course',
+  },
+  jumpToOtherCourses: {
+    id: 'course.courses.CourseItem.jumpToOtherCourses',
+    defaultMessage: 'Jump to your other courses',
+  },
+  searchCourses: {
+    id: 'course.courses.CourseItem.searchCourses',
+    defaultMessage: 'Search courses',
+  },
+  noCoursesMatch: {
+    id: 'course.courses.CourseItem.noCoursesMatch',
+    defaultMessage: "Oops, no courses matched '{keyword}'.",
+  },
+  seeAllCourses: {
+    id: 'course.courses.CourseItem.seeAllCourses',
+    defaultMessage: 'See all courses',
+  },
+  createNewCourse: {
+    id: 'course.courses.CourseItem.createNewCourse',
+    defaultMessage: 'Create a new course',
+  },
+});
+
+interface CourseItemProps {
+  in: CourseLayoutData;
+}
+
+const CourseItem = (props: CourseItemProps): JSX.Element => {
+  const { in: data } = props;
+
+  const { t } = useTranslation();
+
+  const { courses } = useAppContext();
+
+  const [anchorElement, setAnchorElement] = useState<HTMLElement>();
+  const [filterCourseKeyword, setFilterCourseKeyword] = useState('');
+
+  const filteredCourses = useMemo(() => {
+    if (!filterCourseKeyword) return courses;
+
+    return courses?.filter((course) =>
+      course.title.toLowerCase().includes(filterCourseKeyword.toLowerCase()),
+    );
+  }, [filterCourseKeyword]);
+
+  return (
+    <>
+      <div
+        className="flex select-none items-center space-x-4 p-4 hover:bg-neutral-200 active:bg-neutral-300"
+        onClick={(e): void => setAnchorElement(e.currentTarget)}
+        role="button"
+        tabIndex={0}
+      >
+        <Avatar
+          alt={data.courseTitle}
+          className="aspect-square rounded-xl wh-20"
+          src={data.courseLogoUrl}
+          variant="rounded"
+        />
+
+        <Typography className="line-clamp-3 leading-tight" variant="body2">
+          {data.courseTitle}
+        </Typography>
+      </div>
+
+      <PopupMenu
+        anchorEl={anchorElement}
+        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+        onClose={(): void => setAnchorElement(undefined)}
+      >
+        <PopupMenu.List header={t(translations.thisCourse)}>
+          <PopupMenu.Text variant="body1">{data.courseTitle}</PopupMenu.Text>
+        </PopupMenu.List>
+
+        <PopupMenu.Divider />
+
+        {Boolean(courses?.length) && (
+          <>
+            <PopupMenu.List header={t(translations.jumpToOtherCourses)}>
+              <PopupMenu.Item>
+                <SearchField
+                  autoFocus
+                  noIcon
+                  onChangeKeyword={setFilterCourseKeyword}
+                  placeholder={t(translations.searchCourses)}
+                />
+              </PopupMenu.Item>
+            </PopupMenu.List>
+
+            <PopupMenu.List className="-mt-5 max-h-[30rem] overflow-y-scroll sm:max-w-full md:max-w-[50rem]">
+              {filteredCourses?.map((course) => (
+                <PopupMenu.Button
+                  key={course.url}
+                  textProps={{ className: 'line-clamp-2' }}
+                  to={course.url}
+                >
+                  {course.title}
+                </PopupMenu.Button>
+              ))}
+
+              {!filteredCourses?.length && (
+                <PopupMenu.Text color="text.secondary">
+                  {t(translations.noCoursesMatch, {
+                    keyword: filterCourseKeyword,
+                  })}
+                </PopupMenu.Text>
+              )}
+            </PopupMenu.List>
+
+            <PopupMenu.Divider />
+          </>
+        )}
+
+        <PopupMenu.List>
+          <PopupMenu.Button to="/courses">
+            {t(translations.seeAllCourses)}
+          </PopupMenu.Button>
+
+          <PopupMenu.Button to="/courses?new=true">
+            {t(translations.createNewCourse)}
+          </PopupMenu.Button>
+        </PopupMenu.List>
+      </PopupMenu>
+    </>
+  );
+};
+
+export default CourseItem;
diff --git a/client/app/bundles/course/container/Sidebar/CourseUserItem.tsx b/client/app/bundles/course/container/Sidebar/CourseUserItem.tsx
new file mode 100644
index 00000000000..b3510956b9e
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/CourseUserItem.tsx
@@ -0,0 +1,196 @@
+import { useState } from 'react';
+import { defineMessages } from 'react-intl';
+import { Avatar, Typography } from '@mui/material';
+import { CourseLayoutData } from 'types/course/courses';
+
+import PopupMenu from 'lib/components/core/PopupMenu';
+import UserPopupMenuList from 'lib/components/navigation/UserPopupMenuList';
+import { COURSE_USER_ROLES } from 'lib/constants/sharedConstants';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import CourseUserProgress from './CourseUserProgress';
+import LevelRing from './LevelRing';
+
+const translations = defineMessages({
+  differentCourseNameHint: {
+    id: 'course.courses.CourseUserItem.differentCourseNameHint',
+    defaultMessage:
+      "You're seeing a name different from your account name because this course's manager invited " +
+      'you with this name.',
+  },
+  goToYourProfile: {
+    id: 'course.courses.CourseUserItem.goToYourProfile',
+    defaultMessage: 'Go to your profile',
+  },
+  manageEmailSubscriptions: {
+    id: 'course.courses.CourseUserItem.manageEmailSubscriptions',
+    defaultMessage: 'Manage email subscriptions',
+  },
+  inThisCourse: {
+    id: 'course.courses.CourseUserItem.inThisCourse',
+    defaultMessage: 'In this course',
+  },
+  inCoursemology: {
+    id: 'course.courses.CourseUserItem.inCoursemology',
+    defaultMessage: 'In Coursemology',
+  },
+  notInThisCourse: {
+    id: 'course.courses.CourseUserItem.notInThisCourse',
+    defaultMessage: 'Not in this course',
+  },
+  notInThisCourseHint: {
+    id: 'course.courses.CourseUserItem.notInThisCourseHint',
+    defaultMessage:
+      'You are not a user in this course. So, you can only view publicly available information about this course. ' +
+      "You may contact this course's instructor to be invited to this course.",
+  },
+});
+
+interface CourseUserItemProps {
+  from: CourseLayoutData;
+}
+
+interface CourseUserNameAndRoleProps {
+  from: CourseLayoutData;
+}
+
+const CourseUserNameAndRole = (
+  props: CourseUserNameAndRoleProps,
+): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Typography
+        className="overflow-hidden text-ellipsis whitespace-nowrap"
+        variant="body2"
+      >
+        {props.from.courseUserName ?? props.from.userName}
+      </Typography>
+
+      <Typography
+        className="overflow-hidden text-ellipsis whitespace-nowrap"
+        color="text.secondary"
+        variant="caption"
+      >
+        {COURSE_USER_ROLES[props.from.courseUserRole!] ??
+          t(translations.notInThisCourse)}
+      </Typography>
+    </>
+  );
+};
+
+const SimpleCourseUserItemContent = (
+  props: CourseUserItemProps,
+): JSX.Element => (
+  <div className="flex items-center space-x-4">
+    <Avatar
+      alt={props.from.courseUserName ?? props.from.userName}
+      src={props.from.userAvatarUrl}
+    />
+
+    <div className="relative mt-[3px] flex min-w-0 flex-col">
+      <CourseUserNameAndRole from={props.from} />
+    </div>
+  </div>
+);
+
+const MaxLevelCrown = (): JSX.Element => (
+  <Typography className="absolute -left-2 -top-6 -rotate-12 drop-shadow-lg">
+    👑
+  </Typography>
+);
+
+const CourseUserItemContent = (props: CourseUserItemProps): JSX.Element => {
+  const { from: data } = props;
+
+  if (!data.progress) return <SimpleCourseUserItemContent from={data} />;
+
+  return (
+    <>
+      <div className="flex items-center space-x-4">
+        <LevelRing in={data.progress}>
+          <Avatar alt={data.courseUserName} src={data.userAvatarUrl} />
+        </LevelRing>
+
+        <div className="relative mt-[3px] flex min-w-0 flex-col">
+          {data.progress.nextLevelExpDelta === 'max' && <MaxLevelCrown />}
+          <CourseUserNameAndRole from={data} />
+        </div>
+      </div>
+
+      <CourseUserProgress from={data.progress} />
+    </>
+  );
+};
+
+const CourseUserItem = (props: CourseUserItemProps): JSX.Element => {
+  const { from: data } = props;
+
+  const { t } = useTranslation();
+
+  const [anchorElement, setAnchorElement] = useState<HTMLElement>();
+
+  return (
+    <>
+      <div
+        className="group/user flex select-none flex-col space-y-5 p-4 hover:bg-neutral-200 active:bg-neutral-300"
+        onClick={(e): void => setAnchorElement(e.currentTarget)}
+        role="button"
+        tabIndex={0}
+      >
+        <CourseUserItemContent from={data} />
+      </div>
+
+      <PopupMenu
+        anchorEl={anchorElement}
+        anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+        onClose={(): void => setAnchorElement(undefined)}
+      >
+        {data.courseUserName ? (
+          <>
+            {data.userName !== data.courseUserName && (
+              <>
+                <PopupMenu.Text
+                  className="max-w-[20rem] leading-tight"
+                  color="text.disabled"
+                  variant="caption"
+                >
+                  {t(translations.differentCourseNameHint)}
+                </PopupMenu.Text>
+
+                <PopupMenu.Divider />
+              </>
+            )}
+
+            <PopupMenu.List header={t(translations.inThisCourse)}>
+              <PopupMenu.Button to={data.courseUserUrl}>
+                {t(translations.goToYourProfile)}
+              </PopupMenu.Button>
+
+              {data.manageEmailSubscriptionUrl && (
+                <PopupMenu.Button to={data.manageEmailSubscriptionUrl}>
+                  {t(translations.manageEmailSubscriptions)}
+                </PopupMenu.Button>
+              )}
+            </PopupMenu.List>
+          </>
+        ) : (
+          <PopupMenu.Text
+            className="max-w-[20rem] leading-tight"
+            color="text.disabled"
+            variant="caption"
+          >
+            {t(translations.notInThisCourseHint)}
+          </PopupMenu.Text>
+        )}
+
+        <PopupMenu.Divider />
+
+        <UserPopupMenuList header={t(translations.inCoursemology)} />
+      </PopupMenu>
+    </>
+  );
+};
+
+export default CourseUserItem;
diff --git a/client/app/bundles/course/container/Sidebar/CourseUserProgress.tsx b/client/app/bundles/course/container/Sidebar/CourseUserProgress.tsx
new file mode 100644
index 00000000000..b2a2328a01f
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/CourseUserProgress.tsx
@@ -0,0 +1,108 @@
+import { defineMessages } from 'react-intl';
+import { Typography } from '@mui/material';
+import { CourseUserProgressData } from 'types/course/courses';
+
+import StackedBadges from 'lib/components/extensions/StackedBadges';
+import { getCourseId } from 'lib/helpers/url-helpers';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const standardFormatter = new Intl.NumberFormat('en');
+
+const compactFormatter = new Intl.NumberFormat('en', {
+  notation: 'compact',
+  maximumFractionDigits: 2,
+});
+
+const translations = defineMessages({
+  max: {
+    id: 'course.courses.CourseUserProgress.max',
+    defaultMessage: 'Max',
+  },
+  expCounter: {
+    id: 'course.courses.CourseUserProgress.expCounter',
+    defaultMessage: '{exp} <small>EXP</small>',
+  },
+  expTotal: {
+    id: 'course.courses.CourseUserProgress.expTotal',
+    defaultMessage: '{exp} <small>EXP</small> total',
+  },
+  expToNextLevel: {
+    id: 'course.courses.CourseUserProgress.expToNextLevel',
+    defaultMessage: '{exp} <small>EXP</small> to next level',
+  },
+  seeAllAchievements: {
+    id: 'course.courses.CourseUserProgress.seeAllAchievements',
+    defaultMessage: 'See all achievements',
+  },
+});
+
+interface CourseUserProgressProps {
+  from: CourseUserProgressData;
+}
+
+const formatEXP = (exp: number): string =>
+  (exp < 1_000_000_000_000 ? standardFormatter : compactFormatter).format(exp);
+
+const CourseUserProgress = (props: CourseUserProgressProps): JSX.Element => {
+  const { from: data } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <section className="flex items-center space-x-4">
+      <div className="flex flex-col space-y-3">
+        {data.nextLevelExpDelta === 'max' ? (
+          <div className="flex space-x-3">
+            <Typography
+              className="h-8 rounded-full px-2 text-center uppercase text-primary ring-1 ring-primary"
+              variant="body2"
+            >
+              {t(translations.max)}
+            </Typography>
+
+            <Typography variant="body2">
+              {t(translations.expCounter, {
+                exp: formatEXP(data.exp ?? 0),
+                small: (chunk) => <small>{chunk}</small>,
+              })}
+            </Typography>
+          </div>
+        ) : (
+          <div className="flex flex-col space-y-1">
+            {data.nextLevelExpDelta && (
+              <Typography className="leading-none" variant="body2">
+                {t(translations.expToNextLevel, {
+                  exp: standardFormatter.format(data?.nextLevelExpDelta ?? 0),
+                  small: (chunk) => <small>{chunk}</small>,
+                })}
+              </Typography>
+            )}
+
+            <Typography color="text.secondary" variant="caption">
+              {t(translations.expTotal, {
+                exp: formatEXP(data.exp ?? 0),
+                small: (chunk) => <small>{chunk}</small>,
+              })}
+            </Typography>
+          </div>
+        )}
+
+        {Boolean(data.recentAchievements?.length) && (
+          <div
+            className="slot-1-neutral-100 group-hover/user:slot-1-neutral-200"
+            onClick={(e): void => e.stopPropagation()}
+          >
+            <StackedBadges
+              badges={data.recentAchievements}
+              remainingCount={data.remainingAchievementsCount}
+              seeRemainingTooltip={t(translations.seeAllAchievements)}
+              seeRemainingUrl={`/courses/${getCourseId()}/achievements`}
+            />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default CourseUserProgress;
diff --git a/client/app/bundles/course/container/Sidebar/LevelRing.tsx b/client/app/bundles/course/container/Sidebar/LevelRing.tsx
new file mode 100644
index 00000000000..fbf2692a665
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/LevelRing.tsx
@@ -0,0 +1,54 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { CircularProgress, Typography } from '@mui/material';
+import { CourseUserProgressData } from 'types/course/courses';
+
+interface LevelRingProps {
+  in: CourseUserProgressData;
+  children?: ReactNode;
+}
+
+const LevelRing = (props: LevelRingProps): JSX.Element => {
+  const { in: progress } = props;
+
+  const [percentage, setPercentage] = useState<number>();
+
+  /**
+   * Programmatically set the percentage on load to trigger animation.
+   */
+  useEffect(() => {
+    setPercentage(progress.nextLevelPercentage);
+  }, [progress.nextLevelPercentage]);
+
+  return (
+    <div className="relative flex shrink-0 items-center justify-center wh-20">
+      <div className="absolute wh-20">
+        <CircularProgress
+          className="absolute text-neutral-300"
+          size="5rem"
+          thickness={3}
+          value={100}
+          variant="determinate"
+        />
+
+        <CircularProgress
+          className="absolute"
+          size="5rem"
+          style={{ scale: '-1 1' }}
+          thickness={3}
+          value={percentage ?? 0}
+          variant="determinate"
+        />
+      </div>
+
+      {props.children}
+
+      <div className="absolute -bottom-3 rounded-lg bg-primary px-1.5 py-1">
+        <Typography className="font-semibold leading-none" variant="body2">
+          {progress.level}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default LevelRing;
diff --git a/client/app/bundles/course/container/Sidebar/PinSidebarButton.tsx b/client/app/bundles/course/container/Sidebar/PinSidebarButton.tsx
new file mode 100644
index 00000000000..378e55696ec
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/PinSidebarButton.tsx
@@ -0,0 +1,46 @@
+import { defineMessages } from 'react-intl';
+import { ChevronLeft, ChevronRight } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  minimiseSidebar: {
+    id: 'components.SidebarContainer.minimiseSidebar',
+    defaultMessage: 'Minimise sidebar',
+  },
+  pinSidebar: {
+    id: 'components.SidebarContainer.pinSidebar',
+    defaultMessage: 'Pin sidebar',
+  },
+});
+
+interface PinSidebarButtonProps {
+  open?: boolean;
+  onClick?: () => void;
+}
+
+const PinSidebarButton = (props: PinSidebarButtonProps): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={`flex select-none items-center space-x-2 px-4 py-3 text-neutral-500 hover:bg-neutral-200 active:bg-neutral-300 ${
+        props.open ? 'flex-row' : 'flex-row-reverse'
+      }`}
+      onClick={props.onClick}
+      role="button"
+      tabIndex={0}
+    >
+      {props.open ? <ChevronLeft /> : <ChevronRight />}
+
+      <Typography className="leading-none" variant="caption">
+        {props.open
+          ? t(translations.minimiseSidebar)
+          : t(translations.pinSidebar)}
+      </Typography>
+    </div>
+  );
+};
+
+export default PinSidebarButton;
diff --git a/client/app/bundles/course/container/Sidebar/Sidebar.tsx b/client/app/bundles/course/container/Sidebar/Sidebar.tsx
new file mode 100644
index 00000000000..1c21f5f5c79
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/Sidebar.tsx
@@ -0,0 +1,71 @@
+import { ComponentRef, forwardRef } from 'react';
+import { defineMessages } from 'react-intl';
+import { CourseLayoutData } from 'types/course/courses';
+
+import BrandingHead from 'lib/components/navigation/BrandingHead';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import CourseItem from './CourseItem';
+import CourseUserItem from './CourseUserItem';
+import SidebarAccordion from './SidebarAccordion';
+import SidebarContainer from './SidebarContainer';
+import SidebarItem from './SidebarItem';
+
+const translations = defineMessages({
+  administration: {
+    id: 'course.courses.Sidebar.administration',
+    defaultMessage: 'Administration',
+  },
+});
+
+interface SidebarProps {
+  from: CourseLayoutData;
+  onChangeVisibility?: (visible: boolean) => void;
+  activePath?: string;
+}
+
+const Sidebar = forwardRef<ComponentRef<typeof SidebarContainer>, SidebarProps>(
+  (props, ref): JSX.Element => {
+    const { from: data, onChangeVisibility, activePath } = props;
+
+    const { t } = useTranslation();
+
+    return (
+      <SidebarContainer
+        ref={ref}
+        className="flex w-full max-w-[20rem] flex-col bg-neutral-100 border-only-r-neutral-200"
+        onChangeVisibility={onChangeVisibility}
+      >
+        <section className="border-only-b-neutral-200">
+          <BrandingHead.Mini />
+          <CourseItem in={data} />
+          <CourseUserItem from={data} />
+        </section>
+
+        <section className="h-full space-y-4 overflow-y-scroll px-3 py-4">
+          {data.sidebar && (
+            <div>
+              <SidebarItem.Home to={data.courseUrl} />
+
+              {data.sidebar.map((item) => (
+                <SidebarItem key={item.key} activePath={activePath} of={item} />
+              ))}
+            </div>
+          )}
+
+          {data.adminSidebar && (
+            <SidebarAccordion
+              activePath={activePath}
+              containing={data.adminSidebar}
+              title={t(translations.administration)}
+            />
+          )}
+        </section>
+      </SidebarContainer>
+    );
+  },
+);
+
+Sidebar.displayName = 'Sidebar';
+
+export default Sidebar;
diff --git a/client/app/bundles/course/container/Sidebar/SidebarAccordion.tsx b/client/app/bundles/course/container/Sidebar/SidebarAccordion.tsx
new file mode 100644
index 00000000000..054a8c90d2b
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/SidebarAccordion.tsx
@@ -0,0 +1,50 @@
+import { ExpandMore } from '@mui/icons-material';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+} from '@mui/material';
+import { SidebarItemData } from 'types/course/courses';
+
+import SidebarItem from './SidebarItem';
+
+interface SidebarAccordionProps {
+  containing: SidebarItemData[];
+  title: string;
+  activePath?: string;
+}
+
+const SidebarAccordion = (props: SidebarAccordionProps): JSX.Element => {
+  const { containing: items, title } = props;
+
+  return (
+    <Accordion
+      className="overflow-clip rounded-xl"
+      defaultExpanded
+      disableGutters
+      elevation={0}
+    >
+      <AccordionSummary
+        classes={{ content: 'flex flex-col m-0 p-0' }}
+        className="min-h-0 space-x-2 p-4 hover:bg-neutral-200"
+        expandIcon={<ExpandMore />}
+      >
+        <Typography>{title}</Typography>
+      </AccordionSummary>
+
+      <AccordionDetails className="p-0">
+        {items?.map((item) => (
+          <SidebarItem
+            key={item.key}
+            activePath={props.activePath}
+            of={item}
+            square
+          />
+        ))}
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default SidebarAccordion;
diff --git a/client/app/bundles/course/container/Sidebar/SidebarContainer.tsx b/client/app/bundles/course/container/Sidebar/SidebarContainer.tsx
new file mode 100644
index 00000000000..036b9ae00a6
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/SidebarContainer.tsx
@@ -0,0 +1,196 @@
+import {
+  forwardRef,
+  MouseEventHandler,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
+
+import useMedia from 'lib/hooks/useMedia';
+
+import PinSidebarButton from './PinSidebarButton';
+
+interface ContainerProps {
+  children: ReactNode;
+  className?: string;
+}
+
+const GUTTER_WIDTH_PX = 20 as const;
+
+interface FloatingContainerProps extends ContainerProps {
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+}
+
+const FloatingContainer = (props: FloatingContainerProps): JSX.Element => (
+  <div
+    className={`absolute z-50 h-full p-2 transition-position ${
+      props.className ?? ''
+    }`}
+    onMouseEnter={props.onMouseEnter}
+    onMouseLeave={props.onMouseLeave}
+  >
+    {props.children}
+  </div>
+);
+
+const AppearOnLeftGutter = (props: ContainerProps): JSX.Element => {
+  const [guttered, setGuttered] = useState(true);
+  const [inside, setInside] = useState(false);
+
+  useLayoutEffect(() => {
+    const body = document.body;
+
+    const watchAndShowSidebar = (e: MouseEvent): void => {
+      setGuttered(e.clientX <= GUTTER_WIDTH_PX);
+    };
+
+    body.addEventListener('mousemove', watchAndShowSidebar);
+    body.addEventListener('mouseleave', watchAndShowSidebar);
+
+    return () => {
+      body.removeEventListener('mousemove', watchAndShowSidebar);
+      body.removeEventListener('mouseleave', watchAndShowSidebar);
+    };
+  }, []);
+
+  const appear = guttered || inside;
+
+  return (
+    <>
+      <FloatingContainer
+        className={`top-0 ${appear ? 'left-0' : '-left-full'}`}
+        onMouseEnter={(): void => setInside(true)}
+        onMouseLeave={(): void => setInside(false)}
+      >
+        <aside
+          className={`rounded-xl border border-solid border-neutral-200 shadow-xl ${
+            props.className ?? ''
+          }`}
+        >
+          {props.children}
+        </aside>
+      </FloatingContainer>
+
+      <div className="flex h-full items-center justify-center px-1 pr-1.5 border-only-r-neutral-100">
+        <div
+          className={`${
+            appear ? 'sidebar-handle-exit' : 'sidebar-handle-enter'
+          } h-1/4 max-h-[15rem] w-2 rounded-full bg-neutral-400`}
+        />
+      </div>
+    </>
+  );
+};
+
+interface ControlledContainerProps extends ContainerProps {
+  open?: boolean;
+}
+
+const Hoverable = (props: ControlledContainerProps): JSX.Element => {
+  const Component = props.open ? 'aside' : AppearOnLeftGutter;
+
+  return <Component className={props.className}>{props.children}</Component>;
+};
+
+const Collapsible = (props: ControlledContainerProps): JSX.Element => {
+  const smallScreen = useMedia.MinWidth('md');
+
+  if (smallScreen)
+    return (
+      <FloatingContainer
+        className={`max-sm:w-screen max-sm:p-0 ${
+          props.open ? 'left-0' : '-left-full'
+        }`}
+      >
+        <aside
+          className={`rounded-xl border border-solid border-neutral-200 shadow-xl max-sm:max-w-none max-sm:rounded-none max-sm:border-none ${
+            props.className ?? ''
+          }`}
+        >
+          {props.children}
+        </aside>
+      </FloatingContainer>
+    );
+
+  return (
+    <aside className={`${props.open ? '' : 'hidden'} ${props.className}`}>
+      {props.children}
+    </aside>
+  );
+};
+
+interface SidebarContainerRef {
+  show: () => void;
+}
+
+interface SidebarContainerProps extends ContainerProps {
+  onChangeVisibility?: (visible: boolean) => void;
+}
+
+const SidebarContainer = forwardRef<SidebarContainerRef, SidebarContainerProps>(
+  (props, ref): JSX.Element => {
+    const smallScreen = useMedia.MinWidth('md');
+    const mobile = useMedia.PointerCoarse();
+
+    const [pinned, setPinned] = useState<boolean>();
+    const [lastState, setLastState] = useState(pinned);
+
+    useEffect(() => {
+      props.onChangeVisibility?.(pinned ?? true);
+    }, [pinned]);
+
+    useImperativeHandle(ref, () => ({
+      show: () =>
+        mobile
+          ? setPinned((value) => !value)
+          : document.body.dispatchEvent(new MouseEvent('mousemove')),
+    }));
+
+    useLayoutEffect(() => {
+      if (smallScreen) {
+        setPinned(false);
+        setLastState(pinned ?? true);
+      } else {
+        setPinned(lastState ?? true);
+      }
+    }, [smallScreen]);
+
+    const location = useLocation();
+
+    // Minimises the sidebar when a navigation is made. On small screen
+    // mobile devices, the sidebar covers majority of the screen.
+    useEffect(() => {
+      if (!(mobile && smallScreen)) return;
+
+      setPinned(false);
+    }, [location.pathname]);
+
+    const Container = mobile ? Collapsible : Hoverable;
+
+    return (
+      <Container
+        className={`z-50 h-full shrink-0 ${props.className ?? ''}`}
+        open={pinned}
+      >
+        {props.children}
+
+        {(mobile || !smallScreen) && (
+          <section className="border-only-t-neutral-200">
+            <PinSidebarButton
+              onClick={(): void => setPinned((value) => !value)}
+              open={pinned}
+            />
+          </section>
+        )}
+      </Container>
+    );
+  },
+);
+
+SidebarContainer.displayName = 'SidebarContainer';
+
+export default SidebarContainer;
diff --git a/client/app/bundles/course/container/Sidebar/SidebarItem.tsx b/client/app/bundles/course/container/Sidebar/SidebarItem.tsx
new file mode 100644
index 00000000000..56b5b561df6
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/SidebarItem.tsx
@@ -0,0 +1,91 @@
+import { useLayoutEffect, useRef } from 'react';
+import { defineMessages } from 'react-intl';
+import { Link, useLocation } from 'react-router-dom';
+import { Badge, Typography } from '@mui/material';
+import { SidebarItemData } from 'types/course/courses';
+
+import { defensivelyGetIcon } from 'lib/constants/icons';
+import useTranslation from 'lib/hooks/useTranslation';
+
+interface SidebarItemProps {
+  of: SidebarItemData;
+  square?: boolean;
+  exact?: boolean;
+  activePath?: string;
+}
+
+const SidebarItem = (props: SidebarItemProps): JSX.Element => {
+  const { of: item, square, exact, activePath } = props;
+
+  const location = useLocation();
+  const activeUrl = activePath ?? location.pathname + location.search;
+
+  const isActive = exact
+    ? activeUrl === item.path
+    : activeUrl.startsWith(item.path);
+
+  const Icon = defensivelyGetIcon(item.icon, isActive ? 'filled' : 'outlined');
+
+  const ref = useRef<HTMLAnchorElement>(null);
+
+  useLayoutEffect(() => {
+    if (!isActive) return;
+
+    ref.current?.scrollIntoView({ behavior: 'auto', block: 'nearest' });
+  }, [isActive]);
+
+  return (
+    <Link
+      ref={ref}
+      className={`no-underline ${isActive ? 'text-primary' : 'text-inherit'}`}
+      to={item.path}
+    >
+      <div
+        className={`flex select-none items-center space-x-5 p-4 transition-transform active:scale-95 active:rounded-xl ${
+          !square ? 'rounded-xl' : ''
+        } ${
+          isActive
+            ? 'bg-primary/10 hover:bg-primary/20 active:bg-primary/30'
+            : 'hover:bg-neutral-200 active:bg-neutral-300'
+        }`}
+        role="button"
+      >
+        <Badge badgeContent={item.unread?.toString()} color="primary" max={999}>
+          <Icon />
+        </Badge>
+
+        <Typography
+          className="overflow-hidden text-ellipsis whitespace-nowrap font-medium"
+          variant="body2"
+        >
+          {item.label}
+        </Typography>
+      </div>
+    </Link>
+  );
+};
+
+const translations = defineMessages({
+  home: {
+    id: 'course.courses.SidebarItem.home',
+    defaultMessage: 'Home',
+  },
+});
+
+const HomeSidebarItem = (props: { to: string }): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <SidebarItem
+      exact
+      of={{
+        key: 'home',
+        icon: 'home',
+        label: t(translations.home),
+        path: props.to,
+      }}
+    />
+  );
+};
+
+export default Object.assign(SidebarItem, { Home: HomeSidebarItem });
diff --git a/client/app/bundles/course/container/Sidebar/index.ts b/client/app/bundles/course/container/Sidebar/index.ts
new file mode 100644
index 00000000000..e842a8591f8
--- /dev/null
+++ b/client/app/bundles/course/container/Sidebar/index.ts
@@ -0,0 +1 @@
+export { default } from './Sidebar';
diff --git a/client/app/bundles/course/container/index.ts b/client/app/bundles/course/container/index.ts
new file mode 100644
index 00000000000..379f1d945fc
--- /dev/null
+++ b/client/app/bundles/course/container/index.ts
@@ -0,0 +1 @@
+export { default as CourseContainer } from './CourseContainer';
diff --git a/client/app/bundles/course/courses/components/buttons/TodoIgnoreButton.tsx b/client/app/bundles/course/courses/components/buttons/TodoIgnoreButton.tsx
index 3a1f92e54a0..4c975c8283b 100644
--- a/client/app/bundles/course/courses/components/buttons/TodoIgnoreButton.tsx
+++ b/client/app/bundles/course/courses/components/buttons/TodoIgnoreButton.tsx
@@ -52,7 +52,6 @@ const TodoIgnoreButton: FC<Props> = (props) => {
         onIgnore();
       }}
       style={{ width: 80 }}
-      variant="outlined"
     >
       {intl.formatMessage(translations.ignoreButtonText)}
     </Button>
diff --git a/client/app/bundles/course/courses/components/misc/CourseAnnouncements.tsx b/client/app/bundles/course/courses/components/misc/CourseAnnouncements.tsx
index 6c323eea3ba..deb31086e7f 100644
--- a/client/app/bundles/course/courses/components/misc/CourseAnnouncements.tsx
+++ b/client/app/bundles/course/courses/components/misc/CourseAnnouncements.tsx
@@ -1,22 +1,18 @@
 import { FC } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Stack } from '@mui/material';
-import { AnnouncementMiniEntity } from 'types/course/announcements';
+import { Stack, Typography } from '@mui/material';
+import { AnnouncementEntity } from 'types/course/announcements';
 
 import AnnouncementCard from '../../../announcements/components/misc/AnnouncementCard';
 
 interface Props extends WrappedComponentProps {
-  announcements: AnnouncementMiniEntity[];
+  announcements: AnnouncementEntity[];
 }
 
 const translations = defineMessages({
   announcementHeader: {
     id: 'course.courses.CourseAnnouncements.announcementHeader',
-    defaultMessage: 'Announcements',
-  },
-  noAnnouncements: {
-    id: 'course.courses.CourseAnnouncements.noAnnouncements',
-    defaultMessage: 'There are currently no announcements',
+    defaultMessage: 'Latest announcements',
   },
 });
 
@@ -24,12 +20,10 @@ const CourseAnnouncements: FC<Props> = (props) => {
   const { intl, announcements } = props;
 
   return (
-    <>
-      <h2>{intl.formatMessage(translations.announcementHeader)}</h2>
-
-      {announcements === null && (
-        <>{intl.formatMessage(translations.noAnnouncements)}</>
-      )}
+    <section className="space-y-2">
+      <Typography variant="h6">
+        {intl.formatMessage(translations.announcementHeader)}
+      </Typography>
 
       {announcements && (
         <Stack spacing={1}>
@@ -42,7 +36,7 @@ const CourseAnnouncements: FC<Props> = (props) => {
           ))}
         </Stack>
       )}
-    </>
+    </section>
   );
 };
 
diff --git a/client/app/bundles/course/courses/components/misc/CourseInfoBox.scss b/client/app/bundles/course/courses/components/misc/CourseInfoBox.scss
deleted file mode 100644
index 793cabd97a9..00000000000
--- a/client/app/bundles/course/courses/components/misc/CourseInfoBox.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// scss-lint:disable ColorVariable
-::-webkit-scrollbar-track {
-  background-color: #f5f5f5;
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar {
-  background-color: #f5f5f5;
-  width: 12px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgb(182, 182, 182);
-  border-radius: 10px;
-}
-
-.coursePicture {
-  img {
-    height: 100px;
-    width: 100px;
-  }
-}
diff --git a/client/app/bundles/course/courses/components/misc/CourseInfoBox.tsx b/client/app/bundles/course/courses/components/misc/CourseInfoBox.tsx
index 431ea3db501..c9bad308a11 100644
--- a/client/app/bundles/course/courses/components/misc/CourseInfoBox.tsx
+++ b/client/app/bundles/course/courses/components/misc/CourseInfoBox.tsx
@@ -1,86 +1,49 @@
-import { FC } from 'react';
-import { injectIntl, WrappedComponentProps } from 'react-intl';
-import { CardContent, Grid, Link, Typography } from '@mui/material';
-import { blue } from '@mui/material/colors';
+import { Avatar, Grid, Paper, Typography } from '@mui/material';
 import { CourseMiniEntity } from 'types/course/courses';
 
+import Link from 'lib/components/core/Link';
 import { getCourseURL } from 'lib/helpers/url-builders';
 
-import styles from './CourseInfoBox.scss';
-
-interface Props extends WrappedComponentProps {
+interface CourseInfoBoxProps {
   course: CourseMiniEntity;
 }
 
-const CourseInfoBox: FC<Props> = (props) => {
+const CourseInfoBox = (props: CourseInfoBoxProps): JSX.Element => {
   const { course } = props;
 
   return (
     <Grid item lg={1} md={1} sm={1} style={{ padding: 10 }} xl={1} xs={1}>
-      <div
-        className="course"
-        style={{
-          borderStyle: 'solid',
-          borderWidth: 0.2,
-          borderColor: blue[50],
-          borderRadius: 10,
-          height: '100%',
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'space-between',
-        }}
+      <Paper
+        className="flex h-full flex-col justify-between"
+        variant="outlined"
       >
         <Link
-          href={getCourseURL(course.id)}
-          // Change to Router-DOM Link and use this after courses sidebar is migrated
-          // to={getCourseURL(course.id)}
-          style={{
-            textDecoration: 'none',
-          }}
+          className="flex h-full flex-col space-y-4 p-4 no-underline hover?:bg-neutral-100"
+          to={getCourseURL(course.id)}
         >
-          <p
-            className={styles.coursePicture}
-            dangerouslySetInnerHTML={{ __html: course.logoUrl }}
-            style={{
-              textAlign: 'center',
-              marginBottom: 0,
-              marginTop: 10,
-            }}
+          <Avatar
+            alt={course.title}
+            className="wh-40"
+            src={course.logoUrl}
+            variant="rounded"
           />
-          <CardContent style={{ padding: 5 }}>
-            <Typography
-              align="center"
-              color="black"
-              component="div"
-              variant="h6"
-            >
-              {course.title}
-            </Typography>
-          </CardContent>
+
+          <Typography color="black" variant="h6">
+            {course.title}
+          </Typography>
         </Link>
+
         {course.description && (
-          <CardContent
-            style={{
-              padding: '5px 5px 5px 5px',
-              height: 100,
-              overflow: 'auto',
-              margin: 5,
-              borderStyle: 'solid',
-              borderWidth: 0.2,
-              borderColor: blue[50],
-              borderRadius: 5,
-            }}
-          >
+          <div className="h-[10rem] shrink-0 overflow-auto p-4 border-only-t-neutral-200">
             <Typography
               dangerouslySetInnerHTML={{ __html: course.description }}
               variant="body2"
             />
-          </CardContent>
+          </div>
         )}
-      </div>
+      </Paper>
     </Grid>
   );
 };
 
-export default injectIntl(CourseInfoBox);
+export default CourseInfoBox;
diff --git a/client/app/bundles/course/courses/components/misc/CourseNotifications.tsx b/client/app/bundles/course/courses/components/misc/CourseNotifications.tsx
index d4372e62783..133920ca483 100644
--- a/client/app/bundles/course/courses/components/misc/CourseNotifications.tsx
+++ b/client/app/bundles/course/courses/components/misc/CourseNotifications.tsx
@@ -1,7 +1,6 @@
 import { FC, memo } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Stack } from '@mui/material';
-import { grey } from '@mui/material/colors';
+import { Paper, Typography } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { NotificationData } from 'types/course/notifications';
 
@@ -14,7 +13,7 @@ interface Props extends WrappedComponentProps {
 const translations = defineMessages({
   latestActivityHeader: {
     id: 'course.courses.CourseNotifications.latestActivity',
-    defaultMessage: 'Latest Activity',
+    defaultMessage: 'Latest Activities',
   },
 });
 
@@ -26,30 +25,22 @@ const CourseNotifications: FC<Props> = (props) => {
   }
 
   return (
-    <>
-      <h2>{intl.formatMessage(translations.latestActivityHeader)}</h2>
-      <div
-        style={{
-          borderStyle: 'solid',
-          borderWidth: 0.2,
-          borderColor: grey[300],
-          borderRadius: 10,
-          padding: 10,
-          marginBottom: 20,
-        }}
-      >
-        <Stack>
-          {notifications.map((notification, index) => (
-            <NotificationCard
-              // OK to use index since activity cannot be directly modified by anyone
-              // eslint-disable-next-line react/no-array-index-key
-              key={`${index}_${notification.actableId}`}
-              notification={notification}
-            />
-          ))}
-        </Stack>
-      </div>
-    </>
+    <section className="space-y-2">
+      <Typography variant="h6">
+        {intl.formatMessage(translations.latestActivityHeader)}
+      </Typography>
+
+      <Paper className="p-3" variant="outlined">
+        {notifications.map((notification, index) => (
+          <NotificationCard
+            // OK to use index since activity cannot be directly modified by anyone
+            // eslint-disable-next-line react/no-array-index-key
+            key={`${index}_${notification.actableId}`}
+            notification={notification}
+          />
+        ))}
+      </Paper>
+    </section>
   );
 };
 
diff --git a/client/app/bundles/course/courses/components/misc/NotificationCard.tsx b/client/app/bundles/course/courses/components/misc/NotificationCard.tsx
index f0578d5d608..0162e6203e0 100644
--- a/client/app/bundles/course/courses/components/misc/NotificationCard.tsx
+++ b/client/app/bundles/course/courses/components/misc/NotificationCard.tsx
@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Avatar } from '@mui/material';
+import { Avatar, Typography } from '@mui/material';
 import { NotificationData } from 'types/course/notifications';
 
+import Link from 'lib/components/core/Link';
 import {
   getAchievementURL,
   getAssessmentURL,
@@ -109,28 +110,30 @@ const NotificationCard: FC<Props> = (props) => {
   }
 
   return (
-    <div
-      id={`notification-${notification.id}`}
-      style={{ padding: 5, display: 'flex' }}
-    >
+    <div className="flex space-x-5 p-2" id={`notification-${notification.id}`}>
       <Avatar
-        src={notification.userInfo.imageUrl}
-        sx={{ marginRight: '10px' }}
+        alt={notification.userInfo.name}
+        src={notification.userInfo.imageUrl ?? '#'}
       />
+
       <div>
-        <div>
-          <a href={notification.userInfo.userUrl}>
+        <Typography variant="body2">
+          <Link to={notification.userInfo.userUrl}>
             {notification.userInfo.name}
-          </a>
+          </Link>
+
           {` ${concatMessage} `}
+
           {notification.actableName && (
-            <a href={actableLink}>{notification.actableName}</a>
+            <Link to={actableLink}>{notification.actableName}</Link>
           )}
+
           {notification.levelNumber && `${notification.levelNumber}`}
-        </div>
-        <i style={{ fontWeight: 'lighter' }}>
+        </Typography>
+
+        <Typography color="text.secondary" variant="caption">
           {formatFullDateTime(notification.createdAt)}
-        </i>
+        </Typography>
       </div>
     </div>
   );
diff --git a/client/app/bundles/course/courses/components/tables/PendingTodosTable.tsx b/client/app/bundles/course/courses/components/tables/PendingTodosTable.tsx
index b3e63ba5aed..63f78ff25ac 100644
--- a/client/app/bundles/course/courses/components/tables/PendingTodosTable.tsx
+++ b/client/app/bundles/course/courses/components/tables/PendingTodosTable.tsx
@@ -1,18 +1,20 @@
 import { CSSProperties, FC, memo, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { KeyboardArrowDown } from '@mui/icons-material';
 import {
   Button,
-  Link,
   Stack,
-  Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
+  Typography,
 } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { TodoData } from 'types/course/lesson-plan/todos';
 
+import TableContainer from 'lib/components/core/layouts/TableContainer';
+import Link from 'lib/components/core/Link';
 import PersonalStartEndTime from 'lib/components/extensions/PersonalStartEndTime';
 import {
   getAssessmentAttemptURL,
@@ -58,15 +60,15 @@ const translations = defineMessages({
   },
   tableHeaderStartAt: {
     id: 'course.courses.PendingTodosTable.tableHeaderStartAt',
-    defaultMessage: 'Start At',
+    defaultMessage: 'Starts at',
   },
   tableHeaderEndAt: {
     id: 'course.courses.PendingTodosTable.tableHeaderEndAt',
-    defaultMessage: 'End At',
+    defaultMessage: 'Ends at',
   },
   tableSeeMore: {
     id: 'course.courses.PendingTodosTable.tableSeeMore',
-    defaultMessage: 'SEE MORE',
+    defaultMessage: 'See {n} more',
   },
   accessButtonRespond: {
     id: 'course.courses.PendingTodosTable.accessButtonRespond',
@@ -74,7 +76,7 @@ const translations = defineMessages({
   },
   accessButtonEnterPassword: {
     id: 'course.courses.PendingTodosTable.accessButtonEnterPassword',
-    defaultMessage: 'Enter Password',
+    defaultMessage: 'Unlock',
   },
   accessButtonAttempt: {
     id: 'course.courses.PendingTodosTable.accessButtonAttempt',
@@ -229,23 +231,25 @@ const PendingTodosTable: FC<Props> = (props) => {
   };
 
   return (
-    <>
-      <h2>{header}</h2>
-      <Table>
+    <section className="space-y-2">
+      <Typography variant="h6">{header}</Typography>
+
+      <TableContainer dense variant="outlined">
         <TableHead>
           <TableRow>
-            <TableCell>
+            <TableCell className="whitespace-nowrap">
               {intl.formatMessage(translations.tableHeaderTitle)}
             </TableCell>
-            <TableCell>
+            <TableCell className="whitespace-nowrap">
               {intl.formatMessage(translations.tableHeaderStartAt)}
             </TableCell>
-            <TableCell>
+            <TableCell className="whitespace-nowrap">
               {intl.formatMessage(translations.tableHeaderEndAt)}
             </TableCell>
             <TableCell />
           </TableRow>
         </TableHead>
+
         <TableBody>
           {shavedTodos.map((todo) => (
             <TableRow
@@ -255,10 +259,10 @@ const PendingTodosTable: FC<Props> = (props) => {
             >
               <TableCell>
                 <Link
-                  href={`${getCourseURL(getCourseId())}/${todoType}/${
+                  to={`${getCourseURL(getCourseId())}/${todoType}/${
                     todo.itemActableId
                   }`}
-                  style={{ textDecoration: 'none' }}
+                  underline="hover"
                 >
                   {todo.itemActableTitle}
                 </Link>
@@ -273,24 +277,18 @@ const PendingTodosTable: FC<Props> = (props) => {
             </TableRow>
           ))}
         </TableBody>
-      </Table>
+      </TableContainer>
+
       {todos.length > shavedTodos.length && (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            padding: 10,
-            marginTop: 10,
-          }}
-        >
-          <Button onClick={handleSeeMore}>
-            {`${intl.formatMessage(translations.tableSeeMore)} (${
-              todos.length - shavedTodos.length
-            })`}
+        <div className="mt-4 flex justify-center">
+          <Button endIcon={<KeyboardArrowDown />} onClick={handleSeeMore}>
+            {intl.formatMessage(translations.tableSeeMore, {
+              n: todos.length - shavedTodos.length,
+            })}
           </Button>
         </div>
       )}
-    </>
+    </section>
   );
 };
 
diff --git a/client/app/bundles/course/courses/pages/CourseShow/index.tsx b/client/app/bundles/course/courses/pages/CourseShow/index.tsx
index 172d96b9a82..6c88463a537 100644
--- a/client/app/bundles/course/courses/pages/CourseShow/index.tsx
+++ b/client/app/bundles/course/courses/pages/CourseShow/index.tsx
@@ -2,11 +2,12 @@ import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { Grid } from '@mui/material';
+import { Typography } from '@mui/material';
+import { CourseEntity } from 'types/course/courses';
 
 import AvatarWithLabel from 'lib/components/core/AvatarWithLabel';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import CourseAnnouncements from '../../components/misc/CourseAnnouncements';
@@ -33,6 +34,13 @@ const translations = defineMessages({
   },
 });
 
+const getShouldShowEnrolOptions = (course: CourseEntity): boolean => {
+  const info = course.registrationInfo;
+  if (!info) return false;
+
+  return info.isDisplayCodeForm || info.isEnrollable;
+};
+
 const CourseShow: FC<Props> = (props) => {
   const { intl } = props;
   const [isLoading, setIsLoading] = useState(true);
@@ -59,54 +67,61 @@ const CourseShow: FC<Props> = (props) => {
   }
 
   return (
-    <>
-      <PageHeader title={course.title} />
-
+    <Page className="space-y-5">
       {!course.permissions.isCurrentCourseUser && (
         <>
-          <Grid columns={{ xs: 1, lg: 4 }} container direction="row-reverse">
-            <Grid item lg={3} xs={1}>
-              <div style={{ display: 'flex', justifyContent: 'right' }}>
-                {course.registrationInfo && (
-                  <CourseEnrolOptions
-                    registrationInfo={course.registrationInfo}
-                  />
-                )}
-              </div>
-            </Grid>
-            <Grid item lg={1} xs={1}>
-              <h2 style={{ marginRight: 20, marginTop: 5 }}>
+          {getShouldShowEnrolOptions(course) && (
+            <div className="flex justify-end">
+              <CourseEnrolOptions registrationInfo={course.registrationInfo!} />
+            </div>
+          )}
+
+          {course.description.trim() && (
+            <section className="space-y-2">
+              <Typography variant="h6">
                 {intl.formatMessage(translations.descriptionHeader)}
-              </h2>
-            </Grid>
-          </Grid>
-          <div
-            dangerouslySetInnerHTML={{ __html: course.description }}
-            id="course-description"
-          />
-          <h2>{intl.formatMessage(translations.instructorsHeader)}</h2>
-          <Grid container spacing={1}>
-            {course.instructors?.map((instructor) => (
-              <Grid key={instructor.id} item lg={1} sm={2} xs={3}>
-                <div id={`instructor-${instructor.id}`}>
+              </Typography>
+
+              <Typography
+                dangerouslySetInnerHTML={{ __html: course.description }}
+                id="course-description"
+                variant="body2"
+              />
+            </section>
+          )}
+
+          <section className="space-y-2">
+            <Typography variant="h6">
+              {intl.formatMessage(translations.instructorsHeader)}
+            </Typography>
+
+            <div className="-m-4 flex flex-wrap">
+              {course.instructors?.map((instructor) => (
+                <div
+                  key={instructor.id}
+                  className="m-4 w-32 space-y-4"
+                  id={`instructor-${instructor.id}`}
+                >
                   <AvatarWithLabel
                     imageUrl={instructor.imageUrl!}
                     label={instructor.name}
                     size="sm"
                   />
                 </div>
-              </Grid>
-            ))}
-          </Grid>
+              ))}
+            </div>
+          </section>
         </>
       )}
 
       {(course.permissions.isCurrentCourseUser ||
         course.permissions.canManage) && (
         <>
-          <CourseAnnouncements
-            announcements={course.currentlyActiveAnnouncements}
-          />
+          {Boolean(course.currentlyActiveAnnouncements?.length) && (
+            <CourseAnnouncements
+              announcements={course.currentlyActiveAnnouncements}
+            />
+          )}
 
           {course.assessmentTodos && (
             <PendingTodosTable
@@ -126,7 +141,7 @@ const CourseShow: FC<Props> = (props) => {
           <CourseNotifications notifications={course.notifications} />
         </>
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/courses/pages/CoursesIndex/index.tsx b/client/app/bundles/course/courses/pages/CoursesIndex/index.tsx
index d72a564b423..b9a211c488d 100644
--- a/client/app/bundles/course/courses/pages/CoursesIndex/index.tsx
+++ b/client/app/bundles/course/courses/pages/CoursesIndex/index.tsx
@@ -1,10 +1,11 @@
 import { FC, ReactElement, useEffect, useState } from 'react';
 import { defineMessages } from 'react-intl';
+import { useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Button } from '@mui/material';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -50,7 +51,9 @@ const translations = defineMessages({
 
 const CoursesIndex: FC = () => {
   const { t } = useTranslation();
-  const [isNewCourseDialogOpen, setIsNewCourseDialogOpen] = useState(false);
+
+  const [params] = useSearchParams();
+
   const [isLoading, setIsLoading] = useState(true);
   const [isRoleRequestDialogOpen, setRoleRequestDialogOpen] = useState(false);
   const courses = useAppSelector(getAllCourseMiniEntities);
@@ -63,6 +66,13 @@ const CoursesIndex: FC = () => {
 
   const dispatch = useAppDispatch();
 
+  const shouldOpenNewCourseDialog =
+    Boolean(params.get('new')) && coursesPermissions?.canCreate;
+
+  const [isNewCourseDialogOpen, setIsNewCourseDialogOpen] = useState(
+    shouldOpenNewCourseDialog,
+  );
+
   useEffect(() => {
     dispatch(fetchCourses())
       .finally(() => setIsLoading(false))
@@ -102,8 +112,7 @@ const CoursesIndex: FC = () => {
   }
 
   return (
-    <>
-      <PageHeader title={t(translations.header)} toolbars={headerToolbars} />
+    <Page actions={headerToolbars} title={t(translations.header)}>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -124,8 +133,10 @@ const CoursesIndex: FC = () => {
           )}
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default CoursesIndex;
+const handle = translations.header;
+
+export default Object.assign(CoursesIndex, { handle });
diff --git a/client/app/bundles/course/discussion/topics/components/cards/CommentCard.tsx b/client/app/bundles/course/discussion/topics/components/cards/CommentCard.tsx
index 24130ddf5c5..0d1af9a3ee6 100644
--- a/client/app/bundles/course/discussion/topics/components/cards/CommentCard.tsx
+++ b/client/app/bundles/course/discussion/topics/components/cards/CommentCard.tsx
@@ -9,12 +9,13 @@ import { toast } from 'react-toastify';
 import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Button, CardHeader, Link } from '@mui/material';
+import { Avatar, Button, CardHeader } from '@mui/material';
 import { grey, orange, red } from '@mui/material/colors';
 import { CommentPostMiniEntity } from 'types/course/comments';
 
 import ConfirmationDialog from 'lib/components/core/dialogs/ConfirmationDialog';
 import CKEditorRichText from 'lib/components/core/fields/CKEditorRichText';
+import Link from 'lib/components/core/Link';
 import { useAppDispatch } from 'lib/hooks/store';
 import { formatLongDateTime } from 'lib/moment';
 
@@ -195,12 +196,14 @@ const CommentCard: FC<Props> = (props) => {
           avatar={
             <Avatar
               alt={post.creator.name}
+              className="wh-14"
               component={Link}
-              href={post.creator.userUrl}
               src={post.creator.imageUrl}
-              style={{ height: '25px', width: '25px' }}
+              to={post.creator.userUrl}
+              underline="none"
             />
           }
+          classes={{ avatar: 'mr-4' }}
           style={{ padding: 6 }}
           subheader={`${formatLongDateTime(post.createdAt)}${
             post.isDelayed ? ' (delayed comment)' : ''
@@ -208,7 +211,9 @@ const CommentCard: FC<Props> = (props) => {
           subheaderTypographyProps={{ display: 'block' }}
           title={
             post.creator.userUrl ? (
-              <a href={post.creator.userUrl}>{post.creator.name}</a>
+              <Link to={post.creator.userUrl} underline="hover">
+                {post.creator.name}
+              </Link>
             ) : (
               post.creator.name
             )
diff --git a/client/app/bundles/course/discussion/topics/components/cards/TopicCard.tsx b/client/app/bundles/course/discussion/topics/components/cards/TopicCard.tsx
index f694190ab95..8c9a5eb1b93 100644
--- a/client/app/bundles/course/discussion/topics/components/cards/TopicCard.tsx
+++ b/client/app/bundles/course/discussion/topics/components/cards/TopicCard.tsx
@@ -1,16 +1,18 @@
 import { FC, lazy, Suspense, useEffect, useState } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { defineMessages } from 'react-intl';
 import {
   CheckCircleOutline,
   PendingOutlined,
   ScheduleOutlined,
 } from '@mui/icons-material';
-import { Card, CardContent, CardHeader, Link } from '@mui/material';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
 import { CommentStatusTypes, CommentTopicEntity } from 'types/course/comments';
 
+import Link from 'lib/components/core/Link';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
 
 import { updatePending, updateRead } from '../../operations';
 import { getAllCommentPostMiniEntities } from '../../selectors';
@@ -25,14 +27,14 @@ const CommentField = lazy(
     ),
 );
 
-interface Props extends WrappedComponentProps {
+interface TopicCardProps {
   topic: CommentTopicEntity;
 }
 
 const translations = defineMessages({
-  by: {
-    id: 'course.discussion.topics.TopicCard.by',
-    defaultMessage: 'By',
+  byCreator: {
+    id: 'course.discussion.topics.TopicCard.byCreator',
+    defaultMessage: 'Created by <link>{creatorName}</link>',
   },
   pendingStatus: {
     id: 'course.discussion.topics.TopicCard.pendingStatus',
@@ -56,8 +58,10 @@ const translations = defineMessages({
   },
 });
 
-const TopicCard: FC<Props> = (props) => {
-  const { intl, topic } = props;
+const TopicCard: FC<TopicCardProps> = (props) => {
+  const { topic } = props;
+  const { t } = useTranslation();
+
   const dispatch = useAppDispatch();
   const postListData = useAppSelector(getAllCommentPostMiniEntities).filter(
     (post) => post.topicId === topic.id,
@@ -130,7 +134,7 @@ const TopicCard: FC<Props> = (props) => {
             }}
           >
             <PendingOutlined />
-            {intl.formatMessage(translations.loadingStatus)}
+            {t(translations.loadingStatus)}
           </div>
         );
       case CommentStatusTypes.pending:
@@ -147,7 +151,7 @@ const TopicCard: FC<Props> = (props) => {
             }}
           >
             <ScheduleOutlined />
-            {intl.formatMessage(translations.pendingStatus)}
+            {t(translations.pendingStatus)}
           </Link>
         );
       case CommentStatusTypes.notPending:
@@ -164,7 +168,7 @@ const TopicCard: FC<Props> = (props) => {
             }}
           >
             <CheckCircleOutline />
-            {intl.formatMessage(translations.notPendingStatus)}
+            {t(translations.notPendingStatus)}
           </Link>
         );
       case CommentStatusTypes.read:
@@ -183,7 +187,7 @@ const TopicCard: FC<Props> = (props) => {
             }}
           >
             <CheckCircleOutline />
-            {intl.formatMessage(translations.unreadStatus)}
+            {t(translations.unreadStatus)}
           </Link>
         );
       default:
@@ -196,28 +200,38 @@ const TopicCard: FC<Props> = (props) => {
       <CardHeader
         style={{ paddingBottom: '0px' }}
         subheader={
-          <>
-            <div>{renderStatus()}</div>
-            <div>
-              {`${intl.formatMessage(translations.by)}: `}
-              <a href={getCourseUserURL(getCourseId(), topic.creator.id)}>
-                {topic.creator.name}
-              </a>
-            </div>
-          </>
+          <div className="space-y-4">
+            <Typography variant="body2">
+              {t(translations.byCreator, {
+                creatorName: topic.creator.name,
+                link: (chunk) => (
+                  <Link
+                    to={getCourseUserURL(getCourseId(), topic.creator.id)}
+                    underline="hover"
+                  >
+                    {chunk}
+                  </Link>
+                ),
+              })}
+            </Typography>
+
+            {renderStatus()}
+          </div>
         }
         title={
-          <a
+          <Link
             className={`topic-${topic.id}`}
-            href={topic.links.titleLink}
             id={`topic-${topic.id}-${
               topic.timestamp?.toString().replaceAll(':', '-') ?? ''
             }`}
+            to={topic.links.titleLink}
+            underline="hover"
+            variant="h6"
           >
             {topic.timestamp
               ? `${topic.title}: ${topic.timestamp.toString()}`
               : topic.title}
-          </a>
+          </Link>
         }
       />
       <CardContent>
@@ -246,7 +260,7 @@ const TopicCard: FC<Props> = (props) => {
                   marginTop: 10,
                 }}
               >
-                {intl.formatMessage(translations.loadingComment)}
+                {t(translations.loadingComment)}
               </div>
             }
           >
@@ -258,4 +272,4 @@ const TopicCard: FC<Props> = (props) => {
   );
 };
 
-export default injectIntl(TopicCard);
+export default TopicCard;
diff --git a/client/app/bundles/course/discussion/topics/pages/CommentIndex/index.tsx b/client/app/bundles/course/discussion/topics/pages/CommentIndex/index.tsx
index 938e2177194..23b58efadf3 100644
--- a/client/app/bundles/course/discussion/topics/pages/CommentIndex/index.tsx
+++ b/client/app/bundles/course/discussion/topics/pages/CommentIndex/index.tsx
@@ -15,9 +15,9 @@ import {
   CommentTabTypes,
 } from 'types/course/comments';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import CustomBadge from 'lib/components/extensions/CustomBadge';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import TopicList from '../../components/lists/TopicList';
@@ -199,24 +199,29 @@ const CommentIndex: FC<Props> = (props) => {
   }, [dispatch]);
 
   return (
-    <>
-      <PageHeader
-        title={
-          settings.title
-            ? settings.title
-            : intl.formatMessage(translations.comments)
-        }
-      />
+    <Page
+      title={
+        settings.title
+          ? settings.title
+          : intl.formatMessage(translations.comments)
+      }
+      unpadded
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
         <>
           <CommentTabs intl={intl} tabValue={tabValue} />
-          <TopicList key={tabValue} settings={settings} tabValue={tabValue} />
+
+          <Page.PaddedSection>
+            <TopicList key={tabValue} settings={settings} tabValue={tabValue} />
+          </Page.PaddedSection>
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(CommentIndex);
+const handle = translations.comments;
+
+export default Object.assign(injectIntl(CommentIndex), { handle });
diff --git a/client/app/bundles/course/duplication/components/BulkSelectors.jsx b/client/app/bundles/course/duplication/components/BulkSelectors.jsx
index 8f3adcaab98..ec5aad17343 100644
--- a/client/app/bundles/course/duplication/components/BulkSelectors.jsx
+++ b/client/app/bundles/course/duplication/components/BulkSelectors.jsx
@@ -1,6 +1,8 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
+
 const translations = defineMessages({
   selectAll: {
     id: 'course.duplication.BulkSelectors.selectAll',
@@ -25,18 +27,18 @@ const styles = {
 
 const BulkSelectors = ({ callback, styles: userStyles = {} }) => (
   <>
-    <a
+    <Link
       onClick={() => callback(true)}
       style={{ ...styles.selectLink, ...userStyles.selectLink }}
     >
       <FormattedMessage {...translations.selectAll} />
-    </a>
-    <a
+    </Link>
+    <Link
       onClick={() => callback(false)}
       style={{ ...styles.deselectLink, ...userStyles.deselectLink }}
     >
       <FormattedMessage {...translations.deselectAll} />
-    </a>
+    </Link>
   </>
 );
 
diff --git a/client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/index.jsx b/client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/index.jsx
index 44cc1fe869a..3a94d9d2b98 100644
--- a/client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/index.jsx
+++ b/client/app/bundles/course/duplication/pages/Duplication/DuplicateItemsConfirmation/index.jsx
@@ -9,6 +9,7 @@ import { duplicateItems } from 'course/duplication/operations';
 import { courseShape } from 'course/duplication/propTypes';
 import { actions } from 'course/duplication/store';
 import ConfirmationDialog from 'lib/components/core/dialogs/ConfirmationDialog';
+import Link from 'lib/components/core/Link';
 
 import AchievementsListing from './AchievementsListing';
 import AssessmentsListing from './AssessmentsListing';
@@ -83,11 +84,9 @@ class DuplicateItemsConfirmation extends Component {
         </ListSubheader>
         <Card>
           <CardContent>
-            <h4>
-              <a href={url} rel="noopener noreferrer" target="_blank">
-                {destinationCourse.title}
-              </a>
-            </h4>
+            <Link opensInNewTab to={url} variant="h6">
+              {destinationCourse.title}
+            </Link>
           </CardContent>
         </Card>
       </>
diff --git a/client/app/bundles/course/duplication/pages/Duplication/index.jsx b/client/app/bundles/course/duplication/pages/Duplication/index.jsx
index 46cbed98840..285f0b50712 100644
--- a/client/app/bundles/course/duplication/pages/Duplication/index.jsx
+++ b/client/app/bundles/course/duplication/pages/Duplication/index.jsx
@@ -7,6 +7,7 @@ import {
   Paper,
   Radio,
   RadioGroup,
+  Typography,
 } from '@mui/material';
 import PropTypes from 'prop-types';
 
@@ -22,8 +23,8 @@ import {
 } from 'course/duplication/propTypes';
 import { actions } from 'course/duplication/store';
 import DateTimePicker from 'lib/components/core/fields/DateTimePicker';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 
 import DestinationCourseSelector from './DestinationCourseSelector';
 import DuplicateAllButton from './DuplicateAllButton';
@@ -81,9 +82,6 @@ const styles = {
     gridTemplateColumns: '210px auto',
     gridTemplateRows: 'auto',
   },
-  sidebar: {
-    padding: '25px 20px',
-  },
   itemsSidebarHeader: {
     padding: '25px 20px 0px 20px',
   },
@@ -133,19 +131,22 @@ class Duplication extends Component {
 
     return (
       <div style={styles.bodyGrid}>
-        <div style={styles.sidebar}>
-          <h3>
+        <div>
+          <Typography variant="h6">
             <FormattedMessage {...translations.fromCourse} />
-          </h3>
+          </Typography>
         </div>
+
         <Paper style={styles.mainPanel}>{this.renderFromCourseMain()}</Paper>
 
-        <div style={styles.sidebar}>{this.renderToCourseSidebar()}</div>
+        <div>{this.renderToCourseSidebar()}</div>
+
         <Paper style={styles.mainPanel}>
           <DestinationCourseSelector />
         </Paper>
 
         {this.renderItemsSelectorSidebar()}
+
         {duplicationMode === duplicationModes.OBJECT && isCourseSelected ? (
           <Paper style={styles.mainPanel}>
             <ItemsSelector />
@@ -195,11 +196,7 @@ class Duplication extends Component {
     const { duplicationMode, isCourseSelected } = this.props;
 
     if (duplicationMode === duplicationModes.COURSE) {
-      return (
-        <div style={styles.sidebar}>
-          <DuplicateAllButton />
-        </div>
-      );
+      return <DuplicateAllButton />;
     }
     if (isCourseSelected) {
       return (
@@ -225,22 +222,14 @@ class Duplication extends Component {
       >
         <FormControlLabel
           key={duplicationModes.COURSE}
-          control={<Radio style={{ padding: 0, paddingLeft: 12 }} />}
-          label={
-            <b>
-              <FormattedMessage {...translations.newCourse} />
-            </b>
-          }
+          control={<Radio className="py-0" />}
+          label={<FormattedMessage {...translations.newCourse} />}
           value={duplicationModes.COURSE}
         />
         <FormControlLabel
           key={duplicationModes.OBJECT}
-          control={<Radio style={{ padding: 0, paddingLeft: 12 }} />}
-          label={
-            <b>
-              <FormattedMessage {...translations.existingCourse} />
-            </b>
-          }
+          control={<Radio className="py-0" />}
+          label={<FormattedMessage {...translations.existingCourse} />}
           value={duplicationModes.OBJECT}
         />
       </RadioGroup>
@@ -250,9 +239,9 @@ class Duplication extends Component {
   renderToCourseSidebar() {
     const { dispatch, modesAllowed } = this.props;
     const header = (
-      <h3>
+      <Typography variant="h6">
         <FormattedMessage {...translations.toCourse} />
-      </h3>
+      </Typography>
     );
 
     const isSingleValidMode =
@@ -274,12 +263,9 @@ class Duplication extends Component {
 
   render() {
     return (
-      <>
-        <PageHeader
-          title={<FormattedMessage {...translations.duplicateData} />}
-        />
+      <Page title={<FormattedMessage {...translations.duplicateData} />}>
         {this.renderBody()}
-      </>
+      </Page>
     );
   }
 }
@@ -300,15 +286,20 @@ Duplication.propTypes = {
   intl: PropTypes.object,
 };
 
-export default connect(({ duplication }) => ({
-  isLoading: duplication.isLoading,
-  isChangingCourse: duplication.isChangingCourse,
-  isCourseSelected: !!duplication.destinationCourseId,
-  duplicationMode: duplication.duplicationMode,
-  modesAllowed: duplication.sourceCourse.duplicationModesAllowed,
-  enabledComponents: duplication.sourceCourse.enabledComponents,
-  currentHost: duplication.currentHost,
-  currentCourseId: duplication.currentCourseId,
-  sourceCourse: duplication.sourceCourse,
-  sourceCourses: duplication.sourceCourses,
-}))(injectIntl(Duplication));
+const handle = translations.duplicateData;
+
+export default Object.assign(
+  connect(({ duplication }) => ({
+    isLoading: duplication.isLoading,
+    isChangingCourse: duplication.isChangingCourse,
+    isCourseSelected: !!duplication.destinationCourseId,
+    duplicationMode: duplication.duplicationMode,
+    modesAllowed: duplication.sourceCourse.duplicationModesAllowed,
+    enabledComponents: duplication.sourceCourse.enabledComponents,
+    currentHost: duplication.currentHost,
+    currentCourseId: duplication.currentCourseId,
+    sourceCourse: duplication.sourceCourse,
+    sourceCourses: duplication.sourceCourses,
+  }))(injectIntl(Duplication)),
+  { handle },
+);
diff --git a/client/app/bundles/course/enrol-requests/pages/UserRequests/index.tsx b/client/app/bundles/course/enrol-requests/pages/UserRequests/index.tsx
index a27c387efcd..1c353f6c2cc 100644
--- a/client/app/bundles/course/enrol-requests/pages/UserRequests/index.tsx
+++ b/client/app/bundles/course/enrol-requests/pages/UserRequests/index.tsx
@@ -1,11 +1,10 @@
 import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
-import { Box } from '@mui/material';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import UserManagementTabs from '../../../users/components/navigation/UserManagementTabs';
@@ -83,15 +82,16 @@ const UserRequests: FC<Props> = (props) => {
       rejectedEnrolRequests.length === 0
     ) {
       return (
-        <Note message={intl.formatMessage(translations.noEnrolRequests)} />
+        <Page.PaddedSection>
+          <Note message={intl.formatMessage(translations.noEnrolRequests)} />
+        </Page.PaddedSection>
       );
     }
     return undefined;
   };
 
   return (
-    <Box>
-      <PageHeader title={intl.formatMessage(translations.manageUsersHeader)} />
+    <Page title={intl.formatMessage(translations.manageUsersHeader)} unpadded>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -127,8 +127,10 @@ const UserRequests: FC<Props> = (props) => {
           )}
         </>
       )}
-    </Box>
+    </Page>
   );
 };
 
-export default injectIntl(UserRequests);
+const handle = translations.manageUsersHeader;
+
+export default Object.assign(injectIntl(UserRequests), { handle });
diff --git a/client/app/bundles/course/experience-points/disbursement/components/forms/DisbursementForm.tsx b/client/app/bundles/course/experience-points/disbursement/components/forms/DisbursementForm.tsx
index 53914157379..ab8c0a5a807 100644
--- a/client/app/bundles/course/experience-points/disbursement/components/forms/DisbursementForm.tsx
+++ b/client/app/bundles/course/experience-points/disbursement/components/forms/DisbursementForm.tsx
@@ -17,6 +17,7 @@ import {
 import * as yup from 'yup';
 
 import ErrorText from 'lib/components/core/ErrorText';
+import Page from 'lib/components/core/layouts/Page';
 import FormTextField from 'lib/components/form/fields/TextField';
 import { setReactHookFormError } from 'lib/helpers/react-hook-form-helper';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
@@ -174,7 +175,7 @@ const DisbursementForm: FC<Props> = (props) => {
   };
 
   return (
-    <>
+    <Page.PaddedSection>
       <Autocomplete
         className="filter-group max-w-lg"
         clearOnEscape
@@ -241,14 +242,17 @@ const DisbursementForm: FC<Props> = (props) => {
               </Button>
             </Grid>
           </Grid>
-          <DisbursementTable
-            filteredUsers={filteredCourseUsers}
-            onClickCopy={onClickCopy}
-            onClickRemove={onClickRemove}
-          />
+
+          <Page.UnpaddedSection>
+            <DisbursementTable
+              filteredUsers={filteredCourseUsers}
+              onClickCopy={onClickCopy}
+              onClickRemove={onClickRemove}
+            />
+          </Page.UnpaddedSection>
         </form>
       </FormProvider>
-    </>
+    </Page.PaddedSection>
   );
 };
 
diff --git a/client/app/bundles/course/experience-points/disbursement/components/forms/ForumDisbursementForm.tsx b/client/app/bundles/course/experience-points/disbursement/components/forms/ForumDisbursementForm.tsx
index 5a8dc39ab91..09570b2999f 100644
--- a/client/app/bundles/course/experience-points/disbursement/components/forms/ForumDisbursementForm.tsx
+++ b/client/app/bundles/course/experience-points/disbursement/components/forms/ForumDisbursementForm.tsx
@@ -19,6 +19,7 @@ import {
 import * as yup from 'yup';
 
 import ErrorText from 'lib/components/core/ErrorText';
+import Page from 'lib/components/core/layouts/Page';
 import FormTextField from 'lib/components/form/fields/TextField';
 import { setReactHookFormError } from 'lib/helpers/react-hook-form-helper';
 import { useAppDispatch } from 'lib/hooks/store';
@@ -162,10 +163,13 @@ const ForumDisbursementForm: FC<Props> = (props) => {
             </Button>
           </Grid>
         </Grid>
-        <ForumDisbursementTable
-          forumUsers={forumUsers}
-          onPostClick={onPostClick}
-        />
+
+        <Page.UnpaddedSection>
+          <ForumDisbursementTable
+            forumUsers={forumUsers}
+            onPostClick={onPostClick}
+          />
+        </Page.UnpaddedSection>
       </form>
     </FormProvider>
   );
diff --git a/client/app/bundles/course/experience-points/disbursement/components/tables/DisbursementTable.tsx b/client/app/bundles/course/experience-points/disbursement/components/tables/DisbursementTable.tsx
index 955fdb4d848..d07b2cee48f 100644
--- a/client/app/bundles/course/experience-points/disbursement/components/tables/DisbursementTable.tsx
+++ b/client/app/bundles/course/experience-points/disbursement/components/tables/DisbursementTable.tsx
@@ -5,6 +5,7 @@ import { TableColumns, TableOptions } from 'types/components/DataTable';
 import { DisbursementCourseUserMiniEntity } from 'types/course/disbursement';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
@@ -77,13 +78,12 @@ const DisbursementTable: FC<Props> = (props: Props) => {
           },
         }),
         customBodyRenderLite: (dataIndex): JSX.Element => (
-          <a
+          <Link
             href={getCourseUserURL(getCourseId(), filteredUsers[dataIndex].id)}
-            rel="noopener noreferrer"
-            target="_blank"
+            opensInNewTab
           >
             {filteredUsers[dataIndex].name}
-          </a>
+          </Link>
         ),
       },
     },
diff --git a/client/app/bundles/course/experience-points/disbursement/components/tables/ForumDisbursementTable.tsx b/client/app/bundles/course/experience-points/disbursement/components/tables/ForumDisbursementTable.tsx
index 7e34cae6255..0b3dd61fc69 100644
--- a/client/app/bundles/course/experience-points/disbursement/components/tables/ForumDisbursementTable.tsx
+++ b/client/app/bundles/course/experience-points/disbursement/components/tables/ForumDisbursementTable.tsx
@@ -6,12 +6,12 @@ import {
   WrappedComponentProps,
 } from 'react-intl';
 import { Tooltip } from 'react-tooltip';
-import { Link } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { TableColumns, TableOptions } from 'types/components/DataTable';
 import { ForumDisbursementUserEntity } from 'types/course/disbursement';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
@@ -89,13 +89,12 @@ const ForumDisbursementTable: FC<Props> = (props: Props) => {
           style: { overflowWrap: 'anywhere', padding: '5px 14px' },
         }),
         customBodyRenderLite: (dataIndex): JSX.Element => (
-          <a
-            href={getCourseUserURL(getCourseId(), forumUsers[dataIndex].id)}
-            rel="noopener noreferrer"
-            target="_blank"
+          <Link
+            opensInNewTab
+            to={getCourseUserURL(getCourseId(), forumUsers[dataIndex].id)}
           >
             {forumUsers[dataIndex].name}
-          </a>
+          </Link>
         ),
       },
     },
@@ -165,12 +164,8 @@ const ForumDisbursementTable: FC<Props> = (props: Props) => {
 
             <Link
               className={`view-posts-${forumUsers[dataIndex].id}`}
-              component="button"
               data-tooltip-id="view-posts"
-              form=""
-              onClick={(): void => {
-                onPostClick(forumUsers[dataIndex]);
-              }}
+              onClick={(): void => onPostClick(forumUsers[dataIndex])}
             >
               {forumUsers[dataIndex].postCount}
             </Link>
diff --git a/client/app/bundles/course/experience-points/disbursement/components/tables/ForumPostTable.tsx b/client/app/bundles/course/experience-points/disbursement/components/tables/ForumPostTable.tsx
index 22e5d1656b4..e8a3ed7b772 100644
--- a/client/app/bundles/course/experience-points/disbursement/components/tables/ForumPostTable.tsx
+++ b/client/app/bundles/course/experience-points/disbursement/components/tables/ForumPostTable.tsx
@@ -5,6 +5,7 @@ import { TableColumns, TableOptions } from 'types/components/DataTable';
 import { ForumDisbursementPostEntity } from 'types/course/disbursement';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import { getForumTopicURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { formatLongDateTime } from 'lib/moment';
@@ -73,15 +74,16 @@ const ForumPostTable: FC<Props> = (props: Props) => {
         customBodyRenderLite: (dataIndex): JSX.Element => {
           const post = data[dataIndex];
           return (
-            <a
-              href={getForumTopicURL(
+            <Link
+              opensInNewTab
+              to={getForumTopicURL(
                 getCourseId(),
                 post.forumSlug,
                 post.topicSlug,
               )}
             >
               {post.title}
-            </a>
+            </Link>
           );
         },
       },
diff --git a/client/app/bundles/course/experience-points/disbursement/pages/DisbursementIndex/index.tsx b/client/app/bundles/course/experience-points/disbursement/pages/DisbursementIndex/index.tsx
index 22befe6b7af..26e25c0a0fc 100644
--- a/client/app/bundles/course/experience-points/disbursement/pages/DisbursementIndex/index.tsx
+++ b/client/app/bundles/course/experience-points/disbursement/pages/DisbursementIndex/index.tsx
@@ -8,11 +8,11 @@ import {
 import { toast } from 'react-toastify';
 import { Group } from '@mui/icons-material';
 import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
-import { Grid, Tab, Tabs } from '@mui/material';
+import { Tab, Tabs } from '@mui/material';
 import palette from 'theme/palette';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch } from 'lib/hooks/store';
 
 import { fetchDisbursements, fetchForumDisbursements } from '../../operations';
@@ -58,8 +58,7 @@ const DisbursementIndex: FC<Props> = (props) => {
   }, [dispatch]);
 
   return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.disbursements)} />
+    <Page title={intl.formatMessage(translations.disbursements)} unpadded>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -71,7 +70,6 @@ const DisbursementIndex: FC<Props> = (props) => {
             style={{
               backgroundColor: palette.background.default,
             }}
-            sx={{ marginBottom: 2 }}
             TabIndicatorProps={{ color: 'primary', style: { height: 5 } }}
             value={tabValue}
             variant="fullWidth"
@@ -91,30 +89,18 @@ const DisbursementIndex: FC<Props> = (props) => {
               value="general-disbursement-tab"
             />
           </Tabs>
-          <Grid
-            columnSpacing={2}
-            container
-            direction="row"
-            display={tabValue === 'general-disbursement-tab' ? 'flex' : 'none'}
-            id="general-disbursement-tab"
-            rowSpacing={2}
-          >
+
+          {tabValue === 'general-disbursement-tab' ? (
             <GeneralDisbursement />
-          </Grid>
-          <Grid
-            columnSpacing={2}
-            container
-            direction="column"
-            display={tabValue === 'forum-disbursement-tab' ? 'flex' : 'none'}
-            id="forum-disbursement-tab"
-            rowSpacing={2}
-          >
+          ) : (
             <ForumDisbursement />
-          </Grid>
+          )}
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(DisbursementIndex);
+const handle = translations.disbursements;
+
+export default Object.assign(injectIntl(DisbursementIndex), { handle });
diff --git a/client/app/bundles/course/experience-points/disbursement/pages/ForumDisbursement/index.tsx b/client/app/bundles/course/experience-points/disbursement/pages/ForumDisbursement/index.tsx
index 7bef25377c7..430ebcd4e94 100644
--- a/client/app/bundles/course/experience-points/disbursement/pages/ForumDisbursement/index.tsx
+++ b/client/app/bundles/course/experience-points/disbursement/pages/ForumDisbursement/index.tsx
@@ -12,6 +12,8 @@ import {
 } from '@mui/material';
 import { ForumDisbursementUserEntity } from 'types/course/disbursement';
 
+import Page from 'lib/components/core/layouts/Page';
+import Link from 'lib/components/core/Link';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
@@ -68,17 +70,16 @@ const ForumDisbursement: FC = () => {
   };
 
   return (
-    <>
+    <Page.PaddedSection>
       <Grid item xs>
         <Paper
-          elevation={3}
           sx={{
             padding: '5px 10px 0px 10px',
             marginBottom: '5px',
             display: 'flex',
             alignItems: 'center',
-            backgroundColor: '#eeeeee',
           }}
+          variant="outlined"
         >
           <FilterForm
             initialValues={{
@@ -124,14 +125,11 @@ const ForumDisbursement: FC = () => {
                   startDate: formatLongDateTime(filters.startTime),
                   endDate: formatLongDateTime(filters.endTime),
                 })}{' '}
-                <a
-                  href={getCourseUserURL(
-                    getCourseId(),
-                    selectedForumPostUser.id,
-                  )}
+                <Link
+                  to={getCourseUserURL(getCourseId(), selectedForumPostUser.id)}
                 >
                   {selectedForumPostUser.name}
-                </a>
+                </Link>
               </div>
               <IconButton onClick={(): void => setSelectedForumPostUser(null)}>
                 <CloseIcon />
@@ -143,7 +141,7 @@ const ForumDisbursement: FC = () => {
           </Dialog>
         )}
       </Grid>
-    </>
+    </Page.PaddedSection>
   );
 };
 
diff --git a/client/app/bundles/course/forum/components/buttons/NextUnreadButton.tsx b/client/app/bundles/course/forum/components/buttons/NextUnreadButton.tsx
index 1953e80485e..08d01e957fd 100644
--- a/client/app/bundles/course/forum/components/buttons/NextUnreadButton.tsx
+++ b/client/app/bundles/course/forum/components/buttons/NextUnreadButton.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { defineMessages } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { Button, Tooltip } from '@mui/material';
 
+import Link from 'lib/components/core/Link';
 import useTranslation from 'lib/hooks/useTranslation';
 
 interface Props {
diff --git a/client/app/bundles/course/forum/components/cards/PostCard.tsx b/client/app/bundles/course/forum/components/cards/PostCard.tsx
index 2a53aad770b..eb78dff0446 100644
--- a/client/app/bundles/course/forum/components/cards/PostCard.tsx
+++ b/client/app/bundles/course/forum/components/cards/PostCard.tsx
@@ -10,6 +10,7 @@ import {
 } from '@mui/material';
 
 import CKEditorRichText from 'lib/components/core/fields/CKEditorRichText';
+import Link from 'lib/components/core/Link';
 import { useAppSelector } from 'lib/hooks/store';
 import { formatLongDateTime } from 'lib/moment';
 
@@ -76,20 +77,16 @@ const PostCard: FC<Props> = (props) => {
             avatar={postCreatorObject.avatar}
             className="pb-0"
             subheader={formatLongDateTime(post.createdAt)}
-            subheaderTypographyProps={{ variant: 'body1' }}
             title={
               <>
-                {postCreatorObject.userUrl ? (
-                  <a
-                    href={postCreatorObject.userUrl}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    {postCreatorObject.name}
-                  </a>
-                ) : (
-                  postCreatorObject.name
-                )}
+                <Link
+                  opensInNewTab
+                  to={postCreatorObject.userUrl}
+                  variant="body1"
+                >
+                  {postCreatorObject.name}
+                </Link>
+
                 {postCreatorObject.visibilityIcon}
               </>
             }
diff --git a/client/app/bundles/course/forum/components/misc/PostCreatorObject.tsx b/client/app/bundles/course/forum/components/misc/PostCreatorObject.tsx
index 166264ec521..a321cb7528b 100644
--- a/client/app/bundles/course/forum/components/misc/PostCreatorObject.tsx
+++ b/client/app/bundles/course/forum/components/misc/PostCreatorObject.tsx
@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { defineMessages } from 'react-intl';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
-import { Avatar, IconButton, Link } from '@mui/material';
+import { Avatar, IconButton } from '@mui/material';
 
+import Link from 'lib/components/core/Link';
 import useTranslation from 'lib/hooks/useTranslation';
 
 interface PostCreatorProps {
@@ -58,8 +59,9 @@ const PostCreatorObject = (props: PostCreatorProps): PostCreatorReturnProps => {
           alt={creator.name}
           className="h-20 w-20"
           component={Link}
-          href={creator.userUrl}
           src={creator.imageUrl}
+          to={creator.userUrl}
+          underline="none"
         />
       ),
       name: creator.name,
@@ -74,8 +76,9 @@ const PostCreatorObject = (props: PostCreatorProps): PostCreatorReturnProps => {
           alt={creator.name}
           className="h-20 w-20"
           component={Link}
-          href={creator.userUrl}
           src={creator.imageUrl}
+          to={creator.userUrl}
+          underline="none"
         />
       ),
       name: creator.name,
diff --git a/client/app/bundles/course/forum/components/tables/ForumTable.tsx b/client/app/bundles/course/forum/components/tables/ForumTable.tsx
index 114103b72d2..11a9ba88458 100644
--- a/client/app/bundles/course/forum/components/tables/ForumTable.tsx
+++ b/client/app/bundles/course/forum/components/tables/ForumTable.tsx
@@ -1,6 +1,5 @@
 import { FC, memo } from 'react';
 import { defineMessages } from 'react-intl';
-import { Link } from 'react-router-dom';
 import Email from '@mui/icons-material/Email';
 import Help from '@mui/icons-material/Help';
 import { Tooltip, Typography } from '@mui/material';
@@ -9,6 +8,7 @@ import { TableColumns, TableOptions } from 'types/components/DataTable';
 import { ForumEntity } from 'types/course/forums';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import Note from 'lib/components/core/Note';
 import CustomBadge from 'lib/components/extensions/CustomBadge';
 import useTranslation from 'lib/hooks/useTranslation';
diff --git a/client/app/bundles/course/forum/components/tables/ForumTopicTable.tsx b/client/app/bundles/course/forum/components/tables/ForumTopicTable.tsx
index 0ca8cab97fd..f8b704c4bc6 100644
--- a/client/app/bundles/course/forum/components/tables/ForumTopicTable.tsx
+++ b/client/app/bundles/course/forum/components/tables/ForumTopicTable.tsx
@@ -1,6 +1,5 @@
 import { FC, memo } from 'react';
 import { defineMessages } from 'react-intl';
-import { Link } from 'react-router-dom';
 import {
   Campaign,
   CheckCircle,
@@ -15,6 +14,7 @@ import { TableColumns, TableOptions } from 'types/components/DataTable';
 import { ForumEntity, ForumTopicEntity } from 'types/course/forums';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import Note from 'lib/components/core/Note';
 import useTranslation from 'lib/hooks/useTranslation';
 import { formatLongDateTime } from 'lib/moment';
@@ -212,17 +212,9 @@ const ForumTopicTable: FC<Props> = (props) => {
               </div>
               <div>
                 {t(translations.startedBy)}{' '}
-                {postCreatorObject.userUrl ? (
-                  <a
-                    href={postCreatorObject.userUrl}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    {postCreatorObject.name}
-                  </a>
-                ) : (
-                  postCreatorObject.name
-                )}
+                <Link opensInNewTab to={postCreatorObject.userUrl}>
+                  {postCreatorObject.name}
+                </Link>
                 {postCreatorObject.visibilityIcon}
               </div>
             </>
@@ -265,17 +257,10 @@ const ForumTopicTable: FC<Props> = (props) => {
           });
           return (
             <>
-              {postCreatorObject.userUrl ? (
-                <a
-                  href={postCreatorObject.userUrl}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
-                  {postCreatorObject.name}
-                </a>
-              ) : (
-                postCreatorObject.name
-              )}
+              <Link opensInNewTab to={postCreatorObject.userUrl}>
+                {postCreatorObject.name}
+              </Link>
+
               {postCreatorObject.visibilityIcon}
               <div className="whitespace-nowrap">
                 {formatLongDateTime(latestPostCreator.createdAt)}
diff --git a/client/app/bundles/course/forum/handles.ts b/client/app/bundles/course/forum/handles.ts
new file mode 100644
index 00000000000..d3a262c5814
--- /dev/null
+++ b/client/app/bundles/course/forum/handles.ts
@@ -0,0 +1,32 @@
+import CourseAPI from 'api/course';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
+
+const getForumTitle = async (forumId: string): Promise<string> => {
+  const response = await CourseAPI.forum.forums.fetch(forumId);
+  return response.data.forum.name;
+};
+
+const getTopicTitle = async (
+  forumId: string,
+  topicId: string,
+): Promise<string> => {
+  const response = await CourseAPI.forum.topics.fetch(forumId, topicId);
+  return response.data.topic.title;
+};
+
+export const forumHandle: DataHandle = (match) => {
+  const forumId = match.params?.forumId;
+  if (!forumId) throw new Error(`Invalid forum id: ${forumId}`);
+
+  return { getData: () => getForumTitle(forumId) };
+};
+
+export const forumTopicHandle: DataHandle = (match) => {
+  const forumId = match.params?.forumId;
+  if (!forumId) throw new Error(`Invalid forum id: ${forumId}`);
+
+  const topicId = match.params?.topicId;
+  if (!topicId) throw new Error(`Invalid topic id: ${topicId}`);
+
+  return { getData: () => getTopicTitle(forumId, topicId) };
+};
diff --git a/client/app/bundles/course/forum/pages/ForumShow/index.tsx b/client/app/bundles/course/forum/pages/ForumShow/index.tsx
index 605d22bc99c..82569fc43f8 100644
--- a/client/app/bundles/course/forum/pages/ForumShow/index.tsx
+++ b/client/app/bundles/course/forum/pages/ForumShow/index.tsx
@@ -4,9 +4,8 @@ import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import AddButton from 'lib/components/core/buttons/AddButton';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
-import ScrollToTop from 'lib/components/navigation/ScrollToTop';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -118,14 +117,12 @@ const ForumShow: FC = () => {
   const forumPageHeaderTitle = forum ? forum.name : t(translations.header);
 
   return (
-    <>
-      <ScrollToTop />
-      <PageHeader
-        returnLink={forum?.rootForumUrl}
-        title={forumPageHeaderTitle}
-        toolbars={headerToolbars}
-      />
-
+    <Page
+      actions={headerToolbars}
+      backTo={forum?.rootForumUrl}
+      title={forumPageHeaderTitle}
+      unpadded
+    >
       {!isLoading && isOpen && (
         <ForumTopicNew
           availableTopicTypes={forum?.availableTopicTypes}
@@ -140,7 +137,7 @@ const ForumShow: FC = () => {
       ) : (
         <ForumTopicTable forum={forum} forumTopics={forumTopics} />
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/forum/pages/ForumTopicShow/index.tsx b/client/app/bundles/course/forum/pages/ForumTopicShow/index.tsx
index 170b63524c6..38cb08157a4 100644
--- a/client/app/bundles/course/forum/pages/ForumTopicShow/index.tsx
+++ b/client/app/bundles/course/forum/pages/ForumTopicShow/index.tsx
@@ -5,10 +5,9 @@ import { toast } from 'react-toastify';
 import { Box } from '@mui/material';
 import { TopicType } from 'types/course/forums';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
-import ScrollToTop from 'lib/components/navigation/ScrollToTop';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -137,16 +136,13 @@ const ForumTopicShow: FC = () => {
     );
 
   return (
-    <>
-      <ScrollToTop />
-      <PageHeader
-        returnLink={forumTopic?.forumUrl}
-        title={forumPageHeaderTitle}
-        toolbars={headerToolbars}
-      />
-
+    <Page
+      actions={headerToolbars}
+      backTo={forumTopic?.forumUrl}
+      title={forumPageHeaderTitle}
+    >
       {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/forum/pages/ForumsIndex/index.tsx b/client/app/bundles/course/forum/pages/ForumsIndex/index.tsx
index ed21bde0c27..1f2072c4640 100644
--- a/client/app/bundles/course/forum/pages/ForumsIndex/index.tsx
+++ b/client/app/bundles/course/forum/pages/ForumsIndex/index.tsx
@@ -3,9 +3,8 @@ import { defineMessages } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import AddButton from 'lib/components/core/buttons/AddButton';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
-import ScrollToTop from 'lib/components/navigation/ScrollToTop';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -99,18 +98,19 @@ const ForumsIndex: FC = () => {
   );
 
   return (
-    <>
-      <ScrollToTop />
-      <PageHeader title={t(translations.header)} toolbars={headerToolbars} />
+    <Page actions={headerToolbars} title={t(translations.header)} unpadded>
       {!isLoading && isForumNewDialogOpen && (
         <ForumNew
           onClose={(): void => setIsForumNewDialogOpen(false)}
           open={isForumNewDialogOpen}
         />
       )}
+
       {isLoading ? <LoadingIndicator /> : <ForumTable forums={forums} />}
-    </>
+    </Page>
   );
 };
 
-export default ForumsIndex;
+const handle = translations.header;
+
+export default Object.assign(ForumsIndex, { handle });
diff --git a/client/app/bundles/course/group/pages/GroupIndex/index.jsx b/client/app/bundles/course/group/pages/GroupIndex/index.jsx
index dbe4f80f020..79f2e7fe842 100644
--- a/client/app/bundles/course/group/pages/GroupIndex/index.jsx
+++ b/client/app/bundles/course/group/pages/GroupIndex/index.jsx
@@ -1,14 +1,15 @@
 import { useEffect, useState } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
-import { Link, Outlet, useNavigate, useParams } from 'react-router-dom';
+import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Tab, Tabs } from '@mui/material';
 import PropTypes from 'prop-types';
 
 import CourseAPI from 'api/course';
+import Page from 'lib/components/core/layouts/Page';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 
 import GroupNew from '../GroupNew';
 
@@ -68,6 +69,7 @@ const GroupIndex = (props) => {
         {groupCategories.groupCategories.map((category) => (
           <Tab
             key={category.id}
+            className="no-underline outline-none"
             component={Link}
             label={category.name}
             to={`${category.id}`}
@@ -82,19 +84,18 @@ const GroupIndex = (props) => {
       <Note message={intl.formatMessage(translations.noCategory)} />
     ) : (
       <>
-        {renderTabs}
+        <Page.UnpaddedSection>{renderTabs}</Page.UnpaddedSection>
         <Outlet />
       </>
     );
 
   return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(translations.groups)}
-        toolbars={headerToolbars}
-      />
+    <Page
+      actions={headerToolbars}
+      title={intl.formatMessage(translations.groups)}
+    >
       {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
+    </Page>
   );
 };
 
@@ -102,4 +103,6 @@ GroupIndex.propTypes = {
   intl: PropTypes.object.isRequired,
 };
 
-export default injectIntl(GroupIndex);
+const handle = translations.groups;
+
+export default Object.assign(injectIntl(GroupIndex), { handle });
diff --git a/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx b/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx
index 03cc0091d9e..1c49297cd72 100644
--- a/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx
+++ b/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx
@@ -4,7 +4,6 @@ import {
   Avatar,
   AvatarGroup,
   Box,
-  Link,
   Tooltip,
   useMediaQuery,
 } from '@mui/material';
@@ -17,6 +16,7 @@ import {
 } from 'types/course/leaderboard';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import { getAchievementURL, getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 
@@ -145,15 +145,14 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
               )}
               marginRight={1}
               src={individualData[dataIndex].imageUrl}
+              underline="none"
             />
-            <a
-              href={getCourseUserURL(
-                getCourseId(),
-                individualData[dataIndex].id,
-              )}
+            <Link
+              to={getCourseUserURL(getCourseId(), individualData[dataIndex].id)}
+              underline="hover"
             >
               {individualData[dataIndex].name}
-            </a>
+            </Link>
           </Box>
         ),
       },
@@ -239,6 +238,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
                     href={getAchievementURL(getCourseId(), achievement.id)}
                     id={`achievement_${achievement.id}`}
                     src={achievement.badge.url}
+                    underline="none"
                   />
                 </Tooltip>
               );
@@ -298,6 +298,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
                     component={Link}
                     href={getCourseUserURL(getCourseId(), user.id)}
                     src={user.imageUrl}
+                    underline="none"
                   />
                 </Tooltip>
               ))}
diff --git a/client/app/bundles/course/leaderboard/pages/LeaderboardIndex/index.tsx b/client/app/bundles/course/leaderboard/pages/LeaderboardIndex/index.tsx
index aa525dfff28..9935f2650f7 100644
--- a/client/app/bundles/course/leaderboard/pages/LeaderboardIndex/index.tsx
+++ b/client/app/bundles/course/leaderboard/pages/LeaderboardIndex/index.tsx
@@ -12,8 +12,8 @@ import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import palette from 'theme/palette';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import LeaderboardTable from '../../components/tables/LeaderboardTable';
@@ -80,14 +80,14 @@ const LeaderboardIndex: FC<Props> = (props) => {
   const isGroupHidden = groupLeaderboardPoints.length === 0;
 
   return (
-    <>
-      <PageHeader
-        title={
-          settings.groupleaderboardTitle
-            ? settings.groupleaderboardTitle
-            : intl.formatMessage(translations.leaderboard)
-        }
-      />
+    <Page
+      title={
+        settings.groupleaderboardTitle
+          ? settings.groupleaderboardTitle
+          : intl.formatMessage(translations.leaderboard)
+      }
+      unpadded
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -218,8 +218,10 @@ const LeaderboardIndex: FC<Props> = (props) => {
           </Grid>
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(LeaderboardIndex);
+const handle = translations.leaderboard;
+
+export default Object.assign(injectIntl(LeaderboardIndex), { handle });
diff --git a/client/app/bundles/course/learning-map/components/Node/index.jsx b/client/app/bundles/course/learning-map/components/Node/index.jsx
index 535167dfbbb..d67152dba66 100644
--- a/client/app/bundles/course/learning-map/components/Node/index.jsx
+++ b/client/app/bundles/course/learning-map/components/Node/index.jsx
@@ -6,7 +6,8 @@ import { Card, CardContent } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
-import { COURSE_COMPONENT_ICONS } from 'lib/constants/sharedConstants';
+import Link from 'lib/components/core/Link';
+import { defensivelyGetIcon } from 'lib/constants/icons';
 
 import { nodeShape } from '../../propTypes';
 import translations from '../../translations';
@@ -85,7 +86,7 @@ const Node = (props) => {
     setIsNodeMenuDisplayed(true);
   };
 
-  const IconComponent = COURSE_COMPONENT_ICONS[node.courseMaterialType];
+  const Icon = defensivelyGetIcon(node.courseMaterialType);
 
   return (
     <div style={{ ...styles.wrapper, zIndex }}>
@@ -107,19 +108,15 @@ const Node = (props) => {
                 />
               </div>
             )}
-            <IconComponent style={styles.icon} />
+            <Icon style={styles.icon} />
             {!canModify && !node.unlocked && <Lock />}
           </CardContent>
           <div style={styles.content}>
             <CardContent style={styles.contentText}>
               <div>
-                <a
-                  href={`${node.contentUrl}`}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                >
+                <Link opensInNewTab to={`${node.contentUrl}`}>
                   {node.title}
-                </a>
+                </Link>
               </div>
               {canModify && (
                 <UnlockRateDisplay
diff --git a/client/app/bundles/course/learning-map/containers/LearningMap/index.jsx b/client/app/bundles/course/learning-map/containers/LearningMap/index.jsx
index ea38a40bc72..60d856f619f 100644
--- a/client/app/bundles/course/learning-map/containers/LearningMap/index.jsx
+++ b/client/app/bundles/course/learning-map/containers/LearningMap/index.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { fetchNodes } from 'course/learning-map/operations';
+import translations from 'course/learning-map/translations';
 
 import Canvas from '../Canvas';
 import Dashboard from '../Dashboard';
@@ -38,4 +39,6 @@ LearningMap.propTypes = {
   isLoading: PropTypes.bool.isRequired,
 };
 
-export default connect(mapStateToProps)(LearningMap);
+const handle = translations.defaultDashboardMessage;
+
+export default Object.assign(connect(mapStateToProps)(LearningMap), { handle });
diff --git a/client/app/bundles/course/lesson-plan/containers/ColumnVisibilityDropdown/index.jsx b/client/app/bundles/course/lesson-plan/containers/ColumnVisibilityDropdown/index.jsx
index 744567a4e6f..c37a2db4a92 100644
--- a/client/app/bundles/course/lesson-plan/containers/ColumnVisibilityDropdown/index.jsx
+++ b/client/app/bundles/course/lesson-plan/containers/ColumnVisibilityDropdown/index.jsx
@@ -15,7 +15,7 @@ const { ITEM_TYPE, START_AT, BONUS_END_AT, END_AT, PUBLISHED } = fields;
 const translations = defineMessages({
   label: {
     id: 'course.lessonPlan.ColumnVisibilityDropdown.label',
-    defaultMessage: 'Toggle Column Visibility',
+    defaultMessage: 'Columns',
   },
 });
 
diff --git a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/index.jsx b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/index.jsx
index c948d15c798..390168beab7 100644
--- a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/index.jsx
+++ b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/index.jsx
@@ -73,7 +73,12 @@ LessonPlanLayout.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default connect(({ lessonPlan }) => ({
-  isLoading: lessonPlan.lessonPlan.isLoading,
-  groups: lessonPlan.lessonPlan.groups,
-}))(LessonPlanLayout);
+const handle = translations.lessonPlan;
+
+export default Object.assign(
+  connect(({ lessonPlan }) => ({
+    isLoading: lessonPlan.lessonPlan.isLoading,
+    groups: lessonPlan.lessonPlan.groups,
+  }))(LessonPlanLayout),
+  { handle },
+);
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/ItemRow/index.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/ItemRow/index.jsx
index 519cf251d02..c6ae37e71f2 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/ItemRow/index.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/ItemRow/index.jsx
@@ -3,6 +3,8 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
+
 import { fields } from '../../../constants';
 import { updateItem } from '../../../operations';
 
@@ -67,7 +69,9 @@ class ItemRow extends Component {
     return (
       <tr>
         {columnsVisible[fields.ITEM_TYPE] ? <td>{type}</td> : null}
-        <td>{itemPath ? <a href={itemPath}>{title}</a> : title}</td>
+        <td>
+          <Link to={itemPath}>{title}</Link>
+        </td>
         {columnsVisible[fields.START_AT] ? (
           <DateCell fieldName="start_at" fieldValue={startAt} {...dateProps} />
         ) : null}
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/index.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/index.jsx
index 12d7e27f81a..580248d3978 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/index.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/index.jsx
@@ -1,10 +1,9 @@
 import { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import { Card, CardContent } from '@mui/material';
 import PropTypes from 'prop-types';
 
-import PageHeader from 'lib/components/navigation/PageHeader';
+import Page from 'lib/components/core/layouts/Page';
 import { lessonPlanTypesGroups } from 'lib/types';
 
 import { fields } from '../../constants';
@@ -55,18 +54,6 @@ export class LessonPlanEdit extends Component {
     return rows;
   };
 
-  // eslint-disable-next-line class-methods-use-this
-  renderHeader = () => (
-    <Card>
-      <CardContent>
-        <ExitEditModeButton />
-        <NewMilestoneButton />
-        <NewEventButton />
-        <ColumnVisibilityDropdown />
-      </CardContent>
-    </Card>
-  );
-
   renderTableHeader() {
     const { columnsVisible } = this.props;
 
@@ -93,18 +80,26 @@ export class LessonPlanEdit extends Component {
     const { groups } = this.props;
 
     return (
-      <>
-        <PageHeader title={<FormattedMessage {...translations.lessonPlan} />} />
-
-        {this.props.canManageLessonPlan && this.renderHeader()}
-
+      <Page
+        actions={
+          this.props.canManageLessonPlan && (
+            <>
+              <ExitEditModeButton />
+              <NewMilestoneButton />
+              <NewEventButton />
+              <ColumnVisibilityDropdown />
+            </>
+          )
+        }
+        title={<FormattedMessage {...translations.lessonPlan} />}
+      >
         <div className="mt-8">
           <table className="border-separate border-spacing-x-4">
             {this.renderTableHeader()}
             <tbody>{groups.map(this.renderGroup)}</tbody>
           </table>
         </div>
-      </>
+      </Page>
     );
   }
 }
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/AdminTools.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/AdminTools.jsx
index 5751f80c376..7ff13f41489 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/AdminTools.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/AdminTools.jsx
@@ -4,7 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
-import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
 import PropTypes from 'prop-types';
 
 import { showDeleteConfirmation } from 'lib/actions';
@@ -38,16 +38,9 @@ const translations = defineMessages({
 const styles = {
   tools: {
     top: 16,
-    right: 66,
+    right: 20,
     position: 'absolute',
   },
-  edit: {
-    minWidth: 40,
-  },
-  delete: {
-    minWidth: 40,
-    marginLeft: 10,
-  },
 };
 
 class AdminTools extends PureComponent {
@@ -115,21 +108,13 @@ class AdminTools extends PureComponent {
 
     return (
       <span style={styles.tools}>
-        <Button
-          onClick={this.showEditEventDialog}
-          style={styles.edit}
-          variant="outlined"
-        >
+        <IconButton onClick={this.showEditEventDialog}>
           <Edit />
-        </Button>
-        <Button
-          color="secondary"
-          onClick={this.deleteEventHandler}
-          style={styles.delete}
-          variant="outlined"
-        >
+        </IconButton>
+
+        <IconButton color="error" onClick={this.deleteEventHandler}>
           <Delete />
-        </Button>
+        </IconButton>
       </span>
     );
   }
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/Details/index.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/Details/index.jsx
index d6381f230ea..869513223e8 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/Details/index.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/Details/index.jsx
@@ -2,6 +2,8 @@ import { PureComponent } from 'react';
 import { CardContent, CardHeader } from '@mui/material';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
+
 import Chips from './Chips';
 
 class Details extends PureComponent {
@@ -16,7 +18,13 @@ class Details extends PureComponent {
   renderTitle() {
     const { title, itemPath } = this.props;
     return (
-      <CardHeader title={itemPath ? <a href={itemPath}>{title}</a> : title} />
+      <CardHeader
+        title={
+          <Link to={itemPath} underline="hover" variant="h6">
+            {title}
+          </Link>
+        }
+      />
     );
   }
 
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/MilestoneAdminTools.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/MilestoneAdminTools.jsx
index 16006fd8813..e4fc28a6ab1 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/MilestoneAdminTools.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/MilestoneAdminTools.jsx
@@ -4,7 +4,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import Delete from '@mui/icons-material/Delete';
 import Edit from '@mui/icons-material/Edit';
-import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
 import PropTypes from 'prop-types';
 
 import { showDeleteConfirmation } from 'lib/actions';
@@ -35,17 +35,6 @@ const translations = defineMessages({
   },
 });
 
-const styles = {
-  edit: {
-    minWidth: 40,
-  },
-  delete: {
-    minWidth: 40,
-    marginLeft: 10,
-    marginRight: 20,
-  },
-};
-
 class MilestoneAdminTools extends PureComponent {
   deleteMilestoneHandler = () => {
     const {
@@ -98,21 +87,13 @@ class MilestoneAdminTools extends PureComponent {
 
     return (
       <span>
-        <Button
-          onClick={this.showEditMilestoneDialog}
-          style={styles.edit}
-          variant="outlined"
-        >
+        <IconButton onClick={this.showEditMilestoneDialog}>
           <Edit />
-        </Button>
-        <Button
-          color="secondary"
-          onClick={this.deleteMilestoneHandler}
-          style={styles.delete}
-          variant="outlined"
-        >
+        </IconButton>
+
+        <IconButton color="error" onClick={this.deleteMilestoneHandler}>
           <Delete />
-        </Button>
+        </IconButton>
       </span>
     );
   }
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/index.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/index.jsx
index ccb15194b94..9e968ee3b35 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/index.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/index.jsx
@@ -2,10 +2,9 @@ import { Component } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { scroller } from 'react-scroll';
-import { Card, CardContent } from '@mui/material';
 import PropTypes from 'prop-types';
 
-import PageHeader from 'lib/components/navigation/PageHeader';
+import Page from 'lib/components/core/layouts/Page';
 import moment from 'lib/moment';
 import { lessonPlanTypesGroups } from 'lib/types';
 
@@ -81,25 +80,22 @@ export class LessonPlanShow extends Component {
     );
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  renderHeader = () => (
-    <Card>
-      <CardContent>
-        <EnterEditModeButton />
-        <NewMilestoneButton />
-        <NewEventButton />
-      </CardContent>
-    </Card>
-  );
-
   render() {
     return (
-      <>
-        <PageHeader title={<FormattedMessage {...translations.lessonPlan} />} />
-
-        {this.props.canManageLessonPlan && this.renderHeader()}
+      <Page
+        actions={
+          this.props.canManageLessonPlan && (
+            <>
+              <EnterEditModeButton />
+              <NewMilestoneButton />
+              <NewEventButton />
+            </>
+          )
+        }
+        title={<FormattedMessage {...translations.lessonPlan} />}
+      >
         {this.props.groups.map((group) => this.renderGroup(group))}
-      </>
+      </Page>
     );
   }
 }
diff --git a/client/app/bundles/course/level/components/LevelRow.jsx b/client/app/bundles/course/level/components/LevelRow.jsx
index da75c349d75..4a9d756f493 100644
--- a/client/app/bundles/course/level/components/LevelRow.jsx
+++ b/client/app/bundles/course/level/components/LevelRow.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import Delete from '@mui/icons-material/Delete';
-import { Button, TableCell, TableRow, TextField } from '@mui/material';
+import { IconButton, TableCell, TableRow, TextField } from '@mui/material';
 import PropTypes from 'prop-types';
 
 const translations = defineMessages({
@@ -34,17 +34,17 @@ class LevelRow extends Component {
     const { deleteLevel, disabled, levelNumber } = this.props;
 
     return (
-      <Button
-        color="secondary"
+      <IconButton
+        className="-my-2"
+        color="error"
         disabled={disabled}
         id={`delete_${levelNumber}`}
         name={`delete_${levelNumber}`}
         onClick={deleteLevel(levelNumber)}
-        style={{ minWidth: '40px', width: '40px' }}
         variant="contained"
       >
         <Delete />
-      </Button>
+      </IconButton>
     );
   }
 
diff --git a/client/app/bundles/course/level/pages/LevelsIndex/index.jsx b/client/app/bundles/course/level/pages/LevelsIndex/index.jsx
index c8ae125298f..805f9fa1620 100644
--- a/client/app/bundles/course/level/pages/LevelsIndex/index.jsx
+++ b/client/app/bundles/course/level/pages/LevelsIndex/index.jsx
@@ -14,8 +14,8 @@ import {
 import PropTypes from 'prop-types';
 
 import { defaultComponentTitles } from 'course/translations.intl';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 
 import LevelRow from '../../components/LevelRow';
 import {
@@ -217,16 +217,16 @@ class LevelsIndex extends Component {
 
   render() {
     return (
-      <>
-        <PageHeader
-          title={
-            <FormattedMessage
-              {...defaultComponentTitles.course_levels_component}
-            />
-          }
-        />
+      <Page
+        title={
+          <FormattedMessage
+            {...defaultComponentTitles.course_levels_component}
+          />
+        }
+        unpadded
+      >
         {this.props.isLoading ? <LoadingIndicator /> : this.renderBody()}
-      </>
+      </Page>
     );
   }
 }
@@ -240,9 +240,14 @@ LevelsIndex.propTypes = {
   dispatch: PropTypes.func.isRequired,
 };
 
-export default connect(({ levels }) => ({
-  canManage: levels.canManage,
-  isLoading: levels.isLoading,
-  isSaving: levels.isSaving,
-  levels: levels.levels,
-}))(LevelsIndex);
+const handle = translations.levelHeader;
+
+export default Object.assign(
+  connect(({ levels }) => ({
+    canManage: levels.canManage,
+    isLoading: levels.isLoading,
+    isSaving: levels.isSaving,
+    levels: levels.levels,
+  }))(LevelsIndex),
+  { handle },
+);
diff --git a/client/app/bundles/course/material/folders/components/tables/TableMaterialRow.tsx b/client/app/bundles/course/material/folders/components/tables/TableMaterialRow.tsx
index f63f6bee631..5d4715ca81a 100644
--- a/client/app/bundles/course/material/folders/components/tables/TableMaterialRow.tsx
+++ b/client/app/bundles/course/material/folders/components/tables/TableMaterialRow.tsx
@@ -4,6 +4,7 @@ import { Stack, TableCell, TableRow } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { MaterialMiniEntity } from 'types/course/material/folders';
 
+import Link from 'lib/components/core/Link';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { formatFullDateTime } from 'lib/moment';
 
@@ -21,22 +22,22 @@ const TableMaterialRow: FC<Props> = (props) => {
 
   return (
     <TableRow id={`material-${material.id}`}>
-      <TableCell style={{ padding: 2, minWidth: '200px' }}>
+      <TableCell style={{ minWidth: '200px' }}>
         <Stack spacing={1}>
           <Stack alignItems="center" direction="row" spacing={0.5}>
             <DescriptionIcon htmlColor="grey" />
-            <a
+            <Link
               href={material.materialUrl}
-              rel="noopener noreferrer"
+              opensInNewTab
               style={{
                 textOverflow: 'initial',
                 whiteSpace: 'normal',
                 wordBreak: 'break-word',
               }}
-              target="_blank"
+              underline="hover"
             >
               {material.name}
-            </a>
+            </Link>
           </Stack>
           {material.description !== null &&
             material.description.length !== 0 && (
@@ -55,21 +56,21 @@ const TableMaterialRow: FC<Props> = (props) => {
       </TableCell>
       <TableCell
         style={{
-          padding: 2,
           width: '240px',
           maxWidth: '240px',
           minWidth: '60px',
         }}
       >
-        <Stack>
+        <Stack className="items-start">
           <div>{formatFullDateTime(material.updatedAt)}</div>
-          <a href={material.updater.userUrl ?? '#'}>{material.updater.name}</a>
+          <Link to={material.updater.userUrl} underline="hover">
+            {material.updater.name}
+          </Link>
         </Stack>
       </TableCell>
       {!isCurrentCourseStudent && (
         <TableCell
           style={{
-            padding: 2,
             width: '240px',
             maxWidth: '240px',
             minWidth: '60px',
@@ -78,14 +79,7 @@ const TableMaterialRow: FC<Props> = (props) => {
           -
         </TableCell>
       )}
-      <TableCell
-        style={{
-          padding: 2,
-          width: '60px',
-          maxWidth: '60px',
-          minWidth: '30px',
-        }}
-      >
+      <TableCell style={{ width: '60px' }}>
         <WorkbinTableButtons
           canDelete={material.permissions.canDelete}
           canEdit={material.permissions.canEdit}
diff --git a/client/app/bundles/course/material/folders/components/tables/TableSubfolderRow.tsx b/client/app/bundles/course/material/folders/components/tables/TableSubfolderRow.tsx
index a4f8a66b95b..e2221eac1cd 100644
--- a/client/app/bundles/course/material/folders/components/tables/TableSubfolderRow.tsx
+++ b/client/app/bundles/course/material/folders/components/tables/TableSubfolderRow.tsx
@@ -1,6 +1,5 @@
 import { FC, memo } from 'react';
 import { defineMessages } from 'react-intl';
-import { Link } from 'react-router-dom';
 import {
   Block as BlockIcon,
   Folder as FolderIcon,
@@ -10,6 +9,7 @@ import { Stack, TableCell, TableRow, Tooltip } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { FolderMiniEntity } from 'types/course/material/folders';
 
+import Link from 'lib/components/core/Link';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import useTranslation from 'lib/hooks/useTranslation';
 import { formatFullDateTime } from 'lib/moment';
@@ -42,7 +42,7 @@ const TableSubfolderRow: FC<Props> = (props) => {
 
   return (
     <TableRow id={`subfolder-${subfolder.id}`}>
-      <TableCell style={{ padding: 2, minWidth: '200px' }}>
+      <TableCell style={{ minWidth: '200px' }}>
         <Stack spacing={1}>
           <Stack alignItems="center" direction="row" spacing={0.5}>
             <FolderIcon htmlColor="grey" />
@@ -55,6 +55,7 @@ const TableSubfolderRow: FC<Props> = (props) => {
               to={`/courses/${getCourseId()}/materials/folders/${
                 subfolder.id
               }/`}
+              underline="hover"
             >
               {`${subfolder.name} (${subfolder.itemCount})`}
             </Link>
@@ -88,7 +89,6 @@ const TableSubfolderRow: FC<Props> = (props) => {
       </TableCell>
       <TableCell
         style={{
-          padding: 2,
           width: '240px',
           maxWidth: '240px',
           minWidth: '60px',
@@ -99,7 +99,6 @@ const TableSubfolderRow: FC<Props> = (props) => {
       {!isCurrentCourseStudent && (
         <TableCell
           style={{
-            padding: 2,
             width: '240px',
             maxWidth: '240px',
             minWidth: '60px',
@@ -117,10 +116,7 @@ const TableSubfolderRow: FC<Props> = (props) => {
       )}
       <TableCell
         style={{
-          padding: 2,
           width: '60px',
-          maxWidth: '60px',
-          minWidth: '30px',
         }}
       >
         <WorkbinTableButtons
diff --git a/client/app/bundles/course/material/folders/components/tables/WorkbinTable.tsx b/client/app/bundles/course/material/folders/components/tables/WorkbinTable.tsx
index a24c33dc6eb..270b603676a 100644
--- a/client/app/bundles/course/material/folders/components/tables/WorkbinTable.tsx
+++ b/client/app/bundles/course/material/folders/components/tables/WorkbinTable.tsx
@@ -6,7 +6,6 @@ import {
 } from '@mui/icons-material';
 import {
   Button,
-  Table,
   TableBody,
   TableCell,
   TableHead,
@@ -18,6 +17,8 @@ import {
   MaterialMiniEntity,
 } from 'types/course/material/folders';
 
+import TableContainer from 'lib/components/core/layouts/TableContainer';
+
 import TableMaterialRow from './TableMaterialRow';
 import TableSubfolderRow from './TableSubfolderRow';
 
@@ -126,19 +127,13 @@ const WorkbinTable: FC<Props> = (props) => {
   };
 
   return (
-    <Table sx={{ marginBottom: 2 }}>
+    <TableContainer dense variant="bare">
       <TableHead>
         <TableRow>
-          <TableCell style={{ padding: 2 }}>
-            {columnHeaderWithSort('Name')}
-          </TableCell>
-          <TableCell style={{ padding: 2 }}>
-            {columnHeaderWithSort('Last Modified')}
-          </TableCell>
+          <TableCell>{columnHeaderWithSort('Name')}</TableCell>
+          <TableCell>{columnHeaderWithSort('Last Modified')}</TableCell>
           {!isCurrentCourseStudent && (
-            <TableCell style={{ padding: 2 }}>
-              {columnHeaderWithSort('Start At')}
-            </TableCell>
+            <TableCell>{columnHeaderWithSort('Start At')}</TableCell>
           )}
           <TableCell />
         </TableRow>
@@ -167,7 +162,7 @@ const WorkbinTable: FC<Props> = (props) => {
           );
         })}
       </TableBody>
-    </Table>
+    </TableContainer>
   );
 };
 
diff --git a/client/app/bundles/course/material/folders/handles.ts b/client/app/bundles/course/material/folders/handles.ts
new file mode 100644
index 00000000000..a3e04c8e8c5
--- /dev/null
+++ b/client/app/bundles/course/material/folders/handles.ts
@@ -0,0 +1,44 @@
+import { getIdFromUnknown } from 'utilities';
+
+import CourseAPI from 'api/course';
+import { CrumbPath, DataHandle } from 'lib/hooks/router/dynamicNest';
+
+const getFolderTitle = async (
+  courseUrl: string,
+  folderId: number,
+): Promise<CrumbPath> => {
+  const { data } = await CourseAPI.folders.fetch(folderId);
+
+  const workbinUrl = `${courseUrl}/materials/folders/${data.breadcrumbs[0].id}`;
+
+  return {
+    activePath: workbinUrl,
+    content: data.breadcrumbs.map((crumb) => ({
+      title: crumb.name,
+      url: `materials/folders/${crumb.id}`,
+    })),
+  };
+};
+
+/**
+ * `shouldRevalidate` here relies on the invariant that `folderHandle` is attached to
+ * a route that is stable across different folders, i.e., `/materials/folders`. This route
+ * will be the pathname that the Dynamic Nest API's builder uses to reconcile the children
+ * of the Workbin's crumb.
+ *
+ * Note that Workbin has only ONE crumb, but multiple children in its `content`. This strategy
+ * is due to the fact that the Workbin's URL does not reflect any information of the nesting of
+ * the folders. Thus, `useMatches` cannot notify `useDynamicNest` of the changes in the routes,
+ * e.g., `useDynamicNest` cannot know if we move out from Folder 2 to Folder 1 from the URL.
+ */
+export const folderHandle: DataHandle = (match) => {
+  const folderId = getIdFromUnknown(match.params?.folderId);
+  if (!folderId) throw new Error(`Invalid folder id: ${folderId}`);
+
+  const courseUrl = `/courses/${match.params.courseId}`;
+
+  return {
+    shouldRevalidate: true,
+    getData: () => getFolderTitle(courseUrl, folderId),
+  };
+};
diff --git a/client/app/bundles/course/material/folders/operations.ts b/client/app/bundles/course/material/folders/operations.ts
index 400049ab9ea..5405d5c36e7 100644
--- a/client/app/bundles/course/material/folders/operations.ts
+++ b/client/app/bundles/course/material/folders/operations.ts
@@ -71,7 +71,6 @@ export function loadFolder(folderId: number): Operation<SaveFolderAction> {
           data.currFolderInfo,
           data.subfolders,
           data.materials,
-          data.breadcrumbs,
           data.advanceStartAt,
           data.permissions,
         ),
@@ -93,7 +92,6 @@ export function createFolder(
           data.currFolderInfo,
           data.subfolders,
           data.materials,
-          data.breadcrumbs,
           data.advanceStartAt,
           data.permissions,
         ),
@@ -114,7 +112,6 @@ export function updateFolder(
           data.currFolderInfo,
           data.subfolders,
           data.materials,
-          data.breadcrumbs,
           data.advanceStartAt,
           data.permissions,
         ),
@@ -167,7 +164,6 @@ export function uploadMaterials(
             data.currFolderInfo,
             data.subfolders,
             data.materials,
-            data.breadcrumbs,
             data.advanceStartAt,
             data.permissions,
           ),
diff --git a/client/app/bundles/course/material/folders/pages/FolderShow/index.tsx b/client/app/bundles/course/material/folders/pages/FolderShow/index.tsx
index 5ccae448ed1..e042b2a4255 100644
--- a/client/app/bundles/course/material/folders/pages/FolderShow/index.tsx
+++ b/client/app/bundles/course/material/folders/pages/FolderShow/index.tsx
@@ -1,12 +1,10 @@
 import { FC, ReactElement, useEffect, useState } from 'react';
 import { defineMessages } from 'react-intl';
-import { Link, useParams } from 'react-router-dom';
-import { Breadcrumbs, Paper } from '@mui/material';
-import { grey } from '@mui/material/colors';
+import { useParams } from 'react-router-dom';
 
 import EditButton from 'lib/components/core/buttons/EditButton';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { getWorkbinFolderURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
@@ -19,7 +17,6 @@ import MaterialUpload from '../../components/misc/MaterialUpload';
 import WorkbinTable from '../../components/tables/WorkbinTable';
 import { loadFolder } from '../../operations';
 import {
-  getBreadcrumbs,
   getCurrFolderInfo,
   getFolderMaterials,
   getFolderPermissions,
@@ -50,7 +47,6 @@ const FolderShow: FC = () => {
   const subfolders = useAppSelector(getFolderSubfolders);
   const materials = useAppSelector(getFolderMaterials);
   const currFolderInfo = useAppSelector(getCurrFolderInfo);
-  const breadcrumbs = useAppSelector(getBreadcrumbs);
   const permissions = useAppSelector(getFolderPermissions);
 
   const [isLoading, setIsLoading] = useState(true);
@@ -114,52 +110,20 @@ const FolderShow: FC = () => {
   };
 
   return (
-    <>
-      <Paper
-        sx={{
-          marginBottom: '4px',
-          padding: '4px 8px',
-          backgroundColor: grey[100],
-          border: '0',
-        }}
-        variant="outlined"
-      >
-        <Breadcrumbs>
-          {breadcrumbs.map((breadcrumb, index) => {
-            if (index === breadcrumbs.length - 1) {
-              return (
-                <span key={`folder-breadcrumb-${breadcrumb.id}`}>
-                  {breadcrumb.name}
-                </span>
-              );
-            }
-            return (
-              <Link
-                key={`folder-breadcrumb-${breadcrumb.id}`}
-                to={`/courses/${getCourseId()}/materials/folders/${
-                  breadcrumb.id
-                }/`}
-              >
-                {breadcrumb.name}
-              </Link>
-            );
-          })}
-        </Breadcrumbs>
-      </Paper>
-      <PageHeader
-        key={`workbin-folder-${currFolderInfo.name}-${currFolderInfo.id}`}
-        returnLink={
-          currFolderInfo.parentId !== null
-            ? getWorkbinFolderURL(getCourseId(), currFolderInfo.parentId)
-            : undefined
-        }
-        title={
-          currFolderInfo.name === null
-            ? t(translations.defaultHeader)
-            : currFolderInfo.name
-        }
-        toolbars={headerToolbars}
-      />
+    <Page
+      actions={headerToolbars}
+      backTo={
+        currFolderInfo.parentId !== null
+          ? getWorkbinFolderURL(getCourseId(), currFolderInfo.parentId)
+          : undefined
+      }
+      title={
+        currFolderInfo.name === null
+          ? t(translations.defaultHeader)
+          : currFolderInfo.name
+      }
+      unpadded
+    >
       <WorkbinTable
         key={currFolderInfo.id}
         currFolderId={currFolderInfo.id}
@@ -187,7 +151,7 @@ const FolderShow: FC = () => {
         handleClose={(): void => setIsMaterialUploadOpen(false)}
         isOpen={isMaterialUploadOpen}
       />
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/material/folders/selectors.ts b/client/app/bundles/course/material/folders/selectors.ts
index 31d98ee47df..6de5dbe3686 100644
--- a/client/app/bundles/course/material/folders/selectors.ts
+++ b/client/app/bundles/course/material/folders/selectors.ts
@@ -24,10 +24,6 @@ export function getFolderMaterials(state: AppState) {
   );
 }
 
-export function getBreadcrumbs(state: AppState) {
-  return getLocalState(state).breadcrumbs;
-}
-
 export function getAdvanceStartAt(state: AppState) {
   return getLocalState(state).advanceStartAt;
 }
diff --git a/client/app/bundles/course/material/folders/store.ts b/client/app/bundles/course/material/folders/store.ts
index 2b789daebf5..63c026adbd8 100644
--- a/client/app/bundles/course/material/folders/store.ts
+++ b/client/app/bundles/course/material/folders/store.ts
@@ -35,7 +35,6 @@ const initialState: FoldersState = {
   },
   subfolders: createEntityStore(),
   materials: createEntityStore(),
-  breadcrumbs: [],
   advanceStartAt: 0,
   permissions: {
     isCurrentCourseStudent: false,
@@ -66,7 +65,6 @@ const reducer = produce((draft: FoldersState, action: FoldersActionType) => {
       saveListToStore(draft.materials, materialsEntityList);
 
       draft.advanceStartAt = action.advanceStartAt;
-      draft.breadcrumbs = action.breadcrumbs;
       draft.permissions = action.permissions;
       break;
     }
@@ -114,7 +112,6 @@ export const actions = {
     },
     subfolders: FolderListData[],
     materials: MaterialListData[],
-    breadcrumbs: { id: number; name: string }[],
     advanceStartAt: number,
     permissions: FolderPermissions,
   ): SaveFolderAction => {
@@ -123,7 +120,6 @@ export const actions = {
       currFolderInfo,
       subfolders,
       materials,
-      breadcrumbs,
       advanceStartAt,
       permissions,
     };
diff --git a/client/app/bundles/course/material/folders/types.ts b/client/app/bundles/course/material/folders/types.ts
index fba9fb3f365..f8309731629 100644
--- a/client/app/bundles/course/material/folders/types.ts
+++ b/client/app/bundles/course/material/folders/types.ts
@@ -29,7 +29,6 @@ export interface SaveFolderAction {
 
   subfolders: FolderListData[];
   materials: MaterialListData[];
-  breadcrumbs: { id: number; name: string }[];
   advanceStartAt: number;
   permissions: FolderPermissions;
 }
@@ -67,7 +66,6 @@ export interface FoldersState {
 
   subfolders: EntityStore<FolderMiniEntity>;
   materials: EntityStore<MaterialMiniEntity>;
-  breadcrumbs: { id: number; name: string }[];
   advanceStartAt: number;
   permissions: FolderPermissions;
 }
diff --git a/client/app/bundles/course/reference-timelines/TimelineDesigner.tsx b/client/app/bundles/course/reference-timelines/TimelineDesigner.tsx
index 951971d8a27..fb46a67a843 100644
--- a/client/app/bundles/course/reference-timelines/TimelineDesigner.tsx
+++ b/client/app/bundles/course/reference-timelines/TimelineDesigner.tsx
@@ -5,6 +5,7 @@ import { useAppDispatch } from 'lib/hooks/store';
 import DayView from './views/DayView';
 import { LastSavedProvider } from './contexts';
 import { fetchTimelines } from './operations';
+import translations from './translations';
 
 const TimelineDesigner = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -21,4 +22,6 @@ const TimelineDesigner = (): JSX.Element => {
   );
 };
 
-export default TimelineDesigner;
+const handle = translations.timelineDesigner;
+
+export default Object.assign(TimelineDesigner, { handle });
diff --git a/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx b/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx
index 918d15f674e..719499bdd2c 100644
--- a/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx
+++ b/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx
@@ -54,7 +54,7 @@ const DayCalendar = forwardRef<DayCalendarRef, DayCalendarProps>(
 
     return (
       <div className={`h-full w-full ${props.className ?? ''}`}>
-        <nav className="flex h-16 items-start justify-between px-4">
+        <nav className="flex h-16 items-start justify-between px-5">
           <div className="flex items-center justify-center rounded-xl border border-solid border-neutral-200 px-3">
             <Typography variant="subtitle1">{monthDisplay}</Typography>
           </div>
diff --git a/client/app/bundles/course/reference-timelines/components/TimelinesOverview/TimelinesOverview.tsx b/client/app/bundles/course/reference-timelines/components/TimelinesOverview/TimelinesOverview.tsx
index aa160b2aeb6..0fd2056f93b 100644
--- a/client/app/bundles/course/reference-timelines/components/TimelinesOverview/TimelinesOverview.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimelinesOverview/TimelinesOverview.tsx
@@ -29,7 +29,7 @@ const TimelinesOverview = (props: TimelinesOverviewProps): JSX.Element => {
   const [creating, setCreating] = useState(false);
 
   return (
-    <div className="relative py-4">
+    <div className="relative min-h-[6rem] px-5 py-4">
       <aside className="scrollbar-hidden flex items-start space-x-4 overflow-x-scroll pr-56">
         {timelines.map((timeline) => (
           <TimelinesOverviewItem
@@ -55,7 +55,7 @@ const TimelinesOverview = (props: TimelinesOverviewProps): JSX.Element => {
         ))}
       </aside>
 
-      <aside className="absolute right-0 top-0 flex h-full items-center pl-20 bg-fade-to-l-white">
+      <aside className="absolute right-0 top-0 flex h-full items-center pl-20 pr-5 bg-fade-to-l-white">
         <Button
           onClick={(): void => setCreating(true)}
           size="small"
diff --git a/client/app/bundles/course/reference-timelines/views/DayView/DayView.tsx b/client/app/bundles/course/reference-timelines/views/DayView/DayView.tsx
index 7d5612a111e..7eb50f136cc 100644
--- a/client/app/bundles/course/reference-timelines/views/DayView/DayView.tsx
+++ b/client/app/bundles/course/reference-timelines/views/DayView/DayView.tsx
@@ -46,7 +46,7 @@ const DayView = (): JSX.Element => {
   }, [filterKeyword, items]);
 
   return (
-    <main className="relative flex h-full overflow-hidden">
+    <main className="relative flex h-[calc(100vh_-_4rem)] overflow-hidden">
       <DayCalendar
         ref={calendarRef}
         className="ml-[32rem] border-0 border-l border-solid border-neutral-200"
@@ -58,7 +58,7 @@ const DayView = (): JSX.Element => {
       <SubmitIndicator className="absolute right-36 top-0 h-12" />
 
       <div className="pointer-events-none absolute left-0 top-0 flex h-full w-full flex-col">
-        <section className="pointer-events-auto flex h-36 w-[32rem] shrink-0 flex-col justify-between pb-3 pr-3">
+        <section className="pointer-events-auto flex h-36 w-[32rem] shrink-0 flex-col justify-between px-5 pb-5">
           <div className="flex items-center space-x-4">
             <Typography variant="h6">
               {t(translations.timelineDesigner)}
diff --git a/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx b/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx
index b4e9e43e77d..e0821f4979e 100644
--- a/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx
+++ b/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx
@@ -29,7 +29,7 @@ const ItemsSidebar = (props: ItemsSidebarProps): JSX.Element => {
           <div
             className={`w-1/2 border-0 border-r border-solid border-neutral-200 ${
               timelines.length <= 1 ? 'flex items-center' : 'py-2'
-            } pr-2`}
+            } pl-5 pr-2`}
           >
             <Typography
               className={
diff --git a/client/app/bundles/course/statistics/handles.ts b/client/app/bundles/course/statistics/handles.ts
new file mode 100644
index 00000000000..db1846d43e5
--- /dev/null
+++ b/client/app/bundles/course/statistics/handles.ts
@@ -0,0 +1,33 @@
+import { getIdFromUnknown } from 'utilities';
+
+import CourseAPI from 'api/course';
+import { CrumbPath, DataHandle } from 'lib/hooks/router/dynamicNest';
+
+import StatisticsIndex from './pages/StatisticsIndex';
+
+export const videoWatchHistoryHandle: DataHandle = (match) => {
+  const courseId = match.params.courseId;
+
+  const userId = getIdFromUnknown(match.params?.userId);
+  if (!userId) throw new Error(`Invalid user id: ${userId}`);
+
+  return {
+    getData: async (): Promise<CrumbPath> => {
+      const { data } = await CourseAPI.users.fetch(userId);
+
+      return {
+        activePath: `/courses/${courseId}/statistics`,
+        content: [
+          {
+            title: StatisticsIndex.handle,
+            url: 'statistics',
+          },
+          {
+            title: data.user.name,
+            url: `users/${data.user.id}/video_submissions`,
+          },
+        ],
+      };
+    },
+  };
+};
diff --git a/client/app/bundles/course/statistics/pages/StatisticsIndex/index.jsx b/client/app/bundles/course/statistics/pages/StatisticsIndex/index.jsx
index 38a8cc41ad7..2a66576b5e5 100644
--- a/client/app/bundles/course/statistics/pages/StatisticsIndex/index.jsx
+++ b/client/app/bundles/course/statistics/pages/StatisticsIndex/index.jsx
@@ -6,7 +6,7 @@ import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import PropTypes from 'prop-types';
 
-import PageHeader from 'lib/components/navigation/PageHeader';
+import Page from 'lib/components/core/layouts/Page';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import {
@@ -123,8 +123,7 @@ const StatisticsIndex = ({
   };
 
   return (
-    <>
-      <PageHeader title={t(translations.statistics)} />
+    <Page title={t(translations.statistics)} unpadded>
       <Box sx={{ width: '100%' }}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
           <Tabs
@@ -144,10 +143,12 @@ const StatisticsIndex = ({
           <StaffStatistics {...staffStatistics} />
         </TabPanel>
         <TabPanel index={2} value={value}>
-          <CourseStatistics {...courseStatistics} />
+          <Page.PaddedSection>
+            <CourseStatistics {...courseStatistics} />
+          </Page.PaddedSection>
         </TabPanel>
       </Box>
-    </>
+    </Page>
   );
 };
 
@@ -158,8 +159,13 @@ StatisticsIndex.propTypes = {
   staffStatistics: PropTypes.shape(staffIndexShape),
 };
 
-export default connect(({ statistics }) => ({
-  courseStatistics: statistics.courseStatistics,
-  studentsStatistics: statistics.studentsStatistics,
-  staffStatistics: statistics.staffStatistics,
-}))(StatisticsIndex);
+const handle = translations.statistics;
+
+export default Object.assign(
+  connect(({ statistics }) => ({
+    courseStatistics: statistics.courseStatistics,
+    studentsStatistics: statistics.studentsStatistics,
+    staffStatistics: statistics.staffStatistics,
+  }))(StatisticsIndex),
+  { handle },
+);
diff --git a/client/app/bundles/course/statistics/utils/parseStaffResponse.js b/client/app/bundles/course/statistics/utils/parseStaffResponse.js
index d4be541890f..e9db9a93961 100644
--- a/client/app/bundles/course/statistics/utils/parseStaffResponse.js
+++ b/client/app/bundles/course/statistics/utils/parseStaffResponse.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const processStaff = (staff) => ({
   ...staff,
   numGraded: parseInt(staff.numGraded ?? 0, 10),
diff --git a/client/app/bundles/course/statistics/utils/parseStudentsResponse.js b/client/app/bundles/course/statistics/utils/parseStudentsResponse.js
index 42ab2e194b4..556d94f08cd 100644
--- a/client/app/bundles/course/statistics/utils/parseStudentsResponse.js
+++ b/client/app/bundles/course/statistics/utils/parseStudentsResponse.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const processStudent = (student) => ({
   ...student,
   level: parseInt(student.level ?? 0, 10),
diff --git a/client/app/bundles/course/survey/containers/SurveyLayout/index.jsx b/client/app/bundles/course/survey/containers/SurveyLayout/index.jsx
index 93cc1b850d1..7ab05bae1f4 100644
--- a/client/app/bundles/course/survey/containers/SurveyLayout/index.jsx
+++ b/client/app/bundles/course/survey/containers/SurveyLayout/index.jsx
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import PageHeader from 'lib/components/navigation/PageHeader';
+import Page from 'lib/components/core/layouts/Page';
 
 import Dialogs from '../../components/Dialogs';
 import { surveyShape } from '../../propTypes';
@@ -31,24 +31,20 @@ const withSurveyLayout = (Component) => {
 
     const page = Component.displayName;
 
-    return (
-      <main className="space-y-5">
-        {survey && (
-          <PageHeader
-            returnLink={backLocations(courseId, surveyId, page)}
-            title={survey.title}
-            toolbars={
-              surveyId && [
-                <AdminMenu key="admin-menu" {...{ survey, surveyId }} />,
-              ]
-            }
-          />
-        )}
+    if (!survey) return null;
 
+    return (
+      <Page
+        actions={
+          surveyId && <AdminMenu key="admin-menu" {...{ survey, surveyId }} />
+        }
+        backTo={backLocations(courseId, surveyId, page)}
+        title={survey.title}
+      >
         <Component courseId={courseId} survey={survey} surveyId={surveyId} />
 
         <Dialogs />
-      </main>
+      </Page>
     );
   };
 
diff --git a/client/app/bundles/course/survey/handles.ts b/client/app/bundles/course/survey/handles.ts
new file mode 100644
index 00000000000..ec57381c0d5
--- /dev/null
+++ b/client/app/bundles/course/survey/handles.ts
@@ -0,0 +1,28 @@
+import { getIdFromUnknown } from 'utilities';
+
+import CourseAPI from 'api/course';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
+
+const getSurveyTitle = async (surveyId: number): Promise<string> => {
+  const { data } = await CourseAPI.survey.surveys.fetch(surveyId);
+  return data.title;
+};
+
+const getResponseCreatorName = async (responseId: number): Promise<string> => {
+  const { data } = await CourseAPI.survey.responses.fetch(responseId);
+  return data.response.creator_name;
+};
+
+export const surveyHandle: DataHandle = (match) => {
+  const surveyId = getIdFromUnknown(match.params?.surveyId);
+  if (!surveyId) throw new Error(`Invalid survey id: ${surveyId}`);
+
+  return { getData: () => getSurveyTitle(surveyId) };
+};
+
+export const surveyResponseHandle: DataHandle = (match) => {
+  const responseId = getIdFromUnknown(match.params?.responseId);
+  if (!responseId) throw new Error(`Invalid response id: ${responseId}`);
+
+  return { getData: () => getResponseCreatorName(responseId) };
+};
diff --git a/client/app/bundles/course/survey/pages/ResponseEdit/index.jsx b/client/app/bundles/course/survey/pages/ResponseEdit/index.jsx
index 3388be7985b..aa894a52b1d 100644
--- a/client/app/bundles/course/survey/pages/ResponseEdit/index.jsx
+++ b/client/app/bundles/course/survey/pages/ResponseEdit/index.jsx
@@ -21,6 +21,10 @@ import withRouter from 'lib/components/navigation/withRouter';
 import withSurveyLayout from '../../containers/SurveyLayout';
 
 const translations = defineMessages({
+  response: {
+    id: 'course.survey.ResponseEdit.response',
+    defaultMessage: 'Response',
+  },
   saveSuccess: {
     id: 'course.survey.ResponseEdit.saveSuccess',
     defaultMessage: 'Your response has been saved.',
@@ -125,6 +129,11 @@ ResponseEdit.propTypes = {
   dispatch: PropTypes.func.isRequired,
 };
 
-export default withSurveyLayout(
-  withRouter(connect(({ surveys }) => surveys.responseForm)(ResponseEdit)),
+const handle = translations.response;
+
+export default Object.assign(
+  withSurveyLayout(
+    withRouter(connect(({ surveys }) => surveys.responseForm)(ResponseEdit)),
+  ),
+  { handle },
 );
diff --git a/client/app/bundles/course/survey/pages/ResponseIndex/index.jsx b/client/app/bundles/course/survey/pages/ResponseIndex/index.jsx
index 5def1b98ffa..6f8f7de16bb 100644
--- a/client/app/bundles/course/survey/pages/ResponseIndex/index.jsx
+++ b/client/app/bundles/course/survey/pages/ResponseIndex/index.jsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import {
   Card,
@@ -24,6 +23,7 @@ import { fetchResponses } from 'course/survey/actions/responses';
 import { responseShape, surveyShape } from 'course/survey/propTypes';
 import surveyTranslations from 'course/survey/translations';
 import BarChart from 'lib/components/core/BarChart';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import moment, { formatLongDateTime } from 'lib/moment';
 
@@ -182,9 +182,9 @@ const ResponseIndex = (props) => {
         {tableResponses.map((response) => (
           <TableRow key={response.course_user.id}>
             <TableCell colSpan={2}>
-              <a href={response.course_user.path}>
+              <Link to={response.course_user.path}>
                 {response.course_user.name}
-              </a>
+              </Link>
             </TableCell>
             <TableCell>{renderResponseStatus(response)}</TableCell>
             <TableCell>{renderSubmittedAt(response)}</TableCell>
@@ -344,6 +344,9 @@ ResponseIndex.propTypes = {
   isLoading: PropTypes.bool.isRequired,
 };
 
-export default withSurveyLayout(
-  connect(({ surveys }) => surveys.responses)(ResponseIndex),
+const handle = translations.responses;
+
+export default Object.assign(
+  withSurveyLayout(connect(({ surveys }) => surveys.responses)(ResponseIndex)),
+  { handle },
 );
diff --git a/client/app/bundles/course/survey/pages/ResponseIndex/translations.js b/client/app/bundles/course/survey/pages/ResponseIndex/translations.js
index a5283710cb0..b05d03c3799 100644
--- a/client/app/bundles/course/survey/pages/ResponseIndex/translations.js
+++ b/client/app/bundles/course/survey/pages/ResponseIndex/translations.js
@@ -52,6 +52,10 @@ const translations = defineMessages({
     id: 'course.survey.ResponseIndex.unsubmit',
     defaultMessage: 'Unsubmit Survey',
   },
+  responses: {
+    id: 'course.survey.ResponseIndex.responses',
+    defaultMessage: 'Responses',
+  },
 });
 
 export default translations;
diff --git a/client/app/bundles/course/survey/pages/SurveyIndex/SurveysTable.jsx b/client/app/bundles/course/survey/pages/SurveyIndex/SurveysTable.jsx
index a0b700e555e..e3d40892847 100644
--- a/client/app/bundles/course/survey/pages/SurveyIndex/SurveysTable.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyIndex/SurveysTable.jsx
@@ -1,10 +1,9 @@
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import {
   Button,
   Switch,
-  Table,
   TableBody,
   TableCell,
   TableHead,
@@ -16,6 +15,8 @@ import { updateSurvey } from 'course/survey/actions/surveys';
 import RespondButton from 'course/survey/containers/RespondButton';
 import { surveyShape } from 'course/survey/propTypes';
 import translations from 'course/survey/translations';
+import TableContainer from 'lib/components/core/layouts/TableContainer';
+import Link from 'lib/components/core/Link';
 import { formatShortDateTime } from 'lib/moment';
 
 import SurveyBadges from './SurveyBadges';
@@ -73,7 +74,7 @@ const SurveysTable = (props) => {
   };
 
   return (
-    <Table>
+    <TableContainer dense variant="bare">
       <TableHead>
         <TableRow>
           <TableCell colSpan={6}>
@@ -108,10 +109,10 @@ const SurveysTable = (props) => {
             <TableCell colSpan={6} style={styles.wrap}>
               <div className="flex flex-col items-start justify-between xl:flex-row xl:items-center">
                 <label className="m-0 font-normal" title={survey.title}>
-                  <Link // TODO: Change to lg:line-clamp-1 once the current sidebar is gone
-                    key={survey.id}
+                  <Link
                     className="line-clamp-2 xl:line-clamp-1"
                     to={`/courses/${courseId}/surveys/${survey.id}`}
+                    underline="hover"
                   >
                     {survey.title}
                   </Link>
@@ -179,7 +180,7 @@ const SurveysTable = (props) => {
           </TableRow>
         ))}
       </TableBody>
-    </Table>
+    </TableContainer>
   );
 };
 
diff --git a/client/app/bundles/course/survey/pages/SurveyIndex/index.jsx b/client/app/bundles/course/survey/pages/SurveyIndex/index.jsx
index 10720a346f6..dc6f1d4178d 100644
--- a/client/app/bundles/course/survey/pages/SurveyIndex/index.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyIndex/index.jsx
@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import { fetchSurveys } from 'course/survey/actions/surveys';
 import { surveyShape } from 'course/survey/propTypes';
 import surveyTranslations from 'course/survey/translations';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import withRouter from 'lib/components/navigation/withRouter';
 
 import Dialogs from '../../components/Dialogs';
@@ -50,17 +50,16 @@ class SurveyIndex extends Component {
 
   render() {
     return (
-      <>
-        <PageHeader
-          title={<FormattedMessage {...surveyTranslations.surveys} />}
-        />
-
+      <Page
+        title={<FormattedMessage {...surveyTranslations.surveys} />}
+        unpadded
+      >
         {this.renderBody()}
 
         <NewSurveyButton />
 
         <Dialogs />
-      </>
+      </Page>
     );
   }
 }
@@ -82,4 +81,9 @@ const mapStateToProps = ({ surveys }) => ({
   isLoading: surveys.surveysFlags.isLoadingSurveys,
 });
 
-export default withRouter(connect(mapStateToProps)(SurveyIndex));
+const handle = surveyTranslations.surveys;
+
+export default Object.assign(
+  withRouter(connect(mapStateToProps)(SurveyIndex)),
+  { handle },
+);
diff --git a/client/app/bundles/course/survey/pages/SurveyResults/OptionsQuestionResults.jsx b/client/app/bundles/course/survey/pages/SurveyResults/OptionsQuestionResults.jsx
index 3e98f43f90a..6759f6e3784 100644
--- a/client/app/bundles/course/survey/pages/SurveyResults/OptionsQuestionResults.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyResults/OptionsQuestionResults.jsx
@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
 import {
   Button,
   CardContent,
@@ -18,6 +17,7 @@ import PropTypes from 'prop-types';
 import { questionTypes } from 'course/survey/constants';
 import { optionShape } from 'course/survey/propTypes';
 import { sorts } from 'course/survey/utils';
+import Link from 'lib/components/core/Link';
 import Thumbnail from 'lib/components/core/Thumbnail';
 
 const styles = {
diff --git a/client/app/bundles/course/survey/pages/SurveyResults/TextResponseResults.jsx b/client/app/bundles/course/survey/pages/SurveyResults/TextResponseResults.jsx
index b873e433ad0..ace4606aa49 100644
--- a/client/app/bundles/course/survey/pages/SurveyResults/TextResponseResults.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyResults/TextResponseResults.jsx
@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { Link } from 'react-router-dom';
 import {
   Button,
   CardContent,
@@ -12,6 +11,8 @@ import {
 } from '@mui/material';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
+
 const styles = {
   expandableThreshold: 10,
   expandToggleStyle: {
diff --git a/client/app/bundles/course/survey/pages/SurveyResults/index.jsx b/client/app/bundles/course/survey/pages/SurveyResults/index.jsx
index e35d69edcd7..4c81d58e7a8 100644
--- a/client/app/bundles/course/survey/pages/SurveyResults/index.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyResults/index.jsx
@@ -20,6 +20,10 @@ import withSurveyLayout from '../../containers/SurveyLayout';
 import ResultsSection from './ResultsSection';
 
 const translations = defineMessages({
+  results: {
+    id: 'course.survey.SurveyResults.results',
+    defaultMessage: 'Results',
+  },
   includePhantoms: {
     id: 'course.survey.SurveyResults.includePhantoms',
     defaultMessage: 'Include Phantom Students',
@@ -147,6 +151,9 @@ SurveyResults.propTypes = {
   sections: PropTypes.arrayOf(sectionShape),
 };
 
-export default withSurveyLayout(
-  connect(({ surveys }) => surveys.results)(SurveyResults),
+const handle = translations.results;
+
+export default Object.assign(
+  withSurveyLayout(connect(({ surveys }) => surveys.results)(SurveyResults)),
+  { handle },
 );
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/SurveyDetails.jsx b/client/app/bundles/course/survey/pages/SurveyShow/SurveyDetails.jsx
index da8723d80e3..f52c281fc65 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/SurveyDetails.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/SurveyDetails.jsx
@@ -100,8 +100,12 @@ const SurveyDetails = (props) => {
     return null;
   }
   return (
-    <Card>
-      <TableContainer dense variant="outlined">
+    <Card variant="outlined">
+      <TableContainer
+        className="border-only-b-neutral-200"
+        dense
+        variant="bare"
+      >
         <TableBody>
           <TableRow>
             <TableCell variant="head">
diff --git a/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptions.tsx b/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptions.tsx
index c9bb2f5e683..dda9f1daa97 100644
--- a/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptions.tsx
+++ b/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptions.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import ErrorCard from 'lib/components/core/ErrorCard';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
 import { useAppDispatch } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -43,4 +44,14 @@ const UserEmailSubscriptions = (): JSX.Element => {
   return <UserEmailSubscriptionsTable />;
 };
 
-export default UserEmailSubscriptions;
+const handle: DataHandle = (match) => ({
+  getData: () => ({
+    activePath: null,
+    content: {
+      title: translations.emailSubscriptions,
+      url: match.pathname,
+    },
+  }),
+});
+
+export default Object.assign(UserEmailSubscriptions, { handle });
diff --git a/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptionsTable.jsx b/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptionsTable.jsx
index d5755219181..e4e3fe5e36f 100644
--- a/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptionsTable.jsx
+++ b/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptionsTable.jsx
@@ -13,6 +13,7 @@ import {
 import PropTypes from 'prop-types';
 
 import { setNotification } from 'lib/actions';
+import Page from 'lib/components/core/layouts/Page';
 import Link from 'lib/components/core/Link';
 
 import {
@@ -176,10 +177,10 @@ class UserEmailSubscriptionsTable extends Component {
   render() {
     this.unsubscribeViaEmailSuccessful();
     return (
-      <>
-        <h2>
-          <FormattedMessage {...translations.emailSubscriptions} />
-        </h2>
+      <Page
+        title={<FormattedMessage {...translations.emailSubscriptions} />}
+        unpadded
+      >
         {this.renderEmailSettingsTable()}
         {!this.props.userEmailSubscriptionsPageFilter.show_all_settings && (
           <Link
@@ -191,7 +192,7 @@ class UserEmailSubscriptionsTable extends Component {
             />
           </Link>
         )}
-      </>
+      </Page>
     );
   }
 }
diff --git a/client/app/bundles/course/user-invitations/pages/InvitationsIndex/index.tsx b/client/app/bundles/course/user-invitations/pages/InvitationsIndex/index.tsx
index df1cd039574..cd35ada3db0 100644
--- a/client/app/bundles/course/user-invitations/pages/InvitationsIndex/index.tsx
+++ b/client/app/bundles/course/user-invitations/pages/InvitationsIndex/index.tsx
@@ -3,8 +3,8 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 import { Box, Typography } from '@mui/material';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import UserManagementTabs from '../../../users/components/navigation/UserManagementTabs';
@@ -69,8 +69,7 @@ const InviteUsers: FC<Props> = (props) => {
   }, [dispatch]);
 
   return (
-    <Box>
-      <PageHeader title={intl.formatMessage(translations.manageUsersHeader)} />
+    <Page title={intl.formatMessage(translations.manageUsersHeader)} unpadded>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -79,15 +78,19 @@ const InviteUsers: FC<Props> = (props) => {
             permissions={permissions}
             sharedData={sharedData}
           />
-          <Box className="invitations-bar-chart" sx={{ margin: '12px 0px' }}>
-            <InvitationsBarChart
-              accepted={acceptedInvitations.length}
-              pending={pendingInvitations.length}
-            />
-          </Box>
-          <Typography style={{ whiteSpace: 'pre-line' }} variant="body2">
-            {intl.formatMessage(translations.invitationsInfo)}
-          </Typography>
+
+          <Page.PaddedSection>
+            <Box className="invitations-bar-chart" sx={{ margin: '12px 0px' }}>
+              <InvitationsBarChart
+                accepted={acceptedInvitations.length}
+                pending={pendingInvitations.length}
+              />
+            </Box>
+
+            <Typography style={{ whiteSpace: 'pre-line' }} variant="body2">
+              {intl.formatMessage(translations.invitationsInfo)}
+            </Typography>
+          </Page.PaddedSection>
 
           {pendingInvitations.length > 0 && (
             <UserInvitationsTable
@@ -109,7 +112,7 @@ const InviteUsers: FC<Props> = (props) => {
           )}
         </>
       )}
-    </Box>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/user-invitations/pages/InviteUsers/index.tsx b/client/app/bundles/course/user-invitations/pages/InviteUsers/index.tsx
index 245e4fedb24..697d87607bf 100644
--- a/client/app/bundles/course/user-invitations/pages/InviteUsers/index.tsx
+++ b/client/app/bundles/course/user-invitations/pages/InviteUsers/index.tsx
@@ -1,11 +1,11 @@
 import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
-import { Box, Grid, Typography } from '@mui/material';
+import { Grid, Typography } from '@mui/material';
 import { InvitationResult } from 'types/course/userInvitations';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import UserManagementTabs from '../../../users/components/navigation/UserManagementTabs';
@@ -61,8 +61,7 @@ const InviteUsers: FC<Props> = (props) => {
   };
 
   return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.manageUsersHeader)} />
+    <Page title={intl.formatMessage(translations.manageUsersHeader)} unpadded>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -71,7 +70,8 @@ const InviteUsers: FC<Props> = (props) => {
             permissions={permissions}
             sharedData={sharedData}
           />
-          <Box>
+
+          <Page.PaddedSection>
             <Grid
               alignItems="flex-end"
               container
@@ -88,7 +88,8 @@ const InviteUsers: FC<Props> = (props) => {
               </Grid>
             </Grid>
             <IndividualInviteForm openResultDialog={openResultDialog} />
-          </Box>
+          </Page.PaddedSection>
+
           <InvitationResultDialog
             handleClose={(): void => setShowInvitationResultDialog(false)}
             invitationResult={invitationResult}
@@ -96,7 +97,7 @@ const InviteUsers: FC<Props> = (props) => {
           />
         </>
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/user-invitations/pages/InviteUsersFileUpload/index.tsx b/client/app/bundles/course/user-invitations/pages/InviteUsersFileUpload/index.tsx
index aaff66802da..ee3a37b0fe6 100644
--- a/client/app/bundles/course/user-invitations/pages/InviteUsersFileUpload/index.tsx
+++ b/client/app/bundles/course/user-invitations/pages/InviteUsersFileUpload/index.tsx
@@ -2,10 +2,11 @@ import { FC, ReactNode, useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { toast } from 'react-toastify';
 import DownloadIcon from '@mui/icons-material/Download';
-import { Link, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 import { InvitationResult } from 'types/course/userInvitations';
 
 import CourseAPI from 'api/course';
+import Link from 'lib/components/core/Link';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -153,9 +154,8 @@ const InviteUsersFileUpload: FC<Props> = (props) => {
         <Link
           download="template.csv"
           href={downloadTemplatePath}
+          opensInNewTab
           style={{ textDecoration: 'none', cursor: 'pointer' }}
-          target="_blank"
-          variant="inherit"
         >
           {t(translations.template)}
           <DownloadIcon
diff --git a/client/app/bundles/course/user-notification/PopupNotifierOutlet.tsx b/client/app/bundles/course/user-notification/PopupNotifierOutlet.tsx
deleted file mode 100644
index fd1e166d215..00000000000
--- a/client/app/bundles/course/user-notification/PopupNotifierOutlet.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Outlet } from 'react-router-dom';
-
-import PopupNotifier from './PopupNotifier';
-
-/**
- * Will soon be replaced with `CourseContainer`.
- */
-const PopupNotifierOutlet = (): JSX.Element => (
-  <>
-    <Outlet />
-    <PopupNotifier />
-  </>
-);
-
-export default PopupNotifierOutlet;
diff --git a/client/app/bundles/course/user-notification/operations.ts b/client/app/bundles/course/user-notification/operations.ts
index a2fa447f132..12a973f3c16 100644
--- a/client/app/bundles/course/user-notification/operations.ts
+++ b/client/app/bundles/course/user-notification/operations.ts
@@ -1,10 +1,27 @@
+import { AxiosError } from 'axios';
 import { UserNotificationData } from 'types/course/userNotifications';
 
 import CourseAPI from 'api/course';
 
-export const fetchNotifications = async (): Promise<UserNotificationData> => {
-  const response = await CourseAPI.userNotifications.fetch();
-  return response.data;
+/**
+ * Fetches the current user's notifications in the course, if available.
+ *
+ * If the current user is not a course user, the network request will fail with
+ * status code 403. In this case, `undefined` will be returned and no errors will
+ * be thrown.
+ */
+export const fetchNotifications = async (): Promise<
+  UserNotificationData | undefined
+> => {
+  try {
+    const response = await CourseAPI.userNotifications.fetch();
+    return response.data;
+  } catch (error) {
+    if (!(error instanceof AxiosError && error.response?.status === 403))
+      throw error;
+
+    return undefined;
+  }
 };
 
 export const markAsRead = async (
diff --git a/client/app/bundles/course/users/components/misc/UpgradeToStaff.tsx b/client/app/bundles/course/users/components/misc/UpgradeToStaff.tsx
index bda1087c47e..02e04453707 100644
--- a/client/app/bundles/course/users/components/misc/UpgradeToStaff.tsx
+++ b/client/app/bundles/course/users/components/misc/UpgradeToStaff.tsx
@@ -10,7 +10,6 @@ import {
   Checkbox,
   Grid,
   MenuItem,
-  Paper,
   TextField,
   Typography,
 } from '@mui/material';
@@ -104,10 +103,7 @@ const UpgradeToStaff: FC<Props> = (props) => {
   };
 
   return (
-    <Paper
-      elevation={3}
-      sx={{ padding: '12px 24px 24px 24px', margin: '12px 0px' }}
-    >
+    <div style={{ padding: '12px 24px 24px 24px', margin: '12px 0px' }}>
       <Typography sx={{ marginBottom: '24px' }} variant="h6">
         {intl.formatMessage(translations.upgradeHeader)}
       </Typography>
@@ -166,7 +162,7 @@ const UpgradeToStaff: FC<Props> = (props) => {
           {intl.formatMessage(translations.upgradeButton)}
         </LoadingButton>
       </Grid>
-    </Paper>
+    </div>
   );
 };
 
diff --git a/client/app/bundles/course/users/components/misc/UserProfileAchievements.tsx b/client/app/bundles/course/users/components/misc/UserProfileAchievements.tsx
index c1634839f4b..aa11f620b46 100644
--- a/client/app/bundles/course/users/components/misc/UserProfileAchievements.tsx
+++ b/client/app/bundles/course/users/components/misc/UserProfileAchievements.tsx
@@ -4,6 +4,7 @@ import { Grid, Typography } from '@mui/material';
 import { AchievementMiniEntity } from 'types/course/achievements';
 
 import AvatarWithLabel from 'lib/components/core/AvatarWithLabel';
+import Link from 'lib/components/core/Link';
 import { getAchievementURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 
@@ -52,13 +53,13 @@ const UserProfileAchievements: FC<Props> = ({ achievements, intl }: Props) => {
               xs={4}
             >
               <Grid container sx={styles.achievementMiniEntityContainer}>
-                <a href={getAchievementURL(getCourseId(), achievement.id)}>
+                <Link to={getAchievementURL(getCourseId(), achievement.id)}>
                   <AvatarWithLabel
                     imageUrl={achievement.badge.url}
                     label={achievement.title}
                     size="md"
                   />
-                </a>
+                </Link>
               </Grid>
             </Grid>
           ))}
diff --git a/client/app/bundles/course/users/components/misc/UserProfileCard.tsx b/client/app/bundles/course/users/components/misc/UserProfileCard.tsx
index cfbaac63b88..234ac0bd099 100644
--- a/client/app/bundles/course/users/components/misc/UserProfileCard.tsx
+++ b/client/app/bundles/course/users/components/misc/UserProfileCard.tsx
@@ -1,10 +1,10 @@
 import { FC, MouseEvent } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { scroller } from 'react-scroll';
 import { Avatar, Card, CardContent, Grid, Typography } from '@mui/material';
 import { CourseUserEntity } from 'types/course/courseUsers';
 
+import Link from 'lib/components/core/Link';
 import { COURSE_USER_ROLES } from 'lib/constants/sharedConstants';
 
 import UserProfileCardStats from './UserProfileCardStats';
@@ -65,7 +65,7 @@ const UserProfileCard: FC<Props> = ({ user, intl }) => {
           </Link>
         )}
         {user.achievements && (
-          <a
+          <Link
             href="#user-profile-achievements"
             onClick={(e): void => handleScrollToAchievements(e)}
           >
@@ -74,7 +74,7 @@ const UserProfileCard: FC<Props> = ({ user, intl }) => {
               title={intl.formatMessage(translations.achievements)}
               value={user.achievements.length}
             />
-          </a>
+          </Link>
         )}
       </Grid>
     );
@@ -97,7 +97,11 @@ const UserProfileCard: FC<Props> = ({ user, intl }) => {
             sm="auto"
             xs={12}
           >
-            <Avatar className={styles.courseUserImage} src={user.imageUrl} />
+            <Avatar
+              alt={user.name}
+              className={styles.courseUserImage}
+              src={user.imageUrl}
+            />
           </Grid>
           <Grid
             alignItems={{ xs: 'center', sm: 'start' }}
diff --git a/client/app/bundles/course/users/components/navigation/UserManagementTabs.tsx b/client/app/bundles/course/users/components/navigation/UserManagementTabs.tsx
index c523f9d3699..80d33ebef87 100644
--- a/client/app/bundles/course/users/components/navigation/UserManagementTabs.tsx
+++ b/client/app/bundles/course/users/components/navigation/UserManagementTabs.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { Box, Tab, Tabs } from '@mui/material';
 import { tabsStyle } from 'theme/mui-style';
 import {
@@ -8,6 +7,7 @@ import {
   ManageCourseUsersSharedData,
 } from 'types/course/courseUsers';
 
+import Link from 'lib/components/core/Link';
 import CustomBadge from 'lib/components/extensions/CustomBadge';
 import { getCourseURL } from 'lib/helpers/url-builders';
 import { getCourseId, getCurrentPath } from 'lib/helpers/url-helpers';
@@ -17,7 +17,15 @@ interface Props extends WrappedComponentProps {
   sharedData: ManageCourseUsersSharedData;
 }
 
-const translations = defineMessages({
+export const translations = defineMessages({
+  manageStudents: {
+    id: 'course.users.UserManagementTabs.manageStudents',
+    defaultMessage: 'Manage Students',
+  },
+  manageStaff: {
+    id: 'course.users.UserManagementTabs.manageStaff',
+    defaultMessage: 'Manage Staff',
+  },
   studentsTitle: {
     id: 'course.users.UserManagementTabs.studentsTitle',
     defaultMessage: 'Students',
diff --git a/client/app/bundles/course/users/components/tables/ExperiencePointsTableRow.tsx b/client/app/bundles/course/users/components/tables/ExperiencePointsTableRow.tsx
index a0e6b4681ef..ec0994ea65e 100644
--- a/client/app/bundles/course/users/components/tables/ExperiencePointsTableRow.tsx
+++ b/client/app/bundles/course/users/components/tables/ExperiencePointsTableRow.tsx
@@ -1,5 +1,4 @@
 import { FC, memo, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
 import { TableCell, TableRow, TextField } from '@mui/material';
 import equal from 'fast-deep-equal';
 import {
@@ -7,6 +6,7 @@ import {
   ExperiencePointsRowData,
 } from 'types/course/experiencePointsRecords';
 
+import Link from 'lib/components/core/Link';
 import { formatLongDateTime } from 'lib/moment';
 
 import PointManagementButtons from '../buttons/PointManagementButtons';
@@ -79,9 +79,9 @@ const ExperiencePointsTableRow: FC<Props> = (props) => {
   const renderReason = (): JSX.Element | string => {
     if (!record.reason.isManuallyAwarded) {
       return (
-        <a href={record.reason.link} rel="noopener noreferrer" target="_blank">
+        <Link opensInNewTab to={record.reason.link}>
           {rowData.reason}
-        </a>
+        </Link>
       );
     }
     if (record.permissions.canUpdate) {
diff --git a/client/app/bundles/course/users/components/tables/ManageUsersTable/index.tsx b/client/app/bundles/course/users/components/tables/ManageUsersTable/index.tsx
index 918e35b2177..5b35f998c61 100644
--- a/client/app/bundles/course/users/components/tables/ManageUsersTable/index.tsx
+++ b/client/app/bundles/course/users/components/tables/ManageUsersTable/index.tsx
@@ -171,7 +171,7 @@ const ManageUsersTable = (props: ManageUsersTableProps): JSX.Element => {
 
   return (
     <Table
-      className={props.className}
+      className={`border-none ${props.className ?? ''}`}
       columns={columns}
       csvDownload={{ filename: props.csvDownloadFilename }}
       data={users}
diff --git a/client/app/bundles/course/users/components/tables/PersonalTimesTable.tsx b/client/app/bundles/course/users/components/tables/PersonalTimesTable.tsx
index d05e9ffd405..fb3ea2d05b8 100644
--- a/client/app/bundles/course/users/components/tables/PersonalTimesTable.tsx
+++ b/client/app/bundles/course/users/components/tables/PersonalTimesTable.tsx
@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import {
-  Link,
   Paper,
   Table,
   TableBody,
@@ -11,7 +10,11 @@ import {
 } from '@mui/material';
 import { PersonalTimeMiniEntity } from 'types/course/personalTimes';
 
-import { COURSE_COMPONENT_ICONS } from 'lib/constants/sharedConstants';
+import Link from 'lib/components/core/Link';
+import {
+  CourseComponentIconName,
+  defensivelyGetIcon,
+} from 'lib/constants/icons';
 import { getAssessmentURL, getVideoURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import tableTranslations from 'lib/translations/table';
@@ -50,7 +53,7 @@ const getLink = (item: PersonalTimeMiniEntity): JSX.Element => {
   }
 
   return (
-    <Link href={url} style={{ textDecoration: 'none' }}>
+    <Link to={url} underline="hover">
       {item.title}
     </Link>
   );
@@ -64,9 +67,10 @@ const getIcon = (item: PersonalTimeMiniEntity): JSX.Element => {
   } else if (item.type === ITEM_ACTABLE_TYPES.assessment.name) {
     materialType = 'assessment';
   }
-  const IconComponent = COURSE_COMPONENT_ICONS[materialType];
 
-  return <IconComponent fontSize="small" />;
+  const Icon = defensivelyGetIcon(materialType as CourseComponentIconName);
+
+  return <Icon fontSize="small" />;
 };
 
 const PersonalTimesTable: FC<Props> = (props) => {
diff --git a/client/app/bundles/course/users/handles.ts b/client/app/bundles/course/users/handles.ts
new file mode 100644
index 00000000000..1169cf7a28b
--- /dev/null
+++ b/client/app/bundles/course/users/handles.ts
@@ -0,0 +1,75 @@
+import { getIdFromUnknown } from 'utilities';
+
+import CourseAPI from 'api/course';
+import { CrumbPath, DataHandle } from 'lib/hooks/router/dynamicNest';
+import { Descriptor } from 'lib/hooks/useTranslation';
+
+import { translations } from './components/navigation/UserManagementTabs';
+
+const manageUsersHandleOf =
+  (title: Descriptor | string): DataHandle =>
+  (match) => {
+    const courseId = match.params.courseId;
+
+    return {
+      getData: () => ({
+        activePath: `/courses/${courseId}/students`,
+        content: { title },
+      }),
+    };
+  };
+
+export const manageUserHandles = {
+  enrolRequests: manageUsersHandleOf(translations.enrolRequestsTitle),
+  invitations: manageUsersHandleOf(translations.userInvitationsTitle),
+  students: manageUsersHandleOf(translations.manageStudents),
+  staff: manageUsersHandleOf(translations.manageStaff),
+  inviteUsers: manageUsersHandleOf(translations.inviteTitle),
+  personalizedTimelines: manageUsersHandleOf(translations.personalTimesTitle),
+};
+
+export const courseUserHandle: DataHandle = (match) => {
+  const userId = getIdFromUnknown(match.params?.userId);
+  if (!userId) throw new Error(`Invalid user id: ${userId}`);
+
+  return {
+    getData: async (): Promise<CrumbPath> => {
+      const { data } = await CourseAPI.users.fetch(userId);
+
+      return {
+        activePath: data.user.role !== 'student' ? null : undefined,
+        content: {
+          title: data.user.name,
+          url: `users/${data.user.id}`,
+        },
+      };
+    },
+  };
+};
+
+export const courseUserPersonalizedTimelineHandle: DataHandle = (match) => {
+  const courseId = match.params.courseId;
+
+  const userId = getIdFromUnknown(match.params?.userId);
+  if (!userId) throw new Error(`Invalid user id: ${userId}`);
+
+  return {
+    getData: async (): Promise<CrumbPath> => {
+      const { data } = await CourseAPI.users.fetch(userId);
+
+      return {
+        activePath: `/courses/${courseId}/students`,
+        content: [
+          {
+            title: translations.personalTimesTitle,
+            url: `users/personal_times`,
+          },
+          {
+            title: data.user.name,
+            url: `users/${data.user.id}/personal_times`,
+          },
+        ],
+      };
+    },
+  };
+};
diff --git a/client/app/bundles/course/users/pages/ExperiencePointsRecords/index.tsx b/client/app/bundles/course/users/pages/ExperiencePointsRecords/index.tsx
index 5e742e7f77e..880e0ab3232 100644
--- a/client/app/bundles/course/users/pages/ExperiencePointsRecords/index.tsx
+++ b/client/app/bundles/course/users/pages/ExperiencePointsRecords/index.tsx
@@ -1,57 +1,60 @@
-import { FC, useState } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { useState } from 'react';
+import { defineMessages } from 'react-intl';
 
 import BackendPagination from 'lib/components/core/layouts/BackendPagination';
-import PageHeader from 'lib/components/navigation/PageHeader';
+import Page from 'lib/components/core/layouts/Page';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId, getCourseUserId } from 'lib/helpers/url-helpers';
 import { useAppSelector } from 'lib/hooks/store';
+import useTranslation from 'lib/hooks/useTranslation';
 
 import ExperiencePointsTable from '../../components/tables/ExperiencePointsTable';
 import { getExperiencePointsRecordsSettings } from '../../selectors';
 
-type Props = WrappedComponentProps;
+const ROWS_PER_PAGE = 25 as const;
 
 const translations = defineMessages({
-  experiencePointsRecordsHeader: {
-    id: 'course.users.ExperiencePointsRecords.header',
-    defaultMessage: 'Experience Points History - ',
+  experiencePointsHistory: {
+    id: 'course.users.ExperiencePointsRecords.experiencePointsHistory',
+    defaultMessage: 'Experience Points History',
+  },
+  experiencePointsHistoryHeader: {
+    id: 'course.users.ExperiencePointsRecords.experiencePointsHistoryHeader',
+    defaultMessage: 'Experience Points History: {for}',
   },
   fetchUsersFailure: {
-    id: 'course.users.ExperiencePointsRecords.fetch.failue',
+    id: 'course.users.ExperiencePointsRecords.fetchUsersFailure',
     defaultMessage: 'Failed to fetch records',
   },
 });
 
-const ExperiencePointsRecords: FC<Props> = (props) => {
-  const { intl } = props;
-  const ROWS_PER_PAGE = 25;
+const ExperiencePointsRecords = (): JSX.Element => {
+  const { t } = useTranslation();
+
   const [pageNum, setPageNum] = useState(1);
-  const experiencePointsRecordSettings = useAppSelector(
-    getExperiencePointsRecordsSettings,
-  );
 
-  const handlePageChange = (num: number): void => {
-    setPageNum(num);
-  };
+  const records = useAppSelector(getExperiencePointsRecordsSettings);
 
   return (
-    <>
-      <PageHeader
-        returnLink={getCourseUserURL(getCourseId(), getCourseUserId())}
-        title={`${intl.formatMessage(
-          translations.experiencePointsRecordsHeader,
-        )} ${experiencePointsRecordSettings.courseUserName}`}
-      />
+    <Page
+      backTo={getCourseUserURL(getCourseId(), getCourseUserId())}
+      title={t(translations.experiencePointsHistoryHeader, {
+        for: records.courseUserName,
+      })}
+      unpadded
+    >
       <BackendPagination
-        handlePageChange={handlePageChange}
+        handlePageChange={setPageNum}
         pageNum={pageNum}
-        rowCount={experiencePointsRecordSettings.rowCount}
+        rowCount={records.rowCount}
         rowsPerPage={ROWS_PER_PAGE}
       />
+
       <ExperiencePointsTable page={pageNum} />
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(ExperiencePointsRecords);
+const handle = translations.experiencePointsHistory;
+
+export default Object.assign(ExperiencePointsRecords, { handle });
diff --git a/client/app/bundles/course/users/pages/ManageStaff/index.tsx b/client/app/bundles/course/users/pages/ManageStaff/index.tsx
index 0557a6b22ee..d539c19ce25 100644
--- a/client/app/bundles/course/users/pages/ManageStaff/index.tsx
+++ b/client/app/bundles/course/users/pages/ManageStaff/index.tsx
@@ -2,9 +2,9 @@ import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import manageUsersTranslations from 'lib/translations/course/users/index';
 
@@ -51,10 +51,10 @@ const ManageStaff: FC<Props> = (props) => {
   };
 
   return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(manageUsersTranslations.manageUsersHeader)}
-      />
+    <Page
+      title={intl.formatMessage(manageUsersTranslations.manageUsersHeader)}
+      unpadded
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -63,7 +63,9 @@ const ManageStaff: FC<Props> = (props) => {
             permissions={permissions}
             sharedData={sharedData}
           />
+
           <UpgradeToStaff />
+
           {staff.length > 0 ? (
             <ManageUsersTable
               csvDownloadFilename="Staff List"
@@ -78,7 +80,7 @@ const ManageStaff: FC<Props> = (props) => {
           )}
         </>
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/users/pages/ManageStudents/index.tsx b/client/app/bundles/course/users/pages/ManageStudents/index.tsx
index 36d11d0c688..2ad6f6a4041 100644
--- a/client/app/bundles/course/users/pages/ManageStudents/index.tsx
+++ b/client/app/bundles/course/users/pages/ManageStudents/index.tsx
@@ -2,9 +2,9 @@ import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import manageUsersTranslations from 'lib/translations/course/users/index';
 
@@ -56,10 +56,10 @@ const ManageStudents: FC<Props> = (props) => {
   };
 
   return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(manageUsersTranslations.manageUsersHeader)}
-      />
+    <Page
+      title={intl.formatMessage(manageUsersTranslations.manageUsersHeader)}
+      unpadded
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -68,6 +68,7 @@ const ManageStudents: FC<Props> = (props) => {
             permissions={permissions}
             sharedData={sharedData}
           />
+
           {students.length > 0 ? (
             <ManageUsersTable
               className="mt-8"
@@ -83,7 +84,7 @@ const ManageStudents: FC<Props> = (props) => {
           )}
         </>
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/users/pages/PersonalTimes/index.tsx b/client/app/bundles/course/users/pages/PersonalTimes/index.tsx
index a203a01440d..9e7df44ccb1 100644
--- a/client/app/bundles/course/users/pages/PersonalTimes/index.tsx
+++ b/client/app/bundles/course/users/pages/PersonalTimes/index.tsx
@@ -1,10 +1,10 @@
 import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
-import { Paper, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import SelectCourseUser from '../../components/misc/SelectCourseUser';
@@ -50,8 +50,7 @@ const PersonalTimes: FC<Props> = (props) => {
   }, [dispatch]);
 
   return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.manageUsersHeader)} />
+    <Page title={intl.formatMessage(translations.manageUsersHeader)} unpadded>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -60,19 +59,17 @@ const PersonalTimes: FC<Props> = (props) => {
             permissions={permissions}
             sharedData={sharedData}
           />
-          <Paper
-            elevation={3}
-            sx={{ padding: '12px 24px 24px 24px', margin: '12px 0px' }}
-          >
+
+          <div style={{ padding: '12px 24px 24px 24px', margin: '12px 0px' }}>
             <Typography sx={{ marginBottom: '24px' }} variant="h6">
               {intl.formatMessage(translations.courseUserHeader)}
             </Typography>
 
             <SelectCourseUser />
-          </Paper>
+          </div>
         </>
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/users/pages/PersonalTimesShow/index.tsx b/client/app/bundles/course/users/pages/PersonalTimesShow/index.tsx
index fabb969cf81..76ef1073292 100644
--- a/client/app/bundles/course/users/pages/PersonalTimesShow/index.tsx
+++ b/client/app/bundles/course/users/pages/PersonalTimesShow/index.tsx
@@ -3,19 +3,12 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { LoadingButton } from '@mui/lab';
-import {
-  Grid,
-  MenuItem,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-} from '@mui/material';
+import { Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';
 import { CourseUserEntity } from 'types/course/courseUsers';
 import { TimelineAlgorithm } from 'types/course/personalTimes';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { TIMELINE_ALGORITHMS } from 'lib/constants/sharedConstants';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
@@ -163,10 +156,7 @@ const PersonalTimesShow: FC<Props> = (props) => {
 
   const renderBody = currentUser && (
     <>
-      <Paper
-        elevation={3}
-        sx={{ padding: '12px 24px 24px 24px', margin: '12px 0px' }}
-      >
+      <div style={{ padding: '12px 24px 24px 24px', margin: '12px 0px' }}>
         <Stack spacing={1}>
           <Typography variant="h6">
             {intl.formatMessage(translations.courseUserHeader)}
@@ -216,17 +206,17 @@ const PersonalTimesShow: FC<Props> = (props) => {
             </>
           )}
         </Stack>
-      </Paper>
+      </div>
+
       <PersonalTimesTable personalTimes={personalTimes} />
     </>
   );
 
   return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.manageUsersHeader)} />
+    <Page title={intl.formatMessage(translations.manageUsersHeader)} unpadded>
       <UserManagementTabs permissions={permissions} sharedData={sharedData} />
       {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/users/pages/UserShow/index.tsx b/client/app/bundles/course/users/pages/UserShow/index.tsx
index 4725516c26f..40070364246 100644
--- a/client/app/bundles/course/users/pages/UserShow/index.tsx
+++ b/client/app/bundles/course/users/pages/UserShow/index.tsx
@@ -1,8 +1,8 @@
 import { FC, useEffect, useState } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
 import { useParams } from 'react-router-dom';
-import Box from '@mui/material/Box';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
@@ -15,12 +15,6 @@ import UserStatistics from '../UserStatistics';
 
 type Props = WrappedComponentProps;
 
-const styles = {
-  userShowPage: {
-    '& > * + *': { marginTop: '24px !important' },
-  },
-};
-
 const UserShow: FC<Props> = () => {
   const [isLoading, setIsLoading] = useState(true);
   const dispatch = useAppDispatch();
@@ -42,7 +36,7 @@ const UserShow: FC<Props> = () => {
   }
 
   return (
-    <Box sx={styles.userShowPage}>
+    <Page className="space-y-5">
       <UserProfileCard user={user} />
       {user.achievements && (
         <UserProfileAchievements achievements={user.achievements} />
@@ -51,7 +45,7 @@ const UserShow: FC<Props> = () => {
       {user.skillBranches && (
         <UserProfileSkills skillBranches={user.skillBranches} />
       )}
-    </Box>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/users/pages/UsersIndex/index.tsx b/client/app/bundles/course/users/pages/UsersIndex/index.tsx
index e045aa3a5f0..fca28d3dad9 100644
--- a/client/app/bundles/course/users/pages/UsersIndex/index.tsx
+++ b/client/app/bundles/course/users/pages/UsersIndex/index.tsx
@@ -1,11 +1,11 @@
 import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Avatar, Grid, Typography } from '@mui/material';
 
+import Page from 'lib/components/core/layouts/Page';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { getCourseUserURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
@@ -63,8 +63,7 @@ const UsersIndex: FC<Props> = (props) => {
   };
 
   return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.studentsHeader)} />
+    <Page title={intl.formatMessage(translations.studentsHeader)}>
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -106,8 +105,10 @@ const UsersIndex: FC<Props> = (props) => {
             : renderEmptyState()}
         </Grid>
       )}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(UsersIndex);
+const handle = translations.studentsHeader;
+
+export default Object.assign(injectIntl(UsersIndex), { handle });
diff --git a/client/app/bundles/course/video-submissions/components/tables/UserVideoSubmissionTable.tsx b/client/app/bundles/course/video-submissions/components/tables/UserVideoSubmissionTable.tsx
index c3ed1308e19..3f527a32bf7 100644
--- a/client/app/bundles/course/video-submissions/components/tables/UserVideoSubmissionTable.tsx
+++ b/client/app/bundles/course/video-submissions/components/tables/UserVideoSubmissionTable.tsx
@@ -1,11 +1,11 @@
 import { FC } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { TableColumns, TableOptions } from 'types/components/DataTable';
 import { VideoSubmissionListData } from 'types/course/videoSubmissions';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
 import LinearProgressWithLabel from 'lib/components/core/LinearProgressWithLabel';
+import Link from 'lib/components/core/Link';
 import Note from 'lib/components/core/Note';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { formatShortDateTime } from 'lib/moment';
diff --git a/client/app/bundles/course/video-submissions/operations.ts b/client/app/bundles/course/video-submissions/operations.ts
index 15293d76f3b..0a42ff9e65a 100644
--- a/client/app/bundles/course/video-submissions/operations.ts
+++ b/client/app/bundles/course/video-submissions/operations.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 import { VideoSubmissionListData } from 'types/course/videoSubmissions';
 
 import CourseAPI from 'api/course';
diff --git a/client/app/bundles/course/video-submissions/pages/UserVideoSubmissionsIndex/index.tsx b/client/app/bundles/course/video-submissions/pages/UserVideoSubmissionsIndex/index.tsx
index c64c1ee4fe4..b7b3d960735 100644
--- a/client/app/bundles/course/video-submissions/pages/UserVideoSubmissionsIndex/index.tsx
+++ b/client/app/bundles/course/video-submissions/pages/UserVideoSubmissionsIndex/index.tsx
@@ -3,8 +3,8 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 import { VideoSubmissionListData } from 'types/course/videoSubmissions';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 
 import UserVideoSubmissionTable from '../../components/tables/UserVideoSubmissionTable';
 import { fetchVideoSubmissions } from '../../operations';
@@ -52,16 +52,16 @@ const UserVideoSubmissionsIndex: FC<Props> = (props) => {
   }, []);
 
   return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(translations.videoSubmissionsHeader)}
-      />
+    <Page
+      title={intl.formatMessage(translations.videoSubmissionsHeader)}
+      unpadded
+    >
       {isLoading ? (
         <LoadingIndicator />
       ) : (
         <UserVideoSubmissionTable videoSubmissions={videoSubmissions} />
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/video/components/tables/VideoTable.tsx b/client/app/bundles/course/video/components/tables/VideoTable.tsx
index ec86c5e35a3..0987521fb20 100644
--- a/client/app/bundles/course/video/components/tables/VideoTable.tsx
+++ b/client/app/bundles/course/video/components/tables/VideoTable.tsx
@@ -1,6 +1,5 @@
 import { FC, memo } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { Switch } from '@mui/material';
 import equal from 'fast-deep-equal';
 import { TableColumns, TableOptions } from 'types/components/DataTable';
@@ -8,6 +7,7 @@ import { VideoListData, VideoPermissions } from 'types/course/videos';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
 import LinearProgressWithLabel from 'lib/components/core/LinearProgressWithLabel';
+import Link from 'lib/components/core/Link';
 import Note from 'lib/components/core/Note';
 import PersonalStartEndTime from 'lib/components/extensions/PersonalStartEndTime';
 import { getVideoSubmissionsURL, getVideoURL } from 'lib/helpers/url-builders';
diff --git a/client/app/bundles/course/video/handles.ts b/client/app/bundles/course/video/handles.ts
new file mode 100644
index 00000000000..cdcb90bbd76
--- /dev/null
+++ b/client/app/bundles/course/video/handles.ts
@@ -0,0 +1,71 @@
+import { getIdFromUnknown } from 'utilities';
+
+import CourseAPI from 'api/course';
+import { CrumbPath, DataHandle } from 'lib/hooks/router/dynamicNest';
+
+const getVideoTitle = async (videoId: number): Promise<string> => {
+  const { data } = await CourseAPI.video.videos.fetch(videoId);
+
+  return data.video.title;
+};
+
+const getTabTitle = async (
+  courseUrl: string,
+  tabId?: number,
+): Promise<CrumbPath> => {
+  const { data } = await CourseAPI.video.videos.index(tabId);
+
+  const defaultTabId = data.videoTabs[0].id;
+  const currentTabId = data.metadata.currentTabId;
+
+  return {
+    activePath: `${courseUrl}/videos?tab=${defaultTabId}`,
+    content: {
+      title: data.videoTabs.find((tab) => tab.id === currentTabId)?.title,
+      url: `videos?tab=${currentTabId}`,
+    },
+  };
+};
+
+const getTabTitleFromVideoId = async (
+  courseUrl: string,
+  videoId: number,
+): Promise<CrumbPath> => {
+  const { data } = await CourseAPI.video.videos.fetch(videoId);
+
+  const defaultTabId = data.videoTabs[0].id;
+  const currentTabId = data.video.tabId;
+
+  return {
+    activePath: `${courseUrl}/videos?tab=${defaultTabId}`,
+    content: {
+      title: data.videoTabs.find((tab) => tab.id === currentTabId)?.title,
+      url: `videos?tab=${currentTabId}`,
+    },
+  };
+};
+
+export const videosHandle: DataHandle = (match, location) => {
+  const videoId = getIdFromUnknown(match.params?.videoId);
+  const courseUrl = `/courses/${match.params.courseId}`;
+
+  let promise: Promise<CrumbPath> | Promise<string>;
+
+  if (videoId) {
+    promise = getTabTitleFromVideoId(courseUrl, videoId);
+  } else {
+    const searchParams = new URLSearchParams(location.search);
+    const tabId = getIdFromUnknown(searchParams.get('tab'));
+
+    promise = getTabTitle(courseUrl, tabId);
+  }
+
+  return { shouldRevalidate: true, getData: () => promise };
+};
+
+export const videoHandle: DataHandle = (match) => {
+  const videoId = getIdFromUnknown(match.params?.videoId);
+  if (!videoId) throw new Error(`Invalid video id: ${videoId}`);
+
+  return { getData: () => getVideoTitle(videoId) };
+};
diff --git a/client/app/bundles/course/video/pages/VideoShow/VideoPlayerWithStore.jsx b/client/app/bundles/course/video/pages/VideoShow/VideoPlayerWithStore.jsx
index 6752dfccc99..5431180bd3c 100644
--- a/client/app/bundles/course/video/pages/VideoShow/VideoPlayerWithStore.jsx
+++ b/client/app/bundles/course/video/pages/VideoShow/VideoPlayerWithStore.jsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import equal from 'fast-deep-equal';
 import PropTypes from 'prop-types';
 
-import { StoreProviderWrapper } from 'lib/components/wrappers/ProviderWrapper';
+import StoreProvider from 'lib/components/wrappers/StoreProvider';
 
 import HeatMap from '../../submission/containers/Charts/HeatMap';
 import VideoPlayer from '../../submission/containers/VideoPlayer';
@@ -11,7 +11,7 @@ import storeCreator from '../../submission/store';
 import styles from '../../submission/containers/Statistics.scss';
 
 const VideoPlayerWithStore = ({ video, statistics }) => (
-  <StoreProviderWrapper {...storeCreator({ video })}>
+  <StoreProvider {...storeCreator({ video })}>
     <>
       <div>
         <div className={styles.statisticsVideoView}>
@@ -21,7 +21,7 @@ const VideoPlayerWithStore = ({ video, statistics }) => (
       <hr />
       <HeatMap {...statistics} />
     </>
-  </StoreProviderWrapper>
+  </StoreProvider>
 );
 VideoPlayerWithStore.propTypes = {
   video: PropTypes.object.isRequired,
diff --git a/client/app/bundles/course/video/pages/VideoShow/index.tsx b/client/app/bundles/course/video/pages/VideoShow/index.tsx
index cf703abfa74..de73ab1136c 100644
--- a/client/app/bundles/course/video/pages/VideoShow/index.tsx
+++ b/client/app/bundles/course/video/pages/VideoShow/index.tsx
@@ -5,8 +5,8 @@ import { toast } from 'react-toastify';
 import { Card, CardContent, CardHeader } from '@mui/material';
 
 import DescriptionCard from 'lib/components/core/DescriptionCard';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { getVideosURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
@@ -57,14 +57,7 @@ const VideoShow: FC<Props> = (props) => {
     }
   }, [dispatch, videoId]);
 
-  if (isLoading) {
-    return (
-      <>
-        <PageHeader title={intl.formatMessage(translations.video)} />
-        <LoadingIndicator />
-      </>
-    );
-  }
+  if (isLoading) return <LoadingIndicator />;
 
   const headerToolbars: ReactElement[] = [];
 
@@ -101,16 +94,16 @@ const VideoShow: FC<Props> = (props) => {
     : getVideosURL(getCourseId());
 
   return (
-    <main className="space-y-5">
-      <PageHeader
-        returnLink={returnLink}
-        title={intl.formatMessage(translations.videoTitle, {
-          title: video?.title,
-        })}
-        toolbars={headerToolbars}
-      />
+    <Page
+      actions={headerToolbars}
+      backTo={returnLink}
+      className="space-y-5"
+      title={intl.formatMessage(translations.videoTitle, {
+        title: video?.title,
+      })}
+    >
       {isLoading ? <LoadingIndicator /> : renderBody}
-    </main>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/video/pages/VideosIndex/index.tsx b/client/app/bundles/course/video/pages/VideosIndex/index.tsx
index 59f36a84fe6..96e67249762 100644
--- a/client/app/bundles/course/video/pages/VideosIndex/index.tsx
+++ b/client/app/bundles/course/video/pages/VideosIndex/index.tsx
@@ -4,8 +4,8 @@ import { useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { Button } from '@mui/material';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
@@ -96,8 +96,7 @@ const VideosIndex: FC = () => {
       });
 
   return (
-    <>
-      <PageHeader title={t(translations.header)} toolbars={headerToolbars} />
+    <Page actions={headerToolbars} title={t(translations.header)} unpadded>
       {!isLoading && isOpen && (
         <VideoNew
           currentTab={tabId}
@@ -105,7 +104,9 @@ const VideosIndex: FC = () => {
           open={isOpen}
         />
       )}
+
       <VideoTabs currentTab={tabId} setCurrentTab={setSearchParams} />
+
       {isLoading ? (
         <LoadingIndicator />
       ) : (
@@ -115,7 +116,7 @@ const VideosIndex: FC = () => {
           videos={videos}
         />
       )}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/video/submission/components/tables/VideoSubmissionsTable.tsx b/client/app/bundles/course/video/submission/components/tables/VideoSubmissionsTable.tsx
index fed7592737c..3fb3ce1ecc9 100644
--- a/client/app/bundles/course/video/submission/components/tables/VideoSubmissionsTable.tsx
+++ b/client/app/bundles/course/video/submission/components/tables/VideoSubmissionsTable.tsx
@@ -1,11 +1,11 @@
 import { FC } from 'react';
 import { injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { TableColumns, TableOptions } from 'types/components/DataTable';
 import { VideoSubmissionListData } from 'types/course/video/submissions';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
 import LinearProgressWithLabel from 'lib/components/core/LinearProgressWithLabel';
+import Link from 'lib/components/core/Link';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { getVideoSubmissionURL } from 'lib/helpers/url-builders';
 import { getCourseId, getVideoId } from 'lib/helpers/url-helpers';
diff --git a/client/app/bundles/course/video/submission/containers/DiscussionElements/Topic.jsx b/client/app/bundles/course/video/submission/containers/DiscussionElements/Topic.jsx
index f4ed1435c25..4cd677b49d5 100644
--- a/client/app/bundles/course/video/submission/containers/DiscussionElements/Topic.jsx
+++ b/client/app/bundles/course/video/submission/containers/DiscussionElements/Topic.jsx
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { Divider } from '@mui/material';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
 import { formatTimestamp } from 'lib/helpers/videoHelpers';
 
 import { seekToDirectly } from '../../actions/video';
@@ -34,12 +35,10 @@ const Topic = (props) => {
       <div className={styles.topicTimestamp}>
         <span className="glyphicon glyphicon-chevron-down" />
         &nbsp;
-        <a className="cursor-pointer" onClick={props.onTimeStampClick}>
-          <b>
-            Time:
-            {formatTimestamp(props.timestamp)}
-          </b>
-        </a>
+        <Link onClick={props.onTimeStampClick}>
+          Time:
+          {formatTimestamp(props.timestamp)}
+        </Link>
         &nbsp;
         <span className="glyphicon glyphicon-chevron-down" />
       </div>
diff --git a/client/app/bundles/course/video/submission/containers/Statistics.jsx b/client/app/bundles/course/video/submission/containers/Statistics.jsx
index 1ee10da3e7a..69bb3376159 100644
--- a/client/app/bundles/course/video/submission/containers/Statistics.jsx
+++ b/client/app/bundles/course/video/submission/containers/Statistics.jsx
@@ -1,10 +1,29 @@
 import { useState } from 'react';
-import { Tab, Tabs } from '@mui/material';
+import { defineMessages } from 'react-intl';
+import { Tab, Tabs, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 
+import useTranslation from 'lib/hooks/useTranslation';
+
 import HeatMap from './Charts/HeatMap';
 import ProgressGraph from './Charts/ProgressGraph';
 
+const translations = defineMessages({
+  frequencyGraph: {
+    id: 'course.video.submission.Statistics.frequencyGraph',
+    defaultMessage: 'Frequency Graph',
+  },
+  progressGraph: {
+    id: 'course.video.submission.Statistics.progressGraph',
+    defaultMessage: 'Progress Graph',
+  },
+  noWatchSessions: {
+    id: 'course.video.submission.Statistics.noWatchSessions',
+    defaultMessage:
+      'There are no watch sessions for this video submission yet.',
+  },
+});
+
 const propTypes = {
   sessions: PropTypes.objectOf(
     PropTypes.shape({
@@ -25,6 +44,8 @@ const propTypes = {
 };
 
 const Statistics = ({ watchFrequency, sessions }) => {
+  const { t } = useTranslation();
+
   const [tabValue, setTabValue] = useState(1);
 
   const tabContent = () => (
@@ -32,25 +53,34 @@ const Statistics = ({ watchFrequency, sessions }) => {
       <div className={tabValue === 1 ? '' : 'hidden'}>
         <HeatMap watchFrequency={watchFrequency} />
       </div>
+
       <div className={tabValue === 2 ? '' : 'hidden'}>
-        <ProgressGraph sessions={sessions} />
+        {sessions ? (
+          <ProgressGraph sessions={sessions} />
+        ) : (
+          <Typography className="mt-8" color="text.secondary" variant="body2">
+            {t(translations.noWatchSessions)}
+          </Typography>
+        )}
       </div>
     </>
   );
+
   return (
     <>
       <Tabs
         indicatorColor="primary"
-        onChange={(event, value) => {
+        onChange={(_, value) => {
           setTabValue(value);
         }}
         textColor="inherit"
         value={tabValue}
         variant="fullWidth"
       >
-        <Tab label="Frequency Graph" value={1} />
-        <Tab label="Progress Graph" value={2} />
+        <Tab label={t(translations.frequencyGraph)} value={1} />
+        <Tab label={t(translations.progressGraph)} value={2} />
       </Tabs>
+
       {tabContent()}
     </>
   );
diff --git a/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/SubmissionEditWithStore.jsx b/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/SubmissionEditWithStore.jsx
index d367b8eda61..ba46f864eae 100644
--- a/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/SubmissionEditWithStore.jsx
+++ b/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/SubmissionEditWithStore.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import CourseAPI from 'api/course';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import { StoreProviderWrapper } from 'lib/components/wrappers/ProviderWrapper';
+import StoreProvider from 'lib/components/wrappers/StoreProvider';
 
 import Submission from '../../containers/Submission';
 import storeCreator from '../../store';
@@ -37,13 +37,13 @@ const SubmissionEditWithStore = ({ data }) => {
 
   return (
     <div id="video-component">
-      <StoreProviderWrapper {...storeCreator(editVideoData)}>
+      <StoreProvider {...storeCreator(editVideoData)}>
         <Card className="mt-6">
           <CardContent>
             <Submission />
           </CardContent>
         </Card>
-      </StoreProviderWrapper>
+      </StoreProvider>
     </div>
   );
 };
diff --git a/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/index.tsx b/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/index.tsx
index 6526b8f6112..3f3936a1278 100644
--- a/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/index.tsx
+++ b/client/app/bundles/course/video/submission/pages/VideoSubmissionEdit/index.tsx
@@ -6,8 +6,8 @@ import { VideoEditSubmissionData } from 'types/course/video/submissions';
 
 import CourseAPI from 'api/course';
 import DescriptionCard from 'lib/components/core/DescriptionCard';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 
 import SubmissionEditWithStore from './SubmissionEditWithStore';
 
@@ -52,14 +52,7 @@ const VideoSubmissionEdit: FC<Props> = (props) => {
     }
   }, [submissionId]);
 
-  if (isLoading) {
-    return (
-      <>
-        <PageHeader title={intl.formatMessage(translations.watchingVideo)} />
-        <LoadingIndicator />
-      </>
-    );
-  }
+  if (isLoading) return <LoadingIndicator />;
 
   const renderBody = editVideoSubmission ? (
     <>
@@ -72,14 +65,13 @@ const VideoSubmissionEdit: FC<Props> = (props) => {
     </>
   ) : null;
   return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(translations.header, {
-          title: editVideoSubmission?.videoTitle,
-        })}
-      />
+    <Page
+      title={intl.formatMessage(translations.header, {
+        title: editVideoSubmission?.videoTitle,
+      })}
+    >
       {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/StatisticsWithStore.jsx b/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/StatisticsWithStore.jsx
index 962efa96f1c..c45a5f58245 100644
--- a/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/StatisticsWithStore.jsx
+++ b/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/StatisticsWithStore.jsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import equal from 'fast-deep-equal';
 import PropTypes from 'prop-types';
 
-import { StoreProviderWrapper } from 'lib/components/wrappers/ProviderWrapper';
+import StoreProvider from 'lib/components/wrappers/StoreProvider';
 
 import Statistics from '../../containers/Statistics';
 import VideoPlayer from '../../containers/VideoPlayer';
@@ -11,7 +11,7 @@ import storeCreator from '../../store';
 import styles from '../../containers/Statistics.scss';
 
 const StatisticsWithStore = ({ video, statistics }) => (
-  <StoreProviderWrapper {...storeCreator({ video })}>
+  <StoreProvider {...storeCreator({ video })}>
     <div>
       <div className={styles.statisticsVideoView}>
         <VideoPlayer />
@@ -19,7 +19,7 @@ const StatisticsWithStore = ({ video, statistics }) => (
       <hr />
       <Statistics {...statistics} />
     </div>
-  </StoreProviderWrapper>
+  </StoreProvider>
 );
 StatisticsWithStore.propTypes = {
   video: PropTypes.object.isRequired,
diff --git a/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/index.tsx b/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/index.tsx
index dd33439d8bd..f59bd11bfea 100644
--- a/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/index.tsx
+++ b/client/app/bundles/course/video/submission/pages/VideoSubmissionShow/index.tsx
@@ -15,9 +15,9 @@ import { VideoSubmissionData } from 'types/course/video/submissions';
 
 import CourseAPI from 'api/course';
 import DescriptionCard from 'lib/components/core/DescriptionCard';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { getVideoSubmissionsURL } from 'lib/helpers/url-builders';
 import { getCourseId, getVideoId } from 'lib/helpers/url-helpers';
 import { formatLongDateTime } from 'lib/moment';
@@ -69,6 +69,10 @@ const translations = defineMessages({
     id: 'course.video.submission.VideoSubmissionShow.noSession',
     defaultMessage: 'No watch statistics available for this submission.',
   },
+  watch: {
+    id: 'course.video.submission.VideoSubmissionShow.watch',
+    defaultMessage: 'Watch',
+  },
 });
 
 const VideoSubmissionShow: FC<Props> = (props) => {
@@ -94,17 +98,7 @@ const VideoSubmissionShow: FC<Props> = (props) => {
     }
   }, [submissionId]);
 
-  if (isLoading) {
-    return (
-      <>
-        <PageHeader
-          returnLink={getVideoSubmissionsURL(getCourseId(), getVideoId())}
-          title={intl.formatMessage(translations.video)}
-        />
-        <LoadingIndicator />
-      </>
-    );
-  }
+  if (isLoading) return <LoadingIndicator />;
 
   const renderBody = videoSubmission ? (
     <>
@@ -132,16 +126,17 @@ const VideoSubmissionShow: FC<Props> = (props) => {
     </>
   ) : null;
   return (
-    <>
-      <PageHeader
-        returnLink={getVideoSubmissionsURL(getCourseId(), getVideoId())}
-        title={intl.formatMessage(translations.videoTitle, {
-          title: videoSubmission?.videoTitle,
-        })}
-      />
+    <Page
+      backTo={getVideoSubmissionsURL(getCourseId(), getVideoId())}
+      title={intl.formatMessage(translations.videoTitle, {
+        title: videoSubmission?.videoTitle,
+      })}
+    >
       {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(VideoSubmissionShow);
+const handle = translations.watch;
+
+export default Object.assign(injectIntl(VideoSubmissionShow), { handle });
diff --git a/client/app/bundles/course/video/submission/pages/VideoSubmissionsIndex/index.tsx b/client/app/bundles/course/video/submission/pages/VideoSubmissionsIndex/index.tsx
index fb82d8432de..86325a9b1a8 100644
--- a/client/app/bundles/course/video/submission/pages/VideoSubmissionsIndex/index.tsx
+++ b/client/app/bundles/course/video/submission/pages/VideoSubmissionsIndex/index.tsx
@@ -4,9 +4,9 @@ import { toast } from 'react-toastify';
 import { VideoSubmission } from 'types/course/video/submissions';
 
 import CourseAPI from 'api/course';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { getVideosURL } from 'lib/helpers/url-builders';
 import { getCourseId } from 'lib/helpers/url-helpers';
 
@@ -35,6 +35,10 @@ const translations = defineMessages({
     id: 'course.video.submission.VideoSubmissionsIndex.phantomStudents',
     defaultMessage: 'Phantom Students',
   },
+  submissions: {
+    id: 'course.video.submission.VideoSubmissionsIndex.submissions',
+    defaultMessage: 'Submissions',
+  },
 });
 
 const VideoSubmissionsIndex: FC<Props> = (props) => {
@@ -62,14 +66,14 @@ const VideoSubmissionsIndex: FC<Props> = (props) => {
     : getVideosURL(getCourseId());
 
   return (
-    <>
-      <PageHeader
-        returnLink={returnLink}
-        title={`${intl.formatMessage({
-          id: 'course.video.submissions.VideoSubmissionsIndex.header',
-          defaultMessage: 'Video Submissions',
-        })} ${data?.videoTitle ? `- ${data.videoTitle}` : ''}`}
-      />
+    <Page
+      backTo={returnLink}
+      title={`${intl.formatMessage({
+        id: 'course.video.submissions.VideoSubmissionsIndex.header',
+        defaultMessage: 'Video Submissions',
+      })} ${data?.videoTitle ? `- ${data.videoTitle}` : ''}`}
+      unpadded
+    >
       {data &&
         data.myStudentSubmissions.length === 0 &&
         data.studentSubmissions.length === 0 &&
@@ -102,8 +106,10 @@ const VideoSubmissionsIndex: FC<Props> = (props) => {
             )}
         </>
       )}
-    </>
+    </Page>
   );
 };
 
-export default injectIntl(VideoSubmissionsIndex);
+const handle = translations.submissions;
+
+export default Object.assign(injectIntl(VideoSubmissionsIndex), { handle });
diff --git a/client/app/bundles/system/admin/admin/AdminNavigator.tsx b/client/app/bundles/system/admin/admin/AdminNavigator.tsx
new file mode 100644
index 00000000000..5ec6f45bf65
--- /dev/null
+++ b/client/app/bundles/system/admin/admin/AdminNavigator.tsx
@@ -0,0 +1,64 @@
+import { defineMessages } from 'react-intl';
+import { AutoStories, Campaign, Category, Group } from '@mui/icons-material';
+
+import useTranslation from 'lib/hooks/useTranslation';
+
+import AdminNavigablePage from '../components/AdminNavigablePage';
+
+const translations = defineMessages({
+  announcements: {
+    id: 'system.admin.admin.AdminNavigator.announcements',
+    defaultMessage: 'System Announcements',
+  },
+  users: {
+    id: 'system.admin.admin.AdminNavigator.users',
+    defaultMessage: 'Users',
+  },
+  instances: {
+    id: 'system.admin.admin.AdminNavigator.instances',
+    defaultMessage: 'Instances',
+  },
+  courses: {
+    id: 'system.admin.admin.AdminNavigator.courses',
+    defaultMessage: 'Courses',
+  },
+  systemAdminPanel: {
+    id: 'system.admin.admin.AdminNavigator.systemAdminPanel',
+    defaultMessage: 'System Admin Panel',
+  },
+});
+
+const AdminNavigator = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <AdminNavigablePage
+      paths={[
+        {
+          icon: <Campaign />,
+          title: t(translations.announcements),
+          path: '/admin/announcements',
+        },
+        {
+          icon: <Group />,
+          title: t(translations.users),
+          path: '/admin/users',
+        },
+        {
+          icon: <Category />,
+          title: t(translations.instances),
+          path: '/admin/instances',
+        },
+        {
+          icon: <AutoStories />,
+          title: t(translations.courses),
+          path: '/admin/courses',
+        },
+      ]}
+    />
+  );
+};
+
+const handle = translations.systemAdminPanel;
+
+export default Object.assign(AdminNavigator, { handle });
diff --git a/client/app/bundles/system/admin/admin/components/navigation/SystemAdminSidebar.tsx b/client/app/bundles/system/admin/admin/components/navigation/SystemAdminSidebar.tsx
deleted file mode 100644
index efc412c0a49..00000000000
--- a/client/app/bundles/system/admin/admin/components/navigation/SystemAdminSidebar.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { FC } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
-import {
-  AutoStories,
-  Campaign,
-  Category,
-  Group,
-  KeyboardDoubleArrowLeft,
-  KeyboardDoubleArrowRight,
-} from '@mui/icons-material';
-import {
-  Grid,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Tooltip,
-} from '@mui/material';
-import { grey } from '@mui/material/colors';
-
-import Sidebar from 'lib/components/navigation/Sidebar';
-
-interface Props extends WrappedComponentProps {
-  isExpanded: boolean;
-  handleExpand: (forceExpand?: boolean) => void;
-}
-
-const translations = defineMessages({
-  announcements: {
-    id: 'system.admin.admin.SystemAdminSidebar.announcements',
-    defaultMessage: 'System Announcements',
-  },
-  users: {
-    id: 'system.admin.admin.SystemAdminSidebar.users',
-    defaultMessage: 'Users',
-  },
-  instances: {
-    id: 'system.admin.admin.SystemAdminSidebar.instances',
-    defaultMessage: 'Instances',
-  },
-  courses: {
-    id: 'system.admin.admin.SystemAdminSidebar.courses',
-    defaultMessage: 'Courses',
-  },
-  collapseSidebar: {
-    id: 'system.admin.admin.SystemAdminSidebar.collapseSidebar',
-    defaultMessage: 'Collapse Sidebar',
-  },
-  expandSidebar: {
-    id: 'system.admin.admin.SystemAdminSidebar.expandSidebar',
-    defaultMessage: 'Expand Sidebar',
-  },
-});
-
-interface ListItemLinkProps {
-  primary: string;
-  to: string;
-  icon: JSX.Element;
-  expanded: boolean;
-  callback: () => void;
-}
-
-const ListItemLink = (props: ListItemLinkProps): JSX.Element => {
-  const { primary, to, icon, expanded, callback } = props;
-
-  const renderIcon = (): JSX.Element => {
-    if (expanded) {
-      return <ListItemIcon sx={{ minWidth: '32px' }}>{icon}</ListItemIcon>;
-    }
-    return (
-      <Tooltip placement="right" title={primary}>
-        <ListItemIcon sx={{ minWidth: '32px' }}>{icon}</ListItemIcon>
-      </Tooltip>
-    );
-  };
-
-  const textStyle = expanded ? { display: 'block' } : { display: 'none' };
-
-  return (
-    <li>
-      <ListItem
-        button
-        component={Link}
-        disablePadding
-        onClick={callback}
-        style={{
-          border: 'none',
-          outline: 'none',
-          textDecoration: 'none',
-          padding: '4px 16px',
-        }}
-        to={to}
-      >
-        {renderIcon()}
-        <ListItemText primary={primary} sx={textStyle} />
-      </ListItem>
-    </li>
-  );
-};
-
-const SystemAdminSidebar: FC<Props> = (props) => {
-  const { isExpanded, handleExpand, intl } = props;
-
-  const renderDrawer = (isDrawerOpen, handleDrawerToggle): JSX.Element => {
-    const handleExpandClick = (): void => {
-      if (isDrawerOpen) {
-        handleDrawerToggle();
-      } else {
-        handleExpand();
-      }
-    };
-
-    const handleListItemClick = (): void => {
-      if (isDrawerOpen) {
-        handleDrawerToggle();
-      }
-    };
-
-    const backgroundColor = isDrawerOpen ? 'white' : grey[100];
-
-    return (
-      <Grid
-        container
-        flexDirection="column"
-        justifyContent="space-between"
-        style={{ height: '100vh', backgroundColor }}
-      >
-        <Grid item>
-          <List style={{ marginTop: '60px' }}>
-            <ListItem button onClick={handleExpandClick}>
-              <ListItemIcon sx={{ minWidth: '32px' }}>
-                {isExpanded ? (
-                  <KeyboardDoubleArrowLeft />
-                ) : (
-                  <Tooltip
-                    placement="right"
-                    title={intl.formatMessage(translations.expandSidebar)}
-                  >
-                    <KeyboardDoubleArrowRight />
-                  </Tooltip>
-                )}
-              </ListItemIcon>
-              {isExpanded && (
-                <ListItemText
-                  primary={intl.formatMessage(translations.collapseSidebar)}
-                />
-              )}
-            </ListItem>
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<Campaign />}
-              primary={intl.formatMessage(translations.announcements)}
-              to="/admin/announcements"
-            />
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<Group />}
-              primary={intl.formatMessage(translations.users)}
-              to="/admin/users"
-            />
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<Category />}
-              primary={intl.formatMessage(translations.instances)}
-              to="/admin/instances"
-            />
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<AutoStories />}
-              primary={intl.formatMessage(translations.courses)}
-              to="/admin/courses"
-            />
-          </List>
-        </Grid>
-      </Grid>
-    );
-  };
-
-  return (
-    <Sidebar
-      handleExpand={handleExpand}
-      renderDrawer={(isDrawerOpen, handleDrawerToggle): JSX.Element =>
-        renderDrawer(isDrawerOpen, handleDrawerToggle)
-      }
-    />
-  );
-};
-
-export default injectIntl(SystemAdminSidebar);
diff --git a/client/app/bundles/system/admin/admin/components/tables/CoursesTable.tsx b/client/app/bundles/system/admin/admin/components/tables/CoursesTable.tsx
index 0ca81094d15..50fc4272b92 100644
--- a/client/app/bundles/system/admin/admin/components/tables/CoursesTable.tsx
+++ b/client/app/bundles/system/admin/admin/components/tables/CoursesTable.tsx
@@ -3,6 +3,7 @@ import { defineMessages } from 'react-intl';
 import { CourseMiniEntity } from 'types/system/courses';
 import { UserBasicMiniEntity } from 'types/users';
 
+import Link from 'lib/components/core/Link';
 import Note from 'lib/components/core/Note';
 import Table, { ColumnTemplate } from 'lib/components/table';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
@@ -43,7 +44,9 @@ const CoursesTable = (props: CoursesTableProps): JSX.Element => {
     }
     return (
       <li key={owner.id} className="list-none">
-        <a href={`/users/${owner.id}`}>{owner.name}</a>
+        <Link to={`/users/${owner.id}`} underline="hover">
+          {owner.name}
+        </Link>
       </li>
     );
   };
@@ -55,9 +58,12 @@ const CoursesTable = (props: CoursesTableProps): JSX.Element => {
       sortable: true,
       searchable: true,
       cell: (course) => (
-        <a href={`//${course.instance.host}/courses/${course.id}`}>
+        <Link
+          href={`//${course.instance.host}/courses/${course.id}`}
+          underline="hover"
+        >
           {course.title}
-        </a>
+        </Link>
       ),
     },
     {
@@ -75,11 +81,12 @@ const CoursesTable = (props: CoursesTableProps): JSX.Element => {
       title: t(tableTranslations.activeUsers),
       sortable: true,
       cell: (course) => (
-        <a
+        <Link
           href={`//${course.instance.host}/courses/${course.id}/students?active=true`}
+          underline="hover"
         >
           {course.activeUserCount}
-        </a>
+        </Link>
       ),
     },
     {
@@ -87,9 +94,12 @@ const CoursesTable = (props: CoursesTableProps): JSX.Element => {
       title: t(tableTranslations.totalUsers),
       sortable: true,
       cell: (course) => (
-        <a href={`//${course.instance.host}/courses/${course.id}/students`}>
+        <Link
+          href={`//${course.instance.host}/courses/${course.id}/students`}
+          underline="hover"
+        >
           {course.userCount}
-        </a>
+        </Link>
       ),
     },
     {
@@ -97,7 +107,9 @@ const CoursesTable = (props: CoursesTableProps): JSX.Element => {
       title: t(tableTranslations.instance),
       sortable: true,
       cell: (course) => (
-        <a href={`//${course.instance.host}`}>{course.instance.name}</a>
+        <Link href={`//${course.instance.host}`} underline="hover">
+          {course.instance.name}
+        </Link>
       ),
       searchProps: { getValue: (course) => course.instance.name },
     },
@@ -107,9 +119,7 @@ const CoursesTable = (props: CoursesTableProps): JSX.Element => {
       sortable: true,
       searchable: true,
       cell: (course) => (
-        <ul className="mb-0 pl-0">
-          {course.owners.map((owner) => renderOwnerLink(owner))}
-        </ul>
+        <ul className="mb-0 pl-0">{course.owners.map(renderOwnerLink)}</ul>
       ),
       searchProps: {
         getValue: (course) =>
diff --git a/client/app/bundles/system/admin/admin/components/tables/InstancesTable/index.tsx b/client/app/bundles/system/admin/admin/components/tables/InstancesTable/index.tsx
index cc72c3c55b5..f6c8a5a03a9 100644
--- a/client/app/bundles/system/admin/admin/components/tables/InstancesTable/index.tsx
+++ b/client/app/bundles/system/admin/admin/components/tables/InstancesTable/index.tsx
@@ -1,7 +1,8 @@
-import { ReactElement } from 'react';
+import { Fragment, ReactElement, ReactNode } from 'react';
 import { defineMessages } from 'react-intl';
 import { InstanceMiniEntity } from 'types/system/instances';
 
+import Link from 'lib/components/core/Link';
 import Table, { ColumnTemplate } from 'lib/components/table';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import useTranslation from 'lib/hooks/useTranslation';
@@ -13,6 +14,7 @@ interface InstanceTableProps {
   instances: InstanceMiniEntity[];
   renderRowActionComponent: (instance: InstanceMiniEntity) => ReactElement;
   className?: string;
+  newInstanceButton?: ReactNode;
 }
 
 const translations = defineMessages({
@@ -52,9 +54,12 @@ const InstancesTable = (props: InstanceTableProps): JSX.Element => {
       title: t(tableTranslations.activeUsers),
       sortable: true,
       cell: (instance) => (
-        <a href={`//${instance.host}/admin/users?active=true`}>
+        <Link
+          href={`//${instance.host}/admin/users?active=true`}
+          underline="hover"
+        >
           {instance.activeUserCount}
-        </a>
+        </Link>
       ),
     },
     {
@@ -62,7 +67,9 @@ const InstancesTable = (props: InstanceTableProps): JSX.Element => {
       title: t(tableTranslations.totalUsers),
       sortable: true,
       cell: (instance) => (
-        <a href={`//${instance.host}/admin/users`}>{instance.userCount}</a>
+        <Link href={`//${instance.host}/admin/users`} underline="hover">
+          {instance.userCount}
+        </Link>
       ),
     },
 
@@ -71,9 +78,12 @@ const InstancesTable = (props: InstanceTableProps): JSX.Element => {
       title: t(tableTranslations.activeCourses),
       sortable: true,
       cell: (instance) => (
-        <a href={`//${instance.host}/admin/courses?active=true`}>
+        <Link
+          href={`//${instance.host}/admin/courses?active=true`}
+          underline="hover"
+        >
           {instance.activeCourseCount}
-        </a>
+        </Link>
       ),
     },
     {
@@ -81,7 +91,9 @@ const InstancesTable = (props: InstanceTableProps): JSX.Element => {
       title: t(tableTranslations.totalCourses),
       sortable: true,
       cell: (instance) => (
-        <a href={`//${instance.host}/admin/courses`}>{instance.courseCount}</a>
+        <Link href={`//${instance.host}/admin/courses`} underline="hover">
+          {instance.courseCount}
+        </Link>
       ),
     },
     {
@@ -108,6 +120,11 @@ const InstancesTable = (props: InstanceTableProps): JSX.Element => {
       search={{ searchPlaceholder: t(translations.searchText) }}
       toolbar={{
         show: true,
+        buttons: [
+          <Fragment key="newInstanceButton">
+            {props.newInstanceButton}
+          </Fragment>,
+        ],
       }}
     />
   );
diff --git a/client/app/bundles/system/admin/admin/components/tables/UsersTable.tsx b/client/app/bundles/system/admin/admin/components/tables/UsersTable.tsx
index 3078f13ee59..568b13c3a96 100644
--- a/client/app/bundles/system/admin/admin/components/tables/UsersTable.tsx
+++ b/client/app/bundles/system/admin/admin/components/tables/UsersTable.tsx
@@ -16,6 +16,7 @@ import {
 import { AdminStats, UserMiniEntity, UserRoles } from 'types/users';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import InlineEditTextField from 'lib/components/form/fields/DataTableInlineEditable/TextField';
 import {
   DEFAULT_TABLE_ROWS_PER_PAGE,
@@ -294,7 +295,12 @@ const UsersTable: FC<Props> = (props) => {
             <ul className="mb-0 pl-0">
               {user.instances.map((instance) => (
                 <li key={instance.name} className="list-none">
-                  <a href={`//${instance.host}/admin/users`}>{instance.name}</a>
+                  <Link
+                    href={`//${instance.host}/admin/users`}
+                    underline="hover"
+                  >
+                    {instance.name}
+                  </Link>
                 </li>
               ))}
             </ul>
diff --git a/client/app/bundles/system/admin/admin/pages/AdminIndex/index.tsx b/client/app/bundles/system/admin/admin/pages/AdminIndex/index.tsx
deleted file mode 100644
index f97d4e2e859..00000000000
--- a/client/app/bundles/system/admin/admin/pages/AdminIndex/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { FC } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-
-import PageHeader from 'lib/components/navigation/PageHeader';
-
-type Props = WrappedComponentProps;
-
-const translations = defineMessages({
-  header: {
-    id: 'system.admin.admin.AdminIndex.header',
-    defaultMessage: 'Admin',
-  },
-});
-
-const AdminIndex: FC<Props> = (props) => {
-  const { intl } = props;
-
-  return <PageHeader title={intl.formatMessage(translations.header)} />;
-};
-
-export default injectIntl(AdminIndex);
diff --git a/client/app/bundles/system/admin/admin/pages/AdminNavigator/index.tsx b/client/app/bundles/system/admin/admin/pages/AdminNavigator/index.tsx
deleted file mode 100644
index 2a625a6e84c..00000000000
--- a/client/app/bundles/system/admin/admin/pages/AdminNavigator/index.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import AppLayout from 'lib/components/core/layouts/AppLayout';
-
-import SystemAdminSidebar from '../../components/navigation/SystemAdminSidebar';
-
-const AdminNavigator = (): JSX.Element => (
-  <AppLayout
-    renderSidebar={(isExpanded, handleExpand): JSX.Element => (
-      <SystemAdminSidebar handleExpand={handleExpand} isExpanded={isExpanded} />
-    )}
-  />
-);
-
-export default AdminNavigator;
diff --git a/client/app/bundles/system/admin/admin/pages/AnnouncementsIndex/index.tsx b/client/app/bundles/system/admin/admin/pages/AnnouncementsIndex.tsx
similarity index 70%
rename from client/app/bundles/system/admin/admin/pages/AnnouncementsIndex/index.tsx
rename to client/app/bundles/system/admin/admin/pages/AnnouncementsIndex.tsx
index fe2d6d9cfa5..ed691181d85 100644
--- a/client/app/bundles/system/admin/admin/pages/AnnouncementsIndex/index.tsx
+++ b/client/app/bundles/system/admin/admin/pages/AnnouncementsIndex.tsx
@@ -1,12 +1,12 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
+import { Button } from '@mui/material';
 
 import AnnouncementsDisplay from 'bundles/course/announcements/components/misc/AnnouncementsDisplay';
 import AnnouncementNew from 'bundles/course/announcements/pages/AnnouncementNew';
-import AddButton from 'lib/components/core/buttons/AddButton';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import {
@@ -14,8 +14,8 @@ import {
   deleteAnnouncement,
   indexAnnouncements,
   updateAnnouncement,
-} from '../../operations';
-import { getAllAnnouncementMiniEntities } from '../../selectors';
+} from '../operations';
+import { getAllAnnouncementMiniEntities } from '../selectors';
 
 type Props = WrappedComponentProps;
 
@@ -38,7 +38,7 @@ const AnnouncementsIndex: FC<Props> = (props) => {
   const { intl } = props;
   const [isLoading, setIsLoading] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
-  const headerToolbars: ReactElement[] = [];
+
   const announcements = useAppSelector(getAllAnnouncementMiniEntities);
   const dispatch = useAppDispatch();
 
@@ -50,20 +50,21 @@ const AnnouncementsIndex: FC<Props> = (props) => {
       .finally(() => setIsLoading(false));
   }, [dispatch]);
 
-  headerToolbars.push(
-    <AddButton
-      key="new-announcement-button"
-      className="text-white"
-      id="new-announcement-button"
-      onClick={(): void => {
-        setIsOpen(true);
-      }}
-      tooltip={intl.formatMessage(translations.newAnnouncement)}
-    />,
-  );
+  if (isLoading) return <LoadingIndicator />;
+
+  return (
+    <Page>
+      <Button
+        key="new-announcement-button"
+        id="new-announcement-button"
+        onClick={(): void => {
+          setIsOpen(true);
+        }}
+        variant="outlined"
+      >
+        {intl.formatMessage(translations.newAnnouncement)}
+      </Button>
 
-  const renderBody: JSX.Element = (
-    <>
       <AnnouncementsDisplay
         announcementPermissions={{ canCreate: true }}
         announcements={announcements}
@@ -71,23 +72,14 @@ const AnnouncementsIndex: FC<Props> = (props) => {
         deleteOperation={deleteAnnouncement}
         updateOperation={updateAnnouncement}
       />
+
       <AnnouncementNew
         canSticky={false}
         createOperation={createAnnouncement}
         onClose={(): void => setIsOpen(false)}
         open={isOpen}
       />
-    </>
-  );
-
-  return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(translations.header)}
-        toolbars={headerToolbars}
-      />
-      {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/system/admin/admin/pages/CoursesIndex/index.tsx b/client/app/bundles/system/admin/admin/pages/CoursesIndex.tsx
similarity index 76%
rename from client/app/bundles/system/admin/admin/pages/CoursesIndex/index.tsx
rename to client/app/bundles/system/admin/admin/pages/CoursesIndex.tsx
index 07fdc0d5c2e..5ce0586e975 100644
--- a/client/app/bundles/system/admin/admin/pages/CoursesIndex/index.tsx
+++ b/client/app/bundles/system/admin/admin/pages/CoursesIndex.tsx
@@ -1,26 +1,22 @@
 import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
-import { Link, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
 import SummaryCard from 'lib/components/core/layouts/SummaryCard';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
-import CoursesButtons from '../../components/buttons/CoursesButtons';
-import CoursesTable from '../../components/tables/CoursesTable';
-import { deleteCourse, indexCourses } from '../../operations';
-import { getAdminCounts, getAllCourseMiniEntities } from '../../selectors';
+import CoursesButtons from '../components/buttons/CoursesButtons';
+import CoursesTable from '../components/tables/CoursesTable';
+import { deleteCourse, indexCourses } from '../operations';
+import { getAdminCounts, getAllCourseMiniEntities } from '../selectors';
 
 type Props = WrappedComponentProps;
 
 const translations = defineMessages({
-  header: {
-    id: 'system.admin.admin.CoursesIndex.header',
-    defaultMessage: 'Courses',
-  },
   title: {
     id: 'system.admin.admin.CoursesIndex.title',
     defaultMessage: 'Courses',
@@ -48,11 +44,8 @@ const CoursesIndex: FC<Props> = (props) => {
   const dispatch = useAppDispatch();
   const totalCount =
     filter.active && courseCounts.totalCourses !== 0 ? (
-      <Link
-        component="button"
-        onClick={(): void => setFilter({ active: false })}
-      >
-        <strong>{courseCounts.totalCourses}</strong>
+      <Link onClick={(): void => setFilter({ active: false })}>
+        {courseCounts.totalCourses}
       </Link>
     ) : (
       <strong>{courseCounts.totalCourses}</strong>
@@ -60,10 +53,7 @@ const CoursesIndex: FC<Props> = (props) => {
 
   const activeCount =
     !filter.active && courseCounts.activeCourses !== 0 ? (
-      <Link
-        component="button"
-        onClick={(): void => setFilter({ active: true })}
-      >
+      <Link onClick={(): void => setFilter({ active: true })}>
         <strong>{courseCounts.activeCourses}</strong>
       </Link>
     ) : (
@@ -101,12 +91,13 @@ const CoursesIndex: FC<Props> = (props) => {
 
   return (
     <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      <SummaryCard renderContent={renderSummaryContent} />
+      <SummaryCard className="mx-6 mt-6" renderContent={renderSummaryContent} />
+
       {isLoading ? (
         <LoadingIndicator />
       ) : (
         <CoursesTable
+          className="border-none"
           courses={courses}
           renderRowActionComponent={(course): JSX.Element => (
             <CoursesButtons course={course} deleteOperation={deleteCourse} />
diff --git a/client/app/bundles/system/admin/admin/pages/InstanceNew/index.tsx b/client/app/bundles/system/admin/admin/pages/InstanceNew.tsx
similarity index 92%
rename from client/app/bundles/system/admin/admin/pages/InstanceNew/index.tsx
rename to client/app/bundles/system/admin/admin/pages/InstanceNew.tsx
index 17d2451786f..376b42f2749 100644
--- a/client/app/bundles/system/admin/admin/pages/InstanceNew/index.tsx
+++ b/client/app/bundles/system/admin/admin/pages/InstanceNew.tsx
@@ -7,8 +7,8 @@ import { setReactHookFormError } from 'lib/helpers/react-hook-form-helper';
 import { useAppDispatch } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
-import InstanceForm from '../../components/forms/InstanceForm';
-import { createInstance } from '../../operations';
+import InstanceForm from '../components/forms/InstanceForm';
+import { createInstance } from '../operations';
 
 interface Props {
   open: boolean;
diff --git a/client/app/bundles/system/admin/admin/pages/InstancesIndex/index.tsx b/client/app/bundles/system/admin/admin/pages/InstancesIndex.tsx
similarity index 61%
rename from client/app/bundles/system/admin/admin/pages/InstancesIndex/index.tsx
rename to client/app/bundles/system/admin/admin/pages/InstancesIndex.tsx
index 312a208235f..21ebef3fb27 100644
--- a/client/app/bundles/system/admin/admin/pages/InstancesIndex/index.tsx
+++ b/client/app/bundles/system/admin/admin/pages/InstancesIndex.tsx
@@ -1,18 +1,18 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { defineMessages } from 'react-intl';
 import { toast } from 'react-toastify';
+import { Button } from '@mui/material';
 
-import AddButton from 'lib/components/core/buttons/AddButton';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
 
-import InstancesButtons from '../../components/buttons/InstancesButtons';
-import InstancesTable from '../../components/tables/InstancesTable';
-import { indexInstances } from '../../operations';
-import { getAllInstanceMiniEntities, getPermissions } from '../../selectors';
-import InstanceNew from '../InstanceNew';
+import InstancesButtons from '../components/buttons/InstancesButtons';
+import InstancesTable from '../components/tables/InstancesTable';
+import { indexInstances } from '../operations';
+import { getAllInstanceMiniEntities, getPermissions } from '../selectors';
+
+import InstanceNew from './InstanceNew';
 
 const translations = defineMessages({
   header: {
@@ -43,48 +43,41 @@ const InstancesIndex: FC = () => {
   const permissions = useAppSelector(getPermissions);
   const instances = useAppSelector(getAllInstanceMiniEntities);
 
-  const headerToolbars: ReactElement[] = [];
-
   useEffect(() => {
     dispatch(indexInstances())
       .catch(() => toast.error(t(translations.fetchInstancesFailure)))
       .finally(() => setIsLoading(false));
   }, [dispatch]);
 
-  if (permissions.canCreateInstances) {
-    headerToolbars.push(
-      <AddButton
-        key="new-instance-button"
-        className="text-white"
-        id="new-instance-button"
-        onClick={(): void => {
-          setIsOpen(true);
-        }}
-        tooltip={t(translations.newInstance)}
-      />,
-    );
-  }
+  if (isLoading) return <LoadingIndicator />;
 
-  const renderBody: JSX.Element = (
+  return (
     <>
       <InstancesTable
+        className="border-none"
         instances={instances}
+        newInstanceButton={
+          permissions.canCreateInstances && (
+            <Button
+              className="whitespace-nowrap"
+              id="new-instance-button"
+              onClick={(): void => setIsOpen(true)}
+              variant="outlined"
+            >
+              {t(translations.newInstance)}
+            </Button>
+          )
+        }
         renderRowActionComponent={(instance): JSX.Element => (
           <InstancesButtons instance={instance} />
         )}
       />
+
       {isOpen && (
         <InstanceNew onClose={(): void => setIsOpen(false)} open={isOpen} />
       )}
     </>
   );
-
-  return (
-    <>
-      <PageHeader title={t(translations.header)} toolbars={headerToolbars} />
-      {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
-  );
 };
 
 export default InstancesIndex;
diff --git a/client/app/bundles/system/admin/admin/pages/UsersIndex/index.tsx b/client/app/bundles/system/admin/admin/pages/UsersIndex.tsx
similarity index 88%
rename from client/app/bundles/system/admin/admin/pages/UsersIndex/index.tsx
rename to client/app/bundles/system/admin/admin/pages/UsersIndex.tsx
index d9228db6dea..b7edc57fbcc 100644
--- a/client/app/bundles/system/admin/admin/pages/UsersIndex/index.tsx
+++ b/client/app/bundles/system/admin/admin/pages/UsersIndex.tsx
@@ -1,26 +1,22 @@
 import { FC, useEffect, useMemo, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
-import { Link, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
 import SummaryCard from 'lib/components/core/layouts/SummaryCard';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
-import UsersButtons from '../../components/buttons/UsersButtons';
-import UsersTable from '../../components/tables/UsersTable';
-import { indexUsers } from '../../operations';
-import { getAdminCounts, getAllUserMiniEntities } from '../../selectors';
+import UsersButtons from '../components/buttons/UsersButtons';
+import UsersTable from '../components/tables/UsersTable';
+import { indexUsers } from '../operations';
+import { getAdminCounts, getAllUserMiniEntities } from '../selectors';
 
 type Props = WrappedComponentProps;
 
 const translations = defineMessages({
-  header: {
-    id: 'system.admin.admin.UsersIndex.header',
-    defaultMessage: 'Users',
-  },
   title: {
     id: 'system.admin.admin.UsersIndex.title',
     defaultMessage: 'Users',
@@ -53,7 +49,7 @@ const countWithLink = (
     return <strong>{count}</strong>;
   }
   return (
-    <Link component="button" onClick={linkCallbak}>
+    <Link onClick={linkCallbak}>
       <strong>{count}</strong>
     </Link>
   );
@@ -165,8 +161,8 @@ const UsersIndex: FC<Props> = (props) => {
 
   return (
     <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      <SummaryCard renderContent={renderSummaryContent} />
+      <SummaryCard className="mx-6 mt-6" renderContent={renderSummaryContent} />
+
       {isLoading ? (
         <LoadingIndicator />
       ) : (
diff --git a/client/app/bundles/system/admin/admin/store.ts b/client/app/bundles/system/admin/admin/store.ts
index 1db4362da19..c6eae0cccb3 100644
--- a/client/app/bundles/system/admin/admin/store.ts
+++ b/client/app/bundles/system/admin/admin/store.ts
@@ -1,7 +1,6 @@
 import { produce } from 'immer';
 import {
   AnnouncementData,
-  AnnouncementListData,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import { CourseListData, CourseStats } from 'types/system/courses';
@@ -170,7 +169,7 @@ const reducer = produce((draft: AdminState, action: AdminActionType) => {
 
 export const actions = {
   saveAnnouncementList: (
-    announcementList: AnnouncementListData[],
+    announcementList: AnnouncementData[],
     announcementPermissions: AnnouncementPermissions,
   ): SaveAnnouncementListAction => {
     return {
diff --git a/client/app/bundles/system/admin/admin/types.ts b/client/app/bundles/system/admin/admin/types.ts
index ecf14fe12f3..a7b748e8611 100644
--- a/client/app/bundles/system/admin/admin/types.ts
+++ b/client/app/bundles/system/admin/admin/types.ts
@@ -1,7 +1,6 @@
 import {
   AnnouncementData,
-  AnnouncementListData,
-  AnnouncementMiniEntity,
+  AnnouncementEntity,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import { EntityStore } from 'types/store';
@@ -33,7 +32,7 @@ export const DELETE_INSTANCE = 'system/admin/DELETE_INSTANCE';
 // Action Types
 export interface SaveAnnouncementListAction {
   type: typeof SAVE_ANNOUNCEMENT_LIST;
-  announcementList: AnnouncementListData[];
+  announcementList: AnnouncementData[];
   announcementPermissions: AnnouncementPermissions;
 }
 
@@ -104,7 +103,7 @@ export type AdminActionType =
 
 // State Types
 export interface AdminState {
-  announcements: EntityStore<AnnouncementMiniEntity>;
+  announcements: EntityStore<AnnouncementEntity>;
   courses: EntityStore<CourseMiniEntity>;
   instances: EntityStore<InstanceMiniEntity>;
   users: EntityStore<UserMiniEntity>;
diff --git a/client/app/bundles/system/admin/components/AdminNavigablePage.tsx b/client/app/bundles/system/admin/components/AdminNavigablePage.tsx
new file mode 100644
index 00000000000..c0649bbd583
--- /dev/null
+++ b/client/app/bundles/system/admin/components/AdminNavigablePage.tsx
@@ -0,0 +1,47 @@
+import { ReactElement } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Tab, Tabs } from '@mui/material';
+
+import Page from 'lib/components/core/layouts/Page';
+
+interface Path {
+  icon: ReactElement;
+  title: string;
+  path: string;
+}
+
+interface AdminNavigablePageProps {
+  paths: Path[];
+}
+
+const AdminNavigablePage = (props: AdminNavigablePageProps): JSX.Element => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <Page unpadded>
+      <Tabs
+        className="sticky top-0 z-50 bg-white border-only-b-neutral-200"
+        onChange={(_, value): void => navigate(value)}
+        value={location.pathname}
+      >
+        {props.paths.map((path) => (
+          <Tab
+            key={path.path}
+            className="min-h-0"
+            icon={path.icon}
+            iconPosition="start"
+            label={path.title}
+            value={path.path}
+          />
+        ))}
+      </Tabs>
+
+      <div className="relative">
+        <Outlet />
+      </div>
+    </Page>
+  );
+};
+
+export default AdminNavigablePage;
diff --git a/client/app/bundles/system/admin/instance/instance/InstanceAdminNavigator.tsx b/client/app/bundles/system/admin/instance/instance/InstanceAdminNavigator.tsx
new file mode 100644
index 00000000000..89c5f87c9b8
--- /dev/null
+++ b/client/app/bundles/system/admin/instance/instance/InstanceAdminNavigator.tsx
@@ -0,0 +1,82 @@
+import { defineMessages } from 'react-intl';
+import {
+  AssignmentInd,
+  AutoStories,
+  Campaign,
+  Group,
+  ListAlt,
+} from '@mui/icons-material';
+
+import AdminNavigablePage from 'bundles/system/admin/components/AdminNavigablePage';
+import { DataHandle } from 'lib/hooks/router/dynamicNest';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import { fetchInstance } from './operations';
+
+const translations = defineMessages({
+  announcements: {
+    id: 'sysstem.admin.instance.instance.InstanceAdminNavigator.announcements',
+    defaultMessage: 'Announcements',
+  },
+  users: {
+    id: 'sysstem.admin.instance.instance.InstanceAdminNavigator.users',
+    defaultMessage: 'Users',
+  },
+  courses: {
+    id: 'sysstem.admin.instance.instance.InstanceAdminNavigator.courses',
+    defaultMessage: 'Courses',
+  },
+  components: {
+    id: 'sysstem.admin.instance.instance.InstanceAdminNavigator.components',
+    defaultMessage: 'Components',
+  },
+  roleRequests: {
+    id: 'sysstem.admin.instance.instance.InstanceAdminNavigator.roleRequests',
+    defaultMessage: 'Role Requests',
+  },
+});
+
+const InstanceAdminNavigator = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <AdminNavigablePage
+      paths={[
+        {
+          icon: <Campaign />,
+          title: t(translations.announcements),
+          path: '/admin/instance/announcements',
+        },
+        {
+          icon: <Group />,
+          title: t(translations.users),
+          path: '/admin/instance/users',
+        },
+        {
+          icon: <AutoStories />,
+          title: t(translations.courses),
+          path: '/admin/instance/courses',
+        },
+        {
+          icon: <ListAlt />,
+          title: t(translations.components),
+          path: '/admin/instance/components',
+        },
+        {
+          icon: <AssignmentInd />,
+          title: t(translations.roleRequests),
+          path: '/admin/instance/role_requests',
+        },
+      ]}
+    />
+  );
+};
+
+const handle: DataHandle = () => ({
+  getData: async (): Promise<string> => {
+    const data = await fetchInstance();
+    return `${data.name} Admin Panel`;
+  },
+});
+
+export default Object.assign(InstanceAdminNavigator, { handle });
diff --git a/client/app/bundles/system/admin/instance/instance/components/navigation/InstanceAdminSidebar.tsx b/client/app/bundles/system/admin/instance/instance/components/navigation/InstanceAdminSidebar.tsx
deleted file mode 100644
index 9e35a77ef91..00000000000
--- a/client/app/bundles/system/admin/instance/instance/components/navigation/InstanceAdminSidebar.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { FC } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
-import {
-  AssignmentInd,
-  AutoStories,
-  Campaign,
-  Group,
-  KeyboardDoubleArrowLeft,
-  KeyboardDoubleArrowRight,
-  ListAlt,
-} from '@mui/icons-material';
-import {
-  Grid,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Tooltip,
-} from '@mui/material';
-import { grey } from '@mui/material/colors';
-
-import Sidebar from 'lib/components/navigation/Sidebar';
-
-interface Props extends WrappedComponentProps {
-  isExpanded: boolean;
-  handleExpand: (forceExpand?: boolean) => void;
-}
-
-const translations = defineMessages({
-  announcements: {
-    id: 'sysstem.admin.instance.instance.InstanceAdminSidebar.announcements',
-    defaultMessage: 'Announcements',
-  },
-  users: {
-    id: 'sysstem.admin.instance.instance.InstanceAdminSidebar.users',
-    defaultMessage: 'Users',
-  },
-  courses: {
-    id: 'sysstem.admin.instance.instance.InstanceAdminSidebar.courses',
-    defaultMessage: 'Courses',
-  },
-  components: {
-    id: 'sysstem.admin.instance.instance.InstanceAdminSidebar.components',
-    defaultMessage: 'Components',
-  },
-  roleRequests: {
-    id: 'sysstem.admin.instance.instance.InstanceAdminSidebar.roleRequests',
-    defaultMessage: 'Role Requests',
-  },
-  collapseSidebar: {
-    id: 'sysstem.admin.instance.instance.InstanceAdminSidebar.collapse',
-    defaultMessage: 'Collapse Sidebar',
-  },
-  expandSidebar: {
-    id: 'sysstem.admin.instance.instance.InstanceAdminSidebar.expand',
-    defaultMessage: 'Expand Sidebar',
-  },
-});
-
-interface ListItemLinkProps {
-  primary: string;
-  to: string;
-  icon: JSX.Element;
-  expanded: boolean;
-  callback: () => void;
-}
-
-const ListItemLink = (props: ListItemLinkProps): JSX.Element => {
-  const { primary, to, icon, expanded, callback } = props;
-
-  const renderIcon = (): JSX.Element => {
-    if (expanded) {
-      return <ListItemIcon sx={{ minWidth: '32px' }}>{icon}</ListItemIcon>;
-    }
-    return (
-      <Tooltip placement="right" title={primary}>
-        <ListItemIcon sx={{ minWidth: '32px' }}>{icon}</ListItemIcon>
-      </Tooltip>
-    );
-  };
-
-  const textStyle = expanded ? { display: 'block' } : { display: 'none' };
-
-  return (
-    <li>
-      <ListItem
-        button
-        component={Link}
-        disablePadding
-        onClick={callback}
-        style={{
-          border: 'none',
-          outline: 'none',
-          textDecoration: 'none',
-          padding: '4px 16px',
-        }}
-        to={to}
-      >
-        {renderIcon()}
-        <ListItemText primary={primary} sx={textStyle} />
-      </ListItem>
-    </li>
-  );
-};
-
-const InstanceAdminSidebar: FC<Props> = (props) => {
-  const { isExpanded, handleExpand, intl } = props;
-
-  const renderDrawer = (isDrawerOpen, handleDrawerToggle): JSX.Element => {
-    const handleExpandClick = (): void => {
-      if (isDrawerOpen) {
-        handleDrawerToggle();
-      } else {
-        handleExpand();
-      }
-    };
-
-    const handleListItemClick = (): void => {
-      if (isDrawerOpen) {
-        handleDrawerToggle();
-      }
-    };
-
-    const backgroundColor = isDrawerOpen ? 'white' : grey[100];
-
-    return (
-      <Grid
-        container
-        flexDirection="column"
-        justifyContent="space-between"
-        style={{ height: '100vh', backgroundColor }}
-      >
-        <Grid item>
-          <List style={{ marginTop: '60px' }}>
-            <ListItem button onClick={handleExpandClick}>
-              <ListItemIcon sx={{ minWidth: '32px' }}>
-                {isExpanded ? (
-                  <KeyboardDoubleArrowLeft />
-                ) : (
-                  <Tooltip
-                    placement="right"
-                    title={intl.formatMessage(translations.expandSidebar)}
-                  >
-                    <KeyboardDoubleArrowRight />
-                  </Tooltip>
-                )}
-              </ListItemIcon>
-              {isExpanded && (
-                <ListItemText
-                  primary={intl.formatMessage(translations.collapseSidebar)}
-                />
-              )}
-            </ListItem>
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<Campaign />}
-              primary={intl.formatMessage(translations.announcements)}
-              to="/admin/instance/announcements"
-            />
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<Group />}
-              primary={intl.formatMessage(translations.users)}
-              to="/admin/instance/users"
-            />
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<AutoStories />}
-              primary={intl.formatMessage(translations.courses)}
-              to="/admin/instance/courses"
-            />
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<ListAlt />}
-              primary={intl.formatMessage(translations.components)}
-              to="/admin/instance/components"
-            />
-            <ListItemLink
-              callback={handleListItemClick}
-              expanded={isExpanded}
-              icon={<AssignmentInd />}
-              primary={intl.formatMessage(translations.roleRequests)}
-              to="/admin/instance/role_requests"
-            />
-          </List>
-        </Grid>
-      </Grid>
-    );
-  };
-
-  return (
-    <Sidebar
-      handleExpand={handleExpand}
-      renderDrawer={(isDrawerOpen, handleDrawerToggle): JSX.Element =>
-        renderDrawer(isDrawerOpen, handleDrawerToggle)
-      }
-    />
-  );
-};
-
-export default injectIntl(InstanceAdminSidebar);
diff --git a/client/app/bundles/system/admin/instance/instance/components/navigation/InstanceUsersTabs.tsx b/client/app/bundles/system/admin/instance/instance/components/navigation/InstanceUsersTabs.tsx
index 03aefbed298..98470822613 100644
--- a/client/app/bundles/system/admin/instance/instance/components/navigation/InstanceUsersTabs.tsx
+++ b/client/app/bundles/system/admin/instance/instance/components/navigation/InstanceUsersTabs.tsx
@@ -1,8 +1,9 @@
 import { FC, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { Box, Tab, Tabs } from '@mui/material';
 
+import Link from 'lib/components/core/Link';
+
 interface Props extends WrappedComponentProps {
   currentTab: string;
 }
diff --git a/client/app/bundles/system/admin/instance/instance/components/tables/UsersTable.tsx b/client/app/bundles/system/admin/instance/instance/components/tables/UsersTable.tsx
index dda06fcc3da..2c4e1328a5a 100644
--- a/client/app/bundles/system/admin/instance/instance/components/tables/UsersTable.tsx
+++ b/client/app/bundles/system/admin/instance/instance/components/tables/UsersTable.tsx
@@ -20,6 +20,7 @@ import {
 } from 'types/system/instance/users';
 
 import DataTable from 'lib/components/core/layouts/DataTable';
+import Link from 'lib/components/core/Link';
 import {
   DEFAULT_TABLE_ROWS_PER_PAGE,
   FIELD_DEBOUNCE_DELAY_MS,
@@ -264,19 +265,15 @@ const UsersTable: FC<Props> = (props) => {
         customBodyRenderLite: (dataIndex): JSX.Element => {
           const user = users[dataIndex];
           return (
-            <Typography
+            <Link
               key={`courses-${user.id}`}
               className="user_courses"
-              variant="body2"
+              opensInNewTab
+              to={`/users/${user.userId}`}
+              underline="hover"
             >
-              <a
-                href={`/users/${user.userId}`}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                {user.courses}
-              </a>
-            </Typography>
+              {user.courses}
+            </Link>
           );
         },
       },
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceAdminIndex/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceAdminIndex/index.tsx
deleted file mode 100644
index ba4a0754a3c..00000000000
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceAdminIndex/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FC, useEffect, useState } from 'react';
-
-import PageHeader from 'lib/components/navigation/PageHeader';
-
-import { fetchInstance } from '../../operations';
-
-const InstanceAdminIndex: FC<unknown> = () => {
-  const [instanceName, setInstanceName] = useState('Default');
-
-  useEffect(() => {
-    fetchInstance().then((response) => setInstanceName(response.name));
-  }, []);
-
-  return <PageHeader title={instanceName} />;
-};
-
-export default InstanceAdminIndex;
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceAdminNavigator/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceAdminNavigator/index.tsx
deleted file mode 100644
index 8a05c8aaf76..00000000000
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceAdminNavigator/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import AppLayout from 'lib/components/core/layouts/AppLayout';
-
-import InstanceAdminSidebar from '../../components/navigation/InstanceAdminSidebar';
-
-const InstanceAdminNavigator = (): JSX.Element => (
-  <AppLayout
-    renderSidebar={(isExpanded, handleExpand): JSX.Element => (
-      <InstanceAdminSidebar
-        handleExpand={handleExpand}
-        isExpanded={isExpanded}
-      />
-    )}
-  />
-);
-
-export default InstanceAdminNavigator;
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex.tsx
similarity index 75%
rename from client/app/bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex/index.tsx
rename to client/app/bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex.tsx
index f6544523f3d..c870fa5df8d 100644
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex/index.tsx
+++ b/client/app/bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex.tsx
@@ -1,13 +1,13 @@
-import { FC, ReactElement, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
+import { Button } from '@mui/material';
 
 import AnnouncementsDisplay from 'bundles/course/announcements/components/misc/AnnouncementsDisplay';
 import AnnouncementNew from 'bundles/course/announcements/pages/AnnouncementNew';
-import AddButton from 'lib/components/core/buttons/AddButton';
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
 import {
@@ -15,11 +15,11 @@ import {
   deleteAnnouncement,
   indexAnnouncements,
   updateAnnouncement,
-} from '../../operations';
+} from '../operations';
 import {
   getAllAnnouncementMiniEntities,
   getAnnouncementPermission,
-} from '../../selectors';
+} from '../selectors';
 
 type Props = WrappedComponentProps;
 
@@ -46,7 +46,7 @@ const InstanceAnnouncementsIndex: FC<Props> = (props) => {
   const { intl } = props;
   const [isLoading, setIsLoading] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
-  const headerToolbars: ReactElement[] = [];
+
   const announcements = useAppSelector(getAllAnnouncementMiniEntities);
   const announcementPermission = useAppSelector(getAnnouncementPermission);
   const dispatch = useAppDispatch();
@@ -59,22 +59,21 @@ const InstanceAnnouncementsIndex: FC<Props> = (props) => {
       .finally(() => setIsLoading(false));
   }, [dispatch]);
 
-  if (announcementPermission) {
-    headerToolbars.push(
-      <AddButton
-        key="new-announcement-button"
-        className="text-white"
-        id="new-announcement-button"
-        onClick={(): void => {
-          setIsOpen(true);
-        }}
-        tooltip={intl.formatMessage(translations.newAnnouncement)}
-      />,
-    );
-  }
+  if (isLoading) return <LoadingIndicator />;
+
+  return (
+    <Page>
+      {announcementPermission && (
+        <Button
+          key="new-announcement-button"
+          id="new-announcement-button"
+          onClick={(): void => setIsOpen(true)}
+          variant="outlined"
+        >
+          {intl.formatMessage(translations.newAnnouncement)}
+        </Button>
+      )}
 
-  const renderBody: JSX.Element = (
-    <>
       {announcements.length === 0 ? (
         <Note message={intl.formatMessage(translations.noAnnouncements)} />
       ) : (
@@ -86,23 +85,14 @@ const InstanceAnnouncementsIndex: FC<Props> = (props) => {
           updateOperation={updateAnnouncement}
         />
       )}
+
       <AnnouncementNew
         canSticky={false}
         createOperation={createAnnouncement}
         onClose={(): void => setIsOpen(false)}
         open={isOpen}
       />
-    </>
-  );
-
-  return (
-    <>
-      <PageHeader
-        title={intl.formatMessage(translations.header)}
-        toolbars={headerToolbars}
-      />
-      {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
+    </Page>
   );
 };
 
diff --git a/client/app/bundles/system/admin/instance/instance/components/forms/InstanceComponentsForm.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceComponentsIndex.tsx
similarity index 94%
rename from client/app/bundles/system/admin/instance/instance/components/forms/InstanceComponentsForm.tsx
rename to client/app/bundles/system/admin/instance/instance/pages/InstanceComponentsIndex.tsx
index ef2e6937b67..28ab532db30 100644
--- a/client/app/bundles/system/admin/instance/instance/components/forms/InstanceComponentsForm.tsx
+++ b/client/app/bundles/system/admin/instance/instance/pages/InstanceComponentsIndex.tsx
@@ -14,7 +14,7 @@ import { ComponentData } from 'types/system/instance/components';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import tableTranslations from 'lib/translations/table';
 
-import { indexComponents, updateComponents } from '../../operations';
+import { indexComponents, updateComponents } from '../operations';
 
 type Props = WrappedComponentProps;
 
@@ -33,7 +33,7 @@ const translations = defineMessages({
   },
 });
 
-const InstanceComponentsForm: FC<Props> = (props) => {
+const InstanceComponentsIndex: FC<Props> = (props) => {
   const { intl } = props;
   const [isLoading, setIsLoading] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
@@ -97,4 +97,4 @@ const InstanceComponentsForm: FC<Props> = (props) => {
   );
 };
 
-export default injectIntl(InstanceComponentsForm);
+export default injectIntl(InstanceComponentsIndex);
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceComponentsIndex/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceComponentsIndex/index.tsx
deleted file mode 100644
index 27ef62a02fc..00000000000
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceComponentsIndex/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { FC } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-
-import PageHeader from 'lib/components/navigation/PageHeader';
-
-import InstanceComponentsForm from '../../components/forms/InstanceComponentsForm';
-
-type Props = WrappedComponentProps;
-
-const translations = defineMessages({
-  header: {
-    id: 'system.admin.instance.instance.InstanceComponentsIndex.header',
-    defaultMessage: 'Components',
-  },
-});
-
-const InstanceAdminIndex: FC<Props> = (props) => {
-  const { intl } = props;
-
-  return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      <InstanceComponentsForm />
-    </>
-  );
-};
-
-export default injectIntl(InstanceAdminIndex);
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceCoursesIndex/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceCoursesIndex.tsx
similarity index 84%
rename from client/app/bundles/system/admin/instance/instance/pages/InstanceCoursesIndex/index.tsx
rename to client/app/bundles/system/admin/instance/instance/pages/InstanceCoursesIndex.tsx
index 49a68e0f25d..25eb256107b 100644
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceCoursesIndex/index.tsx
+++ b/client/app/bundles/system/admin/instance/instance/pages/InstanceCoursesIndex.tsx
@@ -1,18 +1,18 @@
 import { FC, useEffect, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
-import { Link, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
 import CoursesButtons from 'bundles/system/admin/admin/components/buttons/CoursesButtons';
 import CoursesTable from 'bundles/system/admin/admin/components/tables/CoursesTable';
 import SummaryCard from 'lib/components/core/layouts/SummaryCard';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
-import { deleteCourse, indexCourses } from '../../operations';
-import { getAdminCounts, getAllCourseMiniEntities } from '../../selectors';
+import { deleteCourse, indexCourses } from '../operations';
+import { getAdminCounts, getAllCourseMiniEntities } from '../selectors';
 
 type Props = WrappedComponentProps;
 
@@ -48,10 +48,7 @@ const CoursesIndex: FC<Props> = (props) => {
   const dispatch = useAppDispatch();
   const totalCount =
     filter.active && courseCounts.totalCourses !== 0 ? (
-      <Link
-        component="button"
-        onClick={(): void => setFilter({ active: false })}
-      >
+      <Link onClick={(): void => setFilter({ active: false })}>
         <strong>{courseCounts.totalCourses}</strong>
       </Link>
     ) : (
@@ -60,10 +57,7 @@ const CoursesIndex: FC<Props> = (props) => {
 
   const activeCount =
     !filter.active && courseCounts.activeCourses !== 0 ? (
-      <Link
-        component="button"
-        onClick={(): void => setFilter({ active: true })}
-      >
+      <Link onClick={(): void => setFilter({ active: true })}>
         <strong>{courseCounts.activeCourses}</strong>
       </Link>
     ) : (
@@ -97,13 +91,13 @@ const CoursesIndex: FC<Props> = (props) => {
 
   return (
     <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      <SummaryCard renderContent={renderSummaryContent} />
+      <SummaryCard className="mx-6 mt-6" renderContent={renderSummaryContent} />
 
       {isLoading ? (
         <LoadingIndicator />
       ) : (
         <CoursesTable
+          className="border-none"
           courses={courses}
           renderRowActionComponent={(course): JSX.Element => (
             <CoursesButtons course={course} deleteOperation={deleteCourse} />
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex.tsx
similarity index 63%
rename from client/app/bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex/index.tsx
rename to client/app/bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex.tsx
index ec1f18aa24e..734789853f1 100644
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex/index.tsx
+++ b/client/app/bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex.tsx
@@ -3,13 +3,12 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
-import PendingRoleRequestsButtons from '../../components/buttons/PendingRoleRequestsButtons';
-import InstanceUserRoleRequestsTable from '../../components/tables/InstanceUserRoleRequestsTable';
-import { fetchRoleRequests } from '../../operations';
-import { getAllRoleRequestsMiniEntities } from '../../selectors';
+import PendingRoleRequestsButtons from '../components/buttons/PendingRoleRequestsButtons';
+import InstanceUserRoleRequestsTable from '../components/tables/InstanceUserRoleRequestsTable';
+import { fetchRoleRequests } from '../operations';
+import { getAllRoleRequestsMiniEntities } from '../selectors';
 
 type Props = WrappedComponentProps;
 
@@ -68,33 +67,28 @@ const InstanceUserRoleRequestsIndex: FC<Props> = (props) => {
       );
   }, [dispatch]);
 
+  if (isLoading) return <LoadingIndicator />;
+
   return (
     <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      {isLoading ? (
-        <LoadingIndicator />
-      ) : (
-        <>
-          <InstanceUserRoleRequestsTable
-            pendingRoleRequests
-            renderRowActionComponent={(roleRequest): JSX.Element => (
-              <PendingRoleRequestsButtons roleRequest={roleRequest} />
-            )}
-            roleRequests={pendingRoleRequests}
-            title={intl.formatMessage(translations.pending)}
-          />
-          <InstanceUserRoleRequestsTable
-            approvedRoleRequests
-            roleRequests={approvedRoleRequests}
-            title={intl.formatMessage(translations.approved)}
-          />
-          <InstanceUserRoleRequestsTable
-            rejectedRoleRequests
-            roleRequests={rejectedRoleRequests}
-            title={intl.formatMessage(translations.rejected)}
-          />
-        </>
-      )}
+      <InstanceUserRoleRequestsTable
+        pendingRoleRequests
+        renderRowActionComponent={(roleRequest): JSX.Element => (
+          <PendingRoleRequestsButtons roleRequest={roleRequest} />
+        )}
+        roleRequests={pendingRoleRequests}
+        title={intl.formatMessage(translations.pending)}
+      />
+      <InstanceUserRoleRequestsTable
+        approvedRoleRequests
+        roleRequests={approvedRoleRequests}
+        title={intl.formatMessage(translations.approved)}
+      />
+      <InstanceUserRoleRequestsTable
+        rejectedRoleRequests
+        roleRequests={rejectedRoleRequests}
+        title={intl.formatMessage(translations.rejected)}
+      />
     </>
   );
 };
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersIndex/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersIndex.tsx
similarity index 91%
rename from client/app/bundles/system/admin/instance/instance/pages/InstanceUsersIndex/index.tsx
rename to client/app/bundles/system/admin/instance/instance/pages/InstanceUsersIndex.tsx
index 807ad884dfc..8725c0920e6 100644
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersIndex/index.tsx
+++ b/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersIndex.tsx
@@ -1,19 +1,19 @@
 import { FC, useEffect, useMemo, useState } from 'react';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
-import { Link, Typography } from '@mui/material';
+import { Typography } from '@mui/material';
 
 import SummaryCard from 'lib/components/core/layouts/SummaryCard';
+import Link from 'lib/components/core/Link';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { DEFAULT_TABLE_ROWS_PER_PAGE } from 'lib/constants/sharedConstants';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
-import UsersButtons from '../../components/buttons/UsersButtons';
-import InstanceUsersTabs from '../../components/navigation/InstanceUsersTabs';
-import UsersTable from '../../components/tables/UsersTable';
-import { indexUsers } from '../../operations';
-import { getAdminCounts, getAllUserMiniEntities } from '../../selectors';
+import UsersButtons from '../components/buttons/UsersButtons';
+import InstanceUsersTabs from '../components/navigation/InstanceUsersTabs';
+import UsersTable from '../components/tables/UsersTable';
+import { indexUsers } from '../operations';
+import { getAdminCounts, getAllUserMiniEntities } from '../selectors';
 
 type Props = WrappedComponentProps;
 
@@ -54,7 +54,7 @@ const countWithLink = (
     return <strong>{count}</strong>;
   }
   return (
-    <Link component="button" onClick={linkCallbak}>
+    <Link onClick={linkCallbak}>
       <strong>{count}</strong>
     </Link>
   );
@@ -189,7 +189,6 @@ const UsersIndex: FC<Props> = (props) => {
 
   return (
     <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
       <InstanceUsersTabs currentTab="instance-users-tab" />
       <SummaryCard renderContent={renderSummaryContent} />
 
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvitations/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvitations.tsx
similarity index 79%
rename from client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvitations/index.tsx
rename to client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvitations.tsx
index 4a305d83910..f88b319b043 100644
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvitations/index.tsx
+++ b/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvitations.tsx
@@ -3,14 +3,13 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { toast } from 'react-toastify';
 
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import PageHeader from 'lib/components/navigation/PageHeader';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/store';
 
-import PendingInvitationsButtons from '../../components/buttons/PendingInvitationsButtons';
-import InstanceUsersTabs from '../../components/navigation/InstanceUsersTabs';
-import UserInvitationsTable from '../../components/tables/UserInvitationsTable';
-import { fetchInvitations } from '../../operations';
-import { getAllInvitationMiniEntities } from '../../selectors';
+import PendingInvitationsButtons from '../components/buttons/PendingInvitationsButtons';
+import InstanceUsersTabs from '../components/navigation/InstanceUsersTabs';
+import UserInvitationsTable from '../components/tables/UserInvitationsTable';
+import { fetchInvitations } from '../operations';
+import { getAllInvitationMiniEntities } from '../selectors';
 
 type Props = WrappedComponentProps;
 
@@ -58,7 +57,9 @@ const InstanceUsersInvitations: FC<Props> = (props) => {
       .catch(() => toast.error(intl.formatMessage(translations.failure)));
   }, [dispatch]);
 
-  const renderBody: JSX.Element = (
+  if (isLoading) return <LoadingIndicator />;
+
+  return (
     <>
       <InstanceUsersTabs currentTab="invitations-tab" />
       <UserInvitationsTable
@@ -76,13 +77,6 @@ const InstanceUsersInvitations: FC<Props> = (props) => {
       />
     </>
   );
-
-  return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      {isLoading ? <LoadingIndicator /> : renderBody}
-    </>
-  );
 };
 
 export default injectIntl(InstanceUsersInvitations);
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvite.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvite.tsx
new file mode 100644
index 00000000000..bde0a0aeab7
--- /dev/null
+++ b/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvite.tsx
@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { InvitationResult } from 'types/system/instance/invitations';
+
+import IndividualInviteForm from '../components/forms/IndividualInviteForm';
+import InvitationResultDialog from '../components/misc/InvitationResultDialog';
+import InstanceUsersTabs from '../components/navigation/InstanceUsersTabs';
+
+const InstanceUsersInvite = (): JSX.Element => {
+  const [showInvitationResultDialog, setShowInvitationResultDialog] =
+    useState(false);
+  const [invitationResult, setInvitationResult] = useState({});
+
+  const openResultDialog = (result: InvitationResult): void => {
+    setInvitationResult(result);
+    setShowInvitationResultDialog(true);
+  };
+
+  return (
+    <>
+      <InstanceUsersTabs currentTab="invite-users-tab" />
+      <IndividualInviteForm openResultDialog={openResultDialog} />
+      {showInvitationResultDialog && (
+        <InvitationResultDialog
+          handleClose={(): void => setShowInvitationResultDialog(false)}
+          invitationResult={invitationResult}
+        />
+      )}
+    </>
+  );
+};
+
+export default InstanceUsersInvite;
diff --git a/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvite/index.tsx b/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvite/index.tsx
deleted file mode 100644
index aaf8f0b6408..00000000000
--- a/client/app/bundles/system/admin/instance/instance/pages/InstanceUsersInvite/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { FC, useState } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { InvitationResult } from 'types/system/instance/invitations';
-
-import PageHeader from 'lib/components/navigation/PageHeader';
-
-import IndividualInviteForm from '../../components/forms/IndividualInviteForm';
-import InvitationResultDialog from '../../components/misc/InvitationResultDialog';
-import InstanceUsersTabs from '../../components/navigation/InstanceUsersTabs';
-
-type Props = WrappedComponentProps;
-
-const translations = defineMessages({
-  header: {
-    id: 'system.admin.instance.instance.InstanceUsersInvite.header',
-    defaultMessage: 'Invite Users',
-  },
-  title: {
-    id: 'system.admin.instance.instance.InstanceUsersInvite.title',
-    defaultMessage: 'Users',
-  },
-  fetchUsersFailure: {
-    id: 'system.admin.instance.instance.InstanceUsersInvite.fetchUsersFailure',
-    defaultMessage: 'Failed to fetch users.',
-  },
-  totalUsers: {
-    id: 'system.admin.instance.instance.InstanceUsersInvite.totalUsers',
-    defaultMessage:
-      'Total Users: {allCount} ({adminCount} Administrators' +
-      ', {instructorCount} Instructors, {normalCount} Normal)',
-  },
-  activeUsers: {
-    id: 'system.admin.instance.instance.InstanceUsersInvite.activeUsers',
-    defaultMessage:
-      'Active Users: {allCount} ({adminCount} Administrators' +
-      ', {instructorCount} Instructors, {normalCount} Normal){br}' +
-      '(active in the past 7 days)',
-  },
-});
-
-const InstanceUsersInvite: FC<Props> = (props) => {
-  const { intl } = props;
-  const [showInvitationResultDialog, setShowInvitationResultDialog] =
-    useState(false);
-  const [invitationResult, setInvitationResult] = useState({});
-
-  const openResultDialog = (result: InvitationResult): void => {
-    setInvitationResult(result);
-    setShowInvitationResultDialog(true);
-  };
-
-  return (
-    <>
-      <PageHeader title={intl.formatMessage(translations.header)} />
-      <InstanceUsersTabs currentTab="invite-users-tab" />
-      <IndividualInviteForm openResultDialog={openResultDialog} />
-      {showInvitationResultDialog && (
-        <InvitationResultDialog
-          handleClose={(): void => setShowInvitationResultDialog(false)}
-          invitationResult={invitationResult}
-        />
-      )}
-    </>
-  );
-};
-
-export default injectIntl(InstanceUsersInvite);
diff --git a/client/app/bundles/system/admin/instance/instance/store.ts b/client/app/bundles/system/admin/instance/instance/store.ts
index 63f953b2cbf..a2860ba3d6c 100644
--- a/client/app/bundles/system/admin/instance/instance/store.ts
+++ b/client/app/bundles/system/admin/instance/instance/store.ts
@@ -1,7 +1,6 @@
 import { produce } from 'immer';
 import {
   AnnouncementData,
-  AnnouncementListData,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import { CourseListData, CourseStats } from 'types/system/courses';
@@ -194,7 +193,7 @@ const reducer = produce(
 
 export const actions = {
   saveAnnouncementList: (
-    announcementList: AnnouncementListData[],
+    announcementList: AnnouncementData[],
     announcementPermissions: AnnouncementPermissions,
   ): SaveAnnouncementListAction => {
     return {
diff --git a/client/app/bundles/system/admin/instance/instance/types.ts b/client/app/bundles/system/admin/instance/instance/types.ts
index e1438d2a282..6305654a83d 100644
--- a/client/app/bundles/system/admin/instance/instance/types.ts
+++ b/client/app/bundles/system/admin/instance/instance/types.ts
@@ -1,7 +1,6 @@
 import {
   AnnouncementData,
-  AnnouncementListData,
-  AnnouncementMiniEntity,
+  AnnouncementEntity,
   AnnouncementPermissions,
 } from 'types/course/announcements';
 import { EntityStore } from 'types/store';
@@ -43,7 +42,7 @@ export const DELETE_INVITATION = 'system/instance/DELETE_INVITATION';
 // Action Types
 export interface SaveAnnouncementListAction {
   type: typeof SAVE_ANNOUNCEMENT_LIST;
-  announcementList: AnnouncementListData[];
+  announcementList: AnnouncementData[];
   announcementPermissions: AnnouncementPermissions;
 }
 
@@ -124,7 +123,7 @@ export type InstanceAdminActionType =
 
 // State Types
 export interface InstanceAdminState {
-  announcements: EntityStore<AnnouncementMiniEntity>;
+  announcements: EntityStore<AnnouncementEntity>;
   courses: EntityStore<CourseMiniEntity>;
   roleRequests: EntityStore<RoleRequestMiniEntity>;
   users: EntityStore<InstanceUserMiniEntity>;
diff --git a/client/app/bundles/user/AccountSettings/index.tsx b/client/app/bundles/user/AccountSettings/index.tsx
index 323ab3713e0..49662afb936 100644
--- a/client/app/bundles/user/AccountSettings/index.tsx
+++ b/client/app/bundles/user/AccountSettings/index.tsx
@@ -3,6 +3,7 @@ import { toast } from 'react-toastify';
 import { TimeZones } from 'types/course/admin/course';
 import { EmailData } from 'types/users';
 
+import Page from 'lib/components/core/layouts/Page';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import { FormEmitter } from 'lib/components/form/Form';
 import Preload from 'lib/components/wrappers/Preload';
@@ -152,27 +153,31 @@ const AccountSettings = (): JSX.Element => {
   };
 
   return (
-    <Preload
-      render={<LoadingIndicator />}
-      syncsWith={[reloadForm]}
-      while={fetchAccountSettingsAndTimeZones}
-    >
-      {([settings, timeZones]): JSX.Element => (
-        <AccountSettingsForm
-          disabled={submitting}
-          emitsVia={setForm}
-          onAddEmail={handleAddEmail}
-          onRemoveEmail={handleRemoveEmail}
-          onResendConfirmationEmail={handleResendConfirmationEmail}
-          onSetEmailAsPrimary={handleSetEmailAsPrimary}
-          onSubmit={handleUpdateAccountSettings}
-          onUpdateProfilePicture={handleUploadProfilePicture}
-          settings={settings}
-          timeZones={timeZones}
-        />
-      )}
-    </Preload>
+    <Page>
+      <Preload
+        render={<LoadingIndicator />}
+        syncsWith={[reloadForm]}
+        while={fetchAccountSettingsAndTimeZones}
+      >
+        {([settings, timeZones]): JSX.Element => (
+          <AccountSettingsForm
+            disabled={submitting}
+            emitsVia={setForm}
+            onAddEmail={handleAddEmail}
+            onRemoveEmail={handleRemoveEmail}
+            onResendConfirmationEmail={handleResendConfirmationEmail}
+            onSetEmailAsPrimary={handleSetEmailAsPrimary}
+            onSubmit={handleUpdateAccountSettings}
+            onUpdateProfilePicture={handleUploadProfilePicture}
+            settings={settings}
+            timeZones={timeZones}
+          />
+        )}
+      </Preload>
+    </Page>
   );
 };
 
-export default AccountSettings;
+const handle = translations.accountSettings;
+
+export default Object.assign(AccountSettings, { handle });
diff --git a/client/app/bundles/user/translations.ts b/client/app/bundles/user/translations.ts
index a663db7c56a..03676a40ce1 100644
--- a/client/app/bundles/user/translations.ts
+++ b/client/app/bundles/user/translations.ts
@@ -189,4 +189,8 @@ export default defineMessages({
     id: 'user.emailMustConfirm',
     defaultMessage: 'You must confirm this email before you can use it.',
   },
+  accountSettings: {
+    id: 'user.accountSettings',
+    defaultMessage: 'Account Settings',
+  },
 });
diff --git a/client/app/bundles/users/components/tables/CoursesTable.tsx b/client/app/bundles/users/components/tables/CoursesTable.tsx
index 7b282880b57..37dc18e610f 100644
--- a/client/app/bundles/users/components/tables/CoursesTable.tsx
+++ b/client/app/bundles/users/components/tables/CoursesTable.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mui/material';
 import { UserCourseMiniEntity } from 'types/users';
 
+import Link from 'lib/components/core/Link';
 import { COURSE_USER_ROLES } from 'lib/constants/sharedConstants';
 import tableTranslations from 'lib/translations/table';
 
@@ -50,23 +51,23 @@ const CoursesTable: FC<Props> = ({ title, courses, intl }: Props) => {
               </TableCell>
               <TableCell style={{ maxWidth: '400px' }}>
                 <Typography className="course_title" variant="body2">
-                  <a
+                  <Link
                     href={`/courses/${course.id}`}
-                    rel="noopener noreferrer"
-                    target="_blank"
+                    opensInNewTab
+                    underline="hover"
                   >
                     {course.title}
-                  </a>
+                  </Link>
                 </Typography>
               </TableCell>
               <TableCell>
-                <a
+                <Link
                   href={`/users/${course.courseUserId}`}
-                  rel="noopener noreferrer"
-                  target="_blank"
+                  opensInNewTab
+                  underline="hover"
                 >
                   {course.courseUserName}
-                </a>
+                </Link>
               </TableCell>
               <TableCell style={{ maxWidth: '100px' }}>
                 {COURSE_USER_ROLES[course.courseUserRole]}
diff --git a/client/app/bundles/users/components/tables/InstancesTable.tsx b/client/app/bundles/users/components/tables/InstancesTable.tsx
index 3920a752a99..6a06678eca5 100644
--- a/client/app/bundles/users/components/tables/InstancesTable.tsx
+++ b/client/app/bundles/users/components/tables/InstancesTable.tsx
@@ -12,6 +12,7 @@ import {
 } from '@mui/material';
 import { InstanceBasicMiniEntity } from 'types/system/instances';
 
+import Link from 'lib/components/core/Link';
 import tableTranslations from 'lib/translations/table';
 
 interface Props extends WrappedComponentProps {
@@ -38,13 +39,12 @@ const InstancesTable: FC<Props> = ({ title, instances, intl }: Props) => {
             <TableRow key={`instance-${instance.id}`} hover>
               <TableCell>
                 <Typography className="instance_title" variant="body2">
-                  <a
+                  <Link
                     href={`//${instance.host}/users/${userId}`}
-                    rel="noopener noreferrer"
-                    target="_blank"
+                    opensInNewTab
                   >
                     {instance.name}
-                  </a>
+                  </Link>
                 </Typography>
               </TableCell>
             </TableRow>
diff --git a/client/app/bundles/users/operations.ts b/client/app/bundles/users/operations.ts
index 0968eb163a8..f4925dc9798 100644
--- a/client/app/bundles/users/operations.ts
+++ b/client/app/bundles/users/operations.ts
@@ -4,7 +4,6 @@ import GlobalAPI from 'api';
 
 import { actions } from './store';
 
-// eslint-disable-next-line import/prefer-default-export
 export function fetchUser(userId: number): Operation {
   return async (dispatch) =>
     GlobalAPI.users.fetch(userId).then((response) => {
diff --git a/client/app/declaration.d.ts b/client/app/declaration.d.ts
index 3caea9de3db..ab4d756a463 100644
--- a/client/app/declaration.d.ts
+++ b/client/app/declaration.d.ts
@@ -14,3 +14,8 @@ declare module '*.svg?url' {
   const svg: string;
   export default svg;
 }
+
+declare const FIRST_BUILD_YEAR: string;
+declare const LATEST_BUILD_YEAR: string;
+declare const LATEST_BUILD_TIME: string;
+declare const LATEST_COMMIT_HEAD_SHA: string;
diff --git a/client/app/lib/components/core/DescriptionCard.tsx b/client/app/lib/components/core/DescriptionCard.tsx
index 132253b3e63..b856e95d099 100644
--- a/client/app/lib/components/core/DescriptionCard.tsx
+++ b/client/app/lib/components/core/DescriptionCard.tsx
@@ -1,16 +1,29 @@
 import { FC } from 'react';
+import { defineMessages } from 'react-intl';
 import { Card, CardContent, CardHeader, Typography } from '@mui/material';
 
+import useTranslation from 'lib/hooks/useTranslation';
+
 interface Props {
   description: string;
 }
 
+const translations = defineMessages({
+  description: {
+    id: 'lib.components.core.DescriptionCard.description',
+    defaultMessage: 'Description',
+  },
+});
+
 const DescriptionCard: FC<Props> = (props) => {
   const { description } = props;
 
+  const { t } = useTranslation();
+
   return (
-    <Card className="mt-6">
-      <CardHeader title="Description" />
+    <Card className="mt-6" variant="outlined">
+      <CardHeader title={t(translations.description)} />
+
       <CardContent>
         <section className="rounded-lg bg-neutral-100 p-4">
           <Typography
diff --git a/client/app/lib/components/core/Link.tsx b/client/app/lib/components/core/Link.tsx
index 926b8767e89..b9efd93ab87 100644
--- a/client/app/lib/components/core/Link.tsx
+++ b/client/app/lib/components/core/Link.tsx
@@ -1,14 +1,19 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, forwardRef } from 'react';
+import { Link as ReactRouterLink } from 'react-router-dom';
 import { ArrowOutward } from '@mui/icons-material';
 import { Link as MuiLink, Typography } from '@mui/material';
 
 interface LinkProps extends ComponentProps<typeof MuiLink> {
+  to?: string | null | boolean;
+  reloads?: boolean;
   opensInNewTab?: boolean;
   external?: boolean;
 }
 
-const Link = (props: LinkProps): JSX.Element => {
-  const { opensInNewTab, external, ...linkProps } = props;
+type LinkRef = HTMLAnchorElement;
+
+const Link = forwardRef<LinkRef, LinkProps>((props, ref): JSX.Element => {
+  const { opensInNewTab, external, to: route, reloads, ...linkProps } = props;
 
   const children = (
     <>
@@ -17,27 +22,41 @@ const Link = (props: LinkProps): JSX.Element => {
     </>
   );
 
-  if (!props.href && !props.onClick)
+  if (!route && !props.href && !props.onClick)
     return (
-      <Typography component="span" variant={props.variant ?? 'body2'}>
+      <Typography
+        ref={ref}
+        className={props.className}
+        component="span"
+        id={props.id}
+        variant={props.variant ?? 'body2'}
+      >
         {children}
       </Typography>
     );
 
   return (
     <MuiLink
-      className="cursor-pointer"
+      ref={ref}
       color="links"
       variant="body2"
       {...linkProps}
+      className={`cursor-pointer ${props.className ?? ''}`}
       {...(opensInNewTab && {
         target: '_blank',
         rel: 'noopener noreferrer',
       })}
+      {...(route && {
+        component: ReactRouterLink,
+        to: route,
+        reloadDocument: reloads,
+      })}
     >
       {children}
     </MuiLink>
   );
-};
+});
+
+Link.displayName = 'Link';
 
 export default Link;
diff --git a/client/app/lib/components/core/LoadingEllipsis.tsx b/client/app/lib/components/core/LoadingEllipsis.tsx
new file mode 100644
index 00000000000..701385266f3
--- /dev/null
+++ b/client/app/lib/components/core/LoadingEllipsis.tsx
@@ -0,0 +1,13 @@
+import { Slide, Typography } from '@mui/material';
+
+const LoadingEllipsis = (): JSX.Element => (
+  <Slide direction="up" in>
+    <span className="flex">
+      <Typography className="bouncing-dot">.</Typography>
+      <Typography className="bouncing-dot">.</Typography>
+      <Typography className="bouncing-dot">.</Typography>
+    </span>
+  </Slide>
+);
+
+export default LoadingEllipsis;
diff --git a/client/app/lib/components/core/PopupMenu.tsx b/client/app/lib/components/core/PopupMenu.tsx
new file mode 100644
index 00000000000..389717615a0
--- /dev/null
+++ b/client/app/lib/components/core/PopupMenu.tsx
@@ -0,0 +1,143 @@
+import {
+  ComponentProps,
+  createContext,
+  ReactNode,
+  useContext,
+  useRef,
+} from 'react';
+import {
+  Divider,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  ListSubheader,
+  Popover,
+  Typography,
+} from '@mui/material';
+
+import Link from 'lib/components/core/Link';
+
+interface PopupMenuContextProps {
+  close: () => void;
+}
+
+const PopupMenuContext = createContext<PopupMenuContextProps>({
+  close: () => {},
+});
+
+interface PopupMenuProps extends Partial<ComponentProps<typeof Popover>> {
+  onClose: () => void;
+  anchorEl?: HTMLElement | null;
+  children?: ReactNode;
+}
+
+const PopupMenu = (props: PopupMenuProps): JSX.Element => {
+  const { anchorEl, onClose, children } = props;
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <Popover
+      ref={ref}
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+      classes={{
+        paper: 'max-w-[50rem] sm:max-w-full rounded-xl shadow-lg mr-[1.6rem]',
+      }}
+      onClose={onClose}
+      open={Boolean(anchorEl)}
+      PaperProps={{ variant: 'outlined' }}
+    >
+      {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}
+      <PopupMenuContext.Provider value={{ close: onClose }}>
+        {children}
+      </PopupMenuContext.Provider>
+    </Popover>
+  );
+};
+
+interface PopupMenuButtonProps {
+  onClick?: () => void;
+  to?: string;
+  children?: ReactNode;
+  textProps?: ComponentProps<typeof Typography>;
+  disabled?: boolean;
+}
+
+const PopupMenuButton = (props: PopupMenuButtonProps): JSX.Element => {
+  const { to: href } = props;
+
+  const { close } = useContext(PopupMenuContext);
+
+  const handleClick = (): void => {
+    close();
+    props.onClick?.();
+  };
+
+  const button = (
+    <ListItem disablePadding>
+      <ListItemButton disabled={props.disabled} onClick={handleClick}>
+        <ListItemText primaryTypographyProps={props.textProps}>
+          {props.children}
+        </ListItemText>
+      </ListItemButton>
+    </ListItem>
+  );
+
+  return href && !props.disabled ? (
+    <Link to={href} underline="hover">
+      {button}
+    </Link>
+  ) : (
+    button
+  );
+};
+
+interface PopupMenuTextProps extends ComponentProps<typeof Typography> {
+  children?: ReactNode;
+}
+
+const PopupMenuText = (props: PopupMenuTextProps): JSX.Element => {
+  const { children, ...typographyProps } = props;
+
+  return (
+    <ListItem>
+      <ListItemText primaryTypographyProps={typographyProps}>
+        {children}
+      </ListItemText>
+    </ListItem>
+  );
+};
+
+interface PopupMenuListProps {
+  className?: string;
+  header?: string;
+  children?: ReactNode;
+}
+
+const PopupMenuList = (props: PopupMenuListProps): JSX.Element => {
+  return (
+    <List
+      className={props.className}
+      dense
+      subheader={
+        props.header && (
+          <ListSubheader className="pb-1 pt-5 leading-none">
+            <Typography variant="caption">{props.header}</Typography>
+          </ListSubheader>
+        )
+      }
+    >
+      {props.children}
+    </List>
+  );
+};
+
+export default Object.assign(PopupMenu, {
+  Button: PopupMenuButton,
+  Text: PopupMenuText,
+  List: PopupMenuList,
+  Item: ListItem,
+  Divider,
+});
diff --git a/client/app/lib/components/core/Thumbnail.jsx b/client/app/lib/components/core/Thumbnail.jsx
index dbcea32ca19..9859ff6a431 100644
--- a/client/app/lib/components/core/Thumbnail.jsx
+++ b/client/app/lib/components/core/Thumbnail.jsx
@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import { Button, Dialog, DialogActions, DialogContent } from '@mui/material';
 import PropTypes from 'prop-types';
 
+import Link from 'lib/components/core/Link';
 import formTranslations from 'lib/translations/form';
 
 const styles = {
@@ -93,9 +94,9 @@ class Thumbnail extends PureComponent {
     return (
       <div style={rootStyle}>
         <div style={containerStyle}>
-          <a onClick={onThumbnailClick}>
+          <Link onClick={onThumbnailClick} underline="none">
             <img alt={altText} src={source} style={thumbnailStyle} {...props} />
-          </a>
+          </Link>
         </div>
         <Dialog
           maxWidth="xl"
diff --git a/client/app/lib/components/core/fields/SearchField.tsx b/client/app/lib/components/core/fields/SearchField.tsx
index 843bd5bae07..ac67041121e 100644
--- a/client/app/lib/components/core/fields/SearchField.tsx
+++ b/client/app/lib/components/core/fields/SearchField.tsx
@@ -1,4 +1,10 @@
-import { ComponentProps, useState, useTransition } from 'react';
+import {
+  ComponentProps,
+  useEffect,
+  useRef,
+  useState,
+  useTransition,
+} from 'react';
 import { Clear, Search } from '@mui/icons-material';
 import { IconButton, InputAdornment } from '@mui/material';
 
@@ -9,13 +15,15 @@ type SearchFieldProps = ComponentProps<typeof TextField> & {
   onChangeKeyword?: (keyword: string) => void;
   placeholder?: string;
   className?: string;
+  noIcon?: boolean;
 };
 
 const SearchField = (props: SearchFieldProps): JSX.Element => {
-  const { onChangeKeyword, ...textFieldProps } = props;
+  const { onChangeKeyword, noIcon, ...otherProps } = props;
 
   const [keyword, setKeyword] = useState('');
   const [isPending, startTransition] = useTransition();
+  const ref = useRef<HTMLInputElement>(null);
 
   const changeKeyword = (newKeyword: string): void => {
     setKeyword(newKeyword);
@@ -27,13 +35,19 @@ const SearchField = (props: SearchFieldProps): JSX.Element => {
     onChangeKeyword?.('');
   };
 
+  useEffect(() => {
+    if (!props.autoFocus) return;
+
+    ref.current?.focus();
+  }, []);
+
   return (
     <TextField
-      className={props.className}
+      ref={ref}
       fullWidth
       hiddenLabel
       InputProps={{
-        startAdornment: (
+        startAdornment: !noIcon && (
           <InputAdornment position="start">
             <Search color={keyword ? 'primary' : undefined} />
           </InputAdornment>
@@ -50,13 +64,12 @@ const SearchField = (props: SearchFieldProps): JSX.Element => {
           </InputAdornment>
         ),
       }}
-      onChange={(e): void => changeKeyword(e.target.value)}
-      placeholder={props.placeholder}
       size="small"
       trims
-      value={keyword}
       variant="filled"
-      {...textFieldProps}
+      {...otherProps}
+      onChange={(e): void => changeKeyword(e.target.value)}
+      value={keyword}
     />
   );
 };
diff --git a/client/app/lib/components/core/layouts/AppLayout.tsx b/client/app/lib/components/core/layouts/AppLayout.tsx
deleted file mode 100644
index 826867d6c1f..00000000000
--- a/client/app/lib/components/core/layouts/AppLayout.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useState } from 'react';
-import { Outlet } from 'react-router-dom';
-import Grid from '@mui/material/Grid';
-
-import Breadcrumbs from 'lib/components/navigation/Breadcrumbs';
-
-import './layout.scss';
-
-interface AppLayoutProps {
-  renderSidebar: (
-    isExpanded: boolean,
-    setIsExpanded: (forceExpand?: boolean) => void,
-  ) => JSX.Element;
-}
-
-const AppLayout = (props: AppLayoutProps): JSX.Element => {
-  const { renderSidebar } = props;
-  const [isExpanded, setIsExpanded] = useState(true);
-
-  const handleExpand = (forceExpand): void => {
-    if (forceExpand) {
-      setIsExpanded(true);
-    } else {
-      setIsExpanded(!isExpanded);
-    }
-  };
-
-  return (
-    <Grid container>
-      <Grid
-        className="sidebar"
-        item
-        lg={isExpanded ? 2 : 1}
-        md={isExpanded ? 3 : 1}
-        sm={isExpanded ? 4 : 2}
-        xs={1}
-      >
-        {renderSidebar(isExpanded, handleExpand)}
-      </Grid>
-      <Grid
-        className="breadcrumbs"
-        item
-        lg={isExpanded ? 10 : 11}
-        md={isExpanded ? 9 : 11}
-        sm={isExpanded ? 8 : 10}
-        sx={{ marginBottom: '4px' }}
-        xs={11}
-      >
-        <Breadcrumbs />
-      </Grid>
-      <Grid
-        item
-        lg={isExpanded ? 2 : 1}
-        md={isExpanded ? 3 : 1}
-        sm={isExpanded ? 4 : 2}
-        xs={0}
-      />
-      <Grid
-        className="content"
-        item
-        lg={isExpanded ? 10 : 11}
-        md={isExpanded ? 9 : 11}
-        sm={isExpanded ? 8 : 10}
-        xs={12}
-      >
-        <Outlet />
-      </Grid>
-    </Grid>
-  );
-};
-
-export default AppLayout;
diff --git a/client/app/lib/components/core/layouts/DataTable.jsx b/client/app/lib/components/core/layouts/DataTable.jsx
index 73abc476bb0..bca7521c346 100644
--- a/client/app/lib/components/core/layouts/DataTable.jsx
+++ b/client/app/lib/components/core/layouts/DataTable.jsx
@@ -10,6 +10,7 @@ const options = {
   filterType: 'dropdown',
   responsive: 'standard',
   fixedSelectColumn: false,
+  elevation: 0,
 };
 
 const processTheme = (theme, newHeight, grid, alignCenter, newPadding) =>
@@ -135,7 +136,6 @@ const DataTable = (props) => {
         <MUIDataTable
           {...props}
           columns={processColumns(props.includeRowNumber, props.columns)}
-          elevation={1}
           options={{ ...options, ...(props.options ?? {}) }}
         />
       </div>
diff --git a/client/app/lib/components/core/layouts/Footer.tsx b/client/app/lib/components/core/layouts/Footer.tsx
new file mode 100644
index 00000000000..1516b52fc91
--- /dev/null
+++ b/client/app/lib/components/core/layouts/Footer.tsx
@@ -0,0 +1,94 @@
+import { defineMessages } from 'react-intl';
+import { Typography } from '@mui/material';
+
+import Link from 'lib/components/core/Link';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  termsOfService: {
+    id: 'app.Footer.termsOfService',
+    defaultMessage: 'Terms of Service',
+  },
+  privacyPolicy: {
+    id: 'app.Footer.privacyPolicy',
+    defaultMessage: 'Privacy Policy',
+  },
+  contactUs: {
+    id: 'app.Footer.contactUs',
+    defaultMessage: 'Contact Us',
+  },
+  instructorsGuide: {
+    id: 'app.Footer.instructorsGuide',
+    defaultMessage: "Instructors' Guide",
+  },
+  github: {
+    id: 'app.Footer.github',
+    defaultMessage: 'GitHub',
+  },
+  copyright: {
+    id: 'app.Footer.copyright',
+    defaultMessage:
+      'Copyright © {from}–{to} Coursemology. All rights reserved.',
+  },
+  lastBuildCommitSHA: {
+    id: 'app.Footer.lastBuildCommitSHA',
+    defaultMessage: 'Last built on {time} at {sha}.',
+  },
+});
+
+/**
+ * TODO: Populate with appropriate links when pages are ready.
+ */
+const Footer = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <footer className="flex max-w-[1000px] flex-col space-y-5 p-5 border-only-t-neutral-200">
+      <div className="flex flex-row space-x-5">
+        <Link href="/pages/terms_of_service" opensInNewTab>
+          {t(translations.termsOfService)}
+        </Link>
+
+        <Link href="/pages/privacy_policy" opensInNewTab>
+          {t(translations.privacyPolicy)}
+        </Link>
+
+        <Link external href="mailto:coursemology@gmail.com">
+          {t(translations.contactUs)}
+        </Link>
+
+        <Link
+          external
+          href="https://coursemology.github.io/coursemology-help/"
+          opensInNewTab
+        >
+          {t(translations.instructorsGuide)}
+        </Link>
+
+        <Link
+          external
+          href="https://github.com/Coursemology/coursemology2"
+          opensInNewTab
+        >
+          {t(translations.github)}
+        </Link>
+      </div>
+
+      <Typography variant="caption">
+        {t(translations.copyright, {
+          from: FIRST_BUILD_YEAR,
+          to: LATEST_BUILD_YEAR,
+        })}
+      </Typography>
+
+      <Typography color="text.disabled" variant="caption">
+        {t(translations.lastBuildCommitSHA, {
+          time: LATEST_BUILD_TIME,
+          sha: LATEST_COMMIT_HEAD_SHA,
+        })}
+      </Typography>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/client/app/lib/components/core/layouts/Page.tsx b/client/app/lib/components/core/layouts/Page.tsx
new file mode 100644
index 00000000000..bc36a3ca5fa
--- /dev/null
+++ b/client/app/lib/components/core/layouts/Page.tsx
@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowBack } from '@mui/icons-material';
+import { IconButton, Typography } from '@mui/material';
+
+interface PageProps {
+  title?: ReactNode;
+  children?: ReactNode;
+  actions?: ReactNode;
+  backTo?: string | boolean;
+  className?: string;
+  unpadded?: boolean;
+}
+
+interface PageSectionProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const Page = (props: PageProps): JSX.Element => {
+  const { backTo: route } = props;
+
+  const navigate = useNavigate();
+
+  return (
+    <div>
+      {(props.title || props.actions) && (
+        <header className="flex min-h-[6rem] items-center bg-white px-6 border-only-b-neutral-200">
+          <div className="flex w-full items-center justify-between space-x-4">
+            {props.title && (
+              <div className="flex items-center space-x-4">
+                {route && (
+                  <IconButton
+                    data-testid="ArrowBackIconButton"
+                    onClick={(): void =>
+                      route === true ? navigate(-1) : navigate(route)
+                    }
+                  >
+                    <ArrowBack data-testid="ArrowBack" />
+                  </IconButton>
+                )}
+
+                <Typography variant="h5">{props.title}</Typography>
+              </div>
+            )}
+
+            {props.actions && (
+              <div className="flex space-x-2">{props.actions}</div>
+            )}
+          </div>
+        </header>
+      )}
+
+      <main
+        className={`relative ${!props.unpadded ? 'p-6' : ''} ${
+          props.className ?? ''
+        }`}
+      >
+        {props.children}
+      </main>
+    </div>
+  );
+};
+
+const PaddedPageSection = (props: PageSectionProps): JSX.Element => (
+  <section className={`p-6 ${props.className ?? ''}`}>{props.children}</section>
+);
+
+const UnpaddedPageSection = (props: PageSectionProps): JSX.Element => (
+  <section className={`-m-6 ${props.className ?? ''}`}>
+    {props.children}
+  </section>
+);
+
+export default Object.assign(Page, {
+  PaddedSection: PaddedPageSection,
+  UnpaddedSection: UnpaddedPageSection,
+});
diff --git a/client/app/lib/components/core/layouts/Section.tsx b/client/app/lib/components/core/layouts/Section.tsx
index 08ffe7b5569..859a173526f 100644
--- a/client/app/lib/components/core/layouts/Section.tsx
+++ b/client/app/lib/components/core/layouts/Section.tsx
@@ -27,8 +27,8 @@ const Section = (props: SectionProps): JSX.Element => (
   >
     <Grid container spacing={2}>
       <Grid
-        className={`lg:sticky lg:self-start ${
-          props.sticksToNavbar ? 'lg:top-20' : 'lg:-top-6'
+        className={`lg:self-start ${
+          props.sticksToNavbar ? 'lg:sticky lg:top-0' : ''
         }`}
         item
         lg={3}
diff --git a/client/app/lib/components/core/layouts/SummaryCard.tsx b/client/app/lib/components/core/layouts/SummaryCard.tsx
index 073cf95770e..1c491b50ab4 100644
--- a/client/app/lib/components/core/layouts/SummaryCard.tsx
+++ b/client/app/lib/components/core/layouts/SummaryCard.tsx
@@ -9,15 +9,11 @@ import { Card, CardContent, CardHeader } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
 interface Props extends WrappedComponentProps {
+  className?: string;
   renderContent: JSX.Element;
 }
 
 const styles = {
-  card: {
-    marginTop: 12,
-    marginBottom: 12,
-    borderRadius: 5,
-  },
   cardHeader: {
     borderRadius: '5px 5px 0 0',
     backgroundColor: grey[100],
@@ -34,7 +30,7 @@ const translations = defineMessages({
 const SummaryCard: FC<Props> = (props) => {
   const { renderContent } = props;
   return (
-    <Card style={styles.card}>
+    <Card className={props.className} variant="outlined">
       <CardHeader
         style={styles.cardHeader}
         title={<FormattedMessage {...translations.title} />}
diff --git a/client/app/lib/components/core/layouts/layout.scss b/client/app/lib/components/core/layouts/layout.scss
index bee0769fb06..ef380d41da2 100644
--- a/client/app/lib/components/core/layouts/layout.scss
+++ b/client/app/lib/components/core/layouts/layout.scss
@@ -1,37 +1,3 @@
-body {
-  padding-top: 60px;
-
-  & > nav {
-    z-index: 1201 !important;
-  }
-}
-
-.sidebarContainer {
-  & > div {
-    z-index: 1;
-
-    @media (min-width: 600px) {
-      flex-basis: 33.33333%;
-      max-width: 33.33333%;
-    }
-
-    @media (min-width: 900px) {
-      flex-basis: 25%;
-      max-width: 25%;
-    }
-
-    @media (min-width: 1200px) {
-      flex-basis: 16.66667%;
-      max-width: 16.66667%;
-    }
-  }
-}
-
-footer {
-  background-color: #ffffff;
-  z-index: 2;
-}
-
 img {
   max-width: 100%;
 }
diff --git a/client/app/lib/components/extensions/StackedBadges.tsx b/client/app/lib/components/extensions/StackedBadges.tsx
new file mode 100644
index 00000000000..f91a7d6e9c4
--- /dev/null
+++ b/client/app/lib/components/extensions/StackedBadges.tsx
@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { Avatar, Tooltip, Typography } from '@mui/material';
+import { AchievementBadgeData } from 'types/course/assessment/assessments';
+
+import Link from 'lib/components/core/Link';
+
+interface StackableBadgeProps {
+  title: string;
+  src?: string;
+  children?: ReactNode;
+}
+
+interface StackedBadgesProps {
+  badges?: AchievementBadgeData[];
+  remainingCount?: number;
+  seeRemainingUrl?: string;
+  seeRemainingTooltip?: string;
+}
+
+const StackableBadge = (props: StackableBadgeProps): JSX.Element => (
+  <Tooltip disableInteractive title={props.title}>
+    <Avatar
+      alt={props.title}
+      className="outline outline-2 outline-slot-1 transition-all wh-11 hoverable:group-hover/badges:ml-1 hoverable:group-hover/badges:shadow-lg hoverable:group-hover/badges:!outline-none group-hover?:outline-slot-2"
+      src={props.src}
+    >
+      {props.children}
+    </Avatar>
+  </Tooltip>
+);
+
+const StackedBadges = (props: StackedBadgesProps): JSX.Element => (
+  <div className="group/badges relative h-[2.75rem] min-w-[5rem]">
+    <div className="absolute flex h-full items-center -space-x-4 hoverable:group-hover/badges:space-x-0">
+      {props.badges?.map((badge) => (
+        <Link
+          key={badge.url}
+          className="transition-margin hoverable:group-hover/badges:-ml-1"
+          href={badge.url}
+          opensInNewTab
+          underline="hover"
+        >
+          <StackableBadge src={badge.badgeUrl} title={badge.title} />
+        </Link>
+      ))}
+
+      {props.remainingCount && (
+        <Link href={props.seeRemainingUrl} opensInNewTab underline="hover">
+          <Tooltip disableInteractive title={props.seeRemainingTooltip}>
+            <Typography
+              className="ml-6 hoverable:group-hover/badges:ml-3"
+              color="text.secondary"
+              variant="body2"
+            >
+              +{props.remainingCount}
+            </Typography>
+          </Tooltip>
+        </Link>
+      )}
+    </div>
+  </div>
+);
+
+export default StackedBadges;
diff --git a/client/app/lib/components/form/fields/DataTableInlineEditable/TextField.tsx b/client/app/lib/components/form/fields/DataTableInlineEditable/TextField.tsx
index 5bcdb9158ba..7d416acfb7e 100644
--- a/client/app/lib/components/form/fields/DataTableInlineEditable/TextField.tsx
+++ b/client/app/lib/components/form/fields/DataTableInlineEditable/TextField.tsx
@@ -6,6 +6,8 @@ import { LoadingButton } from '@mui/lab';
 import { Box, IconButton, TextField } from '@mui/material';
 import equal from 'fast-deep-equal';
 
+import Link from 'lib/components/core/Link';
+
 interface Props {
   value: string;
   updateValue: (value: string) => void;
@@ -103,7 +105,7 @@ const InlineEditTextField: FC<Props> = (props): JSX.Element | null => {
   const renderDisplayField = (
     <Box className={className} sx={styles.displayFieldStyle}>
       <>
-        {link ? <a href={link}>{controlledVal}</a> : controlledVal}
+        {link ? <Link href={link}>{controlledVal}</Link> : controlledVal}
 
         <IconButton
           className="inline-edit-button"
diff --git a/client/app/lib/components/navigation/BrandingHead.tsx b/client/app/lib/components/navigation/BrandingHead.tsx
new file mode 100644
index 00000000000..ec6cd0d116a
--- /dev/null
+++ b/client/app/lib/components/navigation/BrandingHead.tsx
@@ -0,0 +1,161 @@
+import { ReactNode, useState } from 'react';
+import { defineMessages } from 'react-intl';
+import { AdminPanelSettingsOutlined, ChevronRight } from '@mui/icons-material';
+import { Avatar, IconButton, Typography } from '@mui/material';
+
+import Link from 'lib/components/core/Link';
+import PopupMenu from 'lib/components/core/PopupMenu';
+import { useAppContext } from 'lib/containers/AppContainer';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import UserPopupMenuList from './UserPopupMenuList';
+
+const translations = defineMessages({
+  coursemology: {
+    id: 'app.BrandingItem.coursemology',
+    defaultMessage: 'Coursemology',
+  },
+  adminPanel: {
+    id: 'course.courses.BrandingItem.adminPanel',
+    defaultMessage: 'System Admin Panel',
+  },
+  instanceAdminPanel: {
+    id: 'course.courses.BrandingItem.instanceAdminPanel',
+    defaultMessage: 'Instance Admin Panel',
+  },
+  superuser: {
+    id: 'course.courses.BrandingItem.superuser',
+    defaultMessage: 'Superuser',
+  },
+});
+
+interface BrandingHeadProps {
+  title?: string | null;
+}
+
+const AdminMenuButton = (): JSX.Element | null => {
+  const { t } = useTranslation();
+
+  const { user } = useAppContext();
+
+  const isSuperAdmin = user?.role === 'administrator';
+  const isInstanceAdmin = user?.instanceRole === 'administrator';
+
+  const [anchorElement, setAnchorElement] = useState<HTMLElement>();
+
+  if (!(isSuperAdmin || isInstanceAdmin)) return null;
+
+  return (
+    <>
+      <IconButton
+        className="-mr-4 ml-4"
+        edge="end"
+        onClick={(e): void => setAnchorElement(e.currentTarget)}
+      >
+        <AdminPanelSettingsOutlined />
+      </IconButton>
+
+      <PopupMenu
+        anchorEl={anchorElement}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        onClose={(): void => setAnchorElement(undefined)}
+      >
+        <PopupMenu.List header={t(translations.superuser)}>
+          {isSuperAdmin && (
+            <PopupMenu.Button to="/admin">
+              {t(translations.adminPanel)}
+            </PopupMenu.Button>
+          )}
+
+          {(isSuperAdmin || isInstanceAdmin) && (
+            <PopupMenu.Button to="/admin/instance">
+              {t(translations.instanceAdminPanel)}
+            </PopupMenu.Button>
+          )}
+        </PopupMenu.List>
+      </PopupMenu>
+    </>
+  );
+};
+
+const Brand = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  // TODO: Remove `reloads` once fully SPA
+  return (
+    <Link reloads to="/" underline="hover">
+      <Typography>{t(translations.coursemology)}</Typography>
+    </Link>
+  );
+};
+
+const UserMenuButton = (): JSX.Element | null => {
+  const { user } = useAppContext();
+
+  const [anchorElement, setAnchorElement] = useState<HTMLElement>();
+
+  if (!user) return null;
+
+  return (
+    <>
+      <div
+        className="!-mr-4 flex h-full cursor-pointer select-none items-center space-x-4 p-4 border-only-l-neutral-200 hover:bg-neutral-100 active:bg-neutral-200"
+        onClick={(e): void => setAnchorElement(e.currentTarget)}
+        role="button"
+        tabIndex={0}
+      >
+        <Avatar alt={user.name} className="wh-12" src={user.avatarUrl} />
+
+        <Typography
+          className="max-w-[15rem] overflow-hidden text-ellipsis whitespace-nowrap text-neutral-500 max-md:hidden"
+          variant="body2"
+        >
+          {user.name}
+        </Typography>
+      </div>
+
+      <PopupMenu
+        anchorEl={anchorElement}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        onClose={(): void => setAnchorElement(undefined)}
+      >
+        <UserPopupMenuList />
+      </PopupMenu>
+    </>
+  );
+};
+
+const BrandingHeadContainer = (props: { children: ReactNode }): JSX.Element => (
+  <div className="flex h-[4rem] items-center justify-between px-4">
+    {props.children}
+  </div>
+);
+
+const BrandingHead = (props: BrandingHeadProps): JSX.Element => (
+  <BrandingHeadContainer>
+    <div className="flex items-center space-x-2">
+      <Brand />
+
+      {props.title && (
+        <div className="flex items-center space-x-2 text-neutral-500">
+          <ChevronRight />
+          <Typography className="line-clamp-1">{props.title}</Typography>
+        </div>
+      )}
+    </div>
+
+    <div className="flex h-full items-center space-x-4">
+      <AdminMenuButton />
+      <UserMenuButton />
+    </div>
+  </BrandingHeadContainer>
+);
+
+const MiniBrandingHead = (): JSX.Element => (
+  <BrandingHeadContainer>
+    <Brand />
+    <AdminMenuButton />
+  </BrandingHeadContainer>
+);
+
+export default Object.assign(BrandingHead, { Mini: MiniBrandingHead });
diff --git a/client/app/lib/components/navigation/Breadcrumbs.tsx b/client/app/lib/components/navigation/Breadcrumbs.tsx
deleted file mode 100644
index faf05154e30..00000000000
--- a/client/app/lib/components/navigation/Breadcrumbs.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Link as RouterLink, useLocation } from 'react-router-dom';
-import {
-  Breadcrumbs as MuiBreadcrumbs,
-  Paper,
-  Typography,
-} from '@mui/material';
-import { grey } from '@mui/material/colors';
-import Link, { LinkProps } from '@mui/material/Link';
-
-const breadcrumbNameMap: { [key: string]: string } = {
-  '/admin': 'Administration',
-  '/admin/announcements': 'System Announcements',
-  '/admin/users': 'Users',
-  '/admin/instances': 'Instances',
-  '/admin/courses': 'Courses',
-  '/admin/instance': 'Instance Administration',
-  '/admin/instance/announcements': 'Announcements',
-  '/admin/instance/users': 'Users',
-  '/admin/instance/users/invite': 'Invite Users',
-  '/admin/instance/user_invitations': 'User Invitations',
-  '/admin/instance/courses': 'Courses',
-  '/admin/instance/components': 'Components',
-  '/role_requests': 'Role Requests',
-};
-
-interface LinkRouterProps extends LinkProps {
-  to: string;
-  replace?: boolean;
-}
-
-const LinkRouter = (props: LinkRouterProps): JSX.Element => (
-  <Link {...props} component={RouterLink} variant="body2" />
-);
-
-const Breadcrumbs = (): JSX.Element => {
-  const location = useLocation();
-  const pathnames = location.pathname.split('/').filter((x) => x);
-
-  return (
-    <Paper
-      sx={{
-        marginBottom: '4px',
-        padding: '4px 8px',
-        backgroundColor: grey[100],
-        border: '0',
-      }}
-      variant="outlined"
-    >
-      <MuiBreadcrumbs aria-label="breadcrumb">
-        {pathnames.map((_value, index) => {
-          const last = index === pathnames.length - 1;
-          const to = `/${pathnames.slice(0, index + 1).join('/')}`;
-
-          return last ? (
-            <Typography key={to} color="text.primary" variant="body2">
-              {breadcrumbNameMap[to]}
-            </Typography>
-          ) : (
-            <LinkRouter key={to} color="inherit" to={to} underline="hover">
-              {breadcrumbNameMap[to]}
-            </LinkRouter>
-          );
-        })}
-      </MuiBreadcrumbs>
-    </Paper>
-  );
-};
-export default Breadcrumbs;
diff --git a/client/app/lib/components/navigation/PageHeader.tsx b/client/app/lib/components/navigation/PageHeader.tsx
deleted file mode 100644
index e17bd035476..00000000000
--- a/client/app/lib/components/navigation/PageHeader.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
-import ArrowBack from '@mui/icons-material/ArrowBack';
-import { IconButton } from '@mui/material';
-
-import TitleBar from 'lib/components/navigation/TitleBar';
-
-interface Props {
-  title: ReactNode | string;
-  returnLink?: string;
-  toolbars?: ReactNode;
-  children?: ReactNode;
-}
-
-const PageHeader: FC<Props> = (props) => {
-  const { title, returnLink, toolbars, children } = props;
-  const navigate = useNavigate();
-
-  return (
-    <TitleBar
-      data-testid="TitleBar"
-      iconElementLeft={
-        returnLink ? (
-          <IconButton
-            data-testid="ArrowBackIconButton"
-            onClick={(): void => navigate(returnLink)}
-          >
-            <ArrowBack data-testid="ArrowBack" htmlColor="white" />
-          </IconButton>
-        ) : null
-      }
-      iconElementRight={children ?? toolbars ?? null}
-      title={title}
-    />
-  );
-};
-
-export default PageHeader;
diff --git a/client/app/lib/components/navigation/ScrollToTop.tsx b/client/app/lib/components/navigation/ScrollToTop.tsx
deleted file mode 100644
index 645bc6752ce..00000000000
--- a/client/app/lib/components/navigation/ScrollToTop.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-
-// In react router v6, navigating between page does not scroll the page back to the top.
-// When this component is added to react-router Route's children, it will scroll the page
-// to the top when changing pages.
-//
-// TODO: Replace this with `ScrollRestoration` once in React Router 6.11.1
-const ScrollToTop = (): null => {
-  const { pathname } = useLocation();
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
-
-  return null;
-};
-
-export default ScrollToTop;
diff --git a/client/app/lib/components/navigation/Sidebar.tsx b/client/app/lib/components/navigation/Sidebar.tsx
deleted file mode 100644
index 0582f73aeb4..00000000000
--- a/client/app/lib/components/navigation/Sidebar.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { FC, useState } from 'react';
-import Menu from '@mui/icons-material/Menu';
-import { Box, Drawer, IconButton } from '@mui/material';
-
-import styles from 'lib/components/core/layouts/layout.scss';
-
-interface Props {
-  renderDrawer: (
-    isDrawerOpen: boolean,
-    handleDrawerToggle: () => void,
-  ) => JSX.Element;
-  handleExpand: (forceExpand?: boolean) => void;
-}
-
-const Sidebar: FC<Props> = (props) => {
-  const { renderDrawer, handleExpand } = props;
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-
-  const handleDrawerToggle = (): void => {
-    if (!isDrawerOpen) {
-      handleExpand(true); // force expansion of sidebar elements
-    }
-    setIsDrawerOpen(!isDrawerOpen);
-  };
-
-  return (
-    <Box aria-label="sidebar" component="nav" sx={{ width: '100%' }}>
-      {/* Mobile */}
-      <Drawer
-        ModalProps={{
-          keepMounted: true, // Better open performance on mobile.
-        }}
-        onClose={handleDrawerToggle}
-        open={isDrawerOpen}
-        sx={{
-          display: { xs: 'block', sm: 'none' },
-          '& .MuiDrawer-paper': { boxSizing: 'border-box', width: '80%' },
-        }}
-        variant="temporary"
-      >
-        {renderDrawer(isDrawerOpen, handleDrawerToggle)}
-      </Drawer>
-      <IconButton
-        onClick={handleDrawerToggle}
-        sx={{
-          display: { xs: 'block', sm: 'none' },
-          padding: '2px 8px',
-        }}
-      >
-        <Menu />
-      </IconButton>
-
-      {/* Desktop */}
-      <Drawer
-        className={`${styles.sidebarContainer}`}
-        style={{ marginRight: '12px' }}
-        sx={{
-          display: { xs: 'none', sm: 'block' },
-        }}
-        transitionDuration={1000}
-        variant="permanent"
-      >
-        {renderDrawer(isDrawerOpen, handleDrawerToggle)}
-      </Drawer>
-    </Box>
-  );
-};
-
-export default Sidebar;
diff --git a/client/app/lib/components/navigation/TitleBar.jsx b/client/app/lib/components/navigation/TitleBar.jsx
deleted file mode 100644
index 4f5a83fb177..00000000000
--- a/client/app/lib/components/navigation/TitleBar.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { AppBar, Toolbar, Typography } from '@mui/material';
-import PropTypes from 'prop-types';
-
-// Hide menu icon by default. To revert once sidebar has been ported to MaterialUI.
-const TitleBar = ({ iconElementLeft, iconElementRight, title, ...props }) => (
-  <div className="grow">
-    <AppBar
-      {...props}
-      className="static z-0 -mx-6 mb-0 w-screen sm:mx-0 sm:w-full sm:rounded-md"
-      elevation={0}
-    >
-      <Toolbar>
-        <div className="-ml-4 mr-2">{iconElementLeft}</div>
-        <Typography className="grow" color="inherit" variant="h5">
-          <label className="m-0 align-middle font-normal" title={title}>
-            <div className="line-clamp-2">{title}</div>
-          </label>
-        </Typography>
-        {iconElementRight}
-      </Toolbar>
-    </AppBar>
-  </div>
-);
-
-TitleBar.propTypes = {
-  onClick: PropTypes.func,
-  iconElementLeft: PropTypes.node,
-  iconElementRight: PropTypes.node,
-  title: PropTypes.node,
-};
-
-export default TitleBar;
diff --git a/client/app/lib/components/navigation/UserPopupMenuList.tsx b/client/app/lib/components/navigation/UserPopupMenuList.tsx
new file mode 100644
index 00000000000..a38af961c7c
--- /dev/null
+++ b/client/app/lib/components/navigation/UserPopupMenuList.tsx
@@ -0,0 +1,49 @@
+import { ComponentProps } from 'react';
+import { defineMessages } from 'react-intl';
+
+import GlobalAPI from 'api';
+import PopupMenu from 'lib/components/core/PopupMenu';
+import { useAppContext } from 'lib/containers/AppContainer';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  accountSettings: {
+    id: 'course.courses.CourseUserItem.accountSettings',
+    defaultMessage: 'Account settings',
+  },
+  signOut: {
+    id: 'course.courses.CourseUserItem.signOut',
+    defaultMessage: 'Sign out',
+  },
+});
+
+const UserPopupMenuList = (
+  props: Pick<ComponentProps<typeof PopupMenu.List>, 'header'>,
+): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { signOutUrl } = useAppContext();
+
+  const signOut = async (): Promise<void> => {
+    if (!signOutUrl) return;
+
+    await GlobalAPI.users.signOut(signOutUrl);
+
+    // TODO: Reset Redux store and navigate via React Router once SPA.
+    window.location.href = '/';
+  };
+
+  return (
+    <PopupMenu.List header={props.header}>
+      <PopupMenu.Button to="/user/profile/edit">
+        {t(translations.accountSettings)}
+      </PopupMenu.Button>
+
+      <PopupMenu.Button onClick={signOut} textProps={{ color: 'error' }}>
+        {t(translations.signOut)}
+      </PopupMenu.Button>
+    </PopupMenu.List>
+  );
+};
+
+export default UserPopupMenuList;
diff --git a/client/app/lib/components/navigation/__test__/PageHeader.test.tsx b/client/app/lib/components/navigation/__test__/PageHeader.test.tsx
deleted file mode 100644
index a48ea080742..00000000000
--- a/client/app/lib/components/navigation/__test__/PageHeader.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { render, RenderResult } from 'test-utils';
-
-import PageHeader from '../PageHeader';
-
-let documentBody: RenderResult;
-
-describe('<PageHeader />', () => {
-  describe('when there is no return link', () => {
-    beforeEach(() => {
-      documentBody = render(<PageHeader title="Test Title 1" />);
-    });
-
-    it('renders TitleBar and shows the title', () => {
-      expect(documentBody.getByTestId('TitleBar')).toBeVisible();
-      expect(documentBody.getByText('Test Title 1')).toBeVisible();
-    });
-
-    it('does not show the return/back button', () => {
-      expect(documentBody.queryByTestId('ArrowBackIconButton')).toBeNull();
-      expect(documentBody.queryByTestId('ArrowBack')).toBeNull();
-    });
-
-    it('matches the snapshot', () => {
-      const { baseElement } = documentBody;
-      expect(baseElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when there is a return link', () => {
-    beforeEach(() => {
-      documentBody = render(
-        <PageHeader returnLink="some/link" title="Test Title 2" />,
-      );
-    });
-
-    it('renders TitleBar and shows the title', () => {
-      expect(documentBody.getByTestId('TitleBar')).toBeVisible();
-      expect(documentBody.getByText('Test Title 2')).toBeVisible();
-    });
-
-    it('shows the return/back button', () => {
-      expect(documentBody.getByTestId('ArrowBackIconButton')).toBeVisible();
-      expect(documentBody.getByTestId('ArrowBack')).toBeVisible();
-    });
-
-    it('matches the snapshot', () => {
-      const { baseElement } = documentBody;
-      expect(baseElement).toMatchSnapshot();
-    });
-  });
-});
diff --git a/client/app/lib/components/navigation/__test__/__snapshots__/PageHeader.test.tsx.snap b/client/app/lib/components/navigation/__test__/__snapshots__/PageHeader.test.tsx.snap
deleted file mode 100644
index 93641addd9d..00000000000
--- a/client/app/lib/components/navigation/__test__/__snapshots__/PageHeader.test.tsx.snap
+++ /dev/null
@@ -1,104 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<PageHeader /> when there is a return link matches the snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="grow"
-    >
-      <header
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed static z-0 -mx-6 mb-0 w-screen sm:mx-0 sm:w-full sm:rounded-md mui-fixed css-2naa7r-MuiPaper-root-MuiAppBar-root"
-        data-testid="TitleBar"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-129s0w6-MuiToolbar-root"
-        >
-          <div
-            class="-ml-4 mr-2"
-          >
-            <button
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-aem3qp-MuiButtonBase-root-MuiIconButton-root"
-              data-testid="ArrowBackIconButton"
-              tabindex="0"
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-hgpioi-MuiSvgIcon-root"
-                color="white"
-                data-testid="ArrowBack"
-                focusable="false"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-                />
-              </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
-          </div>
-          <h5
-            class="MuiTypography-root MuiTypography-h5 grow css-7sb4ws-MuiTypography-root"
-          >
-            <label
-              class="m-0 align-middle font-normal"
-              title="Test Title 2"
-            >
-              <div
-                class="line-clamp-2"
-              >
-                Test Title 2
-              </div>
-            </label>
-          </h5>
-        </div>
-      </header>
-    </div>
-    <div
-      class="Toastify"
-    />
-  </div>
-</body>
-`;
-
-exports[`<PageHeader /> when there is no return link matches the snapshot 1`] = `
-<body>
-  <div>
-    <div
-      class="grow"
-    >
-      <header
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionFixed static z-0 -mx-6 mb-0 w-screen sm:mx-0 sm:w-full sm:rounded-md mui-fixed css-2naa7r-MuiPaper-root-MuiAppBar-root"
-        data-testid="TitleBar"
-      >
-        <div
-          class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular css-129s0w6-MuiToolbar-root"
-        >
-          <div
-            class="-ml-4 mr-2"
-          />
-          <h5
-            class="MuiTypography-root MuiTypography-h5 grow css-7sb4ws-MuiTypography-root"
-          >
-            <label
-              class="m-0 align-middle font-normal"
-              title="Test Title 1"
-            >
-              <div
-                class="line-clamp-2"
-              >
-                Test Title 1
-              </div>
-            </label>
-          </h5>
-        </div>
-      </header>
-    </div>
-    <div
-      class="Toastify"
-    />
-  </div>
-</body>
-`;
diff --git a/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx b/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx
index 4ab78b0f03d..5c6bd02a04d 100644
--- a/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx
+++ b/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx
@@ -47,9 +47,6 @@ const useTanStackTableBuilder = <D extends object>(
     pageIndex: props.pagination?.initialPageIndex ?? 0,
   });
 
-  const trimAndSetSearchKeyword = (keyword: string): void =>
-    setSearchKeyword(keyword.trim());
-
   const resetPagination = (): void =>
     setPagination((current) => ({ ...current, pageIndex: 0 }));
 
@@ -65,13 +62,13 @@ const useTanStackTableBuilder = <D extends object>(
     getFacetedUniqueValues: getFacetedUniqueValues(),
     onRowSelectionChange: setRowSelection,
     onColumnFiltersChange: setColumnFilters,
-    onGlobalFilterChange: trimAndSetSearchKeyword,
+    onGlobalFilterChange: setSearchKeyword,
     onPaginationChange: setPagination,
     autoResetPageIndex: false,
     state: {
       rowSelection,
       columnFilters,
-      globalFilter: searchKeyword,
+      globalFilter: searchKeyword.trim(),
       pagination,
     },
     initialState: {
@@ -176,7 +173,7 @@ const useTanStackTableBuilder = <D extends object>(
           ),
       },
       searchKeyword,
-      onSearchKeywordChange: trimAndSetSearchKeyword,
+      onSearchKeywordChange: setSearchKeyword,
       onDownloadCsv: props.csvDownload && generateAndDownloadCsv,
       csvDownloadLabel: props.csvDownload?.downloadButtonLabel,
       searchPlaceholder: props.search?.searchPlaceholder,
diff --git a/client/app/lib/components/table/utils.ts b/client/app/lib/components/table/utils.ts
index 848e386e11d..661581a4c84 100644
--- a/client/app/lib/components/table/utils.ts
+++ b/client/app/lib/components/table/utils.ts
@@ -1,7 +1,7 @@
 const DEFAULT_CSV_FILENAME = 'data' as const;
 
 // TODO: Remove this suppression when more exports are added.
-// eslint-disable-next-line import/prefer-default-export
+
 export const downloadCsv = (csvData: string, filename?: string): void => {
   const csvContent = `data:text/csv;charset=utf-8,${csvData}`;
   const encodedUri = encodeURI(csvContent);
diff --git a/client/app/lib/components/wrappers/I18nProvider.tsx b/client/app/lib/components/wrappers/I18nProvider.tsx
new file mode 100644
index 00000000000..4c8f2f0d134
--- /dev/null
+++ b/client/app/lib/components/wrappers/I18nProvider.tsx
@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { IntlProvider } from 'react-intl';
+
+import { i18nLocale } from 'lib/helpers/server-context';
+
+import translations from '../../../../build/locales/locales.json';
+
+interface I18nProviderProps {
+  children: ReactNode;
+}
+
+const I18nProvider = (props: I18nProviderProps): JSX.Element => {
+  if (!i18nLocale) throw new Error(`Illegal i18nLocale: ${i18nLocale}`);
+
+  const localeWithoutRegionCode = i18nLocale.toLowerCase().split(/[_-]+/)[0];
+
+  let messages;
+  if (localeWithoutRegionCode !== 'en') {
+    messages =
+      translations[localeWithoutRegionCode] || translations[i18nLocale];
+  }
+
+  return (
+    <IntlProvider locale={i18nLocale} messages={messages} textComponent="span">
+      {props.children}
+    </IntlProvider>
+  );
+};
+
+export default I18nProvider;
diff --git a/client/app/lib/components/wrappers/ProviderWrapper.jsx b/client/app/lib/components/wrappers/ProviderWrapper.jsx
deleted file mode 100644
index c9b69b682ad..00000000000
--- a/client/app/lib/components/wrappers/ProviderWrapper.jsx
+++ /dev/null
@@ -1,210 +0,0 @@
-import { IntlProvider } from 'react-intl';
-import { Provider as ReduxProvider } from 'react-redux';
-import { ToastContainer } from 'react-toastify';
-import { injectStyle } from 'react-toastify/dist/inject-style';
-import {
-  createTheme,
-  StyledEngineProvider,
-  ThemeProvider,
-} from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import { PersistGate } from 'redux-persist/lib/integration/react';
-import { lime, red } from 'tailwindcss/colors';
-import resolveConfig from 'tailwindcss/resolveConfig';
-import { grey } from 'theme/colors';
-import palette from 'theme/palette';
-
-import LoadingIndicator from 'lib/components/core/LoadingIndicator';
-import { i18nLocale } from 'lib/helpers/server-context';
-
-import translations from '../../../../build/locales/locales.json';
-import tailwindUserConfig from '../../../../tailwind.config';
-
-import ErrorBoundary from './ErrorBoundary';
-import RollBarWrapper from './RollbarWrapper';
-import 'react-tooltip/dist/react-tooltip.css';
-
-injectStyle();
-
-const propTypes = {
-  store: PropTypes.shape({
-    subscribe: PropTypes.func.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    getState: PropTypes.func.isRequired,
-  }),
-  persistor: PropTypes.object,
-  children: PropTypes.node.isRequired,
-};
-
-const tailwindConfig = resolveConfig(tailwindUserConfig);
-
-const pxInInt = (pixels) => parseInt(pixels.replace('px', ''), 10);
-
-const ProviderWrapper = ({ store, persistor, children }) => {
-  const localeWithoutRegionCode = i18nLocale.toLowerCase().split(/[_-]+/)[0];
-
-  // TODO: Replace with React's createRoot once true SPA is ready
-  const rootElement = document.getElementById('root');
-
-  const theme = createTheme({
-    palette,
-    // https://material-ui.com/customization/themes/#typography---html-font-size
-    // https://material-ui.com/style/typography/#migration-to-typography-v2
-    typography: {
-      htmlFontSize: 10,
-    },
-    breakpoints: {
-      values: {
-        xs: 0,
-        sm: pxInInt(tailwindConfig.theme.screens.sm),
-        md: pxInInt(tailwindConfig.theme.screens.md),
-        lg: pxInInt(tailwindConfig.theme.screens.lg),
-        xl: pxInInt(tailwindConfig.theme.screens.xl),
-      },
-    },
-    components: {
-      MuiAlert: {
-        styleOverrides: {
-          standardError: { backgroundColor: red[100] },
-          standardSuccess: { backgroundColor: lime[50] },
-        },
-      },
-      MuiDialog: {
-        defaultProps: { container: rootElement },
-      },
-      MuiPopover: {
-        // TODO: *Must* remove once SPA is ready
-        // Popover elements, e.g., Menu, MenuItem, attaches an `overflow: hidden` style to this `container` to
-        // prevent scrolling and having the Popover floating senselessly in the `container`. Usually, this `container`
-        // defaults to `body`. This time, we set it to `rootElement` which is NOT `body` nor the viewport. This causes
-        // the senseless floating issue while the page scrolls.
-        defaultProps: { container: rootElement },
-      },
-      MuiPopper: {
-        defaultProps: { container: rootElement },
-      },
-      MuiCard: { styleOverrides: { root: { overflow: 'visible' } } },
-      MuiMenuItem: { styleOverrides: { root: { height: '48px' } } },
-      MuiAppBar: {
-        styleOverrides: {
-          // When there is a MUI Dialog component, somehow
-          // the color of appbar is changed... smh
-          root: {
-            background: `${palette.primary.main} !important`,
-            color: 'white !important',
-          },
-        },
-      },
-      MuiDialogContent: {
-        styleOverrides: {
-          root: {
-            color: 'black',
-            fontSize: '16px',
-            fontFamily: `'Roboto', 'sans-serif'`,
-          },
-        },
-      },
-      MuiAccordionSummary: {
-        styleOverrides: {
-          root: { width: '100%' },
-          content: {
-            margin: 0,
-            paddingLeft: '16px',
-            '&$expanded': { margin: 0 },
-          },
-        },
-      },
-      MuiStepLabel: {
-        styleOverrides: {
-          iconContainer: {
-            paddingLeft: '2px',
-            paddingRight: '2px',
-          },
-        },
-      },
-      MuiTableCell: {
-        styleOverrides: {
-          root: {
-            padding: '8px 14px',
-            height: '48px',
-          },
-          head: {
-            color: grey[500],
-            padding: '16px 16px',
-          },
-          sizeSmall: {
-            padding: '6px 12px',
-            height: '40px',
-          },
-        },
-      },
-      MuiTableRow: {
-        styleOverrides: {
-          root: { '&:last-child td, &:last-child th': { border: 0 } },
-        },
-      },
-    },
-  });
-
-  let messages;
-  if (localeWithoutRegionCode !== 'en') {
-    messages =
-      translations[localeWithoutRegionCode] || translations[i18nLocale];
-  }
-
-  let providers = (
-    <>
-      {children}
-      <ToastContainer position="bottom-center" />
-    </>
-  );
-
-  if (store && persistor) {
-    providers = (
-      <PersistGate loading={<LoadingIndicator />} persistor={persistor}>
-        {providers}
-      </PersistGate>
-    );
-  }
-
-  providers = (
-    <IntlProvider locale={i18nLocale} messages={messages} textComponent="span">
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>{providers}</ThemeProvider>
-      </StyledEngineProvider>
-    </IntlProvider>
-  );
-
-  if (store) {
-    providers = <ReduxProvider store={store}>{providers}</ReduxProvider>;
-  }
-
-  return (
-    <RollBarWrapper>
-      <ErrorBoundary>{providers}</ErrorBoundary>
-    </RollBarWrapper>
-  );
-};
-
-ProviderWrapper.propTypes = propTypes;
-
-export const StoreProviderWrapper = ({ store, persistor, children }) => {
-  let providers = children;
-
-  if (store && persistor) {
-    providers = (
-      <PersistGate loading={<LoadingIndicator />} persistor={persistor}>
-        {providers}
-      </PersistGate>
-    );
-  }
-
-  if (store)
-    providers = <ReduxProvider store={store}>{providers}</ReduxProvider>;
-
-  return providers;
-};
-
-StoreProviderWrapper.propTypes = propTypes;
-
-export default ProviderWrapper;
diff --git a/client/app/lib/components/wrappers/Providers.tsx b/client/app/lib/components/wrappers/Providers.tsx
new file mode 100644
index 00000000000..6d61626e395
--- /dev/null
+++ b/client/app/lib/components/wrappers/Providers.tsx
@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+import ErrorBoundary from './ErrorBoundary';
+import I18nProvider from './I18nProvider';
+import RollbarProvider from './RollbarWrapper';
+import StoreProvider, { StoreProviderProps } from './StoreProvider';
+import ThemeProvider from './ThemeProvider';
+import ToastProvider from './ToastProvider';
+
+interface ProvidersProps extends StoreProviderProps {
+  children: ReactNode;
+}
+
+const Providers = (props: ProvidersProps): JSX.Element => (
+  <RollbarProvider>
+    <ErrorBoundary>
+      <StoreProvider persistor={props.persistor} store={props.store}>
+        <I18nProvider>
+          <ThemeProvider>
+            <ToastProvider>{props.children}</ToastProvider>
+          </ThemeProvider>
+        </I18nProvider>
+      </StoreProvider>
+    </ErrorBoundary>
+  </RollbarProvider>
+);
+
+export default Providers;
diff --git a/client/app/lib/components/wrappers/RollbarWrapper.tsx b/client/app/lib/components/wrappers/RollbarWrapper.tsx
index 495d98b6f3f..145b6ebef30 100644
--- a/client/app/lib/components/wrappers/RollbarWrapper.tsx
+++ b/client/app/lib/components/wrappers/RollbarWrapper.tsx
@@ -1,11 +1,10 @@
-import { FC } from 'react';
 import { Provider } from '@rollbar/react';
 
-interface Props {
+interface RollbarProviderProps {
   children: JSX.Element;
 }
 
-const RollBarWrapper: FC<Props> = (props) => {
+const RollbarProvider = (props: RollbarProviderProps): JSX.Element => {
   // TODO: To report user id as well after we move to SPA.
   const rollbarConfig =
     process.env.NODE_ENV === 'development'
@@ -46,4 +45,4 @@ const RollBarWrapper: FC<Props> = (props) => {
   return <Provider config={rollbarConfig}>{props.children}</Provider>;
 };
 
-export default RollBarWrapper;
+export default RollbarProvider;
diff --git a/client/app/lib/components/wrappers/StoreProvider.tsx b/client/app/lib/components/wrappers/StoreProvider.tsx
new file mode 100644
index 00000000000..d2c7cf559d8
--- /dev/null
+++ b/client/app/lib/components/wrappers/StoreProvider.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { Store } from 'redux';
+import { Persistor } from 'redux-persist';
+import { PersistGate } from 'redux-persist/integration/react';
+
+import LoadingIndicator from 'lib/components/core/LoadingIndicator';
+
+export interface StoreProviderProps {
+  store?: Store;
+  children: ReactNode;
+  persistor?: Persistor;
+}
+
+const StoreProvider = (props: StoreProviderProps): JSX.Element => {
+  if (!props.store) return props.children as JSX.Element;
+
+  return (
+    <Provider store={props.store}>
+      {props.persistor ? (
+        <PersistGate loading={<LoadingIndicator />} persistor={props.persistor}>
+          {props.children}
+        </PersistGate>
+      ) : (
+        props.children
+      )}
+    </Provider>
+  );
+};
+
+export default StoreProvider;
diff --git a/client/app/lib/components/wrappers/ThemeProvider.tsx b/client/app/lib/components/wrappers/ThemeProvider.tsx
new file mode 100644
index 00000000000..e80b857720a
--- /dev/null
+++ b/client/app/lib/components/wrappers/ThemeProvider.tsx
@@ -0,0 +1,139 @@
+import { ReactNode } from 'react';
+import {
+  createTheme,
+  StyledEngineProvider,
+  ThemeProvider as MuiThemeProvider,
+} from '@mui/material/styles';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import resolveConfig from 'tailwindcss/resolveConfig';
+import { grey } from 'theme/colors';
+import palette from 'theme/palette';
+
+import tailwindUserConfig from '../../../../tailwind.config';
+
+interface ThemeProviderProps {
+  children: ReactNode;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const tailwindConfig = resolveConfig(tailwindUserConfig) as any;
+
+const pxToNumber = (pixels: string): number =>
+  parseInt(pixels.replace('px', ''), 10);
+
+const ThemeProvider = (props: ThemeProviderProps): JSX.Element => {
+  // TODO: Replace with React's createRoot once true SPA is ready
+  const rootElement = document.getElementById('root');
+
+  const theme = createTheme({
+    palette,
+    // https://material-ui.com/customization/themes/#typography---html-font-size
+    // https://material-ui.com/style/typography/#migration-to-typography-v2
+    typography: {
+      htmlFontSize: 10,
+      fontFamily: `'Inter', 'sans-serif'`,
+    },
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: pxToNumber(tailwindConfig.theme.screens.sm),
+        md: pxToNumber(tailwindConfig.theme.screens.md),
+        lg: pxToNumber(tailwindConfig.theme.screens.lg),
+        xl: pxToNumber(tailwindConfig.theme.screens.xl),
+      },
+    },
+    components: {
+      MuiTab: {
+        styleOverrides: {
+          root: { textTransform: 'none' },
+        },
+      },
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true,
+          classes: { root: 'rounded-full px-4 py-2' },
+        },
+        styleOverrides: {
+          root: { textTransform: 'none' },
+        },
+      },
+      MuiDialog: {
+        defaultProps: {
+          container: rootElement,
+          PaperProps: {
+            className: 'rounded-2xl shadow-2xl',
+          },
+        },
+      },
+      MuiPopover: {
+        // TODO: *Must* remove once SPA is ready
+        // Popover elements, e.g., Menu, MenuItem, attaches an `overflow: hidden` style to this `container` to
+        // prevent scrolling and having the Popover floating senselessly in the `container`. Usually, this `container`
+        // defaults to `body`. This time, we set it to `rootElement` which is NOT `body` nor the viewport. This causes
+        // the senseless floating issue while the page scrolls.
+        defaultProps: { container: rootElement },
+      },
+      MuiPopper: {
+        defaultProps: { container: rootElement },
+      },
+      MuiCard: { styleOverrides: { root: { overflow: 'visible' } } },
+      MuiMenuItem: { styleOverrides: { root: { height: '48px' } } },
+      MuiDialogContent: {
+        styleOverrides: {
+          root: {
+            color: 'black',
+            fontSize: '16px',
+            fontFamily: `'Roboto', 'sans-serif'`,
+          },
+        },
+      },
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: { width: '100%' },
+          content: {
+            margin: 0,
+            paddingLeft: '16px',
+            '&$expanded': { margin: 0 },
+          },
+        },
+      },
+      MuiStepLabel: {
+        styleOverrides: {
+          iconContainer: {
+            paddingLeft: '2px',
+            paddingRight: '2px',
+          },
+        },
+      },
+      MuiTableCell: {
+        styleOverrides: {
+          root: {
+            padding: '8px 14px',
+            height: '48px',
+          },
+          head: {
+            color: grey[500],
+            padding: '16px 16px',
+          },
+          sizeSmall: {
+            padding: '6px 12px',
+            height: '40px',
+          },
+        },
+      },
+      MuiTableRow: {
+        styleOverrides: {
+          root: { '&:last-child td, &:last-child th': { border: 0 } },
+        },
+      },
+    },
+  });
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={theme}>{props.children}</MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+export default ThemeProvider;
diff --git a/client/app/lib/components/wrappers/ToastProvider.tsx b/client/app/lib/components/wrappers/ToastProvider.tsx
new file mode 100644
index 00000000000..ff7d8aea3ce
--- /dev/null
+++ b/client/app/lib/components/wrappers/ToastProvider.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { ToastContainer } from 'react-toastify';
+import { injectStyle } from 'react-toastify/dist/inject-style';
+
+injectStyle();
+
+interface ToastProviderProps {
+  children: ReactNode;
+}
+
+const ToastProvider = (props: ToastProviderProps): JSX.Element => {
+  return (
+    <>
+      {props.children}
+
+      <ToastContainer position="bottom-center" />
+    </>
+  );
+};
+
+export default ToastProvider;
diff --git a/client/app/lib/constants/icons.ts b/client/app/lib/constants/icons.ts
new file mode 100644
index 00000000000..4308173074c
--- /dev/null
+++ b/client/app/lib/constants/icons.ts
@@ -0,0 +1,106 @@
+import {
+  AddCircle,
+  AddCircleOutlineOutlined,
+  Book,
+  BookOutlined,
+  Campaign,
+  CampaignOutlined,
+  ChatBubble,
+  ChatBubbleOutlineOutlined,
+  Circle,
+  CircleOutlined,
+  EmojiEvents,
+  EmojiEventsOutlined,
+  FileCopy,
+  FileCopyOutlined,
+  Folder,
+  FolderOutlined,
+  Forum,
+  ForumOutlined,
+  Groups,
+  GroupsOutlined,
+  Home,
+  HomeOutlined,
+  InsertChart,
+  InsertChartOutlined,
+  Leaderboard,
+  LeaderboardOutlined,
+  ManageAccounts,
+  ManageAccountsOutlined,
+  Map as MapIcon,
+  MapOutlined,
+  OfflineBolt,
+  OfflineBoltOutlined,
+  People,
+  PeopleOutlined,
+  PieChart,
+  PieChartOutlined,
+  Send,
+  SendOutlined,
+  Settings,
+  SettingsOutlined,
+  Stairs,
+  StairsOutlined,
+  SvgIconComponent,
+  Upload,
+  UploadOutlined,
+  Videocam,
+  VideocamOutlined,
+  ViewTimeline,
+  ViewTimelineOutlined,
+} from '@mui/icons-material';
+
+interface IconTuple {
+  outlined: SvgIconComponent;
+  filled: SvgIconComponent;
+}
+
+export const COURSE_COMPONENT_ICONS = {
+  achievement: { outlined: EmojiEventsOutlined, filled: EmojiEvents },
+  assessment: { outlined: SendOutlined, filled: Send },
+  material: { outlined: FolderOutlined, filled: Folder },
+  survey: { outlined: PieChartOutlined, filled: PieChart },
+  video: { outlined: VideocamOutlined, filled: Videocam },
+  announcement: { outlined: CampaignOutlined, filled: Campaign },
+  submission: { outlined: UploadOutlined, filled: Upload },
+  comments: { outlined: ChatBubbleOutlineOutlined, filled: ChatBubble },
+  leaderboard: { outlined: LeaderboardOutlined, filled: Leaderboard },
+  users: { outlined: PeopleOutlined, filled: People },
+  lessonPlan: { outlined: BookOutlined, filled: Book },
+  forum: { outlined: ForumOutlined, filled: Forum },
+  manageUsers: { outlined: ManageAccountsOutlined, filled: ManageAccounts },
+  statistics: { outlined: InsertChartOutlined, filled: InsertChart },
+  disbursement: { outlined: AddCircleOutlineOutlined, filled: AddCircle },
+  duplication: { outlined: FileCopyOutlined, filled: FileCopy },
+  levels: { outlined: StairsOutlined, filled: Stairs },
+  groups: { outlined: GroupsOutlined, filled: Groups },
+  skills: { outlined: OfflineBoltOutlined, filled: OfflineBolt },
+  timelines: { outlined: ViewTimelineOutlined, filled: ViewTimeline },
+  settings: { outlined: SettingsOutlined, filled: Settings },
+  home: { outlined: HomeOutlined, filled: Home },
+  map: { outlined: MapOutlined, filled: MapIcon },
+} satisfies Record<string, IconTuple>;
+
+export type CourseComponentIconName = keyof typeof COURSE_COMPONENT_ICONS;
+
+const DEFAULT_ICON_TUPLE: IconTuple = {
+  outlined: CircleOutlined,
+  filled: Circle,
+};
+
+/**
+ * Returns the `name` component's icon based on the `kind` variant. If the `name`
+ * is unresolved during runtime, the default icon is returned.
+ *
+ * For some reasons, it's possible that `name` is unresolved. This bug was spotted
+ * in CircleCI test runs. Accessing the `kind` by simply doing something like
+ * `COURSE_COMPONENT_ICONS[name][kind]` is therefore unsafe and may result in fatal
+ * error. This function is a defensive wrapper around the unsafe subscription.
+ */
+export const defensivelyGetIcon = (
+  name: CourseComponentIconName,
+  kind: keyof IconTuple = 'filled',
+): SvgIconComponent => {
+  const iconTuple = COURSE_COMPONENT_ICONS[name] ?? DEFAULT_ICON_TUPLE;
+  return iconTuple[kind];
+};
diff --git a/client/app/lib/constants/sharedConstants.ts b/client/app/lib/constants/sharedConstants.ts
index b62b6ddbfb7..83a9da2244d 100644
--- a/client/app/lib/constants/sharedConstants.ts
+++ b/client/app/lib/constants/sharedConstants.ts
@@ -1,10 +1,3 @@
-import {
-  EmojiEvents,
-  Flight,
-  Folder,
-  PieChart,
-  Videocam,
-} from '@mui/icons-material';
 import type { CourseUserRoles, StaffRoles } from 'types/course/courseUsers';
 import {
   InstanceUserRoles,
@@ -59,14 +52,6 @@ export const AVAILABLE_LOCALES: { [key in Locale]: string } = {
   zh: '中文',
 };
 
-export const COURSE_COMPONENT_ICONS = {
-  achievement: EmojiEvents,
-  assessment: Flight,
-  material: Folder,
-  survey: PieChart,
-  video: Videocam,
-};
-
 export default {
   TIMELINE_ALGORITHMS,
   USER_ROLES,
diff --git a/client/app/lib/containers/AppContainer/AppContainer.tsx b/client/app/lib/containers/AppContainer/AppContainer.tsx
new file mode 100644
index 00000000000..896073ccbc6
--- /dev/null
+++ b/client/app/lib/containers/AppContainer/AppContainer.tsx
@@ -0,0 +1,36 @@
+import { Outlet } from 'react-router-dom';
+
+import NotificationPopup from 'lib/containers/NotificationPopup';
+
+import { loader, useAppLoader } from './AppLoader';
+import GlobalAnnouncements from './GlobalAnnouncements';
+import IfRailsSaysSafeToRender from './IfRailsSaysSafeToRender';
+import MasqueradeBanner from './MasqueradeBanner';
+
+const AppContainer = (): JSX.Element => {
+  const data = useAppLoader();
+  const homeData = data.home;
+
+  return (
+    <div className="flex h-screen flex-col">
+      {homeData.stopMasqueradingUrl && homeData.masqueradeUserName && (
+        <MasqueradeBanner
+          as={homeData.masqueradeUserName}
+          stopMasqueradingUrl={homeData.stopMasqueradingUrl}
+        />
+      )}
+
+      {Boolean(data.announcements?.length) && (
+        <GlobalAnnouncements in={data.announcements} />
+      )}
+
+      <IfRailsSaysSafeToRender>
+        <Outlet context={homeData} />
+      </IfRailsSaysSafeToRender>
+
+      <NotificationPopup />
+    </div>
+  );
+};
+
+export default Object.assign(AppContainer, { loader });
diff --git a/client/app/lib/containers/AppContainer/AppLoader.ts b/client/app/lib/containers/AppContainer/AppLoader.ts
new file mode 100644
index 00000000000..db439035ac2
--- /dev/null
+++ b/client/app/lib/containers/AppContainer/AppLoader.ts
@@ -0,0 +1,20 @@
+import { useLoaderData, useOutletContext } from 'react-router-dom';
+import { AnnouncementMiniEntity } from 'types/course/announcements';
+import { HomeLayoutData } from 'types/home';
+
+import GlobalAPI from 'api';
+
+interface AppLoaderData {
+  home: HomeLayoutData;
+  announcements: AnnouncementMiniEntity[];
+}
+
+export const loader = async (): Promise<AppLoaderData> => ({
+  home: (await GlobalAPI.home.fetch()).data,
+  announcements: (await GlobalAPI.announcements.index(true)).data.announcements,
+});
+
+export const useAppLoader = (): AppLoaderData =>
+  useLoaderData() as AppLoaderData;
+
+export const useAppContext = (): HomeLayoutData => useOutletContext();
diff --git a/client/app/lib/containers/AppContainer/GlobalAnnouncements.tsx b/client/app/lib/containers/AppContainer/GlobalAnnouncements.tsx
new file mode 100644
index 00000000000..aa378f01568
--- /dev/null
+++ b/client/app/lib/containers/AppContainer/GlobalAnnouncements.tsx
@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import { defineMessages } from 'react-intl';
+import { CampaignOutlined, Close } from '@mui/icons-material';
+import { IconButton, Typography } from '@mui/material';
+import produce from 'immer';
+import { AnnouncementMiniEntity } from 'types/course/announcements';
+
+import GlobalAPI from 'api';
+import useTranslation from 'lib/hooks/useTranslation';
+import { formatFullDateTime } from 'lib/moment';
+
+const translations = defineMessages({
+  nUnreadAnnouncements: {
+    id: 'course.announcements.GlobalAnnouncements.nUnreadAnnouncements',
+    defaultMessage:
+      '{n} more unread {n, plural, one {announcement} other {announcements}}',
+  },
+});
+
+interface GlobalAnnouncementsProps {
+  in: AnnouncementMiniEntity[];
+}
+
+const GlobalAnnouncements = (
+  props: GlobalAnnouncementsProps,
+): JSX.Element | null => {
+  const [announcements, setAnnouncements] = useState(props.in);
+
+  const { t } = useTranslation();
+
+  const latestAnnouncement = announcements[0];
+  if (!latestAnnouncement) return null;
+
+  const markAsRead = async (index: number): Promise<void> => {
+    const announcement = announcements[index];
+
+    try {
+      await GlobalAPI.announcements.markAsRead(announcement.markAsReadUrl);
+    } catch {
+      /* empty */
+    } finally {
+      setAnnouncements(
+        produce((draft) => {
+          draft.splice(index, 1);
+        }),
+      );
+    }
+  };
+
+  return (
+    <>
+      <div className="flex items-start space-x-4 px-5 py-3 border-only-b-neutral-200">
+        <CampaignOutlined />
+
+        <div className="w-full">
+          <Typography className="font-medium" variant="body2">
+            {latestAnnouncement.title}
+          </Typography>
+
+          <Typography color="text.secondary" variant="caption">
+            {formatFullDateTime(latestAnnouncement.startTime)}
+          </Typography>
+
+          <Typography
+            className="mt-2"
+            dangerouslySetInnerHTML={{
+              __html: latestAnnouncement.content,
+            }}
+            variant="body2"
+          />
+        </div>
+
+        <IconButton onClick={(): Promise<void> => markAsRead(0)} size="small">
+          <Close />
+        </IconButton>
+      </div>
+
+      {announcements.length > 1 && (
+        <div className="flex items-center space-x-4 px-5 py-1 border-only-b-neutral-200">
+          <CampaignOutlined />
+
+          <Typography variant="body2">
+            {t(translations.nUnreadAnnouncements, {
+              n: announcements.length - 1,
+            })}
+          </Typography>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default GlobalAnnouncements;
diff --git a/client/app/lib/containers/AppContainer/IfRailsSaysSafeToRender.tsx b/client/app/lib/containers/AppContainer/IfRailsSaysSafeToRender.tsx
new file mode 100644
index 00000000000..70c2a1e0d3e
--- /dev/null
+++ b/client/app/lib/containers/AppContainer/IfRailsSaysSafeToRender.tsx
@@ -0,0 +1,162 @@
+import { ComponentType, ReactNode, useEffect } from 'react';
+import { defineMessages } from 'react-intl';
+import {
+  ArrowBack,
+  ConfirmationNumberOutlined,
+  DoNotDisturbOnOutlined,
+  SvgIconComponent,
+} from '@mui/icons-material';
+import { Typography } from '@mui/material';
+
+import Link from 'lib/components/core/Link';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  accessDenied: {
+    id: 'app.containers.AppContainer.AppErrorPage.accessDenied',
+    defaultMessage: 'Oops, access denied!',
+  },
+  accessDeniedDescription: {
+    id: 'app.containers.AppContainer.AppErrorPage.accessDeniedDescription',
+    defaultMessage: 'You are not authorised to access this page.',
+  },
+  goBack: {
+    id: 'app.containers.AppContainer.AppErrorPage.goBack',
+    defaultMessage: 'Go back',
+  },
+  sessionExpired: {
+    id: 'app.containers.AppContainer.AppErrorPage.sessionExpired',
+    defaultMessage: "You'll need to sign in again.",
+  },
+  sessionExpiredDescription: {
+    id: 'app.containers.AppContainer.AppErrorPage.sessionExpiredDescription',
+    defaultMessage:
+      "Your previous session is expired. We're redirecting you to the sign in page.",
+  },
+  goToSignInPage: {
+    id: 'app.containers.AppContainer.AppErrorPage.goToSignInPage',
+    defaultMessage: 'Go to the sign in page now',
+  },
+});
+
+interface MessageBodyProps {
+  Icon: SvgIconComponent;
+  iconClassName?: string;
+  title: string;
+  description: string;
+  children?: ReactNode;
+}
+
+const MessageBody = ({ Icon, ...props }: MessageBodyProps): JSX.Element => (
+  <main className="flex max-w-lg flex-col items-center justify-center">
+    <Icon className={`text-9xl ${props.iconClassName ?? ''}`} />
+
+    <section className="mt-6 flex flex-col space-y-3 text-center text-white">
+      <Typography variant="h5">{props.title}</Typography>
+
+      <Typography variant="body2">{props.description}</Typography>
+    </section>
+
+    {props.children}
+  </main>
+);
+
+const ForbiddenMessageBody = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <MessageBody
+      description={t(translations.accessDeniedDescription)}
+      Icon={DoNotDisturbOnOutlined}
+      iconClassName="text-red-500"
+      title={t(translations.accessDenied)}
+    >
+      <Link
+        className="!mt-8 flex cursor-pointer items-center space-x-2 text-primary"
+        onClick={(): void => {
+          window.history.back();
+        }}
+        underline="hover"
+      >
+        <ArrowBack fontSize="small" />
+        <span>{t(translations.goBack)}</span>
+      </Link>
+    </MessageBody>
+  );
+};
+
+const SessionExpiredMessageBody = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const redirectTimeout = setTimeout(() => {
+      window.location.href = '/users/sign_in';
+    }, 2000);
+
+    return () => clearTimeout(redirectTimeout);
+  }, []);
+
+  return (
+    <MessageBody
+      description={t(translations.sessionExpiredDescription)}
+      Icon={ConfirmationNumberOutlined}
+      iconClassName="text-amber-500"
+      title={t(translations.sessionExpired)}
+    >
+      <Link
+        className="!mt-8 flex cursor-pointer items-center space-x-2 text-primary"
+        href="/users/sign_in"
+        underline="hover"
+      >
+        {t(translations.goToSignInPage)}
+      </Link>
+    </MessageBody>
+  );
+};
+
+const messageBodies: Record<number, ComponentType> = {
+  403: ForbiddenMessageBody,
+  401: SessionExpiredMessageBody,
+};
+
+/**
+ * Returns the HTTP status code from the Rails' router, if found.
+ *
+ * This works in unison with `default.slim.html` defining a `meta` tag with the response
+ * HTTP status code as integer.
+ */
+const getRailsResponseStatusCode = (): number | undefined => {
+  const statusMeta = document.querySelector('meta[name="status"]');
+  const content = statusMeta?.getAttribute('content');
+  if (!content) return undefined;
+
+  return parseInt(content, 10);
+};
+
+/**
+ * Renders the `children` if Rails' router says that the page is safe to render.
+ *
+ * Since Rails' router still renders parts of the page when we get a 403, the mounted React
+ * app will still load the React page and make a HTTP request (if needed), and would probably
+ * fail. This component is a TEMPORARY workaround to prevent the (rest of the) React app from
+ * rendering if Rails' deem our request NOT to be safe.
+ *
+ * "Safe" here means that Rails' HTML render response has an HTTP status code listed in
+ * `keyof messageBodies`.
+ */
+const IfRailsSaysSafeToRender = (props: {
+  children: JSX.Element;
+}): JSX.Element => {
+  const status = getRailsResponseStatusCode();
+
+  const StatusMessageBody = status && messageBodies[status];
+  if (!StatusMessageBody) return props.children;
+
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-neutral-900 p-5">
+      <StatusMessageBody />
+    </div>
+  );
+};
+
+export default IfRailsSaysSafeToRender;
diff --git a/client/app/lib/containers/AppContainer/MasqueradeBanner.tsx b/client/app/lib/containers/AppContainer/MasqueradeBanner.tsx
new file mode 100644
index 00000000000..9dd01bc390b
--- /dev/null
+++ b/client/app/lib/containers/AppContainer/MasqueradeBanner.tsx
@@ -0,0 +1,55 @@
+import { defineMessages } from 'react-intl';
+import { TheaterComedy } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+
+import Link from 'lib/components/core/Link';
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  masquerading: {
+    id: 'lib.components.core.banners.MasqueradeBanner.masquerading',
+    defaultMessage: 'Masquerading as <strong>{as}</strong>.',
+  },
+  stopMasquerading: {
+    id: 'lib.components.core.banners.MasqueradeBanner.stopMasquerading',
+    defaultMessage: 'Stop masquerading',
+  },
+});
+
+interface MasqueradeBannerProps {
+  as: string;
+  stopMasqueradingUrl: string;
+}
+
+const MasqueradeBanner = (props: MasqueradeBannerProps): JSX.Element => {
+  const { as: userName, stopMasqueradingUrl } = props;
+
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-wrap items-center justify-between space-x-4 bg-fuchsia-700 px-5 py-1 text-white border-only-b-fuchsia-300">
+      <div className="flex items-center space-x-4">
+        <TheaterComedy />
+
+        <Typography variant="body2">
+          {t(translations.masquerading, {
+            as: userName,
+            strong: (chunk) => (
+              <strong className="font-semibold">{chunk}</strong>
+            ),
+          })}
+        </Typography>
+      </div>
+
+      <Link
+        className="text-inherit"
+        href={stopMasqueradingUrl}
+        underline="hover"
+      >
+        {t(translations.stopMasquerading)}
+      </Link>
+    </div>
+  );
+};
+
+export default MasqueradeBanner;
diff --git a/client/app/lib/containers/AppContainer/index.ts b/client/app/lib/containers/AppContainer/index.ts
new file mode 100644
index 00000000000..344db757f84
--- /dev/null
+++ b/client/app/lib/containers/AppContainer/index.ts
@@ -0,0 +1,2 @@
+export { default } from './AppContainer';
+export { useAppContext } from './AppLoader';
diff --git a/client/app/lib/containers/CourselessContainer.tsx b/client/app/lib/containers/CourselessContainer.tsx
new file mode 100644
index 00000000000..79a42d3ab4d
--- /dev/null
+++ b/client/app/lib/containers/CourselessContainer.tsx
@@ -0,0 +1,51 @@
+import { Outlet } from 'react-router-dom';
+
+import Footer from 'lib/components/core/layouts/Footer';
+import {
+  CrumbData,
+  CrumbTitle,
+  useDynamicNest,
+} from 'lib/hooks/router/dynamicNest';
+import useTranslation, { translatable } from 'lib/hooks/useTranslation';
+
+import BrandingHead from '../components/navigation/BrandingHead';
+
+const getLastCrumbTitle = (crumbs: CrumbData[]): CrumbTitle | null => {
+  const content = crumbs.at(-1)?.content;
+  if (!content) return null;
+
+  const actualContent = Array.isArray(content) ? content.at(-1) : content;
+  if (!actualContent) return null;
+
+  return actualContent.title;
+};
+
+/**
+ * Container for non-course pages. Pending name and design.
+ */
+const CourselessContainer = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  const { crumbs } = useDynamicNest();
+
+  const crumbTitle = getLastCrumbTitle(crumbs);
+  const title = translatable(crumbTitle) ? t(crumbTitle) : crumbTitle;
+
+  return (
+    <div className="flex h-full w-full flex-col">
+      <header className="border-only-b-neutral-200">
+        <BrandingHead title={title} />
+      </header>
+
+      <div className="relative h-full">
+        <main className="min-h-[calc(100%_-_4rem)] w-full">
+          <Outlet />
+        </main>
+
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default CourselessContainer;
diff --git a/client/app/lib/helpers/react-hook-form-helper.js b/client/app/lib/helpers/react-hook-form-helper.js
index e70c9b7520f..8a5d480deeb 100644
--- a/client/app/lib/helpers/react-hook-form-helper.js
+++ b/client/app/lib/helpers/react-hook-form-helper.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
-
 const toCamel = (str) =>
   str.replace(/([-_][a-z])/gi, ($1) =>
     $1.toUpperCase().replace('-', '').replace('_', ''),
diff --git a/client/app/lib/hooks/router/dynamicNest/builder.ts b/client/app/lib/hooks/router/dynamicNest/builder.ts
new file mode 100644
index 00000000000..0ed5465acf0
--- /dev/null
+++ b/client/app/lib/hooks/router/dynamicNest/builder.ts
@@ -0,0 +1,60 @@
+import { Location } from 'react-router-dom';
+
+import { buildCrumbData, CrumbData, CrumbState } from './crumbs';
+import {
+  getHandleData,
+  getHandleRequestData,
+  getShouldRevalidateCrumb,
+} from './handles';
+import { isPromise, Match, Promisable } from './utils';
+
+interface CrumbsDataBuilderResult {
+  data: Promisable<CrumbData[]>;
+  hasPending: boolean;
+  invalidCrumbs: Set<string>;
+}
+
+export const buildCrumbsData = (
+  matches: Match[],
+  location: Location,
+  state: CrumbState,
+): CrumbsDataBuilderResult => {
+  const invalidCrumbs = new Set(Object.keys(state));
+  const oldCrumbsCount = invalidCrumbs.size;
+
+  let hasPromise = false;
+  let newCrumbsCount = 0;
+
+  const delta = matches.reduce<Promisable<CrumbData>[]>((crumbs, match) => {
+    const handleData = getHandleData(match, location);
+    if (!handleData) return crumbs;
+
+    newCrumbsCount += 1;
+
+    const crumbExists = invalidCrumbs.has(match.pathname);
+
+    if (getShouldRevalidateCrumb(handleData) || crumbExists)
+      invalidCrumbs.delete(match.pathname);
+
+    if (getShouldRevalidateCrumb(handleData) || !crumbExists) {
+      const content = getHandleRequestData(handleData);
+
+      if (isPromise(content)) {
+        hasPromise = true;
+        crumbs.push(content.then((data) => buildCrumbData(match, data)));
+      } else {
+        crumbs.push(buildCrumbData(match, content));
+      }
+    }
+
+    return crumbs;
+  }, []);
+
+  const validCrumbsCount = oldCrumbsCount - invalidCrumbs.size;
+
+  return {
+    data: hasPromise ? Promise.all(delta) : (delta as CrumbData[]),
+    hasPending: newCrumbsCount > validCrumbsCount,
+    invalidCrumbs,
+  };
+};
diff --git a/client/app/lib/hooks/router/dynamicNest/crumbs.ts b/client/app/lib/hooks/router/dynamicNest/crumbs.ts
new file mode 100644
index 00000000000..a34b5f61aff
--- /dev/null
+++ b/client/app/lib/hooks/router/dynamicNest/crumbs.ts
@@ -0,0 +1,55 @@
+import produce from 'immer';
+
+import { Descriptor } from 'lib/hooks/useTranslation';
+
+import { isRecord, Match } from './utils';
+
+export type CrumbTitle = string | Descriptor | null | undefined;
+
+export interface CrumbContent {
+  url?: string;
+  title?: CrumbTitle;
+}
+
+export interface CrumbData {
+  id: string;
+  pathname: string;
+  activePath?: string | null;
+  content?: CrumbContent | CrumbContent[];
+}
+
+export interface CrumbPath {
+  pathname?: string;
+  activePath?: string | null;
+  content?: CrumbContent | CrumbContent[];
+}
+
+export type CrumbState = Record<string, CrumbData>;
+
+export const isCrumbPath = (value: unknown): value is CrumbPath =>
+  isRecord(value) && 'content' in value;
+
+export const buildCrumbData = (
+  match: Match,
+  data: CrumbTitle | CrumbPath,
+): CrumbData => ({
+  id: match.id,
+  pathname: match.pathname,
+  ...(isCrumbPath(data)
+    ? data
+    : {
+        content: {
+          title: data,
+          url: match.pathname,
+        },
+      }),
+});
+
+export const combineCrumbs = (
+  delta: CrumbData[],
+): ((state: CrumbState) => CrumbState) =>
+  produce((draft) => {
+    delta.forEach((crumb) => {
+      draft[crumb.pathname] = crumb;
+    });
+  });
diff --git a/client/app/lib/hooks/router/dynamicNest/handles.ts b/client/app/lib/hooks/router/dynamicNest/handles.ts
new file mode 100644
index 00000000000..9b258f5d2eb
--- /dev/null
+++ b/client/app/lib/hooks/router/dynamicNest/handles.ts
@@ -0,0 +1,33 @@
+import { Location } from 'react-router-dom';
+
+import { CrumbPath, CrumbTitle } from './crumbs';
+import { isRecord, Match, Promisable } from './utils';
+
+interface HandleRequest {
+  shouldRevalidate?: boolean;
+  getData: () => Promisable<CrumbTitle | CrumbPath>;
+}
+
+export type HandleData = CrumbTitle | HandleRequest | null;
+
+export type DataHandle = (match: Match, location: Location) => HandleData;
+
+export type Handle = CrumbTitle | DataHandle;
+
+export const isHandleRequest = (value: unknown): value is HandleRequest =>
+  isRecord(value) && 'getData' in value && typeof value.getData === 'function';
+
+export const getHandleData = (match: Match, location: Location): HandleData => {
+  const handle = match.handle as Handle | undefined;
+  if (!handle) return null;
+
+  return typeof handle === 'function' ? handle(match, location) : handle;
+};
+
+export const getShouldRevalidateCrumb = (data: HandleData): boolean =>
+  isHandleRequest(data) && (data.shouldRevalidate ?? false);
+
+export const getHandleRequestData = (
+  data: HandleData,
+): Promisable<CrumbTitle | CrumbPath> =>
+  isHandleRequest(data) ? data.getData() : data;
diff --git a/client/app/lib/hooks/router/dynamicNest/index.ts b/client/app/lib/hooks/router/dynamicNest/index.ts
new file mode 100644
index 00000000000..1cfad6a63e7
--- /dev/null
+++ b/client/app/lib/hooks/router/dynamicNest/index.ts
@@ -0,0 +1,3 @@
+export type { CrumbContent, CrumbData, CrumbPath, CrumbTitle } from './crumbs';
+export type { DataHandle } from './handles';
+export { default as useDynamicNest } from './useDynamicNest';
diff --git a/client/app/lib/hooks/router/dynamicNest/useDynamicNest.ts b/client/app/lib/hooks/router/dynamicNest/useDynamicNest.ts
new file mode 100644
index 00000000000..1f43dd20360
--- /dev/null
+++ b/client/app/lib/hooks/router/dynamicNest/useDynamicNest.ts
@@ -0,0 +1,69 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation, useMatches } from 'react-router-dom';
+import produce from 'immer';
+
+import { buildCrumbsData } from './builder';
+import { combineCrumbs, CrumbData, CrumbState } from './crumbs';
+import { isPromise } from './utils';
+
+interface UseDynamicNestHook {
+  crumbs: CrumbData[];
+  loading: boolean;
+  activePath?: string;
+}
+
+const useDynamicNest = (): UseDynamicNestHook => {
+  const matches = useMatches();
+  const location = useLocation();
+
+  const [state, setState] = useState<CrumbState>({});
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let ignore = false;
+
+    const result = buildCrumbsData(matches, location, state);
+
+    if (isPromise(result.data)) {
+      setLoading(result.hasPending);
+
+      result.data
+        .then((crumbs) => !ignore && setState(combineCrumbs(crumbs)))
+        .finally(() => setLoading(false));
+    } else {
+      setState(combineCrumbs(result.data));
+    }
+
+    setState(
+      produce((draft) => {
+        result.invalidCrumbs.forEach((pathname) => delete draft[pathname]);
+      }),
+    );
+
+    return () => {
+      ignore = true;
+    };
+  }, [matches]);
+
+  const crumbs = useMemo(
+    () => Object.values(state).sort((a, b) => a.id.localeCompare(b.id)),
+    [state],
+  );
+
+  const activePath = useMemo(() => {
+    for (let index = crumbs.length - 1; index >= 0; index--) {
+      const crumb = crumbs[index];
+
+      // Allow the distinction between `undefined` and `null`. If `activePath`
+      // is `null`, it means that explicitly there shouldn't be any active paths
+      // for the current nest.
+      if (crumb.activePath !== undefined) return crumb.activePath ?? '';
+    }
+
+    return undefined;
+  }, [crumbs]);
+
+  return { crumbs, loading, activePath };
+};
+
+export default useDynamicNest;
diff --git a/client/app/lib/hooks/router/dynamicNest/utils.ts b/client/app/lib/hooks/router/dynamicNest/utils.ts
new file mode 100644
index 00000000000..2eddfe7e95b
--- /dev/null
+++ b/client/app/lib/hooks/router/dynamicNest/utils.ts
@@ -0,0 +1,12 @@
+import { useMatches } from 'react-router-dom';
+
+export type Promisable<T> = T | Promise<T>;
+
+export type Match = ReturnType<typeof useMatches>[number];
+
+export const isRecord = <K extends string | number | symbol, V>(
+  value: unknown,
+): value is Record<K, V> => typeof value === 'object' && value !== null;
+
+export const isPromise = <T>(value: unknown): value is Promise<T> =>
+  isRecord(value) && 'then' in value && typeof value.then === 'function';
diff --git a/client/app/lib/hooks/router/usePrompt.tsx b/client/app/lib/hooks/router/usePrompt.tsx
index 834a71714c1..b54a3856a2a 100644
--- a/client/app/lib/hooks/router/usePrompt.tsx
+++ b/client/app/lib/hooks/router/usePrompt.tsx
@@ -1,41 +1,57 @@
-import { useCallback, useContext, useEffect } from 'react';
-import {
-  Navigator,
-  UNSAFE_NavigationContext as NavigationContext,
-} from 'react-router-dom';
-import { History, Transition } from 'history';
-
-type ExtendNavigator = Navigator & Pick<History, 'block'>;
-
-const useBlocker = (blocker: (tx: Transition) => void, when = true): void => {
-  const { navigator } = useContext(NavigationContext);
-
-  useEffect(() => {
-    if (!when) return undefined;
-
-    const unblock = (navigator as ExtendNavigator).block((tx) => {
-      const autoUnblockingTx = {
-        ...tx,
-        retry(): void {
-          unblock();
-          tx.retry();
-        },
-      };
-
-      blocker(autoUnblockingTx);
-    });
-
-    return unblock;
-  }, [navigator, blocker, when]);
+import { useEffect } from 'react';
+import { defineMessages } from 'react-intl';
+import { unstable_usePrompt } from 'react-router-dom';
+
+import useTranslation from '../useTranslation';
+
+const translations = defineMessages({
+  sureYouWantToLeave: {
+    id: 'lib.hooks.router.usePrompt.sureYouWantToLeave',
+    defaultMessage:
+      'Are you sure you want to leave this page? You will lose unsaved changes.',
+  },
+});
+
+/**
+ * `window.onbeforeunload` will block page unload if this handler returns a string.
+ * Since the spec has disallowed custom messages, the returned string can be anything.
+ *
+ * @see https://chromestatus.com/feature/5349061406228480
+ */
+const blocker: OnBeforeUnloadEventHandler = (e) => {
+  e.preventDefault();
+  return 'null';
 };
 
+/**
+ * Prompts the user before navigating away from the current page if `when` is `true`.
+ *
+ * There is no need to allow customising messages since `window.onbeforeunload`
+ * disallows custom messages. Even if `unstable_usePrompt` allows customisable
+ * messages, this means that this message is never guaranteed to appear, so no point
+ * in allowing it here anyway.
+ */
 const usePrompt = (when = true): void => {
-  const blocker = useCallback((tx: Transition) => {
-    // eslint-disable-next-line no-alert
-    if (window.confirm()) tx.retry();
-  }, []);
+  const { t } = useTranslation();
+
+  // `unstable_usePrompt` doesn't block the page when the user closes the tab/window,
+  // refreshes the page, or changes the URL manually. We need to use `window.onbeforeunload`
+  // to block for these cases.
+  //
+  // We can no longer do this with `navigator.block` as of React Router 6.4.0.
+  // See https://github.com/remix-run/react-router/issues/8139#issuecomment-1262630360
+  useEffect(() => {
+    if (when) window.onbeforeunload = blocker;
+
+    return () => {
+      window.onbeforeunload = null;
+    };
+  }, [when]);
 
-  useBlocker(blocker, when);
+  return unstable_usePrompt({
+    when,
+    message: t(translations.sureYouWantToLeave),
+  });
 };
 
 export default usePrompt;
diff --git a/client/app/lib/hooks/useMedia.ts b/client/app/lib/hooks/useMedia.ts
new file mode 100644
index 00000000000..908ae2a3040
--- /dev/null
+++ b/client/app/lib/hooks/useMedia.ts
@@ -0,0 +1,17 @@
+import { useMediaQuery } from '@mui/material';
+import { Breakpoint, useTheme } from '@mui/material/styles';
+
+const PointerCoarse = (): boolean => useMediaQuery('(pointer: coarse)');
+const PointerFine = (): boolean => useMediaQuery('(pointer: fine)');
+
+const MinWidth = (breakpoint: Breakpoint): boolean => {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(breakpoint));
+};
+
+const MaxWidth = (breakpoint: Breakpoint): boolean => {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.up(breakpoint));
+};
+
+export default { PointerCoarse, PointerFine, MinWidth, MaxWidth };
diff --git a/client/app/lib/hooks/useTranslation.ts b/client/app/lib/hooks/useTranslation.ts
index 8bbfb06de46..32f0720c40b 100644
--- a/client/app/lib/hooks/useTranslation.ts
+++ b/client/app/lib/hooks/useTranslation.ts
@@ -18,6 +18,12 @@ interface TranslationHook {
   t: MessageTranslator;
 }
 
+export const translatable = (object: unknown): object is Descriptor =>
+  typeof object === 'object' &&
+  object !== null &&
+  'id' in object &&
+  'defaultMessage' in object;
+
 const useTranslation = (): TranslationHook => {
   const intl = useIntl();
 
diff --git a/client/app/lib/initializers/webfont.js b/client/app/lib/initializers/webfont.js
index 568ac7b606a..7f9221b4f68 100644
--- a/client/app/lib/initializers/webfont.js
+++ b/client/app/lib/initializers/webfont.js
@@ -6,7 +6,7 @@ import WebFont from 'webfontloader';
 
 WebFont.load({
   google: {
-    families: ['Roboto:400,700,i4', 'Varela Round'],
+    families: ['Inter:400,500,600,700,i4', 'Varela Round'],
   },
   timeout: 1500,
 });
diff --git a/client/app/router.tsx b/client/app/router.tsx
new file mode 100644
index 00000000000..d4b968096d8
--- /dev/null
+++ b/client/app/router.tsx
@@ -0,0 +1,775 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { Navigate, RouteObject } from 'react-router-dom';
+import { resetStore } from 'store';
+
+import GlobalAnnouncementIndex from 'bundles/announcements/GlobalAnnouncementIndex';
+import AchievementShow from 'bundles/course/achievement/pages/AchievementShow';
+import AchievementsIndex from 'bundles/course/achievement/pages/AchievementsIndex';
+import SettingsNavigation from 'bundles/course/admin/components/SettingsNavigation';
+import AnnouncementSettings from 'bundles/course/admin/pages/AnnouncementsSettings';
+import AssessmentSettings from 'bundles/course/admin/pages/AssessmentSettings';
+import CodaveriSettings from 'bundles/course/admin/pages/CodaveriSettings';
+import CommentsSettings from 'bundles/course/admin/pages/CommentsSettings';
+import ComponentSettings from 'bundles/course/admin/pages/ComponentSettings';
+import CourseSettings from 'bundles/course/admin/pages/CourseSettings';
+import ForumsSettings from 'bundles/course/admin/pages/ForumsSettings';
+import LeaderboardSettings from 'bundles/course/admin/pages/LeaderboardSettings';
+import LessonPlanSettings from 'bundles/course/admin/pages/LessonPlanSettings';
+import MaterialsSettings from 'bundles/course/admin/pages/MaterialsSettings';
+import NotificationSettings from 'bundles/course/admin/pages/NotificationSettings';
+import SidebarSettings from 'bundles/course/admin/pages/SidebarSettings';
+import VideosSettings from 'bundles/course/admin/pages/VideosSettings';
+import AnnouncementsIndex from 'bundles/course/announcements/pages/AnnouncementsIndex';
+import AssessmentEdit from 'bundles/course/assessment/pages/AssessmentEdit';
+import AssessmentMonitoring from 'bundles/course/assessment/pages/AssessmentMonitoring';
+import AssessmentShow from 'bundles/course/assessment/pages/AssessmentShow';
+import AssessmentsIndex from 'bundles/course/assessment/pages/AssessmentsIndex';
+import AssessmentStatisticsPage from 'bundles/course/assessment/pages/AssessmentStatistics';
+import EditForumPostResponsePage from 'bundles/course/assessment/question/forum-post-responses/EditForumPostResponsePage';
+import NewForumPostResponsePage from 'bundles/course/assessment/question/forum-post-responses/NewForumPostResponsePage';
+import EditMcqMrqPage from 'bundles/course/assessment/question/multiple-responses/EditMcqMrqPage';
+import NewMcqMrqPage from 'bundles/course/assessment/question/multiple-responses/NewMcqMrqPage';
+import EditProgrammingQuestionPage from 'bundles/course/assessment/question/programming/EditProgrammingQuestionPage';
+import NewProgrammingQuestionPage from 'bundles/course/assessment/question/programming/NewProgrammingQuestionPage';
+import ScribingQuestion from 'bundles/course/assessment/question/scribing/ScribingQuestion';
+import EditTextResponse from 'bundles/course/assessment/question/text-responses/EditTextResponsePage';
+import NewTextResponse from 'bundles/course/assessment/question/text-responses/NewTextResponsePage';
+import EditVoicePage from 'bundles/course/assessment/question/voice-responses/EditVoicePage';
+import NewVoicePage from 'bundles/course/assessment/question/voice-responses/NewVoicePage';
+import AssessmentSessionNew from 'bundles/course/assessment/sessions/pages/AssessmentSessionNew';
+import SkillsIndex from 'bundles/course/assessment/skills/pages/SkillsIndex';
+import LogsIndex from 'bundles/course/assessment/submission/pages/LogsIndex';
+import SubmissionEditIndex from 'bundles/course/assessment/submission/pages/SubmissionEditIndex';
+import AssessmentSubmissionsIndex from 'bundles/course/assessment/submission/pages/SubmissionsIndex';
+import SubmissionsIndex from 'bundles/course/assessment/submissions/SubmissionsIndex';
+import CourseShow from 'bundles/course/courses/pages/CourseShow';
+import CoursesIndex from 'bundles/course/courses/pages/CoursesIndex';
+import CommentIndex from 'bundles/course/discussion/topics/pages/CommentIndex';
+import Duplication from 'bundles/course/duplication/pages/Duplication';
+import UserRequests from 'bundles/course/enrol-requests/pages/UserRequests';
+import DisbursementIndex from 'bundles/course/experience-points/disbursement/pages/DisbursementIndex';
+import ForumShow from 'bundles/course/forum/pages/ForumShow';
+import ForumsIndex from 'bundles/course/forum/pages/ForumsIndex';
+import ForumTopicShow from 'bundles/course/forum/pages/ForumTopicShow';
+import GroupIndex from 'bundles/course/group/pages/GroupIndex';
+import GroupShow from 'bundles/course/group/pages/GroupShow';
+import LeaderboardIndex from 'bundles/course/leaderboard/pages/LeaderboardIndex';
+import LearningMap from 'bundles/course/learning-map/containers/LearningMap';
+import LessonPlanLayout from 'bundles/course/lesson-plan/containers/LessonPlanLayout';
+import LessonPlanEdit from 'bundles/course/lesson-plan/pages/LessonPlanEdit';
+import LessonPlanShow from 'bundles/course/lesson-plan/pages/LessonPlanShow';
+import LevelsIndex from 'bundles/course/level/pages/LevelsIndex';
+import FolderShow from 'bundles/course/material/folders/pages/FolderShow';
+import TimelineDesigner from 'bundles/course/reference-timelines/TimelineDesigner';
+import StatisticsIndex from 'bundles/course/statistics/pages/StatisticsIndex';
+import ResponseEdit from 'bundles/course/survey/pages/ResponseEdit';
+import ResponseIndex from 'bundles/course/survey/pages/ResponseIndex';
+import ResponseShow from 'bundles/course/survey/pages/ResponseShow';
+import SurveyIndex from 'bundles/course/survey/pages/SurveyIndex';
+import SurveyResults from 'bundles/course/survey/pages/SurveyResults';
+import SurveyShow from 'bundles/course/survey/pages/SurveyShow';
+import UserEmailSubscriptions from 'bundles/course/user-email-subscriptions/UserEmailSubscriptions';
+import InvitationsIndex from 'bundles/course/user-invitations/pages/InvitationsIndex';
+import InviteUsers from 'bundles/course/user-invitations/pages/InviteUsers';
+import ExperiencePointsRecords from 'bundles/course/users/pages/ExperiencePointsRecords';
+import ManageStaff from 'bundles/course/users/pages/ManageStaff';
+import ManageStudents from 'bundles/course/users/pages/ManageStudents';
+import PersonalTimes from 'bundles/course/users/pages/PersonalTimes';
+import PersonalTimesShow from 'bundles/course/users/pages/PersonalTimesShow';
+import CourseUserShow from 'bundles/course/users/pages/UserShow';
+import UsersIndex from 'bundles/course/users/pages/UsersIndex';
+import VideoShow from 'bundles/course/video/pages/VideoShow';
+import VideosIndex from 'bundles/course/video/pages/VideosIndex';
+import VideoSubmissionEdit from 'bundles/course/video/submission/pages/VideoSubmissionEdit';
+import VideoSubmissionShow from 'bundles/course/video/submission/pages/VideoSubmissionShow';
+import VideoSubmissionsIndex from 'bundles/course/video/submission/pages/VideoSubmissionsIndex';
+import UserVideoSubmissionsIndex from 'bundles/course/video-submissions/pages/UserVideoSubmissionsIndex';
+import AdminNavigator from 'bundles/system/admin/admin/AdminNavigator';
+import AnnouncementIndex from 'bundles/system/admin/admin/pages/AnnouncementsIndex';
+import CourseIndex from 'bundles/system/admin/admin/pages/CoursesIndex';
+import InstancesIndex from 'bundles/system/admin/admin/pages/InstancesIndex';
+import UserIndex from 'bundles/system/admin/admin/pages/UsersIndex';
+import InstanceAdminNavigator from 'bundles/system/admin/instance/instance/InstanceAdminNavigator';
+import InstanceAnnouncementsIndex from 'bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex';
+import InstanceComponentsIndex from 'bundles/system/admin/instance/instance/pages/InstanceComponentsIndex';
+import InstanceCoursesIndex from 'bundles/system/admin/instance/instance/pages/InstanceCoursesIndex';
+import InstanceUserRoleRequestsIndex from 'bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex';
+import InstanceUsersIndex from 'bundles/system/admin/instance/instance/pages/InstanceUsersIndex';
+import InstanceUsersInvitations from 'bundles/system/admin/instance/instance/pages/InstanceUsersInvitations';
+import InstanceUsersInvite from 'bundles/system/admin/instance/instance/pages/InstanceUsersInvite';
+import AccountSettings from 'bundles/user/AccountSettings';
+import UserShow from 'bundles/users/pages/UserShow';
+import { achievementHandle } from 'course/achievement/handles';
+import {
+  assessmentHandle,
+  assessmentsHandle,
+  questionHandle,
+} from 'course/assessment/handles';
+import QuestionFormOutlet from 'course/assessment/question/components/QuestionFormOutlet';
+import { forumHandle, forumTopicHandle } from 'course/forum/handles';
+import { folderHandle } from 'course/material/folders/handles';
+import { videoWatchHistoryHandle } from 'course/statistics/handles';
+import { surveyHandle, surveyResponseHandle } from 'course/survey/handles';
+import {
+  courseUserHandle,
+  courseUserPersonalizedTimelineHandle,
+  manageUserHandles,
+} from 'course/users/handles';
+import { videoHandle, videosHandle } from 'course/video/handles';
+
+import { CourseContainer } from './bundles/course/container';
+import AppContainer from './lib/containers/AppContainer';
+import CourselessContainer from './lib/containers/CourselessContainer';
+
+const router: RouteObject[] = [
+  {
+    path: '/',
+    element: <AppContainer />,
+    loader: AppContainer.loader,
+    shouldRevalidate: (): boolean => false,
+    children: [
+      {
+        path: 'courses/:courseId',
+        element: <CourseContainer />,
+        loader: CourseContainer.loader,
+        handle: CourseContainer.handle,
+        shouldRevalidate: ({ currentParams, nextParams }): boolean => {
+          const isChangingCourse =
+            currentParams.courseId !== nextParams.courseId;
+
+          // React Router's documentation never strictly mentioned that `shouldRevalidate`
+          // should be a pure function, but a good software engineer would probably expect
+          // it to be. Until we multi-course support in our Redux store, this is where
+          // we can detect the `courseId` is changing without janky `useEffect`. It should
+          // be safe since `resetStore` does not interfere with rendering or routing.
+          if (isChangingCourse) resetStore();
+
+          return isChangingCourse;
+        },
+        children: [
+          {
+            index: true,
+            element: <CourseShow />,
+          },
+          {
+            path: 'timelines',
+            handle: TimelineDesigner.handle,
+            element: <TimelineDesigner />,
+          },
+          {
+            path: 'announcements',
+            handle: AnnouncementsIndex.handle,
+            element: <AnnouncementsIndex />,
+          },
+          {
+            path: 'comments',
+            handle: CommentIndex.handle,
+            element: <CommentIndex />,
+          },
+          {
+            path: 'leaderboard',
+            handle: LeaderboardIndex.handle,
+            element: <LeaderboardIndex />,
+          },
+          {
+            path: 'learning_map',
+            handle: LearningMap.handle,
+            element: <LearningMap />,
+          },
+          {
+            path: 'materials/folders',
+            handle: folderHandle,
+            // `:folderId` must be split this way so that `folderHandle` is matched
+            // to the stable (non-changing) match of `/materials/folders`. This allows
+            // the crumbs in the Workbin to not disappear when revalidated by the
+            // Dynamic Nest API's builder.
+            children: [
+              {
+                path: ':folderId',
+                element: <FolderShow />,
+              },
+            ],
+          },
+          {
+            path: 'levels',
+            handle: LevelsIndex.handle,
+            element: <LevelsIndex />,
+          },
+          {
+            path: 'statistics',
+            handle: StatisticsIndex.handle,
+            element: <StatisticsIndex />,
+          },
+          {
+            path: 'duplication',
+            handle: Duplication.handle,
+            element: <Duplication />,
+          },
+          {
+            path: 'enrol_requests',
+            handle: manageUserHandles.enrolRequests,
+            element: <UserRequests />,
+          },
+          {
+            path: 'user_invitations',
+            handle: manageUserHandles.invitations,
+            element: <InvitationsIndex />,
+          },
+          {
+            path: 'students',
+            handle: manageUserHandles.students,
+            element: <ManageStudents />,
+          },
+          {
+            path: 'staff',
+            handle: manageUserHandles.staff,
+            element: <ManageStaff />,
+          },
+          {
+            path: 'lesson_plan',
+            // @ts-ignore `connect` throws error when cannot find `store` as direct parent
+            element: <LessonPlanLayout />,
+            handle: LessonPlanLayout.handle,
+            children: [
+              {
+                index: true,
+                element: <LessonPlanShow />,
+              },
+              {
+                path: 'edit',
+                element: <LessonPlanEdit />,
+              },
+            ],
+          },
+          {
+            path: 'users',
+            children: [
+              {
+                index: true,
+                handle: UsersIndex.handle,
+                element: <UsersIndex />,
+              },
+              {
+                path: 'personal_times',
+                handle: manageUserHandles.personalizedTimelines,
+                element: <PersonalTimes />,
+              },
+              {
+                path: 'invite',
+                handle: manageUserHandles.inviteUsers,
+                element: <InviteUsers />,
+              },
+              {
+                path: 'disburse_experience_points',
+                handle: DisbursementIndex.handle,
+                element: <DisbursementIndex />,
+              },
+              {
+                path: ':userId',
+                handle: courseUserHandle,
+                children: [
+                  {
+                    index: true,
+                    element: <CourseUserShow />,
+                  },
+                  {
+                    path: 'experience_points_records',
+                    handle: ExperiencePointsRecords.handle,
+                    element: <ExperiencePointsRecords />,
+                  },
+                ],
+              },
+              {
+                path: ':userId/personal_times',
+                handle: courseUserPersonalizedTimelineHandle,
+                element: <PersonalTimesShow />,
+              },
+              {
+                path: ':userId/video_submissions',
+                handle: videoWatchHistoryHandle,
+                element: <UserVideoSubmissionsIndex />,
+              },
+              {
+                path: ':userId/manage_email_subscription',
+                handle: UserEmailSubscriptions.handle,
+                element: <UserEmailSubscriptions />,
+              },
+            ],
+          },
+          {
+            path: 'admin',
+            loader: SettingsNavigation.loader,
+            handle: SettingsNavigation.handle,
+            element: <SettingsNavigation />,
+            children: [
+              {
+                index: true,
+                element: <CourseSettings />,
+              },
+              {
+                path: 'components',
+                element: <ComponentSettings />,
+              },
+              {
+                path: 'sidebar',
+                element: <SidebarSettings />,
+              },
+              {
+                path: 'notifications',
+                element: <NotificationSettings />,
+              },
+              {
+                path: 'announcements',
+                element: <AnnouncementSettings />,
+              },
+              {
+                path: 'assessments',
+                element: <AssessmentSettings />,
+              },
+              {
+                path: 'materials',
+                element: <MaterialsSettings />,
+              },
+              {
+                path: 'forums',
+                element: <ForumsSettings />,
+              },
+              {
+                path: 'leaderboard',
+                element: <LeaderboardSettings />,
+              },
+              {
+                path: 'comments',
+                element: <CommentsSettings />,
+              },
+              {
+                path: 'videos',
+                element: <VideosSettings />,
+              },
+              {
+                path: 'lesson_plan',
+                element: <LessonPlanSettings />,
+              },
+              {
+                path: 'codaveri',
+                element: <CodaveriSettings />,
+              },
+            ],
+          },
+          {
+            path: 'surveys',
+            handle: SurveyIndex.handle,
+            children: [
+              {
+                index: true,
+                element: <SurveyIndex />,
+              },
+              {
+                path: ':surveyId',
+                handle: surveyHandle,
+                children: [
+                  {
+                    index: true,
+                    element: <SurveyShow />,
+                  },
+                  {
+                    path: 'results',
+                    handle: SurveyResults.handle,
+                    element: <SurveyResults />,
+                  },
+                  {
+                    path: 'responses',
+                    children: [
+                      {
+                        index: true,
+                        handle: ResponseIndex.handle,
+                        element: <ResponseIndex />,
+                      },
+                      {
+                        path: ':responseId',
+                        children: [
+                          {
+                            index: true,
+                            handle: surveyResponseHandle,
+                            element: <ResponseShow />,
+                          },
+                          {
+                            path: 'edit',
+                            handle: ResponseEdit.handle,
+                            element: <ResponseEdit />,
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: 'groups',
+            element: <GroupIndex />,
+            handle: GroupIndex.handle,
+            children: [
+              {
+                path: ':groupCategoryId',
+                element: <GroupShow />,
+              },
+            ],
+          },
+          {
+            path: 'videos',
+            handle: videosHandle,
+            children: [
+              {
+                index: true,
+                element: <VideosIndex />,
+              },
+              {
+                path: ':videoId',
+                handle: videoHandle,
+                children: [
+                  {
+                    index: true,
+                    element: <VideoShow />,
+                  },
+                  {
+                    path: 'submissions',
+                    children: [
+                      {
+                        index: true,
+                        handle: VideoSubmissionsIndex.handle,
+                        element: <VideoSubmissionsIndex />,
+                      },
+                      {
+                        path: ':submissionId',
+                        handle: VideoSubmissionShow.handle,
+                        children: [
+                          {
+                            index: true,
+                            element: <VideoSubmissionShow />,
+                          },
+                          {
+                            path: 'edit',
+                            element: <VideoSubmissionEdit />,
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: 'forums',
+            handle: ForumsIndex.handle,
+            children: [
+              {
+                index: true,
+                element: <ForumsIndex />,
+              },
+              {
+                path: ':forumId',
+                handle: forumHandle,
+                children: [
+                  {
+                    index: true,
+                    element: <ForumShow />,
+                  },
+                  {
+                    path: 'topics/:topicId',
+                    handle: forumTopicHandle,
+                    element: <ForumTopicShow />,
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            path: 'achievements',
+            handle: AchievementsIndex.handle,
+            children: [
+              {
+                index: true,
+                element: <AchievementsIndex />,
+              },
+              {
+                path: ':achievementId',
+                handle: achievementHandle,
+                element: <AchievementShow />,
+              },
+            ],
+          },
+          {
+            path: 'assessments',
+            handle: assessmentsHandle,
+            children: [
+              {
+                index: true,
+                element: <AssessmentsIndex />,
+              },
+              {
+                path: 'submissions',
+                handle: SubmissionsIndex.handle,
+                element: <SubmissionsIndex />,
+              },
+              {
+                path: 'skills',
+                handle: SkillsIndex.handle,
+                element: <SkillsIndex />,
+              },
+              {
+                path: ':assessmentId',
+                handle: assessmentHandle,
+                children: [
+                  {
+                    index: true,
+                    element: <AssessmentShow />,
+                  },
+                  {
+                    path: 'edit',
+                    handle: AssessmentEdit.handle,
+                    element: <AssessmentEdit />,
+                  },
+                  {
+                    path: 'monitoring',
+                    handle: AssessmentMonitoring.handle,
+                    element: <AssessmentMonitoring />,
+                  },
+                  {
+                    path: 'sessions/new',
+                    element: <AssessmentSessionNew />,
+                  },
+                  {
+                    path: 'statistics',
+                    handle: AssessmentStatisticsPage.handle,
+                    // @ts-ignore `connect` throws error when cannot find `store` as direct parent
+                    element: <AssessmentStatisticsPage />,
+                  },
+                  {
+                    path: 'submissions',
+                    children: [
+                      {
+                        index: true,
+                        handle: AssessmentSubmissionsIndex.handle,
+                        element: <AssessmentSubmissionsIndex />,
+                      },
+                      {
+                        path: ':submissionId',
+                        children: [
+                          {
+                            path: 'edit',
+                            handle: SubmissionEditIndex.handle,
+                            element: <SubmissionEditIndex />,
+                          },
+                          {
+                            path: 'logs',
+                            handle: LogsIndex.handle,
+                            element: <LogsIndex />,
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                  {
+                    path: 'question',
+                    element: <QuestionFormOutlet />,
+                    handle: questionHandle,
+                    children: [
+                      {
+                        path: 'forum_post_responses',
+                        children: [
+                          {
+                            path: 'new',
+                            handle: NewForumPostResponsePage.handle,
+                            element: <NewForumPostResponsePage />,
+                          },
+                          {
+                            path: ':questionId/edit',
+                            element: <EditForumPostResponsePage />,
+                          },
+                        ],
+                      },
+                      {
+                        path: 'text_responses',
+                        children: [
+                          {
+                            path: 'new',
+                            handle: NewTextResponse.handle,
+                            element: <NewTextResponse />,
+                          },
+                          {
+                            path: ':questionId/edit',
+                            element: <EditTextResponse />,
+                          },
+                        ],
+                      },
+                      {
+                        path: 'voice_responses',
+                        children: [
+                          {
+                            path: 'new',
+                            handle: NewVoicePage.handle,
+                            element: <NewVoicePage />,
+                          },
+                          {
+                            path: ':questionId/edit',
+                            element: <EditVoicePage />,
+                          },
+                        ],
+                      },
+                      {
+                        path: 'multiple_responses',
+                        children: [
+                          {
+                            path: 'new',
+                            handle: NewMcqMrqPage.handle,
+                            element: <NewMcqMrqPage />,
+                          },
+                          {
+                            path: ':questionId/edit',
+                            element: <EditMcqMrqPage />,
+                          },
+                        ],
+                      },
+                      {
+                        path: 'scribing',
+                        children: [
+                          {
+                            path: 'new',
+                            handle: ScribingQuestion.handle,
+                            element: <ScribingQuestion />,
+                          },
+                          {
+                            path: ':questionId/edit',
+                            element: <ScribingQuestion />,
+                          },
+                        ],
+                      },
+                      {
+                        path: 'programming',
+                        children: [
+                          {
+                            path: 'new',
+                            handle: NewProgrammingQuestionPage.handle,
+                            element: <NewProgrammingQuestionPage />,
+                          },
+                          {
+                            path: ':questionId/edit',
+                            element: <EditProgrammingQuestionPage />,
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        path: '*',
+        element: <CourselessContainer />,
+        children: [
+          {
+            path: 'courses',
+            handle: CoursesIndex.handle,
+            element: <CoursesIndex />,
+          },
+          {
+            path: 'admin',
+            handle: AdminNavigator.handle,
+            element: <AdminNavigator />,
+            children: [
+              {
+                index: true,
+                element: <Navigate to="announcements" />,
+              },
+              {
+                path: 'announcements',
+                element: <AnnouncementIndex />,
+              },
+              {
+                path: 'users',
+                element: <UserIndex />,
+              },
+              {
+                path: 'instances',
+                element: <InstancesIndex />,
+              },
+              {
+                path: 'courses',
+                element: <CourseIndex />,
+              },
+            ],
+          },
+          {
+            path: 'admin/instance',
+            handle: InstanceAdminNavigator.handle,
+            element: <InstanceAdminNavigator />,
+            children: [
+              {
+                index: true,
+                element: <Navigate to="announcements" />,
+              },
+              {
+                path: 'announcements',
+                element: <InstanceAnnouncementsIndex />,
+              },
+              {
+                path: 'components',
+                element: <InstanceComponentsIndex />,
+              },
+              {
+                path: 'courses',
+                element: <InstanceCoursesIndex />,
+              },
+              {
+                path: 'users',
+                element: <InstanceUsersIndex />,
+              },
+              {
+                path: 'users/invite',
+                element: <InstanceUsersInvite />,
+              },
+              {
+                path: 'user_invitations',
+                element: <InstanceUsersInvitations />,
+              },
+              {
+                path: 'role_requests',
+                element: <InstanceUserRoleRequestsIndex />,
+              },
+            ],
+          },
+          {
+            path: 'announcements',
+            handle: GlobalAnnouncementIndex.handle,
+            element: <GlobalAnnouncementIndex />,
+          },
+          {
+            path: 'users/:userId',
+            element: <UserShow />,
+          },
+          {
+            path: 'user/profile/edit',
+            handle: AccountSettings.handle,
+            element: <AccountSettings />,
+          },
+          // `/role_requests` will be routed without `InstanceAdminNavigator` and its sidebar.
+          // Here, we redirect `/role_requests` to `/admin/instance/role_requests`. But until
+          // we are loading the page without Rails' router, fresh loads to `/role_requests` will
+          // go to 404. Once we are 100% SPA, this is a non-issue.
+          {
+            path: 'role_requests',
+            element: <Navigate to="/admin/instance/role_requests" />,
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default router;
diff --git a/client/app/store.ts b/client/app/store.ts
index 07d00bf042e..b1f1e7e9999 100644
--- a/client/app/store.ts
+++ b/client/app/store.ts
@@ -2,6 +2,7 @@ import {
   AnyAction,
   combineReducers,
   configureStore,
+  Reducer,
   ThunkAction,
   ThunkDispatch,
 } from '@reduxjs/toolkit';
@@ -91,8 +92,15 @@ const rootReducer = combineReducers({
   notificationPopup: notificationPopupReducer,
 });
 
+const RESET_STORE_ACTION_TYPE = 'RESET_STORE_BOOM';
+
+const purgeableRootReducer: Reducer = (state, action) => {
+  if (action.type === RESET_STORE_ACTION_TYPE) state = undefined;
+  return rootReducer(state, action);
+};
+
 export const store = configureStore({
-  reducer: rootReducer,
+  reducer: purgeableRootReducer,
 });
 
 export type AppState = ReturnType<typeof rootReducer>;
@@ -112,6 +120,13 @@ export type Operation<R = void> = ThunkAction<
 
 export const dispatch = store.dispatch as AppDispatch;
 
+/**
+ * Resets the entire app's Redux store to `undefined`.
+ */
+export const resetStore = (): void => {
+  dispatch({ type: RESET_STORE_ACTION_TYPE });
+};
+
 export const setUpStoreWithState = (
   preloadedState: Partial<AppState>,
 ): typeof store => configureStore({ reducer: rootReducer, preloadedState });
diff --git a/client/app/theme/index.css b/client/app/theme/index.css
index 99fd4c07603..4feebe69d02 100644
--- a/client/app/theme/index.css
+++ b/client/app/theme/index.css
@@ -14,7 +14,7 @@
   }
 
   .key {
-    @apply rounded-xl border border-solid py-0.5 px-2;
+    @apply rounded-xl border border-solid px-2 py-0.5;
   }
 
   /* For Firefox 64+ and Firefox for Android 64+ */
@@ -27,3 +27,57 @@
     display: none;
   }
 }
+
+.sidebar-handle-enter {
+  animation-timing-function: ease-in-out;
+  animation-name: sidebar-handle-emphasize;
+  animation-duration: 400ms;
+  animation-delay: -50ms;
+}
+
+@keyframes sidebar-handle-emphasize {
+  0% {
+    transform: translateX(-200%);
+  }
+  20% {
+    transform: translateX(0.5rem);
+    animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.sidebar-handle-exit {
+  @apply -translate-x-[200%] scale-y-0 transition-all;
+}
+
+.bouncing-dot {
+  display: inline-block;
+  animation-name: bouncing-dot-bounce;
+  animation-duration: 700ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+.bouncing-dot:nth-child(2) {
+  animation-delay: 125ms;
+}
+
+.bouncing-dot:nth-child(3) {
+  animation-delay: 250ms;
+}
+
+@keyframes bouncing-dot-bounce {
+  0% {
+    transform: none;
+  }
+
+  33% {
+    transform: translateY(-0.2em);
+  }
+
+  66% {
+    transform: none;
+  }
+}
diff --git a/client/app/theme/mui-style.ts b/client/app/theme/mui-style.ts
index 84a9fc7001d..e90934bc3cd 100644
--- a/client/app/theme/mui-style.ts
+++ b/client/app/theme/mui-style.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 export const tabsStyle = {
   // to show tab indicator on firefox
   '& .MuiTabs-indicator': {
diff --git a/client/app/types/course/admin/sidebar.ts b/client/app/types/course/admin/sidebar.ts
index 6dacc6db761..e39479d4ecc 100644
--- a/client/app/types/course/admin/sidebar.ts
+++ b/client/app/types/course/admin/sidebar.ts
@@ -1,8 +1,10 @@
+import { CourseComponentIconName } from 'lib/constants/icons';
+
 export interface SidebarItem {
   id: string;
   title: string;
   weight: number;
-  iconClassName: string;
+  icon: CourseComponentIconName;
 }
 
 export type SidebarItems = SidebarItem[];
diff --git a/client/app/types/course/announcements.ts b/client/app/types/course/announcements.ts
index 0e1153ff59d..de02e0276a2 100644
--- a/client/app/types/course/announcements.ts
+++ b/client/app/types/course/announcements.ts
@@ -14,8 +14,12 @@ export type AnnouncementListDataPermissions = Permissions<
 export interface AnnouncementListData {
   id: number;
   title: string;
-  content: string; // HTML String
+  content: string;
   startTime: string;
+  markAsReadUrl: string;
+}
+
+export interface AnnouncementData extends AnnouncementListData {
   endTime: string;
   creator: CourseUserBasicListData;
   isUnread: boolean;
@@ -24,13 +28,20 @@ export interface AnnouncementListData {
   permissions: AnnouncementListDataPermissions;
 }
 
-export interface AnnouncementData extends AnnouncementListData {}
+export interface FetchAnnouncementsData {
+  announcements: AnnouncementData[];
+  permissions: AnnouncementPermissions;
+}
 
 export interface AnnouncementMiniEntity {
   id: number;
   title: string;
-  content: string; // HTML String
+  content: string;
   startTime: string;
+  markAsReadUrl: string;
+}
+
+export interface AnnouncementEntity extends AnnouncementMiniEntity {
   endTime: string;
   creator: CourseUserBasicMiniEntity;
   isUnread: boolean;
@@ -39,7 +50,6 @@ export interface AnnouncementMiniEntity {
   permissions: AnnouncementListDataPermissions;
 }
 
-export interface AnnouncementEntity extends AnnouncementMiniEntity {}
 export interface AnnouncementFormData {
   id?: number;
   title: string;
diff --git a/client/app/types/course/assessment/assessments.ts b/client/app/types/course/assessment/assessments.ts
index dfa71a38e51..fb63401ee86 100644
--- a/client/app/types/course/assessment/assessments.ts
+++ b/client/app/types/course/assessment/assessments.ts
@@ -16,6 +16,12 @@ interface AssessmentActionsData {
   deleteUrl?: string;
 }
 
+export interface AchievementBadgeData {
+  url: string;
+  badgeUrl: string;
+  title: string;
+}
+
 export interface AssessmentListData extends AssessmentActionsData {
   id: number;
   title: string;
@@ -37,11 +43,7 @@ export interface AssessmentListData extends AssessmentActionsData {
   isBonusEnded?: boolean;
   isEndTimePassed?: boolean;
   remainingConditionalsCount?: number;
-  topConditionals?: {
-    url: string;
-    badgeUrl: string;
-    title: string;
-  }[];
+  topConditionals?: AchievementBadgeData[];
 }
 
 export interface AssessmentsListData {
@@ -55,6 +57,8 @@ export interface AssessmentsListData {
     endTimes: boolean;
     canCreateAssessments: boolean;
     tabId: number;
+    tabTitle: string;
+    tabUrl: string;
     canManageMonitor: boolean;
     category: {
       id: number;
@@ -87,6 +91,8 @@ interface NewQuestionBuilderData {
 export interface AssessmentData extends AssessmentActionsData {
   id: number;
   title: string;
+  tabTitle: string;
+  tabUrl: string;
   description: string;
   autograded: boolean;
   startAt: PersonalTimeData;
@@ -134,6 +140,9 @@ export interface AssessmentData extends AssessmentActionsData {
 
 export interface UnauthenticatedAssessmentData {
   id: number;
+  title: string;
+  tabTitle: string;
+  tabUrl: string;
   isAuthenticated: false;
   isStartTimeBegin: boolean;
   startAt: string;
@@ -152,3 +161,7 @@ export type AssessmentUnlockRequirements = string[];
 export interface AssessmentAuthenticationFormData {
   password: string;
 }
+
+export const isAuthenticatedAssessmentData = (
+  data: AssessmentData | UnauthenticatedAssessmentData,
+): data is AssessmentData => (data as AssessmentData).permissions !== undefined;
diff --git a/client/app/types/course/courses.ts b/client/app/types/course/courses.ts
index 2c38b8e5f73..7a979ccfc2d 100644
--- a/client/app/types/course/courses.ts
+++ b/client/app/types/course/courses.ts
@@ -1,8 +1,11 @@
 import { Permissions } from 'types';
 
+import { CourseComponentIconName } from 'lib/constants/icons';
+
+import { AchievementBadgeData } from './assessment/assessments';
 import { TodoData } from './lesson-plan/todos';
-import { AnnouncementListData, AnnouncementMiniEntity } from './announcements';
-import { CourseUserListData } from './courseUsers';
+import { AnnouncementData, AnnouncementEntity } from './announcements';
+import { CourseUserListData, CourseUserRoles } from './courseUsers';
 import { NotificationData } from './notifications';
 
 export type CoursePermissions = Permissions<'canCreate' | 'isCurrentUser'>;
@@ -30,7 +33,7 @@ export interface CourseData extends CourseListData {
   instructors?: CourseUserListData[];
   // ---
   // Or this exists
-  currentlyActiveAnnouncements?: AnnouncementListData[];
+  currentlyActiveAnnouncements?: AnnouncementData[];
   assessmentTodos?: TodoData[];
   videoTodos?: TodoData[];
   surveyTodos?: TodoData[];
@@ -58,7 +61,7 @@ export interface CourseEntity extends CourseMiniEntity {
   instructors?: CourseUserListData[];
   // ---
   // Or this exists
-  currentlyActiveAnnouncements: AnnouncementMiniEntity[];
+  currentlyActiveAnnouncements: AnnouncementEntity[];
   assessmentTodos: TodoData[];
   videoTodos: TodoData[];
   surveyTodos: TodoData[];
@@ -71,3 +74,35 @@ export interface NewCourseFormData {
   title: string;
   description: string;
 }
+
+export interface SidebarItemData {
+  key: string;
+  label: string;
+  path: string;
+  icon: CourseComponentIconName;
+  unread?: number;
+}
+
+export interface CourseUserProgressData {
+  level?: number;
+  exp?: number;
+  nextLevelPercentage?: number;
+  nextLevelExpDelta?: number | 'max';
+  recentAchievements?: AchievementBadgeData[];
+  remainingAchievementsCount?: number;
+}
+
+export interface CourseLayoutData {
+  courseTitle: string;
+  courseUrl: string;
+  courseLogoUrl: string;
+  courseUserUrl: string;
+  userName: string;
+  courseUserName?: string;
+  courseUserRole?: CourseUserRoles;
+  userAvatarUrl?: string;
+  sidebar?: SidebarItemData[];
+  adminSidebar?: SidebarItemData[];
+  manageEmailSubscriptionUrl?: string;
+  progress?: CourseUserProgressData;
+}
diff --git a/client/app/types/home.ts b/client/app/types/home.ts
new file mode 100644
index 00000000000..6b807b45974
--- /dev/null
+++ b/client/app/types/home.ts
@@ -0,0 +1,18 @@
+import { InstanceUserRoles } from './system/instance/users';
+import { UserRoles } from './users';
+
+interface HomeLayoutUserData {
+  name: string;
+  url: string;
+  avatarUrl: string;
+  role: UserRoles;
+  instanceRole: InstanceUserRoles;
+}
+
+export interface HomeLayoutData {
+  courses?: { title: string; url: string }[];
+  user?: HomeLayoutUserData;
+  signOutUrl?: string;
+  masqueradeUserName?: string;
+  stopMasqueradingUrl?: string;
+}
diff --git a/client/app/utilities/TestApp.tsx b/client/app/utilities/TestApp.tsx
index f564400e2f3..5e283a77e25 100644
--- a/client/app/utilities/TestApp.tsx
+++ b/client/app/utilities/TestApp.tsx
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { AppState, setUpStoreWithState, store as appStore } from 'store';
 
-import ProviderWrapper from 'lib/components/wrappers/ProviderWrapper';
+import Providers from 'lib/components/wrappers/Providers';
 import NotificationPopup from 'lib/containers/NotificationPopup';
 
 export interface CustomRenderOptions {
@@ -20,11 +20,11 @@ const TestApp = (props: TestAppProps): JSX.Element => {
   const store = props.state ? setUpStoreWithState(props.state) : appStore;
 
   return (
-    <ProviderWrapper store={store}>
+    <Providers store={store}>
       <MemoryRouter initialEntries={entries}>{props.children}</MemoryRouter>
 
       <NotificationPopup />
-    </ProviderWrapper>
+    </Providers>
   );
 };
 
diff --git a/client/app/utilities/index.ts b/client/app/utilities/index.ts
new file mode 100644
index 00000000000..06fcc26e61d
--- /dev/null
+++ b/client/app/utilities/index.ts
@@ -0,0 +1,2 @@
+export const getIdFromUnknown = (id?: string | null): number | undefined =>
+  parseInt(id ?? '', 10) || undefined;
diff --git a/client/package.json b/client/package.json
index 6114b79a806..d77855b3bd1 100644
--- a/client/package.json
+++ b/client/package.json
@@ -89,7 +89,7 @@
     "react-player": "^2.12.0",
     "react-redux": "^8.1.1",
     "react-resizable": "^3.0.5",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.11.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",
     "react-tooltip": "^5.15.0",
@@ -117,6 +117,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@formatjs/cli": "^6.1.3",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@svgr/webpack": "^8.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
@@ -174,6 +175,7 @@
     "postcss-loader": "^7.3.3",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
+    "react-refresh": "^0.14.0",
     "redux-logger": "^3.0.6",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
@@ -190,6 +192,7 @@
     "cheerio": "1.0.0-rc.10"
   },
   "license": "MIT",
+  "firstBuildYear": 2013,
   "repository": "git+https://github.com/Coursemology/coursemology2.git",
   "main": "app/index.js"
 }
diff --git a/client/tailwind.config.ts b/client/tailwind.config.ts
index 026b2ce5860..535f4c65cae 100644
--- a/client/tailwind.config.ts
+++ b/client/tailwind.config.ts
@@ -4,6 +4,8 @@ import type { Config } from 'tailwindcss';
 import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
 import plugin from 'tailwindcss/plugin';
 
+import palette from './app/theme/palette';
+
 const SLOTTED_COLOR_VAR = '--tw-slotted-color';
 
 export default {
@@ -36,10 +38,7 @@ export default {
         },
       },
       colors: {
-        'slot-1': `var(${SLOTTED_COLOR_VAR}-1)`,
-        'slot-2': `var(${SLOTTED_COLOR_VAR}-2)`,
-        'slot-3': `var(${SLOTTED_COLOR_VAR}-3)`,
-        'slot-4': `var(${SLOTTED_COLOR_VAR}-4)`,
+        primary: palette.primary.main,
       },
     },
   },
@@ -71,7 +70,10 @@ export default {
       matchUtilities(
         {
           'bg-fade-to-l': (value) => ({
-            background: `linear-gradient(90deg, transparent 0%, ${value} 20%)`,
+            background: `linear-gradient(90deg, transparent 0%, ${value} 25%)`,
+          }),
+          'bg-fade-to-r': (value) => ({
+            background: `linear-gradient(-90deg, transparent 0%, ${value} 25%)`,
           }),
         },
         { values: flattenColorPalette(theme('colors')), type: 'color' },
@@ -79,21 +81,54 @@ export default {
     }),
     plugin(({ matchUtilities, theme }) => {
       matchUtilities(
-        { wh: (value) => ({ width: value, height: value }) },
-        { values: theme('spacing'), type: 'number' },
+        {
+          'border-only-t': (value) => ({ borderTop: `1px solid ${value}` }),
+          'border-only-b': (value) => ({ borderBottom: `1px solid ${value}` }),
+          'border-only-l': (value) => ({ borderLeft: `1px solid ${value}` }),
+          'border-only-r': (value) => ({ borderRight: `1px solid ${value}` }),
+          'border-only-x': (value) => ({
+            borderLeft: `1px solid ${value}`,
+            borderRight: `1px solid ${value}`,
+          }),
+          'border-only-y': (value) => ({
+            borderTop: `1px solid ${value}`,
+            borderBottom: `1px solid ${value}`,
+          }),
+        },
+        { values: flattenColorPalette(theme('colors')), type: 'color' },
       );
     }),
     plugin(({ matchUtilities, theme }) => {
       matchUtilities(
-        {
-          'slot-1': (value) => ({ [`${SLOTTED_COLOR_VAR}-1`]: value }),
-          'slot-2': (value) => ({ [`${SLOTTED_COLOR_VAR}-2`]: value }),
-          'slot-3': (value) => ({ [`${SLOTTED_COLOR_VAR}-3`]: value }),
-          'slot-4': (value) => ({ [`${SLOTTED_COLOR_VAR}-4`]: value }),
-        },
-        { values: flattenColorPalette(theme('colors')), type: 'color' },
+        { wh: (value) => ({ width: value, height: value }) },
+        { values: theme('spacing'), type: 'number' },
       );
     }),
+    plugin(
+      ({ matchUtilities, theme }) => {
+        matchUtilities(
+          {
+            'slot-1': (value) => ({ [`${SLOTTED_COLOR_VAR}-1`]: value }),
+            'slot-2': (value) => ({ [`${SLOTTED_COLOR_VAR}-2`]: value }),
+            'slot-3': (value) => ({ [`${SLOTTED_COLOR_VAR}-3`]: value }),
+            'slot-4': (value) => ({ [`${SLOTTED_COLOR_VAR}-4`]: value }),
+          },
+          { values: flattenColorPalette(theme('colors')), type: 'color' },
+        );
+      },
+      {
+        theme: {
+          extend: {
+            colors: {
+              'slot-1': `var(${SLOTTED_COLOR_VAR}-1)`,
+              'slot-2': `var(${SLOTTED_COLOR_VAR}-2)`,
+              'slot-3': `var(${SLOTTED_COLOR_VAR}-3)`,
+              'slot-4': `var(${SLOTTED_COLOR_VAR}-4)`,
+            },
+          },
+        },
+      },
+    ),
   ],
   important: '#root',
 } satisfies Config;
diff --git a/client/webpack.common.js b/client/webpack.common.js
index 2585379c7f4..a3a43a7f0c5 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -1,9 +1,23 @@
 const { join, resolve } = require('path');
-const { IgnorePlugin, ContextReplacementPlugin } = require('webpack');
+const childProcess = require('child_process');
+const {
+  IgnorePlugin,
+  ContextReplacementPlugin,
+  DefinePlugin,
+} = require('webpack');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const Dotenv = require('dotenv-webpack');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
+const packageJSON = require('./package.json');
+
+const buildTime = new Date();
+
+const headCommitHash = childProcess
+  .execSync('git rev-parse --short HEAD')
+  .toString()
+  .trim();
+
 module.exports = {
   entry: {
     coursemology: [
@@ -78,20 +92,15 @@ module.exports = {
         mode: 'write-references',
       },
     }),
+    new DefinePlugin({
+      FIRST_BUILD_YEAR: JSON.stringify(packageJSON.firstBuildYear),
+      LATEST_BUILD_YEAR: JSON.stringify(buildTime.getFullYear()),
+      LATEST_BUILD_TIME: JSON.stringify(buildTime.toLocaleString('en-GB')),
+      LATEST_COMMIT_HEAD_SHA: JSON.stringify(headCommitHash),
+    }),
   ],
   module: {
     rules: [
-      {
-        test: /\.(js|jsx|ts|tsx)$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            cacheCompression: false,
-            cacheDirectory: true,
-          },
-        },
-        exclude: /node_modules/,
-      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
diff --git a/client/webpack.dev.js b/client/webpack.dev.js
index 4c85a759eb3..a3c2d804df0 100644
--- a/client/webpack.dev.js
+++ b/client/webpack.dev.js
@@ -1,4 +1,5 @@
 const { merge } = require('webpack-merge');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const common = require('./webpack.common');
 
@@ -33,4 +34,21 @@ module.exports = merge(common, {
     removeAvailableModules: false,
     removeEmptyChunks: false,
   },
+  plugins: [new ReactRefreshWebpackPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheCompression: false,
+            cacheDirectory: true,
+            plugins: ['react-refresh/babel'],
+          },
+        },
+        exclude: /node_modules/,
+      },
+    ],
+  },
 });
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index eac4b3b7261..90349c2fee6 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -12,4 +12,13 @@ module.exports = merge(common, {
   optimization: {
     usedExports: true,
   },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        use: ['babel-loader'],
+        exclude: /node_modules/,
+      },
+    ],
+  },
 });
diff --git a/client/yarn.lock b/client/yarn.lock
index 23942bb8443..08eafc3994c 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1998,6 +1998,21 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.10":
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
+  integrity sha512-j0Ya0hCFZPd4x40qLzbhGsh9TMtdb+CJQiso+WxLOPNasohq9cc5SNUcwsZaRH6++Xh91Xkm/xHCkuIiIu0LUA==
+  dependencies:
+    ansi-html-community "^0.0.8"
+    common-path-prefix "^3.0.0"
+    core-js-pure "^3.23.3"
+    error-stack-parser "^2.0.6"
+    find-up "^5.0.0"
+    html-entities "^2.1.0"
+    loader-utils "^2.0.4"
+    schema-utils "^3.0.0"
+    source-map "^0.7.3"
+
 "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -2033,6 +2048,11 @@
     redux-thunk "^2.4.2"
     reselect "^4.1.8"
 
+"@remix-run/router@1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.2.tgz#bbe75f8c59e0b7077584920ce2cc76f8f354934d"
+  integrity sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==
+
 "@rollbar/react@^0.11.2":
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/@rollbar/react/-/react-0.11.2.tgz#f5d71f21e9207f183080fa8a05a618ad78cf6d17"
@@ -3431,6 +3451,11 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -3806,6 +3831,11 @@ commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+common-path-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
+  integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -3897,6 +3927,11 @@ core-js-compat@^3.30.1, core-js-compat@^3.30.2:
   dependencies:
     browserslist "^4.21.5"
 
+core-js-pure@^3.23.3:
+  version "3.30.2"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.30.2.tgz#005a82551f4af3250dcfb46ed360fad32ced114e"
+  integrity sha512-p/npFUJXXBkCCTIlEGBdghofn00jWG6ZOtdoIXSJmAu2QBvN0IqpZXWweOytcwE6cfx8ZvVUy1vw8zxhe4Y2vg==
+
 core-js-pure@^3.25.1:
   version "3.25.2"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.25.2.tgz#44a4fd873bdd4fecf6ca11512bcefedbe87e744a"
@@ -4464,6 +4499,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -4553,7 +4593,7 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error-stack-parser@^2.0.4:
+error-stack-parser@^2.0.4, error-stack-parser@^2.0.6:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
   integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
@@ -5581,7 +5621,7 @@ html-encoding-sniffer@^3.0.0:
   dependencies:
     whatwg-encoding "^2.0.0"
 
-html-entities@^2.3.2:
+html-entities@^2.1.0, html-entities@^2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
   integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
@@ -6651,7 +6691,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.2.2, json5@^2.2.3:
+json5@^2.1.2, json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
@@ -6749,6 +6789,15 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
+loader-utils@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -8324,6 +8373,11 @@ react-redux@^8.0.4, react-redux@^8.1.1:
     react-is "^18.0.0"
     use-sync-external-store "^1.0.0"
 
+react-refresh@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
+  integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
+
 react-resizable@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.5.tgz#362721f2efbd094976f1780ae13f1ad7739786c1"
@@ -8332,20 +8386,20 @@ react-resizable@^3.0.5:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
-react-router-dom@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
-  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+react-router-dom@^6.11.1:
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.11.2.tgz#324d55750ffe2ecd54ca4ec6b7bc7ab01741f170"
+  integrity sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==
   dependencies:
-    history "^5.2.0"
-    react-router "6.3.0"
+    "@remix-run/router" "1.6.2"
+    react-router "6.11.2"
 
-react-router@6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
-  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+react-router@6.11.2:
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.11.2.tgz#006301c4da1a173d7ad76b7ecd2da01b9dd3837a"
+  integrity sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==
   dependencies:
-    history "^5.2.0"
+    "@remix-run/router" "1.6.2"
 
 react-scroll@^1.8.9:
   version "1.8.9"
@@ -8816,7 +8870,16 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-schema-utils@^3.1.1, schema-utils@^3.2.0:
+schema-utils@^3.0.0, schema-utils@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
   integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
@@ -9058,6 +9121,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.3:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
 spdy-transport@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
diff --git a/config/locales/en/common.yml b/config/locales/en/common.yml
index 04dc2ba9aef..bfc8d986027 100644
--- a/config/locales/en/common.yml
+++ b/config/locales/en/common.yml
@@ -4,7 +4,6 @@ en:
     ended: 'Ended'
     plain_text_link: '%{text} (%{url})'
     click_here: 'Click here'
-    percentage: '%{percentage}%'
   helpers:
     submit:
       condition_level:
diff --git a/config/locales/en/course/assessment/assessments.yml b/config/locales/en/course/assessment/assessments.yml
index 1b53ade0dc8..b9383005f7f 100644
--- a/config/locales/en/course/assessment/assessments.yml
+++ b/config/locales/en/course/assessment/assessments.yml
@@ -10,8 +10,6 @@ en:
         sidebar_title: :'course.assessment.assessments.index.header'
         index:
           header: "Assessments"
-        assessment:
-          attempt: "Attempt"
         show:
           public_test: "Public"
           private_test: "Private"
diff --git a/config/locales/en/course/assessment/question/multiple_responses.yml b/config/locales/en/course/assessment/question/multiple_responses.yml
index 5d5dba2563b..643612b6e55 100644
--- a/config/locales/en/course/assessment/question/multiple_responses.yml
+++ b/config/locales/en/course/assessment/question/multiple_responses.yml
@@ -3,9 +3,6 @@ en:
     assessment:
       question:
         multiple_responses:
-          new:
-            multiple_response_header: 'New Multiple Response Question'
-            multiple_choice_header: 'New Multiple Choice Question'
           question_type:
             multiple_response: Multiple Response
             multiple_choice: Multiple Choice
diff --git a/config/locales/en/course/assessment/question/text_response.yml b/config/locales/en/course/assessment/question/text_response.yml
index 7ef0294a1fd..59ace807af5 100644
--- a/config/locales/en/course/assessment/question/text_response.yml
+++ b/config/locales/en/course/assessment/question/text_response.yml
@@ -3,10 +3,6 @@ en:
     assessment:
       question:
         text_responses:
-          new:
-            text_response: 'New Text Response Question'
-            file_upload: 'New File Upload Question'
-            comprehension: 'New Comprehension Question'
           form_comprehension:
             multiline_explanation_comprehension_html: >
               Adding solutions allows the question to be autograded. Students can only input plaintext.
diff --git a/config/locales/en/course/assessment/question/voice_responses.yml b/config/locales/en/course/assessment/question/voice_responses.yml
index 222cae50e90..1e0afeb283a 100644
--- a/config/locales/en/course/assessment/question/voice_responses.yml
+++ b/config/locales/en/course/assessment/question/voice_responses.yml
@@ -3,6 +3,4 @@ en:
     assessment:
       question:
         voice_responses:
-          new:
-            voice_response_header: 'Audio Response Question'
           question_type: Audio Response
diff --git a/config/locales/en/course/assessment/submission/logs.yml b/config/locales/en/course/assessment/submission/logs.yml
index d4ccc196fee..78cef7d1825 100644
--- a/config/locales/en/course/assessment/submission/logs.yml
+++ b/config/locales/en/course/assessment/submission/logs.yml
@@ -5,4 +5,3 @@ en:
         logs:
           index:
             header: 'Access Logs'
-            submissions: 'Submissions'
diff --git a/config/locales/en/course/assessment/submission/submissions.yml b/config/locales/en/course/assessment/submission/submissions.yml
index f9b22741fe1..880b2468509 100644
--- a/config/locales/en/course/assessment/submission/submissions.yml
+++ b/config/locales/en/course/assessment/submission/submissions.yml
@@ -3,10 +3,6 @@ en:
     assessment:
       submission:
         submissions:
-          index:
-            submissions: 'Submissions'
-          edit:
-            attempt: :'course.assessment.assessments.assessment.attempt'
           download_statistics:
             no_submission_statistics: 'No submission fulfilled your requirements for downloading'
           statistics_download_service:
diff --git a/config/locales/en/course/video/submissions.yml b/config/locales/en/course/video/submissions.yml
deleted file mode 100644
index 4e6eecb7d8c..00000000000
--- a/config/locales/en/course/video/submissions.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-en:
-  course:
-    video:
-      submission:
-        submissions:
-          index:
-            submissions: 'Submissions'
diff --git a/config/locales/en/layout.yml b/config/locales/en/layout.yml
index 6816ef1849b..227ec2d48d4 100644
--- a/config/locales/en/layout.yml
+++ b/config/locales/en/layout.yml
@@ -13,9 +13,6 @@ en:
       instance_admin_panel: 'Instance Administration Panel'
       stop_masquerading: '(Stop Masquerading)'
   layouts:
-    course:
-      administration: :'system.admin.admin.index.header'
-      manage_subscriptions: 'Manage subscriptions '
     course_admin:
       title: 'Course Settings'
       course_settings:
@@ -44,20 +41,12 @@ en:
       uploaded_by: 'Uploaded By: %{name}'
     mailer:
       greeting: 'Hello, %{user}:'
-    course_user_badge:
-      achievements: '+ %{difference} More'
-      level: 'Level %{level}'
-      experience_points: '%{exp} EXP'
-      next_level: '%{difference} EXP to Next Level'
-      max_level: 'Congrats - Highest Level Attained!'
     code_formatter:
       size_too_big: 'The file is too big and cannot be displayed.'
     learning_map:
       title: 'Learning Map'
     multiple_reference_timelines:
       timeline_designer: 'Timeline Designer'
-    monitoring:
-      pulsegrid: 'PulseGrid'
     manage_email_subscription:
       tag: 'Unsubscribe'
       message: '%{manage_email_subscription_link} from this email topic.'
diff --git a/config/locales/zh/common.yml b/config/locales/zh/common.yml
index 2d51d120369..362028c3197 100644
--- a/config/locales/zh/common.yml
+++ b/config/locales/zh/common.yml
@@ -4,7 +4,6 @@ zh:
     ended: '已结束'
     plain_text_link: '%{text} (%{url})'
     click_here: '点击此处'
-    percentage: '%{percentage}%'
   helpers:
     submit:
       condition_level:
diff --git a/config/locales/zh/course/assessment/assessments.yml b/config/locales/zh/course/assessment/assessments.yml
index 088ae2b0995..25ee246cd49 100644
--- a/config/locales/zh/course/assessment/assessments.yml
+++ b/config/locales/zh/course/assessment/assessments.yml
@@ -10,8 +10,6 @@ zh:
         sidebar_title: :'course.assessment.assessments.index.header'
         index:
           header: "测验"
-        assessment:
-          attempt: "练习"
         show:
           public_test: "公开"
           private_test: "私有"
diff --git a/config/locales/zh/course/assessment/question/multiple_responses.yml b/config/locales/zh/course/assessment/question/multiple_responses.yml
index 56a9702d304..08fa93de9d0 100644
--- a/config/locales/zh/course/assessment/question/multiple_responses.yml
+++ b/config/locales/zh/course/assessment/question/multiple_responses.yml
@@ -3,9 +3,6 @@ zh:
     assessment:
       question:
         multiple_responses:
-          new:
-            multiple_response_header: '新多解题'
-            multiple_choice_header: '新多选题'
           question_type:
             multiple_response: 多解题
             multiple_choice: 多选题
diff --git a/config/locales/zh/course/assessment/question/text_response.yml b/config/locales/zh/course/assessment/question/text_response.yml
index 8e46e54044a..f09fe96cf54 100644
--- a/config/locales/zh/course/assessment/question/text_response.yml
+++ b/config/locales/zh/course/assessment/question/text_response.yml
@@ -3,10 +3,6 @@ zh:
     assessment:
       question:
         text_responses:
-          new:
-            text_response: '新简答题'
-            file_upload: '新文件上传题'
-            comprehension: '新理解题'
           form_comprehension:
             multiline_explanation_comprehension_html: >
               添加解决方案可以使问题自动评分，学生只能输入纯文本
diff --git a/config/locales/zh/course/assessment/question/voice_responses.yml b/config/locales/zh/course/assessment/question/voice_responses.yml
index d592aede703..47e9179b4f7 100644
--- a/config/locales/zh/course/assessment/question/voice_responses.yml
+++ b/config/locales/zh/course/assessment/question/voice_responses.yml
@@ -3,6 +3,4 @@ zh:
     assessment:
       question:
         voice_responses:
-          new:
-            voice_response_header: '音频回答题'
           question_type: 音频回答题
diff --git a/config/locales/zh/course/assessment/submission/logs.yml b/config/locales/zh/course/assessment/submission/logs.yml
index 4a7a7d15014..55bb8d5f5c3 100644
--- a/config/locales/zh/course/assessment/submission/logs.yml
+++ b/config/locales/zh/course/assessment/submission/logs.yml
@@ -5,4 +5,3 @@ zh:
         logs:
           index:
             header: '登录记录'
-            submissions: '提交'
diff --git a/config/locales/zh/course/assessment/submission/submissions.yml b/config/locales/zh/course/assessment/submission/submissions.yml
index b37bd4f9ea2..d47de422bf7 100644
--- a/config/locales/zh/course/assessment/submission/submissions.yml
+++ b/config/locales/zh/course/assessment/submission/submissions.yml
@@ -3,10 +3,6 @@ zh:
     assessment:
       submission:
         submissions:
-          index:
-            submissions: '提交'
-          edit:
-            attempt: :'course.assessment.assessments.assessment.attempt'
           download_statistics:
             no_submission_statistics: '没有提交满足您的下载要求'
           statistics_download_service:
diff --git a/config/locales/zh/course/video/submissions.yml b/config/locales/zh/course/video/submissions.yml
deleted file mode 100644
index eff08604833..00000000000
--- a/config/locales/zh/course/video/submissions.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-zh:
-  course:
-    video:
-      submission:
-        submissions:
-          index:
-            submissions: '提交'
diff --git a/config/locales/zh/layout.yml b/config/locales/zh/layout.yml
index 3c6d44c74e6..580407cb2c6 100644
--- a/config/locales/zh/layout.yml
+++ b/config/locales/zh/layout.yml
@@ -13,9 +13,6 @@ zh:
       instance_admin_panel: '实例管理小组'
       stop_masquerading: '(停止伪装)'
   layouts:
-    course:
-      administration: :'system.admin.admin.index.header'
-      manage_subscriptions: '管理订阅 '
     course_admin:
       title: '课程设置'
       course_settings:
@@ -44,20 +41,12 @@ zh:
       uploaded_by: '由：%{name}上传'
     mailer:
       greeting: '你好, %{user}:'
-    course_user_badge:
-      achievements: '+ %{difference}更多内容'
-      level: '等级%{level}'
-      experience_points: '%{exp}经验值'
-      next_level: '距离下一级%{difference}经验值'
-      max_level: '祝贺你--达到了最高的等级!'
     code_formatter:
       size_too_big: '该文件太大，无法显示。'
     learning_map:
       title: '学习计划'
     multiple_reference_timelines:
       timeline_designer: '时间线设计工具'
-    monitoring:
-      pulsegrid: 'PulseGrid'
     manage_email_subscription:
       tag: '取消订阅'
       message: '%{manage_email_subscription_link} 以不再关注该电子邮件主题。'
diff --git a/config/routes.rb b/config/routes.rb
index 5c4edb36093..163fe94e3d4 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -77,6 +77,7 @@
   resources :announcements, only: [:index] do
     post 'mark_as_read'
   end
+
   resources :jobs, only: [:show]
 
   resources :instance_user_role_requests, path: 'role_requests' do
@@ -126,6 +127,8 @@
 
   scope module: 'course' do
     resources :courses, except: [:new, :edit, :update] do
+      get 'sidebar', on: :member
+
       namespace :admin do
         get '/' => 'admin#index'
         patch '/' => 'admin#update'
diff --git a/spec/controllers/course/assessment/assessments_controller_spec.rb b/spec/controllers/course/assessment/assessments_controller_spec.rb
index 1d4f372aeb7..6f8e061d651 100644
--- a/spec/controllers/course/assessment/assessments_controller_spec.rb
+++ b/spec/controllers/course/assessment/assessments_controller_spec.rb
@@ -149,31 +149,6 @@
       end
     end
 
-    describe '#add_assessment_breadcrumbs' do
-      let(:breadcrumbs) { controller.send(:breadcrumb_names) }
-      let(:tabs) { 1 }
-      before do
-        create_list(:course_assessment_tab, tabs - 1,
-                    category: course.assessment_categories.first)
-        get :index, params: { course_id: course.id }
-      end
-
-      context 'when the category has one tab' do
-        it 'only displays the category' do
-          expect(breadcrumbs).to include(course.assessment_categories.first.title)
-          expect(breadcrumbs).not_to include(course.assessment_categories.first.tabs.first.title)
-        end
-      end
-
-      context 'when the category has more than one tab' do
-        let(:tabs) { 2 }
-        it 'also displays the tab' do
-          expect(breadcrumbs).to include(course.assessment_categories.first.title)
-          expect(breadcrumbs).to include(course.assessment_categories.first.tabs.first.title)
-        end
-      end
-    end
-
     describe '#reorder' do
       let!(:questions) do
         create_list(:course_assessment_question, 2, assessment: immutable_assessment)
diff --git a/spec/controllers/course/assessment/controller_spec.rb b/spec/controllers/course/assessment/controller_spec.rb
deleted file mode 100644
index 187217cf32b..00000000000
--- a/spec/controllers/course/assessment/controller_spec.rb
+++ /dev/null
@@ -1,44 +0,0 @@
-# frozen_string_literal: true
-require 'rails_helper'
-
-RSpec.describe Course::Assessment::Controller do
-  controller(Course::Assessment::Controller) do
-    def index
-      render body: nil
-    end
-  end
-
-  let(:instance) { Instance.default }
-  with_tenant(:instance) do
-    let(:user) { create(:user) }
-    let(:course) { create(:course, creator: user) }
-    before { sign_in(user) }
-
-    describe '#add_assessment_breadcrumbs' do
-      let(:breadcrumbs) { controller.send(:breadcrumb_names) }
-      let(:assessment) { build_stubbed(:course_assessment_assessment, course: course) }
-      let(:tabs) { 1 }
-      before do
-        create_list(:course_assessment_tab, tabs - 1,
-                    category: course.assessment_categories.first)
-        @controller.instance_variable_set(:@assessment, assessment)
-        get :index, params: { course_id: course.id }
-      end
-
-      context 'when the category has one tab' do
-        it 'only displays the category' do
-          expect(breadcrumbs).to include(assessment.tab.category.title)
-          expect(breadcrumbs).not_to include(assessment.tab.title)
-        end
-      end
-
-      context 'when the category has more than one tab' do
-        let(:tabs) { 2 }
-        it 'also displays the tab' do
-          expect(breadcrumbs).to include(assessment.tab.category.title)
-          expect(breadcrumbs).to include(assessment.tab.title)
-        end
-      end
-    end
-  end
-end
diff --git a/spec/factories/course_assessment_tabs.rb b/spec/factories/course_assessment_tabs.rb
index 02b6abb5c34..50bf0c2d5de 100644
--- a/spec/factories/course_assessment_tabs.rb
+++ b/spec/factories/course_assessment_tabs.rb
@@ -10,7 +10,7 @@
       options[:course] = course if course
       build(:course_assessment_category, options)
     end
-    title { 'Tab' }
+    sequence(:title) { |n| "Tab #{n}" }
     weight { generate(:course_assessment_tab_weight) }
   end
 end
diff --git a/spec/features/course/achievement_listing_spec.rb b/spec/features/course/achievement_listing_spec.rb
index 94e04cfbe4d..89543d56b27 100644
--- a/spec/features/course/achievement_listing_spec.rb
+++ b/spec/features/course/achievement_listing_spec.rb
@@ -62,8 +62,7 @@
       scenario 'I can view the Achievement Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: I18n.t('course.achievement.achievements.'\
-                                                         'sidebar_title'))
+        expect(find_sidebar).to have_text(I18n.t('course.achievement.achievements.sidebar_title'))
       end
 
       scenario 'I can view all users who have obtained an achievement' do
diff --git a/spec/features/course/admin/admin_spec.rb b/spec/features/course/admin/admin_spec.rb
index 94b94daec64..fa52ddf2e16 100644
--- a/spec/features/course/admin/admin_spec.rb
+++ b/spec/features/course/admin/admin_spec.rb
@@ -16,7 +16,7 @@
       scenario 'I can view the Course Admin Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'layouts.course_admin.title')
+        expect(find_sidebar).to have_text(I18n.t('layouts.course_admin.title'))
       end
 
       scenario 'I can change the course attributes' do
@@ -54,7 +54,7 @@
 
         visit current_path
 
-        course_logo = find('#course-sidebar-logo img')
+        course_logo = find_sidebar.find_all('img').first
         expect(course_logo[:src]).to include(course.reload.logo.medium.url)
       end
 
@@ -98,7 +98,7 @@
       scenario 'I cannot view the Course Admin Sidebar item' do
         visit course_path(course)
 
-        expect(page).not_to have_selector('li', text: 'layouts.course_admin.title')
+        expect(find_sidebar).not_to have_text(I18n.t('layouts.course_admin.title'))
       end
     end
 
@@ -108,7 +108,7 @@
       scenario 'I cannot view the Course Admin Sidebar item' do
         visit course_path(course)
 
-        expect(page).not_to have_selector('li', text: 'layouts.course_admin.title')
+        expect(find_sidebar).not_to have_text(I18n.t('layouts.course_admin.title'))
       end
     end
   end
diff --git a/spec/features/course/admin/announcement_settings_spec.rb b/spec/features/course/admin/announcement_settings_spec.rb
index e1fd92a6a16..3ee176f3d85 100644
--- a/spec/features/course/admin/announcement_settings_spec.rb
+++ b/spec/features/course/admin/announcement_settings_spec.rb
@@ -27,7 +27,7 @@
 
         # Refresh page to update sidebar
         visit current_path
-        expect(page).to have_selector('li a', text: new_title)
+        expect(find_sidebar).to have_text(new_title)
 
         fill_in title_field, with: empty_title
         click_button 'Save changes'
@@ -35,7 +35,7 @@
 
         # Refresh page to update sidebar
         visit current_path
-        expect(page).to have_selector('li a', text: I18n.t('course.announcements.sidebar_title'))
+        expect(find_sidebar).to have_text(I18n.t('course.announcements.sidebar_title'))
       end
     end
   end
diff --git a/spec/features/course/admin/discussion/topic_settings_spec.rb b/spec/features/course/admin/discussion/topic_settings_spec.rb
index 5026615a6c7..a6e7b615745 100644
--- a/spec/features/course/admin/discussion/topic_settings_spec.rb
+++ b/spec/features/course/admin/discussion/topic_settings_spec.rb
@@ -44,14 +44,13 @@
         expect(page).to have_field(title_field, with: new_title)
 
         visit current_path
-        expect(page).to have_selector('li a', text: new_title)
+        expect(find_sidebar).to have_text(new_title)
 
         fill_in title_field, with: empty_title
         click_button 'Save changes'
         expect_toastify('Your changes have been saved.')
         visit current_path
-        expect(page).
-          to have_selector('li a', text: I18n.t('course.discussion.topics.sidebar_title'))
+        expect(find_sidebar).to have_text(I18n.t('course.discussion.topics.sidebar_title'))
       end
     end
   end
diff --git a/spec/features/course/admin/forum_settings_spec.rb b/spec/features/course/admin/forum_settings_spec.rb
index ea1571e6dfb..460014af9df 100644
--- a/spec/features/course/admin/forum_settings_spec.rb
+++ b/spec/features/course/admin/forum_settings_spec.rb
@@ -25,7 +25,7 @@
         expect(course.reload.settings(:course_forums_component).title).to eq(new_title)
 
         visit current_path
-        expect(page).to have_selector('li a', text: new_title)
+        expect(find_sidebar).to have_text(new_title)
 
         fill_in title_field, with: empty_title
         click_button 'Save changes'
@@ -33,7 +33,7 @@
         expect(course.reload.settings(:course_forums_component).title).to eq(nil)
 
         visit current_path
-        expect(page).to have_selector('li a', text: I18n.t('course.forum.forums.sidebar_title'))
+        expect(find_sidebar).to have_text(I18n.t('course.forum.forums.sidebar_title'))
       end
 
       scenario 'I can change the forum pagination settings' do
diff --git a/spec/features/course/admin/leaderboard_settings_spec.rb b/spec/features/course/admin/leaderboard_settings_spec.rb
index 00872c4c413..a9a8b53becc 100644
--- a/spec/features/course/admin/leaderboard_settings_spec.rb
+++ b/spec/features/course/admin/leaderboard_settings_spec.rb
@@ -46,14 +46,14 @@
         expect(page).to have_field(title_field, with: new_title)
 
         visit current_path
-        expect(page).to have_selector('li a', text: new_title)
+        expect(find_sidebar).to have_text(new_title)
 
         fill_in title_field, with: empty_title
         click_button 'Save changes'
         expect_toastify('Your changes have been saved.')
 
         visit current_path
-        expect(page).to have_selector('li a', text: I18n.t('course.leaderboards.sidebar_title'))
+        expect(find_sidebar).to have_text(I18n.t('course.leaderboards.sidebar_title'))
       end
 
       scenario 'I can enable and disable the group leaderboard' do
diff --git a/spec/features/course/admin/material_settings_spec.rb b/spec/features/course/admin/material_settings_spec.rb
index 95af83a45f3..46102972b02 100644
--- a/spec/features/course/admin/material_settings_spec.rb
+++ b/spec/features/course/admin/material_settings_spec.rb
@@ -24,14 +24,14 @@
         expect(page).to have_field(title_field, with: new_title)
 
         visit current_path
-        expect(page).to have_selector('li a', text: new_title)
+        expect(find_sidebar).to have_text(new_title)
 
         fill_in title_field, with: empty_title
         click_button 'Save changes'
         expect_toastify('Your changes have been saved.')
 
         visit current_path
-        expect(page).to have_selector('li a', text: I18n.t('course.material.sidebar_title'))
+        expect(find_sidebar).to have_text(I18n.t('course.material.sidebar_title'))
       end
     end
   end
diff --git a/spec/features/course/admin/video_settings_spec.rb b/spec/features/course/admin/video_settings_spec.rb
index b8da4dfc485..60f75a06f5f 100644
--- a/spec/features/course/admin/video_settings_spec.rb
+++ b/spec/features/course/admin/video_settings_spec.rb
@@ -24,14 +24,14 @@
         expect(page).to have_field(title_field, with: new_title)
 
         visit current_path
-        expect(page).to have_selector('li a', text: new_title)
+        expect(find_sidebar).to have_text(new_title)
 
         fill_in title_field, with: empty_title
         click_button 'Save changes'
         expect_toastify('Your changes have been saved.')
 
         visit current_path
-        expect(page).to have_selector('li a', text: I18n.t('course.video.videos.sidebar_title'))
+        expect(find_sidebar).to have_text(I18n.t('course.video.videos.sidebar_title'))
       end
     end
   end
diff --git a/spec/features/course/announcement_management_spec.rb b/spec/features/course/announcement_management_spec.rb
index 4ee0f850e86..d340d747a1f 100644
--- a/spec/features/course/announcement_management_spec.rb
+++ b/spec/features/course/announcement_management_spec.rb
@@ -20,13 +20,13 @@
       scenario 'I can create new announcements', js: true do
         visit course_announcements_path(course)
         find('#new-announcement-button').click
-        expect(page).to have_selector('h2', text: 'New Announcement')
+        expect(page).to have_text('New Announcement')
 
         announcement = build_stubbed(:course_announcement, course: course)
         fill_in 'title', with: announcement.title
         find('#form-dialog-submit-button').click
 
-        expect(page).to have_selector('h3', text: announcement.title)
+        expect(page).to have_text(announcement.title)
 
         expect_toastify('New announcement posted!')
 
@@ -50,7 +50,7 @@
 
         expect(current_path).to eq course_announcements_path(course)
         within find("#announcement-#{announcement.id}") do
-          expect(page).to have_selector('h3', text: new_title)
+          expect(page).to have_text(new_title)
         end
       end
 
@@ -83,10 +83,10 @@
     context 'As an Course Student' do
       let(:user) { create(:course_student, course: course).user }
 
-      scenario 'I can view the Announcement Sidebar item' do
+      scenario 'I can view the Announcement Sidebar item', js: true do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'course.announcements.sidebar_title')
+        expect(find_sidebar).to have_text(I18n.t('course.announcements.sidebar_title'))
       end
 
       scenario 'I can see the started announcements', js: true do
diff --git a/spec/features/course/announcement_sticky_spec.rb b/spec/features/course/announcement_sticky_spec.rb
index e6eee8eeded..4049cec9459 100644
--- a/spec/features/course/announcement_sticky_spec.rb
+++ b/spec/features/course/announcement_sticky_spec.rb
@@ -32,7 +32,7 @@
         subject { first('div.announcement') }
 
         it 'shows sticky announcement on top' do
-          expect(subject).to have_selector('h3', text: sticky_announcement.title)
+          expect(subject).to have_text(sticky_announcement.title)
         end
       end
     end
diff --git a/spec/features/course/assessment/answer/multiple_response_answer_spec.rb b/spec/features/course/assessment/answer/multiple_response_answer_spec.rb
index 13c56c21946..bb0a35346a7 100644
--- a/spec/features/course/assessment/answer/multiple_response_answer_spec.rb
+++ b/spec/features/course/assessment/answer/multiple_response_answer_spec.rb
@@ -26,11 +26,7 @@
           visit edit_course_assessment_submission_path(course, assessment, submission)
 
           option = assessment.questions.first.actable.options.first
-          # Click correct answer
-          page.
-            find(:xpath, '//*[@id="app-root"]
-                          /div[2]/form/div/label[1]/span[1]/input', visible: false).
-            click
+          find('label', text: option.option).click
 
           click_button('Save Draft')
           expect(current_path).to eq(
@@ -78,9 +74,9 @@
       scenario 'I can view the correct answer' do
         visit edit_course_assessment_submission_path(course, assessment, submission)
 
-        element = page.
-                  find(:xpath, '//*[@id="app-root"]/div[3]
-                                /form/div/label[1]/span[2]/b/div', visible: false)
+        option = assessment.questions.first.actable.options.first
+        element = find('b', text: option.option).find('div')
+
         expect(element.style('background-color')['background-color']).to eq('rgba(232, 245, 233, 1)')
       end
     end
diff --git a/spec/features/course/assessment/question/multiple_response_management_spec.rb b/spec/features/course/assessment/question/multiple_response_management_spec.rb
index 1411277aef1..b5aca955da8 100644
--- a/spec/features/course/assessment/question/multiple_response_management_spec.rb
+++ b/spec/features/course/assessment/question/multiple_response_management_spec.rb
@@ -188,15 +188,11 @@
 
         # Delete all MCQ options
         visit edit_path
-        find_all('section').each do |choice_section|
-          within choice_section do
-            find_button('Delete choice').click
-          end
-        end
 
+        find_all('button[aria-label="Delete choice"]').each(&:click)
         click_button 'Save changes'
-
         wait_for_page
+
         expect(current_path).to eq(course_assessment_path(course, assessment))
         expect(mrq.reload.options.count).to eq(0)
       end
diff --git a/spec/features/course/assessment/question/programming_management_spec.rb b/spec/features/course/assessment/question/programming_management_spec.rb
index 4c70a200a64..d398d5bae91 100644
--- a/spec/features/course/assessment/question/programming_management_spec.rb
+++ b/spec/features/course/assessment/question/programming_management_spec.rb
@@ -232,7 +232,7 @@
           fill_in 'Memory limit', with: question.memory_limit + 10
           click_button 'Save changes'
 
-          expect(page).to have_css('button', text: 'CONTINUE')
+          expect(page).to have_css('button', text: 'Continue')
         end
 
         it 'does not show the confirmation dialog when the course is not gamified' do
@@ -242,7 +242,7 @@
           fill_in 'Title', with: "#{question.title} updated"
           click_button 'Save changes'
 
-          expect(page).not_to have_css('button', text: 'CONTINUE')
+          expect(page).not_to have_css('button', text: 'Continue')
         end
 
         it 'does not show the confirmation dialog when there is no submission' do
@@ -251,7 +251,7 @@
           fill_in 'Title', with: "#{question.title} updated"
           click_button 'Save changes'
 
-          expect(page).not_to have_css('button', text: 'CONTINUE')
+          expect(page).not_to have_css('button', text: 'Continue')
         end
 
         it 'does not show the confirmation dialog when the assessment is non-autograded' do
@@ -261,7 +261,7 @@
           fill_in 'Title', with: "#{question.title} updated"
           click_button 'Save changes'
 
-          expect(page).not_to have_css('button', text: 'CONTINUE')
+          expect(page).not_to have_css('button', text: 'Continue')
         end
       end
     end
diff --git a/spec/features/course/assessment/question/text_response_management_spec.rb b/spec/features/course/assessment/question/text_response_management_spec.rb
index c7e77397ed2..905044dbbdd 100644
--- a/spec/features/course/assessment/question/text_response_management_spec.rb
+++ b/spec/features/course/assessment/question/text_response_management_spec.rb
@@ -137,12 +137,8 @@
 
         # Delete all solutions from question
         visit edit_path
-        find_all('section').each do |solution_section|
-          within solution_section do
-            find_button('Delete solution').click
-          end
-        end
 
+        find_all('button[aria-label="Delete solution"]').each(&:click)
         click_button 'Save changes'
         wait_for_page
 
diff --git a/spec/features/course/assessment/skill_management_spec.rb b/spec/features/course/assessment/skill_management_spec.rb
index c894363a523..52663a5f416 100644
--- a/spec/features/course/assessment/skill_management_spec.rb
+++ b/spec/features/course/assessment/skill_management_spec.rb
@@ -13,7 +13,7 @@
 
       scenario 'I can create a skill' do
         visit course_assessments_skills_path(course)
-        find('button.new-skill-button').click
+        click_button 'Skill'
 
         skill_attributes = attributes_for(:course_assessment_skill)
         fill_in 'title', with: skill_attributes[:title]
diff --git a/spec/features/course/assessment/submission/log_spec.rb b/spec/features/course/assessment/submission/log_spec.rb
index ffab00c96dc..32cba111692 100644
--- a/spec/features/course/assessment/submission/log_spec.rb
+++ b/spec/features/course/assessment/submission/log_spec.rb
@@ -43,7 +43,9 @@
         end.not_to(change { protected_submission.logs.count })
 
         # Logout and login again and visit the same submission
-        logout
+        click_on 'OK'
+        perform_logout_in_course CourseUser.for_user(user).first.name
+
         login_as(user)
         wait_for_page
 
@@ -88,8 +90,7 @@
 
         visit course_assessment_submission_logs_path(course, protected_assessment, submission)
 
-        expect(page).
-          to have_content(I18n.t('course.assessment.submission.logs.index.header'))
+        expect(page).to have_text 'Access Logs'
       end
     end
   end
diff --git a/spec/features/course/assessment/submission/manually_graded_spec.rb b/spec/features/course/assessment/submission/manually_graded_spec.rb
index 2d27ab4cbb9..77e053cd232 100644
--- a/spec/features/course/assessment/submission/manually_graded_spec.rb
+++ b/spec/features/course/assessment/submission/manually_graded_spec.rb
@@ -242,7 +242,7 @@
                                                      multiple_programming_submission)
 
         # The Run Code button is only shown for the auto_gradable? questions
-        expect(page).to have_css('#run-code', text: 'RUN CODE', count: 2)
+        expect(page).to have_button('Run Code', exact_text: false, count: 2)
       end
 
       scenario 'I see submitted programming answers with code tags' do
diff --git a/spec/features/course/assessment/submissions_viewing_spec.rb b/spec/features/course/assessment/submissions_viewing_spec.rb
index b87264aa106..9ae2ddd0b2b 100644
--- a/spec/features/course/assessment/submissions_viewing_spec.rb
+++ b/spec/features/course/assessment/submissions_viewing_spec.rb
@@ -86,12 +86,9 @@
         expect(page).to have_no_content_tag_for(attempting_submission)
         expect(page).to have_no_content_tag_for(published_submission)
 
-        # All Pending submissions can be assessed from the sidebar
-        within find('.sidebar') do
-          expect(page).
-            to have_link(I18n.t('course.assessment.submissions.sidebar_title'),
-                         href: course_submissions_path(course))
-        end
+        expect(find_sidebar).
+          to have_link(I18n.t('course.assessment.submissions.sidebar_title'),
+                       href: course_submissions_path(course))
       end
 
       # COMMENTED OUT as it is not possible to select the options for filtering
diff --git a/spec/features/course/assessment_management_spec.rb b/spec/features/course/assessment_management_spec.rb
index 7080271a895..3b6f08e0365 100644
--- a/spec/features/course/assessment_management_spec.rb
+++ b/spec/features/course/assessment_management_spec.rb
@@ -65,7 +65,7 @@
         visit course_path(course)
 
         assessment_sidebar = 'activerecord.attributes.course/assessment/category/title.default'
-        expect(page).to have_selector('li', text: assessment_sidebar)
+        expect(find_sidebar).to have_text(assessment_sidebar)
       end
 
       scenario 'I can see published assessments' do
diff --git a/spec/features/course/duplication_spec.rb b/spec/features/course/duplication_spec.rb
index 067167a9466..6d1462f75fd 100644
--- a/spec/features/course/duplication_spec.rb
+++ b/spec/features/course/duplication_spec.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 require 'rails_helper'
 
-RSpec.feature 'Course: Duplication' do
+RSpec.feature 'Course: Duplication', js: true do
   let!(:instance) { Instance.default }
 
   with_tenant(:instance) do
@@ -18,7 +18,7 @@
         scenario 'I cannot view the Duplication Sidebar item' do
           visit course_path(course)
 
-          expect(page).not_to have_selector('li', text: 'layouts.duplication.title')
+          expect(find_sidebar).not_to have_text(I18n.t('layouts.duplication.title'))
         end
       end
 
@@ -28,7 +28,7 @@
         scenario 'I can view the Duplication Sidebar item' do
           visit course_path(course)
 
-          expect(page).to have_selector('li', text: 'layouts.duplication.title')
+          expect(find_sidebar).to have_text(I18n.t('layouts.duplication.title'))
         end
       end
     end
@@ -39,10 +39,10 @@
       scenario 'I can view the Duplication Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'layouts.duplication.title')
+        expect(find_sidebar).to have_text(I18n.t('layouts.duplication.title'))
       end
 
-      context 'when I am a manager in another course', js: true do
+      context 'when I am a manager in another course' do
         let(:source_course) { create(:course) }
         let!(:course_user) { create(:course_manager, course: source_course, user: user) }
         let(:assessment_title1) { SecureRandom.hex }
@@ -108,11 +108,13 @@
     context 'As a Course Student' do
       let(:user) { create(:course_student, course: course).user }
 
-      scenario 'I cannot view the Duplication Sidebar item and cannot duplicate a course' do
+      scenario 'I cannot view the Duplication Sidebar item' do
         visit course_path(course)
 
-        expect(page).not_to have_selector('li', text: 'layouts.duplication.title')
+        expect(find_sidebar).not_to have_text(I18n.t('layouts.duplication.title'))
+      end
 
+      scenario 'I cannot access the duplication page', js: false do
         visit course_duplication_path(course)
 
         expect(page.status_code).to eq(403)
diff --git a/spec/features/course/forum/topic_management_spec.rb b/spec/features/course/forum/topic_management_spec.rb
index 9b54024c14f..614633955b9 100644
--- a/spec/features/course/forum/topic_management_spec.rb
+++ b/spec/features/course/forum/topic_management_spec.rb
@@ -208,7 +208,7 @@
       scenario 'I can view the Forum Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'course.forum.forums.sidebar_title')
+        expect(find_sidebar).to have_text(I18n.t('course.forum.forums.sidebar_title'))
       end
 
       scenario 'I can see shown topics' do
diff --git a/spec/features/course/group_management_spec.rb b/spec/features/course/group_management_spec.rb
index 2ffdd5910b2..cac77a8a7d5 100644
--- a/spec/features/course/group_management_spec.rb
+++ b/spec/features/course/group_management_spec.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 require 'rails_helper'
 
-RSpec.feature 'Courses: Groups' do
+RSpec.feature 'Courses: Groups', js: true do
   let(:instance) { Instance.default }
 
   with_tenant(:instance) do
@@ -17,10 +17,10 @@
       scenario 'I can view the Group Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'course.groups.sidebar_title')
+        expect(find_sidebar).to have_text(I18n.t('course.groups.sidebar_title'))
       end
 
-      scenario 'I can view all the group categories in course', js: true do
+      scenario 'I can view all the group categories in course' do
         visit course_group_category_path(course, group_category1)
 
         expect(page).to have_selector('h5', text: 'Groups')
@@ -34,7 +34,7 @@
         expect(page).to have_link(group_category1.name, href: course_group_category_path(course, group_category1))
       end
 
-      scenario 'I can view all the groups under a group category', js: true do
+      scenario 'I can view all the groups under a group category' do
         visit course_group_category_path(course, group_category1)
 
         groups.each do |group|
@@ -113,7 +113,7 @@
       scenario 'I can view the Group Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'course.groups.sidebar_title')
+        expect(find_sidebar).to have_text(I18n.t('course.groups.sidebar_title'))
       end
 
       # scenario 'I can edit my group' do
@@ -149,7 +149,7 @@
       scenario 'I cannot view the Group Sidebar item' do
         visit course_path(course)
 
-        expect(page).not_to have_selector('li', text: 'course.groups.sidebar_title')
+        expect(find_sidebar).not_to have_text(I18n.t('course.groups.sidebar_title'))
       end
     end
   end
diff --git a/spec/features/course/homepage_spec.rb b/spec/features/course/homepage_spec.rb
index 58dbd021f14..cab4ca9b92a 100644
--- a/spec/features/course/homepage_spec.rb
+++ b/spec/features/course/homepage_spec.rb
@@ -142,7 +142,7 @@
         visit course_path(course)
 
         within find("#todo-#{assessment_todos[:enter_password].id}") do
-          expect(page).to have_text('ENTER PASSWORD')
+          expect(page).to have_text('Unlock')
         end
 
         [:completed, :unpublished].each do |status|
@@ -150,11 +150,11 @@
         end
 
         within find("#todo-#{assessment_todos[:not_started].id}") do
-          expect(page).to have_text('ATTEMPT')
+          expect(page).to have_text('Attempt')
         end
 
         within find("#todo-#{assessment_todos[:in_progress].id}") do
-          expect(page).to have_text('RESUME')
+          expect(page).to have_text('Resume')
         end
 
         find("#todo-ignore-button-#{assessment_todos[:in_progress].id}").click
@@ -163,11 +163,11 @@
         # Reload page to load other todos
         visit course_path(course)
         within find("#todo-#{video_todo.id}") do
-          expect(page).to have_text('WATCH')
+          expect(page).to have_text('Watch')
         end
 
         within find("#todo-#{survey_todo.id}") do
-          expect(page).to have_text('RESPOND')
+          expect(page).to have_text('Respond')
         end
       end
     end
@@ -202,7 +202,7 @@
 
       scenario 'I am able to see the course description', js: true do
         visit course_path(course)
-        expect(page).to have_selector('h2', text: 'Description')
+        expect(page).to have_text('Description')
         expect(page).to have_text(course.description)
       end
     end
diff --git a/spec/features/course/invitation_management_spec.rb b/spec/features/course/invitation_management_spec.rb
index f60229ac1f8..deea45605f9 100644
--- a/spec/features/course/invitation_management_spec.rb
+++ b/spec/features/course/invitation_management_spec.rb
@@ -142,7 +142,7 @@
           fill_in 'registration-code', with: invitation.invitation_key
           find('#register-button').click
 
-          expect(page).to have_selector('h2', text: 'Announcements')
+          wait_for_page
           course_user = course.course_users.find_by(user_id: user.id)
           expect(course_user).to be_present
           expect(course_user.name).to eq(invitation.name)
diff --git a/spec/features/course/lesson_plan_spec.rb b/spec/features/course/lesson_plan_spec.rb
index da7049578d4..1c84a3e6249 100644
--- a/spec/features/course/lesson_plan_spec.rb
+++ b/spec/features/course/lesson_plan_spec.rb
@@ -52,10 +52,10 @@
     context 'As a Course Student' do
       let(:user) { create(:course_student, course: course).user }
 
-      scenario 'I can view the LessonPlan Sidebar item' do
+      scenario 'I can view the LessonPlan Sidebar item', js: true do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'course.lesson_plan.items.sidebar_title')
+        expect(find_sidebar).to have_text(I18n.t('course.lesson_plan.items.sidebar_title'))
       end
 
       scenario 'I can view all lesson plan items and milestones', js: true do
diff --git a/spec/features/course/level_management_spec.rb b/spec/features/course/level_management_spec.rb
index 934e2e3d12d..341e6aa49ce 100644
--- a/spec/features/course/level_management_spec.rb
+++ b/spec/features/course/level_management_spec.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 require 'rails_helper'
 
-RSpec.feature 'Course: Levels' do
+RSpec.feature 'Course: Levels', js: true do
   subject { page }
 
   let!(:instance) { Instance.default }
@@ -24,10 +24,10 @@
       scenario 'I can view the Level Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'course.levels.sidebar_title')
+        expect(find_sidebar).to have_text(I18n.t('course.levels.sidebar_title'))
       end
 
-      scenario 'I can view course levels', js: true do
+      scenario 'I can view course levels' do
         visit course_levels_path(course)
 
         (1..3).each do |i|
@@ -38,7 +38,7 @@
         end
       end
 
-      scenario 'I can create a course level', js: true do
+      scenario 'I can create a course level' do
         visit course_levels_path(course)
         find('#add-level').click
         find('#save-levels').click
@@ -49,7 +49,7 @@
         expect(course.reload.levels.count).to eq 5
       end
 
-      scenario 'I can delete a course level', js: true do
+      scenario 'I can delete a course level' do
         visit course_levels_path(course)
         find('#delete_2').click
         find('#save-levels').click
@@ -66,7 +66,7 @@
       scenario 'I cannot view the Level Sidebar item' do
         visit course_path(course)
 
-        expect(page).not_to have_selector('li', text: 'course.levels.sidebar_title')
+        expect(find_sidebar).not_to have_text(I18n.t('course.levels.sidebar_title'))
       end
     end
   end
diff --git a/spec/features/course/material/folder_management_spec.rb b/spec/features/course/material/folder_management_spec.rb
index 3f6acfe1022..239240b2a33 100644
--- a/spec/features/course/material/folder_management_spec.rb
+++ b/spec/features/course/material/folder_management_spec.rb
@@ -144,7 +144,7 @@
       scenario 'I can view the Material Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'course.material.sidebar_title')
+        expect(find_sidebar).to have_text(I18n.t('course.material.sidebar_title'))
       end
 
       scenario 'I can view valid subfolders' do
diff --git a/spec/features/course/registration_spec.rb b/spec/features/course/registration_spec.rb
index 8351e4e967c..9772859290d 100644
--- a/spec/features/course/registration_spec.rb
+++ b/spec/features/course/registration_spec.rb
@@ -29,9 +29,6 @@
         # Correct code
         fill_in 'registration-code', with: invitation.invitation_key
         find('#register-button').click
-        # Go to home page of an enrolled user, which will always have an announcement header
-        expect(page).
-          to have_selector('h2', text: 'Announcements')
       end
     end
 
@@ -41,7 +38,7 @@
       scenario 'Users can create and cancel enrol requests', js: true do
         visit course_path(course)
 
-        expect(page).to have_selector('div#course-description', text: course.description)
+        expect(page).to have_text(course.description)
 
         expect(ActionMailer::Base.deliveries.count).to eq(0)
         find('#submit-enrol-request-button').click
diff --git a/spec/features/course/staff_management_spec.rb b/spec/features/course/staff_management_spec.rb
index 487cc5f452e..23ee632374f 100644
--- a/spec/features/course/staff_management_spec.rb
+++ b/spec/features/course/staff_management_spec.rb
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 require 'rails_helper'
 
-RSpec.feature 'Courses: Staff Management' do
+RSpec.feature 'Courses: Staff Management', js: true do
   let(:instance) { Instance.default }
 
   with_tenant(:instance) do
@@ -16,7 +16,7 @@
       scenario 'I cannot view the Users Management Sidebar item' do
         visit course_path(course)
 
-        expect(page).not_to have_selector('li', text: 'layouts.course_users.title')
+        expect(find_sidebar).not_to have_text(I18n.t('layouts.course_users.title'))
       end
     end
 
@@ -27,10 +27,10 @@
       scenario 'I can view the Users Management Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'layouts.course_users.title')
+        expect(find_sidebar).to have_text(I18n.t('layouts.course_users.title'))
       end
 
-      scenario 'I cannot access the staff list' do
+      scenario 'I cannot access the staff list', js: false do
         visit course_users_staff_path(course)
         expect(page.status_code).to eq(403)
       end
@@ -42,10 +42,10 @@
       scenario 'I can view the Users Management Sidebar item' do
         visit course_path(course)
 
-        expect(page).to have_selector('li', text: 'layouts.course_users.title')
+        expect(find_sidebar).to have_text(I18n.t('layouts.course_users.title'))
       end
 
-      scenario 'I can view the list of staff', js: true do
+      scenario 'I can view the list of staff' do
         visit course_users_staff_path(course)
 
         course_students.each do |student|
@@ -57,7 +57,7 @@
         end
       end
 
-      scenario 'I can change staff name and role', js: true do
+      scenario 'I can change staff name and role' do
         new_name = 'new staff name'
         staff_to_change = course_managers.sample
         visit course_users_staff_path(course)
@@ -82,7 +82,7 @@
         expect(staff_to_change.name).to eq(new_name)
       end
 
-      scenario 'I can upgrade students to staff', js: true do
+      scenario 'I can upgrade students to staff' do
         visit course_users_staff_path(course)
 
         staff_to_be = course_students[0]
@@ -104,7 +104,7 @@
         end
       end
 
-      scenario 'I can delete staff', js: true do
+      scenario 'I can delete staff' do
         staff_to_delete = course_managers.sample
         visit course_users_staff_path(course)
 
diff --git a/spec/features/course/unread_status_management_spec.rb b/spec/features/course/unread_status_management_spec.rb
index 968b667bd1c..bc45d261731 100644
--- a/spec/features/course/unread_status_management_spec.rb
+++ b/spec/features/course/unread_status_management_spec.rb
@@ -51,12 +51,9 @@
           visit course_path(course)
         end
 
-        it 'shows the correct number of unread items' do
+        it 'shows the correct number of unread items', js: true do
           expect(course.announcements.unread_by(first_user).count).to eq(1)
-          expect(page).to have_link(I18n.t('course.announcements.sidebar_title'))
-          within find_link(I18n.t('course.announcements.sidebar_title')) do
-            find('.unread', text: '1')
-          end
+          expect(find_sidebar.find_link(I18n.t('course.announcements.sidebar_title'))).to have_text 1
         end
       end
     end
diff --git a/spec/features/course/user_profile_spec.rb b/spec/features/course/user_profile_spec.rb
index 146d70ce925..5e2ec034eb5 100644
--- a/spec/features/course/user_profile_spec.rb
+++ b/spec/features/course/user_profile_spec.rb
@@ -18,7 +18,6 @@
         visit course_user_path(course, course_student)
 
         expect(page).to have_text(course_student.name)
-        expect(page).to_not have_link(nil, href: course_user_manage_email_subscription_path(course, achievement))
 
         expect(page).to have_selector('div.user-achievements-stat')
         expect(page).to have_link(nil, href: course_achievement_path(course, achievement))
@@ -37,7 +36,6 @@
         visit course_user_path(course, course_teaching_assistant)
 
         expect(page).to have_text(course_teaching_assistant.name)
-        expect(page).to_not have_link(nil, href: course_user_manage_email_subscription_path(course, achievement))
 
         expect(page).to_not have_selector('div.user-achievements-stat')
         expect(page).to_not have_selector('div.user-level-stat')
@@ -50,7 +48,6 @@
         visit course_user_path(course, course_student)
 
         expect(page).to have_text(course_student.name)
-        expect(page).to_not have_link(nil, href: course_user_manage_email_subscription_path(course, course_student))
 
         expect(page).to have_selector('div.user-achievements-stat')
         expect(page).to have_link(nil, href: course_achievement_path(course, achievement))
@@ -64,7 +61,6 @@
         visit course_user_path(course, course_student)
 
         expect(page).to have_text(course_student.name)
-        expect(page).to have_link(nil, href: course_user_manage_email_subscription_path(course, course_student))
 
         expect(page).to have_selector('h5.user-exp-stat-value')
         expect(page).to have_selector('div.user-achievements-stat')
diff --git a/spec/features/course_management_spec.rb b/spec/features/course_management_spec.rb
index b413a48fe7a..ca8e3fc90ea 100644
--- a/spec/features/course_management_spec.rb
+++ b/spec/features/course_management_spec.rb
@@ -10,12 +10,13 @@
     before { login_as(user, scope: :user) }
 
     scenario 'Users can see a list of published courses', js: true do
-      create(:course)
-      create(:course, :published)
+      unpublished_course = create(:course)
+      published_course = create(:course, :published)
 
       visit courses_path
-      expect(all('.course').count).to eq(1)
-      expect(all('button.new-course-button').count).to eq(1)
+      expect(page).to have_text(published_course.title)
+      expect(page).not_to have_text(unpublished_course.title)
+      expect(page).to have_button('New Course')
     end
 
     scenario 'Users can see a list of their courses' do
diff --git a/spec/features/global_announcements_spec.rb b/spec/features/global_announcements_spec.rb
index ff6b9ee95eb..1f66c03e41b 100644
--- a/spec/features/global_announcements_spec.rb
+++ b/spec/features/global_announcements_spec.rb
@@ -26,22 +26,16 @@
         announcement = create(:instance_announcement, instance: instance)
         visit announcements_path
 
-        expect(page).to have_tag('div.global-announcement') do
-          with_tag('div.panel-heading', text: format('×%<title>s', title: announcement.title))
-          with_tag('div.panel-body', text: announcement.content)
-        end
-        expect(page).to have_selector("div#announcement-#{announcement.id}")
+        expect(page).to have_text(announcement.title)
+        expect(page).to have_text(announcement.content)
       end
 
       scenario 'I should see system announcements' do
         announcement = create(:system_announcement)
         visit announcements_path
 
-        expect(page).to have_tag('div.global-announcement') do
-          with_tag('div.panel-heading', text: format('×%<title>s', title: announcement.title))
-          with_tag('div.panel-body', text: announcement.content)
-        end
-        expect(page).to have_selector("div#announcement-#{announcement.id}")
+        expect(page).to have_text(announcement.title)
+        expect(page).to have_text(announcement.content)
       end
 
       scenario 'I should see both types of announcements' do
@@ -56,10 +50,8 @@
 
         visit announcements_path
 
-        expect(page).to have_tag('div.global-announcement') do
-          with_tag('div.panel-heading', text: format('×%<title>s', title: announcements.last.title))
-          with_tag('div.panel-body', text: announcements.last.content)
-        end
+        expect(page).to have_text(announcements.last.title)
+        expect(page).to have_text(announcements.last.content)
 
         announcements.select(&:currently_active?).each do |announcement|
           expect(page).to have_selector("div#announcement-#{announcement.id}")
diff --git a/spec/features/system/admin/announcement_management_spec.rb b/spec/features/system/admin/announcement_management_spec.rb
index 04c3bb2dd3f..470fec8cf8e 100644
--- a/spec/features/system/admin/announcement_management_spec.rb
+++ b/spec/features/system/admin/announcement_management_spec.rb
@@ -23,8 +23,8 @@
         find('button.btn-submit').click
         wait_for_page
         expect(current_path).to eq(admin_announcements_path)
-        expect(page).to have_selector('h3', text: announcement[:title])
-        expect(page).to have_selector('p', text: announcement[:content])
+        expect(page).to have_text(announcement[:title])
+        expect(page).to have_text(announcement[:content])
         expect_toastify('New announcement posted!')
       end
 
@@ -48,7 +48,7 @@
 
         expect(current_path).to eq admin_announcements_path
         within find("#announcement-#{announcement.id}") do
-          expect(page).to have_selector('h3', text: new_title)
+          expect(page).to have_text(new_title)
         end
         expect(announcement.reload.title).to eq(new_title)
       end
diff --git a/spec/features/system/admin/course_management_spec.rb b/spec/features/system/admin/course_management_spec.rb
index 6ac40aaea20..92cb63fe8d8 100644
--- a/spec/features/system/admin/course_management_spec.rb
+++ b/spec/features/system/admin/course_management_spec.rb
@@ -39,11 +39,20 @@
 
         visit admin_courses_path
 
-        find(:xpath, '//*[@id="app-root"]/div[1]/div[4]/div[2]/div[2]/p[2]/button').click
-        expect(page).to have_selector("tr.course_#{active_course.id}", text: active_course.title)
-        expect(page).to have_link(nil, href: "//#{active_course.instance.host}/courses/#{active_course.id}")
+        within find('p', text: 'Active Courses', exact_text: false) do
+          find_all('a').first.click
+        end
+
+        search_field = find_field('Search courses by title or owner')
+
+        search_field.set(active_course.title)
+        expect(page).to have_link(
+          active_course.title,
+          href: "//#{active_course.instance.host}/courses/#{active_course.id}"
+        )
 
-        expect(page).not_to have_selector('p.course_title', text: inactive_course.title)
+        search_field.set(inactive_course.title)
+        expect(page).not_to have_text(inactive_course.title)
       end
 
       scenario 'I can delete a course' do
diff --git a/spec/features/system/admin/instance/instance_announcement_management_spec.rb b/spec/features/system/admin/instance/instance_announcement_management_spec.rb
index caf72353192..2a8e4f01e66 100644
--- a/spec/features/system/admin/instance/instance_announcement_management_spec.rb
+++ b/spec/features/system/admin/instance/instance_announcement_management_spec.rb
@@ -17,7 +17,7 @@
       scenario 'I can create instance announcements' do
         visit admin_instance_announcements_path
 
-        find('button#new-announcement-button').click
+        click_button 'New Announcement'
 
         announcement = attributes_for(:system_announcement)
         fill_in 'title', with: announcement[:title]
@@ -25,8 +25,8 @@
 
         find('button.btn-submit').click
         expect(current_path).to eq(admin_instance_announcements_path)
-        expect(page).to have_selector('h3', text: announcement[:title])
-        expect(page).to have_selector('p', text: announcement[:content])
+        expect(page).to have_text(announcement[:title])
+        expect(page).to have_text(announcement[:content])
         expect_toastify('New announcement posted!')
       end
 
@@ -50,7 +50,7 @@
 
         expect(current_path).to eq admin_instance_announcements_path
         within find("#announcement-#{announcement.id}") do
-          expect(page).to have_selector('h3', text: new_title)
+          expect(page).to have_text(new_title)
         end
         expect(announcement.reload.title).to eq(new_title)
       end
diff --git a/spec/features/system/admin/instance/user_management_spec.rb b/spec/features/system/admin/instance/user_management_spec.rb
index dd71d688094..c658e067ef1 100644
--- a/spec/features/system/admin/instance/user_management_spec.rb
+++ b/spec/features/system/admin/instance/user_management_spec.rb
@@ -22,8 +22,11 @@
 
       scenario 'I can filter users by role and view only administrators' do
         visit admin_instance_users_path
-        find(:xpath,
-             '//*[@id="app-root"]/div[1]/div[4]/div[3]/div[2]/p[2]/button[1]').click
+
+        within find('p', text: 'Total Users', exact_text: false) do
+          find_all('a').first.click
+        end
+
         instance_users.each do |instance_user|
           expect(page).not_to have_text(instance_user.user.name)
           expect(page).to have_no_selector('p.user_email', exact_text: instance_user.user.email)
diff --git a/spec/features/system/admin/user_management_spec.rb b/spec/features/system/admin/user_management_spec.rb
index 32da5c8bb80..3c5c6712734 100644
--- a/spec/features/system/admin/user_management_spec.rb
+++ b/spec/features/system/admin/user_management_spec.rb
@@ -24,7 +24,11 @@
 
       scenario 'I can filter users by role and view only administrators' do
         visit admin_users_path
-        find(:xpath, '//*[@id="app-root"]/div[1]/div[4]/div[2]/div[2]/p[1]/button[1]').click
+
+        within find('p', text: 'Total Users', exact_text: false) do
+          find_all('a').first.click
+        end
+
         User.human_users.normal.ordered_by_name.limit(3).each do |user|
           expect(page).to have_no_selector('div.user_name', exact_text: user.name)
           expect(page).to have_no_selector('p.user_email', exact_text: user.email)
diff --git a/spec/features/user/profile_edit_spec.rb b/spec/features/user/profile_edit_spec.rb
index 36deab8e344..29952f362ed 100644
--- a/spec/features/user/profile_edit_spec.rb
+++ b/spec/features/user/profile_edit_spec.rb
@@ -13,15 +13,14 @@
 
     context 'As a registered user' do
       scenario 'I can change my profile' do
-        skip 'Flaky tests'
         new_name = 'New Name'
         time_zone = 'Singapore'
 
         fill_in 'name', with: new_name
         select time_zone, from: 'timezone'
         click_button 'Save changes'
+        wait_for_page
 
-        expect_toastify('Your changes have been saved.')
         expect(page).to have_field('name', with: new_name)
         expect(user.reload.time_zone).to eq(time_zone)
       end
@@ -37,7 +36,6 @@
         click_button 'Save changes'
         wait_for_page
 
-        expect_toastify('Your changes have been saved.')
         expect(user.reload.profile_photo.url).to be_present
       end
     end
diff --git a/spec/helpers/application_helper_spec.rb b/spec/helpers/application_helper_spec.rb
deleted file mode 100644
index df7596e9b38..00000000000
--- a/spec/helpers/application_helper_spec.rb
+++ /dev/null
@@ -1,124 +0,0 @@
-# frozen_string_literal: true
-require 'rails_helper'
-
-RSpec.describe ApplicationHelper, type: :helper do
-  describe 'sidebar navigation' do
-    it 'defaults to not having a sidebar' do
-      expect(helper.sidebar?).to eq(false)
-    end
-
-    describe '#sidebar!' do
-      it 'sets #sidebar?' do
-        helper.sidebar!
-        expect(helper.sidebar?).to eq(true)
-      end
-    end
-
-    describe '#sidebar' do
-      it 'sets #sidebar?' do
-        helper.sidebar do
-          ''
-        end
-        expect(helper.sidebar?).to eq(true)
-      end
-
-      it 'accepts a block as the sidebar contents' do
-        result = helper.sidebar do
-          'Test Contents'
-        end
-        expect(result).to include('Test Contents')
-      end
-    end
-  end
-
-  describe 'sidebar items' do
-    let(:sidebar_items) do
-      [
-        {
-          title: 'Announcements',
-          path: 'courses/1/announcements',
-          unread: 1
-        },
-        {
-          title: 'Levels',
-          path: 'courses/1/levels'
-        }
-      ]
-    end
-
-    describe '#link_to_sidebar_item' do
-      let(:sidebar_item) { sidebar_items.sample }
-      subject { helper.link_to_sidebar_item(sidebar_item) }
-
-      it 'generates a link with title' do
-        expect(subject).to have_tag('a', text: /^#{sidebar_item[:title]}/)
-        expect(subject).to have_tag('a', with: { href: sidebar_item[:path] })
-      end
-
-      it 'shows the unread badge' do
-        if sidebar_item[:unread]
-          expect(subject).to have_tag('span.unread') do
-            with_tag 'span.badge', text: sidebar_item[:unread]
-          end
-        else
-          expect(subject).to have_tag('span.unread')
-        end
-      end
-    end
-
-    describe '#sidebar_items' do
-      context 'when function is called' do
-        subject { helper.sidebar_items(sidebar_items) }
-
-        it 'displays all the sidebar items' do
-          expect(subject).to have_tag('ul.nav.nav-pills.nav-stacked')
-          sidebar_items.each do |item|
-            expect(subject).to have_tag('li') do
-              with_tag('a', text: /^#{item[:title]}/)
-              with_tag('a', with: { href: item[:path] })
-            end
-          end
-        end
-      end
-
-      it 'sets #sidebar?' do
-        helper.sidebar_items(sidebar_items)
-        expect(helper.sidebar?).to eq(true)
-      end
-    end
-  end
-
-  describe 'page title helper' do
-    subject { helper.page_title }
-
-    context 'when the page title is not set' do
-      it { is_expected.to eq(t('layout.coursemology')) }
-    end
-
-    context 'when the page title is explicitly set' do
-      let(:test_title) { 'this is a test' }
-      before { helper.content_for(:page_title, test_title) }
-      it { is_expected.to eq("#{test_title} - #{t('layout.coursemology')}") }
-    end
-
-    context 'when there are breadcrumbs present' do
-      let!(:breadcrumbs) { ['a', 'b', 'c'] }
-      before do
-        bc = breadcrumbs
-        helper.define_singleton_method(:breadcrumb_names) { bc }
-      end
-      it { is_expected.to eq("#{breadcrumbs.reverse.join(' - ')} - #{t('layout.coursemology')}") }
-    end
-  end
-
-  describe '#page_header' do
-    context 'when custom header text is provided' do
-      let(:header) { 'Custom header' }
-      subject { helper.page_header(header) }
-
-      it 'shows the custom header text' do
-        expect(subject).to have_tag('div h1 span', text: header)
-      end
-    end
-  end
-end
diff --git a/spec/helpers/course/controller_helper_spec.rb b/spec/helpers/course/controller_helper_spec.rb
index 72cadb6475e..24b2b9f7b32 100644
--- a/spec/helpers/course/controller_helper_spec.rb
+++ b/spec/helpers/course/controller_helper_spec.rb
@@ -89,123 +89,5 @@
         end
       end
     end
-
-    describe '#display_course_user_badge' do
-      let(:user) { create(:course_user, course: course) }
-      subject { helper.display_course_user_badge(user) }
-
-      context 'when the levels component is enabled in the course' do
-        before do
-          controller.define_singleton_method(:current_component_host) do
-            { course_achievements_component: nil,
-              course_levels_component: 'foo' }
-          end
-        end
-
-        context 'when course user has experience points' do
-          before do
-            create(:course_level, course: course, experience_points_threshold: 100)
-            create(:course_level, course: course, experience_points_threshold: 200)
-            create(:course_experience_points_record, points_awarded: 140, course_user: user)
-          end
-
-          it "shows the course user's level and experience points" do
-            expect(subject).to include(I18n.t('layouts.course_user_badge.level'))
-            expect(subject).to include(I18n.t('layouts.course_user_badge.experience_points'))
-          end
-
-          it 'displays the progress bar with current level progress' do
-            expect(helper).to receive(:display_progress_bar).
-              with(user.level_progress_percentage,
-                   class: ['progress-bar-info', 'course-user-experience-points'],
-                   tooltip_text: I18n.t('common.percentage'),
-                   tooltip_placement: 'right')
-            subject
-          end
-
-          context 'when course user is at the max level' do
-            before do
-              create(:course_experience_points_record, points_awarded: 1000, course_user: user)
-            end
-
-            it 'shows the max level message' do
-              # Reload here as course_user#current_level caches and is unable to
-              # reload on updated experience points.
-              course_user = CourseUser.find(user.id)
-              expect(helper.display_course_user_badge(course_user)).
-                to include(I18n.t('layouts.course_user_badge.max_level'))
-            end
-          end
-
-          context 'when course user is not at the max level' do
-            it 'shows the next level message' do
-              # Reload here as course_user#current_level caches and is unable to
-              # reload on updated experience points.
-              course_user = CourseUser.find(user.id)
-              expect(helper.display_course_user_badge(course_user)).
-                to include(I18n.t('layouts.course_user_badge.next_level'))
-            end
-          end
-        end
-      end
-
-      context 'when the achievements component is enabled in the course' do
-        before do
-          controller.define_singleton_method(:current_component_host) do
-            { course_achievements_component: 'bar',
-              course_levels_component: nil }
-          end
-        end
-
-        context 'when course user has more than 3 achievements' do
-          before { create_list(:course_user_achievement, 4, course_user: user) }
-
-          it "displays the achievement tab with the course user's achievement count" do
-            expect(subject).to include(I18n.t('layouts.course_user_badge.achievements'))
-            expect(subject).to include((user.achievement_count - 3).to_s)
-          end
-        end
-      end
-
-      context 'when levels and achievement components are disabled' do
-        before do
-          controller.define_singleton_method(:current_component_host) do
-            { course_achievements_component: nil,
-              course_levels_component: nil }
-          end
-        end
-
-        it 'does not display the level of the course user' do
-          expect(subject).not_to include(I18n.t('layouts.course_user_badge.level'))
-        end
-
-        it 'does not display the achievement tab' do
-          expect(subject).not_to include(I18n.t('layouts.course_user_badge.achievements'))
-        end
-      end
-    end
-
-    describe '#display_course_logo' do
-      subject { helper.display_course_logo(course) }
-
-      context 'when no course logo is uploaded' do
-        it 'displays the default course logo' do
-          expect(subject).to have_tag('img', with: { 'src^': '/assets/course_default_logo-' })
-        end
-      end
-
-      context 'when a course logo is uploaded' do
-        let(:logo) { File.join(Rails.root, '/spec/fixtures/files/picture.jpg') }
-        before do
-          file = File.open(logo, 'rb')
-          course.logo = file
-          file.close
-        end
-
-        it 'displays the course logo' do
-          expect(subject).to include(course.logo.medium.url)
-        end
-      end
-    end
   end
 end
diff --git a/spec/requests/devise_pages_spec.rb b/spec/requests/devise_pages_spec.rb
deleted file mode 100644
index fcffe80f36d..00000000000
--- a/spec/requests/devise_pages_spec.rb
+++ /dev/null
@@ -1,9 +0,0 @@
-# frozen_string_literal: true
-require 'rails_helper'
-
-RSpec.describe 'Devise Pages' do
-  it 'displays the proper page action class' do
-    get new_user_password_path
-    expect(response.body).to have_tag('div.devise-passwords')
-  end
-end
diff --git a/spec/requests/high_voltage_pages_spec.rb b/spec/requests/high_voltage_pages_spec.rb
deleted file mode 100644
index 8f1f0d46d03..00000000000
--- a/spec/requests/high_voltage_pages_spec.rb
+++ /dev/null
@@ -1,9 +0,0 @@
-# frozen_string_literal: true
-require 'rails_helper'
-
-RSpec.describe 'High Voltage Pages' do
-  it 'displays the proper page action class' do
-    get '/'
-    expect(response.body).to have_tag('div.home')
-  end
-end
diff --git a/spec/support/capybara.rb b/spec/support/capybara.rb
index 7a5c95b7cd8..f8776528776 100644
--- a/spec/support/capybara.rb
+++ b/spec/support/capybara.rb
@@ -144,6 +144,16 @@ def find_react_hook_form_error
       expect(page).to have_text('Failed submitting this form. Please try again.')
     end
 
+    def find_sidebar
+      all('aside').first
+    end
+
+    def perform_logout_in_course(user_name)
+      find_sidebar.find_all('div', text: user_name).first.click
+      find('span', text: 'Sign out').click
+      wait_for_page
+    end
+
     def confirm_registartion_token_via_email
       token = ActionMailer::Base.deliveries.last.body.match(/confirmation_token=.*(?=")/)
       visit "/users/confirmation?#{token}"