diff --git a/rpg-docs/bower.json b/rpg-docs/bower.json
index 6446b645..22bae9ab 100644
--- a/rpg-docs/bower.json
+++ b/rpg-docs/bower.json
@@ -15,8 +15,7 @@
   "dependencies": {
     "polymer": "Polymer/polymer#~0.5.5",
     "core-elements": "Polymer/core-elements#~0.5.5",
-    "paper-elements": "Polymer/paper-elements#~0.5.5",
-	"paper-fab-menu": "cwdoh/paper-fab-menu"
+    "paper-elements": "Polymer/paper-elements#~0.5.5"
   },
   "resolutions": {
     "core-component-page": "^0.5.0",
diff --git a/rpg-docs/client/views/character/inventory/inventory.html b/rpg-docs/client/views/character/inventory/inventory.html
index f16bd4bc..8a1d8cdd 100644
--- a/rpg-docs/client/views/character/inventory/inventory.html
+++ b/rpg-docs/client/views/character/inventory/inventory.html
@@ -100,21 +100,20 @@
 			<div class="fab-buffer"></div>
 		</div>
 		{{#if canEditCharacter _id}}
-			<paper-fab-menu id="inventoryAddMenu" 
-							icon="add" 
-							closeIcon="close" 
-							duration="0.3">
-				<paper-fab-menu-item id="addItem"
-									 icon="note-add"
-									 color="#d23f31"
-									 tooltip="Item">
-				</paper-fab-menu-item>
-				<paper-fab-menu-item id="addContainer"
-									 icon="work"
-									 color="#d23f31"
-									 tooltip="Container">
-				</paper-fab-menu-item>
-			</paper-fab-menu>
+			{{#fabMenu}}
+				<core-tooltip label="New container" position="left">
+					<paper-fab icon="work"
+							   class="addContainer"
+							   mini>
+					</paper-fab>
+				</core-tooltip>
+				<core-tooltip label="New item" position="left">
+					<paper-fab icon="note-add"
+							   class="addItem"
+							   mini>
+					</paper-fab>
+				</core-tooltip>
+			{{/fabMenu}}
 		{{/if}}
 	</div>
 </template>
diff --git a/rpg-docs/client/views/character/inventory/inventory.js b/rpg-docs/client/views/character/inventory/inventory.js
index ae0a4ce0..63a38602 100644
--- a/rpg-docs/client/views/character/inventory/inventory.js
+++ b/rpg-docs/client/views/character/inventory/inventory.js
@@ -103,7 +103,7 @@ Template.inventory.helpers({
 });
 
 Template.inventory.events({
-	"tap #addItem": function(event){
+	"tap .addItem": function(event){
 		var charId = this._id;
 		Items.insert({
 			charId: charId,
@@ -120,7 +120,7 @@ Template.inventory.events({
 			});
 		});
 	},
-	"tap #addContainer": function(event){
+	"tap .addContainer": function(event){
 		var containerId = Containers.insert({
 			name: "New Container",
 			isCarried: true,
diff --git a/rpg-docs/client/views/character/spells/spells.html b/rpg-docs/client/views/character/spells/spells.html
index 8ee12bb1..da79791e 100644
--- a/rpg-docs/client/views/character/spells/spells.html
+++ b/rpg-docs/client/views/character/spells/spells.html
@@ -128,20 +128,19 @@
 		</div>
 	</div>
 	{{#if canEditCharacter _id}}
-		<paper-fab-menu id="inventoryAddMenu"
-						icon="add"
-						closeIcon="close"
-						duration="0.3">
-			<paper-fab-menu-item id="addSpell"
-								 icon="note-add"
-								 color="#d23f31"
-								 tooltip="Spell">
-			</paper-fab-menu-item>
-			<paper-fab-menu-item id="addSpellList"
-								 icon="work"
-								 color="#d23f31"
-								 tooltip="Spell List">
-			</paper-fab-menu-item>
-		</paper-fab-menu>
+		{{#fabMenu}}
+			<core-tooltip label="New spell list" position="left">
+				<paper-fab icon="work"
+						   class="addSpellList"
+						   mini>
+				</paper-fab>
+			</core-tooltip>
+			<core-tooltip label="New spell" position="left">
+				<paper-fab icon="note-add"
+						   class="addSpell"
+						   mini>
+				</paper-fab>
+			</core-tooltip>
+		{{/fabMenu}}
 	{{/if}}
 </template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/character/spells/spells.js b/rpg-docs/client/views/character/spells/spells.js
index c0529ffa..6f9d4438 100644
--- a/rpg-docs/client/views/character/spells/spells.js
+++ b/rpg-docs/client/views/character/spells/spells.js
@@ -184,7 +184,7 @@ Template.spells.events({
 			heroId:   this._id,
 		});
 	},
-	"tap #addSpellList": function(event){
+	"tap .addSpellList": function(event){
 		var charId = this.charId;
 		SpellLists.insert({
 			name: "New SpellList",
@@ -201,7 +201,7 @@ Template.spells.events({
 			}
 		});
 	},
-	"tap #addSpell": function(event){
+	"tap .addSpell": function(event){
 		var charId = this.charId;
 		var listId = SpellLists.findOne({charId: this._id})._id;
 		Spells.insert({
diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html
new file mode 100644
index 00000000..78ae0718
--- /dev/null
+++ b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.html
@@ -0,0 +1,8 @@
+<template name="fabMenu">
+	<paper-fab class="floatyButton expand-menu {{#if active}}active{{/if}}" 
+			   icon="add"></paper-fab>
+	<div class="{{#if active}}active{{/if}} mini-holder"
+		 layout vertical center>
+		{{> UI.contentBlock}}
+	</div>
+</template>
\ No newline at end of file
diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js
new file mode 100644
index 00000000..968646d3
--- /dev/null
+++ b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.js
@@ -0,0 +1,15 @@
+Template.fabMenu.onCreated(function() {
+	this.active = new ReactiveVar(false);
+});
+
+Template.fabMenu.helpers({
+	active: function() {
+		return Template.instance().active.get();
+	},
+});
+
+Template.fabMenu.events({
+	"tap .expand-menu": function(event, instance) {
+		instance.active.set(!instance.active.get());
+	},
+});
\ No newline at end of file
diff --git a/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss
new file mode 100644
index 00000000..d068f0e3
--- /dev/null
+++ b/rpg-docs/client/views/paperTemplates/fabMenu/fabMenu.scss
@@ -0,0 +1,46 @@
+@import "bourbon/bourbon";
+
+.mini-holder {
+	position: absolute;
+	padding: 4px;
+	bottom: 80px;
+	right: 24px;
+	width: 56px;
+	pointer-events: none;
+	flex-direction: column-reverse !important;
+	core-tooltip{
+		@include transform(scale(0));
+		@include transition-property(transform);
+		@include transition-duration(0.3s);
+		@include transition-timing-function(ease-in-out);
+		margin: 4px;
+	}
+	&.active {
+		pointer-events: auto;
+		core-tooltip{
+			@include transform(scale(1));
+		}
+		core-tooltip:nth-child(2){
+			@include transition-delay(0.1s);
+		}
+		core-tooltip:nth-child(3){
+			@include transition-delay(0.2s);
+		}
+		core-tooltip:nth-child(4){
+			@include transition-delay(0.3s);
+		}
+		core-tooltip:nth-child(5){
+			@include transition-delay(0.4s);
+		}
+	}
+}
+
+.expand-menu {
+	&::shadow core-icon {
+		@include transition(transform 0.3s ease-in-out);
+	}
+	&.active::shadow core-icon{
+		@include transform(rotate(405deg));
+	}
+}
+