diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 93d6472cd..380278a1a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -33,7 +33,7 @@
 @import "sticky_overrides";
 @import "tags";
 @import "admin/**/*";
-@import "budgets/*";
+@import "budgets/**/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";
diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss
new file mode 100644
index 000000000..bc33064c8
--- /dev/null
+++ b/app/assets/stylesheets/budgets/ballot/investment.scss
@@ -0,0 +1,51 @@
+.ballot-list li {
+  background: #f9f9f9;
+  line-height: $line-height;
+  margin-bottom: $line-height / 4;
+  padding: $line-height $line-height / 2;
+  position: relative;
+
+  a {
+    color: $text;
+  }
+
+  span {
+    display: block;
+    font-style: italic;
+  }
+
+  .remove-investment-project {
+    display: block;
+    height: 0;
+
+    .icon-x {
+      color: #9f9f9f;
+      font-size: rem-calc(24);
+      line-height: $line-height / 2;
+      position: absolute;
+      right: 6px;
+      text-decoration: none;
+      top: 6px;
+
+      @include breakpoint(medium) {
+        font-size: $base-font-size;
+      }
+    }
+  }
+
+  &:hover {
+    background: $budget;
+    color: #fff;
+
+    a,
+    span {
+      color: #fff;
+      outline: 0;
+      text-decoration: none;
+    }
+
+    .remove-investment-project .icon-x {
+      color: #fff;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 2b9313af6..94b7be37b 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -1321,58 +1321,6 @@
 .ballot-list {
   list-style: none;
   margin-left: 0;
-
-  li {
-    background: #f9f9f9;
-    line-height: $line-height;
-    margin-bottom: $line-height / 4;
-    padding: $line-height $line-height / 2;
-    position: relative;
-
-    a {
-      color: $text;
-    }
-
-    span {
-      display: block;
-      font-style: italic;
-    }
-
-    .remove-investment-project {
-      display: block;
-      height: 0;
-
-      .icon-x {
-        color: #9f9f9f;
-        font-size: rem-calc(24);
-        line-height: $line-height / 2;
-        position: absolute;
-        right: 6px;
-        text-decoration: none;
-        top: 6px;
-
-        @include breakpoint(medium) {
-          font-size: $base-font-size;
-        }
-      }
-    }
-
-    &:hover {
-      background: $budget;
-      color: #fff;
-
-      a,
-      span {
-        color: #fff;
-        outline: 0;
-        text-decoration: none;
-      }
-
-      .remove-investment-project .icon-x {
-        color: #fff;
-      }
-    }
-  }
 }
 
 .select-district a {
diff --git a/app/views/budgets/ballot/_investment_for_sidebar.html.erb b/app/components/budgets/ballot/investment_component.html.erb
similarity index 61%
rename from app/views/budgets/ballot/_investment_for_sidebar.html.erb
rename to app/components/budgets/ballot/investment_component.html.erb
index a0c268a35..95fbb7179 100644
--- a/app/views/budgets/ballot/_investment_for_sidebar.html.erb
+++ b/app/components/budgets/ballot/investment_component.html.erb
@@ -1,10 +1,9 @@
-<li id="<%= dom_id(investment) %>_sidebar">
-  <%= investment.title %>
+<li id="<%= list_item_id %>">
+  <%= investment_title %>
   <span><%= investment.formatted_price %></span>
 
-  <% if @budget.balloting? %>
-    <%= link_to budget_ballot_line_path(id: investment.id,
-                                        investments_ids: investment_ids),
+  <% if budget.balloting? %>
+    <%= link_to delete_path,
                 title: t("budgets.ballots.show.remove"),
                 class: "remove-investment-project",
                 method: :delete,
diff --git a/app/components/budgets/ballot/investment_component.rb b/app/components/budgets/ballot/investment_component.rb
new file mode 100644
index 000000000..6b7d8e74a
--- /dev/null
+++ b/app/components/budgets/ballot/investment_component.rb
@@ -0,0 +1,25 @@
+class Budgets::Ballot::InvestmentComponent < ApplicationComponent
+  attr_reader :investment
+
+  def initialize(investment:)
+    @investment = investment
+  end
+
+  private
+
+    def budget
+      investment.budget
+    end
+
+    def list_item_id
+      dom_id(investment)
+    end
+
+    def investment_title
+      link_to investment.title, budget_investment_path(budget, investment)
+    end
+
+    def delete_path
+      budget_ballot_line_path(budget, id: investment.id)
+    end
+end
diff --git a/app/components/budgets/ballot/investment_for_sidebar_component.rb b/app/components/budgets/ballot/investment_for_sidebar_component.rb
new file mode 100644
index 000000000..33b0a9533
--- /dev/null
+++ b/app/components/budgets/ballot/investment_for_sidebar_component.rb
@@ -0,0 +1,23 @@
+class Budgets::Ballot::InvestmentForSidebarComponent < Budgets::Ballot::InvestmentComponent
+  with_collection_parameter :investment
+  attr_reader :investment_ids
+
+  def initialize(investment:, investment_ids:)
+    super(investment: investment)
+    @investment_ids = investment_ids
+  end
+
+  private
+
+    def list_item_id
+      "#{super}_sidebar"
+    end
+
+    def investment_title
+      investment.title
+    end
+
+    def delete_path
+      budget_ballot_line_path(id: investment.id, investments_ids: investment_ids)
+    end
+end
diff --git a/app/views/budgets/ballot/_ballot.html.erb b/app/views/budgets/ballot/_ballot.html.erb
index 8abf49a19..13d9eac88 100644
--- a/app/views/budgets/ballot/_ballot.html.erb
+++ b/app/views/budgets/ballot/_ballot.html.erb
@@ -40,8 +40,9 @@
         <% end %>
 
         <ul class="ballot-list">
-          <%= render partial: "budgets/ballot/investment",
-                     collection: @ballot.investments.by_group(group.id) %>
+          <%= render Budgets::Ballot::InvestmentComponent.with_collection(
+            @ballot.investments.by_group(group.id)
+          ) %>
         </ul>
       </div>
     </div>
diff --git a/app/views/budgets/ballot/_investment.html.erb b/app/views/budgets/ballot/_investment.html.erb
deleted file mode 100644
index 42fc8b44f..000000000
--- a/app/views/budgets/ballot/_investment.html.erb
+++ /dev/null
@@ -1,14 +0,0 @@
-<li id="<%= dom_id(investment) %>">
-  <%= link_to investment.title, budget_investment_path(@budget, investment) %>
-  <span><%= investment.formatted_price %></span>
-
-  <% if @budget.balloting? %>
-    <%= link_to budget_ballot_line_path(@budget, id: investment.id),
-                title: t("budgets.ballots.show.remove"),
-                class: "remove-investment-project",
-                method: :delete,
-                remote: true do %>
-       <span class="icon-x"></span>
-    <% end %>
-  <% end %>
-</li>
diff --git a/app/views/budgets/investments/_sidebar.html.erb b/app/views/budgets/investments/_sidebar.html.erb
index 55bc46d66..233a455fa 100644
--- a/app/views/budgets/investments/_sidebar.html.erb
+++ b/app/views/budgets/investments/_sidebar.html.erb
@@ -59,11 +59,10 @@
 
   <ul class="ballot-list">
     <% if @heading %>
-      <% @ballot.investments.by_heading(@heading.id).each do |investment| %>
-        <%= render "budgets/ballot/investment_for_sidebar",
-                    investment: investment,
-                    investment_ids: @investment_ids %>
-      <% end %>
+      <%= render Budgets::Ballot::InvestmentForSidebarComponent.with_collection(
+        @ballot.investments.by_heading(@heading.id),
+        investment_ids: @investment_ids
+      ) %>
     <% end %>
   </ul>