diff --git a/demo.gif b/demo.gif
new file mode 100644
index 0000000..87e3fe9
Binary files /dev/null and b/demo.gif differ
diff --git a/front/index.html b/front/index.html
index 6767758..5f603c5 100644
--- a/front/index.html
+++ b/front/index.html
@@ -6,10 +6,24 @@
         <script src="https://media.twiliocdn.com/sdk/js/sync/v0.8/twilio-sync.min.js"></script>
     </head>
     <body>
+        <form onsubmit="addTodo(event)">
+          <input id="todo-input" type=text name=todo />
+          <input type=submit />
+        </form>
         <div id="todos"></div>
         <script>
             let syncClient
 
+            const addTodo = async event => {
+                event.preventDefault()
+                newToDoField = event.target.elements.todo
+                const newTodo = newToDoField.value
+                console.log(newTodo)
+                newToDoField.value = ''
+                const todos = await syncClient.list('todos')
+                todos.push({name: newTodo})
+            }
+
             const setupTwilioClient = async () => {
                 try {
                     const response = await fetch('http://localhost:5001/token')
@@ -26,17 +40,21 @@
                         console.log('Sync is live!')
                     }
                 })
-                const list = await syncClient.list('todos')
-                // await list.push({name: 'buy milk'})
-                // await list.push({name: 'write blog post'})
-                const items = await list.getItems()
-                console.log(items)
-                const listDiv = document.getElementById('todos')
+                const todos = await syncClient.list('todos')
+                const items = await todos.getItems()
+                const todosDiv = document.getElementById('todos')
                 items.items.forEach(item => {
                     const itemDiv = document.createElement('div') 
                     itemDiv.className = "todo-item"
                     itemDiv.innerText = item.data.value.name
-                    listDiv.appendChild(itemDiv)
+                    todosDiv.appendChild(itemDiv)
+                })
+
+                todos.on('itemAdded', item => {
+                    const itemDiv = document.createElement('div') 
+                    itemDiv.className = "todo-item"
+                    itemDiv.innerText = item.item.data.value.name
+                    todosDiv.appendChild(itemDiv)
                 })
             }
 
