diff --git a/ui/index.html b/ui/index.html
index 8e53fae..5725455 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -28,29 +28,76 @@
   <body
     class="text-violet-950 bg-violet-100 dark:text-slate-100 dark:bg-slate-900 font-mono font-medium text-sm md:text-base"
   >
-    <div class="flex flex-col min-h-screen justify-center items-center">
+    <div
+      class="flex flex-col min-h-screen justify-center items-center md:mw-4/3"
+    >
       <p class="py-2">Ny4 IP checker!</p>
-      <div class="divide-y divide-violet-300 dark:divide-slate-700">
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
-          <div>ip.ny4.dev</div>
-          <div id="check-ny4-ip">Loading...</div>
-          <div id="check-ny4-location" class="col-span-2">Loading...</div>
+      <div
+        class="divide-y divide-violet-300 dark:divide-slate-700 w-full md:w-3/4"
+      >
+        <div class="hidden md:grid grid-cols-4 gap-2 p-2">
+          <div class="table-caption">Source</div>
+          <div class="table-caption">IP</div>
+          <div class="table-caption col-span-2">Location</div>
         </div>
+
         <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
-          <div>ip.sb</div>
-          <div id="check-ipsb-ip">Loading...</div>
-          <div id="check-ipsb-location" class="col-span-2">Loading...</div>
+          <div>
+            <h5 class="table-caption md:hidden">Source</h5>
+            <p>ip.ny4.dev</p>
+          </div>
+          <div>
+            <h5 class="table-caption md:hidden">IP</h5>
+            <p id="check-ny4-ip">Loading...</p>
+          </div>
+          <div class="col-span-2">
+            <h5 class="table-caption md:hidden">Location</h5>
+            <p id="check-ny4-location">Loading...</p>
+          </div>
         </div>
+
         <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
-          <div>ipapi.is</div>
-          <div id="check-ipapiis-ip">Loading...</div>
-          <div id="check-ipapiis-location" class="col-span-2">Loading...</div>
+          <div>
+            <h5 class="table-caption md:hidden">Source</h5>
+            <p>ip.sb</p>
+          </div>
+          <div>
+            <h5 class="table-caption md:hidden">IP</h5>
+            <p id="check-ipsb-ip">Loading...</p>
+          </div>
+          <div class="col-span-2">
+            <h5 class="table-caption md:hidden">Location</h5>
+            <p id="check-ipsb-location">Loading...</p>
+          </div>
         </div>
+
         <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
-          <div>ip-api.com</div>
-          <div id="check-speedtestcn-ip">Loading...</div>
-          <div id="check-speedtestcn-location" class="col-span-2">
-            Loading...
+          <div>
+            <h5 class="table-caption md:hidden">Source</h5>
+            <p>ipapi.is</p>
+          </div>
+          <div>
+            <h5 class="table-caption md:hidden">IP</h5>
+            <p id="check-ipapiis-ip">Loading...</p>
+          </div>
+          <div class="col-span-2">
+            <h5 class="table-caption md:hidden">Location</h5>
+            <p id="check-ipapiis-location">Loading...</p>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
+          <div>
+            <h5 class="table-caption md:hidden">Source</h5>
+            <p>ip-api.com</p>
+          </div>
+          <div>
+            <h5 class="table-caption md:hidden">IP</h5>
+            <p id="check-speedtestcn-ip">Loading...</p>
+          </div>
+          <div class="col-span-2">
+            <h5 class="table-caption md:hidden">Location</h5>
+            <p id="check-speedtestcn-location">Loading...</p>
           </div>
         </div>
       </div>
diff --git a/ui/src/style.css b/ui/src/style.css
index b5c61c9..f10276b 100644
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .table-caption {
+    @apply md:hidden text-xs text-gray-500 uppercase dark:text-neutral-400;
+  }
+}
