diff --git a/components/DrawingSettings.tsx b/components/DrawingSettings.tsx
new file mode 100644
index 0000000..27575d1
--- /dev/null
+++ b/components/DrawingSettings.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Trash2, Palette } from "lucide-react";
+import { Slider } from "@/components/ui/slider";
+import { Checkbox } from "@/components/ui/checkbox";
+import { FreehandDrawingData } from "./FreehandDrawingNode";
+import { ShapeData } from "./ShapeNode";
+import { TextAnnotationData } from "./TextAnnotationNode";
+
+const colorPresets = [
+  "#000000", "#FF0000", "#00FF00", "#0000FF",
+  "#FFFF00", "#FF00FF", "#00FFFF", "#FFA500",
+  "#800080", "#008080", "#808080", "#FFFFFF"
+];
+
+interface DrawingSettingsProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  id: string;
+  data: FreehandDrawingData | ShapeData | TextAnnotationData;
+  type: "freehand" | "shape" | "text";
+  handleLabelChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleNotesChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleColorChange?: (color: string) => void;
+  handleFillColorChange?: (fillColor: string) => void;
+  handleFilledChange?: (filled: boolean) => void;
+  handleStrokeWidthChange?: (width: number) => void;
+  handleTextChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  handleBackgroundColorChange?: (color: string) => void;
+  handleFontSizeChange?: (size: number) => void;
+  handleFontWeightChange?: (weight: "normal" | "bold") => void;
+  handleDelete: () => void;
+}
+
+export default function DrawingSettings({
+  isOpen,
+  setIsOpen,
+  id,
+  data,
+  type,
+  handleLabelChange,
+  handleNotesChange,
+  handleColorChange,
+  handleFillColorChange,
+  handleFilledChange,
+  handleStrokeWidthChange,
+  handleTextChange,
+  handleBackgroundColorChange,
+  handleFontSizeChange,
+  handleFontWeightChange,
+  handleDelete,
+}: DrawingSettingsProps) {
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <div
+          className="absolute inset-0 popover-trigger"
+          style={{ cursor: "move" }}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="w-80 max-h-[80vh] overflow-y-auto">
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor={`label-${id}`}>Label</Label>
+            <Input
+              id={`label-${id}`}
+              value={data.label || ""}
+              onChange={handleLabelChange}
+              placeholder="Enter label"
+            />
+          </div>
+
+          {type === "text" && handleTextChange && (
+            <div className="space-y-2">
+              <Label htmlFor={`text-${id}`}>Text</Label>
+              <Textarea
+                id={`text-${id}`}
+                value={(data as TextAnnotationData).text || ""}
+                onChange={handleTextChange}
+                placeholder="Enter text"
+                rows={3}
+              />
+            </div>
+          )}
+
+          {type === "text" && handleFontSizeChange && (
+            <div className="space-y-2">
+              <Label>Font Size: {(data as TextAnnotationData).fontSize || 16}px</Label>
+              <Slider
+                value={[(data as TextAnnotationData).fontSize || 16]}
+                onValueChange={([value]) => handleFontSizeChange(value)}
+                min={8}
+                max={48}
+                step={1}
+              />
+            </div>
+          )}
+
+          {type === "text" && handleFontWeightChange && (
+            <div className="space-y-2">
+              <Label>Font Weight</Label>
+              <div className="flex gap-2">
+                <Button
+                  variant={(data as TextAnnotationData).fontWeight === "normal" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => handleFontWeightChange("normal")}
+                >
+                  Normal
+                </Button>
+                <Button
+                  variant={(data as TextAnnotationData).fontWeight === "bold" ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => handleFontWeightChange("bold")}
+                >
+                  Bold
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {handleColorChange && (
+            <div className="space-y-2">
+              <Label>
+                <Palette className="inline w-4 h-4 mr-1" />
+                {type === "text" ? "Text Color" : "Stroke Color"}
+              </Label>
+              <div className="grid grid-cols-6 gap-2">
+                {colorPresets.map((color) => (
+                  <button
+                    key={color}
+                    className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                    style={{
+                      backgroundColor: color,
+                      borderColor: data.color === color ? "#000" : "#ccc",
+                    }}
+                    onClick={() => handleColorChange(color)}
+                  />
+                ))}
+              </div>
+              <Input
+                type="color"
+                value={data.color || "#000000"}
+                onChange={(e) => handleColorChange(e.target.value)}
+                className="w-full h-10"
+              />
+            </div>
+          )}
+
+          {type === "text" && handleBackgroundColorChange && (
+            <div className="space-y-2">
+              <Label>Background Color</Label>
+              <div className="grid grid-cols-6 gap-2">
+                <button
+                  className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                  style={{
+                    backgroundColor: "transparent",
+                    borderColor: (data as TextAnnotationData).backgroundColor === "transparent" ? "#000" : "#ccc",
+                    backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc)",
+                    backgroundSize: "8px 8px",
+                    backgroundPosition: "0 0, 4px 4px",
+                  }}
+                  onClick={() => handleBackgroundColorChange("transparent")}
+                />
+                {colorPresets.map((color) => (
+                  <button
+                    key={color}
+                    className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                    style={{
+                      backgroundColor: color,
+                      borderColor: (data as TextAnnotationData).backgroundColor === color ? "#000" : "#ccc",
+                    }}
+                    onClick={() => handleBackgroundColorChange(color)}
+                  />
+                ))}
+              </div>
+              <Input
+                type="color"
+                value={(data as TextAnnotationData).backgroundColor !== "transparent"
+                  ? (data as TextAnnotationData).backgroundColor
+                  : "#FFFFFF"}
+                onChange={(e) => handleBackgroundColorChange(e.target.value)}
+                className="w-full h-10"
+              />
+            </div>
+          )}
+
+          {type === "shape" && handleFillColorChange && handleFilledChange && (
+            <>
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id={`filled-${id}`}
+                  checked={(data as ShapeData).filled || false}
+                  onCheckedChange={(checked) => handleFilledChange(!!checked)}
+                />
+                <Label htmlFor={`filled-${id}`}>Fill Shape</Label>
+              </div>
+              {(data as ShapeData).filled && (
+                <div className="space-y-2">
+                  <Label>Fill Color</Label>
+                  <div className="grid grid-cols-6 gap-2">
+                    {colorPresets.map((color) => (
+                      <button
+                        key={color}
+                        className="w-8 h-8 rounded border-2 hover:scale-110 transition-transform"
+                        style={{
+                          backgroundColor: color,
+                          borderColor: (data as ShapeData).fillColor === color ? "#000" : "#ccc",
+                        }}
+                        onClick={() => handleFillColorChange(color)}
+                      />
+                    ))}
+                  </div>
+                  <Input
+                    type="color"
+                    value={(data as ShapeData).fillColor || "#FFFFFF"}
+                    onChange={(e) => handleFillColorChange(e.target.value)}
+                    className="w-full h-10"
+                  />
+                </div>
+              )}
+            </>
+          )}
+
+          {(type === "freehand" || type === "shape") && handleStrokeWidthChange && (
+            <div className="space-y-2">
+              <Label>
+                Stroke Width: {(data as FreehandDrawingData | ShapeData).strokeWidth || 2}px
+              </Label>
+              <Slider
+                value={[(data as FreehandDrawingData | ShapeData).strokeWidth || 2]}
+                onValueChange={([value]) => handleStrokeWidthChange(value)}
+                min={1}
+                max={10}
+                step={1}
+              />
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label htmlFor={`notes-${id}`}>Notes</Label>
+            <Textarea
+              id={`notes-${id}`}
+              value={data.notes || ""}
+              onChange={handleNotesChange}
+              placeholder="Add notes..."
+              rows={3}
+            />
+          </div>
+
+          <Button
+            variant="destructive"
+            size="sm"
+            onClick={handleDelete}
+            className="w-full"
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            Delete
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/components/DrawingToolbar.tsx b/components/DrawingToolbar.tsx
new file mode 100644
index 0000000..453c963
--- /dev/null
+++ b/components/DrawingToolbar.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Pencil,
+  Square,
+  Circle,
+  ArrowRight,
+  Type,
+  MousePointer,
+} from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+export type DrawingTool = "select" | "freehand" | "rectangle" | "circle" | "arrow" | "text";
+
+interface DrawingToolbarProps {
+  activeTool: DrawingTool;
+  onToolChange: (tool: DrawingTool) => void;
+  isEditable: boolean;
+}
+
+export default function DrawingToolbar({
+  activeTool,
+  onToolChange,
+  isEditable,
+}: DrawingToolbarProps) {
+  if (!isEditable) return null;
+
+  const tools: { id: DrawingTool; icon: React.ReactNode; label: string }[] = [
+    { id: "select", icon: <MousePointer className="w-4 h-4" />, label: "Select" },
+    { id: "freehand", icon: <Pencil className="w-4 h-4" />, label: "Freehand Draw" },
+    { id: "rectangle", icon: <Square className="w-4 h-4" />, label: "Rectangle" },
+    { id: "circle", icon: <Circle className="w-4 h-4" />, label: "Circle" },
+    { id: "arrow", icon: <ArrowRight className="w-4 h-4" />, label: "Arrow" },
+    { id: "text", icon: <Type className="w-4 h-4" />, label: "Text" },
+  ];
+
+  return (
+    <div
+      className="absolute top-4 left-1/2 -translate-x-1/2 bg-white rounded-lg shadow-lg border border-gray-200 p-2 flex gap-1"
+      style={{ zIndex: 1000 }}
+    >
+      <TooltipProvider>
+        {tools.map((tool) => (
+          <Tooltip key={tool.id}>
+            <TooltipTrigger asChild>
+              <Button
+                variant={activeTool === tool.id ? "default" : "ghost"}
+                size="sm"
+                onClick={() => onToolChange(tool.id)}
+                className="w-10 h-10 p-0"
+              >
+                {tool.icon}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{tool.label}</p>
+            </TooltipContent>
+          </Tooltip>
+        ))}
+      </TooltipProvider>
+    </div>
+  );
+}
diff --git a/components/EventFlow.tsx b/components/EventFlow.tsx
index d26be5e..37f45d4 100644
--- a/components/EventFlow.tsx
+++ b/components/EventFlow.tsx
@@ -32,6 +32,10 @@ import EventMapSelect from "@components/EventMapSelect";
 import { ActiveNodeContext, IconNode } from "@components/IconNode";
 import Legend from "@components/Legend";
 import ControlButtons from "./ControlButtons";
+import DrawingToolbar, { DrawingTool } from "./DrawingToolbar";
+import { FreehandDrawingNode, FreehandDrawingData } from "./FreehandDrawingNode";
+import { ShapeNode, ShapeData } from "./ShapeNode";
+import { TextAnnotationNode, TextAnnotationData } from "./TextAnnotationNode";
 
 // Types
 import { CustomNode } from "@/types/CustomNode";
@@ -50,6 +54,9 @@ const clientId = createId();
 const nodeTypes = {
   iconNode: IconNode,
   customImageNode: CustomImageNode,
+  freehandDrawing: FreehandDrawingNode,
+  shape: ShapeNode,
+  textAnnotation: TextAnnotationNode,
 };
 
 const edgeTypes = {
@@ -201,6 +208,12 @@ function Flow({
   // Add state for tracking the active node
   const [activeNodeId, setActiveNodeId] = useState<string | null>(null);
 
+  // Drawing tool state
+  const [activeTool, setActiveTool] = useState<DrawingTool>("select");
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [drawingPath, setDrawingPath] = useState<{ x: number; y: number }[]>([]);
+  const [drawStartPos, setDrawStartPos] = useState<{ x: number; y: number } | null>(null);
+
   /**
    * Handle keyboard shortcuts (edit mode only)
    */
@@ -587,6 +600,237 @@ function Flow({
     [screenToFlowPosition, setNodes]
   );
 
+  /**
+   * Handle drawing tool change
+   */
+  const handleToolChange = useCallback((tool: DrawingTool) => {
+    setActiveTool(tool);
+    setIsDrawing(false);
+    setDrawingPath([]);
+    setDrawStartPos(null);
+  }, []);
+
+  /**
+   * Handle mouse down for drawing on overlay
+   */
+  const handleDrawingMouseDown = useCallback(
+    (event: React.MouseEvent) => {
+      if (!isEditable || activeTool === "select") return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      setIsDrawing(true);
+      setDrawStartPos(position);
+      setDrawingPath([position]);
+    },
+    [isEditable, activeTool, screenToFlowPosition]
+  );
+
+  /**
+   * Handle mouse move while drawing on overlay
+   */
+  const handleDrawingMouseMove = useCallback(
+    (event: React.MouseEvent) => {
+      if (!isDrawing || activeTool === "select") return;
+
+      event.preventDefault();
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      if (activeTool === "freehand") {
+        setDrawingPath((path) => [...path, position]);
+      }
+    },
+    [isDrawing, activeTool, screenToFlowPosition]
+  );
+
+  /**
+   * Handle mouse up to finish drawing
+   */
+  const handleDrawingMouseUp = useCallback(
+    (event: React.MouseEvent) => {
+      if (!isDrawing || !drawStartPos) return;
+
+      event.preventDefault();
+
+      const endPosition = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      // Create the appropriate node based on the active tool
+      let newNode: CustomNode | null = null;
+
+      if (activeTool === "freehand" && drawingPath.length > 1) {
+        // Convert drawing path to SVG path
+        const minX = Math.min(...drawingPath.map((p) => p.x));
+        const minY = Math.min(...drawingPath.map((p) => p.y));
+        const pathData = drawingPath
+          .map((p, i) => {
+            const x = p.x - minX;
+            const y = p.y - minY;
+            return `${i === 0 ? "M" : "L"} ${x} ${y}`;
+          })
+          .join(" ");
+
+        newNode = {
+          id: getId(),
+          type: "freehandDrawing",
+          position: { x: minX, y: minY },
+          data: {
+            label: "",
+            path: pathData,
+            color: "#000000",
+            strokeWidth: 2,
+            notes: "",
+            rotation: 0,
+          } as FreehandDrawingData,
+          dragging: false,
+          zIndex: 0,
+          selectable: true,
+          deletable: true,
+          selected: false,
+          draggable: true,
+          isConnectable: false,
+          positionAbsoluteX: minX,
+          positionAbsoluteY: minY,
+        };
+      } else if (
+        activeTool === "rectangle" ||
+        activeTool === "circle" ||
+        activeTool === "arrow"
+      ) {
+        const width = Math.abs(endPosition.x - drawStartPos.x);
+        const height = Math.abs(endPosition.y - drawStartPos.y);
+        const x = Math.min(drawStartPos.x, endPosition.x);
+        const y = Math.min(drawStartPos.y, endPosition.y);
+
+        if (width > 5 && height > 5) {
+          newNode = {
+            id: getId(),
+            type: "shape",
+            position: { x, y },
+            data: {
+              label: "",
+              shapeType: activeTool,
+              color: "#000000",
+              strokeWidth: 2,
+              fillColor: "#FFFFFF",
+              filled: false,
+              width,
+              height,
+              notes: "",
+              rotation: 0,
+            } as ShapeData,
+            dragging: false,
+            zIndex: 0,
+            selectable: true,
+            deletable: true,
+            selected: false,
+            draggable: true,
+            isConnectable: false,
+            positionAbsoluteX: x,
+            positionAbsoluteY: y,
+          };
+        }
+      } else if (activeTool === "text") {
+        newNode = {
+          id: getId(),
+          type: "textAnnotation",
+          position: drawStartPos,
+          data: {
+            label: "",
+            text: "Click to edit",
+            color: "#000000",
+            fontSize: 16,
+            fontWeight: "normal",
+            backgroundColor: "transparent",
+            notes: "",
+            rotation: 0,
+          } as TextAnnotationData,
+          dragging: false,
+          zIndex: 0,
+          selectable: true,
+          deletable: true,
+          selected: false,
+          draggable: true,
+          isConnectable: false,
+          positionAbsoluteX: drawStartPos.x,
+          positionAbsoluteY: drawStartPos.y,
+        };
+      }
+
+      if (newNode) {
+        setNodes((nds) => [...nds, newNode as CustomNode]);
+      }
+
+      // Reset drawing state
+      setIsDrawing(false);
+      setDrawingPath([]);
+      setDrawStartPos(null);
+    },
+    [
+      isDrawing,
+      drawStartPos,
+      activeTool,
+      drawingPath,
+      screenToFlowPosition,
+      setNodes,
+    ]
+  );
+
+  /**
+   * Render preview of shape being drawn
+   */
+  const renderDrawingPreview = useCallback(() => {
+    if (!isDrawing || !drawStartPos || activeTool === "select") return null;
+
+    const viewport = rfInstance?.getViewport();
+    if (!viewport) return null;
+
+    if (activeTool === "freehand" && drawingPath.length > 1) {
+      const pathData = drawingPath
+        .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+        .join(" ");
+
+      return (
+        <svg
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            zIndex: 1000,
+          }}
+        >
+          <g transform={`translate(${viewport.x}, ${viewport.y}) scale(${viewport.zoom})`}>
+            <path
+              d={pathData}
+              stroke="#000000"
+              strokeWidth={2 / viewport.zoom}
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </g>
+        </svg>
+      );
+    }
+
+    return null;
+  }, [isDrawing, drawStartPos, drawingPath, activeTool, rfInstance]);
+
   // Memoize the active node context value
   const activeNodeContextValue = useMemo(
     () => ({ activeNodeId, setActiveNodeId }),
@@ -595,7 +839,7 @@ function Flow({
 
   return (
     <ActiveNodeContext.Provider value={activeNodeContextValue}>
-      <div style={{ width: "100vw", height: "100vh" }} ref={reactFlowWrapper} className="select-none">
+      <div style={{ width: "100vw", height: "100vh", position: "relative" }} ref={reactFlowWrapper} className="select-none">
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -606,9 +850,10 @@ function Flow({
           onConnect={onConnect}
           zoomOnScroll={false}
           panOnScroll={false}
+          panOnDrag={activeTool === "select"}
           nodeTypes={nodeTypes}
-          nodesDraggable={isEditable}
-          elementsSelectable={isEditable}
+          nodesDraggable={isEditable && activeTool === "select"}
+          elementsSelectable={isEditable && activeTool === "select"}
           nodesConnectable={isEditable}
           className="touch-none select-none"
           selectionKeyCode={'Shift'}
@@ -644,6 +889,34 @@ function Flow({
             locations={eventLocations}
           />
         </ReactFlow>
+
+        {/* Drawing Toolbar - outside ReactFlow with high z-index */}
+        <DrawingToolbar
+          activeTool={activeTool}
+          onToolChange={handleToolChange}
+          isEditable={isEditable}
+        />
+
+        {/* Drawing overlay - only shown when not in select mode */}
+        {isEditable && activeTool !== "select" && (
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              cursor: activeTool === "freehand" ? "crosshair" : "crosshair",
+              zIndex: 5,
+            }}
+            onMouseDown={handleDrawingMouseDown}
+            onMouseMove={handleDrawingMouseMove}
+            onMouseUp={handleDrawingMouseUp}
+            onMouseLeave={handleDrawingMouseUp}
+          >
+            {renderDrawingPreview()}
+          </div>
+        )}
       </div>
     </ActiveNodeContext.Provider>
   );
diff --git a/components/FreehandDrawingNode.tsx b/components/FreehandDrawingNode.tsx
new file mode 100644
index 0000000..6413090
--- /dev/null
+++ b/components/FreehandDrawingNode.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { NodeProps, useReactFlow } from "@xyflow/react";
+import { memo, useCallback, useContext, useState } from "react";
+import { useParams } from "next/navigation";
+import { ActiveNodeContext } from "./IconNode";
+import DrawingSettings from "./DrawingSettings";
+
+export interface FreehandDrawingData {
+  label: string;
+  path: string; // SVG path data
+  color?: string;
+  strokeWidth?: number;
+  notes?: string;
+  rotation: number;
+}
+
+export const FreehandDrawingNode = memo(function FreehandDrawingNode({
+  data,
+  id,
+  selected,
+}: NodeProps<{ data: FreehandDrawingData }>) {
+  const { deleteElements, setNodes } = useReactFlow();
+  const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const params = useParams<{ mode: string }>();
+  const isEditable = params.mode === "edit";
+
+  const handleDelete = useCallback(() => {
+    deleteElements({ nodes: [{ id }] });
+  }, [deleteElements, id]);
+
+  const handleColorChange = useCallback(
+    (color: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, color } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleStrokeWidthChange = useCallback(
+    (strokeWidth: number) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, strokeWidth } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleLabelChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, label: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleNotesChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, notes: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const color = data.color || "#000000";
+  const strokeWidth = data.strokeWidth || 2;
+
+  // Calculate bounding box from path data
+  const pathPoints = data.path.match(/[\d.]+/g)?.map(Number) || [];
+  const xCoords: number[] = [];
+  const yCoords: number[] = [];
+
+  for (let i = 0; i < pathPoints.length; i += 2) {
+    if (pathPoints[i] !== undefined) xCoords.push(pathPoints[i]);
+    if (pathPoints[i + 1] !== undefined) yCoords.push(pathPoints[i + 1]);
+  }
+
+  const minX = Math.min(...xCoords, 0);
+  const maxX = Math.max(...xCoords, 100);
+  const minY = Math.min(...yCoords, 0);
+  const maxY = Math.max(...yCoords, 100);
+
+  const width = maxX - minX + strokeWidth * 2;
+  const height = maxY - minY + strokeWidth * 2;
+  const viewBoxWidth = maxX - minX;
+  const viewBoxHeight = maxY - minY;
+
+  return (
+    <>
+      <div
+        className="cursor-move"
+        onClick={() => isEditable && setIsOpen(true)}
+        style={{
+          transform: `rotate(${data.rotation}deg)`,
+          border: selected ? "2px dashed #3b82f6" : "2px dashed transparent",
+          padding: "2px",
+          borderRadius: "4px",
+        }}
+      >
+        <svg
+          width={width}
+          height={height}
+          viewBox={`${minX} ${minY} ${viewBoxWidth} ${viewBoxHeight}`}
+          style={{ overflow: "visible" }}
+        >
+          <path
+            d={data.path}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </div>
+      {isEditable && (
+        <DrawingSettings
+          isOpen={isOpen}
+          setIsOpen={(open: boolean) => {
+            setIsOpen(open);
+            if (open) {
+              setActiveNodeId(id);
+            } else if (activeNodeId === id) {
+              setActiveNodeId(null);
+            }
+          }}
+          id={id}
+          data={data}
+          type="freehand"
+          handleLabelChange={handleLabelChange}
+          handleNotesChange={handleNotesChange}
+          handleColorChange={handleColorChange}
+          handleStrokeWidthChange={handleStrokeWidthChange}
+          handleDelete={handleDelete}
+        />
+      )}
+    </>
+  );
+});
diff --git a/components/ShapeNode.tsx b/components/ShapeNode.tsx
new file mode 100644
index 0000000..c1779aa
--- /dev/null
+++ b/components/ShapeNode.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import { NodeProps, useReactFlow } from "@xyflow/react";
+import { memo, useCallback, useContext, useState } from "react";
+import { useParams } from "next/navigation";
+import { ActiveNodeContext } from "./IconNode";
+import DrawingSettings from "./DrawingSettings";
+
+export interface ShapeData {
+  label: string;
+  shapeType: "rectangle" | "circle" | "arrow";
+  color?: string;
+  strokeWidth?: number;
+  fillColor?: string;
+  filled?: boolean;
+  width?: number;
+  height?: number;
+  notes?: string;
+  rotation: number;
+}
+
+export const ShapeNode = memo(function ShapeNode({
+  data,
+  id,
+  selected,
+}: NodeProps<{ data: ShapeData }>) {
+  const { deleteElements, setNodes } = useReactFlow();
+  const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const params = useParams<{ mode: string }>();
+  const isEditable = params.mode === "edit";
+
+  const handleDelete = useCallback(() => {
+    deleteElements({ nodes: [{ id }] });
+  }, [deleteElements, id]);
+
+  const handleColorChange = useCallback(
+    (color: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, color } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFillColorChange = useCallback(
+    (fillColor: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, fillColor } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFilledChange = useCallback(
+    (filled: boolean) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, filled } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleStrokeWidthChange = useCallback(
+    (strokeWidth: number) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, strokeWidth } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleLabelChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, label: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleNotesChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, notes: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const color = data.color || "#000000";
+  const strokeWidth = data.strokeWidth || 2;
+  const fillColor = data.fillColor || "transparent";
+  const filled = data.filled || false;
+  const width = data.width || 100;
+  const height = data.height || 100;
+
+  const renderShape = () => {
+    switch (data.shapeType) {
+      case "rectangle":
+        return (
+          <rect
+            x="0"
+            y="0"
+            width={width}
+            height={height}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill={filled ? fillColor : "transparent"}
+            rx="4"
+          />
+        );
+      case "circle":
+        return (
+          <circle
+            cx={width / 2}
+            cy={height / 2}
+            r={Math.min(width, height) / 2}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill={filled ? fillColor : "transparent"}
+          />
+        );
+      case "arrow":
+        return (
+          <g>
+            <line
+              x1="10"
+              y1={height / 2}
+              x2={width - 10}
+              y2={height / 2}
+              stroke={color}
+              strokeWidth={strokeWidth}
+            />
+            <polygon
+              points={`${width - 10},${height / 2 - 10} ${width},${height / 2} ${width - 10},${height / 2 + 10}`}
+              fill={color}
+            />
+          </g>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <>
+      <div
+        className="cursor-move"
+        onClick={() => isEditable && setIsOpen(true)}
+        style={{
+          transform: `rotate(${data.rotation}deg)`,
+          border: selected ? "2px dashed #3b82f6" : "2px dashed transparent",
+          padding: "2px",
+          borderRadius: "4px",
+        }}
+      >
+        <svg
+          width={width}
+          height={height}
+          viewBox={`0 0 ${width} ${height}`}
+          style={{ overflow: "visible" }}
+        >
+          {renderShape()}
+        </svg>
+      </div>
+      {isEditable && (
+        <DrawingSettings
+          isOpen={isOpen}
+          setIsOpen={(open: boolean) => {
+            setIsOpen(open);
+            if (open) {
+              setActiveNodeId(id);
+            } else if (activeNodeId === id) {
+              setActiveNodeId(null);
+            }
+          }}
+          id={id}
+          data={data}
+          type="shape"
+          handleLabelChange={handleLabelChange}
+          handleNotesChange={handleNotesChange}
+          handleColorChange={handleColorChange}
+          handleFillColorChange={handleFillColorChange}
+          handleFilledChange={handleFilledChange}
+          handleStrokeWidthChange={handleStrokeWidthChange}
+          handleDelete={handleDelete}
+        />
+      )}
+    </>
+  );
+});
diff --git a/components/TextAnnotationNode.tsx b/components/TextAnnotationNode.tsx
new file mode 100644
index 0000000..21b853d
--- /dev/null
+++ b/components/TextAnnotationNode.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { NodeProps, useReactFlow } from "@xyflow/react";
+import { memo, useCallback, useContext, useState } from "react";
+import { useParams } from "next/navigation";
+import { ActiveNodeContext } from "./IconNode";
+import DrawingSettings from "./DrawingSettings";
+
+export interface TextAnnotationData {
+  label: string;
+  text: string;
+  color?: string;
+  fontSize?: number;
+  fontWeight?: "normal" | "bold";
+  backgroundColor?: string;
+  notes?: string;
+  rotation: number;
+}
+
+export const TextAnnotationNode = memo(function TextAnnotationNode({
+  data,
+  id,
+  selected,
+}: NodeProps<{ data: TextAnnotationData }>) {
+  const { deleteElements, setNodes } = useReactFlow();
+  const { activeNodeId, setActiveNodeId } = useContext(ActiveNodeContext);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const params = useParams<{ mode: string }>();
+  const isEditable = params.mode === "edit";
+
+  const handleDelete = useCallback(() => {
+    deleteElements({ nodes: [{ id }] });
+  }, [deleteElements, id]);
+
+  const handleColorChange = useCallback(
+    (color: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, color } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleBackgroundColorChange = useCallback(
+    (backgroundColor: string) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, backgroundColor } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFontSizeChange = useCallback(
+    (fontSize: number) => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, fontSize } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleFontWeightChange = useCallback(
+    (fontWeight: "normal" | "bold") => {
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, fontWeight } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleTextChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, text: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleLabelChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, label: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const handleNotesChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === id
+            ? { ...node, data: { ...node.data, notes: newValue } }
+            : node
+        )
+      );
+    },
+    [id, setNodes]
+  );
+
+  const color = data.color || "#000000";
+  const fontSize = data.fontSize || 16;
+  const fontWeight = data.fontWeight || "normal";
+  const backgroundColor = data.backgroundColor || "transparent";
+
+  return (
+    <>
+      <div
+        className="cursor-move px-3 py-2 rounded min-w-[100px] max-w-[300px]"
+        onClick={() => isEditable && setIsOpen(true)}
+        style={{
+          transform: `rotate(${data.rotation}deg)`,
+          color: color,
+          fontSize: `${fontSize}px`,
+          fontWeight: fontWeight,
+          backgroundColor: backgroundColor,
+          border: selected
+            ? "2px dashed #3b82f6"
+            : backgroundColor === "transparent"
+            ? "none"
+            : undefined,
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+        }}
+      >
+        {data.text || "Click to edit text"}
+      </div>
+      {isEditable && (
+        <DrawingSettings
+          isOpen={isOpen}
+          setIsOpen={(open: boolean) => {
+            setIsOpen(open);
+            if (open) {
+              setActiveNodeId(id);
+            } else if (activeNodeId === id) {
+              setActiveNodeId(null);
+            }
+          }}
+          id={id}
+          data={data}
+          type="text"
+          handleLabelChange={handleLabelChange}
+          handleNotesChange={handleNotesChange}
+          handleTextChange={handleTextChange}
+          handleColorChange={handleColorChange}
+          handleBackgroundColorChange={handleBackgroundColorChange}
+          handleFontSizeChange={handleFontSizeChange}
+          handleFontWeightChange={handleFontWeightChange}
+          handleDelete={handleDelete}
+        />
+      )}
+    </>
+  );
+});
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..df61a13
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..c31c2b3
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/package.json b/package.json
index 89a15bc..eda57ff 100644
--- a/package.json
+++ b/package.json
@@ -24,11 +24,13 @@
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.1.4",
     "@radix-ui/react-tabs": "^1.1.4",