diff --git a/src/components/Product.js b/src/components/Product.js
index 9d01e9fdc..42db46568 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -5,7 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 function UTG() {
   return (
     <div className="rounded-lg">
-      <ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
+      <ul className="product-grid grid gap-3 lg:gap-5">
         <li className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
@@ -241,10 +241,9 @@ export const Products = () => {
         Products 🛠️
       </h2>
       <p className="text-l max-w-3xxl">
-        Keploy provides three key products that help you streamline your testing
-        workflow:
+        Keploy provides three key products that help you streamline your
+        testing workflow:
       </p>
-
       <div className="grid gap-4  sm:grid-cols-3 xl:gap-6">
         <UTG />
       </div>
diff --git a/src/css/custom.css b/src/css/custom.css
index b40fda1aa..ae6bc1624 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -556,6 +556,19 @@ td img {
   }
 }
 
+.product-grid {
+  grid-auto-columns: 100%; 
+  grid-auto-flow: row; 
+}
+
+@media screen and (min-width: 768px) {
+  .product-grid {
+    grid-auto-columns: 300px; 
+    grid-auto-flow: column; 
+  }
+}
+
+
 .docs-image-legend-wrapper {
   width: 100%;
   margin: 0;