diff --git a/src/pages/project/ProjectPage.jsx b/src/pages/project/ProjectPage.jsx
index 9e69d2a6..c2935128 100644
--- a/src/pages/project/ProjectPage.jsx
+++ b/src/pages/project/ProjectPage.jsx
@@ -40,10 +40,10 @@ const ProjectPage = () => {
   const [projectList, setProjectList] = useState([]);
   const [listView, setListView] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
- const [coreProjects, setCoreProjects] = useState(() => {
-  const storedValue = sessionStorage.getItem('whichProjectDisplay');
-  return storedValue === 'true'; 
-});
+  const [coreProjects, setCoreProjects] = useState(() => {
+    const storedValue = sessionStorage.getItem('whichProjectDisplay');
+    return storedValue === 'true';
+  });
   const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
 
   const [selectedStatuses, setSelectedStatuses] = useState(
@@ -58,11 +58,11 @@ const ProjectPage = () => {
   };
 
 
-const handleToggleProject = (e) => {
-  const checked = e.target.checked;
-  setCoreProjects(checked);
-  sessionStorage.setItem('whichProjectDisplay', String(checked)); 
-};
+  const handleToggleProject = (value) => {
+    setCoreProjects(value);
+    sessionStorage.setItem("whichProjectDisplay", String(value));
+  };
+
 
   return (
     <ProjectContext.Provider value={contextDispatcher}>
@@ -75,10 +75,39 @@ const handleToggleProject = (e) => {
         />
 
         <div className="card cursor-pointer mb-5">
-          <div className="card-body p-2 pb-1">
+          <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">
-                <div className="flex-grow-1 me-2 mb-2">
+              {/* LEFT SIDE — DATE TOGGLE BUTTONS */}
+              <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,49 +120,44 @@ 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 ${
-                      !listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
+                    className={`btn btn-sm p-1 ${!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  ${
-                      listView ? "btn-primary" : "btn-outline-primary"
-                    }`}
+                    className={`btn btn-sm p-1 ${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}>
                         <div className="form-check">
                           <input
-                            className="form-check-input  "
+                            className="form-check-input"
                             type="checkbox"
                             checked={selectedStatuses.includes(id)}
                             onChange={() => handleStatusChange(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
-                    type="checkbox"
-                    className="form-check-input"
-                    id="activeEmployeeSwitch"
-                    checked={coreProjects}
-                    onChange={handleToggleProject}
-                  />
-                  <label
-                    className="form-check-label ms-2"
-                    htmlFor="activeEmployeeSwitch"
-                  >
-                    {coreProjects ? "Organization Project" : "Service Project"}
-                  </label>
-                </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>
+                {HasManageProject && (
                   <button
                     type="button"
-                    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
-                    data-bs-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="false"
+                    className="btn btn-primary btn-sm d-flex align-items-center"
+                    onClick={() =>
+                      coreProjects
+                        ? setMangeProject({ isOpen: true, Project: null })      // Organization Project → Infra
+                        : setManageServiceProject({ isOpen: true, Project: null }) // Service Project
+                    }
                   >
-                    <span class="visually-hidden">Toggle Dropdown</span>
+                    <i className="bx bx-plus-circle me-2"></i>
+                    New Project
                   </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>
         </div>