diff --git a/src/App.tsx b/src/App.tsx
index 9d18e93..002bad0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,19 @@
 import "./App.css";
+import TodoList from "./containers/TodoList/TodoList";
+import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
+import NewTodo from "./containers/TodoList/NewTodo/NewTodo"
 
 function App() {
-  return <div className="App"></div>;
+  return (<div className="App">
+    <BrowserRouter>
+      <Routes>
+        <Route path="todos" element={<TodoList title={"My Todos!"}/>}/>
+        <Route path="new-todo" element={<NewTodo />}/>
+        <Route path="/" element={<Navigate replace to ={"/todos"} />}/>
+        <Route path="*" element={<h1>Not Found</h1>}/>
+      </Routes>
+    </BrowserRouter>
+    </div>);
 }
 
 export default App;
diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx
index cb0ff5c..667a617 100644
--- a/src/components/Todo/Todo.tsx
+++ b/src/components/Todo/Todo.tsx
@@ -1 +1,20 @@
-export {};
+import "../../containers/TodoList/TodoList.css"
+import "./Todo.css"
+
+interface IProps{
+    title: string;
+    clicked?: React.MouseEventHandler<HTMLDivElement>;
+    done:boolean;
+}
+
+const Todo = (props: IProps)=>{
+    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;
diff --git a/src/components/TodoDetail/TodoDetail.tsx b/src/components/TodoDetail/TodoDetail.tsx
index cb0ff5c..6166825 100644
--- a/src/components/TodoDetail/TodoDetail.tsx
+++ b/src/components/TodoDetail/TodoDetail.tsx
@@ -1 +1,25 @@
-export {};
+import "./TodoDetail.css";
+
+type Props={
+    title:string;
+    content:string;
+}
+
+const TodoDetail = (props: 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.tsx b/src/containers/TodoList/NewTodo/NewTodo.tsx
index cb0ff5c..1919a74 100644
--- a/src/containers/TodoList/NewTodo/NewTodo.tsx
+++ b/src/containers/TodoList/NewTodo/NewTodo.tsx
@@ -1 +1,43 @@
-export {};
+import {useState} from "react";
+import "./NewTodo.css";
+import {useNavigate, Navigate } from "react-router-dom";
+
+export default function NewTodo(){
+    const[title,setTitle]=useState<string>("");
+    const [content,setContent]=useState<string>("");
+    const [submitted,setSubmitted]=useState<boolean>(false);
+    const navigate =  useNavigate();
+    const postTodoHandler = () => {
+        const data = { title: title, content: content };
+        alert("Submitted\n" + data.title + "\n" + data.content);
+        setSubmitted(true);
+        };
+        
+    if(submitted){
+        return <Navigate to="/todos"/>
+    }
+    else{
+        return (
+            <div className="NewTodo">
+                <h1> Add a Todo</h1>
+                <label>Title</label>
+                <input
+                type="text"
+                value = {title}
+                onChange={
+                    (event)=>setTitle(event.target.value)
+                }
+                />
+                <label>Content</label>
+                <textarea
+                rows={4}
+                value={content}
+                onChange={
+                    (event)=>setContent(event.target.value)
+                }
+                />
+                <button onClick={()=>postTodoHandler()}>Submit</button>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/containers/TodoList/TodoList.tsx b/src/containers/TodoList/TodoList.tsx
index cb0ff5c..f1c5556 100644
--- a/src/containers/TodoList/TodoList.tsx
+++ b/src/containers/TodoList/TodoList.tsx
@@ -1 +1,49 @@
-export {};
+import {useState} from "react";
+import {useMemo} from "react";
+import Todo from "../../components/Todo/Todo";
+import "./TodoList.css";
+import "../../components/Todo/Todo.css";
+import TodoDetail from "../../components/TodoDetail/TodoDetail";
+import NewTodo from "./NewTodo/NewTodo"
+import {NavLink} from "react-router-dom";
+
+interface IProps{
+    title: string;
+}
+
+type TodoType ={id: number; title: string; content: string; done:boolean;};
+
+export default function TodoList(props: IProps){
+    const {title}=props;
+    const [todos, setTodos]=useState<TodoType[]>([
+        {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}
+    ]);
+    const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
+    const clickTodoHandler = (td: TodoType)=>{
+        if(selectedTodo==td){
+            setSelectedTodo(null);
+        }else{
+            setSelectedTodo(td);
+        }
+    }
+    const todoDetail = useMemo(()=>{
+        return selectedTodo? (
+            <TodoDetail title={selectedTodo.title} content={selectedTodo.content} />
+        ): null;
+    },[selectedTodo]);
+
+    return (
+        <div className="TodoList">
+            <div className="title">{title}</div>
+            <div className="todos">
+                {todos.map((td)=>{
+                    return <Todo title={td.title} done={td.done} clicked={()=>clickTodoHandler(td)}/>;
+                })}
+                {todoDetail}
+                <NavLink to="/new-todo"> New Todo </NavLink>
+            </div>
+        </div>
+    );
+}