diff --git a/app/imports/ui/pages/StoryBook.vue b/app/imports/ui/pages/StoryBook.vue
new file mode 100644
index 00000000..6070f7d4
--- /dev/null
+++ b/app/imports/ui/pages/StoryBook.vue
@@ -0,0 +1,46 @@
+<template lang="html">
+	<toolbar-layout>
+    <div slot="toolbar">
+      Storybook
+    </div>
+		<v-navigation-drawer right app>
+			<v-toolbar color="primary" dark>
+				Components
+			</v-toolbar>
+			<v-list>
+	      <v-list-tile
+					v-for="(component, componentName) in $options.components"
+					v-if="componentName !== 'story-book' && componentName !== 'ToolbarLayout'"
+	        :key="componentName"
+					@click=""
+					:to="`/storybook/${componentName}`"
+	      >
+	        <v-list-tile-content>
+	          <v-list-tile-title>{{componentName}}</v-list-tile-title>
+	        </v-list-tile-content>
+	      </v-list-tile>
+	    </v-list>
+		</v-navigation-drawer>
+    <div class="content">
+			<v-card class="ma-4">
+				<component :is="$route.params.component"></component>
+			</v-card>
+		</div>
+	</toolbar-layout>
+</template>
+
+<script>
+	import ToolbarLayout from "/imports/ui/layouts/ToolbarLayout.vue";
+	import HealthBar from '/imports/ui/components/HealthBar.Story.vue';
+	import SkillListTile from '/imports/ui/components/SkillListTile.Story.vue';
+	export default {
+		components: {
+			ToolbarLayout,
+			HealthBar,
+			SkillListTile,
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/router.js b/app/imports/ui/router.js
index 337da359..5152317d 100644
--- a/app/imports/ui/router.js
+++ b/app/imports/ui/router.js
@@ -22,7 +22,6 @@ const routerFactory = new RouterFactory({
 
 
 RouterFactory.configure(factory => {
-  // Simple routes
   factory.addRoutes([
     {
       path: '/',
@@ -51,6 +50,21 @@ RouterFactory.configure(factory => {
 			component: TestDialog,
 		},
   ]);
+  //Development routes
+  if (Meteor.isDevelopment){
+    let StoryBook = require('/imports/ui/pages/StoryBook.vue').default;
+    factory.addRoutes([
+      {
+        path: '/storybook/:component',
+        name: 'componentStory',
+        component: StoryBook,
+      },{
+        path: '/storybook',
+        name: 'storybook',
+        component: StoryBook,
+      },
+    ]);
+  }
 });
 
 // Not found route has lowest priority
diff --git a/app/imports/ui/theme.js b/app/imports/ui/theme.js
index 5a70ad48..6b1f5f53 100644
--- a/app/imports/ui/theme.js
+++ b/app/imports/ui/theme.js
@@ -7,3 +7,5 @@ const theme = {
   info: "#5C6BC0",
   success: "#43A047",
 };
+
+export default theme;