diff --git a/package.json b/package.json
index e91bfac..633ce0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-daily-sample",
-  "homepage": "https://hexschool.github.io/react-daily-task-router",
+  "homepage": "https://yunniyunyun.github.io/react-daily-task-router",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
diff --git a/src/App.js b/src/App.js
index 415b36d..5f0399e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,45 @@
 import './App.css';
 import {
+  BrowserRouter,
+  Route,
+  Routes,
   HashRouter,
   NavLink,
+  useNavigate,
+  Outlet,
+  useParams,
 } from 'react-router-dom';
 
+const Logout  = () => {
+  let navigate = useNavigate();
+  return(
+    <button onClick={() => {navigate('/login')}}>登出</button>
+  )
+}
+
 const Todo = () => {
-  return <p>這是 Todo 頁面 
-  </p>;
+  return (
+    <>
+      <p>這是 Todo 頁面 </p>
+      <Logout  />
+    </>
+  )
+};
+
+const Post = () => {
+  return (
+    <div>
+      <h3>Post 頁面</h3>
+      <Outlet />
+    </div>
+  );
+};
+const PostId = () => {
+  let params = useParams();
+  return <p>Post ID: {params.postId}</p>;
 };
+
+
 const Login = () => {
   return <p>這是登入頁面</p>;
 };
@@ -18,7 +50,7 @@ const Register = () => {
 function App() {
   return (
     <div className="container">
-      <HashRouter>
+      <BrowserRouter>
         <div className="nav-link">
           <NavLink to="/">
             <p>回到首頁</p>
@@ -32,10 +64,27 @@ function App() {
           <NavLink to="/todo">
             <p>Todo 頁面</p>
           </NavLink>
+          <NavLink to="/post">
+            <p>Post 頁面</p>
+          </NavLink>
+          <NavLink to="/post/post123">
+            <p>Post 詳細頁面1</p>
+          </NavLink>
+          <NavLink to="/post/post456">
+            <p>Post 詳細頁面2</p>
+          </NavLink>
         </div>
         {/* Routes, Route 練習區 */}
+        <Routes>
+          <Route path="/register" element={<Register />} /> 
+          <Route path="/login" element={<Login />} /> 
+          <Route path="/todo" element={<Todo />} /> 
+          <Route path="/post" element={<Post />}>
+            <Route path=":postId" element={<PostId />} />
+          </Route>
+        </Routes>
         {/* 練習區 */}
-      </HashRouter>
+      </BrowserRouter>
     </div>
   );
 }