diff --git a/src/client/api/APIDocument.js b/src/client/api/APIDocument.js
index ccc65a0f..25e8b6ac 100644
--- a/src/client/api/APIDocument.js
+++ b/src/client/api/APIDocument.js
@@ -1,8 +1,13 @@
 import EndPoint from './EndPoint';
 
 export default class APIDocument extends EndPoint {
+    documents(){
+        let url = '/documents/type/document';
+        return this.request.get(url, {cache: true});
+    }
+
     awards() {
-        let url = '/documents/awards';
+        let url = '/documents/type/award';
         return this.request.get(url, {cache: true});
     }
 }
\ No newline at end of file
diff --git a/src/client/components/Document.js b/src/client/components/Document.js
index eec3ed2e..2c7a8973 100644
--- a/src/client/components/Document.js
+++ b/src/client/components/Document.js
@@ -3,10 +3,12 @@ import template from '../../templates/components/document.html';
 export default function (app) {
     app.component('document', {
         bindings: {
-            document: '='
+            document: '<'
         },
+        controllerAs: '$',
         controller: function () {
-            //this.testing = 123;
+            this.previewUrl = this.document.preview.data.medium.url;
+            this.file = this.document.file;
         },
         template: template
     });
diff --git a/src/client/components/PageDocuments.js b/src/client/components/PageDocuments.js
index 2d301a86..02e01b68 100644
--- a/src/client/components/PageDocuments.js
+++ b/src/client/components/PageDocuments.js
@@ -1,5 +1,4 @@
 import template from '../../templates/components/page-documents.html';
-import {docs} from '../../models/document';
 
 export default function (app) {
     app.component('pageDocuments', {
@@ -7,7 +6,10 @@ export default function (app) {
         controller: function (api) {
             this.pageClass = 'page-documents';
 
-            this.documents = docs;
+            api.document.documents()
+                .success(data => {
+                    this.documents = data;
+                });
 
             api.document.awards()
                 .success(data => {
diff --git a/src/routes/documents.js b/src/routes/documents.js
index 4ac26da9..d3a69f1b 100644
--- a/src/routes/documents.js
+++ b/src/routes/documents.js
@@ -1,7 +1,7 @@
 import co from 'co';
 import route from 'koa-route';
 import {index, json} from './';
-import db from '../core/db';
+import {c} from '../core/db';
 
 export default function (app) {
     [
@@ -9,25 +9,41 @@ export default function (app) {
             '/documents',
             json(function *() {
                 let query = {};
-                this.body = yield db.c('documents')
+                this.body = yield c('documents')
                     .find(query)
                     .toArray();
             })
         ],
         [
-            '/documents/:type',
-            json(function *(type) {
-                this.body = yield db.c(type)
-                    .find()
-                    .toArray();
-            })
-        ],
-        [
-            '/document/:doc',
-            index('../templates/document.html')
+            '/documents/type/:type',
+            function *(type) {
+                let types = {
+                    'document': ['documents', {type: 'document'}, populateDocPreview],
+                    'award': ['awards', {}]
+                };
+
+                if (type in types) {
+                    let [collection, query, mapFn] = types[type];
+
+                    let docs = yield c(collection)
+                        .find(query)
+                        .toArray();
+
+                    if (mapFn) docs = yield docs.map(mapFn);
+
+                    this.body = docs;
+                } else {
+                    this.status = 404;
+                }
+            }
         ]
     ].forEach(item => {
         let [path, fn] = item;
         app.use(route.get(path, fn));
     });
 };
+
+function* populateDocPreview(doc) {
+    doc.preview = yield c('images').findOne({_id: doc.preview});
+    return doc;
+}
diff --git a/src/style/components/document.scss b/src/style/components/document.scss
index 88c3c8fb..18b26d1a 100644
--- a/src/style/components/document.scss
+++ b/src/style/components/document.scss
@@ -1,13 +1,23 @@
 @import "../variables";
 
 .document {
-  margin: 0 1.2em $single-margin;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  margin: 0 $single-margin $double-margin;
 
   p {
     text-align: center;
   }
+}
+
+.document__image{
+  max-width: 7.5em;
+
   img {
-    max-width: 100%;
+    width: 100%;
+    box-shadow: $white-shadow;
   }
 }
 
diff --git a/src/style/documents.scss b/src/style/documents.scss
index 455233c0..2b319cfb 100644
--- a/src/style/documents.scss
+++ b/src/style/documents.scss
@@ -1,7 +1,7 @@
 .documents-container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center;
   align-items: baseline;
 }
 
diff --git a/src/templates/components/document.html b/src/templates/components/document.html
index a1f8f4ae..396a59c3 100644
--- a/src/templates/components/document.html
+++ b/src/templates/components/document.html
@@ -1,8 +1,13 @@
 <div class="document">
-    <a href="{{$ctrl.document.url}}" target="_blank" class="invisible">
-        <img ng-src="{{$ctrl.document.preview}}">
-    </a>
-    <p>
-        <a href="{{$ctrl.document.url}}" target="_blank">{{$ctrl.document.title | uppercaseFirst}}</a>
+    <div class="document__image">
+        <a href="{{$.document.url}}" target="_blank" class="invisible">
+            <img ng-src="{{$.previewUrl}}">
+        </a>
+    </div>
+
+    <p class="document__file">{{$.document.title | uppercaseFirst}}</p>
+    <!--<a href="{{$.document.url}}" target="_blank">{{$.document.title | uppercaseFirst}}</a>-->
+    <p class="document__file-info">
+        <a href="{{$.document.url}}" target="_blank">{{$.file.name | ext}} ({{$.file.size | bytes}})</a>
     </p>
 </div>
\ No newline at end of file