diff --git a/frontend/src/routes/adventures/+page.server.ts b/frontend/src/routes/adventures/+page.server.ts
index efa29c3..c120eda 100644
--- a/frontend/src/routes/adventures/+page.server.ts
+++ b/frontend/src/routes/adventures/+page.server.ts
@@ -3,7 +3,7 @@ import type { PageServerLoad } from './$types';
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 import type { Adventure } from '$lib/types';
 
-import type { Actions } from '@sveltejs/kit';
+import type { Actions, RequestEvent } from '@sveltejs/kit';
 import { fetchCSRFToken, tryRefreshToken } from '$lib/index.server';
 import { checkLink } from '$lib';
 
@@ -41,7 +41,8 @@ export const load = (async (event) => {
 			props: {
 				adventures,
 				next,
-				previous
+				previous,
+				count
 			}
 		};
 	}
@@ -395,6 +396,8 @@ export const actions: Actions = {
 		let previous = null;
 		let count = 0;
 
+		console.log(filterString);
+
 		let visitedFetch = await fetch(
 			`${serverEndpoint}/api/adventures/filtered?types=${filterString}`,
 			{
@@ -413,6 +416,7 @@ export const actions: Actions = {
 			previous = res.previous;
 			count = res.count;
 			adventures = [...adventures, ...visited];
+			console.log(next, previous, count);
 		}
 
 		return {
@@ -421,5 +425,52 @@ export const actions: Actions = {
 			previous,
 			count
 		};
+	},
+	changePage: async (event) => {
+		const formData = await event.request.formData();
+		const url = formData.get('url');
+
+		console.log('Received URL:', url);
+
+		if (!url) {
+			return {
+				status: 400,
+				body: { error: 'URL is required' }
+			};
+		}
+
+		try {
+			const response = await fetch(url.toString(), {
+				headers: {
+					'Content-Type': 'application/json',
+					Cookie: `${event.cookies.get('auth')}`
+				}
+			});
+
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+			const data = await response.json();
+			let adventures = data.results as Adventure[];
+			let next = data.next;
+			let previous = data.previous;
+			let count = data.count;
+
+			return {
+				status: 200,
+				body: {
+					adventures,
+					next,
+					previous,
+					count
+				}
+			};
+		} catch (error) {
+			console.error('Error fetching data:', error);
+			return {
+				status: 500,
+				body: { error: 'Failed to fetch data' }
+			};
+		}
 	}
 };
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index dc5a698..92af8cb 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { enhance, deserialize } from '$app/forms';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import NewAdventure from '$lib/components/NewAdventure.svelte';
@@ -18,25 +18,20 @@
 	let isShowingCreateModal: boolean = false;
 	let newType: string = '';
 
-	let next: string | null = null;
-	let previous: string | null = null;
-	let count = 0;
+	let next: string | null = data.props.next || null;
+	let previous: string | null = data.props.previous || null;
+	let count = data.props.count || 0;
 
-	async function changePage(direction: string) {
-		let url: string = '';
-		if (direction === 'next' && next) {
-			url = next;
-		} else if (direction === 'previous' && previous) {
-			url = previous;
-		} else {
-			return;
-		}
-		let res = await fetch(url);
-		let result = await res.json();
-		adventures = result.results as Adventure[];
-		next = result.next;
-		previous = result.previous;
-		count = result.count;
+	function handleChangePage() {
+		return async ({ result }: any) => {
+			if (result.type === 'success') {
+				console.log(result.data);
+				adventures = result.data.body.adventures as Adventure[];
+				next = result.data.body.next;
+				previous = result.data.body.previous;
+				count = result.data.body.count;
+			}
+		};
 	}
 
 	function handleSubmit() {
@@ -52,7 +47,7 @@
 					next = result.data.next;
 					previous = result.data.previous;
 					count = result.data.count;
-					// sort(currentSort);
+					console.log(next);
 				}
 			}
 		};
@@ -186,15 +181,20 @@
 				{/each}
 			</div>
 			<div class="join grid grid-cols-2">
-				{#if previous}
-					<button class="join-item btn btn-outline" on:click={() => changePage('previous')}
-						>Previous page</button
-					>
-				{/if}
-				{#if next}
-					<button class="join-item btn btn-outline" on:click={() => changePage('next')}>Next</button
-					>
-				{/if}
+				<div class="join grid grid-cols-2">
+					{#if previous}
+						<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
+							<input type="hidden" name="url" value={previous} />
+							<button class="join-item btn btn-outline" type="submit">Previous page</button>
+						</form>
+					{/if}
+					{#if next}
+						<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
+							<input type="hidden" name="url" value={next} />
+							<button class="join-item btn btn-outline" type="submit">Next page</button>
+						</form>
+					{/if}
+				</div>
 			</div>
 		</div>
 	</div>