diff --git a/app.config.ts b/app.config.ts
deleted file mode 100644
index 1dbf21d..0000000
--- a/app.config.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-export default defineAppConfig({
-  ui: {
-    colors: {
-      primary: "fuchsia",
-      neutral: "stone",
-    },
-
-    global: {
-      body: "bg-white dark:bg-neutral-950",
-    },
-    container: {
-      base: "mx-auto",
-      padding: "px-4 sm:px-6 lg:px-8",
-      constrained: "max-w-7xl",
-      background: "",
-    },
-    // Spacious card styling
-    card: {
-      base: "overflow-hidden",
-      background: "bg-white dark:bg-neutral-950",
-      divide: "divide-y divide-neutral-200 dark:divide-neutral-800",
-      ring: "ring-1 ring-neutral-200 dark:ring-neutral-800",
-      rounded: "rounded-lg",
-      shadow: "shadow",
-      body: {
-        base: "",
-        background: "",
-        padding: "px-6 py-5 sm:p-6",
-      },
-      header: {
-        base: "",
-        background: "",
-        padding: "px-6 py-4 sm:px-6",
-      },
-      footer: {
-        base: "",
-        background: "",
-        padding: "px-6 py-4 sm:px-6",
-      },
-    },
-  },
-});
diff --git a/app.vue b/app.vue
index 3f61ca6..c6d274c 100644
--- a/app.vue
+++ b/app.vue
@@ -9,9 +9,11 @@
               <div class="relative flex items-center justify-center">
                 <NuxtLink
                   to="/"
-                  class="flex items-center gap-2 hover:opacity-80 transition-opacity">
+                  class="flex items-center gap-2 hover:opacity-80 transition-opacity"
+                >
                   <h1
-                    class="text-black dark:text-white text-center text-2xl font-mono uppercase font-bold">
+                    class="text-black dark:text-white text-center text-2xl font-mono uppercase font-bold"
+                  >
                     Urgent Tools
                   </h1>
                 </NuxtLink>
@@ -22,14 +24,16 @@
               <nav
                 class="mt-4 flex items-center justify-center gap-1"
                 role="navigation"
-                aria-label="Main navigation">
+                aria-label="Main navigation"
+              >
                 <NuxtLink
                   to="/coop-planner"
                   class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                   :class="{
                     'bg-neutral-100 dark:bg-neutral-800': isCoopBuilderSection,
-                  }">
-                  Budget Builder
+                  }"
+                >
+                  Co-Op Builder
                 </NuxtLink>
                 <!-- Coach feature - hidden for now -->
                 <!-- <NuxtLink
@@ -45,18 +49,18 @@
                   to="/wizards"
                   class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                   :class="{
-                    'bg-neutral-100 dark:bg-neutral-800':
-                      $route.path === '/wizards',
-                  }">
+                    'bg-neutral-100 dark:bg-neutral-800': $route.path === '/wizards',
+                  }"
+                >
                   Wizards
                 </NuxtLink>
                 <NuxtLink
                   to="/resources"
                   class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
                   :class="{
-                    'bg-neutral-100 dark:bg-neutral-800':
-                      $route.path === '/resources',
-                  }">
+                    'bg-neutral-100 dark:bg-neutral-800': $route.path === '/resources',
+                  }"
+                >
                   More Resources & Templates
                 </NuxtLink>
               </nav>
diff --git a/assets/css/main.css b/assets/css/main.css
index 303f754..546c443 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3,7 +3,7 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@theme static {
+@theme {
   --font-body: "Ubuntu", "Inter", sans-serif; 
   --font-mono: "Ubuntu Mono", monospace;
 }
@@ -237,7 +237,7 @@ html.dark .section-card::before {
    ========================= */
 
 .dither-shadow {
-  @apply bg-black dark:bg-neutral-600;
+  @apply bg-black dark:bg-white;
   background-image: radial-gradient(white 1px, transparent 1px);
   background-size: 2px 2px;
 }
diff --git a/components/AnnualBudget.vue b/components/AnnualBudget.vue
index 3433222..0e8c844 100644
--- a/components/AnnualBudget.vue
+++ b/components/AnnualBudget.vue
@@ -7,12 +7,12 @@
       <div class="border border-black bg-white">
         <table class="w-full border-collapse text-sm">
           <thead>
-            <tr class="border-b-2 border-black bg-neutral-100">
+            <tr class="border-b-2 border-black bg-gray-100">
               <th class="border-r-1 border-black px-4 py-3 text-left font-bold">
                 Category
               </th>
               <th
-                class="border-r border-neutral-400 px-4 py-3 text-right font-bold">
+                class="border-r border-gray-400 px-4 py-3 text-right font-bold">
                 Planned
               </th>
               <th class="px-4 py-3 text-right font-bold">%</th>
@@ -28,21 +28,21 @@
             <tr
               v-for="(category, index) in revenueCategories"
               :key="`rev-${index}`"
-              class="border-t border-neutral-200"
+              class="border-t border-gray-200"
               v-show="category.planned > 0">
               <td class="border-r-1 border-black px-4 py-2">
                 {{ category.name }}
               </td>
-              <td class="border-r border-neutral-400 px-4 py-2 text-right">
+              <td class="border-r border-gray-400 px-4 py-2 text-right">
                 {{ formatCurrency(category.planned) }}
               </td>
               <td class="px-4 py-2 text-right">{{ category.percentage }}%</td>
             </tr>
 
             <!-- Total Revenue -->
-            <tr class="border-t-2 border-black font-semibold bg-neutral-50">
+            <tr class="border-t-2 border-black font-semibold bg-gray-50">
               <td class="border-r-1 border-black px-4 py-2">Total Revenue</td>
-              <td class="border-r border-neutral-400 px-4 py-2 text-right">
+              <td class="border-r border-gray-400 px-4 py-2 text-right">
                 {{ formatCurrency(totalRevenuePlanned) }}
               </td>
               <td class="px-4 py-2 text-right">100%</td>
@@ -50,11 +50,11 @@
 
             <!-- Revenue Diversification Guidance -->
             <tr :class="guidanceBackgroundClass">
-              <td colspan="3" class="border-t border-neutral-300 px-4 py-3">
+              <td colspan="3" class="border-t border-gray-300 px-4 py-3">
                 <div class="text-sm">
                   <p class="font-medium mb-2">{{ diversificationGuidance }}</p>
                   <p
-                    class="text-neutral-600 mb-2"
+                    class="text-gray-600 mb-2"
                     v-if="suggestedCategories.length > 0">
                     Consider developing: {{ suggestedCategories.join(", ") }}
                   </p>
@@ -78,21 +78,21 @@
             <tr
               v-for="(category, index) in expenseCategories"
               :key="`exp-${index}`"
-              class="border-t border-neutral-200"
+              class="border-t border-gray-200"
               v-show="category.planned > 0">
               <td class="border-r-1 border-black px-4 py-2">
                 {{ category.name }}
               </td>
-              <td class="border-r border-neutral-400 px-4 py-2 text-right">
+              <td class="border-r border-gray-400 px-4 py-2 text-right">
                 {{ formatCurrency(category.planned) }}
               </td>
               <td class="px-4 py-2 text-right">{{ category.percentage }}%</td>
             </tr>
 
             <!-- Total Expenses -->
-            <tr class="border-t-2 border-black font-semibold bg-neutral-50">
+            <tr class="border-t-2 border-black font-semibold bg-gray-50">
               <td class="border-r-1 border-black px-4 py-2">Total Expenses</td>
-              <td class="border-r border-neutral-400 px-4 py-2 text-right">
+              <td class="border-r border-gray-400 px-4 py-2 text-right">
                 {{ formatCurrency(totalExpensesPlanned) }}
               </td>
               <td class="px-4 py-2 text-right">100%</td>
@@ -103,7 +103,7 @@
               class="border-t-2 border-black font-bold text-lg"
               :class="netTotalClass">
               <td class="border-r-1 border-black px-4 py-3">NET TOTAL</td>
-              <td class="border-r border-neutral-400 px-4 py-3 text-right">
+              <td class="border-r border-gray-400 px-4 py-3 text-right">
                 {{ formatCurrency(netTotal) }}
               </td>
               <td class="px-4 py-3 text-right">-</td>
@@ -244,7 +244,7 @@ const netTotal = computed(
 const netTotalClass = computed(() => {
   if (netTotal.value > 0) return "bg-green-50";
   if (netTotal.value < 0) return "bg-red-50";
-  return "bg-neutral-50";
+  return "bg-gray-50";
 });
 
 // Diversification guidance
@@ -397,7 +397,7 @@ function getPercentageClass(percentage: number): string {
   if (percentage > 50) return "text-red-600 font-bold";
   if (percentage > 35) return "text-yellow-600 font-semibold";
   if (percentage > 20) return "text-black font-medium";
-  return "text-neutral-500";
+  return "text-gray-500";
 }
 
 // Initialize
diff --git a/components/BudgetCategorySelector.vue b/components/BudgetCategorySelector.vue
index c035b85..e1a68be 100644
--- a/components/BudgetCategorySelector.vue
+++ b/components/BudgetCategorySelector.vue
@@ -2,7 +2,7 @@
   <select 
     v-model="selectedCategory"
     @change="handleSelection(selectedCategory)"
-    class="w-full px-3 py-2 border border-neutral-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
   >
     <option v-for="option in options" :key="option" :value="option">
       {{ option }}
diff --git a/components/ColorModeToggle.vue b/components/ColorModeToggle.vue
index 9740ac7..868603f 100644
--- a/components/ColorModeToggle.vue
+++ b/components/ColorModeToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <UButton color="neutral" variant="ghost" @click="toggle">
+  <UButton color="gray" variant="ghost" @click="toggle">
     <UIcon :name="icon" class="w-5 h-5" />
   </UButton>
 </template>
diff --git a/components/CoopBuilderSubnav.vue b/components/CoopBuilderSubnav.vue
index 21e0040..2abc11c 100644
--- a/components/CoopBuilderSubnav.vue
+++ b/components/CoopBuilderSubnav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isSetupCompleted" class="mb-12">
+  <div class="mb-12">
     <div class="w-full mx-auto">
       <nav
         class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
@@ -24,17 +24,16 @@
 
 <script setup lang="ts">
 const route = useRoute();
-const coop = useCoopBuilder();
 
 const coopBuilderItems = [
   {
     id: "coop-builder",
-    name: "Settings",
+    name: "Setup Wizard",
     path: "/coop-builder",
   },
   {
     id: "budget",
-    name: "Studio Budget",
+    name: "Budget",
     path: "/budget",
   },
   {
@@ -44,31 +43,6 @@ const coopBuilderItems = [
   },
 ];
 
-// Check if setup wizard is completed using the same validation logic as coop-builder page
-const isSetupCompleted = computed(() => {
-  // Members validation: at least one member with name and positive hours
-  const membersValid = coop.members.value.some((m: any) => {
-    const hasName = typeof m.name === "string" && m.name.trim().length > 0;
-    const hours = Number((m as any).hoursPerMonth ?? 0);
-    return hasName && Number.isFinite(hours) && hours > 0;
-  });
-
-  // Streams validation: at least one stream with name and non-negative monthly amount
-  const streamsValid = coop.streams.value.length > 0 &&
-    coop.streams.value.every((s: any) => {
-      const monthly = Number((s as any).monthly ?? 0);
-      return (s.label || "").toString().trim().length > 0 && monthly >= 0;
-    });
-
-  // Policies validation: has members (same logic as coop-builder page)
-  const policiesValid = coop.members.value.length > 0;
-
-  // Costs are always valid (optional)
-  const costsValid = true;
-
-  return policiesValid && membersValid && costsValid && streamsValid;
-});
-
 function isActive(path: string): boolean {
   return route.path === path;
 }
diff --git a/components/CoverageMeter.vue b/components/CoverageMeter.vue
index 6d87f2c..983ec5e 100644
--- a/components/CoverageMeter.vue
+++ b/components/CoverageMeter.vue
@@ -69,7 +69,7 @@ const progressColor = computed(() => {
     case "red":
       return "red";
     default:
-      return "neutral";
+      return "gray";
   }
 });
 
@@ -82,7 +82,7 @@ const badgeColor = computed(() => {
     case "red":
       return "red";
     default:
-      return "neutral";
+      return "gray";
   }
 });
 
diff --git a/components/ExportOptions.vue b/components/ExportOptions.vue
index 984b6ee..e5a7ef6 100644
--- a/components/ExportOptions.vue
+++ b/components/ExportOptions.vue
@@ -7,26 +7,26 @@
             @click="copyToClipboard"
             class="export-btn"
             :disabled="isProcessing"
-            ref="copyButton">
+            ref="copyButton"
+          >
             <UIcon name="i-heroicons-clipboard" />
             <span>Copy as Text</span>
-            <UIcon
-              v-if="showCopySuccess"
-              name="i-heroicons-check"
-              class="success-icon" />
+            <UIcon v-if="showCopySuccess" name="i-heroicons-check" class="success-icon" />
           </UButton>
 
           <UButton
             @click="downloadAsMarkdown"
             class="export-btn"
             :disabled="isProcessing"
-            ref="downloadButton">
+            ref="downloadButton"
+          >
             <UIcon name="i-heroicons-arrow-down-tray" />
             <span>Download Markdown</span>
             <UIcon
               v-if="showDownloadSuccess"
               name="i-heroicons-check"
-              class="success-icon" />
+              class="success-icon"
+            />
           </UButton>
         </div>
       </div>
@@ -64,20 +64,17 @@ const showSuccessFeedback = (
     successRef.value = true;
 
     // Add checkmark overlay animation if button exists
-    if (
-      buttonRef?.value &&
-      typeof buttonRef.value.classList?.add === "function"
-    ) {
+    if (buttonRef?.value && typeof buttonRef.value.classList?.add === 'function') {
       const button = buttonRef.value;
       button.classList.add("success-state");
-
+      
       setTimeout(() => {
         try {
-          if (button && typeof button.classList?.remove === "function") {
+          if (button && typeof button.classList?.remove === 'function') {
             button.classList.remove("success-state");
           }
         } catch (e) {
-          console.warn("Could not remove success-state class:", e);
+          console.warn('Could not remove success-state class:', e);
         }
       }, 2000);
     }
@@ -87,11 +84,11 @@ const showSuccessFeedback = (
       try {
         successRef.value = false;
       } catch (e) {
-        console.warn("Could not reset success state:", e);
+        console.warn('Could not reset success state:', e);
       }
     }, 2000);
   } catch (error) {
-    console.warn("Success feedback failed:", error);
+    console.warn('Success feedback failed:', error);
     // Still show success state even if animation fails
     successRef.value = true;
     setTimeout(() => {
@@ -119,17 +116,11 @@ const copyToClipboard = async () => {
         try {
           showSuccessFeedback(copyButton, showCopySuccess);
         } catch (feedbackError) {
-          console.warn(
-            "Success feedback failed, but copy succeeded:",
-            feedbackError
-          );
+          console.warn("Success feedback failed, but copy succeeded:", feedbackError);
         }
         return;
       } catch (clipboardError) {
-        console.warn(
-          "Modern clipboard failed, trying fallback:",
-          clipboardError
-        );
+        console.warn("Modern clipboard failed, trying fallback:", clipboardError);
       }
     }
 
@@ -139,9 +130,9 @@ const copyToClipboard = async () => {
     textarea.style.position = "fixed";
     textarea.style.left = "-9999px";
     textarea.style.top = "-9999px";
-    textarea.setAttribute("readonly", "");
+    textarea.setAttribute('readonly', '');
     document.body.appendChild(textarea);
-
+    
     // Select the text
     textarea.select();
     textarea.setSelectionRange(0, 99999); // For mobile devices
@@ -169,12 +160,10 @@ const copyToClipboard = async () => {
       try {
         showSuccessFeedback(copyButton, showCopySuccess);
       } catch (feedbackError) {
-        console.warn(
-          "Success feedback failed, but copy succeeded:",
-          feedbackError
-        );
+        console.warn("Success feedback failed, but copy succeeded:", feedbackError);
       }
     }
+
   } catch (error) {
     console.error("Copy failed:", error);
     alert("Copy failed. Please try the Download Markdown button instead.");
@@ -281,9 +270,7 @@ const formatDataAsMarkdown = (data: any): string => {
 };
 
 const formatTechCharterAsText = (data: any): string => {
-  let content = `PURPOSE\n-------\n\n${
-    data.charterPurpose || "[No purpose defined]"
-  }\n\n`;
+  let content = `PURPOSE\n-------\n\n${data.charterPurpose || '[No purpose defined]'}\n\n`;
 
   const principleWeights = data.principleWeights || {};
   const nonNegotiables = data.nonNegotiables || [];
@@ -295,9 +282,7 @@ const formatTechCharterAsText = (data: any): string => {
     (p) => principleWeights[p] > 0
   );
 
-  if (
-    selectedPrinciples.filter((p) => !nonNegotiables.includes(p)).length > 0
-  ) {
+  if (selectedPrinciples.filter((p) => !nonNegotiables.includes(p)).length > 0) {
     content += `CORE PRINCIPLES\n---------------\n\n`;
     selectedPrinciples
       .filter((p) => !nonNegotiables.includes(p))
@@ -322,28 +307,20 @@ const formatTechCharterAsText = (data: any): string => {
   }
 
   content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
-  content += `• Authentication: ${constraints.sso || "Not specified"}\n`;
-  content += `• Hosting: ${constraints.hosting || "Not specified"}\n`;
-  if (
-    constraints.integrations &&
-    Array.isArray(constraints.integrations) &&
-    constraints.integrations.length > 0
-  ) {
-    content += `• Required Integrations: ${constraints.integrations.join(
-      ", "
-    )}\n`;
+  content += `• Authentication: ${constraints.sso || 'Not specified'}\n`;
+  content += `• Hosting: ${constraints.hosting || 'Not specified'}\n`;
+  if (constraints.integrations && Array.isArray(constraints.integrations) && constraints.integrations.length > 0) {
+    content += `• Required Integrations: ${constraints.integrations.join(", ")}\n`;
   }
-  content += `• Support Level: ${constraints.support || "Not specified"}\n`;
-  content += `• Migration Timeline: ${
-    constraints.timeline || "Not specified"
-  }\n\n`;
+  content += `• Support Level: ${constraints.support || 'Not specified'}\n`;
+  content += `• Migration Timeline: ${constraints.timeline || 'Not specified'}\n\n`;
 
   if (sortedWeights.length > 0) {
     content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
     sortedWeights.forEach((principle: any) => {
-      content += `${principle.name} (Weight: ${
-        principleWeights[principle.id] || 0
-      })\n${principle.rubricDescription || "No description provided"}\n\n`;
+      content += `${principle.name} (Weight: ${principleWeights[principle.id] || 0})\n${
+        principle.rubricDescription || 'No description provided'
+      }\n\n`;
     });
   }
 
@@ -351,9 +328,7 @@ const formatTechCharterAsText = (data: any): string => {
 };
 
 const formatTechCharterAsMarkdown = (data: any): string => {
-  let content = `## Purpose\n\n${
-    data.charterPurpose || "[No purpose defined]"
-  }\n\n`;
+  let content = `## Purpose\n\n${data.charterPurpose || '[No purpose defined]'}\n\n`;
 
   const principleWeights = data.principleWeights || {};
   const nonNegotiables = data.nonNegotiables || [];
@@ -365,9 +340,7 @@ const formatTechCharterAsMarkdown = (data: any): string => {
     (p) => principleWeights[p] > 0
   );
 
-  if (
-    selectedPrinciples.filter((p) => !nonNegotiables.includes(p)).length > 0
-  ) {
+  if (selectedPrinciples.filter((p) => !nonNegotiables.includes(p)).length > 0) {
     content += `## Core Principles\n\n`;
     selectedPrinciples
       .filter((p) => !nonNegotiables.includes(p))
@@ -392,30 +365,22 @@ const formatTechCharterAsMarkdown = (data: any): string => {
   }
 
   content += `## Technical Constraints\n\n`;
-  content += `- Authentication: ${constraints.sso || "Not specified"}\n`;
-  content += `- Hosting: ${constraints.hosting || "Not specified"}\n`;
-  if (
-    constraints.integrations &&
-    Array.isArray(constraints.integrations) &&
-    constraints.integrations.length > 0
-  ) {
-    content += `- Required Integrations: ${constraints.integrations.join(
-      ", "
-    )}\n`;
+  content += `- Authentication: ${constraints.sso || 'Not specified'}\n`;
+  content += `- Hosting: ${constraints.hosting || 'Not specified'}\n`;
+  if (constraints.integrations && Array.isArray(constraints.integrations) && constraints.integrations.length > 0) {
+    content += `- Required Integrations: ${constraints.integrations.join(", ")}\n`;
   }
-  content += `- Support Level: ${constraints.support || "Not specified"}\n`;
-  content += `- Migration Timeline: ${
-    constraints.timeline || "Not specified"
-  }\n\n`;
+  content += `- Support Level: ${constraints.support || 'Not specified'}\n`;
+  content += `- Migration Timeline: ${constraints.timeline || 'Not specified'}\n\n`;
 
   if (sortedWeights.length > 0) {
     content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
     content += `| Criterion | Description | Weight |\n`;
     content += `|-----------|-------------|--------|\n`;
     sortedWeights.forEach((principle: any) => {
-      content += `| ${principle.name || "Unknown"} | ${
-        principle.rubricDescription || "No description"
-      } | ${principleWeights[principle.id] || 0} |\n`;
+      content += `| ${principle.name || 'Unknown'} | ${principle.rubricDescription || 'No description'} | ${
+        principleWeights[principle.id] || 0
+      } |\n`;
     });
   }
 
@@ -426,9 +391,7 @@ const formatObjectAsText = (obj: any): string => {
   if (!obj || typeof obj !== "object") return String(obj);
 
   return Object.entries(obj)
-    .filter(
-      ([key, value]) => value !== null && value !== undefined && key !== "id"
-    )
+    .filter(([key, value]) => value !== null && value !== undefined && key !== "id")
     .map(([key, value]) => {
       const formattedKey = key
         .replace(/([A-Z])/g, " $1")
@@ -445,9 +408,7 @@ const formatObjectAsMarkdown = (obj: any): string => {
   if (!obj || typeof obj !== "object") return String(obj);
 
   return Object.entries(obj)
-    .filter(
-      ([key, value]) => value !== null && value !== undefined && key !== "id"
-    )
+    .filter(([key, value]) => value !== null && value !== undefined && key !== "id")
     .map(([key, value]) => {
       const formattedKey = key
         .replace(/([A-Z])/g, " $1")
@@ -463,29 +424,17 @@ const formatObjectAsMarkdown = (obj: any): string => {
 // Membership Agreement formatting - Complete document with all static and dynamic content
 const formatMembershipAgreementAsText = (data: any): string => {
   const formData = data.formData || {};
-  const cooperativeName =
-    data.cooperativeName || formData.cooperativeName || "the cooperative";
-  let content = "";
-
+  let content = `MEMBERSHIP AGREEMENT\n====================\n\n`;
+  
   // Section 1: Who We Are
   content += `1. WHO WE ARE\n-------------\n\n`;
-  content += `Cooperative Name: ${
-    formData.cooperativeName || "[Enter cooperative name]"
-  }\n`;
-  content += `Date Established: ${
-    formData.dateEstablished || "[Enter date]"
-  }\n\n`;
-
-  content += `Our Purpose:\n${
-    formData.purpose ||
-    "[Write 1-2 sentences about what your cooperative does and why it exists]"
-  }\n\n`;
-
-  content += `Our Core Values:\n${
-    formData.coreValues ||
-    "[List 3-5 values that guide everything you do. Examples: mutual care, creative sustainability, economic justice, collective liberation]"
-  }\n\n`;
-
+  content += `Cooperative Name: ${formData.cooperativeName || "[Enter cooperative name]"}\n`;
+  content += `Date Established: ${formData.dateEstablished || "[Enter date]"}\n\n`;
+  
+  content += `Our Purpose:\n${formData.purpose || "[Write 1-2 sentences about what your cooperative does and why it exists]"}\n\n`;
+  
+  content += `Our Core Values:\n${formData.coreValues || "[List 3-5 values that guide everything you do. Examples: mutual care, creative sustainability, economic justice, collective liberation]"}\n\n`;
+  
   content += `Current Members:\n`;
   if (formData.members && formData.members.length > 0) {
     formData.members.forEach((member: any, index: number) => {
@@ -499,151 +448,98 @@ const formatMembershipAgreementAsText = (data: any): string => {
     content += `1. [Member Name] ([Email]) - Joined: [Date] - Role: [Optional Role]\n`;
   }
   content += `\n`;
-
+  
   // Section 2: Membership
   content += `2. MEMBERSHIP\n-------------\n\n`;
-
+  
   content += `Who Can Be a Member:\nAny person who:\n\n`;
-  content += `${
-    formData.memberRequirements ||
-    "Shares our values and purpose\nContributes labour to the cooperative (by doing actual work, not just investing money)\nCommits to collective decision-making\nParticipates in governance responsibilities"
-  }\n\n`;
-
+  content += `${formData.memberRequirements || "Shares our values and purpose\nContributes labour to the cooperative (by doing actual work, not just investing money)\nCommits to collective decision-making\nParticipates in governance responsibilities"}\n\n`;
+  
   content += `Becoming a Member:\n`;
   content += `New members join through a consent process, which means existing members must agree that adding this person won't harm the cooperative.\n\n`;
-  content += `1. Trial period of ${
-    formData.trialPeriodMonths || 3
-  } months working together\n`;
+  content += `1. Trial period of ${formData.trialPeriodMonths || 3} months working together\n`;
   content += `2. Values alignment conversation\n`;
-  content += `3. Optional - Equal buy-in contribution of $${
-    formData.buyInAmount || "[amount]"
-  } (can be paid over time or waived based on need)\n\n`;
-
+  content += `3. Consent decision by current members\n`;
+  content += `4. Optional - Equal buy-in contribution of $${formData.buyInAmount || "[amount]"} (can be paid over time or waived based on need)\n\n`;
+  
   content += `Leaving the Cooperative:\n`;
-  content += `Members can leave anytime with ${
-    formData.noticeDays || 30
-  } days notice. ${cooperativeName} will:\n\n`;
-  content += `• Pay out their share of any surplus within ${
-    formData.surplusPayoutDays || 30
-  } days\n`;
-  content += `• Return their buy-in contribution within ${
-    formData.buyInReturnDays || 90
-  } days\n`;
+  content += `Members can leave anytime with ${formData.noticeDays || 30} days notice. The cooperative will:\n\n`;
+  content += `• Pay out their share of any surplus within ${formData.surplusPayoutDays || 30} days\n`;
+  content += `• Return their buy-in contribution within ${formData.buyInReturnDays || 90} days\n`;
   content += `• Maintain respectful ongoing relationships when possible\n\n`;
-
+  
   // Section 3: How We Make Decisions
   content += `3. HOW WE MAKE DECISIONS\n------------------------\n\n`;
-
-  content += `Primary Decision Framework: ${
-    data.decisionFrameworkName ||
-    "Consent-Based - No one objects strongly enough to block"
-  }\n\n`;
-
-  const frameworkDetails = data.decisionFrameworkDetails || {};
-  if (frameworkDetails.practicalDescription) {
-    content += `${frameworkDetails.practicalDescription}\n\n`;
-  } else {
-    content += `We use consent, not consensus. This means we move forward when no one has a principled objection that would harm our organization. An objection must explain how the proposal would contradict our values or threaten our sustainability.\n\n`;
-  }
-
-  content += `Day-to-Day Decisions:\nDecisions under $${
-    formData.dayToDayLimit || 100
-  } can be made by any member. Just tell others what you did at the next meeting.\n\n`;
-
-  content += `Regular Decisions:\nDecisions between $${
-    formData.regularDecisionMin || 100
-  } and $${
-    formData.regularDecisionMax || 1000
-  } need consent from members present at a meeting (minimum 2 members).\n\n`;
-
+  content += `Consent-Based Decisions:\nWe use consent, not consensus. This means we move forward when no one has a principled objection that would harm the cooperative. An objection must explain how the proposal would contradict our values or threaten our sustainability.\n\n`;
+  
+  content += `Day-to-Day Decisions:\nDecisions under $${formData.dayToDayLimit || 100} can be made by any member. Just tell others what you did at the next meeting.\n\n`;
+  
+  content += `Regular Decisions:\nDecisions between $${formData.regularDecisionMin || 100} and $${formData.regularDecisionMax || 1000} need consent from members present at a meeting (minimum 2 members).\n\n`;
+  
   content += `Major Decisions:\nThese require consent from all members:\n`;
   content += `• Adding or removing members\n`;
   content += `• Changing this agreement\n`;
   content += `• Taking on debt over $${formData.majorDebtThreshold || 5000}\n`;
   content += `• Fundamental changes to our purpose or structure\n`;
-  content += `• Dissolution of ${cooperativeName}\n\n`;
-
+  content += `• Dissolution of the cooperative\n\n`;
+  
   content += `Meeting Structure:\n`;
-  content += `• Regular meetings happen ${
-    formData.meetingFrequency || "weekly"
-  }\n`;
-  content += `• Emergency meetings need ${
-    formData.emergencyNoticeHours || 24
-  } hours notice\n`;
+  content += `• Regular meetings happen ${formData.meetingFrequency || "weekly"}\n`;
+  content += `• Emergency meetings need ${formData.emergencyNoticeHours || 24} hours notice\n`;
   content += `• We rotate who facilitates meetings\n`;
   content += `• Decisions and reasoning get documented in shared notes\n\n`;
-
+  
   // Section 4: Money and Labour
   content += `4. MONEY AND LABOUR\n-------------------\n\n`;
-  content += `Equal Ownership:\nEach member owns an equal share of ${cooperativeName}, regardless of hours worked or tenure.\n\n`;
-
+  content += `Equal Ownership:\nEach member owns an equal share of the cooperative, regardless of hours worked or tenure.\n\n`;
+  
   content += `Paying Ourselves:\n`;
   const payPolicy = formData.payPolicy || "equal-pay";
-  const payPolicyName = payPolicy
-    .replace("-", " ")
-    .replace(/\b\w/g, (l: string) => l.toUpperCase());
-  content += `Pay Policy: ${data.payPolicyName || payPolicyName}\n\n`;
-
-  if (payPolicy === "equal-pay") {
+  const payPolicyName = payPolicy.replace('-', ' ').replace(/\b\w/g, (l: string) => l.toUpperCase());
+  content += `Pay Policy: ${payPolicyName}\n\n`;
+  
+  if (payPolicy === 'equal-pay') {
     content += `All members receive equal compensation regardless of role or hours worked.\n`;
-    if (formData.baseRate)
-      content += `• Base rate: $${formData.baseRate}/hour for all members\n`;
-    if (formData.monthlyDraw)
-      content += `• Equal monthly draw of $${formData.monthlyDraw} per member\n`;
-  } else if (payPolicy === "hours-weighted") {
+    if (formData.baseRate) content += `• Base rate: $${formData.baseRate}/hour for all members\n`;
+    if (formData.monthlyDraw) content += `• Equal monthly draw of $${formData.monthlyDraw} per member\n`;
+  } else if (payPolicy === 'hours-weighted') {
     content += `Compensation is proportional to hours worked by each member.\n`;
     content += `• Hourly rate: $${formData.hourlyRate || 25}/hour\n`;
     content += `• Members track their hours and are paid accordingly\n`;
     content += `• Minimum hours commitment may apply\n`;
-  } else if (payPolicy === "needs-weighted") {
+  } else if (payPolicy === 'needs-weighted') {
     content += `Compensation is allocated based on each member's individual financial needs.\n`;
     content += `• Members declare their minimum monthly needs\n`;
     content += `• Available payroll is distributed proportionally to cover needs\n`;
     content += `• Regular needs assessment and adjustment process\n`;
-    content += `• Minimum guaranteed amount: $${
-      formData.minGuaranteedPay || 1000
-    }/month\n`;
+    content += `• Minimum guaranteed amount: $${formData.minGuaranteedPay || 1000}/month\n`;
   }
-
+  
   content += `\nPayment Schedule:\n`;
-  content += `• Paid on the ${
-    data.paymentDayLabel || formData.paymentDay || 15
-  } of each month\n`;
-  content += `• Surplus (profit) distributed equally every ${
-    formData.surplusFrequency || "quarter"
-  }\n\n`;
-
+  content += `• Paid on the ${formData.paymentDay || 15} of each month\n`;
+  content += `• Surplus (profit) distributed equally every ${formData.surplusFrequency || "quarter"}\n\n`;
+  
   content += `Work Expectations:\n`;
-  content += `• Target hours per week: ${
-    formData.targetHours || 40
-  } (flexible based on capacity)\n`;
+  content += `• Target hours per week: ${formData.targetHours || 40} (flexible based on capacity)\n`;
   content += `• We explicitly reject crunch culture\n`;
   content += `• Members communicate their capacity openly\n`;
   content += `• We adjust workload collectively when someone needs reduced hours\n\n`;
-
+  
   content += `Financial Transparency:\n`;
   content += `• All members can access all financial records anytime\n`;
   content += `• Monthly financial check-ins at meetings\n`;
   content += `• Quarterly reviews of our runway (how many months we can operate)\n\n`;
-
+  
   // Section 5: Roles and Responsibilities
   content += `5. ROLES AND RESPONSIBILITIES\n-----------------------------\n\n`;
   content += `Rotating Roles:\n`;
-  content += `We rotate operational roles every ${
-    formData.roleRotationMonths || 6
-  } months. Current roles include:\n\n`;
-  content += `${
-    formData.rotatingRoles ||
-    "Financial coordinator (handles bookkeeping, not financial decisions)\nMeeting facilitator\nExternal communications\nOthers"
-  }\n\n`;
-
+  content += `We rotate operational roles every ${formData.roleRotationMonths || 6} months. Current roles include:\n\n`;
+  content += `${formData.rotatingRoles || "Financial coordinator (handles bookkeeping, not financial decisions)\nMeeting facilitator\nExternal communications\nOthers"}\n\n`;
+  
   content += `Shared Responsibilities:\n`;
   content += `All members participate in:\n\n`;
-  content += `${
-    formData.sharedResponsibilities ||
-    "Governance and decision-making\nStrategic planning\nMutual support and care"
-  }\n\n`;
-
+  content += `${formData.sharedResponsibilities || "Governance and decision-making\nStrategic planning\nMutual support and care"}\n\n`;
+  
   // Section 6: Conflict and Care
   content += `6. CONFLICT AND CARE\n--------------------\n\n`;
   content += `When Conflict Happens:\n`;
@@ -651,26 +547,20 @@ const formatMembershipAgreementAsText = (data: any): string => {
   content += `2. Mediation with another member\n`;
   content += `3. Full group discussion with structured process\n`;
   content += `4. External mediation if needed\n\n`;
-
+  
   content += `Care Commitments:\n`;
   content += `• We check in about capacity and wellbeing regularly\n`;
   content += `• We honour diverse access needs\n`;
   content += `• We maintain flexibility for life circumstances\n`;
   content += `• We contribute to mutual aid when members face hardship\n\n`;
-
+  
   // Section 7: Changing This Agreement
   content += `7. CHANGING THIS AGREEMENT\n--------------------------\n\n`;
-  const frameworkLabel =
-    data.decisionFrameworkLabel || "consent-based decision";
-  const structuralReq =
-    data.structuralChangeRequirement || "full member consent";
-  content += `This is a living document. We review it every ${
-    formData.reviewFrequency || "year"
-  } and update it through our ${frameworkLabel} process. Small clarifications can happen anytime; structural changes need ${structuralReq}.\n\n`;
-
+  content += `This is a living document. We review it every ${formData.reviewFrequency || "year"} and update it through our consent process. Small clarifications can happen anytime; structural changes need full member consent.\n\n`;
+  
   // Section 8: If We Need to Close
   content += `8. IF WE NEED TO CLOSE\n----------------------\n\n`;
-  content += `If ${cooperativeName} dissolves:\n`;
+  content += `If the cooperative dissolves:\n`;
   content += `1. Pay all debts and obligations\n`;
   content += `2. Return member contributions\n`;
   content += `3. Distribute remaining assets equally among members\n`;
@@ -678,58 +568,30 @@ const formatMembershipAgreementAsText = (data: any): string => {
     content += `4. Or donate remaining assets to ${formData.assetDonationTarget}\n`;
   }
   content += `\n`;
-
-  // Section 9: Legal Registration
-  content += `9. LEGAL REGISTRATION\n---------------------\n\n`;
-
-  if (formData.isLegallyRegistered) {
-    content += `Legal Structure: ${
-      formData.legalStructure ||
-      "[Cooperative corporation, LLC, partnership, etc.]"
-    }\n`;
-    content += `Registered in: ${
-      formData.registeredLocation || "[State/Province]"
-    }\n`;
-    content += `Fiscal Year-End: ${formData.fiscalYearEndMonth || "December"} ${
-      formData.fiscalYearEndDay || 31
-    }\n\n`;
-    content += `This agreement works alongside but doesn't replace our legal incorporation documents. Where they conflict, we follow the law but work to align our legal structure with our values.\n\n`;
-  } else {
-    const thisCooperative =
-      cooperativeName === "the cooperative"
-        ? "This cooperative"
-        : cooperativeName;
-    content += `${thisCooperative} operates as an informal collective. If we decide to register legally in the future, we'll update this section with our legal structure details.\n\n`;
-  }
-
+  
+  // Section 9: Legal Bits
+  content += `9. LEGAL BITS\n-------------\n\n`;
+  content += `Legal Structure: ${formData.legalStructure || "[Cooperative corporation, LLC, partnership, etc.]"}\n`;
+  content += `Registered in: ${formData.registeredLocation || "[State/Province]"}\n`;
+  content += `Fiscal Year-End: ${formData.fiscalYearEndMonth || "December"} ${formData.fiscalYearEndDay || 31}\n\n`;
+  content += `This agreement works alongside but doesn't replace our legal incorporation documents. Where they conflict, we follow the law but work to align our legal structure with our values.\n\n`;
+  
   return content;
 };
 
 const formatMembershipAgreementAsMarkdown = (data: any): string => {
   const formData = data.formData || {};
-  const cooperativeName =
-    data.cooperativeName || formData.cooperativeName || "the cooperative";
-  let content = "";
-
+  let content = `# Membership Agreement\n\n`;
+  
   // Section 1: Who We Are
   content += `## 1. Who We Are\n\n`;
-  content += `**Cooperative Name:** ${
-    formData.cooperativeName || "[Enter cooperative name]"
-  }  \n`;
-  content += `**Date Established:** ${
-    formData.dateEstablished || "[Enter date]"
-  }  \n\n`;
-
-  content += `**Our Purpose:**  \n${
-    formData.purpose ||
-    "[Write 1-2 sentences about what your cooperative does and why it exists]"
-  }\n\n`;
-
-  content += `**Our Core Values:**  \n${
-    formData.coreValues ||
-    "[List 3-5 values that guide everything you do. Examples: mutual care, creative sustainability, economic justice, collective liberation]"
-  }\n\n`;
-
+  content += `**Cooperative Name:** ${formData.cooperativeName || "[Enter cooperative name]"}  \n`;
+  content += `**Date Established:** ${formData.dateEstablished || "[Enter date]"}  \n\n`;
+  
+  content += `**Our Purpose:**  \n${formData.purpose || "[Write 1-2 sentences about what your cooperative does and why it exists]"}\n\n`;
+  
+  content += `**Our Core Values:**  \n${formData.coreValues || "[List 3-5 values that guide everything you do. Examples: mutual care, creative sustainability, economic justice, collective liberation]"}\n\n`;
+  
   content += `**Current Members:**\n\n`;
   if (formData.members && formData.members.length > 0) {
     formData.members.forEach((member: any, index: number) => {
@@ -743,158 +605,103 @@ const formatMembershipAgreementAsMarkdown = (data: any): string => {
     content += `1. **[Member Name]** ([Email]) - *Joined: [Date]* - *Role: [Optional Role]*\n`;
   }
   content += `\n`;
-
+  
   // Section 2: Membership
   content += `## 2. Membership\n\n`;
-
+  
   content += `### Who Can Be a Member\n\nAny person who:\n\n`;
-  content += `${
-    formData.memberRequirements ||
-    "Shares our values and purpose  \nContributes labour to the cooperative (by doing actual work, not just investing money)  \nCommits to collective decision-making  \nParticipates in governance responsibilities"
-  }\n\n`;
-
+  content += `${formData.memberRequirements || "Shares our values and purpose  \nContributes labour to the cooperative (by doing actual work, not just investing money)  \nCommits to collective decision-making  \nParticipates in governance responsibilities"}\n\n`;
+  
   content += `### Becoming a Member\n\n`;
   content += `New members join through a consent process, which means existing members must agree that adding this person won't harm the cooperative.\n\n`;
-  content += `1. Trial period of **${
-    formData.trialPeriodMonths || 3
-  } months** working together\n`;
+  content += `1. Trial period of **${formData.trialPeriodMonths || 3} months** working together\n`;
   content += `2. Values alignment conversation\n`;
-  content += `3. Optional - Equal buy-in contribution of **$${
-    formData.buyInAmount || "[amount]"
-  }** (can be paid over time or waived based on need)\n\n`;
-
+  content += `3. Consent decision by current members\n`;
+  content += `4. Optional - Equal buy-in contribution of **$${formData.buyInAmount || "[amount]"}** (can be paid over time or waived based on need)\n\n`;
+  
   content += `### Leaving the Cooperative\n\n`;
-  content += `Members can leave anytime with **${
-    formData.noticeDays || 30
-  } days** notice. ${cooperativeName} will:\n\n`;
-  content += `- Pay out their share of any surplus within **${
-    formData.surplusPayoutDays || 30
-  } days**\n`;
-  content += `- Return their buy-in contribution within **${
-    formData.buyInReturnDays || 90
-  } days**\n`;
+  content += `Members can leave anytime with **${formData.noticeDays || 30} days** notice. The cooperative will:\n\n`;
+  content += `- Pay out their share of any surplus within **${formData.surplusPayoutDays || 30} days**\n`;
+  content += `- Return their buy-in contribution within **${formData.buyInReturnDays || 90} days**\n`;
   content += `- Maintain respectful ongoing relationships when possible\n\n`;
-
+  
   // Section 3: How We Make Decisions
   content += `## 3. How We Make Decisions\n\n`;
-
-  content += `### Primary Decision Framework\n\n`;
-  content += `**${
-    data.decisionFrameworkName ||
-    "Consent-Based - No one objects strongly enough to block"
-  }**\n\n`;
-
-  const frameworkDetails = data.decisionFrameworkDetails || {};
-  if (frameworkDetails.practicalDescription) {
-    content += `${frameworkDetails.practicalDescription}\n\n`;
-  } else {
-    content += `We use consent, not consensus. This means we move forward when no one has a principled objection that would harm our organization. An objection must explain how the proposal would contradict our values or threaten our sustainability.\n\n`;
-  }
-
+  content += `### Consent-Based Decisions\n\n`;
+  content += `We use consent, not consensus. This means we move forward when no one has a principled objection that would harm the cooperative. An objection must explain how the proposal would contradict our values or threaten our sustainability.\n\n`;
+  
   content += `### Day-to-Day Decisions\n\n`;
-  content += `Decisions under **$${
-    formData.dayToDayLimit || 100
-  }** can be made by any member. Just tell others what you did at the next meeting.\n\n`;
-
+  content += `Decisions under **$${formData.dayToDayLimit || 100}** can be made by any member. Just tell others what you did at the next meeting.\n\n`;
+  
   content += `### Regular Decisions\n\n`;
-  content += `Decisions between **$${
-    formData.regularDecisionMin || 100
-  }** and **$${
-    formData.regularDecisionMax || 1000
-  }** need consent from members present at a meeting (minimum 2 members).\n\n`;
-
+  content += `Decisions between **$${formData.regularDecisionMin || 100}** and **$${formData.regularDecisionMax || 1000}** need consent from members present at a meeting (minimum 2 members).\n\n`;
+  
   content += `### Major Decisions\n\n`;
   content += `These require consent from all members:\n\n`;
   content += `- Adding or removing members\n`;
   content += `- Changing this agreement\n`;
-  content += `- Taking on debt over **$${
-    formData.majorDebtThreshold || 5000
-  }**\n`;
+  content += `- Taking on debt over **$${formData.majorDebtThreshold || 5000}**\n`;
   content += `- Fundamental changes to our purpose or structure\n`;
-  content += `- Dissolution of ${cooperativeName}\n\n`;
-
+  content += `- Dissolution of the cooperative\n\n`;
+  
   content += `### Meeting Structure\n\n`;
-  content += `- Regular meetings happen **${
-    formData.meetingFrequency || "weekly"
-  }**\n`;
-  content += `- Emergency meetings need **${
-    formData.emergencyNoticeHours || 24
-  } hours** notice\n`;
+  content += `- Regular meetings happen **${formData.meetingFrequency || "weekly"}**\n`;
+  content += `- Emergency meetings need **${formData.emergencyNoticeHours || 24} hours** notice\n`;
   content += `- We rotate who facilitates meetings\n`;
   content += `- Decisions and reasoning get documented in shared notes\n\n`;
-
+  
   // Section 4: Money and Labour
   content += `## 4. Money and Labour\n\n`;
   content += `### Equal Ownership\n\n`;
-  content += `Each member owns an equal share of ${cooperativeName}, regardless of hours worked or tenure.\n\n`;
-
+  content += `Each member owns an equal share of the cooperative, regardless of hours worked or tenure.\n\n`;
+  
   content += `### Paying Ourselves\n\n`;
   const payPolicy = formData.payPolicy || "equal-pay";
-  const payPolicyName = payPolicy
-    .replace("-", " ")
-    .replace(/\b\w/g, (l: string) => l.toUpperCase());
-  content += `**Pay Policy:** ${data.payPolicyName || payPolicyName}\n\n`;
-
-  if (payPolicy === "equal-pay") {
+  const payPolicyName = payPolicy.replace('-', ' ').replace(/\b\w/g, (l: string) => l.toUpperCase());
+  content += `**Pay Policy:** ${payPolicyName}\n\n`;
+  
+  if (payPolicy === 'equal-pay') {
     content += `All members receive equal compensation regardless of role or hours worked.\n\n`;
-    if (formData.baseRate)
-      content += `- **Base rate:** $${formData.baseRate}/hour for all members\n`;
-    if (formData.monthlyDraw)
-      content += `- **Equal monthly draw:** $${formData.monthlyDraw} per member\n`;
-  } else if (payPolicy === "hours-weighted") {
+    if (formData.baseRate) content += `- **Base rate:** $${formData.baseRate}/hour for all members\n`;
+    if (formData.monthlyDraw) content += `- **Equal monthly draw:** $${formData.monthlyDraw} per member\n`;
+  } else if (payPolicy === 'hours-weighted') {
     content += `Compensation is proportional to hours worked by each member.\n\n`;
     content += `- **Hourly rate:** $${formData.hourlyRate || 25}/hour\n`;
     content += `- Members track their hours and are paid accordingly\n`;
     content += `- Minimum hours commitment may apply\n`;
-  } else if (payPolicy === "needs-weighted") {
+  } else if (payPolicy === 'needs-weighted') {
     content += `Compensation is allocated based on each member's individual financial needs.\n\n`;
     content += `- Members declare their minimum monthly needs\n`;
     content += `- Available payroll is distributed proportionally to cover needs\n`;
     content += `- Regular needs assessment and adjustment process\n`;
-    content += `- **Minimum guaranteed amount:** $${
-      formData.minGuaranteedPay || 1000
-    }/month\n`;
+    content += `- **Minimum guaranteed amount:** $${formData.minGuaranteedPay || 1000}/month\n`;
   }
-
+  
   content += `\n**Payment Schedule:**\n\n`;
-  content += `- Paid on the **${
-    data.paymentDayLabel || formData.paymentDay || 15
-  }** of each month\n`;
-  content += `- Surplus (profit) distributed equally every **${
-    formData.surplusFrequency || "quarter"
-  }**\n\n`;
-
+  content += `- Paid on the **${formData.paymentDay || 15}** of each month\n`;
+  content += `- Surplus (profit) distributed equally every **${formData.surplusFrequency || "quarter"}**\n\n`;
+  
   content += `### Work Expectations\n\n`;
-  content += `- Target hours per week: **${
-    formData.targetHours || 40
-  }** (flexible based on capacity)\n`;
+  content += `- Target hours per week: **${formData.targetHours || 40}** (flexible based on capacity)\n`;
   content += `- We explicitly reject crunch culture\n`;
   content += `- Members communicate their capacity openly\n`;
   content += `- We adjust workload collectively when someone needs reduced hours\n\n`;
-
+  
   content += `### Financial Transparency\n\n`;
   content += `- All members can access all financial records anytime\n`;
   content += `- Monthly financial check-ins at meetings\n`;
   content += `- Quarterly reviews of our runway (how many months we can operate)\n\n`;
-
+  
   // Section 5: Roles and Responsibilities
   content += `## 5. Roles and Responsibilities\n\n`;
   content += `### Rotating Roles\n\n`;
-  content += `We rotate operational roles every **${
-    formData.roleRotationMonths || 6
-  } months**. Current roles include:\n\n`;
-  content += `${
-    formData.rotatingRoles ||
-    "Financial coordinator (handles bookkeeping, not financial decisions)  \nMeeting facilitator  \nExternal communications  \nOthers"
-  }\n\n`;
-
+  content += `We rotate operational roles every **${formData.roleRotationMonths || 6} months**. Current roles include:\n\n`;
+  content += `${formData.rotatingRoles || "Financial coordinator (handles bookkeeping, not financial decisions)  \nMeeting facilitator  \nExternal communications  \nOthers"}\n\n`;
+  
   content += `### Shared Responsibilities\n\n`;
   content += `All members participate in:\n\n`;
-  content += `${
-    formData.sharedResponsibilities ||
-    "Governance and decision-making  \nStrategic planning  \nMutual support and care"
-  }\n\n`;
-
+  content += `${formData.sharedResponsibilities || "Governance and decision-making  \nStrategic planning  \nMutual support and care"}\n\n`;
+  
   // Section 6: Conflict and Care
   content += `## 6. Conflict and Care\n\n`;
   content += `### When Conflict Happens\n\n`;
@@ -902,26 +709,20 @@ const formatMembershipAgreementAsMarkdown = (data: any): string => {
   content += `2. Mediation with another member\n`;
   content += `3. Full group discussion with structured process\n`;
   content += `4. External mediation if needed\n\n`;
-
+  
   content += `### Care Commitments\n\n`;
   content += `- We check in about capacity and wellbeing regularly\n`;
   content += `- We honour diverse access needs\n`;
   content += `- We maintain flexibility for life circumstances\n`;
   content += `- We contribute to mutual aid when members face hardship\n\n`;
-
+  
   // Section 7: Changing This Agreement
   content += `## 7. Changing This Agreement\n\n`;
-  const frameworkLabel =
-    data.decisionFrameworkLabel || "consent-based decision";
-  const structuralReq =
-    data.structuralChangeRequirement || "full member consent";
-  content += `This is a living document. We review it every **${
-    formData.reviewFrequency || "year"
-  }** and update it through our ${frameworkLabel} process. Small clarifications can happen anytime; structural changes need ${structuralReq}.\n\n`;
-
+  content += `This is a living document. We review it every **${formData.reviewFrequency || "year"}** and update it through our consent process. Small clarifications can happen anytime; structural changes need full member consent.\n\n`;
+  
   // Section 8: If We Need to Close
   content += `## 8. If We Need to Close\n\n`;
-  content += `If ${cooperativeName} dissolves:\n\n`;
+  content += `If the cooperative dissolves:\n\n`;
   content += `1. Pay all debts and obligations\n`;
   content += `2. Return member contributions\n`;
   content += `3. Distribute remaining assets equally among members\n`;
@@ -929,503 +730,260 @@ const formatMembershipAgreementAsMarkdown = (data: any): string => {
     content += `4. Or donate remaining assets to **${formData.assetDonationTarget}**\n`;
   }
   content += `\n`;
-
-  // Section 9: Legal Registration
-  content += `## 9. Legal Registration\n\n`;
-
-  if (formData.isLegallyRegistered) {
-    content += `- **Legal Structure:** ${
-      formData.legalStructure ||
-      "[Cooperative corporation, LLC, partnership, etc.]"
-    }\n`;
-    content += `- **Registered in:** ${
-      formData.registeredLocation || "[State/Province]"
-    }\n`;
-    content += `- **Fiscal Year-End:** ${
-      formData.fiscalYearEndMonth || "December"
-    } ${formData.fiscalYearEndDay || 31}\n\n`;
-    content += `This agreement works alongside but doesn't replace our legal incorporation documents. Where they conflict, we follow the law but work to align our legal structure with our values.\n\n`;
-  } else {
-    const thisCooperative =
-      cooperativeName === "the cooperative"
-        ? "This cooperative"
-        : cooperativeName;
-    content += `${thisCooperative} operates as an informal collective. If we decide to register legally in the future, we'll update this section with our legal structure details.\n\n`;
-  }
-
+  
+  // Section 9: Legal Bits
+  content += `## 9. Legal Bits\n\n`;
+  content += `- **Legal Structure:** ${formData.legalStructure || "[Cooperative corporation, LLC, partnership, etc.]"}\n`;
+  content += `- **Registered in:** ${formData.registeredLocation || "[State/Province]"}\n`;
+  content += `- **Fiscal Year-End:** ${formData.fiscalYearEndMonth || "December"} ${formData.fiscalYearEndDay || 31}\n\n`;
+  content += `This agreement works alongside but doesn't replace our legal incorporation documents. Where they conflict, we follow the law but work to align our legal structure with our values.\n\n`;
+  
   return content;
 };
 
 // Conflict Resolution Framework formatting - Complete document with all static and dynamic content
 const formatConflictResolutionAsText = (data: any): string => {
   const formData = data.formData || {};
-  const cooperativeName = formData.orgName || "[Cooperative Name]";
-  let content = `${cooperativeName.toUpperCase()} CONFLICT RESOLUTION POLICY\n${"=".repeat(
-    cooperativeName.length + 30
-  )}\n\n`;
-
-  content += `Framework Created: ${
-    formData.createdDate || new Date().toISOString().split("T")[0]
-  }\n`;
-  if (formData.reviewDate) {
-    content += `Next Review: ${formData.reviewDate}\n`;
-  }
-  content += `\n`;
-
-  // Core Values section (if enabled)
+  let content = `CONFLICT RESOLUTION FRAMEWORK\n=============================\n\n`;
+  
+  // Section 1: Organization Information
+  content += `1. ORGANIZATION INFORMATION\n---------------------------\n\n`;
+  content += `Organization Name: ${formData.orgName || '[Enter your organization name]'}\n`;
+  content += `Organization Type: ${formData.orgType || '[Select organization type]'}\n`;
+  content += `Number of Members/Staff: ${formData.memberCount || '[e.g., 5]'}\n\n`;
+  
+  // Section 2: Guiding Principles & Values
   if (data.sectionsEnabled?.values !== false) {
-    content += `OUR VALUES\n----------\n\n`;
-    content += `This conflict resolution framework is guided by our core values:\n\n`;
-
-    if (formData.coreValuesList && formData.coreValuesList.length > 0) {
-      formData.coreValuesList.forEach((value: string) => {
-        content += `• ${value}\n`;
+    content += `2. GUIDING PRINCIPLES & VALUES\n------------------------------\n\n`;
+    
+    content += `Our Core Values:\n`;
+    if (formData.coreValues && Array.isArray(formData.coreValues) && formData.coreValues.length > 0) {
+      formData.coreValues.forEach((value: string, index: number) => {
+        content += `${index + 1}. ${value || '[Value not specified]'}\n`;
       });
-      content += `\n`;
-    }
-
-    if (formData.customValues) {
-      content += `${formData.customValues}\n\n`;
-    }
-  }
-
-  // Resolution Philosophy
-  const approachDescriptions: { [key: string]: string } = {
-    restorative:
-      "We use a restorative/loving justice approach that focuses on healing, understanding root causes, and repairing relationships rather than punishment.",
-    mediation:
-      "We use a mediation-first approach where neutral third-party facilitators help parties dialogue and find solutions.",
-    progressive:
-      "We use progressive discipline with clear escalation steps and defined consequences for violations.",
-    hybrid:
-      "We use a hybrid approach that combines multiple methods based on the type and severity of conflict.",
-  };
-
-  if (formData.approach && approachDescriptions[formData.approach]) {
-    content += `OUR APPROACH\n------------\n\n`;
-    content += `${approachDescriptions[formData.approach]}\n\n`;
-    content += `We do our best to resolve conflicts at the lowest possible escalation step (direct resolution), but agree to escalate conflicts (to assisted resolution) if they are not resolved.\n\n`;
-  }
-
-  // Reflection Process (if enabled)
-  if (data.sectionsEnabled?.reflection !== false) {
-    content += `REFLECTION\n----------\n\n`;
-    content += `Before engaging in direct resolution, we encourage taking time for reflection:\n\n`;
-    content += `1. Set aside time to think through what happened. What was the other person's behaviour? How did it affect you? Distinguish other people's actions from your feelings about them.\n`;
-    content += `2. Consider uncertainties or misunderstandings that may have occurred.\n`;
-    content += `3. Distinguish disagreement from personal hostility. Disagreement and dissent are part of healthy discussion. Hostility is not.\n`;
-    content += `4. Use your personal support system (friends, family, therapist, etc.) to work through and clarify your perspective.\n`;
-    content += `5. Ask yourself what part you played, how you could have behaved differently, and what your needs are.\n\n`;
-
-    if (formData.customReflectionPrompts) {
-      content += `Additional Reflection Prompts:\n${formData.customReflectionPrompts}\n\n`;
-    }
-
-    const reflectionTiming =
-      formData.reflectionPeriod || "Before any escalation";
-    content += `Reflection Timing: ${reflectionTiming}\n\n`;
-  }
-
-  // Direct Resolution (if enabled)
-  if (data.sectionsEnabled?.directResolution !== false) {
-    content += `DIRECT RESOLUTION\n-----------------\n\n`;
-    content += `A direct resolution process occurs when individuals communicate their concerns and work together to resolve disputes without filing an informal or formal complaint.\n\n`;
-
-    content += `Have a Conversation\n-------------------\n\n`;
-    content += `When there is a disagreement, the involved people should first communicate with each other about their concerns.\n\n`;
-
-    content += `1. Choose a time and place to meet that is private and agreeable to both.\n`;
-    content += `2. Allow reasonable time for the conversation.\n`;
-    content += `3. The point is mutual understanding, not determining who is right or wrong. This requires patience and willingness to listen without immediately dismissing the other person's perspective.\n`;
-    content += `4. Express thoughts and feelings directly without belittling or dismissing. Use "I" statements and active listening techniques.\n`;
-    content += `5. Communicate your wants and needs and make offers and requests.\n`;
-    content += `6. Learn for the future. Ask questions like, "If what I/you said or did came across that way, what can we do to prevent this from happening in the future?"\n`;
-
-    if (formData.documentDirectResolution) {
-      content += `7. Keep a written record of the resolution agreed to by both parties.\n\n`;
     } else {
-      content += `\n`;
+      content += `[List your organization's core values - these guide how you approach conflict]\n`;
     }
-
-    // Communication Channels
-    if (formData.channelsList && formData.channelsList.length > 0) {
-      content += `Escalating Communication Bandwidth\n-----------------------------------\n\n`;
-      content += `Whenever a misunderstanding or conflict arises, escalate the bandwidth of the channel:\n\n`;
-      formData.channelsList.forEach((channel: string, index: number) => {
-        content += `${index + 1}. ${channel}\n`;
+    content += `\n`;
+    
+    content += `Conflict Resolution Principles:\n`;
+    if (formData.principles && Array.isArray(formData.principles) && formData.principles.length > 0) {
+      formData.principles.forEach((principle: string, index: number) => {
+        content += `${index + 1}. ${principle || '[Principle not specified]'}\n`;
       });
-      content += `\n`;
+    } else {
+      content += `[List principles that will guide how conflicts are resolved in your organization]\n`;
     }
-
-    if (formData.requireDirectAttempt) {
-      content += `NOTE: Direct resolution must be attempted before escalating to assisted resolution, unless safety concerns prevent this.\n\n`;
-    }
-  }
-
-  // Assisted Resolution
-  content += `ASSISTED RESOLUTION\n-------------------\n\n`;
-  content += `If talking things out doesn't work, you can ask a responsible contact person for help in writing.\n\n`;
-
-  // Responsible Contact People
-  if (formData.receiversList && formData.receiversList.length > 0) {
-    content += `Initial Contact Options:\n`;
-    formData.receiversList.forEach((receiver: string) => {
-      content += `• ${receiver}\n`;
-    });
     content += `\n`;
   }
-
-  // Mediator Structure
-  if (formData.mediatorType) {
-    content += `Mediation/Facilitation Structure: ${formData.mediatorType}\n\n`;
-
+  
+  // Section 3: Prevention & Early Intervention
+  if (data.sectionsEnabled?.prevention !== false) {
+    content += `3. PREVENTION & EARLY INTERVENTION\n----------------------------------\n\n`;
+    
+    content += `Member Involvement in Conflict Resolution:\n`;
+    content += `${formData.memberInvolvement || '[Describe how members participate in conflict resolution processes]'}\n\n`;
+    
+    content += `Communication Guidelines:\n`;
+    content += `${formData.communicationGuidelines || '[Outline communication standards and expectations for healthy dialogue]'}\n\n`;
+  }
+  
+  // Section 4: Reporting & Documentation
+  if (data.sectionsEnabled?.reporting !== false) {
+    content += `4. REPORTING & DOCUMENTATION\n----------------------------\n\n`;
+    
+    content += `How to Report Conflicts:\n`;
+    content += `Conflicts can be reported to:\n`;
+    // Add report receivers based on form data
+    if (data.reportReceivers && Array.isArray(data.reportReceivers)) {
+      data.reportReceivers.forEach((receiver: any) => {
+        if (receiver.checked) {
+          content += `• ${receiver.label}\n`;
+        }
+      });
+    }
+    content += `\n`;
+    
+    content += `Mediator/Facilitator Structure: ${formData.mediatorType || '[Select mediator structure]'}\n`;
     if (formData.supportPeople) {
-      content += `Support People: Parties may bring a trusted person for emotional support during mediation sessions.\n\n`;
+      content += `Support people are allowed in mediation sessions for emotional support.\n`;
     }
-  }
-
-  // Timeline
-  content += `Response Times:\n`;
-  if (formData.initialResponse) {
-    content += `• Initial Response: ${formData.initialResponse}\n`;
-  }
-  if (formData.resolutionTarget) {
-    content += `• Target Resolution: ${formData.resolutionTarget}\n\n`;
-  }
-
-  // Formal Complaints
-  content += `FORMAL COMPLAINTS\n-----------------\n\n`;
-  content += `If assisted resolution efforts do not result in an acceptable outcome within a reasonable timeframe, a formal complaint may be filed in writing.\n\n`;
-
-  // Required Elements
-  if (
-    formData.complaintElementsList &&
-    formData.complaintElementsList.length > 0
-  ) {
-    content += `Written Complaint Requirements:\n`;
-    formData.complaintElementsList.forEach((element: string, index: number) => {
-      content += `${index + 1}. ${element}\n`;
-    });
     content += `\n`;
   }
-
-  // Formal Process Timeline
-  content += `Formal Process Timeline:\n`;
-  if (formData.formalAcknowledgmentTime) {
-    content += `• Acknowledgment: ${formData.formalAcknowledgmentTime}\n`;
+  
+  // Section 5: Process Steps
+  if (data.sectionsEnabled?.process !== false) {
+    content += `5. PROCESS STEPS\n----------------\n\n`;
+    
+    content += `Process Steps:\n`;
+    content += `${formData.processSteps || '[Describe the step-by-step conflict resolution process]'}\n\n`;
+    
+    content += `Escalation Criteria:\n`;
+    content += `${formData.escalationCriteria || '[Define when and how conflicts escalate to higher levels]'}\n\n`;
+    
+    content += `Mediation Process:\n`;
+    content += `${formData.mediation || '[Describe the mediation process and procedures]'}\n\n`;
+    
+    content += `Final Decision Making:\n`;
+    content += `${formData.finalDecision || '[Explain how final decisions are made when mediation does not resolve the conflict]'}\n\n`;
   }
-  if (formData.formalReviewTime) {
-    content += `• Review Completion: ${formData.formalReviewTime}\n\n`;
+  
+  // Section 6: Timeline & Process
+  if (data.sectionsEnabled?.timeline !== false) {
+    content += `6. TIMELINE & PROCESS\n--------------------\n\n`;
+    
+    content += `Initial Response Time: ${formData.initialResponse || '[Select response time]'}\n`;
+    content += `Target Resolution Time: ${formData.resolutionTarget || '[Select target time]'}\n\n`;
   }
-
-  if (formData.requireExternalAdvice) {
-    content += `External Expertise: For complex complaints involving multiple parties or organizational leaders, external legal advice will be sought.\n\n`;
+  
+  // Section 7: Learning & Follow-up
+  if (data.sectionsEnabled?.learning !== false) {
+    content += `7. LEARNING & FOLLOW-UP\n-----------------------\n\n`;
+    
+    content += `Learning and Improvement:\n`;
+    content += `${formData.learning || '[Describe how the organization learns from conflicts and improves processes]'}\n\n`;
   }
-
-  // Settlement Documentation
-  if (formData.requireMinutesOfSettlement) {
-    content += `Reaching Agreement\n------------------\n\n`;
-    content += `Any resolution agreed upon must be documented in "Minutes of Settlement" signed by both parties. These agreements will be kept confidential according to our privacy standards.\n\n`;
+  
+  // Section 8: Emergency Procedures
+  if (data.sectionsEnabled?.emergency !== false) {
+    content += `8. EMERGENCY PROCEDURES\n-----------------------\n\n`;
+    
+    content += `Emergency Procedures:\n`;
+    content += `${formData.emergencyProcedures || '[Outline procedures for urgent or severe conflicts requiring immediate action]'}\n\n`;
   }
-
-  // Consequences and Actions
-  if (formData.actionsList && formData.actionsList.length > 0) {
-    content += `POSSIBLE OUTCOMES\n-----------------\n\n`;
-    content += `Depending on the situation, resolution may include:\n\n`;
-    formData.actionsList.forEach((action: string) => {
-      content += `• ${action}\n`;
-    });
-    content += `\n`;
+  
+  // Section 9: Review & Updates
+  if (data.sectionsEnabled?.review !== false) {
+    content += `9. REVIEW & UPDATES\n-------------------\n\n`;
+    
+    content += `Annual Review Process:\n`;
+    content += `${formData.annualReview || '[Describe how this framework will be reviewed and updated annually]'}\n\n`;
   }
-
-  if (formData.appealProcess) {
-    content += `Appeals Process: Parties may request review of decisions through our appeals process.\n\n`;
-  }
-
-  // Documentation and Privacy
-  if (data.sectionsEnabled?.documentation !== false) {
-    content += `DOCUMENTATION & PRIVACY\n-----------------------\n\n`;
-    if (formData.docLevel) {
-      content += `Documentation Level: ${formData.docLevel}\n\n`;
-    }
-    if (formData.confidentiality) {
-      content += `Confidentiality: ${formData.confidentiality}\n\n`;
-    }
-    if (formData.retention) {
-      content += `Record Retention: ${formData.retention}\n\n`;
-    }
-  }
-
-  // External Resources (if enabled)
-  if (data.sectionsEnabled?.externalResources !== false) {
-    content += `EXTERNAL RESOURCES\n------------------\n\n`;
-    if (formData.includeHumanRights) {
-      content += `Individuals who are not satisfied with the outcome of a harassment or discrimination complaint may file a complaint with the Canadian Human Rights Commission or their provincial human rights tribunal.\n\n`;
-    }
-
-    if (formData.additionalResources) {
-      content += `Additional Resources:\n${formData.additionalResources}\n\n`;
-    }
-  }
-
-  // Implementation
-  content += `POLICY MANAGEMENT\n-----------------\n\n`;
-  if (formData.training) {
-    content += `Training Requirements:\n${formData.training}\n\n`;
-  }
-
-  content += `Review and Updates:\n`;
-  if (formData.reviewSchedule) {
-    content += `This policy will be reviewed ${formData.reviewSchedule.toLowerCase()}.\n\n`;
-  }
-  if (formData.amendments) {
-    content += `Amendment Process: ${formData.amendments}\n\n`;
-  }
-
-  // Acknowledgments
-  if (formData.acknowledgments) {
-    content += `Acknowledgments:\n${formData.acknowledgments}\n\n`;
-  }
-
+  
   return content;
 };
 
 const formatConflictResolutionAsMarkdown = (data: any): string => {
   const formData = data.formData || {};
-  const cooperativeName = formData.orgName || "[Cooperative Name]";
-  let content = `# ${cooperativeName} Conflict Resolution Policy\n\n`;
-
-  content += `*Framework Created: ${
-    formData.createdDate || new Date().toISOString().split("T")[0]
-  }*\n`;
-  if (formData.reviewDate) {
-    content += `*Next Review: ${formData.reviewDate}*\n`;
-  }
-  content += `\n---\n\n`;
-
-  // Core Values section (if enabled)
+  let content = `# Conflict Resolution Framework\n\n`;
+  
+  // Section 1: Organization Information
+  content += `## 1. Organization Information\n\n`;
+  content += `**Organization Name:** ${formData.orgName || '[Enter your organization name]'}  \n`;
+  content += `**Organization Type:** ${formData.orgType || '[Select organization type]'}  \n`;
+  content += `**Number of Members/Staff:** ${formData.memberCount || '[e.g., 5]'}  \n\n`;
+  
+  // Section 2: Guiding Principles & Values
   if (data.sectionsEnabled?.values !== false) {
-    content += `## Our Values\n\n`;
-    content += `This conflict resolution framework is guided by our core values:\n\n`;
-
-    if (formData.coreValuesList && formData.coreValuesList.length > 0) {
-      formData.coreValuesList.forEach((value: string) => {
-        content += `- **${value}**\n`;
+    content += `## 2. Guiding Principles & Values\n\n`;
+    
+    content += `### Our Core Values\n\n`;
+    if (formData.coreValues && Array.isArray(formData.coreValues) && formData.coreValues.length > 0) {
+      formData.coreValues.forEach((value: string, index: number) => {
+        content += `${index + 1}. ${value || '[Value not specified]'}\n`;
       });
-      content += `\n`;
-    }
-
-    if (formData.customValues) {
-      content += `${formData.customValues}\n\n`;
-    }
-  }
-
-  // Resolution Philosophy
-  const approachDescriptions: { [key: string]: string } = {
-    restorative:
-      "We use a **restorative/loving justice** approach that focuses on healing, understanding root causes, and repairing relationships rather than punishment.",
-    mediation:
-      "We use a **mediation-first** approach where neutral third-party facilitators help parties dialogue and find solutions.",
-    progressive:
-      "We use **progressive discipline** with clear escalation steps and defined consequences for violations.",
-    hybrid:
-      "We use a **hybrid approach** that combines multiple methods based on the type and severity of conflict.",
-  };
-
-  if (formData.approach && approachDescriptions[formData.approach]) {
-    content += `## Our Approach\n\n`;
-    content += `${approachDescriptions[formData.approach]}\n\n`;
-    content += `We do our best to resolve conflicts at the lowest possible escalation step (direct resolution), but agree to escalate conflicts (to assisted resolution) if they are not resolved.\n\n`;
-  }
-
-  // Reflection Process (if enabled)
-  if (data.sectionsEnabled?.reflection !== false) {
-    content += `## Reflection\n\n`;
-    content += `Before engaging in direct resolution, we encourage taking time for reflection:\n\n`;
-    content += `1. **Set aside time to think** through what happened. What was the other person's behaviour? How did it affect you? *Distinguish other people's **actions** from your **feelings** about them.*\n`;
-    content += `2. **Consider uncertainties** or misunderstandings that may have occurred.\n`;
-    content += `3. **Distinguish disagreement from personal hostility.** Disagreement and dissent are part of healthy discussion. Hostility is not.\n`;
-    content += `4. **Use your personal support system** (friends, family, therapist, etc.) to work through and clarify your perspective.\n`;
-    content += `5. **Ask yourself** what part you played, how you could have behaved differently, and what your needs are.\n\n`;
-
-    if (formData.customReflectionPrompts) {
-      content += `### Additional Reflection Prompts\n\n`;
-      content += `${formData.customReflectionPrompts}\n\n`;
-    }
-
-    const reflectionTiming =
-      formData.reflectionPeriod || "Before any escalation";
-    content += `**Reflection Timing:** ${reflectionTiming}\n\n`;
-  }
-
-  // Direct Resolution (if enabled)
-  if (data.sectionsEnabled?.directResolution !== false) {
-    content += `## Direct Resolution\n\n`;
-    content += `A *direct resolution* process occurs when individuals communicate their concerns and work together to resolve disputes without filing an informal or formal complaint.\n\n`;
-
-    content += `### Have a Conversation\n\n`;
-    content += `When there is a disagreement, the involved people should first **communicate with each other** about their concerns.\n\n`;
-
-    content += `1. **Choose a time and place** to meet that is private and agreeable to both.\n`;
-    content += `2. **Allow reasonable time** for the conversation.\n`;
-    content += `3. **The point is mutual understanding**, not determining who is right or wrong. This requires patience and willingness to listen without immediately dismissing the other person's perspective.\n`;
-    content += `4. **Express thoughts and feelings directly** without belittling or dismissing. Use "I" statements and active listening techniques.\n`;
-    content += `5. **Communicate your wants and needs** and make offers and requests.\n`;
-    content += `6. **Learn for the future.** Ask questions like, "If what I/you said or did came across that way, what can we do to prevent this from happening in the future?"\n`;
-
-    if (formData.documentDirectResolution) {
-      content += `7. **Keep a written record** of the resolution agreed to by both parties.\n\n`;
     } else {
-      content += `\n`;
+      content += `*[List your organization's core values - these guide how you approach conflict]*\n`;
     }
-
-    // Communication Channels
-    if (formData.channelsList && formData.channelsList.length > 0) {
-      content += `### Escalating Communication Bandwidth\n\n`;
-      content += `Whenever a misunderstanding or conflict arises, **escalate the bandwidth of the channel**:\n\n`;
-      formData.channelsList.forEach((channel: string, index: number) => {
-        content += `${index + 1}. ${channel}\n`;
+    content += `\n`;
+    
+    content += `### Conflict Resolution Principles\n\n`;
+    if (formData.principles && Array.isArray(formData.principles) && formData.principles.length > 0) {
+      formData.principles.forEach((principle: string, index: number) => {
+        content += `${index + 1}. ${principle || '[Principle not specified]'}\n`;
       });
-      content += `\n`;
+    } else {
+      content += `*[List principles that will guide how conflicts are resolved in your organization]*\n`;
     }
-
-    if (formData.requireDirectAttempt) {
-      content += `> **Note:** Direct resolution must be attempted before escalating to assisted resolution, unless safety concerns prevent this.\n\n`;
-    }
-  }
-
-  // Assisted Resolution
-  content += `## Assisted Resolution\n\n`;
-  content += `If talking things out doesn't work, you can ask a responsible contact person for help in writing.\n\n`;
-
-  // Responsible Contact People
-  if (formData.receiversList && formData.receiversList.length > 0) {
-    content += `### Initial Contact Options\n\n`;
-    content += `You can report conflicts to any of the following:\n\n`;
-    formData.receiversList.forEach((receiver: string) => {
-      content += `- ${receiver}\n`;
-    });
     content += `\n`;
   }
-
-  // Mediator Structure
-  if (formData.mediatorType) {
-    content += `### Mediation/Facilitation\n\n`;
-    content += `**Structure:** ${formData.mediatorType}\n\n`;
-
+  
+  // Section 3: Prevention & Early Intervention
+  if (data.sectionsEnabled?.prevention !== false) {
+    content += `## 3. Prevention & Early Intervention\n\n`;
+    
+    content += `### Member Involvement in Conflict Resolution\n\n`;
+    content += `${formData.memberInvolvement || '*[Describe how members participate in conflict resolution processes]*'}\n\n`;
+    
+    content += `### Communication Guidelines\n\n`;
+    content += `${formData.communicationGuidelines || '*[Outline communication standards and expectations for healthy dialogue]*'}\n\n`;
+  }
+  
+  // Section 4: Reporting & Documentation
+  if (data.sectionsEnabled?.reporting !== false) {
+    content += `## 4. Reporting & Documentation\n\n`;
+    
+    content += `### How to Report Conflicts\n\n`;
+    content += `Conflicts can be reported to:\n\n`;
+    // Add report receivers based on form data
+    if (data.reportReceivers && Array.isArray(data.reportReceivers)) {
+      const checkedReceivers = data.reportReceivers.filter((receiver: any) => receiver.checked);
+      if (checkedReceivers.length > 0) {
+        checkedReceivers.forEach((receiver: any) => {
+          content += `- ${receiver.label}\n`;
+        });
+      } else {
+        content += `*[Select who can receive conflict reports]*\n`;
+      }
+    } else {
+      content += `*[Select who can receive conflict reports]*\n`;
+    }
+    content += `\n`;
+    
+    content += `**Mediator/Facilitator Structure:** ${formData.mediatorType || '[Select mediator structure]'}\n\n`;
     if (formData.supportPeople) {
-      content += `**Support People:** Parties may bring a trusted person for emotional support during mediation sessions.\n\n`;
+      content += `**Support People:** Allowed in mediation sessions for emotional support\n\n`;
     }
   }
-
-  // Timeline
-  content += `### Response Times\n\n`;
-  if (formData.initialResponse) {
-    content += `- **Initial Response:** ${formData.initialResponse}\n`;
+  
+  // Section 5: Process Steps
+  if (data.sectionsEnabled?.process !== false) {
+    content += `## 5. Process Steps\n\n`;
+    
+    content += `### Process Steps\n\n`;
+    content += `${formData.processSteps || '*[Describe the step-by-step conflict resolution process]*'}\n\n`;
+    
+    content += `### Escalation Criteria\n\n`;
+    content += `${formData.escalationCriteria || '*[Define when and how conflicts escalate to higher levels]*'}\n\n`;
+    
+    content += `### Mediation Process\n\n`;
+    content += `${formData.mediation || '*[Describe the mediation process and procedures]*'}\n\n`;
+    
+    content += `### Final Decision Making\n\n`;
+    content += `${formData.finalDecision || '*[Explain how final decisions are made when mediation does not resolve the conflict]*'}\n\n`;
   }
-  if (formData.resolutionTarget) {
-    content += `- **Target Resolution:** ${formData.resolutionTarget}\n\n`;
+  
+  // Section 6: Timeline & Process
+  if (data.sectionsEnabled?.timeline !== false) {
+    content += `## 6. Timeline & Process\n\n`;
+    
+    content += `- **Initial Response Time:** ${formData.initialResponse || '[Select response time]'}\n`;
+    content += `- **Target Resolution Time:** ${formData.resolutionTarget || '[Select target time]'}\n\n`;
   }
-
-  // Formal Complaints
-  content += `## Formal Complaints\n\n`;
-  content += `If assisted resolution efforts do not result in an acceptable outcome within a reasonable timeframe, a *formal complaint* may be filed in writing.\n\n`;
-
-  // Required Elements
-  if (
-    formData.complaintElementsList &&
-    formData.complaintElementsList.length > 0
-  ) {
-    content += `### Written Complaint Requirements\n\n`;
-    content += `The formal complaint must include:\n\n`;
-    formData.complaintElementsList.forEach((element: string, index: number) => {
-      content += `${index + 1}. ${element}\n`;
-    });
-    content += `\n`;
+  
+  // Section 7: Learning & Follow-up
+  if (data.sectionsEnabled?.learning !== false) {
+    content += `## 7. Learning & Follow-up\n\n`;
+    
+    content += `### Learning and Improvement\n\n`;
+    content += `${formData.learning || '*[Describe how the organization learns from conflicts and improves processes]*'}\n\n`;
   }
-
-  // Formal Process Timeline
-  content += `### Formal Process Timeline\n\n`;
-  if (formData.formalAcknowledgmentTime) {
-    content += `- **Acknowledgment:** ${formData.formalAcknowledgmentTime}\n`;
+  
+  // Section 8: Emergency Procedures
+  if (data.sectionsEnabled?.emergency !== false) {
+    content += `## 8. Emergency Procedures\n\n`;
+    
+    content += `${formData.emergencyProcedures || '*[Outline procedures for urgent or severe conflicts requiring immediate action]*'}\n\n`;
   }
-  if (formData.formalReviewTime) {
-    content += `- **Review Completion:** ${formData.formalReviewTime}\n\n`;
+  
+  // Section 9: Review & Updates
+  if (data.sectionsEnabled?.review !== false) {
+    content += `## 9. Review & Updates\n\n`;
+    
+    content += `### Annual Review Process\n\n`;
+    content += `${formData.annualReview || '*[Describe how this framework will be reviewed and updated annually]*'}\n\n`;
   }
-
-  if (formData.requireExternalAdvice) {
-    content += `> **External Expertise:** For complex complaints involving multiple parties or organizational leaders, external legal advice will be sought.\n\n`;
-  }
-
-  // Settlement Documentation
-  if (formData.requireMinutesOfSettlement) {
-    content += `### Reaching Agreement\n\n`;
-    content += `Any resolution agreed upon must be documented in "Minutes of Settlement" signed by both parties. These agreements will be kept confidential according to our privacy standards.\n\n`;
-  }
-
-  // Consequences and Actions
-  if (formData.actionsList && formData.actionsList.length > 0) {
-    content += `## Possible Outcomes\n\n`;
-    content += `Depending on the situation, resolution may include:\n\n`;
-    formData.actionsList.forEach((action: string) => {
-      content += `- ${action}\n`;
-    });
-    content += `\n`;
-  }
-
-  if (formData.appealProcess) {
-    content += `### Appeals Process\n\n`;
-    content += `Parties may request review of decisions through our appeals process.\n\n`;
-  }
-
-  // Documentation and Privacy
-  if (data.sectionsEnabled?.documentation !== false) {
-    content += `## Documentation & Privacy\n\n`;
-    if (formData.docLevel) {
-      content += `**Documentation Level:** ${formData.docLevel}\n\n`;
-    }
-    if (formData.confidentiality) {
-      content += `**Confidentiality:** ${formData.confidentiality}\n\n`;
-    }
-    if (formData.retention) {
-      content += `**Record Retention:** ${formData.retention}\n\n`;
-    }
-  }
-
-  // External Resources (if enabled)
-  if (data.sectionsEnabled?.externalResources !== false) {
-    content += `## External Resources\n\n`;
-    if (formData.includeHumanRights) {
-      content += `Individuals who are not satisfied with the outcome of a harassment or discrimination complaint may file a complaint with the [Canadian Human Rights Commission](https://www.chrc-ccdp.gc.ca/eng) or their provincial human rights tribunal.\n\n`;
-    }
-
-    if (formData.additionalResources) {
-      content += `### Additional Resources\n\n`;
-      content += `${formData.additionalResources}\n\n`;
-    }
-  }
-
-  // Implementation
-  content += `## Policy Management\n\n`;
-  if (formData.training) {
-    content += `### Training Requirements\n\n`;
-    content += `${formData.training}\n\n`;
-  }
-
-  content += `### Review and Updates\n\n`;
-  if (formData.reviewSchedule) {
-    content += `This policy will be reviewed ${formData.reviewSchedule.toLowerCase()}.\n\n`;
-  }
-  if (formData.amendments) {
-    content += `**Amendment Process:** ${formData.amendments}\n\n`;
-  }
-
-  // Acknowledgments
-  if (formData.acknowledgments) {
-    content += `### Acknowledgments\n\n`;
-    content += `${formData.acknowledgments}\n\n`;
-  }
-
+  
   return content;
 };
 
@@ -1433,57 +991,36 @@ const formatConflictResolutionAsMarkdown = (data: any): string => {
 const formatDecisionFrameworkAsText = (data: any): string => {
   let content = `DECISION FRAMEWORK RESULTS\n=========================\n\n`;
 
-  if (data.surveyResponses && typeof data.surveyResponses === "object") {
+  if (data.surveyResponses && typeof data.surveyResponses === 'object') {
     content += `SURVEY RESPONSES\n----------------\n`;
-    content += `Urgency: ${data.surveyResponses.urgency || "[Not answered]"}\n`;
-    content += `Reversible: ${
-      data.surveyResponses.reversible || "[Not answered]"
-    }\n`;
-    content += `Expertise: ${
-      data.surveyResponses.expertise || "[Not answered]"
-    }\n`;
-    content += `Impact: ${data.surveyResponses.impact || "[Not answered]"}\n`;
-    content += `Options: ${data.surveyResponses.options || "[Not answered]"}\n`;
-    content += `Investment: ${
-      data.surveyResponses.investment || "[Not answered]"
-    }\n`;
-    content += `Team Size: ${
-      data.surveyResponses.teamSize || "[Not answered]"
-    }\n\n`;
+    content += `Urgency: ${data.surveyResponses.urgency || '[Not answered]'}\n`;
+    content += `Reversible: ${data.surveyResponses.reversible || '[Not answered]'}\n`;
+    content += `Expertise: ${data.surveyResponses.expertise || '[Not answered]'}\n`;
+    content += `Impact: ${data.surveyResponses.impact || '[Not answered]'}\n`;
+    content += `Options: ${data.surveyResponses.options || '[Not answered]'}\n`;
+    content += `Investment: ${data.surveyResponses.investment || '[Not answered]'}\n`;
+    content += `Team Size: ${data.surveyResponses.teamSize || '[Not answered]'}\n\n`;
   }
 
-  if (
-    data.recommendedFramework &&
-    typeof data.recommendedFramework === "object"
-  ) {
+  if (data.recommendedFramework && typeof data.recommendedFramework === 'object') {
     const framework = data.recommendedFramework;
     content += `RECOMMENDED FRAMEWORK\n--------------------\n`;
-    content += `Method: ${framework.method || "[No method specified]"}\n`;
-    content += `Tagline: ${framework.tagline || "[No tagline]"}\n\n`;
-    content += `Reasoning: ${
-      framework.reasoning || "[No reasoning provided]"
-    }\n\n`;
+    content += `Method: ${framework.method || '[No method specified]'}\n`;
+    content += `Tagline: ${framework.tagline || '[No tagline]'}\n\n`;
+    content += `Reasoning: ${framework.reasoning || '[No reasoning provided]'}\n\n`;
 
-    if (
-      framework.steps &&
-      Array.isArray(framework.steps) &&
-      framework.steps.length > 0
-    ) {
+    if (framework.steps && Array.isArray(framework.steps) && framework.steps.length > 0) {
       content += `IMPLEMENTATION STEPS\n-------------------\n`;
       framework.steps.forEach((step: string, index: number) => {
-        content += `${index + 1}. ${step || "[Step not specified]"}\n`;
+        content += `${index + 1}. ${step || '[Step not specified]'}\n`;
       });
       content += "\n";
     }
 
-    if (
-      framework.tips &&
-      Array.isArray(framework.tips) &&
-      framework.tips.length > 0
-    ) {
+    if (framework.tips && Array.isArray(framework.tips) && framework.tips.length > 0) {
       content += `PRO TIPS\n--------\n`;
       framework.tips.forEach((tip: string, index: number) => {
-        content += `${index + 1}. ${tip || "[Tip not specified]"}\n`;
+        content += `${index + 1}. ${tip || '[Tip not specified]'}\n`;
       });
       content += "\n";
     }
@@ -1495,63 +1032,36 @@ const formatDecisionFrameworkAsText = (data: any): string => {
 const formatDecisionFrameworkAsMarkdown = (data: any): string => {
   let content = `## Decision Framework Results\n\n`;
 
-  if (data.surveyResponses && typeof data.surveyResponses === "object") {
+  if (data.surveyResponses && typeof data.surveyResponses === 'object') {
     content += `### Survey Responses\n\n`;
-    content += `**Urgency:** ${
-      data.surveyResponses.urgency || "[Not answered]"
-    }  \n`;
-    content += `**Reversible:** ${
-      data.surveyResponses.reversible || "[Not answered]"
-    }  \n`;
-    content += `**Expertise:** ${
-      data.surveyResponses.expertise || "[Not answered]"
-    }  \n`;
-    content += `**Impact:** ${
-      data.surveyResponses.impact || "[Not answered]"
-    }  \n`;
-    content += `**Options:** ${
-      data.surveyResponses.options || "[Not answered]"
-    }  \n`;
-    content += `**Investment:** ${
-      data.surveyResponses.investment || "[Not answered]"
-    }  \n`;
-    content += `**Team Size:** ${
-      data.surveyResponses.teamSize || "[Not answered]"
-    }  \n\n`;
+    content += `**Urgency:** ${data.surveyResponses.urgency || '[Not answered]'}  \n`;
+    content += `**Reversible:** ${data.surveyResponses.reversible || '[Not answered]'}  \n`;
+    content += `**Expertise:** ${data.surveyResponses.expertise || '[Not answered]'}  \n`;
+    content += `**Impact:** ${data.surveyResponses.impact || '[Not answered]'}  \n`;
+    content += `**Options:** ${data.surveyResponses.options || '[Not answered]'}  \n`;
+    content += `**Investment:** ${data.surveyResponses.investment || '[Not answered]'}  \n`;
+    content += `**Team Size:** ${data.surveyResponses.teamSize || '[Not answered]'}  \n\n`;
   }
 
-  if (
-    data.recommendedFramework &&
-    typeof data.recommendedFramework === "object"
-  ) {
+  if (data.recommendedFramework && typeof data.recommendedFramework === 'object') {
     const framework = data.recommendedFramework;
     content += `### Recommended Framework\n\n`;
-    content += `**Method:** ${framework.method || "[No method specified]"}  \n`;
-    content += `**Tagline:** ${framework.tagline || "[No tagline]"}  \n\n`;
-    content += `**Reasoning:** ${
-      framework.reasoning || "[No reasoning provided]"
-    }\n\n`;
+    content += `**Method:** ${framework.method || '[No method specified]'}  \n`;
+    content += `**Tagline:** ${framework.tagline || '[No tagline]'}  \n\n`;
+    content += `**Reasoning:** ${framework.reasoning || '[No reasoning provided]'}\n\n`;
 
-    if (
-      framework.steps &&
-      Array.isArray(framework.steps) &&
-      framework.steps.length > 0
-    ) {
+    if (framework.steps && Array.isArray(framework.steps) && framework.steps.length > 0) {
       content += `#### Implementation Steps\n\n`;
       framework.steps.forEach((step: string, index: number) => {
-        content += `${index + 1}. ${step || "[Step not specified]"}\n`;
+        content += `${index + 1}. ${step || '[Step not specified]'}\n`;
       });
       content += "\n";
     }
 
-    if (
-      framework.tips &&
-      Array.isArray(framework.tips) &&
-      framework.tips.length > 0
-    ) {
+    if (framework.tips && Array.isArray(framework.tips) && framework.tips.length > 0) {
       content += `#### Pro Tips\n\n`;
       framework.tips.forEach((tip: string, index: number) => {
-        content += `${index + 1}. ${tip || "[Tip not specified]"}\n`;
+        content += `${index + 1}. ${tip || '[Tip not specified]'}\n`;
       });
       content += "\n";
     }
diff --git a/components/MilestoneRunwayOverlay.vue b/components/MilestoneRunwayOverlay.vue
index d785d77..bab80a6 100644
--- a/components/MilestoneRunwayOverlay.vue
+++ b/components/MilestoneRunwayOverlay.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="space-y-4">
     <!-- Runway summary -->
-    <div class="grid grid-cols-2 gap-4 p-3 bg-neutral-50 rounded-lg text-sm">
+    <div class="grid grid-cols-2 gap-4 p-3 bg-gray-50 rounded-lg text-sm">
       <div>
-        <span class="text-neutral-600">Min mode runway:</span>
+        <span class="text-gray-600">Min mode runway:</span>
         <div class="font-bold text-lg">{{ minRunwayMonths }} months</div>
-        <div class="text-xs text-neutral-500">Until {{ formatDate(minRunwayEndDate) }}</div>
+        <div class="text-xs text-gray-500">Until {{ formatDate(minRunwayEndDate) }}</div>
       </div>
       <div>
-        <span class="text-neutral-600">Target mode runway:</span>
+        <span class="text-gray-600">Target mode runway:</span>
         <div class="font-bold text-lg">{{ targetRunwayMonths }} months</div>
-        <div class="text-xs text-neutral-500">Until {{ formatDate(targetRunwayEndDate) }}</div>
+        <div class="text-xs text-gray-500">Until {{ formatDate(targetRunwayEndDate) }}</div>
       </div>
     </div>
     
@@ -28,12 +28,12 @@
         </UButton>
       </div>
       
-      <div v-if="milestones.length === 0" class="text-xs text-neutral-500 italic p-2">
+      <div v-if="milestones.length === 0" class="text-xs text-gray-500 italic p-2">
         No milestones set. Add key dates to track runway coverage.
       </div>
       
       <div v-for="milestone in milestonesWithStatus" :key="milestone.id"
-           class="flex items-center justify-between p-2 border border-neutral-200 rounded text-sm">
+           class="flex items-center justify-between p-2 border border-gray-200 rounded text-sm">
         <div class="flex items-center gap-2">
           <UIcon 
             :name="milestone.status === 'safe' ? 'i-heroicons-check-circle' : 
@@ -46,11 +46,11 @@
           />
           <div>
             <div class="font-medium">{{ milestone.label }}</div>
-            <div class="text-xs text-neutral-500">{{ formatDate(milestone.date) }}</div>
+            <div class="text-xs text-gray-500">{{ formatDate(milestone.date) }}</div>
           </div>
         </div>
         <div class="text-right">
-          <div class="text-xs text-neutral-600">
+          <div class="text-xs text-gray-600">
             {{ milestone.monthsFromNow > 0 ? `+${milestone.monthsFromNow}` : milestone.monthsFromNow }}mo
           </div>
           <UButton 
@@ -66,7 +66,7 @@
     </div>
     
     <!-- Add milestone form -->
-    <div v-if="showAddForm" class="p-3 border border-neutral-200 rounded-lg space-y-2">
+    <div v-if="showAddForm" class="p-3 border border-gray-200 rounded-lg space-y-2">
       <UInput 
         v-model="newMilestone.label"
         placeholder="Milestone name (e.g., 'Prototype release')"
diff --git a/components/NeedsCoverageBars.vue b/components/NeedsCoverageBars.vue
index 332565d..984f2b2 100644
--- a/components/NeedsCoverageBars.vue
+++ b/components/NeedsCoverageBars.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="space-y-3">
     <div v-for="member in membersWithCoverage" :key="member.id" class="space-y-1">
-      <div class="flex justify-between text-xs font-medium text-neutral-700">
+      <div class="flex justify-between text-xs font-medium text-gray-700">
         <span>{{ member.displayName || 'Unnamed' }}</span>
         <span>{{ Math.round(member.coverageMinPct || 0) }}%</span>
       </div>
       
-      <div class="relative h-6 bg-neutral-100 rounded overflow-hidden">
+      <div class="relative h-6 bg-gray-100 rounded overflow-hidden">
         <!-- Min coverage bar -->
         <div 
           class="absolute top-0 left-0 h-full transition-all duration-300"
@@ -17,21 +17,21 @@
         <!-- Target coverage tick/ghost -->
         <div 
           v-if="member.coverageTargetPct"
-          class="absolute top-0 h-full w-0.5 bg-neutral-400 opacity-50"
+          class="absolute top-0 h-full w-0.5 bg-gray-400 opacity-50"
           :style="{ left: `${Math.min(100, member.coverageTargetPct)}%` }"
         >
-          <div class="absolute -top-1 -left-1 w-2 h-2 bg-neutral-400 rounded-full opacity-50" />
+          <div class="absolute -top-1 -left-1 w-2 h-2 bg-gray-400 rounded-full opacity-50" />
         </div>
         
         <!-- 100% line -->
         <div class="absolute top-0 left-0 h-full w-full pointer-events-none">
-          <div class="absolute top-0 h-full w-px bg-neutral-600" style="left: 100%" />
+          <div class="absolute top-0 h-full w-px bg-gray-600" style="left: 100%" />
         </div>
       </div>
     </div>
     
     <!-- Summary stats -->
-    <div class="pt-3 border-t border-neutral-200 text-xs text-neutral-600">
+    <div class="pt-3 border-t border-gray-200 text-xs text-gray-600">
       <div class="flex justify-between">
         <span>Team median: {{ Math.round(teamStats.median || 0) }}%</span>
         <span v-if="teamStats.under100 > 0" class="text-yellow-600 font-medium">
diff --git a/components/OneOffEventEditor.vue b/components/OneOffEventEditor.vue
index c651ba5..e29deb4 100644
--- a/components/OneOffEventEditor.vue
+++ b/components/OneOffEventEditor.vue
@@ -3,10 +3,10 @@
     <template #header>
       <div class="flex items-center justify-between">
         <div>
-          <h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
             One-Off Transactions
           </h3>
-          <p class="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
+          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
             Add one-time income or expense transactions with expected dates.
           </p>
         </div>
@@ -18,13 +18,11 @@
 
     <!-- Empty state -->
     <div v-if="sortedEvents.length === 0" class="text-center py-8">
-      <UIcon
-        name="i-heroicons-banknotes"
-        class="w-12 h-12 mx-auto text-neutral-400 mb-4" />
-      <h4 class="text-lg font-medium text-neutral-900 dark:text-white mb-2">
+      <UIcon name="i-heroicons-banknotes" class="w-12 h-12 mx-auto text-gray-400 mb-4" />
+      <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
         No transactions yet
       </h4>
-      <p class="text-neutral-600 dark:text-neutral-400 mb-4">
+      <p class="text-gray-600 dark:text-gray-400 mb-4">
         Add one-off income or expense transactions.
       </p>
       <UButton @click="addEvent" color="primary">
@@ -38,26 +36,19 @@
       <div
         v-for="monthGroup in eventsByMonth"
         :key="monthGroup.month"
-        class="space-y-3">
+        class="space-y-3"
+      >
         <!-- Month header -->
-        <div
-          class="flex items-center justify-between py-2 border-b border-neutral-200 dark:border-neutral-700">
-          <h4 class="font-medium text-neutral-900 dark:text-white">
+        <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700">
+          <h4 class="font-medium text-gray-900 dark:text-white">
             {{ monthGroup.monthName }}
           </h4>
           <div class="flex items-center gap-3">
-            <UBadge variant="subtle" color="neutral">
-              {{ monthGroup.events.length }} transaction{{
-                monthGroup.events.length !== 1 ? "s" : ""
-              }}
+            <UBadge variant="subtle" color="gray">
+              {{ monthGroup.events.length }} transaction{{ monthGroup.events.length !== 1 ? 's' : '' }}
             </UBadge>
-            <div
-              class="text-sm font-medium"
-              :class="
-                monthGroup.netAmount >= 0 ? 'text-green-600' : 'text-red-600'
-              ">
-              {{ monthGroup.netAmount >= 0 ? "+" : ""
-              }}{{ formatCurrency(monthGroup.netAmount) }}
+            <div class="text-sm font-medium" :class="monthGroup.netAmount >= 0 ? 'text-green-600' : 'text-red-600'">
+              {{ monthGroup.netAmount >= 0 ? '+' : '' }}{{ formatCurrency(monthGroup.netAmount) }}
             </div>
           </div>
         </div>
@@ -68,15 +59,10 @@
             v-for="event in monthGroup.events"
             :key="event.id"
             :ui="{
-              background:
-                event.type === 'income'
-                  ? 'bg-green-50 dark:bg-green-900/20'
-                  : 'bg-red-50 dark:bg-red-900/20',
-              ring:
-                event.type === 'income'
-                  ? 'ring-green-200 dark:ring-green-800'
-                  : 'ring-red-200 dark:ring-red-800',
-            }">
+              background: event.type === 'income' ? 'bg-green-50 dark:bg-green-900/20' : 'bg-red-50 dark:bg-red-900/20',
+              ring: event.type === 'income' ? 'ring-green-200 dark:ring-green-800' : 'ring-red-200 dark:ring-red-800'
+            }"
+          >
             <UForm :state="event" @submit="() => {}">
               <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                 <!-- Category -->
@@ -84,9 +70,8 @@
                   <USelect
                     v-model="event.category"
                     :options="categoryOptions"
-                    @update:model-value="
-                      updateEvent(event.id, { category: $event })
-                    " />
+                    @update:model-value="updateEvent(event.id, { category: $event })"
+                  />
                 </UFormField>
 
                 <!-- Name -->
@@ -94,9 +79,8 @@
                   <UInput
                     v-model="event.name"
                     placeholder="e.g., Equipment purchase"
-                    @update:model-value="
-                      updateEvent(event.id, { name: $event })
-                    " />
+                    @update:model-value="updateEvent(event.id, { name: $event })"
+                  />
                 </UFormField>
 
                 <!-- Type -->
@@ -104,9 +88,8 @@
                   <USelect
                     v-model="event.type"
                     :options="typeOptions"
-                    @update:model-value="
-                      updateEvent(event.id, { type: $event })
-                    " />
+                    @update:model-value="updateEvent(event.id, { type: $event })"
+                  />
                 </UFormField>
 
                 <!-- Amount -->
@@ -115,11 +98,10 @@
                     v-model="event.amount"
                     type="number"
                     placeholder="5000"
-                    @update:model-value="
-                      updateEvent(event.id, { amount: Number($event) })
-                    ">
+                    @update:model-value="updateEvent(event.id, { amount: Number($event) })"
+                  >
                     <template #leading>
-                      <span class="text-neutral-500">$</span>
+                      <span class="text-gray-500">$</span>
                     </template>
                   </UInput>
                 </UFormField>
@@ -131,9 +113,8 @@
                   <UInput
                     v-model="event.dateExpected"
                     type="date"
-                    @update:model-value="
-                      updateEventWithDate(event.id, $event)
-                    " />
+                    @update:model-value="updateEventWithDate(event.id, $event)"
+                  />
                 </UFormField>
               </div>
             </UForm>
@@ -145,15 +126,12 @@
                   color="red"
                   size="sm"
                   icon="i-heroicons-trash"
-                  @click="removeEvent(event.id)">
+                  @click="removeEvent(event.id)"
+                >
                   Delete
                 </UButton>
                 <UDropdown :items="getEventActions(event)">
-                  <UButton
-                    variant="ghost"
-                    color="neutral"
-                    size="sm"
-                    icon="i-heroicons-ellipsis-horizontal" />
+                  <UButton variant="ghost" color="gray" size="sm" icon="i-heroicons-ellipsis-horizontal" />
                 </UDropdown>
               </div>
             </template>
@@ -164,16 +142,11 @@
       <!-- Summary -->
       <UCard>
         <div class="flex items-center justify-between">
-          <span class="font-medium text-neutral-900 dark:text-white">
-            Total {{ sortedEvents.length }} transaction{{
-              sortedEvents.length !== 1 ? "s" : ""
-            }}
+          <span class="font-medium text-gray-900 dark:text-white">
+            Total {{ sortedEvents.length }} transaction{{ sortedEvents.length !== 1 ? 's' : '' }}
           </span>
-          <span
-            class="text-lg font-bold"
-            :class="totalAnnualImpact >= 0 ? 'text-green-600' : 'text-red-600'">
-            {{ totalAnnualImpact >= 0 ? "+" : ""
-            }}{{ formatCurrency(totalAnnualImpact) }}
+          <span class="text-lg font-bold" :class="totalAnnualImpact >= 0 ? 'text-green-600' : 'text-red-600'">
+            {{ totalAnnualImpact >= 0 ? '+' : '' }}{{ formatCurrency(totalAnnualImpact) }}
           </span>
         </div>
       </UCard>
@@ -182,146 +155,126 @@
 </template>
 
 <script setup lang="ts">
-import type { OneOffEvent } from "~/types/cash";
+import type { OneOffEvent } from '~/types/cash'
 
-const cashStore = useCashStore();
+const cashStore = useCashStore()
 
 // Constants
-const monthNames = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
+const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
+                   'July', 'August', 'September', 'October', 'November', 'December']
 
 const typeOptions = [
-  { label: "Income", value: "income" },
-  { label: "Expense", value: "expense" },
-];
+  { label: 'Income', value: 'income' },
+  { label: 'Expense', value: 'expense' }
+]
 
 const categoryOptions = [
-  { label: "Equipment", value: "Equipment" },
-  { label: "Marketing", value: "Marketing" },
-  { label: "Legal", value: "Legal" },
-  { label: "Contractors", value: "Contractors" },
-  { label: "Office", value: "Office" },
-  { label: "Development", value: "Development" },
-  { label: "Other", value: "Other" },
-];
+  { label: 'Equipment', value: 'Equipment' },
+  { label: 'Marketing', value: 'Marketing' },
+  { label: 'Legal', value: 'Legal' },
+  { label: 'Contractors', value: 'Contractors' },
+  { label: 'Office', value: 'Office' },
+  { label: 'Development', value: 'Development' },
+  { label: 'Other', value: 'Other' }
+]
 
 // Computed
-const { oneOffEvents } = storeToRefs(cashStore);
+const { oneOffEvents } = storeToRefs(cashStore)
 
 const sortedEvents = computed(() => {
   return oneOffEvents.value
     .slice()
-    .sort((a, b) => a.month - b.month || a.name.localeCompare(b.name));
-});
+    .sort((a, b) => a.month - b.month || a.name.localeCompare(b.name))
+})
 
 const eventsByMonth = computed(() => {
-  const groups: Record<number, OneOffEvent[]> = {};
-
-  sortedEvents.value.forEach((event) => {
+  const groups: Record<number, OneOffEvent[]> = {}
+  
+  sortedEvents.value.forEach(event => {
     if (!groups[event.month]) {
-      groups[event.month] = [];
+      groups[event.month] = []
     }
-    groups[event.month].push(event);
-  });
-
-  return Object.entries(groups)
-    .map(([month, events]) => {
-      const monthNum = parseInt(month);
-      const netAmount = events.reduce((sum, event) => {
-        return sum + (event.type === "income" ? event.amount : -event.amount);
-      }, 0);
-
-      return {
-        month: monthNum,
-        monthName: monthNames[monthNum],
-        events,
-        netAmount,
-      };
-    })
-    .sort((a, b) => a.month - b.month);
-});
+    groups[event.month].push(event)
+  })
+  
+  return Object.entries(groups).map(([month, events]) => {
+    const monthNum = parseInt(month)
+    const netAmount = events.reduce((sum, event) => {
+      return sum + (event.type === 'income' ? event.amount : -event.amount)
+    }, 0)
+    
+    return {
+      month: monthNum,
+      monthName: monthNames[monthNum],
+      events,
+      netAmount
+    }
+  }).sort((a, b) => a.month - b.month)
+})
 
 const totalIncome = computed(() => {
   return oneOffEvents.value
-    .filter((e) => e.type === "income")
-    .reduce((sum, e) => sum + e.amount, 0);
-});
+    .filter(e => e.type === 'income')
+    .reduce((sum, e) => sum + e.amount, 0)
+})
 
 const totalExpenses = computed(() => {
   return oneOffEvents.value
-    .filter((e) => e.type === "expense")
-    .reduce((sum, e) => sum + e.amount, 0);
-});
+    .filter(e => e.type === 'expense')
+    .reduce((sum, e) => sum + e.amount, 0)
+})
 
-const totalAnnualImpact = computed(
-  () => totalIncome.value - totalExpenses.value
-);
+const totalAnnualImpact = computed(() => totalIncome.value - totalExpenses.value)
 
 // Methods
 function addEvent() {
-  const currentMonth = new Date().getMonth();
-  const today = new Date().toISOString().split("T")[0];
+  const currentMonth = new Date().getMonth()
+  const today = new Date().toISOString().split('T')[0]
   cashStore.addOneOffEvent({
-    name: "",
-    type: "income",
+    name: '',
+    type: 'income',
     amount: 0,
-    category: "Other",
-    dateExpected: today,
-  });
+    category: 'Other',
+    dateExpected: today
+  })
 }
 
 function updateEvent(eventId: string, updates: Partial<OneOffEvent>) {
-  cashStore.updateOneOffEvent(eventId, updates);
+  cashStore.updateOneOffEvent(eventId, updates)
 }
 
 function updateEventWithDate(eventId: string, dateExpected: string) {
-  const eventDate = new Date(dateExpected);
-  const month = eventDate.getMonth();
-  cashStore.updateOneOffEvent(eventId, { dateExpected, month });
+  const eventDate = new Date(dateExpected)
+  const month = eventDate.getMonth()
+  cashStore.updateOneOffEvent(eventId, { dateExpected, month })
 }
 
 function removeEvent(eventId: string) {
-  cashStore.removeOneOffEvent(eventId);
+  cashStore.removeOneOffEvent(eventId)
 }
 
 function getEventActions(event: OneOffEvent) {
   return [
-    [
-      {
-        label: "Move to Different Month",
-        icon: "i-heroicons-arrow-right",
-        click: () => moveToMonth(event.id),
-      },
-    ],
-    [
-      {
-        label: "Duplicate Event",
-        icon: "i-heroicons-document-duplicate",
-        click: () => duplicateEvent(event),
-      },
-    ],
-  ];
+    [{
+      label: 'Move to Different Month',
+      icon: 'i-heroicons-arrow-right',
+      click: () => moveToMonth(event.id)
+    }],
+    [{
+      label: 'Duplicate Event',
+      icon: 'i-heroicons-document-duplicate',
+      click: () => duplicateEvent(event)
+    }]
+  ]
 }
 
 function moveToMonth(eventId: string) {
   // This could open a month selector modal
   // For now, just move to next month
-  const event = oneOffEvents.value.find((e) => e.id === eventId);
+  const event = oneOffEvents.value.find(e => e.id === eventId)
   if (event) {
-    const newMonth = (event.month + 1) % 12;
-    updateEvent(eventId, { month: newMonth });
+    const newMonth = (event.month + 1) % 12
+    updateEvent(eventId, { month: newMonth })
   }
 }
 
@@ -331,22 +284,22 @@ function duplicateEvent(event: OneOffEvent) {
     type: event.type,
     amount: event.amount,
     category: event.category,
-    dateExpected: event.dateExpected,
-  });
+    dateExpected: event.dateExpected
+  })
 }
 
 function getDateValue(dateExpected: string | undefined): string {
   if (!dateExpected) {
-    return new Date().toISOString().split("T")[0];
+    return new Date().toISOString().split('T')[0]
   }
-  return dateExpected;
+  return dateExpected
 }
 
 function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    maximumFractionDigits: 0,
-  }).format(Math.abs(amount));
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0
+  }).format(Math.abs(amount))
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/components/PayRelationshipChip.vue b/components/PayRelationshipChip.vue
index b783f04..6e4d669 100644
--- a/components/PayRelationshipChip.vue
+++ b/components/PayRelationshipChip.vue
@@ -1,54 +1,54 @@
 <template>
-  <UBadge :color="badgeColor" :variant="variant" :size="size">
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
     {{ displayText }}
   </UBadge>
 </template>
 
 <script setup lang="ts">
-type PayRelationship =
-  | "FullyPaid"
-  | "Hybrid"
-  | "Supplemental"
-  | "VolunteerOrDeferred";
+type PayRelationship = 'FullyPaid' | 'Hybrid' | 'Supplemental' | 'VolunteerOrDeferred'
 
 interface Props {
-  relationship: PayRelationship;
-  variant?: "solid" | "outline" | "soft" | "subtle";
-  size?: "xs" | "sm" | "md" | "lg";
+  relationship: PayRelationship
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: "subtle",
-  size: "sm",
-});
+  variant: 'subtle',
+  size: 'sm'
+})
 
 const badgeColor = computed(() => {
   switch (props.relationship) {
-    case "FullyPaid":
-      return "green";
-    case "Hybrid":
-      return "blue";
-    case "Supplemental":
-      return "yellow";
-    case "VolunteerOrDeferred":
-      return "neutral";
+    case 'FullyPaid':
+      return 'green'
+    case 'Hybrid':
+      return 'blue'
+    case 'Supplemental':
+      return 'yellow'
+    case 'VolunteerOrDeferred':
+      return 'gray'
     default:
-      return "neutral";
+      return 'gray'
   }
-});
+})
 
 const displayText = computed(() => {
   switch (props.relationship) {
-    case "FullyPaid":
-      return "Fully Paid";
-    case "Hybrid":
-      return "Hybrid";
-    case "Supplemental":
-      return "Supplemental";
-    case "VolunteerOrDeferred":
-      return "Volunteer";
+    case 'FullyPaid':
+      return 'Fully Paid'
+    case 'Hybrid':
+      return 'Hybrid'
+    case 'Supplemental':
+      return 'Supplemental'
+    case 'VolunteerOrDeferred':
+      return 'Volunteer'
     default:
-      return "Unknown";
+      return 'Unknown'
   }
-});
+})
 </script>
diff --git a/components/PayrollOncostModal.vue b/components/PayrollOncostModal.vue
index de0acaf..0993cee 100644
--- a/components/PayrollOncostModal.vue
+++ b/components/PayrollOncostModal.vue
@@ -1,72 +1,52 @@
 <template>
-  <UModal
-    v-model:open="isOpen"
+  <UModal 
+    v-model:open="isOpen" 
     title="Payroll Oncost Settings"
     description="Configure payroll taxes and benefits percentage"
-    :dismissible="true">
+    :dismissible="true"
+  >
+
     <template #body>
       <div class="space-y-6">
         <!-- Explanation -->
         <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
           <div class="flex items-start">
-            <UIcon
-              name="i-heroicons-information-circle"
-              class="h-5 w-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0" />
+            <UIcon name="i-heroicons-information-circle" class="h-5 w-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0" />
             <div class="text-sm">
-              <p class="text-blue-800 dark:text-blue-200 font-medium mb-2">
-                What are payroll oncosts?
-              </p>
+              <p class="text-blue-800 dark:text-blue-200 font-medium mb-2">What are payroll oncosts?</p>
               <p class="text-blue-700 dark:text-blue-300">
-                Payroll oncosts cover taxes, benefits, and other
-                employee-related expenses beyond base wages. This typically
-                includes employer payroll taxes, worker's compensation, benefits
-                contributions, and other statutory requirements.
+                Payroll oncosts cover taxes, benefits, and other employee-related expenses beyond base wages. 
+                This typically includes employer payroll taxes, worker's compensation, benefits contributions, and other statutory requirements.
               </p>
             </div>
           </div>
         </div>
 
         <!-- Current Settings Display -->
-        <div class="bg-neutral-50 dark:bg-neutral-800 p-4 rounded-lg">
-          <h4 class="font-medium text-neutral-900 dark:text-white mb-3">
-            Current Impact
-          </h4>
+        <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
+          <h4 class="font-medium text-gray-900 dark:text-white mb-3">Current Impact</h4>
           <div class="grid grid-cols-2 gap-4 text-sm">
             <div>
-              <div class="text-neutral-600 dark:text-neutral-400">
-                Base Payroll
-              </div>
-              <div class="font-medium">
-                {{ formatCurrency(basePayroll) }}/month
-              </div>
+              <div class="text-gray-600 dark:text-gray-400">Base Payroll</div>
+              <div class="font-medium">{{ formatCurrency(basePayroll) }}/month</div>
             </div>
             <div>
-              <div class="text-neutral-600 dark:text-neutral-400">
-                Oncosts ({{ currentOncostPct }}%)
-              </div>
-              <div class="font-medium">
-                {{ formatCurrency(currentOncostAmount) }}/month
-              </div>
+              <div class="text-gray-600 dark:text-gray-400">Oncosts ({{ currentOncostPct }}%)</div>
+              <div class="font-medium">{{ formatCurrency(currentOncostAmount) }}/month</div>
             </div>
           </div>
-          <div
-            class="mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
-            <div class="text-neutral-600 dark:text-neutral-400 text-sm">
-              Total Payroll Cost
-            </div>
-            <div class="font-semibold text-lg">
-              {{ formatCurrency(totalPayrollCost) }}/month
-            </div>
+          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+            <div class="text-gray-600 dark:text-gray-400 text-sm">Total Payroll Cost</div>
+            <div class="font-semibold text-lg">{{ formatCurrency(totalPayrollCost) }}/month</div>
           </div>
         </div>
 
         <!-- Percentage Input -->
         <div class="space-y-3">
-          <label
-            class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
             Oncost Percentage
           </label>
-
+          
           <div class="flex items-center space-x-3">
             <div class="flex-1">
               <UInput
@@ -76,9 +56,10 @@
                 max="100"
                 step="1"
                 placeholder="25"
-                class="text-center" />
+                class="text-center"
+              />
             </div>
-            <span class="text-sm text-neutral-500">%</span>
+            <span class="text-sm text-gray-500">%</span>
           </div>
 
           <!-- Slider for easier adjustment -->
@@ -89,8 +70,9 @@
               min="0"
               max="50"
               step="1"
-              class="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 slider" />
-            <div class="flex justify-between text-xs text-neutral-500">
+              class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 slider"
+            />
+            <div class="flex justify-between text-xs text-gray-500">
               <span>0%</span>
               <span>25%</span>
               <span>50%</span>
@@ -99,44 +81,29 @@
         </div>
 
         <!-- Preview of New Settings -->
-        <div
-          v-if="newOncostPct !== currentOncostPct"
-          class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
-          <h4 class="font-medium text-green-800 dark:text-green-200 mb-3">
-            Preview Changes
-          </h4>
+        <div v-if="newOncostPct !== currentOncostPct" class="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
+          <h4 class="font-medium text-green-800 dark:text-green-200 mb-3">Preview Changes</h4>
           <div class="grid grid-cols-2 gap-4 text-sm">
             <div>
-              <div class="text-green-700 dark:text-green-300">
-                New Oncosts ({{ newOncostPct }}%)
-              </div>
-              <div class="font-medium">
-                {{ formatCurrency(newOncostAmount) }}/month
-              </div>
+              <div class="text-green-700 dark:text-green-300">New Oncosts ({{ newOncostPct }}%)</div>
+              <div class="font-medium">{{ formatCurrency(newOncostAmount) }}/month</div>
             </div>
             <div>
-              <div class="text-green-700 dark:text-green-300">
-                New Total Cost
-              </div>
-              <div class="font-medium">
-                {{ formatCurrency(newTotalCost) }}/month
-              </div>
+              <div class="text-green-700 dark:text-green-300">New Total Cost</div>
+              <div class="font-medium">{{ formatCurrency(newTotalCost) }}/month</div>
             </div>
           </div>
           <div class="mt-2 text-xs">
             <span class="text-green-700 dark:text-green-300">
-              {{ newTotalCost > totalPayrollCost ? "Increase" : "Decrease" }} of
-              {{
-                formatCurrency(Math.abs(newTotalCost - totalPayrollCost))
-              }}/month
+              {{ newTotalCost > totalPayrollCost ? 'Increase' : 'Decrease' }} of 
+              {{ formatCurrency(Math.abs(newTotalCost - totalPayrollCost)) }}/month
             </span>
           </div>
         </div>
 
         <!-- Common Oncost Ranges -->
         <div class="space-y-2">
-          <label
-            class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
             Common Ranges
           </label>
           <div class="flex flex-wrap gap-2">
@@ -144,9 +111,10 @@
               v-for="preset in commonRanges"
               :key="preset.value"
               size="xs"
-              color="neutral"
+              color="gray"
               variant="outline"
-              @click="newOncostPct = preset.value">
+              @click="newOncostPct = preset.value"
+            >
               {{ preset.label }}
             </UButton>
           </div>
@@ -156,13 +124,14 @@
 
     <template #footer="{ close }">
       <div class="flex justify-end gap-3">
-        <UButton color="neutral" variant="ghost" @click="handleCancel">
+        <UButton color="gray" variant="ghost" @click="handleCancel">
           Cancel
         </UButton>
-        <UButton
-          color="primary"
+        <UButton 
+          color="primary" 
           @click="handleSave"
-          :disabled="!isValidPercentage">
+          :disabled="!isValidPercentage"
+        >
           Update Oncost Percentage
         </UButton>
       </div>
@@ -171,134 +140,120 @@
 </template>
 
 <script setup lang="ts">
-import { allocatePayroll as allocatePayrollImpl } from "~/types/members";
+import { allocatePayroll as allocatePayrollImpl } from '~/types/members'
 
 interface Props {
-  open: boolean;
+  open: boolean
 }
 
 interface Emits {
-  (e: "update:open", value: boolean): void;
-  (e: "save", percentage: number): void;
+  (e: 'update:open', value: boolean): void
+  (e: 'save', percentage: number): void
 }
 
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
 
 // Modal state
 const isOpen = computed({
   get: () => props.open,
-  set: (value) => emit("update:open", value),
-});
+  set: (value) => emit('update:open', value)
+})
 
 // Get current payroll data
-const coopStore = useCoopBuilderStore();
-const currentOncostPct = computed(() => coopStore.payrollOncostPct || 0);
+const coopStore = useCoopBuilderStore()
+const currentOncostPct = computed(() => coopStore.payrollOncostPct || 0)
 
 // Calculate current payroll values using the same logic as the budget store
-const { allocatePayroll } = useCoopBuilder();
+const { allocatePayroll } = useCoopBuilder()
 
 const basePayroll = computed(() => {
   // Calculate base payroll the same way the budget store does
-  const totalHours = coopStore.members.reduce(
-    (sum, m) =>
-      sum + (m.hoursPerMonth || (m.hoursPerWeek ? m.hoursPerWeek * 4.33 : 0)),
-    0
-  );
-  const hourlyWage = coopStore.equalHourlyWage || 0;
-  const basePayrollBudget = totalHours * hourlyWage;
-
+  const totalHours = coopStore.members.reduce((sum, m) => sum + (m.hoursPerMonth || (m.hoursPerWeek ? m.hoursPerWeek * 4.33 : 0)), 0)
+  const hourlyWage = coopStore.equalHourlyWage || 0
+  const basePayrollBudget = totalHours * hourlyWage
+  
   if (basePayrollBudget > 0 && coopStore.members.length > 0) {
     // Use policy-driven allocation to get actual member pay amounts
     const payPolicy = {
       relationship: coopStore.policy.relationship,
-      roleBands: coopStore.policy.roleBands,
-    };
-
+      roleBands: coopStore.policy.roleBands
+    }
+    
     // Convert members to the format expected by allocatePayroll
-    const membersForAllocation = coopStore.members.map((m) => ({
+    const membersForAllocation = coopStore.members.map(m => ({
       ...m,
       displayName: m.name,
       monthlyPayPlanned: m.monthlyPayPlanned || 0,
       minMonthlyNeeds: m.minMonthlyNeeds || 0,
-      hoursPerMonth:
-        m.hoursPerMonth || (m.hoursPerWeek ? m.hoursPerWeek * 4.33 : 0),
-    }));
-
+      hoursPerMonth: m.hoursPerMonth || (m.hoursPerWeek ? m.hoursPerWeek * 4.33 : 0)
+    }))
+    
     // Use the imported allocatePayroll function
-    const allocatedMembers = allocatePayrollImpl(
-      membersForAllocation,
-      payPolicy,
-      basePayrollBudget
-    );
-
+    const allocatedMembers = allocatePayrollImpl(membersForAllocation, payPolicy, basePayrollBudget)
+    
     // Sum the allocated amounts for total payroll
-    return allocatedMembers.reduce(
-      (sum, m) => sum + (m.monthlyPayPlanned || 0),
-      0
-    );
+    return allocatedMembers.reduce((sum, m) => sum + (m.monthlyPayPlanned || 0), 0)
   }
+  
+  return 0
+})
 
-  return 0;
-});
+const currentOncostAmount = computed(() => 
+  basePayroll.value * (currentOncostPct.value / 100)
+)
 
-const currentOncostAmount = computed(
-  () => basePayroll.value * (currentOncostPct.value / 100)
-);
-
-const totalPayrollCost = computed(
-  () => basePayroll.value + currentOncostAmount.value
-);
+const totalPayrollCost = computed(() => 
+  basePayroll.value + currentOncostAmount.value
+)
 
 // New percentage input
-const newOncostPct = ref(currentOncostPct.value);
+const newOncostPct = ref(currentOncostPct.value)
 
 // Computed values for preview
-const newOncostAmount = computed(
-  () => basePayroll.value * (newOncostPct.value / 100)
-);
-const newTotalCost = computed(() => basePayroll.value + newOncostAmount.value);
+const newOncostAmount = computed(() => basePayroll.value * (newOncostPct.value / 100))
+const newTotalCost = computed(() => basePayroll.value + newOncostAmount.value)
 
-const isValidPercentage = computed(
-  () => newOncostPct.value >= 0 && newOncostPct.value <= 100
-);
+const isValidPercentage = computed(() => 
+  newOncostPct.value >= 0 && newOncostPct.value <= 100
+)
 
 // Common oncost ranges
 const commonRanges = [
-  { label: "0% (No oncosts)", value: 0 },
-  { label: "15% (Basic)", value: 15 },
-  { label: "25% (Standard)", value: 25 },
-  { label: "35% (Comprehensive)", value: 35 },
-];
+  { label: '0% (No oncosts)', value: 0 },
+  { label: '15% (Basic)', value: 15 },
+  { label: '25% (Standard)', value: 25 },
+  { label: '35% (Comprehensive)', value: 35 }
+]
 
 // Reset to current value when modal opens
 watch(isOpen, (open) => {
   if (open) {
-    newOncostPct.value = currentOncostPct.value;
+    newOncostPct.value = currentOncostPct.value
   }
-});
+})
 
 // Handlers
 function handleCancel() {
-  newOncostPct.value = currentOncostPct.value;
-  isOpen.value = false;
+  newOncostPct.value = currentOncostPct.value
+  isOpen.value = false
 }
 
 function handleSave() {
   if (isValidPercentage.value) {
-    emit("save", newOncostPct.value);
-    isOpen.value = false;
+    emit('save', newOncostPct.value)
+    isOpen.value = false
   }
 }
 
 // Currency formatting
 function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
     minimumFractionDigits: 0,
     maximumFractionDigits: 0,
-  }).format(amount);
+  }).format(amount)
 }
 </script>
 
@@ -320,4 +275,4 @@ function formatCurrency(amount: number): string {
   cursor: pointer;
   border: none;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/components/ProjectBudgetEstimate.vue b/components/ProjectBudgetEstimate.vue
index db39e41..9c373bd 100644
--- a/components/ProjectBudgetEstimate.vue
+++ b/components/ProjectBudgetEstimate.vue
@@ -15,7 +15,7 @@
       </div>
 
       <!-- Controls -->
-      <div class="p-6 border-b-4 border-black bg-neutral-100">
+      <div class="p-6 border-b-4 border-black bg-gray-100">
         <div class="flex flex-wrap gap-4 items-center">
           <div class="flex items-center gap-2">
             <label for="duration" class="font-bold text-sm">Duration (months):</label>
@@ -47,7 +47,7 @@
             <span class="font-bold">Monthly team cost:</span>
             <span class="font-mono">{{ currency(monthlyCost) }}</span>
           </li>
-          <li class="text-xs text-neutral-600 -mt-1">
+          <li class="text-xs text-gray-600 -mt-1">
             Sustainable payroll + {{ percent(props.oncostRate) }} benefits
           </li>
           <li class="flex justify-between items-center">
@@ -122,7 +122,7 @@
             </li>
           </ul>
           
-          <p class="text-xs text-neutral-600">
+          <p class="text-xs text-gray-600">
             Assumes {{ percent(storeCutInput / 100) }} store fee. Taxes not included.
           </p>
         </div>
@@ -147,7 +147,7 @@
       </div>
 
       <!-- Guidance -->
-      <div v-if="guidanceText" class="p-4 bg-neutral-50 text-sm text-neutral-600">
+      <div v-if="guidanceText" class="p-4 bg-gray-50 text-sm text-gray-600">
         {{ guidanceText }}
       </div>
     </div>
diff --git a/components/ReserveMeter.vue b/components/ReserveMeter.vue
index 00a6697..754c6db 100644
--- a/components/ReserveMeter.vue
+++ b/components/ReserveMeter.vue
@@ -72,7 +72,7 @@ const progressColor = computed(() => {
     case "red":
       return "red";
     default:
-      return "neutral";
+      return "gray";
   }
 });
 
@@ -85,7 +85,7 @@ const badgeColor = computed(() => {
     case "red":
       return "red";
     default:
-      return "neutral";
+      return "gray";
   }
 });
 
diff --git a/components/RestrictionChip.vue b/components/RestrictionChip.vue
index faeb0e8..92b09ac 100644
--- a/components/RestrictionChip.vue
+++ b/components/RestrictionChip.vue
@@ -1,35 +1,39 @@
 <template>
-  <UBadge :color="badgeColor" :variant="variant" :size="size">
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
     {{ displayText }}
   </UBadge>
 </template>
 
 <script setup lang="ts">
-type Restriction = "Restricted" | "General";
+type Restriction = 'Restricted' | 'General'
 
 interface Props {
-  restriction: Restriction;
-  variant?: "solid" | "outline" | "soft" | "subtle";
-  size?: "xs" | "sm" | "md" | "lg";
+  restriction: Restriction
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: "subtle",
-  size: "sm",
-});
+  variant: 'subtle',
+  size: 'sm'
+})
 
 const badgeColor = computed(() => {
   switch (props.restriction) {
-    case "Restricted":
-      return "orange";
-    case "General":
-      return "green";
+    case 'Restricted':
+      return 'orange'
+    case 'General':
+      return 'green'
     default:
-      return "neutral";
+      return 'gray'
   }
-});
+})
 
 const displayText = computed(() => {
-  return props.restriction;
-});
+  return props.restriction
+})
 </script>
diff --git a/components/RevenueMixTable.vue b/components/RevenueMixTable.vue
index 9aa188f..3b2f437 100644
--- a/components/RevenueMixTable.vue
+++ b/components/RevenueMixTable.vue
@@ -12,7 +12,7 @@
           <span class="font-medium">{{ stream.name }}</span>
         </div>
         <div class="flex items-center gap-2">
-          <span class="text-neutral-600">{{ formatCurrency(stream.targetMonthlyAmount || 0) }}</span>
+          <span class="text-gray-600">{{ formatCurrency(stream.targetMonthlyAmount || 0) }}</span>
           <span class="font-medium min-w-[40px] text-right">{{ stream.percentage }}%</span>
         </div>
       </div>
@@ -31,7 +31,7 @@
     </div>
     
     <!-- Totals -->
-    <div class="pt-2 border-t border-neutral-200 text-xs text-neutral-600">
+    <div class="pt-2 border-t border-gray-200 text-xs text-gray-600">
       <div class="flex justify-between">
         <span>Total monthly target:</span>
         <span class="font-medium">{{ formatCurrency(totalMonthly) }}</span>
diff --git a/components/RiskBandChip.vue b/components/RiskBandChip.vue
index 393c526..bb276e9 100644
--- a/components/RiskBandChip.vue
+++ b/components/RiskBandChip.vue
@@ -1,37 +1,41 @@
 <template>
-  <UBadge :color="badgeColor" :variant="variant" :size="size">
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
     {{ displayText }}
   </UBadge>
 </template>
 
 <script setup lang="ts">
-type RiskBand = "Low" | "Medium" | "High";
+type RiskBand = 'Low' | 'Medium' | 'High'
 
 interface Props {
-  risk: RiskBand;
-  variant?: "solid" | "outline" | "soft" | "subtle";
-  size?: "xs" | "sm" | "md" | "lg";
+  risk: RiskBand
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: "subtle",
-  size: "sm",
-});
+  variant: 'subtle',
+  size: 'sm'
+})
 
 const badgeColor = computed(() => {
   switch (props.risk) {
-    case "Low":
-      return "green";
-    case "Medium":
-      return "yellow";
-    case "High":
-      return "red";
+    case 'Low':
+      return 'green'
+    case 'Medium':
+      return 'yellow'
+    case 'High':
+      return 'red'
     default:
-      return "neutral";
+      return 'gray'
   }
-});
+})
 
 const displayText = computed(() => {
-  return `${props.risk} Risk`;
-});
+  return `${props.risk} Risk`
+})
 </script>
diff --git a/components/RunwayMeter.vue b/components/RunwayMeter.vue
index 818fabf..74ceff5 100644
--- a/components/RunwayMeter.vue
+++ b/components/RunwayMeter.vue
@@ -57,7 +57,7 @@ const progressColor = computed(() => {
     case "red":
       return "red";
     default:
-      return "neutral";
+      return "gray";
   }
 });
 
@@ -70,7 +70,7 @@ const badgeColor = computed(() => {
     case "red":
       return "red";
     default:
-      return "neutral";
+      return "gray";
   }
 });
 
diff --git a/components/WizardCostsStep.vue b/components/WizardCostsStep.vue
index ee5487b..e6299e4 100644
--- a/components/WizardCostsStep.vue
+++ b/components/WizardCostsStep.vue
@@ -2,10 +2,10 @@
   <div class="max-w-4xl mx-auto space-y-6">
     <!-- Section Header -->
     <div class="mb-8">
-      <h3 class="text-2xl font-black text-black dark:text-white mb-2">
+      <h3 class="text-2xl font-black text-black mb-2">
         Where does your money go?
       </h3>
-      <p class="text-neutral-600 dark:text-neutral-200">
+      <p class="text-neutral-600">
         Add costs like rent + utilities, software licenses, insurance, lawyer
         fees, accountant fees, and other recurring expenses.
       </p>
@@ -16,16 +16,14 @@
       <div
         v-if="overheadCosts.length > 0"
         class="flex items-center justify-between">
-        <h4 class="text-lg font-bold text-black dark:text-white">Overhead</h4>
+        <h4 class="text-lg font-bold text-black">Overhead</h4>
       </div>
 
       <div
         v-if="overheadCosts.length === 0"
-        class="text-center py-12 border-2 border-dashed border-neutral-300 dark:border-neutral-600 rounded-xl bg-white dark:bg-neutral-950 shadow-sm">
-        <h4 class="font-medium text-neutral-900 dark:text-neutral-100 mb-2">
-          No overhead costs yet
-        </h4>
-        <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+        class="text-center py-12 border-2 border-dashed border-neutral-300 rounded-xl bg-white shadow-sm">
+        <h4 class="font-medium text-neutral-900 mb-2">No overhead costs yet</h4>
+        <p class="text-sm text-neutral-500 mb-4">
           Get started by adding your first overhead cost.
         </p>
         <UButton
@@ -41,7 +39,7 @@
       <div
         v-for="cost in overheadCosts"
         :key="cost.id"
-        class="p-6 border-2 border-black dark:border-neutral-400 rounded-xl bg-white dark:bg-neutral-950 shadow-md">
+        class="p-6 border-2 border-black rounded-xl bg-white shadow-md">
         <!-- Header row with name and delete button -->
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center gap-4 flex-1">
@@ -114,7 +112,7 @@
                 </UButton>
               </UButtonGroup>
             </div>
-            <p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
+            <p class="text-xs text-neutral-500 mt-1">
               <template v-if="cost.amountType === 'annual'">
                 {{ currencySymbol
                 }}{{ Math.round((cost.annualAmount || 0) / 12) }} per month
@@ -133,6 +131,7 @@
           @click="addOverheadCost"
           size="lg"
           variant="solid"
+          color="success"
           :ui="{
             base: 'cursor-pointer hover:scale-105 transition-transform',
             leadingIcon: 'hover:rotate-90 transition-transform',
diff --git a/components/WizardMembersStep.vue b/components/WizardMembersStep.vue
index a71e44b..13fad3f 100644
--- a/components/WizardMembersStep.vue
+++ b/components/WizardMembersStep.vue
@@ -2,15 +2,13 @@
   <div class="max-w-4xl mx-auto space-y-6">
     <!-- Section Header -->
     <div class="mb-8">
-      <h3 class="text-2xl font-black text-black dark:text-white mb-2">
-        Who's on your team?
-      </h3>
-      <p class="text-neutral-600 dark:text-neutral-200">
+      <h3 class="text-2xl font-black text-black mb-2">Who's on your team?</h3>
+      <p class="text-neutral-600">
         Add everyone who'll be working in the co-op. Based on your pay approach,
         we'll collect the right information for each person.
       </p>
       <!-- Debug info -->
-      <div class="mt-2 p-2 bg-neutral-100 dark:bg-neutral-800 rounded text-xs">
+      <div class="mt-2 p-2 bg-gray-100 rounded text-xs">
         Debug: Policy = {{ currentPolicy }}, Needs field shown =
         {{ isNeedsWeighted }}
       </div>
@@ -20,11 +18,9 @@
     <div class="space-y-3">
       <div
         v-if="members.length === 0"
-        class="text-center py-12 border-2 border-dashed border-neutral-300 dark:border-neutral-600 rounded-xl bg-white dark:bg-neutral-950 shadow-sm">
-        <h4 class="font-medium text-neutral-900 dark:text-neutral-100 mb-2">
-          No team members yet
-        </h4>
-        <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
+        class="text-center py-12 border-2 border-dashed border-neutral-300 rounded-xl bg-white shadow-sm">
+        <h4 class="font-medium text-neutral-900 mb-2">No team members yet</h4>
+        <p class="text-sm text-neutral-500 mb-4">
           Get started by adding your first team member.
         </p>
         <UButton @click="addMember" size="lg" variant="solid" color="primary">
@@ -36,7 +32,7 @@
       <div
         v-for="(member, index) in members"
         :key="member.id"
-        class="p-6 border-2 border-black dark:border-neutral-400 rounded-xl bg-white dark:bg-neutral-950 shadow-md">
+        class="p-6 border-2 border-black rounded-xl bg-white shadow-md">
         <!-- Header row with name and optional coverage chip -->
         <div class="flex items-center justify-between mb-4">
           <div class="flex items-center gap-4 flex-1">
@@ -78,9 +74,7 @@
           <!-- Show minimum needs field when needs-weighted policy is selected -->
           <UFormField
             v-if="isNeedsWeighted"
-            :label="`Minimum needs (${getCurrencySymbol(
-              coop.currency.value
-            )}/month)`"
+            :label="`Minimum needs (${getCurrencySymbol(coop.currency.value)}/month)`"
             required>
             <UInputNumber
               v-model="member.minMonthlyNeeds"
@@ -101,6 +95,7 @@
           @click="addMember"
           size="lg"
           variant="solid"
+          color="success"
           :ui="{
             base: 'cursor-pointer hover:scale-105 transition-transform',
             leadingIcon: 'hover:rotate-90 transition-transform',
diff --git a/components/WizardPoliciesStep.vue b/components/WizardPoliciesStep.vue
index f4a53c3..f07d8b0 100644
--- a/components/WizardPoliciesStep.vue
+++ b/components/WizardPoliciesStep.vue
@@ -2,20 +2,19 @@
   <div class="max-w-4xl mx-auto space-y-6">
     <!-- Section Header -->
     <div class="mb-8">
-      <h3 class="text-2xl font-black text-black dark:text-white mb-2">
+      <h3 class="text-2xl font-black text-black mb-2">
         How will you share money?
       </h3>
-      <p class="text-neutral-600 dark:text-neutral-200">
+      <p class="text-neutral-600">
         This is the foundation of your co-op's finances. Choose a pay approach
         and set your hourly rate.
       </p>
     </div>
 
     <!-- Pay Policy Selection -->
-    <div
-      class="p-6 border-2 border-black dark:border-netural-400 bg-white dark:bg-neutral-950 shadow-md">
+    <div class="p-6 border-2 border-black rounded-xl bg-white shadow-md">
       <h4 class="font-bold mb-2">Step 1: Choose your pay approach</h4>
-      <p class="text-sm text-neutral-600 dark:text-neutral-200 mb-4">
+      <p class="text-sm text-gray-600 mb-4">
         How should available money be shared among members?
       </p>
       <URadioGroup
@@ -28,10 +27,9 @@
     </div>
 
     <!-- Hourly Wage Input -->
-    <div
-      class="p-6 border-2 border-black dark:border-neutral-950 bg-white dark:bg-neutral-950 shadow-md">
+    <div class="p-6 border-2 border-black rounded-xl bg-white shadow-md">
       <h4 class="font-bold mb-2">Step 2: Set your base wage</h4>
-      <p class="text-sm text-neutral-600 dark:text-neutral-200 mb-4">
+      <p class="text-sm text-gray-600 mb-4">
         This hourly rate applies to all paid work in your co-op
       </p>
       <div class="flex gap-4 items-start">
diff --git a/components/WizardRevenueStep.vue b/components/WizardRevenueStep.vue
index c9fafa4..abd1afc 100644
--- a/components/WizardRevenueStep.vue
+++ b/components/WizardRevenueStep.vue
@@ -2,156 +2,139 @@
   <div class="max-w-4xl mx-auto space-y-6">
     <!-- Section Header -->
     <div class="mb-8">
-      <h3 class="text-2xl font-black text-black dark:text-white mb-2">
+      <h3 class="text-2xl font-black text-black mb-2">
         Where will your money come from?
       </h3>
-      <p class="text-neutral-600 dark:text-neutral-200">
+      <p class="text-neutral-600">
         Add sources like client work, grants, product sales, or donations.
       </p>
     </div>
 
     <!-- Removed Tab Navigation - showing streams directly -->
-    <div class="space-y-6">
-      <div class="space-y-3">
-        <div
-          v-if="streams.length === 0"
-          class="text-center py-12 border-2 border-dashed border-neutral-300 dark:border-neutral-600 rounded-xl bg-white dark:bg-neutral-950 shadow-sm">
-          <h4 class="font-medium text-neutral-900 dark:text-neutral-100 mb-2">
-            No revenue streams yet
-          </h4>
-          <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-4">
-            Get started by adding your first revenue source.
-          </p>
-          <UButton
-            @click="addRevenueStream"
-            size="lg"
-            variant="solid"
-            color="primary">
-            <UIcon name="i-heroicons-plus" class="mr-2" />
-            Add your first revenue stream
-          </UButton>
-        </div>
+        <div class="space-y-6">
 
-        <div
-          v-for="stream in streams"
-          :key="stream.id"
-          class="p-6 border-2 border-black dark:border-neutral-400 rounded-xl bg-white dark:bg-neutral-950 shadow-md">
-          <!-- First row: Category and Name with delete button -->
-          <div class="flex gap-4 mb-4">
-            <UFormField label="Category" required class="flex-1">
-              <USelect
-                v-model="stream.category"
-                :items="categoryOptions"
-                size="md"
-                class="text-sm font-medium w-full"
-                @update:model-value="saveCategoryChange(stream)" />
-            </UFormField>
-
-            <UFormField label="Name" required class="flex-1">
-              <div class="flex gap-2">
-                <USelectMenu
-                  v-model="stream.name"
-                  :items="nameOptionsByCategory[stream.category] || []"
-                  placeholder="Select or type a source name"
-                  creatable
-                  searchable
-                  size="md"
-                  class="text-sm font-medium w-full"
-                  @update:model-value="saveStream(stream)" />
-                <UButton
-                  size="md"
-                  variant="solid"
-                  color="error"
-                  @click="removeStream(stream.id)"
-                  :ui="{
-                    base: 'cursor-pointer hover:opacity-90 transition-opacity',
-                  }">
-                  <UIcon name="i-heroicons-trash" class="w-4 h-4" />
-                </UButton>
-              </div>
-            </UFormField>
-          </div>
-
-          <!-- Second row: Amount with toggle -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <UFormField
-              :label="
-                stream.amountType === 'annual'
-                  ? 'Annual amount'
-                  : 'Monthly amount'
-              "
-              required>
-              <div class="flex gap-2">
-                <UInput
-                  :value="
-                    stream.amountType === 'annual'
-                      ? stream.targetAnnualAmount
-                      : stream.targetMonthlyAmount
-                  "
-                  type="text"
-                  :placeholder="
-                    stream.amountType === 'annual' ? '60000' : '5000'
-                  "
-                  size="md"
-                  class="text-sm font-medium w-full"
-                  @update:model-value="validateAndSaveAmount($event, stream)"
-                  @blur="saveStream(stream)">
-                  <template #leading>
-                    <span class="text-neutral-500">{{ currencySymbol }}</span>
-                  </template>
-                </UInput>
-                <UButtonGroup size="md">
-                  <UButton
-                    :variant="
-                      stream.amountType === 'monthly' ? 'solid' : 'outline'
-                    "
-                    color="primary"
-                    @click="switchAmountType(stream, 'monthly')"
-                    class="text-xs">
-                    Monthly
-                  </UButton>
-                  <UButton
-                    :variant="
-                      stream.amountType === 'annual' ? 'solid' : 'outline'
-                    "
-                    color="primary"
-                    @click="switchAmountType(stream, 'annual')"
-                    class="text-xs">
-                    Annual
-                  </UButton>
-                </UButtonGroup>
-              </div>
-              <p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
-                <template v-if="stream.amountType === 'annual'">
-                  {{ currencySymbol
-                  }}{{ Math.round((stream.targetAnnualAmount || 0) / 12) }} per
-                  month
-                </template>
-                <template v-else>
-                  {{ currencySymbol
-                  }}{{ (stream.targetMonthlyAmount || 0) * 12 }} per year
-                </template>
+          <div class="space-y-3">
+            <div
+              v-if="streams.length === 0"
+              class="text-center py-12 border-2 border-dashed border-neutral-300 rounded-xl bg-white shadow-sm">
+              <h4 class="font-medium text-neutral-900 mb-2">
+                No revenue streams yet
+              </h4>
+              <p class="text-sm text-neutral-500 mb-4">
+                Get started by adding your first revenue source.
               </p>
-            </UFormField>
+              <UButton
+                @click="addRevenueStream"
+                size="lg"
+                variant="solid"
+                color="primary">
+                <UIcon name="i-heroicons-plus" class="mr-2" />
+                Add your first revenue stream
+              </UButton>
+            </div>
+
+            <div
+              v-for="stream in streams"
+              :key="stream.id"
+              class="p-6 border-2 border-black rounded-xl bg-white shadow-md">
+              <!-- First row: Category and Name with delete button -->
+              <div class="flex gap-4 mb-4">
+                <UFormField label="Category" required class="flex-1">
+                  <USelect
+                    v-model="stream.category"
+                    :items="categoryOptions"
+                    size="md"
+                    class="text-sm font-medium w-full"
+                    @update:model-value="saveCategoryChange(stream)" />
+                </UFormField>
+
+                <UFormField label="Name" required class="flex-1">
+                  <div class="flex gap-2">
+                    <USelectMenu
+                      v-model="stream.name"
+                      :items="nameOptionsByCategory[stream.category] || []"
+                      placeholder="Select or type a source name"
+                      creatable
+                      searchable
+                      size="md"
+                      class="text-sm font-medium w-full"
+                      @update:model-value="saveStream(stream)" />
+                    <UButton
+                      size="md"
+                      variant="solid"
+                      color="error"
+                      @click="removeStream(stream.id)"
+                      :ui="{
+                        base: 'cursor-pointer hover:opacity-90 transition-opacity',
+                      }">
+                      <UIcon name="i-heroicons-trash" class="w-4 h-4" />
+                    </UButton>
+                  </div>
+                </UFormField>
+              </div>
+
+              <!-- Second row: Amount with toggle -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <UFormField :label="stream.amountType === 'annual' ? 'Annual amount' : 'Monthly amount'" required>
+                  <div class="flex gap-2">
+                    <UInput
+                      :value="stream.amountType === 'annual' ? stream.targetAnnualAmount : stream.targetMonthlyAmount"
+                      type="text"
+                      :placeholder="stream.amountType === 'annual' ? '60000' : '5000'"
+                      size="md"
+                      class="text-sm font-medium w-full"
+                      @update:model-value="validateAndSaveAmount($event, stream)"
+                      @blur="saveStream(stream)">
+                      <template #leading>
+                        <span class="text-neutral-500">{{ currencySymbol }}</span>
+                      </template>
+                    </UInput>
+                    <UButtonGroup size="md">
+                      <UButton
+                        :variant="stream.amountType === 'monthly' ? 'solid' : 'outline'"
+                        color="primary"
+                        @click="switchAmountType(stream, 'monthly')"
+                        class="text-xs">
+                        Monthly
+                      </UButton>
+                      <UButton
+                        :variant="stream.amountType === 'annual' ? 'solid' : 'outline'"
+                        color="primary"
+                        @click="switchAmountType(stream, 'annual')"
+                        class="text-xs">
+                        Annual
+                      </UButton>
+                    </UButtonGroup>
+                  </div>
+                  <p class="text-xs text-neutral-500 mt-1">
+                    <template v-if="stream.amountType === 'annual'">
+                      {{ currencySymbol }}{{ Math.round((stream.targetAnnualAmount || 0) / 12) }} per month
+                    </template>
+                    <template v-else>
+                      {{ currencySymbol }}{{ (stream.targetMonthlyAmount || 0) * 12 }} per year
+                    </template>
+                  </p>
+                </UFormField>
+              </div>
+            </div>
+
+            <!-- Add Stream Button (when items exist) -->
+            <div v-if="streams.length > 0" class="flex justify-center">
+              <UButton
+                @click="addRevenueStream"
+                size="lg"
+                variant="solid"
+                color="success"
+                :ui="{
+                  base: 'cursor-pointer hover:scale-105 transition-transform',
+                  leadingIcon: 'hover:rotate-90 transition-transform',
+                }">
+                <UIcon name="i-heroicons-plus" class="mr-2" />
+                Add another stream
+              </UButton>
+            </div>
           </div>
         </div>
-
-        <!-- Add Stream Button (when items exist) -->
-        <div v-if="streams.length > 0" class="flex justify-center">
-          <UButton
-            @click="addRevenueStream"
-            size="lg"
-            variant="solid"
-            :ui="{
-              base: 'cursor-pointer hover:scale-105 transition-transform',
-              leadingIcon: 'hover:rotate-90 transition-transform',
-            }">
-            <UIcon name="i-heroicons-plus" class="mr-2" />
-            Add another stream
-          </UButton>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -165,23 +148,23 @@ const emit = defineEmits<{
 // Store and Currency
 const coop = useCoopBuilder();
 const { currencySymbol } = useCurrency();
-const streams = computed(() =>
-  coop.streams.value.map((s) => ({
+const streams = computed(() => 
+  coop.streams.value.map(s => ({
     // Map store fields to component expectations
     id: s.id,
     name: s.label,
-    category: s.category || "games",
+    category: s.category || 'games',
     targetMonthlyAmount: s.monthly || 0,
-    targetAnnualAmount: s.annual || (s.monthly || 0) * 12,
-    amountType: s.amountType || "monthly",
-    subcategory: "",
+    targetAnnualAmount: (s.annual || (s.monthly || 0) * 12),
+    amountType: s.amountType || 'monthly',
+    subcategory: '',
     targetPct: 0,
-    certainty: s.certainty || "Aspirational",
+    certainty: s.certainty || 'Aspirational',
     payoutDelayDays: 30,
-    terms: "Net 30",
+    terms: 'Net 30',
     revenueSharePct: 0,
     platformFeePct: 0,
-    restrictions: "General",
+    restrictions: 'General',
     seasonalityWeights: new Array(12).fill(1),
     effortHoursPerMonth: 0,
   }))
@@ -243,10 +226,9 @@ const nameOptionsByCategory: Record<string, string[]> = {
 // Computed
 const totalMonthlyAmount = computed(() =>
   streams.value.reduce((sum, s) => {
-    const monthly =
-      s.amountType === "annual"
-        ? Math.round((s.targetAnnualAmount || 0) / 12)
-        : s.targetMonthlyAmount || 0;
+    const monthly = s.amountType === 'annual' 
+      ? Math.round((s.targetAnnualAmount || 0) / 12)
+      : (s.targetMonthlyAmount || 0);
     return sum + monthly;
   }, 0)
 );
@@ -257,19 +239,18 @@ const debouncedSave = useDebounceFn((stream: any) => {
 
   try {
     // Convert component format back to store format
-    const monthly =
-      stream.amountType === "annual"
-        ? Math.round((stream.targetAnnualAmount || 0) / 12)
-        : stream.targetMonthlyAmount || 0;
-
+    const monthly = stream.amountType === 'annual' 
+      ? Math.round((stream.targetAnnualAmount || 0) / 12)
+      : (stream.targetMonthlyAmount || 0);
+    
     const streamData = {
       id: stream.id,
-      label: stream.name || "",
+      label: stream.name || '',
       monthly: monthly,
       annual: stream.targetAnnualAmount || monthly * 12,
-      amountType: stream.amountType || "monthly",
-      category: stream.category || "games",
-      certainty: stream.certainty || "Aspirational",
+      amountType: stream.amountType || 'monthly',
+      category: stream.category || 'games',
+      certainty: stream.certainty || 'Aspirational'
     };
 
     coop.upsertStream(streamData);
@@ -281,11 +262,10 @@ const debouncedSave = useDebounceFn((stream: any) => {
 }, 300);
 
 function saveStream(stream: any) {
-  const hasValidAmount =
-    stream.amountType === "annual"
-      ? stream.targetAnnualAmount >= 0
-      : stream.targetMonthlyAmount >= 0;
-
+  const hasValidAmount = stream.amountType === 'annual' 
+    ? stream.targetAnnualAmount >= 0
+    : stream.targetMonthlyAmount >= 0;
+  
   if (stream.name && stream.category && hasValidAmount) {
     debouncedSave(stream);
   }
@@ -301,19 +281,18 @@ function saveCategoryChange(stream: any) {
 function saveStreamImmediate(stream: any) {
   try {
     // Convert component format back to store format
-    const monthly =
-      stream.amountType === "annual"
-        ? Math.round((stream.targetAnnualAmount || 0) / 12)
-        : stream.targetMonthlyAmount || 0;
-
+    const monthly = stream.amountType === 'annual' 
+      ? Math.round((stream.targetAnnualAmount || 0) / 12)
+      : (stream.targetMonthlyAmount || 0);
+    
     const streamData = {
       id: stream.id,
-      label: stream.name || "",
+      label: stream.name || '',
       monthly: monthly,
       annual: stream.targetAnnualAmount || monthly * 12,
-      amountType: stream.amountType || "monthly",
-      category: stream.category || "games",
-      certainty: stream.certainty || "Aspirational",
+      amountType: stream.amountType || 'monthly',
+      category: stream.category || 'games',
+      certainty: stream.certainty || 'Aspirational'
     };
 
     coop.upsertStream(streamData);
@@ -326,35 +305,33 @@ function saveStreamImmediate(stream: any) {
 function validateAndSaveAmount(value: string, stream: any) {
   const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
   const validValue = isNaN(numValue) ? 0 : Math.max(0, numValue);
-
-  if (stream.amountType === "annual") {
+  
+  if (stream.amountType === 'annual') {
     stream.targetAnnualAmount = validValue;
     stream.targetMonthlyAmount = Math.round(validValue / 12);
   } else {
     stream.targetMonthlyAmount = validValue;
     stream.targetAnnualAmount = validValue * 12;
   }
-
+  
   saveStream(stream);
 }
 
 // Function to switch between annual and monthly
-function switchAmountType(stream: any, type: "annual" | "monthly") {
+function switchAmountType(stream: any, type: 'annual' | 'monthly') {
   stream.amountType = type;
-
+  
   // Recalculate values based on new type
-  if (type === "annual") {
+  if (type === 'annual') {
     if (!stream.targetAnnualAmount) {
       stream.targetAnnualAmount = (stream.targetMonthlyAmount || 0) * 12;
     }
   } else {
     if (!stream.targetMonthlyAmount) {
-      stream.targetMonthlyAmount = Math.round(
-        (stream.targetAnnualAmount || 0) / 12
-      );
+      stream.targetMonthlyAmount = Math.round((stream.targetAnnualAmount || 0) / 12);
     }
   }
-
+  
   // Save immediately without debounce for instant UI update
   saveStreamImmediate(stream);
 }
@@ -367,7 +344,7 @@ function addRevenueStream() {
     annual: 0,
     amountType: "monthly",
     category: "games",
-    certainty: "Aspirational",
+    certainty: "Aspirational"
   };
 
   coop.upsertStream(newStream);
diff --git a/components/advanced/MilestonesPanel.vue b/components/advanced/MilestonesPanel.vue
index 9e79233..e81d181 100644
--- a/components/advanced/MilestonesPanel.vue
+++ b/components/advanced/MilestonesPanel.vue
@@ -3,39 +3,36 @@
     <template #header>
       <div class="flex items-center justify-between">
         <h4 class="font-medium">Milestones</h4>
-        <UButton
-          size="xs"
+        <UButton 
+          size="xs" 
           variant="ghost"
           icon="i-heroicons-plus"
-          @click="showAddForm = true">
+          @click="showAddForm = true"
+        >
           Add
         </UButton>
       </div>
     </template>
-
+    
     <div class="space-y-3">
-      <div
-        v-if="milestoneStatuses.length === 0"
-        class="text-sm text-neutral-500 italic py-2">
+      <div v-if="milestoneStatuses.length === 0" class="text-sm text-gray-500 italic py-2">
         No milestones set. Add key dates to track progress.
       </div>
 
       <div
         v-for="milestone in milestoneStatuses"
         :key="milestone.id"
-        class="flex items-center justify-between p-2 border border-neutral-200 rounded">
+        class="flex items-center justify-between p-2 border border-gray-200 rounded"
+      >
         <div class="flex items-center gap-2">
           <UIcon
-            :name="
-              milestone.willReach
-                ? 'i-heroicons-check-circle'
-                : 'i-heroicons-exclamation-triangle'
-            "
+            :name="milestone.willReach ? 'i-heroicons-check-circle' : 'i-heroicons-exclamation-triangle'"
             :class="milestone.willReach ? 'text-green-500' : 'text-amber-500'"
-            class="w-4 h-4" />
+            class="w-4 h-4"
+          />
           <div>
             <div class="text-sm font-medium">{{ milestone.label }}</div>
-            <div class="text-xs text-neutral-500">
+            <div class="text-xs text-gray-500">
               {{ formatDate(milestone.date) }}
             </div>
           </div>
@@ -45,7 +42,8 @@
           variant="ghost"
           color="red"
           icon="i-heroicons-trash"
-          @click="removeMilestone(milestone.id)" />
+          @click="removeMilestone(milestone.id)"
+        />
       </div>
     </div>
 
@@ -56,8 +54,12 @@
         <div class="space-y-3">
           <UInput
             v-model="newMilestone.label"
-            placeholder="Milestone name (e.g., 'Product launch')" />
-          <UInput v-model="newMilestone.date" type="date" />
+            placeholder="Milestone name (e.g., 'Product launch')"
+          />
+          <UInput
+            v-model="newMilestone.date"
+            type="date"
+          />
           <div class="flex gap-2">
             <UButton @click="saveMilestone">Save</UButton>
             <UButton variant="ghost" @click="cancelAdd">Cancel</UButton>
@@ -69,28 +71,28 @@
 </template>
 
 <script setup lang="ts">
-const { milestoneStatus, addMilestone, removeMilestone } = useCoopBuilder();
+const { milestoneStatus, addMilestone, removeMilestone } = useCoopBuilder()
 
-const showAddForm = ref(false);
-const newMilestone = ref({ label: "", date: "" });
+const showAddForm = ref(false)
+const newMilestone = ref({ label: '', date: '' })
 
-const milestoneStatuses = computed(() => milestoneStatus());
+const milestoneStatuses = computed(() => milestoneStatus())
 
 function formatDate(dateString: string): string {
-  const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", { month: "short", year: "numeric" });
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
 }
 
 function saveMilestone() {
   if (newMilestone.value.label && newMilestone.value.date) {
-    addMilestone(newMilestone.value.label, newMilestone.value.date);
-    newMilestone.value = { label: "", date: "" };
-    showAddForm.value = false;
+    addMilestone(newMilestone.value.label, newMilestone.value.date)
+    newMilestone.value = { label: '', date: '' }
+    showAddForm.value = false
   }
 }
 
 function cancelAdd() {
-  newMilestone.value = { label: "", date: "" };
-  showAddForm.value = false;
+  newMilestone.value = { label: '', date: '' }
+  showAddForm.value = false
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/components/advanced/StressTestPanel.vue b/components/advanced/StressTestPanel.vue
index d81aab8..022e09c 100644
--- a/components/advanced/StressTestPanel.vue
+++ b/components/advanced/StressTestPanel.vue
@@ -3,10 +3,10 @@
     <template #header>
       <h4 class="font-medium">Stress Test</h4>
     </template>
-
+    
     <div class="space-y-4">
       <div>
-        <label class="text-sm font-medium text-neutral-700 mb-2 block">
+        <label class="text-sm font-medium text-gray-700 mb-2 block">
           Revenue Delay: {{ stress.revenueDelay }} months
         </label>
         <input
@@ -15,14 +15,13 @@
           min="0"
           max="6"
           step="1"
-          class="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer"
-          @input="
-            (e) => updateStress({ revenueDelay: Number(e.target.value) })
-          " />
+          class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          @input="(e) => updateStress({ revenueDelay: Number(e.target.value) })"
+        />
       </div>
 
       <div>
-        <label class="text-sm font-medium text-neutral-700 mb-2 block">
+        <label class="text-sm font-medium text-gray-700 mb-2 block">
           Cost Shock: +{{ stress.costShockPct }}%
         </label>
         <input
@@ -31,32 +30,29 @@
           min="0"
           max="30"
           step="5"
-          class="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer"
-          @input="
-            (e) => updateStress({ costShockPct: Number(e.target.value) })
-          " />
+          class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+          @input="(e) => updateStress({ costShockPct: Number(e.target.value) })"
+        />
       </div>
 
       <div>
         <UCheckbox
           :model-value="stress.grantLost"
           label="Major Grant Lost"
-          @update:model-value="(val) => updateStress({ grantLost: val })" />
+          @update:model-value="(val) => updateStress({ grantLost: val })"
+        />
       </div>
 
-      <div
-        v-if="isStressActive"
-        class="p-3 bg-orange-50 border border-orange-200 rounded">
+      <div v-if="isStressActive" class="p-3 bg-orange-50 border border-orange-200 rounded">
         <div class="text-sm">
           <div class="flex items-center gap-2 text-orange-800 mb-1">
             <UIcon name="i-heroicons-exclamation-triangle" class="w-4 h-4" />
             <span class="font-medium">Stress Test Active</span>
           </div>
           <div class="text-orange-700">
-            Projected runway:
-            <span class="font-semibold">{{ displayStressedRunway }}</span>
+            Projected runway: <span class="font-semibold">{{ displayStressedRunway }}</span>
             <span v-if="runwayChange !== 0" class="ml-2">
-              ({{ runwayChange > 0 ? "+" : "" }}{{ runwayChange }} months)
+              ({{ runwayChange > 0 ? '+' : '' }}{{ runwayChange }} months)
             </span>
           </div>
         </div>
@@ -66,35 +62,32 @@
 </template>
 
 <script setup lang="ts">
-const { stress, updateStress, runwayMonths } = useCoopBuilder();
+const { stress, updateStress, runwayMonths } = useCoopBuilder()
 
-const isStressActive = computed(
-  () =>
-    stress.value.revenueDelay > 0 ||
-    stress.value.costShockPct > 0 ||
-    stress.value.grantLost
-);
+const isStressActive = computed(() => 
+  stress.value.revenueDelay > 0 || 
+  stress.value.costShockPct > 0 || 
+  stress.value.grantLost
+)
 
-const stressedRunway = computed(() =>
-  runwayMonths(undefined, { useStress: true })
-);
-const normalRunway = computed(() => runwayMonths());
+const stressedRunway = computed(() => runwayMonths(undefined, { useStress: true }))
+const normalRunway = computed(() => runwayMonths())
 
 const displayStressedRunway = computed(() => {
-  const months = stressedRunway.value;
-  if (!isFinite(months)) return "∞";
-  if (months < 1) return "<1 month";
-  return `${Math.round(months)} months`;
-});
+  const months = stressedRunway.value
+  if (!isFinite(months)) return '∞'
+  if (months < 1) return '<1 month'
+  return `${Math.round(months)} months`
+})
 
 const runwayChange = computed(() => {
-  const normal = normalRunway.value;
-  const stressed = stressedRunway.value;
-
-  if (!isFinite(normal) && !isFinite(stressed)) return 0;
-  if (!isFinite(normal)) return -99; // Very large negative change
-  if (!isFinite(stressed)) return 0;
-
-  return Math.round(stressed - normal);
-});
-</script>
+  const normal = normalRunway.value
+  const stressed = stressedRunway.value
+  
+  if (!isFinite(normal) && !isFinite(stressed)) return 0
+  if (!isFinite(normal)) return -99 // Very large negative change
+  if (!isFinite(stressed)) return 0
+  
+  return Math.round(stressed - normal)
+})
+</script>
\ No newline at end of file
diff --git a/components/dashboard/AdvancedAccordion.vue b/components/dashboard/AdvancedAccordion.vue
index a02743a..9b29ca4 100644
--- a/components/dashboard/AdvancedAccordion.vue
+++ b/components/dashboard/AdvancedAccordion.vue
@@ -20,7 +20,7 @@
           <h4 class="font-semibold">Stress Test</h4>
           <div class="space-y-2">
             <div>
-              <label class="text-xs text-neutral-600"
+              <label class="text-xs text-gray-600"
                 >Revenue Delay (months)</label
               >
               <URange
@@ -29,24 +29,24 @@
                 :max="6"
                 :step="1"
                 class="mt-1" />
-              <div class="text-xs text-neutral-500">
+              <div class="text-xs text-gray-500">
                 {{ stress.revenueDelay }} months
               </div>
             </div>
             <div>
-              <label class="text-xs text-neutral-600">Cost Shock (%)</label>
+              <label class="text-xs text-gray-600">Cost Shock (%)</label>
               <URange
                 v-model="stress.costShockPct"
                 :min="0"
                 :max="30"
                 :step="1"
                 class="mt-1" />
-              <div class="text-xs text-neutral-500">
+              <div class="text-xs text-gray-500">
                 {{ stress.costShockPct }}%
               </div>
             </div>
             <UCheckbox v-model="stress.grantLost" label="Grant lost" />
-            <div class="text-sm text-neutral-600 pt-2 border-t">
+            <div class="text-sm text-gray-600 pt-2 border-t">
               Projected runway: {{ projectedRunway }}
             </div>
           </div>
@@ -72,13 +72,13 @@
                 <span>{{ milestone.willReach ? "✅" : "⚠️" }}</span>
                 <span>{{ milestone.label }}</span>
               </div>
-              <span class="text-xs text-neutral-600">{{
+              <span class="text-xs text-gray-600">{{
                 formatDate(milestone.date)
               }}</span>
             </div>
             <div
               v-if="milestones.length === 0"
-              class="text-sm text-neutral-600 italic">
+              class="text-sm text-gray-600 italic">
               No milestones yet
             </div>
           </div>
diff --git a/components/dashboard/MemberCoveragePanel.vue b/components/dashboard/MemberCoveragePanel.vue
index 02f9eba..96b9b47 100644
--- a/components/dashboard/MemberCoveragePanel.vue
+++ b/components/dashboard/MemberCoveragePanel.vue
@@ -4,30 +4,27 @@
     <template #header>
       <div class="flex items-center justify-between">
         <h3 class="font-semibold">Individual Member Coverage</h3>
-        <UTooltip
-          text="Shows what each member needs from the co-op vs. what we can actually pay them">
-          <UIcon
-            name="i-heroicons-information-circle"
-            class="h-4 w-4 text-neutral-400 hover:text-neutral-600 cursor-help" />
+        <UTooltip text="Shows what each member needs from the co-op vs. what we can actually pay them">
+          <UIcon name="i-heroicons-information-circle" class="h-4 w-4 text-gray-400 hover:text-gray-600 cursor-help" />
         </UTooltip>
       </div>
     </template>
-
+    
     <div v-if="allocatedMembers.length > 0" class="space-y-4">
-      <div
-        v-for="member in allocatedMembers"
+      <div 
+        v-for="member in allocatedMembers" 
         :key="member.id"
-        class="space-y-2">
+        class="space-y-2"
+      >
         <!-- Member name and coverage percentage -->
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-2">
-            <span class="font-medium text-neutral-900">{{
-              member.displayName || member.name || "Unnamed Member"
-            }}</span>
-            <UBadge
-              :color="getCoverageColor(calculateCoverage(member))"
+            <span class="font-medium text-gray-900">{{ member.displayName || member.name || 'Unnamed Member' }}</span>
+            <UBadge 
+              :color="getCoverageColor(calculateCoverage(member))" 
               size="xs"
-              :ui="{ base: 'font-medium' }">
+              :ui="{ base: 'font-medium' }"
+            >
               {{ Math.round(calculateCoverage(member)) }}% covered
             </UBadge>
           </div>
@@ -36,18 +33,12 @@
         <!-- Financial breakdown -->
         <div class="grid grid-cols-2 gap-4 text-sm">
           <div class="space-y-1">
-            <div class="text-neutral-600">Needs from co-op</div>
-            <div class="font-medium">
-              {{ formatCurrency(member.minMonthlyNeeds || 0) }}
-            </div>
+            <div class="text-gray-600">Needs from co-op</div>
+            <div class="font-medium">{{ formatCurrency(member.minMonthlyNeeds || 0) }}</div>
           </div>
           <div class="space-y-1">
-            <div class="text-neutral-600">Co-op can pay</div>
-            <div
-              class="font-medium"
-              :class="
-                getAmountColor(member.monthlyPayPlanned, member.minMonthlyNeeds)
-              ">
+            <div class="text-gray-600">Co-op can pay</div>
+            <div class="font-medium" :class="getAmountColor(member.monthlyPayPlanned, member.minMonthlyNeeds)">
               {{ formatCurrency(member.monthlyPayPlanned || 0) }}
             </div>
           </div>
@@ -55,24 +46,18 @@
 
         <!-- Visual progress bar -->
         <div class="space-y-1">
-          <div
-            class="w-full bg-neutral-200 rounded-full h-3 relative overflow-hidden">
-            <div
+          <div class="w-full bg-gray-200 rounded-full h-3 relative overflow-hidden">
+            <div 
               class="h-3 rounded-full transition-all duration-300"
               :class="getBarColor(calculateCoverage(member))"
-              :style="{
-                width: `${Math.min(100, calculateCoverage(member))}%`,
-              }" />
+              :style="{ width: `${Math.min(100, calculateCoverage(member))}%` }"
+            />
             <!-- 100% marker line -->
-            <div
-              class="absolute top-0 h-3 w-0.5 bg-neutral-600 opacity-75"
-              style="left: 100%"
-              v-if="calculateCoverage(member) < 100">
-              <div
-                class="absolute -top-1 -left-1 w-2 h-2 bg-neutral-600 rounded-full opacity-75" />
+            <div class="absolute top-0 h-3 w-0.5 bg-gray-600 opacity-75" style="left: 100%" v-if="calculateCoverage(member) < 100">
+              <div class="absolute -top-1 -left-1 w-2 h-2 bg-gray-600 rounded-full opacity-75" />
             </div>
           </div>
-          <div class="flex justify-between text-xs text-neutral-500">
+          <div class="flex justify-between text-xs text-gray-500">
             <span>0%</span>
             <span>100%</span>
             <span>200%+</span>
@@ -80,32 +65,21 @@
         </div>
 
         <!-- Gap/surplus indicator -->
-        <div
-          v-if="getGapAmount(member) !== 0"
-          class="flex items-center gap-1 text-xs">
-          <UIcon
-            :name="
-              getGapAmount(member) > 0
-                ? 'i-heroicons-arrow-trending-down'
-                : 'i-heroicons-arrow-trending-up'
-            "
+        <div v-if="getGapAmount(member) !== 0" class="flex items-center gap-1 text-xs">
+          <UIcon 
+            :name="getGapAmount(member) > 0 ? 'i-heroicons-arrow-trending-down' : 'i-heroicons-arrow-trending-up'" 
             class="h-3 w-3"
-            :class="
-              getGapAmount(member) > 0 ? 'text-red-500' : 'text-green-500'
-            " />
-          <span
-            :class="
-              getGapAmount(member) > 0 ? 'text-red-600' : 'text-green-600'
-            ">
-            {{ getGapAmount(member) > 0 ? "Gap: " : "Surplus: "
-            }}{{ formatCurrency(Math.abs(getGapAmount(member))) }}
+            :class="getGapAmount(member) > 0 ? 'text-red-500' : 'text-green-500'"
+          />
+          <span :class="getGapAmount(member) > 0 ? 'text-red-600' : 'text-green-600'">
+            {{ getGapAmount(member) > 0 ? 'Gap: ' : 'Surplus: ' }}{{ formatCurrency(Math.abs(getGapAmount(member))) }}
           </span>
         </div>
       </div>
     </div>
 
     <!-- Empty State -->
-    <div v-else class="text-center py-8 text-neutral-500">
+    <div v-else class="text-center py-8 text-gray-500">
       <UIcon name="i-heroicons-users" class="h-8 w-8 mx-auto mb-2 opacity-50" />
       <p class="text-sm mb-2">No members added yet</p>
       <p class="text-xs">Complete setup wizard to add team members</p>
@@ -113,25 +87,16 @@
 
     <template #footer v-if="allocatedMembers.length > 0">
       <!-- Summary Stats -->
-      <div
-        class="flex justify-between items-center text-sm text-neutral-600 pb-3 border-b border-neutral-200">
+      <div class="flex justify-between items-center text-sm text-gray-600 pb-3 border-b border-gray-200">
         <div class="flex items-center gap-4">
           <span>Median coverage: {{ Math.round(stats.median || 0) }}%</span>
-          <span
-            :class="stats.under100 === 0 ? 'text-green-600' : 'text-amber-600'">
-            {{
-              stats.under100 === 0
-                ? "All covered ✓"
-                : `${stats.under100} need more`
-            }}
+          <span :class="stats.under100 === 0 ? 'text-green-600' : 'text-amber-600'">
+            {{ stats.under100 === 0 ? 'All covered ✓' : `${stats.under100} need more` }}
           </span>
         </div>
         <div class="text-xs">
           <UTooltip text="Based on available revenue after overhead costs">
-            <span class="cursor-help"
-              >Total sustainable payroll:
-              {{ formatCurrency(totalPayroll) }}</span
-            >
+            <span class="cursor-help">Total sustainable payroll: {{ formatCurrency(totalPayroll) }}</span>
           </UTooltip>
         </div>
       </div>
@@ -143,22 +108,20 @@
             <UIcon name="i-heroicons-light-bulb" class="h-3 w-3" />
             <span class="font-medium">To cover everyone:</span>
           </div>
-          <p class="mt-1 text-neutral-600 pl-5">
-            Increase available payroll by
-            <strong>{{ formatCurrency(totalGap) }}</strong>
+          <p class="mt-1 text-gray-600 pl-5">
+            Increase available payroll by <strong>{{ formatCurrency(totalGap) }}</strong> 
             through higher revenue or lower overhead costs.
           </p>
         </div>
-
+        
         <div v-else-if="totalSurplus > 0" class="text-xs">
           <div class="flex items-center gap-2 text-green-700">
             <UIcon name="i-heroicons-check-circle" class="h-3 w-3" />
             <span class="font-medium">Healthy position:</span>
           </div>
-          <p class="mt-1 text-neutral-600 pl-5">
-            You have <strong>{{ formatCurrency(totalSurplus) }}</strong> surplus
-            after covering all member needs. Consider growth opportunities or
-            building reserves.
+          <p class="mt-1 text-gray-600 pl-5">
+            You have <strong>{{ formatCurrency(totalSurplus) }}</strong> surplus after covering all member needs.
+            Consider growth opportunities or building reserves.
           </p>
         </div>
 
@@ -167,7 +130,7 @@
             <UIcon name="i-heroicons-scales" class="h-3 w-3" />
             <span class="font-medium">Perfect balance:</span>
           </div>
-          <p class="mt-1 text-neutral-600 pl-5">
+          <p class="mt-1 text-gray-600 pl-5">
             Available payroll exactly matches member needs.
           </p>
         </div>
@@ -177,99 +140,88 @@
 </template>
 
 <script setup lang="ts">
-const { allocatePayroll, coverage, teamCoverageStats } = useCoopBuilder();
+const { allocatePayroll, coverage, teamCoverageStats } = useCoopBuilder()
 
 const allocatedMembers = computed(() => {
-  const members = allocatePayroll();
-  console.log("🔍 allocatedMembers computed:", members);
-  return members;
-});
-const stats = computed(() => teamCoverageStats());
+  const members = allocatePayroll()
+  console.log('🔍 allocatedMembers computed:', members)
+  return members
+})
+const stats = computed(() => teamCoverageStats())
 
 // Calculate total payroll
-const totalPayroll = computed(() =>
+const totalPayroll = computed(() => 
   allocatedMembers.value.reduce((sum, m) => sum + (m.monthlyPayPlanned || 0), 0)
-);
+)
 
 // Color functions for coverage display
 function getBarColor(pct: number): string {
-  if (!pct || pct < 80) return "bg-red-500";
-  if (pct < 100) return "bg-amber-500";
-  return "bg-green-500";
+  if (!pct || pct < 80) return 'bg-red-500'
+  if (pct < 100) return 'bg-amber-500'
+  return 'bg-green-500'
 }
 
 function getCoverageColor(pct: number): string {
-  if (!pct || pct < 80) return "red";
-  if (pct < 100) return "amber";
-  return "green";
+  if (!pct || pct < 80) return 'red'
+  if (pct < 100) return 'amber'
+  return 'green'
 }
 
 function getAmountColor(planned: number = 0, needed: number = 0): string {
-  if (!needed) return "text-neutral-900";
-  if (planned >= needed) return "text-green-600";
-  if (planned >= needed * 0.8) return "text-amber-600";
-  return "text-red-600";
+  if (!needed) return 'text-gray-900'
+  if (planned >= needed) return 'text-green-600'
+  if (planned >= needed * 0.8) return 'text-amber-600'
+  return 'text-red-600'
 }
 
 // Calculate gap between what's needed vs what can be paid
 function getGapAmount(member: any): number {
-  const planned = member.monthlyPayPlanned || 0;
-  const needed = member.minMonthlyNeeds || 0;
-  return needed - planned; // positive = gap, negative = surplus
+  const planned = member.monthlyPayPlanned || 0
+  const needed = member.minMonthlyNeeds || 0
+  return needed - planned // positive = gap, negative = surplus
 }
 
 // Calculate total gap/surplus across all members
 const totalGap = computed(() => {
-  const totalNeeded = allocatedMembers.value.reduce(
-    (sum, m) => sum + (m.minMonthlyNeeds || 0),
-    0
-  );
-  const totalPlanned = totalPayroll.value;
-  const gap = totalNeeded - totalPlanned;
-  return gap > 0 ? gap : 0;
-});
+  const totalNeeded = allocatedMembers.value.reduce((sum, m) => sum + (m.minMonthlyNeeds || 0), 0)
+  const totalPlanned = totalPayroll.value
+  const gap = totalNeeded - totalPlanned
+  return gap > 0 ? gap : 0
+})
 
 const totalSurplus = computed(() => {
-  const totalNeeded = allocatedMembers.value.reduce(
-    (sum, m) => sum + (m.minMonthlyNeeds || 0),
-    0
-  );
-  const totalPlanned = totalPayroll.value;
-  const surplus = totalPlanned - totalNeeded;
-  return surplus > 0 ? surplus : 0;
-});
+  const totalNeeded = allocatedMembers.value.reduce((sum, m) => sum + (m.minMonthlyNeeds || 0), 0)
+  const totalPlanned = totalPayroll.value
+  const surplus = totalPlanned - totalNeeded
+  return surplus > 0 ? surplus : 0
+})
 
 // Local coverage calculation for debugging
 function calculateCoverage(member: any): number {
-  const coopPay = member.monthlyPayPlanned || 0;
-  const needs = member.minMonthlyNeeds || 0;
-
-  console.log(
-    `Coverage calc for ${member.name || member.displayName || "Unknown"}:`,
-    {
-      member: JSON.stringify(member, null, 2),
-      coopPay,
-      needs,
-      coverage: needs > 0 ? (coopPay / needs) * 100 : 100,
-    }
-  );
-
+  const coopPay = member.monthlyPayPlanned || 0
+  const needs = member.minMonthlyNeeds || 0
+  
+  console.log(`Coverage calc for ${member.name || member.displayName || 'Unknown'}:`, {
+    member: JSON.stringify(member, null, 2),
+    coopPay,
+    needs,
+    coverage: needs > 0 ? (coopPay / needs) * 100 : 100
+  })
+  
   if (needs === 0) {
-    console.log(
-      `⚠️ Member ${member.name} has NO minMonthlyNeeds - defaulting to 100%`
-    );
-    return 100;
+    console.log(`⚠️ Member ${member.name} has NO minMonthlyNeeds - defaulting to 100%`)
+    return 100
   }
-  return Math.min(200, (coopPay / needs) * 100);
+  return Math.min(200, (coopPay / needs) * 100)
 }
 
 // Currency formatting
 function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
     minimumFractionDigits: 0,
     maximumFractionDigits: 0,
-  }).format(amount);
+  }).format(amount)
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/components/dashboard/NeedsCoverageCard.vue b/components/dashboard/NeedsCoverageCard.vue
index 97ea81f..061ba21 100644
--- a/components/dashboard/NeedsCoverageCard.vue
+++ b/components/dashboard/NeedsCoverageCard.vue
@@ -7,126 +7,93 @@
           <UIcon name="i-heroicons-user-group" class="h-5 w-5" />
           <h3 class="font-semibold">Member Needs Coverage</h3>
         </div>
-        <UTooltip
-          text="Shows how well the co-op can meet each member's stated financial needs">
-          <UIcon
-            name="i-heroicons-information-circle"
-            class="h-4 w-4 text-neutral-400 hover:text-neutral-600 cursor-help" />
+        <UTooltip text="Shows how well the co-op can meet each member's stated financial needs">
+          <UIcon name="i-heroicons-information-circle" class="h-4 w-4 text-gray-400 hover:text-gray-600 cursor-help" />
         </UTooltip>
       </div>
     </template>
-
+    
     <div v-if="hasMembers" class="space-y-4">
       <!-- Team Summary -->
       <div class="text-center">
         <div class="text-2xl font-semibold" :class="statusColor">
           {{ fullyCoveredCount }} of {{ totalMembers }}
         </div>
-        <div class="text-sm text-neutral-600">members fully covered</div>
+        <div class="text-sm text-gray-600">
+          members fully covered
+        </div>
       </div>
 
       <!-- Coverage Stats -->
       <div class="flex justify-between text-sm">
         <div class="text-center">
           <div class="font-medium">{{ median }}%</div>
-          <div class="text-neutral-600">Median</div>
+          <div class="text-gray-600">Median</div>
         </div>
         <div class="text-center">
-          <div class="font-medium" :class="underCoveredColor">
-            {{ stats.under100 }}
-          </div>
-          <div class="text-neutral-600">Under 100%</div>
+          <div class="font-medium" :class="underCoveredColor">{{ stats.under100 }}</div>
+          <div class="text-gray-600">Under 100%</div>
         </div>
         <div class="text-center">
           <div class="font-medium">{{ formatCurrency(availablePayroll) }}</div>
-          <div class="text-neutral-600">Available</div>
+          <div class="text-gray-600">Available</div>
         </div>
       </div>
 
       <!-- Intelligent Financial Analysis -->
       <div v-if="hasMembers" class="space-y-2">
         <!-- Coverage gap analysis -->
-        <div
-          v-if="stats.under100 > 0"
-          class="text-xs bg-amber-50 p-3 rounded border-l-4 border-amber-400">
+        <div v-if="stats.under100 > 0" class="text-xs bg-amber-50 p-3 rounded border-l-4 border-amber-400">
           <div class="flex items-start gap-2">
-            <UIcon
-              name="i-heroicons-exclamation-triangle"
-              class="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
+            <UIcon name="i-heroicons-exclamation-triangle" class="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
             <div class="space-y-1">
               <p class="font-medium text-amber-800">Coverage Gap Analysis</p>
               <p class="text-amber-700">
-                To meet member needs, you need
-                <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their
-                stated requirements, but you have
-                <strong>{{ formatCurrency(availablePayroll) }}</strong>
-                available for payroll.
+                To meet member needs, you need <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their stated requirements, 
+                but you have <strong>{{ formatCurrency(availablePayroll) }}</strong> available for payroll.
               </p>
               <p class="text-amber-600">
-                <strong
-                  >Shortfall:
-                  {{
-                    formatCurrency(Math.max(0, totalNeeds - availablePayroll))
-                  }}</strong
-                >
+                <strong>Shortfall: {{ formatCurrency(Math.max(0, totalNeeds - availablePayroll)) }}</strong>
               </p>
               <p class="text-xs text-amber-600 mt-2">
-                💡 Note: This reflects member-stated needs. Check your Budget
-                page for detailed payroll planning.
+                💡 Note: This reflects member-stated needs. Check your Budget page for detailed payroll planning.
               </p>
             </div>
           </div>
         </div>
 
         <!-- Surplus analysis -->
-        <div
-          v-else-if="availablePayroll > totalNeeds && totalNeeds > 0"
-          class="text-xs bg-green-50 p-3 rounded border-l-4 border-green-400">
+        <div v-else-if="availablePayroll > totalNeeds && totalNeeds > 0" class="text-xs bg-green-50 p-3 rounded border-l-4 border-green-400">
           <div class="flex items-start gap-2">
-            <UIcon
-              name="i-heroicons-check-circle"
-              class="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
+            <UIcon name="i-heroicons-check-circle" class="h-4 w-4 text-green-600 mt-0.5 flex-shrink-0" />
             <div class="space-y-1">
               <p class="font-medium text-green-800">Healthy Coverage</p>
               <p class="text-green-700">
-                You have
-                <strong>{{ formatCurrency(availablePayroll) }}</strong>
-                available to cover
-                <strong>{{ formatCurrency(totalNeeds) }}</strong> in member
-                needs.
+                You have <strong>{{ formatCurrency(availablePayroll) }}</strong> available to cover 
+                <strong>{{ formatCurrency(totalNeeds) }}</strong> in member needs.
               </p>
               <p class="text-green-600">
-                <strong
-                  >Surplus:
-                  {{ formatCurrency(availablePayroll - totalNeeds) }}</strong
-                >
+                <strong>Surplus: {{ formatCurrency(availablePayroll - totalNeeds) }}</strong>
               </p>
             </div>
           </div>
         </div>
 
         <!-- No payroll available -->
-        <div
-          v-else-if="availablePayroll === 0 && totalNeeds > 0"
-          class="text-xs bg-red-50 p-3 rounded border-l-4 border-red-400">
+        <div v-else-if="availablePayroll === 0 && totalNeeds > 0" class="text-xs bg-red-50 p-3 rounded border-l-4 border-red-400">
           <div class="flex items-start gap-2">
-            <UIcon
-              name="i-heroicons-x-circle"
-              class="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
+            <UIcon name="i-heroicons-x-circle" class="h-4 w-4 text-red-600 mt-0.5 flex-shrink-0" />
             <div class="space-y-1">
               <p class="font-medium text-red-800">No Funds for Payroll</p>
               <p class="text-red-700">
-                Member needs total
-                <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their
-                stated requirements, but current revenue minus costs leaves $0
-                for payroll.
+                Member needs total <strong>{{ formatCurrency(totalNeeds) }}</strong> based on their stated requirements, 
+                but current revenue minus costs leaves $0 for payroll.
               </p>
               <p class="text-red-600">
                 Consider increasing revenue or reducing overhead costs.
               </p>
               <p class="text-xs text-red-600 mt-2">
-                💡 Note: This reflects member-stated needs. Your Budget page may
-                show different payroll amounts.
+                💡 Note: This reflects member-stated needs. Your Budget page may show different payroll amounts.
               </p>
             </div>
           </div>
@@ -135,7 +102,7 @@
     </div>
 
     <!-- Empty State -->
-    <div v-else class="text-center py-6 text-neutral-500">
+    <div v-else class="text-center py-6 text-gray-500">
       <UIcon name="i-heroicons-users" class="h-8 w-8 mx-auto mb-2 opacity-50" />
       <p class="text-sm">Add members in setup to see coverage</p>
     </div>
@@ -143,60 +110,56 @@
 </template>
 
 <script setup lang="ts">
-const { members, teamCoverageStats, allocatePayroll, streams } =
-  useCoopBuilder();
-const coopStore = useCoopBuilderStore();
+const { members, teamCoverageStats, allocatePayroll, streams } = useCoopBuilder()
+const coopStore = useCoopBuilderStore()
 
-const stats = computed(() => teamCoverageStats());
-const allocatedMembers = computed(() => allocatePayroll());
-const median = computed(() => Math.round(stats.value.median ?? 0));
+const stats = computed(() => teamCoverageStats())
+const allocatedMembers = computed(() => allocatePayroll())
+const median = computed(() => Math.round(stats.value.median ?? 0))
 
 // Team-level calculations
-const hasMembers = computed(() => members.value.length > 0);
-const totalMembers = computed(() => members.value.length);
-const fullyCoveredCount = computed(
-  () => totalMembers.value - stats.value.under100
-);
+const hasMembers = computed(() => members.value.length > 0)
+const totalMembers = computed(() => members.value.length)
+const fullyCoveredCount = computed(() => totalMembers.value - stats.value.under100)
 
 // Financial calculations
-const totalNeeds = computed(() =>
+const totalNeeds = computed(() => 
   allocatedMembers.value.reduce((sum, m) => sum + (m.minMonthlyNeeds || 0), 0)
-);
+)
 
-const totalRevenue = computed(() =>
+const totalRevenue = computed(() => 
   streams.value.reduce((sum, s) => sum + (s.monthly || 0), 0)
-);
+)
 
-const overheadCosts = computed(() =>
+const overheadCosts = computed(() => 
   coopStore.overheadCosts.reduce((sum, c) => sum + (c.amount || 0), 0)
-);
+)
 
-const availablePayroll = computed(() =>
+const availablePayroll = computed(() => 
   Math.max(0, totalRevenue.value - overheadCosts.value)
-);
+)
 
 // Status colors based on coverage
 const statusColor = computed(() => {
-  const ratio = fullyCoveredCount.value / Math.max(1, totalMembers.value);
-  if (ratio === 1) return "text-green-600";
-  if (ratio >= 0.8) return "text-amber-600";
-  return "text-red-600";
-});
+  const ratio = fullyCoveredCount.value / Math.max(1, totalMembers.value)
+  if (ratio === 1) return 'text-green-600'
+  if (ratio >= 0.8) return 'text-amber-600'
+  return 'text-red-600'
+})
 
 const underCoveredColor = computed(() => {
-  if (stats.value.under100 === 0) return "text-green-600";
-  if (stats.value.under100 <= Math.ceil(totalMembers.value * 0.2))
-    return "text-amber-600";
-  return "text-red-600";
-});
+  if (stats.value.under100 === 0) return 'text-green-600'
+  if (stats.value.under100 <= Math.ceil(totalMembers.value * 0.2)) return 'text-amber-600'
+  return 'text-red-600'
+})
 
 // Currency formatting
 function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
     minimumFractionDigits: 0,
     maximumFractionDigits: 0,
-  }).format(amount);
+  }).format(amount)
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/components/dashboard/RevenueMixCard.vue b/components/dashboard/RevenueMixCard.vue
index 889f30e..aec8196 100644
--- a/components/dashboard/RevenueMixCard.vue
+++ b/components/dashboard/RevenueMixCard.vue
@@ -7,14 +7,12 @@
         <h3 class="font-semibold">Revenue Mix</h3>
       </div>
     </template>
-
+    
     <div class="space-y-6">
-      <div
-        v-if="mix.length === 0"
-        class="text-sm text-neutral-600 text-center py-8">
+      <div v-if="mix.length === 0" class="text-sm text-gray-600 text-center py-8">
         Add revenue streams to see mix.
       </div>
-
+      
       <div v-else>
         <!-- Revenue bars -->
         <div v-for="s in mix.slice(0, 3)" :key="s.label" class="mb-2">
@@ -22,16 +20,17 @@
             <span class="truncate">{{ s.label }}</span>
             <span>{{ Math.round(s.pct * 100) }}%</span>
           </div>
-          <div class="h-2 bg-neutral-200 rounded">
-            <div
-              class="h-2 rounded"
+          <div class="h-2 bg-gray-200 rounded">
+            <div 
+              class="h-2 rounded" 
               :class="getBarColor(mix.indexOf(s))"
-              :style="{ width: s.pct * 100 + '%' }" />
+              :style="{ width: (s.pct * 100) + '%' }"
+            />
           </div>
         </div>
 
         <!-- Subtext with concentration warning -->
-        <div class="text-sm text-neutral-600 text-center">
+        <div class="text-sm text-gray-600 text-center">
           Top stream {{ Math.round(topPct * 100) }}%
           <span v-if="topPct > 0.5" class="text-amber-600">⚠</span>
         </div>
@@ -41,13 +40,17 @@
 </template>
 
 <script setup lang="ts">
-const { revenueMix, concentrationPct } = useCoopBuilder();
+const { revenueMix, concentrationPct } = useCoopBuilder()
 
-const mix = computed(() => revenueMix());
-const topPct = computed(() => concentrationPct());
+const mix = computed(() => revenueMix())
+const topPct = computed(() => concentrationPct())
 
 function getBarColor(index: number): string {
-  const colors = ["bg-blue-500", "bg-green-500", "bg-amber-500"];
-  return colors[index % colors.length];
+  const colors = [
+    'bg-blue-500',
+    'bg-green-500', 
+    'bg-amber-500'
+  ]
+  return colors[index % colors.length]
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/components/dashboard/RunwayCard.vue b/components/dashboard/RunwayCard.vue
index afa6aa1..3f1967a 100644
--- a/components/dashboard/RunwayCard.vue
+++ b/components/dashboard/RunwayCard.vue
@@ -7,53 +7,56 @@
           <div class="w-2 h-2 rounded-full" :class="statusDotColor" />
           <h3 class="font-semibold">Runway</h3>
         </div>
-        <UBadge
-          :color="operatingMode === 'target' ? 'blue' : 'neutral'"
-          size="xs">
-          {{ operatingMode === "target" ? "Target Mode" : "Min Mode" }}
+        <UBadge 
+          :color="operatingMode === 'target' ? 'blue' : 'gray'" 
+          size="xs"
+        >
+          {{ operatingMode === 'target' ? 'Target Mode' : 'Min Mode' }}
         </UBadge>
       </div>
     </template>
-
+    
     <div class="text-center space-y-6">
       <div class="text-2xl font-semibold" :class="statusColor">
         {{ displayRunway }}
       </div>
-      <div class="text-sm text-neutral-600">at current spending</div>
+      <div class="text-sm text-gray-600">
+        at current spending
+      </div>
     </div>
   </UCard>
 </template>
 
 <script setup lang="ts">
-const { runwayMonths, operatingMode } = useCoopBuilder();
+const { runwayMonths, operatingMode } = useCoopBuilder()
 
-const runway = computed(() => runwayMonths());
+const runway = computed(() => runwayMonths())
 
 const displayRunway = computed(() => {
-  const months = runway.value;
-  if (!isFinite(months)) return "∞";
-  if (months < 1) return "<1 month";
-  return `${Math.round(months)} months`;
-});
+  const months = runway.value
+  if (!isFinite(months)) return '∞'
+  if (months < 1) return '<1 month'
+  return `${Math.round(months)} months`
+})
 
 const statusColor = computed(() => {
-  const months = runway.value;
-  if (!isFinite(months) || months >= 6) return "text-green-600";
-  if (months >= 3) return "text-amber-600";
-  return "text-red-600";
-});
+  const months = runway.value
+  if (!isFinite(months) || months >= 6) return 'text-green-600'
+  if (months >= 3) return 'text-amber-600'
+  return 'text-red-600'
+})
 
 const statusDotColor = computed(() => {
-  const months = runway.value;
-  if (!isFinite(months) || months >= 6) return "bg-green-500";
-  if (months >= 3) return "bg-amber-500";
-  return "bg-red-500";
-});
+  const months = runway.value
+  if (!isFinite(months) || months >= 6) return 'bg-green-500'
+  if (months >= 3) return 'bg-amber-500'
+  return 'bg-red-500'
+})
 
 const borderColor = computed(() => {
-  const months = runway.value;
-  if (!isFinite(months) || months >= 6) return "ring-1 ring-green-200";
-  if (months >= 3) return "ring-1 ring-amber-200";
-  return "ring-1 ring-red-200";
-});
-</script>
+  const months = runway.value
+  if (!isFinite(months) || months >= 6) return 'ring-1 ring-green-200'
+  if (months >= 3) return 'ring-1 ring-amber-200'
+  return 'ring-1 ring-red-200'
+})
+</script>
\ No newline at end of file
diff --git a/components/shared/CoverageBar.vue b/components/shared/CoverageBar.vue
index c5601f8..415b128 100644
--- a/components/shared/CoverageBar.vue
+++ b/components/shared/CoverageBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center gap-2">
-    <div class="flex-1 h-3 bg-neutral-200 rounded-full overflow-hidden">
+    <div class="flex-1 h-3 bg-gray-200 rounded-full overflow-hidden">
       <div
         class="h-full rounded-full transition-all duration-300"
         :class="barColor"
diff --git a/components/shared/OperatingModeToggle.vue b/components/shared/OperatingModeToggle.vue
index 2325983..9628c45 100644
--- a/components/shared/OperatingModeToggle.vue
+++ b/components/shared/OperatingModeToggle.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="flex items-center gap-2">
-    <span class="text-sm text-neutral-600">Mode:</span>
+    <span class="text-sm text-gray-600">Mode:</span>
     <UButtonGroup>
       <UButton
         :variant="modelValue === 'minimum' ? 'solid' : 'ghost'"
-        color="neutral"
+        color="gray"
         size="xs"
-        @click="$emit('update:modelValue', 'minimum')">
+        @click="$emit('update:modelValue', 'minimum')"
+      >
         Min Mode
       </UButton>
       <UButton
-        :variant="modelValue === 'target' ? 'solid' : 'ghost'"
+        :variant="modelValue === 'target' ? 'solid' : 'ghost'" 
         color="primary"
         size="xs"
-        @click="$emit('update:modelValue', 'target')">
+        @click="$emit('update:modelValue', 'target')"
+      >
         Target Mode
       </UButton>
     </UButtonGroup>
@@ -22,13 +24,13 @@
 
 <script setup lang="ts">
 interface Props {
-  modelValue: "minimum" | "target";
+  modelValue: 'minimum' | 'target'
 }
 
 interface Emits {
-  (e: "update:modelValue", value: "minimum" | "target"): void;
+  (e: 'update:modelValue', value: 'minimum' | 'target'): void
 }
 
-defineProps<Props>();
-defineEmits<Emits>();
-</script>
+defineProps<Props>()
+defineEmits<Emits>()
+</script>
\ No newline at end of file
diff --git a/composables/useCoopInfo.ts b/composables/useCoopInfo.ts
deleted file mode 100644
index f6bf90d..0000000
--- a/composables/useCoopInfo.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { ref, watch, readonly } from 'vue'
-
-export interface CoopInfo {
-  cooperativeName: string
-  dateEstablished: string
-  purpose: string
-  coreValues: string
-  legalStructure: string
-  registeredLocation: string
-  isLegallyRegistered: boolean
-}
-
-const STORAGE_KEY = 'coop-info'
-
-// Global reactive state
-const coopInfo = ref<CoopInfo>({
-  cooperativeName: '',
-  dateEstablished: '',
-  purpose: '',
-  coreValues: '',
-  legalStructure: '',
-  registeredLocation: '',
-  isLegallyRegistered: false
-})
-
-// Flag to prevent loading during initial save
-let isInitialized = false
-
-export const useCoopInfo = () => {
-  
-  // Load data from localStorage on first use
-  if (!isInitialized && process.client) {
-    const saved = localStorage.getItem(STORAGE_KEY)
-    if (saved) {
-      try {
-        const parsedData = JSON.parse(saved)
-        coopInfo.value = { ...coopInfo.value, ...parsedData }
-      } catch (error) {
-        console.error('Error loading coop info:', error)
-      }
-    }
-    isInitialized = true
-    
-    // Set up watcher to save changes
-    watch(
-      coopInfo,
-      (newData) => {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(newData))
-      },
-      { deep: true }
-    )
-  }
-  
-  // Helper function to update specific fields
-  const updateCoopInfo = (updates: Partial<CoopInfo>) => {
-    coopInfo.value = { ...coopInfo.value, ...updates }
-  }
-  
-  // Helper function to get display name (with fallback)
-  const getDisplayName = () => {
-    return coopInfo.value.cooperativeName || 'Worker Cooperative'
-  }
-  
-  // Helper function to get organization name for different contexts
-  const getOrgName = () => {
-    return coopInfo.value.cooperativeName || 'Organization'
-  }
-  
-  // Helper function to check if basic info is complete
-  const isBasicInfoComplete = () => {
-    return !!(coopInfo.value.cooperativeName && coopInfo.value.cooperativeName.trim())
-  }
-  
-  return {
-    coopInfo: readonly(coopInfo),
-    updateCoopInfo,
-    getDisplayName,
-    getOrgName,
-    isBasicInfoComplete
-  }
-}
\ No newline at end of file
diff --git a/middleware/redirect-dashboard.global.ts b/middleware/redirect-dashboard.global.ts
new file mode 100644
index 0000000..461a947
--- /dev/null
+++ b/middleware/redirect-dashboard.global.ts
@@ -0,0 +1,6 @@
+export default defineNuxtRouteMiddleware((to) => {
+  // Redirect root path to dashboard
+  if (to.path === '/') {
+    return navigateTo('/dashboard')
+  }
+})
\ No newline at end of file
diff --git a/pages/.DS_Store b/pages/.DS_Store
index 5008ddf..2e04f3a 100644
Binary files a/pages/.DS_Store and b/pages/.DS_Store differ
diff --git a/pages/budget.vue b/pages/budget.vue
index 3f46b2f..0fded59 100644
--- a/pages/budget.vue
+++ b/pages/budget.vue
@@ -11,7 +11,7 @@
                 'px-4 py-2 font-medium transition-none',
                 activeView === 'monthly'
                   ? 'bg-black text-white'
-                  : 'bg-white text-black hover:bg-neutral-100',
+                  : 'bg-white text-black hover:bg-zinc-100',
               ]">
               Monthly
             </button>
@@ -21,7 +21,7 @@
                 'px-4 py-2 font-medium border-l-2 border-black transition-none',
                 activeView === 'annual'
                   ? 'bg-black text-white'
-                  : 'bg-white text-black hover:bg-neutral-100',
+                  : 'bg-white text-black hover:bg-zinc-100',
               ]">
               Annual
             </button>
@@ -48,14 +48,14 @@
         <div class="max-w-md mx-auto space-y-6">
           <div class="text-6xl">📊</div>
           <h3 class="text-xl font-bold text-black">No budget data found</h3>
-          <p class="text-neutral-600">
+          <p class="text-gray-600">
             Your budget is empty. Complete the setup wizard to add your revenue
             streams, team members, and expenses.
           </p>
           <div class="flex justify-center">
             <NuxtLink
               to="/coop-builder"
-              class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-black hover:bg-neutral-800 border-2 border-black transition-colors">
+              class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-black hover:bg-zinc-800 border-2 border-black transition-colors">
               Complete Setup Wizard
             </NuxtLink>
           </div>
@@ -79,7 +79,7 @@
                 <th
                   v-for="month in monthlyHeaders"
                   :key="month.key"
-                  class="border-r border-neutral-400 px-2 py-3 text-center font-medium min-w-[80px] last:border-r-0">
+                  class="border-r border-gray-400 px-2 py-3 text-center font-medium min-w-[80px] last:border-r-0">
                   {{ month.label }}
                 </th>
               </tr>
@@ -94,7 +94,7 @@
                       @click="showAddRevenueModal = true"
                       size="xs"
                       :ui="{
-                        base: 'bg-white text-black hover:bg-neutral-200 transition-none',
+                        base: 'bg-white text-black hover:bg-zinc-200 transition-none',
                       }">
                       + Add
                     </UButton>
@@ -107,9 +107,9 @@
               <template
                 v-for="(items, categoryName) in groupedRevenue"
                 :key="`revenue-${categoryName}`">
-                <tr v-if="items.length > 0" class="border-t border-neutral-300">
+                <tr v-if="items.length > 0" class="border-t border-gray-300">
                   <td
-                    class="px-4 py-1 font-semibold sticky left-0 bg-neutral-100 z-10 border-black"
+                    class="px-4 py-1 font-semibold sticky left-0 bg-zinc-100 z-10 border-black"
                     :colspan="monthlyHeaders.length + 1">
                     {{ categoryName }}
                   </td>
@@ -118,17 +118,17 @@
                   v-for="item in items"
                   :key="item.id"
                   :class="[
-                    'border-t border-neutral-200 hover:bg-neutral-50 transition-all duration-300',
+                    'border-t border-gray-200 hover:bg-zinc-50 transition-all duration-300',
                     highlightedItemId === item.id &&
                       'bg-yellow-100 animate-pulse',
                   ]">
                   <td
-                    class="border-r-1 border-neutral-200 px-4 py-2 sticky left-0 bg-white z-10">
+                    class="border-r-1 border-zinc-200 px-4 py-2 sticky left-0 bg-white z-10">
                     <div class="flex items-center justify-between group">
                       <div class="flex-1">
                         <div class="text-left w-full">
                           <div class="font-medium">{{ item.name }}</div>
-                          <div class="text-xs text-neutral-600">
+                          <div class="text-xs text-gray-600">
                             {{ item.subcategory }}
                           </div>
                         </div>
@@ -147,7 +147,7 @@
                   <td
                     v-for="month in monthlyHeaders"
                     :key="month.key"
-                    class="border-r border-neutral-200 px-1 py-1 last:border-r-0">
+                    class="border-r border-gray-200 px-1 py-1 last:border-r-0">
                     <input
                       type="text"
                       :value="formatValue(item.monthlyValues?.[month.key] || 0)"
@@ -157,9 +157,9 @@
                       "
                       @blur="handleBlur($event, 'revenue', item.id, month.key)"
                       @keydown.enter="handleEnter($event)"
-                      class="w-full text-right px-1 py-0.5 border border-transparent hover:border-neutral-400 focus:border-black focus:outline-none transition-none"
+                      class="w-full text-right px-1 py-0.5 border border-transparent hover:border-gray-400 focus:border-black focus:outline-none transition-none"
                       :class="{
-                        'bg-neutral-50': !item.monthlyValues?.[month.key],
+                        'bg-zinc-50': !item.monthlyValues?.[month.key],
                       }" />
                   </td>
                 </tr>
@@ -167,9 +167,9 @@
 
               <!-- Total Revenue Row -->
               <tr
-                class="border-t-1 border-black border-b-1 font-bold bg-neutral-100">
+                class="border-t-1 border-black border-b-1 font-bold bg-zinc-100">
                 <td
-                  class="border-r-1 border-black px-4 py-2 sticky left-0 bg-neutral-100 z-10">
+                  class="border-r-1 border-black px-4 py-2 sticky left-0 bg-zinc-100 z-10">
                   TOTAL REVENUE
                 </td>
                 <td
@@ -189,7 +189,7 @@
                       @click="showAddExpenseModal = true"
                       size="xs"
                       :ui="{
-                        base: 'bg-white text-black hover:bg-neutral-200 transition-none',
+                        base: 'bg-white text-black hover:bg-zinc-200 transition-none',
                       }">
                       + Add
                     </UButton>
@@ -202,9 +202,9 @@
               <template
                 v-for="(items, categoryName) in groupedExpenses"
                 :key="`expense-${categoryName}`">
-                <tr v-if="items.length > 0" class="border-t border-neutral-300">
+                <tr v-if="items.length > 0" class="border-t border-gray-300">
                   <td
-                    class="px-4 py-1 font-semibold sticky left-0 bg-neutral-100 z-10"
+                    class="px-4 py-1 font-semibold sticky left-0 bg-zinc-100 z-10"
                     :colspan="monthlyHeaders.length + 1">
                     {{ categoryName }}
                   </td>
@@ -213,12 +213,12 @@
                   v-for="item in items"
                   :key="item.id"
                   :class="[
-                    'border-t border-neutral-200 hover:bg-neutral-50 transition-all duration-300',
+                    'border-t border-gray-200 hover:bg-zinc-50 transition-all duration-300',
                     highlightedItemId === item.id &&
                       'bg-yellow-100 animate-pulse',
                   ]">
                   <td
-                    class="border-r-1 border-neutral-200 px-4 py-2 sticky left-0 bg-white z-10">
+                    class="border-r-1 border-zinc-200 px-4 py-2 sticky left-0 bg-white z-10">
                     <div class="flex items-center justify-between group">
                       <div class="flex-1">
                         <div class="text-left w-full">
@@ -236,7 +236,7 @@
                               Auto
                             </span>
                           </div>
-                          <div class="text-xs text-neutral-600" v-if="!isPayrollItem(item.id)">
+                          <div class="text-xs text-gray-600" v-if="!isPayrollItem(item.id)">
                             {{ item.subcategory }}
                           </div>
                         </div>
@@ -258,7 +258,7 @@
                   <td
                     v-for="month in monthlyHeaders"
                     :key="month.key"
-                    class="border-r border-neutral-200 px-1 py-1 last:border-r-0">
+                    class="border-r border-gray-200 px-1 py-1 last:border-r-0">
                     <input
                       type="text"
                       :value="formatValue(item.monthlyValues?.[month.key] || 0)"
@@ -271,12 +271,12 @@
                       @keydown.enter="handleEnter($event)"
                       class="w-full text-right px-1 py-0.5 border-2 transition-none"
                       :class="{
-                        'bg-neutral-50':
+                        'bg-zinc-50':
                           !item.monthlyValues?.[month.key] &&
                           !isPayrollItem(item.id),
-                        'bg-neutral-50 border-none cursor-not-allowed text-neutral-500':
+                        'bg-zinc-50 border-none cursor-not-allowed text-zinc-500':
                           isPayrollItem(item.id),
-                        'border-transparent hover:border-neutral-400 focus:border-black focus:outline-none':
+                        'border-transparent hover:border-zinc-400 focus:border-black focus:outline-none':
                           !isPayrollItem(item.id),
                       }"
                       :title="
@@ -289,15 +289,15 @@
               </template>
 
               <!-- Total Expenses Row -->
-              <tr class="border-t-1 border-black font-bold bg-neutral-100">
+              <tr class="border-t-1 border-black font-bold bg-zinc-100">
                 <td
-                  class="border-r-1 border-black px-4 py-2 sticky left-0 bg-neutral-100 z-10">
+                  class="border-r-1 border-black px-4 py-2 sticky left-0 bg-zinc-100 z-10">
                   TOTAL EXPENSES
                 </td>
                 <td
                   v-for="month in monthlyHeaders"
                   :key="month.key"
-                  class="border-r border-neutral-400 px-2 py-2 text-right last:border-r-0">
+                  class="border-r border-gray-400 px-2 py-2 text-right last:border-r-0">
                   {{ formatCurrency(monthlyTotals[month.key]?.expenses || 0) }}
                 </td>
               </tr>
@@ -311,7 +311,7 @@
                 <td
                   v-for="month in monthlyHeaders"
                   :key="month.key"
-                  class="border-r border-neutral-400 px-2 py-3 text-right last:border-r-0"
+                  class="border-r border-gray-400 px-2 py-3 text-right last:border-r-0"
                   :class="
                     getNetIncomeClass(monthlyTotals[month.key]?.net || 0)
                   ">
@@ -320,7 +320,7 @@
               </tr>
 
               <!-- Cumulative Balance Row -->
-              <tr class="border-t-1 border-neutral-400 font-bold text-lg bg-blue-50">
+              <tr class="border-t-1 border-gray-400 font-bold text-lg bg-blue-50">
                 <td
                   class="border-r-1 border-black px-4 py-3 sticky left-0 bg-blue-50 z-10">
                   CUMULATIVE BALANCE
@@ -328,7 +328,7 @@
                 <td
                   v-for="month in monthlyHeaders"
                   :key="month.key"
-                  class="border-r border-neutral-400 px-2 py-3 text-right last:border-r-0"
+                  class="border-r border-gray-400 px-2 py-3 text-right last:border-r-0"
                   :class="
                     getCumulativeBalanceClass(cumulativeBalances[month.key] || 0)
                   ">
@@ -403,19 +403,19 @@
                     placeholder="Enter annual amount (e.g., 12000)"
                     size="lg">
                     <template #leading>
-                      <span class="text-neutral-500 font-medium">$</span>
+                      <span class="text-gray-500 font-medium">$</span>
                     </template>
                   </UInput>
                 </UFormField>
-                <div class="bg-white rounded-lg p-4 border border-neutral-200">
+                <div class="bg-white rounded-lg p-4 border border-gray-200">
                   <div class="mb-2">
-                    <span class="text-sm font-medium text-neutral-700"
+                    <span class="text-sm font-medium text-gray-700"
                       >Distribution Preview</span
                     >
                   </div>
-                  <p class="text-sm text-neutral-600">
+                  <p class="text-sm text-gray-600">
                     This will divide
-                    <span class="font-semibold text-neutral-900"
+                    <span class="font-semibold text-gray-900"
                       >${{ newRevenue.annualAmount || 0 }}</span
                     >
                     equally across all 12 months (<span
@@ -440,17 +440,17 @@
                     placeholder="Enter monthly amount (e.g., 1000)"
                     size="lg">
                     <template #leading>
-                      <span class="text-neutral-500 font-medium">$</span>
+                      <span class="text-gray-500 font-medium">$</span>
                     </template>
                   </UInput>
                 </UFormField>
-                <div class="bg-white rounded-lg p-4 border border-neutral-200">
+                <div class="bg-white rounded-lg p-4 border border-gray-200">
                   <div class="mb-2">
-                    <span class="text-sm font-medium text-neutral-700"
+                    <span class="text-sm font-medium text-gray-700"
                       >Monthly Preview</span
                     >
                   </div>
-                  <p class="text-sm text-neutral-600">
+                  <p class="text-sm text-gray-600">
                     This will set
                     <span class="font-semibold text-green-600"
                       >${{ newRevenue.monthlyAmount || 0 }}</span
@@ -463,8 +463,8 @@
               <!-- Start Empty -->
               <div v-else>
                 <div
-                  class="bg-white rounded-lg p-6 border border-neutral-200 text-center">
-                  <p class="text-sm text-neutral-600">
+                  class="bg-white rounded-lg p-6 border border-gray-200 text-center">
+                  <p class="text-sm text-gray-600">
                     The revenue item will be created with no initial values. You
                     can fill them in later directly in the budget table.
                   </p>
@@ -545,19 +545,19 @@
                     size="lg"
                     class="text-sm font-medium w-full">
                     <template #leading>
-                      <span class="text-neutral-500 font-medium">$</span>
+                      <span class="text-gray-500 font-medium">$</span>
                     </template>
                   </UInput>
                 </UFormField>
-                <div class="bg-white rounded-lg p-4 border border-neutral-200">
+                <div class="bg-white rounded-lg p-4 border border-gray-200">
                   <div class="mb-2">
-                    <span class="text-sm font-medium text-neutral-700"
+                    <span class="text-sm font-medium text-gray-700"
                       >Distribution Preview</span
                     >
                   </div>
-                  <p class="text-sm text-neutral-600">
+                  <p class="text-sm text-gray-600">
                     This will divide
-                    <span class="font-semibold text-neutral-900"
+                    <span class="font-semibold text-gray-900"
                       >${{ newExpense.annualAmount || 0 }}</span
                     >
                     equally across all 12 months (<span
@@ -583,17 +583,17 @@
                     size="lg"
                     class="text-sm font-medium w-full">
                     <template #leading>
-                      <span class="text-neutral-500 font-medium">$</span>
+                      <span class="text-gray-500 font-medium">$</span>
                     </template>
                   </UInput>
                 </UFormField>
-                <div class="bg-white rounded-lg p-4 border border-neutral-200">
+                <div class="bg-white rounded-lg p-4 border border-gray-200">
                   <div class="mb-2">
-                    <span class="text-sm font-medium text-neutral-700"
+                    <span class="text-sm font-medium text-gray-700"
                       >Monthly Preview</span
                     >
                   </div>
-                  <p class="text-sm text-neutral-600">
+                  <p class="text-sm text-gray-600">
                     This will set
                     <span class="font-semibold text-red-600"
                       >${{ newExpense.monthlyAmount || 0 }}</span
@@ -606,8 +606,8 @@
               <!-- Start Empty -->
               <div v-else>
                 <div
-                  class="bg-white rounded-lg p-6 border border-neutral-200 text-center">
-                  <p class="text-sm text-neutral-600">
+                  class="bg-white rounded-lg p-6 border border-gray-200 text-center">
+                  <p class="text-sm text-gray-600">
                     The expense item will be created with no initial values. You
                     can fill them in later directly in the budget table.
                   </p>
@@ -650,8 +650,8 @@
           <!-- Revenue Section -->
           <div>
             <h4 class="font-semibold text-green-600 mb-2">📈 Revenue Calculation</h4>
-            <p class="text-sm text-neutral-600 mb-2">Revenue comes from your setup wizard streams and any manual additions:</p>
-            <ul class="text-sm text-neutral-600 space-y-1 ml-4">
+            <p class="text-sm text-gray-600 mb-2">Revenue comes from your setup wizard streams and any manual additions:</p>
+            <ul class="text-sm text-gray-600 space-y-1 ml-4">
               <li>• Monthly amounts you entered for each revenue stream</li>
               <li>• Varies by month based on your specific projections</li>
             </ul>
@@ -660,7 +660,7 @@
           <!-- Payroll Section -->
           <div>
             <h4 class="font-semibold text-blue-600 mb-2">👥 Smart Payroll Calculation</h4>
-            <p class="text-sm text-neutral-600 mb-2">Payroll uses a <strong>cumulative balance approach</strong> to ensure sustainability:</p>
+            <p class="text-sm text-gray-600 mb-2">Payroll uses a <strong>cumulative balance approach</strong> to ensure sustainability:</p>
             <div class="bg-blue-50 border border-blue-200 rounded p-3 text-sm">
               <p class="font-medium mb-2">Step-by-step process:</p>
               <ol class="space-y-1 ml-4">
@@ -671,7 +671,7 @@
                 <li>5. Ensure cumulative balance doesn't fall below threshold</li>
               </ol>
             </div>
-            <p class="text-sm text-neutral-600 mt-2">
+            <p class="text-sm text-gray-600 mt-2">
               This means payroll varies by month - higher in good cash flow months, lower when cash is tight.
             </p>
           </div>
@@ -679,8 +679,8 @@
           <!-- Cumulative Balance Section -->  
           <div>
             <h4 class="font-semibold text-purple-600 mb-2">💰 Cumulative Balance</h4>
-            <p class="text-sm text-neutral-600 mb-2">Shows your running cash position over time:</p>
-            <ul class="text-sm text-neutral-600 space-y-1 ml-4">
+            <p class="text-sm text-gray-600 mb-2">Shows your running cash position over time:</p>
+            <ul class="text-sm text-gray-600 space-y-1 ml-4">
               <li>• Starts at $0 (current cash position)</li>
               <li>• Adds each month's net income (Revenue - All Expenses)</li>
               <li>• Helps you see when cash might run low</li>
@@ -691,7 +691,7 @@
           <!-- Policy Explanation -->
           <div>
             <h4 class="font-semibold text-orange-600 mb-2">⚖️ Pay Policy: {{ getPolicyName() }}</h4>
-            <div class="text-sm text-neutral-600">
+            <div class="text-sm text-gray-600">
               <p v-if="coopBuilderStore.policy?.relationship === 'equal-pay'">
                 Everyone gets equal hourly wage (${{ coopBuilderStore.equalHourlyWage || 0 }}/hour) based on their monthly hours.
               </p>
@@ -704,8 +704,8 @@
             </div>
           </div>
 
-          <div class="bg-neutral-50 border border-neutral-200 rounded p-3">
-            <p class="text-sm text-neutral-700">
+          <div class="bg-gray-50 border border-gray-200 rounded p-3">
+            <p class="text-sm text-gray-700">
               <strong>Key insight:</strong> This system prioritizes sustainability over theoretical maximums. 
               You might not always get full theoretical wages, but you'll never run out of cash.
             </p>
@@ -1231,7 +1231,7 @@ function formatCurrency(amount: number): string {
 function getNetIncomeClass(amount: number): string {
   if (amount > 0) return "text-green-600 font-bold";
   if (amount < 0) return "text-red-600 font-bold";
-  return "text-neutral-600";
+  return "text-gray-600";
 }
 
 function getCumulativeBalanceClass(amount: number): string {
diff --git a/pages/coach/skills-to-offers.vue b/pages/coach/skills-to-offers.vue
new file mode 100644
index 0000000..8a386db
--- /dev/null
+++ b/pages/coach/skills-to-offers.vue
@@ -0,0 +1,596 @@
+<template>
+  <div class="min-h-screen bg-neutral-50 pb-24">
+    <div class="max-w-4xl mx-auto p-6">
+      <!-- Header -->
+      <div class="mb-8">
+        <div class="flex items-start justify-between">
+          <div>
+            <h1 class="text-3xl font-black text-black mb-2">
+              Turn skills into fair, sellable offers
+            </h1>
+            <p class="text-neutral-600">
+              Tell us what you're good at and who you help. We'll suggest offers that match your co-op's shared capacity.
+            </p>
+          </div>
+          <div class="flex items-center gap-3">
+            <button
+              @click="skipCoach"
+              class="px-4 py-2 text-sm bg-neutral-50 border-2 border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-100 hover:border-neutral-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+              :aria-label="'Skip coach and go to streams tab'"
+            >
+              Skip coach → Streams
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Section A: Name your strengths -->
+      <section class="mb-8" aria-labelledby="strengths-heading">
+        <div class="flex items-center gap-2 mb-4">
+          <h2 id="strengths-heading" class="text-xl font-bold text-black">
+            A) Name your strengths
+          </h2>
+          <div class="relative group">
+            <button 
+              class="w-4 h-4 text-neutral-400 hover:text-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-full"
+              aria-label="Why limit to 3 skills per member?"
+            >
+              <svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-black text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+              Focus keeps offers shippable
+              <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-black"></div>
+            </div>
+          </div>
+        </div>
+        <p class="text-neutral-600 mb-6">
+          Pick what you can reliably do as a team. We'll keep it simple.
+        </p>
+        
+        <div class="space-y-6">
+          <div 
+            v-for="member in members" 
+            :key="member.id"
+            class="p-6 bg-white border-2 border-neutral-200 rounded-xl shadow-sm"
+          >
+            <div class="flex items-center justify-between mb-4">
+              <div>
+                <h3 class="font-bold text-black">{{ member.name }}</h3>
+                <p v-if="member.role" class="text-sm text-neutral-600">{{ member.role }}</p>
+              </div>
+              <div class="text-sm text-neutral-500">
+                {{ getSelectedSkillsCount(member.id) }}/3 skills selected
+              </div>
+            </div>
+            
+            <div class="flex flex-wrap gap-2">
+              <button
+                v-for="skill in availableSkills"
+                :key="skill.id"
+                @click="toggleSkill(member.id, skill.id)"
+                :disabled="!canSelectSkill(member.id, skill.id)"
+                :class="[
+                  'px-3 py-1.5 text-sm rounded-full border-2 transition-all duration-200',
+                  'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                  isSkillSelected(member.id, skill.id)
+                    ? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700'
+                    : canSelectSkill(member.id, skill.id)
+                    ? 'bg-white text-neutral-700 border-neutral-300 hover:border-blue-400 hover:text-blue-600'
+                    : 'bg-neutral-100 text-neutral-400 border-neutral-200 cursor-not-allowed'
+                ]"
+                :aria-pressed="isSkillSelected(member.id, skill.id)"
+                :aria-label="`${isSkillSelected(member.id, skill.id) ? 'Remove' : 'Add'} ${skill.label} skill for ${member.name}`"
+              >
+                {{ skill.label }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Section B: Who do you help? -->
+      <section class="mb-8" aria-labelledby="problems-heading">
+        <div class="flex items-center gap-2 mb-4">
+          <h2 id="problems-heading" class="text-xl font-bold text-black">
+            B) Who do you help?
+          </h2>
+          <div class="relative group">
+            <button 
+              class="w-4 h-4 text-neutral-400 hover:text-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-full"
+              aria-label="Why limit to 2 problem types?"
+            >
+              <svg fill="currentColor" viewBox="0 0 20 20" class="w-4 h-4">
+                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+              </svg>
+            </button>
+            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 bg-black text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+              Focus keeps offers shippable
+              <div class="absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-black"></div>
+            </div>
+          </div>
+        </div>
+        <p class="text-neutral-600 mb-6">
+          Choose the problems you can solve this month. We'll suggest time-boxed offers.
+        </p>
+        
+        <div class="flex flex-wrap gap-3">
+          <div 
+            v-for="problem in availableProblems" 
+            :key="problem.id"
+            class="relative"
+          >
+            <button
+              @click="toggleProblem(problem.id)"
+              :disabled="!canSelectProblem(problem.id)"
+              :class="[
+                'px-4 py-2 text-sm rounded-lg border-2 transition-all duration-200',
+                'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                isProblemSelected(problem.id)
+                  ? 'bg-green-600 text-white border-green-600 hover:bg-green-700'
+                  : canSelectProblem(problem.id)
+                  ? 'bg-white text-neutral-700 border-neutral-300 hover:border-green-400 hover:text-green-600'
+                  : 'bg-neutral-100 text-neutral-400 border-neutral-200 cursor-not-allowed'
+              ]"
+              :aria-pressed="isProblemSelected(problem.id)"
+              :aria-label="`${isProblemSelected(problem.id) ? 'Remove' : 'Add'} ${problem.label} problem type`"
+            >
+              {{ problem.label }}
+            </button>
+            
+            <!-- Examples popover trigger -->
+            <button
+              @click="toggleExamples(problem.id)"
+              @keydown.escape="hideExamples"
+              class="ml-1 text-xs text-neutral-500 hover:text-neutral-700 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded"
+              :aria-label="`See examples for ${problem.label}`"
+              :aria-expanded="showExamples === problem.id"
+            >
+              see examples
+            </button>
+            
+            <!-- Examples popover -->
+            <div
+              v-if="showExamples === problem.id"
+              class="absolute z-10 mt-2 p-3 bg-white border-2 border-neutral-200 rounded-lg shadow-lg min-w-64 max-w-sm"
+              role="tooltip"
+              :aria-label="`Examples for ${problem.label}`"
+            >
+              <div class="text-sm">
+                <p class="font-medium text-black mb-2">Examples:</p>
+                <ul class="space-y-1 text-neutral-700">
+                  <li v-for="example in problem.examples" :key="example" class="flex items-start">
+                    <span class="text-neutral-400 mr-2">•</span>
+                    <span>{{ example }}</span>
+                  </li>
+                </ul>
+              </div>
+              <button
+                @click="hideExamples"
+                class="mt-2 text-xs text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded"
+                aria-label="Close examples"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        <div class="mt-4 text-sm text-neutral-500">
+          {{ selectedProblems.length }}/2 problem types selected
+        </div>
+      </section>
+
+      <!-- Section C: Suggested offers -->
+      <section class="mb-8" aria-labelledby="offers-heading">
+        <h2 id="offers-heading" class="text-xl font-bold text-black mb-4">
+          C) Suggested offers
+        </h2>
+        
+        <!-- Loading state -->
+        <div 
+          v-if="loading"
+          class="text-center py-12 bg-white border-2 border-dashed border-blue-200 rounded-xl"
+        >
+          <div class="max-w-md mx-auto">
+            <div class="w-16 h-16 mx-auto mb-4 bg-blue-50 rounded-full flex items-center justify-center">
+              <svg class="w-8 h-8 text-blue-500 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            </div>
+            <h3 class="font-medium text-blue-900 mb-2">Generating offers...</h3>
+            <p class="text-blue-700">
+              Creating personalized revenue suggestions based on your selections.
+            </p>
+          </div>
+        </div>
+
+        <!-- Empty state -->
+        <div 
+          v-else-if="suggestedOffers.length === 0"
+          class="text-center py-12 bg-white border-2 border-dashed border-neutral-300 rounded-xl"
+        >
+          <div class="max-w-md mx-auto">
+            <div class="w-16 h-16 mx-auto mb-4 bg-neutral-100 rounded-full flex items-center justify-center">
+              <svg class="w-8 h-8 text-neutral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+              </svg>
+            </div>
+            <h3 class="font-medium text-neutral-900 mb-2">No offers yet</h3>
+            <p class="text-neutral-600 mb-4">
+              Pick a few skills and a problem—we'll suggest something you can sell this month.
+            </p>
+            <p class="text-sm text-neutral-500">
+              We need at least one shared skill and one problem type to suggest offers.
+            </p>
+          </div>
+        </div>
+        
+        <!-- Offer cards -->
+        <div v-else class="grid gap-6 md:grid-cols-2">
+          <div
+            v-for="offer in suggestedOffers"
+            :key="offer.id"
+            class="p-6 bg-white border-2 border-neutral-200 rounded-xl shadow-sm hover:shadow-md transition-shadow"
+            role="article"
+            :aria-label="`Offer: ${offer.name}`"
+          >
+            <h3 class="font-bold text-black mb-3">{{ offer.name }}</h3>
+            
+            <!-- Offer chips -->
+            <div class="flex flex-wrap gap-2 mb-4">
+              <span class="inline-flex items-center px-2 py-1 text-xs bg-green-50 text-green-700 border border-green-200 rounded-full">
+                Covers ~{{ calculateMonthlyCoverage(offer) }}% of monthly needs at baseline
+              </span>
+              <span class="inline-flex items-center px-2 py-1 text-xs bg-blue-50 text-blue-700 border border-blue-200 rounded-full">
+                Typical payout: {{ getPayoutDaysRange(offer) }}
+              </span>
+              <span class="inline-flex items-center px-2 py-1 text-xs bg-purple-50 text-purple-700 border border-purple-200 rounded-full">
+                Why this
+              </span>
+            </div>
+            
+            <!-- Scope -->
+            <div class="mb-4">
+              <p class="text-sm font-medium text-neutral-700 mb-2">Scope:</p>
+              <ul class="space-y-1">
+                <li 
+                  v-for="item in offer.scope" 
+                  :key="item"
+                  class="text-sm text-neutral-600 flex items-start"
+                >
+                  <span class="text-neutral-400 mr-2">•</span>
+                  <span>{{ item }}</span>
+                </li>
+              </ul>
+            </div>
+            
+            <!-- Price range -->
+            <div class="mb-4 p-3 bg-neutral-50 rounded-lg">
+              <div class="flex justify-between items-center mb-1">
+                <span class="text-sm font-medium text-neutral-700">Baseline:</span>
+                <span class="font-bold text-black">${{ offer.price.baseline.toLocaleString() }}</span>
+              </div>
+              <div class="flex justify-between items-center mb-2">
+                <span class="text-sm font-medium text-neutral-700">Stretch:</span>
+                <span class="font-bold text-green-600">${{ offer.price.stretch.toLocaleString() }}</span>
+              </div>
+              <p class="text-xs text-neutral-500">{{ offer.price.calcNote }}</p>
+            </div>
+            
+            <!-- Payout delay -->
+            <div class="mb-4 flex items-center justify-between text-sm">
+              <span class="text-neutral-600">Payment timing:</span>
+              <span class="font-medium text-black">{{ offer.payoutDelayDays }} days</span>
+            </div>
+            
+            <!-- Why this works -->
+            <div class="mb-4">
+              <p class="text-sm font-medium text-neutral-700 mb-2">Why this works for your co-op:</p>
+              <ul class="space-y-1">
+                <li 
+                  v-for="reason in offer.whyThis" 
+                  :key="reason"
+                  class="text-sm text-neutral-600 flex items-start"
+                >
+                  <span class="text-green-500 mr-2">✓</span>
+                  <span>{{ updateLanguageToCoopTerms(reason) }}</span>
+                </li>
+              </ul>
+            </div>
+            
+            <!-- Risk notes (if any) -->
+            <div v-if="offer.riskNotes.length > 0" class="border-t border-neutral-200 pt-3">
+              <p class="text-sm font-medium text-amber-700 mb-2">Consider:</p>
+              <ul class="space-y-1">
+                <li 
+                  v-for="risk in offer.riskNotes" 
+                  :key="risk"
+                  class="text-sm text-amber-600 flex items-start"
+                >
+                  <span class="text-amber-500 mr-2">⚠</span>
+                  <span>{{ risk }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <!-- Sticky Footer -->
+    <div class="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-neutral-200 shadow-lg">
+      <div class="max-w-4xl mx-auto p-4">
+        <div class="flex items-center justify-between">
+          <button
+            @click="goBack"
+            class="px-4 py-2 text-neutral-700 hover:text-black focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-lg transition-colors"
+            aria-label="Go back to previous page"
+          >
+            ← Back
+          </button>
+          
+          <div class="flex items-center gap-3">
+            <button
+              @click="regenerateOffers"
+              :disabled="!canRegenerate"
+              :class="[
+                'px-4 py-2 rounded-lg border-2 transition-all duration-200',
+                'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                canRegenerate
+                  ? 'border-neutral-300 text-neutral-700 hover:border-blue-400 hover:text-blue-600'
+                  : 'border-neutral-200 text-neutral-400 cursor-not-allowed'
+              ]"
+              :aria-label="canRegenerate ? 'Regenerate offers with current selections' : 'Cannot regenerate - select skills and problems first'"
+            >
+              🔄 Regenerate
+            </button>
+            
+            <button
+              @click="useOffers"
+              :disabled="suggestedOffers.length === 0"
+              :class="[
+                'px-6 py-2 rounded-lg font-medium transition-all duration-200',
+                'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+                suggestedOffers.length > 0
+                  ? 'bg-blue-600 text-white hover:bg-blue-700'
+                  : 'bg-neutral-200 text-neutral-400 cursor-not-allowed'
+              ]"
+              :aria-label="suggestedOffers.length > 0 ? 'Add these offers to cover co-op needs' : 'No offers to use - generate offers first'"
+            >
+              Add to plan
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Member, SkillTag, ProblemTag, Offer } from "~/types/coaching";
+import { useDebounceFn } from "@vueuse/core";
+// REMOVED: All sample data imports to prevent demo data
+
+// Store integration
+const planStore = usePlanStore();
+
+// Initialize with empty data
+const members = ref<Member[]>([]);
+
+const availableSkills = ref<SkillTag[]>([]);
+
+const availableProblems = ref<ProblemTag[]>([]);
+
+// Set members in store on component mount
+onMounted(() => {
+  planStore.setMembers(members.value);
+});
+
+// Reactive state
+const selectedSkills = ref<Record<string, string[]>>({});
+const selectedProblems = ref<string[]>([]);
+const showExamples = ref<string | null>(null);
+const offers = ref<Offer[] | null>(null);
+const loading = ref(false);
+
+// Use offer suggestor composable
+const { suggestOffers } = useOfferSuggestor();
+
+// Catalogs for the suggestor
+const catalogs = computed(() => ({
+  skills: availableSkills.value,
+  problems: availableProblems.value
+}));
+
+// Computed for suggested offers (for backward compatibility)
+const suggestedOffers = computed(() => offers.value || []);
+
+// Helper functions for offer chips
+function calculateMonthlyCoverage(offer: Offer): number {
+  // Estimate monthly burn (simplified calculation)
+  const totalMemberHours = members.value.reduce((sum, m) => sum + m.availableHrs, 0);
+  const avgHourlyRate = members.value.reduce((sum, m) => sum + m.hourly, 0) / members.value.length;
+  const estimatedMonthlyBurn = totalMemberHours * avgHourlyRate * 1.25; // Add on-costs
+  
+  return Math.round((offer.price.baseline / estimatedMonthlyBurn) * 100);
+}
+
+function getPayoutDaysRange(offer: Offer): string {
+  const days = offer.payoutDelayDays;
+  if (days <= 15) return "0–15 days";
+  if (days <= 30) return "15–30 days";
+  if (days <= 45) return "30–45 days";
+  return `${days} days`;
+}
+
+function updateLanguageToCoopTerms(text: string): string {
+  return text
+    .replace(/maximize|maximiz/gi, 'cover needs with')
+    .replace(/optimize|optimiz/gi, 'improve')
+    .replace(/competitive advantage/gi, 'shared capacity')
+    .replace(/market position/gi, 'community standing')
+    .replace(/profit/gi, 'surplus')
+    .replace(/revenue growth/gi, 'sustainable income')
+    .replace(/scale/gi, 'grow together')
+    .replace(/efficiency gains/gi, 'reduce risk')
+    .replace(/leverages/gi, 'uses')
+    .replace(/expertise/gi, 'shared skills')
+    .replace(/builds reputation/gi, 'builds trust in community')
+    .replace(/high-impact/gi, 'meaningful')
+    .replace(/productivity/gi, 'shared capacity');
+}
+
+
+// Debounced offer generation
+const debouncedGenerateOffers = useDebounceFn(async () => {
+  const hasSkills = Object.values(selectedSkills.value).some(skills => skills.length > 0);
+  const hasProblems = selectedProblems.value.length > 0;
+  
+  if (!hasSkills || !hasProblems) {
+    offers.value = null;
+    return;
+  }
+  
+  loading.value = true;
+  
+  try {
+    const input = {
+      members: members.value,
+      selectedSkillsByMember: selectedSkills.value,
+      selectedProblems: selectedProblems.value
+    };
+    
+    const suggestedOffers = suggestOffers(input, catalogs.value);
+    offers.value = suggestedOffers;
+  } catch (error) {
+    console.error('Failed to generate offers:', error);
+    offers.value = null;
+  } finally {
+    loading.value = false;
+  }
+}, 300);
+
+// Skill management
+function toggleSkill(memberId: string, skillId: string) {
+  if (!selectedSkills.value[memberId]) {
+    selectedSkills.value[memberId] = [];
+  }
+  
+  const memberSkills = selectedSkills.value[memberId];
+  const index = memberSkills.indexOf(skillId);
+  
+  if (index >= 0) {
+    memberSkills.splice(index, 1);
+  } else {
+    memberSkills.push(skillId);
+  }
+  
+  debouncedGenerateOffers();
+}
+
+function isSkillSelected(memberId: string, skillId: string): boolean {
+  return selectedSkills.value[memberId]?.includes(skillId) || false;
+}
+
+function canSelectSkill(memberId: string, skillId: string): boolean {
+  if (isSkillSelected(memberId, skillId)) return true;
+  return getSelectedSkillsCount(memberId) < 3;
+}
+
+function getSelectedSkillsCount(memberId: string): number {
+  return selectedSkills.value[memberId]?.length || 0;
+}
+
+// Problem management
+function toggleProblem(problemId: string) {
+  const index = selectedProblems.value.indexOf(problemId);
+  if (index >= 0) {
+    selectedProblems.value.splice(index, 1);
+  } else {
+    selectedProblems.value.push(problemId);
+  }
+  debouncedGenerateOffers();
+}
+
+function isProblemSelected(problemId: string): boolean {
+  return selectedProblems.value.includes(problemId);
+}
+
+function canSelectProblem(problemId: string): boolean {
+  if (isProblemSelected(problemId)) return true;
+  return selectedProblems.value.length < 2;
+}
+
+// Examples popover
+function toggleExamples(problemId: string) {
+  showExamples.value = showExamples.value === problemId ? null : problemId;
+}
+
+function hideExamples() {
+  showExamples.value = null;
+}
+
+
+// Footer actions
+const canRegenerate = computed(() => {
+  const hasSkills = Object.values(selectedSkills.value).some(skills => skills.length > 0);
+  const hasProblems = selectedProblems.value.length > 0;
+  return hasSkills && hasProblems;
+});
+
+function goBack() {
+  // Navigate back - would typically use router
+  window.history.back();
+}
+
+function regenerateOffers() {
+  if (canRegenerate.value) {
+    // Re-call suggestOffers with same inputs
+    debouncedGenerateOffers();
+  }
+}
+
+function useOffers() {
+  if (offers.value && offers.value.length > 0) {
+    // Add offers to plan store as streams
+    planStore.addStreamsFromOffers(offers.value);
+    
+    // Navigate back to wizard with success message
+    const router = useRouter();
+    
+    // Show success notification
+    console.log(`Added ${offers.value.length} offers as revenue streams to your plan.`);
+    
+    // Navigate to wizard revenue step - adjust path as needed for your routing
+    router.push('/wizards'); // This would need to be the correct wizard path
+    
+    // Note: The Streams tab activation would be handled by the wizard component
+    // when it detects new streams in the store
+  }
+}
+
+function skipCoach() {
+  // Navigate directly to wizard streams without adding offers
+  const router = useRouter();
+  router.push('/wizards'); // Navigate to wizard - streams tab would be activated there
+}
+
+// Close examples on click outside
+onMounted(() => {
+  const handleClickOutside = (event: Event) => {
+    const target = event.target as HTMLElement;
+    if (!target.closest('[role="tooltip"]') && !target.closest('button[aria-expanded]')) {
+      showExamples.value = null;
+    }
+  };
+  
+  document.addEventListener('click', handleClickOutside);
+  
+  onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+  });
+});
+</script>
\ No newline at end of file
diff --git a/pages/coop-builder.vue b/pages/coop-builder.vue
index 4b7161c..058a51e 100644
--- a/pages/coop-builder.vue
+++ b/pages/coop-builder.vue
@@ -7,7 +7,7 @@
       <div class="mb-10 text-center">
         <h1
           class="text-3xl font-black text-black dark:text-white mb-4 leading-tight uppercase tracking-wide border-t-2 border-b-2 border-black dark:border-white py-4">
-          Budget Builder
+          Co-op Builder
         </h1>
       </div>
 
@@ -57,7 +57,7 @@
 
           <div
             :class="[
-              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
               focusedStep === 1 ? 'item-selected' : '',
             ]">
             <div
@@ -94,7 +94,7 @@
 
             <div
               v-if="focusedStep === 1"
-              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white">
               <WizardPoliciesStep @save-status="handleSaveStatus" />
             </div>
           </div>
@@ -109,7 +109,7 @@
 
           <div
             :class="[
-              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
               focusedStep === 2 ? 'item-selected' : '',
             ]">
             <div
@@ -121,8 +121,8 @@
                     class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
                     :class="
                       membersValid
-                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-neutral-500'
-                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-neutral-500'
+                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
+                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
                     ">
                     <UIcon
                       v-if="membersValid"
@@ -146,7 +146,7 @@
 
             <div
               v-if="focusedStep === 2"
-              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white">
               <WizardMembersStep @save-status="handleSaveStatus" />
             </div>
           </div>
@@ -161,7 +161,7 @@
 
           <div
             :class="[
-              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
               focusedStep === 3 ? 'item-selected' : '',
             ]">
             <div
@@ -173,8 +173,8 @@
                     class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
                     :class="
                       costsValid
-                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-neutral-500'
-                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-neutral-500'
+                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
+                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
                     ">
                     <UIcon
                       v-if="costsValid"
@@ -198,7 +198,7 @@
 
             <div
               v-if="focusedStep === 3"
-              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white">
               <WizardCostsStep @save-status="handleSaveStatus" />
             </div>
           </div>
@@ -213,7 +213,7 @@
 
           <div
             :class="[
-              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-neutral-500 overflow-hidden',
+              'relative bg-white dark:bg-neutral-950 border-2 border-black dark:border-white overflow-hidden',
               focusedStep === 4 ? 'item-selected' : '',
             ]">
             <div
@@ -225,8 +225,8 @@
                     class="w-8 h-8 flex items-center justify-center text-sm font-bold border-2"
                     :class="
                       streamsValid
-                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-neutral-500'
-                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-neutral-500'
+                        ? 'bg-black dark:bg-white text-white dark:text-black border-black dark:border-white'
+                        : 'bg-white dark:bg-neutral-950 text-black dark:text-white border-black dark:border-white'
                     ">
                     <UIcon
                       v-if="streamsValid"
@@ -250,7 +250,7 @@
 
             <div
               v-if="focusedStep === 4"
-              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-neutral-500">
+              class="p-8 bg-neutral-50 dark:bg-neutral-900 border-t-2 border-black dark:border-white">
               <WizardRevenueStep @save-status="handleSaveStatus" />
             </div>
           </div>
@@ -262,7 +262,7 @@
             class="export-btn"
             @click="resetWizard"
             :disabled="isResetting">
-            Clear Data
+            Start Over
           </button>
 
           <div class="flex items-center gap-4">
@@ -289,6 +289,16 @@
               >
             </div>
 
+            <!-- View Dashboard button (when partially complete) -->
+            <button
+              v-if="hasBasicData && !canComplete"
+              class="export-btn"
+              @click="navigateTo('/dashboard')"
+            >
+              <UIcon name="i-heroicons-chart-bar" class="mr-2" />
+              View Dashboard
+            </button>
+
             <UTooltip :text="incompleteSectionsText" :prevent="canComplete">
               <button
                 class="export-btn primary"
@@ -435,7 +445,7 @@ async function restartWizard() {
 
 // SEO
 useSeoMeta({
-  title: "Budget Builder",
+  title: "Co-op Builder - Build Your Financial Foundation",
   description:
     "Build your co-op's financial foundation: set up members, policies, costs, and revenue streams.",
 });
diff --git a/pages/dashboard-simple.vue b/pages/dashboard-simple.vue
index 09955f9..8bcb4f6 100644
--- a/pages/dashboard-simple.vue
+++ b/pages/dashboard-simple.vue
@@ -2,7 +2,7 @@
   <div class="space-y-8">
     <div class="flex items-center justify-between">
       <h1 class="text-2xl font-semibold">Dashboard</h1>
-      <div class="text-sm text-neutral-600">
+      <div class="text-sm text-gray-600">
         Mode: {{ currentMode }}
       </div>
     </div>
@@ -15,15 +15,15 @@
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <div class="text-center">
           <div class="text-3xl font-bold text-green-600">{{ runwayDisplay }}</div>
-          <div class="text-sm text-neutral-600">Runway</div>
+          <div class="text-sm text-gray-600">Runway</div>
         </div>
         <div class="text-center">
           <div class="text-3xl font-bold text-blue-600">{{ coverageDisplay }}</div>
-          <div class="text-sm text-neutral-600">Coverage</div>
+          <div class="text-sm text-gray-600">Coverage</div>
         </div>
         <div class="text-center">
           <div class="text-3xl font-bold text-purple-600">{{ streamCount }}</div>
-          <div class="text-sm text-neutral-600">Revenue Streams</div>
+          <div class="text-sm text-gray-600">Revenue Streams</div>
         </div>
       </div>
     </UCard>
@@ -34,11 +34,11 @@
         <h3 class="text-lg font-medium">Members ({{ memberCount }})</h3>
       </template>
       <div class="space-y-2">
-        <div v-for="(member, index) in membersList" :key="index" class="flex items-center justify-between p-2 border border-neutral-200 rounded">
+        <div v-for="(member, index) in membersList" :key="index" class="flex items-center justify-between p-2 border border-gray-200 rounded">
           <span class="font-medium">{{ member.name }}</span>
-          <span class="text-sm text-neutral-600">{{ member.relationship }}</span>
+          <span class="text-sm text-gray-600">{{ member.relationship }}</span>
         </div>
-        <div v-if="memberCount === 0" class="text-sm text-neutral-500 italic p-4">
+        <div v-if="memberCount === 0" class="text-sm text-gray-500 italic p-4">
           No members configured yet.
         </div>
       </div>
diff --git a/pages/help.vue b/pages/help.vue
index 57fc81d..2c40c54 100644
--- a/pages/help.vue
+++ b/pages/help.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="min-h-screen bg-neutral-50 py-8">
+  <div class="min-h-screen bg-gray-50 py-8">
     <div class="container mx-auto max-w-4xl px-4">
       <!-- Header -->
       <div class="mb-8 text-center">
         <h1 class="text-4xl font-bold mb-4">Budget Planning Help</h1>
-        <p class="text-xl text-neutral-600">Learn how to build a sustainable financial plan for your co-op or studio</p>
+        <p class="text-xl text-gray-600">Learn how to build a sustainable financial plan for your co-op or studio</p>
       </div>
 
       <!-- Navigation -->
@@ -15,19 +15,19 @@
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
               <a href="#revenue-diversification" class="block p-3 bg-blue-50 border-2 border-blue-200 rounded hover:bg-blue-100 transition-colors">
                 <span class="font-semibold">Revenue Diversification</span>
-                <p class="text-sm text-neutral-600">How to develop multiple income streams</p>
+                <p class="text-sm text-gray-600">How to develop multiple income streams</p>
               </a>
               <a href="#budget-categories" class="block p-3 bg-green-50 border-2 border-green-200 rounded hover:bg-green-100 transition-colors">
                 <span class="font-semibold">Budget Categories</span>
-                <p class="text-sm text-neutral-600">Understanding revenue and expense types</p>
+                <p class="text-sm text-gray-600">Understanding revenue and expense types</p>
               </a>
               <a href="#planning-tips" class="block p-3 bg-yellow-50 border-2 border-yellow-200 rounded hover:bg-yellow-100 transition-colors">
                 <span class="font-semibold">Planning Tips</span>
-                <p class="text-sm text-neutral-600">Best practices for financial planning</p>
+                <p class="text-sm text-gray-600">Best practices for financial planning</p>
               </a>
               <a href="#getting-started" class="block p-3 bg-purple-50 border-2 border-purple-200 rounded hover:bg-purple-100 transition-colors">
                 <span class="font-semibold">Getting Started</span>
-                <p class="text-sm text-neutral-600">Step-by-step setup guide</p>
+                <p class="text-sm text-gray-600">Step-by-step setup guide</p>
               </a>
             </div>
           </div>
diff --git a/pages/project-budget.vue b/pages/project-budget.vue
index 063367e..ac6ceef 100644
--- a/pages/project-budget.vue
+++ b/pages/project-budget.vue
@@ -2,7 +2,7 @@
   <div class="space-y-8">
     <div class="text-center">
       <h1 class="text-3xl font-bold mb-4">Project Budget Estimate</h1>
-      <p class="text-neutral-600 max-w-2xl mx-auto mb-4">
+      <p class="text-gray-600 max-w-2xl mx-auto mb-4">
         Get a quick estimate of what it would cost to build your project with fair pay. 
         This tool helps worker co-ops sketch project budgets and break-even scenarios.
       </p>
@@ -18,10 +18,10 @@
     </div>
     
     <div v-if="membersWithPay.length === 0" class="text-center py-8">
-      <p class="text-neutral-600 mb-4">No team members set up yet.</p>
+      <p class="text-gray-600 mb-4">No team members set up yet.</p>
       <NuxtLink 
         to="/coop-builder" 
-        class="px-4 py-2 border-2 border-black bg-white font-bold hover:bg-neutral-100"
+        class="px-4 py-2 border-2 border-black bg-white font-bold hover:bg-gray-100"
       >
         Set up your team in Setup Wizard
       </NuxtLink>
diff --git a/pages/templates/conflict-resolution-framework.vue b/pages/templates/conflict-resolution-framework.vue
index 919c27a..a6bff90 100644
--- a/pages/templates/conflict-resolution-framework.vue
+++ b/pages/templates/conflict-resolution-framework.vue
@@ -16,30 +16,57 @@
           <div class="text-center mb-8">
             <h1
               class="text-3xl md:text-5xl font-bold uppercase m-0 py-4 border-t-2 border-b-2 text-black dark:text-white border-black dark:border-white"
-              :data-org-name="getOrgName()">
+              :data-org-name="formData.orgName || 'Organization'">
               CONFLICT RESOLUTION
             </h1>
           </div>
 
-          <!-- Section 1: Cooperative Information -->
+          <!-- Section 1: Organization Information -->
           <div class="section-card">
+            <h2 class="section-title">1. Organization Information</h2>
+
             <div class="space-y-6">
-              <UFormField label="Cooperative Name" class="form-group-large">
+              <UFormField label="Organization Name" class="form-group-large">
                 <UInput
                   v-model="formData.orgName"
-                  placeholder="Enter your cooperative name"
+                  placeholder="Enter your organization name"
                   size="xl"
                   class="w-full"
                   :error="validationErrors.orgName"
                   @input="debouncedAutoSave" />
               </UFormField>
+              <div class="flex flex-row gap-4 space-x-4">
+                <UFormField label="Organization Type" class="form-group-large">
+                  <USelect
+                    v-model="formData.orgType"
+                    :items="orgTypeOptions"
+                    placeholder="Select organization type..."
+                    size="xl"
+                    class="w-full"
+                    :error="validationErrors.orgType"
+                    @change="autoSave" />
+                </UFormField>
+
+                <UFormField
+                  label="Number of Members/Staff"
+                  class="form-group-large">
+                  <UInput
+                    v-model="formData.memberCount"
+                    type="number"
+                    min="2"
+                    placeholder="e.g., 5"
+                    size="xl"
+                    :error="validationErrors.memberCount"
+                    @change="autoSave" />
+                </UFormField>
+              </div>
             </div>
           </div>
 
           <!-- Section 2: Core Values -->
           <div class="section-card">
             <div class="flex flex-row justify-between items-center">
-              <h2 class="section-title">2. Values</h2>
+              <h2 class="section-title">2. Guiding Principles & Values</h2>
               <div class="flex flex-row gap-2 items-center no-print no-pdf">
                 <USwitch
                   v-model="sectionsEnabled.values"
@@ -53,7 +80,7 @@
 
             <div class="space-y-6" v-show="sectionsEnabled.values">
               <UFormField
-                label="Select core values (check all that apply)"
+                label="Select Core Values (check all that apply)"
                 class="form-group-large">
                 <div class="values-grid">
                   <div
@@ -83,12 +110,12 @@
               </UFormField>
 
               <UFormField
-                label="Additional values or principles"
+                label="Additional Values or Principles"
                 class="form-group-large">
                 <UTextarea
                   v-model="formData.customValues"
                   :rows="3"
-                  placeholder="Add any additional values specific to your cooperative..."
+                  placeholder="Add any additional values specific to your organization..."
                   size="xl"
                   class="w-full"
                   @input="debouncedAutoSave" />
@@ -203,14 +230,13 @@
               </UFormField>
 
               <UFormField
-                label="Mediator/facilitator structure"
+                label="Mediator/Facilitator Structure"
                 class="form-group-large">
                 <USelect
                   v-model="formData.mediatorType"
                   :items="mediatorTypeOptions"
                   placeholder="Select mediator structure..."
                   size="xl"
-                  class="w-full"
                   :error="validationErrors.mediatorType"
                   @change="autoSave" />
               </UFormField>
@@ -355,7 +381,7 @@
 
             <div class="space-y-6">
               <UFormField
-                label="Available actions (check all that apply)"
+                label="Available Actions (check all that apply)"
                 class="form-group-large">
                 <div class="checkbox-group mt-4 space-y-3">
                   <div
@@ -458,7 +484,7 @@
                   v-model="formData.training"
                   :rows="3"
                   class="w-full"
-                  placeholder="Describe any training needed for member-workers, facilitators, or committee members..."
+                  placeholder="Describe any training needed for members, facilitators, or committee members..."
                   size="xl"
                   @input="debouncedAutoSave" />
               </UFormField>
@@ -646,18 +672,18 @@
               </UFormField>
 
               <UFormField
-                label="Member Liaison for Conflict Resolution Committee"
+                label="Staff Liaison for Conflict Resolution Committee"
                 class="form-group-large">
                 <UInput
                   v-model="formData.staffLiaison"
-                  placeholder="Title/role of designated member liaison"
+                  placeholder="Title/role of designated staff liaison"
                   size="xl"
                   class="w-full md:w-1/2"
                   @input="debouncedAutoSave" />
               </UFormField>
 
               <UFormField
-                label="Elected Board Chair Role in Conflict Resolution"
+                label="Board Chair Role in Conflict Resolution"
                 class="form-group-large">
                 <USelect
                   v-model="formData.boardChairRole"
@@ -736,7 +762,7 @@
                   v-model="formData.requireExternalAdvice"
                   id="require-external-advice"
                   label="Require external legal advice for complex complaints"
-                  help="Seek external expertise for multi-party or member-coordinator complaints"
+                  help="Seek external expertise for multi-party or staff/director complaints"
                   @change="autoSave" />
               </UFormField>
             </div>
@@ -867,10 +893,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed } from "vue";
-
-// Import centralized coop info
-const { coopInfo, updateCoopInfo, getOrgName } = useCoopInfo();
+import { ref, watch, computed, onMounted } from "vue";
 
 definePageMeta({
   layout: false,
@@ -887,7 +910,21 @@ useHead({
   ],
 });
 
+// Import PDF export composable
+const { exportToPDF } = usePdfExportBasic();
+
 const showPreview = ref(false);
+const copySuccess = ref(false);
+
+// Options for dropdowns (using simple string arrays like the working membership template)
+const orgTypeOptions = [
+  "Worker Cooperative",
+  "Consumer Cooperative",
+  "Nonprofit",
+  "Collective",
+  "Community Group",
+  "Other",
+];
 
 const approachOptions = [
   {
@@ -974,17 +1011,17 @@ const reflectionPeriodOptions = [
 ];
 
 const internalAdvisorOptions = [
-  "Single elected advisor",
-  "Rotating member representatives",
+  "Single Board-appointed advisor",
+  "Rotating Board members",
   "External neutral advisor",
   "Committee-designated advisor",
-  "Trained member facilitator",
+  "Staff member with training",
 ];
 
 const boardChairRoleOptions = [
-  "First contact for coordinator complaints",
+  "First contact for ED complaints",
   "Appeals reviewer",
-  "Participates in collective decision",
+  "Final decision maker",
   "Advisory role only",
   "Not involved in conflicts",
 ];
@@ -1049,23 +1086,21 @@ const coreValues = ref([
 ]);
 
 const conflictTypes = ref([
-  { label: "Interpersonal disputes between member-workers", checked: true },
+  { label: "Interpersonal disputes between members", checked: true },
   { label: "Code of Conduct violations", checked: true },
-  { label: "Work allocation and responsibility disagreements", checked: true },
-  { label: "Decision-making process conflicts", checked: true },
   { label: "Harassment or discrimination", checked: false },
-  { label: "Member-owner responsibility disputes", checked: false },
-  { label: "Collective ownership tensions", checked: false },
+  { label: "Work performance issues", checked: false },
+  { label: "Conflicts of interest", checked: false },
   { label: "External organization disputes", checked: false },
   { label: "Financial disagreements", checked: false },
 ]);
 
 const reportReceivers = ref([
   { label: "Designated conflict resolution committee", checked: true },
-  { label: "Any elected board member", checked: false },
-  { label: "Administrative Coordinator(s)", checked: false },
-  { label: "Designated member liaison", checked: false },
-  { label: "Any member-worker", checked: false },
+  { label: "Any board member", checked: false },
+  { label: "Executive Director(s)", checked: false },
+  { label: "Designated staff liaison", checked: false },
+  { label: "Any member", checked: false },
 ]);
 
 const processSteps = ref([
@@ -1086,7 +1121,7 @@ const availableActions = ref([
   { label: "Temporary suspension", checked: true },
   { label: "Role/responsibility changes", checked: false },
   { label: "Mediated agreement", checked: false },
-  { label: "Removal from the cooperative", checked: true },
+  { label: "Removal from organization", checked: true },
   { label: "Restorative circle/process", checked: false },
 ]);
 
@@ -1130,7 +1165,7 @@ const formData = ref({
   documentDirectResolution: true,
   internalAdvisorType: "Single Board-appointed advisor",
   staffLiaison: "",
-  boardChairRole: "First contact for coordinator complaints",
+  boardChairRole: "First contact for ED complaints",
   formalAcknowledgmentTime: "Within 1 week",
   formalReviewTime: "1 month",
   requireExternalAdvice: true,
@@ -1145,12 +1180,165 @@ const formData = ref({
 // Validation logic
 const validationErrors = ref({});
 
+const validateForm = () => {
+  const errors = {};
+
+  // Required text fields
+  if (!formData.value.orgName?.trim()) {
+    errors.orgName = "Organization name is required";
+  }
+  if (!formData.value.orgType?.trim()) {
+    errors.orgType = "Organization type is required";
+  }
+  if (!formData.value.memberCount?.toString().trim()) {
+    errors.memberCount = "Number of members/staff is required";
+  }
+  if (!formData.value.approach?.trim()) {
+    errors.approach = "Primary resolution approach is required";
+  }
+  if (!formData.value.mediatorType?.trim()) {
+    errors.mediatorType = "Mediator/facilitator structure is required";
+  }
+  if (!formData.value.initialResponse?.trim()) {
+    errors.initialResponse = "Initial response time is required";
+  }
+  if (!formData.value.resolutionTarget?.trim()) {
+    errors.resolutionTarget = "Target resolution time is required";
+  }
+  if (!formData.value.reviewSchedule?.trim()) {
+    errors.reviewSchedule = "Policy review schedule is required";
+  }
+  if (!formData.value.amendments?.trim()) {
+    errors.amendments = "Amendment process is required";
+  }
+
+  // Required checkbox groups (must have at least one checked)
+  const checkedConflictTypes = conflictTypes.value.filter(
+    (item) => item.checked
+  );
+  if (checkedConflictTypes.length === 0) {
+    errors.conflictTypes = "Please select at least one type of conflict";
+  }
+
+  // Note: Guiding Principles & Values section is optional - no validation needed
+
+  const checkedReportReceivers = reportReceivers.value.filter(
+    (item) => item.checked
+  );
+  if (checkedReportReceivers.length === 0) {
+    errors.reportReceivers = "Please select at least one report receiver";
+  }
+
+  const checkedProcessSteps = processSteps.value.filter((item) => item.checked);
+  if (checkedProcessSteps.length === 0) {
+    errors.processSteps = "Please select at least one process step";
+  }
+
+  const checkedAvailableActions = availableActions.value.filter(
+    (item) => item.checked
+  );
+  if (checkedAvailableActions.length === 0) {
+    errors.availableActions = "Please select at least one available action";
+  }
+
+  // Note: Special circumstances section is optional - no validation needed
+
+  validationErrors.value = errors;
+  const isValid = Object.keys(errors).length === 0;
+
+  // Provide user feedback
+  if (isValid) {
+    alert("✅ Form is complete and ready for export!");
+  } else {
+    const errorCount = Object.keys(errors).length;
+    alert(
+      `❌ Please complete ${errorCount} required field${
+        errorCount > 1 ? "s" : ""
+      } before exporting.`
+    );
+  }
+
+  return isValid;
+};
+
+// Completion percentage computation
+const completionPercentage = computed(() => {
+  const allInputs = [
+    formData.value.orgName,
+    formData.value.orgType,
+    formData.value.memberCount,
+    formData.value.approach,
+    formData.value.mediatorType,
+    formData.value.initialResponse,
+    formData.value.resolutionTarget,
+    formData.value.reviewSchedule,
+    formData.value.amendments,
+  ];
+
+  const checkboxInputs = [
+    ...coreValues.value,
+    ...conflictTypes.value,
+    ...reportReceivers.value,
+    ...processSteps.value,
+    ...availableActions.value,
+    ...specialCircumstances.value,
+  ];
+
+  const filledInputs = allInputs.filter(
+    (val) => val && val.toString().trim() !== ""
+  ).length;
+  const checkedBoxes = checkboxInputs.filter((item) => item.checked).length;
+
+  const totalFields = allInputs.length + checkboxInputs.length;
+  const completedFields = filledInputs + checkedBoxes;
+
+  return Math.round((completedFields / totalFields) * 100);
+});
+
+// Load saved data
+const loadSavedData = () => {
+  if (process.client) {
+    const saved = localStorage.getItem("conflict-resolution-framework-data");
+    if (saved) {
+      try {
+        const parsedData = JSON.parse(saved);
+
+        // Load form data
+        if (parsedData.formData) {
+          formData.value = { ...formData.value, ...parsedData.formData };
+        }
+
+        // Load checkbox arrays
+        if (parsedData.coreValues) coreValues.value = parsedData.coreValues;
+        if (parsedData.conflictTypes)
+          conflictTypes.value = parsedData.conflictTypes;
+        if (parsedData.reportReceivers)
+          reportReceivers.value = parsedData.reportReceivers;
+        if (parsedData.processSteps)
+          processSteps.value = parsedData.processSteps;
+        if (parsedData.availableActions)
+          availableActions.value = parsedData.availableActions;
+        if (parsedData.specialCircumstances)
+          specialCircumstances.value = parsedData.specialCircumstances;
+        if (parsedData.communicationChannels)
+          communicationChannels.value = parsedData.communicationChannels;
+        if (parsedData.formalComplaintElements)
+          formalComplaintElements.value = parsedData.formalComplaintElements;
+        if (parsedData.sectionsEnabled)
+          sectionsEnabled.value = parsedData.sectionsEnabled;
+      } catch (error) {
+        console.error("Error loading saved data:", error);
+      }
+    }
+  }
+};
+
 // Auto-save functionality
 const autoSave = () => {
   // Clear validation errors when users start correcting fields
   clearValidationErrors();
 
-  if (typeof window !== "undefined") {
+  if (process.client) {
     const dataToSave = {
       formData: formData.value,
       coreValues: coreValues.value,
@@ -1192,7 +1380,7 @@ const markdownToHtml = (markdown) => {
       .replace(/<\/li>\s*<ul>/g, "</li>")
       .replace(/<\/ul>\s*<li>/g, "<li>")
       // Tables (basic support)
-      .replace(/^\|(.+)\|$/gm, (_, content) => {
+      .replace(/^\|(.+)\|$/gm, (match, content) => {
         const cells = content.split("|").map((cell) => cell.trim());
         if (cells.every((cell) => cell.match(/^-+$/))) {
           return ""; // Skip separator rows
@@ -1241,27 +1429,6 @@ function debounce(func, wait) {
   };
 }
 
-// Sync with centralized coop info
-watch(
-  () => coopInfo.value,
-  (newCoopInfo) => {
-    if (newCoopInfo.cooperativeName) {
-      formData.value.orgName = newCoopInfo.cooperativeName;
-    }
-  },
-  { deep: true, immediate: true }
-);
-
-// Update centralized store when org name changes
-watch(
-  () => formData.value.orgName,
-  (newOrgName) => {
-    if (newOrgName && newOrgName !== coopInfo.value.cooperativeName) {
-      updateCoopInfo({ cooperativeName: newOrgName });
-    }
-  }
-);
-
 // Watch for changes and auto-save
 watch(
   [
@@ -1280,309 +1447,29 @@ watch(
   { deep: true }
 );
 
-// Generate the complete policy document for preview and export
-const generatePolicyDocument = () => {
-  const cooperativeName = formData.value.orgName || "[Cooperative Name]";
-  let content = `# ${cooperativeName} Conflict Resolution Policy\n\n`;
-
-  content += `*Framework Created: ${
-    formData.value.createdDate || new Date().toISOString().split("T")[0]
-  }*\n`;
-  if (formData.value.reviewDate) {
-    content += `*Next Review: ${formData.value.reviewDate}*\n`;
-  }
-  content += `\n---\n\n`;
-
-  // Core Values section (if enabled)
-  if (sectionsEnabled.value.values) {
-    content += `## Our Values\n\n`;
-    content += `This conflict resolution framework is guided by our core values:\n\n`;
-
-    const selectedValues = coreValues.value.filter((v) => v.checked);
-    if (selectedValues.length > 0) {
-      selectedValues.forEach((value) => {
-        content += `- **${value.label}**\n`;
-      });
-      content += `\n`;
-    }
-
-    if (formData.value.customValues) {
-      content += `${formData.value.customValues}\n\n`;
-    }
-  }
-
-  // Resolution Philosophy
-  const approachDescriptions = {
-    restorative:
-      "We use a **restorative/loving justice** approach that focuses on healing, understanding root causes, and repairing relationships rather than punishment.",
-    mediation:
-      "We use a **mediation-first** approach where neutral third-party facilitators help parties dialogue and find solutions.",
-    progressive:
-      "We use **progressive discipline** with clear escalation steps and defined consequences for violations.",
-    hybrid:
-      "We use a **hybrid approach** that combines multiple methods based on the type and severity of conflict.",
-  };
-
-  if (
-    formData.value.approach &&
-    approachDescriptions[formData.value.approach]
-  ) {
-    content += `## Our Approach\n\n`;
-    content += `${approachDescriptions[formData.value.approach]}\n\n`;
-    content += `We do our best to resolve conflicts at the lowest possible escalation step (direct resolution), but agree to escalate conflicts (to assisted resolution) if they are not resolved.\n\n`;
-  }
-
-  // Reflection Process (if enabled)
-  if (sectionsEnabled.value.reflection) {
-    content += `## Reflection\n\n`;
-    content += `Before engaging in direct resolution, we encourage taking time for reflection:\n\n`;
-    content += `1. **Set aside time to think** through what happened. What was the other person's behaviour? How did it affect you? *Distinguish other people's **actions** from your **feelings** about them.*\n`;
-    content += `2. **Consider uncertainties** or misunderstandings that may have occurred.\n`;
-    content += `3. **Distinguish disagreement from personal hostility.** Disagreement and dissent are part of healthy discussion. Hostility is not.\n`;
-    content += `4. **Use your personal support system** (friends, family, therapist, etc.) to work through and clarify your perspective.\n`;
-    content += `5. **Ask yourself** what part you played, how you could have behaved differently, and what your needs are.\n\n`;
-
-    if (formData.value.customReflectionPrompts) {
-      content += `### Additional Reflection Prompts\n\n`;
-      content += `${formData.value.customReflectionPrompts}\n\n`;
-    }
-
-    const reflectionTiming =
-      formData.value.reflectionPeriod || "Before any escalation";
-    content += `**Reflection Timing:** ${reflectionTiming}\n\n`;
-  }
-
-  // Direct Resolution (if enabled)
-  if (sectionsEnabled.value.directResolution) {
-    content += `## Direct Resolution\n\n`;
-    content += `A *direct resolution* process occurs when individuals communicate their concerns and work together to resolve disputes without filing an informal or formal complaint.\n\n`;
-
-    content += `### Have a Conversation\n\n`;
-    content += `When there is a disagreement, the involved people should first **communicate with each other** about their concerns.\n\n`;
-
-    content += `1. **Choose a time and place** to meet that is private and agreeable to both.\n`;
-    content += `2. **Allow reasonable time** for the conversation.\n`;
-    content += `3. **The point is mutual understanding**, not determining who is right or wrong. This requires patience and willingness to listen without immediately dismissing the other person's perspective.\n`;
-    content += `4. **Express thoughts and feelings directly** without belittling or dismissing. Use "I" statements and active listening techniques.\n`;
-    content += `5. **Communicate your wants and needs** and make offers and requests.\n`;
-    content += `6. **Learn for the future.** Ask questions like, "If what I/you said or did came across that way, what can we do to prevent this from happening in the future?"\n`;
-
-    if (formData.value.documentDirectResolution) {
-      content += `7. **Keep a written record** of the resolution agreed to by both parties.\n\n`;
-    } else {
-      content += `\n`;
-    }
-
-    // Communication Channels
-    const selectedChannels = communicationChannels.value.filter(
-      (c) => c.checked
-    );
-    if (selectedChannels.length > 0) {
-      content += `### Escalating Communication Bandwidth\n\n`;
-      content += `Whenever a misunderstanding or conflict arises, **escalate the bandwidth of the channel**:\n\n`;
-      selectedChannels.forEach((channel, index) => {
-        content += `${index + 1}. ${channel.label}\n`;
-      });
-      content += `\n`;
-    }
-
-    if (formData.value.requireDirectAttempt) {
-      content += `> **Note:** Direct resolution must be attempted before escalating to assisted resolution, unless safety concerns prevent this.\n\n`;
-    }
-  }
-
-  // Assisted Resolution
-  content += `## Assisted Resolution\n\n`;
-  content += `If talking things out doesn't work, you can ask a responsible contact person for help in writing.\n\n`;
-
-  // Responsible Contact People
-  const selectedReceivers = reportReceivers.value.filter((r) => r.checked);
-  if (selectedReceivers.length > 0) {
-    content += `### Initial Contact Options\n\n`;
-    content += `You can report conflicts to any of the following:\n\n`;
-    selectedReceivers.forEach((receiver) => {
-      content += `- ${receiver.label}\n`;
-    });
-    content += `\n`;
-  }
-
-  // Mediator Structure
-  if (formData.value.mediatorType) {
-    content += `### Mediation/Facilitation\n\n`;
-    content += `**Structure:** ${formData.value.mediatorType}\n\n`;
-
-    if (formData.value.supportPeople) {
-      content += `**Support People:** Parties may bring a trusted person for emotional support during mediation sessions.\n\n`;
-    }
-  }
-
-  // Timeline
-  content += `### Response Times\n\n`;
-  if (formData.value.initialResponse) {
-    content += `- **Initial Response:** ${formData.value.initialResponse}\n`;
-  }
-  if (formData.value.resolutionTarget) {
-    content += `- **Target Resolution:** ${formData.value.resolutionTarget}\n\n`;
-  }
-
-  // Formal Complaints
-  content += `## Formal Complaints\n\n`;
-  content += `If assisted resolution efforts do not result in an acceptable outcome within a reasonable timeframe, a *formal complaint* may be filed in writing.\n\n`;
-
-  // Required Elements
-  const selectedElements = formalComplaintElements.value.filter(
-    (e) => e.checked
-  );
-  if (selectedElements.length > 0) {
-    content += `### Written Complaint Requirements\n\n`;
-    content += `The formal complaint must include:\n\n`;
-    selectedElements.forEach((element, index) => {
-      content += `${index + 1}. ${element.label}\n`;
-    });
-    content += `\n`;
-  }
-
-  // Formal Process Timeline
-  content += `### Formal Process Timeline\n\n`;
-  if (formData.value.formalAcknowledgmentTime) {
-    content += `- **Acknowledgment:** ${formData.value.formalAcknowledgmentTime}\n`;
-  }
-  if (formData.value.formalReviewTime) {
-    content += `- **Review Completion:** ${formData.value.formalReviewTime}\n\n`;
-  }
-
-  if (formData.value.requireExternalAdvice) {
-    content += `> **External Expertise:** For complex complaints involving multiple parties or organizational leaders, external legal advice will be sought.\n\n`;
-  }
-
-  // Settlement Documentation
-  if (formData.value.requireMinutesOfSettlement) {
-    content += `### Reaching Agreement\n\n`;
-    content += `Any resolution agreed upon must be documented in "Minutes of Settlement" signed by both parties. These agreements will be kept confidential according to our privacy standards.\n\n`;
-  }
-
-  // Consequences and Actions
-  const selectedActions = availableActions.value.filter((a) => a.checked);
-  if (selectedActions.length > 0) {
-    content += `## Possible Outcomes\n\n`;
-    content += `Depending on the situation, resolution may include:\n\n`;
-    selectedActions.forEach((action) => {
-      content += `- ${action.label}\n`;
-    });
-    content += `\n`;
-  }
-
-  if (formData.value.appealProcess) {
-    content += `### Appeals Process\n\n`;
-    content += `Parties may request review of decisions through our appeals process.\n\n`;
-  }
-
-  // Documentation and Privacy
-  if (sectionsEnabled.value.documentation) {
-    content += `## Documentation & Privacy\n\n`;
-    if (formData.value.docLevel) {
-      content += `**Documentation Level:** ${formData.value.docLevel}\n\n`;
-    }
-    if (formData.value.confidentiality) {
-      content += `**Confidentiality:** ${formData.value.confidentiality}\n\n`;
-    }
-    if (formData.value.retention) {
-      content += `**Record Retention:** ${formData.value.retention}\n\n`;
-    }
-  }
-
-  // External Resources (if enabled)
-  if (sectionsEnabled.value.externalResources) {
-    content += `## External Resources\n\n`;
-    if (formData.value.includeHumanRights) {
-      content += `Individuals who are not satisfied with the outcome of a harassment or discrimination complaint may file a complaint with the [Canadian Human Rights Commission](https://www.chrc-ccdp.gc.ca/eng) or their provincial human rights tribunal.\n\n`;
-    }
-
-    if (formData.value.additionalResources) {
-      content += `### Additional Resources\n\n`;
-      content += `${formData.value.additionalResources}\n\n`;
-    }
-  }
-
-  // Implementation
-  content += `## Policy Management\n\n`;
-  if (formData.value.training) {
-    content += `### Training Requirements\n\n`;
-    content += `${formData.value.training}\n\n`;
-  }
-
-  content += `### Review and Updates\n\n`;
-  if (formData.value.reviewSchedule) {
-    content += `This policy will be reviewed ${formData.value.reviewSchedule.toLowerCase()}.\n\n`;
-  }
-  if (formData.value.amendments) {
-    content += `**Amendment Process:** ${formData.value.amendments}\n\n`;
-  }
-
-  // Acknowledgments
-  if (formData.value.acknowledgments) {
-    content += `### Acknowledgments\n\n`;
-    content += `${formData.value.acknowledgments}\n\n`;
-  }
-
-  return content;
-};
-
-// Export data for the ExportOptions component - structured to match ExportOptions expectations
-const exportData = computed(() => {
-  // Get selected values for arrays
-  const selectedCoreValues = coreValues.value
-    .filter((v) => v.checked)
-    .map((v) => v.label);
-  const selectedConflictTypes = conflictTypes.value
-    .filter((c) => c.checked)
-    .map((c) => c.label);
-  const selectedProcessSteps = processSteps.value
-    .filter((s) => s.checked)
-    .map((s) => s.label);
-  const selectedActions = availableActions.value
-    .filter((a) => a.checked)
-    .map((a) => a.label);
-  const selectedReceivers = reportReceivers.value
-    .filter((r) => r.checked)
-    .map((r) => r.label);
-  const selectedChannels = communicationChannels.value
-    .filter((c) => c.checked)
-    .map((c) => c.label);
-  const selectedComplaintElements = formalComplaintElements.value
-    .filter((e) => e.checked)
-    .map((e) => e.label);
-  const selectedCircumstances = specialCircumstances.value
-    .filter((c) => c.checked)
-    .map((c) => c.label);
-
-  return {
-    section: "conflict-resolution-framework",
-    // Enhanced formData with processed arrays
-    formData: {
-      ...formData.value,
-      // Add processed arrays as lists for the formatter
-      coreValuesList: selectedCoreValues,
-      conflictTypesList: selectedConflictTypes,
-      processStepsList: selectedProcessSteps,
-      actionsList: selectedActions,
-      receiversList: selectedReceivers,
-      channelsList: selectedChannels,
-      complaintElementsList: selectedComplaintElements,
-      circumstancesList: selectedCircumstances,
-    },
-    sectionsEnabled: sectionsEnabled.value,
-    reportReceivers: reportReceivers.value,
-    coreValues: coreValues.value,
-    conflictTypes: conflictTypes.value,
-    processSteps: processSteps.value,
-    availableActions: availableActions.value,
-    specialCircumstances: specialCircumstances.value,
-    communicationChannels: communicationChannels.value,
-    formalComplaintElements: formalComplaintElements.value,
-    exportedAt: new Date().toISOString(),
-  };
-});
+// Export data for the ExportOptions component
+const exportData = computed(() => ({
+  formData: formData.value,
+  orgName: formData.value.orgName || "Organization",
+  orgType: formData.value.orgType,
+  memberCount: formData.value.memberCount,
+  sectionsEnabled: sectionsEnabled.value,
+  coreValues: formData.value.coreValues,
+  principles: formData.value.principles,
+  policies: {
+    memberInvolvement: formData.value.memberInvolvement,
+    communicationGuidelines: formData.value.communicationGuidelines,
+    processSteps: formData.value.processSteps,
+    escalationCriteria: formData.value.escalationCriteria,
+    mediation: formData.value.mediation,
+    finalDecision: formData.value.finalDecision,
+    learning: formData.value.learning,
+    emergencyProcedures: formData.value.emergencyProcedures,
+    annualReview: formData.value.annualReview,
+  },
+  exportedAt: new Date().toISOString(),
+  section: "conflict-resolution-framework",
+}));
 </script>
 
 <style scoped>
diff --git a/pages/templates/membership-agreement.vue b/pages/templates/membership-agreement.vue
index 39a74d8..ae41bd5 100644
--- a/pages/templates/membership-agreement.vue
+++ b/pages/templates/membership-agreement.vue
@@ -15,7 +15,9 @@
           <div class="text-center mb-8">
             <h1
               class="text-3xl md:text-5xl font-bold uppercase text-neutral-900 dark:text-white m-0 py-4 border-t-2 border-b-2 border-neutral-900 dark:border-neutral-100"
-              :data-coop-name="getDisplayName()">
+              :data-coop-name="
+                formData.cooperativeName || 'Worker Cooperative'
+              ">
               MEMBERSHIP AGREEMENT
             </h1>
           </div>
@@ -170,7 +172,7 @@
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
                   Any person who:
                 </p>
-                <UFormField class="form-group-large">
+                <UFormField label="Member Requirements" class="form-group-large">
                   <UTextarea
                     v-model="formData.memberRequirements"
                     :rows="4"
@@ -191,7 +193,7 @@
                 <p class="content-paragraph">
                   New members join through a consent process, which means
                   existing members must agree that adding this person won't harm
-                  {{ getDisplayName().toLowerCase() }}.
+                  the cooperative.
                 </p>
 
                 <ol class="content-list numbered my-2 pl-6 list-decimal">
@@ -201,17 +203,18 @@
                       v-model="formData.trialPeriodMonths"
                       type="number"
                       placeholder="3"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     months working together
                   </li>
                   <li>Values alignment conversation</li>
+                  <li>Consent decision by current members</li>
                   <li class="flex items-baseline gap-2 flex-wrap">
                     Optional - Equal buy-in contribution of $<UInput
                       v-model="formData.buyInAmount"
                       type="number"
                       placeholder="1000"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     (can be paid over time or waived based on need)
                   </li>
@@ -231,7 +234,7 @@
                     v-model="formData.noticeDays"
                     type="number"
                     placeholder="30"
-                    class="inline-field number-field w-10"
+                    class="inline-field number-field"
                     @change="autoSave" />
                   days notice. The cooperative will:
                 </p>
@@ -243,7 +246,7 @@
                       v-model="formData.surplusPayoutDays"
                       type="number"
                       placeholder="30"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     days
                   </li>
@@ -253,7 +256,7 @@
                       v-model="formData.buyInReturnDays"
                       type="number"
                       placeholder="90"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     days
                   </li>
@@ -273,29 +276,16 @@
             </h2>
 
             <div class="space-y-4">
-              <!-- Decision Framework Selection -->
               <div>
                 <h3
                   class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
-                  Primary Decision Framework
+                  Consent-Based Decisions
                 </h3>
-                <UFormField class="form-group-large mb-4">
-                  <USelect
-                    v-model="formData.decisionFramework"
-                    :items="decisionFrameworkOptions"
-                    placeholder="Select decision framework"
-                    size="xl"
-                    class="w-full"
-                    @change="autoSave" />
-                </UFormField>
-              </div>
-
-              <div>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
-                  {{
-                    getFrameworkDetails(formData.decisionFramework)
-                      .practicalDescription
-                  }}
+                  We use consent, not consensus. This means we move forward when
+                  no one has a principled objection that would harm the
+                  cooperative. An objection must explain how the proposal would
+                  contradict our values or threaten our sustainability.
                 </p>
               </div>
 
@@ -311,7 +301,7 @@
                       v-model="formData.dayToDayLimit"
                       type="number"
                       placeholder="100"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     can be made by any member. Just tell others what you did at
                     the next meeting.
@@ -329,13 +319,13 @@
                       v-model="formData.regularDecisionMin"
                       type="number"
                       placeholder="100"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     and $<UInput
                       v-model="formData.regularDecisionMax"
                       type="number"
                       placeholder="1000"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     need consent from members present at a meeting (minimum 2
                     members).
@@ -359,14 +349,11 @@
                       v-model="formData.majorDebtThreshold"
                       type="number"
                       placeholder="5000"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                   </li>
                   <li>Fundamental changes to our purpose or structure</li>
-                  <li>
-                    Dissolution of
-                    {{ getDisplayName().toLowerCase() }}
-                  </li>
+                  <li>Dissolution of the cooperative</li>
                 </ul>
               </div>
 
@@ -390,7 +377,7 @@
                       v-model="formData.emergencyNoticeHours"
                       type="number"
                       placeholder="24"
-                      class="inline-field number-field w-10"
+                      class="inline-field number-field"
                       @change="autoSave" />
                     hours notice
                   </li>
@@ -417,9 +404,8 @@
                   Equal Ownership
                 </h3>
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
-                  Each member owns an equal share of
-                  {{ getDisplayName().toLowerCase() }},
-                  regardless of hours worked or tenure.
+                  Each member owns an equal share of the cooperative, regardless
+                  of hours worked or tenure.
                 </p>
               </div>
 
@@ -428,7 +414,7 @@
                   class="subsection-title text-xl font-semibold text-neutral-700 dark:text-neutral-200 border-b border-neutral-200 dark:border-neutral-600 pb-1 mb-3">
                   Paying Ourselves
                 </h3>
-
+                
                 <!-- Pay Policy Selection -->
                 <UFormField label="Pay Policy" class="form-group-large mb-4">
                   <USelect
@@ -441,20 +427,15 @@
                 </UFormField>
 
                 <!-- Equal Pay Policy -->
-                <div
-                  v-if="formData.payPolicy === 'equal-pay'"
-                  class="space-y-3">
-                  <p class="content-paragraph">
-                    All members receive equal compensation regardless of role or
-                    hours worked.
-                  </p>
+                <div v-if="formData.payPolicy === 'equal-pay'" class="space-y-3">
+                  <p class="content-paragraph">All members receive equal compensation regardless of role or hours worked.</p>
                   <ul class="content-list my-2 pl-6 list-disc">
                     <li class="flex items-baseline gap-2 flex-wrap">
                       Base rate: $<UInput
                         v-model="formData.baseRate"
                         type="number"
                         placeholder="25"
-                        class="inline-field number-field w-10"
+                        class="inline-field number-field"
                         @change="autoSave" />/hour for all members
                     </li>
                     <li class="flex items-baseline gap-2 flex-wrap">
@@ -462,7 +443,7 @@
                         v-model="formData.monthlyDraw"
                         type="number"
                         placeholder="2000"
-                        class="inline-field number-field w-10"
+                        class="inline-field number-field"
                         @change="autoSave" />
                       per member
                     </li>
@@ -470,19 +451,15 @@
                 </div>
 
                 <!-- Hours-Weighted Policy -->
-                <div
-                  v-if="formData.payPolicy === 'hours-weighted'"
-                  class="space-y-3">
-                  <p class="content-paragraph">
-                    Compensation is proportional to hours worked by each member.
-                  </p>
+                <div v-if="formData.payPolicy === 'hours-weighted'" class="space-y-3">
+                  <p class="content-paragraph">Compensation is proportional to hours worked by each member.</p>
                   <ul class="content-list my-2 pl-6 list-disc">
                     <li class="flex items-baseline gap-2 flex-wrap">
                       Hourly rate: $<UInput
                         v-model="formData.hourlyRate"
                         type="number"
                         placeholder="25"
-                        class="inline-field number-field w-10"
+                        class="inline-field number-field"
                         @change="autoSave" />/hour
                     </li>
                     <li>Members track their hours and are paid accordingly</li>
@@ -491,26 +468,18 @@
                 </div>
 
                 <!-- Needs-Weighted Policy -->
-                <div
-                  v-if="formData.payPolicy === 'needs-weighted'"
-                  class="space-y-3">
-                  <p class="content-paragraph">
-                    Compensation is allocated based on each member's individual
-                    financial needs.
-                  </p>
+                <div v-if="formData.payPolicy === 'needs-weighted'" class="space-y-3">
+                  <p class="content-paragraph">Compensation is allocated based on each member's individual financial needs.</p>
                   <ul class="content-list my-2 pl-6 list-disc">
                     <li>Members declare their minimum monthly needs</li>
-                    <li>
-                      Available payroll is distributed proportionally to cover
-                      needs
-                    </li>
+                    <li>Available payroll is distributed proportionally to cover needs</li>
                     <li>Regular needs assessment and adjustment process</li>
                     <li class="flex items-baseline gap-2 flex-wrap">
                       Minimum guaranteed amount: $<UInput
                         v-model="formData.minGuaranteedPay"
                         type="number"
                         placeholder="1000"
-                        class="inline-field number-field w-10"
+                        class="inline-field number-field"
                         @change="autoSave" />/month
                     </li>
                   </ul>
@@ -518,9 +487,7 @@
 
                 <!-- Common payment details -->
                 <div class="mt-4 space-y-2">
-                  <p class="content-paragraph font-semibold">
-                    Payment Schedule:
-                  </p>
+                  <p class="content-paragraph font-semibold">Payment Schedule:</p>
                   <ul class="content-list my-2 pl-6 list-disc">
                     <li class="flex items-baseline gap-2 flex-wrap">
                       Paid on the
@@ -528,9 +495,9 @@
                         v-model="formData.paymentDay"
                         :items="dayOptions"
                         placeholder="15th"
+                        arrow
                         class="inline-field"
                         @change="autoSave" />
-
                       of each month
                     </li>
                     <li class="flex items-baseline gap-2 flex-wrap">
@@ -558,7 +525,7 @@
                         v-model="formData.targetHours"
                         type="number"
                         placeholder="40"
-                        class="inline-field number-field w-10"
+                        class="inline-field number-field"
                         @change="autoSave" />
                       (flexible based on capacity)
                     </li>
@@ -581,7 +548,10 @@
                       All members can access all financial records anytime
                     </li>
                     <li>Monthly financial check-ins at meetings</li>
-                    <li>Quarterly reviews of our runway</li>
+                    <li>
+                      Quarterly reviews of our runway (how many months we can
+                      operate)
+                    </li>
                   </ul>
                 </div>
               </div>
@@ -608,11 +578,11 @@
                     v-model="formData.roleRotationMonths"
                     type="number"
                     placeholder="6"
-                    class="inline-field number-field w-10"
+                    class="inline-field number-field"
                     @change="autoSave" />
                   months. Current roles include:
                 </p>
-                <UFormField class="form-group-large">
+                <UFormField label="Rotating Roles" class="form-group-large">
                   <UTextarea
                     v-model="formData.rotatingRoles"
                     :rows="4"
@@ -632,7 +602,7 @@
                 <p class="content-paragraph mb-3 leading-relaxed text-left">
                   All members participate in:
                 </p>
-                <UFormField class="form-group-large">
+                <UFormField label="Shared Responsibilities" class="form-group-large">
                   <UTextarea
                     v-model="formData.sharedResponsibilities"
                     :rows="3"
@@ -699,13 +669,8 @@
                 placeholder="year"
                 class="inline-field"
                 @change="autoSave" />
-              and update it through our
-              <span class="font-semibold">{{
-                getFrameworkLabel(formData.decisionFramework)
-              }}</span>
-              process. Small clarifications can happen anytime; structural
-              changes need
-              {{ getStructuralChangeRequirement(formData.decisionFramework) }}.
+              and update it through our consent process. Small clarifications
+              can happen anytime; structural changes need full member consent.
             </p>
           </div>
 
@@ -718,8 +683,7 @@
 
             <div class="space-y-4">
               <p class="content-paragraph mb-3 leading-relaxed text-left">
-                If
-                {{ getDisplayName().toLowerCase() }} dissolves:
+                If the cooperative dissolves:
               </p>
               <ol class="content-list numbered my-2 pl-6 list-decimal">
                 <li>Pay all debts and obligations</li>
@@ -736,33 +700,21 @@
             </div>
           </div>
 
-          <!-- Section 9: Legal Registration (Optional) -->
+          <!-- Section 9: Legal Bits -->
           <div class="section-card">
-            <div class="flex items-center justify-between mb-4">
-              <h2
-                class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-0">
-                9. Legal Registration
-              </h2>
-              <div class="flex items-center gap-2">
-                <label
-                  class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                  Legally registered?
-                </label>
-                <USwitch
-                  v-model="formData.isLegallyRegistered"
-                  @change="autoSave" />
-              </div>
-            </div>
+            <h2
+              class="section-title text-2xl font-extrabold text-neutral-900 dark:text-neutral-100 mb-4">
+              9. Legal Bits
+            </h2>
 
-            <div v-if="formData.isLegallyRegistered" class="space-y-4">
+            <div class="space-y-4">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <UFormField label="Legal Structure" class="form-group-block">
                   <UInput
                     v-model="formData.legalStructure"
                     size="xl"
                     class="w-full"
-                    placeholder="Cooperative corporation, LLC, partnership, etc."
-                    @change="autoSave" />
+                    placeholder="Cooperative corporation, LLC, partnership, etc." />
                 </UFormField>
 
                 <UFormField label="Registered in" class="form-group-inline">
@@ -802,16 +754,8 @@
                 but work to align our legal structure with our values.
               </p>
             </div>
-
-            <div v-else class="text-neutral-600 dark:text-neutral-400 italic">
-              <p class="content-paragraph">
-                {{ getDisplayName() || "This cooperative" }} operates as
-                an informal collective. If we decide to register legally in the
-                future, we'll update this section with our legal structure
-                details.
-              </p>
-            </div>
           </div>
+
         </div>
       </div>
     </div>
@@ -827,9 +771,6 @@
 <script setup>
 import { ref, watch } from "vue";
 
-// Import centralized coop info
-const { coopInfo, updateCoopInfo, getDisplayName } = useCoopInfo();
-
 definePageMeta({
   layout: false,
 });
@@ -854,194 +795,40 @@ const monthOptions = [
 
 const dayOptions = Array.from({ length: 31 }, (_, i) => ({
   value: i + 1,
-  label: `${i + 1}${getOrdinalSuffix(i + 1)}`,
+  label: `${i + 1}${getOrdinalSuffix(i + 1)}`
 }));
 
 // Helper function to get ordinal suffix (1st, 2nd, 3rd, etc.)
 function getOrdinalSuffix(num) {
   if (num >= 11 && num <= 13) {
-    return "th";
+    return 'th';
   }
   switch (num % 10) {
-    case 1:
-      return "st";
-    case 2:
-      return "nd";
-    case 3:
-      return "rd";
-    default:
-      return "th";
+    case 1: return 'st';
+    case 2: return 'nd'; 
+    case 3: return 'rd';
+    default: return 'th';
   }
 }
 
 const payPolicyOptions = [
-  {
-    value: "equal-pay",
-    label: "Equal Pay - All members receive equal compensation",
-  },
-  {
-    value: "hours-weighted",
-    label: "Hours-Weighted - Pay proportional to hours worked",
-  },
-  {
-    value: "needs-weighted",
-    label: "Needs-Weighted - Pay proportional to individual needs",
-  },
+  { value: 'equal-pay', label: 'Equal Pay - All members receive equal compensation' },
+  { value: 'hours-weighted', label: 'Hours-Weighted - Pay proportional to hours worked' },
+  { value: 'needs-weighted', label: 'Needs-Weighted - Pay proportional to individual needs' }
 ];
 
-const decisionFrameworkOptions = [
-  {
-    value: "consent-based",
-    label: "Consent-Based - No one objects strongly enough to block",
-  },
-  {
-    value: "consensus",
-    label: "Full Consensus - Everyone agrees to support",
-  },
-  {
-    value: "consultative",
-    label: "Consultative - Gather input, then designated person decides",
-  },
-  {
-    value: "democratic-vote",
-    label: "Democratic Vote - Majority decides",
-  },
-  {
-    value: "advice-process",
-    label: "Advice Process - Decision-maker seeks input, then decides",
-  },
-  {
-    value: "delegation",
-    label: "Delegation - Empower responsible party to decide",
-  },
-  {
-    value: "defer-to-expert",
-    label: "Defer to Expert - Trust the person who knows best",
-  },
-  {
-    value: "facilitated-discussion",
-    label: "Facilitated Discussion - Talk it through with structure",
-  },
-];
-
-// Helper function to get framework label
-function getFrameworkLabel(framework) {
-  const labels = {
-    "consent-based": "consent-based decision",
-    consensus: "consensus",
-    consultative: "consultative",
-    "democratic-vote": "democratic voting",
-    "advice-process": "advice",
-    delegation: "delegation",
-    "defer-to-expert": "expert-led",
-    "facilitated-discussion": "facilitated discussion",
-  };
-  return labels[framework] || "decision-making";
-}
-
-// Helper function to get structural change requirement text
-function getStructuralChangeRequirement(framework) {
-  const requirements = {
-    "consent-based": "no blocking objections from any member",
-    consensus: "full consensus from all members",
-    consultative: "consultation with all members before the decision",
-    "democratic-vote": "a majority vote of all members",
-    "advice-process": "advice from all members before the decision",
-    delegation: "approval from the delegated authority",
-    "defer-to-expert":
-      "approval from the designated expert after member consultation",
-    "facilitated-discussion": "a facilitated discussion with all members",
-  };
-  return (
-    requirements[framework] || "approval through our chosen decision process"
-  );
-}
-
-// Helper function to get framework details
-function getFrameworkDetails(framework) {
-  const details = {
-    "consent-based": {
-      tagline: "No one objects strongly enough to block",
-      description:
-        "Not everyone needs to love it, but no one sees it as harmful to our organization. Focus on addressing objections rather than optimizing preferences.",
-      practicalDescription:
-        "We use consent, not consensus. This means we move forward when no one has a principled objection that would harm our organization. An objection must explain how the proposal would contradict our values or threaten our sustainability.",
-    },
-    consensus: {
-      tagline: "Everyone agrees to support the decision",
-      description:
-        "Take the time to get real alignment on high-stakes decisions. Everyone can live with it, even if it's not their favorite option.",
-      practicalDescription:
-        "For major decisions, we work together until everyone can support the outcome. This doesn't mean it's everyone's first choice, but that everyone understands and commits to the decision.",
-    },
-    consultative: {
-      tagline: "Gather input, then designated person decides",
-      description:
-        "When no one has clear expertise but we need various perspectives, one person gathers input and makes the final call.",
-      practicalDescription:
-        "A designated decision owner seeks input from all stakeholders, researches options, and makes the decision with clear reasoning. They explain how input influenced the final decision.",
-    },
-    "democratic-vote": {
-      tagline: "Majority decides, move forward together",
-      description:
-        "For larger groups or time-sensitive decisions, voting provides clear resolution while respecting everyone's input.",
-      practicalDescription:
-        "After discussion, we vote and move forward with the majority decision. We document minority concerns and revisit them if needed. Anonymous voting reduces peer pressure.",
-    },
-    "advice-process": {
-      tagline: "Decision-maker seeks input, then decides",
-      description:
-        "Balances inclusion with efficiency. The decision owner genuinely considers input but isn't bound by it.",
-      practicalDescription:
-        "The person most affected or willing becomes the decision owner. They seek advice from those with expertise and those affected, then make the decision and explain their reasoning.",
-    },
-    delegation: {
-      tagline: "Empower the responsible party to decide",
-      description:
-        "Trust those closest to the work to make decisions within clear scope and constraints.",
-      practicalDescription:
-        "We delegate decisions to the people most affected or with the most expertise. They have authority within defined boundaries and report back on outcomes.",
-    },
-    "defer-to-expert": {
-      tagline: "Trust the person who knows this best",
-      description:
-        "When someone has clear expertise, let them lead while keeping everyone informed.",
-      practicalDescription:
-        "The expert proposes solutions with reasoning, answers clarifying questions, and makes the final call. They explain their thinking, not just the outcome.",
-    },
-    "facilitated-discussion": {
-      tagline: "Talk it through with structure",
-      description:
-        "Use structured discussion to find clarity before choosing a specific decision method.",
-      practicalDescription:
-        "We clarify what we're deciding, share all relevant information, and each person shares their perspective with time limits. We identify alignment and differences, then choose the appropriate method.",
-    },
-  };
-
-  return (
-    details[framework] || {
-      tagline: "Select a framework to see details",
-      description: "",
-      practicalDescription:
-        "Choose a decision-making framework above to see how it works in practice.",
-    }
-  );
-}
-
 const formData = ref({
   cooperativeName: "",
   dateEstablished: "",
   purpose: "",
   coreValues: "",
-  memberRequirements:
-    "Shares our values and purpose\nContributes labour to our organization (by doing actual work, not just investing money)\nCommits to collective decision-making\nParticipates in governance responsibilities",
+  memberRequirements: "Shares our values and purpose\nContributes labour to the cooperative (by doing actual work, not just investing money)\nCommits to collective decision-making\nParticipates in governance responsibilities",
   members: [{ name: "", email: "", joinDate: "", role: "" }],
   trialPeriodMonths: 3,
   buyInAmount: "",
   noticeDays: 30,
   surplusPayoutDays: 30,
   buyInReturnDays: 90,
-  decisionFramework: "consent-based", // Default to consent-based
   dayToDayLimit: 100,
   regularDecisionMin: 100,
   regularDecisionMax: 1000,
@@ -1058,13 +845,10 @@ const formData = ref({
   surplusFrequency: "quarter",
   targetHours: 40,
   roleRotationMonths: 6,
-  rotatingRoles:
-    "Financial coordinator (handles bookkeeping, not financial decisions)\nMeeting facilitator\nExternal communications\nOthers",
-  sharedResponsibilities:
-    "Governance and decision-making\nStrategic planning\nMutual support and care",
+  rotatingRoles: "Financial coordinator (handles bookkeeping, not financial decisions)\nMeeting facilitator\nExternal communications\nOthers",
+  sharedResponsibilities: "Governance and decision-making\nStrategic planning\nMutual support and care",
   reviewFrequency: "year",
   assetDonationTarget: "",
-  isLegallyRegistered: false,
   legalStructure: "",
   registeredLocation: "",
   fiscalYearEndMonth: "December",
@@ -1088,35 +872,6 @@ const loadSavedData = () => {
 // Load data immediately
 loadSavedData();
 
-// Sync with centralized coop info
-watch(
-  () => coopInfo.value,
-  (newCoopInfo) => {
-    formData.value.cooperativeName = newCoopInfo.cooperativeName || formData.value.cooperativeName;
-    formData.value.dateEstablished = newCoopInfo.dateEstablished || formData.value.dateEstablished;
-    formData.value.purpose = newCoopInfo.purpose || formData.value.purpose;
-    formData.value.coreValues = newCoopInfo.coreValues || formData.value.coreValues;
-  },
-  { deep: true, immediate: true }
-);
-
-// Update centralized store when key fields change
-watch(
-  () => ({
-    cooperativeName: formData.value.cooperativeName,
-    dateEstablished: formData.value.dateEstablished,
-    purpose: formData.value.purpose,
-    coreValues: formData.value.coreValues,
-    legalStructure: formData.value.legalStructure,
-    registeredLocation: formData.value.registeredLocation,
-    isLegallyRegistered: formData.value.isLegallyRegistered,
-  }),
-  (newData) => {
-    updateCoopInfo(newData);
-  },
-  { deep: true }
-);
-
 // Auto-save to localStorage (removed immediate to prevent overwriting)
 watch(
   formData,
@@ -1317,30 +1072,9 @@ const exportData = computed(() => ({
   // Pass the complete formData object - this is what the export functions use
   formData: formData.value,
   // Also provide direct access to key fields for backward compatibility
-  cooperativeName: getDisplayName(),
+  cooperativeName: formData.value.cooperativeName || "Worker Cooperative",
   section: "membership-agreement",
   exportedAt: new Date().toISOString(),
-  // Include computed/dynamic values for complete export
-  decisionFrameworkDetails: getFrameworkDetails(
-    formData.value.decisionFramework
-  ),
-  decisionFrameworkLabel: getFrameworkLabel(formData.value.decisionFramework),
-  structuralChangeRequirement: getStructuralChangeRequirement(
-    formData.value.decisionFramework
-  ),
-  paymentDayLabel: formData.value.paymentDay
-    ? `${formData.value.paymentDay}${getOrdinalSuffix(
-        formData.value.paymentDay
-      )}`
-    : "15th",
-  // Include selected dropdown labels for readability
-  decisionFrameworkName:
-    decisionFrameworkOptions.find(
-      (opt) => opt.value === formData.value.decisionFramework
-    )?.label || "Consent-Based - No one objects strongly enough to block",
-  payPolicyName:
-    payPolicyOptions.find((opt) => opt.value === formData.value.payPolicy)
-      ?.label || "Equal Pay - All members receive equal compensation",
 }));
 </script>