diff --git a/heliosmatics.html b/heliosmatics.html
index 4b4687e..d76544c 100644
--- a/heliosmatics.html
+++ b/heliosmatics.html
@@ -2,9 +2,9 @@
 <html>
 <head>
 <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.">
+<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;"/>
+<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no, user-scalable=0"/>
 </head>
 <style>
   body{
@@ -215,6 +215,9 @@
       </td>
     </tr>
     <tr> <td>&nbsp;</td></tr>
+    <tr>          
+      <td> &nbsp;zRange can be changed by Array position.</td>
+    </tr>
     <tr>
      <td>
       <table>
@@ -272,6 +275,39 @@
 <p id="n2"></p>
 <p id="n3"></p>
 
+<hr>
+
+<h1>&theta;<sub>CM</sub> Calculator</h1>
+
+The calculation only give &theta;<sub>CM</sub> after the bending.
+<p></p>
+
+<table>
+  <tr>
+    <td>Ex [MeV] : </td>
+    <td><Input type="text" style="width:60px" value="0" id='Ex0' enterkeyhint="done"/></td>
+    <td>&theta;<sub>CM</sub> Gate [deg] : </td>
+    <td><Input type="text" style="width:60px" value="10" id='thetaCMGate' enterkeyhint="done"/></td>
+    <td>X Gate [%] : </td>
+    <td><Input type="text" style="width:60px" value="95" id='XGate' enterkeyhint="done"/></td>
+  </tr>
+  <tr>
+    <table id='thetaCMTable' style="border:1px solid; text-align:center;">
+      <tr>
+        <td style="width:30px"><b>ID</b></td>
+        <td style="width:120px"><b>pos<sub>0</sub>(gated)</b></td>
+        <td style="width:120px"><b>pos<sub>1</sub>(gated)</b></td>
+        <td style="width:60px"><b>&theta;<sub>1</sub>[deg]</b></td>
+        <td style="width:60px"><b>&theta;<sub>2</sub>[deg]</b></td>
+        <td style="width:60px"><b>&theta;<sub>avg</sub>[deg]</b></td>
+        <td style="width:60px"><b>&Delta;&theta;[deg]</b></td>
+        <td style="width:100px"><b>sin(&theta;<sub>avg</sub>)&Delta;&theta;</b></td>
+      </tr>
+    </table>
+  </tr>
+</table>
+
+
 <!-- ===================================================== -->
 
 <!--
@@ -362,6 +398,9 @@
 
 <!-- ===================================================== -->
 
+<hr>
+HELIOSmatics was first built by Ben P. Kay in MS Excel around 2010. It was modified by Ryan Tang later. And now it migrated to the web on Dec, 2022.
+
 </body>
 
 <!-- ######################################################################################### -->
@@ -435,6 +474,7 @@ var arrayLen = 50 * 10 + 2 * 9 // SOLARIS
 var detLen = 50; // SOLARIS
 var nDet = 10; // SOLARIS
 var detGap = 2; // SOLARIS
+var arrayPos = [];
 
 const c = 299.792468; // mm/ns
 
@@ -581,6 +621,22 @@ function CalConstants(){
 
 }
 
+function CalArrayPos(){
+  let haha = parseFloat(document.getElementById('posArray').value);
+  arrayPos = [];
+  for( let i = 0; i < nDet; i++){
+    let kaka = [];
+    if( haha < 0 ){
+      kaka.push(haha - (i+1) * detLen - i * detGap);
+      kaka.push(haha - (i) * detLen - i * detGap);
+    }else{
+      kaka.push(haha + (i) * detLen + i * detGap);
+      kaka.push(haha + (i+1) * detLen + i * detGap);
+    }
+    arrayPos.push(kaka);
+  }
+}
+
 function SetSSType(){
   let helios = document.getElementById('HELIOS').checked;
   let solaris = document.getElementById('SOLARIS').checked;
@@ -606,6 +662,7 @@ function SetSSType(){
   }
   arrayLen = detLen * nDet + detGap * (nDet-1);
   
+  CalArrayPos();
   //document.getElementById('n1').innerHTML = perpDistant;
 }
 
@@ -646,7 +703,7 @@ function CalculateEZ(){
     
     let rho = k_cm * ss/c/light[1]/Math.abs(BField) * 1000; // mm
     rhoList.push(rho);
-    let Zb = Zb0 * (1- Math.asin(perpDistant/rho)/2/Math.PI);
+    let Zb = Zb0 * (1- Math.asin(perpDistant/rho/2)/Math.PI);
     
     let thetaLab = 180 - Math.atan2(k_cm * ss, gamma * (beta * qb - k_cm * cs)) * 180/Math.PI;
     
@@ -677,9 +734,9 @@ function CalculateEZ(){
     
     for( let j = 0; j < 100 ; j++){
       let thetaCM = Math.PI/Math.log10(100) * Math.log10(100/(100-j)) ;
-      let temp = 2* Math.PI * ez_slope / beta / k_cm * perpDistant / Math.sin(thetaCM); 
+      let temp =  Math.PI * ez_slope / beta / k_cm * perpDistant / Math.sin(thetaCM); // perpDistant / 2/ rho(thetaCM)
       if( !isFinite(temp) ) continue;
-      let pxTemp = beta /ez_slope * (gamma * beta * qb - gamma * k_cm * Math.cos(thetaCM)) * (1 - Math.asin(temp)/Math.PI/2) ;
+      let pxTemp = 1. /alpha * (gamma * beta * qb - gamma * k_cm * Math.cos(thetaCM)) * (1 - Math.asin(temp)/Math.PI) ;
       let pyTemp = gamma * qb - light[2] - gamma * beta * k_cm * Math.cos(thetaCM);
       if( !isNaN(pxTemp) && !isNaN(pyTemp) ){
         xxx.push(pxTemp);
@@ -879,6 +936,89 @@ function PlotRZ(){
   
 }
 
+function CalZ(theta, k_cm, qb){
+  let cs = Math.cos(theta*Math.PI/180.);
+  let ss = Math.sin(theta*Math.PI/180.);
+    
+  let Zb0 = (gamma*beta* qb - gamma * k_cm * cs )/alpha; //mm
+  let rho = k_cm * ss / c/ light[1]/ Math.abs(BField) * 1000; // mm
+     
+  return  Zb0 * ( 1 - Math.sin( perpDistant/2/rho ) / Math.PI );
+}
+
+function SearchThetaCM(Z, thetaMin, k_cm, qb){
+  
+  let step = 0.01;
+  
+  for( let yy = thetaMin; yy < 180; yy += step){
+    if( yy > 12 ) step = 0.1;
+    if( yy > 20 ) step = 0.5;
+    if( yy > 40 ) step = 1.0;
+    let z1 = CalZ(yy, k_cm, qb);
+    let z2 = CalZ(yy+step, k_cm, qb);
+    //console.log(Z, ", ", yy.toFixed(3), ", ", z1.toFixed(3), ", ", z2.toFixed(3), ", ", (z2-z1).toFixed(3) );
+    if( z1 > z2 ){ /// in the bending range
+      continue;
+    }else{
+      if( Z < z1 ){
+      //  return yy;
+        break;
+      }
+      if( z1<= Z && Z <= z2 ){ // do a linear approximation
+        return (Z-z1)/(z2-z1)*step + yy;
+      }
+    }
+  }
+  return NaN;
+}
+
+function CalThetaCM(){
+  let ex = parseFloat(document.getElementById('Ex0').value);
+  let angGate = parseFloat(document.getElementById('thetaCMGate').value);
+  let xGate = parseFloat(document.getElementById('XGate').value);
+
+  CalArrayPos();
+  
+  let haha1 = E_tot_cm*E_tot_cm - Math.pow(heavy[2] + ex + light[2],2);
+  let haha2 = E_tot_cm*E_tot_cm - Math.pow(heavy[2] + ex - light[2],2);
+  let k_cm = Math.sqrt(haha1*haha2)/2/E_tot_cm;
+  let qb = Math.sqrt(light[2]*light[2]+k_cm*k_cm);
+  
+  let table = document.getElementById('thetaCMTable');
+  let nRow = table.rows.length;
+  if( nRow > 1 ){
+    for( let i = nRow-1; i > 0; i -- ){
+      table.deleteRow(i);
+    }
+  }
+
+  for( let i = 0; i < arrayPos.length; i++){
+    let row = table.insertRow(i+1);
+    row.insertCell().innerHTML = i;
+    
+    let p1 = (arrayPos[i][0] + detLen * (100. - xGate)/200.);
+    let p2 = (arrayPos[i][1] - detLen * (100. - xGate)/200.);
+    
+    row.insertCell().innerHTML = arrayPos[i][0] + "(" + p1  + ")";
+    row.insertCell().innerHTML = arrayPos[i][1] + "(" + p2  + ")";
+    
+    ///Search thetaCM for Z
+    let a1 = SearchThetaCM(p1, angGate, k_cm, qb);
+    let a2 = SearchThetaCM(p2, angGate, k_cm, qb);
+    row.insertCell().innerHTML = a1.toFixed(2);
+    row.insertCell().innerHTML = a2.toFixed(2);
+    
+    let am = (a2+a1)/2;
+    let da = Math.abs(a2-a1);
+    
+    row.insertCell().innerHTML = am.toFixed(2);
+    row.insertCell().innerHTML = da.toFixed(2);
+    row.insertCell().innerHTML = (Math.sin(am*Math.PI/180) * da * Math.PI/180).toExponential(2);
+    
+  }
+  
+}
+
 document.getElementById('beam').addEventListener('keypress', 
   function(e){
     if(e.keyCode == 13){
@@ -922,6 +1062,7 @@ document.getElementById('BField').addEventListener('keypress',
       CalConstants();
       CalculateEZ();
       CalculateRZ();
+      CalThetaCM();
     }
   }, false
 );
@@ -932,6 +1073,7 @@ document.getElementById('BRange').oninput = function(){
   CalculateEZ();
   CalculateRZ();
   AdjustRangeEZ();
+  CalThetaCM();
 }
 
 document.getElementById('KEA').addEventListener('keypress', 
@@ -941,6 +1083,7 @@ document.getElementById('KEA').addEventListener('keypress',
       CalConstants();
       CalculateEZ();
       CalculateRZ();
+      CalThetaCM();
     }
   }, false
 );
@@ -950,6 +1093,7 @@ document.getElementById('KEARange').oninput = function(){
   CalConstants();
   CalculateEZ();
   CalculateRZ();
+  CalThetaCM();
 }
 
 document.getElementById('thetaCM').addEventListener('keypress', 
@@ -958,7 +1102,6 @@ document.getElementById('thetaCM').addEventListener('keypress',
       document.getElementById('thetaCMRange').value = this.value;
       CalConstants();
       CalculateEZ();
-      CalculateRZ()
     }
   }, false
 );
@@ -967,33 +1110,17 @@ document.getElementById('thetaCMRange').oninput = function(){
   document.getElementById('thetaCM').value = this.value;
   CalConstants();
   CalculateEZ();
-  CalculateRZ()
 }
 
 function AdjustRangeEZ(){
   let haha = parseFloat(document.getElementById('posArray').value);
-  
   let xStart = (haha < 0 ? haha - arrayLen - 100 : haha - 100);
   let xEnd = (haha < 0 ? haha + 100: haha + arrayLen + 100);
   
+  CalArrayPos();
+  
   xRange = [xStart, xEnd];
-  
-  let haha2 = parseFloat(document.getElementById('eRangeSlider').value);
-  
-  yRange = [0, haha2];
-  
-  let pos = [];
-  for( let i = 0; i < nDet; i++){
-    let kaka = [];
-    if( haha < 0 ){
-      kaka.push(haha - (i+1) * detLen - i * detGap);
-      kaka.push(haha - (i) * detLen - i * detGap);
-    }else{
-      kaka.push(haha + (i+1) * detLen + i * detGap);
-      kaka.push(haha + (i) * detLen + i * detGap);
-    }
-    pos.push(kaka);
-  }
+  yRange = [0, parseFloat(document.getElementById('eRangeSlider').value)];
   
   //document.getElementById('n0').innerHTML = pos;
   //document.getElementById('n2').innerHTML = arrayLen;
@@ -1005,8 +1132,8 @@ function AdjustRangeEZ(){
       type: 'rect', 
       xref: 'x', 
       yref: 'paper', 
-      x0 : pos[i][0], 
-      x1 : pos[i][1], 
+      x0 : arrayPos[i][0], 
+      x1 : arrayPos[i][1], 
       y0 : 0,
       y1 : 1,
       fillcolor : '#9999FF',
@@ -1029,6 +1156,7 @@ document.getElementById('posArray').addEventListener('keypress',
       document.getElementById('posArrayRange').value = this.value;
       AdjustRangeEZ();
       AdjustRecoilPos();
+      CalThetaCM();
     }
   }, false
 );
@@ -1037,6 +1165,7 @@ document.getElementById('posArrayRange').oninput = function(){
   document.getElementById('posArray').value = this.value;
   AdjustRangeEZ();
   AdjustRecoilPos();
+  CalThetaCM();
 }
 
 function AdjustRecoilPos(){
@@ -1058,28 +1187,14 @@ function AdjustRecoilPos(){
       line : { width : 0} 
   };
   
-  let haha = parseFloat(document.getElementById('posArray').value);
-  
-  let pos = [];
-  for( let i = 0; i < nDet; i++){
-    let kaka = [];
-    if( haha < 0 ){
-      kaka.push(haha - (i+1) * detLen - i * detGap);
-      kaka.push(haha - (i) * detLen - i * detGap);
-    }else{
-      kaka.push(haha + (i+1) * detLen + i * detGap);
-      kaka.push(haha + (i) * detLen + i * detGap);
-    }
-    pos.push(kaka);
-  }
   let totalShape = [];
   for( let i = 0; i < nDet; i++){
     let newhaha = {
       type: 'rect', 
       xref: 'x', 
       yref: 'y', 
-      x0 : pos[i][0], 
-      x1 : pos[i][1], 
+      x0 : arrayPos[i][0], 
+      x1 : arrayPos[i][1], 
       y0 : 0,
       y1 : perpDistant,
       fillcolor : '#9999FF',
@@ -1205,6 +1320,7 @@ window.addEventListener('keypress', FuncThetaCM);
 window.checkSSType = function(){
   SetSSType();
   CalculateEZ();
+  CalThetaCM();
 }
 
 var FuncCheckSSType = window.checkSSType.bind(null, "SSType");
@@ -1212,6 +1328,29 @@ document.getElementById('HELIOS').addEventListener('click', FuncCheckSSType);
 document.getElementById('SOLARIS').addEventListener('click', FuncCheckSSType);
 document.getElementById('ISS').addEventListener('click', FuncCheckSSType);
 
+document.getElementById('Ex0').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      CalThetaCM();
+    }
+  }, false
+);
+
+document.getElementById('thetaCMGate').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      CalThetaCM();
+    }
+  }, false
+);
+
+document.getElementById('XGate').addEventListener('keypress', 
+  function(e){
+    if(e.keyCode == 13){
+      CalThetaCM();
+    }
+  }, false
+);
 
 GetMass();
 CalConstants();
@@ -1219,6 +1358,7 @@ SetSSType();
 CalculateEZ();
 CalculateRZ();
 AdjustRecoilPos();
+CalThetaCM();
 </script>
 
 
diff --git a/miscCal.html b/miscCal.html
index e080a2a..fef997f 100644
--- a/miscCal.html
+++ b/miscCal.html
@@ -101,7 +101,6 @@
   </tr>
 </table>
 
-
 </body>
 
 <script>
