5 files changed, 61 insertions, 0 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index b4ab9e21d..9251860a0 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -288,6 +288,7 @@ export class Main extends React.Component {
         ]
     }
 
+
     render() {
         let workspaceMenu: any = null;
         let workspaces = this.userDocument.GetT<ListField<Document>>(KeyStore.Workspaces, ListField);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 1ddb84a99..f3a83f5a0 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -20,6 +20,7 @@ import React = require("react");
 import v5 = require("uuid/v5");
 import { CollectionFreeFormRemoteCursors } from "./CollectionFreeFormRemoteCursors";
 import { PreviewCursor } from "./PreviewCursor";
+import { Timeline } from "../../nodes/Timeline"
 import { NumberField } from "../../../../fields/NumberField";
 
 @observer
@@ -313,7 +314,9 @@ export class CollectionFreeFormView extends CollectionViewBase {
                         </div>
                         {this.overlayView}
                     </PreviewCursor>
+                    <Timeline />
                 </MarqueeView>
+
             </div>
         );
     }
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
new file mode 100644
index 000000000..b58828c0f
--- /dev/null
+++ b/src/client/views/nodes/Timeline.scss
@@ -0,0 +1,23 @@
+.timeline-container{
+    top: 10px;
+    left: 400px;
+    height: 100px; 
+    width: 500px; 
+    background-color: yellow; 
+    position: absolute;
+
+    .timeline{
+        height: 50px; 
+        width: 500px;
+        bottom: 0px; 
+        background-color: grey;
+        position: absolute; 
+        
+    }
+    button{
+        height: 30px; 
+        width: 100px; 
+        font-size: 1em; 
+        position:relative; 
+    }
+}
+\ No newline at end of file
diff --git a/src/client/views/nodes/Timeline.tsx b/src/client/views/nodes/Timeline.tsx
new file mode 100644
index 000000000..3bd549ccc
--- /dev/null
+++ b/src/client/views/nodes/Timeline.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import { observer } from "mobx-react"
+import { observable } from "mobx"
+import { TimelineField } from "../../../fields/TimelineField";
+import "./Timeline.scss"
+
+
+
+@observer
+export class Timeline extends React.Component<TimelineField>{
+
+    render() {
+        return (
+            <div>
+                <div className="timeline-container"> 
+                    <div className="timeline">
+                       
+
+                    </div> 
+                    <button>Record</button>
+                    <button> Stop </button>
+                </div>
+            </div>
+        )
+    }
+}
+\ No newline at end of file
diff --git a/src/fields/TimelineField.ts b/src/fields/TimelineField.ts
new file mode 100644
index 000000000..4325647cb
--- /dev/null
+++ b/src/fields/TimelineField.ts
@@ -0,0 +1,7 @@
+import { BasicField } from "./BasicField"
+import { FieldId } from "./Field";
+import { Types } from "../server/Message";
+
+export class TimelineField  {
+   
+}
+\ No newline at end of file