diff --git a/app/views/lobby/home.scala.html b/app/views/lobby/home.scala.html
index 9fb9c5419a..199d58275c 100644
--- a/app/views/lobby/home.scala.html
+++ b/app/views/lobby/home.scala.html
@@ -49,6 +49,7 @@ underchat = underchat.some) {
       </a>
       <div class="filter"></div>
       <div id="hooks"></div>
+      <div id="hooks_chart"><div class="canvas"></div></div>
       <a class="no_hook">@trans.noGameAvailableRightNowCreateOne()</a>
     </div>
   </div>
diff --git a/public/javascripts/big.js b/public/javascripts/big.js
index 3694e67673..ea163e0440 100644
--- a/public/javascripts/big.js
+++ b/public/javascripts/big.js
@@ -1931,16 +1931,31 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
     var $newpostsinner = $newposts.find('.undertable_inner').scrollTop(999999);
     var $hooks = $wrap.find('#hooks');
     var $noHook = $wrap.find('.no_hook');
+    var $canvas = $wrap.find('.canvas');
     var $userTag = $('#user_tag');
     var isRegistered = $userTag.length > 0
     var myElo = isRegistered ? parseInt($userTag.data('elo')) : null;
     var animation = 800;
 
     var pool = [];
+    // add extra hooks
+    // for (elo = 800; elo <= 2200; elo += 200) {
+    //   for (time = 0; time <= 60; time += 6) {
+    //     pool.push({
+    //       username: elo + " and " + time,
+    //       id: elo + "and" + time,
+    //       elo: elo,
+    //       clock: time + " + 0"
+    //     });
+    //   }
+    // }
 
     var slots = [];
-    for (i = 1; i <= 16; i++) {
-      slots.push('<div id="slot' + i + '" style="top:' + (Math.floor((i - 1) / 4) * 128) + 'px;left:' + (((i - 1) % 4) * 128) + 'px;"></div>');
+    for (i = 1; i <= 12; i++) {
+      var j = (i > 5) ? (i > 7) ? i + 4 : i + 2 : i;
+      var top = Math.floor((j - 1) / 4) * 128;
+      var left = ((j - 1) % 4) * 128;
+      slots.push('<div id="slot' + i + '" style="top:' + top + 'px;left:' + left + 'px;"></div>');
     }
     $hooks.html(slots.join(''));
 
@@ -2094,7 +2109,7 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
       var filter = lichess_preload.filter;
       var seen = [];
       var hidden = 0;
-      var visible = 0;
+      var visible = [];
       _.each(pool, function(hook) {
         var hide = (filter.variant != null && filter.variant != hook.variant) ||
           (filter.mode != null && filter.mode != hook.mode) ||
@@ -2102,18 +2117,19 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
           (filter.eloDiff > 0 && (!hook.elo || hook.elo > (myElo + filter.eloDiff) || hook.elo < (myElo - filter.eloDiff)));
         var hash = hook.mode + hook.variant + hook.clock;
         if (hide) {
-          $('#' + hook.id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
+          $wrap.find('.' + hook.id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
             $(this).remove();
           });
           hidden++;
         } else if (_.contains(seen, hash)) {
-          $('#' + hook.id).filter(':visible').hide();
+          $wrap.find('.' + hook.id).filter(':visible').hide();
           hidden++;
         } else {
-          var $h = $('#' + hook.id);
-          visible++;
+          var $h = $wrap.find('.' + hook.id);
+          visible.push(hook);
           if (!$h.length) {
             $(_.shuffle($hooks.find('>div:empty'))[0]).html($(renderHook(hook)).fadeIn(animation));
+            $canvas.append($(renderPlot(hook)).fadeIn(animation));
           } else {
             $h.not(':visible').fadeIn(animation);
           }
@@ -2121,33 +2137,44 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
         seen.push(hash);
       });
       $hooks.find('div.hook').each(function() {
-        var id = $(this).attr('id');
+        var id = $(this).data('id');
         if (!_.find(pool, function(h) {
           return h.id == id;
         })) {
-          $(this).fadeOut(animation, function() {
+          $wrap.find('.' + id).fadeOut(animation, function() {
             $(this).remove();
           });
         }
       });
 
-      $noHook.stop().animate({
-        opacity: visible == 0 ? 1 : 0
-      }, animation);
+      $noHook.toggle(visible.length == 0);
       $wrap
         .find('a.filter')
         .toggleClass('on', filter.mode != null || filter.variant != null || filter.speed != null || filter.eloDiff > 0)
         .find('span.number').text('(' + hidden + ')');
     }
 
+    function renderPlot(hook) {
+      var width = height = 240;
+      var elo = Math.max(1000, Math.min(2000, hook.elo || 1200));
+      var bottom = Math.round((elo - 1000) / 1000 * height);
+      if (hook.clock) {
+        var parts = hook.clock.replace(/\s/g, '').split('+');
+        var speed = Math.min(3600, parseInt(parts[0]) * 60 + parseInt(parts[1]) * 30);
+      } else speed = 3600;
+      var left = Math.round(speed / 3600 * width);
+      // var bottom = left = 10;
+      return '<span data-id="' + hook.id + '" class="plot '+ hook.id+'" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>';
+    }
+
     function renderHook(hook) {
       hook.action = hook.uid == lichess_sri ? "cancel" : "join";
       if (hook.emin && hook.action == "join" && (myElo < parseInt(hook.emin) || myElo > parseInt(hook.emax))) return "";
-      var html = '<div id="' + hook.id + '" class="hook ' + hook.action + '">';
+      var html = '<div data-id="' + hook.id + '" class="hook ' + hook.id + ' ' + hook.action + '">';
       var isEngine = hook.engine && hook.action == 'join';
       var userClass = isEngine ? "engine" : "";
       if (hook.elo) {
-        html += '<a class="opponent ulpt" href="/@/' + hook.username +'">' + hook.username.substr(0, 14) + '</a>';
+        html += '<a class="opponent ulpt" href="/@/' + hook.username + '">' + hook.username.substr(0, 14) + '</a>';
         html += '<span class="elo">' + hook.elo + '</span>';
         html += isEngine ? '<span class="engine_mark"></span>' : '';
       } else {
@@ -2185,6 +2212,11 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
       return $hook;
     }
 
+    $wrap.on('mouseenter', '.plot, div.hook', function() {
+      $wrap.find('.' + $(this).data('id')).addClass('hover');
+    }).on('mouseleave', '.plot, div.hook', function(e) {
+      $wrap.find('.' + $(this).data('id')).removeClass('hover');
+    });
     $hooks.on('click', 'div.hook a.opponent', function(e) {
       e.stopPropagation();
       return true;
diff --git a/public/stylesheets/board.css b/public/stylesheets/board.css
index a696c4b86b..af908ba9d1 100644
--- a/public/stylesheets/board.css
+++ b/public/stylesheets/board.css
@@ -445,10 +445,6 @@ div.lichess_table a.lichess_button.active {
   box-shadow: 0 0 9px #d85000;
   border: 1px solid #d85000;
 }
-#hooks div.hook:hover,
-#hooks_wrap > a.no_hook:hover {
-  box-shadow: 0 0 9px #d85000;
-}
 
 div.lichess_current_player {
   height: 64px;
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index 110eb51635..cf32714461 100644
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@@ -1343,6 +1343,29 @@ div.game_config div.color_submits button.random span {
   height: 512px;
   position: relative;
 }
+#hooks_chart {
+  position: absolute;
+  top: 128px;
+  left: 128px;
+  width: 256px;
+  height: 256px;
+  background: rgba(255, 255, 255, 0.4);
+}
+#hooks_chart .canvas {
+  position: relative;
+  width: 240px;
+  height: 240px;
+  margin: 8px;
+}
+#hooks_chart .plot {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  background: #d0d0d0;
+  border-radius: 16px;
+  border: 3px solid #666;
+  cursor: pointer;
+}
 #hooks_wrap > a.no_hook {
   position: absolute;
   top: 192px;
@@ -1358,7 +1381,6 @@ div.game_config div.color_submits button.random span {
   text-align: center;
   box-shadow:0 0 5px #333;
   text-decoration: none;
-  opacity: 0;
 }
 #hooks > div {
   position: absolute;
@@ -1383,8 +1405,14 @@ div.game_config div.color_submits button.random span {
 #hooks div.hook.cancel {
   background-position: -4px -132px;
 }
-#hooks div.hook:hover {
-  background-color: #f0f0f0;
+#hooks_chart .plot.hover,
+#hooks div.hook.hover {
+  background-color: #f6f6f6;
+}
+#hooks_chart .plot.hover,
+#hooks div.hook.hover,
+#hooks_wrap > a.no_hook:hover {
+  box-shadow: 0 0 9px #d85000;
 }
 #hooks div.hook a {
   color: #444;
diff --git a/todo b/todo
index 867287de36..2b5b98e3c6 100644
--- a/todo
+++ b/todo
@@ -60,6 +60,8 @@ players world map
 account closed accounts in team counts
 IE10 no sound toggle http://en.lichess.org/forum/lichess-feedback/notification-of-game-creation#3
 filter current games for watching http://en.lichess.org/forum/lichess-feedback/viewing-current-games-suggestion#2
+declined challenge still appears
+no time data http://en.lichess.org/x9tls3mh/stats
 
 ---