diff --git a/config/filters/index.js b/config/filters/index.js
index 71704bda..855082cc 100644
--- a/config/filters/index.js
+++ b/config/filters/index.js
@@ -3,7 +3,7 @@ import { URL } from 'url'
 import slugify from 'slugify'
 import sanitizeHtml from 'sanitize-html';
 import authors from '../data/author-map.js'
-import { shuffleArray } from '../utilities/index.js'
+import { shuffleArray, sanitizeMediaString } from '../utilities/index.js'
 
 const utmPattern = /[?&](utm_[^&=]+=[^&#]*)/gi
 const BASE_URL = 'https://coryd.dev'
@@ -223,12 +223,12 @@ export default {
       return normalized
     }),
   calculatePlayPercentage: (plays, mostPlayed) => `${plays/mostPlayed * 100}%`,
-  genresToString: (genres, count = 10) => {
-    const genreData = genres.slice(0, count)
-    if (genreData.length === 0) return ''
-    if (genreData.length === 1) return genreData[0].genre
-    const allButLast = genreData.slice(0, -1).map(g => g.genre).join(', ')
-    const last = genreData[genreData.length - 1].genre
+  listToString: (items, key, count = 10) => {
+    const itemData = items.slice(0, count)
+    if (itemData.length === 0) return ''
+    if (itemData.length === 1) return itemData[0][key]
+    const allButLast = itemData.slice(0, -1).map(item => item[key]).join(', ')
+    const last = itemData[itemData.length - 1][key]
     return `${allButLast} and ${last}`
   },
   bookStatus: (books, status) => books.filter(book => book.status === status),
@@ -249,11 +249,19 @@ export default {
     }).length
   },
   getLastWatched: (show) => show?.['episodes'][show['episodes']?.length - 1]?.['last_watched_at'],
+  sortByPlaysDescending: (data) => data.sort((a, b) => (b['total_plays'] || b['plays']) - (a['total_plays'] || a['plays'])),
+  genreStrings: (genres, key) => genres.map(genre => genre[key]),
+  genreLinks: (genres, count = 10) => {
+    const genreData = genres.slice(0, count)
+    if (genreData.length === 0) return ''
+    if (genreData.length === 1) return genreData[0]
+    const allButLast = genreData.slice(0, -1).map(genre => `<a href="/music/genre/${sanitizeMediaString(genre)}">${genre}</a>`).join(', ')
+    const last = `<a href="/music/genre/${sanitizeMediaString(genreData[genreData.length - 1])}">${genreData[genreData.length - 1]}</a>`
+    return `${allButLast} and ${last}`
+  },
 
     // tags
-  filterTags: (tags) => {
-    return tags.filter((tag) => tag.toLowerCase() !== 'posts')
-  },
+  filterTags: (tags) => tags.filter((tag) => tag.toLowerCase() !== 'posts'),
   formatTag: (string) => {
     const capitalizeFirstLetter = (string) => string.charAt(0).toUpperCase() + string.slice(1)
     const normalizedString = string.toLowerCase()
diff --git a/config/utilities/index.js b/config/utilities/index.js
index 9aff9a39..e11f6c56 100644
--- a/config/utilities/index.js
+++ b/config/utilities/index.js
@@ -1,3 +1,5 @@
+import slugify from 'slugify'
+
 export const shuffleArray = array => {
   for (let i = array.length - 1; i > 0; i--) {
     let j = Math.floor(Math.random() * (i + 1));
@@ -6,4 +8,15 @@ export const shuffleArray = array => {
     array[j] = temp;
   }
   return array
+}
+
+export const sanitizeMediaString = (str) => {
+  if (!str) return null
+  const sanitizedString = str.normalize('NFD').replace(/[\u0300-\u036f\u2010—\.\?\(\)\[\]\{\}]/g, '').replace(/\.{3}/g, '')
+
+  return slugify(sanitizedString, {
+    replacement: '-',
+    remove: /[#,&,+()$~%.'":*?<>{}]/g,
+    lower: true,
+  })
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ec764541..276c61d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "17.2.7",
+  "version": "17.3.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "17.2.7",
+      "version": "17.3.7",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.2.3",
diff --git a/package.json b/package.json
index fbebd742..82ef794d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "17.2.7",
+  "version": "17.3.7",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_data/genres.js b/src/_data/genres.js
new file mode 100644
index 00000000..154114fe
--- /dev/null
+++ b/src/_data/genres.js
@@ -0,0 +1,41 @@
+import { createClient } from '@supabase/supabase-js'
+import { parseCountryField } from './utilities/index.js'
+
+const SUPABASE_URL = process.env.SUPABASE_URL || 'YOUR_SUPABASE_URL'
+const SUPABASE_KEY = process.env.SUPABASE_KEY || 'YOUR_SUPABASE_KEY'
+const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)
+
+export default async function fetchGenresWithArtists() {
+  const { data, error } = await supabase
+    .from('genres')
+    .select(`
+      name,
+      description,
+      total_plays,
+      wiki_link,
+      artists (
+        mbid,
+        name_string,
+        image,
+        total_plays,
+        country,
+        description,
+        favorite
+      )
+    `)
+    .order('id', { ascending: true })
+
+  if (error) {
+    console.error('Error fetching genres with artists:', error)
+    return []
+  }
+
+  data.forEach(genre => {
+    genre.artists = genre.artists.map(artist => ({
+      ...artist,
+      country: parseCountryField(artist.country)
+    }))
+  })
+
+  return data
+}
\ No newline at end of file
diff --git a/src/_data/music.js b/src/_data/music.js
index 42e288d9..0acb5ea6 100644
--- a/src/_data/music.js
+++ b/src/_data/music.js
@@ -111,9 +111,9 @@ const aggregateGenres = (data) => {
     if (!genreAggregation[genre]) {
       genreAggregation[genre] = { genre, plays: 0 }
     }
-    genreAggregation[genre].plays++
+    genreAggregation[genre]['plays']++
   })
-  return Object.values(genreAggregation).sort((a, b) => b.plays - a.plays)
+  return Object.values(genreAggregation).sort((a, b) => b['plays'] - a['plays'])
 }
 
 export default async function() {
diff --git a/src/_data/utilities/index.js b/src/_data/utilities/index.js
index 3af71282..9afb5f1c 100644
--- a/src/_data/utilities/index.js
+++ b/src/_data/utilities/index.js
@@ -1,6 +1,7 @@
 import slugify from 'slugify'
 
 export const sanitizeMediaString = (str) => {
+  if (!str) return null
   const sanitizedString = str.normalize('NFD').replace(/[\u0300-\u036f\u2010—\.\?\(\)\[\]\{\}]/g, '').replace(/\.{3}/g, '')
 
   return slugify(sanitizedString, {
diff --git a/src/_includes/partials/media/grid.liquid b/src/_includes/partials/media/grid.liquid
index 1b80b9d1..1ec81e40 100644
--- a/src/_includes/partials/media/grid.liquid
+++ b/src/_includes/partials/media/grid.liquid
@@ -1,30 +1,28 @@
-{% if data.size > 0 %}
-  {% assign media = data | normalizeMedia %}
-  <div class="media-grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
-    {% for item in media limit: count %}
-      {% assign alt = item.alt | strip | escape %}
-      <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
-        <div class="item-wrapper shadow">
-          <div class="meta-text">
-            {% if item.title %}
-              <div class="header">{{ item.title }}</div>
-            {% endif %}
-            {% if item.subtext %}
-              <div class="subheader">
-                {{ item.subtext }}
-              </div>
-            {% endif %}
-          </div>
-          {%- capture loadingStrategy -%}
-            {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
-          {%- endcapture -%}
-          {% if shape == 'square' %}
-            <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
-          {% else %}
-            <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
+{% assign media = data | normalizeMedia %}
+<div class="media-grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
+  {% for item in media limit: count %}
+    {% assign alt = item.alt | strip | escape %}
+    <a href="{{ item.url | stripUtm }}" title="{{ alt }}">
+      <div class="item-wrapper shadow">
+        <div class="meta-text">
+          {% if item.title %}
+            <div class="header">{{ item.title }}</div>
+          {% endif %}
+          {% if item.subtext %}
+            <div class="subheader">
+              {{ item.subtext }}
+            </div>
           {% endif %}
         </div>
-      </a>
-    {% endfor %}
-  </div>
-{% endif %}
\ No newline at end of file
+        {%- capture loadingStrategy -%}
+          {%- if loading -%}{{ loading }}{%- else -%}lazy{%- endif -%}
+        {%- endcapture -%}
+        {% if shape == 'square' %}
+          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=240&h=240&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="240" height="240" />
+        {% else %}
+          <img src="https://coryd.dev/.netlify/images/?url={{ item.image }}&fit=cover&w=200&h=307&fm=webp&q=85"{% if alt %} alt="{{ alt }}"{% endif %} loading="{{ loadingStrategy }}" decoding="async" width="200" height="307" />
+        {% endif %}
+      </div>
+    </a>
+  {% endfor %}
+</div>
\ No newline at end of file
diff --git a/src/_includes/partials/widgets/tags.liquid b/src/_includes/partials/widgets/tags.liquid
index fc64d808..41205a14 100644
--- a/src/_includes/partials/widgets/tags.liquid
+++ b/src/_includes/partials/widgets/tags.liquid
@@ -1,6 +1,6 @@
 {% assign filteredTags = tags | filterTags %}
 <div{% if hasSpace %} style="margin-bottom:var(--sizing-md)"{% endif %}>
   {% for tag in filteredTags limit: 10 %}
-  <a class="post-tag" href="/tags/{{ tag | downcase }}">{{ tag | formatTag }}</a>
+  <a class="tag-element" href="/tags/{{ tag | downcase }}">{{ tag | formatTag }}</a>
   {% endfor %}
 </div>
\ No newline at end of file
diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css
index 9bfa515a..112451e2 100644
--- a/src/assets/styles/base/index.css
+++ b/src/assets/styles/base/index.css
@@ -477,7 +477,7 @@ article {
   }
 }
 
-.post-tag {
+.tag-element {
   margin-bottom: var(--sizing-lg);
   display: inline-block;
 
@@ -639,7 +639,7 @@ li {
     }
   }
 
-  .post-tag {
+  .tag-element {
     margin-bottom: var(--sizing-sm);
 
     &:not(:last-child) {
diff --git a/src/assets/styles/pages/music.css b/src/assets/styles/pages/music.css
index 26554417..28e9c16f 100644
--- a/src/assets/styles/pages/music.css
+++ b/src/assets/styles/pages/music.css
@@ -1,6 +1,4 @@
 .artist-focus {
-  border-bottom: 0;
-
   & img {
     border: 1px solid var(--accent-color);
   }
@@ -51,6 +49,11 @@
   }
 }
 
+.artist-focus,
+.genre-focus {
+  border-bottom: 0;
+}
+
 @media screen and (min-width: 768px) {
   .artist-focus {
     & .artist-display {
diff --git a/src/pages/main/books/book.html b/src/pages/main/books/book.html
index d301c2c0..8364cd53 100644
--- a/src/pages/main/books/book.html
+++ b/src/pages/main/books/book.html
@@ -4,7 +4,7 @@ pagination:
   data: books
   size: 1
   alias: book
-permalink: /books/{{ book.isbn }}/
+permalink: /books/{{ book.isbn }}/index.html
 isbn: {{ book.isbn }}
 schema: book
 ---
diff --git a/src/pages/main/music/albums/3-months.html b/src/pages/main/music/albums/3-months.html
index f57f0d15..f4f6df0e 100644
--- a/src/pages/main/music/albums/3-months.html
+++ b/src/pages/main/music/albums/3-months.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>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 {{ music.threeMonth.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% 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 434dd913..82d05a49 100644
--- a/src/pages/main/music/albums/all-time.html
+++ b/src/pages/main/music/albums/all-time.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>I've listened to <strong class="highlight-text">{{ music.allTime.albums.size }} albums</strong> and most of what I listen to is {{ music.allTime.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% 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 79324a3a..fe0f7284 100644
--- a/src/pages/main/music/albums/this-month.html
+++ b/src/pages/main/music/albums/this-month.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>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 {{ music.month.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% 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 2e9b7f26..f696fa30 100644
--- a/src/pages/main/music/albums/this-week.html
+++ b/src/pages/main/music/albums/this-week.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>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 {{ music.week.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% 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 40a7bc46..b99d18bf 100644
--- a/src/pages/main/music/artists/3-months.html
+++ b/src/pages/main/music/artists/3-months.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>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 {{ music.threeMonth.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% 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 73125d10..c3e84d64 100644
--- a/src/pages/main/music/artists/all-time.html
+++ b/src/pages/main/music/artists/all-time.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>I've listened to <strong class="highlight-text">{{ music.allTime.artists.size }} artists</strong> and most of what I listen to is {{ music.allTime.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/artists/artist.html b/src/pages/main/music/artists/artist.html
index 2c5d7572..ba14f740 100644
--- a/src/pages/main/music/artists/artist.html
+++ b/src/pages/main/music/artists/artist.html
@@ -4,7 +4,7 @@ pagination:
   data: artists
   size: 1
   alias: artist
-permalink: /music/artists/{{ artist.name_string | slugify | downcase }}-{{ artist.country | slugify | downcase}}/
+permalink: /music/artists/{{ artist.name_string | slugify | downcase }}-{{ artist.country | slugify | downcase}}/index.html
 updated: "now"
 schema: artist
 ---
@@ -28,14 +28,18 @@ schema: artist
       {%- if artist.total_plays > 0 -%}
         <p class="sub-meta"><strong class="highlight-text">{{ artist.total_plays }} plays</strong></p>
       {%- endif -%}
-      <p class="sub-meta">{{ artist.genre }}</p>
+      <p class="sub-meta">
+        <a href="https://coryd.dev/music/genre/{{ artist.genre | slugify | downcase }}">
+          {{ artist.genre }}
+        </a>
+      </p>
       <p class="sub-meta">
         <a class="brain" href="https://musicbrainz.org/artist/{{ artist.mbid }}">{% tablericon "brain" "MusicBrainz" %}</a>
       </p>
     </div>
   </div>
   {%- if artist.description -%}
-  <div data-toggle-content class="text-toggle-hidden">{{ artist.description | markdown }}</div>
+  <div data-toggle-content class="text-toggle-hidden"><em>{{ artist.description | markdown }}</em></div>
   <button data-toggle-button>Show more</button>
   {%- endif -%}
   <table>
diff --git a/src/pages/main/music/artists/this-month.html b/src/pages/main/music/artists/this-month.html
index 73210a23..5d7ad732 100644
--- a/src/pages/main/music/artists/this-month.html
+++ b/src/pages/main/music/artists/this-month.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>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 {{ music.month.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% 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 e37f11d2..3e1c14a2 100644
--- a/src/pages/main/music/artists/this-week.html
+++ b/src/pages/main/music/artists/this-week.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <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>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 {{ music.week.genres | sortByPlaysDescending | genreStrings: "genre" | genreLinks: 5 }}.</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>
 {% render "partials/media/music/period/grid.liquid" data:pagination %}
\ No newline at end of file
diff --git a/src/pages/main/music/genre.html b/src/pages/main/music/genre.html
new file mode 100644
index 00000000..761d7a8a
--- /dev/null
+++ b/src/pages/main/music/genre.html
@@ -0,0 +1,30 @@
+---
+layout: default
+pagination:
+  data: genres
+  size: 1
+  alias: genre
+permalink: /music/genre/{{ genre.name | slugify | downcase }}/index.html
+updated: "now"
+schema: genre
+---
+{% assign artists = pagination.artists %}
+{% capture js %}
+  {% render "../../../assets/scripts/text-toggle.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
+<noscript><style>[data-toggle-content].text-toggle-hidden {height: unset !important;overflow: unset !important;margin-bottom: unset !important;}[data-toggle-content].text-toggle-hidden::after {display: none !important;}</style></noscript>
+<a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
+<h2 class="page-header">{{ genre.name }}</h2>
+<article class="genre-focus">
+  <p>My top <strong class="highlight-text">{{ genre.name }}</strong> artists are <strong class="highlight-text">{{ genre.artists | sortByPlaysDescending | listToString: "name_string", 5 }}</strong>. I've listened to <strong class="highlight-text">{{ genre.name }}</strong> tracks <strong class="highlight-text">{{ genre.total_plays | formatNumber }}</strong> times.</p>
+  <hr class="large-spacing" />
+  {%- if genre.description -%}
+  <div data-toggle-content class="text-toggle-hidden">
+    <em>{{ genre.description | markdown }}</em>
+    <p><a href="{{ genre.wiki_link }}">Continue reading at Wikipedia.</a></p>
+    <p class="text-small"><em>Wikipedia content provided under the terms of the <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons BY-SA license</a></em></p>
+  </div>
+  <button data-toggle-button>Show more</button>
+  {%- endif -%}
+</article>
\ No newline at end of file
diff --git a/src/pages/main/music/index.html b/src/pages/main/music/index.html
index 72994aac..37ad63db 100644
--- a/src/pages/main/music/index.html
+++ b/src/pages/main/music/index.html
@@ -11,7 +11,7 @@ schema: music
 <script>{{ js }}</script>
 <h2 class="page-header">{{ title }}</h2>
 <p>This is everything I've been listening to recently — it's collected in a database as I listen to it and displayed here. <a href="https://coryd.dev/posts/2024/improving-my-self-hosted-scrobbling-implementation/">You can read more about the technical details, if you'd like.</a></p>
-<p>I mostly listen to <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>. This week I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong>.</p>
+<p>I mostly listen to {{ genres | sortByPlaysDescending | genreStrings: "name" | genreLinks: 5 }}. This week I've listened to <strong class="highlight-text">{{ music.week.artists.size }} artists</strong>, <strong class="highlight-text">{{ music.week.albums.size }} albums</strong> and <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong>.</p>
 {% render "partials/widgets/now-playing.liquid" %}
 {% render "partials/banners/rss.liquid", url: "https://feedpress.me/coryd-artist-charts", text: "I also have a feed of weekly artist charts I generate from this data" %}
 <hr class="large-spacing" />
diff --git a/src/pages/main/music/tracks/3-months.html b/src/pages/main/music/tracks/3-months.html
index 4bbfa031..419bd96b 100644
--- a/src/pages/main/music/tracks/3-months.html
+++ b/src/pages/main/music/tracks/3-months.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <h2 class="page-header">{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.threeMonth.totalTracks }} 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>I've listened to <strong class="highlight-text">{{ music.threeMonth.totalTracks }} tracks</strong> over the last 3 months and most of what I've listened to has been <strong class="highlight-text">{{ music.threeMonth.genres | listToString: "genre", 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>
 {% 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 777d5e35..ee7e867d 100644
--- a/src/pages/main/music/tracks/all-time.html
+++ b/src/pages/main/music/tracks/all-time.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <h2 class="page-header">{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.allTime.totalTracks }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | genresToString: 5 }}</strong>.</p>
+<p>I've listened to <strong class="highlight-text">{{ music.allTime.totalTracks }} tracks</strong> and most of what I've listened to has been <strong class="highlight-text">{{ music.allTime.genres | listToString: "genre", 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>
 {% 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 526e85b0..ee33ced8 100644
--- a/src/pages/main/music/tracks/this-month.html
+++ b/src/pages/main/music/tracks/this-month.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <h2 class="page-header">{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.month.totalTracks }} 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>I've listened to <strong class="highlight-text">{{ music.month.totalTracks }} tracks</strong> this month and most of what I've listened to has been <strong class="highlight-text">{{ music.month.genres | listToString: "genre", 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>
 {% 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 d3953bc6..051564c7 100644
--- a/src/pages/main/music/tracks/this-week.html
+++ b/src/pages/main/music/tracks/this-week.html
@@ -10,6 +10,6 @@ schema: music
 ---
 <a class="back-link-header link-icon flex-centered" href="/music">{% tablericon "arrow-left" "Go back" %} Go back</a>
 <h2 class="page-header">{{ title }}</h2>
-<p>I've listened to <strong class="highlight-text">{{ music.week.totalTracks }} 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>I've listened to <strong class="highlight-text">{{ music.week.totalTracks }} tracks</strong> this week and most of what I've listened to has been <strong class="highlight-text">{{ music.week.genres | listToString: "genre", 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>
 {% 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/movie.html b/src/pages/main/watching/movie.html
index 24d797ba..752ec7ad 100644
--- a/src/pages/main/watching/movie.html
+++ b/src/pages/main/watching/movie.html
@@ -4,7 +4,7 @@ pagination:
   data: movies.movies
   size: 1
   alias: movie
-permalink: /watching/movies/{{ movie.id }}/
+permalink: /watching/movies/{{ movie.id }}/index.html
 schema: movie
 ---
 {%- capture alt -%}
diff --git a/src/pages/main/watching/show.html b/src/pages/main/watching/show.html
index 51176993..23e89e9e 100644
--- a/src/pages/main/watching/show.html
+++ b/src/pages/main/watching/show.html
@@ -4,7 +4,7 @@ pagination:
   data: tv.shows
   size: 1
   alias: show
-permalink: /watching/shows/{{ show.tmdb_id }}/
+permalink: /watching/shows/{{ show.tmdb_id }}/index.html
 schema: show
 ---
 {%- capture alt -%}