diff --git a/Gemfile b/Gemfile
index 1aa209c..996fcab 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,6 +5,8 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 gem 'rails', '~> 7.0.2'
 # Use Puma as the app server
 gem 'puma', '~> 4.1'
+# View components
+gem "view_component"
 # Separate dependency since Rails 7.0
 gem 'sprockets-rails'
 # Allows custom JS build tasks to integrate with the asset pipeline
diff --git a/Gemfile.lock b/Gemfile.lock
index 1af58be..d3f0d47 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -282,6 +282,9 @@ GEM
       railties (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
+    view_component (2.49.0)
+      activesupport (>= 5.0.0, < 8.0)
+      method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -331,6 +334,10 @@ DEPENDENCIES
   stimulus-rails
   turbo-rails
   tzinfo-data
+  view_component
   warden
   web-console (>= 3.3.0)
   webmock
+
+BUNDLED WITH
+   2.3.7
diff --git a/app/views/components/_header_compact.html.erb b/app/components/header_compact_component.html.erb
similarity index 87%
rename from app/views/components/_header_compact.html.erb
rename to app/components/header_compact_component.html.erb
index 19ab7f1..e460a5e 100644
--- a/app/views/components/_header_compact.html.erb
+++ b/app/components/header_compact_component.html.erb
@@ -1,7 +1,7 @@
 <header class="py-10">
   <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
     <h1 class="text-3xl font-bold text-white text-center">
-      <%= page_title %>
+      <%= @title %>
     </h1>
   </div>
 </header>
diff --git a/app/components/header_compact_component.rb b/app/components/header_compact_component.rb
new file mode 100644
index 0000000..99cc981
--- /dev/null
+++ b/app/components/header_compact_component.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class HeaderCompactComponent < ViewComponent::Base
+  def initialize(title:)
+    @title = title
+  end
+end
diff --git a/app/views/components/_header.html.erb b/app/components/header_component.html.erb
similarity index 86%
rename from app/views/components/_header.html.erb
rename to app/components/header_component.html.erb
index edd53b3..6597ad4 100644
--- a/app/views/components/_header.html.erb
+++ b/app/components/header_component.html.erb
@@ -1,7 +1,7 @@
 <header class="py-10">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
     <h1 class="text-3xl font-bold text-white">
-      <%= page_title %>
+      <%= @title %>
     </h1>
   </div>
 </header>
diff --git a/app/components/header_component.rb b/app/components/header_component.rb
new file mode 100644
index 0000000..905277f
--- /dev/null
+++ b/app/components/header_component.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class HeaderComponent < ViewComponent::Base
+  def initialize(title:)
+    @title = title
+  end
+end
diff --git a/app/views/components/_main_compact.html.erb b/app/components/main_compact_component.html.erb
similarity index 88%
rename from app/views/components/_main_compact.html.erb
rename to app/components/main_compact_component.html.erb
index ee6ee2e..d1d2a5f 100644
--- a/app/views/components/_main_compact.html.erb
+++ b/app/components/main_compact_component.html.erb
@@ -1,5 +1,5 @@
 <main class="w-full max-w-xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
   <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
-    <%= yield %>
+    <%= content %>
   </div>
 </main>
diff --git a/app/components/main_compact_component.rb b/app/components/main_compact_component.rb
new file mode 100644
index 0000000..60df354
--- /dev/null
+++ b/app/components/main_compact_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainCompactComponent < ViewComponent::Base
+
+end
diff --git a/app/views/components/_main_simple.html.erb b/app/components/main_simple_component.html.erb
similarity index 88%
rename from app/views/components/_main_simple.html.erb
rename to app/components/main_simple_component.html.erb
index 168e6c0..3d75a30 100644
--- a/app/views/components/_main_simple.html.erb
+++ b/app/components/main_simple_component.html.erb
@@ -1,5 +1,5 @@
 <main class="w-full max-w-6xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
   <div class="bg-white rounded-lg shadow px-6 py-12 sm:px-12">
-    <%= yield %>
+    <%= content %>
   </div>
 </main>
diff --git a/app/components/main_simple_component.rb b/app/components/main_simple_component.rb
new file mode 100644
index 0000000..105ea0e
--- /dev/null
+++ b/app/components/main_simple_component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainSimpleComponent < ViewComponent::Base
+
+end
diff --git a/app/views/admin/dashboard/index.html.erb b/app/views/admin/dashboard/index.html.erb
index c00c55a..bb66283 100644
--- a/app/views/admin/dashboard/index.html.erb
+++ b/app/views/admin/dashboard/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Admin Panel" } %>
+<%= render HeaderComponent.new(title: "Admin Panel") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <p class="text-center">
     With great power comes great responsibility.
   </p>
diff --git a/app/views/admin/donations/edit.html.erb b/app/views/admin/donations/edit.html.erb
index 2372949..ba590b2 100644
--- a/app/views/admin/donations/edit.html.erb
+++ b/app/views/admin/donations/edit.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <h2>Editing Donation</h2>
 
   <%= render 'form', donation: @donation, url: admin_donation_path(@donation) %>
diff --git a/app/views/admin/donations/index.html.erb b/app/views/admin/donations/index.html.erb
index 9f26c76..d4f633d 100644
--- a/app/views/admin/donations/index.html.erb
+++ b/app/views/admin/donations/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <% if @donations.any? %>
     <table class="w-full">
       <thead>
diff --git a/app/views/admin/donations/new.html.erb b/app/views/admin/donations/new.html.erb
index 965cdbc..d831813 100644
--- a/app/views/admin/donations/new.html.erb
+++ b/app/views/admin/donations/new.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <h2>New Donation</h2>
 
   <%= render 'form', donation: @donation, url: admin_donations_path %>
diff --git a/app/views/admin/donations/show.html.erb b/app/views/admin/donations/show.html.erb
index 6cd247a..b5ad426 100644
--- a/app/views/admin/donations/show.html.erb
+++ b/app/views/admin/donations/show.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <p id="notice"><%= notice %></p>
 
   <p>
diff --git a/app/views/admin/invitations/index.html.erb b/app/views/admin/invitations/index.html.erb
index d30c0d0..e0cea28 100644
--- a/app/views/admin/invitations/index.html.erb
+++ b/app/views/admin/invitations/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Invitations" } %>
+<%= render HeaderComponent.new(title: "Invitations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <p>
       There are currently <strong><%= @invitations_unused_count %>
diff --git a/app/views/admin/ldap_users/index.html.erb b/app/views/admin/ldap_users/index.html.erb
index 27d7a96..fa69197 100644
--- a/app/views/admin/ldap_users/index.html.erb
+++ b/app/views/admin/ldap_users/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "LDAP Users: #{@ou}" } %>
+<%= render HeaderComponent.new(title: "LDAP Users: #{@ou}") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <h3 class="hidden">Domains</h3>
   <ul class="mb-10">
     <li class="inline-block">
diff --git a/app/views/dashboard/index.html.erb b/app/views/dashboard/index.html.erb
index a5dce88..3d98b91 100644
--- a/app/views/dashboard/index.html.erb
+++ b/app/views/dashboard/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Services" } %>
+<%= render HeaderComponent.new(title: "Services") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <p>
       Your Kosmos account and password currently give you access to these
diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb
index bb6b4a0..db880b2 100644
--- a/app/views/devise/confirmations/new.html.erb
+++ b/app/views/devise/confirmations/new.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <h2>Resend confirmation instructions</h2>
 
   <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
diff --git a/app/views/devise/passwords/edit.html.erb b/app/views/devise/passwords/edit.html.erb
index 33f0f0d..adc8816 100644
--- a/app/views/devise/passwords/edit.html.erb
+++ b/app/views/devise/passwords/edit.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <h2>Change your password</h2>
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 7d8e6cc..ddd54ff 100644
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <h2>Forgot your password?</h2>
 
   <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 73ecdac..c41dc46 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header_compact", locals: { page_title: "Log in" } %>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= render layout: "components/main_compact" do %>
+<%= render MainCompactComponent.new do %>
   <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
diff --git a/app/views/donations/index.html.erb b/app/views/donations/index.html.erb
index 15b7d40..95cd52c 100644
--- a/app/views/donations/index.html.erb
+++ b/app/views/donations/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Donations" } %>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <p>
       Your financial contributions to the development and upkeep of Kosmos
diff --git a/app/views/invitations/index.html.erb b/app/views/invitations/index.html.erb
index 83257fc..377d268 100644
--- a/app/views/invitations/index.html.erb
+++ b/app/views/invitations/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Invitations" } %>
+<%= render HeaderComponent.new(title: "Invitations") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <% if @invitations_unused.any? %>
     <p>
diff --git a/app/views/security/index.html.erb b/app/views/security/index.html.erb
index 425fe9b..797454a 100644
--- a/app/views/security/index.html.erb
+++ b/app/views/security/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Account" } %>
+<%= render HeaderComponent.new(title: "Account") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <h2>Security</h2>
   </section>
diff --git a/app/views/shared/_admin_nav.html.erb b/app/views/shared/_admin_nav.html.erb
index 001aad6..881cd93 100644
--- a/app/views/shared/_admin_nav.html.erb
+++ b/app/views/shared/_admin_nav.html.erb
@@ -3,6 +3,6 @@
 <%= link_to "Invitations", admin_invitations_path,
       class: main_nav_class(@current_section, :invitations) %>
 <%= link_to "Donations", admin_donations_path,
-      class: main_nav_class(@current_section, :contributions) %>
+      class: main_nav_class(@current_section, :donations) %>
 <%= link_to "LDAP Users", admin_ldap_users_path,
       class: main_nav_class(@current_section, :ldap_users) %>
diff --git a/app/views/wallet/index.html.erb b/app/views/wallet/index.html.erb
index c34b2bc..25f8780 100644
--- a/app/views/wallet/index.html.erb
+++ b/app/views/wallet/index.html.erb
@@ -1,6 +1,6 @@
-<%= render partial: "components/header", locals: { page_title: "Wallet" } %>
+<%= render HeaderComponent.new(title: "Wallet") %>
 
-<%= render layout: "components/main_simple" do %>
+<%= 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>
diff --git a/spec/components/header_compact_component_spec.rb b/spec/components/header_compact_component_spec.rb
new file mode 100644
index 0000000..f62d7ca
--- /dev/null
+++ b/spec/components/header_compact_component_spec.rb
@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe HeaderCompactComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end
diff --git a/spec/components/header_component_spec.rb b/spec/components/header_component_spec.rb
new file mode 100644
index 0000000..7b0fd53
--- /dev/null
+++ b/spec/components/header_component_spec.rb
@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe HeaderComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end
diff --git a/spec/components/main_compact_component_spec.rb b/spec/components/main_compact_component_spec.rb
new file mode 100644
index 0000000..89ae854
--- /dev/null
+++ b/spec/components/main_compact_component_spec.rb
@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe MainCompactComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end
diff --git a/spec/components/main_simple_component_spec.rb b/spec/components/main_simple_component_spec.rb
new file mode 100644
index 0000000..e6df874
--- /dev/null
+++ b/spec/components/main_simple_component_spec.rb
@@ -0,0 +1,13 @@
+require "rails_helper"
+
+RSpec.describe MainSimpleComponent, type: :component do
+  pending "add some examples to (or delete) #{__FILE__}"
+
+  # it "renders something useful" do
+  #   expect(
+  #     render_inline(described_class.new(attr: "value")) { "Hello, components!" }.css("p").to_html
+  #   ).to include(
+  #     "Hello, components!"
+  #   )
+  # end
+end
diff --git a/tailwind.config.js b/tailwind.config.js
index 59bb584..c6473c5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   content: [
+    './app/components/**/*.html.erb',
     './app/views/**/*.html.erb',
     './app/helpers/**/*.rb',
     './app/javascript/**/*.js'