diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index d1736a6c..7de59ce5 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -1,18 +1,45 @@
-import React, { useState } from "react";
+import React, { useEffect, 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";
 import ListViewDirectory from "../../components/Directory/ListViewDirectory";
-import {useDirectory} from "../../hooks/useDirectory";
-
+import { useDirectory } from "../../hooks/useDirectory";
+import { DirectoryRepository } from "../../repositories/DirectoryRepository";
+import { getCachedData } from "../../slices/apiDataManager";
+import showToast from "../../services/toastService";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
-  const closedModel = () => setIsOpenModal( false );
-  
-  const {contacts} = useDirectory();
-  console.log(contacts)
+  const closedModel = () => setIsOpenModal(false);
+  const [ContatList, setContactList] = useState([]);
+
+  const { contacts, loading } = useDirectory();
+  const submitContact = async (data, setLoading, reset) => {
+    try
+    {
+      debugger
+      const resp = await DirectoryRepository.CreateContact(data)
+      const contacts_cache = getCachedData("contacts") || [];
+      const updated_contacts = [...contacts_cache, resp.data];
+
+      setContactList(updated_contacts);
+      showToast(resp.message || "Contact created successfully", "success");
+      setLoading(false);
+      reset();
+      setIsOpenModal(false);
+    } catch (error) {
+      const msg =
+        error.response.data.message ||
+        error.message ||
+        "Error Occured during api calling !";
+      showToast(msg, "error");
+    }
+  };
+
+  useEffect(() => {
+    setContactList(contacts);
+  }, [contacts]);
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -22,9 +49,14 @@ const Directory = () => {
         ]}
       ></Breadcrumb>
 
-      <GlobalModel isOpen={isOpenModal} closeModal={closedModel} size="lg">
-        <ManageDirectory />
-      </GlobalModel>
+      {isOpenModal && (
+        <GlobalModel isOpen={isOpenModal} closeModal={()=>setIsOpenModal(false)} size="lg">
+          <ManageDirectory
+            submitContact={submitContact}
+            onCLosed={closedModel}
+          />
+        </GlobalModel>
+      )}
 
       <div className="card p-2">
         <div className="row mx-0 px-0">
@@ -48,9 +80,9 @@ const Directory = () => {
         </div>
         <div className="table-responsive text-nowrap py-2 ">
           <table className="table px-2">
-            <thead >
-              <tr> 
-                <th>
+            <thead>
+              <tr>
+                <th colSpan={2}>
                   <div className="d-flex align-items-center gap-1">
                     <IconButton
                       size={12}
@@ -61,8 +93,8 @@ const Directory = () => {
                     <span>Name</span>
                   </div>
                 </th>
-                <th colSpan="2" className="px-2 text-center">
-                  <div className="d-flex text-center align-items-center gap-1 justify-content-center">
+                <th  className="px-2 text-start">
+                  <div className="d-flex text-center align-items-center gap-1 justify-content-start">
                     <IconButton
                       size={12}
                       iconClass="bx bx-envelope"
@@ -137,9 +169,23 @@ const Directory = () => {
               </tr>
             </thead>
             <tbody className="table-border-bottom-0 overflow-auto ">
-              {contacts.map((contact) => (
-                <ListViewDirectory contact={contact} />
-              ))}
+              {(loading && ContatList.length === 0) && (
+                <tr>
+                  <td colSpan={10}>Loading...</td>
+                </tr>
+              )}
+              {(!loading && contacts.length == 0 && ContatList.length === 0) && (
+                <tr>
+                  <td colSpan={10}>No Contact Found</td>
+                </tr>
+             )}
+              {!loading &&
+                ContatList.map((contact) => (
+                  <ListViewDirectory
+                    contact={contact}
+                    submitContact={submitContact}
+                  />
+                ))}
             </tbody>
           </table>
         </div>