diff --git a/server/sample_data/sample_doudizhu-test.json b/server/sample_data/sample_doudizhu-test.json
index 0f107a9..48dbb9d 100644
--- a/server/sample_data/sample_doudizhu-test.json
+++ b/server/sample_data/sample_doudizhu-test.json
@@ -24,15 +24,23 @@
   "moveHistory": [
     {
       "playerIdx": 2,
-      "move": "P"
+      "move": "H3 S3 D3 D5"
     },
     {
       "playerIdx": 0,
-      "move": "P"
+      "move": "S9 H9 D9 S3"
     },
     {
       "playerIdx": 1,
       "move": "P"
+    },
+    {
+      "playerIdx": 2,
+      "move": "SJ HJ DJ D7"
+    },
+    {
+      "playerIdx": 0,
+      "move": "P"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/components/GameBoard/index.js b/src/components/GameBoard/index.js
index a210c8a..404d64b 100644
--- a/src/components/GameBoard/index.js
+++ b/src/components/GameBoard/index.js
@@ -53,11 +53,11 @@ class DoudizhuGameBoard extends React.Component {
     computeSingleLineHand(cards) {
         console.log(cards);
         if(cards === "P"){
-            return <span>Pass</span>
+            return <div className="non-card"><span>Pass</span></div>
         }else{
             return (
                 <div className="playingCards">
-                    <ul className="hand">
+                    <ul className="hand" style={{width: this.computeHandCardsWidth(cards.length, 12)}}>
                         {cards.map(card=>{
                             return this.translateCardData(card);
                         })}
@@ -96,6 +96,25 @@ class DoudizhuGameBoard extends React.Component {
         )
     }
 
+    computeHandCardsWidth(num, emWidth) {
+        if(num === 0)
+            return 0;
+        return (num-1)*1.1*emWidth + 4.3*emWidth*1.2 + 2;
+    }
+
+    millisecond2Second(t){
+        return Math.round(t/1000);
+    }
+
+    playerDecisionArea(playerIdx){
+        console.log(this.props.currentPlayer, playerIdx);
+        if(this.props.currentPlayer === playerIdx){
+            return <div className="non-card"><span>{`Consideration Time: ${this.millisecond2Second(this.props.considerationTime)}s`}</span></div>
+        }else{
+            return this.computeSingleLineHand(this.props.latestAction[playerIdx])
+        }
+    }
+
     render() {
         // compute the id as well as index in list for every player
         const bottomId = this.props.mainPlayerId;
@@ -130,7 +149,7 @@ class DoudizhuGameBoard extends React.Component {
                         {leftIdx >= 0 ? this.computeSideHand(this.props.hands[leftIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
                     </div>
                     <div className="played-card-area">
-                        {leftIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[leftIdx]) : ""}
+                        {leftIdx >= 0 ? this.playerDecisionArea(leftIdx) : ""}
                     </div>
                 </div>
                 <div id={"right-player"}>
@@ -141,12 +160,12 @@ class DoudizhuGameBoard extends React.Component {
                         {rightIdx >= 0 ? this.computeSideHand(this.props.hands[rightIdx]) : <div className="player-hand-placeholder"><span>Waiting...</span></div>}
                     </div>
                     <div className="played-card-area">
-                        {rightIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[rightIdx]) : ""}
+                        {rightIdx >= 0 ? this.playerDecisionArea(rightIdx) : ""}
                     </div>
                 </div>
                 <div id={"bottom-player"}>
                     <div className="played-card-area">
-                        {bottomIdx >= 0 ? this.computeSingleLineHand(this.props.latestAction[bottomIdx]) : ""}
+                        {bottomIdx >= 0 ? this.playerDecisionArea(bottomIdx) : ""}
                     </div>
                     <div className="player-main-area">
                         <div className="player-info">
diff --git a/src/components/GameBoard/index.scss b/src/components/GameBoard/index.scss
index 833a096..45f281d 100644
--- a/src/components/GameBoard/index.scss
+++ b/src/components/GameBoard/index.scss
@@ -2,15 +2,18 @@
 
 .played-card-area {
     font-size: 12px;
-    display: table;
-    width: 280px;
-    height: 70px;
-
-    span {
-        display: table-cell;
-        vertical-align: middle;
-        text-align: center;
-        font-size: 16px;
+    display: flex;
+    justify-content: center;
+    .non-card {
+        display: table;
+        width: 280px;
+        height: 80px;
+        span {
+            display: table-cell;
+            vertical-align: middle;
+            text-align: center;
+            font-size: 16px;
+        }
     }
 }
 
@@ -159,11 +162,11 @@
 
     .played-card-area {
         position: relative;
-        transform: translateY(0px);
-        width: 280px;
-        margin-left: auto;
-        margin-right: auto;
-        text-align: center;
+        transform: translateY(25px);
+        .non-card {
+            height: 138px;
+            transform: translateY(-25px);
+        }
     }
 }
 
diff --git a/src/view/DoudizhuGameView.js b/src/view/DoudizhuGameView.js
index d1ef607..22e0aa4 100644
--- a/src/view/DoudizhuGameView.js
+++ b/src/view/DoudizhuGameView.js
@@ -8,7 +8,9 @@ class DoudizhuGameView extends React.Component {
         super(props);
 
         const mainViewerId = 0;     // Id of the player at the bottom of screen
-        this.initConsiderationTime = 0;
+        this.initConsiderationTime = 2000;
+        this.considerationTimeDeduction = 1000;
+        this.gameStateTimeout = null;
 
         this.initGameState = {
             playerInfo: [],
@@ -28,10 +30,10 @@ class DoudizhuGameView extends React.Component {
     }
 
     gameStateTimer() {
-        setTimeout(()=>{
+        this.gameStateTimeout = setTimeout(()=>{
             let currentConsiderationTime = this.state.gameInfo.considerationTime;
             if(currentConsiderationTime > 0) {
-                currentConsiderationTime--;
+                currentConsiderationTime -= this.considerationTimeDeduction;
                 let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
                 gameInfo.considerationTime = currentConsiderationTime;
                 this.setState({gameInfo: gameInfo});
@@ -43,11 +45,10 @@ class DoudizhuGameView extends React.Component {
                     message: {turn: turn}
                 };
                 let gameInfo = JSON.parse(JSON.stringify(this.state.gameInfo));
-                gameInfo.considerationTime = this.initConsiderationTime;
                 this.setState({gameInfo: gameInfo});
                 this.state.ws.emit("getMessage", gameStateReq);
             }
-        }, 1000);
+        }, this.considerationTimeDeduction);
     }
 
     startReplay() {
@@ -56,6 +57,10 @@ class DoudizhuGameView extends React.Component {
             this.state.ws.emit("getMessage", replayReq);
             // init game state
             this.setState({gameInfo: this.initGameState});
+            if(this.gameStateTimeout){
+                window.clearTimeout(this.gameStateTimeout);
+                this.gameStateTimeout = null;
+            }
             // loop to update game state
             this.gameStateTimer();
         }else{
@@ -95,6 +100,7 @@ class DoudizhuGameView extends React.Component {
                             }else{
                                 console.log("Cannot find cards in move from player's hand");
                             }
+                            gameInfo.considerationTime = this.initConsiderationTime;
                             this.setState({gameInfo: gameInfo});
                             this.gameStateTimer();
                         }else{