diff --git a/apps/roam/src/components/CreateNodeDialog.tsx b/apps/roam/src/components/CreateNodeDialog.tsx
deleted file mode 100644
index 4211f7c56..000000000
--- a/apps/roam/src/components/CreateNodeDialog.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Dialog, Classes, InputGroup, Label, Button } from "@blueprintjs/core";
-import renderOverlay from "roamjs-components/util/renderOverlay";
-import createDiscourseNode from "~/utils/createDiscourseNode";
-import { OnloadArgs } from "roamjs-components/types";
-import updateBlock from "roamjs-components/writes/updateBlock";
-import { render as renderToast } from "roamjs-components/components/Toast";
-import getDiscourseNodes, {
-  DiscourseNode,
-  excludeDefaultNodes,
-} from "~/utils/getDiscourseNodes";
-import { getNewDiscourseNodeText } from "~/utils/formatUtils";
-import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
-import createBlock from "roamjs-components/writes/createBlock";
-
-export type CreateNodeDialogProps = {
-  onClose: () => void;
-  defaultNodeTypeUid: string;
-  extensionAPI: OnloadArgs["extensionAPI"];
-  sourceBlockUid?: string;
-  initialTitle: string;
-};
-
-const CreateNodeDialog = ({
-  onClose,
-  defaultNodeTypeUid,
-  extensionAPI,
-  sourceBlockUid,
-  initialTitle,
-}: CreateNodeDialogProps) => {
-  const discourseNodes = getDiscourseNodes().filter(excludeDefaultNodes);
-  const defaultNodeType =
-    discourseNodes.find((n) => n.type === defaultNodeTypeUid) ||
-    discourseNodes[0];
-
-  const [title, setTitle] = useState(initialTitle);
-  const [selectedType, setSelectedType] =
-    useState<DiscourseNode>(defaultNodeType);
-  const [loading, setLoading] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-
-  const onCreate = async () => {
-    if (!title.trim()) return;
-    setLoading(true);
-
-    const formattedTitle = await getNewDiscourseNodeText({
-      text: title.trim(),
-      nodeType: selectedType.type,
-      blockUid: sourceBlockUid,
-    });
-
-    if (!formattedTitle) {
-      setLoading(false);
-      return;
-    }
-
-    const newPageUid = await createDiscourseNode({
-      text: formattedTitle,
-      configPageUid: selectedType.type,
-      extensionAPI,
-    });
-
-    if (sourceBlockUid) {
-      // TODO: This assumes the new node is always a page. If the specification
-      // defines it as a block (e.g., "is in page with title"), this will not create
-      // the correct reference. The reference format should be determined by the
-      // node's specification.
-      const pageRef = `[[${formattedTitle}]]`;
-      await updateBlock({
-        uid: sourceBlockUid,
-        text: pageRef,
-      });
-      await createBlock({
-        parentUid: sourceBlockUid,
-        order: 0,
-        node: {
-          text: initialTitle,
-        },
-      });
-    }
-
-    renderToast({
-      id: `discourse-node-created-${Date.now()}`,
-      intent: "success",
-      timeout: 10000,
-      content: (
-        <span>
-          Created node{" "}
-          <a
-            className="cursor-pointer font-medium text-blue-500 hover:underline"
-            onClick={async (event) => {
-              if (event.shiftKey) {
-                await window.roamAlphaAPI.ui.rightSidebar.addWindow({
-                  window: {
-                    // @ts-expect-error TODO: fix this
-                    "block-uid": newPageUid,
-                    type: "outline",
-                  },
-                });
-              } else {
-                await window.roamAlphaAPI.ui.mainWindow.openPage({
-                  page: { uid: newPageUid },
-                });
-              }
-            }}
-          >
-            [[{formattedTitle}]]
-          </a>
-        </span>
-      ),
-    });
-    setLoading(false);
-    onClose();
-  };
-
-  return (
-    <Dialog
-      isOpen={true}
-      onClose={onClose}
-      title="Create Discourse Node"
-      autoFocus={false}
-    >
-      <div className={Classes.DIALOG_BODY}>
-        <div className="flex flex-col gap-4">
-          <div>
-            <label className="mb-1 block font-bold">Title</label>
-            <InputGroup
-              placeholder={`This is a potential ${selectedType.text.toLowerCase()}`}
-              value={title}
-              onChange={(e) => setTitle(e.currentTarget.value)}
-              inputRef={inputRef}
-            />
-          </div>
-
-          <Label>
-            Type
-            <MenuItemSelect
-              items={discourseNodes.map((n) => n.type)}
-              transformItem={(t) =>
-                discourseNodes.find((n) => n.type === t)?.text || t
-              }
-              activeItem={selectedType.type}
-              onItemSelect={(t) => {
-                const nt = discourseNodes.find((n) => n.type === t);
-                if (nt) setSelectedType(nt);
-              }}
-            />
-          </Label>
-        </div>
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button minimal onClick={onClose} disabled={loading}>
-            Cancel
-          </Button>
-          <Button
-            intent="primary"
-            onClick={onCreate}
-            disabled={!title.trim() || loading}
-            loading={loading}
-          >
-            Create
-          </Button>
-        </div>
-      </div>
-    </Dialog>
-  );
-};
-
-export const renderCreateNodeDialog = (props: CreateNodeDialogProps) =>
-  renderOverlay({
-    Overlay: CreateNodeDialog,
-    props,
-  });
diff --git a/apps/roam/src/components/FuzzySelectInput.tsx b/apps/roam/src/components/FuzzySelectInput.tsx
new file mode 100644
index 000000000..3d8a66295
--- /dev/null
+++ b/apps/roam/src/components/FuzzySelectInput.tsx
@@ -0,0 +1,223 @@
+import React, { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import {
+  Button,
+  TextArea,
+  InputGroup,
+  Menu,
+  MenuItem,
+  Popover,
+  PopoverPosition,
+} from "@blueprintjs/core";
+import fuzzy from "fuzzy";
+import { Result } from "~/utils/types";
+
+type FuzzySelectInputProps<T extends Result = Result> = {
+  value?: T;
+  setValue: (q: T) => void;
+  onLockedChange?: (isLocked: boolean) => void;
+  mode: "create" | "edit";
+  initialUid: string;
+  options?: T[];
+  placeholder?: string;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  initialIsLocked?: boolean;
+};
+
+const FuzzySelectInput = <T extends Result = Result>({
+  value,
+  setValue,
+  onLockedChange,
+  mode,
+  initialUid,
+  options = [],
+  placeholder = "Enter value",
+  autoFocus,
+  disabled,
+  initialIsLocked,
+}: FuzzySelectInputProps<T>) => {
+  const [isLocked, setIsLocked] = useState(initialIsLocked || false);
+  const [query, setQuery] = useState<string>(() => value?.text || "");
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const menuRef = useRef<HTMLUListElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filteredItems = useMemo(() => {
+    if (!query) return options;
+    return fuzzy
+      .filter(query, options, { extract: (item) => item.text })
+      .map((result) => result.original);
+  }, [query, options]);
+
+  const handleSelect = useCallback(
+    (item: T) => {
+      if (mode === "create" && item.uid && item.uid !== initialUid) {
+        setIsLocked(true);
+        setQuery(item.text);
+        setValue(item);
+        setIsOpen(false);
+        onLockedChange?.(true);
+      } else {
+        setQuery(item.text);
+        setValue(item);
+        setIsOpen(false);
+      }
+    },
+    [mode, initialUid, setValue, onLockedChange],
+  );
+
+  const handleClear = useCallback(() => {
+    setIsLocked(false);
+    setQuery("");
+    setValue({ ...value, text: "", uid: "" } as T);
+    onLockedChange?.(false);
+  }, [value, setValue, onLockedChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) =>
+          prev < filteredItems.length - 1 ? prev + 1 : prev,
+        );
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev > 0 ? prev - 1 : 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isOpen && filteredItems[activeIndex]) {
+          handleSelect(filteredItems[activeIndex]);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsOpen(false);
+      }
+    },
+    [filteredItems, activeIndex, isOpen, handleSelect],
+  );
+
+  useEffect(() => {
+    if (mode === "create" && !isLocked) {
+      setValue({ text: query, uid: "" } as T);
+    }
+  }, [query, mode, isLocked, setValue]);
+
+  useEffect(() => {
+    if (isFocused && filteredItems.length > 0 && query) {
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+  }, [filteredItems.length, query, isFocused]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [filteredItems]);
+
+  useEffect(() => {
+    if (menuRef.current && isOpen) {
+      const activeElement = menuRef.current.children[
+        activeIndex
+      ] as HTMLElement;
+      if (activeElement) {
+        activeElement.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth",
+        });
+      }
+    }
+  }, [activeIndex, isOpen]);
+
+  if (mode === "edit") {
+    return (
+      <TextArea
+        value={value?.text || ""}
+        onChange={(e) => {
+          setValue({ text: e.target.value, uid: value?.uid || "" } as T);
+        }}
+        fill
+        growVertically
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        disabled={disabled}
+      />
+    );
+  }
+
+  if (isLocked) {
+    return (
+      <div className="flex w-full items-center gap-2">
+        <div className="flex flex-1 items-center gap-2 rounded border border-gray-300 bg-gray-100 px-3 py-2 dark:border-gray-600 dark:bg-gray-800">
+          <span className="flex-1 text-gray-900 dark:text-gray-100">
+            {value?.text}
+          </span>
+          <Button
+            icon="cross"
+            minimal
+            small
+            onClick={handleClear}
+            className="flex-shrink-0"
+            aria-label="Clear selection"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Popover
+      isOpen={isOpen}
+      minimal
+      autoFocus={false}
+      enforceFocus={false}
+      position={PopoverPosition.BOTTOM_LEFT}
+      modifiers={{
+        flip: { enabled: false },
+        preventOverflow: { enabled: false },
+      }}
+      className="fuzzy-select-input-popover w-full"
+      content={
+        <Menu className="max-h-64 max-w-md overflow-auto" ulRef={menuRef}>
+          {filteredItems.map((item, index) => (
+            <MenuItem
+              key={item.uid || index}
+              text={item.text}
+              active={activeIndex === index}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                handleSelect(item);
+              }}
+              multiline
+            />
+          ))}
+        </Menu>
+      }
+      target={
+        <InputGroup
+          fill
+          className="w-full"
+          disabled={disabled}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          inputRef={inputRef}
+          onFocus={() => {
+            setIsFocused(true);
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+            setTimeout(() => setIsOpen(false), 200);
+          }}
+        />
+      }
+    />
+  );
+};
+
+export default FuzzySelectInput;
\ No newline at end of file
diff --git a/apps/roam/src/components/ModifyNodeDialog.tsx b/apps/roam/src/components/ModifyNodeDialog.tsx
new file mode 100644
index 000000000..cbba2de15
--- /dev/null
+++ b/apps/roam/src/components/ModifyNodeDialog.tsx
@@ -0,0 +1,536 @@
+import {
+  Button,
+  Classes,
+  Dialog,
+  Intent,
+  Label,
+  Spinner,
+  SpinnerSize,
+} from "@blueprintjs/core";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import MenuItemSelect from "roamjs-components/components/MenuItemSelect";
+import { Result } from "~/utils/types";
+import renderOverlay, {
+  RoamOverlayProps,
+} from "roamjs-components/util/renderOverlay";
+import fireQuery from "~/utils/fireQuery";
+import getDiscourseNodes, {
+  excludeDefaultNodes,
+} from "~/utils/getDiscourseNodes";
+import FuzzySelectInput from "./FuzzySelectInput";
+import { createBlock, updateBlock } from "roamjs-components/writes";
+import { getNewDiscourseNodeText } from "~/utils/formatUtils";
+import createDiscourseNode from "~/utils/createDiscourseNode";
+import { OnloadArgs } from "roamjs-components/types";
+import { render as renderToast } from "roamjs-components/components/Toast";
+import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+
+export type ModifyNodeDialogMode = "create" | "edit";
+export type ModifyNodeDialogProps = {
+  mode: ModifyNodeDialogMode;
+  nodeType: string;
+  initialValue: { text: string; uid: string };
+  initialReferencedNode?: { text: string; uid: string };
+  sourceBlockUid?: string; //the block that we started modifying from
+  extensionAPI?: OnloadArgs["extensionAPI"];
+  includeDefaultNodes?: boolean; // Include default nodes (Page, Block) in node type selector
+  imageUrl?: string; // For image conversion from canvas
+  onSuccess: (result: {
+    text: string;
+    uid: string;
+    action: string;
+    newPageUid?: string;
+  }) => Promise<void>;
+  onClose: () => void;
+};
+
+const ModifyNodeDialog = ({
+  isOpen,
+  mode,
+  nodeType,
+  initialValue,
+  initialReferencedNode,
+  sourceBlockUid,
+  extensionAPI,
+  includeDefaultNodes = false,
+  imageUrl,
+  onSuccess,
+  onClose,
+}: RoamOverlayProps<ModifyNodeDialogProps>) => {
+  const [content, setContent] = useState<Result>({
+    text: initialValue.text,
+    uid: initialValue.uid,
+  });
+  const [referencedNodeValue, setReferencedNodeValue] = useState<Result>({
+    text: initialReferencedNode?.text || "",
+    uid: initialReferencedNode?.uid || "",
+  });
+
+  const isContentLocked = useMemo(
+    () =>
+      Boolean(
+        content.uid && content.uid !== initialValue.uid && mode === "create",
+      ),
+    [content.uid, initialValue.uid, mode],
+  );
+  const isReferencedNodeLocked = useMemo(
+    () =>
+      Boolean(
+        referencedNodeValue.uid &&
+          referencedNodeValue.uid !== initialReferencedNode?.uid,
+      ),
+    [referencedNodeValue.uid, initialReferencedNode?.uid],
+  );
+
+  const [options, setOptions] = useState<{
+    content: Result[];
+    referencedNode: Result[];
+  }>({ content: [], referencedNode: [] });
+
+  const [loading, setLoading] = useState<{
+    content: boolean;
+    referencedNode: boolean;
+  }>({ content: false, referencedNode: false });
+
+  const contentRequestIdRef = useRef(0);
+  const referencedNodeRequestIdRef = useRef(0);
+  const [error, setError] = useState("");
+
+  const discourseNodes = useMemo(() => {
+    const allNodes = getDiscourseNodes();
+    return includeDefaultNodes
+      ? allNodes
+      : allNodes.filter(excludeDefaultNodes);
+  }, [includeDefaultNodes]);
+
+  const [selectedNodeType, setSelectedNodeType] = useState(() => {
+    const node = discourseNodes.find((n) => n.type === nodeType);
+    return node || discourseNodes[0];
+  });
+
+  const nodeFormat = useMemo(() => {
+    return selectedNodeType.format || "";
+  }, [selectedNodeType]);
+
+  const referencedNode = useMemo(() => {
+    const regex = /{([\w\d-]*)}/g;
+    const matches = [...nodeFormat.matchAll(regex)];
+
+    for (const match of matches) {
+      const val = match[1];
+      if (val.toLowerCase() === "content") continue;
+      if (val.toLowerCase() === "context") continue;
+
+      const allNodes = includeDefaultNodes
+        ? getDiscourseNodes()
+        : getDiscourseNodes().filter(excludeDefaultNodes);
+
+      const refNode = allNodes.find(({ text }) =>
+        new RegExp(text, "i").test(val),
+      );
+
+      if (refNode) {
+        return {
+          name: refNode.text,
+          nodeType: refNode.type,
+        };
+      }
+    }
+
+    return null;
+  }, [nodeFormat, includeDefaultNodes]);
+
+  useEffect(() => {
+    setLoading({ content: true, referencedNode: Boolean(referencedNode) });
+
+    let alive = true;
+    const req = ++contentRequestIdRef.current;
+
+    let refAlive = true;
+    const refReq = ++referencedNodeRequestIdRef.current;
+
+    const fetchOptions = async () => {
+      try {
+        if (selectedNodeType) {
+          const conditionUid = window.roamAlphaAPI.util.generateUID();
+          const results = await fireQuery({
+            returnNode: "node",
+            selections: [],
+            conditions: [
+              {
+                source: "node",
+                relation: "is a",
+                target: selectedNodeType.type,
+                uid: conditionUid,
+                type: "clause",
+              },
+            ],
+          });
+          if (contentRequestIdRef.current === req && alive) {
+            setOptions((prev) => ({ ...prev, content: results }));
+          }
+        }
+      } catch (error) {
+        if (contentRequestIdRef.current === req && alive) {
+          console.error("Error fetching content options:", error);
+        }
+      } finally {
+        if (contentRequestIdRef.current === req && alive) {
+          setLoading((prev) => ({ ...prev, content: false }));
+        }
+      }
+    };
+
+    const fetchReferencedOptions = async () => {
+      if (!referencedNode) return;
+      try {
+        const conditionUid = window.roamAlphaAPI.util.generateUID();
+        const results = await fireQuery({
+          returnNode: "node",
+          selections: [],
+          conditions: [
+            {
+              source: "node",
+              relation: "is a",
+              target: referencedNode.nodeType,
+              uid: conditionUid,
+              type: "clause",
+            },
+          ],
+        });
+        if (referencedNodeRequestIdRef.current === refReq && refAlive) {
+          setOptions((prev) => ({ ...prev, referencedNode: results }));
+        }
+      } catch (error) {
+        if (referencedNodeRequestIdRef.current === refReq && refAlive) {
+          console.error("Error fetching referenced node options:", error);
+        }
+      } finally {
+        if (referencedNodeRequestIdRef.current === refReq && refAlive) {
+          setLoading((prev) => ({ ...prev, referencedNode: false }));
+        }
+      }
+    };
+
+    void fetchOptions();
+    void fetchReferencedOptions();
+    return () => {
+      alive = false;
+      refAlive = false;
+    };
+  }, [selectedNodeType, referencedNode]);
+
+  const setValue = useCallback((r: Result) => {
+    setContent(r);
+  }, []);
+
+  const setReferencedNodeValueCallback = useCallback((r: Result) => {
+    setReferencedNodeValue(r);
+  }, []);
+
+  const onCancelClick = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  const addImageToPage = useCallback(
+    async (pageUid: string, imageUrl: string) => {
+      const imageMarkdown = `![](${imageUrl})`;
+      await createBlock({
+        node: { text: imageMarkdown },
+        order: 0,
+        parentUid: pageUid,
+      });
+    },
+    [],
+  );
+
+  const onSubmit = async () => {
+    if (!content.text.trim()) return;
+    try {
+      if (mode === "create") {
+        // If content is locked (user selected existing node), just insert it
+        if (isContentLocked && content.uid) {
+          if (sourceBlockUid) {
+            const pageRef = `[[${content.text}]]`;
+            await updateBlock({
+              uid: sourceBlockUid,
+              text: pageRef,
+            });
+          }
+
+          if (imageUrl) {
+            const pageUid = content.uid || getPageUidByPageTitle(content.text);
+            if (pageUid) {
+              await addImageToPage(pageUid, imageUrl);
+            }
+          }
+
+          await onSuccess({
+            text: content.text,
+            uid: content.uid,
+            action: "create",
+          });
+
+          onClose();
+          return;
+        }
+
+        // Format content with referenced node if present
+        let formattedTitle = "";
+        if (referencedNode && referencedNodeValue.text) {
+          // Format the referenced node if it's new
+          let formattedReferencedNodeText = referencedNodeValue.text;
+          if (!isReferencedNodeLocked) {
+            const formattedRefNode = await getNewDiscourseNodeText({
+              text: referencedNodeValue.text.trim(),
+              nodeType: referencedNode.nodeType,
+              blockUid: sourceBlockUid,
+            });
+            if (!formattedRefNode) {
+              return;
+            }
+            formattedReferencedNodeText = formattedRefNode;
+          }
+
+          formattedTitle = nodeFormat.replace(
+            /{([\w\d-]*)}/g,
+            (_, val: string) => {
+              if (/content/i.test(val)) return content.text.trim();
+              if (new RegExp(referencedNode.name, "i").test(val))
+                return `[[${formattedReferencedNodeText}]]`;
+              return "";
+            },
+          );
+        } else {
+          formattedTitle = await getNewDiscourseNodeText({
+            text: content.text.trim(),
+            nodeType: selectedNodeType.type,
+            blockUid: sourceBlockUid,
+          });
+          console.log("formattedTitle", formattedTitle);
+        }
+        if (!formattedTitle) {
+          return;
+        }
+
+        // Create new discourse node
+        const newPageUid = await createDiscourseNode({
+          text: formattedTitle,
+          configPageUid: selectedNodeType.type,
+          extensionAPI,
+          imageUrl,
+        });
+
+        if (sourceBlockUid) {
+          const pageRef = `[[${formattedTitle}]]`;
+          await updateBlock({
+            uid: sourceBlockUid,
+            text: pageRef,
+          });
+          if (initialValue.text && initialValue.text.trim()) {
+            await createBlock({
+              parentUid: sourceBlockUid,
+              order: 0,
+              node: {
+                text: initialValue.text,
+              },
+            });
+          }
+        }
+
+        renderToast({
+          id: `discourse-node-created-${Date.now()}`,
+          intent: "success",
+          timeout: 10000,
+          content: (
+            <span>
+              Created node{" "}
+              <a
+                className="cursor-pointer font-medium text-blue-500 hover:underline"
+                onClick={(event) => {
+                  void (async () => {
+                    if (event.shiftKey) {
+                      await window.roamAlphaAPI.ui.rightSidebar.addWindow({
+                        window: {
+                          // @ts-expect-error TODO: fix this
+                          "block-uid": newPageUid,
+                          type: "outline",
+                        },
+                      });
+                    } else {
+                      await window.roamAlphaAPI.ui.mainWindow.openPage({
+                        page: { uid: newPageUid },
+                      });
+                    }
+                  })();
+                }}
+              >
+                [[{formattedTitle}]]
+              </a>
+            </span>
+          ),
+        });
+
+        await onSuccess({
+          text: formattedTitle,
+          uid: newPageUid,
+          action: "create",
+          newPageUid,
+        });
+      } else {
+        // Edit mode: update the existing block
+        let updatedContent = content.text;
+
+        // Format with referenced node if present
+        if (referencedNode && referencedNodeValue.text) {
+          updatedContent = nodeFormat
+            .replace(/{([\w\d-]*)}/g, (_, val: string) => {
+              if (/content/i.test(val)) return content.text.trim();
+              if (new RegExp(referencedNode.name, "i").test(val))
+                return `[[${referencedNodeValue.text}]]`;
+              return "";
+            })
+            .trim();
+        }
+        if (sourceBlockUid) {
+          await updateBlock({
+            uid: sourceBlockUid,
+            text: updatedContent,
+          });
+
+          renderToast({
+            id: `discourse-node-edited-${Date.now()}`,
+            intent: "success",
+            timeout: 5000,
+            content: "Node updated successfully",
+          });
+        }
+
+        await onSuccess({
+          text: updatedContent,
+          uid: sourceBlockUid || content.uid,
+          action: "edit",
+        });
+      }
+      onClose();
+    } catch (error) {
+      setError((error as Error).message);
+    }
+  };
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onClose={onClose}
+      canEscapeKeyClose
+      autoFocus={false}
+      className={"roamjs-canvas-dialog"}
+    >
+      <div
+        // Prevents TLDraw from hijacking onClick and onMouseup
+        // https://discord.com/channels/859816885297741824/1209834682384912397
+        onMouseDown={(e) => e.stopPropagation()}
+        onMouseUp={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+        style={{ pointerEvents: "all" }}
+      >
+        <div className={`${Classes.DIALOG_BODY} flex flex-col gap-4`}>
+          {/* Node Type Selector */}
+          <div className="flex w-full">
+            <Label>
+              Node Type
+              <MenuItemSelect
+                items={discourseNodes.map((n) => n.type)}
+                transformItem={(t) =>
+                  discourseNodes.find((n) => n.type === t)?.text || t
+                }
+                activeItem={selectedNodeType.type}
+                onItemSelect={(t) => {
+                  const nt = discourseNodes.find((n) => n.type === t);
+                  if (nt) {
+                    setSelectedNodeType(nt);
+                    setReferencedNodeValue({ text: "", uid: "" });
+                  }
+                }}
+                disabled={mode === "edit"}
+              />
+            </Label>
+          </div>
+
+          {/* Content Input */}
+          <div className="w-full">
+            <Label>Content</Label>
+            <FuzzySelectInput
+              value={content}
+              setValue={setValue}
+              options={options.content}
+              placeholder={
+                loading.content
+                  ? "..."
+                  : `Enter a ${selectedNodeType.text.toLowerCase()} ...`
+              }
+              disabled={loading.content}
+              mode={mode}
+              initialUid={content.uid}
+            />
+          </div>
+
+          {/* Referenced Node Input */}
+          {referencedNode && !isContentLocked && mode === "create" && (
+            <div className="w-full">
+              <Label>{referencedNode.name}</Label>
+              <FuzzySelectInput
+                value={referencedNodeValue}
+                setValue={setReferencedNodeValueCallback}
+                options={options.referencedNode}
+                placeholder={
+                  loading.referencedNode ? "..." : "Select a referenced node"
+                }
+                disabled={loading.referencedNode}
+                mode={"create"}
+                initialUid={referencedNodeValue.uid}
+                initialIsLocked={isReferencedNodeLocked}
+              />
+            </div>
+          )}
+        </div>
+        {/* Submit Button */}
+        <div className={Classes.DIALOG_FOOTER}>
+          <div
+            className={`${Classes.DIALOG_FOOTER_ACTIONS} flex-row-reverse items-center`}
+          >
+            <Button
+              text="Confirm"
+              intent={Intent.PRIMARY}
+              onClick={() => void onSubmit()}
+              disabled={loading.content || !content.text.trim()}
+              className="flex-shrink-0"
+            />
+            <Button
+              text="Cancel"
+              onClick={onCancelClick}
+              disabled={loading.content}
+              className="flex-shrink-0"
+            />
+            <span className="flex-grow text-red-800">{error}</span>
+            {loading.content && <Spinner size={SpinnerSize.SMALL} />}
+          </div>
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+export const renderModifyNodeDialog = (props: ModifyNodeDialogProps) =>
+  renderOverlay({
+    Overlay: ModifyNodeDialog,
+    props,
+  });
+
+export default ModifyNodeDialog;
diff --git a/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx b/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx
index 90ca43954..506a0c0a1 100644
--- a/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx
+++ b/apps/roam/src/components/canvas/DiscourseNodeUtil.tsx
@@ -32,7 +32,7 @@ import { Button, Icon } from "@blueprintjs/core";
 import createDiscourseNode from "~/utils/createDiscourseNode";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { isPageUid } from "./Tldraw";
-import LabelDialog from "./LabelDialog";
+import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
 import { discourseContext } from "./Tldraw";
 import getDiscourseContextResults from "~/utils/getDiscourseContextResults";
 import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
@@ -46,6 +46,7 @@ import {
 import { getSetting } from "~/utils/extensionSettings";
 import DiscourseContextOverlay from "~/components/DiscourseContextOverlay";
 import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors";
+import { OnloadArgs } from "roamjs-components/types";
 
 // TODO REPLACE WITH TLDRAW DEFAULTS
 // https://github.com/tldraw/tldraw/pull/1580/files
@@ -456,6 +457,8 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [overlayMounted, setOverlayMounted] = useState(false);
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    const dialogRenderedRef = useRef(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
       if (
         shape.props.uid !== loaded &&
@@ -474,24 +477,105 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
 
     const { backgroundColor, textColor } = this.getColors();
 
-    const setSizeAndImgProps = async ({
-      context,
-      text,
-      uid,
-    }: {
-      context: BaseDiscourseNodeUtil;
-      text: string;
-      uid: string;
-    }) => {
-      if (!extensionAPI) return;
-      const { h, w, imageUrl } = await calcCanvasNodeSizeAndImg({
-        nodeText: text,
-        uid,
-        nodeType: this.type,
-        extensionAPI,
-      });
-      context.updateProps(shape.id, shape.type, { h, w, imageUrl });
-    };
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      const isCreating = !isLiveBlock(shape.props.uid);
+      if (isEditing && !dialogRenderedRef.current) {
+        const setSizeAndImgPropsLocal = async ({
+          text,
+          uid,
+        }: {
+          text: string;
+          uid: string;
+        }) => {
+          if (!extensionAPI) return;
+          const { h, w, imageUrl } = await calcCanvasNodeSizeAndImg({
+            nodeText: text,
+            uid,
+            nodeType: this.type,
+            extensionAPI,
+          });
+          this.updateProps(shape.id, shape.type, { h, w, imageUrl });
+        };
+
+        renderModifyNodeDialog({
+          mode: isCreating ? "create" : "edit",
+          nodeType: shape.type,
+          initialValue: { text: shape.props.title, uid: shape.props.uid },
+          // Only pass it when editing an existing node that has a valid Roam block UID
+          sourceBlockUid:
+            !isCreating && isLiveBlock(shape.props.uid)
+              ? shape.props.uid
+              : undefined,
+          extensionAPI,
+          includeDefaultNodes: true,
+          onSuccess: async ({ text, uid, action, newPageUid }) => {
+            // For canvas creation, the dialog already created the node
+            // Use the correct UID: newPageUid for new nodes, uid for existing
+            const finalUid = newPageUid || uid;
+
+            if (action === "edit") {
+              if (isPageUid(shape.props.uid))
+                await window.roamAlphaAPI.updatePage({
+                  page: { uid: shape.props.uid, title: text },
+                });
+              else await updateBlock({ uid: shape.props.uid, text });
+            }
+
+            if (
+              action === "create" &&
+              !getPageUidByPageTitle(text) &&
+              !newPageUid
+            ) {
+              void createDiscourseNode({
+                configPageUid: shape.type,
+                text,
+                newPageUid: finalUid,
+                extensionAPI,
+              });
+            }
+
+            void setSizeAndImgPropsLocal({ text, uid: finalUid });
+            this.updateProps(shape.id, shape.type, {
+              title: text,
+              uid: finalUid,
+            });
+
+            const autoCanvasRelations = getSetting<boolean>(
+              AUTO_CANVAS_RELATIONS_KEY,
+              false,
+            );
+            if (autoCanvasRelations) {
+              try {
+                const relationIds = getRelationIds();
+                this.deleteRelationsInCanvas({ shape, relationIds });
+                await this.createExistingRelations({
+                  shape,
+                  relationIds,
+                  finalUid,
+                });
+              } catch (error) {
+                console.error(
+                  "[DiscourseNodeUtil] Error creating relations:",
+                  error,
+                );
+              }
+            }
+
+            editor.setEditingShape(null);
+            dialogRenderedRef.current = false;
+          },
+          onClose: () => {
+            editor.setEditingShape(null);
+            dialogRenderedRef.current = false;
+          },
+        });
+
+        dialogRenderedRef.current = true;
+      } else if (!isEditing && dialogRenderedRef.current) {
+        dialogRenderedRef.current = false;
+      }
+    }, [isEditing, shape, editor, extensionAPI]);
 
     return (
       <HTMLContainer
@@ -561,58 +645,6 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
                 shape.props.title
               : shape.props.title}
           </div>
-          <LabelDialog
-            initialUid={shape.props.uid}
-            isOpen={isEditing}
-            onClose={() => editor.setEditingShape(null)}
-            label={shape.props.title}
-            nodeType={shape.type}
-            discourseContext={discourseContext}
-            onSuccess={async ({ text, uid, action }) => {
-              if (action === "editing") {
-                if (isPageUid(shape.props.uid))
-                  await window.roamAlphaAPI.updatePage({
-                    page: { uid: shape.props.uid, title: text },
-                  });
-                else await updateBlock({ uid: shape.props.uid, text });
-              }
-
-              if (action === "creating" && !getPageUidByPageTitle(text)) {
-                void createDiscourseNode({
-                  configPageUid: shape.type,
-                  text,
-                  newPageUid: uid,
-                });
-              }
-
-              // Update Shape Props
-              void setSizeAndImgProps({ context: this, text, uid });
-              this.updateProps(shape.id, shape.type, { title: text, uid });
-
-              // Update Shape Relations
-              const autoCanvasRelations = getSetting<boolean>(
-                AUTO_CANVAS_RELATIONS_KEY,
-                false,
-              );
-              if (autoCanvasRelations) {
-                const relationIds = getRelationIds();
-                this.deleteRelationsInCanvas({ shape, relationIds });
-                await this.createExistingRelations({
-                  shape,
-                  relationIds,
-                  finalUid: uid,
-                });
-              }
-
-              editor.setEditingShape(null);
-            }}
-            onCancel={() => {
-              editor.setEditingShape(null);
-              if (!isLiveBlock(shape.props.uid)) {
-                editor.deleteShapes([shape.id]);
-              }
-            }}
-          />
         </div>
       </HTMLContainer>
     );
diff --git a/apps/roam/src/components/canvas/uiOverrides.tsx b/apps/roam/src/components/canvas/uiOverrides.tsx
index 0c800c764..e0553a89c 100644
--- a/apps/roam/src/components/canvas/uiOverrides.tsx
+++ b/apps/roam/src/components/canvas/uiOverrides.tsx
@@ -47,6 +47,7 @@ import DiscourseGraphPanel from "./DiscourseToolPanel";
 import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
 import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
+import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
 
 const convertToDiscourseNode = async ({
   text,
@@ -139,14 +140,47 @@ export const getOnSelectForShape = ({
       // this is a promise
       // eslint-disable-next-line @typescript-eslint/await-thenable
       const src = await window.roamAlphaAPI.util.uploadFile({ file });
-      const text = nodeType === "blck-node" ? `![](${src})` : "";
-      void convertToDiscourseNode({
-        text,
-        type: nodeType,
-        imageShapeUrl: src,
-        editor,
-        selectedShape: shape,
+      const initialText = nodeType === "blck-node" ? `![](${src})` : "";
+      const { x, y } = shape;
+
+      renderModifyNodeDialog({
+        mode: "create",
+        nodeType,
+        initialValue: { text: initialText, uid: "" },
         extensionAPI,
+        includeDefaultNodes: true,
+        imageUrl: src,
+        onSuccess: async ({ text, uid, newPageUid }) => {
+          const finalUid = newPageUid || uid;
+          // Delete the original image shape
+          editor.deleteShapes([shape.id]);
+
+          // Create the discourse node shape
+          const { h, w, imageUrl } = await calcCanvasNodeSizeAndImg({
+            nodeText: text,
+            extensionAPI,
+            nodeType,
+            uid: finalUid,
+          });
+          editor.createShapes([
+            {
+              type: nodeType,
+              id: createShapeId(),
+              props: {
+                uid: finalUid,
+                title: text,
+                h,
+                w,
+                imageUrl,
+                fontFamily: "sans",
+                size: "s",
+              },
+              x,
+              y,
+            },
+          ]);
+        },
+        onClose: () => {},
       });
     };
   } else if (shape.type === "text") {
diff --git a/apps/roam/src/styles/styles.css b/apps/roam/src/styles/styles.css
index 6d3a74cca..4d523185d 100644
--- a/apps/roam/src/styles/styles.css
+++ b/apps/roam/src/styles/styles.css
@@ -157,3 +157,7 @@
   box-shadow: 0 0 0 2px #137cbd !important;
   border-radius: 4px;
 }
+
+.fuzzy-select-input-popover .bp3-popover-target {
+  width: 100%;
+}
\ No newline at end of file
diff --git a/apps/roam/src/utils/formatUtils.ts b/apps/roam/src/utils/formatUtils.ts
index 580ba501a..0a0c7d735 100644
--- a/apps/roam/src/utils/formatUtils.ts
+++ b/apps/roam/src/utils/formatUtils.ts
@@ -12,11 +12,14 @@ import { QBClause, Result } from "./types";
 import findDiscourseNode from "./findDiscourseNode";
 import extractTag from "roamjs-components/util/extractTag";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
+import ModifyNodeDialog, {
+  ModifyNodeDialogProps,
+} from "~/components/ModifyNodeDialog";
+import getExtensionAPI from "roamjs-components/util/extensionApiContext";
 
-type FormDialogProps = Parameters<typeof FormDialog>[0];
-const renderFormDialog = createOverlayRender<FormDialogProps>(
+const renderFormDialog = createOverlayRender<ModifyNodeDialogProps>(
   "form-dialog",
-  FormDialog,
+  ModifyNodeDialog,
 );
 
 export const getNewDiscourseNodeText = async ({
@@ -32,62 +35,19 @@ export const getNewDiscourseNodeText = async ({
   let newText = text;
   if (!text) {
     newText = await new Promise<string>((resolve) => {
-      const nodeName =
-        discourseNodes.find((n) => n.type === nodeType)?.text || "Discourse";
       renderFormDialog({
-        title: `Create ${nodeName} Node`,
-        fields: {
-          textField: {
-            type: "text",
-            label: `Create ${nodeName} Node`,
-          },
-        },
-        onSubmit: (data: Record<string, unknown>) => {
-          const textValue = data.textField as string;
-          if (textValue?.trim()) {
-            resolve(textValue);
-          } else {
-            renderToast({
-              content: "Text field cannot be empty.",
-              id: "roamjs-create-discourse-node-dialog-error",
-              intent: "warning",
-            });
-            return false;
-          }
+        mode: "create",
+        nodeType: nodeType,
+        initialValue: { text: text, uid: "" },
+        onSuccess: async () => {
+          return Promise.resolve();
         },
+        sourceBlockUid: blockUid,
+        extensionAPI: getExtensionAPI(),
         onClose: () => {
           resolve("");
         },
-        isOpen: true,
       });
-
-      const setupButtonControl = () => {
-        const dialogs = document.querySelectorAll(".bp3-dialog");
-        const dialog = dialogs[dialogs.length - 1] as HTMLElement;
-
-        const input = dialog.querySelector(
-          'input[type="text"].bp3-input',
-        ) as HTMLInputElement;
-        const submitBtn = dialog.querySelector(
-          ".bp3-dialog-footer .bp3-button.bp3-intent-primary",
-        ) as HTMLButtonElement;
-
-        const updateButtonState = () => {
-          const currentValue = input.value;
-          const hasValue = currentValue.trim().length > 0;
-          const shouldBeDisabled = !hasValue;
-          submitBtn.disabled = shouldBeDisabled;
-        };
-
-        updateButtonState();
-
-        const listenerKey = "_discourseNodeListenerAttached";
-        if (!(input as any)[listenerKey]) {
-          input.addEventListener("input", updateButtonState);
-          (input as any)[listenerKey] = true;
-        }
-      };
-      requestAnimationFrame(setupButtonControl);
     });
   }
 
diff --git a/apps/roam/src/utils/renderNodeTagPopup.tsx b/apps/roam/src/utils/renderNodeTagPopup.tsx
index d8f2cdfd7..dae8d9b99 100644
--- a/apps/roam/src/utils/renderNodeTagPopup.tsx
+++ b/apps/roam/src/utils/renderNodeTagPopup.tsx
@@ -1,11 +1,15 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import { Button, Popover, Position } from "@blueprintjs/core";
-import { renderCreateNodeDialog } from "~/components/CreateNodeDialog";
-import { OnloadArgs } from "roamjs-components/types";
+import { OnloadArgs, PullBlock } from "roamjs-components/types";
 import getUids from "roamjs-components/dom/getUids";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 import { type DiscourseNode } from "./getDiscourseNodes";
+import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
+import { getReferencedNodeInFormat } from "./formatUtils";
+import discourseNodeFormatToDatalog from "./discourseNodeFormatToDatalog";
+import compileDatalog from "./compileDatalog";
+import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 
 export const renderNodeTagPopupButton = (
   parent: HTMLSpanElement,
@@ -42,6 +46,42 @@ export const renderNodeTagPopupButton = (
   const rawBlockText = blockUid ? getTextByBlockUid(blockUid) : "";
   const cleanedBlockText = rawBlockText.replace(textContent, "").trim();
 
+  const getInitialReferencedNode = () => {
+    if (!blockUid) return { text: "", uid: "" };
+
+    const referencedNodeType = getReferencedNodeInFormat({
+      format: matchedNode.format,
+    });
+
+    if (!referencedNodeType) return { text: "", uid: "" };
+
+    try {
+      const referenced = window.roamAlphaAPI.data.fast.q(
+        `[:find (pull ?r [:node/title :block/string]) :where [?b :block/uid "${blockUid}"] (or-join [?b ?r] (and [?b :block/parents ?p] [?p :block/refs ?r]) (and [?b :block/page ?r])) ${discourseNodeFormatToDatalog(
+          {
+            freeVar: "r",
+            ...referencedNodeType,
+          },
+        )
+          .map((c) => compileDatalog(c, 0))
+          .join(" ")}]`,
+      )?.[0]?.[0] as PullBlock;
+
+      if (referenced) {
+        const title =
+          referenced[":node/title"] || referenced[":block/string"] || "";
+        if (title) {
+          const uid = getPageUidByPageTitle(title);
+          return { text: title, uid: uid };
+        }
+      }
+    } catch (error) {
+      console.error("Error getting initial referenced node:", error);
+    }
+
+    return { text: "", uid: "" };
+  };
+
   ReactDOM.render(
     <Popover
       content={
@@ -49,12 +89,18 @@ export const renderNodeTagPopupButton = (
           minimal
           outlined
           onClick={() => {
-            renderCreateNodeDialog({
+            const initialReferencedNode = getInitialReferencedNode();
+            renderModifyNodeDialog({
+              mode: "create",
+              nodeType: matchedNode.type,
+              initialValue: { text: cleanedBlockText, uid: "" },
+              initialReferencedNode,
+              onSuccess: async () => {
+                // Success is handled by the dialog itself
+              },
               onClose: () => {},
-              defaultNodeTypeUid: matchedNode.type,
-              extensionAPI,
               sourceBlockUid: blockUid,
-              initialTitle: cleanedBlockText,
+              extensionAPI,
             });
           }}
           text={`Create ${matchedNode.text}`}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1cb11c3a9..b3d4361bd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19655,4 +19655,4 @@ snapshots:
 
   zod@3.25.76: {}
 
-  zwitch@2.0.4: {}
+  zwitch@2.0.4: {}
\ No newline at end of file