diff --git a/rpg-docs/Routes/Routes.js b/rpg-docs/Routes/Routes.js
index 14f64014..6d2b61ac 100644
--- a/rpg-docs/Routes/Routes.js
+++ b/rpg-docs/Routes/Routes.js
@@ -34,13 +34,8 @@ Router.map(function() {
 		waitOn: function(){
 			return subsManager.subscribe("characterList", Meteor.userId());
 		},
-		data: {
-			characters: function(){
-				return Characters.find({}, {fields: {_id: 1}, sort: {name: 1}});
-			}
-		},
 		onAfterAction: function() {
-			document.title = appName;
+			document.title = appName + " - Characters";
 		},
 		fastRender: true,
 	});
diff --git a/rpg-docs/client/views/characterList/characterList.css b/rpg-docs/client/views/characterList/characterList.css
index e457e32e..63e43913 100644
--- a/rpg-docs/client/views/characterList/characterList.css
+++ b/rpg-docs/client/views/characterList/characterList.css
@@ -1,10 +1,32 @@
-.characterCards {
-	padding: 4px;
+.character-card{
+	background-color: #fff;
+	height: 300px;
+	min-width: 250px;
+	max-width: 500px;
+	flex-basis: 300px;
+	margin: 4px;
+	position: relative;
 }
 
-.characterCard{
-	width: 272px;
-	margin: 4px;
-	min-width: 272px;
-	flex-grow: 1;
+.character-card .image {
+	position: relative;
+}
+
+.character-card .initials {
+	font-size: 100px;
+	color: rgba(255,255,255,0.1);
+	background: linear-gradient(-8deg, rgba(0,0,0,0.7), rgba(0,0,0,0));
+}
+
+.character-card paper-item {
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+.character-card .name {
+	font-weight: 500;
+}
+
+.character-card paper-ripple {
+	color: #fff ;
 }
diff --git a/rpg-docs/client/views/characterList/characterList.html b/rpg-docs/client/views/characterList/characterList.html
index 1ceaa1d7..fd53d2d6 100644
--- a/rpg-docs/client/views/characterList/characterList.html
+++ b/rpg-docs/client/views/characterList/characterList.html
@@ -1,39 +1,61 @@
 <template name="characterList">
-	<app-toolbar class="app-grey white-text">
-		<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
-		<div flex>
-			Characters
-		</div>
-	</app-toolbar>
-	<div class="scroll-y" fit>
-			{{#if currentUser}}
-				{{#if characters.count}}
-					<div layout horizontal wrap class="characterCards">
-						{{# each characters}}
-							{{#with characterDetails}}
-								{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
-							{{/with}}
-						{{/each}}
-						{{> gridPadding class="characterCard" num=12}}
-					</div>
+	<app-header-layout has-scrolling-region fullbleed>
+		<app-header class="app-grey white-text" fixed effects="waterfall">
+			<app-toolbar>
+				<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
+				<div style="font-weight: 300;">Characters</div>
+			</app-toolbar>
+		</app-header>
+		<div class="padded">
+				{{#if currentUser}}
+					{{#if characters.count}}
+						<div class="character-list layout horizontal wrap">
+							{{# each characters}}
+								<a class="character-card flex layout vertical" href="/character/{{_id}}">
+									<div class="flex image">
+										<iron-image class="fit {{colorClass}}"
+													sizing="cover" preload fade src={{picture}}>
+										</iron-image>
+										{{#unless picture}}
+											<div class="fit initials layout vertical center center-justified">
+												{{initials name}}
+											</div>
+										{{/unless}}
+									</div>
+									<paper-item>
+										<paper-item-body two-lines>
+											<div class="name">
+												{{name}}
+											</div>
+											<div secondary>
+												{{alignment}} {{gender}} {{race}}
+											</div>
+										</paper-item-body>
+									</paper-item>
+									<paper-ripple></paper-ripple>
+								</a>
+							{{/each}}
+							{{> gridPadding class="character-card flex layout vertical" num=12}}
+						</div>
+					{{else}}
+						<div layout vertical center center-justified class="padded">
+							<div>You don't seem to have any characters yet</div>
+							<paper-button class="addCharacter red-button" raised>Add Character</paper-button>
+						</div>
+					{{/if}}
 				{{else}}
 					<div layout vertical center center-justified class="padded">
-						<div>You don't seem to have any characters :(</div>
-						<paper-button class="addCharacter red-button" raised>Add Character</paper-button>
+						<div>You must sign in to view your characters</div>
 					</div>
 				{{/if}}
-			{{else}}
-				<div layout vertical center center-justified class="padded">
-					<div>You must sign in to view your characters</div>
-				</div>
-			{{/if}}
-		<div class="fab-buffer"></div>
-		<paper-fab class="floatyButton addCharacter"
-				   icon="add"
-				   title="Add"
-				   role="button"
-				   tabindex="0"
-				   aria-label="Add"
-				   hero-id="main"></paper-fab>
-	</div>
-</template>
\ No newline at end of file
+			<div class="fab-buffer"></div>
+			<paper-fab class="floatyButton addCharacter"
+					   icon="add"
+					   title="Add"
+					   role="button"
+					   tabindex="0"
+					   aria-label="Add"
+					   hero-id="main"></paper-fab>
+		</div>
+	</app-header-layout>
+</template>
diff --git a/rpg-docs/client/views/characterList/characterList.js b/rpg-docs/client/views/characterList/characterList.js
index a25628f2..825a6fb7 100644
--- a/rpg-docs/client/views/characterList/characterList.js
+++ b/rpg-docs/client/views/characterList/characterList.js
@@ -1,20 +1,26 @@
 Template.characterList.helpers({
-	characterDetails: function(){
-		var char = Characters.findOne(
-			this._id,
-			{fields: {name: 1, gender: 1, alignment: 1, race:1, color: 1}}
+	characters(){
+		var userId = Meteor.userId();
+		return Characters.find(
+			{
+				$or: [
+					{readers: userId},
+					{writers: userId},
+					{owner: userId},
+				]
+			},
+			{
+				fields: {name: 1, picture: 1, color: 1, race: 1, alignment: 1, gender: 1},
+				sort: {name: 1},
+			}
 		);
-		char.title = char.name;
-		char.field = "base";
-		char.class = "characterCard";
-		return char;
-	}
-});
+	},
+	initials(name){
+		return name.replace(/[^A-Z]/g, "");
+	},
+})
 
 Template.characterList.events({
-	"tap .characterCard": function(event, instance){
-		Router.go("characterSheet", {_id: this._id});
-	},
 	"tap .addCharacter": function(event, template) {
 		GlobalUI.showDialog({
 			heading: "New Character",
diff --git a/rpg-docs/client/views/characterList/characterSideList.css b/rpg-docs/client/views/characterList/characterSideList.css
index 29272c1a..e48e0b94 100644
--- a/rpg-docs/client/views/characterList/characterSideList.css
+++ b/rpg-docs/client/views/characterList/characterSideList.css
@@ -1,23 +1,9 @@
-.singleLineItem {
-	color: black;
-	color: rgba(0, 0, 0, 0.870588);
-	cursor: pointer;
-	overflow: hidden;
-	padding: 8px 0 8px 16px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	text-decoration: none;
-}
+/*
+	prevent character names from wrapping
+ */
 
-.singleLineItem iron-icon {
-	height: 8px;
-	margin-right: 8px;
-	width: 8px;
-}
-
-.singleLineItem div {
-	text-overflow: ellipsis;
-	/* Required for text-overflow to do anything */
+.character-name {
 	white-space: nowrap;
 	overflow: hidden;
+	text-overflow: ellipsis;
 }
diff --git a/rpg-docs/client/views/characterList/characterSideList.html b/rpg-docs/client/views/characterList/characterSideList.html
index f07e4771..5ba80b22 100644
--- a/rpg-docs/client/views/characterList/characterSideList.html
+++ b/rpg-docs/client/views/characterList/characterSideList.html
@@ -1,13 +1,13 @@
 <template name="characterSideList">
-	<core-item icon="social:people" label="Characters"></core-item>
 	{{#if characters.count}}
-		<div>
+		<div class="side-list">
 			{{#each characters}}
-				<a href={{pathFor route="characterSheet" data=this}}
-				   class="singleLineItem characterRepresentative"
-					 layout horizontal center>
-					<iron-icon icon="image:brightness-1"></iron-icon>
-					<div>{{name}}</div>
+				<a href={{pathFor route="characterSheet" data=this}} tabindex="-1" class="side-list-character">
+					<paper-item class="short">
+						<div class="character-name">
+							{{name}}
+						</div>
+					</paper-item>
 				</a>
 			{{/each}}
 		</div>
diff --git a/rpg-docs/client/views/characterList/characterSideList.js b/rpg-docs/client/views/characterList/characterSideList.js
index a0a2220c..915bf87a 100644
--- a/rpg-docs/client/views/characterList/characterSideList.js
+++ b/rpg-docs/client/views/characterList/characterSideList.js
@@ -18,7 +18,7 @@ Template.characterSideList.helpers({
 				sort: {name: 1},
 			}
 		);
-	}
+	},
 });
 
 Template.characterSideList.events({
diff --git a/rpg-docs/client/views/layout/layout.html b/rpg-docs/client/views/layout/layout.html
index 3b3b8e0d..1ca08b88 100644
--- a/rpg-docs/client/views/layout/layout.html
+++ b/rpg-docs/client/views/layout/layout.html
@@ -4,38 +4,49 @@
 			<app-header-layout mode="seamed" class="white">
 				<div id="accountSummary">
 					{{#if currentUser}}
-						<div id="profileLink"
+						<a href="profile"
 							 style="text-decoration: underline; cursor: pointer; font-size: 16px;">
 							{{profileLink}}
-						</div>
+						</a>
 					{{else}}
 						<a href="/sign-in" style="color: white;">Sign in</a>
 					{{/if}}
 				</div>
 				<div id="navPanel">
-					<paper-icon-item id="homeNav" icon="home">
-						<iron-icon icon="home" item-icon></iron-icon>
-						Home
-					</paper-icon-item>
-					{{> characterSideList}}
-					<paper-icon-item id="guide">
-						<iron-icon icon="social:school" item-icon></iron-icon>
-						Guide
-					</paper-icon-item>
+					<a href="/">
+						<paper-icon-item id="homeNav">
+							<iron-icon icon="home" item-icon></iron-icon>
+							Home
+						</paper-icon-item>
+					</a>
+					<a href="/characterList">
+						<paper-icon-item id="characters">
+							<iron-icon icon="social:people" item-icon></iron-icon>
+							Characters
+						</paper-icon-item>
+					</a>
+					<a href="/guide">
+						<paper-icon-item id="guide">
+							<iron-icon icon="social:school" item-icon></iron-icon>
+							Guide
+						</paper-icon-item>
+					</a>
 					<paper-icon-item id="feedback">
 						<iron-icon icon="bug-report" item-icon></iron-icon>
 						Send Feedback
 					</paper-icon-item>
-					<paper-icon-item id="changeLog">
-						<iron-icon icon="list" item-icon></iron-icon>
-						Change Log
-					</paper-icon-item>
+					<a href="changeLog">
+						<paper-icon-item id="changeLog">
+							<iron-icon icon="list" item-icon></iron-icon>
+							Change Log
+						</paper-icon-item>
+					</a>
+					<hr style="margin: 16px 0 24px 0;">
+					{{> characterSideList}}
 				</div>
 			</app-header-layout>
 		</app-drawer>
-		<app-header-layout fullbleed>
-			{{> yield}}
-		</app-header-layout>
+		{{> yield}}
 	</app-drawer-layout>
 	<paper-toast id="global-toast" duration="5000"></paper-toast>
 	{{> dialogStack}}
diff --git a/rpg-docs/client/views/layout/layout.js b/rpg-docs/client/views/layout/layout.js
index 69edbf8e..e2852bd5 100644
--- a/rpg-docs/client/views/layout/layout.js
+++ b/rpg-docs/client/views/layout/layout.js
@@ -29,15 +29,10 @@ const closeDrawer = function(instance){
 }
 
 Template.layout.events({
-	"tap #homeNav": function(event, instance){
-		Router.go("/");
+	"click app-drawer a": function(event, instance){
 		closeDrawer(instance);
 	},
-	"tap #profileLink": function(event, instance){
-		Router.go("profile");
-		closeDrawer(instance);
-	},
-	"tap #feedback": function(event, instance) {
+	"click #feedback": function(event, instance) {
 		pushDialogStack({
 			template: "feedback",
 			element: event.currentTarget,
@@ -48,16 +43,8 @@ Template.layout.events({
 						text: e && e.details || "Feedback submitted"
 					});
 				});
-			}
+			},
 		});
 		closeDrawer(instance);
 	},
-	"tap #changeLog": function(event, instance) {
-		Router.go("changeLog");
-		closeDrawer(instance);
-	},
-	"tap #guide": function(event, instance) {
-		Router.go("guide");
-		closeDrawer(instance);
-	},
 });
diff --git a/rpg-docs/client/views/layout/polymerImports.html b/rpg-docs/client/views/layout/polymerImports.html
index 4d3e71b2..b751207c 100644
--- a/rpg-docs/client/views/layout/polymerImports.html
+++ b/rpg-docs/client/views/layout/polymerImports.html
@@ -2,8 +2,8 @@
 	<script>
 		/* this script must run before Polymer is imported */
 		window.Polymer = {
-		  dom: 'shadow',
-		  lazyRegister: true
+			dom: "shadow",
+			lazyRegister: true,
 		};
 	</script>
 	<link rel="import" href="/components/app-layout/app-layout.html">
@@ -22,6 +22,7 @@
 <!--<link rel="import" href="/components/iron-icons/notification-icons.html">-->
 <!--<link rel="import" href="/components/iron-icons/places-icons.html">-->
 	<link rel="import" href="/components/iron-icons/social-icons.html">
+	<link rel="import" href="/components/iron-image/iron-image.html">
 
 	<link rel="import" href="/components/neon-animation/neon-animation.html">
 	<link rel="import" href="/components/neon-animation/neon-animations.html">
@@ -29,6 +30,7 @@
 	<link rel="import" href="/components/paper-button/paper-button.html">
 	<link rel="import" href="/components/paper-dialog/paper-dialog.html">
 	<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
+	<link rel="import" href="/components/paper-fab/paper-fab.html">
 	<link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
 	<link rel="import" href="/components/paper-input/paper-input.html">
 	<link rel="import" href="/components/paper-input/paper-textarea.html">
@@ -36,6 +38,7 @@
 	<link rel="import" href="/components/paper-listbox/paper-listbox.html">
 	<link rel="import" href="/components/paper-material/paper-material.html">
 	<link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
+	<link rel="import" href="/components/paper-ripple/paper-ripple.html">
 	<link rel="import" href="/components/paper-slider/paper-slider.html">
 	<link rel="import" href="/components/paper-tabs/paper-tabs.html">
 	<link rel="import" href="/components/paper-toast/paper-toast.html">
diff --git a/rpg-docs/public/custom_components/app-theme.html b/rpg-docs/public/custom_components/app-theme.html
index f9c0b0f1..401c579c 100644
--- a/rpg-docs/public/custom_components/app-theme.html
+++ b/rpg-docs/public/custom_components/app-theme.html
@@ -3,5 +3,13 @@
 <link rel="import" href="../components/paper-styles/classes/typography.html">
 
 <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
-
+	--primary-color: #424242;
+	--light-primary-color: #666;
+	--dark-primary-color: #222;
+	--accent-color: #d13b2e;
+	--light-accent-color: #ff5a4b;
+	--dark-accent-color: #ad2a1f;
+	paper-item.short {
+		--paper-item-min-height: 32px;
+	}
 </style>
diff --git a/rpg-docs/server/publications/characterList.js b/rpg-docs/server/publications/characterList.js
index 5a558fee..b8c24b83 100644
--- a/rpg-docs/server/publications/characterList.js
+++ b/rpg-docs/server/publications/characterList.js
@@ -22,6 +22,7 @@ Meteor.publish("characterList", function(){
 				writers:1,
 				owner: 1,
 				color: 1,
+				picture: 1,
 			}
 		}
 	);