diff --git a/site/src/components/file/index.vue b/site/src/components/file/index.vue
new file mode 100644
index 0000000..246515d
--- /dev/null
+++ b/site/src/components/file/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/file/script.js b/site/src/components/file/script.js
new file mode 100644
index 0000000..08b25ac
--- /dev/null
+++ b/site/src/components/file/script.js
@@ -0,0 +1,16 @@
+import Versions from '@/components/versions'
+
+export default
+{
+    name: 'file',
+
+    components:
+    {
+        Versions
+    },
+
+    props:
+    {
+        content: { type: Object }
+    }
+}
\ No newline at end of file
diff --git a/site/src/components/file/style.styl b/site/src/components/file/style.styl
new file mode 100644
index 0000000..e4d0d75
--- /dev/null
+++ b/site/src/components/file/style.styl
@@ -0,0 +1,12 @@
+.file
+    position absolute
+    top 0
+    right 0
+    width 75%
+    height 100%
+    background rgba(0, 255, 0, 0.3)
+
+header
+    position absolute
+    top 0
+    left 0
\ No newline at end of file
diff --git a/site/src/components/file/template.html b/site/src/components/file/template.html
new file mode 100644
index 0000000..2cf8334
--- /dev/null
+++ b/site/src/components/file/template.html
@@ -0,0 +1,7 @@
+<div class="file">
+    <header>
+        File
+        {{ content.path.directory }} {{ content.name }}
+    </header>
+    <versions :content="content.versions"></versions>
+</div>
\ No newline at end of file
diff --git a/site/src/components/files-tree-file/script.js b/site/src/components/files-tree-file/script.js
index eeadae4..87dcb24 100644
--- a/site/src/components/files-tree-file/script.js
+++ b/site/src/components/files-tree-file/script.js
@@ -14,5 +14,9 @@ export default
 
     methods:
     {
+        onNameClick()
+        {
+            this.$store.commit('setFile', this.content.data.path.full)
+        }
     }
 }
\ 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 51a69b7..2a9c507 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' }">
+    <div class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
         {{ content.name }}
     </div>
 </div>
\ No newline at end of file
diff --git a/site/src/components/project/script.js b/site/src/components/project/script.js
index a71250d..de9a203 100644
--- a/site/src/components/project/script.js
+++ b/site/src/components/project/script.js
@@ -1,4 +1,5 @@
 import FilesTree from '@/components/files-tree'
+import File from '@/components/file'
 
 export default
 {
@@ -6,7 +7,8 @@ export default
 
     components:
     {
-        FilesTree
+        FilesTree,
+        File
     },
 
     computed:
@@ -14,6 +16,10 @@ export default
         project()
         {
             return this.$store.state.project
+        },
+        file()
+        {
+            return this.$store.state.file
         }
     },
 
diff --git a/site/src/components/project/template.html b/site/src/components/project/template.html
index 56262ca..b850b25 100644
--- a/site/src/components/project/template.html
+++ b/site/src/components/project/template.html
@@ -1,4 +1,6 @@
 <div>
     {{ project.name }}
+
     <files-tree></files-tree>
+    <file v-if="file" :content="file.data"></file>
 </div>
\ No newline at end of file
diff --git a/site/src/components/version/index.vue b/site/src/components/version/index.vue
new file mode 100644
index 0000000..246515d
--- /dev/null
+++ b/site/src/components/version/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/version/script.js b/site/src/components/version/script.js
new file mode 100644
index 0000000..75099eb
--- /dev/null
+++ b/site/src/components/version/script.js
@@ -0,0 +1,9 @@
+export default
+{
+    name: 'version',
+
+    props:
+    {
+        content: { type: Object }
+    }
+}
\ No newline at end of file
diff --git a/site/src/components/version/style.styl b/site/src/components/version/style.styl
new file mode 100644
index 0000000..e69de29
diff --git a/site/src/components/version/template.html b/site/src/components/version/template.html
new file mode 100644
index 0000000..6126231
--- /dev/null
+++ b/site/src/components/version/template.html
@@ -0,0 +1,3 @@
+<div class="version">
+    {{ content }}
+</div>
\ No newline at end of file
diff --git a/site/src/components/versions/index.vue b/site/src/components/versions/index.vue
new file mode 100644
index 0000000..246515d
--- /dev/null
+++ b/site/src/components/versions/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/versions/script.js b/site/src/components/versions/script.js
new file mode 100644
index 0000000..da44182
--- /dev/null
+++ b/site/src/components/versions/script.js
@@ -0,0 +1,16 @@
+import Version from '@/components/version'
+
+export default
+{
+    name: 'versions',
+
+    components:
+    {
+        Version
+    },
+
+    props:
+    {
+        content: { type: Array }
+    }
+}
\ No newline at end of file
diff --git a/site/src/components/versions/style.styl b/site/src/components/versions/style.styl
new file mode 100644
index 0000000..66eb880
--- /dev/null
+++ b/site/src/components/versions/style.styl
@@ -0,0 +1,7 @@
+.versions
+    position absolute
+    top 30px
+    left 0
+    width 25%
+    height 100%
+    background rgba(255, 0, 0, 0.3)
\ No newline at end of file
diff --git a/site/src/components/versions/template.html b/site/src/components/versions/template.html
new file mode 100644
index 0000000..af4dfe9
--- /dev/null
+++ b/site/src/components/versions/template.html
@@ -0,0 +1,3 @@
+<div class="versions">
+    <version v-for="version of content" :content="version"></version>
+</div>
\ No newline at end of file
diff --git a/site/src/store.js b/site/src/store.js
index 6f44b51..88e0e93 100644
--- a/site/src/store.js
+++ b/site/src/store.js
@@ -80,6 +80,16 @@ export default new Vuex.Store({
         deleteFile(state, data)
         {
             state.files.removeFile(data.path.full)
+        },
+
+        setFile(state, data)
+        {
+            const file = state.files.getFile(data)
+
+            if(file)
+            {
+                state.file = file
+            }
         }
     }
 })
\ No newline at end of file