diff --git a/3-flux/documentation/Untitled.pdf b/3-flux/documentation/Untitled.pdf
deleted file mode 100644
index 752c3649..00000000
Binary files a/3-flux/documentation/Untitled.pdf and /dev/null differ
diff --git a/3-flux/documentation/data-flow.graffle b/3-flux/documentation/data-flow.graffle
new file mode 100644
index 00000000..c671be1b
Binary files /dev/null and b/3-flux/documentation/data-flow.graffle differ
diff --git a/3-flux/documentation/data-flow.pdf b/3-flux/documentation/data-flow.pdf
index 5f1ac87b..33da260d 100644
Binary files a/3-flux/documentation/data-flow.pdf and b/3-flux/documentation/data-flow.pdf differ
diff --git a/3-flux/src/assets/icon_done.svg b/3-flux/src/assets/icon_done.svg
index 92cb5ace..43410f27 100644
--- a/3-flux/src/assets/icon_done.svg
+++ b/3-flux/src/assets/icon_done.svg
@@ -1,8 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.23 150.5">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.23 150.23">
   <defs>
     <style>
       .cls-1 {
-        fill: #739730;
+        fill: #fde3bc;
+      }
+
+      .cls-2 {
+        fill: #faaf41;
       }
     </style>
   </defs>
@@ -10,8 +14,11 @@
   <g id="Layer_2" data-name="Layer 2">
     <g id="Layer_1-2" data-name="Layer 1">
       <g>
-        <path class="cls-1" d="M75.12,0a75.25,75.25,0,1,0,75.11,75.39C150.23,33.77,116.46,0,75.12,0Zm0,141.31a66.2,66.2,0,1,1,66.2-66.2A66.31,66.31,0,0,1,75.12,141.31Z"/>
-        <path class="cls-1" d="M62.75,108.27a5.59,5.59,0,0,1-4-1.73L38.35,85.1a5.55,5.55,0,0,1,.2-7.83,5.53,5.53,0,0,1,7.83.2L62.49,94.37l41.1-50.12a5.55,5.55,0,0,1,4.27-2h0a5.48,5.48,0,0,1,3.53,1.25,5.56,5.56,0,0,1,.77,7.81l-45.08,55a5.55,5.55,0,0,1-4.08,2h-.24Z"/>
+        <g>
+          <rect class="cls-1" x="4" y="4" width="142.23" height="142.23" rx="6" ry="6"/>
+          <path class="cls-2" d="M140.23,8a2,2,0,0,1,2,2V140.23a2,2,0,0,1-2,2H10a2,2,0,0,1-2-2V10a2,2,0,0,1,2-2H140.23m0-8H10A10,10,0,0,0,0,10V140.23a10,10,0,0,0,10,10H140.23a10,10,0,0,0,10-10V10a10,10,0,0,0-10-10Z"/>
+        </g>
+        <path class="cls-2" d="M59,118.41a7.3,7.3,0,0,1-5.19-2.26l-26.69-28a7.25,7.25,0,0,1,.26-10.24,7.23,7.23,0,0,1,10.24.26l21,22.09,53.71-65.5a7.25,7.25,0,0,1,5.58-2.64h0a7.16,7.16,0,0,1,4.61,1.64,7.27,7.27,0,0,1,1,10.2L64.6,115.75a7.25,7.25,0,0,1-5.33,2.64H59Z"/>
       </g>
     </g>
   </g>
diff --git a/3-flux/src/assets/icon_not_done.svg b/3-flux/src/assets/icon_not_done.svg
index c133fdcd..f9e29e72 100644
--- a/3-flux/src/assets/icon_not_done.svg
+++ b/3-flux/src/assets/icon_not_done.svg
@@ -1,8 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.23 150.5">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.23 150.23">
   <defs>
     <style>
       .cls-1 {
-        fill: #b53737;
+        fill: #fde3bc;
+      }
+
+      .cls-2 {
+        fill: #faaf41;
       }
     </style>
   </defs>
@@ -10,8 +14,8 @@
   <g id="Layer_2" data-name="Layer 2">
     <g id="Layer_1-2" data-name="Layer 1">
       <g>
-        <path class="cls-1" d="M75.12,0a75.25,75.25,0,1,0,75.11,75.39C150.23,33.77,116.46,0,75.12,0Zm0,141.31a66.2,66.2,0,1,1,66.2-66.2A66.31,66.31,0,0,1,75.12,141.31Z"/>
-        <path class="cls-1" d="M70.41,27.59h9.42A5.44,5.44,0,0,1,85.27,33V51.52a5.44,5.44,0,0,1,0,.64L80.58,91.63a5.44,5.44,0,0,1-5.41,4.81h0a5.44,5.44,0,0,1-5.41-4.79L65,52.16a5.44,5.44,0,0,1,0-.65V33A5.44,5.44,0,0,1,70.41,27.59Zm1.65,76.56h6.11a6.64,6.64,0,0,1,6.64,6.64v5.46a6.64,6.64,0,0,1-6.64,6.64H72.06a6.64,6.64,0,0,1-6.64-6.64V110.8A6.64,6.64,0,0,1,72.06,104.16Z"/>
+        <rect class="cls-1" x="4" y="4" width="142.23" height="142.23" rx="6" ry="6"/>
+        <path class="cls-2" d="M140.23,8a2,2,0,0,1,2,2V140.23a2,2,0,0,1-2,2H10a2,2,0,0,1-2-2V10a2,2,0,0,1,2-2H140.23m0-8H10A10,10,0,0,0,0,10V140.23a10,10,0,0,0,10,10H140.23a10,10,0,0,0,10-10V10a10,10,0,0,0-10-10Z"/>
       </g>
     </g>
   </g>
diff --git a/3-flux/src/js/actions/TodoActions.js b/3-flux/src/js/actions/TodoActions.js
index 6c32a464..4586c14b 100644
--- a/3-flux/src/js/actions/TodoActions.js
+++ b/3-flux/src/js/actions/TodoActions.js
@@ -1,16 +1,16 @@
 import dispatcher from "../dispatcher";
 
-export function createTodo(text) {
+export function deleteTodo(id) {
   dispatcher.dispatch({
-    type: "CREATE_TODO",
-    text,
+    type: "DELETE_TODO",
+    id,
   });
 }
 
-export function deleteTodo(id) {
+export function createTodo(text) {
   dispatcher.dispatch({
-    type: "DELETE_TODO",
-    id,
+    type: "CREATE_TODO",
+    text,
   });
 }
 
diff --git a/3-flux/src/js/components/NewTodo.js b/3-flux/src/js/components/NewTodo.js
index 20cdb157..b6397f8b 100644
--- a/3-flux/src/js/components/NewTodo.js
+++ b/3-flux/src/js/components/NewTodo.js
@@ -5,12 +5,51 @@ import * as TodoActions from "../actions/TodoActions";
 export default class NewTodo extends React.Component {
   constructor(props) {
     super();
+    this.state = {
+      newTodo: ""
+    };
+  }
+
+  addTodo(e) {
+    e.preventDefault();
+    TodoActions.createTodo(this.state.newTodo);
+    this.setState({newTodo: ""});
+  }
+
+  handleChange(e) {
+    this.setState({newTodo: e.target.value});
   }
 
   render() {
+    const inputStyling = {
+      borderRadius: "10px",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: "#B19FBA",
+      marginRight: "20px",
+      minWidth: "200px",
+      backgroundColor: "#D8CFDD",
+      padding: "3px 15px 3px 15px"
+    };
 
-    return (
+    const formStyling = {
+      paddingBottom: "10px"
+    };
+
+    const standardButton = {
+      borderRadius: "10px",
+      borderStyle: "none",
+      padding: "3px 15px 3px 15px",
+      fontFamily: "Roboto",
+      backgroundColor: "#765786",
+      color: "#FFF"
+    };
 
+    return (
+      <form style={formStyling}>
+        <input style={inputStyling} type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
+        <button style={standardButton} onClick={this.addTodo.bind(this)}>Add New</button>
+      </form>
     );
   }
 }
diff --git a/3-flux/src/js/components/Todo.js b/3-flux/src/js/components/Todo.js
index 6100978b..6a7043a2 100644
--- a/3-flux/src/js/components/Todo.js
+++ b/3-flux/src/js/components/Todo.js
@@ -7,12 +7,10 @@ export default class Todo extends React.Component {
     super();
   }
 
-// Anna Code Start
-  removeTodo(e) {
+  deleteTodo(e) {
     TodoActions.deleteTodo(this.props.id);
   }
-// Anna Code End
-  // const icon = complete ? "\u2714" : "\u2716"
+
   render() {
     const { complete, edit, text } = this.props;
 
@@ -23,6 +21,11 @@ export default class Todo extends React.Component {
       padding: "5px"
     };
 
+    const checkboxStyle = {
+      maxWidth: "50px",
+      padding: "10px"
+    }
+
     if (edit) {
       return (
         <li>
@@ -33,8 +36,8 @@ export default class Todo extends React.Component {
 
     return (
       <li>
-        <span><img style={iconStyle} src={icon} /></span>
-        <span onClick={this.removeTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
+        <span><img style={checkboxStyle} src={icon} /></span>
+        <span onClick={this.deleteTodo.bind(this)}><img style={iconStyle} src={trash} /></span>
         <span>{text}</span>
       </li>
     );
diff --git a/3-flux/src/js/pages/Todos.js b/3-flux/src/js/pages/Todos.js
index 2eea1929..0e3a48dc 100644
--- a/3-flux/src/js/pages/Todos.js
+++ b/3-flux/src/js/pages/Todos.js
@@ -1,7 +1,7 @@
 import React from "react";
 
 import Todo from "../components/Todo";
-import NewTodo from "../components/Todo";
+import NewTodo from "../components/NewTodo";
 import * as TodoActions from "../actions/TodoActions";
 import TodoStore from "../stores/TodoStore";
 
@@ -10,8 +10,7 @@ export default class Todos extends React.Component {
     super();
     this.getTodos = this.getTodos.bind(this);
     this.state = {
-      todos: TodoStore.getAll(),
-      newTodo: ""
+      todos: TodoStore.getAll()
     };
   }
 
@@ -33,19 +32,6 @@ export default class Todos extends React.Component {
     TodoActions.reloadTodos();
   }
 
-  // Start Anna Code
-  addTodo(e) {
-    console.log("??");
-    e.preventDefault();
-    TodoActions.createTodo(this.state.newTodo);
-    this.setState({newTodo: ""});
-  }
-
-  handleChange(e) {
-    this.setState({newTodo: e.target.value});
-  }
-  // End Anna Code
-
   render() {
     const { todos } = this.state;
 
@@ -64,37 +50,10 @@ export default class Todos extends React.Component {
       marginBottom: "20px"
     };
 
-    const inputStyling = {
-      borderRadius: "10px",
-      borderStyle: "solid",
-      borderWidth: "1px",
-      borderColor: "#B19FBA",
-      marginRight: "20px",
-      minWidth: "200px",
-      backgroundColor: "#D8CFDD",
-      padding: "3px 15px 3px 15px"
-    }
-
-    const formStyling = {
-      paddingBottom: "10px"
-    }
-
-    const standardButton = {
-      borderRadius: "10px",
-      borderStyle: "none",
-      padding: "3px 15px 3px 15px",
-      fontFamily: "Roboto",
-      backgroundColor: "#765786",
-      color: "#FFF"
-    }
-
     return (
       <div>
         <h1 style={headerStyling}>A List of things To Do</h1>
-        <form style={formStyling}>
-          <input style={inputStyling} type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)}/>
-          <button style={standardButton} onClick={this.addTodo.bind(this)}>Add New</button>
-        </form>
+        <NewTodo />
         <ul style={customUl}>{TodoComponents}</ul>
       </div>
     );