diff --git a/assets/controllers/tag_controller.js b/assets/controllers/tag_controller.js
new file mode 100644
index 000000000..3f2b6c054
--- /dev/null
+++ b/assets/controllers/tag_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['link', 'edit', 'form', 'input'];
+
+  showForm() {
+    this.formTarget.classList.remove('hidden');
+    this.editTarget.classList.add('hidden');
+    this.linkTarget.classList.add('hidden');
+    this.inputTarget.focus();
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index c6aac7bc0..c02bf3740 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -24,27 +24,6 @@ import './js/shortcuts/entry';
 /* Theme style */
 import './scss/index.scss';
 
-$(document).ready(() => {
-  document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
-    const current = item;
-    current.wallabag_edit_mode = false;
-    current.onclick = (event) => {
-      const target = event.currentTarget;
-
-      if (target.wallabag_edit_mode === false) {
-        $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
-        $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
-        target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
-        target.querySelector('.material-icons').innerHTML = 'done';
-
-        target.wallabag_edit_mode = true;
-      } else {
-        target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
-      }
-    };
-  });
-});
-
 (function darkTheme() {
   const rootEl = document.querySelector('html');
   const themeDom = {
diff --git a/assets/scss/_cards.scss b/assets/scss/_cards.scss
index b63fad649..6ae2b8e9b 100644
--- a/assets/scss/_cards.scss
+++ b/assets/scss/_cards.scss
@@ -186,6 +186,14 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
+.card-tag-labels button {
+  background: transparent;
+  border: none;
+  font-weight: normal;
+  color: #fff;
+  cursor: pointer;
+}
+
 .card-tag-link {
   width: calc(100% - 24px);
   line-height: 1.3;
@@ -196,6 +204,7 @@ a.original:not(.waves-effect) {
 
 .card-tag-form {
   display: flex;
+  align-items: center;
   min-width: 100px;
   flex-grow: 1;
 }
diff --git a/templates/Tag/tags.html.twig b/templates/Tag/tags.html.twig
index 882fe0e9b..180a910a0 100644
--- a/templates/Tag/tags.html.twig
+++ b/templates/Tag/tags.html.twig
@@ -19,18 +19,19 @@
             {% for tagWithNbEntries in allTagsWithNbEntries %}
                 {% set tag = tagWithNbEntries.tag %}
                 {% set nbEntries = tagWithNbEntries.nbEntries %}
-                <li title="{{ tag.label }} ({{ nbEntries }})" id="tag-{{ tag.id }}" class="chip">
-                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-handle="tag-link">
+                <li title="{{ tag.label }} ({{ nbEntries }})" id="tag-{{ tag.id }}" class="chip" data-controller="tag">
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-tag-target="link">
                         {{ tag.label }}&nbsp;({{ nbEntries }})
                     </a>
                     {% if renameForms is defined and renameForms[tag.id] is defined and is_granted('EDIT', tag) %}
-                    <form class="card-tag-form hidden" data-handle="tag-rename-form" action="{{ path('tag_rename', {'slug': tag.slug, redirect: current_path}) }}" method="POST">
-                        {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }}
+                    <form class="card-tag-form hidden" data-tag-target="form" action="{{ path('tag_rename', {'slug': tag.slug, redirect: current_path}) }}" method="POST">
+                        {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label, 'data-tag-target': 'input'}}) }}
                         {{ form_rest(renameForms[tag.id]) }}
+                        <button type="submit"><i class="material-icons">done</i></button>
                     </form>
-                    <a class="card-tag-icon card-tag-rename" data-handler="tag-rename" href="javascript:void(0);">
+                    <button type="button" data-tag-target="edit" data-action="tag#showForm">
                         <i class="material-icons">mode_edit</i>
-                    </a>
+                    </button>
                     {% endif %}
                     {% if is_granted('DELETE', tag) %}
                         <a id="delete-{{ tag.slug }}" href="{{ path('tag_delete', {'slug': tag.slug, redirect: current_path}) }}" class="card-tag-icon card-tag-delete" onclick="return confirm('{{ 'tag.confirm.delete'|trans({'%name%': tag.label})|escape('js') }}')">