diff --git a/src/client/api/APIDocument.js b/src/client/api/APIDocument.js
index 2c1149bf..b5ee6cfc 100644
--- a/src/client/api/APIDocument.js
+++ b/src/client/api/APIDocument.js
@@ -10,4 +10,9 @@ export default class APIDocument extends EndPoint {
         let url = '/documents/type/award';
         return this.get(url);
     }
+
+    id(id){
+        let url = `/documents/${id}`;
+        return this.get(url);
+    }
 }
\ No newline at end of file
diff --git a/src/client/app.js b/src/client/app.js
index dadddbc7..7918949c 100644
--- a/src/client/app.js
+++ b/src/client/app.js
@@ -31,6 +31,7 @@ import PageTeacher from './components/PageTeacher';
 import PageGallery from './components/PageGallery';
 import PageAlbum from './components/PageAlbum';
 import PageDocuments from './components/PageDocuments';
+import PageDocument from './components/PageDocument';
 
 import AppController from './controllers/AppController';
 import CopyrightController from './controllers/CopyrightController';
@@ -177,6 +178,19 @@ app.config(($locationProvider, $routeProvider) => {
                         return sortByPattern(i, documentsSortPattern, i => i.category);
                     })
             }
+        },
+        {
+            name: '/documents/:id',
+            template: '<page-document item="$resolve.document"></page-document>',
+            resolve: {
+                document: ($route, api) => {
+                    let id = $route.current.params.id;
+
+                    return api.document
+                        .id(id)
+                        .then(i => i.data)
+                }
+            }
         }
     ]
         .map(i => {
@@ -246,6 +260,7 @@ app.run(($location, $rootScope, $http) => {
     PageGallery,
     PageAlbum,
     PageDocuments,
+    PageDocument,
     AppController,
     CopyrightController,
     ContactsController,
diff --git a/src/client/components/Document.js b/src/client/components/Document.js
index 2c7a8973..988be0b7 100644
--- a/src/client/components/Document.js
+++ b/src/client/components/Document.js
@@ -3,11 +3,15 @@ import template from '../../templates/components/document.html';
 export default function (app) {
     app.component('document', {
         bindings: {
-            document: '<'
+            document: '<',
+            preview: '@'
         },
         controllerAs: '$',
         controller: function () {
-            this.previewUrl = this.document.preview.data.medium.url;
+            const size = this.preview || 'medium';
+            this.imageClass = `document__image--${size}`;
+            
+            this.previewUrl = this.document.preview.data[size].url;
             this.file = this.document.file;
         },
         template: template
diff --git a/src/client/components/PageDocument.js b/src/client/components/PageDocument.js
new file mode 100644
index 00000000..a65a372e
--- /dev/null
+++ b/src/client/components/PageDocument.js
@@ -0,0 +1,12 @@
+import template from '../../templates/components/page-document.html';
+import {unique} from '../../utils/common';
+
+export default function (app) {
+    app.component('pageDocument', {
+        bindings: {
+            item: '<'
+        },
+        template: template,
+        controllerAs: '$'
+    });
+};
\ No newline at end of file
diff --git a/src/client/components/PageDocuments.js b/src/client/components/PageDocuments.js
index ca1735c3..d38c9898 100644
--- a/src/client/components/PageDocuments.js
+++ b/src/client/components/PageDocuments.js
@@ -10,7 +10,6 @@ export default function (app) {
         template: template,
         controllerAs: '$',
         controller: function () {
-            this.pageClass = 'page-documents';
             let categories = unique(i => i.category);
 
             this.collections = [];
diff --git a/src/routes/documents.js b/src/routes/documents.js
index bf734d54..c9094f26 100644
--- a/src/routes/documents.js
+++ b/src/routes/documents.js
@@ -1,8 +1,12 @@
-import co from 'co';
 import route from 'koa-route';
-import {json} from './';
+import {index, json, accepts} from './';
 import {c} from '../core/db';
 
+function* exists(id) {
+    let i = yield c('documents').findOne({id: id});
+    return i ? true : false;
+}
+
 export default function (app) {
     [
         [
@@ -36,6 +40,21 @@ export default function (app) {
                     this.status = 404;
                 }
             }
+        ],
+        [
+            '/documents/:id',
+            accepts({
+                'text/html': index(exists),
+                'text/plain': index(exists),
+                'application/json': function* (id) {
+                    let i = yield c('documents').findOne({id: id});
+                    if (!i) this.status = 404;
+                    else {
+                        i = yield populateDocPreview(i);
+                        this.body = i;
+                    }
+                }
+            })
         ]
     ].forEach(item => {
         let [path, fn] = item;
diff --git a/src/style/components/document.scss b/src/style/components/document.scss
index 4b3d145d..30d86a77 100644
--- a/src/style/components/document.scss
+++ b/src/style/components/document.scss
@@ -13,14 +13,20 @@
 }
 
 .document__image{
-  max-width: 7.5em;
-
   img {
     width: 100%;
     box-shadow: $white-shadow;
   }
 }
 
+.document__image--medium{
+  max-width: 7.5em;
+}
+
+.document__image--big{
+  max-width: 20em;
+}
+
 @media (max-width: $mobile-width) {
   .document {
     margin: 0 $single-margin/2 $single-margin;
diff --git a/src/templates/components/document.html b/src/templates/components/document.html
index 396a59c3..ddd3c544 100644
--- a/src/templates/components/document.html
+++ b/src/templates/components/document.html
@@ -1,12 +1,11 @@
 <div class="document">
-    <div class="document__image">
+    <div class="document__image {{$.imageClass}}">
         <a href="{{$.document.url}}" target="_blank" class="invisible">
-            <img ng-src="{{$.previewUrl}}">
+            <img ng-src="{{$.previewUrl}}" alt="{{$.document.title}}">
         </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>
diff --git a/src/templates/components/page-document.html b/src/templates/components/page-document.html
new file mode 100644
index 00000000..99942292
--- /dev/null
+++ b/src/templates/components/page-document.html
@@ -0,0 +1,9 @@
+<div class="content content_wide content--padding-top--menu">
+    <div>
+        <h2>{{$.item.name}}</h2>
+
+        <div class="documents-container">
+            <document document="$.item" preview="big"></document>
+        </div>
+    </div>
+</div>