diff --git a/templates/ai/mlops-workshop.html b/templates/ai/mlops-workshop.html
index 23fd40df0f..672fe40093 100644
--- a/templates/ai/mlops-workshop.html
+++ b/templates/ai/mlops-workshop.html
@@ -55,16 +55,15 @@
       <hr class="p-rule" />
       <h2 class="p-section--shallow">Why join an MLOps workshop?</h2>
     </div>
-    <div class="row--25-75 is-split-on-medium">
-      <div class="col"></div>
-      <div class="col">
+    <div class="row">
+      <div class="col-start-large-4 col-9">
         <hr class="p-rule--muted" />
         <div class="p-section--shallow">
           <div class="row">
-            <div class="col-3">
+            <div class="col-3 col-medium-3">
               <h3 class="p-heading--5">Define your MLOps architecture</h3>
             </div>
-            <div class="col-6">
+            <div class="col-6 col-medium-3">
               <div class="p-section--shallow">
                 <div class="p-image-container--16-9 is-highlighted">
                   {{ image(url="https://assets.ubuntu.com/v1/bb64e462-mlops-architecture.png",
@@ -72,6 +71,7 @@ <h3 class="p-heading--5">Define your MLOps architecture</h3>
                                     width="1800",
                                     height="1013",
                                     hi_def=True,
+                                    attrs={"class": "p-image-container__image"},
                                     loading="lazy") | safe
                   }}
                 </div>
@@ -96,10 +96,10 @@ <h3 class="p-heading--5">Define your MLOps architecture</h3>
         <hr class="p-rule--muted" />
         <div class="p-section--shallow">
           <div class="row">
-            <div class="col-3">
+            <div class="col-3 col-medium-3">
               <h3 class="p-heading--5">Learn from experts in the industry</h3>
             </div>
-            <div class="col-6">
+            <div class="col-6 col-medium-3">
               <div class="p-section--shallow">
                 <div class="p-image-container--16-9 is-highlighted">
                   {{ image(url="https://assets.ubuntu.com/v1/1484f03e-experts-in-industry.png",
@@ -107,6 +107,7 @@ <h3 class="p-heading--5">Learn from experts in the industry</h3>
                                     width="1800",
                                     height="1013",
                                     hi_def=True,
+                                    attrs={"class": "p-image-container__image"},
                                     loading="lazy") | safe
                   }}
                 </div>
@@ -129,14 +130,14 @@ <h3 class="p-heading--5">Learn from experts in the industry</h3>
         <hr class="p-rule--muted" />
         <div class="p-section--shallow">
           <div class="row">
-            <div class="col-3">
+            <div class="col-3 col-medium-3">
               <h3 class="p-heading--5">
                 Make the best use
                 <br class="u-hide--small u-hide--medium" />
                 of existing infrastructure
               </h3>
             </div>
-            <div class="col-6">
+            <div class="col-6 col-medium-3">
               <div class="p-section--shallow">
                 <div class="p-image-container--16-9 is-highlighted">
                   {{ image(url="https://assets.ubuntu.com/v1/eb833a2e-existing-infrastructure.png",
@@ -144,6 +145,7 @@ <h3 class="p-heading--5">
                                     width="1800",
                                     height="1013",
                                     hi_def=True,
+                                    attrs={"class": "p-image-container__image"},
                                     loading="lazy") | safe
                   }}
                 </div>
@@ -178,12 +180,13 @@ <h2>MLOps workshop structure</h2>
       <div class="p-equal-height-row">
         <div class="p-equal-height-row__col">
           <div class="p-equal-height-row__item">
-            <div class="p-image-container is-highlighted">
+            <div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large is-highlighted">
               {{ image(url="https://assets.ubuntu.com/v1/dedd920a-os-migrations.png",
                             alt="",
                             width="852",
                             height="1279",
                             hi_def=True,
+                            attrs={"class": "p-image-container__image"},
                             loading="lazy") | safe
               }}
             </div>
@@ -196,11 +199,12 @@ <h2>MLOps workshop structure</h2>
         </div>
         <div class="p-equal-height-row__col">
           <div class="p-equal-height-row__item">
-            <div class="p-image-container is-highlighted">
+            <div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large is-highlighted">
               {{ image(url="https://assets.ubuntu.com/v1/267f89c1-mlops-architecture-design.png",
                             alt="",
                             width="852",
                             height="1279",
+                            attrs={"class": "p-image-container__image"},
                             hi_def=True,
                             loading="lazy") | safe
               }}
@@ -214,11 +218,12 @@ <h2>MLOps workshop structure</h2>
         </div>
         <div class="p-equal-height-row__col">
           <div class="p-equal-height-row__item">
-            <div class="p-image-container is-highlighted">
+            <div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large is-highlighted">
               {{ image(url="https://assets.ubuntu.com/v1/22aade34-resource-optimization.png",
                             alt="",
                             width="852",
                             height="1279",
+                            attrs={"class": "p-image-container__image"},
                             hi_def=True,
                             loading="lazy") | safe
               }}
@@ -232,11 +237,12 @@ <h2>MLOps workshop structure</h2>
         </div>
         <div class="p-equal-height-row__col">
           <div class="p-equal-height-row__item">
-            <div class="p-image-container is-highlighted">
+            <div class="p-image-container--3-2-on-small p-image-container--square-on-medium p-image-container--2-3-on-large is-highlighted">
               {{ image(url="https://assets.ubuntu.com/v1/b294f8fb-edge-ai.png",
                             alt="",
                             width="852",
                             height="1279",
+                            attrs={"class": "p-image-container__image"},
                             hi_def=True,
                             loading="lazy") | safe
               }}