diff --git a/src/pages/Directory/DirectoryPage.jsx b/src/pages/Directory/DirectoryPage.jsx
index 9580e339..5f819e69 100644
--- a/src/pages/Directory/DirectoryPage.jsx
+++ b/src/pages/Directory/DirectoryPage.jsx
@@ -139,9 +139,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                 <ul className="nav nav-tabs">
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${
-                        activeTab === "notes" ? "active" : ""
-                      } fs-6`}
+                      className={`nav-link ${activeTab === "notes" ? "active" : ""
+                        } fs-6`}
                       onClick={(e) => handleTabClick("notes", e)}
                     >
                       <i className="bx bx-notepad bx-sm me-1_5"></i>
@@ -150,9 +149,8 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                   </li>
                   <li className="nav-item cursor-pointer">
                     <a
-                      className={`nav-link ${
-                        activeTab === "contacts" ? "active" : ""
-                      } fs-6`}
+                      className={`nav-link ${activeTab === "contacts" ? "active" : ""
+                        } fs-6`}
                       onClick={(e) => handleTabClick("contacts", e)}
                     >
                       <i className="bx bxs-contact bx-sm me-1_5"></i>
@@ -160,94 +158,97 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                     </a>
                   </li>
                 </ul>
-              </div>
 
-              <div className="mb-1 px-2 py-3">
-                <div className="d-flex align-items-center justify-content-between">
-                  <div className="d-flex align-items-center gap-3">
-                    {activeTab === "notes" && (
-                      <input
-                        type="search"
-                        className="form-control form-control-sm"
-                        placeholder="Search notes..."
-                        value={searchNote}
-                        onChange={(e) => setSearchNote(e.target.value)}
-                      />
-                    )}
+                <div className="mb-1 px-2 py-3">
+                  <div className="d-flex align-items-center justify-content-between">
+                    <div className="d-flex align-items-center gap-3">
+                      {activeTab === "notes" && (
+                        <input
+                          type="search"
+                          className="form-control form-control-sm"
+                          placeholder="Search notes..."
+                          value={searchNote}
+                          onChange={(e) => setSearchNote(e.target.value)}
+                        />
+                      )}
 
-                    {activeTab === "contacts" && (
-                      <div className="d-flex align-items-center gap-3">
-                        <div className="d-flex gap-2 align-items-center">
-                          <input
-                            type="search"
-                            className="form-control form-control-sm"
-                            placeholder="Search contacts..."
-                            value={searchContact}
-                            onChange={(e) => setsearchContact(e.target.value)}
-                          />
-                         
+                      {activeTab === "contacts" && (
+                        <div className="d-flex align-items-center gap-3">
+                          <div className="d-flex gap-2 align-items-center">
+                            <input
+                              type="search"
+                              className="form-control form-control-sm"
+                              placeholder="Search contacts..."
+                              value={searchContact}
+                              onChange={(e) => setsearchContact(e.target.value)}
+                            />
+                            <button
+                              className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary"
+                                }`}
+                              onClick={() => setGridView(true)}
+                            >
+                              <i className="bx bx-grid-alt"></i>
+                            </button>
 
+                            <button
+                              className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
+                                }`}
+                              onClick={() => setGridView(false)}
+                            >
+                              <i className="bx bx-list-ul"></i>
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    <div className="dropdown z-2">
+                      <button
+                        type="button"
+                        className="btn btn-icon p-0 m-0"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                        title="More Actions"
+                      >
+                        <i className="bx bx-dots-vertical-rounded text-muted bx-md"></i>
+                      </button>
+
+                      <ul className="dropdown-menu dropdown-menu-end shadow-sm p-2" style={{ minWidth: "220px" }}>
+                        <li>
                           <button
-                            className={`btn btn-sm p-1 ${
-                              gridView ? " btn-primary" : " btn-outline-primary"
-                            }`}
-                            onClick={() => setGridView(true)}
+                            className="dropdown-item d-flex align-items-center gap-2"
+                            onClick={() => handleExport("csv")}
                           >
-                            <i className="bx bx-grid-alt"></i>
+                            <i className="bx bx-file"></i>
+                            <span>Export to CSV</span>
                           </button>
+                        </li>
 
-                           <button
-                            className={`btn btn-sm p-1 ${
-                              !gridView ? "btn-primary" : "btn-outline-primary"
-                            }`}
-                            onClick={() => setGridView(false)}
-                          >
-                            <i className="bx bx-list-ul"></i>
-                          </button>
-                        </div>
+                        {/* Divider */}
+                        {activeTab === "contacts" && <li><hr className="dropdown-divider" /></li>}
 
-                        <div className="form-check form-switch d-flex align-items-center m-0">
-                          <input
-                            type="checkbox"
-                            className="form-check-input"
-                            role="switch"
-                            id="inactiveEmployeesCheckbox"
-                            checked={showActive}
-                            onChange={(e) => setShowActive(e.target.checked)}
-                          />
-                          <label
-                            className="form-check-label ms-2"
-                            htmlFor="inactiveEmployeesCheckbox"
-                          >
-                            {showActive ? "Active" : "Inactive"} Contacts
-                          </label>
-                        </div>
-                      </div>
-                    )}
-                  </div>
+                        {activeTab === "contacts" && (
+                          <li className="dropdown-item d-flex align-items-center">
+                            <div className="form-check form-switch mb-0">
+                              <input
+                                type="checkbox"
+                                className="form-check-input"
+                                role="switch"
+                                id="inactiveContactsSwitch"
+                                checked={showActive}
+                                onChange={(e) => setShowActive(e.target.checked)}
+                              />
+                            </div>
+                            <span>{showActive ? "Active Contacts" : "Inactive Contacts"}</span>
+                          </li>
+                        )}
+                      </ul>
+                    </div>
 
-                  <div className="btn-group">
-                    <button
-                      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 cursor-pointer"
-                          onClick={() => handleExport("csv")}
-                        >
-                          <i className="bx bx-file me-1"></i> CSV
-                        </a>
-                      </li>
-                    </ul>
                   </div>
                 </div>
+
               </div>
+
             </div>
           </div>