diff --git a/app/components/InputVector.tsx b/app/components/InputVector.tsx
index 0a10274524..3c4d3c5a17 100644
--- a/app/components/InputVector.tsx
+++ b/app/components/InputVector.tsx
@@ -1,5 +1,6 @@
 import { useRef } from "react";
 import { twMerge } from "tailwind-merge";
+import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 interface InputVectorProps {
   x: number;
@@ -41,6 +42,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={xRef}
           value={x}
+          onFocus={() => (ignoreDelete.value = true)}
+          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -55,6 +58,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={yRef}
           value={y}
+          onFocus={() => (ignoreDelete.value = true)}
+          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
       <span
@@ -69,6 +74,8 @@ export const InputVector = ({ x, y, z, onChange }: InputVectorProps) => {
           onChange={handleOnChange}
           ref={zRef}
           value={z}
+          onFocus={() => (ignoreDelete.value = true)}
+          onBlur={() => (ignoreDelete.value = false)}
         />
       </span>
     </div>
diff --git a/app/components/Textarea.tsx b/app/components/Textarea.tsx
index 278b54a7cb..cc35c75ac2 100644
--- a/app/components/Textarea.tsx
+++ b/app/components/Textarea.tsx
@@ -2,6 +2,7 @@ import { TextareaHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import { Label } from "./Typography";
 import { kebabCase } from "~/utilities";
+import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 type ResizeType =
   | "none"
@@ -24,14 +25,10 @@ export const Textarea = ({
 }) => {
   return (
     <div className="flex flex-col">
-      {label && 
-        <Label htmlFor={id ? id : kebabCase(label)}>
-          {label}
-        </Label>
-      }
-      
+      {label && <Label htmlFor={id ? id : kebabCase(label)}>{label}</Label>}
+
       <textarea
-        id={id ? id : (label ? kebabCase(label) : undefined)}
+        id={id ? id : label ? kebabCase(label) : undefined}
         className={twMerge(
           "rounded-lg border border-ui-panel-border bg-ui-controls p-3",
           className,
@@ -41,8 +38,14 @@ export const Textarea = ({
           transition: "outline-color 0.15s ease-in-out",
           resize: resize,
         }}
-        onFocus={(e) => (e.currentTarget.style.outlineColor = "#e66462")}
-        onBlur={(e) => (e.currentTarget.style.outlineColor = "transparent")}
+        onFocus={(e) => {
+          ignoreDelete.value = true;
+          e.currentTarget.style.outlineColor = "#e66462";
+        }}
+        onBlur={(e) => {
+          ignoreDelete.value = false;
+          e.currentTarget.style.outlineColor = "transparent";
+        }}
         {...rest}
       />
     </div>
diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx
index 2dc6918b3f..6b9038c970 100644
--- a/app/pages/PageEnigma/PageEnigma.tsx
+++ b/app/pages/PageEnigma/PageEnigma.tsx
@@ -21,7 +21,7 @@ export const PageEnigma = () => {
     function setPage() {
       // TODO address this issue with zooming
       pageHeight.value = window.innerHeight;
-      pageWidth.value = window.outerWidth;
+      pageWidth.value = window.innerWidth;
     }
     timelineHeight.value = window.innerHeight * 0.25;
     sidePanelWidth.value = 443;
diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx
index aefdc5f094..ef57ce95cd 100644
--- a/app/pages/PageEnigma/PageEnigmaComponent.tsx
+++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx
@@ -102,7 +102,13 @@ export const PageEnigmaComponent = () => {
 
               {/* Bottom controls */}
               <div
-                className="absolute bottom-0 left-0 w-full"
+                className="absolute bottom-0 left-0"
+                style={{
+                  width:
+                    pageWidth.value -
+                    (sidePanelVisible.value ? sidePanelWidth.value : 0) -
+                    84,
+                }}
                 onClick={handleOverlayClick}
               >
                 <PreviewEngineCamera />
diff --git a/app/pages/PageEnigma/Queue/toEngineActions.ts b/app/pages/PageEnigma/Queue/toEngineActions.ts
index 4be8244918..3a1e828a00 100644
--- a/app/pages/PageEnigma/Queue/toEngineActions.ts
+++ b/app/pages/PageEnigma/Queue/toEngineActions.ts
@@ -7,6 +7,8 @@ export enum toEngineActions {
 
   ADD_OBJECT = "add_object",
 
+  ADD_SHAPE = "add_shape",
+
   // data= QueueKeyframe
   DELETE_CLIP = "delete_clip",
   // data=QueueClip
diff --git a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
index 8242f70de6..d736eb492b 100644
--- a/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
+++ b/app/pages/PageEnigma/comps/ControlPanelSceneObject/ControlPanelSceneObject.tsx
@@ -132,15 +132,14 @@ export const ControlPanelSceneObject = () => {
         return;
       }
 
-      for (let key in editorEngine?.timeline.characters) {
-        let element = editorEngine?.timeline.characters[key];
+      for (const key in editorEngine?.timeline.characters) {
+        const element = editorEngine?.timeline.characters[key];
         if (key == currentSceneObject.object_uuid) {
-            currentSceneObject.group = element;
-            break;
+          currentSceneObject.group = element;
+          break;
         }
       }
 
-
       Queue.publish({
         queueName: QueueNames.TO_TIMELINE,
         action: toTimelineActions.ADD_KEYFRAME,
@@ -165,7 +164,13 @@ export const ControlPanelSceneObject = () => {
   return (
     <Transition
       show={appUiState?.controlPanel.isShowing}
-      className="absolute bottom-0 right-0 m-4 flex h-fit w-fit flex-col gap-2 rounded-lg border border-ui-panel-border bg-ui-panel p-4 text-white"
+      className={[
+        "absolute bottom-0 right-0",
+        "m-4 flex h-fit w-fit flex-col gap-2",
+        "rounded-lg",
+        "border border-ui-panel-border",
+        "bg-ui-panel p-4 text-white",
+      ].join(" ")}
       enter="transition-opacity duration-100"
       enterFrom="opacity-0"
       enterTo="opacity-100"
diff --git a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
index 2a23a5effd..a5ad366e1f 100644
--- a/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
+++ b/app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx
@@ -20,30 +20,6 @@ export const Controls3D = () => {
   const handlePlus = () => {
     console.log("Controls 3D: Plus button clicked");
   };
-  const handleCube = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Box");
-  };
-  const handleCylinder = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Cylinder");
-  };
-  const handleTorus = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Donut");
-  };
-  const handleSphere = () => {
-    if (editorEngine == null || editorEngine == undefined) {
-      return;
-    }
-    editorEngine.create_parim("Sphere");
-  };
   const handleMoveArrows = () => {
     if (!editorEngine) {
       return;
@@ -94,15 +70,6 @@ export const Controls3D = () => {
 
             <span className="h-4 w-0 border-l border-white/[0.15]" />
 
-            <div className="flex gap-1">
-              <ButtonIcon icon={faCube} onClick={handleCube} />
-              <ButtonIcon icon={fa3dCylinder} onClick={handleCylinder} />
-              <ButtonIcon icon={fa3dTorus} onClick={handleTorus} />
-              <ButtonIcon icon={fa3dSphere} onClick={handleSphere} />
-            </div>
-
-            <span className="h-4 w-0 border-l border-white/[0.15]" />
-
             <ButtonIconSelect
               options={modes}
               onOptionChange={handleModeChange}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
index 59aa38d8b1..f2b61ed00d 100644
--- a/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
+++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx
@@ -6,6 +6,7 @@ import { AppUiContext } from "../../contexts/AppUiContext";
 import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from "../../reducers";
 import { EngineContext } from "../../contexts/EngineContext";
 import { ArtStyle } from "../../js/api_manager";
+import { ignoreDelete } from "~/pages/PageEnigma/store";
 
 export const TabStylization = () => {
   const [appUiState, dispatchAppUiState] = useContext(AppUiContext);
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index 9779650314..dcbc98147b 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -9,6 +9,7 @@ import {
   deleteAudioClip,
   deleteCharacterClip,
   selectedItem,
+  ignoreDelete,
 } from "~/pages/PageEnigma/store";
 import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler";
 import { useSignals } from "@preact/signals-react/runtime";
@@ -39,6 +40,9 @@ export const Timeline = () => {
   }, []);
 
   const onDeleteAsk = useCallback((event: KeyboardEvent) => {
+    if (ignoreDelete.value) {
+      return;
+    }
     if (
       ["Backspace", "Delete"].indexOf(event.key) > -1 &&
       selectedItem.value !== null
diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
index f6138cc05b..5132e53acc 100644
--- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
+++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx
@@ -17,6 +17,7 @@ import {
   audioGroup,
   objectGroup,
   deleteCharacter,
+  addShape,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 import { deleteObject } from "~/pages/PageEnigma/store/objectGroup/deleteObject";
@@ -43,10 +44,10 @@ export const TrackProvider = ({ children }: Props) => {
       if (dragItem.value.type === AssetType.OBJECT) {
         addObject(dragItem.value);
       }
+      if (dragItem.value.type === AssetType.SHAPE) {
+        addShape(dragItem.value);
+      }
     }
-    // if (dragItem.value.type === AssetType.SHAPE) {
-    //   console.log("Dragged In Shape Type")
-    // }
 
     if (canDrop.value && dragItem.value) {
       if (dragItem.value.type === AssetType.ANIMATION) {
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index ee7ae2c358..a33026252c 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -183,6 +183,7 @@ class Editor {
     this.animation_engine = new AnimationEngine(this.version);
 
     this.timeline = new TimeLine(
+      this,
       this.audio_engine,
       this.transform_engine,
       this.lipsync_engine,
@@ -205,12 +206,10 @@ class Editor {
     this.negative_prompt = "";
     this.art_style = ArtStyle.Anime2DFlat;
 
-
     this.storyteller_proxy_scene = new StoryTellerProxyScene(
       this.version,
       this.activeScene.scene,
     );
-
   }
 
   initialize(config: any) {
@@ -291,7 +290,7 @@ class Editor {
     );
 
     this.control = new TransformControls(this.camera, this.renderer.domElement);
-    this.control.space = 'local'; // Local transformation mode
+    this.control.space = "local"; // Local transformation mode
     // .space = 'world'; // Global mode
 
     this.control.setScaleSnap(0.1);
@@ -410,19 +409,18 @@ class Editor {
   // TO UPDATE selected objects in the scene might want to add to the scene ...
   async setSelectedObject(position: XYZ, rotation: XYZ, scale: XYZ) {
     if (this.selected != undefined || this.selected != null) {
+      //console.log(`triggering setSelectedObject`)
+      this.selected.position.x = position.x;
+      this.selected.position.y = position.y;
+      this.selected.position.z = position.z;
 
-      //console.log(`triggering setSelectedObject`) 
-      this.selected.position.x = position.x
-      this.selected.position.y = position.y
-      this.selected.position.z = position.z
+      this.selected.rotation.x = THREE.MathUtils.degToRad(rotation.x);
+      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y);
+      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z);
 
-      this.selected.rotation.x = THREE.MathUtils.degToRad(rotation.x)
-      this.selected.rotation.y = THREE.MathUtils.degToRad(rotation.y)
-      this.selected.rotation.z = THREE.MathUtils.degToRad(rotation.z)
-
-      this.selected.scale.x = scale.x
-      this.selected.scale.y = scale.y
-      this.selected.scale.z = scale.z
+      this.selected.scale.x = scale.x;
+      this.selected.scale.y = scale.y;
+      this.selected.scale.z = scale.z;
     }
   }
 
@@ -552,9 +550,7 @@ class Editor {
     // const object: THREE.Object3D = await this.activeScene.load_glb(
     //   "m_4wva09qznapzk5rcvbxy671d1qx2pr",
     // );
-
     // object.uuid = "CH1";
-
     // Stick Open Pose Man: m_9f3d3z94kk6m25zywyz6an3p43fjtw
     // XBot: m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d
     // YBot: m_9sqg0evpr23587jnr8z3zsvav1x077
@@ -739,7 +735,7 @@ class Editor {
 
     if (this.timeline.is_playing) {
       const changeView = await this.timeline.update(this.rendering);
-      if(changeView) {
+      if (changeView) {
         this.switchCameraView();
       }
     } else if (this.last_scrub == this.timeline.scrubber_frame_position) {
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 0cbd81c84d..a1fe8a693d 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -12,7 +12,7 @@ import { QueueNames } from "../Queue/QueueNames";
 import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
 import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
-
+import { MediaItem } from "~/pages/PageEnigma/models";
 // Every object uuid / entity has a track.
 export class TimelineDataState {
     timeline_items: ClipUI[];
@@ -133,11 +133,18 @@ export class TimeLine {
             case toEngineActions.ADD_OBJECT:
                 await this.addObject(data);
                 break;
+            case toEngineActions.ADD_SHAPE:
+                    await this.addShape(data);
+                    break;
             default:
                 console.log("Action Not Wired", action);
         }
     }
 
+    public async addShape({ data }: { data: MediaItem }) {
+        this.scene.instantiate(data.media_id);
+      }
+
     public async addCharacter(data: any) {
         let media_id = data.data['media_id'];
         let name = data.data['name'];
@@ -496,5 +503,4 @@ export class TimeLine {
             currentTime: this.current_time,
         });
     }
-}
-
+}
\ No newline at end of file
diff --git a/app/pages/PageEnigma/store/index.ts b/app/pages/PageEnigma/store/index.ts
index 2c89a60fc4..78254d1a60 100644
--- a/app/pages/PageEnigma/store/index.ts
+++ b/app/pages/PageEnigma/store/index.ts
@@ -5,6 +5,7 @@ export * from "./dragAndDrop";
 export * from "./media";
 export * from "./objectGroup";
 export * from "./selectedItem";
+export * from "./shape";
 export * from "./sidePanel";
 export * from "./sizing";
 export * from "./timing";
diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index 10d3e23cfd..51167876fa 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -454,7 +454,7 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "Talk (Demo Sounds)",
-    thumbnail: "resources/placeholders/audio_placeholder.png"
+    thumbnail: "resources/placeholders/audio_placeholder.png",
   },
   {
     version: 1,
@@ -462,8 +462,8 @@ export const audioItems = signal<MediaItem[]>([
     type: AssetType.AUDIO,
     length: 25,
     name: "NCS Song",
-    thumbnail: "resources/placeholders/audio_placeholder.png"
-  }
+    thumbnail: "resources/placeholders/audio_placeholder.png",
+  },
 ]);
 
 export const cameraItems = signal<MediaItem[]>([
@@ -530,13 +530,35 @@ export const objectItems = signal<MediaItem[]>([
     thumbnail: "resources/placeholders/placeholder.png",
   },
 ]);
+
 // In the future these will have shape id's
 export const shapeItems = signal<MediaItem[]>([
   {
     version: 1,
-    media_id: "",
+    media_id: "Box",
     type: AssetType.SHAPE,
     name: "Cube",
-    thumbnail: "resources/placeholders/placeholder.png",
+    thumbnail: "resources/shapes/cube.png",
+  },
+  {
+    version: 1,
+    media_id: "Cylinder",
+    type: AssetType.SHAPE,
+    name: "Cylinder",
+    thumbnail: "resources/shapes/cylinder.png",
+  },
+  {
+    version: 1,
+    media_id: "Donut",
+    type: AssetType.SHAPE,
+    name: "Donut",
+    thumbnail: "resources/shapes/donut.png",
+  },
+  {
+    version: 1,
+    media_id: "Sphere",
+    type: AssetType.SHAPE,
+    name: "Sphere",
+    thumbnail: "resources/shapes/sphere.png",
   },
 ]);
diff --git a/app/pages/PageEnigma/store/selectedItem.ts b/app/pages/PageEnigma/store/selectedItem.ts
index 4f1d7bf778..210d975e04 100644
--- a/app/pages/PageEnigma/store/selectedItem.ts
+++ b/app/pages/PageEnigma/store/selectedItem.ts
@@ -2,3 +2,5 @@ import { signal } from "@preact/signals-core";
 import { Clip, Keyframe } from "~/pages/PageEnigma/models";
 
 export const selectedItem = signal<Clip | Keyframe | null>(null);
+
+export const ignoreDelete = signal(false);
diff --git a/app/pages/PageEnigma/store/shape.ts b/app/pages/PageEnigma/store/shape.ts
new file mode 100644
index 0000000000..26ea68a57e
--- /dev/null
+++ b/app/pages/PageEnigma/store/shape.ts
@@ -0,0 +1,12 @@
+import { MediaItem } from "~/pages/PageEnigma/models";
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
+import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
+
+export function addShape(item: MediaItem) {
+  Queue.publish({
+    queueName: QueueNames.TO_ENGINE,
+    action: toEngineActions.ADD_SHAPE,
+    data: item,
+  });
+}
diff --git a/public/resources/shapes/cube.png b/public/resources/shapes/cube.png
new file mode 100644
index 0000000000..51cb24114c
Binary files /dev/null and b/public/resources/shapes/cube.png differ
diff --git a/public/resources/shapes/cylinder.png b/public/resources/shapes/cylinder.png
new file mode 100644
index 0000000000..73cf7eaec4
Binary files /dev/null and b/public/resources/shapes/cylinder.png differ
diff --git a/public/resources/shapes/donut.png b/public/resources/shapes/donut.png
new file mode 100644
index 0000000000..bb4e5a0fbb
Binary files /dev/null and b/public/resources/shapes/donut.png differ
diff --git a/public/resources/shapes/sphere.png b/public/resources/shapes/sphere.png
new file mode 100644
index 0000000000..b482e9fa30
Binary files /dev/null and b/public/resources/shapes/sphere.png differ