add MVP monthly expenses graph

Refactor cospend components and add SSR support to settle page
- Create reusable components: ImageUpload, FormSection, SplitMethodSelector, UsersList - Replace duplicate code across add/edit pages with shared components - Remove created-by info and edit/delete buttons from payments list - Add server-side rendering support to settle page with form actions - Fix settlement submission redirect issue - Remove redundant back button from settle page 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-12 20:07:37 +02:00 · 2025-09-12 19:29:30 +02:00
15 changed files with 2043 additions and 1420 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/lib/components/BarChart.svelte
+++ b/src/lib/components/BarChart.svelte
@@ -0,0 +1,205 @@
+<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
+    const processedDatasets = data.datasets.map((dataset, index) => ({
+      ...dataset,
+      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,
+        scales: {
+          x: {
+            stacked: true,
+            grid: {
+              display: false
+            },
+            ticks: {
+              color: 'var(--nord3)',
+              font: {
+                family: 'Inter, system-ui, sans-serif'
+              }
+            }
+          },
+          y: {
+            stacked: true,
+            beginAtZero: true,
+            grid: {
+              color: 'var(--nord4)',
+              borderDash: [2, 2]
+            },
+            ticks: {
+              color: 'var(--nord3)',
+              font: {
+                family: 'Inter, system-ui, sans-serif'
+              },
+              callback: function(value) {
+                return 'CHF ' + value.toFixed(0);
+              }
+            }
+          }
+        },
+        plugins: {
+          legend: {
+            position: 'bottom',
+            labels: {
+              padding: 20,
+              usePointStyle: true,
+              color: 'var(--nord1)',
+              font: {
+                family: 'Inter, system-ui, sans-serif',
+                size: 12
+              }
+            }
+          },
+          title: {
+            display: !!title,
+            text: title,
+            color: 'var(--nord0)',
+            font: {
+              family: 'Inter, system-ui, sans-serif',
+              size: 16,
+              weight: 'bold'
+            },
+            padding: 20
+          },
+          tooltip: {
+            backgroundColor: 'var(--nord1)',
+            titleColor: 'var(--nord6)',
+            bodyColor: 'var(--nord6)',
+            borderColor: 'var(--nord3)',
+            borderWidth: 1,
+            cornerRadius: 8,
+            titleFont: {
+              family: 'Inter, system-ui, sans-serif'
+            },
+            bodyFont: {
+              family: 'Inter, system-ui, sans-serif'
+            },
+            callbacks: {
+              label: function(context) {
+                return context.dataset.label + ': CHF ' + context.parsed.y.toFixed(2);
+              }
+            }
+          }
+        },
+        interaction: {
+          intersect: false,
+          mode: 'index'
+        }
+      }
+    });
+  }
+  
+  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>
--- a/src/lib/components/FormSection.svelte
+++ b/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>
--- a/src/lib/components/ImageUpload.svelte
+++ b/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>
--- a/src/lib/components/SplitMethodSelector.svelte
+++ b/src/lib/components/SplitMethodSelector.svelte
@@ -0,0 +1,456 @@
+<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;
+  
+  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: CHF {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
+          <span>Remainder to Split: CHF {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 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>
+
+<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>
--- a/src/lib/components/UsersList.svelte
+++ b/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>
--- a/src/routes/api/cospend/monthly-expenses/+server.ts
+++ b/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);
+
+    // First, let's get all payments and see what we have
+    console.log('Searching for payments for user:', session.user.nickname);
+    console.log('Date range:', startDate.toISOString(), 'to', endDate.toISOString());
+    
+    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' },
+      $or: [
+        { paidBy: session.user.nickname },
+        { createdBy: session.user.nickname }
+      ]
+    });
+    console.log('Total payments:', totalPayments, 'In date range:', paymentsInRange, 'User expenses:', expensePayments);
+    
+    // Aggregate payments by month and category
+    const pipeline = [
+      {
+        $match: {
+          date: {
+            $gte: startDate,
+            $lte: endDate
+          },
+          // Exclude settlements - only show actual expenses
+          category: { $ne: 'settlement' },
+          // Only include payments where current user is involved
+          $or: [
+            { paidBy: session.user.nickname },
+            { createdBy: session.user.nickname }
+          ]
+        }
+      },
+      {
+        $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 months = Array.from(monthsMap.keys()).sort();
+    const categoryList = Array.from(categories).sort();
+    
+    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 });
+  }
+};
--- a/src/routes/cospend/+page.svelte
+++ b/src/routes/cospend/+page.svelte
@@ -5,6 +5,7 @@
  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';
@@ -18,6 +19,8 @@
  };
  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;
@@ -27,7 +30,10 @@
  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 = () => {
@@ -57,10 +63,31 @@
    }
  }

+  async function fetchMonthlyExpenses() {
+    try {
+      expensesLoading = true;
+      console.log('Fetching monthly expenses...');
+      const response = await fetch('/api/cospend/monthly-expenses');
+      if (!response.ok) {
+        throw new Error('Failed to fetch monthly expenses');
+      }
+      monthlyExpensesData = await response.json();
+      console.log('Monthly expenses data:', monthlyExpensesData);
+    } 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) {
@@ -138,6 +165,25 @@

  <DebtBreakdown bind:this={debtBreakdownComponent} />

+  <!-- 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>
+
  {#if loading}
    <div class="loading">Loading recent activity...</div>
  {:else if error}
@@ -660,4 +706,26 @@
      font-size: 1.3rem;
    }
  }
+
+  .chart-section {
+    margin-bottom: 2rem;
+  }
+
+  .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>
--- a/src/routes/cospend/payments/+page.svelte
+++ b/src/routes/cospend/payments/+page.svelte
@@ -219,25 +219,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>
@@ -678,73 +659,6 @@
    }
  }

-  .payment-actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-top: 1px solid var(--nord4);
-    padding-top: 1rem;
-  }
-
-  .created-by {
-    font-size: 0.9rem;
-    color: var(--nord3);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .payment-actions {
-      border-top-color: var(--nord2);
-    }
-
-    .created-by {
-      color: var(--nord4);
-    }
-  }
-
-  .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: var(--nord5);
-    color: var(--nord0);
-    border: 1px solid var(--nord4);
-  }
-
-  .btn-edit:hover {
-    background-color: var(--nord4);
-  }
-
-  .btn-delete {
-    background-color: var(--red);
-    color: white;
-  }
-
-  .btn-delete:hover {
-    background-color: var(--nord11);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .btn-edit {
-      background-color: var(--nord2);
-      color: var(--font-default-dark);
-      border-color: var(--nord3);
-    }
-
-    .btn-edit:hover {
-      background-color: var(--nord3);
-    }
-  }

  .pagination {
    display: flex;
@@ -781,10 +695,5 @@
      grid-template-columns: 1fr;
    }

-    .payment-actions {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 1rem;
-    }
  }
 </style>
--- a/src/routes/cospend/payments/add/+page.svelte
+++ b/src/routes/cospend/payments/add/+page.svelte
@@ -6,6 +6,9 @@
  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';
+  import ImageUpload from '$lib/components/ImageUpload.svelte';
  
  export let data;
  export let form;
@@ -33,12 +36,12 @@

  let imageFile = null;
  let imagePreview = '';
+  let uploading = false;
  let newUser = '';
  let splitAmounts = {};
  let personalAmounts = {};
  let loading = false;
  let error = form?.error || null;
-  let personalTotalError = false;
  let predefinedMode = data.predefinedUsers.length > 0;
  let jsEnhanced = false;
  let cronError = false;
@@ -109,54 +112,19 @@
    }
  });

-  function handleImageChange(event) {
-    const file = event.target.files[0];
-    if (file) {
-      if (file.size > 5 * 1024 * 1024) {
-        alert('File size must be less than 5MB');
-        return;
-      }
-      
-      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
-      if (!allowedTypes.includes(file.type)) {
-        alert('Please select a valid image file (JPEG, PNG, WebP)');
-        return;
-      }
-
-      imageFile = file;
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        imagePreview = e.target.result;
-      };
-      reader.readAsDataURL(file);
-    }
+  function handleImageSelected(event) {
+    imageFile = event.detail;
  }

-  function removeImage() {
+  function handleImageError(event) {
+    error = event.detail;
+  }
+
+  function handleImageRemoved() {
    imageFile = null;
    imagePreview = '';
  }

-  function addUser() {
-    if (predefinedMode) return; // No adding users in predefined mode
-    
-    if (newUser.trim() && !users.includes(newUser.trim())) {
-      users = [...users, newUser.trim()];
-      addSplitForUser(newUser.trim());
-      newUser = '';
-    }
-  }
-
-  function removeUser(userToRemove) {
-    if (predefinedMode) return; // No removing users in predefined mode
-    
-    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;
@@ -164,89 +132,10 @@
    }
  }

-  function calculateEqualSplits() {
-    if (!formData.amount || users.length === 0) return;
-    
-    const amountNum = parseFloat(formData.amount);
-    const splitAmount = amountNum / users.length;
-    
-    users.forEach(user => {
-      if (user === formData.paidBy) {
-        splitAmounts[user] = splitAmount - amountNum; // They get negative (they're owed)
-      } else {
-        splitAmounts[user] = splitAmount; // They owe positive amount
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function calculateFullPayment() {
-    if (!formData.amount) return;
-    
-    const amountNum = parseFloat(formData.amount);
-    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);
-    
-    // Calculate total personal amounts
-    const totalPersonal = users.reduce((sum, user) => {
-      return sum + (parseFloat(personalAmounts[user]) || 0);
-    }, 0);
-    
-    // Remaining amount to be split equally
-    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) {
-        // Person who paid gets back what others owe minus what they personally used
-        splitAmounts[user] = totalOwed - totalAmount;
-      } else {
-        // Others owe their personal amount + equal share
-        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();
-    } else if (formData.splitMethod === 'proportional') {
-      // For proportional, user enters amounts manually - just ensure all users have entries
-      users.forEach(user => {
-        if (!(user in splitAmounts)) {
-          splitAmounts[user] = 0;
-        }
-      });
-      splitAmounts = { ...splitAmounts };
-    }
-  }
-
  async function uploadImage() {
    if (!imageFile) return null;
    
+    uploading = true;
    const formData = new FormData();
    formData.append('image', imageFile);
    
@@ -265,6 +154,8 @@
    } catch (err) {
      console.error('Image upload failed:', err);
      return null;
+    } finally {
+      uploading = false;
    }
  }

@@ -274,16 +165,6 @@
      return;
    }

-    // Validate personal amounts for personal_equal split
-    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';
@@ -336,20 +217,6 @@
    }
  }

-  $: if (formData.amount && formData.splitMethod && formData.paidBy) {
-    handleSplitMethodChange();
-  }
-
-  // Validate and recalculate when personal amounts change
-  $: 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();
-    }
-  }

  function validateCron() {
    if (recurringData.frequency !== 'custom') {
@@ -569,189 +436,54 @@
      </div>
    {/if}

-    <div class="form-section">
-      <h2>Receipt Image</h2>
-      
-      {#if imagePreview}
-        <div class="image-preview">
-          <img src={imagePreview} alt="Receipt preview" />
-          <button type="button" class="remove-image" on:click={removeImage}>
-            Remove Image
-          </button>
-        </div>
-      {:else}
-        <div class="image-upload">
-          <label for="image" class="upload-label">
-            <div class="upload-content">
-              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"/>
-                <line x1="16" y1="5" x2="22" y2="5"/>
-                <line x1="19" y1="2" x2="19" y2="8"/>
-              </svg>
-              <p>Upload Receipt Image</p>
-              <small>JPEG, PNG, WebP (max 5MB)</small>
-            </div>
-          </label>
-          <input 
-            type="file" 
-            id="image" 
-            accept="image/jpeg,image/jpg,image/png,image/webp" 
-            on:change={handleImageChange}
-            hidden
-          />
-        </div>
-      {/if}
+    <ImageUpload
+      bind:imagePreview={imagePreview}
+      bind:imageFile={imageFile}
+      bind:uploading={uploading}
+      on:imageSelected={handleImageSelected}
+      on:imageRemoved={handleImageRemoved}
+      on:error={handleImageError}
+    />
+
+    <UsersList 
+      bind:users={users}
+      bind:newUser={newUser}
+      currentUser={data.session?.user?.nickname || data.currentUser}
+      predefinedMode={predefinedMode}
+      canRemoveUsers={!predefinedMode}
+    />
+
+    <!-- Server-side fallback: simple text inputs for users -->
+    <div class="manual-users no-js-only">
+      <p>Enter users to split with (one per line):</p>
+      <textarea 
+        name="users_manual" 
+        placeholder="{data.currentUser}&#10;Enter additional users..."
+        rows="4"
+      >{data.currentUser}</textarea>
    </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>
+    <!-- Hidden inputs for JavaScript-managed users -->
+    {#if predefinedMode}
+      {#each data.predefinedUsers as user, i}
+        <input type="hidden" name="user_{i}" value={user} />
+      {/each}
+    {:else}
+      {#each users as user, i}
+        <input type="hidden" name="user_{i}" value={user} />
+      {/each}
+    {/if}

-        <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>
-
-        <!-- Server-side fallback: simple text inputs for users -->
-        <div class="manual-users no-js-only">
-          <p>Enter users to split with (one per line):</p>
-          <textarea 
-            name="users_manual" 
-            placeholder="{data.currentUser}&#10;Enter additional users..."
-            rows="4"
-          >{data.currentUser}</textarea>
-        </div>
-      {/if}
-
-      <!-- Hidden inputs for JavaScript-managed users -->
-      {#if predefinedMode}
-        {#each data.predefinedUsers as user, i}
-          <input type="hidden" name="user_{i}" value={user} />
-        {/each}
-      {:else}
-        {#each users as user, i}
-          <input type="hidden" name="user_{i}" value={user} />
-        {/each}
-      {/if}
-    </div>
-
-    <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={formData.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 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" 
-                name="split_{user}"
-                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"
-                name="personal_{user}"
-                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}
+      paidBy={formData.paidBy}
+      currentUser={data.session?.user?.nickname || data.currentUser}
+      {predefinedMode}
+    />

    {#if error}
      <div class="error">{error}</div>
@@ -882,283 +614,9 @@
    }
  }

-  .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 {
-    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 {
-    background-color: var(--nord11);
-    transform: translateY(-1px);
-  }
-
-  .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);
-  }
-
-  .you-badge {
-    background-color: var(--blue);
-    color: white;
-    padding: 0.125rem 0.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .user-item .username {
-      color: var(--font-default-dark);
-    }
-  }
-
-  .predefined-users {
-    background-color: var(--nord5);
-    padding: 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--nord4);
-  }
-
-  .predefined-note {
-    margin: 0 0 1rem 0;
-    color: var(--nord2);
-    font-size: 0.9rem;
-    font-style: italic;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .predefined-users {
-      background-color: var(--nord2);
-      border-color: var(--nord3);
-    }
-
-    .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;
-  }
-
-  .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);
-  }


-  .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 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  .split-input {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .split-input label {
-    min-width: 100px;
-    margin-bottom: 0;
-  }
-
-  .split-input input {
-    max-width: 120px;
-  }
-
-  .split-preview {
-    background-color: 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;
-  }
-
-  .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: var(--green);
-    font-weight: 500;
-  }
-
-  .amount.negative {
-    color: var(--red);
-    font-weight: 500;
-  }

  .error {
    background-color: var(--nord6);
@@ -1232,59 +690,6 @@
    }
  }

-  .personal-splits {
-    margin-top: 1rem;
-  }
-
-  .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);
-    }
-  }
-
-  .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);
-    }
-  }
-
-  .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;
-  }

  /* Progressive enhancement styles */
  .no-js-only {
--- a/src/routes/cospend/payments/edit/[id]/+page.svelte
+++ b/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,6 +13,7 @@
  let uploading = false;
  let error = null;
  let imageFile = null;
+  let imagePreview = '';
  
  $: categoryOptions = getCategoryOptions();

@@ -33,6 +36,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 +74,7 @@
      const result = await response.json();
      payment.image = result.imageUrl;
      imageFile = null;
+      imagePreview = '';
    } catch (err) {
      error = err.message;
    } finally {
@@ -60,18 +82,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;

@@ -147,9 +157,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 
@@ -212,43 +220,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 +252,7 @@
            {/each}
          </div>
          <p class="note">Note: To modify splits, please delete and recreate the payment.</p>
-        </div>
+        </FormSection>
      {/if}

      <div class="form-actions">
@@ -551,101 +537,6 @@
    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 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;
-  }
-
-  .btn-remove {
-    background-color: var(--red);
-    color: white;
-    border: none;
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    font-size: 0.9rem;
-    transition: all 0.2s;
-  }
-
-  .btn-remove:hover {
-    background-color: var(--nord11);
-    transform: translateY(-1px);
-  }
-
-  .upload-label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: var(--nord2);
-    cursor: pointer;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .upload-label {
-      color: var(--nord5);
-    }
-  }
-
-  .file-input {
-    width: 100%;
-    padding: 0.75rem;
-    border: 2px dashed var(--nord4);
-    border-radius: 0.5rem;
-    background-color: var(--nord5);
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .file-input:hover {
-    border-color: var(--blue);
-    background-color: var(--nord4);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .file-input {
-      background-color: var(--nord2);
-      border-color: var(--nord3);
-    }
-
-    .file-input:hover {
-      background-color: var(--nord3);
-    }
-  }
-
-  .file-input:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .upload-status {
-    margin-top: 0.5rem;
-    color: var(--blue);
-    font-size: 0.9rem;
-    text-align: center;
-  }

  @media (max-width: 600px) {
    .edit-payment {
--- a/src/routes/cospend/recurring/edit/[id]/+page.svelte
+++ b/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;

@@ -30,7 +32,6 @@
  let loading = false;
  let loadingPayment = true;
  let error = null;
-  let personalTotalError = false;
  let predefinedMode = isPredefinedUsersMode();
  let cronError = false;
  let nextExecutionPreview = '';
@@ -86,28 +87,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 +94,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 +135,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 +184,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();
@@ -460,129 +349,24 @@
        {/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}
+        paidBy={formData.paidBy}
+        currentUser={data.session?.user?.nickname}
+        {predefinedMode}
+      />

      {#if error}
        <div class="error">{error}</div>
@@ -616,11 +400,11 @@

  .header h1 {
    margin: 0;
-    color: #333;
+    color: var(--nord0);
  }

  .back-link {
-    color: #1976d2;
+    color: var(--blue);
    text-decoration: none;
  }

@@ -637,16 +421,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 +449,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 +497,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 +512,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 +557,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 +572,71 @@
  }

  .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);
+    }
  }

  @media (max-width: 600px) {
--- a/src/routes/cospend/settle/+page.server.ts
+++ b/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')
+        }
+      });
+    }
+  }
 };
--- a/src/routes/cospend/settle/+page.svelte
+++ b/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;