diff --git a/app/components/assets/notes/actions-dropdown.tsx b/app/components/assets/notes/actions-dropdown.tsx
index dcda5fca1..ff6089a9e 100644
--- a/app/components/assets/notes/actions-dropdown.tsx
+++ b/app/components/assets/notes/actions-dropdown.tsx
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export const ActionsDopdown = ({ note }: Props) => (
-  <DropdownMenu>
+  <DropdownMenu modal={false}>
     <DropdownMenuTrigger>
       <HorizontalDotsIcon />
     </DropdownMenuTrigger>
diff --git a/app/components/assets/notes/new.tsx b/app/components/assets/notes/new.tsx
index 2e6d36855..7182ac8bf 100644
--- a/app/components/assets/notes/new.tsx
+++ b/app/components/assets/notes/new.tsx
@@ -1,14 +1,13 @@
 import type { ChangeEvent, FocusEvent } from "react";
 import { useCallback, useEffect, useRef } from "react";
-import { useFetcher, useParams } from "@remix-run/react";
+import type { FetcherWithComponents } from "@remix-run/react";
+import { useParams } from "@remix-run/react";
 import { atom, useAtom } from "jotai";
 import { useZorm } from "react-zorm";
 import { z } from "zod";
 import Input from "~/components/forms/input";
 import { MarkdownEditor, clearMarkdownAtom } from "~/components/markdown";
 import { Button } from "~/components/shared";
-import { Spinner } from "~/components/shared/spinner";
-import { isFormProcessing } from "~/utils";
 
 export const NewNoteSchema = z.object({
   content: z.string().min(3, "Content is required"),
@@ -16,11 +15,13 @@ export const NewNoteSchema = z.object({
 
 const isEditingAtom = atom(false);
 
-export const NewNote = () => {
+export const NewNote = ({
+  fetcher,
+}: {
+  fetcher: FetcherWithComponents<any>;
+}) => {
   const zo = useZorm("NewQuestionWizardScreen", NewNoteSchema);
-  const fetcher = useFetcher();
   const params = useParams();
-  const disabled = isFormProcessing(fetcher.state);
   const hasError = zo.errors.content()?.message;
   const [isEditing, setIsEditing] = useAtom(isEditingAtom);
   const editorRef = useRef<HTMLTextAreaElement>(null);
@@ -89,13 +90,12 @@ export const NewNote = () => {
               >
                 Cancel
               </Button>
-              <Button type="submit" size="sm" className="" disabled={disabled}>
-                {disabled ? <Spinner /> : "Create note"}
+              <Button type="submit" size="sm" className="">
+                Create note
               </Button>
             </div>
             <MarkdownEditor
               label={"note"}
-              disabled={disabled}
               defaultValue={""}
               name={zo.fields.content()}
               placeholder={"Leave a note"}
diff --git a/app/components/assets/notes/note.tsx b/app/components/assets/notes/note.tsx
index 7b738d52a..3212f720b 100644
--- a/app/components/assets/notes/note.tsx
+++ b/app/components/assets/notes/note.tsx
@@ -42,7 +42,7 @@ const Update = ({
   </div>
 );
 
-const Comment = ({
+export const Comment = ({
   note,
   user,
 }: {
diff --git a/app/components/assets/notes/notes.tsx b/app/components/assets/notes/notes.tsx
index 2481665ae..f56fad3c2 100644
--- a/app/components/assets/notes/notes.tsx
+++ b/app/components/assets/notes/notes.tsx
@@ -1,18 +1,45 @@
-import { useLoaderData } from "@remix-run/react";
-
+import { useLoaderData, useFetcher } from "@remix-run/react";
+import { MarkdownViewer } from "~/components/markdown/markdown-viewer";
+import { useUserData } from "~/hooks";
+import { isFormProcessing } from "~/utils";
 import { NewNote } from "./new";
 import type { NoteWithDate } from "./note";
 import { Note } from "./note";
 
 export const Notes = () => {
   const { asset } = useLoaderData();
+  /* Using user data here for the Note component generated for frontend only as per the optimistic UI approach */
+  const user = useUserData();
   const hasNotes = asset?.notes.length > 0;
-
+  /* Importing fetcher here in the parent file such that we can use fetcher's states to know the status of form processing and form data render the frontend component on the fly (Optimistic UI) and in the new note form this fetcher is passed as a prop */
+  const fetcher = useFetcher();
+  let onSubmissionContent = "";
+  /* Getting the form data using fetcher and storing the content of form in onSubmissionContent Variable */
+  if (fetcher.formData) {
+    for (const data of fetcher.formData.entries()) {
+      onSubmissionContent = data[1].toString();
+    }
+  }
   return (
     <div>
-      <NewNote />
+      <NewNote fetcher={fetcher} />
       {hasNotes ? (
         <ul className="notes-list mt-8 w-full">
+          {isFormProcessing(fetcher.state) ? (
+            <li className="note mb-6 rounded-lg border bg-white md:mb-8">
+              <header className="flex justify-between border-b px-3.5 py-3 text-text-xs md:text-text-sm">
+                <div>
+                  <span className="commentator font-medium text-gray-900">
+                    {user?.firstName} {user?.lastName}
+                  </span>{" "}
+                  <span className="text-gray-600">Just Now</span>
+                </div>
+              </header>
+              <div className="message px-3.5 py-3">
+                <MarkdownViewer content={onSubmissionContent} />
+              </div>
+            </li>
+          ) : null}
           {asset.notes.map((note: NoteWithDate) => (
             <Note key={note.id} note={note} />
           ))}