diff --git a/package-lock.json b/package-lock.json
index 98d45102..5411b1be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "22.1.2",
+  "version": "22.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "22.1.2",
+      "version": "22.1.4",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
diff --git a/package.json b/package.json
index 8f59cffd..0a87eb39 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "22.1.3",
+  "version": "22.1.4",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
index 93fa9a75..c70f1f21 100644
--- a/src/assets/styles/components/buttons.css
+++ b/src/assets/styles/components/buttons.css
@@ -1,50 +1,5 @@
-/* music - chart toggle styles */
-#tracks-recent ~ .tracks-recent,
-#tracks-window ~ .tracks-window {
-  display: none;
-}
+@import url('./tab-buttons.css');
 
-#tracks-recent:checked ~ .tracks-recent,
-#tracks-window:checked ~ .tracks-window {
-  display: block;
-}
-
-input[id="tracks-recent"] ~ [for="tracks-recent"],
-input[id="tracks-window"] ~ [for="tracks-window"] {
-  margin-bottom: var(--sizing-lg);
-}
-
-#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
-#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
-#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
-#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
-  color: var(--accent-color-hover);
-  background: transparent;
-}
-
-#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus,
-#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus-within,
-#tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
-#tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
-  transition-property: none;
-  outline: 2px dashed var(--accent-color);
-  border: 0;
-}
-
-#tracks-recent:checked ~ [for="tracks-recent"],
-#tracks-window:checked ~ [for="tracks-window"] {
-  cursor: not-allowed;
-  border-color: var(--accent-color);
-  background-color: var(--accent-color);
-}
-
-#tracks-recent:not(:checked) ~ [for="tracks-recent"],
-#tracks-window:not(:checked) ~ [for="tracks-window"] {
-  color: var(--accent-color);
-  background: transparent;
-}
-
-/* generic button styles */
 button,
 .button {
   appearance: none;
diff --git a/src/assets/styles/components/tab-buttons.css b/src/assets/styles/components/tab-buttons.css
new file mode 100644
index 00000000..c5d7877b
--- /dev/null
+++ b/src/assets/styles/components/tab-buttons.css
@@ -0,0 +1,44 @@
+#tracks-recent ~ .tracks-recent,
+#tracks-window ~ .tracks-window {
+  display: none;
+}
+
+#tracks-recent:checked ~ .tracks-recent,
+#tracks-window:checked ~ .tracks-window {
+  display: block;
+}
+
+input[id="tracks-recent"] ~ [for="tracks-recent"],
+input[id="tracks-window"] ~ [for="tracks-window"] {
+  margin-bottom: var(--sizing-lg);
+}
+
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:hover,
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:active,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:hover,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:active {
+  color: var(--accent-color-hover);
+  background: transparent;
+}
+
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus,
+#tracks-recent:not(:checked) ~ [for="tracks-recent"]:focus-within,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:focus,
+#tracks-window:not(:checked) ~ [for="tracks-window"]:focus-within {
+  transition-property: none;
+  outline: 2px dashed var(--accent-color);
+  border: 0;
+}
+
+#tracks-recent:checked ~ [for="tracks-recent"],
+#tracks-window:checked ~ [for="tracks-window"] {
+  cursor: not-allowed;
+  border-color: var(--accent-color);
+  background-color: var(--accent-color);
+}
+
+#tracks-recent:not(:checked) ~ [for="tracks-recent"],
+#tracks-window:not(:checked) ~ [for="tracks-window"] {
+  color: var(--accent-color);
+  background: transparent;
+}
\ No newline at end of file
diff --git a/src/pages/dynamic/music/index.html b/src/pages/dynamic/music/index.html
index 4fc13d14..7d9b6996 100644
--- a/src/pages/dynamic/music/index.html
+++ b/src/pages/dynamic/music/index.html
@@ -10,7 +10,7 @@ schema: music-index
 <p>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> this week. Most of that has been {{ music.week.genres | sortByPlaysDescending: "plays" | genreStrings: "genre" | mediaLinks: "genre", 5 }}.</p>
 <p><strong class="highlight-text">See more of the</strong> <a href="/music/artists/this-week/">artists</a>, <a href="/music/albums/this-week/">albums</a> or <a href="/music/tracks/this-week/">tracks</a> I've listened to this week. <strong class="highlight-text">Or take a look at what I've listened to</strong> <a href="/music/this-month">this month</a> or <a href="/music/three-months">over the last 3 months</a>.</p>
 <p><a href="/music/concerts">You can also take a look at the concerts I've been to.</a></p>
-{% render "partials/blocks/now-playing.liquid" %}
+{% render "partials/blocks/now-playing.liquid", music:music %}
 <hr />
 <h3 id="artists" class="section-header no-top-margin">
   <a class="link-icon" href="/music/artists/this-week">