diff --git a/SuperScriptViewer/static/converter.js b/SuperScriptViewer/static/converter.js
index e69de29..c7f6ce0 100644
--- a/SuperScriptViewer/static/converter.js
+++ b/SuperScriptViewer/static/converter.js
@@ -0,0 +1,136 @@
+// ============================= conv 1
+
+function doConv1_I2O() {
+    var textSp = $("#conv1Input").val().split("\n");
+    var result = new Array();
+
+    for (var index = 0; index < textSp.length; index++) {
+        var lines = textSp[index];
+        var successful = true;
+        var resultCache = new Array();
+
+        lineSp = lines.split(',');
+        var innerIndex = lineSp.length - 1;
+        for (var forwardIndex = 0; forwardIndex < lineSp.length; forwardIndex++) {
+            var words = lineSp[forwardIndex];
+            words = words.trim().toLowerCase();
+            if (!checkByteUnit(words)){
+                resultCache.length = 0;
+                successful = false;
+                break;
+            } else 
+                resultCache[innerIndex] = words;
+            innerIndex--;            
+        }
+
+        if (successful) 
+            result[index] = resultCache.join(", ");
+        else
+            result[index] = "";
+
+    }
+
+    $("#conv1Output").val(result.join("\n"));
+}
+
+// ============================= conv 2
+
+function doConv2_I2O() {
+    var textSp = $("#conv2Input").val().split("\n");
+    var result = new Array();
+
+    for (var index = 0; index < textSp.length; index++) {
+        var lines = textSp[index];
+        var successful = true;
+        var resultCache = "";
+
+        lineSp = lines.split(',');
+        var innerIndex = lineSp.length - 1;
+        for (var forwardIndex = 0; forwardIndex < lineSp.length; forwardIndex++) {
+            var words = lineSp[forwardIndex];
+            words = words.trim().toLowerCase();
+            if (!checkByteUnit(words)){
+                resultCache.length = 0;
+                successful = false;
+                break;
+            } else 
+                resultCache = words.substr(2, 2) + resultCache;
+            innerIndex--;            
+        }
+
+        if (successful) 
+            result[index] = resultCache;
+        else
+            result[index] = "";
+
+    }
+
+    $("#conv2Output").val(result.join("\n"));
+}
+
+function doConv2_O2I() {
+    
+}
+
+// ============================= conv 3
+
+function doConv3_I2O() {
+    var textSp = $("#conv3Input").val().split("\n");
+    var result = new Array();
+
+    for (var index = 0; index < textSp.length; index++) {
+        var lines = textSp[index];
+        var successful = true;
+        var resultCache = "";
+
+        lineSp = lines.split(',');
+        var innerIndex = lineSp.length - 1;
+        for (var forwardIndex = 0; forwardIndex < lineSp.length; forwardIndex++) {
+            var words = lineSp[forwardIndex];
+            words = words.trim().toLowerCase();
+            if (!checkByteUnit(words)){
+                resultCache.length = 0;
+                successful = false;
+                break;
+            } else 
+                resultCache = words.substr(2, 2) + resultCache;
+            innerIndex--;            
+        }
+
+        if (successful) {
+            var bigInt = BigInt("0x" + resultCache);
+            result[index] = bigInt.toString(10);
+        }
+        else
+            result[index] = "";
+
+    }
+
+    $("#conv3Output").val(result.join("\n"));
+}
+
+function doConv3_O2I() {
+
+}
+
+// ============================= conv 4
+
+function doConv4_I2O() {
+    $("#conv4Output").val($("#conv4Input").val().toUpperCase());
+}
+
+function doConv4_O2I() {
+    $("#conv4Input").val($("#conv4Output").val().toLowerCase());
+}
+
+// ============================= utils
+
+function checkByteUnit(s) {
+    var legalWords = "0123456789abcdefABCDEF";
+    if (s.length != 4) return false;
+    if (s[0] != '0') return false;
+    if (s[1] != 'x') return false;
+    if (legalWords.indexOf(s[2]) == -1) return false;
+    if (legalWords.indexOf(s[3]) == -1) return false;
+    return true;
+}
\ No newline at end of file
diff --git a/SuperScriptViewer/templates/help/converter.html b/SuperScriptViewer/templates/help/converter.html
index 0d2a978..0138748 100644
--- a/SuperScriptViewer/templates/help/converter.html
+++ b/SuperScriptViewer/templates/help/converter.html
@@ -12,7 +12,7 @@
 
 <body>
 <h1>Converter</h1>
-<p>This page provide some useful converter for your decoding work. All converter is interactive..</p>
+<p>This page provide some useful converter for your decoding work.</p>
 <br />
 
 <div style="display: flex; flex-flow: row; height: 30px; width: 100%; margin: 0; padding: 0; border-bottom: 1px solid black;">
@@ -28,23 +28,23 @@
         Support multi-input. Use line break to split each input.</p>
         <table>
             <tr>
-                <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
+                <th colspan="3" style="height: 150px;"><textarea id="conv1Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
             </tr>
             <tr>
                 <td align="left">Input</td>
                 <th colspan="2">&nbsp;</th>
             </tr>
             <tr>
-                <td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
+                <td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv1_I2O();">v</button></td>
                 <td style="width: 150px;">&nbsp;</td>
-                <td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
+                <td style="width: 100px;" align="right">&nbsp;</td>
             </tr>
             <tr>
                 <th colspan="2">&nbsp;</th>
                 <td align="right">Output</td>
             </tr>
             <tr>
-                <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;" readonly="true"></textarea></th>
+                <th colspan="3" style="height: 150px;"><textarea id="conv1Output" style="width: 100%; height: 100%; resize: none;" readonly="true"></textarea></th>
             </tr>
         </table>
 </div>
@@ -55,23 +55,23 @@
         Support multi-input. Use line break to split each input.</p>
         <table>
             <tr>
-                <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
+                <th colspan="3" style="height: 150px;"><textarea id="conv2Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
             </tr>
             <tr>
                 <td align="left">Byte array</td>
                 <th colspan="2">&nbsp;</th>
             </tr>
             <tr>
-                <td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
+                <td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv2_I2O();">v</button></td>
                 <td style="width: 150px;">&nbsp;</td>
-                <td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
+                <td style="width: 100px;" align="right"><button style="width: 50px;" onclick="doConv2_O2I();">^</button></td>
             </tr>
             <tr>
                 <th colspan="2">&nbsp;</th>
                 <td align="right">HEX number</td>
             </tr>
             <tr>
-                <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
+                <th colspan="3" style="height: 150px;"><textarea id="conv2Output" style="width: 100%; height: 100%; resize: none;"></textarea></th>
             </tr>
         </table>
 </div>
@@ -82,23 +82,23 @@
         Support multi-input. Use line break to split each input.</p>
         <table>
             <tr>
-                <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
+                <th colspan="3" style="height: 150px;"><textarea id="conv3Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
             </tr>
             <tr>
                 <td align="left">Byte array</td>
                 <th colspan="2">&nbsp;</th>
             </tr>
             <tr>
-                <td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
+                <td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv3_I2O();">v</button></td>
                 <td style="width: 150px;">&nbsp;</td>
-                <td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
+                <td style="width: 100px;" align="right"><button style="width: 50px;" onclick="doConv3_O2I();">^</button></td>
             </tr>
             <tr>
                 <th colspan="2">&nbsp;</th>
                 <td align="right">DEC number</td>
             </tr>
             <tr>
-                <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
+                <th colspan="3" style="height: 150px;"><textarea id="conv3Output" style="width: 100%; height: 100%; resize: none;"></textarea></th>
             </tr>
         </table>
 </div>
@@ -107,23 +107,23 @@
     <p>This converter will provide the convert between lowcase and upcase string. It is double interactive.</p>
     <table>
         <tr>
-            <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
+            <th colspan="3" style="height: 150px;"><textarea id="conv4Input" style="width: 100%; height: 100%; resize: none;"></textarea></th>
         </tr>
         <tr>
             <td align="left">Lowcase</td>
             <th colspan="2">&nbsp;</th>
         </tr>
         <tr>
-            <td style="width: 100px;" align="left"><button style="width: 50px;">v</button></td>
+            <td style="width: 100px;" align="left"><button style="width: 50px;" onclick="doConv4_I2O();">v</button></td>
             <td style="width: 150px;">&nbsp;</td>
-            <td style="width: 100px;" align="right"><button style="width: 50px;">^</button></td>
+            <td style="width: 100px;" align="right"><button style="width: 50px;" onclick="doConv4_O2I();">^</button></td>
         </tr>
         <tr>
             <th colspan="2">&nbsp;</th>
             <td align="right">Upcase</td>
         </tr>
         <tr>
-            <th colspan="3" style="height: 150px;"><textarea style="width: 100%; height: 100%; resize: none;"></textarea></th>
+            <th colspan="3" style="height: 150px;"><textarea id="conv4Output" style="width: 100%; height: 100%; resize: none;"></textarea></th>
         </tr>
     </table>
 </div>