diff --git a/components/Player.vue b/components/Player.vue
index 070337b..55f552e 100644
--- a/components/Player.vue
+++ b/components/Player.vue
@@ -8,7 +8,9 @@
         <span class="leaf-right" v-if="role.otherNight"></span>
         <span v-if="role.reminders.length" v-bind:class="['leaf-top' + role.reminders.length]"></span>
         <span class="leaf-orange" v-if="role.setup"></span>
+        <div>{{ role.name }}</div>
       </div>
+      <div class="ability" v-if="role.ability">{{ role.ability }}</div>
       <div class="name">{{ player.name }}</div>
     </div>
     <div class="reminder add"></div>
@@ -163,6 +165,7 @@
 
   #townsquare.public .token {
     background-image: url('../img/life.png');
+    div { display: none; }
     &:before, &:after, span { display: none; }
   }
 
@@ -186,6 +189,36 @@
         0 0 10px rgba(0,0,0,0.75);
   }
 
+  /***** Ability text *****/
+  #townsquare.public .ability { display: none; }
+  .circle .ability {
+    position: absolute;
+    padding: 5px 10px;
+    top: 20px;
+    right: 100%;
+    width: 200px;
+    z-index: 25;
+    font-size: 80%;
+    background: rgba(0,0,0,0.7);
+    border-radius: 10px;
+    border: 3px solid black;
+    text-align: left;
+    display: none;
+    &:after {
+      content: " ";
+      border: 10px solid transparent;
+      position: absolute;
+      left: 100%;
+      width: 0;
+      height: 0;
+      border-left-color: black;
+      top: 20px;
+      margin: 0 2px;
+    }
+  }
+
+  .player:hover .ability { display: block; }
+
   /***** Reminder token *****/
   .circle .reminder {
     background: url('../img/reminder.png') center center;
diff --git a/components/TownSquare.vue b/components/TownSquare.vue
index 65c2f6c..7fa89a9 100644
--- a/components/TownSquare.vue
+++ b/components/TownSquare.vue
@@ -33,7 +33,7 @@
           { name: "Sean", role: "recluse" },
           { name: "Petra", role: "undertaker" },
         ],
-        roles: new Map(roles.map(role => [role.name, role])),
+        roles: new Map(roles.map(role => [role.id, role])),
       }
     }
   }
@@ -49,6 +49,15 @@
         transform: rotate($rot * 1deg);
         @if $i - 1 <= $item-count / 2 {
           z-index: $item-count - $i + 1;
+          .ability {
+            left: 100%; right: auto;
+            &:after {
+              border-left-color: transparent;
+              border-right-color: black;
+              left: auto;
+              right: 100%;
+            }
+          }
         } @else {
           z-index: $i - 1;
         }
@@ -78,6 +87,10 @@
       transform-origin: 0 100%;
       text-align: center;
 
+      &:hover {
+        z-index: 25 !important;
+      }
+
       > * {
         margin-left: -100px;
         width: 200px;
@@ -85,23 +98,11 @@
     }
   }
 
-  .circle.size-5 li { @include on-circle($item-count: 5); }
-  .circle.size-6 li { @include on-circle($item-count: 6); }
-  .circle.size-7 li { @include on-circle($item-count: 7); }
-  .circle.size-8 li { @include on-circle($item-count: 8); }
-  .circle.size-9 li { @include on-circle($item-count: 9); }
-  .circle.size-10 li { @include on-circle($item-count: 10); }
-  .circle.size-11 li { @include on-circle($item-count: 11); }
-  .circle.size-12 li { @include on-circle($item-count: 12); }
-  .circle.size-13 li { @include on-circle($item-count: 13); }
-  .circle.size-14 li { @include on-circle($item-count: 14); }
-  .circle.size-15 li { @include on-circle($item-count: 15); }
-  .circle.size-16 li { @include on-circle($item-count: 16); }
-  .circle.size-17 li { @include on-circle($item-count: 17); }
-  .circle.size-18 li { @include on-circle($item-count: 18); }
-  .circle.size-19 li { @include on-circle($item-count: 19); }
-  .circle.size-20 li { @include on-circle($item-count: 20); }
-
+  @for $i from 5 through 20 {
+    .circle.size-#{$i} li {
+      @include on-circle($item-count: $i);
+    }
+  }
 
   // player circle
   .circle {
diff --git a/roles.json b/roles.json
index 59e46bb..267bb16 100644
--- a/roles.json
+++ b/roles.json
@@ -1,6 +1,7 @@
 [
   {
-    "name": "washerwoman",
+    "id": "washerwoman",
+    "name": "Washerwoman",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": true,
@@ -10,7 +11,8 @@
     "ability": "You start knowing 1 of 2 players is a particular Townsfolk."
   },
   {
-    "name": "librarian",
+    "id": "librarian",
+    "name": "Librarian",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": true,
@@ -20,7 +22,8 @@
     "ability": "You start knowing that 1 of 2 players is a particular Outsider. (Or that zero are in play)"
   },
   {
-    "name": "investigator",
+    "id": "investigator",
+    "name": "Investigator",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": true,
@@ -30,7 +33,8 @@
     "ability": "You start knowing 1 of 2 players is a particular Minion."
   },
   {
-    "name": "chef",
+    "id": "chef",
+    "name": "Chef",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": true,
@@ -40,7 +44,8 @@
     "ability": "You start knowing how many pairs of evil players there are."
   },
   {
-    "name": "empath",
+    "id": "empath",
+    "name": "Empath",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": true,
@@ -50,7 +55,8 @@
     "ability": "Each night, you learn how many of your 2 alive neighbours are evil."
   },
   {
-    "name": "fortuneteller",
+    "id": "fortuneteller",
+    "name": "Fortune Teller",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": true,
@@ -60,7 +66,8 @@
     "ability": "Each night, choose 2 players: you learn if either is a Demon. There is 1 good player that registers falsely to you."
   },
   {
-    "name": "undertaker",
+    "id": "undertaker",
+    "name": "Undertaker",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": false,
@@ -70,7 +77,8 @@
     "ability": "Each night*, you learn which character died by execution today."
   },
   {
-    "name": "monk",
+    "id": "monk",
+    "name": "Monk",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": false,
@@ -80,7 +88,8 @@
     "ability": "Each night*, choose a player (not yourself): they are safe from the Demon tonight."
   },
   {
-    "name": "ravenkeeper",
+    "id": "ravenkeeper",
+    "name": "Ravenkeeper",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": false,
@@ -90,7 +99,8 @@
     "ability": "If you die at night, you are woken to choose a player: you learn their character."
   },
   {
-    "name": "mayor",
+    "id": "mayor",
+    "name": "Mayor",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": false,
@@ -100,7 +110,8 @@
     "ability": "If only 3 players live & no execution occurs, your team wins. If you die at night, another player might die instead."
   },
   {
-    "name": "slayer",
+    "id": "slayer",
+    "name": "Slayer",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": false,
@@ -110,7 +121,8 @@
     "ability": "Once per game, during the day, publicly choose a player: if they are the Demon, they die."
   },
   {
-    "name": "soldier",
+    "id": "soldier",
+    "name": "Soldier",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": false,
@@ -120,7 +132,8 @@
     "ability": "You are safe from the Demon."
   },
   {
-    "name": "virgin",
+    "id": "virgin",
+    "name": "Virgin",
     "set": "TB",
     "team": "townsfolk",
     "firstNight": false,
@@ -130,7 +143,8 @@
     "ability": "The first time you are nominated, if the nominator is a Townsfolk, they are executed immediately."
   },
   {
-    "name": "butler",
+    "id": "butler",
+    "name": "Butler",
     "set": "TB",
     "team": "outsider",
     "firstNight": true,
@@ -140,7 +154,8 @@
     "ability": "Each night, choose a player (not yourself): tomorrow, you may only vote if they are voting too."
   },
   {
-    "name": "drunk",
+    "id": "drunk",
+    "name": "Drunk",
     "set": "TB",
     "team": "outsider",
     "firstNight": false,
@@ -150,7 +165,8 @@
     "ability": "You do not know you are the Drunk. You think you are a Townsfolk, but your ability malfunctions."
   },
   {
-    "name": "recluse",
+    "id": "recluse",
+    "name": "Recluse",
     "set": "TB",
     "team": "outsider",
     "firstNight": false,
@@ -160,7 +176,8 @@
     "ability": "You might register as evil and as a Minion or Demon, even if dead."
   },
   {
-    "name": "saint",
+    "id": "saint",
+    "name": "Saint",
     "set": "TB",
     "team": "outsider",
     "firstNight": false,
@@ -170,7 +187,8 @@
     "ability": "If you die by execution, your team loses."
   },
   {
-    "name": "baron",
+    "id": "baron",
+    "name": "Baron",
     "set": "TB",
     "team": "minion",
     "firstNight": false,
@@ -180,7 +198,8 @@
     "ability": "There are extra Outsiders in play. [+2 Outsiders]"
   },
   {
-    "name": "poisoner",
+    "id": "poisoner",
+    "name": "Poisoner",
     "set": "TB",
     "team": "minion",
     "firstNight": true,
@@ -190,7 +209,8 @@
     "ability": "Each night, choose a player: their ability malfunctions tonight and tomorrow day."
   },
   {
-    "name": "spy",
+    "id": "spy",
+    "name": "Spy",
     "set": "TB",
     "team": "minion",
     "firstNight": true,
@@ -200,7 +220,8 @@
     "ability": "Each night, you see the Grimoire. You might register as good and as a Townsfolk or Outsider, even if dead."
   },
   {
-    "name": "scarletwoman",
+    "id": "scarletwoman",
+    "name": "Scarlet Woman",
     "set": "TB",
     "team": "minion",
     "firstNight": false,
@@ -210,7 +231,8 @@
     "ability": "If there are 5 or more players alive (Travellers don't count) and the Demon dies, you become the Demon."
   },
   {
-    "name": "imp",
+    "id": "imp",
+    "name": "Imp",
     "set": "TB",
     "team": "demon",
     "firstNight": false,
diff --git a/roles.scss b/roles.scss
index 8d0d61e..31197b7 100644
--- a/roles.scss
+++ b/roles.scss
@@ -1,35 +1,32 @@
 $roles:
-  'baron' 'Baron',
-  'butler' 'Butler',
-  'chef' 'Chef',
-  'drunk' 'Drunk',
-  'empath' 'Empath',
-  'fortuneteller' 'Fortune Teller',
-  'imp' 'Imp',
-  'investigator' 'Investigator',
-  'librarian' 'Librarian',
-  'mayor' 'Mayor',
-  'monk' 'Monk',
-  'poisoner' 'Poisoner',
-  'recluse' 'Recluse',
-  'ravenkeeper' 'Ravenkeeper' 80%,
-  'saint' 'Saint',
-  'slayer' 'Slayer',
-  'soldier' 'Soldier',
-  'spy' 'Spy',
-  'scarletwoman' 'Scarlet Woman' 80%,
-  'undertaker' 'Undertaker' 85%,
-  'virgin' 'Virgin',
-  'washerwoman' 'Washerwoman' 75%;
+  'baron',
+  'butler',
+  'chef',
+  'drunk',
+  'empath',
+  'fortuneteller',
+  'imp',
+  'investigator',
+  'librarian',
+  'mayor',
+  'monk',
+  'poisoner',
+  'recluse',
+  'ravenkeeper' 80%,
+  'saint',
+  'slayer',
+  'soldier',
+  'spy',
+  'scarletwoman' 80%,
+  'undertaker' 85%,
+  'virgin',
+  'washerwoman' 75%;
 
-@each $img, $name, $fontsize in $roles {
+@each $img, $fontsize in $roles {
   .token.#{$img} {
     &:before {
       background-image: url('../img/icon-#{$img}.png');
     }
-    &:after {
-      content: '#{$name}';
-    }
     font-size: $fontsize;
   }