diff --git a/packages/client/src/components/Battle/index.tsx b/packages/client/src/components/Battle/index.tsx
index a31be66f..d7a6f689 100644
--- a/packages/client/src/components/Battle/index.tsx
+++ b/packages/client/src/components/Battle/index.tsx
@@ -18,7 +18,7 @@ import button5 from "@/assets/img/battle/Button5.png";
 import btnBg from "@/assets/img/battle/btn-bg.svg";
 import "./styles.scss";
 
-export default function Battle() {
+export default function Battle(props) {
   const [selectActionData, setSelectActionData] = useState('');
   const [selectTacticData, setSelectTacticData] = useState('');
   const [player2LossData, setPlayer2LossData] = useState(0);
@@ -58,6 +58,7 @@ export default function Battle() {
           // console.log(player2ResidualData)
           if (player2ResidualData - .4 <= 0) {
             setConfirmBattleData([]);
+            props.finishBattle(1);
             return
           }
           setTimeout(() => {
@@ -69,6 +70,7 @@ export default function Battle() {
               if (player1ResidualData - .4 <= 0) {
                 setPlayer1ResidualData(0);
                 setConfirmBattleData([]);
+                props.finishBattle(2);
                 return
               } else {
                 setPlayer1ResidualData(player1ResidualData - .4);
diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx
index 18dc22ee..6be9e3ef 100644
--- a/packages/client/src/pages/game/index.tsx
+++ b/packages/client/src/pages/game/index.tsx
@@ -49,6 +49,38 @@ const Game = () => {
     head,
   } = location.state ?? {};
 
+  const finishBattle = (e: any) => {
+    console.log(e);
+    setStartBattleData(false);
+    if (e == 1) {
+      console.log('win');
+      const curPlayer = players.find((item) => item.id === curId);
+      curPlayer.gem += 3;
+      setPlayers([...players]);
+      setContent(
+        <div className={'mi-modal-content-wrapper'}>
+          <div className="mi-modal-content">
+            Congrats,you got 3 gems!
+
+            <div className="mi-treasure-chest-wrapper">
+              <TreasureChest
+                opening={false}
+              />
+            </div>
+          </div>
+          <div className="mi-modal-footer">
+            <button className="mi-btn" onClick={() => {
+              close();
+            }}>OK</button>
+          </div>
+        </div>
+      );
+      open();
+    } else if (e == 2) {
+      console.log('lose');
+    }
+  }
+
   const movePlayer = (paths, merkelData) => {
     let pathIndex = 0;
     const curPlayerIndex = players.findIndex(
@@ -192,7 +224,7 @@ const Game = () => {
           vertexCoordinate={vertexCoordinate}
         />
         {
-          startBattleData ? <Battle /> : null
+          startBattleData ? <Battle finishBattle={finishBattle} /> : null
         }
         <div className="opt-wrapper">
           <button className="mi-btn">Rank</button>