diff --git a/front/current/assets/styles/components/_global.scss b/front/current/assets/styles/components/_global.scss
index 3a545ef8819bd59984b2a72a0724f53d3b78cf9b..91d80d85bae943d1e8b5ff888f55fadf3ceeb1d6 100644
--- a/front/current/assets/styles/components/_global.scss
+++ b/front/current/assets/styles/components/_global.scss
@@ -36,7 +36,7 @@ p {
   margin-bottom: 0;
 }
 ul, ol {
-  margin: $leading, 0, $leading, 0;
+  margin: 0;
   padding: 0;
   li {
     line-height: $leading;
diff --git a/front/current/assets/styles/components/_project-list.scss b/front/current/assets/styles/components/_project-list.scss
index b0318b6328ef52371a6b8935709f1b00d37ae7ab..d686899d7a03697511dc4ca23c4b031fb7d47d1e 100644
--- a/front/current/assets/styles/components/_project-list.scss
+++ b/front/current/assets/styles/components/_project-list.scss
@@ -29,4 +29,10 @@ table.projects {
       border-bottom: none;
     }
   }
+
+  ul.document-list {
+    li {
+      list-style: none;
+    }
+  }
 }
diff --git a/front/current/controllers/app/app.component.html b/front/current/components/app/app.component.html
similarity index 100%
rename from front/current/controllers/app/app.component.html
rename to front/current/components/app/app.component.html
diff --git a/front/current/controllers/app/app.component.ts b/front/current/components/app/app.component.ts
similarity index 70%
rename from front/current/controllers/app/app.component.ts
rename to front/current/components/app/app.component.ts
index 2e8070ce6003d5228ed10cc6e3773fd5d04e67eb..d93420fc1a0cbcc6159098f0b0339919620ba882 100644
--- a/front/current/controllers/app/app.component.ts
+++ b/front/current/components/app/app.component.ts
@@ -9,14 +9,18 @@ import { ProjectService } from '../../services/project/project.service';
 
 import { NavComponent } from '../nav/nav.component';
 import { ProjectListComponent } from '../projects/list.component';
+import { DocumentSlotService } from '../../services/project/document-slot.service';
+import { DocumentService } from '../../services/document/document.service';
 
 
 @Component({
   selector: 'my-app',
-  templateUrl: config.static_url + '/controllers/app/app.component.html',
+  templateUrl: config.static_url + '/components/app/app.component.html',
   providers: [
     ROUTER_PROVIDERS,
-    RestService, ProjectService
+    RestService,
+    ProjectService, DocumentSlotService,
+    DocumentService
   ],
   directives: [ROUTER_DIRECTIVES, NavComponent]
 })
diff --git a/front/current/controllers/nav/nav.component.html b/front/current/components/nav/nav.component.html
similarity index 100%
rename from front/current/controllers/nav/nav.component.html
rename to front/current/components/nav/nav.component.html
diff --git a/front/current/controllers/nav/nav.component.ts b/front/current/components/nav/nav.component.ts
similarity index 78%
rename from front/current/controllers/nav/nav.component.ts
rename to front/current/components/nav/nav.component.ts
index 2946a83945017e6e5412730a0fd01343bb7549ca..8e57ad5422d29ca02b54934ab43df2592321795f 100644
--- a/front/current/controllers/nav/nav.component.ts
+++ b/front/current/components/nav/nav.component.ts
@@ -5,7 +5,7 @@ import { config } from '../../config';
 
 @Component({
   selector: 'navigation-bar',
-  templateUrl: config.static_url + '/controllers/nav/nav.component.html',
+  templateUrl: config.static_url + '/components/nav/nav.component.html',
   directives: [ROUTER_DIRECTIVES]
 })
 export class NavComponent {
diff --git a/front/current/components/projects/list.component.html b/front/current/components/projects/list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..187e94232716d823e8a1647db1c2ddbc334faeb8
--- /dev/null
+++ b/front/current/components/projects/list.component.html
@@ -0,0 +1,42 @@
+<table class="projects">
+  <thead>
+    <tr>
+      <th class="project-state">status</th>
+      <th>name</th>
+      <th>documents</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngIf="projects.loading">
+      <td colspan="3" class="table-loader">
+        <i class="icon-spinner rotating"></i>
+      </td>
+    </tr>
+    <tr *ngIf="projects.error">
+      <td colspan="3" class="error">
+        {{ projects.error['status'] }}: {{ projects.error['short'] }}
+      </td>
+    </tr>
+    <tr *ngFor="#project of projects.models">
+      <td class="project-state" [attr.data-state]="project.data['state']">
+        {{ project.data['state'] }}
+      </td>
+      <td>{{ project.data['name'] }}</td>
+      <td>
+        <ul class="document-list">
+          <li *ngIf="documentSlots.loading">
+            <i class="icon-spinner rotating"></i>
+          </li>
+          <li *ngFor="#documentSlot of getDocumentSlotsForProject(project).models">
+            <document *ngIf="documents.loading">
+              <i class="icon-spinner rotating"></i>
+            </document>
+            <document *ngIf="!documents.loading">
+              {{ getDocumentForDocumentSlot(documentSlot).data['name'] }}
+            </document>
+          </li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
diff --git a/front/current/components/projects/list.component.ts b/front/current/components/projects/list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35cf76c72433338a0499499c2d4e8f51ded4e47d
--- /dev/null
+++ b/front/current/components/projects/list.component.ts
@@ -0,0 +1,88 @@
+import { Component, OnInit } from 'angular2/core';
+import { Router } from 'angular2/router';
+
+import { config } from '../../config';
+import { RestService, Model, Collection } from '../../services/rest.service';
+
+import { ProjectService } from '../../services/project/project.service';
+import { DocumentSlotService } from '../../services/project/document-slot.service';
+import { DocumentService } from '../../services/document/document.service';
+
+@Component({
+  selector: 'project-list',
+  templateUrl: config.static_url + '/components/projects/list.component.html'
+})
+export class ProjectListComponent implements OnInit{
+  constructor(
+      private _router:Router,
+      private _restService:RestService,
+
+      private _projectService:ProjectService,
+      private _documentSlotService:DocumentSlotService,
+      private _documentService:DocumentService
+    ) {};
+
+  public projects:Collection;
+  public documentSlots:Collection;
+  public documents:Collection;
+
+  errorMessage:string;
+
+  ngOnInit() {
+    this.fetch();
+  };
+
+  public getDocumentSlotsForProject(project:Model):Collection {
+    let documentSlots = [];
+    let collection = this._restService.Collection(this._documentSlotService, []);
+
+    for (let documentSlot of this.documentSlots.models) {
+      if (documentSlot.data['project_id'] == project.data['id'])
+        documentSlots.push(documentSlot);
+    }
+
+    collection.models = documentSlots;
+    return collection;
+  };
+
+  public getDocumentForDocumentSlot(documentSlot:Model):Model {
+    for (let document_ of this.documents.models) {
+      if (document_.data['key'] == documentSlot.data['document_key']) {
+        return document_;
+      }
+    }
+  };
+
+  fetch() {
+    let self = this;
+
+    self.projects = self._restService.Collection(self._projectService, []);
+    self.documentSlots = self._restService.Collection(self._documentSlotService, []);
+    self.documents = self._restService.Collection(self._documentService, []);
+
+    self.projects.fetch(() => {
+      let keys = [];
+
+      for (let project of self.projects.models) {
+        let key = project.data['key'];
+        if (keys.indexOf(key) == -1)
+          keys.push(key)
+      }
+
+      self.documentSlots
+        .setFilters({project_ids: keys})
+        .fetch(() => {
+          let keys = [];
+
+          for (let document_slot of self.documentSlots.models) {
+            let key = document_slot['document_key'];
+            keys.push(key);
+          }
+
+          self.documents
+            .setFilters({keys: keys})
+            .fetch();
+        });
+    });
+  };
+};
diff --git a/front/current/controllers/projects/list.component.html b/front/current/controllers/projects/list.component.html
deleted file mode 100644
index e4688aeb55e83b51d77c515317e4e409d50255c9..0000000000000000000000000000000000000000
--- a/front/current/controllers/projects/list.component.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<table class="projects">
-  <thead>
-    <tr>
-      <th class="project-state">status</th>
-      <th>name</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr *ngIf="projects.loading">
-      <td colspan="2" class="table-loader">
-        <i class="icon-spinner rotating"></i>
-      </td>
-    </tr>
-    <tr *ngIf="projects.error">
-      <td colspan="2" class="error">
-        {{ projects.error['status'] }}: {{ projects.error['short'] }}
-      </td>
-    </tr>
-    <tr *ngFor="#project of projects.models">
-      <td class="project-state" [attr.data-state]="project.data['state']">
-        {{ project.data['state'] }}
-      </td>
-      <td>{{ project.data['name'] }}</td>
-    </tr>
-  </tbody>
-</table>
diff --git a/front/current/controllers/projects/list.component.ts b/front/current/controllers/projects/list.component.ts
deleted file mode 100644
index 212d18444c82522d238cc8bcd8cb43df9f463aeb..0000000000000000000000000000000000000000
--- a/front/current/controllers/projects/list.component.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component, OnInit } from 'angular2/core';
-import { Router } from 'angular2/router';
-
-import { config } from '../../config';
-import { RestService, Model, Collection } from '../../services/rest.service';
-import { ProjectService } from '../../services/project/project.service';
-
-@Component({
-  selector: 'project-list',
-  templateUrl: config.static_url + '/controllers/projects/list.component.html'
-})
-export class ProjectListComponent implements OnInit{
-  constructor(
-      private _router:Router,
-      private _restService:RestService,
-      private _projectService:ProjectService
-    ) {};
-
-  public projects:Collection;
-  public selectedProject:Model;
-
-  errorMessage:string;
-
-  ngOnInit() {
-    this.fetch();
-  }
-
-  fetch() {
-    (this.projects = this._restService.Collection(this._projectService, []))
-      .fetch();
-  };
-}
diff --git a/front/current/main.ts b/front/current/main.ts
index 0404bf4986e81ca08598e5f6609aa95d6a809d6e..ddb323b7ff38c0f55c842cd96107b30887e0ba11 100644
--- a/front/current/main.ts
+++ b/front/current/main.ts
@@ -1,6 +1,6 @@
 import { bootstrap } from 'angular2/platform/browser';
 import { HTTP_PROVIDERS } from 'angular2/http';
-import { AppComponent } from './controllers/app/app.component';
+import { AppComponent } from './components/app/app.component';
 
 import 'rxjs/Rx';
 
diff --git a/front/current/services/document/document.service.ts b/front/current/services/document/document.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3850b181560a6207a7fc80462fc38bfab3a7244e
--- /dev/null
+++ b/front/current/services/document/document.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from 'angular2/core';
+import { config } from '../../config';
+
+@Injectable()
+export class DocumentService {
+  public config:any = config.SERVICES.document;
+  public url:string = '/document/';
+};
diff --git a/front/current/services/project/document-slot.service.ts b/front/current/services/project/document-slot.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8f0960f7773f2c690af3cfc35aff40c7d5520d02
--- /dev/null
+++ b/front/current/services/project/document-slot.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from 'angular2/core';
+import { config } from '../../config';
+
+@Injectable()
+export class DocumentSlotService {
+  public config:any = config.SERVICES.project;
+  public url:string = '/project/document/';
+};
diff --git a/front/current/services/project/project.service.ts b/front/current/services/project/project.service.ts
index 1c69e6ec28414fe3f274e61283c60cd57f9089e3..d41e5b77495419f7e530378e83ce3aa8f59c423b 100644
--- a/front/current/services/project/project.service.ts
+++ b/front/current/services/project/project.service.ts
@@ -1,7 +1,5 @@
 import { Injectable } from 'angular2/core';
-
 import { config } from '../../config';
-import { RestService } from '../rest.service';
 
 @Injectable()
 export class ProjectService {
diff --git a/front/current/services/rest.service.ts b/front/current/services/rest.service.ts
index aa18f4cf1b22e11b5ff50cf54441f41e04e4f17e..452da54143e92981b2ed0b1f10a6c873172e6141 100644
--- a/front/current/services/rest.service.ts
+++ b/front/current/services/rest.service.ts
@@ -50,13 +50,14 @@ export class Model {
     this.error = response.json();
   };
 
-  fetch() {
+  fetch(observer?) {
     // Update a model from the server.
     let self = this;
     self.loading = true;
     self.error = undefined;
     return (self._http.get(self.url, {headers: config.HEADERS})
-      .subscribe(self.parse.bind(self), self.setError.bind(self), () => { self.loading = false; }));
+      .do(self.parse.bind(self), self.setError.bind(self), () => { self.loading = false; })
+      .subscribe(observer));
   };
   save():Observable<Model> {
     // Save a model to the server.
@@ -124,13 +125,14 @@ export class Collection {
     this.error = response.json();
   };
 
-  fetch() {
+  fetch(observer?) {
     // Get a list of models from the server.
     let self = this;
     self.loading = true;
     self.error = undefined;
     return (self._http.get(self.url, {headers: config.HEADERS})
-      .subscribe(self.parse.bind(self), self.setError.bind(self), () => { self.loading = false; }));
+      .do(self.parse.bind(self), self.setError.bind(self), () => { self.loading = false; })
+      .subscribe(observer));
   };
 };