diff --git a/src/pages/Activities/TaskPlannng.jsx b/src/pages/Activities/TaskPlannng.jsx
index 41890b9d..3f49331e 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,30 @@ 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={data ?? []}
+                  labelKeyKey="name"
+                  valueKeyKey="id"
+                  isLoading={servicesLoading}
+                  value={field.value}
+                  onChange={(val) => {
+                    field.onChange(val);         // react-hook-form update
+                    dispatch(setService(val));   // Redux update
+                  }}
+                  className="m-0"
+                />
+              )}
+            />
           )}
         </div>
 
+
         {/* Planning Component */}
         {selectedProject ? (
           <InfraPlanning />
diff --git a/src/pages/DailyProgressReport/DailyProgrssReport.jsx b/src/pages/DailyProgressReport/DailyProgrssReport.jsx
index 1985db38..d3a4eef6 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,37 @@ 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={data ?? []}
+                    placeholder="All Services"
+                    labelKeyKey="name"
+                    valueKeyKey="id"
+                    isLoading={isLoading}
+                    value={field.value}
+                    onChange={(val) => {
+                      field.onChange(val);   // update RHF
+                      setService(val);       // update your local filter state
+                    }}
+                    className="m-0"
+                  />
+                )}
+              />
+            </div>
+          )}
+
           <div>
             <TaskReportList />
           </div>
         </div>
+
       </DailyProgrssContext.Provider>
     </div>
   );