diff --git a/package.json b/package.json
index 7582d208..2919bcae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {
diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index 6c0f3306..0d6ad623 100644
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@@ -5,15 +5,62 @@ layout: default
   {% render "../assets/styles/pages/now.css" %}
   {% render "../assets/styles/components/media-grid.css" %}
   {% render "../assets/styles/components/progress-bar.css" %}
+  {% render "../assets/styles/components/buttons.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
+{% capture js %}
+  {% render "../assets/scripts/media-toggles.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
 {{ content }}
-{% render "partials/now/media-grid.liquid", data:music.artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: "eager" %}
-{% render "partials/now/media-grid.liquid", data:music.albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %}
+<div class="now__section--header-wrapper">
+  <h2 id="artists" class="now__section--header flex--centered">
+    {% tablericon "microphone-2" "Artists" %}
+    Artists
+  </h2>
+  <div class="now__section--header-buttons client-side">
+    <button class="small active" data-toggle="artists-window">This week</button>
+    <button class="small secondary" data-toggle="artists-month">This month</button>
+  </div>
+</div>
+<div id="artists-window">
+  {% render "partials/now/media-grid.liquid", data:music.artists, shape: "square", count: 8, loading: "eager" %}
+</div>
+<div class="hidden" id="artists-month">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.month.artists, shape: "square", count: 8, loading: "eager" %}
+</div>
+<div class="now__section--header-wrapper">
+  <h2 id="albums" class="now__section--header flex--centered">
+    {% tablericon "vinyl" "Albums" %}
+    Albums
+  </h2>
+  <div class="now__section--header-buttons client-side">
+    <button class="small active" data-toggle="albums-window">This week</button>
+    <button class="small secondary" data-toggle="albums-month">This month</button>
+  </div>
+</div>
+<div id="albums-window">
+  {% render "partials/now/media-grid.liquid", data:music.albums, shape: "square", count: 8 %}
+</div>
+<div class="hidden" id="albums-month">
+  {% render "partials/now/media-grid.liquid", data:musicCharts.month.albums, shape: "square", count: 8 %}
+</div>
 {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
-{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6 %}
+<h2 id="books" class="now__section--header flex--centered">
+  {% tablericon "books" "Books" %}
+  Books
+</h2>
+{% render "partials/now/media-grid.liquid", data:books, shape: "vertical", count: 6 %}
 {% render "partials/recent-links.liquid", links:links %}
+<h2 id="movies" class="now__section--header flex--centered">
+  {% tablericon "movie" "Movies" %}
+  Movies
+</h2>
 {% render "partials/now/media-grid.liquid", data:movies, icon: "movie", title: "Movies", shape: "vertical", count: 6 %}
+<h2 id="tv" class="now__section--header flex--centered">
+  {% tablericon "device-tv" "TV" %}
+  TV
+</h2>
 {% render "partials/now/media-grid.liquid", data:tv, icon: "device-tv", title: "TV", shape: "vertical", count: 6 %}
 <p class="now__explainer text--centered">
   This is a <a href="https://nownownow.com/about">now page</a>, and if you have your own site, <a href="https://nownownow.com/about">you should make one too</a>.
diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid
index 64db184d..5862001b 100644
--- a/src/_includes/partials/now/media-grid.liquid
+++ b/src/_includes/partials/now/media-grid.liquid
@@ -7,10 +7,6 @@
   <style>{{ css }}</style>
   {% endif %}
   {% assign media = data | normalizeMedia %}
-  <h2 id="{{ title | downcase }}" class="now__section--header flex--centered">
-    {% tablericon icon title %}
-    {{ title }}
-  </h2>
   <div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
     {% for item in media limit: count %}
       {% assign alt = item.alt | strip | escape %}
diff --git a/src/assets/scripts/media-toggles.js b/src/assets/scripts/media-toggles.js
new file mode 100644
index 00000000..c3ce2077
--- /dev/null
+++ b/src/assets/scripts/media-toggles.js
@@ -0,0 +1,30 @@
+window.onload = () => {
+  const initializeButtonSet = (buttonSet) => {
+    const buttons = buttonSet.querySelectorAll('button')
+    const buttonIds = Array.from(buttons).map(button => button.getAttribute('data-toggle'))
+
+    buttons.forEach(button => {
+      button.addEventListener('click', function () {
+        const targetId = this.getAttribute('data-toggle')
+        const targetContent = document.getElementById(targetId)
+
+        buttons.forEach(btn => {
+          btn.classList.remove('active')
+          btn.classList.add('secondary')
+        })
+
+        buttonIds.forEach(id => {
+          document.getElementById(id).classList.add('hidden')
+        })
+
+        this.classList.remove('secondary')
+        this.classList.add('active')
+
+        targetContent.classList.remove('hidden')
+      })
+    })
+  }
+
+  const buttonSets = document.querySelectorAll('.now__section--header-buttons')
+  buttonSets.forEach(initializeButtonSet)
+}
\ No newline at end of file
diff --git a/src/assets/styles/components/buttons.css b/src/assets/styles/components/buttons.css
new file mode 100644
index 00000000..e841c1a7
--- /dev/null
+++ b/src/assets/styles/components/buttons.css
@@ -0,0 +1,48 @@
+button:not(.theme__toggle, .share) {
+  border-radius: var(--rounded-full);
+  padding: var(--sizing-sm) var(--sizing-lg);
+  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-base);
+  color: var(--color-lightest);
+  background-color: var(--accent-color);
+  appearance: none;
+  border: 2px solid var(--accent-color);
+  transition-property: all;
+}
+
+button:not(.theme__toggle, .share, .active):hover,
+button:not(.theme__toggle, .share, .active):active,
+button:not(.theme__toggle, .share, .active):focus {
+  background-color: var(--accent-color-hover);
+  border-color: var(--accent-color-hover);
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+button.small {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  padding: var(--sizing-xs) var(--sizing-sm);
+}
+
+button.secondary {
+  color: var(--accent-color);
+  background: transparent;
+}
+
+button.secondary:not(.theme__toggle, .share):hover,
+button.secondary:not(.theme__toggle, .share):active,
+button.secondary:not(.theme__toggle, .share):focus {
+  color: var(--accent-color-hover);
+  background: transparent;
+}
+
+button.active {
+  cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css
index c1029b1a..087452b9 100644
--- a/src/assets/styles/components/forms.css
+++ b/src/assets/styles/components/forms.css
@@ -31,33 +31,6 @@ textarea:focus {
   border: 1px solid var(--accent-color-hover);
 }
 
-button:not(.theme__toggle, .share) {
-  border-radius: var(--rounded-full);
-  padding: var(--sizing-sm) var(--sizing-lg);
-  margin: 0 var(--sizing-xs) var(--sizing-md) 0;
-  cursor: pointer;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-base);
-  color: var(--color-lightest);
-  background-color: var(--accent-color);
-  appearance: none;
-  border: none;
-  transition-property: background-color;
-}
-
-button:not(.theme__toggle, .share):hover,
-button:not(.theme__toggle, .share):active,
-button:not(.theme__toggle, .share):focus {
-  color: var(--color-lightest);
-  background-color: var(--accent-color-hover);
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
 .search__results {
   margin-top: 0;
   padding: 0;
diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css
index 10282ef0..62dd3c87 100644
--- a/src/assets/styles/components/media-grid.css
+++ b/src/assets/styles/components/media-grid.css
@@ -4,12 +4,22 @@
 }
 
 .now__section--header,
+.now__section--header-buttons,
 .recent__links-header {
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.now__section--header:first-of-type {
-  margin-top: 0;
+.now__section--header-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.now__section--header-buttons > button {
+  margin-bottom: 0 !important;
+}
+
+.now__section--header-buttons > button:last-of-type {
+  margin-right: 0 !important;
 }
 
 .media__grid {
diff --git a/src/assets/styles/pages/now.css b/src/assets/styles/pages/now.css
index beb67967..19ea289f 100644
--- a/src/assets/styles/pages/now.css
+++ b/src/assets/styles/pages/now.css
@@ -19,7 +19,7 @@
   margin: var(--sizing-3xl) 0 var(--sizing-lg);
 }
 
-.now__section--header:first-of-type {
+.default__wrapper > .now__section--header:first-of-type {
   margin-top: 0;
 }
 
diff --git a/src/pages/contact.md b/src/pages/contact.md
index 6afd252f..c524e1fd 100644
--- a/src/pages/contact.md
+++ b/src/pages/contact.md
@@ -6,6 +6,7 @@ description: 'How to contact me.'
 ---
 {% capture css %}
   {% render "../assets/styles/components/forms.css" %}
+  {% render "../assets/styles/components/buttons.css" %}
   {% render "../assets/styles/pages/contact.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
diff --git a/src/posts/2023/2023-in-review.html b/src/posts/2023/2023-in-review.html
index c4600190..6721be8a 100644
--- a/src/posts/2023/2023-in-review.html
+++ b/src/posts/2023/2023-in-review.html
@@ -14,8 +14,16 @@ tags: ['books', 'music', 'development', 'Eleventy']
   <li><a href="https://www.last.fm/user/coryd_">I listened to a bunch of music</a></li>
   <li><a href="https://trakt.tv/users/cdransf">I watched a bunch of movies and TV</a>, but picking favorites feels weird when so much of that consisted of catching up on "classics" and things I'd either ignored or never seen.</li>
 </ul>
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, icon: "books", title: "Favorite books", shape: "vertical", count: 6, embeddedStyles: true %}
-{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, icon: "vinyl", title: "Favorite albums", shape: "square", count: 8 %}
+<h2 class="now__section--header flex--centered">
+  {% tablericon "books" "Favorite books" %}
+  Favorite books
+</h2>
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6, embeddedStyles: true %}
+<h2 class="now__section--header flex--centered">
+  {% tablericon "vinyl" "Favorite albums" %}
+  Favorite books
+</h2>
+{% render "partials/now/media-grid.liquid", data:roundups['2023'].albums, shape: "square", count: 8 %}
 
 <p><strong><a href="https://coryd.dev">I wrote some things:</a></strong></p>
 <ul>