diff --git a/app/javascript/controllers/transaction_type_tabs_controller.js b/app/javascript/controllers/transaction_type_tabs_controller.js
new file mode 100644
index 000000000..e347121de
--- /dev/null
+++ b/app/javascript/controllers/transaction_type_tabs_controller.js
@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+const ACTIVE_CLASSES = ["bg-container", "text-primary", "shadow-sm"]
+const INACTIVE_CLASSES = ["hover:bg-container", "text-subdued", "hover:text-primary", "hover:shadow-sm"]
+
+export default class extends Controller {
+  static targets = ["tab", "natureField"]
+
+  selectTab(event) {
+    event.preventDefault()
+
+    const selectedTab = event.currentTarget
+    this.natureFieldTarget.value = selectedTab.dataset.nature
+
+    this.tabTargets.forEach(tab => {
+      const isActive = tab === selectedTab
+      tab.classList.remove(...(isActive ? INACTIVE_CLASSES : ACTIVE_CLASSES))
+      tab.classList.add(...(isActive ? ACTIVE_CLASSES : INACTIVE_CLASSES))
+    })
+  }
+}
diff --git a/app/views/shared/_transaction_type_tabs.html.erb b/app/views/shared/_transaction_type_tabs.html.erb
index 720960871..dbb1f6b55 100644
--- a/app/views/shared/_transaction_type_tabs.html.erb
+++ b/app/views/shared/_transaction_type_tabs.html.erb
@@ -2,7 +2,7 @@
 
 <fieldset class="bg-surface-inset rounded-lg p-1 flex flex-wrap gap-2">
   <%= link_to new_transaction_path(nature: "outflow", account_id: account_id),
-              data: { turbo_frame: :modal },
+              data: { turbo_frame: :modal, action: "click->transaction-type-tabs#selectTab", nature: "outflow", "transaction-type-tabs-target": "tab" },
               class: "flex-1 min-w-0 flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm #{active_tab == 'expense' ? 'bg-container text-primary shadow-sm' : 'hover:bg-container text-subdued hover:text-primary hover:shadow-sm'}" do %>
     <%= icon "minus-circle" %>
     <%= tag.span class: "truncate" do %>
@@ -11,7 +11,7 @@
   <% end %>
 
   <%= link_to new_transaction_path(nature: "inflow", account_id: account_id),
-              data: { turbo_frame: :modal },
+              data: { turbo_frame: :modal, action: "click->transaction-type-tabs#selectTab", nature: "inflow", "transaction-type-tabs-target": "tab" },
               class: "flex-1 min-w-0 flex px-4 py-1 rounded-lg items-center space-x-2 justify-center text-sm #{active_tab == 'income' ? 'bg-container text-primary shadow-sm' : 'hover:bg-container text-subdued hover:text-primary hover:shadow-sm'}" do %>
     <%= icon "plus-circle" %>
     <%= tag.span class: "truncate" do %>
diff --git a/app/views/transactions/_form.html.erb b/app/views/transactions/_form.html.erb
index 947f5444f..722adf5ee 100644
--- a/app/views/transactions/_form.html.erb
+++ b/app/views/transactions/_form.html.erb
@@ -6,10 +6,10 @@
     <%= render "shared/form_errors", model: entry %>
   <% end %>
 
-  <section>
+  <section data-controller="transaction-type-tabs">
     <%= render "shared/transaction_type_tabs", active_tab: params[:nature] == "inflow" ? "income" : "expense", account_id: params[:account_id] %>
 
-    <%= f.hidden_field :nature, value: params[:nature] || "outflow" %>
+    <%= f.hidden_field :nature, value: params[:nature] || "outflow", data: { "transaction-type-tabs-target": "natureField" } %>
     <%= f.hidden_field :entryable_type, value: "Transaction" %>
   </section>