diff --git a/site/src/components/file/script.js b/site/src/components/file/script.js
index 08b25ac..9619d92 100644
--- a/site/src/components/file/script.js
+++ b/site/src/components/file/script.js
@@ -1,4 +1,5 @@
 import Versions from '@/components/versions'
+import Viewer from '@/components/viewer'
 
 export default
 {
@@ -6,7 +7,8 @@ export default
 
     components:
     {
-        Versions
+        Versions,
+        Viewer
     },
 
     props:
diff --git a/site/src/components/file/template.html b/site/src/components/file/template.html
index 2cf8334..35a9702 100644
--- a/site/src/components/file/template.html
+++ b/site/src/components/file/template.html
@@ -4,4 +4,5 @@
         {{ content.path.directory }} {{ content.name }}
     </header>
     <versions :content="content.versions"></versions>
+    <viewer></viewer>
 </div>
\ No newline at end of file
diff --git a/site/src/components/files-tree-file/template.html b/site/src/components/files-tree-file/template.html
index 2a9c507..98e4133 100644
--- a/site/src/components/files-tree-file/template.html
+++ b/site/src/components/files-tree-file/template.html
@@ -1,5 +1,5 @@
 <div>
-    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
+    <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         {{ content.name }}
-    </div>
+    </a>
 </div>
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/template.html b/site/src/components/files-tree-folder/template.html
index 1f75a1f..1146049 100644
--- a/site/src/components/files-tree-folder/template.html
+++ b/site/src/components/files-tree-folder/template.html
@@ -1,7 +1,7 @@
 <div>
-    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
+    <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         {{ content.name }}
-    </div>
+    </a>
     <div v-show="open">
         <files-tree-folder v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1"></files-tree-folder>
         <files-tree-file v-for="file of content.files" :key="file.data.path.full" :content="file" :depth="depth + 1"></files-tree-file>
diff --git a/site/src/components/version/script.js b/site/src/components/version/script.js
index 75099eb..7e22990 100644
--- a/site/src/components/version/script.js
+++ b/site/src/components/version/script.js
@@ -5,5 +5,13 @@ export default
     props:
     {
         content: { type: Object }
+    },
+
+    methods:
+    {
+        onClick()
+        {
+            this.$store.commit('setVersion', this.content)
+        }
     }
 }
\ No newline at end of file
diff --git a/site/src/components/version/template.html b/site/src/components/version/template.html
index 6126231..978740e 100644
--- a/site/src/components/version/template.html
+++ b/site/src/components/version/template.html
@@ -1,3 +1,3 @@
-<div class="version">
-    {{ content }}
-</div>
\ No newline at end of file
+<a href="#" class="version" @click.prevent="onClick">
+    {{ content.date }}
+</a>
\ No newline at end of file
diff --git a/site/src/components/viewer/index.vue b/site/src/components/viewer/index.vue
new file mode 100644
index 0000000..246515d
--- /dev/null
+++ b/site/src/components/viewer/index.vue
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/viewer/script.js b/site/src/components/viewer/script.js
new file mode 100644
index 0000000..9e33a26
--- /dev/null
+++ b/site/src/components/viewer/script.js
@@ -0,0 +1,16 @@
+export default
+{
+    name: 'viewer',
+
+    components:
+    {
+    },
+
+    computed:
+    {
+        version()
+        {
+            return this.$store.state.version
+        }
+    }
+}
\ No newline at end of file
diff --git a/site/src/components/viewer/style.styl b/site/src/components/viewer/style.styl
new file mode 100644
index 0000000..fa82993
--- /dev/null
+++ b/site/src/components/viewer/style.styl
@@ -0,0 +1,7 @@
+.viewer
+    position absolute
+    top 30px
+    right 0
+    width 75%
+    height 100%
+    background rgba(0, 0, 255, 0.3)
\ No newline at end of file
diff --git a/site/src/components/viewer/template.html b/site/src/components/viewer/template.html
new file mode 100644
index 0000000..3859834
--- /dev/null
+++ b/site/src/components/viewer/template.html
@@ -0,0 +1,3 @@
+<div class="viewer" v-if="version">
+    <pre><code>{{ version.content }}</code></pre>
+</div>
\ No newline at end of file
diff --git a/site/src/store.js b/site/src/store.js
index 88e0e93..e9c02bf 100644
--- a/site/src/store.js
+++ b/site/src/store.js
@@ -10,7 +10,8 @@ export default new Vuex.Store({
         projects: {},
         project: null,
         files: new FileTree({ autoWash: true }),
-        file: null
+        file: null,
+        version: null
     },
 
     mutations:
@@ -90,6 +91,11 @@ export default new Vuex.Store({
             {
                 state.file = file
             }
+        },
+
+        setVersion(state, data)
+        {
+            state.version = data
         }
     }
 })
\ No newline at end of file