diff --git a/backend/core/basic/character.py b/backend/core/basic/character.py
index 3e5a0360..90095692 100644
--- a/backend/core/basic/character.py
+++ b/backend/core/basic/character.py
@@ -557,6 +557,10 @@ class Character(CharacterProperty):
             skill = self.GetSkillByID(key)
             if skill is not None:
                 skill.lv += skills[key].get('lv', 0)
+                if skill.hasReinforce:
+                    skill.reinforce = skills[key].get('reinforce', 0)
+                if skill.hasVP:
+                    skill.vp = skills[key].get('vp', 0)
         pass
 
     def load_skills(self) -> None:
diff --git a/backend/core/basic/skill.py b/backend/core/basic/skill.py
index 51a87e95..ac22a79b 100644
--- a/backend/core/basic/skill.py
+++ b/backend/core/basic/skill.py
@@ -212,6 +212,7 @@ class ActiveSkill(Skill):
 
     def skillInfo(self, mode: str | None = None):
         basic = deepcopy(self)
+        basic.setReinforce()
         if mode is not None:
             basic.currentMode = mode
             basic.setMode(mode)
diff --git a/frontend/src/components/calc/tabs/index.vue b/frontend/src/components/calc/tabs/index.vue
index f1f40188..db807be5 100644
--- a/frontend/src/components/calc/tabs/index.vue
+++ b/frontend/src/components/calc/tabs/index.vue
@@ -69,8 +69,9 @@ export default defineComponent({
   display: flex;
   list-style: none;
   align-items: flex-end;
-  border-bottom: 1px solid #4f4838;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   width: 100%;
+  height: 25px;
 
   font-size: 14px;
 
@@ -97,12 +98,17 @@ export default defineComponent({
   .i-tab {
     // font-size: 12px;
     margin-left: 1px;
-
-    width: 120px;
+    width: fit-content;
+    padding:0px 10px;
+    padding-bottom: 2px;
     height: 20px;
-    line-height: 20px;
     text-align: center;
     text-decoration: none;
+    display: flex;
+    align-items: end;
+    box-sizing: border-box;
+
+    text-shadow: none;
 
     &:visited {
       color: currentColor;
@@ -119,8 +125,10 @@ export default defineComponent({
     }
 
     &.active {
+      margin-bottom: -1px;
       background: linear-gradient(#574d38, #25221d);
       border-image: url('@/assets/img/control/active_top.png') 1 fill stretch;
+      height: 22px;
       // color: #ffb400;
     }
   }
diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png b/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png
index 89e0bfc6..c225b4ec 100644
Binary files a/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png and b/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bg.png differ
diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bgBack.png b/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bgBack.png
new file mode 100644
index 00000000..89e0bfc6
Binary files /dev/null and b/frontend/src/pages/Character/Skill/components/SkillReinforce/img/bgBack.png differ
diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx b/frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx
index 3f6a6a0e..b6ddb500 100644
--- a/frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx
+++ b/frontend/src/pages/Character/Skill/components/SkillReinforce/index.tsx
@@ -22,68 +22,156 @@ export default defineComponent({
   },
   setup(props) {
     const lvInfo = useVModel(props, 'lvInfo')
-    const skills = computed(() =>
-      props.skills.filter((a) => a.hasReinforce && (!lvInfo.value[a.id]?.reinforce || lvInfo.value[a.id]?.reinforce == 0)).sort((a, b) => a.learnLv - b.learnLv),
-    )
 
-    const reinforce = (type: number, id: number) => {
-      return computed({
+    const skills = (index: number = 0) => {
+      index -= 1
+      const reinforceList = Object.keys(lvInfo.value).filter(
+        (a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
+      )
+      const currentReinforceSkill = index >= 0 ? reinforceList[index] : undefined
+      return computed(() =>
+        props.skills
+          .filter(
+            (a) =>
+              a.id.toString() === currentReinforceSkill ||
+              (a.hasReinforce &&
+                (!lvInfo.value[a.id]?.reinforce || lvInfo.value[a.id]?.reinforce == 0) && lvInfo.value[a.id].lv > 0),
+          )
+          .sort((a, b) => a.learnLv - b.learnLv),
+      )
+    }
+
+    const itemChecked = (index: number, reinforce: number) => {
+      index -= 1
+      return computed<string | undefined>({
         get() {
-          return lvInfo.value[id].reinforce
+          const reinforceList = Object.keys(lvInfo.value).filter(
+            (a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
+          )
+          const currentReinforceSkill = reinforceList[index]
+          const currentReinforce = lvInfo.value[currentReinforceSkill]?.reinforce
+          console.log(currentReinforce, reinforce)
+          return currentReinforce == reinforce ? currentReinforceSkill : undefined
+        },
+        set(value: string | undefined) {
+          if (!value) return
+          const reinforceList = Object.keys(lvInfo.value).filter(
+            (a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
+          )
+          const currentReinforceSkill = reinforceList[index]
+          currentReinforceSkill && (lvInfo.value[currentReinforceSkill].reinforce = 0)
+          if (!value) {
+            currentReinforceSkill && (lvInfo.value[currentReinforceSkill].reinforce = 0)
+          } else {
+            lvInfo.value[value].reinforce = reinforce
+          }
         },
-        set(value) {},
       })
     }
 
+    const exchange = (index: number) => {
+      const skill = itemChecked(index, 1).value || itemChecked(index, 2).value
+      if (!skill) return
+      lvInfo.value[skill].reinforce = lvInfo.value[skill].reinforce == 1 ? 2 : 1
+    }
+
     return () => (
       <>
-        <div class="flex pt-10px bg-black">
-          <div class="skill-reinforce relative">
-            <div class="absolute left-55px top-150px w-250px flex flex-col gap-25px">
-              {renderList(3, (index) => (
-                <>
-                  <div class="w-180px h-40px flex items-center justify-between pl-10px pr-10px">
-                    <CaclIconSelect class="!mt-3px !ml--1px !bg-white/0 !border-white/0" columnNum={4} >
-                      {renderList(skills.value, (item) => (
-                        <>
-                        <CalcOption value={item.id} key={item.id}>
-                          <img  src={getImageURL(item.icon)} alt={item.name} />
-                        </CalcOption>
-                        </>
-                      ))}
-                    </CaclIconSelect>
-                    <CalcButton icon="exchange"></CalcButton>
-                    <CaclIconSelect class="!mt-3px !bg-white/0 !border-white/0" columnNum={4} >
-                      {renderList(skills.value, (item) => (
-                        <>
-                        <CalcOption value={item.id} key={item.id}>
-                          <img  src={getImageURL(item.icon)} alt={item.name} />
-                        </CalcOption>
-                        </>
-                      ))}
-                      </CaclIconSelect>
-                  </div>
-                </>
-              ))}
-            </div>
-            <div class="absolute top-80px left-300px w-320px h-270px flex flex-wrap content-start gap-15px py-5px px-30px box-border">
-              {renderList(skills.value, (item) => (
-                <div
-                  key={item.id}
-                  class="w-28px h-28px border-1px border-solid border-#3C2E1D rounded-4px"
-                >
-                  <img src={getImageURL(item.icon)} alt={item.name} />
+        {lvInfo.value && Object.keys(lvInfo.value).length > 0 ? (
+          <div class="flex pt-10px bg-black">
+            <div class="skill-reinforce relative">
+              <div class="absolute left-76px top-137px w-250px flex flex-col gap-21.5px">
+                {renderList(3, (index) => (
+                  <>
+                    <div class="w-169px h-36px flex items-center justify-between">
+                      <div class="m-4px w-28px h-28px">
+                        <CaclIconSelect
+                          v-model:modelValue={itemChecked(index, 1).value}
+                          class="!bg-white/0 !border-white/0 m-4px"
+                          columnNum={4}
+                        >
+                          {renderList(skills(index).value, (item) => (
+                            <>
+                              <CalcOption value={item.id.toString()}>
+                                <img src={getImageURL(item.icon)} alt={item.name} />
+                              </CalcOption>
+                            </>
+                          ))}
+                        </CaclIconSelect>
+                      </div>
+                      <CalcButton icon="exchange" onClick={() => exchange(index)}></CalcButton>
+                      <div class="m-4px w-28px h-28px">
+                        <CaclIconSelect
+                          v-model:modelValue={itemChecked(index, 2).value}
+                          class=" !bg-white/0 !border-white/0"
+                          columnNum={4}
+                        >
+                          {renderList(skills(index).value, (item) => (
+                            <>
+                              <CalcOption value={item.id.toString()}>
+                                <img src={getImageURL(item.icon)} alt={item.name} />
+                              </CalcOption>
+                            </>
+                          ))}
+                        </CaclIconSelect>
+                      </div>
+                    </div>
+                  </>
+                ))}
+              </div>
+              <div class="absolute top-70px left-310px w-320px h-270px py-5px px-30px box-border flex flex-col">
+                <div class="flex flex-wrap gap-10px content-start h-120px overflow-y-auto mb-10px">
+                  {renderList(skills().value, (item) => (
+                    <div
+                      key={item.id}
+                      class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
+                    >
+                      <img src={getImageURL(item.icon)} alt={item.name} />
+                    </div>
+                  ))}
+                  {renderList(36 - skills().value.length, (item) => (
+                    <div
+                      key={item}
+                      class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px"
+                    ></div>
+                  ))}
                 </div>
-              ))}
-              {renderList(36 - skills.value.length, (item) => (
-                <div
-                  key={item}
-                  class="w-28px h-28px border-1px border-solid border-#3C2E1D rounded-4px bg-#0B0D0A"
-                ></div>
-              ))}
+                <div class="flex flex-col gap-10px">
+                  {renderList(
+                    Object.keys(lvInfo.value).filter(
+                      (a) => !!lvInfo.value[a].reinforce && lvInfo.value[a].reinforce > 0,
+                    ),
+                    (index) => {
+                      const skill = props.skills.find((a) => a.id.toString() === index)
+                      let tooltip = ''
+                      if (skill) {
+                        if (lvInfo.value[skill.id.toString()].reinforce == 1) {
+                          tooltip = `技能攻击力   +${skill.learnLv < 35 ? '60' : 55}%`
+                        }
+                        if (lvInfo.value[skill.id.toString()].reinforce == 2) {
+                          tooltip = `技能攻击力 +${skill.learnLv < 35 ? '43' : 38}%<br/>技能冷却时间 -15%`
+                        }
+                      }
+
+                      return skill ? (
+                        <div class="flex gap-5px items-center">
+                          <div class="w-[28px] h-[28px] rounded-[1px] border-[1px] border-solid border-[#6d4e2b] bg-[linear-gradient(180deg,_#191919_0%,_#000000_100%)] [box-shadow:0px_4px_4px_#00000040_inset] rounded-4px">
+                            <img src={getImageURL(skill?.icon)} alt={skill.name} />
+                          </div>
+                          <div class="text-#947E4E" v-html={tooltip}></div>
+                        </div>
+                      ) : (
+                        <></>
+                      )
+                    },
+                  )}
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        ) : (
+          <></>
+        )}
       </>
     )
   },
diff --git a/frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss b/frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss
index ad34f4da..8219755d 100644
--- a/frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss
+++ b/frontend/src/pages/Character/Skill/components/SkillReinforce/style.scss
@@ -1,6 +1,6 @@
 .skill-reinforce {
   width: 620px;
-  height: 375px;
+  height: 334px;
   background-image: url('./img/bg.png');
   background-size: 100% 100%;
   background-color: black;
diff --git a/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx b/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx
index 6fcc1880..01d0b82e 100644
--- a/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx
+++ b/frontend/src/pages/Character/Skill/components/SkillVP/index.tsx
@@ -55,7 +55,7 @@ export default defineComponent({
       <>
         <div class="h-auto py-2 flex flex-col bg-#080808 box-content">
           {renderList(skills.value, (item) => (
-            <div class="h-140px flex items-center vp">
+            <div class="h-140px flex items-center vp pl-26px pr-16px box-content">
               <div class="w-30px text-center text-#816f4c">{item.learnLv}</div>
               <div class="w-200px flex gap-5px items-center">
                 <div class="border-1px border-solid border-#3F382E rounded-4px w-28px h-28px">
@@ -65,7 +65,7 @@ export default defineComponent({
               </div>
               {renderList(2, (index) => (
                 <div
-                  class="flex justify-center vp-item ml-5px"
+                  class={["flex justify-center vp-item ", index == 1 ? 'ml-auto' : 'ml-2px']}
                   onClick={() => {
                     itemChecked(item.id.toString(), index).value = !itemChecked(
                       item.id.toString(),
diff --git a/frontend/src/pages/Character/Skill/index.vue b/frontend/src/pages/Character/Skill/index.vue
index 096a6df4..c33af03e 100644
--- a/frontend/src/pages/Character/Skill/index.vue
+++ b/frontend/src/pages/Character/Skill/index.vue
@@ -39,8 +39,8 @@
         ></SkillTree>
       </div>
       <div v-if="tab === 1" class="flex flex-col overflow-y-hidden h-full">
-                <SkillReinforce
-        class="flex-1"
+        <SkillReinforce
+          class="flex-1"
           :skills="infoStore.skills"
           v-model:lvInfo="configStore.config.skills"
           v-model:bindAwake="configStore.config.bindAwake"