diff --git a/frontend/src/features/canvas/Canvas.test.tsx b/frontend/src/features/canvas/Canvas.test.tsx
new file mode 100644
index 0000000..65f7311
--- /dev/null
+++ b/frontend/src/features/canvas/Canvas.test.tsx
@@ -0,0 +1,233 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Canvas from "./Canvas";
+import { CanvasElement } from "../shared/types";
+
+jest.mock("./components/CanvasBox", () => ({
+  __esModule: true,
+  default: ({ element }: { element: CanvasElement }) => (
+    <g data-testid={`canvas-box-${element.boxId}`} />
+  ),
+}));
+
+jest.mock("./components/CallStack", () => ({
+  __esModule: true,
+  default: () => <g data-testid="call-stack-layer" />,
+}));
+
+jest.mock("./components/PythonTutorReferenceArrows", () => ({
+  __esModule: true,
+  default: ({ enabled }: { enabled: boolean }) =>
+    enabled ? <g data-testid="arrow-overlay-layer" /> : null,
+}));
+
+jest.mock("./utils/validation", () => ({
+  validateElements: (elements: CanvasElement[]) => elements,
+}));
+
+jest.mock("../editors/utils/pythonTutorInlinePrimitives", () => ({
+  findOrphanedGeneratedPrimitiveIds: () => [],
+}));
+
+class ResizeObserverMock {
+  observe() {}
+  disconnect() {}
+  unobserve() {}
+}
+
+describe("Canvas arrow overlay order", () => {
+  beforeAll(() => {
+    (global as typeof globalThis).ResizeObserver =
+      ResizeObserverMock as unknown as typeof ResizeObserver;
+  });
+
+  it("renders the arrow overlay after the object layer so arrows paint on top", () => {
+    const elements: CanvasElement[] = [
+      {
+        boxId: 1,
+        id: "_",
+        x: 100,
+        y: 100,
+        kind: {
+          name: "function",
+          type: "function",
+          value: null,
+          functionName: "__main__",
+          params: [{ name: "node", targetId: 2 }],
+        },
+      },
+      {
+        boxId: 2,
+        id: 2,
+        x: 250,
+        y: 120,
+        kind: {
+          name: "class",
+          type: "class",
+          value: null,
+          className: "Node",
+          classVariables: [],
+        },
+      },
+    ];
+
+    const setElements = jest.fn();
+    const svgPoint = {
+      x: 0,
+      y: 0,
+      matrixTransform: () => ({ x: 0, y: 0 }),
+    };
+
+    render(
+      <Canvas
+        elements={elements}
+        setElements={setElements}
+        ids={[2]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        onClear={jest.fn()}
+        visualStyle="pythonTutor"
+        pythonTutorReferenceArrows={true}
+      />
+    );
+
+    const svg = screen.getByTestId("canvas") as unknown as SVGSVGElement;
+    svg.getBoundingClientRect = () =>
+      ({
+        width: 800,
+        height: 600,
+        top: 0,
+        left: 0,
+        right: 800,
+        bottom: 600,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      }) as DOMRect;
+    svg.createSVGPoint = () => svgPoint as SVGPoint;
+
+    const overlay = screen.getByTestId("arrow-overlay-layer");
+    const objectBox = screen.getByTestId("canvas-box-2");
+    const objectLayer = objectBox.parentElement;
+
+    expect(objectLayer?.tagName.toLowerCase()).toBe("g");
+
+    const svgChildren = Array.from(svg.children);
+    expect(svgChildren.indexOf(objectLayer as Element)).toBeGreaterThanOrEqual(0);
+    expect(svgChildren.indexOf(overlay)).toBeGreaterThan(
+      svgChildren.indexOf(objectLayer as Element)
+    );
+  });
+
+  it("hides primitive objects in inline Python Tutor mode but shows them in standalone mode", () => {
+    const primitiveElement: CanvasElement = {
+      boxId: 2,
+      id: 2,
+      x: 250,
+      y: 120,
+      kind: {
+        name: "primitive",
+        type: "int",
+        value: "7",
+      },
+    };
+
+    const { rerender } = render(
+      <Canvas
+        elements={[primitiveElement]}
+        setElements={jest.fn()}
+        ids={[2]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        onClear={jest.fn()}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={false}
+      />
+    );
+
+    expect(screen.queryByTestId("canvas-box-2")).toBeNull();
+
+    rerender(
+      <Canvas
+        elements={[primitiveElement]}
+        setElements={jest.fn()}
+        ids={[2]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        onClear={jest.fn()}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={true}
+      />
+    );
+
+    expect(screen.getByTestId("canvas-box-2")).toBeInTheDocument();
+  });
+
+  it("blocks primitive drops in inline Python Tutor mode and allows them in standalone mode", () => {
+    const dataTransfer = {
+      getData: () => "int",
+    } as unknown as DataTransfer;
+    const svgPoint = {
+      x: 0,
+      y: 0,
+      matrixTransform: () => ({ x: 100, y: 120 }),
+    };
+    const setElements = jest.fn();
+
+    const { rerender } = render(
+      <Canvas
+        elements={[]}
+        setElements={setElements}
+        ids={[]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        onClear={jest.fn()}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={false}
+      />
+    );
+
+    let svg = screen.getByTestId("canvas") as unknown as SVGSVGElement;
+    svg.createSVGPoint = () => svgPoint as SVGPoint;
+    svg.getScreenCTM = () =>
+      ({
+        inverse: () => ({}),
+      }) as SVGMatrix;
+
+    fireEvent.drop(svg, {
+      dataTransfer,
+      clientX: 100,
+      clientY: 120,
+    });
+
+    expect(setElements).not.toHaveBeenCalled();
+
+    rerender(
+      <Canvas
+        elements={[]}
+        setElements={setElements}
+        ids={[]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        onClear={jest.fn()}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={true}
+      />
+    );
+
+    svg = screen.getByTestId("canvas") as unknown as SVGSVGElement;
+    svg.createSVGPoint = () => svgPoint as SVGPoint;
+    svg.getScreenCTM = () =>
+      ({
+        inverse: () => ({}),
+      }) as SVGMatrix;
+
+    fireEvent.drop(svg, {
+      dataTransfer,
+      clientX: 100,
+      clientY: 120,
+    });
+
+    expect(setElements).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/frontend/src/features/canvas/Canvas.tsx b/frontend/src/features/canvas/Canvas.tsx
index 85d28f4..bb12565 100644
--- a/frontend/src/features/canvas/Canvas.tsx
+++ b/frontend/src/features/canvas/Canvas.tsx
@@ -8,13 +8,23 @@ import React, {
   useMemo,
 } from "react";
 import Draggable from "react-draggable";
-import { CanvasElement, BoxType, ID } from "../shared/types";
+import {
+  CanvasElement,
+  BoxType,
+  ID,
+  VisualStyle,
+} from "../shared/types";
 import CanvasBox from "./components/CanvasBox";
 import BoxEditor from "../editors/boxEditor/BoxEditor";
 import CallStack from "./components/CallStack";
 import { useCanvasRefs } from "./hooks/useCanvas";
 import { validateElements } from "./utils/validation";
 import styles from "./Canvas.module.css";
+import {
+  createElementsByIdMap,
+} from "./utils/pythonTutorReferences";
+import { findOrphanedGeneratedPrimitiveIds } from "../editors/utils/pythonTutorInlinePrimitives";
+import PythonTutorReferenceArrows from "./components/PythonTutorReferenceArrows";
 
 const EDITOR_MAP: Record<BoxType["name"], React.FC<any>> = {
   primitive: BoxEditor,
@@ -46,6 +56,10 @@ interface FloatingEditorProps {
   elements: CanvasElement[];
   editorScale: number;
   questionFunctionNames?: string[];
+  visualStyle?: VisualStyle;
+  pythonTutorReferenceArrows?: boolean;
+  pythonTutorStandalonePrimitives?: boolean;
+  onElementsChange: React.Dispatch<React.SetStateAction<CanvasElement[]>>;
 }
 
 function FloatingEditor({
@@ -68,6 +82,10 @@ function FloatingEditor({
   elements,
   editorScale,
   questionFunctionNames,
+  visualStyle = "memoryviz",
+  pythonTutorReferenceArrows = false,
+  pythonTutorStandalonePrimitives = false,
+  onElementsChange,
 }: FloatingEditorProps) {
   const nodeRef = useRef<HTMLDivElement>(null);
 
@@ -115,6 +133,9 @@ function FloatingEditor({
             canManageFunctions={canManageFunctions ?? sandbox}
             elements={elements}
             questionFunctionNames={questionFunctionNames}
+            visualStyle={visualStyle}
+            pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+            onElementsChange={onElementsChange}
           />
         </div>
       </div>
@@ -139,7 +160,10 @@ interface CanvasProps {
   scale?: number;
   onScaleChange?: (scale: number) => void;
   editorScale?: number;
-  questionFunctionNames?: string[];
+  questionFunctionNames?: string[]; 
+  visualStyle?: VisualStyle;
+  pythonTutorReferenceArrows?: boolean;
+  pythonTutorStandalonePrimitives?: boolean;
 }
 
 function Canvas({
@@ -158,6 +182,9 @@ function Canvas({
   scale: externalScale,
   editorScale = 1,
   questionFunctionNames,
+  visualStyle = "memoryviz",
+  pythonTutorReferenceArrows = false,
+  pythonTutorStandalonePrimitives = false,
 }: CanvasProps) {
   const [openEditors, setOpenEditors] = useState<CanvasElement[]>([]);
   const [selectedElement, setSelectedElement] = useState<CanvasElement | null>(
@@ -172,6 +199,8 @@ function Canvas({
 
   const { svgRef } = useCanvasRefs();
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const useInlinePythonTutorPrimitives =
+    visualStyle === "pythonTutor" && !pythonTutorStandalonePrimitives;
 
   const initialVB =
     typeof window !== "undefined"
@@ -322,6 +351,18 @@ function Canvas({
     (event: React.DragEvent<SVGSVGElement>) => {
       event.preventDefault();
       const boxType = event.dataTransfer.getData("application/box-type");
+      const primitiveBoxTypes = new Set([
+        "none",
+        "int",
+        "float",
+        "str",
+        "bool",
+        "primitive",
+      ]);
+
+      if (useInlinePythonTutorPrimitives && primitiveBoxTypes.has(boxType)) {
+        return;
+      }
 
       const newKind = createNewElement(boxType);
       if (!newKind) return;
@@ -353,7 +394,14 @@ function Canvas({
         return [...prev, newElement];
       });
     },
-    [elements, ids, sandbox, svgRef, setElements]
+    [
+      elements,
+      ids,
+      sandbox,
+      svgRef,
+      setElements,
+      useInlinePythonTutorPrimitives,
+    ]
   );
 
   const saveElement = useCallback(
@@ -389,10 +437,17 @@ function Canvas({
     [elements, setElements, removeId]
   );
 
-  const openElementEditor = useCallback((element: CanvasElement) => {
-    setOpenEditors([element]);
-    setSelectedElement(element);
-  }, []);
+  const openElementEditor = useCallback(
+    (element: CanvasElement) => {
+      if (useInlinePythonTutorPrimitives && element.kind.name === "primitive") {
+        return;
+      }
+
+      setOpenEditors([element]);
+      setSelectedElement(element);
+    },
+    [useInlinePythonTutorPrimitives]
+  );
 
   const closeElementEditor = useCallback((boxId: number) => {
     setOpenEditors((prev) => prev.filter((el) => el.boxId !== boxId));
@@ -406,6 +461,19 @@ function Canvas({
     }
   }, [onEditorOpenerReady, openElementEditor]);
 
+  useEffect(() => {
+    if (!useInlinePythonTutorPrimitives) {
+      return;
+    }
+
+    setOpenEditors((prev) =>
+      prev.filter((element) => element.kind.name !== "primitive")
+    );
+    setSelectedElement((prev) =>
+      prev?.kind.name === "primitive" ? null : prev
+    );
+  }, [useInlinePythonTutorPrimitives]);
+
   // Close all open editors when Escape is pressed
   useEffect(() => {
     if (openEditors.length === 0) return;
@@ -421,6 +489,63 @@ function Canvas({
   }, [openEditors.length]);
 
   const functionFrames = elements.filter((el) => el.kind.name === "function");
+  const elementsById = useMemo(() => createElementsByIdMap(elements), [elements]);
+  const visibleObjects = useMemo(
+    () =>
+      elements.filter((el) => {
+        if (el.kind.name === "function") return false;
+        return !(
+          useInlinePythonTutorPrimitives && el.kind.name === "primitive"
+        );
+      }),
+    [elements, useInlinePythonTutorPrimitives]
+  );
+
+  useEffect(() => {
+    if (!useInlinePythonTutorPrimitives) {
+      return;
+    }
+
+    const orphanedGeneratedPrimitiveIds = findOrphanedGeneratedPrimitiveIds(elements);
+    if (orphanedGeneratedPrimitiveIds.length === 0) {
+      return;
+    }
+
+    orphanedGeneratedPrimitiveIds.forEach((id) => removeId(id));
+    setElements((prev) =>
+      prev.filter(
+        (element) =>
+          !(
+            element.kind.name === "primitive" &&
+            element.generatedInlinePrimitive &&
+            typeof element.id === "number" &&
+            orphanedGeneratedPrimitiveIds.includes(element.id)
+          )
+      )
+    );
+    setOpenEditors((prev) =>
+      prev.filter(
+        (element) =>
+          !(
+            element.kind.name === "primitive" &&
+            typeof element.id === "number" &&
+            orphanedGeneratedPrimitiveIds.includes(element.id)
+          )
+      )
+    );
+    setSelectedElement((prev) => {
+      if (
+        prev &&
+        prev.kind.name === "primitive" &&
+        typeof prev.id === "number" &&
+        orphanedGeneratedPrimitiveIds.includes(prev.id)
+      ) {
+        return null;
+      }
+
+      return prev;
+    });
+  }, [elements, removeId, setElements, useInlinePythonTutorPrimitives]);
 
   const handleCallStackReorder = useCallback(
     (fromIndex: number, toIndex: number) => {
@@ -482,22 +607,41 @@ function Canvas({
             onReorder={handleCallStackReorder}
             onWidthChange={setCallStackWidth}
             scale={scale}
+            visualStyle={visualStyle}
+            pythonTutorReferenceArrows={pythonTutorReferenceArrows}
+            pythonTutorStandalonePrimitives={
+              pythonTutorStandalonePrimitives
+            }
+            elementsById={elementsById}
           />
 
           <g>
-            {elements
-              .filter((el) => el.kind.name !== "function")
-              .map((el) => (
+            {visibleObjects.map((el) => (
                 <CanvasBox
                   key={el.boxId}
                   element={el}
-                  openInterface={() => openElementEditor(el)}
+                  openInterface={(target) => openElementEditor(target ?? el)}
                   updatePosition={createPositionUpdater(el.boxId)}
                   invalidated={el.invalidated}
                   callStackWidth={callStackWidth}
+                  visualStyle={visualStyle}
+                  pythonTutorReferenceArrows={pythonTutorReferenceArrows}
+                  pythonTutorStandalonePrimitives={
+                    pythonTutorStandalonePrimitives
+                  }
+                  elementsById={elementsById}
                 />
               ))}
           </g>
+
+          <PythonTutorReferenceArrows
+            svgRef={svgRef}
+            enabled={
+              visualStyle === "pythonTutor" && pythonTutorReferenceArrows
+            }
+            includePrimitiveTargets={pythonTutorStandalonePrimitives}
+            elements={elements}
+          />
         </svg>
       </div>
 
@@ -527,6 +671,10 @@ function Canvas({
             elements={elements}
             editorScale={editorScale}
             questionFunctionNames={questionFunctionNames}
+            visualStyle={visualStyle}
+            pythonTutorReferenceArrows={pythonTutorReferenceArrows}
+            pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+            onElementsChange={setElements}
           />
         );
       })}
@@ -609,7 +757,11 @@ const areEqual = (prev: Readonly<CanvasProps>, next: Readonly<CanvasProps>) => {
     prev.sandbox === next.sandbox &&
     prev.scale === next.scale &&
     prev.editorScale === next.editorScale &&
-    prev.questionFunctionNames === next.questionFunctionNames
+    prev.questionFunctionNames === next.questionFunctionNames &&
+    prev.visualStyle === next.visualStyle &&
+    prev.pythonTutorReferenceArrows === next.pythonTutorReferenceArrows &&
+    prev.pythonTutorStandalonePrimitives ===
+      next.pythonTutorStandalonePrimitives
   );
 };
 
diff --git a/frontend/src/features/canvas/components/CallStack.module.css b/frontend/src/features/canvas/components/CallStack.module.css
index 4908af1..89f5d49 100644
--- a/frontend/src/features/canvas/components/CallStack.module.css
+++ b/frontend/src/features/canvas/components/CallStack.module.css
@@ -34,6 +34,19 @@
   font-size: 1rem;
 }
 
+.pythonTutorTitle {
+  font-family: "Segoe UI", Arial, sans-serif;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  text-transform: none;
+}
+
+.pythonTutorSelectionHighlight {
+  fill: var(--python-tutor-selected-frame-bg);
+  stroke: none;
+  opacity: 0.9;
+}
+
 .selectionHighlight {
   fill: none;
   stroke: var(--accent-blue);
diff --git a/frontend/src/features/canvas/components/CallStack.tsx b/frontend/src/features/canvas/components/CallStack.tsx
index 9f9c275..3d7f489 100644
--- a/frontend/src/features/canvas/components/CallStack.tsx
+++ b/frontend/src/features/canvas/components/CallStack.tsx
@@ -6,7 +6,10 @@ import React, {
   useState,
   useId,
 } from "react";
-import { CanvasElement } from "../../shared/types";
+import {
+  CanvasElement,
+  VisualStyle,
+} from "../../shared/types";
 import { BoxDimensions } from "../utils/box.types";
 import CanvasBox from "./CanvasBox";
 import styles from "./CallStack.module.css";
@@ -37,6 +40,10 @@ interface CallStackProps {
   y?: number;
   width?: number;
   scale?: number;
+  visualStyle?: VisualStyle;
+  pythonTutorReferenceArrows?: boolean;
+  pythonTutorStandalonePrimitives?: boolean;
+  elementsById?: Map<number, CanvasElement>;
 }
 
 interface DragState {
@@ -69,6 +76,10 @@ const CallStack: React.FC<CallStackProps> = ({
   y = 73,
   width = 205,
   scale = 1,
+  visualStyle = "memoryviz",
+  pythonTutorReferenceArrows = false,
+  pythonTutorStandalonePrimitives = false,
+  elementsById,
 }) => {
   const clipPathId = useId();
 
@@ -115,15 +126,6 @@ const CallStack: React.FC<CallStackProps> = ({
     columnHeight - HEADER_HEIGHT - TOP_PADDING - BOTTOM_PADDING
   );
 
-  // Log for debugging - remove after verification
-  console.log('CallStack centering:', {
-    viewportHeight,
-    yPosition,
-    bottomSpacing,
-    columnHeight,
-    'Should be equal': yPosition === bottomSpacing
-  });
-
   const layout = useMemo((): LayoutItem[] => {
     let yOffset = 0;
     const baseY = yPosition + HEADER_HEIGHT + TOP_PADDING + visibleHeight;
@@ -367,13 +369,15 @@ const CallStack: React.FC<CallStackProps> = ({
       />
 
       <text
-        className={styles.callStackTitle}
+        className={`${styles.callStackTitle} ${
+          visualStyle === "pythonTutor" ? styles.pythonTutorTitle : ""
+        }`}
         x={x + columnWidth / 2}
         y={yPosition + HEADER_HEIGHT / 2 + 4}
         textAnchor="middle"
         fontSize="10"
       >
-        Call Stack
+        {visualStyle === "pythonTutor" ? "Frames" : "Call Stack"}
       </text>
 
       <clipPath id={clipPathId}>
@@ -406,13 +410,17 @@ const CallStack: React.FC<CallStackProps> = ({
                   boxSizes[frame.boxId]?.width ?? DEFAULT_BOX_WIDTH;
                 return (
                   <rect
-                    className={styles.selectionHighlight}
+                    className={
+                      visualStyle === "pythonTutor"
+                        ? styles.pythonTutorSelectionHighlight
+                        : styles.selectionHighlight
+                    }
                     x={-boxWidth / 2 + 1}
                     y={-height / 2 + 2}
                     width={boxWidth - 4}
                     height={height - 6}
-                    rx={6}
-                    ry={6}
+                    rx={visualStyle === "pythonTutor" ? 2 : 6}
+                    ry={visualStyle === "pythonTutor" ? 2 : 6}
                     style={{ pointerEvents: "none" }}
                   />
                 );
@@ -420,11 +428,17 @@ const CallStack: React.FC<CallStackProps> = ({
 
             <MemoizedCanvasBox
               element={memoizedElements[frame.boxId]}
-              openInterface={() => onSelect(frame)}
+              openInterface={(target) => onSelect(target ?? frame)}
               updatePosition={() => {}}
               onSizeChange={handleBoxSizeChange}
               invalidated={frame.invalidated}
               disableDrag={true}
+              visualStyle={visualStyle}
+              pythonTutorReferenceArrows={pythonTutorReferenceArrows}
+              pythonTutorStandalonePrimitives={
+                pythonTutorStandalonePrimitives
+              }
+              elementsById={elementsById}
             />
           </g>
         ))}
diff --git a/frontend/src/features/canvas/components/CanvasBox.tsx b/frontend/src/features/canvas/components/CanvasBox.tsx
index 42be324..9020ae8 100644
--- a/frontend/src/features/canvas/components/CanvasBox.tsx
+++ b/frontend/src/features/canvas/components/CanvasBox.tsx
@@ -14,6 +14,11 @@ export default function CanvasBox({
   invalidated = false,
   disableDrag = false,
   callStackWidth,
+  visualStyle = "memoryviz",
+  pythonTutorReferenceArrows = false,
+  pythonTutorStandalonePrimitives = false,
+  elementsById,
+  renderMode = "canvas",
 }: CanvasBoxProps) {
   const { gRef, dragState, dimensions } = useBoxDragState();
 
@@ -27,6 +32,11 @@ export default function CanvasBox({
     invalidated,
     disableDrag,
     callStackWidth,
+    visualStyle,
+    pythonTutorReferenceArrows,
+    pythonTutorStandalonePrimitives,
+    elementsById,
+    renderMode,
   });
 
   // Report size changes for parent components (like CallStack)
@@ -130,5 +140,15 @@ export default function CanvasBox({
     };
   }, [checkAndConstrainPosition, disableDrag, element.kind.name]);
 
-  return <g ref={gRef} />;
+  return (
+    <g
+      ref={gRef}
+      data-canvas-box-id={element.boxId}
+      data-canvas-kind={element.kind.name}
+      data-canvas-render-mode={renderMode}
+      data-canvas-element-id={
+        typeof element.id === "number" ? element.id : undefined
+      }
+    />
+  );
 }
diff --git a/frontend/src/features/canvas/components/PythonTutorReferenceArrows.test.tsx b/frontend/src/features/canvas/components/PythonTutorReferenceArrows.test.tsx
new file mode 100644
index 0000000..4ee43ac
--- /dev/null
+++ b/frontend/src/features/canvas/components/PythonTutorReferenceArrows.test.tsx
@@ -0,0 +1,265 @@
+import React, { useRef } from "react";
+import { render, waitFor } from "@testing-library/react";
+import PythonTutorReferenceArrows from "./PythonTutorReferenceArrows";
+
+class ResizeObserverMock {
+  observe() {}
+  disconnect() {}
+  unobserve() {}
+}
+
+function makeRect(
+  left: number,
+  top: number,
+  width: number,
+  height: number
+): DOMRect {
+  return {
+    x: left,
+    y: top,
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    toJSON: () => ({}),
+  } as DOMRect;
+}
+
+function Harness({
+  enabled,
+  includePrimitiveTargets = false,
+  targetKind = "class",
+}: {
+  enabled: boolean;
+  includePrimitiveTargets?: boolean;
+  targetKind?: "class" | "primitive";
+}) {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+
+  return (
+    <svg ref={svgRef} viewBox="0 0 400 300">
+      <g
+        data-canvas-element-id="2"
+        data-canvas-kind={targetKind}
+        data-canvas-render-mode="canvas"
+      />
+      <circle data-ref-source-target-id="2" />
+      <PythonTutorReferenceArrows
+        svgRef={svgRef}
+        enabled={enabled}
+        includePrimitiveTargets={includePrimitiveTargets}
+        elements={[]}
+      />
+    </svg>
+  );
+}
+
+function parseCubicPath(pathData: string) {
+  const matches = pathData.match(/-?\d+(?:\.\d+)?/g);
+  if (!matches || matches.length !== 8) {
+    throw new Error(`Unexpected path data: ${pathData}`);
+  }
+
+  const [startX, startY, control1X, control1Y, control2X, control2Y, endX, endY] =
+    matches.map(Number);
+
+  return {
+    startX,
+    startY,
+    control1X,
+    control1Y,
+    control2X,
+    control2Y,
+    endX,
+    endY,
+  };
+}
+
+describe("PythonTutorReferenceArrows", () => {
+  beforeAll(() => {
+    (global as typeof globalThis).ResizeObserver =
+      ResizeObserverMock as unknown as typeof ResizeObserver;
+    window.requestAnimationFrame = ((callback: FrameRequestCallback) =>
+      window.setTimeout(callback, 0)) as typeof window.requestAnimationFrame;
+    window.cancelAnimationFrame = ((handle: number) =>
+      window.clearTimeout(handle)) as typeof window.cancelAnimationFrame;
+  });
+
+  it("draws arrow paths only when enabled and source/target markers exist", async () => {
+    const { container, rerender } = render(<Harness enabled={false} />);
+
+    const svg = container.querySelector("svg") as SVGSVGElement;
+    const target = container.querySelector(
+      '[data-canvas-element-id="2"]'
+    ) as SVGGElement;
+    const source = container.querySelector(
+      '[data-ref-source-target-id="2"]'
+    ) as SVGCircleElement;
+
+    svg.getBoundingClientRect = () => makeRect(0, 0, 400, 300);
+    target.getBoundingClientRect = () => makeRect(240, 120, 80, 60);
+    source.getBoundingClientRect = () => makeRect(100, 140, 8, 8);
+
+    expect(
+      container.querySelector('g[data-python-tutor-arrow-overlay="true"] path')
+    ).toBeNull();
+
+    rerender(<Harness enabled={true} />);
+
+    const rerenderedSvg = container.querySelector("svg") as SVGSVGElement;
+    const rerenderedTarget = container.querySelector(
+      '[data-canvas-element-id="2"]'
+    ) as SVGGElement;
+    const rerenderedSource = container.querySelector(
+      '[data-ref-source-target-id="2"]'
+    ) as SVGCircleElement;
+
+    rerenderedSvg.getBoundingClientRect = () => makeRect(0, 0, 400, 300);
+    rerenderedTarget.getBoundingClientRect = () => makeRect(240, 120, 80, 60);
+    rerenderedSource.getBoundingClientRect = () => makeRect(100, 140, 8, 8);
+
+    await waitFor(() => {
+      const arrowPath = container.querySelector(
+        'g[data-python-tutor-arrow-overlay="true"] path'
+      );
+      expect(arrowPath).not.toBeNull();
+      expect(arrowPath?.getAttribute("d")).toContain("M");
+    });
+  });
+
+  it("uses a vertical endpoint tangent when entering from above", async () => {
+    const { container } = render(<Harness enabled={true} />);
+
+    const svg = container.querySelector("svg") as SVGSVGElement;
+    const target = container.querySelector(
+      '[data-canvas-element-id="2"]'
+    ) as SVGGElement;
+    const source = container.querySelector(
+      '[data-ref-source-target-id="2"]'
+    ) as SVGCircleElement;
+
+    svg.getBoundingClientRect = () => makeRect(0, 0, 400, 300);
+    target.getBoundingClientRect = () => makeRect(160, 160, 80, 60);
+    source.getBoundingClientRect = () => makeRect(196, 40, 8, 8);
+
+    await waitFor(() => {
+      const arrowPath = container.querySelector(
+        'g[data-python-tutor-arrow-overlay="true"] path'
+      );
+      expect(arrowPath).not.toBeNull();
+
+      const path = parseCubicPath(arrowPath?.getAttribute("d") || "");
+      expect(path.control2X).toBeCloseTo(path.endX, 5);
+      expect(path.control2Y).not.toBeCloseTo(path.endY, 5);
+      expect(path.endY).toBeCloseTo(160, 5);
+    });
+  });
+
+  it("uses a vertical endpoint tangent when entering from below", async () => {
+    const { container } = render(<Harness enabled={true} />);
+
+    const svg = container.querySelector("svg") as SVGSVGElement;
+    const target = container.querySelector(
+      '[data-canvas-element-id="2"]'
+    ) as SVGGElement;
+    const source = container.querySelector(
+      '[data-ref-source-target-id="2"]'
+    ) as SVGCircleElement;
+
+    svg.getBoundingClientRect = () => makeRect(0, 0, 400, 300);
+    target.getBoundingClientRect = () => makeRect(160, 80, 80, 60);
+    source.getBoundingClientRect = () => makeRect(196, 220, 8, 8);
+
+    await waitFor(() => {
+      const arrowPath = container.querySelector(
+        'g[data-python-tutor-arrow-overlay="true"] path'
+      );
+      expect(arrowPath).not.toBeNull();
+
+      const path = parseCubicPath(arrowPath?.getAttribute("d") || "");
+      expect(path.control2X).toBeCloseTo(path.endX, 5);
+      expect(path.control2Y).not.toBeCloseTo(path.endY, 5);
+      expect(path.endY).toBeCloseTo(140, 5);
+    });
+  });
+
+  it("keeps a horizontal endpoint tangent when entering from the left", async () => {
+    const { container } = render(<Harness enabled={true} />);
+
+    const svg = container.querySelector("svg") as SVGSVGElement;
+    const target = container.querySelector(
+      '[data-canvas-element-id="2"]'
+    ) as SVGGElement;
+    const source = container.querySelector(
+      '[data-ref-source-target-id="2"]'
+    ) as SVGCircleElement;
+
+    svg.getBoundingClientRect = () => makeRect(0, 0, 400, 300);
+    target.getBoundingClientRect = () => makeRect(240, 120, 80, 60);
+    source.getBoundingClientRect = () => makeRect(100, 140, 8, 8);
+
+    await waitFor(() => {
+      const arrowPath = container.querySelector(
+        'g[data-python-tutor-arrow-overlay="true"] path'
+      );
+      expect(arrowPath).not.toBeNull();
+
+      const path = parseCubicPath(arrowPath?.getAttribute("d") || "");
+      expect(path.control2X).not.toBeCloseTo(path.endX, 5);
+      expect(path.control2Y).toBeCloseTo(path.endY, 5);
+      expect(path.endX).toBeCloseTo(240, 5);
+    });
+  });
+
+  it("includes primitive targets only when configured", async () => {
+    const { container, rerender } = render(
+      <Harness enabled={true} targetKind="primitive" />
+    );
+
+    const svg = container.querySelector("svg") as SVGSVGElement;
+    const target = container.querySelector(
+      '[data-canvas-element-id="2"]'
+    ) as SVGGElement;
+    const source = container.querySelector(
+      '[data-ref-source-target-id="2"]'
+    ) as SVGCircleElement;
+
+    svg.getBoundingClientRect = () => makeRect(0, 0, 400, 300);
+    target.getBoundingClientRect = () => makeRect(240, 120, 80, 60);
+    source.getBoundingClientRect = () => makeRect(100, 140, 8, 8);
+
+    await waitFor(() => {
+      expect(
+        container.querySelector('g[data-python-tutor-arrow-overlay="true"] path')
+      ).toBeNull();
+    });
+
+    rerender(
+      <Harness
+        enabled={true}
+        includePrimitiveTargets={true}
+        targetKind="primitive"
+      />
+    );
+
+    const rerenderedSvg = container.querySelector("svg") as SVGSVGElement;
+    const rerenderedTarget = container.querySelector(
+      '[data-canvas-element-id="2"]'
+    ) as SVGGElement;
+    const rerenderedSource = container.querySelector(
+      '[data-ref-source-target-id="2"]'
+    ) as SVGCircleElement;
+
+    rerenderedSvg.getBoundingClientRect = () => makeRect(0, 0, 400, 300);
+    rerenderedTarget.getBoundingClientRect = () => makeRect(240, 120, 80, 60);
+    rerenderedSource.getBoundingClientRect = () => makeRect(100, 140, 8, 8);
+
+    await waitFor(() => {
+      expect(
+        container.querySelector('g[data-python-tutor-arrow-overlay="true"] path')
+      ).not.toBeNull();
+    });
+  });
+});
diff --git a/frontend/src/features/canvas/components/PythonTutorReferenceArrows.tsx b/frontend/src/features/canvas/components/PythonTutorReferenceArrows.tsx
new file mode 100644
index 0000000..edd0bc9
--- /dev/null
+++ b/frontend/src/features/canvas/components/PythonTutorReferenceArrows.tsx
@@ -0,0 +1,389 @@
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { CanvasElement } from "../../shared/types";
+
+interface PythonTutorReferenceArrowsProps {
+  svgRef: React.RefObject<SVGSVGElement | null>;
+  enabled: boolean;
+  includePrimitiveTargets?: boolean;
+  elements: CanvasElement[];
+}
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+type RectSide = "left" | "right" | "top" | "bottom";
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface ArrowPath {
+  key: string;
+  d: string;
+}
+
+interface RectIntersection {
+  point: Point;
+  side: RectSide;
+}
+
+function parseViewBox(svg: SVGSVGElement): Rect {
+  const viewBox = svg.viewBox?.baseVal;
+  if (viewBox && viewBox.width > 0 && viewBox.height > 0) {
+    return {
+      x: viewBox.x,
+      y: viewBox.y,
+      width: viewBox.width,
+      height: viewBox.height,
+    };
+  }
+
+  const rawViewBox = svg.getAttribute("viewBox");
+  if (rawViewBox) {
+    const [x, y, width, height] = rawViewBox
+      .split(/\s+/)
+      .map((value) => parseFloat(value));
+    if ([x, y, width, height].every((value) => Number.isFinite(value))) {
+      return { x, y, width, height };
+    }
+  }
+
+  const rect = svg.getBoundingClientRect();
+  return {
+    x: 0,
+    y: 0,
+    width: rect.width || 1,
+    height: rect.height || 1,
+  };
+}
+
+function toSvgPoint(
+  svg: SVGSVGElement,
+  clientX: number,
+  clientY: number
+): Point {
+  const rootRect = svg.getBoundingClientRect();
+  const viewBox = parseViewBox(svg);
+  const width = rootRect.width || 1;
+  const height = rootRect.height || 1;
+
+  return {
+    x: viewBox.x + ((clientX - rootRect.left) / width) * viewBox.width,
+    y: viewBox.y + ((clientY - rootRect.top) / height) * viewBox.height,
+  };
+}
+
+function rectToSvgRect(svg: SVGSVGElement, rect: DOMRect): Rect | null {
+  if (rect.width <= 0 || rect.height <= 0) {
+    return null;
+  }
+
+  const topLeft = toSvgPoint(svg, rect.left, rect.top);
+  const bottomRight = toSvgPoint(svg, rect.right, rect.bottom);
+
+  return {
+    x: Math.min(topLeft.x, bottomRight.x),
+    y: Math.min(topLeft.y, bottomRight.y),
+    width: Math.abs(bottomRight.x - topLeft.x),
+    height: Math.abs(bottomRight.y - topLeft.y),
+  };
+}
+
+function getRectPerimeterPoint(rect: Rect, towardPoint: Point): RectIntersection {
+  const centerX = rect.x + rect.width / 2;
+  const centerY = rect.y + rect.height / 2;
+  const dx = towardPoint.x - centerX;
+  const dy = towardPoint.y - centerY;
+
+  if (dx === 0 && dy === 0) {
+    return {
+      point: { x: centerX, y: centerY },
+      side: "top",
+    };
+  }
+
+  const scaleX =
+    dx === 0 ? Number.POSITIVE_INFINITY : rect.width / 2 / Math.abs(dx);
+  const scaleY =
+    dy === 0 ? Number.POSITIVE_INFINITY : rect.height / 2 / Math.abs(dy);
+  const preferVertical = Math.abs(dy) >= Math.abs(dx);
+  const isTie = Math.abs(scaleX - scaleY) < 1e-6;
+  const useHorizontalEdge =
+    scaleY < scaleX || (isTie && preferVertical);
+  const side: RectSide = useHorizontalEdge
+    ? dy < 0
+      ? "top"
+      : "bottom"
+    : dx < 0
+    ? "left"
+    : "right";
+  const scale = useHorizontalEdge ? scaleY : scaleX;
+
+  return {
+    point: {
+      x: centerX + dx * scale,
+      y: centerY + dy * scale,
+    },
+    side,
+  };
+}
+
+function createArrowPath(start: Point, end: Point, entrySide: RectSide): string {
+  const deltaX = end.x - start.x;
+  const deltaY = end.y - start.y;
+  const departVertically = Math.abs(deltaY) > Math.abs(deltaX);
+  const startOffset = Math.max(
+    26,
+    (departVertically ? Math.abs(deltaY) : Math.abs(deltaX)) * 0.35
+  );
+  const endOffset = Math.max(
+    26,
+    ((entrySide === "top" || entrySide === "bottom")
+      ? Math.abs(deltaY)
+      : Math.abs(deltaX)) * 0.35
+  );
+
+  const control1 = departVertically
+    ? {
+        x: start.x,
+        y: start.y + (deltaY >= 0 ? 1 : -1) * startOffset,
+      }
+    : {
+        x: start.x + (deltaX >= 0 ? 1 : -1) * startOffset,
+        y: start.y,
+      };
+
+  const control2 = (() => {
+    switch (entrySide) {
+      case "left":
+        return { x: end.x - endOffset, y: end.y };
+      case "right":
+        return { x: end.x + endOffset, y: end.y };
+      case "top":
+        return { x: end.x, y: end.y - endOffset };
+      case "bottom":
+        return { x: end.x, y: end.y + endOffset };
+      default:
+        return { x: end.x, y: end.y };
+    }
+  })();
+
+  return `M ${start.x} ${start.y} C ${control1.x} ${control1.y}, ${control2.x} ${control2.y}, ${end.x} ${end.y}`;
+}
+
+function areArrowPathsEqual(current: ArrowPath[], next: ArrowPath[]): boolean {
+  if (current.length !== next.length) {
+    return false;
+  }
+
+  return current.every(
+    (arrow, index) =>
+      arrow.key === next[index]?.key && arrow.d === next[index]?.d
+  );
+}
+
+function collectArrowPaths(
+  svg: SVGSVGElement,
+  includePrimitiveTargets: boolean
+): ArrowPath[] {
+  const targetNodes = Array.from(
+    svg.querySelectorAll<SVGGElement>(
+      '[data-canvas-element-id][data-canvas-render-mode="canvas"]'
+    )
+  );
+  const targetsById = new Map<number, Rect>();
+
+  targetNodes.forEach((node) => {
+    const targetId = parseInt(node.getAttribute("data-canvas-element-id") || "", 10);
+    const kind = node.getAttribute("data-canvas-kind");
+    if (
+      !Number.isInteger(targetId) ||
+      (!includePrimitiveTargets && kind === "primitive")
+    ) {
+      return;
+    }
+
+    const rect = rectToSvgRect(svg, node.getBoundingClientRect());
+    if (!rect) {
+      return;
+    }
+
+    targetsById.set(targetId, rect);
+  });
+
+  const sourceNodes = Array.from(
+    svg.querySelectorAll<SVGCircleElement>("[data-ref-source-target-id]")
+  );
+
+  return sourceNodes.flatMap((node, index) => {
+    const targetId = parseInt(
+      node.getAttribute("data-ref-source-target-id") || "",
+      10
+    );
+    if (!Number.isInteger(targetId)) {
+      return [];
+    }
+
+    const targetRect = targetsById.get(targetId);
+    if (!targetRect) {
+      return [];
+    }
+
+    const sourceRect = node.getBoundingClientRect();
+    if (sourceRect.width <= 0 || sourceRect.height <= 0) {
+      return [];
+    }
+
+    const sourcePoint = toSvgPoint(
+      svg,
+      sourceRect.left + sourceRect.width / 2,
+      sourceRect.top + sourceRect.height / 2
+    );
+    const endPoint = getRectPerimeterPoint(targetRect, sourcePoint);
+
+    return [
+      {
+        key: `${targetId}-${index}`,
+        d: createArrowPath(sourcePoint, endPoint.point, endPoint.side),
+      },
+    ];
+  });
+}
+
+export default function PythonTutorReferenceArrows({
+  svgRef,
+  enabled,
+  includePrimitiveTargets = false,
+  elements,
+}: PythonTutorReferenceArrowsProps) {
+  const rawMarkerId = useId();
+  const markerId = useMemo(
+    () => `python-tutor-reference-arrow-${rawMarkerId.replace(/:/g, "")}`,
+    [rawMarkerId]
+  );
+  const [arrows, setArrows] = useState<ArrowPath[]>([]);
+  const frameRef = useRef<number | null>(null);
+
+  const recompute = useCallback(() => {
+    const svg = svgRef.current;
+    if (!enabled || !svg) {
+      setArrows((current) => (current.length === 0 ? current : []));
+      return;
+    }
+
+    const nextArrows = collectArrowPaths(svg, includePrimitiveTargets);
+    setArrows((current) =>
+      areArrowPathsEqual(current, nextArrows) ? current : nextArrows
+    );
+  }, [enabled, includePrimitiveTargets, svgRef]);
+
+  const scheduleRecompute = useCallback(() => {
+    if (!enabled) return;
+    if (frameRef.current !== null) return;
+
+    frameRef.current = window.requestAnimationFrame(() => {
+      frameRef.current = null;
+      recompute();
+    });
+  }, [enabled, recompute]);
+
+  useEffect(() => {
+    if (!enabled) {
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+      setArrows([]);
+      return;
+    }
+
+    const svg = svgRef.current;
+    if (!svg) return;
+
+    scheduleRecompute();
+
+    const mutationObserver = new MutationObserver(() => {
+      scheduleRecompute();
+    });
+    mutationObserver.observe(svg, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+
+    const resizeObserver = new ResizeObserver(() => {
+      scheduleRecompute();
+    });
+    resizeObserver.observe(svg);
+
+    const handlePointerMove = () => {
+      scheduleRecompute();
+    };
+    const handleWheel = () => {
+      scheduleRecompute();
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("mousemove", handlePointerMove);
+    window.addEventListener("resize", scheduleRecompute);
+    svg.addEventListener("wheel", handleWheel, { passive: true });
+
+    return () => {
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("mousemove", handlePointerMove);
+      window.removeEventListener("resize", scheduleRecompute);
+      svg.removeEventListener("wheel", handleWheel);
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [enabled, scheduleRecompute, svgRef]);
+
+  useEffect(() => {
+    if (!enabled) return;
+    scheduleRecompute();
+  }, [enabled, elements, includePrimitiveTargets, scheduleRecompute]);
+
+  if (!enabled) {
+    return null;
+  }
+
+  return (
+    <>
+      <defs>
+        <marker
+          id={markerId}
+          markerWidth="10"
+          markerHeight="8"
+          refX="9"
+          refY="4"
+          orient="auto"
+          markerUnits="strokeWidth"
+        >
+          <path d="M 0 0 L 10 4 L 0 8 z" fill="var(--python-tutor-reference-text)" />
+        </marker>
+      </defs>
+      <g data-python-tutor-arrow-overlay="true" style={{ pointerEvents: "none" }}>
+        {arrows.map((arrow) => (
+          <path
+            key={arrow.key}
+            d={arrow.d}
+            fill="none"
+            stroke="var(--python-tutor-reference-text)"
+            strokeWidth="2"
+            strokeLinecap="round"
+            markerEnd={`url(#${markerId})`}
+          />
+        ))}
+      </g>
+    </>
+  );
+}
diff --git a/frontend/src/features/canvas/hooks/useCanvas.tsx b/frontend/src/features/canvas/hooks/useCanvas.tsx
index 78f0b8b..d3c643f 100644
--- a/frontend/src/features/canvas/hooks/useCanvas.tsx
+++ b/frontend/src/features/canvas/hooks/useCanvas.tsx
@@ -5,7 +5,11 @@
 
 import { useRef, useEffect, useCallback } from "react";
 import { createBoxRenderer } from "../utils/box.renderer";
-import { CanvasElement } from "../../shared/types";
+import {
+  CanvasElement,
+  RenderMode,
+  VisualStyle,
+} from "../../shared/types";
 import { DragState, BoxDimensions } from "../utils/box.types";
 import {
   getCallStackBounds,
@@ -127,19 +131,30 @@ export function useDraggableBox({
   invalidated = false,
   disableDrag = false,
   callStackWidth,
+  visualStyle = "memoryviz",
+  pythonTutorReferenceArrows = false,
+  pythonTutorStandalonePrimitives = false,
+  elementsById,
+  renderMode = "canvas",
 }: {
   gRef: React.RefObject<SVGGElement | null>;
   element: CanvasElement;
   dimensions: React.MutableRefObject<BoxDimensions>;
   dragState: React.MutableRefObject<DragState>;
-  openInterface: (element: CanvasElement) => void;
+  openInterface: (element: CanvasElement | null) => void;
   updatePosition: (x: number, y: number) => void;
   invalidated?: boolean;
   disableDrag?: boolean;
   callStackWidth?: number;
+  visualStyle?: VisualStyle;
+  pythonTutorReferenceArrows?: boolean;
+  pythonTutorStandalonePrimitives?: boolean;
+  elementsById?: Map<number, CanvasElement>;
+  renderMode?: RenderMode;
 }) {
   const livePosRef = useRef({ x: element.x, y: element.y });
   const movedRef = useRef(false);
+  const boxSvgRef = useRef<SVGSVGElement | null>(null);
   const CLICK_EPS = 3;
 
   const getSvgPoint = useCallback(
@@ -226,9 +241,71 @@ export function useDraggableBox({
     });
   }, [handleMouseMove, updatePosition, dragState]);
 
+  const findReferencedElement = useCallback(
+    (event: MouseEvent | React.MouseEvent) => {
+      if (visualStyle !== "pythonTutor" || !elementsById || !boxSvgRef.current) {
+        return null;
+      }
+
+      const boxSvg = boxSvgRef.current;
+      const ctm = boxSvg.getScreenCTM();
+      if (!ctm) return null;
+
+      const point = boxSvg.createSVGPoint();
+      point.x = event.clientX;
+      point.y = event.clientY;
+      const localPoint = point.matrixTransform(ctm.inverse());
+
+      const hitTargets = Array.from(
+        boxSvg.querySelectorAll<SVGRectElement>("[data-ref-target-id]")
+      );
+
+      for (const hitTarget of hitTargets) {
+        const x = parseFloat(hitTarget.getAttribute("x") || "0");
+        const y = parseFloat(hitTarget.getAttribute("y") || "0");
+        const width = parseFloat(hitTarget.getAttribute("width") || "0");
+        const height = parseFloat(hitTarget.getAttribute("height") || "0");
+
+        const isInside =
+          localPoint.x >= x &&
+          localPoint.x <= x + width &&
+          localPoint.y >= y &&
+          localPoint.y <= y + height;
+
+        if (!isInside) continue;
+
+        const targetId = parseInt(
+          hitTarget.getAttribute("data-ref-target-id") || "",
+          10
+        );
+        if (!Number.isInteger(targetId)) continue;
+
+        const target = elementsById.get(targetId);
+        if (
+          target &&
+          !(
+            visualStyle === "pythonTutor" &&
+            !pythonTutorStandalonePrimitives &&
+            target.kind.name === "primitive"
+          )
+        ) {
+          return target;
+        }
+      }
+
+      return null;
+    },
+    [elementsById, pythonTutorStandalonePrimitives, visualStyle]
+  );
+
   const handleMouseDown = useCallback(
     (event: MouseEvent | React.MouseEvent) => {
       event.stopPropagation();
+      if (findReferencedElement(event)) {
+        movedRef.current = false;
+        return;
+      }
+
       movedRef.current = false;
       dragState.current.isDragging = true;
 
@@ -248,6 +325,7 @@ export function useDraggableBox({
       getSvgPoint,
       handleMouseMove,
       handleMouseUp,
+      findReferencedElement,
       dragState,
     ]
   );
@@ -260,7 +338,14 @@ export function useDraggableBox({
     const container = gRef.current;
     if (!container) return;
 
-    const svgElement = createBoxRenderer(element);
+    const svgElement = createBoxRenderer(element, {
+      visualStyle,
+      pythonTutorReferenceArrows,
+      pythonTutorStandalonePrimitives,
+      elementsById,
+      renderMode,
+    });
+    boxSvgRef.current = svgElement;
     const padding = 12;
 
     container.innerHTML = "";
@@ -312,13 +397,24 @@ export function useDraggableBox({
     const handleClick = (ev: MouseEvent) => {
       ev.stopPropagation();
       if (movedRef.current) return;
-      openInterface(element);
+      const targetElement = findReferencedElement(ev);
+      openInterface(targetElement ?? element);
+    };
+
+    const handleOverlayMouseMove = (ev: MouseEvent) => {
+      const targetElement = findReferencedElement(ev);
+      overlay.style.cursor = targetElement
+        ? "pointer"
+        : disableDrag
+        ? "pointer"
+        : "grab";
     };
 
     if (!disableDrag) {
       overlay.addEventListener("mousedown", handleMouseDown as EventListener);
     }
     overlay.addEventListener("click", handleClick);
+    overlay.addEventListener("mousemove", handleOverlayMouseMove);
     svgElement.appendChild(overlay);
 
     return () => {
@@ -329,6 +425,8 @@ export function useDraggableBox({
         );
       }
       overlay.removeEventListener("click", handleClick);
+      overlay.removeEventListener("mousemove", handleOverlayMouseMove);
+      boxSvgRef.current = null;
     };
   }, [
     element,
@@ -338,5 +436,11 @@ export function useDraggableBox({
     gRef,
     dimensions,
     disableDrag,
+    visualStyle,
+    pythonTutorReferenceArrows,
+    pythonTutorStandalonePrimitives,
+    elementsById,
+    renderMode,
+    findReferencedElement,
   ]);
 }
diff --git a/frontend/src/features/canvas/utils/box.renderer.ts b/frontend/src/features/canvas/utils/box.renderer.ts
index f0a90bd..bc5299f 100644
--- a/frontend/src/features/canvas/utils/box.renderer.ts
+++ b/frontend/src/features/canvas/utils/box.renderer.ts
@@ -4,12 +4,13 @@
  */
 
 import MemoryViz from "memory-viz";
-import { CanvasElement } from "../../shared/types";
+import { CanvasElement, RenderMode, VisualStyle } from "../../shared/types";
 import { MemoryVizConfig } from "./box.types";
 import {
   getBoxConfig,
   DEFAULT_CANVAS_STYLE,
 } from "../../shared/boxConfig";
+import { createPythonTutorBoxRenderer } from "./pythonTutorRenderer";
 
 /**
  * Base MemoryViz configuration for all canvas boxes.
@@ -40,7 +41,33 @@ const DEFAULT_MEMORY_VIZ_CONFIG: Partial<MemoryVizConfig> = {
  * const svg = createBoxRenderer(element);
  * container.appendChild(svg);
  */
-export function createBoxRenderer(element: CanvasElement): SVGSVGElement {
+export function createBoxRenderer(
+  element: CanvasElement,
+  options: {
+    visualStyle?: VisualStyle;
+    pythonTutorReferenceArrows?: boolean;
+    pythonTutorStandalonePrimitives?: boolean;
+    elementsById?: Map<number, CanvasElement>;
+    renderMode?: RenderMode;
+  } = {}
+): SVGSVGElement {
+  if (options.visualStyle === "pythonTutor") {
+    const svg = createPythonTutorBoxRenderer(element, {
+      elementsById: options.elementsById,
+      renderMode: options.renderMode,
+      showReferenceArrows:
+        options.renderMode === "canvas" && options.pythonTutorReferenceArrows,
+      showPrimitiveReferencesAsObjects:
+        options.pythonTutorStandalonePrimitives,
+    });
+
+    if (element.color) {
+      applyErrorStyling(svg, element.color);
+    }
+
+    return svg;
+  }
+
   const { MemoryModel } = MemoryViz;
   const { kind, id, boxId } = element;
   const kindName = kind.name;
diff --git a/frontend/src/features/canvas/utils/box.types.ts b/frontend/src/features/canvas/utils/box.types.ts
index 03f0f6e..5e02a82 100644
--- a/frontend/src/features/canvas/utils/box.types.ts
+++ b/frontend/src/features/canvas/utils/box.types.ts
@@ -1,4 +1,9 @@
-import { CanvasElement, ID } from "../../shared/types";
+import {
+  CanvasElement,
+  ID,
+  RenderMode,
+  VisualStyle,
+} from "../../shared/types";
 
 /**
  * Core props for the CanvasBox component
@@ -24,6 +29,21 @@ export interface CanvasBoxProps {
 
   /** Actual rendered width of the call stack (x + columnWidth), used for constraints */
   callStackWidth?: number;
+
+  /** Active visual style for rendering */
+  visualStyle?: VisualStyle;
+
+  /** Whether Python Tutor mode should render reference arrows */
+  pythonTutorReferenceArrows?: boolean;
+
+  /** Whether Python Tutor mode should treat primitives as standalone objects */
+  pythonTutorStandalonePrimitives?: boolean;
+
+  /** Lookup map for resolving ID references in alternate renderers */
+  elementsById?: Map<number, CanvasElement>;
+
+  /** Renderer mode for size/layout differences */
+  renderMode?: RenderMode;
 }
 
 /**
diff --git a/frontend/src/features/canvas/utils/pythonTutorReferences.ts b/frontend/src/features/canvas/utils/pythonTutorReferences.ts
new file mode 100644
index 0000000..e986816
--- /dev/null
+++ b/frontend/src/features/canvas/utils/pythonTutorReferences.ts
@@ -0,0 +1,342 @@
+import {
+  BoxTypeName,
+  CanvasElement,
+  PrimitiveKind,
+  RenderMode,
+} from "../../shared/types";
+
+type ReferenceTarget = number | string | null | "_" | undefined;
+
+export interface PythonTutorReferenceDisplay {
+  kind: "blank" | "primitive" | "reference" | "unknown";
+  label: string;
+  targetId: number | null;
+}
+
+interface ResolveInlineDisplayOptions {
+  showPrimitiveReferencesAsObjects?: boolean;
+}
+
+function normalizeNumericId(value: ReferenceTarget): number | null {
+  if (typeof value === "number" && Number.isInteger(value)) {
+    return value;
+  }
+
+  if (typeof value === "string" && /^\d+$/.test(value)) {
+    return parseInt(value, 10);
+  }
+
+  return null;
+}
+
+function createElement(
+  boxId: number,
+  id: number | "_",
+  kind: CanvasElement["kind"]
+): CanvasElement {
+  return {
+    boxId,
+    id,
+    kind,
+    x: 0,
+    y: 0,
+  };
+}
+
+function collectReferencedIds(elements: CanvasElement[]): Set<number> {
+  const referencedIds = new Set<number>();
+
+  const addReference = (target: ReferenceTarget) => {
+    const numericId = normalizeNumericId(target);
+    if (numericId !== null) {
+      referencedIds.add(numericId);
+    }
+  };
+
+  elements.forEach((element) => {
+    switch (element.kind.name) {
+      case "function":
+        element.kind.params.forEach((param) => addReference(param.targetId));
+        break;
+      case "class":
+        element.kind.classVariables.forEach((variable) =>
+          addReference(variable.targetId)
+        );
+        break;
+      case "list":
+      case "tuple":
+      case "set":
+        element.kind.value.forEach((value) => addReference(value));
+        break;
+      case "dict":
+        Object.entries(element.kind.value).forEach(([key, value]) => {
+          addReference(key);
+          addReference(value);
+        });
+        break;
+      default:
+        break;
+    }
+  });
+
+  return referencedIds;
+}
+
+export function getPythonTutorFrameTitle(functionName: string): string {
+  return functionName === "__main__" ? "Global frame" : functionName || "Frame";
+}
+
+export function isPrimitiveElement(
+  element: CanvasElement | null | undefined
+): element is CanvasElement & { kind: PrimitiveKind } {
+  return element?.kind.name === "primitive";
+}
+
+export function formatPrimitiveValue(kind: PrimitiveKind): string {
+  if (kind.type === "NoneType") {
+    return "None";
+  }
+
+  if (kind.type === "bool") {
+    return kind.value === "true" ? "True" : "False";
+  }
+
+  if (kind.type === "str") {
+    return JSON.stringify(kind.value ?? "");
+  }
+
+  return `${kind.value ?? ""}`;
+}
+
+export function resolveInlineDisplay(
+  targetId: ReferenceTarget,
+  elementsById?: Map<number, CanvasElement>,
+  options: ResolveInlineDisplayOptions = {}
+): PythonTutorReferenceDisplay {
+  const numericId = normalizeNumericId(targetId);
+
+  if (numericId === null) {
+    return {
+      kind: "blank",
+      label: "",
+      targetId: null,
+    };
+  }
+
+  const target = elementsById?.get(numericId);
+  if (!target) {
+    return {
+      kind: "unknown",
+      label: `unknown id${numericId}`,
+      targetId: numericId,
+    };
+  }
+
+  if (isPrimitiveElement(target)) {
+    if (options.showPrimitiveReferencesAsObjects) {
+      return {
+        kind: "reference",
+        label: `id${numericId}`,
+        targetId: numericId,
+      };
+    }
+
+    return {
+      kind: "primitive",
+      label: formatPrimitiveValue(target.kind),
+      targetId: numericId,
+    };
+  }
+
+  return {
+    kind: "reference",
+    label: `id${numericId}`,
+    targetId: numericId,
+  };
+}
+
+export function getHiddenPrimitiveIds(elements: CanvasElement[]): Set<number> {
+  const elementsById = createElementsByIdMap(elements);
+  const referencedIds = collectReferencedIds(elements);
+  const hiddenPrimitiveIds = new Set<number>();
+
+  referencedIds.forEach((id) => {
+    if (isPrimitiveElement(elementsById.get(id))) {
+      hiddenPrimitiveIds.add(id);
+    }
+  });
+
+  return hiddenPrimitiveIds;
+}
+
+export function getPythonTutorDisplayType(
+  element: CanvasElement | null | undefined
+): string {
+  if (!element) return "unknown";
+
+  switch (element.kind.name) {
+    case "primitive":
+      return element.kind.type === "NoneType" ? "None" : element.kind.type;
+    case "list":
+    case "tuple":
+    case "set":
+    case "dict":
+      return element.kind.type;
+    case "class":
+      return element.kind.className || "object";
+    case "function":
+      return "function";
+    default:
+      return "unknown";
+  }
+}
+
+export function createElementsByIdMap(
+  elements: CanvasElement[]
+): Map<number, CanvasElement> {
+  return new Map(
+    elements
+      .filter((element): element is CanvasElement & { id: number } =>
+        typeof element.id === "number"
+      )
+      .map((element) => [element.id, element])
+  );
+}
+
+export function createPythonTutorPalettePreview(
+  boxType: BoxTypeName,
+  renderMode: RenderMode = "palette"
+): {
+  element: CanvasElement;
+  elementsById: Map<number, CanvasElement>;
+  renderMode: RenderMode;
+} {
+  const elementsById = new Map<number, CanvasElement>();
+
+  switch (boxType) {
+    case "function":
+      return {
+        element: createElement(1, "_", {
+          name: "function",
+          type: "function",
+          value: null,
+          functionName: "NoFunction",
+          params: [],
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "class":
+      return {
+        element: createElement(2, 1, {
+          name: "class",
+          type: "class",
+          value: null,
+          className: "NoClass",
+          classVariables: [],
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "none":
+      return {
+        element: createElement(3, 1, {
+          name: "primitive",
+          type: "NoneType",
+          value: "None",
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "int":
+      return {
+        element: createElement(4, 1, {
+          name: "primitive",
+          type: "int",
+          value: "0",
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "float":
+      return {
+        element: createElement(5, 1, {
+          name: "primitive",
+          type: "float",
+          value: "0.0",
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "str":
+      return {
+        element: createElement(6, 1, {
+          name: "primitive",
+          type: "str",
+          value: "hello",
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "bool":
+      return {
+        element: createElement(7, 1, {
+          name: "primitive",
+          type: "bool",
+          value: "false",
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "list":
+      return {
+        element: createElement(8, 1, {
+          name: "list",
+          type: "list",
+          value: [],
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "tuple":
+      return {
+        element: createElement(9, 1, {
+          name: "tuple",
+          type: "tuple",
+          value: [],
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "set":
+      return {
+        element: createElement(10, 1, {
+          name: "set",
+          type: "set",
+          value: [],
+        }),
+        elementsById,
+        renderMode,
+      };
+    case "dict":
+      return {
+        element: createElement(11, 1, {
+          name: "dict",
+          type: "dict",
+          value: {},
+        }),
+        elementsById,
+        renderMode,
+      };
+    default:
+      return {
+        element: createElement(12, 1, {
+          name: "primitive",
+          type: "int",
+          value: "0",
+        }),
+        elementsById,
+        renderMode,
+      };
+  }
+}
diff --git a/frontend/src/features/canvas/utils/pythonTutorRenderer.test.ts b/frontend/src/features/canvas/utils/pythonTutorRenderer.test.ts
new file mode 100644
index 0000000..ed4d9ca
--- /dev/null
+++ b/frontend/src/features/canvas/utils/pythonTutorRenderer.test.ts
@@ -0,0 +1,138 @@
+import { CanvasElement } from "../../shared/types";
+import { createPythonTutorBoxRenderer } from "./pythonTutorRenderer";
+
+function createFrameElement(
+  params: Array<{ name: string; targetId: number | null }>
+): CanvasElement {
+  return {
+    boxId: 1,
+    id: "_",
+    x: 0,
+    y: 0,
+    kind: {
+      name: "function",
+      type: "function",
+      value: null,
+      functionName: "__main__",
+      params,
+    },
+  };
+}
+
+describe("createPythonTutorBoxRenderer", () => {
+  it("replaces non-primitive reference labels with source markers in arrow mode", () => {
+    const objectElement: CanvasElement = {
+      boxId: 2,
+      id: 2,
+      x: 0,
+      y: 0,
+      kind: {
+        name: "class",
+        type: "class",
+        value: null,
+        className: "Node",
+        classVariables: [],
+      },
+    };
+    const primitiveElement: CanvasElement = {
+      boxId: 3,
+      id: 3,
+      x: 0,
+      y: 0,
+      kind: {
+        name: "primitive",
+        type: "int",
+        value: "7",
+      },
+    };
+    const elementsById = new Map<number, CanvasElement>([
+      [2, objectElement],
+      [3, primitiveElement],
+    ]);
+    const svg = createPythonTutorBoxRenderer(
+      createFrameElement([
+        { name: "obj", targetId: 2 },
+        { name: "count", targetId: 3 },
+        { name: "missing", targetId: 99 },
+      ]),
+      {
+        elementsById,
+        renderMode: "canvas",
+        showReferenceArrows: true,
+      }
+    );
+
+    expect(svg.textContent).not.toContain("id2");
+    expect(svg.textContent).toContain("7");
+    expect(svg.textContent).toContain("unknown id99");
+    expect(svg.querySelector('[data-ref-source-target-id="2"]')).not.toBeNull();
+    expect(svg.querySelector('[data-ref-source-target-id="3"]')).toBeNull();
+    expect(svg.querySelector('[data-ref-source-target-id="99"]')).toBeNull();
+  });
+
+  it("keeps inline id labels when arrow mode is off", () => {
+    const objectElement: CanvasElement = {
+      boxId: 2,
+      id: 2,
+      x: 0,
+      y: 0,
+      kind: {
+        name: "class",
+        type: "class",
+        value: null,
+        className: "Node",
+        classVariables: [],
+      },
+    };
+    const svg = createPythonTutorBoxRenderer(
+      createFrameElement([{ name: "obj", targetId: 2 }]),
+      {
+        elementsById: new Map([[2, objectElement]]),
+        renderMode: "canvas",
+        showReferenceArrows: false,
+      }
+    );
+
+    expect(svg.textContent).toContain("id2");
+    expect(svg.querySelector('[data-ref-source-target-id="2"]')).toBeNull();
+  });
+
+  it("renders primitive targets as references in standalone mode", () => {
+    const primitiveElement: CanvasElement = {
+      boxId: 3,
+      id: 3,
+      x: 0,
+      y: 0,
+      kind: {
+        name: "primitive",
+        type: "int",
+        value: "7",
+      },
+    };
+    const svg = createPythonTutorBoxRenderer(
+      createFrameElement([{ name: "count", targetId: 3 }]),
+      {
+        elementsById: new Map([[3, primitiveElement]]),
+        renderMode: "canvas",
+        showReferenceArrows: false,
+        showPrimitiveReferencesAsObjects: true,
+      }
+    );
+
+    expect(svg.textContent).toContain("id3");
+    expect(svg.textContent).not.toContain("7");
+
+    const arrowSvg = createPythonTutorBoxRenderer(
+      createFrameElement([{ name: "count", targetId: 3 }]),
+      {
+        elementsById: new Map([[3, primitiveElement]]),
+        renderMode: "canvas",
+        showReferenceArrows: true,
+        showPrimitiveReferencesAsObjects: true,
+      }
+    );
+
+    expect(arrowSvg.textContent).not.toContain("id3");
+    expect(arrowSvg.querySelector('[data-ref-source-target-id="3"]')).not.toBeNull();
+  });
+});
diff --git a/frontend/src/features/canvas/utils/pythonTutorRenderer.ts b/frontend/src/features/canvas/utils/pythonTutorRenderer.ts
new file mode 100644
index 0000000..a37df62
--- /dev/null
+++ b/frontend/src/features/canvas/utils/pythonTutorRenderer.ts
@@ -0,0 +1,762 @@
+import {
+  CanvasElement,
+  ClassKind,
+  DictKind,
+  FunctionKind,
+  ListKind,
+  PrimitiveKind,
+  RenderMode,
+  SetKind,
+  TupleKind,
+} from "../../shared/types";
+import {
+  formatPrimitiveValue,
+  getPythonTutorDisplayType,
+  getPythonTutorFrameTitle,
+  resolveInlineDisplay,
+  PythonTutorReferenceDisplay,
+} from "./pythonTutorReferences";
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+const FONT_FAMILY = 'Consolas, "Courier New", monospace';
+const LABEL_Y = 10;
+const OBJECT_TOP = 20;
+const PADDING_X = 10;
+const ROW_HEIGHT = 30;
+const SLOT_HEIGHT = 28;
+const CELL_HEIGHT = 56;
+const CELL_MIN_WIDTH = 52;
+const VALUE_FONT_SIZE = 16;
+const LABEL_FONT_SIZE = 12;
+const INDEX_FONT_SIZE = 11;
+
+const COLORS = {
+  objectFill: "var(--python-tutor-box-bg)",
+  border: "var(--python-tutor-border)",
+  labelText: "var(--python-tutor-header-text)",
+  bodyText: "var(--python-tutor-body-text)",
+  referenceText: "var(--python-tutor-reference-text)",
+  frameLine: "var(--python-tutor-frame-line)",
+};
+
+interface RenderContext {
+  elementsById?: Map<number, CanvasElement>;
+  renderMode?: RenderMode;
+  showReferenceArrows?: boolean;
+  showPrimitiveReferencesAsObjects?: boolean;
+}
+
+interface KeyValueRow {
+  left: string;
+  right: PythonTutorReferenceDisplay;
+}
+
+function resolveDisplay(
+  targetId: number | string | null | "_" | undefined,
+  context: RenderContext
+): PythonTutorReferenceDisplay {
+  return resolveInlineDisplay(targetId, context.elementsById, {
+    showPrimitiveReferencesAsObjects:
+      context.showPrimitiveReferencesAsObjects,
+  });
+}
+
+function createSvg(width: number, height: number): SVGSVGElement {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("xmlns", SVG_NS);
+  svg.setAttribute("width", `${width}`);
+  svg.setAttribute("height", `${height}`);
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  svg.style.overflow = "visible";
+  svg.style.display = "block";
+  return svg;
+}
+
+function createNode<T extends keyof SVGElementTagNameMap>(
+  tag: T
+): SVGElementTagNameMap[T] {
+  return document.createElementNS(SVG_NS, tag);
+}
+
+function appendRect(
+  svg: SVGSVGElement,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  options: {
+    fill: string;
+    stroke?: string;
+    strokeWidth?: number;
+    rx?: number;
+    ry?: number;
+    opacity?: number;
+  }
+): SVGRectElement {
+  const rect = createNode("rect");
+  rect.setAttribute("x", `${x}`);
+  rect.setAttribute("y", `${y}`);
+  rect.setAttribute("width", `${width}`);
+  rect.setAttribute("height", `${height}`);
+  rect.setAttribute("rx", `${options.rx ?? 1}`);
+  rect.setAttribute("ry", `${options.ry ?? 1}`);
+  rect.style.fill = options.fill;
+  rect.style.stroke = options.stroke ?? "none";
+  rect.style.strokeWidth = `${options.strokeWidth ?? 0}`;
+  if (typeof options.opacity === "number") {
+    rect.style.opacity = `${options.opacity}`;
+  }
+  svg.appendChild(rect);
+  return rect;
+}
+
+function appendLine(
+  svg: SVGSVGElement,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  color: string = COLORS.border,
+  strokeWidth: number = 1
+): void {
+  const line = createNode("line");
+  line.setAttribute("x1", `${x1}`);
+  line.setAttribute("y1", `${y1}`);
+  line.setAttribute("x2", `${x2}`);
+  line.setAttribute("y2", `${y2}`);
+  line.style.stroke = color;
+  line.style.strokeWidth = `${strokeWidth}`;
+  svg.appendChild(line);
+}
+
+function appendText(
+  svg: SVGSVGElement,
+  text: string,
+  x: number,
+  y: number,
+  options: {
+    fill?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    anchor?: "start" | "middle" | "end";
+  } = {}
+): SVGTextElement {
+  const node = createNode("text");
+  node.textContent = text;
+  node.setAttribute("x", `${x}`);
+  node.setAttribute("y", `${y}`);
+  node.setAttribute("text-anchor", options.anchor ?? "start");
+  node.setAttribute("dominant-baseline", "middle");
+  node.style.fontFamily = FONT_FAMILY;
+  node.style.fontSize = `${options.fontSize ?? 14}px`;
+  node.style.fontWeight = options.fontWeight ?? "400";
+  node.style.fill = options.fill ?? COLORS.bodyText;
+  svg.appendChild(node);
+  return node;
+}
+
+function appendBounds(svg: SVGSVGElement, width: number, height: number): void {
+  appendRect(svg, 0, 0, width, height, {
+    fill: "transparent",
+    strokeWidth: 0,
+    rx: 0,
+    ry: 0,
+    opacity: 0,
+  });
+}
+
+function appendReferenceHitRect(
+  svg: SVGSVGElement,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  targetId: number | null
+): void {
+  if (targetId === null) return;
+
+  const rect = appendRect(svg, x, y, width, height, {
+    fill: "transparent",
+    strokeWidth: 0,
+    rx: 0,
+    ry: 0,
+    opacity: 0,
+  });
+  rect.setAttribute("data-ref-target-id", `${targetId}`);
+}
+
+function measureText(text: string, fontSize: number = 14): number {
+  return text.length * fontSize * 0.61;
+}
+
+function getReferenceColor(display: PythonTutorReferenceDisplay): string {
+  return display.kind === "reference" || display.kind === "unknown"
+    ? COLORS.referenceText
+    : COLORS.bodyText;
+}
+
+function isClickableReference(display: PythonTutorReferenceDisplay): boolean {
+  return display.kind === "reference";
+}
+
+function shouldRenderReferenceSourceMarker(
+  display: PythonTutorReferenceDisplay,
+  context: RenderContext
+): boolean {
+  return Boolean(
+    context.showReferenceArrows &&
+      context.renderMode === "canvas" &&
+      display.kind === "reference" &&
+      display.targetId !== null
+  );
+}
+
+function getRenderedDisplayLabel(
+  display: PythonTutorReferenceDisplay,
+  context: RenderContext
+): string {
+  return shouldRenderReferenceSourceMarker(display, context) ? "" : display.label;
+}
+
+function appendReferenceSourceMarker(
+  svg: SVGSVGElement,
+  x: number,
+  y: number,
+  targetId: number | null
+): void {
+  if (targetId === null) return;
+
+  const marker = createNode("circle");
+  marker.setAttribute("cx", `${x}`);
+  marker.setAttribute("cy", `${y}`);
+  marker.setAttribute("r", "4");
+  marker.style.fill = COLORS.referenceText;
+  marker.setAttribute("data-ref-source-target-id", `${targetId}`);
+  svg.appendChild(marker);
+}
+
+function appendDisplayValue(
+  svg: SVGSVGElement,
+  display: PythonTutorReferenceDisplay,
+  context: RenderContext,
+  options: {
+    x: number;
+    y: number;
+    fontSize: number;
+    anchor?: "start" | "middle" | "end";
+    markerX?: number;
+    markerY?: number;
+    hitRect?: {
+      x: number;
+      y: number;
+      width: number;
+      height: number;
+    };
+  }
+): void {
+  const showMarker = shouldRenderReferenceSourceMarker(display, context);
+
+  if (showMarker) {
+    appendReferenceSourceMarker(
+      svg,
+      options.markerX ?? options.x,
+      options.markerY ?? options.y,
+      display.targetId
+    );
+  } else if (display.label) {
+    appendText(svg, display.label, options.x, options.y, {
+      anchor: options.anchor,
+      fill: getReferenceColor(display),
+      fontSize: options.fontSize,
+    });
+  }
+
+  if (options.hitRect && isClickableReference(display)) {
+    appendReferenceHitRect(
+      svg,
+      options.hitRect.x,
+      options.hitRect.y,
+      options.hitRect.width,
+      options.hitRect.height,
+      display.targetId
+    );
+  }
+}
+
+function getIdLabel(element: CanvasElement): string {
+  return typeof element.id === "number" ? `id${element.id}` : "";
+}
+
+function getObjectLabel(title: string, idLabel: string): string {
+  return idLabel ? `${title} ${idLabel}` : title;
+}
+
+function appendObjectLabel(
+  svg: SVGSVGElement,
+  title: string,
+  idLabel: string
+): void {
+  appendText(svg, getObjectLabel(title, idLabel), 2, LABEL_Y, {
+    fill: COLORS.labelText,
+    fontSize: LABEL_FONT_SIZE,
+  });
+}
+
+function appendObjectShell(
+  svg: SVGSVGElement,
+  width: number,
+  height: number
+): void {
+  appendRect(svg, 0, OBJECT_TOP, width, height, {
+    fill: COLORS.objectFill,
+    stroke: COLORS.border,
+    strokeWidth: 1.25,
+    rx: 1,
+    ry: 1,
+  });
+}
+
+function appendFrameBracket(
+  svg: SVGSVGElement,
+  x: number,
+  y: number,
+  height: number
+): void {
+  appendLine(svg, x, y, x, y + height, COLORS.frameLine, 1);
+  appendLine(svg, x, y, x + 10, y, COLORS.frameLine, 1);
+  appendLine(svg, x, y + height, x + 10, y + height, COLORS.frameLine, 1);
+}
+
+function appendFrameSlot(
+  svg: SVGSVGElement,
+  display: PythonTutorReferenceDisplay,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  context: RenderContext
+): void {
+  appendFrameBracket(svg, x, y, height);
+
+  if (!display.label && !shouldRenderReferenceSourceMarker(display, context)) {
+    return;
+  }
+
+  const textWidth = measureText(
+    getRenderedDisplayLabel(display, context),
+    VALUE_FONT_SIZE
+  );
+
+  appendDisplayValue(svg, display, context, {
+    x: x + 16,
+    y: y + height / 2,
+    fontSize: VALUE_FONT_SIZE,
+    markerX: x + 20,
+    markerY: y + height / 2,
+    hitRect: {
+      x,
+      y: y - 2,
+      width: Math.max(width, textWidth + 18),
+      height: height + 4,
+    },
+  });
+}
+
+function renderFrameBox(
+  element: CanvasElement & { kind: FunctionKind },
+  context: RenderContext
+): SVGSVGElement {
+  const rows = (element.kind.params || []).map((param) => ({
+    left: param.name,
+    right: resolveDisplay(param.targetId, context),
+  }));
+  const bodyRows =
+    rows.length > 0
+      ? rows
+      : [{ left: "", right: resolveDisplay(null, context) }];
+  const title = getPythonTutorFrameTitle(element.kind.functionName);
+  const leftWidth = Math.max(
+    44,
+    ...bodyRows.map((row) => measureText(row.left || "", 17))
+  );
+  const rightWidth = Math.max(
+    46,
+    ...bodyRows.map((row) =>
+      measureText(getRenderedDisplayLabel(row.right, context), VALUE_FONT_SIZE)
+    )
+  );
+  const slotWidth = Math.max(44, rightWidth + 18);
+  const width = Math.max(
+    context.renderMode === "palette" ? 172 : 150,
+    measureText(title, 18) + 8,
+    leftWidth + slotWidth + 34
+  );
+  const height = 28 + bodyRows.length * 40;
+  const svg = createSvg(width, height);
+
+  appendBounds(svg, width, height);
+  appendText(svg, title, 0, 14, {
+    fill: COLORS.bodyText,
+    fontSize: 18,
+  });
+
+  bodyRows.forEach((row, index) => {
+    const rowTop = 28 + index * 40;
+    const slotX = leftWidth + 18;
+
+    appendText(svg, row.left, 0, rowTop + 18, {
+      fill: COLORS.bodyText,
+      fontSize: 16,
+    });
+    appendFrameSlot(
+      svg,
+      row.right,
+      slotX,
+      rowTop + 4,
+      slotWidth,
+      SLOT_HEIGHT,
+      context
+    );
+  });
+
+  return svg;
+}
+
+function renderPrimitiveBox(element: CanvasElement): SVGSVGElement {
+  const primitiveKind = element.kind as PrimitiveKind;
+  const title = getPythonTutorDisplayType(element);
+  const idLabel = getIdLabel(element);
+  const label = getObjectLabel(title, idLabel);
+  const value = formatPrimitiveValue(primitiveKind);
+  const width = Math.max(
+    84,
+    measureText(label, LABEL_FONT_SIZE) + 8,
+    measureText(value, 18) + 26
+  );
+  const height = OBJECT_TOP + 44;
+  const svg = createSvg(width, height);
+
+  appendBounds(svg, width, height);
+  appendObjectLabel(svg, title, idLabel);
+  appendObjectShell(svg, width, 44);
+  appendText(svg, value, width / 2, OBJECT_TOP + 22, {
+    anchor: "middle",
+    fill: COLORS.bodyText,
+    fontSize: 18,
+  });
+
+  return svg;
+}
+
+function renderSequenceBox(
+  element: CanvasElement & { kind: ListKind | TupleKind | SetKind },
+  context: RenderContext
+): SVGSVGElement {
+  const values = Array.isArray(element.kind.value) ? element.kind.value : [];
+  const displays = values.map((value) =>
+    resolveDisplay(value, context)
+  );
+  const label = getObjectLabel(
+    getPythonTutorDisplayType(element),
+    getIdLabel(element)
+  );
+  const hasIndexes =
+    element.kind.name === "list" || element.kind.name === "tuple";
+  const cellWidths = displays.map((display) =>
+    Math.max(
+      CELL_MIN_WIDTH,
+      measureText(getRenderedDisplayLabel(display, context), VALUE_FONT_SIZE) + 22
+    )
+  );
+  const bodyWidth =
+    cellWidths.length > 0
+      ? cellWidths.reduce((sum, cellWidth) => sum + cellWidth, 0)
+      : 72;
+  const width = Math.max(
+    context.renderMode === "palette" ? 150 : 130,
+    bodyWidth,
+    measureText(label, LABEL_FONT_SIZE) + 8
+  );
+  const height = OBJECT_TOP + CELL_HEIGHT;
+  const svg = createSvg(width, height);
+
+  appendBounds(svg, width, height);
+  appendObjectLabel(svg, getPythonTutorDisplayType(element), getIdLabel(element));
+  appendObjectShell(svg, width, CELL_HEIGHT);
+
+  if (displays.length === 0) {
+    return svg;
+  }
+
+  let currentX = 0;
+  displays.forEach((display, index) => {
+    const cellWidth = cellWidths[index];
+
+    if (index > 0) {
+      appendLine(svg, currentX, OBJECT_TOP, currentX, OBJECT_TOP + CELL_HEIGHT);
+    }
+
+    if (hasIndexes) {
+      appendText(svg, `${index}`, currentX + 7, OBJECT_TOP + 10, {
+        fill: COLORS.labelText,
+        fontSize: INDEX_FONT_SIZE,
+      });
+    }
+
+    appendDisplayValue(svg, display, context, {
+      x: currentX + cellWidth / 2,
+      y: OBJECT_TOP + 32,
+      anchor: "middle",
+      fontSize: VALUE_FONT_SIZE,
+      markerX: currentX + cellWidth / 2,
+      markerY: OBJECT_TOP + 32,
+      hitRect: {
+        x: currentX,
+        y: OBJECT_TOP,
+        width: cellWidth,
+        height: CELL_HEIGHT,
+      },
+    });
+
+    currentX += cellWidth;
+  });
+
+  return svg;
+}
+
+function renderDictBox(
+  element: CanvasElement & { kind: DictKind },
+  context: RenderContext
+): SVGSVGElement {
+  const rows = Object.entries(element.kind.value || {}).map(([key, value]) => ({
+    left: resolveDisplay(key, context),
+    right: resolveDisplay(value, context),
+  }));
+  const bodyRows =
+    rows.length > 0
+      ? rows
+      : [
+          {
+            left: resolveDisplay(null, context),
+            right: resolveDisplay(null, context),
+          },
+        ];
+  const label = getObjectLabel("dict", getIdLabel(element));
+  const leftWidth = Math.max(
+    50,
+    ...bodyRows.map((row) =>
+      measureText(getRenderedDisplayLabel(row.left, context), 14) + 12
+    )
+  );
+  const rightWidth = Math.max(
+    50,
+    ...bodyRows.map((row) =>
+      measureText(getRenderedDisplayLabel(row.right, context), 14) + 12
+    )
+  );
+  const dividerGap = 12;
+  const width = Math.max(
+    context.renderMode === "palette" ? 156 : 136,
+    leftWidth + rightWidth + dividerGap,
+    measureText(label, LABEL_FONT_SIZE) + 8
+  );
+  const height = OBJECT_TOP + Math.max(1, bodyRows.length) * ROW_HEIGHT;
+  const leftColumnWidth = Math.max(50, (width - dividerGap) / 2);
+  const rightStart = leftColumnWidth + dividerGap;
+  const rightColumnWidth = width - rightStart;
+  const dividerX = leftColumnWidth + dividerGap / 2;
+  const svg = createSvg(width, height);
+
+  appendBounds(svg, width, height);
+  appendObjectLabel(svg, "dict", getIdLabel(element));
+  appendObjectShell(svg, width, Math.max(1, bodyRows.length) * ROW_HEIGHT);
+  appendLine(svg, dividerX, OBJECT_TOP, dividerX, height);
+
+  bodyRows.forEach((row, index) => {
+    const rowTop = OBJECT_TOP + index * ROW_HEIGHT;
+    if (index > 0) {
+      appendLine(svg, 0, rowTop, width, rowTop);
+    }
+
+    appendDisplayValue(svg, row.left, context, {
+      x: leftColumnWidth / 2,
+      y: rowTop + ROW_HEIGHT / 2,
+      anchor: "middle",
+      fontSize: 14,
+      markerX: leftColumnWidth / 2,
+      markerY: rowTop + ROW_HEIGHT / 2,
+      hitRect: {
+        x: 0,
+        y: rowTop,
+        width: leftColumnWidth,
+        height: ROW_HEIGHT,
+      },
+    });
+    appendDisplayValue(svg, row.right, context, {
+      x: rightStart + rightColumnWidth / 2,
+      y: rowTop + ROW_HEIGHT / 2,
+      anchor: "middle",
+      fontSize: 14,
+      markerX: rightStart + rightColumnWidth / 2,
+      markerY: rowTop + ROW_HEIGHT / 2,
+      hitRect: {
+        x: rightStart,
+        y: rowTop,
+        width: rightColumnWidth,
+        height: ROW_HEIGHT,
+      },
+    });
+  });
+
+  return svg;
+}
+
+function renderKeyValueObjectBox(
+  title: string,
+  idLabel: string,
+  rows: KeyValueRow[],
+  context: RenderContext
+): SVGSVGElement {
+  const bodyRows =
+    rows.length > 0
+      ? rows
+      : [{ left: "", right: resolveDisplay(null, context) }];
+  const label = getObjectLabel(title, idLabel);
+  const leftWidth = Math.max(
+    52,
+    ...bodyRows.map((row) => measureText(row.left, 14) + 10)
+  );
+  const rightWidth = Math.max(
+    58,
+    ...bodyRows.map((row) =>
+      measureText(getRenderedDisplayLabel(row.right, context), 14) + 14
+    )
+  );
+  const width = Math.max(
+    context.renderMode === "palette" ? 170 : 144,
+    leftWidth + rightWidth + PADDING_X * 2,
+    measureText(label, LABEL_FONT_SIZE) + 8
+  );
+  const height = OBJECT_TOP + Math.max(1, bodyRows.length) * ROW_HEIGHT;
+  const dividerX = Math.max(PADDING_X + leftWidth, width * 0.45);
+  const svg = createSvg(width, height);
+
+  appendBounds(svg, width, height);
+  appendObjectLabel(svg, title, idLabel);
+  appendObjectShell(svg, width, Math.max(1, bodyRows.length) * ROW_HEIGHT);
+  appendLine(svg, dividerX, OBJECT_TOP, dividerX, height);
+
+  bodyRows.forEach((row, index) => {
+    const rowTop = OBJECT_TOP + index * ROW_HEIGHT;
+    if (index > 0) {
+      appendLine(svg, 0, rowTop, width, rowTop);
+    }
+
+    appendText(svg, row.left, PADDING_X, rowTop + ROW_HEIGHT / 2, {
+      fill: COLORS.bodyText,
+      fontSize: 14,
+    });
+    appendDisplayValue(svg, row.right, context, {
+      x: dividerX + 8,
+      y: rowTop + ROW_HEIGHT / 2,
+      fontSize: 14,
+      markerX: dividerX + (width - dividerX) / 2,
+      markerY: rowTop + ROW_HEIGHT / 2,
+      hitRect: {
+        x: dividerX,
+        y: rowTop,
+        width: width - dividerX,
+        height: ROW_HEIGHT,
+      },
+    });
+  });
+
+  return svg;
+}
+
+function renderClassBox(
+  element: CanvasElement & { kind: ClassKind },
+  context: RenderContext
+): SVGSVGElement {
+  const rows = (element.kind.classVariables || []).map((variable) => ({
+    left: variable.name,
+    right: resolveDisplay(variable.targetId, context),
+  }));
+
+  return renderKeyValueObjectBox(
+    element.kind.className || "object",
+    getIdLabel(element),
+    rows,
+    context
+  );
+}
+
+function getFunctionSignature(
+  element: CanvasElement & { kind: FunctionKind }
+): string {
+  const name = element.kind.functionName || "function";
+  const params = (element.kind.params || [])
+    .map((param) => param.name || "_")
+    .join(", ");
+  return `${name}(${params})`;
+}
+
+function renderFunctionObjectBox(
+  element: CanvasElement & { kind: FunctionKind },
+  context: RenderContext
+): SVGSVGElement {
+  const label = getObjectLabel("function", getIdLabel(element));
+  const signature = getFunctionSignature(element);
+  const width = Math.max(
+    context.renderMode === "palette" ? 150 : 132,
+    measureText(label, LABEL_FONT_SIZE) + 8,
+    measureText(signature, 18) + 8
+  );
+  const height = OBJECT_TOP + 24;
+  const svg = createSvg(width, height);
+
+  appendBounds(svg, width, height);
+  appendText(svg, label, 2, LABEL_Y, {
+    fill: COLORS.labelText,
+    fontSize: LABEL_FONT_SIZE,
+  });
+  appendText(svg, signature, 0, OBJECT_TOP + 14, {
+    fill: COLORS.bodyText,
+    fontSize: 18,
+  });
+
+  return svg;
+}
+
+export function createPythonTutorBoxRenderer(
+  element: CanvasElement,
+  context: RenderContext = {}
+): SVGSVGElement {
+  switch (element.kind.name) {
+    case "primitive":
+      return renderPrimitiveBox(element);
+    case "function":
+      return typeof element.id === "number"
+        ? renderFunctionObjectBox(
+            element as CanvasElement & { kind: FunctionKind },
+            context
+          )
+        : renderFrameBox(
+            element as CanvasElement & { kind: FunctionKind },
+            context
+          );
+    case "list":
+    case "tuple":
+    case "set":
+      return renderSequenceBox(
+        element as CanvasElement & { kind: ListKind | TupleKind | SetKind },
+        context
+      );
+    case "dict":
+      return renderDictBox(element as CanvasElement & { kind: DictKind }, context);
+    case "class":
+      return renderClassBox(element as CanvasElement & { kind: ClassKind }, context);
+    default:
+      return renderPrimitiveBox(element);
+  }
+}
diff --git a/frontend/src/features/canvasControls/CanvasControls.module.css b/frontend/src/features/canvasControls/CanvasControls.module.css
index 9c11656..723ece9 100644
--- a/frontend/src/features/canvasControls/CanvasControls.module.css
+++ b/frontend/src/features/canvasControls/CanvasControls.module.css
@@ -135,6 +135,11 @@
   min-width: 0;
 }
 
+.nestedControlItem {
+  padding-left: 20px;
+  padding-top: 8px;
+}
+
 .controlLabel {
   font-size: 0.9rem;
   font-weight: 500;
diff --git a/frontend/src/features/canvasControls/CanvasControls.test.tsx b/frontend/src/features/canvasControls/CanvasControls.test.tsx
new file mode 100644
index 0000000..ab1e212
--- /dev/null
+++ b/frontend/src/features/canvasControls/CanvasControls.test.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import CanvasControls from "./CanvasControls";
+import { ThemeProvider } from "../../contexts/ThemeContext";
+
+function renderControls(
+  overrides: Partial<React.ComponentProps<typeof CanvasControls>> = {}
+) {
+  return render(
+    <ThemeProvider>
+      <CanvasControls
+        visualStyle="memoryviz"
+        onVisualStyleChange={jest.fn()}
+        pythonTutorReferenceArrows={false}
+        onPythonTutorReferenceArrowsChange={jest.fn()}
+        pythonTutorStandalonePrimitives={false}
+        onPythonTutorStandalonePrimitivesChange={jest.fn()}
+        {...overrides}
+      />
+    </ThemeProvider>
+  );
+}
+
+function openSettingsTab() {
+  fireEvent.click(screen.getByRole("button", { name: /settings/i }));
+}
+
+describe("CanvasControls", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("shows the reference arrows toggle only in Python Tutor mode", () => {
+    const { rerender } = renderControls();
+    openSettingsTab();
+
+    expect(screen.queryByText("Reference Arrows")).not.toBeInTheDocument();
+    expect(screen.queryByText("Standalone Primitives")).not.toBeInTheDocument();
+
+    rerender(
+      <ThemeProvider>
+        <CanvasControls
+          visualStyle="pythonTutor"
+          onVisualStyleChange={jest.fn()}
+          pythonTutorReferenceArrows={false}
+          onPythonTutorReferenceArrowsChange={jest.fn()}
+          pythonTutorStandalonePrimitives={false}
+          onPythonTutorStandalonePrimitivesChange={jest.fn()}
+        />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText("Reference Arrows")).toBeInTheDocument();
+    expect(screen.getByText("Standalone Primitives")).toBeInTheDocument();
+  });
+
+  it("toggles the standalone primitives switch when enabled in Python Tutor mode", () => {
+    const handleStandalonePrimitivesChange = jest.fn();
+
+    renderControls({
+      visualStyle: "pythonTutor",
+      pythonTutorStandalonePrimitives: false,
+      onPythonTutorStandalonePrimitivesChange:
+        handleStandalonePrimitivesChange,
+    });
+    openSettingsTab();
+
+    const controlRow = screen.getByText("Standalone Primitives").closest("div");
+    expect(controlRow).not.toBeNull();
+
+    const toggle = within(controlRow as HTMLElement).getByRole("switch");
+    fireEvent.click(toggle);
+
+    expect(handleStandalonePrimitivesChange).toHaveBeenCalledWith(true);
+  });
+
+  it("toggles the reference arrows switch when enabled in Python Tutor mode", () => {
+    const handleReferenceArrowChange = jest.fn();
+
+    renderControls({
+      visualStyle: "pythonTutor",
+      pythonTutorReferenceArrows: false,
+      onPythonTutorReferenceArrowsChange: handleReferenceArrowChange,
+    });
+    openSettingsTab();
+
+    const controlRow = screen.getByText("Reference Arrows").closest("div");
+    expect(controlRow).not.toBeNull();
+
+    const toggle = within(controlRow as HTMLElement).getByRole("switch");
+    fireEvent.click(toggle);
+
+    expect(handleReferenceArrowChange).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/frontend/src/features/canvasControls/CanvasControls.tsx b/frontend/src/features/canvasControls/CanvasControls.tsx
index 1e9e317..00b3e5d 100644
--- a/frontend/src/features/canvasControls/CanvasControls.tsx
+++ b/frontend/src/features/canvasControls/CanvasControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from "react";
-import { CanvasElement } from "../shared/types";
+import { CanvasElement, VisualStyle } from "../shared/types";
 import { ClearCanvasButton, DownloadButton, ZoomControls, UndoButton, RedoButton, FeedbackButton } from "../canvas/components/CanvasButtons";
 import { useTheme } from "../../contexts/ThemeContext";
 import styles from "./CanvasControls.module.css";
@@ -22,6 +22,12 @@ interface CanvasControlsProps {
   onScaleChange?: (scale: number) => void;
   editorScale?: number;
   onEditorScaleChange?: (scale: number) => void;
+  visualStyle?: VisualStyle;
+  onVisualStyleChange?: (style: VisualStyle) => void;
+  pythonTutorReferenceArrows?: boolean;
+  onPythonTutorReferenceArrowsChange?: (value: boolean) => void;
+  pythonTutorStandalonePrimitives?: boolean;
+  onPythonTutorStandalonePrimitivesChange?: (value: boolean) => void;
   fontScale?: number;
   onFontScaleChange?: (delta: number) => void;
 }
@@ -63,6 +69,12 @@ export default function CanvasControls({
   onScaleChange,
   editorScale = 1,
   onEditorScaleChange,
+  visualStyle = "memoryviz",
+  onVisualStyleChange,
+  pythonTutorReferenceArrows = false,
+  onPythonTutorReferenceArrowsChange,
+  pythonTutorStandalonePrimitives = false,
+  onPythonTutorStandalonePrimitivesChange,
   fontScale = 1,
   onFontScaleChange,
 }: CanvasControlsProps) {
@@ -209,6 +221,97 @@ export default function CanvasControls({
               </button>
             </div>
 
+            {onVisualStyleChange && (
+              <div className={styles.controlItem}>
+                <label
+                  className={styles.controlLabel}
+                  htmlFor="python-tutor-style-toggle"
+                >
+                  Python Tutor Style
+                </label>
+                <button
+                  id="python-tutor-style-toggle"
+                  type="button"
+                  role="switch"
+                  aria-checked={visualStyle === "pythonTutor"}
+                  onClick={() =>
+                    onVisualStyleChange(
+                      visualStyle === "pythonTutor"
+                        ? "memoryviz"
+                        : "pythonTutor"
+                    )
+                  }
+                  className={`${styles.toggle} ${
+                    visualStyle === "pythonTutor" ? styles.toggleActive : ""
+                  }`}
+                >
+                  <span className={styles.toggleThumb} />
+                </button>
+              </div>
+            )}
+
+            {visualStyle === "pythonTutor" &&
+              onPythonTutorStandalonePrimitivesChange && (
+                <div
+                  className={`${styles.controlItem} ${styles.nestedControlItem}`}
+                >
+                  <label
+                    className={styles.controlLabel}
+                    htmlFor="python-tutor-standalone-primitives-toggle"
+                  >
+                    Standalone Primitives
+                  </label>
+                  <button
+                    id="python-tutor-standalone-primitives-toggle"
+                    type="button"
+                    role="switch"
+                    aria-checked={pythonTutorStandalonePrimitives}
+                    onClick={() =>
+                      onPythonTutorStandalonePrimitivesChange(
+                        !pythonTutorStandalonePrimitives
+                      )
+                    }
+                    className={`${styles.toggle} ${
+                      pythonTutorStandalonePrimitives
+                        ? styles.toggleActive
+                        : ""
+                    }`}
+                  >
+                    <span className={styles.toggleThumb} />
+                  </button>
+                </div>
+              )}
+
+            {visualStyle === "pythonTutor" &&
+              onPythonTutorReferenceArrowsChange && (
+                <div
+                  className={`${styles.controlItem} ${styles.nestedControlItem}`}
+                >
+                  <label
+                    className={styles.controlLabel}
+                    htmlFor="python-tutor-reference-arrows-toggle"
+                  >
+                    Reference Arrows
+                  </label>
+                  <button
+                    id="python-tutor-reference-arrows-toggle"
+                    type="button"
+                    role="switch"
+                    aria-checked={pythonTutorReferenceArrows}
+                    onClick={() =>
+                      onPythonTutorReferenceArrowsChange(
+                        !pythonTutorReferenceArrows
+                      )
+                    }
+                    className={`${styles.toggle} ${
+                      pythonTutorReferenceArrows ? styles.toggleActive : ""
+                    }`}
+                  >
+                    <span className={styles.toggleThumb} />
+                  </button>
+                </div>
+              )}
+
             <div className={`${styles.buttonWrapper} ${styles.feedbackWrapper}`}>
               <FeedbackButton />
             </div>
diff --git a/frontend/src/features/editors/Editor.module.css b/frontend/src/features/editors/Editor.module.css
index 10a152b..136120a 100644
--- a/frontend/src/features/editors/Editor.module.css
+++ b/frontend/src/features/editors/Editor.module.css
@@ -174,7 +174,9 @@
 
 .classNameInput,
 .functionNameInput,
-.primitiveValueContainer {
+.primitiveValueContainer,
+.inlineTargetModeSelect,
+.inlineTargetSelect {
   width: 100%;
   font-size: 0.95rem;
   padding: 8px 12px;
@@ -188,12 +190,28 @@
 
 .classNameInput:focus,
 .functionNameInput:focus,
-.primitiveValueContainer:focus {
+.primitiveValueContainer:focus,
+.inlineTargetModeSelect:focus,
+.inlineTargetSelect:focus {
   outline: 2px solid var(--border-focus);
   outline-offset: 1px;
   border-color: transparent;
 }
 
+.inlineTargetEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 220px;
+}
+
+.inlineTargetBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
 .variableNameBox {
   flex: 1;
   font-size: 0.95rem;
diff --git a/frontend/src/features/editors/boxEditor/BoxEditor.tsx b/frontend/src/features/editors/boxEditor/BoxEditor.tsx
index 30c19ff..8f96fca 100644
--- a/frontend/src/features/editors/boxEditor/BoxEditor.tsx
+++ b/frontend/src/features/editors/boxEditor/BoxEditor.tsx
@@ -43,6 +43,9 @@ const BoxEditorModule = ({
   canManageFunctions = sandbox,
   elements = [],
   questionFunctionNames,
+  visualStyle = "memoryviz",
+  pythonTutorStandalonePrimitives = false,
+  onElementsChange,
 }: BoxEditorType) => {
   // Shared hover state for remove button
   const { hoverRemove, setHoverRemove } = useGlobalStates();
@@ -87,6 +90,10 @@ const BoxEditorModule = ({
   const collectionData =
     metadata.kind.name === "dict" ? collectionPairs : collectionItems;
 
+  const commitElementKind = (kind: typeof metadata.kind) => {
+    onSave(ownId, kind, invalidated);
+  };
+
   // Hook to sync the module and apply save logic when clicking outside
   useModule(
     onSave,
@@ -138,12 +145,14 @@ const BoxEditorModule = ({
           dataType={dataType}
           value={contentValue}
           setValue={setContentValue}
+          functionName={functionName}
           functionParams={functionParams}
           setFunctionParams={setFunctionParams}
           collectionItems={collectionItems}
           setCollectionItems={setCollectionItems}
           collectionPairs={collectionPairs}
           setCollectionPairs={setCollectionPairs}
+          className={ownClassName}
           ownClassVariables={ownClassVariables}
           setOwnClassVariables={setOwnClassVariables}
           ids={ids}
@@ -151,6 +160,10 @@ const BoxEditorModule = ({
           removeId={removeId}
           sandbox={sandbox}
           elements={elements}
+          visualStyle={visualStyle}
+          pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+          onCommitKind={commitElementKind}
+          onElementsChange={onElementsChange}
         />
       </div>
 
diff --git a/frontend/src/features/editors/boxEditor/Content.tsx b/frontend/src/features/editors/boxEditor/Content.tsx
index 8e53215..3af9e01 100644
--- a/frontend/src/features/editors/boxEditor/Content.tsx
+++ b/frontend/src/features/editors/boxEditor/Content.tsx
@@ -2,7 +2,8 @@ import PrimitiveContent from "./primitiveBoxes/PrimitiveContent";
 import FunctionContent from "./functionBoxes/FunctionContent";
 import CollectionContent from "./collectionBoxes/CollectionContent";
 import ClassContent from "./classBoxes/ClassContent";
-import { ID } from "../../shared/types";
+import type { Dispatch, SetStateAction } from "react";
+import { BoxType, ID, VisualStyle } from "../../shared/types";
 
 /**
  * Props for the Content component.
@@ -12,12 +13,14 @@ interface Props {
   dataType: any; // The selected data type (used for primitive types)
   value: string; // The value for primitive types
   setValue: any; // Setter for primitive value
+  functionName: string;
   functionParams: any; // Parameter list for function boxes
   setFunctionParams: any; // Setter for function parameters
   collectionItems: any; // List/set/tuple items
   setCollectionItems: any; // Setter for collection items
   collectionPairs: any; // Key-value pairs for dicts
   setCollectionPairs: any; // Setter for dict pairs
+  className: string;
   ids: any;
   addId: (id: ID) => void;
   removeId: (id: ID) => void;
@@ -25,6 +28,10 @@ interface Props {
   setOwnClassVariables: any;
   sandbox: boolean;
   elements?: any[]; // All canvas elements for ID usage tracking
+  visualStyle?: VisualStyle;
+  pythonTutorStandalonePrimitives?: boolean;
+  onCommitKind?: (kind: BoxType) => void;
+  onElementsChange?: Dispatch<SetStateAction<any[]>>;
 }
 
 /**
@@ -41,12 +48,14 @@ const Content = ({
   dataType,
   value,
   setValue,
+  functionName,
   functionParams,
   setFunctionParams,
   collectionItems,
   setCollectionItems,
   collectionPairs,
   setCollectionPairs,
+  className,
   ownClassVariables,
   setOwnClassVariables,
   ids,
@@ -54,6 +63,10 @@ const Content = ({
   removeId,
   sandbox,
   elements = [],
+  visualStyle = "memoryviz",
+  pythonTutorStandalonePrimitives = false,
+  onCommitKind,
+  onElementsChange,
 }: Props) => {
   const kind = metadata.kind.name;
 
@@ -68,12 +81,18 @@ const Content = ({
       <FunctionContent
         functionParams={functionParams}
         setParams={setFunctionParams}
+        functionName={functionName}
         ids={ids}
         addId={addId}
         removeId={removeId}
         sandbox={sandbox}
-        validationErrors={metadata.validationErrors}
+        validationErrors={metadata.errors}
         elements={elements}
+        ownerElement={metadata}
+        visualStyle={visualStyle}
+        pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+        onCommitKind={onCommitKind}
+        onElementsChange={onElementsChange}
       />
     );
   }
@@ -88,8 +107,13 @@ const Content = ({
         addId={addId}
         removeId={removeId}
         sandbox={sandbox}
-        validationErrors={metadata.validationErrors}
+        validationErrors={metadata.errors}
         elements={elements}
+        ownerElement={metadata}
+        visualStyle={visualStyle}
+        pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+        onCommitKind={onCommitKind}
+        onElementsChange={onElementsChange}
       />
     );
   }
@@ -104,8 +128,13 @@ const Content = ({
         addId={addId}
         removeId={removeId}
         sandbox={sandbox}
-        validationErrors={metadata.validationErrors}
+        validationErrors={metadata.errors}
         elements={elements}
+        ownerElement={metadata}
+        visualStyle={visualStyle}
+        pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+        onCommitKind={onCommitKind}
+        onElementsChange={onElementsChange}
       />
     );
   }
@@ -115,12 +144,18 @@ const Content = ({
       <ClassContent
         classVariables={ownClassVariables}
         setVariables={setOwnClassVariables}
+        className={className}
         ids={ids}
         addId={addId}
         removeId={removeId}
         sandbox={sandbox}
-        validationErrors={metadata.validationErrors}
+        validationErrors={metadata.errors}
         elements={elements}
+        ownerElement={metadata}
+        visualStyle={visualStyle}
+        pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+        onCommitKind={onCommitKind}
+        onElementsChange={onElementsChange}
       />
     );
   }
diff --git a/frontend/src/features/editors/boxEditor/InlineTargetEditor.tsx b/frontend/src/features/editors/boxEditor/InlineTargetEditor.tsx
new file mode 100644
index 0000000..ba1697b
--- /dev/null
+++ b/frontend/src/features/editors/boxEditor/InlineTargetEditor.tsx
@@ -0,0 +1,218 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  CanvasElement,
+  ElementError,
+  ID,
+  PrimitiveType,
+} from "../../shared/types";
+import PrimitiveContent from "./primitiveBoxes/PrimitiveContent";
+import styles from "../Editor.module.css";
+import FieldValidationTooltip from "./FieldValidationTooltip";
+import { getErrorsForId, isIdInvalid } from "../utils/validationHelpers";
+import {
+  createDefaultPrimitiveKind,
+  getReferenceOptionLabel,
+  getReferenceableElements,
+  normalizeInlineTarget,
+  upsertInlinePrimitive,
+  InlineTargetValue,
+} from "../utils/pythonTutorInlinePrimitives";
+import {
+  createElementsByIdMap,
+  isPrimitiveElement,
+} from "../../canvas/utils/pythonTutorReferences";
+
+interface InlineTargetEditorProps {
+  ownerElement: CanvasElement;
+  currentTarget: InlineTargetValue;
+  blankValue?: ID | string;
+  onTargetChange: (nextTarget: ID | string) => void;
+  addId: (id: ID) => void;
+  elements: CanvasElement[];
+  onElementsChange?: React.Dispatch<React.SetStateAction<CanvasElement[]>>;
+  validationErrors?: ElementError[];
+}
+
+const BLANK_OPTION = "__blank__";
+
+export default function InlineTargetEditor({
+  ownerElement,
+  currentTarget,
+  blankValue = "_",
+  onTargetChange,
+  addId,
+  elements,
+  onElementsChange,
+  validationErrors,
+}: InlineTargetEditorProps) {
+  const elementsById = useMemo(() => createElementsByIdMap(elements), [elements]);
+  const currentNumericTarget = normalizeInlineTarget(currentTarget);
+  const currentTargetElement =
+    currentNumericTarget !== null ? elementsById.get(currentNumericTarget) : undefined;
+  const currentPrimitiveTarget =
+    currentTargetElement && isPrimitiveElement(currentTargetElement)
+      ? currentTargetElement
+      : null;
+  const [mode, setMode] = useState<"reference" | "primitive">(
+    currentPrimitiveTarget ? "primitive" : "reference"
+  );
+  const [primitiveType, setPrimitiveType] = useState<PrimitiveType>(
+    currentPrimitiveTarget?.kind.type ?? "int"
+  );
+  const [primitiveValue, setPrimitiveValue] = useState(
+    currentPrimitiveTarget?.kind.value ?? "0"
+  );
+
+  const referenceableElements = useMemo(
+    () => getReferenceableElements(elements),
+    [elements]
+  );
+  const hasExplicitReferenceOption =
+    currentNumericTarget !== null &&
+    referenceableElements.some((element) => element.id === currentNumericTarget);
+  const hasReferenceError = isIdInvalid(validationErrors, currentNumericTarget);
+  const referenceErrors = getErrorsForId(validationErrors, currentNumericTarget);
+
+  useEffect(() => {
+    if (!currentPrimitiveTarget) {
+      return;
+    }
+
+    setPrimitiveType(currentPrimitiveTarget.kind.type);
+    setPrimitiveValue(currentPrimitiveTarget.kind.value);
+  }, [currentPrimitiveTarget]);
+
+  const applyPrimitiveKind = (type: PrimitiveType, value: string) => {
+    if (!onElementsChange) return;
+
+    const primitiveKind = {
+      name: "primitive" as const,
+      type,
+      value,
+    };
+    const nextPrimitiveState = upsertInlinePrimitive({
+      elements,
+      ownerElement,
+      currentTarget,
+      primitiveKind,
+    });
+
+    if (nextPrimitiveState.targetId !== currentNumericTarget) {
+      onTargetChange(nextPrimitiveState.targetId);
+    }
+    if (nextPrimitiveState.created) {
+      addId(nextPrimitiveState.targetId);
+    }
+
+    onElementsChange((prevElements) => {
+      const liveOwnerElement =
+        prevElements.find((element) => element.boxId === ownerElement.boxId) ??
+        ownerElement;
+
+      return upsertInlinePrimitive({
+        elements: prevElements,
+        ownerElement: liveOwnerElement,
+        currentTarget,
+        primitiveKind,
+      }).elements;
+    });
+  };
+
+  const handleModeSelectChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    const nextValue = event.target.value as PrimitiveType | "reference";
+
+    if (nextValue === "reference") {
+      setMode("reference");
+      if (currentPrimitiveTarget) {
+        onTargetChange(blankValue);
+      }
+      return;
+    }
+
+    const defaultKind = createDefaultPrimitiveKind(nextValue);
+    setMode("primitive");
+    setPrimitiveType(defaultKind.type);
+    setPrimitiveValue(defaultKind.value);
+    applyPrimitiveKind(defaultKind.type, defaultKind.value);
+  };
+
+  const handlePrimitiveValueChange: React.Dispatch<
+    React.SetStateAction<string>
+  > = (nextValue) => {
+    const resolvedValue =
+      typeof nextValue === "function" ? nextValue(primitiveValue) : nextValue;
+
+    setPrimitiveValue(resolvedValue);
+    applyPrimitiveKind(primitiveType, resolvedValue);
+  };
+
+  const handleReferenceChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const nextValue = event.target.value;
+
+    if (nextValue === BLANK_OPTION) {
+      onTargetChange(blankValue);
+      return;
+    }
+
+    onTargetChange(parseInt(nextValue, 10));
+  };
+
+  const referenceSelect = (
+    <select
+      value={
+        currentPrimitiveTarget || currentNumericTarget === null
+          ? BLANK_OPTION
+          : `${currentNumericTarget}`
+      }
+      onChange={handleReferenceChange}
+      className={`${styles.inlineTargetSelect} ${
+        hasReferenceError ? styles.errorId : ""
+      }`}
+    >
+      <option value={BLANK_OPTION}>Unassigned</option>
+      {currentNumericTarget !== null &&
+        !currentPrimitiveTarget &&
+        !hasExplicitReferenceOption && (
+          <option value={currentNumericTarget}>{`id${currentNumericTarget}`}</option>
+        )}
+      {referenceableElements.map((element) => (
+        <option key={element.id} value={element.id}>
+          {getReferenceOptionLabel(element)}
+        </option>
+      ))}
+    </select>
+  );
+
+  return (
+    <div className={styles.inlineTargetEditor}>
+      <select
+        value={mode === "primitive" ? primitiveType : "reference"}
+        onChange={handleModeSelectChange}
+        className={styles.inlineTargetModeSelect}
+      >
+        <option value="reference">Reference</option>
+        <option value="NoneType">None</option>
+        <option value="int">int</option>
+        <option value="float">float</option>
+        <option value="str">str</option>
+        <option value="bool">bool</option>
+      </select>
+
+      <div className={styles.inlineTargetBody}>
+        {mode === "primitive" ? (
+          <PrimitiveContent
+            dataType={primitiveType}
+            value={primitiveValue}
+            setValue={handlePrimitiveValueChange}
+          />
+        ) : (
+          <FieldValidationTooltip errors={referenceErrors}>
+            {referenceSelect}
+          </FieldValidationTooltip>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/features/editors/boxEditor/PythonTutorPrimitiveMode.test.tsx b/frontend/src/features/editors/boxEditor/PythonTutorPrimitiveMode.test.tsx
new file mode 100644
index 0000000..b0a8795
--- /dev/null
+++ b/frontend/src/features/editors/boxEditor/PythonTutorPrimitiveMode.test.tsx
@@ -0,0 +1,143 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import FunctionContent from "./functionBoxes/FunctionContent";
+import ClassContent from "./classBoxes/ClassContent";
+import CollectionItem from "./collectionBoxes/CollectionItem";
+import { CanvasElement } from "../../shared/types";
+
+jest.mock("../idEditor/IdEditor", () => ({
+  __esModule: true,
+  default: ({ currentId }: { currentId: number | string | null }) => (
+    <div data-testid="id-selector">{String(currentId)}</div>
+  ),
+}));
+
+jest.mock("./InlineTargetEditor", () => ({
+  __esModule: true,
+  default: () => <div data-testid="inline-target-editor" />,
+}));
+
+const baseOwnerElement: CanvasElement = {
+  boxId: 1,
+  id: "_",
+  x: 0,
+  y: 0,
+  kind: {
+    name: "function",
+    type: "function",
+    value: null,
+    functionName: "__main__",
+    params: [],
+  },
+};
+
+describe("Python Tutor standalone primitives editor mode", () => {
+  it("uses the inline target editor for function params in inline mode", () => {
+    render(
+      <FunctionContent
+        functionParams={[{ name: "x", targetId: 1 }]}
+        setParams={jest.fn()}
+        functionName="demo"
+        ids={[1]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        sandbox={true}
+        elements={[]}
+        ownerElement={baseOwnerElement}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={false}
+      />
+    );
+
+    expect(screen.getByTestId("inline-target-editor")).toBeInTheDocument();
+    expect(screen.queryByTestId("id-selector")).toBeNull();
+  });
+
+  it("uses the normal ID selector for class variables in standalone mode", () => {
+    render(
+      <ClassContent
+        classVariables={[{ name: "value", targetId: 2 }]}
+        setVariables={jest.fn()}
+        className="Node"
+        ids={[2]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        sandbox={true}
+        elements={[]}
+        ownerElement={{
+          ...baseOwnerElement,
+          kind: {
+            name: "class",
+            type: "class",
+            value: null,
+            className: "Node",
+            classVariables: [],
+          },
+        }}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={true}
+      />
+    );
+
+    expect(screen.getByTestId("id-selector")).toBeInTheDocument();
+    expect(screen.queryByTestId("inline-target-editor")).toBeNull();
+  });
+
+  it("uses the normal ID selector for collection items in standalone mode", () => {
+    render(
+      <CollectionItem
+        mode="single"
+        items={[3]}
+        setItems={jest.fn()}
+        ids={[3]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        sandbox={true}
+        elements={[]}
+        ownerElement={{
+          ...baseOwnerElement,
+          id: 4,
+          kind: {
+            name: "list",
+            type: "list",
+            value: [],
+          },
+        }}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={true}
+      />
+    );
+
+    expect(screen.getByTestId("id-selector")).toBeInTheDocument();
+    expect(screen.queryByTestId("inline-target-editor")).toBeNull();
+  });
+
+  it("keeps the inline target editor for collection items in inline mode", () => {
+    render(
+      <CollectionItem
+        mode="single"
+        items={[3]}
+        setItems={jest.fn()}
+        ids={[3]}
+        addId={jest.fn()}
+        removeId={jest.fn()}
+        sandbox={true}
+        elements={[]}
+        ownerElement={{
+          ...baseOwnerElement,
+          id: 4,
+          kind: {
+            name: "list",
+            type: "list",
+            value: [],
+          },
+        }}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={false}
+      />
+    );
+
+    expect(screen.getByTestId("inline-target-editor")).toBeInTheDocument();
+    expect(screen.queryByTestId("id-selector")).toBeNull();
+  });
+});
diff --git a/frontend/src/features/editors/boxEditor/classBoxes/ClassContent.tsx b/frontend/src/features/editors/boxEditor/classBoxes/ClassContent.tsx
index 35e10b5..1014063 100644
--- a/frontend/src/features/editors/boxEditor/classBoxes/ClassContent.tsx
+++ b/frontend/src/features/editors/boxEditor/classBoxes/ClassContent.tsx
@@ -1,8 +1,16 @@
 import styles from "../../Editor.module.css";
-import { ID, ElementError } from "../../../shared/types";
+import type { Dispatch, SetStateAction } from "react";
+import {
+  BoxType,
+  CanvasElement,
+  ID,
+  ElementError,
+  VisualStyle,
+} from "../../../shared/types";
 import IdSelector from "../../idEditor/IdEditor";
 import { isIdInvalid, getErrorsForId } from "../../utils/validationHelpers";
 import FieldValidationTooltip from "../FieldValidationTooltip";
+import InlineTargetEditor from "../InlineTargetEditor";
 
 /**
  * Props for the ClassContent component.
@@ -10,12 +18,18 @@ import FieldValidationTooltip from "../FieldValidationTooltip";
 interface Props {
   classVariables: any; // Array of variable objects for the class
   setVariables: any; // Setter to update the list of variables
+  className: string;
   ids: any;
   addId: (id: ID) => void;
   removeId: (id: ID) => void;
   sandbox: boolean;
   validationErrors?: ElementError[]; // Validation errors for highlighting
   elements?: any[]; // All canvas elements for ID usage tracking
+  ownerElement: CanvasElement;
+  visualStyle?: VisualStyle;
+  pythonTutorStandalonePrimitives?: boolean;
+  onCommitKind?: (kind: BoxType) => void;
+  onElementsChange?: Dispatch<SetStateAction<CanvasElement[]>>;
 }
 
 /**
@@ -31,13 +45,22 @@ interface Props {
 const ClassContent = ({
   classVariables,
   setVariables,
+  className,
   ids,
   addId,
   removeId,
   sandbox,
   validationErrors,
   elements = [],
+  ownerElement,
+  visualStyle = "memoryviz",
+  pythonTutorStandalonePrimitives = false,
+  onCommitKind,
+  onElementsChange,
 }: Props) => {
+  const useInlineTargetEditor =
+    visualStyle === "pythonTutor" && !pythonTutorStandalonePrimitives;
+
   // Add a new empty variable to the list
   const addVariable = () =>
     setVariables([...classVariables, { name: "", targetId: "_" }]);
@@ -56,11 +79,19 @@ const ClassContent = ({
 
   // Update the targetId of a variable at a given index
   const setTargetId = (i: number, id: ID) =>
-    setVariables(
-      classVariables.map((v: any, idx: any) =>
+    {
+      const nextVariables = classVariables.map((v: any, idx: any) =>
         idx === i ? { ...v, targetId: id } : v
-      )
-    );
+      );
+      setVariables(nextVariables);
+      onCommitKind?.({
+        name: "class",
+        type: "class",
+        value: null,
+        className,
+        classVariables: nextVariables,
+      });
+    };
 
   return (
     <div className={styles.contentContainer}>
@@ -78,21 +109,33 @@ const ClassContent = ({
                   className={styles.variableNameBox}
                 />
                 <div className={styles.idSelectButtonWrapper}>
-                  <FieldValidationTooltip errors={fieldErrors}>
-                    <IdSelector
-                      currentId={v.targetId}
-                      ids={ids}
-                      onAdd={addId}
-                      onSelect={(id) => setTargetId(idx, id)}
-                      onRemove={removeId}
-                      buttonClassName={`${styles.collectionIdBox} ${
-                        hasError ? styles.errorId : ""
-                      }`}
-                      sandbox={sandbox}
-                      editable={true}
+                  {useInlineTargetEditor ? (
+                    <InlineTargetEditor
+                      ownerElement={ownerElement}
+                      currentTarget={v.targetId}
+                      onTargetChange={(id) => setTargetId(idx, id as ID)}
+                      addId={addId}
                       elements={elements}
+                      onElementsChange={onElementsChange}
+                      validationErrors={fieldErrors}
                     />
-                  </FieldValidationTooltip>
+                  ) : (
+                    <FieldValidationTooltip errors={fieldErrors}>
+                      <IdSelector
+                        currentId={v.targetId}
+                        ids={ids}
+                        onAdd={addId}
+                        onSelect={(id) => setTargetId(idx, id)}
+                        onRemove={removeId}
+                        buttonClassName={`${styles.collectionIdBox} ${
+                          hasError ? styles.errorId : ""
+                        }`}
+                        sandbox={sandbox}
+                        editable={true}
+                        elements={elements}
+                      />
+                    </FieldValidationTooltip>
+                  )}
                 </div>
                 <button
                   onClick={() => removeVariable(idx)}
diff --git a/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionContent.tsx b/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionContent.tsx
index d118360..6f738d9 100644
--- a/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionContent.tsx
+++ b/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionContent.tsx
@@ -1,7 +1,14 @@
 import CollectionItem from "./CollectionItem";
 import CollectionAddButton from "./CollectionAddButton";
 import styles from "../../Editor.module.css";
-import { ID, ElementError } from "../../../shared/types";
+import type { Dispatch, SetStateAction } from "react";
+import {
+  BoxType,
+  CanvasElement,
+  ID,
+  ElementError,
+  VisualStyle,
+} from "../../../shared/types";
 
 /**
  * Props for the CollectionContent component.
@@ -16,6 +23,11 @@ interface Props {
   sandbox: boolean;
   validationErrors?: ElementError[]; // Validation errors for highlighting
   elements?: any[]; // All canvas elements for ID usage tracking
+  ownerElement: CanvasElement;
+  visualStyle?: VisualStyle;
+  pythonTutorStandalonePrimitives?: boolean;
+  onCommitKind?: (kind: BoxType) => void;
+  onElementsChange?: Dispatch<SetStateAction<CanvasElement[]>>;
 }
 
 /**
@@ -36,6 +48,11 @@ const CollectionContent = ({
   sandbox,
   validationErrors,
   elements = [],
+  ownerElement,
+  visualStyle = "memoryviz",
+  pythonTutorStandalonePrimitives = false,
+  onCommitKind,
+  onElementsChange,
 }: Props) => {
   return (
     <div className={styles.contentContainer}>
@@ -49,6 +66,11 @@ const CollectionContent = ({
         sandbox={sandbox}
         validationErrors={validationErrors}
         elements={elements}
+        ownerElement={ownerElement}
+        visualStyle={visualStyle}
+        pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+        onCommitKind={onCommitKind}
+        onElementsChange={onElementsChange}
       />
       <CollectionAddButton mode={mode} items={items} setItems={setItems} />
     </div>
diff --git a/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionItem.tsx b/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionItem.tsx
index 86a96ac..389b5d3 100644
--- a/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionItem.tsx
+++ b/frontend/src/features/editors/boxEditor/collectionBoxes/CollectionItem.tsx
@@ -1,8 +1,16 @@
 import styles from "../../Editor.module.css";
+import type { Dispatch, SetStateAction } from "react";
 import IdSelector from "../../idEditor/IdEditor";
-import { ID, ElementError } from "../../../shared/types";
+import {
+  BoxType,
+  CanvasElement,
+  ID,
+  ElementError,
+  VisualStyle,
+} from "../../../shared/types";
 import { isIdInvalid, getErrorsForId } from "../../utils/validationHelpers";
 import FieldValidationTooltip from "../FieldValidationTooltip";
+import InlineTargetEditor from "../InlineTargetEditor";
 
 /**
  * Props for the CollectionItem component.
@@ -17,6 +25,11 @@ interface Props {
   sandbox: boolean;
   validationErrors?: ElementError[]; // Validation errors for highlighting
   elements?: any[]; // All canvas elements for ID usage tracking
+  ownerElement: CanvasElement;
+  visualStyle?: VisualStyle;
+  pythonTutorStandalonePrimitives?: boolean;
+  onCommitKind?: (kind: BoxType) => void;
+  onElementsChange?: Dispatch<SetStateAction<CanvasElement[]>>;
 }
 
 /**
@@ -33,10 +46,34 @@ const CollectionItem = ({
   sandbox,
   validationErrors,
   elements = [],
+  ownerElement,
+  visualStyle = "memoryviz",
+  pythonTutorStandalonePrimitives = false,
+  onCommitKind,
+  onElementsChange,
 }: Props) => {
+  const useInlineTargetEditor =
+    visualStyle === "pythonTutor" && !pythonTutorStandalonePrimitives;
+
   const removeItem = (idx: number) =>
     setItems((prev) => prev.filter((_, i) => i !== idx));
 
+  const commitSingles = (nextItems: ID[]) => {
+    onCommitKind?.({
+      name: ownerElement.kind.name,
+      type: ownerElement.kind.type,
+      value: nextItems,
+    } as BoxType);
+  };
+
+  const commitPairs = (nextPairs: Array<[ID | string, ID]>) => {
+    onCommitKind?.({
+      name: "dict",
+      type: "dict",
+      value: Object.fromEntries(nextPairs) as Record<number, number | null>,
+    });
+  };
+
   if (items.length === 0) return null;
 
   // SINGLE ELEMENTS (list / set / tuple)
@@ -48,25 +85,44 @@ const CollectionItem = ({
           const fieldErrors = getErrorsForId(validationErrors, itemId);
           return (
             <div key={idx} className={styles.idSelectButtonWrapper}>
-              <FieldValidationTooltip errors={fieldErrors}>
-                <IdSelector
-                  currentId={itemId}
-                  ids={ids}
-                  onAdd={addId}
-                  onSelect={(picked) =>
-                    setItems((prev) =>
-                      prev.map((v, i) => (i === idx ? picked : v))
-                    )
-                  }
-                  onRemove={removeId}
-                  buttonClassName={`${styles.collectionIdBox} ${
-                    hasError ? styles.errorId : ""
-                  }`}
-                  editable={true}
-                  sandbox={sandbox}
+              {useInlineTargetEditor ? (
+                <InlineTargetEditor
+                  ownerElement={ownerElement}
+                  currentTarget={itemId}
+                  onTargetChange={(picked) => {
+                    const nextItems = items.map((value, itemIndex) =>
+                      itemIndex === idx ? (picked as ID) : value
+                    );
+                    setItems(nextItems);
+                    commitSingles(nextItems);
+                  }}
+                  addId={addId}
                   elements={elements}
+                  onElementsChange={onElementsChange}
+                  validationErrors={fieldErrors}
                 />
-              </FieldValidationTooltip>
+              ) : (
+                <FieldValidationTooltip errors={fieldErrors}>
+                  <IdSelector
+                    currentId={itemId}
+                    ids={ids}
+                    onAdd={addId}
+                    onSelect={(picked) => {
+                      const nextItems = items.map((value, itemIndex) =>
+                        itemIndex === idx ? picked : value
+                      );
+                      setItems(nextItems);
+                    }}
+                    onRemove={removeId}
+                    buttonClassName={`${styles.collectionIdBox} ${
+                      hasError ? styles.errorId : ""
+                    }`}
+                    editable={true}
+                    sandbox={sandbox}
+                    elements={elements}
+                  />
+                </FieldValidationTooltip>
+              )}
               <button
                 className={styles.collectionDeleteButton}
                 onClick={() => removeItem(idx)}
@@ -85,59 +141,98 @@ const CollectionItem = ({
   // PAIRS (dict)
   return (
     <div className={styles.collectionPairsContainer}>
-      {items.map(([keyId, valId]: [ID, ID], idx: number) => {
+      {items.map(([keyId, valId]: [ID | string, ID], idx: number) => {
         const keyHasError = isIdInvalid(validationErrors, keyId);
         const valHasError = isIdInvalid(validationErrors, valId);
         const keyErrors = getErrorsForId(validationErrors, keyId);
         const valErrors = getErrorsForId(validationErrors, valId);
+        const legacyKeyId =
+          typeof keyId === "number" || keyId === "_" ? keyId : "_";
         return (
           <div key={idx} className={styles.collectionPairContainer}>
             {/* KEY ID */}
             <div className={styles.idSelectButtonWrapper}>
-              <FieldValidationTooltip errors={keyErrors}>
-                <IdSelector
-                  currentId={keyId}
-                  ids={ids}
-                  onAdd={addId}
-                  onSelect={(picked) =>
-                    setItems((prev) =>
-                      prev.map((p, i) => (i === idx ? [picked, p[1]] : p))
-                    )
-                  }
-                  onRemove={removeId}
-                  buttonClassName={`${styles.collectionIdBox} ${
-                    keyHasError ? styles.errorId : ""
-                  }`}
-                  editable={true}
-                  sandbox={sandbox}
+              {useInlineTargetEditor ? (
+                <InlineTargetEditor
+                  ownerElement={ownerElement}
+                  currentTarget={keyId}
+                  blankValue={" ".repeat(idx + 1)}
+                  onTargetChange={(picked) => {
+                    const nextPairs = items.map((pair, pairIndex) =>
+                      pairIndex === idx ? [picked as ID | string, pair[1]] : pair
+                    );
+                    setItems(nextPairs);
+                    commitPairs(nextPairs);
+                  }}
+                  addId={addId}
                   elements={elements}
+                  onElementsChange={onElementsChange}
+                  validationErrors={keyErrors}
                 />
-              </FieldValidationTooltip>
+              ) : (
+                <FieldValidationTooltip errors={keyErrors}>
+                  <IdSelector
+                    currentId={legacyKeyId}
+                    ids={ids}
+                    onAdd={addId}
+                    onSelect={(picked) =>
+                      setItems((prev) =>
+                        prev.map((p, i) => (i === idx ? [picked, p[1]] : p))
+                      )
+                    }
+                    onRemove={removeId}
+                    buttonClassName={`${styles.collectionIdBox} ${
+                      keyHasError ? styles.errorId : ""
+                    }`}
+                    editable={true}
+                    sandbox={sandbox}
+                    elements={elements}
+                  />
+                </FieldValidationTooltip>
+              )}
             </div>
 
             <div className={styles.collectionPairSeparator}>:</div>
 
             {/* VALUE ID + REMOVE */}
             <div className={styles.idSelectButtonWrapper}>
-              <FieldValidationTooltip errors={valErrors}>
-                <IdSelector
-                  currentId={valId}
-                  ids={ids}
-                  onAdd={addId}
-                  onSelect={(picked) =>
-                    setItems((prev) =>
-                      prev.map((p, i) => (i === idx ? [p[0], picked] : p))
-                    )
-                  }
-                  onRemove={removeId}
-                  buttonClassName={`${styles.collectionIdBox} ${
-                    valHasError ? styles.errorId : ""
-                  }`}
-                  editable={true}
-                  sandbox={sandbox}
+              {useInlineTargetEditor ? (
+                <InlineTargetEditor
+                  ownerElement={ownerElement}
+                  currentTarget={valId}
+                  onTargetChange={(picked) => {
+                    const nextPairs = items.map((pair, pairIndex) =>
+                      pairIndex === idx ? [pair[0], picked as ID] : pair
+                    );
+                    setItems(nextPairs);
+                    commitPairs(nextPairs);
+                  }}
+                  addId={addId}
                   elements={elements}
+                  onElementsChange={onElementsChange}
+                  validationErrors={valErrors}
                 />
-              </FieldValidationTooltip>
+              ) : (
+                <FieldValidationTooltip errors={valErrors}>
+                  <IdSelector
+                    currentId={valId}
+                    ids={ids}
+                    onAdd={addId}
+                    onSelect={(picked) =>
+                      setItems((prev) =>
+                        prev.map((p, i) => (i === idx ? [p[0], picked] : p))
+                      )
+                    }
+                    onRemove={removeId}
+                    buttonClassName={`${styles.collectionIdBox} ${
+                      valHasError ? styles.errorId : ""
+                    }`}
+                    editable={true}
+                    sandbox={sandbox}
+                    elements={elements}
+                  />
+                </FieldValidationTooltip>
+              )}
               <button
                 className={styles.collectionDeleteButton}
                 onClick={() => removeItem(idx)}
diff --git a/frontend/src/features/editors/boxEditor/functionBoxes/FunctionContent.tsx b/frontend/src/features/editors/boxEditor/functionBoxes/FunctionContent.tsx
index f280430..18d8d35 100644
--- a/frontend/src/features/editors/boxEditor/functionBoxes/FunctionContent.tsx
+++ b/frontend/src/features/editors/boxEditor/functionBoxes/FunctionContent.tsx
@@ -1,8 +1,16 @@
 import styles from "../../Editor.module.css";
-import { ID, ElementError } from "../../../shared/types";
+import type { Dispatch, SetStateAction } from "react";
+import {
+  BoxType,
+  CanvasElement,
+  ID,
+  ElementError,
+  VisualStyle,
+} from "../../../shared/types";
 import IdSelector from "../../idEditor/IdEditor";
 import { isIdInvalid, getErrorsForId } from "../../utils/validationHelpers";
 import FieldValidationTooltip from "../FieldValidationTooltip";
+import InlineTargetEditor from "../InlineTargetEditor";
 
 /**
  * Props for the FunctionContent component.
@@ -10,12 +18,18 @@ import FieldValidationTooltip from "../FieldValidationTooltip";
 interface Props {
   functionParams: any; // Array of parameter objects for the function
   setParams: any; // Setter to update the list of parameters
+  functionName: string;
   ids: any;
   addId: (id: ID) => void;
   removeId: (id: ID) => void;
   sandbox: boolean;
   validationErrors?: ElementError[]; // Validation errors for highlighting
   elements?: any[]; // All canvas elements for ID usage tracking
+  ownerElement: CanvasElement;
+  visualStyle?: VisualStyle;
+  pythonTutorStandalonePrimitives?: boolean;
+  onCommitKind?: (kind: BoxType) => void;
+  onElementsChange?: Dispatch<SetStateAction<CanvasElement[]>>;
 }
 
 /**
@@ -24,13 +38,22 @@ interface Props {
 const FunctionContent = ({
   functionParams,
   setParams,
+  functionName,
   ids,
   addId,
   removeId,
   sandbox,
   validationErrors,
   elements = [],
+  ownerElement,
+  visualStyle = "memoryviz",
+  pythonTutorStandalonePrimitives = false,
+  onCommitKind,
+  onElementsChange,
 }: Props) => {
+  const useInlineTargetEditor =
+    visualStyle === "pythonTutor" && !pythonTutorStandalonePrimitives;
+
   // Add a new empty parameter to the list
   const addParam = () =>
     setParams([...functionParams, { name: "", targetId: "_" }]);
@@ -49,11 +72,19 @@ const FunctionContent = ({
 
   // Update the targetId of a parameter at a given index
   const setTargetId = (i: number, id: ID) =>
-    setParams(
-      functionParams.map((p: any, idx: any) =>
+    {
+      const nextParams = functionParams.map((p: any, idx: any) =>
         idx === i ? { ...p, targetId: id } : p
-      )
-    );
+      );
+      setParams(nextParams);
+      onCommitKind?.({
+        name: "function",
+        type: "function",
+        value: null,
+        functionName,
+        params: nextParams,
+      });
+    };
 
   return (
     <div className={styles.contentContainer}>
@@ -71,21 +102,33 @@ const FunctionContent = ({
                   className={styles.variableNameBox}
                 />
                 <div className={styles.idSelectButtonWrapper}>
-                  <FieldValidationTooltip errors={fieldErrors}>
-                    <IdSelector
-                      currentId={p.targetId}
-                      ids={ids}
-                      onAdd={addId}
-                      onSelect={(id) => setTargetId(idx, id)}
-                      onRemove={removeId}
-                      buttonClassName={`${styles.collectionIdBox} ${
-                        hasError ? styles.errorId : ""
-                      }`}
-                      sandbox={sandbox}
-                      editable={true}
+                  {useInlineTargetEditor ? (
+                    <InlineTargetEditor
+                      ownerElement={ownerElement}
+                      currentTarget={p.targetId}
+                      onTargetChange={(id) => setTargetId(idx, id as ID)}
+                      addId={addId}
                       elements={elements}
+                      onElementsChange={onElementsChange}
+                      validationErrors={fieldErrors}
                     />
-                  </FieldValidationTooltip>
+                  ) : (
+                    <FieldValidationTooltip errors={fieldErrors}>
+                      <IdSelector
+                        currentId={p.targetId}
+                        ids={ids}
+                        onAdd={addId}
+                        onSelect={(id) => setTargetId(idx, id)}
+                        onRemove={removeId}
+                        buttonClassName={`${styles.collectionIdBox} ${
+                          hasError ? styles.errorId : ""
+                        }`}
+                        sandbox={sandbox}
+                        editable={true}
+                        elements={elements}
+                      />
+                    </FieldValidationTooltip>
+                  )}
                 </div>
                 <button
                   onClick={() => removeParam(idx)}
diff --git a/frontend/src/features/editors/utils/pythonTutorInlinePrimitives.ts b/frontend/src/features/editors/utils/pythonTutorInlinePrimitives.ts
new file mode 100644
index 0000000..03c387f
--- /dev/null
+++ b/frontend/src/features/editors/utils/pythonTutorInlinePrimitives.ts
@@ -0,0 +1,208 @@
+import { spreadOverlappingElements } from "../../canvas/utils/boundary.helpers";
+import {
+  CanvasElement,
+  ID,
+  PrimitiveKind,
+  PrimitiveType,
+} from "../../shared/types";
+import {
+  createElementsByIdMap,
+  getPythonTutorDisplayType,
+  isPrimitiveElement,
+} from "../../canvas/utils/pythonTutorReferences";
+
+export type InlineTargetValue = ID | string | null | undefined;
+
+const DEFAULT_PRIMITIVE_VALUES: Record<PrimitiveType, string> = {
+  NoneType: "None",
+  int: "0",
+  float: "0.0",
+  str: "",
+  bool: "false",
+};
+
+function getNextBoxId(elements: CanvasElement[]): number {
+  const boxIds = elements.map((element) => element.boxId).sort((a, b) => a - b);
+
+  for (let i = 0; i < boxIds.length; i += 1) {
+    if (boxIds[i] !== i) {
+      return i;
+    }
+  }
+
+  return boxIds.length;
+}
+
+function getNextElementId(elements: CanvasElement[]): number {
+  const numericIds = elements
+    .map((element) => element.id)
+    .filter((id): id is number => typeof id === "number")
+    .sort((a, b) => a - b);
+
+  for (let i = 0; i < numericIds.length; i += 1) {
+    const expected = i + 1;
+    if (numericIds[i] !== expected) {
+      return expected;
+    }
+  }
+
+  return numericIds.length + 1;
+}
+
+function collectReferencedIds(elements: CanvasElement[]): Set<number> {
+  const referencedIds = new Set<number>();
+
+  const addReference = (value: InlineTargetValue) => {
+    const normalized = normalizeInlineTarget(value);
+    if (normalized !== null) {
+      referencedIds.add(normalized);
+    }
+  };
+
+  elements.forEach((element) => {
+    switch (element.kind.name) {
+      case "function":
+        element.kind.params.forEach((param) => addReference(param.targetId));
+        break;
+      case "class":
+        element.kind.classVariables.forEach((variable) =>
+          addReference(variable.targetId)
+        );
+        break;
+      case "list":
+      case "tuple":
+      case "set":
+        element.kind.value.forEach((value) => addReference(value));
+        break;
+      case "dict":
+        Object.entries(element.kind.value).forEach(([key, value]) => {
+          addReference(key);
+          addReference(value);
+        });
+        break;
+      default:
+        break;
+    }
+  });
+
+  return referencedIds;
+}
+
+function getGeneratedPrimitiveBasePosition(
+  ownerElement: CanvasElement
+): { x: number; y: number } {
+  if (ownerElement.kind.name === "function") {
+    return {
+      x: Math.max(ownerElement.x || 0, 320) + 40,
+      y: Math.max(ownerElement.y || 0, 140),
+    };
+  }
+
+  return {
+    x: Math.max(ownerElement.x + 80, 320),
+    y: Math.max(ownerElement.y + 40, 140),
+  };
+}
+
+export function normalizeInlineTarget(value: InlineTargetValue): number | null {
+  if (typeof value === "number" && Number.isInteger(value)) {
+    return value;
+  }
+
+  if (typeof value === "string" && /^\d+$/.test(value.trim())) {
+    return parseInt(value, 10);
+  }
+
+  return null;
+}
+
+export function createDefaultPrimitiveKind(type: PrimitiveType): PrimitiveKind {
+  return {
+    name: "primitive",
+    type,
+    value: DEFAULT_PRIMITIVE_VALUES[type],
+  };
+}
+
+export function getReferenceableElements(
+  elements: CanvasElement[]
+): Array<CanvasElement & { id: number }> {
+  return elements
+    .filter(
+      (element): element is CanvasElement & { id: number } =>
+        typeof element.id === "number" && element.kind.name !== "primitive"
+    )
+    .sort((left, right) => left.id - right.id);
+}
+
+export function getReferenceOptionLabel(element: CanvasElement & { id: number }): string {
+  return `id${element.id} (${getPythonTutorDisplayType(element)})`;
+}
+
+export function upsertInlinePrimitive(options: {
+  elements: CanvasElement[];
+  ownerElement: CanvasElement;
+  currentTarget: InlineTargetValue;
+  primitiveKind: PrimitiveKind;
+}): {
+  elements: CanvasElement[];
+  targetId: number;
+  created: boolean;
+} {
+  const { elements, ownerElement, currentTarget, primitiveKind } = options;
+  const currentId = normalizeInlineTarget(currentTarget);
+  const elementsById = createElementsByIdMap(elements);
+  const currentElement = currentId !== null ? elementsById.get(currentId) : undefined;
+
+  if (currentElement && isPrimitiveElement(currentElement)) {
+    return {
+      elements: elements.map((element) =>
+        element.boxId === currentElement.boxId
+          ? {
+              ...element,
+              kind: primitiveKind,
+            }
+          : element
+      ),
+      targetId: currentId as number,
+      created: false,
+    };
+  }
+
+  const nextId = getNextElementId(elements);
+  const nextBoxId = getNextBoxId(elements);
+  const basePosition = getGeneratedPrimitiveBasePosition(ownerElement);
+  const generatedElement: CanvasElement = {
+    boxId: nextBoxId,
+    id: nextId,
+    kind: primitiveKind,
+    x: basePosition.x,
+    y: basePosition.y,
+    generatedInlinePrimitive: true,
+  };
+  const spreadElements = spreadOverlappingElements([...elements, generatedElement]);
+  const positionedElement =
+    spreadElements.find((element) => element.boxId === nextBoxId) ?? generatedElement;
+
+  return {
+    elements: [...elements, positionedElement],
+    targetId: nextId,
+    created: true,
+  };
+}
+
+export function findOrphanedGeneratedPrimitiveIds(
+  elements: CanvasElement[]
+): number[] {
+  const referencedIds = collectReferencedIds(elements);
+
+  return elements
+    .filter(
+      (element): element is CanvasElement & { id: number } =>
+        element.kind.name === "primitive" &&
+        element.generatedInlinePrimitive === true &&
+        typeof element.id === "number" &&
+        !referencedIds.has(element.id)
+    )
+    .map((element) => element.id);
+}
diff --git a/frontend/src/features/memoryModelEditor/MemoryModelEditor.tsx b/frontend/src/features/memoryModelEditor/MemoryModelEditor.tsx
index 3049b9c..de5d544 100644
--- a/frontend/src/features/memoryModelEditor/MemoryModelEditor.tsx
+++ b/frontend/src/features/memoryModelEditor/MemoryModelEditor.tsx
@@ -320,6 +320,9 @@ export default function MemoryModelEditor({
     questionType: state.selectedQuestionType,
     submissionResults: state.submissionResults,
     sandboxMode: state.isSandboxMode,
+    visualStyle: state.visualStyle,
+    pythonTutorReferenceArrows: state.pythonTutorReferenceArrows,
+    pythonTutorStandalonePrimitives: state.pythonTutorStandalonePrimitives,
     questionView: state.questionView,
     isInfoPanelOpen: state.isInfoPanelOpen,
     canvasScale,
@@ -508,6 +511,18 @@ export default function MemoryModelEditor({
                 onScaleChange={setCanvasScale}
                 editorScale={editorScale}
                 onEditorScaleChange={setEditorScale}
+                visualStyle={state.visualStyle}
+                onVisualStyleChange={state.setVisualStyle}
+                pythonTutorReferenceArrows={state.pythonTutorReferenceArrows}
+                onPythonTutorReferenceArrowsChange={
+                  state.setPythonTutorReferenceArrows
+                }
+                pythonTutorStandalonePrimitives={
+                  state.pythonTutorStandalonePrimitives
+                }
+                onPythonTutorStandalonePrimitivesChange={
+                  state.setPythonTutorStandalonePrimitives
+                }
                 fontScale={fontScale}
                 onFontScaleChange={adjustFontScale}
               />
@@ -542,6 +557,11 @@ export default function MemoryModelEditor({
               scale={canvasScale}
               onScaleChange={setCanvasScale}
               editorScale={editorScale}
+              visualStyle={state.visualStyle}
+              pythonTutorReferenceArrows={state.pythonTutorReferenceArrows}
+              pythonTutorStandalonePrimitives={
+                state.pythonTutorStandalonePrimitives
+              }
               questionFunctionNames={
                 state.isSandboxMode && currentQuestionData
                   ? getQuestionFunctionNames(currentQuestionData)
diff --git a/frontend/src/features/memoryModelEditor/hooks/useLocalStorage.ts b/frontend/src/features/memoryModelEditor/hooks/useLocalStorage.ts
index f5d0d0b..5117fc5 100644
--- a/frontend/src/features/memoryModelEditor/hooks/useLocalStorage.ts
+++ b/frontend/src/features/memoryModelEditor/hooks/useLocalStorage.ts
@@ -19,6 +19,9 @@ export function useUILocalStorage(state: UIState): void {
     state.questionType,
     state.submissionResults,
     state.sandboxMode,
+    state.visualStyle,
+    state.pythonTutorReferenceArrows,
+    state.pythonTutorStandalonePrimitives,
     state.questionView,
     state.isInfoPanelOpen,
     state.canvasScale,
diff --git a/frontend/src/features/memoryModelEditor/hooks/useMemoryModelEditorState.ts b/frontend/src/features/memoryModelEditor/hooks/useMemoryModelEditorState.ts
index 1a50fc1..b5f25e6 100644
--- a/frontend/src/features/memoryModelEditor/hooks/useMemoryModelEditorState.ts
+++ b/frontend/src/features/memoryModelEditor/hooks/useMemoryModelEditorState.ts
@@ -4,6 +4,7 @@ import {
   SubmissionResult,
   Tab,
   PaletteTab,
+  VisualStyle,
 } from "../../shared/types";
 import {
   loadInitialCanvasData,
@@ -49,6 +50,13 @@ export function useMemoryModelEditorState(sandbox: boolean) {
       ? initialUIData.sandboxMode
       : sandbox
   );
+  const [visualStyle, setVisualStyle] = useState<VisualStyle>(
+    initialUIData.visualStyle ?? "memoryviz"
+  );
+  const [pythonTutorReferenceArrows, setPythonTutorReferenceArrows] =
+    useState<boolean>(initialUIData.pythonTutorReferenceArrows ?? false);
+  const [pythonTutorStandalonePrimitives, setPythonTutorStandalonePrimitives] =
+    useState<boolean>(initialUIData.pythonTutorStandalonePrimitives ?? false);
   const [questionView, setQuestionView] = useState<QuestionView>(
     initialUIData.questionView ?? "root"
   );
@@ -101,6 +109,12 @@ export function useMemoryModelEditorState(sandbox: boolean) {
     setSubmissionResults,
     isSandboxMode,
     setIsSandboxMode,
+    visualStyle,
+    setVisualStyle,
+    pythonTutorReferenceArrows,
+    setPythonTutorReferenceArrows,
+    pythonTutorStandalonePrimitives,
+    setPythonTutorStandalonePrimitives,
     questionView,
     setQuestionView,
     tabScrollPositions,
diff --git a/frontend/src/features/memoryModelEditor/utils/localStorage.test.ts b/frontend/src/features/memoryModelEditor/utils/localStorage.test.ts
new file mode 100644
index 0000000..7a95a72
--- /dev/null
+++ b/frontend/src/features/memoryModelEditor/utils/localStorage.test.ts
@@ -0,0 +1,67 @@
+import { loadInitialUIData, saveUIState } from "./localStorage";
+
+describe("localStorage UI state", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("defaults pythonTutorReferenceArrows to false when missing", () => {
+    localStorage.setItem(
+      "canvas_ui_state_v3",
+      JSON.stringify({
+        activeTab: "question",
+        questionIndex: null,
+        questionType: null,
+        submissionResults: null,
+        sandboxMode: false,
+        visualStyle: "pythonTutor",
+      })
+    );
+
+    expect(loadInitialUIData().pythonTutorReferenceArrows).toBe(false);
+  });
+
+  it("defaults pythonTutorStandalonePrimitives to false when missing", () => {
+    localStorage.setItem(
+      "canvas_ui_state_v3",
+      JSON.stringify({
+        activeTab: "question",
+        questionIndex: null,
+        questionType: null,
+        submissionResults: null,
+        sandboxMode: false,
+        visualStyle: "pythonTutor",
+      })
+    );
+
+    expect(loadInitialUIData().pythonTutorStandalonePrimitives).toBe(false);
+  });
+
+  it("round-trips pythonTutorReferenceArrows when persisted", () => {
+    saveUIState({
+      activeTab: "question",
+      questionIndex: null,
+      questionType: null,
+      submissionResults: null,
+      sandboxMode: false,
+      visualStyle: "pythonTutor",
+      pythonTutorReferenceArrows: true,
+    });
+
+    expect(loadInitialUIData().pythonTutorReferenceArrows).toBe(true);
+  });
+
+  it("round-trips pythonTutorStandalonePrimitives when persisted", () => {
+    saveUIState({
+      activeTab: "question",
+      questionIndex: null,
+      questionType: null,
+      submissionResults: null,
+      sandboxMode: false,
+      visualStyle: "pythonTutor",
+      pythonTutorStandalonePrimitives: true,
+    });
+
+    expect(loadInitialUIData().pythonTutorStandalonePrimitives).toBe(true);
+  });
+});
diff --git a/frontend/src/features/memoryModelEditor/utils/localStorage.ts b/frontend/src/features/memoryModelEditor/utils/localStorage.ts
index 2f63868..f93231e 100644
--- a/frontend/src/features/memoryModelEditor/utils/localStorage.ts
+++ b/frontend/src/features/memoryModelEditor/utils/localStorage.ts
@@ -1,6 +1,11 @@
 // Storage utility functions - pure functions for localStorage operations
 
-import { CanvasElement, SubmissionResult, Tab } from "../../shared/types";
+import {
+  CanvasElement,
+  SubmissionResult,
+  Tab,
+  VisualStyle,
+} from "../../shared/types";
 
 // Storage keys
 const CANVAS_STORAGE_KEY = "canvas_key";
@@ -22,6 +27,9 @@ const DEFAULT_UI_STATE = {
   questionType: null as "test" | "practice" | "prep" | null,
   submissionResults: null as SubmissionResult | null,
   sandboxMode: null as boolean | null,
+  visualStyle: "memoryviz" as VisualStyle,
+  pythonTutorReferenceArrows: false,
+  pythonTutorStandalonePrimitives: false,
 };
 
 export interface CanvasData {
@@ -54,12 +62,19 @@ export interface UIState {
   questionType: "test" | "practice" | "prep" | null;
   submissionResults: SubmissionResult | null;
   sandboxMode: boolean | null;
+  visualStyle?: VisualStyle;
+  pythonTutorReferenceArrows?: boolean;
+  pythonTutorStandalonePrimitives?: boolean;
   questionView?: QuestionView;
   isInfoPanelOpen?: boolean;
   canvasScale?: number;
   editorScale?: number;
 }
 
+function normalizeVisualStyle(rawStyle: unknown): VisualStyle {
+  return rawStyle === "pythonTutor" ? "pythonTutor" : "memoryviz";
+}
+
 /**
  * Loads initial canvas data from localStorage
  * @returns Canvas data with elements, ids, and classes
@@ -109,6 +124,12 @@ export function loadInitialUIData(): UIState {
     const sandboxMode =
       typeof parsed?.sandboxMode === "boolean" ? parsed.sandboxMode : null;
 
+    const visualStyle = normalizeVisualStyle(parsed?.visualStyle);
+    const pythonTutorReferenceArrows =
+      parsed?.pythonTutorReferenceArrows === true;
+    const pythonTutorStandalonePrimitives =
+      parsed?.pythonTutorStandalonePrimitives === true;
+
     const validViews = ["root", "loading", "test", "list", "question", "practice", "prep"];
     const questionView =
       typeof parsed?.questionView === "string" && validViews.includes(parsed.questionView) && parsed.questionView !== "loading"
@@ -138,6 +159,9 @@ export function loadInitialUIData(): UIState {
       questionType,
       submissionResults,
       sandboxMode,
+      visualStyle,
+      pythonTutorReferenceArrows,
+      pythonTutorStandalonePrimitives,
       questionView,
       isInfoPanelOpen,
       canvasScale,
diff --git a/frontend/src/features/palette/Palette.module.css b/frontend/src/features/palette/Palette.module.css
index 488869e..9f12b34 100644
--- a/frontend/src/features/palette/Palette.module.css
+++ b/frontend/src/features/palette/Palette.module.css
@@ -215,6 +215,15 @@
   gap: 16px;
 }
 
+.emptyState {
+  margin: 0;
+  color: var(--text-tertiary);
+  font-size: 0.88rem;
+  line-height: 1.5;
+  text-align: center;
+  max-width: 220px;
+}
+
 /* Override memory-viz box background fills for light mode in palette */
 :root[data-theme="light"] .paletteBoxes :global(svg g path[fill]:not([fill="none"])),
 .paletteBoxes :global(svg g path[fill]:not([fill="none"])) {
diff --git a/frontend/src/features/palette/Palette.test.tsx b/frontend/src/features/palette/Palette.test.tsx
new file mode 100644
index 0000000..b8aae92
--- /dev/null
+++ b/frontend/src/features/palette/Palette.test.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Palette from "./Palette";
+
+jest.mock("./components/PaletteBox", () => ({
+  __esModule: true,
+  default: ({ boxType }: { boxType: string }) => (
+    <div data-testid="palette-box">{boxType}</div>
+  ),
+}));
+
+jest.mock("../canvasControls/CanvasControls", () => ({
+  __esModule: true,
+  default: () => <div data-testid="canvas-controls" />,
+}));
+
+class ResizeObserverMock {
+  observe() {}
+  disconnect() {}
+  unobserve() {}
+}
+
+describe("Palette Python Tutor primitive mode", () => {
+  beforeAll(() => {
+    (global as typeof globalThis).ResizeObserver =
+      ResizeObserverMock as unknown as typeof ResizeObserver;
+  });
+
+  it("hides primitive palette boxes in inline mode and shows them in standalone mode", () => {
+    const { rerender } = render(
+      <Palette
+        activeTab="primitives"
+        setActive={jest.fn()}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={false}
+      />
+    );
+
+    expect(screen.queryAllByTestId("palette-box")).toHaveLength(0);
+    expect(
+      screen.getByText("Primitive values are created inline in Python Tutor mode.")
+    ).toBeInTheDocument();
+
+    rerender(
+      <Palette
+        activeTab="primitives"
+        setActive={jest.fn()}
+        visualStyle="pythonTutor"
+        pythonTutorStandalonePrimitives={true}
+      />
+    );
+
+    expect(screen.queryByText(/created inline/i)).toBeNull();
+    expect(screen.getAllByTestId("palette-box")).toHaveLength(5);
+  });
+});
diff --git a/frontend/src/features/palette/Palette.tsx b/frontend/src/features/palette/Palette.tsx
index d8d770d..16056e1 100644
--- a/frontend/src/features/palette/Palette.tsx
+++ b/frontend/src/features/palette/Palette.tsx
@@ -3,7 +3,12 @@ import PaletteBox from "./components/PaletteBox";
 import CanvasControls from "../canvasControls/CanvasControls";
 import { useResizable } from "./hooks/useResizable";
 import styles from "./Palette.module.css";
-import { PaletteTab, BoxTypeName, CanvasElement } from "../shared/types";
+import {
+  PaletteTab,
+  BoxTypeName,
+  CanvasElement,
+  VisualStyle,
+} from "../shared/types";
 
 // Move constants here for better organization
 const ALL_TYPES: readonly BoxTypeName[] = [
@@ -67,6 +72,12 @@ interface PaletteProps {
   onScaleChange?: (scale: number) => void;
   editorScale?: number;
   onEditorScaleChange?: (scale: number) => void;
+  visualStyle?: VisualStyle;
+  onVisualStyleChange?: (style: VisualStyle) => void;
+  pythonTutorReferenceArrows?: boolean;
+  onPythonTutorReferenceArrowsChange?: (value: boolean) => void;
+  pythonTutorStandalonePrimitives?: boolean;
+  onPythonTutorStandalonePrimitivesChange?: (value: boolean) => void;
   fontScale?: number;
   onFontScaleChange?: (delta: number) => void;
 }
@@ -99,6 +110,18 @@ function filterBoxesByRequired(
   return boxes.filter((boxType) => requiredBoxes.includes(boxType));
 }
 
+function filterBoxesByVisualStyle(
+  boxes: readonly BoxTypeName[],
+  visualStyle: VisualStyle,
+  pythonTutorStandalonePrimitives: boolean
+): BoxTypeName[] {
+  if (visualStyle !== "pythonTutor" || pythonTutorStandalonePrimitives) {
+    return [...boxes];
+  }
+
+  return boxes.filter((boxType) => !PRIMITIVE_TYPES.includes(boxType));
+}
+
 export default function Palette({
   activeTab,
   setActive,
@@ -116,6 +139,12 @@ export default function Palette({
   onScaleChange,
   editorScale,
   onEditorScaleChange,
+  visualStyle = "memoryviz",
+  onVisualStyleChange,
+  pythonTutorReferenceArrows = false,
+  onPythonTutorReferenceArrowsChange,
+  pythonTutorStandalonePrimitives = false,
+  onPythonTutorStandalonePrimitivesChange,
   fontScale,
   onFontScaleChange,
 }: PaletteProps) {
@@ -125,6 +154,11 @@ export default function Palette({
     isPracticeMode && requiredBoxes
       ? filterBoxesByRequired(allBoxes, requiredBoxes)
       : allBoxes;
+  const visibleBoxes = filterBoxesByVisualStyle(
+    boxes,
+    visualStyle,
+    pythonTutorStandalonePrimitives
+  );
 
   const { topHeight, handleMouseDown, containerRef } = useResizable({
     initialTopPercent: 60,
@@ -188,9 +222,22 @@ export default function Palette({
                   transition: 'transform 0.2s ease',
                 }}
               >
-                {boxes.map((boxType) => (
-                  <PaletteBox key={boxType} boxType={boxType} />
-                ))}
+                {visibleBoxes.length > 0 ? (
+                  visibleBoxes.map((boxType) => (
+                    <PaletteBox
+                      key={boxType}
+                      boxType={boxType}
+                      visualStyle={visualStyle}
+                    />
+                  ))
+                ) : (
+                  <p className={styles.emptyState}>
+                    {visualStyle === "pythonTutor" &&
+                    !pythonTutorStandalonePrimitives
+                      ? "Primitive values are created inline in Python Tutor mode."
+                      : "No boxes available in this tab."}
+                  </p>
+                )}
               </div>
             </div>
           </div>
@@ -222,6 +269,16 @@ export default function Palette({
             onScaleChange={onScaleChange}
             editorScale={editorScale}
             onEditorScaleChange={onEditorScaleChange}
+            visualStyle={visualStyle}
+            onVisualStyleChange={onVisualStyleChange}
+            pythonTutorReferenceArrows={pythonTutorReferenceArrows}
+            onPythonTutorReferenceArrowsChange={
+              onPythonTutorReferenceArrowsChange
+            }
+            pythonTutorStandalonePrimitives={pythonTutorStandalonePrimitives}
+            onPythonTutorStandalonePrimitivesChange={
+              onPythonTutorStandalonePrimitivesChange
+            }
             fontScale={fontScale}
             onFontScaleChange={onFontScaleChange}
           />
diff --git a/frontend/src/features/palette/components/PaletteBox.tsx b/frontend/src/features/palette/components/PaletteBox.tsx
index 95a335b..784b5af 100644
--- a/frontend/src/features/palette/components/PaletteBox.tsx
+++ b/frontend/src/features/palette/components/PaletteBox.tsx
@@ -1,10 +1,11 @@
 import { useRef } from "react";
 import { usePaletteBoxEffect } from "../hooks/usePalette";
-import { BoxTypeName } from "../../shared/types";
+import { BoxTypeName, VisualStyle } from "../../shared/types";
 
 interface PaletteBoxProps {
   /** The type of box to render (e.g., "primitive", "list", "dict") */
   boxType: BoxTypeName;
+  visualStyle: VisualStyle;
 }
 
 /**
@@ -13,12 +14,12 @@ interface PaletteBoxProps {
  * preview using `usePaletteBoxEffect`, and supports drag-and-drop to
  * create a new box on the canvas.
  */
-export default function PaletteBox({ boxType }: PaletteBoxProps) {
+export default function PaletteBox({ boxType, visualStyle }: PaletteBoxProps) {
   /** Ref to the div container that will hold the rendered SVG */
   const containerRef = useRef<HTMLDivElement>(null);
 
   /** Custom hook to render the box preview inside the container */
-  usePaletteBoxEffect(containerRef, boxType);
+  usePaletteBoxEffect(containerRef, boxType, visualStyle);
 
   /** Drag-and-drop: set box type on drag start */
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
diff --git a/frontend/src/features/palette/hooks/usePalette.tsx b/frontend/src/features/palette/hooks/usePalette.tsx
index 5f6a9f7..53be004 100644
--- a/frontend/src/features/palette/hooks/usePalette.tsx
+++ b/frontend/src/features/palette/hooks/usePalette.tsx
@@ -5,7 +5,7 @@
 
 import { useEffect, RefObject } from "react";
 import { createBoxRenderer } from "../utils/BoxRenderer";
-import { BoxTypeName } from "../../shared/types";
+import { BoxTypeName, VisualStyle } from "../../shared/types";
 
 /**
  * Renders a static preview SVG for a palette box type.
@@ -21,14 +21,15 @@ import { BoxTypeName } from "../../shared/types";
  */
 export const usePaletteBoxEffect = (
   containerRef: RefObject<HTMLDivElement | null>,
-  boxType: BoxTypeName
+  boxType: BoxTypeName,
+  visualStyle: VisualStyle
 ) => {
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
 
     try {
-      const svg = createBoxRenderer(boxType);
+      const svg = createBoxRenderer(boxType, visualStyle);
 
       container.innerHTML = "";
       container.appendChild(svg);
@@ -40,5 +41,5 @@ export const usePaletteBoxEffect = (
     } catch (error) {
       console.error(`Failed to render box type ${boxType}:`, error);
     }
-  }, [boxType, containerRef]);
+  }, [boxType, containerRef, visualStyle]);
 };
diff --git a/frontend/src/features/palette/utils/BoxRenderer.ts b/frontend/src/features/palette/utils/BoxRenderer.ts
index c684828..6542f8e 100644
--- a/frontend/src/features/palette/utils/BoxRenderer.ts
+++ b/frontend/src/features/palette/utils/BoxRenderer.ts
@@ -1,8 +1,21 @@
 import MemoryViz from "memory-viz";
-import { BoxTypeName } from "../../shared/types";
+import { BoxTypeName, VisualStyle } from "../../shared/types";
 import { getBoxConfig, DEFAULT_PALETTE_STYLE } from "../../shared/boxConfig";
+import { createPythonTutorBoxRenderer } from "../../canvas/utils/pythonTutorRenderer";
+import { createPythonTutorPalettePreview } from "../../canvas/utils/pythonTutorReferences";
+
+export function createBoxRenderer(
+  boxType: BoxTypeName,
+  visualStyle: VisualStyle = "memoryviz"
+): SVGSVGElement {
+  if (visualStyle === "pythonTutor") {
+    const preview = createPythonTutorPalettePreview(boxType);
+    return createPythonTutorBoxRenderer(preview.element, {
+      elementsById: preview.elementsById,
+      renderMode: preview.renderMode,
+    });
+  }
 
-export function createBoxRenderer(boxType: BoxTypeName): SVGSVGElement {
   const { MemoryModel } = MemoryViz;
   const config = getBoxConfig(boxType);
 
diff --git a/frontend/src/features/shared/types.ts b/frontend/src/features/shared/types.ts
index 1d4c0ca..e331e7e 100644
--- a/frontend/src/features/shared/types.ts
+++ b/frontend/src/features/shared/types.ts
@@ -1,6 +1,10 @@
+import type { Dispatch, SetStateAction } from "react";
+
 export type PrimitiveType = "NoneType" | "int" | "float" | "str" | "bool";
 export type CollectionType = "list" | "tuple" | "set" | "dict";
 export type SpecialType = "function" | "class";
+export type VisualStyle = "memoryviz" | "pythonTutor";
+export type RenderMode = "canvas" | "palette";
 
 /**
  * Box type names (used for palette and box configuration lookup)
@@ -92,6 +96,7 @@ export interface CanvasElement {
   x: number;
   y: number;
   kind: BoxType;
+  generatedInlinePrimitive?: boolean;
   invalidated?: boolean;
   errors?: ElementError[]; // Unified error system (validation + feedback)
   color?: string; // Optional color to apply to the element (e.g., for errors, warnings, etc.)
@@ -151,14 +156,8 @@ export type ID = number | "_";
 export type ClassID = string | "_";
 
 export interface BoxEditorType {
-  metadata: {
-    id: ID;
-    kind: BoxType;
-    className?: ClassID;
-    errors?: ElementError[]; // Updated to use unified error system
-    invalidated?: boolean;
-  };
-  onSave: (id: ID, kind: BoxType) => void;
+  metadata: CanvasElement;
+  onSave: (id: ID, kind: BoxType, invalidated?: boolean) => void;
   onRemove: () => void;
   onClose: () => void;
 
@@ -175,6 +174,9 @@ export interface BoxEditorType {
   canManageFunctions?: boolean;
   elements?: any[];
   questionFunctionNames?: string[];
+  visualStyle?: VisualStyle;
+  pythonTutorStandalonePrimitives?: boolean;
+  onElementsChange?: Dispatch<SetStateAction<CanvasElement[]>>;
 }
 
 export type Tab = "feedback" | "question";
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 09fdb1a..20b425d 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -66,6 +66,15 @@
   --fade-box-fill: #f8fafc;
   --fade-box-line-color: #e2e8f0;
   --hide-box-fill: #ffffff;
+
+  /* Python Tutor styling */
+  --python-tutor-box-bg: #f1efc6;
+  --python-tutor-border: #7d7b63;
+  --python-tutor-header-text: #666666;
+  --python-tutor-body-text: #111111;
+  --python-tutor-reference-text: #1f4f82;
+  --python-tutor-selected-frame-bg: #d8dee8;
+  --python-tutor-frame-line: #a8a8a8;
 }
 
 :root[data-theme="dark"] {
@@ -132,6 +141,15 @@
   --fade-box-fill: #2d2d2d;
   --fade-box-line-color: #3a3a3a;
   --hide-box-fill: #2d2d2d;
+
+  /* Python Tutor styling */
+  --python-tutor-box-bg: #f1efc6;
+  --python-tutor-border: #7d7b63;
+  --python-tutor-header-text: #666666;
+  --python-tutor-body-text: #111111;
+  --python-tutor-reference-text: #1f4f82;
+  --python-tutor-selected-frame-bg: #d8dee8;
+  --python-tutor-frame-line: #a8a8a8;
 }
 
 /* Apply theme to body */