diff --git a/package-lock.json b/package-lock.json
index 261ac1c3..e16d06df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "16.2.0",
+  "version": "16.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "16.2.0",
+      "version": "16.3.0",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.2.2",
diff --git a/package.json b/package.json
index 2b4f0869..be75a87f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "16.2.0",
+  "version": "16.3.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/book-year.liquid b/src/_includes/partials/media/books/year.liquid
similarity index 100%
rename from src/_includes/book-year.liquid
rename to src/_includes/partials/media/books/year.liquid
diff --git a/src/_includes/partials/media/music/period/chart.liquid b/src/_includes/partials/media/music/period/chart.liquid
new file mode 100644
index 00000000..b3b1d722
--- /dev/null
+++ b/src/_includes/partials/media/music/period/chart.liquid
@@ -0,0 +1,19 @@
+<hr class="large-spacing" />
+<div class="music-chart">
+  {% for item in data.items %}
+  {%- assign percentage = item.plays | calculatePlayPercentage:playTotal -%}
+  <div class="item">
+    <div class="presentation">
+      <div class="count">{{ item.rank | formatNumber }}.</div>
+      <div class="info">
+        <div class="title">
+          <a href="{{ item.url }}">{{ item.title }}</a>
+        </div>
+        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
+      </div>
+    </div>
+    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
+  </div>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:data %}
\ No newline at end of file
diff --git a/src/_includes/partials/media/music/period/grid.liquid b/src/_includes/partials/media/music/period/grid.liquid
new file mode 100644
index 00000000..7911c73a
--- /dev/null
+++ b/src/_includes/partials/media/music/period/grid.liquid
@@ -0,0 +1,16 @@
+<hr class="large-spacing" />
+<div class="media-grid square">
+  {% for item in data.items %}
+  {% assign alt = item.alt | strip | escape %}
+  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+    <div class="item-wrapper shadow">
+      <div class="meta-text">
+          <div class="header">{{ item.title }}</div>
+          <div class="subheader">{{ item.plays }} plays</div>
+      </div>
+      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
+    </div>
+  </a>
+  {% endfor %}
+</div>
+{% render "partials/widgets/paginator.liquid", pagination:data %}
\ No newline at end of file
diff --git a/src/_includes/partials/media/album-releases.liquid b/src/_includes/partials/media/music/releases.liquid
similarity index 100%
rename from src/_includes/partials/media/album-releases.liquid
rename to src/_includes/partials/media/music/releases.liquid
diff --git a/src/_includes/partials/media/track-chart.liquid b/src/_includes/partials/media/music/tracks/chart.liquid
similarity index 100%
rename from src/_includes/partials/media/track-chart.liquid
rename to src/_includes/partials/media/music/tracks/chart.liquid
diff --git a/src/_includes/partials/media/tracks-recent.liquid b/src/_includes/partials/media/music/tracks/recent.liquid
similarity index 100%
rename from src/_includes/partials/media/tracks-recent.liquid
rename to src/_includes/partials/media/music/tracks/recent.liquid
diff --git a/src/_includes/partials/watching/favorites-grid.liquid b/src/_includes/partials/media/watching/favorites-grid.liquid
similarity index 100%
rename from src/_includes/partials/watching/favorites-grid.liquid
rename to src/_includes/partials/media/watching/favorites-grid.liquid
diff --git a/src/_includes/partials/watching/hero.liquid b/src/_includes/partials/media/watching/hero.liquid
similarity index 100%
rename from src/_includes/partials/watching/hero.liquid
rename to src/_includes/partials/media/watching/hero.liquid
diff --git a/src/_includes/partials/widgets/paginator.liquid b/src/_includes/partials/widgets/paginator.liquid
index 5f8c8518..57c9c669 100644
--- a/src/_includes/partials/widgets/paginator.liquid
+++ b/src/_includes/partials/widgets/paginator.liquid
@@ -20,7 +20,7 @@
     </select>
     <noscript>
       <div class="text-centered">
-        <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
+        <span aria-current="page">{{ pagination.pageNumber }}</span> of {{ pagination.links.size }}
       </div>
     </noscript>
   </select-pagination>
diff --git a/src/links.html b/src/links.html
index 42a4f82f..b2ec439f 100644
--- a/src/links.html
+++ b/src/links.html
@@ -4,7 +4,7 @@ layout: default
 pagination:
   data: collections.links
   size: 30
-permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/links/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 ---
 {% if pagination.pageNumber == 0 %}
 <h2 class="page-header">Links</h2>
diff --git a/src/pages/main/books/want-to-read.html b/src/pages/main/books/want-to-read.html
index 29eff6c6..504a3829 100644
--- a/src/pages/main/books/want-to-read.html
+++ b/src/pages/main/books/want-to-read.html
@@ -5,7 +5,7 @@ pagination:
   data: collections.booksToRead
   alias: books
   size: 30
-permalink: "/books/want-to-read/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/books/want-to-read/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: books
 ---
 {% if pagination.pageNumber == 0 %}
diff --git a/src/pages/main/books/years/2020.html b/src/pages/main/books/years/2020.html
index 94676221..5e8381c5 100644
--- a/src/pages/main/books/years/2020.html
+++ b/src/pages/main/books/years/2020.html
@@ -1,7 +1,7 @@
 ---
 title: 2020 • Books
 year: 2020
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2020.html"
 schema: books
 ---
diff --git a/src/pages/main/books/years/2021.html b/src/pages/main/books/years/2021.html
index f4c8fd4f..2880b4bd 100644
--- a/src/pages/main/books/years/2021.html
+++ b/src/pages/main/books/years/2021.html
@@ -1,7 +1,7 @@
 ---
 title: 2021 • Books
 year: 2021
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2021.html"
 schema: books
 ---
diff --git a/src/pages/main/books/years/2022.html b/src/pages/main/books/years/2022.html
index f6ab2b5f..53b2b4f8 100644
--- a/src/pages/main/books/years/2022.html
+++ b/src/pages/main/books/years/2022.html
@@ -1,7 +1,7 @@
 ---
 title: 2022 • Books
 year: 2022
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2022.html"
 schema: books
 ---
diff --git a/src/pages/main/books/years/2023.html b/src/pages/main/books/years/2023.html
index 33772811..a736e3a5 100644
--- a/src/pages/main/books/years/2023.html
+++ b/src/pages/main/books/years/2023.html
@@ -1,7 +1,7 @@
 ---
 title: 2023 • Books
 year: 2023
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2023.html"
 schema: books
 ---
diff --git a/src/pages/main/books/years/2024.html b/src/pages/main/books/years/2024.html
index ad28d715..b660b7c8 100644
--- a/src/pages/main/books/years/2024.html
+++ b/src/pages/main/books/years/2024.html
@@ -1,7 +1,7 @@
 ---
 title: 2024 • Books
 year: 2024
-layout: book-year
+layout: partials/media/books/year
 permalink: "/books/years/2024.html"
 schema: books
 ---
diff --git a/src/pages/main/music/albums/3-months.html b/src/pages/main/music/albums/3-months.html
index 5bc68f70..3dab4b73 100644
--- a/src/pages/main/music/albums/3-months.html
+++ b/src/pages/main/music/albums/3-months.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.threeMonth.albums
   size: 24
-permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.threeMonth.albums.size }} albums</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/tracks/three-months/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/albums/all-time.html b/src/pages/main/music/albums/all-time.html
index 95c08995..cb2a7fa4 100644
--- a/src/pages/main/music/albums/all-time.html
+++ b/src/pages/main/music/albums/all-time.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.allTime.albums
   size: 24
-permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.allTime.albums.size }} albums</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/all-time/">artists</a> or <a href="/music/tracks/all-time/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/albums/this-month.html b/src/pages/main/music/albums/this-month.html
index 593ecf03..85e82caf 100644
--- a/src/pages/main/music/albums/this-month.html
+++ b/src/pages/main/music/albums/this-month.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.month.albums
   size: 24
-permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.month.albums.size }} albums</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/tracks/this-month/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/albums/this-week.html b/src/pages/main/music/albums/this-week.html
index 4b2ef9ec..17db695c 100644
--- a/src/pages/main/music/albums/this-week.html
+++ b/src/pages/main/music/albums/this-week.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.week.albums
   size: 24
-permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/albums/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/tracks/this-week/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/3-months.html b/src/pages/main/music/artists/3-months.html
index 3028ef6e..73eb04da 100644
--- a/src/pages/main/music/artists/3-months.html
+++ b/src/pages/main/music/artists/3-months.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.threeMonth.artists
   size: 24
-permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.threeMonth.artists.size }} artists</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/albums/three-months/">albums</a> or <a href="/music/tracks/three-months/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/all-time.html b/src/pages/main/music/artists/all-time.html
index a724d3c8..dae9ae05 100644
--- a/src/pages/main/music/artists/all-time.html
+++ b/src/pages/main/music/artists/all-time.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.allTime.artists
   size: 24
-permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.allTime.artists.size }} artists</strong> and most of what I listen to is <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/albums/all-time/">albums</a> or <a href="/music/tracks/all-time/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/this-month.html b/src/pages/main/music/artists/this-month.html
index bf4b9aa0..9d9498ac 100644
--- a/src/pages/main/music/artists/this-month.html
+++ b/src/pages/main/music/artists/this-month.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.month.artists
   size: 24
-permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.month.artists.size }} artists</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/albums/this-month/">albums</a> or <a href="/music/tracks/this-month/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/this-week.html b/src/pages/main/music/artists/this-week.html
index 2a803eea..2eba60c6 100644
--- a/src/pages/main/music/artists/this-week.html
+++ b/src/pages/main/music/artists/this-week.html
@@ -4,26 +4,11 @@ layout: default
 pagination:
   data: music.week.artists
   size: 24
-permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/artists/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="media-grid square">
-  {% for item in pagination.items %}
-  {% assign alt = item.alt | strip | escape %}
-  <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-    <div class="item-wrapper shadow">
-      <div class="meta-text">
-          <div class="header">{{ item.title }}</div>
-          <div class="subheader">{{ item.plays }} plays</div>
-      </div>
-      <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=80"{% if alt %} alt="{{ alt }}"{% endif %} loading="eager" decoding="async" width="240" height="240" />
-    </div>
-  </a>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/index.html b/src/pages/main/music/index.html
index f4a542e6..a4d14a15 100644
--- a/src/pages/main/music/index.html
+++ b/src/pages/main/music/index.html
@@ -76,20 +76,20 @@ schema: music
   </div>
 </div>
 <div id="tracks-recent">
-  {% render "partials/media/tracks-recent.liquid", data:music.recent.tracksChronological %}
+  {% render "partials/media/music/tracks/recent", data:music.recent.tracksChronological %}
 </div>
 <div class="hidden" id="tracks-window">
-  {% render "partials/media/track-chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays %}
+  {% render "partials/media/music/tracks/chart.liquid", data:music.week.tracks, mostPlayed:music.week.tracks[0].plays %}
 </div>
 <div class="hidden" id="tracks-month">
-  {% render "partials/media/track-chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays %}
+  {% render "partials/media/music/tracks/chart.liquid", data:music.month.tracks, mostPlayed:music.month.tracks[0].plays %}
 </div>
 <div class="hidden" id="tracks-three-months">
-  {% render "partials/media/track-chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
+  {% render "partials/media/music/tracks/chart.liquid", data:music.threeMonth.tracks, mostPlayed:music.threeMonth.tracks[0].plays %}
 </div>
 <div class="hidden" id="tracks-all-time">
-  {% render "partials/media/track-chart.liquid", data:music.allTime.tracks, mostPlayed:music.allTime.tracks[0].plays %}
+  {% render "partials/media/music/tracks/chart.liquid", data:music.allTime.tracks, mostPlayed:music.allTime.tracks[0].plays %}
 </div>
 <p><strong class="highlight-text">More:</strong> <a href="/music/tracks/this-week/">This week</a> • <a href="/music/tracks/this-month/">This month</a> • <a href="/music/tracks/three-months/">3 months</a> • <a href="/music/tracks/all-time/">All time</a></p>
-{% render "partials/media/album-releases.liquid", albumReleases:albumReleases %}
+{% render "partials/media/music/releases.liquid", albumReleases:albumReleases %}
 <p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates once an hour.</em></p>
\ No newline at end of file
diff --git a/src/pages/main/music/tracks/3-months.html b/src/pages/main/music/tracks/3-months.html
index 798f0dfc..939e6212 100644
--- a/src/pages/main/music/tracks/3-months.html
+++ b/src/pages/main/music/tracks/3-months.html
@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.threeMonth.tracks
   size: 50
-permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/three-months/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.threeMonth.tracks.size }} tracks</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/three-months/">artists</a> or <a href="/music/albums/three-months/">albums</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="music-chart">
-  {% for item in pagination.items %}
-  {%- assign percentage = item.plays | calculatePlayPercentage: music.threeMonth.tracks[0].plays -%}
-  <div class="item">
-    <div class="presentation">
-      <div class="count">{{ item.rank | formatNumber }}.</div>
-      <div class="info">
-        <div class="title">
-          <a href="{{ item.url }}">{{ item.title }}</a>
-        </div>
-        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
-      </div>
-    </div>
-    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-  </div>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.threeMonth.tracks[0].plays %}
\ No newline at end of file
diff --git a/src/pages/main/music/tracks/all-time.html b/src/pages/main/music/tracks/all-time.html
index 0dc4c163..fbd7df8d 100644
--- a/src/pages/main/music/tracks/all-time.html
+++ b/src/pages/main/music/tracks/all-time.html
@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.allTime.tracks
   size: 50
-permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/all-time/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.allTime.tracks.size }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/all-time/">artists</a> or <a href="/music/albums/all-time/">albums</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="music-chart">
-  {% for item in pagination.items %}
-  {%- assign percentage = item.plays | calculatePlayPercentage: music.allTime.tracks[0].plays -%}
-  <div class="item">
-    <div class="presentation">
-      <div class="count">{{ item.rank | formatNumber }}.</div>
-      <div class="info">
-        <div class="title">
-          <a href="{{ item.url }}">{{ item.title }}</a>
-        </div>
-        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
-      </div>
-    </div>
-    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-  </div>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.allTime.tracks[0].plays %}
\ No newline at end of file
diff --git a/src/pages/main/music/tracks/this-month.html b/src/pages/main/music/tracks/this-month.html
index 1d15776b..4687174b 100644
--- a/src/pages/main/music/tracks/this-month.html
+++ b/src/pages/main/music/tracks/this-month.html
@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.month.tracks
   size: 50
-permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/this-month/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.month.tracks.size }} tracks</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-month/">artists</a> or <a href="/music/albums/this-month/">albums</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="music-chart">
-  {% for item in pagination.items %}
-  {%- assign percentage = item.plays | calculatePlayPercentage: music.month.tracks[0].plays -%}
-  <div class="item">
-    <div class="presentation">
-      <div class="count">{{ item.rank | formatNumber }}.</div>
-      <div class="info">
-        <div class="title">
-          <a href="{{ item.url }}">{{ item.title }}</a>
-        </div>
-        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
-      </div>
-    </div>
-    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-  </div>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.month.tracks[0].plays %}
\ No newline at end of file
diff --git a/src/pages/main/music/tracks/this-week.html b/src/pages/main/music/tracks/this-week.html
index 55d8c1f0..1541a6cb 100644
--- a/src/pages/main/music/tracks/this-week.html
+++ b/src/pages/main/music/tracks/this-week.html
@@ -4,29 +4,11 @@ layout: default
 pagination:
   data: music.week.tracks
   size: 50
-permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/music/tracks/this-week/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: music
 ---
 <p><a class="link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
 <h2 class="page-header">{{ title }}</h2>
 <p>I've listened to <strong class="highlight-text">{{ music.week.tracks.size }} tracks</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | genresToString: 5 }}</strong>.</p>
 <p><strong class="highlight-text">See my</strong> <a href="/music/artists/this-week/">artists</a> or <a href="/music/albums/this-week/">albums</a> for this period.</p>
-<hr class="large-spacing" />
-<div class="music-chart">
-  {% for item in pagination.items %}
-  {%- assign percentage = item.plays | calculatePlayPercentage: music.week.tracks[0].plays -%}
-  <div class="item">
-    <div class="presentation">
-      <div class="count">{{ item.rank | formatNumber }}.</div>
-      <div class="info">
-        <div class="title">
-          <a href="{{ item.url }}">{{ item.title }}</a>
-        </div>
-        <div class="subtext">{{ item.artist }} • {{ item.plays }} plays</div>
-      </div>
-    </div>
-    {% render "partials/media/progress-bar.liquid", percentage:percentage %}
-  </div>
-  {% endfor %}
-</div>
-{% render "partials/widgets/paginator.liquid", pagination:pagination %}
\ No newline at end of file
+{% render "partials/media/music/period/chart.liquid" data:pagination, playTotal: music.week.tracks[0].plays %}
\ No newline at end of file
diff --git a/src/pages/main/watching/favorites/movies.html b/src/pages/main/watching/favorites/movies.html
index 581f03f5..256638d3 100644
--- a/src/pages/main/watching/favorites/movies.html
+++ b/src/pages/main/watching/favorites/movies.html
@@ -8,4 +8,4 @@ schema: watching
 <h2 class="watching page-header">{{ title }}</h2>
 <p>These are my favorite movies. There are many like them, but these are mine.</p>
 <hr class="large-spacing" />
-{% render "partials/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %}
\ No newline at end of file
+{% render "partials/media/watching/favorites-grid.liquid", favorites:movies.favorites, count: 99 %}
\ No newline at end of file
diff --git a/src/pages/main/watching/favorites/shows.html b/src/pages/main/watching/favorites/shows.html
index 0b508708..761eaf77 100644
--- a/src/pages/main/watching/favorites/shows.html
+++ b/src/pages/main/watching/favorites/shows.html
@@ -8,4 +8,4 @@ schema: watching
 <h2 class="watching page-header">{{ title }}</h2>
 <p>These are my favorite shows. There are many like them, but these are mine.</p>
 <hr class="large-spacing" />
-{% render "partials/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %}
\ No newline at end of file
+{% render "partials/media/watching/favorites-grid.liquid", favorites:tv.favorites, count: 99 %}
\ No newline at end of file
diff --git a/src/pages/main/watching/index.html b/src/pages/main/watching/index.html
index 3c923f4a..ed0e4db1 100644
--- a/src/pages/main/watching/index.html
+++ b/src/pages/main/watching/index.html
@@ -6,7 +6,7 @@ schema: watching
 ---
 {% assign featuredMovie = movies.favorites | featuredWatching: 1 | first %}
 <h2 class="watching page-header">{{ title }}</h2>
-{% render "partials/watching/hero.liquid" movie:featuredMovie %}
+{% render "partials/media/watching/hero.liquid" movie:featuredMovie %}
 <p>Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion. You can also take a look at the <a href="/watching/movies-to-watch">movies</a> and <a href="/watching/shows-to-watch">shows</a> I'm planning to watch.</p>
 {% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-movies", text: "Subscribe to my movies feed or follow along on this page" %}
 <h2 id="movies" class="section-header flex-centered">
@@ -26,7 +26,7 @@ schema: watching
   </h2>
 </a>
 {% assign favoriteMovies = movies.favorites | featuredWatching: 6 %}
-{% render "partials/watching/favorites-grid.liquid", favorites:favoriteMovies, count: 6 %}
+{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteMovies, count: 6 %}
 <a class="link-icon flex-centered" href="/watching/favorite-shows">
   <h2 class="section-header flex-centered">
     {% tablericon "star" "Favorite shows" %}
@@ -34,5 +34,5 @@ schema: watching
   </h2>
 </a>
 {% assign favoriteShows = tv.favorites | featuredWatching: 6 %}
-{% render "partials/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
+{% render "partials/media/watching/favorites-grid.liquid", favorites:favoriteShows, count: 6 %}
 <p class="explainer text-small text-centered"><em>This page was last updated on {{ "now" | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}. It typically updates once an hour.</em></p>
\ No newline at end of file
diff --git a/src/pages/main/watching/to-watch/movies.html b/src/pages/main/watching/to-watch/movies.html
index 0fb159de..77d1e940 100644
--- a/src/pages/main/watching/to-watch/movies.html
+++ b/src/pages/main/watching/to-watch/movies.html
@@ -5,7 +5,7 @@ pagination:
   data: movies.toWatch
   alias: movies
   size: 30
-permalink: "/watching/movies-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/watching/movies-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
diff --git a/src/pages/main/watching/to-watch/shows.html b/src/pages/main/watching/to-watch/shows.html
index 9a6f81cc..0d95f4c3 100644
--- a/src/pages/main/watching/to-watch/shows.html
+++ b/src/pages/main/watching/to-watch/shows.html
@@ -5,7 +5,7 @@ pagination:
   data: tv.toWatch
   alias: shows
   size: 30
-permalink: "/watching/shows-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/watching/shows-to-watch/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 schema: watching
 ---
 <p><a class="link-icon flex-centered" href="/watching">{% tablericon "arrow-left" "Go back" %} Go back</a></p>
diff --git a/src/posts.html b/src/posts.html
index 0f67c8b1..634a66e9 100644
--- a/src/posts.html
+++ b/src/posts.html
@@ -6,7 +6,7 @@ pagination:
   size: 8
   reverse: true
   alias: posts
-permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/posts/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 ---
 <div class="posts-wrapper">
   {% for post in pagination.items %}
diff --git a/src/posts/2023/drying-up-now-page-templates-eleventy.md b/src/posts/2023/drying-up-now-page-templates-eleventy.md
index 9cd09a89..bf69ea81 100644
--- a/src/posts/2023/drying-up-now-page-templates-eleventy.md
+++ b/src/posts/2023/drying-up-now-page-templates-eleventy.md
@@ -136,7 +136,7 @@ layout: main
 {{ content }}
 {% render "partials/media/grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %}
 {% render "partials/media/grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8, loading: 'lazy' %}
-{% render "partials/media/album-releases.liquid", albumReleases:albumReleases %}
+{% render "partials/media/music/releases.liquid", albumReleases:albumReleases %}
 {% render "partials/media/grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6, loading: 'lazy' %}
 {% render "partials/now/links.liquid", links:links %}
 {% render "partials/media/grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6, loading: 'lazy' %}
diff --git a/src/tag-list.html b/src/tag-list.html
index 48650e01..29621291 100644
--- a/src/tag-list.html
+++ b/src/tag-list.html
@@ -4,7 +4,7 @@ pagination:
   data: collections
   size: 1
   alias: tag
-permalink: "/tags/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber | plus: 1 }}/{% endif %}index.html"
+permalink: "/tags/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}/{% endif %}index.html"
 eleventyComputed:
   title: '{{ tag }}'
 ---