diff --git a/src/assets/css/form.css b/src/assets/css/form.css
index 38d78c8..a75d340 100644
--- a/src/assets/css/form.css
+++ b/src/assets/css/form.css
@@ -111,21 +111,22 @@ body {
     outline: none !important;
     border-color: black;
     box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
-  
-  }
-  
-  .select-box:hover {
+
+}
+
+.select-box:hover {
     outline: none !important;
     border-color: black;
     box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
     cursor: text;
-  
+
     transition: border-color 2s ease-out;
-  }
+}
 
 /* .form-div1::before {
     content: "";
     position: absolute;
+
     background: #F4F1EE;
     bottom: -50px;
     height: 50px;
@@ -147,4 +148,116 @@ body {
     justify-content: space-around;
     border-radius: 0 0 20px 0;
     padding: 20px;
+}
+
+.select-box-div-price {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+.select-box-price {
+    display: flex;
+    width: 167px;
+    height: 33px;
+    border-radius: 5px;
+    padding-right: 5px;
+    border: 1px solid #e6e6e6;
+    font-family: 'Inter';
+    font-size: 13px;
+    padding: 5px;
+}
+
+.select-box-price:focus {
+    outline: none !important;
+    border-color: black;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
+}
+
+.select-box-price:hover {
+    outline: none !important;
+    border-color: black;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
+    cursor: text;
+    transition: border-color 2s ease-out;
+}
+
+.bnb-tag {
+    font-family: 'Inter';
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.upload-file {
+    display: flex;
+    padding: 20px;
+    /* width: 100%; */
+}
+
+/* .label-section-edit-profile {
+    align-items: center;
+    display: flex;
+    font-weight: 600;
+    justify-content: center;
+    object-fit: cover;
+} */
+
+/* input[type="file"] {
+    display: none;
+}
+
+.custom-file-upload {
+    border: 1px solid #ccc;
+    display: inline-block;
+    padding: 6px 12px;
+    cursor: pointer;
+} */
+
+.upload-btn-wrapper {
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 10px 20px rgb(0 0 0 / 5%);
+    border-radius: 5px;
+}
+
+.btn {
+    background-color: white;
+    border: 1px solid #e6e6e6;
+    padding: 8px 20px;
+    border-radius: 8px;
+    font-size: 16px;
+    /* font-weight: bold; */
+    /* cursor: pointer; */
+    /* box-shadow: 0 10px 20px rgb(0 0 0 / 5%); */
+}
+
+.upload-btn-wrapper input[type=file] {
+    font-size: 100px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    /* width: 10px; */
+    /* box-shadow: 0 10px 20px rgb(0 0 0 / 5%); */
+}
+
+.status-div-upload {
+    display: flex;
+    justify-content: center;
+    justify-content: space-between;
+    gap: 10px;
+    background: #fff;
+    /* box-shadow: 0 10px 20px rgb(0 0 0 / 5%); */
+    border-radius: 12px;
+    /* pointer */
+}
+
+.form-div3 {
+    display: flex;
+    justify-content: space-between;
 }
\ No newline at end of file
diff --git a/src/pages/form-page.jsx b/src/pages/form-page.jsx
index 943c8a9..71a4bc8 100644
--- a/src/pages/form-page.jsx
+++ b/src/pages/form-page.jsx
@@ -1,13 +1,132 @@
 import React from "react";
 import { Component } from "react";
+import "../assets/css/form.css";
 
 class FormPage extends Component {
-	render() {
-		return (
-			<div className="bg-gray-900">
-			</div>
-		); 
-	}
+  render() {
+    return (
+      <>
+        <div>
+          <h1 class="logo-over-white">
+            PAYCONSENT<span class="dot-color">.</span>
+          </h1>
+        </div>
+        <div className="total-form">
+          <div className="green-line">
+          </div>
+          <form className="form-div-total">
+            <div className="form-div1">
+              <div className="title-form">
+                <h1>Create a contract</h1>
+              </div>
+              <div className="status-div">
+                <div className="label-status">
+                  <label class="status-title" for="contractStatus">
+                    Status
+                  </label>
+                  <p className="text-[13px]">Seller or Buyer</p>
+                </div>
+                <div className="select-box-div">
+                  <select className="select-box">
+                    <option value="0" selected disabled>
+                      Status
+                    </option>
+                    <option value="1">Buyer</option>
+                    <option value="2">Seller</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div className="form-div2">
+              <div className="status-div">
+                <div className="label-status">
+                  <label class="status-title" for="contractName">
+                    My Wallet ID
+                  </label>
+                  <p className="text-[13px]">The creator of this contract</p>
+                </div>
+                <div className="select-box-div">
+                  <input
+                    className="select-box"
+                    type="name"
+                    id="exampleInput8"
+                    placeholder="Enter your wallet ID"
+                  />
+                </div>
+              </div>
+              <div className="status-div">
+                <div className="label-status">
+                  <label class="status-title" for="contractSubject">
+                    Subject
+                  </label>
+                  <p className="text-[13px]">About the contract</p>
+                </div>
+                <div className="select-box-div">
+                  <textarea
+                    className="select-box"
+                    id="exampleFormControlTextarea13"
+                    rows="3"
+                    placeholder="Enter the subject of this contract"
+                  ></textarea>
+                </div>
+              </div>
+              <div className="status-div">
+                <div className="label-status">
+                  <label class="status-title" for="contractWalletAddress">
+                    Sending To
+                  </label>
+                  <p className="text-[13px]">The receiver</p>
+                </div>
+                <div className="select-box-div">
+                  <input
+                    className="select-box"
+                    id="exampleInput8"
+                    placeholder="Enter the receiver's wallet ID"
+                  />
+                </div>
+              </div>
+              <div className="status-div-upload">
+                <div className="label-status">
+                  <label class="status-title">File To Upload</label>
+                  <p className="text-[13px]">(Quotation, Specifications ...)</p>
+                </div>
+                <div>
+                  <div class="upload-btn-wrapper">
+                    <button class="btn">Upload a file</button>
+                    <input type="file" name="myfile" />
+                  </div>
+                </div>
+              </div>
+              <div className="status-div">
+                <div className="label-status">
+                  <label class="status-title" for="contractPrice">
+                    Price
+                  </label>
+                </div>
+                <div className="select-box-div-price">
+                  <input
+                    className="select-box-price"
+                    type="price"
+                    id="exampleInput8"
+                    placeholder="Price"
+                  />
+                  <p className="bnb-tag">BNB</p>
+                </div>
+              </div>
+            </div>
+            <div className="form-div3">
+              <div>
+                <button type="dismiss">Dismiss</button>
+              </div>
+              <div>
+                <button type="submit">Submit</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </>
+    );
+  }
 }
 
 export default FormPage;
\ No newline at end of file