diff --git a/client/js/client.js b/client/js/client.js
index fb692c3..7adf62b 100644
--- a/client/js/client.js
+++ b/client/js/client.js
@@ -156,10 +156,13 @@ var SideView = Backbone.View.extend({
     var cards = this.field.close._cards;
     var score = this.field.close._score;
 
+
     var html = this.templateCards(cards);
 
     $field.find(".field-close").html(html)
     $field.find(".large-field-counter").html(score)
+
+    calculateCardMargin($field.find(".card"), 433, 70, cards.length);
   },
   renderRangeField: function(){
     if(!this.field.ranged) return;
@@ -172,6 +175,7 @@ var SideView = Backbone.View.extend({
 
     $field.find(".field-range").html(html)
     $field.find(".large-field-counter").html(score)
+    calculateCardMargin($field.find(".card"), 433, 70, cards.length);
   },
   renderSiegeField: function(){
     if(!this.field.siege) return;
@@ -184,6 +188,7 @@ var SideView = Backbone.View.extend({
 
     $field.find(".field-siege").html(html)
     $field.find(".large-field-counter").html(score)
+    calculateCardMargin($field.find(".card"), 433, 70, cards.length);
   },
   renderWeatherField: function(){
     if(!this.field.weather) return;
@@ -206,6 +211,18 @@ var SideView = Backbone.View.extend({
   }
 });
 
+var calculateCardMargin = function($selector, totalWidth, cardWidth, n){
+  var w = totalWidth, c = cardWidth;
+  var res;
+  if(n < 7)
+    res = 0;
+  else {
+    res = -((w - c) / (n - 1) - c) + 1
+  }
+
+  $selector.css("margin-left", -res);
+}
+
 var BattleView = Backbone.View.extend({
   className: "container",
   template: Handlebars.compile($("#battle-template").html()),
@@ -301,7 +318,7 @@ var BattleView = Backbone.View.extend({
       })
       this.user.set("waitForDecoy", false);
     }
-    if(this.user.get("setAgile")) {
+    if(this.user.get("setAgile")){
       var $field = $(e.target).closest(".field.active").find(".field-close, .field-range");
 
       console.log($field);
@@ -344,6 +361,7 @@ var BattleView = Backbone.View.extend({
     this.otherSide.render();
     this.yourSide.render();
 
+    calculateCardMargin(this.$el.find(".field-hand .card"), 538, 70, this.handCards.length);
 
     if(this.user.get("openDiscard")){
       var modal = new Modal({model: this.user});
diff --git a/client/scss/main.scss b/client/scss/main.scss
index f6990ad..e0c5499 100644
--- a/client/scss/main.scss
+++ b/client/scss/main.scss
@@ -19,8 +19,16 @@ $game-height: 800px;
 .field {
   width: 100%;
   height: 100px;
-  border: 1px solid black;
+  border: 1px solid black;/*
+  overflow: hidden;
 
+  &:hover {
+    overflow: visible;
+  }*/
+
+  .card:first-child {
+    margin-left: 0 !important;
+  }
   &.active {
     box-shadow: 0px 0px 15px #ffbb0b;
 
@@ -34,7 +42,10 @@ $game-height: 800px;
 .field-hand {
   margin-top: 20px;
   .card {
-    margin-left: -20px;
+    margin-left: -31px;
+    &:first-child {
+      margin-left: 0 !important;
+    }
     &:hover {
       position: relative;
       z-index: 10;
@@ -48,10 +59,10 @@ $game-height: 800px;
 }
 
 .field-single {
-  border: 1px solid black;
-  height: 150px;
-  width: 85px;
-  margin: 5px;
+  border: 1px solid black;/*
+  width: 85px;*/
+  /*margin: 5px;*/
+  height: 98px;
 }
 
 .left-side {