diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index a7fe7d32..1dc16cec 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -30,7 +30,7 @@ const CardViewDirectory = ({
                 (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
               }
             />{" "}
-            <p className="m-0">{contact.name}</p>
+        <span className="text-heading fs-6">   {contact.name}</span>
           </div>
           <div>
             <div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
@@ -55,20 +55,19 @@ const CardViewDirectory = ({
                     setSelectedContact(contact);
                     setIsOpenModal(true);
                   }}
-                 
                 >
-                  <a className="dropdown-item px-2 py-0">
-                    <i className="bx bx-pencil bx-xs me-2"></i>
-                    <span className="align-left small-text">Modify</span>
+                  <a className="dropdown-item px-2 cursor-pointer py-1">
+                    <i className="bx bx-edit bx-xs text-primary  me-2"></i>
+                    <span className="align-left ">Modify</span>
                   </a>
                 </li>
                 <li>
                   <a
-                    className="dropdown-item  px-2 py-0"
+                    className="dropdown-item  px-2 cursor-pointer py-1"
                     onClick={() => IsDeleted(contact.id)}
                   >
-                    <i className="bx bx-trash bx-xs me-2"></i>
-                    <span className="align-left small-text">Delete</span>
+                    <i className="bx bx-trash text-danger  bx-xs me-2"></i>
+                    <span className="align-left">Delete</span>
                   </a>
                 </li>
               </ul>
@@ -80,7 +79,7 @@ const CardViewDirectory = ({
           <li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
             <i className="bx bx-building bx-xs"></i>
           </li>
-          <li className="list-inline-item" style={{ fontSize: "10px" }}>
+          <li className="list-inline-item text-small">
             {contact.organization}
           </li>
         </ul>
@@ -96,52 +95,54 @@ const CardViewDirectory = ({
       >
         <hr className="my-0" />
         {contact.contactEmails[0] && (
-          <ul className="list-inline my-1 ">
+          <ul className="list-inline my-1  ">
             <li className="list-inline-item me-2">
-              <i className="bx bx-envelope bx-xs"></i>
+              <i className="bx bx-envelope bx-xs"></i> 
             </li>
-            <li className="list-inline-item small-text">
+            <li className="list-inline-item text-small">
               {contact.contactEmails[0]?.emailAddress}
             </li>
           </ul>
         )}
 
         {contact.contactPhones[0] && (
-          <ul className="list-inline m-0">
-            <li className="list-inline-item me-2">
+          <ul className="list-inline m-0 ">
+            <li className="list-inline-item me-1">
               <i
                 className={` ${getPhoneIcon(
                   contact.contactPhones[0].label
                 )} bx-xs`}
               ></i>
             </li>
-            <li className="list-inline-item small-text">
+            <li className="list-inline-item text-small">
               {contact.contactPhones[0]?.phoneNumber}
             </li>
           </ul>
         )}
 
         <ul className="list-inline m-0">
-          <li className="list-inline-item me-2">
-            <i className="bx bx-merge bx-xs"></i>
+          <li className="list-inline-item me-2 my-1">
+           <i className="fa-solid fa-tag fs-6"></i>
+            
           </li>
-          <li className="list-inline-item small-text">
+          <li className="list-inline-item text-small active">
             {contact.contactCategory.name}
           </li>
         </ul>
 
-        <ul className="list-inline m-0">
-          {contact.bucketIds.map((bucketId) => (
-            <React.Fragment key={bucketId}>
-              <li className="list-inline-item me-1">
-                <i className="bx bx-pin bx-xs"></i>
-              </li>
-              <li className="list-inline-item small-text">
-                {getBucketNameById(buckets, bucketId)}
-              </li>
-            </React.Fragment>
-          ))}
-        </ul>
+     <ul className="list-inline m-0">
+  {contact.bucketIds?.map((bucketId) => (
+    <li key={bucketId} className="list-inline-item me-1">
+      <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1" style={{padding:'0.1rem 0.3rem'}}>
+        <i className="bx bx-pin bx-xs"></i>
+        <span className="small-text">
+          {getBucketNameById(buckets, bucketId)}
+        </span>
+      </span>
+    </li>
+  ))}
+</ul>
+
       </div>
     </div>
   );
diff --git a/src/components/Directory/DirectorySchema.js b/src/components/Directory/DirectorySchema.js
index 3d30292f..1b61c4ac 100644
--- a/src/components/Directory/DirectorySchema.js
+++ b/src/components/Directory/DirectorySchema.js
@@ -6,7 +6,7 @@ export const ContactSchema = z
     contactCategoryId: z.string().nullable().optional(),
     address: z.string().optional(),
     description: z.string().min(1, { message: "Description is required" }),
-    projectIds: z.array(z.string()).min(1, "Project is required"),
+    projectIds: z.array(z.string()), // min(1, "Project is required")
     contactEmails: z
       .array(
         z.object({
diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index d3a5d5c3..ae7551e3 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -89,7 +89,7 @@ const ManageBucket = () =>
   return (
     <div className="container m-0 p-0" style={{ minHeight: "200px" }}>
       <div className="d-flex justify-content-center">
-        <p className="fs-h6 fw-semibold m-0">Manage Buckets</p>
+        <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
       </div>
       <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
         <i
@@ -100,7 +100,7 @@ const ManageBucket = () =>
         ></i>
         <button
           type="button"
-          className={`btn btn-xs btn-primary ms-auto ${
+          className={`btn btn-sm btn-primary ms-auto ${
             action_bucket ? "d-none" : ""
           }`}
           onClick={() => setAction_bucket(true)}
@@ -151,10 +151,11 @@ const ManageBucket = () =>
               <tbody className="table-border-bottom-0 overflow-auto">
                 {bucketList.map((bucket) => (
                   <tr key={bucket.id}>
-                    <td colSpan={2} className="text-start">
-                      {bucket.name}
+                 
+                    <td colSpan={2} className="text-start text-wrap" >
+                    <i className="bx bx-right-arrow-alt me-1"></i> {bucket.name}
                     </td>
-                    <td className="text-start d-none d-sm-table-cell">
+                    <td className="text-start d-none d-sm-table-cell text-wrap" style={{width:"60%"}}>
                       {bucket.description}
                     </td>
                     <td className="justify-content-center">
@@ -191,7 +192,8 @@ const ManageBucket = () =>
             <div className="">
               <label className="form-label">Bucket Discription</label>
               <textarea
-                className="form-control form-control-sm"
+                  className="form-control form-control-sm"
+                rows="3"
                 {...register("description")}
               />
               {errors.description && (
diff --git a/src/components/Directory/ManageDirectory.jsx b/src/components/Directory/ManageDirectory.jsx
index 9ac4dac8..31555ff7 100644
--- a/src/components/Directory/ManageDirectory.jsx
+++ b/src/components/Directory/ManageDirectory.jsx
@@ -356,8 +356,7 @@ useEffect(() => {
             <label className="form-label ">Select Label</label>
 
             <ul
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
-              style={{ maxHeight: "80px" }}
+              className="d-flex flex-wrap px-1 list-unstyled  mb-0"
             >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
diff --git a/src/components/Directory/UpdateContact.jsx b/src/components/Directory/UpdateContact.jsx
index 03ae906c..1d99e601 100644
--- a/src/components/Directory/UpdateContact.jsx
+++ b/src/components/Directory/UpdateContact.jsx
@@ -386,8 +386,7 @@ await submitContact({ ...cleaned, id: existingContact.id });
             <label className="form-label ">Select Label</label>
 
             <ul
-              className="d-flex flex-wrap px-1 list-unstyled overflow-auto mb-0"
-              style={{ maxHeight: "80px" }}
+              className="d-flex flex-wrap px-1 list-unstyled mb-0"
             >
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
diff --git a/src/components/common/GlobalModel.jsx b/src/components/common/GlobalModel.jsx
index 61e09750..e30244dd 100644
--- a/src/components/common/GlobalModel.jsx
+++ b/src/components/common/GlobalModel.jsx
@@ -54,7 +54,20 @@ useEffect(() => {
   // Dynamically generate data-bs attributes
   const dataAttributesProps = Object.keys(dataAttributes).map(key => ({
     [key]: dataAttributes[key],
-  }));
+  } ) );
+  
+
+
+   // The gray background
+    const backdropStyle = {
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: 'rgba(0,0,0,0.3)',
+    };
+
 
   return (
     <div
@@ -65,8 +78,9 @@ useEffect(() => {
       aria-hidden="true"
       ref={modalRef}  // Assign the ref to the modal element
       {...dataAttributesProps}
+      style={backdropStyle}
     >
-      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role}>
+      <div className={`modal-dialog ${dialogClass} ${modalSizeClass } mx-sm-auto mx-1`} role={role} >
         <div className="modal-content">
           <div className="modal-header p-0">
             {/* Close button inside the modal header */}
diff --git a/src/components/common/TagInput.jsx b/src/components/common/TagInput.jsx
index c40a278f..4cadf8be 100644
--- a/src/components/common/TagInput.jsx
+++ b/src/components/common/TagInput.jsx
@@ -60,7 +60,7 @@ useEffect(() => {
   };
 
   const handleInputKeyDown = (e) => {
-    if (e.key === "Enter" && input.trim() !== "") {
+ if ((e.key === "Enter" || e.key === " ") ||  trimmedInput !== "") {
       e.preventDefault();
       const existing = options.find(
         (opt) => opt.name.toLowerCase() === input.trim().toLowerCase()
diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index 70dfc102..31178c3e 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -257,7 +257,7 @@ const Directory = () =>
          <GlobalModel
           isOpen={openBucketModal}
           closeModal={() =>setOpenBucketModal(false)}
-          size="md"
+          size="lg"
         >
           <ManageBucket buckets={buckets} />
         </GlobalModel>
diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
index c3ae03cd..bb9ae418 100644
--- a/src/pages/Directory/DirectoryPageHeader.jsx
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -1,3 +1,239 @@
+import React, { useEffect, useState } from "react";
+
+const DirectoryPageHeader = ({
+  searchText,
+  setSearchText,
+  setIsActive,
+  listView,
+  setListView,
+  filteredBuckets,
+  tempSelectedBucketIds,
+  handleTempBucketChange,
+  filteredCategories,
+  tempSelectedCategoryIds,
+  handleTempCategoryChange,
+  clearFilter,
+  applyFilter,
+  loading,
+  IsActive,
+  setIsOpenModal,
+  setOpenBucketModal,
+}) => {
+  const [filtered, setFiltered] = useState();
+
+  useEffect(() => {
+    setFiltered(
+      tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length
+    );
+  }, [tempSelectedBucketIds, tempSelectedCategoryIds]);
+  return (
+    <>
+      <div className="row"></div>
+      <div className="row mx-0 px-0 align-items-center">
+        <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
+          <input
+            type="search"
+            className="form-control form-control-sm me-2"
+            placeholder="Search Contact..."
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+          />
+          <div className="d-flex gap-2 ">
+            <button
+              type="button"
+              className={`btn btn-xs ${
+                !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-xs ${
+                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" style={{ width: "fit-content" }}>
+            <div className="dropdown" style={{ width: "fit-content" }}>
+              <a
+                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i className={`fa-solid fa-filter ms-1 fs-5 ${filtered > 0 ? 'text-primary' : 'text-muted'}`}></i>
+
+                {filtered > 0 && (
+                  <span
+                    className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning"
+                    style={{ fontSize: "0.4rem"}}
+                  >
+                    {filtered}
+                  </span>
+                )}
+              </a>
+
+              <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
+                <div>
+                  <p className="text-small text-muted m-0">
+                    Filter by
+                  </p>
+
+                  {/* Bucket Filter */}
+                  <div className="mt-1">
+                    <p className="text-small mb-1 ">Buckets</p>
+                    <div className="d-flex flex-wrap">
+                      {filteredBuckets.map(({ id, name }) => (
+                        <div
+                          className="form-check me-1 mb-1"
+                          style={{ minWidth: "33.33%" }}
+                          key={id}
+                        >
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id={`bucket-${id}`}
+                            checked={tempSelectedBucketIds.includes(id)}
+                            onChange={() => handleTempBucketChange(id)}
+                          />
+                          <label
+                            className="form-check-label text-nowrap text-small "
+                            htmlFor={`bucket-${id}`}
+                          >
+                            {name}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <hr className="m-0" />
+                  {/* Category Filter */}
+                  <div className="mt-1">
+                    <p className="text-small mb-1 ">Categories</p>
+                    <div className="d-flex flex-wrap">
+                      {filteredCategories.map(({ id, name }) => (
+                        <div
+                          className="form-check me-1 mb-1"
+                          style={{ minWidth: "33.33%" }}
+                          key={id}
+                        >
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id={`cat-${id}`}
+                            checked={tempSelectedCategoryIds.includes(id)}
+                            onChange={() => handleTempCategoryChange(id)}
+                          />
+                          <label
+                            className="form-check-label text-nowrap text-small"
+                            htmlFor={`cat-${id}`}
+                          >
+                            {name}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="d-flex justify-content-end gap-2 mt-1">
+                    <button
+                      className="btn btn-xs btn-secondary"
+                      onClick={clearFilter}
+                    >
+                      Clear
+                    </button>
+                    <button
+                      className="btn btn-xs btn-primary"
+                      onClick={applyFilter}
+                    >
+                      Apply Filter
+                    </button>
+                  </div>
+                </div>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div className="col-12 col-md-8 mb-2 px-1 d-flex justify-content-end gap-2 align-items-center text-end">
+          <button
+            type="button"
+            className="btn btn-sm btn-primary"
+            onClick={() => setIsOpenModal(true)}
+          >
+            <i className="bx bx-plus-circle me-2"></i>
+            New Contact
+          </button>
+
+          <div className={`dropdown `}>
+            <button
+              type="button"
+              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              <i
+                className="bx bx-dots-vertical-rounded bx-md text-muted "
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,8"
+                data-bs-placement="top"
+                data-bs-custom-class="tooltip-dark"
+                title="More Action"
+              ></i>
+            </button>
+            <ul className="dropdown-menu dropdown-menu-end w-auto">
+              <li>
+                <a className="dropdown-item px-2 ">
+                  <label className="switch switch-primary align-self-start mb-2">
+                    <input
+                      type="checkbox"
+                      className="switch-input"
+                      onChange={() => setIsActive(!IsActive)}
+                      value={IsActive}
+                      disabled={loading}
+                    />
+                    <span className="switch-toggle-slider">
+                      <span className="switch-on"></span>
+                      <span className="switch-off"></span>
+                    </span>
+                    <span className=" list-inline-item ">
+                      Show Inactive Contacts
+                    </span>
+                  </label>
+                </a>
+              </li>
+              <li>
+                <a
+                  className="dropdown-item cursor-pointer px-2 "
+                  onClick={() => setOpenBucketModal(true)}
+                >
+                  <i className="fa-solid fa-bucket fs-5 me-4"></i>
+                  <span className="align-left">Manage Buckets</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DirectoryPageHeader;
+
 import React from "react";
 
 const DirectoryPageHeader = ({