diff --git a/package.json b/package.json
index bcaefee..f8a6cf8 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router" : "^5.2.1",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index e358583..019c35f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,23 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import TodoList  from './containers/TodoList/TodoList';
+import TodoDetail from './components/TodoDetail/TodoDetail';
+import NewTodo from './containers/TodoList/NewTodo/NewTodo';
+import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
 
 function App() {
   return (
-    <div className="App">
-    </div>
+    <BrowserRouter>
+      <div className= "App">
+        <Switch>
+          <Route path = '/todos' 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..7325105 100644
--- a/src/components/Todo/Todo.js
+++ b/src/components/Todo/Todo.js
@@ -0,0 +1,16 @@
+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..25d055a 100644
--- a/src/components/TodoDetail/TodoDetail.js
+++ b/src/components/TodoDetail/TodoDetail.js
@@ -0,0 +1,27 @@
+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..5bbeefc 100644
--- a/src/containers/TodoList/NewTodo/NewTodo.js
+++ b/src/containers/TodoList/NewTodo/NewTodo.js
@@ -0,0 +1,45 @@
+import React, {Component} from 'react';
+import { Redirect } from "react-router-dom";
+import './NewTodo.css'
+
+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({content: event.target.value})}/>
+                <button onClick = {()=>this.postTodoHandler()}>Submit</button>
+            </div>
+        )
+    }
+}
+
+export default NewTodo; 
\ No newline at end of file
diff --git a/src/containers/TodoList/TodoList.js b/src/containers/TodoList/TodoList.js
index e69de29..bfc48c0 100644
--- a/src/containers/TodoList/TodoList.js
+++ b/src/containers/TodoList/TodoList.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import Todo from '../../components/Todo/Todo';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+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.setState({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>
+        )
+    }
+}
+
+export default TodoList;
\ No newline at end of file