diff --git a/app/client/views/character/spells/spells.html b/app/client/views/character/spells/spells.html
index c992daa4..fb7b2a90 100644
--- a/app/client/views/character/spells/spells.html
+++ b/app/client/views/character/spells/spells.html
@@ -11,16 +11,20 @@
 					<div class="bottom list">
 						{{#each levels}}{{#if showSlots ..}}
 							<div class="item-slot">
-								<div class="item spellSlot layout horizontal center">
-									<div style="margin-right: 16px">
+								<div class="white spellSlot layout horizontal center ">
+									<div class="spellLevelName" style="margin-right: 16px; margin-left: 8px; cursor: pointer;">
 										{{name}}
 									</div>
-									<div class="flex layout horizontal center">
+									<div class="flex layout horizontal center wrap">
 										{{#each slotBubbles ..}}
-											<paper-icon-button class="slotBubble"
-															   icon={{icon}}
-															   disabled={{disabled}}>
-											</paper-icon-button>
+											{{#unless overflow}}
+												<paper-icon-button class="slotBubble"
+																   icon={{icon}}
+																   disabled={{disabled}}>
+												</paper-icon-button>
+											{{else}}
+												<div class="paper-font-subhead">+{{overflow}}</div>
+											{{/unless}}
 										{{/each}}
 									</div>
 								</div>
diff --git a/app/client/views/character/spells/spells.js b/app/client/views/character/spells/spells.js
index df7a68af..e9839200 100644
--- a/app/client/views/character/spells/spells.js
+++ b/app/client/views/character/spells/spells.js
@@ -122,6 +122,7 @@ Template.spells.helpers({
 		return false;
 	},
 	slotBubbles: function(char){
+		const MAX_SLOTS = 10;
 		var baseSlots = Characters.calculate.attributeBase(
 			char._id, "level" + this.level + "SpellSlots"
 		);
@@ -130,16 +131,28 @@ Template.spells.helpers({
 		);
 		var slotsUsed = baseSlots - currentSlots;
 		var bubbles = [];
-		var i;
-		for (i = 0; i < currentSlots; i++){
+		var i, overflowFilled, overflowEmpty;
+		var filledSlots = currentSlots;
+		var maxEmptySlots = Math.max(MAX_SLOTS - filledSlots + 1, 1);
+		var emptySlots = slotsUsed;
+		if (baseSlots > MAX_SLOTS){
+			filledSlots = Math.min(MAX_SLOTS, filledSlots);
+			overflowFilled = Math.max(currentSlots - MAX_SLOTS, 0);
+			emptySlots = Math.min(maxEmptySlots, emptySlots);
+			overflowEmpty = Math.max(slotsUsed - maxEmptySlots, 0);
+		}
+		for (i = 0; i < filledSlots; i++){
 			bubbles.push({
 				icon: "radio-button-checked",
-				disabled: i !== currentSlots - 1 || !canEditCharacter(char._id), //last full slot not disabled
+				disabled: i !== filledSlots - 1 || !canEditCharacter(char._id), //last full slot not disabled
 				attribute: "level" + this.level + "SpellSlots",
 				charId: char._id,
 			});
 		}
-		for (i = 0; i < slotsUsed; i++){
+		if (overflowFilled){
+			bubbles.push({overflow: overflowFilled});
+		}
+		for (i = 0; i < emptySlots; i++){
 			bubbles.push({
 				icon: "radio-button-unchecked",
 				disabled: i !== 0 || !canEditCharacter(char._id), //first empty slot not disabled
@@ -147,6 +160,9 @@ Template.spells.helpers({
 				charId: char._id,
 			});
 		}
+		if (overflowEmpty){
+			bubbles.push({overflow: overflowEmpty});
+		}
 		return bubbles;
 	},
 	slotStatName: function() {
@@ -178,7 +194,7 @@ Template.spells.events({
 		}
 		event.stopPropagation();
 	},
-	"click .spellSlot": function(event, instance) {
+	"click .spellLevelName": function(event, instance) {
 		var name = "Level " + this.level + " Spell Slots";
 		var stat = "level" + this.level + "SpellSlots";
 		var charId = instance.data._id;