feat: add EN/DE internationalization to cospend section

Move cospend routes to parameterized [cospendRoot=cospendRoot] supporting both /cospend (DE) and /expenses (EN). Add cospendI18n.ts with 100+ translation keys covering all pages, components, categories, frequency descriptions, and error messages. Translate BarChart legend, ImageUpload, UsersList, SplitMethodSelector, DebtBreakdown, EnhancedBalance, and PaymentModal. Update LanguageSelector and hooks.server.ts for /expenses.
2026-04-08 15:46:00 +02:00
parent eadc391b1a
commit a5de45f56a
35 changed files with 991 additions and 458 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.11.3",
+	"version": "1.12.0",
 	"private": true,
 	"type": "module",
 	"scripts": {
--- a/src/hooks.server.ts
+++ b/src/hooks.server.ts
@@ -37,10 +37,10 @@ async function authorization({ event, resolve }: Parameters<Handle>[0]) {
 	}

 	// Protect cospend routes and API endpoints
-	if (event.url.pathname.startsWith('/cospend') || event.url.pathname.startsWith('/api/cospend')) {
+	if (event.url.pathname.startsWith('/cospend') || event.url.pathname.startsWith('/expenses') || event.url.pathname.startsWith('/api/cospend')) {
 		if (!session) {
 			// Allow share-token access to shopping list routes
-			const isShoppingRoute = event.url.pathname.startsWith('/cospend/list') || event.url.pathname.startsWith('/api/cospend/list');
+			const isShoppingRoute = event.url.pathname.startsWith('/cospend/list') || event.url.pathname.startsWith('/expenses/list') || event.url.pathname.startsWith('/api/cospend/list');
 			const shareToken = event.url.searchParams.get('token');
 			if (isShoppingRoute && shareToken) {
 				const { validateShareToken } = await import('$lib/server/shoppingAuth');
--- a/src/lib/components/ImageUpload.svelte
+++ b/src/lib/components/ImageUpload.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
+  import { t } from '$lib/js/cospendI18n';
+
  let {
    imagePreview = $bindable(''),
    imageFile = $bindable(null),
    uploading = $bindable(false),
    currentImage = $bindable(null),
-    title = 'Receipt Image',
+    title = undefined as string | undefined,
+    lang = 'de' as 'en' | 'de',
    onerror,
    onimageSelected,
    onimageRemoved,
@@ -15,23 +18,26 @@
    uploading?: boolean,
    currentImage?: string | null,
    title?: string,
+    lang?: 'en' | 'de',
    onerror?: (message: string) => void,
    onimageSelected?: (file: File) => void,
    onimageRemoved?: () => void,
    oncurrentImageRemoved?: () => void
  }>();

+  const displayTitle = $derived(title ?? t('receipt_image', lang));
+
  function handleImageChange(event: Event) {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      if (file.size > 5 * 1024 * 1024) {
-        onerror?.('File size must be less than 5MB');
+        onerror?.(t('file_too_large', lang));
        return;
      }

      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
      if (!allowedTypes.includes(file.type)) {
-        onerror?.('Please select a valid image file (JPEG, PNG, WebP)');
+        onerror?.(t('invalid_image', lang));
        return;
      }

@@ -60,14 +66,14 @@
 </script>

 <div class="form-section">
-  <h2>{title}</h2>
+  <h2>{displayTitle}</h2>

  {#if currentImage}
    <div class="current-image">
-      <img src={currentImage} alt="Receipt" class="receipt-preview" />
+      <img src={currentImage} alt={t('receipt', lang)} class="receipt-preview" />
      <div class="image-actions">
        <button type="button" class="btn-remove" onclick={removeCurrentImage}>
-          Remove Image
+          {t('remove_image', lang)}
        </button>
      </div>
    </div>
@@ -75,9 +81,9 @@

  {#if imagePreview}
    <div class="image-preview">
-      <img src={imagePreview} alt="Receipt preview" />
+      <img src={imagePreview} alt={t('receipt', lang)} />
      <button type="button" class="remove-image" onclick={removeImage}>
-        Remove Image
+        {t('remove_image', lang)}
      </button>
    </div>
  {:else}
@@ -89,7 +95,7 @@
            <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>
+          <p>{currentImage ? t('replace_image', lang) : t('upload_receipt', lang)}</p>
          <small>JPEG, PNG, WebP (max 5MB)</small>
        </div>
      </label>
@@ -105,7 +111,7 @@
  {/if}

  {#if uploading}
-    <div class="upload-status">Uploading image...</div>
+    <div class="upload-status">{t('uploading_image', lang)}</div>
  {/if}
 </div>

--- a/src/lib/components/LanguageSelector.svelte
+++ b/src/lib/components/LanguageSelector.svelte
@@ -4,6 +4,7 @@
 	import { recipeTranslationStore } from '$lib/stores/recipeTranslation';
 	import { languageStore } from '$lib/stores/language';
 	import { convertFitnessPath } from '$lib/js/fitnessI18n';
+	import { convertCospendPath } from '$lib/js/cospendI18n';
 	import { onMount } from 'svelte';

 	let { lang = undefined }: { lang?: 'de' | 'en' | 'la' } = $props();
@@ -41,6 +42,10 @@
 			// Latin route — no language switching needed
 		} else if (path.startsWith('/fitness')) {
 			// Language is determined by sub-route slugs; don't override store
+		} else if (path.startsWith('/cospend')) {
+			languageStore.set('de');
+		} else if (path.startsWith('/expenses')) {
+			languageStore.set('en');
 		} else {
 			// On other pages, read from localStorage
 			if (typeof localStorage !== 'undefined') {
@@ -83,6 +88,10 @@
 			return convertFitnessPath(path, targetLang);
 		}

+		if ((path.startsWith('/cospend') || path.startsWith('/expenses')) && targetLang !== 'la') {
+			return convertCospendPath(path, targetLang);
+		}
+
 		// Use translated recipe slugs from page data when available (works during SSR)
 		const pageData = $page.data;
 		if (targetLang === 'en' && path.startsWith('/rezepte')) {
@@ -125,7 +134,8 @@
 		// dispatch event and stay on the page
 		if (!path.startsWith('/rezepte') && !path.startsWith('/recipes')
 			&& !path.startsWith('/glaube') && !path.startsWith('/faith') && !path.startsWith('/fides')
-			&& !path.startsWith('/fitness')) {
+			&& !path.startsWith('/fitness')
+			&& !path.startsWith('/cospend') && !path.startsWith('/expenses')) {
 			window.dispatchEvent(new CustomEvent('languagechange', { detail: { lang } }));
 			return;
 		}
@@ -137,6 +147,13 @@
 			return;
 		}

+		// Handle cospend/expenses pages
+		if ((path.startsWith('/cospend') || path.startsWith('/expenses')) && lang !== 'la') {
+			const newPath = convertCospendPath(path, lang);
+			await goto(newPath);
+			return;
+		}
+
 		// Handle fitness pages
 		if (path.startsWith('/fitness')) {
 			const newPath = convertFitnessPath(path, lang);
--- a/src/lib/components/cospend/BarChart.svelte
+++ b/src/lib/components/cospend/BarChart.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
  import { Chart, registerables } from 'chart.js';
+  import { paymentCategoryName } from '$lib/js/cospendI18n';

  /**
   * @type {{
@@ -10,7 +11,7 @@
   *   onFilterChange?: ((categories: string[] | null) => void) | null
   * }}
   */
-  let { data = { labels: [], datasets: [] }, title = '', height = '400px', onFilterChange = null } = $props();
+  let { data = { labels: [], datasets: [] }, title = '', height = '400px', onFilterChange = null, lang = /** @type {'en' | 'de'} */ ('de') } = $props();

  /** @type {HTMLCanvasElement | undefined} */
  let canvas = $state(undefined);
@@ -73,7 +74,7 @@
    } else {
      const visible = c.data.datasets
        .filter((/** @type {any} */ _, /** @type {number} */ idx) => !c.getDatasetMeta(idx).hidden)
-        .map((/** @type {any} */ ds) => /** @type {string} */ (ds.label ?? '').toLowerCase());
+        .map((/** @type {any} */ ds) => /** @type {string} */ (ds._categoryKey ?? ds.label ?? '').toLowerCase());
      onFilterChange(visible);
    }
  }
@@ -104,11 +105,12 @@

    // Process datasets with colors and capitalize labels
    const processedDatasets = plainDatasets.map((/** @type {{ label: string, data: number[] }} */ dataset, /** @type {number} */ index) => ({
-      label: dataset.label.charAt(0).toUpperCase() + dataset.label.slice(1),
+      label: paymentCategoryName(dataset.label, lang),
      data: dataset.data,
      backgroundColor: getCategoryColor(dataset.label, index),
      borderColor: getCategoryColor(dataset.label, index),
-      borderWidth: 1
+      borderWidth: 1,
+      _categoryKey: dataset.label
    }));

    chart = new Chart(ctx, {
@@ -334,6 +336,16 @@
    });
  }

+  // Recreate chart when lang changes
+  let prevLang = lang;
+  $effect(() => {
+    const currentLang = lang;
+    if (currentLang !== prevLang) {
+      prevLang = currentLang;
+      untrack(() => { if (canvas) createChart(); });
+    }
+  });
+
  onMount(() => {
    createChart();
    // Enable animations for subsequent updates (legend toggles, etc.)
--- a/src/lib/components/cospend/DebtBreakdown.svelte
+++ b/src/lib/components/cospend/DebtBreakdown.svelte
@@ -1,7 +1,12 @@
 <script>
  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
  import ProfilePicture from './ProfilePicture.svelte';
  import { formatCurrency } from '$lib/utils/formatters';
+  import { detectCospendLang, locale, t } from '$lib/js/cospendI18n';
+
+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const loc = $derived(locale(lang));

  /**
   * @typedef {{ username: string, netAmount: number, transactions: Array<any> }} DebtEntry
@@ -61,19 +66,19 @@

 {#if !shouldHide}
 <div class="debt-breakdown">
-  <h2>Debt Overview</h2>
+  <h2>{t('debt_overview', lang)}</h2>

  {#if loading}
-    <div class="loading">Loading debt breakdown...</div>
+    <div class="loading">{t('loading_debt_breakdown', lang)}</div>
  {:else if error}
-    <div class="error">Error: {error}</div>
+    <div class="error">{t('error_prefix', lang)}: {error}</div>
  {:else}
    <div class="debt-sections">
      {#if debtData.whoOwesMe.length > 0}
        <div class="debt-section owed-to-me">
-          <h3>Who owes you</h3>
+          <h3>{t('who_owes_you', lang)}</h3>
          <div class="total-amount positive">
-            Total: {formatCurrency(debtData.totalOwedToMe, 'CHF', 'de-CH')}
+            {t('total', lang)}: {formatCurrency(debtData.totalOwedToMe, 'CHF', loc)}
          </div>

          <div class="debt-list">
@@ -83,11 +88,11 @@
                  <ProfilePicture username={debt.username} size={40} />
                  <div class="user-details">
                    <span class="username">{debt.username}</span>
-                    <span class="amount positive">{formatCurrency(debt.netAmount, 'CHF', 'de-CH')}</span>
+                    <span class="amount positive">{formatCurrency(debt.netAmount, 'CHF', loc)}</span>
                  </div>
                </div>
                <div class="transaction-count">
-                  {debt.transactions.length} transaction{debt.transactions.length !== 1 ? 's' : ''}
+                  {debt.transactions.length} {debt.transactions.length !== 1 ? t('transactions', lang) : t('transaction', lang)}
                </div>
              </div>
            {/each}
@@ -97,9 +102,9 @@

      {#if debtData.whoIOwe.length > 0}
        <div class="debt-section owe-to-others">
-          <h3>You owe</h3>
+          <h3>{t('you_owe_section', lang)}</h3>
          <div class="total-amount negative">
-            Total: {formatCurrency(debtData.totalIOwe, 'CHF', 'de-CH')}
+            {t('total', lang)}: {formatCurrency(debtData.totalIOwe, 'CHF', loc)}
          </div>

          <div class="debt-list">
@@ -109,11 +114,11 @@
                  <ProfilePicture username={debt.username} size={40} />
                  <div class="user-details">
                    <span class="username">{debt.username}</span>
-                    <span class="amount negative">{formatCurrency(debt.netAmount, 'CHF', 'de-CH')}</span>
+                    <span class="amount negative">{formatCurrency(debt.netAmount, 'CHF', loc)}</span>
                  </div>
                </div>
                <div class="transaction-count">
-                  {debt.transactions.length} transaction{debt.transactions.length !== 1 ? 's' : ''}
+                  {debt.transactions.length} {debt.transactions.length !== 1 ? t('transactions', lang) : t('transaction', lang)}
                </div>
              </div>
            {/each}
--- a/src/lib/components/cospend/EnhancedBalance.svelte
+++ b/src/lib/components/cospend/EnhancedBalance.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
  import ProfilePicture from './ProfilePicture.svelte';
  import { formatCurrency as formatCurrencyUtil } from '$lib/utils/formatters';
+  import { detectCospendLang, locale, t } from '$lib/js/cospendI18n';
+
+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const loc = $derived(locale(lang));

  let { initialBalance = null, initialDebtData = null } = $props<{ initialBalance?: any, initialDebtData?: any }>();

@@ -98,7 +103,7 @@
  }

  function formatCurrency(amount: number) {
-    return formatCurrencyUtil(Math.abs(amount), 'CHF', 'de-CH');
+    return formatCurrencyUtil(Math.abs(amount), 'CHF', loc);
  }

  // Export refresh method for parent components to call
@@ -117,26 +122,26 @@
    
    {#if loading}
      <div class="loading-content">
-        <h3>Your Balance</h3>
-        <div class="loading">Loading...</div>
+        <h3>{t('your_balance', lang)}</h3>
+        <div class="loading">{t('loading', lang)}</div>
      </div>
    {:else if error}
-      <h3>Your Balance</h3>
-      <div class="error">Error: {error}</div>
+      <h3>{t('your_balance', lang)}</h3>
+      <div class="error">{t('error_prefix', lang)}: {error}</div>
    {:else if shouldShowIntegratedView}
      <!-- Enhanced view with single user debt -->
-      <h3>Your Balance</h3>
+      <h3>{t('your_balance', lang)}</h3>
      <div class="enhanced-balance">
        <div class="main-amount">
          {#if balance.netBalance < 0}
            <span class="positive">+{formatCurrency(balance.netBalance)}</span>
-            <small>You are owed</small>
+            <small>{t('you_are_owed', lang)}</small>
          {:else if balance.netBalance > 0}
            <span class="negative">-{formatCurrency(balance.netBalance)}</span>
-            <small>You owe</small>
+            <small>{t('you_owe_balance', lang)}</small>
          {:else}
            <span class="even">CHF 0.00</span>
-            <small>You're all even</small>
+            <small>{t('all_even', lang)}</small>
          {/if}
        </div>

@@ -149,9 +154,9 @@
                <span class="username">{singleDebtUser.user.username}</span>
                <span class="debt-description">
                  {#if singleDebtUser.type === 'owesMe'}
-                    owes you {formatCurrency(singleDebtUser.amount)}
+                    {t('owes_you_balance', lang)} {formatCurrency(singleDebtUser.amount)}
                  {:else}
-                    you owe {formatCurrency(singleDebtUser.amount)}
+                    {t('you_owe_user', lang)} {formatCurrency(singleDebtUser.amount)}
                  {/if}
                </span>
              </div>
@@ -161,24 +166,24 @@
          </div>
          <div class="transaction-count">
            {#if singleDebtUser && singleDebtUser.user && singleDebtUser.user.transactions}
-              {singleDebtUser.user.transactions.length} transaction{singleDebtUser.user.transactions.length !== 1 ? 's' : ''}
+              {singleDebtUser.user.transactions.length} {singleDebtUser.user.transactions.length !== 1 ? t('transactions', lang) : t('transaction', lang)}
            {/if}
          </div>
        </div>
      </div>
    {:else}
      <!-- Standard balance view -->
-      <h3>Your Balance</h3>
+      <h3>{t('your_balance', lang)}</h3>
      <div class="amount">
        {#if balance.netBalance < 0}
          <span class="positive">+{formatCurrency(balance.netBalance)}</span>
-          <small>You are owed</small>
+          <small>{t('you_are_owed', lang)}</small>
        {:else if balance.netBalance > 0}
          <span class="negative">-{formatCurrency(balance.netBalance)}</span>
-          <small>You owe</small>
+          <small>{t('you_owe_balance', lang)}</small>
        {:else}
          <span class="even">CHF 0.00</span>
-          <small>You're all even</small>
+          <small>{t('all_even', lang)}</small>
        {/if}
      </div>
    {/if}
--- a/src/lib/components/cospend/PaymentModal.svelte
+++ b/src/lib/components/cospend/PaymentModal.svelte
@@ -4,14 +4,19 @@
  import { page } from '$app/stores';
  import ProfilePicture from './ProfilePicture.svelte';
  import EditButton from '$lib/components/EditButton.svelte';
-  import { getCategoryEmoji, getCategoryName, PAYMENT_CATEGORIES } from '$lib/utils/categories';
+  import { getCategoryEmoji } from '$lib/utils/categories';
  import { formatCurrency as formatCurrencyUtil } from '$lib/utils/formatters';
+  import { detectCospendLang, cospendRoot, t, locale, splitDescription, paymentCategoryName } from '$lib/js/cospendI18n';

  let { paymentId, onclose, onpaymentDeleted } = $props();

  // Get session from page store
  let session = $derived($page.data?.session);

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));
+
  /**
   * @typedef {{
   *   _id?: string,
@@ -76,7 +81,7 @@

  function closeModal() {
    // Use shallow routing to go back to dashboard without full navigation
-    goto('/cospend/dash', { replaceState: true, noScroll: true, keepFocus: true });
+    goto(`/${root}/dash`, { replaceState: true, noScroll: true, keepFocus: true });
    onclose?.();
  }

@@ -89,33 +94,23 @@

  /** @param {number} amount */
  function formatCurrency(amount) {
-    return formatCurrencyUtil(Math.abs(amount), 'CHF', 'de-CH');
+    return formatCurrencyUtil(Math.abs(amount), 'CHF', loc);
  }

  /** @param {string} dateString */
  function formatDate(dateString) {
-    return new Date(dateString).toLocaleDateString('de-CH');
+    return new Date(dateString).toLocaleDateString(loc);
  }

  /** @param {PaymentData} payment */
  function getSplitDescription(payment) {
-    if (!payment.splits || payment.splits.length === 0) return 'No splits';
-
-    if (payment.splitMethod === 'equal') {
-      return `Split equally among ${payment.splits.length} people`;
-    } else if (payment.splitMethod === 'full') {
-      return `Paid in full by ${payment.paidBy}`;
-    } else if (payment.splitMethod === 'personal_equal') {
-      return `Personal amounts + equal split among ${payment.splits.length} people`;
-    } else {
-      return `Custom split among ${payment.splits.length} people`;
-    }
+    return splitDescription(payment, lang);
  }

  let deleting = $state(false);

  async function deletePayment() {
-    if (!confirm('Are you sure you want to delete this payment? This action cannot be undone.')) {
+    if (!confirm(t('delete_payment_confirm', lang))) {
      return;
    }

@@ -143,7 +138,7 @@

 <div class="panel-content" bind:this={modal}>
  <div class="panel-header">
-      <h2>Payment Details</h2>
+      <h2>{t('payment_details', lang)}</h2>
      <button class="close-button" onclick={closeModal} aria-label="Close modal">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
@@ -154,9 +149,9 @@

  <div class="panel-body">
      {#if loading}
-        <div class="loading">Loading payment...</div>
+        <div class="loading">{t('loading_payments', lang)}</div>
      {:else if error}
-        <div class="error">Error: {error}</div>
+        <div class="error">{t('error_prefix', lang)}: {error}</div>
      {:else if payment}
        <div class="payment-details">
          <div class="payment-header">
@@ -171,7 +166,7 @@
            </div>
            {#if payment.image}
              <div class="receipt-image">
-                <img src={payment.image} alt="Receipt" />
+                <img src={payment.image} alt={t('receipt', lang)} />
              </div>
            {/if}
          </div>
@@ -179,30 +174,30 @@
          <div class="payment-info">
            <div class="info-grid">
              <div class="info-item">
-                <span class="label">Date:</span>
+                <span class="label">{t('date', lang)}</span>
                <span class="value">{formatDate(payment.date)}</span>
              </div>
              <div class="info-item">
-                <span class="label">Paid by:</span>
+                <span class="label">{t('paid_by_label', lang)}</span>
                <span class="value">{payment.paidBy}</span>
              </div>
              <div class="info-item">
-                <span class="label">Created by:</span>
+                <span class="label">{t('created_by', lang)}</span>
                <span class="value">{payment.createdBy}</span>
              </div>
              <div class="info-item">
-                <span class="label">Category:</span>
-                <span class="value">{getCategoryName(payment.category || 'groceries')}</span>
+                <span class="label">{t('category_label', lang)}</span>
+                <span class="value">{paymentCategoryName(payment.category || 'groceries', lang)}</span>
              </div>
              <div class="info-item">
-                <span class="label">Split method:</span>
+                <span class="label">{t('split_method_label', lang)}</span>
                <span class="value">{getSplitDescription(payment)}</span>
              </div>
            </div>

            {#if payment.description}
              <div class="description">
-                <h3>Description</h3>
+                <h3>{t('description', lang)}</h3>
                <p>{payment.description}</p>
              </div>
            {/if}
@@ -210,7 +205,7 @@

          {#if payment.splits && payment.splits.length > 0}
            <div class="splits-section">
-              <h3>Split Details</h3>
+              <h3>{t('split_details', lang)}</h3>
              <div class="splits-list">
                {#each payment.splits as split}
                  <div class="split-item" class:current-user={split.username === session?.user?.nickname}>
@@ -219,17 +214,17 @@
                      <div class="user-info">
                        <span class="username">{split.username}</span>
                        {#if split.username === session?.user?.nickname}
-                          <span class="you-badge">You</span>
+                          <span class="you-badge">{t('you', lang)}</span>
                        {/if}
                      </div>
                    </div>
                    <div class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                      {#if split.amount > 0}
-                        owes {formatCurrency(split.amount)}
+                        {t('owes', lang)} {formatCurrency(split.amount)}
                      {:else if split.amount < 0}
-                        owed {formatCurrency(split.amount)}
+                        {t('owed', lang)} {formatCurrency(split.amount)}
                      {:else}
-                        even
+                        {t('even', lang)}
                      {/if}
                    </div>
                  </div>
@@ -239,7 +234,7 @@
          {/if}

          <div class="panel-actions">
-            <button class="btn-secondary" onclick={closeModal}>Close</button>
+            <button class="btn-secondary" onclick={closeModal}>{t('close', lang)}</button>
          </div>
        </div>
      {/if}
@@ -247,7 +242,7 @@
 </div>

 {#if payment}
-  <EditButton href="/cospend/payments/edit/{paymentId}" />
+  <EditButton href="/{root}/payments/edit/{paymentId}" />
 {/if}

 <style>
--- a/src/lib/components/cospend/SplitMethodSelector.svelte
+++ b/src/lib/components/cospend/SplitMethodSelector.svelte
@@ -1,5 +1,9 @@
 <script>
  import ProfilePicture from './ProfilePicture.svelte';
+  import { page } from '$app/stores';
+  import { detectCospendLang, t } from '$lib/js/cospendI18n';
+
+  const lang = $derived(detectCospendLang($page.url.pathname));

  let {
    splitMethod = $bindable('equal'),
@@ -18,20 +22,20 @@
  // Reactive text for "Paid in Full" option
  let paidInFullText = $derived((() => {
    if (!paidBy) {
-      return 'Paid in Full';
+      return t('paid_in_full', lang);
    }

    // Special handling for 2-user predefined setup
    if (predefinedMode && users.length === 2) {
      const otherUser = users.find((/** @type {string} */ user) => user !== paidBy);
-      return otherUser ? `Paid in Full for ${otherUser}` : 'Paid in Full';
+      return otherUser ? `${t('paid_in_full_for', lang)} ${otherUser}` : t('paid_in_full', lang);
    }

    // General case
    if (paidBy === currentUser) {
-      return 'Paid in Full by You';
+      return t('paid_in_full_by_you', lang);
    } else {
-      return `Paid in Full by ${paidBy}`;
+      return `${t('paid_in_full_by', lang)} ${paidBy}`;
    }
  })());

@@ -128,21 +132,21 @@
 </script>

 <div class="form-section">
-  <h2>Split Method</h2>
+  <h2>{t('split_method', lang)}</h2>

  <div class="form-group">
-    <label for="splitMethod">How should this payment be split?</label>
+    <label for="splitMethod">{t('how_split', lang)}</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="equal">{predefinedMode && users.length === 2 ? t('split_5050', lang) : t('equal_split', lang)}</option>
+      <option value="personal_equal">{t('personal_equal_split', lang)}</option>
      <option value="full">{paidInFullText}</option>
-      <option value="proportional">Custom Proportions</option>
+      <option value="proportional">{t('custom_proportions', lang)}</option>
    </select>
  </div>

  {#if splitMethod === 'proportional'}
    <div class="proportional-splits">
-      <h3>Custom Split Amounts</h3>
+      <h3>{t('custom_split_amounts', lang)}</h3>
      {#each users as user}
        <div class="split-input">
          <label for="split_{user}">{user}</label>
@@ -161,8 +165,8 @@

  {#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>
+      <h3>{t('personal_amounts', lang)}</h3>
+      <p class="description">{t('personal_amounts_desc', lang)}</p>
      {#each users as user}
        <div class="split-input">
          <label for="personal_{user}">{user}</label>
@@ -180,10 +184,10 @@
      {#if amount}
        {@const personalTotal = Object.values(personalAmounts).reduce((/** @type {number} */ sum, /** @type {number} */ val) => sum + (Number(val) || 0), 0)}
        <div class="remainder-info" class:error={personalTotalError}>
-          <span>Total Personal: {currency} {personalTotal.toFixed(2)}</span>
-          <span>Remainder to Split: {currency} {Math.max(0, Number(amount) - personalTotal).toFixed(2)}</span>
+          <span>{t('total_personal', lang)}: {currency} {personalTotal.toFixed(2)}</span>
+          <span>{t('remainder_to_split', lang)}: {currency} {Math.max(0, Number(amount) - personalTotal).toFixed(2)}</span>
          {#if personalTotalError}
-            <div class="error-message">Warning: Personal amounts exceed total payment amount!</div>
+            <div class="error-message">{t('personal_exceeds_total', lang)}</div>
          {/if}
        </div>
      {/if}
@@ -192,7 +196,7 @@

  {#if Object.keys(splitAmounts).length > 0}
    <div class="split-preview">
-      <h3>Split Preview</h3>
+      <h3>{t('split_preview', lang)}</h3>
      {#each users as user}
        <div class="split-item">
          <div class="split-user">
@@ -201,11 +205,11 @@
          </div>
          <span class="amount" class:positive={splitAmounts[user] < 0} class:negative={splitAmounts[user] > 0}>
            {#if splitAmounts[user] > 0}
-              owes {currency} {splitAmounts[user].toFixed(2)}
+              {t('owes', lang)} {currency} {splitAmounts[user].toFixed(2)}
            {:else if splitAmounts[user] < 0}
-              is owed {currency} {Math.abs(splitAmounts[user]).toFixed(2)}
+              {t('is_owed', lang)} {currency} {Math.abs(splitAmounts[user]).toFixed(2)}
            {:else}
-              owes {currency} {splitAmounts[user].toFixed(2)}
+              {t('owes', lang)} {currency} {splitAmounts[user].toFixed(2)}
            {/if}
          </span>
        </div>
--- a/src/lib/components/cospend/UsersList.svelte
+++ b/src/lib/components/cospend/UsersList.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
  import ProfilePicture from './ProfilePicture.svelte';
+  import { t } from '$lib/js/cospendI18n';

  let {
    users = $bindable([]),
    currentUser = '',
    predefinedMode = false,
    canRemoveUsers = true,
-    newUser = $bindable('')
+    newUser = $bindable(''),
+    lang = 'de' as 'en' | 'de'
  } = $props<{
    users?: string[],
    currentUser?: string,
    predefinedMode?: boolean,
    canRemoveUsers?: boolean,
-    newUser?: string
+    newUser?: string,
+    lang?: 'en' | 'de'
  }>();

  function addUser() {
@@ -35,18 +38,18 @@
 </script>

 <div class="form-section">
-  <h2>Split Between Users</h2>
+  <h2>{t('split_between_users', lang)}</h2>

  {#if predefinedMode}
    <div class="predefined-users">
-      <p class="predefined-note">Splitting between predefined users:</p>
+      <p class="predefined-note">{t('predefined_note', lang)}</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>
+              <span class="you-badge">{t('you', lang)}</span>
            {/if}
          </div>
        {/each}
@@ -59,11 +62,11 @@
          <ProfilePicture username={user} size={32} />
          <span class="username">{user}</span>
          {#if user === currentUser}
-            <span class="you-badge">You</span>
+            <span class="you-badge">{t('you', lang)}</span>
          {/if}
          {#if canRemoveUsers && user !== currentUser}
            <button type="button" class="remove-user" onclick={() => removeUser(user)}>
-              Remove
+              {t('remove', lang)}
            </button>
          {/if}
        </div>
@@ -74,10 +77,10 @@
      <input
        type="text"
        bind:value={newUser}
-        placeholder="Add user..."
+        placeholder={t('add_user_placeholder', lang)}
        onkeydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
      />
-      <button type="button" onclick={addUser}>Add User</button>
+      <button type="button" onclick={addUser}>{t('add_user', lang)}</button>
    </div>
  {/if}
 </div>
--- a/src/lib/js/cospendI18n.ts
+++ b/src/lib/js/cospendI18n.ts
@@ -0,0 +1,451 @@
+/** Cospend route i18n — slug mappings and UI translations */
+
+/** Detect language from a cospend path by checking the root segment */
+export function detectCospendLang(pathname: string): 'en' | 'de' {
+	const first = pathname.split('/').filter(Boolean)[0];
+	return first === 'expenses' ? 'en' : 'de';
+}
+
+/** Convert a cospend path to the target language */
+export function convertCospendPath(pathname: string, targetLang: 'en' | 'de'): string {
+	const targetRoot = targetLang === 'en' ? 'expenses' : 'cospend';
+	return pathname.replace(/^\/(cospend|expenses)/, `/${targetRoot}`);
+}
+
+/** Get the root slug for a given language */
+export function cospendRoot(lang: 'en' | 'de'): string {
+	return lang === 'en' ? 'expenses' : 'cospend';
+}
+
+/** Get translated nav labels */
+export function cospendLabels(lang: 'en' | 'de') {
+	return {
+		dash: lang === 'en' ? 'Dashboard' : 'Dashboard',
+		list: lang === 'en' ? 'List' : 'Liste',
+		payments: lang === 'en' ? 'All Payments' : 'Alle Zahlungen',
+		recurring: lang === 'en' ? 'Recurring' : 'Wiederkehrend'
+	};
+}
+
+type Translations = Record<string, Record<string, string>>;
+
+const translations: Translations = {
+	// Page titles
+	cospend_title: { en: 'Expenses - Expense Sharing', de: 'Cospend - Ausgabenteilung' },
+	all_payments_title: { en: 'All Payments', de: 'Alle Zahlungen' },
+	settle_title: { en: 'Settle Debts', de: 'Schulden begleichen' },
+	recurring_title: { en: 'Recurring Payments', de: 'Wiederkehrende Zahlungen' },
+	shopping_list_title: { en: 'Shopping List', de: 'Einkaufsliste' },
+	payment_details: { en: 'Payment Details', de: 'Zahlungsdetails' },
+
+	// Dashboard
+	cospend: { en: 'Expenses', de: 'Cospend' },
+	settle_debts: { en: 'Settle Debts', de: 'Schulden begleichen' },
+	monthly_expenses_chart: { en: 'Monthly Expenses by Category', de: 'Monatliche Ausgaben nach Kategorie' },
+	loading_monthly: { en: 'Loading monthly expenses chart...', de: 'Monatliche Ausgaben werden geladen...' },
+	loading_recent: { en: 'Loading recent activity...', de: 'Letzte Aktivitäten werden geladen...' },
+	recent_activity: { en: 'Recent Activity', de: 'Letzte Aktivität' },
+	clear_filter: { en: 'Clear filter', de: 'Filter löschen' },
+	no_recent_in: { en: 'No recent activity in', de: 'Keine Aktivität in' },
+	paid_by: { en: 'Paid by', de: 'Bezahlt von' },
+	payment: { en: 'Payment', de: 'Zahlung' },
+
+	// All Payments page
+	loading_payments: { en: 'Loading payments...', de: 'Zahlungen werden geladen...' },
+	no_payments_yet: { en: 'No payments yet', de: 'Noch keine Zahlungen' },
+	start_first_expense: { en: 'Start by adding your first shared expense', de: 'Füge deine erste geteilte Ausgabe hinzu' },
+	add_first_payment: { en: 'Add Your First Payment', de: 'Erste Zahlung hinzufügen' },
+	settlement: { en: 'Settlement', de: 'Ausgleich' },
+	split_details: { en: 'Split Details', de: 'Aufteilung' },
+	owes: { en: 'owes', de: 'schuldet' },
+	owed: { en: 'owed', de: 'bekommt' },
+	even: { en: 'even', de: 'ausgeglichen' },
+	previous: { en: '← Previous', de: '← Zurück' },
+	next: { en: 'Next →', de: 'Weiter →' },
+	load_more: { en: 'Load More', de: 'Mehr laden' },
+	loading_ellipsis: { en: 'Loading...', de: 'Laden...' },
+	delete_payment_confirm: { en: 'Are you sure you want to delete this payment?', de: 'Diese Zahlung wirklich löschen?' },
+
+	// Payment detail labels
+	date: { en: 'Date:', de: 'Datum:' },
+	paid_by_label: { en: 'Paid by:', de: 'Bezahlt von:' },
+	created_by: { en: 'Created by:', de: 'Erstellt von:' },
+	category_label: { en: 'Category:', de: 'Kategorie:' },
+	split_method_label: { en: 'Split method:', de: 'Aufteilungsart:' },
+	description: { en: 'Description', de: 'Beschreibung' },
+	exchange_rate: { en: 'Exchange rate', de: 'Wechselkurs' },
+	receipt: { en: 'Receipt', de: 'Beleg' },
+	receipt_image: { en: 'Receipt Image', de: 'Belegbild' },
+	remove_image: { en: 'Remove Image', de: 'Bild entfernen' },
+	replace_image: { en: 'Replace Image', de: 'Bild ersetzen' },
+	upload_receipt: { en: 'Upload Receipt Image', de: 'Beleg hochladen' },
+	uploading_image: { en: 'Uploading image...', de: 'Bild wird hochgeladen...' },
+	file_too_large: { en: 'File size must be less than 5MB', de: 'Dateigrösse muss unter 5MB sein' },
+	invalid_image: { en: 'Please select a valid image file (JPEG, PNG, WebP)', de: 'Bitte eine gültige Bilddatei wählen (JPEG, PNG, WebP)' },
+	you: { en: 'You', de: 'Du' },
+	close: { en: 'Close', de: 'Schliessen' },
+
+	// Split descriptions
+	no_splits: { en: 'No splits', de: 'Keine Aufteilung' },
+	split_equal: { en: 'Split equally among', de: 'Gleichmässig aufgeteilt auf' },
+	paid_full_by: { en: 'Paid in full by', de: 'Vollständig bezahlt von' },
+	personal_equal: { en: 'Personal amounts + equal split among', de: 'Persönliche Beträge + Gleichverteilung auf' },
+	custom_split: { en: 'Custom split among', de: 'Individuelle Aufteilung auf' },
+	people: { en: 'people', de: 'Personen' },
+
+	// Settle page
+	settle_subtitle: { en: 'Record payments to settle outstanding debts between users', de: 'Zahlungen erfassen, um offene Schulden auszugleichen' },
+	loading_debts: { en: 'Loading debt information...', de: 'Schuldeninformationen werden geladen...' },
+	all_settled: { en: 'All Settled!', de: 'Alles beglichen!' },
+	no_debts_msg: { en: 'No outstanding debts to settle. Everyone is even!', de: 'Keine offenen Schulden. Alle sind ausgeglichen!' },
+	back_to_dashboard: { en: 'Back to Dashboard', de: 'Zurück zum Dashboard' },
+	available_settlements: { en: 'Available Settlements', de: 'Mögliche Ausgleiche' },
+	money_owed_to_you: { en: "Money You're Owed", de: 'Geld, das du bekommst' },
+	owes_you: { en: 'owes you', de: 'schuldet dir' },
+	receive_payment: { en: 'Receive Payment', de: 'Zahlung empfangen' },
+	money_you_owe: { en: 'Money You Owe', de: 'Geld, das du schuldest' },
+	you_owe: { en: 'you owe', de: 'du schuldest' },
+	make_payment: { en: 'Make Payment', de: 'Zahlung leisten' },
+	settlement_details: { en: 'Settlement Details', de: 'Ausgleichsdetails' },
+	settlement_amount: { en: 'Settlement Amount', de: 'Ausgleichsbetrag' },
+	record_settlement: { en: 'Record Settlement', de: 'Ausgleich erfassen' },
+	recording_settlement: { en: 'Recording Settlement...', de: 'Ausgleich wird erfasst...' },
+	cancel: { en: 'Cancel', de: 'Abbrechen' },
+	settlement_type: { en: 'Settlement Type', de: 'Ausgleichsart' },
+	select_settlement: { en: 'Select settlement type', de: 'Ausgleichsart wählen' },
+	receive_from: { en: 'Receive', de: 'Empfangen' },
+	from: { en: 'from', de: 'von' },
+	pay_to: { en: 'Pay', de: 'Zahlen' },
+	to: { en: 'to', de: 'an' },
+	from_user: { en: 'From User', de: 'Von Benutzer' },
+	select_payer: { en: 'Select payer', de: 'Zahler wählen' },
+	to_user: { en: 'To User', de: 'An Benutzer' },
+	select_recipient: { en: 'Select recipient', de: 'Empfänger wählen' },
+	settlement_amount_chf: { en: 'Settlement Amount (CHF)', de: 'Ausgleichsbetrag (CHF)' },
+	error_select_settlement: { en: 'Please select a settlement and enter an amount', de: 'Bitte einen Ausgleich wählen und Betrag eingeben' },
+	error_valid_amount: { en: 'Please enter a valid positive amount', de: 'Bitte einen gültigen positiven Betrag eingeben' },
+	settlement_payment: { en: 'Settlement Payment', de: 'Ausgleichszahlung' },
+
+	// Recurring page
+	recurring_subtitle: { en: 'Automate your regular shared expenses', de: 'Automatisiere deine regelmässigen geteilten Ausgaben' },
+	show_active_only: { en: 'Show active only', de: 'Nur aktive anzeigen' },
+	loading_recurring: { en: 'Loading recurring payments...', de: 'Wiederkehrende Zahlungen werden geladen...' },
+	no_recurring: { en: 'No recurring payments found', de: 'Keine wiederkehrenden Zahlungen gefunden' },
+	no_recurring_desc: { en: 'Create your first recurring payment to automate regular expenses like rent, utilities, or subscriptions.', de: 'Erstelle deine erste wiederkehrende Zahlung für regelmässige Ausgaben wie Miete, Nebenkosten oder Abos.' },
+	active: { en: 'Active', de: 'Aktiv' },
+	inactive: { en: 'Inactive', de: 'Inaktiv' },
+	frequency: { en: 'Frequency:', de: 'Häufigkeit:' },
+	next_execution: { en: 'Next execution:', de: 'Nächste Ausführung:' },
+	last_executed: { en: 'Last executed:', de: 'Zuletzt ausgeführt:' },
+	ends: { en: 'Ends:', de: 'Endet:' },
+	split_between: { en: 'Split between:', de: 'Aufgeteilt zwischen:' },
+	gets: { en: 'gets', de: 'bekommt' },
+	edit: { en: 'Edit', de: 'Bearbeiten' },
+	pause: { en: 'Pause', de: 'Pausieren' },
+	activate: { en: 'Activate', de: 'Aktivieren' },
+	delete_: { en: 'Delete', de: 'Löschen' },
+	delete_recurring_confirm: { en: 'Are you sure you want to delete the recurring payment', de: 'Wiederkehrende Zahlung wirklich löschen' },
+
+	// Shopping list
+	items_done: { en: 'done', de: 'erledigt' },
+	add_item_placeholder: { en: 'Add item...', de: 'Artikel hinzufügen...' },
+	empty_list: { en: 'The shopping list is empty', de: 'Die Einkaufsliste ist leer' },
+	clear_checked: { en: 'Remove checked', de: 'Erledigte entfernen' },
+	share: { en: 'Share', de: 'Teilen' },
+
+	// Share modal
+	shared_links: { en: 'Shared Links', de: 'Geteilte Links' },
+	share_desc: { en: 'Anyone with an active link can edit the shopping list.', de: 'Jeder mit einem aktiven Link kann die Einkaufsliste bearbeiten.' },
+	loading: { en: 'Loading...', de: 'Laden...' },
+	no_active_links: { en: 'No active links.', de: 'Keine aktiven Links.' },
+	remaining: { en: 'remaining', de: 'noch' },
+	change: { en: 'Change', de: 'Ändern' },
+	copy_link: { en: 'Copy link', de: 'Link kopieren' },
+	create_new_link: { en: 'Create new link', de: 'Neuen Link erstellen' },
+	copied: { en: 'Copied', de: 'Kopiert' },
+	expired: { en: 'expired', de: 'abgelaufen' },
+
+	// TTL
+	ttl_1h: { en: '1 hour', de: '1 Stunde' },
+	ttl_6h: { en: '6 hours', de: '6 Stunden' },
+	ttl_24h: { en: '24 hours', de: '24 Stunden' },
+	ttl_3d: { en: '3 days', de: '3 Tage' },
+	ttl_7d: { en: '7 days', de: '7 Tage' },
+
+	// Edit modal
+	kategorie: { en: 'Category', de: 'Kategorie' },
+	icon: { en: 'Icon', de: 'Icon' },
+	search_icon: { en: 'Search icon...', de: 'Icon suchen...' },
+	save: { en: 'Save', de: 'Speichern' },
+	saving: { en: 'Saving...', de: 'Speichern...' },
+
+	// EnhancedBalance
+	your_balance: { en: 'Your Balance', de: 'Dein Saldo' },
+	you_are_owed: { en: 'You are owed', de: 'Du bekommst' },
+	you_owe_balance: { en: 'You owe', de: 'Du schuldest' },
+	all_even: { en: "You're all even", de: 'Alles ausgeglichen' },
+	owes_you_balance: { en: 'owes you', de: 'schuldet dir' },
+	you_owe_user: { en: 'you owe', de: 'du schuldest' },
+	transaction: { en: 'transaction', de: 'Transaktion' },
+	transactions: { en: 'transactions', de: 'Transaktionen' },
+
+	// DebtBreakdown
+	debt_overview: { en: 'Debt Overview', de: 'Schuldenübersicht' },
+	loading_debt_breakdown: { en: 'Loading debt breakdown...', de: 'Schuldenübersicht wird geladen...' },
+	who_owes_you: { en: 'Who owes you', de: 'Wer dir schuldet' },
+	you_owe_section: { en: 'You owe', de: 'Du schuldest' },
+	total: { en: 'Total', de: 'Gesamt' },
+
+	// Frequency descriptions (recurring payments)
+	freq_every_day: { en: 'Every day', de: 'Jeden Tag' },
+	freq_every_week: { en: 'Every week', de: 'Jede Woche' },
+	freq_every_month: { en: 'Every month', de: 'Jeden Monat' },
+	freq_custom: { en: 'Custom', de: 'Benutzerdefiniert' },
+	freq_unknown: { en: 'Unknown frequency', de: 'Unbekannte Häufigkeit' },
+
+	// Next execution
+	today_at: { en: 'Today at', de: 'Heute um' },
+	tomorrow_at: { en: 'Tomorrow at', de: 'Morgen um' },
+	in_days_at: { en: 'In {days} days at', de: 'In {days} Tagen um' },
+
+	// UsersList
+	split_between_users: { en: 'Split Between Users', de: 'Aufteilen zwischen' },
+	predefined_note: { en: 'Splitting between predefined users:', de: 'Aufteilung zwischen vordefinierten Benutzern:' },
+	you: { en: 'You', de: 'Du' },
+	remove: { en: 'Remove', de: 'Entfernen' },
+	add_user_placeholder: { en: 'Add user...', de: 'Benutzer hinzufügen...' },
+	add_user: { en: 'Add User', de: 'Benutzer hinzufügen' },
+
+	// SplitMethodSelector
+	split_method: { en: 'Split Method', de: 'Aufteilungsmethode' },
+	how_split: { en: 'How should this payment be split?', de: 'Wie soll diese Zahlung aufgeteilt werden?' },
+	split_5050: { en: 'Split 50/50', de: '50/50 teilen' },
+	equal_split: { en: 'Equal Split', de: 'Gleichmässig' },
+	personal_equal_split: { en: 'Personal + Equal Split', de: 'Persönlich + Gleichmässig' },
+	custom_proportions: { en: 'Custom Proportions', de: 'Individuelle Anteile' },
+	custom_split_amounts: { en: 'Custom Split Amounts', de: 'Individuelle Beträge' },
+	personal_amounts: { en: 'Personal Amounts', de: 'Persönliche Beträge' },
+	personal_amounts_desc: { en: 'Enter personal amounts for each user. The remainder will be split equally.', de: 'Persönliche Beträge pro Benutzer eingeben. Der Rest wird gleichmässig aufgeteilt.' },
+	total_personal: { en: 'Total Personal', de: 'Persönlich gesamt' },
+	remainder_to_split: { en: 'Remainder to Split', de: 'Restbetrag zum Aufteilen' },
+	personal_exceeds_total: { en: 'Warning: Personal amounts exceed total payment amount!', de: 'Warnung: Persönliche Beträge übersteigen den Gesamtbetrag!' },
+	split_preview: { en: 'Split Preview', de: 'Aufteilungsvorschau' },
+	owes: { en: 'owes', de: 'schuldet' },
+	is_owed: { en: 'is owed', de: 'bekommt' },
+	error_prefix: { en: 'Error', de: 'Fehler' },
+
+	// Payment categories (for expense categories, not shopping)
+	cat_groceries: { en: 'Groceries', de: 'Lebensmittel' },
+	cat_shopping: { en: 'Shopping', de: 'Einkauf' },
+	cat_travel: { en: 'Travel', de: 'Reise' },
+	cat_restaurant: { en: 'Restaurant', de: 'Restaurant' },
+	cat_utilities: { en: 'Utilities', de: 'Nebenkosten' },
+	cat_fun: { en: 'Fun', de: 'Freizeit' },
+	cat_settlement: { en: 'Settlement', de: 'Ausgleich' },
+
+	// Payment add/edit forms
+	add_payment_title: { en: 'Add New Payment', de: 'Neue Zahlung' },
+	add_payment_subtitle: { en: 'Create a new shared expense or recurring payment', de: 'Neue geteilte Ausgabe oder wiederkehrende Zahlung erstellen' },
+	edit_payment_title: { en: 'Edit Payment', de: 'Zahlung bearbeiten' },
+	edit_payment_subtitle: { en: 'Modify payment details and receipt image', de: 'Zahlungsdetails und Beleg bearbeiten' },
+	edit_recurring_title: { en: 'Edit Recurring Payment', de: 'Wiederkehrende Zahlung bearbeiten' },
+	payment_details_section: { en: 'Payment Details', de: 'Zahlungsdetails' },
+	title_label: { en: 'Title *', de: 'Titel *' },
+	title_placeholder: { en: 'e.g., Dinner at restaurant', de: 'z.B. Abendessen im Restaurant' },
+	description_label: { en: 'Description', de: 'Beschreibung' },
+	description_placeholder: { en: 'Additional details...', de: 'Weitere Details...' },
+	category_star: { en: 'Category *', de: 'Kategorie *' },
+	amount_label: { en: 'Amount *', de: 'Betrag *' },
+	payment_date: { en: 'Payment Date', de: 'Zahlungsdatum' },
+	paid_by_form: { en: 'Paid by', de: 'Bezahlt von' },
+	make_recurring: { en: 'Make this a recurring payment', de: 'Als wiederkehrende Zahlung einrichten' },
+	recurring_section: { en: 'Recurring Payment', de: 'Wiederkehrende Zahlung' },
+	recurring_schedule: { en: 'Recurring Schedule', de: 'Wiederkehrender Zeitplan' },
+	frequency_label: { en: 'Frequency *', de: 'Häufigkeit *' },
+	freq_daily: { en: 'Daily', de: 'Täglich' },
+	freq_weekly: { en: 'Weekly', de: 'Wöchentlich' },
+	freq_monthly: { en: 'Monthly', de: 'Monatlich' },
+	freq_quarterly: { en: 'Quarterly', de: 'Vierteljährlich' },
+	freq_yearly: { en: 'Yearly', de: 'Jährlich' },
+	freq_custom: { en: 'Custom (Cron)', de: 'Benutzerdefiniert (Cron)' },
+	start_date: { en: 'Start Date *', de: 'Startdatum *' },
+	end_date_optional: { en: 'End Date (optional)', de: 'Enddatum (optional)' },
+	end_date_hint: { en: 'Leave empty for indefinite recurring', de: 'Leer lassen für unbefristete Wiederholung' },
+	next_execution_preview: { en: 'Next Execution', de: 'Nächste Ausführung' },
+	status_label: { en: 'Status', de: 'Status' },
+	create_payment: { en: 'Create payment', de: 'Zahlung erstellen' },
+	save_changes: { en: 'Save changes', de: 'Änderungen speichern' },
+	delete_payment: { en: 'Delete Payment', de: 'Zahlung löschen' },
+	deleting: { en: 'Deleting...', de: 'Löschen...' },
+
+	// Split configuration (edit page)
+	split_config: { en: 'Split Configuration', de: 'Aufteilungskonfiguration' },
+	split_method_form: { en: 'Split Method:', de: 'Aufteilungsart:' },
+	equal_split: { en: 'Equal Split', de: 'Gleichmässige Aufteilung' },
+	personal_equal_split: { en: 'Personal + Equal Split', de: 'Persönliche Beträge + Gleichverteilung' },
+	custom_proportions: { en: 'Custom Proportions', de: 'Individuelle Anteile' },
+	personal_amounts: { en: 'Personal Amounts', de: 'Persönliche Beträge' },
+	personal_amounts_desc: { en: 'Enter personal amounts for each user. The remainder will be split equally.', de: 'Persönliche Beträge für jeden Benutzer eingeben. Der Rest wird gleichmässig aufgeteilt.' },
+	total_personal: { en: 'Total Personal', de: 'Persönliche Summe' },
+	remainder_to_split: { en: 'Remainder to Split', de: 'Rest zum Aufteilen' },
+	personal_exceeds: { en: 'Personal amounts exceed total payment amount!', de: 'Persönliche Beträge übersteigen den Gesamtbetrag!' },
+	split_preview: { en: 'Split Preview', de: 'Aufteilungsvorschau' },
+
+	// Currency conversion
+	conversion_hint: { en: 'Amount will be converted to CHF using exchange rates for the payment date', de: 'Betrag wird anhand des Wechselkurses am Zahlungstag in CHF umgerechnet' },
+	fetching_rate: { en: 'Fetching exchange rate...', de: 'Wechselkurs wird abgerufen...' },
+	exchange_rate_date: { en: 'Exchange rate will be fetched for this date', de: 'Wechselkurs wird für dieses Datum abgerufen' },
+
+	// SplitMethodSelector
+	paid_in_full: { en: 'Paid in Full', de: 'Vollständig bezahlt' },
+	paid_in_full_for: { en: 'Paid in Full for', de: 'Vollständig bezahlt für' },
+	paid_in_full_by_you: { en: 'Paid in Full by You', de: 'Vollständig von dir bezahlt' },
+	paid_in_full_by: { en: 'Paid in Full by', de: 'Vollständig bezahlt von' },
+
+	// Shopping category names (for EN display)
+	cat_fruits_veg: { en: 'Fruits & Vegetables', de: 'Obst & Gemüse' },
+	cat_meat_fish: { en: 'Meat & Fish', de: 'Fleisch & Fisch' },
+	cat_dairy: { en: 'Dairy', de: 'Milchprodukte' },
+	cat_bakery: { en: 'Bread & Bakery', de: 'Brot & Backwaren' },
+	cat_grains: { en: 'Pasta, Rice & Grains', de: 'Pasta, Reis & Getreide' },
+	cat_spices: { en: 'Spices & Sauces', de: 'Gewürze & Saucen' },
+	cat_drinks: { en: 'Beverages', de: 'Getränke' },
+	cat_sweets: { en: 'Sweets & Snacks', de: 'Süßes & Snacks' },
+	cat_frozen: { en: 'Frozen', de: 'Tiefkühl' },
+	cat_household: { en: 'Household', de: 'Haushalt' },
+	cat_hygiene: { en: 'Hygiene & Body Care', de: 'Hygiene & Körperpflege' },
+	cat_other: { en: 'Other', de: 'Sonstiges' },
+};
+
+/** Category name translation map (German key → display name per language) */
+const categoryDisplayNames: Record<string, Record<string, string>> = {
+	'Obst & Gemüse':          { en: 'Fruits & Vegetables', de: 'Obst & Gemüse' },
+	'Fleisch & Fisch':        { en: 'Meat & Fish', de: 'Fleisch & Fisch' },
+	'Milchprodukte':          { en: 'Dairy', de: 'Milchprodukte' },
+	'Brot & Backwaren':       { en: 'Bread & Bakery', de: 'Brot & Backwaren' },
+	'Pasta, Reis & Getreide': { en: 'Pasta, Rice & Grains', de: 'Pasta, Reis & Getreide' },
+	'Gewürze & Saucen':       { en: 'Spices & Sauces', de: 'Gewürze & Saucen' },
+	'Getränke':               { en: 'Beverages', de: 'Getränke' },
+	'Süßes & Snacks':         { en: 'Sweets & Snacks', de: 'Süßes & Snacks' },
+	'Tiefkühl':               { en: 'Frozen', de: 'Tiefkühl' },
+	'Haushalt':               { en: 'Household', de: 'Haushalt' },
+	'Hygiene & Körperpflege': { en: 'Hygiene & Body Care', de: 'Hygiene & Körperpflege' },
+	'Sonstiges':              { en: 'Other', de: 'Sonstiges' },
+};
+
+/** Get translated category display name (shopping categories) */
+export function categoryName(category: string, lang: 'en' | 'de'): string {
+	return categoryDisplayNames[category]?.[lang] ?? category;
+}
+
+/** Payment category translation map */
+const paymentCategoryNames: Record<string, Record<string, string>> = {
+	groceries:  { en: 'Groceries', de: 'Lebensmittel' },
+	shopping:   { en: 'Shopping', de: 'Einkauf' },
+	travel:     { en: 'Travel', de: 'Reise' },
+	restaurant: { en: 'Restaurant', de: 'Restaurant' },
+	utilities:  { en: 'Utilities', de: 'Nebenkosten' },
+	fun:        { en: 'Fun', de: 'Freizeit' },
+	settlement: { en: 'Settlement', de: 'Ausgleich' },
+};
+
+/** Get translated payment category name */
+export function paymentCategoryName(category: string, lang: 'en' | 'de'): string {
+	return paymentCategoryNames[category]?.[lang] ?? category;
+}
+
+/** Get category options with translated labels */
+export function getCategoryOptionsI18n(lang: 'en' | 'de') {
+	const emojis: Record<string, string> = {
+		groceries: '🛒', shopping: '🛍️', travel: '🚆',
+		restaurant: '🍽️', utilities: '⚡', fun: '🎉', settlement: '🤝'
+	};
+	return Object.keys(paymentCategoryNames).map(key => ({
+		value: key,
+		label: `${emojis[key] || ''} ${paymentCategoryName(key, lang)}`,
+		emoji: emojis[key] || '',
+		name: paymentCategoryName(key, lang)
+	}));
+}
+
+/** Get a translated string */
+export function t(key: string, lang: 'en' | 'de'): string {
+	return translations[key]?.[lang] ?? translations[key]?.en ?? key;
+}
+
+/** Format TTL remaining time in the target language */
+export function formatTTL(expiresAt: string, lang: 'en' | 'de'): string {
+	const diff = new Date(expiresAt).getTime() - Date.now();
+	if (diff <= 0) return t('expired', lang);
+	const mins = Math.round(diff / 60000);
+	if (mins < 60) return `${mins} min`;
+	const hours = Math.round(diff / 3600000);
+	if (hours < 24) return `${hours} ${lang === 'en' ? 'hrs' : 'Std.'}`;
+	const days = Math.round(diff / 86400000);
+	return `${days} ${lang === 'en' ? (days > 1 ? 'days' : 'day') : (days > 1 ? 'Tage' : 'Tag')}`;
+}
+
+/** Get TTL options for the given language */
+export function ttlOptions(lang: 'en' | 'de') {
+	return [
+		{ label: t('ttl_1h', lang), ms: 1 * 60 * 60 * 1000 },
+		{ label: t('ttl_6h', lang), ms: 6 * 60 * 60 * 1000 },
+		{ label: t('ttl_24h', lang), ms: 24 * 60 * 60 * 1000 },
+		{ label: t('ttl_3d', lang), ms: 3 * 24 * 60 * 60 * 1000 },
+		{ label: t('ttl_7d', lang), ms: 7 * 24 * 60 * 60 * 1000 },
+	];
+}
+
+/** Get locale string for number/date formatting */
+export function locale(lang: 'en' | 'de'): string {
+	return lang === 'en' ? 'en-CH' : 'de-CH';
+}
+
+/** Build a split description string */
+export function splitDescription(payment: { splits?: any[]; splitMethod?: string; paidBy?: string }, lang: 'en' | 'de'): string {
+	if (!payment.splits || payment.splits.length === 0) return t('no_splits', lang);
+
+	const count = payment.splits.length;
+	if (payment.splitMethod === 'equal') {
+		return `${t('split_equal', lang)} ${count} ${t('people', lang)}`;
+	} else if (payment.splitMethod === 'full') {
+		return `${t('paid_full_by', lang)} ${payment.paidBy}`;
+	} else if (payment.splitMethod === 'personal_equal') {
+		return `${t('personal_equal', lang)} ${count} ${t('people', lang)}`;
+	} else {
+		return `${t('custom_split', lang)} ${count} ${t('people', lang)}`;
+	}
+}
+
+/** Get translated frequency description for a recurring payment */
+export function frequencyDescription(payment: { frequency: string; cronExpression?: string }, lang: 'en' | 'de'): string {
+	switch (payment.frequency) {
+		case 'daily': return t('freq_every_day', lang);
+		case 'weekly': return t('freq_every_week', lang);
+		case 'monthly': return t('freq_every_month', lang);
+		case 'custom': return `${t('freq_custom', lang)}: ${payment.cronExpression}`;
+		default: return t('freq_unknown', lang);
+	}
+}
+
+/** Format next execution date with i18n */
+export function formatNextExecutionI18n(date: Date, lang: 'en' | 'de'): string {
+	const loc = locale(lang);
+	const now = new Date();
+	const diffMs = date.getTime() - now.getTime();
+	const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+	const timeStr = date.toLocaleTimeString(loc, { hour: '2-digit', minute: '2-digit' });
+
+	if (diffDays === 0) {
+		return `${t('today_at', lang)} ${timeStr}`;
+	} else if (diffDays === 1) {
+		return `${t('tomorrow_at', lang)} ${timeStr}`;
+	} else if (diffDays < 7) {
+		return `${t('in_days_at', lang).replace('{days}', String(diffDays))} ${timeStr}`;
+	} else {
+		return date.toLocaleString(loc, {
+			year: 'numeric', month: 'short', day: 'numeric',
+			hour: '2-digit', minute: '2-digit'
+		});
+	}
+}
--- a/src/params/cospendRoot.ts
+++ b/src/params/cospendRoot.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+
+export const match: ParamMatcher = (param) => {
+	return param === 'cospend' || param === 'expenses';
+};
--- a/src/routes/[cospendRoot=cospendRoot]/+layout.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/+layout.server.ts
@@ -0,0 +1,9 @@
+import type { LayoutServerLoad } from "./$types"
+import { detectCospendLang } from '$lib/js/cospendI18n';
+
+export const load : LayoutServerLoad = async ({locals, url}) => {
+	return {
+		session: locals.session ?? await locals.auth(),
+		lang: detectCospendLang(url.pathname) as 'en' | 'de'
+	}
+};
--- a/src/routes/[cospendRoot=cospendRoot]/+layout.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/+layout.svelte
@@ -7,10 +7,16 @@
  import PaymentModal from '$lib/components/cospend/PaymentModal.svelte';
  import Header from '$lib/components/Header.svelte';
  import UserHeader from '$lib/components/UserHeader.svelte';
+  import LanguageSelector from '$lib/components/LanguageSelector.svelte';
  import { LayoutDashboard, Wallet, RefreshCw, ShoppingCart } from '@lucide/svelte';
+  import { detectCospendLang, cospendRoot, cospendLabels } from '$lib/js/cospendI18n';

  let { data, children } = $props();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const labels = $derived(cospendLabels(lang));
+
  let showModal = $state(false);
  /** @type {string | null} */
  let paymentId = $state(null);
@@ -19,14 +25,14 @@

  $effect(() => {
    // Check if URL contains payment view route OR if we have paymentId in state
-    const match = $page.url.pathname.match(/\/cospend\/payments\/view\/([^\/]+)/);
+    const match = $page.url.pathname.match(/\/(cospend|expenses)\/payments\/view\/([^\/]+)/);
    const statePaymentId = $page.state?.paymentId;
-    const isOnDashboard = $page.route.id === '/cospend/dash';
+    const isOnDashboard = $page.route.id === '/[cospendRoot=cospendRoot]/dash';

    // Only show modal if we're on the dashboard AND have a payment to show
    if (isOnDashboard && (match || statePaymentId)) {
      showModal = true;
-      paymentId = match ? match[1] : statePaymentId ?? null;
+      paymentId = match ? match[2] : statePaymentId ?? null;
    } else {
      showModal = false;
      paymentId = null;
@@ -39,7 +45,7 @@
    paymentId = null;

    // Dispatch a custom event to trigger dashboard refresh
-    if ($page.route.id === '/cospend/dash') {
+    if ($page.route.id === '/[cospendRoot=cospendRoot]/dash') {
      window.dispatchEvent(new CustomEvent('dashboardRefresh'));
    }
  }
@@ -47,9 +53,9 @@
  /** @param {string} path */
  function isActive(path) {
    const currentPath = $page.url.pathname;
-    // Exact match for cospend root
-    if (path === '/cospend/dash') {
-      return currentPath === '/cospend/dash' || currentPath === '/cospend/dash/';
+    // Exact match for dash
+    if (path.endsWith('/dash')) {
+      return currentPath === path || currentPath === path + '/';
    }
    // For other paths, check if current path starts with the link path
    return currentPath.startsWith(path);
@@ -60,17 +66,18 @@
  {#snippet links()}
    <ul class="site_header">
      {#if !isGuest}
-        <li style="--active-fill: var(--nord9)"><a href="/cospend/dash" class:active={isActive('/cospend/dash')}><LayoutDashboard size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">Dashboard</span></a></li>
+        <li style="--active-fill: var(--nord9)"><a href="/{root}/dash" class:active={isActive(`/${root}/dash`)}><LayoutDashboard size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.dash}</span></a></li>
      {/if}
-      <li style="--active-fill: var(--nord13)"><a href="/cospend/list" class:active={isActive('/cospend/list')}><ShoppingCart size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">Liste</span></a></li>
+      <li style="--active-fill: var(--nord13)"><a href="/{root}/list" class:active={isActive(`/${root}/list`)}><ShoppingCart size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.list}</span></a></li>
      {#if !isGuest}
-        <li style="--active-fill: var(--nord14)"><a href="/cospend/payments" class:active={isActive('/cospend/payments')}><span class="nav-icon-wrap nav-icon-wallet"><Wallet size={16} strokeWidth={1.5} class="nav-icon" /></span><span class="nav-label">All Payments</span></a></li>
-        <li style="--active-fill: var(--nord12); --active-shape: circle(50%)"><a href="/cospend/recurring" class:active={isActive('/cospend/recurring')}><span class="nav-icon-wrap"><RefreshCw size={16} strokeWidth={1.5} class="nav-icon" /></span><span class="nav-label">Recurring</span></a></li>
+        <li style="--active-fill: var(--nord14)"><a href="/{root}/payments" class:active={isActive(`/${root}/payments`)}><span class="nav-icon-wrap nav-icon-wallet"><Wallet size={16} strokeWidth={1.5} class="nav-icon" /></span><span class="nav-label">{labels.payments}</span></a></li>
+        <li style="--active-fill: var(--nord12); --active-shape: circle(50%)"><a href="/{root}/recurring" class:active={isActive(`/${root}/recurring`)}><span class="nav-icon-wrap"><RefreshCw size={16} strokeWidth={1.5} class="nav-icon" /></span><span class="nav-label">{labels.recurring}</span></a></li>
      {/if}
    </ul>
  {/snippet}

  {#snippet right_side()}
+    <LanguageSelector lang={lang} />
    <UserHeader {user}></UserHeader>
  {/snippet}

--- a/src/routes/[cospendRoot=cospendRoot]/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/+page.server.ts
@@ -0,0 +1,7 @@
+import { redirect } from '@sveltejs/kit';
+import { detectCospendLang, cospendRoot } from '$lib/js/cospendI18n';
+
+export function load({ url }) {
+  const lang = detectCospendLang(url.pathname);
+  redirect(302, `/${cospendRoot(lang)}/list`);
+}
--- a/src/routes/[cospendRoot=cospendRoot]/dash/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/dash/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/dash/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/dash/+page.svelte
@@ -7,14 +7,18 @@
  import EnhancedBalance from '$lib/components/cospend/EnhancedBalance.svelte';
  import DebtBreakdown from '$lib/components/cospend/DebtBreakdown.svelte';
  import BarChart from '$lib/components/cospend/BarChart.svelte';
-  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
+  import { getCategoryEmoji } from '$lib/utils/categories';
  import { isSettlementPayment, getSettlementIcon, getSettlementClasses, getSettlementReceiver } from '$lib/utils/settlements';
  import AddButton from '$lib/components/AddButton.svelte';


  import { formatCurrency } from '$lib/utils/formatters';
+  import { detectCospendLang, cospendRoot, t, locale, paymentCategoryName } from '$lib/js/cospendI18n';

  let { data } = $props(); // Contains session data and balance from server
+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));

  // Use server-side data, with fallback for progressive enhancement
  let balance = $derived(data.balance || {
@@ -79,7 +83,7 @@
  }

  function formatDate(/** @type {string} */ dateString) {
-    return new Date(dateString).toLocaleDateString('de-CH');
+    return new Date(dateString).toLocaleDateString(loc);
  }

  function truncateDescription(/** @type {string} */ description, maxLength = 100) {
@@ -92,7 +96,7 @@
    // Progressive enhancement: if JavaScript is available, use pushState for modal behavior
    if (typeof pushState !== 'undefined') {
      event.preventDefault();
-      pushState(`/cospend/payments/view/${paymentId}`, { paymentId });
+      pushState(`/${root}/payments/view/${paymentId}`, { paymentId });
    }
    // Otherwise, let the regular link navigation happen (no preventDefault)
  }
@@ -120,11 +124,11 @@
 </script>

 <svelte:head>
-  <title>Cospend - Expense Sharing</title>
+  <title>{t('cospend_title', lang)}</title>
 </svelte:head>

 <main class="cospend-main">
-    <h1>Cospend</h1>
+    <h1>{t('cospend', lang)}</h1>

  <!-- Responsive layout for balance and chart -->
  <div class="dashboard-layout">
@@ -133,7 +137,7 @@

      <div class="actions">
        {#if balance.netBalance !== 0}
-          <a href="/cospend/settle" class="btn btn-settlement">Settle Debts</a>
+          <a href="/{root}/settle" class="btn btn-settlement">{t('settle_debts', lang)}</a>
        {/if}
      </div>

@@ -143,12 +147,13 @@
    <!-- Monthly Expenses Chart -->
    <div class="chart-section">
      {#if expensesLoading}
-        <div class="loading">Loading monthly expenses chart...</div>
+        <div class="loading">{t('loading_monthly', lang)}</div>
      {:else if monthlyExpensesData.datasets && monthlyExpensesData.datasets.length > 0}
        <BarChart
          data={monthlyExpensesData}
-          title="Monthly Expenses by Category"
+          title={t('monthly_expenses_chart', lang)}
          height="400px"
+          {lang}
          onFilterChange={(/** @type {string[] | null} */ categories) => categoryFilter = categories}
        />
      {:else}
@@ -162,26 +167,26 @@
  </div>

  {#if loading}
-    <div class="loading">Loading recent activity...</div>
+    <div class="loading">{t('loading_recent', lang)}</div>
  {:else if error}
    <div class="error">Error: {error}</div>
  {:else if balance.recentSplits && balance.recentSplits.length > 0}
    <div class="recent-activity">
      <div class="recent-activity-header">
-        <h2>Recent Activity{#if categoryFilter} <span class="filter-label">— {categoryFilter.map((/** @type {any} */ c) => getCategoryName(c)).join(', ')}</span>{/if}</h2>
+        <h2>{t('recent_activity', lang)}{#if categoryFilter} <span class="filter-label">— {categoryFilter.map((/** @type {any} */ c) => paymentCategoryName(c, lang)).join(', ')}</span>{/if}</h2>
        {#if categoryFilter}
-          <button class="clear-filter" onclick={() => categoryFilter = null}>Clear filter</button>
+          <button class="clear-filter" onclick={() => categoryFilter = null}>{t('clear_filter', lang)}</button>
        {/if}
      </div>
      {#if filteredSplits.length === 0}
-        <p class="no-results">No recent activity in {categoryFilter ? categoryFilter.map((/** @type {any} */ c) => getCategoryName(c)).join(', ') : ''}.</p>
+        <p class="no-results">{t('no_recent_in', lang)} {categoryFilter ? categoryFilter.map((/** @type {any} */ c) => paymentCategoryName(c, lang)).join(', ') : ''}.</p>
      {/if}
      <div class="activity-dialog">
        {#each filteredSplits as split}
          {#if isSettlementPayment(split.paymentId)}
            <!-- Settlement Payment Display - User -> User Flow -->
            <a
-              href="/cospend/payments/view/{split.paymentId?._id}"
+              href="/{root}/payments/view/{split.paymentId?._id}"
              class="settlement-flow-activity"
              onclick={(e) => handlePaymentClick(split.paymentId?._id, e)}
            >
@@ -193,7 +198,7 @@
                  </div>
                  <div class="settlement-arrow-section">
                    <div class="settlement-amount-large">
-                      {formatCurrency(Math.abs(split.amount), 'CHF', 'de-CH')}
+                      {formatCurrency(Math.abs(split.amount), 'CHF', loc)}
                    </div>
                    <div class="settlement-flow-arrow">→</div>
                    <div class="settlement-date">{formatDate(split.paymentId?.date || split.paymentId?.createdAt)}</div>
@@ -212,7 +217,7 @@
              <div class="message-content">
                <ProfilePicture username={split.paymentId?.paidBy || 'Unknown'} size={36} />
                <a
-                  href="/cospend/payments/view/{split.paymentId?._id}"
+                  href="/{root}/payments/view/{split.paymentId?._id}"
                  class="activity-bubble"
                  onclick={(e) => handlePaymentClick(split.paymentId?._id, e)}
                >
@@ -220,20 +225,20 @@
                    <div class="user-info">
                      <div class="payment-title-row">
                        <span class="category-emoji">{getCategoryEmoji(split.paymentId?.category || 'groceries')}</span>
-                        <strong class="payment-title">{split.paymentId?.title || 'Payment'}</strong>
+                        <strong class="payment-title">{split.paymentId?.title || t('payment', lang)}</strong>
                      </div>
-                      <span class="username">Paid by {split.paymentId?.paidBy || 'Unknown'}</span>
-                      <span class="category-name">{getCategoryName(split.paymentId?.category || 'groceries')}</span>
+                      <span class="username">{t('paid_by', lang)} {split.paymentId?.paidBy || 'Unknown'}</span>
+                      <span class="category-name">{paymentCategoryName(split.paymentId?.category || 'groceries', lang)}</span>
                    </div>
                    <div class="activity-amount"
                         class:positive={split.amount < 0}
                         class:negative={split.amount > 0}>
                      {#if split.amount > 0}
-                        -{formatCurrency(Math.abs(split.amount), 'CHF', 'de-CH')}
+                        -{formatCurrency(Math.abs(split.amount), 'CHF', loc)}
                      {:else if split.amount < 0}
-                        +{formatCurrency(Math.abs(split.amount), 'CHF', 'de-CH')}
+                        +{formatCurrency(Math.abs(split.amount), 'CHF', loc)}
                      {:else}
-                        {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                        {formatCurrency(split.amount, 'CHF', loc)}
                      {/if}
                    </div>
                  </div>
@@ -257,7 +262,7 @@
  {/if}
 </main>

-<AddButton href="/cospend/payments/add" />
+<AddButton href="/{root}/payments/add" />

 <style>
  .cospend-main {
--- a/src/routes/[cospendRoot=cospendRoot]/list/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/list/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
@@ -11,6 +11,8 @@
  import iconCategoriesData from '$lib/data/shoppingIconCategories.json';

  import { Share2, X, Copy, Check } from '@lucide/svelte';
+  import { page } from '$app/stores';
+  import { detectCospendLang, t, locale, categoryName, formatTTL as formatTTLi18n, ttlOptions } from '$lib/js/cospendI18n';

  let { data } = $props();
  let user = $derived(data.session?.user?.nickname || 'guest');
@@ -18,6 +20,9 @@
  let isGuest = $derived(!data.session);
  const sync = getShoppingSync();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const loc = $derived(locale(lang));
+
  /** @type {Record<string, { icon: typeof Plus, color: string }>} */
  const categoryMeta = {
    'Obst & Gemüse':          { icon: Apple, color: 'var(--nord14)' },
@@ -266,23 +271,10 @@

  /** @param {string} expiresAt */
  function formatTTL(expiresAt) {
-    const diff = new Date(expiresAt).getTime() - Date.now();
-    if (diff <= 0) return 'abgelaufen';
-    const mins = Math.round(diff / 60000);
-    if (mins < 60) return `${mins} Min.`;
-    const hours = Math.round(diff / 3600000);
-    if (hours < 24) return `${hours} Std.`;
-    const days = Math.round(diff / 86400000);
-    return `${days} Tag${days > 1 ? 'e' : ''}`;
+    return formatTTLi18n(expiresAt, lang);
  }

-  const TTL_OPTIONS = [
-    { label: '1 Stunde', ms: 1 * 60 * 60 * 1000 },
-    { label: '6 Stunden', ms: 6 * 60 * 60 * 1000 },
-    { label: '24 Stunden', ms: 24 * 60 * 60 * 1000 },
-    { label: '3 Tage', ms: 3 * 24 * 60 * 60 * 1000 },
-    { label: '7 Tage', ms: 7 * 24 * 60 * 60 * 1000 },
-  ];
+  let TTL_OPTIONS = $derived(ttlOptions(lang));

  /**
   * @param {string} id
@@ -303,12 +295,13 @@
    }
  }

-  /** @param {{ id: string, token: string }} t */
-  async function copyTokenLink(t) {
-    const url = new URL('/cospend/list', window.location.origin);
-    url.searchParams.set('token', t.token);
+  /** @param {{ id: string, token: string }} tok */
+  async function copyTokenLink(tok) {
+    const root = $page.url.pathname.split('/')[1];
+    const url = new URL(`/${root}/list`, window.location.origin);
+    url.searchParams.set('token', tok.token);
    await navigator.clipboard.writeText(url.toString());
-    copiedId = t.id;
+    copiedId = tok.id;
    showCopyToast = true;
    setTimeout(() => { copiedId = null; showCopyToast = false; }, 2000);
  }
@@ -321,7 +314,7 @@
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id })
      });
-      shareTokens = shareTokens.filter(t => t.id !== id);
+      shareTokens = shareTokens.filter(tok => tok.id !== id);
    } catch (err) {
      console.error('[shopping] Delete token error:', err);
    }
@@ -338,8 +331,8 @@
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, expiresAt: newExpiry })
      });
-      shareTokens = shareTokens.map(t =>
-        t.id === id ? { ...t, expiresAt: newExpiry } : t
+      shareTokens = shareTokens.map(tok =>
+        tok.id === id ? { ...tok, expiresAt: newExpiry } : tok
      );
    } catch (err) {
      console.error('[shopping] Update token error:', err);
@@ -369,15 +362,15 @@
 <div class="shopping-page">
  <header class="page-header">
    <div class="header-row">
-      <h1>Einkaufsliste <SyncIndicator status={sync.status} /></h1>
+      <h1>{t('shopping_list_title', lang)} <SyncIndicator status={sync.status} /></h1>
      {#if !isGuest}
-        <button class="btn-share" onclick={openShareModal} title="Teilen">
+        <button class="btn-share" onclick={openShareModal} title={t('share', lang)}>
          <Share2 size={16} />
        </button>
      {/if}
    </div>
    {#if totalCount > 0}
-      <p class="subtitle">{checkedCount} / {totalCount} erledigt</p>
+      <p class="subtitle">{checkedCount} / {totalCount} {t('items_done', lang)}</p>
    {/if}
    <div class="store-picker">
      <Store size={13} />
@@ -397,7 +390,7 @@
      bind:value={newItemName}
      onkeydown={onKeydown}
      type="text"
-      placeholder="Artikel hinzufügen..."
+      placeholder={t('add_item_placeholder', lang)}
      autocomplete="off"
    />
    <button class="btn-add" onclick={addItem} disabled={!newItemName.trim()}>
@@ -406,7 +399,7 @@
  </div>

  {#if totalCount === 0}
-    <p class="empty-state">Die Einkaufsliste ist leer</p>
+    <p class="empty-state">{t('empty_list', lang)}</p>
  {:else}
    <div class="item-list">
      {#each groupedItems as group (group.category)}
@@ -418,7 +411,7 @@
              <div class="category-icon">
                <CategoryIcon size={14} />
              </div>
-              <h2>{group.category}</h2>
+              <h2>{categoryName(group.category, lang)}</h2>
              <span class="category-count">{group.items.filter(i => !i.checked).length}</span>
            </div>
          </div>
@@ -459,7 +452,7 @@
    {#if checkedCount > 0}
      <button class="btn-clear-checked" onclick={() => sync.clearChecked()}>
        <ListX size={16} />
-        Erledigte entfernen ({checkedCount})
+        {t('clear_checked', lang)} ({checkedCount})
      </button>
    {/if}
  {/if}
@@ -476,7 +469,7 @@
      <h3>{parseQuantity(editingItem.name).name}</h3>

      <!-- svelte-ignore a11y_label_has_associated_control -->
-      <label class="edit-label">Kategorie</label>
+      <label class="edit-label">{t('kategorie', lang)}</label>
      <div class="category-picker">
        {#each SHOPPING_CATEGORIES as cat}
          {@const meta = categoryMeta[cat] || categoryMeta['Sonstiges']}
@@ -488,22 +481,22 @@
            onclick={() => { editCategory = cat; }}
          >
            <CatIcon size={14} />
-            <span>{cat}</span>
+            <span>{categoryName(cat, lang)}</span>
          </button>
        {/each}
      </div>

      <!-- svelte-ignore a11y_label_has_associated_control -->
-      <label class="edit-label">Icon</label>
+      <label class="edit-label">{t('icon', lang)}</label>
      <div class="icon-search">
        <Search size={14} />
-        <input bind:value={iconSearch} type="text" placeholder="Icon suchen..." />
+        <input bind:value={iconSearch} type="text" placeholder={t('search_icon', lang)} />
      </div>
      <div class="icon-picker">
        {#each filteredIconGroups as [cat, icons]}
          {@const meta = categoryMeta[cat] || categoryMeta['Sonstiges']}
          <div class="icon-group">
-            <span class="icon-group-label" style="color: {meta.color}">{cat}</span>
+            <span class="icon-group-label" style="color: {meta.color}">{categoryName(cat, lang)}</span>
            <div class="icon-group-grid">
              {#each icons as [name, file]}
                <button
@@ -521,9 +514,9 @@
      </div>

      <div class="edit-actions">
-        <button class="btn-cancel" onclick={closeEdit}>Abbrechen</button>
+        <button class="btn-cancel" onclick={closeEdit}>{t('cancel', lang)}</button>
        <button class="btn-save" onclick={saveEdit} disabled={editSaving}>
-          {editSaving ? 'Speichern...' : 'Speichern'}
+          {editSaving ? t('saving', lang) : t('save', lang)}
        </button>
      </div>
    </div>
@@ -538,27 +531,27 @@
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <div class="edit-modal share-modal" onclick={(e) => e.stopPropagation()}>
      <div class="share-header">
-        <h3>Geteilte Links</h3>
+        <h3>{t('shared_links', lang)}</h3>
        <button class="close-button" onclick={() => { showShareModal = false; }}>
          <X size={18} />
        </button>
      </div>
-      <p class="share-desc">Jeder mit einem aktiven Link kann die Einkaufsliste bearbeiten.</p>
+      <p class="share-desc">{t('share_desc', lang)}</p>

      {#if shareLoading}
-        <p class="share-loading">Laden...</p>
+        <p class="share-loading">{t('loading', lang)}</p>
      {:else if shareTokens.length === 0}
-        <p class="share-empty">Keine aktiven Links.</p>
+        <p class="share-empty">{t('no_active_links', lang)}</p>
      {:else}
        <div class="token-list">
-          {#each shareTokens as t (t.id)}
+          {#each shareTokens as tok (tok.id)}
            <div class="token-item">
              <div class="token-info">
-                <span class="token-created-by">{t.createdBy}</span>
+                <span class="token-created-by">{tok.createdBy}</span>
                <div class="token-expiry-row">
-                  <span class="token-ttl">noch {formatTTL(t.expiresAt)}</span>
-                  <select class="token-ttl-select" onchange={(e) => onTTLChange(t.id, e)}>
-                    <option value="" disabled selected>Ändern</option>
+                  <span class="token-ttl">{formatTTL(tok.expiresAt)}</span>
+                  <select class="token-ttl-select" onchange={(e) => onTTLChange(tok.id, e)}>
+                    <option value="" disabled selected>{t('change', lang)}</option>
                    {#each TTL_OPTIONS as opt}
                      <option value={opt.ms}>{opt.label}</option>
                    {/each}
@@ -566,10 +559,10 @@
                </div>
              </div>
              <div class="token-actions">
-                <button class="btn-token-copy" onclick={() => copyTokenLink(t)} title="Link kopieren">
-                  {#if copiedId === t.id}<Check size={14} />{:else}<Copy size={14} />{/if}
+                <button class="btn-token-copy" onclick={() => copyTokenLink(tok)} title={t('copy_link', lang)}>
+                  {#if copiedId === tok.id}<Check size={14} />{:else}<Copy size={14} />{/if}
                </button>
-                <button class="btn-token-delete" onclick={() => deleteToken(t.id)} title="Löschen">
+                <button class="btn-token-delete" onclick={() => deleteToken(tok.id)} title={t('delete_', lang)}>
                  <X size={14} />
                </button>
              </div>
@@ -580,7 +573,7 @@

      <button class="btn-new-token" onclick={createNewToken}>
        <Plus size={14} />
-        Neuen Link erstellen
+        {t('create_new_link', lang)}
      </button>
    </div>
  </div>
@@ -588,7 +581,7 @@

 {#if showCopyToast}
  <div class="copy-toast" transition:slide={{ duration: 150 }}>
-    <Check size={14} /> Kopiert
+    <Check size={14} /> {t('copied', lang)}
  </div>
 {/if}

--- a/src/routes/[cospendRoot=cospendRoot]/payments/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/payments/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/+page.svelte
@@ -1,16 +1,20 @@
 <script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
  import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
-  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
+  import { getCategoryEmoji } from '$lib/utils/categories';
  import { toast } from '$lib/js/toast.svelte';
  import { isSettlementPayment, getSettlementIcon, getSettlementReceiver } from '$lib/utils/settlements';
  import AddButton from '$lib/components/AddButton.svelte';
-
+  import { detectCospendLang, cospendRoot, t, locale, splitDescription, paymentCategoryName } from '$lib/js/cospendI18n';

  import { formatCurrency } from '$lib/utils/formatters';

  let { data } = $props();
+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));

  // Use server-side data with progressive enhancement
  // svelte-ignore state_referenced_locally
@@ -78,7 +82,7 @@
  }

  async function deletePayment(/** @type {string} */ paymentId) {
-    if (!confirm('Are you sure you want to delete this payment?')) {
+    if (!confirm(t('delete_payment_confirm', lang))) {
      return;
    }

@@ -100,14 +104,14 @@

  function formatAmountWithCurrency(/** @type {any} */ payment) {
    if (payment.currency === 'CHF' || !payment.originalAmount) {
-      return formatCurrency(payment.amount, 'CHF', 'de-CH');
+      return formatCurrency(payment.amount, 'CHF', loc);
    }

-    return `${formatCurrency(payment.originalAmount, payment.currency, 'de-CH')} ≈ ${formatCurrency(payment.amount, 'CHF', 'de-CH')}`;
+    return `${formatCurrency(payment.originalAmount, payment.currency, loc)} ≈ ${formatCurrency(payment.amount, 'CHF', loc)}`;
  }

  function formatDate(/** @type {string} */ dateString) {
-    return new Date(dateString).toLocaleDateString('de-CH');
+    return new Date(dateString).toLocaleDateString(loc);
  }

  function getUserSplitAmount(/** @type {any} */ payment, /** @type {string} */ username) {
@@ -115,34 +119,24 @@
    return split ? split.amount : 0;
  }

-  function getSplitDescription(/** @type {any} */ payment) {
-    if (!payment.splits || payment.splits.length === 0) return 'No splits';
-
-    if (payment.splitMethod === 'equal') {
-      return `Split equally among ${payment.splits.length} people`;
-    } else if (payment.splitMethod === 'full') {
-      return `Paid in full by ${payment.paidBy}`;
-    } else if (payment.splitMethod === 'personal_equal') {
-      return `Personal amounts + equal split among ${payment.splits.length} people`;
-    } else {
-      return `Custom split among ${payment.splits.length} people`;
-    }
+  function getSplitDescription(/** @type {any} */ p) {
+    return splitDescription(p, lang);
  }
 </script>

 <svelte:head>
-  <title>All Payments - Cospend</title>
+  <title>{t('all_payments_title', lang)} - {t('cospend', lang)}</title>
 </svelte:head>

 <main class="payments-list">
  <div class="header">
    <div class="header-content">
-      <h1>All Payments</h1>
+      <h1>{t('all_payments_title', lang)}</h1>
    </div>
  </div>

  {#if loading && payments.length === 0}
-    <div class="loading">Loading payments...</div>
+    <div class="loading">{t('loading_payments', lang)}</div>
  {:else if error}
    <div class="error">Error: {error}</div>
  {:else if payments.length === 0}
@@ -151,9 +145,9 @@
        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
        </svg>
-        <h2>No payments yet</h2>
-        <p>Start by adding your first shared expense</p>
-        <a href="/cospend/payments/add" class="btn btn-primary">Add Your First Payment</a>
+        <h2>{t('no_payments_yet', lang)}</h2>
+        <p>{t('start_first_expense', lang)}</p>
+        <a href="/{root}/payments/add" class="btn btn-primary">{t('add_first_payment', lang)}</a>
      </div>
    </div>
  {:else}
@@ -161,11 +155,11 @@
      {#each payments as payment}
        {#if isSettlementPayment(payment)}
          <!-- Settlement Card - Distinct Layout -->
-          <a href="/cospend/payments/view/{payment._id}" class="payment-card settlement-card">
+          <a href="/{root}/payments/view/{payment._id}" class="payment-card settlement-card">
            <div class="settlement-header">
              <div class="settlement-badge">
                <span class="settlement-icon">💸</span>
-                <span class="settlement-label">Settlement</span>
+                <span class="settlement-label">{t('settlement', lang)}</span>
              </div>
              <span class="settlement-date">{formatDate(payment.date)}</span>
            </div>
@@ -195,7 +189,7 @@
          </a>
        {:else}
          <!-- Regular Payment Card -->
-          <a href="/cospend/payments/view/{payment._id}" class="payment-card">
+          <a href="/{root}/payments/view/{payment._id}" class="payment-card">
            <div class="payment-header">
              <div class="payment-title-section">
                <ProfilePicture username={payment.paidBy} size={40} />
@@ -205,7 +199,7 @@
                    <h3>{payment.title}</h3>
                  </div>
                  <div class="payment-meta">
-                    <span class="category-name">{getCategoryName(payment.category || 'groceries')}</span>
+                    <span class="category-name">{paymentCategoryName(payment.category || 'groceries', lang)}</span>
                    <span class="date">{formatDate(payment.date)}</span>
                    <span class="amount">{formatAmountWithCurrency(payment)}</span>
                  </div>
@@ -222,29 +216,29 @@

            <div class="payment-details">
              <div class="detail-row">
-                <span class="label">Paid by:</span>
+                <span class="label">{t('paid_by_label', lang)}</span>
                <span class="value">{payment.paidBy}</span>
              </div>
              <div class="detail-row">
-                <span class="label">Split:</span>
+                <span class="label">{t('split_method_label', lang)}</span>
                <span class="value">{getSplitDescription(payment)}</span>
              </div>
            </div>

            {#if payment.splits && payment.splits.length > 0}
              <div class="splits-summary">
-                <h4>Split Details</h4>
+                <h4>{t('split_details', lang)}</h4>
                <div class="splits-list">
                  {#each payment.splits as split}
                    <div class="split-item">
                      <span class="split-user">{split.username}</span>
                      <span class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                        {#if split.amount > 0}
-                          owes {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                          {t('owes', lang)} {formatCurrency(split.amount, 'CHF', loc)}
                        {:else if split.amount < 0}
-                          owed {formatCurrency(Math.abs(split.amount), 'CHF', 'de-CH')}
+                          {t('owed', lang)} {formatCurrency(Math.abs(split.amount), 'CHF', loc)}
                        {:else}
-                          owes {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                          {t('owes', lang)} {formatCurrency(split.amount, 'CHF', loc)}
                        {/if}
                      </span>
                    </div>
@@ -262,14 +256,14 @@
      {#if data.currentOffset > 0}
        <a href="?offset={Math.max(0, data.currentOffset - data.limit)}&limit={data.limit}"
           class="btn btn-secondary">
-          ← Previous
+          {t('previous', lang)}
        </a>
      {/if}

      {#if hasMore}
        <a href="?offset={data.currentOffset + data.limit}&limit={data.limit}"
           class="btn btn-secondary">
-          Next →
+          {t('next', lang)}
        </a>
      {/if}

@@ -277,14 +271,14 @@
      {#if hasMore}
        <button class="btn btn-secondary js-only" onclick={loadMore} disabled={loading}
                style="display: none;">
-          {loading ? 'Loading...' : 'Load More (JS)'}
+          {loading ? t('loading_ellipsis', lang) : t('load_more', lang)}
        </button>
      {/if}
    </div>
  {/if}
 </main>

-<AddButton href="/cospend/payments/add" />
+<AddButton href="/{root}/payments/add" />

 <style>
  .payments-list {
--- a/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.svelte
@@ -1,10 +1,11 @@
 <script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
  import { enhance } from '$app/forms';
-  import { getCategoryOptions } from '$lib/utils/categories';
+  import { detectCospendLang, cospendRoot, locale, t, getCategoryOptionsI18n, frequencyDescription } from '$lib/js/cospendI18n';
  import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
-  import { validateCronExpression, getFrequencyDescription, calculateNextExecutionDate } from '$lib/utils/recurring';
+  import { validateCronExpression, calculateNextExecutionDate } from '$lib/utils/recurring';
  import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
  import SplitMethodSelector from '$lib/components/cospend/SplitMethodSelector.svelte';
  import UsersList from '$lib/components/cospend/UsersList.svelte';
@@ -14,6 +15,10 @@

  let { data, form } = $props();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));
+
  // Initialize form data with server values if available (for error handling)
  /** @type {Record<string, any>} */
  // svelte-ignore state_referenced_locally
@@ -82,36 +87,36 @@
    personalAmounts[user] = 0;
  });

-  let categoryOptions = $derived(getCategoryOptions());
+  let categoryOptions = $derived(getCategoryOptionsI18n(lang));

  // Reactive text for "Paid in Full" option
  let paidInFullText = $derived.by(() => {
    // No-JS fallback text - always generic
    if (!jsEnhanced) {
      if (predefinedMode) {
-        return users.length === 2 ? 'Paid in Full for other' : 'Paid in Full for others';
+        return t('paid_in_full', lang);
      } else {
-        return 'Paid in Full for others';
+        return t('paid_in_full', lang);
      }
    }

    // JavaScript-enhanced reactive text
    if (!formData.paidBy) {
-      return 'Paid in Full';
+      return t('paid_in_full', lang);
    }

    // Special handling for 2-user predefined setup
    if (predefinedMode && users.length === 2) {
      const otherUser = users.find(user => user !== formData.paidBy);
      // Always show "for" the other user (who benefits) regardless of who pays
-      return otherUser ? `Paid in Full for ${otherUser}` : 'Paid in Full';
+      return otherUser ? `${t('paid_in_full_for', lang)} ${otherUser}` : t('paid_in_full', lang);
    }

    // General case with JS
    if (formData.paidBy === data.currentUser) {
-      return 'Paid in Full by You';
+      return t('paid_in_full_by_you', lang);
    } else {
-      return `Paid in Full by ${formData.paidBy}`;
+      return `${t('paid_in_full_by', lang)} ${formData.paidBy}`;
    }
  });

@@ -292,7 +297,7 @@
      }

      const result = await response.json();
-      await goto('/cospend/dash');
+      await goto(`/${root}/dash`);

    } catch (err) {
      error = err instanceof Error ? err.message : String(err);
@@ -318,7 +323,7 @@
          startDate: new Date(recurringData.startDate)
        });
        const nextDate = calculateNextExecutionDate(recurringPayment, new Date(recurringData.startDate));
-        nextExecutionPreview = nextDate.toLocaleString('de-CH', {
+        nextExecutionPreview = nextDate.toLocaleString(loc, {
          weekday: 'long',
          year: 'numeric',
          month: 'long',
@@ -357,44 +362,44 @@
 </script>

 <svelte:head>
-  <title>Add Payment - Cospend</title>
+  <title>{t('add_payment_title', lang)} - {t('cospend', lang)}</title>
 </svelte:head>

 <main class="add-payment">
  <div class="header">
-    <h1>Add New Payment</h1>
-    <p>Create a new shared expense or recurring payment</p>
+    <h1>{t('add_payment_title', lang)}</h1>
+    <p>{t('add_payment_subtitle', lang)}</p>
  </div>

  <form method="POST" use:enhance class="payment-form">
    <div class="form-section">
-      <h2>Payment Details</h2>
+      <h2>{t('payment_details_section', lang)}</h2>
      
      <div class="form-group">
-        <label for="title">Title *</label>
+        <label for="title">{t('title_label', lang)}</label>
        <input 
          type="text" 
          id="title" 
          name="title"
          value={formData.title}
          required 
-          placeholder="e.g., Dinner at restaurant"
+          placeholder={t('title_placeholder', lang)}
        />
      </div>

      <div class="form-group">
-        <label for="description">Description</label>
+        <label for="description">{t('description_label', lang)}</label>
        <textarea 
          id="description" 
          name="description"
          value={formData.description} 
-          placeholder="Additional details..."
+          placeholder={t('description_placeholder', lang)}
          rows="3"
        ></textarea>
      </div>

      <div class="form-group">
-        <label for="category">Category *</label>
+        <label for="category">{t('category_star', lang)}</label>
        <select id="category" name="category" value={formData.category} required>
          {#each categoryOptions as option}
            <option value={option.value}>{option.label}</option>
@@ -404,7 +409,7 @@

      <div class="form-row">
        <div class="form-group">
-          <label for="amount">Amount *</label>
+          <label for="amount">{t('amount_label', lang)}</label>
          <div class="amount-currency">
            <input 
              type="number" 
@@ -424,11 +429,11 @@
          </div>
          {#if formData.currency !== 'CHF'}
            <div class="conversion-info">
-              <small class="help-text">Amount will be converted to CHF using exchange rates for the payment date</small>
+              <small class="help-text">{t('conversion_hint', lang)}</small>
              
              {#if loadingExchangeRate}
                <div class="conversion-preview loading">
-                  <small>🔄 Fetching exchange rate...</small>
+                  <small>🔄 {t('fetching_rate', lang)}</small>
                </div>
              {:else if exchangeRateError}
                <div class="conversion-preview error">
@@ -448,7 +453,7 @@
        </div>

        <div class="form-group">
-          <label for="date">Payment Date</label>
+          <label for="date">{t('payment_date', lang)}</label>
          <input 
            type="date" 
            id="date" 
@@ -457,13 +462,13 @@
            required
          />
          {#if formData.currency !== 'CHF'}
-            <small class="help-text">Exchange rate will be fetched for this date</small>
+            <small class="help-text">{t('exchange_rate_date', lang)}</small>
          {/if}
        </div>
      </div>

      <div class="form-group">
-        <label for="paidBy">Paid by</label>
+        <label for="paidBy">{t('paid_by_form', lang)}</label>
        <select id="paidBy" name="paidBy" bind:value={formData.paidBy} required>
          {#each users as user}
            <option value={user}>{user}</option>
@@ -474,7 +479,7 @@
      <div class="form-group">
        <label class="checkbox-label">
          <Toggle bind:checked={formData.isRecurring} />
-          <span>Make this a recurring payment</span>
+          <span>{t('make_recurring', lang)}</span>
          <input type="hidden" name="isRecurring" value={formData.isRecurring ? 'true' : 'false'} />
        </label>
      </div>
@@ -482,24 +487,24 @@

    {#if formData.isRecurring}
      <div class="form-section">
-        <h2>Recurring Payment</h2>
+        <h2>{t('recurring_section', lang)}</h2>
        
        <div class="recurring-options">
          <div class="form-row">
            <div class="form-group">
-              <label for="frequency">Frequency *</label>
+              <label for="frequency">{t('frequency_label', lang)}</label>
              <select id="frequency" name="recurringFrequency" bind:value={recurringData.frequency} required>
-                <option value="daily">Daily</option>
-                <option value="weekly">Weekly</option>
-                <option value="monthly">Monthly</option>
-                <option value="quarterly">Quarterly</option>
-                <option value="yearly">Yearly</option>
-                <option value="custom">Custom (Cron)</option>
+                <option value="daily">{t('freq_daily', lang)}</option>
+                <option value="weekly">{t('freq_weekly', lang)}</option>
+                <option value="monthly">{t('freq_monthly', lang)}</option>
+                <option value="quarterly">{t('freq_quarterly', lang)}</option>
+                <option value="yearly">{t('freq_yearly', lang)}</option>
+                <option value="custom">{t('freq_custom', lang)}</option>
              </select>
            </div>

            <div class="form-group">
-              <label for="recurringStartDate">Start Date *</label>
+              <label for="recurringStartDate">{t('start_date', lang)}</label>
              <input 
                type="date" 
                id="recurringStartDate" 
@@ -539,7 +544,7 @@
          {/if}

          <div class="form-group">
-            <label for="recurringEndDate">End Date (optional)</label>
+            <label for="recurringEndDate">{t('end_date_optional', lang)}</label>
            <input 
              type="date" 
              id="recurringEndDate" 
@@ -547,15 +552,15 @@
              bind:value={recurringData.endDate}
              min={recurringData.startDate}
            />
-            <small class="help-text">Leave empty for indefinite recurring</small>
+            <small class="help-text">{t('end_date_hint', lang)}</small>
          </div>


          {#if nextExecutionPreview}
            <div class="execution-preview">
-              <h3>Next Execution</h3>
+              <h3>{t('next_execution_preview', lang)}</h3>
              <p class="next-execution">{nextExecutionPreview}</p>
-              <p class="frequency-description">{getFrequencyDescription(/** @type {any} */ (recurringData))}</p>
+              <p class="frequency-description">{frequencyDescription(/** @type {any} */ (recurringData), lang)}</p>
            </div>
          {/if}
        </div>
@@ -566,6 +571,7 @@
      bind:imagePreview={imagePreview}
      bind:imageFile={imageFile}
      bind:uploading={uploading}
+      {lang}
      onimageSelected={(file) => { imageFile = file; }}
      onimageRemoved={handleImageRemoved}
      onerror={(message) => { error = message; }}
@@ -577,6 +583,7 @@
      currentUser={data.session?.user?.nickname || data.currentUser}
      predefinedMode={predefinedMode}
      canRemoveUsers={!predefinedMode}
+      {lang}
    />

    <!-- Server-side fallback: simple text inputs for users -->
@@ -616,7 +623,7 @@
      <div class="error">{error}</div>
    {/if}

-    <SaveFab disabled={loading} label="Create payment" />
+    <SaveFab disabled={loading} label={t('create_payment', lang)} />
  </form>
 </main>

--- a/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.svelte
@@ -1,7 +1,8 @@
 <script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
-  import { getCategoryOptions } from '$lib/utils/categories';
+  import { page } from '$app/stores';
+  import { detectCospendLang, cospendRoot, locale, t, getCategoryOptionsI18n } from '$lib/js/cospendI18n';
  import FormSection from '$lib/components/FormSection.svelte';
  import ImageUpload from '$lib/components/ImageUpload.svelte';
  import SaveFab from '$lib/components/SaveFab.svelte';
@@ -12,6 +13,10 @@

  let { data } = $props();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));
+
  /** @type {PaymentWithSplits | null} */
  let payment = $state(null);
  let loading = $state(true);
@@ -37,7 +42,7 @@
  /** @type {number | null} */
  let originalAmount = $state(null);

-  let categoryOptions = $derived(getCategoryOptions());
+  let categoryOptions = $derived(getCategoryOptionsI18n(lang));

  // Recalculate splits when amount changes
  function recalculateSplits() {
@@ -244,7 +249,7 @@
        throw new Error('Failed to update payment');
      }

-      await goto('/cospend/payments');
+      await goto(`/${root}/payments`);
    } catch (err) {
      error = err instanceof Error ? err.message : String(err);
    } finally {
@@ -274,7 +279,7 @@
      }

      // Redirect to payments list after successful deletion
-      goto('/cospend/payments');
+      goto(`/${root}/payments`);
      
    } catch (err) {
      error = err instanceof Error ? err.message : String(err);
@@ -352,25 +357,25 @@
 </script>

 <svelte:head>
-  <title>Edit Payment - Cospend</title>
+  <title>{t('edit_payment_title', lang)} - {t('cospend', lang)}</title>
 </svelte:head>

 <main class="edit-payment">
  <div class="header">
-    <h1>Edit Payment</h1>
-    <p>Modify payment details and receipt image</p>
+    <h1>{t('edit_payment_title', lang)}</h1>
+    <p>{t('edit_payment_subtitle', lang)}</p>
  </div>

  {#if loading}
-    <div class="loading">Loading payment...</div>
+    <div class="loading">{t('loading_payments', lang)}</div>
  {:else if error}
    <div class="error">Error: {error}</div>
  {:else if payment}
    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }
  } class="payment-form">
-      <FormSection title="Payment Details">
+      <FormSection title={t('payment_details', lang)}>
        <div class="form-group">
-          <label for="title">Title *</label>
+          <label for="title">{t('title_label', lang)}</label>
          <input 
            type="text" 
            id="title" 
@@ -380,7 +385,7 @@
        </div>

        <div class="form-group">
-          <label for="description">Description</label>
+          <label for="description">{t('description_label', lang)}</label>
          <textarea 
            id="description" 
            bind:value={payment.description} 
@@ -389,7 +394,7 @@
        </div>

        <div class="form-group">
-          <label for="category">Category</label>
+          <label for="category">{t('category_star', lang)}</label>
          <select id="category" bind:value={payment.category} required>
            {#each categoryOptions as option}
              <option value={option.value}>{option.label}</option>
@@ -399,7 +404,7 @@

        <div class="form-row">
          <div class="form-group">
-            <label for="amount">Amount *</label>
+            <label for="amount">{t('amount_label', lang)}</label>
            <div class="amount-currency">
              {#if payment.originalAmount && payment.currency !== 'CHF'}
                <!-- Show original amount for foreign currency -->
@@ -462,7 +467,7 @@
          </div>

          <div class="form-group">
-            <label for="date">Date</label>
+            <label for="date">{t('date', lang)}</label>
            <input
              type="date"
              id="date"
@@ -474,7 +479,7 @@
        </div>

        <div class="form-group">
-          <label for="paidBy">Paid by</label>
+          <label for="paidBy">{t('paid_by_form', lang)}</label>
          <input 
            type="text" 
            id="paidBy" 
@@ -489,6 +494,7 @@
        bind:imageFile={imageFile}
        bind:uploading={uploading}
        currentImage={payment.image}
+        {lang}
        onimageSelected={handleImageUpload}
        onimageRemoved={handleImageRemoved}
        oncurrentImageRemoved={handleCurrentImageRemoved}
@@ -496,18 +502,18 @@
      />

      {#if payment.splits && payment.splits.length > 0}
-        <FormSection title="Split Configuration">
+        <FormSection title={t('split_config', lang)}>
          <div class="split-method-info">
-            <span class="label">Split Method:</span>
+            <span class="label">{t('split_method_form', lang)}</span>
            <span class="value">
              {#if payment.splitMethod === 'equal'}
-                Equal Split
+                {t('equal_split', lang)}
              {:else if payment.splitMethod === 'full'}
-                Paid in Full
+                {t('paid_in_full', lang)}
              {:else if payment.splitMethod === 'personal_equal'}
-                Personal + Equal Split
+                {t('personal_equal_split', lang)}
              {:else if payment.splitMethod === 'proportional'}
-                Custom Proportions
+                {t('custom_proportions', lang)}
              {:else}
                {payment.splitMethod}
              {/if}
@@ -516,8 +522,8 @@

          {#if payment.splitMethod === 'personal_equal'}
            <div class="personal-amounts-editor">
-              <h3>Personal Amounts</h3>
-              <p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
+              <h3>{t('personal_amounts', lang)}</h3>
+              <p class="description">{t('personal_amounts_desc', lang)}</p>
              {#each payment.splits as split, index}
                <div class="personal-input">
                  <label for="personal_{split.username}">{split.username}</label>
@@ -540,10 +546,10 @@
                {@const remainder = Math.max(0, Number(payment.amount) - totalPersonal)}
                {@const hasError = totalPersonal > Number(payment.amount)}
                <div class="remainder-info" class:error={hasError}>
-                  <span>Total Personal: CHF {totalPersonal.toFixed(2)}</span>
-                  <span>Remainder to Split: CHF {remainder.toFixed(2)}</span>
+                  <span>{t('total_personal', lang)}: CHF {totalPersonal.toFixed(2)}</span>
+                  <span>{t('remainder_to_split', lang)}: CHF {remainder.toFixed(2)}</span>
                  {#if hasError}
-                    <div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
+                    <div class="error-message">⚠️ {t('personal_exceeds', lang)}</div>
                  {/if}
                </div>
              {/if}
@@ -551,17 +557,17 @@
          {/if}

          <div class="splits-display">
-            <h3>Split Preview</h3>
+            <h3>{t('split_preview', lang)}</h3>
            {#each payment.splits as split}
              <div class="split-item">
                <span class="split-username">{split.username}</span>
                <span class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                  {#if split.amount > 0}
-                    owes CHF {split.amount.toFixed(2)}
+                    {t('owes', lang)} CHF {split.amount.toFixed(2)}
                  {:else if split.amount < 0}
-                    owed CHF {Math.abs(split.amount).toFixed(2)}
+                    {t('owed', lang)} CHF {Math.abs(split.amount).toFixed(2)}
                  {:else}
-                    owes CHF {split.amount.toFixed(2)}
+                    {t('owes', lang)} CHF {split.amount.toFixed(2)}
                  {/if}
                </span>
              </div>
@@ -581,11 +587,11 @@
          onclick={deletePayment}
          disabled={deleting || saving}
        >
-          {deleting ? 'Deleting...' : 'Delete Payment'}
+          {deleting ? t('deleting', lang) : t('delete_payment', lang)}
        </button>
      </div>

-      <SaveFab disabled={saving || deleting} label="Save changes" />
+      <SaveFab disabled={saving || deleting} label={t('save_changes', lang)} />
    </form>
  {/if}
 </main>
--- a/src/routes/[cospendRoot=cospendRoot]/payments/view/[id]/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/view/[id]/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/payments/view/[id]/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/view/[id]/+page.svelte
@@ -1,15 +1,21 @@
 <script>
  import { onMount } from 'svelte';
  import { goto, invalidateAll } from '$app/navigation';
+  import { page } from '$app/stores';
  import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
-  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
+  import { getCategoryEmoji } from '$lib/utils/categories';
  import EditButton from '$lib/components/EditButton.svelte';
+  import { detectCospendLang, cospendRoot, t, locale, splitDescription, paymentCategoryName } from '$lib/js/cospendI18n';


  import { formatCurrency } from '$lib/utils/formatters';

  let { data } = $props();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));
+
  // Use server-side data with progressive enhancement
  /** @type {any | null} */
  let payment = $derived(data.payment || null);
@@ -30,40 +36,30 @@

  function formatAmountWithCurrency(/** @type {any} */ payment) {
    if (payment.currency === 'CHF' || !payment.originalAmount) {
-      return formatCurrency(payment.amount, 'CHF', 'de-CH');
+      return formatCurrency(payment.amount, 'CHF', loc);
    }

-    return `${formatCurrency(payment.originalAmount, payment.currency, 'de-CH')} ≈ ${formatCurrency(payment.amount, 'CHF', 'de-CH')}`;
+    return `${formatCurrency(payment.originalAmount, payment.currency, loc)} ≈ ${formatCurrency(payment.amount, 'CHF', loc)}`;
  }

  function formatDate(/** @type {string} */ dateString) {
-    return new Date(dateString).toLocaleDateString('de-CH');
+    return new Date(dateString).toLocaleDateString(loc);
  }

  function getSplitDescription(/** @type {any} */ payment) {
-    if (!payment.splits || payment.splits.length === 0) return 'No splits';
-
-    if (payment.splitMethod === 'equal') {
-      return `Split equally among ${payment.splits.length} people`;
-    } else if (payment.splitMethod === 'full') {
-      return `Paid in full by ${payment.paidBy}`;
-    } else if (payment.splitMethod === 'personal_equal') {
-      return `Personal amounts + equal split among ${payment.splits.length} people`;
-    } else {
-      return `Custom split among ${payment.splits.length} people`;
-    }
+    return splitDescription(payment, lang);
  }

 </script>

 <svelte:head>
-  <title>{payment ? payment.title : 'Payment'} - Cospend</title>
+  <title>{payment ? payment.title : 'Payment'} - {t('cospend', lang)}</title>
 </svelte:head>

 <main class="payment-view">

  {#if loading}
-    <div class="loading">Loading payment...</div>
+    <div class="loading">{t('loading_payments', lang)}</div>
  {:else if error}
    <div class="error">Error: {error}</div>
  {:else if payment}
@@ -78,7 +74,7 @@
            {formatAmountWithCurrency(payment)}
            {#if payment.currency !== 'CHF' && payment.exchangeRate}
              <div class="exchange-rate-info">
-                <small>Exchange rate: 1 {payment.currency} = {payment.exchangeRate.toFixed(4)} CHF</small>
+                <small>{t('exchange_rate', lang)}: 1 {payment.currency} = {payment.exchangeRate.toFixed(4)} CHF</small>
              </div>
            {/if}
          </div>
@@ -93,30 +89,30 @@
      <div class="payment-info">
        <div class="info-grid">
          <div class="info-item">
-            <span class="label">Date:</span>
+            <span class="label">{t('date', lang)}</span>
            <span class="value">{formatDate(payment.date)}</span>
          </div>
          <div class="info-item">
-            <span class="label">Paid by:</span>
+            <span class="label">{t('paid_by_label', lang)}</span>
            <span class="value">{payment.paidBy}</span>
          </div>
          <div class="info-item">
-            <span class="label">Created by:</span>
+            <span class="label">{t('created_by', lang)}</span>
            <span class="value">{payment.createdBy}</span>
          </div>
          <div class="info-item">
-            <span class="label">Category:</span>
-            <span class="value">{getCategoryName(payment.category || 'groceries')}</span>
+            <span class="label">{t('category_label', lang)}</span>
+            <span class="value">{paymentCategoryName(payment.category || 'groceries', lang)}</span>
          </div>
          <div class="info-item">
-            <span class="label">Split method:</span>
+            <span class="label">{t('split_method_label', lang)}</span>
            <span class="value">{getSplitDescription(payment)}</span>
          </div>
        </div>

        {#if payment.description}
          <div class="description">
-            <h3>Description</h3>
+            <h3>{t('description', lang)}</h3>
            <p>{payment.description}</p>
          </div>
        {/if}
@@ -124,7 +120,7 @@

      {#if payment.splits && payment.splits.length > 0}
        <div class="splits-section">
-          <h3>Split Details</h3>
+          <h3>{t('split_details', lang)}</h3>
          <div class="splits-list">
            {#each payment.splits as split}
              <div class="split-item" class:current-user={split.username === data.session?.user?.nickname}>
@@ -133,17 +129,17 @@
                  <div class="user-info">
                    <span class="username">{split.username}</span>
                    {#if split.username === data.session?.user?.nickname}
-                      <span class="you-badge">You</span>
+                      <span class="you-badge">{t('you', lang)}</span>
                    {/if}
                  </div>
                </div>
                <div class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                  {#if split.amount > 0}
-                    owes {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                    {t('owes', lang)} {formatCurrency(split.amount, 'CHF', loc)}
                  {:else if split.amount < 0}
-                    owed {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                    {t('owed', lang)} {formatCurrency(split.amount, 'CHF', loc)}
                  {:else}
-                    owes {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                    {t('owes', lang)} {formatCurrency(split.amount, 'CHF', loc)}
                  {/if}
                </div>
              </div>
@@ -156,7 +152,7 @@
 </main>

 {#if payment}
-  <EditButton href="/cospend/payments/edit/{data.paymentId}" />
+  <EditButton href="/{root}/payments/edit/{data.paymentId}" />
 {/if}

 <style>
--- a/src/routes/[cospendRoot=cospendRoot]/recurring/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/recurring/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/recurring/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/recurring/+page.svelte
@@ -1,15 +1,20 @@
 <script>
  import { onMount } from 'svelte';
-  import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
-  import { getFrequencyDescription, formatNextExecution } from '$lib/utils/recurring';
+  import { getCategoryEmoji } from '$lib/utils/categories';
  import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
  import { toast } from '$lib/js/toast.svelte';
  import AddButton from '$lib/components/AddButton.svelte';
  import { formatCurrency } from '$lib/utils/formatters';
  import Toggle from '$lib/components/Toggle.svelte';
+  import { page } from '$app/stores';
+  import { detectCospendLang, cospendRoot, t, locale, paymentCategoryName, frequencyDescription, formatNextExecutionI18n } from '$lib/js/cospendI18n';

  let { data } = $props();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));
+
  /** @type {any[]} */
  let recurringPayments = $state([]);
  let loading = $state(true);
@@ -60,7 +65,7 @@
  }

  async function deleteRecurringPayment(/** @type {string} */ paymentId, /** @type {string} */ title) {
-    if (!confirm(`Are you sure you want to delete the recurring payment "${title}"?`)) {
+    if (!confirm(`${t('delete_recurring_confirm', lang)} "${title}"?`)) {
      return;
    }

@@ -81,7 +86,7 @@
  }

  function formatDate(/** @type {string} */ dateString) {
-    return new Date(dateString).toLocaleDateString('de-CH');
+    return new Date(dateString).toLocaleDateString(loc);
  }

  $effect(() => {
@@ -92,31 +97,31 @@
 </script>

 <svelte:head>
-  <title>Recurring Payments - Cospend</title>
+  <title>{t('recurring_title', lang)} - {t('cospend', lang)}</title>
 </svelte:head>

 <main class="recurring-payments">
  <div class="header">
-    <h1>Recurring Payments</h1>
-    <p>Automate your regular shared expenses</p>
+    <h1>{t('recurring_title', lang)}</h1>
+    <p>{t('recurring_subtitle', lang)}</p>
  </div>

  <div class="filters">
    <label>
      <Toggle bind:checked={showActiveOnly} />
-      <span>Show active only</span>
+      <span>{t('show_active_only', lang)}</span>
    </label>
  </div>

  {#if loading}
-    <div class="loading">Loading recurring payments...</div>
+    <div class="loading">{t('loading_recurring', lang)}</div>
  {:else if error}
    <div class="error">Error: {error}</div>
  {:else if recurringPayments.length === 0}
    <div class="empty-state">
-      <h2>No recurring payments found</h2>
-      <p>Create your first recurring payment to automate regular expenses like rent, utilities, or subscriptions.</p>
-      <a href="/cospend/payments/add" class="btn btn-primary">Add Your First Payment</a>
+      <h2>{t('no_recurring', lang)}</h2>
+      <p>{t('no_recurring_desc', lang)}</p>
+      <a href="/{root}/payments/add" class="btn btn-primary">{t('add_first_payment', lang)}</a>
    </div>
  {:else}
    <div class="payments-grid">
@@ -127,11 +132,11 @@
              <span class="category-emoji">{getCategoryEmoji(payment.category)}</span>
              <h3>{payment.title}</h3>
              <span class="status-badge" class:active={payment.isActive} class:inactive={!payment.isActive}>
-                {payment.isActive ? 'Active' : 'Inactive'}
+                {payment.isActive ? t('active', lang) : t('inactive', lang)}
              </span>
            </div>
            <div class="payment-amount">
-              {formatCurrency(payment.amount, 'CHF', 'de-CH')}
+              {formatCurrency(payment.amount, 'CHF', loc)}
            </div>
          </div>

@@ -141,17 +146,17 @@

          <div class="payment-details">
            <div class="detail-row">
-              <span class="label">Category:</span>
-              <span class="value">{getCategoryName(payment.category)}</span>
+              <span class="label">{t('category_label', lang)}</span>
+              <span class="value">{paymentCategoryName(payment.category, lang)}</span>
            </div>

            <div class="detail-row">
-              <span class="label">Frequency:</span>
-              <span class="value">{getFrequencyDescription(payment)}</span>
+              <span class="label">{t('frequency', lang)}</span>
+              <span class="value">{frequencyDescription(payment, lang)}</span>
            </div>

            <div class="detail-row">
-              <span class="label">Paid by:</span>
+              <span class="label">{t('paid_by_label', lang)}</span>
              <div class="payer-info">
                <ProfilePicture username={payment.paidBy} size={20} />
                <span class="value">{payment.paidBy}</span>
@@ -159,29 +164,29 @@
            </div>

            <div class="detail-row">
-              <span class="label">Next execution:</span>
+              <span class="label">{t('next_execution', lang)}</span>
              <span class="value next-execution">
-                {formatNextExecution(new Date(payment.nextExecutionDate))}
+                {formatNextExecutionI18n(new Date(payment.nextExecutionDate), lang)}
              </span>
            </div>

            {#if payment.lastExecutionDate}
              <div class="detail-row">
-                <span class="label">Last executed:</span>
+                <span class="label">{t('last_executed', lang)}</span>
                <span class="value">{formatDate(payment.lastExecutionDate)}</span>
              </div>
            {/if}

            {#if payment.endDate}
              <div class="detail-row">
-                <span class="label">Ends:</span>
+                <span class="label">{t('ends', lang)}</span>
                <span class="value">{formatDate(payment.endDate)}</span>
              </div>
            {/if}
          </div>

          <div class="splits-preview">
-            <h4>Split between:</h4>
+            <h4>{t('split_between', lang)}</h4>
            <div class="splits-list">
              {#each payment.splits as split}
                <div class="split-item">
@@ -189,11 +194,11 @@
                  <span class="username">{split.username}</span>
                  <span class="split-amount" class:positive={split.amount < 0} class:negative={split.amount > 0}>
                    {#if split.amount > 0}
-                      owes {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                      {t('owes', lang)} {formatCurrency(split.amount, 'CHF', loc)}
                    {:else if split.amount < 0}
-                      gets {formatCurrency(Math.abs(split.amount), 'CHF', 'de-CH')}
+                      {t('gets', lang)} {formatCurrency(Math.abs(split.amount), 'CHF', loc)}
                    {:else}
-                      owes {formatCurrency(split.amount, 'CHF', 'de-CH')}
+                      {t('owes', lang)} {formatCurrency(split.amount, 'CHF', loc)}
                    {/if}
                  </span>
                </div>
@@ -202,8 +207,8 @@
          </div>

          <div class="card-actions">
-            <a href="/cospend/recurring/edit/{payment._id}" class="btn btn-secondary btn-small">
-              Edit
+            <a href="/{root}/recurring/edit/{payment._id}" class="btn btn-secondary btn-small">
+              {t('edit', lang)}
            </a>
            <button
              class="btn btn-small"
@@ -211,13 +216,13 @@
              class:btn-success={!payment.isActive}
              onclick={() => toggleActiveStatus(payment._id, payment.isActive)}
            >
-              {payment.isActive ? 'Pause' : 'Activate'}
+              {payment.isActive ? t('pause', lang) : t('activate', lang)}
            </button>
            <button
              class="btn btn-danger btn-small"
              onclick={() => deleteRecurringPayment(payment._id, payment.title)}
            >
-              Delete
+              {t('delete_', lang)}
            </button>
          </div>
        </div>
@@ -226,7 +231,7 @@
  {/if}
 </main>

-<AddButton href="/cospend/payments/add" />
+<AddButton href="/{root}/payments/add" />

 <style>
  .recurring-payments {
--- a/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.server.ts
--- a/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.svelte
@@ -1,9 +1,10 @@
 <script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
-  import { getCategoryOptions } from '$lib/utils/categories';
+  import { page } from '$app/stores';
+  import { detectCospendLang, cospendRoot, locale, t, getCategoryOptionsI18n, frequencyDescription } from '$lib/js/cospendI18n';
  import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
-  import { validateCronExpression, getFrequencyDescription, calculateNextExecutionDate } from '$lib/utils/recurring';
+  import { validateCronExpression, calculateNextExecutionDate } from '$lib/utils/recurring';
  import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
  import SplitMethodSelector from '$lib/components/cospend/SplitMethodSelector.svelte';
  import UsersList from '$lib/components/cospend/UsersList.svelte';
@@ -11,6 +12,10 @@

  let { data } = $props();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));
+
  // svelte-ignore state_referenced_locally
  let formData = $state({
    title: '',
@@ -55,7 +60,7 @@
  let exchangeRateTimeout = $state();
  let jsEnhanced = $state(false);

-  let categoryOptions = $derived(getCategoryOptions());
+  let categoryOptions = $derived(getCategoryOptionsI18n(lang));

  onMount(async () => {
    jsEnhanced = true;
@@ -134,7 +139,7 @@
          startDate: new Date(formData.startDate)
        });
        const nextDate = calculateNextExecutionDate(recurringPayment, new Date(formData.startDate));
-        nextExecutionPreview = nextDate.toLocaleString('de-CH', {
+        nextExecutionPreview = nextDate.toLocaleString(loc, {
          weekday: 'long',
          year: 'numeric',
          month: 'long',
@@ -199,7 +204,7 @@
      }

      const result = await response.json();
-      await goto('/cospend/recurring');
+      await goto(`/${root}/recurring`);

    } catch (err) {
      error = err instanceof Error ? err.message : String(err);
@@ -284,47 +289,47 @@
 </script>

 <svelte:head>
-  <title>Edit Recurring Payment - Cospend</title>
+  <title>{t('edit_recurring_title', lang)} - {t('cospend', lang)}</title>
 </svelte:head>

 <main class="edit-recurring-payment">
  <div class="header">
-    <h1>Edit Recurring Payment</h1>
+    <h1>{t('edit_recurring_title', lang)}</h1>
  </div>

  {#if loadingPayment}
-    <div class="loading">Loading recurring payment...</div>
+    <div class="loading">{t('loading_recurring', lang)}</div>
  {:else if error && !formData.title}
    <div class="error">Error: {error}</div>
  {:else}
    <form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }
  } class="payment-form">
      <div class="form-section">
-        <h2>Payment Details</h2>
+        <h2>{t('payment_details_section', lang)}</h2>
        
        <div class="form-group">
-          <label for="title">Title *</label>
+          <label for="title">{t('title_label', lang)}</label>
          <input 
            type="text" 
            id="title" 
            bind:value={formData.title} 
            required 
-            placeholder="e.g., Monthly rent, Weekly groceries"
+            placeholder={t('title_placeholder', lang)}
          />
        </div>

        <div class="form-group">
-          <label for="description">Description</label>
+          <label for="description">{t('description_label', lang)}</label>
          <textarea 
            id="description" 
            bind:value={formData.description} 
-            placeholder="Additional details about this recurring payment..."
+            placeholder={t('description_placeholder', lang)}
            rows="3"
          ></textarea>
        </div>

        <div class="form-group">
-          <label for="category">Category *</label>
+          <label for="category">{t('category_star', lang)}</label>
          <select id="category" bind:value={formData.category} required>
            {#each categoryOptions as option}
              <option value={option.value}>{option.label}</option>
@@ -334,7 +339,7 @@

        <div class="form-row">
          <div class="form-group">
-            <label for="amount">Amount *</label>
+            <label for="amount">{t('amount_label', lang)}</label>
            <div class="amount-currency">
              <input 
                type="number" 
@@ -377,7 +382,7 @@
          </div>

          <div class="form-group">
-            <label for="paidBy">Paid by</label>
+            <label for="paidBy">{t('paid_by_form', lang)}</label>
            <select id="paidBy" bind:value={formData.paidBy} required>
              {#each users as user}
                <option value={user}>{user}</option>
@@ -387,30 +392,30 @@
        </div>

        <div class="form-group">
-          <label for="isActive">Status</label>
+          <label for="isActive">{t('status_label', lang)}</label>
          <select id="isActive" bind:value={formData.isActive}>
-            <option value={true}>Active</option>
-            <option value={false}>Inactive</option>
+            <option value={true}>{t('active', lang)}</option>
+            <option value={false}>{t('inactive', lang)}</option>
          </select>
        </div>
      </div>

      <div class="form-section">
-        <h2>Recurring Schedule</h2>
+        <h2>{t('recurring_schedule', lang)}</h2>
        
        <div class="form-row">
          <div class="form-group">
-            <label for="frequency">Frequency *</label>
+            <label for="frequency">{t('frequency_label', lang)}</label>
            <select id="frequency" bind:value={formData.frequency} required>
-              <option value="daily">Daily</option>
-              <option value="weekly">Weekly</option>
-              <option value="monthly">Monthly</option>
-              <option value="custom">Custom (Cron)</option>
+              <option value="daily">{t('freq_daily', lang)}</option>
+              <option value="weekly">{t('freq_weekly', lang)}</option>
+              <option value="monthly">{t('freq_monthly', lang)}</option>
+              <option value="custom">{t('freq_custom', lang)}</option>
            </select>
          </div>

          <div class="form-group">
-            <label for="startDate">Start Date *</label>
+            <label for="startDate">{t('start_date', lang)}</label>
            <input 
              type="date" 
              id="startDate" 
@@ -448,20 +453,20 @@
        {/if}

        <div class="form-group">
-          <label for="endDate">End Date (optional)</label>
+          <label for="endDate">{t('end_date_optional', lang)}</label>
          <input 
            type="date" 
            id="endDate" 
            bind:value={formData.endDate}
          />
-          <div class="help-text">Leave blank for indefinite recurring payments</div>
+          <div class="help-text">{t('end_date_hint', lang)}</div>
        </div>

        {#if nextExecutionPreview}
          <div class="execution-preview">
-            <h3>Next Execution</h3>
+            <h3>{t('next_execution_preview', lang)}</h3>
            <p class="next-execution">{nextExecutionPreview}</p>
-            <p class="frequency-description">{getFrequencyDescription(/** @type {any} */ (formData))}</p>
+            <p class="frequency-description">{frequencyDescription(/** @type {any} */ (formData), lang)}</p>
          </div>
        {/if}
      </div>
@@ -472,6 +477,7 @@
        currentUser={data.session?.user?.nickname}
        {predefinedMode}
        canRemoveUsers={!predefinedMode}
+        {lang}
      />

      <SplitMethodSelector 
@@ -490,7 +496,7 @@
        <div class="error">{error}</div>
      {/if}

-      <SaveFab disabled={loading || cronError} label="Save changes" />
+      <SaveFab disabled={loading || cronError} label={t('save_changes', lang)} />
    </form>
  {/if}
 </main>
--- a/src/routes/[cospendRoot=cospendRoot]/settle/+page.server.ts
+++ b/src/routes/[cospendRoot=cospendRoot]/settle/+page.server.ts
@@ -1,7 +1,8 @@
 import { fail, redirect } from '@sveltejs/kit';
 import type { PageServerLoad, Actions } from './$types';
+import { detectCospendLang, cospendRoot } from '$lib/js/cospendI18n';

-export const load: PageServerLoad = async ({ fetch, locals, request }) => {
+export const load: PageServerLoad = async ({ fetch, locals, request, url }) => {
  const session = await locals.auth();
  
  if (!session) {
@@ -43,7 +44,7 @@ export const load: PageServerLoad = async ({ fetch, locals, request }) => {
 }

 export const actions: Actions = {
-  settle: async ({ request, fetch, locals }) => {
+  settle: async ({ request, fetch, locals, url }) => {
    const data = await request.formData();
    
    const settlementType = data.get('settlementType');
@@ -113,7 +114,8 @@ export const actions: Actions = {
      }

      // Redirect back to dashboard on success
-      throw redirect(303, '/cospend');
+      const root = cospendRoot(detectCospendLang(url.pathname));
+      throw redirect(303, `/${root}`);
    } catch (error: unknown) {
      if (error && typeof error === 'object' && 'status' in error && (error as { status: number }).status === 303) {
        throw error; // Re-throw redirect
--- a/src/routes/[cospendRoot=cospendRoot]/settle/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/settle/+page.svelte
@@ -1,14 +1,19 @@
 <script>
  import { onMount } from 'svelte';
  import { enhance } from '$app/forms';
+  import { page } from '$app/stores';
  import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
  import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
-
+  import { detectCospendLang, cospendRoot, t, locale } from '$lib/js/cospendI18n';

  import { formatCurrency } from '$lib/utils/formatters';

  let { data, form } = $props();

+  const lang = $derived(detectCospendLang($page.url.pathname));
+  const root = $derived(cospendRoot(lang));
+  const loc = $derived(locale(lang));
+
  // Use server-side data with progressive enhancement
  let debtData = $derived(data.debtData || {
    whoOwesMe: [],
@@ -38,7 +43,7 @@
            from: debtData.whoOwesMe[0].username,
            to: data.currentUser,
            amount: debtData.whoOwesMe[0].netAmount,
-            description: `Settlement: ${debtData.whoOwesMe[0].username} pays ${data.currentUser}`
+            description: `${t('settlement_payment', lang)}: ${debtData.whoOwesMe[0].username} → ${data.currentUser}`
          };
          if (!settlementAmount) {
            settlementAmount = debtData.whoOwesMe[0].netAmount.toString();
@@ -49,7 +54,7 @@
            from: data.currentUser,
            to: debtData.whoIOwe[0].username,
            amount: debtData.whoIOwe[0].netAmount,
-            description: `Settlement: ${data.currentUser} pays ${debtData.whoIOwe[0].username}`
+            description: `${t('settlement_payment', lang)}: ${data.currentUser} → ${debtData.whoIOwe[0].username}`
          };
          if (!settlementAmount) {
            settlementAmount = debtData.whoIOwe[0].netAmount.toString();
@@ -67,7 +72,7 @@
        from: user,
        to: currentUser,
        amount: amount,
-        description: `Settlement: ${user} pays ${currentUser}`
+        description: `${t('settlement_payment', lang)}: ${user} → ${currentUser}`
      };
    } else {
      selectedSettlement = {
@@ -75,7 +80,7 @@
        from: currentUser,
        to: user,
        amount: amount,
-        description: `Settlement: ${currentUser} pays ${user}`
+        description: `${t('settlement_payment', lang)}: ${currentUser} → ${user}`
      };
    }
    settlementAmount = amount.toString();
@@ -83,13 +88,13 @@

  async function processSettlement() {
    if (!selectedSettlement || !settlementAmount) {
-      error = 'Please select a settlement and enter an amount';
+      error = t('error_select_settlement', lang);
      return;
    }

    const amount = parseFloat(/** @type {string} */ (settlementAmount));
    if (isNaN(amount) || amount <= 0) {
-      error = 'Please enter a valid positive amount';
+      error = t('error_valid_amount', lang);
      return;
    }

@@ -132,7 +137,7 @@
      }

      // Redirect back to dashboard on success
-      window.location.href = '/cospend';
+      window.location.href = `/${root}`;
    } catch (err) {
      error = err instanceof Error ? err.message : String(err);
      submitting = false;
@@ -142,36 +147,36 @@
 </script>

 <svelte:head>
-  <title>Settle Debts - Cospend</title>
+  <title>{t('settle_title', lang)} - {t('cospend', lang)}</title>
 </svelte:head>

 <main class="settle-main">
  <div class="header-section">
-    <h1>Settle Debts</h1>
-    <p>Record payments to settle outstanding debts between users</p>
+    <h1>{t('settle_title', lang)}</h1>
+    <p>{t('settle_subtitle', lang)}</p>
  </div>

  {#if loading}
-    <div class="loading">Loading debt information...</div>
+    <div class="loading">{t('loading_debts', lang)}</div>
  {:else if error}
    <div class="error">Error: {error}</div>
  {:else if debtData.whoOwesMe.length === 0 && debtData.whoIOwe.length === 0}
    <div class="no-debts">
-      <h2>🎉 All Settled!</h2>
-      <p>No outstanding debts to settle. Everyone is even!</p>
+      <h2>🎉 {t('all_settled', lang)}</h2>
+      <p>{t('no_debts_msg', lang)}</p>
      <div class="actions">
-        <a href="/cospend/dash" class="btn btn-primary">Back to Dashboard</a>
+        <a href="/{root}/dash" class="btn btn-primary">{t('back_to_dashboard', lang)}</a>
      </div>
    </div>
  {:else}
    <div class="settlement-container">
      <!-- Available Settlements -->
      <div class="available-settlements">
-        <h2>Available Settlements</h2>
+        <h2>{t('available_settlements', lang)}</h2>

        {#if debtData.whoOwesMe.length > 0}
          <div class="settlement-section">
-            <h3>Money You're Owed</h3>
+            <h3>{t('money_owed_to_you', lang)}</h3>
            {#each debtData.whoOwesMe as debt}
              <div class="settlement-option"
                   role="button"
@@ -184,11 +189,11 @@
                  <ProfilePicture username={debt.username} size={40} />
                  <div class="user-details">
                    <span class="username">{debt.username}</span>
-                    <span class="debt-amount">owes you {formatCurrency(debt.netAmount, 'CHF', 'de-CH')}</span>
+                    <span class="debt-amount">{t('owes_you', lang)} {formatCurrency(debt.netAmount, 'CHF', loc)}</span>
                  </div>
                </div>
                <div class="settlement-action">
-                  <span class="action-text">Receive Payment</span>
+                  <span class="action-text">{t('receive_payment', lang)}</span>
                </div>
              </div>
            {/each}
@@ -197,7 +202,7 @@

        {#if debtData.whoIOwe.length > 0}
          <div class="settlement-section">
-            <h3>Money You Owe</h3>
+            <h3>{t('money_you_owe', lang)}</h3>
            {#each debtData.whoIOwe as debt}
              <div class="settlement-option"
                   role="button"
@@ -210,11 +215,11 @@
                  <ProfilePicture username={debt.username} size={40} />
                  <div class="user-details">
                    <span class="username">{debt.username}</span>
-                    <span class="debt-amount">you owe {formatCurrency(debt.netAmount, 'CHF', 'de-CH')}</span>
+                    <span class="debt-amount">{t('you_owe', lang)} {formatCurrency(debt.netAmount, 'CHF', loc)}</span>
                  </div>
                </div>
                <div class="settlement-action">
-                  <span class="action-text">Make Payment</span>
+                  <span class="action-text">{t('make_payment', lang)}</span>
                </div>
              </div>
            {/each}
@@ -225,7 +230,7 @@
      <!-- Settlement Details -->
      {#if selectedSettlement}
        <div class="settlement-details">
-          <h2>Settlement Details</h2>
+          <h2>{t('settlement_details', lang)}</h2>

          <div class="settlement-summary">
            <div class="settlement-flow">
@@ -233,7 +238,7 @@
                <ProfilePicture username={selectedSettlement.from} size={48} />
                <span class="username">{selectedSettlement.from}</span>
                {#if selectedSettlement.from === data.currentUser}
-                  <span class="you-badge">You</span>
+                  <span class="you-badge">{t('you', lang)}</span>
                {/if}
              </div>
              <div class="flow-arrow">→</div>
@@ -241,13 +246,13 @@
                <ProfilePicture username={selectedSettlement.to} size={48} />
                <span class="username">{selectedSettlement.to}</span>
                {#if selectedSettlement.to === data.currentUser}
-                  <span class="you-badge">You</span>
+                  <span class="you-badge">{t('you', lang)}</span>
                {/if}
              </div>
            </div>

            <div class="settlement-amount-section">
-              <label for="amount">Settlement Amount</label>
+              <label for="amount">{t('settlement_amount', lang)}</label>
              <div class="amount-input">
                <span class="currency">CHF</span>
                <input
@@ -274,60 +279,60 @@
              onclick={processSettlement}
              disabled={submitting || !settlementAmount}>
              {#if submitting}
-                Recording Settlement...
+                {t('recording_settlement', lang)}
              {:else}
-                Record Settlement
+                {t('record_settlement', lang)}
              {/if}
            </button>
            <button class="btn btn-secondary" onclick={() => selectedSettlement = null}>
-              Cancel
+              {t('cancel', lang)}
            </button>
          </div>
        </div>
      {:else}
        <!-- No-JS Fallback Form -->
        <div class="settlement-details no-js-fallback">
-          <h2>Record Settlement</h2>
+          <h2>{t('record_settlement', lang)}</h2>
          <form method="POST" action="?/settle" class="settlement-form">
            <div class="form-group">
-              <label for="settlementType">Settlement Type</label>
+              <label for="settlementType">{t('settlement_type', lang)}</label>
              <select id="settlementType" name="settlementType" required>
-                <option value="">Select settlement type</option>
+                <option value="">{t('select_settlement', lang)}</option>
                {#each debtData.whoOwesMe as debt}
                  <option value="receive" data-from="{debt.username}" data-to="{data.currentUser}">
-                    Receive {formatCurrency(debt.netAmount, 'CHF', 'de-CH')} from {debt.username}
+                    {t('receive_from', lang)} {formatCurrency(debt.netAmount, 'CHF', loc)} {t('from', lang)} {debt.username}
                  </option>
                {/each}
                {#each debtData.whoIOwe as debt}
                  <option value="pay" data-from="{data.currentUser}" data-to="{debt.username}">
-                    Pay {formatCurrency(debt.netAmount, 'CHF', 'de-CH')} to {debt.username}
+                    {t('pay_to', lang)} {formatCurrency(debt.netAmount, 'CHF', loc)} {t('to', lang)} {debt.username}
                  </option>
                {/each}
              </select>
            </div>

            <div class="form-group">
-              <label for="fromUser">From User</label>
+              <label for="fromUser">{t('from_user', lang)}</label>
              <select id="fromUser" name="fromUser" required>
-                <option value="">Select payer</option>
+                <option value="">{t('select_payer', lang)}</option>
                {#each [...debtData.whoOwesMe.map((/** @type {any} */ d) => d.username), data.currentUser].filter(Boolean) as user}
-                  <option value="{user}">{user}{user === data.currentUser ? ' (You)' : ''}</option>
+                  <option value="{user}">{user}{user === data.currentUser ? ` (${t('you', lang)})` : ''}</option>
                {/each}
              </select>
            </div>

            <div class="form-group">
-              <label for="toUser">To User</label>
+              <label for="toUser">{t('to_user', lang)}</label>
              <select id="toUser" name="toUser" required>
-                <option value="">Select recipient</option>
+                <option value="">{t('select_recipient', lang)}</option>
                {#each [...debtData.whoIOwe.map((/** @type {any} */ d) => d.username), data.currentUser].filter(Boolean) as user}
-                  <option value="{user}">{user}{user === data.currentUser ? ' (You)' : ''}</option>
+                  <option value="{user}">{user}{user === data.currentUser ? ` (${t('you', lang)})` : ''}</option>
                {/each}
              </select>
            </div>

            <div class="form-group">
-              <label for="fallback-amount">Settlement Amount (CHF)</label>
+              <label for="fallback-amount">{t('settlement_amount_chf', lang)}</label>
              <input
                id="fallback-amount"
                name="amount"
@@ -342,10 +347,10 @@

            <div class="settlement-actions">
              <button type="submit" class="btn btn-settlement">
-                Record Settlement
+                {t('record_settlement', lang)}
              </button>
-              <a href="/cospend/dash" class="btn btn-secondary">
-                Cancel
+              <a href="/{root}/dash" class="btn btn-secondary">
+                {t('cancel', lang)}
              </a>
            </div>
          </form>
--- a/src/routes/cospend/+layout.server.ts
+++ b/src/routes/cospend/+layout.server.ts
@@ -1,7 +0,0 @@
-import type { LayoutServerLoad } from "./$types"
-
-export const load : LayoutServerLoad = async ({locals}) => {
-	return {
-		session: locals.session ?? await locals.auth()
-	}
-};
--- a/src/routes/cospend/+page.server.ts
+++ b/src/routes/cospend/+page.server.ts
@@ -1,5 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export function load() {
-  redirect(302, '/cospend/list');
-}