5 files changed, 85 insertions, 0 deletions
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 32798631d..35d5e8a35 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -314,6 +314,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 1feb30db1..a77a28aa7 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 { DocumentManager } from "../../../util/DocumentManager";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { NumberField } from "../../../../fields/NumberField";
@@ -336,6 +337,7 @@ export class CollectionFreeFormView extends CollectionSubView {
                                     </div>
                                     {this.overlayView}
                                 </PreviewCursor>
+                                <Timeline />
                             </MarqueeView>
                         </div>
                     </div>)}
diff --git a/src/client/views/nodes/Timeline.scss b/src/client/views/nodes/Timeline.scss
new file mode 100644
index 000000000..d2055c946
--- /dev/null
+++ b/src/client/views/nodes/Timeline.scss
@@ -0,0 +1,40 @@
+.timeline-container {
+    height: 100px;
+    width: 500px;
+    background-color: rgb(160, 226, 243);
+    position: absolute;
+    left: 15%;
+    top: 1%;
+    font-size: 75%;
+
+    .timeline {
+        height: 60px;
+        width: 500px;
+        bottom: 0px;
+        background-color: grey;
+        position: absolute;
+    }
+
+    .inner {
+        height: 44px;
+        width: 484px;
+        background-color: black;
+        position: absolute;
+        margin: 8px;
+    }
+
+    button {
+        height: 30px;
+        width: 100px;
+        font-size: 1em;
+        position: relative;
+        margin: 5px;
+    }
+
+    input {
+        height: 30px;
+        width: 100px;
+        font-size: 1em;
+        margin: 5px;
+    }
+}
+\ 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..7872649a0
--- /dev/null
+++ b/src/client/views/nodes/Timeline.tsx
@@ -0,0 +1,35 @@
+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>{
+
+    private _isRecording = false;
+    onRecord = (e: React.MouseEvent) => {
+        this._isRecording = true;
+    }
+
+    onStop = (e: React.MouseEvent) => {
+        this._isRecording = false;
+    }
+
+    render() {
+        return (
+            <div>
+                <div className="timeline-container">
+                    <div className="timeline">
+                        <div className="inner">
+                        </div>
+                    </div>
+                    <button>Record</button>
+                    <button> Stop </button>
+                    <input placeholder="Time"></input>
+                </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