diff --git a/src/lib/components/PaymentModal.svelte b/src/lib/components/PaymentModal.svelte
new file mode 100644
index 0000000..ada3d92
--- /dev/null
+++ b/src/lib/components/PaymentModal.svelte
@@ -0,0 +1,458 @@
+<script>
+  import { onMount, createEventDispatcher } from 'svelte';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  
+  export let paymentId;
+  
+  // Get session from page store
+  $: session = $page.data?.session;
+  
+  const dispatch = createEventDispatcher();
+
+  let payment = null;
+  let loading = true;
+  let error = null;
+  let modal;
+
+  onMount(async () => {
+    await loadPayment();
+    
+    // Handle escape key to close modal
+    function handleKeydown(event) {
+      if (event.key === 'Escape') {
+        closeModal();
+      }
+    }
+    
+    document.addEventListener('keydown', handleKeydown);
+    
+    return () => {
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  });
+
+  async function loadPayment() {
+    try {
+      const response = await fetch(`/api/cospend/payments/${paymentId}`);
+      if (!response.ok) {
+        throw new Error('Failed to load payment');
+      }
+      const result = await response.json();
+      payment = result.payment;
+    } catch (err) {
+      error = err.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function closeModal() {
+    // Use shallow routing to go back to dashboard without full navigation
+    goto('/cospend', { replaceState: true, noScroll: true, keepFocus: true });
+    dispatch('close');
+  }
+
+  function handleBackdropClick(event) {
+    if (event.target === event.currentTarget) {
+      closeModal();
+    }
+  }
+
+  function formatCurrency(amount) {
+    return new Intl.NumberFormat('de-CH', {
+      style: 'currency',
+      currency: 'CHF'
+    }).format(Math.abs(amount));
+  }
+
+  function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('de-CH');
+  }
+
+  function getSplitDescription(payment) {
+    if (!payment.splits || payment.splits.length === 0) return 'No splits';
+    
+    if (payment.splitMethod === 'equal') {
+      return `Split equally among ${payment.splits.length} people`;
+    } else if (payment.splitMethod === 'full') {
+      return `Paid in full by ${payment.paidBy}`;
+    } else {
+      return `Custom split among ${payment.splits.length} people`;
+    }
+  }
+</script>
+
+<div class="panel-content" bind:this={modal}>
+  <div class="panel-header">
+      <h2>Payment Details</h2>
+      <button class="close-button" on:click={closeModal} aria-label="Close modal">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+
+  <div class="panel-body">
+      {#if loading}
+        <div class="loading">Loading payment...</div>
+      {:else if error}
+        <div class="error">Error: {error}</div>
+      {:else if payment}
+        <div class="payment-details">
+          <div class="payment-header">
+            <div class="title-section">
+              <h1>{payment.title}</h1>
+              <div class="payment-amount">
+                {formatCurrency(payment.amount)}
+              </div>
+            </div>
+            {#if payment.image}
+              <div class="receipt-image">
+                <img src={payment.image} alt="Receipt" />
+              </div>
+            {/if}
+          </div>
+
+          <div class="payment-info">
+            <div class="info-grid">
+              <div class="info-item">
+                <span class="label">Date:</span>
+                <span class="value">{formatDate(payment.date)}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">Paid by:</span>
+                <span class="value">{payment.paidBy}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">Created by:</span>
+                <span class="value">{payment.createdBy}</span>
+              </div>
+              <div class="info-item">
+                <span class="label">Split method:</span>
+                <span class="value">{getSplitDescription(payment)}</span>
+              </div>
+            </div>
+
+            {#if payment.description}
+              <div class="description">
+                <h3>Description</h3>
+                <p>{payment.description}</p>
+              </div>
+            {/if}
+          </div>
+
+          {#if payment.splits && payment.splits.length > 0}
+            <div class="splits-section">
+              <h3>Split Details</h3>
+              <div class="splits-list">
+                {#each payment.splits as split}
+                  <div class="split-item" class:current-user={split.username === session?.user?.nickname}>
+                    <div class="split-user">
+                      <span class="username">{split.username}</span>
+                      {#if split.username === session?.user?.nickname}
+                        <span class="you-badge">You</span>
+                      {/if}
+                    </div>
+                    <div class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
+                      {#if split.amount > 0}
+                        owes {formatCurrency(split.amount)}
+                      {:else if split.amount < 0}
+                        owed {formatCurrency(split.amount)}
+                      {:else}
+                        even
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+
+          <div class="panel-actions">
+            {#if payment && payment.createdBy === session?.user?.nickname}
+              <a href="/cospend/payments/edit/{paymentId}" class="btn btn-primary">Edit Payment</a>
+            {/if}
+            <button class="btn btn-secondary" on:click={closeModal}>Close</button>
+          </div>
+        </div>
+      {/if}
+  </div>
+</div>
+
+<style>
+  .panel-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: white;
+  }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 1px solid #eee;
+    background: #f8f9fa;
+    flex-shrink: 0;
+  }
+
+  .panel-header h2 {
+    margin: 0;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
+  .close-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    color: #666;
+    transition: all 0.2s;
+  }
+
+  .close-button:hover {
+    background: #e9ecef;
+    color: #333;
+  }
+
+  .panel-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0;
+  }
+
+  .loading, .error {
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+  }
+
+  .error {
+    color: #d32f2f;
+    background-color: #ffebee;
+  }
+
+  .payment-details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .payment-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 1.5rem;
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+    border-bottom: 1px solid #dee2e6;
+  }
+
+  .title-section h1 {
+    margin: 0 0 0.5rem 0;
+    color: #333;
+    font-size: 1.5rem;
+  }
+
+  .payment-amount {
+    font-size: 1.25rem;
+    font-weight: bold;
+    color: #1976d2;
+  }
+
+  .receipt-image {
+    flex-shrink: 0;
+    margin-left: 1rem;
+  }
+
+  .receipt-image img {
+    max-width: 100px;
+    max-height: 100px;
+    object-fit: cover;
+    border-radius: 0.5rem;
+    border: 1px solid #ddd;
+  }
+
+  .payment-info {
+    padding: 1.5rem;
+  }
+
+  .info-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .label {
+    font-weight: 600;
+    color: #666;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .value {
+    color: #333;
+    font-size: 0.95rem;
+  }
+
+  .description {
+    border-top: 1px solid #eee;
+    padding-top: 1.5rem;
+  }
+
+  .description h3 {
+    margin: 0 0 0.75rem 0;
+    color: #333;
+    font-size: 1rem;
+  }
+
+  .description p {
+    margin: 0;
+    color: #555;
+    line-height: 1.5;
+    font-size: 0.95rem;
+  }
+
+  .splits-section {
+    border-top: 1px solid #eee;
+    padding: 1.5rem;
+  }
+
+  .splits-section h3 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1rem;
+  }
+
+  .splits-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .split-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+  }
+
+  .split-item.current-user {
+    background: #e3f2fd;
+    border-color: #2196f3;
+  }
+
+  .split-user {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .username {
+    font-weight: 500;
+    color: #333;
+    font-size: 0.95rem;
+  }
+
+  .you-badge {
+    background-color: #1976d2;
+    color: white;
+    padding: 0.125rem 0.375rem;
+    border-radius: 1rem;
+    font-size: 0.7rem;
+    font-weight: 500;
+  }
+
+  .split-amount {
+    font-weight: 500;
+    font-size: 0.9rem;
+  }
+
+  .split-amount.positive {
+    color: #2e7d32;
+  }
+
+  .split-amount.negative {
+    color: #d32f2f;
+  }
+
+  .panel-actions {
+    padding: 1.5rem;
+    border-top: 1px solid #eee;
+    background: #f8f9fa;
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    flex-shrink: 0;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: all 0.2s;
+    border: none;
+    cursor: pointer;
+  }
+
+  .btn-primary {
+    background-color: #1976d2;
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background-color: #1565c0;
+  }
+
+  .btn-secondary {
+    background-color: white;
+    color: #333;
+    border: 1px solid #ddd;
+  }
+
+  .btn-secondary:hover {
+    background-color: #f5f5f5;
+  }
+
+  @media (max-width: 600px) {
+    .payment-header {
+      flex-direction: column;
+      gap: 1rem;
+      text-align: center;
+    }
+
+    .receipt-image {
+      margin-left: 0;
+    }
+
+    .info-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .panel-actions {
+      flex-direction: column;
+    }
+
+    .split-item {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/models/Payment.ts b/src/models/Payment.ts
new file mode 100644
index 0000000..197a727
--- /dev/null
+++ b/src/models/Payment.ts
@@ -0,0 +1,79 @@
+import mongoose from 'mongoose';
+
+export interface IPayment {
+  _id?: string;
+  title: string;
+  description?: string;
+  amount: number;
+  currency: string;
+  paidBy: string; // username/nickname of the person who paid
+  date: Date;
+  image?: string; // path to uploaded image
+  splitMethod: 'equal' | 'full' | 'proportional';
+  createdBy: string; // username/nickname of the person who created the payment
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+const PaymentSchema = new mongoose.Schema(
+  {
+    title: { 
+      type: String, 
+      required: true,
+      trim: true 
+    },
+    description: { 
+      type: String,
+      trim: true 
+    },
+    amount: { 
+      type: Number, 
+      required: true,
+      min: 0 
+    },
+    currency: { 
+      type: String, 
+      required: true, 
+      default: 'CHF',
+      enum: ['CHF'] // For now only CHF as requested
+    },
+    paidBy: { 
+      type: String, 
+      required: true,
+      trim: true 
+    },
+    date: { 
+      type: Date, 
+      required: true,
+      default: Date.now 
+    },
+    image: { 
+      type: String,
+      trim: true 
+    },
+    splitMethod: {
+      type: String,
+      required: true,
+      enum: ['equal', 'full', 'proportional'],
+      default: 'equal'
+    },
+    createdBy: { 
+      type: String, 
+      required: true,
+      trim: true 
+    }
+  },
+  { 
+    timestamps: true,
+    toJSON: { virtuals: true },
+    toObject: { virtuals: true }
+  }
+);
+
+PaymentSchema.virtual('splits', {
+  ref: 'PaymentSplit',
+  localField: '_id',
+  foreignField: 'paymentId'
+});
+
+export const Payment = mongoose.model<IPayment>("Payment", PaymentSchema);
\ No newline at end of file
diff --git a/src/models/PaymentSplit.ts b/src/models/PaymentSplit.ts
new file mode 100644
index 0000000..d677abc
--- /dev/null
+++ b/src/models/PaymentSplit.ts
@@ -0,0 +1,51 @@
+import mongoose from 'mongoose';
+
+export interface IPaymentSplit {
+  _id?: string;
+  paymentId: mongoose.Schema.Types.ObjectId;
+  username: string; // username/nickname of the person who owes/is owed
+  amount: number; // amount this person owes (positive) or is owed (negative)
+  proportion?: number; // for proportional splits, the proportion (e.g., 0.5 for 50%)
+  settled: boolean; // whether this split has been settled
+  settledAt?: Date;
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+const PaymentSplitSchema = new mongoose.Schema(
+  {
+    paymentId: { 
+      type: mongoose.Schema.Types.ObjectId, 
+      ref: 'Payment',
+      required: true 
+    },
+    username: { 
+      type: String, 
+      required: true,
+      trim: true 
+    },
+    amount: { 
+      type: Number, 
+      required: true 
+    },
+    proportion: { 
+      type: Number,
+      min: 0,
+      max: 1 
+    },
+    settled: { 
+      type: Boolean, 
+      default: false 
+    },
+    settledAt: { 
+      type: Date 
+    }
+  },
+  { 
+    timestamps: true 
+  }
+);
+
+PaymentSplitSchema.index({ paymentId: 1, username: 1 }, { unique: true });
+
+export const PaymentSplit = mongoose.model<IPaymentSplit>("PaymentSplit", PaymentSplitSchema);
\ No newline at end of file
diff --git a/src/routes/api/cospend/add/+server.ts b/src/routes/api/cospend/add/+server.ts
deleted file mode 100644
index 213b7ca..0000000
--- a/src/routes/api/cospend/add/+server.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-import fs from 'fs';
-import path from 'path';
-import { mkdir } from 'fs/promises';
-import { Payment } from '$lib/models/Payment'; // adjust path as needed
-import { dbConnect, dbDisconnect } from '$lib/db/db';
-import { error } from '@sveltejs/kit';
-
-const UPLOAD_DIR = './static/cospend';
-const BASE_CURRENCY = 'CHF'; // Default currency
-
-export const POST: RequestHandler = async ({ request, locals }) => {
-   let auth =  await locals.auth();
-   if(!auth){
-   	throw error(401, "Not logged in")
-   }
-
-  const formData = await request.formData();
-
-  try {
-    const name = formData.get('name') as string;
-    const category = formData.get('category') as string;
-    const transaction_date= new Date(formData.get('transaction_date') as string);
-    const description = formData.get('description') as string;
-    const note = formData.get('note') as string;
-    const tags = JSON.parse(formData.get('tags') as string) as string[];
-    const paid_by = formData.get('paid_by') as string
-    const type = formData.get('type') as string
-
-    let currency = formData.get('currency') as string;
-    let original_amount = parseFloat(formData.get('original_amount') as string);
-    let total_amount = NaN;
-
-    let for_self = parseFloat(formData.get('for_self') as string);
-    let for_other = parseFloat(formData.get('for_other') as string);
-    let conversion_rate = 1.0; // Default conversion rate
-
-    // if currency is not BASE_CURRENCY, fetch current conversion rate using frankfurter API and date in YYYY-MM-DD format
-    if (!currency || currency === BASE_CURRENCY) {
-        currency = BASE_CURRENCY;
-    	total_amount = original_amount;
-    } else {
-	console.log(transaction_date);
-        const date_fmt = transaction_date.toISOString().split('T')[0]; // Convert date to YYYY-MM-DD format
-        // Fetch conversion rate logic here (not implemented in this example)
-	console.log(`Fetching conversion rate for ${currency} to ${BASE_CURRENCY} on ${date_fmt}`);
-        const res = await fetch(`https://api.frankfurter.app/${date_fmt}?from=${currency}&to=${BASE_CURRENCY}`)
-	console.log(res);
-	const result = await res.json();
-	console.log(result);
-	if (!result || !result.rates[BASE_CURRENCY]) {
-	    return new Response(JSON.stringify({ message: 'Currency conversion failed.' }), { status: 400 });
-	}
-	// Assuming you want to convert the total amount to BASE_CURRENCY
-	conversion_rate = parseFloat(result.rates[BASE_CURRENCY]);
-	console.log(`Conversion rate from ${currency} to ${BASE_CURRENCY} on ${date_fmt}: ${conversion_rate}`);
-	total_amount = original_amount * conversion_rate;
-	for_self = for_self * conversion_rate;
-	for_other = for_other * conversion_rate;
-    }
-
-    //const personal_amounts = JSON.parse(formData.get('personal_amounts') as string) as { user: string, amount: number }[];
-
-    if (!name || isNaN(total_amount)) {
-      return new Response(JSON.stringify({ message: 'Invalid required fields.' }), { status: 400 });
-    }
-
-    await mkdir(UPLOAD_DIR, { recursive: true });
-
-    const images: { mediapath: string }[] = [];
-    const imageFiles = formData.getAll('images') as File[];
-
-    for (const file of imageFiles) {
-      const arrayBuffer = await file.arrayBuffer();
-      const buffer = Buffer.from(arrayBuffer);
-      const safeName = `${Date.now()}_${file.name.replace(/[^a-zA-Z0-9_.-]/g, '_')}`;
-      const fullPath = path.join(UPLOAD_DIR, safeName);
-      fs.writeFileSync(fullPath, buffer);
-      images.push({ mediapath: `/static/test/${safeName}` });
-    }
-
-    await dbConnect();
-    const payment = new Payment({
-      type,
-      name,
-      category,
-      transaction_date,
-      images,
-      description,
-      note,
-      tags,
-      original_amount,
-      total_amount,
-      paid_by,
-      for_self,
-      for_other,
-      conversion_rate,
-      currency,
-    });
-
-
-
-
-
-
-
-    try{
-    	await Payment.create(payment);
-    } catch(e){
-
-	    return new Response(JSON.stringify({ message: `Error creating payment event. ${e}` }), { status: 500 });
-    }
-    await dbDisconnect();
-    return new Response(JSON.stringify({ message: 'Payment event created successfully.' }), { status: 201 });
-  } catch (err) {
-    console.error(err);
-    return new Response(JSON.stringify({ message: 'Error processing request.' }), { status: 500 });
-  }
-};
diff --git a/src/routes/api/cospend/balance/+server.ts b/src/routes/api/cospend/balance/+server.ts
index 0284ab1..f17fb21 100644
--- a/src/routes/api/cospend/balance/+server.ts
+++ b/src/routes/api/cospend/balance/+server.ts
@@ -1,38 +1,76 @@
 import type { RequestHandler } from '@sveltejs/kit';
-import { json } from '@sveltejs/kit';
-import { Payment } from '$lib/models/Payment'; // adjust path as needed
-import { dbConnect, dbDisconnect } from '$lib/db/db';
+import { PaymentSplit } from '../../../../models/PaymentSplit';
+import { Payment } from '../../../../models/Payment'; // Need to import Payment for populate to work
+import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { error, json } from '@sveltejs/kit';
 
-const UPLOAD_DIR = '/var/lib/www/static/test';
-const BASE_CURRENCY = 'CHF'; // Default currency
-
-export const GET: RequestHandler = async ({ request, locals }) => {
-    await dbConnect();
-
-    const result = await Payment.aggregate([
-  {
-    $group: {
-      _id: "$paid_by",
-      totalPaid: { $sum: "$total_amount" },
-      totalForSelf: { $sum: { $ifNull: ["$for_self", 0] } },
-      totalForOther: { $sum: { $ifNull: ["$for_other", 0] } }
-    }
-  },
-  {
-    $project: {
-      _id: 0,
-      paid_by: "$_id",
-      netTotal: {
-	$multiply: [
-		{ $add: [
-          { $subtract: ["$totalPaid", "$totalForSelf"] },
-	  "$totalForOther"
-        ] },
-	0.5]
-      }
-    }
+export const GET: RequestHandler = async ({ locals, url }) => {
+  const auth = await locals.auth();
+  if (!auth || !auth.user?.nickname) {
+    throw error(401, 'Not logged in');
   }
-]);
+
+  const username = auth.user.nickname;
+  const includeAll = url.searchParams.get('all') === 'true';
+
+  await dbConnect();
+  
+  try {
+    if (includeAll) {
+      const allSplits = await PaymentSplit.aggregate([
+        {
+          $group: {
+            _id: '$username',
+            totalOwed: { $sum: { $cond: [{ $gt: ['$amount', 0] }, '$amount', 0] } },
+            totalOwing: { $sum: { $cond: [{ $lt: ['$amount', 0] }, { $abs: '$amount' }, 0] } },
+            netBalance: { $sum: '$amount' }
+          }
+        },
+        {
+          $project: {
+            username: '$_id',
+            totalOwed: 1,
+            totalOwing: 1,
+            netBalance: 1,
+            _id: 0
+          }
+        }
+      ]);
+
+      const currentUserBalance = allSplits.find(balance => balance.username === username) || {
+        username,
+        totalOwed: 0,
+        totalOwing: 0,
+        netBalance: 0
+      };
+
+      return json({
+        currentUser: currentUserBalance,
+        allBalances: allSplits
+      });
+
+    } else {
+      const userSplits = await PaymentSplit.find({ username }).lean();
+      
+      // Calculate net balance: negative = you are owed money, positive = you owe money
+      const netBalance = userSplits.reduce((sum, split) => sum + split.amount, 0);
+
+      const recentSplits = await PaymentSplit.find({ username })
+        .populate('paymentId')
+        .sort({ createdAt: -1 })
+        .limit(10)
+        .lean();
+
+      return json({
+        netBalance,
+        recentSplits
+      });
+    }
+
+  } catch (e) {
+    console.error('Error calculating balance:', e);
+    throw error(500, 'Failed to calculate balance');
+  } finally {
     await dbDisconnect();
-    return json(result);
-};
+  }
+};
\ No newline at end of file
diff --git a/src/routes/api/cospend/page/[pageno]/+server.ts b/src/routes/api/cospend/page/[pageno]/+server.ts
deleted file mode 100644
index 820b718..0000000
--- a/src/routes/api/cospend/page/[pageno]/+server.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { json, type RequestHandler } from '@sveltejs/kit';
-import { Payment } from '$lib/models/Payment';
-import { dbConnect, dbDisconnect } from '$lib/db/db';
-import { error } from '@sveltejs/kit';
-
-export const GET: RequestHandler = async ({params}) => {
-  await dbConnect();
-  const number_payments = 10;
-  const number_skip = params.pageno ? (parseInt(params.pageno) - 1 ) * number_payments : 0;
-  let payments = await Payment.find()
-  .sort({ transaction_date: -1 })
-  .skip(number_skip)
-  .limit(number_payments);
-  await dbDisconnect();
-
-  if(payments == null){
-	throw error(404, "No more payments found");
-  }
-  return json(payments);
-};
diff --git a/src/routes/api/cospend/payments/+server.ts b/src/routes/api/cospend/payments/+server.ts
new file mode 100644
index 0000000..82272e0
--- /dev/null
+++ b/src/routes/api/cospend/payments/+server.ts
@@ -0,0 +1,92 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { Payment } from '../../../../models/Payment';
+import { PaymentSplit } from '../../../../models/PaymentSplit';
+import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { error, json } from '@sveltejs/kit';
+
+export const GET: RequestHandler = async ({ locals, url }) => {
+  const auth = await locals.auth();
+  if (!auth || !auth.user?.nickname) {
+    throw error(401, 'Not logged in');
+  }
+
+  const limit = parseInt(url.searchParams.get('limit') || '20');
+  const offset = parseInt(url.searchParams.get('offset') || '0');
+
+  await dbConnect();
+  
+  try {
+    const payments = await Payment.find()
+      .populate('splits')
+      .sort({ date: -1 })
+      .limit(limit)
+      .skip(offset)
+      .lean();
+
+    return json({ payments });
+  } catch (e) {
+    throw error(500, 'Failed to fetch payments');
+  } finally {
+    await dbDisconnect();
+  }
+};
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+  const auth = await locals.auth();
+  if (!auth || !auth.user?.nickname) {
+    throw error(401, 'Not logged in');
+  }
+
+  const data = await request.json();
+  const { title, description, amount, paidBy, date, image, splitMethod, splits } = data;
+
+  if (!title || !amount || !paidBy || !splitMethod || !splits) {
+    throw error(400, 'Missing required fields');
+  }
+
+  if (amount <= 0) {
+    throw error(400, 'Amount must be positive');
+  }
+
+  if (!['equal', 'full', 'proportional'].includes(splitMethod)) {
+    throw error(400, 'Invalid split method');
+  }
+
+  await dbConnect();
+  
+  try {
+    const payment = await Payment.create({
+      title,
+      description,
+      amount,
+      currency: 'CHF',
+      paidBy,
+      date: date ? new Date(date) : new Date(),
+      image,
+      splitMethod,
+      createdBy: auth.user.nickname
+    });
+
+    const splitPromises = splits.map((split: any) => {
+      return PaymentSplit.create({
+        paymentId: payment._id,
+        username: split.username,
+        amount: split.amount,
+        proportion: split.proportion
+      });
+    });
+
+    await Promise.all(splitPromises);
+
+    return json({ 
+      success: true, 
+      payment: payment._id 
+    });
+
+  } catch (e) {
+    console.error('Error creating payment:', e);
+    throw error(500, 'Failed to create payment');
+  } finally {
+    await dbDisconnect();
+  }
+};
\ No newline at end of file
diff --git a/src/routes/api/cospend/payments/[id]/+server.ts b/src/routes/api/cospend/payments/[id]/+server.ts
new file mode 100644
index 0000000..45d8296
--- /dev/null
+++ b/src/routes/api/cospend/payments/[id]/+server.ts
@@ -0,0 +1,124 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { Payment } from '../../../../../models/Payment';
+import { PaymentSplit } from '../../../../../models/PaymentSplit';
+import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { error, json } from '@sveltejs/kit';
+
+export const GET: RequestHandler = async ({ params, locals }) => {
+  const auth = await locals.auth();
+  if (!auth || !auth.user?.nickname) {
+    throw error(401, 'Not logged in');
+  }
+
+  const { id } = params;
+
+  await dbConnect();
+  
+  try {
+    const payment = await Payment.findById(id).populate('splits').lean();
+    
+    if (!payment) {
+      throw error(404, 'Payment not found');
+    }
+
+    return json({ payment });
+  } catch (e) {
+    if (e.status === 404) throw e;
+    throw error(500, 'Failed to fetch payment');
+  } finally {
+    await dbDisconnect();
+  }
+};
+
+export const PUT: RequestHandler = async ({ params, request, locals }) => {
+  const auth = await locals.auth();
+  if (!auth || !auth.user?.nickname) {
+    throw error(401, 'Not logged in');
+  }
+
+  const { id } = params;
+  const data = await request.json();
+
+  await dbConnect();
+  
+  try {
+    const payment = await Payment.findById(id);
+    
+    if (!payment) {
+      throw error(404, 'Payment not found');
+    }
+
+    if (payment.createdBy !== auth.user.nickname) {
+      throw error(403, 'Not authorized to edit this payment');
+    }
+
+    const updatedPayment = await Payment.findByIdAndUpdate(
+      id,
+      { 
+        title: data.title,
+        description: data.description,
+        amount: data.amount,
+        paidBy: data.paidBy,
+        date: data.date ? new Date(data.date) : payment.date,
+        image: data.image,
+        splitMethod: data.splitMethod
+      },
+      { new: true }
+    );
+
+    if (data.splits) {
+      await PaymentSplit.deleteMany({ paymentId: id });
+      
+      const splitPromises = data.splits.map((split: any) => {
+        return PaymentSplit.create({
+          paymentId: id,
+          username: split.username,
+          amount: split.amount,
+          proportion: split.proportion
+        });
+      });
+
+      await Promise.all(splitPromises);
+    }
+
+    return json({ success: true, payment: updatedPayment });
+  } catch (e) {
+    if (e.status) throw e;
+    throw error(500, 'Failed to update payment');
+  } finally {
+    await dbDisconnect();
+  }
+};
+
+export const DELETE: RequestHandler = async ({ params, locals }) => {
+  const auth = await locals.auth();
+  if (!auth || !auth.user?.nickname) {
+    throw error(401, 'Not logged in');
+  }
+
+  const { id } = params;
+
+  await dbConnect();
+  
+  try {
+    const payment = await Payment.findById(id);
+    
+    if (!payment) {
+      throw error(404, 'Payment not found');
+    }
+
+    if (payment.createdBy !== auth.user.nickname) {
+      throw error(403, 'Not authorized to delete this payment');
+    }
+
+    await PaymentSplit.deleteMany({ paymentId: id });
+    await Payment.findByIdAndDelete(id);
+
+    return json({ success: true });
+  } catch (e) {
+    if (e.status) throw e;
+    throw error(500, 'Failed to delete payment');
+  } finally {
+    await dbDisconnect();
+  }
+};
\ No newline at end of file
diff --git a/src/routes/api/cospend/upload/+server.ts b/src/routes/api/cospend/upload/+server.ts
new file mode 100644
index 0000000..cc23f98
--- /dev/null
+++ b/src/routes/api/cospend/upload/+server.ts
@@ -0,0 +1,63 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { error, json } from '@sveltejs/kit';
+import { writeFileSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import { randomUUID } from 'crypto';
+import { IMAGE_DIR } from '$env/static/private';
+
+export const POST: RequestHandler = async ({ request, locals }) => {
+  const auth = await locals.auth();
+  if (!auth || !auth.user?.nickname) {
+    throw error(401, 'Not logged in');
+  }
+
+  try {
+    const formData = await request.formData();
+    const image = formData.get('image') as File;
+    
+    if (!image) {
+      throw error(400, 'No image provided');
+    }
+
+    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+    if (!allowedTypes.includes(image.type)) {
+      throw error(400, 'Invalid file type. Only JPEG, PNG, and WebP are allowed.');
+    }
+
+    if (image.size > 5 * 1024 * 1024) {
+      throw error(400, 'File too large. Maximum size is 5MB.');
+    }
+
+    const extension = image.type.split('/')[1];
+    const filename = `${randomUUID()}.${extension}`;
+    
+    if (!IMAGE_DIR) {
+      throw error(500, 'IMAGE_DIR environment variable not configured');
+    }
+    
+    // Ensure cospend directory exists in IMAGE_DIR
+    const uploadsDir = join(IMAGE_DIR, 'cospend');
+    try {
+      mkdirSync(uploadsDir, { recursive: true });
+    } catch (err) {
+      // Directory might already exist
+    }
+
+    const filepath = join(uploadsDir, filename);
+    const buffer = await image.arrayBuffer();
+    
+    writeFileSync(filepath, new Uint8Array(buffer));
+    
+    const publicPath = `/cospend/${filename}`;
+    
+    return json({
+      success: true,
+      path: publicPath
+    });
+
+  } catch (err) {
+    if (err.status) throw err;
+    console.error('Upload error:', err);
+    throw error(500, 'Failed to upload file');
+  }
+};
\ No newline at end of file
diff --git a/src/routes/cospend/+layout.svelte b/src/routes/cospend/+layout.svelte
new file mode 100644
index 0000000..03fd8de
--- /dev/null
+++ b/src/routes/cospend/+layout.svelte
@@ -0,0 +1,96 @@
+<script>
+  import { page } from '$app/stores';
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  import PaymentModal from '$lib/components/PaymentModal.svelte';
+
+  let showModal = false;
+  let paymentId = null;
+
+  $: {
+    // Check if URL contains payment view route OR if we have paymentId in state
+    const match = $page.url.pathname.match(/\/cospend\/payments\/view\/([^\/]+)/);
+    const statePaymentId = $page.state?.paymentId;
+    const isOnDashboard = $page.route.id === '/cospend';
+    
+    console.log('Layout debug:', {
+      pathname: $page.url.pathname,
+      routeId: $page.route.id,
+      match: match,
+      statePaymentId: statePaymentId,
+      isOnDashboard: isOnDashboard,
+      showModal: showModal
+    });
+    
+    // Only show modal if we're on the dashboard AND have a payment to show
+    if (isOnDashboard && (match || statePaymentId)) {
+      showModal = true;
+      paymentId = match ? match[1] : statePaymentId;
+    } else {
+      showModal = false;
+      paymentId = null;
+    }
+  }
+</script>
+
+<div class="layout-container" class:has-modal={showModal}>
+  <div class="main-content">
+    <slot />
+  </div>
+  
+  {#if showModal}
+    <div class="side-panel">
+      <PaymentModal {paymentId} on:close={() => showModal = false} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .layout-container {
+    display: flex;
+    min-height: 100vh;
+    transition: all 0.3s ease;
+  }
+
+  .main-content {
+    flex: 1;
+    transition: all 0.3s ease;
+  }
+
+  .layout-container.has-modal .main-content {
+    flex: 0 0 60%;
+  }
+
+  .side-panel {
+    flex: 0 0 40%;
+    min-width: 400px;
+    max-width: 500px;
+    background: white;
+    border-left: 1px solid #dee2e6;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    overflow-y: auto;
+  }
+
+  @media (max-width: 768px) {
+    .layout-container.has-modal {
+      flex-direction: column;
+    }
+    
+    .layout-container.has-modal .main-content {
+      flex: none;
+      height: 50vh;
+      overflow-y: auto;
+    }
+    
+    .side-panel {
+      flex: none;
+      height: 50vh;
+      min-width: unset;
+      max-width: unset;
+      border-left: none;
+      border-top: 1px solid #dee2e6;
+      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/cospend/+page.server.ts b/src/routes/cospend/+page.server.ts
new file mode 100644
index 0000000..f3c9373
--- /dev/null
+++ b/src/routes/cospend/+page.server.ts
@@ -0,0 +1,14 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const session = await locals.auth();
+  
+  if (!session) {
+    throw redirect(302, '/login');
+  }
+
+  return {
+    session
+  };
+};
\ No newline at end of file
diff --git a/src/routes/cospend/+page.svelte b/src/routes/cospend/+page.svelte
new file mode 100644
index 0000000..788b86e
--- /dev/null
+++ b/src/routes/cospend/+page.svelte
@@ -0,0 +1,373 @@
+<script>
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { pushState } from '$app/navigation';
+
+  export let data; // Used by the layout for session data
+
+  let balance = {
+    netBalance: 0,
+    recentSplits: []
+  };
+  let loading = true;
+  let error = null;
+
+  onMount(async () => {
+    await fetchBalance();
+  });
+
+  async function fetchBalance() {
+    try {
+      loading = true;
+      const response = await fetch('/api/cospend/balance');
+      if (!response.ok) {
+        throw new Error('Failed to fetch balance');
+      }
+      balance = await response.json();
+    } catch (err) {
+      error = err.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function formatCurrency(amount) {
+    return new Intl.NumberFormat('de-CH', {
+      style: 'currency',
+      currency: 'CHF'
+    }).format(Math.abs(amount));
+  }
+
+  function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('de-CH');
+  }
+
+  function truncateDescription(description, maxLength = 100) {
+    if (!description) return '';
+    if (description.length <= maxLength) return description;
+    return description.substring(0, maxLength).trim() + '...';
+  }
+
+  function handlePaymentClick(paymentId, event) {
+    event.preventDefault();
+    // Use pushState for true shallow routing - only updates URL without navigation
+    pushState(`/cospend/payments/view/${paymentId}`, { paymentId });
+  }
+</script>
+
+<svelte:head>
+  <title>Cospend - Expense Sharing</title>
+</svelte:head>
+
+<main class="cospend-main">
+  <div class="header-section">
+    <h1>Cospend</h1>
+    <p>Track and split expenses with your friends and family</p>
+  </div>
+
+  {#if loading}
+    <div class="loading">Loading your balance...</div>
+  {:else if error}
+    <div class="error">Error: {error}</div>
+  {:else}
+    <div class="balance-cards">
+      <div class="balance-card net-balance" class:positive={balance.netBalance <= 0} class:negative={balance.netBalance > 0}>
+        <h3>Your Balance</h3>
+        <div class="amount">
+          {#if balance.netBalance < 0}
+            <span class="positive">+{formatCurrency(balance.netBalance)}</span>
+            <small>You are owed</small>
+          {:else if balance.netBalance > 0}
+            <span class="negative">-{formatCurrency(balance.netBalance)}</span>
+            <small>You owe</small>
+          {:else}
+            <span class="even">CHF 0.00</span>
+            <small>You're all even</small>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    <div class="actions">
+      <a href="/cospend/payments/add" class="btn btn-primary">Add Payment</a>
+      <a href="/cospend/payments" class="btn btn-secondary">View All Payments</a>
+    </div>
+
+    {#if balance.recentSplits && balance.recentSplits.length > 0}
+      <div class="recent-activity">
+        <h2>Recent Activity</h2>
+        <div class="activity-list">
+          {#each balance.recentSplits as split}
+            <a 
+              href="/cospend/payments/view/{split.paymentId?._id}" 
+              class="activity-item"
+              on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
+            >
+              <div class="activity-info">
+                <div class="activity-header">
+                  <strong class="payment-title">{split.paymentId?.title || 'Payment'}</strong>
+                  <div class="activity-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
+                    {#if split.amount > 0}
+                      -{formatCurrency(split.amount)}
+                    {:else if split.amount < 0}
+                      +{formatCurrency(split.amount)}
+                    {:else}
+                      even
+                    {/if}
+                  </div>
+                </div>
+                <div class="payment-details">
+                  <div class="payment-meta">
+                    <span class="paid-by">Paid by {split.paymentId?.paidBy || 'Unknown'}</span>
+                    <span class="payment-date">{formatDate(split.createdAt)}</span>
+                  </div>
+                  {#if split.paymentId?.description}
+                    <div class="payment-description">
+                      {truncateDescription(split.paymentId.description)}
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            </a>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  {/if}
+</main>
+
+<style>
+  .cospend-main {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .header-section {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .header-section h1 {
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+    color: #333;
+  }
+
+  .header-section p {
+    color: #666;
+    font-size: 1.1rem;
+  }
+
+  .loading, .error {
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+  }
+
+  .error {
+    color: #d32f2f;
+    background-color: #ffebee;
+    border-radius: 0.5rem;
+  }
+
+  .balance-cards {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2rem;
+  }
+
+  .balance-card {
+    background: white;
+    padding: 2rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    min-width: 300px;
+  }
+
+  .balance-card.net-balance {
+    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
+  }
+
+  .balance-card.net-balance.positive {
+    background: linear-gradient(135deg, #e8f5e8, #d4edda);
+  }
+
+  .balance-card.net-balance.negative {
+    background: linear-gradient(135deg, #ffeaea, #f8d7da);
+  }
+
+  .balance-card h3 {
+    margin-bottom: 1rem;
+    color: #555;
+    font-size: 1.1rem;
+  }
+
+  .amount {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  .amount small {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: normal;
+    color: #666;
+    margin-top: 0.5rem;
+  }
+
+  .positive {
+    color: #2e7d32;
+  }
+
+  .negative {
+    color: #d32f2f;
+  }
+
+  .even {
+    color: #666;
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s;
+  }
+
+  .btn-primary {
+    background-color: #1976d2;
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background-color: #1565c0;
+  }
+
+  .btn-secondary {
+    background-color: #f5f5f5;
+    color: #333;
+    border: 1px solid #ddd;
+  }
+
+  .btn-secondary:hover {
+    background-color: #e8e8e8;
+  }
+
+  .recent-activity {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .recent-activity h2 {
+    margin-bottom: 1rem;
+    color: #333;
+  }
+
+  .activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .activity-item {
+    display: block;
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    color: inherit;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+  }
+
+  .activity-item:hover {
+    background: #e9ecef;
+    border-color: #1976d2;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .activity-info {
+    width: 100%;
+  }
+
+  .activity-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 0.5rem;
+  }
+
+  .payment-title {
+    color: #333;
+    font-size: 1.1rem;
+    margin-right: 1rem;
+  }
+
+  .activity-amount {
+    font-weight: bold;
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+
+  .payment-details {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .payment-meta {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .paid-by, .payment-date {
+    color: #666;
+    font-size: 0.9rem;
+  }
+
+  .payment-description {
+    color: #555;
+    font-size: 0.9rem;
+    font-style: italic;
+    margin-top: 0.25rem;
+    line-height: 1.3;
+  }
+
+  @media (max-width: 600px) {
+    .cospend-main {
+      padding: 1rem;
+    }
+
+    .balance-card {
+      min-width: unset;
+      width: 100%;
+    }
+
+    .actions {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .btn {
+      width: 100%;
+      max-width: 300px;
+      text-align: center;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/cospend/+page.ts b/src/routes/cospend/+page.ts
deleted file mode 100644
index 683f50c..0000000
--- a/src/routes/cospend/+page.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { error } from "@sveltejs/kit";
-
-export async function load({ fetch, params}) {
-    let balance_res = await fetch(`/api/cospend/balance`);
-    if (!balance_res.ok) {
-	throw error(balance_res.status, `Failed to fetch balance`);
-    }
-    let balance = await balance_res.json();
-    const items_res = await fetch(`/api/cospend/page/1`);
-    if (!items_res.ok) {
-	throw error(items_res.status, `Failed to fetch items`);
-    }
-    let items = await items_res.json();
-    return {
-	    balance,
-	    items
-    };
-}
diff --git a/src/routes/cospend/payments/+page.server.ts b/src/routes/cospend/payments/+page.server.ts
new file mode 100644
index 0000000..f3c9373
--- /dev/null
+++ b/src/routes/cospend/payments/+page.server.ts
@@ -0,0 +1,14 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const session = await locals.auth();
+  
+  if (!session) {
+    throw redirect(302, '/login');
+  }
+
+  return {
+    session
+  };
+};
\ No newline at end of file
diff --git a/src/routes/cospend/payments/+page.svelte b/src/routes/cospend/payments/+page.svelte
new file mode 100644
index 0000000..a38508c
--- /dev/null
+++ b/src/routes/cospend/payments/+page.svelte
@@ -0,0 +1,502 @@
+<script>
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+
+  export let data;
+
+  let payments = [];
+  let loading = true;
+  let error = null;
+  let currentPage = 0;
+  let limit = 20;
+  let hasMore = true;
+
+  onMount(async () => {
+    await loadPayments();
+  });
+
+  async function loadPayments(page = 0) {
+    try {
+      loading = true;
+      const response = await fetch(`/api/cospend/payments?limit=${limit}&offset=${page * limit}`);
+      
+      if (!response.ok) {
+        throw new Error('Failed to load payments');
+      }
+
+      const result = await response.json();
+      
+      if (page === 0) {
+        payments = result.payments;
+      } else {
+        payments = [...payments, ...result.payments];
+      }
+      
+      hasMore = result.payments.length === limit;
+      currentPage = page;
+      
+    } catch (err) {
+      error = err.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function loadMore() {
+    if (!loading && hasMore) {
+      await loadPayments(currentPage + 1);
+    }
+  }
+
+  async function deletePayment(paymentId) {
+    if (!confirm('Are you sure you want to delete this payment?')) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/cospend/payments/${paymentId}`, {
+        method: 'DELETE'
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to delete payment');
+      }
+
+      payments = payments.filter(p => p._id !== paymentId);
+    } catch (err) {
+      alert('Error: ' + err.message);
+    }
+  }
+
+  function formatCurrency(amount) {
+    return new Intl.NumberFormat('de-CH', {
+      style: 'currency',
+      currency: 'CHF'
+    }).format(amount);
+  }
+
+  function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('de-CH');
+  }
+
+  function getUserSplitAmount(payment, username) {
+    const split = payment.splits?.find(s => s.username === username);
+    return split ? split.amount : 0;
+  }
+
+  function getSplitDescription(payment) {
+    if (!payment.splits || payment.splits.length === 0) return 'No splits';
+    
+    if (payment.splitMethod === 'equal') {
+      return `Split equally among ${payment.splits.length} people`;
+    } else if (payment.splitMethod === 'full') {
+      return `Paid in full by ${payment.paidBy}`;
+    } else {
+      return `Custom split among ${payment.splits.length} people`;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>All Payments - Cospend</title>
+</svelte:head>
+
+<main class="payments-list">
+  <div class="header">
+    <div class="header-content">
+      <h1>All Payments</h1>
+      <p>Manage your shared expenses</p>
+    </div>
+    <div class="header-actions">
+      <a href="/cospend/payments/add" class="btn btn-primary">Add Payment</a>
+      <a href="/cospend" class="btn btn-secondary">Back to Dashboard</a>
+    </div>
+  </div>
+
+  {#if loading && payments.length === 0}
+    <div class="loading">Loading payments...</div>
+  {:else if error}
+    <div class="error">Error: {error}</div>
+  {:else if payments.length === 0}
+    <div class="empty-state">
+      <div class="empty-content">
+        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+        </svg>
+        <h2>No payments yet</h2>
+        <p>Start by adding your first shared expense</p>
+        <a href="/cospend/payments/add" class="btn btn-primary">Add Your First Payment</a>
+      </div>
+    </div>
+  {:else}
+    <div class="payments-grid">
+      {#each payments as payment}
+        <div class="payment-card">
+          <div class="payment-header">
+            <div class="payment-title">
+              <h3>{payment.title}</h3>
+              <div class="payment-meta">
+                <span class="date">{formatDate(payment.date)}</span>
+                <span class="amount">{formatCurrency(payment.amount)}</span>
+              </div>
+            </div>
+            {#if payment.image}
+              <img src={payment.image} alt="Receipt" class="receipt-thumb" />
+            {/if}
+          </div>
+
+          {#if payment.description}
+            <p class="payment-description">{payment.description}</p>
+          {/if}
+
+          <div class="payment-details">
+            <div class="detail-row">
+              <span class="label">Paid by:</span>
+              <span class="value">{payment.paidBy}</span>
+            </div>
+            <div class="detail-row">
+              <span class="label">Split:</span>
+              <span class="value">{getSplitDescription(payment)}</span>
+            </div>
+          </div>
+
+          {#if payment.splits && payment.splits.length > 0}
+            <div class="splits-summary">
+              <h4>Split Details</h4>
+              <div class="splits-list">
+                {#each payment.splits as split}
+                  <div class="split-item">
+                    <span class="split-user">{split.username}</span>
+                    <span class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
+                      {#if split.amount > 0}
+                        owes {formatCurrency(split.amount)}
+                      {:else if split.amount < 0}
+                        owed {formatCurrency(Math.abs(split.amount))}
+                      {:else}
+                        even
+                      {/if}
+                    </span>
+                  </div>
+                {/each}
+              </div>
+            </div>
+          {/if}
+
+          <div class="payment-actions">
+            <span class="created-by">Created by {payment.createdBy}</span>
+            {#if payment.createdBy === data.session.user.nickname}
+              <div class="action-buttons">
+                <button 
+                  class="btn-edit" 
+                  on:click={() => goto(`/cospend/payments/edit/${payment._id}`)}
+                >
+                  Edit
+                </button>
+                <button 
+                  class="btn-delete" 
+                  on:click={() => deletePayment(payment._id)}
+                >
+                  Delete
+                </button>
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    {#if hasMore}
+      <div class="load-more">
+        <button class="btn btn-secondary" on:click={loadMore} disabled={loading}>
+          {loading ? 'Loading...' : 'Load More'}
+        </button>
+      </div>
+    {/if}
+  {/if}
+</main>
+
+<style>
+  .payments-list {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    gap: 2rem;
+  }
+
+  .header-content h1 {
+    margin: 0 0 0.5rem 0;
+    color: #333;
+    font-size: 2rem;
+  }
+
+  .header-content p {
+    margin: 0;
+    color: #666;
+    font-size: 1.1rem;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 1rem;
+    flex-shrink: 0;
+  }
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s;
+    border: none;
+    cursor: pointer;
+  }
+
+  .btn-primary {
+    background-color: #1976d2;
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background-color: #1565c0;
+  }
+
+  .btn-secondary {
+    background-color: #f5f5f5;
+    color: #333;
+    border: 1px solid #ddd;
+  }
+
+  .btn-secondary:hover {
+    background-color: #e8e8e8;
+  }
+
+  .loading, .error {
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+  }
+
+  .error {
+    color: #d32f2f;
+    background-color: #ffebee;
+    border-radius: 0.5rem;
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+
+  .empty-content svg {
+    color: #ccc;
+    margin-bottom: 1rem;
+  }
+
+  .empty-content h2 {
+    margin: 0 0 0.5rem 0;
+    color: #555;
+  }
+
+  .empty-content p {
+    margin: 0 0 2rem 0;
+    color: #777;
+  }
+
+  .payments-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .payment-card {
+    background: white;
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s;
+  }
+
+  .payment-card:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  }
+
+  .payment-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+  }
+
+  .payment-title h3 {
+    margin: 0 0 0.5rem 0;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
+  .payment-meta {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.9rem;
+    color: #666;
+  }
+
+  .payment-meta .amount {
+    font-weight: 600;
+    color: #1976d2;
+  }
+
+  .receipt-thumb {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 0.5rem;
+    border: 1px solid #ddd;
+  }
+
+  .payment-description {
+    color: #555;
+    margin-bottom: 1rem;
+    font-style: italic;
+  }
+
+  .payment-details {
+    margin-bottom: 1rem;
+  }
+
+  .detail-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+
+  .detail-row .label {
+    color: #666;
+    font-weight: 500;
+  }
+
+  .detail-row .value {
+    color: #333;
+  }
+
+  .splits-summary {
+    border-top: 1px solid #eee;
+    padding-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .splits-summary h4 {
+    margin: 0 0 0.75rem 0;
+    color: #333;
+    font-size: 1rem;
+  }
+
+  .splits-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .split-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .split-user {
+    color: #555;
+  }
+
+  .split-amount.positive {
+    color: #2e7d32;
+    font-weight: 500;
+  }
+
+  .split-amount.negative {
+    color: #d32f2f;
+    font-weight: 500;
+  }
+
+  .payment-actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid #eee;
+    padding-top: 1rem;
+  }
+
+  .created-by {
+    font-size: 0.9rem;
+    color: #666;
+  }
+
+  .action-buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .btn-edit, .btn-delete {
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.25rem;
+    border: none;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+  }
+
+  .btn-edit {
+    background-color: #f5f5f5;
+    color: #333;
+  }
+
+  .btn-edit:hover {
+    background-color: #e8e8e8;
+  }
+
+  .btn-delete {
+    background-color: #d32f2f;
+    color: white;
+  }
+
+  .btn-delete:hover {
+    background-color: #c62828;
+  }
+
+  .load-more {
+    text-align: center;
+    margin-top: 2rem;
+  }
+
+  @media (max-width: 600px) {
+    .payments-list {
+      padding: 1rem;
+    }
+
+    .header {
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .header-actions {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .payments-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .payment-actions {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/cospend/payments/add/+page.server.ts b/src/routes/cospend/payments/add/+page.server.ts
new file mode 100644
index 0000000..f3c9373
--- /dev/null
+++ b/src/routes/cospend/payments/add/+page.server.ts
@@ -0,0 +1,14 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals }) => {
+  const session = await locals.auth();
+  
+  if (!session) {
+    throw redirect(302, '/login');
+  }
+
+  return {
+    session
+  };
+};
\ No newline at end of file
diff --git a/src/routes/cospend/payments/add/+page.svelte b/src/routes/cospend/payments/add/+page.svelte
new file mode 100644
index 0000000..46a0de2
--- /dev/null
+++ b/src/routes/cospend/payments/add/+page.svelte
@@ -0,0 +1,712 @@
+<script>
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  
+  export let data;
+
+  let formData = {
+    title: '',
+    description: '',
+    amount: '',
+    paidBy: data.session?.user?.nickname || '',
+    date: new Date().toISOString().split('T')[0],
+    splitMethod: 'equal',
+    splits: []
+  };
+
+  let imageFile = null;
+  let imagePreview = '';
+  let users = [data.session?.user?.nickname || ''];
+  let newUser = '';
+  let splitAmounts = {};
+  let loading = false;
+  let error = null;
+
+  onMount(() => {
+    if (data.session?.user?.nickname) {
+      addSplitForUser(data.session.user.nickname);
+    }
+  });
+
+  function handleImageChange(event) {
+    const file = event.target.files[0];
+    if (file) {
+      if (file.size > 5 * 1024 * 1024) {
+        alert('File size must be less than 5MB');
+        return;
+      }
+      
+      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+      if (!allowedTypes.includes(file.type)) {
+        alert('Please select a valid image file (JPEG, PNG, WebP)');
+        return;
+      }
+
+      imageFile = file;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        imagePreview = e.target.result;
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  function removeImage() {
+    imageFile = null;
+    imagePreview = '';
+  }
+
+  function addUser() {
+    if (newUser.trim() && !users.includes(newUser.trim())) {
+      users = [...users, newUser.trim()];
+      addSplitForUser(newUser.trim());
+      newUser = '';
+    }
+  }
+
+  function removeUser(userToRemove) {
+    if (users.length > 1 && userToRemove !== data.session.user.nickname) {
+      users = users.filter(u => u !== userToRemove);
+      delete splitAmounts[userToRemove];
+      splitAmounts = { ...splitAmounts };
+    }
+  }
+
+  function addSplitForUser(username) {
+    if (!splitAmounts[username]) {
+      splitAmounts[username] = 0;
+      splitAmounts = { ...splitAmounts };
+    }
+  }
+
+  function calculateEqualSplits() {
+    if (!formData.amount || users.length === 0) return;
+    
+    const amountNum = parseFloat(formData.amount);
+    const splitAmount = amountNum / users.length;
+    
+    users.forEach(user => {
+      if (user === formData.paidBy) {
+        splitAmounts[user] = splitAmount - amountNum; // They get negative (they're owed)
+      } else {
+        splitAmounts[user] = splitAmount; // They owe positive amount
+      }
+    });
+    splitAmounts = { ...splitAmounts };
+  }
+
+  function calculateFullPayment() {
+    if (!formData.amount) return;
+    
+    const amountNum = parseFloat(formData.amount);
+    
+    users.forEach(user => {
+      if (user === formData.paidBy) {
+        splitAmounts[user] = -amountNum; // They paid it all, so they're owed the full amount
+      } else {
+        splitAmounts[user] = 0; // Others don't owe anything
+      }
+    });
+    splitAmounts = { ...splitAmounts };
+  }
+
+  function handleSplitMethodChange() {
+    if (formData.splitMethod === 'equal') {
+      calculateEqualSplits();
+    } else if (formData.splitMethod === 'full') {
+      calculateFullPayment();
+    }
+  }
+
+  async function uploadImage() {
+    if (!imageFile) return null;
+    
+    const formData = new FormData();
+    formData.append('image', imageFile);
+    
+    try {
+      const response = await fetch('/api/cospend/upload', {
+        method: 'POST',
+        body: formData
+      });
+      
+      if (!response.ok) {
+        throw new Error('Failed to upload image');
+      }
+      
+      const result = await response.json();
+      return result.path;
+    } catch (err) {
+      console.error('Image upload failed:', err);
+      return null;
+    }
+  }
+
+  async function handleSubmit() {
+    if (!formData.title.trim() || !formData.amount || parseFloat(formData.amount) <= 0) {
+      error = 'Please fill in all required fields with valid values';
+      return;
+    }
+
+    if (users.length === 0) {
+      error = 'Please add at least one user to split with';
+      return;
+    }
+
+    loading = true;
+    error = null;
+
+    try {
+      let imagePath = null;
+      if (imageFile) {
+        imagePath = await uploadImage();
+      }
+
+      const splits = users.map(user => ({
+        username: user,
+        amount: splitAmounts[user] || 0,
+        proportion: formData.splitMethod === 'proportional' ? (splitAmounts[user] || 0) / parseFloat(formData.amount) : undefined
+      }));
+
+      const payload = {
+        ...formData,
+        amount: parseFloat(formData.amount),
+        image: imagePath,
+        splits
+      };
+
+      const response = await fetch('/api/cospend/payments', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to create payment');
+      }
+
+      const result = await response.json();
+      await goto('/cospend');
+
+    } catch (err) {
+      error = err.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  $: if (formData.amount && formData.splitMethod && formData.paidBy) {
+    handleSplitMethodChange();
+  }
+</script>
+
+<svelte:head>
+  <title>Add Payment - Cospend</title>
+</svelte:head>
+
+<main class="add-payment">
+  <div class="header">
+    <h1>Add New Payment</h1>
+    <a href="/cospend" class="back-link">← Back to Cospend</a>
+  </div>
+
+  <form on:submit|preventDefault={handleSubmit} class="payment-form">
+    <div class="form-section">
+      <h2>Payment Details</h2>
+      
+      <div class="form-group">
+        <label for="title">Title *</label>
+        <input 
+          type="text" 
+          id="title" 
+          bind:value={formData.title} 
+          required 
+          placeholder="e.g., Dinner at restaurant"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="description">Description</label>
+        <textarea 
+          id="description" 
+          bind:value={formData.description} 
+          placeholder="Additional details..."
+          rows="3"
+        ></textarea>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label for="amount">Amount (CHF) *</label>
+          <input 
+            type="number" 
+            id="amount" 
+            bind:value={formData.amount} 
+            required 
+            min="0" 
+            step="0.01"
+            placeholder="0.00"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="date">Date</label>
+          <input 
+            type="date" 
+            id="date" 
+            bind:value={formData.date} 
+            required
+          />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label for="paidBy">Paid by</label>
+        <select id="paidBy" bind:value={formData.paidBy} required>
+          {#each users as user}
+            <option value={user}>{user}</option>
+          {/each}
+        </select>
+      </div>
+    </div>
+
+    <div class="form-section">
+      <h2>Receipt Image</h2>
+      
+      {#if imagePreview}
+        <div class="image-preview">
+          <img src={imagePreview} alt="Receipt preview" />
+          <button type="button" class="remove-image" on:click={removeImage}>
+            Remove Image
+          </button>
+        </div>
+      {:else}
+        <div class="image-upload">
+          <label for="image" class="upload-label">
+            <div class="upload-content">
+              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/>
+                <line x1="16" y1="5" x2="22" y2="5"/>
+                <line x1="19" y1="2" x2="19" y2="8"/>
+              </svg>
+              <p>Upload Receipt Image</p>
+              <small>JPEG, PNG, WebP (max 5MB)</small>
+            </div>
+          </label>
+          <input 
+            type="file" 
+            id="image" 
+            accept="image/jpeg,image/jpg,image/png,image/webp" 
+            on:change={handleImageChange}
+            hidden
+          />
+        </div>
+      {/if}
+    </div>
+
+    <div class="form-section">
+      <h2>Split Between Users</h2>
+      
+      <div class="users-list">
+        {#each users as user}
+          <div class="user-item">
+            <span>{user}</span>
+            {#if user !== data.session.user.nickname}
+              <button type="button" class="remove-user" on:click={() => removeUser(user)}>
+                Remove
+              </button>
+            {/if}
+          </div>
+        {/each}
+      </div>
+
+      <div class="add-user">
+        <input 
+          type="text" 
+          bind:value={newUser} 
+          placeholder="Add user..."
+          on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
+        />
+        <button type="button" on:click={addUser}>Add User</button>
+      </div>
+    </div>
+
+    <div class="form-section">
+      <h2>Split Method</h2>
+      
+      <div class="split-method">
+        <label>
+          <input type="radio" bind:group={formData.splitMethod} value="equal" />
+          Equal Split
+        </label>
+        <label>
+          <input type="radio" bind:group={formData.splitMethod} value="full" />
+          Paid in Full by {formData.paidBy}
+        </label>
+        <label>
+          <input type="radio" bind:group={formData.splitMethod} value="proportional" />
+          Custom Proportions
+        </label>
+      </div>
+
+      {#if formData.splitMethod === 'proportional'}
+        <div class="proportional-splits">
+          <h3>Custom Split Amounts</h3>
+          {#each users as user}
+            <div class="split-input">
+              <label>{user}</label>
+              <input 
+                type="number" 
+                step="0.01" 
+                bind:value={splitAmounts[user]}
+                placeholder="0.00"
+              />
+            </div>
+          {/each}
+        </div>
+      {/if}
+
+      {#if Object.keys(splitAmounts).length > 0}
+        <div class="split-preview">
+          <h3>Split Preview</h3>
+          {#each users as user}
+            <div class="split-item">
+              <span>{user}</span>
+              <span class="amount" class:positive={splitAmounts[user] < 0} class:negative={splitAmounts[user] > 0}>
+                {#if splitAmounts[user] > 0}
+                  owes CHF {splitAmounts[user].toFixed(2)}
+                {:else if splitAmounts[user] < 0}
+                  is owed CHF {Math.abs(splitAmounts[user]).toFixed(2)}
+                {:else}
+                  even
+                {/if}
+              </span>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
+
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+
+    <div class="form-actions">
+      <button type="button" class="btn-secondary" on:click={() => goto('/cospend')}>
+        Cancel
+      </button>
+      <button type="submit" class="btn-primary" disabled={loading}>
+        {loading ? 'Creating...' : 'Create Payment'}
+      </button>
+    </div>
+  </form>
+</main>
+
+<style>
+  .add-payment {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+  }
+
+  .header h1 {
+    margin: 0;
+    color: #333;
+  }
+
+  .back-link {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  .payment-form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .form-section {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .form-section h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #555;
+  }
+
+  input, textarea, select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    box-sizing: border-box;
+  }
+
+  input:focus, textarea:focus, select:focus {
+    outline: none;
+    border-color: #1976d2;
+    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+  }
+
+  .image-upload {
+    border: 2px dashed #ddd;
+    border-radius: 0.5rem;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .image-upload:hover {
+    border-color: #1976d2;
+    background-color: #f5f5f5;
+  }
+
+  .upload-label {
+    cursor: pointer;
+    display: block;
+  }
+
+  .upload-content svg {
+    color: #666;
+    margin-bottom: 1rem;
+  }
+
+  .upload-content p {
+    margin: 0 0 0.5rem 0;
+    font-weight: 500;
+    color: #333;
+  }
+
+  .upload-content small {
+    color: #666;
+  }
+
+  .image-preview {
+    text-align: center;
+  }
+
+  .image-preview img {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .remove-image {
+    background-color: #d32f2f;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+  }
+
+  .users-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .user-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background-color: #f5f5f5;
+    padding: 0.5rem 0.75rem;
+    border-radius: 1rem;
+  }
+
+  .remove-user {
+    background-color: #d32f2f;
+    color: white;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+
+  .add-user {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .add-user input {
+    flex: 1;
+  }
+
+  .add-user button {
+    background-color: #1976d2;
+    color: white;
+    border: none;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+  }
+
+  .split-method {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .split-method label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+  }
+
+  .proportional-splits {
+    border: 1px solid #ddd;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .proportional-splits h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  .split-input {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .split-input label {
+    min-width: 100px;
+    margin-bottom: 0;
+  }
+
+  .split-input input {
+    max-width: 120px;
+  }
+
+  .split-preview {
+    background-color: #f8f9fa;
+    padding: 1rem;
+    border-radius: 0.5rem;
+  }
+
+  .split-preview h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  .split-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .amount.positive {
+    color: #2e7d32;
+    font-weight: 500;
+  }
+
+  .amount.negative {
+    color: #d32f2f;
+    font-weight: 500;
+  }
+
+  .error {
+    background-color: #ffebee;
+    color: #d32f2f;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+  }
+
+  .btn-primary, .btn-secondary {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .btn-primary {
+    background-color: #1976d2;
+    color: white;
+    border: none;
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background-color: #1565c0;
+  }
+
+  .btn-primary:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-secondary {
+    background-color: #f5f5f5;
+    color: #333;
+    border: 1px solid #ddd;
+  }
+
+  .btn-secondary:hover {
+    background-color: #e8e8e8;
+  }
+
+  @media (max-width: 600px) {
+    .add-payment {
+      padding: 1rem;
+    }
+
+    .form-row {
+      grid-template-columns: 1fr;
+    }
+
+    .form-actions {
+      flex-direction: column;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/cospend/payments/edit/[id]/+page.server.ts b/src/routes/cospend/payments/edit/[id]/+page.server.ts
new file mode 100644
index 0000000..99921c7
--- /dev/null
+++ b/src/routes/cospend/payments/edit/[id]/+page.server.ts
@@ -0,0 +1,15 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, params }) => {
+  const session = await locals.auth();
+  
+  if (!session) {
+    throw redirect(302, '/login');
+  }
+
+  return {
+    session,
+    paymentId: params.id
+  };
+};
\ No newline at end of file
diff --git a/src/routes/cospend/payments/edit/[id]/+page.svelte b/src/routes/cospend/payments/edit/[id]/+page.svelte
new file mode 100644
index 0000000..25dd70c
--- /dev/null
+++ b/src/routes/cospend/payments/edit/[id]/+page.svelte
@@ -0,0 +1,345 @@
+<script>
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  
+  export let data;
+
+  let payment = null;
+  let loading = true;
+  let saving = false;
+  let error = null;
+
+  onMount(async () => {
+    await loadPayment();
+  });
+
+  async function loadPayment() {
+    try {
+      const response = await fetch(`/api/cospend/payments/${data.paymentId}`);
+      if (!response.ok) {
+        throw new Error('Failed to load payment');
+      }
+      const result = await response.json();
+      payment = result.payment;
+    } catch (err) {
+      error = err.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleSubmit() {
+    if (!payment) return;
+
+    saving = true;
+    error = null;
+
+    try {
+      const response = await fetch(`/api/cospend/payments/${data.paymentId}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(payment)
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to update payment');
+      }
+
+      await goto('/cospend/payments');
+    } catch (err) {
+      error = err.message;
+    } finally {
+      saving = false;
+    }
+  }
+
+  function formatDate(dateString) {
+    return new Date(dateString).toISOString().split('T')[0];
+  }
+</script>
+
+<svelte:head>
+  <title>Edit Payment - Cospend</title>
+</svelte:head>
+
+<main class="edit-payment">
+  <div class="header">
+    <h1>Edit Payment</h1>
+    <a href="/cospend/payments" class="back-link">← Back to Payments</a>
+  </div>
+
+  {#if loading}
+    <div class="loading">Loading payment...</div>
+  {:else if error}
+    <div class="error">Error: {error}</div>
+  {:else if payment}
+    <form on:submit|preventDefault={handleSubmit} class="payment-form">
+      <div class="form-section">
+        <h2>Payment Details</h2>
+        
+        <div class="form-group">
+          <label for="title">Title *</label>
+          <input 
+            type="text" 
+            id="title" 
+            bind:value={payment.title} 
+            required 
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="description">Description</label>
+          <textarea 
+            id="description" 
+            bind:value={payment.description} 
+            rows="3"
+          ></textarea>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group">
+            <label for="amount">Amount (CHF) *</label>
+            <input 
+              type="number" 
+              id="amount" 
+              bind:value={payment.amount} 
+              required 
+              min="0" 
+              step="0.01"
+            />
+          </div>
+
+          <div class="form-group">
+            <label for="date">Date</label>
+            <input 
+              type="date" 
+              id="date" 
+              value={formatDate(payment.date)}
+              on:change={(e) => payment.date = new Date(e.target.value).toISOString()}
+              required
+            />
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="paidBy">Paid by</label>
+          <input 
+            type="text" 
+            id="paidBy" 
+            bind:value={payment.paidBy} 
+            required
+          />
+        </div>
+      </div>
+
+      {#if payment.splits && payment.splits.length > 0}
+        <div class="form-section">
+          <h2>Current Splits</h2>
+          <div class="splits-display">
+            {#each payment.splits as split}
+              <div class="split-item">
+                <span>{split.username}</span>
+                <span class:positive={split.amount < 0} class:negative={split.amount > 0}>
+                  {#if split.amount > 0}
+                    owes CHF {split.amount.toFixed(2)}
+                  {:else if split.amount < 0}
+                    owed CHF {Math.abs(split.amount).toFixed(2)}
+                  {:else}
+                    even
+                  {/if}
+                </span>
+              </div>
+            {/each}
+          </div>
+          <p class="note">Note: To modify splits, please delete and recreate the payment.</p>
+        </div>
+      {/if}
+
+      <div class="form-actions">
+        <button type="button" class="btn-secondary" on:click={() => goto('/cospend/payments')}>
+          Cancel
+        </button>
+        <button type="submit" class="btn-primary" disabled={saving}>
+          {saving ? 'Saving...' : 'Save Changes'}
+        </button>
+      </div>
+    </form>
+  {/if}
+</main>
+
+<style>
+  .edit-payment {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+  }
+
+  .header h1 {
+    margin: 0;
+    color: #333;
+  }
+
+  .back-link {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  .loading, .error {
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+  }
+
+  .error {
+    color: #d32f2f;
+    background-color: #ffebee;
+    border-radius: 0.5rem;
+  }
+
+  .payment-form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .form-section {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .form-section h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: #333;
+    font-size: 1.25rem;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #555;
+  }
+
+  input, textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ddd;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    box-sizing: border-box;
+  }
+
+  input:focus, textarea:focus {
+    outline: none;
+    border-color: #1976d2;
+    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+  }
+
+  .splits-display {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .split-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    background-color: #f8f9fa;
+    border-radius: 0.5rem;
+  }
+
+  .positive {
+    color: #2e7d32;
+    font-weight: 500;
+  }
+
+  .negative {
+    color: #d32f2f;
+    font-weight: 500;
+  }
+
+  .note {
+    color: #666;
+    font-size: 0.9rem;
+    font-style: italic;
+    margin: 0;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+  }
+
+  .btn-primary, .btn-secondary {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .btn-primary {
+    background-color: #1976d2;
+    color: white;
+    border: none;
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background-color: #1565c0;
+  }
+
+  .btn-primary:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-secondary {
+    background-color: #f5f5f5;
+    color: #333;
+    border: 1px solid #ddd;
+  }
+
+  .btn-secondary:hover {
+    background-color: #e8e8e8;
+  }
+
+  @media (max-width: 600px) {
+    .edit-payment {
+      padding: 1rem;
+    }
+
+    .form-row {
+      grid-template-columns: 1fr;
+    }
+
+    .form-actions {
+      flex-direction: column;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/cospend/payments/view/[id]/+page.server.ts b/src/routes/cospend/payments/view/[id]/+page.server.ts
new file mode 100644
index 0000000..99921c7
--- /dev/null
+++ b/src/routes/cospend/payments/view/[id]/+page.server.ts
@@ -0,0 +1,15 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, params }) => {
+  const session = await locals.auth();
+  
+  if (!session) {
+    throw redirect(302, '/login');
+  }
+
+  return {
+    session,
+    paymentId: params.id
+  };
+};
\ No newline at end of file
diff --git a/src/routes/cospend/payments/view/[id]/+page.svelte b/src/routes/cospend/payments/view/[id]/+page.svelte
new file mode 100644
index 0000000..af0df62
--- /dev/null
+++ b/src/routes/cospend/payments/view/[id]/+page.svelte
@@ -0,0 +1,396 @@
+<script>
+  import { onMount } from 'svelte';
+  import { goto } from '$app/navigation';
+  
+  export let data;
+
+  let payment = null;
+  let loading = true;
+  let error = null;
+
+  onMount(async () => {
+    await loadPayment();
+  });
+
+  async function loadPayment() {
+    try {
+      const response = await fetch(`/api/cospend/payments/${data.paymentId}`);
+      if (!response.ok) {
+        throw new Error('Failed to load payment');
+      }
+      const result = await response.json();
+      payment = result.payment;
+    } catch (err) {
+      error = err.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function formatCurrency(amount) {
+    return new Intl.NumberFormat('de-CH', {
+      style: 'currency',
+      currency: 'CHF'
+    }).format(Math.abs(amount));
+  }
+
+  function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('de-CH');
+  }
+
+  function getSplitDescription(payment) {
+    if (!payment.splits || payment.splits.length === 0) return 'No splits';
+    
+    if (payment.splitMethod === 'equal') {
+      return `Split equally among ${payment.splits.length} people`;
+    } else if (payment.splitMethod === 'full') {
+      return `Paid in full by ${payment.paidBy}`;
+    } else {
+      return `Custom split among ${payment.splits.length} people`;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>{payment ? payment.title : 'Payment'} - Cospend</title>
+</svelte:head>
+
+<main class="payment-view">
+  <div class="header">
+    <div class="header-content">
+      <a href="/cospend" class="back-link">← Back to Dashboard</a>
+      <div class="header-actions">
+        {#if payment && payment.createdBy === data.session.user.nickname}
+          <a href="/cospend/payments/edit/{data.paymentId}" class="btn btn-secondary">Edit</a>
+        {/if}
+        <a href="/cospend/payments" class="btn btn-secondary">All Payments</a>
+      </div>
+    </div>
+  </div>
+
+  {#if loading}
+    <div class="loading">Loading payment...</div>
+  {:else if error}
+    <div class="error">Error: {error}</div>
+  {:else if payment}
+    <div class="payment-card">
+      <div class="payment-header">
+        <div class="title-section">
+          <h1>{payment.title}</h1>
+          <div class="payment-amount">
+            {formatCurrency(payment.amount)}
+          </div>
+        </div>
+        {#if payment.image}
+          <div class="receipt-image">
+            <img src={payment.image} alt="Receipt" />
+          </div>
+        {/if}
+      </div>
+
+      <div class="payment-info">
+        <div class="info-grid">
+          <div class="info-item">
+            <span class="label">Date:</span>
+            <span class="value">{formatDate(payment.date)}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">Paid by:</span>
+            <span class="value">{payment.paidBy}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">Created by:</span>
+            <span class="value">{payment.createdBy}</span>
+          </div>
+          <div class="info-item">
+            <span class="label">Split method:</span>
+            <span class="value">{getSplitDescription(payment)}</span>
+          </div>
+        </div>
+
+        {#if payment.description}
+          <div class="description">
+            <h3>Description</h3>
+            <p>{payment.description}</p>
+          </div>
+        {/if}
+      </div>
+
+      {#if payment.splits && payment.splits.length > 0}
+        <div class="splits-section">
+          <h3>Split Details</h3>
+          <div class="splits-list">
+            {#each payment.splits as split}
+              <div class="split-item" class:current-user={split.username === data.session.user.nickname}>
+                <div class="split-user">
+                  <span class="username">{split.username}</span>
+                  {#if split.username === data.session.user.nickname}
+                    <span class="you-badge">You</span>
+                  {/if}
+                </div>
+                <div class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
+                  {#if split.amount > 0}
+                    owes {formatCurrency(split.amount)}
+                  {:else if split.amount < 0}
+                    owed {formatCurrency(split.amount)}
+                  {:else}
+                    even
+                  {/if}
+                </div>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</main>
+
+<style>
+  .payment-view {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .header {
+    margin-bottom: 2rem;
+  }
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+
+  .back-link {
+    color: #1976d2;
+    text-decoration: none;
+    font-weight: 500;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+  }
+
+  .btn-secondary {
+    background-color: #f5f5f5;
+    color: #333;
+    border: 1px solid #ddd;
+  }
+
+  .btn-secondary:hover {
+    background-color: #e8e8e8;
+  }
+
+  .loading, .error {
+    text-align: center;
+    padding: 2rem;
+    font-size: 1.1rem;
+  }
+
+  .error {
+    color: #d32f2f;
+    background-color: #ffebee;
+    border-radius: 0.5rem;
+  }
+
+  .payment-card {
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+  }
+
+  .payment-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 2rem;
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+    border-bottom: 1px solid #dee2e6;
+  }
+
+  .title-section h1 {
+    margin: 0 0 0.5rem 0;
+    color: #333;
+    font-size: 1.75rem;
+  }
+
+  .payment-amount {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #1976d2;
+  }
+
+  .receipt-image {
+    flex-shrink: 0;
+    margin-left: 2rem;
+  }
+
+  .receipt-image img {
+    max-width: 150px;
+    max-height: 150px;
+    object-fit: cover;
+    border-radius: 0.5rem;
+    border: 1px solid #ddd;
+  }
+
+  .payment-info {
+    padding: 2rem;
+  }
+
+  .info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .label {
+    font-weight: 600;
+    color: #666;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .value {
+    color: #333;
+    font-size: 1rem;
+  }
+
+  .description {
+    border-top: 1px solid #eee;
+    padding-top: 1.5rem;
+  }
+
+  .description h3 {
+    margin: 0 0 0.75rem 0;
+    color: #333;
+    font-size: 1.1rem;
+  }
+
+  .description p {
+    margin: 0;
+    color: #555;
+    line-height: 1.5;
+  }
+
+  .splits-section {
+    border-top: 1px solid #eee;
+    padding: 2rem;
+  }
+
+  .splits-section h3 {
+    margin: 0 0 1rem 0;
+    color: #333;
+    font-size: 1.1rem;
+  }
+
+  .splits-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .split-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+  }
+
+  .split-item.current-user {
+    background: #e3f2fd;
+    border-color: #2196f3;
+  }
+
+  .split-user {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .username {
+    font-weight: 500;
+    color: #333;
+  }
+
+  .you-badge {
+    background-color: #1976d2;
+    color: white;
+    padding: 0.125rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  .split-amount {
+    font-weight: 500;
+    font-size: 1rem;
+  }
+
+  .split-amount.positive {
+    color: #2e7d32;
+  }
+
+  .split-amount.negative {
+    color: #d32f2f;
+  }
+
+  @media (max-width: 600px) {
+    .payment-view {
+      padding: 1rem;
+    }
+
+    .payment-header {
+      flex-direction: column;
+      gap: 1rem;
+      text-align: center;
+    }
+
+    .receipt-image {
+      margin-left: 0;
+    }
+
+    .header-content {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .header-actions {
+      justify-content: center;
+    }
+
+    .info-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .split-item {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+  }
+</style>
\ No newline at end of file