diff --git a/app/imports/ui/components/AttributeCard.Story.vue b/app/imports/ui/components/AttributeCard.Story.vue
index b841ef87..d7ecd1ba 100644
--- a/app/imports/ui/components/AttributeCard.Story.vue
+++ b/app/imports/ui/components/AttributeCard.Story.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <v-container style="background: #fafafa;" grid-list-md>
+  <v-container grid-list-md>
   	<v-layout row wrap>
   		<v-flex xs12 v-for="attribute in attributes" :key="attribute.name">
   			<attribute-card v-bind="attribute" @click="click"/>
@@ -14,6 +14,7 @@
 		components: {
 			AttributeCard
 		},
+		dontWrap: true,
 		data(){ return {
 			attributes: [
 				{
diff --git a/app/imports/ui/pages/StoryBook.vue b/app/imports/ui/pages/StoryBook.vue
index cd702869..8fbedb91 100644
--- a/app/imports/ui/pages/StoryBook.vue
+++ b/app/imports/ui/pages/StoryBook.vue
@@ -28,14 +28,16 @@
 	    </v-list>
 		</v-navigation-drawer>
     <div class="content">
-			<v-card class="ma-4">
-				<component :is="$route.params.component"></component>
+			<component v-if="dontWrap" :is="$route.params.component"/>
+			<v-card class="ma-4" v-else="dontWrap">
+				<component :is="$route.params.component"/>
 			</v-card>
 		</div>
 	</toolbar-layout>
 </template>
 
 <script>
+	import Vue from "vue";
 	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';
@@ -52,7 +54,13 @@
 		data(){ return {
 			sidebar: undefined,
 		}},
-	}
+		computed: {
+			dontWrap(){
+				let component = this.$options.components[this.$route.params.component];
+				return component && component.dontWrap;
+			},
+		},
+	};
 </script>
 
 <style lang="css" scoped>