diff --git a/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue b/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
index 5d2c334d..83004cf4 100644
--- a/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
+++ b/client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue
@@ -14,7 +14,13 @@ defineEmits(["exit"]);
   <div>
     <div class="absolute bottom-0 top-0 w-full bg-white">
       <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
-      <div class="h-content overflow-y-auto">
+      <div
+        :class="{
+          'h-content': !courseSessionsStore.hasCourseSessionPreview,
+          'h-content-preview': courseSessionsStore.hasCourseSessionPreview,
+        }"
+        class="overflow-y-auto"
+      >
         <header
           class="relative flex h-12 w-full items-center justify-between bg-white px-4 lg:h-16 lg:px-8"
         >
@@ -34,12 +40,17 @@ defineEmits(["exit"]);
 </template>
 
 <style lang="scss" scoped>
-$nav-height: 86px;
+$nav-height: 86px; // navigation height
+$nav-height-preview: $nav-height + 64px; //navigation height + preview bar height
 
 .h-content {
   height: calc(100vh - $nav-height);
 }
 
+.h-content-preview {
+  height: calc(100vh - $nav-height-preview);
+}
+
 .nav {
   height: $nav-height;
 }