diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 1be22b348..8a9be181e 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -21,6 +21,7 @@
 @import "account/**/*";
 @import "budgets/**/*";
 @import "comments/**/*";
+@import "dashboard/**/*";
 @import "debates/**/*";
 @import "devise/**/*";
 @import "documents/**/*";
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 3233d17a8..c75202c4f 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -2,7 +2,6 @@
 //
 // 01. Dashboard global
 // 02. Actions
-// 03. Resources
 // 04. Goals
 // 05. Sidebar
 // 06. Community
@@ -165,62 +164,6 @@
   }
 }
 
-// 03. Resources
-// -------------
-
-.resource-card {
-  background: #d1f5eb;
-  border-radius: rem-calc(4);
-  margin-bottom: $line-height;
-  min-height: $line-height * 9;
-  padding: $line-height * 2 $line-height $line-height;
-  position: relative;
-  text-align: center;
-
-  &.alert {
-    background: #feeaeb;
-
-    &::before {
-      color: #fb9497;
-      content: "\74";
-    }
-  }
-
-  &::before {
-    border: 2px solid;
-    border-radius: rem-calc(40);
-    color: #00cb96;
-    content: "\6c";
-    font-family: "icons";
-    font-size: rem-calc(20);
-    height: rem-calc(36);
-    position: absolute;
-    right: 12px;
-    top: 12px;
-    width: rem-calc(36);
-  }
-
-  .label {
-    left: 0;
-    position: absolute;
-    top: 20px;
-  }
-
-  h4 {
-    margin-top: $line-height;
-  }
-
-  .resource-description {
-    min-height: $line-height * 4;
-  }
-
-  .button {
-    background: #00cb96;
-    color: #000;
-    font-weight: bold;
-  }
-}
-
 // 04. Goals
 // ---------
 
diff --git a/app/assets/stylesheets/dashboard/resources.scss b/app/assets/stylesheets/dashboard/resources.scss
new file mode 100644
index 000000000..8ba2d76e9
--- /dev/null
+++ b/app/assets/stylesheets/dashboard/resources.scss
@@ -0,0 +1,54 @@
+.dashboard-resources {
+  .resource-card {
+    background: #d1f5eb;
+    border-radius: rem-calc(4);
+    margin-bottom: $line-height;
+    min-height: $line-height * 9;
+    padding: $line-height * 2 $line-height $line-height;
+    position: relative;
+    text-align: center;
+
+    &.alert {
+      background: #feeaeb;
+
+      &::before {
+        color: #fb9497;
+        content: "\74";
+      }
+    }
+
+    &::before {
+      border: 2px solid;
+      border-radius: rem-calc(40);
+      color: #00cb96;
+      content: "\6c";
+      font-family: "icons";
+      font-size: rem-calc(20);
+      height: rem-calc(36);
+      position: absolute;
+      right: 12px;
+      top: 12px;
+      width: rem-calc(36);
+    }
+
+    .label {
+      left: 0;
+      position: absolute;
+      top: 20px;
+    }
+
+    h4 {
+      margin-top: $line-height;
+    }
+
+    .resource-description {
+      min-height: $line-height * 4;
+    }
+
+    .button {
+      background: #00cb96;
+      color: #000;
+      font-weight: bold;
+    }
+  }
+}
diff --git a/app/views/dashboard/_resources.html.erb b/app/components/dashboard/resources_component.html.erb
similarity index 89%
rename from app/views/dashboard/_resources.html.erb
rename to app/components/dashboard/resources_component.html.erb
index 6c82994fc..60c731f01 100644
--- a/app/views/dashboard/_resources.html.erb
+++ b/app/components/dashboard/resources_component.html.erb
@@ -1,4 +1,4 @@
-<div id="available-resources-section">
+<div class="dashboard-resources">
   <h3 class="title"><%= t("dashboard.resources.available_resources") %></h3>
 
   <div data-equalizer="resources" data-equalize-on="medium">
diff --git a/app/components/dashboard/resources_component.rb b/app/components/dashboard/resources_component.rb
new file mode 100644
index 000000000..0ed5ac6ba
--- /dev/null
+++ b/app/components/dashboard/resources_component.rb
@@ -0,0 +1,7 @@
+class Dashboard::ResourcesComponent < ApplicationComponent
+  attr_reader :active_resources
+
+  def initialize(active_resources)
+    @active_resources = active_resources
+  end
+end
diff --git a/app/views/dashboard/progress.html.erb b/app/views/dashboard/progress.html.erb
index de9e94be8..e6824663f 100644
--- a/app/views/dashboard/progress.html.erb
+++ b/app/views/dashboard/progress.html.erb
@@ -38,4 +38,4 @@
   <%= render "summary_recommended_actions" %>
 <% end %>
 
-<%= render "resources" %>
+<%= render Dashboard::ResourcesComponent.new(active_resources) %>
diff --git a/spec/system/dashboard/dashboard_spec.rb b/spec/system/dashboard/dashboard_spec.rb
index 379478cec..b7be33baa 100644
--- a/spec/system/dashboard/dashboard_spec.rb
+++ b/spec/system/dashboard/dashboard_spec.rb
@@ -157,7 +157,7 @@ describe "Proposal's dashboard" do
                          required_supports: proposal.votes_for.size + 1_000)
 
     visit progress_proposal_dashboard_path(proposal)
-    within "div#available-resources-section" do
+    within ".dashboard-resources" do
       expect(page).to have_content("Polls")
       expect(page).to have_content("E-mail")
       expect(page).to have_content("Poster")
@@ -204,7 +204,7 @@ describe "Proposal's dashboard" do
                          required_supports: proposal.votes_for.size + 1_000)
 
     visit progress_proposal_dashboard_path(proposal)
-    within "div#available-resources-section" do
+    within ".dashboard-resources" do
       expect(page).to have_content("Polls")
       expect(page).to have_content("E-mail")
       expect(page).to have_content("Poster")
@@ -239,7 +239,7 @@ describe "Proposal's dashboard" do
 
     visit progress_proposal_dashboard_path(proposal)
 
-    within "div#available-resources-section" do
+    within ".dashboard-resources" do
       expect(page).to have_content("Polls")
       expect(page).to have_content("E-mail")
       expect(page).to have_content("Poster")