diff --git a/src/TestPanel.js b/src/TestPanel.js
index 86da5f0..6647edf 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -1,4 +1,4 @@
-import {PencilFill} from 'react-bootstrap-icons'
+import {PencilFill,Save} from 'react-bootstrap-icons'
 import React, { useEffect,useState } from 'react';
 import Modal from 'react-modal'
 import { DisplayIcon } from './DEFAULTS';
@@ -167,7 +167,7 @@ function ClassSelectorWindow(p) {
   }
   }
   displayFunction={(key) => {
-    return <li className={p.class===key?"treeListMain":p.subClass===key?"treeListSub":""} onClick={() => {if (p.editClass===0){p.setClassName(key);p.setSubClassName(p.subClass===key?p.class:p.subClass)}else{p.setSubClassName(key);p.setClassName(p.class===key?p.subClass:p.class)}; p.setModalOpen(false) }}><img alt="" src={DisplayIcon(p.GetData("class", key, "icon"))} /> {p.GetData("class", key, "name")}</li>
+    return <div className={"classSelector "+(p.class===key?"treeListMain":p.subClass===key?"treeListSub":"")} onClick={() => {if (p.editClass===0){p.setClassName(key);p.setSubClassName(p.subClass===key?p.class:p.subClass)}else{p.setSubClassName(key);p.setClassName(p.class===key?p.subClass:p.class)}; p.setModalOpen(false) }}><img alt="" src={DisplayIcon(p.GetData("class", key, "icon"))} /> {p.GetData("class", key, "name")}</div>
   }}
 />
 }
@@ -637,15 +637,17 @@ function deepCopySkills(skillData) {
   <div className="containerA">
 
     <div className="box basicInfoBox">
-
       <div className="boxTitleBar">
       <h1>Basic Information</h1></div>
-<ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={12}>
+      <ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={5}>
+
       <div className="basicInfo">
+
 <div style={{gridArea:"author"}}>Author</div>
 <div style={{gridArea:"build"}}>Build Name</div>
-<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</div>
-<div style={{gridArea:"subclass"}} onClick={()=>{setPrevPoints([...points]);setPrevSkillPointData(deepCopySkills(skillPointData));setClassSkillTreeWindowOpen(true)}}>Sub-Class</div>
+<div style={{gridArea:"class"}}>Class</div>
+<div style={{gridArea:"subclass"}}>Sub-Class</div>
+<div style={{gridArea:"skilltree",border:"0"}}><button onClick={()=>{setPrevPoints([...points]);setPrevSkillPointData(deepCopySkills(skillPointData));setClassSkillTreeWindowOpen(true)}}><PencilFill /> Skill Tree</button></div>
 
 <div style={{gridArea:"class2"}}><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
 <div style={{gridArea:"subclass2"}}><EditableClass editClass={1} setClassNameSetter={setClassNameSetter}  GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
@@ -654,7 +656,15 @@ function deepCopySkills(skillData) {
 <div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
 <div style={{gridArea:"classlv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>  
 <div style={{gridArea:"subclasslv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
-      </div>
+<div style={{gridArea:"controls",textAlign:"right",border:"0"}}><button onClick={()=>{SaveData()}}><Save /> Save Build</button></div>
+      </div> </ReactPlaceholder>
+
+ </div>
+      <div className="box basicInfoBox">
+      <div className="boxTitleBar">
+      <h1>Basic Stats</h1></div> <ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={8}>
+
+
       <div className="statsInfo">
 <div style={{gridArea:"bp"}}>Battle Power</div>
 <div style={{gridArea:"hp"}}>HP</div>
@@ -663,7 +673,7 @@ function deepCopySkills(skillData) {
 <div style={{gridArea:"def"}}>Defense</div>
 <div style={{gridArea:"wepUp"}}>Weapon Up</div>
 <div style={{gridArea:"res"}}>Ailment Resist.</div>
-<div style={{gridArea:"dmgRes",border:"0"}}>Damage Resist.</div>
+<div style={{gridArea:"dmgRes"}}>Damage Resist.</div>
 
 <div style={{gridArea:"bp2"}}>{p.bp}</div>
 <div style={{gridArea:"hp2"}}>{p.hp}</div>
@@ -672,7 +682,7 @@ function deepCopySkills(skillData) {
 <div style={{gridArea:"def2"}}>{p.def}</div>
 <div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</div>
 <div style={{gridArea:"res2"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br /></div>
-<div style={{gridArea:"dmgRes2",border:"0"}}>{(p.damageResist*100).toFixed(1)}%</div>
+<div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div>
 
 <div style={{gridArea:"bpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
 <div style={{gridArea:"hpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}>&nbsp;</span></div></div>
@@ -682,13 +692,11 @@ function deepCopySkills(skillData) {
 <div style={{gridArea:"wepUp3",color:"#ffb74c"}} ><div><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div></div>
 <div style={{gridArea:"res3"}}><div><img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br /></div></div>
 
-      </div><section className="saveControls">
-      <button onClick={()=>{SaveData()}}>Save Build</button>
-      </section>
+      </div></ReactPlaceholder>
       
       
-      </ReactPlaceholder>
-      </div>
+
+      </div>      
 
 
       <div className="box">
@@ -707,17 +715,18 @@ function deepCopySkills(skillData) {
 
       </div>
       <div className="containerB">
+
           <div className="box equipWindow">
             <div className="boxTitleBar">
-              <h1>Equipped Weapon</h1></div>
-              <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
+              <h1>Equipped Weapon</h1></div>      <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
+
               <div className="equipNameWrapper">
                 <div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
             <div className="equipEnhancement editOverlayWrapper">
             <div className="editOverlay"><p><PencilFill /> Edit</p></div>
               +40</div>
             </div>
-            <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><PencilFill /> Edit Details</PageControl>
+            <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><div onClick={()=>{setAugmentSelectWindowOpen(true)}}><PencilFill /> Edit Details</div></PageControl>
             {weaponPage === 1 ?
 
 <>
@@ -743,7 +752,7 @@ function deepCopySkills(skillData) {
 </div></div>
 </div>
 <div className="itemDetailsGridBottom editOverlayWrapper">
-<div className="editOverlay"  onClick={()=>{setAugmentSelectWindowOpen(true)}}><p><PencilFill /> Edit</p></div>
+<div className="editOverlay" onClick={()=>{setAugmentSelectWindowOpen(true)}}><p><PencilFill /> Edit</p></div>
 <div className="itemPotential"><span className="pot">Soulspring Unit Lv.3</span></div>
 <div className="itemFixa"><span className="fixa">Fixa Attack Lv.3</span></div>
 <div className="itemDetailsAugment">
@@ -833,6 +842,7 @@ function deepCopySkills(skillData) {
 
 
       </div>
+
       <div className="containerC">
 
 
@@ -1031,13 +1041,30 @@ function deepCopySkills(skillData) {
 
 <Modal ariaHideApp={false} isOpen={augmentSelectWindowOpen} onRequestClose={()=>{setAugmentSelectWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlayAugment">
 <div className="augmentSelectorPopup">
-<div className="box">
+<div className="box boxModal">
 <div className="boxTitleBar">
-              <h1>hi</h1></div>
-
+              <h1>Select Augments</h1></div>
+              <div className="augmentSelectorList customScrollbar noSelect">
+                <ul>
+                  <li className="pot">Dynamo Unit Lv.1</li>
+                  <li className="pot">Dynamo Unit Lv.2</li>
+                  <li className="pot">Dynamo Unit Lv.3</li>
+                  <li className="pot">Dynamo Unit Lv.4</li>
+                  <li className="fixa">Fixa Attack Lv.1</li>
+                  <li className="fixa">Fixa Attack Lv.2</li>
+                  <li className="fixa">Fixa Attack Lv.3</li>
+                  <li className="fixa">Fixa Attack Lv.4</li>
+                  <li className="aug">Melee I</li>
+                  <li className="aug">Melee II</li>
+                  <li className="aug">Melee III</li>
+                  <li className="aug">Precision I</li>
+                  <li className="aug">Precision II</li>
+                  <li className="aug">Precision III</li>
+</ul>
+              </div>
   </div>
   
-<div className="box equipWindow">
+<div className="box boxModal">
             <div className="boxTitleBar">
               <h1>Equipped Weapon</h1></div>
               <div className="equipNameWrapper">
diff --git a/src/style.css b/src/style.css
index 8cc4fe5..64165d1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -67,6 +67,9 @@ body {
 	/* mobile viewport bug fix */
 	min-height: -webkit-fill-available;
 }
+.media-block {
+	margin-top: 10px;
+}
 table {
     border-spacing: 0;
 	width: 100%;
@@ -233,12 +236,13 @@ header a {
 	"author author player"
 	"build build character"
 	"class class2 classlv"
-	"subclass subclass2 subclasslv";
+	"subclass subclass2 subclasslv"
+	"skilltree controls controls";
 	margin: 10px 10px 0;
 	padding: 0 5px;
 }
 .statsInfo {
-	background-color:rgba(0,0,0,0.33);
+	/*background-color:rgba(0,0,0,0.33);*/
 	margin: 5px 10px 0;
 	padding: 0 5px 5px;
 	display: grid;
@@ -315,10 +319,6 @@ header a {
 	overflow: hidden;
 	cursor: pointer;
 }
-.equipName:hover {
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	outline: 2px solid hsl(180, 78%, 50%);
-}
 .equipName h2 {
 	color: white;
 	font-weight: normal;
@@ -328,10 +328,11 @@ header a {
 .equipEnhancement .editOverlay {
 	text-align: left;
 }
-.saveControls {
-	margin-top: 10px;
-	padding: 0 10px;
-	text-align: right;
+.basicInfo button {
+	background-color:rgba(0,0,0,0.33);
+	margin: 10px 0 0 0;
+	padding: 5px 10px;
+	border: 0;
 }
 .infoBuffs {
 	margin: 0 auto;
@@ -461,25 +462,28 @@ header a {
 .augmentDetailsStatsHeader {
 	grid-area: header2;
 }
+.augmentSelectorList {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	margin: 5px 5px 0 5px;
+	padding: 2px;
+	max-height: 380px;
+}
 .augmentDetailsList {
 	grid-area: ability;
 	overflow-y: scroll;
 	max-height: 280px;
 }
-.augmentSelectorPopup .augmentDetailsList {
-max-height: initial;
-overflow-y: initial;
-}
-.augmentDetailsList li {
+.augmentDetailsList li, .augmentSelectorList li {
 	background-color: rgba(128,128,128,0.25);
 	color: white;
 	margin: 2px 5px 5px 2px;
 	padding: 10px;
 }
-.augmentDetailsList li:hover {
+.augmentDetailsList li:hover, .augmentSelectorList li:hover,.basicInfo button:hover, .equipName:hover,.equipAugs li:hover, .itemControlsWrapper > span:nth-child(odd):hover, .pageControlDetails:hover, .unselected:hover, .foodConfirm > div:hover, .skillConfirm > div:hover, .editBox:hover, .editClass:hover {
 	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
 	outline: 2px solid hsl(180, 78%, 50%);
-
+	cursor: pointer;
 }
 .augmentDetailsStats {
 	grid-area: stats;
@@ -498,16 +502,11 @@ overflow-y: initial;
 	padding: 12px 10px 7px 10px;
 	cursor:pointer !important;
 }
-.equipAugs li:hover {
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	outline: 2px solid hsl(180, 78%, 50%);
-}
 .equipAugsExpand {
 	margin: 0 10px 0 0;
 	display: inline;
 }
 .tooltip {
-	cursor: help;
 	color: white;
 	font-size:10pt;
 	width: 200px;
@@ -522,7 +521,6 @@ overflow-y: initial;
 .xTooltip {
 	margin: 0 10px 0 0;
 	display: inline;
-	cursor: help !important;
 	color: white;
 	font-size:10pt;
 	text-align: left;
@@ -657,8 +655,6 @@ overflow-y: initial;
 .itemControlsWrapper > span:nth-child(odd):hover {
 	background-color: rgba(113,169,189,0.33);
 	cursor: pointer;
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	outline: 2px solid hsl(180, 78%, 50%);
 }
 .itemControlsWrapper > span:nth-child(2) {
 	background-color:rgba(0,0,0,0.33);
@@ -771,7 +767,7 @@ overflow-y: initial;
 	margin: 10px 5px 0 0;
 	padding: 2px;
 }
-.itemWrapper:hover, .treeList li:hover {
+.itemWrapper:hover, .classSelector:hover {
 	background-color: rgba(113,169,189,0.33);
 	outline: 2px solid rgba(54,255,255,0.66);
 }
@@ -803,22 +799,17 @@ overflow-y: initial;
 	max-height: 16px;
 }
 .pageControlDetails {
-	background-color: rgba(25, 30, 35, 0.66) !important;
+	/*background-color: rgba(25, 30, 35, 0.5) !important;*/
+	background-color:rgba(0,0,0,0.33) !important;
 	margin: 10px 5px 0 auto !important;
 }
-.pageControlDetails:hover {
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	outline: 2px solid hsl(180, 78%, 50%);
-}
 .selected {
 	background: linear-gradient(135deg,#60461b,#b0a34e);
 	border-bottom: 4px solid #ffd602;
 }
 .unselected:hover {
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
 	border-bottom: 0;
 	padding-bottom: 9px;
-	outline: 2px solid hsl(180, 78%, 50%);
 }
 li.selected:hover {
 	background: linear-gradient(135deg,#60461b,#b0a34e);
@@ -933,23 +924,23 @@ adminScrollbar::-webkit-scrollbar-button {
 .treeList {
 	padding: 0 2px 2px 2px;
 }
-.treeList li {
+.classSelector{
 	background-color: rgba(128,128,128,0.33);
 	color: white;
-	margin: 5px 0 0 0;
+	margin: 0 0 5px 5px;
 	padding: 10px;
     background-repeat: no-repeat;
     background-position: right center;
 	background-origin: content-box;
 	line-height: 20px;
 }
-li.treeListMain:after, li.treeListSub:after {
+.treeListMain:after, .treeListSub:after {
 	margin-left: 10px;
 }
-li.treeListMain:after {
+.treeListMain:after {
 	content: url("./icons/class_main.png");
 }
-li.treeListSub:after {
+.treeListSub:after {
 	content: url("./icons/class_sub.png");
 }
 .treeList li img {
@@ -1114,11 +1105,6 @@ cursor:pointer !important;
 	font-size: 17px;
 	padding: 0 10px;
 }
-.foodConfirm > div:hover, .skillConfirm > div:hover {
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	cursor:pointer;
-	outline: 2px solid #30cdef;
-}
 .foodConfirm > div:first-child, .skillConfirm > div:first-child {
 	grid-column: 2;
 }
@@ -1126,11 +1112,6 @@ cursor:pointer !important;
 	grid-column: 3;
 }
 /* Sig's Amazing CSS (cuz Dudley edited it) */
-.editBox:hover, .editClass:hover{
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	cursor:pointer;
-	outline: 2px solid #30cdef;
-}
 .editBoxActive:hover {
 	cursor:pointer
 }
@@ -1230,7 +1211,7 @@ button {
 	display: grid;
 	justify-items: stretch;
 	align-items: center;    
-	grid-template-columns: minmax(10px,1fr) minmax(auto,950px) minmax(10px,1fr);
+	grid-template-columns: minmax(10px,1fr) minmax(auto,910px) minmax(10px,1fr);
 	grid-template-rows: 10px minmax(10px, 1fr) 10px;
 	min-height: 100vh;
 	/* mobile viewport bug fix */
@@ -1243,9 +1224,10 @@ button {
 	gap: 10px;
 }
 .augmentSelectorPopup > div {
-
-	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0  rgba(0,0,0,0.5) !important;
-	outline: 1px solid rgba(54,255,255,1);	
+	max-height: 440px;	
+}
+.augmentSelectorPopup > .augmentDetailsList {
+	max-height: 280px;
 }
 .modalOverlaySplash {
     position: fixed;
@@ -1297,7 +1279,6 @@ span.twitter:before {
 .boxModal {
 	animation: fadeIn 0.15s;
 	max-width: 580px;
-	margin: 0 auto;
 	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0  rgba(0,0,0,0.5) !important;
 	outline: 1px solid rgba(54,255,255,1);	
 }
@@ -1817,7 +1798,7 @@ dd:before {
 	display:inline;
 }
 .buildAvatar{
-
+	display: initial;
 }
 .buildData{
 	float:right;
@@ -1826,6 +1807,7 @@ dd:before {
 	float:right;
 }
 .buildImage{
+	display: initial;
 }
 .buildPalette{
 	width:360px;