diff --git a/fortune_generator/fortune.js b/fortune_generator/fortune.js
index 47edb26..0ff2508 100644
--- a/fortune_generator/fortune.js
+++ b/fortune_generator/fortune.js
@@ -67,15 +67,7 @@ async function init_page(){
   await fetch_data();
 
   // hide the elements of show fortune page
-  $('#ip-to-fortune').hide();
-  $('#l-1-event').hide();
-  $('#l-1-desc').hide();
-  $('#l-2-event').hide();
-  $('#l-2-desc').hide();
-  $('#r-1-event').hide();
-  $('#r-1-desc').hide();
-  $('#r-2-event').hide();
-  $('#r-2-desc').hide();
+  $('#result-page').hide();
 
   // show date before button pressed
   const showMonth = `<span style='font-size:10vmin; color:${dateColor}; -webkit-writing-mode:vertical-lr;'><b>${chineseMonth[month - 1] + "月"}</b></span>`;
@@ -123,27 +115,13 @@ const bad_span = event => `<span style='font-size:5.6vmin; color:${badColor};'><
 const desc_span = desc => `<span style='font-size:3.5vmin; color:${descColor};'>${desc}</span>`;
 
 function Appear() {
-  //change page
   $('#title').html(title);
-  $('#month').hide();
-  $('#date').hide();
-  $('#weekday').hide();
-  $('#special-day').hide();
-  $('#upcoming-event-1').hide();
-  $('#upcoming-event-2').hide();
   $('#btn').html('打卡成功');
-  // toggle the elements on show status page
-  $('#ip-to-fortune').show();
-  $('#l-1-event').show();
-  $('#l-1-desc').show();
-  $('#l-2-event').show();
-  $('#l-2-desc').show();
-  $('#r-1-event').show();
-  $('#r-1-desc').show();
-  $('#r-2-event').show();
-  $('#r-2-desc').show();
   // disable the btn
   $('#btn').attr("disabled", "disabled");
+  //change page
+  $('#init-page').hide();
+  $('#result-page').show();
 
   // transform ip to four numbers
   let num = ip.split(".").map(num => parseInt(num));
diff --git a/fortune_generator/index.html b/fortune_generator/index.html
index 2509914..d4e1c25 100644
--- a/fortune_generator/index.html
+++ b/fortune_generator/index.html
@@ -16,68 +16,74 @@
       <p id="title"></p>
     </div>
     <!-- init page start -->
-    <div class="row">
-      <div class="col-3">
-        <p id="month"></p>
+    <div id="init-page">
+      <div class="row">
+        <div class="col-3">
+          <p id="month"></p>
+        </div>
+        <div class="col-6">
+          <p id="date"></p>
+        </div>
+        <div class="col-3">
+          <p id="weekday"></p>
+        </div>
       </div>
-      <div class="col-6">
-        <p id="date"></p>
+      <div class="row">
+        <div class="col">
+          <p id="special-day"></p>
+        </div>
       </div>
-      <div class="col-3">
-        <p id="weekday"></p>
+      <div class="row">
+        <p id="upcoming-event-1"></p>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <p id="special-day"></p>
+      <div class="row">
+        <p id="upcoming-event-2"></p>
       </div>
     </div>
-    <div class="row">
-      <p id="upcoming-event-1"></p>
-    </div>
-    <div class="row">
-      <p id="upcoming-event-2"></p>
-    </div>
     <!-- init page end -->
-    <div class="row">
-      <p id="ip-to-fortune"></p>
-    </div>
-    <div class="row">
-      <div class="col">
-        <div class="row">
-          <p id="l-1-event"></p>
+    <!-- page after button clicked start -->
+    <div id="result-page">
+      <div class="row">
+        <p id="ip-to-fortune"></p>
+      </div>
+      <div class="row">
+        <div class="col">
+          <div class="row">
+            <p id="l-1-event"></p>
+          </div>
+          <div class="row">
+            <p id="l-1-desc"></p>
+          </div>
         </div>
-        <div class="row">
-          <p id="l-1-desc"></p>
+        <div class="col">
+          <div class="row">
+            <p id="r-1-event"></p>
+          </div>
+          <div class="row">
+            <p id="r-1-desc"></p>
+          </div>
         </div>
       </div>
-      <div class="col">
-        <div class="row">
-          <p id="r-1-event"></p>
+      <div class="row">
+        <div class="col">
+          <div class="row">
+            <p id="l-2-event"></p>
+          </div>
+          <div class="row">
+            <p id="l-2-desc"></p>
+          </div>
         </div>
-        <div class="row">
-          <p id="r-1-desc"></p>
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <div class="row">
-          <p id="l-2-event"></p>
-        </div>
-        <div class="row">
-          <p id="l-2-desc"></p>
-        </div>
-      </div>
-      <div class="col">
-        <div class="row">
-          <p id="r-2-event"></p>
-        </div>
-        <div class="row">
-          <p id="r-2-desc"></p>
+        <div class="col">
+          <div class="row">
+            <p id="r-2-event"></p>
+          </div>
+          <div class="row">
+            <p id="r-2-desc"></p>
+          </div>
         </div>
       </div>
     </div>
+    <!-- page after button click end -->
     <button id="btn" onclick="getLuck()">點擊打卡</button>
   </div>
   <canvas id="Matrix"></canvas>