diff --git a/src/components/Dashboard/ProjectProgressChart.jsx b/src/components/Dashboard/ProjectProgressChart.jsx
index 61747f6c..247dcfa5 100644
--- a/src/components/Dashboard/ProjectProgressChart.jsx
+++ b/src/components/Dashboard/ProjectProgressChart.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import LineChart from "../Charts/LineChart";
-import { useProjects } from "../../hooks/useProjects";
+import { useProjectName } from "../../hooks/useProjects";
 import { useDashboard_Data } from "../../hooks/useDashboard_Data";
 import { useSelector } from "react-redux";
 
@@ -11,7 +11,7 @@ const ProjectProgressChart = ({
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
-  const { projects } = useProjects();
+  const { projectNames } = useProjectName();
   const [range, setRange] = useState(DefaultRange);
   const [showAllEmployees, setShowAllEmployees] = useState(false);
 
@@ -79,7 +79,9 @@ const ProjectProgressChart = ({
     })
   );
 
-  const selectedProjectData = projects?.find((p) => p.id === selectedProject);
+  const selectedProjectData = projectNames?.find(
+    (p) => p.id === selectedProject
+  );
   const selectedProjectName = selectedProjectData?.shortName?.trim()
     ? selectedProjectData.shortName
     : selectedProjectData?.name;
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 f55ed858..56dd6e70 100644
--- a/src/components/Directory/ManageContact.jsx
+++ b/src/components/Directory/ManageContact.jsx
@@ -19,6 +19,8 @@ import SelectMultiple from "../common/SelectMultiple";
 import { ContactSchema, defaultContactValue } from "./DirectorySchema";
 import InputSuggestions from "../common/InputSuggestion";
 import Label from "../common/Label";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
@@ -194,7 +196,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               Name
             </Label>
             <input
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("name")}
             />
             {errors.name && (
@@ -210,6 +212,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               value={watch("organization") || ""}
               onChange={(val) => setValue("organization", val, { shouldValidate: true })}
               error={errors.organization?.message}
+              size="md"
             />
 
           </div>
@@ -222,7 +225,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               Designation
             </Label>
             <input
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("designation")}
               onChange={handleDesignationChange}
             />
@@ -257,7 +260,7 @@ const ManageContact = ({ contactId, closeModal }) => {
         </div>
 
         {/* Emails + Phones */}
-        <div className="row mt-1">
+        <div className="row mt-3">
           <div className="col-md-6">
             {emailFields.map((field, index) => (
               <div
@@ -265,22 +268,39 @@ const ManageContact = ({ contactId, closeModal }) => {
                 className="row d-flex align-items-center mb-1"
               >
                 <div className="col-5 text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactEmails.${index}.label`)}
-                  >
-                    <option value="Work">Work</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Other">Other</option>
-                  </select>
+                  <AppFormController
+                    name={`contactEmails.${index}.label`}
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label="Label"
+                        options={[
+                          { id: "Work", name: "Work" },
+                          { id: "Personal", name: "Personal" },
+                          { id: "Other", name: "Other" }
+                        ]}
+                        placeholder="Choose a Label"
+                        required
+                        labelKey="name"
+                        valueKeyKey="id"
+                        value={field.value}
+                        onChange={field.onChange}
+                        className="m-0"
+                      />
+                    )}
+                  />
+                  {errors.contactEmails?.[index]?.label && (
+                    <small className="danger-text">
+                      {errors.contactEmails[index].label.message}
+                    </small>
+                  )}
                 </div>
-                <div className="col-7 text-start">
+                <div className="col-7 text-start mt-n3">
                   <label className="form-label">Email</label>
                   <div className="d-flex align-items-center">
                     <input
                       type="email"
-                      className="form-control form-control-sm"
+                      className="form-control "
                       {...register(`contactEmails.${index}.emailAddress`)}
                       placeholder="email@example.com"
                     />
@@ -308,27 +328,43 @@ const ManageContact = ({ contactId, closeModal }) => {
 
           <div className="col-md-6">
             {phoneFields.map((field, index) => (
-              <div
-                key={field.id}
-                className="row d-flex align-items-center mb-2"
-              >
+              <div key={field.id} className="row d-flex align-items-center mb-2">
+
                 <div className="col-5 text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactPhones.${index}.label`)}
-                  >
-                    <option value="Office">Office</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Business">Business</option>
-                  </select>
+                  <AppFormController
+                    name={`contactPhones.${index}.label`}
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label="Label"
+                        options={[
+                          { id: "Office", name: "Office" },
+                          { id: "Personal", name: "Personal" },
+                          { id: "Business", name: "Business" }
+                        ]}
+                        placeholder="Choose a Label"
+                        required
+                        labelKey="name"
+                        valueKeyKey="id"
+                        value={field.value}
+                        onChange={field.onChange}
+                        className="m-0"
+                      />
+                    )}
+                  />
+                  {errors.contactPhones?.[index]?.label && (
+                    <small className="danger-text">
+                      {errors.contactPhones[index].label.message}
+                    </small>
+                  )}
                 </div>
-                <div className="col-7 text-start">
+
+                <div className="col-7 text-start mt-n3">
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
                       type="text"
-                      className="form-control form-control-sm"
+                      className="form-control "
                       {...register(`contactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
                     />
@@ -350,42 +386,43 @@ const ManageContact = ({ contactId, closeModal }) => {
                     </small>
                   )}
                 </div>
+
               </div>
             ))}
           </div>
+
         </div>
 
         {/* Category + Projects */}
-        <div className="row my-1">
+        <div className="row">
           <div className="col-md-6 text-start">
-            <label className="form-label">Category</label>
-            <select
-              className="form-select form-select-sm"
-              {...register("contactCategoryId")}
-            >
-              {contactCategoryLoading && !contactCategory ? (
-                <option disabled value="">
-                  Loading...
-                </option>
-              ) : (
-                <>
-                  <option disabled value="">
-                    Select Category
-                  </option>
-                  {contactCategory?.map((cate) => (
-                    <option key={cate.id} value={cate.id}>
-                      {cate.name}
-                    </option>
-                  ))}
-                </>
+            <AppFormController
+              name="contactCategoryId"
+              control={control}
+              rules={{ required: "Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="Category"
+                  required
+                  options={contactCategory ?? []}
+                  placeholder="Select Category"
+                  labelKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={contactCategoryLoading && !contactCategory}
+                  className="m-0"
+                />
               )}
-            </select>
+            />
+
             {errors.contactCategoryId && (
               <small className="danger-text">
                 {errors.contactCategoryId.message}
               </small>
             )}
           </div>
+
           <div className="col-12 col-md-6 text-start">
             <SelectMultiple
               name="projectIds"
@@ -402,13 +439,14 @@ const ManageContact = ({ contactId, closeModal }) => {
         </div>
 
         {/* Tags */}
-        <div className="col-12 text-start">
+        <div className="col-12 text-start mt-3">
           <TagInput
             name="tags"
             label="Tags"
             options={contactTags}
             isRequired={true}
             placeholder="Enter Tag"
+            size="sm"
           />
           {errors.tags && (
             <small className="danger-text">{errors.tags.message}</small>
@@ -417,8 +455,8 @@ const ManageContact = ({ contactId, closeModal }) => {
 
         {/* Buckets */}
         <div className="row">
-          <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Bucket</label>
+          <div className="col-md-12 mt-3 text-start">
+            <label className="form-label mb-2">Select Bucket</label>
             <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
@@ -454,15 +492,15 @@ const ManageContact = ({ contactId, closeModal }) => {
         <div className="col-12 text-start">
           <label className="form-label">Address</label>
           <textarea
-            className="form-control form-control-sm"
+            className="form-control "
             rows="2"
             {...register("address")}
           />
         </div>
-        <div className="col-12 text-start">
+        <div className="col-12 text-start mt-3">
           <label className="form-label">Description</label>
           <textarea
-            className="form-control form-control-sm"
+            className="form-control "
             rows="2"
             {...register("description")}
           />
diff --git a/src/components/Documents/ManageDocument.jsx b/src/components/Documents/ManageDocument.jsx
index 6ff050d4..9d9bab1a 100644
--- a/src/components/Documents/ManageDocument.jsx
+++ b/src/components/Documents/ManageDocument.jsx
@@ -17,6 +17,8 @@ import {
 import showToast from "../../services/toastService";
 import { useDocumentContext } from "./Documents";
 import { isPending } from "@reduxjs/toolkit";
+import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const toBase64 = (file) =>
   new Promise((resolve, reject) => {
@@ -72,9 +74,12 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
     handleSubmit,
     watch,
     setValue,
+    control,
     reset,
     formState: { errors },
   } = methods;
+
+
   const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
     () => {
       showToast("Document Uploaded Successfully", "success");
@@ -88,33 +93,33 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
     }
   );
 
- 
+
   const onSubmit = (data) => {
-  const normalizeAttachment = (attachment) => {
-    if (!attachment) return null;
-    return {
-      ...attachment,
-      fileSize: Math.ceil(attachment.fileSize / 1024), 
+    const normalizeAttachment = (attachment) => {
+      if (!attachment) return null;
+      return {
+        ...attachment,
+        fileSize: Math.ceil(attachment.fileSize / 1024),
+      };
     };
-  };
 
-  const payload = {
-    ...data,
-    attachment: normalizeAttachment(data.attachment),
-  };
-
-  if (ManageDoc?.document) {
-    const DocumentPayload = {
-      ...payload,
-      id: DocData.id,
-      tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
+    const payload = {
+      ...data,
+      attachment: normalizeAttachment(data.attachment),
     };
-    UpdateDocument({ documentId: DocData?.id, DocumentPayload });
-  } else {
-    const DocumentPayload = { ...payload, entityId: Entity };
-    UploadDocument(DocumentPayload);
-  }
-};
+
+    if (ManageDoc?.document) {
+      const DocumentPayload = {
+        ...payload,
+        id: DocData.id,
+        tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
+      };
+      UpdateDocument({ documentId: DocData?.id, DocumentPayload });
+    } else {
+      const DocumentPayload = { ...payload, entityId: Entity };
+      UploadDocument(DocumentPayload);
+    }
+  };
 
   const {
     data: DocData,
@@ -134,7 +139,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
   const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
     categoryId || null
   );
-  const {data:DocumentTags} = useDocumentTags()
+  const { data: DocumentTags } = useDocumentTags()
 
   // Update schema whenever document type changes
   useEffect(() => {
@@ -144,7 +149,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
       (t) => String(t.id) === String(documentTypeId)
     );
     if (!type) return;
-   setSelectedType(type)
+    setSelectedType(type)
     const newSchema = DocumentPayloadSchema({
       isMandatory: type.isMandatory ?? false,
       regexExpression: type.regexExpression ?? null,
@@ -200,10 +205,10 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
         t === "application/pdf"
           ? ".pdf"
           : t === "image/jpeg"
-          ? ".jpg,.jpeg"
-          : t === "image/png"
-          ? ".png"
-          : ""
+            ? ".jpg,.jpeg"
+            : t === "image/png"
+              ? ".png"
+              : ""
       )
       .join(",") || "";
 
@@ -231,200 +236,209 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
 
   const isPending = isUploading || isUpdating;
   return (
-    <div className="p-2">
-      <p className="fw-bold fs-6">Upload New Document</p>
-      <FormProvider key={documentTypeId} {...methods}>
-        <form onSubmit={handleSubmit(onSubmit)} className="text-start">
-          {/* Category */}
-          <div className="mb-2">
-            <Label htmlFor="documentCategoryId" required>Document Category</Label>
-            <select
-              {...register("documentCategoryId")}
-              className="form-select form-select-sm"
-            >
-              {isLoading && (
-                <option disabled value="">
-                  Loading...
-                </option>
-              )}
-              {!isLoading && <option value="">Select Category</option>}
-              {DocumentCategories?.map((type) => (
-                <option key={type.id} value={type.id}>
-                  {type.name}
-                </option>
-              ))}
-            </select>
-            {errors.documentCategoryId && (
-              <div className="danger-text">
-                {errors.documentCategoryId.message}
-              </div>
-            )}
-          </div>
-
-          {/* Type */}
-          {categoryId && (
-            <div className="mb-2">
-              <Label htmlFor="documentTypeId" required>Document Type</Label>
-              <select
-                {...register("documentTypeId")}
-                className="form-select form-select-sm"
-              >
-                {isTypeLoading && (
-                  <option disabled value="">
-                    Loading...
-                  </option>
+    <AppFormProvider {...methods}>
+      <div className="p-2">
+        <h5 className="">Upload New Document</h5>
+        <FormProvider key={documentTypeId} {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
+            {/* Category */}
+            <div className="col-12 col-md-12 mb-2 mb-md-4">
+              <AppFormController
+                name="documentCategoryId"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="Document Category"
+                    options={DocumentCategories ?? []}
+                    placeholder="Select Category"
+                    required
+                    labelKey="name"
+                    valueKeyKey="id"
+                    value={field.value}
+                    onChange={field.onChange}
+                    isLoading={isLoading}
+                    className="m-0"
+                  />
                 )}
-                {DocumentTypes?.map((type) => (
-                  <option key={type.id} value={type.id}>
-                    {type.name}
-                  </option>
-                ))}
-              </select>
-              {errors.documentTypeId && (
-                <div className="danger-text">
-                  {errors.documentTypeId.message}
-                </div>
+              />
+
+              {errors.documentCategoryId && (
+                <small className="danger-text">
+                  {errors.documentCategoryId.message}
+                </small>
               )}
             </div>
-          )}
 
-          
-          {/* Document ID */}
-          <div className="mb-2">
-            <label
-              htmlFor="documentId"
-              required={selectedType?.isMandatory ?? false}
-            >
-              Document ID
-            </label>
-            <input
-              type="text"
-              className="form-control form-control-sm"
-              {...register("documentId")}
-            />
-            {errors.documentId && (
-              <div className="danger-text">{errors.documentId.message}</div>
-            )}
-          </div>
 
-          {/* Document Name */}
-          <div className="mb-2">
-            <Label htmlFor="name" required>
-              Document Name
-            </Label>
-            <input
-              type="text"
-              className="form-control form-control-sm"
-              {...register("name")}
-            />
-            {errors.name && (
-              <div className="danger-text">{errors.name.message}</div>
-            )}
-          </div>
-
-          
-
-          {/* Upload */}
-          <div className="row my-2">
-            <div className="col-md-12">
-              <Label htmlFor="attachment" required>Upload Document</Label>
-
-              <div
-                className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
-                style={{ cursor: "pointer" }}
-                onClick={() => document.getElementById("attachment").click()}
-              >
-                <i className="bx bx-cloud-upload d-block bx-lg"></i>
-                <span className="text-muted d-block">
-                  Click to select or click here to browse
-                </span>
-                <small className="text-muted">
-                  ({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
-                  {selectedType?.maxSizeAllowedInMB ?? 25}MB)
-                </small>
-
-                <input
-                  type="file"
-                  id="attachment"
-                  accept={selectedType?.allowedContentType}
-                  style={{ display: "none" }}
-                  onChange={(e) => {
-                    onFileChange(e);
-                    e.target.value = ""; // reset input
-                  }}
+            {/* Type */}
+            {categoryId && (
+              <div className="col-12 col-md-12 mb-2 mb-md-4">
+                <AppFormController
+                  name="documentTypeId"
+                  control={control}
+                  render={({ field }) => (
+                    <SelectField
+                      label="Document Type"
+                      options={DocumentTypes ?? []}
+                      placeholder="Select Document Type"
+                      required
+                      labelKey="name"
+                      valueKeyKey="id"
+                      value={field.value}
+                      onChange={field.onChange}
+                      isLoading={isTypeLoading}
+                      className="m-0"
+                    />
+                  )}
                 />
+
+                {errors.documentTypeId && (
+                  <small className="danger-text">
+                    {errors.documentTypeId.message}
+                  </small>
+                )}
               </div>
 
-              {errors.attachment && (
-                <small className="danger-text">
-                  {errors.attachment.message
-                    ? errors.attachment.message
-                    : errors.attachment.fileName?.message ||
+            )}
+
+
+            {/* Document ID */}
+            <div className="mb-4">
+              <label
+                htmlFor="documentId"
+                required={selectedType?.isMandatory ?? false}
+              >
+                Document ID
+              </label>
+              <input
+                type="text"
+                className="form-control "
+                {...register("documentId")}
+              />
+              {errors.documentId && (
+                <div className="danger-text">{errors.documentId.message}</div>
+              )}
+            </div>
+
+            {/* Document Name */}
+            <div className="mb-2">
+              <Label htmlFor="name" required>
+                Document Name
+              </Label>
+              <input
+                type="text"
+                className="form-control "
+                {...register("name")}
+              />
+              {errors.name && (
+                <div className="danger-text">{errors.name.message}</div>
+              )}
+            </div>
+
+
+
+            {/* Upload */}
+            <div className="row my-4">
+              <div className="col-md-12">
+                <Label htmlFor="attachment" required>Upload Document</Label>
+
+                <div
+                  className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => document.getElementById("attachment").click()}
+                >
+                  <i className="bx bx-cloud-upload d-block bx-lg"></i>
+                  <span className="text-muted d-block">
+                    Click to select or click here to browse
+                  </span>
+                  <small className="text-muted">
+                    ({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
+                    {selectedType?.maxSizeAllowedInMB ?? 25}MB)
+                  </small>
+
+                  <input
+                    type="file"
+                    id="attachment"
+                    accept={selectedType?.allowedContentType}
+                    style={{ display: "none" }}
+                    onChange={(e) => {
+                      onFileChange(e);
+                      e.target.value = ""; // reset input
+                    }}
+                  />
+                </div>
+
+                {errors.attachment && (
+                  <small className="danger-text">
+                    {errors.attachment.message
+                      ? errors.attachment.message
+                      : errors.attachment.fileName?.message ||
                       errors.attachment.base64Data?.message ||
                       errors.attachment.contentType?.message ||
                       errors.attachment.fileSize?.message}
-                </small>
-              )}
+                  </small>
+                )}
 
-              {file?.base64Data && (
-                <div className="d-flex justify-content-between text-start p-1 mt-2">
-                  <div>
-                    <span className="mb-0 text-secondary small d-block">
-                      {file.fileName}
-                    </span>
-                    <span className="text-body-secondary small d-block">
-                      {(file.fileSize / 1024).toFixed(1)} KB
-                    </span>
+                {file?.base64Data && (
+                  <div className="d-flex justify-content-between text-start p-1 mt-2">
+                    <div>
+                      <span className="mb-0 text-secondary small d-block">
+                        {file.fileName}
+                      </span>
+                      <span className="text-body-secondary small d-block">
+                        {(file.fileSize / 1024).toFixed(1)} KB
+                      </span>
+                    </div>
+                    <i
+                      className="bx bx-trash bx-sm cursor-pointer text-danger"
+                      onClick={removeFile}
+                    ></i>
                   </div>
-                  <i
-                    className="bx bx-trash bx-sm cursor-pointer text-danger"
-                    onClick={removeFile}
-                  ></i>
-                </div>
+                )}
+              </div>
+            </div>
+            <div className="mb-4">
+              <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
+              {errors.tags && (
+                <small className="danger-text">{errors.tags.message}</small>
               )}
             </div>
-          </div>
-          <div className="mb-2">
-            <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
-            {errors.tags && (
-              <small className="danger-text">{errors.tags.message}</small>
-            )}
-          </div>
 
-          {/* Description */}
-          <div className="mb-2">
-            <Label htmlFor="description" required>Description</Label>
-            <textarea
-              rows="2"
-              className="form-control"
-              {...register("description")}
-            ></textarea>
-            {errors.description && (
-              <div className="danger-text">{errors.description.message}</div>
-            )}
-          </div>
+            {/* Description */}
+            <div className="mb-4">
+              <Label htmlFor="description" required>Description</Label>
+              <textarea
+                rows="2"
+                className="form-control"
+                {...register("description")}
+              ></textarea>
+              {errors.description && (
+                <div className="danger-text">{errors.description.message}</div>
+              )}
+            </div>
 
-          {/* Buttons */}
-          <div className="d-flex justify-content-end gap-3 mt-4">            
-            <button
-              type="reset"
-              className="btn btn-label-secondary btn-sm"
-              disabled={isPending}
-              onClick={closeModal}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="btn btn-primary btn-sm"
-              disabled={isPending}
-            >
-              {isPending ? "Please Wait..." : " Submit"}
-            </button>
-          </div>
-        </form>
-      </FormProvider>
-    </div>
+            {/* Buttons */}
+            <div className="d-flex justify-content-end gap-3 mt-4">
+              <button
+                type="reset"
+                className="btn btn-label-secondary btn-sm"
+                disabled={isPending}
+                onClick={closeModal}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm"
+                disabled={isPending}
+              >
+                {isPending ? "Please Wait..." : " Submit"}
+              </button>
+            </div>
+          </form>
+        </FormProvider>
+      </div>
+    </AppFormProvider>
   );
 };
 
diff --git a/src/components/Employee/EmpActivities.jsx b/src/components/Employee/EmpActivities.jsx
index 8d23b68a..55ea38cc 100644
--- a/src/components/Employee/EmpActivities.jsx
+++ b/src/components/Employee/EmpActivities.jsx
@@ -21,7 +21,7 @@ const EmpActivities = ({ employee }) => {
   if (isLoading) return <div>Loading...</div>
   return (
     <>
-      <div className="card h-100 mt-4">
+      <div className="card page-min-h mt-3">
         <div className="card-body">
           <div className="my-0 text-start">
             <DateRangePicker
diff --git a/src/components/Employee/EmpAttendance.jsx b/src/components/Employee/EmpAttendance.jsx
index 0a2d63fb..034125d6 100644
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@@ -71,7 +71,7 @@ const EmpAttendance = () => {
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"
diff --git a/src/components/Employee/EmpDashboard.jsx b/src/components/Employee/EmpDashboard.jsx
index 91958f3f..8db06fd1 100644
--- a/src/components/Employee/EmpDashboard.jsx
+++ b/src/components/Employee/EmpDashboard.jsx
@@ -18,7 +18,7 @@ const EmpDashboard = ({ profile }) => {
           <EmpOverview profile={profile}></EmpOverview>
         </div>
 
-        <div className="col col-sm-6 pt-5">
+        <div className="col col-sm-6 mt-3">
           <div className="card ">
             <div className="card-body">
               <small className="card-text text-uppercase text-body-secondary small text-start d-block">
@@ -82,7 +82,7 @@ const EmpDashboard = ({ profile }) => {
             </div>
           </div>
         </div>
-        <div className="col-12 col-sm-6 pt-5">
+        <div className="col-12 col-sm-6 pt-2">
           <EmpReportingManager
             employeeId={profile?.id}
             employee={profile}
diff --git a/src/components/Employee/EmpDocuments.jsx b/src/components/Employee/EmpDocuments.jsx
index b4c8046b..e98f22bf 100644
--- a/src/components/Employee/EmpDocuments.jsx
+++ b/src/components/Employee/EmpDocuments.jsx
@@ -6,10 +6,12 @@ import { useParams } from "react-router-dom";
 import { DOCUMENTS_ENTITIES } from "../../utils/constants";
 
 const EmpDocuments = ({ profile, loggedInUser }) => {
- const {employeeId} = useParams()
+  const { employeeId } = useParams()
   return (
     <>
-       <Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
+      <div className="mt-3">
+        <Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
+      </div>
     </>
   );
 };
diff --git a/src/components/Employee/EmpOverview.jsx b/src/components/Employee/EmpOverview.jsx
index cf4ce4af..79a7e423 100644
--- a/src/components/Employee/EmpOverview.jsx
+++ b/src/components/Employee/EmpOverview.jsx
@@ -5,7 +5,7 @@ const EmpOverview = ({ profile }) => {
   const { loggedInUserProfile } = useProfile();
 
   return (
-    <div className="row">
+    <div className="row mt-n2">
       <div className="col-12 mb-4">
         <div className="card">
           <div className="card-body">
diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index 5ee82674..ebf632c5 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -17,6 +17,8 @@ import DatePicker from "../common/DatePicker";
 import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
 import { useOrganizationsList } from "../../hooks/useOrganization";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const ManageEmployee = ({ employeeId, onClosed }) => {
   const dispatch = useDispatch();
@@ -96,26 +98,26 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     reset(
       currentEmployee
         ? {
-            id: currentEmployee.id || null,
-            firstName: currentEmployee.firstName || "",
-            middleName: currentEmployee.middleName || "",
-            lastName: currentEmployee.lastName || "",
-            email: currentEmployee.email || "",
-            currentAddress: currentEmployee.currentAddress || "",
-            birthDate: formatDate(currentEmployee.birthDate) || "",
-            joiningDate: formatDate(currentEmployee.joiningDate) || "",
-            emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
-            emergencyContactPerson:
-              currentEmployee.emergencyContactPerson || "",
-            aadharNumber: currentEmployee.aadharNumber || "",
-            gender: currentEmployee.gender || "",
-            panNumber: currentEmployee.panNumber || "",
-            permanentAddress: currentEmployee.permanentAddress || "",
-            phoneNumber: currentEmployee.phoneNumber || "",
-            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-            organizationId: currentEmployee.organizationId || "",
-            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
-          }
+          id: currentEmployee.id || null,
+          firstName: currentEmployee.firstName || "",
+          middleName: currentEmployee.middleName || "",
+          lastName: currentEmployee.lastName || "",
+          email: currentEmployee.email || "",
+          currentAddress: currentEmployee.currentAddress || "",
+          birthDate: formatDate(currentEmployee.birthDate) || "",
+          joiningDate: formatDate(currentEmployee.joiningDate) || "",
+          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
+          emergencyContactPerson:
+            currentEmployee.emergencyContactPerson || "",
+          aadharNumber: currentEmployee.aadharNumber || "",
+          gender: currentEmployee.gender || "",
+          panNumber: currentEmployee.panNumber || "",
+          permanentAddress: currentEmployee.permanentAddress || "",
+          phoneNumber: currentEmployee.phoneNumber || "",
+          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+          organizationId: currentEmployee.organizationId || "",
+          hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
+        }
         : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
@@ -147,7 +149,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                   message: "Only letters are allowed",
                 },
               })}
-              className="form-control form-control-sm"
+              className="form-control "
               id="firstName"
               placeholder="First Name"
               onInput={(e) => {
@@ -173,7 +175,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                   message: "Only letters are allowed",
                 },
               })}
-              className="form-control form-control-sm"
+              className="form-control "
               id="middleName"
               placeholder="Middle Name"
               onInput={(e) => {
@@ -201,7 +203,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                   message: "Only letters are allowed",
                 },
               })}
-              className="form-control form-control-sm"
+              className="form-control "
               id="lastName"
               placeholder="Last Name"
               onInput={(e) => {
@@ -231,7 +233,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               type="email"
               id="email"
               {...register("email")}
-              className="form-control form-control-sm"
+              className="form-control "
               placeholder="example@domain.com"
               maxLength={80}
               aria-describedby="Email"
@@ -255,7 +257,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               keyboardType="numeric"
               id="phoneNumber"
               {...register("phoneNumber")}
-              className="form-control form-control-sm"
+              className="form-control "
               placeholder="Phone Number"
               inputMode="numeric"
               maxLength={10}
@@ -272,7 +274,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
         </div>
         <div className="row mb-3"></div>
         <div className="row mb-3">
-          <div className="col-sm-4">
+          {/* <div className="col-sm-4">
             <Label className="form-text text-start" required>
               Gender
             </Label>
@@ -300,7 +302,44 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                 {errors.gender.message}
               </div>
             )}
+          </div> */}
+
+          <div className="col-sm-4">
+            <Label className="form-text text-start" required>
+              Gender
+            </Label>
+
+            <div className="">
+              <AppFormController
+                name="gender"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label=""
+                    options={[
+                      { id: "Male", name: "Male" },
+                      { id: "Female", name: "Female" },
+                      { id: "Other", name: "Other" },
+                    ]}
+                    placeholder="Select Gender"
+                    required
+                    labelKey="name"
+                    valueKey="id"
+                    value={field.value}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+            </div>
+
+            {errors.gender && (
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
+                {errors.gender.message}
+              </div>
+            )}
           </div>
+
+
           <div className="col-sm-4">
             <Label className="form-text text-start" required>
               Birth Date
@@ -358,7 +397,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
 
             <textarea
               id="currentAddress"
-              className="form-control form-control-sm"
+              className="form-control "
               placeholder="Current Address"
               aria-label="Current Address"
               aria-describedby="basic-icon-default-message2"
@@ -388,7 +427,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
 
             <textarea
               id="permanentAddress"
-              className="form-control form-control-sm"
+              className="form-control "
               placeholder="Permanent Address"
               aria-label="Permanent Address"
               aria-describedby="basic-icon-default-message2"
@@ -419,25 +458,34 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             <Label className="form-text text-start" required>
               Organization
             </Label>
-            <div className="input-group">
-              <select
-                className="form-select form-select-sm"
-                {...register("organizationId")}
-                id="organizationId"
-                aria-label=""
-              >
-                <option disabled value="">
-                  Select Organization
-                </option>
-                {organzationList?.data
-                  .sort((a, b) => a?.name?.localeCompare(b?.name))
-                  .map((item) => (
-                    <option value={item?.id} key={item?.id}>
-                      {item?.name}
-                    </option>
-                  ))}
-              </select>
+
+            <div>
+              <AppFormController
+                name="organizationId"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="" // Already showing label above
+                    options={
+                      organzationList?.data
+                        ?.sort((a, b) => a?.name?.localeCompare(b?.name))
+                        ?.map((item) => ({
+                          id: item.id,
+                          name: item.name,
+                        })) || []
+                    }
+                    placeholder="Select Organization"
+                    required
+                    labelKey="name"
+                    valueKey="id"
+                    value={field.value}
+                    onChange={field.onChange}
+                    className="m-0 form-select-sm w-100"
+                  />
+                )}
+              />
             </div>
+
             {errors.organizationId && (
               <div
                 className="danger-text text-start justify-content-center"
@@ -448,6 +496,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             )}
           </div>
 
+
           <div className="col-sm-6 d-flex align-items-center mt-2">
             <label className="form-check-label d-flex align-items-center">
               <input
@@ -468,46 +517,42 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
           </div>
         </div>
         <div className="row mb-3">
-          <div className="col-sm-4">
-            <Label className="form-text text-start" required>
-              Official Designation
-            </Label>
-            <div className="input-group">
-              <select
-                className="form-select form-select-sm"
-                {...register("jobRoleId")}
-                id="jobRoleId"
-                aria-label=""
-              >
-                <option disabled value="">
-                  Select Role
-                </option>
-                {[...job_role]
-                  .sort((a, b) => a?.name?.localeCompare(b.name))
-                  .map((item) => (
-                    <option value={item?.id} key={item.id}>
-                      {item?.name}{" "}
-                    </option>
-                  ))}
-              </select>
-            </div>
+          <div className="col-sm-4 text-start">
+            <AppFormController
+              name="jobRoleId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Official Designation"
+                  required
+                  options={[...job_role].sort((a, b) =>
+                    a?.name?.localeCompare(b?.name)
+                  )}
+                  placeholder="Select Role"
+                  labelKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  className="m-0"
+                />
+              )}
+            />
+
             {errors.jobRoleId && (
-              <div
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                 {errors.jobRoleId.message}
               </div>
             )}
           </div>
-          <div className="col-sm-4">
+
+          <div className="col-sm-4 mt-n1">
             <Label className="form-text text-start" required>
               Emergency Contact Person
             </Label>
             <input
               type="text"
               {...register("emergencyContactPerson")}
-              className="form-control form-control-sm"
+              className="form-control "
               id="emergencyContactPerson"
               maxLength={50}
               placeholder="Contact Person"
@@ -521,14 +566,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               </div>
             )}
           </div>
-          <div className="col-sm-4">
+          <div className="col-sm-4 mt-n1">
             <Label className="form-text text-start" required>
               Emergency Phone Number
             </Label>
             <input
               type="text"
               {...register("emergencyPhoneNumber")}
-              className="form-control form-control-sm phone-mask"
+              className="form-control  phone-mask"
               id="emergencyPhoneNumber"
               placeholder="Phone Number"
               inputMode="numeric"
@@ -551,7 +596,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             <input
               type="text"
               {...register("aadharNumber")}
-              className="form-control form-control-sm"
+              className="form-control "
               id="aadharNumber"
               placeholder="AADHAR Number"
               maxLength={12}
@@ -569,7 +614,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             <input
               type="text"
               {...register("panNumber")}
-              className="form-control form-control-sm"
+              className="form-control "
               id="panNumber"
               placeholder="PAN Number"
               maxLength={10}
diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx
index 598b1bf8..939c903f 100644
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -37,6 +37,7 @@ import SelectEmployeeServerSide, {
 } from "../common/Forms/SelectFieldServerSide";
 import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const {
@@ -182,15 +183,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         currencyId: data.currency.id || DEFAULT_CURRENCY,
         billAttachments: data.documents
           ? data.documents.map((doc) => ({
-              fileName: doc.fileName,
-              base64Data: null,
-              contentType: doc.contentType,
-              documentId: doc.documentId,
-              fileSize: 0,
-              description: "",
-              preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
-            }))
+            fileName: doc.fileName,
+            base64Data: null,
+            contentType: doc.contentType,
+            documentId: doc.documentId,
+            fileSize: 0,
+            description: "",
+            preSignedUrl: doc.preSignedUrl,
+            isActive: doc.isActive ?? true,
+          }))
           : [],
       });
     }
@@ -236,7 +237,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         {expenseToEdit ? "Update Expense " : "Create New Expense"}
       </h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div className="row my-2 text-start">         
+        <div className="row my-2 text-start">
           <div className="col-12 col-md-6">
             <SelectProjectField
               label="Project"
@@ -259,30 +260,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-            <select
-              className="form-select "
-              id="expenseCategoryId"
-              {...register("expenseCategoryId")}
-            >
-              <option value="" disabled>
-                Select Category
-              </option>
-              {ExpenseLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                expenseCategories?.map((expense) => (
-                  <option key={expense.id} value={expense.id}>
-                    {expense.name}
-                  </option>
-                ))
+
+            <AppFormController
+              name="expenseCategoryId"
+              control={control}
+              rules={{ required: "Expense Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already shown above
+                  placeholder="Select Category"
+                  options={expenseCategories ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={ExpenseLoading}
+                  className="m-0 form-select-sm w-100"
+                />
               )}
-            </select>
-            {errors.expensesCategoryId && (
+            />
+
+            {errors.expenseCategoryId && (
               <small className="danger-text">
-                {errors.expensesCategoryId.message}
+                {errors.expenseCategoryId.message}
               </small>
             )}
           </div>
+
         </div>
 
         <div className="row my-2 text-start">
@@ -290,40 +293,40 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="paymentModeId" className="form-label" required>
               Payment Mode
             </Label>
-            <select
-              className="form-select "
-              id="paymentModeId"
-              {...register("paymentModeId")}
-            >
-              <option value="" disabled>
-                Select Mode
-              </option>
-              {PaymentModeLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                PaymentModes?.map((payment) => (
-                  <option key={payment.id} value={payment.id}>
-                    {payment.name}
-                  </option>
-                ))
+
+            <AppFormController
+              name="paymentModeId"
+              control={control}
+              rules={{ required: "Payment Mode is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label is shown above
+                  placeholder="Select Mode"
+                  options={PaymentModes ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={PaymentModeLoading}
+                  className="m-0 form-select-sm w-100"
+                />
               )}
-            </select>
+            />
+
             {errors.paymentModeId && (
-              <small className="danger-text">
-                {errors.paymentModeId.message}
-              </small>
+              <small className="danger-text">{errors.paymentModeId.message}</small>
             )}
           </div>
-          <div className="col-12 col-md-6 text-start">           
+
+          <div className="col-12 col-md-6 text-start">
             <AppFormController
-              name="paidById"              
+              name="paidById"
               control={control}
               render={({ field }) => (
                 <SelectEmployeeServerSide
-                label="Paid By" required
+                  label="Paid By" required
                   value={field.value}
                   onChange={field.onChange}
-                  isFullObject={false} 
+                  isFullObject={false}
                 />
               )}
             />
@@ -437,32 +440,37 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
         <div className="row mb-4">
-          <div className="col-md-6 text-start ">
+          <div className="col-md-6 text-start">
             <Label htmlFor="currencyId" className="form-label" required>
               Select Currency
             </Label>
-            <select
-              className="form-select "
-              id="currencyId"
-              {...register("currencyId")}
-            >
-              <option value="" disabled>
-                Select Currency
-              </option>
-              {currencyLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                currencies?.map((currency) => (
-                  <option key={currency.id} value={currency.id}>
-                    {`${currency.currencyName} (${currency.symbol}) `}
-                  </option>
-                ))
+
+            <AppFormController
+              name="currencyId"
+              control={control}
+              rules={{ required: "Currency is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already shown above
+                  placeholder="Select Currency"
+                  options={currencies?.map((currency) => ({
+                    id: currency.id,
+                    name: `${currency.currencyName} (${currency.symbol})`,
+                  })) ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={currencyLoading}
+                  className="m-0 form-select-sm w-100"
+                />
               )}
-            </select>
+            />
+
             {errors.currencyId && (
               <small className="danger-text">{errors.currencyId.message}</small>
             )}
           </div>
+
           {expenseCategory?.noOfPersonsRequired && (
             <div className="col-md-6 text-start">
               <Label className="form-label" required>
@@ -553,7 +561,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                      fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -578,8 +586,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             {isPending || createPending
               ? "Please Wait..."
               : expenseToEdit
-              ? "Update"
-              : "Save as Draft"}
+                ? "Update"
+                : "Save as Draft"}
           </button>
         </div>
       </form>
diff --git a/src/components/PaymentRequest/ManagePaymentRequest.jsx b/src/components/PaymentRequest/ManagePaymentRequest.jsx
index 5dfbf88b..4c13534b 100644
--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@@ -30,6 +30,8 @@ import InputSuggestions from "../common/InputSuggestion";
 import { useProfile } from "../../hooks/useProfile";
 import { blockUI } from "../../utils/blockUI";
 import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
   const {
@@ -176,15 +178,15 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         isAdvancePayment: data.isAdvancePayment || false,
         billAttachments: data.attachments
           ? data?.attachments?.map((doc) => ({
-              fileName: doc.fileName,
-              base64Data: null,
-              contentType: doc.contentType,
-              documentId: doc.id,
-              fileSize: 0,
-              description: "",
-              preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
-            }))
+            fileName: doc.fileName,
+            base64Data: null,
+            contentType: doc.contentType,
+            documentId: doc.id,
+            fileSize: 0,
+            description: "",
+            preSignedUrl: doc.preSignedUrl,
+            isActive: doc.isActive ?? true,
+          }))
           : [],
       });
     }
@@ -266,9 +268,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                   shouldDirty: true,
                   shouldValidate: true,
                 })
-                
+
               }
-                disabled={
+              disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
             />
@@ -281,33 +283,33 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-            <select
-              className="form-select "
-              id="expenseCategoryId"
-              {...register("expenseCategoryId")}
-              disabled={
-                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
-              }
-            >
-              <option value="" disabled>
-                Select Category
-              </option>
-              {ExpenseLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                expenseCategories?.map((expense) => (
-                  <option key={expense.id} value={expense.id}>
-                    {expense.name}
-                  </option>
-                ))
+
+            <AppFormController
+              name="expenseCategoryId"
+              control={control}
+              rules={{ required: "Expense Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already above
+                  placeholder="Select Category"
+                  options={expenseCategories ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={ExpenseLoading}
+                  isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
+                  className="m-0 form-select-sm w-100"
+                />
               )}
-            </select>
+            />
+
             {errors.expenseCategoryId && (
               <small className="danger-text">
                 {errors.expenseCategoryId.message}
               </small>
             )}
           </div>
+
         </div>
 
         {/* Title and Advance Payment  */}
@@ -458,30 +460,39 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <Label htmlFor="currencyId" className="form-label" required>
               Currency
             </Label>
-            <select
-              id="currencyId"
-              className="form-select "
-              {...register("currencyId")}
-              disabled={
-                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
-              }
-            >
-              <option value="">Select Currency</option>
 
-              {currencyLoading && <option>Loading...</option>}
+            <AppFormController
+              name="currencyId"
+              control={control}
+              rules={{ required: "Currency is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already above
+                  placeholder="Select Currency"
+                  options={currencyData?.map((currency) => ({
+                    id: currency.id,
+                    name: `${currency.currencyName} (${currency.symbol})`,
+                  })) ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={currencyLoading}
+                  isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
+                  noOptionsMessage={() =>
+                    !currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
+                      ? "No currency found"
+                      : null
+                  }
+                  className="m-0 form-select-sm w-100"
+                />
+              )}
+            />
 
-              {!currencyLoading &&
-                !currencyError &&
-                currencyData?.map((currency) => (
-                  <option key={currency.id} value={currency.id}>
-                    {`${currency.currencyName} (${currency.symbol})`}
-                  </option>
-                ))}
-            </select>
             {errors.currencyId && (
               <small className="danger-text">{errors.currencyId.message}</small>
             )}
           </div>
+
         </div>
 
         {/* Description  */}
@@ -508,7 +519,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         </div>
 
         {/* Upload Document  */}
-        <div className="row my-2 text-start">
+        <div className="row my-4 text-start">
           <div className="col-md-12">
             <Label className="form-label">Upload Bill </Label>
 
@@ -559,7 +570,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                      fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -582,8 +593,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             {createPending || isPending
               ? "Please Wait..."
               : requestToEdit
-              ? "Update"
-              : "Save as Draft"}
+                ? "Update"
+                : "Save as Draft"}
           </button>
         </div>
       </form>
diff --git a/src/components/Project/AssignTask.jsx b/src/components/Project/AssignTask.jsx
index 4f06624d..099747a0 100644
--- a/src/components/Project/AssignTask.jsx
+++ b/src/components/Project/AssignTask.jsx
@@ -18,6 +18,8 @@ import {
 import eventBus from "../../services/eventBus";
 import { useCreateTask } from "../../hooks/useTasks";
 import Label from "../common/Label";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const TaskSchema = (maxPlanned) => {
   return z.object({
@@ -107,7 +109,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     );
 
   const dispatch = useDispatch();
-  const { loading, data: jobRoleData } = useMaster();
+  const { loading, data: jobRoleData } = useMaster("Job Role");
 
   const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
@@ -128,8 +130,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
   const handleCheckboxChange = (event, user) => {
     const updatedSelectedEmployees = event.target.checked
       ? [...(watch("selectedEmployees") || []), user.id].filter(
-          (v, i, a) => a.indexOf(v) === i
-        )
+        (v, i, a) => a.indexOf(v) === i
+      )
       : (watch("selectedEmployees") || []).filter((id) => id !== user.id);
 
     setValue("selectedEmployees", updatedSelectedEmployees);
@@ -241,48 +243,57 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               <div className="row mb-1">
                 <div className="col-12">
                   <div className="row text-start">
-                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
+                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center mt-4">
                       <div>
-                        <select
-                          className="form-select form-select-sm"
-                          value={selectedOrganization || ""}
-                          onChange={(e) =>
-                            setSelectedOrganization(e.target.value)
-                          }
-                        >
-                          {isServiceLoading ? (
-                            <option>Loading...</option>
-                          ) : (
-                            <>
-                              <option value="">--Select Organization--</option>
-                              {organizationList?.map((org,index) => (
-                                <option key={`${org.id}-${index}`} value={org.id}>
-                                  {org.name}
-                                </option>
-                              ))}
-                            </>
+                        <AppFormController
+                          name="organizationId"
+                          control={control}
+                          rules={{ required: "Organization is required" }}
+                          render={({ field }) => (
+                            <SelectField
+                              label="" // No label here, use external label if needed
+                              options={organizationList ?? []}
+                              placeholder="--Select Organization--"
+                              required
+                              labelKey="name"
+                              valueKeyKey="id"
+                              value={field.value || ""}
+                              onChange={field.onChange}
+                              isLoading={isServiceLoading}
+                              className="m-0 form-select-sm w-100"
+                            />
                           )}
-                        </select>
+                        />
+
+                        {errors.organizationId && (
+                          <small className="danger-text">{errors.organizationId.message}</small>
+                        )}
                       </div>
+
                       <div>
-                        <select
-                          className="form-select form-select-sm"
-                          value={selectedService || ""}
-                          onChange={(e) => setSelectedService(e.target.value)}
-                        >
-                          {isOrgLoading ? (
-                            <option>Loading...</option>
-                          ) : (
-                            <>
-                              <option value="">--Select Service--</option>
-                              {serviceList?.map((service,index) => (
-                                <option key={`${service.id}-${index}`}  value={service.id}>
-                                  {service.name}
-                                </option>
-                              ))}
-                            </>
+                        <AppFormController
+                          name="serviceId"
+                          control={control}
+                          rules={{ required: "Service is required" }}
+                          render={({ field }) => (
+                            <SelectField
+                              label="" // No label as you have one above or elsewhere
+                              options={serviceList ?? []}
+                              placeholder="--Select Service--"
+                              required
+                              labelKey="name"
+                              valueKeyKey="id"
+                              value={field.value || ""}
+                              onChange={field.onChange}
+                              isLoading={isOrgLoading}
+                              className="m-0 form-select-sm w-100"
+                            />
                           )}
-                        </select>
+                        />
+
+                        {errors.serviceId && (
+                          <small className="danger-text">{errors.serviceId.message}</small>
+                        )}
                       </div>
                     </div>
                     <div
@@ -292,12 +303,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                       {/* Dropdown */}
                       <div className="dropdown position-relative d-inline-block">
                         <a
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${
-                            selectedRoles.includes("all") ||
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
                             selectedRoles.length === 0
-                              ? "text-secondary"
-                              : "text-primary"
-                          }`}
+                            ? "text-secondary"
+                            : "text-primary"
+                            }`}
                           onClick={() => setOpen(!open)}
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
@@ -409,7 +419,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                         <p className="text-center">Loading employees...</p>
                       </div>
                     ) : filteredEmployees?.length > 0 ? (
-                      filteredEmployees.map((emp,index) => {
+                      filteredEmployees.map((emp, index) => {
                         const jobRole = jobRoleData?.find(
                           (role) => role?.id === emp?.jobRoleId
                         );
@@ -479,14 +489,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 {watch("selectedEmployees")?.length > 0 && (
                   <div className="mt-1">
                     <div className="text-start px-2">
-                      {watch("selectedEmployees")?.map((empId,ind) => {
+                      {watch("selectedEmployees")?.map((empId, ind) => {
                         const emp = employees?.data?.find(
                           (emp) => emp.id === empId
                         );
                         return (
                           emp && (
                             <span
-                               key={`${empId}-${ind}`}
+                              key={`${empId}-${ind}`}
                               className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
                             >
                               {emp.firstName} {emp.lastName}
diff --git a/src/components/Project/Infrastructure/BuildingModel.jsx b/src/components/Project/Infrastructure/BuildingModel.jsx
index f5818905..3072d1d1 100644
--- a/src/components/Project/Infrastructure/BuildingModel.jsx
+++ b/src/components/Project/Infrastructure/BuildingModel.jsx
@@ -3,11 +3,11 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSelector } from "react-redux";
-import { getCachedData } from "../../../slices/apiDataManager";
 import showToast from "../../../services/toastService";
 import { useManageProjectInfra } from "../../../hooks/useProjects";
-import useSelect from "../../common/useSelect";
 import Label from "../../common/Label";
+import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
 
 const buildingSchema = z.object({
   Id: z.string().optional(),
@@ -22,14 +22,8 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    watch,
-    reset,
-  } = useForm({
+
+  const methods = useForm({
     resolver: zodResolver(buildingSchema),
     defaultValues: {
       Id: "0",
@@ -37,12 +31,23 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
       description: "",
     },
   });
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    watch,
+    reset,
+    setValue,
+    formState: { errors },
+  } = methods;
+
   const watchedId = watch("Id");
 
   const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
-    onSuccessCallback: (data, variables) => {
+    onSuccessCallback: () => {
       showToast(
-        watchedId != "0"
+        watchedId !== "0"
           ? "Building updated Successfully"
           : "Building created Successfully",
         "success"
@@ -79,7 +84,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
         description: editingBuilding.description,
       });
     }
-  }, [editingBuilding]);
+  }, [editingBuilding, reset]);
 
   const onSubmitHandler = (data) => {
     const payload = {
@@ -88,95 +93,109 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
       projectId: selectedProject,
     };
 
-    let infraObject = [
+    const infraObject = [
       {
         building: payload,
         floor: null,
         workArea: null,
       },
     ];
+
     ManageBuilding({ infraObject, projectId: selectedProject });
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
-      <h5 className="text-center mb-2">Manage Buildings</h5>
-      <div className="col-12 text-start">
-        <label className="form-label">Select Building</label>
-        <select
-          {...register("Id")}
-          className="select2 form-select form-select-sm"
-        >
-          <option value="0">Add New Building</option>
-          {sortedBuildings.length > 0 ? (
-            sortedBuildings.map((b) => (
-              <option key={b.id} value={b.id}>
-                {b.buildingName}
-              </option>
-            ))
-          ) : (
-            <option disabled>No buildings found</option>
+    <AppFormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
+        <h5 className="text-center mb-2">Manage Buildings</h5>
+
+        {/* Building Select */}
+        <div className="col-12 text-start">
+          <Label htmlFor="Id" className="form-label">
+            Select Building
+          </Label>
+          <AppFormController
+            name="Id"
+            control={control}
+            rules={{ required: "Building is required" }}
+            render={({ field }) => (
+              <SelectField
+                label=""
+                placeholder="Select Building"
+                options={[
+                  { id: "0", name: "Add New Building" },
+                  ...(sortedBuildings?.map((b) => ({
+                    id: String(b.id),
+                    name: b.buildingName,
+                  })) ?? []),
+                ]}
+                value={field.value || ""}
+                onChange={field.onChange}
+                required
+                noOptionsMessage={() =>
+                  !sortedBuildings || sortedBuildings.length === 0
+                    ? "No buildings found"
+                    : null
+                }
+                className="m-0 form-select-sm w-100"
+              />
+            )}
+          />
+          {errors.Id && <span className="danger-text">{errors.Id.message}</span>}
+        </div>
+
+        {/* Name */}
+        <div className="col-12 text-start">
+          <Label className="form-label" required>
+            {watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
+          </Label>
+          <input
+            {...register("name")}
+            type="text"
+            className="form-control "
+          />
+          {errors.name && <span className="danger-text">{errors.name.message}</span>}
+        </div>
+
+        {/* Description */}
+        <div className="col-12 text-start">
+          <Label className="form-label" required>
+            Description
+          </Label>
+          <textarea
+            {...register("description")}
+            rows="5"
+            maxLength="160"
+            className="form-control "
+          />
+          {errors.description && (
+            <span className="danger-text">{errors.description.message}</span>
           )}
-        </select>
-        {errors.Id && <span className="danger-text">{errors.Id.message}</span>}
-      </div>
+        </div>
 
-      {/* Name */}
-      <div className="col-12 text-start">
-        <Label className="form-label" required>
-          {watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
-        </Label>
-        <input
-          {...register("name")}
-          type="text"
-          className="form-control form-control-sm"
-        />
-        {errors.name && (
-          <span className="danger-text">{errors.name.message}</span>
-        )}
-      </div>
-
-      {/* Description */}
-      <div className="col-12 text-start">
-        <Label className="form-label" required>Description</Label>
-        <textarea
-          {...register("description")}
-          rows="5"
-          maxLength="160"
-          className="form-control form-control-sm"
-        />
-        {errors.description && (
-          <span className="danger-text">{errors.description.message}</span>
-        )}
-      </div>
-
-      <div className="col-12 text-end mt-6 my-2">
-        <button
-          type="reset"
-          className="btn btn-sm btn-label-secondary me-3"
-          disabled={isPending}
-          onClick={() => {
-            onClose();
-            reset();
-          }}
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="btn btn-sm btn-primary"
-          disabled={isPending}
-        >
-          {isPending
-            ? "Please wait..."
-            : watchedId !== "0"
-            ? "Edit Building"
-            : "Add Building"}
-        </button>
-
-        
-      </div>
-    </form>
+        {/* Buttons */}
+        <div className="col-12 text-end mt-6 my-2">
+          <button
+            type="reset"
+            className="btn btn-sm btn-label-secondary me-3"
+            disabled={isPending}
+            onClick={() => {
+              onClose();
+              reset();
+            }}
+          >
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
+            {isPending
+              ? "Please wait..."
+              : watchedId !== "0"
+              ? "Edit Building"
+              : "Add Building"}
+          </button>
+        </div>
+      </form>
+    </AppFormProvider>
   );
 };
 
diff --git a/src/components/Project/Infrastructure/EditActivityModal.jsx b/src/components/Project/Infrastructure/EditActivityModal.jsx
index 088f0556..8134ae95 100644
--- a/src/components/Project/Infrastructure/EditActivityModal.jsx
+++ b/src/components/Project/Infrastructure/EditActivityModal.jsx
@@ -12,6 +12,8 @@ import { useManageTask } from "../../../hooks/useProjects";
 import { cacheData, getCachedData } from "../../../slices/apiDataManager";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import showToast from "../../../services/toastService";
+import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
 
 const taskSchema = z
   .object({
@@ -37,17 +39,7 @@ const EditActivityModal = ({
   const { activities, loading: loadingActivities } = useActivitiesMaster();
   const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
   const [selectedActivity, setSelectedActivity] = useState(null);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-    setValue,
-    getValues,
-    watch,
-  } = useForm({
-    resolver: zodResolver(taskSchema),
+  const methods = useForm({
     defaultValues: {
       activityID: "",
       workCategoryId: "",
@@ -55,7 +47,11 @@ const EditActivityModal = ({
       completedWork: 0,
       comment: "",
     },
+    resolver: zodResolver(taskSchema),
   });
+
+  const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
+
   const { mutate: UpdateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success")
@@ -63,8 +59,6 @@ const EditActivityModal = ({
     }
   });
 
-
-
   const activityID = watch("activityID");
 
   const sortedActivities = useMemo(
@@ -126,158 +120,168 @@ const EditActivityModal = ({
     });
   }
   return (
-    <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Task</h5>
-      </div>
+    <AppFormProvider {...methods}>
+      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Task</h5>
+        </div>
 
-      <div className="row g-2 text-start">
-        <div className="col-12 col-md-6">
-          <label className="form-label">Select Building</label>
+        <div className="row g-2 text-start">
+          <div className="col-12 col-md-6">
+            <label className="form-label">Select Building</label>
+            <input
+              className="form-control"
+              value={building?.buildingName}
+              disabled
+            />
+          </div>
+
+          <div className="col-12 col-md-6">
+            <label className="form-label">Select Floor</label>
+            <input
+              className="form-control"
+              value={floor?.floorName}
+              disabled
+            />
+          </div>
+        </div>
+
+        <div className="col-12 text-start">
+          <label className="form-label">Select Work Area</label>
           <input
-            className="form-control form-control-sm"
-            value={building?.buildingName}
+            className="form-control"
+            value={workArea?.areaName}
+            disabled
+          />
+        </div>
+        <div className="col-12 text-start">
+          <label className="form-label">Select Service</label>
+          <input
+            className="form-control"
+            value={
+              workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
+            }
             disabled
           />
         </div>
 
-        <div className="col-12 col-md-6">
-          <label className="form-label">Select Floor</label>
-          <input
-            className="form-control form-control-sm"
-            value={floor?.floorName}
+
+        <div className="col-12 text-start">
+          <label className="form-label">Select Activity</label>
+          <select
+            {...register("activityID")}
+            className="form-select"
             disabled
+          >
+            <option >Select Activity</option>
+            {loadingActivities ? (
+              <option>Loading...</option>
+            ) : (
+              sortedActivities.map((a) => (
+                <option key={a.id} value={a.id}>
+                  {a.activityName}
+                </option>
+              ))
+            )}
+          </select>
+          {errors.activityID && (
+            <p className="danger-text">{errors.activityID.message}</p>
+          )}
+        </div>
+
+        <div className="col-12 text-start">
+          <AppFormController
+            name="workCategoryId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Select Work Category"
+                placeholder="Select Category"
+                options={
+                  loadingCategories
+                    ? []
+                    : sortedCategories?.map((c) => ({
+                      id: String(c.id),
+                      name: c.name,
+                    })) ?? []
+                }
+                isLoading={loadingCategories}
+                labelKey="name"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                className="m-0"
+              />
+            )}
+          />
+
+          {errors.workCategoryId && (
+            <small className="danger-text">{errors.workCategoryId.message}</small>
+          )}
+        </div>
+
+
+        <div className="col-5 text-start">
+          <label className="form-label">Planned Work</label>
+          <input
+            {...register("plannedWork", { valueAsNumber: true })}
+            type="number"
+            className="form-control"
+          />
+          {errors.plannedWork && (
+            <p className="danger-text">{errors.plannedWork.message}</p>
+          )}
+        </div>
+
+        <div className="col-5 text-start">
+          <label className="form-label">Completed Work</label>
+          <input
+            {...register("completedWork", { valueAsNumber: true })}
+            type="number"
+            disabled={getValues("completedWork") > 0}
+            className="form-control"
+          />
+          {errors.completedWork && (
+            <p className="danger-text">{errors.completedWork.message}</p>
+          )}
+        </div>
+
+        <div className="col-2 text-start">
+          <label className="form-label">Unit</label>
+          <input
+            className="form-control"
+            disabled
+            value={selectedActivity?.unitOfMeasurement || ""}
           />
         </div>
-      </div>
 
-      <div className="col-12 text-start">
-        <label className="form-label">Select Work Area</label>
-        <input
-          className="form-control form-control-sm"
-          value={workArea?.areaName}
-          disabled
-        />
-      </div>
-      <div className="col-12 text-start">
-        <label className="form-label">Select Service</label>
-        <input
-          className="form-control form-control-sm"
-          value={
-            workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
-          }
-          disabled
-        />
-      </div>
-
-
-      <div className="col-12 text-start">
-        <label className="form-label">Select Activity</label>
-        <select
-          {...register("activityID")}
-          className="form-select form-select-sm"
-          disabled
-        >
-          <option >Select Activity</option>
-          {loadingActivities ? (
-            <option>Loading...</option>
-          ) : (
-            sortedActivities.map((a) => (
-              <option key={a.id} value={a.id}>
-                {a.activityName}
-              </option>
-            ))
+        <div className="col-12 text-start">
+          <label className="form-label">Comment</label>
+          <textarea {...register("comment")} rows="2" className="form-control" />
+          {errors.comment && (
+            <div className="danger-text">{errors.comment.message}</div>
           )}
-        </select>
-        {errors.activityID && (
-          <p className="danger-text">{errors.activityID.message}</p>
-        )}
-      </div>
+        </div>
 
-      <div className="col-12 text-start">
-        <label className="form-label">Select Work Category</label>
-        <select
-          {...register("workCategoryId")}
-          className="form-select form-select-sm"
-        >
-          <option disabled>Select Category</option>
-          {loadingCategories ? (
-            <option>Loading...</option>
-          ) : (
-            sortedCategories.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))
-          )}
-        </select>
-        {errors.workCategoryId && (
-          <p className="danger-text">{errors.workCategoryId.message}</p>
-        )}
-      </div>
-
-      <div className="col-5 text-start">
-        <label className="form-label">Planned Work</label>
-        <input
-          {...register("plannedWork", { valueAsNumber: true })}
-          type="number"
-          step="0.01"   // <-- allows 2 decimal places
-          className="form-control form-control-sm"
-        />
-
-        {errors.plannedWork && (
-          <p className="danger-text">{errors.plannedWork.message}</p>
-        )}
-      </div>
-
-      <div className="col-5 text-start">
-        <label className="form-label">Completed Work</label>
-        <input
-          {...register("completedWork", { valueAsNumber: true })}
-          type="number"
-          disabled={getValues("completedWork") > 0}
-          className="form-control form-control-sm"
-        />
-        {errors.completedWork && (
-          <p className="danger-text">{errors.completedWork.message}</p>
-        )}
-      </div>
-
-      <div className="col-2 text-start">
-        <label className="form-label">Unit</label>
-        <input
-          className="form-control form-control-sm"
-          disabled
-          value={selectedActivity?.unitOfMeasurement || ""}
-        />
-      </div>
-
-      <div className="col-12 text-start">
-        <label className="form-label">Comment</label>
-        <textarea {...register("comment")} rows="2" className="form-control" />
-        {errors.comment && (
-          <div className="danger-text">{errors.comment.message}</div>
-        )}
-      </div>
-
-      <div className="col-12 text-end mt-5">
-        <button
-          type="button"
-          className="btn btn-sm btn-label-secondary me-2"
-          onClick={onClose}
-          disabled={isPending}
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="btn btn-sm btn-primary"
-          disabled={isPending}
-        >
-          {isPending ? "Please Wait..." : "Edit Task"}
-        </button>
-      </div>
-    </form>
+        <div className="col-12 text-end mt-5">
+          <button
+            type="button"
+            className="btn btn-sm btn-label-secondary me-2"
+            onClick={onClose}
+            disabled={isPending}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-sm btn-primary"
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : "Edit Task"}
+          </button>
+        </div>
+      </form>
+    </AppFormProvider>
   );
 };
 
diff --git a/src/components/Project/Infrastructure/FloorModel.jsx b/src/components/Project/Infrastructure/FloorModel.jsx
index 44fa2aca..c9ae9d43 100644
--- a/src/components/Project/Infrastructure/FloorModel.jsx
+++ b/src/components/Project/Infrastructure/FloorModel.jsx
@@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
 import { useManageProjectInfra } from "../../../hooks/useProjects";
 import { useSelector } from "react-redux";
 import Label from "../../common/Label";
+import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
 
 // Schema
 const floorSchema = z.object({
@@ -27,17 +29,12 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
   );
   const [selectedBuilding, setSelectedBuilding] = useState(null);
 
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    reset,
-    watch,
-    formState: { errors },
-  } = useForm({
+  const methods = useForm({
     defaultValues,
     resolver: zodResolver(floorSchema),
   });
+
+  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
   const watchId = watch("id");
   const watchBuildingId = watch("buildingId");
   const { mutate: ManageFloor, isPending } = useManageProjectInfra({
@@ -48,7 +45,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
           : "Floor created Successfully",
         "success"
       );
-      reset({ id: "0", floorName: ""});
+      reset({ id: "0", floorName: "" });
       // onClose?.();
     },
   });
@@ -98,94 +95,139 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
   };
 
   return (
-    <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Floor</h5>
-      </div>
-      <div className="col-12 text-start">
-        <Label className="form-label" required>Select Building</Label>
-        <select
-          {...register("buildingId")}
-          className="form-select form-select-sm"
-          onChange={handleBuildingChange}
-        >
-          <option value="0">Select Building</option>
-          {project?.length > 0 &&
-            project
-              .filter((b) => b.buildingName)
-              .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
-              .map((b) => (
-                <option key={b.id} value={b.id}>
-                  {b.buildingName}
-                </option>
-              ))}
-        </select>
-        {errors.buildingId && (
-          <p className="danger-text">{errors.buildingId.message}</p>
-        )}
-      </div>
-
-      {watchBuildingId !== "0" && (
-        <>
-          <div className="col-12 text-start">
-            <label className="form-label">Select Floor</label>
-            <select
-              {...register("id")}
-              className="form-select form-select-sm"
-              onChange={handleFloorChange}
-            >
-              <option value="0">Add New Floor</option>
-              {selectedBuilding?.floors?.length > 0 &&
-                selectedBuilding.floors
-                  .filter((f) => f.floorName)
-                  .sort((a, b) => a.floorName.localeCompare(b.floorName))
-                  .map((f) => (
-                    <option key={f.id} value={f.id}>
-                      {f.floorName}
-                    </option>
-                  ))}
-            </select>
-          </div>
-
-          <div className="col-12 text-start">
-            <Label className="form-label" required>
-              {watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
-            </Label>
-            <input
-              {...register("floorName")}
-              className="form-control form-control-sm"
-              placeholder="Floor Name"
-            />
-            {errors.floorName && (
-              <p className="danger-text">{errors.floorName.message}</p>
+    <AppFormProvider {...methods}>
+      <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Floor</h5>
+        </div>
+        <div className="col-12 text-start">
+          <Label className="form-label" required>
+            Select Building
+          </Label>
+          <AppFormController
+            name="buildingId"
+            control={control}
+            rules={{ required: "Building is required" }}
+            render={({ field }) => (
+              <SelectField
+                label=""
+                placeholder="Select Building"
+                options={
+                  project
+                    ?.filter((b) => b.buildingName)
+                    .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
+                    .map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
+                }
+                value={field.value || ""}
+                onChange={(value) => {
+                  field.onChange(value);
+                  setValue("id", "0");
+                  setValue("floorName", "");
+                }}
+                required
+                noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
+                className="m-0 form-select-sm w-100"
+              />
             )}
-          </div>
-        </>
-      )}
+          />
+          {errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
+        </div>
 
-      <div className="col-12 text-end mt-6 my-2">
-         <button
-          type="button"
-          className="btn btn-sm btn-label-secondary me-3"
-          disabled={isPending}
-          onClick={onClose}
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="btn btn-sm btn-primary"
-          disabled={isPending}
-        >
-          {isPending
-            ? "Please Wait"
-            : watchId !== "0"
-            ? "Edit Floor"
-            : "Add Floor"}
-        </button>
-       
-      </div>
-    </form>
+        {watchBuildingId !== "0" && (
+          <>
+            <div className="col-12 text-start">
+              <Label className="form-label">
+                Select Floor
+              </Label>
+
+              <AppFormController
+                name="id"
+                control={control}
+                rules={{ required: "Floor is required" }}
+                render={({ field }) => {
+                  // Prepare options
+                  const floorOptions = [
+                    { id: "0", name: "Add New Floor" },
+                    ...(selectedBuilding?.floors
+                      ?.filter((f) => f.floorName)
+                      .sort((a, b) => a.floorName.localeCompare(b.floorName))
+                      .map((f) => ({ id: f.id, name: f.floorName })) ?? []),
+                  ];
+
+                  return (
+                    <SelectField
+                      label=""
+                      placeholder="Select Floor"
+                      options={floorOptions}
+                      value={field.value || "0"} // default to "0"
+                      onChange={(val) => {
+                        field.onChange(val); // update react-hook-form
+
+                        if (val === "0") {
+                          setValue("floorName", ""); // clear for new floor
+                        } else {
+                          const floor = selectedBuilding?.floors?.find(f => f.id === val);
+                          setValue("floorName", floor?.floorName || "");
+                        }
+                      }}
+                      required
+                      noOptionsMessage={() =>
+                        !selectedBuilding?.floors || selectedBuilding.floors.length === 0
+                          ? "No floors found"
+                          : null
+                      }
+                      className="m-0 form-select-sm w-100"
+                    />
+                  );
+                }}
+              />
+
+              {errors.id && (
+                <span className="danger-text">{errors.id.message}</span>
+              )}
+            </div>
+
+
+            <div className="col-12 text-start">
+              <Label className="form-label" required>
+                {watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
+              </Label>
+              <input
+                {...register("floorName")}
+                className="form-control"
+                placeholder="Floor Name"
+              />
+              {errors.floorName && (
+                <p className="danger-text">{errors.floorName.message}</p>
+              )}
+            </div>
+          </>
+        )}
+
+        <div className="col-12 text-end mt-6 my-2">
+          <button
+            type="button"
+            className="btn btn-sm btn-label-secondary me-3"
+            disabled={isPending}
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-sm btn-primary"
+            disabled={isPending}
+          >
+            {isPending
+              ? "Please Wait"
+              : watchId !== "0"
+                ? "Edit Floor"
+                : "Add Floor"}
+          </button>
+
+        </div>
+      </form>
+    </AppFormProvider>
   );
 };
 
diff --git a/src/components/Project/Infrastructure/TaskModel.jsx b/src/components/Project/Infrastructure/TaskModel.jsx
index 6e4e7546..257dda24 100644
--- a/src/components/Project/Infrastructure/TaskModel.jsx
+++ b/src/components/Project/Infrastructure/TaskModel.jsx
@@ -8,10 +8,12 @@ import {
   useGroups,
   useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
-import { useManageTask,  useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
 import { useSelectedProject } from "../../../slices/apiDataManager";
+import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
 
 const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
@@ -76,19 +78,13 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
     setValue("activityID", "");
   };
 
-
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    reset,
-    formState: { errors },
-  } = useForm({
-    resolver: zodResolver(taskSchema),
+  const methods = useForm({
     defaultValues: defaultModel,
+    resolver: zodResolver(taskSchema),
   });
 
+  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
+
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activityData, setActivityData] = useState([]);
   const [categoryData, setCategoryData] = useState([]);
@@ -112,10 +108,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { mutate: CreateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success");
-      setValue("activityID",""),
-      setValue("plannedWork",0),
-      setValue("completedWork",0)
-      setValue("comment","")
+      setValue("activityID", ""),
+        setValue("plannedWork", 0),
+        setValue("completedWork", 0)
+      setValue("comment", "")
     },
   });
   useEffect(() => {
@@ -148,224 +144,290 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   };
 
   return (
-    <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Task</h5>
-      </div>
-      <div className="col-6 text-start">
-        <Label className="form-label" required>Select Building</Label>
-        <select
-          className="form-select form-select-sm"
-          {...register("buildingID")}
-        >
-          <option value="">Select Building</option>
-          {project
-            ?.filter((b) => b?.buildingName)
-            ?.sort((a, b) => a?.buildingName.localeCompare(b.buildingName))
-            ?.map((b) => (
-              <option key={b.id} value={b.id}>
-                {b.buildingName}
-              </option>
-            ))}
-        </select>
-        {errors.buildingID && (
-          <p className="danger-text">{errors.buildingID.message}</p>
-        )}
-      </div>
-
-      {selectedBuilding && (
+    <AppFormProvider {...methods}>
+      <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Task</h5>
+        </div>
+        {/* Select Building */}
         <div className="col-6 text-start">
-          <Label className="form-label" required>Select Floor</Label>
-          <select
-            className="form-select form-select-sm"
-            {...register("floorId")}
-          >
-            <option value="">Select Floor</option>
-            {selectedBuilding.floors
-              ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
-              ?.map((f) => (
-                <option key={f.id} value={f.id}>
-                  {f.floorName}
-                </option>
-              ))}
-          </select>
-          {errors.floorId && (
-            <p className="danger-text">{errors.floorId.message}</p>
-          )}
-        </div>
-      )}
-
-      {/* Work Area Selection */}
-      {selectedFloor && (
-        <div className="col-12 text-start">
-          <Label className="form-label" required>Select Work Area</Label>
-          <select
-            className="form-select form-select-sm"
-            {...register("workAreaId")}
-          >
-            <option value="">Select Work Area</option>
-            {selectedFloor.workAreas
-              ?.sort((a, b) => a.areaName.localeCompare(b.areaName))
-              ?.map((w) => (
-                <option key={w.id} value={w.id}>
-                  {w.areaName}
-                </option>
-              ))}
-          </select>
-          {errors.workAreaId && (
-            <p className="danger-text">{errors.workAreaId.message}</p>
-          )}
-        </div>
-      )}
-
-      {/* Services Selection */}
-      {selectedWorkArea && (
-        <div className="col-12 text-start">
-          <Label className="form-label" required>Select Service</Label>
-          <select
-            className="form-select form-select-sm"
-            {...register("serviceId")}
-            value={selectedService}
-            // onChange={handleServiceChange}
-            onChange={(e) => {
-              handleServiceChange(e);
-              setValue("serviceId", e.target.value);
-            }}
-          >
-            <option value="">Select Service</option>
-            {servicesLoading && <option>Loading...</option>}
-            {assignedServices?.map((service) => (
-              <option key={service.id} value={service.id}>
-                {service.name}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
-
-      {/* Activity Group (Organization) Selection */}
-      {selectedService && (
-        <div className="col-12 text-start">
-          <Label className="form-label" required>Select Activity Group</Label>
-          <select
-            className="form-select form-select-sm"
-            {...register("activityGroupId")}
-            value={selectedGroup}
-            onChange={handleGroupChange}
-          >
-            <option value="">Select Group</option>
-            {groupsLoading && <option>Loading...</option>}
-            {groups?.map((g) => (
-              <option key={g.id} value={g.id}>{g.name}</option>
-            ))}
-          </select>
-          {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
-        </div>
-      )}
-
-
-      {/* Activity Selection */}
-      {selectedGroup && (
-        <div className="col-12 text-start">
-          <Label className="form-label" required>Select Activity</Label>
-          <select className="form-select form-select-sm" {...register("activityID")}>
-            <option value="">Select Activity</option>
-            {activitiesLoading && <option>Loading...</option>}
-            {activities?.map((a) => (
-              <option key={a.id} value={a.id}>{a.activityName}</option>
-            ))}
-          </select>
-          {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
-        </div>
-      )}
-
-      {watchActivityId && (
-        <div className="col-12 text-start">
-          <label className="form-label">Select Work Category</label>
-          <select
-            className="form-select form-select-sm"
-            {...register("workCategoryId")}
-          >
-            {categoryData.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))}
-          </select>
-          {errors.workCategoryId && (
-            <p className="danger-text">{errors.workCategoryId.message}</p>
-          )}
-        </div>
-      )}
-
-      {selectedActivity && selectedCategory && (
-        <>
-          <div className="col-5 text-start">
-            <Label className="form-label" required>Planned Work</Label>
-            <input
-              type="number"
-              className="form-control form-control-sm"
-              {...register("plannedWork", { valueAsNumber: true })}
-            />
-            {errors.plannedWork && (
-              <p className="danger-text">{errors.plannedWork.message}</p>
+          <AppFormController
+            name="buildingID"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Select Building"
+                options={project ?? []}
+                placeholder="Select Building"
+                required
+                labelKey="buildingName"
+                valueKey="id"
+                value={field.value}
+                onChange={(value) => {
+                  field.onChange(value);
+                  setValue("floorId", "");
+                  setValue("workAreaId", "");
+                  setSelectedService("");
+                  setSelectedGroup("");
+                }}
+                className="m-0"
+              />
             )}
-          </div>
-          <div className="col-5 text-start">
-            <label className="form-label">Completed Work</label>
-            <input
-              type="number"
-              className="form-control form-control-sm"
-              {...register("completedWork", { valueAsNumber: true })}
-            />
-            {errors.completedWork && (
-              <p className="danger-text">{errors.completedWork.message}</p>
-            )}
-          </div>
-          <div className="col-2 text-start">
-            <label className="form-label">Unit</label>
-            <input
-              type="text"
-              className="form-control form-control-sm"
-              disabled
-              value={selectedActivity?.unitOfMeasurement || ""}
-            />
-          </div>
-        </>
-      )}
-
-      {selectedActivity && selectedCategory && (
-        <div className="col-12 text-start">
-          <label className="form-label">Comment</label>
-          <textarea
-            className="form-control"
-            rows="2"
-            {...register("comment")}
           />
-          {errors.comment && (
-            <p className="danger-text">{errors.comment.message}</p>
+          {errors.buildingID && (
+            <small className="danger-text">{errors.buildingID.message}</small>
           )}
         </div>
-      )}
 
-      <div className="col-12 text-end mt-6 my-2">
-        <button
-          type="button"
-          className="btn btn-sm btn-label-secondary me-3"
-          onClick={onClose}
-        >
-          Cancel
-        </button>
-        <button
-          type="submit"
-          className="btn btn-sm btn-primary"
-          // disabled={isSubmitting}
-           disabled={isPending}
-        >
-          {isPending ? "Please Wait..." : "Add Task"}
-        </button>
-      </div>
-    </form>
+        {/* Select Floor */}
+        {selectedBuilding && (
+          <div className="col-6 text-start">
+            <AppFormController
+              name="floorId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Floor"
+                  options={selectedBuilding?.floors ?? []}
+                  placeholder={
+                    selectedBuilding?.floors?.length > 0
+                      ? "Select Floor"
+                      : "No Floor Found"
+                  }
+                  required
+                  labelKey="floorName"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setValue("workAreaId", "");
+                  }}
+                  className="m-0"
+                />
+              )}
+            />
+            {errors.floorId && (
+              <small className="danger-text">{errors.floorId.message}</small>
+            )}
+          </div>
+        )}
+
+        {/* Select Work Area */}
+        {selectedFloor && (
+          <div className="col-12 text-start">
+            <AppFormController
+              name="workAreaId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Work Area"
+                  options={selectedFloor?.workAreas ?? []}
+                  placeholder="Select Work Area"
+                  required
+                  labelKey="areaName"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setSelectedService("");
+                    setSelectedGroup("");
+                  }}
+                  className="m-0"
+                />
+              )}
+            />
+            {errors.workAreaId && (
+              <small className="danger-text">{errors.workAreaId.message}</small>
+            )}
+          </div>
+        )}
+
+        {/* Select Service */}
+        {selectedWorkArea && (
+          <div className="col-12 text-start">
+            <AppFormController
+              name="serviceId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Service"
+                  options={assignedServices ?? []}
+                  placeholder="Select Service"
+                  required
+                  labelKey="name"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setSelectedService(value);
+                    setSelectedGroup("");
+                    setValue("activityGroupId", "");
+                    setValue("activityID", "");
+                  }}
+                  isLoading={servicesLoading}
+                  className="m-0"
+                />
+              )}
+            />
+            {errors.serviceId && (
+              <small className="danger-text">{errors.serviceId.message}</small>
+            )}
+          </div>
+        )}
+
+        {/* Select Activity Group */}
+        {selectedService && (
+          <div className="col-12 text-start">
+            <AppFormController
+              name="activityGroupId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Activity Group"
+                  options={groups ?? []}
+                  placeholder="Select Activity Group"
+                  required
+                  labelKey="name"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setSelectedGroup(value);
+                    setValue("activityID", "");
+                  }}
+                  isLoading={groupsLoading}
+                  className="m-0"
+                />
+              )}
+            />
+            {errors.activityGroupId && (
+              <small className="danger-text">{errors.activityGroupId.message}</small>
+            )}
+          </div>
+        )}
+
+
+        {/* Select Activity */}
+        {selectedGroup && (
+          <div className="col-12 text-start">
+            <AppFormController
+              name="activityID"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Activity"
+                  options={activities ?? []}
+                  placeholder="Select Activity"
+                  required
+                  labelKey="activityName"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={activitiesLoading}
+                  className="m-0"
+                />
+              )}
+            />
+            {errors.activityID && (
+              <small className="danger-text">{errors.activityID.message}</small>
+            )}
+          </div>
+        )}
+
+        {watchActivityId && (
+          <div className="col-12 text-start">
+            <AppFormController
+              name="workCategoryId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Work Category"
+                  options={categoryData ?? []}
+                  placeholder="Select Work Category"
+                  required
+                  labelKey="name"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  className="m-0"
+                />
+              )}
+            />
+            {errors.workCategoryId && (
+              <small className="danger-text">{errors.workCategoryId.message}</small>
+            )}
+          </div>
+        )}
+
+        {selectedActivity && selectedCategory && (
+          <>
+            <div className="col-5 text-start">
+              <Label className="form-label" required>Planned Work</Label>
+              <input
+                type="number"
+                className="form-control "
+                {...register("plannedWork", { valueAsNumber: true })}
+              />
+              {errors.plannedWork && (
+                <p className="danger-text">{errors.plannedWork.message}</p>
+              )}
+            </div>
+            <div className="col-5 text-start">
+              <label className="form-label">Completed Work</label>
+              <input
+                type="number"
+                className="form-control "
+                {...register("completedWork", { valueAsNumber: true })}
+              />
+              {errors.completedWork && (
+                <p className="danger-text">{errors.completedWork.message}</p>
+              )}
+            </div>
+            <div className="col-2 text-start">
+              <label className="form-label">Unit</label>
+              <input
+                type="text"
+                className="form-control "
+                disabled
+                value={selectedActivity?.unitOfMeasurement || ""}
+              />
+            </div>
+          </>
+        )}
+
+        {selectedActivity && selectedCategory && (
+          <div className="col-12 text-start">
+            <label className="form-label">Comment</label>
+            <textarea
+              className="form-control"
+              rows="2"
+              {...register("comment")}
+            />
+            {errors.comment && (
+              <p className="danger-text">{errors.comment.message}</p>
+            )}
+          </div>
+        )}
+
+        <div className="col-12 text-end mt-6 my-2">
+          <button
+            type="button"
+            className="btn btn-sm btn-label-secondary me-3"
+            onClick={onClose}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-sm btn-primary"
+            // disabled={isSubmitting}
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : "Add Task"}
+          </button>
+        </div>
+      </form>
+    </AppFormProvider>
   );
 };
 
diff --git a/src/components/Project/Infrastructure/WorkAreaModel.jsx b/src/components/Project/Infrastructure/WorkAreaModel.jsx
index c8f04165..c9b47c4f 100644
--- a/src/components/Project/Infrastructure/WorkAreaModel.jsx
+++ b/src/components/Project/Infrastructure/WorkAreaModel.jsx
@@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
 import { useManageProjectInfra } from "../../../hooks/useProjects";
 import { useSelector } from "react-redux";
 import Label from "../../common/Label";
+import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
 
 const workAreaSchema = z.object({
   id: z.string().optional(),
@@ -26,19 +28,14 @@ const defaultModel = {
 const WorkAreaModel = ({ project, onSubmit, onClose }) => {
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
-  const selectedProject = useSelector((store) => store.localVariables.projectId)
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    reset,
-    watch,
-  } = useForm({
-    resolver: zodResolver(workAreaSchema),
+  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const methods = useForm({
     defaultValues: defaultModel,
+    resolver: zodResolver(workAreaSchema),
   });
 
+  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
+
   const watchBuildingId = watch("buildingId");
   const watchFloorId = watch("floorId");
   const watchWorkAreaId = watch("id");
@@ -104,99 +101,122 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
   };
 
   return (
-    <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Work Area</h5>
-      </div>
-      <div className="col-12 col-sm-6 text-start">
-        <Label className="form-label" required>Select Building</Label>
-        <select
-          {...register("buildingId")}
-          className="form-select form-select-sm"
-        >
-          <option value="0">Select Building</option>
-          {project?.map((b) => (
-            <option key={b.id} value={b.id}>
-              {b.buildingName}
-            </option>
-          ))}
-        </select>
-        {errors.buildingId && (
-          <p className="danger-text">{errors.buildingId.message}</p>
-        )}
-      </div>
-
-      {watchBuildingId !== "0" && (
+    <AppFormProvider {...methods}>
+      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Work Area</h5>
+        </div>
         <div className="col-12 col-sm-6 text-start">
-          <Label className="form-label" required>Select Floor</Label>
-          <select
-            {...register("floorId")}
-            className="form-select form-select-sm"
-          >
-            <option value="0">
-              {selectedBuilding?.floor?.length > 0
-                ? "NO Floor Found"
-                : "Select Floor"}
-            </option>
+          <AppFormController
+            name="buildingId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Select Building"
+                options={project ?? []}
+                placeholder="Select Building"
+                required
+                labelKey="buildingName"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                className="m-0"
+              />
+            )}
+          />
 
-            {selectedBuilding?.floors?.map((f) => (
-              <option key={f.id} value={f.id}>
-                {f.floorName}
-              </option>
-            ))}
-          </select>
-          {errors.floorId && (
-            <p className="danger-text">{errors.floorId.message}</p>
+          {errors.buildingId && (
+            <small className="danger-text">{errors.buildingId.message}</small>
           )}
         </div>
-      )}
-      {watchFloorId !== "0" && (
-        <>
-          <div className="col-12 text-start">
-            <label className="form-label">Select Work Area</label>
-            <select
-              {...register("id")}
-              className="form-select form-select-sm"
-              onChange={handleWrokAreaChange}
-            >
-              <option value="0">Create New Work Area</option>
-              {selectedFloor?.workAreas?.length > 0 &&
-                selectedFloor?.workAreas?.map((w) => (
-                  <option key={w.id} value={w.id}>
-                    {w.areaName}
-                  </option>
-                ))}
-            </select>
-          </div>
 
-          <div className="col-12 text-start">
-            <Label className="form-label" required>
-              {watchWorkAreaId === "0"
-                ? "Enter Work Area Name"
-                : "Edit Work Area Name"}
-            </Label>
-            <input
-              type="text"
-              className="form-control form-control-sm"
-              placeholder="Work Area"
-              {...register("areaName")}
+
+        {watchBuildingId !== "0" && (
+          <div className="col-12 col-sm-6 text-start">
+            <AppFormController
+              name="floorId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Floor"
+                  options={selectedBuilding?.floors ?? []}
+                  placeholder={
+                    selectedBuilding?.floors?.length > 0
+                      ? "Select Floor"
+                      : "No Floor Found"
+                  }
+                  required
+                  labelKey="floorName"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={(value) => {
+                    field.onChange(value);
+                    setValue("areaName", ""); // reset Work Area name when floor changes
+                  }}
+                  className="m-0"
+                />
+              )}
             />
-            {errors.areaName && (
-              <p className="danger-text">{errors.areaName.message}</p>
+            {errors.floorId && (
+              <small className="danger-text">{errors.floorId.message}</small>
             )}
           </div>
-        </>
-      )}
-      <div className="col-12 text-end mt-6 my-2">
-        <button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
-          Cancel
-        </button>
-        <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
-          {isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
-        </button>
+        )}
 
-      </div>
-    </form>
+        {watchFloorId !== "0" && (
+          <>
+            <div className="col-12 text-start">
+              <AppFormController
+                name="id"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="Select Work Area"
+                    options={selectedFloor?.workAreas ?? []}
+                    placeholder="Create New Work Area"
+                    required={false}
+                    labelKey="areaName"
+                    valueKey="id"
+                    value={field.value}
+                    onChange={(value) => {
+                      field.onChange(value);
+                      handleWrokAreaChange({ target: { value } }); // preserve your existing handler
+                    }}
+                    className="m-0"
+                  />
+                )}
+              />
+            </div>
+
+            <div className="col-12 text-start">
+              <Label className="form-label" required>
+                {watchWorkAreaId === "0"
+                  ? "Enter Work Area Name"
+                  : "Edit Work Area Name"}
+              </Label>
+              <input
+                type="text"
+                className="form-control"
+                placeholder="Work Area"
+                {...register("areaName")}
+              />
+              {errors.areaName && (
+                <p className="danger-text">{errors.areaName.message}</p>
+              )}
+            </div>
+          </>
+        )}
+        <div className="col-12 text-end mt-6 my-2">
+          <button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
+            {isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
+          </button>
+
+        </div>
+      </form>
+    </AppFormProvider>
   );
 };
 
diff --git a/src/components/Project/ManageProjectInfo.jsx b/src/components/Project/ManageProjectInfo.jsx
index 65f340a3..54712047 100644
--- a/src/components/Project/ManageProjectInfo.jsx
+++ b/src/components/Project/ManageProjectInfo.jsx
@@ -17,6 +17,8 @@ import {
   useOrganizationsList,
 } from "../../hooks/useOrganization";
 import { localToUtc } from "../../utils/appUtils";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const currentDate = new Date().toLocaleDateString("en-CA");
 const formatDate = (date) => {
@@ -42,8 +44,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
     1,
     true
   );
-  const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
-  const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
+  const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
+  const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
 
   const {
     register,
@@ -74,7 +76,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
         pmcId: projects_Details?.pmc?.id || "",
       });
     setAddressLength(projects_Details?.projectAddress?.length || 0);
-  }, [project, projects_Details, reset,data]);
+  }, [project, projects_Details, reset, data]);
 
   const onSubmitForm = (formData) => {
     if (project) {
@@ -85,8 +87,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
         id: project,
       };
       UpdateProject({ projectId: project, payload: payload });
-    }else{
-       let payload = {
+    } else {
+      let payload = {
         ...formData,
         startDate: localToUtc(formData.startDate),
         endDate: localToUtc(formData.endDate),
@@ -122,7 +124,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             type="text"
             id="name"
             name="name"
-            className="form-control form-control-sm"
+            className="form-control "
             placeholder="Project Name"
             {...register("name")}
           />
@@ -143,7 +145,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             type="text"
             id="shortName"
             name="shortName"
-            className="form-control form-control-sm"
+            className="form-control "
             placeholder="Short Name"
             {...register("shortName")}
           />
@@ -164,7 +166,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             type="text"
             id="contactPerson"
             name="contactPerson"
-            className="form-control form-control-sm"
+            className="form-control "
             placeholder="Contact Person"
             maxLength={50}
             {...register("contactPerson")}
@@ -190,6 +192,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             placeholder="DD-MM-YYYY"
             maxDate={new Date()} // optional: restrict future dates
             className="w-100"
+            size="md"
           />
 
           {errors.startDate && (
@@ -213,6 +216,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             placeholder="DD-MM-YYYY"
             minDate={getValues("startDate")} // optional: restrict future dates
             className="w-100"
+            size="md"
           />
 
           {errors.endDate && (
@@ -225,103 +229,108 @@ const ManageProjectInfo = ({ project, onClose }) => {
           )}
         </div>
 
-        <div className="col-12 ">
-          <label className="form-label" htmlFor="modalEditUserStatus">
+        <div className="col-12">
+          <Label htmlFor="modalEditUserStatus" className="form-label">
             Status
-          </label>
-          <select
-            id="modalEditUserStatus"
-            name="modalEditUserStatus"
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("projectStatusId", {
-              required: "Status is required",
-              valueAsNumber: false,
-            })}
-          >
-            {PROJECT_STATUS.map((status) => (
-              <option key={status.id} value={status.id}>
-                {status.label}
-              </option>
-            ))}
-          </select>
+          </Label>
+
+          <AppFormController
+            name="projectStatusId"
+            control={control}
+            rules={{ required: "Status is required" }}
+            render={({ field }) => (
+              <SelectField
+                label="" // Label is already above
+                placeholder="Select Status"
+                options={PROJECT_STATUS?.map((status) => ({
+                  id: status.id,
+                  name: status.label,
+                })) ?? []}
+                value={field.value || ""}
+                onChange={field.onChange}
+                required
+                className="m-0 form-select-sm w-100"
+              />
+            )}
+          />
+
           {errors.projectStatusId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
               {errors.projectStatusId.message}
             </div>
           )}
         </div>
-        <div className="col-12 ">
-          <label className="form-label" htmlFor="modalEditUserStatus">
+
+        <div className="col-12">
+          <Label htmlFor="promoterId" className="form-label">
             Promoter
-          </label>
-          <select
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("promoterId", {
-              required: "Promoter is required",
-              valueAsNumber: false,
-            })}
-          >
-            {isLoading ? (
-              <option>Loading...</option>
-            ) : (
-              <>
-                <option value="">Select Promoter</option>
-                {data?.data?.map((org) => (
-                  <option key={org.id} value={org.id}>
-                    {org.name}
-                  </option>
-                ))}
-              </>
+          </Label>
+
+          <AppFormController
+            name="promoterId"
+            control={control}
+            rules={{ required: "Promoter is required" }}
+            render={({ field }) => (
+              <SelectField
+                label="" // Label is already above
+                placeholder="Select Promoter"
+                options={data?.data ?? []}
+                value={field.value || ""}
+                onChange={field.onChange}
+                required
+                isLoading={isLoading}
+                className="m-0 form-select-sm w-100"
+                noOptionsMessage={() =>
+                  !isLoading && (!data?.data || data.data.length === 0)
+                    ? "No promoters found"
+                    : null
+                }
+              />
             )}
-          </select>
+          />
+
           {errors.promoterId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
               {errors.promoterId.message}
             </div>
           )}
         </div>
-        <div className="col-12 ">
-          <label className="form-label" htmlFor="modalEditUserStatus">
+
+        <div className="col-12">
+          <Label htmlFor="pmcId" className="form-label">
             PMC
-          </label>
-          <select
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("pmcId", {
-              required: "Promoter is required",
-              valueAsNumber: false,
-            })}
-          >
-            {isLoading ? (
-              <option>Loading...</option>
-            ) : (
-              <>
-                <option value="">Select PMC</option>
-                {data?.data?.map((org) => (
-                  <option key={org.id} value={org.id}>
-                    {org.name}
-                  </option>
-                ))}
-              </>
+          </Label>
+
+          <AppFormController
+            name="pmcId"
+            control={control}
+            rules={{ required: "PMC is required" }}
+            render={({ field }) => (
+              <SelectField
+                label="" // Label is already above
+                placeholder="Select PMC"
+                options={data?.data ?? []}
+                value={field.value || ""}
+                onChange={field.onChange}
+                required
+                isLoading={isLoading}
+                className="m-0 form-select-sm w-100"
+                noOptionsMessage={() =>
+                  !isLoading && (!data?.data || data.data.length === 0)
+                    ? "No PMC found"
+                    : null
+                }
+              />
             )}
-          </select>
+          />
+
           {errors.pmcId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
               {errors.pmcId.message}
             </div>
           )}
         </div>
+
         <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
@@ -376,7 +385,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             className="btn btn-primary btn-sm"
             disabled={isPending || isCreating || loading}
           >
-            {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
+            {isPending || isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
           </button>
         </div>
       </form>
diff --git a/src/components/Project/ProjectInfra.jsx b/src/components/Project/ProjectInfra.jsx
index a4b8ce1e..9e71c224 100644
--- a/src/components/Project/ProjectInfra.jsx
+++ b/src/components/Project/ProjectInfra.jsx
@@ -30,6 +30,9 @@ import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
 import { setService } from "../../slices/globalVariablesSlice";
 import { SpinnerLoader } from "../common/Loader";
+import { useForm } from "react-hook-form";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const projectId = useSelectedProject();
@@ -52,6 +55,12 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const { data: assignedServices, isLoading: servicesLoading } =
     useProjectAssignedServices(projectId);
 
+  const { control } = useForm({
+    defaultValues: {
+      serviceId: selectedService || "",
+    },
+  });
+
   useEffect(() => {
     setProject(projectInfra);
   }, [data, projects_Details]);
@@ -60,6 +69,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
     setProject(response);
   };
 
+  const handleServiceChange = (serviceId) => {
+    dispatch(setService(serviceId));
+
+  };
+
   return (
     <>
       {showModalBuilding && (
@@ -115,37 +129,39 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
           <div className="card-body" style={{ padding: "0.5rem" }}>
             <div className="align-items-center">
               <div className="row ">
-                <div
-                  className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
-                  id="DataTables_Table_0_length"
-                >
-                  {!servicesLoading &&
-                    assignedServices?.length > 0 &&
-                    (assignedServices.length > 1 ? (
-                      <label>
-                        <select
-                          name="DataTables_Table_0_length"
-                          aria-controls="DataTables_Table_0"
-                          className="form-select form-select-sm"
-                          aria-label="Select Service"
-                          value={selectedService}
-                          onChange={(e) => dispatch(setService(e.target.value))}
-                        >
-                          <option value="">All Services</option>
-                          {assignedServices.map((service) => (
-                            <option key={service.id} value={service.id}>
-                              {service.name}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
-                    ) : (
-                      <h5>{assignedServices[0].name}</h5>
-                    ))}
+                <div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
+                  <div className="ms-4 mt-n1">
+                    {!servicesLoading && assignedServices?.length > 0 && (
+                      assignedServices.length > 1 ? (
+                        <AppFormController
+                          name="serviceId"
+                          control={control}
+                          render={({ field }) => (
+                            <SelectField
+                              label="Select Service"
+                              options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]} 
+                              placeholder="Choose a Service"
+                              required
+                              labelKey="name"
+                              valueKey="id"
+                              value={field.value}
+                              onChange={(val) => {
+                                field.onChange(val);
+                                handleServiceChange(val);
+                              }}
+                              isLoading={servicesLoading}
+                            />
+                          )}
+                        />
+                      ) : (
+                        <h5>{assignedServices[0].name}</h5>
+                      )
+                    )}
+                  </div>
                 </div>
 
                 {/* Buttons Section (aligned to right) */}
-                <div className="col-md-8 col-12 text-end mb-1">
+                <div className="col-md-8 col-12 text-end mt-4">
                   {ManageInfra && (
                     <>
                       <button
diff --git a/src/components/Project/ProjectPermission.jsx b/src/components/Project/ProjectPermission.jsx
index a043603e..befa30ab 100644
--- a/src/components/Project/ProjectPermission.jsx
+++ b/src/components/Project/ProjectPermission.jsx
@@ -10,6 +10,8 @@ import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import showToast from "../../services/toastService";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 export const ProjectPermissionSchema = z.object({
   employeeId: z.string().min(1, "Employee is required"),
@@ -46,26 +48,26 @@ const ProjectPermission = () => {
   );
 
   useEffect(() => {
-  if (!selectedEmployee) return;
+    if (!selectedEmployee) return;
 
-  const enabledPerms =
+    const enabledPerms =
+      selectedEmpPermissions?.permissions
+        ?.filter((perm) => perm.isEnabled)
+        ?.map((perm) => perm.id) || [];
+
+    setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
+  }, [selectedEmpPermissions, setValue, selectedEmployee]);
+
+  const selectedPermissions = watch("selectedPermissions") || [];
+
+  const existingEnabledIds =
     selectedEmpPermissions?.permissions
-      ?.filter((perm) => perm.isEnabled)
-      ?.map((perm) => perm.id) || [];
+      ?.filter((p) => p.isEnabled)
+      ?.map((p) => p.id) || [];
 
-  setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
-}, [selectedEmpPermissions, setValue, selectedEmployee]);
-
-const selectedPermissions = watch("selectedPermissions") || [];
-
-const existingEnabledIds =
-  selectedEmpPermissions?.permissions
-    ?.filter((p) => p.isEnabled)
-    ?.map((p) => p.id) || [];
-
-const hasChanges =
-  selectedPermissions.length !== existingEnabledIds.length ||
-  selectedPermissions.some((id) => !existingEnabledIds.includes(id));
+  const hasChanges =
+    selectedPermissions.length !== existingEnabledIds.length ||
+    selectedPermissions.some((id) => !existingEnabledIds.includes(id));
 
   const { mutate: updatePermission, isPending } =
     useUpdateProjectLevelEmployeePermission();
@@ -115,35 +117,42 @@ const hasChanges =
       <form className="row" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-between align-items-end gap-2 mb-3">
           <div className="text-start d-flex align-items-center gap-2">
-            <div className="d-block">
+            {/* <div className="d-block">
               <label className="form-label">Select Employee</label>
-            </div>
-            <div className="d-block">
-              {" "}
-              <select
-                className="form-select form-select-sm"
-                {...register("employeeId")}
-                disabled={isPending}
-              >
-                {loading ? (
-                  <option value="">Loading...</option>
-                ) : (
-                  <>
-                    <option value="">-- Select Employee --</option>
-                    {[...employees]
-                      ?.sort((a, b) =>
-                        `${a?.firstName} ${a?.firstName}`?.localeCompare(
-                          `${b?.firstName} ${b?.lastName}`
+            </div> */}
+
+            <div className="d-block flex-grow-1">
+              <AppFormController
+                name="employeeId"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="Select Employee"
+                    options={
+                      employees
+                        ?.sort((a, b) =>
+                          `${a?.firstName} ${a?.lastName}`.localeCompare(
+                            `${b?.firstName} ${b?.lastName}`
+                          )
                         )
-                      )
-                      ?.map((emp) => (
-                        <option key={emp.id} value={emp.id}>
-                          {emp.firstName} {emp.lastName}
-                        </option>
-                      ))}
-                  </>
+                        ?.map((emp) => ({
+                          id: emp.id,
+                          name: `${emp.firstName} ${emp.lastName}`,
+                        })) ?? []
+                    }
+                    placeholder="-- Select Employee --"
+                    required
+                    labelKey="name"
+                    valueKeyKey="id"
+                    value={field.value}
+                    onChange={field.onChange}
+                    isLoading={loading}
+                    disabled={isPending}
+                    className="m-0"
+                  />
                 )}
-              </select>
+              />
+
               {errors.employeeId && (
                 <div className="d-block text-danger small">
                   {errors.employeeId.message}
@@ -152,6 +161,7 @@ const hasChanges =
             </div>
           </div>
 
+
           <div className="mt-3 text-end">
             {hasChanges && (
               <button
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/RecurringExpense/ManageRecurringExpense.jsx b/src/components/RecurringExpense/ManageRecurringExpense.jsx
index 7f88c956..21212dd5 100644
--- a/src/components/RecurringExpense/ManageRecurringExpense.jsx
+++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx
@@ -28,6 +28,8 @@ import { useEmployeesName } from "../../hooks/useEmployees";
 import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
 import HoverPopup from "../common/HoverPopup";
 import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
   const {
@@ -200,30 +202,32 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-            <select
-              className="form-select"
-              id="expenseCategoryId"
-              {...register("expenseCategoryId")}
-            >
-              <option value="" disabled>
-                Select Category
-              </option>
-              {ExpenseLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                expenseCategories?.map((expense) => (
-                  <option key={expense.id} value={expense.id}>
-                    {expense.name}
-                  </option>
-                ))
+
+            <AppFormController
+              name="expenseCategoryId"
+              control={control}
+              rules={{ required: "Expense Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label is already above
+                  placeholder="Select Category"
+                  options={expenseCategories ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={ExpenseLoading}
+                  className="m-0 form-select-sm w-100"
+                />
               )}
-            </select>
+            />
+
             {errors.expenseCategoryId && (
               <small className="danger-text">
                 {errors.expenseCategoryId.message}
               </small>
             )}
           </div>
+
         </div>
 
         {/* Title and Is Variable  */}
@@ -375,34 +379,45 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <Label htmlFor="currencyId" className="form-label" required>
               Currency
             </Label>
-            <select
-              id="currencyId"
-              className="form-select"
-              {...register("currencyId")}
-            >
-              <option value="">Select Currency</option>
 
-              {currencyLoading && <option>Loading...</option>}
+            <AppFormController
+              name="currencyId"
+              control={control}
+              rules={{ required: "Currency is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already shown above
+                  placeholder="Select Currency"
+                  options={currencyData?.map((currency) => ({
+                    id: currency.id,
+                    name: `${currency.currencyName} (${currency.symbol})`,
+                  })) ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={currencyLoading}
+                  noOptionsMessage={() =>
+                    !currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
+                      ? "No currency found"
+                      : null
+                  }
+                  className="m-0 form-select-sm w-100"
+                />
+              )}
+            />
 
-              {!currencyLoading &&
-                !currencyError &&
-                currencyData?.map((currency) => (
-                  <option key={currency.id} value={currency.id}>
-                    {`${currency.currencyName} (${currency.symbol})`}
-                  </option>
-                ))}
-            </select>
             {errors.currencyId && (
               <small className="danger-text">{errors.currencyId.message}</small>
             )}
           </div>
+
         </div>
 
         {/* Frequency To and Status Id  */}
         <div className="row my-2 text-start mt-n2">
           <div className="col-md-6">
             <div className="d-flex justify-content-start align-items-center gap-2">
-              <Label htmlFor="frequency" className="form-label mb-0" required>
+              <Label htmlFor="frequency" className="form-label mb-1" required>
                 Frequency
               </Label>
               <HoverPopup
@@ -415,51 +430,69 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer mb-1"></i>
               </HoverPopup>
             </div>
 
-            <select
-              id="frequency"
-              className="form-select mt-1"
-              {...register("frequency", { valueAsNumber: true })}
-            >
-              <option value="">Select Frequency</option>
-              {Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
-                <option key={key} value={key}>
-                  {label}
-                </option>
-              ))}
-            </select>
+            <AppFormController
+              name="frequency"
+              control={control}
+              rules={{ required: "Frequency is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label shown above
+                  placeholder="Select Frequency"
+                  options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
+                    id: key,
+                    name: label,
+                  }))}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  className="m-0 mt-1"
+                />
+              )}
+            />
 
             {errors.frequency && (
               <small className="danger-text">{errors.frequency.message}</small>
             )}
           </div>
 
+
           <div className="col-md-6">
             <Label htmlFor="statusId" className="form-label" required>
               Status
             </Label>
-            <select
-              id="statusId"
-              className="form-select"
-              {...register("statusId")}
-            >
-              <option value="">Select Status</option>
-              {statusLoading && <option>Loading...</option>}
-              {!statusLoading &&
-                !statusError &&
-                statusData?.map((status) => (
-                  <option key={status.id} value={status.id}>
-                    {status.name}
-                  </option>
-                ))}
-            </select>
+
+            <AppFormController
+              name="statusId"
+              control={control}
+              rules={{ required: "Status is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already shown above
+                  placeholder="Select Status"
+                  options={statusData ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={statusLoading}
+                  noOptionsMessage={() =>
+                    !statusLoading && !statusError && (!statusData || statusData.length === 0)
+                      ? "No status found"
+                      : null
+                  }
+                  className="m-0 form-select-sm w-100"
+                />
+              )}
+            />
+
             {errors.statusId && (
               <small className="danger-text">{errors.statusId.message}</small>
             )}
           </div>
+
         </div>
 
         {/* Payment Buffer Days and End Date */}
@@ -564,7 +597,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Description  */}
-        <div className="row my-2 text-start">
+        <div className="row my-4 text-start">
           <div className="col-md-12">
             <Label htmlFor="description" className="form-label" required>
               Description
diff --git a/src/components/ServiceProject/ManageServiceProject.jsx b/src/components/ServiceProject/ManageServiceProject.jsx
index 83e48032..d2423e0b 100644
--- a/src/components/ServiceProject/ManageServiceProject.jsx
+++ b/src/components/ServiceProject/ManageServiceProject.jsx
@@ -23,6 +23,8 @@ import {
   useServiceProject,
   useUpdateServiceProject,
 } from "../../hooks/useServiceProject";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const ManageServiceProject = ({ serviceProjectId, onClose }) => {
   const {
@@ -117,51 +119,54 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
         </div>
         <div className="row text-start">
           <div className="col-12 mb-2">
-            <Label htmlFor="name" required>
+            <Label htmlFor="clientId" required>
               Client
             </Label>
-            <div className="d-flex align-items-center gap-2">
-              <select
-                className="select2 form-select form-select-sm flex-grow-1"
-                aria-label="Default select example"
-                {...register("clientId", {
-                  required: "Client is required",
-                  valueAsNumber: false,
-                })}
-              >
-                {isLoading ? (
-                  <option>Loading...</option>
-                ) : (
-                  <>
-                    <option value="">Select Client</option>
-                    {organization?.data?.map((org) => (
-                      <option key={org.id} value={org.id}>
-                        {org.name}
-                      </option>
-                    ))}
-                  </>
-                )}
-              </select>
+
+            <div className="d-flex align-items-center gap-2 w-100">
+              <div className="flex-grow-1" style={{ minWidth: "250px" }}>
+                <AppFormController
+                  name="clientId"
+                  control={control}
+                  rules={{ required: "Client is required" }}
+                  render={({ field }) => (
+                    <SelectField
+                      label=""
+                      options={organization?.data ?? []}
+                      placeholder="Select Client"
+                      required
+                      labelKey="name"
+                      valueKeyKey="id"
+                      value={field.value}
+                      onChange={field.onChange}
+                      isLoading={isLoading}
+                      className="m-0 w-100"
+                    />
+                  )}
+                />
+              </div>
+
               <i
-                className="bx bx-plus-circle bx-xs cursor-pointer text-primary"
+                className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
                 onClick={() => {
                   onClose();
-                  openOrgModal({ startStep: 2 });  // Step 4 = ManagOrg
+                  openOrgModal({ startStep: 2 });
                 }}
               />
             </div>
+
             {errors?.clientId && (
-              <span className="danger-text">{errors.clientId.message}</span>
+              <small className="danger-text">{errors.clientId.message}</small>
             )}
           </div>
 
-          <div className="col-12 mb-2">
+          <div className="col-12 mb-4">
             <Label htmlFor="name" required>
               Project Name
             </Label>
             <input
               type="text"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("name")}
               placeholder="Enter Project Name.."
             />
@@ -175,7 +180,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             </Label>
             <input
               type="text"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("shortName")}
               placeholder="Enter Project Short Name.."
             />
@@ -184,23 +189,37 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             )}
           </div>
           <div className="col-12 col-md-6">
-            <Label htmlFor="name" required>
+            <Label htmlFor="statusId" required>
               Select Status
             </Label>
-            <select
-              className="form-select form-select-sm"
-              {...register("statusId")}
-            >
-              <option>Select Service</option>
-              {PROJECT_STATUS?.map((status) => (
-                <option key={status.id} value={status.id}>{status.label}</option>
-              ))}
-            </select>
+
+            <AppFormController
+              name="statusId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="" // label already above
+                  options={PROJECT_STATUS?.map((status) => ({
+                    id: status.id,
+                    name: status.label,
+                  }))}
+                  placeholder="Select Status"
+                  required
+                  labelKey="name"
+                  valueKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  className="form-select w-100"
+                />
+              )}
+            />
+
             {errors?.statusId && (
               <span className="danger-text">{errors.statusId.message}</span>
             )}
           </div>
-          <div className="col-12 mb-2">
+
+          <div className="col-12 mb-4">
             <SelectMultiple
               options={data?.data}
               isLoading={isLoading}
@@ -214,15 +233,15 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             )}
           </div>
 
-          <div className="col-12 col-md-6 mb-2">
+          <div className="col-12 col-md-6 mb-4">
             <Label htmlFor="name" required>
               Contact Person
             </Label>
             <input
               type="text"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("contactName")}
-              placeholder="Enter Employee name.."              
+              placeholder="Enter Employee name.."
             />
             {errors?.contactName && (
               <span className="danger-text">{errors.contactName.message}</span>
@@ -234,7 +253,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             </Label>
             <input
               type="text"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("contactEmail")}
               placeholder="Enter Employee Email.."
             />
@@ -242,14 +261,14 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               <span className="danger-text">{errors.contactEmail.message}</span>
             )}
           </div>
-          <div className="col-12 col-md-6 mb-2">
+          <div className="col-12 col-md-6 mb-4">
             <Label htmlFor="name" required>
               Contact Number
             </Label>
             <input
               type="text"
               maxLength={10}
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("contactPhone")}
               placeholder="Enter Employee Contact.."
               onInput={(e) => {
@@ -268,6 +287,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               name="assignedDate"
               className="w-100"
               control={control}
+              size="md"
             />
           </div>
           <div className="col-12 col-md-12 mb-2">
@@ -297,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/AddPayment.jsx b/src/components/collections/AddPayment.jsx
index 1ad641b8..34f68afb 100644
--- a/src/components/collections/AddPayment.jsx
+++ b/src/components/collections/AddPayment.jsx
@@ -12,6 +12,8 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Avatar from "../common/Avatar";
 import { PaymentHistorySkeleton } from "./CollectionSkeleton";
 import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const AddPayment = ({ onClose }) => {
   const { addPayment } = useCollectionContext();
@@ -60,7 +62,7 @@ const AddPayment = ({ onClose }) => {
               <Label required>TransanctionId</Label>
               <input
                 type="text"
-                className="form-control form-control-sm"
+                className="form-control "
                 {...register("transactionId")}
               />
               {errors.transactionId && (
@@ -78,10 +80,10 @@ const AddPayment = ({ onClose }) => {
                 minDate={
                   data?.clientSubmitedDate
                     ? new Date(
-                        new Date(data?.clientSubmitedDate).setDate(
-                          new Date(data?.clientSubmitedDate).getDate() + 1
-                        )
+                      new Date(data?.clientSubmitedDate).setDate(
+                        new Date(data?.clientSubmitedDate).getDate() + 1
                       )
+                    )
                     : null
                 }
                 maxDate={new Date()}
@@ -93,33 +95,30 @@ const AddPayment = ({ onClose }) => {
               )}
             </div>
 
-            <div className="col-12 col-md-6  mb-2">
-              <Label
-                htmlFor="paymentAdjustmentHeadId"
-                className="form-label"
-                required
-              >
+            <div className="col-12 col-md-6 mb-2">
+              <Label htmlFor="paymentAdjustmentHeadId" className="form-label" required>
                 Payment Adjustment Head
               </Label>
-              <select
-                className="form-select form-select-sm "
-                {...register("paymentAdjustmentHeadId")}
-              >
-                {isPaymentTypeLoading ? (
-                  <option>Loading..</option>
-                ) : (
-                  <>
-                    <option value="">Select Payment Head</option>
-                    {paymentTypes?.data
-                      ?.sort((a, b) => a.name.localeCompare(b.name))
-                      ?.map((type) => (
-                        <option key={type.id} value={type.id}>
-                          {type.name}
-                        </option>
-                      ))}
-                  </>
+
+              <AppFormController
+                name="paymentAdjustmentHeadId"
+                control={control}
+                rules={{ required: "Payment Adjustment Head is required" }}
+                render={({ field }) => (
+                  <SelectField
+                    label="" // Label is already above
+                    placeholder="Select Payment Head"
+                    options={paymentTypes?.data
+                      ?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
+                    value={field.value || ""}
+                    onChange={field.onChange}
+                    required
+                    isLoading={isPaymentTypeLoading}
+                    className="m-0 form-select-sm w-100"
+                  />
                 )}
-              </select>
+              />
+
               {errors.paymentAdjustmentHeadId && (
                 <small className="danger-text">
                   {errors.paymentAdjustmentHeadId.message}
@@ -127,6 +126,7 @@ const AddPayment = ({ onClose }) => {
               )}
             </div>
 
+
             <div className="col-12 col-md-6  mb-2">
               <Label htmlFor="amount" className="form-label" required>
                 Amount
@@ -134,7 +134,7 @@ const AddPayment = ({ onClose }) => {
               <input
                 type="number"
                 id="amount"
-                className="form-control form-control-sm"
+                className="form-control "
                 min="1"
                 step="0.01"
                 inputMode="decimal"
@@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
               </Label>
               <textarea
                 id="comment"
-                className="form-control form-control-sm"
+                className="form-control "
                 {...register("comment")}
               />
               {errors.comment && (
diff --git a/src/components/collections/ManageCollection.jsx b/src/components/collections/ManageCollection.jsx
index c0160b6b..37337281 100644
--- a/src/components/collections/ManageCollection.jsx
+++ b/src/components/collections/ManageCollection.jsx
@@ -19,6 +19,8 @@ import { formatDate } from "../../utils/dateUtils";
 import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import { useOrganizationsList } from "../../hooks/useOrganization";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const ManageCollection = ({ collectionId, onClose }) => {
   const { data, isError, isLoading, error } = useCollection(collectionId);
@@ -189,38 +191,35 @@ const ManageCollection = ({ collectionId, onClose }) => {
             </div>
 
             <div className="col-12 col-md-6 mb-2">
-              <Label htmlFor="name" required>
+              <Label htmlFor="billedToId" required>
                 Bill To
               </Label>
-              <div className="d-flex align-items-center gap-2">
-                <select
-                  className="select2 form-select form-select flex-grow-1"
-                  aria-label="Default select example"
-                  {...register("billedToId", {
-                    required: "Client is required",
-                    valueAsNumber: false,
-                  })}
-                >
-                  {isLoading ? (
-                    <option>Loading...</option>
-                  ) : (
-                    <>
-                      <option value="">Select Client</option>
-                      {organization?.data?.map((org) => (
-                        <option key={org.id} value={org.id}>
-                          {org.name}
-                        </option>
-                      ))}
-                    </>
-                  )}
-                </select>
-              </div>
-              {errors?.clientId && (
+
+              <AppFormController
+                name="billedToId"
+                control={control}
+                rules={{ required: "Client is required" }}
+                render={({ field }) => (
+                  <SelectField
+                    label="" // Label already shown above
+                    placeholder="Select Client"
+                    options={organization?.data ?? []}
+                    value={field.value || ""}
+                    onChange={field.onChange}
+                    required
+                    isLoading={isLoading}
+                    className="m-0 flex-grow-1"
+                  />
+                )}
+              />
+
+              {errors?.billedToId && (
                 <span className="danger-text">{errors.billedToId.message}</span>
               )}
             </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"
@@ -231,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"
@@ -257,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"
@@ -272,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"
@@ -287,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"
@@ -341,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
@@ -360,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/common/Forms/SelectField.jsx b/src/components/common/Forms/SelectField.jsx
index a08eaf8c..c5eb1627 100644
--- a/src/components/common/Forms/SelectField.jsx
+++ b/src/components/common/Forms/SelectField.jsx
@@ -12,6 +12,8 @@ const SelectField = ({
   labelKey = "name",
   isLoading = false,
 }) => {
+  const [position, setPosition] = useState("bottom");
+
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -34,10 +36,26 @@ const SelectField = ({
     setOpen(false);
   };
 
-  const toggleDropdown = () => setOpen((prev) => !prev);
+  const toggleDropdown = () => {
+    if (!open) {
+      const rect = dropdownRef.current?.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+
+      const spaceBelow = viewportHeight - rect.bottom;
+      const dropdownHeight = 200; 
+
+      if (spaceBelow < dropdownHeight) {
+        setPosition("top"); // open upward
+      } else {
+        setPosition("bottom"); // open downward
+      }
+    }
+
+    setOpen((prev) => !prev);
+  };
 
   return (
-    <div className="mb-3 position-relative" ref={dropdownRef}>
+    <div className="position-relative mb-3" ref={dropdownRef}>
       {label && (
         <Label className="form-label" required={required}>
           {label}
@@ -60,32 +78,45 @@ const SelectField = ({
       </button>
 
       {open && !isLoading && (
-        <ul
-          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+        <div
+          className="w-full px-1 shadow-md rounded p-1"
           style={{
             position: "absolute",
-            top: "100%",
+            top: position === "bottom" ? "100%" : "auto",
+            bottom: position === "top" ? "100%" : "auto",
             left: 0,
             zIndex: 1050,
-            marginTop: "4px",
-            borderRadius: "0.375rem",
-            overflow: "hidden",
+
+            marginTop: position === "bottom" ? "2px" : "0",
+            marginBottom: position === "top" ? "2px" : "0",
           }}
         >
-          {options.map((option, i) => (
-            <li key={i}>
-              <button
-                type="button"
-                className={`dropdown-item ${
-                  option[valueKey] === value ? "active" : ""
-                }`}
-                onClick={() => handleSelect(option)}
-              >
-                {option[labelKey]}
-              </button>
-            </li>
-          ))}
-        </ul>
+          <ul
+            className="dropdown-menu w-100 show border-0 rounded px-1 py-1"
+            style={{
+              position: "static",
+
+              maxHeight: "220px",
+              overflowY: "auto",
+              overflowX: "hidden",
+            }}
+            id="vertical-example"
+          >
+            {options.map((option, i) => (
+              <li key={i}>
+                <button
+                  type="button"
+                  className={`dropdown-item rounded text-truncate ${
+                    option[valueKey] === value ? "active" : ""
+                  }`}
+                  onClick={() => handleSelect(option)}
+                >
+                  {option[labelKey]}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
       )}
     </div>
   );
diff --git a/src/components/common/TagInput.jsx b/src/components/common/TagInput.jsx
index d0a015ae..1202909e 100644
--- a/src/components/common/TagInput.jsx
+++ b/src/components/common/TagInput.jsx
@@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import React, { useEffect, useState } from "react";
 import Label from "./Label";
 
-const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
+const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [],size="sm" }) => {
   const { setValue, watch } = useFormContext();
   const tags = watch(name) || [];
   const [input, setInput] = useState("");
@@ -70,7 +70,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = fals
       </Label>
 
       <div
-        className="form-control form-control-sm p-1"
+        className={`form-control form-control-sm-${size}`}
         style={{ minHeight: "33px", position: "relative" }}
       >
         <div className="d-flex flex-wrap align-items-center gap-1">
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 41890b9d..b0b7d562 100644
--- a/src/pages/Activities/TaskPlannng.jsx
+++ b/src/pages/Activities/TaskPlannng.jsx
@@ -7,11 +7,20 @@ import { setProjectId } from "../../slices/localVariablesSlice";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useProjectAssignedServices } from "../../hooks/useProjects";
 import { setService } from "../../slices/globalVariablesSlice";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../../components/common/Forms/SelectField";
+import { useForm } from "react-hook-form";
 
 const TaskPlanning = () => {
   const selectedProject = useSelectedProject();
   const selectedService = useCurrentService();
   const dispatch = useDispatch();
+  const { control } = useForm({
+    defaultValues: {
+      serviceFilter: selectedService ?? ""
+    },
+  });
+
 
   const { projectNames = [], loading: projectLoading } = useProjectName();
 
@@ -29,6 +38,7 @@ const TaskPlanning = () => {
   if (projectLoading) {
     return <div className="text-center py-5">Loading...</div>;
   }
+
   return (
     <div className="container-fluid">
       <Breadcrumb
@@ -43,25 +53,31 @@ const TaskPlanning = () => {
           {data?.length === 0 ? (
             <p className="badge bg-label-secondary m-0">Service not assigned</p>
           ) : (
-            <select
-              name="DataTables_Table_0_length"
-              aria-controls="DataTables_Table_0"
-              className="form-select form-select-sm"
-              aria-label="Select Service"
-              value={selectedService ?? ""}
-              onChange={(e) => dispatch(setService(e.target.value))}
-            >
-              <option value="">All Services</option>
-              {!servicesLoading &&
-                data?.map((service) => (
-                  <option key={service.id} value={service.id}>
-                    {service.name}
-                  </option>
-                ))}
-            </select>
+            <AppFormController
+              name="serviceFilter"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Services"
+                  placeholder="All Services"
+                  options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
+                  labelKey="name"
+                  valueKey="id"
+                  isLoading={servicesLoading}
+                  value={field.value}
+                  onChange={(val) => {
+                    field.onChange(val);        
+                    dispatch(setService(val));  
+                  }}
+                  className="m-0"
+                />
+              )}
+            />
           )}
         </div>
 
+
+
         {/* Planning Component */}
         {selectedProject ? (
           <InfraPlanning />
diff --git a/src/pages/DailyProgressReport/DailyProgrssReport.jsx b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
index 1985db38..e543895e 100644
--- a/src/pages/DailyProgressReport/DailyProgrssReport.jsx
+++ b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
@@ -10,6 +10,9 @@ import { useFab } from "../../Context/FabContext";
 import SubTask from "../../components/Activities/SubTask";
 import { useProjectAssignedServices } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
+import SelectField from "../../components/common/Forms/SelectField";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import { useForm } from "react-hook-form";
 
 const DailyProgrssContext = createContext();
 export const useDailyProgrssContext = () => {
@@ -23,9 +26,9 @@ export const useDailyProgrssContext = () => {
 };
 
 const DailyProgrssReport = () => {
-  const  selectedProject =  useSelectedProject()
+  const selectedProject = useSelectedProject()
   const [service, setService] = useState("");
-  const [filter,setFilter] = useState('')
+  const [filter, setFilter] = useState('')
   const { setOffcanvasContent, setShowTrigger } = useFab();
   const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject);
 
@@ -41,8 +44,14 @@ const DailyProgrssReport = () => {
     filter,
   };
 
-  const handleFilter = (filterObj)=>{
-     setFilter(filterObj)
+  const { control } = useForm({
+    defaultValues: {
+      serviceFilter: ""
+    }
+  });
+
+  const handleFilter = (filterObj) => {
+    setFilter(filterObj)
   }
 
   useEffect(() => {
@@ -89,32 +98,38 @@ const DailyProgrssReport = () => {
         />
 
         <div className="card card-fullscreen p-5">
-            {data?.length > 0 && (<div className="col-sm-4 col-md-3 col-12">
-            <select
-              className="form-select form-select-sm"
-              value={service ?? ""}
-              onChange={(e) => setService(e.target.value)}
-            >
-              {isLoading ? (
-                <option value="lading" disabled>Loading...</option>
-              ) : (
-                <>
-                  <option value="">
-                    All Services
-                  </option>
-                  {data?.map((service) => (
-                    <option key={service.id} value={service.id}>
-                      {service.name}
-                    </option>
-                  ))}
-                </>
-              )}
-            </select>
-          </div>)}
+          {data?.length > 0 && (
+            <div className="col-sm-4 col-md-3 col-12 text-start">
+              <AppFormController
+                name="serviceFilter"
+                control={control}
+                defaultValue={service ?? ""}
+                render={({ field }) => (
+                  <SelectField
+                    label="Services"
+                    options={[{ id: "", name: "All Projects" }, ...(data ?? [])]} 
+                    placeholder="Select Service"
+                    labelKey="name"  
+                    valueKey="id"
+                    isLoading={isLoading}
+                    value={field.value}
+                    onChange={(val) => {
+                      field.onChange(val);  
+                      setService(val);      
+                    }}
+                    className="m-0"
+                  />
+                )}
+              />
+            </div>
+          )}
+
           <div>
             <TaskReportList />
           </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..ee6187fc 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">
@@ -161,31 +167,37 @@ const MasterPage = () => {
           data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
         />
 
-        <div className="row page-min-h">
-          <div className="card">
+        <div className="">
+          <div className="card page-min-h">
             <div
-              className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
-              style={{ overflow: "hidden" }}
+              className="card-datatable table-responsive py-2 py-md-6 mx-1 mx-md-5 overflow-visible"
+
             >
               <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"