diff --git a/src/css/style.css b/src/css/style.css
index dc75ac8494..838c1de1f6 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1095,6 +1095,33 @@ h4:hover .header-anchor {
     .ff-features-key label {
         margin-left: 12px;
     }
+    /*
+        Certify hardware lists
+    */
+
+    .ff-certify-list {
+        @apply flex flex-col pb-6 gap-y-10 sm:gap-y-0;
+    }
+
+    .ff-certify-list > .ff-item {
+        @apply grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-flow-col md:px-10 sm:gap-x-6 sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)];
+    }
+
+    .ff-certify-list > .ff-item:first-of-type {
+        @apply sm:grid-rows-[36px,minmax(18px,1fr)];
+    }
+
+    .ff-line-container {
+        @apply grid items-stretch my-auto sm:my-0 sm:mx-auto;
+    }
+
+    .ff-line {
+        @apply sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500;
+    }
+
+    .ff-certify-list-icon {
+        @apply m-auto text-gray-500 w-[24px];
+    }
 
     /*
         Used for nicely formatting links
diff --git a/src/product/certify-hardware.njk b/src/product/certify-hardware.njk
index f2d3cbb5d6..7b1f20b3f9 100644
--- a/src/product/certify-hardware.njk
+++ b/src/product/certify-hardware.njk
@@ -14,34 +14,34 @@ layout: layouts/page.njk
 <div class="ff-bg-light w-full px-6 pt-10 pb-20 md:px-0 flex flex-col gap-10 md:gap-12">
     <div class="container max-w-screen-md m-auto flex flex-col gap-4">
         <h3 class="m-auto text-center w-full mb-6 max-w-xs sm:max-w-none">Technical Qualification in 3 Steps</h3>
-        <div class="flex flex-col pb-6 gap-y-10 sm:gap-y-0">
-            <div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[36px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto sm:hidden">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+        <div class="ff-certify-list">
+            <div class="ff-item">
+                <div class="ff-line-container sm:hidden">
+                    <div class="ff-line"></div> 
                 </div>  
-                <div class="m-auto text-gray-500 w-[24px] sm:pb-2">{% include "components/icons/book-open.svg" %}</div>
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+                <div class="ff-certify-list-icon sm:pb-2">{% include "components/icons/book-open.svg" %}</div>
+                <div class="ff-line-container">
+                    <div class="ff-line"></div> 
                 </div>                
                 <div class="sm:row-span-2 col-span-3 sm:col-auto pt-6 sm:pt-0">Explore the FlowFuse Device Agent <a href="https://github.com/FlowFuse/device-agent" target="_blank">Repository</a> and <a href="/../docs/device-agent/introduction/">Documentation</a>.</div>
             </div>
-            <div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+            <div class="ff-item">
+                <div class="ff-line-container">
+                    <div class="ff-line"></div> 
                 </div>  
-                <div class="m-auto text-gray-500 w-[24px]">{% include "components/icons/check-circle.svg" %}</div>
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+                <div class="ff-certify-list-icon">{% include "components/icons/check-circle.svg" %}</div>
+                <div class="ff-line-container">
+                    <div class="ff-line"></div> 
                 </div>                
                 <div class="sm:row-span-3 col-span-3 my-auto pt-6 sm:pt-0">Ensure that the Device Agent comes pre-installed on your device. Alternatively, it should be available from a store or marketplace as a "one-click" installer.</div>
             </div>
-            <div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+            <div class="ff-item">
+                <div class="ff-line-container">
+                    <div class="ff-line"></div> 
                 </div>  
-                <div class="m-auto text-gray-500 w-[24px]">{% include "components/icons/document-arrow-up.svg" %}</div>
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500 sm:hidden"></div> <!-- Línea vertical -->
+                <div class="ff-certify-list-icon">{% include "components/icons/document-arrow-up.svg" %}</div>
+                <div class="ff-line-container">
+                    <div class="ff-line sm:hidden"></div> 
                 </div>                
                 <div class="sm:row-span-3 col-span-3 my-auto pt-6 sm:pt-0">Users can easily upload their device configuration either through a custom user interface (e.g., file upload or input mask) or via the built-in Device Agent UI.</div>
             </div>
@@ -64,24 +64,24 @@ layout: layouts/page.njk
     </div>
     <div class="container max-w-screen-md m-auto flex flex-col gap-4">
         <h3 class="m-auto text-center w-full mb-6 max-w-xs sm:max-w-none">Marketing and Publications</h3>
-        <div class="flex flex-col pb-6 gap-y-10 sm:gap-y-0">
-            <div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[36px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto sm:hidden">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+        <div class="ff-certify-list">
+            <div class="ff-item">
+                <div class="ff-line-container sm:hidden">
+                    <div class="ff-line"></div> 
                 </div>  
-                <div class="m-auto text-gray-500 w-[24px] sm:pb-2">{% include "components/icons/chat-bubble-bottom-center-text.svg" %}</div>
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+                <div class="ff-certify-list-icon sm:pb-2">{% include "components/icons/chat-bubble-bottom-center-text.svg" %}</div>
+                <div class="ff-line-container">
+                    <div class="ff-line"></div> 
                 </div>                
                 <div class="sm:row-span-2 col-span-3 sm:col-auto pt-6 sm:pt-0">In a joint meeting, we will discuss marketing activities on a case-by-case basis.</div>
             </div>
-            <div class="grid grid-cols-[1fr,50px,1fr] sm:grid-cols-[24px,1fr] sm:grid-rows-[minmax(18px,1fr),60px,minmax(18px,1fr)] sm:grid-flow-col md:px-10 sm:gap-x-6">
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500"></div> <!-- Línea vertical -->
+            <div class="ff-item">
+                <div class="ff-line-container">
+                    <div class="ff-line"></div> 
                 </div>  
-                <div class="m-auto text-gray-500 w-[24px]">{% include "components/icons/check-badge.svg" %}</div>
-                <div class="grid items-stretch my-auto sm:my-0 sm:mx-auto">
-                    <div class="sm:w-px w-full h-px sm:h-full bg-gray-300 sm:bg-gray-500 sm:hidden"></div> <!-- Línea vertical -->
+                <div class="ff-certify-list-icon">{% include "components/icons/check-badge.svg" %}</div>
+                <div class="ff-line-container">
+                    <div class="ff-line sm:hidden"></div> 
                 </div>                
                 <div class="sm:row-span-3 col-span-3 my-auto pt-6 sm:pt-0">Upon successful technical qualification, you will be granted the right to use the "FlowFuse Certified" logo.</div>
             </div>