diff --git a/app/imports/ui/StoryBook.vue b/app/imports/ui/StoryBook.vue
index 8e22f485..038ff285 100644
--- a/app/imports/ui/StoryBook.vue
+++ b/app/imports/ui/StoryBook.vue
@@ -54,6 +54,7 @@
 	import ResourceCard from '/imports/ui/components/attributes/ResourceCard.Story.vue';
 	import SkillListTile from '/imports/ui/components/skills/SkillListTile.Story.vue';
 	import SmartInput from '/imports/ui/components/global/SmartInput.Story.vue';
+	import SpellSlotListTile from '/imports/ui/components/attributes/SpellSlotListTile.Story.vue';
 	import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
 
 	export default {
@@ -73,6 +74,7 @@
 			ResourceCard,
 			SkillListTile,
 			SmartInput,
+			SpellSlotListTile,
 			ToolbarLayout,
 		},
 		data(){ return {
diff --git a/app/imports/ui/character/StatsTab.vue b/app/imports/ui/character/StatsTab.vue
index 672e30cd..67e71d7d 100644
--- a/app/imports/ui/character/StatsTab.vue
+++ b/app/imports/ui/character/StatsTab.vue
@@ -100,6 +100,22 @@
 				/>
 			</div>
 
+			<div class="spell-slots" v-if="spellSlots.length">
+				<v-card>
+					<v-list>
+						<v-subheader>Spell Slots</v-subheader>
+						<spell-slot-list-tile
+							v-for="spellSlot in spellSlots"
+							v-bind="spellSlot"
+							:key="spellSlot._id"
+							:data-id="spellSlot._id"
+							@click="clickAttribute({_id: spellSlot._id})"
+							@change="e => incrementChange(spellSlot._id, e)"
+						/>
+					</v-list>
+				</v-card>
+			</div>
+
 		</column-layout>
 
 		<v-btn fixed fab bottom right
@@ -123,6 +139,7 @@
 	import HitDiceListTile from '/imports/ui/components/attributes/HitDiceListTile.vue';
 	import SkillListTile from '/imports/ui/components/skills/SkillListTile.vue';
 	import ResourceCard from '/imports/ui/components/attributes/ResourceCard.vue';
+	import SpellSlotListTile from '/imports/ui/components/attributes/SpellSlotListTile.vue';
 
 	import { adjustAttribute, insertAttribute } from '/imports/api/creature/properties/Attributes.js';
 
@@ -130,6 +147,16 @@
 		return Attributes.find({charId, type}, {sort: {order: 1}});
 	};
 
+	const getNonZeroAttributeOfType = function(charId, type){
+		return Attributes.find({
+			charId,
+			type,
+			value: {$ne: 0},
+		}, {
+			sort: {order: 1}
+		});
+	};
+
 	export default {
 		props: {
 			charId: String,
@@ -142,6 +169,7 @@
 			HitDiceListTile,
 			SkillListTile,
 			ResourceCard,
+			SpellSlotListTile,
 		},
 		meteor: {
 			abilities(){
@@ -154,13 +182,10 @@
 				return getAttributeOfType(this.charId, 'modifier');
 			},
 			resources(){
-				return Attributes.find({
-					charId: this.charId,
-					type: 'resource',
-					value: {$ne: 0},
-				}, {
-					sort: {order: 1}
-				});
+				return getNonZeroAttributeOfType(this.charId, 'resource');
+			},
+			spellSlots(){
+				return getNonZeroAttributeOfType(this.charId, 'spellSlot');
 			},
 			hitDice(){
 				return Attributes.find({
diff --git a/app/imports/ui/components/attributes/AttributeCard.vue b/app/imports/ui/components/attributes/AttributeCard.vue
index e1dfa725..d8a2452a 100644
--- a/app/imports/ui/components/attributes/AttributeCard.vue
+++ b/app/imports/ui/components/attributes/AttributeCard.vue
@@ -1,14 +1,14 @@
 <template lang="html">
   <v-card :hover="hasClickListener" @click="click">
   	<v-card-text>
-  		<v-layout row align-center>
+  		<div class="layout row align-center">
   			<div class="value display-1 mr-1">
   				{{modifier ? signed(value) : value}}
   			</div>
-				<v-flex class="name text-truncate">
+				<div class="name text-truncate">
 					{{name}}
-				</v-flex>
-  		</v-layout>
+				</div>
+  		</div>
   	</v-card-text>
   </v-card>
 </template>
diff --git a/app/imports/ui/components/attributes/HitDiceListTile.vue b/app/imports/ui/components/attributes/HitDiceListTile.vue
index d961e155..fd0c0347 100644
--- a/app/imports/ui/components/attributes/HitDiceListTile.vue
+++ b/app/imports/ui/components/attributes/HitDiceListTile.vue
@@ -5,10 +5,10 @@
 
 			<v-layout row align-center class="left">
 				<v-layout column class="buttons" justify-center>
-					<v-btn icon flat :disabled="value >= maxValue" @click="increment(1)">
+					<v-btn icon small :disabled="value >= maxValue" @click="increment(1)">
 						<v-icon>arrow_drop_up</v-icon>
 					</v-btn>
-					<v-btn icon flat :disabled="value <= 0" @click="increment(-1)">
+					<v-btn icon small :disabled="value <= 0" @click="increment(-1)">
 						<v-icon>arrow_drop_down</v-icon>
 					</v-btn>
 				</v-layout>
diff --git a/app/imports/ui/components/attributes/ResourceCard.vue b/app/imports/ui/components/attributes/ResourceCard.vue
index 64044104..b2937d7c 100644
--- a/app/imports/ui/components/attributes/ResourceCard.vue
+++ b/app/imports/ui/components/attributes/ResourceCard.vue
@@ -1,26 +1,28 @@
 <template lang="html">
-	<v-card>
-		<div class="layout row align-center" :class="{hover}">
-			<div class="buttons layout column justify-center">
-				<v-btn icon flat :disabled="currentValue >= value" @click="increment(1)">
-					<v-icon>arrow_drop_up</v-icon>
-				</v-btn>
-				<v-btn icon flat :disabled="currentValue <= 0" @click="increment(-1)">
-					<v-icon>arrow_drop_down</v-icon>
-				</v-btn>
-			</div>
-			<div class="layout row value" style="align-items: baseline;">
-				<div class="display-1">{{currentValue}}</div>
-				<div class="title ml-2 max-value">/{{value}}</div>
-			</div>
-			<v-card-text
-				class="content text-truncate"
-				@click="click"
-				@mouseover="hover = true"
-				@mouseleave="hover = false"
-			>
+	<v-card class="resource-card layout row" :class="hover ? 'elevation-8': ''">
+		<div class="buttons layout column justify-center pl-3">
+			<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
+				<v-icon>arrow_drop_up</v-icon>
+			</v-btn>
+			<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
+				<v-icon>arrow_drop_down</v-icon>
+			</v-btn>
+		</div>
+		<div
+			class="layout row align-center value pl-2 pr-3"
+		>
+			<div class="display-1">{{currentValue}}</div>
+			<div class="title ml-2 max-value">/{{value}}</div>
+		</div>
+		<div
+			class="content layout row align-center pr-3"
+			@click="click"
+			@mouseover="hover = true"
+			@mouseleave="hover = false"
+		>
+			<div class="text-truncate ">
 				{{name}}
-			</v-card-text>
+			</div>
 		</div>
 	</v-card>
 </template>
@@ -54,11 +56,13 @@
 </script>
 
 <style lang="css" scoped>
-	.buttons {
-		height: 100%;
+	.resource-card > div {
+		padding-top: 16px;
+		padding-bottom: 16px;
 	}
 	.buttons, .value {
 		flex-shrink: 0;
+		flex-grow: 0;
 	}
 	.buttons > .v-btn {
 		margin: 0;
diff --git a/app/imports/ui/components/attributes/SpellSlotListTile.Story.vue b/app/imports/ui/components/attributes/SpellSlotListTile.Story.vue
new file mode 100644
index 00000000..489f069d
--- /dev/null
+++ b/app/imports/ui/components/attributes/SpellSlotListTile.Story.vue
@@ -0,0 +1,44 @@
+<template lang="html">
+	<v-list>
+		<spell-slot-list-tile
+			v-for="(slot, index) in spellSlots"
+			:key="'tile ' + index"
+			v-bind="slot"
+			@change="e => spellSlots[index].adjustment += e.value"
+		/>
+	</v-list>
+</template>
+
+<script>
+	import SpellSlotListTile from '/imports/ui/components/attributes/SpellSlotListTile.vue';
+
+	export default {
+		components: {
+			SpellSlotListTile,
+		},
+		data(){return {
+			spellSlots: [
+				{
+					name: "Level 1",
+					value: 4,
+					adjustment: -2,
+				}, {
+					name: "Level 1",
+					value: 1,
+					adjustment: 0,
+				}, {
+					name: "Level 2",
+					value: 12,
+					adjustment: -8,
+				}, {
+					name: "Level 3",
+					value: 10,
+					adjustment: -5,
+				},
+			],
+		}}
+	};
+</script>
+
+<style lang="css" scoped>
+</style>
diff --git a/app/imports/ui/components/attributes/SpellSlotListTile.vue b/app/imports/ui/components/attributes/SpellSlotListTile.vue
new file mode 100644
index 00000000..f6912a76
--- /dev/null
+++ b/app/imports/ui/components/attributes/SpellSlotListTile.vue
@@ -0,0 +1,122 @@
+<template lang="html">
+	<v-list-tile class="spell-slot-list-tile" :class="{hover}">
+
+		<v-list-tile-action>
+
+			<div class="layout row align-center" v-if="value > 4">
+				<div class="buttons layout column justify-center">
+					<v-btn icon small :disabled="currentValue >= value" @click="increment(1)">
+						<v-icon>arrow_drop_up</v-icon>
+					</v-btn>
+					<v-btn icon small :disabled="currentValue <= 0" @click="increment(-1)">
+						<v-icon>arrow_drop_down</v-icon>
+					</v-btn>
+				</div>
+				<div class="layout row value" style="align-items: baseline;">
+					<div class="display-1">{{currentValue}}</div>
+					<div class="title ml-2 max-value">/{{value}}</div>
+				</div>
+			</div>
+
+			<div class="layout row align-center justify-end slot-buttons" v-else>
+				<v-btn
+					icon
+					small
+					v-for="i in value"
+					:disabled="!(i === currentValue || i === currentValue + 1)"
+					:key="i"
+					@click="increment(i > currentValue ? 1 : -1)"
+				>
+					<v-icon>{{
+						i > currentValue ?
+						'radio_button_unchecked' :
+						'radio_button_checked'
+					}}</v-icon>
+				</v-btn>
+			</div>
+
+		</v-list-tile-action>
+
+		<v-list-tile-content
+			class="content ml-2"
+			@click="click"
+			@mouseover="hover = true"
+			@mouseleave="hover = false"
+		>
+			<v-list-tile-title>
+				{{name}}
+			</v-list-tile-title>
+		</v-list-tile-content>
+	</v-list-tile>
+</template>
+
+<script>
+import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+export default {
+	data(){ return{
+		hover: false,
+	}},
+	props: {
+		_id: String,
+		name: String,
+		color: String,
+		value: Number,
+		adjustment: {
+			type: Number,
+			default: 0,
+		},
+	},
+	computed: {
+		currentValue(){
+			return this.value + (this.adjustment || 0);
+		},
+	},
+	methods: {
+		signed: numberToSignedString,
+		click(e){
+			this.$emit('click', e);
+		},
+		increment(value){
+			this.$emit('change', {type: 'increment', value})
+		},
+	},
+};
+</script>
+
+<style lang="css" scoped>
+	.spell-slot-list-tile {
+		background: inherit;
+	}
+	.spell-slot-list-tile >>> .v-list__tile {
+		height: 56px;
+	}
+	.v-list__tile__action {
+		width: 112px;
+		flex-shrink: 0;
+	}
+	.slot-buttons > .v-btn {
+		margin: 0;
+		flex-shrink: 1;
+	}
+	.buttons {
+		height: 100%;
+	}
+	.buttons > .v-btn {
+		margin: 0;
+	}
+	.spell-slot-list-tile.hover {
+		background: #f5f5f5 !important;
+	}
+	.theme--dark .spell-slot-list-tile.hover {
+		background: #515151 !important;
+	}
+	.content {
+		cursor: pointer;
+	}
+	.max-value {
+		color: rgba(0,0,0,.54);
+	}
+	.theme--dark .max-value {
+		color: rgba(255, 255, 255, 0.54);
+	}
+</style>