diff --git a/style.css b/style.css
index 4b26b17..188e013 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,7 @@
 @import "/ui/field.css";
 @import "/ui/layout.css";
 @import "/ui/round.css";
+@import "/ui/session-list.css";
 @import "/ui/session-view.css";
 
 /* || COLORS
diff --git a/ui/button.css b/ui/button.css
index ac65745..ec295ec 100644
--- a/ui/button.css
+++ b/ui/button.css
@@ -16,4 +16,8 @@
     color: var(--color-focus-background);
     background-color: var(--color-focus-accent);
   }
+
+  &.-slim {
+    padding: 0.5em;
+  }
 }
\ No newline at end of file
diff --git a/ui/session-list.css b/ui/session-list.css
new file mode 100644
index 0000000..90c5741
--- /dev/null
+++ b/ui/session-list.css
@@ -0,0 +1,119 @@
+.wb-session-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  min-height: 100%;
+
+  ol,
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .item {
+    display: grid;
+    grid-template-areas:
+      "their-name our-name"
+      "their-points our-points"
+      "actions actions";
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, min-content);
+    gap: 1em 2em;
+
+    padding: 1em;
+    border-radius: 5px;
+    margin: 1em;
+
+    >.theirname {
+      font-weight: bold;
+      grid-area: their-name;
+      text-align: right;
+    }
+
+    >.ourname {
+      font-weight: bold;
+      grid-area: our-name;
+      text-align: left;
+    }
+
+    >.theirpoints {
+      grid-area: their-points;
+      text-align: right;
+    }
+
+    >.ourpoints {
+      grid-area: our-points;
+      text-align: left;
+    }
+
+    >.actions {
+      grid-area: actions;
+      display: flex;
+      justify-content: space-between;
+      gap: 1em;
+
+      >* {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+.none {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 1em 1em 0;
+  margin: 0;
+  min-height: 100%;
+  justify-content: end;
+
+  >.item {
+    display: grid;
+    grid-template-areas:
+      "their-name our-name"
+      "their-points our-points"
+      "actions actions";
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(3, min-content);
+    gap: 1em 2em;
+
+    padding: 1em;
+    border-radius: 5px;
+    margin-bottom: 1em;
+
+    >.theirname {
+      font-weight: bold;
+      grid-area: their-name;
+      text-align: right;
+    }
+
+    >.ourname {
+      font-weight: bold;
+      grid-area: our-name;
+      text-align: left;
+    }
+
+    >.theirpoints {
+      grid-area: their-points;
+      text-align: right;
+    }
+
+    >.ourpoints {
+      grid-area: our-points;
+      text-align: left;
+    }
+
+    >.actions {
+      grid-area: actions;
+      display: flex;
+      justify-content: space-between;
+      gap: 1em;
+
+      >* {
+        flex-grow: 1;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/ui/session_list.js b/ui/session_list.js
index 22b538f..79ca962 100644
--- a/ui/session_list.js
+++ b/ui/session_list.js
@@ -5,33 +5,36 @@ import Session from "/models/session.js";
 export default class SessionList {
   /** @param {{ attrs: { models: Session[] } }} param The sessions to show. */
   view({attrs: { models, onSelect } }) {
-    return m("section", [
-      m(m.route.Link, {
-        href: "/",
-        selector: "button.wb-button",
-        options: {
-          state: { newSession: true },
-        },
-      }, "Neia Satz"),
+    return m("section.wb-session-list", [
       m("ol", [
-        models.map((s) => m("li", [
-          m(
-            m.route.Link,
-            {
-              href: "/",
-              selector: "button.wb-button",
-              params: { session: s.id },
-              onclick: () => onSelect(s),
-            },
-            [
-              m("p", "•".repeat(s.result.theirPoints)),
-              m("p", s.theirTeam !== "" ? s.theirTeam : "Se"),
-              m("p", s.ourTeam !== "" ? s.ourTeam : "Mia"),
-              m("p", "•".repeat(s.result.ourPoints)),
-            ],
+        models.map((s) => m("li.item._alternate._apply", [
+          m("span.theirname", s.theirTeam !== "" ? s.theirTeam : "Se"),
+          m("span.ourname", s.ourTeam !== "" ? s.ourTeam : "Mia"),
+          m("span.theirpoints", "•".repeat(s.result.theirPoints)),
+          m("span.ourpoints", "•".repeat(s.result.ourPoints)),
+          m("div.actions",
+            m(
+              m.route.Link,
+              {
+                href: "/",
+                selector: "button.wb-button.-slim._positioned",
+                params: { session: s.id },
+                onclick: () => onSelect(s),
+              },
+              "spieln",
+            ),
           ),
-        ]))
-      ])
+        ])),
+      ]),
+      m("footer.wb-box._sticky-bottom._alternate._apply",
+        m(m.route.Link, {
+          href: "/",
+          selector: "button.wb-button._positioned",
+          options: {
+            state: { newSession: true },
+          },
+        }, "Neia Satz"),
+      ),
     ]);
   }
 }