diff --git a/src/App.css b/src/App.css
index e1537c7..c601169 100644
--- a/src/App.css
+++ b/src/App.css
@@ -110,7 +110,7 @@ header > div {
   border: 1px solid white;
   border-radius: 5px;
   padding: 5px;
-
+  cursor: pointer;
 }
 #login > a {
   text-decoration: none;
@@ -234,7 +234,7 @@ body {
 
 .ranking {
   width: 400px;
-  height: 180px; 
+  /* height: 180px;  */
   border: 1px solid none;
   border-radius: 10px;
   padding: 20px;
@@ -250,10 +250,16 @@ body {
 }
 
 .rank__detail {
-  margin-bottom: 20px;
+  margin-bottom: 30px;
+}
+
+#rank_time {
+  margin-left: 230px;
+  color: rgb(230, 150, 2);
 }
 
 .rank__bar {
+  margin-top: 10px;
   width: 100%;
   height: 3px;
   background-color: var(—color-dark-blue);
@@ -261,7 +267,7 @@ body {
 
 .rank__value {
   height: 3px;
-  background-color: orange;
+  background-color: rgb(230, 150, 2);
 }
 
 #userHomeID {
diff --git a/src/component/Dailynote.js b/src/component/Dailynote.js
index be9baa1..c394c52 100644
--- a/src/component/Dailynote.js
+++ b/src/component/Dailynote.js
@@ -79,7 +79,7 @@ function Dailynote() {
   return (
     <div className="wrapper">
       <div className="navbar">
-        <Navbar page="Todo"/>
+        <Navbar page="DailyNote"/>
       </div>
       <div className="leftright">
         <div className="dailynoteleft">
diff --git a/src/component/Home.js b/src/component/Home.js
index e8300a6..c1f38e3 100644
--- a/src/component/Home.js
+++ b/src/component/Home.js
@@ -18,6 +18,8 @@ function Home() {
 
   const [dailynoteList, setDailynoteList] = useState([]);
 
+  const [timerWeekRank, setTimerWeekRank] = useState([]);
+
   const [token, setToken, removeToken] = useCookies(["loginToken"]);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
@@ -68,6 +70,13 @@ function Home() {
       }
     });
 
+    Axios.get('/timerWeek/rank')
+    .then(res => {
+      if(res.data.success) {
+        setTimerWeekRank(res.data.data);
+      }
+    });
+
   }, []);
 
     const LogOut = () => {
@@ -201,12 +210,21 @@ function Home() {
                         </a>
                       )
                     }
-                    
-                    <a href="" target="_self">
-                      <div className="item">
-                        <h4>TIMER</h4>
-                      </div>
-                    </a>
+                    {isLoggedIn ? 
+                      (
+                        <Link to = '/timer'>
+                          <div className="item">
+                            <h4>TIMER</h4>
+                          </div>
+                        </Link> ) :
+                      (
+                        <a onClick={alertMsg}>
+                          <div className="item">
+                            <h4>TIMER</h4>
+                          </div>
+                        </a>
+                      )
+                    }
                   </nav>
                 </div>
               </section>
@@ -281,35 +299,28 @@ function Home() {
                         )
                       }
 
-                      <h1>[Today's ranking]</h1>
+                      <h1>[Today's ranking]</h1>                    
                       <div className="ranking">
-                        <div className="rank__detail">
-                          <div className="rank__name">
-                            <span>Iron Man</span>
-                            <span>4 hours</span>
-                          </div>
-                          <div className="rank__bar">
-                            <div className="rank__value" style={{ width: "40%" }}></div>
-                          </div>
-                        </div>
-                        <div className="rank__detail">
-                          <div className="rank__name">
-                            <span>Doctor Stranger</span>
-                            <span>7 hours</span>
-                          </div>
-                          <div className="rank__bar">
-                            <div className="rank__value" style={{ width: "70%" }}></div>
-                          </div>
-                        </div>
-                        <div className="rank__detail">
-                          <div className="rank__name">
-                            <span>Black Widow</span>
-                            <span>9 hours</span>
-                          </div>
-                          <div className="rank__bar">
-                            <div className="rank__value" style={{ width: "90%" }}></div>
-                          </div>
-                        </div>
+                        {timerWeekRank.map((val, index) => {
+                          const  style = {
+                            width: `${(val.recordWeek/timerWeekRank[0].recordWeek) * 100}%`,
+                          }
+                          const hour = parseInt((val.recordWeek/60)/60);
+                          const minute = parseInt((val.recordWeek/60)%60);
+                          const second = parseInt(val.recordWeek%60);
+                          return (
+                            <div key={index} className="rank__detail">
+                              <div className="rank__name">
+                                <span>{val.timerWeekid}</span>
+                                <span id="rank_time">{hour<10 ? `0${hour}` : hour} : {minute<10 ? `0${minute}` : minute} : {second<10 ? `0${second}` : second}</span>
+                              </div>
+                              <div className="rank__bar">
+                                <div className="rank__value" style={style}></div>
+                              </div>
+                            </div>
+                          )})
+                        }
+                        
                       </div>
                     </div>
                   </div>