diff --git a/src/TestPanel.js b/src/TestPanel.js
index c4a7984..e0317ac 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -214,7 +214,6 @@ function SkillTreeContainer(p){
   const [skillTreeGridPaddingX,setSkillTreeGridPaddingX] = useState(10)
   const [skillTreeGridPaddingY,setSkillTreeGridPaddingY] = useState(48)
   const [halflineheight,setHalfLineHeight] = useState(60)
-  const [points,setPoints] = useState(0)
 
   useEffect(()=>{
     if (Object.keys(p.GetData("skill_tree_data")).length>1) {
@@ -246,11 +245,7 @@ function SkillTreeContainer(p){
       skillLines={skillTreeData} halflineheight={halflineheight}
     />}
     <div className="skillTreeGrid">
-      <SkillTreeBoxes points={points} setPoints={setPoints} GetData={p.GetData} skillTreeSkillData={skillTreeSkillData}/>
-    </div>
-    <div className="skillPoints">
-      <div>Your Skill Points<span>6</span></div>
-      <div>SP<span></span>{points}</div>
+      <SkillTreeBoxes points={p.points} setPoints={p.setPoints} GetData={p.GetData} skillTreeSkillData={skillTreeSkillData}/>
     </div>
   </div>
 </div>
@@ -288,6 +283,7 @@ const [armorSlotSelection,setArmorSlotSelection] = useState(1)
 
 const [classNameSetter,setClassNameSetter] = useState(0)
 
+const [points,setPoints] = useState(0)
 
 function rarityCheck(v) {
   return v!==undefined?v.rarity!==undefined?" r"+v.rarity:"":""
@@ -611,9 +607,14 @@ AUGMENT
             <h1>Class Skill Tree</h1>
             <div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
           </div>
-          <PageControl pages={Object.keys(p.GetData("class")).length} pageNames={Object.keys(p.GetData("class")).map((cl)=>cl)} pageDisplay={Object.keys(p.GetData("class")).map((cl)=><><img alt="" src={p.GetData("class",cl,"icon")}/> {cl}</>)} currentPage={treePage} setCurrentPage={setTreePage} />
-          <SkillTreeContainer GetData={p.GetData} cl={Object.keys(p.GetData("class"))[treePage-1]}/>
-            <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
+          <PageControl pages={Object.keys(p.GetData("class")).length} pageNames={Object.keys(p.GetData("class")).map((cl)=>cl)} pageDisplay={Object.keys(p.GetData("class")).map((cl)=><><img className="boxMenuClassIcon" alt="" src={p.GetData("class",cl,"icon")}/> {cl}</>)} currentPage={treePage} setCurrentPage={setTreePage} />
+          <SkillTreeContainer points={points} setPoints={setPoints} GetData={p.GetData} cl={Object.keys(p.GetData("class"))[treePage-1]}/>
+                
+          <div className="skillPoints">
+            <div>Your Skill Points<span>6</span></div>
+            <div>SP<span></span>{points}</div>
+          </div>
+          <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
           
         </div>
       </Modal>
diff --git a/src/style.css b/src/style.css
index 53e0162..2a82799 100644
--- a/src/style.css
+++ b/src/style.css
@@ -533,6 +533,9 @@ li.r4 {
 .boxmenu img {
 	vertical-align: middle;
 }
+.boxMenuClassIcon {
+	max-height: 16px;
+}
 .pageControlDetails {
 	background-color: rgba(25, 30, 35, 0.66) !important;
 	margin: 10px 5px 0 auto !important;
@@ -751,6 +754,7 @@ div.skillLocked img, div.skillLocked span.skillAllocated, div.skillLocked em.ski
 }
 .skillIcon {
 	margin: 0 auto;
+	max-width: 48px;
 }
 .skillAllocated {
 	display: block;