diff --git a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html
index d646663a6ca270e88dd40022d1a1d9310196934b..f1efc0029836bb03fb372efdbad31eb927db3659 100644
--- a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html
+++ b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.html
@@ -1,3 +1,20 @@
-<p>
-  statistic-help works!
-</p>
+<mat-chip-list class="mat-chip-list-stacked">
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+    <mat-chip class="positiveC">
+      Good
+    </mat-chip>
+    <h3> > 85 % </h3>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+    <mat-chip class="okayC">
+      Okay
+    </mat-chip>
+    <h3> > 50 % </h3>
+  </div>
+  <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px">
+    <mat-chip class="negativeC">
+      Improvable
+    </mat-chip>
+    <h3> < 50 % </h3>
+  </div>
+</mat-chip-list>
diff --git a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..d1a486c7a24567dd38bdcec9c5a25ee66d63cf6d 100644
--- a/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
+++ b/src/app/components/shared/_dialogs/statistic-help/statistic-help.component.scss
@@ -0,0 +1,17 @@
+.positiveC {
+  background-color: #AED581;
+}
+
+.negativeC {
+  background-color: #FF8A65;
+}
+
+.okayC {
+  background-color: #FFD54F;
+}
+
+mat-chip {
+  width: 100px!important;
+  display: flex;
+  justify-content: center;
+}