diff --git a/src/app/canvas/page.tsx b/src/app/canvas/page.tsx
index 60d94ac6..b08cebf1 100644
--- a/src/app/canvas/page.tsx
+++ b/src/app/canvas/page.tsx
@@ -5,7 +5,6 @@ import { ReactFlowProvider } from "@xyflow/react";
 import { Header } from "@/components/Header";
 import { WorkflowCanvas } from "@/components/WorkflowCanvas";
 import { FloatingActionBar } from "@/components/FloatingActionBar";
-import { AnnotationModal } from "@/components/AnnotationModal";
 import { PopiaiEmbedBridge } from "@/components/PopiaiEmbedBridge";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { FTUXModal } from "@/components/onboarding/FTUXModal";
@@ -82,7 +81,6 @@ function CanvasPageContent() {
         <Header />
         <WorkflowCanvas />
         <FloatingActionBar />
-        <AnnotationModal />
         <PopiaiEmbedBridge />
         {showFTUX && (
           <FTUXModal
diff --git a/src/components/AnnotationModal.tsx b/src/components/AnnotationModal.tsx
index a378183d..8f4ab091 100644
--- a/src/components/AnnotationModal.tsx
+++ b/src/components/AnnotationModal.tsx
@@ -99,7 +99,7 @@ export function AnnotationModal() {
   } = useAnnotationStore();
 
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
-  const nodes = useWorkflowStore((state) => state.nodes);
+  const nodes = useWorkflowStore((state) => state.nodes ?? []);
   const nodeDisplaySize = useMemo(() => {
     const sourceNode = sourceNodeId ? nodes.find((node) => node.id === sourceNodeId) : null;
     const nodeType = sourceNode?.type as NodeType | undefined;
@@ -135,6 +135,12 @@ export function AnnotationModal() {
   const textInputCreatedAt = useRef<number>(0);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    return () => {
+      closeModal();
+    };
+  }, [closeModal]);
+
   useEffect(() => {
     let cancelled = false;
     let revokeImageSource: (() => void) | undefined;