diff --git a/config/collections/index.js b/config/collections/index.js
index 2f0e115..d17dcc8 100644
--- a/config/collections/index.js
+++ b/config/collections/index.js
@@ -15,24 +15,6 @@ export const postsByTag = (collection) => {
   return postsByTag;
 };
 
-export const gamesByYear = (collection) => {
-  const allGames = collection.getFilteredByTag("game");
-  const gamesByYear = {};
-
-  allGames.forEach((game) => {
-    const date = new dayjs(game.date);
-    const year = date.year();
-
-    if (!gamesByYear[year]) {
-      gamesByYear[year] = { value: year, data: [game] };
-    } else {
-      gamesByYear[year].data.push(game);
-    }
-  });
-
-  return gamesByYear;
-};
-
 export const catalogueByType = (collection) => {
   const allItems = collection.getFilteredByTag("catalogue");
 
diff --git a/config/filters/index.js b/config/filters/index.js
index a83ab01..38e5f1c 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -29,6 +29,22 @@ export const organizeByDate = (collection) => {
   return collectionByDate;
 };
 
+export const transformByDate = (collection) => {
+  const collectionByDate = {};
+
+  collection.forEach((item) => {
+    const year = formatDate(item.date, "YYYY");
+
+    if (!collectionByDate[year]) {
+      return (collectionByDate[year] = { value: year, data: [item] });
+    }
+
+    collectionByDate[year].data.push(item);
+  });
+
+  return collectionByDate;
+};
+
 export const allTagCounts = (collection, ignore = ["post"]) => {
   if (!collection.length) {
     throw new Error("Invalid collection, no items");
diff --git a/eleventy.config.js b/eleventy.config.js
index 11ff310..18062d5 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -3,11 +3,7 @@ import pluginRss from "@11ty/eleventy-plugin-rss";
 import pluginNoRobots from "eleventy-plugin-no-robots";
 import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
-import {
-  catalogueByType,
-  postsByTag,
-  gamesByYear,
-} from "./config/collections/index.js";
+import { catalogueByType, postsByTag } from "./config/collections/index.js";
 
 import { dir } from "./config/constants.js";
 import {
@@ -23,6 +19,7 @@ import {
   organizeByDate,
   pluralize,
   values,
+  transformByDate,
 } from "./config/filters/index.js";
 import markdown from "./config/plugins/markdown.js";
 import liteYoutube from "./config/shortcodes/youtube.js";
@@ -37,7 +34,16 @@ export default function (eleventyConfig) {
   eleventyConfig.addPlugin(pluginNoRobots);
 
   // 	--------------------- Custom Collections -----------------------
-  eleventyConfig.addCollection("gamesByYear", gamesByYear);
+  eleventyConfig.addCollection("gamesByYear", (collection) => {
+    const data = collection.getFilteredByTag("game");
+    const byYear = transformByDate(data);
+    return byYear;
+  });
+  eleventyConfig.addCollection("booksByYear", (collection) => {
+    const data = collection.getFilteredByTag("book");
+    const byYear = transformByDate(data);
+    return byYear;
+  });
   eleventyConfig.addCollection("catalogueByType", catalogueByType);
   eleventyConfig.addCollection("postsByTag", postsByTag);
 
diff --git a/src/_data/navigation.js b/src/_data/navigation.js
index f8a5b29..d112dbf 100644
--- a/src/_data/navigation.js
+++ b/src/_data/navigation.js
@@ -17,7 +17,7 @@ export default {
     },
     {
       text: "Books",
-      url: "/catalogue/books",
+      url: "/books",
       icon: "book",
     },
   ],
diff --git a/src/_includes/layouts/book.html b/src/_includes/layouts/book.html
new file mode 100644
index 0000000..14633f5
--- /dev/null
+++ b/src/_includes/layouts/book.html
@@ -0,0 +1,43 @@
+---
+layout: "layouts/base"
+---
+
+{% from "macros/date.njk" import format %}
+{% from "macros/utils.njk" import stars %}
+<a class="button" href="/books">
+    {% include "svgs/arrow-left.svg" %}
+Back to books</a>
+<header class="media-meta-grid gap-1">
+    <div class="media-image">
+        <img src="{{ image }}" alt="" />
+    </div>
+    <div class="flow flex-col justify-center">
+        <h2>{{ title }}</h2>
+        {% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
+        <p class="flex gap-0.5">
+            <span class="text-fadeText">by</span>{{ author }}
+        </p>
+        {% if rating %}{{ stars(rating) }}{% endif %}
+        <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
+            {% if year %}
+                <li class="flex-col">
+                    <strong>Released</strong><span>{{ year }}</span>
+                </li>
+            {% endif %}
+            {% if playtime %}
+                <li class="flex-col">
+                    <strong>Playtime</strong><span>{{ playtime }}</span>
+                </li>
+            {% endif %}
+            {% if pullquote %}
+                <li class="flex-col meta-grid--full">
+                    <strong>Pullquote</strong><span>{{ pullquote }}</span>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+</header>
+<section class="flow">
+    {{ content | safe }}
+</section>
+{{ format(page.date) }}
diff --git a/src/_includes/layouts/game.html b/src/_includes/layouts/game.html
index ab2106f..2b25818 100644
--- a/src/_includes/layouts/game.html
+++ b/src/_includes/layouts/game.html
@@ -4,6 +4,9 @@ layout: "layouts/base"
 
 {% from "macros/date.njk" import format %}
 {% from "macros/utils.njk" import stars %}
+<a class="button" href="/games">
+    {% include "svgs/arrow-left.svg" %}
+Back to games</a>
 <header class="media-meta-grid gap-1">
     <div class="media-image">
         <img src="{{ image }}" alt="" />
@@ -14,7 +17,6 @@ layout: "layouts/base"
             <span class="pill">{{ platform }}</span>
         </div>
         {% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
-        {{ format(page.date) }}
         {% if rating %}{{ stars(rating) }}{% endif %}
         <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
             {% if year %}
@@ -38,3 +40,4 @@ layout: "layouts/base"
 <section class="flow">
     {{ content | safe }}
 </section>
+{{ format(page.date) }}
diff --git a/src/_includes/macros/date.njk b/src/_includes/macros/date.njk
index e8767d0..75570bb 100644
--- a/src/_includes/macros/date.njk
+++ b/src/_includes/macros/date.njk
@@ -1,5 +1,6 @@
 {% macro format(dateString) %}
-    <time class="[ date ] [ flex items-center gap-0.5 text-fadeText ]" datetime="{{ date }}">
+    <time class="[ date ] [ flex items-center gap-0.5 text-fadeText ]"
+          datetime="{{ dateString }}">
         <span class="[ text-primary line-height-s ]">{% include "svgs/calendar.svg" %}</span>{{ dateString | formatDate("MMMM Do YYYY") }}
     </time>
 {% endmacro %}
diff --git a/src/catalogue/books/2016-08-29-the-way-of-kings.md b/src/books/2016-08-29-the-way-of-kings.md
similarity index 100%
rename from src/catalogue/books/2016-08-29-the-way-of-kings.md
rename to src/books/2016-08-29-the-way-of-kings.md
diff --git a/src/catalogue/books/2019-05-25-the-dip.md b/src/books/2019-05-25-the-dip.md
similarity index 100%
rename from src/catalogue/books/2019-05-25-the-dip.md
rename to src/books/2019-05-25-the-dip.md
diff --git a/src/catalogue/books/2019-05-25-the-subtle-art.md b/src/books/2019-05-25-the-subtle-art.md
similarity index 100%
rename from src/catalogue/books/2019-05-25-the-subtle-art.md
rename to src/books/2019-05-25-the-subtle-art.md
diff --git a/src/catalogue/books/2019-05-25-the-total-money-makeover.md b/src/books/2019-05-25-the-total-money-makeover.md
similarity index 100%
rename from src/catalogue/books/2019-05-25-the-total-money-makeover.md
rename to src/books/2019-05-25-the-total-money-makeover.md
diff --git a/src/catalogue/books/2019-05-25-why-we-get-fat.md b/src/books/2019-05-25-why-we-get-fat.md
similarity index 100%
rename from src/catalogue/books/2019-05-25-why-we-get-fat.md
rename to src/books/2019-05-25-why-we-get-fat.md
diff --git a/src/catalogue/books/2019-05-31-digital-minimalism.md b/src/books/2019-05-31-digital-minimalism.md
similarity index 100%
rename from src/catalogue/books/2019-05-31-digital-minimalism.md
rename to src/books/2019-05-31-digital-minimalism.md
diff --git a/src/catalogue/books/2019-08-06-dare-to-lead.md b/src/books/2019-08-06-dare-to-lead.md
similarity index 100%
rename from src/catalogue/books/2019-08-06-dare-to-lead.md
rename to src/books/2019-08-06-dare-to-lead.md
diff --git a/src/catalogue/books/2019-09-04-effective-engineer.md b/src/books/2019-09-04-effective-engineer.md
similarity index 100%
rename from src/catalogue/books/2019-09-04-effective-engineer.md
rename to src/books/2019-09-04-effective-engineer.md
diff --git a/src/catalogue/books/2019-09-07-atomic-habits.md b/src/books/2019-09-07-atomic-habits.md
similarity index 100%
rename from src/catalogue/books/2019-09-07-atomic-habits.md
rename to src/books/2019-09-07-atomic-habits.md
diff --git a/src/catalogue/books/2019-10-21-ego-is-the-enemy.md b/src/books/2019-10-21-ego-is-the-enemy.md
similarity index 100%
rename from src/catalogue/books/2019-10-21-ego-is-the-enemy.md
rename to src/books/2019-10-21-ego-is-the-enemy.md
diff --git a/src/catalogue/books/2019-10-22-meditations.md b/src/books/2019-10-22-meditations.md
similarity index 100%
rename from src/catalogue/books/2019-10-22-meditations.md
rename to src/books/2019-10-22-meditations.md
diff --git a/src/catalogue/books/2019-12-04-deep-work.md b/src/books/2019-12-04-deep-work.md
similarity index 100%
rename from src/catalogue/books/2019-12-04-deep-work.md
rename to src/books/2019-12-04-deep-work.md
diff --git a/src/catalogue/books/2019-12-04-why-we-sleep.md b/src/books/2019-12-04-why-we-sleep.md
similarity index 100%
rename from src/catalogue/books/2019-12-04-why-we-sleep.md
rename to src/books/2019-12-04-why-we-sleep.md
diff --git a/src/catalogue/books/2020-06-01-astrophyics-for-people.md b/src/books/2020-06-01-astrophyics-for-people.md
similarity index 100%
rename from src/catalogue/books/2020-06-01-astrophyics-for-people.md
rename to src/books/2020-06-01-astrophyics-for-people.md
diff --git a/src/catalogue/books/2020-07-01-the-hate-u-give.md b/src/books/2020-07-01-the-hate-u-give.md
similarity index 100%
rename from src/catalogue/books/2020-07-01-the-hate-u-give.md
rename to src/books/2020-07-01-the-hate-u-give.md
diff --git a/src/catalogue/books/2020-08-01-the-skin-were-in.md b/src/books/2020-08-01-the-skin-were-in.md
similarity index 100%
rename from src/catalogue/books/2020-08-01-the-skin-were-in.md
rename to src/books/2020-08-01-the-skin-were-in.md
diff --git a/src/catalogue/books/2020-09-02-the-big-leap.md b/src/books/2020-09-02-the-big-leap.md
similarity index 100%
rename from src/catalogue/books/2020-09-02-the-big-leap.md
rename to src/books/2020-09-02-the-big-leap.md
diff --git a/src/catalogue/books/2021-09-09-joshua-whitehead-jonny-appleseed.md b/src/books/2021-09-09-joshua-whitehead-jonny-appleseed.md
similarity index 100%
rename from src/catalogue/books/2021-09-09-joshua-whitehead-jonny-appleseed.md
rename to src/books/2021-09-09-joshua-whitehead-jonny-appleseed.md
diff --git a/src/catalogue/books/2021-09-09-scott-mccloud-understanding-comics.md b/src/books/2021-09-09-scott-mccloud-understanding-comics.md
similarity index 100%
rename from src/catalogue/books/2021-09-09-scott-mccloud-understanding-comics.md
rename to src/books/2021-09-09-scott-mccloud-understanding-comics.md
diff --git a/src/catalogue/books/2021-09-09-victoria-ortiz-dissenter-on-the-bench.md b/src/books/2021-09-09-victoria-ortiz-dissenter-on-the-bench.md
similarity index 100%
rename from src/catalogue/books/2021-09-09-victoria-ortiz-dissenter-on-the-bench.md
rename to src/books/2021-09-09-victoria-ortiz-dissenter-on-the-bench.md
diff --git a/src/catalogue/books/2021-09-17-jim-butcher-peace-talks.md b/src/books/2021-09-17-jim-butcher-peace-talks.md
similarity index 100%
rename from src/catalogue/books/2021-09-17-jim-butcher-peace-talks.md
rename to src/books/2021-09-17-jim-butcher-peace-talks.md
diff --git a/src/catalogue/books/2021-11-28-what-we-dont-talk-about-when-we-talk-about-fat-aubrey-gordon.md b/src/books/2021-11-28-what-we-dont-talk-about-when-we-talk-about-fat-aubrey-gordon.md
similarity index 100%
rename from src/catalogue/books/2021-11-28-what-we-dont-talk-about-when-we-talk-about-fat-aubrey-gordon.md
rename to src/books/2021-11-28-what-we-dont-talk-about-when-we-talk-about-fat-aubrey-gordon.md
diff --git a/src/catalogue/books/2024-02-25-stolen-focus.md b/src/books/2024-02-25-stolen-focus.md
similarity index 100%
rename from src/catalogue/books/2024-02-25-stolen-focus.md
rename to src/books/2024-02-25-stolen-focus.md
diff --git a/src/books/books.11tydata.js b/src/books/books.11tydata.js
new file mode 100644
index 0000000..689be67
--- /dev/null
+++ b/src/books/books.11tydata.js
@@ -0,0 +1,5 @@
+export default {
+  layout: "layouts/book",
+  permalink: "books/{{ page.fileSlug }}/index.html",
+  tags: "book",
+};
diff --git a/src/catalogue/books/books.11tydata.js b/src/catalogue/books/books.11tydata.js
deleted file mode 100644
index 8f8d64b..0000000
--- a/src/catalogue/books/books.11tydata.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-  layout: "layouts/catalogue-item",
-  tags: "book",
-  permalink: "catalogue/books/{{ page.fileSlug }}/index.html",
-  linkTitle: "View book details",
-  eleventyComputed: {
-    tertiary: (data) =>
-      `<p class="[ flow-space-0.5 ]"><span class="[ text-fadeText ]">by</span> ${data.author}</p>`,
-  },
-};
diff --git a/src/css/blocks/media-grid.css b/src/css/blocks/media-grid.css
index 10dcb04..88fe4ca 100644
--- a/src/css/blocks/media-grid.css
+++ b/src/css/blocks/media-grid.css
@@ -22,6 +22,7 @@
           width: 100%;
           height: 100%;
           object-fit: cover;
+          transition: transform 0.3s ease;
         }
       }
     }
@@ -60,6 +61,10 @@
       }
 
       a:hover {
+        img {
+          transform: scale(1.05);
+        }
+
         .meta {
           opacity: 1;
 
diff --git a/src/css/global/global-styles.css b/src/css/global/global-styles.css
index 6488d7c..bdaa781 100644
--- a/src/css/global/global-styles.css
+++ b/src/css/global/global-styles.css
@@ -35,7 +35,6 @@ h1 {
   font-weight: var(--font-weight-display-extrabold);
   letter-spacing: -0.05rem;
   line-height: 3rem;
-  transform: var(--text-skew);
 }
 
 h2 {
@@ -153,6 +152,7 @@ figure figcaption {
 picture source,
 picture img {
   border-radius: var(--spacing-0\.5);
+  height: auto;
 }
 
 aside {
diff --git a/src/pages/books/index.html b/src/pages/books/index.html
new file mode 100644
index 0000000..e809224
--- /dev/null
+++ b/src/pages/books/index.html
@@ -0,0 +1,21 @@
+---
+permalink: "books/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set data = collections.book | reverse %}
+{% set yearsData = collections.booksByYear | values | reverse %}
+<section class="flow">
+    <h1>Books</h1>
+    <p>A collection of games I've read over the years.</p>
+    <h2>Browse by year</h2>
+    <ul class="list-none flex p-0 gap-1 flex-wrap">
+        {% for year in yearsData %}
+            <li>
+                <a class="button" href="/books/year/{{ year.value }}/">{{ year.value }}</a>
+            </li>
+        {% endfor %}
+    </ul>
+    <h2>Latest books</h2>
+    {{ grid(data) }}
+</section>
diff --git a/src/pages/books/year.html b/src/pages/books/year.html
new file mode 100644
index 0000000..76f0143
--- /dev/null
+++ b/src/pages/books/year.html
@@ -0,0 +1,21 @@
+---
+pagination:
+    data: collections.booksByYear
+    size: 1
+    alias: year
+    resolve: values
+permalink: "books/year/{{ year.value }}/index.html"
+---
+
+{% from "macros/media-grid.njk" import grid %}
+{% set booksData = year.data | reverse %}
+<section class="flow">
+    <a class="button" href="/books">
+        {% include "svgs/arrow-left.svg" %}
+    Back to books</a>
+    <h1>Books in {{ year.value }}</h1>
+    <p>
+        A collection of games I've read in <strong>{{ year.value }}</strong>.
+    </p>
+    {{ grid(booksData) }}
+</section>
diff --git a/src/pages/games/year.html b/src/pages/games/year.html
index e8ac336..95c4ea0 100644
--- a/src/pages/games/year.html
+++ b/src/pages/games/year.html
@@ -10,7 +10,9 @@ permalink: "games/year/{{ year.value }}/index.html"
 {% from "macros/media-grid.njk" import grid %}
 {% set gamesData = year.data | reverse %}
 <section class="flow">
-    <a href="/games">Back to games</a>
+    <a class="button" href="/games">
+        {% include "svgs/arrow-left.svg" %}
+    Back to games</a>
     <h1>Games in {{ year.value }}</h1>
     <p>
         A collection of games I've played in <strong>{{ year.value }}</strong>.