diff --git a/src/components/App.js b/src/components/App.js
index 26a941c..f35135e 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -36,10 +36,30 @@ class App extends Component {
       const todo = {
         text,
         completed: false,
-        id: state.length + 1
+        id: state.items.length + 1
       };
 
-      return {items: [...state.items, todo]};
+      return { items: [...state.items, todo] };
+    })
+  }
+
+  /**
+   * Change todo completion status.
+   *
+   * @param {Number} todoId
+   * @param {Boolean} completed
+   */
+  changeTodoStatus = (todoId, completed) => {
+    this.setState(state => {
+      const items = state.items.map(item => {
+        if (item.id !== todoId) {
+          return item;
+        }
+
+        return { ...item, completed };
+      })
+
+      return { items };
     })
   }
 
@@ -47,7 +67,7 @@ class App extends Component {
     return (
       <div className="container">
         <div className="row">
-          <TodoList items={this.state.items} addNewTodo={this.addNewTodo} />
+          <TodoList items={this.state.items} addNewTodo={this.addNewTodo} changeTodoStatus={this.changeTodoStatus} />
         </div>
       </div>
     );
diff --git a/src/components/InputBox.js b/src/components/InputBox.js
index 9189943..017893c 100644
--- a/src/components/InputBox.js
+++ b/src/components/InputBox.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
  * Input component to add a new todo.
  */
 class InputBox extends Component {
-  propTypes = {
+  static propTypes = {
     items: PropTypes.array,
     addNewTodo: PropTypes.func.isRequired
   }
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
index ab4f052..f4d567a 100644
--- a/src/components/TodoItem.js
+++ b/src/components/TodoItem.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 /**
@@ -6,22 +6,28 @@ import PropTypes from 'prop-types';
  *
  * @param {Object} props
  */
-const TodoItem = (props) => {
-  const { item } = props;
+class TodoItem extends Component {
+  static propTypes = {
+    item: PropTypes.object.isRequired,
+    changeTodoStatus: PropTypes.func.isRequired
+  }
 
-  return (
-    <li key={item.id} className="ui-state-default">
-      <div className="checkbox">
-        <label>
-          <input type="checkbox" checked={item.completed}/>{item.text}
-        </label>
-      </div>
-    </li>
-  )
-}
+  handleChange = (event) => this.props.changeTodoStatus(this.props.item.id, event.target.checked);
+
+  render() {
+    const { item } = this.props;
+    const className = `todo-item ui-state-default ${item.completed === true ? 'completed' : 'pending'}`;
 
-TodoItem.propTypes = {
-  item: PropTypes.object
+    return (
+      <li key={item.id} className={className}>
+        <div className="checkbox">
+          <label>
+            <input type="checkbox" onChange={this.handleChange} checked={item.completed} /> {item.text}
+          </label>
+        </div>
+      </li>
+    )
+  }
 }
 
 export default TodoItem;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 39cd56c..1a49f68 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -11,7 +11,7 @@ import TodoCount from './TodoCount';
  * @param {Object} props
  */
 const TodoList = (props) => {
-  const {items} = props;
+  const { items } = props;
   const count = items.length;
 
   return (
@@ -21,7 +21,7 @@ const TodoList = (props) => {
       <ul className="list-unstyled">
         {
           items && items.map(item =>
-            <TodoItem key={item.id} item={item} />
+            <TodoItem key={item.id} item={item} changeTodoStatus={props.changeTodoStatus} />
           )
         }
       </ul>