diff --git a/src/hooks/usePayments.jsx b/src/hooks/usePayments.jsx
new file mode 100644
index 00000000..42ce6558
--- /dev/null
+++ b/src/hooks/usePayments.jsx
@@ -0,0 +1,37 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { PaymentRepository } from "../repositories/PaymentRepository";
+
+export const useMakePayment = (onSuccessCallBack) => {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (payload) => PaymentRepository.makePayment(payload),
+    onSuccess: (_, varibales) => {
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.message ||
+          error.response.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    },
+  });
+};
+export const useVerifyPayment = () => {
+  const client = useQueryClient();
+  return useMutation({
+    mutationFn: (payload) => PaymentRepository.verifyPayment(payload),
+    onSuccess: (_, varibales) => {
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+    onError: (error) => {
+      showToast(
+        error.message ||
+          error.response.message ||
+          "Something went wrong.Please try again later.",
+        "error"
+      );
+    },
+  });
+};
diff --git a/src/pages/Home/SubscriptionSummary.jsx b/src/pages/Home/SubscriptionSummary.jsx
new file mode 100644
index 00000000..733ec81a
--- /dev/null
+++ b/src/pages/Home/SubscriptionSummary.jsx
@@ -0,0 +1,117 @@
+import React from "react";
+
+const SubscriptionSummary = () => {
+  const options = [
+    {
+      id: 1,
+      title: "Design",
+      description: "Cake sugar plum fruitcake I love sweet roll jelly-o.",
+      svg: (
+        <svg
+          width="41"
+          height="40"
+          viewBox="0 0 41 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M22.9744 6.12736C22.6916 6.4134 22.4218 6.90878 22.1938 7.59469C21.9711 8.26486 21.8162 9.03022 21.7107 9.77016C21.6213 10.3965 21.5697 10.9873 21.5399 11.4601C22.0127 11.4304 22.6035 11.3787 23.2298 11.2893C23.9698 11.1838 24.7351 11.0289 25.4053 10.8062C26.0912 10.5782 26.5866 10.3084 26.8726 10.0256C27.3886 9.50886 27.6784 8.80843 27.6784 8.07813C27.6784 7.34706 27.388 6.64593 26.871 6.12899C26.3541 5.61204 25.6529 5.32162 24.9219 5.32162C24.1916 5.32162 23.4911 5.61143 22.9744 6.12736Z"
+            fill="currentColor"
+          />
+        </svg>
+      ),
+    },
+    {
+      id: 2,
+      title: "Development",
+      description: "Cake sugar plum fruitcake I love sweet roll jelly-o.",
+      svg: (
+        <svg
+          width="41"
+          height="40"
+          viewBox="0 0 41 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M16.5 5.25C15.5717 5.25 14.6815 5.61875 14.0251 6.27513C13.3687 6.9315 13 7.82174 13 8.75V10.25H6.5C5.25736 10.25 4.25 11.2574 4.25 12.5V32.5C4.25 33.7426 5.25736 34.75 6.5 34.75H14H26.5H34C35.2426 34.75 36.25 33.7426 36.25 32.5V12.5C36.25 11.2574 35.2426 10.25 34 10.25H27.5V8.75C27.5 7.82174 27.1313 6.9315 26.4749 6.27513C25.8185 5.61875 24.9283 5.25 24 5.25H16.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      ),
+    },
+    {
+      id: 3,
+      title: "Native App",
+      description: "Cake sugar plum fruitcake I love sweet roll jelly-o.",
+      svg: (
+        <svg
+          width="41"
+          height="40"
+          viewBox="0 0 41 40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15.25 17.5V15H5.25V17.5C5.25 18.8261 5.77678 20.0979 6.71447 21.0355C7.65215 21.9732 8.92392 22.5 10.25 22.5C11.5761 22.5 12.8479 21.9732 13.7855 21.0355C14.7232 20.0979 15.25 18.8261 15.25 17.5Z"
+            fill="currentColor"
+            fillOpacity="0.2"
+          />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+  <div className="container-fluid">
+  {/* Section title aligned at start */}
+  <div className="mb-3">
+    <p className="fw-bold mb-0">Summary</p>
+  </div>
+
+  <div className="row">
+    <div className="col-12 col-md-6">
+      <div className="row px-6">
+        {options.map((opt) => (
+          <div key={opt.id} className="col-12  mb-3">
+            <div className="form-check custom-option custom-option-basic">
+              <label
+                className="form-check-label custom-option-content"
+                htmlFor={`customCheckTemp${opt.id}`}
+              >
+                   <input
+                  name="customRadioSvg"
+                  className="form-check-input"
+                  type="radio"
+                  id={`customCheckTemp${opt.id}`}
+                  defaultChecked={opt.id === 1}
+                />
+                <span className="custom-option-body d-flex flex-column align-items-center text-center">
+                  {opt.svg}
+                  <span className="custom-option-title mt-2">{opt.title}</span>
+                  <small className="text-muted">{opt.description}</small>
+                </span>
+             
+              </label>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div className="col-12 col-md-6">
+      {/* Add your right-side content here */}
+    </div>
+  </div>
+</div>
+
+  );
+};
+
+export default SubscriptionSummary;
diff --git a/src/repositories/PaymentRepository.jsx b/src/repositories/PaymentRepository.jsx
new file mode 100644
index 00000000..f3e7b5c5
--- /dev/null
+++ b/src/repositories/PaymentRepository.jsx
@@ -0,0 +1,7 @@
+import { api } from "../utils/axiosClient";
+
+
+export const PaymentRepository = {
+  makePayment: () => api.post(`/api/Payment/create-order`),
+  verifyPayment: () => api.post(`/api/Payment/verify-payment`),
+};
diff --git a/src/router/AppRoutes.jsx b/src/router/AppRoutes.jsx
index ac736d7b..f97be55f 100644
--- a/src/router/AppRoutes.jsx
+++ b/src/router/AppRoutes.jsx
@@ -54,6 +54,7 @@ import ProjectPage from "../pages/project/ProjectPage";
 import { ComingSoonPage } from "../pages/Misc/ComingSoonPage";
 import ImageGalleryPage from "../pages/Gallary/ImageGallaryPage";
 import CollectionPage from "../pages/collections/CollectionPage";
+import SubscriptionSummary from "../pages/Home/SubscriptionSummary";
 const router = createBrowserRouter(
   [
     {
@@ -70,9 +71,11 @@ const router = createBrowserRouter(
         { path: "/reset-password", element: <MainResetPasswordPage /> },
         { path: "/legal-info", element: <LegalInfoCard /> },
         { path: "/auth/changepassword", element: <ChangePasswordPage /> },
+        
       ],
     },
     { path: "/auth/switch/org", element: <TenantSelectionPage /> },
+    { path: "/request", element: <SubscriptionSummary /> },
     {
       element: <ProtectedRoute />,
       errorElement: <ErrorPage />,