diff --git a/src/components/Product.js b/src/components/Product.js
index 424749fbe..86d72da10 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -4,18 +4,18 @@ 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">
-        <li className="mt-5 flex flex-col space-y-3 text-lg">
+    <div className="rounded-lg w-full">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
             to={useBaseUrl("/running-keploy/unit-test-generator/")}
           >
-            <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
+            <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 md:p-5 lg:p-6 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)] h-full">
               <div className="flex items-center space-x-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
+                  className="mb-4 h-8 w-8 md:h-10 md:w-10 lg:h-12 lg:w-12 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
                   viewBox="0 0 64 64"
                   width="13"
                   height="16"
@@ -25,13 +25,13 @@ function UTG() {
                     fill="#FF914D"
                   />
                 </svg>
-                <h2 className="mb-4 text-xl font-semibold">
+                <h2 className="mb-4 text-lg md:text-xl font-semibold">
                   Unit Testing Agent
                 </h2>
               </div>
               <ul>
                 <li>
-                  <p className="font">
+                  <p className="text-sm md:text-base leading-relaxed">
                     Generate reliable, validated tests as you code, ensuring
                     coverage and stability.
                   </p>
@@ -39,17 +39,17 @@ function UTG() {
               </ul>
             </div>
           </Link>
-        </li>
-        <li className="mt-5 flex flex-col space-y-3 text-lg">
+        </div>
+        <div className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
             to={useBaseUrl("keploy-explained/introduction")}
           >
-            <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
+            <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 md:p-5 lg:p-6 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)] h-full">
               <div className="flex items-center space-x-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
+                  className="mb-4 h-8 w-8 md:h-10 md:w-10 lg:h-12 lg:w-12 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
                   viewBox="0 0 100 100"
                   width="13"
                   height="16"
@@ -75,13 +75,13 @@ function UTG() {
                     d="M39.802 14.307l-.117 11.834c0 2.21-2.085 3.666-4.036 3.666-1.951 0-4.217-1.439-4.217-3.649l.037-12.58c0-1.307 1.607-2.451 2.801-2.451 1.194 0 2.345 1.149 2.345 2.456l.021 10.829c0 0-.083.667-1.005.645-.507-.012-1.145-.356-1.016-.906v-9.843h-.813l-.021 9.708c0 1.38.54 1.948 1.875 1.948s1.959-.714 1.959-2.094V13.665c0-2.271-1.36-3.5-3.436-3.5s-3.564 1.261-3.564 3.532l.032 12.11c0 3.04 2.123 4.906 4.968 4.906 2.845 0 5-1.71 5-4.75V14.307H39.802zM53.114 52.307h-23c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h23c.276 0 .5.224.5.5S53.391 52.307 53.114 52.307zM44.114 59.307h-14c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h14c.276 0 .5.224.5.5S44.391 59.307 44.114 59.307zM70.114 59.307h-24c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h24c.276 0 .5.224.5.5S70.391 59.307 70.114 59.307zM61.114 66.307h-11c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h11c.276 0 .5.224.5.5S61.391 66.307 61.114 66.307zM71.114 66.307h-8c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h8c.276 0 .5.224.5.5S71.391 66.307 71.114 66.307zM48.114 66.307h-18c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h18c.276 0 .5.224.5.5S48.391 66.307 48.114 66.307zM70.114 73.307h-13c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h13c.276 0 .5.224.5.5S70.391 73.307 70.114 73.307zM54.114 73.307h-24c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h24c.276 0 .5.224.5.5S54.391 73.307 54.114 73.307z"
                   />
                 </svg>
-                <h2 className="mb-4 text-xl font-semibold">
+                <h2 className="mb-4 text-lg md:text-xl font-semibold">
                   Integration Testing
                 </h2>
               </div>
               <ul>
                 <li>
-                  <p className="font">
+                  <p className="text-sm md:text-base leading-relaxed">
                     Records and replays API calls with mocks for reliable
                     integration testing and stability.
                   </p>
@@ -89,17 +89,17 @@ function UTG() {
               </ul>
             </div>
           </Link>
-        </li>
-        <li className="mt-5 flex flex-col space-y-3 text-lg">
+        </div>
+        <div className="mt-5 flex flex-col space-y-3 text-lg">
           <Link
             className="text-foreground-light flex-grow text-sm"
             to={useBaseUrl("running-keploy/api-test-generator")}
           >
-            <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-5 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)]">
+            <div className="rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 md:p-5 lg:p-6 shadow transition hover:shadow-lg hover:shadow-[color:var(--ifm-card-shadow-color)] h-full">
               <div className="flex items-center space-x-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="mb-4 h-10 w-10 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
+                  className="mb-4 h-8 w-8 md:h-10 md:w-10 lg:h-12 lg:w-12 rounded-lg bg-[color:var(--ifm-color)] p-2 text-[color:var(--ifm-background-color)]"
                   viewBox="0 0 64 64"
                   width="100"
                   height="100"
@@ -216,13 +216,13 @@ function UTG() {
                   </g>
                   undefined
                 </svg>
-                <h2 className="mb-4 text-xl font-semibold">
+                <h2 className="mb-4 text-lg md:text-xl font-semibold">
                   API Testing Agent
                 </h2>
               </div>
               <ul>
                 <li>
-                  <p className="font">
+                  <p className="text-sm md:text-base leading-relaxed">
                     Generates API tests from your docs, covering edge cases,
                     ensuring coverage.
                   </p>
@@ -230,26 +230,25 @@ function UTG() {
               </ul>
             </div>
           </Link>
-        </li>
-      </ul>
+        </div>
+      </div>
     </div>
   );
 }
 
 export const Products = () => {
   return (
-    <section className="mb-4 mt-12">
-      <h2 className="mb-4 text-2xl font-semibold tracking-wide md:text-3xl">
-        Products 🛠️
-      </h2>
-      <p className="text-l max-w-3xxl">
-        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 />
+    <section className="mb-4 mt-12 w-full">
+      <div className="text-center mb-8 md:mb-12">
+        <h2 className="mb-4 text-2xl md:text-3xl lg:text-4xl font-bold tracking-wide">
+          Products 🛠️
+        </h2>
+        <p className="text-base md:text-lg max-w-3xl mx-auto leading-relaxed text-[color:var(--ifm-color-emphasis-700)]">
+          Keploy provides three key products that help you streamline your testing
+          workflow and ensure comprehensive test coverage.
+        </p>
       </div>
+        <UTG />
     </section>
   );
 };
diff --git a/src/components/QuickStart.js b/src/components/QuickStart.js
index 7a382a6a8..764af6bb7 100644
--- a/src/components/QuickStart.js
+++ b/src/components/QuickStart.js
@@ -1,9 +1,9 @@
 import React from "react";
 import Link from "@docusaurus/Link";
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import {FaBook} from "react-icons/fa";
-import {FaRobot} from "react-icons/fa";
-import {FaWindows, FaLinux, FaApple} from "react-icons/fa";
+import { FaBook } from "react-icons/fa";
+import { FaRobot } from "react-icons/fa";
+import { FaWindows, FaLinux, FaApple } from "react-icons/fa";
 export const QuickStart = () => {
   return (
     <section className="mt-1">
@@ -65,37 +65,45 @@ export const QuickStart = () => {
           testing.
         </p>
 
-        <div className="grid grid-cols-1 gap-6 md:grid-cols-3 lg:gap-8">
+        <div >
           {/* Installation Card */}
-          <Link
-            className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
-            to={useBaseUrl("/server/installation")}
-          >
-            <div class="flex gap-3">
-              <FaWindows className="h-12 w-12 text-orange-500" />
-              <FaLinux className="h-12 w-12 text-orange-500" />
-              <FaApple className="h-12 w-12 text-orange-500" />
+          <div className="grid gap-4 md:grid-cols-3 xl:gap-6 grid-cols-auto-fit">
+            <div className="min-w-[30%]">
+              <Link
+                className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
+                to={useBaseUrl("/server/installation")}
+              >
+                <div class="flex gap-3">
+                  <FaWindows className="h-12 w-12 text-orange-500" />
+                  <FaLinux className="h-12 w-12 text-orange-500" />
+                  <FaApple className="h-12 w-12 text-orange-500" />
+                </div>
+                <p className="pt-4 text-lg font-semibold">Installation</p>
+              </Link>
             </div>
-            <p className="pt-4 text-lg font-semibold">Installation</p>
-          </Link>
 
-          {/* Quickstart Card */}
-          <Link
-            className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
-            to={useBaseUrl("/docs/quickstart/quickstart-filter/")}
-          >
-            <FaBook className="h-12 w-12 text-orange-500" />
-            <p className="pt-4 text-lg font-semibold">Quickstart Guide</p>
-          </Link>
+            {/* Quickstart Card */}
+            <div className="min-w-[30%]">
+              <Link
+                className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
+                to={useBaseUrl("/docs/quickstart/quickstart-filter/")}
+              >
+                <FaBook className="h-12 w-12 text-orange-500" />
+                <p className="pt-4 text-lg font-semibold">Quickstart Guide</p>
+              </Link>
+            </div>
 
-          {/* AI-powered API Testing Card */}
-          <Link
-            className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
-            to={useBaseUrl("/docs/running-keploy/generate-api-tests-using-ai/")}
-          >
-            <FaRobot className="h-12 w-12 text-orange-500" />
-            <p className="pt-4 text-lg font-semibold">AI-powered API Testing</p>
-          </Link>
+            {/* AI-powered API Testing Card */}
+            <div className="min-w-[30%]">
+              <Link
+                className="flex flex-col items-center justify-center space-y-3 rounded-lg bg-[color:var(--ifm-card-background-color)] p-6 text-center shadow-lg transition-transform duration-200 hover:scale-105"
+                to={useBaseUrl("/docs/running-keploy/generate-api-tests-using-ai/")}
+              >
+                <FaRobot className="h-12 w-12 text-orange-500" />
+                <p className="pt-4 text-lg font-semibold">AI-powered API Testing</p>
+              </Link>
+            </div>
+          </div>
         </div>
       </div>
     </section>