diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts
index 4e098238e8..d793335c08 100644
--- a/app/pages/PageEnigma/Queue/Queue.ts
+++ b/app/pages/PageEnigma/Queue/Queue.ts
@@ -6,20 +6,20 @@ import {
   UpdateTime,
 } from "~/pages/PageEnigma/models";
 import { toTimelineActions } from "./toTimelineActions";
-
+import { ClipUI } from "../datastructures/clips/clip_ui";
 class Queue {
   private _queue: Record<
     string,
     {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe;
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
     }[]
   > = {};
   private _subscribers: Record<
     string,
     (entry: {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe;
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
     }) => void
   > = {};
 
@@ -30,7 +30,7 @@ class Queue {
   }: {
     queueName: string;
     action: fromEngineActions | toEngineActions | toTimelineActions;
-    data: QueueClip | UpdateTime | QueueKeyframe;
+    data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] ;
   }) {
     if (!this._queue[queueName]) {
       this._queue[queueName] = [];
@@ -47,7 +47,7 @@ class Queue {
     queueName: string,
     onMessage: (entry: {
       action: fromEngineActions | toEngineActions | toTimelineActions;
-      data: QueueClip | UpdateTime | QueueKeyframe;
+      data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[];
     }) => void,
   ) {
     this._subscribers[queueName] = onMessage;
diff --git a/app/pages/PageEnigma/Queue/fromEngineActions.ts b/app/pages/PageEnigma/Queue/fromEngineActions.ts
index 40753b789d..2e647b32bc 100644
--- a/app/pages/PageEnigma/Queue/fromEngineActions.ts
+++ b/app/pages/PageEnigma/Queue/fromEngineActions.ts
@@ -1,4 +1,5 @@
 export enum fromEngineActions {
   UPDATE_TIME = "update_time",
+  UPDATE_TIME_LINE = "update_timeline",
   // data={currentTime: number}
 }
diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
index efb62a9bbc..c5bf23e06d 100644
--- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
+++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts
@@ -28,6 +28,8 @@ export function useQueueHandler() {
       case fromEngineActions.UPDATE_TIME:
         currentTime.value = (data as UpdateTime).currentTime;
         break;
+      case fromEngineActions.UPDATE_TIME_LINE:
+        console.log(action)
       default:
         throw new Error(`Unknown action ${action}`);
     }
diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts
index 06c1d000e3..af0707f0b9 100644
--- a/app/pages/PageEnigma/js/editor.ts
+++ b/app/pages/PageEnigma/js/editor.ts
@@ -373,17 +373,7 @@ class Editor {
     let proxyTimeline = new StoryTellerProxyTimeline(this.version, this.timeline, this.transform_engine, this.animation_engine, this.audio_engine, this.lipsync_engine);
     await proxyTimeline.loadFromJson(scene_json['timeline']);
 
-    // this.activeScene.scene.children.forEach((child: THREE.Object3D) => {
-    //   child.parent = this.activeScene.scene;
-    //   if (child.type == "DirectionalLight") {
-    //     const pos = child.position;
-    //     const rot = child.rotation;
-    //     const light = this.activeScene._create_base_lighting();
-    //     light.position.set(pos.x, pos.y, pos.z);
-    //     light.rotation.set(rot.x, rot.y, rot.z);
-    //     this.activeScene.scene.remove(child);
-    //   }
-    // });
+  
 
     this.dispatchAppUiState({
       type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER,
diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts
index 09f0632f9c..e1090d081e 100644
--- a/app/pages/PageEnigma/js/timeline.ts
+++ b/app/pages/PageEnigma/js/timeline.ts
@@ -11,17 +11,9 @@ import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { QueueNames } from "../Queue/QueueNames";
 import { toEngineActions } from "../Queue/toEngineActions";
 import { fromEngineActions } from "../Queue/fromEngineActions";
-import { ClipGroup, ClipType } from "~/pages/PageEnigma/models/track";
-// Every object uuid / entity has a track.
-export class TimelineCurrentState {
-    is_editable: boolean;
-    selected_object_ID: number;
-    constructor() {
-        this.is_editable = true; // can add clips to it
-        this.selected_object_ID = 0;
-    }
-}
+import { ClipType } from "~/pages/PageEnigma/models/track";
 
+// Every object uuid / entity has a track.
 export class TimelineDataState {
     timeline_items: ClipUI[];
     scrubber_frame_position: number;
@@ -83,11 +75,14 @@ export class TimeLine {
         );
 
         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 updateUI() {
+        Queue.publish({
+            queueName: QueueNames.FROM_ENGINE,
+            action: fromEngineActions.UPDATE_TIME_LINE,
+            data: this.timeline_items,
+        });
     }
 
     public async pushEvent(action: fromEngineActions, data: any) {
diff --git a/app/pages/PageEnigma/models/assets.ts b/app/pages/PageEnigma/models/assets.ts
index a8503a790f..c6e4539759 100644
--- a/app/pages/PageEnigma/models/assets.ts
+++ b/app/pages/PageEnigma/models/assets.ts
@@ -16,7 +16,7 @@ export enum AssetType {
   ANIMATION = "animation",
   CAMERA = "camera",
   SHAPE = "shape",
-  STYLE = "style"
+  STYLE = "style" // TODO Remove 
 }
 
 export enum AssetFilterOption {
diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
index ad2e7a473b..e5cb72ff2a 100644
--- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
+++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts
@@ -123,5 +123,9 @@ export class StoryTellerProxyTimeline {
         this.audio_engine.clips = await this.loadAudioClips(timeline['audio']);
         this.lipsync_engine.clips = await this.loadLipsyncClips(timeline['lipsync']);
         this.animation_engine.clips = await this.loadAnimationClips(timeline['animation']);
+
+
+        this.timeline.updateUI()
     }
+
 }
diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts
index e2aa22523b..f1579cd77b 100644
--- a/app/pages/PageEnigma/store/media.ts
+++ b/app/pages/PageEnigma/store/media.ts
@@ -9,7 +9,7 @@ export const animationItems = signal<MediaItem[]>([
     type: AssetType.ANIMATION,
     length: 100,
     name: "Sit",
-    thumbnail: "resources/characters/img01.png",
+    thumbnail: "resources/characters/img04.png",
     isMine: true,
   },
   {
@@ -18,7 +18,7 @@ export const animationItems = signal<MediaItem[]>([
     type: AssetType.ANIMATION,
     length: 100,
     name: "Idle",
-    thumbnail: "resources/characters/img01.png",
+    thumbnail: "resources/characters/img07.png",
     isBookmarked: true,
   },
   {
@@ -27,7 +27,7 @@ export const animationItems = signal<MediaItem[]>([
     type: AssetType.ANIMATION,
     length: 100,
     name: "Walk",
-    thumbnail: "resources/characters/img01.png",
+    thumbnail: "resources/characters/img07.png",
   },
   {
     version: 1,