diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index 3a2e2e7..b71522a 100644
--- a/src/_layouts/base.njk
+++ b/src/_layouts/base.njk
@@ -5,11 +5,11 @@
   <!-- The order of elements in the head follows recommendations by Harry Roberts. learn more here: https://www.youtube.com/watch?v=MHyAOZ45vnU -->
 
   <head>
-    <!-- charset/http-equiv/viewport -->
+    <!-- 1 charset/viewport -->
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <!-- title -->
+    <!-- 2 title -->
     <title>
       {% if discover.title %}
         {{ discover.title }}
@@ -20,77 +20,26 @@
       {% endif %}
     </title>
 
-    <!-- 4 synchronous js  -->
-    <!-- load theme toggle first to avoid color flashing on page load and inline render blocking js  -->
-    {% set jsthemetoggle %}{% include "theme-toggle-inline.js" %}{% endset %}
+    <base href="{{ page.url }}" />
 
-    <script>
-      // prettier-ignore
-      {{ jsthemetoggle | jsmin | safe }}
-    </script>
+    <!-- 3 synchronous js  -->
+    {% include "head/js-inline.njk" %}
 
-    <!--  inline base schema -->
-    {% include "schemas/base-schema.njk" %}
+    <!-- 4 schema settings -->
+    {% include "head/schema.njk" %}
 
-    <!--  inline blogpost schema  -->
-    {% if schema == 'blog' %}{%- include "schemas/blogpost-schema.njk" -%}{% endif %}
+    <!-- 5 CSS  -->
+    <!-- <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" /> -->
+    {% include "head/css-inline.njk" %}
 
-    <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
+    <!-- 6 preloads  -->
+    {% include "head/preloads.njk" %}
 
-    <!-- preloads -->
-    <link
-      rel="preload"
-      href="/assets/fonts/figtree/figtree-variable[wght].woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
+    <!-- 7 meta tags, icons, open graph etc.  -->
+    {% include "head/meta-info.njk" %}
 
-    <link
-      rel="preload"
-      href="/assets/fonts/redhat/red-hat-display-v7-latin-900.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-
-    <!-- preloads in page data -->
-    {%- if preloads -%}
-      <!-- prettier-ignore -->
-      <link rel="preload"
-            href="{{ preloads.href }}"
-            as="{{ preloads.as }}"
-            {% if preloads.type %}type={{ preloads.type }}{% endif %}{% if preloads.imagesrcset %}imagesrcset="{{ preloads.imagesrcset }}"{% endif %}
-            {% if preloads.crossorigin %}crossorigin{% endif %} />
-    {% endif %}
-
-    <!-- defered js  -->
-
-    {% if masonry %}
-      <!-- masonry fallback, if true in frontmatter -->
-      <script src="/assets/scripts/masonry.js?{{ assetHash }}" defer></script>
-    {% endif %}
-
-    {% if youtube %}
-      <!-- youtube, if true in frontmatter -->
-      <script
-        type="module"
-        src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.4.0/lite-youtube.min.js"
-      ></script>
-    {% endif %}
-
-    {% if meta.navigation.drawerNav %}
-      <!-- menu drawer js, if true in meta -->
-      <script src="/assets/scripts/nav-drawer.js?{{ assetHash }}" defer></script>
-    {% endif %}
-
-    {% if meta.easteregg %}
-      <!-- easteregg js, if true in meta -->
-      <script src="/assets/scripts/easteregg.js?{{ assetHash }}" defer></script>
-    {% endif %}
-
-    <!-- everything else: meta tags, icons, open graph etc.  -->
-    {% include "partials/meta-info.njk" %}
+    <!-- 8 defer  -->
+    {% include "head/js-defer.njk" %}
   </head>
 
   <body class="{{ layout }}">
@@ -99,5 +48,8 @@
     <main id="main" class="flow">{{ content | safe }}</main>
 
     {% include "partials/footer.njk" %}
+
+    <script type="module" src="/assets/scripts/components/custom-easteregg.js"></script>
+    <custom-easteregg keyword="yay" shape="🌈" particle-count="50"></custom-easteregg>
   </body>
 </html>
diff --git a/src/_layouts/blog.njk b/src/_layouts/blog.njk
index 9116ab3..5f78bcd 100644
--- a/src/_layouts/blog.njk
+++ b/src/_layouts/blog.njk
@@ -1,37 +1,45 @@
 ---
 layout: base
-masonry: true
 ---
 
 <article class="wrapper">
   <header class="full | section" style="--spot-color: var(--color-secondary)">
-    <div
-      class="section__inner flow region"
-      style="--region-space-top: var(--space-xl-2xl)"
-    >
+    <div class="section__inner flow region" style="--region-space-top: var(--space-xl-2xl)">
       <h1 class="text-center text-base-light">{{ title }}</h1>
     </div>
-    {% include 'svg/divider-edgy.svg' %}
+
+    {% svg "divider/edgy", null, "seperator" %}
   </header>
 
-  <div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">
-    {{ content | safe }}
-  </div>
+  <div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">{{ content | safe }}</div>
 
-  <ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
-    <!-- loop posts -->
-    {% set itemList = pagination.items %}
-    {% for item in itemList %}
-      <!-- activate tags -->
-      {% set activateTags = true %}
-      <!-- set date context -->
+  <custom-masonry layout="50-50">
+    {% for item in pagination.items %}
       {% set definedDate = item.date %}
-      <!-- set heading context -->
-      {% set headingContext = "h2" %}
-      <!-- include card -->
-      {% include 'components/card.njk' %}
+
+      <custom-card clickable>
+        <h2 slot="headline">
+          <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+        </h2>
+        <span slot="date"> {% include "partials/date.njk" %} </span>
+        {%
+          if
+          item.data.tags.length > 1
+        %}
+          <div slot="tag" webc:nkoeep>
+            {% for tag in item.data.tags %}
+              {% if tag != "posts" %}
+                <span class="button post-tag">{{ tag }}</span>
+              {% endif %}
+            {% endfor %}
+          </div>
+        {% endif %}
+        <div slot="content" webc:nokeep>{{ item.data.description  | markdownFormat | safe }}</div>
+      </custom-card>
     {% endfor %}
-  </ul>
+  </custom-masonry>
+
+  <!-- TODO: pagination is reversed. -->
 
   <!-- set collection to paginate -->
   {% set collectionToPaginate = collections.posts %}
@@ -40,6 +48,6 @@ masonry: true
   <!-- if the number of items in the collection is greater than the number of items shown on one page -->
   {% if collectionToPaginate.length > pagination.size %}
     <!-- include pagination -->
-    {% include 'components/pagination.njk' %}
+    {% include 'partials/pagination.njk' %}
   {% endif %}
 </article>
diff --git a/src/_layouts/home.njk b/src/_layouts/home.njk
index 625499b..571df88 100644
--- a/src/_layouts/home.njk
+++ b/src/_layouts/home.njk
@@ -1,6 +1,5 @@
 ---
 layout: base
-masonry: true
 ---
 
 <div class="wrapper">
@@ -8,7 +7,8 @@ masonry: true
     <div class="section__inner flow region">
       <h1 class="text-center text-base-light">{{ title }}</h1>
     </div>
-    {% include 'svg/divider-waves.svg' %}
+
+    {% svg "divider/waves", null, "seperator" %}
   </header>
 
   <article class="full | region">
@@ -24,23 +24,28 @@ masonry: true
         <p>{{ blog.intro }}</p>
       {% endif %}
 
-      <ul
-        class="feature | grid region"
-        role="list"
-        data-rows="masonry"
-        data-layout="50-50"
-      >
-        <!-- loop posts -->
-        {% set itemList = collections.posts %}
-        {% for item in itemList.slice(0, 4) %}
-          <!-- activate tags -->
-          {% set activateTags = true %}
-          <!-- set heading context -->
-          {% set headingContext = "h3" %}
-          <!-- card -->
-          {% include 'components/card.njk' %}
-        {% endfor %}
-      </ul>
+      <div class="feature |  region">
+        <custom-masonry layout="50-50">
+          <!-- loop posts -->
+          {% set itemList = collections.allPosts %}
+          {% for item in itemList.slice(0, 4) %}
+            {% set definedDate = item.date %}
+            <custom-card clickable>
+              <h3 slot="headline">
+                <a href="{{ item.url | url }}">{{ item.data.title }}</a>
+              </h3>
+              <span slot="date"> {% include "partials/date.njk" %} </span>
+              {%
+                if
+                item.data.tags.length > 1
+              %}
+                <span slot="tag" class="button post-tag">{{ item.data.tags[1] }}</span>
+              {% endif %}
+              <p slot="content">{{ item.data.description }}</p>
+            </custom-card>
+          {% endfor %}
+        </custom-masonry>
+      </div>
     </div>
   </section>
 </div>
diff --git a/src/_layouts/page.njk b/src/_layouts/page.njk
index 466bdad..9ec1b52 100644
--- a/src/_layouts/page.njk
+++ b/src/_layouts/page.njk
@@ -2,10 +2,7 @@
 layout: base
 ---
 
-<article
-  class="region wrapper flow prose"
-  style="--region-space-top: var(--space-xl-2xl)"
->
+<article class="region wrapper flow prose" style="--region-space-top: var(--space-xl-2xl)">
   <h1 class="gradient-text">{{ title }}</h1>
   {{ content | safe }}
 </article>
diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk
index 978a59c..80f8987 100644
--- a/src/_layouts/post.njk
+++ b/src/_layouts/post.njk
@@ -9,19 +9,12 @@ schema: blog
 
     {% if image %}
       <!-- image -->
-      {% eleventyImage image, alt or title, null, "eager", "feature" %}
-    {% endif %}
-    {%
-      if
-      credit
-    %}
-      <!-- credit -->
-      <p class="credit feature | text-step-min-1">© {{ credit }}</p>
+      {% image image, alt or title, credit, "eager", "feature" %}
     {% endif %}
 
     <p class="meta | cluster" style="--gutter: var(--space-xs-s)">
       <!-- date -->
-      {% set definedDate = date %} {% include "components/date.njk" %}
+      {% set definedDate = date %} {% include "partials/date.njk" %}
       {%
         if tags.length >
         1
@@ -34,7 +27,7 @@ schema: blog
     </p>
 
     {{ content | safe }}
-    {% include 'components/edit-on.njk' %}
+    {% include 'partials/edit-on.njk' %}
   </div>
 
   <!--  h-card infos: https://indieweb.org/authorship -->
diff --git a/src/_layouts/tags.njk b/src/_layouts/tags.njk
index 09549bd..d6c3c86 100644
--- a/src/_layouts/tags.njk
+++ b/src/_layouts/tags.njk
@@ -1,6 +1,5 @@
 ---
 layout: base
-masonry: true
 ---
 
 <article class="region">
