diff --git a/public/assets/vendor/css/core.css b/public/assets/vendor/css/core.css
index b5c63690..e7ebd248 100644
--- a/public/assets/vendor/css/core.css
+++ b/public/assets/vendor/css/core.css
@@ -3832,7 +3832,7 @@ fieldset:disabled .btn {
   --bs-dropdown-padding-x: 0;
   --bs-dropdown-padding-y: 0.5rem;
   --bs-dropdown-spacer: 0.125rem;
-  --bs-dropdown-font-size: 0.9375rem;
+  --bs-dropdown-font-size: 0.8125rem;
   --bs-dropdown-color: var(--bs-body-color);
   --bs-dropdown-bg: #fff;
   --bs-dropdown-border-color: #e4e6e8;
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 617d7f24..b3b9dc68 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import HorizontalBarChart from '../Charts/HorizontalBarChart';
-import LineChart from '../Charts/LineChart';
-import { useProjects } from '../../hooks/useProjects';
+import React, { useState } from "react";
+import HorizontalBarChart from "../Charts/HorizontalBarChart";
+import LineChart from "../Charts/LineChart";
+import { useProjects } from "../../hooks/useProjects";
 import {
   useDashboard_Data,
   useDashboardProjectsCardData,
@@ -10,26 +10,34 @@ import {
 } from "../../hooks/useDashboard_Data";
 
 const Dashboard = () => {
-  const { projects,loading } = useProjects();
-  const [selectedProjectId, setSelectedProjectId] = useState('all');
-  const [range, setRange] = useState('1W');
+  const { projects, loading } = useProjects();
+  const [selectedProjectId, setSelectedProjectId] = useState("all");
+  const [range, setRange] = useState("1W");
 
   const getDaysFromRange = (range) => {
     switch (range) {
-      case '1D': return 1;
-      case '1W': return 7;
-      case '15D': return 15;
-      case '1M': return 30;
-      case '3M': return 90;
-      case '1Y': return 365;
-      case '5Y': return 1825;
-      default: return 7;
+      case "1D":
+        return 1;
+      case "1W":
+        return 7;
+      case "15D":
+        return 15;
+      case "1M":
+        return 30;
+      case "3M":
+        return 90;
+      case "1Y":
+        return 365;
+      case "5Y":
+        return 1825;
+      default:
+        return 7;
     }
   };
 
   const days = getDaysFromRange(range);
   const today = new Date();
-  const FromDate = today.toISOString().split('T')[0]; // Always today
+  const FromDate = today.toISOString().split("T")[0]; // Always today
 
   const { projectsCardData } = useDashboardProjectsCardData();
   const { teamsCardData } = useDashboardTeamsCardData();
@@ -38,54 +46,66 @@ const Dashboard = () => {
   const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
     days,
     FromDate,
-    projectId: selectedProjectId === 'all' ? 0 : selectedProjectId,
+    projectId: selectedProjectId === "all" ? 0 : selectedProjectId,
   });
 
   // Sort dashboard_data by date ascending
-  const sortedDashboardData = [...dashboard_data].sort((a, b) => new Date(a.date) - new Date(b.date));
+  const sortedDashboardData = [...dashboard_data].sort(
+    (a, b) => new Date(a.date) - new Date(b.date)
+  );
 
   // Bar chart logic
-  const projectNames = projects?.map(p => p.name) || [];
-  const projectProgress = projects?.map(p => {
-    const completed = p.completedWork || 0;
-    const planned = p.plannedWork || 1;
-    const percent = (completed / planned) * 100;
-    return Math.min(Math.round(percent), 100);
-  }) || [];
+  const projectNames = projects?.map((p) => p.name) || [];
+  const projectProgress =
+    projects?.map((p) => {
+      const completed = p.completedWork || 0;
+      const planned = p.plannedWork || 1;
+      const percent = (completed / planned) * 100;
+      return Math.min(Math.round(percent), 100);
+    }) || [];
 
   // Line chart data
   const lineChartSeries = [
     {
-      name: 'Planned Work',
-      data: sortedDashboardData.map(d => d.plannedTask || 0),
+      name: "Planned Work",
+      data: sortedDashboardData.map((d) => d.plannedTask || 0),
     },
     {
-      name: 'Completed Work',
-      data: sortedDashboardData.map(d => d.completedTask || 0),
+      name: "Completed Work",
+      data: sortedDashboardData.map((d) => d.completedTask || 0),
     },
   ];
 
-  const lineChartCategories = sortedDashboardData.map(d =>
-    new Date(d.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  const lineChartCategories = sortedDashboardData.map((d) =>
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+    })
   );
 
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <div className="row gy-4">
-
         {/* Projects Card */}
         <div className="col-sm-6 col-lg-4">
           <div className="card p-3 h-100 text-center d-flex justify-content-between">
             <div className="d-flex justify-content-start align-items-center mb-3">
-              <h5 className="fw-bold mb-0 ms-2"><i className="rounded-circle bx bx-building-house"></i> Projects</h5>
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="rounded-circle bx bx-building-house text-primary"></i>{" "}
+                Projects
+              </h5>
             </div>
             <div className="d-flex justify-content-around align-items-start mt-n2">
               <div>
-                <h4 className="mb-0 fw-bold">{projectsCardData.totalProjects?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {projectsCardData.totalProjects?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Total</small>
               </div>
               <div>
-                <h4 className="mb-0 fw-bold">{projectsCardData.ongoingProjects?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {projectsCardData.ongoingProjects?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Ongoing</small>
               </div>
             </div>
@@ -96,15 +116,21 @@ const Dashboard = () => {
         <div className="col-sm-6 col-lg-4">
           <div className="card p-3 h-100 text-center d-flex justify-content-between">
             <div className="d-flex justify-content-start align-items-center mb-3">
-              <h5 className="fw-bold mb-0 ms-2"><i className="bx bx-group text-warning"></i> Teams</h5>
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="bx bx-group text-warning"></i> Teams
+              </h5>
             </div>
             <div className="d-flex justify-content-around align-items-start mt-n2">
               <div>
-                <h4 className="mb-0 fw-bold">{teamsCardData.totalEmployees?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {teamsCardData.totalEmployees?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Total Employees</small>
               </div>
               <div>
-                <h4 className="mb-0 fw-bold">{teamsCardData.inToday?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {teamsCardData.inToday?.toLocaleString()}
+                </h4>
                 <small className="text-muted">In Today</small>
               </div>
             </div>
@@ -115,15 +141,21 @@ const Dashboard = () => {
         <div className="col-sm-6 col-lg-4">
           <div className="card p-3 h-100 text-center d-flex justify-content-between">
             <div className="d-flex justify-content-start align-items-center mb-3">
-              <h5 className="fw-bold mb-0 ms-2"><i className="bx bx-task text-success"></i> Tasks</h5>
+              <h5 className="fw-bold mb-0 ms-2">
+                <i className="bx bx-task text-success"></i> Tasks
+              </h5>
             </div>
             <div className="d-flex justify-content-around align-items-start mt-n2">
               <div>
-                <h4 className="mb-0 fw-bold">{tasksCardData.totalTasks?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {tasksCardData.totalTasks?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Total</small>
               </div>
               <div>
-                <h4 className="mb-0 fw-bold">{tasksCardData.completedTasks?.toLocaleString()}</h4>
+                <h4 className="mb-0 fw-bold">
+                  {tasksCardData.completedTasks?.toLocaleString()}
+                </h4>
                 <small className="text-muted">Completed</small>
               </div>
             </div>
@@ -161,28 +193,34 @@ const Dashboard = () => {
                 </div>
 
                 <div className="btn-group">
-                  <button type="button" className="btn btn-label-primary btn-sm">
-                    {selectedProjectId === 'all'
-                      ? 'All Projects'
-                      : projects?.find(p => p.id === selectedProjectId)?.name || 'Select Project'}
-                  </button>
                   <button
                     type="button"
-                    className="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
+                    className="btn btn-outline-primary btn-sm dropdown-toggle"
+                    type="button"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                    <span className="visually-hidden">Toggle Dropdown</span>
+                    {selectedProjectId === "all"
+                      ? "All Projects"
+                      : projects?.find((p) => p.id === selectedProjectId)
+                          ?.name || "Select Project"}
                   </button>
+
                   <ul className="dropdown-menu">
                     <li>
-                      <button className="dropdown-item" onClick={() => setSelectedProjectId('all')}>
+                      <button
+                        className="dropdown-item"
+                        onClick={() => setSelectedProjectId("all")}
+                      >
                         All Projects
                       </button>
                     </li>
                     {projects?.map((project) => (
                       <li key={project.id}>
-                        <button className="dropdown-item" onClick={() => setSelectedProjectId(project.id)}>
+                        <button
+                          className="dropdown-item"
+                          onClick={() => setSelectedProjectId(project.id)}
+                        >
                           {project.name}
                         </button>
                       </li>
@@ -193,12 +231,15 @@ const Dashboard = () => {
 
               {/* Row 2: Time Range Buttons */}
               <div className="d-flex flex-wrap gap-2 mt-2">
-                {['1D', '1W', '15D', '1M', '3M', '1Y', '5Y'].map((key) => (
+                {["1D", "1W", "15D", "1M", "3M", "1Y", "5Y"].map((key) => (
                   <button
                     key={key}
-                    className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key ? 'fw-bold border-bottom border-primary text-primary' : 'text-muted'
-                      }`}
-                    style={{ cursor: 'pointer', transition: 'all 0.2s ease' }}
+                    className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${
+                      range === key
+                        ? "fw-bold border-bottom border-primary text-primary"
+                        : "text-muted"
+                    }`}
+                    style={{ cursor: "pointer", transition: "all 0.2s ease" }}
                     onClick={() => setRange(key)}
                   >
                     {key}
@@ -207,11 +248,14 @@ const Dashboard = () => {
               </div>
             </div>
             <div className="card-body ">
-              <LineChart seriesData={lineChartSeries} categories={lineChartCategories} loading={isLineChartLoading} />
+              <LineChart
+                seriesData={lineChartSeries}
+                categories={lineChartCategories}
+                loading={isLineChartLoading}
+              />
             </div>
           </div>
         </div>
-
       </div>
     </div>
   );
diff --git a/src/hooks/useProjects.js b/src/hooks/useProjects.js
index 037aba94..9ee9a330 100644
--- a/src/hooks/useProjects.js
+++ b/src/hooks/useProjects.js
@@ -1,126 +1,126 @@
-import { useEffect,useState } from "react"
-import {
-    cacheData,
-    getCachedData,
-  } from "../slices/apiDataManager"
+import { useEffect, useState } from "react";
+import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
 
-
-  
-export const useProjects =()=>{
-
+export const useProjects = () => {
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-      const projects_cache = getCachedData("projectslist");
-     
-      if (!projects_cache) {
-        setLoading(true)   
-        ProjectRepository.getProjectList()
+    const projects_cache = getCachedData("projectslist");
+
+    if (!projects_cache) {
+      setLoading(true);
+      ProjectRepository.getProjectList()
         .then((response) => {
-          setProjects(response.data);
-         
-          cacheData("projectslist", response.data);
+          let projects = response.data;
+          const sortedProject = [...projects].sort((a, b) =>
+            a.name.localeCompare(b.name)
+          );
+
+          setProjects(sortedProject);
+
+          cacheData("projectslist", sortedProject);
           setLoading(false);
         })
         .catch((error) => {
-          setLoading(false)
-          console.error(error);
+          setLoading(false);
           setError("Failed to fetch data.");
         });
-      
-      } else {
-        if (!projects.length) setProjects(projects_cache);
+    } else {
+      if (!projects.length) {
+        let projects = projects_cache;
+        const sortedProject = [...projects].sort((a, b) =>
+          a.name.localeCompare(b.name)
+        );
+        setProjects(sortedProject);
       }
+    }
   };
- 
-  useEffect(()=>{
-    fetchData()
 
-   },[])
+  useEffect(() => {
+    fetchData();
+  }, []);
 
-  return  { projects,loading,error,refetch:fetchData}
-  
-}
+  return { projects, loading, error, refetch: fetchData };
+};
 
-export const useEmployeesByProjectAllocated = ( selectedProject ) =>
-  {
-    const [projectEmployees, setEmployeeList] = useState([]);
-    const[loading,setLoading] = useState(true)
-    const [projects, setProjects] = useState([]);
-  
-     const fetchData = async (projectid) => {
-         try {
-               let EmployeeByProject_Cache = getCachedData("empListByProjectAllocated")
-            if(!EmployeeByProject_Cache || !EmployeeByProject_Cache.projectId === projectid) {
-            
-            let response = await  ProjectRepository.getProjectAllocation(projectid)
-            setEmployeeList(response.data);
-            cacheData("empListByProjectAllocated",{data:response.data,projectId:projectid});
-            setLoading(false)
-            }else{
-                 setEmployeeList(EmployeeByProject_Cache.data)
-                 setLoading(false)
-           }
-          
-         
-         } catch (err) {
-           setError("Failed to fetch data.");
-           setLoading(false)
-         }
-      };
- 
-  
-    useEffect(()=>{
-     if(selectedProject){
+export const useEmployeesByProjectAllocated = (selectedProject) => {
+  const [projectEmployees, setEmployeeList] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [projects, setProjects] = useState([]);
+
+  const fetchData = async (projectid) => {
+    try {
+      let EmployeeByProject_Cache = getCachedData("empListByProjectAllocated");
+      if (
+        !EmployeeByProject_Cache ||
+        !EmployeeByProject_Cache.projectId === projectid
+      ) {
+        let response = await ProjectRepository.getProjectAllocation(projectid);
+        setEmployeeList(response.data);
+        cacheData("empListByProjectAllocated", {
+          data: response.data,
+          projectId: projectid,
+        });
+        setLoading(false);
+      } else {
+        setEmployeeList(EmployeeByProject_Cache.data);
+        setLoading(false);
+      }
+    } catch (err) {
+      setError("Failed to fetch data.");
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedProject) {
       fetchData(selectedProject);
-     }
-    },[selectedProject])
-  
-  
-    return {projectEmployees,loading,projects}
-}
-  
-export const useProjectDetails =(projectId)=>{
-  const {profile} = useProfile();
+    }
+  }, [selectedProject]);
+
+  return { projectEmployees, loading, projects };
+};
+
+export const useProjectDetails = (projectId) => {
+  const { profile } = useProfile();
   const [projects_Details, setProject_Details] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
 
   const fetchData = async () => {
-    setLoading( true )  
-    
+    setLoading(true);
+
     const project_cache = getCachedData("projectInfo");
     if (!project_cache || project_cache?.projectId != projectId) {
       ProjectRepository.getProjectByprojectId(projectId)
-        .then( ( response ) =>
-        {
-          setProject_Details( response.data );
-          cacheData("projectInfo", {projectId:projectId,data: response.data} );
-          setLoading(false)
+        .then((response) => {
+          setProject_Details(response.data);
+          cacheData("projectInfo", {
+            projectId: projectId,
+            data: response.data,
+          });
+          setLoading(false);
         })
         .catch((error) => {
           console.error(error);
-          setError( "Failed to fetch data." );
-          setLoading(false)
+          setError("Failed to fetch data.");
+          setLoading(false);
         });
     } else {
-      setProject_Details( project_cache.data );
-      setLoading(false)
-    } 
-  
-};
- 
-  useEffect(()=>{
-    if ( profile && (projectId != undefined) )
-    {
-      fetchData()
-   }
-   },[projectId,profile])
+      setProject_Details(project_cache.data);
+      setLoading(false);
+    }
+  };
 
-  return  { projects_Details,loading,error,refetch:fetchData}
-  
-}
\ No newline at end of file
+  useEffect(() => {
+    if (profile && projectId != undefined) {
+      fetchData();
+    }
+  }, [projectId, profile]);
+
+  return { projects_Details, loading, error, refetch: fetchData };
+};
diff --git a/src/hooks/useTasks.js b/src/hooks/useTasks.js
index 3c698952..3051acea 100644
--- a/src/hooks/useTasks.js
+++ b/src/hooks/useTasks.js
@@ -10,7 +10,7 @@ export const useTaskList = (projectId, dateFrom, toDate) => {
 
   const fetchList = async () => {
     const taskList_cached = getCachedData("taskList");
-    if (!taskList_cached || taskList_cached?.projectId !== projectId) {
+    // if (!taskList_cached || taskList_cached?.projectId !== projectId) {
       try {
         setLoading(true);
         const resp = await TasksRepository.getTaskList(
@@ -26,14 +26,13 @@ export const useTaskList = (projectId, dateFrom, toDate) => {
         console.log(err);
         setError(err);
       }
-    } else {
-      setTaskList(taskList_cached.data);
-    }
+    // } else {
+    //   setTaskList(taskList_cached.data);
+    // }
   };
-  console.log(TaskList)
   useEffect( () =>
   {
-    console.log( projectId , " ", dateFrom, "" , toDate)
+
     if (projectId && dateFrom && toDate) {
       fetchList();
     }