diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
new file mode 100644
index 00000000..3dfda7be
--- /dev/null
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -0,0 +1,75 @@
+import React from "react";
+
+const CardViewDirectory = ({contact}) => {
+  return (
+    <div class="card text-start ">
+      <div class="card-body d-flex justify-content-between px-1 py-2">
+        <div>
+                  <p className="fs-6 m-0">{contact.name}</p>
+          <small className="simple-text m-0 text-muted"></small>
+        </div>
+        <div>
+          <div className="dropdown z-2 ">
+            <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-sm 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 className="dropdown-menu dropdown-menu-end w-auto">
+              <li >
+                <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>
+              </li>
+              <li>
+                <a className="dropdown-item  px-2 py-0">
+                  <i className="bx bx-trash bx-xs me-2"></i>
+                  <span className="align-left small-text">Delete</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="card-footer text-start px-1 py-1">
+        <hr className="my-0"/>
+              {contact.contactEmails && <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 small-text">{contact.contactEmails[ 0 ]?.emailAddress}</li>
+              </ul>}
+
+              {contact.contactPhones && <ul className="list-inline m-0">
+                  <li className="list-inline-item me-2">
+                      <i className="bx bx-phone bx-xs"></i>
+                  </li>
+                  <li className="list-inline-item small-text">{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>
+                  <li className="list-inline-item small-text">
+                      {contact.contactCategory.name}
+        </li>
+      </ul>
+
+      </div>
+    </div>
+  );
+};
+
+export default CardViewDirectory;