diff --git a/assets/core/scss/mixins/_utilities.scss b/assets/core/scss/mixins/_utilities.scss
index af254767e9..4b261cc5be 100644
--- a/assets/core/scss/mixins/_utilities.scss
+++ b/assets/core/scss/mixins/_utilities.scss
@@ -62,7 +62,7 @@
 
   @if $color == 'brand' {
     $shadow: $tutor-ring-brand-shadow-xs;
-    $outline-color: #90a0f7;
+    $outline-color: $tutor-brand-450;
   }
 
   @if $color == 'error' {
diff --git a/assets/core/scss/tokens/_colors.scss b/assets/core/scss/tokens/_colors.scss
index b0bec1be0c..602d31f32f 100644
--- a/assets/core/scss/tokens/_colors.scss
+++ b/assets/core/scss/tokens/_colors.scss
@@ -10,6 +10,7 @@ $tutor-brand-100: var(--tutor-brand-100, #f6f8fe);
 $tutor-brand-200: var(--tutor-brand-200, #e4ebfc);
 $tutor-brand-300: var(--tutor-brand-300, #dbe4fa);
 $tutor-brand-400: var(--tutor-brand-400, #a4bcf4);
+$tutor-brand-450: var(--tutor-brand-450, #90A0F7);
 $tutor-brand-500: var(--tutor-brand-500, #4979e8);
 $tutor-brand-600: var(--tutor-brand-600, #3e64de);
 $tutor-brand-700: var(--tutor-brand-700, #2b49ca);
@@ -136,6 +137,7 @@ $tutor-brand-colors: (
   200: $tutor-brand-200,
   300: $tutor-brand-300,
   400: $tutor-brand-400,
+  450: $tutor-brand-450,
   500: $tutor-brand-500,
   600: $tutor-brand-600,
   700: $tutor-brand-700,
diff --git a/assets/core/scss/tokens/_shadows.scss b/assets/core/scss/tokens/_shadows.scss
index 6ab3dbe795..a2907fb3ef 100644
--- a/assets/core/scss/tokens/_shadows.scss
+++ b/assets/core/scss/tokens/_shadows.scss
@@ -1,3 +1,5 @@
+@use '../tokens/colors' as *;
+
 // ==========================================================================
 // Shadows
 // ==========================================================================
@@ -15,7 +17,7 @@ $tutor-shadow-3xl: 0px 32px 64px -12px #10182824;
 // Ring Shadows
 // ==========================================================================
 
-$tutor-ring-brand-shadow-xs: 0px 0px 0px 2px #90A0F7;
+$tutor-ring-brand-shadow-xs: 0px 0px 0px 2px #{$tutor-brand-450};
 $tutor-ring-brand-shadow-sm: 0px 0px 0px 4px #3E64DE3D, 0px 1px 2px 0px #1018280F, 0px 1px 3px 0px #1018281A;
 $tutor-ring-gray-shadow-md: 0px 0px 0px 4px #98A2B324, 0px 1px 2px 0px #1018280D;
 $tutor-ring-gray-shadow-sm: 0px 0px 0px 2px #98A2B324, 0px 1px 2px 0px #1018280F, 0px 1px 3px 0px #1018281A;
diff --git a/assets/src/js/frontend/learning-area/sidebar.ts b/assets/src/js/frontend/learning-area/sidebar.ts
index 9b64cf7088..f8b110c751 100644
--- a/assets/src/js/frontend/learning-area/sidebar.ts
+++ b/assets/src/js/frontend/learning-area/sidebar.ts
@@ -27,7 +27,7 @@ export const sidebarComponent = ({ courseId, resetModalId }: { courseId: number;
   const { endpoints } = window.TutorCore;
 
   return {
-    pagesHeight: 0,
+    pagesHeight: null as number | null,
     resizing: false,
     sidebarOpen: false,
     courseId: courseId,
@@ -89,7 +89,7 @@ export const sidebarComponent = ({ courseId, resetModalId }: { courseId: number;
     },
 
     togglePagesHeight() {
-      if (this.pagesHeight > 36) {
+      if ((this.pagesHeight || 0) > 36) {
         this.pagesHeight = 36;
       } else if (this.$refs.pagesList) {
         this.pagesHeight = this.$refs.pagesList.scrollHeight;
diff --git a/assets/src/scss/frontend/learning-area/layout/_sidebar.scss b/assets/src/scss/frontend/learning-area/layout/_sidebar.scss
index 80618c6afd..beced6d2ee 100644
--- a/assets/src/scss/frontend/learning-area/layout/_sidebar.scss
+++ b/assets/src/scss/frontend/learning-area/layout/_sidebar.scss
@@ -365,6 +365,12 @@
         width: 288px;
       }
 
+      &-nav,
+      .tutor-popover-body {
+        @include tutor-flex(column);
+        gap: $tutor-spacing-1;
+      }
+
       &-item {
         @include tutor-button-reset();
         @include tutor-typography(small);
diff --git a/classes/Assets.php b/classes/Assets.php
index 8653bc9360..20e07eaa12 100644
--- a/classes/Assets.php
+++ b/classes/Assets.php
@@ -626,6 +626,7 @@ private function generate_color_palette( $base_hex ) {
 			200 => array( -3, 1, 94.1 ),
 			300 => array( -3, -2, 92.2 ),
 			400 => array( -4, 0, 79.6 ),
+			450 => array( -2, -3, 76.7 ),
 			500 => array( -4, 5, 59.8 ),
 			600 => array( 0, 0, $base['l'] ),
 			700 => array( 3, -7, 48.0 ),
@@ -673,6 +674,7 @@ private function load_core_color_palette( $brand_color ) {
 			--tutor-brand-200: {$palette[200]};
 			--tutor-brand-300: {$palette[300]};
 			--tutor-brand-400: {$palette[400]};
+			--tutor-brand-450: {$palette[450]};
 			--tutor-brand-500: {$palette[500]};
 			--tutor-brand-600: {$palette[600]};
 			--tutor-brand-700: {$palette[700]};
diff --git a/classes/Options_V2.php b/classes/Options_V2.php
index 517bc1da15..1fe5ec7dfe 100644
--- a/classes/Options_V2.php
+++ b/classes/Options_V2.php
@@ -1309,7 +1309,7 @@ public function get_setting_fields() {
 								'label'       => __( 'Brand Color', 'tutor' ),
 								'desc'        => __( 'Customize the primary accent color used across your learning platform to match your brand identity.', 'tutor' ),
 								'class'       => 'color-picker-wrapper',
-								'default'     => tutor_utils()->get_brand_color(),
+								'default'     => tutor_utils()->get_default_brand_color(),
 							),
 						),
 					),
diff --git a/classes/Quiz.php b/classes/Quiz.php
index 120751b9db..37d1efefe3 100644
--- a/classes/Quiz.php
+++ b/classes/Quiz.php
@@ -2087,7 +2087,7 @@ public static function render_quiz_actions( $quiz_id ) {
 			<?php
 			ConfirmationModal::make()
 				->id( $retry_modal_id )
-				->title( __( 'Retake Quiz?', 'tutor' ) )
+				->title( __( 'Retry Quiz?', 'tutor' ) )
 				->icon( tutor_utils()->get_themed_svg( 'images/illustrations/quiz-retry.svg' ), 80, 80, ConfirmationModal::ICON_TYPE_HTML )
 				->message( __( 'Retrying this quiz will reset your current attempt. Your answers and score from this attempt will be lost.', 'tutor' ) )
 				->confirm_handler( 'retryMutation?.mutate({...payload?.data})' )
diff --git a/classes/Utils.php b/classes/Utils.php
index b0e1bb45ac..c3b45acae6 100644
--- a/classes/Utils.php
+++ b/classes/Utils.php
@@ -9296,6 +9296,18 @@ public function get_brand_color() {
 		return $legacy_brand_color ? $legacy_brand_color : tutor_utils()->get_option( 'brand_color', Options_V2::DEFAULT_BRAND_COLOR );
 	}
 
+	/**
+	 * Get default brand color
+	 * 
+	 * @since 4.0.0
+	 * 
+	 * @return string
+	 */
+	public function get_default_brand_color() {
+		$legacy_brand_color = tutor_utils()->get_option( 'tutor_primary_color' );
+		return $legacy_brand_color ? $legacy_brand_color : Options_V2::DEFAULT_BRAND_COLOR;
+	}
+
 	/**
 	 * Get course builder screen.
 	 *
diff --git a/templates/learning-area/components/sidebar.php b/templates/learning-area/components/sidebar.php
index db6395a9be..aaba43a69c 100644
--- a/templates/learning-area/components/sidebar.php
+++ b/templates/learning-area/components/sidebar.php
@@ -217,7 +217,7 @@ class="tutor-learning-nav-header"
 			<div class="tutor-sidebar-resizer" @mousedown="startResizing($event)"></div>
 			<div class="tutor-sidebar-restore-dropdown">
 				<button 
-					:class="{ 'is-minimized': pagesHeight <= 40 }" 
+					:class="{ 'is-minimized': pagesHeight && pagesHeight <= 40 }" 
 					@click="togglePagesHeight()"
 					:aria-expanded="pagesHeight > 40 ? 'true' : 'false'"
 					:aria-label="pagesHeight <= 40 ? '<?php echo esc_js( __( 'Expand panel', 'tutor' ) ); ?>' : '<?php echo esc_js( __( 'Collapse panel', 'tutor' ) ); ?>'"
@@ -226,7 +226,7 @@ class="tutor-learning-nav-header"
 				</button>
 			</div>
 		<?php endif; ?>
-		<div class="tutor-learning-pages" x-ref="pagesList" :class="{ 'is-resizing': resizing }" <?php echo ! empty( $active_menu ) ? ':style="{ height: pagesHeight + \'px\' }"' : ''; ?>>
+		<div class="tutor-learning-pages" x-ref="pagesList" :class="{ 'is-resizing': resizing }" <?php echo ! empty( $active_menu ) ? ':style="pagesHeight !== null ? { height: pagesHeight + \'px\' } : {}"' : ''; ?>>
 			<?php
 			ob_start();
 			foreach ( $menu_items as $key => $item ) {
@@ -279,7 +279,7 @@ class="tutor-learning-pages-item <?php echo esc_attr( $active_class ); ?>"
 				?>
 			</div>
 			<?php else : ?>
-			<div>
+			<div class="tutor-learning-pages-nav">
 				<?php echo $menu_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 			</div>
 			<?php endif; ?>