diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
new file mode 100644
index 00000000..24f8c979
--- /dev/null
+++ b/src/pages/Directory/Directory.jsx
@@ -0,0 +1,184 @@
+import React, {useState} from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import IconButton from "../../components/common/IconButton";
+import GlobalModel from "../../components/common/GlobalModel";
+import ManageDirectory from "../../components/Directory/ManageDirectory";
+
+const Directory = () =>
+{
+    const [ isOpenModal, setIsOpenModal ] = useState( false )
+  const closedModel = () => setIsOpenModal( false )
+  
+  const contacts = [
+    {
+      "userId": 1,
+      "firstName": "Krish",
+      "lastName": "Lee",
+      "phoneNumber": "123456",
+      "emailAddress": "krish.lee@learningcontainer.com",
+      "type":"Clinet"
+    },
+    {
+      "userId": 2,
+      "firstName": "racks",
+      "lastName": "jacson",
+      "phoneNumber": "123456",
+      "emailAddress": "racks.jacson@learningcontainer.com",
+      "type":"Vendor"
+    },
+    {
+      "userId": 3,
+      "firstName": "denial",
+      "lastName": "roast",
+      "phoneNumber": "33333333",
+      "emailAddress": "denial.roast@learningcontainer.com",
+      "type":"vendor"
+    },
+    {
+      "userId": 4,
+      "firstName": "devid",
+      "lastName": "neo",
+      "phoneNumber": "222222222",
+      "emailAddress": "devid.neo@learningcontainer.com",
+      "type":"employee"
+    },
+    {
+      "userId": 5,
+      "firstName": "jone",
+      "lastName": "mac",
+      "phoneNumber": "111111111",
+      "emailAddress": "jone.mac@learningcontainer.com",
+      "type":"employee"
+    }
+  ]
+  return (
+    <div className="container-xxl flex-grow-1 container-p-y">
+      <Breadcrumb
+        data={[
+          { label: "Home", link: "/dashboard" },
+          { label: "Directory", link: null },
+        ]}
+          ></Breadcrumb>
+          
+          <GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
+             <ManageDirectory/>
+          </GlobalModel>
+          
+          <div className="row">
+              <div className="row mx-0 px-0">
+              <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
+              <input
+                type="search"
+                className="form-control form-control-sm"
+                placeholder="Search projects..."
+              
+              />
+                  </div> 
+                  <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
+                  <button
+              type="button"
+                          className={`btn btn-sm btn-primary `}
+                          onClick={() => setIsOpenModal(true)}
+            >
+              <i className="bx bx-plus-circle me-2"></i>
+              New Contact
+            </button>
+            </div>
+              </div>
+        <div className="table-responsive text-nowrap py-2 ">
+          <table className="table px-2">
+            <thead>
+              <tr>
+                <th className="text-start" colSpan="2">
+                  Name
+                </th>
+                <th className="px-2">
+                  <div className="d-flex align-items-center gap-1">
+                    <IconButton
+                      size={12}
+                      iconClass="bx bx-envelope"
+                      color="primary"
+                      onClick={() => alert("User icon clicked")}
+                    />
+                    <span>Email</span>
+                  </div>
+                </th>
+                <th className="mx-2"><div className="d-flex align-items-center m-0 p-0 gap-1">
+                    <IconButton
+                      size={12}
+                      iconClass="bx bx-phone"
+                      color="warning"
+                      onClick={() => alert("User icon clicked")}
+                    />
+                    <span>Phone</span>
+                </div>
+                </th>
+                  <th className="mx-2">
+                              <div className="d-flex align-items-center gap-1">
+                    <IconButton
+                      size={12}
+                      iconClass="bx bxs-grid-alt"
+                      color="info"
+                      
+                    />
+                    <span>Organization</span>
+                  </div>       
+                </th>
+                <th className="mx-2">
+                  <div className="dropdown">
+                    <a
+                      className="dropdown-toggle hide-arrow cursor-pointer align-items-center"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      Type <i className="bx bx-filter bx-sm"></i>
+                    </a>
+                    {/* <ul className="dropdown-menu p-2 text-capitalize">
+                          {[
+                            { id: 1, label: "Active" },
+                            { id: 2, label: "On Hold" },
+                            { id: 3, label: "Inactive" },
+                            { id: 4, label: "Completed" },
+                          ].map(({ id, label }) => (
+                            <li key={id}>
+                              <div className="form-check">
+                                <input
+                                  className="form-check-input  "
+                                  type="checkbox"
+                                  checked={selectedStatuses.includes(id)}
+                                  onChange={() => handleStatusChange(id)}
+                                />
+                                <label className="form-check-label">
+                                  {label}
+                                </label>
+                              </div>
+                            </li>
+                          ))}
+                        </ul> 
+                    */}
+                  </div>
+                </th>
+                <th
+                //   className={`mx-2 ${
+                //     HasManageProject ? "d-sm-table-cell" : "d-none"
+                //   }`}
+                >
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody className="table-border-bottom-0 overflow-auto ">
+              <tr>
+                <td colSpan="12" className="text-center py-4">
+                  No projects found
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Directory;