diff --git a/frontend/components/App.js b/frontend/components/App.js
index 38b7a2f5..9fde584e 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,10 +1,67 @@
+/* eslint-disable no-unused-vars */
 import React from 'react'
+import ToDo from './Todo';
+import ToDoList from './TodoList';
+import Form from './Form';
 
 export default class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      todos: [
+        {
+          name: 'organize garage', 
+          id: 1528817077286,
+          completed: false
+        },
+        {
+          name: 'Bake Cookies',
+          id: 1528817084358,
+          comnpleted: false 
+        }
+      ]
+    }
+  }
+  handleAdd = (name) => {
+    const newtoDo = {
+      name: name,
+      id: Date.now(),
+      completed: false 
+    }
+    TouchList.setState({ 
+      ...this.state, 
+      todo: [...this.state.todos, newtoDo]
+    })
+  }
+  handleClear = () => {
+    this.setState({
+      ...this.state, 
+      todos: this.state.todos.filter( todo => {return todo.completed ===  false})
+    })
+  }
+  handleToggle = (clickedID) => {
+    this.setState({
+      ...this.state, 
+      todos: this.state.todos.map(todo => {
+        if (todo.id === clickedID) {
+          return {
+            ...todo,
+            completed: !todo.completed 
+          }
+        }
+        return todo
+      })
+    })
+  }
   render() {
+    const { todos } = this.state;
+    console.log(todos) 
     return (
       <div>
-        Todo App
+        <h1>TODOS</h1>
+        <ToDoList handleToggle ={this.handleToggle} todos ={todos} />
+        <Form handleAdd={this.handleAdd} />
+        <button onClick={this.handleClear}>CLEAR</button>
       </div>
     )
   }
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 30fbc48d..55c1d898 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -1,11 +1,24 @@
 import React from 'react'
 
 export default class Form extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      input: ""
+    }
+  }
+  handleSubmit = (e) => {
+    this.setState({
+      ...this.state, 
+      input: e.target.value
+    })
+  }
   render() {
     return (
-      <div>
-        Form
-      </div>
+      <form>
+        <input onChange={this.handleChange} type="text" />
+        <button onClick={this.handleSubmit}>ADD</button>
+      </form>
     )
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index ca86f981..6a5d7d85 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,11 +1,12 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
+  handleClick = () => {
+    this.props.handleToggle(this.props.todo.id)
+  }
   render() {
     return (
-      <div>
-        Todo
-      </div>
+      <li onClick={this.handleClick}>{this.props.todo.name}{this.props.todo.completed ? <span>completed</span> : <span></span>}</li>
     )
   }
 }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index 95410373..d4009c2d 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,11 +1,11 @@
 import React from 'react'
-
+import ToDo from './Todo'
 export default class TodoList extends React.Component {
   render() {
     return (
-      <div>
-        TodoList
-      </div>
+     <ul>
+      {this.props.todos.map(todo => { return (<ToDo key={todo.id} handleToggle={this.props.handleToggle} todo={todo} />) })}
+     </ul>
     )
   }
 }