diff --git a/src/components/App.js b/src/components/App.js
index 3c83e64..b996ee6 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import TodoList from './TodoList';
 
 /**
diff --git a/src/components/InputBox.js b/src/components/InputBox.js
new file mode 100644
index 0000000..be378fe
--- /dev/null
+++ b/src/components/InputBox.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ * Input component to add a new todo.
+ */
+const InputBox = () => {
+  return (
+    <input type="text" className="form-control add-todo" placeholder="Add new todo" />
+  )
+}
+
+export default InputBox;
diff --git a/src/components/TodoList.js b/src/components/TodoList.js
index 8c5f64a..cfd8c6b 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.js
@@ -1,4 +1,6 @@
 import React from 'react';
+
+import InputBox from './InputBox';
 import TodoItem from './TodoItem';
 import TodoCount from './TodoCount';
 
@@ -14,6 +16,7 @@ const TodoList = (props) => {
   return (
     <div className="todolist">
       <h1>Todos</h1>
+      <InputBox />
       <ul className="list-unstyled">
         {
           items && items.map(item =>