diff --git a/packages/docusaurus-playground/rlog/2019-07-19-p2p-data-sync-for-mobile.mdx b/packages/docusaurus-playground/rlog/2019-07-19-p2p-data-sync-for-mobile.mdx
index d3493e6..f106672 100644
--- a/packages/docusaurus-playground/rlog/2019-07-19-p2p-data-sync-for-mobile.mdx
+++ b/packages/docusaurus-playground/rlog/2019-07-19-p2p-data-sync-for-mobile.mdx
@@ -1,6 +1,7 @@
 ---
 title: Design better data tables
-description: A research log. Reliable and decentralized, pick two.
+subtitle: A research log. Reliable and decentralized, pick two.
+descrption: Description Test
 date: 2023-04-24 12:00:00
 authors:
   - name: amir
@@ -15,6 +16,8 @@ toc_min_heading_level: 2
 toc_max_heading_level: 5
 ---
 
+Summary Test
+
 <!--truncate-->
 
 Together with decanus, I've been working on the problem of data sync lately.
diff --git a/packages/docusaurus-playground/rlog/2019-08-02-vac-overview.mdx b/packages/docusaurus-playground/rlog/2019-08-02-vac-overview.mdx
index a0568c1..513acc9 100644
--- a/packages/docusaurus-playground/rlog/2019-08-02-vac-overview.mdx
+++ b/packages/docusaurus-playground/rlog/2019-08-02-vac-overview.mdx
@@ -10,10 +10,10 @@ categories: research
 tags: ['Something']
 ---
 
-<!--truncate-->
-
 Vac is a **modular peer-to-peer messaging stack, with a focus on secure messaging**. What does that mean? Let's unpack it a bit.
 
+<!--truncate-->
+
 ## Basic terms
 
 _messaging stack_. While the initial focus is on [data sync](https://vac.dev/p2p-data-sync-for-mobile), we are concerned with all layers in the stack. That means all the way from underlying transports, p2p overlays and routing, to initial trust establishment and semantics for things like group chat. The ultimate goal is to give application developers the tools they need to provide secure messaging for their users, so they can focus on their domain expertise.
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss
index 7a89922..141f154 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss
+++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Info/styles.module.scss
@@ -9,6 +9,7 @@
 
 .blogContainer {
   margin-top: 8px !important;
+  margin-bottom: 16px !important;
 }
 
 .container > div {
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx
new file mode 100644
index 0000000..a3798b4
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/index.tsx
@@ -0,0 +1,16 @@
+import { Typography } from '@acid-info/lsd-react'
+import clsx from 'clsx'
+import React from 'react'
+import styles from './styles.module.scss'
+
+type SubtitleProps = {
+  content: string
+}
+
+export const Subtitle = ({ content }: SubtitleProps): JSX.Element => {
+  return (
+    <Typography variant="h6" className={clsx(styles.blogPostSubtitle)}>
+      {content}
+    </Typography>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss
new file mode 100644
index 0000000..d7cc4a8
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Subtitle/styles.module.scss
@@ -0,0 +1,13 @@
+@use '../../../../css/utils';
+@use '../../../../css/lsd';
+
+.blogPostSubtitle {
+  margin-top: 12px;
+}
+
+@include utils.responsive('lg', 'down') {
+  .blogPostSubtitle {
+    margin-top: 4px;
+    @include lsd.typography('body1');
+  }
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss
index 8e3d772..2e2ba7a 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss
+++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/Title/styles.module.scss
@@ -1,22 +1,8 @@
 @use '../../../../css/utils';
 @use '../../../../css/lsd';
 
-.blogDescription {
-  margin-top: 16px;
-  @include lsd.typography('body2');
-}
-
-.blogPostDescription {
-  margin-top: 12px;
-}
-
 @include utils.responsive('lg', 'down') {
   .blogPostTitle {
     @include lsd.typography('h3');
   }
-
-  .blogPostDescription {
-    margin-top: 4px;
-    @include lsd.typography('body1');
-  }
 }
diff --git a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx
index b7bc2ad..fd449a3 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/BlogPostItem/Header/index.tsx
@@ -8,6 +8,7 @@ import { BreadcrumbsBase } from '../../DocBreadcrumbs/index'
 import { Typography } from '@acid-info/lsd-react'
 import styles from './Title/styles.module.scss'
 import clsx from 'clsx'
+import { Subtitle } from './Subtitle'
 
 export default function BlogPostItemHeader(): JSX.Element {
   const {
@@ -19,17 +20,6 @@ export default function BlogPostItemHeader(): JSX.Element {
   const plugin = useBlogPluginData()
   const routeBasePath = plugin.routeBasePath ?? '/blog'
 
-  const _description = (
-    <Typography
-      variant="h6"
-      className={clsx(
-        isBlogPostPage ? styles.blogPostDescription : styles.blogDescription,
-      )}
-    >
-      {frontMatter.description}
-    </Typography>
-  )
-
   return (
     <header>
       {isBlogPostPage && (
@@ -49,9 +39,10 @@ export default function BlogPostItemHeader(): JSX.Element {
         />
       )}
       <BlogPostItemHeaderTitle />
-      {frontMatter?.description && isBlogPostPage && _description}
+      {(frontMatter?.subtitle as string) && isBlogPostPage && (
+        <Subtitle content={frontMatter?.subtitle as string} />
+      )}
       <BlogPostItemHeaderInfo />
-      {frontMatter?.description && !isBlogPostPage && _description}
       {isBlogPostPage && <hr className="blog-divider" />}
     </header>
   )