diff --git a/public/index.html b/public/index.html
index 221374e..3acf487 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,31 @@
   <link rel="stylesheet" href="../build/main.css">
 </head>
 <body>
+<script id="info-template" type="text/x-handlebars-template">
+  <div class="col-xs-12 game-info game-info-foe foe">
+    <div class="col-xs-12 info-name">{{name}}</div>
+    <div class="col-xs-6 field-single field-leader"></div>
+    <div class="col-xs-6">
+      <div class="row">
+        <div class="col-xs-6">Points:</div>
+        <div class="col-xs-6 score">{{score}}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6">Hand:</div>
+        <div class="col-xs-6 hand-card">{{hand}}</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 gwent-lives">
+          {{#health}}
+          {{/health}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 passing">Passed</div>
+      </div>
+    </div>
+  </div>
+</script>
 <script id="battle-template" type="text/x-handlebars-template">
   <div class="col-xs-3 left-side">
     <div class="col-xs-12 game-info game-info-foe foe">
@@ -37,6 +62,30 @@
       field
     </div>
     <div class="col-xs-12 game-info game-info-player player">
+      <div class="col-xs-12 info-name">{{name}}</div>
+      <div class="col-xs-6 field-single field-leader"></div>
+      <div class="col-xs-6">
+        <div class="row">
+          <div class="col-xs-6">Points:</div>
+          <div class="col-xs-6 score">{{score}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-6">Hand:</div>
+          <div class="col-xs-6 hand-card">{{hand}}</div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12 gwent-lives">
+            <!--<i class="ruby"></i>-->
+            {{#health lives}}{{/health}}
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-xs-12 passing">Passed</div>
+        </div>
+      </div>
+      <div class="col-xs-12">
+        <button class="button-pass">Pass</button>
+      </div>
     </div>
   </div>
   <div class="col-xs-6">
diff --git a/public/js/client.js b/public/js/client.js
index 8474154..452f71d 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -4,6 +4,8 @@ var Handlebars = require("handlebars");
 var $ = require("jquery");
 //var Lobby = require("./client-lobby");
 
+window.$ = $;
+
 Handlebars.registerHelper("health", function(lives, options){
   var out = "";
 
@@ -91,6 +93,79 @@ var App = Backbone.Router.extend({
   }
 });
 
+/*var Partial = Backbone.View.extend({
+  initialize: function(options){
+    this.template = Handlebars.compile($(options.templateID).html());
+    this.infoData = this.infoData || {};
+    this.app = options.app;
+    var self = this;
+
+this.listenTo(this.infoData, "change", this.render);
+    this.app.on("update:info", function(d) {
+      self.infoData = d;
+      self.render();
+    });
+    this.render();
+  },
+  render: function(){
+    var self = this;
+    var d = this.infoData;
+    this.$el.html(this.template({
+      name: d.name,
+      score: d.score,
+      hand: d.hand,
+      lives: d.lives
+    }));
+    return this;
+  }
+});*/
+
+var SideView = Backbone.View.extend({
+  el: ".container",
+  initialize: function(options){
+    var self = this;
+    this.side = options.side;
+    this.app = options.app;
+    this.battleView = options.battleView;
+    this.infoData = this.infoData || {};
+
+    this.$info = this.$el.find(".game-info" + this.side);
+    this.$fields = this.$el.find(".battleside" + this.side);
+    /*this.$info = new Partial({
+      templateID: "#info-template",
+      el: ".game-info"+this.side,
+      app: this.app
+    });*/
+
+    /*this.app.on("update:info", function(d){
+      self.infoData = d.infoData;
+      console.log(d);
+      self.render();
+    });*/
+
+  },
+  render: function(){
+    var d = this.infoData;
+    this.$info = this.$el.find(".game-info" + this.side);
+    this.$info.find(".info-name").html(d.name);
+    this.$info.find(".score").html(d.score);
+    this.$info.find(".hand-card").html(d.hand);
+    this.$info.find(".gwent-lives").html(this.lives(d.lives));
+    return this;
+  },
+  lives: function(lives){
+    var out = "";
+    for(var i = 0; i < 2; i++) {
+      out += "<i";
+      if(i < lives){
+        out += " class='ruby'";
+      }
+      out += "></i>";
+    }
+    return out;
+  }
+});
+
 var BattleView = Backbone.View.extend({
   className: "container",
   template: Handlebars.compile($("#battle-template").html()),
@@ -98,6 +173,8 @@ var BattleView = Backbone.View.extend({
     var self = this;
     var user = this.user = options.user;
     var app = this.app = options.app;
+    var yourSide, otherSide;
+
     $(this.el).prependTo('body');
 
     this.listenTo(user, "change:showPreview", this.render);
@@ -105,7 +182,7 @@ var BattleView = Backbone.View.extend({
     this.$hand = this.$el.find(".field-hand");
     this.$preview = this.$el.find(".card-preview");
 
-    this.app.receive("update:hand", function(data){
+    app.receive("update:hand", function(data){
       console.log("update:hand", user.get("roomSide"), data._roomSide);
       if(user.get("roomSide") == data._roomSide){
         self.handCards = JSON.parse(data.cards);
@@ -113,12 +190,34 @@ var BattleView = Backbone.View.extend({
       }
     });
 
+    app.receive("update:info", function(data){
+      var _side = data._roomSide;
+      var infoData = data.info;
+
+
+      var side = yourSide;
+      if(user.get("roomSide") != _side){
+        side = otherSide;
+      }
+      console.log(side);
+      side.infoData = infoData;
+      side.render();
+      //app.trigger("update:info", {side: side, infoData: infoData});
+    })
+
     var interval = setInterval(function(){
       if(!user.get("room")) return;
       this.app.send("request:gameLoaded", {_roomID: user.get("room")});
       clearInterval(interval);
     }.bind(this), 100);
+
     this.render();
+
+    yourSide = this.yourSide = new SideView({side: ".player", app: this.app, battleView: this});
+    otherSide = this.otherSide = new SideView({side: ".foe", app: this.app, battleView: this});
+
+    /*yourSide = this.yourSide = new SideView({side: ".player", app: app, battleView: this});
+    otherSide = this.otherSide = new SideView({side: ".foe", app: app, battleView: this});*/
   },
   events: {
     "mouseover .card": "onMouseover",
@@ -128,7 +227,7 @@ var BattleView = Backbone.View.extend({
     var target = $(e.target).closest(".card");
     this.user.set("showPreview", target.find("img").attr("src"));
   },
-  onMouseleave: function(e) {
+  onMouseleave: function(e){
     this.user.set("showPreview", null);
   },
   render: function(){
@@ -137,10 +236,17 @@ var BattleView = Backbone.View.extend({
       cards: self.handCards,
       preview: self.user.get("showPreview")
     }));
+    if(!(this.otherSide && this.yourSide)) return;
+    this.otherSide.render();
+    this.yourSide.render();
+    /* this.$el()
+    if(!(this.yourSide && this.otherSide))
+      return this;
+    this.yourSide.render();
+    this.otherSide.render();*/
     return this;
   }
-})
-;
+});
 
 var User = Backbone.Model.extend({
   defaults: {
diff --git a/server/Battle.js b/server/Battle.js
index 6159242..a571eeb 100644
--- a/server/Battle.js
+++ b/server/Battle.js
@@ -3,14 +3,16 @@ var Battleside = require("./Battleside");
 var io = global.io;
 
 var Battle = (function(){
-  var Battle = function(id){
+  var Battle = function(id, p1, p2){
     if(!(this instanceof Battle)){
-      return (new Battle(id));
+      return (new Battle(id, p1, p2));
     }
     /**
      * constructor here
      */
     this._id = id;
+    this._user1 = p1;
+    this._user2 = p2;
   };
   var r = Battle.prototype;
   /**
@@ -21,23 +23,30 @@ var Battle = (function(){
 
   r.p1 = null;
   r.p2 = null;
+  r._user1 = null;
+  r._user2 = null;
   r.turn = 0;
 
   r._id = null;
 
 
   r.init = function(){
-    this.p1 = Battleside("Player 1", 0, this);
-    this.p2 = Battleside("Player 2", 1, this);
+    this.p1 = Battleside(this._user1.getName(), 0, this);
+    this.p2 = Battleside(this._user2.getName(), 1, this);
     this.p1.foe = this.p2;
     this.p2.foe = this.p1;
 
+    this.p1.send("update:info", {info: this.p1.getInfo()});
+    this.p2.send("update:info", {info: this.p2.getInfo()});
+
     this.start();
   }
 
   r.start = function() {
     this.p1.draw(10);
     this.p2.draw(10);
+
+    //this.p2.wait();
   }
 
   r.send = function(event, data) {
diff --git a/server/Battleside.js b/server/Battleside.js
index 8226aa9..f6721dd 100644
--- a/server/Battleside.js
+++ b/server/Battleside.js
@@ -33,6 +33,8 @@ var Battleside = (function(){
   r._range = null;
   r._siege = null;
   r._field = null;
+  r._lives = 2;
+  r._score = 0;
 
   r.foe = null;
   r.hand = null;
@@ -51,6 +53,19 @@ var Battleside = (function(){
     this.send("update:hand", {cards: JSON.stringify(this.hand.getCards())});
   }
 
+  r.getInfo = function() {
+    return {
+      name: this.getName(),
+      lives: this._lives,
+      score: this._score,
+      hand: this.hand.length()
+    }
+  }
+
+  r.getName = function() {
+    return this._name;
+  }
+
   r.send = function(event, msg) {
     msg = msg || {};
     msg._roomSide = this.n;
diff --git a/server/Room.js b/server/Room.js
index 4602509..1b519bf 100644
--- a/server/Room.js
+++ b/server/Room.js
@@ -56,9 +56,7 @@ var Room = (function(){
   r.initBattle = function(){
     var self = this;
     var side = 0;
-    this._battle = Battle(this._id);/*
-    this.setReady(this._room[0], false);
-    this.setReady(this._room[1], false);*/
+    this._battle = Battle(this._id, this._room[0], this._room[1]);
     this._room[0].send("init:battle", {side: "p1"});
     this._room[1].send("init:battle", {side: "p2"});
   }
