diff --git a/fortune_generator/fortune.js b/fortune_generator/fortune.js
index 808bb1d..4343303 100644
--- a/fortune_generator/fortune.js
+++ b/fortune_generator/fortune.js
@@ -14,13 +14,36 @@ fetch("fortune.json")
   badFortunes = data.badFortunes;
 })
 
-const textColor = ["#e74c3c", "#e74c3c", "#e74c3c", "#70ad47", "#000000bf", "#000000bf", "#000000bf"];
+const textColor = ["#e74c3c", "#e74c3c", "#e74c3c", "#5eb95e", "#000000bf", "#000000bf", "#000000bf"];
 const fortuneStatus = ["大吉", "中吉", "小吉", "中平", "凶", "小凶", "大凶"];
+const chineseMonth = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十一", "十二"];
+const week = ['日', '一', '二', '三', '四', '五', '六'];
 
+const title = `<span style='font-size: 5.8vmin; color: #000000CC;'><b>今日運勢<b></span>`;
 const allGood = `<span style='font-size: 5.8vmin; color: #000000bf;'><b>萬事皆宜<b></span>`;
 const allBad = `<span style='font-size: 5.8vmin; color: #e74c3c;'><b>諸事不宜<b></span>`;
 
+const d = new Date();
+const date = d.getDate();
+const day = d.getDay();
+console.log(day);
+const month = d.getMonth() + 1;
+const year = d.getFullYear();
+
+const showMonth = `<span style='font-size: 11.5vmin; color: #054310C9; -webkit-writing-mode: vertical-lr;'><b>${chineseMonth[month - 1] + "月"}<b></span>`;
+const showDate = `<span style='font-size: 28vmin; color: #054310C9; align-items: top;'><b>${("0" + date).substr(-2)}<b></span>`;
+const showDay = `<span style='font-size: 11.5vmin; color: #054310C9; -webkit-writing-mode: vertical-lr;'><b>${"星期" + week[day]}<b></span>`;
+
+$('#month').html(showMonth);
+$('#date').html(showDate);
+$('#weekday').html(showDay);
+
 function Appear() {
+  $('#title').html(title);
+  $('#month').html('');
+  $('#date').html('');
+  $('#weekday').html('');
+
   $('#btn').html('打卡成功');
   let p = 0;
   let num = [0, 0, 0, 0];
@@ -32,17 +55,14 @@ function Appear() {
     num[p] = num[p] * 10 + parseInt(ip[i]);
   }
 
-  let d = new Date();
-  let date = d.getDate();
-  let month = d.getMonth() + 1;
-  let year = d.getFullYear();
+  
   let hashDate = Math.round(Math.log10(year * ((month << 3) ^ (date << 1))));
   let seed1 = (num[0] >> hashDate) * (num[1] >> Math.min(hashDate, 2)) + (num[2] << 1) * (num[3] >> 3) + (date << 3) * (month << hashDate) + year;
   let seed2 = (num[0] << (hashDate + 2)) * (num[1] << hashDate) + (num[2] << 1) * (num[3] << 3) + (date << (hashDate - 1)) * (month << 4) + year >> hashDate;
   const goodLen = goodFortunes.length;
   const badLen = badFortunes.length;
 
-  let status = `<span style='font-size: 10vmin; color: ${textColor[seed1 % 7]};'><b>§ ${fortuneStatus[seed1 % 7]} §</b></span>`;
+  let status = `<span style='font-size: 12vmin; color: ${textColor[seed1 % 7]};'><b>§ ${fortuneStatus[seed1 % 7]} §</b></span>`;
   $('#ip-to-fortune').html(status);
 
   let l_1_event, l_1_desc, l_2_event, l_2_desc, r_1_event, r_1_desc, r_2_event, r_2_desc;
@@ -58,13 +78,13 @@ function Appear() {
   set.add(badFortunes[r1].event);
   r2 = (((((seed1 << 3 ) + (d.getFullYear() >> 5) * (date << 2)) % badLen) * seed2) >> 6) % badLen;
   while(set.has(badFortunes[r2].event)) r2 = (r2 + 1) % badLen;
-  l_1_event = `<span style='font-size: 5.3vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l1].event}</span>`;
+  l_1_event = `<span style='font-size: 5.4vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l1].event}</span>`;
   l_1_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${goodFortunes[l1].description}</span>`;
-  l_2_event = `<span style='font-size: 5.3vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l2].event}</span>`;
+  l_2_event = `<span style='font-size: 5.4vmin; color: #e74c3c;'><b>宜: </b>${goodFortunes[l2].event}</span>`;
   l_2_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${goodFortunes[l2].description}</span>`;
-  r_1_event = `<span style='font-size: 5.3vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r1].event}</span>`;
+  r_1_event = `<span style='font-size: 5.4vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r1].event}</span>`;
   r_1_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${badFortunes[r1].description}</span>`;
-  r_2_event = `<span style='font-size: 5.3vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r2].event}</span>`;
+  r_2_event = `<span style='font-size: 5.4vmin; color: #000000bf;'><b>忌: </b>${badFortunes[r2].event}</span>`;
   r_2_desc = `<span style='font-size: 3.2vmin; color: #7f7f7f;'>${badFortunes[r2].description}</span>`;
   if(seed1 % 7 == 0){
     $('#r-1-event').html(allGood);
diff --git a/fortune_generator/index.html b/fortune_generator/index.html
index add8cfd..5822879 100644
--- a/fortune_generator/index.html
+++ b/fortune_generator/index.html
@@ -12,7 +12,18 @@
 <body>
   <div class="container">
     <div class="row">
-      <h1>今日運勢</h1>
+      <p id="title"></p>
+    </div>
+    <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="row">
       <p id="ip-to-fortune"></p>
diff --git a/fortune_generator/matrix.js b/fortune_generator/matrix.js
index 217e75e..5e656a5 100644
--- a/fortune_generator/matrix.js
+++ b/fortune_generator/matrix.js
@@ -1,8 +1,8 @@
 const canvas = document.getElementById("Matrix")
 const context = canvas.getContext("2d")
 
-canvas.height = window.innerHeight;
-canvas.width = window.innerWidth;
+canvas.height = window.innerHeight + 100;
+canvas.width = window.innerWidth + 5;
 
 const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}\」=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè";
 
diff --git a/fortune_generator/styles.css b/fortune_generator/styles.css
index af376de..27ea376 100644
--- a/fortune_generator/styles.css
+++ b/fortune_generator/styles.css
@@ -28,8 +28,8 @@ body {
   text-align: center;
   transform: translate(-50%, -50%);
   background-color: var(--white);
-  border-radius: 30px;
-  padding: 30px;
+  border-radius: 40px;
+  padding: 10px;
 }
 
 .left-result {