diff --git a/theme/static/src/scss/index.scss b/theme/static/src/scss/index.scss
index 4c2e372..216f64d 100644
--- a/theme/static/src/scss/index.scss
+++ b/theme/static/src/scss/index.scss
@@ -65,3 +65,7 @@ p a {
     background-color: transparentize($brand-orange, 0.2);
   }
 }
+
+.category-item {
+  padding: 1px 0;
+}
diff --git a/theme/templates/category.html b/theme/templates/category.html
index 86d94e9..ce287d5 100644
--- a/theme/templates/category.html
+++ b/theme/templates/category.html
@@ -30,14 +30,12 @@
     <section>
       <div class="container">
         <div class="row no-gutter">
-          {% for article in dates %}
-            <div class="media">
-              <div class="media-body">
-                <a href="{{ article.url }}">
-                  <h3 class="media-heading">{{ article.title }}</h3>
-                </a>
-                <p>{{ article.summary|striptags|e }}</p>
-              </div>
+          {% for article in articles|sort(attribute="title") %}
+            <div class="category-item">
+              <a href="{{ article.url }}">
+                <h3>{{ article.title }}</h3>
+              </a>
+              <p>{{ article.summary|striptags|e }}</p>
             </div>
           {% endfor %}
         </div>