diff --git a/app/assets/stylesheets/budgets/subheader.scss b/app/assets/stylesheets/budgets/subheader.scss
new file mode 100644
index 000000000..ba51bd3bc
--- /dev/null
+++ b/app/assets/stylesheets/budgets/subheader.scss
@@ -0,0 +1,17 @@
+.budget-subheader {
+  @include grid-row;
+  margin-bottom: $line-height;
+  margin-top: $line-height;
+
+  .current-phase {
+    text-transform: uppercase;
+  }
+
+  .button {
+    margin-top: $line-height / 2;
+  }
+
+  .callout {
+    margin-bottom: 0;
+  }
+}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 0faa8ecc1..764d4592c 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1171,24 +1171,6 @@
   }
 }
 
-.budget-subheader {
-  @include grid-row;
-  margin-bottom: $line-height;
-  margin-top: $line-height;
-
-  .current-phase {
-    text-transform: uppercase;
-  }
-
-  .button {
-    margin-top: $line-height / 2;
-  }
-
-  .callout {
-    margin-bottom: 0;
-  }
-}
-
 .jumbo-budget {
   background: $budget;
   border-bottom: 1px solid $budget;
diff --git a/app/components/budgets/subheader_component.html.erb b/app/components/budgets/subheader_component.html.erb
new file mode 100644
index 000000000..1f69d1d59
--- /dev/null
+++ b/app/components/budgets/subheader_component.html.erb
@@ -0,0 +1,38 @@
+<div class="budget-subheader">
+  <div class="small-12 medium-8 column info">
+    <span class="current-phase"><strong><%= t("budgets.show.phase") %></strong></span>
+    <h2><%= budget.current_phase.name %></h2>
+  </div>
+
+  <div class="small-12 medium-4 column">
+    <% if budget.accepting? %>
+      <% if current_user %>
+        <% if current_user.level_two_or_three_verified? %>
+          <div class="text-right">
+            <%= link_to t("budgets.investments.index.sidebar.create"),
+                        new_budget_investment_path(budget),
+                        class: "button" %>
+          </div>
+        <% else %>
+          <div class="callout warning">
+            <%= sanitize(t("budgets.investments.index.sidebar.verified_only",
+                  verify: link_to_verify_account)) %>
+          </div>
+        <% end %>
+      <% else %>
+        <div class="callout primary">
+          <%= sanitize(t("budgets.investments.index.sidebar.not_logged_in",
+                sign_in: link_to_signin, sign_up: link_to_signup)) %>
+        </div>
+      <% end %>
+    <% end %>
+
+    <% if can?(:read_results, budget) %>
+      <div class="text-right">
+        <%= link_to t("budgets.show.see_results"),
+                    budget_results_path(budget, heading_id: budget.headings.first),
+                    class: "button expanded" %>
+      </div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/components/budgets/subheader_component.rb b/app/components/budgets/subheader_component.rb
new file mode 100644
index 000000000..7d301d4ac
--- /dev/null
+++ b/app/components/budgets/subheader_component.rb
@@ -0,0 +1,8 @@
+class Budgets::SubheaderComponent < ApplicationComponent
+  delegate :current_user, :link_to_signin, :link_to_signup, :link_to_verify_account, :can?, to: :helpers
+  attr_reader :budget
+
+  def initialize(budget)
+    @budget = budget
+  end
+end
diff --git a/app/views/budgets/index.html.erb b/app/views/budgets/index.html.erb
index 091fa5486..73f53bbd9 100644
--- a/app/views/budgets/index.html.erb
+++ b/app/views/budgets/index.html.erb
@@ -21,45 +21,7 @@
     </div>
   </div>
 
-  <div class="budget-subheader">
-    <div class="small-12 medium-8 column info">
-      <span class="current-phase"><strong><%= t("budgets.show.phase") %></strong></span>
-      <h2><%= current_budget.current_phase.name %></h2>
-    </div>
-
-    <div class="small-12 medium-4 column">
-      <% if current_budget.accepting? %>
-        <% if current_user %>
-          <% if current_user.level_two_or_three_verified? %>
-            <div class="text-right">
-              <%= link_to t("budgets.investments.index.sidebar.create"),
-                          new_budget_investment_path(current_budget),
-                          class: "button" %>
-            </div>
-          <% else %>
-            <div class="callout warning">
-              <%= sanitize(t("budgets.investments.index.sidebar.verified_only",
-                    verify: link_to_verify_account)) %>
-            </div>
-          <% end %>
-        <% else %>
-          <div class="callout primary">
-            <%= sanitize(t("budgets.investments.index.sidebar.not_logged_in",
-                  sign_in: link_to_signin, sign_up: link_to_signup)) %>
-          </div>
-        <% end %>
-      <% end %>
-
-      <% if can?(:read_results, current_budget) %>
-        <div class="text-right">
-          <%= link_to t("budgets.show.see_results"),
-                      budget_results_path(current_budget, heading_id: current_budget.headings.first),
-                      class: "button expanded" %>
-        </div>
-      <% end %>
-    </div>
-  </div>
-
+  <%= render Budgets::SubheaderComponent.new(current_budget) %>
   <%= render Budgets::PhasesComponent.new(current_budget) %>
 
   <div id="budget_info" class="budget-info">