diff --git a/frontend/components/containers/annotation/CommentButton.vue b/frontend/components/containers/annotation/CommentButton.vue
deleted file mode 100644
index e08bec27..00000000
--- a/frontend/components/containers/annotation/CommentButton.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <div style="display:inline;">
-    <v-tooltip bottom>
-      <template v-slot:activator="{ on }">
-        <v-btn
-          class="text-capitalize ps-1 pe-1"
-          min-width="36"
-          icon
-          v-on="on"
-          @click="dialog=true"
-        >
-          <v-icon>
-            mdi-chat
-          </v-icon>
-        </v-btn>
-      </template>
-      <span>{{ $t('annotation.commentTooltip') }}</span>
-    </v-tooltip>
-    <v-dialog
-      v-model="dialog"
-      width="800"
-    >
-      <base-card
-        :title="$t('annotation.commentPopupTitle')"
-        :cancel-text="$t('generic.close')"
-        @cancel="dialog=false"
-      >
-        <template #content>
-          <v-text-field
-            v-model="comment"
-            outlined
-          >
-            <template
-              v-slot:append
-            >
-              <v-btn
-                tile
-                large
-                icon
-                height="auto"
-                width="auto"
-                color="primary"
-                class="ma-0"
-                @click="addItem"
-              >
-                <v-icon>mdi-plus</v-icon>
-              </v-btn>
-            </template>
-          </v-text-field>
-          <v-data-table
-            :headers="headers"
-            :items="currentDoc.comments"
-            :items-per-page="10"
-            class="elevation-1"
-          >
-            <template v-slot:item.action="{ item }">
-              <v-icon
-                small
-                @click="deleteItem(item.id)"
-              >
-                mdi-delete
-              </v-icon>
-            </template>
-            <template v-slot:item.text="props">
-              <v-edit-dialog
-                large
-                persistent
-                @save="editItem"
-                @open="openEdit(props.item)"
-              >
-                <div>{{ props.item.text }}</div>
-                <template v-slot:input>
-                  <div class="mt-4 title">
-                    Update Comment
-                  </div>
-                  <v-text-field
-                    v-model="editedComment.text"
-                    label="Edit"
-                    single-line
-                    counter
-                    autofocus
-                  />
-                </template>
-              </v-edit-dialog>
-            </template>
-          </v-data-table>
-        </template>
-      </base-card>
-    </v-dialog>
-  </div>
-</template>
-
-<script>
-import { mapGetters, mapActions } from 'vuex'
-import BaseCard from '@/components/molecules/BaseCard'
-
-export default {
-  components: {
-    BaseCard
-  },
-
-  data() {
-    return {
-      dialog: false,
-      comment: '',
-      editedComment: {
-        text: '',
-        id: null
-      }
-    }
-  },
-
-  computed: {
-    ...mapGetters('documents', ['currentDoc']),
-    headers() {
-      return [
-        {
-          text: 'Comments',
-          align: 'start',
-          sortable: false,
-          value: 'text'
-        },
-        { text: 'Action', value: 'action', sortable: false }
-      ]
-    }
-  },
-
-  methods: {
-    ...mapActions('documents', ['addComment', 'deleteComment', 'updateComment']),
-    addItem() {
-      if (this.comment === '') {
-        return
-      }
-      const payload = {
-        text: this.comment,
-        projectId: this.$route.params.id
-      }
-      this.addComment(payload)
-      this.comment = ''
-    },
-    deleteItem(id) {
-      const payload = {
-        commentId: id,
-        projectId: this.$route.params.id
-      }
-      this.deleteComment(payload)
-    },
-    editItem() {
-      if (this.editedComment.text === '') {
-        this.deleteItem(this.editedComment.id)
-      } else {
-        this.updateComment({
-          projectId: this.$route.params.id,
-          commentId: this.editedComment.id,
-          text: this.editedComment.text
-        })
-      }
-    },
-    openEdit(item) {
-      Object.assign(this.editedComment, item)
-    }
-  }
-}
-</script>
diff --git a/frontend/components/containers/comments/Comment.vue b/frontend/components/containers/comments/Comment.vue
index 0424e05d..73288b5b 100644
--- a/frontend/components/containers/comments/Comment.vue
+++ b/frontend/components/containers/comments/Comment.vue
@@ -1,70 +1,96 @@
 <template>
-  <div>
-    <v-timeline-item
-      small
-    >
-      <div class="font-weight-normal">
-        <strong>{{ comment.username }}</strong> @{{ comment.created_at | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('YYYY-MM-DD HH:mm') }}
-        <v-tooltip top>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-if="comment.user == userId"
-              icon
-              color="green"
-              v-bind="attrs"
-              v-on="on"
-              @click="showEdit=true"
-            >
-              <v-icon>mdi-comment-edit-outline</v-icon>
-            </v-btn>
-          </template>
-          <span>Edit Comment</span>
-        </v-tooltip>
-        <v-tooltip top>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-if="comment.user == userId"
-              icon
-              color="red"
-              v-bind="attrs"
-              v-on="on"
-              @click="$emit('delete-comment', comment)"
-            >
-              <v-icon>mdi-delete-outline</v-icon>
-            </v-btn>
-          </template>
-          <span>Delete Comment</span>
-        </v-tooltip>
-      </div>
-      <div v-if="!showEdit">
+  <v-card class="elevation-0">
+    <v-card-title>
+      <v-list-item class="grow ps-0">
+        <v-list-item-avatar>
+          <v-icon large>
+            mdi-account-circle
+          </v-icon>
+        </v-list-item-avatar>
+
+        <v-list-item-content>
+          <v-list-item-title>{{ comment.username }}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{ comment.created_at | dateParse('YYYY-MM-DDTHH:mm:ss') | dateFormat('YYYY-MM-DD HH:mm') }}
+          </v-list-item-subtitle>
+        </v-list-item-content>
+
+        <v-row
+          align="center"
+          justify="end"
+        >
+          <v-menu
+            v-if="comment.user == userId"
+            bottom
+            left
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                icon
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+
+            <v-list>
+              <v-list-item>
+                <v-list-item-title
+                  @click="showEdit=true"
+                >
+                  Edit
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item>
+                <v-list-item-title
+                  @click="$emit('delete-comment', comment)"
+                >
+                  Delete
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-row>
+      </v-list-item>
+    </v-card-title>
+
+    <v-card-text class="body-1">
+      <span v-if="!showEdit">
         {{ comment.text }}
-      </div>
-      <div v-else>
-        <v-textarea
-          v-model="editText"
-          solo
-        />
-        <div>
+      </span>
+      <v-form v-else>
+        <v-row>
+          <v-textarea
+            v-model="editText"
+            auto-grow
+            rows="1"
+            solo
+          />
+        </v-row>
+        <v-row justify="end">
           <v-btn
-            color="red"
+            text
+            class="text-capitalize"
             @click="showEdit=false"
           >
-            Close
+            Cancel
           </v-btn>
           <v-btn
-            color="green"
+            color="primary"
+            class="text-capitalize"
             @click="updateComment(editText)"
           >
             Update
           </v-btn>
-        </div>
-      </div>
-    </v-timeline-item>
-  </div>
+        </v-row>
+      </v-form>
+    </v-card-text>
+    <v-divider />
+  </v-card>
 </template>
 
 <script>
-
 import Vue from 'vue'
 import VueFilterDateFormat from '@vuejs-community/vue-filter-date-format'
 import VueFilterDateParse from '@vuejs-community/vue-filter-date-parse'
diff --git a/frontend/components/containers/comments/CommentSection.vue b/frontend/components/containers/comments/CommentButton.vue
similarity index 50%
rename from frontend/components/containers/comments/CommentSection.vue
rename to frontend/components/containers/comments/CommentButton.vue
index d8ab1eaa..cbcb628a 100644
--- a/frontend/components/containers/comments/CommentSection.vue
+++ b/frontend/components/containers/comments/CommentButton.vue
@@ -1,61 +1,81 @@
 <template>
-  <div>
-    <div class="font-weight-bold ml-8 mb-2">
-      {{ this.$t('comments.comments') }}
-    </div>
-
-    <v-timeline
-      align-top
-      dense
-    >
-      <v-timeline-item
-        fill-dot
-        class="mb-12"
-        color="green"
-        large
-      >
-        <v-textarea
-          v-model="message"
-          outlined
-          name="CommentInput"
-          :label="this.$t('comments.message')"
-          value=""
-        />
+  <div style="display:inline;">
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on }">
         <v-btn
-          class="white--text"
-          color="green"
-          depressed
-          :disabled="message.length === 0"
-          @click="add"
+          class="text-capitalize ps-1 pe-1"
+          min-width="36"
+          icon
+          v-on="on"
+          @click="dialog=true"
         >
-          {{ this.$t('comments.send') }}
+          <v-icon>
+            mdi-chat
+          </v-icon>
         </v-btn>
-      </v-timeline-item>
-      <comment
-        v-for="comment in comments"
-        :key="comment.id"
-        :comment="comment"
-        :user-id="userId"
-        @delete-comment="remove"
-        @update-comment="update"
-      />
-    </v-timeline>
+      </template>
+      <span>{{ $t('annotation.commentTooltip') }}</span>
+    </v-tooltip>
+    <v-dialog
+      v-model="dialog"
+      width="800"
+    >
+      <base-card
+        :title="$t('comments.comments')"
+        :cancel-text="$t('generic.close')"
+        @cancel="dialog=false"
+      >
+        <template #content>
+          <v-form>
+            <v-textarea
+              v-model="message"
+              auto-grow
+              hide-details
+              outlined
+              rows="1"
+              name="CommentInput"
+              :label="$t('comments.message')"
+            />
+            <v-btn
+              class="white--text text-capitalize mt-3"
+              color="primary"
+              depressed
+              :disabled="message.length === 0"
+              @click="add"
+            >
+              {{ $t('comments.send') }}
+            </v-btn>
+          </v-form>
+          <comment
+            v-for="comment in comments"
+            :key="comment.id"
+            :comment="comment"
+            :user-id="userId"
+            @delete-comment="remove"
+            @update-comment="update"
+          />
+        </template>
+      </base-card>
+    </v-dialog>
   </div>
 </template>
 
 <script>
-
 import { mapActions, mapState, mapMutations } from 'vuex'
+import BaseCard from '@/components/molecules/BaseCard'
 import Comment from './Comment'
 
 export default {
-  name: 'CommentSection',
-  components: { Comment },
+  components: {
+    BaseCard,
+    Comment
+  },
   fetch() {
     this.getMyUserId()
   },
   data() {
     return {
+      dialog: false,
       message: ''
     }
   },
@@ -110,5 +130,4 @@ export default {
     ...mapMutations('comments', ['updateSelectedComments'])
   }
 }
-
 </script>
diff --git a/frontend/components/containers/comments/CommentList.vue b/frontend/components/containers/comments/CommentList.vue
index 336c7f2e..a41d82b1 100644
--- a/frontend/components/containers/comments/CommentList.vue
+++ b/frontend/components/containers/comments/CommentList.vue
@@ -107,6 +107,5 @@ export default {
     ...mapActions('comments', ['getProjectCommentList']),
     ...mapMutations('comments', ['updateSelectedComments'])
   }
-
 }
 </script>
diff --git a/frontend/layouts/annotation.vue b/frontend/layouts/annotation.vue
index 0e4c5183..e5450842 100644
--- a/frontend/layouts/annotation.vue
+++ b/frontend/layouts/annotation.vue
@@ -58,6 +58,7 @@
             />
             <guideline-button />
             <clear-annotations-button />
+            <comment-button />
             <settings
               v-model="options"
               :errors="errors"
@@ -81,11 +82,6 @@
             />
           </v-col>
         </v-row>
-        <v-row>
-          <v-col cols="12" md="9">
-            <comment-section />
-          </v-col>
-        </v-row>
       </v-container>
       <v-container
         v-else
@@ -117,7 +113,7 @@ import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
 import FilterButton from '@/components/containers/annotation/FilterButton'
 import ApproveButton from '@/components/containers/annotation/ApproveButton'
-import CommentSection from '../components/containers/comments/CommentSection.vue'
+import CommentButton from '../components/containers/comments/CommentButton.vue'
 import Pagination from '~/components/containers/annotation/Pagination'
 import TheHeader from '~/components/organisms/layout/TheHeader'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
@@ -136,7 +132,7 @@ export default {
     ApproveButton,
     MetadataBox,
     ClearAnnotationsButton,
-    CommentSection,
+    CommentButton,
     Settings
   },