diff --git a/src/lib/components/PaymentCard.svelte b/src/lib/components/PaymentCard.svelte
new file mode 100644
index 0000000..288971a
--- /dev/null
+++ b/src/lib/components/PaymentCard.svelte
@@ -0,0 +1,7 @@
+<script>
+	export let payment;
+</script>
+<div>
+	<p>{payment.amount}</p>
+	<p>{payment.payee}</p>
+</div>
diff --git a/src/lib/js/authenticate.ts b/src/lib/js/authenticate.ts
index 2e25dc6..5af98c4 100644
--- a/src/lib/js/authenticate.ts
+++ b/src/lib/js/authenticate.ts
@@ -31,7 +31,8 @@ export async function authenticateUser(cookies){
 		}
 		return {
 			username: decoded.username,
-			access: res.access
+			access: res.access,
+			_id: res._id.toString(),
 		}
 	}
 	else{
diff --git a/src/routes/(abrechnung)/+layout.server.ts b/src/routes/(abrechnung)/+layout.server.ts
new file mode 100644
index 0000000..1cc5acb
--- /dev/null
+++ b/src/routes/(abrechnung)/+layout.server.ts
@@ -0,0 +1,7 @@
+import { get_username } from '$lib/js/get_username';;
+import type { Actions, PageServerLoad } from "./$types"
+import { error } from "@sveltejs/kit"
+
+export const load = (async ({cookies}) => {
+	return { user: await get_username(cookies) }
+});
diff --git a/src/routes/(abrechnung)/+layout.svelte b/src/routes/(abrechnung)/+layout.svelte
new file mode 100644
index 0000000..b4dcc9f
--- /dev/null
+++ b/src/routes/(abrechnung)/+layout.svelte
@@ -0,0 +1,20 @@
+<script>
+import Header from '$lib/components/Header.svelte'
+import UserHeader from '$lib/components/UserHeader.svelte';
+export let data
+let username = ""
+if(data.user){
+	username = data.user.username
+}
+</script>
+
+<Header>
+	<ul class=site_header slot=links>
+	<li><a href="/rezepte">Rezepte</a></li>
+	<li><a href="/bilder">Bilder</a></li>
+	<li><a href="/git">Git</a></li>
+	<li><a href="/transmission">Transmission</a></li>
+	</ul>
+	<UserHeader {username} slot=right_side></UserHeader>
+	<slot></slot>
+</Header>
diff --git a/src/routes/(abrechnung)/abrechnung/+page.server.ts b/src/routes/(abrechnung)/abrechnung/+page.server.ts
new file mode 100644
index 0000000..18f5fef
--- /dev/null
+++ b/src/routes/(abrechnung)/abrechnung/+page.server.ts
@@ -0,0 +1,14 @@
+import type { PageServerLoad } from "./$types";
+
+export async function load({ fetch }) {
+    const res = await fetch(`/api/payments/items/10`, {method: "POST",
+			body: JSON.stringify({
+	    				start: 0
+    					}),
+			headers: {
+	    			credentials: "include"
+    				}
+    			});
+    const item = await res.json();
+    return { ...item};
+};
diff --git a/src/routes/(abrechnung)/abrechnung/+page.svelte b/src/routes/(abrechnung)/abrechnung/+page.svelte
new file mode 100644
index 0000000..44f5090
--- /dev/null
+++ b/src/routes/(abrechnung)/abrechnung/+page.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let data;
+	console.log("DATA:", data)
+	console.log("payments:", data.payments)
+	import PaymentCard from "$lib/components/PaymentCard.svelte";
+</script>
+{#if data.payments}
+{#each data.payments as payment}
+	<PaymentCard {payment}></PaymentCard>
+{/each}
+{/if}
diff --git a/src/routes/(abrechnung)/abrechnung/add/+page.server.ts b/src/routes/(abrechnung)/abrechnung/add/+page.server.ts
new file mode 100644
index 0000000..229aeb9
--- /dev/null
+++ b/src/routes/(abrechnung)/abrechnung/add/+page.server.ts
@@ -0,0 +1,11 @@
+import type { PageServerLoad } from "./$types";
+
+export async function load({ fetch }) {
+    const res = await fetch(`/api/payments/payees`, {method: "GET",
+			headers: {
+	    			credentials: "include"
+    				}
+    			});
+    const item = await res.json();
+    return { ...item};
+};
diff --git a/src/routes/(abrechnung)/abrechnung/add/+page.svelte b/src/routes/(abrechnung)/abrechnung/add/+page.svelte
new file mode 100644
index 0000000..e396353
--- /dev/null
+++ b/src/routes/(abrechnung)/abrechnung/add/+page.svelte
@@ -0,0 +1,78 @@
+<script>
+export let data;
+import "$lib/css/form.css"
+function simplify(e){
+	const res = eval(e.path[0].value)
+	if(res){
+		e.path[0].value = res
+	}
+}
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+
+    const formData = new FormData();
+    const form = event.target;
+
+    // Iterate through all form elements and append them to the FormData
+    for (const element of form.elements) {
+      // Check if the element is a file input
+      if (element.type === 'file') {
+        const fileInput = element;
+        if (fileInput.files.length === 0) {
+          console.log('No file selected.');
+          continue; // Skip to the next element
+        }
+        const file = fileInput.files[0];
+        formData.append('file', file);
+      } else if (element.name && element.value) {
+        // Append all other input elements (except file input) with non-empty values
+        formData.append(element.name, element.value);
+      }
+    }
+    // Now you can submit the form data to your API endpoint using fetch or any other method
+    try {
+      const response = await fetch('/api/payments/add', {
+        method: 'POST',
+        body: formData,
+	headers: {credentials : 'include'}
+      });
+
+      if (response.ok) {
+        console.log('Added successfully.');
+      } else {
+        console.error('Failed to add the payment.');
+        // Handle upload failure, if needed
+      }
+    } catch (error) {
+      console.error('Failed to add the payment:', error);
+    }
+  }
+</script>
+<form method="POST" action="?/add" on:submit|preventDefault={handleSubmit}>
+	<label>
+	Zahler
+	<select name="payee" id="">
+		{#each data.users as user}
+		<option value="{user.username}">{user.username}</option>
+		{/each}
+	</select>
+	</label>
+	<label>
+		Menge:
+		<input type="text" name="amount" required on:blur={simplify}>
+	</label>
+	<label>
+		Für sich selbst:
+		<input type="text" name="for_self" on:blur={simplify}>
+	</label>
+	<label>
+		Für den Anderen:
+		<input type="text" name="for_other" on:blur={simplify}>
+	</label>
+	<label>
+		Bild:
+		<input type="file" name="fileInput">
+	</label>
+	<button type=submit>Hinzufügen</button>
+</form>
diff --git a/src/routes/(main)/+layout.server.ts b/src/routes/(main)/+layout.server.ts
index 8c67955..1cc5acb 100644
--- a/src/routes/(main)/+layout.server.ts
+++ b/src/routes/(main)/+layout.server.ts
@@ -1,4 +1,6 @@
 import { get_username } from '$lib/js/get_username';;
+import type { Actions, PageServerLoad } from "./$types"
+import { error } from "@sveltejs/kit"
 
 export const load = (async ({cookies}) => {
 	return { user: await get_username(cookies) }
diff --git a/src/routes/(main)/abrechnung/+page.svelte b/src/routes/(main)/abrechnung/+page.svelte
deleted file mode 100644
index 018cef2..0000000
--- a/src/routes/(main)/abrechnung/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>WIP</h1>
diff --git a/src/routes/api/payments/add/+server.ts b/src/routes/api/payments/add/+server.ts
new file mode 100644
index 0000000..5735d2e
--- /dev/null
+++ b/src/routes/api/payments/add/+server.ts
@@ -0,0 +1,63 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { Payment } from '../../../../models/Payment';
+import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { error } from '@sveltejs/kit';
+import { authenticateUser } from '$lib/js/authenticate';;
+import sharp from 'sharp';
+import path from 'path';
+import {IMAGE_DIR} from '$env/static/private';
+
+export const POST: RequestHandler = async ({request, cookies}) => {
+  	const user = await authenticateUser(cookies)
+	console.log(user)
+  	if(!user){
+  		throw error(401, "Not logged in")
+  	}
+  	if(!user.access.includes("abrechnung")){
+  	      	throw error(401, "This user does not have permissions to add payments")
+  	}
+  	else{
+		const formData = await request.formData();
+		const json = {
+			amount: formData.get("amount"),
+			for_self: formData.get("for_self"),
+			for_other: formData.get("for_other"),
+			payee: formData.get("payee"),
+			added_by: user._id
+		}
+
+		await dbConnect();
+		let id;
+  		try{
+  	      		id = (await Payment.create(json))._id.toString();
+  		} catch(e){
+  			await dbDisconnect();
+  	      		throw error(400, e)
+  	      	}
+
+  		await dbDisconnect();
+		const img = formData.get("file")
+		if(img){
+			console.log("IMG:", img)
+			const full_res = Buffer.from(await img.arrayBuffer())
+
+			await sharp(full_res)
+				.toFormat('webp')
+				.toFile(path.join(IMAGE_DIR,
+					  "abrechnung",
+					  "full",
+					   id + '.webp'))
+
+	   		await sharp(full_res)
+				.resize({width: 20})
+				.toFormat('webp')
+				.toFile(path.join(IMAGE_DIR,
+					  "abrechnung",
+					  "placeholder",
+					   id + '.webp'))
+		}
+  	      	return new Response(JSON.stringify({message: "Added payment successfully"}),{
+  	      		    status: 200,
+  		});
+  	}
+};