diff --git a/client/scss/main.scss b/client/scss/main.scss
index da99e06..8db937d 100644
--- a/client/scss/main.scss
+++ b/client/scss/main.scss
@@ -70,8 +70,23 @@ $game-height: 800px;
   box-shadow: 0px 0px 10px #000;
 }
 
+.handcard-wrap {
+  margin: 0 auto;
+  width: 800px;
+}
+
 .field-hand {
-  margin-top: 20px;
+  //margin-top: 20px;
+  border: none;
+  transition: all .2s ease-in-out 0s;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(6, 13, 22, .6);
+  height: auto;
+  z-index: 10;
+
   .card {
     margin-left: -31px;
     &:first-child {
@@ -300,6 +315,10 @@ $game-height: 800px;
 }
 
 .waiting-for-opponent {
+
+  // temp
+  display: none;
+
   position: fixed;
   //left: 43%;
   cursor: default;
diff --git a/client/templates/battle.handlebars b/client/templates/battle.handlebars
index 6055237..085a39f 100644
--- a/client/templates/battle.handlebars
+++ b/client/templates/battle.handlebars
@@ -60,9 +60,11 @@
   </div>
   <div class="row">
     <div class="col-xs-12 field field-hand {{#if isWaiting}}{{else}}active{{/if}}">
-      {{#each cards as |val key|}}
-        {{>card val}}
-      {{/each}}
+      <div class="handcard-wrap">
+        {{#each cards as |val key|}}
+          {{>card val}}
+        {{/each}}
+      </div>
     </div>
   </div>
 </div>