diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 7ab27fe5f8bb2ab55fccdcd8febab6c258519eab..7b031df2c20ff8d6baffc67d32e28a070cfb503b 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -121,6 +121,7 @@ export class CommentListComponent implements OnInit, OnDestroy {
           this.commentService.getAckComments(this.room.id)
             .subscribe(comments => {
               this.comments = comments;
+              console.log(comments);
               this.getComments();
             });
           /**
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 69ac3377069d5a9a3613d1e1187b9cc3490f4967..6c9556f8e33978a187c9f4e4638cdd0506bb6190 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -6,6 +6,9 @@
           }"
           [@slide]="slideAnimationState"
           (@slide.done)="changeSlideState()">
+  <div class="runningnum-outer">
+    <p>{{comment.number}}</p>
+  </div>
   <div fxLayout="column">
     <div fxLayout="row"
          class="comment-actions">
diff --git a/src/app/components/shared/comment/comment.component.scss b/src/app/components/shared/comment/comment.component.scss
index 7004a7652ad8b452db43e62d7cee10bf7729d914..75718bc244d9183d9f6ba57b0256ec2e490a9aff 100644
--- a/src/app/components/shared/comment/comment.component.scss
+++ b/src/app/components/shared/comment/comment.component.scss
@@ -265,6 +265,30 @@ button:focus {
   border: 1px solid var(--on-surface);
 }
 
+:host{
+  .runningnum-outer{
+    width:100%;
+    height:0px;
+    background-color:red;
+    position:absolute;
+    >p{
+      font-size:200px;
+      padding:0;
+      margin:0;
+      font-weight:normal;
+      font-style:normal;
+      font-family:Roboto, 'sans-serif';
+      margin-top:-50px;
+      margin-right:32px;
+      color:var(--on-surface);
+      opacity:0.1;
+      float:right;
+      position:relative;
+      z-index:-2;
+    }
+  }
+}
+
 :host ::ng-deep {
   .images img {
     max-width: 100% !important;
diff --git a/src/app/components/shared/comment/comment.component.ts b/src/app/components/shared/comment/comment.component.ts
index 0309560a163b0dcfe15768c2889b8d2783b07f93..927669eaecc3ac1e003be37441cbf226ee26987e 100644
--- a/src/app/components/shared/comment/comment.component.ts
+++ b/src/app/components/shared/comment/comment.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Output, OnInit, EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, Input, Output, OnInit, EventEmitter, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
 import { Comment } from '../../../models/comment';
 import { Vote } from '../../../models/vote';
 import { AuthenticationService } from '../../../services/http/authentication.service';
diff --git a/src/app/models/comment.ts b/src/app/models/comment.ts
index d6ced809dd26a40403f73044c296ce319addcb3e..8a1548c9a2e56fd8dffb4929f1eb678639d89fb4 100644
--- a/src/app/models/comment.ts
+++ b/src/app/models/comment.ts
@@ -1,4 +1,5 @@
 import { CorrectWrong } from './correct-wrong.enum';
+import { ViewChild } from '@angular/core';
 
 export class Comment {
   id: string;
@@ -17,6 +18,7 @@ export class Comment {
   tag: string;
   answer: string;
   userNumber: number;
+  number: number;
 
   constructor(roomId: string = '',
               creatorId: string = '',