diff --git a/src/app/components/creator/content-presentation/content-presentation.component.html b/src/app/components/creator/content-presentation/content-presentation.component.html
index ad62d8f33f76a0f27aae4f7ef8c01a1b3e433de2..c2e6ac40eb4e4fccdffe554f04394f39127d84f2 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.html
+++ b/src/app/components/creator/content-presentation/content-presentation.component.html
@@ -1,3 +1,15 @@
-<p>
-  content-presentation works!
-</p>
+<div fxLayout="column" fxLayoutAlign="start center">
+  <mat-tab-group>
+      <mat-tab fxLayoutAlign="center" *ngFor="let content of contents" label="{{content.subject}}">
+        <mat-card>
+          <mat-card-content>
+            <h3>{{content.body}}</h3>
+            <mat-divider></mat-divider>
+            <div class="answers" *ngFor="let answer of content.options; let i = index">
+              <h4>{{labels[i]}} : {{answer.label}}</h4>
+            </div>
+          </mat-card-content>
+        </mat-card>
+      </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.scss b/src/app/components/creator/content-presentation/content-presentation.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..8b0580e3b3bca45d557bc0bbf884d70074a25fbd 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.scss
+++ b/src/app/components/creator/content-presentation/content-presentation.component.scss
@@ -0,0 +1,30 @@
+mat-tab-group {
+  width: 100%;
+  max-width: 800px;
+}
+
+.tab-container {
+  padding: 20px;
+}
+
+mat-card {
+  width: 800px;
+  max-width: 90%;
+  margin-top: 20px;
+  background-color: #fff8e1;
+}
+
+h3 {
+  font-size: 150%;
+  color: #26a69a;
+}
+
+h4 {
+  padding-top: 10%;
+  font-size: 120%;
+  margin: 0px;
+}
+
+.answers:last-child {
+  padding-bottom: 5%;
+}
diff --git a/src/app/components/creator/content-presentation/content-presentation.component.ts b/src/app/components/creator/content-presentation/content-presentation.component.ts
index 577bcc06a3a9ea8313118a272060332028760766..e070286e496cd177d51ca4223ce25bfb17d95556 100644
--- a/src/app/components/creator/content-presentation/content-presentation.component.ts
+++ b/src/app/components/creator/content-presentation/content-presentation.component.ts
@@ -1,3 +1,6 @@
+import { ContentChoice } from './../../../models/content-choice';
+import { ContentService } from './../../../services/http/content.service';
+import { ContentGroup } from './../../../models/content-group';
 import { Component, OnInit } from '@angular/core';
 
 @Component({
@@ -7,9 +10,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ContentPresentationComponent implements OnInit {
 
-  constructor() { }
+  contents: ContentChoice[];
+  contentGroup: ContentGroup;
+  labels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+
+  constructor(private contentService: ContentService) {
+  }
 
   ngOnInit() {
+      this.contentGroup = JSON.parse(sessionStorage.getItem('contentGroup'));
+      this.contentService.getContentChoiceByIds(this.contentGroup.contentIds).subscribe( contents => {
+        this.contents = contents;
+      });
   }
 
 }