diff --git a/frontend/src/routes/(app)/links/+page.server.ts b/frontend/src/routes/(app)/links/+page.server.ts
index 40baa93..bcd92a1 100644
--- a/frontend/src/routes/(app)/links/+page.server.ts
+++ b/frontend/src/routes/(app)/links/+page.server.ts
@@ -19,7 +19,7 @@ export const load = (async (event) => {
 	let sortBy = event.url.searchParams.get('sortBy')
 	let page = parseInt(event.url.searchParams.get('page') ?? '1')
 	let perPage = parseInt(
-		event.url.searchParams.get('perPage') ?? '10',
+		event.url.searchParams.get('perPage') ?? '12',
 	)
 
 	if (isNaN(page)) {
@@ -83,6 +83,21 @@ export const load = (async (event) => {
 		.offset(perPage * (page - 1))
 		.limit(perPage)
 
+	const pagination = db
+		.select({
+			total: sql<number>`count(*)`.as('total'),
+		})
+		.from(shortener)
+		.where(
+			and(
+				eq(shortener.userId, user.id),
+				project_id ? eq(shortener.projectId, project_id) : undefined,
+				search
+					? ilike(shortener.link, `%${decodeURI(search)}%`)
+					: undefined,
+			),
+		)
+
 	if (sortBy === 'latest') {
 		shorteners.orderBy(desc(shortener.createdAt))
 	} else if (sortBy === 'oldest') {
@@ -108,5 +123,6 @@ export const load = (async (event) => {
 		perPage,
 		search,
 		sortBy,
+		pagination,
 	}
 }) satisfies PageServerLoad
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index 20ce8b5..b8abe06 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -80,36 +80,25 @@
 		qrDialogOpen = true
 	}
 
-	let page: number = data.page
-	let perPage: any = { label: data.perPage, value: data.perPage }
-	let selectedProjectUUID: string | null
-	$: selectedProjectUUID = data.selected_project.value
 	let search: string | null = data.search
 	let searchUpdateTimeout: any
-	let sortBy: any = { label: data.sortBy, value: data.sortBy }
 
 	$: browser &&
-		updateUrl(selectedProjectUUID, page, perPage, search, sortBy)
+		goto(updateSearchParam([{ name: 'search', value: search }]))
 
-	const updateUrl = (
-		selectedProjectUUID: string | null,
-		page: number,
-		perPage: any,
-		search: string | null,
-		sortBy: any,
+	const updateSearchParam = (
+		params: { name: string; value: any }[],
 	) => {
-		let query = [`page=${page}`, `perPage=${perPage.value}`]
-		if (selectedProjectUUID) {
-			query.push(`project=${selectedProjectUUID}`)
-		}
-		if (search) {
-			query.push(`search=${encodeURI(search)}`)
-		}
-		if (sortBy) {
-			query.push(`sortBy=${sortBy.value}`)
-		}
-
-		goto(`/links?${query.join('&')}`)
+		const urlParams = new URLSearchParams(window.location.search)
+		params.map(({ name, value }) => {
+			if (value) {
+				urlParams.set(name, value)
+			} else {
+				urlParams.delete(name)
+			}
+		})
+		const searchParams = urlParams.toString()
+		return '/links?' + searchParams
 	}
 </script>
 
@@ -135,41 +124,61 @@
 				<Command.Input placeholder="Search project..." />
 				<Command.Empty>No project found.</Command.Empty>
 				<Command.Group>
-					<Command.Item
-						onSelect={() => {
-							selectedProjectUUID = null
-							page = 1
-							open = false
-						}}>
-						<Check
-							class={cn(
-								'mr-2 h-4 w-4',
-								data.selected_project.value !== null &&
-									'text-transparent',
-							)} />
-						All
-					</Command.Item>
-					{#each data.projects as project}
+					<a
+						href={updateSearchParam([
+							{
+								name: 'project',
+								value: undefined,
+							},
+							{
+								name: 'page',
+								value: 1,
+							},
+						])}>
 						<Command.Item
 							onSelect={() => {
-								selectedProjectUUID = project.uuid
-								page = 1
 								open = false
 							}}>
 							<Check
 								class={cn(
 									'mr-2 h-4 w-4',
-									data.selected_project.value !== project.uuid &&
+									data.selected_project.value !== null &&
 										'text-transparent',
 								)} />
-							{project.name}
+							All
 						</Command.Item>
+					</a>
+					{#each data.projects as project}
+						<a
+							href={updateSearchParam([
+								{
+									name: 'project',
+									value: project.uuid,
+								},
+								{
+									name: 'page',
+									value: 1,
+								},
+							])}>
+							<Command.Item
+								onSelect={() => {
+									open = false
+								}}>
+								<Check
+									class={cn(
+										'mr-2 h-4 w-4',
+										data.selected_project.value !== project.uuid &&
+											'text-transparent',
+									)} />
+								{project.name}
+							</Command.Item>
+						</a>
 					{/each}
 				</Command.Group>
 			</Command.Root>
 		</Popover.Content>
 	</Popover.Root>
-	<Select.Root bind:selected={sortBy}>
+	<Select.Root selected={{ label: data.sortBy, value: data.sortBy }}>
 		<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
 			<Select.Value placeholder="Sort By" />
 		</Select.Trigger>
@@ -177,8 +186,15 @@
 			<Select.Group>
 				<Select.Label>Sort By</Select.Label>
 				{#each ['latest', 'oldest', 'most_visited'] as sortBy}
-					<Select.Item value={sortBy} label={sortBy}
-						>{sortBy}</Select.Item>
+					<a
+						href={updateSearchParam([
+							{ name: 'sortBy', value: sortBy },
+							{ name: 'page', value: 1 },
+						])}>
+						<Select.Item value={sortBy} label={sortBy}>
+							{sortBy}
+						</Select.Item>
+					</a>
 				{/each}
 			</Select.Group>
 		</Select.Content>
@@ -304,40 +320,91 @@
 				{/each}
 			</div>
 		</ScrollArea>
-		<div class="flex items-center justify-between border-t p-4">
-			<Select.Root bind:selected={perPage}>
-				<Select.Trigger class="w-[180px]">
-					<Select.Value placeholder="Page Size" />
-				</Select.Trigger>
-				<Select.Content>
-					<Select.Group>
-						<Select.Label>Page Size</Select.Label>
-						{#each [10, 20, 50, 100] as pageSize}
+	{:else}
+		<div class="flex w-full flex-grow items-center justify-center">
+			<div class="flex flex-col items-center gap-12">
+				<div class="flex flex-col items-center gap-4">
+					<div class="text-4xl font-bold">No Shortener Found</div>
+				</div>
+				<Button
+					on:click={() => {
+						dialogOpen = true
+					}}
+					class="w-fit">Add Shortener</Button>
+			</div>
+		</div>
+	{/if}
+{/await}
+
+{#await data.pagination then pagination}
+	<div class="flex items-center justify-between border-t p-4">
+		<Select.Root
+			selected={{ label: data.perPage, value: data.perPage }}>
+			<Select.Trigger class="w-[180px]">
+				<Select.Value placeholder="Page Size" />
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Group>
+					<Select.Label>Page Size</Select.Label>
+					{#each [12, 24, 48, 96] as pageSize}
+						<a
+							href={updateSearchParam([
+								{
+									name: 'perPage',
+									value: pageSize,
+								},
+								{
+									name: 'page',
+									value: 1,
+								},
+							])}>
 							<Select.Item
 								value={pageSize}
 								label={pageSize.toString()}>{pageSize}</Select.Item>
-						{/each}
-					</Select.Group>
-				</Select.Content>
-				<Select.Input name="favoriteFruit" />
-			</Select.Root>
-			<Pagination.Root
-				class="items-end "
-				count={shorteners[0].fullcount}
-				bind:page
-				perPage={perPage.value}
-				let:pages
-				let:currentPage>
-				<Pagination.Content>
+						</a>
+					{/each}
+				</Select.Group>
+			</Select.Content>
+			<Select.Input name="favoriteFruit" />
+		</Select.Root>
+		<Pagination.Root
+			class="items-end "
+			count={pagination[0].total}
+			page={data.page}
+			perPage={data.perPage}
+			let:pages
+			let:currentPage>
+			<Pagination.Content>
+				{#if data.page <= 1}
 					<Pagination.Item>
 						<Pagination.PrevButton />
 					</Pagination.Item>
-					{#each pages as page (page.key)}
-						{#if page.type === 'ellipsis'}
-							<Pagination.Item>
-								<Pagination.Ellipsis />
-							</Pagination.Item>
-						{:else}
+				{:else}
+					<a
+						href={updateSearchParam([
+							{
+								name: 'page',
+								value: data.page - 1,
+							},
+						])}>
+						<Pagination.Item>
+							<Pagination.PrevButton />
+						</Pagination.Item>
+					</a>
+				{/if}
+				{#each pages as page (page.key)}
+					{#if page.type === 'ellipsis'}
+						<Pagination.Item>
+							<Pagination.Ellipsis />
+						</Pagination.Item>
+					{:else}
+						<a
+							href={updateSearchParam([
+								{
+									name: 'page',
+									value: page.value,
+								},
+							])}>
 							<Pagination.Item isVisible={currentPage == page.value}>
 								<Pagination.Link
 									{page}
@@ -345,28 +412,29 @@
 									{page.value}
 								</Pagination.Link>
 							</Pagination.Item>
-						{/if}
-					{/each}
+						</a>
+					{/if}
+				{/each}
+				{#if data.page >= pagination[0].total / data.perPage}
 					<Pagination.Item>
 						<Pagination.NextButton />
 					</Pagination.Item>
-				</Pagination.Content>
-			</Pagination.Root>
-		</div>
-	{:else}
-		<div class="flex h-full w-full items-center justify-center">
-			<div class="flex flex-col items-center gap-12">
-				<div class="flex flex-col items-center gap-4">
-					<div class="text-4xl font-bold">No Shortener Found</div>
-				</div>
-				<Button
-					on:click={() => {
-						dialogOpen = true
-					}}
-					class="w-fit">Add Shortener</Button>
-			</div>
-		</div>
-	{/if}
+				{:else}
+					<a
+						href={updateSearchParam([
+							{
+								name: 'page',
+								value: data.page + 1,
+							},
+						])}>
+						<Pagination.Item>
+							<Pagination.NextButton />
+						</Pagination.Item>
+					</a>
+				{/if}
+			</Pagination.Content>
+		</Pagination.Root>
+	</div>
 {/await}
 
 <EditShortenerDialog