feat: add multi-currency support to cospend payments

- Add ExchangeRate model for currency conversion tracking
- Implement currency utility functions for formatting and conversion
- Add exchange rates API endpoint with caching and fallback rates
- Update Payment and RecurringPayment models to support multiple currencies
- Enhanced payment forms with currency selection and conversion display
- Update split method selector with better currency handling
- Add currency-aware payment display and balance calculations
- Support for EUR, USD, GBP, and CHF with automatic exchange rate fetching

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

package.json

@@ -27,6 +27,7 @@
 	"dependencies": {
 		"@auth/sveltekit": "^1.10.0",
 		"@sveltejs/adapter-node": "^5.0.0",
+		"chart.js": "^4.5.0",
 		"cheerio": "1.0.0-rc.12",
 		"mongoose": "^8.0.0",
 		"node-cron": "^4.2.1",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@sveltejs/adapter-node':
         specifier: ^5.0.0
         version: 5.3.1(@sveltejs/kit@2.37.0(@sveltejs/vite-plugin-svelte@6.1.3(svelte@5.38.6)(vite@7.1.3(@types/node@22.18.0)))(svelte@5.38.6)(vite@7.1.3(@types/node@22.18.0)))
+      chart.js:
+        specifier: ^4.5.0
+        version: 4.5.0
       cheerio:
         specifier: 1.0.0-rc.12
         version: 1.0.0-rc.12
@@ -376,6 +379,9 @@ packages:
   '@jridgewell/trace-mapping@0.3.30':
     resolution: {integrity: sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==}
 
+  '@kurkle/color@0.3.4':
+    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+
   '@mongodb-js/saslprep@1.3.0':
     resolution: {integrity: sha512-zlayKCsIjYb7/IdfqxorK5+xUMyi4vOKcFy10wKJYc63NSdKI8mNME+uJqfatkPmOSMMUiojrL58IePKBm3gvQ==}
 
@@ -625,6 +631,10 @@ packages:
     resolution: {integrity: sha512-WIsKqkSC0ABoBJuT1LEX+2HEvNmNKKgnTAyd0fL8qzK4SH2i9NXg+t08YtdZp/V9IZ33cxe3iV4yM0qg8lMQng==}
     engines: {node: '>=16.20.1'}
 
+  chart.js@4.5.0:
+    resolution: {integrity: sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==}
+    engines: {pnpm: '>=8'}
+
   cheerio-select@2.1.0:
     resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
 
@@ -1251,6 +1261,8 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  '@kurkle/color@0.3.4': {}
+
   '@mongodb-js/saslprep@1.3.0':
     dependencies:
       sparse-bitfield: 3.0.3
@@ -1455,6 +1467,10 @@ snapshots:
 
   bson@6.10.4: {}
 
+  chart.js@4.5.0:
+    dependencies:
+      '@kurkle/color': 0.3.4
+
   cheerio-select@2.1.0:
     dependencies:
       boolbase: 1.0.0

src/hooks.server.ts

@@ -1,4 +1,4 @@
-import type { Handle } from "@sveltejs/kit"
+import type { Handle, HandleServerError } from "@sveltejs/kit"
 import { redirect } from "@sveltejs/kit"
 import { error } from "@sveltejs/kit"
 import { SvelteKitAuth } from "@auth/sveltekit"
@@ -7,24 +7,59 @@ import { AUTHENTIK_ID, AUTHENTIK_SECRET, AUTHENTIK_ISSUER } from "$env/static/pr
 import { sequence } from "@sveltejs/kit/hooks"
 import * as auth from "./auth"
 import { initializeScheduler } from "./lib/server/scheduler"
+import { dbConnect } from "./utils/db"
+import fs from 'fs'
+import path from 'path'
 
-// Initialize the recurring payment scheduler
-initializeScheduler();
+// Initialize database connection on server startup
+console.log('🚀 Server starting - initializing database connection...');
+await dbConnect().then(() => {
+  console.log('✅ Database connected successfully');
+  // Initialize the recurring payment scheduler after DB is ready
+  initializeScheduler();
+  console.log('✅ Recurring payment scheduler initialized');
+}).catch((error) => {
+  console.error('❌ Failed to connect to database on startup:', error);
+  // Don't crash the server - API routes will attempt reconnection
+});
 
 async function authorization({ event, resolve }) {
-	// Protect any routes under /authenticated
+	const session = await event.locals.auth();
+	
+	// Protect rezepte routes
 	if (event.url.pathname.startsWith('/rezepte/edit') || event.url.pathname.startsWith('/rezepte/add')) {
-   const session = await event.locals.auth();
 		if (!session) {
 			// Preserve the original URL the user was trying to access
 			const callbackUrl = encodeURIComponent(event.url.pathname + event.url.search);
 			redirect(303, `/login?callbackUrl=${callbackUrl}`);
 		}
-		else if (! session.user.groups.includes('rezepte_users')) {
-			// strip last dir from url
-			// TODO: give indication of why access failed
-			const new_url = event.url.pathname.split('/').slice(0, -1).join('/');
-			redirect(303, new_url);
+		else if (!session.user.groups.includes('rezepte_users')) {
+			error(403, {
+				message: 'Zugriff verweigert',
+				details: 'Du hast keine Berechtigung für diesen Bereich. Falls du glaubst, dass dies ein Fehler ist, wende dich bitte an Alexander.'
+			});
+		}
+	}
+
+	// Protect cospend routes and API endpoints
+	if (event.url.pathname.startsWith('/cospend') || event.url.pathname.startsWith('/api/cospend')) {
+		if (!session) {
+			// For API routes, return 401 instead of redirecting
+			if (event.url.pathname.startsWith('/api/cospend')) {
+				error(401, {
+					message: 'Anmeldung erforderlich',
+					details: 'Du musst angemeldet sein, um auf diesen Bereich zugreifen zu können.'
+				});
+			}
+			// For page routes, redirect to login
+			const callbackUrl = encodeURIComponent(event.url.pathname + event.url.search);
+			redirect(303, `/login?callbackUrl=${callbackUrl}`);
+		}
+		else if (!session.user.groups.includes('cospend')) {
+			error(403, {
+				message: 'Zugriff verweigert',
+				details: 'Du hast keine Berechtigung für diesen Bereich. Falls du glaubst, dass dies ein Fehler ist, wende dich bitte an Alexander.'
+			});
 		}
 	}
 
@@ -32,6 +67,32 @@ async function authorization({ event, resolve }) {
 	return resolve(event);
 }
 
+// Bible verse functionality for error pages
+async function getRandomVerse(fetch: typeof globalThis.fetch): Promise<any> {
+  try {
+    const response = await fetch('/api/bible-quote');
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return await response.json();
+  } catch (err) {
+    console.error('Error getting random verse:', err);
+    return null;
+  }
+}
+
+export const handleError: HandleServerError = async ({ error, event, status, message }) => {
+  console.error('Error occurred:', { error, status, message, url: event.url.pathname });
+  
+  // Add Bible verse to error context
+  const bibleQuote = await getRandomVerse(event.fetch);
+
+  return {
+    message: message,
+    bibleQuote
+  };
+};
+
 export const handle: Handle = sequence(
 	auth.handle,
 	authorization

src/lib/components/AddButton.svelte

@@ -1,6 +1,8 @@
 <script lang='ts'>
 import ActionButton from "./ActionButton.svelte";
+
+export let href: string;
 </script>
-<ActionButton href="/rezepte/add">
+<ActionButton {href}>
 <svg class=icon_svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
 </ActionButton>

src/lib/components/BarChart.svelte

@@ -0,0 +1,275 @@
+<script>
+  import { onMount } from 'svelte';
+  import { Chart, registerables } from 'chart.js';
+
+  export let data = { labels: [], datasets: [] };
+  export let title = '';
+  export let height = '400px';
+
+  let canvas;
+  let chart;
+
+  // Register Chart.js components
+  Chart.register(...registerables);
+
+  // Nord theme colors for categories
+  const nordColors = [
+    '#5E81AC', // Nord Blue
+    '#88C0D0', // Nord Light Blue
+    '#81A1C1', // Nord Lighter Blue
+    '#A3BE8C', // Nord Green
+    '#EBCB8B', // Nord Yellow
+    '#D08770', // Nord Orange
+    '#BF616A', // Nord Red
+    '#B48EAD', // Nord Purple
+    '#8FBCBB', // Nord Cyan
+    '#ECEFF4', // Nord Light Gray
+  ];
+
+  function getCategoryColor(category, index) {
+    const categoryColorMap = {
+      'groceries': '#A3BE8C',      // Green
+      'restaurant': '#D08770',     // Orange
+      'transport': '#5E81AC',      // Blue
+      'entertainment': '#B48EAD',  // Purple
+      'shopping': '#EBCB8B',       // Yellow
+      'utilities': '#81A1C1',      // Light Blue
+      'healthcare': '#BF616A',     // Red
+      'education': '#88C0D0',      // Cyan
+      'travel': '#8FBCBB',         // Light Cyan
+      'other': '#4C566A'           // Dark Gray
+    };
+
+    return categoryColorMap[category] || nordColors[index % nordColors.length];
+  }
+
+  function createChart() {
+    if (!canvas || !data.datasets) return;
+
+    // Destroy existing chart
+    if (chart) {
+      chart.destroy();
+    }
+
+    const ctx = canvas.getContext('2d');
+
+    // Process datasets with colors and capitalize labels
+    const processedDatasets = data.datasets.map((dataset, index) => ({
+      ...dataset,
+      label: dataset.label.charAt(0).toUpperCase() + dataset.label.slice(1),
+      backgroundColor: getCategoryColor(dataset.label, index),
+      borderColor: getCategoryColor(dataset.label, index),
+      borderWidth: 1
+    }));
+
+    chart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: data.labels,
+        datasets: processedDatasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            top: 40
+          }
+        },
+        scales: {
+          x: {
+            stacked: true,
+            grid: {
+              display: false
+            },
+            border: {
+              display: false
+            },
+            ticks: {
+              color: '#ffffff',
+              font: {
+                family: 'Inter, system-ui, sans-serif',
+                size: 14,
+                weight: 'bold'
+              }
+            }
+          },
+          y: {
+            stacked: true,
+            beginAtZero: true,
+            grid: {
+              display: false
+            },
+            border: {
+              display: false
+            },
+            ticks: {
+              color: 'transparent',
+              font: {
+                size: 0
+              }
+            }
+          }
+        },
+        plugins: {
+          datalabels: {
+            display: false
+          },
+          legend: {
+            position: 'bottom',
+            labels: {
+              padding: 20,
+              usePointStyle: true,
+              color: '#ffffff',
+              font: {
+                family: 'Inter, system-ui, sans-serif',
+                size: 14,
+                weight: 'bold'
+              }
+            }
+          },
+          title: {
+            display: !!title,
+            text: title,
+            color: '#ffffff',
+            font: {
+              family: 'Inter, system-ui, sans-serif',
+              size: 18,
+              weight: 'bold'
+            },
+            padding: 20
+          },
+          tooltip: {
+            backgroundColor: '#2e3440',
+            titleColor: '#ffffff',
+            bodyColor: '#ffffff',
+            borderWidth: 0,
+            cornerRadius: 12,
+            padding: 12,
+            displayColors: true,
+            titleAlign: 'center',
+            bodyAlign: 'center',
+            titleFont: {
+              family: 'Inter, system-ui, sans-serif',
+              size: 13,
+              weight: 'bold'
+            },
+            bodyFont: {
+              family: 'Inter, system-ui, sans-serif',
+              size: 14,
+              weight: '500'
+            },
+            titleMarginBottom: 8,
+            usePointStyle: true,
+            boxPadding: 6,
+            callbacks: {
+              title: function(context) {
+                return '';
+              },
+              label: function(context) {
+                return context.dataset.label + ': CHF ' + context.parsed.y.toFixed(2);
+              }
+            }
+          }
+        },
+        interaction: {
+          intersect: true,
+          mode: 'point'
+        }
+      },
+      plugins: [{
+        id: 'monthlyTotals',
+        afterDatasetsDraw: function(chart) {
+          const ctx = chart.ctx;
+          const chartArea = chart.chartArea;
+          
+          ctx.save();
+          ctx.font = 'bold 14px Inter, system-ui, sans-serif';
+          ctx.fillStyle = '#ffffff';
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'bottom';
+          
+          // Calculate and display monthly totals
+          chart.data.labels.forEach((label, index) => {
+            let total = 0;
+            chart.data.datasets.forEach(dataset => {
+              total += dataset.data[index] || 0;
+            });
+            
+            if (total > 0) {
+              // Get the x position for this month from any dataset
+              const meta = chart.getDatasetMeta(0);
+              if (meta && meta.data[index]) {
+                const x = meta.data[index].x;
+                
+                // Find the highest point for this month across all datasets
+                let maxY = chartArea.bottom;
+                for (let datasetIndex = 0; datasetIndex < chart.data.datasets.length; datasetIndex++) {
+                  const datasetMeta = chart.getDatasetMeta(datasetIndex);
+                  if (datasetMeta && datasetMeta.data[index]) {
+                    maxY = Math.min(maxY, datasetMeta.data[index].y);
+                  }
+                }
+                
+                // Display the total above the bar
+                ctx.fillText(`CHF ${total.toFixed(0)}`, x, maxY - 10);
+              }
+            }
+          });
+          
+          ctx.restore();
+        }
+      }]
+    });
+  }
+
+  onMount(() => {
+    createChart();
+
+    // Watch for theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleThemeChange = () => {
+      setTimeout(createChart, 100); // Small delay to let CSS variables update
+    };
+
+    mediaQuery.addEventListener('change', handleThemeChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleThemeChange);
+      if (chart) {
+        chart.destroy();
+      }
+    };
+  });
+
+  // Recreate chart when data changes
+  $: if (canvas && data) {
+    createChart();
+  }
+</script>
+
+<div class="chart-container" style="height: {height}">
+  <canvas bind:this={canvas}></canvas>
+</div>
+
+<style>
+  .chart-container {
+    background: var(--nord6);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .chart-container {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+  }
+
+  canvas {
+    max-width: 100%;
+    height: 100% !important;
+  }
+</style>

src/lib/components/FormSection.svelte

@@ -0,0 +1,38 @@
+<script>
+  export let title = '';
+</script>
+
+<div class="form-section">
+  {#if title}
+    <h2>{title}</h2>
+  {/if}
+  <slot />
+</div>
+
+<style>
+  .form-section {
+    background: var(--nord6);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+  }
+
+  .form-section h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--nord0);
+    font-size: 1.25rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .form-section {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+  }
+</style>

src/lib/components/ImageUpload.svelte

@@ -0,0 +1,247 @@
+<script>
+  export let imagePreview = '';
+  export let imageFile = null;
+  export let uploading = false;
+  export let currentImage = null; // For edit mode
+  export let title = 'Receipt Image';
+  
+  // Events
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+  function handleImageChange(event) {
+    const file = event.target.files[0];
+    if (file) {
+      if (file.size > 5 * 1024 * 1024) {
+        dispatch('error', 'File size must be less than 5MB');
+        return;
+      }
+      
+      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+      if (!allowedTypes.includes(file.type)) {
+        dispatch('error', '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);
+      
+      dispatch('imageSelected', file);
+    }
+  }
+
+  function removeImage() {
+    imageFile = null;
+    imagePreview = '';
+    currentImage = null;
+    dispatch('imageRemoved');
+  }
+
+  function removeCurrentImage() {
+    currentImage = null;
+    dispatch('currentImageRemoved');
+  }
+</script>
+
+<div class="form-section">
+  <h2>{title}</h2>
+  
+  {#if currentImage}
+    <div class="current-image">
+      <img src={currentImage} alt="Receipt" class="receipt-preview" />
+      <div class="image-actions">
+        <button type="button" class="btn-remove" on:click={removeCurrentImage}>
+          Remove Image
+        </button>
+      </div>
+    </div>
+  {/if}
+  
+  {#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>{currentImage ? 'Replace Image' : '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}
+        disabled={uploading}
+        hidden
+      />
+    </div>
+  {/if}
+  
+  {#if uploading}
+    <div class="upload-status">Uploading image...</div>
+  {/if}
+</div>
+
+<style>
+  .form-section {
+    background: var(--nord6);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+  }
+
+  .form-section h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--nord0);
+    font-size: 1.25rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .form-section {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+  }
+
+  .image-upload {
+    border: 2px dashed var(--nord4);
+    border-radius: 0.5rem;
+    padding: 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    background-color: var(--nord5);
+  }
+
+  .image-upload:hover {
+    border-color: var(--blue);
+    background-color: var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .image-upload {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .image-upload:hover {
+      background-color: var(--nord3);
+    }
+  }
+
+  .upload-label {
+    cursor: pointer;
+    display: block;
+  }
+
+  .upload-content svg {
+    color: var(--nord3);
+    margin-bottom: 1rem;
+  }
+
+  .upload-content p {
+    margin: 0 0 0.5rem 0;
+    font-weight: 500;
+    color: var(--nord0);
+  }
+
+  .upload-content small {
+    color: var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .upload-content svg {
+      color: var(--nord4);
+    }
+
+    .upload-content p {
+      color: var(--font-default-dark);
+    }
+
+    .upload-content small {
+      color: var(--nord4);
+    }
+  }
+
+  .image-preview {
+    text-align: center;
+  }
+
+  .image-preview img {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
+  .remove-image, .btn-remove {
+    background-color: var(--red);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .remove-image:hover, .btn-remove:hover {
+    background-color: var(--nord11);
+    transform: translateY(-1px);
+  }
+
+  .current-image {
+    margin-bottom: 1rem;
+    text-align: center;
+  }
+
+  .receipt-preview {
+    max-width: 200px;
+    max-height: 200px;
+    object-fit: cover;
+    border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
+    margin-bottom: 0.75rem;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .receipt-preview {
+      border-color: var(--nord2);
+    }
+  }
+
+  .image-actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  .upload-status {
+    margin-top: 0.5rem;
+    color: var(--blue);
+    font-size: 0.9rem;
+    text-align: center;
+  }
+</style>

src/lib/components/PaymentModal.svelte

@@ -3,6 +3,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import ProfilePicture from './ProfilePicture.svelte';
+  import EditButton from './EditButton.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   
   export let paymentId;
@@ -214,28 +215,31 @@
 
           <div class="panel-actions">
             {#if payment && payment.createdBy === session?.user?.nickname}
-              <a href="/cospend/payments/edit/{paymentId}" class="btn btn-primary">Edit Payment</a>
               <button 
-                class="btn btn-danger" 
+                class="btn-danger" 
                 on:click={deletePayment}
                 disabled={deleting}
               >
-                {deleting ? 'Deleting...' : 'Delete'}
+                {deleting ? 'Deleting...' : 'Delete Payment'}
               </button>
             {/if}
-            <button class="btn btn-secondary" on:click={closeModal}>Close</button>
+            <button class="btn-secondary" on:click={closeModal}>Close</button>
           </div>
         </div>
       {/if}
   </div>
 </div>
 
+{#if payment && payment.createdBy === session?.user?.nickname}
+  <EditButton href="/cospend/payments/edit/{paymentId}" />
+{/if}
+
 <style>
   .panel-content {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: white;
+    background: var(--nord6);
   }
 
   .panel-header {
@@ -243,14 +247,14 @@
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid #eee;
-    background: #f8f9fa;
+    border-bottom: 1px solid var(--nord4);
+    background: var(--nord5);
     flex-shrink: 0;
   }
 
   .panel-header h2 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
@@ -260,13 +264,13 @@
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 0.25rem;
-    color: #666;
+    color: var(--nord3);
     transition: all 0.2s;
   }
 
   .close-button:hover {
-    background: #e9ecef;
-    color: #333;
+    background: var(--nord4);
+    color: var(--nord0);
   }
 
   .panel-body {
@@ -282,8 +286,10 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
+    border-radius: 0.5rem;
+    border: 1px solid var(--red);
   }
 
   .payment-details {
@@ -296,8 +302,8 @@
     justify-content: space-between;
     align-items: flex-start;
     padding: 1.5rem;
-    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-    border-bottom: 1px solid #dee2e6;
+    background: linear-gradient(135deg, var(--nord5), var(--nord4));
+    border-bottom: 1px solid var(--nord3);
   }
 
   .title-with-category {
@@ -314,14 +320,14 @@
 
   .title-section h1 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.5rem;
   }
 
   .payment-amount {
     font-size: 1.25rem;
     font-weight: bold;
-    color: #1976d2;
+    color: var(--blue);
   }
 
   .receipt-image {
@@ -334,7 +340,7 @@
     max-height: 100px;
     object-fit: cover;
     border-radius: 0.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
   }
 
   .payment-info {
@@ -356,43 +362,43 @@
 
   .label {
     font-weight: 600;
-    color: #666;
+    color: var(--nord3);
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
 
   .value {
-    color: #333;
+    color: var(--nord0);
     font-size: 0.95rem;
   }
 
   .description {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding-top: 1.5rem;
   }
 
   .description h3 {
     margin: 0 0 0.75rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
   .description p {
     margin: 0;
-    color: #555;
+    color: var(--nord2);
     line-height: 1.5;
     font-size: 0.95rem;
   }
 
   .splits-section {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding: 1.5rem;
   }
 
   .splits-section h3 {
     margin: 0 0 1rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
@@ -407,14 +413,14 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem;
-    background: #f8f9fa;
+    background: var(--nord5);
     border-radius: 0.5rem;
-    border: 1px solid transparent;
+    border: 1px solid var(--nord4);
   }
 
   .split-item.current-user {
-    background: #e3f2fd;
-    border-color: #2196f3;
+    background: var(--nord8);
+    border-color: var(--blue);
   }
 
   .split-user {
@@ -431,12 +437,12 @@
 
   .username {
     font-weight: 500;
-    color: #333;
+    color: var(--nord0);
     font-size: 0.95rem;
   }
 
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.375rem;
     border-radius: 1rem;
@@ -450,60 +456,62 @@
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
   }
 
   .panel-actions {
     padding: 1.5rem;
-    border-top: 1px solid #eee;
-    background: #f8f9fa;
+    border-top: 1px solid var(--nord4);
+    background: var(--nord5);
     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;
+  .btn-primary, .btn-secondary, .btn-danger {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    cursor: pointer;
     transition: all 0.2s;
     border: none;
-    cursor: pointer;
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
   }
 
-  .btn-primary:hover {
-    background-color: #1565c0;
+  .btn-primary:hover:not(:disabled) {
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-secondary {
-    background-color: white;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #f5f5f5;
+    background-color: var(--nord4);
+    transform: translateY(-1px);
   }
 
   .btn-danger {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
   }
 
   .btn-danger:hover:not(:disabled) {
-    background-color: #c62828;
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   .btn-danger:disabled {
@@ -511,6 +519,103 @@
     cursor: not-allowed;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .panel-content {
+      background: var(--nord1);
+    }
+
+    .panel-header {
+      background: var(--nord2);
+      border-bottom-color: var(--nord3);
+    }
+
+    .panel-header h2 {
+      color: var(--font-default-dark);
+    }
+
+    .close-button {
+      color: var(--nord4);
+    }
+
+    .close-button:hover {
+      background: var(--nord3);
+      color: var(--font-default-dark);
+    }
+
+    .error {
+      background-color: var(--accent-dark);
+    }
+
+    .payment-header {
+      background: linear-gradient(135deg, var(--nord2), var(--nord3));
+    }
+
+    .title-section h1 {
+      color: var(--font-default-dark);
+    }
+
+    .receipt-image img {
+      border-color: var(--nord2);
+    }
+
+    .label {
+      color: var(--nord4);
+    }
+
+    .value {
+      color: var(--font-default-dark);
+    }
+
+    .description {
+      border-top-color: var(--nord2);
+    }
+
+    .description h3 {
+      color: var(--font-default-dark);
+    }
+
+    .description p {
+      color: var(--nord5);
+    }
+
+    .splits-section {
+      border-top-color: var(--nord2);
+    }
+
+    .splits-section h3 {
+      color: var(--font-default-dark);
+    }
+
+    .split-item {
+      background: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .split-item.current-user {
+      background: var(--nord3);
+      border-color: var(--blue);
+    }
+
+    .username {
+      color: var(--font-default-dark);
+    }
+
+    .panel-actions {
+      background: var(--nord2);
+      border-top-color: var(--nord3);
+    }
+
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
+  }
+
   @media (max-width: 600px) {
     .payment-header {
       flex-direction: column;

src/lib/components/SplitMethodSelector.svelte

@@ -0,0 +1,457 @@
+<script>
+  import ProfilePicture from './ProfilePicture.svelte';
+  
+  export let splitMethod = 'equal';
+  export let users = [];
+  export let amount = 0;
+  export let paidBy = '';
+  export let splitAmounts = {};
+  export let personalAmounts = {};
+  export let currentUser = '';
+  export let predefinedMode = false;
+  export let currency = 'CHF';
+  
+  let personalTotalError = false;
+  
+  // Reactive text for "Paid in Full" option
+  $: paidInFullText = (() => {
+    if (!paidBy) {
+      return 'Paid in Full';
+    }
+    
+    // Special handling for 2-user predefined setup
+    if (predefinedMode && users.length === 2) {
+      const otherUser = users.find(user => user !== paidBy);
+      return otherUser ? `Paid in Full for ${otherUser}` : 'Paid in Full';
+    }
+    
+    // General case
+    if (paidBy === currentUser) {
+      return 'Paid in Full by You';
+    } else {
+      return `Paid in Full by ${paidBy}`;
+    }
+  })();
+  
+  function calculateEqualSplits() {
+    if (!amount || users.length === 0) return;
+    
+    const amountNum = parseFloat(amount);
+    const splitAmount = amountNum / users.length;
+    
+    users.forEach(user => {
+      if (user === paidBy) {
+        splitAmounts[user] = splitAmount - amountNum;
+      } else {
+        splitAmounts[user] = splitAmount;
+      }
+    });
+    splitAmounts = { ...splitAmounts };
+  }
+
+  function calculateFullPayment() {
+    if (!amount) return;
+    
+    const amountNum = parseFloat(amount);
+    const otherUsers = users.filter(user => user !== paidBy);
+    const amountPerOtherUser = otherUsers.length > 0 ? amountNum / otherUsers.length : 0;
+    
+    users.forEach(user => {
+      if (user === paidBy) {
+        splitAmounts[user] = -amountNum;
+      } else {
+        splitAmounts[user] = amountPerOtherUser;
+      }
+    });
+    splitAmounts = { ...splitAmounts };
+  }
+
+  function calculatePersonalEqualSplit() {
+    if (!amount || users.length === 0) return;
+    
+    const totalAmount = parseFloat(amount);
+    
+    const totalPersonal = users.reduce((sum, user) => {
+      return sum + (parseFloat(personalAmounts[user]) || 0);
+    }, 0);
+    
+    const remainder = Math.max(0, totalAmount - totalPersonal);
+    const equalShare = remainder / users.length;
+    
+    users.forEach(user => {
+      const personalAmount = parseFloat(personalAmounts[user]) || 0;
+      const totalOwed = personalAmount + equalShare;
+      
+      if (user === paidBy) {
+        splitAmounts[user] = totalOwed - totalAmount;
+      } else {
+        splitAmounts[user] = totalOwed;
+      }
+    });
+    splitAmounts = { ...splitAmounts };
+  }
+
+  function handleSplitMethodChange() {
+    if (splitMethod === 'equal') {
+      calculateEqualSplits();
+    } else if (splitMethod === 'full') {
+      calculateFullPayment();
+    } else if (splitMethod === 'personal_equal') {
+      calculatePersonalEqualSplit();
+    } else if (splitMethod === 'proportional') {
+      users.forEach(user => {
+        if (!(user in splitAmounts)) {
+          splitAmounts[user] = 0;
+        }
+      });
+      splitAmounts = { ...splitAmounts };
+    }
+  }
+
+  // Validate and recalculate when personal amounts change
+  $: if (splitMethod === 'personal_equal' && personalAmounts && amount) {
+    const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
+    const totalAmount = parseFloat(amount);
+    personalTotalError = totalPersonal > totalAmount;
+    
+    if (!personalTotalError) {
+      calculatePersonalEqualSplit();
+    }
+  }
+
+  $: if (amount && splitMethod && paidBy) {
+    handleSplitMethodChange();
+  }
+</script>
+
+<div class="form-section">
+  <h2>Split Method</h2>
+  
+  <div class="form-group">
+    <label for="splitMethod">How should this payment be split?</label>
+    <select id="splitMethod" name="splitMethod" bind:value={splitMethod} required>
+      <option value="equal">{predefinedMode && users.length === 2 ? 'Split 50/50' : 'Equal Split'}</option>
+      <option value="personal_equal">Personal + Equal Split</option>
+      <option value="full">{paidInFullText}</option>
+      <option value="proportional">Custom Proportions</option>
+    </select>
+  </div>
+
+  {#if 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" 
+            name="split_{user}"
+            bind:value={splitAmounts[user]}
+            placeholder="0.00"
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if splitMethod === 'personal_equal'}
+    <div class="personal-splits">
+      <h3>Personal Amounts</h3>
+      <p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
+      {#each users as user}
+        <div class="split-input">
+          <label>{user}</label>
+          <input 
+            type="number" 
+            step="0.01" 
+            min="0"
+            name="personal_{user}"
+            bind:value={personalAmounts[user]}
+            placeholder="0.00"
+          />
+        </div>
+      {/each}
+      {#if amount}
+        <div class="remainder-info" class:error={personalTotalError}>
+          <span>Total Personal: {currency} {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
+          <span>Remainder to Split: {currency} {Math.max(0, parseFloat(amount) - Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0)).toFixed(2)}</span>
+          {#if personalTotalError}
+            <div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if Object.keys(splitAmounts).length > 0}
+    <div class="split-preview">
+      <h3>Split Preview</h3>
+      {#each users as user}
+        <div class="split-item">
+          <div class="split-user">
+            <ProfilePicture username={user} size={24} />
+            <span class="username">{user}</span>
+          </div>
+          <span class="amount" class:positive={splitAmounts[user] < 0} class:negative={splitAmounts[user] > 0}>
+            {#if splitAmounts[user] > 0}
+              owes {currency} {splitAmounts[user].toFixed(2)}
+            {:else if splitAmounts[user] < 0}
+              is owed {currency} {Math.abs(splitAmounts[user]).toFixed(2)}
+            {:else}
+              owes {currency} {splitAmounts[user].toFixed(2)}
+            {/if}
+          </span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .form-section {
+    background: var(--nord6);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+  }
+
+  .form-section h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--nord0);
+    font-size: 1.25rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .form-section {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    label {
+      color: var(--nord5);
+    }
+  }
+
+  select {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--nord4);
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    box-sizing: border-box;
+    background-color: var(--nord6);
+    color: var(--nord0);
+  }
+
+  select:focus {
+    outline: none;
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    select {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+  }
+
+  .proportional-splits, .personal-splits {
+    margin-top: 1rem;
+  }
+
+  .proportional-splits {
+    border: 1px solid var(--nord4);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    background-color: var(--nord5);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .proportional-splits {
+      border-color: var(--nord3);
+      background-color: var(--nord2);
+    }
+  }
+
+  .proportional-splits h3, .personal-splits h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .proportional-splits h3, .personal-splits h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
+  .personal-splits .description {
+    color: var(--nord2);
+    font-size: 0.9rem;
+    margin-bottom: 1rem;
+    font-style: italic;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .personal-splits .description {
+      color: var(--nord4);
+    }
+  }
+
+  .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;
+    padding: 0.75rem;
+    border: 1px solid var(--nord4);
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    background-color: var(--nord6);
+    color: var(--nord0);
+    box-sizing: border-box;
+  }
+
+  .split-input input:focus {
+    outline: none;
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-input input {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+  }
+
+  .remainder-info {
+    margin-top: 1rem;
+    padding: 1rem;
+    background-color: var(--nord5);
+    border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
+  }
+
+  .remainder-info.error {
+    background-color: var(--nord6);
+    border-color: var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .remainder-info {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .remainder-info.error {
+      background-color: var(--accent-dark);
+      border-color: var(--red);
+    }
+  }
+
+  .remainder-info span {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+
+  .error-message {
+    color: var(--red);
+    font-weight: 600;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+  }
+
+  .split-preview {
+    background-color: var(--nord5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-preview {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+  }
+
+  .split-preview h3 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-preview h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
+  .split-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .split-user {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .username {
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .username {
+      color: var(--font-default-dark);
+    }
+  }
+
+  .amount.positive {
+    color: var(--green);
+    font-weight: 500;
+  }
+
+  .amount.negative {
+    color: var(--red);
+    font-weight: 500;
+  }
+</style>

src/lib/components/UsersList.svelte

@@ -0,0 +1,239 @@
+<script>
+  import ProfilePicture from './ProfilePicture.svelte';
+  
+  export let users = [];
+  export let currentUser = '';
+  export let predefinedMode = false;
+  export let canRemoveUsers = true;
+  export let newUser = '';
+  
+  function addUser() {
+    if (predefinedMode) return;
+    
+    if (newUser.trim() && !users.includes(newUser.trim())) {
+      users = [...users, newUser.trim()];
+      newUser = '';
+    }
+  }
+
+  function removeUser(userToRemove) {
+    if (predefinedMode) return;
+    if (!canRemoveUsers) return;
+    
+    if (users.length > 1 && userToRemove !== currentUser) {
+      users = users.filter(u => u !== userToRemove);
+    }
+  }
+</script>
+
+<div class="form-section">
+  <h2>Split Between Users</h2>
+  
+  {#if predefinedMode}
+    <div class="predefined-users">
+      <p class="predefined-note">Splitting between predefined users:</p>
+      <div class="users-list">
+        {#each users as user}
+          <div class="user-item with-profile">
+            <ProfilePicture username={user} size={32} />
+            <span class="username">{user}</span>
+            {#if user === currentUser}
+              <span class="you-badge">You</span>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="users-list">
+      {#each users as user}
+        <div class="user-item with-profile">
+          <ProfilePicture username={user} size={32} />
+          <span class="username">{user}</span>
+          {#if user === currentUser}
+            <span class="you-badge">You</span>
+          {/if}
+          {#if canRemoveUsers && user !== currentUser}
+            <button type="button" class="remove-user" on:click={() => removeUser(user)}>
+              Remove
+            </button>
+          {/if}
+        </div>
+      {/each}
+    </div>
+
+    <div class="add-user js-enhanced" style="display: none;">
+      <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>
+  {/if}
+</div>
+
+<style>
+  .form-section {
+    background: var(--nord6);
+    padding: 1.5rem;
+    border-radius: 0.75rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+  }
+
+  .form-section h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    color: var(--nord0);
+    font-size: 1.25rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .form-section {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+  }
+
+  .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: var(--nord5);
+    padding: 0.5rem 0.75rem;
+    border-radius: 1rem;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .user-item {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+  }
+
+  .user-item.with-profile {
+    gap: 0.75rem;
+  }
+
+  .user-item .username {
+    font-weight: 500;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .user-item .username {
+      color: var(--font-default-dark);
+    }
+  }
+
+  .you-badge {
+    background-color: var(--blue);
+    color: white;
+    padding: 0.125rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  .predefined-users {
+    background-color: var(--nord5);
+    padding: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .predefined-users {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+  }
+
+  .predefined-note {
+    margin: 0 0 1rem 0;
+    color: var(--nord2);
+    font-size: 0.9rem;
+    font-style: italic;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .predefined-note {
+      color: var(--nord4);
+    }
+  }
+
+  .remove-user {
+    background-color: var(--red);
+    color: white;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .remove-user:hover {
+    background-color: var(--nord11);
+    transform: translateY(-1px);
+  }
+
+  .add-user {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .add-user input {
+    flex: 1;
+    padding: 0.75rem;
+    border: 1px solid var(--nord4);
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    background-color: var(--nord6);
+    color: var(--nord0);
+    box-sizing: border-box;
+  }
+
+  .add-user input:focus {
+    outline: none;
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .add-user input {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+  }
+
+  .add-user button {
+    background-color: var(--blue);
+    color: white;
+    border: none;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .add-user button:hover {
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+  }
+</style>

src/lib/server/favorites.ts

@@ -24,6 +24,12 @@ export async function getUserFavorites(fetch: any, locals: any): Promise<string[
 }
 
 export function addFavoriteStatusToRecipes(recipes: any[], userFavorites: string[]): any[] {
+    // Safety check: ensure recipes is an array
+    if (!Array.isArray(recipes)) {
+        console.error('addFavoriteStatusToRecipes: recipes is not an array:', recipes);
+        return [];
+    }
+    
     return recipes.map(recipe => ({
         ...recipe,
         isFavorite: userFavorites.some(favId => favId.toString() === recipe._id.toString())

src/lib/utils/currency.ts

@@ -0,0 +1,94 @@
+import { ExchangeRate } from '../../models/ExchangeRate';
+import { dbConnect, dbDisconnect } from '../../utils/db';
+
+/**
+ * Convert amount from foreign currency to CHF using direct database/API access
+ */
+export async function convertToCHF(
+  amount: number,
+  fromCurrency: string,
+  date: string,
+  fetch?: typeof globalThis.fetch
+): Promise<{
+  convertedAmount: number;
+  exchangeRate: number;
+}> {
+  if (fromCurrency.toUpperCase() === 'CHF') {
+    return {
+      convertedAmount: amount,
+      exchangeRate: 1
+    };
+  }
+
+  const rate = await getExchangeRate(fromCurrency.toUpperCase(), date);
+
+  return {
+    convertedAmount: amount * rate,
+    exchangeRate: rate
+  };
+}
+
+/**
+ * Get exchange rate from database cache or fetch from API
+ */
+async function getExchangeRate(fromCurrency: string, date: string): Promise<number> {
+  const dateStr = date.split('T')[0]; // Extract YYYY-MM-DD
+  
+  await dbConnect();
+  
+  try {
+    // Try cache first
+    const cachedRate = await ExchangeRate.findOne({
+      fromCurrency,
+      toCurrency: 'CHF',
+      date: dateStr
+    });
+
+    if (cachedRate) {
+      return cachedRate.rate;
+    }
+
+    // Fetch from API
+    const rate = await fetchFromFrankfurterAPI(fromCurrency, dateStr);
+    
+    // Cache the result
+    await ExchangeRate.create({
+      fromCurrency,
+      toCurrency: 'CHF',
+      rate,
+      date: dateStr
+    });
+
+    return rate;
+  } finally {
+    await dbDisconnect();
+  }
+}
+
+/**
+ * Fetch exchange rate from Frankfurter API
+ */
+async function fetchFromFrankfurterAPI(fromCurrency: string, date: string): Promise<number> {
+  const url = `https://api.frankfurter.app/${date}?from=${fromCurrency}&to=CHF`;
+  
+  const response = await fetch(url);
+  
+  if (!response.ok) {
+    throw new Error(`Frankfurter API request failed: ${response.status}`);
+  }
+
+  const data = await response.json();
+  
+  if (!data.rates || !data.rates.CHF) {
+    throw new Error(`No exchange rate found for ${fromCurrency} to CHF on ${date}`);
+  }
+
+  return data.rates.CHF;
+}
+
+/**
+ * Validate currency code (3-letter ISO code)
+ */
+export function isValidCurrencyCode(currency: string): boolean {
+  return /^[A-Z]{3}$/.test(currency.toUpperCase());
+}

src/models/ExchangeRate.ts

@@ -0,0 +1,47 @@
+import mongoose from 'mongoose';
+
+export interface IExchangeRate {
+  _id?: string;
+  fromCurrency: string; // e.g., "USD"
+  toCurrency: string; // Always "CHF" for our use case
+  rate: number;
+  date: string; // Date in YYYY-MM-DD format
+  createdAt?: Date;
+  updatedAt?: Date;
+}
+
+const ExchangeRateSchema = new mongoose.Schema(
+  {
+    fromCurrency: {
+      type: String,
+      required: true,
+      uppercase: true,
+      trim: true
+    },
+    toCurrency: {
+      type: String,
+      required: true,
+      uppercase: true,
+      trim: true,
+      default: 'CHF'
+    },
+    rate: {
+      type: Number,
+      required: true,
+      min: 0
+    },
+    date: {
+      type: String,
+      required: true,
+      match: /^\d{4}-\d{2}-\d{2}$/
+    }
+  },
+  {
+    timestamps: true
+  }
+);
+
+// Create compound index for efficient lookups
+ExchangeRateSchema.index({ fromCurrency: 1, toCurrency: 1, date: 1 }, { unique: true });
+
+export const ExchangeRate = mongoose.model<IExchangeRate>("ExchangeRate", ExchangeRateSchema);

src/models/Payment.ts

@@ -4,8 +4,10 @@ export interface IPayment {
   _id?: string;
   title: string;
   description?: string;
-  amount: number;
-  currency: string;
+  amount: number; // Always in CHF (converted if necessary)
+  currency: string; // Currency code (CHF if no conversion, foreign currency if converted)
+  originalAmount?: number; // Amount in foreign currency (only if currency != CHF)
+  exchangeRate?: number; // Exchange rate used for conversion (only if currency != CHF)
   paidBy: string; // username/nickname of the person who paid
   date: Date;
   image?: string; // path to uploaded image
@@ -36,7 +38,17 @@ const PaymentSchema = new mongoose.Schema(
       type: String, 
       required: true, 
       default: 'CHF',
-      enum: ['CHF'] // For now only CHF as requested
+      uppercase: true
+    },
+    originalAmount: {
+      type: Number,
+      required: false,
+      min: 0
+    },
+    exchangeRate: {
+      type: Number,
+      required: false,
+      min: 0
     },
     paidBy: { 
       type: String, 

src/models/RecurringPayment.ts

@@ -4,16 +4,16 @@ export interface IRecurringPayment {
   _id?: string;
   title: string;
   description?: string;
-  amount: number;
-  currency: string;
+  amount: number; // Amount in the original currency
+  currency: string; // Original currency code
   paidBy: string; // username/nickname of the person who paid
   category: 'groceries' | 'shopping' | 'travel' | 'restaurant' | 'utilities' | 'fun' | 'settlement';
   splitMethod: 'equal' | 'full' | 'proportional' | 'personal_equal';
   splits: Array<{
     username: string;
-    amount?: number;
+    amount?: number; // Amount in original currency
     proportion?: number;
-    personalAmount?: number;
+    personalAmount?: number; // Amount in original currency
   }>;
   frequency: 'daily' | 'weekly' | 'monthly' | 'custom';
   cronExpression?: string; // For custom frequencies using cron syntax
@@ -47,7 +47,7 @@ const RecurringPaymentSchema = new mongoose.Schema(
       type: String,
       required: true,
       default: 'CHF',
-      enum: ['CHF']
+      uppercase: true
     },
     paidBy: {
       type: String,

src/routes/(main)/+page.svelte

@@ -114,7 +114,7 @@ section h2{
 		<h3>Suchmaschine</h3>
 	</a>
 
-	<a href="https://cloud.bocken.org/apps/cospend/">
+	<a href="cospend">
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>
 		<h3>Einkauf</h3>
 	</a>

src/routes/+error.svelte

@@ -0,0 +1,393 @@
+<script>
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+  import Header from '$lib/components/Header.svelte';
+
+  $: status = $page.status;
+  $: error = $page.error;
+
+  // Get session data if available (may not be available in error context)
+  $: session = $page.data?.session;
+  $: user = session?.user;
+
+  // Get Bible quote from SSR via handleError hook
+  $: bibleQuote = $page.error?.bibleQuote;
+
+  function getErrorTitle(status) {
+    switch (status) {
+      case 401:
+        return 'Anmeldung erforderlich';
+      case 403:
+        return 'Zugriff verweigert';
+      case 404:
+        return 'Seite nicht gefunden';
+      case 500:
+        return 'Serverfehler';
+      default:
+        return 'Fehler';
+    }
+  }
+
+  function getErrorDescription(status) {
+    switch (status) {
+      case 401:
+        return 'Du musst angemeldet sein, um auf diese Seite zugreifen zu können.';
+      case 403:
+        return 'Du hast keine Berechtigung für diesen Bereich.';
+      case 404:
+        return 'Die angeforderte Seite konnte nicht gefunden werden.';
+      case 500:
+        return 'Es ist ein unerwarteter Fehler aufgetreten. Bitte versuche es später erneut.';
+      default:
+        return 'Es ist ein unerwarteter Fehler aufgetreten.';
+    }
+  }
+
+  function getErrorIcon(status) {
+    switch (status) {
+      case 401:
+        return '🔐';
+      case 403:
+        return '🚫';
+      case 404:
+        return '🔍';
+      case 500:
+        return '⚠️';
+      default:
+        return '❌';
+    }
+  }
+
+  function goHome() {
+    goto('/');
+  }
+
+  function goBack() {
+    if (window.history.length > 1) {
+      window.history.back();
+    } else {
+      goto('/');
+    }
+  }
+
+  function login() {
+    goto('/login');
+  }
+</script>
+
+<svelte:head>
+  <title>{getErrorTitle(status)} - Alexander's Website</title>
+</svelte:head>
+
+<Header>
+  <ul class="site_header" slot="links">
+  </ul>
+
+  <main class="error-page">
+    <div class="error-container">
+      <div class="error-icon">
+        {getErrorIcon(status)}
+      </div>
+
+      <h1 class="error-title">
+        {getErrorTitle(status)}
+      </h1>
+
+      <div class="error-code">
+        Fehler {status}
+      </div>
+
+      <p class="error-description">
+        {getErrorDescription(status)}
+      </p>
+
+      {#if error?.details}
+        <div class="error-details">
+          {error.details}
+        </div>
+      {/if}
+
+      <div class="error-actions">
+        {#if status === 401}
+          <button class="btn btn-primary" on:click={login}>
+            Anmelden
+          </button>
+          <button class="btn btn-secondary" on:click={goHome}>
+            Zur Startseite
+          </button>
+        {:else if status === 403}
+          <button class="btn btn-primary" on:click={goHome}>
+            Zur Startseite
+          </button>
+          <button class="btn btn-secondary" on:click={goBack}>
+            Zurück
+          </button>
+        {:else if status === 404}
+          <button class="btn btn-primary" on:click={goHome}>
+            Zur Startseite
+          </button>
+          <button class="btn btn-secondary" on:click={goBack}>
+            Zurück
+          </button>
+        {:else if status === 500}
+          <button class="btn btn-primary" on:click={goHome}>
+            Zur Startseite
+          </button>
+          <button class="btn btn-secondary" on:click={goBack}>
+            Erneut versuchen
+          </button>
+        {:else}
+          <button class="btn btn-primary" on:click={goHome}>
+            Zur Startseite
+          </button>
+          <button class="btn btn-secondary" on:click={goBack}>
+            Zurück
+          </button>
+        {/if}
+      </div>
+
+      <!-- Bible Quote Section -->
+      {#if bibleQuote}
+        <div class="bible-quote">
+          <div class="quote-text">
+            „{bibleQuote.text}"
+          </div>
+          <div class="quote-reference">
+            — {bibleQuote.reference}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </main>
+</Header>
+
+<style>
+  .error-page {
+    min-height: calc(100vh - 6rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fbf9f3;
+    padding: 2rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error-page {
+      background: var(--background-dark);
+    }
+  }
+
+  .error-container {
+    background: var(--nord5);
+    border-radius: 1rem;
+    padding: 3rem;
+    max-width: 600px;
+    width: 100%;
+    text-align: center;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error-container {
+      background: var(--nord1);
+      border-color: var(--nord2);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .error-icon {
+    font-size: 4rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.8;
+  }
+
+  .error-title {
+    font-size: 2.5rem;
+    color: var(--nord0);
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error-title {
+      color: var(--nord6);
+    }
+  }
+
+  .error-code {
+    font-size: 1.2rem;
+    color: var(--nord3);
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    opacity: 0.8;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error-code {
+      color: var(--nord4);
+    }
+  }
+
+  .error-description {
+    font-size: 1.1rem;
+    color: var(--nord2);
+    margin-bottom: 1rem;
+    line-height: 1.6;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error-description {
+      color: var(--nord5);
+    }
+  }
+
+  .error-details {
+    background: var(--nord4);
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin: 1.5rem 0;
+    font-size: 0.9rem;
+    color: var(--nord0);
+    border-left: 4px solid var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error-details {
+      background: var(--nord2);
+      color: var(--nord6);
+    }
+  }
+
+  .error-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin: 2rem 0;
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 1rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, var(--blue), var(--lightblue));
+    color: white;
+  }
+
+  .btn-primary:hover {
+    background: linear-gradient(135deg, var(--lightblue), var(--blue));
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(94, 129, 172, 0.3);
+  }
+
+  .btn-secondary {
+    background: var(--nord4);
+    color: var(--nord0);
+    border: 1px solid var(--nord3);
+  }
+
+  .btn-secondary:hover {
+    background: var(--nord3);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background: var(--nord2);
+      color: var(--nord6);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background: var(--nord3);
+    }
+  }
+
+
+  .bible-quote {
+    margin: 2.5rem 0;
+    padding: 2rem;
+    background: linear-gradient(135deg, var(--nord5), var(--nord4));
+    border-radius: 0.75rem;
+    border-left: 4px solid var(--blue);
+    font-style: italic;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .bible-quote {
+      background: linear-gradient(135deg, var(--nord2), var(--nord3));
+    }
+  }
+
+  .quote-text {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: var(--nord0);
+    margin-bottom: 1rem;
+    text-align: left;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .quote-text {
+      color: var(--nord6);
+    }
+  }
+
+  .quote-reference {
+    font-size: 0.9rem;
+    color: var(--nord2);
+    font-weight: 600;
+    text-align: right;
+    font-style: normal;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .quote-reference {
+      color: var(--nord4);
+    }
+  }
+
+
+  @media (max-width: 600px) {
+    .error-container {
+      padding: 2rem;
+      margin: 1rem;
+    }
+
+    .error-title {
+      font-size: 2rem;
+    }
+
+    .error-actions {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .btn {
+      width: 100%;
+      max-width: 250px;
+    }
+
+
+    .bible-quote {
+      padding: 1.5rem;
+    }
+
+    .quote-text {
+      font-size: 1rem;
+    }
+  }
+</style>

src/routes/api/bible-quote/+server.ts

@@ -0,0 +1,73 @@
+import { json, error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+interface BibleVerse {
+  bookName: string;
+  abbreviation: string;
+  chapter: number;
+  verse: number;
+  verseNumber: number;
+  text: string;
+}
+
+// Cache for parsed verses to avoid reading file repeatedly
+let cachedVerses: BibleVerse[] | null = null;
+
+async function loadVerses(fetch: typeof globalThis.fetch): Promise<BibleVerse[]> {
+  if (cachedVerses) {
+    return cachedVerses;
+  }
+
+  try {
+    const response = await fetch('/allioli.tsv');
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const content = await response.text();
+    const lines = content.trim().split('\n');
+    
+    cachedVerses = lines.map(line => {
+      const [bookName, abbreviation, chapter, verse, verseNumber, text] = line.split('\t');
+      return {
+        bookName,
+        abbreviation, 
+        chapter: parseInt(chapter),
+        verse: parseInt(verse),
+        verseNumber: parseInt(verseNumber),
+        text
+      };
+    });
+
+    return cachedVerses;
+  } catch (err) {
+    console.error('Error loading Bible verses:', err);
+    throw new Error('Failed to load Bible verses');
+  }
+}
+
+function getRandomVerse(verses: BibleVerse[]): BibleVerse {
+  const randomIndex = Math.floor(Math.random() * verses.length);
+  return verses[randomIndex];
+}
+
+function formatVerse(verse: BibleVerse): string {
+  return `${verse.bookName} ${verse.chapter}:${verse.verseNumber}`;
+}
+
+export const GET: RequestHandler = async ({ fetch }) => {
+  try {
+    const verses = await loadVerses(fetch);
+    const randomVerse = getRandomVerse(verses);
+    
+    return json({
+      text: randomVerse.text,
+      reference: formatVerse(randomVerse),
+      book: randomVerse.bookName,
+      chapter: randomVerse.chapter,
+      verse: randomVerse.verseNumber
+    });
+  } catch (err) {
+    console.error('Error fetching random Bible verse:', err);
+    return error(500, 'Failed to fetch Bible verse');
+  }
+};

src/routes/api/cospend/balance/+server.ts

@@ -1,7 +1,7 @@
 import type { RequestHandler } from '@sveltejs/kit';
 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 { dbConnect } from '../../../../utils/db';
 import { error, json } from '@sveltejs/kit';
 
 export const GET: RequestHandler = async ({ locals, url }) => {
@@ -94,7 +94,5 @@ export const GET: RequestHandler = async ({ locals, url }) => {
   } catch (e) {
     console.error('Error calculating balance:', e);
     throw error(500, 'Failed to calculate balance');
-  } finally {
-    await dbDisconnect();
   }
 };

src/routes/api/cospend/debts/+server.ts

@@ -1,7 +1,7 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { PaymentSplit } from '../../../../models/PaymentSplit';
 import { Payment } from '../../../../models/Payment';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
 import { error, json } from '@sveltejs/kit';
 
 interface DebtSummary {
@@ -105,6 +105,6 @@ export const GET: RequestHandler = async ({ locals }) => {
     console.error('Error calculating debt breakdown:', e);
     throw error(500, 'Failed to calculate debt breakdown');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };

src/routes/api/cospend/exchange-rates/+server.ts

@@ -0,0 +1,115 @@
+import type { RequestHandler } from '@sveltejs/kit';
+import { ExchangeRate } from '../../../../models/ExchangeRate';
+import { dbConnect } 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 fromCurrency = url.searchParams.get('from')?.toUpperCase();
+  const date = url.searchParams.get('date');
+  const action = url.searchParams.get('action') || 'rate';
+
+  if (action === 'currencies') {
+    return await getSupportedCurrencies();
+  }
+
+  if (!fromCurrency || !date) {
+    throw error(400, 'Missing required parameters: from and date');
+  }
+
+  if (!isValidCurrencyCode(fromCurrency)) {
+    throw error(400, 'Invalid currency code');
+  }
+
+  try {
+    const rate = await getExchangeRate(fromCurrency, date);
+    return json({ rate, fromCurrency, toCurrency: 'CHF', date });
+  } catch (e) {
+    console.error('Error getting exchange rate:', e);
+    throw error(500, 'Failed to get exchange rate');
+  }
+};
+
+async function getExchangeRate(fromCurrency: string, date: string): Promise<number> {
+  if (fromCurrency === 'CHF') {
+    return 1;
+  }
+
+  const dateStr = date.split('T')[0]; // Extract YYYY-MM-DD
+  
+  await dbConnect();
+  
+  try {
+    // Try cache first
+    const cachedRate = await ExchangeRate.findOne({
+      fromCurrency,
+      toCurrency: 'CHF',
+      date: dateStr
+    });
+
+    if (cachedRate) {
+      return cachedRate.rate;
+    }
+
+    // Fetch from API
+    const rate = await fetchFromFrankfurterAPI(fromCurrency, dateStr);
+    
+    // Cache the result
+    await ExchangeRate.create({
+      fromCurrency,
+      toCurrency: 'CHF',
+      rate,
+      date: dateStr
+    });
+
+    return rate;
+  } finally {
+    // Connection will be reused
+  }
+}
+
+async function fetchFromFrankfurterAPI(fromCurrency: string, date: string): Promise<number> {
+  const url = `https://api.frankfurter.app/${date}?from=${fromCurrency}&to=CHF`;
+  
+  const response = await fetch(url);
+  
+  if (!response.ok) {
+    throw new Error(`Frankfurter API request failed: ${response.status}`);
+  }
+
+  const data = await response.json();
+  
+  if (!data.rates || !data.rates.CHF) {
+    throw new Error(`No exchange rate found for ${fromCurrency} to CHF on ${date}`);
+  }
+
+  return data.rates.CHF;
+}
+
+async function getSupportedCurrencies() {
+  try {
+    const response = await fetch('https://api.frankfurter.app/currencies');
+    
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.status}`);
+    }
+
+    const data = await response.json();
+    const currencies = Object.keys(data);
+    
+    return json({ currencies });
+  } catch (e) {
+    console.error('Error fetching supported currencies:', e);
+    // Return common currencies as fallback
+    const fallbackCurrencies = ['EUR', 'USD', 'GBP', 'JPY', 'CAD', 'AUD', 'SEK', 'NOK', 'DKK'];
+    return json({ currencies: fallbackCurrencies });
+  }
+}
+
+function isValidCurrencyCode(currency: string): boolean {
+  return /^[A-Z]{3}$/.test(currency);
+}

src/routes/api/cospend/monthly-expenses/+server.ts

@@ -0,0 +1,145 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { Payment } from '../../../../models/Payment';
+import { dbConnect } from '../../../../utils/db';
+
+export const GET: RequestHandler = async ({ url, locals }) => {
+  const session = await locals.auth();
+
+  if (!session || !session.user?.nickname) {
+    return json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  await dbConnect();
+
+  try {
+
+    // Get query parameters for date range (default to last 12 months)
+    const monthsBack = parseInt(url.searchParams.get('months') || '12');
+    const endDate = new Date();
+    const startDate = new Date();
+    startDate.setMonth(startDate.getMonth() - monthsBack);
+
+    const totalPayments = await Payment.countDocuments();
+    const paymentsInRange = await Payment.countDocuments({
+      date: {
+        $gte: startDate,
+        $lte: endDate
+      }
+    });
+    const expensePayments = await Payment.countDocuments({
+      date: {
+        $gte: startDate,
+        $lte: endDate
+      },
+      category: { $ne: 'settlement' }
+    });
+
+    // Aggregate payments by month and category
+    const pipeline = [
+      {
+        $match: {
+          date: {
+            $gte: startDate,
+            $lte: endDate
+          },
+          // Exclude settlements - only show actual expenses
+          category: { $ne: 'settlement' },
+        }
+      },
+      {
+        $addFields: {
+          // Extract year-month from date
+          yearMonth: {
+            $dateToString: {
+              format: '%Y-%m',
+              date: '$date'
+            }
+          }
+        }
+      },
+      {
+        $group: {
+          _id: {
+            yearMonth: '$yearMonth',
+            category: '$category'
+          },
+          totalAmount: { $sum: '$amount' },
+          count: { $sum: 1 }
+        }
+      },
+      {
+        $sort: {
+          '_id.yearMonth': 1,
+          '_id.category': 1
+        }
+      }
+    ];
+
+    const results = await Payment.aggregate(pipeline);
+    console.log('Aggregation results:', results);
+
+    // Transform data into chart-friendly format
+    const monthsMap = new Map();
+    const categories = new Set();
+
+    // Initialize months
+    for (let i = 0; i < monthsBack; i++) {
+      const date = new Date();
+      date.setMonth(date.getMonth() - monthsBack + i + 1);
+      const yearMonth = date.toISOString().substring(0, 7);
+      monthsMap.set(yearMonth, {});
+    }
+
+    // Populate data
+    results.forEach((result: any) => {
+      const { yearMonth, category } = result._id;
+      const amount = result.totalAmount;
+
+      categories.add(category);
+
+      if (!monthsMap.has(yearMonth)) {
+        monthsMap.set(yearMonth, {});
+      }
+
+      monthsMap.get(yearMonth)[category] = amount;
+    });
+
+    // Convert to arrays for Chart.js
+    const allMonths = Array.from(monthsMap.keys()).sort();
+    const categoryList = Array.from(categories).sort();
+
+    // Find the first month with any data and trim empty months from the start
+    let firstMonthWithData = 0;
+    for (let i = 0; i < allMonths.length; i++) {
+      const monthData = monthsMap.get(allMonths[i]);
+      const hasData = Object.values(monthData).some(value => value > 0);
+      if (hasData) {
+        firstMonthWithData = i;
+        break;
+      }
+    }
+
+    // Trim the months array to start from the first month with data
+    const months = allMonths.slice(firstMonthWithData);
+
+    const datasets = categoryList.map((category: string) => ({
+      label: category,
+      data: months.map(month => monthsMap.get(month)[category] || 0)
+    }));
+
+    return json({
+      labels: months.map(month => {
+        const [year, monthNum] = month.split('-');
+        const date = new Date(parseInt(year), parseInt(monthNum) - 1);
+        return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+      }),
+      datasets,
+      categories: categoryList
+    });
+
+  } catch (error) {
+    console.error('Error fetching monthly expenses:', error);
+    return json({ error: 'Failed to fetch monthly expenses' }, { status: 500 });
+  }
+};

src/routes/api/cospend/payments/+server.ts

@@ -1,7 +1,8 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { Payment } from '../../../../models/Payment';
 import { PaymentSplit } from '../../../../models/PaymentSplit';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
+import { convertToCHF, isValidCurrencyCode } from '../../../../lib/utils/currency';
 import { error, json } from '@sveltejs/kit';
 
 export const GET: RequestHandler = async ({ locals, url }) => {
@@ -27,7 +28,7 @@ export const GET: RequestHandler = async ({ locals, url }) => {
   } catch (e) {
     throw error(500, 'Failed to fetch payments');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };
 
@@ -38,7 +39,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   }
 
   const data = await request.json();
-  const { title, description, amount, paidBy, date, image, category, splitMethod, splits } = data;
+  const { title, description, amount, currency, paidBy, date, image, category, splitMethod, splits } = data;
 
   if (!title || !amount || !paidBy || !splitMethod || !splits) {
     throw error(400, 'Missing required fields');
@@ -56,6 +57,12 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     throw error(400, 'Invalid category');
   }
 
+  // Validate currency if provided
+  const inputCurrency = currency?.toUpperCase() || 'CHF';
+  if (currency && !isValidCurrencyCode(inputCurrency)) {
+    throw error(400, 'Invalid currency code');
+  }
+
   // Validate personal + equal split method
   if (splitMethod === 'personal_equal' && splits) {
     const totalPersonal = splits.reduce((sum: number, split: any) => {
@@ -67,30 +74,66 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     }
   }
 
+  const paymentDate = date ? new Date(date) : new Date();
+  let finalAmount = amount;
+  let originalAmount: number | undefined;
+  let exchangeRate: number | undefined;
+
+  // Convert currency if not CHF
+  if (inputCurrency !== 'CHF') {
+    try {
+      const conversion = await convertToCHF(amount, inputCurrency, paymentDate.toISOString());
+      finalAmount = conversion.convertedAmount;
+      originalAmount = amount;
+      exchangeRate = conversion.exchangeRate;
+    } catch (e) {
+      console.error('Currency conversion error:', e);
+      throw error(400, `Failed to convert ${inputCurrency} to CHF: ${e.message}`);
+    }
+  }
+
   await dbConnect();
   
   try {
     const payment = await Payment.create({
       title,
       description,
-      amount,
-      currency: 'CHF',
+      amount: finalAmount,
+      currency: inputCurrency,
+      originalAmount,
+      exchangeRate,
       paidBy,
-      date: date ? new Date(date) : new Date(),
+      date: paymentDate,
       image,
       category: category || 'groceries',
       splitMethod,
       createdBy: auth.user.nickname
     });
 
-    const splitPromises = splits.map((split: any) => {
-      return PaymentSplit.create({
+    // Convert split amounts to CHF if needed
+    const convertedSplits = splits.map((split: any) => {
+      let convertedAmount = split.amount;
+      let convertedPersonalAmount = split.personalAmount;
+      
+      // Convert amounts if we have a foreign currency
+      if (inputCurrency !== 'CHF' && exchangeRate) {
+        convertedAmount = split.amount * exchangeRate;
+        if (split.personalAmount) {
+          convertedPersonalAmount = split.personalAmount * exchangeRate;
+        }
+      }
+      
+      return {
         paymentId: payment._id,
         username: split.username,
-        amount: split.amount,
+        amount: convertedAmount,
         proportion: split.proportion,
-        personalAmount: split.personalAmount
-      });
+        personalAmount: convertedPersonalAmount
+      };
+    });
+
+    const splitPromises = convertedSplits.map((split) => {
+      return PaymentSplit.create(split);
     });
 
     await Promise.all(splitPromises);
@@ -104,6 +147,6 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     console.error('Error creating payment:', e);
     throw error(500, 'Failed to create payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };

src/routes/api/cospend/payments/[id]/+server.ts

@@ -1,7 +1,7 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { Payment } from '../../../../../models/Payment';
 import { PaymentSplit } from '../../../../../models/PaymentSplit';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import { error, json } from '@sveltejs/kit';
 
 export const GET: RequestHandler = async ({ params, locals }) => {
@@ -26,7 +26,7 @@ export const GET: RequestHandler = async ({ params, locals }) => {
     if (e.status === 404) throw e;
     throw error(500, 'Failed to fetch payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };
 
@@ -88,7 +88,7 @@ export const PUT: RequestHandler = async ({ params, request, locals }) => {
     if (e.status) throw e;
     throw error(500, 'Failed to update payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };
 
@@ -121,6 +121,6 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
     if (e.status) throw e;
     throw error(500, 'Failed to delete payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };

src/routes/api/cospend/recurring-payments/+server.ts

@@ -1,6 +1,6 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { RecurringPayment } from '../../../../models/RecurringPayment';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
 import { error, json } from '@sveltejs/kit';
 import { calculateNextExecutionDate, validateCronExpression } from '../../../../lib/utils/recurring';
 
@@ -33,7 +33,7 @@ export const GET: RequestHandler = async ({ locals, url }) => {
     console.error('Error fetching recurring payments:', e);
     throw error(500, 'Failed to fetch recurring payments');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };
 
@@ -134,6 +134,6 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     console.error('Error creating recurring payment:', e);
     throw error(500, 'Failed to create recurring payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };

src/routes/api/cospend/recurring-payments/[id]/+server.ts

@@ -1,6 +1,6 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { RecurringPayment } from '../../../../../models/RecurringPayment';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import { error, json } from '@sveltejs/kit';
 import { calculateNextExecutionDate, validateCronExpression } from '../../../../../lib/utils/recurring';
 import mongoose from 'mongoose';
@@ -30,7 +30,7 @@ export const GET: RequestHandler = async ({ params, locals }) => {
     console.error('Error fetching recurring payment:', e);
     throw error(500, 'Failed to fetch recurring payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };
 
@@ -149,7 +149,7 @@ export const PUT: RequestHandler = async ({ params, request, locals }) => {
     }
     throw error(500, 'Failed to update recurring payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };
 
@@ -179,6 +179,6 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
     console.error('Error deleting recurring payment:', e);
     throw error(500, 'Failed to delete recurring payment');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };

src/routes/api/cospend/recurring-payments/cron-execute/+server.ts

@@ -2,7 +2,7 @@ import type { RequestHandler } from '@sveltejs/kit';
 import { RecurringPayment } from '../../../../../models/RecurringPayment';
 import { Payment } from '../../../../../models/Payment';
 import { PaymentSplit } from '../../../../../models/PaymentSplit';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import { error, json } from '@sveltejs/kit';
 import { calculateNextExecutionDate } from '../../../../../lib/utils/recurring';
 
@@ -119,6 +119,6 @@ export const POST: RequestHandler = async ({ request }) => {
     console.error('[Cron] Error executing recurring payments:', e);
     throw error(500, 'Failed to execute recurring payments');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };

src/routes/api/cospend/recurring-payments/execute/+server.ts

@@ -2,9 +2,10 @@ import type { RequestHandler } from '@sveltejs/kit';
 import { RecurringPayment } from '../../../../../models/RecurringPayment';
 import { Payment } from '../../../../../models/Payment';
 import { PaymentSplit } from '../../../../../models/PaymentSplit';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import { error, json } from '@sveltejs/kit';
 import { calculateNextExecutionDate } from '../../../../../lib/utils/recurring';
+import { convertToCHF } from '../../../../../lib/utils/currency';
 
 export const POST: RequestHandler = async ({ locals }) => {
   const auth = await locals.auth();
@@ -32,12 +33,35 @@ export const POST: RequestHandler = async ({ locals }) => {
 
     for (const recurringPayment of duePayments) {
       try {
+        // Handle currency conversion for execution date
+        let finalAmount = recurringPayment.amount;
+        let originalAmount: number | undefined;
+        let exchangeRate: number | undefined;
+
+        if (recurringPayment.currency !== 'CHF') {
+          try {
+            const conversion = await convertToCHF(
+              recurringPayment.amount, 
+              recurringPayment.currency, 
+              now.toISOString()
+            );
+            finalAmount = conversion.convertedAmount;
+            originalAmount = recurringPayment.amount;
+            exchangeRate = conversion.exchangeRate;
+          } catch (conversionError) {
+            console.error(`Currency conversion failed for recurring payment ${recurringPayment._id}:`, conversionError);
+            // Continue with original amount if conversion fails
+          }
+        }
+
         // Create the payment
         const payment = await Payment.create({
           title: recurringPayment.title,
           description: recurringPayment.description,
-          amount: recurringPayment.amount,
+          amount: finalAmount,
           currency: recurringPayment.currency,
+          originalAmount,
+          exchangeRate,
           paidBy: recurringPayment.paidBy,
           date: now,
           category: recurringPayment.category,
@@ -45,15 +69,31 @@ export const POST: RequestHandler = async ({ locals }) => {
           createdBy: recurringPayment.createdBy
         });
 
-        // Create payment splits
-        const splitPromises = recurringPayment.splits.map((split) => {
-          return PaymentSplit.create({
+        // Convert split amounts to CHF if needed
+        const convertedSplits = recurringPayment.splits.map((split) => {
+          let convertedAmount = split.amount || 0;
+          let convertedPersonalAmount = split.personalAmount;
+          
+          // Convert amounts if we have a foreign currency and exchange rate
+          if (recurringPayment.currency !== 'CHF' && exchangeRate && split.amount) {
+            convertedAmount = split.amount * exchangeRate;
+            if (split.personalAmount) {
+              convertedPersonalAmount = split.personalAmount * exchangeRate;
+            }
+          }
+          
+          return {
             paymentId: payment._id,
             username: split.username,
-            amount: split.amount,
+            amount: convertedAmount,
             proportion: split.proportion,
-            personalAmount: split.personalAmount
-          });
+            personalAmount: convertedPersonalAmount
+          };
+        });
+
+        // Create payment splits
+        const splitPromises = convertedSplits.map((split) => {
+          return PaymentSplit.create(split);
         });
 
         await Promise.all(splitPromises);
@@ -99,6 +139,6 @@ export const POST: RequestHandler = async ({ locals }) => {
     console.error('Error executing recurring payments:', e);
     throw error(500, 'Failed to execute recurring payments');
   } finally {
-    await dbDisconnect();
+    // Connection will be reused
   }
 };

src/routes/api/rezepte/add/+server.ts

@@ -1,6 +1,6 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
 import { error } from '@sveltejs/kit';
 // header: use for bearer token for now
 // recipe json in body
@@ -22,7 +22,6 @@ export const POST: RequestHandler = async ({request, cookies, locals}) => {
 	} catch(e){
       		throw error(400, e)
       	}
-	await dbDisconnect();
       	return new Response(JSON.stringify({msg: "Added recipe successfully"}),{
       		    status: 200,
 	});

src/routes/api/rezepte/delete/+server.ts

@@ -1,6 +1,6 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
 import type {RecipeModelType} from '../../../../types/types';
 import { error } from '@sveltejs/kit';
 // header: use for bearer token for now
@@ -14,7 +14,6 @@ export const POST: RequestHandler = async ({request, locals}) => {
   	const short_name = message.old_short_name
 	await dbConnect();
 	await Recipe.findOneAndDelete({short_name: short_name});
-  	await dbDisconnect();
 	return new Response(JSON.stringify({msg: "Deleted recipe successfully"}),{
 			    status: 200,
   	});

src/routes/api/rezepte/edit/+server.ts

@@ -1,6 +1,6 @@
 import type { RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
 import type {RecipeModelType} from '../../../../types/types';
 import { error } from '@sveltejs/kit';
 // header: use for bearer token for now
@@ -15,7 +15,6 @@ export const POST: RequestHandler = async ({request, locals}) => {
   else{
 	await dbConnect();
 	await Recipe.findOneAndUpdate({short_name: message.old_short_name }, recipe_json);
-  	await dbDisconnect();
 	return new Response(JSON.stringify({msg: "Edited recipe successfully"}),{
 			    status: 200,
   	});

src/routes/api/rezepte/favorites/+server.ts

@@ -1,7 +1,7 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { UserFavorites } from '../../../../models/UserFavorites';
 import { Recipe } from '../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
 import { error } from '@sveltejs/kit';
 import mongoose from 'mongoose';
 
@@ -19,13 +19,11 @@ export const GET: RequestHandler = async ({ locals }) => {
       username: session.user.nickname 
     }).lean();
     
-    await dbDisconnect();
     
     return json({
       favorites: userFavorites?.favorites || []
     });
   } catch (e) {
-    await dbDisconnect();
     throw error(500, 'Failed to fetch favorites');
   }
 };
@@ -49,8 +47,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     // Validate that the recipe exists and get its ObjectId
     const recipe = await Recipe.findOne({ short_name: recipeId });
     if (!recipe) {
-      await dbDisconnect();
-      throw error(404, 'Recipe not found');
+        throw error(404, 'Recipe not found');
     }
     
     await UserFavorites.findOneAndUpdate(
@@ -59,11 +56,9 @@ export const POST: RequestHandler = async ({ request, locals }) => {
       { upsert: true, new: true }
     );
     
-    await dbDisconnect();
     
     return json({ success: true });
   } catch (e) {
-    await dbDisconnect();
     if (e instanceof Error && e.message.includes('404')) {
       throw e;
     }
@@ -90,8 +85,7 @@ export const DELETE: RequestHandler = async ({ request, locals }) => {
     // Find the recipe's ObjectId
     const recipe = await Recipe.findOne({ short_name: recipeId });
     if (!recipe) {
-      await dbDisconnect();
-      throw error(404, 'Recipe not found');
+        throw error(404, 'Recipe not found');
     }
     
     await UserFavorites.findOneAndUpdate(
@@ -99,11 +93,9 @@ export const DELETE: RequestHandler = async ({ request, locals }) => {
       { $pull: { favorites: recipe._id } }
     );
     
-    await dbDisconnect();
     
     return json({ success: true });
   } catch (e) {
-    await dbDisconnect();
     if (e instanceof Error && e.message.includes('404')) {
       throw e;
     }

src/routes/api/rezepte/favorites/check/[shortName]/+server.ts

@@ -1,7 +1,7 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { UserFavorites } from '../../../../../../models/UserFavorites';
 import { Recipe } from '../../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../../utils/db';
+import { dbConnect } from '../../../../../../utils/db';
 import { error } from '@sveltejs/kit';
 
 export const GET: RequestHandler = async ({ locals, params }) => {
@@ -17,7 +17,6 @@ export const GET: RequestHandler = async ({ locals, params }) => {
     // Find the recipe by short_name to get its ObjectId
     const recipe = await Recipe.findOne({ short_name: params.shortName });
     if (!recipe) {
-      await dbDisconnect();
       throw error(404, 'Recipe not found');
     }
     
@@ -27,13 +26,11 @@ export const GET: RequestHandler = async ({ locals, params }) => {
       favorites: recipe._id
     }).lean();
     
-    await dbDisconnect();
     
     return json({
       isFavorite: !!userFavorites
     });
   } catch (e) {
-    await dbDisconnect();
     if (e instanceof Error && e.message.includes('404')) {
       throw e;
     }

src/routes/api/rezepte/favorites/recipes/+server.ts

@@ -1,7 +1,7 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { UserFavorites } from '../../../../../models/UserFavorites';
 import { Recipe } from '../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import type { RecipeModelType } from '../../../../../types/types';
 import { error } from '@sveltejs/kit';
 
@@ -20,7 +20,6 @@ export const GET: RequestHandler = async ({ locals }) => {
     }).lean();
     
     if (!userFavorites?.favorites?.length) {
-      await dbDisconnect();
       return json([]);
     }
     
@@ -28,13 +27,11 @@ export const GET: RequestHandler = async ({ locals }) => {
       _id: { $in: userFavorites.favorites }
     }).lean() as RecipeModelType[];
     
-    await dbDisconnect();
     
     recipes = JSON.parse(JSON.stringify(recipes));
     
     return json(recipes);
   } catch (e) {
-    await dbDisconnect();
     throw error(500, 'Failed to fetch favorite recipes');
   }
 };

src/routes/api/rezepte/items/[name]/+server.ts

@@ -1,13 +1,12 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import type {RecipeModelType} from '../../../../../types/types';
 import { error } from '@sveltejs/kit';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let recipe = (await Recipe.findOne({ short_name: params.name}).lean()) as RecipeModelType[];
-  await dbDisconnect();
 
   recipe = JSON.parse(JSON.stringify(recipe));
   if(recipe == null){

src/routes/api/rezepte/items/all_brief/+server.ts

@@ -1,12 +1,11 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import type { BriefRecipeType } from '../../../../../types/types';
 import { Recipe } from '../../../../../models/Recipe'
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import { rand_array } from '$lib/js/randomize';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let found_brief = rand_array(await Recipe.find({}, 'name short_name tags category icon description season dateModified').lean()) as BriefRecipeType[];
-  await dbDisconnect();
   return json(JSON.parse(JSON.stringify(found_brief)));
 };

src/routes/api/rezepte/items/category/+server.ts

@@ -1,12 +1,11 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import type {BriefRecipeType} from '../../../../../types/types';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let categories = (await Recipe.distinct('category').lean());
-  await dbDisconnect();
 
   categories= JSON.parse(JSON.stringify(categories));
   return json(categories);

src/routes/api/rezepte/items/category/[category]/+server.ts

@@ -1,13 +1,12 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../../utils/db';
+import { dbConnect } from '../../../../../../utils/db';
 import type {BriefRecipeType} from '../../../../../../types/types';
 import { rand_array } from '$lib/js/randomize';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let recipes = rand_array(await Recipe.find({category: params.category}, 'name short_name images tags category icon description season dateModified').lean()) as BriefRecipeType[];
-  await dbDisconnect();
 
   recipes = JSON.parse(JSON.stringify(recipes));
   return json(recipes);

src/routes/api/rezepte/items/icon/+server.ts

@@ -1,12 +1,11 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import type {BriefRecipeType} from '../../../../../types/types';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let icons = (await Recipe.distinct('icon').lean());
-  await dbDisconnect();
 
   icons = JSON.parse(JSON.stringify(icons));
   return json(icons);

src/routes/api/rezepte/items/icon/[icon]/+server.ts

@@ -1,13 +1,12 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../../utils/db';
+import { dbConnect } from '../../../../../../utils/db';
 import type {BriefRecipeType} from '../../../../../../types/types';
 import { rand_array } from '$lib/js/randomize';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let recipes = rand_array(await Recipe.find({icon: params.icon}, 'name short_name images tags category icon description season dateModified').lean()) as BriefRecipeType[];
-  await dbDisconnect();
 
   recipes = JSON.parse(JSON.stringify(recipes));
   return json(recipes);

src/routes/api/rezepte/items/in_season/[month]/+server.ts

@@ -1,13 +1,12 @@
 import type {rand_array} from '$lib/js/randomize';
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../../models/Recipe'
-import { dbConnect, dbDisconnect } from '../../../../../../utils/db';
+import { dbConnect } from '../../../../../../utils/db';
 import { rand_array } from '$lib/js/randomize';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let found_in_season = rand_array(await Recipe.find({season: params.month, icon: {$ne: "🍽️"}}, 'name short_name images tags category icon description season dateModified').lean());
-  await dbDisconnect();
   found_in_season = JSON.parse(JSON.stringify(found_in_season));
   return json(found_in_season);
 };

src/routes/api/rezepte/items/tag/+server.ts

@@ -1,12 +1,11 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import type {BriefRecipeType} from '../../../../../types/types';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let categories = (await Recipe.distinct('tags').lean());
-  await dbDisconnect();
 
   categories= JSON.parse(JSON.stringify(categories));
   return json(categories);

src/routes/api/rezepte/items/tag/[tag]/+server.ts

@@ -1,13 +1,12 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../../utils/db';
+import { dbConnect } from '../../../../../../utils/db';
 import type {BriefRecipeType} from '../../../../../../types/types';
 import { rand_array } from '$lib/js/randomize';
 
 export const GET: RequestHandler = async ({params}) => {
   await dbConnect();
   let recipes = rand_array(await Recipe.find({tags: params.tag}, 'name short_name images tags category icon description season dateModified').lean()) as BriefRecipeType[];
-  await dbDisconnect();
 
   recipes = JSON.parse(JSON.stringify(recipes));
   return json(recipes);

src/routes/api/rezepte/json-ld/[name]/+server.ts

@@ -1,6 +1,6 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import { Recipe } from '../../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../../utils/db';
+import { dbConnect } from '../../../../../utils/db';
 import { generateRecipeJsonLd } from '$lib/js/recipeJsonLd';
 import type { RecipeModelType } from '../../../../../types/types';
 import { error } from '@sveltejs/kit';
@@ -8,7 +8,6 @@ import { error } from '@sveltejs/kit';
 export const GET: RequestHandler = async ({ params, setHeaders }) => {
   await dbConnect();
   let recipe = (await Recipe.findOne({ short_name: params.name }).lean()) as RecipeModelType;
-  await dbDisconnect();
 
   recipe = JSON.parse(JSON.stringify(recipe));
   if (recipe == null) {

src/routes/api/rezepte/search/+server.ts

@@ -1,7 +1,7 @@
 import { json, type RequestHandler } from '@sveltejs/kit';
 import type { BriefRecipeType } from '../../../../types/types';
 import { Recipe } from '../../../../models/Recipe';
-import { dbConnect, dbDisconnect } from '../../../../utils/db';
+import { dbConnect } from '../../../../utils/db';
 
 export const GET: RequestHandler = async ({ url, locals }) => {
   await dbConnect();
@@ -64,11 +64,9 @@ export const GET: RequestHandler = async ({ url, locals }) => {
       });
     }
     
-    await dbDisconnect();
     return json(JSON.parse(JSON.stringify(recipes)));
     
   } catch (error) {
-    await dbDisconnect();
     return json({ error: 'Search failed' }, { status: 500 });
   }
 };

src/routes/cospend/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from "./$types"
+
+export const load : LayoutServerLoad = async ({locals}) => {
+	return {
+		session: await locals.auth()
+	}
+};

src/routes/cospend/+layout.svelte

@@ -5,9 +5,18 @@
   import { fly } from 'svelte/transition';
   import { quintOut } from 'svelte/easing';
   import PaymentModal from '$lib/components/PaymentModal.svelte';
+  import Header from '$lib/components/Header.svelte';
+  import UserHeader from '$lib/components/UserHeader.svelte';
 
+  export let data;
+  
   let showModal = false;
   let paymentId = null;
+  let user;
+  
+  if (data.session) {
+    user = data.session.user;
+  }
 
   $: {
     // Check if URL contains payment view route OR if we have paymentId in state
@@ -37,28 +46,37 @@
   }
 </script>
 
-<div class="layout-container" class:has-modal={showModal}>
-  <div class="main-content">
-    <slot />
-  </div>
+<Header>
+  <ul class="site_header" slot="links">
+    <li><a href="/cospend">Dashboard</a></li>
+    <li><a href="/cospend/payments">All Payments</a></li>
+    <li><a href="/cospend/recurring">Recurring Payments</a></li>
+  </ul>
+  <UserHeader slot="right_side" {user}></UserHeader>
+  
+  <div class="layout-container" class:has-modal={showModal}>
+    <div class="main-content">
+      <slot />
+    </div>
 
-  <div class="side-panel">
-    {#if showModal}
-      <div class="modal-content">
-        {#key paymentId}
-          <div in:fly={{x: 50, duration: 300, easing: quintOut}} out:fly={{x: -50, duration: 300, easing: quintOut}}>
-            <PaymentModal {paymentId} on:close={() => showModal = false} on:paymentDeleted={handlePaymentDeleted} />
-          </div>
-        {/key}
-      </div>
-    {/if}
+    <div class="side-panel">
+      {#if showModal}
+        <div class="modal-content">
+          {#key paymentId}
+            <div in:fly={{x: 50, duration: 300, easing: quintOut}} out:fly={{x: -50, duration: 300, easing: quintOut}}>
+              <PaymentModal {paymentId} on:close={() => showModal = false} on:paymentDeleted={handlePaymentDeleted} />
+            </div>
+          {/key}
+        </div>
+      {/if}
+    </div>
   </div>
-</div>
+</Header>
 
 <style>
   .layout-container {
     display: flex;
-    min-height: 100vh;
+    min-height: calc(100vh - 4rem);
   }
 
   .main-content {
@@ -72,11 +90,11 @@
 
   .side-panel {
     position: fixed;
-    top: 0;
+    top: 4rem;
     right: 0;
     width: 400px;
-    height: 100vh;
-    background: white;
+    height: calc(100vh - 4rem);
+    background: #fbf9f3;
     border-left: 1px solid #dee2e6;
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     z-index: 100;
@@ -103,6 +121,13 @@
     overflow-y: auto;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .side-panel {
+      background: var(--background-dark);
+      border-left-color: #434C5E;
+    }
+  }
+
   @media (max-width: 768px) {
     .layout-container.has-modal {
       flex-direction: column;
@@ -122,6 +147,14 @@
       border-left: none;
       border-top: 1px solid #dee2e6;
       box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+      top: auto;
+      bottom: 0;
+    }
+  }
+
+  @media (max-width: 768px) and (prefers-color-scheme: dark) {
+    .side-panel {
+      border-top-color: #434C5E;
     }
   }
 </style>

src/routes/cospend/+page.svelte

@@ -5,8 +5,10 @@
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   import EnhancedBalance from '$lib/components/EnhancedBalance.svelte';
   import DebtBreakdown from '$lib/components/DebtBreakdown.svelte';
+  import BarChart from '$lib/components/BarChart.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   import { isSettlementPayment, getSettlementIcon, getSettlementClasses, getSettlementReceiver } from '$lib/utils/settlements';
+  import AddButton from '$lib/components/AddButton.svelte';
 
   export let data; // Contains session data and balance from server
 
@@ -17,7 +19,9 @@
   };
   let loading = false; // Start as false since we have server data
   let error = null;
-  
+  let monthlyExpensesData = { labels: [], datasets: [] };
+  let expensesLoading = false;
+
   // Component references for refreshing
   let enhancedBalanceComponent;
   let debtBreakdownComponent;
@@ -26,15 +30,18 @@
   onMount(async () => {
     // Mark that JavaScript is loaded for progressive enhancement
     document.body.classList.add('js-loaded');
-    await fetchBalance();
-    
+    await Promise.all([
+      fetchBalance(),
+      fetchMonthlyExpenses()
+    ]);
+
     // Listen for dashboard refresh events from the layout
     const handleDashboardRefresh = () => {
       refreshAllComponents();
     };
-    
+
     window.addEventListener('dashboardRefresh', handleDashboardRefresh);
-    
+
     // Cleanup
     return () => {
       window.removeEventListener('dashboardRefresh', handleDashboardRefresh);
@@ -56,17 +63,36 @@
     }
   }
 
+  async function fetchMonthlyExpenses() {
+    try {
+      expensesLoading = true;
+      const response = await fetch('/api/cospend/monthly-expenses');
+      if (!response.ok) {
+        throw new Error('Failed to fetch monthly expenses');
+      }
+      monthlyExpensesData = await response.json();
+    } catch (err) {
+      console.error('Error fetching monthly expenses:', err);
+      // Don't show this error in the main error state
+    } finally {
+      expensesLoading = false;
+    }
+  }
+
   // Function to refresh all dashboard components after payment deletion
   async function refreshAllComponents() {
     // Refresh the main balance and recent activity
-    await fetchBalance();
-    
+    await Promise.all([
+      fetchBalance(),
+      fetchMonthlyExpenses()
+    ]);
+
     // Refresh the enhanced balance component if it exists and has a refresh method
     if (enhancedBalanceComponent && enhancedBalanceComponent.refresh) {
       await enhancedBalanceComponent.refresh();
     }
-    
-    // Refresh the debt breakdown component if it exists and has a refresh method  
+
+    // Refresh the debt breakdown component if it exists and has a refresh method
     if (debtBreakdownComponent && debtBreakdownComponent.refresh) {
       await debtBreakdownComponent.refresh();
     }
@@ -102,14 +128,14 @@
     if (!isSettlementPayment(split.paymentId)) {
       return '';
     }
-    
+
     // In a settlement, the receiver is the person who is NOT the payer
     // Since we're viewing the current user's activity, the receiver is the current user
     // when someone else paid, or the other user when current user paid
-    
+
     const paidBy = split.paymentId?.paidBy;
     const currentUser = data.session?.user?.nickname;
-    
+
     if (paidBy === currentUser) {
       // Current user paid, so receiver is the other user
       return split.otherUser || '';
@@ -125,23 +151,42 @@
 </svelte:head>
 
 <main class="cospend-main">
-  <div class="header-section">
     <h1>Cospend</h1>
-    <p>Track and split expenses with your friends and family</p>
+
+  <!-- Responsive layout for balance and chart -->
+  <div class="dashboard-layout">
+    <div class="balance-section">
+      <EnhancedBalance bind:this={enhancedBalanceComponent} initialBalance={data.balance} initialDebtData={data.debtData} />
+
+      <div class="actions">
+        {#if balance.netBalance !== 0}
+          <a href="/cospend/settle" class="btn btn-settlement">Settle Debts</a>
+        {/if}
+      </div>
+
+      <DebtBreakdown bind:this={debtBreakdownComponent} />
+    </div>
+
+    <!-- Monthly Expenses Chart -->
+    <div class="chart-section">
+      {#if expensesLoading}
+        <div class="loading">Loading monthly expenses chart...</div>
+      {:else if monthlyExpensesData.datasets && monthlyExpensesData.datasets.length > 0}
+        <BarChart
+          data={monthlyExpensesData}
+          title="Monthly Expenses by Category"
+          height="400px"
+        />
+      {:else}
+        <div class="loading">
+          Debug: expensesLoading={expensesLoading},
+          datasets={monthlyExpensesData.datasets?.length || 0},
+          data={JSON.stringify(monthlyExpensesData)}
+        </div>
+      {/if}
+    </div>
   </div>
 
-  <EnhancedBalance bind:this={enhancedBalanceComponent} initialBalance={data.balance} initialDebtData={data.debtData} />
-
-  <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>
-    {#if balance.netBalance !== 0}
-      <a href="/cospend/settle" class="btn btn-settlement">Settle Debts</a>
-    {/if}
-  </div>
-
-  <DebtBreakdown bind:this={debtBreakdownComponent} />
-
   {#if loading}
     <div class="loading">Loading recent activity...</div>
   {:else if error}
@@ -153,8 +198,8 @@
         {#each balance.recentSplits as split}
           {#if isSettlementPayment(split.paymentId)}
             <!-- Settlement Payment Display - User -> User Flow -->
-            <a 
-              href="/cospend/payments/view/{split.paymentId?._id}" 
+            <a
+              href="/cospend/payments/view/{split.paymentId?._id}"
               class="settlement-flow-activity"
               on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
             >
@@ -180,12 +225,12 @@
             </a>
           {:else}
             <!-- Regular Payment Display - Speech Bubble Style -->
-            <div class="activity-message" 
+            <div class="activity-message"
                  class:is-me={split.paymentId?.paidBy === data.session?.user?.nickname}>
               <div class="message-content">
                 <ProfilePicture username={split.paymentId?.paidBy || 'Unknown'} size={36} />
-                <a 
-                  href="/cospend/payments/view/{split.paymentId?._id}" 
+                <a
+                  href="/cospend/payments/view/{split.paymentId?._id}"
                   class="activity-bubble"
                   on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
                 >
@@ -198,8 +243,8 @@
                       <span class="username">Paid by {split.paymentId?.paidBy || 'Unknown'}</span>
                       <span class="category-name">{getCategoryName(split.paymentId?.category || 'groceries')}</span>
                     </div>
-                    <div class="activity-amount" 
-                         class:positive={split.amount < 0} 
+                    <div class="activity-amount"
+                         class:positive={split.amount < 0}
                          class:negative={split.amount > 0}>
                       {#if split.amount > 0}
                         -{formatCurrency(split.amount)}
@@ -230,27 +275,19 @@
   {/if}
 </main>
 
+<AddButton href="/cospend/payments/add" />
+
 <style>
   .cospend-main {
-    max-width: 800px;
     margin: 0 auto;
     padding: 2rem;
   }
 
-  .header-section {
+  h1 {
     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;
+    margin-block: 0.5rem 1.5rem;
+    color: var(--nord0);
   }
 
   .loading, .error {
@@ -260,22 +297,32 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    h1 {
+      color: var(--font-default-dark);
+    }
+
+    .error {
+      background-color: var(--accent-dark);
+    }
+  }
+
 
   .positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .negative {
-    color: #d32f2f;
+    color: var(--red);
   }
 
   .even {
-    color: #666;
+    color: var(--nord3);
   }
 
   .actions {
@@ -294,45 +341,43 @@
     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;
-  }
-
   .btn-settlement {
-    background: linear-gradient(135deg, #28a745, #20c997);
+    background: linear-gradient(135deg, var(--green), var(--lightblue));
     color: white;
     border: none;
   }
 
   .btn-settlement:hover {
-    background: linear-gradient(135deg, #20c997, #1e7e34);
+    background: linear-gradient(135deg, var(--lightblue), var(--green));
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .recent-activity {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .recent-activity h2 {
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .recent-activity {
+      background: var(--accent-dark);
+      border-color: var(--nord2);
+    }
+
+    .recent-activity h2 {
+      color: var(--font-default-dark);
+    }
   }
 
   .activity-dialog {
@@ -364,11 +409,11 @@
   }
 
   .activity-bubble {
-    background: #f8f9fa;
+    background: var(--nord5);
     border-radius: 1rem;
     padding: 1rem;
     position: relative;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--nord4);
     text-decoration: none;
     color: inherit;
     display: block;
@@ -377,8 +422,20 @@
   }
 
   .activity-message.is-me .activity-bubble {
-    background: #e3f2fd;
-    border-color: #2196f3;
+    background: var(--nord8);
+    border-color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .activity-bubble {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .activity-message.is-me .activity-bubble {
+      background: var(--nord2);
+      border-color: var(--blue);
+    }
   }
 
   .activity-bubble:hover {
@@ -397,24 +454,34 @@
 
   .activity-bubble::before {
     left: -15px;
-    border-right-color: #f8f9fa;
+    border-right-color: var(--nord5);
   }
 
   .activity-message.is-me .activity-bubble::before {
     left: auto;
     right: -15px;
-    border-left-color: #e3f2fd;
+    border-left-color: var(--nord8);
     border-right-color: transparent;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .activity-bubble::before {
+      border-right-color: var(--nord1);
+    }
+
+    .activity-message.is-me .activity-bubble::before {
+      border-left-color: var(--nord2);
+    }
+  }
+
 
   /* New Settlement Flow Activity Styles */
   .settlement-flow-activity {
     display: block;
     text-decoration: none;
     color: inherit;
-    background: linear-gradient(135deg, #f8fff9, #e8f5e8);
-    border: 2px solid #28a745;
+    background: linear-gradient(135deg, var(--nord6), var(--nord5));
+    border: 2px solid var(--green);
     border-radius: 1rem;
     padding: 1.5rem;
     margin: 0 auto 1rem auto;
@@ -423,10 +490,21 @@
   }
 
   .settlement-flow-activity:hover {
-    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.2);
+    box-shadow: 0 6px 20px rgba(163, 190, 140, 0.3);
     transform: translateY(-2px);
   }
 
+  @media (prefers-color-scheme: dark) {
+    .settlement-flow-activity {
+      background: linear-gradient(135deg, var(--nord2), var(--nord1));
+      border-color: var(--green);
+    }
+
+    .settlement-flow-activity:hover {
+      box-shadow: 0 6px 20px rgba(163, 190, 140, 0.2);
+    }
+  }
+
   .settlement-activity-content {
     width: 100%;
   }
@@ -448,7 +526,7 @@
 
   .settlement-username {
     font-weight: 600;
-    color: #28a745;
+    color: var(--green);
     font-size: 1rem;
     text-align: center;
   }
@@ -464,22 +542,28 @@
   .settlement-amount-large {
     font-size: 1.5rem;
     font-weight: 700;
-    color: #28a745;
+    color: var(--green);
     text-align: center;
   }
 
   .settlement-flow-arrow {
     font-size: 1.8rem;
-    color: #28a745;
+    color: var(--green);
     font-weight: bold;
   }
 
   .settlement-date {
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord3);
     text-align: center;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .settlement-date {
+      color: var(--nord4);
+    }
+  }
+
   .activity-header {
     display: flex;
     justify-content: space-between;
@@ -505,26 +589,40 @@
   }
 
   .category-name {
-    color: #888;
+    color: var(--nord3);
     font-size: 0.8rem;
     font-style: italic;
   }
 
   .payment-title {
-    color: #333;
+    color: var(--nord0);
     font-size: 1.1rem;
     font-weight: 600;
     margin: 0;
   }
 
   .username {
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
     font-weight: 500;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .category-name {
+      color: var(--nord4);
+    }
+
+    .payment-title {
+      color: var(--font-default-dark);
+    }
+
+    .username {
+      color: var(--nord4);
+    }
+  }
+
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.5rem;
     border-radius: 1rem;
@@ -552,18 +650,28 @@
   }
 
   .paid-by, .payment-date {
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
   }
 
   .payment-description {
-    color: #555;
+    color: var(--nord2);
     font-size: 0.9rem;
     font-style: italic;
     margin-top: 0.25rem;
     line-height: 1.3;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .paid-by, .payment-date {
+      color: var(--nord4);
+    }
+
+    .payment-description {
+      color: var(--nord5);
+    }
+  }
+
   @media (max-width: 600px) {
     .cospend-main {
       padding: 1rem;
@@ -603,4 +711,51 @@
       font-size: 1.3rem;
     }
   }
-</style>
+
+  .dashboard-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    margin-bottom: 2rem;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (min-width: 1200px) {
+    .dashboard-layout {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 3rem;
+      align-items: start;
+    }
+
+    .balance-section {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+  }
+
+  .chart-section {
+    min-height: 400px;
+  }
+
+  .chart-section .loading {
+    background: var(--nord6);
+    border-radius: 0.75rem;
+    padding: 2rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
+    text-align: center;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .chart-section .loading {
+      background: var(--nord1);
+      border-color: var(--nord2);
+      color: var(--nord4);
+    }
+  }
+</style>

src/routes/cospend/payments/+page.svelte

@@ -4,6 +4,7 @@
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   import { isSettlementPayment, getSettlementIcon, getSettlementReceiver } from '$lib/utils/settlements';
+  import AddButton from '$lib/components/AddButton.svelte';
 
   export let data;
 
@@ -19,7 +20,7 @@
   onMount(async () => {
     // Mark that JavaScript is loaded for CSS
     document.body.classList.add('js-loaded');
-    
+
     // Only refresh if we don't have server data
     if (payments.length === 0) {
       await loadPayments();
@@ -30,22 +31,22 @@
     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 {
@@ -79,13 +80,21 @@
     }
   }
 
-  function formatCurrency(amount) {
+  function formatCurrency(amount, currency = 'CHF') {
     return new Intl.NumberFormat('de-CH', {
       style: 'currency',
-      currency: 'CHF'
+      currency: currency
     }).format(amount);
   }
 
+  function formatAmountWithCurrency(payment) {
+    if (payment.currency === 'CHF' || !payment.originalAmount) {
+      return formatCurrency(payment.amount);
+    }
+    
+    return `${formatCurrency(payment.originalAmount, payment.currency)} ≈ ${formatCurrency(payment.amount)}`;
+  }
+
   function formatDate(dateString) {
     return new Date(dateString).toLocaleDateString('de-CH');
   }
@@ -97,7 +106,7 @@
 
   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') {
@@ -118,12 +127,6 @@
   <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/recurring" class="btn btn-recurring">Recurring Payments</a>
-      <a href="/cospend" class="btn btn-secondary">Back to Dashboard</a>
     </div>
   </div>
 
@@ -163,7 +166,7 @@
                 </div>
               </div>
               <div class="settlement-amount">
-                <span class="amount settlement-amount-text">{formatCurrency(payment.amount)}</span>
+                <span class="amount settlement-amount-text">{formatAmountWithCurrency(payment)}</span>
                 <span class="date">{formatDate(payment.date)}</span>
               </div>
             {:else}
@@ -177,7 +180,7 @@
                   <div class="payment-meta">
                     <span class="category-name">{getCategoryName(payment.category || 'groceries')}</span>
                     <span class="date">{formatDate(payment.date)}</span>
-                    <span class="amount">{formatCurrency(payment.amount)}</span>
+                    <span class="amount">{formatAmountWithCurrency(payment)}</span>
                   </div>
                 </div>
               </div>
@@ -224,25 +227,6 @@
             </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>
         </a>
       {/each}
     </div>
@@ -250,22 +234,22 @@
     <!-- Pagination that works without JavaScript -->
     <div class="pagination">
       {#if data.currentOffset > 0}
-        <a href="?offset={Math.max(0, data.currentOffset - data.limit)}&limit={data.limit}" 
+        <a href="?offset={Math.max(0, data.currentOffset - data.limit)}&limit={data.limit}"
            class="btn btn-secondary">
           ← Previous
         </a>
       {/if}
-      
+
       {#if hasMore}
-        <a href="?offset={data.currentOffset + data.limit}&limit={data.limit}" 
+        <a href="?offset={data.currentOffset + data.limit}&limit={data.limit}"
            class="btn btn-secondary">
           Next →
         </a>
       {/if}
-      
+
       <!-- Progressive enhancement: JavaScript load more button -->
       {#if hasMore}
-        <button class="btn btn-secondary js-only" on:click={loadMore} disabled={loading} 
+        <button class="btn btn-secondary js-only" on:click={loadMore} disabled={loading}
                 style="display: none;">
           {loading ? 'Loading...' : 'Load More (JS)'}
         </button>
@@ -274,6 +258,8 @@
   {/if}
 </main>
 
+<AddButton href="/cospend/payments/add" />
+
 <style>
   .payments-list {
     max-width: 1200px;
@@ -281,30 +267,19 @@
     padding: 2rem;
   }
 
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 2rem;
-    gap: 2rem;
+
+   h1 {
+    margin-block: 0 2rem;
+    margin-inline: auto;
+    color: var(--nord0);
+    text-align: center;
   }
 
-  .header-content h1 {
-    margin: 0 0 0.5rem 0;
-    color: #333;
-    font-size: 2rem;
-  }
+  @media (prefers-color-scheme: dark) {
+     h1 {
+      color: var(--font-default-dark);
+    }
 
-  .header-content p {
-    margin: 0;
-    color: #666;
-    font-size: 1.1rem;
-  }
-
-  .header-actions {
-    display: flex;
-    gap: 1rem;
-    flex-shrink: 0;
   }
 
   .btn {
@@ -318,32 +293,36 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
   }
 
   .btn-primary:hover {
-    background-color: #1565c0;
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
   }
 
-  .btn-recurring {
-    background: linear-gradient(135deg, #9c27b0, #673ab7);
-    color: white;
-    border: none;
-  }
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
 
-  .btn-recurring:hover {
-    background: linear-gradient(135deg, #8e24aa, #5e35b1);
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .loading, .error {
@@ -353,9 +332,16 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .empty-state {
@@ -364,18 +350,32 @@
   }
 
   .empty-content svg {
-    color: #ccc;
+    color: var(--nord3);
     margin-bottom: 1rem;
   }
 
   .empty-content h2 {
     margin: 0 0 0.5rem 0;
-    color: #555;
+    color: var(--nord1);
   }
 
   .empty-content p {
     margin: 0 0 2rem 0;
-    color: #777;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .empty-content svg {
+      color: var(--nord4);
+    }
+
+    .empty-content h2 {
+      color: var(--nord5);
+    }
+
+    .empty-content p {
+      color: var(--nord4);
+    }
   }
 
   .payments-grid {
@@ -387,28 +387,52 @@
 
   .payment-card {
     display: block;
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     padding: 1.5rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: all 0.2s;
     text-decoration: none;
     color: inherit;
+    border: 1px solid var(--nord4);
   }
 
   .payment-card:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     text-decoration: none;
     color: inherit;
+    transform: translateY(-1px);
+    border-color: var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-card {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .payment-card:hover {
+      border-color: var(--nord3);
+    }
   }
 
   .settlement-card {
-    background: linear-gradient(135deg, #f8fff9, #f0f8f0);
-    border: 2px solid #28a745;
+    background: linear-gradient(135deg, var(--nord6), var(--nord5));
+    border: 2px solid var(--green);
   }
 
   .settlement-card:hover {
-    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.2);
+    box-shadow: 0 4px 16px rgba(163, 190, 140, 0.3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .settlement-card {
+      background: linear-gradient(135deg, var(--nord2), var(--nord1));
+    }
+
+    .settlement-card:hover {
+      box-shadow: 0 4px 16px rgba(163, 190, 140, 0.2);
+    }
   }
 
   .settlement-flow {
@@ -427,7 +451,7 @@
   .settlement-user-from .username,
   .settlement-user-to .username {
     font-weight: 500;
-    color: #28a745;
+    color: var(--green);
   }
 
   .settlement-arrow {
@@ -438,13 +462,13 @@
   }
 
   .settlement-arrow .arrow {
-    color: #28a745;
+    color: var(--green);
     font-size: 1.2rem;
     font-weight: bold;
   }
 
   .settlement-badge-small {
-    background: linear-gradient(135deg, #28a745, #20c997);
+    background: linear-gradient(135deg, var(--green), var(--lightblue));
     color: white;
     padding: 0.125rem 0.375rem;
     border-radius: 0.75rem;
@@ -464,7 +488,7 @@
   .settlement-amount-text {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #28a745;
+    color: var(--green);
   }
 
   .payment-header {
@@ -495,27 +519,43 @@
 
   .payment-title h3 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-title h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .payment-meta {
     display: flex;
     gap: 1rem;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord3);
     flex-wrap: wrap;
   }
 
   .payment-meta .category-name {
-    color: #888;
+    color: var(--nord3);
     font-style: italic;
     font-size: 0.8rem;
   }
 
   .payment-meta .amount {
     font-weight: 600;
-    color: #1976d2;
+    color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-meta {
+      color: var(--nord4);
+    }
+
+    .payment-meta .category-name {
+      color: var(--nord4);
+    }
   }
 
   .receipt-thumb {
@@ -523,15 +563,27 @@
     height: 60px;
     object-fit: cover;
     border-radius: 0.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .receipt-thumb {
+      border-color: var(--nord2);
+    }
   }
 
   .payment-description {
-    color: #555;
+    color: var(--nord2);
     margin-bottom: 1rem;
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-description {
+      color: var(--nord5);
+    }
+  }
+
   .payment-details {
     margin-bottom: 1rem;
   }
@@ -543,26 +595,46 @@
   }
 
   .detail-row .label {
-    color: #666;
+    color: var(--nord3);
     font-weight: 500;
   }
 
   .detail-row .value {
-    color: #333;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .detail-row .label {
+      color: var(--nord4);
+    }
+
+    .detail-row .value {
+      color: var(--font-default-dark);
+    }
   }
 
   .splits-summary {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding-top: 1rem;
     margin-bottom: 1rem;
   }
 
   .splits-summary h4 {
     margin: 0 0 0.75rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .splits-summary {
+      border-top-color: var(--nord2);
+    }
+
+    .splits-summary h4 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .splits-list {
     display: flex;
     flex-direction: column;
@@ -576,63 +648,25 @@
   }
 
   .split-user {
-    color: #555;
+    color: var(--nord2);
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
     font-weight: 500;
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
     font-weight: 500;
   }
 
-  .payment-actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-top: 1px solid #eee;
-    padding-top: 1rem;
+  @media (prefers-color-scheme: dark) {
+    .split-user {
+      color: var(--nord5);
+    }
   }
 
-  .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;
-  }
 
   .pagination {
     display: flex;
@@ -645,7 +679,7 @@
   .js-only {
     display: none;
   }
-  
+
   :global(body.js-loaded) .js-only {
     display: inline-block;
   }
@@ -669,10 +703,5 @@
       grid-template-columns: 1fr;
     }
 
-    .payment-actions {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 1rem;
-    }
   }
-</style>
+</style>

src/routes/cospend/payments/add/+page.server.ts

@@ -28,6 +28,7 @@ export const actions: Actions = {
     const title = formData.get('title')?.toString().trim();
     const description = formData.get('description')?.toString().trim() || '';
     const amount = parseFloat(formData.get('amount')?.toString() || '0');
+    const currency = formData.get('currency')?.toString()?.toUpperCase() || 'CHF';
     const paidBy = formData.get('paidBy')?.toString().trim();
     const date = formData.get('date')?.toString();
     const category = formData.get('category')?.toString() || 'groceries';
@@ -155,6 +156,7 @@ export const actions: Actions = {
         title,
         description,
         amount,
+        currency,
         paidBy,
         date: date || new Date().toISOString().split('T')[0],
         category,
@@ -186,6 +188,7 @@ export const actions: Actions = {
           title,
           description,
           amount,
+          currency,
           paidBy,
           category,
           splitMethod,

src/routes/cospend/payments/edit/[id]/+page.svelte

@@ -2,6 +2,8 @@
   import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
   import { getCategoryOptions } from '$lib/utils/categories';
+  import FormSection from '$lib/components/FormSection.svelte';
+  import ImageUpload from '$lib/components/ImageUpload.svelte';
   
   export let data;
 
@@ -11,11 +13,23 @@
   let uploading = false;
   let error = null;
   let imageFile = null;
+  let imagePreview = '';
+  let supportedCurrencies = ['CHF'];
+  let loadingCurrencies = false;
+  let currentExchangeRate = null;
+  let convertedAmount = null;
+  let loadingExchangeRate = false;
+  let exchangeRateError = null;
+  let exchangeRateTimeout;
+  let jsEnhanced = false;
   
   $: categoryOptions = getCategoryOptions();
 
   onMount(async () => {
+    jsEnhanced = true;
+    document.body.classList.add('js-loaded');
     await loadPayment();
+    await loadSupportedCurrencies();
   });
 
   async function loadPayment() {
@@ -33,6 +47,24 @@
     }
   }
 
+  function handleImageSelected(event) {
+    imageFile = event.detail;
+    handleImageUpload();
+  }
+
+  function handleImageError(event) {
+    error = event.detail;
+  }
+
+  function handleImageRemoved() {
+    imageFile = null;
+    imagePreview = '';
+  }
+
+  function handleCurrentImageRemoved() {
+    payment.image = null;
+  }
+
   async function handleImageUpload() {
     if (!imageFile) return;
 
@@ -53,6 +85,7 @@
       const result = await response.json();
       payment.image = result.imageUrl;
       imageFile = null;
+      imagePreview = '';
     } catch (err) {
       error = err.message;
     } finally {
@@ -60,18 +93,6 @@
     }
   }
 
-  function handleImageRemove() {
-    payment.image = null;
-  }
-
-  function handleFileChange(event) {
-    const file = event.target.files[0];
-    if (file) {
-      imageFile = file;
-      handleImageUpload();
-    }
-  }
-
   async function handleSubmit() {
     if (!payment) return;
 
@@ -129,6 +150,71 @@
       deleting = false;
     }
   }
+
+  async function loadSupportedCurrencies() {
+    try {
+      loadingCurrencies = true;
+      const response = await fetch('/api/cospend/exchange-rates?action=currencies');
+      if (response.ok) {
+        const data = await response.json();
+        supportedCurrencies = ['CHF', ...data.currencies.filter(c => c !== 'CHF')];
+      }
+    } catch (e) {
+      console.warn('Could not load supported currencies:', e);
+    } finally {
+      loadingCurrencies = false;
+    }
+  }
+
+  async function fetchExchangeRate() {
+    if (!payment || payment.currency === 'CHF' || !payment.currency || !payment.date) {
+      currentExchangeRate = null;
+      convertedAmount = null;
+      exchangeRateError = null;
+      return;
+    }
+
+    if (!payment.originalAmount || payment.originalAmount <= 0) {
+      convertedAmount = null;
+      return;
+    }
+
+    try {
+      loadingExchangeRate = true;
+      exchangeRateError = null;
+
+      const dateStr = new Date(payment.date).toISOString().split('T')[0];
+      const url = `/api/cospend/exchange-rates?from=${payment.currency}&date=${dateStr}`;
+      
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch exchange rate');
+      }
+
+      const data = await response.json();
+      currentExchangeRate = data.rate;
+      convertedAmount = payment.originalAmount * data.rate;
+    } catch (e) {
+      console.warn('Could not fetch exchange rate:', e);
+      exchangeRateError = e.message;
+      currentExchangeRate = null;
+      convertedAmount = null;
+    } finally {
+      loadingExchangeRate = false;
+    }
+  }
+
+  // Reactive statement for exchange rate fetching
+  $: if (jsEnhanced && payment && payment.currency && payment.currency !== 'CHF' && payment.date && payment.originalAmount) {
+    clearTimeout(exchangeRateTimeout);
+    exchangeRateTimeout = setTimeout(fetchExchangeRate, 300);
+  }
+
+  function formatDateForInput(dateString) {
+    if (!dateString) return '';
+    return new Date(dateString).toISOString().split('T')[0];
+  }
 </script>
 
 <svelte:head>
@@ -138,7 +224,7 @@
 <main class="edit-payment">
   <div class="header">
     <h1>Edit Payment</h1>
-    <a href="/cospend/payments" class="back-link">← Back to Payments</a>
+    <p>Modify payment details and receipt image</p>
   </div>
 
   {#if loading}
@@ -147,9 +233,7 @@
     <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>
-        
+      <FormSection title="Payment Details">
         <div class="form-group">
           <label for="title">Title *</label>
           <input 
@@ -180,15 +264,66 @@
 
         <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"
-            />
+            <label for="amount">Amount *</label>
+            <div class="amount-currency">
+              {#if payment.originalAmount && payment.currency !== 'CHF'}
+                <!-- Show original amount for foreign currency -->
+                <input 
+                  type="number" 
+                  id="originalAmount" 
+                  bind:value={payment.originalAmount} 
+                  required 
+                  min="0" 
+                  step="0.01"
+                />
+                <select id="currency" bind:value={payment.currency} disabled={loadingCurrencies}>
+                  {#each supportedCurrencies as currency}
+                    <option value={currency}>{currency}</option>
+                  {/each}
+                </select>
+              {:else}
+                <!-- Show CHF amount for CHF payments -->
+                <input 
+                  type="number" 
+                  id="amount" 
+                  bind:value={payment.amount} 
+                  required 
+                  min="0" 
+                  step="0.01"
+                />
+                <select id="currency" bind:value={payment.currency} disabled={loadingCurrencies}>
+                  {#each supportedCurrencies as currency}
+                    <option value={currency}>{currency}</option>
+                  {/each}
+                </select>
+              {/if}
+            </div>
+            
+            {#if payment.currency !== 'CHF' && payment.originalAmount}
+              <div class="conversion-info">
+                <small class="help-text">Original amount in {payment.currency}, converted to CHF at payment date</small>
+                
+                {#if loadingExchangeRate}
+                  <div class="conversion-preview loading">
+                    <small>🔄 Fetching current exchange rate...</small>
+                  </div>
+                {:else if exchangeRateError}
+                  <div class="conversion-preview error">
+                    <small>⚠️ {exchangeRateError}</small>
+                  </div>
+                {:else if convertedAmount !== null && currentExchangeRate !== null}
+                  <div class="conversion-preview success">
+                    <small>
+                      {payment.currency} {payment.originalAmount.toFixed(2)} ≈ CHF {convertedAmount.toFixed(2)}
+                      <br>
+                      (Current rate: 1 {payment.currency} = {currentExchangeRate.toFixed(4)} CHF)
+                      <br>
+                      <strong>Stored: CHF {payment.amount.toFixed(2)} (Rate: {payment.exchangeRate ? payment.exchangeRate.toFixed(4) : 'N/A'})</strong>
+                    </small>
+                  </div>
+                {/if}
+              </div>
+            {/if}
           </div>
 
           <div class="form-group">
@@ -196,7 +331,7 @@
             <input 
               type="date" 
               id="date" 
-              value={formatDate(payment.date)}
+              value={formatDateForInput(payment.date)}
               on:change={(e) => payment.date = new Date(e.target.value).toISOString()}
               required
             />
@@ -212,43 +347,21 @@
             required
           />
         </div>
-      </div>
+      </FormSection>
 
-      <div class="form-section">
-        <h2>Receipt Image</h2>
-        
-        {#if payment.image}
-          <div class="current-image">
-            <img src={payment.image} alt="Receipt" class="receipt-preview" />
-            <div class="image-actions">
-              <button type="button" class="btn-remove" on:click={handleImageRemove}>
-                Remove Image
-              </button>
-            </div>
-          </div>
-        {/if}
-
-        <div class="form-group">
-          <label for="imageUpload" class="upload-label">
-            {payment.image ? 'Replace Image' : 'Upload Receipt Image'}
-          </label>
-          <input 
-            type="file" 
-            id="imageUpload" 
-            accept="image/*"
-            on:change={handleFileChange}
-            disabled={uploading}
-            class="file-input"
-          />
-          {#if uploading}
-            <div class="upload-status">Uploading image...</div>
-          {/if}
-        </div>
-      </div>
+      <ImageUpload
+        bind:imagePreview={imagePreview}
+        bind:imageFile={imageFile}
+        bind:uploading={uploading}
+        currentImage={payment.image}
+        on:imageSelected={handleImageSelected}
+        on:imageRemoved={handleImageRemoved}
+        on:currentImageRemoved={handleCurrentImageRemoved}
+        on:error={handleImageError}
+      />
 
       {#if payment.splits && payment.splits.length > 0}
-        <div class="form-section">
-          <h2>Current Splits</h2>
+        <FormSection title="Current Splits">
           <div class="splits-display">
             {#each payment.splits as split}
               <div class="split-item">
@@ -266,7 +379,7 @@
             {/each}
           </div>
           <p class="note">Note: To modify splits, please delete and recreate the payment.</p>
-        </div>
+        </FormSection>
       {/if}
 
       <div class="form-actions">
@@ -299,20 +412,30 @@
   }
 
   .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    text-align: center;
     margin-bottom: 2rem;
   }
 
   .header h1 {
-    margin: 0;
-    color: #333;
+    margin: 0 0 0.5rem 0;
+    color: var(--nord0);
+    font-size: 2rem;
   }
 
-  .back-link {
-    color: #1976d2;
-    text-decoration: none;
+  .header p {
+    margin: 0;
+    color: var(--nord3);
+    font-size: 1.1rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .header h1 {
+      color: var(--font-default-dark);
+    }
+
+    .header p {
+      color: var(--nord4);
+    }
   }
 
   .loading, .error {
@@ -322,9 +445,16 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .payment-form {
@@ -334,19 +464,31 @@
   }
 
   .form-section {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .form-section h2 {
     margin-top: 0;
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .form-section {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .form-group {
     margin-bottom: 1rem;
   }
@@ -361,29 +503,44 @@
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    color: #555;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    label {
+      color: var(--nord5);
+    }
   }
 
   input, textarea, select {
     width: 100%;
     padding: 0.75rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
     border-radius: 0.5rem;
     font-size: 1rem;
     box-sizing: border-box;
+    background-color: var(--nord6);
+    color: var(--nord0);
   }
 
   input:focus, textarea:focus, select:focus {
     outline: none;
-    border-color: #1976d2;
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
   }
 
   select {
-    background-color: white;
     cursor: pointer;
   }
 
+  @media (prefers-color-scheme: dark) {
+    input, textarea, select {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+  }
+
   .splits-display {
     display: flex;
     flex-direction: column;
@@ -396,27 +553,41 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-item {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .positive {
-    color: #2e7d32;
+    color: var(--green);
     font-weight: 500;
   }
 
   .negative {
-    color: #d32f2f;
+    color: var(--red);
     font-weight: 500;
   }
 
   .note {
-    color: #666;
+    color: var(--nord2);
     font-size: 0.9rem;
     font-style: italic;
     margin: 0;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .note {
+      color: var(--nord4);
+    }
+  }
+
   .form-actions {
     display: flex;
     justify-content: space-between;
@@ -438,13 +609,15 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     border: none;
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #1565c0;
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-primary:disabled {
@@ -453,23 +626,37 @@
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
+    transform: translateY(-1px);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .btn-danger {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
     border: none;
   }
 
   .btn-danger:hover:not(:disabled) {
-    background-color: #c62828;
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   .btn-danger:disabled {
@@ -477,76 +664,81 @@
     cursor: not-allowed;
   }
 
-  .current-image {
-    margin-bottom: 1rem;
-    text-align: center;
-  }
-
-  .receipt-preview {
-    max-width: 200px;
-    max-height: 200px;
-    object-fit: cover;
-    border-radius: 0.5rem;
-    border: 1px solid #ddd;
-    margin-bottom: 0.75rem;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .image-actions {
+  /* Amount-currency styling */
+  .amount-currency {
     display: flex;
-    justify-content: center;
+    gap: 0.5rem;
   }
 
-  .btn-remove {
-    background-color: #d32f2f;
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: all 0.2s;
+  .amount-currency input {
+    flex: 2;
   }
 
-  .btn-remove:hover {
-    background-color: #c62828;
+  .amount-currency select {
+    flex: 1;
+    min-width: 80px;
   }
 
-  .upload-label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: #555;
-    cursor: pointer;
-  }
-
-  .file-input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 2px dashed #ddd;
-    border-radius: 0.5rem;
-    background-color: #fafafa;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .file-input:hover {
-    border-color: #1976d2;
-    background-color: #f5f5f5;
-  }
-
-  .file-input:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .upload-status {
+  /* Currency conversion preview */
+  .conversion-info {
     margin-top: 0.5rem;
-    color: #1976d2;
-    font-size: 0.9rem;
-    text-align: center;
+  }
+
+  .conversion-preview {
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+  }
+
+  .conversion-preview.loading {
+    background-color: var(--nord8);
+    border-color: var(--blue);
+    color: var(--blue);
+  }
+
+  .conversion-preview.error {
+    background-color: var(--nord6);
+    border-color: var(--red);
+    color: var(--red);
+  }
+
+  .conversion-preview.success {
+    background-color: var(--nord14);
+    border-color: var(--green);
+    color: var(--nord0);
+  }
+
+  .conversion-preview small {
+    font-size: 0.85rem;
+    font-weight: 500;
+  }
+
+  .help-text {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.8rem;
+    color: var(--nord3);
+    font-style: italic;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .conversion-preview.loading {
+      background-color: var(--nord2);
+    }
+
+    .conversion-preview.error {
+      background-color: var(--accent-dark);
+    }
+
+    .conversion-preview.success {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+    }
+
+    .help-text {
+      color: var(--nord4);
+    }
   }
 
   @media (max-width: 600px) {
@@ -566,5 +758,14 @@
     .main-actions {
       flex-direction: column;
     }
+
+    .amount-currency {
+      flex-direction: column;
+    }
+
+    .amount-currency input,
+    .amount-currency select {
+      flex: none;
+    }
   }
 </style>

src/routes/cospend/payments/view/[id]/+page.svelte

@@ -3,6 +3,7 @@
   import { goto } from '$app/navigation';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
+  import EditButton from '$lib/components/EditButton.svelte';
   
   export let data;
 
@@ -38,13 +39,21 @@
     }
   }
 
-  function formatCurrency(amount) {
+  function formatCurrency(amount, currency = 'CHF') {
     return new Intl.NumberFormat('de-CH', {
       style: 'currency',
-      currency: 'CHF'
+      currency: currency
     }).format(Math.abs(amount));
   }
 
+  function formatAmountWithCurrency(payment) {
+    if (payment.currency === 'CHF' || !payment.originalAmount) {
+      return formatCurrency(payment.amount);
+    }
+    
+    return `${formatCurrency(payment.originalAmount, payment.currency)} ≈ ${formatCurrency(payment.amount)}`;
+  }
+
   function formatDate(dateString) {
     return new Date(dateString).toLocaleDateString('de-CH');
   }
@@ -96,24 +105,6 @@
 </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>
-          <button 
-            class="btn btn-danger" 
-            on:click={deletePayment}
-            disabled={deleting}
-          >
-            {deleting ? 'Deleting...' : 'Delete'}
-          </button>
-        {/if}
-        <a href="/cospend/payments" class="btn btn-secondary">All Payments</a>
-      </div>
-    </div>
-  </div>
 
   {#if loading}
     <div class="loading">Loading payment...</div>
@@ -128,7 +119,12 @@
             <h1>{payment.title}</h1>
           </div>
           <div class="payment-amount">
-            {formatCurrency(payment.amount)}
+            {formatAmountWithCurrency(payment)}
+            {#if payment.currency !== 'CHF' && payment.exchangeRate}
+              <div class="exchange-rate-info">
+                <small>Exchange rate: 1 {payment.currency} = {payment.exchangeRate.toFixed(4)} CHF</small>
+              </div>
+            {/if}
           </div>
         </div>
         {#if payment.image}
@@ -203,6 +199,10 @@
   {/if}
 </main>
 
+{#if payment && payment.createdBy === data.session.user.nickname}
+  <EditButton href="/cospend/payments/edit/{data.paymentId}" />
+{/if}
+
 <style>
   .payment-view {
     max-width: 800px;
@@ -210,62 +210,7 @@
     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;
-    border: none;
-    cursor: pointer;
-  }
-
-  .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
-  }
-
-  .btn-secondary:hover {
-    background-color: #e8e8e8;
-  }
-
-  .btn-danger {
-    background-color: #d32f2f;
-    color: white;
-  }
-
-  .btn-danger:hover:not(:disabled) {
-    background-color: #c62828;
-  }
-
-  .btn-danger:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
 
   .loading, .error {
     text-align: center;
@@ -274,16 +219,31 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .payment-card {
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-card {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
   }
 
   .payment-header {
@@ -291,8 +251,14 @@
     justify-content: space-between;
     align-items: flex-start;
     padding: 2rem;
-    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-    border-bottom: 1px solid #dee2e6;
+    background: linear-gradient(135deg, var(--nord5), var(--nord4));
+    border-bottom: 1px solid var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-header {
+      background: linear-gradient(135deg, var(--nord2), var(--nord3));
+    }
   }
 
   .title-with-category {
@@ -309,14 +275,20 @@
 
   .title-section h1 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.75rem;
   }
 
   .payment-amount {
     font-size: 1.5rem;
     font-weight: bold;
-    color: #1976d2;
+    color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .title-section h1 {
+      color: var(--font-default-dark);
+    }
   }
 
   .receipt-image {
@@ -329,7 +301,13 @@
     max-height: 150px;
     object-fit: cover;
     border-radius: 0.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .receipt-image img {
+      border-color: var(--nord2);
+    }
   }
 
   .payment-info {
@@ -351,45 +329,79 @@
 
   .label {
     font-weight: 600;
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
 
   .value {
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .label {
+      color: var(--nord4);
+    }
+
+    .value {
+      color: var(--font-default-dark);
+    }
+  }
+
   .description {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding-top: 1.5rem;
   }
 
   .description h3 {
     margin: 0 0 0.75rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.1rem;
   }
 
   .description p {
     margin: 0;
-    color: #555;
+    color: var(--nord2);
     line-height: 1.5;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .description {
+      border-top-color: var(--nord2);
+    }
+
+    .description h3 {
+      color: var(--font-default-dark);
+    }
+
+    .description p {
+      color: var(--nord5);
+    }
+  }
+
   .splits-section {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding: 2rem;
   }
 
   .splits-section h3 {
     margin: 0 0 1rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.1rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .splits-section {
+      border-top-color: var(--nord2);
+    }
+
+    .splits-section h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .splits-list {
     display: flex;
     flex-direction: column;
@@ -401,14 +413,26 @@
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
-    background: #f8f9fa;
+    background: var(--nord5);
     border-radius: 0.5rem;
-    border: 1px solid transparent;
+    border: 1px solid var(--nord4);
   }
 
   .split-item.current-user {
-    background: #e3f2fd;
-    border-color: #2196f3;
+    background: var(--nord8);
+    border-color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-item {
+      background: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .split-item.current-user {
+      background: var(--nord3);
+      border-color: var(--blue);
+    }
   }
 
   .split-user {
@@ -425,11 +449,11 @@
 
   .username {
     font-weight: 500;
-    color: #333;
+    color: var(--nord0);
   }
 
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.5rem;
     border-radius: 1rem;
@@ -437,17 +461,39 @@
     font-weight: 500;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .username {
+      color: var(--font-default-dark);
+    }
+  }
+
   .split-amount {
     font-weight: 500;
     font-size: 1rem;
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
+  }
+
+  .exchange-rate-info {
+    margin-top: 0.5rem;
+    color: var(--nord3);
+    font-style: italic;
+  }
+
+  .exchange-rate-info small {
+    font-size: 0.8rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .exchange-rate-info {
+      color: var(--nord4);
+    }
   }
 
   @media (max-width: 600px) {

src/routes/cospend/recurring/+page.svelte

@@ -3,6 +3,7 @@
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   import { getFrequencyDescription, formatNextExecution } from '$lib/utils/recurring';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+  import AddButton from '$lib/components/AddButton.svelte';
   
   export let data;
 
@@ -97,10 +98,7 @@
 <main class="recurring-payments">
   <div class="header">
     <h1>Recurring Payments</h1>
-    <div class="header-actions">
-      <a href="/cospend/recurring/add" class="btn btn-primary">Add Recurring Payment</a>
-      <a href="/cospend" class="back-link">← Back to Cospend</a>
-    </div>
+    <p>Automate your regular shared expenses</p>
   </div>
 
   <div class="filters">
@@ -118,7 +116,7 @@
     <div class="empty-state">
       <h2>No recurring payments found</h2>
       <p>Create your first recurring payment to automate regular expenses like rent, utilities, or subscriptions.</p>
-      <a href="/cospend/recurring/add" class="btn btn-primary">Add Your First Recurring Payment</a>
+      <a href="/cospend/payments/add" class="btn btn-primary">Add Your First Payment</a>
     </div>
   {:else}
     <div class="payments-grid">
@@ -228,6 +226,8 @@
   {/if}
 </main>
 
+<AddButton href="/cospend/payments/add" />
+
 <style>
   .recurring-payments {
     max-width: 1200px;
@@ -236,34 +236,39 @@
   }
 
   .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     margin-bottom: 2rem;
+    text-align: center;
   }
 
   .header h1 {
+    margin: 0 0 0.5rem 0;
+    color: var(--nord0);
+    font-size: 2rem;
+  }
+
+  .header p {
     margin: 0;
-    color: #333;
+    color: var(--nord3);
+    font-size: 1.1rem;
   }
 
-  .header-actions {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
+  @media (prefers-color-scheme: dark) {
+    .header h1 {
+      color: var(--font-default-dark);
+    }
 
-  .back-link {
-    color: #1976d2;
-    text-decoration: none;
+    .header p {
+      color: var(--nord4);
+    }
   }
 
   .filters {
     margin-bottom: 1.5rem;
     padding: 1rem;
-    background: white;
+    background: var(--nord6);
     border-radius: 0.5rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .filters label {
@@ -272,6 +277,18 @@
     gap: 0.5rem;
     cursor: pointer;
     font-weight: 500;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .filters {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .filters label {
+      color: var(--font-default-dark);
+    }
   }
 
   .loading, .error {
@@ -281,32 +298,55 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .empty-state {
     text-align: center;
     padding: 4rem 2rem;
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .empty-state h2 {
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
   }
 
   .empty-state p {
-    color: #666;
+    color: var(--nord2);
     margin-bottom: 2rem;
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .empty-state {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .empty-state h2 {
+      color: var(--font-default-dark);
+    }
+
+    .empty-state p {
+      color: var(--nord4);
+    }
+  }
+
   .payments-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
@@ -314,21 +354,40 @@
   }
 
   .payment-card {
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     padding: 1.5rem;
-    transition: transform 0.2s;
+    transition: all 0.2s;
+    border: 1px solid var(--nord4);
   }
 
   .payment-card:hover {
-    transform: translateY(-2px);
+    transform: translateY(-1px);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    border-color: var(--nord3);
   }
 
   .payment-card.inactive {
     opacity: 0.7;
-    background: #f8f9fa;
+    background: var(--nord5);
+    border-color: var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-card {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .payment-card:hover {
+      border-color: var(--nord3);
+    }
+
+    .payment-card.inactive {
+      background: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .card-header {
@@ -351,10 +410,16 @@
 
   .payment-title h3 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-title h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .status-badge {
     padding: 0.25rem 0.75rem;
     border-radius: 1rem;
@@ -365,27 +430,33 @@
   }
 
   .status-badge.active {
-    background-color: #e8f5e8;
-    color: #2e7d32;
+    background-color: var(--green);
+    color: white;
   }
 
   .status-badge.inactive {
-    background-color: #fff3e0;
-    color: #f57c00;
+    background-color: var(--orange);
+    color: white;
   }
 
   .payment-amount {
     font-size: 1.5rem;
     font-weight: 700;
-    color: #1976d2;
+    color: var(--blue);
   }
 
   .payment-description {
-    color: #666;
+    color: var(--nord2);
     margin-bottom: 1rem;
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-description {
+      color: var(--nord5);
+    }
+  }
+
   .payment-details {
     margin-bottom: 1.5rem;
   }
@@ -400,20 +471,30 @@
 
   .label {
     font-weight: 500;
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
   }
 
   .value {
-    color: #333;
+    color: var(--nord0);
     font-weight: 500;
   }
 
   .next-execution {
-    color: #1976d2;
+    color: var(--blue);
     font-weight: 600;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .label {
+      color: var(--nord4);
+    }
+
+    .value {
+      color: var(--font-default-dark);
+    }
+  }
+
   .payer-info {
     display: flex;
     align-items: center;
@@ -423,18 +504,30 @@
   .splits-preview {
     margin-bottom: 1.5rem;
     padding: 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
   }
 
   .splits-preview h4 {
     margin: 0 0 0.75rem 0;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord2);
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .splits-preview {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .splits-preview h4 {
+      color: var(--nord4);
+    }
+  }
+
   .splits-list {
     display: flex;
     flex-direction: column;
@@ -450,6 +543,7 @@
   .split-item .username {
     flex: 1;
     font-weight: 500;
+    color: var(--nord0);
   }
 
   .split-amount {
@@ -458,11 +552,17 @@
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-item .username {
+      color: var(--font-default-dark);
+    }
   }
 
   .card-actions {
@@ -488,49 +588,66 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
   }
 
   .btn-primary:hover {
-    background-color: #1565c0;
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .btn-warning {
-    background-color: #ff9800;
+    background-color: var(--orange);
     color: white;
   }
 
   .btn-warning:hover {
-    background-color: #f57c00;
+    background-color: var(--nord12);
+    transform: translateY(-1px);
   }
 
   .btn-success {
-    background-color: #4caf50;
+    background-color: var(--green);
     color: white;
   }
 
   .btn-success:hover {
-    background-color: #45a049;
+    background-color: var(--nord14);
+    transform: translateY(-1px);
   }
 
   .btn-danger {
-    background-color: #f44336;
+    background-color: var(--red);
     color: white;
   }
 
   .btn-danger:hover {
-    background-color: #d32f2f;
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   @media (max-width: 768px) {

src/routes/cospend/recurring/add/+page.server.ts

@@ -1,14 +0,0 @@
-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
-  };
-};

src/routes/cospend/recurring/add/+page.svelte

@@ -1,944 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-  import { goto } from '$app/navigation';
-  import { getCategoryOptions } from '$lib/utils/categories';
-  import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
-  import { validateCronExpression, getFrequencyDescription, calculateNextExecutionDate } from '$lib/utils/recurring';
-  import ProfilePicture from '$lib/components/ProfilePicture.svelte';
-  
-  export let data;
-
-  let formData = {
-    title: '',
-    description: '',
-    amount: '',
-    paidBy: data.session?.user?.nickname || '',
-    category: 'groceries',
-    splitMethod: 'equal',
-    splits: [],
-    frequency: 'monthly',
-    cronExpression: '',
-    startDate: new Date().toISOString().split('T')[0],
-    endDate: ''
-  };
-
-  let users = [];
-  let newUser = '';
-  let splitAmounts = {};
-  let personalAmounts = {};
-  let loading = false;
-  let error = null;
-  let personalTotalError = false;
-  let predefinedMode = isPredefinedUsersMode();
-  let cronError = false;
-  let nextExecutionPreview = '';
-  
-  $: categoryOptions = getCategoryOptions();
-
-  onMount(() => {
-    if (predefinedMode) {
-      users = [...PREDEFINED_USERS];
-      users.forEach(user => addSplitForUser(user));
-      if (data.session?.user?.nickname && PREDEFINED_USERS.includes(data.session.user.nickname)) {
-        formData.paidBy = data.session.user.nickname;
-      } else {
-        formData.paidBy = PREDEFINED_USERS[0];
-      }
-    } else {
-      if (data.session?.user?.nickname) {
-        users = [data.session.user.nickname];
-        addSplitForUser(data.session.user.nickname);
-      }
-    }
-    updateNextExecutionPreview();
-  });
-
-  function addUser() {
-    if (predefinedMode) return;
-    
-    if (newUser.trim() && !users.includes(newUser.trim())) {
-      users = [...users, newUser.trim()];
-      addSplitForUser(newUser.trim());
-      newUser = '';
-    }
-  }
-
-  function removeUser(userToRemove) {
-    if (predefinedMode) return;
-    
-    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;
-      } else {
-        splitAmounts[user] = splitAmount;
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function calculateFullPayment() {
-    if (!formData.amount) return;
-    
-    const amountNum = parseFloat(formData.amount);
-    const otherUsers = users.filter(user => user !== formData.paidBy);
-    const amountPerOtherUser = otherUsers.length > 0 ? amountNum / otherUsers.length : 0;
-    
-    users.forEach(user => {
-      if (user === formData.paidBy) {
-        splitAmounts[user] = -amountNum; // They paid it all, so they're owed the full amount
-      } else {
-        splitAmounts[user] = amountPerOtherUser; // Others owe their share of the full amount
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function calculatePersonalEqualSplit() {
-    if (!formData.amount || users.length === 0) return;
-    
-    const totalAmount = parseFloat(formData.amount);
-    
-    const totalPersonal = users.reduce((sum, user) => {
-      return sum + (parseFloat(personalAmounts[user]) || 0);
-    }, 0);
-    
-    const remainder = Math.max(0, totalAmount - totalPersonal);
-    const equalShare = remainder / users.length;
-    
-    users.forEach(user => {
-      const personalAmount = parseFloat(personalAmounts[user]) || 0;
-      const totalOwed = personalAmount + equalShare;
-      
-      if (user === formData.paidBy) {
-        splitAmounts[user] = totalOwed - totalAmount;
-      } else {
-        splitAmounts[user] = totalOwed;
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function handleSplitMethodChange() {
-    if (formData.splitMethod === 'equal') {
-      calculateEqualSplits();
-    } else if (formData.splitMethod === 'full') {
-      calculateFullPayment();
-    } else if (formData.splitMethod === 'personal_equal') {
-      calculatePersonalEqualSplit();
-    }
-  }
-
-  function validateCron() {
-    if (formData.frequency !== 'custom') {
-      cronError = false;
-      return;
-    }
-    cronError = !validateCronExpression(formData.cronExpression);
-  }
-
-  function updateNextExecutionPreview() {
-    try {
-      if (formData.frequency && formData.startDate) {
-        const recurringPayment = {
-          ...formData,
-          startDate: new Date(formData.startDate)
-        };
-        const nextDate = calculateNextExecutionDate(recurringPayment, new Date(formData.startDate));
-        nextExecutionPreview = nextDate.toLocaleString('de-CH', {
-          weekday: 'long',
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        });
-      }
-    } catch (e) {
-      nextExecutionPreview = 'Invalid configuration';
-    }
-  }
-
-  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 (formData.frequency === 'custom' && cronError) {
-      error = 'Please enter a valid cron expression';
-      return;
-    }
-
-    if (formData.splitMethod === 'personal_equal') {
-      const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
-      const totalAmount = parseFloat(formData.amount);
-      
-      if (totalPersonal > totalAmount) {
-        error = 'Personal amounts cannot exceed the total payment amount';
-        return;
-      }
-    }
-
-    if (users.length === 0) {
-      error = 'Please add at least one user to split with';
-      return;
-    }
-
-    loading = true;
-    error = null;
-
-    try {
-      const splits = users.map(user => ({
-        username: user,
-        amount: splitAmounts[user] || 0,
-        proportion: formData.splitMethod === 'proportional' ? (splitAmounts[user] || 0) / parseFloat(formData.amount) : undefined,
-        personalAmount: formData.splitMethod === 'personal_equal' ? (parseFloat(personalAmounts[user]) || 0) : undefined
-      }));
-
-      const payload = {
-        ...formData,
-        amount: parseFloat(formData.amount),
-        startDate: formData.startDate ? new Date(formData.startDate).toISOString() : new Date().toISOString(),
-        endDate: formData.endDate ? new Date(formData.endDate).toISOString() : null,
-        cronExpression: formData.frequency === 'custom' ? formData.cronExpression : undefined,
-        splits
-      };
-
-      const response = await fetch('/api/cospend/recurring-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 recurring payment');
-      }
-
-      const result = await response.json();
-      await goto('/cospend/recurring');
-
-    } catch (err) {
-      error = err.message;
-    } finally {
-      loading = false;
-    }
-  }
-
-  $: if (formData.amount && formData.splitMethod && formData.paidBy) {
-    handleSplitMethodChange();
-  }
-
-  $: if (formData.splitMethod === 'personal_equal' && personalAmounts && formData.amount) {
-    const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
-    const totalAmount = parseFloat(formData.amount);
-    personalTotalError = totalPersonal > totalAmount;
-    
-    if (!personalTotalError) {
-      calculatePersonalEqualSplit();
-    }
-  }
-
-  $: if (formData.cronExpression) {
-    validateCron();
-  }
-
-  $: if (formData.frequency || formData.cronExpression || formData.startDate) {
-    updateNextExecutionPreview();
-  }
-</script>
-
-<svelte:head>
-  <title>Add Recurring Payment - Cospend</title>
-</svelte:head>
-
-<main class="add-recurring-payment">
-  <div class="header">
-    <h1>Add Recurring 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., Monthly rent, Weekly groceries"
-        />
-      </div>
-
-      <div class="form-group">
-        <label for="description">Description</label>
-        <textarea 
-          id="description" 
-          bind:value={formData.description} 
-          placeholder="Additional details about this recurring payment..."
-          rows="3"
-        ></textarea>
-      </div>
-
-      <div class="form-group">
-        <label for="category">Category *</label>
-        <select id="category" bind:value={formData.category} required>
-          {#each categoryOptions as option}
-            <option value={option.value}>{option.label}</option>
-          {/each}
-        </select>
-      </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="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>
-
-    <div class="form-section">
-      <h2>Recurring Schedule</h2>
-      
-      <div class="form-row">
-        <div class="form-group">
-          <label for="frequency">Frequency *</label>
-          <select id="frequency" bind:value={formData.frequency} required>
-            <option value="daily">Daily</option>
-            <option value="weekly">Weekly</option>
-            <option value="monthly">Monthly</option>
-            <option value="custom">Custom (Cron)</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="startDate">Start Date *</label>
-          <input 
-            type="date" 
-            id="startDate" 
-            bind:value={formData.startDate} 
-            required
-          />
-        </div>
-      </div>
-
-      {#if formData.frequency === 'custom'}
-        <div class="form-group">
-          <label for="cronExpression">Cron Expression *</label>
-          <input 
-            type="text" 
-            id="cronExpression" 
-            bind:value={formData.cronExpression} 
-            required 
-            placeholder="0 9 * * 1  (Every Monday at 9:00 AM)"
-            class:error={cronError}
-          />
-          <div class="help-text">
-            <p>Cron format: minute hour day-of-month month day-of-week</p>
-            <p>Examples:</p>
-            <ul>
-              <li><code>0 9 * * *</code> - Every day at 9:00 AM</li>
-              <li><code>0 9 1 * *</code> - Every 1st of the month at 9:00 AM</li>
-              <li><code>0 9 * * 1</code> - Every Monday at 9:00 AM</li>
-              <li><code>0 9 1,15 * *</code> - 1st and 15th of every month at 9:00 AM</li>
-            </ul>
-          </div>
-          {#if cronError}
-            <div class="field-error">Invalid cron expression</div>
-          {/if}
-        </div>
-      {/if}
-
-      <div class="form-group">
-        <label for="endDate">End Date (optional)</label>
-        <input 
-          type="date" 
-          id="endDate" 
-          bind:value={formData.endDate}
-        />
-        <div class="help-text">Leave blank for indefinite recurring payments</div>
-      </div>
-
-      {#if nextExecutionPreview}
-        <div class="execution-preview">
-          <h3>Next Execution</h3>
-          <p class="next-execution">{nextExecutionPreview}</p>
-          <p class="frequency-description">{getFrequencyDescription(formData)}</p>
-        </div>
-      {/if}
-    </div>
-
-    <div class="form-section">
-      <h2>Split Between Users</h2>
-      
-      {#if predefinedMode}
-        <div class="predefined-users">
-          <p class="predefined-note">Splitting between predefined users:</p>
-          <div class="users-list">
-            {#each users as user}
-              <div class="user-item with-profile">
-                <ProfilePicture username={user} size={32} />
-                <span class="username">{user}</span>
-                {#if user === data.session?.user?.nickname}
-                  <span class="you-badge">You</span>
-                {/if}
-              </div>
-            {/each}
-          </div>
-        </div>
-      {:else}
-        <div class="users-list">
-          {#each users as user}
-            <div class="user-item with-profile">
-              <ProfilePicture username={user} size={32} />
-              <span class="username">{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>
-      {/if}
-    </div>
-
-    <div class="form-section">
-      <h2>Split Method</h2>
-      
-      <div class="split-method">
-        <label>
-          <input type="radio" bind:group={formData.splitMethod} value="equal" />
-          {predefinedMode && users.length === 2 ? 'Split 50/50' : 'Equal Split'}
-        </label>
-        <label>
-          <input type="radio" bind:group={formData.splitMethod} value="personal_equal" />
-          Personal + 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 formData.splitMethod === 'personal_equal'}
-        <div class="personal-splits">
-          <h3>Personal Amounts</h3>
-          <p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
-          {#each users as user}
-            <div class="split-input">
-              <label>{user}</label>
-              <input 
-                type="number" 
-                step="0.01" 
-                min="0"
-                bind:value={personalAmounts[user]}
-                placeholder="0.00"
-              />
-            </div>
-          {/each}
-          {#if formData.amount}
-            <div class="remainder-info" class:error={personalTotalError}>
-              <span>Total Personal: CHF {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
-              <span>Remainder to Split: CHF {Math.max(0, parseFloat(formData.amount) - Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0)).toFixed(2)}</span>
-              {#if personalTotalError}
-                <div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      {#if Object.keys(splitAmounts).length > 0}
-        <div class="split-preview">
-          <h3>Split Preview</h3>
-          {#each users as user}
-            <div class="split-item">
-              <div class="split-user">
-                <ProfilePicture username={user} size={24} />
-                <span class="username">{user}</span>
-              </div>
-              <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}
-                  owes CHF {splitAmounts[user].toFixed(2)}
-                {/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 || cronError}>
-        {loading ? 'Creating...' : 'Create Recurring Payment'}
-      </button>
-    </div>
-  </form>
-</main>
-
-<style>
-  .add-recurring-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);
-  }
-
-  input.error {
-    border-color: #d32f2f;
-  }
-
-  .help-text {
-    margin-top: 0.5rem;
-    color: #666;
-    font-size: 0.9rem;
-  }
-
-  .help-text code {
-    background-color: #f5f5f5;
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-    font-family: monospace;
-  }
-
-  .help-text ul {
-    margin: 0.5rem 0;
-    padding-left: 1rem;
-  }
-
-  .help-text li {
-    margin-bottom: 0.25rem;
-  }
-
-  .field-error {
-    color: #d32f2f;
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
-  }
-
-  .execution-preview {
-    background-color: #e3f2fd;
-    border: 1px solid #2196f3;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin-top: 1rem;
-  }
-
-  .execution-preview h3 {
-    margin: 0 0 0.5rem 0;
-    color: #1976d2;
-    font-size: 1rem;
-  }
-
-  .next-execution {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #1976d2;
-    margin: 0.5rem 0;
-  }
-
-  .frequency-description {
-    color: #666;
-    font-size: 0.9rem;
-    margin: 0;
-    font-style: italic;
-  }
-
-  .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;
-  }
-
-  .user-item.with-profile {
-    gap: 0.75rem;
-  }
-
-  .user-item .username {
-    font-weight: 500;
-  }
-
-  .you-badge {
-    background-color: #1976d2;
-    color: white;
-    padding: 0.125rem 0.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  .predefined-users {
-    background-color: #f8f9fa;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
-  }
-
-  .predefined-note {
-    margin: 0 0 1rem 0;
-    color: #666;
-    font-size: 0.9rem;
-    font-style: italic;
-  }
-
-  .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, .personal-splits {
-    border: 1px solid #ddd;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .proportional-splits h3, .personal-splits h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  .personal-splits .description {
-    color: #666;
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
-    font-style: italic;
-  }
-
-  .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;
-  }
-
-  .remainder-info {
-    margin-top: 1rem;
-    padding: 1rem;
-    background-color: #f8f9fa;
-    border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
-  }
-
-  .remainder-info.error {
-    background-color: #fff5f5;
-    border-color: #fed7d7;
-  }
-
-  .remainder-info span {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-  }
-
-  .error-message {
-    color: #d32f2f;
-    font-weight: 600;
-    margin-top: 0.5rem;
-    font-size: 0.9rem;
-  }
-
-  .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;
-  }
-
-  .split-user {
-    display: flex;
-    align-items: center;
-    gap: 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-recurring-payment {
-      padding: 1rem;
-    }
-
-    .form-row {
-      grid-template-columns: 1fr;
-    }
-
-    .form-actions {
-      flex-direction: column;
-    }
-  }
-</style>

src/routes/cospend/recurring/edit/[id]/+page.svelte

@@ -5,6 +5,8 @@
   import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
   import { validateCronExpression, getFrequencyDescription, calculateNextExecutionDate } from '$lib/utils/recurring';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+  import SplitMethodSelector from '$lib/components/SplitMethodSelector.svelte';
+  import UsersList from '$lib/components/UsersList.svelte';
   
   export let data;
 
@@ -12,6 +14,7 @@
     title: '',
     description: '',
     amount: '',
+    currency: 'CHF',
     paidBy: data.session?.user?.nickname || '',
     category: 'groceries',
     splitMethod: 'equal',
@@ -30,15 +33,25 @@
   let loading = false;
   let loadingPayment = true;
   let error = null;
-  let personalTotalError = false;
   let predefinedMode = isPredefinedUsersMode();
   let cronError = false;
   let nextExecutionPreview = '';
+  let supportedCurrencies = ['CHF'];
+  let loadingCurrencies = false;
+  let currentExchangeRate = null;
+  let convertedAmount = null;
+  let loadingExchangeRate = false;
+  let exchangeRateError = null;
+  let exchangeRateTimeout;
+  let jsEnhanced = false;
   
   $: categoryOptions = getCategoryOptions();
 
   onMount(async () => {
+    jsEnhanced = true;
+    document.body.classList.add('js-loaded');
     await loadRecurringPayment();
+    await loadSupportedCurrencies();
   });
 
   async function loadRecurringPayment() {
@@ -57,6 +70,7 @@
         title: payment.title,
         description: payment.description || '',
         amount: payment.amount.toString(),
+        currency: payment.currency || 'CHF',
         paidBy: payment.paidBy,
         category: payment.category,
         splitMethod: payment.splitMethod,
@@ -86,28 +100,6 @@
     }
   }
 
-  function addUser() {
-    if (predefinedMode) return;
-    
-    if (newUser.trim() && !users.includes(newUser.trim())) {
-      users = [...users, newUser.trim()];
-      addSplitForUser(newUser.trim());
-      newUser = '';
-    }
-  }
-
-  function removeUser(userToRemove) {
-    if (predefinedMode) return;
-    
-    if (users.length > 1) {
-      users = users.filter(u => u !== userToRemove);
-      delete splitAmounts[userToRemove];
-      delete personalAmounts[userToRemove];
-      splitAmounts = { ...splitAmounts };
-      personalAmounts = { ...personalAmounts };
-    }
-  }
-
   function addSplitForUser(username) {
     if (!splitAmounts[username]) {
       splitAmounts[username] = 0;
@@ -115,74 +107,6 @@
     }
   }
 
-  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;
-      } else {
-        splitAmounts[user] = splitAmount;
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function calculateFullPayment() {
-    if (!formData.amount) return;
-    
-    const amountNum = parseFloat(formData.amount);
-    const otherUsers = users.filter(user => user !== formData.paidBy);
-    const amountPerOtherUser = otherUsers.length > 0 ? amountNum / otherUsers.length : 0;
-    
-    users.forEach(user => {
-      if (user === formData.paidBy) {
-        splitAmounts[user] = -amountNum; // They paid it all, so they're owed the full amount
-      } else {
-        splitAmounts[user] = amountPerOtherUser; // Others owe their share of the full amount
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function calculatePersonalEqualSplit() {
-    if (!formData.amount || users.length === 0) return;
-    
-    const totalAmount = parseFloat(formData.amount);
-    
-    const totalPersonal = users.reduce((sum, user) => {
-      return sum + (parseFloat(personalAmounts[user]) || 0);
-    }, 0);
-    
-    const remainder = Math.max(0, totalAmount - totalPersonal);
-    const equalShare = remainder / users.length;
-    
-    users.forEach(user => {
-      const personalAmount = parseFloat(personalAmounts[user]) || 0;
-      const totalOwed = personalAmount + equalShare;
-      
-      if (user === formData.paidBy) {
-        splitAmounts[user] = totalOwed - totalAmount;
-      } else {
-        splitAmounts[user] = totalOwed;
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function handleSplitMethodChange() {
-    if (formData.splitMethod === 'equal') {
-      calculateEqualSplits();
-    } else if (formData.splitMethod === 'full') {
-      calculateFullPayment();
-    } else if (formData.splitMethod === 'personal_equal') {
-      calculatePersonalEqualSplit();
-    }
-  }
-
   function validateCron() {
     if (formData.frequency !== 'custom') {
       cronError = false;
@@ -224,15 +148,6 @@
       return;
     }
 
-    if (formData.splitMethod === 'personal_equal') {
-      const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
-      const totalAmount = parseFloat(formData.amount);
-      
-      if (totalPersonal > totalAmount) {
-        error = 'Personal amounts cannot exceed the total payment amount';
-        return;
-      }
-    }
 
     if (users.length === 0) {
       error = 'Please add at least one user to split with';
@@ -282,19 +197,6 @@
     }
   }
 
-  $: if (formData.amount && formData.splitMethod && formData.paidBy && !loadingPayment) {
-    handleSplitMethodChange();
-  }
-
-  $: if (formData.splitMethod === 'personal_equal' && personalAmounts && formData.amount && !loadingPayment) {
-    const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
-    const totalAmount = parseFloat(formData.amount);
-    personalTotalError = totalPersonal > totalAmount;
-    
-    if (!personalTotalError) {
-      calculatePersonalEqualSplit();
-    }
-  }
 
   $: if (formData.cronExpression) {
     validateCron();
@@ -303,6 +205,65 @@
   $: if (formData.frequency || formData.cronExpression || formData.startDate) {
     updateNextExecutionPreview();
   }
+
+  async function loadSupportedCurrencies() {
+    try {
+      loadingCurrencies = true;
+      const response = await fetch('/api/cospend/exchange-rates?action=currencies');
+      if (response.ok) {
+        const data = await response.json();
+        supportedCurrencies = ['CHF', ...data.currencies.filter(c => c !== 'CHF')];
+      }
+    } catch (e) {
+      console.warn('Could not load supported currencies:', e);
+    } finally {
+      loadingCurrencies = false;
+    }
+  }
+
+  async function fetchExchangeRate() {
+    if (formData.currency === 'CHF' || !formData.currency || !formData.startDate) {
+      currentExchangeRate = null;
+      convertedAmount = null;
+      exchangeRateError = null;
+      return;
+    }
+
+    if (!formData.amount || parseFloat(formData.amount) <= 0) {
+      convertedAmount = null;
+      return;
+    }
+
+    try {
+      loadingExchangeRate = true;
+      exchangeRateError = null;
+
+      const url = `/api/cospend/exchange-rates?from=${formData.currency}&date=${formData.startDate}`;
+      
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error('Failed to fetch exchange rate');
+      }
+
+      const data = await response.json();
+      currentExchangeRate = data.rate;
+      convertedAmount = parseFloat(formData.amount) * data.rate;
+    } catch (e) {
+      console.warn('Could not fetch exchange rate:', e);
+      exchangeRateError = e.message;
+      currentExchangeRate = null;
+      convertedAmount = null;
+    } finally {
+      loadingExchangeRate = false;
+    }
+  }
+
+  // Reactive statement for exchange rate fetching
+  $: if (jsEnhanced && formData.currency && formData.currency !== 'CHF' && formData.startDate && formData.amount) {
+    clearTimeout(exchangeRateTimeout);
+    exchangeRateTimeout = setTimeout(fetchExchangeRate, 300);
+  }
 </script>
 
 <svelte:head>
@@ -358,16 +319,46 @@
 
         <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"
-            />
+            <label for="amount">Amount *</label>
+            <div class="amount-currency">
+              <input 
+                type="number" 
+                id="amount" 
+                bind:value={formData.amount} 
+                required 
+                min="0" 
+                step="0.01"
+                placeholder="0.00"
+              />
+              <select id="currency" bind:value={formData.currency} disabled={loadingCurrencies}>
+                {#each supportedCurrencies as currency}
+                  <option value={currency}>{currency}</option>
+                {/each}
+              </select>
+            </div>
+            {#if formData.currency !== 'CHF'}
+              <div class="conversion-info">
+                <small class="help-text">Amount will be converted to CHF using exchange rates on each execution</small>
+                
+                {#if loadingExchangeRate}
+                  <div class="conversion-preview loading">
+                    <small>🔄 Fetching exchange rate for start date...</small>
+                  </div>
+                {:else if exchangeRateError}
+                  <div class="conversion-preview error">
+                    <small>⚠️ {exchangeRateError}</small>
+                  </div>
+                {:else if convertedAmount !== null && currentExchangeRate !== null && formData.amount}
+                  <div class="conversion-preview success">
+                    <small>
+                      {formData.currency} {parseFloat(formData.amount).toFixed(2)} ≈ CHF {convertedAmount.toFixed(2)}
+                      <br>
+                      (Rate for start date: 1 {formData.currency} = {currentExchangeRate.toFixed(4)} CHF)
+                    </small>
+                  </div>
+                {/if}
+              </div>
+            {/if}
           </div>
 
           <div class="form-group">
@@ -460,129 +451,25 @@
         {/if}
       </div>
 
-      <div class="form-section">
-        <h2>Split Between Users</h2>
-        
-        <div class="users-list">
-          {#each users as user}
-            <div class="user-item with-profile">
-              <ProfilePicture username={user} size={32} />
-              <span class="username">{user}</span>
-              {#if user === data.session?.user?.nickname}
-                <span class="you-badge">You</span>
-              {/if}
-              {#if !predefinedMode && user !== data.session?.user?.nickname}
-                <button type="button" class="remove-user" on:click={() => removeUser(user)}>
-                  Remove
-                </button>
-              {/if}
-            </div>
-          {/each}
-        </div>
+      <UsersList 
+        bind:users={users}
+        bind:newUser={newUser}
+        currentUser={data.session?.user?.nickname}
+        {predefinedMode}
+        canRemoveUsers={!predefinedMode}
+      />
 
-        {#if !predefinedMode}
-          <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>
-        {/if}
-      </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="personal_equal" />
-            Personal + 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 formData.splitMethod === 'personal_equal'}
-          <div class="personal-splits">
-            <h3>Personal Amounts</h3>
-            <p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
-            {#each users as user}
-              <div class="split-input">
-                <label>{user}</label>
-                <input 
-                  type="number" 
-                  step="0.01" 
-                  min="0"
-                  bind:value={personalAmounts[user]}
-                  placeholder="0.00"
-                />
-              </div>
-            {/each}
-            {#if formData.amount}
-              <div class="remainder-info" class:error={personalTotalError}>
-                <span>Total Personal: CHF {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
-                <span>Remainder to Split: CHF {Math.max(0, parseFloat(formData.amount) - Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0)).toFixed(2)}</span>
-                {#if personalTotalError}
-                  <div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
-                {/if}
-              </div>
-            {/if}
-          </div>
-        {/if}
-
-        {#if Object.keys(splitAmounts).length > 0}
-          <div class="split-preview">
-            <h3>Split Preview</h3>
-            {#each users as user}
-              <div class="split-item">
-                <div class="split-user">
-                  <ProfilePicture username={user} size={24} />
-                  <span class="username">{user}</span>
-                </div>
-                <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}
-                    owes CHF {splitAmounts[user].toFixed(2)}
-                  {/if}
-                </span>
-              </div>
-            {/each}
-          </div>
-        {/if}
-      </div>
+      <SplitMethodSelector 
+        bind:splitMethod={formData.splitMethod}
+        bind:splitAmounts={splitAmounts}
+        bind:personalAmounts={personalAmounts}
+        {users}
+        amount={formData.amount}
+        currency={formData.currency}
+        paidBy={formData.paidBy}
+        currentUser={data.session?.user?.nickname}
+        {predefinedMode}
+      />
 
       {#if error}
         <div class="error">{error}</div>
@@ -616,11 +503,11 @@
 
   .header h1 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
   }
 
   .back-link {
-    color: #1976d2;
+    color: var(--blue);
     text-decoration: none;
   }
 
@@ -637,16 +524,17 @@
   }
 
   .form-section {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .form-section h2 {
     margin-top: 0;
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
@@ -664,39 +552,42 @@
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    color: #555;
+    color: var(--nord3);
   }
 
   input, textarea, select {
     width: 100%;
     padding: 0.75rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
     border-radius: 0.5rem;
     font-size: 1rem;
     box-sizing: border-box;
+    background: var(--nord5);
+    color: var(--nord0);
   }
 
   input:focus, textarea:focus, select:focus {
     outline: none;
-    border-color: #1976d2;
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
   }
 
   input.error {
-    border-color: #d32f2f;
+    border-color: var(--red);
   }
 
   .help-text {
     margin-top: 0.5rem;
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
   }
 
   .help-text code {
-    background-color: #f5f5f5;
+    background-color: var(--nord5);
     padding: 0.125rem 0.25rem;
     border-radius: 0.25rem;
     font-family: monospace;
+    color: var(--nord0);
   }
 
   .help-text ul {
@@ -709,14 +600,14 @@
   }
 
   .field-error {
-    color: #d32f2f;
+    color: var(--red);
     font-size: 0.875rem;
     margin-top: 0.25rem;
   }
 
   .execution-preview {
-    background-color: #e3f2fd;
-    border: 1px solid #2196f3;
+    background-color: var(--nord8);
+    border: 1px solid var(--blue);
     border-radius: 0.5rem;
     padding: 1rem;
     margin-top: 1rem;
@@ -724,200 +615,34 @@
 
   .execution-preview h3 {
     margin: 0 0 0.5rem 0;
-    color: #1976d2;
+    color: var(--blue);
     font-size: 1rem;
   }
 
   .next-execution {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #1976d2;
+    color: var(--blue);
     margin: 0.5rem 0;
   }
 
   .frequency-description {
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
     margin: 0;
     font-style: italic;
   }
 
-  .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;
-  }
 
-  .user-item.with-profile {
-    gap: 0.75rem;
-  }
-
-  .user-item .username {
-    font-weight: 500;
-  }
-
-  .you-badge {
-    background-color: #1976d2;
-    color: white;
-    padding: 0.125rem 0.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  .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, .personal-splits {
-    border: 1px solid #ddd;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .proportional-splits h3, .personal-splits h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  .personal-splits .description {
-    color: #666;
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
-    font-style: italic;
-  }
-
-  .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;
-  }
-
-  .remainder-info {
-    margin-top: 1rem;
-    padding: 1rem;
-    background-color: #f8f9fa;
-    border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
-  }
-
-  .remainder-info.error {
-    background-color: #fff5f5;
-    border-color: #fed7d7;
-  }
-
-  .remainder-info span {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-  }
-
-  .error-message {
-    color: #d32f2f;
-    font-weight: 600;
-    margin-top: 0.5rem;
-    font-size: 0.9rem;
-  }
-
-  .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;
-  }
-
-  .split-user {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .amount.positive {
-    color: #2e7d32;
-    font-weight: 500;
-  }
-
-  .amount.negative {
-    color: #d32f2f;
-    font-weight: 500;
-  }
 
   .error {
-    background-color: #ffebee;
-    color: #d32f2f;
+    background-color: var(--nord6);
+    color: var(--red);
     padding: 1rem;
     border-radius: 0.5rem;
     margin-bottom: 1rem;
+    border: 1px solid var(--red);
   }
 
   .form-actions {
@@ -935,13 +660,13 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     border: none;
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #1565c0;
+    background-color: var(--lightblue);
   }
 
   .btn-primary:disabled {
@@ -950,13 +675,134 @@
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .header h1 {
+      color: var(--font-default-dark);
+    }
+
+    .form-section {
+      background: var(--accent-dark);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+
+    label {
+      color: var(--nord4);
+    }
+
+    input, textarea, select {
+      background: var(--nord1);
+      color: var(--font-default-dark);
+      border-color: var(--nord2);
+    }
+
+    input:focus, textarea:focus, select:focus {
+      box-shadow: 0 0 0 2px rgba(136, 192, 208, 0.2);
+    }
+
+    .help-text {
+      color: var(--nord4);
+    }
+
+    .help-text code {
+      background-color: var(--nord1);
+      color: var(--font-default-dark);
+    }
+
+    .execution-preview {
+      background-color: var(--nord2);
+      border-color: var(--blue);
+    }
+
+
+    .error {
+      background-color: var(--accent-dark);
+    }
+
+    .btn-secondary {
+      background-color: var(--nord1);
+      color: var(--font-default-dark);
+      border-color: var(--nord2);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord2);
+    }
+
+    .conversion-preview.loading {
+      background-color: var(--nord2);
+    }
+
+    .conversion-preview.error {
+      background-color: var(--accent-dark);
+    }
+
+    .conversion-preview.success {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+    }
+  }
+
+  /* Amount-currency styling */
+  .amount-currency {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .amount-currency input {
+    flex: 2;
+  }
+
+  .amount-currency select {
+    flex: 1;
+    min-width: 80px;
+  }
+
+  /* Currency conversion preview */
+  .conversion-info {
+    margin-top: 0.5rem;
+  }
+
+  .conversion-preview {
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid transparent;
+  }
+
+  .conversion-preview.loading {
+    background-color: var(--nord8);
+    border-color: var(--blue);
+    color: var(--blue);
+  }
+
+  .conversion-preview.error {
+    background-color: var(--nord6);
+    border-color: var(--red);
+    color: var(--red);
+  }
+
+  .conversion-preview.success {
+    background-color: var(--nord14);
+    border-color: var(--green);
+    color: var(--nord0);
+  }
+
+  .conversion-preview small {
+    font-size: 0.85rem;
+    font-weight: 500;
   }
 
   @media (max-width: 600px) {
@@ -971,5 +817,14 @@
     .form-actions {
       flex-direction: column;
     }
+
+    .amount-currency {
+      flex-direction: column;
+    }
+
+    .amount-currency input,
+    .amount-currency select {
+      flex: none;
+    }
   }
 </style>

src/routes/cospend/settle/+page.server.ts

@@ -1,13 +1,133 @@
-import type { PageServerLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
+import { fail, redirect } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
 
-export const load: PageServerLoad = async ({ locals }) => {
-  const auth = await locals.auth();
-  if (!auth || !auth.user) {
+export const load: PageServerLoad = async ({ fetch, locals, request }) => {
+  const session = await locals.auth();
+  
+  if (!session) {
     throw redirect(302, '/login');
   }
 
-  return {
-    session: auth
-  };
+  try {
+    // Fetch debt data server-side with authentication cookies
+    const response = await fetch('/api/cospend/debts', {
+      headers: {
+        'Cookie': request.headers.get('Cookie') || ''
+      }
+    });
+    if (!response.ok) {
+      throw new Error('Failed to fetch debt data');
+    }
+    
+    const debtData = await response.json();
+    
+    return {
+      debtData,
+      session,
+      currentUser: session.user?.nickname || ''
+    };
+  } catch (error) {
+    console.error('Error loading debt data:', error);
+    return {
+      debtData: {
+        whoOwesMe: [],
+        whoIOwe: [],
+        totalOwedToMe: 0,
+        totalIOwe: 0
+      },
+      error: error.message,
+      session,
+      currentUser: session.user?.nickname || ''
+    };
+  }
+}
+
+export const actions: Actions = {
+  settle: async ({ request, fetch, locals }) => {
+    const data = await request.formData();
+    
+    const settlementType = data.get('settlementType');
+    const fromUser = data.get('fromUser');
+    const toUser = data.get('toUser');
+    const amount = parseFloat(data.get('amount'));
+    
+    // Validation
+    if (!settlementType || !fromUser || !toUser || !amount) {
+      return fail(400, {
+        error: 'All fields are required',
+        values: {
+          settlementType,
+          fromUser,
+          toUser,
+          amount: data.get('amount')
+        }
+      });
+    }
+    
+    if (isNaN(amount) || amount <= 0) {
+      return fail(400, {
+        error: 'Please enter a valid positive amount',
+        values: {
+          settlementType,
+          fromUser,
+          toUser,
+          amount: data.get('amount')
+        }
+      });
+    }
+    
+    try {
+      // Create a settlement payment
+      const payload = {
+        title: 'Settlement Payment',
+        description: `Settlement: ${fromUser} pays ${toUser}`,
+        amount: amount,
+        paidBy: fromUser,
+        date: new Date().toISOString().split('T')[0],
+        category: 'settlement',
+        splitMethod: 'full',
+        splits: [
+          {
+            username: fromUser,
+            amount: -amount // Payer gets negative (receives money back)
+          },
+          {
+            username: toUser,
+            amount: amount // Receiver owes money
+          }
+        ]
+      };
+
+      const response = await fetch('/api/cospend/payments', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Cookie': request.headers.get('Cookie') || ''
+        },
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to record settlement');
+      }
+
+      // Redirect back to dashboard on success
+      throw redirect(303, '/cospend');
+    } catch (error) {
+      if (error.status === 303) {
+        throw error; // Re-throw redirect
+      }
+      
+      return fail(500, {
+        error: error.message,
+        values: {
+          settlementType,
+          fromUser,
+          toUser,
+          amount: data.get('amount')
+        }
+      });
+    }
+  }
 };

src/routes/cospend/settle/+page.svelte

@@ -1,71 +1,60 @@
 <script>
   import { onMount } from 'svelte';
-  import { goto } from '$app/navigation';
+  import { enhance } from '$app/forms';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
 
   export let data;
+  export let form;
 
-  let debtData = {
+  // Use server-side data with progressive enhancement
+  let debtData = data.debtData || {
     whoOwesMe: [],
     whoIOwe: [],
     totalOwedToMe: 0,
     totalIOwe: 0
   };
-  let loading = true;
-  let error = null;
+  let loading = false; // Start as false since we have server data
+  let error = data.error || form?.error || null;
   let selectedSettlement = null;
-  let settlementAmount = '';
+  let settlementAmount = form?.values?.amount || '';
   let submitting = false;
   let predefinedMode = isPredefinedUsersMode();
 
-  onMount(async () => {
-    await fetchDebtData();
-  });
-
-  async function fetchDebtData() {
-    try {
-      loading = true;
-      const response = await fetch('/api/cospend/debts');
-      if (!response.ok) {
-        throw new Error('Failed to fetch debt data');
-      }
-      debtData = await response.json();
-
-      // For predefined mode with 2 users, auto-select the debt if there's only one
-      if (predefinedMode && PREDEFINED_USERS.length === 2) {
-        const totalDebts = debtData.whoOwesMe.length + debtData.whoIOwe.length;
-        if (totalDebts === 1) {
-          if (debtData.whoOwesMe.length === 1) {
-            selectedSettlement = {
-              type: 'receive',
-              from: debtData.whoOwesMe[0].username,
-              to: data.session?.user?.nickname,
-              amount: debtData.whoOwesMe[0].netAmount,
-              description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.session?.user?.nickname}`
-            };
+  onMount(() => {
+    // For predefined mode with 2 users, auto-select the debt if there's only one
+    if (predefinedMode && PREDEFINED_USERS.length === 2) {
+      const totalDebts = debtData.whoOwesMe.length + debtData.whoIOwe.length;
+      if (totalDebts === 1) {
+        if (debtData.whoOwesMe.length === 1) {
+          selectedSettlement = {
+            type: 'receive',
+            from: debtData.whoOwesMe[0].username,
+            to: data.currentUser,
+            amount: debtData.whoOwesMe[0].netAmount,
+            description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.currentUser}`
+          };
+          if (!settlementAmount) {
             settlementAmount = debtData.whoOwesMe[0].netAmount.toString();
-          } else if (debtData.whoIOwe.length === 1) {
-            selectedSettlement = {
-              type: 'pay',
-              from: data.session?.user?.nickname,
-              to: debtData.whoIOwe[0].username,
-              amount: debtData.whoIOwe[0].netAmount,
-              description: `Settlement: ${data.session?.user?.nickname} pays ${debtData.whoIOwe[0].username}`
-            };
+          }
+        } else if (debtData.whoIOwe.length === 1) {
+          selectedSettlement = {
+            type: 'pay',
+            from: data.currentUser,
+            to: debtData.whoIOwe[0].username,
+            amount: debtData.whoIOwe[0].netAmount,
+            description: `Settlement: ${data.currentUser} pays ${debtData.whoIOwe[0].username}`
+          };
+          if (!settlementAmount) {
             settlementAmount = debtData.whoIOwe[0].netAmount.toString();
           }
         }
       }
-    } catch (err) {
-      error = err.message;
-    } finally {
-      loading = false;
     }
-  }
+  });
 
   function selectSettlement(type, user, amount) {
-    const currentUser = data.session?.user?.nickname;
+    const currentUser = data.currentUser;
     if (type === 'receive') {
       selectedSettlement = {
         type: 'receive',
@@ -98,18 +87,18 @@
       return;
     }
 
-    try {
-      submitting = true;
-      error = null;
+    submitting = true;
+    error = null;
 
-      // Create a settlement payment
+    try {
+      // Create a settlement payment directly using the API
       const payload = {
-        title: `Settlement Payment`,
+        title: 'Settlement Payment',
         description: selectedSettlement.description,
         amount: amount,
         paidBy: selectedSettlement.from,
         date: new Date().toISOString().split('T')[0],
-        category: 'settlement', // Using settlement category
+        category: 'settlement',
         splitMethod: 'full',
         splits: [
           {
@@ -136,11 +125,10 @@
         throw new Error(errorData.message || 'Failed to record settlement');
       }
 
-      // Redirect back to dashboard
-      goto('/cospend');
+      // Redirect back to dashboard on success
+      window.location.href = '/cospend';
     } catch (err) {
       error = err.message;
-    } finally {
       submitting = false;
     }
   }
@@ -236,7 +224,7 @@
               <div class="user-from">
                 <ProfilePicture username={selectedSettlement.from} size={48} />
                 <span class="username">{selectedSettlement.from}</span>
-                {#if selectedSettlement.from === data.session?.user?.nickname}
+                {#if selectedSettlement.from === data.currentUser}
                   <span class="you-badge">You</span>
                 {/if}
               </div>
@@ -244,7 +232,7 @@
               <div class="user-to">
                 <ProfilePicture username={selectedSettlement.to} size={48} />
                 <span class="username">{selectedSettlement.to}</span>
-                {#if selectedSettlement.to === data.session?.user?.nickname}
+                {#if selectedSettlement.to === data.currentUser}
                   <span class="you-badge">You</span>
                 {/if}
               </div>
@@ -288,12 +276,75 @@
             </button>
           </div>
         </div>
+      {:else}
+        <!-- No-JS Fallback Form -->
+        <div class="settlement-details no-js-fallback">
+          <h2>Record Settlement</h2>
+          <form method="POST" action="?/settle" class="settlement-form">
+            <div class="form-group">
+              <label for="settlementType">Settlement Type</label>
+              <select id="settlementType" name="settlementType" required>
+                <option value="">Select settlement type</option>
+                {#each debtData.whoOwesMe as debt}
+                  <option value="receive" data-from="{debt.username}" data-to="{data.currentUser}">
+                    Receive {formatCurrency(debt.netAmount)} from {debt.username}
+                  </option>
+                {/each}
+                {#each debtData.whoIOwe as debt}
+                  <option value="pay" data-from="{data.currentUser}" data-to="{debt.username}">
+                    Pay {formatCurrency(debt.netAmount)} to {debt.username}
+                  </option>
+                {/each}
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="fromUser">From User</label>
+              <select id="fromUser" name="fromUser" required>
+                <option value="">Select payer</option>
+                {#each [...debtData.whoOwesMe.map(d => d.username), data.currentUser].filter(Boolean) as user}
+                  <option value="{user}">{user}{user === data.currentUser ? ' (You)' : ''}</option>
+                {/each}
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="toUser">To User</label>
+              <select id="toUser" name="toUser" required>
+                <option value="">Select recipient</option>
+                {#each [...debtData.whoIOwe.map(d => d.username), data.currentUser].filter(Boolean) as user}
+                  <option value="{user}">{user}{user === data.currentUser ? ' (You)' : ''}</option>
+                {/each}
+              </select>
+            </div>
+
+            <div class="form-group">
+              <label for="fallback-amount">Settlement Amount (CHF)</label>
+              <input
+                id="fallback-amount"
+                name="amount"
+                type="number"
+                step="0.01"
+                min="0.01"
+                value={form?.values?.amount || ''}
+                placeholder="0.00"
+                required
+              />
+            </div>
+
+            <div class="settlement-actions">
+              <button type="submit" class="btn btn-settlement">
+                Record Settlement
+              </button>
+              <a href="/cospend" class="btn btn-secondary">
+                Cancel
+              </a>
+            </div>
+          </form>
+        </div>
       {/if}
     </div>
 
-    <div class="back-actions">
-      <a href="/cospend" class="btn btn-secondary">← Back to Dashboard</a>
-    </div>
   {/if}
 </main>
 
@@ -310,12 +361,12 @@
   }
 
   .header-section h1 {
-    color: #333;
+    color: var(--nord0);
     margin-bottom: 0.5rem;
   }
 
   .header-section p {
-    color: #666;
+    color: var(--nord3);
     font-size: 1.1rem;
   }
 
@@ -326,8 +377,8 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
     margin-bottom: 1rem;
   }
@@ -335,13 +386,14 @@
   .no-debts {
     text-align: center;
     padding: 3rem 2rem;
-    background: white;
+    background: var(--nord6);
     border-radius: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .no-debts h2 {
-    color: #28a745;
+    color: var(--green);
     margin-bottom: 1rem;
   }
 
@@ -359,10 +411,11 @@
   }
 
   .available-settlements {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .settlement-section {
@@ -370,7 +423,7 @@
   }
 
   .settlement-section h3 {
-    color: #333;
+    color: var(--nord0);
     margin-bottom: 1rem;
     font-size: 1.1rem;
   }
@@ -380,21 +433,22 @@
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
-    border: 2px solid #e9ecef;
+    border: 2px solid var(--nord4);
     border-radius: 0.75rem;
     margin-bottom: 0.75rem;
     cursor: pointer;
     transition: all 0.2s ease;
+    background: var(--nord5);
   }
 
   .settlement-option:hover {
-    border-color: #28a745;
-    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.1);
+    border-color: var(--green);
+    box-shadow: 0 2px 8px rgba(163, 190, 140, 0.1);
   }
 
   .settlement-option.selected {
-    border-color: #28a745;
-    background-color: #f8fff9;
+    border-color: var(--green);
+    background-color: var(--nord5);
   }
 
   .settlement-user {
@@ -412,24 +466,25 @@
 
   .username {
     font-weight: 600;
-    color: #333;
+    color: var(--nord0);
   }
 
   .debt-amount {
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
   }
 
   .settlement-action {
-    color: #28a745;
+    color: var(--green);
     font-weight: 500;
   }
 
   .settlement-details {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 1rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
     height: fit-content;
   }
 
@@ -444,7 +499,7 @@
     gap: 1rem;
     margin-bottom: 1.5rem;
     padding: 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.5rem;
   }
 
@@ -457,12 +512,12 @@
 
   .flow-arrow {
     font-size: 1.5rem;
-    color: #28a745;
+    color: var(--green);
     font-weight: bold;
   }
 
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.5rem;
     border-radius: 1rem;
@@ -478,20 +533,20 @@
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 600;
-    color: #333;
+    color: var(--nord0);
   }
 
   .amount-input {
     display: flex;
     align-items: center;
-    background: #f8f9fa;
-    border: 1px solid #ced4da;
+    background: var(--nord5);
+    border: 1px solid var(--nord4);
     border-radius: 0.375rem;
     padding: 0.5rem;
   }
 
   .currency {
-    color: #666;
+    color: var(--nord3);
     font-weight: 500;
     margin-right: 0.5rem;
   }
@@ -502,6 +557,7 @@
     flex: 1;
     padding: 0.25rem;
     font-size: 1rem;
+    color: var(--nord0);
   }
 
   .amount-input input:focus {
@@ -509,17 +565,17 @@
   }
 
   .max-amount {
-    color: #666;
+    color: var(--nord3);
     font-size: 0.85rem;
     margin-top: 0.25rem;
     display: block;
   }
 
   .settlement-description {
-    color: #333;
+    color: var(--nord0);
     font-size: 0.9rem;
     padding: 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.375rem;
   }
 
@@ -529,6 +585,48 @@
     justify-content: center;
   }
 
+  .settlement-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .form-group label {
+    font-weight: 600;
+    color: var(--nord0);
+  }
+
+  .form-group select,
+  .form-group input {
+    padding: 0.75rem;
+    border: 1px solid var(--nord4);
+    border-radius: 0.375rem;
+    font-size: 1rem;
+    background-color: var(--nord5);
+    color: var(--nord0);
+  }
+
+  .form-group select:focus,
+  .form-group input:focus {
+    outline: none;
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
+  }
+
+  .no-js-fallback {
+    display: block;
+  }
+
+  :global(body:has(script)) .no-js-fallback {
+    display: none;
+  }
+
   .btn {
     padding: 0.75rem 1.5rem;
     border: none;
@@ -542,31 +640,31 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
   }
 
   .btn-primary:hover {
-    background-color: #1565c0;
+    background-color: var(--lightblue);
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
   }
 
   .btn-settlement {
-    background: linear-gradient(135deg, #28a745, #20c997);
+    background: linear-gradient(135deg, var(--green), var(--lightblue));
     color: white;
   }
 
   .btn-settlement:hover:not(:disabled) {
-    background: linear-gradient(135deg, #20c997, #1e7e34);
+    background: linear-gradient(135deg, var(--lightblue), var(--green));
   }
 
   .btn-settlement:disabled {
@@ -583,6 +681,111 @@
     margin-top: 1.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .header-section h1 {
+      color: var(--font-default-dark);
+    }
+
+    .header-section p {
+      color: var(--nord4);
+    }
+
+    .error {
+      background-color: var(--accent-dark);
+    }
+
+    .no-debts {
+      background: var(--accent-dark);
+      border-color: var(--nord2);
+    }
+
+    .available-settlements {
+      background: var(--accent-dark);
+      border-color: var(--nord2);
+    }
+
+    .settlement-section h3 {
+      color: var(--font-default-dark);
+    }
+
+    .settlement-option {
+      border-color: var(--nord2);
+      background: var(--nord1);
+    }
+
+    .settlement-option:hover {
+      box-shadow: 0 2px 8px rgba(163, 190, 140, 0.2);
+    }
+
+    .settlement-option.selected {
+      background-color: var(--nord1);
+    }
+
+    .username {
+      color: var(--font-default-dark);
+    }
+
+    .debt-amount {
+      color: var(--nord4);
+    }
+
+    .settlement-details {
+      background: var(--accent-dark);
+      border-color: var(--nord2);
+    }
+
+    .settlement-flow {
+      background-color: var(--nord1);
+    }
+
+    .settlement-amount-section label {
+      color: var(--font-default-dark);
+    }
+
+    .amount-input {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .currency {
+      color: var(--nord4);
+    }
+
+    .max-amount {
+      color: var(--nord4);
+    }
+
+    .settlement-description {
+      color: var(--font-default-dark);
+      background-color: var(--nord1);
+    }
+
+    .amount-input input {
+      color: var(--font-default-dark);
+    }
+
+    .btn-secondary {
+      background-color: var(--nord1);
+      color: var(--font-default-dark);
+      border-color: var(--nord2);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord2);
+    }
+
+    .form-group label {
+      color: var(--font-default-dark);
+    }
+
+    .form-group select,
+    .form-group input {
+      background-color: var(--nord1);
+      color: var(--font-default-dark);
+      border-color: var(--nord2);
+    }
+  }
+
   @media (max-width: 600px) {
     .settle-main {
       padding: 1rem;

src/routes/rezepte/+page.svelte

@@ -47,4 +47,4 @@ h1{
 	{/each}
 	</MediaScroller>
 {/each}
-<AddButton></AddButton>
+<AddButton href="/rezepte/add"></AddButton>

src/routes/rezepte/tips-and-tricks/+page.svelte

@@ -59,4 +59,4 @@ h1{
 </p>
 </div>
 
-<AddButton></AddButton>
+<AddButton href="/rezepte/add"></AddButton>

src/utils/db.ts

@@ -1,37 +1,54 @@
 import mongoose from 'mongoose';
 import { MONGO_URL } from '$env/static/private';
-/*
-  0 - disconnected
-  1 - connected
-  2 - connecting
-  3 - disconnecting
-  4 - uninitialized
-*/
-const mongoConnection = {
-  isConnected: 0,
-};
+
+let isConnected = false;
 
 export const dbConnect = async () => {
-  if (mongoConnection.isConnected === 1) {
-    return;
+  // If already connected, return immediately
+  if (isConnected && mongoose.connection.readyState === 1) {
+    return mongoose.connection;
   }
 
-  if (mongoose.connections.length > 0) {
-    mongoConnection.isConnected = mongoose.connections[0].readyState;
-    if (mongoConnection.isConnected === 1) {
-      return;
-    }
+  try {
+    // Configure MongoDB driver options
+    const options = {
+      maxPoolSize: 10, // Maintain up to 10 socket connections
+      serverSelectionTimeoutMS: 5000, // Keep trying to send operations for 5 seconds
+      socketTimeoutMS: 45000, // Close sockets after 45 seconds of inactivity
+    };
 
-    await mongoose.disconnect();
+    const connection = await mongoose.connect(MONGO_URL ?? '', options);
+    
+    isConnected = true;
+    console.log('MongoDB connected with persistent connection');
+    
+    // Handle connection events
+    mongoose.connection.on('error', (err) => {
+      console.error('MongoDB connection error:', err);
+      isConnected = false;
+    });
+
+    mongoose.connection.on('disconnected', () => {
+      console.log('MongoDB disconnected');
+      isConnected = false;
+    });
+
+    mongoose.connection.on('reconnected', () => {
+      console.log('MongoDB reconnected');
+      isConnected = true;
+    });
+
+    return connection;
+  } catch (error) {
+    console.error('MongoDB connection failed:', error);
+    isConnected = false;
+    throw error;
   }
-  await mongoose.connect(MONGO_URL ?? '');
-  mongoConnection.isConnected = 1;
 };
 
+// No longer disconnect - let the connection pool manage connections
 export const dbDisconnect = async () => {
-  if (process.env.NODE_ENV === 'development') return;
-  if (mongoConnection.isConnected === 0) return;
-
-  await mongoose.disconnect();
-  mongoConnection.isConnected = 0;
+  // Keep connections persistent for performance and to avoid race conditions
+  // MongoDB driver will handle connection pooling and cleanup automatically
+  return;
 };