diff --git a/src/lib/components/AddButton.svelte b/src/lib/components/AddButton.svelte
index 382e829..756d472 100644
--- a/src/lib/components/AddButton.svelte
+++ b/src/lib/components/AddButton.svelte
@@ -1,6 +1,8 @@
 <script lang='ts'>
 import ActionButton from "./ActionButton.svelte";
+
+export let href: string;
 </script>
-<ActionButton href="/rezepte/add">
+<ActionButton {href}>
 <svg class=icon_svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
 </ActionButton>
diff --git a/src/lib/components/PaymentModal.svelte b/src/lib/components/PaymentModal.svelte
index ede8566..c2e1088 100644
--- a/src/lib/components/PaymentModal.svelte
+++ b/src/lib/components/PaymentModal.svelte
@@ -3,6 +3,7 @@
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import ProfilePicture from './ProfilePicture.svelte';
+  import EditButton from './EditButton.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   
   export let paymentId;
@@ -214,28 +215,31 @@
 
           <div class="panel-actions">
             {#if payment && payment.createdBy === session?.user?.nickname}
-              <a href="/cospend/payments/edit/{paymentId}" class="btn btn-primary">Edit Payment</a>
               <button 
-                class="btn btn-danger" 
+                class="btn-danger" 
                 on:click={deletePayment}
                 disabled={deleting}
               >
-                {deleting ? 'Deleting...' : 'Delete'}
+                {deleting ? 'Deleting...' : 'Delete Payment'}
               </button>
             {/if}
-            <button class="btn btn-secondary" on:click={closeModal}>Close</button>
+            <button class="btn-secondary" on:click={closeModal}>Close</button>
           </div>
         </div>
       {/if}
   </div>
 </div>
 
+{#if payment && payment.createdBy === session?.user?.nickname}
+  <EditButton href="/cospend/payments/edit/{paymentId}" />
+{/if}
+
 <style>
   .panel-content {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: white;
+    background: var(--nord6);
   }
 
   .panel-header {
@@ -243,14 +247,14 @@
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid #eee;
-    background: #f8f9fa;
+    border-bottom: 1px solid var(--nord4);
+    background: var(--nord5);
     flex-shrink: 0;
   }
 
   .panel-header h2 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
@@ -260,13 +264,13 @@
     cursor: pointer;
     padding: 0.5rem;
     border-radius: 0.25rem;
-    color: #666;
+    color: var(--nord3);
     transition: all 0.2s;
   }
 
   .close-button:hover {
-    background: #e9ecef;
-    color: #333;
+    background: var(--nord4);
+    color: var(--nord0);
   }
 
   .panel-body {
@@ -282,8 +286,10 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
+    border-radius: 0.5rem;
+    border: 1px solid var(--red);
   }
 
   .payment-details {
@@ -296,8 +302,8 @@
     justify-content: space-between;
     align-items: flex-start;
     padding: 1.5rem;
-    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-    border-bottom: 1px solid #dee2e6;
+    background: linear-gradient(135deg, var(--nord5), var(--nord4));
+    border-bottom: 1px solid var(--nord3);
   }
 
   .title-with-category {
@@ -314,14 +320,14 @@
 
   .title-section h1 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.5rem;
   }
 
   .payment-amount {
     font-size: 1.25rem;
     font-weight: bold;
-    color: #1976d2;
+    color: var(--blue);
   }
 
   .receipt-image {
@@ -334,7 +340,7 @@
     max-height: 100px;
     object-fit: cover;
     border-radius: 0.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
   }
 
   .payment-info {
@@ -356,43 +362,43 @@
 
   .label {
     font-weight: 600;
-    color: #666;
+    color: var(--nord3);
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
 
   .value {
-    color: #333;
+    color: var(--nord0);
     font-size: 0.95rem;
   }
 
   .description {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding-top: 1.5rem;
   }
 
   .description h3 {
     margin: 0 0 0.75rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
   .description p {
     margin: 0;
-    color: #555;
+    color: var(--nord2);
     line-height: 1.5;
     font-size: 0.95rem;
   }
 
   .splits-section {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding: 1.5rem;
   }
 
   .splits-section h3 {
     margin: 0 0 1rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
@@ -407,14 +413,14 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem;
-    background: #f8f9fa;
+    background: var(--nord5);
     border-radius: 0.5rem;
-    border: 1px solid transparent;
+    border: 1px solid var(--nord4);
   }
 
   .split-item.current-user {
-    background: #e3f2fd;
-    border-color: #2196f3;
+    background: var(--nord8);
+    border-color: var(--blue);
   }
 
   .split-user {
@@ -431,12 +437,12 @@
 
   .username {
     font-weight: 500;
-    color: #333;
+    color: var(--nord0);
     font-size: 0.95rem;
   }
 
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.375rem;
     border-radius: 1rem;
@@ -450,60 +456,62 @@
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
   }
 
   .panel-actions {
     padding: 1.5rem;
-    border-top: 1px solid #eee;
-    background: #f8f9fa;
+    border-top: 1px solid var(--nord4);
+    background: var(--nord5);
     display: flex;
     gap: 1rem;
     justify-content: flex-end;
     flex-shrink: 0;
   }
 
-  .btn {
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    font-size: 0.9rem;
-    font-weight: 500;
+  .btn-primary, .btn-secondary, .btn-danger {
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    cursor: pointer;
     transition: all 0.2s;
     border: none;
-    cursor: pointer;
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
   }
 
-  .btn-primary:hover {
-    background-color: #1565c0;
+  .btn-primary:hover:not(:disabled) {
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-secondary {
-    background-color: white;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #f5f5f5;
+    background-color: var(--nord4);
+    transform: translateY(-1px);
   }
 
   .btn-danger {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
   }
 
   .btn-danger:hover:not(:disabled) {
-    background-color: #c62828;
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   .btn-danger:disabled {
@@ -511,6 +519,103 @@
     cursor: not-allowed;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .panel-content {
+      background: var(--nord1);
+    }
+
+    .panel-header {
+      background: var(--nord2);
+      border-bottom-color: var(--nord3);
+    }
+
+    .panel-header h2 {
+      color: var(--font-default-dark);
+    }
+
+    .close-button {
+      color: var(--nord4);
+    }
+
+    .close-button:hover {
+      background: var(--nord3);
+      color: var(--font-default-dark);
+    }
+
+    .error {
+      background-color: var(--accent-dark);
+    }
+
+    .payment-header {
+      background: linear-gradient(135deg, var(--nord2), var(--nord3));
+    }
+
+    .title-section h1 {
+      color: var(--font-default-dark);
+    }
+
+    .receipt-image img {
+      border-color: var(--nord2);
+    }
+
+    .label {
+      color: var(--nord4);
+    }
+
+    .value {
+      color: var(--font-default-dark);
+    }
+
+    .description {
+      border-top-color: var(--nord2);
+    }
+
+    .description h3 {
+      color: var(--font-default-dark);
+    }
+
+    .description p {
+      color: var(--nord5);
+    }
+
+    .splits-section {
+      border-top-color: var(--nord2);
+    }
+
+    .splits-section h3 {
+      color: var(--font-default-dark);
+    }
+
+    .split-item {
+      background: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .split-item.current-user {
+      background: var(--nord3);
+      border-color: var(--blue);
+    }
+
+    .username {
+      color: var(--font-default-dark);
+    }
+
+    .panel-actions {
+      background: var(--nord2);
+      border-top-color: var(--nord3);
+    }
+
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
+  }
+
   @media (max-width: 600px) {
     .payment-header {
       flex-direction: column;
diff --git a/src/routes/cospend/+page.svelte b/src/routes/cospend/+page.svelte
index 05b07d2..9fac13a 100644
--- a/src/routes/cospend/+page.svelte
+++ b/src/routes/cospend/+page.svelte
@@ -7,6 +7,7 @@
   import DebtBreakdown from '$lib/components/DebtBreakdown.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   import { isSettlementPayment, getSettlementIcon, getSettlementClasses, getSettlementReceiver } from '$lib/utils/settlements';
+  import AddButton from '$lib/components/AddButton.svelte';
 
   export let data; // Contains session data and balance from server
 
@@ -17,7 +18,7 @@
   };
   let loading = false; // Start as false since we have server data
   let error = null;
-  
+
   // Component references for refreshing
   let enhancedBalanceComponent;
   let debtBreakdownComponent;
@@ -27,14 +28,14 @@
     // Mark that JavaScript is loaded for progressive enhancement
     document.body.classList.add('js-loaded');
     await fetchBalance();
-    
+
     // Listen for dashboard refresh events from the layout
     const handleDashboardRefresh = () => {
       refreshAllComponents();
     };
-    
+
     window.addEventListener('dashboardRefresh', handleDashboardRefresh);
-    
+
     // Cleanup
     return () => {
       window.removeEventListener('dashboardRefresh', handleDashboardRefresh);
@@ -60,13 +61,13 @@
   async function refreshAllComponents() {
     // Refresh the main balance and recent activity
     await fetchBalance();
-    
+
     // Refresh the enhanced balance component if it exists and has a refresh method
     if (enhancedBalanceComponent && enhancedBalanceComponent.refresh) {
       await enhancedBalanceComponent.refresh();
     }
-    
-    // Refresh the debt breakdown component if it exists and has a refresh method  
+
+    // Refresh the debt breakdown component if it exists and has a refresh method
     if (debtBreakdownComponent && debtBreakdownComponent.refresh) {
       await debtBreakdownComponent.refresh();
     }
@@ -102,14 +103,14 @@
     if (!isSettlementPayment(split.paymentId)) {
       return '';
     }
-    
+
     // In a settlement, the receiver is the person who is NOT the payer
     // Since we're viewing the current user's activity, the receiver is the current user
     // when someone else paid, or the other user when current user paid
-    
+
     const paidBy = split.paymentId?.paidBy;
     const currentUser = data.session?.user?.nickname;
-    
+
     if (paidBy === currentUser) {
       // Current user paid, so receiver is the other user
       return split.otherUser || '';
@@ -125,16 +126,11 @@
 </svelte:head>
 
 <main class="cospend-main">
-  <div class="header-section">
     <h1>Cospend</h1>
-    <p>Track and split expenses with your friends and family</p>
-  </div>
 
   <EnhancedBalance bind:this={enhancedBalanceComponent} initialBalance={data.balance} initialDebtData={data.debtData} />
 
   <div class="actions">
-    <a href="/cospend/payments/add" class="btn btn-primary">Add Payment</a>
-    <a href="/cospend/payments" class="btn btn-secondary">View All Payments</a>
     {#if balance.netBalance !== 0}
       <a href="/cospend/settle" class="btn btn-settlement">Settle Debts</a>
     {/if}
@@ -153,8 +149,8 @@
         {#each balance.recentSplits as split}
           {#if isSettlementPayment(split.paymentId)}
             <!-- Settlement Payment Display - User -> User Flow -->
-            <a 
-              href="/cospend/payments/view/{split.paymentId?._id}" 
+            <a
+              href="/cospend/payments/view/{split.paymentId?._id}"
               class="settlement-flow-activity"
               on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
             >
@@ -180,12 +176,12 @@
             </a>
           {:else}
             <!-- Regular Payment Display - Speech Bubble Style -->
-            <div class="activity-message" 
+            <div class="activity-message"
                  class:is-me={split.paymentId?.paidBy === data.session?.user?.nickname}>
               <div class="message-content">
                 <ProfilePicture username={split.paymentId?.paidBy || 'Unknown'} size={36} />
-                <a 
-                  href="/cospend/payments/view/{split.paymentId?._id}" 
+                <a
+                  href="/cospend/payments/view/{split.paymentId?._id}"
                   class="activity-bubble"
                   on:click={(e) => handlePaymentClick(split.paymentId?._id, e)}
                 >
@@ -198,8 +194,8 @@
                       <span class="username">Paid by {split.paymentId?.paidBy || 'Unknown'}</span>
                       <span class="category-name">{getCategoryName(split.paymentId?.category || 'groceries')}</span>
                     </div>
-                    <div class="activity-amount" 
-                         class:positive={split.amount < 0} 
+                    <div class="activity-amount"
+                         class:positive={split.amount < 0}
                          class:negative={split.amount > 0}>
                       {#if split.amount > 0}
                         -{formatCurrency(split.amount)}
@@ -230,6 +226,8 @@
   {/if}
 </main>
 
+<AddButton href="/cospend/payments/add" />
+
 <style>
   .cospend-main {
     max-width: 800px;
@@ -237,20 +235,11 @@
     padding: 2rem;
   }
 
-  .header-section {
+  h1 {
     text-align: center;
-    margin-bottom: 2rem;
-  }
-
-  .header-section h1 {
     font-size: 2.5rem;
-    margin-bottom: 0.5rem;
-    color: #333;
-  }
-
-  .header-section p {
-    color: #666;
-    font-size: 1.1rem;
+    margin-block: 0.5rem 1.5rem;
+    color: var(--nord0);
   }
 
   .loading, .error {
@@ -260,22 +249,32 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    h1 {
+      color: var(--font-default-dark);
+    }
+
+    .error {
+      background-color: var(--accent-dark);
+    }
+  }
+
 
   .positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .negative {
-    color: #d32f2f;
+    color: var(--red);
   }
 
   .even {
-    color: #666;
+    color: var(--nord3);
   }
 
   .actions {
@@ -294,45 +293,40 @@
     transition: all 0.2s;
   }
 
-  .btn-primary {
-    background-color: #1976d2;
-    color: white;
-  }
-
-  .btn-primary:hover {
-    background-color: #1565c0;
-  }
-
-  .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
-  }
-
-  .btn-secondary:hover {
-    background-color: #e8e8e8;
-  }
-
   .btn-settlement {
-    background: linear-gradient(135deg, #28a745, #20c997);
+    background: linear-gradient(135deg, var(--green), var(--lightblue));
     color: white;
     border: none;
   }
 
   .btn-settlement:hover {
-    background: linear-gradient(135deg, #20c997, #1e7e34);
+    background: linear-gradient(135deg, var(--lightblue), var(--green));
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .recent-activity {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .recent-activity h2 {
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .recent-activity {
+      background: var(--accent-dark);
+      border-color: var(--nord2);
+    }
+
+    .recent-activity h2 {
+      color: var(--font-default-dark);
+    }
   }
 
   .activity-dialog {
@@ -364,11 +358,11 @@
   }
 
   .activity-bubble {
-    background: #f8f9fa;
+    background: var(--nord5);
     border-radius: 1rem;
     padding: 1rem;
     position: relative;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--nord4);
     text-decoration: none;
     color: inherit;
     display: block;
@@ -377,8 +371,20 @@
   }
 
   .activity-message.is-me .activity-bubble {
-    background: #e3f2fd;
-    border-color: #2196f3;
+    background: var(--nord8);
+    border-color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .activity-bubble {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .activity-message.is-me .activity-bubble {
+      background: var(--nord2);
+      border-color: var(--blue);
+    }
   }
 
   .activity-bubble:hover {
@@ -397,24 +403,34 @@
 
   .activity-bubble::before {
     left: -15px;
-    border-right-color: #f8f9fa;
+    border-right-color: var(--nord5);
   }
 
   .activity-message.is-me .activity-bubble::before {
     left: auto;
     right: -15px;
-    border-left-color: #e3f2fd;
+    border-left-color: var(--nord8);
     border-right-color: transparent;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .activity-bubble::before {
+      border-right-color: var(--nord1);
+    }
+
+    .activity-message.is-me .activity-bubble::before {
+      border-left-color: var(--nord2);
+    }
+  }
+
 
   /* New Settlement Flow Activity Styles */
   .settlement-flow-activity {
     display: block;
     text-decoration: none;
     color: inherit;
-    background: linear-gradient(135deg, #f8fff9, #e8f5e8);
-    border: 2px solid #28a745;
+    background: linear-gradient(135deg, var(--nord6), var(--nord5));
+    border: 2px solid var(--green);
     border-radius: 1rem;
     padding: 1.5rem;
     margin: 0 auto 1rem auto;
@@ -423,10 +439,21 @@
   }
 
   .settlement-flow-activity:hover {
-    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.2);
+    box-shadow: 0 6px 20px rgba(163, 190, 140, 0.3);
     transform: translateY(-2px);
   }
 
+  @media (prefers-color-scheme: dark) {
+    .settlement-flow-activity {
+      background: linear-gradient(135deg, var(--nord2), var(--nord1));
+      border-color: var(--green);
+    }
+
+    .settlement-flow-activity:hover {
+      box-shadow: 0 6px 20px rgba(163, 190, 140, 0.2);
+    }
+  }
+
   .settlement-activity-content {
     width: 100%;
   }
@@ -448,7 +475,7 @@
 
   .settlement-username {
     font-weight: 600;
-    color: #28a745;
+    color: var(--green);
     font-size: 1rem;
     text-align: center;
   }
@@ -464,22 +491,28 @@
   .settlement-amount-large {
     font-size: 1.5rem;
     font-weight: 700;
-    color: #28a745;
+    color: var(--green);
     text-align: center;
   }
 
   .settlement-flow-arrow {
     font-size: 1.8rem;
-    color: #28a745;
+    color: var(--green);
     font-weight: bold;
   }
 
   .settlement-date {
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord3);
     text-align: center;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .settlement-date {
+      color: var(--nord4);
+    }
+  }
+
   .activity-header {
     display: flex;
     justify-content: space-between;
@@ -505,26 +538,40 @@
   }
 
   .category-name {
-    color: #888;
+    color: var(--nord3);
     font-size: 0.8rem;
     font-style: italic;
   }
 
   .payment-title {
-    color: #333;
+    color: var(--nord0);
     font-size: 1.1rem;
     font-weight: 600;
     margin: 0;
   }
 
   .username {
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
     font-weight: 500;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .category-name {
+      color: var(--nord4);
+    }
+
+    .payment-title {
+      color: var(--font-default-dark);
+    }
+
+    .username {
+      color: var(--nord4);
+    }
+  }
+
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.5rem;
     border-radius: 1rem;
@@ -552,18 +599,28 @@
   }
 
   .paid-by, .payment-date {
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
   }
 
   .payment-description {
-    color: #555;
+    color: var(--nord2);
     font-size: 0.9rem;
     font-style: italic;
     margin-top: 0.25rem;
     line-height: 1.3;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .paid-by, .payment-date {
+      color: var(--nord4);
+    }
+
+    .payment-description {
+      color: var(--nord5);
+    }
+  }
+
   @media (max-width: 600px) {
     .cospend-main {
       padding: 1rem;
@@ -603,4 +660,4 @@
       font-size: 1.3rem;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/cospend/payments/+page.svelte b/src/routes/cospend/payments/+page.svelte
index faf82c9..17ea682 100644
--- a/src/routes/cospend/payments/+page.svelte
+++ b/src/routes/cospend/payments/+page.svelte
@@ -4,6 +4,7 @@
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   import { isSettlementPayment, getSettlementIcon, getSettlementReceiver } from '$lib/utils/settlements';
+  import AddButton from '$lib/components/AddButton.svelte';
 
   export let data;
 
@@ -19,7 +20,7 @@
   onMount(async () => {
     // Mark that JavaScript is loaded for CSS
     document.body.classList.add('js-loaded');
-    
+
     // Only refresh if we don't have server data
     if (payments.length === 0) {
       await loadPayments();
@@ -30,22 +31,22 @@
     try {
       loading = true;
       const response = await fetch(`/api/cospend/payments?limit=${limit}&offset=${page * limit}`);
-      
+
       if (!response.ok) {
         throw new Error('Failed to load payments');
       }
 
       const result = await response.json();
-      
+
       if (page === 0) {
         payments = result.payments;
       } else {
         payments = [...payments, ...result.payments];
       }
-      
+
       hasMore = result.payments.length === limit;
       currentPage = page;
-      
+
     } catch (err) {
       error = err.message;
     } finally {
@@ -97,7 +98,7 @@
 
   function getSplitDescription(payment) {
     if (!payment.splits || payment.splits.length === 0) return 'No splits';
-    
+
     if (payment.splitMethod === 'equal') {
       return `Split equally among ${payment.splits.length} people`;
     } else if (payment.splitMethod === 'full') {
@@ -118,12 +119,6 @@
   <div class="header">
     <div class="header-content">
       <h1>All Payments</h1>
-      <p>Manage your shared expenses</p>
-    </div>
-    <div class="header-actions">
-      <a href="/cospend/payments/add" class="btn btn-primary">Add Payment</a>
-      <a href="/cospend/recurring" class="btn btn-recurring">Recurring Payments</a>
-      <a href="/cospend" class="btn btn-secondary">Back to Dashboard</a>
     </div>
   </div>
 
@@ -228,14 +223,14 @@
             <span class="created-by">Created by {payment.createdBy}</span>
             {#if payment.createdBy === data.session.user.nickname}
               <div class="action-buttons">
-                <button 
-                  class="btn-edit" 
+                <button
+                  class="btn-edit"
                   on:click={() => goto(`/cospend/payments/edit/${payment._id}`)}
                 >
                   Edit
                 </button>
-                <button 
-                  class="btn-delete" 
+                <button
+                  class="btn-delete"
                   on:click={() => deletePayment(payment._id)}
                 >
                   Delete
@@ -250,22 +245,22 @@
     <!-- Pagination that works without JavaScript -->
     <div class="pagination">
       {#if data.currentOffset > 0}
-        <a href="?offset={Math.max(0, data.currentOffset - data.limit)}&limit={data.limit}" 
+        <a href="?offset={Math.max(0, data.currentOffset - data.limit)}&limit={data.limit}"
            class="btn btn-secondary">
           ← Previous
         </a>
       {/if}
-      
+
       {#if hasMore}
-        <a href="?offset={data.currentOffset + data.limit}&limit={data.limit}" 
+        <a href="?offset={data.currentOffset + data.limit}&limit={data.limit}"
            class="btn btn-secondary">
           Next →
         </a>
       {/if}
-      
+
       <!-- Progressive enhancement: JavaScript load more button -->
       {#if hasMore}
-        <button class="btn btn-secondary js-only" on:click={loadMore} disabled={loading} 
+        <button class="btn btn-secondary js-only" on:click={loadMore} disabled={loading}
                 style="display: none;">
           {loading ? 'Loading...' : 'Load More (JS)'}
         </button>
@@ -274,6 +269,8 @@
   {/if}
 </main>
 
+<AddButton href="/cospend/payments/add" />
+
 <style>
   .payments-list {
     max-width: 1200px;
@@ -281,30 +278,19 @@
     padding: 2rem;
   }
 
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 2rem;
-    gap: 2rem;
+
+   h1 {
+    margin-block: 0 2rem;
+    margin-inline: auto;
+    color: var(--nord0);
+    text-align: center;
   }
 
-  .header-content h1 {
-    margin: 0 0 0.5rem 0;
-    color: #333;
-    font-size: 2rem;
-  }
+  @media (prefers-color-scheme: dark) {
+     h1 {
+      color: var(--font-default-dark);
+    }
 
-  .header-content p {
-    margin: 0;
-    color: #666;
-    font-size: 1.1rem;
-  }
-
-  .header-actions {
-    display: flex;
-    gap: 1rem;
-    flex-shrink: 0;
   }
 
   .btn {
@@ -318,32 +304,36 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
   }
 
   .btn-primary:hover {
-    background-color: #1565c0;
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
   }
 
-  .btn-recurring {
-    background: linear-gradient(135deg, #9c27b0, #673ab7);
-    color: white;
-    border: none;
-  }
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
 
-  .btn-recurring:hover {
-    background: linear-gradient(135deg, #8e24aa, #5e35b1);
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .loading, .error {
@@ -353,9 +343,16 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .empty-state {
@@ -364,18 +361,32 @@
   }
 
   .empty-content svg {
-    color: #ccc;
+    color: var(--nord3);
     margin-bottom: 1rem;
   }
 
   .empty-content h2 {
     margin: 0 0 0.5rem 0;
-    color: #555;
+    color: var(--nord1);
   }
 
   .empty-content p {
     margin: 0 0 2rem 0;
-    color: #777;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .empty-content svg {
+      color: var(--nord4);
+    }
+
+    .empty-content h2 {
+      color: var(--nord5);
+    }
+
+    .empty-content p {
+      color: var(--nord4);
+    }
   }
 
   .payments-grid {
@@ -387,28 +398,52 @@
 
   .payment-card {
     display: block;
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     padding: 1.5rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: all 0.2s;
     text-decoration: none;
     color: inherit;
+    border: 1px solid var(--nord4);
   }
 
   .payment-card:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     text-decoration: none;
     color: inherit;
+    transform: translateY(-1px);
+    border-color: var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-card {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .payment-card:hover {
+      border-color: var(--nord3);
+    }
   }
 
   .settlement-card {
-    background: linear-gradient(135deg, #f8fff9, #f0f8f0);
-    border: 2px solid #28a745;
+    background: linear-gradient(135deg, var(--nord6), var(--nord5));
+    border: 2px solid var(--green);
   }
 
   .settlement-card:hover {
-    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.2);
+    box-shadow: 0 4px 16px rgba(163, 190, 140, 0.3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .settlement-card {
+      background: linear-gradient(135deg, var(--nord2), var(--nord1));
+    }
+
+    .settlement-card:hover {
+      box-shadow: 0 4px 16px rgba(163, 190, 140, 0.2);
+    }
   }
 
   .settlement-flow {
@@ -427,7 +462,7 @@
   .settlement-user-from .username,
   .settlement-user-to .username {
     font-weight: 500;
-    color: #28a745;
+    color: var(--green);
   }
 
   .settlement-arrow {
@@ -438,13 +473,13 @@
   }
 
   .settlement-arrow .arrow {
-    color: #28a745;
+    color: var(--green);
     font-size: 1.2rem;
     font-weight: bold;
   }
 
   .settlement-badge-small {
-    background: linear-gradient(135deg, #28a745, #20c997);
+    background: linear-gradient(135deg, var(--green), var(--lightblue));
     color: white;
     padding: 0.125rem 0.375rem;
     border-radius: 0.75rem;
@@ -464,7 +499,7 @@
   .settlement-amount-text {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #28a745;
+    color: var(--green);
   }
 
   .payment-header {
@@ -495,27 +530,43 @@
 
   .payment-title h3 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-title h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .payment-meta {
     display: flex;
     gap: 1rem;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord3);
     flex-wrap: wrap;
   }
 
   .payment-meta .category-name {
-    color: #888;
+    color: var(--nord3);
     font-style: italic;
     font-size: 0.8rem;
   }
 
   .payment-meta .amount {
     font-weight: 600;
-    color: #1976d2;
+    color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-meta {
+      color: var(--nord4);
+    }
+
+    .payment-meta .category-name {
+      color: var(--nord4);
+    }
   }
 
   .receipt-thumb {
@@ -523,15 +574,27 @@
     height: 60px;
     object-fit: cover;
     border-radius: 0.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .receipt-thumb {
+      border-color: var(--nord2);
+    }
   }
 
   .payment-description {
-    color: #555;
+    color: var(--nord2);
     margin-bottom: 1rem;
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-description {
+      color: var(--nord5);
+    }
+  }
+
   .payment-details {
     margin-bottom: 1rem;
   }
@@ -543,26 +606,46 @@
   }
 
   .detail-row .label {
-    color: #666;
+    color: var(--nord3);
     font-weight: 500;
   }
 
   .detail-row .value {
-    color: #333;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .detail-row .label {
+      color: var(--nord4);
+    }
+
+    .detail-row .value {
+      color: var(--font-default-dark);
+    }
   }
 
   .splits-summary {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding-top: 1rem;
     margin-bottom: 1rem;
   }
 
   .splits-summary h4 {
     margin: 0 0 0.75rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .splits-summary {
+      border-top-color: var(--nord2);
+    }
+
+    .splits-summary h4 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .splits-list {
     display: flex;
     flex-direction: column;
@@ -576,30 +659,46 @@
   }
 
   .split-user {
-    color: #555;
+    color: var(--nord2);
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
     font-weight: 500;
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
     font-weight: 500;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .split-user {
+      color: var(--nord5);
+    }
+  }
+
   .payment-actions {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding-top: 1rem;
   }
 
   .created-by {
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-actions {
+      border-top-color: var(--nord2);
+    }
+
+    .created-by {
+      color: var(--nord4);
+    }
   }
 
   .action-buttons {
@@ -617,21 +716,34 @@
   }
 
   .btn-edit {
-    background-color: #f5f5f5;
-    color: #333;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-edit:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
   }
 
   .btn-delete {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
   }
 
   .btn-delete:hover {
-    background-color: #c62828;
+    background-color: var(--nord11);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .btn-edit {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-edit:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .pagination {
@@ -645,7 +757,7 @@
   .js-only {
     display: none;
   }
-  
+
   :global(body.js-loaded) .js-only {
     display: inline-block;
   }
@@ -675,4 +787,4 @@
       gap: 1rem;
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/cospend/payments/add/+page.svelte b/src/routes/cospend/payments/add/+page.svelte
index c78120b..0ed3e1a 100644
--- a/src/routes/cospend/payments/add/+page.svelte
+++ b/src/routes/cospend/payments/add/+page.svelte
@@ -399,7 +399,7 @@
 <main class="add-payment">
   <div class="header">
     <h1>Add New Payment</h1>
-    <a href="/cospend" class="back-link">← Back to Cospend</a>
+    <p>Create a new shared expense or recurring payment</p>
   </div>
 
   <form method="POST" use:enhance class="payment-form">
@@ -776,20 +776,30 @@
   }
 
   .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    text-align: center;
     margin-bottom: 2rem;
   }
 
   .header h1 {
-    margin: 0;
-    color: #333;
+    margin: 0 0 0.5rem 0;
+    color: var(--nord0);
+    font-size: 2rem;
   }
 
-  .back-link {
-    color: #1976d2;
-    text-decoration: none;
+  .header p {
+    margin: 0;
+    color: var(--nord3);
+    font-size: 1.1rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .header h1 {
+      color: var(--font-default-dark);
+    }
+
+    .header p {
+      color: var(--nord4);
+    }
   }
 
   .payment-form {
@@ -799,19 +809,31 @@
   }
 
   .form-section {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .form-section h2 {
     margin-top: 0;
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .form-section {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .form-group {
     margin-bottom: 1rem;
   }
@@ -826,36 +848,64 @@
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    color: #555;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    label {
+      color: var(--nord5);
+    }
   }
 
   input, textarea, select {
     width: 100%;
     padding: 0.75rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
     border-radius: 0.5rem;
     font-size: 1rem;
     box-sizing: border-box;
+    background-color: var(--nord6);
+    color: var(--nord0);
   }
 
   input:focus, textarea:focus, select:focus {
     outline: none;
-    border-color: #1976d2;
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    input, textarea, select {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
   }
 
   .image-upload {
-    border: 2px dashed #ddd;
+    border: 2px dashed var(--nord4);
     border-radius: 0.5rem;
     padding: 2rem;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s;
+    background-color: var(--nord5);
   }
 
   .image-upload:hover {
-    border-color: #1976d2;
-    background-color: #f5f5f5;
+    border-color: var(--blue);
+    background-color: var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .image-upload {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .image-upload:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .upload-label {
@@ -864,18 +914,32 @@
   }
 
   .upload-content svg {
-    color: #666;
+    color: var(--nord3);
     margin-bottom: 1rem;
   }
 
   .upload-content p {
     margin: 0 0 0.5rem 0;
     font-weight: 500;
-    color: #333;
+    color: var(--nord0);
   }
 
   .upload-content small {
-    color: #666;
+    color: var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .upload-content svg {
+      color: var(--nord4);
+    }
+
+    .upload-content p {
+      color: var(--font-default-dark);
+    }
+
+    .upload-content small {
+      color: var(--nord4);
+    }
   }
 
   .image-preview {
@@ -890,12 +954,18 @@
   }
 
   .remove-image {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 0.25rem;
     cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .remove-image:hover {
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   .users-list {
@@ -909,9 +979,17 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    background-color: #f5f5f5;
+    background-color: var(--nord5);
     padding: 0.5rem 0.75rem;
     border-radius: 1rem;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .user-item {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .user-item.with-profile {
@@ -920,10 +998,11 @@
 
   .user-item .username {
     font-weight: 500;
+    color: var(--nord0);
   }
 
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.5rem;
     border-radius: 1rem;
@@ -931,28 +1010,51 @@
     font-weight: 500;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .user-item .username {
+      color: var(--font-default-dark);
+    }
+  }
+
   .predefined-users {
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     padding: 1rem;
     border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--nord4);
   }
 
   .predefined-note {
     margin: 0 0 1rem 0;
-    color: #666;
+    color: var(--nord2);
     font-size: 0.9rem;
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .predefined-users {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .predefined-note {
+      color: var(--nord4);
+    }
+  }
+
   .remove-user {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
     border: none;
     padding: 0.25rem 0.5rem;
     border-radius: 0.25rem;
     font-size: 0.75rem;
     cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .remove-user:hover {
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   .add-user {
@@ -965,20 +1067,34 @@
   }
 
   .add-user button {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     border: none;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .add-user button:hover {
+    background-color: var(--nord10);
+    transform: translateY(-1px);
   }
 
 
   .proportional-splits {
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
     border-radius: 0.5rem;
     padding: 1rem;
     margin-bottom: 1rem;
+    background-color: var(--nord5);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .proportional-splits {
+      border-color: var(--nord3);
+      background-color: var(--nord2);
+    }
   }
 
   .proportional-splits h3 {
@@ -1003,9 +1119,17 @@
   }
 
   .split-preview {
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     padding: 1rem;
     border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-preview {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .split-preview h3 {
@@ -1027,21 +1151,28 @@
   }
 
   .amount.positive {
-    color: #2e7d32;
+    color: var(--green);
     font-weight: 500;
   }
 
   .amount.negative {
-    color: #d32f2f;
+    color: var(--red);
     font-weight: 500;
   }
 
   .error {
-    background-color: #ffebee;
-    color: #d32f2f;
+    background-color: var(--nord6);
+    color: var(--red);
     padding: 1rem;
     border-radius: 0.5rem;
     margin-bottom: 1rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .form-actions {
@@ -1059,13 +1190,15 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     border: none;
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #1565c0;
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-primary:disabled {
@@ -1074,13 +1207,29 @@
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
+    text-decoration: none;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .personal-splits {
@@ -1088,23 +1237,40 @@
   }
 
   .personal-splits .description {
-    color: #666;
+    color: var(--nord2);
     font-size: 0.9rem;
     margin-bottom: 1rem;
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .personal-splits .description {
+      color: var(--nord4);
+    }
+  }
+
   .remainder-info {
     margin-top: 1rem;
     padding: 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--nord4);
   }
 
   .remainder-info.error {
-    background-color: #fff5f5;
-    border-color: #fed7d7;
+    background-color: var(--nord6);
+    border-color: var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .remainder-info {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .remainder-info.error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .remainder-info span {
@@ -1114,7 +1280,7 @@
   }
 
   .error-message {
-    color: #d32f2f;
+    color: var(--red);
     font-weight: 600;
     margin-top: 0.5rem;
     font-size: 0.9rem;
@@ -1150,7 +1316,13 @@
   .manual-users p {
     margin: 0 0 0.5rem 0;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .manual-users p {
+      color: var(--nord4);
+    }
   }
 
   /* Recurring payment styles */
@@ -1169,29 +1341,50 @@
   .recurring-options {
     margin-top: 1rem;
     padding: 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .recurring-options {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .help-text {
     display: block;
     margin-top: 0.25rem;
     font-size: 0.8rem;
-    color: #666;
+    color: var(--nord3);
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .help-text {
+      color: var(--nord4);
+    }
+  }
+
   .help-text p {
     margin: 0.5rem 0 0.25rem 0;
   }
 
   .help-text code {
-    background-color: #f5f5f5;
+    background-color: var(--nord5);
     padding: 0.125rem 0.25rem;
     border-radius: 0.25rem;
     font-family: monospace;
     font-size: 0.85em;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .help-text code {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .help-text ul {
@@ -1204,20 +1397,20 @@
   }
 
   .field-error {
-    color: #d32f2f;
+    color: var(--red);
     font-size: 0.875rem;
     margin-top: 0.25rem;
     font-weight: 500;
   }
 
   input.error {
-    border-color: #d32f2f;
-    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
+    border-color: var(--red);
+    box-shadow: 0 0 0 2px rgba(191, 97, 106, 0.2);
   }
 
   .execution-preview {
-    background-color: #e3f2fd;
-    border: 1px solid #2196f3;
+    background-color: var(--nord8);
+    border: 1px solid var(--blue);
     border-radius: 0.5rem;
     padding: 1rem;
     margin-top: 1rem;
@@ -1225,24 +1418,34 @@
 
   .execution-preview h3 {
     margin: 0 0 0.5rem 0;
-    color: #1976d2;
+    color: var(--blue);
     font-size: 1rem;
   }
 
   .next-execution {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #1976d2;
+    color: var(--blue);
     margin: 0.5rem 0;
   }
 
   .frequency-description {
-    color: #666;
+    color: var(--nord2);
     font-size: 0.9rem;
     margin: 0;
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .execution-preview {
+      background-color: var(--nord2);
+    }
+
+    .frequency-description {
+      color: var(--nord4);
+    }
+  }
+
   @media (max-width: 600px) {
     .add-payment {
       padding: 1rem;
diff --git a/src/routes/cospend/payments/edit/[id]/+page.svelte b/src/routes/cospend/payments/edit/[id]/+page.svelte
index 42446c7..1e2c020 100644
--- a/src/routes/cospend/payments/edit/[id]/+page.svelte
+++ b/src/routes/cospend/payments/edit/[id]/+page.svelte
@@ -138,7 +138,7 @@
 <main class="edit-payment">
   <div class="header">
     <h1>Edit Payment</h1>
-    <a href="/cospend/payments" class="back-link">← Back to Payments</a>
+    <p>Modify payment details and receipt image</p>
   </div>
 
   {#if loading}
@@ -299,20 +299,30 @@
   }
 
   .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    text-align: center;
     margin-bottom: 2rem;
   }
 
   .header h1 {
-    margin: 0;
-    color: #333;
+    margin: 0 0 0.5rem 0;
+    color: var(--nord0);
+    font-size: 2rem;
   }
 
-  .back-link {
-    color: #1976d2;
-    text-decoration: none;
+  .header p {
+    margin: 0;
+    color: var(--nord3);
+    font-size: 1.1rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .header h1 {
+      color: var(--font-default-dark);
+    }
+
+    .header p {
+      color: var(--nord4);
+    }
   }
 
   .loading, .error {
@@ -322,9 +332,16 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .payment-form {
@@ -334,19 +351,31 @@
   }
 
   .form-section {
-    background: white;
+    background: var(--nord6);
     padding: 1.5rem;
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .form-section h2 {
     margin-top: 0;
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .form-section {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .form-section h2 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .form-group {
     margin-bottom: 1rem;
   }
@@ -361,29 +390,44 @@
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    color: #555;
+    color: var(--nord2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    label {
+      color: var(--nord5);
+    }
   }
 
   input, textarea, select {
     width: 100%;
     padding: 0.75rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
     border-radius: 0.5rem;
     font-size: 1rem;
     box-sizing: border-box;
+    background-color: var(--nord6);
+    color: var(--nord0);
   }
 
   input:focus, textarea:focus, select:focus {
     outline: none;
-    border-color: #1976d2;
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px rgba(94, 129, 172, 0.2);
   }
 
   select {
-    background-color: white;
     cursor: pointer;
   }
 
+  @media (prefers-color-scheme: dark) {
+    input, textarea, select {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+  }
+
   .splits-display {
     display: flex;
     flex-direction: column;
@@ -396,27 +440,41 @@
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-item {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .positive {
-    color: #2e7d32;
+    color: var(--green);
     font-weight: 500;
   }
 
   .negative {
-    color: #d32f2f;
+    color: var(--red);
     font-weight: 500;
   }
 
   .note {
-    color: #666;
+    color: var(--nord2);
     font-size: 0.9rem;
     font-style: italic;
     margin: 0;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .note {
+      color: var(--nord4);
+    }
+  }
+
   .form-actions {
     display: flex;
     justify-content: space-between;
@@ -438,13 +496,15 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     border: none;
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #1565c0;
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-primary:disabled {
@@ -453,23 +513,37 @@
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
+    transform: translateY(-1px);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .btn-danger {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
     border: none;
   }
 
   .btn-danger:hover:not(:disabled) {
-    background-color: #c62828;
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   .btn-danger:disabled {
@@ -487,20 +561,26 @@
     max-height: 200px;
     object-fit: cover;
     border-radius: 0.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
     margin-bottom: 0.75rem;
     display: block;
     margin-left: auto;
     margin-right: auto;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .receipt-preview {
+      border-color: var(--nord2);
+    }
+  }
+
   .image-actions {
     display: flex;
     justify-content: center;
   }
 
   .btn-remove {
-    background-color: #d32f2f;
+    background-color: var(--red);
     color: white;
     border: none;
     padding: 0.5rem 1rem;
@@ -511,30 +591,48 @@
   }
 
   .btn-remove:hover {
-    background-color: #c62828;
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   .upload-label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
-    color: #555;
+    color: var(--nord2);
     cursor: pointer;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .upload-label {
+      color: var(--nord5);
+    }
+  }
+
   .file-input {
     width: 100%;
     padding: 0.75rem;
-    border: 2px dashed #ddd;
+    border: 2px dashed var(--nord4);
     border-radius: 0.5rem;
-    background-color: #fafafa;
+    background-color: var(--nord5);
     cursor: pointer;
     transition: all 0.2s;
   }
 
   .file-input:hover {
-    border-color: #1976d2;
-    background-color: #f5f5f5;
+    border-color: var(--blue);
+    background-color: var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .file-input {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .file-input:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .file-input:disabled {
@@ -544,7 +642,7 @@
 
   .upload-status {
     margin-top: 0.5rem;
-    color: #1976d2;
+    color: var(--blue);
     font-size: 0.9rem;
     text-align: center;
   }
diff --git a/src/routes/cospend/payments/view/[id]/+page.svelte b/src/routes/cospend/payments/view/[id]/+page.svelte
index 2abe016..31835c5 100644
--- a/src/routes/cospend/payments/view/[id]/+page.svelte
+++ b/src/routes/cospend/payments/view/[id]/+page.svelte
@@ -3,6 +3,7 @@
   import { goto } from '$app/navigation';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
+  import EditButton from '$lib/components/EditButton.svelte';
   
   export let data;
 
@@ -96,24 +97,6 @@
 </svelte:head>
 
 <main class="payment-view">
-  <div class="header">
-    <div class="header-content">
-      <a href="/cospend" class="back-link">← Back to Dashboard</a>
-      <div class="header-actions">
-        {#if payment && payment.createdBy === data.session.user.nickname}
-          <a href="/cospend/payments/edit/{data.paymentId}" class="btn btn-secondary">Edit</a>
-          <button 
-            class="btn btn-danger" 
-            on:click={deletePayment}
-            disabled={deleting}
-          >
-            {deleting ? 'Deleting...' : 'Delete'}
-          </button>
-        {/if}
-        <a href="/cospend/payments" class="btn btn-secondary">All Payments</a>
-      </div>
-    </div>
-  </div>
 
   {#if loading}
     <div class="loading">Loading payment...</div>
@@ -203,6 +186,10 @@
   {/if}
 </main>
 
+{#if payment && payment.createdBy === data.session.user.nickname}
+  <EditButton href="/cospend/payments/edit/{data.paymentId}" />
+{/if}
+
 <style>
   .payment-view {
     max-width: 800px;
@@ -210,62 +197,7 @@
     padding: 2rem;
   }
 
-  .header {
-    margin-bottom: 2rem;
-  }
 
-  .header-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-
-  .back-link {
-    color: #1976d2;
-    text-decoration: none;
-    font-weight: 500;
-  }
-
-  .header-actions {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .btn {
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    text-decoration: none;
-    font-size: 0.9rem;
-    transition: all 0.2s;
-    border: none;
-    cursor: pointer;
-  }
-
-  .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
-  }
-
-  .btn-secondary:hover {
-    background-color: #e8e8e8;
-  }
-
-  .btn-danger {
-    background-color: #d32f2f;
-    color: white;
-  }
-
-  .btn-danger:hover:not(:disabled) {
-    background-color: #c62828;
-  }
-
-  .btn-danger:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
 
   .loading, .error {
     text-align: center;
@@ -274,16 +206,31 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .payment-card {
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-card {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
   }
 
   .payment-header {
@@ -291,8 +238,14 @@
     justify-content: space-between;
     align-items: flex-start;
     padding: 2rem;
-    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-    border-bottom: 1px solid #dee2e6;
+    background: linear-gradient(135deg, var(--nord5), var(--nord4));
+    border-bottom: 1px solid var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-header {
+      background: linear-gradient(135deg, var(--nord2), var(--nord3));
+    }
   }
 
   .title-with-category {
@@ -309,14 +262,20 @@
 
   .title-section h1 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.75rem;
   }
 
   .payment-amount {
     font-size: 1.5rem;
     font-weight: bold;
-    color: #1976d2;
+    color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .title-section h1 {
+      color: var(--font-default-dark);
+    }
   }
 
   .receipt-image {
@@ -329,7 +288,13 @@
     max-height: 150px;
     object-fit: cover;
     border-radius: 0.5rem;
-    border: 1px solid #ddd;
+    border: 1px solid var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .receipt-image img {
+      border-color: var(--nord2);
+    }
   }
 
   .payment-info {
@@ -351,45 +316,79 @@
 
   .label {
     font-weight: 600;
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
 
   .value {
-    color: #333;
+    color: var(--nord0);
     font-size: 1rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .label {
+      color: var(--nord4);
+    }
+
+    .value {
+      color: var(--font-default-dark);
+    }
+  }
+
   .description {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding-top: 1.5rem;
   }
 
   .description h3 {
     margin: 0 0 0.75rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.1rem;
   }
 
   .description p {
     margin: 0;
-    color: #555;
+    color: var(--nord2);
     line-height: 1.5;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .description {
+      border-top-color: var(--nord2);
+    }
+
+    .description h3 {
+      color: var(--font-default-dark);
+    }
+
+    .description p {
+      color: var(--nord5);
+    }
+  }
+
   .splits-section {
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--nord4);
     padding: 2rem;
   }
 
   .splits-section h3 {
     margin: 0 0 1rem 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.1rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .splits-section {
+      border-top-color: var(--nord2);
+    }
+
+    .splits-section h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .splits-list {
     display: flex;
     flex-direction: column;
@@ -401,14 +400,26 @@
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
-    background: #f8f9fa;
+    background: var(--nord5);
     border-radius: 0.5rem;
-    border: 1px solid transparent;
+    border: 1px solid var(--nord4);
   }
 
   .split-item.current-user {
-    background: #e3f2fd;
-    border-color: #2196f3;
+    background: var(--nord8);
+    border-color: var(--blue);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-item {
+      background: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .split-item.current-user {
+      background: var(--nord3);
+      border-color: var(--blue);
+    }
   }
 
   .split-user {
@@ -425,11 +436,11 @@
 
   .username {
     font-weight: 500;
-    color: #333;
+    color: var(--nord0);
   }
 
   .you-badge {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
     padding: 0.125rem 0.5rem;
     border-radius: 1rem;
@@ -437,17 +448,23 @@
     font-weight: 500;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .username {
+      color: var(--font-default-dark);
+    }
+  }
+
   .split-amount {
     font-weight: 500;
     font-size: 1rem;
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
   }
 
   @media (max-width: 600px) {
diff --git a/src/routes/cospend/recurring/+page.svelte b/src/routes/cospend/recurring/+page.svelte
index 1a12672..bd5bd90 100644
--- a/src/routes/cospend/recurring/+page.svelte
+++ b/src/routes/cospend/recurring/+page.svelte
@@ -3,6 +3,7 @@
   import { getCategoryEmoji, getCategoryName } from '$lib/utils/categories';
   import { getFrequencyDescription, formatNextExecution } from '$lib/utils/recurring';
   import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+  import AddButton from '$lib/components/AddButton.svelte';
   
   export let data;
 
@@ -97,10 +98,7 @@
 <main class="recurring-payments">
   <div class="header">
     <h1>Recurring Payments</h1>
-    <div class="header-actions">
-      <a href="/cospend/recurring/add" class="btn btn-primary">Add Recurring Payment</a>
-      <a href="/cospend" class="back-link">← Back to Cospend</a>
-    </div>
+    <p>Automate your regular shared expenses</p>
   </div>
 
   <div class="filters">
@@ -118,7 +116,7 @@
     <div class="empty-state">
       <h2>No recurring payments found</h2>
       <p>Create your first recurring payment to automate regular expenses like rent, utilities, or subscriptions.</p>
-      <a href="/cospend/recurring/add" class="btn btn-primary">Add Your First Recurring Payment</a>
+      <a href="/cospend/payments/add" class="btn btn-primary">Add Your First Payment</a>
     </div>
   {:else}
     <div class="payments-grid">
@@ -228,6 +226,8 @@
   {/if}
 </main>
 
+<AddButton href="/cospend/payments/add" />
+
 <style>
   .recurring-payments {
     max-width: 1200px;
@@ -236,34 +236,39 @@
   }
 
   .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     margin-bottom: 2rem;
+    text-align: center;
   }
 
   .header h1 {
+    margin: 0 0 0.5rem 0;
+    color: var(--nord0);
+    font-size: 2rem;
+  }
+
+  .header p {
     margin: 0;
-    color: #333;
+    color: var(--nord3);
+    font-size: 1.1rem;
   }
 
-  .header-actions {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-  }
+  @media (prefers-color-scheme: dark) {
+    .header h1 {
+      color: var(--font-default-dark);
+    }
 
-  .back-link {
-    color: #1976d2;
-    text-decoration: none;
+    .header p {
+      color: var(--nord4);
+    }
   }
 
   .filters {
     margin-bottom: 1.5rem;
     padding: 1rem;
-    background: white;
+    background: var(--nord6);
     border-radius: 0.5rem;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .filters label {
@@ -272,6 +277,18 @@
     gap: 0.5rem;
     cursor: pointer;
     font-weight: 500;
+    color: var(--nord0);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .filters {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .filters label {
+      color: var(--font-default-dark);
+    }
   }
 
   .loading, .error {
@@ -281,32 +298,55 @@
   }
 
   .error {
-    color: #d32f2f;
-    background-color: #ffebee;
+    color: var(--red);
+    background-color: var(--nord6);
     border-radius: 0.5rem;
+    border: 1px solid var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .error {
+      background-color: var(--accent-dark);
+    }
   }
 
   .empty-state {
     text-align: center;
     padding: 4rem 2rem;
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    border: 1px solid var(--nord4);
   }
 
   .empty-state h2 {
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--nord0);
   }
 
   .empty-state p {
-    color: #666;
+    color: var(--nord2);
     margin-bottom: 2rem;
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .empty-state {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .empty-state h2 {
+      color: var(--font-default-dark);
+    }
+
+    .empty-state p {
+      color: var(--nord4);
+    }
+  }
+
   .payments-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
@@ -314,21 +354,40 @@
   }
 
   .payment-card {
-    background: white;
+    background: var(--nord6);
     border-radius: 0.75rem;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     padding: 1.5rem;
-    transition: transform 0.2s;
+    transition: all 0.2s;
+    border: 1px solid var(--nord4);
   }
 
   .payment-card:hover {
-    transform: translateY(-2px);
+    transform: translateY(-1px);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    border-color: var(--nord3);
   }
 
   .payment-card.inactive {
     opacity: 0.7;
-    background: #f8f9fa;
+    background: var(--nord5);
+    border-color: var(--nord3);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .payment-card {
+      background: var(--nord1);
+      border-color: var(--nord2);
+    }
+
+    .payment-card:hover {
+      border-color: var(--nord3);
+    }
+
+    .payment-card.inactive {
+      background: var(--nord2);
+      border-color: var(--nord3);
+    }
   }
 
   .card-header {
@@ -351,10 +410,16 @@
 
   .payment-title h3 {
     margin: 0;
-    color: #333;
+    color: var(--nord0);
     font-size: 1.25rem;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-title h3 {
+      color: var(--font-default-dark);
+    }
+  }
+
   .status-badge {
     padding: 0.25rem 0.75rem;
     border-radius: 1rem;
@@ -365,27 +430,33 @@
   }
 
   .status-badge.active {
-    background-color: #e8f5e8;
-    color: #2e7d32;
+    background-color: var(--green);
+    color: white;
   }
 
   .status-badge.inactive {
-    background-color: #fff3e0;
-    color: #f57c00;
+    background-color: var(--orange);
+    color: white;
   }
 
   .payment-amount {
     font-size: 1.5rem;
     font-weight: 700;
-    color: #1976d2;
+    color: var(--blue);
   }
 
   .payment-description {
-    color: #666;
+    color: var(--nord2);
     margin-bottom: 1rem;
     font-style: italic;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .payment-description {
+      color: var(--nord5);
+    }
+  }
+
   .payment-details {
     margin-bottom: 1.5rem;
   }
@@ -400,20 +471,30 @@
 
   .label {
     font-weight: 500;
-    color: #666;
+    color: var(--nord3);
     font-size: 0.9rem;
   }
 
   .value {
-    color: #333;
+    color: var(--nord0);
     font-weight: 500;
   }
 
   .next-execution {
-    color: #1976d2;
+    color: var(--blue);
     font-weight: 600;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .label {
+      color: var(--nord4);
+    }
+
+    .value {
+      color: var(--font-default-dark);
+    }
+  }
+
   .payer-info {
     display: flex;
     align-items: center;
@@ -423,18 +504,30 @@
   .splits-preview {
     margin-bottom: 1.5rem;
     padding: 1rem;
-    background-color: #f8f9fa;
+    background-color: var(--nord5);
     border-radius: 0.5rem;
+    border: 1px solid var(--nord4);
   }
 
   .splits-preview h4 {
     margin: 0 0 0.75rem 0;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--nord2);
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
 
+  @media (prefers-color-scheme: dark) {
+    .splits-preview {
+      background-color: var(--nord2);
+      border-color: var(--nord3);
+    }
+
+    .splits-preview h4 {
+      color: var(--nord4);
+    }
+  }
+
   .splits-list {
     display: flex;
     flex-direction: column;
@@ -450,6 +543,7 @@
   .split-item .username {
     flex: 1;
     font-weight: 500;
+    color: var(--nord0);
   }
 
   .split-amount {
@@ -458,11 +552,17 @@
   }
 
   .split-amount.positive {
-    color: #2e7d32;
+    color: var(--green);
   }
 
   .split-amount.negative {
-    color: #d32f2f;
+    color: var(--red);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .split-item .username {
+      color: var(--font-default-dark);
+    }
   }
 
   .card-actions {
@@ -488,49 +588,66 @@
   }
 
   .btn-primary {
-    background-color: #1976d2;
+    background-color: var(--blue);
     color: white;
   }
 
   .btn-primary:hover {
-    background-color: #1565c0;
+    background-color: var(--nord10);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   }
 
   .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
+    background-color: var(--nord5);
+    color: var(--nord0);
+    border: 1px solid var(--nord4);
   }
 
   .btn-secondary:hover {
-    background-color: #e8e8e8;
+    background-color: var(--nord4);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .btn-secondary {
+      background-color: var(--nord2);
+      color: var(--font-default-dark);
+      border-color: var(--nord3);
+    }
+
+    .btn-secondary:hover {
+      background-color: var(--nord3);
+    }
   }
 
   .btn-warning {
-    background-color: #ff9800;
+    background-color: var(--orange);
     color: white;
   }
 
   .btn-warning:hover {
-    background-color: #f57c00;
+    background-color: var(--nord12);
+    transform: translateY(-1px);
   }
 
   .btn-success {
-    background-color: #4caf50;
+    background-color: var(--green);
     color: white;
   }
 
   .btn-success:hover {
-    background-color: #45a049;
+    background-color: var(--nord14);
+    transform: translateY(-1px);
   }
 
   .btn-danger {
-    background-color: #f44336;
+    background-color: var(--red);
     color: white;
   }
 
   .btn-danger:hover {
-    background-color: #d32f2f;
+    background-color: var(--nord11);
+    transform: translateY(-1px);
   }
 
   @media (max-width: 768px) {
diff --git a/src/routes/cospend/recurring/add/+page.server.ts b/src/routes/cospend/recurring/add/+page.server.ts
deleted file mode 100644
index f3c9373..0000000
--- a/src/routes/cospend/recurring/add/+page.server.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { PageServerLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
-
-export const load: PageServerLoad = async ({ locals }) => {
-  const session = await locals.auth();
-  
-  if (!session) {
-    throw redirect(302, '/login');
-  }
-
-  return {
-    session
-  };
-};
\ No newline at end of file
diff --git a/src/routes/cospend/recurring/add/+page.svelte b/src/routes/cospend/recurring/add/+page.svelte
deleted file mode 100644
index 45b7fb8..0000000
--- a/src/routes/cospend/recurring/add/+page.svelte
+++ /dev/null
@@ -1,944 +0,0 @@
-<script>
-  import { onMount } from 'svelte';
-  import { goto } from '$app/navigation';
-  import { getCategoryOptions } from '$lib/utils/categories';
-  import { PREDEFINED_USERS, isPredefinedUsersMode } from '$lib/config/users';
-  import { validateCronExpression, getFrequencyDescription, calculateNextExecutionDate } from '$lib/utils/recurring';
-  import ProfilePicture from '$lib/components/ProfilePicture.svelte';
-  
-  export let data;
-
-  let formData = {
-    title: '',
-    description: '',
-    amount: '',
-    paidBy: data.session?.user?.nickname || '',
-    category: 'groceries',
-    splitMethod: 'equal',
-    splits: [],
-    frequency: 'monthly',
-    cronExpression: '',
-    startDate: new Date().toISOString().split('T')[0],
-    endDate: ''
-  };
-
-  let users = [];
-  let newUser = '';
-  let splitAmounts = {};
-  let personalAmounts = {};
-  let loading = false;
-  let error = null;
-  let personalTotalError = false;
-  let predefinedMode = isPredefinedUsersMode();
-  let cronError = false;
-  let nextExecutionPreview = '';
-  
-  $: categoryOptions = getCategoryOptions();
-
-  onMount(() => {
-    if (predefinedMode) {
-      users = [...PREDEFINED_USERS];
-      users.forEach(user => addSplitForUser(user));
-      if (data.session?.user?.nickname && PREDEFINED_USERS.includes(data.session.user.nickname)) {
-        formData.paidBy = data.session.user.nickname;
-      } else {
-        formData.paidBy = PREDEFINED_USERS[0];
-      }
-    } else {
-      if (data.session?.user?.nickname) {
-        users = [data.session.user.nickname];
-        addSplitForUser(data.session.user.nickname);
-      }
-    }
-    updateNextExecutionPreview();
-  });
-
-  function addUser() {
-    if (predefinedMode) return;
-    
-    if (newUser.trim() && !users.includes(newUser.trim())) {
-      users = [...users, newUser.trim()];
-      addSplitForUser(newUser.trim());
-      newUser = '';
-    }
-  }
-
-  function removeUser(userToRemove) {
-    if (predefinedMode) return;
-    
-    if (users.length > 1 && userToRemove !== data.session.user.nickname) {
-      users = users.filter(u => u !== userToRemove);
-      delete splitAmounts[userToRemove];
-      splitAmounts = { ...splitAmounts };
-    }
-  }
-
-  function addSplitForUser(username) {
-    if (!splitAmounts[username]) {
-      splitAmounts[username] = 0;
-      splitAmounts = { ...splitAmounts };
-    }
-  }
-
-  function calculateEqualSplits() {
-    if (!formData.amount || users.length === 0) return;
-    
-    const amountNum = parseFloat(formData.amount);
-    const splitAmount = amountNum / users.length;
-    
-    users.forEach(user => {
-      if (user === formData.paidBy) {
-        splitAmounts[user] = splitAmount - amountNum;
-      } else {
-        splitAmounts[user] = splitAmount;
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function calculateFullPayment() {
-    if (!formData.amount) return;
-    
-    const amountNum = parseFloat(formData.amount);
-    const otherUsers = users.filter(user => user !== formData.paidBy);
-    const amountPerOtherUser = otherUsers.length > 0 ? amountNum / otherUsers.length : 0;
-    
-    users.forEach(user => {
-      if (user === formData.paidBy) {
-        splitAmounts[user] = -amountNum; // They paid it all, so they're owed the full amount
-      } else {
-        splitAmounts[user] = amountPerOtherUser; // Others owe their share of the full amount
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function calculatePersonalEqualSplit() {
-    if (!formData.amount || users.length === 0) return;
-    
-    const totalAmount = parseFloat(formData.amount);
-    
-    const totalPersonal = users.reduce((sum, user) => {
-      return sum + (parseFloat(personalAmounts[user]) || 0);
-    }, 0);
-    
-    const remainder = Math.max(0, totalAmount - totalPersonal);
-    const equalShare = remainder / users.length;
-    
-    users.forEach(user => {
-      const personalAmount = parseFloat(personalAmounts[user]) || 0;
-      const totalOwed = personalAmount + equalShare;
-      
-      if (user === formData.paidBy) {
-        splitAmounts[user] = totalOwed - totalAmount;
-      } else {
-        splitAmounts[user] = totalOwed;
-      }
-    });
-    splitAmounts = { ...splitAmounts };
-  }
-
-  function handleSplitMethodChange() {
-    if (formData.splitMethod === 'equal') {
-      calculateEqualSplits();
-    } else if (formData.splitMethod === 'full') {
-      calculateFullPayment();
-    } else if (formData.splitMethod === 'personal_equal') {
-      calculatePersonalEqualSplit();
-    }
-  }
-
-  function validateCron() {
-    if (formData.frequency !== 'custom') {
-      cronError = false;
-      return;
-    }
-    cronError = !validateCronExpression(formData.cronExpression);
-  }
-
-  function updateNextExecutionPreview() {
-    try {
-      if (formData.frequency && formData.startDate) {
-        const recurringPayment = {
-          ...formData,
-          startDate: new Date(formData.startDate)
-        };
-        const nextDate = calculateNextExecutionDate(recurringPayment, new Date(formData.startDate));
-        nextExecutionPreview = nextDate.toLocaleString('de-CH', {
-          weekday: 'long',
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        });
-      }
-    } catch (e) {
-      nextExecutionPreview = 'Invalid configuration';
-    }
-  }
-
-  async function handleSubmit() {
-    if (!formData.title.trim() || !formData.amount || parseFloat(formData.amount) <= 0) {
-      error = 'Please fill in all required fields with valid values';
-      return;
-    }
-
-    if (formData.frequency === 'custom' && cronError) {
-      error = 'Please enter a valid cron expression';
-      return;
-    }
-
-    if (formData.splitMethod === 'personal_equal') {
-      const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
-      const totalAmount = parseFloat(formData.amount);
-      
-      if (totalPersonal > totalAmount) {
-        error = 'Personal amounts cannot exceed the total payment amount';
-        return;
-      }
-    }
-
-    if (users.length === 0) {
-      error = 'Please add at least one user to split with';
-      return;
-    }
-
-    loading = true;
-    error = null;
-
-    try {
-      const splits = users.map(user => ({
-        username: user,
-        amount: splitAmounts[user] || 0,
-        proportion: formData.splitMethod === 'proportional' ? (splitAmounts[user] || 0) / parseFloat(formData.amount) : undefined,
-        personalAmount: formData.splitMethod === 'personal_equal' ? (parseFloat(personalAmounts[user]) || 0) : undefined
-      }));
-
-      const payload = {
-        ...formData,
-        amount: parseFloat(formData.amount),
-        startDate: formData.startDate ? new Date(formData.startDate).toISOString() : new Date().toISOString(),
-        endDate: formData.endDate ? new Date(formData.endDate).toISOString() : null,
-        cronExpression: formData.frequency === 'custom' ? formData.cronExpression : undefined,
-        splits
-      };
-
-      const response = await fetch('/api/cospend/recurring-payments', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(payload)
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || 'Failed to create recurring payment');
-      }
-
-      const result = await response.json();
-      await goto('/cospend/recurring');
-
-    } catch (err) {
-      error = err.message;
-    } finally {
-      loading = false;
-    }
-  }
-
-  $: if (formData.amount && formData.splitMethod && formData.paidBy) {
-    handleSplitMethodChange();
-  }
-
-  $: if (formData.splitMethod === 'personal_equal' && personalAmounts && formData.amount) {
-    const totalPersonal = Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0);
-    const totalAmount = parseFloat(formData.amount);
-    personalTotalError = totalPersonal > totalAmount;
-    
-    if (!personalTotalError) {
-      calculatePersonalEqualSplit();
-    }
-  }
-
-  $: if (formData.cronExpression) {
-    validateCron();
-  }
-
-  $: if (formData.frequency || formData.cronExpression || formData.startDate) {
-    updateNextExecutionPreview();
-  }
-</script>
-
-<svelte:head>
-  <title>Add Recurring Payment - Cospend</title>
-</svelte:head>
-
-<main class="add-recurring-payment">
-  <div class="header">
-    <h1>Add Recurring Payment</h1>
-    <a href="/cospend" class="back-link">← Back to Cospend</a>
-  </div>
-
-  <form on:submit|preventDefault={handleSubmit} class="payment-form">
-    <div class="form-section">
-      <h2>Payment Details</h2>
-      
-      <div class="form-group">
-        <label for="title">Title *</label>
-        <input 
-          type="text" 
-          id="title" 
-          bind:value={formData.title} 
-          required 
-          placeholder="e.g., Monthly rent, Weekly groceries"
-        />
-      </div>
-
-      <div class="form-group">
-        <label for="description">Description</label>
-        <textarea 
-          id="description" 
-          bind:value={formData.description} 
-          placeholder="Additional details about this recurring payment..."
-          rows="3"
-        ></textarea>
-      </div>
-
-      <div class="form-group">
-        <label for="category">Category *</label>
-        <select id="category" bind:value={formData.category} required>
-          {#each categoryOptions as option}
-            <option value={option.value}>{option.label}</option>
-          {/each}
-        </select>
-      </div>
-
-      <div class="form-row">
-        <div class="form-group">
-          <label for="amount">Amount (CHF) *</label>
-          <input 
-            type="number" 
-            id="amount" 
-            bind:value={formData.amount} 
-            required 
-            min="0" 
-            step="0.01"
-            placeholder="0.00"
-          />
-        </div>
-
-        <div class="form-group">
-          <label for="paidBy">Paid by</label>
-          <select id="paidBy" bind:value={formData.paidBy} required>
-            {#each users as user}
-              <option value={user}>{user}</option>
-            {/each}
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <div class="form-section">
-      <h2>Recurring Schedule</h2>
-      
-      <div class="form-row">
-        <div class="form-group">
-          <label for="frequency">Frequency *</label>
-          <select id="frequency" bind:value={formData.frequency} required>
-            <option value="daily">Daily</option>
-            <option value="weekly">Weekly</option>
-            <option value="monthly">Monthly</option>
-            <option value="custom">Custom (Cron)</option>
-          </select>
-        </div>
-
-        <div class="form-group">
-          <label for="startDate">Start Date *</label>
-          <input 
-            type="date" 
-            id="startDate" 
-            bind:value={formData.startDate} 
-            required
-          />
-        </div>
-      </div>
-
-      {#if formData.frequency === 'custom'}
-        <div class="form-group">
-          <label for="cronExpression">Cron Expression *</label>
-          <input 
-            type="text" 
-            id="cronExpression" 
-            bind:value={formData.cronExpression} 
-            required 
-            placeholder="0 9 * * 1  (Every Monday at 9:00 AM)"
-            class:error={cronError}
-          />
-          <div class="help-text">
-            <p>Cron format: minute hour day-of-month month day-of-week</p>
-            <p>Examples:</p>
-            <ul>
-              <li><code>0 9 * * *</code> - Every day at 9:00 AM</li>
-              <li><code>0 9 1 * *</code> - Every 1st of the month at 9:00 AM</li>
-              <li><code>0 9 * * 1</code> - Every Monday at 9:00 AM</li>
-              <li><code>0 9 1,15 * *</code> - 1st and 15th of every month at 9:00 AM</li>
-            </ul>
-          </div>
-          {#if cronError}
-            <div class="field-error">Invalid cron expression</div>
-          {/if}
-        </div>
-      {/if}
-
-      <div class="form-group">
-        <label for="endDate">End Date (optional)</label>
-        <input 
-          type="date" 
-          id="endDate" 
-          bind:value={formData.endDate}
-        />
-        <div class="help-text">Leave blank for indefinite recurring payments</div>
-      </div>
-
-      {#if nextExecutionPreview}
-        <div class="execution-preview">
-          <h3>Next Execution</h3>
-          <p class="next-execution">{nextExecutionPreview}</p>
-          <p class="frequency-description">{getFrequencyDescription(formData)}</p>
-        </div>
-      {/if}
-    </div>
-
-    <div class="form-section">
-      <h2>Split Between Users</h2>
-      
-      {#if predefinedMode}
-        <div class="predefined-users">
-          <p class="predefined-note">Splitting between predefined users:</p>
-          <div class="users-list">
-            {#each users as user}
-              <div class="user-item with-profile">
-                <ProfilePicture username={user} size={32} />
-                <span class="username">{user}</span>
-                {#if user === data.session?.user?.nickname}
-                  <span class="you-badge">You</span>
-                {/if}
-              </div>
-            {/each}
-          </div>
-        </div>
-      {:else}
-        <div class="users-list">
-          {#each users as user}
-            <div class="user-item with-profile">
-              <ProfilePicture username={user} size={32} />
-              <span class="username">{user}</span>
-              {#if user !== data.session.user.nickname}
-                <button type="button" class="remove-user" on:click={() => removeUser(user)}>
-                  Remove
-                </button>
-              {/if}
-            </div>
-          {/each}
-        </div>
-
-        <div class="add-user">
-          <input 
-            type="text" 
-            bind:value={newUser} 
-            placeholder="Add user..."
-            on:keydown={(e) => e.key === 'Enter' && (e.preventDefault(), addUser())}
-          />
-          <button type="button" on:click={addUser}>Add User</button>
-        </div>
-      {/if}
-    </div>
-
-    <div class="form-section">
-      <h2>Split Method</h2>
-      
-      <div class="split-method">
-        <label>
-          <input type="radio" bind:group={formData.splitMethod} value="equal" />
-          {predefinedMode && users.length === 2 ? 'Split 50/50' : 'Equal Split'}
-        </label>
-        <label>
-          <input type="radio" bind:group={formData.splitMethod} value="personal_equal" />
-          Personal + Equal Split
-        </label>
-        <label>
-          <input type="radio" bind:group={formData.splitMethod} value="full" />
-          Paid in Full by {formData.paidBy}
-        </label>
-        <label>
-          <input type="radio" bind:group={formData.splitMethod} value="proportional" />
-          Custom Proportions
-        </label>
-      </div>
-
-      {#if formData.splitMethod === 'proportional'}
-        <div class="proportional-splits">
-          <h3>Custom Split Amounts</h3>
-          {#each users as user}
-            <div class="split-input">
-              <label>{user}</label>
-              <input 
-                type="number" 
-                step="0.01" 
-                bind:value={splitAmounts[user]}
-                placeholder="0.00"
-              />
-            </div>
-          {/each}
-        </div>
-      {/if}
-
-      {#if formData.splitMethod === 'personal_equal'}
-        <div class="personal-splits">
-          <h3>Personal Amounts</h3>
-          <p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
-          {#each users as user}
-            <div class="split-input">
-              <label>{user}</label>
-              <input 
-                type="number" 
-                step="0.01" 
-                min="0"
-                bind:value={personalAmounts[user]}
-                placeholder="0.00"
-              />
-            </div>
-          {/each}
-          {#if formData.amount}
-            <div class="remainder-info" class:error={personalTotalError}>
-              <span>Total Personal: CHF {Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0).toFixed(2)}</span>
-              <span>Remainder to Split: CHF {Math.max(0, parseFloat(formData.amount) - Object.values(personalAmounts).reduce((sum, val) => sum + (parseFloat(val) || 0), 0)).toFixed(2)}</span>
-              {#if personalTotalError}
-                <div class="error-message">⚠️ Personal amounts exceed total payment amount!</div>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      {/if}
-
-      {#if Object.keys(splitAmounts).length > 0}
-        <div class="split-preview">
-          <h3>Split Preview</h3>
-          {#each users as user}
-            <div class="split-item">
-              <div class="split-user">
-                <ProfilePicture username={user} size={24} />
-                <span class="username">{user}</span>
-              </div>
-              <span class="amount" class:positive={splitAmounts[user] < 0} class:negative={splitAmounts[user] > 0}>
-                {#if splitAmounts[user] > 0}
-                  owes CHF {splitAmounts[user].toFixed(2)}
-                {:else if splitAmounts[user] < 0}
-                  is owed CHF {Math.abs(splitAmounts[user]).toFixed(2)}
-                {:else}
-                  owes CHF {splitAmounts[user].toFixed(2)}
-                {/if}
-              </span>
-            </div>
-          {/each}
-        </div>
-      {/if}
-    </div>
-
-    {#if error}
-      <div class="error">{error}</div>
-    {/if}
-
-    <div class="form-actions">
-      <button type="button" class="btn-secondary" on:click={() => goto('/cospend')}>
-        Cancel
-      </button>
-      <button type="submit" class="btn-primary" disabled={loading || cronError}>
-        {loading ? 'Creating...' : 'Create Recurring Payment'}
-      </button>
-    </div>
-  </form>
-</main>
-
-<style>
-  .add-recurring-payment {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 2rem;
-  }
-
-  .header h1 {
-    margin: 0;
-    color: #333;
-  }
-
-  .back-link {
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  .payment-form {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .form-section {
-    background: white;
-    padding: 1.5rem;
-    border-radius: 0.75rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  .form-section h2 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    color: #333;
-    font-size: 1.25rem;
-  }
-
-  .form-group {
-    margin-bottom: 1rem;
-  }
-
-  .form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    color: #555;
-  }
-
-  input, textarea, select {
-    width: 100%;
-    padding: 0.75rem;
-    border: 1px solid #ddd;
-    border-radius: 0.5rem;
-    font-size: 1rem;
-    box-sizing: border-box;
-  }
-
-  input:focus, textarea:focus, select:focus {
-    outline: none;
-    border-color: #1976d2;
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
-  }
-
-  input.error {
-    border-color: #d32f2f;
-  }
-
-  .help-text {
-    margin-top: 0.5rem;
-    color: #666;
-    font-size: 0.9rem;
-  }
-
-  .help-text code {
-    background-color: #f5f5f5;
-    padding: 0.125rem 0.25rem;
-    border-radius: 0.25rem;
-    font-family: monospace;
-  }
-
-  .help-text ul {
-    margin: 0.5rem 0;
-    padding-left: 1rem;
-  }
-
-  .help-text li {
-    margin-bottom: 0.25rem;
-  }
-
-  .field-error {
-    color: #d32f2f;
-    font-size: 0.875rem;
-    margin-top: 0.25rem;
-  }
-
-  .execution-preview {
-    background-color: #e3f2fd;
-    border: 1px solid #2196f3;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin-top: 1rem;
-  }
-
-  .execution-preview h3 {
-    margin: 0 0 0.5rem 0;
-    color: #1976d2;
-    font-size: 1rem;
-  }
-
-  .next-execution {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: #1976d2;
-    margin: 0.5rem 0;
-  }
-
-  .frequency-description {
-    color: #666;
-    font-size: 0.9rem;
-    margin: 0;
-    font-style: italic;
-  }
-
-  .users-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .user-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background-color: #f5f5f5;
-    padding: 0.5rem 0.75rem;
-    border-radius: 1rem;
-  }
-
-  .user-item.with-profile {
-    gap: 0.75rem;
-  }
-
-  .user-item .username {
-    font-weight: 500;
-  }
-
-  .you-badge {
-    background-color: #1976d2;
-    color: white;
-    padding: 0.125rem 0.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  .predefined-users {
-    background-color: #f8f9fa;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
-  }
-
-  .predefined-note {
-    margin: 0 0 1rem 0;
-    color: #666;
-    font-size: 0.9rem;
-    font-style: italic;
-  }
-
-  .remove-user {
-    background-color: #d32f2f;
-    color: white;
-    border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
-    font-size: 0.75rem;
-    cursor: pointer;
-  }
-
-  .add-user {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  .add-user input {
-    flex: 1;
-  }
-
-  .add-user button {
-    background-color: #1976d2;
-    color: white;
-    border: none;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-    cursor: pointer;
-  }
-
-  .split-method {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-  }
-
-  .split-method label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-  }
-
-  .proportional-splits, .personal-splits {
-    border: 1px solid #ddd;
-    border-radius: 0.5rem;
-    padding: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .proportional-splits h3, .personal-splits h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  .personal-splits .description {
-    color: #666;
-    font-size: 0.9rem;
-    margin-bottom: 1rem;
-    font-style: italic;
-  }
-
-  .split-input {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .split-input label {
-    min-width: 100px;
-    margin-bottom: 0;
-  }
-
-  .split-input input {
-    max-width: 120px;
-  }
-
-  .remainder-info {
-    margin-top: 1rem;
-    padding: 1rem;
-    background-color: #f8f9fa;
-    border-radius: 0.5rem;
-    border: 1px solid #e9ecef;
-  }
-
-  .remainder-info.error {
-    background-color: #fff5f5;
-    border-color: #fed7d7;
-  }
-
-  .remainder-info span {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-  }
-
-  .error-message {
-    color: #d32f2f;
-    font-weight: 600;
-    margin-top: 0.5rem;
-    font-size: 0.9rem;
-  }
-
-  .split-preview {
-    background-color: #f8f9fa;
-    padding: 1rem;
-    border-radius: 0.5rem;
-  }
-
-  .split-preview h3 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-  }
-
-  .split-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-  }
-
-  .split-user {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  .amount.positive {
-    color: #2e7d32;
-    font-weight: 500;
-  }
-
-  .amount.negative {
-    color: #d32f2f;
-    font-weight: 500;
-  }
-
-  .error {
-    background-color: #ffebee;
-    color: #d32f2f;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    margin-bottom: 1rem;
-  }
-
-  .form-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: flex-end;
-  }
-
-  .btn-primary, .btn-secondary {
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .btn-primary {
-    background-color: #1976d2;
-    color: white;
-    border: none;
-  }
-
-  .btn-primary:hover:not(:disabled) {
-    background-color: #1565c0;
-  }
-
-  .btn-primary:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
-  .btn-secondary {
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid #ddd;
-  }
-
-  .btn-secondary:hover {
-    background-color: #e8e8e8;
-  }
-
-  @media (max-width: 600px) {
-    .add-recurring-payment {
-      padding: 1rem;
-    }
-
-    .form-row {
-      grid-template-columns: 1fr;
-    }
-
-    .form-actions {
-      flex-direction: column;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/routes/rezepte/+page.svelte b/src/routes/rezepte/+page.svelte
index 7bbcf36..c9b31c5 100644
--- a/src/routes/rezepte/+page.svelte
+++ b/src/routes/rezepte/+page.svelte
@@ -47,4 +47,4 @@ h1{
 	{/each}
 	</MediaScroller>
 {/each}
-<AddButton></AddButton>
+<AddButton href="/rezepte/add"></AddButton>
diff --git a/src/routes/rezepte/tips-and-tricks/+page.svelte b/src/routes/rezepte/tips-and-tricks/+page.svelte
index a3c14a8..9faaa40 100644
--- a/src/routes/rezepte/tips-and-tricks/+page.svelte
+++ b/src/routes/rezepte/tips-and-tricks/+page.svelte
@@ -59,4 +59,4 @@ h1{
 </p>
 </div>
 
-<AddButton></AddButton>
+<AddButton href="/rezepte/add"></AddButton>