diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..18616d3
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,8 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+charset = utf-8
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..a0ae429
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,73 @@
+:root {
+  --spacing: 12px;
+  --spacing-half: calc(0.5 * var(--spacing));
+  --spacing-2: calc(2 * var(--spacing));
+  --spacing-4: calc(4 * var(--spacing));
+
+  --font-sans-serif: sans-serif;
+
+  --color-background: #e5e5e5;
+  --color-text: #191919;
+  --link-color: #ffff00;
+}
+
+@media (prefers-color-scheme: DARK) {
+  :root {
+    --color-background: #191919;
+    --color-background-accent: #2b2b2b;
+    --color-text: #e5e5e5;
+    --link-color: #ffff00;
+  }
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+}
+
+body {
+  padding: 0 var(--spacing);
+  display: grid;
+  grid-template-columns: 1fr min(1024px, 100%) 1fr;
+  gap: var(--spacing-4) var(--spacing);
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-sans-serif);
+  font-size: 100%;
+}
+
+header,
+main,
+footer {
+  grid-column: 2;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--color-text);
+}
+
+thead {
+  border-bottom: 1px solid var(--color-text);
+  background: var(--color-background-accent);
+}
+
+tbody tr:nth-child(even) {
+  background: var(--color-background-accent);
+}
+
+tfoot {
+  border-bottom: 1px solid var(--color-text);
+}
+
+th {
+  text-align: left;
+}
+
+th,
+td {
+  border-spacing: 0;
+  padding: var(--spacing-half);
+}
diff --git a/templates/index.html b/templates/index.html
index cd9254d..ca7739b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,47 +2,47 @@
 <html>
 
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style></style>
+  <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>
+  <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>{{book.title}}</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>
+  <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>{{book.title}}</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>
-        Hello World! {{GIT_COMMIT}}
-    </footer>
+  <footer>
+    &copy2022 Severin Kaderli - {{GIT_COMMIT}}
+  </footer>
 </body>
 
 </html>
