diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 54c96e0d5..38c4185fc 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -30,3 +30,4 @@
 @import "admin/*";
 @import "sdg/**/*";
 @import "sdg_management/*";
+@import "widgets/**/*";
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index fae431c76..ad3f3ec75 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2889,10 +2889,6 @@ table {
 
 .feeds-list {
 
-  .proposal {
-    clear: both;
-  }
-
   a {
 
     &.see-all {
@@ -2906,22 +2902,6 @@ table {
   }
 }
 
-.feed-image {
-  display: inline-block;
-  height: rem-calc(120);
-  overflow: hidden;
-  width: 100%;
-
-  @include breakpoint(medium) {
-    height: rem-calc(96);
-  }
-
-  img {
-    max-width: none;
-    width: 100%;
-  }
-}
-
 .feed-description {
 
   p {
diff --git a/app/assets/stylesheets/widgets/feeds/proposals.scss b/app/assets/stylesheets/widgets/feeds/proposals.scss
new file mode 100644
index 000000000..863a45174
--- /dev/null
+++ b/app/assets/stylesheets/widgets/feeds/proposals.scss
@@ -0,0 +1,22 @@
+.feed-proposals {
+
+  .proposal {
+    clear: both;
+
+    .feed-image {
+      display: inline-block;
+      height: rem-calc(120);
+      overflow: hidden;
+      width: 100%;
+
+      @include breakpoint(medium) {
+        height: rem-calc(96);
+      }
+
+      img {
+        max-width: none;
+        width: 100%;
+      }
+    }
+  }
+}
diff --git a/app/components/widgets/feeds/debates_component.html.erb b/app/components/widgets/feeds/debates_component.html.erb
new file mode 100644
index 000000000..2f8ad552f
--- /dev/null
+++ b/app/components/widgets/feeds/debates_component.html.erb
@@ -0,0 +1,14 @@
+<div id="feed_debates" class="small-12 column margin-top
+                              <%= "medium-4" if feed_debates_and_proposals_enabled? %>">
+  <div class="feed-content" data-equalizer-watch>
+    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+    <% feed.items.each do |item| %>
+      <div class="<%= item.class.to_s.parameterize(separator: "_") %>">
+        <strong><%= link_to item.title, url_for(item) %></strong>
+      </div>
+    <% end %>
+  </div>
+
+  <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "see-all" %>
+</div>
diff --git a/app/components/widgets/feeds/debates_component.rb b/app/components/widgets/feeds/debates_component.rb
new file mode 100644
index 000000000..fd3bcd18b
--- /dev/null
+++ b/app/components/widgets/feeds/debates_component.rb
@@ -0,0 +1,8 @@
+class Widgets::Feeds::DebatesComponent < ApplicationComponent
+  include FeedsHelper
+  attr_reader :feed
+
+  def initialize(feed)
+    @feed = feed
+  end
+end
diff --git a/app/components/widgets/feeds/participation_component.html.erb b/app/components/widgets/feeds/participation_component.html.erb
new file mode 100644
index 000000000..a4a9f9051
--- /dev/null
+++ b/app/components/widgets/feeds/participation_component.html.erb
@@ -0,0 +1,11 @@
+<div class="row margin-bottom feeds-list feeds-participation" data-equalizer data-equalize-on="medium">
+  <% feeds.each do |feed| %>
+    <% if feed_proposals?(feed) %>
+      <%= render Widgets::Feeds::ProposalsComponent.new(feed) %>
+    <% end %>
+
+    <% if feed_debates?(feed) %>
+      <%= render Widgets::Feeds::DebatesComponent.new(feed) %>
+    <% end %>
+  <% end %>
+</div>
diff --git a/app/components/widgets/feeds/participation_component.rb b/app/components/widgets/feeds/participation_component.rb
new file mode 100644
index 000000000..f90b731c3
--- /dev/null
+++ b/app/components/widgets/feeds/participation_component.rb
@@ -0,0 +1,17 @@
+class Widgets::Feeds::ParticipationComponent < ApplicationComponent
+  attr_reader :feeds
+
+  def initialize(feeds)
+    @feeds = feeds
+  end
+
+  private
+
+    def feed_debates?(feed)
+      feed.kind == "debates"
+    end
+
+    def feed_proposals?(feed)
+      feed.kind == "proposals"
+    end
+end
diff --git a/app/components/widgets/feeds/processes_component.html.erb b/app/components/widgets/feeds/processes_component.html.erb
new file mode 100644
index 000000000..e492713d7
--- /dev/null
+++ b/app/components/widgets/feeds/processes_component.html.erb
@@ -0,0 +1,21 @@
+<div class="card small-12 column margin-bottom">
+  <div class="feed-content">
+    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+    <% feed.items.each do |item| %>
+      <%= link_to url_for(item) do %>
+        <figure class="figure-card <%= item.class.to_s.parameterize(separator: "_") %>">
+          <%= image_tag("welcome_process.png", alt: "") %>
+          <figcaption>
+            <span><%= t("welcome.feed.process_label") %></span><br>
+            <h3><%= item.title %></h3>
+          </figcaption>
+        </figure>
+        <p class="description small"><%= item.summary %></p>
+        <p class="small"><%= t("welcome.feed.see_process") %></p>
+      <% end %>
+    <% end %>
+
+    <%= link_to t("welcome.feed.see_all_processes"), legislation_processes_path, class: "float-right see-all" %>
+  </div>
+</div>
diff --git a/app/components/widgets/feeds/processes_component.rb b/app/components/widgets/feeds/processes_component.rb
new file mode 100644
index 000000000..00780a38b
--- /dev/null
+++ b/app/components/widgets/feeds/processes_component.rb
@@ -0,0 +1,7 @@
+class Widgets::Feeds::ProcessesComponent < ApplicationComponent
+  attr_reader :feed
+
+  def initialize(feed)
+    @feed = feed
+  end
+end
diff --git a/app/components/widgets/feeds/proposals_component.html.erb b/app/components/widgets/feeds/proposals_component.html.erb
new file mode 100644
index 000000000..18fba01e0
--- /dev/null
+++ b/app/components/widgets/feeds/proposals_component.html.erb
@@ -0,0 +1,26 @@
+<div id="feed_proposals" class="feed-proposals small-12 column margin-top
+                                <%= "medium-8" if feed_debates_and_proposals_enabled? %>">
+  <div class="feed-content" data-equalizer-watch>
+    <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
+
+    <% feed.items.each do |item| %>
+      <div class="<%= item.class.to_s.parameterize(separator: "_") %> row">
+        <div class="feed-description small-12 column
+                   <%= "medium-6 large-9" if item.image.present? %>">
+          <strong><%= link_to item.title, url_for(item) %></strong><br>
+          <p><%= item.summary %></p>
+        </div>
+        <% if item.image.present? %>
+          <div class="small-12 medium-6 large-3 column">
+            <div class="feed-image">
+              <%= image_tag item.image_url(:thumb),
+                            alt: item.image.title.unicode_normalize %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "see-all" %>
+</div>
diff --git a/app/components/widgets/feeds/proposals_component.rb b/app/components/widgets/feeds/proposals_component.rb
new file mode 100644
index 000000000..47f806b5f
--- /dev/null
+++ b/app/components/widgets/feeds/proposals_component.rb
@@ -0,0 +1,8 @@
+class Widgets::Feeds::ProposalsComponent < ApplicationComponent
+  include FeedsHelper
+  attr_reader :feed
+
+  def initialize(feed)
+    @feed = feed
+  end
+end
diff --git a/app/helpers/feeds_helper.rb b/app/helpers/feeds_helper.rb
index b5882e22f..b5bf5a0c1 100644
--- a/app/helpers/feeds_helper.rb
+++ b/app/helpers/feeds_helper.rb
@@ -1,12 +1,4 @@
 module FeedsHelper
-  def feed_debates?(feed)
-    feed.kind == "debates"
-  end
-
-  def feed_proposals?(feed)
-    feed.kind == "proposals"
-  end
-
   def feed_processes?(feed)
     feed.kind == "processes"
   end
diff --git a/app/views/welcome/_feeds.html.erb b/app/views/welcome/_feeds.html.erb
index 37f21df18..e200d2c42 100644
--- a/app/views/welcome/_feeds.html.erb
+++ b/app/views/welcome/_feeds.html.erb
@@ -1,51 +1 @@
-<div class="row margin-bottom feeds-list" data-equalizer data-equalize-on="medium">
-  <% @feeds.each do |feed| %>
-
-    <% if feed_proposals?(feed) %>
-      <div id="feed_proposals" class="small-12 column margin-top
-                                      <%= "medium-8" if feed_debates_and_proposals_enabled? %>">
-        <div class="feed-content" data-equalizer-watch>
-          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-          <% feed.items.each do |item| %>
-            <div class="<%= item.class.to_s.parameterize(separator: "_") %> row">
-              <div class="feed-description small-12 column
-                         <%= "medium-6 large-9" if item.image.present? %>">
-                <strong><%= link_to item.title, url_for(item) %></strong><br>
-                <p><%= item.summary %></p>
-              </div>
-              <% if item.image.present? %>
-                <div class="small-12 medium-6 large-3 column">
-                  <div class="feed-image">
-                    <%= image_tag item.image_url(:thumb),
-                                  alt: item.image.title.unicode_normalize %>
-                  </div>
-                </div>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-
-        <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "see-all" %>
-      </div>
-    <% end %>
-
-    <% if feed_debates?(feed) %>
-      <div id="feed_debates" class="small-12 column margin-top
-                                    <%= "medium-4" if feed_debates_and_proposals_enabled? %>">
-        <div class="feed-content" data-equalizer-watch>
-          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-          <% feed.items.each do |item| %>
-            <div class="<%= item.class.to_s.parameterize(separator: "_") %>">
-              <strong><%= link_to item.title, url_for(item) %></strong>
-            </div>
-          <% end %>
-        </div>
-
-        <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "see-all" %>
-      </div>
-    <% end %>
-
-  <% end %>
-</div>
+<%= render Widgets::Feeds::ParticipationComponent.new(@feeds) %>
diff --git a/app/views/welcome/_processes.html.erb b/app/views/welcome/_processes.html.erb
index 556c6e066..d859703d8 100644
--- a/app/views/welcome/_processes.html.erb
+++ b/app/views/welcome/_processes.html.erb
@@ -1,29 +1,7 @@
 <div class="feeds-list">
   <% @feeds.each do |feed| %>
-
     <% if feed_processes?(feed) %>
-      <div class="card small-12 column margin-bottom">
-        <div class="feed-content">
-          <h3 class="title"><%= t("welcome.feed.most_active.#{feed.kind}") %></h3>
-
-          <% feed.items.each do |item| %>
-            <%= link_to url_for(item) do %>
-              <figure class="figure-card <%= item.class.to_s.parameterize(separator: "_") %>">
-                <%= image_tag("welcome_process.png", alt: "") %>
-                <figcaption>
-                  <span><%= t("welcome.feed.process_label") %></span><br>
-                  <h3><%= item.title %></h3>
-                </figcaption>
-              </figure>
-              <p class="description small"><%= item.summary %></p>
-              <p class="small"><%= t("welcome.feed.see_process") %></p>
-            <% end %>
-          <% end %>
-
-          <%= link_to t("welcome.feed.see_all_processes"), legislation_processes_path, class: "float-right see-all" %>
-        </div>
-      </div>
+      <%= render Widgets::Feeds::ProcessesComponent.new(feed) %>
     <% end %>
-
   <% end %>
 </div>