diff --git a/src/templates/debug/anon_matchmaking.html b/src/templates/debug/anon_matchmaking.html
index 4bc553c..b705d83 100644
--- a/src/templates/debug/anon_matchmaking.html
+++ b/src/templates/debug/anon_matchmaking.html
@@ -5,15 +5,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Matchmaking Debug</title>
     <style>
+        :root {
+            --stat-cell-size: 200px;
+            --queue-len-color: white;
+            --open-lobbies-color: white;
+            --killed-lobbies-color: white;
+            --queued-hunters-color: white;
+            --queued-runners-color: white;
+        }
         body {
             background-color: #333;
             color: #fff;
             font-family: Arial, sans-serif;
-            margin: 0;
             padding: 0;
+            margin: 0;
+        }
+        .container {
+            max-width: 1264px;
+            width: 100%;
+            margin: 0 auto;
+            padding-block: 50px 25px;
         }
         h1, h2 {
             color: #f2f2f2;
+            text-align: center;
+        }
+        .statistics p {
+            text-align: center;
+        }
+        .statistics p strong {
+            display: inline-block;
+            margin-bottom: 12px;
         }
         table {
             border-collapse: collapse;
@@ -45,6 +67,32 @@
         li {
             list-style-type: none;
         }
+        .statistics {
+            padding-top: 20px;
+        }
+        .statistics > .row {
+            display: grid;
+            justify-content: center;
+            align-content: center;
+            gap: 40px;
+        }
+        .row-1 {
+            grid-template-columns: repeat(3, var(--stat-cell-size));
+        }
+        .row-2 {
+            grid-template-columns: repeat(2, var(--stat-cell-size));
+        }
+        .data-tbl-container {
+            display: block;
+            width: 100%;
+            padding-top: 20px;
+        }
+        .queue-len {
+            color: white;}
+            .open-lobbies{color: var(--open-lobbies-color);}
+            .killed-lobbies{color: var(--killed-lobbies-color);}
+            .queued-hunters{color: var(--queued-hunters-color);}
+            .queued-runners{color: var(--queued-runners-color);}
     </style>
     <meta http-equiv="refresh" content="4">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -56,35 +104,47 @@
     <meta name="theme-color" content="#ffffff">
 </head>
 <body>
-    <h1>Matchmaking Debug Information</h1>
-    <p><strong>Length of Queue:</strong> {{ len_queue }}</p>
-    <p><strong>Killed Lobbies:</strong> {{ len_killed_lobbies }}</p>
-    <p><strong>Queued Runners:</strong> {{ len_queued_runners }}</p>
-    <p><strong>Queued Hunters:</strong> {{ len_queued_hunters }}</p>
-    <p><strong>Open Lobbies:</strong> {{ len_open_lobbies }}</p>
+<div class="container">
+<h1>Matchmaking Debug Information</h1>
 
-    <h2>Lobby Data</h2>
-    <table>
-        <tr>
-            <th>Lobby ID</th>
-            <th>Hunters</th>
-            <th>Runners</th>
-            <th>Status</th>
-        </tr>
-        {% for lobby in lobby_data %}
-        <tr>
-            <td>{{ lobby.id }}</td>
-            <td>1</td>
-            <td>
-                <ul>
-                    {% for runner in lobby.nonHosts  %}
-                    <li>{{ runner.userId }}</li>
-                    {% endfor %}
-                </ul>
-            </td>
-            <td>{{ lobby.status }}</td>
-        </tr>
-        {% endfor %}
-    </table>
+<div class="statistics">
+    <div class="row row-1">
+    <p class="queue-len"><strong>Length of Queue</strong> <br> {{ len_queue }}</p>
+    <p class="open-lobbies"><strong>Open Lobbies</strong> <br>{{ len_open_lobbies }}</p>
+    <p class="killed-lobbies"><strong>Killed Lobbies</strong> <br> {{ len_killed_lobbies }}</p>
+    </div>
+    <div class="row row-2">
+    <p class="queued-hunters"><strong>Queued Hunters</strong> <br> {{ len_queued_hunters }}</p>
+        <p class="queued-runners"><strong>Queued Runners</strong> <br> {{ len_queued_runners }}</p>
+</div>
+</div>
+</div>
+<div class="container">
+<h2>Lobby Data</h2>
+    <div class="data-tbl-container">
+<table>
+    <tr>
+        <th>Lobby ID</th>
+        <th>Hunters</th>
+        <th>Runners</th>
+        <th>Status</th>
+    </tr>
+    {% for lobby in lobby_data %}
+    <tr>
+        <td>{{ lobby.id }}</td>
+        <td>1</td>
+        <td>
+            <ul>
+                {% for runner in lobby.nonHosts  %}
+                <li>{{ runner.userId }}</li>
+                {% endfor %}
+            </ul>
+        </td>
+        <td>{{ lobby.status }}</td>
+    </tr>
+    {% endfor %}
+</table>
+</div>
+</div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/templates/debug/matchmaking.html b/src/templates/debug/matchmaking.html
index dbe5e9b..cb64ba4 100644
--- a/src/templates/debug/matchmaking.html
+++ b/src/templates/debug/matchmaking.html
@@ -5,15 +5,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Matchmaking Debug</title>
     <style>
+        :root {
+            --stat-cell-size: 200px;
+            --queue-len-color: white;
+            --open-lobbies-color: white;
+            --killed-lobbies-color: white;
+            --queued-hunters-color: white;
+            --queued-runners-color: white;
+        }
         body {
             background-color: #333;
             color: #fff;
             font-family: Arial, sans-serif;
-            margin: 0;
             padding: 0;
+            margin: 0;
+        }
+        .container {
+            max-width: 1264px;
+            width: 100%;
+            margin: 0 auto;
+            padding-block: 50px 25px;
         }
         h1, h2 {
             color: #f2f2f2;
+            text-align: center;
+        }
+        .statistics p {
+            text-align: center;
+        }
+        .statistics p strong {
+            display: inline-block;
+            margin-bottom: 12px;
         }
         table {
             border-collapse: collapse;
@@ -45,6 +67,32 @@
         li {
             list-style-type: none;
         }
+        .statistics {
+            padding-top: 20px;
+        }
+        .statistics > .row {
+            display: grid;
+            justify-content: center;
+            align-content: center;
+            gap: 40px;
+        }
+        .row-1 {
+            grid-template-columns: repeat(3, var(--stat-cell-size));
+        }
+        .row-2 {
+            grid-template-columns: repeat(2, var(--stat-cell-size));
+        }
+        .data-tbl-container {
+            display: block;
+            width: 100%;
+            padding-top: 20px;
+        }
+        .queue-len {
+            color: white;}
+            .open-lobbies{color: var(--open-lobbies-color);}
+            .killed-lobbies{color: var(--killed-lobbies-color);}
+            .queued-hunters{color: var(--queued-hunters-color);}
+            .queued-runners{color: var(--queued-runners-color);}
     </style>
     <meta http-equiv="refresh" content="4">
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -56,35 +104,48 @@
     <meta name="theme-color" content="#ffffff">
 </head>
 <body>
-    <h1>Matchmaking Debug Information</h1>
-    <p><strong>Length of Queue:</strong> {{ len_queue }}</p>
-    <p><strong>Killed Lobbies:</strong> {{ len_killed_lobbies }}</p>
-    <p><strong>Queued Runners:</strong> {{ len_queued_runners }}</p>
-    <p><strong>Queued Hunters:</strong> {{ len_queued_hunters }}</p>
-    <p><strong>Open Lobbies:</strong> {{ len_open_lobbies }}</p>
 
-    <h2>Lobby Data</h2>
-    <table>
-        <tr>
-            <th>Lobby ID</th>
-            <th>Hunters</th>
-            <th>Runners</th>
-            <th>Status</th>
-        </tr>
-        {% for lobby in lobby_data %}
-        <tr>
-            <td>{{ lobby.id }}</td>
-            <td>{{ lobby.host }}</td>
-            <td>
-                <ul>
-                    {% for runner in lobby.nonHosts  %}
-                    <li>{{ runner.userId }}</li>
-                    {% endfor %}
-                </ul>
-            </td>
-            <td>{{ lobby.status }}</td>
-        </tr>
-        {% endfor %}
-    </table>
+<div class="container">
+<h1>Matchmaking Debug Information</h1>
+
+<div class="statistics">
+    <div class="row row-1">
+    <p class="queue-len"><strong>Length of Queue</strong> <br> {{ len_queue }}</p>
+    <p class="open-lobbies"><strong>Open Lobbies</strong> <br>{{ len_open_lobbies }}</p>
+    <p class="killed-lobbies"><strong>Killed Lobbies</strong> <br> {{ len_killed_lobbies }}</p>
+    </div>
+    <div class="row row-2">
+    <p class="queued-hunters"><strong>Queued Hunters</strong> <br> {{ len_queued_hunters }}</p>
+        <p class="queued-runners"><strong>Queued Runners</strong> <br> {{ len_queued_runners }}</p>
+</div>
+</div>
+</div>
+<div class="container">
+<h2>Lobby Data</h2>
+    <div class="data-tbl-container">
+<table>
+    <tr>
+        <th>Lobby ID</th>
+        <th>Hunters</th>
+        <th>Runners</th>
+        <th>Status</th>
+    </tr>
+    {% for lobby in lobby_data %}
+    <tr>
+        <td>{{ lobby.id }}</td>
+        <td>{{ lobby.host }}</td>
+        <td>
+            <ul>
+                {% for runner in lobby.nonHosts  %}
+                <li>{{ runner.userId }}</li>
+                {% endfor %}
+            </ul>
+        </td>
+        <td>{{ lobby.status }}</td>
+    </tr>
+    {% endfor %}
+</table>
+</div>
+</div>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/templates/index.html b/src/templates/index.html
index 3394d22..871e09a 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -1,8 +1,4 @@
 <!DOCTYPE html>
-<meta
-  name    = "color-scheme"
-  content = "light dark"
-/>
 <html>
 <head>
   <title>Deathgarden Bloodharvest REBIRTH API</title>
@@ -13,12 +9,37 @@
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="theme-color" content="#ffffff">
+  <style>
+    body {
+      background-color: #333;
+      color: #fff;
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      text-align: center;
+    }
+    h1 {
+      color: white;
+    }
+    p {
+      margin-bottom: 20px;
+    }
+    a {
+      color: #007bff; /* blue */
+      text-decoration: none;
+    }
+    a:hover {
+      text-decoration: underline;
+    }
+  </style>
 </head>
 <body>
 <h1>Welcome to the Deathgarden Bloodharvest Testing API.</h1>
 <p>For more information please visit its GitHub Repository.</p>
 <div class="github-card" data-github="wolfswolke/DeathGarden_API_Rebirth" data-width="400" data-height="155" data-theme="default"></div>
 <script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
+<p></p>
+<a href="/debug/matchmaking" style="color: #007bff;">Match Status</a>
 </body>
 </html>
 
