diff --git a/frontend/components/App.js b/frontend/components/App.js
index 815684369..716c63ba2 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,9 +1,90 @@
 import React from 'react'
+import axios from 'axios'
+import Form from './Form'
+import TodoList from './TodoList'
 
 const URL = 'http://localhost:9000/api/todos'
 
 export default class App extends React.Component {
+  state = {
+    todos: [],
+    error: '',
+    todoNameInput: '',
+    displayCompleted: true
+  }
+
+  handleInput = evt => {
+    const {value} = evt.target;
+    this.setState({...this.state, todoNameInput: value})
+  }
+
+  resetForm = () => {
+    this.setState({...this.state, todoNameInput: ''})
+  }
+
+  setAxiosResponseErr = err => {
+    this.setState({...this.state, error: err.response.data.message})
+  }
+
+  postNewTodo = () => {
+    axios.post(URL, {name: this.state.todoNameInput})
+      .then(res => {
+        this.setState({...this.state, todos: this.state.todos.concat(res.data.data)});
+        this.resetForm();
+      })
+      .catch(this.setAxiosResponseErr)
+  }
+
+  handleSubmit = evt => {
+    evt.preventDefault();
+    this.postNewTodo();
+  }
+
+  fetchAllTodos = () => {
+    axios.get(URL)
+      .then(res => {
+        this.setState({...this.state, todos: res.data.data});
+      })
+      .catch(this.setAxiosResponseErr)
+  }
+  
+  toggleCompleted = id => () => {
+    axios.patch(`${URL}/${id}`)
+      .then(res => {
+        this.setState({...this.state, todos: this.state.todos.map(td => {
+          if( td.id !== id) return td;
+          return res.data.data;
+        })})
+      })
+      .catch(this.setAxiosResponseErr)
+  }
+
+  handleClear = () => {
+    this.setState({...this.state, displayCompleted: !this.state.displayCompleted})
+  }
+
+  componentDidMount() {
+    //fetch all todos from server
+    this.fetchAllTodos()
+  }
+
   render() {
-    return null
+    return (
+      <div>
+        <div id="error">Error: {this.state.error}</div>
+        <TodoList 
+          todos={this.state.todos}
+          displayCompleted={this.state.displayCompleted}
+          toggleCompleted={this.toggleCompleted}
+        />
+        <Form 
+          handleSubmit={this.handleSubmit}
+          todoNameInput={this.state.todoNameInput}
+          handleInput={this.handleInput}
+          handleClear={this.handleClear}
+          displayCompleted={this.state.displayCompleted}
+        />
+      </div>
+    )
   }
 }
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 3932207be..0bbcfe86b 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -2,6 +2,21 @@ import React from 'react'
 
 export default class Form extends React.Component {
   render() {
-    return null
+    return (
+      <div>
+        <form id="todoForm" onSubmit={this.props.handleSubmit}>
+          <input 
+              value={this.props.todoNameInput} 
+              onChange={this.props.handleInput} 
+              type="text" 
+              placeholder='Type todo'>
+            </input>
+          <input type="submit"></input>          
+        </form>
+        <button onClick={this.props.handleClear}>
+          {this.props.displayCompleted ? 'Hide' : 'Show'} Completed
+        </button>
+      </div>
+    )
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index aac687f6d..8f5edd79b 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -2,6 +2,12 @@ import React from 'react'
 
 export default class Todo extends React.Component {
   render() {
-    return null
+    return (
+      <div onClick={this.props.toggleCompleted(this.props.todo.id)}>
+
+        {this.props.todo.name} {this.props.todo.completed ? "- completed" : ""}
+
+      </div>
+    )
   }
 }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index ce08a27ba..1c138af70 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -1,7 +1,24 @@
 import React from 'react'
+import Todo from './Todo'
 
 export default class TodoList extends React.Component {
   render() {
-    return null
+    return (
+      <div id="todos">
+        <h2>Todos:</h2>
+        {
+          this.props.todos.reduce((acc, td) => {
+            if(this.props.displayCompleted || !td.completed) return acc.concat(
+              <Todo 
+                key={td.id}
+                toggleCompleted={this.props.toggleCompleted}
+                todo={td}
+              />
+            )
+            return acc
+          }, [])
+        }
+      </div>
+    )
   }
 }