Correction in UI in ProjectPage.

src/pages/project/ProjectPage.jsx

@@ -58,12 +58,12 @@ const ProjectPage = () => {
   };
 
 
-const handleToggleProject = (e) => {
+  const handleToggleProject = (value) => {
-  const checked = e.target.checked;
+    setCoreProjects(value);
-  setCoreProjects(checked);
+    sessionStorage.setItem("whichProjectDisplay", String(value));
-  sessionStorage.setItem('whichProjectDisplay', String(checked)); 
   };
 
+
   return (
     <ProjectContext.Provider value={contextDispatcher}>
       <div className="container-fluid">
@@ -77,8 +77,37 @@ const handleToggleProject = (e) => {
         <div className="card cursor-pointer mb-5">
           <div className="card-body p-2 pb-1">           
             <div className="d-flex flex-wrap justify-content-between align-items-start">
-              <div className="d-flex flex-wrap align-items-start">
+              {/* LEFT SIDE — DATE TOGGLE BUTTONS */}
-                <div className="flex-grow-1 me-2 mb-2">
+              <div className="mb-2">
+                <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
+                  {/* Service Project Button */}
+                  <button
+                    type="button"
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${!coreProjects ? "btn-primary text-white" : ""
+                      }`}
+                    onClick={() => handleToggleProject(false)}
+                  >
+                    Service Project
+                  </button>
+                  {/* Organization Project Button */}
+                  <button
+                    type="button"
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${coreProjects ? "btn-primary text-white" : ""
+                      }`}
+                    onClick={() => handleToggleProject(true)}
+                  >
+                    Infra Project
+                  </button>
+
+                </div>
+              </div>
+
+
+              {/* RIGHT SIDE — SEARCH + CARD/LIST + DROPDOWN */}
+              <div className="d-flex flex-wrap align-items-center justify-content-end">
+
+                {/* Search */}
+                <div className="me-2" style={{ minWidth: "200px" }}>
                   <input
                     type="search"
                     className="form-control form-control-sm"
@@ -91,43 +120,38 @@ const handleToggleProject = (e) => {
                   />
                 </div>
 
-                <div className="d-flex gap-2 mb-2">
+                {/* Card/List Buttons */}
+                <div className="d-flex gap-2">
                   <button
                     type="button"
-                    className={`btn  btn-sm p-1 ${
+                    className={`btn btn-sm p-1 ${!listView ? "btn-primary" : "btn-outline-primary"}`}
-                      !listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
                     onClick={() => setListView(false)}
-                    data-bs-toggle="tooltip"
-                    data-bs-custom-class="tooltip"
                     title="Card View"
                   >
                     <i className="bx bx-grid-alt fs-5"></i>
                   </button>
+
                   <button
                     type="button"
-                    className={`btn btn-sm p-1  ${
+                    className={`btn btn-sm p-1 ${listView ? "btn-primary" : "btn-outline-primary"}`}
-                      listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
                     onClick={() => setListView(true)}
-                    data-bs-toggle="tooltip"
-                    data-bs-custom-class="tooltip"
                     title="List View"
                   >
                     <i className="bx bx-list-ul fs-5"></i>
                   </button>
                 </div>
 
-                <div className="dropdown mt-1">
+                {/* Dropdown Filter */}
+                <div className="dropdown me-2">
                   <a
-                    className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
+                    className="dropdown-toggle hide-arrow cursor-pointer p-1"
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
-                    data-bs-custom-class="tooltip"
                     title="Filter"
                   >
-                    <i className="bx bx-slider-alt ms-1"></i>
+                    <i className="bx bx-slider-alt fs-5"></i>
                   </a>
+
                   <ul className="dropdown-menu p-2 text-capitalize">
                     {PROJECT_STATUS.map(({ id, label }) => (
                       <li key={id}>
@@ -144,56 +168,27 @@ const handleToggleProject = (e) => {
                     ))}
                   </ul>
                 </div>
-                <div className="form-check form-switch d-flex align-items-center text-nowrap ms-3">
+
-                  <input
+                {HasManageProject && (
-                    type="checkbox"
+                  <button
-                    className="form-check-input"
+                    type="button"
-                    id="activeEmployeeSwitch"
+                    className="btn btn-primary btn-sm d-flex align-items-center"
-                    checked={coreProjects}
+                    onClick={() =>
-                    onChange={handleToggleProject}
+                      coreProjects
-                  />
+                        ? setMangeProject({ isOpen: true, Project: null })      // Organization Project → Infra
-                  <label
+                        : setManageServiceProject({ isOpen: true, Project: null }) // Service Project
-                    className="form-check-label ms-2"
+                    }
-                    htmlFor="activeEmployeeSwitch"
                   >
-                    {coreProjects ? "Organization Project" : "Service Project"}
+                    <i className="bx bx-plus-circle me-2"></i>
-                  </label>
+                    New Project
+                  </button>
+                )}
+
+
               </div>
             </div>
 
-              {HasManageProject && (
+
-                <div class="btn-group">
-                  <button type="button" className="btn btn-primary">
-                    <i className="bx bx-plus-circle me-2"></i> New Project
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
-                    data-bs-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                  >
-                    <span class="visually-hidden">Toggle Dropdown</span>
-                  </button>
-                  <ul class="dropdown-menu">
-                    <li
-                      onClick={() =>
-                        setManageServiceProject({ isOpen: true, Project: null })
-                      }
-                    >
-                      <a class="dropdown-item">Service Project</a>
-                    </li>
-                    <li
-                      onClick={() =>
-                        setMangeProject({ isOpen: true, Project: null })
-                      }
-                    >
-                      <a class="dropdown-item">Infra Project</a>
-                    </li>
-                  </ul>
-                </div>
-              )}
-            </div>
           </div>
         </div>