diff --git a/config/filters/index.js b/config/filters/index.js
index 767b4d6..45024a6 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -87,12 +87,17 @@ const filterCatalogueTags = (tags) => {
 
 const limit = (collection, limit = 5) => collection.slice(0, limit);
 
+const filterFavourites = (collection) => {
+  return collection.filter((item) => item.data.favourite);
+};
+
 module.exports = {
   allTagCounts,
   allTags,
   entries,
   filter,
   filterCatalogueTags,
+  filterFavourites,
   formatDate,
   keys,
   limit,
diff --git a/eleventy.config.js b/eleventy.config.js
index 881cfb1..c91bfa4 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -17,6 +17,7 @@ const {
   pluralize,
   filterCatalogueTags,
   limit,
+  filterFavourites,
 } = require("./config/filters/index.js");
 const markdown = require("./config/plugins/markdown.js");
 const imageShortcode = require("./config/shortcodes/image.js");
@@ -37,6 +38,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("entries", entries);
   eleventyConfig.addFilter("filter", filter);
   eleventyConfig.addFilter("filterCatalogueTags", filterCatalogueTags);
+  eleventyConfig.addFilter("filterFavourites", filterFavourites);
   eleventyConfig.addFilter("formatDate", formatDate);
   eleventyConfig.addFilter("keys", keys);
   eleventyConfig.addFilter("limit", limit);
diff --git a/src/_includes/macros/posts.njk b/src/_includes/macros/posts.njk
new file mode 100644
index 0000000..774809b
--- /dev/null
+++ b/src/_includes/macros/posts.njk
@@ -0,0 +1,14 @@
+{% macro list(posts) %}
+<ul class="[ list-none p-0 flow mt-1 mb-0 flow-space-0.25 ]">
+    {% for post in posts %}
+        <li class="[ flex flex-wrap column-gap-1 row-gap-0 ]">
+            <div>
+                <a href="{{ post.url }}">{{ post.data.title }}</a>
+            </div>
+            <div class="[ text-fadeText font-size-s ]">{{ post.data.excerpt }}</div>
+            <div class="[ bg-surface radius-0.5 px-0.5 text-primary font-size-s ]">{{ post.data.date | formatDate("MM/DD/YYYY") }}</div>
+        </li>
+    {% endfor %}
+</ul>
+{% endmacro %}
+
diff --git a/src/css-utils/spacing.js b/src/css-utils/spacing.js
index 6246a8c..35f75bd 100644
--- a/src/css-utils/spacing.js
+++ b/src/css-utils/spacing.js
@@ -36,6 +36,7 @@ const helperClasses = [
   ["gap", ["gap"]],
   ["row-gap", ["row-gap"]],
   ["column-gap", ["column-gap"]],
+  ["flow-space", ["--flow-space"]],
 ];
 
 const spacingVariablesCss = Object.entries(spacing).reduce(
diff --git a/src/css/compositions/flex.css b/src/css/utilities/flex.css
similarity index 100%
rename from src/css/compositions/flex.css
rename to src/css/utilities/flex.css
diff --git a/src/css/utilities/fonts.css b/src/css/utilities/fonts.css
new file mode 100644
index 0000000..58507e3
--- /dev/null
+++ b/src/css/utilities/fonts.css
@@ -0,0 +1,15 @@
+.font-size-s {
+  font-size: 0.8rem;
+}
+
+.font-size-m {
+  font-size: 1.125rem;
+}
+
+.font-size-l {
+  font-size: 2rem;
+}
+
+.font-size-xl {
+  font-size: 3rem;
+}
diff --git a/src/css/compositions/list.css b/src/css/utilities/list.css
similarity index 100%
rename from src/css/compositions/list.css
rename to src/css/utilities/list.css
diff --git a/src/index.html b/src/index.html
index 912eaf1..ce3094d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,7 @@ layout: "layouts/base"
 permalink: /
 ---
 
+{% from "macros/posts.njk" import list %}
 <h1>Ahoj!</h1>
 <p>Hello! My name is Devin.</p>
 <p>I'm a creative developer who specializes in web and mobile development.</p>
@@ -13,15 +14,9 @@ permalink: /
     If you're interested, I have an <a href="/about">about page</a> all about me!
 </p>
 <h2>Favourite posts</h2>
+<p>Hand-picked, curated selection of my favourite posts!</p>
+{% set favouritePosts = collections.post | filterFavourites | reverse %}
+{{ list(favouritePosts) }}
 <h2>Recent posts</h2>
-<ul class="[ list-none p-0 flow mt-1 mb-0 ]"
-    style="--flow-space: 0.25rem">
-    {% for item in collections.post | reverse | limit(5) %}
-        <li class="[ flex flex-wrap column-gap-0.5 row-gap-0 ]">
-            <div>
-                <a href="{{ item.url }}">{{ item.data.title }}</a>
-            </div>
-            <div class="[ text-fadeText ]" style="font-size: 0.8rem">{{ item.data.date | formatDate("MM/DD/YYYY") }}</div>
-        </li>
-    {% endfor %}
-</ul>
+{% set recentPosts = collections.post | reverse | limit(5) %}
+{{ list(recentPosts) }}