diff --git a/app/assets/stylesheets/budgets/groups_and_headings.scss b/app/assets/stylesheets/budgets/groups_and_headings.scss
new file mode 100644
index 000000000..44c36f108
--- /dev/null
+++ b/app/assets/stylesheets/budgets/groups_and_headings.scss
@@ -0,0 +1,29 @@
+.groups-and-headings {
+
+  .heading {
+    border: 1px solid $border;
+    border-radius: rem-calc(3);
+    display: inline-block;
+    margin-bottom: $line-height / 2;
+
+    a {
+      display: block;
+      padding: $line-height / 2;
+
+      &:hover {
+        background: $highlight;
+        text-decoration: none;
+      }
+    }
+
+    .heading-name {
+      padding: $line-height / 2;
+    }
+
+    span {
+      color: $text;
+      display: block;
+      font-size: $small-font-size;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 764d4592c..579a8a08e 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1222,36 +1222,6 @@
   color: $brand;
 }
 
-.groups-and-headings {
-
-  .heading {
-    border: 1px solid $border;
-    border-radius: rem-calc(3);
-    display: inline-block;
-    margin-bottom: $line-height / 2;
-
-    a {
-      display: block;
-      padding: $line-height / 2;
-
-      &:hover {
-        background: $highlight;
-        text-decoration: none;
-      }
-    }
-
-    .heading-name {
-      padding: $line-height / 2;
-    }
-
-    span {
-      color: $text;
-      display: block;
-      font-size: $small-font-size;
-    }
-  }
-}
-
 .progress-votes {
   position: relative;
 
diff --git a/app/components/budgets/groups_and_headings_component.html.erb b/app/components/budgets/groups_and_headings_component.html.erb
new file mode 100644
index 000000000..dfb997032
--- /dev/null
+++ b/app/components/budgets/groups_and_headings_component.html.erb
@@ -0,0 +1,21 @@
+<div id="groups_and_headings" class="groups-and-headings">
+  <% budget.groups.each do |group| %>
+    <h2 id="<%= group.name.parameterize %>"><%= group.name %></h2>
+    <ul class="no-bullet" data-equalizer data-equalizer-on="medium">
+      <% group.headings.sort_by_name.each do |heading| %>
+        <li class="heading small-12 medium-4 large-2" data-equalizer-watch>
+          <% unless budget.informing? || budget.finished? %>
+            <%= link_to budget_investments_path(budget.id,
+                                                heading_id: heading.id) do %>
+              <%= heading_name_and_price_html(heading) %>
+            <% end %>
+          <% else %>
+            <div class="heading-name">
+              <%= heading_name_and_price_html(heading) %>
+            </div>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>
diff --git a/app/components/budgets/groups_and_headings_component.rb b/app/components/budgets/groups_and_headings_component.rb
new file mode 100644
index 000000000..87d0b247d
--- /dev/null
+++ b/app/components/budgets/groups_and_headings_component.rb
@@ -0,0 +1,16 @@
+class Budgets::GroupsAndHeadingsComponent < ApplicationComponent
+  attr_reader :budget
+
+  def initialize(budget)
+    @budget = budget
+  end
+
+  private
+
+    def heading_name_and_price_html(heading)
+      tag.div do
+        concat(heading.name + " ")
+        concat(tag.span(budget.formatted_heading_price(heading)))
+      end
+    end
+end
diff --git a/app/helpers/budgets_helper.rb b/app/helpers/budgets_helper.rb
index fcf937fa0..079599205 100644
--- a/app/helpers/budgets_helper.rb
+++ b/app/helpers/budgets_helper.rb
@@ -5,13 +5,6 @@ module BudgetsHelper
     end
   end
 
-  def heading_name_and_price_html(heading, budget)
-    tag.div do
-      concat(heading.name + " ")
-      concat(tag.span(budget.formatted_heading_price(heading)))
-    end
-  end
-
   def csv_params
     csv_params = params.clone.merge(format: :csv)
     csv_params = csv_params.to_unsafe_h.map { |k, v| [k.to_sym, v] }.to_h
diff --git a/app/views/budgets/index.html.erb b/app/views/budgets/index.html.erb
index bdd3d3504..6d81d4a80 100644
--- a/app/views/budgets/index.html.erb
+++ b/app/views/budgets/index.html.erb
@@ -27,28 +27,7 @@
   <div id="budget_info" class="budget-info">
     <div class="row margin-top">
       <div class="small-12 column">
-
-        <div id="groups_and_headings" class="groups-and-headings">
-          <% current_budget.groups.each do |group| %>
-            <h2 id="<%= group.name.parameterize %>"><%= group.name %></h2>
-            <ul class="no-bullet" data-equalizer data-equalizer-on="medium">
-              <% group.headings.sort_by_name.each do |heading| %>
-                <li class="heading small-12 medium-4 large-2" data-equalizer-watch>
-                  <% unless current_budget.informing? || current_budget.finished? %>
-                    <%= link_to budget_investments_path(current_budget.id,
-                                                        heading_id: heading.id) do %>
-                      <%= heading_name_and_price_html(heading, current_budget) %>
-                    <% end %>
-                  <% else %>
-                    <div class="heading-name">
-                      <%= heading_name_and_price_html(heading, current_budget) %>
-                    </div>
-                  <% end %>
-                </li>
-              <% end %>
-            </ul>
-          <% end %>
-        </div>
+        <%= render Budgets::GroupsAndHeadingsComponent.new(current_budget) %>
 
         <% unless current_budget.informing? %>
           <div class="map inline">