diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx
index 41a02097..c92713c5 100644
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Editor from "../common/TextEditor/Editor";
 import Avatar from "../common/Avatar";
 import { useForm } from "react-hook-form";
@@ -7,7 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { showText } from "pdf-lib";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import moment from "moment";
-import {getCachedData} from "../../slices/apiDataManager";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import NoteCardDirectory from "./NoteCardDirectory";
 import showToast from "../../services/toastService";
 
@@ -15,10 +15,10 @@ const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
-{
-  const [ NotesData, setNotesData ] = useState()
-  const[IsSubmitting,setIsSubmitting] = useState(false)
+const NotesDirectory = ({ isLoading, contactProfile, setProfileContact }) => {
+  const [NotesData, setNotesData] = useState();
+  const [IsSubmitting, setIsSubmitting] = useState(false);
+  const [addNote, setAddNote] = useState(false);
   const {
     register,
     handleSubmit,
@@ -40,27 +40,35 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
 
   const onSubmit = async (data) => {
     const newNote = { ...data, contactId: contactProfile?.id };
-    try
-    {
-      setIsSubmitting(true)
-        const response = await DirectoryRepository.CreateNote( newNote );
+    try {
+      setIsSubmitting(true);
+      const response = await DirectoryRepository.CreateNote(newNote);
 
-         const createdNote = response.data; 
+      const createdNote = response.data;
 
       setProfileContact((prev) => ({
         ...prev,
         notes: [...(prev.notes || []), createdNote],
       }));
 
+      const cached_contactProfile = getCachedData("Contact Profile");
+      if (
+        cached_contactProfile &&
+        cached_contactProfile.contactId === contactProfile?.id
+      ) {
+        const updatedProfile = {
+          ...cached_contactProfile.data,
+          notes: [...(cached_contactProfile.notes || []), createdNote],
+        };
+        cacheData("Contact Profile", updatedProfile);
+      }
+
       setValue("note", "");
-        const result = response.data
-        const cache_notes = getCachedData( "Contact Note" )
-      
-  setIsSubmitting(false)
-            showToast("Note added successfully!", "success")
-    } catch ( error )
-    {
-      setIsSubmitting(false)
+      setIsSubmitting(false);
+      showToast("Note added successfully!", "success");
+      setAddNote(false);
+    } catch (error) {
+      setIsSubmitting(false);
       const msg =
         error.response.data.message ||
         error.message ||
@@ -75,26 +83,63 @@ const NotesDirectory = ( {isLoading,contactProfile, setProfileContact} ) =>
 
   return (
     <div className="text-start">
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Editor
-          value={noteValue}
-          loading={IsSubmitting}
-          onChange={handleEditorChange}
-          onCancel={onCancel}
-          onSubmit={handleSubmit(onSubmit)}
-        />
-        {errors.notes && (
-          <p className="text-danger small mt-1">{errors.note.message}</p>
+      <div
+        className={`${
+          contactProfile?.notes?.length > 0
+            ? "d-flex justify-content-between"
+            : "d-flex justify-content-end"
+        }`}
+      >
+        {contactProfile?.notes.length > 0 && (
+          <p className="fw-semibold m-0">Notes :</p>
         )}
-      </form>
+        <a
+          className="small-text m-0 cursor-pointer"
+          onClick={() => setAddNote(!addNote)}
+        >
+          <u>
+            {addNote ? "" : "Add Note"}
+            <i
+              className={`bx  ${addNote ? "bx-x" : "bx-pencil"} bx-xs`}
+            ></i>{" "}
+          </u>{" "}
+        </a>
+      </div>
+      {addNote && (
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Editor
+            value={noteValue}
+            loading={IsSubmitting}
+            onChange={handleEditorChange}
+            onCancel={onCancel}
+            onSubmit={handleSubmit(onSubmit)}
+          />
+          {errors.notes && (
+            <p className="text-danger small mt-1">{errors.note.message}</p>
+          )}
+        </form>
+      )}
       <div
         className=" justify-content-start overflow-auto px-1"
-        style={{ maxHeight: "300px", minHeight: "100px" }}
+        style={{ maxHeight: "300px" }}
       >
-        {isLoading && <div className="text-center"> <p>Loading...</p> </div>}
-        {!isLoading && contactProfile?.notes?.map((noteItem) => (
-          <NoteCardDirectory noteItem={noteItem} contactId={contactProfile?.id} setProfileContact={setProfileContact} key={noteItem.id}  />
-        ))}
+        {isLoading && (
+          <div className="text-center">
+            {" "}
+            <p>Loading...</p>{" "}
+          </div>
+        )}
+        {!isLoading &&
+          [...(contactProfile?.notes || [])]
+            .reverse()
+            .map((noteItem) => (
+              <NoteCardDirectory
+                noteItem={noteItem}
+                contactId={contactProfile?.id}
+                setProfileContact={setProfileContact}
+                key={noteItem.id}
+              />
+            ))}
       </div>
     </div>
   );
diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
index a46c2001..7b7a3ed4 100644
--- a/src/components/Directory/ProfileContactDirectory.jsx
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -5,7 +5,7 @@ import moment from "moment";
 import NotesDirectory from "./NotesDirectory";
 
 const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
-  const { conatProfile ,loading} = useContactProfile(contact?.id);
+  const { conatProfile, loading } = useContactProfile(contact?.id);
   const [activeTab, setActiveTab] = useState("profile");
   const [profileContact, setProfileContact] = useState();
 
@@ -14,7 +14,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   }, [conatProfile]);
   return (
     <div className="p-1">
-      <div className="text-center m-0 p-0">     
+      <div className="text-center m-0 p-0">
         <p className="fw-semibold fs-6 m-0">Contact Profile</p>
       </div>
       <div>
@@ -36,106 +36,65 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
             </span>
           </div>
         </div>
-
-        <hr className="my-1" />
-
-        {/* Tabs */}
-
-        {loading && <div className="text-center"> <p>Loading...</p> </div>}
-        {!loading && (
-          <ul className="nav nav-tabs mb-1 p0">
-          <li className="nav-item">
-            <button
-              className={`nav-link p-1 me-2 ${
-                activeTab === "profile" ? "active" : ""
-              }`}
-              onClick={() => setActiveTab("profile")}
-            >
-              Profile
-            </button>
-          </li>
-          <li className="nav-item ">
-            <button
-              className={`nav-link text-start p-1 ${
-                activeTab === "notes" ? "active" : ""
-              }`}
-              onClick={() => setActiveTab("notes")}
-            >
-            Notes<i className="bx  bx-pencil bx-xs"></i>
-            </button>
-          </li>
-          
-        </ul>
-        )}
-
-        {/* Tab Content */}
-        <div>
-          {activeTab === "notes" && (
-            <NotesDirectory
-              isLoading={loading}
-              contactProfile={profileContact}
-              setProfileContact={setProfileContact}
-            />
+        <div className="d-flex flex-column text-start">
+          {conatProfile?.contactEmails?.length > 0 && (
+            <div className="d-flex mb-2">
+              <div style={{ width: "100px", minWidth: "100px" }}>
+                <p className="m-0">Email</p>
+              </div>
+              <div>
+                <ul className="list-inline mb-0">
+                  {conatProfile.contactEmails.map((email, idx) => (
+                    <li className="list-inline-item me-3" key={idx}>
+                      <i className="bx bx-envelope bx-xs me-1"></i>
+                      {email.emailAddress}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )}
+          {conatProfile?.contactPhones?.length > 0 && (
+            <div className="d-flex mb-2">
+              <div style={{ width: "100px", minWidth: "100px" }}>
+                <p className="m-0">Phone</p>
+              </div>
+              <div>
+                <ul className="list-inline mb-0">
+                  {conatProfile.contactPhones.map((phone, idx) => (
+                    <li className="list-inline-item me-3" key={idx}>
+                      <i className="bx bx-phone bx-xs me-1"></i>
+                      {phone.phoneNumber}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
           )}
-          {activeTab === "profile" && (
-            <div>
-              <div className="d-flex flex-column text-start">
-                {conatProfile?.contactEmails?.length > 0 && (
-                  <div className="d-flex mb-2">
-                    <div style={{ width: "100px", minWidth: "100px" }}>
-                      <p className="m-0">Email</p>
-                    </div>
-                    <div>
-                      <ul className="list-inline mb-0">
-                        {conatProfile.contactEmails.map((email, idx) => (
-                          <li className="list-inline-item me-3" key={idx}>
-                            <i className="bx bx-envelope bx-xs me-1"></i>
-                            {email.emailAddress}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
-                {conatProfile?.contactPhones?.length > 0 && (
-                  <div className="d-flex mb-2">
-                    <div style={{ width: "100px", minWidth: "100px" }}>
-                      <p className="m-0">Phone</p>
-                    </div>
-                    <div>
-                      <ul className="list-inline mb-0">
-                        {conatProfile.contactPhones.map((phone, idx) => (
-                          <li className="list-inline-item me-3" key={idx}>
-                            <i className="bx bx-phone bx-xs me-1"></i>
-                            {phone.phoneNumber}
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
 
-                {conatProfile?.createdAt && (
-                  <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">
-                        <li className="list-inline-item">
-                          <i className="bx bx-calendar-week bx-xs me-1"></i>
-                          {moment(conatProfile.createdAt).format(
-                            "MMMM, DD YYYY"
-                          )}
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
-                )}
+          {conatProfile?.createdAt && (
+            <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">
+                  <li className="list-inline-item">
+                    <i className="bx bx-calendar-week bx-xs me-1"></i>
+                    {moment(conatProfile.createdAt).format("MMMM, DD YYYY")}
+                  </li>
+                </ul>
               </div>
             </div>
           )}
         </div>
+
+        <hr className="my-1" />
+        <NotesDirectory
+          isLoading={loading}
+          contactProfile={profileContact}
+          setProfileContact={setProfileContact}
+        />
       </div>
     </div>
   );