diff --git a/data/gacha_records.html b/data/gacha_records.html
index 55240e77d..ae1e6044e 100644
--- a/data/gacha_records.html
+++ b/data/gacha_records.html
@@ -1,7 +1,46 @@
+<!doctype html>
 <html>
     <head>
-         <!--Not sure the page is provided in UTF-8 acutally, just put meta here-->
-        <meta charset="utf-8" />
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
+        <style>
+            p {
+                font-weight:300;
+            }
+            a,a:hover {
+                text-decoration:none !important;
+                color:#626976;
+            }
+            .content {
+                padding:3rem 0;
+            }
+            .container {
+                color:#626976;
+                position: relative;
+            }
+
+            h2 {
+                font-size:20px;
+            }
+            .custom-table {
+                min-width:900px;
+            }
+            .custom-table thead tr,.custom-table thead th {
+                padding-bottom:30px;
+                color:#000;
+            }
+            .custom-table tbody th,.custom-table tbody td {
+                color:#777;
+                font-weight:400;
+                padding-bottom:20px;
+                padding-top:20px;
+                font-weight:300;
+                border:none;
+            }
+        </style>
+        <title>Gacha Records</title>
         <script>
             // Debug entry
             // record = [
@@ -45,60 +84,52 @@
         <script>
             mappings['default'] = mappings['en-us']; // make en-us as default/fallback option
         </script>
-        <!-- TODO: Refine the CSS -->
-        <style>
-            a {
-                text-decoration: none !important;
-            }
-            .content {
-                width: 600px;
-                margin: auto;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-            }
-
-            .content .navbar {
-                margin: auto;
-                width: fit-content;
-                padding-top: 5px;
-                padding-bottom: 30px;
-            }
-
-            .yellow {
-                color: yellow;
-            }
-
-            .blue {
-                color: rgb(75, 107, 251);
-            }
-
-            .purple {
-                color: rgb(242, 40, 242);
-            }
-        </style>
     </head>
-    <body style="background: skyblue;">
+    <body>
         <div class="content">
-            <h1>Gacha Records</h1>
-            <h2 id="gacha-type"></h2>
-            <br/>
-            <div style="width: fit-content">
-                <table border="1">
-                    <tbody id="container">
+            <div class="container">
+                <h2 class="mb-5">Gacha Records</h2>
+                <table id="container" class="table table-striped custom-table">
+                    <thead>
                         <tr>
-                            <th>Time</th>
-                            <th>Item</th>
+                            <th scope="col">Date</th>
+                            <th scope="col">Item</th>
                         </tr>
+                    </thead>
+                    <tbody>
                     </tbody>
                 </table>
-            </div>
-            <div class="navbar">
-                <a href="" id="prev"> &lt; </a>
-                <span id="curpage">1</span>
-                <a href="" id="next"> &gt; </a>
+                <div class="navbar">
+                    <a href="" id="prev">&lt;</a>
+                    <span id="curpage">1</span>
+                    <a href="" id="next">&gt;</a>
+                </div>
             </div>
         </div>
+        <footer>
+            <div class="copyright">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <span>
+                                Template by <a href="https://loli.sale/">BecodReyes</a>. All rights reserved.
+                            </span>
+                        </div>
+                        <div class="col-md-6">
+                            <ul style="float:right">
+                                <li class="list-inline-item">
+                                    <a href="https://github.com/Grasscutters/Grasscutter">Github</a>
+                                </li>
+                                <li class="list-inline-item">·</li>
+                                <li class="list-inline-item">
+                                    <a href="https://github.com/Grasscutters/Grasscutter/blob/stable/LICENSE">License</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
 
         <script>
             var lang = new window.URLSearchParams(window.location.search).get("lang");
@@ -181,4 +212,4 @@
         </script>
 
     </body>
-</html>
\ No newline at end of file
+</html>
