diff --git a/web/app/assets/javascripts/hoverRecording.js b/web/app/assets/javascripts/hoverRecording.js
index 68718743c..46f7d05bd 100644
--- a/web/app/assets/javascripts/hoverRecording.js
+++ b/web/app/assets/javascripts/hoverRecording.js
@@ -1,14 +1,72 @@
 (function(context,$) {
 
-    "use strict";
-    context.JK = context.JK || {};
-    context.JK.RecordingHoverBubble = function(app) {
+  "use strict";
+  context.JK = context.JK || {};
+  context.JK.RecordingHoverBubble = function(recordingId, position) {
 
-      function initialize() {
+    var logger = context.JK.logger;
+    var rest = context.JK.Rest();
+    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
+    var hoverSelector = "#recording-hover";
 
-      }
-      
-      this.initialize = initialize;
-      this.showBubble = showBubble;
-    }
+    this.showBubble = function() {
+      $(hoverSelector).css({left: position.left-100, top: position.top});
+      $(hoverSelector).fadeIn(500);
+
+      rest.getClaimedRecording(recordingId)
+        .done(function(response) {
+          $(hoverSelector).html('');
+
+          // musicians
+          var musicianHtml = '';
+          $.each(response.musicians, function(index, val) {
+              var instrumentHtml = '';
+
+              musicianHtml += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
+              musicianHtml += '<td width="75"><a href="#">' + val.name + '</a></td>';
+
+              instrumentHtml = '<td><div class="nowrap">';
+              $.each(val.instruments, function(index, instrument) {
+                instrumentHtml += '<img src="' + instrumentLogoMap[instrument.instrument_id] + '" width="24" height="24" />&nbsp;';
+              });
+
+              instrumentHtml += '</div></td>';
+
+              musicianHtml += instrumentHtml;
+              musicianHtml += '</tr>';
+          });
+
+          var template = $('#template-hover-recording').html();
+
+          var recordingHtml = context.JK.fillTemplate(template, {
+              avatar_url: context.JK.resolveAvatarUrl(response.photo_url),
+              name: response.name,
+              location: response.location,
+              friend_count: response.friend_count,
+              follower_count: response.follower_count
+          });
+
+          $(hoverSelector).append('<h2>Recording Detail</h2>' + recordingHtml);
+        })
+        .fail(function(xhr) {
+          if(xhr.status >= 500) {
+              context.JK.fetchUserNetworkOrServerFailure();
+          }
+          else if(xhr.status == 404) {
+              context.JK.entityNotFound("Recording");
+          }
+          else {
+              context.JK.app.ajaxError(arguments);
+          }
+        });
+    };
+
+    this.hideBubble = function() {
+      $(hoverSelector).hide();
+    };
+
+    this.id = function() {
+      return hoverSelector;
+    };
+  }
 })(window,jQuery);
\ No newline at end of file
diff --git a/web/app/assets/javascripts/hoverSession.js b/web/app/assets/javascripts/hoverSession.js
index 7bfe105cf..e09845841 100644
--- a/web/app/assets/javascripts/hoverSession.js
+++ b/web/app/assets/javascripts/hoverSession.js
@@ -1,14 +1,67 @@
 (function(context,$) {
 
-    "use strict";
-    context.JK = context.JK || {};
-    context.JK.SessionHoverBubble = function(app) {
+  "use strict";
+  context.JK = context.JK || {};
+  context.JK.SessionHoverBubble = function(sessionId, position) {
 
-      function initialize() {
+    var logger = context.JK.logger;
+    var rest = context.JK.Rest();
+    var instrumentLogoMap = context.JK.getInstrumentIconMap24();
+    var hoverSelector = "#session-hover";
 
-      }
-      
-      this.initialize = initialize;
-      this.showBubble = showBubble;
-    }
+    this.showBubble = function() {
+      $(hoverSelector).css({left: position.left-100, top: position.top});
+      $(hoverSelector).fadeIn(500);
+
+      rest.getSessionHistory(sessionId)
+        .done(function(response) {
+          $(hoverSelector).html('');
+
+          // musicians
+          var musicianHtml = '';
+          $.each(response.users, function(index, val) {
+              var instrumentHtml = '';
+
+              musicianHtml += '<tr><td width="50"><a href="#" class="avatar-tiny"><img src="' + context.JK.resolveAvatarUrl(val.photo_url) + '" /></a></td>';
+              musicianHtml += '<td width="75"><a href="#">' + val.name + '</a></td>';
+
+              instrumentHtml = '<td><div class="nowrap">';
+              $.each(val.instruments, function(index, instrument) {
+                instrumentHtml += '<img src="' + instrumentLogoMap[instrument.instrument_id] + '" width="24" height="24" />&nbsp;';
+              });
+
+              instrumentHtml += '</div></td>';
+
+              musicianHtml += instrumentHtml;
+              musicianHtml += '</tr>';
+          });
+
+          var template = $('#template-hover-session').html();
+
+          var sessionHtml = context.JK.fillTemplate(template, {
+          });
+
+          $(hoverSelector).append('<h2>Session Detail</h2>' + sessionHtml);
+        })
+        .fail(function(xhr) {
+          if(xhr.status >= 500) {
+              context.JK.fetchUserNetworkOrServerFailure();
+          }
+          else if(xhr.status == 404) {
+              context.JK.entityNotFound("Session");
+          }
+          else {
+              context.JK.app.ajaxError(arguments);
+          }
+        });
+    };
+
+    this.hideBubble = function() {
+      $(hoverSelector).hide();
+    };
+
+    this.id = function() {
+      return hoverSelector;
+    };
+  }
 })(window,jQuery);
\ No newline at end of file
diff --git a/web/app/views/api_music_sessions/history_show.rabl b/web/app/views/api_music_sessions/history_show.rabl
index 7296aca8f..9d3ea1c81 100644
--- a/web/app/views/api_music_sessions/history_show.rabl
+++ b/web/app/views/api_music_sessions/history_show.rabl
@@ -1,6 +1,6 @@
 object @history
 
-attributes :music_session_id, :description, :genres
+attributes :music_session_id, :description, :genres, :created_at
 
 node :share_url do |history|
   unless history.share_token.nil?
diff --git a/web/app/views/clients/_hoverRecording.html.erb b/web/app/views/clients/_hoverRecording.html.erb
index 12627f1b1..a6c2415ec 100644
--- a/web/app/views/clients/_hoverRecording.html.erb
+++ b/web/app/views/clients/_hoverRecording.html.erb
@@ -1,55 +1,36 @@
-<!-- recording hover -->
-<div id="recording-detail-1" class="hidden bubble">
-<h2>Recording Detail</h2>
-<div class="bubble-inner">
-<h3>Twelve Weeks</h3>
-<div class="small left">JAZZ</div>
-<div class="small right">01/25/14 - 11:23 pm</div>
-<br clear="all" />
-<div class="f11 mt5 mb5">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
-<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /><br />
-<br />
-<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
-<div class="left"><h3>Fox Force Five</h3>
-<small>Richmond, VA</small></div>
-<br clear="all" /><br />
-MUSICIANS:
-<!-- sub-table of musicians -->
-                <table class="musicians" cellpadding="0" cellspacing="5">
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
-                <td><a href="#">John Doe</a></td>
-                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
-                <td><a href="#">Cassandra Defrenza</a></td>
-                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
-                <td><a href="#">Jimmy Stratham</a></td>
-                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
-                </tr>
-                </table><br /><br />
-
-                <div align="center">
-<div class="left"><a href="#" class="button-orange">LIKE</a></div>
-<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
-<div class="left"><a href="#" class="button-orange">SHARE</a></div>
-</div>
-<br /><br />
-
+<div id="recording-hover" class="hidden bubble">
 
 </div>
 
-</div>
-
-</div>
-
-
-<script type="text/template" id="template-hover-bubble">
-  <div class="hover-bubble">
-
+<script type="text/template" id="template-hover-recording">
+  <div class="bubble-inner">
+    <h3>{title}</h3>
+    <div class="small left">{genre}</div>
+    <div class="small right">{created_at}</div>
+    <br clear="all" />
+    <div class="f11 mt5 mb5">{description}</div>
+    <div class="small">
+      {play_count} <img src="/assets/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;
+      {comment_count} <img src="/assets/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;
+      {like_count} <img src="/assets/content/icon_like.png" width="12" height="12" align="absmiddle" />
+    </div>
+    <br /><br />
+    <a href="#" class="avatar_large left mr20"><img src="{avatar_url}" /></a>
+    <div class="left">
+      <h3>{creator_title}</h3>
+      <small>{location}</small>
+    </div>
+    <br clear="all" /><br />
+    MUSICIANS:
+    <table class="musicians" cellpadding="0" cellspacing="5">
+      {musicians}
+    </table>
+    <br /><br />
+    <div align="center">
+      <div class="left"><a href="#" class="button-orange">LIKE</a></div>
+      <div class="left"><a href="#" class="button-orange">COMMENT</a></div>
+      <div class="left"><a href="#" class="button-orange">SHARE</a></div>
+    </div>
+    <br /><br />
   </div>
 </script>
\ No newline at end of file
diff --git a/web/app/views/clients/_hoverSession.html.erb b/web/app/views/clients/_hoverSession.html.erb
index b5e190b04..cce8897f5 100644
--- a/web/app/views/clients/_hoverSession.html.erb
+++ b/web/app/views/clients/_hoverSession.html.erb
@@ -1,49 +1,28 @@
-<!-- session hover -->
-<div id="session-detail-1" class="hidden bubble">
-<h2>Session Detail</h2>
-<div class="bubble-inner">
-<div class="small left">JAZZ</div>
-<div class="small right">01/25/14 - 11:23 pm</div>
-<br clear="all" />
-<div class="f11 mt5 mb5">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
-<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /></div><br />
-
-MUSICIANS:
-<!-- sub-table of musicians -->
-                <table class="musicians" cellpadding="0" cellspacing="5">
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
-                <td><a href="#">John Doe</a></td>
-                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
-                <td><a href="#">Cassandra Defrenza</a></td>
-                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
-                </tr>
-                <tr>
-                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
-                <td><a href="#">Jimmy Stratham</a></td>
-                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
-                </tr>
-                </table><br /><br />
-
-                <div align="center">
-<div class="left"><a href="#" class="button-orange">LIKE</a></div>
-<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
-<div class="left"><a href="#" class="button-orange">SHARE</a></div>
-</div>
-<br /><br />
-
+<div id="session-hover" class="hidden bubble">
 
 </div>
 
-</div>
-
-
-
-<script type="text/template" id="template-hover-bubble">
-  <div class="hover-bubble">
-
+<script type="text/template" id="template-hover-session">
+  <div class="bubble-inner">
+    <div class="small left">{genre}</div>
+    <div class="small right">{created_at}</div>
+    <br clear="all" />
+    <div class="f11 mt5 mb5">{description}</div>
+    <div class="small">
+      {comment_count} <img src="/assets/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;
+      {like_count} <img src="/assets/content/icon_like.png" width="12" height="12" align="absmiddle" />
+    </div>
+    <br />
+    MUSICIANS:
+    <table class="musicians" cellpadding="0" cellspacing="5">
+      {musicians}
+    </table>
+    <br /><br />
+    <div align="center">
+      <div class="left"><a href="#" class="button-orange">LIKE</a></div>
+      <div class="left"><a href="#" class="button-orange">COMMENT</a></div>
+      <div class="left"><a href="#" class="button-orange">SHARE</a></div>
+    </div>
+    <br /><br />
   </div>
 </script>
\ No newline at end of file