diff --git a/app/views/blog/bits.scala b/app/views/blog/bits.scala
index ea637b5945..0f5317466d 100644
--- a/app/views/blog/bits.scala
+++ b/app/views/blog/bits.scala
@@ -9,27 +9,21 @@ import controllers.routes
 
 object bits {
 
-  def layout(title: String, openGraph: Option[lila.app.ui.OpenGraph] = None, moreJs: Frag = emptyFrag)(body: Modifier*)(implicit ctx: Context) =
-    views.html.base.layout(
-      title = title,
-      moreCss = cssTag("blog"),
-      moreJs = frag(prismicJs, moreJs),
-      openGraph = openGraph,
-      csp = defaultCsp.withPrismic(isGranted(_.Prismic)).some
-    ) {
-        main(cls := "blog page-small box box-pad")(body)
-      }
-
-  def metas(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
-    div(cls := "meta")(
-      doc.getDate("blog.date").map { date =>
-        span(cls := "text", dataIcon := "p")(semanticDate(date.value.toDateTimeAtStartOfDay))
-      },
-      doc.getText("blog.author").map { author =>
-        span(cls := "text", dataIcon := "r")(richText(author))
-      },
-      doc.getText("blog.category").map { categ =>
-        span(cls := "text", dataIcon := "t")(categ)
-      }
+  private[blog] def metas(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
+    div(cls := "meta-headline")(
+      div(cls := "meta")(
+        doc.getDate("blog.date").map { date =>
+          span(cls := "text", dataIcon := "p")(semanticDate(date.value.toDateTimeAtStartOfDay))
+        },
+        doc.getText("blog.author").map { author =>
+          span(cls := "text", dataIcon := "r")(richText(author))
+        },
+        doc.getText("blog.category").map { categ =>
+          span(cls := "text", dataIcon := "t")(categ)
+        }
+      ),
+      strong(cls := "headline")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw))
     )
+
+  private[blog] def csp(implicit ctx: Context) = defaultCsp.withPrismic(isGranted(_.Prismic)).some
 }
diff --git a/app/views/blog/index.scala b/app/views/blog/index.scala
index 93fbed11c8..360db8a9a1 100644
--- a/app/views/blog/index.scala
+++ b/app/views/blog/index.scala
@@ -10,37 +10,43 @@ import controllers.routes
 object index {
 
   def apply(pager: Paginator[io.prismic.Document])(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
-    bits.layout(title = "Blog", moreJs = infiniteScrollTag)(
-      div(cls := "box__top")(
-        h1("Lichess Official Blog"),
-        a(cls := "atom", href := routes.Blog.atom, dataIcon := "3")
-      ),
-      div(cls := "list infinitescroll")(
-        pager.currentPageResults.map { doc =>
-          st.article(cls := "paginated")(
-            doc.getText("blog.title").map { title =>
-              h2(a(href := routes.Blog.show(doc.id, doc.slug, prismic.maybeRef))(title))
-            },
-            bits.metas(doc),
-            strong(cls := "shortlede")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw)),
-            doc.getImage("blog.image", "main").map { img =>
-              div(cls := "illustration")(
-                a(href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef))(st.img(src := img.url))
-              )
-            },
-            div(cls := "body")(
-              doc.getStructuredText("blog.body").map { body =>
-                raw(lila.blog.BlogApi.extract(body))
-              },
-              p(cls := "more")(
-                a(cls := "button", href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef), dataIcon := "G")(
-                  " Continue reading this post"
+    views.html.base.layout(
+      title = "Blog",
+      moreCss = cssTag("blog"),
+      csp = bits.csp,
+      moreJs = infiniteScrollTag
+    )(
+        main(cls := "blog list page-small box")(
+          div(cls := "box__top")(
+            h1("Lichess Official Blog"),
+            a(cls := "atom", href := routes.Blog.atom, dataIcon := "3")
+          ),
+          div(cls := "list infinitescroll")(
+            pager.currentPageResults.map { doc =>
+              st.article(cls := "paginated")(
+                doc.getText("blog.title").map { title =>
+                  h2(a(href := routes.Blog.show(doc.id, doc.slug, prismic.maybeRef))(title))
+                },
+                bits.metas(doc),
+                doc.getImage("blog.image", "main").map { img =>
+                  div(cls := "illustration")(
+                    a(href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef))(st.img(src := img.url))
+                  )
+                },
+                div(cls := "body")(
+                  doc.getStructuredText("blog.body").map { body =>
+                    raw(lila.blog.BlogApi.extract(body))
+                  },
+                  p(cls := "more")(
+                    a(cls := "button", href := routes.Blog.show(doc.id, doc.slug, ref = prismic.maybeRef), dataIcon := "G")(
+                      " Continue reading this post"
+                    )
+                  )
                 )
               )
-            )
+            },
+            pagerNext(pager, np => routes.Blog.index(np, none).url)
           )
-        },
-        pagerNext(pager, np => routes.Blog.index(np, none).url)
+        )
       )
-    )
 }
diff --git a/app/views/blog/show.scala b/app/views/blog/show.scala
index 48f7f0fadf..54abcef7ef 100644
--- a/app/views/blog/show.scala
+++ b/app/views/blog/show.scala
@@ -9,7 +9,7 @@ import controllers.routes
 object show {
 
   def apply(doc: io.prismic.Document)(implicit ctx: Context, prismic: lila.blog.BlogApi.Context) =
-    bits.layout(
+    views.html.base.layout(
       title = s"${~doc.getText("blog.title")} | Blog",
       moreJs = jsAt("compiled/embed-analyse.js"),
       openGraph = lila.app.ui.OpenGraph(
@@ -18,15 +18,16 @@ object show {
         title = ~doc.getText("blog.title"),
         url = s"$netBaseUrl${routes.Blog.show(doc.id, doc.slug).url}",
         description = ~doc.getText("blog.shortlede")
-      ).some
+      ).some,
+      moreCss = cssTag("blog"),
+      csp = bits.csp
     )(
-        div(id := doc.id, cls := s"post ${doc.getText("blog.cssClasses")}")(
+        main(cls := s"blog page-small box post ${~doc.getText("blog.cssClasses")}")(
           h1(
             a(href := routes.Blog.index(), dataIcon := "I", cls := "text"),
             doc.getText("blog.title")
           ),
           bits.metas(doc),
-          strong(cls := "shortlede")(doc.getHtml("blog.shortlede", prismic.linkResolver).map(raw)),
           doc.getImage("blog.image", "main").map { img =>
             div(cls := "illustration")(st.img(src := img.url))
           },
diff --git a/ui/site/css/_blog.scss b/ui/site/css/_blog.scss
index 7747c6f9d4..0e7cd0cdf9 100644
--- a/ui/site/css/_blog.scss
+++ b/ui/site/css/_blog.scss
@@ -3,20 +3,32 @@
     font-size: 2.6em;
     color: $c-accent;
   }
-  .meta {
+  .meta-headline {
+    @extend %box-shadow;
+    background: $c-bg-zebra;
+    padding: 1.4rem 0 .4rem 0;
     text-align: center;
-    margin: 20px 0;
   }
-  .meta span {
-    display:inline-block;
-    margin-right: 10px;
+  .meta {
+    span {
+      display:inline-block;
+      margin-right: 2em;
+    }
+    margin-bottom: 1.4rem;
+  }
+  .headline {
+    display: block;
+    font-size: 1.3em;
+    font-style: italic;
+    font-weight: normal;
   }
   .illustration,
   [data-oembed] {
     text-align: center;
   }
   .illustration img {
-    max-height: 300px;
+    max-height: 24em;
+    margin: 3em 0;
   }
   img,
   .block-img {
@@ -29,20 +41,18 @@
   twitter-widget {
     margin: 30px auto!important;
   }
-  .post.no-icon .illustration {
+  &.post.no-icon .illustration {
     display: none;
   }
-  .shortlede {
-    display: block;
-    text-align: center;
-    font-size: 1.4em;
-    font-weight: normal;
-    font-style: italic;
-    margin: 20px 0;
+  &.post h1 {
+    a {
+      font-size: .6em;
+      vertical-align: middle;
+    }
   }
   .body {
     font-size: 1.2em;
-    margin: 20px 0 60px 0;
+    margin: 0 var(--box-padding) 4em var(--box-padding);
     cursor: initial;
     line-height: 1.8;
     strong {
@@ -88,18 +98,19 @@
     }
   }
 
-  .list {
+  &.list {
     article {
-      margin: 1em 0 5em 0;
+      margin: 3em 0 7em 0;
     }
     h2 {
       text-align: center;
-      border-bottom: $border;
+      margin-bottom: 1rem;
     }
     .meta {
       text-align: center;
     }
     .more {
+      margin-top: 2em;
       text-align: center;
     }
   }