diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 8990db0..1ae4661 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -17,7 +17,9 @@ import {
   isFormDataHasErrors,
 } from "../../Utils/Form";
 import { objectMap } from "../../Utils/Object";
-import { signupfields } from "../../Constants/Fields/Signupfields";
+import { signupfields } from "../../Constants/Fields/SignupFields";
+import { paymentfields } from "../../Constants/Fields/PaymentFields";
+import PaymentModal from "../Modals/PaymentModal";
 import "../../styles/signup.scss";
 
 const SignupPage = () => {
diff --git a/src/Constants/Fields/PaymentFields.js b/src/Constants/Fields/PaymentFields.js
new file mode 100644
index 0000000..c275444
--- /dev/null
+++ b/src/Constants/Fields/PaymentFields.js
@@ -0,0 +1,16 @@
+export const paymentfields = {
+  cardFirstName: { required: true, label: "Card First Name", maxLength: 45 },
+  cardLastName: { required: true, label: "Card Last Name", maxLength: 45 },
+  cardNumber: {
+    required: true,
+    label: "Card Number",
+    minLength: 16,
+    maxLength: 16,
+  },
+  cardCvvCode: {
+    required: true,
+    label: "Card CVV Number",
+    maxLength: 5,
+    type: "cvv",
+  },
+};