diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 50d647593f9dd73bf9a6d71b49ad9ced8349c3b6..21673e72b261b19659acc810ab35420524a5bac7 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -67,6 +67,9 @@ import { ParticipantHomeScreenComponent } from './participant-home-screen/partic
 import { ParticipantRoomComponent } from './participant-room/participant-room.component';
 import { DataStoreService } from './data-store.service';
 import { CreatorRoomComponent } from './creator-room/creator-room.component';
+import { ContentDetailComponent } from './content-detail/content-detail.component';
+import { ContentListComponent } from './content-list/content-list.component';
+import { ContentService } from './content.service';
 
 @NgModule({
   declarations: [
@@ -89,7 +92,9 @@ import { CreatorRoomComponent } from './creator-room/creator-room.component';
     CommentListComponent,
     ContentAnswersComponent,
     ParticipantRoomComponent,
-    CreatorRoomComponent
+    CreatorRoomComponent,
+    ContentDetailComponent,
+    ContentListComponent
   ],
   entryComponents: [
     RegisterComponent,
@@ -145,7 +150,8 @@ import { CreatorRoomComponent } from './creator-room/creator-room.component';
     AuthenticationGuard,
     DataStoreService,
     RoomService,
-    CommentService
+    CommentService,
+    ContentService
   ],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/content-detail/content-detail.component.html b/src/app/content-detail/content-detail.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f820ab22714ed8b15986078ad41aa7105ced49bf
--- /dev/null
+++ b/src/app/content-detail/content-detail.component.html
@@ -0,0 +1,11 @@
+<mat-list *ngIf="content">
+  <mat-list-item>ID: {{content.id}}</mat-list-item>
+  <mat-list-item>Revision: {{content.revision}}</mat-list-item>
+  <mat-list-item>Room ID: {{content.roomId}}</mat-list-item>
+  <mat-list-item>Subject: {{content.subject}}</mat-list-item>
+  <mat-list-item>Body: {{content.body}}</mat-list-item>
+  <mat-list-item>Round: {{content.round}}</mat-list-item>
+  <mat-list-item>Format: {{content.format}}</mat-list-item>
+  <mat-list-item>FormatAttributes: {{content.formatAttributes}}</mat-list-item> 
+</mat-list>
+
diff --git a/src/app/content-detail/content-detail.component.scss b/src/app/content-detail/content-detail.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/content-detail/content-detail.component.spec.ts b/src/app/content-detail/content-detail.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00c63bd7d7ddfeacfa0920a868069c46f44186f8
--- /dev/null
+++ b/src/app/content-detail/content-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentDetailComponent } from './content-detail.component';
+
+describe('ContentDetailComponent', () => {
+  let component: ContentDetailComponent;
+  let fixture: ComponentFixture<ContentDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContentDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/content-detail/content-detail.component.ts b/src/app/content-detail/content-detail.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ddb5355654cee697d0298aac88de57a50cec1c5
--- /dev/null
+++ b/src/app/content-detail/content-detail.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Content } from '../content';
+import { ContentService } from '../content.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.scss']
+})
+export class ContentDetailComponent implements OnInit {
+  content: Content = null;
+
+  constructor(
+    private contentCreationService: ContentService,
+    private route: ActivatedRoute
+  ) { }
+
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.getContent(params['id']);
+    });
+  }
+
+  getContent(id: string): void {
+    this.contentCreationService.getContent(id)
+      .subscribe(content => this.content = content);
+  }
+}
diff --git a/src/app/content-list/content-list.component.html b/src/app/content-list/content-list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..4bca2af658745f293e2c9df890fdd22b381b1d4f
--- /dev/null
+++ b/src/app/content-list/content-list.component.html
@@ -0,0 +1,7 @@
+<mat-list>
+  <mat-list-item *ngFor="let content of contents">
+    <button mat-button routerLink="{{content.id}}">
+      Content {{content.id}}: {{content.subject}}
+    </button>
+  </mat-list-item>
+</mat-list>
diff --git a/src/app/content-list/content-list.component.scss b/src/app/content-list/content-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/content-list/content-list.component.spec.ts b/src/app/content-list/content-list.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8d2e87b6ef5ee8443e45c30749ba5211b0fc32e
--- /dev/null
+++ b/src/app/content-list/content-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentListComponent } from './content-list.component';
+
+describe('ContentListComponent', () => {
+  let component: ContentListComponent;
+  let fixture: ComponentFixture<ContentListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContentListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/content-list/content-list.component.ts b/src/app/content-list/content-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..65866388af42a28c285a154e5c6506812ec2eb03
--- /dev/null
+++ b/src/app/content-list/content-list.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ContentService } from '../content.service';
+import { Content } from '../content';
+
+@Component({
+  selector: 'app-content-list',
+  templateUrl: './content-list.component.html',
+  styleUrls: ['./content-list.component.scss']
+})
+export class ContentListComponent implements OnInit {
+  contents: Content[];
+
+  constructor(private contentCreationService: ContentService) { }
+
+  ngOnInit() {
+    this.getContents();
+  }
+
+  getContents(): void {
+    this.contentCreationService.getContents()
+    .subscribe(contents => {
+      this.contents = contents;
+    });
+  }
+}
diff --git a/src/app/content.service.spec.ts b/src/app/content.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4ba03d0804f87f8ff930553201fd0718ddd050b2
--- /dev/null
+++ b/src/app/content.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ContentService } from './content.service';
+
+describe('ContentService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ContentService]
+    });
+  });
+
+  it('should be created', inject([ContentService], (service: ContentService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/content.service.ts b/src/app/content.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..438e9f5e9ecb5eb026fa78be0ec80f8feee27165
--- /dev/null
+++ b/src/app/content.service.ts
@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { Content } from './content';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { catchError, tap } from 'rxjs/operators';
+import { ErrorHandlingService } from './error-handling.service';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+};
+
+@Injectable()
+export class ContentService extends ErrorHandlingService {
+
+  private contentUrl = 'api/contents';
+
+  constructor(private http: HttpClient) {
+    super();
+  }
+
+  getContents(): Observable<Content[]> {
+    return this.http.get<Content[]>(this.contentUrl).pipe(
+      tap(_ => ''),
+      catchError(this.handleError('getContents', []))
+    );
+  }
+
+  addContent(content: Content): Observable<Content> {
+    return this.http.post<Content>(this.contentUrl, content, httpOptions).pipe(
+      tap(_ => ''),
+      catchError(this.handleError<Content>('addContent'))
+    );
+  }
+
+  getContent(id: string): Observable<Content> {
+    const url = `${this.contentUrl}/${id}`;
+    return this.http.get<Content>(url).pipe(
+      tap(_ => ''),
+      catchError(this.handleError<Content>(`getContent id=${id}`))
+    );
+  }
+
+}
diff --git a/src/app/content.ts b/src/app/content.ts
index 4b75ceb17fad81abac090104d3a8ee36ca935f0d..f8598abc8254bcb4103c010ea82ef021f613ee5c 100644
--- a/src/app/content.ts
+++ b/src/app/content.ts
@@ -15,6 +15,6 @@ export class Content {
   body: string;
   round: number;
   format: Format;
-  formatAttributes: Map<string, string>;
+  //formatAttributes: Map<string, string>;
 }