From cdbf0733c543c2b3c739bb8f27ec090bd4e6fb41 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 23 Aug 2025 11:57:21 +0100
Subject: [PATCH] UI improvements and fixes

- Fixed brutalist styling across all components
- Removed notes field from transaction list display
- Added whitespace-nowrap to prevent description wrapping
- Updated modals with consistent border styling
- Improved form layouts and button styling
---
 app/app.vue                         |   6 +-
 app/components/BalanceModal.vue     |  92 +++++++-------
 app/components/TransactionModal.vue | 174 +++++++++++++-------------
 app/pages/index.vue                 | 185 +++++++++++++---------------
 4 files changed, 219 insertions(+), 238 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index 4413c86..a410a39 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <!-- Navigation -->
-    <nav class="bg-white shadow-sm border-b">
+    <nav class="bg-black border-b-4 border-black">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between h-16">
           <div class="flex items-center">
-            <NuxtLink to="/" class="text-xl font-bold text-gray-900 font-mono">
-              Faber Finances
+            <NuxtLink to="/" class="text-xl font-bold text-white font-mono">
+              FABER FINANCES
             </NuxtLink>
           </div>
         </div>
diff --git a/app/components/BalanceModal.vue b/app/components/BalanceModal.vue
index 04ae1c4..8af6186 100644
--- a/app/components/BalanceModal.vue
+++ b/app/components/BalanceModal.vue
@@ -1,12 +1,12 @@
 <template>
-  <div v-if="isOpen" class="fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50">
-    <div class="relative top-10 mx-auto p-5 border-2 border-black w-full max-w-2xl shadow-lg bg-white">
+  <div v-if="isOpen" class="fixed inset-0 bg-black bg-opacity-75 overflow-y-auto h-full w-full z-50">
+    <div class="relative top-10 mx-auto p-5 border-4 border-black w-full max-w-2xl bg-white">
       <div class="mt-3">
         <div class="flex justify-between items-center mb-6">
-          <h3 class="text-lg font-medium text-black">Update Available Balances</h3>
+          <h3 class="text-lg font-bold uppercase text-black">UPDATE BALANCES</h3>
           <button
             @click="closeModal"
-            class="text-black hover:text-red-600">
+            class="text-black hover:bg-black hover:text-white p-1">
             <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             </svg>
@@ -15,12 +15,12 @@
 
         <form @submit.prevent="updateBalances" class="space-y-6">
           <!-- Manual Entry Balances -->
-          <div class="border-2 border-black p-4">
+          <div class="border-4 border-black p-4">
             <div class="flex justify-between items-center mb-4">
               <div>
-                <h4 class="text-md font-semibold text-black">Manual Entry</h4>
-                <div v-if="lastManualUpdate" class="text-xs text-black mt-1">
-                  Last updated: {{ formatTimestamp(lastManualUpdate) }}
+                <h4 class="text-md font-bold uppercase text-black">MANUAL ENTRY</h4>
+                <div v-if="lastManualUpdate" class="text-xs text-black mt-1 uppercase">
+                  LAST UPDATE: {{ formatTimestamp(lastManualUpdate) }}
                 </div>
               </div>
             </div>
@@ -28,44 +28,44 @@
             <!-- RBC -->
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
               <div>
-                <label class="block text-sm font-medium text-black mb-1">
-                  RBC Available Cash (CAD $)
+                <label class="block text-sm font-bold uppercase text-black mb-1">
+                  RBC AVAILABLE (CAD)
                 </label>
                 <input
                   v-model.number="balances.rbc_cad"
                   type="number"
                   step="0.01"
-                  class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono"
                   placeholder="0.00" />
-                <p class="text-xs text-black mt-1">Including overdraft limit</p>
+                <p class="text-xs text-black mt-1 uppercase">INCLUDING OVERDRAFT</p>
               </div>
 
               <!-- TD -->
               <div>
-                <label class="block text-sm font-medium text-black mb-1">
-                  TD Available Cash (CAD $)
+                <label class="block text-sm font-bold uppercase text-black mb-1">
+                  TD AVAILABLE (CAD)
                 </label>
                 <input
                   v-model.number="balances.td_cad"
                   type="number"
                   step="0.01"
-                  class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono"
                   placeholder="0.00" />
-                <p class="text-xs text-black mt-1">Including overdraft limit</p>
+                <p class="text-xs text-black mt-1 uppercase">INCLUDING OVERDRAFT</p>
               </div>
             </div>
 
             <!-- Millennium -->
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <div>
-                <label class="block text-sm font-medium text-black mb-1">
-                  Millennium Balance (€)
+                <label class="block text-sm font-bold uppercase text-black mb-1">
+                  MILLENNIUM (EUR)
                 </label>
                 <input
                   v-model.number="balances.millennium_eur"
                   type="number"
                   step="0.01"
-                  class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono"
                   placeholder="0.00" />
               </div>
             </div>
@@ -73,67 +73,67 @@
 
 
           <!-- Wise API Balances -->
-          <div class="border rounded-lg p-4">
+          <div class="border-4 border-black p-4">
             <div class="flex justify-between items-center mb-4">
               <div>
-                <h4 class="text-md font-semibold text-gray-800">Wise Balances</h4>
-                <div v-if="lastWiseFetch" class="text-xs text-gray-500 mt-1">
-                  Last fetched: {{ formatTimestamp(lastWiseFetch) }}
+                <h4 class="text-md font-bold uppercase text-black">WISE BALANCES</h4>
+                <div v-if="lastWiseFetch" class="text-xs text-black mt-1 uppercase">
+                  LAST FETCH: {{ formatTimestamp(lastWiseFetch) }}
                 </div>
               </div>
               <button
                 type="button"
                 @click="fetchWiseBalances"
                 :disabled="loading"
-                class="bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white text-sm font-medium py-1 px-3 border-2 border-green-700">
-                {{ loading ? 'Fetching...' : 'Fetch from API' }}
+                class="bg-black hover:bg-white text-white hover:text-black disabled:bg-gray-300 disabled:text-gray-600 text-sm font-bold py-1 px-3 border-2 border-black uppercase">
+                {{ loading ? 'FETCHING...' : 'FETCH API' }}
               </button>
             </div>
 
             <!-- Jennie Wise -->
             <div class="mb-4">
-              <h5 class="text-sm font-medium text-black mb-2">Jennie Wise Balances</h5>
+              <h5 class="text-sm font-bold uppercase text-black mb-2">JENNIE WISE</h5>
               <div v-if="wiseBalances.jennie && wiseBalances.jennie.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-3">
                 <div v-for="balance in wiseBalances.jennie" :key="`jennie-${balance.currency}`" class="bg-white border-2 border-black p-3">
-                  <div class="text-xs text-black">{{ balance.currency }}</div>
-                  <div class="text-sm font-medium">{{ formatCurrency(balance.value.value, balance.currency) }}</div>
+                  <div class="text-xs text-black font-bold uppercase">{{ balance.currency }}</div>
+                  <div class="text-sm font-bold font-mono">{{ formatCurrency(balance.value.value, balance.currency) }}</div>
                 </div>
               </div>
-              <div v-else class="text-sm text-black italic">
-                {{ loading ? 'Loading...' : 'No balances fetched yet' }}
+              <div v-else class="text-sm text-black uppercase">
+                {{ loading ? 'LOADING...' : 'NO DATA' }}
               </div>
             </div>
 
             <!-- Henry Wise -->
             <div>
-              <h5 class="text-sm font-medium text-black mb-2">Henry Wise Balances</h5>
+              <h5 class="text-sm font-bold uppercase text-black mb-2">HENRY WISE</h5>
               <div v-if="wiseBalances.henry && wiseBalances.henry.length > 0" class="grid grid-cols-1 md:grid-cols-3 gap-3">
                 <div v-for="balance in wiseBalances.henry" :key="`henry-${balance.currency}`" class="bg-white border-2 border-black p-3">
-                  <div class="text-xs text-black">{{ balance.currency }}</div>
-                  <div class="text-sm font-medium">{{ formatCurrency(balance.value.value, balance.currency) }}</div>
+                  <div class="text-xs text-black font-bold uppercase">{{ balance.currency }}</div>
+                  <div class="text-sm font-bold font-mono">{{ formatCurrency(balance.value.value, balance.currency) }}</div>
                 </div>
               </div>
-              <div v-else class="text-sm text-black italic">
-                {{ loading ? 'Loading...' : 'No balances fetched yet' }}
+              <div v-else class="text-sm text-black uppercase">
+                {{ loading ? 'LOADING...' : 'NO DATA' }}
               </div>
             </div>
           </div>
 
           <!-- Total in CAD -->
-          <div class="border-t pt-4">
-            <div class="bg-white border-2 border-black p-4">
+          <div class="border-t-4 border-black pt-4">
+            <div class="bg-black text-white p-4">
               <div class="flex justify-between items-center">
-                <span class="text-sm font-medium text-black">Total Available Balance (CAD $)</span>
-                <span class="text-lg font-bold text-blue-600">{{ formatCurrency(totalBalanceCAD, 'CAD') }}</span>
+                <span class="text-sm font-bold uppercase">TOTAL AVAILABLE (CAD)</span>
+                <span class="text-lg font-bold font-mono">{{ formatCurrency(totalBalanceCAD, 'CAD') }}</span>
               </div>
-              <p class="text-xs text-black mt-1">All balances converted to CAD using current exchange rates</p>
+              <p class="text-xs mt-1 uppercase">ALL BALANCES CONVERTED TO CAD</p>
             </div>
           </div>
 
 
           <!-- Error Display -->
-          <div v-if="error" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
-            {{ error }}
+          <div v-if="error" class="bg-white border-4 border-black text-black px-4 py-3">
+            <span class="font-bold uppercase">ERROR:</span> {{ error }}
           </div>
 
           <!-- Action Buttons -->
@@ -141,13 +141,13 @@
             <button
               type="button"
               @click="closeModal"
-              class="px-4 py-2 text-sm font-medium text-black bg-white border-2 border-black hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-black">
-              Cancel
+              class="px-4 py-2 text-sm font-bold text-black bg-white border-2 border-black hover:bg-black hover:text-white focus:outline-none uppercase">
+              CANCEL
             </button>
             <button
               type="submit"
-              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border-2 border-blue-800 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
-              Update Balances
+              class="px-4 py-2 text-sm font-bold text-white bg-black border-2 border-black hover:bg-white hover:text-black focus:outline-none uppercase">
+              UPDATE
             </button>
           </div>
         </form>
diff --git a/app/components/TransactionModal.vue b/app/components/TransactionModal.vue
index 1a9ebc8..9997c09 100644
--- a/app/components/TransactionModal.vue
+++ b/app/components/TransactionModal.vue
@@ -1,15 +1,15 @@
 <template>
   <div
     v-if="isOpen"
-    class="fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50">
+    class="fixed inset-0 bg-black bg-opacity-75 overflow-y-auto h-full w-full z-50">
     <div
-      class="relative top-20 mx-auto p-5 border-2 border-black w-96 shadow-lg bg-white">
+      class="relative top-20 mx-auto p-5 border-4 border-black w-96 bg-white">
       <div class="mt-3">
         <div class="flex justify-between items-center mb-4">
-          <h3 class="text-lg font-medium text-black">
-            {{ isEditing ? "Edit Transaction" : "Add New Transaction" }}
+          <h3 class="text-lg font-bold uppercase text-black">
+            {{ isEditing ? "EDIT TRANSACTION" : "ADD TRANSACTION" }}
           </h3>
-          <button @click="closeModal" class="text-black hover:text-red-600">
+          <button @click="closeModal" class="text-black hover:bg-black hover:text-white p-1">
             <svg
               class="w-6 h-6"
               fill="none"
@@ -27,21 +27,21 @@
         <form @submit.prevent="handleSubmit" class="space-y-4">
           <!-- Description -->
           <div>
-            <label class="block text-sm font-medium text-black mb-1">
-              Description *
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              DESCRIPTION *
             </label>
             <input
               v-model="form.description"
               type="text"
               required
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Enter transaction description" />
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono"
+              placeholder="Enter description" />
           </div>
 
           <!-- Amount -->
           <div>
-            <label class="block text-sm font-medium text-black mb-1">
-              Amount *
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              AMOUNT *
             </label>
             <div class="flex space-x-2">
               <input
@@ -49,126 +49,126 @@
                 type="number"
                 step="0.01"
                 required
-                class="flex-1 px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500"
-                placeholder="Enter amount" />
+                class="flex-1 px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono"
+                placeholder="0.00" />
               <select
                 v-model="form.currency"
-                class="px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <option value="CAD">CAD $</option>
-                <option value="EUR">EUR €</option>
+                class="px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-bold">
+                <option value="CAD">CAD</option>
+                <option value="EUR">EUR</option>
               </select>
             </div>
             <div
               v-if="form.currency !== 'CAD' && form.amount"
               class="mt-1 space-y-1">
-              <div class="text-sm text-black">
+              <div class="text-sm text-black font-mono">
                 {{ form.amount > 0 ? "+" : ""
                 }}{{ formatCurrency(form.amount, form.currency) }} =
                 {{ form.amount > 0 ? "+" : ""
-                }}{{ formatCurrency(convertedAmount, "CAD") }} CAD
-                <span v-if="exchangeRateLoading" class="text-blue-600 ml-2">
-                  ⟳ Updating rate...
+                }}{{ formatCurrency(convertedAmount, "CAD") }}
+                <span v-if="exchangeRateLoading" class="text-black ml-2">
+                  UPDATING...
                 </span>
               </div>
-              <div class="text-xs text-black">
+              <div class="text-xs text-black font-mono">
                 <span v-if="lastRateUpdate">
-                  Rate: {{ exchangeRates[form.currency].toFixed(5) }} ({{
+                  RATE: {{ exchangeRates[form.currency].toFixed(5) }} ({{
                     formatTimeAgo(lastRateUpdate)
                   }})
                 </span>
-                <span v-if="exchangeRateError" class="text-orange-600 ml-2">
-                  ⚠️ {{ exchangeRateError }}
+                <span v-if="exchangeRateError" class="text-black ml-2 font-bold">
+                  {{ exchangeRateError }}
                 </span>
               </div>
             </div>
-            <p class="text-xs text-black mt-1">
-              Positive for income, negative for expenses
+            <p class="text-xs text-black mt-1 uppercase">
+              POSITIVE = INCOME, NEGATIVE = EXPENSE
             </p>
           </div>
 
           <!-- Category -->
           <div>
-            <label class="block text-sm font-medium text-black mb-1">
-              Category *
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              CATEGORY *
             </label>
             <select
               v-model="form.category"
               required
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500">
-              <option value="">Select category</option>
-              <option value="Expense: Need">Expense: Need</option>
-              <option value="Expense: Want">Expense: Want</option>
-              <option value="Income">Income</option>
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-bold">
+              <option value="">SELECT</option>
+              <option value="Expense: Need">EXPENSE: NEED</option>
+              <option value="Expense: Want">EXPENSE: WANT</option>
+              <option value="Income">INCOME</option>
             </select>
           </div>
 
 
           <!-- Type -->
           <div>
-            <label class="block text-sm font-medium text-black mb-1">
-              Type *
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              TYPE *
             </label>
             <select
               v-model="form.type"
               required
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500">
-              <option value="recurring">Recurring</option>
-              <option value="one-time">One-time</option>
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-bold">
+              <option value="recurring">RECURRING</option>
+              <option value="one-time">ONE-TIME</option>
             </select>
           </div>
 
           <!-- Frequency (only for recurring) -->
           <div v-if="form.type === 'recurring'">
-            <label class="block text-sm font-medium text-black mb-1">
-              Frequency *
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              FREQUENCY *
             </label>
             <select
               v-model="form.frequency"
               required
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500">
-              <option value="weekly">Weekly</option>
-              <option value="biweekly">Biweekly</option>
-              <option value="monthly">Monthly</option>
-              <option value="quarterly">Quarterly</option>
-              <option value="custom">Custom</option>
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-bold">
+              <option value="weekly">WEEKLY</option>
+              <option value="biweekly">BIWEEKLY</option>
+              <option value="monthly">MONTHLY</option>
+              <option value="quarterly">QUARTERLY</option>
+              <option value="custom">CUSTOM</option>
             </select>
           </div>
 
           <!-- Custom months (only for custom frequency) -->
           <div v-if="form.type === 'recurring' && form.frequency === 'custom'">
-            <label class="block text-sm font-medium text-black mb-1">
-              Every X Months *
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              EVERY X MONTHS *
             </label>
             <input
               v-model.number="form.customMonths"
               type="number"
               min="1"
               required
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Enter number of months" />
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono"
+              placeholder="1" />
           </div>
 
           <!-- Start Date -->
           <div>
-            <label class="block text-sm font-medium text-black mb-1">
-              Start Date *
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              START DATE *
             </label>
             <input
               v-model="form.date"
               type="date"
               required
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500" />
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono" />
           </div>
 
           <!-- End Date (optional for recurring) -->
           <div v-if="form.type === 'recurring'">
-            <label class="block text-sm font-medium text-black mb-1">
-              End Date (optional)
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              END DATE (OPTIONAL)
             </label>
             <input
               v-model="form.endDate"
               type="date"
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500" />
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono" />
           </div>
 
           <!-- Confirmed Status -->
@@ -176,35 +176,35 @@
             <input
               v-model="form.isConfirmed"
               type="checkbox"
-              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-2 border-black" />
-            <label class="ml-2 block text-sm text-black">
-              Confirmed (check if this transaction is certain)
+              class="h-4 w-4 border-2 border-black accent-black" />
+            <label class="ml-2 block text-sm text-black uppercase">
+              CONFIRMED
             </label>
           </div>
 
           <!-- Notes -->
           <div>
-            <label class="block text-sm font-medium text-black mb-1">
-              Notes
+            <label class="block text-sm font-bold uppercase text-black mb-1">
+              NOTES
             </label>
             <textarea
               v-model="form.notes"
               rows="2"
-              class="w-full px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder="Optional notes"></textarea>
+              class="w-full px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-mono"
+              placeholder="Optional"></textarea>
           </div>
 
           <!-- Business Percentage Split -->
-          <div class="border-t pt-4">
-            <label class="block text-sm font-medium text-black mb-3">
-              Business/Personal Split
+          <div class="border-t-2 border-black pt-4">
+            <label class="block text-sm font-bold uppercase text-black mb-3">
+              BUSINESS/PERSONAL SPLIT
             </label>
             <div class="space-y-3">
               <!-- Slider -->
               <div>
                 <div class="flex justify-between items-center mb-2">
-                  <span class="text-sm text-black">Machine Magic %</span>
-                  <span class="text-sm font-medium text-blue-600">{{ form.businessPercentage }}%</span>
+                  <span class="text-sm text-black uppercase">MACHINE MAGIC %</span>
+                  <span class="text-sm font-bold text-black">{{ form.businessPercentage }}%</span>
                 </div>
                 <input
                   v-model.number="form.businessPercentage"
@@ -219,20 +219,20 @@
               <div class="bg-white border-2 border-black p-3">
                 <div class="grid grid-cols-2 gap-4 text-sm">
                   <div>
-                    <span class="text-black">Machine Magic:</span>
-                    <span class="font-medium text-blue-600 ml-1">
+                    <span class="text-black uppercase">BUSINESS:</span>
+                    <span class="font-bold text-black ml-1">
                       {{ formatCurrency(businessAmount) }}
                     </span>
                   </div>
                   <div>
-                    <span class="text-black">Personal:</span>
-                    <span class="font-medium text-green-600 ml-1">
+                    <span class="text-black uppercase">PERSONAL:</span>
+                    <span class="font-bold text-black ml-1">
                       {{ formatCurrency(personalAmount) }}
                     </span>
                   </div>
                 </div>
-                <div class="text-xs text-black mt-2">
-                  Only the personal portion ({{ formatCurrency(personalAmount) }}) affects your cash flow calculations
+                <div class="text-xs text-black mt-2 uppercase">
+                  PERSONAL PORTION AFFECTS CASH FLOW
                 </div>
               </div>
             </div>
@@ -246,11 +246,11 @@
                 v-if="isEditing"
                 type="button"
                 @click="handleDelete"
-                class="px-4 py-2 text-sm font-medium text-white bg-red-600 border-2 border-red-800 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
+                class="px-4 py-2 text-sm font-bold text-white bg-black border-2 border-black hover:bg-white hover:text-black focus:outline-none uppercase">
                 <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
-                Delete
+                DELETE
               </button>
             </div>
             <!-- Cancel and Save buttons -->
@@ -258,13 +258,13 @@
               <button
                 type="button"
                 @click="closeModal"
-                class="px-4 py-2 text-sm font-medium text-black bg-white border-2 border-black hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-black">
-                Cancel
+                class="px-4 py-2 text-sm font-bold text-black bg-white border-2 border-black hover:bg-black hover:text-white focus:outline-none uppercase">
+                CANCEL
               </button>
               <button
                 type="submit"
-                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border-2 border-blue-800 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                {{ isEditing ? "Update" : "Add" }} Transaction
+                class="px-4 py-2 text-sm font-bold text-white bg-black border-2 border-black hover:bg-white hover:text-black focus:outline-none uppercase">
+                {{ isEditing ? "UPDATE" : "ADD" }}
               </button>
             </div>
           </div>
@@ -482,27 +482,23 @@ const handleSubmit = () => {
 <style scoped>
 /* Custom slider styling */
 .slider {
-  background: linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--percentage, 0%), #d1d5db var(--percentage, 0%), #d1d5db 100%);
+  background: #000;
 }
 
 .slider::-webkit-slider-thumb {
   appearance: none;
   height: 20px;
   width: 20px;
-  border-radius: 50%;
-  background: #3b82f6;
+  background: #fff;
   cursor: pointer;
-  border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  border: 2px solid black;
 }
 
 .slider::-moz-range-thumb {
   height: 20px;
   width: 20px;
-  border-radius: 50%;
-  background: #3b82f6;
+  background: #fff;
   cursor: pointer;
-  border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  border: 2px solid black;
 }
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7b52cb5..054dc8f 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -5,49 +5,49 @@
       <!-- Key Metrics -->
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
         <!-- Current Balance Card -->
-        <div class="bg-white border-2 border-black shadow-lg p-6">
+        <div class="bg-white border-4 border-black p-6">
           <div class="text-center">
-            <p class="text-sm font-medium text-black">
-              Available Balance
+            <p class="text-sm font-bold uppercase text-black">
+              AVAILABLE BALANCE
             </p>
-            <p class="text-2xl font-bold text-blue-600">
+            <p class="text-2xl font-bold text-black">
               {{ formatCurrency(cashFlow?.startingBalance?.value || 0) }}
             </p>
             <button
               @click="openBalanceModal"
-              class="mt-2 text-xs text-blue-600 hover:text-blue-800 underline border-b border-blue-600">
-              Update Balances
+              class="mt-2 text-xs text-black hover:bg-black hover:text-white px-2 py-1 border-2 border-black font-bold uppercase">
+              UPDATE
             </button>
           </div>
         </div>
 
         <!-- Runway Card -->
-        <div class="bg-white border-2 border-black shadow-lg p-6">
+        <div class="bg-white border-4 border-black p-6">
           <div class="text-center">
-            <p class="text-sm font-medium text-black">Runway</p>
-            <p class="text-2xl font-bold" :class="runwayColor">
+            <p class="text-sm font-bold uppercase text-black">RUNWAY</p>
+            <p class="text-2xl font-bold text-black">
               {{ runwayText }}
             </p>
           </div>
         </div>
 
         <!-- Core Expenses Card -->
-        <div class="bg-white border-2 border-black shadow-lg p-6">
+        <div class="bg-white border-4 border-black p-6">
           <div class="text-center">
-            <p class="text-sm font-medium text-black">
-              Core Expenses (Needs)
+            <p class="text-sm font-bold uppercase text-black">
+              CORE EXPENSES
             </p>
-            <p class="text-2xl font-bold text-red-600">
+            <p class="text-2xl font-bold text-black">
               {{ formatCurrency(monthlyCoreExpenses) }}
             </p>
           </div>
         </div>
 
         <!-- Income Card -->
-        <div class="bg-white border-2 border-black shadow-lg p-6">
+        <div class="bg-white border-4 border-black p-6">
           <div class="text-center">
-            <p class="text-sm font-medium text-black">Monthly Income</p>
-            <p class="text-2xl font-bold text-green-600">
+            <p class="text-sm font-bold uppercase text-black">MONTHLY INCOME</p>
+            <p class="text-2xl font-bold text-black">
               {{ formatCurrency(monthlyIncome) }}
             </p>
           </div>
@@ -55,23 +55,20 @@
       </div>
 
       <!-- Scenario Control Panel -->
-      <div class="bg-white border-2 border-black shadow-lg p-6 mb-8">
+      <div class="bg-white border-4 border-black p-6 mb-8">
         <div
           class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
           <div class="mb-4 sm:mb-0">
-            <h3 class="text-lg font-semibold text-black">
-              Financial Scenario
+            <h3 class="text-lg font-bold uppercase text-black">
+              FINANCIAL SCENARIO
             </h3>
             <p class="text-sm text-black">
               <span
-                class="font-medium"
-                :class="
-                  scenario === 'interest' ? 'text-red-600' : 'text-green-600'
-                ">
+                class="font-bold uppercase">
                 {{
                   scenario === "interest"
-                    ? "🔴 Current (Interest Payments)"
-                    : "🟢 Bankruptcy (Surplus Payments)"
+                    ? "CURRENT (INTEREST)"
+                    : "BANKRUPTCY (SURPLUS)"
                 }}
               </span>
               - {{ scenarioDescription }}
@@ -82,13 +79,13 @@
             class="flex flex-col sm:flex-row sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
             <!-- Scenario Toggle -->
             <div class="flex items-center space-x-3">
-              <label class="text-sm font-medium text-black">Scenario:</label>
+              <label class="text-sm font-bold uppercase text-black">SCENARIO:</label>
               <select
                 v-model="scenario"
                 @change="updateScenario"
-                class="px-3 py-2 border-2 border-black focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <option value="interest">Interest Payments</option>
-                <option value="bankruptcy">Dynamic Surplus</option>
+                class="px-3 py-2 border-2 border-black bg-white focus:outline-none focus:bg-black focus:text-white font-bold">
+                <option value="interest">INTEREST</option>
+                <option value="bankruptcy">BANKRUPTCY</option>
               </select>
             </div>
 
@@ -96,12 +93,12 @@
             <div
               v-if="scenario === 'bankruptcy'"
               class="bg-white border-2 border-black px-3 py-2 text-sm">
-              <div class="font-medium text-black">
-                Surplus: {{ formatCurrency(calculatedSurplusPayment) }}/month
+              <div class="font-bold uppercase text-black">
+                SURPLUS: {{ formatCurrency(calculatedSurplusPayment) }}/MO
               </div>
-              <div class="text-xs text-black">
-                Income: {{ formatCurrency(householdNetIncome) }} | Threshold:
-                {{ formatCurrency(surplusThreshold) }} | Available:
+              <div class="text-xs text-black uppercase">
+                INC: {{ formatCurrency(householdNetIncome) }} | THR:
+                {{ formatCurrency(surplusThreshold) }} | AVL:
                 {{
                   formatCurrency(
                     Math.max(0, householdNetIncome - surplusThreshold)
@@ -125,27 +122,27 @@
       <!-- Delete Confirmation Modal -->
       <div
         v-if="showDeleteConfirmation"
-        class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+        class="fixed inset-0 bg-black bg-opacity-75 overflow-y-auto h-full w-full z-50">
         <div
-          class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+          class="relative top-20 mx-auto p-5 border-4 border-black w-96 bg-white">
           <div class="mt-3">
             <div class="flex justify-between items-center mb-4">
-              <h3 class="text-lg font-medium text-gray-900">
-                Confirm Delete
+              <h3 class="text-lg font-bold uppercase text-black">
+                CONFIRM DELETE
               </h3>
-              <button @click="cancelDelete" class="text-gray-400 hover:text-gray-600">
+              <button @click="cancelDelete" class="text-black hover:bg-black hover:text-white p-1">
                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
             </div>
             <div class="mb-4">
-              <p class="text-sm text-gray-600">
+              <p class="text-sm text-black">
                 Are you sure you want to delete this transaction? This action cannot be undone.
               </p>
-              <div v-if="transactionToDelete" class="mt-3 p-3 bg-gray-50 rounded">
-                <p class="text-sm font-medium">{{ transactionToDelete.description }}</p>
-                <p class="text-sm text-gray-500">
+              <div v-if="transactionToDelete" class="mt-3 p-3 bg-white border-2 border-black">
+                <p class="text-sm font-bold">{{ transactionToDelete.description }}</p>
+                <p class="text-sm text-black">
                   {{ formatCurrency(transactionToDelete.amount) }} - {{ transactionToDelete.category }}
                 </p>
               </div>
@@ -153,13 +150,13 @@
             <div class="flex justify-end space-x-3">
               <button
                 @click="cancelDelete"
-                class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500">
-                Cancel
+                class="px-4 py-2 text-sm font-bold text-black bg-white border-2 border-black hover:bg-black hover:text-white focus:outline-none uppercase">
+                CANCEL
               </button>
               <button
                 @click="confirmDelete"
-                class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
-                Delete Transaction
+                class="px-4 py-2 text-sm font-bold text-white bg-black border-2 border-black hover:bg-white hover:text-black focus:outline-none uppercase">
+                DELETE
               </button>
             </div>
           </div>
@@ -174,15 +171,15 @@
         @update="updateBalance" />
 
       <!-- Projected Transactions (Next 13 Weeks) -->
-      <div class="bg-white rounded-lg shadow overflow-hidden">
+      <div class="bg-white border-4 border-black overflow-hidden">
         <div
-          class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
-          <h3 class="text-lg font-semibold">
-            All Transactions - Next 13 Weeks
+          class="px-6 py-4 border-b-4 border-black flex justify-between items-center">
+          <h3 class="text-lg font-bold uppercase">
+            ALL TRANSACTIONS - NEXT 13 WEEKS
           </h3>
           <button
             @click="handleAddTransaction"
-            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 border-2 border-blue-800 flex items-center">
+            class="bg-black text-white hover:bg-white hover:text-black font-bold py-2 px-4 border-2 border-black flex items-center uppercase">
             <svg
               class="w-4 h-4 mr-2"
               fill="none"
@@ -194,7 +191,7 @@
                 stroke-width="2"
                 d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
             </svg>
-            Add Transaction
+            ADD TRANSACTION
           </button>
         </div>
         <div class="overflow-x-auto" v-if="projectedTransactions.length > 0">
@@ -202,68 +199,61 @@
             <thead class="bg-black text-white">
               <tr>
                 <th
-                  class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Date
+                  class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider">
+                  DATE
                 </th>
                 <th
-                  class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Description
+                  class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider">
+                  DESCRIPTION
                 </th>
                 <th
-                  class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Category
+                  class="px-6 py-3 text-left text-xs font-bold uppercase tracking-wider">
+                  CATEGORY
                 </th>
                 <th
-                  class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">
-                  Amount
+                  class="px-6 py-3 text-right text-xs font-bold uppercase tracking-wider">
+                  AMOUNT
                 </th>
                 <th
-                  class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider">
-                  Running Balance
+                  class="px-6 py-3 text-right text-xs font-bold uppercase tracking-wider">
+                  BALANCE
                 </th>
                 <th
-                  class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">
-                  Notes
-                </th>
-                <th
-                  class="px-6 py-3 text-center text-xs font-medium uppercase tracking-wider">
-                  Actions
+                  class="px-6 py-3 text-center text-xs font-bold uppercase tracking-wider">
+                  ACTIONS
                 </th>
               </tr>
             </thead>
-            <tbody class="bg-white divide-y divide-black">
+            <tbody class="bg-white divide-y-2 divide-black">
               <tr
                 v-for="transaction in projectedTransactions"
                 :key="`${transaction.id}-${transaction.date}`"
-                class="hover:bg-blue-50 transition-colors">
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-black">
+                class="hover:bg-gray-100">
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-black font-mono">
                   {{ formatDate(transaction.date) }}
                 </td>
-                <td class="px-6 py-4">
+                <td class="px-6 py-4 whitespace-nowrap">
                   <div>
-                    <p class="text-sm font-medium text-black">
+                    <p class="text-sm font-bold text-black">
                       {{ transaction.description }}
                     </p>
                   </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
-                  <span class="text-sm text-black">{{
+                  <span class="text-sm text-black font-mono">{{
                     transaction.category
                   }}</span>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-right">
-                  <div
-                    :class="
-                      transaction.amount > 0 ? 'text-green-600' : 'text-red-600'
-                    ">
-                    <p class="text-sm font-medium">
+                  <div class="text-black">
+                    <p class="text-sm font-bold font-mono">
                       {{ formatCurrency(transaction.amount) }}
                     </p>
                     <!-- Show business split info if applicable -->
-                    <div v-if="transaction.businessPercentage > 0" class="text-xs text-gray-500 space-y-0.5">
-                      <div>Personal: {{ formatCurrency(transaction.amount) }}</div>
-                      <div class="text-blue-600">Business: {{ formatCurrency(transaction.businessAmount || 0) }} ({{ transaction.businessPercentage }}%)</div>
-                      <div class="font-medium">Total: {{ formatCurrency(transaction.totalAmount || transaction.amount) }}</div>
+                    <div v-if="transaction.businessPercentage > 0" class="text-xs text-black space-y-0.5">
+                      <div>PER: {{ formatCurrency(transaction.amount) }}</div>
+                      <div>BUS: {{ formatCurrency(transaction.businessAmount || 0) }} ({{ transaction.businessPercentage }}%)</div>
+                      <div class="font-bold">TTL: {{ formatCurrency(transaction.totalAmount || transaction.amount) }}</div>
                     </div>
                     <!-- Show original currency info if different and no business split -->
                     <p
@@ -271,7 +261,7 @@
                         transaction.originalCurrency &&
                         transaction.originalCurrency !== 'CAD'
                       "
-                      class="text-xs text-gray-500">
+                      class="text-xs text-black">
                       ({{
                         formatCurrency(
                           transaction.originalAmount,
@@ -283,31 +273,26 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-right">
                   <p
-                    class="text-sm font-bold"
+                    class="text-sm font-bold font-mono"
                     :class="
                       transaction.runningBalance < 0
-                        ? 'text-red-600'
+                        ? 'bg-black text-white px-1'
                         : 'text-black'
                     ">
                     {{ formatCurrency(transaction.runningBalance) }}
                   </p>
                 </td>
-                <td class="px-6 py-4 text-left">
-                  <p class="text-sm text-black max-w-xs truncate" :title="transaction.notes">
-                    {{ transaction.notes || '-' }}
-                  </p>
-                </td>
                 <td class="px-6 py-4 whitespace-nowrap text-center">
                   <div class="flex justify-center space-x-2">
                     <button
                       @click="handleEditTransaction(transaction)"
-                      class="text-blue-600 hover:text-blue-800 text-sm font-medium px-2 py-1 border border-blue-600 hover:bg-blue-50">
-                      Edit
+                      class="text-black text-sm font-bold px-2 py-1 border-2 border-black hover:bg-black hover:text-white uppercase">
+                      EDIT
                     </button>
                     <button
                       @click="handleDeleteTransaction(transaction.id)"
-                      class="text-red-600 hover:text-red-800 text-sm font-medium px-2 py-1 border border-red-600 hover:bg-red-50">
-                      Delete
+                      class="text-black text-sm font-bold px-2 py-1 border-2 border-black hover:bg-black hover:text-white uppercase">
+                      DEL
                     </button>
                   </div>
                 </td>
@@ -318,7 +303,7 @@
         <!-- Empty state when no transactions -->
         <div v-else class="text-center py-12">
           <svg
-            class="h-12 w-12 mx-auto mb-4 text-gray-400"
+            class="h-12 w-12 mx-auto mb-4 text-black"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24">
@@ -328,10 +313,10 @@
               stroke-width="2"
               d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
           </svg>
-          <h3 class="text-lg font-medium text-gray-900 mb-2">
-            No transactions yet
+          <h3 class="text-lg font-bold uppercase text-black mb-2">
+            NO TRANSACTIONS
           </h3>
-          <p class="text-gray-600 mb-4">
+          <p class="text-black mb-4">
             Add your first transaction to start tracking your cash flow
           </p>
         </div>