diff --git a/app/components/comment_component.html.haml b/app/components/comment_component.html.haml
new file mode 100644
index 00000000..c7a1543c
--- /dev/null
+++ b/app/components/comment_component.html.haml
@@ -0,0 +1,22 @@
+%li.comment{ data: { comment_id: @comment.id } }
+  .d-flex
+    .flex-shrink-0
+      %a{ href: user_path(@comment.user), target: :_top }
+        = render AvatarComponent.new(user: @comment.user, size: "sm", classes: ["comment__user-avatar"])
+    .flex-grow-1
+      %h6.comment__user
+        = user_screen_name @comment.user
+        %span.text-muted
+          ·
+          = time_tooltip @comment
+      .comment__content
+        = markdown @comment.content
+    .flex-shrink-0.ms-auto
+      - if current_user&.smiled?(@comment)
+        = render "reactions/destroy", type: "Comment", target: @comment
+      - else
+        = render "reactions/create", type: "Comment", target: @comment
+      .dropdown.d-inline
+        %button.btn.btn-link.answerbox__action{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
+          %i.fa.fa-fw.fa-ellipsis
+        = render "actions/comment", comment: @comment, answer: @answer
diff --git a/app/components/comment_component.rb b/app/components/comment_component.rb
new file mode 100644
index 00000000..1fe41b9a
--- /dev/null
+++ b/app/components/comment_component.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class CommentComponent < ApplicationComponent
+  include ApplicationHelper
+  include BootstrapHelper
+  include UserHelper
+
+  def initialize(comment:, answer:)
+    @comment = comment
+    @answer = answer
+  end
+end
diff --git a/app/views/answerbox/_comments.html.haml b/app/views/answerbox/_comments.html.haml
index 04aa7b7f..e7d61654 100644
--- a/app/views/answerbox/_comments.html.haml
+++ b/app/views/answerbox/_comments.html.haml
@@ -3,25 +3,4 @@
 - else
   %ul.comment__container
     - comments.order(:created_at).each do |comment|
-      %li.comment{ data: { comment_id: comment.id } }
-        .d-flex
-          .flex-shrink-0
-            %a{ href: user_path(comment.user) }
-              = render AvatarComponent.new(user: comment.user, size: "sm", classes: ["comment__user-avatar"])
-          .flex-grow-1
-            %h6.comment__user
-              = user_screen_name comment.user
-              %span.text-muted
-                ·
-                = time_tooltip comment
-            .comment__content
-              = markdown comment.content
-          .flex-shrink-0.ms-auto
-            - if current_user&.smiled?(comment)
-              = render "reactions/destroy", type: "Comment", target: comment
-            - else
-              = render "reactions/create", type: "Comment", target: comment
-            .dropdown.d-inline
-              %button.btn.btn-link.answerbox__action{ data: { bs_toggle: :dropdown }, aria: { expanded: false } }
-                %i.fa.fa-fw.fa-ellipsis
-              = render "actions/comment", comment: comment, answer: a
+      = render CommentComponent.new(comment:, answer: a)