diff --git a/app/javascript/controllers/color_badge_controller.js b/app/javascript/controllers/color_badge_controller.js
new file mode 100644
index 000000000..e0c0459c2
--- /dev/null
+++ b/app/javascript/controllers/color_badge_controller.js
@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="color-badge"
+// Used by the transaction merchant form to show a preview of what the avatar will look like
+export default class extends Controller {
+  static targets = ["name", "badge"];
+
+  handleNameChange = (e) => {
+    this.nameTarget.textContent = e.currentTarget.value || "?";
+  };
+
+  handleColorChange(e) {
+    const color = e.currentTarget.value;
+    this.badgeTarget.style.backgroundColor = `color-mix(in oklab, ${color} 10%, transparent)`;
+    this.badgeTarget.style.borderColor = `color-mix(in oklab, ${color} 10%, transparent)`;
+    this.badgeTarget.style.color = color;
+  }
+}
diff --git a/app/views/shared/_color_badge.html.erb b/app/views/shared/_color_badge.html.erb
new file mode 100644
index 000000000..3a5419a2c
--- /dev/null
+++ b/app/views/shared/_color_badge.html.erb
@@ -0,0 +1,10 @@
+<%# locals: (name: nil, color: "#000") %>
+
+<% background_color = "color-mix(in oklab, #{color} 10%, transparent)" %>
+<% border_color = "color-mix(in oklab, #{color} 10%, transparent)" %>
+<span data-color-badge-target="badge"
+      class="border text-sm font-medium px-3 py-1 rounded-full inline-flex items-center gap-2"
+      style="background-color: <%= background_color %>; border-color: <%= border_color %>; color: <%= color %>">
+  <span class="size-1.5 rounded-full" style="background-color: currentColor;"></span>
+  <span data-color-badge-target="name"><%= name || "?" %></span>
+</span>
diff --git a/app/views/tags/_badge.html.erb b/app/views/tags/_badge.html.erb
index 5db5451fc..2fcc5f692 100644
--- a/app/views/tags/_badge.html.erb
+++ b/app/views/tags/_badge.html.erb
@@ -1,10 +1,10 @@
 <%# locals: (tag:) %>
 <% tag ||= null_category %>
-
-<span class="border text-sm font-medium px-2.5 py-1 rounded-full content-center"
+<span class="border text-sm font-medium px-3 py-1 rounded-full inline-flex items-center gap-2"
       style="
-      background-color: color-mix(in srgb, <%= tag.color %> 5%, white);
-        border-color: color-mix(in srgb, <%= tag.color %> 10%, white);
+        background-color: color-mix(in oklab, <%= tag.color %> 10%, transparent);
+        border-color: color-mix(in oklab, <%= tag.color %> 10%, transparent);
         color: <%= tag.color %>;">
+  <span class="size-1.5 rounded-full" style="background-color: <%= tag.color %>;"></span>
   <%= tag.name %>
 </span>
diff --git a/app/views/tags/_form.html.erb b/app/views/tags/_form.html.erb
index 2c42c8bef..625f19679 100644
--- a/app/views/tags/_form.html.erb
+++ b/app/views/tags/_form.html.erb
@@ -1,19 +1,19 @@
-<div data-controller="color-avatar">
+<div data-controller="color-badge">
   <%= styled_form_with model: tag, class: "space-y-4", data: { turbo_frame: :_top } do |f| %>
     <section class="space-y-4">
       <div class="w-fit m-auto mb-4">
-        <%= render partial: "shared/color_avatar", locals: { name: tag.name, color: tag.color } %>
+        <%= render partial: "shared/color_badge", locals: { name: tag.name, color: tag.color } %>
       </div>
       <div class="flex gap-2 items-center justify-center">
         <% Tag::COLORS.each do |color| %>
           <label class="relative">
-            <%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->color-avatar#handleColorChange" } %>
+            <%= f.radio_button :color, color, class: "sr-only peer", data: { action: "change->color-badge#handleColorChange" } %>
             <div class="w-6 h-6 rounded-full cursor-pointer peer-checked:ring-2 peer-checked:ring-offset-2 peer-checked:ring-blue-500" style="background-color: <%= color %>"></div>
           </label>
         <% end %>
       </div>
       <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" } %>
+        <%= f.text_field :name, placeholder: t(".placeholder"), autofocus: true, required: true, data: { action: "input->color-badge#handleNameChange" } %>
       </div>
     </section>
 
diff --git a/app/views/tags/_tag.html.erb b/app/views/tags/_tag.html.erb
index 2dd897706..6c1a0a560 100644
--- a/app/views/tags/_tag.html.erb
+++ b/app/views/tags/_tag.html.erb
@@ -2,9 +2,8 @@
 
 <div id="<%= dom_id(tag) %>" class="flex justify-between items-center p-4 bg-container hover:bg-surface-hover">
   <div class="flex w-full items-center gap-2.5">
-    <%= render partial: "shared/color_avatar", locals: { name: tag.name, color: tag.color } %>
     <p class="text-primary text-sm truncate">
-      <%= tag.name %>
+      <%= render partial: "tags/badge", locals: { tag: tag } %>
     </p>
   </div>
   <div class="justify-self-end">