diff --git a/packages/client/src/assets/img/btn.png b/packages/client/src/assets/img/btn.png
new file mode 100644
index 00000000..98c3652f
Binary files /dev/null and b/packages/client/src/assets/img/btn.png differ
diff --git a/packages/client/src/assets/img/delivery.png b/packages/client/src/assets/img/delivery.png
new file mode 100644
index 00000000..316302f8
Binary files /dev/null and b/packages/client/src/assets/img/delivery.png differ
diff --git a/packages/client/src/assets/img/dialog.png b/packages/client/src/assets/img/dialog.png
new file mode 100644
index 00000000..674fa920
Binary files /dev/null and b/packages/client/src/assets/img/dialog.png differ
diff --git a/packages/client/src/assets/img/duck_default.png b/packages/client/src/assets/img/duck_default.png
new file mode 100644
index 00000000..c175b933
Binary files /dev/null and b/packages/client/src/assets/img/duck_default.png differ
diff --git a/packages/client/src/assets/img/user_bg.png b/packages/client/src/assets/img/user_bg.png
new file mode 100644
index 00000000..1aae03f7
Binary files /dev/null and b/packages/client/src/assets/img/user_bg.png differ
diff --git a/packages/client/src/common.scss b/packages/client/src/common.scss
index 175fa6c0..affdfa3b 100644
--- a/packages/client/src/common.scss
+++ b/packages/client/src/common.scss
@@ -38,7 +38,14 @@ button {
 }
 
 .mi-modal.ant-modal .ant-modal-content {
-    background: #412F50F2;
+    //background: #412F50F2;
+    width: 562px;
+    height: 392px;
+    background: url("./assets/img/dialog.png") no-repeat center / 100% 100%;
+
+    .ant-modal-body {
+        height: 100%;
+    }
 }
 
 @font-face {
@@ -52,7 +59,16 @@ button {
 .mi-btn {
     position: relative;
     font-family: MISS, sans-serif;
-    color: #fff;
-    background: url("./assets/img/btn_1.png") no-repeat center / 100% 100%;
-    text-shadow: #883360 2px 0 0, #883360 0 2px 0, #883360 -2px 0 0, #883360 0 -2px 0;
+    color: #5D2E1C;
+    background: url("./assets/img/btn.png") no-repeat center / 100% 100%;
+    //text-shadow: #883360 2px 0 0, #883360 0 2px 0, #883360 -2px 0 0, #883360 0 -2px 0;
+}
+
+.mi-input {
+    padding: 0 20px;
+    font-size: 20px;
+    border: 0;
+    outline: 0;
+    color: #5D2E1C;
+    background: url("./assets/img/btn.png") no-repeat center / 100% 100%;
 }
\ No newline at end of file
diff --git a/packages/client/src/components/MapCell/index.tsx b/packages/client/src/components/MapCell/index.tsx
index b3ace795..29d71390 100644
--- a/packages/client/src/components/MapCell/index.tsx
+++ b/packages/client/src/components/MapCell/index.tsx
@@ -3,6 +3,7 @@ import { CellType } from '../../constants';
 import { getCellClass, isMovable } from '@/utils';
 import './styles.scss';
 import Player, { IPlayer } from '@/components/Player';
+import { DELIVERY } from '@/config/map';
 
 interface ITransform {
   index: number;
@@ -38,6 +39,7 @@ const MapCell = (props: IProps) => {
 
   const [menuVisible, setMenuVisible] = useState(false);
   const [activePlayerId, setActivePlayerId] = useState(-1);
+  const isDelivery = DELIVERY.x === x && DELIVERY.y === y;
 
   if (!cellClassCache[`${y}-${x}`]) {
     cellClassCache[`${y}-${x}`] = getCellClass(mapData, { x, y});
@@ -107,6 +109,10 @@ const MapCell = (props: IProps) => {
         }
       </div>
 
+      {
+        isDelivery && <div className={'cell-map-delivery'}/>
+      }
+
       {
         players && players.map((player) => <Player {...player}/>)
       }
diff --git a/packages/client/src/components/MapCell/styles.scss b/packages/client/src/components/MapCell/styles.scss
index 7df77bae..527d6d62 100644
--- a/packages/client/src/components/MapCell/styles.scss
+++ b/packages/client/src/components/MapCell/styles.scss
@@ -8,6 +8,16 @@
         grid-template-rows: 1fr 1fr 1fr;
     }
 
+    .cell-map-delivery {
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: url("/src/assets/img/delivery.png") no-repeat center 100% / cover;
+    }
+
     @for $i from 1 through 28 {
         .mi-wall-#{$i} {
             background: url("/src/assets/wall/wall_#{$i}.png") no-repeat center 100% / cover;
diff --git a/packages/client/src/components/UserInfo/index.tsx b/packages/client/src/components/UserInfo/index.tsx
new file mode 100644
index 00000000..a99146e3
--- /dev/null
+++ b/packages/client/src/components/UserInfo/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import './styles.scss';
+import UserPackage from '@/components/UserPackage';
+import userImg from '@/assets/img/duck_default.png';
+
+const UserInfo = () => {
+  return (
+    <div className={'mi-userinfo-wrapper'}>
+      <div className="left-main-content">
+        <h3>User info</h3>
+        <div className="user-detail-wrapper">
+          <div className="user-appearance-wrapper">
+            <img src={userImg} alt="" className={'user-appearance'}/>
+          </div>
+          <div className="loot-wrapper">
+            <div className="loot-detail">
+
+            </div>
+            <div className="loot-detail">
+
+            </div>
+          </div>
+          <div className="user-attr-wrapper">
+            <dl>
+              <dt>HP</dt>
+              <dd><span className="base-attr">100</span><span className="extra-attr">100</span></dd>
+            </dl>
+            <dl>
+              <dt>Attack</dt>
+              <dd><span className="base-attr">20</span><span className="extra-attr">1</span></dd>
+            </dl>
+            <dl>
+              <dt>AttackRange</dt>
+              <dd><span className="base-attr">5</span><span className="extra-attr">1</span></dd>
+            </dl>
+            <dl>
+              <dt>Speed</dt>
+              <dd><span className="base-attr">2</span><span className="extra-attr">2</span></dd>
+            </dl>
+            <dl>
+              <dt>Strength</dt>
+              <dd><span className="base-attr">20</span><span className="extra-attr">1</span></dd>
+            </dl>
+            <dl>
+              <dt>Space</dt>
+              <dd><span className="base-attr">10</span><span className="extra-attr">1</span></dd>
+            </dl>
+          </div>
+        </div>
+      </div>
+      <div className="right-main-content">
+        <UserPackage
+          title={'User Package'}
+        />
+        <UserPackage
+          title={'Season Package'}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UserInfo;
\ No newline at end of file
diff --git a/packages/client/src/components/UserInfo/styles.scss b/packages/client/src/components/UserInfo/styles.scss
new file mode 100644
index 00000000..b1e7ee48
--- /dev/null
+++ b/packages/client/src/components/UserInfo/styles.scss
@@ -0,0 +1,80 @@
+.mi-userinfo-wrapper {
+    display: flex;
+    justify-content: space-between;
+
+    h3 {
+        font-size: 28px;
+        margin-bottom: 8px;
+    }
+
+    .left-main-content {
+        width: 768px;
+    }
+
+    .user-detail-wrapper {
+        height: 378px;
+    }
+
+    .user-detail-wrapper {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .user-appearance-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 338px;
+        height: 100%;
+        background: url("../../assets/img/user_bg.png") no-repeat center / 100% 100%;
+
+        .user-appearance {
+            width: 222px;
+        }
+    }
+
+    .loot-wrapper {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .loot-detail {
+        width: 180px;
+        height: 180px;
+        border: 1px solid #FFF5E9;
+        background: #000;
+        color: #FFF5E9;
+    }
+
+    .user-attr-wrapper {
+        width: 213px;
+        font-size: 26px;
+
+        dl {
+            display: flex;
+        }
+
+        dt {
+            margin-right: 10px;
+        }
+
+        .base-attr {
+            margin-right: 10px;
+            color: #fff;
+        }
+
+        .extra-attr {
+            color: red;
+
+            &::before {
+                content: '+';
+            }
+        }
+    }
+
+    .mi-user-package {
+        margin-bottom: 24px;
+    }
+}
\ No newline at end of file
diff --git a/packages/client/src/components/UserPackage/index.tsx b/packages/client/src/components/UserPackage/index.tsx
new file mode 100644
index 00000000..f4a7b65d
--- /dev/null
+++ b/packages/client/src/components/UserPackage/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import './styles.scss';
+
+interface IProps {
+  title: string;
+}
+
+const arr = new Array(10).fill(10);
+
+const UserPackage = (props: IProps) => {
+  return (
+    <div className="mi-user-package">
+      <h3>{props.title}</h3>
+      <div className="package-items-wrapper">
+      {
+        arr.map(() => {
+          return (
+            <div className='package-item'>
+
+            </div>
+          )
+        })
+      }
+      </div>
+    </div>
+  );
+};
+
+export default UserPackage;
\ No newline at end of file
diff --git a/packages/client/src/components/UserPackage/styles.scss b/packages/client/src/components/UserPackage/styles.scss
new file mode 100644
index 00000000..9b8b9756
--- /dev/null
+++ b/packages/client/src/components/UserPackage/styles.scss
@@ -0,0 +1,21 @@
+.mi-user-package {
+    width: 366px;
+
+    .package-items-wrapper {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .package-item {
+        margin-bottom: 14px;
+        width: 62px;
+        height: 62px;
+        background: #FFF5E9;
+        border: 6px solid transparent;
+
+        &:nth-child(-n+3) {
+            border-color: #DCC7AF;
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/client/src/config/map.ts b/packages/client/src/config/map.ts
index 805eb48f..3ad803dd 100644
--- a/packages/client/src/config/map.ts
+++ b/packages/client/src/config/map.ts
@@ -1,14 +1,19 @@
+export const DELIVERY = {
+  x: 4,
+  y: 5
+}
+
 const MAP_CFG = [
   [101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101],
   [101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
   [101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101],
   [101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
-  [101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
-  [101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
-  [101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
-  [101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
-  [101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
-  [101, 101, 101, 102, 102, 102, 102, 102, 102, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
+  [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
+  [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
+  [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
+  [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
+  [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101],
+  [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
   [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
   [101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 100, 101, 101],
   [101, 101, 101, 101, 101, 101, 101, 101, 101, 100, 100, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 100, 100, 100, 100, 100, 100, 101, 101, 101, 101, 101, 100, 101, 101, 101, 101, 101, 101, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 101, 101, 101, 100, 101, 101],
diff --git a/packages/client/src/pages/game/index.tsx b/packages/client/src/pages/game/index.tsx
index ff14ad4d..ac67f653 100644
--- a/packages/client/src/pages/game/index.tsx
+++ b/packages/client/src/pages/game/index.tsx
@@ -155,6 +155,7 @@ const Game = () => {
         data={renderMapData}
         vertexCoordinate={vertexCoordinate}
         onPlayerMove={movePlayer}
+
       />
       <Battle />
       <div className="opt-wrapper">
diff --git a/packages/client/src/pages/home/header/index.tsx b/packages/client/src/pages/home/header/index.tsx
index ad845b5d..fe5aaa8a 100644
--- a/packages/client/src/pages/home/header/index.tsx
+++ b/packages/client/src/pages/home/header/index.tsx
@@ -43,7 +43,7 @@ const HomeHeader = (props: IProps) => {
         props.walletAddress ?
           <UserAddress address={props.walletAddress} account={'0.1ETH'}/>
           :
-          <button className="play-btn mi-btn" onClick={props.onPlayBtnClick}>PLAY</button>
+          <button className="play-btn mi-btn" onClick={props.onPlayBtnClick}>PLAY NOW</button>
       }
     </div>
   );
diff --git a/packages/client/src/pages/home/header/styles.scss b/packages/client/src/pages/home/header/styles.scss
index 99866b8d..15ad62cc 100644
--- a/packages/client/src/pages/home/header/styles.scss
+++ b/packages/client/src/pages/home/header/styles.scss
@@ -18,8 +18,8 @@
     }
 
     .play-btn {
-        width: 214px;
-        height: 72px;
+        width: 210px;
+        height: 66px;
         font-size: 24px;
     }
 
diff --git a/packages/client/src/pages/home/index.tsx b/packages/client/src/pages/home/index.tsx
index da82306c..99b2332d 100644
--- a/packages/client/src/pages/home/index.tsx
+++ b/packages/client/src/pages/home/index.tsx
@@ -1,44 +1,56 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Header from '@/pages/home/header';
 import './styles.scss';
 import useModal from '@/hooks/useModal';
 import Loading from '@/components/Loading';
 import MintList from '@/config/mint';
+import { message } from 'antd';
+import UserInfo from '@/components/UserInfo';
 
 const Home = () => {
 
   const [hasInit, setHasInit] = useState(false);
   const [walletAddress, setWalletAddress] = useState('');
-  const [step, setStep] = useState('play');
+  const [step, setStep] = useState('mint');
+  const usernameRef = useRef<HTMLInputElement>();
   const { Modal, open, close, setContent } = useModal({
     title: '',
   });
 
   const createWallet = () => {
     setContent(
-      <div className="create-wallet-loading-wrapper">
-        <Loading/>
-        <div className="create-wallet-loading-content">
-          Creating Wallet...
+      <div className="create-wallet-wrapper">
+        <div className="create-wallet-content">
+          You have successfully created a wallet.Name your character and start your journey!
+        </div>
+        <div className="mint-name">
+          <input type="text" className="mi-input" ref={usernameRef} />
+          <button className="mi-btn" onClick={toMint}>OK</button>
         </div>
       </div>
     );
     open();
-    setTimeout(() => {
-      setWalletAddress('0X1234567894519845184814');
-      setContent(
-        <div className="create-wallet-successful-wrapper">
-          <div className="create-wallet-successful-content">
-            You have successfully created a wallet, and we will send you xxx test tokens as  a gift.
-            Start your journey in Mississippi!
-          </div>
-          <button className="mi-btn" onClick={toMint}>OK</button>
-        </div>
-      )
-    }, 3000);
+    // setTimeout(() => {
+    //   setWalletAddress('0X1234567894519845184814');
+    //   setContent(
+    //     <div className="create-wallet-successful-wrapper">
+    //       <div className="create-wallet-successful-content">
+    //         You have successfully created a wallet, and we will send you xxx test tokens as  a gift.
+    //         Start your journey in Mississippi!
+    //       </div>
+    //       <button className="mi-btn" onClick={toMint}>OK</button>
+    //     </div>
+    //   )
+    // }, 3000);
   }
   
   const toMint = () => {
+    if (!usernameRef.current.value) {
+      message.error('Please input your username');
+      return;
+    }
+    console.log(usernameRef.current.value, 'username');
+    setWalletAddress('0X1234567894519845184814');
     close();
     setStep('mint');
   }
@@ -68,42 +80,42 @@ const Home = () => {
       {
         step === 'mint' && (
           <div className="mi-section mint-section">
-            <h2 className="mint-title">Mint Your Own Character</h2>
-            <p className="mint-desc">
-              You can select and combine elements from the left bar to create your own character. <br/>
-              After generation of your character, initial attributes will be randomly generated
-            </p>
+            <div className="mint-box">
+              <h2 className="mint-title">HOME</h2>
+              <UserInfo/>
+              <button className="mi-btn">mint and go</button>
+            </div>
 
-            <div className="mint-wrapper">
-              <div className="choose-unit-wrapper">
-                {
-                  MintList.map((item) => {
-                    return (
-                      <div className="mint-row" key={item.name}>
+            {/*<div className="mint-wrapper">*/}
+            {/*  <div className="choose-unit-wrapper">*/}
+            {/*    {*/}
+            {/*      MintList.map((item) => {*/}
+            {/*        return (*/}
+            {/*          <div className="mint-row" key={item.name}>*/}
 
-                      </div>
-                    )
-                  })
-                }
-              </div>
+            {/*          </div>*/}
+            {/*        )*/}
+            {/*      })*/}
+            {/*    }*/}
+            {/*  </div>*/}
 
-              <div className="preview-wrapper">
-                <div className="preview-box">
+            {/*  <div className="preview-wrapper">*/}
+            {/*    <div className="preview-box">*/}
 
-                </div>
+            {/*    </div>*/}
 
-                <div className="init-name-wrapper">
-                  <label htmlFor="username">Name You Character</label>
-                  <input type="text" className="username" id="username"/>
-                </div>
+            {/*    <div className="init-name-wrapper">*/}
+            {/*      <label htmlFor="username">Name You Character</label>*/}
+            {/*      <input type="text" className="username" id="username"/>*/}
+            {/*    </div>*/}
 
-                <div className="opt-wrapper">
-                  <button className="mi-btn">mint player</button>
-                  <button className="mi-btn">mint and go</button>
-                </div>
+            {/*    <div className="opt-wrapper">*/}
+            {/*      <button className="mi-btn">mint player</button>*/}
+            {/*      */}
+            {/*    </div>*/}
 
-              </div>
-            </div>
+            {/*  </div>*/}
+            {/*</div>*/}
           </div>
         )
       }
diff --git a/packages/client/src/pages/home/styles.scss b/packages/client/src/pages/home/styles.scss
index 469f8cc1..3736bb7a 100644
--- a/packages/client/src/pages/home/styles.scss
+++ b/packages/client/src/pages/home/styles.scss
@@ -11,54 +11,76 @@
 
         .play-btn {
             position: absolute;
-            width: 360px;
-            height: 112px;
+            width: 210px;
+            height: 66px;
             left: 50%;
             bottom: 25%;
-            font-size: 30px;
+            font-size: 24px;
             transform: translate3d(-50%, 0, 0);
         }
     }
 
 
     .mint-section {
-        font-family: Arial, "Microsoft YaHei UI", sans-serif;
-        color: #fff;
-        background: #0C0B0B;
+
+        font-family: MISS, Arial, "Microsoft YaHei UI", sans-serif;
+        color: #BC8C61;
+        background: rgba(0, 0, 0, 0.6);
+
+        .mint-box {
+            padding-top: 24px;
+            width: 1200px;
+            margin: 0 auto;
+        }
 
         .mint-title {
+            margin-bottom: 18px;
             font-size: 32px;
             font-weight: 700;
             line-height: 40px;
-            text-align: center;
         }
 
-        .mint-desc {
-            margin: 0 auto;
-            width: 1100px;
-            font-size: 20px;
-            font-weight: 700;
-            line-height: 24px;
-            text-align: center;
+        .mi-btn {
+            display: block;
+            margin: 36px auto;
+            width: 238px;
+            height: 66px;
+            font-size: 32px;
         }
 
-        .mint-wrapper {
-            width: 1280px;
-            margin: 0 auto;
-        }
     }
 }
 
-.create-wallet-loading-wrapper {
+.create-wallet-wrapper {
+    padding: 40px;
     display: flex;
-    justify-content: space-around;
-    align-items: center;
-    padding: 20px;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
 
-    .create-wallet-loading-content {
-        font-size: 24px;
+    .create-wallet-content {
+        padding: 20px;
+        font-size: 20px;
         font-family: MISS, sans-serif;
-        color: #e16f39;
+        text-align: center;
+        color: #5D2E1C;
+    }
+
+    .mint-name {
+        display: flex;
+        justify-content: space-between;
+
+        input {
+            width: 245px;
+            height: 45px;
+            background: url("../../assets/img/btn.png") no-repeat center / 100% 100%;
+        }
+
+        button {
+            font-size: 24px;
+            width: 170px;
+            height: 45px;
+        }
     }
 }