diff --git a/app/components/forum_post_component.rb b/app/components/forum_post_component.rb
new file mode 100644
index 000000000..217bdbc74
--- /dev/null
+++ b/app/components/forum_post_component.rb
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class ForumPostComponent < ApplicationComponent
+  attr_reader :forum_post, :original_forum_post_id, :dtext_data, :moderation_reports, :current_user
+  delegate :link_to_user, :time_ago_in_words_tagged, :format_text, :policy, to: :helpers
+
+  with_collection_parameter :forum_post
+
+  def initialize(forum_post:, original_forum_post_id: nil, dtext_data: nil, moderation_reports: [], current_user: User.anonymous)
+    @forum_post = forum_post
+    @original_forum_post_id = original_forum_post_id
+    @dtext_data = dtext_data
+    @moderation_reports = moderation_reports
+    @current_user = current_user
+  end
+
+  def render?
+    policy(forum_post).show_deleted?
+  end
+end
diff --git a/app/components/forum_post_component/forum_post_component.html.erb b/app/components/forum_post_component/forum_post_component.html.erb
new file mode 100644
index 000000000..ac8bcd120
--- /dev/null
+++ b/app/components/forum_post_component/forum_post_component.html.erb
@@ -0,0 +1,60 @@
+<article class="forum-post message" id="forum_post_<%= forum_post.id %>"
+          data-forum-post-id="<%= forum_post.id %>"
+          <% if policy(moderation_reports).show? %>
+          data-is-reported="<%= moderation_reports.pluck(:model_id).include?(forum_post.id) %>"
+          <% end %>
+          data-creator="<%= forum_post.creator.name %>">
+
+  <div class="author">
+    <div class="author-name">
+      <%= link_to_user forum_post.creator %>
+      <% if forum_post.is_deleted? %>
+        (deleted)
+      <% end %>
+    </div>
+    <%= link_to time_ago_in_words_tagged(forum_post.created_at), forum_post, class: "message-timestamp" %>
+  </div>
+
+  <div class="content">
+    <div class="prose">
+      <%= format_text(forum_post.body, data: dtext_data) %>
+    </div>
+    <%= render "application/update_notice", record: forum_post %>
+
+    <menu>
+      <% if policy(forum_post).create? %>
+        <li><%= link_to "Reply", new_forum_post_path(post_id: forum_post.id), method: :get, remote: true %></li>
+      <% end %>
+      <% if policy(forum_post).destroy? && !forum_post.is_original_post?(original_forum_post_id) %>
+        <% if forum_post.is_deleted %>
+          <li><%= link_to "Undelete", undelete_forum_post_path(forum_post.id), method: :post, remote: true %></li>
+        <% else %>
+          <li><%= link_to "Delete", forum_post_path(forum_post.id), "data-confirm": "Are you sure you want to delete this forum post?", method: :delete, remote: true %></li>
+        <% end %>
+      <% end %>
+      <% if policy(forum_post).update? %>
+        <% if forum_post.is_original_post?(original_forum_post_id) %>
+          <li><%= link_to "Edit", edit_forum_topic_path(forum_post.topic), id: "edit_forum_topic_link_#{forum_post.topic.id}", class: "edit_forum_topic_link" %></li>
+        <% else %>
+          <li><%= link_to "Edit", edit_forum_post_path(forum_post.id), id: "edit_forum_post_link_#{forum_post.id}", class: "edit_forum_post_link" %></li>
+        <% end %>
+      <% end %>
+      <% if policy(forum_post).reportable? %>
+        <li><%= link_to "Report", new_moderation_report_path(moderation_report: { model_type: "ForumPost", model_id: forum_post.id }), remote: true, title: "Report this forum post to the moderators" %></li>
+      <% end %>
+      <% if forum_post.bulk_update_request.present? %>
+        <ul class="votes" id="forum-post-votes-for-<%= forum_post.id %>">
+          <%= render "forum_post_votes/list", votes: forum_post.votes, forum_post: forum_post %>
+        </ul>
+      <% end %>
+    </menu>
+
+    <% if policy(forum_post).update? %>
+      <% if forum_post.is_original_post?(original_forum_post_id) %>
+        <%= render "forum_topics/form", forum_topic: forum_post.topic %>
+      <% else %>
+        <%= render "forum_posts/partials/edit/form", forum_post: forum_post %>
+      <% end %>
+    <% end %>
+  </div>
+</article>
diff --git a/app/components/forum_post_component/forum_post_component.scss b/app/components/forum_post_component/forum_post_component.scss
new file mode 100644
index 000000000..3aa1e0c2e
--- /dev/null
+++ b/app/components/forum_post_component/forum_post_component.scss
@@ -0,0 +1,33 @@
+article.forum-post {
+  &[data-is-reported="true"] {
+    border: var(--moderation-report-border);
+  }
+
+  a.voted {
+    font-weight: bold;
+  }
+
+  .vote-score-up {
+    color: var(--forum-vote-up-color);
+  }
+
+  .vote-score-meh {
+    color: var(--forum-vote-meh-color);
+  }
+
+  .vote-score-down {
+    color: var(--forum-vote-down-color);
+  }
+
+  div.content {
+    .edit_forum_post, .edit_forum_topic {
+      display: none;
+    }
+
+    menu {
+      ul.votes {
+        margin: 0.5em 0;
+      }
+    }
+  }
+}
diff --git a/app/javascript/src/styles/specific/forum.scss b/app/javascript/src/styles/specific/forum.scss
index c672db6e9..da7b75902 100644
--- a/app/javascript/src/styles/specific/forum.scss
+++ b/app/javascript/src/styles/specific/forum.scss
@@ -3,40 +3,6 @@ div.list-of-forum-posts {
     font-weight: bold;
     color: var(--moderation-report-text-color);
   }
-
-  article.forum-post {
-    &[data-is-reported="true"] {
-      border: var(--moderation-report-border);
-    }
-
-    a.voted {
-      font-weight: bold;
-    }
-
-    .vote-score-up {
-      color: var(--forum-vote-up-color);
-    }
-
-    .vote-score-meh {
-      color: var(--forum-vote-meh-color);
-    }
-
-    .vote-score-down {
-      color: var(--forum-vote-down-color);
-    }
-
-    div.content {
-      .edit_forum_post, .edit_forum_topic {
-        display: none;
-      }
-
-      menu {
-        ul.votes {
-          margin: 0.5em 0;
-        }
-      }
-    }
-  }
 }
 
 div#c-forum-topics {
diff --git a/app/views/forum_posts/_forum_post.html.erb b/app/views/forum_posts/_forum_post.html.erb
deleted file mode 100644
index 3904f112a..000000000
--- a/app/views/forum_posts/_forum_post.html.erb
+++ /dev/null
@@ -1,58 +0,0 @@
-<% if policy(forum_post).show_deleted? %>
-  <article class="forum-post message" id="forum_post_<%= forum_post.id %>"
-           data-forum-post-id="<%= forum_post.id %>"
-           <% if policy(moderation_reports).show? %>
-            data-is-reported="<%= moderation_reports.pluck(:model_id).include?(forum_post.id) %>"
-           <% end %>
-           data-creator="<%= forum_post.creator.name %>">
-    <div class="author">
-      <div class="author-name">
-        <%= link_to_user forum_post.creator %>
-        <% if forum_post.is_deleted? %>
-          (deleted)
-        <% end %>
-      </div>
-      <%= link_to time_ago_in_words_tagged(forum_post.created_at), forum_post, class: "message-timestamp" %>
-    </div>
-    <div class="content">
-      <div class="prose">
-        <%= format_text(forum_post.body, data: dtext_data) %>
-      </div>
-      <%= render "application/update_notice", record: forum_post %>
-      <menu>
-        <% if policy(forum_post).create? %>
-          <li><%= link_to "Reply", new_forum_post_path(:post_id => forum_post.id), :method => :get, :remote => true %></li>
-        <% end %>
-        <% if policy(forum_post).destroy? && !forum_post.is_original_post?(original_forum_post_id) %>
-          <% if forum_post.is_deleted %>
-            <li><%= link_to "Undelete", undelete_forum_post_path(forum_post.id), :method => :post, :remote => true %></li>
-          <% else %>
-            <li><%= link_to "Delete", forum_post_path(forum_post.id), :data => {:confirm => "Are you sure you want to delete this forum post?"}, :method => :delete, :remote => true %></li>
-          <% end %>
-        <% end %>
-        <% if policy(forum_post).update? %>
-          <% if forum_post.is_original_post?(original_forum_post_id) %>
-            <li><%= link_to "Edit", edit_forum_topic_path(forum_post.topic), :id => "edit_forum_topic_link_#{forum_post.topic.id}", :class => "edit_forum_topic_link" %></li>
-          <% else %>
-            <li><%= link_to "Edit", edit_forum_post_path(forum_post.id), :id => "edit_forum_post_link_#{forum_post.id}", :class => "edit_forum_post_link" %></li>
-          <% end %>
-        <% end %>
-        <% if policy(forum_post).reportable? %>
-          <li><%= link_to "Report", new_moderation_report_path(moderation_report: { model_type: "ForumPost", model_id: forum_post.id }), remote: true, title: "Report this forum post to the moderators" %></li>
-        <% end %>
-        <% if forum_post.bulk_update_request.present? %>
-          <ul class="votes" id="forum-post-votes-for-<%= forum_post.id %>">
-            <%= render "forum_post_votes/list", votes: forum_post.votes, forum_post: forum_post %>
-          </ul>
-        <% end %>
-      </menu>
-      <% if policy(forum_post).update? %>
-        <% if forum_post.is_original_post?(original_forum_post_id) %>
-          <%= render "forum_topics/form", :forum_topic => forum_post.topic %>
-        <% else %>
-          <%= render "forum_posts/partials/edit/form", :forum_post => forum_post %>
-        <% end %>
-      <% end %>
-    </div>
-  </article>
-<% end %>
diff --git a/app/views/forum_posts/_listing.html.erb b/app/views/forum_posts/_listing.html.erb
index 5bea63030..86130e94f 100644
--- a/app/views/forum_posts/_listing.html.erb
+++ b/app/views/forum_posts/_listing.html.erb
@@ -12,7 +12,5 @@
     </div>
   <% end %>
 
-  <% forum_posts.each do |forum_post| %>
-    <%= render "forum_posts/forum_post", forum_post: forum_post, original_forum_post_id: original_forum_post_id, dtext_data: dtext_data, moderation_reports: moderation_reports %>
-  <% end %>
+  <%= render ForumPostComponent.with_collection(forum_posts, original_forum_post_id: original_forum_post_id, dtext_data: dtext_data, moderation_reports: moderation_reports, current_user: CurrentUser.user) %>
 </div>