diff --git a/website-frontend/src/lib/components/banners/PeopleBanner.svelte b/website-frontend/src/lib/components/banners/PeopleBanner.svelte
index cd70f4de..3dca6e55 100644
--- a/website-frontend/src/lib/components/banners/PeopleBanner.svelte
+++ b/website-frontend/src/lib/components/banners/PeopleBanner.svelte
@@ -65,13 +65,13 @@
 				<div
 					class="flex flex-col items-center justify-center text-center lg:flex-row lg:justify-between"
 				>
-					<div class="flex space-x-2 text-[#D9D9D9]">
-						<p>{position}</p>
+					<span class="text-[#D9D9D9]">
+						{position}
 						{#if laboratory}
-							<p>·</p>
-							<p>{laboratory}</p>
+							·
+							{laboratory}
 						{/if}
-					</div>
+					</span>
 
 					<div class="mt-5 flex space-x-1 lg:mt-0">
 						<div class="group relative">
diff --git a/website-frontend/src/lib/components/cards/FeaturedEventCard.svelte b/website-frontend/src/lib/components/cards/FeaturedEventCard.svelte
index 3285c581..b0ea8c74 100644
--- a/website-frontend/src/lib/components/cards/FeaturedEventCard.svelte
+++ b/website-frontend/src/lib/components/cards/FeaturedEventCard.svelte
@@ -2,7 +2,6 @@
 	import { PUBLIC_APIURL } from '$env/static/public';
 	import { Event } from '$lib/models/events';
 	import { Calendar, MapPin, Clock, Image } from 'lucide-svelte';
-	import { reloading } from '$lib/stores';
 	export let item: Event;
 	let hero_height: number;
 
@@ -38,13 +37,7 @@
 	}
 </script>
 
-<a
-	href="/events/{item.slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/events/{item.slug}" data-sveltekit-reload>
 	<div
 		class="group relative mb-2 flex h-[25rem] flex-col rounded-lg bg-white text-gray-800 shadow-md"
 	>
diff --git a/website-frontend/src/lib/components/cards/NewsCard.svelte b/website-frontend/src/lib/components/cards/NewsCard.svelte
index bae4ad10..91435794 100644
--- a/website-frontend/src/lib/components/cards/NewsCard.svelte
+++ b/website-frontend/src/lib/components/cards/NewsCard.svelte
@@ -3,7 +3,6 @@
 	import { NewsItem } from '$lib/models/news';
 	import { Image } from 'lucide-svelte';
 	import { error } from '@sveltejs/kit';
-	import { reloading } from '$lib/stores';
 
 	export let item: NewsItem;
 	const news_tags =
@@ -17,13 +16,7 @@
 	let banner_height: number;
 </script>
 
-<a
-	href="/news/{item.slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/news/{item.slug}" data-sveltekit-reload>
 	<div
 		class="group relative mb-2 flex h-[25rem] flex-col rounded-lg bg-white text-gray-800 shadow-md"
 	>
diff --git a/website-frontend/src/lib/components/cards/PublicationCard.svelte b/website-frontend/src/lib/components/cards/PublicationCard.svelte
index 99af21fe..b3500cba 100644
--- a/website-frontend/src/lib/components/cards/PublicationCard.svelte
+++ b/website-frontend/src/lib/components/cards/PublicationCard.svelte
@@ -5,7 +5,6 @@
 	import { PUBLIC_APIURL } from '$env/static/public';
 	import { Publication } from '$lib/models/publications';
 	import { SquareArrowOutUpRight } from 'lucide-svelte';
-	import { reloading } from '$lib/stores';
 
 	export let item: Publication;
 
@@ -85,33 +84,29 @@
 						</div>
 					{/if}
 					{#if item.authors}
-						{#if item.authors.length !== 1}
-							<strong>Authors:</strong>
-						{:else}
-							<strong>Author:</strong>
-						{/if}
-						{#each item.authors as author, i}
-							{#if author.link && typeof author.link === 'string'}
-								<a
-									href={author.link}
-									class="text-blue-500"
-									data-sveltekit-reload
-									on:click={() => {
-										$reloading = true;
-									}}
-									>{`${author.last_name}, ${author.first_name}`}
-								</a>
+						<div class="text-start">
+							{#if item.authors.length !== 1}
+								<strong>Authors:</strong>
 							{:else}
-								<span>{`${author.last_name}, ${author.first_name}`}</span>
-							{/if}
-							{#if i + 1 !== item.authors.length}
-								<span>{` & `}</span>
+								<strong>Author:</strong>
 							{/if}
-						{/each}
+							{#each item.authors as author, i}
+								{#if author.link && typeof author.link === 'string'}
+									<a href={author.link} class="text-blue-500" data-sveltekit-reload
+										>{`${author.last_name}, ${author.first_name}`}
+									</a>
+								{:else}
+									<span>{`${author.last_name}, ${author.first_name}`}</span>
+								{/if}
+								{#if i + 1 !== item.authors.length}
+									<span>{` & `}</span>
+								{/if}
+							{/each}
+						</div>
 					{/if}
 				</div>
 				{#if item.abstract}
-					<div class="text-start">
+					<div class="line-clamp-[20] text-start">
 						<small><strong>Abstract:</strong> {item.abstract}</small>
 					</div>
 				{/if}
diff --git a/website-frontend/src/lib/components/list_items/LaboratoryItem.svelte b/website-frontend/src/lib/components/list_items/LaboratoryItem.svelte
index e08b2767..377f1c47 100644
--- a/website-frontend/src/lib/components/list_items/LaboratoryItem.svelte
+++ b/website-frontend/src/lib/components/list_items/LaboratoryItem.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Image } from 'lucide-svelte';
 	import { PUBLIC_APIURL } from '$env/static/public';
-	import { reloading } from '$lib/stores';
 
 	export let laboratory;
 	let logo_height: number;
@@ -9,13 +8,7 @@
 	$: ({ name, logo, description, slug } = laboratory);
 </script>
 
-<a
-	href="/research/labs/{slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/research/labs/{slug}" data-sveltekit-reload>
 	<div
 		class="my-4 flex flex-col justify-center gap-6 rounded-lg p-10 text-center text-background md:flex-row md:justify-start md:text-start"
 		style="background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary)/0.25)); grid-template-columns: 1fr auto;"
diff --git a/website-frontend/src/lib/components/list_items/OrganizationItem.svelte b/website-frontend/src/lib/components/list_items/OrganizationItem.svelte
index ee511083..188acb5c 100644
--- a/website-frontend/src/lib/components/list_items/OrganizationItem.svelte
+++ b/website-frontend/src/lib/components/list_items/OrganizationItem.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Image } from 'lucide-svelte';
 	import { PUBLIC_APIURL } from '$env/static/public';
-	import { reloading } from '$lib/stores';
 
 	export let organization;
 	let logo_height: number;
@@ -9,13 +8,7 @@
 	$: ({ name, logo, description, website, slug } = organization);
 </script>
 
-<a
-	href="/students/organizations/{slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/students/organizations/{slug}" data-sveltekit-reload>
 	<div
 		class="my-4 flex flex-col justify-center gap-6 rounded-lg p-10 text-center text-background md:flex-row md:justify-start md:text-start"
 		style="background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary)/0.25)); grid-template-columns: 1fr auto;"
diff --git a/website-frontend/src/lib/components/loading/Await.svelte b/website-frontend/src/lib/components/loading/Await.svelte
index 569b6aeb..ad6fef09 100644
--- a/website-frontend/src/lib/components/loading/Await.svelte
+++ b/website-frontend/src/lib/components/loading/Await.svelte
@@ -1,28 +1,30 @@
 <script lang="ts">
 	/** @type {import('./$types').PageData} */
 	import { Moon } from 'svelte-loading-spinners';
-	import { ChevronsUp, Frown, Plus } from 'lucide-svelte';
+	import { Frown, Plus } from 'lucide-svelte';
+	import { enhance } from '$app/forms';
 	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
+	import { type ActionResult } from '@sveltejs/kit';
 
 	export let onDark = false;
-	export let layout;
-	export let data;
+	export let layout = '';
+	export let data: Promise<object[]>;
 	export let text;
 	export let component;
 	export let count;
-	export let limit: number;
 
+	let items: object[] = [];
 	$: query = new URLSearchParams($page.url.searchParams.toString());
-	$: currentLimit = parseInt(query.get('limit') ?? limit.toString());
+	$: data.then((res) => (items = res));
 
-	function nav(newLimit: number): void {
-		query.delete('limit');
-		if (newLimit > limit) {
-			query.append('limit', newLimit.toString());
-		}
-		goto(`?${query.toString()}`, { noScroll: true, keepFocus: true });
-	}
+	const handleLoadMore = ({ formData }: { formData: FormData }) => {
+		formData.set('data', JSON.stringify(items));
+		return async ({ result }: { result: ActionResult }) => {
+			if (result.type === 'success' && result.data) {
+				items = result.data.items;
+			}
+		};
+	};
 </script>
 
 <div class="flex flex-col gap-y-2">
@@ -38,42 +40,30 @@
 				Loading {text}...
 			</p>
 		</div>
-	{:then data}
+	{:then}
 		<div class={layout}>
-			{#each data as item}
+			{#each items as item}
 				<svelte:component this={component} {item} />
 			{/each}
 		</div>
 		<div class="flex flex-col items-center gap-2">
 			<div class="flex items-center justify-center gap-1">
-				{#if data.length < count}
-					<button
-						class="flex items-center rounded-3xl px-6 py-2 shadow-xl"
-						on:click={() => nav(currentLimit + limit)}
-					>
-						<Plus color={onDark ? 'hsl(0, 0%, 100%)' : 'hsl(144, 69%, 24%)'} class="mr-2 h-4 w-4" />
-						<span class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
-							>Load More</span
-						>
-					</button>
-				{/if}
-				{#if data.length > limit}
-					<button
-						class="flex items-center rounded-3xl px-6 py-2 shadow-xl"
-						on:click={() => nav(limit)}
-					>
-						<ChevronsUp
-							color={onDark ? 'hsl(0, 0%, 100%)' : 'hsl(144, 69%, 24%)'}
-							class="mr-2 h-4 w-4"
-						/>
-						<span class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
-							>Collapse</span
-						>
-					</button>
+				{#if items.length < count}
+					<form method="POST" action="?/loadMore&{query.toString()}" use:enhance={handleLoadMore}>
+						<button type="submit" class="flex items-center rounded-3xl px-6 py-2 shadow-xl">
+							<Plus
+								color={onDark ? 'hsl(0, 0%, 100%)' : 'hsl(144, 69%, 24%)'}
+								class="mr-2 h-4 w-4"
+							/>
+							<span class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
+								>Load More</span
+							>
+						</button>
+					</form>
 				{/if}
 			</div>
 			<small class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
-				>Showing {Math.min(currentLimit, count)} items out of {count}</small
+				>Showing {items.length} items out of {count}</small
 			>
 		</div>
 	{:catch}
diff --git a/website-frontend/src/lib/components/search/EventsSearchResult.svelte b/website-frontend/src/lib/components/search/EventsSearchResult.svelte
new file mode 100644
index 00000000..e41b8408
--- /dev/null
+++ b/website-frontend/src/lib/components/search/EventsSearchResult.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import { Event } from '$lib/models/events';
+
+	export let item: Event;
+
+	let general_banner_height: number;
+</script>
+
+<a href={`/events/${item.slug}`}>
+	<div
+		class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+	>
+		{#if item.hero_image}
+			<div
+				class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+				bind:clientHeight={general_banner_height}
+			>
+				{#if general_banner_height}
+					<img
+						src="{PUBLIC_APIURL}/assets/{item.hero_image}?height={general_banner_height}"
+						alt={item.event_headline}
+						class="h-full w-full rounded-lg object-cover"
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="w-full">
+			<p class="text-xl font-bold">{item.event_headline}</p>
+			{#if item.event_content}
+				<p class="line-clamp-2">{@html item.event_content}</p>
+			{/if}
+		</div>
+	</div>
+</a>
diff --git a/website-frontend/src/lib/components/search/LaboratoriesSearchResult.svelte b/website-frontend/src/lib/components/search/LaboratoriesSearchResult.svelte
new file mode 100644
index 00000000..2779f5b8
--- /dev/null
+++ b/website-frontend/src/lib/components/search/LaboratoriesSearchResult.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import { Laboratory } from '$lib/models/laboratories';
+
+	export let item: Laboratory;
+
+	let general_banner_height: number;
+</script>
+
+<a href={`/research/labs/${item.slug}`}>
+	<div
+		class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+	>
+		{#if item.logo}
+			<div
+				class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+				bind:clientHeight={general_banner_height}
+			>
+				{#if general_banner_height}
+					<img
+						src="{PUBLIC_APIURL}/assets/{item.logo}?height={general_banner_height}"
+						alt={item.name}
+						class="h-full w-full rounded-lg object-cover"
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="w-full">
+			<p class="text-xl font-bold">{item.name}</p>
+			{#if item.brief_description}
+				<p class="line-clamp-2">{item.brief_description}</p>
+			{/if}
+		</div>
+	</div>
+</a>
diff --git a/website-frontend/src/lib/components/search/NewsSearchResult.svelte b/website-frontend/src/lib/components/search/NewsSearchResult.svelte
new file mode 100644
index 00000000..0206e461
--- /dev/null
+++ b/website-frontend/src/lib/components/search/NewsSearchResult.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import { NewsItem } from '$lib/models/news';
+
+	export let item: NewsItem;
+
+	let general_banner_height: number;
+</script>
+
+<a href={`/news/${item.slug}`}>
+	<div
+		class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+	>
+		{#if item.background_image}
+			<div
+				class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+				bind:clientHeight={general_banner_height}
+			>
+				{#if general_banner_height}
+					<img
+						src="{PUBLIC_APIURL}/assets/{item.background_image}?height={general_banner_height}"
+						alt={item.title}
+						class="h-full w-full rounded-lg object-cover"
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="w-full">
+			<p class="text-xl font-bold">{item.title}</p>
+			{#if item.summary}
+				<p class="line-clamp-2">{item.summary}</p>
+			{/if}
+		</div>
+	</div>
+</a>
diff --git a/website-frontend/src/lib/components/search/PeopleSearchResult.svelte b/website-frontend/src/lib/components/search/PeopleSearchResult.svelte
new file mode 100644
index 00000000..90edb906
--- /dev/null
+++ b/website-frontend/src/lib/components/search/PeopleSearchResult.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import type { Person } from '$lib/models/people';
+
+	export let item: Person;
+
+	$: laboratory = item.affiliations
+		? typeof item.affiliations[0] == 'object'
+			? item.affiliations[0].laboratories_id &&
+				typeof item.affiliations[0].laboratories_id == 'object'
+				? item.affiliations[0].laboratories_id.name
+				: ''
+			: ''
+		: '';
+
+	let general_banner_height: number;
+</script>
+
+<a href={`/people/${item.username}`}>
+	<div
+		class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+	>
+		{#if item.profile_image}
+			<div
+				class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+				bind:clientHeight={general_banner_height}
+			>
+				{#if general_banner_height}
+					<img
+						src="{PUBLIC_APIURL}/assets/{item.profile_image}?height={general_banner_height}"
+						alt={`${item.first_name} ${item.last_name}'s profile picture`}
+						class="h-full w-full rounded-lg object-cover"
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="w-full">
+			<p class="text-xl font-bold">{`${item.first_name} ${item.last_name}`}</p>
+			{#if item.position}
+				<p class="line-clamp-2">
+					{`${item.position} ${laboratory ? ` · ${laboratory}` : ``}`}
+				</p>
+			{/if}
+		</div>
+	</div>
+</a>
diff --git a/website-frontend/src/lib/components/search/PublicationsSearchResult.svelte b/website-frontend/src/lib/components/search/PublicationsSearchResult.svelte
new file mode 100644
index 00000000..d3cc5087
--- /dev/null
+++ b/website-frontend/src/lib/components/search/PublicationsSearchResult.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import * as Dialog from '$lib/@shadcn-svelte/ui/dialog';
+	import { SquareArrowOutUpRight } from 'lucide-svelte';
+	import { Publication } from '$lib/models/publications';
+
+	export let item: Publication;
+
+	$: publications_tags = item
+		? item.publication_tags
+			? item.publication_tags
+					.filter((tag) => typeof tag === 'object')
+					.map(({ publications_tags_id }) => {
+						if (typeof publications_tags_id === 'object') return publications_tags_id.name;
+					})
+					.filter((tag) => typeof tag !== 'undefined')
+			: []
+		: [];
+
+	let pubs_banner_height: number;
+</script>
+
+<Dialog.Root>
+	<Dialog.Trigger>
+		<div
+			class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+		>
+			{#if item.hero_image}
+				<div
+					class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+					bind:clientHeight={pubs_banner_height}
+				>
+					{#if pubs_banner_height}
+						<img
+							src="{PUBLIC_APIURL}/assets/{item.hero_image}?height={pubs_banner_height}"
+							alt={item.title}
+							class="h-full w-full rounded-lg object-cover"
+						/>
+					{/if}
+				</div>
+			{/if}
+
+			<div class="w-full">
+				<p class="text-xl font-bold">{item.title}</p>
+				{#if item.abstract}
+					<p class="line-clamp-2">
+						{item.abstract}
+					</p>
+				{/if}
+			</div>
+		</div>
+	</Dialog.Trigger>
+	<Dialog.Content class="mx-auto w-full max-w-[90vw] rounded-lg md:max-w-lg">
+		<Dialog.Header class="flex flex-col gap-y-1">
+			<Dialog.Title class="text-start">{item.title}</Dialog.Title>
+			<Dialog.Description class="flex flex-col gap-y-2">
+				{#if publications_tags.length !== 0}
+					<div class="flex h-3 items-center border-l-[4px] border-primary-dark pl-2 text-sm">
+						<small class="capitalize">
+							{#each publications_tags.slice(0, -1) as publications_tag}
+								{`${publications_tag}, `}
+							{/each}
+							{publications_tags.at(-1)}
+						</small>
+					</div>
+				{/if}
+				<div>
+					{#if item.publish_date}
+						<div class="text-start">
+							<strong>Date published:</strong>
+							{new Date(item.publish_date).toLocaleDateString('en-EN', {
+								year: 'numeric',
+								month: 'long',
+								day: 'numeric'
+							})}
+						</div>
+					{/if}
+					{#if item.authors}
+						<div class="text-start">
+							{#if item.authors.length !== 1}
+								<strong>Authors:</strong>
+							{:else}
+								<strong>Author:</strong>
+							{/if}
+							{#each item.authors as author, i}
+								{#if author.link && typeof author.link === 'string'}
+									<a href={author.link} class="text-blue-500" data-sveltekit-reload
+										>{`${author.last_name}, ${author.first_name}`}
+									</a>
+								{:else}
+									<span>{`${author.last_name}, ${author.first_name}`}</span>
+								{/if}
+								{#if i + 1 !== item.authors.length}
+									<span>{` & `}</span>
+								{/if}
+							{/each}
+						</div>
+					{/if}
+				</div>
+				{#if item.abstract}
+					<div class="line-clamp-[20] text-start">
+						<small><strong>Abstract:</strong> {item.abstract}</small>
+					</div>
+				{/if}
+				{#if item.access_links}
+					<div>
+						<small class="flex gap-x-1">
+							{#if item.access_links.length !== 1}
+								<strong>Access Links:</strong>
+							{:else}
+								<strong>Access Link:</strong>
+							{/if}
+							{#each item.access_links as access_link, i}
+								<div class="flex gap-x-1">
+									<a href={access_link.url} target="_blank">
+										<div class="flex gap-x-1">
+											{#if access_link.display}
+												<div>{access_link.display}</div>
+											{:else}
+												<div>Access Link {i + 1}</div>
+											{/if}
+											<div class="flex w-min flex-col justify-center">
+												<SquareArrowOutUpRight class="size-3" />
+											</div>
+										</div>
+									</a>
+									{#if i + 1 !== item.access_links.length}
+										<div class="select-none">|</div>
+									{/if}
+								</div>
+							{/each}
+						</small>
+					</div>
+				{/if}
+			</Dialog.Description>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/website-frontend/src/lib/components/search/SearchResult.svelte b/website-frontend/src/lib/components/search/SearchResult.svelte
deleted file mode 100644
index eac8f919..00000000
--- a/website-frontend/src/lib/components/search/SearchResult.svelte
+++ /dev/null
@@ -1,167 +0,0 @@
-<script lang="ts">
-	import { PUBLIC_APIURL } from '$env/static/public';
-	import * as Dialog from '$lib/@shadcn-svelte/ui/dialog';
-	import { SquareArrowOutUpRight } from 'lucide-svelte';
-	import { Publication } from '$lib/models/publications';
-	import { reloading } from '$lib/stores';
-
-	export let publication: Publication | null = null;
-	export let image: string | null | undefined;
-	export let name: string;
-	export let href: string;
-
-	$: publications_tags = publication
-		? publication.publication_tags
-			? publication.publication_tags
-					.filter((tag) => typeof tag === 'object')
-					.map(({ publications_tags_id }) => {
-						if (typeof publications_tags_id === 'object') return publications_tags_id.name;
-					})
-					.filter((tag) => typeof tag !== 'undefined')
-			: []
-		: [];
-
-	let pubs_banner_height: number;
-	let general_banner_height: number;
-</script>
-
-{#if !publication}
-	<a {href}>
-		<div
-			class="grid items-center justify-start gap-5 border-b py-2 text-start"
-			style="grid-template-columns: 1fr 3fr;"
-		>
-			<div
-				class="flex h-36 w-full items-center justify-center overflow-hidden rounded-lg p-2 shadow-none sm:h-60 lg:h-96"
-				bind:clientHeight={general_banner_height}
-			>
-				{#if image && general_banner_height}
-					<img
-						src="{PUBLIC_APIURL}/assets/{image}?height={general_banner_height}"
-						alt={name}
-						class="max-h-full max-w-full rounded-lg"
-					/>
-				{/if}
-			</div>
-
-			<div class="w-full">
-				<slot />
-			</div>
-		</div>
-	</a>
-{:else}
-	<Dialog.Root>
-		<Dialog.Trigger>
-			<div
-				class="grid items-center justify-start gap-5 border-b py-2 text-start"
-				style="grid-template-columns: 1fr 3fr;"
-			>
-				<div
-					class="flex h-36 w-full items-center justify-center overflow-hidden rounded-lg p-2 shadow-none sm:h-60 lg:h-96"
-					bind:clientHeight={pubs_banner_height}
-				>
-					{#if image && pubs_banner_height}
-						<img
-							src="{PUBLIC_APIURL}/assets/{image}?height={pubs_banner_height}"
-							alt={name}
-							class="max-h-full max-w-full rounded-lg"
-						/>
-					{/if}
-				</div>
-
-				<div class="w-full">
-					<slot />
-				</div>
-			</div>
-		</Dialog.Trigger>
-		<Dialog.Content class="mx-auto w-full max-w-[90vw] rounded-lg md:max-w-lg">
-			<Dialog.Header class="flex flex-col gap-y-1">
-				<Dialog.Title class="text-start">{publication.title}</Dialog.Title>
-				<Dialog.Description class="flex flex-col gap-y-2">
-					{#if publications_tags.length !== 0}
-						<div class="flex h-3 items-center border-l-[4px] border-primary-dark pl-2 text-sm">
-							<small class="capitalize">
-								{#each publications_tags.slice(0, -1) as publications_tag}
-									{`${publications_tag}, `}
-								{/each}
-								{publications_tags.at(-1)}
-							</small>
-						</div>
-					{/if}
-					<div>
-						{#if publication.publish_date}
-							<div class="text-start">
-								<strong>Date published:</strong>
-								{new Date(publication.publish_date).toLocaleDateString('en-EN', {
-									year: 'numeric',
-									month: 'long',
-									day: 'numeric'
-								})}
-							</div>
-						{/if}
-						{#if publication.authors}
-							{#if publication.authors.length !== 1}
-								<strong>Authors:</strong>
-							{:else}
-								<strong>Author:</strong>
-							{/if}
-							{#each publication.authors as author, i}
-								{#if author.link && typeof author.link === 'string'}
-									<a
-										href={author.link}
-										class="text-blue-500"
-										data-sveltekit-reload
-										on:click={() => {
-											$reloading = true;
-										}}
-										>{`${author.last_name}, ${author.first_name}`}
-									</a>
-								{:else}
-									<span>{`${author.last_name}, ${author.first_name}`}</span>
-								{/if}
-								{#if i + 1 !== publication.authors.length}
-									<span>{` & `}</span>
-								{/if}
-							{/each}
-						{/if}
-					</div>
-					{#if publication.abstract}
-						<div class="text-start">
-							<small><strong>Abstract:</strong> {publication.abstract}</small>
-						</div>
-					{/if}
-					{#if publication.access_links}
-						<div>
-							<small class="flex gap-x-1">
-								{#if publication.access_links.length !== 1}
-									<strong>Access Links:</strong>
-								{:else}
-									<strong>Access Link:</strong>
-								{/if}
-								{#each publication.access_links as access_link, i}
-									<div class="flex gap-x-1">
-										<a href={access_link.url} target="_blank">
-											<div class="flex gap-x-1">
-												{#if access_link.display}
-													<div>{access_link.display}</div>
-												{:else}
-													<div>Access Link {i + 1}</div>
-												{/if}
-												<div class="flex w-min flex-col justify-center">
-													<SquareArrowOutUpRight class="size-3" />
-												</div>
-											</div>
-										</a>
-										{#if i + 1 !== publication.access_links.length}
-											<div class="select-none">|</div>
-										{/if}
-									</div>
-								{/each}
-							</small>
-						</div>
-					{/if}
-				</Dialog.Description>
-			</Dialog.Header>
-		</Dialog.Content>
-	</Dialog.Root>
-{/if}
diff --git a/website-frontend/src/lib/models/junctions/people_related.ts b/website-frontend/src/lib/models/junctions/people_related.ts
index 6066df35..487dee59 100644
--- a/website-frontend/src/lib/models/junctions/people_related.ts
+++ b/website-frontend/src/lib/models/junctions/people_related.ts
@@ -1,17 +1,17 @@
-import { array, lazy, object, partial, string, union, type GenericSchema } from 'valibot';
+import { array, lazy, number, object, partial, string, union, type GenericSchema } from 'valibot';
 import { Person } from '../people';
 import { Level } from '../people_levels';
 
 export type PeopleRelated = {
 	people_id?: string | Person;
-	people_levels_id?: string | Level;
+	people_levels_id?: number | Level;
 }[];
 
 export const PeopleRelated: GenericSchema<PeopleRelated> = array(
 	partial(
 		object({
 			people_id: union([string(), lazy(() => Person)]),
-			people_levels_id: union([string(), lazy(() => Level)])
+			people_levels_id: union([number(), lazy(() => Level)])
 		})
 	)
 );
diff --git a/website-frontend/src/lib/models/people.ts b/website-frontend/src/lib/models/people.ts
index dbd69042..33e023f2 100644
--- a/website-frontend/src/lib/models/people.ts
+++ b/website-frontend/src/lib/models/people.ts
@@ -58,4 +58,4 @@ export const People = array(Person);
 
 export type EducationalAttainment = InferOutput<typeof EducationalAttainment>;
 export type Person = InferOutput<typeof Person>;
-export type Peoples = InferOutput<typeof People>;
+export type People = InferOutput<typeof People>;
diff --git a/website-frontend/src/lib/stores.ts b/website-frontend/src/lib/stores.ts
index b44e8b3d..c75d3d65 100644
--- a/website-frontend/src/lib/stores.ts
+++ b/website-frontend/src/lib/stores.ts
@@ -1,6 +1,5 @@
 import { writable } from 'svelte/store';
 
-export const reloading = writable(false);
 export const searchOpen = writable(false);
 export const mobileOpen = writable(false);
 export const searchInput = writable('');
diff --git a/website-frontend/src/routes/+error.svelte b/website-frontend/src/routes/+error.svelte
index 1fd65936..7f919232 100644
--- a/website-frontend/src/routes/+error.svelte
+++ b/website-frontend/src/routes/+error.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 </script>
 
-<div class="container prose mt-20 flex flex-col items-center">
+<div class="container prose my-10 flex flex-col items-center lg:mt-20">
 	<h1>{$page.status}: {$page.error?.message}</h1>
 
 	<aside>
diff --git a/website-frontend/src/routes/+layout.svelte b/website-frontend/src/routes/+layout.svelte
index c5f2254e..56b62137 100644
--- a/website-frontend/src/routes/+layout.svelte
+++ b/website-frontend/src/routes/+layout.svelte
@@ -6,14 +6,11 @@
 	import { fade } from 'svelte/transition';
 	import { cubicIn, cubicOut } from 'svelte/easing';
 	import { navigating } from '$app/stores';
-	import { reloading } from '$lib/stores';
 
 	export let data;
 
 	let marginType = 'default';
 
-	$: $reloading = false;
-
 	$: {
 		if ($page.url.pathname === '/') {
 			marginType = 'wide';
@@ -56,7 +53,7 @@
 	<meta name="description" content={description} />
 </svelte:head>
 
-{#if $navigating || $reloading}
+{#if $navigating}
 	<div
 		in:fade={{ duration: 300, easing: cubicIn }}
 		out:fade={{ duration: 300, easing: cubicOut }}
diff --git a/website-frontend/src/routes/news/+page.server.ts b/website-frontend/src/routes/news/+page.server.ts
index b61abd0f..c6aa1549 100644
--- a/website-frontend/src/routes/news/+page.server.ts
+++ b/website-frontend/src/routes/news/+page.server.ts
@@ -3,13 +3,14 @@ import { aggregate, readItems, readSingleton } from '@directus/sdk';
 import getDirectusInstance from '$lib/directus';
 import { awaitAsync, parse, parseAsync, pipeAsync, promise } from 'valibot';
 import { News } from '$lib/models/news';
-import { redirect } from '@sveltejs/kit';
 import { NewsOverview } from '$lib/models/news_overview.js';
+import type { Actions } from './$types';
 
-export async function load({ fetch, url }) {
+const limit = 12;
+
+export async function load({ fetch }) {
 	const directus = getDirectusInstance(fetch);
 	const news_overview = parse(NewsOverview, await directus.request(readSingleton('news_overview')));
-	const news_limit = 12;
 	const news_count = await directus
 		.request(
 			aggregate('news', {
@@ -17,8 +18,6 @@ export async function load({ fetch, url }) {
 			})
 		)
 		.then((res) => parseInt(res[0].count ?? '0'));
-	if (parseInt(url.searchParams.get('limit') ?? news_limit.toString()) < news_limit)
-		throw redirect(302, url.pathname);
 	const news = parseAsync(
 		pipeAsync(promise(), awaitAsync(), News),
 		directus.request(
@@ -40,10 +39,50 @@ export async function load({ fetch, url }) {
 					}
 				],
 				sort: ['-date_created'],
-				limit: Math.max(news_limit, parseInt(url.searchParams.get('limit') ?? '0'))
+				limit
 			})
 		)
 	);
 
-	return { news_overview, news_limit, news_count, news };
+	return { news_overview, news_count, news };
 }
+
+export const actions = {
+	loadMore: async ({ request, fetch }) => {
+		const data = await request.formData();
+		const current = JSON.parse(data.get('data') as string);
+		const directus = getDirectusInstance(fetch);
+		const news = parse(
+			News,
+			await directus.request(
+				readItems('news', {
+					fields: [
+						'*',
+						{
+							user_created: ['first_name', 'last_name']
+						},
+						{
+							user_updated: ['first_name', 'last_name']
+						},
+						{
+							news_tags: [
+								{
+									news_tags_id: ['name']
+								}
+							]
+						}
+					],
+					sort: ['-date_created'],
+					offset: current.length,
+					limit
+				})
+			)
+		);
+
+		const items = [...current, ...news];
+		return {
+			success: true,
+			items
+		};
+	}
+} satisfies Actions;
diff --git a/website-frontend/src/routes/news/+page.svelte b/website-frontend/src/routes/news/+page.svelte
index 4c1e0267..4000e2cb 100644
--- a/website-frontend/src/routes/news/+page.svelte
+++ b/website-frontend/src/routes/news/+page.svelte
@@ -7,7 +7,7 @@
 
 	export let data;
 
-	$: ({ news_overview, news_limit, news_count, news } = data);
+	$: ({ news_overview, news_count, news } = data);
 </script>
 
 <FullWidthBreakout>
@@ -25,7 +25,6 @@
 				text="news"
 				component={NewsCard}
 				count={news_count}
-				limit={news_limit}
 			/>
 		</div>
 	</div>
diff --git a/website-frontend/src/routes/news/+page.ts b/website-frontend/src/routes/news/+page.ts
index 110d7348..1114c213 100644
--- a/website-frontend/src/routes/news/+page.ts
+++ b/website-frontend/src/routes/news/+page.ts
@@ -2,7 +2,6 @@
 export async function load({ data }) {
 	return {
 		news_overview: data.news_overview,
-		news_limit: data.news_limit,
 		news_count: data.news_count,
 		news: data.news
 	};
diff --git a/website-frontend/src/routes/news/[slug]/+page.server.ts b/website-frontend/src/routes/news/[slug]/+page.server.ts
index ac5a0318..7c55c5c4 100644
--- a/website-frontend/src/routes/news/[slug]/+page.server.ts
+++ b/website-frontend/src/routes/news/[slug]/+page.server.ts
@@ -1,9 +1,12 @@
 /** @type {import('./$types').PageServerLoad} */
 import { aggregate, readItems } from '@directus/sdk';
 import getDirectusInstance from '$lib/directus';
-import { error, redirect } from '@sveltejs/kit';
-import { parse } from 'valibot';
+import { error } from '@sveltejs/kit';
+import { awaitAsync, parse, parseAsync, pipeAsync, promise } from 'valibot';
 import { News, NewsItem } from '$lib/models/news';
+import type { Actions } from './$types';
+
+const limit = 12;
 
 export async function load({ url, params, fetch }) {
 	const directus = getDirectusInstance(fetch);
@@ -43,7 +46,6 @@ export async function load({ url, params, fetch }) {
 
 	const news_item = parse(NewsItem, news[0]);
 
-	const other_news_limit = 12;
 	const other_news_count = await directus
 		.request(
 			aggregate('news', {
@@ -60,11 +62,9 @@ export async function load({ url, params, fetch }) {
 			})
 		)
 		.then((res) => res[0].count);
-	if (parseInt(url.searchParams.get('limit') ?? other_news_limit.toString()) < other_news_limit)
-		throw redirect(302, url.pathname);
-	const other_news = parse(
-		News,
-		await directus.request(
+	const other_news = parseAsync(
+		pipeAsync(promise(), awaitAsync(), News),
+		directus.request(
 			readItems('news', {
 				fields: [
 					'*',
@@ -88,12 +88,57 @@ export async function load({ url, params, fetch }) {
 					}
 				},
 				sort: ['-date_created'],
-				limit: Math.max(other_news_limit, parseInt(url.searchParams.get('limit') ?? '0'))
+				limit
 			})
 		)
 	);
 
 	const link = new URL(url.toString()).toString();
 
-	return { link, other_news_limit, other_news_count, other_news, news_item };
+	return { link, other_news_count, other_news, news_item };
 }
+
+export const actions = {
+	loadMore: async ({ request, params, fetch }) => {
+		const data = await request.formData();
+		const current = JSON.parse(data.get('data') as string);
+		const directus = getDirectusInstance(fetch);
+		const other_news = parse(
+			News,
+			await directus.request(
+				readItems('news', {
+					fields: [
+						'*',
+						{
+							user_created: ['first_name', 'last_name']
+						},
+						{
+							user_updated: ['first_name', 'last_name']
+						},
+						{
+							news_tags: [
+								{
+									news_tags_id: ['name']
+								}
+							]
+						}
+					],
+					filter: {
+						slug: {
+							_neq: params.slug
+						}
+					},
+					sort: ['-date_created'],
+					offset: current.length,
+					limit
+				})
+			)
+		);
+
+		const items = [...current, ...other_news];
+		return {
+			success: true,
+			items
+		};
+	}
+} satisfies Actions;
diff --git a/website-frontend/src/routes/news/[slug]/+page.svelte b/website-frontend/src/routes/news/[slug]/+page.svelte
index c9d080e5..81336967 100644
--- a/website-frontend/src/routes/news/[slug]/+page.svelte
+++ b/website-frontend/src/routes/news/[slug]/+page.svelte
@@ -10,7 +10,7 @@
 	export let data;
 	let banner_height: number;
 
-	$: ({ link, other_news_limit, other_news_count, other_news, news_item } = data);
+	$: ({ link, other_news_count, other_news, news_item } = data);
 
 	$: news_tags = news_item.news_tags
 		? news_item.news_tags
@@ -110,7 +110,6 @@
 				text="other news"
 				component={NewsCard}
 				count={other_news_count}
-				limit={other_news_limit}
 			/>
 		</div>
 	</div>
diff --git a/website-frontend/src/routes/research/publications/+page.server.ts b/website-frontend/src/routes/research/publications/+page.server.ts
index af04e2f8..30da9f49 100644
--- a/website-frontend/src/routes/research/publications/+page.server.ts
+++ b/website-frontend/src/routes/research/publications/+page.server.ts
@@ -1,11 +1,14 @@
 /** @type {import('./$types').PageServerLoad} */
-import { readItem, readItems, readSingleton } from '@directus/sdk';
+import { aggregate, readItems, readSingleton } from '@directus/sdk';
 import getDirectusInstance from '$lib/directus';
-import { parse } from 'valibot';
+import { awaitAsync, parse, parseAsync, pipeAsync, promise } from 'valibot';
 import { Publications } from '$lib/models/publications';
 import { Laboratories } from '$lib/models/laboratories';
 import { PublicationsTags } from '$lib/models/publications_tags.js';
 import { Research } from '$lib/models/research';
+import type { Actions } from '@sveltejs/kit';
+
+const limit = 12;
 
 export async function load({ fetch, url }) {
 	const directus = getDirectusInstance(fetch);
@@ -18,6 +21,10 @@ export async function load({ fetch, url }) {
 		tags: url.searchParams.getAll('tags')
 	};
 
+	const people = new Map(
+		(await directus.request(readItems('people'))).map((person) => [person.id, person])
+	);
+
 	const years_filters = await (async () => {
 		const res = parse(
 			Publications,
@@ -60,10 +67,31 @@ export async function load({ fetch, url }) {
 		)
 	).map(({ name }) => name);
 
-	const publications = await (async () => {
-		const res = parse(
-			Publications,
-			await directus.request(
+	const publications_count = await directus
+		.request(
+			aggregate('publications', {
+				aggregate: { count: '*' },
+				query: {
+					filter: {
+						'year(publish_date)': { _in: filters.years.length !== 0 ? filters.years : undefined },
+						laboratory: {
+							name: { _in: filters.laboratories.length !== 0 ? filters.laboratories : undefined }
+						},
+						publication_tags: {
+							publications_tags_id: {
+								name: { _in: filters.tags.length !== 0 ? filters.tags : undefined }
+							}
+						}
+					}
+				}
+			})
+		)
+		.then((res) => parseInt(res[0].count ?? '0'));
+
+	const publications = parseAsync(
+		pipeAsync(promise(), awaitAsync(), Publications),
+		directus
+			.request(
 				readItems('publications', {
 					fields: [
 						'*',
@@ -86,33 +114,131 @@ export async function load({ fetch, url }) {
 							}
 						}
 					},
-					sort: ['-publish_date']
+					sort: ['-publish_date'],
+					limit
 				})
 			)
-		);
-
-		return await Promise.all(
-			res.map(async (item) => {
-				return await {
-					...item,
-					authors: await Promise.all(
-						item.authors
-							? item.authors.map(async (author) => {
-									if (typeof author.link === 'undefined') return author;
-									if (typeof author.link === 'object') {
-										const person = await directus.request(readItem('people', author.link.key));
-										return {
-											...author,
-											link: `/people/${person.username}`
-										};
-									}
-								})
-							: []
+			.then(
+				async (res) =>
+					await Promise.all(
+						res.map(async (item) => {
+							return {
+								...item,
+								authors: await Promise.all(
+									item.authors
+										? item.authors.map(async (author) => {
+												if (typeof author.link === 'undefined') return author;
+												if (typeof author.link === 'object') {
+													const person = people.get(author.link.key);
+													return {
+														...author,
+														link: `/people/${person ? (person.username ?? '') : ''}`
+													};
+												}
+											})
+										: []
+								)
+							};
+						})
 					)
-				};
-			})
-		);
-	})();
+			)
+	);
 
-	return { research, publications, years_filters, laboratories_filters, tags_filters };
+	return {
+		research,
+		years_filters,
+		laboratories_filters,
+		tags_filters,
+		publications_count,
+		publications
+	};
 }
+
+export const actions = {
+	loadMore: async ({ request, fetch, url }) => {
+		const data = await request.formData();
+		const current = JSON.parse(data.get('data') as string);
+		const directus = getDirectusInstance(fetch);
+		const filters = {
+			years: url.searchParams.getAll('year'),
+			laboratories: url.searchParams.getAll('laboratory'),
+			tags: url.searchParams.getAll('tags')
+		};
+		const people = new Map(
+			(await directus.request(readItems('people'))).map((person) => [person.id, person])
+		);
+		const publications = parse(
+			Publications,
+			await directus
+				.request(
+					readItems('publications', {
+						fields: [
+							'*',
+							{
+								publication_tags: [
+									{
+										publications_tags_id: ['name']
+									}
+								]
+							}
+						],
+						filter: {
+							'year(publish_date)': { _in: filters.years.length !== 0 ? filters.years : undefined },
+							laboratory: {
+								name: { _in: filters.laboratories.length !== 0 ? filters.laboratories : undefined }
+							},
+							publication_tags: {
+								publications_tags_id: {
+									name: { _in: filters.tags.length !== 0 ? filters.tags : undefined }
+								}
+							}
+						},
+						sort: ['-publish_date'],
+						offset: current.length,
+						limit
+					})
+				)
+				.then(
+					async (res) =>
+						await Promise.all(
+							res.map(async (item) => {
+								return {
+									...item,
+									authors: await Promise.all(
+										item.authors
+											? item.authors.map(async (author) => {
+													if (typeof author.link === 'undefined') return author;
+													if (typeof author.link === 'object') {
+														const person = people.get(author.link.key);
+														return {
+															...author,
+															link: `/people/${person ? (person.username ?? '') : ''}`
+														};
+													}
+												})
+											: []
+									)
+								};
+							})
+						)
+				)
+		);
+		const items = [...current, ...publications].sort((a, b) => {
+			if ((url.searchParams.get('sort') ?? '') === 'author') {
+				const aLastName = a.authors[0]?.last_name || '';
+				const bLastName = b.authors[0]?.last_name || '';
+				return aLastName.localeCompare(bLastName);
+			} else if ((url.searchParams.get('sort') ?? '') === 'title') {
+				const a_title = a.title || '';
+				const b_title = b.title || '';
+				return a_title.localeCompare(b_title);
+			} else {
+				return (b.publish_date ?? '1970-01-01').localeCompare(a.publish_date ?? '1970-01-01');
+			}
+		});
+		return {
+			success: true,
+			items
+		};
+	}
+} satisfies Actions;
diff --git a/website-frontend/src/routes/research/publications/+page.svelte b/website-frontend/src/routes/research/publications/+page.svelte
index aee27199..c97b9ace 100644
--- a/website-frontend/src/routes/research/publications/+page.svelte
+++ b/website-frontend/src/routes/research/publications/+page.svelte
@@ -1,20 +1,26 @@
 <script lang="ts">
 	/** @type {import('./$types').PageData} */
 	import Banner from '$lib/components/banners/Banner.svelte';
-	import LoadMore from '$lib/components/buttons/LoadMore.svelte';
 	import PublicationCard from '$lib/components/cards/PublicationCard.svelte';
 	import FilterBar from '$lib/components/filter/FilterBar.svelte';
 	import Breadcrumb from '$lib/components/breadcrumbs/PageBreadcrumb.svelte';
 	import Sort from '$lib/components/sort/Sort.svelte';
 	import FullWidthBreakout from '$lib/components/FullWidthBreakout.svelte';
+	import Await from '$lib/components/loading/Await.svelte';
 	import { page } from '$app/stores';
+	import { type Publications } from '$lib/models/publications.js';
 
 	export let data;
+	export let publications: Promise<Publications>;
 
-	$: ({ research, publications, years_filters, laboratories_filters, tags_filters } = data);
-
-	const inc = 12;
-	let shown = inc;
+	$: ({
+		research,
+		years_filters,
+		laboratories_filters,
+		tags_filters,
+		publications_count,
+		publications
+	} = data);
 
 	$: sort_options = ['date', 'author', 'title'];
 
@@ -32,22 +38,6 @@
 			categories: tags_filters
 		}
 	];
-
-	$: sortedPublications = [...publications].sort((a, b) => {
-		if (($page.url.searchParams.get('sort') ?? '') === 'author') {
-			const aLastName = a.authors[0]?.last_name || '';
-			const bLastName = b.authors[0]?.last_name || '';
-			return aLastName.localeCompare(bLastName);
-		} else if (($page.url.searchParams.get('sort') ?? '') === 'title') {
-			const a_title = a.title || '';
-			const b_title = b.title || '';
-			return a_title.localeCompare(b_title);
-		} else {
-			return (b.publish_date ?? '1970-01-01').localeCompare(a.publish_date ?? '1970-01-01');
-		}
-	});
-
-	$: publicationsList = sortedPublications?.slice(0, shown);
 </script>
 
 <FullWidthBreakout>
@@ -62,16 +52,25 @@
 	<FilterBar {controls} />
 	<Sort {sort_options} />
 
-	<div
-		class="mx-auto mt-5 grid max-w-[80vw] grid-cols-1 gap-4 pb-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-	>
-		{#each publicationsList as publication}
-			<PublicationCard item={publication} />
-		{/each}
-	</div>
-	{#if shown < publications.length}
-		<div class="flex items-center justify-center">
-			<LoadMore {inc} bind:shown />
-		</div>
-	{/if}
+	<Await
+		layout="mx-auto mt-5 grid max-w-[80vw] grid-cols-1 gap-4 pb-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+		data={publications.then((res) =>
+			res.sort((a, b) => {
+				if (($page.url.searchParams.get('sort') ?? '') === 'author') {
+					const aLastName = a.authors ? (a.authors[0].last_name ?? '') : '';
+					const bLastName = b.authors ? (b.authors[0].last_name ?? '') : '';
+					return aLastName.localeCompare(bLastName);
+				} else if (($page.url.searchParams.get('sort') ?? '') === 'title') {
+					const a_title = a.title || '';
+					const b_title = b.title || '';
+					return a_title.localeCompare(b_title);
+				} else {
+					return (b.publish_date ?? '1970-01-01').localeCompare(a.publish_date ?? '1970-01-01');
+				}
+			})
+		)}
+		text="publications"
+		component={PublicationCard}
+		count={publications_count}
+	/>
 </div>
diff --git a/website-frontend/src/routes/research/publications/+page.ts b/website-frontend/src/routes/research/publications/+page.ts
index c703b3fb..542c24c8 100644
--- a/website-frontend/src/routes/research/publications/+page.ts
+++ b/website-frontend/src/routes/research/publications/+page.ts
@@ -2,9 +2,10 @@
 export async function load({ data }) {
 	return {
 		research: data.research,
-		publications: data.publications,
 		years_filters: data.years_filters,
 		laboratories_filters: data.laboratories_filters,
-		tags_filters: data.tags_filters
+		tags_filters: data.tags_filters,
+		publications_count: data.publications_count,
+		publications: data.publications
 	};
 }
diff --git a/website-frontend/src/routes/search/+page.server.ts b/website-frontend/src/routes/search/+page.server.ts
index 6c6c6c0e..a1cb2fff 100644
--- a/website-frontend/src/routes/search/+page.server.ts
+++ b/website-frontend/src/routes/search/+page.server.ts
@@ -1,53 +1,113 @@
 /** @type {import('./$types').PageServerLoad} */
-import { readItem, readItems } from '@directus/sdk';
+import { aggregate, readItems } from '@directus/sdk';
 import getDirectusInstance from '$lib/directus';
-import { parse } from 'valibot';
-import { News } from '$lib/models/news';
-import { Events } from '$lib/models/events';
-import { People } from '$lib/models/people';
-import { Laboratories } from '$lib/models/laboratories';
-import { Publications } from '$lib/models/publications';
+import { awaitAsync, parse, parseAsync, pipeAsync, promise } from 'valibot';
+import { News, NewsItem } from '$lib/models/news';
+import { Events, Event } from '$lib/models/events';
+import { People, Person } from '$lib/models/people';
+import { Laboratories, Laboratory } from '$lib/models/laboratories';
+import { Publication, Publications } from '$lib/models/publications';
+import type { Actions } from '@sveltejs/kit';
+
+const limit = 6;
 
 export async function load({ fetch, url }) {
 	const directus = getDirectusInstance(fetch);
-	const news = parse(
-		News,
-		await directus.request(
+	const news_count = await directus
+		.request(
+			aggregate('news', {
+				aggregate: { count: '*' },
+				query: {
+					search: url.searchParams.get('q') ?? undefined
+				}
+			})
+		)
+		.then((res) => parseInt(res[0].count ?? '0'));
+	const news = parseAsync(
+		pipeAsync(promise(), awaitAsync(), News),
+		directus.request(
 			readItems('news', {
-				search: url.searchParams.get('q') ?? undefined
+				search: url.searchParams.get('q') ?? undefined,
+				limit
 			})
 		)
 	);
-	const events = parse(
-		Events,
-		await directus.request(
+	const events_count = await directus
+		.request(
+			aggregate('events', {
+				aggregate: { count: '*' },
+				query: {
+					search: url.searchParams.get('q') ?? undefined
+				}
+			})
+		)
+		.then((res) => parseInt(res[0].count ?? '0'));
+	const events = parseAsync(
+		pipeAsync(promise(), awaitAsync(), Events),
+		directus.request(
 			readItems('events', {
-				search: url.searchParams.get('q') ?? undefined
+				search: url.searchParams.get('q') ?? undefined,
+				limit
 			})
 		)
 	);
-	const people = parse(
-		People,
-		await directus.request(
+	const people_count = await directus
+		.request(
+			aggregate('people', {
+				aggregate: { count: '*' },
+				query: {
+					search: url.searchParams.get('q') ?? undefined
+				}
+			})
+		)
+		.then((res) => parseInt(res[0].count ?? '0'));
+	const people = parseAsync(
+		pipeAsync(promise(), awaitAsync(), People),
+		directus.request(
 			readItems('people', {
-				search: url.searchParams.get('q') ?? undefined
+				search: url.searchParams.get('q') ?? undefined,
+				limit
 			})
 		)
 	);
-	const laboratories = parse(
-		Laboratories,
-		await directus.request(
+	const laboratories_count = await directus
+		.request(
+			aggregate('laboratories', {
+				aggregate: { count: '*' },
+				query: {
+					search: url.searchParams.get('q') ?? undefined
+				}
+			})
+		)
+		.then((res) => parseInt(res[0].count ?? '0'));
+	const laboratories = parseAsync(
+		pipeAsync(promise(), awaitAsync(), Laboratories),
+		directus.request(
 			readItems('laboratories', {
-				search: url.searchParams.get('q') ?? undefined
+				search: url.searchParams.get('q') ?? undefined,
+				limit
 			})
 		)
 	);
-	const publications = await (async () => {
-		const publications = parse(
-			Publications,
-			await directus.request(
+	const publications_count = await directus
+		.request(
+			aggregate('publications', {
+				aggregate: { count: '*' },
+				query: {
+					search: url.searchParams.get('q') ?? undefined
+				}
+			})
+		)
+		.then((res) => parseInt(res[0].count ?? '0'));
+	const peopleMap = new Map((await people).map((person) => [person.id, person]));
+	const publications = parseAsync(
+		pipeAsync(promise(), awaitAsync(), Publications),
+		directus
+			.request(
 				readItems('publications', {
 					search: url.searchParams.get('q') ?? undefined,
+					sort: ['-publish_date'],
+					limit,
 					fields: [
 						'*',
 						{
@@ -60,32 +120,38 @@ export async function load({ fetch, url }) {
 					]
 				})
 			)
-		);
-
-		return await Promise.all(
-			publications.map(async (item) => {
-				return await {
-					...item,
-					authors: await Promise.all(
-						item.authors
-							? item.authors.map(async (author) => {
-									if (typeof author.link === 'undefined') return author;
-									if (typeof author.link === 'object') {
-										const person = await directus.request(readItem('people', author.link.key));
-										return {
-											...author,
-											link: `/people/${person.username}`
-										};
-									}
-								})
-							: []
+			.then(
+				async (res) =>
+					await Promise.all(
+						res.map(async (item) => {
+							return {
+								...item,
+								authors: await Promise.all(
+									item.authors
+										? item.authors.map(async (author) => {
+												if (typeof author.link === 'undefined') return author;
+												if (typeof author.link === 'object') {
+													const person = peopleMap.get(author.link.key);
+													return {
+														...author,
+														link: `/people/${person ? (person.username ?? '') : ''}`
+													};
+												}
+											})
+										: []
+								)
+							};
+						})
 					)
-				};
-			})
-		);
-	})();
+			)
+	);
 
 	return {
+		news_count,
+		events_count,
+		people_count,
+		laboratories_count,
+		publications_count,
 		news,
 		events,
 		people,
@@ -93,3 +159,127 @@ export async function load({ fetch, url }) {
 		publications
 	};
 }
+
+export const actions = {
+	loadMore: async ({ request, fetch, url }) => {
+		const tab = url.searchParams.get('tab') ?? 'News';
+		const data = await request.formData();
+		const current = JSON.parse(data.get('data') as string);
+		const directus = getDirectusInstance(fetch);
+		let news: News = [];
+		let events: Events = [];
+		let people: People = [];
+		let laboratories: Laboratories = [];
+		let publications: Publications = [];
+		let items: (NewsItem | Event | Person | Laboratory | Publication)[] = [];
+		if (tab == 'News') {
+			news = parse(
+				News,
+				await directus.request(
+					readItems('news', {
+						search: url.searchParams.get('q') ?? undefined,
+						offset: current.length,
+						limit
+					})
+				)
+			);
+			items = [...current, ...news];
+		}
+		if (tab == 'Events') {
+			events = parse(
+				Events,
+				await directus.request(
+					readItems('events', {
+						search: url.searchParams.get('q') ?? undefined,
+						offset: current.length,
+						limit
+					})
+				)
+			);
+			items = [...current, ...events];
+		}
+		if (tab == 'People') {
+			people = parse(
+				People,
+				await directus.request(
+					readItems('people', {
+						search: url.searchParams.get('q') ?? undefined,
+						offset: current.length,
+						limit
+					})
+				)
+			);
+			items = [...current, ...people];
+		}
+		if (tab == 'Laboratories') {
+			laboratories = parse(
+				Laboratories,
+				await directus.request(
+					readItems('laboratories', {
+						search: url.searchParams.get('q') ?? undefined,
+						offset: current.length,
+						limit
+					})
+				)
+			);
+			items = [...current, ...laboratories];
+		}
+		if (tab == 'Publications') {
+			const people = new Map(
+				(await directus.request(readItems('people'))).map((person) => [person.id, person])
+			);
+			publications = parse(
+				Publications,
+				await directus
+					.request(
+						readItems('publications', {
+							search: url.searchParams.get('q') ?? undefined,
+							sort: ['-publish_date'],
+							offset: current.length,
+							limit,
+							fields: [
+								'*',
+								{
+									publication_tags: [
+										{
+											publications_tags_id: ['name']
+										}
+									]
+								}
+							]
+						})
+					)
+					.then(
+						async (res) =>
+							await Promise.all(
+								res.map(async (item) => {
+									return {
+										...item,
+										authors: await Promise.all(
+											item.authors
+												? item.authors.map(async (author) => {
+														if (typeof author.link === 'undefined') return author;
+														if (typeof author.link === 'object') {
+															const person = people.get(author.link.key);
+															return {
+																...author,
+																link: `/people/${person ? (person.username ?? '') : ''}`
+															};
+														}
+													})
+												: []
+										)
+									};
+								})
+							)
+					)
+			);
+			items = [...current, ...publications];
+		}
+
+		return {
+			success: true,
+			items
+		};
+	}
+} satisfies Actions;
diff --git a/website-frontend/src/routes/search/+page.svelte b/website-frontend/src/routes/search/+page.svelte
index d72e9b40..ca39b664 100644
--- a/website-frontend/src/routes/search/+page.svelte
+++ b/website-frontend/src/routes/search/+page.svelte
@@ -3,56 +3,94 @@
 
 	import * as Tabs from '$lib/@shadcn-svelte/ui/tabs';
 	import { Search } from 'lucide-svelte';
-	import SearchResult from '$lib/components/search/SearchResult.svelte';
-	import { ScrollArea } from '$lib/@shadcn-svelte/ui/scroll-area/index.js';
 	import { page } from '$app/stores';
+	import Await from '$lib/components/loading/Await.svelte';
+	import { goto } from '$app/navigation';
+	import NewsSearchResult from '$lib/components/search/NewsSearchResult.svelte';
+	import EventsSearchResult from '$lib/components/search/EventsSearchResult.svelte';
+	import PeopleSearchResult from '$lib/components/search/PeopleSearchResult.svelte';
+	import LaboratoriesSearchResult from '$lib/components/search/LaboratoriesSearchResult.svelte';
+	import PublicationsSearchResult from '$lib/components/search/PublicationsSearchResult.svelte';
 
 	export let data;
-	let tabs;
+	const layout = 'lg:w-3/4';
 
-	$: ({ news, events, people, laboratories, publications } = data);
+	$: ({
+		news_count,
+		events_count,
+		people_count,
+		laboratories_count,
+		publications_count,
+		news,
+		events,
+		people,
+		laboratories,
+		publications
+	} = data);
 
+	$: query = new URLSearchParams($page.url.searchParams.toString());
+	$: value =
+		query.get('tab') ??
+		(news_count > 0
+			? 'News'
+			: events_count > 0
+				? 'Events'
+				: people_count > 0
+					? 'People'
+					: laboratories_count > 0
+						? 'Laboratories'
+						: publications_count > 0
+							? 'Publications'
+							: 'News');
 	$: tabs = [
-		{
-			tab: 'All',
-			res: news.length + events.length + people.length + laboratories.length + publications.length
-		},
+		// {
+		// 	tab: 'All',
+		// 	res: news_count + events_count + people_count + laboratories_count + publications_count
+		// },
 		{
 			tab: 'News',
-			res: news.length
+			res: news_count
 		},
 		{
 			tab: 'Events',
-			res: events.length
+			res: events_count
 		},
 		{
 			tab: 'People',
-			res: people.length
+			res: people_count
 		},
 		{
 			tab: 'Laboratories',
-			res: laboratories.length
+			res: laboratories_count
 		},
 		{
 			tab: 'Publications',
-			res: publications.length
+			res: publications_count
 		}
 	];
 </script>
 
-<div class="container">
-	<Tabs.Root value="All">
-		<ScrollArea orientation="horizontal">
-			<Tabs.List class="mt-20 flex w-full items-center justify-center bg-background">
-				{#each tabs as { tab, res }}
-					<Tabs.Trigger
-						value={tab}
-						class="focus:ring-none rounded-none data-[state=active]:shadow-none lg:data-[state=active]:border-b-2"
-						>{tab} ({res})</Tabs.Trigger
-					>
-				{/each}
-			</Tabs.List>
-		</ScrollArea>
+<div class="container p-8">
+	<Tabs.Root
+		bind:value
+		onValueChange={(value) => {
+			// if (value == 'All') query.delete('tab');
+			// else query.set('tab', value ?? '');
+			query.set('tab', value ?? '');
+			goto(`?${query.toString()}`, { noScroll: true });
+		}}
+	>
+		<Tabs.List
+			class="flex h-full w-full flex-wrap items-center justify-center border bg-background lg:mt-10"
+		>
+			{#each tabs as { tab, res }}
+				<Tabs.Trigger
+					value={tab}
+					class="focus:ring-none rounded-none data-[state=active]:shadow-none lg:data-[state=active]:border-b-2"
+					>{tab} ({res})</Tabs.Trigger
+				>
+			{/each}
+		</Tabs.List>
 
 		{#each tabs as { tab, res }}
 			<Tabs.Content value={tab}>
@@ -61,130 +99,87 @@
 						<p class="text-3xl font-bold">
 							{res} Search result{#if res !== 1}s{/if} for
 							<span class="font-normal">{$page.url.searchParams.get('q')}</span>
-							{#if tab !== 'All'}
+							<span>in {tab}</span>
+							<!-- {#if tab !== 'All'}
 								<span>in {tab}</span>
-							{/if}
+							{/if} -->
 						</p>
 					</div>
-
-					{#if tab === 'All'}
-						{#each news as { slug, title, summary, background_image }}
-							<SearchResult href="/news/{slug}" image={background_image} name={title}>
-								<p class="text-xl font-bold">{title}</p>
-								{#if summary}
-									<p class="line-clamp-2">{@html summary}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-						{#each events as { slug, event_headline, event_content, hero_image }}
-							<SearchResult href="/events/{slug}" image={hero_image} name={event_headline}>
-								<p class="text-xl font-bold">{event_headline}</p>
-								{#if event_content}
-									<p class="line-clamp-2">{@html event_content}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-						{#each people as { username, first_name, last_name, profile_image, position }}
-							<SearchResult
-								href="/people/{username}"
-								image={profile_image}
-								name="{first_name} {last_name}"
-							>
-								<p class="text-xl font-bold">{first_name} {last_name}</p>
-								{#if position}
-									<p>{position}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-						{#each laboratories as { slug, name, description, logo }}
-							<SearchResult href="/research/labs/{slug}" image={logo} {name}>
-								<p class="text-xl font-bold">{name}</p>
-								{#if description}
-									<p class="line-clamp-2">{description}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-						{#each publications as publication}
-							<SearchResult
-								{publication}
-								href="/research/publications"
-								image={publication.hero_image}
-								name={publication.title}
-							>
-								<p class="text-xl font-bold">{publication.title}</p>
-								{#if publication.authors.length > 0}
-									<p>
-										{#each publication.authors as { last_name }, i}
-											{last_name}{#if i + 1 !== publication.authors.length}{`, `}{/if}
-										{/each}
-									</p>
-								{/if}
-								{#if publication.abstract}
-									<p class="line-clamp-2">{publication.abstract}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-					{:else if tab === 'News'}
-						{#each news as { slug, title, summary, background_image }}
-							<SearchResult href="/news/{slug}" image={background_image} name={title}>
-								<p class="text-xl font-bold">{title}</p>
-								{#if summary}
-									<p class="line-clamp-2">{@html summary}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-					{:else if tab === 'Events'}
-						{#each events as { slug, event_headline, event_content, hero_image }}
-							<SearchResult href="/events/{slug}" image={hero_image} name={event_headline}>
-								<p class="text-xl font-bold">{event_headline}</p>
-								{#if event_content}
-									<p class="line-clamp-2">{@html event_content}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-					{:else if tab === 'People'}
-						{#each people as { username, first_name, last_name, profile_image, position }}
-							<SearchResult
-								href="/people/{username}"
-								image={profile_image}
-								name="{first_name} {last_name}"
-							>
-								<p class="text-xl font-bold">{first_name} {last_name}</p>
-								{#if position}
-									<p>{position}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-					{:else if tab === 'Laboratories'}
-						{#each laboratories as { slug, name, description, logo }}
-							<SearchResult href="/research/labs/{slug}" image={logo} {name}>
-								<p class="text-xl font-bold">{name}</p>
-								{#if description}
-									<p class="line-clamp-2">{description}</p>
-								{/if}
-							</SearchResult>
-						{/each}
-					{:else if tab === 'Publications'}
-						{#each publications as publication}
-							<SearchResult
-								{publication}
-								href="/research/publications"
-								image={publication.hero_image}
-								name={publication.title}
-							>
-								<p class="text-xl font-bold">{publication.title}</p>
-								{#if publication.authors.length > 0}
-									<p>
-										{#each publication.authors as { last_name }, i}
-											{last_name}{#if i + 1 !== publication.authors.length}{`, `}{/if}
-										{/each}
-									</p>
-								{/if}
-								{#if publication.abstract}
-									<p class="line-clamp-2">{publication.abstract}</p>
-								{/if}
-							</SearchResult>
-						{/each}
+					<!-- {#if tab === 'All'}
+						<Await {layout} data={news} text="news" component={NewsSearchResult} count={news_count} />
+						<Await
+							{layout}
+							data={events}
+							text="events"
+							component={EventsSearchResult}
+							count={events_count}
+						/>
+						<Await
+							{layout}
+							data={people}
+							text="people"
+							component={PeopleSearchResult}
+							count={people_count}
+						/>
+						<Await
+							{layout}
+							data={laboratories}
+							text="laboratories"
+							component={LaboratoriesSearchResult}
+							count={laboratories_count}
+						/>
+						<Await
+							{layout}
+							data={publications}
+							text="publications"
+							component={PublicationsSearchResult}
+							count={publications_count}
+						/>
+					{/if} -->
+					{#if tab === 'News'}
+						<Await
+							{layout}
+							data={news}
+							text="news"
+							component={NewsSearchResult}
+							count={news_count}
+						/>
+					{/if}
+					{#if tab === 'Events'}
+						<Await
+							{layout}
+							data={events}
+							text="events"
+							component={EventsSearchResult}
+							count={events_count}
+						/>
+					{/if}
+					{#if tab === 'People'}
+						<Await
+							{layout}
+							data={people}
+							text="people"
+							component={PeopleSearchResult}
+							count={people_count}
+						/>
+					{/if}
+					{#if tab === 'Laboratories'}
+						<Await
+							{layout}
+							data={laboratories}
+							text="laboratories"
+							component={LaboratoriesSearchResult}
+							count={laboratories_count}
+						/>
+					{/if}
+					{#if tab === 'Publications'}
+						<Await
+							{layout}
+							data={publications}
+							text="publications"
+							component={PublicationsSearchResult}
+							count={publications_count}
+						/>
 					{/if}
 				{:else}
 					<div class="relative h-[50vh]">
@@ -192,12 +187,13 @@
 							<Search class="h-[30vh] w-[30vh] text-secondary/25" />
 						</div>
 						<div class="absolute left-0 top-0 flex h-full w-full items-center justify-center">
-							<p>
+							<p class="text-center">
 								{#if $page.url.searchParams.get('q')}
 									No search results for <b>{$page.url.searchParams.get('q')}</b>
-									{#if tab !== 'All'}
+									<span>in {tab}</span>
+									<!-- {#if tab !== 'All'}
 										<span>in {tab}</span>
-									{/if}
+									{/if} -->
 								{:else}
 									Please provide a search input
 								{/if}
diff --git a/website-frontend/src/routes/search/+page.ts b/website-frontend/src/routes/search/+page.ts
index a7ad3ae8..3ce1e056 100644
--- a/website-frontend/src/routes/search/+page.ts
+++ b/website-frontend/src/routes/search/+page.ts
@@ -1,6 +1,11 @@
 /** @type {import('./$types').PageLoad} */
 export async function load({ data }) {
 	return {
+		news_count: data.news_count,
+		events_count: data.events_count,
+		people_count: data.people_count,
+		laboratories_count: data.laboratories_count,
+		publications_count: data.publications_count,
 		news: data.news,
 		events: data.events,
 		people: data.people,