diff --git a/templates/receipt-list.html.tera b/templates/receipt-list.html.tera
index e6c36f4..e831834 100644
--- a/templates/receipt-list.html.tera
+++ b/templates/receipt-list.html.tera
@@ -1,8 +1,12 @@
 {% extends "base" %} {% block head %}
 <title>Receipts</title>
 <style>
+  article {
+    text-align: center;
+  }
+
   .receipt-card {
-    max-width: 20%;
+    max-width: 250px;
     margin: 1em;
   }
 
@@ -36,22 +40,23 @@
     Receipt</sl-button
   >
 </p>
-{% for receipt in receipts -%}
-<sl-card class="receipt-card">
-  <img
-    slot="image"
-    src="/receipts/{{ receipt.id }}/view/{{ receipt.filename }}"
-    alt="Receipt {{ receipt.id }}"
-  />
-  <a href="/receipts/{{ receipt.id }}">
-    <div class="vendor">{{ receipt.vendor }}</div>
-    <div class="amount">$ {{ receipt.amount }}</div>
-  </a>
-  <div class="date">
-    {{ receipt.date | date(format="%A %_d %B %Y") }}
-  </div>
-</sl-card>
-{% endfor %} {% endblock %} {% block scripts %}
+<article>
+  {% for receipt in receipts -%}
+  <sl-card class="receipt-card">
+    <img
+      slot="image"
+      src="/receipts/{{ receipt.id }}/view/{{ receipt.filename }}"
+      alt="Receipt {{ receipt.id }}"
+    />
+    <a href="/receipts/{{ receipt.id }}">
+      <div class="vendor">{{ receipt.vendor }}</div>
+      <div class="amount">$ {{ receipt.amount }}</div>
+    </a>
+    <div class="date">{{ receipt.date | date(format="%A %_d %B %Y") }}</div>
+  </sl-card>
+  {% endfor %}
+</article>
+{% endblock %} {% block scripts %}
 <script src="/static/receipt-list.js"></script>
 <script>
   (() => {