diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
index cf2fc6146d..4529935c71 100644
--- a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
+++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx
@@ -25,13 +25,11 @@ export const IssueWidgetCard = (props) => {
   };
 
   return (
-    <NodeViewWrapper className="issue-embed-component m-2">
+    <NodeViewWrapper className="issue-embed-component my-2">
       {loading == 0 ? (
         <div
           onClick={completeIssueEmbedAction}
-          className={`${
-            props.selected ? "border-custom-primary-200 border-[2px]" : ""
-          } w-full cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs`}
+          className="w-full cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs"
         >
           <h5 className="text-xs text-custom-text-300">
             {issueDetails?.project_detail?.identifier}-{issueDetails?.sequence_id}
diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx
index 26dd27e65a..2571d4f7b2 100644
--- a/packages/editor/document-editor/src/ui/index.tsx
+++ b/packages/editor/document-editor/src/ui/index.tsx
@@ -49,6 +49,7 @@ const DocumentEditor = (props: IDocumentEditor) => {
     handleEditorReady,
     forwardedRef,
     tabIndex,
+    embedConfig,
   } = props;
   // states
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = useState<() => void>(() => {});
diff --git a/packages/editor/document-editor/src/ui/readonly/index.tsx b/packages/editor/document-editor/src/ui/readonly/index.tsx
index 1ab3ad3daa..cef1b594b4 100644
--- a/packages/editor/document-editor/src/ui/readonly/index.tsx
+++ b/packages/editor/document-editor/src/ui/readonly/index.tsx
@@ -2,7 +2,8 @@ import { forwardRef, MutableRefObject } from "react";
 import { EditorReadOnlyRefApi, getEditorClassNames, IMentionHighlight, useReadOnlyEditor } from "@plane/editor-core";
 // components
 import { PageRenderer } from "src/ui/components/page-renderer";
-import { IssueWidgetPlaceholder } from "../extensions/widgets/issue-embed-widget";
+import { IssueWidgetExtension } from "../extensions/widgets/issue-embed-widget";
+import { IEmbedConfig } from "../extensions/widgets/issue-embed-widget/types";
 
 interface IDocumentReadOnlyEditor {
   initialValue: string;
diff --git a/web/components/pages/editor/editor-body.tsx b/web/components/pages/editor/editor-body.tsx
index 260b90b6fd..39b07e446c 100644
--- a/web/components/pages/editor/editor-body.tsx
+++ b/web/components/pages/editor/editor-body.tsx
@@ -12,12 +12,15 @@ import {
 } from "@plane/document-editor";
 // types
 import { IUserLite, TPage } from "@plane/types";
+// ui
+import { Spinner } from "@plane/ui";
 // components
 import { PageContentBrowser, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
+import { useIssueEmbeds } from "@/hooks/use-issue-embeds";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // services
 import { FileService } from "@/services/file.service";
@@ -79,6 +82,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     members: projectMemberDetails,
     user: currentUser ?? undefined,
   });
+  // issue-embed
+  const { issues, fetchIssue, issueWidgetClickAction, issuesLoading } = useIssueEmbeds();
 
   const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 
@@ -86,6 +91,13 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     updateMarkings(description_html ?? "<p></p>");
   }, [description_html, updateMarkings]);
 
+  if (!issues && issuesLoading)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
   return (
     <div className="flex items-center h-full w-full overflow-y-auto">
       <div
@@ -145,6 +157,13 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                     highlights: mentionHighlights,
                     suggestions: mentionSuggestions,
                   }}
+                  embedConfig={{
+                    issueEmbedConfig: {
+                      issues,
+                      fetchIssue,
+                      clickAction: issueWidgetClickAction,
+                    },
+                  }}
                 />
               )}
             />
@@ -158,6 +177,13 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               mentionHandler={{
                 highlights: mentionHighlights,
               }}
+              embedConfig={{
+                issueEmbedConfig: {
+                  issues,
+                  fetchIssue,
+                  clickAction: issueWidgetClickAction,
+                },
+              }}
             />
           )}
         </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 13b1a03202..ca743128a7 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 import useSWR from "swr";
 // document-editor
-// import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
+import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
 // types
 import { TPage } from "@plane/types";
 // ui