diff --git a/app/views/accounts/new/_method_selector.html.erb b/app/views/accounts/new/_method_selector.html.erb
index 953dcba78..755d714f9 100644
--- a/app/views/accounts/new/_method_selector.html.erb
+++ b/app/views/accounts/new/_method_selector.html.erb
@@ -12,7 +12,7 @@
     <% if show_us_link %>
       <%# Default US-only Link %>
       <%= link_to new_plaid_item_path(region: "us", accountable_type: accountable_type),
-                  class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
+                  class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
                   data: { turbo_frame: "modal" } do %>
         <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
           <%= icon("link-2") %>
@@ -24,7 +24,7 @@
     <%# EU Link %>
     <% if show_eu_link %>
       <%= link_to new_plaid_item_path(region: "eu", accountable_type: accountable_type),
-                  class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
+                  class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
                   data: { turbo_frame: "modal" } do %>
         <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
           <%= icon("link-2") %>
@@ -35,10 +35,10 @@
 
     <%# SimpleFin Link %>
     <%= link_to new_simplefin_item_path,
-                class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-gray-50 border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-gray-50 rounded-lg p-2",
+                class: "text-primary flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-primary px-2 hover:bg-surface rounded-lg p-2",
                 data: { turbo_frame: "modal" } do %>
-      <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-green-100 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
-        <%= icon("building-2", class: "text-green-600") %>
+      <span class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg bg-alpha-black-50 shadow-[inset_0_0_0_1px_rgba(0,0,0,0.02)]">
+        <%= icon("building-2") %>
       </span>
       Connect with SimpleFin
     <% end %>
diff --git a/app/views/simplefin_items/_simplefin_item.html.erb b/app/views/simplefin_items/_simplefin_item.html.erb
index 12c069fad..128edaf3e 100644
--- a/app/views/simplefin_items/_simplefin_item.html.erb
+++ b/app/views/simplefin_items/_simplefin_item.html.erb
@@ -6,12 +6,12 @@
       <div class="flex items-center gap-2">
         <%= icon "chevron-right", class: "group-open:transform group-open:rotate-90" %>
 
-        <div class="flex items-center justify-center h-8 w-8 bg-green-600/10 rounded-full">
+        <div class="flex items-center justify-center h-8 w-8 bg-alpha-black-50 rounded-full">
           <% if simplefin_item.logo.attached? %>
             <%= image_tag simplefin_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
           <% else %>
             <div class="flex items-center justify-center">
-              <%= tag.p simplefin_item.name.first.upcase, class: "text-green-600 text-xs font-medium" %>
+              <%= tag.p simplefin_item.name.first.upcase, class: "text-primary text-xs font-medium" %>
             </div>
           <% end %>
         </div>
diff --git a/app/views/simplefin_items/index.html.erb b/app/views/simplefin_items/index.html.erb
index fd53989e3..01ff66d16 100644
--- a/app/views/simplefin_items/index.html.erb
+++ b/app/views/simplefin_items/index.html.erb
@@ -23,8 +23,8 @@
     </div>
   <% else %>
     <div class="text-center py-12">
-      <div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
-        <%= icon "building-2", size: "lg", class: "text-green-600" %>
+      <div class="mx-auto w-16 h-16 bg-alpha-black-50 rounded-full flex items-center justify-center mb-4">
+        <%= icon "building-2", size: "lg" %>
       </div>
       <h3 class="text-lg font-medium text-primary mb-2">No SimpleFin connections</h3>
       <p class="text-secondary mb-6">Connect your bank accounts through SimpleFin to automatically sync transactions.</p>
diff --git a/app/views/simplefin_items/new.html.erb b/app/views/simplefin_items/new.html.erb
index 1c7e4c1c4..6b7fbb332 100644
--- a/app/views/simplefin_items/new.html.erb
+++ b/app/views/simplefin_items/new.html.erb
@@ -1,44 +1,38 @@
 <% content_for :title, "Add SimpleFin Connection" %>
 
 <%= render DS::Dialog.new do |dialog| %>
-  <% dialog.with_header(title: "Add SimpleFin Connection") do %>
-    <div class="flex items-center gap-2">
-      <%= icon "building-2", class: "text-green-600" %>
-      <span>Connect your bank account through SimpleFin</span>
-    </div>
-  <% end %>
+  <% dialog.with_header(title: "Add SimpleFin Connection") %>
   <% dialog.with_body do %>
     <% if @error_message.present? %>
       <%= render DS::Alert.new(message: @error_message, variant: :error) %>
     <% end %>
-    <%= form_with(model: @simplefin_item, local: true, data: { turbo: false }, class: "space-y-6") do |form| %>
-      <div class="space-y-4">
-        <div>
-          <%= form.label :setup_token, "SimpleFin Setup Token", class: "block text-sm font-medium text-primary mb-2" %>
-          <%= form.text_area :setup_token, 
-                placeholder: "Paste your SimpleFin setup token here...",
-                rows: 4,
-                class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm font-mono" %>
-          <p class="text-xs text-secondary mt-1">
-            Get your setup token from 
-            <%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create", 
-                target: "_blank", 
-                class: "text-blue-600 hover:text-blue-800 underline" %>
-          </p>
-        </div>
+    <%= styled_form_with model: @simplefin_item, local: true, data: { turbo: false }, class: "flex flex-col gap-4 justify-between grow text-primary" do |form| %>
+      <div class="grow space-y-2">
+        <%= form.text_area :setup_token, 
+              label: "SimpleFin Setup Token",
+              placeholder: "Paste your SimpleFin setup token here...",
+              rows: 4,
+              required: true %>
+        
+        <p class="text-xs text-secondary">
+          Get your setup token from 
+          <%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create", 
+              target: "_blank", 
+              class: "text-link underline" %>
+        </p>
 
-        <div class="bg-blue-50 p-4 rounded-lg">
+        <div class="bg-surface border border-primary p-4 rounded-lg">
           <div class="flex items-start gap-3">
-            <%= icon "info", size: "sm", class: "text-blue-600 mt-0.5 flex-shrink-0" %>
+            <%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
             <div>
-              <h3 class="text-sm font-medium text-blue-900 mb-1">How to get your setup token:</h3>
-              <ol class="text-xs text-blue-800 space-y-1 list-decimal list-inside">
-                <li>Visit <%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create", target: "_blank", class: "underline" %></li>
+              <h3 class="text-sm font-medium text-primary mb-1">How to get your setup token:</h3>
+              <ol class="text-xs text-secondary space-y-1 list-decimal list-inside">
+                <li>Visit <%= link_to "SimpleFin Bridge", "https://bridge.simplefin.org/simplefin/create", target: "_blank", class: "text-link underline" %></li>
                 <li>Connect your bank account using your online banking credentials</li>
                 <li>Copy the SimpleFin setup token that appears (it will be a long Base64-encoded string)</li>
                 <li>Paste it above and click "Add Connection"</li>
               </ol>
-              <p class="text-xs text-blue-700 mt-2">
+              <p class="text-xs text-secondary mt-2">
                 <strong>Note:</strong> Setup tokens can only be used once. If the connection fails, you'll need to create a new token.
               </p>
             </div>
@@ -46,13 +40,7 @@
         </div>
       </div>
 
-      <div class="flex gap-3">
-        <%= form.submit "Add Connection", 
-            class: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
-        <%= link_to "Cancel", 
-            simplefin_items_path, 
-            class: "px-4 py-2 text-secondary hover:text-primary" %>
-      </div>
+      <%= form.submit "Add Connection" %>
     <% end %>
   <% end %>
 <% end %>
\ No newline at end of file
diff --git a/app/views/simplefin_items/setup_accounts.html.erb b/app/views/simplefin_items/setup_accounts.html.erb
index 02ebb6d51..6493be9d7 100644
--- a/app/views/simplefin_items/setup_accounts.html.erb
+++ b/app/views/simplefin_items/setup_accounts.html.erb
@@ -3,7 +3,7 @@
 <%= render DS::Dialog.new do |dialog| %>
   <% dialog.with_header(title: "Set Up Your SimpleFin Accounts") do %>
     <div class="flex items-center gap-2">
-      <%= icon "building-2", class: "text-green-600" %>
+      <%= icon "building-2", class: "text-primary" %>
       <span>Choose the correct account types for your imported accounts</span>
     </div>
   <% end %>
@@ -16,14 +16,14 @@
                   class: "space-y-6" do |form| %>
       
       <div class="space-y-4">
-        <div class="bg-blue-50 p-4 rounded-lg">
+        <div class="bg-surface border border-primary p-4 rounded-lg">
           <div class="flex items-start gap-3">
-            <%= icon "info", size: "sm", class: "text-blue-600 mt-0.5 flex-shrink-0" %>
+            <%= icon "info", size: "sm", class: "text-primary mt-0.5 flex-shrink-0" %>
             <div>
-              <p class="text-sm text-blue-900 mb-2">
+              <p class="text-sm text-primary mb-2">
                 <strong>Choose the correct account type for each SimpleFin account:</strong>
               </p>
-              <ul class="text-xs text-blue-800 space-y-1 list-disc list-inside">
+              <ul class="text-xs text-secondary space-y-1 list-disc list-inside">
                 <li><strong>Checking or Savings</strong> - Regular bank accounts</li>
                 <li><strong>Credit Card</strong> - Credit card accounts</li>
                 <li><strong>Investment</strong> - Brokerage, 401(k), IRA accounts</li>
@@ -52,7 +52,7 @@
                 <%= select_tag "account_types[#{simplefin_account.id}]", 
                               options_for_select(@account_type_options, 
                                 Account.map_simplefin_type_to_accountable_type(simplefin_account.account_type, account_name: simplefin_account.name)), 
-                              { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                              { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600",
                                 data: { 
                                   action: "change->account-type-selector#updateSubtype"
                                 } } %>
@@ -67,7 +67,7 @@
                                 options_for_select([["Select subtype", ""]] + @depository_subtypes, 
                                   simplefin_account.name.downcase.include?("checking") ? "checking" : 
                                   simplefin_account.name.downcase.include?("savings") ? "savings" : ""), 
-                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
+                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                 </div>
                 
                 <div class="subtype-select" data-type="CreditCard" style="display: none;">
@@ -75,7 +75,7 @@
                                class: "block text-sm font-medium text-primary mb-2" %>
                   <%= select_tag "account_subtypes[#{simplefin_account.id}]", 
                                 options_for_select([["Select type", ""]] + @credit_card_subtypes), 
-                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
+                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                 </div>
                 
                 <div class="subtype-select" data-type="Investment" style="display: none;">
@@ -83,7 +83,7 @@
                                class: "block text-sm font-medium text-primary mb-2" %>
                   <%= select_tag "account_subtypes[#{simplefin_account.id}]", 
                                 options_for_select([["Select type", ""]] + @investment_subtypes), 
-                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
+                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                 </div>
                 
                 <div class="subtype-select" data-type="Loan" style="display: none;">
@@ -91,7 +91,7 @@
                                class: "block text-sm font-medium text-primary mb-2" %>
                   <%= select_tag "account_subtypes[#{simplefin_account.id}]", 
                                 options_for_select([["Select type", ""]] + @loan_subtypes), 
-                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" } %>
+                                { class: "w-full px-3 py-2 border border-primary rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-blue-600" } %>
                 </div>
                 
                 <!-- OtherAsset doesn't need subtype selection -->
@@ -106,7 +106,7 @@
       
       <div class="flex gap-3">
         <%= form.submit "Create Accounts", 
-            class: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
+            class: "flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" %>
         <%= link_to "Cancel", 
             simplefin_items_path, 
             class: "px-4 py-2 text-secondary hover:text-primary" %>