diff --git a/DEVELOPER.md b/DEVELOPER.md
index e69de29..0f60467 100644
--- a/DEVELOPER.md
+++ b/DEVELOPER.md
@@ -0,0 +1,6 @@
+# Developer Docs
+
+## Adding a new template
+
+1. Create a new file `src/components/resume-X`.
+2. Copy 
diff --git a/package.json b/package.json
index 667eca0..f3f89d5 100755
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "node build/dev-server.js",
     "start": "node build/dev-server.js",
     "pdf": "node node/app.js",
+    "template": "node node/template/template.js",
     "export": "concurrently \"npm run dev\" \"npm run pdf\" --success first --kill-others --raw",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
@@ -40,6 +41,7 @@
     "chromedriver": "^2.27.2",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
+    "cpx": "^1.5.0",
     "cross-env": "^4.0.0",
     "cross-spawn": "^5.0.1",
     "css-loader": "^0.28.0",
@@ -80,6 +82,7 @@
     "phantomjs-prebuilt": "^2.1.14",
     "postcss": "^6.0.1",
     "postcss-cssnext": "^2.11.0",
+    "rename": "^1.0.4",
     "request": "^2.81.0",
     "request-promise": "^4.2.1",
     "rimraf": "^2.6.0",
diff --git a/src/pages/resume.vue b/src/pages/resume.vue
index 1f5b505..ddd5f49 100755
--- a/src/pages/resume.vue
+++ b/src/pages/resume.vue
@@ -2,11 +2,7 @@
 <div class="page-wrapper">
   <div class="page">
     <div class="page-inner">
-      <resume-material-dark v-if="$route.params.resumeid==='material-dark'"></resume-material-dark>
-      <resume-material-blue v-if="$route.params.resumeid==='material-blue'"></resume-material-blue>
-      <resume-left-right v-if="$route.params.resumeid==='left-right'"></resume-left-right>
-      <resume-oblique v-if="$route.params.resumeid==='oblique'"></resume-oblique>
-      <resume-side-bar v-if="$route.params.resumeid==='side-bar'"></resume-side-bar>
+      <component :is="$route.params.resumeid"></component>
     </div>
   </div>
 </div>
@@ -16,11 +12,7 @@
 import Vue from 'vue';
 import * as chromeShadowFixer from 'chrome-shadow-fixer';
 import * as textFitter from 'text-fitter';
-import '../components/resume-material-dark.vue';
-import '../components/resume-material-blue.vue';
-import '../components/resume-left-right.vue';
-import '../components/resume-oblique.vue';
-import '../components/resume-side-bar.vue';
+import '../resumes/resumes';
 export default Vue.component('resume', {
   name: 'app',
   mounted: () => {
diff --git a/src/components/resume-left-right.vue b/src/resumes/left-right.vue
similarity index 98%
rename from src/components/resume-left-right.vue
rename to src/resumes/left-right.vue
index 76b978e..d533084 100755
--- a/src/components/resume-left-right.vue
+++ b/src/resumes/left-right.vue
@@ -75,8 +75,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-left-right', {
-  name: 'resume-left-right',
+export default Vue.component('left-right', {
+  name: 'left-right',
   data () {
     return {
       person: PERSON
diff --git a/src/components/resume-material-blue.vue b/src/resumes/material-blue.vue
similarity index 99%
rename from src/components/resume-material-blue.vue
rename to src/resumes/material-blue.vue
index 7645560..c748eb1 100755
--- a/src/components/resume-material-blue.vue
+++ b/src/resumes/material-blue.vue
@@ -134,8 +134,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-material-blue', {
-  name: 'resume-material-blue',
+export default Vue.component('material-blue', {
+  name: 'material-blue',
   data () {
     return {
       person: PERSON
diff --git a/src/components/resume-material-dark.vue b/src/resumes/material-dark.vue
similarity index 99%
rename from src/components/resume-material-dark.vue
rename to src/resumes/material-dark.vue
index e1907f6..3875e64 100755
--- a/src/components/resume-material-dark.vue
+++ b/src/resumes/material-dark.vue
@@ -128,8 +128,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-material-dark', {
-  name: 'resume-material-dark',
+export default Vue.component('material-dark', {
+  name: 'material-dark',
   data () {
     return {
       person: PERSON
diff --git a/src/components/resume-oblique.vue b/src/resumes/oblique.vue
similarity index 98%
rename from src/components/resume-oblique.vue
rename to src/resumes/oblique.vue
index 0fd41a0..9a80969 100755
--- a/src/components/resume-oblique.vue
+++ b/src/resumes/oblique.vue
@@ -78,8 +78,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-oblique', {
-  name: 'resume-oblique',
+export default Vue.component('oblique', {
+  name: 'oblique',
   data () {
     return {
       person: PERSON
diff --git a/src/resumes/resumes.js b/src/resumes/resumes.js
new file mode 100644
index 0000000..6976c58
--- /dev/null
+++ b/src/resumes/resumes.js
@@ -0,0 +1,5 @@
+import '../resumes/material-dark.vue';
+import '../resumes/material-blue.vue';
+import '../resumes/left-right.vue';
+import '../resumes/oblique.vue';
+import '../resumes/side-bar.vue';
diff --git a/src/components/resume-side-bar.vue b/src/resumes/side-bar.vue
similarity index 98%
rename from src/components/resume-side-bar.vue
rename to src/resumes/side-bar.vue
index 427947e..ab96996 100755
--- a/src/components/resume-side-bar.vue
+++ b/src/resumes/side-bar.vue
@@ -89,8 +89,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-side-bar', {
-  name: 'resume-side-bar',
+export default Vue.component('side-bar', {
+  name: 'side-bar',
   data () {
     return {
       person: PERSON
diff --git a/src/components/resume-template.vue b/src/resumes/template.vue
old mode 100755
new mode 100644
similarity index 81%
rename from src/components/resume-template.vue
rename to src/resumes/template.vue
index 3b69bf8..8b93144
--- a/src/components/resume-template.vue
+++ b/src/resumes/template.vue
@@ -10,8 +10,8 @@ import {
 } from '../person';
 
 import Vue from 'vue';
-export default Vue.component('resume-template', {
-  name: 'resume-template',
+export default Vue.component('template', {
+  name: 'template',
   data () {
     return {
       person: PERSON