diff --git a/assets/controllers/qrcode_controller.js b/assets/controllers/qrcode_controller.js
new file mode 100644
index 000000000..c7818bca7
--- /dev/null
+++ b/assets/controllers/qrcode_controller.js
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus';
+import jrQrcode from 'jr-qrcode';
+
+export default class extends Controller {
+  static values = { url: String };
+
+  connect() {
+    this.element.setAttribute('src', jrQrcode.getQrBase64(this.urlValue));
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 210a6c716..6b867cf47 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -12,9 +12,6 @@ import annotator from 'annotator';
 import ClipboardJS from 'clipboard';
 import 'mathjax/es5/tex-svg';
 
-/* jrQrcode */
-import jrQrcode from 'jr-qrcode';
-
 /* Fonts */
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
 import 'lato-font/css/lato-font.css';
@@ -342,10 +339,4 @@ $(document).ready(() => {
       $('form[name="form_mass_action"] button[name="tag"]').trigger('click');
     }
   });
-
-  document.querySelectorAll('img.jr-qrcode').forEach((qrcode) => {
-    const src = jrQrcode.getQrBase64(qrcode.getAttribute('data-url'));
-
-    qrcode.setAttribute('src', src);
-  });
 });
diff --git a/templates/Config/index.html.twig b/templates/Config/index.html.twig
index d513904ac..cca500133 100644
--- a/templates/Config/index.html.twig
+++ b/templates/Config/index.html.twig
@@ -112,7 +112,7 @@
                                 <div class="input-field col s12">
                                     <h5>{{ 'config.form_settings.android_configuration'|trans }}</h5>
                                     <a href="wallabag://{{ app.user.username }}@{{ wallabag_url }}" class="waves-effect waves-light btn hide-on-large-only">{{ 'config.form_settings.android_instruction'|trans }}</a>
-                                    <img class="hide-on-med-and-down jr-qrcode" alt="{{ 'config.otp.app.qrcode_label'|trans }}" data-url="wallabag://{{ app.user.username }}@{{ wallabag_url }}" />
+                                    <img data-controller="qrcode" data-qrcode-url-value="wallabag://{{ app.user.username }}@{{ wallabag_url }}" class="hide-on-med-and-down" alt="{{ 'config.otp.app.qrcode_label'|trans }}" />
                                 </div>
                             </div>
 
diff --git a/templates/Config/otp_app.html.twig b/templates/Config/otp_app.html.twig
index e409043af..f9b001008 100644
--- a/templates/Config/otp_app.html.twig
+++ b/templates/Config/otp_app.html.twig
@@ -15,7 +15,7 @@
                             <p>{{ 'config.otp.app.two_factor_code_description_2'|trans }}</p>
 
                             <p>
-                                <img class="hide-on-med-and-down jr-qrcode" data-url="{{ qr_code|raw }}" />
+                                <img data-controller="qrcode" data-qrcode-url-value="{{ qr_code|raw }}" class="hide-on-med-and-down" />
                             </p>
 
                             <p>