diff --git a/src/app/(main)/settings/staff/create/page.tsx b/src/app/(main)/settings/staff/create/page.tsx
index d2035f7..bc40f6a 100644
--- a/src/app/(main)/settings/staff/create/page.tsx
+++ b/src/app/(main)/settings/staff/create/page.tsx
@@ -10,10 +10,6 @@ import Tabs, { TabsProps } from "@mui/material/Tabs";
 import { useRouter } from "next/navigation";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-// import ProjectClientDetails from "./ProjectClientDetails";
-// import TaskSetup from "./TaskSetup";
-// import StaffAllocation from "./StaffAllocation";
-// import ResourceMilestone from "./ResourceMilestone";
 import { Task, TaskTemplate } from "@/app/api/tasks";
 import {
   FieldErrors,
@@ -26,7 +22,7 @@ import { CreateProjectInputs, saveProject } from "@/app/api/projects/actions";
 import { Error } from "@mui/icons-material";
 import { ProjectCategory } from "@/app/api/projects";
 import { Grid, Typography } from "@mui/material";
-import CreateStaffForm from "@/components/CreateStaff/CreateStaffForm";
+import CreateStaffForm from "@/components/CreateStaff/CreateStaff";
 
 interface CreateCustomInputs {
   projectCode: string;
@@ -41,165 +37,6 @@ const CreateStaff: React.FC = async () => {
   const title = ['', t('Additional Info')]
   // const regex = new RegExp("^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$")
   // console.log(regex)
-  const fieldLists = [
-    [
-      {
-        id: "staffId",
-        label: t("Staff ID"),
-        type: "text",
-        value: "",
-        required: true,
-      },
-      {
-        id: "name",
-        label: t("Staff Name"),
-        type: "text",
-        value: "",
-        required: true,
-      },
-      {
-        id: "companyId",
-        label: t("Company"),
-        type: "combo-Obj",
-        options: [{id: 1, label: "Company A"}, {id: 2, label: "Company B"}],
-        required: true,
-      },
-      {
-        id: "teamId",
-        label: t("Team"),
-        type: "combo-Obj",
-        options: [{id: 1, label: "A"}, {id: 2, label: "B"}],
-        required: true,
-      },
-      {
-        id: "departmentId",
-        label: t("Department"),
-        type: "combo-Obj",
-        options: [{id: 1, label: "Department A"}, {id: 2, label: "Department B"}],
-        required: true,
-      },
-      {
-        id: "gradeId",
-        label: t("Grade"),
-        type: "combo-Obj",
-        options: [{id: 1, label: "A"}, {id: 2, label: "B"}],
-        required: true,
-      },
-      {
-        id: "skillSetId",
-        label: t("Skillset"),
-        type: "combo-Obj",
-        options: [{id: 1, label: "excel"}, {id: 2, label: "word"}],
-        required: true,
-      },
-      {
-        id: "currentPositionId",
-        label: t("Current Position"),
-        type: "combo-Obj",
-        options: [{id: 1, label: "pos1"}, {id: 2, label: "pos2"}],
-        required: true,
-      },
-      {
-        id: "salaryEffId",
-        label: t("Salary Point"),
-        type: "combo-Obj",
-        options: [{id: 1, label: t("15")}, {id: 2, label: t("20")}],
-        required: true,
-      },
-      {
-        id: "hourlyRate",
-        label: t("Hourly Rate"),
-        type: "numeric-testing",
-        value: "",
-        required: true,
-      },      
-      {
-        id: "employType",
-        label: t("Employ Type"),
-        type: "combo-Obj",
-        options: [{id: "FT", label: t("FT")}, {id: "PT", label: t("PT")}],
-        value: "",
-        required: true,
-      },
-      {
-        id: "email",
-        label: t("Email"),
-        type: "text",
-        value: "",
-        pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$",
-        message: t("input matching format"),
-        required: true,
-      },
-      {
-        id: "phone1",
-        label: t("Phone1"),
-        type: "text",
-        value: "",
-        pattern: "^\\d{8}$",
-        message: t("input correct phone no."),
-        required: true,
-      },
-      {
-        id: "phone2",
-        label: t("Phone2"),
-        type: "text",
-        value: "",
-        pattern: "^\\d{8}$",
-        message: t("input correct phone no."),
-        required: true,
-      },      
-    ],
-    [
-      {
-        id: "emergContactName",
-        label: t("Emergency Contact Name"),
-        type: "text",
-        value: "",
-        required: true,
-      },
-      {
-        id: "emergContactPhone",
-        label: t("Emergency Contact Phone"),
-        type: "text",
-        value: "",
-        pattern: "^\\d{8}$",
-        message: t("input correct phone no."),
-        required: true,
-      },
-      {
-        id: "joinDate",
-        label: t("Join Date"),
-        type: "multiDate",
-        value: "",
-        required: true,
-      },
-      {
-        id: "joinPositionId",
-        label: t("Join Position"),
-        type: "combo-Obj",
-        options: [{id: 1, key: 1, value: 1, label: "pos1"}, {id: 2, key: 2, value: 2, label: "pos2"}],
-        required: true,
-      },
-      {
-        id: "departDate",
-        label: t("Depart Date"),
-        type: "multiDate",
-        value: "",
-      },
-      {
-        id: "departReason",
-        label: t("Depart Reason"),
-        type: "text",
-        value: "",
-      },
-      {
-        id: "remark",
-        label: t("Remark"),
-        type: "remarks",
-        value: "",
-      },
-    ]
-  ];
 
   return (
     <>
@@ -207,7 +44,6 @@ const CreateStaff: React.FC = async () => {
       <I18nProvider namespaces={["staff"]}>
         <CreateStaffForm 
           Title={title}
-          fieldLists={fieldLists}
           />
       </I18nProvider>
     </>