diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 073dcde3e..4dbd49d55 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1857,40 +1857,6 @@ table {
   }
 }
 
-.following {
-
-  .follow-list {
-    list-style-type: circle;
-    padding: calc($line-height / 2);
-
-    li {
-      margin-bottom: calc($line-height / 2);
-      margin-left: $line-height;
-    }
-  }
-
-  h3 {
-    font-size: rem-calc(24);
-    margin-top: $line-height;
-    padding-left: rem-calc(30);
-    position: relative;
-
-    span {
-      left: 0;
-      position: absolute;
-      top: 2px;
-    }
-  }
-
-  .interests {
-
-    @include breakpoint(medium) {
-      border-left: 1px solid #ececec;
-      padding-left: $line-height;
-    }
-  }
-}
-
 // 19. Recommendations
 // -------------------
 
diff --git a/app/assets/stylesheets/users/following.scss b/app/assets/stylesheets/users/following.scss
new file mode 100644
index 000000000..f14e7dfcd
--- /dev/null
+++ b/app/assets/stylesheets/users/following.scss
@@ -0,0 +1,33 @@
+.users-following {
+
+  .follow-list {
+    list-style-type: circle;
+    padding: calc($line-height / 2);
+
+    li {
+      margin-bottom: calc($line-height / 2);
+      margin-left: $line-height;
+    }
+  }
+
+  h3 {
+    font-size: rem-calc(24);
+    margin-top: $line-height;
+    padding-left: rem-calc(30);
+    position: relative;
+
+    span {
+      left: 0;
+      position: absolute;
+      top: 2px;
+    }
+  }
+
+  .interests {
+
+    @include breakpoint(medium) {
+      border-left: 1px solid #ececec;
+      padding-left: $line-height;
+    }
+  }
+}
diff --git a/app/views/users/_following.html.erb b/app/components/users/following_component.html.erb
similarity index 91%
rename from app/views/users/_following.html.erb
rename to app/components/users/following_component.html.erb
index d09f99fe6..4470cb4c5 100644
--- a/app/views/users/_following.html.erb
+++ b/app/components/users/following_component.html.erb
@@ -1,4 +1,4 @@
-<div class="row following margin-top" data-equalizer data-equalize-on="medium">
+<div class="row users-following margin-top" data-equalizer data-equalize-on="medium">
   <div class="small-12 medium-8 column" data-equalizer-watch>
     <ul class="menu simple clear">
       <% follows.each do |followable_type, follows| %>
diff --git a/app/components/users/following_component.rb b/app/components/users/following_component.rb
new file mode 100644
index 000000000..94a04c6dd
--- /dev/null
+++ b/app/components/users/following_component.rb
@@ -0,0 +1,32 @@
+class Users::FollowingComponent < ApplicationComponent
+  attr_reader :user, :follows
+
+  def initialize(user, follows:)
+    @user = user
+    @follows = follows
+  end
+
+  private
+
+    def followable_type_title(followable_type)
+      t("activerecord.models.#{followable_type.underscore}.other")
+    end
+
+    def followable_icon(followable)
+      { proposals: "Proposal", budget: "Budget::Investment" }.invert[followable]
+    end
+
+    def render_follow(follow)
+      return if follow.followable.blank?
+
+      followable = follow.followable
+      partial = "#{followable_class_name(followable)}_follow"
+      locals = { followable_class_name(followable).to_sym => followable }
+
+      render partial, locals
+    end
+
+    def followable_class_name(followable)
+      followable.class.to_s.parameterize(separator: "_")
+    end
+end
diff --git a/app/components/users/public_activity_component.html.erb b/app/components/users/public_activity_component.html.erb
index 03554e9a6..86009368c 100644
--- a/app/components/users/public_activity_component.html.erb
+++ b/app/components/users/public_activity_component.html.erb
@@ -16,7 +16,7 @@
     </ul>
 
     <% if current_filter == "follows" %>
-      <%= render "users/following", user: user, follows: follows.group_by(&:followable_type) %>
+      <%= render Users::FollowingComponent.new(user, follows: follows.group_by(&:followable_type)) %>
     <% else %>
       <%= render_user_partial current_filter %>
     <% end %>
diff --git a/app/helpers/followables_helper.rb b/app/helpers/followables_helper.rb
index ab199567f..d4e81ef3b 100644
--- a/app/helpers/followables_helper.rb
+++ b/app/helpers/followables_helper.rb
@@ -1,26 +1,4 @@
 module FollowablesHelper
-  def followable_type_title(followable_type)
-    t("activerecord.models.#{followable_type.underscore}.other")
-  end
-
-  def followable_icon(followable)
-    { proposals: "Proposal", budget: "Budget::Investment" }.invert[followable]
-  end
-
-  def render_follow(follow)
-    return if follow.followable.blank?
-
-    followable = follow.followable
-    partial = "#{followable_class_name(followable)}_follow"
-    locals = { followable_class_name(followable).to_sym => followable }
-
-    render partial, locals
-  end
-
-  def followable_class_name(followable)
-    followable.class.to_s.parameterize(separator: "_")
-  end
-
   def find_or_build_follow(user, followable)
     Follow.find_or_initialize_by(user: user, followable: followable)
   end