diff --git a/src/pages/Directory/DirectoryPageHeader.jsx b/src/pages/Directory/DirectoryPageHeader.jsx
index 657c22de..53aaa2f6 100644
--- a/src/pages/Directory/DirectoryPageHeader.jsx
+++ b/src/pages/Directory/DirectoryPageHeader.jsx
@@ -257,7 +257,7 @@ const DirectoryPageHeader = ({
                     <ul className="nav nav-tabs mb-0" role="tablist">
                         <li className="nav-item" role="presentation">
                             <button
-                                className={`nav-link ${viewType === "notes" ? "active" : ""}`}
+                                className={`nav-link ${viewType === "notes" ? "active" : ""} fs-6`}
                                 onClick={() => setViewType("notes")}
                                 type="button"
                             >
@@ -266,8 +266,9 @@ const DirectoryPageHeader = ({
                         </li>
                         <li className="nav-item" role="presentation">
                             <button
-                                className={`nav-link ${viewType === "card" ? "active" : ""}`}
-                                onClick={() => setViewType("card")}
+                                // Corrected: Apply 'active' if viewType is either 'card' or 'list'
+                                className={`nav-link ${viewType === "card" || viewType === "list" ? "active" : ""} fs-6`}
+                                onClick={() => setViewType("card")} // You might want to default to 'card' when switching to contacts
                                 type="button"
                             >
                                 <i className="bx bx-user me-1"></i> Contacts
@@ -341,7 +342,7 @@ const DirectoryPageHeader = ({
                                         </div>
 
                                         {/* Organization */}
-                                        <div style={{  maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
+                                        <div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden", }}>
                                             <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
                                                 <p className="text-muted mb-2 pt-2">Organization</p>
                                             </div>