diff --git a/app/assets/tailwind/maybe-design-system.css b/app/assets/tailwind/maybe-design-system.css
index 72e52292..fc7a67ac 100644
--- a/app/assets/tailwind/maybe-design-system.css
+++ b/app/assets/tailwind/maybe-design-system.css
@@ -498,14 +498,15 @@
   details>summary::-webkit-details-marker {
     @apply hidden;
   }
-  
+
   details>summary {
     @apply list-none;
   }
 
   input[type='radio'] {
-    @apply border-gray-300 text-indigo-600 focus:ring-indigo-600; /* Default light mode */
-    
+    @apply border-gray-300 text-indigo-600 focus:ring-indigo-600;
+    /* Default light mode */
+
     @variant theme-dark {
       /* Dark mode radio button base and checked styles */
       @apply border-gray-600 bg-gray-700 checked:bg-blue-500 focus:ring-blue-500 focus:ring-offset-gray-800;
@@ -531,32 +532,49 @@
       @apply disabled:button-bg-disabled disabled:hover:button-bg-disabled;
     }
   }
-  
+
   .btn--secondary {
     @apply button-bg-secondary text-primary;
     @apply hover:button-bg-secondary-hover;
 
     @variant theme-dark {
-      @apply button-bg-secondary text-white;
-      @apply hover:button-bg-secondary-hover;
+      @apply text-white;
+      background-color: var(--color-gray-700);
+      &:hover {
+        background-color: var(--color-gray-800);
+      }
     }
   }
-  
+
   .btn--outline {
     @apply border border-alpha-black-200 text-primary disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-400;
-    @apply hover:button-bg-outline-hover;
+
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
 
     @variant theme-dark {
       @apply border-alpha-white-300 text-white disabled:button-bg-disabled disabled:hover:button-bg-disabled disabled:text-gray-600;
-      @apply hover:button-bg-outline-hover;
+
+      &:hover {
+        background-color: var(--color-gray-800);
+      }
     }
   }
-  
+
   .btn--ghost {
-    @apply border border-transparent hover:button-bg-ghost-hover;
+    @apply border border-transparent text-primary;
+
+    &:hover {
+      background-color: var(--color-gray-100)
+    }
 
     @variant theme-dark {
-      @apply hover:fg-inverse hover:button-bg-ghost-hover;
+      @apply fg-primary;
+
+      &:hover {
+        background-color: var(--color-gray-900);
+      }
     }
   }
 
@@ -581,7 +599,7 @@
     @apply flex flex-col gap-1 relative px-3 py-2 rounded-md border bg-container border-secondary shadow-xs w-full;
     @apply focus-within:border-secondary focus-within:shadow-none focus-within:ring-4 focus-within:ring-alpha-black-200;
     @apply transition-all duration-300;
-    
+
     @variant theme-dark {
       @apply focus-within:ring-alpha-white-300;
     }
@@ -589,22 +607,22 @@
     /* Add styles for multiple select within form fields */
     select[multiple] {
       @apply py-2 pr-2 space-y-0.5 overflow-y-auto;
-      
+
       option {
         @apply py-2 rounded-md;
       }
-      
+
       option:checked {
         @apply after:content-['\2713'] bg-container-inset after:text-gray-500 after:ml-2;
       }
-      
+
       option:active,
       option:focus {
         @apply bg-container-inset;
       }
     }
   }
-  
+
   .form-field__label {
     @apply block text-xs text-secondary peer-disabled:text-subdued;
   }
@@ -616,16 +634,26 @@
     @apply disabled:text-subdued;
     @apply text-ellipsis overflow-hidden whitespace-nowrap;
     @apply transition-opacity duration-300;
-  
+    @apply placeholder:text-subdued;
+
     &select {
       @apply pr-8;
     }
+
+    @variant theme-dark {
+      &::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+        cursor: pointer;
+      }
+    }
+
+
   }
-  
+
   .form-field__radio {
     @apply text-primary;
   }
-  
+
   .form-field__submit {
     @apply cursor-pointer rounded-lg bg-surface p-3 text-center text-white hover:bg-surface-hover;
   }
@@ -642,21 +670,37 @@
     &[type='checkbox'] {
       @apply border-alpha-black-200 checked:bg-gray-900 checked:ring-gray-900 focus:ring-gray-900 focus-visible:ring-gray-900 checked:hover:bg-gray-500;
     }
-  
+
     &[type='checkbox']:disabled {
       @apply cursor-not-allowed opacity-80 bg-gray-50 border-gray-200 checked:bg-gray-400 checked:ring-gray-400;
     }
-  }
+
+    @variant theme-dark {
+      &[type='checkbox'] {
+        @apply ring-gray-900 checked:text-white;
+        background-color: var(--color-gray-600);
+      }
   
+      &[type='checkbox']:disabled {
+        @apply cursor-not-allowed opacity-80 ring-gray-600;
+      }
+  
+      &[type='checkbox']:checked {
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+        background-color: var(--color-gray-600);
+      }
+    }
+  }
+
   .checkbox--dark {
     &[type='checkbox'] {
       @apply ring-gray-900 checked:text-white;
     }
-  
+
     &[type='checkbox']:disabled {
       @apply cursor-not-allowed opacity-80 ring-gray-600;
     }
-  
+
     &[type='checkbox']:checked {
       background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='111827' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
     }
@@ -669,35 +713,52 @@
     @apply after:transition-transform after:duration-300 after:ease-in-out;
     @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
     @apply transition-colors duration-300;
+
+    @variant theme-dark {
+      background-color: var(--color-gray-700);
+    }
   }
 
   /* Tooltips */
   .tooltip {
     @apply hidden absolute;
   }
+
+  .qrcode svg path {
+    fill: var(--color-black);
+    @variant theme-dark {
+      fill: var(--color-white);
+    }
+
+  }
 }
 
 @layer utilities {
+
   /* Specific override for strong tags in prose under dark mode */
   .prose:where([data-theme=dark], [data-theme=dark] *) strong {
-    color: theme(colors.white) !important; 
+    color: theme(colors.white) !important;
   }
 }
 
 /* Button Backgrounds */
 @utility button-bg-primary {
-  @apply bg-gray-900; /* Maps to fg-primary light */
+  @apply bg-gray-900;
+  /* Maps to fg-primary light */
 
   @variant theme-dark {
-    @apply bg-white; /* Maps to fg-primary dark */
+    @apply bg-white;
+    /* Maps to fg-primary dark */
   }
 }
 
 @utility button-bg-primary-hover {
-  @apply bg-gray-800; /* Maps to fg-primary-variant light */
+  @apply bg-gray-800;
+  /* Maps to fg-primary-variant light */
 
   @variant theme-dark {
-    @apply bg-gray-50; /* Maps to fg-primary-variant dark */
+    @apply bg-gray-50;
+    /* Maps to fg-primary-variant dark */
   }
 }
 
@@ -788,4 +849,4 @@
   @variant theme-dark {
     @apply bg-white;
   }
-}
\ No newline at end of file
+}
diff --git a/app/helpers/forms_helper.rb b/app/helpers/forms_helper.rb
index 53336757..52b3bb5f 100644
--- a/app/helpers/forms_helper.rb
+++ b/app/helpers/forms_helper.rb
@@ -30,7 +30,7 @@ end
 
   private
     def radio_tab_contents(label:, icon:, class: nil)
-      tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued group-has-checked:bg-container group-has-checked:text-gray-800 group-has-checked:shadow-sm") do
+      tag.div(class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued group-has-checked:bg-surface group-has-checked:text-primary group-has-checked:shadow-sm") do
         concat lucide_icon(icon, class: "w-5 h-5")
         concat tag.span(label, class: "group-has-checked:font-semibold")
       end
diff --git a/app/views/accounts/_account_type.html.erb b/app/views/accounts/_account_type.html.erb
index 4ff07990..63622859 100644
--- a/app/views/accounts/_account_type.html.erb
+++ b/app/views/accounts/_account_type.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (accountable:) %>
 
 <%= link_to new_polymorphic_path(accountable, step: "method_select", return_to: params[:return_to]),
-            class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
+            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
   <span style="background-color: color-mix(in srgb, <%= accountable.color %> 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
     <%= lucide_icon(accountable.icon, style: "color: #{accountable.color}", class: "w-5 h-5") %>
   </span>
diff --git a/app/views/accounts/index.html.erb b/app/views/accounts/index.html.erb
index d8c9b821..fcdca138 100644
--- a/app/views/accounts/index.html.erb
+++ b/app/views/accounts/index.html.erb
@@ -15,7 +15,7 @@
                     class: "btn btn--primary flex items-center justify-center gap-1 w-9 h-9 md:w-auto md:h-auto rounded-full md:rounded-lg" do %>
         <div class="flex items-center justify-center w-5 h-5">
 
-        <%= lucide_icon("plus")%>
+        <%= lucide_icon("plus") %>
                     </div>
         <p class="hidden md:block text-sm font-medium"><%= t(".new_account") %></p>
       <% end %>
diff --git a/app/views/accounts/new.html.erb b/app/views/accounts/new.html.erb
index bd9b9d1f..0bde1bd8 100644
--- a/app/views/accounts/new.html.erb
+++ b/app/views/accounts/new.html.erb
@@ -24,7 +24,7 @@
     <% unless params[:return_to].present? %>
       <%= button_to imports_path(import: { type: "AccountImport" }),
               data: { turbo_frame: :_top },
-            class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-alpha-black-25 hover:bg-alpha-black-25 border border-transparent block px-2 rounded-lg p-2" do %>
+            class: "flex items-center gap-4 w-full text-center focus:outline-hidden hover:bg-surface-hover focus:bg-surface-hover fg-contrast hover:fg-primary focus:fg-primary border border-transparent block px-2 rounded-lg p-2" do %>
         <span style="background-color: color-mix(in srgb, #F79009 10%, white);" class="flex w-8 h-8 shrink-0 grow-0 items-center justify-center rounded-lg border border-alpha-black-25">
           <%= lucide_icon("download", style: "color: #F79009", class: "w-5 h-5") %>
         </span>
diff --git a/app/views/accounts/new/_container.html.erb b/app/views/accounts/new/_container.html.erb
index 892e1a3b..d83d2e8c 100644
--- a/app/views/accounts/new/_container.html.erb
+++ b/app/views/accounts/new/_container.html.erb
@@ -15,7 +15,7 @@
       </button>
     </div>
 
-    <div class="p-2 text-primary">
+    <div class="p-2 text-subdued">
       <button hidden data-controller="hotkey" data-hotkey="k,K,ArrowUp,ArrowLeft" data-action="list-keyboard-navigation#focusPrevious">Previous</button>
       <button hidden data-controller="hotkey" data-hotkey="j,J,ArrowDown,ArrowRight" data-action="list-keyboard-navigation#focusNext">Next</button>
 
diff --git a/app/views/accounts/new/_method_selector.html.erb b/app/views/accounts/new/_method_selector.html.erb
index e4115d9e..07a70074 100644
--- a/app/views/accounts/new/_method_selector.html.erb
+++ b/app/views/accounts/new/_method_selector.html.erb
@@ -2,7 +2,7 @@
 
 <%= render layout: "accounts/new/container", locals: { title: t(".title"), back_path: new_account_path } do %>
   <div class="text-sm">
-    <%= link_to path, class: "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" do %>
+    <%= link_to path, class: "flex items-center gap-4 w-full text-center focus:outline-hidden focus:bg-surface border border-transparent focus:border focus:border-gray-200 px-2 hover:bg-surface rounded-lg p-2" 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)]">
         <%= lucide_icon("keyboard", class: "text-secondary w-5 h-5") %>
       </span>
diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb
index 50687519..3e9805bc 100644
--- a/app/views/accounts/show/_activity.html.erb
+++ b/app/views/accounts/show/_activity.html.erb
@@ -37,7 +37,7 @@
               data: { controller: "auto-submit-form" } do |form| %>
         <div class="flex gap-2 mb-4">
           <div class="grow">
-            <div class="flex items-center px-3 py-2 gap-2 border border-gray-200 rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
+            <div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:ring-gray-100 focus-within:border-gray-900">
               <%= lucide_icon("search", class: "w-5 h-5 text-secondary") %>
               <%= hidden_field_tag :account_id, @account.id %>
               <%= form.search_field :search,
diff --git a/app/views/budgets/_actuals_summary.html.erb b/app/views/budgets/_actuals_summary.html.erb
index 40da0743..784f2020 100644
--- a/app/views/budgets/_actuals_summary.html.erb
+++ b/app/views/budgets/_actuals_summary.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (budget:) %>
 
 <div>
-  <div class="p-4 border-b border-gray-100">
+  <div class="p-4 border-b border-secondary">
     <h3 class="text-sm text-secondary mb-2">Income</h3>
 
     <span class="inline-block mb-2 text-xl font-medium text-primary">
diff --git a/app/views/budgets/_budget_nav.html.erb b/app/views/budgets/_budget_nav.html.erb
index 559d1a51..5ad87caa 100644
--- a/app/views/budgets/_budget_nav.html.erb
+++ b/app/views/budgets/_budget_nav.html.erb
@@ -16,7 +16,7 @@
                   step[:is_complete] ? "text-green-600" : "text-secondary"
                 end %>
       <% step_class = if is_current
-                  "bg-primary text-white"
+                  "bg-primary text-primary"
                 else
                   step[:is_complete] ? "bg-green-600/10 border-alpha-black-25" : "bg-container-inset"
                 end %>
@@ -31,7 +31,7 @@
         </div>
       <% end %>
 
-      <div class="h-px bg-alpha-black-200 w-12 group-last:hidden"></div>
+      <hr class="border border-secondary w-12 group-last:hidden">
     </li>
   <% end %>
 </ul>
diff --git a/app/views/budgets/_budgeted_summary.html.erb b/app/views/budgets/_budgeted_summary.html.erb
index ce55db5d..41400860 100644
--- a/app/views/budgets/_budgeted_summary.html.erb
+++ b/app/views/budgets/_budgeted_summary.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (budget:) %>
 
 <div>
-  <div class="p-4 border-b border-gray-100">
+  <div class="p-4 border-b border-secondary">
     <h3 class="text-sm text-secondary mb-2">Expected income</h3>
 
     <span class="inline-block mb-2 text-xl font-medium text-primary">
diff --git a/app/views/categories/_form.html.erb b/app/views/categories/_form.html.erb
index 1fb8c237..54605e1b 100644
--- a/app/views/categories/_form.html.erb
+++ b/app/views/categories/_form.html.erb
@@ -30,7 +30,7 @@
             <div class="flex gap-2 items-center hidden flex-col" data-category-target="paletteSection">
               <div class="flex gap-2 items-center w-full">
                 <div class="w-6 h-6 p-4 rounded-full cursor-pointer" style="background-color: <%= category.color %>" data-category-target="colorPreview"></div>
-                <%= f.text_field :color , data: { category_target: "colorInput"}, class: "form-field__input blah", inline: true %>
+                <%= f.text_field :color , data: { category_target: "colorInput"}, inline: true %>
                 <%= lucide_icon "palette", class: "w-8 h-8 cursor-pointer hover:bg-gray-100 p-1", data: { action: "click->category#toggleSections" } %>
               </div>
               <div data-category-target="validationMessage" class="hidden self-start flex gap-1 items-center text-xs text-destructive ">
diff --git a/app/views/category/dropdowns/show.html.erb b/app/views/category/dropdowns/show.html.erb
index b2cefd40..d559de6e 100644
--- a/app/views/category/dropdowns/show.html.erb
+++ b/app/views/category/dropdowns/show.html.erb
@@ -1,7 +1,7 @@
 <%= turbo_frame_tag "category_dropdown" do %>
   <div class="flex flex-col relative" data-controller="list-filter">
     <div class="grow p-1.5">
-      <div class="relative flex items-center bg-container border border-gray-200 rounded-lg">
+      <div class="relative flex items-center bg-container border border-secondary rounded-lg">
         <input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-secondary font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
         <%= lucide_icon("search", class: "w-5 h-5 text-secondary ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
       </div>
diff --git a/app/views/chats/_ai_consent.html.erb b/app/views/chats/_ai_consent.html.erb
index bec613ef..25907f3f 100644
--- a/app/views/chats/_ai_consent.html.erb
+++ b/app/views/chats/_ai_consent.html.erb
@@ -1,5 +1,5 @@
 <div class="flex flex-col items-center justify-start h-full p-6 text-center">
-  <div class="border border-gray-200 rounded-lg p-4 bg-container">
+  <div class="border border-secondary rounded-lg p-4 bg-container">
     <div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
       <%= icon("sparkles") %>
     </div>
diff --git a/app/views/chats/_ai_greeting.html.erb b/app/views/chats/_ai_greeting.html.erb
index 597486fd..30243fbf 100644
--- a/app/views/chats/_ai_greeting.html.erb
+++ b/app/views/chats/_ai_greeting.html.erb
@@ -5,7 +5,7 @@
     <p>Hey <%= Current.user&.first_name || "there" %>! I'm an AI built by Maybe to help with your finances. I have access to the web and your account data.</p>
 
     <p>
-      You can use <span class="bg-container border border-gray-200 px-1.5 py-0.5 rounded font-mono text-xs">/</span> to access commands
+      You can use <span class="bg-container border border-secondary px-1.5 py-0.5 rounded font-mono text-xs">/</span> to access commands
     </p>
 
     <div class="space-y-3">
diff --git a/app/views/chats/index.html.erb b/app/views/chats/index.html.erb
index 8eb610b7..277a9b84 100644
--- a/app/views/chats/index.html.erb
+++ b/app/views/chats/index.html.erb
@@ -15,7 +15,7 @@
           <%= render @chats %>
         </div>
       <% else %>
-        <div class="text-center py-12 bg-container rounded-lg border border-gray-200">
+        <div class="text-center py-12 bg-container rounded-lg border border-primary">
           <div class="w-16 h-16 bg-surface-inset rounded-full flex items-center justify-center mx-auto mb-4">
             <%= icon("message-square", size: "lg") %>
           </div>
diff --git a/app/views/family_merchants/_form.html.erb b/app/views/family_merchants/_form.html.erb
index baaec60a..34306679 100644
--- a/app/views/family_merchants/_form.html.erb
+++ b/app/views/family_merchants/_form.html.erb
@@ -15,7 +15,7 @@
           </label>
         <% end %>
       </div>
-      <div class="relative flex items-center border border-gray-200 rounded-lg">
+      <div class="relative flex items-center border border-secondary rounded-lg text-subdued">
         <%= f.text_field :name, placeholder: t(".name_placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
       </div>
     </section>
diff --git a/app/views/import/confirms/_mappings.html.erb b/app/views/import/confirms/_mappings.html.erb
index 659c2895..76e353be 100644
--- a/app/views/import/confirms/_mappings.html.erb
+++ b/app/views/import/confirms/_mappings.html.erb
@@ -1,6 +1,5 @@
 <%# locals: (import:, mapping_class:, step_idx:) %>
 
-
 <% mappings = mapping_class.for_import(import) %>
 <% is_last_step = step_idx == import.mapping_steps.count - 1 %>
 
diff --git a/app/views/import/rows/_form.html.erb b/app/views/import/rows/_form.html.erb
index ec67345d..43521eb6 100644
--- a/app/views/import/rows/_form.html.erb
+++ b/app/views/import/rows/_form.html.erb
@@ -26,20 +26,20 @@
                   "focus:outline-none focus:z-10 relative",
                 ],
                 disabled: row.import.complete? %>
-                
+
           <% if !cell_is_valid?(row, key) %>
-            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-red-500 md:hidden" 
+            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-red-500 md:hidden"
                   data-action="click->mobile-cell-interaction#toggleErrorMessage"
                   data-mobile-cell-interaction-target="errorIcon">
               <%= lucide_icon "alert-circle", class: "w-4 h-4" %>
             </span>
-            
+
             <div class="absolute left-4 right-4 bottom-full mb-2 p-2 bg-red-50 border border-red-200 rounded-lg shadow-lg text-xs text-red-600 hidden md:hidden z-20"
                  data-mobile-cell-interaction-target="errorTooltip">
               <%= row.errors[key].join(", ") %>
             </div>
           <% end %>
-          
+
           <div class="absolute inset-0 bg-primary/5 pointer-events-none opacity-0 transition-opacity duration-150 ease-in-out z-0" data-mobile-cell-interaction-target="highlight"></div>
         </div>
       <% end %>
diff --git a/app/views/import/uploads/show.html.erb b/app/views/import/uploads/show.html.erb
index 24d717eb..93b6ebe2 100644
--- a/app/views/import/uploads/show.html.erb
+++ b/app/views/import/uploads/show.html.erb
@@ -11,9 +11,9 @@
       <p class="text-secondary text-sm"><%= t(".description") %></p>
     </div>
 
-    <div 
-      data-controller="tabs" 
-      data-tabs-active-class="bg-surface shadow-sm text-primary" 
+    <div
+      data-controller="tabs"
+      data-tabs-active-class="bg-surface shadow-sm text-primary"
       data-tabs-inactive-class="text-secondary"
       data-tabs-default-tab-value="csv-upload-tab">
       <div class="flex justify-center mb-4 w-full">
@@ -47,12 +47,12 @@
                       <span class="font-medium text-primary">Browse</span> to add your CSV file here
                     </p>
                   </div>
-                  
+
                   <div class="flex flex-col items-center hidden" data-file-upload-target="fileName">
                     <%= lucide_icon("file-text", class: "w-6 h-6 mb-4 text-primary") %>
                     <p class="mb-2 text-md font-medium text-primary"></p>
                   </div>
-                  
+
                   <%= form.file_field :csv_file, class: "hidden", "data-auto-submit-form-target": "auto", "data-file-upload-target": "input" %>
                 </div>
               </div>
@@ -72,5 +72,4 @@
 </span>
 </div>
 
-
 </div>
diff --git a/app/views/imports/_nav.html.erb b/app/views/imports/_nav.html.erb
index 6ee889d5..3353e15f 100644
--- a/app/views/imports/_nav.html.erb
+++ b/app/views/imports/_nav.html.erb
@@ -43,7 +43,7 @@
         </div>
       <% end %>
 
-      <div class="h-px bg-alpha-black-200 w-12 group-last:hidden"></div>
+      <hr class="border border-secondary w-12 group-last:hidden">
     </li>
   <% end %>
 </ul>
diff --git a/app/views/imports/_table.html.erb b/app/views/imports/_table.html.erb
index 8934769f..0339261f 100644
--- a/app/views/imports/_table.html.erb
+++ b/app/views/imports/_table.html.erb
@@ -16,9 +16,9 @@
             <% headers.each_with_index do |header, index| %>
               <th class="
                 bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
-                <%= index == 0 ? 'rounded-tl-md' : '' %>
-                <%= index == headers.length - 1 ? 'rounded-tr-md' : '' %>
-                <%= index < headers.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
+                <%= index == 0 ? "rounded-tl-md" : "" %>
+                <%= index == headers.length - 1 ? "rounded-tr-md" : "" %>
+                <%= index < headers.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
               ">
                 <%= header %>
               </th>
@@ -31,9 +31,9 @@
               <% row.each_with_index do |(header, value), col_index| %>
                 <td class="
                   px-3 py-2.5 whitespace-nowrap text-left
-                  <%= col_index < row.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
-                  <%= !caption && row_index == rows.length - 1 && col_index == 0 ? 'rounded-bl-md' : '' %>
-                  <%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? 'rounded-br-md' : '' %>
+                  <%= col_index < row.length - 1 ? "border-r border-r-alpha-black-200" : "" %>
+                  <%= !caption && row_index == rows.length - 1 && col_index == 0 ? "rounded-bl-md" : "" %>
+                  <%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? "rounded-br-md" : "" %>
                 ">
                   <%= value %>
                 </td>
diff --git a/app/views/imports/new.html.erb b/app/views/imports/new.html.erb
index 44fbd8b6..92794acb 100644
--- a/app/views/imports/new.html.erb
+++ b/app/views/imports/new.html.erb
@@ -21,7 +21,7 @@
                 <div class="bg-orange-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                   <%= lucide_icon("loader", class: "w-5 h-5 text-orange-500") %>
                 </div>
-                <span class="text-sm text-primary group-hover:text-gray-700">
+                <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".resume", type: @pending_import.type.titleize) %>
                 </span>
               </div>
@@ -41,7 +41,7 @@
                 <div class="bg-indigo-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                   <%= lucide_icon("file-spreadsheet", class: "w-5 h-5 text-indigo-500") %>
                 </div>
-                <span class="text-sm text-primary group-hover:text-gray-700">
+                <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_transactions") %>
                 </span>
               </div>
@@ -61,7 +61,7 @@
                 <div class="bg-yellow-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                   <%= lucide_icon("square-percent", class: "w-5 h-5 text-yellow-500") %>
                 </div>
-                <span class="text-sm text-primary group-hover:text-gray-700">
+                <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_portfolio") %>
                 </span>
               </div>
@@ -81,7 +81,7 @@
                 <div class="bg-violet-500/5 rounded-md w-8 h-8 flex items-center justify-center">
                   <%= lucide_icon("building", class: "w-5 h-5 text-violet-500") %>
                 </div>
-                <span class="text-sm text-primary group-hover:text-gray-700">
+                <span class="text-sm text-primary group-hover:text-secondary">
                   <%= t(".import_accounts") %>
                 </span>
               </div>
diff --git a/app/views/layouts/auth.html.erb b/app/views/layouts/auth.html.erb
index 85adc63a..42930812 100644
--- a/app/views/layouts/auth.html.erb
+++ b/app/views/layouts/auth.html.erb
@@ -13,11 +13,11 @@
             <% if (controller_name == "sessions" && action_name == "new") || (controller_name == "registrations" && action_name == "new") %>
               <div class="space-y-3 md:hidden w-full my-4">
                 <div class="bg-surface-inset rounded-lg p-1 flex">
-                  <%= link_to new_session_path, 
+                  <%= link_to new_session_path,
       class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %>
                     <%= t("layouts.auth.sign_in") %>
                   <% end %>
-                  <%= link_to new_registration_path, 
+                  <%= link_to new_registration_path,
       class: "w-1/2 px-2 py-1 rounded-md text-sm text-center font-medium #{!current_page?(new_session_path) ? 'bg-surface shadow-sm text-primary' : 'text-secondary'}" do %>
                     <%= t("layouts.auth.sign_up") %>
                   <% end %>
diff --git a/app/views/layouts/imports.html.erb b/app/views/layouts/imports.html.erb
index c8b63348..8acf9c6c 100644
--- a/app/views/layouts/imports.html.erb
+++ b/app/views/layouts/imports.html.erb
@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex flex-col h-dvh bg-white pt-safe">
+  <div class="flex flex-col h-dvh bg-container pt-safe">
     <header class="flex items-center justify-between p-8">
       <%= link_to content_for(:previous_path) || imports_path do %>
         <%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
diff --git a/app/views/layouts/shared/_head.html.erb b/app/views/layouts/shared/_head.html.erb
index 2d0ee351..c3b74447 100644
--- a/app/views/layouts/shared/_head.html.erb
+++ b/app/views/layouts/shared/_head.html.erb
@@ -12,7 +12,7 @@
   <%= javascript_importmap_tags %>
   <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
 
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
 
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
diff --git a/app/views/layouts/wizard.html.erb b/app/views/layouts/wizard.html.erb
index d5a652f6..a188fe60 100644
--- a/app/views/layouts/wizard.html.erb
+++ b/app/views/layouts/wizard.html.erb
@@ -1,5 +1,5 @@
 <%= render "layouts/shared/htmldoc" do %>
-  <div class="flex flex-col h-dvh pt-safe">
+  <div class="bg-container flex flex-col h-dvh pt-safe">
     <header class="flex items-center justify-between p-8">
       <%= link_to content_for(:previous_path) || root_path do %>
         <%= lucide_icon "arrow-left", class: "w-5 h-5 text-secondary" %>
diff --git a/app/views/messages/_chat_form.html.erb b/app/views/messages/_chat_form.html.erb
index f2a36b63..10c35e5a 100644
--- a/app/views/messages/_chat_form.html.erb
+++ b/app/views/messages/_chat_form.html.erb
@@ -32,4 +32,4 @@
   <% end %>
 
   <p class="text-xs text-secondary">AI responses are informational only and are not financial advice.</p>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/mfa/new.html.erb b/app/views/mfa/new.html.erb
index fdf753c0..0726bf1b 100644
--- a/app/views/mfa/new.html.erb
+++ b/app/views/mfa/new.html.erb
@@ -11,7 +11,7 @@
   <h1 class="text-primary text-xl font-medium mb-4"><%= t(".page_title") %></h1>
   <%= settings_section title: t(".scan_title"), subtitle: t(".scan_description") do %>
     <div class="space-y-6">
-      <div>
+      <div class="qrcode">
         <%= generate_mfa_qr_code(Current.user.provisioning_uri) %>
       </div>
 
@@ -26,7 +26,7 @@
                  readonly
                  autocomplete="off"
                  value="<%= Current.user.otp_secret %>"
-                 class="text-sm bg-gray-50 px-2 py-1 rounded border border-gray-200 w-96 font-mono">
+                 class="text-sm bg-container px-2 py-1 rounded border border-secondary w-96 font-mono">
           <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
             <span data-clipboard-target="iconDefault">
               <%= lucide_icon "copy", class: "w-5 h-5" %>
diff --git a/app/views/onboardings/preferences.html.erb b/app/views/onboardings/preferences.html.erb
index 1c708bb3..0af8e27f 100644
--- a/app/views/onboardings/preferences.html.erb
+++ b/app/views/onboardings/preferences.html.erb
@@ -1,7 +1,7 @@
-<div class="bg-gray-25 h-screen flex flex-col justify-between">
+<div class="bg-surface h-screen flex flex-col justify-between">
   <%= render "onboardings/header" %>
 
-  <div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center md:py-0 py-6 px-4 md:px-0" data-controller="onboarding">
+  <div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0" data-controller="onboarding">
     <div>
       <div class="space-y-1 mb-6">
         <h1 class="text-2xl font-medium"><%= t(".title") %></h1>
diff --git a/app/views/onboardings/profile.html.erb b/app/views/onboardings/profile.html.erb
index 4939f05c..e4a61cc4 100644
--- a/app/views/onboardings/profile.html.erb
+++ b/app/views/onboardings/profile.html.erb
@@ -1,7 +1,7 @@
-<div class="bg-gray-25 min-h-screen flex flex-col justify-between">
+<div class="bg-surface min-h-screen flex flex-col justify-between">
   <%= render "onboardings/header" %>
 
-  <div class="grow max-w-lg w-full mx-auto bg-gray-25 flex flex-col justify-center md:py-0 py-6 px-4 md:px-0">
+  <div class="grow max-w-lg w-full mx-auto bg-surface flex flex-col justify-center md:py-0 py-6 px-4 md:px-0">
     <div>
       <div class="space-y-1 mb-6">
         <h1 class="text-2xl font-medium md:text-2xl"><%= t(".title") %></h1>
diff --git a/app/views/onboardings/show.html.erb b/app/views/onboardings/show.html.erb
index aa6639ae..c4af9793 100644
--- a/app/views/onboardings/show.html.erb
+++ b/app/views/onboardings/show.html.erb
@@ -1,4 +1,4 @@
-<div class="bg-gray-25">
+<div class="bg-surface">
   <div class="h-screen flex flex-col items-center py-6">
     <div class="grow flex justify-center items-center flex-col max-w-sm w-full text-center">
       <%= image_tag "logo-color.png", class: "w-16 mb-6" %>
diff --git a/app/views/pages/dashboard.html.erb b/app/views/pages/dashboard.html.erb
index 86362dc9..9d0e21f7 100644
--- a/app/views/pages/dashboard.html.erb
+++ b/app/views/pages/dashboard.html.erb
@@ -4,7 +4,7 @@
       <h1 class="text-3xl font-medium text-primary">Welcome back, <%= Current.user.first_name %></h1>
       <p class="text-gray-500">Here's what's happening with your finances</p>
     </div>
-    
+
     <%= link_to new_account_path(step: "method_select", classification: "asset"),
                 class: "btn btn--primary flex items-center justify-center gap-2 rounded-full w-9 h-9 md:hidden",
                 data: { turbo_frame: "modal" } do %>
diff --git a/app/views/pages/dashboard/_balance_sheet.html.erb b/app/views/pages/dashboard/_balance_sheet.html.erb
index 7f8d7228..0c76d046 100644
--- a/app/views/pages/dashboard/_balance_sheet.html.erb
+++ b/app/views/pages/dashboard/_balance_sheet.html.erb
@@ -17,7 +17,7 @@
               <div class="flex items-center gap-2 text-sm">
                 <div class="h-2.5 w-2.5 rounded-full" style="background-color: <%= account_group.color %>;"></div>
                 <p class="text-secondary"><%= account_group.name %></p>
-                <p class="text-black font-mono"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
+                <p class="text-primary font-mono"><%= number_to_percentage(account_group.weight, precision: 0) %></p>
               </div>
             <% end %>
           </div>
@@ -55,7 +55,7 @@
                       <div class="flex sm:hidden items-center gap-2">
                         <div class="flex gap-[3px]">
                           <% 10.times do |i| %>
-                            <div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
+                            <div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
                           <% end %>
                         </div>
                         <p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p>
@@ -85,7 +85,7 @@
                           <div class="flex sm:hidden items-center gap-2">
                             <div class="flex gap-[3px]">
                               <% 10.times do |i| %>
-                                <div class="w-[2px] h-[10px] rounded-lg <%= i < (account.weight / 10.0).ceil ? '' : 'opacity-20' %>" style="background-color: <%= account_group.color %>;"></div>
+                                <div class="w-[2px] h-[10px] rounded-lg <%= i < (account.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
                               <% end %>
                             </div>
                             <p class="text-sm"><%= number_to_percentage(account.weight, precision: 2) %></p>
diff --git a/app/views/pages/feedback.html.erb b/app/views/pages/feedback.html.erb
index 4e79bef2..91636a67 100644
--- a/app/views/pages/feedback.html.erb
+++ b/app/views/pages/feedback.html.erb
@@ -4,23 +4,23 @@
   <h2 class="text-lg font-medium text-primary mb-1">Leave feedback</h2>
   <p class="text-sm text-secondary mb-4">Let us know if you have any specific feedback. Feel free to include links to videos or screenshots.</p>
   <div class="flex flex-col md:flex-row gap-4">
-    <%= link_to "https://github.com/maybe-finance/maybe/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
+    <%= link_to "https://github.com/maybe-finance/maybe/discussions/categories/feature-requests", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
       <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
       <span class="text-sm font-medium text-primary text-center">Write a feature request</span>
     <% end %>
     <% if self_hosted? %>
-      <%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
+      <%= link_to "https://github.com/maybe-finance/maybe/issues/new?assignees=&labels=bug&template=bug_report.md&title=", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
         <%= image_tag "github-icon.svg", class: "w-8 h-8 mb-2" %>
         <span class="text-sm font-medium text-primary text-center">File a bug report</span>
       <% end %>
     <% else %>
-      <%= link_to "mailto:hello@maybefinance.com", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50", onclick: "Intercom('showNewMessage'); return false;" do %>
+      <%= link_to "mailto:hello@maybefinance.com", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover", onclick: "Intercom('showNewMessage'); return false;" do %>
         <%= lucide_icon "bug", class: "w-8 h-8 mb-2" %>
         <span class="text-sm font-medium text-primary text-center">File a bug report</span>
       <% end %>
     <% end %>
 
-    <%= link_to "https://link.maybe.co/discord", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-gray-50" do %>
+    <%= link_to "https://link.maybe.co/discord", target: "_blank", rel: "noopener noreferrer", class: "w-full md:w-1/3 flex flex-col items-center p-4 border border-alpha-black-25 rounded-xl hover:bg-container-hover" do %>
       <%= image_tag "discord-icon.svg", class: "w-8 h-8 mb-2" %>
       <span class="text-sm font-medium text-primary text-center">Discuss Maybe with others</span>
     <% end %>
diff --git a/app/views/registrations/new.html.erb b/app/views/registrations/new.html.erb
index b9138fd1..d0852937 100644
--- a/app/views/registrations/new.html.erb
+++ b/app/views/registrations/new.html.erb
@@ -32,28 +32,28 @@
       placeholder: "you@example.com",
       label: true,
       disabled: @invitation.present? %>
-      
+
   <% if invite_code_required? && !@invitation %>
     <%= form.text_field :invite_code, required: "required", label: true, value: params[:invite] %>
   <% end %>
-  
+
   <%= form.hidden_field :invitation, value: @invitation&.token %>
-  
+
   <div data-controller="password-validator">
     <div data-controller="password-visibility" class="relative">
-      <%= form.password_field :password, 
-          autocomplete: "new-password", 
-          required: "required", 
+      <%= form.password_field :password,
+          autocomplete: "new-password",
+          required: "required",
           placeholder: t(".password_placeholder"),
-          label: true, 
+          label: true,
           maxlength: 72,
-          data: { 
+          data: {
             password_validator_target: "input",
             password_visibility_target: "input",
             action: "input->password-validator#validate"
           } %>
-      <button type="button" 
-              class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none" 
+      <button type="button"
+              class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none"
               data-action="click->password-visibility#toggle">
         <div data-password-visibility-target="showIcon">
           <%= lucide_icon "eye", class: "w-5 h-5 text-gray" %>
@@ -63,14 +63,14 @@
         </div>
       </button>
     </div>
-    
+
     <div class="flex gap-4 my-4">
       <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="length"></div>
       <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="case"></div>
       <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="number"></div>
       <div class="h-1 bg-gray-200 rounded-full flex-grow" data-password-validator-target="blockLine" data-requirement-type="special"></div>
     </div>
-    
+
     <div class="space-y-1 my-4">
       <div class="flex items-center gap-2 text-secondary text-sm" data-password-validator-target="requirementType" data-requirement-type="length">
         <%= lucide_icon "check", class: "w-4 h-4" %>
@@ -90,8 +90,6 @@
       </div>
     </div>
   </div>
-  
 
-  
   <%= form.submit t(".submit") %>
 <% end %>
diff --git a/app/views/rule/actions/_action.html.erb b/app/views/rule/actions/_action.html.erb
index 359eec33..84bc8b1c 100644
--- a/app/views/rule/actions/_action.html.erb
+++ b/app/views/rule/actions/_action.html.erb
@@ -12,7 +12,7 @@
       <%= form.select :action_type, rule.action_executors.map { |executor| [ executor.label, executor.key ] }, {}, data: { action: "rule--actions#handleActionTypeChange" } %>
     </div>
 
-    <%= tag.div class: class_names("min-w-1/2 flex items-center gap-2", "hidden" => !needs_value), 
+    <%= tag.div class: class_names("min-w-1/2 flex items-center gap-2", "hidden" => !needs_value),
                 data: { rule__actions_target: "actionValue" } do %>
       <span class="font-medium uppercase text-xs">to</span>
       <%= form.select :value, action.options || [], {}, disabled: !needs_value %>
diff --git a/app/views/rule/conditions/_condition_group.html.erb b/app/views/rule/conditions/_condition_group.html.erb
index 3da50432..e00df533 100644
--- a/app/views/rule/conditions/_condition_group.html.erb
+++ b/app/views/rule/conditions/_condition_group.html.erb
@@ -3,7 +3,7 @@
 <% condition = form.object %>
 <% rule = condition.rule %>
 
-<li data-controller="rule--conditions element-removal" class="border border-alpha-black-100 rounded-md p-4 space-y-3">
+<li data-controller="rule--conditions element-removal" class="border border-secondary rounded-md p-4 space-y-3">
 
   <%= form.hidden_field :condition_type, value: "compound" %>
 
diff --git a/app/views/rules/_category_rule_cta.html.erb b/app/views/rules/_category_rule_cta.html.erb
index 2035a4f0..54f2b752 100644
--- a/app/views/rules/_category_rule_cta.html.erb
+++ b/app/views/rules/_category_rule_cta.html.erb
@@ -17,4 +17,4 @@
       <%= tag.a "Create rule", href: new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]), class: "btn btn--primary", data: { turbo_frame: "modal" } %>
     <% end %>
   <% end %>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/rules/_form.html.erb b/app/views/rules/_form.html.erb
index ce0aaf3a..5a03eff6 100644
--- a/app/views/rules/_form.html.erb
+++ b/app/views/rules/_form.html.erb
@@ -10,7 +10,7 @@
   <% end %>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium">If <%= rule.resource_type %></h3>
+    <h3 class="text-sm font-medium text-primary">If <%= rule.resource_type %></h3>
 
     <%# Condition template, used by Stimulus controller to add new conditions dynamically %>
     <template data-rules-target="conditionGroupTemplate">
@@ -50,7 +50,7 @@
   </section>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium">Then</h3>
+    <h3 class="text-sm font-medium text-primary">Then</h3>
 
     <%# Action template, used by Stimulus controller to add new actions dynamically %>
     <template data-rules-target="actionTemplate">
@@ -75,18 +75,18 @@
   </section>
 
   <section class="space-y-4">
-    <h3 class="text-sm font-medium">Apply this</h3>
+    <h3 class="text-sm font-medium text-primary">Apply this</h3>
 
     <div class="space-y-2">
       <div class="flex items-center gap-2">
         <%= f.radio_button :effective_date_enabled, false, checked: rule.effective_date.nil?, data: { action: "rules#clearEffectiveDate" } %>
-        <%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm" %>
+        <%= f.label :effective_date_enabled_false, "To all past and future #{rule.resource_type}s", class: "text-sm text-primary" %>
       </div>
 
       <div class="flex items-center gap-2">
         <div class="flex items-center gap-2">
           <%= f.radio_button :effective_date_enabled, true, checked: rule.effective_date.present? %>
-          <%= f.label :effective_date_enabled_true, "Starting from", class: "text-sm" %>
+          <%= f.label :effective_date_enabled_true, "Starting from", class: "text-sm text-primary" %>
         </div>
 
         <%= f.date_field :effective_date, container_class: "w-fit", data: { rules_target: "effectiveDateInput" } %>
diff --git a/app/views/rules/_rule.html.erb b/app/views/rules/_rule.html.erb
index 1a10351f..2e433c72 100644
--- a/app/views/rules/_rule.html.erb
+++ b/app/views/rules/_rule.html.erb
@@ -22,7 +22,7 @@
       <span class="px-2 py-1 border border-alpha-black-200 rounded-full">
         <% if rule.actions.first.value && rule.actions.first.options %>
           <%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
-        <% else%>
+        <% else %>
           <%= rule.actions.first.executor.label %>
         <% end %>
       </span>
diff --git a/app/views/rules/confirm.html.erb b/app/views/rules/confirm.html.erb
index 90d36e6f..4749dea8 100644
--- a/app/views/rules/confirm.html.erb
+++ b/app/views/rules/confirm.html.erb
@@ -9,7 +9,7 @@
       </div>
       <div class="text-secondary text-sm">
         <p>
-          You are about to apply this rule to 
+          You are about to apply this rule to
           <span class="text-primary font-medium"><%= @rule.affected_resource_count %> <%= @rule.resource_type.pluralize %></span>
           that meet the specified rule criteria.  Please confirm if you wish to proceed with this change.
         </p>
@@ -17,4 +17,4 @@
     </div>
     <%= button_to "Confirm changes", apply_rule_path(@rule), class: "btn btn--primary w-full justify-center", data: { turbo_frame: "_top"} %>
   </div>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/rules/index.html.erb b/app/views/rules/index.html.erb
index 3bf1ba6c..39412b4e 100644
--- a/app/views/rules/index.html.erb
+++ b/app/views/rules/index.html.erb
@@ -30,7 +30,7 @@
   </div>
 <% end %>
 
-<div class="bg-white shadow-border-xs rounded-xl p-4">
+<div class="bg-container shadow-border-xs rounded-xl p-4">
 
   <% if @rules.any? %>
     <div class="rounded-xl bg-gray-25 space-y-1">
diff --git a/app/views/settings/_settings_nav.html.erb b/app/views/settings/_settings_nav.html.erb
index ea995458..be1ad416 100644
--- a/app/views/settings/_settings_nav.html.erb
+++ b/app/views/settings/_settings_nav.html.erb
@@ -4,7 +4,7 @@
       <%= lucide_icon "chevron-left", class: "w-5 h-5 text-secondary" %>
       <span class="hidden md:block">Back</span>
     <% end %>
-    <%= link_to previous_path, class: "hidden md:block uppercase bg-gray-100 rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
+    <%= link_to previous_path, class: "hidden md:block uppercase bg-surface-inset-hover rounded-sm px-1 py-0.5 text-xs text-secondary shadow-sm ml-1 pointer-events-none", data: { controller: "hotkey", hotkey: "Escape" } do %>
       esc
     <% end %>
   </div>
@@ -89,7 +89,7 @@
       <% end %>
     </section>
   </nav>
-  <nav class="space-y-4 overflow-y-auto  md:hidden" id="mobile-settings-nav"  data-preserve-scroll data-controller="preserve-scroll">
+  <nav class="space-y-4 overflow-y-auto  md:hidden" id="mobile-settings-nav" data-preserve-scroll data-controller="preserve-scroll">
 
     <ul class="flex space-y-1">
 
diff --git a/app/views/settings/_settings_nav_item.html.erb b/app/views/settings/_settings_nav_item.html.erb
index a8f47d19..6515d117 100644
--- a/app/views/settings/_settings_nav_item.html.erb
+++ b/app/views/settings/_settings_nav_item.html.erb
@@ -2,7 +2,7 @@
 
 <%= link_to path, class: class_names(
   "flex items-center gap-2 btn btn--ghost whitespace-nowrap",
-  page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-gray-100 border-transparent"
+  page_active?(path) ? "text-primary bg-container shadow-border-xs" : "text-secondary hover:bg-surface-hover border-transparent"
 ), aria: { current: ("page" if page_active?(path)) } do %>
   <%= lucide_icon(icon, class: "w-5 h-5") if icon %>
   <%= name %>
diff --git a/app/views/settings/_user_avatar_field.html.erb b/app/views/settings/_user_avatar_field.html.erb
index 5c224444..e19bf1d1 100644
--- a/app/views/settings/_user_avatar_field.html.erb
+++ b/app/views/settings/_user_avatar_field.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (form:, user:) %>
 
 <div class="flex md:flex-row flex-col md:items-center items-center gap-4" data-controller="profile-image-preview">
-  <div class="relative flex justify-center items-center bg-gray-50 size-26 md:size-24 rounded-full border-alpha-black-300 border border-dashed">
+  <div class="relative flex justify-center items-center bg-container size-26 md:size-24 rounded-full  border-primary border border-dashed overflow-hidden">
 
     <%# The image preview once user has uploaded a new file  %>
     <div data-profile-image-preview-target="previewImage" class="h-full w-full flex justify-center items-center hidden">
@@ -10,8 +10,8 @@
 
     <%# The placeholder image for empty avatar field  %>
     <div data-profile-image-preview-target="placeholderImage"
-         class="h-full w-full flex justify-center items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
-      <div class="h-full w-full flex justify-center items-center">
+         class="h-full w-full flex justify-center  items-center <%= user.profile_image.attached? ? "hidden" : "" %>">
+      <div class="h-full w-full flex justify-center items-center bg-container">
         <%= lucide_icon "image-plus", class: "w-6 h-6 text-secondary" %>
       </div>
     </div>
@@ -48,9 +48,8 @@
       </span>
     <% end %>
 
-    
     <p class="mt-2 text-xs text-secondary"><%= t(".accepted_formats") %></p>
-    
+
     <%= form.file_field :profile_image,
         accept: "image/png, image/jpeg",
         class: "hidden px-3 py-2 bg-gray-50 text-primary rounded-md text-sm font-medium",
diff --git a/app/views/settings/profiles/show.html.erb b/app/views/settings/profiles/show.html.erb
index 36409de1..dae79cca 100644
--- a/app/views/settings/profiles/show.html.erb
+++ b/app/views/settings/profiles/show.html.erb
@@ -43,7 +43,7 @@
             <%= render "settings/user_avatar", user: user %>
           </div>
           <p class="text-primary font-medium text-sm"><%= user.display_name %></p>
-          <div class="rounded-md bg-gray-100 px-1.5 py-0.5">
+          <div class="rounded-md bg-surface px-1.5 py-0.5">
             <p class="uppercase text-secondary font-medium text-xs"><%= user.role %></p>
           </div>
           <% if Current.user.admin? && user != Current.user %>
@@ -55,7 +55,7 @@
                         title: t(".confirm_remove_member.title"),
                         body: t(".confirm_remove_member.body", name: user.display_name),
                         accept: t(".remove_member"),
-                        acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                        acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
                       }} do %>
                 <%= lucide_icon "x", class: "w-5 h-5" %>
               <% end %>
@@ -72,7 +72,7 @@
               </div>
               <div class="flex">
                 <p class="text-primary font-medium text-sm"><%= invitation.email %></p>
-                <div class="rounded-md bg-gray-100 px-1.5 py-0.5">
+                <div class="rounded-md bg-surface px-1.5 py-0.5">
                   <p class="uppercase text-secondary font-medium text-xs"><%= t(".pending") %></p>
                 </div>
               </div>
@@ -86,7 +86,7 @@
                              readonly
                              autocomplete="off"
                              value="<%= accept_invitation_url(invitation.token) %>"
-                             class="text-sm bg-gray-50 px-2 py-1 rounded border border-gray-200 w-72">
+                             class="text-sm bg-gray-50 px-2 py-1 rounded border border-secondary w-72">
                   <button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
                     <span data-clipboard-target="iconDefault">
                       <%= lucide_icon "copy", class: "w-5 h-5" %>
@@ -105,7 +105,7 @@
                           title: t(".confirm_remove_invitation.title"),
                           body: t(".confirm_remove_invitation.body", email: invitation.email),
                           accept: t(".remove_invitation"),
-                          acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                          acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
                         }} do %>
                   <%= lucide_icon "x", class: "w-5 h-5" %>
                 <% end %>
@@ -141,7 +141,7 @@
                   title: t(".confirm_reset.title"),
                   body: t(".confirm_reset.body"),
                   accept: t(".reset_account"),
-                  acceptClass: "w-full bg-orange-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                  acceptClass: "w-full btn btn--destructive  text-primary rounded-xl text-center p-[10px]  mb-2"
                 }}
         %>
       </div>
@@ -158,7 +158,7 @@
                 title: t(".confirm_delete.title"),
                 body: t(".confirm_delete.body"),
                 accept: t(".delete_account"),
-                acceptClass: "w-full bg-red-500 text-white rounded-xl text-center p-[10px] border mb-2"
+                acceptClass: "w-full btn btn--destructive text-white rounded-xl text-center p-[10px] mb-2"
               }}
       %>
     </div>
diff --git a/app/views/shared/_confirm_modal.html.erb b/app/views/shared/_confirm_modal.html.erb
index 52410d14..ec24a1e0 100644
--- a/app/views/shared/_confirm_modal.html.erb
+++ b/app/views/shared/_confirm_modal.html.erb
@@ -1,8 +1,8 @@
 <dialog id="turbo-confirm" class="max-w-[420px] w-full rounded-xl m-auto">
-  <form method="dialog" class="p-4">
+  <form method="dialog" class="p-4 bg-container">
     <div class="flex flex-col mb-4">
       <div class="flex justify-between mb-2 gap-4">
-        <h3 id="turbo-confirm-title" class="font-medium text-md"><%= t(".title") %></h3>
+        <h3 id="turbo-confirm-title" class="font-medium text-primary text-md"><%= t(".title") %></h3>
         <button value="cancel">
           <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
         </button>
diff --git a/app/views/shared/_disclosure.html.erb b/app/views/shared/_disclosure.html.erb
index b0d57a81..c4e59d9c 100644
--- a/app/views/shared/_disclosure.html.erb
+++ b/app/views/shared/_disclosure.html.erb
@@ -2,7 +2,7 @@
 
 <details class="group space-y-2" <%= "open" if open %>>
   <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2 text-xs font-medium
-                        uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
+                        uppercase text-secondary bg-surface focus-visible:outline-hidden">
     <h3><%= title %></h3>
     <%= lucide_icon "chevron-down",
               class: "group-open:transform group-open:rotate-180 text-secondary w-5 h-5" %>
diff --git a/app/views/shared/_icon_image.html.erb b/app/views/shared/_icon_image.html.erb
index c94e07f6..b782dc3f 100644
--- a/app/views/shared/_icon_image.html.erb
+++ b/app/views/shared/_icon_image.html.erb
@@ -3,4 +3,4 @@
 <% size_class = case size when "sm" then "w-4 h-4" when "md" then "w-5 h-5" when "lg" then "w-6 h-6" end %>
 <% color_class = case color when "current" then "text-current" when "gray" then "text-secondary" end %>
 
-<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key )%>
+<%= image_tag("icon-#{key}.svg", class: class_names(size_class, color_class, "shrink-0"), alt: key ) %>
diff --git a/app/views/shared/_modal_form.html.erb b/app/views/shared/_modal_form.html.erb
index cbf821c8..fb6d21c8 100644
--- a/app/views/shared/_modal_form.html.erb
+++ b/app/views/shared/_modal_form.html.erb
@@ -4,7 +4,7 @@
   <article class="mx-auto w-full p-4 space-y-4 md:min-w-[450px]">
     <div class="space-y-2">
       <header class="flex justify-between items-center">
-        <h2 class="font-medium"><%= title %></h2>
+        <h2 class="font-medium text-primary"><%= title %></h2>
         <%= lucide_icon("x", class: "cursor-pointer w-6 h-6 md:w-5 md:w-5 text-secondary", data: { action: "mousedown->modal#close" }) %>
       </header>
 
diff --git a/app/views/shared/_money_field.html.erb b/app/views/shared/_money_field.html.erb
index 166abdf9..9b83820a 100644
--- a/app/views/shared/_money_field.html.erb
+++ b/app/views/shared/_money_field.html.erb
@@ -17,7 +17,7 @@
 
   <div class="flex items-center gap-1">
     <div class="flex items-center grow gap-1">
-      <span class="text-secondary text-sm" data-money-field-target="symbol">
+      <span class="text-subdued text-sm" data-money-field-target="symbol">
         <%= currency.symbol %>
       </span>
 
diff --git a/app/views/tags/_form.html.erb b/app/views/tags/_form.html.erb
index 395a1f03..3419331f 100644
--- a/app/views/tags/_form.html.erb
+++ b/app/views/tags/_form.html.erb
@@ -12,7 +12,7 @@
           </label>
         <% end %>
       </div>
-      <div class="relative flex items-center border border-gray-200 rounded-lg">
+      <div class="relative flex items-center border border-secondary rounded-lg text-subdued">
         <%= f.text_field :name, placeholder: t(".placeholder"), autofocus: true, required: true, data: { color_avatar_target: "name" } %>
       </div>
     </section>
diff --git a/app/views/transactions/_form.html.erb b/app/views/transactions/_form.html.erb
index 16046a58..cbe9e717 100644
--- a/app/views/transactions/_form.html.erb
+++ b/app/views/transactions/_form.html.erb
@@ -1,11 +1,11 @@
-<%= styled_form_with model: @entry, url: transactions_path, class: "space-y-4" do |f| %>
+<%= styled_form_with model: @entry, url: transactions_path, class: "space-y-4 text-subdued" do |f| %>
 
   <% if entry.errors.any? %>
     <%= render "shared/form_errors", model: entry %>
   <% end %>
 
   <section>
-    <fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1 md:gap-x-2">
+    <fieldset class="bg-container rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1 md:gap-x-2">
       <%= radio_tab_tag form: f, name: :nature, value: :outflow, label: t(".expense"), icon: "minus-circle", checked: params[:nature] == "outflow" || params[:nature].nil?, class: "text-xs md:text-sm" %>
       <%= radio_tab_tag form: f, name: :nature, value: :inflow, label: t(".income"), icon: "plus-circle", checked: params[:nature] == "inflow", class: "text-xs md:text-sm" %>
       <%= link_to new_transfer_path, data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued text-sm md:text-normal group-has-checked:bg-container group-has-checked:text-gray-800 group-has-checked:shadow-sm group-has-checked:text-sm" do %>
diff --git a/app/views/transactions/_header.html.erb b/app/views/transactions/_header.html.erb
index 410429ee..5b3e75b8 100644
--- a/app/views/transactions/_header.html.erb
+++ b/app/views/transactions/_header.html.erb
@@ -20,4 +20,4 @@
   <span class="text-sm text-secondary">
     <%= I18n.l(entry.date, format: :long) %>
   </span>
-<% end %>
\ No newline at end of file
+<% end %>
diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index dde46135..4aa8ddd1 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -4,7 +4,7 @@
 
 <%= turbo_frame_tag dom_id(entry) do %>
   <%= turbo_frame_tag dom_id(transaction) do %>
-    <div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 md:p-4 
+    <div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 md:p-4
                 <%= @focused_record == entry || @focused_record == transaction ?
                     "border border-gray-900 rounded-lg" : "" %>">
 
diff --git a/app/views/transactions/searches/_menu.html.erb b/app/views/transactions/searches/_menu.html.erb
index b8eb5a2b..cdcd2536 100644
--- a/app/views/transactions/searches/_menu.html.erb
+++ b/app/views/transactions/searches/_menu.html.erb
@@ -4,10 +4,10 @@
   id="transaction-filters-menu"
   data-menu-target="content"
   data-controller="tabs"
-  data-tabs-active-class="bg-gray-25 text-primary"
+  data-tabs-active-class="bg-surface text-primary"
   data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
   class="hidden absolute flex flex-col md:flex-row z-10 h-auto md:h-80 w-full md:w-[540px] top-12 right-0 shadow-border-xs bg-container rounded-lg overflow-hidden">
-  <div class="flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-alpha-black-100 overflow-x-auto md:overflow-x-visible">
+  <div class="flex w-full md:w-44 flex-row md:flex-col items-start p-3 text-sm font-medium text-secondary border-b md:border-b-0 md:border-r border-secondary overflow-x-auto md:overflow-x-visible">
     <% transaction_search_filters.each do |filter| %>
       <button
         class="flex text-secondary hover:bg-container-inset items-center gap-2 px-3 rounded-md py-2 min-w-max md:w-full"
@@ -20,9 +20,8 @@
       </button>
     <% end %>
   </div>
-
   <div class="flex flex-col grow">
-    <div class="grow p-3 border-b border-b-alpha-black-100 overflow-y-auto max-h-[50vh] md:max-h-none">
+    <div class="grow p-3 border-b border-secondary overflow-y-auto max-h-[50vh] md:max-h-none">
       <% transaction_search_filters.each do |filter| %>
         <div id="<%= filter[:key] %>" data-tabs-target="tab">
           <%= render partial: get_transaction_search_filter_partial_path(filter), locals: { form: form } %>
diff --git a/app/views/transactions/searches/filters/_account_filter.html.erb b/app/views/transactions/searches/filters/_account_filter.html.erb
index 04ec8fb2..6e516dc7 100644
--- a/app/views/transactions/searches/filters/_account_filter.html.erb
+++ b/app/views/transactions/searches/filters/_account_filter.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter accounts" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-secondary rounded-md py-2 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
diff --git a/app/views/transactions/searches/filters/_category_filter.html.erb b/app/views/transactions/searches/filters/_category_filter.html.erb
index d9a280e1..5d974b88 100644
--- a/app/views/transactions/searches/filters/_category_filter.html.erb
+++ b/app/views/transactions/searches/filters/_category_filter.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
diff --git a/app/views/transactions/searches/filters/_date_filter.html.erb b/app/views/transactions/searches/filters/_date_filter.html.erb
index a77b4934..63449f9b 100644
--- a/app/views/transactions/searches/filters/_date_filter.html.erb
+++ b/app/views/transactions/searches/filters/_date_filter.html.erb
@@ -3,9 +3,9 @@
   <%= form.date_field :start_date,
                       placeholder: "Start date",
                       value: @q[:start_date],
-                      class: "block w-full border border-gray-200 rounded-md py-2 pl-3 pr-3 focus:border-gray-500 focus:ring-gray-500 sm:text-sm" %>
+                      class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3  focus:ring-gray-500 sm:text-sm" %>
   <%= form.date_field :end_date,
                       placeholder: "End date",
                       value: @q[:end_date],
-                      class: "block w-full border border-gray-200 rounded-md py-2 pl-3 pr-3 focus:border-gray-500 focus:ring-gray-500 sm:text-sm mt-2" %>
+                      class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3  focus:ring-gray-500 sm:text-sm mt-2" %>
 </div>
diff --git a/app/views/transactions/searches/filters/_merchant_filter.html.erb b/app/views/transactions/searches/filters/_merchant_filter.html.erb
index 3fb044b5..986255f1 100644
--- a/app/views/transactions/searches/filters/_merchant_filter.html.erb
+++ b/app/views/transactions/searches/filters/_merchant_filter.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter merchants" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
diff --git a/app/views/transactions/searches/filters/_tag_filter.html.erb b/app/views/transactions/searches/filters/_tag_filter.html.erb
index 0b9e9f14..dfde1053 100644
--- a/app/views/transactions/searches/filters/_tag_filter.html.erb
+++ b/app/views/transactions/searches/filters/_tag_filter.html.erb
@@ -1,7 +1,7 @@
 <%# locals: (form:) %>
 <div data-controller="list-filter">
   <div class="relative">
-    <input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <input type="search" autocomplete="off" placeholder="Filter tags" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
     <%= lucide_icon("search", class: "w-5 h-5 text-secondary absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
   </div>
   <div class="my-2" id="list" data-list-filter-target="list">
diff --git a/app/views/transfers/_form.html.erb b/app/views/transfers/_form.html.erb
index 2606deb9..8b276bef 100644
--- a/app/views/transfers/_form.html.erb
+++ b/app/views/transfers/_form.html.erb
@@ -7,7 +7,7 @@
   <% end %>
 
   <section>
-    <fieldset class="bg-gray-50 rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1 asdd">
+    <fieldset class="bg-container rounded-lg p-1 grid grid-flow-col justify-stretch gap-x-1">
       <%= link_to new_transaction_path(nature: "expense"), data: { turbo_frame: :modal }, class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-subdued" do %>
         <%= lucide_icon "minus-circle", class: "w-4 h-4" %>
         <%= tag.span t(".expense") %>
@@ -18,7 +18,7 @@
         <%= tag.span t(".income") %>
       <% end %>
 
-      <%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm md:text-normal text-subdued bg-container text-gray-800 shadow-sm" do %>
+      <%= tag.div class: "flex px-4 py-1 rounded-lg items-center space-x-2 justify-center bg-container text-primary shadow-sm" do %>
         <%= lucide_icon "arrow-right-left", class: "w-4 h-4" %>
         <%= tag.span t(".transfer") %>
       <% end %>