diff --git a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Renderer.fusion b/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Renderer.fusion
index 972a32ac..a0680d85 100644
--- a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Renderer.fusion
+++ b/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Renderer.fusion
@@ -1,6 +1,4 @@
-prototype(Neos.NeosIo:PostRenderer) < prototype(Neos.Fusion:Template) {
-    templatePath = 'resource://Neos.NeosIo.Blog/Private/Fusion/Components/Post.Renderer.html'
-
+prototype(Neos.NeosIo:PostRenderer) < prototype(Neos.Fusion:Component) {
     node = ${node}
     datePublished = ${q(node).property('datePublished')}
     title = ${q(node).property('title')}
@@ -15,17 +13,80 @@ prototype(Neos.NeosIo:PostRenderer) < prototype(Neos.Fusion:Template) {
         nodePath = 'main'
     }
 
-    backToListButton = Neos.NeosIo:Button {
-        style = 'btn--solidPrimary'
-        buttonLabel = 'Back to list'
-        alignment = 'Right'
-        link = Neos.Neos:NodeUri {
+    @private {
+        overviewUri = Neos.Neos:NodeUri {
             node = ${q(documentNode).parent().get(0)}
             absolute = true
         }
-        @process.contentElementWrapping >
+        latest = ${q(site).find('[instanceof Neos.NeosIo:Post]').remove(node).slice(0, 6).sort('datePublished', 'DESC').get()}
     }
 
-    latest = ${q(site).find('[instanceof Neos.NeosIo:Post]').remove(node).slice(0, 6).sort('datePublished', 'DESC').get()}
-}
+    renderer = afx`
+        <article>
+            <Neos.Neos:ContentElementWrapping>
+                <header>
+                    <h1 class="u-alignCenter">
+                        <Neos.Neos:Editable property="title" block={false} />
+                    </h1>
+
+                    <p class="u-alignCenter">
+                        <Neos.Neos:Editable property="summary" block={false} />
+                    </p>
+                    <p class="u-alignCenter u-microCopy">
+                        <time datetime={Date.format(props.datePublished, 'c')}>
+                            {Date.formatCldrDate(props.datePublished)}
+                        </time>
+                        <span @if={props.author}>
+                            &nbsp;– Written by <span>{author}</span>
+                        </span>
+                    </p>
+                    <hr />
+                </header>
+            </Neos.Neos:ContentElementWrapping>
+
+            <main class="postBody">
+                {props.content}
+            </main>
 
+            <footer class="post__footer">
+                <hr />
+                <section class="u-mt1/1">
+                    <div class="u-pt1/1" @if={props.relatedDocuments}>
+                        <h3>Related</h3>
+                        <ul class="nav nav--stacked u-mb1/2">
+                            <Neos.Fusion:Loop items={props.relatedDocuments} itemName="relatedDocument">
+                                <li class="u-mb1/2">
+                                    <Neos.Neos:NodeLink node={relatedDocument} />
+                                </li>
+                            </Neos.Fusion:Loop>
+                        </ul>
+                    </div>
+
+                    <div class="u-pt1/1">
+                        <h3>Latest Posts</h3>
+                        <ul class="nav nav--stacked u-mb1/2">
+                            <Neos.Fusion:Loop items={private.latest} itemName="post">
+                                <li class="u-mb1/2" title={String.stripTags(post.properties.summary)}>
+                                    <div class="h5">
+                                        {Date.formatCldrDate(post.properties.datePublished)}
+                                        -
+                                        <Neos.Neos:NodeLink node={post} />
+                                    </div>
+                                </li>
+                            </Neos.Fusion:Loop>
+                        </ul>
+
+                        <div class="u-alignRight">
+                            <Neos.NeosIo:Component.Button
+                                color="btn--solidPrimary"
+                                uri={private.overviewUri}
+                            >
+                                Back to list
+                            </Neos.NeosIo:Component.Button>
+                        </div>
+                    </div>
+                </section>
+            </footer>
+        </article>
+    `
+}
diff --git a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Renderer.html b/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Renderer.html
deleted file mode 100644
index fec32849..00000000
--- a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Renderer.html
+++ /dev/null
@@ -1,65 +0,0 @@
-{namespace neos=Neos\Neos\ViewHelpers}{namespace media=Neos\Media\ViewHelpers}
-<article>
-	<header>
-		<neos:contentElement.wrap node="{node}">
-			<neos:contentElement.editable property="title" tag="h1" additionalAttributes="{itemprop: 'title'}" class="u-alignCenter" />
-
-			<neos:contentElement.editable property="summary" tag="p" class="u-alignCenter" additionalAttributes="{itemprop: 'description'}"/>
-			<p class="u-alignCenter u-microCopy">
-				<time datetime="{datePublished -> f:format.date(format: 'c')}" itemprop="datePublished">{datePublished
-					-> f:format.date(localeFormatType: 'date', forceLocale: true)}
-				</time>
-				<f:if condition="{author}">
-					– Written by
-					<span itemprop="author" itemscope="" itemtype="https://schema.org/Person"><span itemprop="name">{author}</span></span>
-				</f:if>
-				<f:if condition="{image}">
-					<meta itemprop="image" content="{media:uri.image(image: image, maximumWidth: 720, maximumHeight: 500, allowCropping: 1, allowUpScaling: 1)}"/>
-				</f:if>
-			</p>
-
-			<hr />
-
-		</neos:contentElement.wrap>
-	</header>
-
-	<main itemprop="articleBody" class="postBody">
-		{content -> f:format.raw()}
-	</main>
-
-	<footer class="post__footer">
-		<hr />
-
-		<section class="u-mt1/1">
-
-			<f:if condition="{relatedDocuments}">
-				<div class="u-pt1/1">
-					<h3>Related</h3>
-					<ul class="nav nav--stacked u-mb1/2">
-						<f:for each="{relatedDocuments}" as="relatedDocument">
-							<li class="u-mb1/2">
-								<neos:link.node node="{relatedDocument}"/>
-							</li>
-						</f:for>
-					</ul>
-				</div>
-			</f:if>
-
-			<div class="u-pt1/1">
-				<h3>Latest Posts</h3>
-				<ul class="nav nav--stacked u-mb1/2">
-					<f:for each="{latest}" as="post">
-                        <li class="u-mb1/2" title="{post.properties.summary -> f:format.stripTags()}">
-                            <div class="h5">
-                                {post.properties.datePublished -> f:format.date(localeFormatType: 'date', forceLocale: true)} -
-                                <neos:link.node node="{post}"/>
-                            </div>
-                        </li>
-					</f:for>
-				</ul>
-
-				{backToListButton -> f:format.raw()}
-			</div>
-		</section>
-	</footer>
-</article>
diff --git a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Short.fusion b/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Short.fusion
index 32386142..de80405e 100644
--- a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Short.fusion
+++ b/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Short.fusion
@@ -1,4 +1,22 @@
 prototype(Neos.NeosIo:Post.Short) < prototype(Neos.NeosIo:PostRenderer) {
-    templatePath = 'resource://Neos.NeosIo.Blog/Private/Fusion/Components/Post.Short.html'
     content >
+
+    renderer >
+    renderer = afx`
+        <Neos.Neos:NodeLink node={node} attributes.class="u-linkReset">
+            <time class="u-microCopy">
+                {Date.formatCldrDate(props.datePublished)}
+            </time>
+            <h3 class="u-mt0 u-mb1/2 u-brandColor-primary">
+                {String.stripTags(props.title)}
+            </h3>
+            <div class="media">
+                <div class="media__content">
+                    <p>
+                        {props.summary}
+                    </p>
+                </div>
+            </div>
+        </Neos.Neos:NodeLink>
+    `
 }
diff --git a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Short.html b/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Short.html
deleted file mode 100644
index a252aeeb..00000000
--- a/DistributionPackages/Neos.NeosIo.Blog/Resources/Private/Fusion/Components/Post.Short.html
+++ /dev/null
@@ -1,49 +0,0 @@
-{namespace neos=Neos\Neos\ViewHelpers}
-{namespace media=Neos\Media\ViewHelpers}
-<neos:link.node node="{node}" class="u-linkReset">
-    <div class="u-microCopy">{datePublished -> f:format.date(localeFormatType: 'date', forceLocale: true)}</div>
-    <h3 class="u-mt0 u-mb1/2 u-brandColor-primary">{title -> f:format.stripTags()}</h3>
-
-    <div class="media">
-        <f:if condition="{image}">
-            <f:if condition="{neos:rendering.inBackend()}">
-                <f:then>
-                    <img
-                        alt="{title -> f:format.stripTags()}"
-                        class="media__img media__img--scaled u-mb1/1"
-                        width="{image.width}"
-                        height="{image.height}"
-                        loading="lazy"
-                        src=" {media:uri.image(image: image, width: 700, height: 175, allowCropping: true)}"
-                        srcset="
-                            {media:uri.image(image: image, width: 1000, height: 250, allowCropping: true)} 1920w,
-                            {media:uri.image(image: image, width: 700, height: 175, allowCropping: true)} 1280w,
-                            {media:uri.image(image: image, width: 400, height: 100, allowCropping: true)} 658w,
-                            {media:uri.image(image: image, width: 200, height: 50, allowCropping: true)}"
-                    />
-                </f:then>
-                <f:else>
-                    <img
-                        alt="{title -> f:format.stripTags()}"
-                        class="media__img media__img--scaled u-mb1/1"
-                        width="{image.width}"
-                        height="{image.height}"
-                        loading="lazy"
-                        src="{media:uri.image(image: image, width: 700, height: 175, allowCropping: true)}"
-                        data-image-srcset="
-                            {media:uri.image(image: image, width: 1000, height: 250, allowCropping: true)} 1920w,
-                            {media:uri.image(image: image, width: 700, height: 175, allowCropping: true)} 1280w,
-                            {media:uri.image(image: image, width: 400, height: 100, allowCropping: true)} 658w,
-                            {media:uri.image(image: image, width: 200, height: 50, allowCropping: true)}"
-                    />
-                </f:else>
-            </f:if>
-
-        </f:if>
-        <div class="media__content">
-            <p>
-                {summary -> f:format.raw()}
-            </p>
-        </div>
-    </div>
-</neos:link.node>