diff --git a/src/components/Expenses/CreateExpense.jsx b/src/components/Expenses/CreateExpense.jsx
new file mode 100644
index 00000000..927269a9
--- /dev/null
+++ b/src/components/Expenses/CreateExpense.jsx
@@ -0,0 +1,128 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { ExpenseSchema } from "./ExpenseSchema";
+
+const CreateExpense = () => {
+  const {} = useForm({
+    resolver: zodResolver(ExpenseSchema),
+    defaultValues: {
+      projectId: "",
+      expensesTypeId: "",
+      paymentModeId: "",
+      paidById: "",
+      transactionDate: "",
+      transactionId: "",
+      description: "",
+      location: "",
+      supplerName: "",
+      amount: "",
+      noOfPersons: "",
+      statusId: "",
+      billAttachments: [],
+    },
+  });
+  return (
+    <div class="container p-3">
+  <p class="fw-bold m-0">Create New Expense</p>
+  <form id="expenseForm">
+    <div class="row my-2">
+      <div class="col-md-6">
+        <label for="projectId">Select Project</label>
+        <select class="form-select form-select-sm" id="projectId" required>
+          <option value="">-- Select Project --</option>
+          <option value="project1">Project A</option>
+          <option value="project2">Project B</option>
+        </select>
+      </div>
+
+      <div class="col-md-6">
+        <label for="expensesTypeId">Expense Type</label>
+        <select class="form-select form-select-sm" id="expensesTypeId" required>
+          <option value="">-- Select Type --</option>
+          <option value="type1">Travel</option>
+          <option value="type2">Meal</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-6">
+        <label for="paymentModeId">Payment Mode</label>
+        <select class="form-select form-select-sm" id="paymentModeId" required>
+          <option value="">-- Select Payment Mode --</option>
+          <option value="cash">Cash</option>
+          <option value="card">Card</option>
+        </select>
+      </div>
+
+      <div class="col-md-6">
+        <label for="paidById">Paid By</label>
+        <input type="text" id="paidById" class="form-control form-control-sm" required />
+      </div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-6">
+        <label for="transactionDate">Transaction Date</label>
+        <input type="date" id="transactionDate" class="form-control form-control-sm" placeholder="DD-MM-YYYY" required />
+      </div>
+
+      <div class="col-md-6">
+        <label for="amount">Amount</label>
+        <input type="number" id="amount" class="form-control form-control-sm" min="1" required />
+      </div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-6">
+        <label for="noOfPersons">No. of Persons</label>
+        <input type="number" id="noOfPersons" class="form-control form-control-sm" min="1" required />
+      </div>
+
+      <div class="col-md-6">
+        <label for="statusId">Status</label>
+        <select class="form-select form-select-sm" id="statusId" required>
+          <option value="">-- Select Status --</option>
+          <option value="approved">Approved</option>
+          <option value="pending">Pending</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-6">
+        <label for="location">Location</label>
+        <input type="text" id="location" class="form-control form-control-sm" required />
+      </div>
+
+      <div class="col-md-6">
+        <label for="supplerName">Supplier Name</label>
+        <input type="text" id="supplerName" class="form-control form-control-sm" required />
+      </div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-12">
+        <label for="description">Description</label>
+        <textarea id="description" class="form-control form-control-sm" rows="2" required></textarea>
+      </div>
+    </div>
+
+    <div class="row my-2">
+      <div class="col-md-12">
+        <label for="billAttachments">Upload Bill (PDF, JPG, PNG, max 5MB)</label>
+        <input type="file" id="billAttachments" class="form-control form-control-sm"
+               accept=".pdf,.jpg,.jpeg,.png" required />
+      </div>
+    </div>
+
+    <div className="d-flex justify-content-center gap-2"> <button type="submit" class="btn btn-primary btn-sm mt-3">Submit</button>
+        <button type="submit" class="btn btn-secondary btn-sm mt-3">Cancel</button></div>
+  </form>
+</div>
+
+  );
+};
+
+export default CreateExpense;
diff --git a/src/components/Expenses/ExpenseSchema.js b/src/components/Expenses/ExpenseSchema.js
index 705efe6b..e69de29b 100644
--- a/src/components/Expenses/ExpenseSchema.js
+++ b/src/components/Expenses/ExpenseSchema.js
@@ -1,91 +0,0 @@
-import { z } from "zod";
-
-const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-const ALLOWED_TYPES = [
-  "application/pdf",
-  "image/png",
-  "image/jpg",
-  "image/jpeg",
-];
-
-
-export const ExpenseSchema = (expenseTypes) => {
-  return z
-    .object({
-      projectId: z.string().min(1, { message: "Project is required" }),
-      expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
-      paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
-      paidById: z.string().min(1, { message: "Employee name is required" }),
-      transactionDate: z.string().min(1, { message: "Date is required" }),
-      transactionId: z.string().optional(),
-      description: z.string().min(1, { message: "Description is required" }),
-      location: z.string().min(1, { message: "Location is required" }),
-      supplerName: z.string().min(1, { message: "Supplier name is required" }),
-      amount: z
-        .coerce
-        .number({ invalid_type_error: "Amount is required and must be a number" })
-        .min(1, "Amount must be Enter")
-        .refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
-          message: "Amount must have at most 2 decimal places",
-        }),
-      noOfPersons: z.coerce
-  .number()
-  .optional(),
-      billAttachments: z
-        .array(
-          z.object({
-            fileName: z.string().min(1, { message: "Filename is required" }),
-            base64Data: z.string().nullable(),
-            contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
-              message: "Only PDF, PNG, JPG, or JPEG files are allowed",
-            }),
-            documentId:z.string().optional(),
-            fileSize: z.number().max(MAX_FILE_SIZE, {
-              message: "File size must be less than or equal to 5MB",
-            }),
-            description: z.string().optional(),
-            isActive:z.boolean().default(true)
-          })
-        )
-        .nonempty({ message: "At least one file attachment is required" }),
-    })
-    .refine(
-      (data) => {
-        return !data.projectId || (data.paidById && data.paidById.trim() !== "");
-      },
-      {
-        message: "Please select who paid (employee)",
-        path: ["paidById"],
-      }
-    )
-    .superRefine((data, ctx) => {
-      const expenseType = expenseTypes.find((et) => et.id === data.expensesTypeId);
-      if (expenseType?.noOfPersonsRequired && (!data.noOfPersons || data.noOfPersons < 1)) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: "No. of Persons is required and must be at least 1",
-          path: ["noOfPersons"],
-        });
-      }
-    });
-};
-
-export const defaultExpense = {
-      projectId: "",
-      expensesTypeId: "",
-      paymentModeId: "",
-      paidById: "",
-      transactionDate: "",
-      transactionId: "",
-      description: "",
-      location: "",
-      supplerName: "",
-      amount: "",
-      noOfPersons: "",
-      billAttachments: [],
-    }
-
-export const ActionSchema = z.object({
-  comment : z.string().min(1,{message:"Please leave comment"}),
-   selectedStatus: z.string().min(1, { message: "Please select a status" }),
-})
\ No newline at end of file