diff --git a/apps/obsidian/src/components/AdminPanelSettings.tsx b/apps/obsidian/src/components/AdminPanelSettings.tsx
index e8e6b8af3..2ee1b91dd 100644
--- a/apps/obsidian/src/components/AdminPanelSettings.tsx
+++ b/apps/obsidian/src/components/AdminPanelSettings.tsx
@@ -14,6 +14,8 @@ export const AdminPanelSettings = () => {
   const [username, setUsername] = useState<string>(
     plugin.settings.username || "",
   );
+  const [nodeCardContextMenuEnabled, setNodeCardContextMenuEnabled] =
+    useState<boolean>(plugin.settings.nodeCardContextMenuEnabled ?? false);
 
   const handleSyncModeToggle = useCallback(
     async (newValue: boolean) => {
@@ -43,6 +45,15 @@ export const AdminPanelSettings = () => {
     await updateUsername(plugin, newValue);
   };
 
+  const handleNodeCardContextMenuToggle = useCallback(
+    async (newValue: boolean) => {
+      setNodeCardContextMenuEnabled(newValue);
+      plugin.settings.nodeCardContextMenuEnabled = newValue;
+      await plugin.saveSettings();
+    },
+    [plugin],
+  );
+
   const handleLoginHandoff = async () => {
     const client = await getLoggedInClient(plugin);
     if (!client) {
@@ -72,6 +83,30 @@ export const AdminPanelSettings = () => {
 
   return (
     <div className="general-settings">
+      <div className="setting-item">
+        <div className="setting-item-info">
+          <div className="setting-item-name">(BETA) Node card context menu</div>
+          <div className="setting-item-description">
+            Show discourse context and styling tabs when a node card is selected
+            on a canvas
+          </div>
+        </div>
+        <div className="setting-item-control">
+          <div
+            className={`checkbox-container ${nodeCardContextMenuEnabled ? "is-enabled" : ""}`}
+            onClick={() =>
+              void handleNodeCardContextMenuToggle(!nodeCardContextMenuEnabled)
+            }
+          >
+            <input
+              type="checkbox"
+              checked={nodeCardContextMenuEnabled}
+              aria-label="Enable node card context menu"
+              readOnly
+            />
+          </div>
+        </div>
+      </div>
       <div className="setting-item">
         <div className="setting-item-info">
           <div className="setting-item-name">(BETA) Sync mode enable</div>
diff --git a/apps/obsidian/src/components/canvas/NodeCardContextMenu.tsx b/apps/obsidian/src/components/canvas/NodeCardContextMenu.tsx
new file mode 100644
index 000000000..2fb887cfa
--- /dev/null
+++ b/apps/obsidian/src/components/canvas/NodeCardContextMenu.tsx
@@ -0,0 +1,97 @@
+import { createElement, useEffect, useState, type ComponentType } from "react";
+import type { TFile } from "obsidian";
+import {
+  DefaultStylePanel,
+  DefaultStylePanelContent,
+  useEditor,
+  useRelevantStyles,
+  useValue,
+  type TLUiStylePanelContentProps,
+  type TLUiStylePanelProps,
+} from "tldraw";
+import type DiscourseGraphPlugin from "~/index";
+import type { DiscourseNodeShape } from "./shapes/DiscourseNodeShape";
+import { RelationsPanelContent } from "./overlays/RelationPanel";
+
+type NodeCardContextMenuProps = TLUiStylePanelProps & {
+  plugin: DiscourseGraphPlugin;
+  canvasFile: TFile;
+};
+
+const NODE_CARD_CONTEXT_MENU_TABS = [
+  { id: "context", label: "Context" },
+  { id: "styling", label: "Styling" },
+] as const;
+
+type NodeCardContextMenuTab =
+  (typeof NODE_CARD_CONTEXT_MENU_TABS)[number]["id"];
+
+const DefaultStylePanelComponent =
+  DefaultStylePanel as unknown as ComponentType<TLUiStylePanelProps>;
+const DefaultStylePanelContentComponent =
+  DefaultStylePanelContent as unknown as ComponentType<TLUiStylePanelContentProps>;
+
+export const NodeCardContextMenu = ({
+  plugin,
+  canvasFile,
+  isMobile,
+}: NodeCardContextMenuProps) => {
+  const editor = useEditor();
+  const styles = useRelevantStyles();
+  const isEnabled = plugin.settings.nodeCardContextMenuEnabled ?? false;
+  const selectedShape = useValue(
+    "selected shape for node card context menu",
+    () =>
+      editor.getCurrentToolId() === "select"
+        ? editor.getOnlySelectedShape()
+        : null,
+    [editor],
+  );
+  const selectedNode =
+    isEnabled && selectedShape?.type === "discourse-node"
+      ? (selectedShape as DiscourseNodeShape)
+      : null;
+  const [activeTab, setActiveTab] = useState<NodeCardContextMenuTab>("context");
+
+  useEffect(() => {
+    setActiveTab("context");
+  }, [selectedNode?.id]);
+
+  if (!selectedNode) {
+    return createElement(DefaultStylePanelComponent, { isMobile });
+  }
+
+  return createElement(
+    DefaultStylePanelComponent,
+    { isMobile },
+    <div className="dg-node-card-menu">
+      <div className="border-modifier-border grid grid-cols-2 border-b">
+        {NODE_CARD_CONTEXT_MENU_TABS.map(({ id, label }) => (
+          <button
+            key={id}
+            type="button"
+            aria-pressed={activeTab === id}
+            className={`cursor-pointer px-3 py-2 text-xs font-semibold ${
+              activeTab === id ? "accent-border-bottom" : ""
+            }`}
+            onClick={() => setActiveTab(id)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === "context" ? (
+        <div className="p-3">
+          <RelationsPanelContent
+            plugin={plugin}
+            canvasFile={canvasFile}
+            nodeShape={selectedNode}
+          />
+        </div>
+      ) : (
+        createElement(DefaultStylePanelContentComponent, { styles })
+      )}
+    </div>,
+  );
+};
diff --git a/apps/obsidian/src/components/canvas/TldrawViewComponent.tsx b/apps/obsidian/src/components/canvas/TldrawViewComponent.tsx
index d553a3487..fa336c316 100644
--- a/apps/obsidian/src/components/canvas/TldrawViewComponent.tsx
+++ b/apps/obsidian/src/components/canvas/TldrawViewComponent.tsx
@@ -47,6 +47,7 @@ import {
 import ToastListener from "./ToastListener";
 import { RelationsOverlay } from "./overlays/RelationOverlay";
 import { DragHandleOverlay } from "./overlays/DragHandleOverlay";
+import { NodeCardContextMenu } from "./NodeCardContextMenu";
 import { WHITE_LOGO_SVG } from "~/icons";
 import { CustomContextMenu } from "./CustomContextMenu";
 import {
@@ -431,6 +432,13 @@ export const TldrawPreviewComponent = ({
               ContextMenu: (props) => (
                 <CustomContextMenu canvasFile={file} props={props} />
               ),
+              StylePanel: (props) => (
+                <NodeCardContextMenu
+                  plugin={plugin}
+                  canvasFile={file}
+                  {...props}
+                />
+              ),
               SharePanel: () => {
                 const tools = useTools();
                 const isDiscourseNodeToolSelected = useIsToolSelected(
diff --git a/apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx b/apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx
index d1b53007f..5fef2446e 100644
--- a/apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx
+++ b/apps/obsidian/src/components/canvas/overlays/RelationPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import type { TFile } from "obsidian";
 import type DiscourseGraphPlugin from "~/index";
 import {
@@ -60,6 +60,8 @@ export type RelationsPanelProps = {
   onClose: () => void;
 };
 
+type RelationsPanelContentProps = Omit<RelationsPanelProps, "onClose">;
+
 const RelationFileItem = ({
   file,
   group,
@@ -160,12 +162,11 @@ const RelationFileItem = ({
   );
 };
 
-export const RelationsPanel = ({
+export const RelationsPanelContent = ({
   plugin,
   canvasFile,
   nodeShape,
-  onClose,
-}: RelationsPanelProps) => {
+}: RelationsPanelContentProps) => {
   const editor = useEditor();
   const [groups, setGroups] = useState<GroupedRelation[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -210,10 +211,6 @@ export const RelationsPanel = ({
     void load();
   }, [plugin, canvasFile, nodeShape.id, nodeShape.props.src, editor]);
 
-  const headerTitle = useMemo(() => {
-    return nodeShape.props.title || "Selected node";
-  }, [nodeShape.props.title]);
-
   const ensureNodeShapeForFile = async (
     file: TFile,
   ): Promise<DiscourseNodeShape> => {
@@ -459,6 +456,52 @@ export const RelationsPanel = ({
     }
   };
 
+  return loading ? (
+    <div className="text-center text-gray-500">Loading relations...</div>
+  ) : error ? (
+    <div className="text-center text-red-600">{error}</div>
+  ) : groups.length === 0 ? (
+    <div className="text-center text-gray-500">No relations found.</div>
+  ) : (
+    <ul className="m-0 list-none space-y-2 p-0">
+      {groups.map((group) => (
+        <li key={group.key} className="rounded border p-2">
+          <div className="mb-1 flex items-center gap-2">
+            <span className="text-xs text-gray-500">
+              {group.isSource ? "→" : "←"}
+            </span>
+            <span className="text-sm font-medium">{group.label}</span>
+          </div>
+          {group.linkedFiles.length === 0 ? (
+            <div className="text-xs text-gray-500">None</div>
+          ) : (
+            <ul className="m-0 list-none space-y-1 p-0 pl-5">
+              {group.linkedFiles.map((f) => {
+                return (
+                  <RelationFileItem
+                    key={f.path}
+                    file={f}
+                    group={group}
+                    checkExistingRelation={checkExistingRelation}
+                    handleCreateRelationTo={handleCreateRelationTo}
+                    handleDeleteRelation={handleDeleteRelationShape}
+                  />
+                );
+              })}
+            </ul>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export const RelationsPanel = ({
+  plugin,
+  canvasFile,
+  nodeShape,
+  onClose,
+}: RelationsPanelProps) => {
   return (
     <div className="min-w-80 max-w-md rounded-lg border bg-white p-4 shadow-lg">
       <div className="mb-3 flex items-center justify-between">
@@ -473,47 +516,16 @@ export const RelationsPanel = ({
       </div>
 
       <div className="mb-3">
-        <div className="text-sm font-medium text-gray-700">{headerTitle}</div>
+        <div className="text-sm font-medium text-gray-700">
+          {nodeShape.props.title || "Selected node"}
+        </div>
       </div>
 
-      {loading ? (
-        <div className="text-center text-gray-500">Loading relations...</div>
-      ) : error ? (
-        <div className="text-center text-red-600">{error}</div>
-      ) : groups.length === 0 ? (
-        <div className="text-center text-gray-500">No relations found.</div>
-      ) : (
-        <ul className="m-0 list-none space-y-2 p-0">
-          {groups.map((group) => (
-            <li key={group.key} className="rounded border p-2">
-              <div className="mb-1 flex items-center gap-2">
-                <span className="text-xs text-gray-500">
-                  {group.isSource ? "→" : "←"}
-                </span>
-                <span className="text-sm font-medium">{group.label}</span>
-              </div>
-              {group.linkedFiles.length === 0 ? (
-                <div className="text-xs text-gray-500">None</div>
-              ) : (
-                <ul className="m-0 list-none space-y-1 p-0 pl-5">
-                  {group.linkedFiles.map((f) => {
-                    return (
-                      <RelationFileItem
-                        key={f.path}
-                        file={f}
-                        group={group}
-                        checkExistingRelation={checkExistingRelation}
-                        handleCreateRelationTo={handleCreateRelationTo}
-                        handleDeleteRelation={handleDeleteRelationShape}
-                      />
-                    );
-                  })}
-                </ul>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
+      <RelationsPanelContent
+        plugin={plugin}
+        canvasFile={canvasFile}
+        nodeShape={nodeShape}
+      />
     </div>
   );
 };
@@ -540,38 +552,62 @@ const computeRelations = async (
     plugin.settings.discourseRelations.filter(isAcceptedSchema);
 
   for (const relationType of acceptedRelationTypes) {
-    const typeLevelRelation = acceptedDiscourseRelations.find(
-      (rel) =>
-        (rel.sourceId === activeNodeTypeId ||
-          rel.destinationId === activeNodeTypeId) &&
-        rel.relationshipTypeId === relationType.id,
+    const matchingRelations = acceptedDiscourseRelations.filter(
+      (relation) =>
+        (relation.sourceId === activeNodeTypeId ||
+          relation.destinationId === activeNodeTypeId) &&
+        relation.relationshipTypeId === relationType.id,
     );
-    if (!typeLevelRelation) continue;
-
-    const instanceRels = relations.filter((r) => r.type === relationType.id);
-    const isSource = typeLevelRelation.sourceId === activeNodeTypeId;
-    const label = isSource ? relationType.label : relationType.complement;
-    const key = `${relationType.id}-${isSource}`;
-
-    if (!result.has(key)) {
-      result.set(key, {
-        key,
-        label,
-        isSource,
-        relationTypeId: relationType.id,
-        linkedFiles: [],
-      });
-    }
+    for (const typeLevelRelation of matchingRelations) {
+      const isSource = typeLevelRelation.sourceId === activeNodeTypeId;
+      const key = `${relationType.id}-${isSource}`;
+
+      if (!result.has(key)) {
+        result.set(key, {
+          key,
+          label: isSource ? relationType.label : relationType.complement,
+          isSource,
+          relationTypeId: relationType.id,
+          linkedFiles: [],
+        });
+      }
 
-    const group = result.get(key)!;
-    for (const r of instanceRels) {
-      const otherId = r.source === nodeInstanceId ? r.destination : r.source;
-      const linked = getFileForNodeInstanceId(plugin, otherId);
-      if (linked && !group.linkedFiles.some((f) => f.path === linked.path)) {
-        group.linkedFiles.push(linked);
+      const group = result.get(key)!;
+      for (const relation of relations) {
+        if (relation.type !== relationType.id) continue;
+        const otherId = getRelationCounterpartId({
+          relation,
+          nodeInstanceId,
+          isSource,
+        });
+        if (!otherId) continue;
+
+        const linkedFile = getFileForNodeInstanceId(plugin, otherId);
+        if (
+          linkedFile &&
+          !group.linkedFiles.some(({ path }) => path === linkedFile.path)
+        ) {
+          group.linkedFiles.push(linkedFile);
+        }
       }
     }
   }
 
   return Array.from(result.values());
 };
+
+const getRelationCounterpartId = ({
+  relation,
+  nodeInstanceId,
+  isSource,
+}: {
+  relation: { source: string; destination: string };
+  nodeInstanceId: string;
+  isSource: boolean;
+}): string | null => {
+  if (isSource) {
+    return relation.source === nodeInstanceId ? relation.destination : null;
+  }
+
+  return relation.destination === nodeInstanceId ? relation.source : null;
+};
diff --git a/apps/obsidian/src/constants.ts b/apps/obsidian/src/constants.ts
index a47526a23..ce7ea3c3c 100644
--- a/apps/obsidian/src/constants.ts
+++ b/apps/obsidian/src/constants.ts
@@ -121,6 +121,7 @@ export const DEFAULT_SETTINGS: Settings = {
   spacePassword: undefined,
   accountLocalId: undefined,
   syncModeEnabled: false,
+  nodeCardContextMenuEnabled: false,
   spaceNames: {},
 };
 
diff --git a/apps/obsidian/src/types.ts b/apps/obsidian/src/types.ts
index f7bc3fc41..45eeca898 100644
--- a/apps/obsidian/src/types.ts
+++ b/apps/obsidian/src/types.ts
@@ -70,6 +70,7 @@ export type Settings = {
   spacePassword?: string;
   accountLocalId?: string;
   syncModeEnabled?: boolean;
+  nodeCardContextMenuEnabled?: boolean;
   /** Maps spaceUri (e.g. "obsidian:abc123") to human-readable name (e.g. "My Vault") */
   spaceNames?: Record<string, string>;
   username?: string;
diff --git a/apps/obsidian/styles.css b/apps/obsidian/styles.css
index 567e1539b..071d852f8 100644
--- a/apps/obsidian/styles.css
+++ b/apps/obsidian/styles.css
@@ -1,6 +1,12 @@
 @tailwind components;
 @tailwind utilities;
 
+/* tldraw otherwise caps the style panel at 148px. */
+.tlui-style-panel:has(.dg-node-card-menu) {
+  width: min(20rem, calc(100vw - 1rem));
+  max-width: min(20rem, calc(100vw - 1rem));
+}
+
 .accent-border-bottom {
   border-bottom: 2px solid var(--interactive-accent) !important;
 }
@@ -100,3 +106,9 @@ body.dg-hide-frontmatter-ids .metadata-property[data-property-key^="rel_" i] {
   border: none !important;
   box-shadow: none !important;
 }
+
+/* The reset above outranks utility classes; re-assert the node card menu's active tab styling. */
+.tldraw__editor .dg-node-card-menu button.accent-border-bottom {
+  border-bottom: 2px solid var(--interactive-accent) !important;
+  background: var(--background-modifier-hover) !important;
+}