diff --git a/app/components/wallet_summary_component.html.erb b/app/components/wallet_summary_component.html.erb
new file mode 100644
index 0000000..b02e0d8
--- /dev/null
+++ b/app/components/wallet_summary_component.html.erb
@@ -0,0 +1,18 @@
+<section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
+  <div class="md:col-span-8">
+    <p>
+      Send and receive sats via the Bitcoin Lightning Network.
+    </p>
+  </div>
+  <div class="md:col-span-4 mt-4 md:mt-0">
+    <p class="font-mono md:text-right mb-0 p-4 border border-gray-300 rounded-lg overflow-hidden">
+    <% if @balance %>
+      <span class="text-xl"><%= number_with_delimiter @balance %> sats</span><br>
+      <span class="text-sm text-gray-500">Available balance</span>
+    <% else %>
+      <span class="text-xl">n/a sats</span><br>
+      <span class="text-sm text-gray-500">Balance unavailable</span>
+    <% end %>
+    </p>
+  </div>
+</section>
diff --git a/app/components/wallet_summary_component.rb b/app/components/wallet_summary_component.rb
new file mode 100644
index 0000000..7ca89ef
--- /dev/null
+++ b/app/components/wallet_summary_component.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class WalletSummaryComponent < ViewComponent::Base
+  def initialize(balance:)
+    @balance = balance
+  end
+
+end
diff --git a/app/controllers/wallet_controller.rb b/app/controllers/wallet_controller.rb
index 59ef4d7..466e782 100644
--- a/app/controllers/wallet_controller.rb
+++ b/app/controllers/wallet_controller.rb
@@ -3,10 +3,10 @@ require "rqrcode"
 class WalletController < ApplicationController
   before_action :require_user_signed_in
   before_action :authenticate_with_lndhub
+  before_action :set_current_section
+  before_action :fetch_balance
 
   def index
-    @current_section = :wallet
-
     @wallet_url = "lndhub://#{current_user.ln_login}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
 
     qrcode = RQRCode::QRCode.new(@wallet_url)
@@ -20,8 +20,10 @@ class WalletController < ApplicationController
         class: 'inline-block'
       }
     )
+  end
+
+  def transactions
 
-    @balance = fetch_balance rescue nil
   end
 
   private
@@ -42,6 +44,10 @@ class WalletController < ApplicationController
   def fetch_balance
     lndhub = Lndhub.new
     data = lndhub.balance @ln_auth_token
-    data["BTC"]["AvailableBalance"]
+    @balance = data["BTC"]["AvailableBalance"] rescue nil
+  end
+
+  def set_current_section
+    @current_section = :wallet
   end
 end
diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb
index afabb25..757faec 100644
--- a/app/views/wallet/index.html.erb
+++ b/app/views/wallet/index.html.erb
@@ -1,24 +1,7 @@
 <%= render HeaderComponent.new(title: "Wallet") %>
 
 <%= render MainSimpleComponent.new do %>
-  <section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
-    <div class="md:col-span-8">
-      <p>
-        Send and receive sats via the Bitcoin Lightning Network.
-      </p>
-    </div>
-    <div class="md:col-span-4 mt-4 md:mt-0">
-      <p class="font-mono md:text-right mb-0 p-4 border border-gray-300 rounded-lg overflow-hidden">
-      <% if @balance %>
-        <span class="text-xl"><%= number_with_delimiter @balance %> sats</span><br>
-        <span class="text-sm text-gray-500">Available balance</span>
-      <% else %>
-        <span class="text-xl">n/a sats</span><br>
-        <span class="text-sm text-gray-500">Balance unavailable</span>
-      <% end %>
-      </p>
-    </div>
-  </section>
+  <%= render WalletSummaryComponent.new(balance: @balance) %>
 
   <section>
     <h3>Lightning Address</h3>
diff --git a/app/views/wallet/transactions.html.erb b/app/views/wallet/transactions.html.erb
new file mode 100644
index 0000000..184a3a4
--- /dev/null
+++ b/app/views/wallet/transactions.html.erb
@@ -0,0 +1,11 @@
+<%= render HeaderComponent.new(title: "Wallet") %>
+
+<%= render MainSimpleComponent.new do %>
+  <%= render WalletSummaryComponent.new(balance: @balance) %>
+
+  <section>
+    <h3>Transactions</h3>
+
+    <p>Foo</p>
+  </section>
+<% end %>
diff --git a/config/routes.rb b/config/routes.rb
index 8843058..8ecb38b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -20,6 +20,7 @@ Rails.application.routes.draw do
   resources :donations
 
   get 'wallet', to: 'wallet#index'
+  get 'wallet/transactions', to: 'wallet#transactions'
 
   get 'lnurlpay/:address', to: 'lnurlpay#index', constraints: { address: /[^\/]+/}
   get 'lnurlpay/:address/invoice', to: 'lnurlpay#invoice', constraints: { address: /[^\/]+/}
diff --git a/spec/components/wallet_summary_component_spec.rb b/spec/components/wallet_summary_component_spec.rb
new file mode 100644
index 0000000..7acdb04
--- /dev/null
+++ b/spec/components/wallet_summary_component_spec.rb
@@ -0,0 +1,11 @@
+require "rails_helper"
+
+RSpec.describe WalletSummaryComponent, type: :component do
+  it "renders the balance as a human-readable number" do
+    expect(
+      render_inline(described_class.new(balance: 2301000)) {}.css("section").to_html
+    ).to include(
+      "2,301,000 sats"
+    )
+  end
+end
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index c4a74a4..eab4dee 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -10,6 +10,8 @@ require 'capybara'
 require 'devise'
 require 'support/controller_macros'
 require 'support/database_cleaner'
+require "view_component/test_helpers"
+require "capybara/rspec"
 
 # Requires supporting ruby files with custom matchers and macros, etc, in
 # spec/support/ and its subdirectories. Files matching `spec/**/*_spec.rb` are
@@ -70,5 +72,8 @@ RSpec.configure do |config|
   config.include Warden::Test::Helpers
   config.include FactoryBot::Syntax::Methods
   config.include ActiveJob::TestHelper, type: :job
+  config.include ViewComponent::TestHelpers, type: :component
+  config.include Capybara::RSpecMatchers, type: :component
+
   config.extend ControllerMacros, :type => :controller
 end