diff --git a/internal/anime/details_handler.go b/internal/anime/details_handler.go
index b55a767..9fe8bf7 100644
--- a/internal/anime/details_handler.go
+++ b/internal/anime/details_handler.go
@@ -271,6 +271,12 @@ func (h *AnimeHandler) loadAnimeDetailsSection(ctx context.Context, id int, sect
 			return nil, "", err
 		}
 		return h.animeEpisodeCount(ctx, anime, time.Now()), "anime_episode_count", nil
+	case "audio-availability":
+		anime, err := h.svc.GetAnimeByID(ctx, id)
+		if err != nil {
+			return nil, "", err
+		}
+		return h.animeAudioAvailability(ctx, anime), "anime_audio_availability", nil
 	case "themes":
 		data, err := h.svc.GetThemes(ctx, id)
 		return data, "anime_themes", err
diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 5b3e300..d3880ed 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -35,16 +35,7 @@
         {{if $anime.Status}}<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.Status}}</span>{{end}}
         {{if $anime.Season}}<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.Premiered}}</span>{{end}}
         {{if $anime.ShortRating}}<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">{{$anime.ShortRating}}</span>{{end}}
-        {{if .AudioAvailability}}
-          <span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">
-            <svg class="size-3.5 shrink-0 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M3 14a9 9 0 0 1 18 0"></path>
-              <path d="M21 14v3a2 2 0 0 1-2 2h-1v-7h1a2 2 0 0 1 2 2Z"></path>
-              <path d="M3 14v3a2 2 0 0 0 2 2h1v-7H5a2 2 0 0 0-2 2Z"></path>
-            </svg>
-            {{.AudioAvailability}}
-          </span>
-        {{end}}
+        {{template "anime_audio_availability_loading" dict "AnimeID" $anime.MalID}}
       </div>
 
       <div class="mb-8">
diff --git a/templates/components/anime_episode_count.gohtml b/templates/components/anime_episode_count.gohtml
index cdb26b1..48e7571 100644
--- a/templates/components/anime_episode_count.gohtml
+++ b/templates/components/anime_episode_count.gohtml
@@ -15,6 +15,28 @@
 {{end}}
 {{end}}
 
+{{define "anime_audio_availability"}}
+{{if .Items}}
+<span class="flex min-w-0 items-center gap-1.5 before:mr-1 before:block before:size-0.75 before:shrink-0 before:rounded-full before:bg-current before:opacity-65 first:before:hidden">
+  <svg class="size-3.5 shrink-0 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="M3 14a9 9 0 0 1 18 0"></path>
+    <path d="M21 14v3a2 2 0 0 1-2 2h-1v-7h1a2 2 0 0 1 2 2Z"></path>
+    <path d="M3 14v3a2 2 0 0 0 2 2h1v-7H5a2 2 0 0 0-2 2Z"></path>
+  </svg>
+  {{.Items}}
+</span>
+{{end}}
+{{end}}
+
+{{define "anime_audio_availability_loading"}}
+<span
+  hx-get="/anime/{{.AnimeID}}?section=audio-availability"
+  hx-trigger="load"
+  hx-swap="outerHTML"
+  class="hidden"
+></span>
+{{end}}
+
 {{define "anime_episode_count_loading"}}
 {{if .Count}}
 <span