diff --git a/app/components/document_version.hbs b/app/components/document_version.hbs
deleted file mode 100644
index 9ff07f1c311be0c0717e10042c6a7e47889ca25c..0000000000000000000000000000000000000000
--- a/app/components/document_version.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-Page Count = {{@model.document_version.page_count}}
-
-<div class="d-flex flex-column">
-  {{#each @model.pages as |page|}}
-    <Page @page={{page}} />
-  {{/each}}
-</div>
diff --git a/app/components/document_version/index.hbs b/app/components/document_version/index.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..2f4a6bd5bcd8e2d4169269121051e5660430a5d7
--- /dev/null
+++ b/app/components/document_version/index.hbs
@@ -0,0 +1,11 @@
+{{@model.document_version.document.title}}
+
+<div class="d-flex">
+  <DocumentVersion::Thumbnails @pages={{@model.pages}} />
+
+  <div class="d-flex flex-column pages">
+    {{#each @model.pages as |page|}}
+      <DocumentVersion::Page @page={{page}} />
+    {{/each}}
+  </div>
+</div>
diff --git a/app/components/document_version/page.hbs b/app/components/document_version/page.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..68d1e5b713c9fcf0650959e7317928f12dc8137c
--- /dev/null
+++ b/app/components/document_version/page.hbs
@@ -0,0 +1,4 @@
+<div class="page">
+  <img src="{{@page.url}}" />
+  {{@page.number}}
+</div>
\ No newline at end of file
diff --git a/app/components/document_version/thumbnail.hbs b/app/components/document_version/thumbnail.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..4f18bf7d74e995ca83a23a1b82e00196c6809576
--- /dev/null
+++ b/app/components/document_version/thumbnail.hbs
@@ -0,0 +1,4 @@
+<div class="thumbnail">
+  <img src="{{@page.url}}" />
+  {{@page.number}}
+</div>
\ No newline at end of file
diff --git a/app/components/document_version/thumbnails.hbs b/app/components/document_version/thumbnails.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..1072df30bebbe552ffe695f6b2f448f1fb386d6e
--- /dev/null
+++ b/app/components/document_version/thumbnails.hbs
@@ -0,0 +1,5 @@
+<div class="d-flex flex-column thumbnails">
+  {{#each @pages as |page|}}
+    <DocumentVersion::Thumbnail @page={{page}} />
+  {{/each}}
+</div>
\ No newline at end of file
diff --git a/app/components/page.hbs b/app/components/page.hbs
deleted file mode 100644
index ea9a08addb5d660bff45341b69a2656bd5647f87..0000000000000000000000000000000000000000
--- a/app/components/page.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
-<img src="{{@page.url}}" width="100" />
-{{@page.number}}
\ No newline at end of file
diff --git a/app/models/document_version.js b/app/models/document_version.js
index dbc2e2efc668d85e2629e071ea7bfb998eb58983..b75dca664855731330874646dbccd3b4840ecfad 100644
--- a/app/models/document_version.js
+++ b/app/models/document_version.js
@@ -1,4 +1,4 @@
-import Model, { attr, hasMany } from '@ember-data/model';
+import Model, { attr, hasMany, belongsTo } from '@ember-data/model';
 
 
 export default class DocumentVersionModel extends Model {
@@ -7,4 +7,5 @@ export default class DocumentVersionModel extends Model {
   @attr page_count; // total page count
   @attr lang; // languate used for this page
   @hasMany('pages') pages;
+  @belongsTo('document') document;
 }
diff --git a/app/styles/app.scss b/app/styles/app.scss
index d5a7dc8ea8b11bb59ced7fc89b7d798de0644406..62aceffdd589187bad368c4f7dc8d7230a18c31e 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -5,6 +5,8 @@
 @import "./nav/sidebar";
 @import "./nav/topbar";
 @import "./login.scss";
+@import "./document_version.scss";
+
 
 body {
     background-color: #e9ecef;
diff --git a/app/styles/document_version.scss b/app/styles/document_version.scss
new file mode 100644
index 0000000000000000000000000000000000000000..54cea1b579423bd6f122389fc8743c005bc73fbb
--- /dev/null
+++ b/app/styles/document_version.scss
@@ -0,0 +1,20 @@
+
+.thumbnails {
+  .thumbnail {
+    margin: 1rem;
+    img {
+      width: 6rem;
+    }
+  }
+}
+
+.pages {
+  overflow: scroll;
+  height: 100vh;
+
+  .page {
+    img {
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file