diff --git a/common/static/common/images/welcome/film-thumbnail-charge.webp b/common/static/common/images/welcome/film-thumbnail-charge.webp
new file mode 100644
index 00000000..39efe14b
Binary files /dev/null and b/common/static/common/images/welcome/film-thumbnail-charge.webp differ
diff --git a/common/static/common/images/welcome/film-thumbnail-gold.webp b/common/static/common/images/welcome/film-thumbnail-gold.webp
new file mode 100644
index 00000000..efae0cb0
Binary files /dev/null and b/common/static/common/images/welcome/film-thumbnail-gold.webp differ
diff --git a/common/static/common/images/welcome/film-thumbnail-sprite-fright.webp b/common/static/common/images/welcome/film-thumbnail-sprite-fright.webp
new file mode 100644
index 00000000..0c47d5e2
Binary files /dev/null and b/common/static/common/images/welcome/film-thumbnail-sprite-fright.webp differ
diff --git a/common/static/common/images/welcome/film-thumbnail-wing-it.webp b/common/static/common/images/welcome/film-thumbnail-wing-it.webp
new file mode 100644
index 00000000..3b37219b
Binary files /dev/null and b/common/static/common/images/welcome/film-thumbnail-wing-it.webp differ
diff --git a/common/templates/common/components/navbar-subnav.html b/common/templates/common/components/navbar-subnav.html
index d9481e44..f3e24818 100644
--- a/common/templates/common/components/navbar-subnav.html
+++ b/common/templates/common/components/navbar-subnav.html
@@ -9,29 +9,29 @@
       </div>
     </div>
     <div class="row">
-      <a class="col-6 d-flex pb-3" href="/training/geometry-nodes-from-scratch">
+      <a class="col-6 d-flex align-items-center pb-3" href="/training/geometry-nodes-from-scratch">
         <div class="me-3 nav-subnav-item-img">
           <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-geometry-nodes-orig.jpg' %}');"></div>
         </div>
-        <h6 class="fs-sm fw-normal lh-sm mb-0">Geometry Nodes from Scratch</h6>
+        <h6 class="fw-normal lh-xs mb-0">Geometry Nodes from Scratch</h6>
       </a>
-      <a class="col-6 d-flex pb-3" href="/training/procedural-shading">
+      <a class="col-6 d-flex align-items-center pb-3" href="/training/procedural-shading">
         <div class="me-3 nav-subnav-item-img">
           <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-procedural-shading-orig.jpg' %}');"></div>
         </div>
-        <h6 class="fs-sm fw-normal lh-sm mb-0">Procedural Shading: Fundamentals and Beyond</h6>
+        <h6 class="fw-normal lh-xs mb-0">Procedural Shading Fundamentals</h6>
       </a>
-      <a class="col-6 d-flex pb-3" href="/training/stylized-character-workflow">
+      <a class="col-6 d-flex align-items-center pb-3" href="/training/stylized-character-workflow">
         <div class="me-3 nav-subnav-item-img">
           <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-stylized-character-workflow-orig.jpg' %}' );"></div>
         </div>
-        <h6 class="fs-sm fw-normal lh-sm mb-0">Stylized Character Workflow</h6>
+        <h6 class="fw-normal lh-xs mb-0">Stylized Character Workflow</h6>
       </a>
-      <a class="col-6 d-flex pb-3" href="/training/animation-fundamentals">
+      <a class="col-6 d-flex align-items-center pb-3" href="/training/animation-fundamentals">
         <div class="me-3 nav-subnav-item-img">
           <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/training-thumbnail-animation-fundamentals-orig.jpg' %}');"></div>
         </div>
-        <h6 class="fs-sm fw-normal lh-sm mb-0">Animation Fundamentals</h6>
+        <h6 class="fw-normal lh-xs mb-0">Animation Fundamentals</h6>
       </a>
     </div>
     <hr>
@@ -74,3 +74,54 @@
     </div>
   </div>
 </div>
+
+
+<div class="d-md-block d-none fade js-nav-subnav-film nav-subnav position-absolute">
+  <div class="bg-filter-blur bg-noise box mt-2">
+    <div class="row">
+      <div class="col">
+        <div class="fs-xs letter-spacing lh-1 text-muted text-uppercase mb-3">
+          Film Highlights
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <a class="col-6 d-flex align-items-center pb-3" href="/films/gold/">
+        <div class="me-3 nav-subnav-item-img">
+          <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/film-thumbnail-gold.webp' %}');"></div>
+        </div>
+        <div>
+          <h6 class="fw-normal lh-xs mb-0">Gold</h6>
+          <small class="badge badge-sm badge-primary">In Production</small>
+        </div>
+      </a>
+      <a class="col-6 d-flex align-items-center pb-3" href="/films/wing-it/">
+        <div class="me-3 nav-subnav-item-img">
+          <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/film-thumbnail-wing-it.webp' %}');"></div>
+        </div>
+        <div>
+          <h6 class="fw-normal lh-xs mb-0">Wing It!</h6>
+          <small class="text-muted">2023</small>
+        </div>
+      </a>
+      <a class="col-6 d-flex align-items-center" href="/films/charge/">
+        <div class="me-3 nav-subnav-item-img">
+          <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/film-thumbnail-charge.webp' %}' );"></div>
+        </div>
+        <div>
+          <h6 class="fw-normal lh-xs mb-0">Charge</h6>
+          <small class="text-muted">2022</small>
+        </div>
+      </a>
+      <a class="col-6 d-flex align-items-center" href="/films/sprite-fright/">
+        <div class="me-3 nav-subnav-item-img">
+          <div class="bg-center bg-cover rounded" style="background-image: url('{% static 'common/images/welcome/film-thumbnail-sprite-fright.webp' %}');"></div>
+        </div>
+        <div>
+          <h6 class="fw-normal lh-xs mb-0">Sprite Fright</h6>
+          <small class="text-muted">2021</small>
+        </div>
+      </a>
+    </div>
+  </div>
+</div>
diff --git a/common/templates/common/components/navbar.html b/common/templates/common/components/navbar.html
index ad468ae4..34cb35d7 100644
--- a/common/templates/common/components/navbar.html
+++ b/common/templates/common/components/navbar.html
@@ -22,7 +22,7 @@
 
       <ul class="nav-global-nav-links nav-global-dropdown js-dropdown-menu" id="nav-global-nav-links">
         <li>
-          <a href="{% url 'film-list' %}" class="{% if '/films' in request.path %}is-active{% endif %}">Films</a>
+          <a href="{% url 'film-list' %}" data-subnav=".js-nav-subnav-film" class="js-nav-global-subnav-link {% if '/films' in request.path %}is-active{% endif %}">Films</a>
         </li>
         <li>
           <a href="{% url 'training-home' %}" data-subnav=".js-nav-subnav-training" class="js-nav-global-subnav-link {% if '/training' in request.path %}is-active{% endif %}">Training</a>