diff --git a/src/pages/Directory/DirectoryPage.jsx b/src/pages/Directory/DirectoryPage.jsx
index 485718fb..5f819e69 100644
--- a/src/pages/Directory/DirectoryPage.jsx
+++ b/src/pages/Directory/DirectoryPage.jsx
@@ -201,41 +201,44 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                         </div>
                       )}
                     </div>
-                    <div class="dropdown z-2">
-                      <button type="button"
-                        class="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0" data-bs-toggle="dropdown" aria-expanded="true">
-                        <i class="bx bx-dots-vertical-rounded text-muted p-0" 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 class="dropdown-menu dropdown-menu-end p-5" data-popper-placement="bottom-end"
+                    <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>
-                          <a
-                            className="dropdown-item cursor-pointer"
+                          <button
+                            className="dropdown-item d-flex align-items-center gap-2"
                             onClick={() => handleExport("csv")}
                           >
-                            <i className="bx bx-file"></i> Export to CSV
-                          </a>
+                            <i className="bx bx-file"></i>
+                            <span>Export to CSV</span>
+                          </button>
                         </li>
+
+                        {/* Divider */}
+                        {activeTab === "contacts" && <li><hr className="dropdown-divider" /></li>}
+
                         {activeTab === "contacts" && (
-                          <li>
-                            <div className="form-check form-switch d-flex align-items-center m-0">
+                          <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="inactiveEmployeesCheckbox"
+                                id="inactiveContactsSwitch"
                                 checked={showActive}
                                 onChange={(e) => setShowActive(e.target.checked)}
                               />
-                              <label
-                                className="form-check-label ms-2"
-                                htmlFor="inactiveEmployeesCheckbox"
-                              >
-                                {showActive ? "Active" : "Inactive"} Contacts
-                              </label>
                             </div>
+                            <span>{showActive ? "Active Contacts" : "Inactive Contacts"}</span>
                           </li>
                         )}
                       </ul>