diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index 32b8644b..7da3c592 100644
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@@ -213,3 +213,8 @@
 .ql-editor {
   max-height: 200px;
 }
+
+/* Remove Table Header Top Line */
+thead tr {
+  border-top: 1px solid white;
+}
diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index ff8457e2..eb348e10 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -326,26 +326,29 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </GlobalModel>
       )}
 
-      <div className="card p-2 card-minHeight">
-        <DirectoryPageHeader
-          searchText={searchText}
-          setSearchText={setSearchText}
-          setIsActive={setIsActive}
-          listView={listView}
-          setListView={setListView}
-          filteredBuckets={filteredBuckets}
-          tempSelectedBucketIds={tempSelectedBucketIds}
-          handleTempBucketChange={handleTempBucketChange}
-          filteredCategories={filteredCategories}
-          tempSelectedCategoryIds={tempSelectedCategoryIds}
-          handleTempCategoryChange={handleTempCategoryChange}
-          clearFilter={clearFilter}
-          applyFilter={applyFilter}
-          loading={loading}
-          IsActive={IsActive}
-          setOpenBucketModal={setOpenBucketModal}
-        />
-
+      <div className="card p-0 mb-2 ">
+        <div className="card-body p-1 pb-0">
+          <DirectoryPageHeader
+            searchText={searchText}
+            setSearchText={setSearchText}
+            setIsActive={setIsActive}
+            listView={listView}
+            setListView={setListView}
+            filteredBuckets={filteredBuckets}
+            tempSelectedBucketIds={tempSelectedBucketIds}
+            handleTempBucketChange={handleTempBucketChange}
+            filteredCategories={filteredCategories}
+            tempSelectedCategoryIds={tempSelectedCategoryIds}
+            handleTempCategoryChange={handleTempCategoryChange}
+            clearFilter={clearFilter}
+            applyFilter={applyFilter}
+            loading={loading}
+            IsActive={IsActive}
+            setOpenBucketModal={setOpenBucketModal}
+          />
+        </div>
+      </div>
+      <div className="card-minHeight">
         {/* Messages when listView is false */}
         {!listView && (
           <div className="d-flex flex-column justify-content-center align-items-center text-center ">
@@ -360,48 +363,55 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         )}
 
         {/* Table view (listView === true) */}
+
         {listView ? (
-          <DirectoryListTableHeader>
-            {loading && (
-              <tr>
-                <td colSpan={10}>
-                  {" "}
-                  <p className="mt-10">Loading...</p>{" "}
-                </td>
-              </tr>
-            )}
+          <div className="card cursor-pointer mt-5">
+            <div className="card-body p-2 pb-1">
+              <DirectoryListTableHeader>
+                {loading && (
+                  <tr>
+                    <td colSpan={10}>
+                      {" "}
+                      <p className="mt-10">Loading...</p>{" "}
+                    </td>
+                  </tr>
+                )}
 
-            {!loading && contacts?.length === 0 && (
-              <tr>
-                <td colSpan={10}>
-                  <p className="mt-10">No contact found</p>
-                </td>
-              </tr>
-            )}
+                {!loading && contacts?.length === 0 && (
+                  <tr>
+                    <td colSpan={10}>
+                      <p className="mt-10">No contact found</p>
+                    </td>
+                  </tr>
+                )}
 
-            {!loading && currentItems.length === 0 && contacts?.length > 0 && (
-              <tr>
-                <td colSpan={10}>
-                  <p className="mt-10">No matching contact found</p>
-                </td>
-              </tr>
-            )}
+                {!loading &&
+                  currentItems.length === 0 &&
+                  contacts?.length > 0 && (
+                    <tr>
+                      <td colSpan={10}>
+                        <p className="mt-10">No matching contact found</p>
+                      </td>
+                    </tr>
+                  )}
 
-            {!loading &&
-              currentItems.map((contact) => (
-                <ListViewDirectory
-                  key={contact.id}
-                  IsActive={IsActive}
-                  contact={contact}
-                  setSelectedContact={setSelectedContact}
-                  setIsOpenModal={setIsOpenModal}
-                  setOpen_contact={setOpen_contact}
-                  setIsOpenModalNote={setIsOpenModalNote}
-                  IsDeleted={setDeleteContact}
-                  restore={handleDeleteContact}
-                />
-              ))}
-          </DirectoryListTableHeader>
+                {!loading &&
+                  currentItems.map((contact) => (
+                    <ListViewDirectory
+                      key={contact.id}
+                      IsActive={IsActive}
+                      contact={contact}
+                      setSelectedContact={setSelectedContact}
+                      setIsOpenModal={setIsOpenModal}
+                      setOpen_contact={setOpen_contact}
+                      setIsOpenModalNote={setIsOpenModalNote}
+                      IsDeleted={setDeleteContact}
+                      restore={handleDeleteContact}
+                    />
+                  ))}
+              </DirectoryListTableHeader>
+            </div>
+          </div>
         ) : (
           <div className="row mt-5">
             {!loading &&
diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
index c4a1e77a..7de25693 100644
--- a/src/pages/Directory/DirectoryPageHeader.jsx
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -32,16 +32,16 @@ const DirectoryPageHeader = ({
         <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
           <input
             type="search"
-            className="form-control me-2"
+            className="form-control"
             placeholder="Search Contact..."
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
             style={{ width: "200px" }}
           />
-          <div className="d-flex gap-2 ">
+          <div className="d-flex gap-2">
             <button
               type="button"
-              className={`btn btn-xs ${
+              className={`btn  btn-sm p-1 ${
                 !listView ? "btn-primary" : "btn-outline-primary"
               }`}
               onClick={() => setListView(false)}
@@ -55,7 +55,7 @@ const DirectoryPageHeader = ({
             </button>
             <button
               type="button"
-              className={`btn btn-xs ${
+              className={`btn  btn-sm p-1 ${
                 listView ? "btn-primary" : "btn-outline-primary"
               }`}
               onClick={() => setListView(true)}
diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx
index 69b35d84..09ccd29f 100644
--- a/src/pages/project/ProjectList.jsx
+++ b/src/pages/project/ProjectList.jsx
@@ -125,6 +125,7 @@ const ProjectList = () => {
     indexOfLastItem
   );
   const totalPages = Math.ceil(filteredProjects.length / itemsPerPage);
+
   useEffect(() => {
     const tooltipTriggerList = Array.from(
       document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -201,212 +202,220 @@ const ProjectList = () => {
             { label: "Projects", link: null },
           ]}
         />
+        <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">
+                <div className="flex-grow-1 me-2 mb-2">
+                  <input
+                    type="search"
+                    className="form-control form-control-sm"
+                    placeholder="Search projects..."
+                    value={searchTerm}
+                    onChange={(e) => {
+                      setSearchTerm(e.target.value);
+                      setCurrentPage(1);
+                    }}
+                  />
+                </div>
 
-        <div className="d-flex flex-wrap justify-content-between align-items-start mb-4">
-          <div className="d-flex flex-wrap align-items-start">
-            <div className="flex-grow-1 me-2 mb-2">
-              <input
-                type="search"
-                className="form-control form-control-sm"
-                placeholder="Search projects..."
-                value={searchTerm}
-                onChange={(e) => {
-                  setSearchTerm(e.target.value);
-                  setCurrentPage(1);
-                }}
-              />
+                <div className="d-flex gap-2 mb-2">
+                  <button
+                    type="button"
+                    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"
+                    }`}
+                    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 ms-3 mt-1">
+                  <a
+                    className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                    data-bs-custom-class="tooltip"
+                    title="Filter"
+                  >
+                    <i className="fa-solid fa-filter fs-4"></i>
+                  </a>
+                  <ul className="dropdown-menu p-2 text-capitalize">
+                    {[
+                      {
+                        id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
+                        label: "Active",
+                      },
+                      {
+                        id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
+                        label: "On Hold",
+                      },
+                      {
+                        id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
+                        label: "Inactive",
+                      },
+                      {
+                        id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
+                        label: "Completed",
+                      },
+                    ].map(({ id, label }) => (
+                      <li key={id}>
+                        <div className="form-check">
+                          <input
+                            className="form-check-input  "
+                            type="checkbox"
+                            checked={selectedStatuses.includes(id)}
+                            onChange={() => handleStatusChange(id)}
+                          />
+                          <label className="form-check-label">{label}</label>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="button"
+                  data-bs-toggle="tooltip"
+                  data-bs-offset="0,8"
+                  data-bs-placement="top"
+                  data-bs-custom-class="tooltip"
+                  title="Add New Project"
+                  className={`p-1 me-2 bg-primary rounded-circle ${
+                    !HasManageProject && "d-none"
+                  }`}
+                  onClick={handleShow}
+                >
+                  <i className="bx bx-plus fs-4 text-white"></i>
+                </button>
+              </div>
             </div>
-
-            <div className="d-flex gap-2 mb-2">
-              <button
-                type="button"
-                className={`btn btn-sm ${
-                  !listView ? "btn-primary" : "btn-outline-primary"
-                }`}
-                onClick={() => setListView(false)}
-                data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
-                data-bs-custom-class="tooltip"
-                title="Card View"
-              >
-                <i className="bx bx-grid-alt bx-sm"></i>
-              </button>
-              <button
-                type="button"
-                className={`btn btn-sm ${
-                  listView ? "btn-primary" : "btn-outline-primary"
-                }`}
-                onClick={() => setListView(true)}
-                data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
-                data-bs-custom-class="tooltip"
-                title="List View"
-              >
-                <i className="bx bx-list-ul bx-sm"></i>
-              </button>
-            </div>
-
-            <div className="dropdown ms-3">
-              <a
-                className="dropdown-toggle hide-arrow cursor-pointer"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
-              >
-                <i className="bx bx-filter bx-lg"></i>
-              </a>
-              <ul className="dropdown-menu p-2 text-capitalize">
-                {[
-                  {
-                    id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
-                    label: "Active",
-                  },
-                  {
-                    id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-                    label: "On Hold",
-                  },
-                  {
-                    id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-                    label: "Inactive",
-                  },
-                  {
-                    id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-                    label: "Completed",
-                  },
-                ].map(({ id, label }) => (
-                  <li key={id}>
-                    <div className="form-check">
-                      <input
-                        className="form-check-input  "
-                        type="checkbox"
-                        checked={selectedStatuses.includes(id)}
-                        onChange={() => handleStatusChange(id)}
-                      />
-                      <label className="form-check-label">{label}</label>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          <div>
-            <button
-              type="button"
-              className={`btn btn-sm btn-primary ${
-                !HasManageProject && "d-none"
-              }`}
-              onClick={handleShow}
-            >
-              <i className="bx bx-plus-circle me-2"></i>
-              Create New Project
-            </button>
           </div>
         </div>
-
         {loading && <p className="text-center">Loading...</p>}
         {!loading && filteredProjects.length === 0 && !listView && (
           <p className="text-center text-muted">No projects found.</p>
         )}
 
-        <div className="row">
-          {listView ? (
-            <div className="table-responsive text-nowrap py-2 ">
-              <table className="table px-2">
-                <thead>
-                  <tr>
-                    <th className="text-start" colSpan={5}>
-                      Project Name
-                    </th>
-                    <th className="mx-2 text-start">Contact Person</th>
-                    <th className="mx-2">START DATE</th>
-                    <th className="mx-2">DEADLINE</th>
-                    <th className="mx-2">Task</th>
-                    <th className="mx-2">Progress</th>
-                    <th className="mx-2">
-                      <div className="dropdown">
-                        <a
-                          className="dropdown-toggle hide-arrow cursor-pointer"
-                          data-bs-toggle="dropdown"
-                          aria-expanded="false"
-                        >
-                          Status <i className="bx bx-filter bx-sm"></i>
-                        </a>
-                        <ul className="dropdown-menu p-2 text-capitalize">
-                          {[
-                            {
-                              id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
-                              label: "Active",
-                            },
-                            {
-                              id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-                              label: "On Hold",
-                            },
-                            {
-                              id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-                              label: "Inactive",
-                            },
-                            {
-                              id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-                              label: "Completed",
-                            },
-                          ].map(({ id, label }) => (
-                            <li key={id}>
-                              <div className="form-check">
-                                <input
-                                  className="form-check-input  "
-                                  type="checkbox"
-                                  checked={selectedStatuses.includes(id)}
-                                  onChange={() => handleStatusChange(id)}
-                                />
-                                <label className="form-check-label">
-                                  {label}
-                                </label>
-                              </div>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    </th>
-                    <th
-                      className={`mx-2 ${
-                        HasManageProject ? "d-sm-table-cell" : "d-none"
-                      }`}
-                    >
-                      Action
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="table-border-bottom-0 overflow-auto ">
-                  {currentItems.length === 0 ? (
+        {listView ? (
+          <div className="card cursor-pointer">
+            <div className="card-body p-2">
+              <div className="table-responsive text-nowrap py-2 ">
+                <table className="table m-3">
+                  <thead>
                     <tr>
-                      <td colSpan="12" className="text-center py-4">
-                        No projects found
-                      </td>
+                      <th className="text-start" colSpan={5}>
+                        Project Name
+                      </th>
+                      <th className="mx-2 text-start">Contact Person</th>
+                      <th className="mx-2">START DATE</th>
+                      <th className="mx-2">DEADLINE</th>
+                      <th className="mx-2">Task</th>
+                      <th className="mx-2">Progress</th>
+                      <th className="mx-2">
+                        <div className="dropdown">
+                          <a
+                            className="dropdown-toggle hide-arrow cursor-pointer"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                          >
+                            Status <i className="bx bx-filter bx-sm"></i>
+                          </a>
+                          <ul className="dropdown-menu p-2 text-capitalize">
+                            {[
+                              {
+                                id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
+                                label: "Active",
+                              },
+                              {
+                                id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
+                                label: "On Hold",
+                              },
+                              {
+                                id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
+                                label: "Inactive",
+                              },
+                              {
+                                id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
+                                label: "Completed",
+                              },
+                            ].map(({ id, label }) => (
+                              <li key={id}>
+                                <div className="form-check">
+                                  <input
+                                    className="form-check-input  "
+                                    type="checkbox"
+                                    checked={selectedStatuses.includes(id)}
+                                    onChange={() => handleStatusChange(id)}
+                                  />
+                                  <label className="form-check-label">
+                                    {label}
+                                  </label>
+                                </div>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                      </th>
+                      <th
+                        className={`mx-2 ${
+                          HasManageProject ? "d-sm-table-cell" : "d-none"
+                        }`}
+                      >
+                        Action
+                      </th>
                     </tr>
-                  ) : (
-                    currentItems.map((project) => (
-                      <ProjectListView
-                        key={project.id}
-                        projectData={project}
-                        recall={sortingProject}
-                      />
-                    ))
-                  )}
-                </tbody>
-              </table>
-            </div>
-          ) : (
-            currentItems.map((project) => (
+                  </thead>
+                  <tbody className="table-border-bottom-0 overflow-auto ">
+                    {currentItems.length === 0 ? (
+                      <tr>
+                        <td colSpan="12" className="text-center py-4">
+                          No projects found
+                        </td>
+                      </tr>
+                    ) : (
+                      currentItems.map((project) => (
+                        <ProjectListView
+                          key={project.id}
+                          projectData={project}
+                          recall={sortingProject}
+                        />
+                      ))
+                    )}
+                  </tbody>
+                </table>
+              </div>{" "}
+            </div>{" "}
+          </div>
+        ) : (
+          <div className="row">
+            {currentItems.map((project) => (
               <ProjectCard
                 key={project.id}
                 projectData={project}
                 recall={sortingProject}
               />
-            ))
-          )}
-        </div>
+            ))}
+          </div>
+        )}
 
         {!loading && totalPages > 1 && (
           <nav>
diff --git a/src/pages/project/ProjectListView.jsx b/src/pages/project/ProjectListView.jsx
index ee88385c..13cb0d98 100644
--- a/src/pages/project/ProjectListView.jsx
+++ b/src/pages/project/ProjectListView.jsx
@@ -110,14 +110,14 @@ const ProjectListView = ({ projectData, recall }) => {
 
       <tr className="py-8">
         <td className="text-start" colSpan={5}>
-          <strong
+          <span
             className="text-primary cursor-pointer"
             onClick={() => navigate(`/projects/${projectInfo.id}`)}
           >
             {projectInfo.shortName
               ? `${projectInfo.name} (${projectInfo.shortName})`
               : projectInfo.name}
-          </strong>
+          </span>
         </td>
         <td className="text-start small">{projectInfo.contactPerson}</td>
         <td className="small text-center">