diff --git a/themes/coopcloud.tech/assets/scss/main.scss b/themes/coopcloud.tech/assets/scss/main.scss
index 6325cb5..20a7fbd 100644
--- a/themes/coopcloud.tech/assets/scss/main.scss
+++ b/themes/coopcloud.tech/assets/scss/main.scss
@@ -185,3 +185,17 @@ footer .separator {
         background-position: calc(100% - 20px) ;
     }
 }
+
+.blog-archive {
+    padding: 3rem 3rem;
+    h3 {
+        padding-bottom: 1em;
+        text-transform: uppercase;
+    }
+}
+
+.blog-listing {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 2rem;
+}
\ No newline at end of file
diff --git a/themes/coopcloud.tech/layouts/_default/list.html b/themes/coopcloud.tech/layouts/_default/list.html
index e7e09f1..fa71c1f 100644
--- a/themes/coopcloud.tech/layouts/_default/list.html
+++ b/themes/coopcloud.tech/layouts/_default/list.html
@@ -1,12 +1,19 @@
 {{ define "main" }}
-<h1>{{ .Title }}</h1>
-{{ range .Pages.ByPublishDate.Reverse }}
-<p>
-    <h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-    {{/* partial "metadata.html" . */}}
-    <a class="summary" href="{{ .RelPermalink }}">
-        <p>{{ .Summary }}</p>
-    </a>
-</p>
-{{ end }}
+    <div class="blog-archive">
+        <h1 class="title is-uppercase is-size-2">BLOG</h1>
+        <hr>
+        {{ range .Pages.ByPublishDate.Reverse }}
+            <div class="blog-listing">
+                <img src="{{ with .Params.image }}{{ . }}{{ end }}" alt="">
+                <div class="text">
+                    <h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+                    {{/* partial "metadata.html" . */}}
+                    <p class="summary block has-text-weight-light is-size-4">
+                        {{ .Summary }}
+                    </p>
+                </div>
+            </div>
+            <hr>
+        {{ end }}
+    </div>
 {{ end }}