diff --git a/src/routes/songs/+page.svelte b/src/routes/songs/+page.svelte
index 67e7f48..2647a6e 100644
--- a/src/routes/songs/+page.svelte
+++ b/src/routes/songs/+page.svelte
@@ -15,9 +15,9 @@
 	import { addAllToQueue, playAllNext } from "$lib/player/player.svelte";
 	import { trackFromSongRow } from "$lib/player/types";
 	import type { PageData } from "./$types";
-	import { SearchParamsSchema } from "./schema";
+	import { SearchParamsSchemaClient } from "./schema";
 
-	const params = useSearchParams(SearchParamsSchema, {
+	const params = useSearchParams(SearchParamsSchemaClient, {
 		pushHistory: false,
 		showDefaults: false,
 	});
@@ -135,49 +135,54 @@
 </form>
 
 {#if data.songRows.length > 0}
-	<div class="mt-6 flex flex-wrap gap-2">
-		<Button
-			variant="outline"
-			class="cursor-pointer"
-			onclick={() => addAllToQueue(tracksFromResults)}
-			disabled={tracksFromResults.length === 0}
-		>
-			Add all to queue
-		</Button>
+	<div class="mt-6 flex flex-col gap-2">
+		<div class="flex flex-wrap gap-2">
+			<Button
+				variant="outline"
+				class="cursor-pointer"
+				onclick={() => addAllToQueue(tracksFromResults)}
+				disabled={tracksFromResults.length === 0}
+			>
+				Add all to queue
+			</Button>
 
-		<Button
-			variant="outline"
-			class="cursor-pointer"
-			onclick={() => playAllNext(tracksFromResults)}
-			disabled={tracksFromResults.length === 0}
-		>
-			Play all next
-		</Button>
+			<Button
+				variant="outline"
+				class="cursor-pointer"
+				onclick={() => playAllNext(tracksFromResults)}
+				disabled={tracksFromResults.length === 0}
+			>
+				Play all next
+			</Button>
 
-		{#if tracksFromResults.length !== data.songRows.length}
-			<span class="self-center text-sm text-muted-foreground">
-				({tracksFromResults.length} playable)
-			</span>
-		{/if}
+			{#if tracksFromResults.length !== data.songRows.length}
+				<span class="self-center text-sm text-muted-foreground">
+					({tracksFromResults.length} playable)
+				</span>
+			{/if}
+		</div>
+
+		<div class="flex items-center gap-4">
+			<h2 class="text-lg font-semibold">Songs</h2>
+			<span>{data.songRows.length}</span>
+		</div>
+
+		<ul class="space-y-2">
+			{#each data.songRows as r (r.annSongId)}
+				<li>
+					<SongEntry
+						annSongId={r.annSongId}
+						animeName={r.animeMainName}
+						type={r.type}
+						number={r.number}
+						songName={r.songName}
+						artistName={songArtistLabel(r)}
+						fileName={r.fileName}
+					/>
+				</li>
+			{/each}
+		</ul>
 	</div>
-
-	<h2 class="mt-6 text-lg font-semibold">Songs</h2>
-
-	<ul class="mt-3 space-y-2">
-		{#each data.songRows as r (r.annSongId)}
-			<li>
-				<SongEntry
-					annSongId={r.annSongId}
-					animeName={r.animeMainName}
-					type={r.type}
-					number={r.number}
-					songName={r.songName}
-					artistName={songArtistLabel(r)}
-					fileName={r.fileName}
-				/>
-			</li>
-		{/each}
-	</ul>
 {:else if Object.values(params).some((val) => (Array.isArray(val) && val.length > 0) || (typeof val === "string" && val.trim() !== "") || typeof val === "number")}
 	<p class="mt-4 text-sm text-muted-foreground">
 		No songs found matching your criteria.
diff --git a/src/routes/songs/+page.ts b/src/routes/songs/+page.ts
index ee8476e..e75240a 100644
--- a/src/routes/songs/+page.ts
+++ b/src/routes/songs/+page.ts
@@ -1,12 +1,12 @@
 import type { SongFilters } from "$lib/db/client-db";
 import { db, ensureSeeded, getSongsWithFilters } from "$lib/db/client-db";
 import type { PageLoad } from "./$types";
-import { SearchParamsSchema } from "./schema";
+import { SearchParamsSchemaServer } from "./schema";
 
 export const load: PageLoad = async ({ url, fetch, depends }) => {
 	depends("clientdb:songs");
 
-	const parsed = SearchParamsSchema.safeParse(
+	const parsed = SearchParamsSchemaServer.safeParse(
 		Object.fromEntries(url.searchParams.entries()),
 	);
 
diff --git a/src/routes/songs/schema.ts b/src/routes/songs/schema.ts
index 2541077..080a39f 100644
--- a/src/routes/songs/schema.ts
+++ b/src/routes/songs/schema.ts
@@ -6,5 +6,12 @@ export const SearchParamsSchema = z.object({
 	anime: z.string().optional().default(""),
 	gpm: z.coerce.number().int().optional().default(0),
 	gpx: z.coerce.number().int().optional().default(100),
-	songType: z.coerce.number().int().optional().default(0),
+});
+
+export const SearchParamsSchemaClient = SearchParamsSchema.extend({
+	songType: z.string().optional().default("0"),
+});
+
+export const SearchParamsSchemaServer = SearchParamsSchema.extend({
+	songType: z.coerce.number().int().optional(),
 });