diff --git a/common/static/common/styles/studio/_custom.sass b/common/static/common/styles/studio/_custom.sass
index 415af399..8219b9e9 100644
--- a/common/static/common/styles/studio/_custom.sass
+++ b/common/static/common/styles/studio/_custom.sass
@@ -655,10 +655,88 @@ button,
     filter: blur(var(--filter-blur-value))
     transform: scale(1.1)
 
+.training-group
+  --training-group-item-content-width: 100%
+  --training-group-item-nav-width: 100%
+
+  +media-xl
+    --training-group-item-content-width: 40.0rem
+    --training-group-item-nav-width: 30.0rem
+
+  +media-xxl
+    --training-group-item-content-width: 54.0rem
+    --training-group-item-nav-width: 40.0rem
+
+  .training-group-item
+    +padding(3, x)
+
+    &:last-child
+      +media-xl
+        padding-right: 0
+
+  .training-group-item-content
+    width: var(--training-group-item-content-width)
+
+    .box
+      background-color: var(--color-bg-tertiary)
+      +padding(3)
+
+      .comment-input-div
+        &.form-control
+          background-color: var(--color-bg-primary)
+
+      .replies
+        .comment
+          background-color: var(--color-bg-secondary)
+
+      .top-level-comment
+        background-color: var(--color-bg-primary)
+
+  .training-group-item-content-detail
+    width: 100%
+
+    .cards-item-title
+      font-size: var(--fs-h4)
+      line-height: var(--lh-base)
+
+    +media-lg
+      .training-group-item-content-detail-inner
+        max-width: 114.0rem
+
+    +media-xl
+      width: calc(100% - var(--training-group-item-nav-width))
+
+      .cards
+        --cards-items-per-row: 4
+
+    +media-xxl
+      .cards
+        --cards-items-per-row: 5
+
+    // TODO: revise training-group-item-nav display toggle on medium and small screens
+  .training-group-item-nav
+    +margin(3, bottom)
+    width: var(--training-group-item-nav-width)
+
+  .training-group-item-video
+    background-color: black
+    +margin(3, bottom)
+    padding: 0
+    width: 100%
+
+    +media-xl
+      align-items: center
+      display: flex
+      height: 100vh
+      justify-content: center
+      left: 0
+      margin-bottom: 0
+      position: sticky
+      top: 0
+      width: calc(100% - var(--training-group-item-content-width) - var(--training-group-item-nav-width))
+
 .training-header-img-helper
   align-items: center
-  display: flex
-  max-height: calc(var(--spacer) * 25)
   overflow: hidden
 
   img
diff --git a/common/static/common/styles/studio/_variables.sass b/common/static/common/styles/studio/_variables.sass
index e8671a25..77303540 100644
--- a/common/static/common/styles/studio/_variables.sass
+++ b/common/static/common/styles/studio/_variables.sass
@@ -1,5 +1,8 @@
 $container-max-widths: (sm: 100%, md: 100%, lg: 100%, xl: 1320px, xxl: 1600px)
 
+// Redeclare $grid-breakpoints 'xl' and 'xxl' with web-assets defaults to override obsolete Bootstrap breakpoints coming from flat, pre-compiled vendor files
+$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1320px, xxl: 1680px)
+
 $container-width: map-get($container-max-widths, 'xl')
 
 $font-path: "/static/assets/fonts"
diff --git a/common/static/common/styles/studio/_web-assets-overrides.sass b/common/static/common/styles/studio/_web-assets-overrides.sass
index d9276a42..47dc3b5c 100644
--- a/common/static/common/styles/studio/_web-assets-overrides.sass
+++ b/common/static/common/styles/studio/_web-assets-overrides.sass
@@ -168,6 +168,10 @@ textarea
 
 /* Grid. */
 // TODO: consider moving to web-assets
+.container-fluid
+  .row
+    +margin(0, x)
+
 .row
   width: 100%
 
diff --git a/training/templates/training/base_training.html b/training/templates/training/base_training.html
index f326b93a..dd3b18c9 100644
--- a/training/templates/training/base_training.html
+++ b/training/templates/training/base_training.html
@@ -7,28 +7,22 @@
 {% endblock %}
 
 {% block content %}
-  {% block training_header_image %}
-  {% endblock training_header_image %}
-
-  <div class="container pt-2 pt-md-3">
+  <div class="container-fluid pt-2 pt-md-3">
     <div class="d-md-none mb-3 pt-2 row">
       <div class="col-12">
         <button class="btn js-nav-drawer-btn-toggle"><i class="i-list"></i> Content</button>
       </div>
     </div>
-    <div class="row">
-      <div class="col-lg-3 col-md-4 mb-3 fade-xs js-nav-drawer-helper nav-drawer-helper">
+    <div class="row training-group">
+      <div class="training-group-item training-group-item-nav fade-xs js-nav-drawer-helper nav-drawer-helper">
         <nav class="nav-drawer-nested">
           <div class="nav-drawer-body">
-            {% block nested_nav_drawer_inner %}
-            {% endblock nested_nav_drawer_inner %}
+            {% block nested_nav_drawer_inner %}{% endblock nested_nav_drawer_inner %}
           </div>
         </nav>
       </div>
-      <div class="col col-lg-9 col-md-8">
-        {% block nexted_content %}
-        {% endblock nexted_content %}
-      </div>
+
+      {% block nexted_content %}{% endblock nexted_content %}
     </div>
   </div>
 {% endblock content %}
diff --git a/training/templates/training/chapter.html b/training/templates/training/chapter.html
index 91b61ed7..579490cc 100644
--- a/training/templates/training/chapter.html
+++ b/training/templates/training/chapter.html
@@ -19,64 +19,70 @@
 {% endblock %}
 
 {% block nexted_content %}
-  {% if chapter.thumbnail %}
-    <div class="row mb-3">
-      <div class="col">
-        {% if section.is_free or request.user|has_active_subscription %}
-          {% firstof chapter.picture_header chapter.thumbnail as header %}
-          {% include "common/components/helpers/image_set.html" with alt=chapter.name classes="img-fluid img-width-100 rounded" img_source=header xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
-        {% else %}
-          {% include 'common/components/content_locked.html' with background=training.picture_header %}
-        {% endif %}
-      </div>
+  <div class="training-group-item-content-detail">
+    <div class="training-group-item-content-detail-inner">
+      {% if chapter.thumbnail %}
+         <div class="row mb-3">
+           <div class="col">
+             {% if section.is_free or request.user|has_active_subscription %}
+               {% firstof chapter.picture_header chapter.thumbnail as header %}
+               {% include "common/components/helpers/image_set.html" with alt=chapter.name classes="img-fluid img-width-100 rounded" img_source=header xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
+             {% else %}
+               {% include 'common/components/content_locked.html' with background=training.picture_header %}
+             {% endif %}
+           </div>
+         </div>
+       {% endif %}
+
+       <div class="align-items-start row">
+         <div class="col-12 col-md mb-3">
+           <div class="d-md-block d-none">
+             <p class="small text-muted">{{ training.name }}</p>
+             <h2 class="mb-0">{{ chapter.name }}</h2>
+           </div>
+         </div>
+         <div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
+           <div class="button-toolbar-container">
+             <div class="button-toolbar">
+               {% if user.is_staff %}
+                 <a href="{{ chapter.admin_url }}" class="btn btn-admin">
+                   <i class="i-edit"></i>
+                   <span>Edit</span>
+                 </a>
+               {% endif %}
+
+               <button data-bs-toggle="dropdown" class="btn btn-link">
+                 <i class="i-more-vertical"></i>
+               </button>
+               <div class="dropdown-menu dropdown-menu-end">
+                 <a href="https://projects.blender.org/studio/blender-studio/issues/new" target="_blank" class="dropdown-item">
+                   <i class="i-flag"></i>
+                   <span>Report Problem</span>
+                 </a>
+               </div>
+             </div>
+           </div>
+         </div>
+       </div>
+
+       {% if chapter.description %}
+         <section class="mb-3 row">
+           <div class="col">
+             <div class="markdown-text">
+               {% with_shortcodes chapter.description|markdown %}
+             </div>
+           </div>
+         </section>
+       {% endif %}
     </div>
-  {% endif %}
-  <div class="mb-3 row ">
-    <div class="col">
-      <div class="align-items-start row">
-        <div class="col-12 col-md mb-3">
-          <div class="d-md-block d-none">
-            <p class="small text-muted">{{ training.name }}</p>
-            <h2 class="mb-0">{{ chapter.name }}</h2>
-          </div>
-        </div>
-        <div class="col-12 col-md-auto mb-2 mb-md-0 mt-0 mt-md-3">
-          <div class="button-toolbar-container">
-            <div class="button-toolbar">
-              {% if user.is_staff %}
-                <a href="{{ chapter.admin_url }}" class="btn btn-admin">
-                  <i class="i-edit"></i>
-                  <span>Edit</span>
-                </a>
-              {% endif %}
-
-              <button data-bs-toggle="dropdown" class="btn btn-link">
-                <i class="i-more-vertical"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-end">
-                <a href="https://projects.blender.org/studio/blender-studio/issues/new" target="_blank" class="dropdown-item">
-                  <i class="i-flag"></i>
-                  <span>Report Problem</span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {% if chapter.description %}
-        <section class="markdown-text mb-3">{% with_shortcodes chapter.description|markdown %}</section>
-      {% endif %}
-
-      <div class="row">
-        <div class="col-12">
-          <div class="cards card-layout-card-transparent files">
-            {% for section in chapter.sections.all %}
-              {% if section.is_published  %}
-                {% include "common/components/file_section.html" with section=section %}
-              {% endif %}
-            {% endfor %}
-          </div>
+    <div class="mb-3 row">
+      <div class="col-12">
+        <div class="cards card-layout-card-transparent files">
+          {% for section in chapter.sections.all %}
+            {% if section.is_published  %}
+              {% include "common/components/file_section.html" with section=section %}
+            {% endif %}
+          {% endfor %}
         </div>
       </div>
     </div>
diff --git a/training/templates/training/section.html b/training/templates/training/section.html
index 76c80440..e0e66805 100644
--- a/training/templates/training/section.html
+++ b/training/templates/training/section.html
@@ -19,45 +19,35 @@
 {% endblock %}
 
 {% block nexted_content %}
-  <div class="row mb-3">
+  <div class="training-group-item training-group-item-video">
     {% if section.preview_youtube_link %}
-      <div class="col">
-        <div class="overflow-hidden rounded">
-          {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True  %}
-        </div>
-      </div>
+      {% include 'common/components/video_player_embed.html' with url=section.preview_youtube_link rounded=True  %}
     {% elif video %}
-      <div class="col">
-        <div class="overflow-hidden rounded">
-          {% if section.is_free or request.user|has_active_subscription %}
-            {% if user.is_anonymous %}
-              {% include 'common/components/video_player.html' with url=video.source.url poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
-            {% else %}
-              {% include 'common/components/video_player.html' with url=video.source.url progress_url=video.progress_url start_position=video.start_position poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
-            {% endif %}
-          {% else %}
-            {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
-          {% endif %}
-        </div>
-      </div>
+      {% if section.is_free or request.user|has_active_subscription %}
+        {% if user.is_anonymous %}
+          {% include 'common/components/video_player.html' with url=video.source.url poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
+        {% else %}
+          {% include 'common/components/video_player.html' with url=video.source.url progress_url=video.progress_url start_position=video.start_position poster=section.thumbnail_m_url tracks=section.static_asset.video.tracks.all loop=section.static_asset.video.loop %}
+        {% endif %}
+      {% else %}
+        {% include 'common/components/content_locked.html' with background=section.thumbnail_m_url %}
+      {% endif %}
     {% else %}
-      <div class="col">
-        <div class="overflow-hidden rounded">
-          {% if section.is_free or request.user|has_active_subscription %}
-            {% if section.thumbnail %}
-              {% include "common/components/helpers/image_set.html" with alt=section.name classes="img-fluid img-width-100 rounded" img_source=section.thumbnail xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
-            {% endif %}
-          {% else %}
-            {% include 'common/components/content_locked.html' with background=training.picture_header %}
-          {% endif %}
+      {% if section.is_free or request.user|has_active_subscription %}
+        {% if section.thumbnail %}
+          {% include "common/components/helpers/image_set.html" with alt=section.name classes="img-fluid img-width-100" img_source=section.thumbnail xsmall_width="600" small_width="800" medium_width="1000" large_width="1200" xlarge_width="1920" %}
+        {% endif %}
+      {% else %}
+        <div class="col">
+          {% include 'common/components/content_locked.html' with background=training.picture_header %}
         </div>
-      </div>
+      {% endif %}
     {% endif %}
   </div>
-  <div class="row">
-    <div class="col">
-      <div class="align-items-start row">
-        <div class="col-12 col-md mb-2 mb-md-3">
+  <div class="training-group-item training-group-item-content">
+    <div class="box">
+      <div class="row">
+        <div class="col mb-2 mb-md-3">
           <div class="d-md-block d-none">
             <p class="small text-muted">{{ chapter.name }}</p>
             <h2>{{ section.name }}</h2>
@@ -92,7 +82,7 @@
       <section class="mb-3 markdown-text">
         {% with_shortcodes section.text|markdown_unsafe %}
       </section>
-      <section class="mb-3">
+      <section>
         {% include 'comments/components/comment_section.html' %}
       </section>
     </div>
diff --git a/training/templates/training/training.html b/training/templates/training/training.html
index b2ecebb6..40a1d47c 100644
--- a/training/templates/training/training.html
+++ b/training/templates/training/training.html
@@ -11,24 +11,23 @@
   {% javascript 'training' %}
 {% endblock scripts %}
 
-{% block training_header_image %}
-  {% if training.picture_header_url %}
-  <div class="container">
-    <div class="mt-3 row">
-      <div class="col training-header-img-helper">
-        <img src="{{ training.picture_header_url }}" class="img-fluid img-width-100 rounded" alt="{{ training.name }}">
-      </div>
-    </div>
-  </div>
-  {% endif %}
-{% endblock training_header_image %}
-
 {% block nexted_content %}
-  <section>
-    <div class="row">
-      <div class="col">
-        <div class="row align-items-start mb-2">
-          <div class="col-12 col-md">
+
+<section class="training-group-item training-group-item-content-detail">
+  <div class="row training-group-item-content-detail-inner">
+    <div class="col">
+      {% if training.picture_header_url %}
+        <div class="mb-3 row">
+          <div class="col">
+            <div class="training-header-img-helper">
+              <img src="{{ training.picture_header_url }}" class="img-fluid img-width-100 rounded" alt="{{ training.name }}">
+            </div>
+          </div>
+        </div>
+      {% endif %}
+
+      <div class="align-items-start mb-3 row">
+        <div class="col-12 col-md">
             <h1 class="mb-0">{{ training.name }}</h1>
           </div>
           <div class="col-12 col-md-auto">
@@ -75,7 +74,13 @@
           </div>
         {% endif %}
 
-        <section class="markdown-text mb-3">{% with_shortcodes training.summary_rendered %}</section>
+        <section class="row">
+          <div class="col-12">
+            <div class="markdown-text">
+              {% with_shortcodes training.summary_rendered %}
+            </div>
+          </div>
+        </section>
       </div>
     </div>
   </section>