diff --git a/src/components/Directory/BucketForm.jsx b/src/components/Directory/BucketForm.jsx
index b45f17a0..8c228298 100644
--- a/src/components/Directory/BucketForm.jsx
+++ b/src/components/Directory/BucketForm.jsx
@@ -43,7 +43,7 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
               Name
             </Label>
             <input
-              className="form-control form-control-sm"
+              className="form-control"
               {...register("name")}
             />
             {errors.name && (
@@ -51,12 +51,12 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
             )}
           </div>
 
-          <div className="mb-3">
+          <div className="my-3">
             <Label htmlFor="description" className="text-start" required>
               Description
             </Label>
             <textarea
-              className="form-control form-control-sm"
+              className="form-control"
               {...register("description")}
               rows="3"
             />
diff --git a/src/components/Directory/BucketList.jsx b/src/components/Directory/BucketList.jsx
index 7e941c1f..2e236278 100644
--- a/src/components/Directory/BucketList.jsx
+++ b/src/components/Directory/BucketList.jsx
@@ -14,7 +14,7 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
   if (!loading && sorted.length === 0) return <div>No buckets found</div>;
 
   return (
-    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
+    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0 text-start">
       {sorted.map((bucket) => (
         <div className="col" key={bucket.id}>
           <div className="card h-100">
diff --git a/src/components/Directory/CardViewContact.jsx b/src/components/Directory/CardViewContact.jsx
index 0b446da0..c7e1d7dd 100644
--- a/src/components/Directory/CardViewContact.jsx
+++ b/src/components/Directory/CardViewContact.jsx
@@ -40,7 +40,7 @@ const CardViewContact = ({
         className="card text-start border-1"
         style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
       >
-        <div className="card-body  px-1 py-2 pb-0">
+        <div className="card-body px-1 py-2 pb-0">
           <div className="d-flex justify-content-between">
             <div
               className={`d-flex align-items-center ${
@@ -61,7 +61,7 @@ const CardViewContact = ({
                   (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
                 }
               />{" "}
-              <span className="text-heading fs-6 ms-2"> {contact?.name}</span>
+              <span className="text-heading fs-6 ms-2 mt-n1"> {contact?.name}</span>
             </div>
             <div>
               {IsActive && (
diff --git a/src/components/Directory/ManageBucket1.jsx b/src/components/Directory/ManageBucket1.jsx
index e222ed75..b0affe68 100644
--- a/src/components/Directory/ManageBucket1.jsx
+++ b/src/components/Directory/ManageBucket1.jsx
@@ -45,7 +45,7 @@ const ManageBucket1 = () => {
   return (
     <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
       <div className="d-flex justify-content-center">
-        <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
+        <h5 className="m-0">Manage Buckets</h5>
       </div>
 
       {action ? (
diff --git a/src/components/Directory/ManageContact.jsx b/src/components/Directory/ManageContact.jsx
index 6215ab61..0610f2b4 100644
--- a/src/components/Directory/ManageContact.jsx
+++ b/src/components/Directory/ManageContact.jsx
@@ -281,7 +281,7 @@ const ManageContact = ({ contactId, closeModal }) => {
                         ]}
                         placeholder="Choose a Label"
                         required
-                        labelKeyKey="name"
+                        labelKey="name"
                         valueKeyKey="id"
                         value={field.value}
                         onChange={field.onChange}
@@ -295,7 +295,7 @@ const ManageContact = ({ contactId, closeModal }) => {
                     </small>
                   )}
                 </div>
-                <div className="col-7 text-start mt-n3">
+                <div className="col-7 text-start mt-n0">
                   <label className="form-label">Email</label>
                   <div className="d-flex align-items-center">
                     <input
@@ -344,7 +344,7 @@ const ManageContact = ({ contactId, closeModal }) => {
                         ]}
                         placeholder="Choose a Label"
                         required
-                        labelKeyKey="name"
+                        labelKey="name"
                         valueKeyKey="id"
                         value={field.value}
                         onChange={field.onChange}
@@ -359,7 +359,7 @@ const ManageContact = ({ contactId, closeModal }) => {
                   )}
                 </div>
 
-                <div className="col-7 text-start mt-n3">
+                <div className="col-7 text-start mt-n0">
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
@@ -406,7 +406,7 @@ const ManageContact = ({ contactId, closeModal }) => {
                   required
                   options={contactCategory ?? []}
                   placeholder="Select Category"
-                  labelKeyKey="name"
+                  labelKey="name"
                   valueKeyKey="id"
                   value={field.value}
                   onChange={field.onChange}
diff --git a/src/components/Documents/ManageDocument.jsx b/src/components/Documents/ManageDocument.jsx
index ba8d8621..9d9bab1a 100644
--- a/src/components/Documents/ManageDocument.jsx
+++ b/src/components/Documents/ManageDocument.jsx
@@ -252,7 +252,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
                     options={DocumentCategories ?? []}
                     placeholder="Select Category"
                     required
-                    labelKeyKey="name"
+                    labelKey="name"
                     valueKeyKey="id"
                     value={field.value}
                     onChange={field.onChange}
@@ -282,7 +282,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
                       options={DocumentTypes ?? []}
                       placeholder="Select Document Type"
                       required
-                      labelKeyKey="name"
+                      labelKey="name"
                       valueKeyKey="id"
                       value={field.value}
                       onChange={field.onChange}
diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index f81d6c60..ebf632c5 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -529,7 +529,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                     a?.name?.localeCompare(b?.name)
                   )}
                   placeholder="Select Role"
-                  labelKeyKey="name"
+                  labelKey="name"
                   valueKeyKey="id"
                   value={field.value}
                   onChange={field.onChange}
diff --git a/src/components/Project/AssignTask.jsx b/src/components/Project/AssignTask.jsx
index f35f830e..88473adc 100644
--- a/src/components/Project/AssignTask.jsx
+++ b/src/components/Project/AssignTask.jsx
@@ -255,7 +255,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               options={organizationList ?? []}
                               placeholder="--Select Organization--"
                               required
-                              labelKeyKey="name"
+                              labelKey="name"
                               valueKeyKey="id"
                               value={field.value || ""}
                               onChange={field.onChange}
@@ -281,7 +281,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               options={serviceList ?? []}
                               placeholder="--Select Service--"
                               required
-                              labelKeyKey="name"
+                              labelKey="name"
                               valueKeyKey="id"
                               value={field.value || ""}
                               onChange={field.onChange}
diff --git a/src/components/Project/ManageProjectInfo.jsx b/src/components/Project/ManageProjectInfo.jsx
index ce0ac369..54712047 100644
--- a/src/components/Project/ManageProjectInfo.jsx
+++ b/src/components/Project/ManageProjectInfo.jsx
@@ -261,7 +261,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
           )}
         </div>
 
-        <div className="col-12 mt-n1">
+        <div className="col-12">
           <Label htmlFor="promoterId" className="form-label">
             Promoter
           </Label>
@@ -296,7 +296,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
           )}
         </div>
 
-        <div className="col-12 mt-n1">
+        <div className="col-12">
           <Label htmlFor="pmcId" className="form-label">
             PMC
           </Label>
@@ -331,7 +331,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
           )}
         </div>
 
-        <div className="d-flex justify-content-between text-secondary text-tiny text-wrap mt-n1">
+        <div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
           <span>
             <i className="bx bx-sm bx-info-circle"></i> Not found PMC and
             Pomoter, find through SPRID or create new
diff --git a/src/components/Project/ProjectPermission.jsx b/src/components/Project/ProjectPermission.jsx
index d3bf7238..befa30ab 100644
--- a/src/components/Project/ProjectPermission.jsx
+++ b/src/components/Project/ProjectPermission.jsx
@@ -142,7 +142,7 @@ const ProjectPermission = () => {
                     }
                     placeholder="-- Select Employee --"
                     required
-                    labelKeyKey="name"
+                    labelKey="name"
                     valueKeyKey="id"
                     value={field.value}
                     onChange={field.onChange}
diff --git a/src/components/Project/Team/TeamAssignToProject.jsx b/src/components/Project/Team/TeamAssignToProject.jsx
index 9fb59c94..c78dcc28 100644
--- a/src/components/Project/Team/TeamAssignToProject.jsx
+++ b/src/components/Project/Team/TeamAssignToProject.jsx
@@ -2,8 +2,11 @@ import React, { useState } from "react";
 import TeamEmployeeList from "./TeamEmployeeList";
 import { useOrganization } from "../../../hooks/useDirectory";
 import { useOrganizationsList } from "../../../hooks/useOrganization";
-import {  useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
+import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
 import { useSelectedProject } from "../../../slices/apiDataManager";
+import { AppFormController } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
+import { useForm } from "react-hook-form";
 
 const TeamAssignToProject = ({ closeModal }) => {
   const [searchText, setSearchText] = useState("");
@@ -11,54 +14,48 @@ const TeamAssignToProject = ({ closeModal }) => {
   const project = useSelectedProject();
   const { data, isLoading, isError, error } =
     useProjectAssignedOrganizationsName(project);
+  const { control, watch, formState: { errors } } = useForm({
+    defaultValues: { organizationId: "" },
+  });
   return (
     <div className="container">
       {/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
       <h5 className="mb-4">Assign Employee To Project</h5>
 
-      <div className="row align-items-center gx-5">
-        <div className="col">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
-            {isLoading ? (
-              <select className="form-select form-select-sm w-100" disabled>
-                <option value="">Loading...</option>
-              </select>
-            ) : data?.length === 0 ? (
-              <p className="mb-0 badge bg-label-secondary">No organizations found</p>
-            ) : (
-              <>
-                <label
-                  htmlFor="organization"
-                  className="form-label mb-0 text-nowrap"
-                >
-                  Select Organization
-                </label>
-                <select
-                  id="organization"
-                  className="form-select form-select-sm w-100"
-                  value={selectedOrg || ""}
-                  onChange={(e) => setSelectedOrg(e.target.value)}
-                >
-                  <option value="">Select</option>
-                  {data.map((org) => (
-                    <option key={org.id} value={org.id}>
-                      {org.name}
-                    </option>
-                  ))}
-                </select>
-              </>
+      <div className="row align-items-center gx-5 text-start">
+          <div className="col-12 col-md-6 mb-2">
+            <AppFormController
+              name="organizationId"
+              control={control}
+              rules={{ required: "Organization is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Organization"
+                  options={data ?? []}
+                  placeholder="Choose an Organization"
+                  required
+                  labelKey="name"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={isLoading}
+                  className="m-0 w-100"
+                />
+              )}
+            />
+            {errors.organizationId && (
+              <small className="danger-text">{errors.organizationId.message}</small>
             )}
           </div>
-        </div>
-        <div className="col">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
-            <label htmlFor="search" className="form-label mb-0 text-nowrap">
+        <div className="col-12 col-md-6 mt-n5">
+          <div className="d-flex flex-column">
+            <label htmlFor="search" className="form-label mb-1">
               Search Employee
             </label>
             <input
               id="search"
               type="search"
-              className="form-control form-control-sm w-100"
+              className="form-control w-100"
               placeholder="Search..."
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
diff --git a/src/components/Project/Team/Teams.jsx b/src/components/Project/Team/Teams.jsx
index dfd4a86a..ff919a69 100644
--- a/src/components/Project/Team/Teams.jsx
+++ b/src/components/Project/Team/Teams.jsx
@@ -22,6 +22,9 @@ import { useSelectedProject } from "../../../slices/apiDataManager";
 import GlobalModel from "../../common/GlobalModel";
 import TeamAssignToProject from "./TeamAssignToProject";
 import { SpinnerLoader } from "../../common/Loader";
+import { AppFormController } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
+import { useForm } from "react-hook-form";
 
 const Teams = () => {
   const selectedProject = useSelectedProject();
@@ -30,9 +33,15 @@ const Teams = () => {
   const [employees, setEmployees] = useState([]);
   const [selectedEmployee, setSelectedEmployee] = useState(null);
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
-  const [searchTerm, setSearchTerm] = useState(""); // State for search term
-  const [selectedService, setSelectedService] = useState(null);
   const [activeEmployee, setActiveEmployee] = useState(false);
+  const { control, watch } = useForm({
+    defaultValues: {
+      selectedService: "",
+      searchTerm: "",
+    },
+  });
+  const selectedService = watch("selectedService");
+  const searchTerm = watch("searchTerm");
 
   const { data: assignedServices, isLoading: servicesLoading } =
     useProjectAssignedServices(selectedProject);
@@ -95,26 +104,23 @@ const Teams = () => {
 
   const filteredEmployees = useMemo(() => {
     if (!projectEmployees) return [];
-
     let filtered = projectEmployees;
 
     if (activeEmployee) {
       filtered = projectEmployees.filter((emp) => !emp.isActive);
     }
 
-    // Apply search filter if present
     if (searchTerm?.trim()) {
       const lower = searchTerm.toLowerCase();
       filtered = filtered.filter((emp) => {
         const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
-        const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
-        return fullName.includes(lower) || jobRole.includes(lower);
+        return fullName.includes(lower) || (emp.jobRoleName ?? "").toLowerCase().includes(lower);
       });
     }
 
     return filtered;
   }, [projectEmployees, searchTerm, activeEmployee]);
-  const handleSearch = (e) => setSearchTerm(e.target.value);
+
   const employeeHandler = useCallback(
     (msg) => {
       if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
@@ -124,6 +130,7 @@ const Teams = () => {
     [filteredEmployees, refetch]
   );
 
+
   useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
@@ -154,62 +161,68 @@ const Teams = () => {
       <div className="card card-action mb-6">
         <div className="card-body">
           <div className="row align-items-center justify-content-between mb-4 g-3">
-            <div className="col-md-6 col-12 algin-items-center">
-              <div className="d-flex flex-wrap align-items-center gap-3">
-                <div>
-                  {!servicesLoading && (
-                    <>
-                      {assignedServices?.length === 1 && (
-                        <h5 className="mb-2">{assignedServices[0].name}</h5>
-                      )}
-
-                      {assignedServices?.length > 1 && (
-                        <select
-                          className="form-select form-select-sm"
-                          aria-label="Select Service"
-                          value={selectedService}
-                          onChange={handleServiceChange}
-                        >
-                          <option value="">All Services</option>
-                          {assignedServices.map((service) => (
-                            <option key={service.id} value={service.id}>
-                              {service.name}
-                            </option>
-                          ))}
-                        </select>
-                      )}
-                    </>
+            <div className="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
+              {!servicesLoading && assignedServices && (
+                <>
+                  {assignedServices.length === 1 && (
+                    <h5 className="mb-2">{assignedServices[0].name}</h5>
                   )}
-                </div>
 
-                <div className="form-check form-switch d-flex align-items-center text-nowrap">
-                  <input
-                    type="checkbox"
-                    className="form-check-input"
-                    id="activeEmployeeSwitch"
-                    checked={activeEmployee}
-                    onChange={handleToggleActive}
-                  />
-                  <label
-                    className="form-check-label ms-2"
-                    htmlFor="activeEmployeeSwitch"
-                  >
-                    {activeEmployee ? "Active Employees" : "In-active Employees"}
-                  </label>
-                </div>
+                  {assignedServices.length > 1 && (
+                    <div className="col-12 col-md-6 mb-2 text-start">
+                      <AppFormController
+                        name="selectedService"
+                        control={control}
+                        render={({ field }) => (
+                          <SelectField
+                            label="Select Service"
+                            options={[{ id: "", name: "All Services" }, ...assignedServices]} 
+                            placeholder="Choose a Service"
+                            labelKey="name"
+                            valueKey="id"
+                            value={field.value}
+                            onChange={field.onChange}
+                            isLoading={servicesLoading}
+                            className="w-100"
+                          />
+                        )}
+                      />
+                    </div>
+                  )}
+                </>
+              )}
+
+
+              <div className="form-check form-switch d-flex align-items-center text-nowrap">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  id="activeEmployeeSwitch"
+                  checked={activeEmployee}
+                  onChange={handleToggleActive}
+                />
+                <label className="form-check-label ms-2" htmlFor="activeEmployeeSwitch">
+                  {activeEmployee ? "Active Employees" : "In-active Employees"}
+                </label>
               </div>
             </div>
 
-            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
-              <input
-                type="search"
-                className="form-control form-control-sm"
-                placeholder="Search by Name or Role"
-                aria-controls="DataTables_Table_0"
-                style={{ maxWidth: "200px" }}
-                value={searchTerm}
-                onChange={handleSearch}
-              />
+            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3 mt-n1">
+              <div className="col-12 col-md-4">
+                <AppFormController
+                  name="searchTerm"
+                  control={control}
+                  render={({ field }) => (
+                    <input
+                      type="search"
+                      className="form-control form-control-sm w-100"
+                      placeholder="Search by Name or Role"
+                      value={field.value}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+              </div>
 
               {HasAssignUserPermission && (
                 <button
@@ -246,74 +259,73 @@ const Teams = () => {
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
-                  {filteredEmployees &&
-                    filteredEmployees
-                      .sort((a, b) =>
-                        (a.firstName || "").localeCompare(b.firstName || "")
-                      )
-                      .map((emp) => (
-                        <tr key={emp.id}>
-                          <td>
-                            <div className="d-flex justify-content-start align-items-center">
-                              <Avatar
-                                firstName={emp.firstName}
-                                lastName={emp.lastName}
-                              />
-                              <div className="d-flex flex-column">
-                                <a
-                                  onClick={() =>
-                                    navigate(
-                                      `/employee/${emp.employeeId}?for=attendance`
-                                    )
-                                  }
-                                  className="text-heading text-truncate cursor-pointer"
-                                >
-                                  <span className="fw-normal">
-                                    {emp.firstName}{"  "}
-                                    {emp.lastName}
-                                  </span>
-                                </a>
-                              </div>
-                            </div>
-                          </td>
-
-                          <td>{emp.serviceName || "N/A"}</td>
-                          <td>{emp.organizationName || "N/A"}</td>
-
-                          <td>
-                            {moment(emp.allocationDate).format("DD-MMM-YYYY")}
-                          </td>
-                          {activeEmployee && (
-                            <td>
-                              {emp.reAllocationDate
-                                ? moment(emp.reAllocationDate).format(
-                                  "DD-MMM-YYYY"
-                                )
-                                : "Present"}
-                            </td>
-                          )}
-                          <td>
-                            <span className="badge bg-label-primary me-1">
-                              {getJobRole(emp.jobRoleId)}
-                            </span>
-                          </td>
-                          <td>
-                            {emp.isActive ? (
-                              <button
-                                aria-label="Delete"
-                                type="button"
-                                title="Remove from project"
-                                className="btn p-0 dropdown-toggle hide-arrow"
-                                onClick={() => setSelectedEmployee(emp)}
+                  {filteredEmployees
+                    .sort((a, b) =>
+                      (a.firstName || "").localeCompare(b.firstName || "")
+                    )
+                    .map((emp) => (
+                      <tr key={emp.id}>
+                        <td>
+                          <div className="d-flex justify-content-start align-items-center">
+                            <Avatar
+                              firstName={emp.firstName}
+                              lastName={emp.lastName}
+                            />
+                            <div className="d-flex flex-column">
+                              <a
+                                onClick={() =>
+                                  navigate(
+                                    `/employee/${emp.employeeId}?for=attendance`
+                                  )
+                                }
+                                className="text-heading text-truncate cursor-pointer"
                               >
-                                <i className="bx bx-trash me-1 text-danger"></i>
-                              </button>
-                            ) : (
-                              <span>Not in project</span>
-                            )}
+                                <span className="fw-normal">
+                                  {emp.firstName}{"  "}
+                                  {emp.lastName}
+                                </span>
+                              </a>
+                            </div>
+                          </div>
+                        </td>
+
+                        <td>{emp.serviceName || "N/A"}</td>
+                        <td>{emp.organizationName || "N/A"}</td>
+
+                        <td>
+                          {moment(emp.allocationDate).format("DD-MMM-YYYY")}
+                        </td>
+                        {activeEmployee && (
+                          <td>
+                            {emp.reAllocationDate
+                              ? moment(emp.reAllocationDate).format(
+                                "DD-MMM-YYYY"
+                              )
+                              : "Present"}
                           </td>
-                        </tr>
-                      ))}
+                        )}
+                        <td>
+                          <span className="badge bg-label-primary me-1">
+                            {getJobRole(emp.jobRoleId)}
+                          </span>
+                        </td>
+                        <td>
+                          {emp.isActive ? (
+                            <button
+                              aria-label="Delete"
+                              type="button"
+                              title="Remove from project"
+                              className="btn p-0 dropdown-toggle hide-arrow"
+                              onClick={() => setSelectedEmployee(emp)}
+                            >
+                              <i className="bx bx-trash me-1 text-danger"></i>
+                            </button>
+                          ) : (
+                            <span>Not in project</span>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
                 </tbody>
               </table>
             )}
diff --git a/src/components/ServiceProject/ManageServiceProject.jsx b/src/components/ServiceProject/ManageServiceProject.jsx
index ed1ca6d4..d2423e0b 100644
--- a/src/components/ServiceProject/ManageServiceProject.jsx
+++ b/src/components/ServiceProject/ManageServiceProject.jsx
@@ -135,7 +135,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
                       options={organization?.data ?? []}
                       placeholder="Select Client"
                       required
-                      labelKeyKey="name"
+                      labelKey="name"
                       valueKeyKey="id"
                       value={field.value}
                       onChange={field.onChange}
@@ -147,7 +147,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               </div>
 
               <i
-                className="bx bx-plus-circle bx-xs cursor-pointer text-primary mt-n3"
+                className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
                 onClick={() => {
                   onClose();
                   openOrgModal({ startStep: 2 });
@@ -317,7 +317,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             )}
           </div>
         </div>
-        <div className="d-flex justify-content-end gap-4 mt-4">
+        <div className="d-flex justify-content-end gap-2 mt-4">
           <button
             className="btn btn-sm  btn-outline-secondary"
             disabled={isPending || isUpdating}
diff --git a/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx b/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
index 60d289f9..7994d718 100644
--- a/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
@@ -68,7 +68,7 @@ const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
                 options={data ?? []}
                 placeholder="Choose a Status"
                 required
-                labelKeyKey="name"
+                labelKey="name"
                 valueKeyKey="id"
                 value={field.value}
                 onChange={field.onChange}
diff --git a/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx b/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
index d0c1eec8..d166ba4a 100644
--- a/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
@@ -236,8 +236,8 @@ const ManageJob = ({ Job }) => {
                     options={data ?? []}
                     placeholder="Choose a Status"
                     required
-                    labelKeyKey="name"
-                    valueKeyKey="id"
+                    labelKey="name"
+                    valueKey="id"
                     value={field.value}
                     onChange={field.onChange}
                     isLoading={isLoading}
diff --git a/src/components/Tenant/ContactInfro.jsx b/src/components/Tenant/ContactInfro.jsx
index d4070a16..33d4ef6a 100644
--- a/src/components/Tenant/ContactInfro.jsx
+++ b/src/components/Tenant/ContactInfro.jsx
@@ -32,7 +32,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="firstName"
           type="text"
-          className={`form-control form-control-sm`}
+          className={`form-control `}
           {...register("firstName")}
         />
         {errors.firstName && (
@@ -46,7 +46,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="lastName"
           type="text"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("lastName")}
         />
         {errors.lastName && (
@@ -60,7 +60,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="email"
           type="email"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("email")}
         />
         {errors.email && (
@@ -74,7 +74,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="contactNumber"
           type="text"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("contactNumber")}
           inputMode="tel"
           placeholder="+91 9876543210"
diff --git a/src/components/Tenant/EditProfile.jsx b/src/components/Tenant/EditProfile.jsx
index 41a99f27..c6bc793a 100644
--- a/src/components/Tenant/EditProfile.jsx
+++ b/src/components/Tenant/EditProfile.jsx
@@ -7,6 +7,8 @@ import { LogoUpload } from './LogoUpload';
 import showToast from '../../services/toastService';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { EditTenant } from './TenantSchema';
+import { AppFormController } from '../../hooks/appHooks/useAppForm';
+import SelectField from '../common/Forms/SelectField';
 
 const EditProfile = ({ TenantId, onClose }) => {
   const { data, isLoading, isError, error } = useTenantDetails(TenantId);
@@ -37,7 +39,7 @@ const EditProfile = ({ TenantId, onClose }) => {
     }
   });
 
-  const { register, reset, handleSubmit, formState: { errors } } = methods;
+  const { register, control, reset, handleSubmit, formState: { errors } } = methods;
 
   const onSubmit = (formData) => {
     const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
@@ -74,93 +76,122 @@ const EditProfile = ({ TenantId, onClose }) => {
       <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
         <h5>Edit Tenant</h5>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-n2 text-start">
           <Label htmlFor="firstName" required>First Name</Label>
-          <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
+          <input id="firstName" type="text" className="form-control " {...register("firstName")} inputMode='text' />
           {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-n2 text-start">
           <Label htmlFor="lastName" required>Last Name</Label>
-          <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
+          <input id="lastName" type="text" className="form-control " {...register("lastName")} />
           {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
         </div>
 
 
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
           <Label htmlFor="contactNumber" required>Contact Number</Label>
-          <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
+          <input id="contactNumber" type="text" className="form-control " {...register("contactNumber")} inputMode="tel"
             placeholder="+91 9876543210" />
           {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
           <Label htmlFor="domainName" >Domain Name</Label>
-          <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
+          <input id="domainName" type="text" className="form-control " {...register("domainName")} />
           {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
           <Label htmlFor="taxId" >Tax ID</Label>
-          <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
+          <input id="taxId" type="text" className="form-control " {...register("taxId")} />
           {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
           <Label htmlFor="officeNumber" >Office Number</Label>
-          <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
+          <input id="officeNumber" type="text" className="form-control " {...register("officeNumber")} />
           {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-1 text-start">
-          <Label htmlFor="industryId" required>Industry</Label>
-          <select className="form-select form-select-sm" {...register("industryId")}>
-            {industryLoading ? <option value="">Loading...</option> :
-              Industries?.map((indu) => (
-                <option key={indu.id} value={indu.id}>{indu.name}</option>
-              ))
-            }
-          </select>
-          {errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
-        </div>
-
-        <div className="col-sm-6 mt-1 text-start">
-          <Label htmlFor="reference">Reference</Label>
-          <select className="form-select form-select-sm" {...register("reference")}>
-            {reference.map((org) => (
-              <option key={org.val} value={org.val}>{org.name}</option>
-            ))}
-          </select>
-          {errors.reference && <div className="danger-text">{errors.reference.message}</div>}
-        </div>
         <div className="col-sm-6 text-start">
-          <Label htmlFor="organizationSize" required>
-            Organization Size
-          </Label>
+          <AppFormController
+            name="industryId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Industry"
+                options={Industries ?? []}
+                placeholder={industryLoading ? "Loading..." : "Choose an Industry"}
+                required
+                labelKey="name"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                isLoading={industryLoading}
+                className="m-0 w-100"
+              />
+            )}
+          />
 
-          <select
-            className="form-select form-select-sm"
-            {...register("organizationSize")}
-          >
-            {orgSize.map((org) => (
-              <option key={org.val} value={org.val}>
-                {org.name}
-              </option>
-            ))}
-          </select>
-          {errors.organizationSize && (
-            <div className="danger-text">{errors.organizationSize.message}</div>
+          {errors.industryId && (
+            <small className="danger-text">{errors.industryId.message}</small>
           )}
         </div>
 
-        <div className="col-12 mt-1 text-start">
+
+        <div className="col-sm-6 text-start">
+          <AppFormController
+            name="reference"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Reference"
+                placeholder="Select Reference"
+                options={reference ?? []}
+                labelKey="name"
+                valueKey="val"
+                value={field.value}
+                onChange={field.onChange}
+                className="shadow-none border py-1 px-2 small m-0"                
+              />
+            )}
+          />
+          {errors.reference && (
+            <small className="danger-text">{errors.reference.message}</small>
+          )}
+        </div>
+        <div className="col-sm-6 text-start">
+          <AppFormController
+            name="organizationSize"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Organization Size"
+                placeholder="Select Organization Size"
+                options={orgSize ?? []}
+                labelKey="name"
+                valueKey="val"
+                value={field.value}
+                onChange={field.onChange}
+                className="shadow-none border py-1 px-2 small m-0"
+                required
+              />
+            )}
+          />
+          {errors.organizationSize && (
+            <small className="danger-text">{errors.organizationSize.message}</small>
+          )}
+        </div>
+
+        <div className="col-12  text-start">
           <Label htmlFor="billingAddress" required>Billing Address</Label>
           <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
           {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
         </div>
 
-        <div className="col-12 mt-1 text-start">
+        <div className="col-12  text-start">
           <Label htmlFor="description">Description</Label>
           <textarea id="description" className="form-control" {...register("description")} rows={2} />
           {errors.description && <div className="danger-text">{errors.description.message}</div>}
diff --git a/src/components/Tenant/OrganizationInfo.jsx b/src/components/Tenant/OrganizationInfo.jsx
index 9cfdcb7f..7bbf26b2 100644
--- a/src/components/Tenant/OrganizationInfo.jsx
+++ b/src/components/Tenant/OrganizationInfo.jsx
@@ -8,6 +8,9 @@ import { orgSize, reference } from "../../utils/constants";
 import moment from "moment";
 import { useGlobalServices } from "../../hooks/masterHook/useMaster";
 import SelectMultiple from "../common/SelectMultiple";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
+import { fill } from "pdf-lib";
 
 const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
@@ -53,7 +56,8 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       // onSubmitTenant(data);
       // onNext();
       const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
-      CreateTenant(tenantPayload);
+      // CreateTenant(tenantPayload);
+      console.log(tenantPayload)
     }
   };
 
@@ -67,7 +71,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
 
   return (
-    <div className="row g-2 text-start">
+    <div className="row g-6 text-start">
       <div className="col-sm-6">
         <Label htmlFor="organizationName" required>
           Organization Name
@@ -75,7 +79,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
         <input
           id="organizationName"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("organizationName")}
         />
         {errors.organizationName && (
@@ -89,7 +93,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="officeNumber"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("officeNumber")}
         />
         {errors.officeNumber && (
@@ -103,7 +107,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="domainName"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("domainName")}
         />
         {errors.domainName && (
@@ -117,7 +121,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="taxId"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("taxId")}
         />
         {errors.taxId && (
@@ -131,6 +135,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <DatePicker
           name="onBoardingDate"
+          size="md"
           control={control}
           placeholder="DD-MM-YYYY"
           maxDate={new Date()}
@@ -143,73 +148,79 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         )}
       </div>
 
-      <div className="col-sm-6">
-        <Label htmlFor="organizationSize" required>
-          Organization Size
-        </Label>
-
-        <select
-          id="organizationSize"
-          className="form-select shadow-none border py-1 px-2"
-          style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
-          {...register("organizationSize", { required: "Organization size is required" })}
-        >
-          {orgSize.map((org) => (
-            <option key={org.val} value={org.val}>
-              {org.name}
-            </option>
-          ))}
-        </select>
-
+      <div className="col-sm-6 mb-2 mb-md-4">
+        <AppFormController
+          name="organizationSize"
+          control={control}
+          render={({ field }) => (
+            <SelectField
+              label="Organization Size"
+              placeholder="Select Organization Size"
+              options={orgSize ?? []}
+              labelKey="name"
+              valueKey="val"
+              value={field.value}
+              onChange={field.onChange}
+              className="shadow-none border py-1 px-2 small m-0"
+              required
+            />
+          )}
+        />
         {errors.organizationSize && (
-          <div className="danger-text">{errors.organizationSize.message}</div>
+          <small className="danger-text">{errors.organizationSize.message}</small>
         )}
       </div>
 
-
-      <div className="col-sm-6">
-        <Label htmlFor="industryId" required>
-          Industry
-        </Label>
-        <select
-          id="industryId"
-          className="form-select shadow-none border py-1 px-2 small"
-          {...register("industryId")}
-        >
-          {industryLoading ? (
-            <option value="">Loading...</option>
-          ) : (
-            data?.map((indu) => (
-              <option key={indu.id} value={indu.id}>
-                {indu.name}
-              </option>
-            ))
+      <div className="col-sm-6 mt-n3">
+        <AppFormController
+          name="industryId"
+          control={control} // make sure `control` comes from useForm
+          render={({ field }) => (
+            <SelectField
+              label="Industry"
+              placeholder={industryLoading ? "Loading..." : "Select Industry"}
+              options={data ?? []}
+              labelKey="name"
+              valueKeyKey="id"
+              value={field.value}
+              onChange={field.onChange}
+              isLoading={industryLoading}
+              className="shadow-none border py-1 px-2 small"
+              required
+            />
           )}
-        </select>
+        />
+
         {errors.industryId && (
           <div className="danger-text">{errors.industryId.message}</div>
         )}
       </div>
 
-      <div className="col-sm-6">
-        <Label htmlFor="reference" required>Reference</Label>
-        <select
-          id="reference"
-          className="form-select shadow-none border py-1 px-2 small"
-          {...register("reference")}
-        >
-          {reference.map((org) => (
-            <option key={org.val} value={org.val}>
-              {org.name}
-            </option>
-          ))}
-        </select>
+      <div className="col-sm-6 mb-2 mb-md-4 mt-n3">
+        <AppFormController
+          name="reference"
+          control={control}
+          render={({ field }) => (
+            <SelectField
+              label="Reference"
+              placeholder="Select Reference"
+              options={reference ?? []}
+              labelKey="name"
+              valueKey="val"
+              value={field.value}
+              onChange={field.onChange}
+              className="shadow-none border py-1 px-2 small m-0"
+              required
+            />
+          )}
+        />
         {errors.reference && (
-          <div className="danger-text">{errors.reference.message}</div>
+          <small className="danger-text">{errors.reference.message}</small>
         )}
       </div>
 
-      <div className="col-sm-6">
+
+      <div className="col-sm-6 mt-n3">
         <SelectMultiple
           name="serviceIds"
           label="Services"
@@ -229,7 +240,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         <textarea
           id="description"
           rows={3}
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("description")}
         />
         {errors.description && (
diff --git a/src/components/Tenant/TenantForm.jsx b/src/components/Tenant/TenantForm.jsx
index 0b70d453..fbd04f06 100644
--- a/src/components/Tenant/TenantForm.jsx
+++ b/src/components/Tenant/TenantForm.jsx
@@ -43,6 +43,7 @@ const TenantForm = () => {
   const tenantForm = useForm({
     resolver: zodResolver(newTenantSchema),
     defaultValues: tenantDefaultValues,
+    mode: "onChange",
   });
 
   const subscriptionForm = useForm({
diff --git a/src/components/Tenant/TenantsList.jsx b/src/components/Tenant/TenantsList.jsx
index 089ffe44..d82cb6f2 100644
--- a/src/components/Tenant/TenantsList.jsx
+++ b/src/components/Tenant/TenantsList.jsx
@@ -114,9 +114,8 @@ const TenantsList = ({
       align: "text-center",
       getValue: (t) => (
         <span
-          className={`badge ${
-            getTenantStatus(t.tenantStatus?.id) || "secondary"
-          }`}
+          className={`badge ${getTenantStatus(t.tenantStatus?.id) || "secondary"
+            }`}
         >
           {t.tenantStatus?.name || "Unknown"}
         </span>
@@ -151,13 +150,12 @@ const TenantsList = ({
             <tbody>
               {data?.data.length > 0 ? (
                 data.data.map((tenant) => (
-                  <tr key={tenant.id}>
+                  <tr key={tenant.id} style={{ height: "50px" }}>
                     {TenantColumns.map((col) => (
                       <td
                         key={col.key}
-                        className={`d-table-cell px-3 py-2 align-middle ${
-                          col.align ?? ""
-                        }`}
+                        className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
+                          }`}
                       >
                         {col.customRender
                           ? col.customRender(tenant)
diff --git a/src/components/collections/ManageCollection.jsx b/src/components/collections/ManageCollection.jsx
index ae5a6e6a..37337281 100644
--- a/src/components/collections/ManageCollection.jsx
+++ b/src/components/collections/ManageCollection.jsx
@@ -219,7 +219,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
             </div>
 
 
-            <div className="col-12 col-md-6 mb-2">
+            <div className="col-12 col-md-6 mb-4">
               <Label required>Title</Label>
               <input
                 type="text"
@@ -230,7 +230,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 <small className="danger-text">{errors.title.message}</small>
               )}
             </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-2">
               <Label required>Invoice Number</Label>
               <input
                 type="text"
@@ -256,7 +256,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-4">
               <Label required>Invoice Date</Label>
               <DatePicker
                 className="w-100"
@@ -271,7 +271,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-4">
               <Label required>Expected Payment Date</Label>
               <DatePicker
                 className="w-100"
@@ -286,7 +286,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-2">
               <Label required>Submission Date (Client)</Label>
               <DatePicker
                 className="w-100"
@@ -340,7 +340,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 my-2 text-start  mb-2">
+            <div className="col-12 my-2 text-start mb-2">
               <div className="col-md-12">
                 <Label htmlFor="description" className="form-label" required>
                   Description
@@ -359,7 +359,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               </div>
             </div>
 
-            <div className="col-12">
+            <div className="col-12 my-3">
               <Label className="form-label" required>
                 Upload Bill{" "}
               </Label>
diff --git a/src/components/master/CreateRole.jsx b/src/components/master/CreateRole.jsx
index 6f25e4a1..530a8081 100644
--- a/src/components/master/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@@ -228,7 +228,7 @@ const CreateRole = ({ modalType, onClose }) => {
       </div>
 
       {masterFeatures && (
-        <div className="col-12 text-end">
+        <div className="col-12 text-end mt-5">
            <button
             type="reset"
             className="btn btn-sm btn-label-secondary me-3"
diff --git a/src/components/master/CreateWorkCategory.jsx b/src/components/master/CreateWorkCategory.jsx
index 6de74110..d4d54d73 100644
--- a/src/components/master/CreateWorkCategory.jsx
+++ b/src/components/master/CreateWorkCategory.jsx
@@ -90,7 +90,7 @@ const CreateWorkCategory = ({ onClose }) => {
           />
           {errors.name && <p className="text-danger">{errors.name.message}</p>}
         </div> 
-        <div className="col-12 col-md-12 text-start">
+        <div className="col-12 col-md-12 text-start my-3">
           <Label className="form-label" htmlFor="description" required>Description</Label>
         <textarea
           rows="3"
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 12bf2bc9..40368997 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -276,7 +276,7 @@ const EditMaster = ({ master, onClose }) => {
 
 
 
-      <div className="col-12 text-end mt-3">
+      <div className="col-12 text-end mt-5">
         <button
           type="button"
           className="btn btn-sm btn-label-secondary me-3"
diff --git a/src/components/master/ManageDocumentCategory.jsx b/src/components/master/ManageDocumentCategory.jsx
index cf3644f9..36cba3f5 100644
--- a/src/components/master/ManageDocumentCategory.jsx
+++ b/src/components/master/ManageDocumentCategory.jsx
@@ -9,6 +9,8 @@ import {
   useUpdateDocumentCategory,
 } from "../../hooks/masterHook/useMaster";
 import Label from "../common/Label";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
   ([key, value]) => ({ key, value })
@@ -34,6 +36,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
     register,
     handleSubmit,
     reset,
+    control,
     formState: { errors },
   } = methods;
 
@@ -89,7 +92,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
               <input
                 type="text"
                 {...register("name")}
-                className={`form-control form-control-sm `}
+                className={`form-control  `}
               />
               {errors.name && (
                 <p className="danger-text">{errors.name.message}</p>
@@ -97,36 +100,43 @@ const ManageDocumentCategory = ({ data, onClose }) => {
             </div>
 
             <div className="col-12">
-              <Label required >Select Entity</Label>
-              <select
-                className="form-select form-select-sm"
-                {...register("entityTypeId")}
-              >
-                <option value="" disabled>Select entity</option>
-                {Document_Entity.map((entity) => (
-                  <option key={entity.key} value={entity.value}>
-                    {entity.key}
-                  </option>
-                ))}
-              </select>
+              <AppFormController
+                name="entityTypeId"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="Select Entity"
+                    options={Document_Entity ?? []}
+                    placeholder="Select entity"
+                    required
+                    labelKey="key"
+                    valueKey="value"
+                    value={field.value}
+                    onChange={field.onChange}
+                    className="m-0 w-100"
+                  />
+                )}
+              />
+
               {errors.entityTypeId && (
                 <p className="danger-text">{errors.entityTypeId.message}</p>
               )}
             </div>
 
-            <div className="col-12">
+
+            <div className="col-12 my-3">
               <Label required >Description</Label>
               <textarea
                 rows="3"
                 {...register("description")}
-                className={`form-control form-control-sm`}
+                className={`form-control `}
               />
               {errors.description && (
                 <p className="danger-text">{errors.description.message}</p>
               )}
             </div>
 
-            <div className="d-flex flex-row justify-content-end gap-3 ">
+            <div className="d-flex flex-row justify-content-end gap-3">
               <button
                 type="button"
                 className="btn btn-sm btn-label-secondary"
@@ -137,16 +147,16 @@ const ManageDocumentCategory = ({ data, onClose }) => {
               </button>
               <button
                 type="submit"
-                className="btn btn-sm btn-primary me-3"
+                className="btn btn-sm btn-primary"
                 disabled={isPending || Updating}
               >
                 {isPending || Updating
                   ? "Please Wait..."
                   : data
-                  ? "Update"
-                  : "Submit"}
+                    ? "Update"
+                    : "Submit"}
               </button>
-              
+
             </div>
           </form>
         </div>
diff --git a/src/components/master/ManageDocumentType.jsx b/src/components/master/ManageDocumentType.jsx
index 200b0e17..1b426756 100644
--- a/src/components/master/ManageDocumentType.jsx
+++ b/src/components/master/ManageDocumentType.jsx
@@ -5,6 +5,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useCreateDocumentType, useDocumentCategories, useUpdateDocumentType } from "../../hooks/masterHook/useMaster";
 import { DOCUMENTS_ENTITIES } from "../../utils/constants";
 import Label from "../common/Label";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 
 export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
@@ -33,21 +35,22 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
       isValidationRequired: true,
       isMandatory: true,
       documentCategoryId: "",
-      entityTypeId:""
+      entityTypeId: ""
     },
   });
-   const {
+  const {
     register,
     handleSubmit,
-    reset,watch,
+    reset, watch,
+    control,
     formState: { errors },
   } = methods;
 
 
   const selectedDocumentEntity = watch("entityTypeId")
-  const {DocumentCategories,isLoading} = useDocumentCategories(selectedDocumentEntity)
+  const { DocumentCategories, isLoading } = useDocumentCategories(selectedDocumentEntity)
+
 
- 
 
   const { mutate: createDocType, isPending: creating } = useCreateDocumentType(() =>
     onClose?.()
@@ -55,15 +58,15 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
   const { mutate: updateDocType, isPending: updating } = useUpdateDocumentType(() =>
     onClose?.()
   );
-const onSubmit = (payload) => {
-  const { entityTypeId, ...rest } = payload;
+  const onSubmit = (payload) => {
+    const { entityTypeId, ...rest } = payload;
 
-  if (data) {
-    updateDocType({ id: data.id, payload: { ...rest, id: data.id } });
-  } else {
-    createDocType(rest);
-  }
-};
+    if (data) {
+      updateDocType({ id: data.id, payload: { ...rest, id: data.id } });
+    } else {
+      createDocType(rest);
+    }
+  };
 
 
   useEffect(() => {
@@ -76,7 +79,7 @@ const onSubmit = (payload) => {
         isValidationRequired: data.isValidationRequired ?? true,
         isMandatory: data.isMandatory ?? true,
         documentCategoryId: data.documentCategory?.id ?? "",
-        entityTypeId:data.documentCategory?.entityTypeId ?? ""
+        entityTypeId: data.documentCategory?.entityTypeId ?? ""
       });
     }
   }, [data]);
@@ -96,7 +99,7 @@ const onSubmit = (payload) => {
           <input
             type="text"
             {...register("name")}
-            className={`form-control form-control-sm `}
+            className={`form-control  `}
           />
           {errors.name && <a className="text-danger">{errors.name.message}</a>}
         </div>
@@ -107,7 +110,7 @@ const onSubmit = (payload) => {
           <input
             type="text"
             {...register("regexExpression")}
-            className="form-control form-control-sm"
+            className="form-control "
           />
         </div>
 
@@ -117,7 +120,7 @@ const onSubmit = (payload) => {
           <input
             type="text"
             {...register("allowedContentType")}
-            className={`form-control form-control form-control-sm`}
+            className={`form-control form-control `}
           />
           {errors.allowedContentType && (
             <a className="text-danger">{errors.allowedContentType.message}</a>
@@ -130,7 +133,7 @@ const onSubmit = (payload) => {
           <input
             type="number"
             {...register("maxSizeAllowedInMB", { valueAsNumber: true })}
-            className={`form-control form-control-sm`}
+            className={`form-control `}
           />
           {errors.maxSizeAllowedInMB && (
             <a className="text-danger">{errors.maxSizeAllowedInMB.message}</a>
@@ -156,47 +159,59 @@ const onSubmit = (payload) => {
           />
           <label className="form-check-label">Mandatory</label>
         </div>
-       <div className="col-12">
-          <label className="form-label">Document Entity</label>
-          <select
-            {...register("entityTypeId")}
-            className={`form-select form-select-sm`}
-          >
-            <option value="">-- Select Category --</option>
-            {Document_Entity.map((entity) => (
-              <option key={entity.key} value={entity.value}>
-                {entity.key}
-              </option>
-            ))}
-          </select>
-          {errors.entityTypeId && (
-            <a className="text-danger">{errors.entityTypeId.message}</a>
-          )}
-        </div>
-        {/* Category */}
+        {/* Document Entity */}
         <div className="col-12">
-          <Label required> Document Category</Label>
-          <select
-            {...register("documentCategoryId")}
-            className={`form-select form-select-sm`}
-          >
-
-            {isLoading && <option value="" disabled>Loading....</option> }
-            <option value="">-- Select Category --</option>
-            {!isLoading && DocumentCategories?.map((cat) => (
-              <option key={cat.id} value={cat.id}>
-                {cat.name}
-              </option>
-            ))}
-          </select>
-          {errors.documentCategoryId && (
-            <a className="text-danger">{errors.documentCategoryId.message}</a>
+          <AppFormController
+            name="entityTypeId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Document Entity"
+                options={Document_Entity ?? []}
+                placeholder="-- Select Category --"
+                required
+                labelKey="key"
+                valueKey="value"
+                value={field.value}
+                onChange={field.onChange}
+                className="m-0 w-100"
+              />
+            )}
+          />
+          {errors.entityTypeId && (
+            <small className="text-danger">{errors.entityTypeId.message}</small>
           )}
         </div>
 
+        {/* Document Category */}
+        <div className="col-12 my-3">
+          <AppFormController
+            name="documentCategoryId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Document Category"
+                options={DocumentCategories ?? []}
+                placeholder={isLoading ? "Loading..." : "-- Select Category --"}
+                required
+                labelKey="name"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                isLoading={isLoading}
+                className="m-0 w-100"
+              />
+            )}
+          />
+          {errors.documentCategoryId && (
+            <small className="text-danger">{errors.documentCategoryId.message}</small>
+          )}
+        </div>
+
+
         {/* Buttons */}
         <div className="d-flex flex-row justify-content-end gap-3 ">
-           <button
+          <button
             type="button"
             className="btn btn-sm btn-label-secondary"
             onClick={onClose}
@@ -212,10 +227,10 @@ const onSubmit = (payload) => {
             {creating || updating
               ? "Please Wait..."
               : data
-              ? "Update"
-              : "Submit"}
+                ? "Update"
+                : "Submit"}
           </button>
-         
+
         </div>
       </form>
     </FormProvider>
diff --git a/src/components/master/ManagePaymentMode.jsx b/src/components/master/ManagePaymentMode.jsx
index 9c70f65a..851a405b 100644
--- a/src/components/master/ManagePaymentMode.jsx
+++ b/src/components/master/ManagePaymentMode.jsx
@@ -56,7 +56,7 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
         />
         {errors.name && <p className="danger-text">{errors.name.message}</p>}
       </div>
-      <div className="col-12 col-md-12 text-start">
+      <div className="col-12 col-md-12 text-start my-3">
         <Label className="form-label" htmlFor="description" required>
           Description
         </Label>
diff --git a/src/components/master/Services/ManageActivity.jsx b/src/components/master/Services/ManageActivity.jsx
index eda3b6d6..e29a1503 100644
--- a/src/components/master/Services/ManageActivity.jsx
+++ b/src/components/master/Services/ManageActivity.jsx
@@ -145,7 +145,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control form-control-sm ${
+            className={`form-control  ${
               errors.activityName ? "is-invalid" : ""
             }`}
           />
@@ -161,7 +161,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control form-control-sm ${
+            className={`form-control  ${
               errors.unitOfMeasurement ? "is-invalid" : ""
             }`}
           />
@@ -203,7 +203,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
                       ></input>
                       <input
                         {...register(`checkList.${index}.description`)}
-                        className="form-control form-control-sm"
+                        className="form-control "
                         placeholder={`Checklist item ${index + 1}`}
                         onChange={(e) =>
                           handleChecklistChange(index, e.target.value)
diff --git a/src/components/master/Services/ManageGroup.jsx b/src/components/master/Services/ManageGroup.jsx
index df4496a1..046fa566 100644
--- a/src/components/master/Services/ManageGroup.jsx
+++ b/src/components/master/Services/ManageGroup.jsx
@@ -62,7 +62,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
           <input
             type="text"
             {...register("name")}
-            className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""
+            className={`form-control  ${errors.name ? "is-invalids" : ""
               }`}
           />
           {errors.name && (
@@ -76,7 +76,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
           <textarea
             rows="3"
             {...register("description")}
-            className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""
+            className={`form-control  ${errors.description ? "is-invalids" : ""
               }`}
           ></textarea>
 
diff --git a/src/components/master/Services/ManageServices.jsx b/src/components/master/Services/ManageServices.jsx
index bdc379a2..758d50d5 100644
--- a/src/components/master/Services/ManageServices.jsx
+++ b/src/components/master/Services/ManageServices.jsx
@@ -62,7 +62,7 @@ const ManageServices = ({ data , onClose }) => {
         {errors.name && <p className="danger-text">{errors.name.message}</p>}
       </div>
 
-      <div className="col-12 col-md-12 text-start">
+      <div className="col-12 col-md-12 text-start my-3">
         <Label className="form-label" htmlFor="description" required>
           Description
         </Label>
diff --git a/src/components/master/Services/ServicesGroups.jsx b/src/components/master/Services/ServicesGroups.jsx
index a89235ae..6af740a0 100644
--- a/src/components/master/Services/ServicesGroups.jsx
+++ b/src/components/master/Services/ServicesGroups.jsx
@@ -40,7 +40,7 @@ const ServiceGroups = ({ service }) => {
       <div className="accordion" id="accordionExample">
         <div className="accordion-item active shadow-none">
           {/* Service Header */}
-          <div className="d-flex justify-content-between text-start align-items-center accordion-header py-1">
+          <div className="d-flex justify-content-between text-start align-items-center accordion-header py-3">
             <p className="m-0 fw-bold fs-6">{service.name}</p>
             <button
               className="btn btn-sm btn-primary"
diff --git a/src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx b/src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx
index 1afba4ab..ed865ad4 100644
--- a/src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx
+++ b/src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx
@@ -75,7 +75,7 @@ const ManagePaymentHead = ({ data, onClose }) => {
           )}
         </div>
 
-        <div className="mb-3">
+        <div className="my-3">
           <Label htmlFor="description" required>
             Description
           </Label>
diff --git a/src/components/purchase/DeliveryChallane.jsx b/src/components/purchase/DeliveryChallane.jsx
index d3448977..eebcfad7 100644
--- a/src/components/purchase/DeliveryChallane.jsx
+++ b/src/components/purchase/DeliveryChallane.jsx
@@ -142,7 +142,7 @@ const DeliveryChallane = ({ purchaseId }) => {
                   label="Select Document Type"
                   options={data ?? []}
                   placeholder="Choose  Type"
-                  labelKeyKey="name"
+                  labelKey="name"
                   valueKeyKey="id"
                   value={field.value}
                   onChange={field.onChange}
diff --git a/src/components/purchase/PurchasePayment.jsx b/src/components/purchase/PurchasePayment.jsx
index 121f77a5..f53b946b 100644
--- a/src/components/purchase/PurchasePayment.jsx
+++ b/src/components/purchase/PurchasePayment.jsx
@@ -111,7 +111,7 @@ const PurchasePayment = ({ onClose, purchaseId }) => {
                         options={paymentTypes?.data ?? []}
                         placeholder="Choose a Status"
                         required
-                        labelKeyKey="name"
+                        labelKey="name"
                         valueKeyKey="id"
                         value={field.value}
                         onChange={field.onChange}
diff --git a/src/components/purchase/PurchasePaymentDetails.jsx b/src/components/purchase/PurchasePaymentDetails.jsx
index 89805b43..093851aa 100644
--- a/src/components/purchase/PurchasePaymentDetails.jsx
+++ b/src/components/purchase/PurchasePaymentDetails.jsx
@@ -223,7 +223,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
               label="Select Document Type"
               options={InvoiceDocTypes ?? []}
               placeholder="Choose  Type"
-              labelKeyKey="name"
+              labelKey="name"
               valueKeyKey="id"
               value={field.value}
               onChange={field.onChange}
diff --git a/src/pages/Activities/TaskPlannng.jsx b/src/pages/Activities/TaskPlannng.jsx
index 3f49331e..b0b7d562 100644
--- a/src/pages/Activities/TaskPlannng.jsx
+++ b/src/pages/Activities/TaskPlannng.jsx
@@ -16,10 +16,10 @@ const TaskPlanning = () => {
   const selectedService = useCurrentService();
   const dispatch = useDispatch();
   const { control } = useForm({
-  defaultValues: {
-    serviceFilter: selectedService ?? ""
-  },
-});
+    defaultValues: {
+      serviceFilter: selectedService ?? ""
+    },
+  });
 
 
   const { projectNames = [], loading: projectLoading } = useProjectName();
@@ -60,14 +60,14 @@ const TaskPlanning = () => {
                 <SelectField
                   label="Services"
                   placeholder="All Services"
-                  options={data ?? []}
-                  labelKeyKey="name"
-                  valueKeyKey="id"
+                  options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
+                  labelKey="name"
+                  valueKey="id"
                   isLoading={servicesLoading}
                   value={field.value}
                   onChange={(val) => {
-                    field.onChange(val);         // react-hook-form update
-                    dispatch(setService(val));   // Redux update
+                    field.onChange(val);        
+                    dispatch(setService(val));  
                   }}
                   className="m-0"
                 />
@@ -77,6 +77,7 @@ const TaskPlanning = () => {
         </div>
 
 
+
         {/* Planning Component */}
         {selectedProject ? (
           <InfraPlanning />
diff --git a/src/pages/DailyProgressReport/DailyProgrssReport.jsx b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
index d3a4eef6..e543895e 100644
--- a/src/pages/DailyProgressReport/DailyProgrssReport.jsx
+++ b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
@@ -107,15 +107,15 @@ const DailyProgrssReport = () => {
                 render={({ field }) => (
                   <SelectField
                     label="Services"
-                    options={data ?? []}
-                    placeholder="All Services"
-                    labelKeyKey="name"
-                    valueKeyKey="id"
+                    options={[{ id: "", name: "All Projects" }, ...(data ?? [])]} 
+                    placeholder="Select Service"
+                    labelKey="name"  
+                    valueKey="id"
                     isLoading={isLoading}
                     value={field.value}
                     onChange={(val) => {
-                      field.onChange(val);   // update RHF
-                      setService(val);       // update your local filter state
+                      field.onChange(val);  
+                      setService(val);      
                     }}
                     className="m-0"
                   />
@@ -129,6 +129,7 @@ const DailyProgrssReport = () => {
           </div>
         </div>
 
+
       </DailyProgrssContext.Provider>
     </div>
   );
diff --git a/src/pages/authentication/ChangePassword.jsx b/src/pages/authentication/ChangePassword.jsx
index 844ce97c..3e037521 100644
--- a/src/pages/authentication/ChangePassword.jsx
+++ b/src/pages/authentication/ChangePassword.jsx
@@ -71,8 +71,7 @@ const ChangePasswordPage = () => {
   const bodyContxt = (
  
    
-        <div className="row">
-     
+        <div className="row">    
 
           <h5 className="mb-2">Change Password</h5>
           <p className="mb-4 text-black">
@@ -86,7 +85,7 @@ const ChangePasswordPage = () => {
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                 <input
                   type={hideOldPass ? "password" : "text"}
-                  className="form-control form-control-sm border-0 shadow-none"
+                  className="form-control  border-0 shadow-none"
                   {...register("oldPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                   style={{ flex: 1 }}
@@ -112,7 +111,7 @@ const ChangePasswordPage = () => {
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                 <input
                   type={hideNewPass ? "password" : "text"}
-                  className="form-control form-control-sm border-0 shadow-none"
+                  className="form-control  border-0 shadow-none"
                   {...register("newPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                   style={{ flex: 1 }}
@@ -142,7 +141,7 @@ const ChangePasswordPage = () => {
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                 <input
                   type={hideConfirmPass ? "password" : "text"}
-                  className="form-control form-control-sm border-0 shadow-none"
+                  className="form-control  border-0 shadow-none"
                   {...register("confirmPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                   style={{ flex: 1 }}
@@ -168,28 +167,28 @@ const ChangePasswordPage = () => {
               )}
             </div>
 
-            <div className="d-flex justify-content-center pt-2 text-muted small text-black">
+            <div className="d-flex justify-content-center my-5 text-muted small text-black">
               Your password must have at least 8 characters and include a lower
               case letter, an uppercase letter, a number, and a special
               character.
             </div>
             {/* Action Buttons */}
-            <div className="d-flex justify-content-center pt-4">
-              <button
-                type="submit"
-                className="btn btn-primary btn-sm me-2"
-                disabled={loading}
-              >
-                {loading ? "Please Wait..." : "Change Password"}
-              </button>
+            <div className="d-flex justify-content-end">              
               <button
                 type="button"
-                className="btn btn-outline-secondary btn-sm"
+                className="btn btn-outline-secondary btn-sm me-2"
                 onClick={onClose}
                 disabled={loading}
               >
                 Cancel
               </button>
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm"
+                disabled={loading}
+              >
+                {loading ? "Please Wait..." : "Change Password"}
+              </button>
             </div>
           </form>
         </div>
diff --git a/src/pages/master/MasterPage.jsx b/src/pages/master/MasterPage.jsx
index 31f14da4..06378102 100644
--- a/src/pages/master/MasterPage.jsx
+++ b/src/pages/master/MasterPage.jsx
@@ -15,6 +15,9 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
 import GlobalModel from "../../components/common/GlobalModel";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../../components/common/Forms/SelectField";
+import { useForm } from "react-hook-form";
 
 
 export const MasterContext = createContext();
@@ -33,6 +36,11 @@ const MasterPage = () => {
     (store) => store.localVariables.selectedMaster
   );
   const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
+    const { control, handleSubmit } = useForm({
+    defaultValues: {
+      masterSelection: selectedMaster || "",
+    },
+  });
 
   const {
     data: menuData,
@@ -46,9 +54,9 @@ const MasterPage = () => {
     isError: isMasterError,
   } = useMaster();
   const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
-  const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null})
-  const {mutate:DeleteSericeGroup,isPending:deletingGroup}  =useDeleteServiceGroup()
-  const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity()
+  const [isDeleletingServiceItem, setDeleletingServiceItem] = useState({ isOpen: false, ItemId: null, whichItem: null })
+  const { mutate: DeleteSericeGroup, isPending: deletingGroup } = useDeleteServiceGroup()
+  const { mutate: DeleteAcivity, isPending: deletingActivity } = useDeleteActivity()
 
   const [modalConfig, setModalConfig] = useState(null);
   const [deleteData, setDeleteData] = useState(null);
@@ -89,15 +97,15 @@ const MasterPage = () => {
   };
 
 
-  const handleDeleteServiceItem =()=>{
-    if(!isDeleletingServiceItem.ItemId) return
+  const handleDeleteServiceItem = () => {
+    if (!isDeleletingServiceItem.ItemId) return
     debugger
-    if(isDeleletingServiceItem.whichItem === "activity"){
-        DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
-    }else{
-      DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
+    if (isDeleletingServiceItem.whichItem === "activity") {
+      DeleteAcivity(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
+    } else {
+      DeleteSericeGroup(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
     }
-  
+
 
   }
 
@@ -115,7 +123,7 @@ const MasterPage = () => {
     );
 
   return (
-    <MasterContext.Provider value={{setDeleletingServiceItem}}>
+    <MasterContext.Provider value={{ setDeleletingServiceItem }}>
       {modalConfig && (
         <GlobalModel
           size={
@@ -134,8 +142,6 @@ const MasterPage = () => {
           />
         </GlobalModel>
       )}
-      
-
       <ConfirmModal
         type="delete"
         header={`Delete ${selectedMaster}`}
@@ -145,15 +151,15 @@ const MasterPage = () => {
         onSubmit={handleDeleteSubmit}
         onClose={() => setDeleteData(null)}
       />
-      
+
       <ConfirmModal
         type="delete"
         header={`Delete ${isDeleletingServiceItem?.whichItem}`}
         message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`}
         isOpen={!!isDeleletingServiceItem?.isOpen}
         loading={deletingActivity}
-            onSubmit={handleDeleteServiceItem}
-        onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}
+        onSubmit={handleDeleteServiceItem}
+        onClose={() => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null })}
       />
 
       <div className="container-fluid">
@@ -164,28 +170,34 @@ const MasterPage = () => {
         <div className="row page-min-h">
           <div className="card">
             <div
-              className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
+              className="card-datatable table-responsive py-2 py-md-6 mx-1 mx-md-5 "
               style={{ overflow: "hidden" }}
             >
               <div className="row mb-2">
-                <div className="col-12 col-md-3">
-                  <select
-                    className="form-select py-1 px-2"
-                   
-                    value={selectedMaster}
-                    onChange={(e) => dispatch(changeMaster(e.target.value))}
-                  >
-                    {menuLoading ? (
-                      <option value="">Loading...</option>
-                    ) : (
-                      menuData?.map((item) => (
-                        <option key={item.id} value={item.name}>
-                          {item.name}
-                        </option>
-                      ))
+                <div className="col-12 col-md-3 text-start">
+                  <AppFormController
+                    name="masterSelection"
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label="Select Master"
+                        options={menuData ?? []}
+                        placeholder={menuLoading ? "Loading..." : "Choose Master"}
+                        required
+                        labelKey="name"
+                        valueKey="name"
+                        value={field.value}
+                        onChange={(val) => {
+                          field.onChange(val); // update form value
+                          dispatch(changeMaster(val)); // update Redux state
+                        }}
+                        isLoading={menuLoading}
+                        className="m-0 w-100 py-1 px-2"
+                      />
                     )}
-                  </select>
+                  />
                 </div>
+
                 <div className="col-12 col-md-9  d-flex justify-content-between justify-content-md-end align-items-center gap-2 mt-2 mt-md-0">
                   <div className="col-8 col-md-3">
                     <input
@@ -204,7 +216,7 @@ const MasterPage = () => {
                       }
                     >
                       <i className="bx bx-plus-circle me-2"></i> <span className="d-none d-md-inline-block">Add{" "}
-                      {selectedMaster}</span>
+                        {selectedMaster}</span>
                     </button>
                   )}
                 </div>
@@ -220,7 +232,7 @@ const MasterPage = () => {
           </div>
         </div>
       </div>
-     </MasterContext.Provider>
+    </MasterContext.Provider>
   );
 };
 
diff --git a/src/pages/master/MasterTable.jsx b/src/pages/master/MasterTable.jsx
index cb5fe881..a242f89a 100644
--- a/src/pages/master/MasterTable.jsx
+++ b/src/pages/master/MasterTable.jsx
@@ -80,7 +80,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
   };
 
   return (
-    <div className="table-responsive">
+    <div className="table-responsive mt-5">
       {loading ? (
         <p>Loading...</p>
       ) : (
@@ -92,14 +92,14 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                 {" "}
                 {selectedMaster === "Activity" ? "Activity" : "Name"}
               </th>
-    <th className="text-start d-none d-md-table-cell">
+              <th className="text-start d-none d-md-table-cell">
 
                 {" "}
                 {selectedMaster === "Activity"
                   ? "Unit"
                   : selectedMaster === "Document Type"
-                  ? "Content Type"
-                  : "Description"}
+                    ? "Content Type"
+                    : "Description"}
               </th>
               <th className={` ${!hasMasterPermission && "d-none"}`}>
                 Actions
@@ -109,15 +109,15 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
           <tbody>
             {currentItems.length > 0 ? (
               currentItems.map((item, index) => (
-                <tr key={index} >
-                  <td style={{ width: "20px" }} className="py-3">
+                <tr key={index} style={{ height: "40px" }}>
+                  <td className="py-3">
                     <i className="bx bx-right-arrow-alt"></i>
                   </td>
                   {updatedColumns.map((col) => (
                     <td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} >
                       {col.key === "description" ? (
                         item[col.key] !== undefined &&
-                        item[col.key] !== null ? (
+                          item[col.key] !== null ? (
                           item[col.key].length > 80 ? (
                             <>{item[col.key].slice(0, 80)}...</>
                           ) : (
@@ -137,7 +137,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                   <td className={!hasMasterPermission ? "d-none" : "py-3"}>
                     {(selectedMaster === "Application Role" ||
                       selectedMaster === "Work Category") &&
-                    item?.isSystem ? (
+                      item?.isSystem ? (
                       <>
                         <button
                           aria-label="Modify"
@@ -230,9 +230,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
             {[...Array(totalPages)].map((_, index) => (
               <li
                 key={index}
-                className={`page-item ${
-                  currentPage === index + 1 ? "active" : ""
-                }`}
+                className={`page-item ${currentPage === index + 1 ? "active" : ""
+                  }`}
               >
                 <button
                   className="page-link"
@@ -243,9 +242,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
               </li>
             ))}
             <li
-              className={`page-item ${
-                currentPage === totalPages ? "disabled" : ""
-              }`}
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                }`}
             >
               <button
                 className="page-link"