diff --git a/app/controllers/services/lightning_controller.rb b/app/controllers/services/lightning_controller.rb
index 94aed24..1253ab0 100644
--- a/app/controllers/services/lightning_controller.rb
+++ b/app/controllers/services/lightning_controller.rb
@@ -8,8 +8,7 @@ class Services::LightningController < ApplicationController
   before_action :fetch_balance
 
   def index
-    @wallet_url = "lndhub://#{current_user.ln_account}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
-    initialize_lndhub_qr_code
+    @wallet_setup_url = "lndhub://#{current_user.ln_account}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
   end
 
   def transactions
@@ -56,20 +55,6 @@ class Services::LightningController < ApplicationController
 
   private
 
-  def initialize_lndhub_qr_code
-    qr_code = RQRCode::QRCode.new(@wallet_url)
-    @lndhub_qr_svg = qr_code.as_svg(
-      color: "000",
-      shape_rendering: "crispEdges",
-      module_size: 6,
-      standalone: true,
-      use_path: true,
-      svg_attributes: {
-        class: 'inline-block'
-      }
-    )
-  end
-
   def authenticate_with_lndhub(options={})
     if session[:ln_auth_token].present? && !options[:force_reauth]
       @ln_auth_token = session[:ln_auth_token]
diff --git a/app/views/services/lightning/index.html.erb b/app/views/services/lightning/index.html.erb
index 6d18379..58a7c12 100644
--- a/app/views/services/lightning/index.html.erb
+++ b/app/views/services/lightning/index.html.erb
@@ -29,7 +29,7 @@
     </p>
   </section>
 
-  <section>
+  <section data-controller="modal">
     <h3>Wallet Apps</h3>
     <p>
       You can connect various wallet apps to your Kosmos account. This allows
@@ -40,19 +40,16 @@
     </p>
     <p data-controller="clipboard" class="my-6 text-center md:text-left">
       <input type="text" disabled class="hidden" aria-hidden=true
-             value="<%= @wallet_url%>" data-clipboard-target="source" />
+             value="<%= @wallet_setup_url %>" data-clipboard-target="source" />
       <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto"
               data-action="clipboard#copy" data-clipboard-target="trigger">
         <span class="content-initial">Copy setup code/URL</span>
         <span class="content-active hidden">Copied ✔</span>
       </button>
       <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
-      <button id="show-setup-code" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
-      <button id="hide-setup-code" class="hidden btn-md btn-blue w-full sm:w-auto">Hide setup QR code</button>
-    </p>
-    <p id="setup-code" class="hidden my-10 w-full text-center">
-      <%= raw @lndhub_qr_svg %>
+      <button data-action="click->modal#open" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
     </p>
+    <%= render QrCodeModalComponent.new(qr_content: @wallet_setup_url) %>
   </section>
 
   <section>
@@ -119,27 +116,3 @@
     </p>
   </section>
 <% end %>
-
-<script type="text/javascript">
-  (function () {
-    const buttonShow = document.querySelector('#show-setup-code');
-    const buttonHide = document.querySelector('#hide-setup-code');
-    const setupCode = document.querySelector('#setup-code');
-
-    buttonShow.addEventListener('click', function(ev) {
-      ev.preventDefault();
-      setupCode.classList.remove('hidden');
-      buttonHide.classList.remove('hidden');
-      buttonShow.classList.add('hidden');
-      setupCode.scrollIntoView({behavior: "smooth", block: "nearest"});
-    });
-
-    buttonHide.addEventListener('click', function(ev) {
-      ev.preventDefault();
-      const el = document.querySelector('#setup-code');
-      setupCode.classList.add('hidden');
-      buttonHide.classList.add('hidden');
-      buttonShow.classList.remove('hidden');
-    });
-  })();
-</script>