diff --git a/app/components/header_tab_link_component.html.erb b/app/components/header_tab_link_component.html.erb
new file mode 100644
index 0000000..f01d622
--- /dev/null
+++ b/app/components/header_tab_link_component.html.erb
@@ -0,0 +1,3 @@
+<%= link_to @path, class: @link_class do %>
+  <%= @name %>
+<% end %>
diff --git a/app/components/header_tab_link_component.rb b/app/components/header_tab_link_component.rb
new file mode 100644
index 0000000..3d2eeb9
--- /dev/null
+++ b/app/components/header_tab_link_component.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class HeaderTabLinkComponent < ViewComponent::Base
+  def initialize(name:, path:, active: false, disabled: false)
+    @name = name
+    @path = path
+    @active = active
+    @disabled = disabled
+    @link_class = class_names_link(path)
+  end
+
+  def class_names_link(path)
+    common = "block md:inline-block px-5 py-2 rounded-md font-medium text-base md:text-xl"
+    if @active
+      "#{common} bg-gray-900/50 text-white"
+    else
+      "#{common} text-gray-300 hover:bg-gray-900/30 hover:text-white active:bg-gray-900/30 active:text-white"
+    end
+  end
+end
diff --git a/app/components/header_with_tabs_component.html.erb b/app/components/header_with_tabs_component.html.erb
new file mode 100644
index 0000000..9bf54ff
--- /dev/null
+++ b/app/components/header_with_tabs_component.html.erb
@@ -0,0 +1,12 @@
+<header class="py-10">
+  <div class="max-w-6xl md:flex md:gap-x-10 mx-auto px-4 sm:px-6 lg:px-8">
+    <% if @title.present? %>
+    <h1 class="text-3xl font-bold text-white">
+      <%= @title %>
+    </h1>
+    <% end %>
+    <nav class="md:grow flex gap-x-4 <%= @title.present? ? "justify-end" : "justify-start" %>" aria-label="Tabs">
+      <%= render partial: @tabnav_partial %>
+    </nav>
+  </div>
+</header>
diff --git a/app/components/header_with_tabs_component.rb b/app/components/header_with_tabs_component.rb
new file mode 100644
index 0000000..eedcb4a
--- /dev/null
+++ b/app/components/header_with_tabs_component.rb
@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class HeaderWithTabsComponent < ViewComponent::Base
+  def initialize(title: nil, tabnav_partial:)
+    @title = title
+    @tabnav_partial = tabnav_partial
+  end
+end
diff --git a/app/views/contributions/donations/index.html.erb b/app/views/contributions/donations/index.html.erb
index e885055..d27f166 100644
--- a/app/views/contributions/donations/index.html.erb
+++ b/app/views/contributions/donations/index.html.erb
@@ -1,6 +1,10 @@
-<%= render HeaderComponent.new(title: "Contributions") %>
+<%# <%= render HeaderComponent.new(title: "Contributions") %>
+<%= render HeaderWithTabsComponent.new(
+  # title: "Contributions",
+  tabnav_partial: "shared/tabnav_contributions"
+) %>
 
-<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <% if @donations.any? %>
       <p class="mb-12">
diff --git a/app/views/contributions/projects/index.html.erb b/app/views/contributions/projects/index.html.erb
index 11ed210..46ae6c0 100644
--- a/app/views/contributions/projects/index.html.erb
+++ b/app/views/contributions/projects/index.html.erb
@@ -1,6 +1,9 @@
-<%= render HeaderComponent.new(title: "Contributions") %>
+<%= render HeaderWithTabsComponent.new(
+  # title: "Contributions",
+  tabnav_partial: "shared/tabnav_contributions"
+) %>
 
-<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
+<%= render MainSimpleComponent.new do %>
   <section>
     <p class="mb-8">
       Project contributions are how we develop and run all Kosmos software and
diff --git a/app/views/shared/_tabnav_contributions.html.erb b/app/views/shared/_tabnav_contributions.html.erb
index 96db0db..c363e64 100644
--- a/app/views/shared/_tabnav_contributions.html.erb
+++ b/app/views/shared/_tabnav_contributions.html.erb
@@ -1,12 +1,8 @@
-<div class="border-b border-gray-200">
-  <nav class="-mb-px flex" aria-label="Tabs">
-    <%= render TabnavLinkComponent.new(
-      name: "Donations", path: contributions_donations_path,
-      active: current_page?(contributions_donations_path)
-    ) %>
-    <%= render TabnavLinkComponent.new(
-      name: "Projects", path: contributions_projects_path,
-      active: current_page?(contributions_projects_path)
-    ) %>
-  </nav>
-</div>
+<%= render HeaderTabLinkComponent.new(
+  name: "Donations", path: contributions_donations_path,
+  active: current_page?(contributions_donations_path)
+) %>
+<%= render HeaderTabLinkComponent.new(
+  name: "Projects", path: contributions_projects_path,
+  active: current_page?(contributions_projects_path)
+) %>