diff --git a/app/views/transactions/searches/filters/_account_filter.html.erb b/app/views/transactions/searches/filters/_account_filter.html.erb
index 4641a3ddb..5339c4447 100644
--- a/app/views/transactions/searches/filters/_account_filter.html.erb
+++ b/app/views/transactions/searches/filters/_account_filter.html.erb
@@ -1,9 +1,14 @@
 <%# 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-secondary rounded-md py-2 pl-10 pr-3 bg-container focus:ring-gray-500 sm:text-sm">
-    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
-  </div>
+  <%= render DS::SearchInput.new(
+        variant: :embedded,
+        placeholder: t(".filter_accounts"),
+        aria_label: t(".filter_accounts"),
+        data: {
+          list_filter_target: "input",
+          action: "input->list-filter#filter"
+        }
+      ) %>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% Current.user.accessible_accounts.alphabetically.each do |account| %>
       <div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= account.name %>">
diff --git a/app/views/transactions/searches/filters/_category_filter.html.erb b/app/views/transactions/searches/filters/_category_filter.html.erb
index 6b848ed9f..649651ff1 100644
--- a/app/views/transactions/searches/filters/_category_filter.html.erb
+++ b/app/views/transactions/searches/filters/_category_filter.html.erb
@@ -1,9 +1,14 @@
 <%# 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 bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
-    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
-  </div>
+  <%= render DS::SearchInput.new(
+        variant: :embedded,
+        placeholder: t(".filter_category"),
+        aria_label: t(".filter_category"),
+        data: {
+          list_filter_target: "input",
+          action: "input->list-filter#filter"
+        }
+      ) %>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% family_categories.each do |category| %>
       <div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= category.name %>">
diff --git a/app/views/transactions/searches/filters/_date_filter.html.erb b/app/views/transactions/searches/filters/_date_filter.html.erb
index 32ce60452..f7b27f544 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: t(".start_date"),
                       value: @q[:start_date],
-                      class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3  focus:ring-gray-500 sm:text-sm" %>
+                      class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 text-base sm:text-sm focus-visible:ring-2 focus-visible:ring-alpha-black-300" %>
   <%= form.date_field :end_date,
                       placeholder: t(".end_date"),
                       value: @q[:end_date],
-                      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" %>
+                      class: "block w-full border border-secondary rounded-md bg-container py-2 pl-3 pr-3 text-base sm:text-sm mt-2 focus-visible:ring-2 focus-visible:ring-alpha-black-300" %>
 </div>
diff --git a/app/views/transactions/searches/filters/_merchant_filter.html.erb b/app/views/transactions/searches/filters/_merchant_filter.html.erb
index bcfd6b789..b1f08ff08 100644
--- a/app/views/transactions/searches/filters/_merchant_filter.html.erb
+++ b/app/views/transactions/searches/filters/_merchant_filter.html.erb
@@ -1,9 +1,14 @@
 <%# 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 bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
-    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
-  </div>
+  <%= render DS::SearchInput.new(
+        variant: :embedded,
+        placeholder: t(".filter_merchants"),
+        aria_label: t(".filter_merchants"),
+        data: {
+          list_filter_target: "input",
+          action: "input->list-filter#filter"
+        }
+      ) %>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% Current.family.assigned_merchants_for(Current.user).alphabetically.each do |merchant| %>
       <div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= merchant.name %>">
diff --git a/app/views/transactions/searches/filters/_tag_filter.html.erb b/app/views/transactions/searches/filters/_tag_filter.html.erb
index 8ba4fd0cc..06c9a1b95 100644
--- a/app/views/transactions/searches/filters/_tag_filter.html.erb
+++ b/app/views/transactions/searches/filters/_tag_filter.html.erb
@@ -1,9 +1,14 @@
 <%# 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 bg-container border border-secondary rounded-md py-2 pl-10 pr-3 focus:ring-gray-500 sm:text-sm">
-    <%= icon("search", class: "absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
-  </div>
+  <%= render DS::SearchInput.new(
+        variant: :embedded,
+        placeholder: t(".filter_tags"),
+        aria_label: t(".filter_tags"),
+        data: {
+          list_filter_target: "input",
+          action: "input->list-filter#filter"
+        }
+      ) %>
   <div class="my-2" id="list" data-list-filter-target="list">
     <% Current.family.tags.alphabetically.each do |tag| %>
       <div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= tag.name %>">
diff --git a/config/locales/views/transactions/en.yml b/config/locales/views/transactions/en.yml
index d051ef130..9e45f810f 100644
--- a/config/locales/views/transactions/en.yml
+++ b/config/locales/views/transactions/en.yml
@@ -278,9 +278,17 @@ en:
         unexpected_error: "Unexpected error during conversion: %{error}"
     searches:
       filters:
+        account_filter:
+          filter_accounts: Filter accounts
+        category_filter:
+          filter_category: Filter category
         date_filter:
           start_date: "Start date"
           end_date: "End date"
+        merchant_filter:
+          filter_merchants: Filter merchants
+        tag_filter:
+          filter_tags: Filter tags
         amount_filter:
           equal_to: Equal to
           greater_than: Greater than