diff --git a/frontend/components/App.js b/frontend/components/App.js
index 38b7a2f5..a054266c 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,11 +1,76 @@
 import React from 'react'
+import ToDo from './TodoList';
+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, // could look different, you could use a timestamp to generate it
+          completed: false
+        },
+        {
+          name: 'Bake Cookies',
+          id: 1528817084358,
+          completed: false
+        }
+      ]
+    }
+  }
+
+handleAdd = (name) => {
+  const newtoDo = {
+    name: name,
+    id: Date.now(),
+    completed: false
+  }
+
+  this.setState({
+    ...this.state, 
+    todos: [...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..c1382610 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -1,11 +1,34 @@
 import React from 'react'
 
 export default class Form extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      input: ""
+    }
+  }
+
+  handlesumbit = (e) => {
+    e.preventDefault();
+    this.props.handleAdd(this.state.input)
+  }
+
+  handlechange = (e) => {
+    this.setState({
+      ...this.state,
+      input: e.target.value
+    })
+  }
+
+
+
   render() {
+    
     return (
-      <div>
-        Form
-      </div>
-    )
+      <form>
+        <input onChange={this.handlechange} type="text" />
+        <button onClick={this.handlesumbit}>ADD</button>
+
+      </form>)
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index ca86f981..164bdd10 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,11 +1,14 @@
 import React from 'react'
 
-export default class Todo extends React.Component {
-  render() {
-    return (
-      <div>
-        Todo
-      </div>
-    )
+export default class ToDo extends React.Component {
+
+  handleclick = () =>{
+  this.props.handletoggle(this.props.todo.id)
   }
+  render() {
+    return(
+    <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..6453e8af 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,11 +1,15 @@
 import React from 'react'
+import ToDo from './Todo'
 
-export default class TodoList extends React.Component {
+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>
+
     )
+
   }
 }
+