diff --git a/assets/core/scss/mixins/_inputs.scss b/assets/core/scss/mixins/_inputs.scss
index ac0b49efc3..eb9e845aa7 100644
--- a/assets/core/scss/mixins/_inputs.scss
+++ b/assets/core/scss/mixins/_inputs.scss
@@ -55,6 +55,13 @@
   @if $size == lg {
     padding: $tutor-spacing-5;
   }
+
+  // Prevent iOS Safari from auto-zooming focused fields and exposing
+  // horizontal overflow on mobile layouts.
+  @media (hover: none) and (pointer: coarse) {
+    font-size: $tutor-font-size-medium;
+    line-height: $tutor-line-height-medium;
+  }
 }
 
 @mixin tutor-textarea($min-height: 92px) {
diff --git a/assets/core/scss/tokens/_zIndex.scss b/assets/core/scss/tokens/_zIndex.scss
index 781873c980..5c4c8ea550 100644
--- a/assets/core/scss/tokens/_zIndex.scss
+++ b/assets/core/scss/tokens/_zIndex.scss
@@ -1,4 +1,4 @@
-// Design Tokens - z-index 
+// Design Tokens - z-index
 // CSS variables for z-index
 
 // =============================================================================
@@ -9,7 +9,7 @@ $tutor-z-negative: -1;
 $tutor-z-positive: 1;
 $tutor-z-dropdown: 2;
 $tutor-z-level: 0;
-$tutor-z-sidebar: 9;
+$tutor-z-sidebar: 20;
 $tutor-z-header: 10;
 $tutor-z-footer: 10;
 $tutor-z-modal: 25;
@@ -29,4 +29,4 @@ $tutor-z: (
   footer: $tutor-z-footer,
   modal: $tutor-z-modal,
   highest: $tutor-z-highest,
-);
\ No newline at end of file
+);
diff --git a/assets/icons/cross-colorize.svg b/assets/icons/cross-colorize.svg
new file mode 100644
index 0000000000..cd9e5e10ba
--- /dev/null
+++ b/assets/icons/cross-colorize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="var(--tutor-icon-critical, #d92d20)"/><path stroke="var(--tutor-icon-idle-inverse, #fff)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12 8-4 4m0-4 4 4"/></svg>
\ No newline at end of file
diff --git a/assets/icons/info-colorize.svg b/assets/icons/info-colorize.svg
new file mode 100644
index 0000000000..1e7770ca49
--- /dev/null
+++ b/assets/icons/info-colorize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="var(--tutor-icon-caution, #fac515)"/><path stroke="var(--tutor-icon-idle-inverse, #fff)" stroke-linecap="round" stroke-width="1.5" d="M10 13.664v-3.75M10 7.008V7"/></svg>
\ No newline at end of file
diff --git a/assets/icons/kids/cross-colorize.svg b/assets/icons/kids/cross-colorize.svg
new file mode 100644
index 0000000000..2fdc6b610d
--- /dev/null
+++ b/assets/icons/kids/cross-colorize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="#fc4f4f"/><path fill="#d64343" d="M11.794 7.829a.75.75 0 1 1 1.06 1.06l-1.47 1.47 1.47 1.47a.75.75 0 1 1-1.06 1.06l-1.47-1.47-1.47 1.47a.75.75 0 1 1-1.06-1.06l1.47-1.47-1.47-1.47a.75.75 0 1 1 1.06-1.06l1.47 1.47z"/><path fill="#fff" d="M11.47 7.47a.75.75 0 1 1 1.06 1.06L11.06 10l1.47 1.47a.75.75 0 1 1-1.06 1.06L10 11.06l-1.47 1.47a.75.75 0 1 1-1.06-1.06L8.94 10 7.47 8.53a.75.75 0 1 1 1.06-1.06L10 8.94z"/></svg>
\ No newline at end of file
diff --git a/assets/icons/kids/history.svg b/assets/icons/kids/history.svg
new file mode 100644
index 0000000000..3657b739d4
--- /dev/null
+++ b/assets/icons/kids/history.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><path stroke="#8361ff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.14 10a7.5 7.5 0 1 0 7.5-7.5 8.13 8.13 0 0 0-5.616 2.283L3.14 6.667"/><path fill="#8361ff" d="m1.86 7.879.213-4.196 3.974 3.864z"/><path stroke="#7450f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.64 5.833V10l3.334 1.666"/></svg>
\ No newline at end of file
diff --git a/assets/icons/kids/info-colorize.svg b/assets/icons/kids/info-colorize.svg
new file mode 100644
index 0000000000..75c6e88e0a
--- /dev/null
+++ b/assets/icons/kids/info-colorize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="#ffc107"/><path fill="#fa9d03" d="M9.566 13.75V10a.75.75 0 1 1 1.5 0v3.75a.75.75 0 0 1-1.5 0m0-6.655v-.01a.75.75 0 1 1 1.5 0v.01a.75.75 0 0 1-1.5 0"/><path fill="#fff" d="M9.25 13.664v-3.75a.75.75 0 0 1 1.5 0v3.75a.75.75 0 0 1-1.5 0m0-6.655V7a.75.75 0 0 1 1.5 0v.009a.75.75 0 0 1-1.5 0"/></svg>
\ No newline at end of file
diff --git a/assets/src/js/frontend/learning-area/sidebar.ts b/assets/src/js/frontend/learning-area/sidebar.ts
index 78a5b54d6f..3ee3e54234 100644
--- a/assets/src/js/frontend/learning-area/sidebar.ts
+++ b/assets/src/js/frontend/learning-area/sidebar.ts
@@ -38,6 +38,7 @@ export const sidebarComponent = ({
     pagesHeight: 0,
     resizing: false,
     collapsed: isCollapsed,
+    sidebarOpen: false,
     courseId: courseId,
     resetModalId: resetModalId,
     resetProgressMutation: null as MutationState<ResetProgressResponse, ResetProgressPayload> | null,
@@ -70,6 +71,14 @@ export const sidebarComponent = ({
       );
     },
 
+    toggleSidebar() {
+      this.sidebarOpen = !this.sidebarOpen;
+    },
+
+    closeSidebar() {
+      this.sidebarOpen = false;
+    },
+
     startResizing(e: MouseEvent) {
       this.resizing = true;
       const startY = e.clientY;
diff --git a/assets/src/js/v3/shared/icons/types.ts b/assets/src/js/v3/shared/icons/types.ts
index a54bdbca3c..a3fdc1572e 100644
--- a/assets/src/js/v3/shared/icons/types.ts
+++ b/assets/src/js/v3/shared/icons/types.ts
@@ -115,6 +115,7 @@ export const icons = [
   'cross2',
   'crossCircle',
   'crossCircleLine',
+  'crossColorize',
   'crown',
   'crownOutlined',
   'crownRounded',
@@ -212,6 +213,7 @@ export const icons = [
   'inactive',
   'info',
   'info2',
+  'infoColorize',
   'infoFill',
   'infoOctagon',
   'instructor',
diff --git a/assets/src/scss/frontend/components/_quiz-attempts.scss b/assets/src/scss/frontend/components/_quiz-attempts.scss
index 5c619cba56..88f4d44322 100644
--- a/assets/src/scss/frontend/components/_quiz-attempts.scss
+++ b/assets/src/scss/frontend/components/_quiz-attempts.scss
@@ -4,6 +4,16 @@
 @use '@Core/scss/tokens' as *;
 @use '@Core/scss/mixins' as *;
 
+.tutor-my-quiz-attempts-wrapper .tutor-quiz-attempts {
+  border-radius: $tutor-radius-2xl;
+
+  @include tutor-breakpoint-down(sm) {
+    border: 1px solid $tutor-border-idle;
+    overflow: hidden;
+    margin-top: $tutor-spacing-4;
+  }
+}
+
 .tutor-quiz-attempts-mobile-heading {
   @include tutor-breakpoint-up(sm) {
     display: none;
@@ -277,7 +287,7 @@
         }
 
         &:hover {
-          .tutor-quiz-item-info-title{
+          .tutor-quiz-item-info-title {
             color: $tutor-brand-700;
           }
         }
diff --git a/assets/src/scss/frontend/dashboard/_billing.scss b/assets/src/scss/frontend/dashboard/_billing.scss
index c1f6a0d687..9640f0c86a 100644
--- a/assets/src/scss/frontend/dashboard/_billing.scss
+++ b/assets/src/scss/frontend/dashboard/_billing.scss
@@ -2,25 +2,9 @@
 @use '@Core/scss/mixins' as *;
 
 .tutor-billing {
-  &-header {
-    background-color: $tutor-surface-base;
-    border-bottom: 1px solid $tutor-border-idle;
-    padding-block: $tutor-spacing-5;
-
-    @include tutor-breakpoint-down(sm) {
-      border-bottom: none;
-    }
-  }
-
   &-body {
     @include tutor-card-base;
     @include tutor-card-radius(lg);
-    @include tutor-flex(column, flex-start, center);
-    margin-top: $tutor-spacing-9;
-
-    .tutor-tabs-horizontal {
-      width: 100%;
-    }
 
     @include tutor-breakpoint-down(sm) {
       background-color: transparent;
@@ -31,10 +15,23 @@
   }
 
   &-tabs {
-    padding: $tutor-spacing-6;
+    padding: $tutor-spacing-5 $tutor-spacing-6;
+    border-bottom: 1px solid $tutor-border-idle;
+    width: 100%;
+
+    @include tutor-breakpoint-down(sm) {
+      margin-bottom: $tutor-spacing-4;
+    }
 
     &-content {
       width: 100%;
+
+      @include tutor-breakpoint-down(sm) {
+        border: 1px solid $tutor-border-idle;
+        background-color: $tutor-surface-l1;
+        border-radius: $tutor-radius-2xl;
+        margin-top: $tutor-spacing-4;
+      }
     }
 
     @include tutor-breakpoint-down(sm) {
@@ -56,7 +53,6 @@
     width: 100%;
 
     @include tutor-breakpoint-down(sm) {
-      margin-top: $tutor-spacing-4;
       border: 1px solid $tutor-border-idle;
       background-color: $tutor-surface-l1;
       border-radius: $tutor-radius-2xl;
@@ -98,7 +94,9 @@
 
     &-left {
       @include tutor-flex(column, flex-start, center);
+      flex: 1 1 0;
       gap: $tutor-spacing-3;
+      min-width: 0;
 
       .tutor-section-separator-vertical {
         background-color: $tutor-surface-l2-hover;
@@ -108,13 +106,17 @@
 
     &-right {
       @include tutor-flex(column, flex-end, center);
+      flex-shrink: 0;
       gap: $tutor-spacing-2;
-      text-align: right
+      text-align: right;
     }
 
     &-title {
+      @include tutor-flex(row, start, flex-start);
       @include tutor-typography('small', 'medium');
-      @include tutor-flex(row, start, center);
+      @include tutor-text-truncate();
+      min-width: 0;
+      width: 100%;
       gap: $tutor-spacing-2;
 
       ul {
@@ -133,6 +135,11 @@
 
       @include tutor-breakpoint-down(sm) {
         @include tutor-flex(column, flex-start, center);
+        overflow: visible;
+        text-overflow: unset;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        word-break: break-word;
       }
     }
 
@@ -152,15 +159,17 @@
     }
 
     &-payment-method {
-      @extend .tutor-billing-card-id;
-      @include tutor-typography('tiny-2');
-      gap: $tutor-spacing-2;
-      border-radius: $tutor-radius-sm;
-      color: $tutor-text-secondary;
-
       @include tutor-breakpoint-down(sm) {
-        @include tutor-typography('tiny');
-        padding: $tutor-spacing-2;
+        .tutor-badge {
+          font-size: 0;
+          line-height: 0;
+          gap: 0;
+          padding: $tutor-spacing-2;
+
+          img {
+            display: block;
+          }
+        }
       }
     }
 
@@ -200,4 +209,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/src/scss/frontend/dashboard/_certificates.scss b/assets/src/scss/frontend/dashboard/_certificates.scss
index fc3e01f09a..faad8a9f05 100644
--- a/assets/src/scss/frontend/dashboard/_certificates.scss
+++ b/assets/src/scss/frontend/dashboard/_certificates.scss
@@ -38,7 +38,6 @@
     gap: $tutor-spacing-1;
     flex: 1 1 0%;
     min-width: 0;
-
   }
 
   &-type {
@@ -52,7 +51,7 @@
   &-title {
     @include tutor-typography('medium', 'medium');
     @include tutor-text-truncate;
-    width: stretch;
+    width: 100%;
   }
 
   &-actions {
@@ -70,4 +69,4 @@
       background-color: $tutor-border-hover;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/src/scss/frontend/dashboard/_subscription-history.scss b/assets/src/scss/frontend/dashboard/_subscription-history.scss
index 14e39300b6..07d6eef4d7 100644
--- a/assets/src/scss/frontend/dashboard/_subscription-history.scss
+++ b/assets/src/scss/frontend/dashboard/_subscription-history.scss
@@ -26,7 +26,6 @@
 }
 
 .tutor-subscription {
-
   &-history {
     .tutor-billing-card {
       &:hover {
diff --git a/assets/src/scss/frontend/dashboard/layout/_account.scss b/assets/src/scss/frontend/dashboard/layout/_account.scss
index c83eb53150..09453eb7f3 100644
--- a/assets/src/scss/frontend/dashboard/layout/_account.scss
+++ b/assets/src/scss/frontend/dashboard/layout/_account.scss
@@ -14,6 +14,12 @@
       top: 32px;
     }
 
+    @include tutor-breakpoint-down(sm) {
+      body:has(#wpadminbar) & {
+        top: 0;
+      }
+    }
+
     &-title {
       @include tutor-typography(h4, semibold, primary, heading);
 
diff --git a/assets/src/scss/frontend/dashboard/layout/_header.scss b/assets/src/scss/frontend/dashboard/layout/_header.scss
index 27cdeb434d..3a26ec447b 100644
--- a/assets/src/scss/frontend/dashboard/layout/_header.scss
+++ b/assets/src/scss/frontend/dashboard/layout/_header.scss
@@ -217,7 +217,7 @@
       &-menu-wrapper {
         @include tutor-flex(column, stretch, space-between);
         background: $tutor-surface-base;
-        height: 100vh;
+        height: 100%;
       }
 
       &-menu {
diff --git a/assets/src/scss/frontend/dashboard/layout/_profile-pages.scss b/assets/src/scss/frontend/dashboard/layout/_profile-pages.scss
index 5d13b6325b..e1e435683f 100644
--- a/assets/src/scss/frontend/dashboard/layout/_profile-pages.scss
+++ b/assets/src/scss/frontend/dashboard/layout/_profile-pages.scss
@@ -19,7 +19,7 @@ body:has(#wpadminbar) {
   padding-block: $tutor-spacing-5;
   position: sticky;
   top: 0;
-  z-index: $tutor-z-positive;
+  z-index: $tutor-z-header;
   width: 100%;
 
   &-title {
diff --git a/assets/src/scss/frontend/dashboard/pages/_courses.scss b/assets/src/scss/frontend/dashboard/pages/_courses.scss
index 4349ecc189..9339d5d08b 100644
--- a/assets/src/scss/frontend/dashboard/pages/_courses.scss
+++ b/assets/src/scss/frontend/dashboard/pages/_courses.scss
@@ -29,7 +29,7 @@
 		.tutor-dashboard-courses-list {
 			border: none;
 			background: none;
-			margin-top: $tutor-spacing-5;
+			margin-top: $tutor-spacing-4;
 			border-radius: $tutor-radius-2xl;
 		}
 	}
diff --git a/assets/src/scss/frontend/kids/_dashboard.scss b/assets/src/scss/frontend/kids/_dashboard.scss
index c401271999..60946c468f 100644
--- a/assets/src/scss/frontend/kids/_dashboard.scss
+++ b/assets/src/scss/frontend/kids/_dashboard.scss
@@ -21,11 +21,26 @@
   .tutor-review-card,
   .tutor-dashboard-home-chart,
   .tutor-dashboard-home-card,
-  .tutor-dashboard-home-sort .tutor-popover-bottom {
+  .tutor-dashboard-home-sort .tutor-popover-bottom,
+  .tutor-subscription-payments-item:hover {
+    @include tutor-kids-shadow;
+  }
+
+  .tutor-billing-card:hover {
     @include tutor-kids-shadow;
+    &:not(:last-of-type) {
+      border-bottom: 1px solid transparent;
+    }
+  }
+
+  .tutor-billing-body {
+    @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm);
   }
 
-  .tutor-progress-card .tutor-progress-card-thumbnail {
+  .tutor-progress-card .tutor-progress-card-thumbnail,
+  .tutor-subscription-overview-card,
+  .tutor-subscription-payments-list,
+  .tutor-subscription-details-alert {
     border-radius: $tutor-radius-3xl;
   }
 
@@ -220,12 +235,17 @@
       gap: $tutor-spacing-5;
     }
 
-    .tutor-dashboard-page-card {
+    .tutor-dashboard-page-card,
+    .tutor-billing-body,
+    .tutor-dashboard-courses-wrapper .tutor-dashboard-courses-card,
+    .tutor-dashboard-lesson-notes .tutor-dashboard-page-card {
       border-radius: 0px;
       box-shadow: none;
     }
 
-    .tutor-dashboard-page-card-header {
+    .tutor-dashboard-page-card-header,
+    .tutor-billing-tabs,
+    .tutor-dashboard-courses-tab {
       margin-bottom: $tutor-spacing-5;
     }
 
@@ -234,12 +254,21 @@
       @include tutor-kids-shadow(false);
     }
 
-    .tutor-dashboard-page-card-body {
+    .tutor-dashboard-page-card-body,
+    .tutor-billing-tabs,
+    .tutor-billing-tabs-content,
+    .tutor-dashboard-courses-card .tutor-dashboard-courses-tab,
+    .tutor-my-quiz-attempts-wrapper .tutor-quiz-attempts {
       @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl);
     }
 
     .tutor-dashboard-page-card-header {
       border-radius: $tutor-radius-6xl;
     }
+
+    .tutor-dashboard-courses-card {
+      padding: 2px 2px 5px 2px;
+      margin: -2px -2px -5px -2px;
+    }
   }
 }
diff --git a/assets/src/scss/frontend/kids/_learning-area.scss b/assets/src/scss/frontend/kids/_learning-area.scss
index a907678029..7f766b8863 100644
--- a/assets/src/scss/frontend/kids/_learning-area.scss
+++ b/assets/src/scss/frontend/kids/_learning-area.scss
@@ -227,10 +227,15 @@
       padding: 0;
     }
 
+    .tutor-webinar-card {
+      overflow: hidden;
+    }
+
     .tutor-meeting,
     .tutor-quiz-intro,
     .tutor-lesson-content .tutor-lesson-content-tab,
-    .tutor-quiz-summary .tutor-quiz-result {
+    .tutor-quiz-summary .tutor-quiz-result,
+    .tutor-learning-area-resources .tutor-resources-wrapper {
       box-shadow: none;
     }
 
@@ -245,7 +250,9 @@
     .tutor-quiz-summary .tutor-quiz-summary-overview,
     .tutor-quiz-intro-params,
     .tutor-lesson-content .tutor-lesson-content-tab .tutor-tabs-nav,
-    .tutor-lesson-content .tutor-lesson-content-tab .tutor-tabs-content {
+    .tutor-lesson-content .tutor-lesson-content-tab .tutor-tabs-content,
+    .tutor-learning-area-resources .tutor-tabs-nav,
+    .tutor-learning-area-resources .tutor-tabs-content {
       @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-6xl, sm);
     }
 
diff --git a/assets/src/scss/frontend/learning-area/layout/_footer.scss b/assets/src/scss/frontend/learning-area/layout/_footer.scss
index 1eeb76438f..ff8bef110a 100644
--- a/assets/src/scss/frontend/learning-area/layout/_footer.scss
+++ b/assets/src/scss/frontend/learning-area/layout/_footer.scss
@@ -16,7 +16,7 @@
     background-color: $tutor-surface-l1;
     border-top: 1px solid $tutor-border-idle;
     gap: $tutor-spacing-3;
-    z-index: $tutor-z-sidebar;
+    z-index: $tutor-z-footer;
     justify-content: space-between;
 
     form {
@@ -25,6 +25,11 @@
       &:only-child {
         width: 100%;
       }
+
+      .tutor-mark-as-complete-button {
+        @include tutor-button-size(large);
+        width: 100%;
+      }
     }
 
     button:not(.tutor-mark-as-complete-button),
diff --git a/assets/src/scss/frontend/learning-area/layout/_sidebar.scss b/assets/src/scss/frontend/learning-area/layout/_sidebar.scss
index 9089c5f227..a56be705e0 100644
--- a/assets/src/scss/frontend/learning-area/layout/_sidebar.scss
+++ b/assets/src/scss/frontend/learning-area/layout/_sidebar.scss
@@ -8,7 +8,7 @@
   gap: $tutor-spacing-6;
   padding: $tutor-spacing-4;
   position: fixed;
-  height: calc(100vh - 62px);
+  height: calc(100dvh - 62px);
   top: 62px;
   width: 320px;
   inset-inline-start: 0;
@@ -16,7 +16,7 @@
   @include tutor-transition((opacity, transform));
 
   .tutor-has-admin-bar & {
-    height: calc(100vh - 92px);
+    height: calc(100dvh - 92px);
     top: 92px;
   }
 
@@ -32,16 +32,16 @@
     gap: $tutor-spacing-4;
     top: 0px;
     width: 100%;
-    height: 100vh;
+    height: 100dvh;
     overflow-y: auto;
     background-color: $tutor-surface-base;
-    z-index: $tutor-z-header;
+    z-index: $tutor-z-sidebar;
     transform: translateX(100%);
     @include tutor-transition(transform, 0.3s);
 
     .tutor-has-admin-bar & {
       top: 46px;
-      height: calc(100vh - 46px);
+      height: calc(100dvh - 46px);
     }
 
     &.is-open {
diff --git a/classes/Icon.php b/classes/Icon.php
index 3abeb94b37..25fe5b4b85 100644
--- a/classes/Icon.php
+++ b/classes/Icon.php
@@ -131,6 +131,7 @@ final class Icon {
 	const CROSS_2                    = 'cross-2';
 	const CROSS_CIRCLE               = 'cross-circle';
 	const CROSS_CIRCLE_LINE          = 'cross-circle-line';
+	const CROSS_COLORIZE             = 'cross-colorize';
 	const CROWN                      = 'crown';
 	const CROWN_OUTLINED             = 'crown-outlined';
 	const CROWN_ROUNDED              = 'crown-rounded';
@@ -228,6 +229,7 @@ final class Icon {
 	const INACTIVE                   = 'inactive';
 	const INFO                       = 'info';
 	const INFO_2                     = 'info-2';
+	const INFO_COLORIZE              = 'info-colorize';
 	const INFO_FILL                  = 'info-fill';
 	const INFO_OCTAGON               = 'info-octagon';
 	const INSTRUCTOR                 = 'instructor';
diff --git a/classes/Quiz.php b/classes/Quiz.php
index 808451e761..fbcca85533 100644
--- a/classes/Quiz.php
+++ b/classes/Quiz.php
@@ -2200,10 +2200,10 @@ public static function render_sidebar_nav( WP_Post $quiz, $can_access, $tutor_cu
 			$quiz_result = QuizModel::get_quiz_result( $quiz->ID );
 			if ( $attempt_ended && QuizModel::ATTEMPT_STARTED !== $last_attempt->attempt_status ) {
 				if ( QuizModel::RESULT_FAIL === $quiz_result ) {
-					$icon_name   = Icon::CROSS_CIRCLE_LINE;
+					$icon_name   = Icon::CROSS_COLORIZE;
 					$quiz_status = QuizModel::RESULT_FAIL;
 				} elseif ( QuizModel::RESULT_PENDING === $quiz_result ) {
-					$icon_name   = Icon::INFO_2;
+					$icon_name   = Icon::INFO_COLORIZE;
 					$quiz_status = QuizModel::RESULT_PENDING;
 				} elseif ( QuizModel::RESULT_PASS === $quiz_result ) {
 					$icon_name = Icon::COMPLETED_COLORIZE;
diff --git a/models/CourseModel.php b/models/CourseModel.php
index e73a845bea..ec12cf8d66 100644
--- a/models/CourseModel.php
+++ b/models/CourseModel.php
@@ -1588,8 +1588,8 @@ private function build_course_progress_item( \WP_Post $post, $user_id, $course_i
 					$quiz_status = QuizModel::get_quiz_result( $post->ID, $user_id );
 
 					$quiz_icon_map = array(
-						QuizModel::RESULT_FAIL    => array( Icon::CROSS_CIRCLE_LINE, 'tutor-icon-critical' ),
-						QuizModel::RESULT_PENDING => array( Icon::INFO_2, 'tutor-icon-warning-secondary' ),
+						QuizModel::RESULT_FAIL    => array( Icon::CROSS_COLORIZE, 'tutor-icon-critical' ),
+						QuizModel::RESULT_PENDING => array( Icon::INFO_COLORIZE, 'tutor-icon-warning-secondary' ),
 					);
 
 					if ( isset( $quiz_icon_map[ $quiz_status ] ) ) {
@@ -1621,8 +1621,8 @@ private function build_course_progress_item( \WP_Post $post, $user_id, $course_i
 				$icon_class = 'tutor-text-subdued';
 
 				$status_map = array(
-					'pending' => array( Icon::INFO_2, 'tutor-icon-warning-secondary' ),
-					'fail'    => array( Icon::CROSS_CIRCLE_LINE, 'tutor-icon-critical' ),
+					'pending' => array( Icon::INFO_COLORIZE, 'tutor-icon-warning-secondary' ),
+					'fail'    => array( Icon::CROSS_COLORIZE, 'tutor-icon-critical' ),
 				);
 
 				if ( isset( $status_map[ $status ] ) ) {
diff --git a/templates/dashboard/account/billing.php b/templates/dashboard/account/billing.php
index c0f4849646..8c6d3c54ca 100644
--- a/templates/dashboard/account/billing.php
+++ b/templates/dashboard/account/billing.php
@@ -48,13 +48,13 @@
 
 	<div class="tutor-account-container">
 		<div class="tutor-account-billing-wrapper tutor-flex tutor-flex-column tutor-gap-5 tutor-my-9 tutor-sm-my-6">
-			<div class="tutor-surface-l1 tutor-border tutor-rounded-2xl">
+			<div class="tutor-billing-body">
 				<?php if ( $show_tab_nav ) { ?>
-				<div class="tutor-px-6 tutor-py-5 tutor-border-b">
+				<div class="tutor-billing-tabs">
 					<?php Nav::make()->items( $page_nav_items )->size( Size::SMALL )->render(); ?>
 				</div>
 				<?php } ?>
-				<div class="tutor-sm-rounded-2xl tutor-sm-mt-4">
+				<div class="tutor-billing-tabs-content">
 					<?php
 					if ( file_exists( $tab_template ) ) {
 						require_once $tab_template;
diff --git a/templates/dashboard/account/billing/order-history.php b/templates/dashboard/account/billing/order-history.php
index 85ef4a9523..204f6a4b30 100644
--- a/templates/dashboard/account/billing/order-history.php
+++ b/templates/dashboard/account/billing/order-history.php
@@ -75,7 +75,7 @@
 	EmptyState::make()->title( 'No Orders Found!' )->render();
 else :
 	?>
-<div class="tutor-flex tutor-flex-column tutor-gap-4 tutor-order-history">
+<div class="tutor-flex tutor-flex-column tutor-order-history">
 	<?php
 	$default_card_template       = Ecommerce::MONETIZE_BY === $monetize_by ? tutor_get_template( 'dashboard.account.billing.native-order-history-card' ) : '';
 	$order_history_card_template = apply_filters( 'tutor_order_history_card_template', $default_card_template );
diff --git a/templates/dashboard/account/settings.php b/templates/dashboard/account/settings.php
index 4c2c7c2b37..2ac6ceee78 100644
--- a/templates/dashboard/account/settings.php
+++ b/templates/dashboard/account/settings.php
@@ -13,6 +13,7 @@
 
 use TUTOR\Icon;
 use TUTOR\User;
+use Tutor\Helpers\UrlHelper;
 
 $settings_tab_data = array(
 	'account'         => array(
@@ -68,19 +69,51 @@ function ( $tab ) {
 		}
 	)
 );
+
+$back_url = apply_filters( 'tutor_dashboard_back_url', UrlHelper::back( tutor_utils()->tutor_dashboard_url() ) );
 ?>
 
 <section x-data="tutorSettings()">
 	<div 
-		x-data='tutorTabs({
-			tabs: <?php echo wp_json_encode( $settings_tab_data ); ?>,
-			orientation: "vertical",
-			defaultTab: window.innerWidth >= 768 ? "account" : "none",
-			urlParams: {
-				enabled: true,
-				paramName: "tab",
-			}
-		})'
+		x-data='(() => {
+			const tabs = tutorTabs({
+				tabs: <?php echo wp_json_encode( $settings_tab_data ); ?>,
+				orientation: "vertical",
+				defaultTab: window.innerWidth >= 768 ? "account" : "none",
+				urlParams: {
+					enabled: true,
+					paramName: "tab",
+				}
+			});
+
+			return {
+				...tabs,
+				backUrl: <?php echo wp_json_encode( $back_url ); ?>,
+				selectTab(tabId) {
+					if (tabId === "none") {
+						this.activeTab = "none";
+
+						if (this.urlParamsConfig.enabled) {
+							const url = new URL(window.location.href);
+							url.searchParams.delete(this.urlParamsConfig.paramName);
+							window.history.replaceState({}, "", url.toString());
+						}
+
+						return;
+					}
+
+					return tabs.selectTab.call(this, tabId);
+				},
+				handleClose() {
+					if (window.innerWidth < 768 && this.activeTab !== "none") {
+						this.selectTab("none");
+						return;
+					}
+
+					window.location.href = this.backUrl;
+				},
+			};
+		})()'
 		class="tutor-profile-settings-section"
 	>
 		<?php tutor_load_template( 'dashboard.account.settings.header' ); ?>
diff --git a/templates/dashboard/account/settings/header.php b/templates/dashboard/account/settings/header.php
index c1d1425783..22c56689ed 100644
--- a/templates/dashboard/account/settings/header.php
+++ b/templates/dashboard/account/settings/header.php
@@ -89,18 +89,16 @@ class="tutor-profile-header-close tutor-md-hidden"
 				Button::make()
 					->label( __( 'Close', 'tutor' ) )
 					->variant( Variant::GHOST )
-					->tag( 'a' )
 					->icon( Icon::CROSS, 'left', 20, 20 )
 					->icon_only()
 					->size( Size::X_SMALL )
 					->attr( 'type', 'button' )
-					->attr( 'href', esc_url( $back_url ) )
+					->attr( '@click', 'handleClose()' )
 					->render();
 				?>
 			</div>
 			<div 
 				class="tutor-profile-header-close tutor-hidden tutor-md-flex"
-				@click="activeTab = 'none'"
 				x-show="activeTab === 'none' || !isDirty[`tutor-${activeTab}-form`]"
 			>
 				<?php
@@ -111,7 +109,7 @@ class="tutor-profile-header-close tutor-hidden tutor-md-flex"
 					->icon_only()
 					->size( Size::X_SMALL )
 					->attr( 'type', 'button' )
-					->attr( '@click', 'activeTab = "none"' )
+					->attr( '@click', 'handleClose()' )
 					->render();
 				?>
 			</div>
diff --git a/templates/learning-area/components/header.php b/templates/learning-area/components/header.php
index 11d61e8a9c..3e8b6bbee9 100644
--- a/templates/learning-area/components/header.php
+++ b/templates/learning-area/components/header.php
@@ -20,12 +20,17 @@
 global $tutor_course_id,
 $tutor_course,
 $current_user_id,
+$tutor_current_post,
 $tutor_course_progress,
 $tutor_can_complete_course,
 $tutor_can_retake_course,
 $course_complete_modal_id,
 $course_retake_modal_id;
+
+$course_title  = $tutor_course->post_title;
+$content_title = $tutor_current_post->post_title ?? '';
 ?>
+
 <div class="tutor-learning-header">
 	<div class="tutor-learning-header-inner">
 		<div class="tutor-learning-header-content">
@@ -33,7 +38,12 @@
 				<?php SvgIcon::make()->name( Icon::LEFT )->size( 20 )->render(); ?>
 			</a>
 			<h5 class="tutor-learning-header-title tutor-my-none">
-				<?php echo esc_html( $tutor_course->post_title ); ?>
+				<span class="tutor-md-hidden">
+					<?php echo esc_html( $course_title ); ?>
+				</span>
+				<span class="tutor-hidden tutor-md-inline">
+					<?php echo esc_html( $content_title ? $content_title : $course_title ); ?>
+				</span>
 			</h5>
 
 			<div class="tutor-flex tutor-gap-2 tutor-items-center tutor-ml-auto tutor-pr-4 tutor-whitespace-nowrap tutor-md-hidden">
@@ -48,7 +58,7 @@
 				?>
 			</div>
 		</div>
-		<button class="tutor-learning-header-toggle-mobile" @click.stop="sidebarOpen = !sidebarOpen">
+		<button class="tutor-learning-header-toggle-mobile" @click.stop="$dispatch('toggle-sidebar')">
 			<?php SvgIcon::make()->name( Icon::MENU )->size( 20 )->render(); ?>
 		</button>
 	</div>
diff --git a/templates/learning-area/components/sidebar.php b/templates/learning-area/components/sidebar.php
index 4be53f4bfa..fe26a2625a 100644
--- a/templates/learning-area/components/sidebar.php
+++ b/templates/learning-area/components/sidebar.php
@@ -54,14 +54,16 @@
 <div 
 	class="tutor-learning-sidebar" 
 	x-data="tutorLearningSidebar({ isCollapsed: <?php echo empty( $active_menu ) ? 'true' : 'false'; ?>, courseId: <?php echo (int) $tutor_course->ID; ?>, resetModalId: '<?php echo esc_attr( $reset_modal_id ); ?>' })"
+	x-trap.noscroll="sidebarOpen"
 	:class="{ 'is-open': sidebarOpen }" 
-	@click.outside="sidebarOpen = false"
+	@click.outside="closeSidebar()"
+	@toggle-sidebar.window="toggleSidebar()"
 >
 	<div class="tutor-hidden tutor-lg-flex tutor-items-center tutor-px-4">
 		<h5 class="tutor-learning-header-title tutor-my-none">
 			<?php echo esc_html( $tutor_course->post_title ); ?>
 		</h5>
-		<button class="tutor-learning-header-toggle-mobile" @click.stop="sidebarOpen = !sidebarOpen">
+		<button class="tutor-learning-header-toggle-mobile" @click.stop="toggleSidebar()">
 			<?php SvgIcon::make()->name( Icon::CROSS_2 )->size( 20 )->render(); ?>
 		</button>
 	</div>
@@ -71,7 +73,7 @@ class="tutor-learning-sidebar"
 				<div class="tutor-learning-progress-text tutor-py-2">
 					<?php
 					// translators: %s: course completed percentage.
-					echo sprintf( esc_html__( '%s Completed', 'tutor' ), '<span>' . esc_html( $tutor_course_progress ) . '%</span>' );
+					printf( esc_html__( '%s Completed', 'tutor' ), '<span>' . esc_html( $tutor_course_progress ) . '%</span>' );
 					?>
 				</div>
 				<div class="tutor-flex">
diff --git a/templates/learning-area/subpages/announcements.php b/templates/learning-area/subpages/announcements.php
index eb54a3e51c..ddd0b4bef1 100644
--- a/templates/learning-area/subpages/announcements.php
+++ b/templates/learning-area/subpages/announcements.php
@@ -57,7 +57,7 @@
 						<div class="tutor-p2 tutor-mb-7 tutor-whitespace-pre-line">
 							<?php echo wp_kses_post( $announcement->post_content ); ?>
 						</div>
-						<div class="tutor-flex tutor-items-center tutor-justify-between">
+						<div class="tutor-flex tutor-items-center tutor-justify-between tutor-gap-3">
 							<div class="tutor-flex tutor-items-center tutor-gap-3">
 								<?php
 								$author_id   = (int) $announcement->post_author;
@@ -66,10 +66,10 @@
 								<?php Avatar::make()->user( $author_id )->size( Size::SIZE_24 )->render(); ?>
 								<div class="tutor-small tutor-flex tutor-items-center tutor-gap-2">
 									<span class="tutor-text-subdued"><?php esc_html_e( 'By:', 'tutor' ); ?></span>
-									<span class="tutor-author-name"><?php echo esc_html( $author_name ); ?></span>
+									<span class="tutor-author-name tutor-line-clamp-1"><?php echo esc_html( $author_name ); ?></span>
 								</div>
 							</div>
-							<div class="tutor-tiny tutor-text-secondary tutor-flex tutor-items-center tutor-gap-3">
+							<div class="tutor-tiny tutor-text-secondary tutor-flex tutor-items-center tutor-gap-3 tutor-flex-shrink-0">
 								<?php SvgIcon::make()->name( Icon::ANNOUNCEMENT )->render(); ?>
 								<?php echo esc_html( tutor_i18n_get_formated_date( $announcement->post_date ) ); ?>
 							</div>
diff --git a/templates/learning-area/subpages/course-info.php b/templates/learning-area/subpages/course-info.php
index f230228f10..4730255f63 100644
--- a/templates/learning-area/subpages/course-info.php
+++ b/templates/learning-area/subpages/course-info.php
@@ -131,7 +131,7 @@
 ob_start();
 if ( ! empty( $course_tags ) && is_array( $course_tags ) ) {
 	?>
-	<div class="tutor-flex tutor-items-start tutor-gap-3">
+	<div class="tutor-flex tutor-items-start tutor-flex-wrap tutor-gap-3">
 		<?php
 		foreach ( $course_tags as $key => $tags ) {
 			Badge::make()