diff --git a/app/components/budgets/executions/heading_component.html.erb b/app/components/budgets/executions/heading_component.html.erb
new file mode 100644
index 000000000..e4f67b94d
--- /dev/null
+++ b/app/components/budgets/executions/heading_component.html.erb
@@ -0,0 +1,26 @@
+<div class="budgets-executions-heading">
+  <h4 id="<%= heading.name.parameterize %>">
+    <%= heading.name %> (<%= investments.count %>)
+  </h4>
+  <div class="row" data-equalizer-on="medium" data-equalizer>
+    <% investments.each do |investment| %>
+      <div class="small-12 medium-6 large-4 column end margin-bottom">
+        <div class="budget-execution" data-equalizer-watch>
+          <%= render Budgets::Executions::ImageComponent.new(investment) %>
+          <div class="budget-execution-info">
+            <div class="budget-execution-content">
+              <h5>
+                <%= link_to investment.title,
+                            polymorphic_path(investment, anchor: "tab-milestones") %>
+              </h5>
+              <span class="author"><%= investment.author.name %></span>
+            </div>
+            <p class="price margin-top text-center">
+              <strong><%= investment.formatted_price %></strong>
+            </p>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/components/budgets/executions/heading_component.rb b/app/components/budgets/executions/heading_component.rb
new file mode 100644
index 000000000..4f38ac5a7
--- /dev/null
+++ b/app/components/budgets/executions/heading_component.rb
@@ -0,0 +1,8 @@
+class Budgets::Executions::HeadingComponent < ApplicationComponent
+  attr_reader :heading, :investments
+
+  def initialize(heading, investments)
+    @heading = heading
+    @investments = investments
+  end
+end
diff --git a/app/components/budgets/executions/investments_component.html.erb b/app/components/budgets/executions/investments_component.html.erb
index b6a7dc937..93ffbb281 100644
--- a/app/components/budgets/executions/investments_component.html.erb
+++ b/app/components/budgets/executions/investments_component.html.erb
@@ -1,26 +1,3 @@
 <% investments_by_heading.each do |heading, investments| %>
-  <h4 id="<%= heading.name.parameterize %>">
-    <%= heading.name %> (<%= investments.count %>)
-  </h4>
-  <div class="row" data-equalizer-on="medium" data-equalizer>
-    <% investments.each do |investment| %>
-      <div class="small-12 medium-6 large-4 column end margin-bottom">
-        <div class="budget-execution" data-equalizer-watch>
-          <%= render Budgets::Executions::ImageComponent.new(investment) %>
-          <div class="budget-execution-info">
-            <div class="budget-execution-content">
-              <h5>
-                <%= link_to investment.title,
-                            polymorphic_path(investment, anchor: "tab-milestones") %>
-              </h5>
-              <span class="author"><%= investment.author.name %></span>
-            </div>
-            <p class="price margin-top text-center">
-              <strong><%= investment.formatted_price %></strong>
-            </p>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
+  <%= render Budgets::Executions::HeadingComponent.new(heading, investments) %>
 <% end %>