diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index 3359ce8931..02e96793ca 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -19,6 +19,7 @@ interface Arguments {
 export function useQueueHandler() {
   useSignals();
   const handleActions = useCallback(({ action, data }: Arguments) => {
+    console.log(`FROM ENGINE:${action} ${data}`)
     switch (action) {
       case fromEngineActions.UPDATE_TIME:
         currentTime.value = (data as UpdateTime).currentTime;
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index b9508e2412..55df4eb936 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -206,7 +206,6 @@ class Editor {
     // });
 
     
-
     if (this.can_initialize == false) {
       console.log("Editor Already Initialized");
       return;
@@ -331,6 +330,10 @@ class Editor {
     console.log(result);
   }
 
+  public async testTestTimelineEvents() {
+  Que
+  }
+
   public async testStylizeRequest() {
     const result = await this.api_manager.stylizeVideo(
     "mu_6wy1570a0c3c0tpkkncf4tsvb5234",
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 6873675c84..d2866cdfd1 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -7,6 +7,12 @@ import TransformEngine from "./transform_engine";
 import LipSyncEngine from "./lip_sync_engine";
 import AnimationEngine from "./animation_engine";
 
+import Queue from "~/pages/PageEnigma/Queue/Queue";
+import { QueueNames } from "../Queue/QueueNames";
+import { toEngineActions } from "../Queue/toEngineActions";
+import { Action } from "@remix-run/router";
+import { fromEngineActions } from "../Queue/fromEngineActions";
+import { currentTime } from "../store";
 // Every object uuid / entity has a track.
 export class TimelineCurrentState {
     is_editable: boolean
@@ -45,6 +51,8 @@ export class TimeLine {
     lipSync_engine: LipSyncEngine
 
     scene: Scene
+
+    current_time:number
     // ensure that the elements are loaded first.
     constructor(audio_engine: AudioEngine,
         transform_engine: TransformEngine,
@@ -65,6 +73,69 @@ export class TimeLine {
         this.animation_engine = animation_engine
 
         this.scene = scene;
+
+
+        Queue.subscribe(QueueNames.TO_ENGINE, this.handleTimelineActions);
+        
+        this.current_time = 0
+        // TODO: How to move the timeline should put in update.
+        // setInterval(()=> {
+        //     this.current_time +=1
+        //     this.pushEvent(fromEngineActions.UPDATE_TIME, { currentTime: this.current_time })
+        // },50)
+    }
+
+    public async pushEvent(action:fromEngineActions, data:any) {
+        this.current_time += 1
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_TIME,
+            data: data,
+        });
+    }
+
+    public async handleTimelineActions(data:any) {
+        const action = data["action"]
+        switch (action) {
+            case toEngineActions.ADD_CLIP:
+                await this.addClip(data)
+                break
+            case toEngineActions.DELETE_CLIP:
+                await this.deleteClip(data)
+                break
+            case toEngineActions.UPDATE_CLIP:
+                await this.updateClip(data)
+                break
+            case toEngineActions.UPDATE_TIME:
+                await this.scrubberUpdate(data)
+                break
+            case toEngineActions.MUTE:
+                await this.mute(data)
+                break
+            default:
+                console.log("Action Not Wired")
+        }
+       
+    }
+    
+    public async addClip(data:any) {
+        // map to clip ui 
+        console.log(data)
+    }
+    public async updateClip(data:any) {
+        // only length and offset changes here.
+        console.log(data)
+    }
+    public async deleteClip(data:any) {
+        console.log(data)
+    }
+
+    public async scrubberUpdate(data:any) {
+        console.log(data)
+    }
+
+    public async mute(data:any) {
+        console.log(data)
     }
 
     public async addPlayableClip(clip: ClipUI): Promise<void> {
@@ -75,33 +146,19 @@ export class TimeLine {
     // Then the clip will be loaded by the engines, if they come from outside of the loaded scene.
     public async createClipOffset(media_id: string, object_uuid:string, type: string): Promise<void> {
         // use engine to load based off media id and type animation | transform |  
-   
     }
 
     // this will update the state of the clips based off uuid easing?
-    public async updateClip(clip_uuid: string, updates: AnyJson): Promise<void> {
+    public async updatePlayableClip(clip_uuid: string, updates: AnyJson): Promise<void> {
 
     }
 
-    public async deleteClip(clip_uuid: string): Promise<void> {
-
-    }
-
-    // Events that will trigger from react
-    public async clipDidEnterDropZone() {
-
-    }
-
-    public async clipDidExitDropZone() {
-
-    }
-
-    // timeline controls this.
-    public async scrubberDidStart(offset_frame: number) {
-
+    public async deletePlayableClip(clip_uuid: string): Promise<void> {
+        
     }
 
     public async scrub(offset_frame: number): Promise<void> {
+        if (this.is_playing) { return }
         // only stream through to the position and rotation keyframes
         // debounce not really 
     }