diff --git a/src/components/Dashboard/ProjectProgressChart.jsx b/src/components/Dashboard/ProjectProgressChart.jsx
index 41a3453d..15f19582 100644
--- a/src/components/Dashboard/ProjectProgressChart.jsx
+++ b/src/components/Dashboard/ProjectProgressChart.jsx
@@ -2,14 +2,13 @@ import React, { useState } from "react";
 import LineChart from "../Charts/LineChart";
 import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_Data } from "../../hooks/useDashboard_Data";
-import {useSelector} from "react-redux";
+import { useSelector } from "react-redux";
 
-const ProjectProgressChart = () =>
-{
+const ProjectProgressChart = () => {
   const selectedProject = useSelector((store) => store.localVariables.projectId);
   const { projects } = useProjects();
-  // const [selectedProjectId, setSelectedProjectId] = useState("all");
   const [range, setRange] = useState("1W");
+  const [showAllEmployees, setShowAllEmployees] = useState(false);
 
   const getDaysFromRange = (range) => {
     switch (range) {
@@ -26,12 +25,16 @@ const ProjectProgressChart = () =>
 
   const days = getDaysFromRange(range);
   const today = new Date();
-  const FromDate = today.toLocaleDateString('en-CA');
+  const FromDate = today.toLocaleDateString("en-CA");
+
+  const projectId = showAllEmployees || !selectedProject?.trim()
+    ? null
+    : selectedProject;
 
   const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
     days,
     FromDate,
-     projectId:  selectedProject  === " "  ? "all" : selectedProject//  selectedProjectId === "all" ? null : selectedProjectId,
+    projectId,
   });
 
   const sortedDashboardData = [...dashboard_data].sort(
@@ -53,59 +56,58 @@ const ProjectProgressChart = () =>
     new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric" })
   );
   const lineChartCategoriesDates = sortedDashboardData.map((d) =>
-    new Date(d.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
+    new Date(d.date).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    })
   );
 
+  const selectedProjectData = projects?.find((p) => p.id === selectedProject);
+  const selectedProjectName = selectedProjectData?.shortName?.trim()
+    ? selectedProjectData.shortName
+    : selectedProjectData?.name;
+
   return (
     <div className="card h-100">
       <div className="card-header">
-        {/* Row 1: Title + Project Selector */}
-        <div className="d-flex flex-wrap justify-content-between align-items-center mb-2">
-          <div className="card-title mb-0 text-start">
+        <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
+          {/* Left: Title */}
+          <div className="card-title text-start">
             <h5 className="mb-1">Project Progress</h5>
             <p className="card-subtitle">Progress Overview by Project</p>
           </div>
 
-          {/* <div className="btn-group">
-            <button
-              className="btn btn-outline-primary btn-sm dropdown-toggle"
-              type="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-              {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")}>
-                  All Projects
-                </button>
-              </li>
-              {projects?.map((project) => (
-                <li key={project.id}>
-                  <button
-                    className="dropdown-item"
-                    onClick={() => setSelectedProjectId(project.id)}
-                  >
-                    {project.name}
-                  </button>
-                </li>
-              ))}
-            </ul>
-          </div> */}
-        </div>
+          {/* Right: Checkbox and Project Name */}
+          <div className="d-flex flex-column align-items-start align-items-md-end text-start text-md-end mt-1 mt-md-0">
+            <div className="form-check form-switch mb-1 d-flex align-items-center">
+              <input
+                className="form-check-input"
+                type="checkbox"
+                role="switch"
+                id="showAllEmployees"
+                checked={showAllEmployees}
+                onChange={(e) => setShowAllEmployees(e.target.checked)}
+              />
+              <label className="form-check-label ms-2" htmlFor="showAllEmployees">
+                All Projects
+              </label>
+            </div>
+            {!showAllEmployees && selectedProjectName && (
+              <p className="text-muted mb-0 small">
+                <span className="card-subtitle">{selectedProjectName}</span>
+              </p>
+            )}
+          </div>
+        </div>      
 
         {/* Row 2: Time Range Buttons */}
-        <div className="d-flex flex-wrap  mt-2">
+        <div className="d-flex flex-wrap mt-2">
           {["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 ? " border-bottom border-primary text-primary" : "text-muted"
-              }`}
+              className={`border-0 bg-transparent px-2 py-1 text-sm rounded ${range === key ? "border-bottom border-primary text-primary" : "text-muted"
+                }`}
               style={{ cursor: "pointer", transition: "all 0.2s ease" }}
               onClick={() => setRange(key)}
             >
@@ -114,7 +116,8 @@ const ProjectProgressChart = () =>
           ))}
         </div>
       </div>
-      <div className="card-body ">
+
+      <div className="card-body">
         <LineChart
           seriesData={lineChartSeries}
           categories={lineChartCategories}
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index e4c180b8..41caf5bb 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -40,7 +40,7 @@ const EmployeeList = () => {
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(15);
+  const [itemsPerPage] = useState(20);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isEmployeeModalOpen, setIsEmployeeModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
@@ -184,8 +184,6 @@ const EmployeeList = () => {
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
     setShowAllEmployees(isChecked);
-    // If "All Employees" is checked, we don't want to filter by project,
-    // so we pass null for selected project. Otherwise, use the currently selected project.
     recallEmployeeData(showInactive, isChecked ? null : selectedProject);
   };
 
@@ -203,7 +201,6 @@ const EmployeeList = () => {
   const handleProjectSelection = (e) => {
     const newProjectId = e.target.value;
     setSelectedProject(newProjectId);
-    // If a specific project is selected, uncheck "All Employees"
     if (newProjectId) {
       setShowAllEmployees(false);
     }
@@ -279,128 +276,107 @@ const EmployeeList = () => {
                 className="dataTables_wrapper dt-bootstrap5 no-footer"
                 style={{ width: "98%" }}
               >
-                <div className="row  mb-2  ">
-                  <div className="col-md-3 col-sm-6 ">
-                    <div className="form-check text-start">
+                <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
+                  {/* Switches: All Employees + Inactive */}
+                  <div className="d-flex flex-wrap align-items-center gap-3">
+                    {/* All Employees Switch */}
+                    <div className="form-check form-switch text-start">
                       <input
                         type="checkbox"
                         className="form-check-input"
+                        role="switch"
                         id="allEmployeesCheckbox"
                         checked={showAllEmployees}
                         onChange={handleAllEmployeesToggle}
                       />
-                      <label className="form-check-label" htmlFor="allEmployeesCheckbox">
+                      <label className="form-check-label ms-0" htmlFor="allEmployeesCheckbox">
                         All Employees
                       </label>
                     </div>
-                  </div>
-                  <div className="col-md-9 col-sm-6">
-                    <div className="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-sm-end justify-content-between gap-2 flex-md-row flex-sm-column mb-3 mb-md-0 mt-1 mt-md-0 gap-md-4">
-                      <div
-                        id="DataTables_Table_0_filter"
-                        className="dataTables_filter"
-                      >
-                        <label>
-                          <input
-                            type="search"
-                            value={searchText}
-                            onChange={handleSearch}
-                            className="form-control form-control-sm"
-                            placeholder="Search User"
-                            aria-controls="DataTables_Table_0"
-                          ></input>
+
+                    {/* Show Inactive Employees Switch */}                    
+                      <div className="form-check form-switch text-start">
+                        <input
+                          type="checkbox"
+                          className="form-check-input"
+                          role="switch"
+                          id="inactiveEmployeesCheckbox"
+                          checked={showInactive}
+                          onChange={handleToggle}
+                        />
+                        <label className="form-check-label ms-0" htmlFor="inactiveEmployeesCheckbox">
+                          Show Inactive Employees
                         </label>
                       </div>
-                      <div className="dt-buttons btn-group flex-wrap">
-                        {" "}
-                        <div className=" d-flex justify-contend-end">
-                          <button
-                            aria-label="Click me"
-                            className="btn btn-sm  btn-label-secondary me-4  dropdown-toggle "
-                            type="button"
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false"
-                          >
-                            <i className="bx bx-export me-2 bx-sm"></i>Export
-                          </button>
-                          <ul className="dropdown-menu">
-                            <li>
-                              <a
-                                className="dropdown-item"
-                                href="#"
-                                onClick={() => handleExport("print")}
-                              >
-                                <i className="bx bx-printer me-1"></i> Print
-                              </a>
-                            </li>
-                            <li>
-                              <a
-                                className="dropdown-item"
-                                href="#"
-                                onClick={() => handleExport("csv")}
-                              >
-                                <i className="bx bx-file me-1"></i> CSV
-                              </a>
-                            </li>
-                            <li>
-                              <a
-                                className="dropdown-item"
-                                href="#"
-                                onClick={() => handleExport("excel")}
-                              >
-                                <i className="bx bxs-file-export me-1"></i>{" "}
-                                Excel
-                              </a>
-                            </li>
-                            <li>
-                              <a
-                                className="dropdown-item"
-                                href="#"
-                                onClick={() => handleExport("pdf")}
-                              >
-                                <i className="bx bxs-file-pdf me-1"></i> PDF
-                              </a>
-                            </li>
-                          </ul>
-                          <button
-                            className={`btn btn-sm add-new btn-primary ${!Manage_Employee && "d-none"
-                              }`}
-                            tabIndex="0"
-                            type="button"
-                            onClick={() => {
-                              handleEmployeeModel(null);
-                            }}
-                          >
-                            <span>
-                              <i className="bx bx-plus-circle me-2"></i>
-                              <span className="d-none d-md-inline-block">
-                                Add New Employee
-                              </span>
-                            </span>
-                          </button>{" "}
-                        </div>
-                      </div>
-                    </div>
+                  
                   </div>
-                </div>
-                <div className="d-flex justify-content-end mb-2">
-                  {/* Show Inactive Employees Checkbox */}
-                  <div className={`${showAllEmployees ? '' : selectedProject ? 'd-none' : ''}`}>
-                    <div className="form-check">
-                      <input
-                        type="checkbox"
-                        className="form-check-input"
-                        id="inactiveEmployeesCheckbox"
-                        checked={showInactive}
-                        onChange={handleToggle}
-                      />
-                      <label className="form-check-label" htmlFor="inactiveEmployeesCheckbox">
-                        Show Inactive Employees
+
+                  {/* Right side: Search + Export + Add Employee */}
+                  <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
+                    {/* Search */}
+                    <div className="dataTables_filter">
+                      <label className="mb-0">
+                        <input
+                          type="search"
+                          value={searchText}
+                          onChange={handleSearch}
+                          className="form-control form-control-sm"
+                          placeholder="Search User"
+                          aria-controls="DataTables_Table_0"
+                        />
                       </label>
                     </div>
+
+                    {/* Export Dropdown */}
+                    <div className="dropdown">
+                      <button
+                        aria-label="Click me"
+                        className="btn btn-sm btn-label-secondary dropdown-toggle"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        <i className="bx bx-export me-2 bx-sm"></i>Export
+                      </button>
+                      <ul className="dropdown-menu">
+                        <li>
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("print")}>
+                            <i className="bx bx-printer me-1"></i> Print
+                          </a>
+                        </li>
+                        <li>
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("csv")}>
+                            <i className="bx bx-file me-1"></i> CSV
+                          </a>
+                        </li>
+                        <li>
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("excel")}>
+                            <i className="bx bxs-file-export me-1"></i> Excel
+                          </a>
+                        </li>
+                        <li>
+                          <a className="dropdown-item" href="#" onClick={() => handleExport("pdf")}>
+                            <i className="bx bxs-file-pdf me-1"></i> PDF
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+
+                    {/* Add Employee */}
+                    {Manage_Employee && (
+                      <button
+                        className="btn btn-sm btn-primary"
+                        type="button"
+                        onClick={() => handleEmployeeModel(null)}
+                      >
+                        <i className="bx bx-plus-circle me-2"></i>
+                        <span className="d-none d-md-inline-block">Add New Employee</span>
+                      </button>
+                    )}
                   </div>
                 </div>
 
+
                 <table
                   className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
                   id="DataTables_Table_0"