diff --git a/heliosmatics.html b/heliosmatics.html
index d861df7..6719f1e 100644
--- a/heliosmatics.html
+++ b/heliosmatics.html
@@ -4,25 +4,58 @@
 <title>Heliosmatics</title>
 <meta name="description" content="HELIOSMATICS was first built by Ben P. Kay in MS Excel around 2010. Later, it was modified by Ryan Tang. Now, it migrates to web.">
 <script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>
+<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
 </head>
 <style>
- body{
-  font-family: Arial, Helvetica, sans-serif;
- }
- .column{
-   float : left;
-   width: 50%;
-   padding: 0px;
- }
- .row:after {
-   content: "";
-   display: table;
-   clear: both;
- }
-  @media screen and (max-width: 1200px) {
+  body{
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  .column{
+     float : left;
+     width: 650px;
+     padding: 0px;
+  }
+  .row:after {
+     content: "";
+     display: table;
+     clear: both;
+  }
+  .plotStyle{
+    width:650px;
+    height:600px;
+  }
+  .slider{
+    width : 400px;
+  }
+  .plotSlider{
+    width: 400px;
+  }
+  img {
+    height: 150px;
+  }
+  hr {
+    height:4px;
+    background-color:#F7CF3C; 
+    border-style:none; 
+    border-width:none;
+  }
+  @media screen and (max-width: 1000px) {
     .column {
       width: 100%;
     }
+    .plotStyle{
+      width:400px;
+      height: 370px;
+    }
+    .slider{
+      width: 200px;
+    }
+    .plotSlider{
+      width: 180px;
+    }
+    img {
+      height: 50px;
+    }
   }
 </style>
 
@@ -30,7 +63,7 @@
 
 <h1>HELIOSmatics</h1>
 
-<hr style="height:4px;background-color:#F7CF3C; border-style:none; border-width:none">
+<hr>
 
 <h1 id='reactionName' style="color: #1363A7"> 24F(d,p)25F@10MeV/u</h1>
 
@@ -41,6 +74,7 @@
   <td style="text-align:right"> Beam Ex:</td>
   <td><Input type="text" style="width:60px" value="0" id="beamEx" enterkeyhint="done"/></td>
   <td>MeV</td>
+  <td id='beamSp'></td>
  </tr>
  <tr>
   <td style="text-align:right"> Target (a):</td>
@@ -59,6 +93,8 @@
  </tr>
 </table>
 
+<p style="font: 12px" id='heavySp'></p>
+
 <p></p>
 
 <table>
@@ -81,19 +117,20 @@
   <td style="text-align:right"> B-field:</td>
   <td><Input type="text"  style="width:60px" value="-2" id='BField' enterkeyhint="done"/></td> 
   <td>T</td>
-  <td><Input type="range" min="-4" max="4" step="0.05" value="-2" style="width:400px" id='BRange'/> </td>
+  <td><Input type="range" min="-4" max="4" step="0.05" value="-2" class="slider" id='BRange'/> </td>
  </tr>
 
  <tr>
   <td style="text-align:right"> Beam Energy:</td>
   <td><Input type="text" style="width:60px" value="10" id='KEA' enterkeyhint="done"/></td>
   <td>MeV/u</td>
-  <td><Input type="range" min="0" max="20" step="0.1" value="10" style="width:400px" id='KEARange'/> </td>
+  <td><Input type="range" min="0" max="20" step="0.1" value="10" class="slider" id='KEARange'/> </td>
  </tr>
  <tr>
- <td style="text-align:right"> min Beam Energy:</td>
-  <td id='minKEA'>-1.107</td>
-  <td>MeV/u</td> 
+  <td></td>
+  <td></td>
+  <td></td>
+  <td id='minKEA'> </td>
  </tr>
 </table>
 
@@ -155,18 +192,18 @@
   <td style="text-align:right"> &theta;<sub>CM</sub>:</td>
   <td><Input type="text" style="width:60px" value="0" id='thetaCM' enterkeyhint="done"/></td> 
   <td>deg</td>
-  <td><Input type="range" min="0" max="50" step="0.1" value="0" style="width:600px" id='thetaCMRange'/> </td>
+  <td><Input type="range" min="0" max="50" step="0.1" value="0" class="slider" id='thetaCMRange'/> </td>
  </tr>
  <td style="text-align:right"> Array Pos:</td>
   <td><Input type="text" style="width:60px" value="-100" id='posArray' enterkeyhint="done"/></td> 
   <td>mm</td>
-  <td><Input type="range" min="-500" max="1000" step="1" value="-100" style="width:600px" id='posArrayRange'/> </td>
+  <td><Input type="range" min="-500" max="1000" step="1" value="-100" class="slider" id='posArrayRange'/> </td>
  </tr>
  <tr>
   <td style="text-align:right"> Recoil Pos:</td>
   <td><Input type="text" style="width:60px" value="1500" id='posRecoil' enterkeyhint="done"/></td> 
   <td>mm</td>
-  <td><Input type="range" min="0" max="2000" step="1" value="1500" style="width:600px" id='posRecoilRange'/> </td>
+  <td><Input type="range" min="0" max="2000" step="1" value="1500" class="slider" id='posRecoilRange'/> </td>
  </tr>
 </table>
 
@@ -178,17 +215,17 @@
   <table cellspacing="0" cellpadding="0">
     <tr>
       <td>
-      <div id="Plot_EZ" style="width:650px;height:600px;"></div>
+      <div id="Plot_EZ" class="plotStyle"></div>
       </td>
     </tr>
     <tr>
      <td>
-      <table style="float : center; padding-left: 70px">
+      <table>
         <tr> 
           <td>eRange:</td>
           <td><Input type="text" style="width:60px" value="12" id='eRange' enterkeyhint="done"/></td>
           <td>MeV</td>
-          <td><Input type="range" min="1" max="30" step="0.1" value="12" style="width:300px" id='eRangeSlider'/></td>
+          <td><Input type="range" min="1" max="30" step="0.1" value="12" class="plotSlider" id='eRangeSlider'/></td>
         </tr>
        </table>
      </td>
@@ -199,29 +236,29 @@
  <table cellspacing="0" cellpadding="0">
   <tr>
     <td>
-      <div id="Plot_RZ" style="width:650px;height:600px;"></div>
+      <div id="Plot_RZ" class="plotStyle"></div>
     </td>
   </tr>
   <tr>
    <td> 
-     <table style="float : center; padding-left: 70px">
+     <table>
       <tr> 
         <td>zRange(Min):</td>
         <td><Input type="text" style="width:60px" value="-200" id='zRange1' enterkeyhint="done"/></td>
         <td>mm</td>
-        <td><Input type="range" min="-2000" max="4000" step="1" value="-200" style="width:300px" id='zRange1Slider'/></td>
+        <td><Input type="range" min="-2000" max="4000" step="1" value="-200" class="plotSlider"  id='zRange1Slider'/></td>
       </tr>
       <tr> 
         <td>zRange(Max):</td>
         <td><Input type="text" style="width:60px" value="2000" id='zRange2' enterkeyhint="done"/></td>
         <td>mm</td>
-        <td><Input type="range" min="-2000" max="4000" step="1" value="2000" style="width:300px" id='zRange2Slider'/></td>
+        <td><Input type="range" min="-2000" max="4000" step="1" value="2000" class="plotSlider" id='zRange2Slider'/></td>
       </tr>
       <tr> 
         <td>rRange:</td>
         <td><Input type="text" style="width:60px" value="50" id='rRange' enterkeyhint="done"/></td>
         <td>mm</td>
-        <td><Input type="range" min="1" max="400" step="1" value="50" style="width:300px" id='rRangeSlider'/></td>
+        <td><Input type="range" min="1" max="400" step="1" value="50" class="plotSlider"  id='rRangeSlider'/></td>
       </tr>
      </table>
   </td>
@@ -237,11 +274,12 @@
 
 <!-- ===================================================== -->
 
-<hr style="height:4px;background-color:#F7CF3C; border-style:none; border-width:none">
+<!--
+<hr>
 
 <h1> DWBA and Monte Carlo Simulation (under construction...)</h1>
 
-  <table id="DWBATable">
+  <table id='DWBATable' style="border:1px solid; text-align:center;">
     <tr>
       <td> E<sub>x</sub> [MeV]</td>
       <td> J<sup>&#960;</sup></td>
@@ -252,6 +290,11 @@
      <td><input type="text" name="Jpi" size="5" value="3/2+" enterkeyhint="done"/></td>
      <td><input type="text" name="Orb" size="5" value="0d3/2" enterkeyhint="done"/></td>
     </tr>
+    </tr>
+     <td id='dwba2'>0</td>
+     <td><input type="text" name="Jpi" size="5" value="1/2+" enterkeyhint="done"/></td>
+     <td><input type="text" name="Orb" size="5" value="1s1/2" enterkeyhint="done"/></td>
+    </tr>
   </table>
 
   <p></p>
@@ -313,29 +356,24 @@
 
 <input type = "submit" value = "Run Simulation" style="width:200px;height:60px;font-size:20px" />
 
-<!--
-<div id='DWBAPlot'></div>
-<div></div>
-<div></div>
--->
-
 <p></p>
 <iframe style="border:none;"></iframe>
+-->
 
 <!-- ===================================================== -->
 
-<hr style="height:4px;background-color:#F7CF3C; border-style:none; border-width:none">
+<hr>
 <h4>This page is created and hosted by Fox's Lab (FSU) in collabortion with SOLARIS (FRIB).</h4>
 <h4>The SOLARIS project is based on HELIOS (ANL) and is leaded by ANL.</h4>
 <h4>The ISS (ISOLDE Solenoidal Spectrometer) is located as CERN.</h4>
 
-<a href="https://fsunuc.physics.fsu.edu" target="_blank"><img src="FSU_logo_640.png" width="150"></a>
-<a href="https://www.anl.gov/phy/solaris" target="_blank"><img src="SOLARIS_logo.png" height="150"></a>
-<a href="https://fribs.msu.edu/news/2021/solaris.html" target="_blank"><img src="FRIB_logo.jpg" height="150"></a>
-<a href="https://www.anl.gov/phy/helical-orbit-spectrometer" target="_blank"><img src="HELIOS_logo.jpg" height="150"></a>
-<a href="https://www.anl.gov/phy" target="_blank"><img src="ANL_logo.gif" height="150"></a>
-<a href="https://isolde-solenoidal-spectrometer.web.cern.ch/" target="_blank"><img src="ISS_logo.png" height="150"></a>
-<a href="https://home.cern/science/experiments/isolde" target="_blank"><img src="CERN_logo.svg" height="150"></a>
+<a href="https://fsunuc.physics.fsu.edu" target="_blank"><img src="FSU_logo_640.png"></a>
+<a href="https://www.anl.gov/phy/solaris" target="_blank"><img src="SOLARIS_logo.png"></a>
+<a href="https://fribs.msu.edu/news/2021/solaris.html" target="_blank"><img src="FRIB_logo.jpg"></a>
+<a href="https://www.anl.gov/phy/helical-orbit-spectrometer" target="_blank"><img src="HELIOS_logo.jpg"></a>
+<a href="https://www.anl.gov/phy" target="_blank"><img src="ANL_logo.gif"></a>
+<a href="https://isolde-solenoidal-spectrometer.web.cern.ch/" target="_blank"><img src="ISS_logo.png"></a>
+<a href="https://home.cern/science/experiments/isolde" target="_blank"><img src="CERN_logo.svg"></a>
 <p></p>
 Contact: Ryan Tang (rtang at fsu.edu)
 
@@ -350,8 +388,8 @@ function addRow() {
   let table = document.getElementById("ExTable"); 
   let nRow = table.rows.length;
   let row = table.insertRow(nRow-1);
-  row.innerHTML = '<td><input type="text" name="Ex" size="8" value=\"' + (nRow-2) + '\" id=\"Ex' + (nRow-1) + '\ enterkeyhint=\"done\""/></td> \
-                   <td><input type="text" name="thetaCM" size="8" value=\"10\" id=\"theta' + (nRow-1) + '\ enterkeyhint=\"done\""/></td> \
+  row.innerHTML = '<td><input type="text" name="Ex" size="8" value=\"' + (nRow-2) + '\" id=\"Ex' + (nRow-1) + '\" enterkeyhint=\"done\"/></td> \
+                   <td><input type="text" name="thetaCM" size="8" value=\"10\" id=\"theta' + (nRow-1) + '\" enterkeyhint=\"done\"/></td> \
                    <td></td> \
                    <td></td> \
                    <td></td> \
@@ -362,8 +400,15 @@ function addRow() {
                    <td></td> \
                    <td></td> \
                    <td></td>';
+  
   CalculateEZ();
   CalculateRZ();
+  
+  //let table2 = document.getElementById("DWBATable"); 
+  //row = table2.insertRow(nRow-1);
+  //row.innerHTML = '<td id=\"dwba' + (nRow-1) + '\">' + (nRow-2) + '</td> \
+  //   <td><input type="text" name="Jpi" size="5" value="3/2+" enterkeyhint="done"/></td> \
+  //   <td><input type="text" name="Orb" size="5" value="0d3/2" enterkeyhint="done"/></td>';
 }
 
 function deleteRow(){
@@ -374,13 +419,18 @@ function deleteRow(){
   }
   CalculateEZ();
   CalculateRZ();
+  
+  //let table2 = document.getElementById("DWBATable");
+  //if ( nRow > 3){
+  //   table2.deleteRow(nRow-2);
+  //}
 }
   
-var beam = []; //A, Z, Mass, Name
+var beam = []; //A, Z, Mass, Name, Sn, Sp, Sa
 var beamMass;
 var target= [];
 var light=[];
-var heavy=[];
+var heavy=[];  //A, Z, Mass, Name, Sn, Sp, Sa
 
 var beamEx;
 var BField;
@@ -450,6 +500,9 @@ function GetMassFromSym(AZ, id){
       beam[1] = parseInt(mass[1]);
       beam[2] = parseFloat(mass[2]);
       beam[3] = AZ;
+      beam[4] = parseFloat(mass[4]);
+      beam[5] = parseFloat(mass[5]);
+      beam[6] = parseFloat(mass[6]);
     }
     if( id == 1 ){
       target[0] = parseInt(mass[0]);
@@ -476,7 +529,10 @@ function GetMassFromAZ(A,Z){
   client.onreadystatechange = function() {
     let mass = client.responseText.split(",");
     heavy[2] = parseFloat(mass[2]);
-    heavy[3] = mass[3].replace(/\s/g, '');
+    heavy[3] = mass[3]?.trim();
+    heavy[4] = parseFloat(mass[4]);
+    heavy[5] = parseFloat(mass[5]);
+    heavy[6] = parseFloat(mass[6]);
   }
   client.open('GET', str, false);
   client.send();
@@ -484,20 +540,19 @@ function GetMassFromAZ(A,Z){
 }
 
 function GetMass(){
-  let beam_AZ = document.getElementById('beam').value;
-  GetMassFromSym(beam_AZ, 0);
-  let target_AZ = document.getElementById('target').value;
-  GetMassFromSym(target_AZ, 1);
-  let light_AZ = document.getElementById('light').value;
-  GetMassFromSym(light_AZ, 2);
+
+  GetMassFromSym(document.getElementById('beam').value, 0);
+  GetMassFromSym(document.getElementById('target').value, 1);
+  GetMassFromSym(document.getElementById('light').value, 2);
   
-  beamMass = beam[2];
+  beamMass = beam[2];  
   
   heavy[0] = beam[0]+target[0]-light[0];
   heavy[1] = beam[1]+target[1]-light[1];
   GetMassFromAZ(heavy[0], heavy[1]);
   
   document.getElementById('heavyName').innerHTML = heavy[3];
+  document.getElementById('heavySp').innerHTML = 'Sn: ' + heavy[4] + ' MeV, Sp: ' + heavy[5] + ' MeV, Sa : ' + heavy[6] + ' MeV';
   
   //document.getElementById('n0').innerHTML = beam[0] + "," + beam[1] + "," + beam[2]
   //document.getElementById('n1').innerHTML = target[0] + "," + target[1] + "," + target[2]
@@ -522,7 +577,7 @@ function CalConstants(){
   minKEA = (Math.pow(light[2] + heavy[2],2) - Math.pow(beam[2] + target[2],2))/2/target[2]/beam[0];
 
   document.getElementById('reactionName').innerHTML = reactionName;  
-  document.getElementById('minKEA').innerHTML = minKEA.toFixed(3);
+  document.getElementById('minKEA').innerHTML =  "min Beam Energy: " + minKEA.toFixed(3) + " MeV/u";
   document.getElementById('Q-value').innerHTML = Qvalue.toFixed(3);
 
   beam_k_lab = Math.sqrt(Math.pow(beam[2] + KE,2) - Math.pow(beam[2],2));  
@@ -689,11 +744,12 @@ function PlotEZ(){
     xaxis: {range: xRange, title: "Z [mm]", mirror : "allticks", linewidth : "1"},
     yaxis: {range: yRange, title: "Energy [MeV]" , mirror : "allticks", linewidth : "1"},  
     title: reactionName,
+    margin: { l: 40, r: 40, b : 40, t : 40},
     legend: {yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"  }
   };
   
   
-  Plotly.newPlot( "Plot_EZ", data, layout);
+  Plotly.newPlot( "Plot_EZ", data, layout, {responsive: true});
 
   PlotThetaCMLine(document.getElementById('thetaCM').value);
   PlotBore();
@@ -827,10 +883,11 @@ function PlotRZ(){
     yaxis: {range: yyy, title: "R [mm]" , mirror : "allticks", linewidth : "1"},  
     title: reactionName,
     showlegend : true,
-    legend: { yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"  }
+    margin: { l: 40, r: 40, b : 40, t : 40},
+    legend: { yanchor:"top", xanchor:"left", x:"0.01",y:"0.99"}
   };
   
-  Plotly.newPlot( "Plot_RZ", data, layout);
+  Plotly.newPlot( "Plot_RZ", data, layout, {responsive: true});
   
 }
 
diff --git a/index.html b/index.html
index 46b390e..e40df25 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,12 @@
 </head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<style>  
+<style> 
+  
+  :root{
+    --navWidth: 300px;
+  }
+   
   body {
     font-family: Arial, Helvetica, sans-serif;
   }
@@ -25,7 +30,7 @@
   }
   nav {
     float: left;
-    width : 400px;
+    width : var(--navWidth);
     height: 100vh;
     //background: #6DB33E;
     background: #1363A7;
@@ -34,7 +39,7 @@
   article {
     float: none;
     padding: 0px;
-    margin-left: 400px;
+    margin-left: var(--navWidth);
     height : 100vh;
     //background: #1363A7;
     background: #6DB33E;
@@ -42,8 +47,33 @@
   a {
     color : #F7CF3C;
   }
+  
+ .column1{
+  float : left;
+  width : 50%;
+  text-align:right;
+ }
+ .column2{
+  float : right;
+  width : 50%;
+  text-align: left;
+ }
+ .row:after {
+   content: "";
+   display: table;
+   clear: both;
+ }
  
   @media (max-width: 1000px) {
+    .column1 {
+      width: 100%;
+      height: 40%;
+      text-align:center;
+    }
+    .column2 {
+      width: 100%;
+      text-align:center;
+    }
     nav {
       width: 100%;
       height: auto;
@@ -62,107 +92,36 @@
 <body>
 
 <header>
-<table class="center">
-<tr>
-<td><img src="SOLARIS_logo.png"'''' width="300"></td>
-<td><span style="font-size:70px;">Simulation</span></td>
-</tr>
-</table>
+<div class="row">
+  <div class="column1"">
+    <img src="SOLARIS_logo.png" width="300">
+  </div>
+  <div class="column2">
+    <span style="font-size:70px;">Simulation</span>
+  </div>
+</div>
 </header>
 
 <section>
   
-  <nav>
-    <p> &nbsp; &nbsp; &nbsp; &nbsp; Intructions is <a href="instruction.html" target="uploaded">Here.</a></p>
-    
-    <!-- ////////////////////////////////////////// -->
-    <table>
-      <tr> 
-        <td>Download Sample files:</td>
-        <td style="text-align:left">
-          <a href="sample_files/reactionConfig_sample.txt" download="reactionConfig.txt">Reaction File</a>
-        </td>
-      </tr>
-      <tr> 
-        <td></td>
-        <td style="text-align:left">
-          <a href="sample_files/detectorGeo_SOLARIS_sample.txt" download="detectorGeo_SOLAIRS.txt">DetectorGeo (SOLARIS) File</a>
-        </td>
-      </tr>
-      <tr> 
-        <td></td>
-        <td style="text-align:left">
-          <a href="sample_files/detectorGeo_HELIOS_sample.txt" download="detectorGeo_HELIOS.txt">DetectorGeo (HELIOS) File</a>
-        </td>
-      </tr>
-      <tr>
-        <td></td>
-        <td style="text-align:left">
-          <a href="sample_files/Ex_sample.txt" download="Ex.txt">Ex File</a>
-        </td>
-      </tr>
-      <tr>
-        <td></td>
-        <td style="text-align:left">
-          <a href="sample_files/DWBA_sample.txt" download="DWBA">DWBA File</a>
-        </td>
-      </tr>
-      <tr>
-        <td></td>
-        <td style="text-align:left">
-          <a href="sample_files/PlotConfig_sample.txt" download="PlotConfig.txt">Plot Config File</a>
-        </td>
-      </tr>
-    </table>
-    
-    <p></p><!-- ////////////////////////////////////////// -->
-    <form enctype = "multipart/form-data" action = "Simulation_gateway.py" method = "post" target="uploaded">
-      <table>
-        <tr> 
-          <td style="text-align:right" width="200">Reaction File </td> 
-          <td><input type = "file" name = "filename1" /> </td>
-        </tr>
-        <tr> 
-          <td style="text-align:right" width="200">DetectorGeo File </th>
-          <td><input type = "file" name = "filename2" /> </td>
-        </tr>
-        <tr> 
-          <td style="text-align:right" width="200">Ex File </th>
-          <td><input type = "file" name = "filename3" /> </td>
-        </tr>
-        <tr> 
-          <td style="text-align:right" width="200">DWBA File ^ </th>
-          <td><input type = "file" name = "filename4" /> </td>
-        </tr>
-        <tr> 
-          <td style="text-align:right" width="200">*.in File ^ </th>
-          <td><input type = "file" name = "filename4a" /> </td>
-        </tr>
-        <tr> 
-          <td style="text-align:right" width="200">Plot Config File * </th>
-          <td><input type = "file" name = "filename5" /> </td>
-        </tr>
-        <tr>
-          <td>^ can be alone <br>* can be omitted</th>
-          <td><input type = "submit" value = "Upload & Run Simulation" style="height:50px; width:200px"/> </td>
-        </tr>
-       </table>
-    </form>
+  <nav  id="nav">
+    <p> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; Intructions is <a href="instruction.html" target="uploaded">Here.</a></p>
     
     <p></p>
     <table>
+       <tr>
+         <td style="text-align:right"> HELIOSmatics : </td>
+         <td><a href="heliosmatics.html" target="uploaded">Click Here.</a></td>
+       </tr>
        <tr>
          <td style="text-align:right">Simplfied Input : </td>
          <td><a href="simpleSim.html" target="uploaded">Click Here.</a></td>
        </tr>
        <tr>
-         <td style="text-align:right"> &nbsp;&nbsp;Misc. Calulations : </td>
+         <td style="text-align:right"> &nbsp;&nbsp;&nbsp;Misc. Calulations : </td>
          <td><a href="miscCal.html" target="uploaded">Click Here.</a></td>
        </tr>
-       <tr>
-         <td style="text-align:right"> HELIOSmatics : </td>
-         <td><a href="heliosmatics.html" target="uploaded">Click Here.</a></td>
-       </tr>
+
     <table>    
 
     <p></p><!-- ////////////////////////////////////////// -->
@@ -170,7 +129,7 @@
       <table>
         <tr>
           <td style="text-align:right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Isotopes Name:</td>
-          <td><input type = "text" name = "isotopes_name" size="13" value="18O"/></td>
+          <td><input type = "text" name = "isotopes_name" size="13" value="24F"/></td>
         </tr>
         <tr>
           <td style="text-align:right">Max Ex [MeV]:</td>
@@ -185,16 +144,47 @@
       </table>
     </form>
         
-    <iframe name="NuclearData" style="border:none" width="400" height="40%"></iframe>
+    <iframe name="NuclearData" style="border:none;width:100%;height:100%" ></iframe>
     
   </nav>
 
   <!-- ////////////////////////////////////////// -->
-  <article>
-      <iframe name="uploaded" style="border:none;" width="100%" height= "100%" src="instruction.html"></iframe>
+  <article id="article">
+      <iframe id="main" name="uploaded" style="border:none;width:100%;"  src="instruction.html"></iframe>
   </article>
 </section>
 
+<script>
+var frame = document.getElementById("main");
+var frameNav = document.getElementById("nav");
+var frameArticle = document.getElementById("article");
+
+var x = window.matchMedia("(max-width: 1000px)");  
+
+adjustHeight();
+
+x.addListener(adjustHeight);
+
+function adjustHeight(){
+  var hhh = frame.contentWindow.document.body.scrollHeight * 1.1 + 'px';
+  
+  frame.style.height = hhh;
+  frameArticle.style.height = hhh;
+  
+  if( x.matches){
+    frameNav.style.height = "40%";
+  }else{
+    frameNav.style.height = hhh;
+  }
+  
+}
+
+
+frame.onload = adjustHeight;
+
+
+
+</script>
 
 </body>
 </html>
diff --git a/instruction.html b/instruction.html
index 9e19702..cbceef7 100644
--- a/instruction.html
+++ b/instruction.html
@@ -15,15 +15,10 @@
 <h1>Intructions:</h1>
 <p>
   <ul>
-  <li>The easiest way is use the <a href="simpleSim.html" target="uploaded">Simplied Interface</a>
+  <li>Use the <a href="heliosmatics.html" target="uploaded">HELIOSmatics</a> to check the detector and field settings.</li>
+  <li>The easiest way to do DWBA and Monte Carlo Simulation is use the <a href="simpleSim.html" target="uploaded">Simplied Interface</a>
   <li>The kenimatic calculation is documented in <a href="https://wiki.anl.gov/wiki_heliosdaq/images/3/3f/Kinematics_of_HELIOS.pdf" target="_blank" >Here</a>.</li>
   <li>The DWBA calucation is using Ptolemy. <a href="https://www.phy.anl.gov/theory/research/ptolemy/" target="_blank">Here</a> for more detail. </li>
-  <li>File name can be customized.</li>
-  <li>For kinematic simulation, only the reactionConfig.txt, detectorGeo.txt, and Ex.txt are needed.</li>
-  <li>For DWBA calculation, only the DWBA file is needed.</li>
-  <li>When the DWBA file is presented, the kinematic simulation will use the DWBA result and also the excitation energy. i.e. the user provide Ex.txt will not be used.</li>
-  <li>User can use a customs in File for DWBA calculation. Once the in File exist, it ignores the DWBA file.</li>
-  <li>To change DWBA angular range, download the in file, edit it. But becareful, DWBA for kinematic simulation must be 0 -180 deg.</li>
   <li>Past calculations can be found <a href="files/" target="uploaded">Here</a></li>
   </ul>
 </p>
@@ -33,13 +28,9 @@
 
 <h2> Todo : </h2>
 <ul>
- <li>Better descriptions of the input files</li>
- <li>Finsih the simiple input</li>
  <li>File name of the images of past calculations include reaction</li>
  <li>Change the legend position of the DWBA calcualtion</li> 
- <li>Use interactibe root canvas</li>
  <li>A 3-D simulation? </li>
- <li>modified transfer.root, so it store the position of maximum radius of the heavy recoil </li> 
 </ul>
 
 </body>
diff --git a/massProxy.py b/massProxy.py
index 3fa6750..d50e8d8 100755
--- a/massProxy.py
+++ b/massProxy.py
@@ -32,7 +32,17 @@ if result != "":
   p1 = result.find('Mass:')
   p2 = result.find('Name:')
   p2a = result.find('|')
-  print(int(result[pA+2:pA+5]), ",", int(result[pZ+2:pZ+5]), ",", float(result[p1+5:p1+13+5]), ",", result[p2+5: p2a])
+  pSn = result.find('Sn:')
+  pSp = result.find('Sp:')
+  pSa = result.find('Sa:')
+  print(int(result[pA+2:pA+5])
+     , ",",int(result[pZ+2:pZ+5])
+     , ",",float(result[p1+5:p1+13+5])
+     , ",",result[p2+5: p2a] 
+     , ",", float(result[pSn+3:pSn+16])
+     , ",", float(result[pSp+3:pSp+16])
+     , ",", float(result[pSa+3:pSa+16])
+    )
   
 else:
   print("error");
diff --git a/miscCal.html b/miscCal.html
index e97ec9b..e080a2a 100644
--- a/miscCal.html
+++ b/miscCal.html
@@ -30,14 +30,14 @@
    <td style="text-align:right">Attenuation:</td>
    <td><input type="text" id="att" size="10" value="1e+4"/> </td>
   </tr>
-  <tr>
+  <tr style="text-align:center">
     <td>enA </td>
     <td>pnA </td>
     <td>pps </td>
     <td>att. pps </td>
   </tr>
   <tr>
-    <td><input type="text" id='enA' size="10"/></td>
+    <td><input type="text" id='enA' size="10" value="6"/></td>
     <td><input type="text" id="pnA" size="10"/></td>
     <td><input type="text" id="pps" size="10"/></td>
     <td width="100"></td>
@@ -178,6 +178,9 @@ function yieldCal(type){
 
 }
 
+convert(1);
+yieldCal(1);
+
 
 document.getElementById('enA').addEventListener('keypress', 
   function(e){
diff --git a/simpleSim.html b/simpleSim.html
index fd9bb30..d9e7983 100644
--- a/simpleSim.html
+++ b/simpleSim.html
@@ -147,6 +147,96 @@
 <input type = "submit" value = "Submit and Run Simulation" style="width:200px;height:60px;" />
 </form>
 
+<hr style="height:4px;background-color:#F7CF3C; border-style:none; border-width:none">
+
+<h2>Advanced control</h2>
+
+    <!-- ////////////////////////////////////////// -->
+    <table>
+      <tr> 
+        <td>Download Sample files:</td>
+        <td style="text-align:left">
+          <a href="sample_files/reactionConfig_sample.txt" download="reactionConfig.txt">Reaction File</a>
+        </td>
+      </tr>
+      <tr> 
+        <td></td>
+        <td style="text-align:left">
+          <a href="sample_files/detectorGeo_SOLARIS_sample.txt" download="detectorGeo_SOLAIRS.txt">DetectorGeo (SOLARIS) File</a>
+        </td>
+      </tr>
+      <tr> 
+        <td></td>
+        <td style="text-align:left">
+          <a href="sample_files/detectorGeo_HELIOS_sample.txt" download="detectorGeo_HELIOS.txt">DetectorGeo (HELIOS) File</a>
+        </td>
+      </tr>
+      <tr>
+        <td></td>
+        <td style="text-align:left">
+          <a href="sample_files/Ex_sample.txt" download="Ex.txt">Ex File</a>
+        </td>
+      </tr>
+      <tr>
+        <td></td>
+        <td style="text-align:left">
+          <a href="sample_files/DWBA_sample.txt" download="DWBA">DWBA File</a>
+        </td>
+      </tr>
+      <tr>
+        <td></td>
+        <td style="text-align:left">
+          <a href="sample_files/PlotConfig_sample.txt" download="PlotConfig.txt">Plot Config File</a>
+        </td>
+      </tr>
+    </table>
+    
+    <p></p><!-- ////////////////////////////////////////// -->
+    <form enctype = "multipart/form-data" action = "Simulation_gateway.py" method = "post" target="uploaded">
+      <table>
+        <tr> 
+          <td style="text-align:right" width="200">Reaction File </td> 
+          <td><input type = "file" name = "filename1" /> </td>
+        </tr>
+        <tr> 
+          <td style="text-align:right" width="200">DetectorGeo File </th>
+          <td><input type = "file" name = "filename2" /> </td>
+        </tr>
+        <tr> 
+          <td style="text-align:right" width="200">Ex File </th>
+          <td><input type = "file" name = "filename3" /> </td>
+        </tr>
+        <tr> 
+          <td style="text-align:right" width="200">DWBA File ^ </th>
+          <td><input type = "file" name = "filename4" /> </td>
+        </tr>
+        <tr> 
+          <td style="text-align:right" width="200">*.in File ^ </th>
+          <td><input type = "file" name = "filename4a" /> </td>
+        </tr>
+        <tr> 
+          <td style="text-align:right" width="200">Plot Config File * </th>
+          <td><input type = "file" name = "filename5" /> </td>
+        </tr>
+        <tr>
+          <td>^ can be alone <br>* can be omitted</th>
+          <td><input type = "submit" value = "Upload & Run Simulation" style="height:50px; width:200px"/> </td>
+        </tr>
+       </table>
+    </form>
+    
+<ul>
+  <li>File name can be customized.</li>
+  <li>For kinematic simulation, only the reactionConfig.txt, detectorGeo.txt, and Ex.txt are needed.</li>
+  <li>For DWBA calculation, only the DWBA file is needed.</li>
+  <li>When the DWBA file is presented, the kinematic simulation will use the DWBA result and also the excitation energy. i.e. the user provide Ex.txt will not be used.</li>
+  <li>User can use a customs in File for DWBA calculation. Once the in File exist, it ignores the DWBA file.</li>
+  <li>To change DWBA angular range, download the in file, edit it. But becareful, DWBA for kinematic simulation must be 0 -180 deg.</li>
+</ul>
+
+
+</body>
+
 
 <script>
 function addRow() {
@@ -165,11 +255,6 @@ function deleteRow(){
      table.deleteRow(nRow-2);
   }
 }
-
-
-
 </script>
 
-
-</body>
 </html>