diff --git a/public/project/plugins.js b/public/project/plugins.js
index 97a4efb..f2684cb 100644
--- a/public/project/plugins.js
+++ b/public/project/plugins.js
@@ -5680,7 +5680,7 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
                     desc: [
                         '<span style="color: #dd4">第一章终极技能</span>，战斗时智慧会充当等量护盾'
                     ],
-                    consume: '50 + level * 50',
+                    consume: '2500',
                     front: [
                         [6, 10],
                         [5, 1],
diff --git a/src/data/skillTree.json b/src/data/skillTree.json
new file mode 100644
index 0000000..e6f60b2
--- /dev/null
+++ b/src/data/skillTree.json
@@ -0,0 +1,171 @@
+{
+    "chapter1": [
+        {
+            "index": 0,
+            "title": "力量",
+            "desc": [
+                "力量就是根本！可以通过智慧增加力量，每级增加2点攻击。"
+            ],
+            "consume": "10 * level + 10",
+            "front": [],
+            "loc": [
+                1,
+                2
+            ],
+            "max": 10,
+            "effect": [
+                "攻击 + ${level * 2}"
+            ]
+        },
+        {
+            "index": 1,
+            "title": "致命一击",
+            "desc": [
+                "爆发出全部力量攻击敌人，每级增加5点额外攻击。"
+            ],
+            "consume": "30 * level + 30",
+            "front": [
+                [
+                    0,
+                    5
+                ]
+            ],
+            "loc": [
+                2,
+                1
+            ],
+            "max": 10,
+            "effect": [
+                "额外攻击 + ${level * 5}"
+            ]
+        },
+        {
+            "index": 2,
+            "title": "断灭之刃",
+            "desc": [
+                "<span style=\"color: gold\">主动技能，快捷键1<span>，",
+                "开启后会在战斗时会额外增加一定量的攻击，但同时减少一定量的防御。"
+            ],
+            "consume": "200 * level + 400",
+            "front": [
+                [
+                    1,
+                    5
+                ]
+            ],
+            "loc": [
+                4,
+                1
+            ],
+            "max": 5,
+            "effect": [
+                "增加${level * 10}%攻击，减少${level * 10}%防御"
+            ]
+        },
+        {
+            "index": 3,
+            "title": "坚韧",
+            "desc": [
+                "由智慧转化出坚韧！每级增加2点防御"
+            ],
+            "consume": "10 * level + 10",
+            "front": [],
+            "loc": [
+                1,
+                4
+            ],
+            "max": 10,
+            "effect": [
+                "防御 + ${level * 2}"
+            ]
+        },
+        {
+            "index": 4,
+            "title": "回春",
+            "desc": [
+                "让智慧化为治愈之泉水！每级增加1点生命回复"
+            ],
+            "consume": "20 * level + 20",
+            "front": [
+                [
+                    3,
+                    5
+                ]
+            ],
+            "loc": [
+                2,
+                5
+            ],
+            "max": 25,
+            "effect": [
+                "生命回复 + ${level}"
+            ]
+        },
+        {
+            "index": 5,
+            "title": "治愈之泉",
+            "desc": [
+                "让生命变得更多一些吧！每吃50瓶血瓶就增加当前生命回复10%的生命回复"
+            ],
+            "consume": "1500",
+            "front": [
+                [
+                    4,
+                    25
+                ]
+            ],
+            "loc": [
+                4,
+                5
+            ],
+            "max": 1,
+            "effect": [
+                "50瓶血10%生命回复"
+            ]
+        },
+        {
+            "index": 6,
+            "title": "坚固之盾",
+            "desc": [
+                "让护甲更加坚硬一些吧！每级增加10点防御"
+            ],
+            "consume": "50 + level * 50",
+            "front": [
+                [
+                    3,
+                    5
+                ]
+            ],
+            "loc": [
+                2,
+                3
+            ],
+            "max": 10,
+            "effect": [
+                "防御 + ${level * 10}"
+            ]
+        },
+        {
+            "index": 7,
+            "title": "无上之盾",
+            "desc": [
+                "<span style=\"color: #dd4\">第一章终极技能</span>，战斗时智慧会充当等量护盾"
+            ],
+            "consume": "50 + level * 50",
+            "front": [
+                [
+                    3,
+                    5
+                ]
+            ],
+            "loc": [
+                5,
+                3
+            ],
+            "max": 1,
+            "effect": [
+                "战斗时智慧会充当护盾"
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/ui/skillTree.vue b/src/ui/skillTree.vue
index 1bda63a..2549ea9 100644
--- a/src/ui/skillTree.vue
+++ b/src/ui/skillTree.vue
@@ -203,7 +203,7 @@ function draw() {
 function click(e: MouseEvent) {
     const px = e.offsetX;
     const py = e.offsetY;
-    const w = canvas.width;
+    const w = canvas.width / devicePixelRatio;
     const per = w / 11;
     const x = Math.floor(px / per);
     const y = Math.floor(py / per);
@@ -331,4 +331,50 @@ function selectChapter(delta: number) {
     flex-direction: column;
     align-items: center;
 }
+
+@media screen and (max-width: 600px) {
+    #skill-tree {
+        width: 100%;
+        height: 100%;
+        font-size: 3.3vw;
+        padding: 5%;
+    }
+
+    #skill-title {
+        width: 100%;
+        font-size: 4vw;
+        height: 5vw;
+    }
+
+    #divider-vertical {
+        height: auto;
+    }
+
+    #skill-bottom {
+        height: auto;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #skill-canvas {
+        height: 40vh;
+        width: 40vh;
+    }
+
+    #front-scroll {
+        height: 18vh;
+    }
+
+    #skill-consume {
+        font-size: 2.4vh;
+    }
+
+    #front-scroll {
+        font-size: 2.4vh;
+    }
+
+    #skill-chapter {
+        font-size: 2.4vh;
+    }
+}
 </style>