diff --git a/src/App.tsx b/src/App.tsx
index 9d18e93..6667974 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,33 @@
 import "./App.css";
 
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+
+import TodoList from "./containers/TodoList/TodoList"; // can omit.js
+import NewTodo from "./containers/TodoList/NewTodo/NewTodo";
+import TodoDetail from "./components/TodoDetail/TodoDetail";
+
+
 function App() {
-  return <div className="App"></div>;
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <Routes>
+          <Route path="/todos" element={<TodoList title={"My TODOs!"} />} />
+          <Route path="/todos/:id" element={<TodoDetail />} />
+          <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;
+
+<div className="TodoList"></div>;
+/* actually, it uses className, not class to avoid collision btw JS class
+ * this syntax is compiled to React.createElement(‘div’, {className: ‘TodoList’})
+ * by React Transpiler.
+ * );
+ */
diff --git a/src/components/Todo/Todo.tsx b/src/components/Todo/Todo.tsx
index cb0ff5c..d4da290 100644
--- a/src/components/Todo/Todo.tsx
+++ b/src/components/Todo/Todo.tsx
@@ -1 +1,21 @@
-export {};
+import "./Todo.css";
+
+interface IProps {
+  title: string;
+  clicked?: React.MouseEventHandler<HTMLDivElement>; // Defined by React
+  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..3123592 100644
--- a/src/components/TodoDetail/TodoDetail.tsx
+++ b/src/components/TodoDetail/TodoDetail.tsx
@@ -1 +1,24 @@
-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;
diff --git a/src/containers/TodoList/NewTodo/NewTodo.tsx b/src/containers/TodoList/NewTodo/NewTodo.tsx
index cb0ff5c..e5aafbe 100644
--- a/src/containers/TodoList/NewTodo/NewTodo.tsx
+++ b/src/containers/TodoList/NewTodo/NewTodo.tsx
@@ -1 +1,48 @@
-export {};
+import { useState } from "react";
+import { Navigate } from "react-router-dom";
+
+import "./NewTodo.css";
+
+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);
+  //   navigate('/todos')
+  // };
+  
+
+  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>
+    );
+  }
+}
diff --git a/src/containers/TodoList/TodoList.tsx b/src/containers/TodoList/TodoList.tsx
index cb0ff5c..36a31dd 100644
--- a/src/containers/TodoList/TodoList.tsx
+++ b/src/containers/TodoList/TodoList.tsx
@@ -1 +1,64 @@
-export {};
+import { useMemo, useState } from "react";
+import { NavLink } from "react-router-dom";
+
+import Todo from "../../components/Todo/Todo";
+import TodoDetail from "../../components/TodoDetail/TodoDetail";
+
+import "./TodoList.css";
+
+interface IProps {
+  title: string;
+}
+
+type TodoType = { 
+  id: number; 
+  title: string; 
+  content: string; 
+  done: boolean 
+};
+
+
+export default function TodoList(props: IProps) {
+  const { title } = props;
+  const [selectedTodo, setSelectedTodo] = useState<TodoType | null>(null);
+
+  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 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
+              key={td.id}
+              title={td.title}
+              done={td.done}
+              clicked={() => clickTodoHandler(td)}
+            />
+          );
+        })}
+        {todoDetail}
+        <NavLink to="/new-todo" >New Todo</NavLink>
+      </div>
+    </div>
+  );
+}