diff --git a/src/components/PlanCard/index.js b/src/components/PlanCard/index.js
index b3b8cca35533..887bf82c84d5 100644
--- a/src/components/PlanCard/index.js
+++ b/src/components/PlanCard/index.js
@@ -1,10 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 import Button from "../../reusecore/Button";
 import { Col, Row, Container } from "../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
+import Modal from "react-modal";
+import PricingForm from "../PricingForm";
+
+const PlanCard = ({ planData, isYearly }) => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  const openModal = () => setModalIsOpen(true);
+  const closeModal = () => setModalIsOpen(false);
 
-const PlanCard = ({ planData , isYearly }) => {
   if (!planData || !Array.isArray(planData) || planData.length === 0) {
     return <div>No plan data available</div>;
   }
@@ -14,18 +21,13 @@ const PlanCard = ({ planData , isYearly }) => {
       <Container>
         <Row $Hcenter>
           {planData.map((x) => (
-            // <Col $xl={4} $lg={2} $md={1} $sm={1} key={x.tier}>
             <Col key={x.tier}>
               <div className={`${x.featured ? "featured" : ""} pricing-table`}>
-
-                {x.tier === "Personal" ? <div className="pricing-label">Free Forever</div> : null}
-
-                {x.tier === "Team Designer" ? <div className="featured-label">Most Popular</div> : null}
+                {x.tier === "Personal" && <div className="pricing-label">Free Forever</div>}
+                {x.tier === "Team Designer" && <div className="featured-label">Most Popular</div>}
 
                 {x.pricing_coming_soon && (
-                  <div className="pricing_coming_soon">
-                    {x.pricing_coming_soon}
-                  </div>
+                  <div className="pricing_coming_soon">{x.pricing_coming_soon}</div>
                 )}
 
                 <h2>{x.tier}</h2>
@@ -35,50 +37,42 @@ const PlanCard = ({ planData , isYearly }) => {
                   {isYearly ? (
                     x.yearlyprice !== undefined ? (
                       <div className="price">
-                        <span className="price-amount"><sup>$</sup>
-                          {x.yearlyprice === 0
-                            ? "0"
-                            : x.yearlyprice.toFixed(0)}
+                        <span className="price-amount">
+                          <sup>$</sup>
+                          {x.yearlyprice === 0 ? "0" : x.yearlyprice.toFixed(0)}
                         </span>
                         <span className="currency">USD</span>
                         <span className="price-per">per user/year</span>
                       </div>
                     ) : (
-                      <div className="pricing_coming_soon">
-                        {x.pricing_coming_soon}
-                      </div>
+                      <div className="pricing_coming_soon">{x.pricing_coming_soon}</div>
                     )
                   ) : (
                     x.monthlyprice !== undefined ? (
                       <div className="price">
-                        <span className="price-amount"><sup>$</sup>
-                          {x.monthlyprice === 0
-                            ? "0"
-                            : x.monthlyprice.toFixed(0)}
+                        <span className="price-amount">
+                          <sup>$</sup>
+                          {x.monthlyprice === 0 ? "0" : x.monthlyprice.toFixed(0)}
                         </span>
                         <span className="currency">USD</span>
                         <span className="price-per">per user/month</span>
                       </div>
                     ) : (
-                      <div className="pricing_coming_soon">
-                        {x.pricing_coming_soon}
-                      </div>
+                      <div className="pricing_coming_soon">{x.pricing_coming_soon}</div>
                     )
                   )}
                 </div>
 
-
                 <Button
-                  // disabled={x.tier === "Team Operator"}
                   $primary
                   className={
                     x.button[0] === "Coming Soon"
                       ? "price-button-disabled"
                       : "price-button-link"
                   }
-                  $url={x.button[1]}
+                  onClick={x.tier === "Enterprise" ? openModal : undefined}
                 >
-                  {x.button[0]}
+                  {x.tier === "Enterprise" ? "Contact Sales" : x.button[0]}
                 </Button>
 
                 <h6>{x.byline2}</h6>
@@ -95,12 +89,56 @@ const PlanCard = ({ planData , isYearly }) => {
                       </div>
                     ))}
                 </div>
-
               </div>
             </Col>
           ))}
         </Row>
       </Container>
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        className="Modal"
+        overlayClassName="Overlay"
+        ariaHideApp={false}
+        contentLabel="Enterprise Inquiry Form"
+        style={{
+          content: {
+            maxHeight: "90vh",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            },
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          },
+          overlay: {
+            overflow: "auto",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            },
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          }
+        }}
+      >
+        <Button $secondary className="close-modal-btn" onClick={closeModal}>
+    X
+        </Button>
+        <h2 className="modal-heading">Contact Sales</h2>
+        <div style={{
+          flex: 1,
+          overflow: "auto",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          "&::-webkit-scrollbar": {
+            display: "none"
+          }
+        }}>
+          <PricingForm />
+        </div>
+      </Modal>
     </PlanCardWrapper>
   );
 };
diff --git a/src/components/PricingForm/index.js b/src/components/PricingForm/index.js
new file mode 100644
index 000000000000..e8c2a3060c3d
--- /dev/null
+++ b/src/components/PricingForm/index.js
@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+import { Formik, Form, Field } from "formik";
+import PricingFormWrapper from "./pricingForm.style";
+
+const PricingForm = () => {
+  const [memberFormOne, setMemberFormOne] = useState({});
+  const [submit, setSubmit] = useState(false);
+
+  useEffect(() => {
+    if (submit) {
+      axios
+        .post("https://hook.us1.make.com/7c1op88rysnmeitovt35fxzcv2spspp0", {
+          memberFormOne,
+        })
+        .catch((err) => {
+          console.error("Error submitting the form:", err);
+        });
+    }
+  }, [submit, memberFormOne]);
+
+  return (
+    <PricingFormWrapper>
+      <Formik
+        initialValues={{
+          firstName: "",
+          lastName: "",
+          workEmail: "",
+          companyName: "",
+          companySize: "",
+          summary: "",
+        }}
+        onSubmit={(values) => {
+          setMemberFormOne(values);
+          setSubmit(true);
+        }}
+      >
+        {() => (
+          <Form className="pricing-form">
+            {/* Scrollable Form Fields */}
+            <div className="form-content">
+              {/* All form fields here */}
+              <div className="form-field">
+                <label htmlFor="firstName">First Name</label>
+                <Field
+                  id="firstName"
+                  name="firstName"
+                  type="text"
+                  placeholder="Your First Name"
+                  required
+                />
+              </div>
+              <div className="form-field">
+                <label htmlFor="lastName">Last Name</label>
+                <Field
+                  id="lastName"
+                  name="lastName"
+                  type="text"
+                  placeholder="Your Last Name"
+                  required
+                />
+              </div>
+
+              <div className="form-field">
+                <label htmlFor="workEmail">Work Email</label>
+                <Field
+                  id="workEmail"
+                  name="workEmail"
+                  type="email"
+                  placeholder="Your Work Email"
+                  required
+                  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$"
+                />
+              </div>
+
+              <div className="form-field">
+                <label htmlFor="companyName">Company Name</label>
+                <Field
+                  id="companyName"
+                  name="companyName"
+                  type="text"
+                  placeholder="Your Company Name"
+                  required
+                />
+              </div>
+
+              <div className="form-field">
+                <label htmlFor="companySize">Company Size / Number of Employees</label>
+                <Field
+                  id="companySize"
+                  name="companySize"
+                  type="number"
+                  placeholder="Number of Employees"
+                  required
+                  min="1"
+                />
+              </div>
+              <div className="form-field">
+                <label htmlFor="summary">Summary</label>
+                <Field
+                  id="summary"
+                  name="summary"
+                  as="textarea"
+                  placeholder="Briefly describe your inquiry or needs"
+                  required
+                />
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <div className="form-footer">
+              <button type="submit" className="submit-button">Submit</button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </PricingFormWrapper>
+  );
+};
+
+export default PricingForm;
+
diff --git a/src/components/PricingForm/pricingForm.style.js b/src/components/PricingForm/pricingForm.style.js
new file mode 100644
index 000000000000..95a59c503fb9
--- /dev/null
+++ b/src/components/PricingForm/pricingForm.style.js
@@ -0,0 +1,122 @@
+import styled from "styled-components";
+
+const PricingFormWrapper = styled.div`
+  max-width: 800px;
+  margin: 1rem auto;
+  padding: 2rem;
+  border-radius: 8px;
+  background-color: var(--background);
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh; 
+  overflow: hidden;
+
+  .form-content {
+    flex: 1;
+    overflow-y: auto; /* Enable scrolling */
+    margin-bottom: 1rem;
+    scrollbar-width: none; /* Hide scrollbar for Firefox */
+    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
+
+    /* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  h2 {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    color: var(--text-color);
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .form-field {
+    margin-bottom: 1.5rem;
+  }
+
+  label {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    font-size: 14px;
+    color: var(--label-color);
+  }
+
+  input[type="text"],
+  input[type="email"],
+  textarea,
+  input[type="number"] {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 1rem;
+   border: 1px solid ${props => props["data-theme"] === "dark" ? "#000000" : "#ffffff"};
+    border-radius: 4px;
+    background-color: var(--input-bg);
+    color: var(--input-text);
+    outline: none;
+  }
+
+  textarea {
+    resize: none;
+    min-height: 100px;
+  }
+
+  input:focus,
+  textarea:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 5px var(--primary-color);
+  }
+
+  .form-footer {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+  }
+
+  button[type="submit"] {
+    background-color: #03d3a9;
+    color: #ffffff;
+    padding: 0.75rem 2rem;
+    font-size: 1rem;
+    font-weight: bold;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.25s ease-in-out;
+  }
+
+  button[type="submit"]:hover {
+    background-color: var(--button-hover-bg);
+  }
+
+  /* Light and Dark Mode Variables */
+  :root {
+    --background: #ffffff;
+    --text-color: #333333;
+    --label-color: #555555;
+    --input-bg: #f9f9f9;
+    --input-border: #ffffff; 
+    --input-text: #333333;
+    --button-bg: #03D3A9;
+    --button-text: #ffffff;
+    --button-hover-bg: #03d3a9;
+    --primary-color: #007bff;
+  }
+
+  [data-theme="dark"] {
+    --background: #1a1a1a;
+    --text-color: #f0f0f0;
+    --label-color: #aaaaaa;
+    --input-bg: #333333;
+    --input-border: #000000; 
+    --input-text: #ffffff;
+    --button-bg: #0d6efd;
+    --button-text: #ffffff;
+    --button-hover-bg: #0a58ca;
+    --primary-color: #0d6efd;
+  }
+`;
+
+export default PricingFormWrapper;
diff --git a/src/sections/Products/index.js b/src/sections/Products/index.js
index 40caa00cad8a..7369c6479a02 100644
--- a/src/sections/Products/index.js
+++ b/src/sections/Products/index.js
@@ -11,152 +11,12 @@ import mesheryLogo from "../../assets/images/meshery/icon-only/meshery-logo-ligh
 import cloudicon from "./images/cloud.svg";
 import layer5 from "../../assets/images/layer5/5 icon/svg/light/5-light-no-trim.svg";
 import kanvas from "../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
-import comingSoon from "./icons/coming-soon.webp";
 import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 import PlanCard from "../../components/PlanCard";
 import { Row } from "../../reusecore/Layout";
 import Reviews from "../Pricing/review-slider";
+import options from "../../sections/Pricing/generatePlans";
 
-const options = [
-  {
-    tier: "Personal",
-    featured: true,
-    monthlyprice: 0,
-    yearlyprice: 0,
-    byline: "Open Source features, plus:",
-    button: ["Join for Free", "https://cloud.layer5.io"],
-    summary: [
-      {
-        id: 0,
-        category: "Cloud Native Design Patterns",
-        description:
-          "Import and export your designs using your local filesystem or remote URL.",
-      },
-      {
-        id: 1,
-        category: "Multiple Kubernetes Clusters",
-        description:
-          "Ongoing synchronization of Kubernetes configuration, workloads and cloud native infrastructure changes across any number of Kubernetes clusters.",
-      },
-      {
-        id: 2,
-        category: "Cluster Discovery",
-        description:
-          "Day 2 support for ongoing synchronization of Kubernetes configuration, workloads and cloud native infrastructure changes.",
-      },
-      {
-        id: 3,
-        category: "Microservices Performance",
-        description:
-          "Continuous visibility across all of your clusters and workloads.",
-      },
-      {
-        id: 4,
-        category: "Load Generation",
-        description:
-          "Single Load Generator: Support testing multiple endpoints simultaneously.",
-      },
-      {
-        id: 5,
-        category: "MeshMark",
-        description: "Identify the cost of a specific network function.",
-      },
-    ],
-  },
-  {
-    tier: "Team",
-    featured: false,
-    monthlyprice: 9.99,
-    yearlyprice: 100,
-    byline: "Everything in Free, plus:",
-    button: [
-      "Contact Sales",
-      "https://us15.list-manage.com/contact-form?u=6b50be5aea3dfe1fd4c041d80&form_id=d0ffe17c92d8014ede6b721aa16096e8",
-    ],
-    summary: [
-      {
-        id: 0,
-        category: "Dry-run",
-        description:
-          "Test and verify configuration changes in a separate environment.",
-      },
-      {
-        id: 1,
-        category: "Design Reviews",
-        description:
-          "Discuss any design by leaving review comments or notes on a specific design. Control who has access, notify discussion participants with updates, and link from anywhere.",
-      },
-      {
-        id: 2,
-        category: "Visual Design",
-        description:
-          "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads",
-      },
-      {
-        id: 3,
-        category: "Performance Profiles",
-        description:
-          "Share performance profiles and test results with individual users or teams.",
-      },
-      {
-        id: 4,
-        category: "Built-in Roles",
-        description: "Static - out of the box",
-      },
-      {
-        id: 5,
-        category: "Standard Support",
-        description:
-          "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via the web.",
-      },
-    ],
-  },
-  {
-    tier: "Enterprise",
-    featured: false,
-    monthlyprice: 15.99,
-    yearlyprice: 180,
-    pricing_coming_soon: <img src={comingSoon}></img>,
-    byline: "Everything in Team, plus:",
-    button: ["Coming Soon", ""],
-    summary: [
-      {
-        id: 0,
-        category: "User-defined Roles",
-        description: "Customizable roles for specific permission assignments",
-      },
-      {
-        id: 1,
-        category: "Authentication: LDAP",
-        description:
-          "Access Meshery  using your existing accounts and centrally manage repository access.",
-      },
-      {
-        id: 2,
-        category: "Authentication: SAML",
-        description:
-          "Use an identity provider to manage the identities of Meshery users and applications.",
-      },
-      {
-        id: 3,
-        category: "Self-hosted Deployment",
-        description:
-          "Self-hosted Meshery Cloud for on-prem appliances or self-managed cloud tenants.",
-      },
-      {
-        id: 4,
-        category: "Traffic Replay",
-        description: "Visual event replay in Kanvas",
-      },
-      {
-        id: 5,
-        category: "Phone Support",
-        description:
-          "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via phone.",
-      },
-    ],
-  },
-];
 const CardsData = [
   {
     id: 1,