diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index e49fb0e52..ff9ea349f 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -41,6 +41,7 @@
 @import "debates/**/*";
 @import "layout/**/*";
 @import "proposals/**/*";
+@import "relationable/**/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
 @import "sdg_management/**/*";
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 0cc0850b3..4ebefa35b 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2410,46 +2410,6 @@ table {
   }
 }
 
-.related-content-list {
-  list-style-type: none;
-  margin-left: 0;
-
-  li {
-    border-bottom: 1px solid $border;
-    margin-bottom: 0 !important;
-    padding: $line-height / 2;
-
-    @include breakpoint(medium) {
-      display: flex;
-      justify-content: space-between;
-
-      > :first-child {
-        flex: 1;
-        margin-right: 1em;
-      }
-    }
-
-    &:first-child {
-      border-top: 1px solid $border;
-    }
-  }
-
-  h3 {
-    font-size: $base-font-size;
-    font-weight: normal;
-  }
-
-  .related-content-title {
-    color: #4f4f4f;
-    font-size: rem-calc(12);
-    text-transform: uppercase;
-  }
-
-  .flag {
-    margin-top: $line-height / 2;
-  }
-}
-
 .relate-content-score {
   display: block;
 
diff --git a/app/assets/stylesheets/relationable/related_content_list.scss b/app/assets/stylesheets/relationable/related_content_list.scss
new file mode 100644
index 000000000..0df728dc8
--- /dev/null
+++ b/app/assets/stylesheets/relationable/related_content_list.scss
@@ -0,0 +1,39 @@
+.related-content-list {
+  list-style-type: none;
+  margin-left: 0;
+
+  li {
+    border-bottom: 1px solid $border;
+    margin-bottom: 0 !important;
+    padding: $line-height / 2;
+
+    @include breakpoint(medium) {
+      display: flex;
+      justify-content: space-between;
+
+      > :first-child {
+        flex: 1;
+        margin-right: 1em;
+      }
+    }
+
+    &:first-child {
+      border-top: 1px solid $border;
+    }
+  }
+
+  h3 {
+    font-size: $base-font-size;
+    font-weight: normal;
+  }
+
+  .related-content-title {
+    color: #4f4f4f;
+    font-size: rem-calc(12);
+    text-transform: uppercase;
+  }
+
+  .flag {
+    margin-top: $line-height / 2;
+  }
+}
diff --git a/app/views/relationable/_related_list.html.erb b/app/components/relationable/related_list_component.html.erb
similarity index 90%
rename from app/views/relationable/_related_list.html.erb
rename to app/components/relationable/related_list_component.html.erb
index f89274211..bb59d85e5 100644
--- a/app/views/relationable/_related_list.html.erb
+++ b/app/components/relationable/related_list_component.html.erb
@@ -1,5 +1,5 @@
 <ul class="related-content-list" id="related-content-list">
-  <% @related_contents.compact.each do |related| %>
+  <% related_contents.compact.each do |related| %>
     <% related_content = related.find_related_content(relationable) %>
 
     <li id="related-content-<%= related_content.id %>">
@@ -18,4 +18,4 @@
   <% end %>
 </ul>
 
-<%= paginate @related_contents %>
+<%= paginate related_contents %>
diff --git a/app/components/relationable/related_list_component.rb b/app/components/relationable/related_list_component.rb
new file mode 100644
index 000000000..f9622ccf4
--- /dev/null
+++ b/app/components/relationable/related_list_component.rb
@@ -0,0 +1,18 @@
+class Relationable::RelatedListComponent < ApplicationComponent
+  attr_reader :relationable
+  delegate :current_user, to: :helpers
+
+  def initialize(relationable)
+    @relationable = relationable
+  end
+
+  def render?
+    related_contents.present?
+  end
+
+  private
+
+    def related_contents
+      @related_contents ||= Kaminari.paginate_array(relationable.relationed_contents).page(params[:page]).per(5)
+    end
+end
diff --git a/app/controllers/budgets/investments_controller.rb b/app/controllers/budgets/investments_controller.rb
index 7c4101dad..43916bbb4 100644
--- a/app/controllers/budgets/investments_controller.rb
+++ b/app/controllers/budgets/investments_controller.rb
@@ -57,7 +57,6 @@ module Budgets
     def show
       @commentable = @investment
       @comment_tree = CommentTree.new(@commentable, params[:page], @current_order)
-      @related_contents = Kaminari.paginate_array(@investment.relationed_contents).page(params[:page]).per(5)
       set_comment_flags(@comment_tree.comments)
       @investment_ids = [@investment.id]
       @remote_translations = detect_remote_translations([@investment], @comment_tree.comments)
diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index 85e4359ff..5e2be5d03 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -26,7 +26,6 @@ class DashboardController < Dashboard::BaseController
   end
 
   def related_content
-    @related_contents = Kaminari.paginate_array(proposal.relationed_contents).page(params[:page]).per(5)
   end
 
   private
diff --git a/app/controllers/debates_controller.rb b/app/controllers/debates_controller.rb
index a71a5be7b..3dd2f1a7b 100644
--- a/app/controllers/debates_controller.rb
+++ b/app/controllers/debates_controller.rb
@@ -25,7 +25,6 @@ class DebatesController < ApplicationController
 
   def show
     super
-    @related_contents = Kaminari.paginate_array(@debate.relationed_contents).page(params[:page]).per(5)
     redirect_to debate_path(@debate), status: :moved_permanently if request.path != debate_path(@debate)
   end
 
diff --git a/app/controllers/management/proposals_controller.rb b/app/controllers/management/proposals_controller.rb
index 740a4b81c..d15020ad5 100644
--- a/app/controllers/management/proposals_controller.rb
+++ b/app/controllers/management/proposals_controller.rb
@@ -30,7 +30,6 @@ class Management::ProposalsController < Management::BaseController
   def show
     super
     @notifications = @proposal.notifications
-    @related_contents = Kaminari.paginate_array(@proposal.relationed_contents).page(params[:page]).per(5)
 
     redirect_to management_proposal_path(@proposal), status: :moved_permanently if request.path != management_proposal_path(@proposal)
   end
diff --git a/app/controllers/proposals_controller.rb b/app/controllers/proposals_controller.rb
index dd4932ed1..25e00f12b 100644
--- a/app/controllers/proposals_controller.rb
+++ b/app/controllers/proposals_controller.rb
@@ -29,7 +29,6 @@ class ProposalsController < ApplicationController
     super
     @notifications = @proposal.notifications
     @notifications = @proposal.notifications.not_moderated
-    @related_contents = Kaminari.paginate_array(@proposal.relationed_contents).page(params[:page]).per(5)
 
     if request.path != proposal_path(@proposal)
       redirect_to proposal_path(@proposal), status: :moved_permanently
diff --git a/app/views/relationable/_related_content.html.erb b/app/views/relationable/_related_content.html.erb
index fde55b475..b20161269 100644
--- a/app/views/relationable/_related_content.html.erb
+++ b/app/views/relationable/_related_content.html.erb
@@ -8,8 +8,5 @@
     <%= render "relationable/form", relationable: relationable %>
   <% end %>
 
-  <% if @related_contents.present? %>
-    <%= render "relationable/related_list", relationable: relationable %>
-  <% end %>
-
+  <%= render Relationable::RelatedListComponent.new(relationable) %>
 </div>
diff --git a/config/i18n-tasks.yml b/config/i18n-tasks.yml
index 08a5bebff..a32d18532 100644
--- a/config/i18n-tasks.yml
+++ b/config/i18n-tasks.yml
@@ -218,6 +218,7 @@ ignore_unused:
   - landings.cambia_tu_ciudad.*
   - "seeds.settings.*"
   - "dashboard.polls.*.submit"
+  - "related_content.content_title.*"
   - "sdg.goals.goal_*"
   - "sdg.*.filter.more.*"
   - "sdg_management.relations.index.filter*"