diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index d39f8a6..330a3f8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -7,9 +7,37 @@
     <list default="true" id="81e28f08-7929-4107-9a7a-4c51f856d31e" name="更改" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/activity.log" beforeDir="false" afterPath="$PROJECT_DIR$/activity.log" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/chessboard/Chess.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/chessboard/Chess.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/Countdown.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/Countdown.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/Gohome.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/Gohome.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/chessboard/ChessBoard.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/chessboard/ChessBoard.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/checkerboard/src/components/chessboard/ChessBoard.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/chessboard/ChessBoard.jsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/story/StoryFirst.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/story/StoryFirst.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/header/header.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/header/header.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/rule/Rule.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/rule/Rule.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/rulepopup/RulePupup.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/rulepopup/RulePupup.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/scrollbar/Scrollbar.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/scrollbar/Scrollbar.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/scrollbar/Scrollbar.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/scrollbar/Scrollbar.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/shiled/Shiled.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/shiled/Shiled.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/shiled/Shiled.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/shiled/Shiled.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/shiledcountdown/ShiledCountDown.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/shiledcountdown/ShiledCountDown.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/shiledcountdown/ShiledCountDown.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/shiledcountdown/ShiledCountDown.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/story/Story.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/story/Story.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/story/StorySecond.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/story/StorySecond.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/story/StoryThree.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/story/StoryThree.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/table/RecordTable.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/table/RecordTable.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/table/UserRecordTable.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/table/UserRecordTable.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/table/UserRecordTable.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/table/UserRecordTable.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/translation/translation.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/translation/translation.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/userinfo/UserInfo.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/userinfo/UserInfo.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/userinfo/UserInfo.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/userinfo/UserInfo.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/web3wallet/Wallet.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/web3wallet/Wallet.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/components/web3wallet/Wallet.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/components/web3wallet/Wallet.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/index.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/pages/home/Expand.css" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/pages/home/Expand.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/checkerboard/src/pages/home/Expand.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/checkerboard/src/pages/home/Expand.jsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/controller/checkerboard.go" beforeDir="false" afterPath="$PROJECT_DIR$/controller/checkerboard.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/go.mod" beforeDir="false" afterPath="$PROJECT_DIR$/go.mod" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -72,7 +100,7 @@
     &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
     &quot;node.js.selected.package.standard&quot;: &quot;&quot;,
     &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.javascript.linters.eslint&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;go.vgo&quot;,
     &quot;ts.external.directory.path&quot;: &quot;D:\\GoLand 2024.2.3\\plugins\\javascript-plugin\\jsLanguageServicesImpl\\external&quot;
   }
 }</component>
diff --git a/activity.log b/activity.log
index 26e63e0..fbef7a3 100644
--- a/activity.log
+++ b/activity.log
@@ -2279,3 +2279,66 @@
 {"level":"INFO","time":"2024-12-30T14:26:01.206+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=2)连接"}
 {"level":"INFO","time":"2024-12-30T14:29:05.398+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
 {"level":"INFO","time":"2024-12-30T14:31:23.617+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T13:11:35.994+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-31T13:11:35.998+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-31T13:11:36.478+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-31T13:11:42.121+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
+{"level":"ERROR","time":"2024-12-31T13:11:43.576+0800","caller":"middleware/token.go:28","msg":"token 无效","error":"token不正确"}
+{"level":"ERROR","time":"2024-12-31T13:11:47.483+0800","caller":"middleware/token.go:28","msg":"token 无效","error":"token不正确"}
+{"level":"ERROR","time":"2024-12-31T13:12:05.015+0800","caller":"middleware/token.go:28","msg":"token 无效","error":"token不正确"}
+{"level":"ERROR","time":"2024-12-31T13:12:12.047+0800","caller":"middleware/token.go:28","msg":"token 无效","error":"token不正确"}
+{"level":"INFO","time":"2024-12-31T13:13:29.215+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T13:15:13.627+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T14:04:18.482+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-31T14:04:18.487+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-31T14:04:18.954+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-31T14:04:24.087+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
+{"level":"INFO","time":"2024-12-31T14:06:42.534+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T14:08:59.143+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T14:23:29.785+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-31T14:23:29.791+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-31T14:23:30.241+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-31T14:23:35.252+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
+{"level":"INFO","time":"2024-12-31T14:25:11.425+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-31T14:25:11.429+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-31T14:25:11.877+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-31T14:25:17.106+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
+{"level":"INFO","time":"2024-12-31T15:00:32.847+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-31T15:00:32.851+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-31T15:00:33.257+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-31T15:00:38.542+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
+{"level":"INFO","time":"2024-12-31T15:12:59.320+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=2)连接"}
+{"level":"INFO","time":"2024-12-31T15:16:45.681+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T15:16:48.293+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T15:16:51.548+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T15:16:52.785+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=2)连接"}
+{"level":"INFO","time":"2024-12-31T15:16:54.225+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T15:18:15.854+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=4)连接"}
+{"level":"INFO","time":"2024-12-31T15:18:18.049+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=2)连接"}
+{"level":"INFO","time":"2024-12-31T15:18:27.686+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T15:18:29.678+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T15:18:30.688+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=2)连接"}
+{"level":"INFO","time":"2024-12-31T15:19:03.135+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"ERROR","time":"2024-12-31T15:57:44.879+0800","caller":"controller/checkerboard.go:30","msg":"活动结束"}
+{"level":"INFO","time":"2024-12-31T15:57:51.495+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=1)连接"}
+{"level":"INFO","time":"2024-12-31T15:58:25.383+0800","caller":"utils/init.go:160","msg":"init logger success"}
+{"level":"INFO","time":"2024-12-31T15:58:25.387+0800","caller":"utils/init.go:42","msg":"初始化logger成功"}
+{"level":"INFO","time":"2024-12-31T15:58:25.877+0800","caller":"utils/init.go:47","msg":"初始化mysql成功"}
+{"level":"INFO","time":"2024-12-31T15:58:31.950+0800","caller":"handle/create_shiled.go:26","msg":"初始化盾信息成功"}
+{"level":"ERROR","time":"2024-12-31T15:58:36.231+0800","caller":"controller/checkerboard.go:86","msg":"用户提交的数据不足以买下"}
+{"level":"ERROR","time":"2024-12-31T15:58:59.804+0800","caller":"controller/checkerboard.go:43","msg":"参数绑定失败","error":"json: cannot unmarshal string into Go struct field Record.transaction_amount of type float64"}
+{"level":"ERROR","time":"2024-12-31T15:59:02.526+0800","caller":"controller/checkerboard.go:43","msg":"参数绑定失败","error":"json: cannot unmarshal string into Go struct field Record.transaction_amount of type float64"}
+{"level":"ERROR","time":"2024-12-31T15:59:09.925+0800","caller":"controller/checkerboard.go:43","msg":"参数绑定失败","error":"json: cannot unmarshal string into Go struct field Record.transaction_amount of type float64"}
+{"level":"ERROR","time":"2024-12-31T16:00:49.205+0800","caller":"controller/checkerboard.go:86","msg":"用户提交的数据不足以买下"}
+{"level":"ERROR","time":"2024-12-31T16:01:02.166+0800","caller":"controller/checkerboard.go:43","msg":"参数绑定失败","error":"json: cannot unmarshal string into Go struct field Record.transaction_amount of type float64"}
+{"level":"INFO","time":"2024-12-31T16:02:28.673+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:02:33.664+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:02:36.657+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:02:58.123+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:03:23.531+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:03:27.326+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:04:10.676+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:05:00.667+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:05:02.844+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:05:13.669+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
+{"level":"INFO","time":"2024-12-31T16:05:16.837+0800","caller":"handle/wshandle.go:95","msg":"用户0xb1b49f717045f0a1a667ccb56e5caaf47d16116f通过客户端主动关闭模块%!t(int=3)连接"}
diff --git a/checkerboard/package-lock.json b/checkerboard/package-lock.json
index f24f1be..1027a29 100644
--- a/checkerboard/package-lock.json
+++ b/checkerboard/package-lock.json
@@ -2575,7 +2575,7 @@
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmmirror.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
-      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "integrity": "sha512-remHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
@@ -5047,7 +5047,7 @@
     "node_modules/@mui/material": {
       "version": "6.3.0",
       "resolved": "https://registry.npmmirror.com/@mui/material/-/material-6.3.0.tgz",
-      "integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==",
+      "integrity": "sha512-qhlTFyRMxfoVremUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.26.0",
@@ -6353,7 +6353,7 @@
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
       "version": "4.27.3",
       "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.27.3.tgz",
-      "integrity": "sha512-Sv2GWmrJfRY57urktVLQ0VKZjNZGogVtASAgosDZ1aUB+ykPxSi3X1nWORL5Jk0sTIIwQiPH7iE3BMi9zGWfkg==",
+      "integrity": "sha512-Sv2GWmrJfRY57urktVLQ0VKZjNZGogVtASAgosDZ1aUB+ykremSi3X1nWORL5Jk0sTIIwQiPH7iE3BMi9zGWfkg==",
       "cpu": [
         "arm"
       ],
@@ -6367,7 +6367,7 @@
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
       "version": "4.27.3",
       "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.27.3.tgz",
-      "integrity": "sha512-FPoJBLsPW2bDNWjSrwNuTPUt30VnfM8GPGRoLCYKZpPx0xiIEdFip3dH6CqgoT0RnoGXptaNziM0WlKgBc+OWQ==",
+      "integrity": "sha512-FPoJBLsPW2bDNWjSrwNuTPUt30VnfM8GPGRoLCYKZprem0xiIEdFip3dH6CqgoT0RnoGXptaNziM0WlKgBc+OWQ==",
       "cpu": [
         "arm64"
       ],
@@ -6479,7 +6479,7 @@
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
       "version": "4.27.3",
       "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.27.3.tgz",
-      "integrity": "sha512-ecE36ZBMLINqiTtSNQ1vzWc5pXLQHlf/oqGp/bSbi7iedcjcNb6QbCBNG73Euyy2C+l/fn8qKWEwxr+0SSfs3w==",
+      "integrity": "sha512-ecE36ZBMLINqiTtSNQ1vzWc5remLQHlf/oqGp/bSbi7iedcjcNb6QbCBNG73Euyy2C+l/fn8qKWEwxr+0SSfs3w==",
       "cpu": [
         "ia32"
       ],
@@ -8337,7 +8337,7 @@
     "node_modules/@uni/file": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/@uni/file/-/file-1.1.1.tgz",
-      "integrity": "sha512-gbymGoyD02cWHGVGapxp0zl3VAEU/u4vpDSyfS1tSnIGFjwIbCGq+W+uTAnJYduDbdy4Xiuwzbf0b/4slY9bmQ==",
+      "integrity": "sha512-gbymGoyD02cWHGVGaremp0zl3VAEU/u4vpDSyfS1tSnIGFjwIbCGq+W+uTAnJYduDbdy4Xiuwzbf0b/4slY9bmQ==",
       "license": "BSD-3-Clause",
       "peer": true,
       "dependencies": {
@@ -11423,7 +11423,7 @@
     "node_modules/align-text/node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "integrity": "sha512-NcdALwremkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT"
     },
     "node_modules/align-text/node_modules/kind-of": {
@@ -11568,7 +11568,7 @@
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
+      "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllremMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -16571,7 +16571,7 @@
     "node_modules/fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==",
+      "integrity": "sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBAremdQyfepKly2kA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -16970,7 +16970,7 @@
     "node_modules/has-values/node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "integrity": "sha512-NcdALwremkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT",
       "optional": true
     },
@@ -17632,7 +17632,7 @@
     "node_modules/is-descriptor": {
       "version": "0.1.7",
       "resolved": "https://registry.npmmirror.com/is-descriptor/-/is-descriptor-0.1.7.tgz",
-      "integrity": "sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==",
+      "integrity": "sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfrem4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -20221,7 +20221,7 @@
     "node_modules/node-libs-browser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmmirror.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
-      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3remgCu8KS3b71YK5Q==",
       "license": "MIT",
       "dependencies": {
         "assert": "^1.1.1",
@@ -20365,7 +20365,7 @@
     "node_modules/normalize-package-data/node_modules/resolve": {
       "version": "1.22.9",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.9.tgz",
-      "integrity": "sha512-QxrmX1DzraFIi9PxdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==",
+      "integrity": "sha512-QxrmX1DzraFIi9remdG5VkRfRwIgjwyud+z/iBwfRRrVmHc+P9Q7u2lSSpQ6bjr2gy5lrqIiU9vb6iAeGf2400A==",
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.0",
@@ -20516,7 +20516,7 @@
     "node_modules/object-copy/node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "integrity": "sha512-NcdALwremkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT",
       "optional": true
     },
@@ -21010,7 +21010,7 @@
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVremCIO0z4taYw==",
       "license": "(MIT AND Zlib)"
     },
     "node_modules/parent-module": {
@@ -21855,7 +21855,7 @@
     "node_modules/rax": {
       "version": "1.2.3",
       "resolved": "https://registry.npmmirror.com/rax/-/rax-1.2.3.tgz",
-      "integrity": "sha512-/lkZ7Yb3be06e68y4wn5WIyudzvrnHiTEjeAznJ7nPrfmjoCan2hcKPXmTYXdHU+IqkvGbzDlLZRWbVtmRTAcw==",
+      "integrity": "sha512-/lkZ7Yb3be06e68y4wn5WIyudzvrnHiTEjeAznJ7nPrfmjoCan2hcKremmTYXdHU+IqkvGbzDlLZRWbVtmRTAcw==",
       "license": "BSD-3-Clause",
       "peer": true,
       "dependencies": {
@@ -22887,7 +22887,7 @@
     "node_modules/read-pkg-up": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
+      "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTremoHkfZf3+DkCCsXox94/VWZniuZm6A==",
       "license": "MIT",
       "dependencies": {
         "find-up": "^1.0.0",
@@ -23650,7 +23650,7 @@
     "node_modules/safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
+      "integrity": "sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4remtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -24131,7 +24131,7 @@
     "node_modules/snapdragon-util/node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "integrity": "sha512-NcdALwremkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT",
       "optional": true
     },
@@ -24749,7 +24749,7 @@
     "node_modules/style-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/style-equal/-/style-equal-1.0.0.tgz",
-      "integrity": "sha512-gf20kfwh7eXsgPcwvYqViCBHr+GXIlpXOZR1wQftNH4/ee2P/yolWUVA/MdMdmMp+0BMfvaMKSIR1DQlY64Btw==",
+      "integrity": "sha512-gf20kfwh7eXsgPcwvYqViCBHr+GXIlremOZR1wQftNH4/ee2P/yolWUVA/MdMdmMp+0BMfvaMKSIR1DQlY64Btw==",
       "license": "MIT"
     },
     "node_modules/style-unit": {
@@ -24765,7 +24765,7 @@
     "node_modules/style-unit/node_modules/universal-env": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/universal-env/-/universal-env-2.0.0.tgz",
-      "integrity": "sha512-jfPJvPXFdhJHsDhuCHj3Njc3nxF+dmj6LeqKE9R41EdKKOJ1d5GGpFu3DrT+Ff+pxS9jsnbtj7BZYFAcLlxdPg==",
+      "integrity": "sha512-jfPJvremFdhJHsDhuCHj3Njc3nxF+dmj6LeqKE9R41EdKKOJ1d5GGpFu3DrT+Ff+remS9jsnbtj7BZYFAcLlxdPg==",
       "license": "BSD-3-Clause",
       "peer": true,
       "engines": {
@@ -24885,7 +24885,7 @@
     "node_modules/swiper": {
       "version": "6.5.0",
       "resolved": "https://registry.npmmirror.com/swiper/-/swiper-6.5.0.tgz",
-      "integrity": "sha512-cSx1SpfgrHlgwku++3Ce3cjPBpXgB7P+bGik5S3+F+j6ID0NUeV6qtmedFdr3C8jXR/W+TJPVNIT9fH/cwVAiA==",
+      "integrity": "sha512-cSx1SpfgrHlgwku++3Ce3cjPBremgB7P+bGik5S3+F+j6ID0NUeV6qtmedFdr3C8jXR/W+TJPVNIT9fH/cwVAiA==",
       "funding": [
         {
           "type": "patreon",
@@ -25151,7 +25151,7 @@
     "node_modules/to-object-path": {
       "version": "0.3.0",
       "resolved": "https://registry.npmmirror.com/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==",
+      "integrity": "sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58rembkngtBtqYxzNEyg==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -25164,7 +25164,7 @@
     "node_modules/to-object-path/node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "integrity": "sha512-NcdALwremkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT",
       "optional": true
     },
@@ -25513,7 +25513,7 @@
     "node_modules/uglify-js/node_modules/yargs": {
       "version": "3.10.0",
       "resolved": "https://registry.npmmirror.com/yargs/-/yargs-3.10.0.tgz",
-      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
+      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJremNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
       "license": "MIT",
       "dependencies": {
         "camelcase": "^1.0.2",
@@ -25683,7 +25683,7 @@
     "node_modules/universal-element": {
       "version": "0.0.6",
       "resolved": "https://registry.npmmirror.com/universal-element/-/universal-element-0.0.6.tgz",
-      "integrity": "sha512-J1olYldUlj35w4pBt1LljiRuRjohATGHCIiiOHOepXtELB8zESOdYDlrFtXfxGtb6TUZm8oAaOPbTwhb+6A4BA==",
+      "integrity": "sha512-J1olYldUlj35w4pBt1LljiRuRjohATGHCIiiOHOeremtELB8zESOdYDlrFtXfxGtb6TUZm8oAaOPbTwhb+6A4BA==",
       "peer": true,
       "dependencies": {
         "universal-env": "^3.0.0"
@@ -25724,7 +25724,7 @@
     "node_modules/universal-transition": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/universal-transition/-/universal-transition-1.1.1.tgz",
-      "integrity": "sha512-TeYwWDhoYSYeGwX2L80gAQx7wByGvQ1WsPxqp+c6yYzqrc6BUuqpohtWY5Gh4ZPo0nToSNeadhly9sjeGLlV6Q==",
+      "integrity": "sha512-TeYwWDhoYSYeGwX2L80gAQx7wByGvQ1Wsremqp+c6yYzqrc6BUuqpohtWY5Gh4ZPo0nToSNeadhly9sjeGLlV6Q==",
       "license": "BSD-3-Clause",
       "peer": true,
       "dependencies": {
@@ -25740,7 +25740,7 @@
     "node_modules/universal-unit-tool": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/universal-unit-tool/-/universal-unit-tool-1.0.0.tgz",
-      "integrity": "sha512-YTKN4pUqgAQqP5duZQSTxv2zswkUdZ4z3KtRgpXOxlo3huJm7xbiwhxeX8RM675Tjfo4entn8yQHclFJy9iaQQ==",
+      "integrity": "sha512-YTKN4pUqgAQqP5duZQSTxv2zswkUdZ4z3KtRgremOxlo3huJm7xbiwhxeX8RM675Tjfo4entn8yQHclFJy9iaQQ==",
       "license": "BSD-3-Clause",
       "peer": true,
       "dependencies": {
@@ -26416,7 +26416,7 @@
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-1.7.5.tgz",
-      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
+      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTremPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.1.2",
@@ -26586,7 +26586,7 @@
     "node_modules/watchpack-chokidar2/node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "integrity": "sha512-NcdALwremkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "license": "MIT",
       "optional": true
     },
@@ -28564,7 +28564,7 @@
     "node_modules/webpack/node_modules/yargs-parser": {
       "version": "4.2.1",
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-4.2.1.tgz",
-      "integrity": "sha512-+QQWqC2xeL0N5/TE+TY6OGEqyNRM+g2/r712PDNYgiCdXYCApXf1vzfmDSLBxfGRwV+moTq/V8FnMI24JCm2Yg==",
+      "integrity": "sha512-+QQWqC2xeL0N5/TE+TY6OGEqyNRM+g2/r712PDNYgiCdXYCAremf1vzfmDSLBxfGRwV+moTq/V8FnMI24JCm2Yg==",
       "license": "ISC",
       "dependencies": {
         "camelcase": "^3.0.0"
@@ -28780,7 +28780,7 @@
     "node_modules/window-size": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/window-size/-/window-size-0.1.0.tgz",
-      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
+      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1remhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
       "engines": {
         "node": ">= 0.8.0"
       }
diff --git a/checkerboard/src/components/Countdown.jsx b/checkerboard/src/components/Countdown.jsx
index 3802b8c..3cd626e 100644
--- a/checkerboard/src/components/Countdown.jsx
+++ b/checkerboard/src/components/Countdown.jsx
@@ -37,7 +37,7 @@ const styles = {
         fontFamily: 'Arial, sans-serif',
     },
     time: {
-        fontSize: '16px',
+        fontSize: '16rem',
         fontWeight: 'bold',
     },
 };
diff --git a/checkerboard/src/components/Gohome.jsx b/checkerboard/src/components/Gohome.jsx
index 8cb3289..ba5adec 100644
--- a/checkerboard/src/components/Gohome.jsx
+++ b/checkerboard/src/components/Gohome.jsx
@@ -7,11 +7,11 @@ const GoHome = () => {
         navigate('/')
     }
     const style = {
-        width:'200px',
-        height:'40px',
+        width:'200rem',
+        height:'40rem',
         backgroundColor:'#F5E01B',
-        border:'1px solid #F5E01B',
-        borderRadius:'12px',
+        border:'1rem solid #F5E01B',
+        borderRadius:'12rem',
         position:'absolute',
         fontWeight:'bolder',
         cursor:'pointer',
diff --git a/checkerboard/src/components/chessboard/ChessBoard.css b/checkerboard/src/components/chessboard/ChessBoard.css
index 317ab73..f6a36f0 100644
--- a/checkerboard/src/components/chessboard/ChessBoard.css
+++ b/checkerboard/src/components/chessboard/ChessBoard.css
@@ -22,9 +22,9 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 750px;
-    width: 1324px;
-    margin-top: 40px;
+    height: 750rem;
+        width: 1324rem;
+        margin-top: 40rem;
     clip-path: polygon(3% 0, 100% 0, 100% 100%, 0 100%);
     background-color: #000000;
     box-sizing: border-box;
@@ -39,9 +39,9 @@
     align-items: center;
     flex-wrap: wrap;
     flex-direction: column;
-    height: 730px;
-    width: 989px;
-    margin-left: 94px;
+    height: 730rem;
+        width: 989rem;
+        margin-left: 94rem;
     background-color: #191919;
     clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
 }
@@ -53,43 +53,43 @@
     flex-wrap: wrap;
     align-content: space-around;
     justify-content: flex-start;
-    margin-left: 10px;
-    margin-right: 93px;
+    margin-left: 10rem;
+        margin-right: 93rem;
     background-color: #191919;
-    height: 729px;
-    width: 300px;
+    height: 729rem;
+        width: 300rem;
 }
 
 .batch-avatar{
-    margin-top: 130px;
+    margin-top: 130rem;
 }
 
 .is-owner{
-    margin-top: 20px;
+    margin-top: 20rem;
     font-family: SF Pro;
-    font-size: 20px;
+    font-size: 20rem;
     font-weight: 860;
-    line-height: 23.87px;
+    line-height: 23.87rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
 }
 
 .owner-div{
-    margin-top: 30px;
+    margin-top: 30rem;
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 400;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
 }
 .owner-div span{
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 700;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -97,36 +97,36 @@
 }
 
 .value-div-owner{
-    margin-top: 10px;
+    margin-top: 10rem;
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 400;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
 }
 
 .value-div-noowner{
-    margin-top: 52px;
+    margin-top: 52rem;
 }
 
 .value-amount-font{
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 400;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
 }
 
 .amount-div-value{
-    margin-top: 5px;
+    margin-top: 5rem;
     font-family: SF Pro;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 700;
-    line-height: 19.09px;
+    line-height: 19.09rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -138,11 +138,11 @@
 }
 
 .batch-number-div{
-    margin-top: 20px;
+    margin-top: 20rem;
     font-family: SF Pro;
-    font-size: 20px;
+    font-size: 20rem;
     font-weight: 860;
-    line-height: 23.87px;
+    line-height: 23.87rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -150,11 +150,11 @@
 }
 
 .total-comount{
-    margin-top: 50px;
+    margin-top: 50rem;
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 400;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -162,32 +162,33 @@
 }
 .total-comount-div{
     font-family: SF Pro;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 700;
-    line-height: 19.09px;
+    line-height: 19.09rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
     color: #2FF519;
-    margin-top: 10px;
+    margin-top: 10rem;
 }
 
 .batch-buttom-right-input{
-    height: 50px;
-    width: 170px;
-    font-size: 16px;
+    height: 50rem;
+        width: 170rem;
+        font-size: 16rem;
     font-weight: 400;
-    border-radius: 12px;
-    border: 10px solid #292929;
+    border-radius: 12rem;
+        border: 10rem solid #292929;
     background-color: #191919;
     color: white;
-    margin-top: 50px;
+    margin-top: 50rem;
 }
 
 .batch-buttom-right-input:hover {
     background-color:#191919 !important;
     border-color: #292929; /* 鼠标悬停时的边框颜色 */
-    box-shadow: 0 0 5px #292929; /* 添加悬浮阴影 */
+    box-shadow: 0 0 5rem #292929;
+        /* 添加悬浮阴影 */
 }
 
 
@@ -195,20 +196,20 @@
 .batch-buttom-right-input:focus {
     background-color:#191919 !important;
     border-color: #292929;
-    box-shadow: 0 0 5px #292929;
+    box-shadow: 0 0 5rem #292929;
 }
 
 .container-right {
     display: flex;
     flex-direction: column;
-    margin-left: 10px;
-    margin-right: 93px;
+    margin-left: 10rem;
+        margin-right: 93rem;
     background-color: #191919;
-    height: 729px;
-    width: 300px;
+    height: 729rem;
+        width: 300rem;
 }
 .container-right-internal{
-    margin-left: 70px;
+    margin-left: 70rem;
 }
 
 .div-btn-style {
@@ -251,9 +252,9 @@
     justify-content: center;
     align-items: center;
     background-color: #e3e3e3;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 14px;
+    border: 1rem solid #ccc;
+        border-radius: 6rem;
+        font-size: 14rem;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.2s;
@@ -263,26 +264,40 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-left: 10px;
+    margin-left: 10rem;
     position: absolute;
-    border-radius: 5px;
-    top: 270px;
-    right: 3px;
+    border-radius: 5rem;
+        top: 270rem;
+        right: 3rem;
     z-index: 3;
 }
 
 .record-table-dev {
-    height: 500px;
-    border: 10px solid #000000;
+    height: 500rem;
+    border: 10rem solid #000000;
+}
+.record-table-dev-title{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 50rem;
+    color: #ffffff;
+    font-size: 16rem;
+    font-family: SF Pro;
+    font-weight: 800;
+    line-height: 16.71rem;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
 }
 
 .grid-container {
     display: grid;
     grid-template-columns: repeat(10, 1fr);
-    gap: 5px;
-    width: 500px;
-    height: 500px;
-    padding: 10px;
+    gap: 5rem;
+        width: 500rem;
+        height: 500rem;
+        padding: 10rem;
 }
 
 .shiled-div{
@@ -290,10 +305,10 @@
     position: relative;
     justify-content: center;
     align-items: center;
-    height: 50px;
-    width: 50px;
-    border: 5px solid #c53d7b;
-    font-size: 14px;
+    height: 50rem;
+        width: 50rem;
+        border: 5rem solid #c53d7b;
+        font-size: 14rem;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.2s;
@@ -304,13 +319,13 @@
     position: relative;
     justify-content: center;
     align-items: center;
-    height: 50px;
-    width: 50px;
-    border: 5px solid #6076C1;
+    height: 50rem;
+        width: 50rem;
+        border: 5rem solid #6076C1;
     background-image: url("./images/picture/grid-img.png");
     background-position: center;
     background-repeat: no-repeat;
-    font-size: 14px;
+    font-size: 14rem;
     font-weight: bold;
     cursor: pointer;
     transition: background-color 0.2s;
@@ -318,53 +333,53 @@
 
 .hover-style{
     position: absolute;
-    top: 40px;
-    right: -6px;
+    top: 40rem;
+        right: -6rem;
 }
 
 .selected-style{
     position: absolute;
-    top: 40px;
-    right: -6px;
+    top: 40rem;
+        right: -6rem;
 }
 
 .svg-style{
     position: absolute;
-    top: -5px;
-    left: 0px;
+    top: -5rem;
+        left: 0rem;
 }
 /*拥有的格子*/
 .grid-box.have {
-    border: 5px solid #4A7971;
+    border: 5rem solid #4A7971;
 }
 
 /*被他人抢占的*/
 .grid-box.preempted {
-    border: 5px solid #B35649;
+    border: 5rem solid #B35649;
 }
 
 
 .submit-button {
     text-align: center;
-    width: 20px;
-    margin-top: 10px;
-    padding-right: 25px;
-    font-size: 18px;
+    width: 20rem;
+        margin-top: 10rem;
+        padding-right: 25rem;
+        font-size: 18rem;
     color: #1677ff;
     border: none;
-    border-radius: 5px;
+    border-radius: 5rem;
     cursor: pointer;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.2);
     transition: background-color 0.3s, transform 0.3s;
 }
 
 .box-details {
-    width: 400px;
-    height: 400px;
-    margin-left: 20px;
-    padding: 10px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
+    width: 400rem;
+        height: 400rem;
+        margin-left: 20rem;
+        padding: 10rem;
+        border: 1rem solid #ddd;
+        border-radius: 5rem;
     background-color: #f9f9f9;
 }
 
@@ -374,59 +389,59 @@
 
 .popupStyle {
     position: fixed;
-    right: -50px;
+    right: -50rem;
     transform: translate(-50%, -50%);
-    width: 250px;
-    height: 400px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
+    width: 250rem;
+        height: 400rem;
+        box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.2);
+        border-radius: 6rem;
     background-color: white;
-    border: 1px solid black;
-    padding: 20px;
+    border: 1rem solid black;
+        padding: 20rem;
     z-index: 1;
 }
 
 .testStyle {
     position: fixed;
-    right: -50px;
+    right: -50rem;
     transform: translate(-50%, -50%);
-    width: 250px;
-    height: 400px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
+    width: 250rem;
+        height: 400rem;
+        box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.2);
+        border-radius: 6rem;
     background-color: white;
-    border: 1px solid black;
-    padding: 20px;
+    border: 1rem solid black;
+        padding: 20rem;
     z-index: 1;
 }
 
 .batch-button-style{
-    height:50px ;
-    width: 170px;
-    border: 10px solid #292929;
-    border-radius: 14px;
+    height: 50rem;
+        width: 170rem;
+        border: 10rem solid #292929;
+        border-radius: 14rem;
     background-color: #F5E01B;
     font-weight: 700;
-    font-size: 16px;
+    font-size: 16rem;
     color: #3C342F;
     cursor: pointer;
-    margin-top: 10px;
+    margin-top: 10rem;
 
 }
 
 .button-style{
-    margin-top: 10px;
-    height: 50px;
-    width: 170px;
+    margin-top: 10rem;
+        height: 50rem;
+        width: 170rem;
     cursor: pointer;
-    border: 10px solid #262626;
-    border-radius: 15px;
+    border: 10rem solid #262626;
+        border-radius: 15rem;
     background-color: #F5E01B;
     color:  #3C342F;
     font-family: SF Pro;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 700;
-    line-height: 19.09px;
+    line-height: 19.09rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -437,8 +452,8 @@
 .model-style{
     display: flex;
     flex-direction: column;
-    width: 849px;
-    border: 10px solid #292929 !important;
+    width: 849rem;
+        border: 10rem solid #292929 !important;
 }
 .div-style-top{
     display: flex;
@@ -449,17 +464,17 @@
     height: 100%;
     transform: scale(1.3,0.8);
     font-weight: bolder;
-    font-size: 50px;
+    font-size: 50rem;
 
 }
 
 .shild-wenzi-style-chess{
     position: absolute;
-    top: 145px;
-    left: 85px;
-    font-size: 16px;
+    top: 145rem;
+        left: 85rem;
+        font-size: 16rem;
     font-weight: 700;
-    letter-spacing: 1px;
+    letter-spacing: 1rem;
 }
 
 .chess-div-style-bottom{
@@ -479,29 +494,29 @@
     flex-wrap: nowrap;
     flex-direction: row;
     position: relative;
-    width: 349px;
-    height: 240px;
+    width: 349rem;
+        height: 240rem;
     background-color: #3C342F;
-    border-radius: 8px;
+    border-radius: 8rem;
 }
 
 .chess-button-left-style{
     display: flex;
-    font-size: 26px;
+    font-size: 26rem;
     font-weight: 700;
-    letter-spacing: 1px;
-    margin-left: 20px;
-    margin-top: 10px;
+    letter-spacing: 1rem;
+        margin-left: 20rem;
+        margin-top: 10rem;
 }
 
 .button-left-image{
-    height: 132px;
-    width: 349px;
+    height: 132rem;
+        width: 349rem;
 }
 .chess-button-left-button{
     display: flex;
     justify-content: space-around;
-    width: 349px;
+    width: 349rem;
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
@@ -510,18 +525,18 @@
 
 .svg-chess-choice{
     position: absolute;
-    top: -26px;
-    left: -25px;
+    top: -26rem;
+        left: -25rem;
 }
 
 .chess-button-left-button-p{
-    font-size: 46px;
+    font-size: 46rem;
     font-weight: 860;
-    letter-spacing: 1px;
+    letter-spacing: 1rem;
     color: #F5E01B;
 }
 .div-style-bottom-right{
-    width: 250px;
+    width: 250rem;
 }
 .buttom-right-top{
     display: flex;
@@ -536,7 +551,7 @@
     width: 100%;
 }
 .buttom-right-top p{
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 400;
 }
 
@@ -548,23 +563,24 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-top: 150px;
+    margin-top: 150rem;
 }
 
 .buttom-right-input{
-    height: 50px;
-    width: 170px;
-    font-size: 16px;
+    height: 50rem;
+        width: 170rem;
+        font-size: 16rem;
     font-weight: 400;
-    border-radius: 12px;
-    border: 10px solid #292929;
+    border-radius: 12rem;
+        border: 10rem solid #292929;
     background-color: #191919;
     color: white;
 }
 .buttom-right-input:hover {
     background-color:#191919 !important;
     border-color: #292929; /* 鼠标悬停时的边框颜色 */
-    box-shadow: 0 0 5px #292929; /* 添加悬浮阴影 */
+    box-shadow: 0 0 5rem #292929;
+        /* 添加悬浮阴影 */
 }
 
 
@@ -572,38 +588,38 @@
 .buttom-right-input:focus {
     background-color:#191919 !important;
     border-color: #292929;
-    box-shadow: 0 0 5px #292929;
+    box-shadow: 0 0 5rem #292929;
 }
 
 /* 输入框在选中后且鼠标悬停时样式 */
 .buttom-right-input-input:focus:hover {
     background-color:#191919 !important;
     border-color: #673ab7;
-    box-shadow: 0 0 5px rgba(103, 58, 183, 0.8);
+    box-shadow: 0 0 5rem rgba(103, 58, 183, 0.8);
 }
 
 .buttom-update-shiled {
-    width: 250px;
-    height: 40px;
+    width: 250rem;
+        height: 40rem;
     background-color: #f5df1b;
     cursor: pointer;
-    border: 1px solid #f5df1b;
-    border-radius: 10px;
-    margin-right: 10px;
+    border: 1rem solid #f5df1b;
+        border-radius: 10rem;
+        margin-right: 10rem;
     font-weight: 600;
-    font-size: 16px;
+    font-size: 16rem;
 }
 
 .buttom-confirm-shiled{
-    width: 250px;
-    height: 40px;
+    width: 250rem;
+        height: 40rem;
     background-color: #f9f9f9;
     cursor: pointer;
-    border: 1px solid #f9f9f9;
-    border-radius: 10px;
-    margin-left: 10px;
+    border: 1rem solid #f9f9f9;
+        border-radius: 10rem;
+        margin-left: 10rem;
     font-weight: 600;
-    font-size: 16px;
+    font-size: 16rem;
 }
 
 
@@ -616,11 +632,11 @@
         width: 100vw;
     }
     .grid-box {
-        height: 50px;
-        font-size: 14px;
+        height: 50rem;
+            font-size: 14rem;
     }
     .submit-button {
-        font-size: 16px;
-        padding: 10px 20px;
+        font-size: 16rem;
+            padding: 10rem 20rem;
     }
 }
\ No newline at end of file
diff --git a/checkerboard/src/components/chessboard/ChessBoard.jsx b/checkerboard/src/components/chessboard/ChessBoard.jsx
index e0aa0d2..4295eb3 100644
--- a/checkerboard/src/components/chessboard/ChessBoard.jsx
+++ b/checkerboard/src/components/chessboard/ChessBoard.jsx
@@ -157,8 +157,9 @@ const ChessBoard = ({gId}) => {
             return
         }
 
-        box.price>box.price_increase ?(setValue(box.price)):(setValue(box.price_increase))
-        setMessage(box); 
+        box.price>box.price_increase ?(setValue(box.price),setbetValue(box.price)):(setValue(box.price_increase),setbetValue(box.price_increase))
+        setMessage(box);
+
         setShowPopup(true);
         if (showPopup) {
             setSelectedBoxes([]);
@@ -254,7 +255,11 @@ const ChessBoard = ({gId}) => {
         setIncreaseValue(e.target.value);
     };
     const betValueChange =(e)=>{
-        setbetValue(e.target.value);
+        let v = parseFloat(e.target.value)
+        if (isNaN(v)){
+            v = null
+        }
+        setbetValue(v);
     }
 
 
@@ -443,7 +448,7 @@ const ChessBoard = ({gId}) => {
                                         ):
                                         (user.user_id === message.user_id ?
                                             <div className='div-btn-style'>
-                                                <button className='button-style' style={{marginTop: '50px'}}
+                                                <button className='button-style' style={{marginTop: '50rem'}}
                                                         onClick={seizeHandle}>Buy More
                                                 </button>
                                                 <Shiled gId={message.ID}/>
@@ -479,7 +484,7 @@ const ChessBoard = ({gId}) => {
                 centered
                 width={849} // 设置宽度
                 className='model-style'
-                style={{height: '534px', backgroundColor: '#000000'}} // 设置高度
+                style={{height: '534rem', backgroundColor: '#000000'}} // 设置高度
                 destroyOnClose={true}
             >
                 <div className='div-style-top'>
@@ -561,7 +566,7 @@ const ChessBoard = ({gId}) => {
                         </svg>
                         <div className='chess-button-left-button'>
                             <p className='chess-button-left-button-p'>{totalAmount}</p>
-                            <p style={{fontWeight: '860', fontSize: '20px',marginTop:"40px",color:'#F5E01B'}}>SOL</p>
+                            <p style={{fontWeight: '860', fontSize: '20rem',marginTop:"40rem",color:'#F5E01B'}}>SOL</p>
                         </div>
                     </div>
                     <div className='div-style-bottom-right'>
diff --git a/checkerboard/src/components/header/header.css b/checkerboard/src/components/header/header.css
index ccf9b64..27a92f2 100644
--- a/checkerboard/src/components/header/header.css
+++ b/checkerboard/src/components/header/header.css
@@ -1,9 +1,9 @@
 .header-box {
     display: flex;
     justify-content: space-between;
-    padding: 10px;
+    padding: 10rem;
     width: 100%;
-    height: 88px;
+    height: 88rem;
     box-sizing: border-box;
     align-content: center;
     flex-wrap: wrap;
@@ -17,12 +17,12 @@
 }
 
 .logo{
-    margin-left: 100px;
+    margin-left: 100rem;
 }
 
 
 .left-box-img {
-    margin-left: 20px;
+    margin-left: 20rem;
 }
 
 
@@ -33,28 +33,28 @@
 
 
 .left-box a {
-    margin-right: 10px;
+    margin-right: 10rem;
 }
 
 .right-box {
     display: flex;
     align-items: center;
-    height: 88px;
+    height: 88rem;
 }
 
 .dig-for{
     background-color: #F5E01B;
-    height: 40px;
-    width: 240px;
-    border-radius: 12px;
+    height: 40rem;
+        width: 240rem;
+        border-radius: 12rem;
     font-weight: bolder;
-    border: 1px solid #F5E01B;
+    border: 1rem solid #F5E01B;
     cursor: pointer;
-    margin-right: 10px;
+    margin-right: 10rem;
     font-family: DIN;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 800;
-    line-height: 19.54px;
+    line-height: 19.54rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -62,9 +62,9 @@
 }
 
 .token-div {
-    border: 1px solid #010101;
-    border-radius: 10px;
-    padding: 10px;
-    margin-right: 20px;
+    border: 1rem solid #010101;
+        border-radius: 10rem;
+        padding: 10rem;
+        margin-right: 20rem;
 
 }
diff --git a/checkerboard/src/components/rule/Rule.css b/checkerboard/src/components/rule/Rule.css
index a29413b..c68a1ce 100644
--- a/checkerboard/src/components/rule/Rule.css
+++ b/checkerboard/src/components/rule/Rule.css
@@ -9,8 +9,8 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    width: 1020px;
-    height: 720px;
+    width: 1020rem;
+        height: 720rem;
     clip-path: polygon(10% 0, 90% 10%, 100% 90%, 0 100%);
     background: #262626;
     z-index: 1;
@@ -24,15 +24,15 @@
     flex-direction: column;
     align-items: center;
     justify-content: space-evenly;
-    width: 1000px;
-    height: 700px;
+    width: 1000rem;
+        height: 700rem;
     clip-path: polygon(10% 0, 90% 10%, 100% 90%, 0 100%);
     background: #000000;
     z-index: 2;
 }
 
 .content {
-    width: 600px;
+    width: 600rem;
     line-height: 1.6;
     word-wrap: break-word;  /* 强制单词换行 */
     word-break: break-word; /* 打破长单词以换行 */
diff --git a/checkerboard/src/components/rulepopup/RulePupup.css b/checkerboard/src/components/rulepopup/RulePupup.css
index 74fad4b..a1278f1 100644
--- a/checkerboard/src/components/rulepopup/RulePupup.css
+++ b/checkerboard/src/components/rulepopup/RulePupup.css
@@ -6,9 +6,9 @@
     align-items: flex-start;
     justify-content: center;
     position: absolute;
-    right: 10px;
-    width: 380px;
-    height: 230px;
+    right: 10rem;
+        width: 380rem;
+        height: 230rem;
     background-color: #000000;
     clip-path: polygon(6% 3%, 94% 16%, 98% 84%, 1% 95%);
     z-index: 10;
@@ -19,8 +19,8 @@
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
-    width: 360px;
-    height:205px;
+    width: 360rem;
+    height: 205rem;
     background-color: #3c342f;
     clip-path: polygon(5% 0, 95% 14%, 99% 85%, 0 96%);
 }
@@ -30,4 +30,5 @@
     text-align: center;
     font-weight: 900;
     font-family: Arial, Helvetica, sans-serif;
+    font-size: 24rem;
 }
\ No newline at end of file
diff --git a/checkerboard/src/components/scrollbar/Scrollbar.css b/checkerboard/src/components/scrollbar/Scrollbar.css
index d4007ec..fac7481 100644
--- a/checkerboard/src/components/scrollbar/Scrollbar.css
+++ b/checkerboard/src/components/scrollbar/Scrollbar.css
@@ -1,8 +1,8 @@
 
 .custom-scroll-container {
     display: flex;
-    width: 700px;
-    height: 400px;
+    width: 700rem;
+    height: 400rem;
     background-color: #000000;
     overflow: hidden;
     position: relative;
@@ -13,7 +13,8 @@
     flex: 1;
     height: 100%;
     overflow-y: scroll;
-    padding-right: 15px;
+    padding-right: 15rem;
+    font-size: 16rem;
     box-sizing: border-box;
     scrollbar-width: none;
 }
@@ -26,16 +27,16 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: 5px;
+    width: 5rem;
     height: 80%;
     background-color: #292929;
 }
 
 .scrollbar-thumb {
     position: absolute;
-    width: 30px;
+    width: 30rem;
     background-color: #ffffff;
-    border-radius: 5px;
+    border-radius: 5rem;
     cursor: pointer;
     transition: background-color 0.3s;
 }
diff --git a/checkerboard/src/components/scrollbar/Scrollbar.jsx b/checkerboard/src/components/scrollbar/Scrollbar.jsx
index 017d160..a597a06 100644
--- a/checkerboard/src/components/scrollbar/Scrollbar.jsx
+++ b/checkerboard/src/components/scrollbar/Scrollbar.jsx
@@ -113,8 +113,8 @@ const CustomScroll = () => {
                     className="scrollbar-thumb"
                     ref={thumbRef}
                     style={{
-                        height: `${thumbHeight}px`,
-                        top: `${scrollPosition}px`,
+                        height: `${thumbHeight}rem`,
+                        top: `${scrollPosition}rem`,
                     }}
                     onMouseDown={handleThumbMouseDown} // 添加鼠标事件
                 ></div>
diff --git a/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx b/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx
index cce6e90..45f1b9f 100644
--- a/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx
+++ b/checkerboard/src/components/scrollbar/ScrollbarRecord.jsx
@@ -141,8 +141,8 @@ const RecordScrollbar = () => {
                     className="scrollbar-thumb"
                     ref={thumbRef}
                     style={{
-                        height: `${thumbHeight}px`,
-                        top: `${scrollPosition}px`,
+                        height: `${thumbHeight}rem`,
+                        top: `${scrollPosition}rem`,
                     }}
                     onMouseDown={handleThumbMouseDown}
                 ></div>
diff --git a/checkerboard/src/components/shiled/Shiled.css b/checkerboard/src/components/shiled/Shiled.css
index 68e4af0..7fab309 100644
--- a/checkerboard/src/components/shiled/Shiled.css
+++ b/checkerboard/src/components/shiled/Shiled.css
@@ -1,8 +1,8 @@
 .model-style{
     display: flex;
     flex-direction: column;
-    width: 849px;
-    border: 10px solid #292929 !important;
+    width: 849rem;
+        border: 10rem solid #292929 !important;
 }
 .div-style-top{
     display: flex;
@@ -13,17 +13,17 @@
     height: 100%;
     transform: scale(1.3,0.8);
     font-weight: bolder;
-    font-size: 50px;
+    font-size: 50rem;
 
 }
 
 .shild-wenzi-style{
     position: absolute;
-    top: 145px;
-    left: 85px;
-    font-size: 26px;
+    top: 145rem;
+        left: 85rem;
+        font-size: 26rem;
     font-weight: bolder;
-    letter-spacing: 1px;
+    letter-spacing: 1rem;
 }
 
 .div-style-bottom{
@@ -37,41 +37,41 @@
 }
 
 .div-style-bottom-left {
-    width: 349px;
-    height: 240px;
+    width: 349rem;
+        height: 240rem;
     background-color: #3C342F;
-    border-radius: 8px;
+    border-radius: 8rem;
 }
 
 .button-left-style{
-    font-size: 26px;
+    font-size: 26rem;
     font-weight: 700;
-    letter-spacing: 1px;
-    margin-left: 20px;
-    margin-top: 10px;
+    letter-spacing: 1rem;
+        margin-left: 20rem;
+        margin-top: 10rem;
 }
 
 .button-left-image{
-    height: 132px;
-    width: 349px;
+    height: 132rem;
+        width: 349rem;
 }
 .button-left-button{
     display: flex;
     justify-content: space-around;
-    width: 349px;
+    width: 349rem;
     flex-direction: row;
     align-content: center;
     align-items: center;
 }
 
 .button-left-button-p{
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 400;
-    letter-spacing: 1px;
+    letter-spacing: 1rem;
     color: #65574A;
 }
 .div-style-bottom-right{
-    width: 250px;
+    width: 250rem;
 }
 .buttom-right-top{
     display: flex;
@@ -79,23 +79,23 @@
     align-items: center;
 }
 .buttom-right-top p{
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 400;
 }
 
 .shild-up-btn{
-    margin-top: 10px;
-    height: 50px;
-    width: 170px;
+    margin-top: 10rem;
+        height: 50rem;
+        width: 170rem;
     cursor: pointer;
-    border: 10px solid #262626;
-    border-radius: 15px;
+    border: 10rem solid #262626;
+        border-radius: 15rem;
     background-color: #F5E01B;
     color:  #3C342F;
     font-family: SF Pro;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 700;
-    line-height: 19.09px;
+    line-height: 19.09rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -113,23 +113,24 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-top: 150px;
+    margin-top: 150rem;
 }
 
 .buttom-right-input{
-    height: 40px;
-    width: 208px;
-    font-size: 16px;
+    height: 40rem;
+        width: 208rem;
+        font-size: 16rem;
     font-weight: 400;
-    border-radius: 12px;
-    border: 7px solid #292929;
+    border-radius: 12rem;
+        border: 7rem solid #292929;
     background-color: #191919;
     color: white;
 }
 .buttom-right-input:hover {
     background-color:#191919 !important;
     border-color: #292929; /* 鼠标悬停时的边框颜色 */
-    box-shadow: 0 0 5px #292929; /* 添加悬浮阴影 */
+    box-shadow: 0 0 5rem #292929;
+        /* 添加悬浮阴影 */
 }
 
 
@@ -137,38 +138,38 @@
 .buttom-right-input:focus {
     background-color:#191919 !important;
     border-color: #292929;
-    box-shadow: 0 0 5px #292929;
+    box-shadow: 0 0 5rem #292929;
 }
 
 /* 输入框在选中后且鼠标悬停时样式 */
 .buttom-right-input-input:focus:hover {
     background-color:#191919 !important;
     border-color: #673ab7;
-    box-shadow: 0 0 5px rgba(103, 58, 183, 0.8);
+    box-shadow: 0 0 5rem rgba(103, 58, 183, 0.8);
 }
 
 .buttom-update-shiled {
-    width: 250px;
-    height: 40px;
+    width: 250rem;
+        height: 40rem;
     background-color: #f5df1b;
     cursor: pointer;
-    border: 1px solid #f5df1b;
-    border-radius: 10px;
-    margin-right: 10px;
+    border: 1rem solid #f5df1b;
+        border-radius: 10rem;
+        margin-right: 10rem;
     font-weight: 600;
-    font-size: 16px;
+    font-size: 16rem;
 }
 
 .buttom-confirm-shiled{
-    width: 250px;
-    height: 40px;
+    width: 250rem;
+        height: 40rem;
     background-color: #f9f9f9;
     cursor: pointer;
-    border: 1px solid #f9f9f9;
-    border-radius: 10px;
-    margin-left: 10px;
+    border: 1rem solid #f9f9f9;
+        border-radius: 10rem;
+        margin-left: 10rem;
     font-weight: 600;
-    font-size: 16px;
+    font-size: 16rem;
 }
 
 
diff --git a/checkerboard/src/components/shiled/Shiled.jsx b/checkerboard/src/components/shiled/Shiled.jsx
index 99b3f2f..3cf7266 100644
--- a/checkerboard/src/components/shiled/Shiled.jsx
+++ b/checkerboard/src/components/shiled/Shiled.jsx
@@ -45,7 +45,7 @@ const Shiled = ({gId}) => {
                 centered
                 width={849} // 设置宽度
                 className='model-style'
-                style={{height: '534px', backgroundColor: '#000000'}} // 设置高度
+                style={{height: '534rem', backgroundColor: '#000000'}} // 设置高度
                 destroyOnClose={true}
             >
                 <div className='div-style-top'>
@@ -82,7 +82,7 @@ const Shiled = ({gId}) => {
                         </svg>
                         <div className='button-left-button'>
                             <p className='button-left-button-p'>Dinmond:</p>
-                            <p style={{fontWeight: '400', color: '#986D5A', fontSize: '16px'}}>4h</p>
+                            <p style={{fontWeight: '400', color: '#986D5A', fontSize: '16rem'}}>4h</p>
                         </div>
                     </div>
                     <div className='div-style-bottom-right'>
@@ -90,7 +90,7 @@ const Shiled = ({gId}) => {
                             <p>Shield Available:</p>
                             <p className="buttom-right-top-p">20</p>
                         </div>
-                        <p style={{color: "#65574A", fontSize: "12px", fontWeight: "400"}}>How many shields do you want
+                        <p style={{color: "#65574A", fontSize: "12rem", fontWeight: "400"}}>How many shields do you want
                             to use?</p>
                         <Input className="buttom-right-input"  placeholder="请输入内容" value={value} onChange={handleChange}></Input>
                     </div>
diff --git a/checkerboard/src/components/shiledcountdown/ShiledCountDown.css b/checkerboard/src/components/shiledcountdown/ShiledCountDown.css
index e4b06c4..33efb88 100644
--- a/checkerboard/src/components/shiledcountdown/ShiledCountDown.css
+++ b/checkerboard/src/components/shiledcountdown/ShiledCountDown.css
@@ -3,21 +3,21 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    width: 250px;
-    height: 160px;
+    width: 250rem;
+        height: 160rem;
     background-color: #000000;
     clip-path: polygon(7% 0, 95% 6%, 100% 90%, 0 100%);
     position: absolute;
-    top:740px;
-    right: 50px;
+    top: 740rem;
+        right: 50rem;
 }
 
 .shiled-div-have-internal{
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 230px;
-    height: 140px;
+    width: 230rem;
+        height: 140rem;
     background-color: #6076C1;
     clip-path: polygon(7% 0, 95% 6%, 100% 90%, 0 100%);
     position: relative;
@@ -25,15 +25,15 @@
 
 .font-div-style{
     position: absolute;
-    left: 38px;
-    top: 34px;
+    left: 38rem;
+        top: 34rem;
 }
 
 .time-style-div{
     font-family: SF Pro;
-    font-size: 32px;
+    font-size: 32rem;
     font-weight: 700;
-    line-height: 38.19px;
+    line-height: 38.19rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -41,11 +41,11 @@
 }
 
 .shiled-duration-div{
-    margin-top: 20px;
+    margin-top: 20rem;
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 700;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
diff --git a/checkerboard/src/components/shiledcountdown/ShiledCountDown.jsx b/checkerboard/src/components/shiledcountdown/ShiledCountDown.jsx
index 3f2d806..ce96ec6 100644
--- a/checkerboard/src/components/shiledcountdown/ShiledCountDown.jsx
+++ b/checkerboard/src/components/shiledcountdown/ShiledCountDown.jsx
@@ -36,7 +36,7 @@ const ShiledCountDown = ({durationTime}) => {
                     <div className='shiled-duration-div'>Shield Duration</div>
                 </div>
 
-                <svg style={{marginLeft: '115px'}} width="84" height="84" viewBox="0 0 84 84" fill="none"
+                <svg style={{marginLeft: '115rem'}} width="84" height="84" viewBox="0 0 84 84" fill="none"
                      xmlns="http://www.w3.org/2000/svg">
                     <g opacity="0.41">
                         <circle cx="42" cy="42" r="42" fill="url(#paint0_radial_450_1875)"/>
diff --git a/checkerboard/src/components/story/Story.css b/checkerboard/src/components/story/Story.css
index 4a4de82..a9cad9d 100644
--- a/checkerboard/src/components/story/Story.css
+++ b/checkerboard/src/components/story/Story.css
@@ -2,32 +2,32 @@
 
 .first-svg-first-style{
     position: absolute;
-    top: 130px;
-    left: 150px;
+    top: 130rem;
+        left: 150rem;
 }
 
 .first-svg-second-style{
     position: absolute;
-    top: 400px;
-    left: -950px;
+    top: 400rem;
+        left: -950rem;
 }
 
 .first-svg-three-style{
     position: absolute;
-    top: 400px;
-    right: -200px;
+    top: 400rem;
+        right: -200rem;
 }
 
 .first-svg-four-style{
     position: absolute;
-    top: 700px;
-    left: 250px;
+    top: 700rem;
+        left: 250rem;
 }
 
 .first-svg-cycle-style{
     position: absolute;
-    top: 0px;
-    left: 450px;
+    top: 0rem;
+        left: 450rem;
 }
 
 .svg-container {
@@ -51,24 +51,24 @@
 }
 
 .first-svg-dog{
-    width: 440px;
-    height: 440px;
+    width: 440rem;
+        height: 440rem;
     position: absolute;
-    top: 200px;
-    left: 450px;
+    top: 200rem;
+        left: 450rem;
     z-index: 5;
     background-image: url("./images/picture/dog.svg");
 }
 
 .first-svg-div{
     position: absolute;
-    top: 600px;
-    left: 430px;
-    width: 900px;
-    height: 100px;
+    top: 600rem;
+        left: 430rem;
+        width: 900rem;
+        height: 100rem;
     background-color: #000000;
     overflow: hidden;
-    border-radius: 137px;
+    border-radius: 137rem;
     animation: marquee 5s linear infinite; /* 动画持续时间可调整 */
 }
 @keyframes first-svg-div {
@@ -85,18 +85,18 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    top: 800px;
-    left: 800px;
-    width: 240px;
-    height: 50px;
+    top: 800rem;
+        left: 800rem;
+        width: 240rem;
+        height: 50rem;
     background-color: #F5E01B;
-    border: 10px solid #000000;
-    border-radius: 20px;
+    border: 10rem solid #000000;
+        border-radius: 20rem;
     cursor: pointer;
     font-family: DIN;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 600;
-    line-height: 19.54px;
+    line-height: 19.54rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -124,10 +124,10 @@
 
 .second-dog-div{
     position: absolute;
-    width: 600px;
-    height: 500px;
-    top: 410px;
-    left: 180px;
+    width: 600rem;
+        height: 500rem;
+        top: 410rem;
+        left: 180rem;
     display: flex; /* 使内部内容对齐 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
@@ -145,10 +145,10 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    top: 171px;
-    left: 810px;
-    width: 450px;
-    height: 740px;
+    top: 171rem;
+        left: 810rem;
+        width: 450rem;
+        height: 740rem;
     background-color: #000000;
     clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
 }
@@ -156,8 +156,8 @@
 .second-font-div-internal{
     display: flex;
     flex-direction: column;
-    width: 430px;
-    height: 720px;
+    width: 430rem;
+        height: 720rem;
     background-color: #000000;
     clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
     background-image: url("./images/bg-image/paicture.png");
@@ -172,27 +172,27 @@
 
 .middle-style-font{
     font-family: Seymour One;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 800;
-    line-height: 20px;
+    line-height: 20rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
     color: #F6F5F4;
-    width: 250px;
+    width: 250rem;
 
 }
 
 .fitdog-div{
     position: absolute;
-    top: 340px;
-    left: 1200px;
+    top: 340rem;
+        left: 1200rem;
     display: flex; /* 使内部内容对齐 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
     overflow: hidden; /* 防止图片溢出 */
-    width: 410px;
-    height: 410px;
+    width: 410rem;
+        height: 410rem;
 
 }
 
@@ -205,12 +205,12 @@
 
 .buttom-div-style{
     position: absolute;
-    top:680px;
-    left: 1250px;
-    height: 220px;
-    width: 320px;
-    border: 8px solid #000000;
-    border-radius: 10px;
+    top: 680rem;
+        left: 1250rem;
+        height: 220rem;
+        width: 320rem;
+        border: 8rem solid #000000;
+        border-radius: 10rem;
     background-color: #262626;
     background-image: url("./images/bg-image/box-bg.png");
     background-repeat: no-repeat; /* 不重复 */
@@ -233,16 +233,16 @@
 
 .three-div-top{
     display: flex;
-    width: 770px;
-    height: 310px;
+    width: 770rem;
+        height: 310rem;
     background-color: #000000;
-    border-radius: 10px;
-    margin-top: 50px;
+    border-radius: 10rem;
+        margin-top: 50rem;
 }
 
 .three-image-top-inner{
-    width: 300px;
-    height: 310px;
+    width: 300rem;
+        height: 310rem;
     display: flex; /* 使内部内容对齐 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
@@ -256,14 +256,14 @@
 }
 
 .three-div-top-right{
-    width: 400px;
-    height: 150px;
-    margin-top: 10px;
+    width: 400rem;
+        height: 150rem;
+        margin-top: 10rem;
     font-family: Seymour One;
     font-style: italic;
-    font-size: 47px;
+    font-size: 47rem;
     font-weight: 600;
-    line-height: 56px;
+    line-height: 56rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -274,10 +274,10 @@
     align-items: center;
     justify-content: center;
     position: absolute;
-    width: 420px;
-    height: 310px;
-    top: 300px;
-    left: 900px;
+    width: 420rem;
+        height: 310rem;
+        top: 300rem;
+        left: 900rem;
     background-image: url("./images/picture/liaotianyangshi.png");
     background-repeat: no-repeat; /* 不重复 */
     background-size:
@@ -290,11 +290,11 @@
 }
 
 .three-div-middle-font{
-    width:250px;
+    width: 250rem;
     font-family: Seymour One;
-    font-size: 32px;
+    font-size: 32rem;
     font-weight: 600;
-    line-height: 40.22px;
+    line-height: 40.22rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -303,10 +303,10 @@
 
 .three-div-middle-fit-dog{
     position: absolute;
-    top: 310px;
-    left: 1250px;
-    width: 250px;
-    height: 250px;
+    top: 310rem;
+        left: 1250rem;
+        width: 250rem;
+        height: 250rem;
     display: flex; /* 使内部内容对齐 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
@@ -323,24 +323,24 @@
 
 .three-div-bottom{
     position:relative ;
-    width: 770px;
-    height: 440px;
+    width: 770rem;
+        height: 440rem;
     background-color: #000000;
-    border-radius: 10px;
-    margin-top: 20px;
+    border-radius: 10rem;
+        margin-top: 20rem;
     z-index: 1;
 }
 
 .three-image-bottom-dog{
     position: absolute;
-    top: -40px;
-    left: 30px;
+    top: -40rem;
+        left: 30rem;
     display: flex; /* 使内部内容对齐 */
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
     overflow: hidden; /* 防止图片溢出 */
-    width: 310px;
-    height: 383px;
+    width: 310rem;
+        height: 383rem;
     z-index: 5;
 }
 .three-image-bottom-dog img {
@@ -351,56 +351,56 @@
 
 .three-buttom-div-text-one{
     position: absolute;
-    top: 230px;
-    left: 390px;
-    width:350px;
-    height: 100px;
+    top: 230rem;
+        left: 390rem;
+        width: 350rem;
+        height: 100rem;
     background-color: #3C342F;
-    border-radius: 10px;
+    border-radius: 10rem;
 }
 
 .three-buttom-div-text-title{
     font-family: Seymour One;
-    font-size: 24px;
+    font-size: 24rem;
     font-weight: 600;
-    line-height: 30.16px;
+    line-height: 30.16rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
     color: #F6F5F4;
-    margin-left: 5px;
+    margin-left: 5rem;
 
 }
 .three-buttom-div-text-content{
     font-family: SF Pro;
-    font-size: 13px;
+    font-size: 13rem;
     font-weight: 400;
-    line-height: 19.09px;
+    line-height: 19.09rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
     color: #F6F5F4;
-    margin-left: 5px;
-    margin-top: 10px;
+    margin-left: 5rem;
+        margin-top: 10rem;
 }
 
 .three-buttom-div-text-two{
     position: absolute;
-    top: 340px;
-    left: 20px;
-    width:350px;
-    height: 100px;
+    top: 340rem;
+        left: 20rem;
+        width: 350rem;
+        height: 100rem;
     background-color: #3C342F;
-    border-radius: 10px;
+    border-radius: 10rem;
 }
 .three-buttom-div-text-three{
     position: absolute;
-    top: 340px;
-    left: 390px;
-    width:350px;
-    height: 100px;
+    top: 340rem;
+        left: 390rem;
+        width: 350rem;
+        height: 100rem;
     background-color: #3C342F;
-    border-radius: 10px;
+    border-radius: 10rem;
 }
 
 /*第四页样式*/
@@ -427,9 +427,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin-top: 20px;
-    width: 1220px;
-    height: 770px;
+    margin-top: 20rem;
+        width: 1220rem;
+        height: 770rem;
     background-color: #000000;
     clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
 }
@@ -437,8 +437,8 @@
 .four-div-main-internal{
     position: relative;
     display: flex;
-    width: 1200px;
-    height: 750px;
+    width: 1200rem;
+        height: 750rem;
     background-color: #292929;
     background-image: url("./images/picture/four-bg-one.png") ;
     background-position: center; /* 居中显示图片 */
@@ -453,56 +453,57 @@
 
 .four-div-left {
     position: absolute;
-    top: 20px;
-    left: 250px;
+    top: 20rem;
+        left: 250rem;
 }
 
 .four-div-left-title{
     font-family: Seymour One;
-    font-size: 47px;
+    font-size: 47rem;
     font-weight: 800;
-    line-height: 59.07px;
+    line-height: 59.07rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
-    margin-top: 20px;
-    letter-spacing: 3px; /* 增加字间距 */
+    margin-top: 20rem;
+        letter-spacing: 3rem;
+        /* 增加字间距 */
 }
 
 .four-div-left-contant{
     font-family: Seymour One;
-    font-size: 14px;
+    font-size: 14rem;
     font-weight: 600;
-    line-height: 17.6px;
+    line-height: 17.6rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
-    margin-top: 50px;
-    width: 200px;
-    height: 540px;
+    margin-top: 50rem;
+        width: 200rem;
+        height: 540rem;
     color: #F6F5F4;
 
 }
 
 .four-div-right{
     position: absolute;
-    top: 60px;
-    left: 600px;
-    width: 460px;
-    height: 460px;
+    top: 60rem;
+        left: 600rem;
+        width: 460rem;
+        height: 460rem;
 }
 
 .four-div-right-buttom-div{
     position: absolute;
-    top: 330px;
-    left: 180px;
+    top: 330rem;
+        left: 180rem;
 }
 
 .four-div-right-buttom-div-one{
     font-family: SF Pro;
-    font-size: 50px;
+    font-size: 50rem;
     font-weight: 700;
-    line-height: 59.67px;
+    line-height: 59.67rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -511,9 +512,9 @@
 
 .four-div-right-buttom-div-two{
     font-family: SF Pro;
-    font-size: 24px;
+    font-size: 24rem;
     font-weight: 700;
-    line-height: 28.64px;
+    line-height: 28.64rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -522,15 +523,15 @@
 
 .four-div-right-top-div{
     position: absolute;
-    top: -40px;
-    left: 430px;
+    top: -40rem;
+        left: 430rem;
 }
 
 .four-div-right-top-div-one{
     font-family: SF Pro;
-    font-size: 40px;
+    font-size: 40rem;
     font-weight: 700;
-    line-height: 47.73px;
+    line-height: 47.73rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -538,9 +539,9 @@
 
 .four-div-right-top-div-two{
     font-family: SF Pro;
-    font-size: 24px;
+    font-size: 24rem;
     font-weight: 700;
-    line-height: 28.64px;
+    line-height: 28.64rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -567,16 +568,16 @@
 
 .five-step-one{
     position: absolute;
-    top: 120px;
-    left: 180px;
+    top: 120rem;
+        left: 180rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
     align-content: space-around;
     flex-wrap: wrap;
-    width: 450px;
-    height: 330px;
+    width: 450rem;
+        height: 330rem;
     background-image: url(./images/picture/five-step-one.png) !important;
     background-position: center;
     background-repeat: no-repeat;
@@ -591,16 +592,16 @@
 }
 .five-step-two{
     position: absolute;
-    top: 550px;
-    left: 180px;
+    top: 550rem;
+        left: 180rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
     align-content: space-around;
     flex-wrap: wrap;
-    width: 450px;
-    height: 330px;
+    width: 450rem;
+        height: 330rem;
     background-image: url("./images/picture/five-step-two.png") !important;
     background-position: center; /* 居中显示图片 */
     background-repeat: no-repeat; /* 不重复 */
@@ -618,16 +619,16 @@
 
 .five-step-three{
     position: absolute;
-    top: 120px;
-    left: 1180px;
+    top: 120rem;
+        left: 1180rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
     align-content: space-around;
     flex-wrap: wrap;
-    width: 450px;
-    height: 330px;
+    width: 450rem;
+        height: 330rem;
     background-image: url("./images/picture/five-step-three.png") !important;
     background-position: center; /* 居中显示图片 */
     background-repeat: no-repeat; /* 不重复 */
@@ -645,16 +646,16 @@
 
 .five-step-four{
     position: absolute;
-    top: 550px;
-    left: 1180px;
+    top: 550rem;
+        left: 1180rem;
     display: flex;
     justify-content: center;
     align-items: flex-start;
     flex-direction: column;
     align-content: space-around;
     flex-wrap: wrap;
-    width: 450px;
-    height: 330px;
+    width: 450rem;
+        height: 330rem;
     background-image: url("./images/picture/five-step-one.png") !important;
     background-position: center; /* 居中显示图片 */
     background-repeat: no-repeat; /* 不重复 */
@@ -672,14 +673,14 @@
 
 .five-dog{
     position: absolute;
-    top:250px;
-    left: 700px;
+    top: 250rem;
+        left: 700rem;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
-    width: 420px;
-    height: 440px;
+    width: 420rem;
+        height: 440rem;
     cursor: pointer;
 }
 
@@ -694,17 +695,17 @@
 }
 
 .five-div-color{
-    width: 21px;
-    height: 21px;
+    width: 21rem;
+        height: 21rem;
     background-color: #F5E01B;
 }
 .five-div-title{
     font-style: italic;
-    margin-left: 30px;
+    margin-left: 30rem;
     font-family: Seymour One;
-    font-size: 40px;
+    font-size: 40rem;
     font-weight: 800;
-    line-height: 50.27px;
+    line-height: 50.27rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -712,13 +713,13 @@
 }
 
 .five-div-content{
-    margin-left: 50px;
-    margin-top: 10px;
-    width: 250px;
+    margin-left: 50rem;
+        margin-top: 10rem;
+        width: 250rem;
     font-family: SF Pro;
-    font-size: 22px;
+    font-size: 22rem;
     font-weight: 700;
-    line-height: 28.64px;
+    line-height: 28.64rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
diff --git a/checkerboard/src/components/story/StorySecond.jsx b/checkerboard/src/components/story/StorySecond.jsx
index 36b6373..503ab2f 100644
--- a/checkerboard/src/components/story/StorySecond.jsx
+++ b/checkerboard/src/components/story/StorySecond.jsx
@@ -12,8 +12,8 @@ const StorySecond = () => {
                 </div>
                 <div className='second-font-div-external'>
                     <div className='second-font-div-internal'>
-                        <h1 style={{marginLeft: '90px'}}>Chico's Story</h1>
-                        <div style={{marginLeft: '70px'}} className='middle-style-font'>
+                        <h1 style={{marginLeft: '90rem'}}>Chico's Story</h1>
+                        <div style={{marginLeft: '70rem'}} className='middle-style-font'>
                             Chico is a skinny but unyielding Chihuahua, born in an ordinary town in southern Mexico.As a
                             street stray, he not only protects herself with anger and barking, but even though she is
                             small and weak, he always stands up when other frail strays are being bullied. he is willing
@@ -25,7 +25,7 @@ const StorySecond = () => {
                             courageous. We fight bravely, openly expressing our dissatisfaction and the places where we
                             feel oppressed. Small but powerful, angry but daring to fight back.
                         </div>
-                        <svg style={{marginLeft:'140px',marginTop:'20px'}} width="98" height="67" viewBox="0 0 98 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg style={{marginLeft:'140rem',marginTop:'20rem'}} width="98" height="67" viewBox="0 0 98 67" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clipPath="url(#clip0_400_3069)">
                                 <path
                                     d="M55.7093 15.1467C55.5828 14.4303 55.4106 13.723 55.194 13.0288C54.9602 12.2559 54.5015 11.5709 53.8769 11.0624C53.2523 10.5538 52.4905 10.2449 51.6896 10.1753C50.2425 10.0129 48.7776 10.1697 47.3971 10.6348C46.0165 11.0999 44.7536 11.8621 43.6964 12.8682C43.4439 13.0961 41.4752 14.3077 40.125 15.2243C38.8521 13.4688 37.1102 13.2099 34.219 13.9712C34.0953 14.0074 33.9253 13.8623 33.5903 13.7277C33.8016 13.3548 33.9098 12.8163 34.2036 12.692C37.2029 11.3663 37.4761 10.9728 36.9143 7.97453C36.7055 6.86636 36.3967 5.77959 35.9919 4.72766C34.889 1.87954 33.0182 1.06145 30.1838 2.11267C29.8588 2.24039 29.5479 2.40163 29.2562 2.5941C27.8235 1.55842 26.834 0.357129 25.6487 0.108566C22.3246 -0.580162 18.2945 2.21616 17.4287 5.52515C16.9855 7.24438 17.0835 8.91691 18.5007 10.2115C19.3768 11.0193 20.3405 11.734 21.4227 12.6247C21.129 13.6086 20.7992 14.6962 20.392 16.0167C19.6396 15.385 19.1552 14.981 18.6553 14.5616C17.2278 13.3964 15.625 13.3393 14.249 14.3957C13.0964 15.3284 12.1055 16.4466 11.3166 17.7048C10.6621 18.6938 10.3787 19.9263 9.93549 21.0396C8.60587 21.283 7.32778 21.5315 6.0497 21.7438C3.2874 22.2047 1.57642 23.9136 0.478709 26.4044C-0.000940276 27.4334 -0.13616 28.5909 0.0932937 29.7036C0.322748 30.8163 0.904544 31.8245 1.75164 32.5772C3.25648 33.991 5.2509 34.2084 7.52877 33.0951C8.55948 33.0329 8.8017 32.3337 10.1571 32.4528L11.8268 35.7462C10.1777 37.1858 8.58009 38.4236 9.37889 40.8212C9.47166 41.0853 9.23974 41.5201 9.05422 41.8101C7.26078 44.5547 6.86396 47.3148 8.86354 50.1474C8.93097 50.2633 8.96321 50.3966 8.9563 50.5307V50.7532C8.95373 50.8033 8.95373 50.8534 8.9563 50.9034L8.90477 50.9295C8.90477 51.002 8.8687 51.0639 8.85324 51.1312L7.94621 52.4984C6.93611 54.0243 5.9243 55.5536 4.91077 57.0864C3.47293 59.6394 1.9887 62.1666 0.623008 64.761C0.174649 65.605 0.71061 66.1021 1.61248 66.1539V66.2058L1.66402 66.2523C1.57126 67.8058 2.69474 68.5568 3.76668 69.2144C8.61617 72.2542 13.5584 75.2887 19.2531 76.2933C27.169 77.6914 35.157 78.6855 43.1244 79.7627C45.8094 80.1251 48.5253 80.2236 51.2257 80.4411C48.5562 81.1401 45.8918 81.5958 43.2378 82.0929C40.4806 82.6108 37.708 83.0768 34.9921 83.7345C32.6987 84.2885 30.2662 84.1851 28.0605 85.1846C26.3392 84.3198 23.2471 82.9216 22.0669 82.4348C19.4489 81.3577 16.2743 82.73 14.7747 85.4953C13.5224 87.7997 14.0222 89.2237 16.9958 91.4401C16.3367 92.0721 15.7139 92.741 15.1303 93.444C13.6512 95.448 13.5842 98.4931 14.9808 99.9741C18.1605 103.356 27.4421 101.274 30.1065 97.4107L41.8875 94.8215C42.3204 98.1823 44.7683 98.9228 47.4533 99.5235C50.1383 100.124 52.6482 100.383 54.2767 97.856L79.7404 106.659C79.5085 112.48 80.4928 114.292 84.2291 114.738C85.3835 114.872 86.7647 114.846 87.7387 114.323C89.929 113.143 90.1299 110.698 90.6298 108.503C92.6603 107.69 94.2837 106.473 95.2165 104.49C96.7626 101.175 94.8248 98.2082 91.207 98.2289C88.3623 98.2289 86.2081 99.4873 84.5074 101.766C80.5804 100.067 76.6637 98.6586 72.7522 96.4215C75.5608 94.9094 75.6227 92.6776 75.2259 90.3473C74.8084 87.9134 73.9426 85.6556 72.242 84.1332C72.9841 82.5434 73.9581 81.1765 74.2261 79.68C74.494 78.1834 75.2156 77.5775 76.3339 77.0078C78.5556 75.8324 80.5296 74.2356 82.1471 72.3058L83.1778 73.0879C82.6315 75.2887 83.2087 76.9095 84.8785 77.8053C85.1332 77.9358 85.3967 78.0482 85.667 78.1419C88.9807 79.2811 92.0007 78.437 94.5929 76.3191C95.734 75.3762 96.6069 74.1472 97.1233 72.7564C97.685 71.1459 96.5358 69.7942 95.3299 68.7378C97.7263 66.5525 98.051 65.5738 97.1491 63.5594C96.2472 61.545 94.5723 60.7891 91.9543 61.3535C90.5628 61.6539 89.2693 62.3892 87.9603 62.9382C86.3009 62.0268 84.6053 61.0428 82.848 60.1677C82.4624 60.0196 82.1223 59.7723 81.8618 59.4506C81.6013 59.1288 81.4296 58.7439 81.3638 58.3345C80.735 55.2274 79.9311 52.1204 79.3023 49.0134C78.9777 47.3666 79.0498 45.6318 78.6684 44.0006C78.5265 43.3007 78.2263 42.6432 77.7911 42.0784C77.3559 41.5136 76.7974 41.057 76.1586 40.7436C78.4984 39.6768 80.7453 37.9524 81.2504 36.8598C82.5542 34.0686 81.2504 31.816 77.0142 29.6669C75.7773 25.343 74.6487 24.1674 71.9585 24.4056C71.3864 24.4509 70.822 24.5674 70.2785 24.7525C71.3092 22.6811 71.2576 21.573 73.6746 20.9205C74.5799 20.6752 75.4547 20.3278 76.2823 19.8849C78.2561 18.8129 79.091 17.0315 78.3695 14.9239C77.8942 13.6058 77.1969 12.3797 76.3081 11.299C74.6384 9.22766 72.2883 8.7359 69.7167 9.15534C69.5621 8.45108 69.459 7.90194 69.3199 7.36339C68.5675 4.5308 67.2585 3.62987 64.4034 4.11146C63.059 4.30394 61.7691 4.77525 60.6157 5.49557C59.4624 6.21589 58.4707 7.16953 57.7038 8.29565C57.0338 9.29508 55.127 12.0345 54.7405 13.2359L55.7093 15.1467Z"
diff --git a/checkerboard/src/components/story/StoryThree.jsx b/checkerboard/src/components/story/StoryThree.jsx
index c9d810c..7a5e160 100644
--- a/checkerboard/src/components/story/StoryThree.jsx
+++ b/checkerboard/src/components/story/StoryThree.jsx
@@ -11,8 +11,8 @@ const StoryThree = () => {
                         <img src="/images/picture/three-one.png" alt="Example"/>
                     </div>
                     <div className="three-div-top-right">
-                        <div style={{marginLeft:'70px'}}>HOW TO GET</div>
-                        <div style={{color:'#F5E01B',marginLeft:'70px'}}>$CHICO?</div>
+                        <div style={{marginLeft:'70rem'}}>HOW TO GET</div>
+                        <div style={{color:'#F5E01B',marginLeft:'70rem'}}>$CHICO?</div>
                     </div>
                 </div>
                 <div className="three-div-middle">
diff --git a/checkerboard/src/components/table/RecordTable.jsx b/checkerboard/src/components/table/RecordTable.jsx
index f290a25..b187d40 100644
--- a/checkerboard/src/components/table/RecordTable.jsx
+++ b/checkerboard/src/components/table/RecordTable.jsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
-import { List, Skeleton } from 'antd';
+import {Avatar, List, Skeleton} from 'antd';
 import { Records } from '../../apis/manage';
 import InfiniteScroll from 'react-infinite-scroll-component';
+import {AntDesignOutlined} from "@ant-design/icons";
 
 const RecordTable = () => {
   const [loading, setLoading] = useState(false);
@@ -28,14 +29,25 @@ const RecordTable = () => {
     };
   }, []);
 
+    const images = [
+        '/images/avatar/1.png',
+        '/images/avatar/2.png',
+        '/images/avatar/3.png',
+        '/images/avatar/4.png',
+        '/images/avatar/5.png',
+        '/images/avatar/6.png',
+        '/images/avatar/7.png',
+        '/images/avatar/8.png',
+    ];
+
   return (
     <div
       id="scrollableDiv"
       style={{
-        height: 500,
+        height: 450,
         width: 300,
         overflow: 'hidden',  // 隐藏超出边框的内容
-        padding: '0 16px',
+        padding: '0 16rem',
         position: 'relative',
         background: '#191919',
         wordWrap: 'break-word',
@@ -74,10 +86,28 @@ const RecordTable = () => {
                         display: 'flex',
                         justifyContent: 'space-between',
                         alignItems: 'center',
+                        height: '100rem',
+                        backgroundColor: '#0f0f0f',
+                        borderRadius:'10rem',
+                        marginRight:'10rem'
 
                     }}>
-                        <div>头像</div>
-                        <div>{item.owner} Occupied {item.old_owner} Altar with {item.transaction_amount} USDT!</div>
+                        <div>
+                            <Avatar
+                                shape="square" size={50}
+                                style={{marginRight:'15rem',marginLeft:'10rem'}}
+                                icon={<AntDesignOutlined/>}
+                                src= {images[item.avatar_id]}
+                            />
+                        </div>
+                        <div>
+                            <span style={{color: '#d8c519'}}>{item.name}</span>&nbsp;
+                            Occupied &nbsp;
+                            <span style={{color: '#d8c519'}}>{item.old_name}</span>&nbsp;
+                            Altar with&nbsp;
+                            <span style={{color: '#d8c519'}}>{item.transaction_amount}</span>&nbsp;
+                            USDT!&nbsp;
+                        </div>
                     </div>
                 </List.Item>
               )}
diff --git a/checkerboard/src/components/table/UserRecordTable.css b/checkerboard/src/components/table/UserRecordTable.css
index 7fc8e4f..5943b90 100644
--- a/checkerboard/src/components/table/UserRecordTable.css
+++ b/checkerboard/src/components/table/UserRecordTable.css
@@ -1,26 +1,27 @@
 .record-li-div{
     display: flex;
-    margin-bottom: 10px;;
+    margin-bottom: 10rem;
+        ;
 }
 
 .no-owner-div-style{
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: 520px;
-    height: 40px;
+    width: 520rem;
+        height: 40rem;
 }
 
 .no-owner-span-style{
-    width: 350px;
-    height: 40px;
+    width: 350rem;
+        height: 40rem;
 }
 
 .no-owner-button-style{
-    width: 150px;
-    height: 30px;
-    border-radius: 5px;
-    border: 1px #F5E01B solid;
+    width: 150rem;
+        height: 30rem;
+        border-radius: 5rem;
+        border: 1rem #F5E01B solid;
     background-color: #F5E01B;
     font-weight: bolder;
     cursor: pointer;
@@ -31,17 +32,17 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    height: 40px;
-    width: 170px;
-    letter-spacing: 1px;
+    height: 40rem;
+        width: 170rem;
+        letter-spacing: 1rem;
     font-weight: bolder;
-    border-radius: 8px;
-    margin-right: 10px;
+    border-radius: 8rem;
+        margin-right: 10rem;
     background-color:#292929;
 }
 
 .span-style{
     display: flex;
-    height: 40px;
-    width: 520px;
+    height: 40rem;
+        width: 520rem;
 }
\ No newline at end of file
diff --git a/checkerboard/src/components/table/UserRecordTable.jsx b/checkerboard/src/components/table/UserRecordTable.jsx
index 31073a0..4b035f4 100644
--- a/checkerboard/src/components/table/UserRecordTable.jsx
+++ b/checkerboard/src/components/table/UserRecordTable.jsx
@@ -7,6 +7,7 @@ const UserRecordTable = () => {
       <div className='user-info-model-external'>
         <div className="user-info-model-internal">
           <div className="record-div-style">
+
             <RecordScrollbar />
           </div>
         </div>
diff --git a/checkerboard/src/components/translation/translation.css b/checkerboard/src/components/translation/translation.css
index b799123..c6f0787 100644
--- a/checkerboard/src/components/translation/translation.css
+++ b/checkerboard/src/components/translation/translation.css
@@ -2,8 +2,9 @@
 .custom-select .ant-select-selector {
     background-color: #3c342f !important; /* 背景色 */
     color: #ffffff !important; /* 字体颜色 */
-    border: 1px solid #3c342f !important; /* 边框颜色 */
-    border-radius: 12px;
+    border: 1rem solid #3c342f !important;
+        /* 边框颜色 */
+        border-radius: 12rem;
     transition: all 0.3s ease;
 }
 
@@ -39,8 +40,9 @@
 /* 下拉框样式 */
 .custom-select .ant-select-dropdown {
     color: #ffffff !important;
-    border: 1px solid #3c342f !important; /* 边框颜色 */
-    border-radius: 12px;
+    border: 1rem solid #3c342f !important;
+        /* 边框颜色 */
+        border-radius: 12rem;
 }
 
 /* 强制所有状态字体为白色 */
diff --git a/checkerboard/src/components/userinfo/UserInfo.css b/checkerboard/src/components/userinfo/UserInfo.css
index 59dcea3..e2ea6ad 100644
--- a/checkerboard/src/components/userinfo/UserInfo.css
+++ b/checkerboard/src/components/userinfo/UserInfo.css
@@ -5,9 +5,9 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    margin-top: 40px;
-    width: 420px;
-    height: 750px;
+    margin-top: 40rem;
+        width: 420rem;
+        height: 750rem;
     clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
     background: #000000;
     z-index: 1;
@@ -17,9 +17,9 @@
     display: flex;
     flex-wrap: nowrap;
     flex-direction: column;
-    margin-left: 3px;
-    width: 400px;
-    height: 730px;
+    margin-left: 3rem;
+        width: 400rem;
+        height: 730rem;
     clip-path: polygon(0 0, 99% 0, 89% 100%, 0 100%);
     background: #191919;
     z-index: 2;
@@ -31,10 +31,10 @@
     position: relative;
     display: flex;
     flex-wrap: nowrap;
-    height: 130px;
+    height: 130rem;
     flex-direction: row;
     align-items: center;
-    margin-top: 10px;
+    margin-top: 10rem;
 }
 
 .data-style{
@@ -46,15 +46,15 @@
 }
 
 .user-info-btn{
-    width: 140px;
-    height: 35px;
-    border: 4px solid #262626;
-    border-radius: 8px;
+    width: 140rem;
+        height: 35rem;
+        border: 4rem solid #262626;
+        border-radius: 8rem;
     background-color: #000000;
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 700;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -69,15 +69,15 @@
     justify-content: space-between;
     align-content: center;
     width: 100%;
-    margin-top: 15px;
+    margin-top: 15rem;
 
 }
 
 .data-style-middle-font{
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 400;
-    line-height: 23px;
+    line-height: 23rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -86,9 +86,9 @@
 
 .data-style-middle-amount{
     font-family: SF Pro;
-    font-size: 14px;
+    font-size: 14rem;
     font-weight: 700;
-    line-height: 23px;
+    line-height: 23rem;
     text-align: right;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -101,17 +101,17 @@
 }
 
 .line-style-under{
-    margin-top: 100px;
-    height: 2px;
-    width: 358px;
+    margin-top: 100rem;
+        height: 2rem;
+        width: 358rem;
     background-color: #000000;
 }
 
 .sol-avaliable{
     font-family: SF Pro;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 700;
-    line-height: 19.09px;
+    line-height: 19.09rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -119,9 +119,9 @@
 
 .sol-avaliable-amount{
     font-family: SF Pro;
-    font-size: 24px;
+    font-size: 24rem;
     font-weight: 700;
-    line-height: 28.64px;
+    line-height: 28.64rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -129,50 +129,50 @@
 }
 
 .line-style{
-    height: 2px;
-    width: 380px;
+    height: 2rem;
+        width: 380rem;
     background-color: #000000;
 }
 
 .line-under-div{
-    margin-top: 40px;
-    margin-left: 30px;
+    margin-top: 40rem;
+        margin-left: 30rem;
 }
 
 .line-under-button-div{
-    margin-left: 30px;
+    margin-left: 30rem;
 }
 
 .user-info-botton-div{
     display: flex;
     align-items: center;
-    margin-top: 20px;
-    height: 30px;
+    margin-top: 20rem;
+        height: 30rem;
 }
 
 .user-info-botton-div-font{
     font-family: SF Pro;
-    font-size: 14px;
+    font-size: 14rem;
     font-weight: 400;
-    line-height: 16.71px;
+    line-height: 16.71rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
     color: #E8E6E2 !important;
-    margin-left: 10px;
-    margin-right: 3px;
+    margin-left: 10rem;
+        margin-right: 3rem;
 }
 
 .switch-style{
-    margin-left: 10px;
+    margin-left: 10rem;
 }
 
 .email-address-style{
-    margin-top: 10px;
+    margin-top: 10rem;
     font-family: SF Pro;
-    font-size: 14px;
+    font-size: 14rem;
     font-weight: 400;
-    line-height: 16.71px;
+    line-height: 16.71rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -185,15 +185,15 @@
     align-content: center;
     align-items: center;
     justify-content: center;
-    width: 31px;
-    height: 22px;
+    width: 31rem;
+        height: 22rem;
     background-color: #3C342F;
-    margin-left: 10px;
-    border-radius: 10px;
+    margin-left: 10rem;
+        border-radius: 10rem;
     font-family: SF Pro;
-    font-size: 12px;
+    font-size: 12rem;
     font-weight: 700;
-    line-height: 14.32px;
+    line-height: 14.32rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -205,8 +205,8 @@
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, 1fr);
-    max-width: 800px;
-    height: 300px;
+    max-width: 800rem;
+        height: 300rem;
     margin: 0 auto;
 }
 
@@ -214,10 +214,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100px;
-    height: 100px;
+    width: 100rem;
+        height: 100rem;
     border-radius: 50%;
-    margin: 20px;
+    margin: 20rem;
     overflow: hidden;
     background-color: #f4f4f4;
 }
@@ -229,23 +229,23 @@
 }
 
 .image-box.selected {
-    border: 2px solid blue;
+    border: 2rem solid blue;
 }
 
 .icon-container {
     position: absolute;
-    bottom: 21px;
-    right: 300px;
+    bottom: 21rem;
+        right: 300rem;
     z-index: 1;
 }
 
 .edit-icon {
-    font-size: 24px;
+    font-size: 24rem;
     transition: all 0.3s ease;
 }
 
 .edit-icon:hover {
-    font-size: 30px;
+    font-size: 30rem;
     color: #1890ff;
 }
 
@@ -259,7 +259,7 @@
     justify-content: center;
     flex-direction: row;
     clip-path: polygon(10% 0, 90% 10%, 100% 90%, 0 100%);
-    padding: 10px;
+    padding: 10rem;
     background-color: #292929;
     z-index: 1;
 }
@@ -270,8 +270,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 1000px;
-    height: 600px;
+    width: 1000rem;
+        height: 600rem;
     clip-path: polygon(10% 0, 90% 10%, 100% 90%, 0 100%);
     background: #000000;
     z-index: 2;
@@ -284,18 +284,19 @@
     align-items: center;
     position: absolute;
     cursor: pointer;
-    top: 50px;
-    right: 93px;
-    width: 48px;
-    height: 48px;
+    top: 50rem;
+        right: 93rem;
+        width: 48rem;
+        height: 48rem;
     background-color: #000000;
     border-radius: 50%;
-    border: 5px solid #292929;
+    border: 5rem solid #292929;
     z-index: 5;
 }
 
 .ant-modal-content {
-    padding: 10px !important;/* 通过内边距加上边框 */
+    padding: 10rem !important;
+        /* 通过内边距加上边框 */
     margin: 0 !important;
     background-color: transparent !important;
     color: white !important;
@@ -303,13 +304,13 @@
 
 .record-div-style{
     cursor: default;
-    height: 400px;
-    width: 700px;
+    height: 400rem;
+        width: 700rem;
 }
 
 .font-style {
     transform: scale(1,0.7);
-    font-size: 75px;
+    font-size: 75rem;
     font-weight: bolder;
     color: white !important;
 }
@@ -318,28 +319,28 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    margin-top: 50px;
+    margin-top: 50rem;
 }
 
 
 .buttom-update {
-    width: 250px;
-    height: 40px;
+    width: 250rem;
+        height: 40rem;
     background-color: #ffffff;
     cursor: pointer;
-    border: 1px solid #ffffff;
-    border-radius: 10px;
-    margin-right: 10px;
+    border: 1rem solid #ffffff;
+        border-radius: 10rem;
+        margin-right: 10rem;
 }
 
 .buttom-confirm{
-    width: 250px;
-    height: 40px;
+    width: 250rem;
+        height: 40rem;
     background-color: #1eb91e;
     cursor: pointer;
-    border: 1px solid #1eb91e;
-    border-radius: 10px;
-    margin-left: 10px;
+    border: 1rem solid #1eb91e;
+        border-radius: 10rem;
+        margin-left: 10rem;
 }
 
 
diff --git a/checkerboard/src/components/userinfo/UserInfo.jsx b/checkerboard/src/components/userinfo/UserInfo.jsx
index a6aca77..d4a7c3a 100644
--- a/checkerboard/src/components/userinfo/UserInfo.jsx
+++ b/checkerboard/src/components/userinfo/UserInfo.jsx
@@ -20,7 +20,7 @@ const UserInfo = () => {
     const token = useSelector((state) => state.token);
     const user = useSelector((state) => state.user);
     const [isEditing, setIsEditing] = useState(false); // 控制是否编辑状态
-    const [name, setName] = useState(user.user_name); // 保存用户输入
+    const [name, setName] = useState(""); // 保存用户输入
 
     // 点击 SVG 切换到编辑状态
     const handleEdit = () => {
@@ -53,11 +53,12 @@ const UserInfo = () => {
                 setUserInfo(response.data);
                 console.log(response.data);
                 dispatch(setUser(response.data))
+                setName(response.data.user_name);
                 setImage(response.data.avatar_id-1)
             }
         };
         fetchUserInfo();
-    }, [token,image,dispatch]);
+    }, [token,image]);
   
     const showModal = () => {
         setOpen(true);
@@ -108,9 +109,9 @@ const UserInfo = () => {
                 <div className="info-row">
                     <Avatar
                         sx={{
-                            borderRadius: '12px',
+                            borderRadius: '12rem',
                         }}
-                        style={{marginLeft: "30px"}}
+                        style={{marginLeft: "30rem"}}
                         shape="square" size={80}
                         icon={<AntDesignOutlined/>}
                         src={images[image]}
@@ -138,7 +139,7 @@ const UserInfo = () => {
                             </defs>
                         </svg>
                     </div>
-                    <div style={{display: "flex", alignItems: "center",width:'300px'}}>
+                    <div style={{display: "flex", alignItems: "center",width:'300rem'}}>
                         {/* 如果是编辑状态，则显示输入框 */}
                         {isEditing ? (
                             <input
@@ -148,23 +149,23 @@ const UserInfo = () => {
                                 onBlur={handleBlur} // 失去焦点时保存内容
                                 autoFocus // 自动聚焦到输入框
                                 style={{
-                                    marginLeft: "30px",
-                                    height: "30px",
-                                    width:'150px',
-                                    fontSize: "16px",
-                                    padding: "4px",
-                                    borderRadius: "4px",
+                                    marginLeft: "30rem",
+                                    height: "30rem",
+                                    width:'150rem',
+                                    fontSize: "16rem",
+                                    padding: "4rem",
+                                    borderRadius: "4rem",
                                 }}
                             />
                         ) : (
                             // 非编辑状态显示 h3 标签
-                            <h3 style={{marginLeft: "30px"}}>{name}</h3>
+                            <h3 style={{marginLeft: "30rem",fontSize:'20rem'}}>{userInfo.user_name}</h3>
                         )}
 
                         {/* 点击 SVG 切换到编辑状态 */}
                         <svg
                             onClick={handleEdit}
-                            style={{marginLeft: "10px", marginTop: "5px", cursor: "pointer"}}
+                            style={{marginLeft: "10rem", marginTop: "5rem", cursor: "pointer"}}
                             width="12"
                             height="12"
                             viewBox="0 0 12 12"
@@ -193,13 +194,13 @@ const UserInfo = () => {
                 <div className='line-under-div'>
                     <div className="data-style">
                         <div className='sol-avaliable'>SOL Available</div>
-                        <div className='sol-avaliable-amount' style={{color: "#F5E01B"}}>{user.available}</div>
+                        <div className='sol-avaliable-amount' style={{color: "#F5E01B"}}>{userInfo.available}</div>
                     </div>
-                    <div style={{marginTop: '30px'}}>{message.user_id}
+                    <div style={{marginTop: '30rem'}}>{message.user_id}
                         <button className='user-info-btn'>Withdraw</button>
-                        <button className='user-info-btn' style={{marginLeft: '10px'}}>Top Up</button>
+                        <button className='user-info-btn' style={{marginLeft: '10rem'}}>Top Up</button>
                     </div>
-                    <div style={{marginTop: '50px'}}>
+                    <div style={{marginTop: '50rem'}}>
                         <div className="data-style-middle">
                             <div className='data-style-middle-font'>Bowls Occupied:</div>
                             <div className='data-style-middle-amount'>18</div>
@@ -279,7 +280,7 @@ const UserInfo = () => {
                                         </clipPath>
                                     </defs>
                                 </svg>
-                                <div className='data-style-middle-amount' style={{marginLeft: '5px'}}>18</div>
+                                <div className='data-style-middle-amount' style={{marginLeft: '5rem'}}>18</div>
                             </div>
                         </div>
                     </div>
diff --git a/checkerboard/src/components/web3wallet/Wallet.css b/checkerboard/src/components/web3wallet/Wallet.css
index ded06d5..628fa26 100644
--- a/checkerboard/src/components/web3wallet/Wallet.css
+++ b/checkerboard/src/components/web3wallet/Wallet.css
@@ -3,12 +3,12 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 206px;
-    height: 40px;
-    border-radius: 12px;
+    width: 206rem;
+        height: 40rem;
+        border-radius: 12rem;
     cursor: pointer;
     background-color:  #F51987;
-    border: 1px solid  #F51987;
+    border: 1rem solid #F51987;
     color: white;
-    margin-right: 10px;
+    margin-right: 10rem;
 }
\ No newline at end of file
diff --git a/checkerboard/src/components/web3wallet/Wallet.jsx b/checkerboard/src/components/web3wallet/Wallet.jsx
index bb0cd77..5cdf632 100644
--- a/checkerboard/src/components/web3wallet/Wallet.jsx
+++ b/checkerboard/src/components/web3wallet/Wallet.jsx
@@ -131,7 +131,7 @@ const ConnectWallet = () => {
                 d="M15 13V13.8333C15 14.75 14.25 15.5 13.3333 15.5H1.66667C0.741667 15.5 0 14.75 0 13.8333V2.16667C0 1.25 0.741667 0.5 1.66667 0.5H13.3333C14.25 0.5 15 1.25 15 2.16667V3H7.5C6.575 3 5.83333 3.75 5.83333 4.66667V11.3333C5.83333 12.25 6.575 13 7.5 13H15ZM7.5 11.3333H15.8333V4.66667H7.5V11.3333ZM10.8333 9.25C10.1417 9.25 9.58333 8.69167 9.58333 8C9.58333 7.30833 10.1417 6.75 10.8333 6.75C11.525 6.75 12.0833 7.30833 12.0833 8C12.0833 8.69167 11.525 9.25 10.8333 9.25Z"
                 fill="white"/>
           </svg>
-          <span style={{marginLeft:'10px'}}>Connect Wallet</span>
+          <span style={{marginLeft:'10rem'}}>Connect Wallet</span>
         </button>
     ) : (
         <div>
@@ -141,7 +141,7 @@ const ConnectWallet = () => {
                   d="M15 13V13.8333C15 14.75 14.25 15.5 13.3333 15.5H1.66667C0.741667 15.5 0 14.75 0 13.8333V2.16667C0 1.25 0.741667 0.5 1.66667 0.5H13.3333C14.25 0.5 15 1.25 15 2.16667V3H7.5C6.575 3 5.83333 3.75 5.83333 4.66667V11.3333C5.83333 12.25 6.575 13 7.5 13H15ZM7.5 11.3333H15.8333V4.66667H7.5V11.3333ZM10.8333 9.25C10.1417 9.25 9.58333 8.69167 9.58333 8C9.58333 7.30833 10.1417 6.75 10.8333 6.75C11.525 6.75 12.0833 7.30833 12.0833 8C12.0833 8.69167 11.525 9.25 10.8333 9.25Z"
                   fill="white"/>
             </svg>
-            <span style={{marginLeft:'10px'}}>充值</span>
+            <span style={{marginLeft:'10rem'}}>充值</span>
           </button>
         </div>
     )}
diff --git a/checkerboard/src/index.css b/checkerboard/src/index.css
index 58f1f7a..e226af9 100644
--- a/checkerboard/src/index.css
+++ b/checkerboard/src/index.css
@@ -2,6 +2,7 @@ html,
 body {
   height: 100%;
   width: 100%;
+    font-size: 1px;
   color: #f9f9f9;
   align-items: stretch;
   justify-content: flex-start;
@@ -16,7 +17,7 @@ body{
             100% 100%,
             100% 100%;
     background-repeat: no-repeat, no-repeat, no-repeat;
-    margin: 0px !important;
+    margin: 0rem !important;
     cursor: auto;
 }
 
diff --git a/checkerboard/src/pages/home/Expand.css b/checkerboard/src/pages/home/Expand.css
index 7a148b0..97bf237 100644
--- a/checkerboard/src/pages/home/Expand.css
+++ b/checkerboard/src/pages/home/Expand.css
@@ -11,11 +11,11 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    width: 1124px;
-    height: 750px;
+    width: 1124rem;
+        height: 750rem;
     clip-path: polygon(4% 0, 85% 0, 100% 100%, 0 100%);
     background: #000000;
-    margin-top: 40px;
+    margin-top: 40rem;
     z-index: 1;
 }
 
@@ -25,21 +25,21 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-evenly;
-    width: 1100px;
-    height: 730px;
+    width: 1100rem;
+        height: 730rem;
     clip-path: polygon(4% 0, 85% 0, 100% 100%, 0 100%);
     background: #191919;
     z-index: 1;
 }
 
 .grid-style-margin {
-    margin-left: 160px;
+    margin-left: 160rem;
 }
 .countdown-title{
     font-family: SF Pro;
-    font-size: 16px;
+    font-size: 16rem;
     font-weight: 400;
-    line-height: 19.09px;
+    line-height: 19.09rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -49,15 +49,15 @@
 
 .total-title {
     color: #393939;
-    /*margin-bottom: 5px;*/
+    /*margin-bottom: 5rem;*/
 }
 
 .total-content {
     font-family: SF UI Text;
-    font-size: 36px;
+    font-size: 36rem;
     font-style: italic;
     font-weight: 585;
-    line-height: 47.73px;
+    line-height: 47.73rem;
     text-align: left;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
@@ -67,18 +67,18 @@
 
 .gridStyle {
     display: grid;
-    grid-template-columns: repeat(3, 150px);
-    grid-template-rows: repeat(3, 150px);
-    gap: 20px;
-    border-radius: 6px;
-    margin-left: 160px;
+    grid-template-columns: repeat(3, 150rem);
+        grid-template-rows: repeat(3, 150rem);
+        gap: 20rem;
+        border-radius: 6rem;
+        margin-left: 160rem;
 }
 
 .cellStyle {
-    width: 150px;
-    height: 150px;
-    border-radius: 15px;
-    border: 1px solid #3b332e;
+    width: 150rem;
+        height: 150rem;
+        border-radius: 15rem;
+        border: 1rem solid #3b332e;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -86,8 +86,8 @@
     cursor: pointer;
     background-color: #2b2522;
     .price {
-        margin-bottom: 10px;
-        font-size: 18px;
+        margin-bottom: 10rem;
+            font-size: 18rem;
         font-weight: bold;
         /* 设置渐变色 */
         background: -webkit-linear-gradient(45deg, #35f419, #e7d91b);
@@ -102,13 +102,13 @@
     }
     .cellTitle {
         font-family: Roboto;
-        font-size: 12px;
+        font-size: 12rem;
         font-weight: 500;
-        line-height: 14.06px;
+        line-height: 14.06rem;
         text-align: center;
         text-underline-position: from-font;
         text-decoration-skip-ink: none;
         color: #D5C7AD;
-        margin-top: 5px;
+        margin-top: 5rem;
     }
 }
\ No newline at end of file
diff --git a/checkerboard/src/pages/home/Expand.jsx b/checkerboard/src/pages/home/Expand.jsx
index f32607f..2cdd039 100644
--- a/checkerboard/src/pages/home/Expand.jsx
+++ b/checkerboard/src/pages/home/Expand.jsx
@@ -96,7 +96,7 @@ const Expand = () => {
                                 <div className='total-title'>Total Bones Count:</div>
                                 <div style={{display: 'flex', alignItems: "center"}}>
                                     <div className='total-content'>{total}K/1M</div>
-                                    <svg style={{marginLeft:'10px'}} width="26" height="26" viewBox="0 0 26 26" fill="none"
+                                    <svg style={{marginLeft:'10rem'}} width="26" height="26" viewBox="0 0 26 26" fill="none"
                                          xmlns="http://www.w3.org/2000/svg">
                                         <path
                                             d="M15.7273 7.04168L6.62894 15.9567C6.62894 15.9567 4.54756 17.8457 2.77308 17.8457C0.99861 17.8457 0.652644 20.4538 1.30831 21.0962C1.96397 21.7387 3.62126 21.1701 4.37736 21.1701C5.13347 21.1701 5.99839 21.2465 5.99839 22.0776C5.99839 22.9087 5.45711 25.6316 6.92189 25.6316C8.38667 25.6316 9.85424 24.6502 9.85424 23.1384C9.85424 21.6266 9.23764 19.814 11.4725 17.6215C13.7073 15.429 18.6429 9.38731 18.6429 9.38731C18.6429 9.38731 19.8008 8.40313 20.9587 8.63004C22.1165 8.85694 23.732 8.70657 24.5048 7.72513C25.2776 6.74369 25.1995 4.62777 23.8882 4.62777C22.5769 4.62777 20.9587 5.99465 20.9587 5.07882C20.9587 4.163 21.2655 1 19.2595 1C17.2535 1 15.9449 1.98139 15.9449 3.41664C15.9449 4.85189 16.6927 6.09851 15.7273 7.04168Z"
@@ -236,6 +236,10 @@ const Expand = () => {
                     </div>
                     <div className='right-dev'>
                         <div className='record-table-dev'>
+                            <div className='record-table-dev-title'>
+                                <div style={{width:'7rem',height:'7rem',backgroundColor:' #3C342F',marginLeft:'15rem'}}></div>
+                                <span style={{marginLeft:'20rem'}}>Happening Now</span>
+                            </div>
                             <RecordTable/>
                         </div>
                     </div>
diff --git a/controller/checkerboard.go b/controller/checkerboard.go
index f757a9c..f0090e2 100644
--- a/controller/checkerboard.go
+++ b/controller/checkerboard.go
@@ -20,17 +20,17 @@ type CheckerBoardController struct {
 // UserBetting 押注
 func (p *CheckerBoardController) UserBetting(c *gin.Context) {
 	//计算总金额，如果大于100万，就结束，阻止请求
-	amountTotal, err := utils.Amount()
-	if err != nil {
-		utils.Tools.LG.Error("计算总金额失败", zap.Error(err))
-		pkg.ResponseError(c, pkg.CodeActivityEnd)
-		return
-	}
-	if amountTotal >= 1000000 {
-		utils.Tools.LG.Error("活动结束", zap.Error(err))
-		pkg.ResponseError(c, pkg.CodeActivityEnd)
-		return
-	}
+	//amountTotal, err := utils.Amount()
+	//if err != nil {
+	//	utils.Tools.LG.Error("计算总金额失败", zap.Error(err))
+	//	pkg.ResponseError(c, pkg.CodeActivityEnd)
+	//	return
+	//}
+	//if amountTotal >= 1000000 {
+	//	utils.Tools.LG.Error("活动结束", zap.Error(err))
+	//	pkg.ResponseError(c, pkg.CodeActivityEnd)
+	//	return
+	//}
 	userId := c.GetString(pkg.USERID)
 	if userId == "" {
 		p.LG.Error("用户id在上下文中未找到")
diff --git a/go.mod b/go.mod
index f16aa06..7f4cc9f 100644
--- a/go.mod
+++ b/go.mod
@@ -3,6 +3,7 @@ module activity
 go 1.21.10
 
 require (
+	github.com/blocto/solana-go-sdk v1.30.0
 	github.com/fsnotify/fsnotify v1.7.0
 	github.com/gin-gonic/gin v1.10.0
 	github.com/go-sql-driver/mysql v1.8.1
@@ -13,6 +14,7 @@ require (
 	github.com/spf13/viper v1.19.0
 	go.uber.org/zap v1.27.0
 	golang.org/x/crypto v0.26.0
+	golang.org/x/net v0.25.0
 	gorm.io/driver/mysql v1.5.7
 	gorm.io/gorm v1.25.12
 )
@@ -20,7 +22,6 @@ require (
 require (
 	filippo.io/edwards25519 v1.1.0 // indirect
 	github.com/BurntSushi/toml v1.4.0 // indirect
-	github.com/blocto/solana-go-sdk v1.30.0 // indirect
 	github.com/bytedance/sonic v1.11.6 // indirect
 	github.com/bytedance/sonic/loader v0.1.1 // indirect
 	github.com/cloudwego/base64x v0.1.4 // indirect
@@ -57,7 +58,6 @@ require (
 	go.uber.org/multierr v1.10.0 // indirect
 	golang.org/x/arch v0.8.0 // indirect
 	golang.org/x/exp v0.0.0-20230905200255-921286631fa9 // indirect
-	golang.org/x/net v0.25.0 // indirect
 	golang.org/x/sys v0.23.0 // indirect
 	golang.org/x/text v0.17.0 // indirect
 	google.golang.org/protobuf v1.34.1 // indirect