diff --git a/frontend/src/features/authoring/AuthoringToolPage.jsx b/frontend/src/features/authoring/AuthoringToolPage.jsx
index 025afca6..d0a57df1 100644
--- a/frontend/src/features/authoring/AuthoringToolPage.jsx
+++ b/frontend/src/features/authoring/AuthoringToolPage.jsx
@@ -47,20 +47,9 @@ export default function AuthoringToolPage() {
     return () => clearInterval(autosave);
   }, [sceneId]);
 
-  // if the active scene was deleted, switch to the first available scene
-  useEffect(() => {
-    if (!sceneId || !scenes) return;
-    if (!scenes.find((s) => s._id === sceneId)) {
-      const next = scenes[0];
-      if (next) replace(next);
-    }
-  }, [scenes]);
-
   useEffect(() => {
     const activeScene = localStorage.getItem(`${scenarioId}:activeScene`);
-    const found = activeScene
-      ? scenes.find((s) => s._id === activeScene)
-      : null;
+    const found = scenes.find((s) => s._id === activeScene);
     const target = found ?? scenes[0];
     if (target) replace(target);
 
diff --git a/frontend/src/features/authoring/canvas/Overlay.tsx b/frontend/src/features/authoring/canvas/Overlay.tsx
index 6d8cfcdb..f553ad57 100644
--- a/frontend/src/features/authoring/canvas/Overlay.tsx
+++ b/frontend/src/features/authoring/canvas/Overlay.tsx
@@ -10,6 +10,7 @@ import SpeechHandles from "./handles/SpeechHandles";
 import Rectangle from "./Rectangle";
 import useEditorStore from "../stores/editor";
 import useVisualScene from "../stores/visual";
+import { getSelectedComponentBounds } from "../handlers/pointer/pointer";
 
 const componentMap: Record<string, React.FC<any>> = {
   speech: Speech,
@@ -23,25 +24,36 @@ function resolve(type: Component["type"], bounds: Bounds) {
   return <Fc bounds={bounds} fill="none" stroke="green" strokeWidth={3} />;
 }
 
+function ResolveHandles({
+  type,
+  isMultiSelect,
+}: {
+  type: string;
+  isMultiSelect: boolean;
+}) {
+  if (isMultiSelect) return <DragHandles />;
+  switch (type) {
+    case "speech":
+      return <SpeechHandles />;
+    case "line":
+      return <LineHandles />;
+    default:
+      return <DragHandles />;
+  }
+}
+
 function Overlay() {
-  const selected = useEditorStore((state) => state.selected)!;
-  const bounds = useEditorStore((state) => state.mutationBounds);
-  const scene = useVisualScene((scene) => scene.components);
-  const mode = useEditorStore((scene) => scene.mode);
-  const createType = useEditorStore((scene) => scene.createType);
+  const selected = useEditorStore((s) => s.selected);
+  const mode = useEditorStore((s) => s.mode);
+  const createType = useEditorStore((s) => s.createType);
+  const mutationBounds = useEditorStore((s) => s.mutationBounds);
+  const components = useVisualScene((s) => s.components);
 
-  const component = scene[selected];
+  const primaryComponent =
+    selected.length === 0 ? null : components[selected[0]];
 
-  function ResolveHandles() {
-    switch (component.type) {
-      case "speech":
-        return <SpeechHandles />;
-      case "line":
-        return <LineHandles />;
-      default:
-        return <DragHandles />;
-    }
-  }
+  const bounds = getSelectedComponentBounds();
+  const verts = bounds.verts;
 
   return (
     <svg
@@ -49,20 +61,23 @@ function Overlay() {
       className="w-full h-full absolute pointer-events-none"
       viewBox={`-50 -50 ${1920 + 50 * 2} ${1080 + 50 * 2}`}
     >
-      {component && (
+      {primaryComponent && (
         <>
           <Rectangle
-            bounds={component.bounds}
-            rotationOrigin={getBoxCenter(component.bounds.verts)}
+            bounds={bounds}
+            rotationOrigin={getBoxCenter(verts)}
             fill="none"
             stroke="blue"
             strokeWidth={3}
           />
-          <ResolveHandles />
+          <ResolveHandles
+            type={primaryComponent?.type}
+            isMultiSelect={selected.length > 1}
+          />
         </>
       )}
       {mode.includes("mutation") &&
-        resolve(component?.type ?? createType, bounds)}
+        resolve(primaryComponent?.type ?? createType, mutationBounds as Bounds)}
     </svg>
   );
 }
diff --git a/frontend/src/features/authoring/canvas/handles/ConstrainedHandle.tsx b/frontend/src/features/authoring/canvas/handles/ConstrainedHandle.tsx
index 91c74877..56849610 100644
--- a/frontend/src/features/authoring/canvas/handles/ConstrainedHandle.tsx
+++ b/frontend/src/features/authoring/canvas/handles/ConstrainedHandle.tsx
@@ -1,6 +1,6 @@
 import { getBoxCenter, rotate } from "../../util";
 import useEditorStore from "../../stores/editor";
-import useVisualScene from "../../stores/visual";
+import { getSelectedComponentBounds } from "../../handlers/pointer/pointer";
 
 interface Props {
   x: number;
@@ -8,19 +8,24 @@ interface Props {
 }
 
 const ResizeHandle = ({ x, y }: Props) => {
-  const selected = useEditorStore((state) => state.selected)!;
-  const mode = useEditorStore((state) => state.mode);
-  const scene = useVisualScene((scene) => scene.components);
+  const mode = useEditorStore((s) => s.mode);
 
-  const bounds = scene[selected].bounds;
-  const verts = bounds.verts;
+  const componentBounds = getSelectedComponentBounds();
+  const componentVerts = componentBounds.verts;
+  const componentRotation = componentBounds.rotation;
 
   let point = {
-    x: x === 0.5 ? (verts[0].x + verts[1].x) / 2 : verts[x].x,
-    y: y === 0.5 ? (verts[0].y + verts[1].y) / 2 : verts[y].y,
+    x:
+      x === 0.5
+        ? (componentVerts[0].x + componentVerts[1].x) / 2
+        : componentVerts[x].x,
+    y:
+      y === 0.5
+        ? (componentVerts[0].y + componentVerts[1].y) / 2
+        : componentVerts[y].y,
   };
 
-  point = rotate(point, getBoxCenter(verts), bounds.rotation);
+  point = rotate(point, getBoxCenter(componentVerts), componentRotation);
 
   return (
     <g
diff --git a/frontend/src/features/authoring/canvas/handles/RotationHandle.tsx b/frontend/src/features/authoring/canvas/handles/RotationHandle.tsx
index 9cbdd618..1e36ef23 100644
--- a/frontend/src/features/authoring/canvas/handles/RotationHandle.tsx
+++ b/frontend/src/features/authoring/canvas/handles/RotationHandle.tsx
@@ -1,19 +1,28 @@
 import { getBoxCenter, rotate } from "../../util";
 import useEditorStore from "../../stores/editor";
-import useVisualScene from "../../stores/visual";
+import { getSelectedComponentBounds } from "../../handlers/pointer/pointer";
 
 const RotationHandle = () => {
-  const selected = useEditorStore((state) => state.selected)!;
-  const scene = useVisualScene((scene) => scene.components);
-  const mode = useEditorStore((state) => state.mode);
+  const mode = useEditorStore((s) => s.mode);
 
-  const bounds = scene[selected].bounds;
-  const center = getBoxCenter(bounds.verts);
+  const componentBounds = getSelectedComponentBounds();
+  const componentVerts = componentBounds.verts;
+  const componentRotation = componentBounds.rotation;
 
-  const y = Math.min(bounds.verts[0].y, bounds.verts[1].y);
+  const componentCenter = getBoxCenter(componentBounds.verts);
 
-  const initial = rotate({ x: center.x, y }, center, bounds.rotation);
-  const point = rotate({ x: center.x, y: y - 40 }, center, bounds.rotation);
+  const y = Math.min(componentVerts[0].y, componentVerts[1].y);
+
+  const initial = rotate(
+    { x: componentCenter.x, y },
+    componentCenter,
+    componentRotation
+  );
+  const point = rotate(
+    { x: componentCenter.x, y: y - 40 },
+    componentCenter,
+    componentRotation
+  );
 
   return (
     <g
diff --git a/frontend/src/features/authoring/handlers/keyboard/clipboard.ts b/frontend/src/features/authoring/handlers/keyboard/clipboard.ts
index 3cbafdc3..0ccca8f7 100644
--- a/frontend/src/features/authoring/handlers/keyboard/clipboard.ts
+++ b/frontend/src/features/authoring/handlers/keyboard/clipboard.ts
@@ -1,8 +1,4 @@
-import {
-  defaults,
-  parseComponent,
-  stringifyComponent,
-} from "../../scene/operations/component";
+import { defaults, parseComponent } from "../../scene/operations/component";
 import { add, remove } from "../../scene/operations/modifiers";
 import {
   getDocumentText,
@@ -12,7 +8,7 @@ import {
 import { getComponent } from "../../scene/scene";
 import useEditorStore from "../../stores/editor";
 import { syncVisualCursor } from "../../text/cursor";
-import type { ModelDocument } from "../../types";
+import type { Component, ModelDocument } from "../../types";
 
 function plainToDoc(text: string) {
   const plainBlocks = text.split("\n");
@@ -40,7 +36,7 @@ export function cut(e: ClipboardEvent) {
 
   addToClipboard(e, selected);
   remove(selected);
-  setSelected(null);
+  setSelected([]);
 }
 
 export function paste(e: ClipboardEvent) {
@@ -48,56 +44,90 @@ export function paste(e: ClipboardEvent) {
   const { mode, selected, selection, setSelected, setSelection } =
     useEditorStore.getState();
 
-  const app = e.clipboardData?.getData("application/component");
-  const text = e.clipboardData?.getData("text/plain");
+  const components = e.clipboardData?.getData("application/component");
+  const plainTexts = e.clipboardData?.getData("text/plain");
 
   if (selected && mode.includes("text")) {
-    if (app) {
-      const obj = JSON.parse(app);
-      const doc = obj.type === "textbox" ? obj.document : obj;
-      const cursor = mergeDocs(selected, selection.start!, doc);
+    //! IMPORTANT This one I got gpt to write lowkey not to sure if its good
+    if (!selection.start) return;
+    let cursor = selection.start;
+
+    if (components) {
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(components);
+      } catch {
+        return;
+      }
+      const items = Array.isArray(parsed) ? parsed : [parsed];
+
+      for (const item of items) {
+        const doc = item.type === "textbox" ? item.document : item;
+        cursor = mergeDocs(selected, cursor, doc);
+      }
       setSelection({ start: cursor, end: null });
-    } else if (text) {
-      const doc = plainToDoc(text) as ModelDocument;
-      const cursor = mergeDocs(selected, selection.start!, doc);
+    } else if (plainTexts) {
+      const doc = plainToDoc(plainTexts) as ModelDocument;
+      cursor = mergeDocs(selected, cursor, doc);
       setSelection({ start: cursor, end: null });
     }
     syncVisualCursor();
   } else {
-    if (app) {
-      const obj = JSON.parse(app);
+    if (!components) return;
+    setSelected([]);
+
+    let newSelection: string[] = [];
+
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(components);
+    } catch {
+      return;
+    }
+    const items = Array.isArray(parsed) ? parsed : [parsed];
+
+    items.forEach((obj) => {
       if (obj.type) {
-        setSelected(parseComponent(obj));
+        newSelection.push(parseComponent(obj));
       } else {
+        //! IMPORTANT I dont think this will ever run because ever copied component has a type
         const component = structuredClone(defaults["textbox"]);
         component.document = structuredClone(obj);
-        setSelected(add(component));
+        newSelection.push(add(component));
       }
-    } else if (text) {
-      const doc = plainToDoc(text);
-      const component = structuredClone(defaults["textbox"]);
-      component.document = structuredClone(doc);
-      setSelected(add(component));
-    }
+    });
+    setSelected(newSelection);
   }
 }
 
-function addToClipboard(e: ClipboardEvent, selected: string) {
+function addToClipboard(e: ClipboardEvent, selected: string[]) {
   const { mode, selection } = useEditorStore.getState();
-  if (mode.includes("text")) {
-    if (!selection.end) return;
 
-    const { text, doc } = getSelectionContent(selected, selection);
-    e.clipboardData?.setData("text/plain", text);
-    e.clipboardData?.setData("application/component", JSON.stringify(doc));
-  } else {
+  const plainTextChunks: string[] = [];
+  const components: Component[] = [];
+  selected.forEach((id: string) => {
+    if (mode.includes("text")) {
+      if (!selection.end) return;
+
+      const { text, doc } = getSelectionContent(id, selection);
+      if (text) plainTextChunks.push(text);
+      if (doc) components.push(doc);
+    } else {
+      components.push(getComponent(id));
+      if (getComponent(id).type === "textbox") {
+        const text = getDocumentText(id);
+        if (text) plainTextChunks.push(text);
+      }
+    }
+  });
+
+  if (plainTextChunks.length > 0) {
+    e.clipboardData?.setData("text/plain", plainTextChunks.join("\n"));
+  }
+  if (components.length > 0) {
     e.clipboardData?.setData(
       "application/component",
-      stringifyComponent(selected) || ""
+      JSON.stringify(components)
     );
-    if (getComponent(selected).type === "textbox") {
-      const text = getDocumentText(selected);
-      e.clipboardData?.setData("text/plain", text);
-    }
   }
 }
diff --git a/frontend/src/features/authoring/handlers/keyboard/keyboard.ts b/frontend/src/features/authoring/handlers/keyboard/keyboard.ts
index f623c0c8..5cd01592 100644
--- a/frontend/src/features/authoring/handlers/keyboard/keyboard.ts
+++ b/frontend/src/features/authoring/handlers/keyboard/keyboard.ts
@@ -1,4 +1,4 @@
-import { redo, undo } from "../../scene/history";
+import { handleUndoRedo } from "../../scene/history";
 import {
   bringForward,
   bringToFront,
@@ -18,6 +18,7 @@ export function handleGlobal(e: KeyboardEvent) {
   const { selected } = useEditorStore.getState();
 
   // don't want to interfere with input elements
+
   const target = e.target as HTMLElement;
   if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return;
 
@@ -30,12 +31,12 @@ function handleCtrlOperations(e: KeyboardEvent) {
   const { selected, setSelected } = useEditorStore.getState();
 
   // TODO ADD e.key === "a" for all components or create new function for cmd
-  if (e.key === "z") undo();
-  else if (e.key === "y") redo();
+  if (e.key === "z") handleUndoRedo(true);
+  else if (e.key === "y") handleUndoRedo(false);
   else if (e.key === "d" && selected) {
     e.preventDefault();
-    const id = duplicateComponent(selected);
-    setSelected(id);
+    const ids = duplicateComponent(selected);
+    setSelected(ids);
   } else if (e.key === "ArrowUp" && selected) {
     if (e.shiftKey) bringToFront(selected);
     else bringForward(selected);
@@ -45,12 +46,12 @@ function handleCtrlOperations(e: KeyboardEvent) {
   }
 }
 
-function handleComponentOperations(e: KeyboardEvent, selected: string) {
+function handleComponentOperations(e: KeyboardEvent, selected: string[]) {
   const { setSelected } = useEditorStore.getState();
 
   if (e.key === "Backspace") {
+    setSelected([]);
     remove(selected);
-    setSelected(null);
   } else if (e.key === "ArrowUp") {
     modifyComponentProp(selected, "bounds.verts", (prev: Vec2[]) =>
       translate(prev, { x: 0, y: -5 })
diff --git a/frontend/src/features/authoring/handlers/keyboard/text.ts b/frontend/src/features/authoring/handlers/keyboard/text.ts
index 3af194d1..d5ad1695 100644
--- a/frontend/src/features/authoring/handlers/keyboard/text.ts
+++ b/frontend/src/features/authoring/handlers/keyboard/text.ts
@@ -21,15 +21,15 @@ import type { VisualBlock, VisualSelection } from "../../text/types";
 
 export function handleTextMode(e: KeyboardEvent) {
   const { selected } = useEditorStore.getState();
-  if (!selected) return;
+  if (!selected || selected.length != 1) return;
 
   if ((e.metaKey || e.ctrlKey) && e.key == "a") {
     e.preventDefault();
-    handleSelectAll(selected);
+    handleSelectAll(selected[0]);
   } else if (e.key.startsWith("Arrow") || ["Home", "End"].includes(e.key)) {
-    handleNavigation(e, selected);
+    handleNavigation(e, selected[0]);
   } else {
-    handleEditing(e, selected);
+    handleEditing(e, selected[0]);
   }
 }
 
@@ -75,17 +75,17 @@ function handleEditing(e: KeyboardEvent, selected: string) {
     // insert character at cursor
     const newCursor = end
       ? insertSelection(selected, selection, e.key)
-      : insertChar(selected, start, e.key);
+      : insertChar([selected], start, e.key);
     setSelection({ start: newCursor, end: null });
   } else if (e.key === "Backspace") {
     // delete character before cursor
     const newCursor = !end
-      ? deleteChar(selected, start)
-      : deleteSelection(selected, selection);
+      ? deleteChar([selected], start)
+      : deleteSelection([selected], selection);
     setSelection({ start: newCursor, end: null });
   } else if (e.key === "Enter") {
     // create a new block at cursor
-    const newCursor = createBlock(selected, start);
+    const newCursor = createBlock([selected], start);
     setSelection({ start: newCursor, end });
   } else if (e.key === "Escape") {
     // clear current selection
diff --git a/frontend/src/features/authoring/handlers/pointer/ComponentContext.tsx b/frontend/src/features/authoring/handlers/pointer/ComponentContext.tsx
index 384dba30..be1eadff 100644
--- a/frontend/src/features/authoring/handlers/pointer/ComponentContext.tsx
+++ b/frontend/src/features/authoring/handlers/pointer/ComponentContext.tsx
@@ -15,47 +15,47 @@ import {
 } from "../../scene/operations/component";
 import useEditorStore from "../../stores/editor";
 
-const ComponentMenu = ({ id }: { id: string }) => {
-  function removeAndDeselect(id: string) {
-    remove(id);
-    useEditorStore.getState().setSelected(null);
+const ComponentMenu = (ids: string[]) => {
+  function removeAndDeselect(selectedIds: string[]) {
+    remove(selectedIds);
+    useEditorStore.getState().setSelected([]);
   }
 
   return (
     <ul className="menu bg-base-200 rounded-box w-fit">
       <li>
-        <a onClick={handle(duplicateComponent, id)}>
+        <a onClick={handle(duplicateComponent, ids)}>
           <CopyPlusIcon size={16} />
           Duplicate
         </a>
       </li>
       <li>
-        <a onClick={handle(removeAndDeselect, id)}>
+        <a onClick={handle(removeAndDeselect, ids)}>
           <Trash2Icon size={16} />
           Delete
         </a>
       </li>
       <div className="divider m-0" />
       <li>
-        <a onClick={handle(bringForward, id)}>
+        <a onClick={handle(bringForward, ids)}>
           <BringToFrontIcon size={16} />
           Bring Forward
         </a>
       </li>
       <li>
-        <a onClick={handle(bringToFront, id)}>
+        <a onClick={handle(bringToFront, ids)}>
           <BringToFrontIcon size={16} />
           Bring to Front
         </a>
       </li>
       <li>
-        <a onClick={handle(sendBackward, id)}>
+        <a onClick={handle(sendBackward, ids)}>
           <SendToBackIcon size={16} />
           Send Backward
         </a>
       </li>
       <li>
-        <a onClick={handle(sendToBack, id)}>
+        <a onClick={handle(sendToBack, ids)}>
           <SendToBackIcon size={16} />
           Send to Back
         </a>
diff --git a/frontend/src/features/authoring/handlers/pointer/context.ts b/frontend/src/features/authoring/handlers/pointer/context.ts
index 8292e58f..c283acf4 100644
--- a/frontend/src/features/authoring/handlers/pointer/context.ts
+++ b/frontend/src/features/authoring/handlers/pointer/context.ts
@@ -1,4 +1,5 @@
 import { render } from "../../../../components/ContextMenu/portal";
+import useEditorStore from "../../stores/editor";
 import type { Vec2 } from "../../types";
 import ComponentMenu from "./ComponentContext";
 
@@ -11,12 +12,11 @@ export function handleContextGlobal(e: React.MouseEvent, position: Vec2) {
 }
 
 function handleComponentContext(e: React.MouseEvent, _: Vec2) {
-  const target = e.target as HTMLElement;
-  const id = target.dataset.id as string;
+  const { selected } = useEditorStore.getState();
 
   e.preventDefault();
   render({
-    menu: ComponentMenu({ id }),
+    menu: ComponentMenu(selected),
     position: { x: e.clientX, y: e.clientY },
   });
 }
diff --git a/frontend/src/features/authoring/handlers/pointer/create.ts b/frontend/src/features/authoring/handlers/pointer/create.ts
index 1f7fb281..6fadedd3 100644
--- a/frontend/src/features/authoring/handlers/pointer/create.ts
+++ b/frontend/src/features/authoring/handlers/pointer/create.ts
@@ -7,7 +7,7 @@ export function handleCreateStart(_: React.MouseEvent, position: Vec2) {
   const { setSelected, setOffset, setMutationBounds } =
     useEditorStore.getState();
 
-  setSelected(null);
+  setSelected([]);
   setOffset(position);
   setMutationBounds({ verts: [position, position], rotation: 0 });
 }
@@ -25,6 +25,7 @@ export function handleCreateDrag(_: React.MouseEvent, position: Vec2) {
     useEditorStore.getState();
 
   const verts = [offset, position];
+
   if (createType === "speech") verts.push(getTailVert(verts));
   setMutationBounds((prev) => ({ ...prev, verts }));
   addMode("mutation");
@@ -33,7 +34,7 @@ export function handleCreateDrag(_: React.MouseEvent, position: Vec2) {
 export function handleCreateEnd() {
   const { mutationBounds, setMode, setSelected, createType } =
     useEditorStore.getState();
-  const id = createComponentFromBounds(createType!, mutationBounds);
-  setSelected(id);
+  const id = createComponentFromBounds(createType, mutationBounds);
+  setSelected([id]);
   setMode(["normal"]);
 }
diff --git a/frontend/src/features/authoring/handlers/pointer/pointer.ts b/frontend/src/features/authoring/handlers/pointer/pointer.ts
index 3a397fb7..6c152f5e 100644
--- a/frontend/src/features/authoring/handlers/pointer/pointer.ts
+++ b/frontend/src/features/authoring/handlers/pointer/pointer.ts
@@ -1,4 +1,3 @@
-import { render } from "../../../../components/ContextMenu/portal";
 import { modifyComponentBounds } from "../../scene/operations/component";
 import useEditorStore from "../../stores/editor";
 import useVisualScene from "../../stores/visual";
@@ -9,7 +8,6 @@ import {
 } from "../../text/cursor";
 import type { Vec2 } from "../../types";
 import { subtract, translate } from "../../util";
-import ComponentMenu from "./ComponentContext";
 import { handleCreateDrag, handleCreateEnd, handleCreateStart } from "./create";
 import { handleResizeDrag, handleResizeStart } from "./resize";
 
@@ -70,14 +68,14 @@ export function handleMouseUpGlobal() {
 
 function handleCanvasClick() {
   const { setSelected, setMode } = useEditorStore.getState();
-  setSelected(null);
+  setSelected([]);
   setMode(["normal"]);
 }
 
 // component handlers
 
 function handleComponentClick(e: React.MouseEvent, position: Vec2) {
-  const { setSelected, setOffset, setMode, setMutationBounds } =
+  const { selected, setSelected, setOffset, setMode, setMutationBounds } =
     useEditorStore.getState();
   const scene = useVisualScene.getState().components;
 
@@ -85,7 +83,11 @@ function handleComponentClick(e: React.MouseEvent, position: Vec2) {
   const id = target.dataset.id as string;
 
   setOffset(position);
-  setSelected(id);
+
+  //! TEMPORARY
+  if (!selected.includes(id)) {
+    setSelected([...selected, id]);
+  }
 
   const component = scene[target.dataset.id as string];
   setMutationBounds({ ...component.bounds });
@@ -96,21 +98,149 @@ function handleComponentClick(e: React.MouseEvent, position: Vec2) {
 function handleComponentDrag(_: React.MouseEvent, position: Vec2) {
   const { selected, setMutationBounds, offset, setMode } =
     useEditorStore.getState();
-  if (!selected) return;
 
-  const component = useVisualScene.getState().components[selected];
+  if (!selected || selected.length === 0) return;
+
+  const [minX, minY, maxX, maxY] = getSelectedMinMaxXY();
+
+  // Get Box Dimensions
+  const initialGroupVerts = [
+    { x: minX, y: minY },
+    { x: maxX, y: maxY },
+  ];
+
+  // Translate the entire group box by the mouse movement offset
+  const delta = subtract(position, offset);
+  const verts = translate(initialGroupVerts, delta);
+
+  let componentRotation =
+    selected.length == 1 ? findComponentRotation(selected[0]) : 0;
 
-  const verts = translate(component.bounds.verts, subtract(position, offset));
-  setMutationBounds((prev) => ({ ...prev, verts }));
+  setMutationBounds({ verts, rotation: componentRotation });
   setMode(["mutation"]);
 }
 
 function handleMutationEnd() {
-  const { selected, mutationBounds, setMode } = useEditorStore.getState();
-  modifyComponentBounds(selected!, mutationBounds);
+  const { selected, mutationBounds, setMode, mode } = useEditorStore.getState();
+
+  const newVerts = mutationBounds.verts;
+
+  const [minX, minY] = getSelectedMinMaxXY();
+
+  const deltaVec = {
+    x: newVerts[0].x - minX,
+    y: newVerts[0].y - minY,
+  };
+
+  const origin = {
+    x: minX,
+    y: minY,
+  };
+
+  const scaleVec = getResizeScaleVec(newVerts);
+
+  if (selected.length == 1) {
+    modifyComponentBounds(selected, mutationBounds);
+  } else {
+    modifyComponentBounds(selected, (currentBounds) => {
+      const updatedBounds = {
+        ...currentBounds,
+        verts: mode.includes("resize")
+          ? getNewResizePosition(
+              currentBounds.verts,
+              newVerts,
+              origin,
+              scaleVec
+            )
+          : translate(currentBounds.verts, deltaVec),
+      };
+
+      return updatedBounds;
+    });
+  }
+
   setMode(["normal"]);
 }
 
+// Component Helper Functions
+
+function getResizeScaleVec(newVerts: Vec2[]) {
+  const [minX, minY, maxX, maxY] = getSelectedMinMaxXY();
+
+  const oldGroupWidth = maxX - minX;
+  const oldGroupHeight = maxY - minY;
+
+  const newGroupWidth = newVerts[1].x - newVerts[0].x;
+  const newGroupHeight = newVerts[1].y - newVerts[0].y;
+
+  const scaleX = oldGroupWidth === 0 ? 1 : newGroupWidth / oldGroupWidth;
+  const scaleY = oldGroupHeight === 0 ? 1 : newGroupHeight / oldGroupHeight;
+
+  return { x: scaleX, y: scaleY };
+}
+
+function getNewResizePosition(
+  verts: Vec2[],
+  newVerts: Vec2[],
+  origin: Vec2,
+  scaleVec: Vec2
+) {
+  const result: Vec2[] = [];
+  for (let i = 0; i < 2; i++) {
+    const vert = verts[i];
+    result.push({
+      x: newVerts[0].x + (vert.x - origin.x) * scaleVec.x,
+      y: newVerts[0].y + (vert.y - origin.y) * scaleVec.y,
+    });
+  }
+
+  return result;
+}
+
+function getSelectedMinMaxXY() {
+  const { selected } = useEditorStore.getState();
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  const components = useVisualScene.getState().components;
+
+  selected.forEach((id: string) => {
+    const component = components[id];
+    if (!component || !component.bounds || !component.bounds.verts) return;
+
+    component.bounds.verts.forEach((obj: Vec2) => {
+      minX = Math.min(minX, obj.x);
+      minY = Math.min(minY, obj.y);
+      maxX = Math.max(maxX, obj.x);
+      maxY = Math.max(maxY, obj.y);
+    });
+  });
+
+  return [minX, minY, maxX, maxY];
+}
+
+function findComponentRotation(id: string) {
+  const components = useVisualScene.getState().components;
+  return components[id]?.bounds?.rotation ?? 0;
+}
+
+export function getSelectedComponentBounds() {
+  const { selected } = useEditorStore.getState();
+  const [minX, minY, maxX, maxY] = getSelectedMinMaxXY();
+  const verts = [
+    { x: minX, y: minY },
+    { x: maxX, y: maxY },
+  ];
+
+  const componentRotation =
+    selected.length === 1 ? findComponentRotation(selected[0]) : 0;
+
+  const bounds = { verts, rotation: componentRotation, x: minX, y: minY };
+  return bounds;
+}
+
 // document handlers
 
 function handleDocumentClick(e: React.MouseEvent, position: Vec2) {
@@ -131,7 +261,7 @@ function handleDocumentClick(e: React.MouseEvent, position: Vec2) {
     doc.blocks
   );
 
-  setSelected(target.dataset.id as string);
+  setSelected([target.dataset.id as string]);
   setMode(["text"]);
 
   const component = scene[target.dataset.id as string];
@@ -144,10 +274,13 @@ function handleDocumentClick(e: React.MouseEvent, position: Vec2) {
 
 function handleTextSelection(_: React.MouseEvent, position: Vec2) {
   const { selected, setVisualSelection } = useEditorStore.getState();
-  const { document: doc } = useVisualScene.getState().components[selected!];
+
+  if (!selected || selected.length === 0) return;
+  const { document: doc } = useVisualScene.getState().components[selected[0]];
   const cursor = parseHit(
     getRelativePosition(position, doc.bounds),
     doc.blocks
   );
+
   setVisualSelection((prev) => ({ start: prev.start, end: cursor }));
 }
diff --git a/frontend/src/features/authoring/handlers/pointer/resize.ts b/frontend/src/features/authoring/handlers/pointer/resize.ts
index bee4efce..34763b1b 100644
--- a/frontend/src/features/authoring/handlers/pointer/resize.ts
+++ b/frontend/src/features/authoring/handlers/pointer/resize.ts
@@ -1,4 +1,3 @@
-import { getComponent, getComponentProp } from "../../scene/scene";
 import useEditorStore from "../../stores/editor";
 import type { Bounds, Vec2 } from "../../types";
 import {
@@ -13,8 +12,10 @@ import {
   scale,
   subtract,
 } from "../../util";
+import { getSelectedComponentBounds } from "./pointer";
 
 type HandleType = "size" | "rotation";
+const BOX_CENTER_VALUE = 0.5;
 
 let type: HandleType;
 let coords: number[];
@@ -30,10 +31,10 @@ export function handleResizeStart(e: React.MouseEvent) {
 }
 
 export function handleResizeDrag(e: React.MouseEvent, position: Vec2) {
-  const { addMode, setMutationBounds, selected } = useEditorStore.getState();
+  const { addMode, setMutationBounds } = useEditorStore.getState();
   addMode("mutation");
 
-  const bounds = getComponentProp(selected!, "bounds");
+  const bounds = getSelectedComponentBounds();
 
   const newBounds: Partial<Bounds> = {};
 
@@ -67,13 +68,13 @@ function getNewTail(verts: Vec2[], newVerts: Vec2[], coords: number[]) {
   const inversePoint = { x: 0, y: 0 };
   const newPoint = { x: 0, y: 0 };
 
-  if (coords[0] !== 0.5) {
+  if (coords[0] !== BOX_CENTER_VALUE) {
     point.x = verts[coords[0]].x;
     inversePoint.x = verts[1 - coords[0]].x;
     newPoint.x = newVerts[coords[0]].x;
   }
 
-  if (coords[1] !== 0.5) {
+  if (coords[1] !== BOX_CENTER_VALUE) {
     point.y = verts[coords[1]].y;
     inversePoint.y = verts[1 - coords[1]].y;
     newPoint.y = newVerts[coords[1]].y;
@@ -119,16 +120,17 @@ function updateResize(
   anchorCenter: boolean,
   fixed: boolean
 ) {
-  const { selected } = useEditorStore.getState();
-  const { bounds, type } = getComponent(selected!);
+  const bounds = getSelectedComponentBounds();
+
   const center = getBoxCenter(bounds.verts);
 
+  let type = "box";
   let verts = modifyVerts(bounds.verts, coords, position);
 
   if (!coords.includes(2)) {
     // none of these apply to the speech triangle
     // shift modifier
-    if (fixed && !coords.includes(0.5)) {
+    if (fixed && !coords.includes(BOX_CENTER_VALUE)) {
       lockAspect(bounds.verts, verts, coords);
     }
 
@@ -157,7 +159,7 @@ function mirror(verts: Vec2[], center: Vec2, coords: number[]) {
 
 function modifyVerts(verts: Vec2[], coords: number[], v: Vec2) {
   const newVerts = verts.map((v) => ({ ...v }));
-  if (coords[1] !== 0.5) newVerts[coords[1]].y = v.y;
-  if (coords[0] !== 0.5) newVerts[coords[0]].x = v.x;
+  if (coords[1] !== BOX_CENTER_VALUE) newVerts[coords[1]].y = v.y;
+  if (coords[0] !== BOX_CENTER_VALUE) newVerts[coords[0]].x = v.x;
   return newVerts;
 }
diff --git a/frontend/src/features/authoring/scene/history.ts b/frontend/src/features/authoring/scene/history.ts
index f8397517..118b649a 100644
--- a/frontend/src/features/authoring/scene/history.ts
+++ b/frontend/src/features/authoring/scene/history.ts
@@ -9,6 +9,7 @@ import {
 } from "./scene";
 import useVisualScene from "../stores/visual";
 import { buildVisualComponent } from "../pipeline";
+import useEditorStore from "../stores/editor";
 
 interface SceneRef {
   _id: string;
@@ -21,8 +22,13 @@ interface HistoryObject {
   state: Component | null;
 }
 
-let undoStack: HistoryObject[] = [];
-let redoStack: HistoryObject[] = [];
+export interface ChangeRecord {
+  id: string;
+  prevState: Component | null;
+}
+
+let undoStack: HistoryObject[][] = [];
+let redoStack: HistoryObject[][] = [];
 let scenes: SceneRef[] = [];
 let scenarioId: string | null = null;
 let saveScene: ((patch: Record<string, any>) => Promise<void>) | null = null;
@@ -41,46 +47,75 @@ export function init(
   saveScene = _saveScene;
 }
 
-export function updateHistory(id: string, prevState: Component | null) {
-  if (fastIsEqual(prevState, getComponent(id))) return;
+export function updateHistory(incomingChanges: ChangeRecord[]) {
   const sceneId = getSceneId();
-  undoStack.push({ sceneId, id, state: prevState });
+  let validChanges: HistoryObject[] = [];
+
+  incomingChanges.forEach(({ id, prevState }) => {
+    const currentState = getComponent(id);
+
+    if (!fastIsEqual(prevState, currentState)) {
+      validChanges.push({ sceneId, id, state: prevState });
+    }
+  });
+
+  if (validChanges.length === 0) return;
+
+  undoStack.push(validChanges);
   if (undoStack.length > 100) undoStack.shift();
+
   redoStack = [];
 }
 
-export function undo() {
-  const prev = undoStack.pop();
-  if (!prev) return;
-  switchToScene(prev.sceneId);
-  const current = structuredClone(getComponent(prev.id));
-  restoreComponent(prev.id, prev.state);
-  redoStack.push({ sceneId: prev.sceneId, id: prev.id, state: current });
-}
+export function handleUndoRedo(isUndo: boolean) {
+  const batch = isUndo ? undoStack.pop() : redoStack.pop();
+  if (!batch || batch.length === 0) return;
+
+  const sceneID = batch[0].sceneId;
+  const ids = batch.map((obj) => obj.id);
+  const isDelete = batch[0].state === null;
 
-export function redo() {
-  const entry = redoStack.pop();
-  if (!entry) return;
-  switchToScene(entry.sceneId);
-  const current = structuredClone(getComponent(entry.id));
-  restoreComponent(entry.id, entry.state);
-  undoStack.push({ sceneId: entry.sceneId, id: entry.id, state: current });
+  if (!switchToScene(sceneID)) return;
+
+  const validChanges: HistoryObject[] = ids.map((id) => {
+    const comp = getComponent(id);
+    return {
+      sceneId: sceneID,
+      id,
+      state: comp ? structuredClone(comp) : null,
+    };
+  });
+
+  if (isDelete) {
+    useEditorStore.getState().setSelected([]);
+    ids.forEach((id) => {
+      delete getScene().components[id];
+      useVisualScene.getState().deleteComponent(id);
+    });
+  } else {
+    batch.forEach((obj) => {
+      restoreComponent(obj.id, obj.state);
+    });
+  }
+
+  if (isUndo) {
+    redoStack.push(validChanges);
+  } else {
+    undoStack.push(validChanges);
+  }
 }
 
-function switchToScene(targetSceneId: string) {
-  if (targetSceneId === getSceneId()) return;
+function switchToScene(targetSceneId: string): boolean {
+  if (targetSceneId === getSceneId()) return true;
   const targetScene = scenes.find((s) => s._id === targetSceneId);
-  if (!targetScene) return;
+  if (!targetScene) return false;
   if (saveScene) void saveCurrentScene(saveScene);
   applySceneSwitch(targetScene, scenarioId!);
+  return true;
 }
 
 function restoreComponent(id: string, state: Component | null) {
-  if (state === null) {
-    delete getScene().components[id];
-    useVisualScene.getState().deleteComponent(id);
-  } else {
-    getScene().components[id] = structuredClone(state);
-    useVisualScene.getState().updateComponent(buildVisualComponent(state));
-  }
+  if (state === null) return;
+  getScene().components[id] = structuredClone(state);
+  useVisualScene.getState().updateComponent(buildVisualComponent(state));
 }
diff --git a/frontend/src/features/authoring/scene/operations/component.ts b/frontend/src/features/authoring/scene/operations/component.ts
index eb5c2492..784b37fd 100644
--- a/frontend/src/features/authoring/scene/operations/component.ts
+++ b/frontend/src/features/authoring/scene/operations/component.ts
@@ -121,9 +121,14 @@ export function parseComponent(component: Component) {
   return add(component);
 }
 
-export function duplicateComponent(id: string) {
-  const newComponent = structuredClone(getComponent(id));
-  return parseComponent(newComponent);
+export function duplicateComponent(ids: string[]) {
+  return ids
+    .map((id: string) => {
+      const newComponent = structuredClone(getComponent(id));
+      if (!newComponent) return null;
+      return parseComponent(newComponent);
+    })
+    .filter((id): id is string => id !== null);
 }
 
 export function createComponentFromBounds(
@@ -141,83 +146,121 @@ export function createComponentFromBounds(
 }
 
 export const modifyComponentProp = modify(
-  (id: string, prop: string, val: any) => {
-    const component = getComponent(id);
-    if (!component) return;
-
-    const [object, key] = getObject(prop, component);
-    if (typeof val === "function") object[key] = val(object[key]);
-    else if (val !== null && typeof val === "object" && !Array.isArray(val))
-      object[key] = merge(object[key], val);
-    else object[key] = val;
+  (ids: string[], prop: string, val: any) => {
+    ids.forEach((id) => {
+      const component = getComponent(id);
+      if (!component) return;
+
+      const [object, key] = getObject(prop, component);
+
+      if (typeof val === "function") object[key] = val(object[key]);
+      else if (val !== null && typeof val === "object" && !Array.isArray(val))
+        object[key] = merge(object[key], val);
+      else object[key] = val;
+    });
   }
 );
 
-export function modifyComponentBounds(id: string, bounds: Partial<Bounds>) {
-  modifyComponentProp(id, "bounds", bounds);
+export function modifyComponentBounds(
+  ids: string[],
+  bounds: Partial<Bounds> | ((prev: Bounds) => Bounds)
+) {
+  modifyComponentProp(ids, "bounds", bounds);
 }
 
-export function bringForward(id: string) {
-  const currentZIndex = getComponentProp(id, "zIndex") as number;
+export function bringForward(ids: string[]) {
+  if (!ids.length) return;
+
   const components = Object.values(getScene().components) as Component[];
+  const selectedIds = new Set(ids);
 
-  // 1. Find the highest zIndex that is strictly greater than the current one
+  const sortedComponents = components.sort((a, b) => a.zIndex - b.zIndex);
 
-  const targetComponent = components
-    .filter((curr) => curr.zIndex > currentZIndex)
-    .reduce(
-      (prev, curr) => {
-        return prev == null || prev.zIndex > curr.zIndex ? curr : prev;
-      },
-      null as Component | null
-    );
+  const zIndexScale = sortedComponents.map((c) => c.zIndex);
 
-  // Return if component is at the top already
-  if (!targetComponent) return;
+  for (let i = sortedComponents.length - 1; i >= 0; i--) {
+    if (selectedIds.has(sortedComponents[i].id)) {
+      if (
+        i < sortedComponents.length - 1 &&
+        !selectedIds.has(sortedComponents[i + 1].id)
+      ) {
+        const temp = sortedComponents[i];
+        sortedComponents[i] = sortedComponents[i + 1];
+        sortedComponents[i + 1] = temp;
+      }
+    }
+  }
 
-  const aboveZIndex = targetComponent.zIndex;
+  sortedComponents.forEach((comp, index) => {
+    const targetZIndex = zIndexScale[index];
 
-  // Swap Zindexs
-  modifyComponentProp(id, "zIndex", aboveZIndex);
-  modifyComponentProp(targetComponent.id, "zIndex", currentZIndex);
+    if (comp.zIndex !== targetZIndex) {
+      modifyComponentProp([comp.id], "zIndex", targetZIndex);
+    }
+  });
 }
 
-export function sendBackward(id: string) {
-  const currentZIndex = getComponentProp(id, "zIndex") as number;
+export function sendBackward(ids: string[]) {
+  if (!ids.length) return;
+
   const components = Object.values(getScene().components) as Component[];
+  const selectedIds = new Set(ids);
+
+  const sortedComponents = components.sort((a, b) => a.zIndex - b.zIndex);
+
+  const zIndexScale = sortedComponents.map((c) => c.zIndex);
+
+  for (let i = 0; i < sortedComponents.length; i++) {
+    if (selectedIds.has(sortedComponents[i].id)) {
+      if (i > 0 && !selectedIds.has(sortedComponents[i - 1].id)) {
+        const temp = sortedComponents[i];
+        sortedComponents[i] = sortedComponents[i - 1];
+        sortedComponents[i - 1] = temp;
+      }
+    }
+  }
 
-  // 1. Find the highest zIndex that is strictly less than the current one
-  const targetComponent = components
-    .filter((curr) => curr.zIndex < currentZIndex)
-    .reduce(
-      (prev, curr) => {
-        return prev == null || prev.zIndex < curr.zIndex ? curr : prev;
-      },
-      null as Component | null
-    );
-
-  if (!targetComponent) return;
-  const belowZIndex = targetComponent.zIndex;
-  modifyComponentProp(id, "zIndex", belowZIndex);
-  modifyComponentProp(targetComponent.id, "zIndex", currentZIndex);
+  sortedComponents.forEach((comp, index) => {
+    const targetZIndex = zIndexScale[index];
+
+    if (comp.zIndex !== targetZIndex) {
+      modifyComponentProp([comp.id], "zIndex", targetZIndex);
+    }
+  });
 }
+function moveComponentFrontAndBack(ids: string[], state: "front" | "back") {
+  if (!ids.length) return;
 
-export function bringToFront(id: string) {
   const components = Object.values(getScene().components) as Component[];
-  const max = components.reduce(
-    (p, c) => (c.zIndex >= p ? c.zIndex : p),
-    -Infinity
+  const selectedIds = new Set(ids);
+
+  const sortedComponents = components.sort((a, b) => a.zIndex - b.zIndex);
+  const zIndexScale = sortedComponents.map((c) => c.zIndex);
+  const selectedComponents = sortedComponents.filter((comp) =>
+    selectedIds.has(comp.id)
+  );
+  const unselectedComponents = sortedComponents.filter(
+    (comp) => !selectedIds.has(comp.id)
   );
-  if (max == -Infinity) return;
-  modifyComponentProp(id, "zIndex", max + 1);
+
+  const newSortedComponents =
+    state == "front"
+      ? [...unselectedComponents, ...selectedComponents]
+      : [...selectedComponents, ...unselectedComponents];
+
+  newSortedComponents.forEach((comp, index) => {
+    const targetZIndex = zIndexScale[index];
+
+    if (comp.zIndex !== targetZIndex) {
+      modifyComponentProp([comp.id], "zIndex", targetZIndex);
+    }
+  });
 }
 
-export function sendToBack(id: string) {
-  const components = Object.values(getScene().components) as Component[];
-  const min = components.reduce(
-    (p, c) => (c.zIndex <= p ? c.zIndex : p),
-    Infinity
-  );
-  if (min == Infinity) return;
-  modifyComponentProp(id, "zIndex", min - 1);
+export function bringToFront(ids: string[]) {
+  moveComponentFrontAndBack(ids, "front");
+}
+
+export function sendToBack(ids: string[]) {
+  moveComponentFrontAndBack(ids, "back");
 }
diff --git a/frontend/src/features/authoring/scene/operations/modifiers.ts b/frontend/src/features/authoring/scene/operations/modifiers.ts
index 6c49e0fb..5418aee1 100644
--- a/frontend/src/features/authoring/scene/operations/modifiers.ts
+++ b/frontend/src/features/authoring/scene/operations/modifiers.ts
@@ -1,7 +1,7 @@
 import { v4 } from "uuid";
 import { buildVisualComponent, buildVisualScene } from "../../pipeline";
 import useVisualScene, { type VisualSceneState } from "../../stores/visual";
-import { updateHistory } from "../history";
+import { updateHistory, type ChangeRecord } from "../history";
 import { commitSavedScene, getComponent, getScene, setScene } from "../scene";
 import type { Component, Scene } from "../../types";
 import { arrayToObject } from "../util";
@@ -23,38 +23,62 @@ export function modifySceneProp<K extends keyof VisualSceneState>(
 }
 
 // wrapper for state mutating functions, will capture both state and operation
-export function modify<A extends [string, ...any[]], R>(fn: (...args: A) => R) {
+export function modify<A extends [string[], ...any[]], R>(
+  fn: (...args: A) => R
+) {
   return function (...args: A): R {
-    const id = args[0];
-    const component = getComponent(id);
+    const ids = args[0];
+
+    const previousStates: ChangeRecord[] = ids
+      .map((id) => {
+        const comp = getComponent(id);
+        if (!comp) return null;
+        return {
+          id,
+          prevState: structuredClone(comp),
+        };
+      })
+      .filter((record): record is ChangeRecord => record !== null);
 
-    const prev = structuredClone(component);
     const output = fn(...args);
 
-    updateHistory(id, prev);
+    if (previousStates.length) updateHistory(previousStates);
 
-    useVisualScene.getState().updateComponent(buildVisualComponent(component));
+    ids.forEach((id) => {
+      const component = getComponent(id);
+      if (component) {
+        useVisualScene
+          .getState()
+          .updateComponent(buildVisualComponent(component));
+      }
+    });
 
     return output;
   };
 }
 
-export function remove(id: string, history = true) {
-  const component = getComponent(id);
-  const prev = structuredClone(component);
-
-  delete getScene().components[id];
+export function remove(ids: string[], history = true) {
+  const previousStates: ChangeRecord[] = ids.map((id) => {
+    const comp = getComponent(id);
+    return {
+      id,
+      prevState: structuredClone(comp),
+    };
+  });
 
-  if (history) updateHistory(id, prev);
+  ids.forEach((id) => {
+    delete getScene().components[id];
+    useVisualScene.getState().deleteComponent(id);
+  });
 
-  useVisualScene.getState().deleteComponent(id);
+  if (history) updateHistory(previousStates);
 }
 
 export function add(props: Record<string, any>, history = true) {
   if (!props.id) props.id = v4();
   getScene().components[props.id] = props;
 
-  if (history) updateHistory(props.id, null);
+  if (history) updateHistory([{ id: props.id, prevState: null }]);
 
   useVisualScene
     .getState()
diff --git a/frontend/src/features/authoring/scene/operations/text.ts b/frontend/src/features/authoring/scene/operations/text.ts
index 1a055553..04243620 100644
--- a/frontend/src/features/authoring/scene/operations/text.ts
+++ b/frontend/src/features/authoring/scene/operations/text.ts
@@ -13,8 +13,8 @@ import shallow from "zustand/shallow";
 import { modify } from "./modifiers";
 
 export const insertChar = modify(
-  (id: string, cursor: ModelCursor, char: string) => {
-    const doc = getComponentProp(id, "document") as ModelDocument;
+  (id: string[], cursor: ModelCursor, char: string) => {
+    const doc = getComponentProp(id[0], "document") as ModelDocument;
 
     const diff = objectDiff(
       useEditorStore.getState().activeStyle!,
@@ -39,16 +39,16 @@ export const insertChar = modify(
       else block.spans.splice(cursor.spanI, 0, { text: char, style: diff }); // block start
     }
 
-    return moveCursor(id, cursor, 1);
+    return moveCursor(id[0], cursor, 1);
   }
 );
 
-export const deleteChar = modify((id: string, cursor: ModelCursor) => {
+export const deleteChar = modify((id: string[], cursor: ModelCursor) => {
   if (!cursor.blockI && !cursor.spanI && !cursor.charI) return cursor; // start of text
 
-  const newCursor = moveCursor(id, cursor, -1);
+  const newCursor = moveCursor(id[0], cursor, -1);
 
-  const doc = getComponentProp(id, `document`) as ModelDocument;
+  const doc = getComponentProp(id[0], `document`) as ModelDocument;
   const spans = doc.blocks[cursor.blockI].spans;
 
   if (newCursor.blockI === cursor.blockI && newCursor.spanI === cursor.spanI) {
@@ -81,16 +81,16 @@ export const deleteChar = modify((id: string, cursor: ModelCursor) => {
 
 // NOTE: will cause two distinct state operations in history
 export function insertSelection(id: string, sel: ModelSelection, char: string) {
-  const cursor = deleteSelection(id, sel);
-  return insertChar(id, cursor, char);
+  const cursor = deleteSelection([id], sel);
+  return insertChar([id], cursor, char);
 }
 
-export const deleteSelection = modify((id: string, sel: ModelSelection) => {
-  const doc = getComponentProp(id, `document`) as ModelDocument;
+export const deleteSelection = modify((id: string[], sel: ModelSelection) => {
+  const doc = getComponentProp(id[0], `document`) as ModelDocument;
   const { blocks } = doc;
 
   const normd = normaliseSelection(sel);
-  const { start, end } = isolateSelection(id, normd);
+  const { start, end } = isolateSelection(id[0], normd);
 
   const startBlock = blocks[start.blockI];
   const endBlock = blocks[end.blockI];
@@ -111,8 +111,8 @@ export const deleteSelection = modify((id: string, sel: ModelSelection) => {
   return normaliseDocument(doc, start);
 });
 
-export const createBlock = modify((id: string, cursor: ModelCursor) => {
-  const blocks = getComponentProp(id, `document.blocks`) as ModelBlock[];
+export const createBlock = modify((id: string[], cursor: ModelCursor) => {
+  const blocks = getComponentProp(id[0], `document.blocks`) as ModelBlock[];
   const block = blocks[cursor.blockI];
 
   splitSpan(blocks, cursor);
@@ -142,11 +142,11 @@ export const createBlock = modify((id: string, cursor: ModelCursor) => {
 });
 
 export const applySelectionStyle = modify(
-  (id: string, sel: ModelSelection, style: Partial<BaseTextStyle>) => {
-    const doc = getComponentProp(id, `document`) as ModelDocument;
+  (id: string[], sel: ModelSelection, style: Partial<BaseTextStyle>) => {
+    const doc = getComponentProp(id[0], `document`) as ModelDocument;
     const { blocks } = doc;
 
-    const { start, end } = isolateSelection(id, normaliseSelection(sel));
+    const { start, end } = isolateSelection(id[0], normaliseSelection(sel));
 
     if (style.alignment || style.lineHeight) {
       for (let i = sel.start!.blockI; i <= sel.end!.blockI; i++) {
@@ -449,8 +449,8 @@ function getExtremeCursor(doc: ModelDocument) {
 }
 
 export const mergeDocs = modify(
-  (id: string, cursor: ModelCursor, doc: ModelDocument) => {
-    const original = getComponentProp(id, "document") as ModelDocument;
+  (id: string[], cursor: ModelCursor, doc: ModelDocument) => {
+    const original = getComponentProp(id[0], "document") as ModelDocument;
     squashSpanStyles(doc);
 
     const extreme = getExtremeCursor(doc);
diff --git a/frontend/src/features/authoring/scene/scene.ts b/frontend/src/features/authoring/scene/scene.ts
index 554b33c4..581eec60 100644
--- a/frontend/src/features/authoring/scene/scene.ts
+++ b/frontend/src/features/authoring/scene/scene.ts
@@ -23,11 +23,11 @@ export function setScene(newScene: Record<string, any>) {
 }
 
 export function getComponent(id: string) {
-  return scene.components[id] ?? null;
+  return scene.components?.[id] ?? null;
 }
 
 export function getComponentProp(id: string, prop: string) {
-  const component = scene.components[id];
+  const component = scene.components?.[id];
   if (!component) return;
   const [object, key] = getObject(prop, component);
   return object[key];
diff --git a/frontend/src/features/authoring/stores/editor.ts b/frontend/src/features/authoring/stores/editor.ts
index dd20fd89..14feb262 100644
--- a/frontend/src/features/authoring/stores/editor.ts
+++ b/frontend/src/features/authoring/stores/editor.ts
@@ -8,13 +8,13 @@ type Mode = "normal" | "resize" | "create" | "text" | "mutation";
 
 interface EditorState {
   loading: boolean;
-  selected: string | null;
+  selected: string[];
   createType: string | null;
   mouseDown: boolean;
   mutationBounds: Bounds;
   offset: Vec2;
 
-  setSelected: (id: string | null) => void;
+  setSelected: (id: string[]) => void;
   setCreateType: (type: string) => void;
   setMouseDown: (mouseDown: boolean) => void;
   setMutationBounds: Dynamic<Bounds>;
@@ -55,14 +55,14 @@ function setter<K extends keyof EditorState>(set: Function, prop: K) {
 
 const useEditorStore = create<EditorState>((set) => ({
   loading: false,
-  selected: null,
+  selected: [],
   createType: null,
   mouseDown: false,
   mutationBounds: { verts: [], rotation: 0 },
   offset: { x: 0, y: 0 },
 
   setLoading: (value: boolean) => set({ loading: value }),
-  setSelected: (id) => set({ selected: id }),
+  setSelected: (ids) => set({ selected: ids }),
   setCreateType: (type: string) => set({ createType: type }),
   setMouseDown: (mouseDown) => set({ mouseDown }),
   setMutationBounds: setter(set, "mutationBounds"),
@@ -75,11 +75,13 @@ const useEditorStore = create<EditorState>((set) => ({
 
   setSelection: (selection) =>
     set(({ selected }) => {
-      if (selected && getComponent(selected).type === "textbox") {
-        const activeStyle = getStyleForSelection(selected, selection);
+      const mainTarget = selected[0];
+      const component = mainTarget ? getComponent(mainTarget) : null;
+      if (component?.type === "textbox") {
+        const activeStyle = getStyleForSelection(mainTarget!, selection);
         return { selection, activeStyle };
       }
-      return { selection };
+      return { selection, activeStyle: null };
     }),
   setVisualSelection: setter(set, "visualSelection"),
   setActiveStyle: (style: BaseTextStyle) => set({ activeStyle: style }),
@@ -93,7 +95,7 @@ const useEditorStore = create<EditorState>((set) => ({
 
   clear: () =>
     set({
-      selected: null,
+      selected: [],
       selection: { start: null, end: null },
       visualSelection: { start: null, end: null },
       mode: ["normal"],
diff --git a/frontend/src/features/authoring/text/Cursor.tsx b/frontend/src/features/authoring/text/Cursor.tsx
index 78d07ae3..4c56a774 100644
--- a/frontend/src/features/authoring/text/Cursor.tsx
+++ b/frontend/src/features/authoring/text/Cursor.tsx
@@ -12,7 +12,7 @@ function Cursor({ bounds }: { bounds: RelativeBounds }) {
 
   const { selected } = useEditorStore.getState();
   const { components } = useVisualScene.getState();
-  const { blocks } = components[selected!].document;
+  const { blocks } = components[selected[0]!].document;
 
   const { start, end } = visualSelection;
   if (start == null || (end && !shallow(start, end))) return null;
@@ -35,7 +35,7 @@ function Cursor({ bounds }: { bounds: RelativeBounds }) {
     y: bounds.y + bounds.height / 2,
   };
   const path = expandToPath({ ...box, origin });
-  const color = getStyleForSelection(selected!, modelSelection)?.textColor;
+  const color = getStyleForSelection(selected[0]!, modelSelection)?.textColor;
   return <path d={path} fill={color ?? "#000000"} />;
 }
 
diff --git a/frontend/src/features/authoring/text/Highlight.tsx b/frontend/src/features/authoring/text/Highlight.tsx
index db76b0c8..e273825b 100644
--- a/frontend/src/features/authoring/text/Highlight.tsx
+++ b/frontend/src/features/authoring/text/Highlight.tsx
@@ -111,7 +111,7 @@ function Highlight({ color }: HighlightProps) {
 
   const { selected } = useEditorStore.getState();
   const { components } = useVisualScene.getState();
-  const { blocks, bounds } = components[selected!].document;
+  const { blocks, bounds } = components[selected[0]!].document;
 
   if (!isValidSelection(selection, blocks)) return null;
 
diff --git a/frontend/src/features/authoring/text/Text.tsx b/frontend/src/features/authoring/text/Text.tsx
index fcb3e479..bfc8a840 100644
--- a/frontend/src/features/authoring/text/Text.tsx
+++ b/frontend/src/features/authoring/text/Text.tsx
@@ -1,7 +1,6 @@
 import type { VisualDocument } from "./types";
 import Cursor from "./Cursor.tsx";
 import Highlight from "./Highlight";
-import TextHighlight from "./TextHighlight";
 import Rectangle from "../canvas/Rectangle";
 import { buildStyle } from "./build";
 import useEditorStore from "../stores/editor";
@@ -32,7 +31,7 @@ function Text({ doc, editable }: { doc: VisualDocument; editable?: boolean }) {
     editable ? state.selected : null
   );
 
-  const isSelected = editable && selected === doc.id;
+  const isSelected = editable && selected && selected[0] === doc.id;
 
   const { bounds } = doc;
   const center = {
@@ -58,7 +57,6 @@ function Text({ doc, editable }: { doc: VisualDocument; editable?: boolean }) {
 
   return (
     <g className="select-none">
-      <TextHighlight doc={doc} />
       {isSelected && <Highlight color="#4997ff80" bounds={bounds} />}
       <g className="select-none" transform={transformation}>
         {buildGroups(doc)}
diff --git a/frontend/src/features/authoring/text/cursor.ts b/frontend/src/features/authoring/text/cursor.ts
index 7944a7d8..4a9989bb 100644
--- a/frontend/src/features/authoring/text/cursor.ts
+++ b/frontend/src/features/authoring/text/cursor.ts
@@ -112,9 +112,13 @@ export function toVisualSelection(
 
 export function syncModelSelection() {
   const editorState = useEditorStore.getState();
-  if (!editorState.selected || !editorState.visualSelection.start) return;
+
+  // Assume only one object is selected
+  if (!editorState.selected || editorState.selected.length !== 1) return;
+
   const blocks =
-    useVisualScene.getState().components[editorState.selected].document.blocks;
+    useVisualScene.getState().components[editorState.selected[0]].document
+      .blocks;
   editorState.setSelection(
     toModelSelection(editorState.visualSelection, blocks)
   );
@@ -122,9 +126,12 @@ export function syncModelSelection() {
 
 export function syncVisualCursor() {
   const editorState = useEditorStore.getState();
-  if (!editorState.selected || !editorState.selection.start) return;
+
+  // Assume only one object is selected
+  if (!editorState.selected || editorState.selected.length !== 1) return;
   const blocks =
-    useVisualScene.getState().components[editorState.selected].document.blocks;
+    useVisualScene.getState().components[editorState.selected[0]].document
+      .blocks;
   editorState.setVisualSelection(
     toVisualSelection(editorState.selection, blocks)
   );
diff --git a/frontend/src/features/authoring/topbar/ShapeSection.tsx b/frontend/src/features/authoring/topbar/ShapeSection.tsx
index 31752f24..38592019 100644
--- a/frontend/src/features/authoring/topbar/ShapeSection.tsx
+++ b/frontend/src/features/authoring/topbar/ShapeSection.tsx
@@ -1,6 +1,6 @@
 import { PaintBucket, Pencil, RulerIcon } from "lucide-react";
 import ChromePicker from "../wrapper/ChromePicker";
-import NumberInput from "../wrapper/NumberInput";
+
 import useEditorStore from "../stores/editor";
 import { useEffect, useState } from "react";
 import { getComponent } from "../scene/scene";
@@ -13,9 +13,20 @@ interface ShapeProps {
   strokeWidth: number;
 }
 
-function extractProps(selected: string): ShapeProps {
-  const { fill, stroke, strokeWidth } = getComponent(selected);
-  return { fill, stroke, strokeWidth };
+const defaultProps: ShapeProps = {
+  fill: "#000000",
+  stroke: "#000000",
+  strokeWidth: 1,
+};
+
+function extractProps(selected: string[]): ShapeProps {
+  if (!selected || selected.length === 0) return defaultProps;
+  const component = getComponent(selected[0]);
+  return {
+    fill: component?.fill ?? defaultProps.fill,
+    stroke: component?.stroke ?? defaultProps.stroke,
+    strokeWidth: component?.strokeWidth ?? defaultProps.strokeWidth,
+  };
 }
 
 const widths = [1, 2, 3, 4, 8, 12, 16, 24];
diff --git a/frontend/src/features/authoring/topbar/Topbar.tsx b/frontend/src/features/authoring/topbar/Topbar.tsx
index 30dfc69a..c15d7b47 100644
--- a/frontend/src/features/authoring/topbar/Topbar.tsx
+++ b/frontend/src/features/authoring/topbar/Topbar.tsx
@@ -9,7 +9,7 @@ import ShapeSection from "./ShapeSection";
 import TextSection from "./TextSection";
 import useEditorStore from "../stores/editor";
 import { getComponent } from "../scene/scene";
-import { redo, undo } from "../scene/history";
+import { handleUndoRedo } from "../scene/history";
 import { bringToFront, sendToBack } from "../scene/operations/component";
 import { useState } from "react";
 import StateVariableMenu from "../../../components/StateVariables/StateVariableMenu";
@@ -32,7 +32,9 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
     setCreateType(type);
   };
 
-  const component = selected ? getComponent(selected) : null;
+  const hasSelection = selected && selected.length > 0;
+
+  const component = hasSelection ? getComponent(selected[0]) : null;
 
   return (
     <>
@@ -45,12 +47,12 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
         <div className="divider divider-horizontal" />
 
         <li>
-          <a onClick={undo}>
+          <a onClick={() => handleUndoRedo(true)}>
             <Undo2Icon size={16} />
           </a>
         </li>
         <li>
-          <a onClick={redo}>
+          <a onClick={() => handleUndoRedo(false)}>
             <Redo2Icon size={16} />
           </a>
         </li>
@@ -67,10 +69,9 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
         <ShapeCreateMenu />
 
         {/* element properties */}
-        {selected && (
+        {hasSelection && (
           <>
             <div className="divider divider-horizontal" />
-
             {/* reorder */}
             <li>
               <a onClick={() => bringToFront(selected)}>
@@ -82,9 +83,8 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
                 <SendToBack size={16} />
               </a>
             </li>
-
             {/* shape properties */}
-            {component.type !== "image" && (
+            {component?.type !== "image" && (
               <>
                 <div className="divider divider-horizontal" />
                 <ShapeSection />
@@ -92,7 +92,7 @@ function Topbar({ saving, save }: { saving: boolean; save: () => void }) {
             )}
 
             {/* text content styles */}
-            {component.type === "textbox" && (
+            {component?.type === "textbox" && (
               <>
                 <div className="divider divider-horizontal" />
                 <TextSection />
diff --git a/frontend/src/features/authoring/util.ts b/frontend/src/features/authoring/util.ts
index 02c8d82d..6a524783 100644
--- a/frontend/src/features/authoring/util.ts
+++ b/frontend/src/features/authoring/util.ts
@@ -35,6 +35,10 @@ export function divide(v1: Vec2, v2: Vec2) {
   return { x: v1.x / v2.x, y: v1.y / v2.y };
 }
 
+export function scaleVecByScaleVec(v: Vec2, scale: Vec2) {
+  return { x: v.x * scale.x, y: v.y * scale.y };
+}
+
 export function rotate(v: Vec2, origin: Vec2, angle: Degree) {
   if (!angle) return v;
   const relative = subtract(v, origin);