diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index 519d1b7f..9ac982c6 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -94,14 +94,15 @@ const CardViewDirectory = ({
           </div>
         </div>
 
-        <ul className="list-inline m-0 ps-4">
-          <li className="list-inline-item me-1" style={{ fontSize: "10px" }}>
-            <i className="fa-solid fa-briefcase me-2"></i>
-          </li>
-          <li className="list-inline-item text-small">
-            {contact.organization}
-          </li>
-        </ul>
+        <ul className="list-inline m-0 ps-4 d-flex align-items-start">
+  <li className="list-inline-item me-1 small">
+    <i className="fa-solid fa-briefcase me-2"></i>
+  </li>
+  <li className="list-inline-item text-break small">
+    {contact.organization}
+  </li>
+</ul>
+
       </div>
       <div
         className="card-footer text-start px-1 py-1"
@@ -113,16 +114,17 @@ const CardViewDirectory = ({
         }}
       >
         <hr className="my-0" />
-        {contact.contactEmails[0] && (
-          <ul className="list-inline my-1  ">
-            <li className="list-inline-item me-2">
-              <i className="bx bx-envelope bx-xs"></i>
-            </li>
-            <li className="list-inline-item text-small">
-              {contact.contactEmails[0]?.emailAddress}
-            </li>
-          </ul>
-        )}
+      {contact.contactEmails[0] && (
+  <ul className="list-unstyled my-1 d-flex align-items-start">
+    <li className="me-2">
+      <i className="bx bx-envelope bx-xs mt-1"></i>
+    </li>
+    <li className="flex-grow-1 text-break small">
+      {contact.contactEmails[0].emailAddress}
+    </li>
+  </ul>
+)}
+
 
         {contact.contactPhones[0] && (
           <ul className="list-inline m-0 ">
diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
index 274b0d22..8494f2c6 100644
--- a/src/components/Directory/ProfileContactDirectory.jsx
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -58,23 +58,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                 <div style={{ width: "100px", minWidth: "100px" }}>
                   <p className="m-0">Email:</p>
                 </div>
-                <div>
-                  <ul className="list-inline mb-0">
+                <div style={{ flex: 1 }}>
+                  <ul className="list-unstyled mb-0">
                     {contactProfile.contactEmails.map((email, idx) => (
-                      <li
-                        className="list-inline-item me-3 d-flex align-items-center"
-                        key={idx}
-                      >
-                        <i className="bx bx-envelope bx-xs me-1"></i>
-                        <span className="me-2">{email.emailAddress}</span>
+                      <li className="d-flex align-items-center mb-1" key={idx}>
+                        <i className="bx bx-envelope bx-xs me-1 mt-1"></i>
+                        <span className="me-1 flex-grow text-break overflow-wrap">
+                          {email.emailAddress}
+                        </span>
                         <i
-                          className={`bx bx-copy cursor-pointer ${
+                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${
                             copiedIndex === idx
                               ? "text-secondary"
                               : "text-primary"
                           }`}
                           title={copiedIndex === idx ? "Copied!" : "Copy Email"}
-                          style={{ fontSize: "16px" }}
+                          style={{ flexShrink: 0 }}
                           onClick={() => handleCopy(email.emailAddress, idx)}
                         ></i>
                       </li>
@@ -103,33 +102,28 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             )}
 
             {contactProfile?.createdAt && (
-              <div className="d-flex mb-2">
+              <div className="d-flex  mb-2">
                 <div style={{ width: "100px", minWidth: "100px" }}>
                   <p className="m-0">Created : </p>
                 </div>
-                <div>
-                  <ul className="list-inline mb-0">
+                <div className="d-flex align-items-center">
                     <li className="list-inline-item">
                       <i className="bx bx-calendar-week bx-xs me-1"></i>
                       {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
                     </li>
-                  </ul>
                 </div>
               </div>
             )}
-
             {contactProfile?.address && (
               <div className="d-flex mb-2">
                 <div style={{ width: "100px", minWidth: "100px" }}>
-                  <p className="m-0">Location : </p>
+                  <p className="m-0">Location:</p>
                 </div>
-                <div>
-                  <ul className="list-inline mb-0">
-                    <li className="list-inline-item">
-                      <i className="bx bx-map bx-xs me-1"></i>
-                      {contactProfile?.address}
-                    </li>
-                  </ul>
+                <div className="d-flex align-items-center">
+                  <i className="bx bx-map bx-xs me-1 "></i>
+                  <span className="text-break small">
+                    {contactProfile.address}
+                  </span>
                 </div>
               </div>
             )}
@@ -141,13 +135,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                 <div style={{ width: "100px", minWidth: "100px" }}>
                   <p className="m-0">Orgnization : </p>
                 </div>
-                <div>
-                  <ul className="list-inline mb-0">
-                    <li className="list-inline-item">
-                      <i className="fa-solid fa-briefcase me-2"></i>
-                      {contactProfile.organization}
-                    </li>
-                  </ul>
+                <div className="d-flex align-items-center">
+                  <i className="fa-solid fa-briefcase me-2"></i>
+
+                  <span style={{ wordBreak: "break-word" }}>
+                    {contactProfile.organization}
+                  </span>
                 </div>
               </div>
             )}