diff --git a/src/App.js b/src/App.js
index e358583..df12029 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,24 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import TodoList from './containers/TodoList/Todolist'
+import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
+import NewTodo from './containers/NewTodo/NewTodo';
+import TodoDetail from './components/TodoDetail/TodoDetail';
 
 function App() {
   return (
-    <div className="App">
-    </div>
+    <BrowserRouter>
+        <div className="App">
+          <Switch>
+            <Route path="/toods" exact render={() => <TodoList title="My TODOs" />} />
+            <Route path='/todos/:id' exact component={TodoDetail} />
+            <Route path="/new-todo" exact component={NewTodo} />
+            <Redirect exact from='/' to='todos' />
+            <Route render={()  => <h1>Not Found</h1>} />
+          </Switch>
+        </div>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js
index e69de29..0bd2d30 100644
--- a/src/components/Todo/Todo.js
+++ b/src/components/Todo/Todo.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import './Todo.css'
+
+const Todo = props => {
+    return (
+        <div className='Todo'>
+            <div className={`text ${props.done && 'done'}`} onClick={props.clicked}>
+                {props.title}
+            </div>
+            {props.done && <div className='done-mark'>&#x2713;</div>}
+        </div>
+    )
+}
+export default Todo;
\ No newline at end of file
diff --git a/src/components/TodoDetail/TodoDetail.js b/src/components/TodoDetail/TodoDetail.js
index e69de29..1763f74 100644
--- a/src/components/TodoDetail/TodoDetail.js
+++ b/src/components/TodoDetail/TodoDetail.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import './TodoDetail.css'
+
+const TodoDetail = (props) => {
+    return (
+        <div className="TodoDetail">
+            <div className="row">
+                <div className="left">
+                    Name:
+                </div>
+                <div className="right">
+                    {props.title}
+                </div>
+            </div>
+            <div className="row">
+                <div className="left">
+                    Content:
+                </div>
+                <div className="right">
+                    {props.content}
+                </div>
+            </div>
+        </div>
+    )
+}
+export default TodoDetail;
\ No newline at end of file
diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js
index e69de29..98ee874 100644
--- a/src/containers/TodoList/NewTodo/NewTodo.js
+++ b/src/containers/TodoList/NewTodo/NewTodo.js
@@ -0,0 +1,37 @@
+import React, { Componenet } from 'react';
+import './NewTodo.css'
+import { Redirect } from 'react-router-dom';
+
+class NewTodo extends Component {
+    state = {
+        title: '',
+        content: '',
+        submitted: false,
+    }
+
+    postTodoHandler =() => {
+        const data ={
+            title: this.state.title, content: this.state.content
+        };
+        alert('Submitted\n' + data.title + '\n' + data.content);
+        this.setState( {submitted: true});
+    }
+
+    render() {
+        if (this.state.submitted) {
+            return <Redirect to='/todos'/>
+        }
+        return(
+            <div className="NewTodo">
+                <h1>Add a Todo</h1>
+                <label>Title</label>
+                <input type="text" value={this.state.title}
+                    onChange={(event) => this.setState({ title: event.target.value})} />
+                <label>Content</label>
+                <textarea row="4" type="text" value={this.state.content}
+                    onChange={(event) => this.setState({})} />
+                <button onClick={ () => this.postTodoHandler() }>Submit</button>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/containers/TodoList/TodoList.js b/src/containers/TodoList/TodoList.js
index e69de29..bc22b49 100644
--- a/src/containers/TodoList/TodoList.js
+++ b/src/containers/TodoList/TodoList.js
@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import Todo from '../../componenets/Todo/Todo';
+import NewTodo from "./NewTodo/NewTodo";
+import './TodoList.css'
+import { NavLink } from 'react-router-dom';
+
+class TodoList extends Component {
+
+    state = {
+        todos: [
+            { id: 1, title: 'SWPP', content: 'take swpp class', done: true},
+            { id: 2, title: 'Movie', content: 'watch movie', done: false},
+            { id: 3, title: 'Dinner', content: 'eat dinner', done: false},
+        ],
+        selectedTodo: null,
+    }
+
+    clickTodoHandler = td => {
+        if (this.state.selectedTodo === td){
+            this.setState( {selectedTodo: null});
+        } else {
+            this.state( {selectedTodo = td});
+        }
+    }
+    render() {
+        let todoDetail = null;
+        if (this.state.selectedTodo) {
+            todoDetail = <todoDetail title={this.state.selectedTodo.title} 
+                content={this.state.selectedTodo.content}/>
+        }
+        const todos = this.state.todos.map((td) => {
+            return ( <Todo key={td.id} title={td.title} done={td.done}
+                clicked={ () => this.clickTodoHandler(td)} />);
+
+        })
+
+        return (
+            <div className='TodoList'>
+                <div className='title'>{this.props.title}</div>
+                <div className='todos'>{todos}</div>
+                {todoDetail}
+                <NavLink to='/new-todo' exact>New Todo</NavLink>
+            </div>
+        )
+    }
+}
\ No newline at end of file