diff --git a/css/style.css b/css/style.css
index 6ab4292..45aae3b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -6,10 +6,14 @@ table {
 }
 
 th, td {
-    padding: 10px 20px;
+    padding: 5px 5px;
     border: 1px solid #000;
 }
 
+hr {
+    border: 1px solid #2c6a99;
+}
+
 a:link {
     color: #000000;
 }
@@ -23,13 +27,13 @@ a:visited {
 /* 已訪問超連結 */
 
 a:hover {
-    color: #1aff00;
+    color: #1070c4;
 }
 
 /* 滑鼠移動到超連結上 */
 
 a:active {
-    color: #396035;
+    color: #0d5da3;
 }
 
 /* 滑鼠點選時 */
@@ -37,19 +41,31 @@ a:active {
 h1 {
     text-align: center;
     font-weight: bold;
-    font-family: 'Arial Black', system-ui
+    font-family: 'Arial Black', system-ui;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 h2 {
     text-align: center;
     font-weight: bold;
-    font-family: 'Arial Black', system-ui
+    font-family: 'Arial Black', system-ui;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 h3 {
     text-align: center;
     font-weight: bold;
-    font-family: 'Arial Black', system-ui
+    font-family: 'Arial Black', system-ui;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 h4 {
@@ -62,40 +78,98 @@ h4 {
     margin-right: 0;
 }
 
+h5 {
+    text-align: center;
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+}
+
 p {
     text-align: center;
     font-weight: bold;
     font-family: 'Arial', system-ui
 }
 
-.center {
-    margin-left: auto;
-    margin-right: auto;
-    font-weight: bold;
-    font-family: 'Arial', system-ui
+input[type="text"], input[type="number"] {
+    width: 100%;
+    max-width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border-width: 1px;
+    border-color: #07407d;
+    background-color: #ffffff;
+    color: #000000;
+    box-sizing: border-box;
+    border-style: solid;
+    border-radius: 5px;
 }
 
-input[type="text"] {
-    width: 100%;
-    outline: #1aff00;
-}
-
-input[type="number"] {
-    width: 100%;
-    outline: #1aff00;
+input[type="text"], input[type="number"] {
+    outline:none;
 }
 
 input[type="date"] {
-    width: 50%;
-    height: 30px;
-    font-size: medium;
-    font-weight: bold;
-    font-family: 'Arial', system-ui
+    padding: 5px;
+    font-size: 16px;
+    border-width: 1px;
+    border-color: #07407d;
+    background-color: #ffffff;
+    color: #000000;
+    border-style: solid;
+    border-radius: 5px;
+    box-shadow: 0px 0px 5px rgba(66,66,66,.75);
+    text-shadow: -50px 0px 0px rgba(66,66,66,.0);
 }
 
-button {
-    width: 40%;
+input[type="date"] {
+    outline:none;
+}
+
+/*button {
+    width: auto;
     height: 30px;
     font-weight: bold;
     font-family: 'Arial', system-ui
+}*/
+
+button {
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 8px 20px;
+    border: 1px solid #07407d;
+    border-radius: 8px;
+    background: #4ab1ff;
+    background: -webkit-gradient(linear, left top, left bottom, from(#4ab1ff), to(#0d5da3));
+    background: -moz-linear-gradient(top, #4ab1ff, #0d5da3);
+    background: linear-gradient(to bottom, #4ab1ff, #0d5da3);
+    text-shadow: #591717 1px 1px 1px;
+    font: normal normal bold 15px arial;
+    color: #ffffff;
+    text-decoration: none;
+}
+button:hover,
+button:focus {
+    border: 1px solid #0b66c8;
+    background: #59d4ff;
+    background: -webkit-gradient(linear, left top, left bottom, from(#59d4ff), to(#1070c4));
+    background: -moz-linear-gradient(top, #59d4ff, #1070c4);
+    background: linear-gradient(to bottom, #59d4ff, #1070c4);
+    color: #ffffff;
+    text-decoration: none;
+}
+button:active {
+    background: #2c6a99;
+    background: -webkit-gradient(linear, left top, left bottom, from(#2c6a99), to(#0d5da3));
+    background: -moz-linear-gradient(top, #2c6a99, #0d5da3);
+    background: linear-gradient(to bottom, #2c6a99, #0d5da3);
+}
+
+.center {
+    width: fit-content;
+    height: 40px;
+    margin: 0 auto;
 }
diff --git a/edit.html b/edit.html
index 2a17996..0a88e67 100644
--- a/edit.html
+++ b/edit.html
@@ -1,95 +1,147 @@
 <!DOCTYPE html>
-<html lang="zh-TW" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
-
-<head>
+<html
+  lang="zh-TW"
+  xmlns="http://www.w3.org/1999/html"
+  xmlns="http://www.w3.org/1999/html"
+>
+  <head>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <title>新增/修改紀錄</title>
-    <link rel="stylesheet" href="./css/style.css">
-</head>
+    <link rel="stylesheet" href="./css/style.css" />
+  </head>
 
-<body>
+  <body>
     <h1 id="title">新增/修改紀錄</h1>
-    <hr>
-    <h4>填寫方式：掉刀填0，正常出刀填X周-Y王。傷害依照幹部規定要不要填，如不填可留空</h4>
-    <hr>
+    <hr />
+    <h4>填寫方式：掉刀填0，正常出刀填X周-Y王。</h4>
+    <br />
+    <h4>傷害依照幹部規定要不要填，如不填可留空</h4>
+    <hr />
     <form id="record-form">
-        <table>
-            <tr>
-                <td><h4>第1刀正刀</h4></td>
-                <td>
-                    <input type="text" id="knife1_boss" placeholder="x周-y王" />
-                </td>
-                <td><h4>第1刀正刀傷害</h4></td>
-                <td>
-                    <input type="number" id="knife1_damage" placeholder="ex: 12000000" />
-                </td>
-            </tr>
-            <tr>
-                <td><h4>第1刀殘刀</h4></td>
-                <td>
-                    <input type="text" id="knife1c_boss" placeholder="x周-y王" />
-                </td>
-                <td><h4>第1刀殘刀傷害</h4></td>
-                <td>
-                    <input type="number" id="knife1c_damage" placeholder="ex: 12000000" />
-                </td>
-            </tr>
-        </table>
-        <hr />
-        <table>
-            <tr>
-                <td><h4>第2刀正刀</h4></td>
-                <td>
-                    <input type="text" id="knife2_boss" placeholder="x周-y王" />
-                </td>
-                <td><h4>第2刀正刀傷害</h4></td>
-                <td>
-                    <input type="number" id="knife2_damage" placeholder="ex: 12000000" />
-                </td>
-            </tr>
-            <tr>
-                <td><h4>第2刀殘刀</h4></td>
-                <td>
-                    <input type="text" id="knife2c_boss" placeholder="x周-y王" />
-                </td>
-                <td><h4>第2刀殘刀傷害</h4></td>
-                <td>
-                    <input type="number" id="knife2c_damage" placeholder="ex: 12000000" />
-                </td>
-            </tr>
-        </table>
-        <hr />
-        <table>
-            <tr>
-                <td><h4>第3刀正刀</h4></td>
-                <td>
-                    <input type="text" id="knife3_boss" placeholder="x周-y王" />
-                </td>
-                <td><h4>第3刀正刀傷害</h4></td>
-                <td>
-                    <input type="number" id="knife3_damage" placeholder="ex: 12000000" />
-                </td>
-            </tr>
-            <tr>
-                <td><h4>第3刀殘刀</h4></td>
-                <td>
-                    <input type="text" id="knife3c_boss" placeholder="x周-y王" />
-                </td>
-                <td><h4>第3刀殘刀傷害</h4></td>
-                <td>
-                    <input type="number" id="knife3c_damage" placeholder="ex: 12000000" />
-                </td>
-            </tr>
-        </table>
-        <hr />
-        <p><button type="submit">送出</button></p>
+      <table>
+        <tr>
+          <td>
+            <h5>第1刀<br />正刀</h5>
+          </td>
+          <td>
+            <input type="text" id="knife1_boss" placeholder="x周-y王" />
+          </td>
+          <td>
+            <h5>第1刀<br />正刀傷害</h5>
+          </td>
+          <td>
+            <input
+              type="number"
+              id="knife1_damage"
+              placeholder="ex: 12000000"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <h5>第1刀<br />殘刀</h5>
+          </td>
+          <td>
+            <input type="text" id="knife1c_boss" placeholder="x周-y王" />
+          </td>
+          <td>
+            <h5>第1刀<br />殘刀傷害</h5>
+          </td>
+          <td>
+            <input
+              type="number"
+              id="knife1c_damage"
+              placeholder="ex: 12000000"
+            />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>
+            <h5>第2刀<br />正刀</h5>
+          </td>
+          <td>
+            <input type="text" id="knife2_boss" placeholder="x周-y王" />
+          </td>
+          <td>
+            <h5>第2刀<br />正刀傷害</h5>
+          </td>
+          <td>
+            <input
+              type="number"
+              id="knife2_damage"
+              placeholder="ex: 12000000"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <h5>第2刀<br />殘刀</h5>
+          </td>
+          <td>
+            <input type="text" id="knife2c_boss" placeholder="x周-y王" />
+          </td>
+          <td>
+            <h5>第2刀<br />殘刀傷害</h5>
+          </td>
+          <td>
+            <input
+              type="number"
+              id="knife2c_damage"
+              placeholder="ex: 12000000"
+            />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <table>
+        <tr>
+          <td>
+            <h5>第3刀<br />正刀</h5>
+          </td>
+          <td>
+            <input type="text" id="knife3_boss" placeholder="x周-y王" />
+          </td>
+          <td>
+            <h5>第3刀<br />正刀傷害</h5>
+          </td>
+          <td>
+            <input
+              type="number"
+              id="knife3_damage"
+              placeholder="ex: 12000000"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <h5>第3刀<br />殘刀</h5>
+          </td>
+          <td>
+            <input type="text" id="knife3c_boss" placeholder="x周-y王" />
+          </td>
+          <td>
+            <h5>第3刀<br />殘刀傷害</h5>
+          </td>
+          <td>
+            <input
+              type="number"
+              id="knife3c_damage"
+              placeholder="ex: 12000000"
+            />
+          </td>
+        </tr>
+      </table>
+      <hr />
+      <p><button type="submit">送出</button></p>
     </form>
 
     <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
     <script src="./js/edit.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/index.html b/index.html
index 02428ea..b709a81 100644
--- a/index.html
+++ b/index.html
@@ -17,9 +17,11 @@
     <!--p>
         <a href="new.html">我要填表</a>
     </p-->
+    <div class="center">
     <label for="queryDate">日期篩選：</label>
     <input type="date" id="queryDate">
     <button onclick="getDate()">設定日期</button>
+    </div>
     <hr>
 
     <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
diff --git a/js/index.js b/js/index.js
index 69b7ff0..21abce8 100644
--- a/js/index.js
+++ b/js/index.js
@@ -16,19 +16,19 @@ document.getElementById("body").appendChild(table);
 // Creating and adding data to first row of the table
 let row_1 = document.createElement("tr");
 let heading_1 = document.createElement("th");
-heading_1.innerHTML = "成員名稱";
+heading_1.innerHTML = "<h4>成員名稱</h4>";
 let heading_2 = document.createElement("th");
-heading_2.innerHTML = "1<br>正刀";
+heading_2.innerHTML = "<h4>1<br>正刀</h4>";
 let heading_3 = document.createElement("th");
-heading_3.innerHTML = "1<br>殘刀";
+heading_3.innerHTML = "<h4>2<br>正刀</h4>";
 let heading_4 = document.createElement("th");
-heading_4.innerHTML = "2<br>正刀";
+heading_4.innerHTML = "<h4>3<br>正刀</h4>";
 let heading_5 = document.createElement("th");
-heading_5.innerHTML = "2<br>殘刀";
+heading_5.innerHTML = "<h4>1<br>殘刀</h4>";
 let heading_6 = document.createElement("th");
-heading_6.innerHTML = "3<br>正刀";
+heading_6.innerHTML = "<h4>2<br>殘刀</h4>";
 let heading_7 = document.createElement("th");
-heading_7.innerHTML = "3<br>殘刀";
+heading_7.innerHTML = "<h4>3<br>殘刀</h4>";
 
 row_1.appendChild(heading_1);
 row_1.appendChild(heading_2);
@@ -62,21 +62,21 @@ axios.get("https://pcredive.ray650128.com/backend/api/record", {
             const item = data[i];
 
             if (item.record !== null) {
-                row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
-                row_2_data_2.innerHTML = item.record.record1.boss;
-                row_2_data_3.innerHTML = item.record.record1c.boss;
-                row_2_data_4.innerHTML = item.record.record2.boss;
-                row_2_data_5.innerHTML = item.record.record2c.boss;
-                row_2_data_6.innerHTML = item.record.record3.boss;
-                row_2_data_7.innerHTML = item.record.record3c.boss;
+                row_2_data_1.innerHTML = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
+                row_2_data_2.innerHTML = "<h5>" + item.record.record1.boss + "</h5>";
+                row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
+                row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";
+                row_2_data_5.innerHTML = "<h5>" + item.record.record1c.boss + "</h5>";
+                row_2_data_6.innerHTML = "<h5>" + item.record.record2c.boss + "</h5>";
+                row_2_data_7.innerHTML = "<h5>" + item.record.record3c.boss + "</h5>";
             } else {
                 row_2_data_1.innerHTML = item.member.playerName;
-                row_2_data_2.innerHTML = "";
-                row_2_data_3.innerHTML = "";
-                row_2_data_4.innerHTML = "";
-                row_2_data_5.innerHTML = "";
-                row_2_data_6.innerHTML = "";
-                row_2_data_7.innerHTML = "";
+                row_2_data_2.innerHTML = "<h5>---</h5>";
+                row_2_data_3.innerHTML = "<h5>---</h5>";
+                row_2_data_4.innerHTML = "<h5>---</h5>";
+                row_2_data_5.innerHTML = "<h5>---</h5>";
+                row_2_data_6.innerHTML = "<h5>---</h5>";
+                row_2_data_7.innerHTML = "<h5>---</h5>";
             }
 
             row_2.appendChild(row_2_data_1);
@@ -125,21 +125,21 @@ function getDate() {
                 const item = data[i];
 
                 if (item.record !== null) {
-                    row_2_data_1.innerHTML = "<a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a>";
-                    row_2_data_2.innerHTML = item.record.record1.boss;
-                    row_2_data_3.innerHTML = item.record.record1c.boss;
-                    row_2_data_4.innerHTML = item.record.record2.boss;
-                    row_2_data_5.innerHTML = item.record.record2c.boss;
-                    row_2_data_6.innerHTML = item.record.record3.boss;
-                    row_2_data_7.innerHTML = item.record.record3c.boss;
+                    row_2_data_1.innerHTML = "<h5><a href=\"edit.html?id=" + item.record._id + "\">" + item.member.playerName + "</a><h5>";
+                    row_2_data_2.innerHTML = "<h5>" + item.record.record1.boss + "</h5>";
+                    row_2_data_3.innerHTML = "<h5>" + item.record.record2.boss + "</h5>";
+                    row_2_data_4.innerHTML = "<h5>" + item.record.record3.boss + "</h5>";
+                    row_2_data_5.innerHTML = "<h5>" + item.record.record1c.boss + "</h5>";
+                    row_2_data_6.innerHTML = "<h5>" + item.record.record2c.boss + "</h5>";
+                    row_2_data_7.innerHTML = "<h5>" + item.record.record3c.boss + "</h5>";
                 } else {
                     row_2_data_1.innerHTML = item.member.playerName;
-                    row_2_data_2.innerHTML = "";
-                    row_2_data_3.innerHTML = "";
-                    row_2_data_4.innerHTML = "";
-                    row_2_data_5.innerHTML = "";
-                    row_2_data_6.innerHTML = "";
-                    row_2_data_7.innerHTML = "";
+                    row_2_data_2.innerHTML = "<h5>---</h5>";
+                    row_2_data_3.innerHTML = "<h5>---</h5>";
+                    row_2_data_4.innerHTML = "<h5>---</h5>";
+                    row_2_data_5.innerHTML = "<h5>---</h5>";
+                    row_2_data_6.innerHTML = "<h5>---</h5>";
+                    row_2_data_7.innerHTML = "<h5>---</h5>";
                 }
 
                 row_2.appendChild(row_2_data_1);