diff --git a/.gitignore b/.gitignore
index 7659cd92..92a78abf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,12 @@ FreeKill
 FreeKill.exe
 freekill-wrap.cxx
 server/users.db
+bearer/
+iconengines/
+imageformats/
+platforms/
+Qt/
+QtGraphicalEffects/
+QtQuick/
+QtQuick.2/
+*.dll
diff --git a/fonts/FZLBGBK.ttf b/fonts/FZLBGBK.ttf
new file mode 100644
index 00000000..d1bba7f7
Binary files /dev/null and b/fonts/FZLBGBK.ttf differ
diff --git a/fonts/FZLE.ttf b/fonts/FZLE.ttf
new file mode 100644
index 00000000..a70bf255
Binary files /dev/null and b/fonts/FZLE.ttf differ
diff --git a/image/background.jpg b/image/background.jpg
new file mode 100644
index 00000000..8f389117
Binary files /dev/null and b/image/background.jpg differ
diff --git a/image/card/general/border.png b/image/card/general/border.png
new file mode 100644
index 00000000..ec886f3d
Binary files /dev/null and b/image/card/general/border.png differ
diff --git a/image/card/general/god-magatama.png b/image/card/general/god-magatama.png
new file mode 100644
index 00000000..5e21017e
Binary files /dev/null and b/image/card/general/god-magatama.png differ
diff --git a/image/card/general/god.png b/image/card/general/god.png
new file mode 100644
index 00000000..06b17b2f
Binary files /dev/null and b/image/card/general/god.png differ
diff --git a/image/card/general/qun-magatama.png b/image/card/general/qun-magatama.png
new file mode 100644
index 00000000..b703a7e7
Binary files /dev/null and b/image/card/general/qun-magatama.png differ
diff --git a/image/card/general/qun.png b/image/card/general/qun.png
new file mode 100644
index 00000000..4648373d
Binary files /dev/null and b/image/card/general/qun.png differ
diff --git a/image/card/general/shu-magatama.png b/image/card/general/shu-magatama.png
new file mode 100644
index 00000000..1c193337
Binary files /dev/null and b/image/card/general/shu-magatama.png differ
diff --git a/image/card/general/shu.png b/image/card/general/shu.png
new file mode 100644
index 00000000..3dd02983
Binary files /dev/null and b/image/card/general/shu.png differ
diff --git a/image/card/general/wei-magatama.png b/image/card/general/wei-magatama.png
new file mode 100644
index 00000000..72a20da3
Binary files /dev/null and b/image/card/general/wei-magatama.png differ
diff --git a/image/card/general/wei.png b/image/card/general/wei.png
new file mode 100644
index 00000000..fe431cab
Binary files /dev/null and b/image/card/general/wei.png differ
diff --git a/image/card/general/wu-magatama.png b/image/card/general/wu-magatama.png
new file mode 100644
index 00000000..8694962f
Binary files /dev/null and b/image/card/general/wu-magatama.png differ
diff --git a/image/card/general/wu.png b/image/card/general/wu.png
new file mode 100644
index 00000000..ceb5d7fa
Binary files /dev/null and b/image/card/general/wu.png differ
diff --git a/image/gamebg.jpg b/image/gamebg.jpg
new file mode 100644
index 00000000..ef9eae11
Binary files /dev/null and b/image/gamebg.jpg differ
diff --git a/lua/client/client_util.lua b/lua/client/client_util.lua
index 6e607adb..d8078ba2 100644
--- a/lua/client/client_util.lua
+++ b/lua/client/client_util.lua
@@ -1,7 +1,7 @@
 -- All functions in this file are used by Qml
 
 function Translate(src)
-  return Fk.translations[src]
+  return Fk:translate(src)
 end
 
 function GetGeneralData(name)
@@ -143,3 +143,51 @@ function CardFeasible(card, selected_targets)
   local ret = c.skill:feasible(selected_cards, selected_targets)
   return json.encode(ret)
 end
+
+Fk:loadTranslationTable{
+  -- Lobby
+  ["Room List"] = "房间列表",
+  ["Enter"] = "进入",
+
+  ["Edit Profile"] = "编辑个人信息",
+  ["Username"] = "用户名",
+  ["Avatar"] = "头像",
+  ["Old Password"] = "旧密码",
+  ["New Password"] = "新密码",
+  ["Update Avatar"] = "更新头像",
+  ["Update Password"] = "更新密码",
+
+  ["Create Room"] = "创建房间",
+  ["Room Name"] = "房间名字",
+  ["$RoomName"] = "%1的房间",
+  ["Player num"] = "玩家数目",
+
+  ["Generals Overview"] = "武将一览",
+  ["Cards Overview"] = "卡牌一览",
+  ["Scenarios Overview"] = "玩法一览",
+  ["About"] = "关于",
+  ["Exit Lobby"] = "退出大厅",
+
+  ["OK"] = "确定",
+  ["Cancel"] = "取消",
+  ["End"] = "结束",
+  ["Quit"] = "退出",
+
+  ["$WelcomeToLobby"] = "欢迎进入FreeKill游戏大厅！",
+
+  -- Room
+  ["$EnterRoom"] = "成功加入房间。",
+  ["$Choice"] = "%1：请选择",
+  ["$ChooseGeneral"] = "请选择 %1 名武将",
+  ["Fight"] = "出战",
+
+  ["#PlayCard"] = "出牌阶段，请使用一张牌",
+  ["#AskForGeneral"] = "请选择 1 名武将",
+  ["#AskForSkillInvoke"] = "你想发动技能“%1”吗？",
+  ["#AskForChoice"] = "%1：请选择",
+
+  [" thinking..."] = " 思考中...",
+  ["AskForGeneral"] = "选择武将",
+  ["AskForChoice"] = "选择",
+  ["PlayCard"] = "出牌",
+}
diff --git a/lua/core/engine.lua b/lua/core/engine.lua
index 497c1165..9a455cdd 100644
--- a/lua/core/engine.lua
+++ b/lua/core/engine.lua
@@ -83,6 +83,12 @@ function Engine:loadTranslationTable(t)
   end
 end
 
+function Engine:translate(src)
+  local ret = self.translations[src]
+  if not ret then return src end
+  return ret
+end
+
 ---@param skill Skill
 function Engine:addSkill(skill)
   assert(skill.class:isSubclassOf(Skill))
diff --git a/packages/standard/game_rule.lua b/packages/standard/game_rule.lua
index c08d29fe..d0f864bd 100644
--- a/packages/standard/game_rule.lua
+++ b/packages/standard/game_rule.lua
@@ -84,6 +84,7 @@ GameRule = fk.CreateTriggerSkill{
       end,
       [Player.Play] = function()
         while not player.dead do
+          room:notifyMoveFocus(player, "PlayCard")
           local result = room:doRequest(player, "PlayCard", player:getId())
           if result == "" then break end
 
diff --git a/packages/standard/init.lua b/packages/standard/init.lua
index 41b97242..9312899a 100644
--- a/packages/standard/init.lua
+++ b/packages/standard/init.lua
@@ -40,7 +40,7 @@ Fk:loadTranslationTable{
   ["xuchu"] = "许褚",
 }
 
-local guojia = General:new(extension, "guojia", "wei", 4)
+local guojia = General:new(extension, "guojia", "wei", 3)
 extension:addGeneral(guojia)
 Fk:loadTranslationTable{
   ["guojia"] = "郭嘉",
diff --git a/qml/GlobalPopups/CreateRoom.qml b/qml/GlobalPopups/CreateRoom.qml
index 0fa8d71e..52cfed29 100644
--- a/qml/GlobalPopups/CreateRoom.qml
+++ b/qml/GlobalPopups/CreateRoom.qml
@@ -17,12 +17,12 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Text {
-        text: "Room Name"
+        text: Backend.translate("Room Name")
       }
       TextField {
         id: roomName
         font.pixelSize: 18
-        text: Self.screenName + "'s Room"
+        text: Backend.translate("$RoomName").arg(Self.screenName)
       }
     }
 
@@ -30,7 +30,7 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Text {
-        text: "Player num"
+        text: Backend.translate("Player num")
       }
       SpinBox {
         id: playerNum
@@ -43,7 +43,7 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Button {
-        text: "OK"
+        text: Backend.translate("OK")
         onClicked: {
           root.finished();
           mainWindow.busy = true;
@@ -54,7 +54,7 @@ Item {
         }
       }
       Button {
-        text: "Cancel"
+        text: Backend.translate("Cancel")
         onClicked: {
           root.finished();
         }
diff --git a/qml/GlobalPopups/EditProfile.qml b/qml/GlobalPopups/EditProfile.qml
index acb5b666..0611ec77 100644
--- a/qml/GlobalPopups/EditProfile.qml
+++ b/qml/GlobalPopups/EditProfile.qml
@@ -17,7 +17,7 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Text {
-        text: "Username"
+        text: Backend.translate("Username")
       }
       Text {
         text: Self.screenName
@@ -29,7 +29,7 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Text {
-        text: "Avatar"
+        text: Backend.translate("Avatar")
       }
       TextField {
         id: avatarName
@@ -42,7 +42,7 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Text {
-        text: "Old Password"
+        text: Backend.translate("Old Password")
       }
       TextField {
         id: oldPassword
@@ -55,7 +55,7 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Text {
-        text: "New Password"
+        text: Backend.translate("New Password")
       }
       TextField {
         id: newPassword
@@ -68,7 +68,7 @@ Item {
       anchors.rightMargin: 8
       spacing: 16
       Button {
-        text: "Update Avatar"
+        text: Backend.translate("Update Avatar")
         enabled: avatarName.text !== ""
         onClicked: {
           mainWindow.busy = true;
@@ -79,7 +79,7 @@ Item {
         }
       }
       Button {
-        text: "Update Password"
+        text: Backend.translate("Update Password")
         enabled: oldPassword.text !== "" && newPassword.text !== ""
         onClicked: {
           mainWindow.busy = true;
@@ -90,7 +90,7 @@ Item {
         }
       }
       Button {
-        text: "Exit"
+        text: Backend.translate("Quit")
         onClicked: {
           root.finished();
         }
diff --git a/qml/GlobalPopups/Test.qml b/qml/GlobalPopups/Test.qml
deleted file mode 100644
index a893f772..00000000
--- a/qml/GlobalPopups/Test.qml
+++ /dev/null
@@ -1,5 +0,0 @@
-import QtQuick 2.0
-
-Text {
-  text: "dsdsd"
-}
\ No newline at end of file
diff --git a/qml/Logic.js b/qml/Logic.js
index f1b16800..ac5867e0 100644
--- a/qml/Logic.js
+++ b/qml/Logic.js
@@ -1,3 +1,17 @@
+var generalsOverviewPage, cardsOverviewPage;
+var clientPageCreated = false;
+function createClientPages() {
+  if (!clientPageCreated) {
+    clientPageCreated = true;
+
+    generalsOverviewPage = generalsOverview.createObject(mainWindow);
+    cardsOverviewPage = cardsOverview.createObject(mainWindow);
+
+    mainWindow.generalsOverviewPage = generalsOverviewPage;
+    mainWindow.cardsOverviewPage = cardsOverviewPage;
+  }  
+}
+
 var callbacks = {};
 
 callbacks["NetworkDelayTest"] = function(jsonData) {
@@ -21,6 +35,7 @@ callbacks["BackToStart"] = function(jsonData) {
 
 callbacks["EnterLobby"] = function(jsonData) {
   // depth == 1 means the lobby page is not present in mainStack
+  createClientPages();
   if (mainStack.depth === 1) {
     mainStack.push(lobby);
   } else {
diff --git a/qml/Pages/CardsOverview.qml b/qml/Pages/CardsOverview.qml
index 46e82c63..84cb7d0a 100644
--- a/qml/Pages/CardsOverview.qml
+++ b/qml/Pages/CardsOverview.qml
@@ -36,7 +36,7 @@ Item {
   }
 
   Button {
-    text: "Quit"
+    text: Backend.translate("Quit")
     anchors.right: parent.right
     onClicked: {
       mainStack.pop();
diff --git a/qml/Pages/GeneralsOverview.qml b/qml/Pages/GeneralsOverview.qml
index 622008cf..22b74cb7 100644
--- a/qml/Pages/GeneralsOverview.qml
+++ b/qml/Pages/GeneralsOverview.qml
@@ -25,11 +25,7 @@ Item {
           model: JSON.parse(Backend.callLuaFunction("GetGenerals", [name]))
           GeneralCardItem { 
             autoBack: false
-            Component.onCompleted: {
-              let data = JSON.parse(Backend.callLuaFunction("GetGeneralData", [modelData]));
-              name = modelData;
-              kingdom = data.kingdom;
-            }
+            name: modelData
           }
         }
       }
@@ -37,7 +33,7 @@ Item {
   }
 
   Button {
-    text: "Quit"
+    text: Backend.translate("Quit")
     anchors.right: parent.right
     onClicked: {
       mainStack.pop();
diff --git a/qml/Pages/Init.qml b/qml/Pages/Init.qml
index 0d513301..88f939e7 100644
--- a/qml/Pages/Init.qml
+++ b/qml/Pages/Init.qml
@@ -7,6 +7,11 @@ Item {
   Frame {
     id: join_server
     anchors.centerIn: parent
+    background: Rectangle {
+      color: "#88888888"
+      radius: 2
+    }
+    
     Column {
       spacing: 8
       TextField {
diff --git a/qml/Pages/Lobby.qml b/qml/Pages/Lobby.qml
index 280611f5..53214b78 100644
--- a/qml/Pages/Lobby.qml
+++ b/qml/Pages/Lobby.qml
@@ -10,36 +10,23 @@ Item {
   Component {
     id: roomDelegate
 
-    RowLayout {
-      width: roomList.width * 0.9
-      spacing: 16
-      Text {
-        text: roomId
-      }
+    Item {
+      height: 18
+      width: roomList.width
 
-      Text {
-        horizontalAlignment: Text.AlignHCenter
-        Layout.fillWidth: true
-        text: roomName
-      }
-
-      Text {
-        text: gameMode
-      }
-
-      Text {
-        color: (playerNum == capacity) ? "red" : "black"
-        text: playerNum + "/" + capacity
-      }
-
-      Text {
-        text: "Enter"
-        font.underline: true
+      Rectangle {
+        anchors.fill: parent
+        color: "white"
+        opacity: 0
+        radius: 2
+        Behavior on opacity {
+          NumberAnimation { duration: 300; easing.type: Easing.InOutQuad }
+        }
         MouseArea {
           anchors.fill: parent
           hoverEnabled: true
-          onEntered: {  parent.color = "blue"   }
-          onExited: { parent.color = "black"  }
+          onEntered: parent.opacity = 1;
+          onExited: parent.opacity = 0;
           onClicked: {
             mainWindow.busy = true;
             ClientInstance.notifyServer(
@@ -49,6 +36,29 @@ Item {
           }
         }
       }
+
+      RowLayout {
+        anchors.fill: parent
+        spacing: 16
+        Text {
+          text: roomId
+        }
+
+        Text {
+          horizontalAlignment: Text.AlignHCenter
+          Layout.fillWidth: true
+          text: roomName
+        }
+
+        Text {
+          text: gameMode
+        }
+
+        Text {
+          color: (playerNum == capacity) ? "red" : "black"
+          text: playerNum + "/" + capacity
+        }
+      }
     }
   }
 
@@ -58,65 +68,70 @@ Item {
 
   RowLayout {
     anchors.fill: parent
-    Rectangle {
+    Item {
       Layout.preferredWidth: root.width * 0.7
       Layout.fillHeight: true
-      color: "#e2e2e1"
-      radius: 4
-      Text {
-        width: parent.width
-        horizontalAlignment: Text.AlignHCenter
-        text: "Room List"
-      }
-      ListView {
-        height: parent.height * 0.9
-        width: parent.width * 0.95
-        contentHeight: roomDelegate.height * count
-        ScrollBar.vertical: ScrollBar {}
+      Rectangle {
+        width: parent.width * 0.8
+        height: parent.height * 0.8
         anchors.centerIn: parent
-        id: roomList
-        delegate: roomDelegate
-        model: roomModel
+        color: "#88888888"
+        radius: 16
+        Text {
+          width: parent.width
+          horizontalAlignment: Text.AlignHCenter
+          text: Backend.translate("Room List")
+        }
+        ListView {
+          id: roomList
+          height: parent.height * 0.9
+          width: parent.width * 0.95
+          contentHeight: roomDelegate.height * count
+          ScrollBar.vertical: ScrollBar {}
+          anchors.centerIn: parent
+          delegate: roomDelegate
+          model: roomModel
+        }
       }
     }
 
     ColumnLayout {
       Button {
-        text: "Edit Profile"
+        text: Backend.translate("Edit Profile")
         onClicked: {
           globalPopup.source = "EditProfile.qml";
           globalPopup.open();
         }
       }
       Button {
-        text: "Create Room"
+        text: Backend.translate("Create Room")
         onClicked: {
           globalPopup.source = "CreateRoom.qml";
           globalPopup.open();
         }
       }
       Button {
-        text: "Generals Overview"
+        text: Backend.translate("Generals Overview")
         onClicked: {
-          mainStack.push(generalsOverview);
+          mainStack.push(mainWindow.generalsOverviewPage);
           mainStack.currentItem.loadPackages();
         }
       }
       Button {
-        text: "Cards Overview"
+        text: Backend.translate("Cards Overview")
         onClicked: {
-          mainStack.push(cardsOverview);
+          mainStack.push(mainWindow.cardsOverviewPage);
           mainStack.currentItem.loadPackages();
         }
       }
       Button {
-        text: "Scenarios Overview"
+        text: Backend.translate("Scenarios Overview")
       }
       Button {
-        text: "About"
+        text: Backend.translate("About")
       }
       Button {
-        text: "Exit Lobby"
+        text: Backend.translate("Exit Lobby")
         onClicked: {
           toast.show("Goodbye.");
           Backend.quitLobby();
@@ -152,7 +167,7 @@ Item {
   }
 
   Component.onCompleted: {
-    toast.show("Welcome to FreeKill lobby!");
+    toast.show(Backend.translate("$WelcomeToLobby"));
   }
 }
 
diff --git a/qml/Pages/Room.qml b/qml/Pages/Room.qml
index 5c1ff15d..823773ad 100644
--- a/qml/Pages/Room.qml
+++ b/qml/Pages/Room.qml
@@ -18,23 +18,13 @@ Item {
 
   property var selected_targets: []
 
-  // tmp
-  Row {
-    Button{text:"摸1牌"
-    onClicked:{
-      Logic.moveCards([{
-        from:Logic.Player.DrawPile,
-        to:Logic.Player.PlaceHand,
-        cards:[1],
-      }])
-    }}
-    Button{text:"弃1牌"
-    onClicked:{Logic.moveCards([{
-        to:Logic.Player.DrawPile,
-        from:Logic.Player.PlaceHand,
-        cards:[1],
-      }])}}
+  Image {
+    source: AppPath + "/image/gamebg"
+    anchors.fill: parent
+    fillMode: Image.PreserveAspectCrop
   }
+
+  // tmp
   Button {
     text: "quit"
     anchors.top: parent.top
@@ -253,20 +243,20 @@ Item {
 
       Button {
         id: okButton
-        text: "OK"
+        text: Backend.translate("OK")
         onClicked: Logic.doOkButton();
       }
 
       Button {
         id: cancelButton
-        text: "Cancel"
+        text: Backend.translate("Cancel")
         onClicked: Logic.doCancelButton();
       }
     }
 
     Button {
       id: endPhaseButton
-      text: "End"
+      text: Backend.translate("End")
       anchors.bottom: parent.bottom
       anchors.bottomMargin: 40
       anchors.right: parent.right
@@ -301,7 +291,7 @@ Item {
   }
 
   Component.onCompleted: {
-    toast.show("Sucesessfully entered room.");
+    toast.show(Backend.translate("$EnterRoom"));
 
     dashboardModel = {
       id: Self.id,
diff --git a/qml/Pages/RoomElement/CardItem.qml b/qml/Pages/RoomElement/CardItem.qml
index df784dcc..5d1192fe 100644
--- a/qml/Pages/RoomElement/CardItem.qml
+++ b/qml/Pages/RoomElement/CardItem.qml
@@ -117,7 +117,7 @@ Item {
     visible: footnoteVisible
     wrapMode: Text.WrapAnywhere
     horizontalAlignment: Text.AlignHCenter
-    font.family: "FZLiBian-S02"
+    font.family: fontLibian.name
     font.pixelSize: 14
     glow.color: "black"
     glow.spread: 1
diff --git a/qml/Pages/RoomElement/ChoiceBox.qml b/qml/Pages/RoomElement/ChoiceBox.qml
index 4242ba83..12dd4b94 100644
--- a/qml/Pages/RoomElement/ChoiceBox.qml
+++ b/qml/Pages/RoomElement/ChoiceBox.qml
@@ -7,7 +7,7 @@ GraphicsBox {
   property int result
 
   id: root
-  title.text: skill_name + ": Please choose"
+  title.text: Backend.translate("$Choice").arg(Backend.translate(skill_name))
   width: Math.max(140, body.width + 20)
   height: body.height + title.height + 20
 
@@ -21,7 +21,7 @@ GraphicsBox {
       model: options
 
       MetroButton {
-        text: modelData
+        text: Backend.translate(modelData)
         anchors.horizontalCenter: parent.horizontalCenter
 
         onClicked: {
diff --git a/qml/Pages/RoomElement/ChooseGeneralBox.qml b/qml/Pages/RoomElement/ChooseGeneralBox.qml
index 853df57b..30bed623 100644
--- a/qml/Pages/RoomElement/ChooseGeneralBox.qml
+++ b/qml/Pages/RoomElement/ChooseGeneralBox.qml
@@ -15,7 +15,7 @@ GraphicsBox {
   }
 
   id: root
-  title.text: qsTr("Please choose ") + choiceNum + qsTr(" general(s)")
+  title.text: Backend.translate("$ChooseGeneral").arg(choiceNum)
   width: generalArea.width + body.anchors.leftMargin + body.anchors.rightMargin
   height: body.implicitHeight + body.anchors.topMargin + body.anchors.bottomMargin
 
@@ -84,7 +84,7 @@ GraphicsBox {
         id: fightButton
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: parent.bottom
-        text: qsTr("Fight")
+        text: Backend.translate("Fight")
         width: 120
         height: 35
         enabled: false
diff --git a/qml/Pages/RoomElement/GeneralCardItem.qml b/qml/Pages/RoomElement/GeneralCardItem.qml
index a4a703a0..be47c685 100644
--- a/qml/Pages/RoomElement/GeneralCardItem.qml
+++ b/qml/Pages/RoomElement/GeneralCardItem.qml
@@ -13,12 +13,62 @@ import "../skin-bank.js" as SkinBank
  */
 
 CardItem {
-  property string kingdom: "qun"
-  name: "caocao"
+  property string kingdom
+  property int hp
+  name: ""
   // description: Sanguosha.getGeneralDescription(name)
   suit: ""
   number: 0
   footnote: ""
   card.source: SkinBank.GENERAL_DIR + name
   glow.color: "white" //Engine.kingdomColor[kingdom]
+
+  Image {
+    source: SkinBank.GENERALCARD_DIR + "border"
+  }
+
+  Image {
+    source: SkinBank.GENERALCARD_DIR + kingdom
+  }
+
+  Row {
+    x: 34
+    y: 4
+    spacing: 1
+    Repeater {
+      model: hp > 5 ? 1 : hp
+      Image {
+        source: SkinBank.GENERALCARD_DIR + kingdom + "-magatama"
+      }
+    }
+
+    Text {
+      visible: hp > 5
+      text: "x" + hp
+      color: "white"
+      font.pixelSize: 14
+      style: Text.Outline
+      y: -6
+    }
+  }
+
+  Text {
+    width: 20
+    height: 80
+    x: 2
+    y: lineCount > 6 ? 30 : 34
+    text: Backend.translate(name)
+    color: "white"
+    font.family: fontLiSu.name
+    font.pixelSize: 18
+    lineHeight: Math.max(1.4 - lineCount / 10, 0.6)
+    style: Text.Outline
+    wrapMode: Text.WrapAnywhere
+  }
+
+  onNameChanged: {
+    let data = JSON.parse(Backend.callLuaFunction("GetGeneralData", [name]));
+    kingdom = data.kingdom;
+    hp = data.hp;
+  }
 }
diff --git a/qml/Pages/RoomElement/Photo.qml b/qml/Pages/RoomElement/Photo.qml
index 5b8647dc..2f3b9ac9 100644
--- a/qml/Pages/RoomElement/Photo.qml
+++ b/qml/Pages/RoomElement/Photo.qml
@@ -38,6 +38,15 @@ Item {
   property bool selectable: false
   property bool selected: false
 
+  property bool playing: false
+  onPlayingChanged: {
+    if (playing) {
+      animPlaying.start();
+    } else {
+      animPlaying.stop();
+    }
+  }
+
   Behavior on x {
     NumberAnimation { duration: 600; easing.type: Easing.InOutQuad }
   }
@@ -48,8 +57,8 @@ Item {
 
   states: [
     State { name: "normal" },
-    State { name: "candidate" },
-    State { name: "playing" }
+    State { name: "candidate" }
+    //State { name: "playing" }
     //State { name: "responding" },
     //State { name: "sos" }
   ]
@@ -60,22 +69,12 @@ Item {
       from: "*"; to: "normal"
       ScriptAction {
         script: {
-          animPlaying.stop();
           animSelectable.stop();
           animSelected.stop();
         }
       }
     },
 
-    Transition {
-      from: "*"; to: "playing"
-      ScriptAction {
-        script: {
-          animPlaying.start();
-        }
-      }
-    },
-
     Transition {
       from: "*"; to: "candidate"
       ScriptAction {
@@ -93,7 +92,7 @@ Item {
     anchors.centerIn: parent
     loop: true
     scale: 1.1
-    visible: root.state === "playing"
+    visible: root.playing
   }
 
   PixmapAnimation {
@@ -114,7 +113,7 @@ Item {
     id: generalName
     x: 5
     y: 28
-    font.family: "FZLiBian-S02"
+    font.family: fontLibian.name
     font.pixelSize: 22
     opacity: 0.7
     horizontalAlignment: Text.AlignHCenter
@@ -234,7 +233,7 @@ Item {
 
     Text {
       text: root.handcards
-      font.family: "FZLiBian-S02"
+      font.family: fontLibian.name
       font.pixelSize: 32
       //font.weight: 30
       color: "white"
@@ -276,7 +275,7 @@ Item {
     anchors.bottom: parent.bottom
     anchors.bottomMargin: -32
     property var seatChr: ["一", "二", "三", "四", "五", "六", "七", "八"]
-    font.family: "FZLiShu II-S06S"
+    font.family: fontLi2.name
     font.pixelSize: 32
     text: seatChr[seatNumber - 1]
 
@@ -339,7 +338,7 @@ Item {
     visible: progressTip.text != ""
     Text {
       id: progressTip
-      font.family: "FZLiBian-S02"
+      font.family: fontLibian.name
       font.pixelSize: 18
       x: 18
       color: "white"
diff --git a/qml/Pages/RoomElement/PhotoElement/EquipItem.qml b/qml/Pages/RoomElement/PhotoElement/EquipItem.qml
index 1ce32762..5c4b19e2 100644
--- a/qml/Pages/RoomElement/PhotoElement/EquipItem.qml
+++ b/qml/Pages/RoomElement/PhotoElement/EquipItem.qml
@@ -35,7 +35,7 @@ Item {
     visible: number > 0 && number < 14
     text: Utility.convertNumber(number)
     color: "white"
-    font.family: "FZLiBian-S02"
+    font.family: fontLibian.name
     font.pixelSize: 16
     glow.color: "black"
     glow.spread: 0.75
@@ -47,7 +47,7 @@ Item {
 
   GlowText {
     id: textItem
-    font.family: "FZLiBian-S02"
+    font.family: fontLibian.name
     color: "white"
     font.pixelSize: 18
     glow.color: "black"
diff --git a/qml/Pages/RoomElement/PhotoElement/HpBar.qml b/qml/Pages/RoomElement/PhotoElement/HpBar.qml
index 6e0a0d1c..b94226a0 100644
--- a/qml/Pages/RoomElement/PhotoElement/HpBar.qml
+++ b/qml/Pages/RoomElement/PhotoElement/HpBar.qml
@@ -28,7 +28,7 @@ Column {
       width: root.width
       text: value
       color: root.colors[(value >= 3 || value >= maxValue) ? 3 : (value <= 0 ? 0 : value)]
-      font.family: "FZLiBian-S02"
+      font.family: fontLibian.name
       font.pixelSize: 22
       font.bold: true
       horizontalAlignment: Text.AlignHCenter
diff --git a/qml/Pages/RoomLogic.js b/qml/Pages/RoomLogic.js
index bc264dc0..dcbd61fd 100644
--- a/qml/Pages/RoomLogic.js
+++ b/qml/Pages/RoomLogic.js
@@ -392,7 +392,25 @@ callbacks["MoveFocus"] = function(jsonData) {
     if (focuses.indexOf(model.id) != -1) {
       item = photos.itemAt(i);
       item.progressBar.visible = true;
-      item.progressTip = command + " thinking...";
+      item.progressTip = Backend.translate(command) 
+        + Backend.translate(" thinking...");
+
+      if (command === "PlayCard") {
+        item.playing = true;
+      }
+    } else {
+      item = photos.itemAt(i);
+      if (command === "PlayCard") {
+        item.playing = false;
+      }
+    }
+  }
+
+  if (command === "PlayCard") {
+    if (focuses.indexOf(Self.id) != -1) {
+      dashboard.self.playing = true;
+    } else {
+      dashboard.self.playing = false;
     }
   }
 }
@@ -413,7 +431,7 @@ callbacks["AskForGeneral"] = function(jsonData) {
   // jsonData: string[] Generals
   // TODO: choose multiple generals
   let data = JSON.parse(jsonData);
-  roomScene.promptText = "Please choose 1 general";
+  roomScene.promptText = Backend.translate("#AskForGeneral");
   roomScene.state = "replying";
   roomScene.popupBox.source = "RoomElement/ChooseGeneralBox.qml";
   let box = roomScene.popupBox.item;
@@ -428,7 +446,8 @@ callbacks["AskForGeneral"] = function(jsonData) {
 
 callbacks["AskForSkillInvoke"] = function(jsonData) {
   // jsonData: string name
-  roomScene.promptText = "Do you want to invoke '" + jsonData + "' ?";
+  roomScene.promptText = Backend.translate("#AskForSkillInvoke")
+    .arg(Backend.translate(jsonData));
   roomScene.state = "responding";
 }
 
@@ -438,7 +457,8 @@ callbacks["AskForChoice"] = function(jsonData) {
   let data = JSON.parse(jsonData);
   let choices = data[0];
   let skill_name = data[1];
-  roomScene.promptText = skill_name + ": Please make choice";
+  roomScene.promptText = Backend.translate("#AskForChoice")
+    .arg(Backend.translate(jsonData));;
   roomScene.state = "replying";
   roomScene.popupBox.source = "RoomElement/ChoiceBox.qml";
   let box = roomScene.popupBox.item;
@@ -459,7 +479,7 @@ callbacks["PlayCard"] = function(jsonData) {
   // jsonData: int playerId
   let playerId = parseInt(jsonData);
   if (playerId == Self.id) {
-    roomScene.promptText = "Please use a card";
+    roomScene.promptText = Backend.translate("#PlayCard");
     roomScene.state = "playing";
   }
 }
diff --git a/qml/Pages/skin-bank.js b/qml/Pages/skin-bank.js
index 64ea0033..cd6f7b54 100644
--- a/qml/Pages/skin-bank.js
+++ b/qml/Pages/skin-bank.js
@@ -2,6 +2,7 @@
 var PHOTO_BACK_DIR = AppPath + "/image/photo/back/";
 var PHOTO_DIR = AppPath + "/image/photo/";
 var GENERAL_DIR = AppPath + "/image/generals/";
+var GENERALCARD_DIR = AppPath + "/image/card/general/";
 var STATE_DIR = AppPath + "/image/photo/state/";
 var STATUS_DIR = AppPath + "/image/photo/status/";
 var ROLE_DIR = AppPath + "/image/photo/role/";
diff --git a/qml/main.qml b/qml/main.qml
index 6667664a..74c0190e 100644
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -11,6 +11,16 @@ Window {
   height: 480
   property var callbacks: Logic.callbacks
 
+  Image {
+    source: AppPath + "/image/background"
+    anchors.fill: parent
+    fillMode: Image.PreserveAspectCrop
+  }
+
+  FontLoader { id: fontLiSu; source: AppPath + "/fonts/simli.ttf" }
+  FontLoader { id: fontLibian; source: AppPath + "/fonts/FZLBGBK.ttf" }
+  FontLoader { id: fontLi2; source: AppPath + "/fonts/FZLE.ttf" }
+
   StackView {
     id: mainStack
     visible: !mainWindow.busy
@@ -24,6 +34,9 @@ Window {
   Component { id: cardsOverview; CardsOverview {} }
   Component { id: room; Room {} }
 
+  property var generalsOverviewPage
+  property var cardsOverviewPage
+
   property bool busy: false
   BusyIndicator {
     running: true