diff --git a/frontend/components/App.js b/frontend/components/App.js
index 815684369..d27dc03ff 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,9 +1,73 @@
+/* eslint-disable no-unused-vars */
 import React from 'react'
+import TodoList from "./TodoList"
+import axios from "axios" 
 
 const URL = 'http://localhost:9000/api/todos'
 
 export default class App extends React.Component {
+  state = {
+    todos: [],
+    error: "",
+    todonameinput: "",
+  }
+  fetchalltodos = () => {
+    axios.get(URL)
+    .then(res => {
+      this.setState({...this.state, todos: res.data.data})
+    })
+    .catch(err => {this.setState({...this.state, error: err.response.data.message})
+    })
+  };
+  componentDidMount(){
+    this.fetchalltodos()
+  }
+  oninputchange = evt => {
+    const {value} = evt.target
+    this.setState({...this.state, todoname: value})
+  }
+  postnewtodo = () => {
+    axios.post(URL, {name: this.state.todonameinput})
+    .then(res => {
+      this.fetchalltodos();
+      this.setState({...this.state, todonameinput: "" })
+    })
+    .catch(err => {this.setState({...this.state, error: err.response.data.message})
+   })
+  }
+  onsubmit = (e) => {
+    e.preventDefault();
+    this.postnewtodo()
+  }
+  clearcompleted = (e) => {
+
+  }
+  togglecompleted = id => {
+    axios.patch(`${URL}/${id}`)
+    .then(res => {
+      this.setState({...this.state, todos: [this.state.todos.map(td => {
+        if (td.id !== id) return td
+        else {
+          return res.dtat.data
+        }
+      })]})
+    })
+    .catch(err => {this.setState({...this.state, error: err.response.data.message})})
+  }
+  onclickhandler = id => e => {
+    this.togglecompleted(id)
+  }
   render() {
-    return null
+    return (
+      <>
+      <h2> error: {this.state.error}</h2>
+      <TodoList todos ={this.state.todos} onclickhandler={this.onclickhandler} />
+      <form onSubmit={this.onsubmit}>
+        <input value={this.state.todonameinput} onChange={this.oninputchange} type="text" />
+        <button>ADD TODO</button>
+        <button onClick={this.clearcompleted}>CLEAR SPACE COMPLETED</button>
+      </form>
+      </>
+    )
   }
 }
diff --git a/frontend/components/Form.js b/frontend/components/Form.js
index 3932207be..029103daf 100644
--- a/frontend/components/Form.js
+++ b/frontend/components/Form.js
@@ -1,7 +1,38 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
 import React from 'react'
-
+import axios from "axios"
 export default class Form extends React.Component {
+  state = {
+    newTask: "",
+  };
+  completedTask = (evt) => {
+    evt.preventDefault();
+    this.props.handleCompleted();
+  };
+  handleChange = (evt) => {
+    evt.preventDefault();
+    this.setState({ ...this.state, newTask: evt.target.value });
+  };
+  handlePost = (evt) => {
+    evt.preventDefault();
+    this.props.ToDo(this.state.newTask);
+    this.setState({ ...this.state, newTask: "" });
+  };
   render() {
-    return null
+    return (
+      <form onSubmit={this.handlePost}>
+        <div>
+          <input
+          type={text}
+          placeholder="Add to list"
+          onChange={this.handleChange}
+          value={this.state.newTask}
+          />
+          <button onClick={this.handlePost}>Add</button>
+        </div>
+        <button onAuxClick={this.completedTask}>Remove Completed</button>
+      </form>
+    );
   }
 }
diff --git a/frontend/components/Todo.js b/frontend/components/Todo.js
index aac687f6d..d14618292 100644
--- a/frontend/components/Todo.js
+++ b/frontend/components/Todo.js
@@ -1,7 +1,16 @@
 import React from 'react'
 
 export default class Todo extends React.Component {
+  toggle = (evt) => {
+    evt.preventDefault();
+    this.props.toggleCompleted(this.props.todo.id);
+  };
   render() {
-    return null
+    return (
+      <li onClick={this.toggle}>
+        {this.props.todo.name}{" "}
+        {this.props.todo.completed ? <span>&#10003;</span> : <span></span>}
+      </li>
+    );
   }
 }
diff --git a/frontend/components/TodoList.js b/frontend/components/TodoList.js
index ce08a27ba..1d8f81122 100644
--- a/frontend/components/TodoList.js
+++ b/frontend/components/TodoList.js
@@ -2,6 +2,14 @@ import React from 'react'
 
 export default class TodoList extends React.Component {
   render() {
-    return null
+    return (
+      <div>
+        <h1>TO DO</h1>
+        {
+          this.props.todos.map((td) => { return (<div key={td.id} onClick={this.props.onclickhandler(td.id)} > {td.name} {td.completed 
+            ? " completed" : ""} </div>) })
+        }
+      </div>
+    )
   }
 }