diff --git a/src/components/Comment.vue b/src/components/Comment.vue
new file mode 100644
index 00000000..9b4262eb
--- /dev/null
+++ b/src/components/Comment.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="comment uk-flex">
+    <img
+        :src="comment.thumbnail"
+        class="comment-avatar uk-border-circle uk-margin-right"
+        style="width: 48px; height: 48px;"
+        loading="lazy"
+        alt="Avatar"
+    />
+
+    <div class="comment-content">
+      <div class="comment-header">
+        <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
+          <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; Pinned by
+          {{ uploader }}
+        </div>
+
+        <div class="comment-author">
+          <router-link class="uk-text-bold uk-text-small" v-bind:to="comment.commentorUrl">
+              {{ comment.author }} </router-link
+          >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
+        </div>
+        <div class="comment-meta uk-text-meta uk-margin-small-bottom">
+          {{ comment.commentedTime }}
+        </div>
+      </div>
+      <div class="comment-body" style="white-space: pre-wrap">
+        {{ comment.commentText }}
+      </div>
+      <div class="comment-footer uk-margin-small-top uk-text-meta">
+          <font-awesome-icon icon="thumbs-up" style="margin-right: 4px;"></font-awesome-icon>
+          <span>{{ numberFormat(comment.likeCount) }}</span>
+          &nbsp;
+          <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      comment: Object,
+      uploader: String
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 650fce65..70a1153e 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -80,33 +80,7 @@
                     v-bind:key="comment.commentId"
                     v-for="comment in comments.comments"
                 >
-                    <div align="left">
-                        <div v-if="comment.pinned">
-                            <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; Pinned by
-                            {{ video.uploader }}
-                        </div>
-                        <img
-                            :src="comment.thumbnail"
-                            style="width: 10vmin"
-                            height="176"
-                            width="176"
-                            loading="lazy"
-                            alt="avatar"
-                        />
-                        <br />
-                        <router-link class="uk-link-muted" v-bind:to="comment.commentorUrl">
-                            {{ comment.author }} </router-link
-                        >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
-                    </div>
-                    <p style="white-space: pre-wrap">{{ comment.commentText }}</p>
-                    <div>
-                        <b>{{ numberFormat(comment.likeCount) }}</b>
-                        &nbsp;
-                        <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-                        &nbsp;
-                        <font-awesome-icon v-if="comment.hearted" icon="heart"></font-awesome-icon>
-                    </div>
-                    <hr />
+                    <Comment :comment="comment" :uploader="video.uploader" />
                 </div>
             </div>
 
@@ -128,6 +102,7 @@
 import Player from "@/components/Player.vue";
 import VideoItem from "@/components/VideoItem.vue";
 import ErrorHandler from "@/components/ErrorHandler.vue";
+import Comment from "@/components/Comment.vue";
 
 export default {
     name: "App",
@@ -269,6 +244,7 @@ export default {
         Player,
         VideoItem,
         ErrorHandler,
+        Comment
     },
 };
 </script>