diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index 23ceb330137497185cab3ec62865041a8e58cc28..c7fea105dc9ea0b64f996f5c425e0be6e81e93cb 100644
--- a/src/app/comment-list/comment-list.component.html
+++ b/src/app/comment-list/comment-list.component.html
@@ -1,22 +1,22 @@
 <div fxLayout="row" fxLayoutAlign="center">
   <div fxLayout="column" fxLayoutGap="20">
       <div *ngFor="let comment of comments">
-        <mat-card (click)="setRead(comment)">
+        <mat-card>
           <mat-card-content>
-            <div class="comment-body">
-              <h3>{{comment.subject}}</h3><br>
+            <h3>{{comment.subject}}</h3>
 
-              {{comment.body}}
+            {{comment.body}}
 
-              <div *ngIf="!comment.read" class="not-check-icon" matTooltip="Is not read">
-                <i class="material-icons">clear</i>
-              </div>
-              <div *ngIf="comment.read" class="check-icon" matTooltip="Is read">
-                <i class="material-icons">check</i>
-              </div>
-              <div class="trash-icon" matTooltip="Delete">
-                <i class="material-icons" (click)="delete(comment)">delete</i>
-              </div>
+            <div class="body-buttons">
+              <button *ngIf="!comment.read" mat-fab color="warn" matTooltip="Is not read" (click)="setRead(comment)">
+                <mat-icon>clear</mat-icon>
+              </button>
+              <button *ngIf="comment.read" mat-fab color="primary" matTooltip="Is read" (click)="setRead(comment)">
+                <mat-icon>check</mat-icon>
+              </button>
+              <button class="trash-icon" mat-fab color="primary" matTooltip="Delete" (click)="delete(comment)">
+                <mat-icon>delete</mat-icon>
+              </button>
             </div>
           </mat-card-content>
           <mat-card-footer>
@@ -27,6 +27,6 @@
         </mat-card><br>
       </div>
 
-    <button mat-raised-button color="primary" (click)="goBack()">Back</button>
+    <button class="back-button" mat-raised-button color="primary" (click)="goBack()">Back</button>
   </div>
 </div>
diff --git a/src/app/comment-list/comment-list.component.scss b/src/app/comment-list/comment-list.component.scss
index 78e71021f46ecad8aaccbb9fc611f16f7eea1689..45057a7719fe6aada402b81e05fd18986682f48c 100644
--- a/src/app/comment-list/comment-list.component.scss
+++ b/src/app/comment-list/comment-list.component.scss
@@ -3,8 +3,8 @@ mat-card {
   justify-content: center;
 }
 
-button {
-  min-width: 800px;
+mat-card-content {
+  min-height: 100px;
 }
 
 mat-card:hover {
@@ -12,37 +12,18 @@ mat-card:hover {
   transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 300ms cubic-bezier(.3,0,.2,1);
 }
 
-.not-check-icon {
-  color: red;
-  position: absolute;
-  top: 30%;
-  left: 96%;
-  border-radius: 50%;
-  width: 25px;
-  height: 25px;
-  background: lightcoral;
+.trash-icon:hover {
+  background: #F44336;
 }
 
-.check-icon {
-  color: green;
-  position: absolute;
-  top: 30%;
-  left: 96%;
-  border-radius: 50%;
-  width: 25px;
-  height: 25px;
-  background: lightgreen;
+.back-button {
+  min-width: 800px;
 }
 
-.trash-icon {
-  color: red;
+.body-buttons {
   position: absolute;
-  top: 50%;
-  left: 96%;
-  border-radius: 50%;
-  width: 25px;
-  height: 25px;
-  background: lightcoral;
+  top: 10%;
+  left: 92%;
 }
 
 .date {