diff --git a/static/styles.css b/static/styles.css
index cf151a8..b9031a8 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -21,6 +21,13 @@
 
   /* Peach */
   --link-color: hsl(22, 99%, 52%);
+
+  /* Grid */
+  /* https://ryanmulligan.dev/blog/layout-breakouts/ */
+  --gap: var(--spacing);
+  --full: minmax(var(--gap), 1fr);
+  --content: min(80ch, 100% - var(--gap) * 2);
+  --feature: minmax(0, var(--spacing-4));
 }
 
 @media (prefers-color-scheme: dark) {
@@ -36,20 +43,15 @@
 html {
   margin: 0;
   padding: 0;
-  font-size: 16px;
+  font-size: 100%;
 }
 
 body {
   margin: 0;
-  padding: var(--spacing-3) var(--spacing);
-  display: grid;
-  grid-template-columns: minmax(auto, 1024px);
-  gap: var(--spacing-3) var(--spacing);
+  padding: var(--spacing-3) 0;
   background-color: var(--color-background);
   color: var(--color-text);
   font-family: var(--font-sans-serif);
-  font-size: 100%;
-  justify-content: center;
 }
 
 a {
@@ -88,6 +90,26 @@ td {
 header,
 main,
 footer {
-  background-color: var(--color-background-accent);
-  padding: var(--spacing);
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--full)
+    [feature-start] var(--feature)
+    [content-start] var(--content) [content-end]
+    var(--feature) [feature-end]
+    var(--full) [full-end];
+}
+
+h1,
+h2,
+h3,
+p {
+  grid-column: content;
+}
+
+p {
+  font-size: 1rem;
+}
+
+table {
+  grid-column: feature;
 }
diff --git a/templates/index.html b/templates/index.html
index 23e7905..69eb1e2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,48 +1,63 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="./styles.css">
-</head>
+  <body>
+    <header>
+      <h1>My book list</h1>
+      <p>
+        This page lists all books that I've read since I started tracking them.
+      </p>
+    </header>
 
-<body>
-  <header>
-    <h1>My book list</h1>
-    <p>This page lists all books that I've read since I started tracking them.</p>
-  </header>
-
-  <main>
-    <table>
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Author</th>
-          <th>Year</th>
-          <th>Pages</th>
-          <th>Started</th>
-          <th>Finished</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for book in books %}
-        <tr>
-          <td><a target="_blank" rel="noreferrer noopener" href="https://openlibrary.org/isbn/{{book.isbn}}">{{book.title}}</a></td>
-          <td>{{book.author}}</td>
-          <td>{{book.year}}</td>
-          <td>{{book.pages}}</td>
-          <td>{{book.startDate}}</td>
-          <td>{{book.endDate}}</td>
-        </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </main>
-
-  <footer>
-    &copy2022 Severin Kaderli - <a target="_blank" rel="noreferrer noopener" href="https://git.kaderli.dev/severinkaderli/books.kaderli.dev/commit/{{GIT_COMMIT}}">{{GIT_COMMIT}}</a>
-  </footer>
-</body>
+    <main>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Author</th>
+            <th>Year</th>
+            <th>Pages</th>
+            <th>Started</th>
+            <th>Finished</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for book in books %}
+          <tr>
+            <td>
+              <a
+                target="_blank"
+                rel="noreferrer noopener"
+                href="https://openlibrary.org/isbn/{{book.isbn}}"
+                >{{book.title}}</a
+              >
+            </td>
+            <td>{{book.author}}</td>
+            <td>{{book.year}}</td>
+            <td>{{book.pages}}</td>
+            <td>{{book.startDate}}</td>
+            <td>{{book.endDate}}</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </main>
 
+    <footer>
+      <p>
+        &copy2022 Severin Kaderli -
+        <a
+          target="_blank"
+          rel="noreferrer noopener"
+          href="https://git.kaderli.dev/severinkaderli/books.kaderli.dev/commit/{{GIT_COMMIT}}"
+          >{{GIT_COMMIT}}</a
+        >
+      </p>
+    </footer>
+  </body>
 </html>
