Changes

diff --git a/static/index.html b/static/index.html
index ea98088..19ef4fb 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,42 +1,44 @@
 <!doctype html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Status Tracker</title>
     <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
+  </head>
+  <body>
     <main>
-        <h1>Status Tracker</h1>
-        {% if no_groups %}
-        <p class="empty">No services are configured.</p>
+      <h1>Status Tracker</h1>
+      {% if no_groups %}
+      <p class="empty">No services are configured.</p>
+      {% endif %}
+      {% for group in groups %}
+      <section class="service-group">
+        <h2>{{ group.name }}</h2>
+        {% if group.no_services %}
+        <p class="empty">No services in this group.</p>
         {% endif %}
-        {% for group in groups %}
-        <section class="service-group">
-            <h2>{{ group.name }}</h2>
-            {% if group.no_services %}
-            <p class="empty">No services in this group.</p>
-            {% endif %}
-            <div class="service-list">
-                {% for service in group.services %}
-                <article class="service-card">
-                    <div class="service-heading">
-                        <span class="led led-{{ service.status_class }}"
-                              title="{{ service.status_label }}"
-                              aria-label="{{ service.status_label }}"></span>
-                        <h3>{{ service.name }}</h3>
-                    </div>
-                    <p>{{ service.description }}</p>
-                    {% if service.has_url %}
-                    <a href="{{ service.url }}">{{ service.url }}</a>
-                    {% endif %}
-                    <p class="status-label">{{ service.status_label }}</p>
-                </article>
-                {% endfor %}
+        <ul class="service-list">
+          {% for service in group.services %}
+          <li class="service-card">
+            <div class="service-heading">
+              <span class="led led-{{ service.status_class }}"
+                    title="{{ service.status_label }}"
+                    aria-label="{{ service.status_label }}"></span>
+              <span class="service-name">
+                {% if service.has_url %}
+                  <a href="{{ service.url }}">{{ service.name }}</a>
+                {% else %}
+                  {{ service.name }}
+                {% endif %}
+              </span>
             </div>
-        </section>
-        {% endfor %}
+            <p>{{ service.description }}</p>
+          </li>
+          {% endfor %}
+        </ul>
+      </section>
+      {% endfor %}
     </main>
-</body>
+  </body>
 </html>
diff --git a/static/style.css b/static/style.css
index fa96a76..dff61a0 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,21 +1,84 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol, ul {
+    list-style: none;
+}
+blockquote, q {
+    quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content: '';
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+/* ========== End of reset =======================================> */
+
 :root
 {
-    font-family: system-ui, sans-serif;
+    font-family: monospace;
     color-scheme: light dark;
-    color: #202124;
-    background: #f5f6f8;
+    color: #a4b0be;
+    background: black;
+}
+
+body
+{
+    line-height: 1.3;
 }
 
 main
 {
-    max-width: 60rem;
     margin: 3rem auto;
     padding: 0 1rem;
+    text-align: center;
 }
 
 h1
 {
-    margin-bottom: 2rem;
+    font-size: 2rem;
+    margin: 2rem 0;
+}
+
+h2
+{
+    font-size: 1.44rem;
+    margin: 1.44rem 0;
 }
 
 .service-group
@@ -25,29 +88,25 @@ h1
 
 .service-list
 {
-    display: grid;
+    display: flex;
     gap: 1rem;
-    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
 .service-card
 {
-    background: white;
-    border: 1px solid #d9dce1;
-    border-radius: 0.5rem;
-    padding: 1rem;
+    border: 1px solid #57606f;
+    padding: 0.5rem 1rem 1rem 1rem;
+    width: 18rem;
+    height: 6rem;
+    text-align: start;
 }
 
 .service-heading
 {
     align-items: center;
-    display: flex;
-    gap: 0.6rem;
-}
-
-.service-heading h3
-{
-    margin: 0;
+    margin: 0.5rem 0;
 }
 
 .led