diff --git a/public/index.html b/public/index.html
index 5954982..221374e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -74,7 +74,7 @@
     <div class="row">
       <div class="col-xs-12 field field-hand">
         {{#each cards}}
-        <div class="card">
+        <div class="card" data-key="{{_key}}">
           <img src='../assets/cards/{{_data.img}}.png'>
         </div>
         {{/each}}
@@ -82,7 +82,11 @@
     </div>
   </div>
   <div class="col-xs-3">
-    <div class="col-xs-12 card-preview"></div>
+    {{#if preview}}
+    <div class="col-xs-12 card-preview">
+      <img src="{{preview}}">
+    </div>
+    {{/if}}
     <div class="col-xs-12 right-side right-side-foe foe">
       <div class="col-xs-5 field-discard field-single">
         discard deck
diff --git a/public/js/client.js b/public/js/client.js
index 194e69d..8474154 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -100,7 +100,10 @@ var BattleView = Backbone.View.extend({
     var app = this.app = options.app;
     $(this.el).prependTo('body');
 
+    this.listenTo(user, "change:showPreview", this.render);
+
     this.$hand = this.$el.find(".field-hand");
+    this.$preview = this.$el.find(".card-preview");
 
     this.app.receive("update:hand", function(data){
       console.log("update:hand", user.get("roomSide"), data._roomSide);
@@ -117,14 +120,27 @@ var BattleView = Backbone.View.extend({
     }.bind(this), 100);
     this.render();
   },
+  events: {
+    "mouseover .card": "onMouseover",
+    "mouseleave .card": "onMouseleave"
+  },
+  onMouseover: function(e){
+    var target = $(e.target).closest(".card");
+    this.user.set("showPreview", target.find("img").attr("src"));
+  },
+  onMouseleave: function(e) {
+    this.user.set("showPreview", null);
+  },
   render: function(){
     var self = this;
     this.$el.html(this.template({
-      cards: self.handCards
+      cards: self.handCards,
+      preview: self.user.get("showPreview")
     }));
     return this;
   }
-});
+})
+;
 
 var User = Backbone.Model.extend({
   defaults: {
diff --git a/public/scss/main.scss b/public/scss/main.scss
index 4b1d13f..23c9084 100644
--- a/public/scss/main.scss
+++ b/public/scss/main.scss
@@ -79,8 +79,8 @@ $game-height: 800px;
 }
 
 .card-preview {
-  position: absolute;
-  display: none;
+  position: absolute;/*
+  display: none;*/
   z-index: 10;
 }
 
diff --git a/server/Socket.js b/server/Socket.js
index 1f7295d..bbdae9c 100644
--- a/server/Socket.js
+++ b/server/Socket.js
@@ -66,14 +66,6 @@ var Socket = (function(){
       socket.on("request:joinRoom", function(){
         console.log("joinroom");
         var interval = setInterval(function(){
-          /*self.roomCollection.forEach(function(room) {
-            if(room.isOpen()) {
-              room.join(user);
-              clearInterval(interval);
-              console.log("user %s joined room %s", user.getName(), room.getID());
-              user.send("response:joinRoom", room.getID());
-            }
-          });*/
           for(var key in self.roomCollection) {
             var room = self.roomCollection[key];
             if(!room.isOpen()) continue;