diff --git a/styles/app/avatar.styl b/styles/app/avatar.styl
index 825698c890..234d80c55d 100644
--- a/styles/app/avatar.styl
+++ b/styles/app/avatar.styl
@@ -38,11 +38,17 @@
 .character-sprites span
     position: absolute
 
+  table.customize td
+    padding: 10px
+    
   table.customize td div
     cursor: pointer
-    -webkit-transition: 0.25s ease-out
-    -moz-transition: 0.25s ease-out
-    transition: 0.25s ease-out
+    -webkit-transition: 0.5s ease-out
+    -moz-transition: 0.5s ease-out
+    transition: 0.5s ease-out
 
   table.customize td div:active
-    background-color: rgb(255, 242, 204);
\ No newline at end of file
+    background-color: rgb(255, 242, 204);
+    -webkit-transition: none
+    -moz-transition: none
+    transition: none
\ No newline at end of file
diff --git a/styles/app/female_sprites.styl b/styles/app/female_sprites.styl
index 9541f45ee1..e225aeee64 100644
--- a/styles/app/female_sprites.styl
+++ b/styles/app/female_sprites.styl
@@ -76,3 +76,46 @@
 .f_skin_asian {background-position: -3150px 0; width: 90px; height: 90px}
 .f_skin_black {background-position: -3240px 0; width: 90px; height: 90px}
 .f_skin_white {background-position: -3330px 0; width: 90px; height: 90px}
+
+
+
+// narrower spriting for customize modal
+.customize
+	// shared option-box styles
+	[class^="f_hair"], [class^="f_skin"], [class^="f_armor"], .f_head_0
+		width: 60px;
+		height: 60px;
+		background-color: grey;
+		border: 1px solid black;
+
+	// head
+	.f_head_0
+		background-position: -1917px -9px; 
+	
+	// hair
+	.f_hair_white
+		background-position: -2009px -8px;
+	.f_hair_brown
+		background-position: -2099px -8px;
+	.f_hair_black
+		background-position: -2189px -8px;
+	.f_hair_blond
+		background-position: -2279px -8px;
+		
+	// skin
+	.f_skin_dead
+		background-position: -2997px -20px;
+	.f_skin_orc
+		background-position: -3087px -20px;
+	.f_skin_asian
+		background-position: -3177px -20px;
+	.f_skin_black
+		background-position: -3267px -20px;
+	.f_skin_white
+		background-position: -3357px -20px;
+		
+	// starting armor
+	.f_armor_0_v2
+		background-position: -2817px -35px;
+	.f_armor_0_v1
+		background-position: -2907px -35px;
\ No newline at end of file
diff --git a/styles/app/male_sprites.styl b/styles/app/male_sprites.styl
index 4171ce6c97..6be2b99b43 100644
--- a/styles/app/male_sprites.styl
+++ b/styles/app/male_sprites.styl
@@ -66,3 +66,39 @@
 .m_skin_asian {background-position: -2700px 0; width: 90px; height: 90px}
 .m_skin_black {background-position: -2790px 0; width: 90px; height: 90px}
 .m_skin_white {background-position: -2880px 0; width: 90px; height: 90px}
+
+
+
+// narrower spriting for customize modal
+.customize
+	[class^="m_hair"], [class^="m_skin"], .m_head_0
+		width: 60px;
+		height: 60px;
+		background-color: grey;
+		border: 1px solid black;
+
+	// head
+	.m_head_0
+		background-position: -1557px -9px; 
+
+	// hair
+	.m_hair_blond
+		background-position: -1647px -4px;
+	.m_hair_black
+		background-position: -1737px -4px;
+	.m_hair_brown
+		background-position: -1827px -4px;
+	.m_hair_white
+		background-position: -1917px -4px;
+		
+	// skin
+	.m_skin_dead
+		background-position: -2547px -20px;
+	.m_skin_orc
+		background-position: -2637px -20px;
+	.m_skin_asian
+		background-position: -2727px -20px;
+	.m_skin_black
+		background-position: -2817px -20px;
+	.m_skin_white
+		background-position: -2907px -20px;
\ No newline at end of file
diff --git a/views/app/index.html b/views/app/index.html
index 2217db7382..2d6e25d28f 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -1,3 +1,12 @@
+<!--  $table-of-contents
+===================================
+do a find for the string after "→"
+-----------------------------------
+→ $modal-template
+→ $customizations-modal
+→ $avatar-template
+=================================== -->
+
 <Title:>
   HabitRPG | Gamify Your Life
 
@@ -127,11 +136,20 @@
       </@footer>
   </app:myModal>
 
+  <!-- $customizations-modal -->
   <app:myModal modalId="customizations-modal" header="Customize">
       {#with _user.preferences}
-      <table class='customize'><tr>
-          <td><div class='m_head_0' x-bind='click:customizeGender' data-value='m'></div></td>
-          <td><div class='f_head_0' x-bind='click:customizeGender' data-value='f'></div></td>
+
+      <table>
+        <td>
+          <app:avatar profile={_user} />
+        </td>
+      </table>
+      <table class='customize'>
+        <tr>Change Gender:</tr>
+        <tr>
+          <td><div class='m_head_0' x-bind='click:customizeGender' data-value='m'></div>Male</td>
+          <td><div class='f_head_0' x-bind='click:customizeGender' data-value='f'></div>Female</td>
       </tr></table>
 
       <table class='customize'><tr>
@@ -382,6 +400,8 @@
     </div>
   </footer>
   
+
+<!-- $modal-template -->
 <myModal: nonvoid>
   {{#if @noDismiss}}<div data-action="backdrop" class="modal-backdrop"></div>{{/}}
   <div class="modal {{#unless @noDismiss}}hide{{/}}" id={{@modalId}} role="dialog">
@@ -547,6 +567,7 @@
   </li>
   {/}
 
+<!-- $avatar-template -->
 <avatar:>
     <div class="avatar {{#if @main}}main-avatar{{/}}" data-toggle='{{#if @main}}modal{{/}}' data-target='{{#if @main}}#customizations-modal{{/}}'>
         <div class='character-sprites'>