diff --git a/public/icons/UINGSClassBr.png b/public/icons/UINGSClassBr.png
new file mode 100644
index 0000000..1c51c2b
Binary files /dev/null and b/public/icons/UINGSClassBr.png differ
diff --git a/src/TestPanel.js b/src/TestPanel.js
index f3095a7..118b0e8 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -33,7 +33,7 @@ function EditBox(p) {
 		return () => {
 			clearTimeout(timer1);
 		};
-	})
+	},[p.edit])
 	return <input id="editBoxInput" type={p.type} max={p.type==="number"?20:undefined} min={p.type==="number"?1:undefined} onKeyDown={(e)=>{
 		if (e.key==="Enter") {p.setEdit(false)}
 		else if (e.key==="Escape") {p.setEdit(false)}
@@ -53,7 +53,7 @@ function EditBoxInput(p) {
 	return <>
 		<div className={edit?"editBoxActive":"editBox"} onClick={(f)=>{setEdit(true)}}>
 			{edit?
-			<EditBox maxlength={p.maxlength} type={p.type} setEdit={setEdit} originalName={p.data} setName={p.setData} value={p.data}/>
+			<EditBox maxlength={p.maxlength} type={p.type} edit={edit} setEdit={setEdit} originalName={p.data} setName={p.setData} value={p.data}/>
 			:<>{p.prefix}{p.data}</>}
 		</div>
 	</>
@@ -86,8 +86,11 @@ const [author,setauthor] = useState("Player")
 const [buildName,setbuildName] = useState("Character")
 const [className,setclassName] = useState("Hunter")
 const [subclassName,setsubclassName] = useState("Force")
-const [level,setLevel] = useState(1)
-const [secondaryLevel,setsecondaryLevel] = useState(1)
+const [level,setLevel] = useState(20)
+const [secondaryLevel,setsecondaryLevel] = useState(20)
+const [effectPage,setEffectPage]=useState(1)
+const [weaponPage,setWeaponPage]=useState(1)
+const [statsPage,setStatsPage]=useState(1)
 
 function Class(p) {
   const CLASSES = p.GetData("class")
@@ -115,6 +118,21 @@ function EditableClass(p){
 	</>
 }
 
+
+function PageControlButton(p) {
+	return <li onClick={()=>{p.setCurrentPage(p.page)}} className={(p.currentPage===p.page)?"selected":""}>{p.pageName?p.pageName:p.page}</li>
+}
+
+function PageControl(p) {
+	var pages = []
+	for (var i=0;i<p.pages;i++) {
+		pages.push(<PageControlButton pageName={p.pageNames?p.pageNames[i]:undefined} currentPage={p.currentPage} setCurrentPage={p.setCurrentPage} page={i+1}/>)
+	}
+	return <ul className="boxmenu">
+			{pages.map((page,i)=>{return <React.Fragment key={i}>{page}</React.Fragment>})}
+		</ul>
+}
+
 useEffect(()=>{
   if (p.bp>1000) {
     setbpGraphMax(3000)
@@ -139,9 +157,7 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Basic Information</h1>
-<div className="boxExit"></div>
 </div>
-
 <table className="basicInfo">
   <tr>
     <td>Author</td>
@@ -157,7 +173,7 @@ useEffect(()=>{
     <EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
     </td>
     <td>
-    <span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span>
+    <span className="ye"><EditBoxInput callback={()=>{if (level<1) {setLevel(1)} else if (level>20) {setLevel(20)}}} prefix="Lv." setData={setLevel} data={level} type="number"/></span>
     </td>
   </tr>
   <tr>
@@ -166,7 +182,7 @@ useEffect(()=>{
     <EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass>
     </td>
     <td>
-    <EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/>
+    <EditBoxInput callback={()=>{if (level<1) {setLevel(1)} else if (level>20) {setLevel(20)}}}  prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/>
     </td>
   </tr>
 </table>
@@ -174,15 +190,12 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Current Effects</h1>
-<div className="boxExit"></div>
 </div>
-<ul className="boxmenu">
-<li>1</li>
-<li>2</li>
-</ul>
+<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
 <h3>Effect Name</h3>
 <ul className="infoBuffs">
-	<li>Food Bost Effect
+{ 
+  effectPage===1?<><li>Food Bost Effect
 		<ul>
 			<li><img src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
 			<li><img src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
@@ -198,7 +211,8 @@ useEffect(()=>{
 		<ul>
 			<li><img src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
 		</ul>
-	</li>
+	</li></>:<></>
+}
 </ul>
 </div>
 </div>
@@ -206,19 +220,17 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Equip</h1>
-<div className="boxExit"></div>
 </div>
 <div className="equipPalette">
-	<div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" src="./64px-NGSUIItemResurgirRifle.png" /></div></div>
-	<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
-	<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
-	<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
+	<div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" src={process.env.PUBLIC_URL+"/64px-NGSUIItemResurgirRifle.png"} /></div></div>
+	<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" src={process.env.PUBLIC_URL+"/photon_barrier.png"} /></div></div>
+	<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" src={process.env.PUBLIC_URL+"/photon_barrier.png"} /></div></div>
+	<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" src={process.env.PUBLIC_URL+"/photon_barrier.png"} /></div></div>
 </div>
 </div>
 <div className="box">
 <div className="boxTitleBar">
 <h1>Equipped Weapon</h1>
-<div className="boxExit"></div>
 </div>
 <h2 className="rifle">Resurgir Rifle+40</h2>
 <ul className="boxmenu">
@@ -257,7 +269,6 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Basic Stats</h1>
-<div className="boxExit"></div>
 </div>
 <table className="statsInfo">
   <tr>
@@ -309,7 +320,6 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Damage Stats</h1>
-<div className="boxExit"></div>
 </div>
 <ul className="boxmenu">
 <li>1</li>
diff --git a/src/style.css b/src/style.css
index 8548429..20b3598 100644
--- a/src/style.css
+++ b/src/style.css
@@ -36,7 +36,7 @@ img {
 	vertical-align: middle;
 }
 body {
-    background-image: url("./icons/d_global_bg_header.png"),url("./icons/gl_main_bg.jpg");
+    background-image: url("../public/icons/d_global_bg_header.png"),url("../public/icons/gl_main_bg.jpg");
     background-size: 1903px,2560px;
 	background-color: #e8ecf4;
     background-repeat: no-repeat,repeat-y;
@@ -442,7 +442,7 @@ em {
 	text-overflow: ellipsis;
 }
 .aug:before {
-	content:url("./icons/UINGSItemSpecialAbility.png");
+	content:url("../public/icons/UINGSItemSpecialAbility.png");
 	margin-right: 5px;
 	vertical-align: middle;
 }
@@ -457,17 +457,17 @@ em {
 	clear:both;
 }
 .rifle:before {
-    content: url("./icons/NGSUIItemAssaultRifleMini.png");
+    content: url("../public/icons/NGSUIItemAssaultRifleMini.png");
 	margin-right: 5px;
 	vertical-align: middle;
 }
 .gb:before {
-    content: url("./icons/NGSUIItemGunbladeMini.png");
+    content: url("../public/icons/NGSUIItemGunbladeMini.png");
 	margin-right: 5px;
 	vertical-align: middle;
 }
 .vege:before {
-    content: url("./icons/food/vege.png");
+    content: url("../public/icons/food/vege.png");
 	margin-right: 5px;
 	vertical-align: middle;
 }
@@ -480,25 +480,25 @@ em {
 	box-sizing: content-box;
 }
 li.r1 {
-    background-image: url("./icons/NGSUIRarity1Star.png");
+    background-image: url("../public/icons/NGSUIRarity1Star.png");
 }
 .r1 img  {
 	background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
 }
 li.r2 {
-    background-image: url("./icons/NGSUIRarity2Star.png");
+    background-image: url("../public/icons/NGSUIRarity2Star.png");
 }
 .r2 img  {
 	background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
 }
 li.r3 {
-    background-image: url("./icons/NGSUIRarity3Star.png");
+    background-image: url("../public/icons/NGSUIRarity3Star.png");
 }
 .r3 img  {
 	background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
 }
 li.r4 {
-    background-image: url("./icons/NGSUIRarity4Star.png");
+    background-image: url("../public/icons/NGSUIRarity4Star.png");
 }
 .r4 img  {
 	background: radial-gradient(rgb(101,178,77),rgb(83,146,63));
@@ -525,7 +525,7 @@ li.r4 {
 	margin-right: 10px;
 }
 .atk:before {
-	content: url("./icons/NGSUIStatATKOutline.png");
+	content: url("../public/icons/NGSUIStatATKOutline.png");
 	margin-right: 5px;
 	vertical-align: middle;
 }
@@ -533,7 +533,7 @@ li.r4 {
 	color: rgb(255,135,80);
 }
 .fixa:before {
-	content: url("./icons/UINGSItemPresetAbility.png");
+	content: url("../public/icons/UINGSItemPresetAbility.png");
 	margin-right: 5px;
 	vertical-align: middle;
 }
@@ -541,7 +541,7 @@ li.r4 {
 	color: rgb(255,255,0);
 }
 .pot:before {
-	content: url("./icons/NGSUIItemPotentialAbility.png");
+	content: url("../public/icons/NGSUIItemPotentialAbility.png");
 	margin-right: 5px;
 	vertical-align: middle;
 }
@@ -704,10 +704,10 @@ option {
 	background-origin: content-box;
 }
 li.treeListMain {
-	background-image: url("./icons/class_main.png");
+	background-image: url("../public/icons/class_main.png");
 }
 li.treeListSub {
-	background-image: url("./icons/class_sub.png");
+	background-image: url("../public/icons/class_sub.png");
 }
 .treeList li img {
 	vertical-align: middle;
@@ -763,7 +763,7 @@ div.skillMaxed {
 .skillTreeGrid div:hover {
 	outline: 2px solid rgba(54,255,255,0.66);
 	background-color: rgba(113,169,189,0.33);
-	background-image: url("./icons/skilltree_div_overlay.png");
+	background-image: url("../public/icons/skilltree_div_overlay.png");
 	background-repeat: no-repeat;
 }
 .skillTreeGrid div.skillActive:hover, .skillTreeGrid div.skillMaxed:hover  {
@@ -793,7 +793,7 @@ div.skillMaxed .skillAllocated {
 	position: absolute;
 	height: 22px;
 	width: 175px;
-	background-image: url("./icons/skilltree_req_unlock.png");
+	background-image: url("../public/icons/skilltree_req_unlock.png");
 	background-repeat: no-repeat;
 	background-position: center;
 	top: -34px;
@@ -805,7 +805,7 @@ div.skillMaxed .skillAllocated {
 	position: absolute;
 	height: 22px;
 	width: 175px;
-	background-image: url("./icons/skilltree_req_lock.png");
+	background-image: url("../public/icons/skilltree_req_lock.png");
 	background-repeat: no-repeat;
 	background-position: center;
 	top: -34px;
@@ -895,7 +895,7 @@ input#editBoxInput {
 	max-width: 250px;
 	min-width: 100px;
 	padding: 20px;
-	
+	z-index: 2;
 }
 .popup button{
 	margin:5px;