diff --git a/web/shared/ui.go b/web/shared/ui.go
index 7ba3276..0fcb1f9 100644
--- a/web/shared/ui.go
+++ b/web/shared/ui.go
@@ -4,7 +4,7 @@ package shared
 func TabClass(active bool) string {
 	base := "shrink-0 whitespace-nowrap bg-(--panel-soft) px-2 py-1 text-xs text-(--text-muted) no-underline hover:bg-(--surface-tab-hover) hover:text-(--text) hover:no-underline"
 	if active {
-		return "shrink-0 whitespace-nowrap bg-(--surface-tab-active) px-2 py-1 text-xs text-(--accent) no-underline hover:no-underline"
+		return "shrink-0 whitespace-nowrap bg-(--surface-tab-active) px-2 py-1 text-xs text-(--text-tab-active) no-underline hover:no-underline"
 	}
 	return base
 }
diff --git a/web/templates/catalog.templ b/web/templates/catalog.templ
index dceb456..91e233e 100644
--- a/web/templates/catalog.templ
+++ b/web/templates/catalog.templ
@@ -7,7 +7,7 @@ import "mal/web/shared/layout"
 
 templ Catalog() {
 	@layout.Layout("mal - catalog", true) {
-		<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="catalog-content">
+		<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="catalog-content">
 			<div class="col-span-full" hx-get="/api/catalog?page=1" hx-trigger="load" hx-swap="outerHTML">
 				@ui.LoadingIndicator("Loading catalog")
 			</div>
diff --git a/web/templates/discovery.templ b/web/templates/discovery.templ
index 32169c0..ab8977d 100644
--- a/web/templates/discovery.templ
+++ b/web/templates/discovery.templ
@@ -20,7 +20,7 @@ templ Discover() {
 					hx-target="#discover-content"
 					hx-trigger="click"
 					data-tab-trigger
-					data-tab-active-classes="bg-(--surface-tab-active) text-(--accent)"
+					data-tab-active-classes="bg-(--surface-tab-active) text-(--text-tab-active)"
 					data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
 				>
 					airing now
@@ -32,13 +32,13 @@ templ Discover() {
 					hx-target="#discover-content"
 					hx-trigger="click"
 					data-tab-trigger
-					data-tab-active-classes="bg-(--surface-tab-active) text-(--accent)"
+					data-tab-active-classes="bg-(--surface-tab-active) text-(--text-tab-active)"
 					data-tab-inactive-classes="bg-(--panel-soft) text-(--text-muted)"
 				>
 					upcoming
 				</button>
 			</div>
-			<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
+			<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
 				<div class="col-span-full">
 					@ui.LoadingIndicator("Loading discover")
 				</div>
diff --git a/web/templates/studio.templ b/web/templates/studio.templ
index 637d06c..e4f50ca 100644
--- a/web/templates/studio.templ
+++ b/web/templates/studio.templ
@@ -41,7 +41,7 @@ templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNe
 			</div>
 			<div>
 				<h2 class="mb-3 text-lg font-semibold">Anime</h2>
-				<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5" id="studio-anime-content">
+				<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="studio-anime-content">
 					for _, anime := range animes {
 						<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
 							@components.AnimeCard(components.AnimeCardProps{