diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4486775..461d2e5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,22 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="d93bb96c-a6c2-4df9-9ab0-9872ebe56e56" name="Default Changelist" comment="Prototype version of SVG. Ready for merge.">
-      <change afterPath="$PROJECT_DIR$/src/Images/CProgramming.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/Images/Cog.js" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/Images/Cryingboy.js" afterDir="false" />
+    <list default="true" id="d93bb96c-a6c2-4df9-9ab0-9872ebe56e56" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ASMComponents/SequentialComponent.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/ASMComponents/SequentialComponent.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/ASMComponents/Vector.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/ASMComponents/Vector.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Utils/Tabs.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Utils/Tabs.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ASMComponents/Arithmetic.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/ASMComponents/Arithmetic.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ASMComponents/Function.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/ASMComponents/Function.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ASMComponents/Shift.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/ASMComponents/Shift.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/ASMComponents/ret.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/ASMComponents/ret.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/Utils/Registry.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Utils/Registry.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/ASMVisualizer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ASMVisualizer.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ASTVisualizer.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ASTVisualizer.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ErrorHandler.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ErrorHandler.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/FrontPage.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/FrontPage.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/WaitingScreen.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/WaitingScreen.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ParametersPage.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ParametersPage.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -106,31 +100,31 @@
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="css" value="509" />
+          <entry key="css" value="517" />
           <entry key="gitignore" value="6" />
           <entry key="html" value="1" />
-          <entry key="js" value="17110" />
+          <entry key="js" value="24331" />
           <entry key="md" value="35" />
-          <entry key="txt" value="942" />
+          <entry key="txt" value="998" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="CSS" value="509" />
-          <entry key="HTML" value="3" />
-          <entry key="JavaScript" value="17108" />
+          <entry key="CSS" value="517" />
+          <entry key="HTML" value="4" />
+          <entry key="JavaScript" value="24328" />
           <entry key="Markdown" value="35" />
-          <entry key="PLAIN_TEXT" value="948" />
+          <entry key="PLAIN_TEXT" value="1004" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
-          <entry key="css" value="17" />
+          <entry key="css" value="19" />
           <entry key="gif" value="1" />
           <entry key="gitignore" value="1" />
           <entry key="html" value="1" />
           <entry key="ico" value="2" />
-          <entry key="js" value="74" />
+          <entry key="js" value="87" />
           <entry key="json" value="1" />
           <entry key="md" value="1" />
           <entry key="png" value="1" />
@@ -139,11 +133,11 @@
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
-          <entry key="CSS" value="17" />
+          <entry key="CSS" value="19" />
           <entry key="HTML" value="1" />
           <entry key="Image" value="4" />
           <entry key="JSON" value="1" />
-          <entry key="JavaScript" value="74" />
+          <entry key="JavaScript" value="87" />
           <entry key="Markdown" value="1" />
           <entry key="PLAIN_TEXT" value="1" />
           <entry key="SVG" value="4" />
@@ -151,7 +145,7 @@
       </usages-collector>
       <usages-collector id="statistics.vcs.git.usages">
         <counts>
-          <entry key="git.branch.create.new" value="1" />
+          <entry key="git.branch.create.new" value="2" />
         </counts>
       </usages-collector>
     </session>
@@ -161,30 +155,20 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/components/App.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="412">
-              <caret line="198" column="37" selection-start-line="198" selection-start-column="28" selection-end-line="198" selection-end-column="37" />
+            <state relative-caret-position="437">
+              <caret line="169" column="21" lean-forward="true" selection-start-line="169" selection-start-column="21" selection-end-line="169" selection-end-column="21" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
-                <marker date="1544745247505" expanded="true" signature="176:270" ph="..." />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/Utils/Tabs.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="269">
-              <caret line="23" column="17" lean-forward="true" selection-start-line="23" selection-start-column="17" selection-end-line="23" selection-end-column="17" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/ASMComponents/ret.js">
+        <entry file="file://$PROJECT_DIR$/src/components/ASMVisualizer.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="575">
-              <caret line="62" column="5" selection-start-line="62" selection-start-column="5" selection-end-line="62" selection-end-column="5" />
+            <state relative-caret-position="989">
+              <caret line="73" column="9" lean-forward="true" selection-start-line="73" selection-start-column="9" selection-end-line="73" selection-end-column="9" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -193,34 +177,28 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/ASMVisualizer.js">
+        <entry file="file://$PROJECT_DIR$/src/Utils/Parser.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="568">
-              <caret line="69" column="31" selection-start-line="69" selection-start-column="31" selection-end-line="69" selection-end-column="31" />
-              <folding>
-                <element signature="e#0#39#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="506">
+              <caret line="28" selection-start-line="28" selection-end-line="31" selection-end-column="22" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/FrontPage.js">
+        <entry file="file://$PROJECT_DIR$/src/Utils/Registry.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="368">
-              <caret line="85" column="22" lean-forward="true" selection-start-line="85" selection-start-column="22" selection-end-line="85" selection-end-column="22" />
-              <folding>
-                <element signature="e#0#39#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="552">
+              <caret line="24" column="69" lean-forward="true" selection-start-line="24" selection-start-column="69" selection-end-line="24" selection-end-column="69" />
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/ASTVisualizer.js">
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/components/ParametersPage.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="400">
-              <caret line="162" column="30" selection-start-line="162" selection-start-column="30" selection-end-line="162" selection-end-column="30" />
+            <state relative-caret-position="805">
+              <caret line="202" column="126" selection-start-line="202" selection-start-column="126" selection-end-line="202" selection-end-column="126" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -229,28 +207,31 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/ErrorHandler.js">
+        <entry file="file://$PROJECT_DIR$/src/Utils/Converter.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="23">
-              <caret line="1" column="39" selection-start-line="1" selection-start-column="39" selection-end-line="1" selection-end-column="39" />
+            <state relative-caret-position="437">
+              <caret line="44" column="2" lean-forward="true" selection-start-line="44" selection-start-column="2" selection-end-line="44" selection-end-column="2" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/WaitingScreen.js">
+        <entry file="file://$PROJECT_DIR$/src/ASMComponents/Shift.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="23">
-              <caret line="1" column="38" selection-start-line="1" selection-start-column="38" selection-end-line="1" selection-end-column="38" />
+            <state relative-caret-position="874">
+              <caret line="67" column="51" selection-start-line="67" selection-start-column="51" selection-end-line="67" selection-end-column="51" />
+              <folding>
+                <element signature="e#0#39#0" expanded="true" />
+              </folding>
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/ASMComponents/Vector.js">
+        <entry file="file://$PROJECT_DIR$/src/ASMComponents/Function.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="200">
-              <caret line="72" column="37" selection-start-line="72" selection-start-column="32" selection-end-line="72" selection-end-column="37" />
+            <state relative-caret-position="506">
+              <caret line="22" lean-forward="true" selection-start-line="22" selection-end-line="22" />
               <folding>
                 <element signature="e#0#39#0" expanded="true" />
               </folding>
@@ -258,13 +239,22 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/src/ASMComponents/SequentialComponent.js">
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/ASMComponents/Arithmetic.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="460">
-              <caret line="62" column="8" lean-forward="true" selection-start-line="62" selection-start-column="8" selection-end-line="65" selection-end-column="45" />
+            <state relative-caret-position="-407">
+              <caret line="2" column="15" selection-start-line="2" selection-start-column="7" selection-end-line="2" selection-end-column="15" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/ASMComponents/ret.js">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="483">
+              <caret line="21" column="10" lean-forward="true" selection-start-line="21" selection-start-column="10" selection-end-line="21" selection-end-column="10" />
               <folding>
-                <element signature="e#0#26#0" expanded="true" />
+                <element signature="e#0#39#0" expanded="true" />
               </folding>
             </state>
           </provider>
@@ -298,6 +288,8 @@
       <find>setInterval</find>
       <find>cm</find>
       <find>onComplete</find>
+      <find>registry</find>
+      <find>typeList</find>
     </findStrings>
     <replaceStrings>
       <replace />
@@ -323,7 +315,6 @@
         <option value="$PROJECT_DIR$/src/Images/cog.svg" />
         <option value="$PROJECT_DIR$/src/css/WaitingScreen.css" />
         <option value="$PROJECT_DIR$/public/manifest.json" />
-        <option value="$PROJECT_DIR$/src/Utils/Compiler.js" />
         <option value="$PROJECT_DIR$/package.json" />
         <option value="$PROJECT_DIR$/build/static/js/1.7d645394.chunk.js" />
         <option value="$PROJECT_DIR$/src/index.css" />
@@ -338,15 +329,9 @@
         <option value="$PROJECT_DIR$/src/css/GlobalVariables.css" />
         <option value="$PROJECT_DIR$/src/components/ButtonPanel.js" />
         <option value="$PROJECT_DIR$/src/css/ASMVisualizer.css" />
-        <option value="$PROJECT_DIR$/src/Utils/Parser.js" />
-        <option value="$PROJECT_DIR$/src/css/Vector.css" />
         <option value="$PROJECT_DIR$/src/ASMComponents/vpslldq.js" />
-        <option value="$PROJECT_DIR$/src/Utils/Registry.js" />
         <option value="$PROJECT_DIR$/src/Utils/Converter.js" />
         <option value="$PROJECT_DIR$/src/css/Tabs.css" />
-        <option value="$PROJECT_DIR$/src/ASMComponents/Arithmetic.js" />
-        <option value="$PROJECT_DIR$/src/ASMComponents/Function.js" />
-        <option value="$PROJECT_DIR$/src/ASMComponents/Shift.js" />
         <option value="$PROJECT_DIR$/src/Images/CProgramming.js" />
         <option value="$PROJECT_DIR$/src/Images/Cog.js" />
         <option value="$PROJECT_DIR$/src/components/ASTVisualizer.js" />
@@ -354,11 +339,19 @@
         <option value="$PROJECT_DIR$/src/components/ErrorHandler.js" />
         <option value="$PROJECT_DIR$/src/components/WaitingScreen.js" />
         <option value="$PROJECT_DIR$/src/Utils/Tabs.js" />
-        <option value="$PROJECT_DIR$/src/components/App.js" />
         <option value="$PROJECT_DIR$/src/ASMComponents/Vector.js" />
-        <option value="$PROJECT_DIR$/src/components/ASMVisualizer.js" />
-        <option value="$PROJECT_DIR$/src/ASMComponents/ret.js" />
         <option value="$PROJECT_DIR$/src/ASMComponents/SequentialComponent.js" />
+        <option value="$PROJECT_DIR$/src/Utils/Compiler.js" />
+        <option value="$PROJECT_DIR$/src/css/Vector.css" />
+        <option value="$PROJECT_DIR$/src/Utils/Parser.js" />
+        <option value="$PROJECT_DIR$/src/Utils/Registry.js" />
+        <option value="$PROJECT_DIR$/src/components/App.js" />
+        <option value="$PROJECT_DIR$/src/ASMComponents/Shift.js" />
+        <option value="$PROJECT_DIR$/src/ASMComponents/Function.js" />
+        <option value="$PROJECT_DIR$/src/ASMComponents/Arithmetic.js" />
+        <option value="$PROJECT_DIR$/src/ASMComponents/ret.js" />
+        <option value="$PROJECT_DIR$/src/components/ASMVisualizer.js" />
+        <option value="$PROJECT_DIR$/src/components/ParametersPage.js" />
       </list>
     </option>
   </component>
@@ -462,7 +455,7 @@
               <item name="SIMD-Visualiser" type="3d21c010:ScopeViewTreeModel$ProjectNode" />
               <item name="" type="442cc68d:ScopeViewTreeModel$RootNode" />
               <item name="src" type="9f88c78c:ScopeViewTreeModel$FileNode" />
-              <item name="Images" type="9f88c78c:ScopeViewTreeModel$FileNode" />
+              <item name="css" type="9f88c78c:ScopeViewTreeModel$FileNode" />
             </path>
             <path>
               <item name="SIMD-Visualiser" type="3d21c010:ScopeViewTreeModel$ProjectNode" />
@@ -827,11 +820,25 @@
       <option name="project" value="LOCAL" />
       <updated>1544654680677</updated>
     </task>
-    <option name="localTasksCounter" value="40" />
+    <task id="LOCAL-00040" summary="Little prototype of the parameter chooser">
+      <created>1544832066008</created>
+      <option name="number" value="00040" />
+      <option name="presentableId" value="LOCAL-00040" />
+      <option name="project" value="LOCAL" />
+      <updated>1544832066008</updated>
+    </task>
+    <task id="LOCAL-00041" summary="Parameter chooser improvements">
+      <created>1545163372962</created>
+      <option name="number" value="00041" />
+      <option name="presentableId" value="LOCAL-00041" />
+      <option name="project" value="LOCAL" />
+      <updated>1545163372962</updated>
+    </task>
+    <option name="localTasksCounter" value="42" />
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="416991000" />
+    <option name="totallyTimeSpent" value="479569000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="25" width="1720" height="1350" extended-state="4" />
@@ -843,13 +850,13 @@
       <window_info id="Favorites" order="3" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" weight="0.3275862" />
-      <window_info anchor="bottom" id="Run" order="2" sideWeight="0.49940476" visible="true" weight="0.32676518" />
+      <window_info anchor="bottom" id="Run" order="2" sideWeight="0.49940476" weight="0.32676518" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
       <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
       <window_info anchor="bottom" id="TODO" order="6" />
       <window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Version Control" order="8" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Version Control" order="8" weight="0.32922825" />
       <window_info anchor="bottom" id="Event Log" order="9" sideWeight="0.5014732" side_tool="true" weight="0.20409836" />
       <window_info anchor="bottom" id="Terminal" order="10" sideWeight="0.4985268" weight="0.21346469" />
       <window_info anchor="bottom" id="Messages" order="11" />
@@ -891,8 +898,6 @@
     <ignored-roots>
       <path value="$PROJECT_DIR$" />
     </ignored-roots>
-    <MESSAGE value="font-awesome and reactsrap added" />
-    <MESSAGE value="now works on chrome or any other webkit browsers." />
     <MESSAGE value="renaming project" />
     <MESSAGE value="css update" />
     <MESSAGE value="playback update but not complete" />
@@ -916,11 +921,12 @@
     <MESSAGE value="New Arithmetic Class (replacing vpaddd and all other arithmetic commands)" />
     <MESSAGE value="prototype version of Arithmetics in SVG." />
     <MESSAGE value="Prototype version of SVG. Ready for merge." />
-    <option name="LAST_COMMIT_MESSAGE" value="Prototype version of SVG. Ready for merge." />
+    <MESSAGE value="Little prototype of the parameter chooser" />
+    <MESSAGE value="Parameter chooser improvements" />
+    <option name="LAST_COMMIT_MESSAGE" value="Parameter chooser improvements" />
     <option name="REFORMAT_BEFORE_PROJECT_COMMIT" value="true" />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/src/components/App.test.js" />
     <entry file="file://$PROJECT_DIR$/node_modules/jointjs/dist/joint.js" />
     <entry file="file://$PROJECT_DIR$/src/Images/1_copy.png" />
     <entry file="file://$PROJECT_DIR$/src/css/WaitingScreen.css" />
@@ -1012,13 +1018,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/ButtonPanel.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="391">
-          <caret line="77" lean-forward="true" selection-start-line="77" selection-end-line="77" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/Images/c-programming.png" />
     <entry file="file://$PROJECT_DIR$/src/css/ASTVisualizer.css">
       <provider selected="true" editor-type-id="text-editor">
@@ -1027,183 +1026,206 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/Utils/Parser.js">
+    <entry file="file://$PROJECT_DIR$/src/css/App.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="177">
-          <caret line="33" column="6" lean-forward="true" selection-start-line="33" selection-start-column="6" selection-end-line="33" selection-end-column="6" />
+        <state relative-caret-position="782">
+          <caret line="34" column="1" selection-start-line="34" selection-start-column="1" selection-end-line="34" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/App.css">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/vpslldq.js" />
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/vpaddd.js" />
+    <entry file="file://$PROJECT_DIR$/src/css/Tabs.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="654">
-          <caret line="34" column="1" selection-start-line="34" selection-start-column="1" selection-end-line="34" selection-end-column="1" />
+        <state relative-caret-position="506">
+          <caret line="22" column="1" selection-start-line="22" selection-start-column="1" selection-end-line="22" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/GlobalVariables.css">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/UnsupportedCommand.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="23">
-          <caret line="1" column="19" lean-forward="true" selection-start-line="1" selection-start-column="13" selection-end-line="1" selection-end-column="19" />
+        <state relative-caret-position="207">
+          <caret line="9" column="1" selection-start-line="9" selection-start-column="1" selection-end-line="9" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/vpslldq.js" />
-    <entry file="file://$PROJECT_DIR$/src/Utils/Registry.js">
+    <entry file="file://$PROJECT_DIR$/src/Images/CProgramming.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="437">
-          <caret line="19" column="64" selection-start-line="19" selection-start-column="64" selection-end-line="19" selection-end-column="64" />
+        <state relative-caret-position="46">
+          <caret line="2" column="21" selection-start-line="2" selection-start-column="6" selection-end-line="2" selection-end-column="21" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/vpaddd.js" />
-    <entry file="file://$PROJECT_DIR$/src/Utils/Compiler.js">
+    <entry file="file://$PROJECT_DIR$/src/Images/cog.svg">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/Images/Cog.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="805">
-          <caret line="35" column="6" selection-start-line="35" selection-start-column="6" selection-end-line="35" selection-end-column="6" />
+        <state relative-caret-position="276">
+          <caret line="12" lean-forward="true" selection-start-line="12" selection-end-line="12" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/Utils/Converter.js">
+    <entry file="file://$PROJECT_DIR$/src/Images/c-programming.svg">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/index.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1028">
-          <caret line="59" column="18" lean-forward="true" selection-start-line="59" selection-start-column="18" selection-end-line="59" selection-end-column="18" />
+        <state relative-caret-position="322">
+          <caret line="14" column="18" lean-forward="true" selection-start-line="14" selection-start-column="18" selection-end-line="14" selection-end-column="18" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/Vector.css">
+    <entry file="file://$PROJECT_DIR$/src/css/ASMVisualizer.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="46">
-          <caret line="2" column="56" selection-start-line="2" selection-start-column="24" selection-end-line="2" selection-end-column="56" />
+        <state relative-caret-position="414">
+          <caret line="18" column="1" selection-start-line="18" selection-start-column="1" selection-end-line="18" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/Tabs.css">
+    <entry file="file://$PROJECT_DIR$/src/components/WaitingScreen.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-53">
-          <caret line="7" column="15" lean-forward="true" selection-start-line="7" selection-start-column="15" selection-end-line="7" selection-end-column="15" />
+        <state relative-caret-position="23">
+          <caret line="1" column="38" selection-start-line="1" selection-start-column="38" selection-end-line="1" selection-end-column="38" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Shift.js">
+    <entry file="file://$PROJECT_DIR$/src/Utils/Tabs.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1104">
-          <caret line="52" column="31" selection-start-line="52" selection-start-column="31" selection-end-line="52" selection-end-column="31" />
+        <state relative-caret-position="269">
+          <caret line="23" column="17" lean-forward="true" selection-start-line="23" selection-start-column="17" selection-end-line="23" selection-end-column="17" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/Utils/Compiler.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="322">
+          <caret line="14" column="33" selection-start-line="14" selection-start-column="33" selection-end-line="14" selection-end-column="33" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/FrontPage.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="529">
+          <caret line="68" column="5" selection-end-line="114" selection-end-column="1" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/UnsupportedCommand.js">
+    <entry file="file://$PROJECT_DIR$/src/css/GlobalVariables.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="207">
-          <caret line="9" column="1" selection-start-line="9" selection-start-column="1" selection-end-line="9" selection-end-column="1" />
+        <state relative-caret-position="253">
+          <caret line="11" column="1" selection-start-line="11" selection-start-column="1" selection-end-line="11" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Function.js">
+    <entry file="file://$PROJECT_DIR$/src/components/ButtonPanel.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="184">
-          <caret line="10" column="24" selection-start-line="10" selection-start-column="24" selection-end-line="10" selection-end-column="24" />
+        <state relative-caret-position="1495">
+          <caret line="77" lean-forward="true" selection-start-line="77" selection-end-line="77" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/ASTVisualizer.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="3726">
+          <caret line="162" column="30" selection-start-line="162" selection-start-column="30" selection-end-line="162" selection-end-column="30" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Arithmetic.js">
+    <entry file="file://$PROJECT_DIR$/src/components/ErrorHandler.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="322">
-          <caret line="80" column="14" lean-forward="true" selection-start-line="80" selection-start-column="14" selection-end-line="80" selection-end-column="14" />
+        <state relative-caret-position="414">
+          <caret line="18" column="27" lean-forward="true" selection-start-line="16" selection-start-column="4" selection-end-line="18" selection-end-column="27" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/Images/CProgramming.js">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Vector.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="46">
-          <caret line="2" column="21" selection-start-line="2" selection-start-column="6" selection-end-line="2" selection-end-column="21" />
+        <state relative-caret-position="92">
+          <caret line="4" selection-start-line="4" selection-end-line="4" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/Images/cog.svg">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/Images/Cog.js">
+    <entry file="file://$PROJECT_DIR$/src/css/Vector.css">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="276">
-          <caret line="12" lean-forward="true" selection-start-line="12" selection-end-line="12" />
+        <state relative-caret-position="345">
+          <caret line="15" column="1" lean-forward="true" selection-start-line="15" selection-start-column="1" selection-end-line="15" selection-end-column="1" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/Images/c-programming.svg">
-      <provider selected="true" editor-type-id="images" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/index.js">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/SequentialComponent.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="322">
-          <caret line="14" column="18" lean-forward="true" selection-start-line="14" selection-start-column="18" selection-end-line="14" selection-end-column="18" />
+        <state relative-caret-position="483">
+          <caret line="66" column="5" lean-forward="true" selection-start-line="66" selection-start-column="5" selection-end-line="66" selection-end-column="5" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/css/ASMVisualizer.css">
+    <entry file="file://$PROJECT_DIR$/src/Utils/Parser.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="391">
-          <caret line="17" column="41" lean-forward="true" selection-start-line="17" selection-start-column="41" selection-end-line="17" selection-end-column="41" />
+        <state relative-caret-position="506">
+          <caret line="28" selection-start-line="28" selection-end-line="31" selection-end-column="22" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/ASTVisualizer.js">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Shift.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="400">
-          <caret line="162" column="30" selection-start-line="162" selection-start-column="30" selection-end-line="162" selection-end-column="30" />
+        <state relative-caret-position="874">
+          <caret line="67" column="51" selection-start-line="67" selection-start-column="51" selection-end-line="67" selection-end-column="51" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/ErrorHandler.js">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Function.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="23">
-          <caret line="1" column="39" selection-start-line="1" selection-start-column="39" selection-end-line="1" selection-end-column="39" />
+        <state relative-caret-position="506">
+          <caret line="22" lean-forward="true" selection-start-line="22" selection-end-line="22" />
+          <folding>
+            <element signature="e#0#39#0" expanded="true" />
+          </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/WaitingScreen.js">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Arithmetic.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="23">
-          <caret line="1" column="38" selection-start-line="1" selection-start-column="38" selection-end-line="1" selection-end-column="38" />
+        <state relative-caret-position="-407">
+          <caret line="2" column="15" selection-start-line="2" selection-start-column="7" selection-end-line="2" selection-end-column="15" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/FrontPage.js">
+    <entry file="file://$PROJECT_DIR$/src/ASMComponents/ret.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="368">
-          <caret line="85" column="22" lean-forward="true" selection-start-line="85" selection-start-column="22" selection-end-line="85" selection-end-column="22" />
+        <state relative-caret-position="483">
+          <caret line="21" column="10" lean-forward="true" selection-start-line="21" selection-start-column="10" selection-end-line="21" selection-end-column="10" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/Utils/Tabs.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="269">
-          <caret line="23" column="17" lean-forward="true" selection-start-line="23" selection-start-column="17" selection-end-line="23" selection-end-column="17" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/Vector.js">
+    <entry file="file://$PROJECT_DIR$/src/components/App.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="200">
-          <caret line="72" column="37" selection-start-line="72" selection-start-column="32" selection-end-line="72" selection-end-column="37" />
+        <state relative-caret-position="437">
+          <caret line="169" column="21" lean-forward="true" selection-start-line="169" selection-start-column="21" selection-end-line="169" selection-end-column="21" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
@@ -1212,41 +1234,34 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/components/ASMVisualizer.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="568">
-          <caret line="69" column="31" selection-start-line="69" selection-start-column="31" selection-end-line="69" selection-end-column="31" />
+        <state relative-caret-position="989">
+          <caret line="73" column="9" lean-forward="true" selection-start-line="73" selection-start-column="9" selection-end-line="73" selection-end-column="9" />
           <folding>
             <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/App.js">
+    <entry file="file://$PROJECT_DIR$/src/Utils/Converter.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="412">
-          <caret line="198" column="37" selection-start-line="198" selection-start-column="28" selection-end-line="198" selection-end-column="37" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-            <marker date="1544745247505" expanded="true" signature="176:270" ph="..." />
-          </folding>
+        <state relative-caret-position="437">
+          <caret line="44" column="2" lean-forward="true" selection-start-line="44" selection-start-column="2" selection-end-line="44" selection-end-column="2" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/ret.js">
+    <entry file="file://$PROJECT_DIR$/src/Utils/Registry.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="575">
-          <caret line="62" column="5" selection-start-line="62" selection-start-column="5" selection-end-line="62" selection-end-column="5" />
-          <folding>
-            <element signature="e#0#39#0" expanded="true" />
-          </folding>
+        <state relative-caret-position="552">
+          <caret line="24" column="69" lean-forward="true" selection-start-line="24" selection-start-column="69" selection-end-line="24" selection-end-column="69" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/ASMComponents/SequentialComponent.js">
+    <entry file="file://$PROJECT_DIR$/src/components/ParametersPage.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="460">
-          <caret line="62" column="8" lean-forward="true" selection-start-line="62" selection-start-column="8" selection-end-line="65" selection-end-column="45" />
+        <state relative-caret-position="805">
+          <caret line="202" column="126" selection-start-line="202" selection-start-column="126" selection-end-line="202" selection-end-column="126" />
           <folding>
-            <element signature="e#0#26#0" expanded="true" />
+            <element signature="e#0#39#0" expanded="true" />
           </folding>
         </state>
       </provider>
diff --git a/package-lock.json b/package-lock.json
index ed69167..dea515b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1094,6 +1094,14 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.1.0.tgz",
       "integrity": "sha512-ugTb7Lq7u4GfWSqqpwE0bGyoBZNMTok/zDBXxfEG0QM50jNlGhIWjRC1pPN7bvV1anhF+bs+/gNcRw+o55Evbg=="
     },
+    "add-dom-event-listener": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
+      "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
+      "requires": {
+        "object-assign": "4.x"
+      }
+    },
     "address": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/address/-/address-1.0.3.tgz",
@@ -2913,11 +2921,24 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
+    "component-classes": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz",
+      "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=",
+      "requires": {
+        "component-indexof": "0.0.3"
+      }
+    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
       "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
     },
+    "component-indexof": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
+      "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ="
+    },
     "compressible": {
       "version": "2.0.15",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.15.tgz",
@@ -3166,6 +3187,15 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-animation": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.5.0.tgz",
+      "integrity": "sha512-hWYoWiOZ7Vr20etzLh3kpWgtC454tW5vn4I6rLANDgpzNSkO7UfOqyCEeaoBSG9CYWQpRkFWTWbWW8o3uZrNLw==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "component-classes": "^1.2.5"
+      }
+    },
     "css-color-keywords": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
@@ -3777,6 +3807,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-align": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.8.0.tgz",
+      "integrity": "sha512-B85D4ef2Gj5lw0rK0KM2+D5/pH7yqNxg2mB+E8uzFaolpm7RQmsxEfjyEuNiF8UBBkffumYDeKRzTzc3LePP+w=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -7939,6 +7974,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
     },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -7964,6 +8004,16 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -7979,6 +8029,16 @@
       "resolved": "https://registry.npmjs.org/lodash.isobject/-/lodash.isobject-3.0.2.tgz",
       "integrity": "sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0="
     },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "requires": {
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0"
+      }
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -13953,6 +14013,88 @@
         }
       }
     },
+    "rc-align": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.3.tgz",
+      "integrity": "sha512-h5KgyB5IXYR7iKpYFcMr54cuQ2eozPCZ11kbXPG5+6CWvmyJ+c0R/yjndVndiNk2G3MKcTMbJNdDv5DIckLAxQ==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "dom-align": "^1.7.0",
+        "prop-types": "^15.5.8",
+        "rc-util": "^4.0.4"
+      }
+    },
+    "rc-animate": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.6.0.tgz",
+      "integrity": "sha512-JXDycchgbOI+7T/VKmFWnAIn042LLScK1fNkmNunb0jz5q5aPGCAybx2bTo7X5t31Jkj9OsxKNb/vZPDPWufCg==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "css-animation": "^1.3.2",
+        "prop-types": "15.x",
+        "raf": "^3.4.0",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
+    "rc-slider": {
+      "version": "8.6.4",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.6.4.tgz",
+      "integrity": "sha512-CV2i2Ww6ib0EjFuBKvgjw3PgT6QwvWKC93iEpqPtrztZrx5wO9Iw//AUri4KHRqptW13AuBvFdEHovqLi6XFTw==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.4",
+        "rc-tooltip": "^3.7.0",
+        "rc-util": "^4.0.4",
+        "shallowequal": "^1.0.1",
+        "warning": "^3.0.0"
+      }
+    },
+    "rc-tooltip": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.3.tgz",
+      "integrity": "sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.8",
+        "rc-trigger": "^2.2.2"
+      }
+    },
+    "rc-trigger": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.2.tgz",
+      "integrity": "sha512-op4xCu95/gdHVaysyxxiYxbY+Z+UcIBSUY9nQfLqm1FlitdtnAN+owD5iMPfnnsRXntgcQ5+RdYKNUFQT5DjzA==",
+      "requires": {
+        "babel-runtime": "6.x",
+        "classnames": "^2.2.6",
+        "prop-types": "15.x",
+        "rc-align": "^2.4.0",
+        "rc-animate": "2.x",
+        "rc-util": "^4.4.0"
+      }
+    },
+    "rc-util": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.6.0.tgz",
+      "integrity": "sha512-rbgrzm1/i8mgfwOI4t1CwWK7wGe+OwX+dNa7PVMgxZYPBADGh86eD4OcJO1UKGeajIMDUUKMluaZxvgraQIOmw==",
+      "requires": {
+        "add-dom-event-listener": "^1.1.0",
+        "babel-runtime": "6.x",
+        "prop-types": "^15.5.10",
+        "shallowequal": "^0.2.2"
+      },
+      "dependencies": {
+        "shallowequal": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
+          "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
+          "requires": {
+            "lodash.keys": "^3.1.2"
+          }
+        }
+      }
+    },
     "react": {
       "version": "16.6.3",
       "resolved": "https://registry.npmjs.org/react/-/react-16.6.3.tgz",
@@ -14177,6 +14319,15 @@
         "prop-types": "^15.6.1"
       }
     },
+    "react-rangeslider": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-rangeslider/-/react-rangeslider-2.2.0.tgz",
+      "integrity": "sha512-5K7Woa+cyqZ5wiW5+KhqGV+3+FiFxGKQ9rUxTMh52sObXVYEeBbfxFrp1eBvS8mRIxnUbHz9ppnFP0LhwOyNeg==",
+      "requires": {
+        "classnames": "^2.2.3",
+        "resize-observer-polyfill": "^1.4.2"
+      }
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
@@ -14959,6 +15110,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
diff --git a/package.json b/package.json
index 2f3f992..95524e6 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,12 @@
     "npm": "^6.4.1",
     "prop-types": "^15.6.2",
     "qs": "^6.6.0",
+    "rc-slider": "^8.6.4",
     "react": "^16.6.3",
     "react-codemirror2": "^5.1.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.6.0",
+    "react-rangeslider": "^2.2.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.0.5",
     "react-sortable-tree": "^2.3.0",
diff --git a/src/ASMComponents/Arithmetic.js b/src/ASMComponents/Arithmetic.js
index 13402a5..9fdbc59 100644
--- a/src/ASMComponents/Arithmetic.js
+++ b/src/ASMComponents/Arithmetic.js
@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import Vector from "./Vector";
-import * as Registry from "../Utils/Registry";
+import Registry from "../Utils/Registry";
 import {convert} from "../Utils/Converter";
 import {Row, Col, Container} from 'reactstrap';
 import * as _ from "lodash";
@@ -24,18 +24,22 @@ export default class Arithmetic extends Component {
     constructor(props) {
         super(props);
 
-        let registry = Registry.default;
-        let input1 = registry.get(props.params[INPUT1_INDEX]);
-        let input2 = registry.get(props.params[INPUT2_INDEX]);
+        let input1 = Registry.get(props.params[INPUT1_INDEX]);
+        let input2 = Registry.get(props.params[INPUT2_INDEX]);
         let input1_converted = convert(input1, props.type, props.bitWidth, 'uint', 8);
         let input2_converted = convert(input2, props.type, props.bitWidth, 'uint', 8);
-        let output_converted = new Array(input1_converted.length);
+        let output_converted = [];
         // why not do the computation in the constructor? This seems simpler. No multiple render calls.
-        for (var i = 0; i < input1_converted.length; i++) {
-            output_converted[i] = uint32.addMod32(input1_converted[i], input2_converted[i])
-        }
+
+        input1_converted.forEach((val, i) => {
+            output_converted.push((val + input2_converted[i]) % Math.pow(2, props.bitWidth))
+        });
+
         let output = convert(output_converted, 'uint', 8, props.type, props.bitWidth);
-        registry.set(props.params[OUTPUT_INDEX], output);
+        Registry.set(props.params[OUTPUT_INDEX], output);
+
+        const defaultBitWidth = props.defaultValues.length > 0 ? props.defaultValues[0].bitWidth : props.bitWidth;
+        const defaultBase = props.defaultValues.length > 0 ? props.defaultValues[0].base : props.base;
 
         this.state = {
             input1,
@@ -44,15 +48,11 @@ export default class Arithmetic extends Component {
             input1_converted,
             input2_converted,
             output_converted,
+            defaultBitWidth,
+            defaultBase,
             showOutput: false
         };
-        this.state.output = _.cloneDeep(input2);
-        // console.log(input1_converted, output_converted);
-        // let test1 = convert(input1_converted, 'uint', 8, props.type, props.bitWidth);
-        // let test2 = convert(output_converted, 'uint', 8, props.type, props.bitWidth);
-        // test1 = convert(test1, props.type, props.bitWidth, 'uint', 8);
-        // test2 = convert(test2, props.type, props.bitWidth, 'uint', 8);
-        // console.log(test1, test2);
+        this.state.output = _.cloneDeep(input1);
 
         this.vector1 = React.createRef();
         this.vector2 = React.createRef();
@@ -69,7 +69,7 @@ export default class Arithmetic extends Component {
             autoplay: false
         });
         let {output_converted} = this.state;
-        let input2_converted = _.cloneDeep(this.state.input2_converted);
+        let input1_converted = _.cloneDeep(this.state.input1_converted);
         let mock = {nextTick: 0, currentTick: 0};
 
         timeline
@@ -94,24 +94,29 @@ export default class Arithmetic extends Component {
             .add({
                 targets: mock,
                 //find the maximum difference between input and output. this tells us the range of the animation (number of ticks).
-                nextTick: _.max(input2_converted.map((v, i) => Math.abs(output_converted[i] - v))),
+                nextTick: _.max(input1_converted.map((v, i) => Math.abs(output_converted[i] - v))),
+                easing: "linear",
                 duration: 2000,
                 round: 1,
                 offset: "-=200",
                 begin: () => {
-                    this.setState({output: _.cloneDeep(this.state.input2)});
+                    this.setState({output: _.cloneDeep(this.state.input1)});
                 },
                 update: (animation) => {
                     //Update() is not called only upon update of the target... So we need to check if it changed...
                     if (animation.began && mock.nextTick !== mock.currentTick) {
-                        input2_converted = input2_converted.map((val, i) => {
-                            let diff = output_converted[i] - val;
-                            if (diff > 0) return val + 1;
-                            if (diff < 0) return val - 1;
-                            return val;
+                        input1_converted = input1_converted.map((val, i) => {
+
+                            //TODO: Temporary disable of the animation... it's broken and I don't have the time to fix it right now
+                            //let diff = output_converted[i] - val;
+                            // if (diff > 0) return val + 1;
+                            // if (diff < 0) return val - 1;
+                            //return val;
+                            return output_converted[i];
                         });
                         mock.currentTick = mock.nextTick;
-                        this.setState({output: convert(input2_converted, 'uint', 8, this.props.type, this.props.bitWidth)});
+                        this.setState({output: convert(input1_converted, 'uint', 8, this.props.type, this.props.bitWidth)});
+
                     }
                 }
             });
@@ -121,7 +126,7 @@ export default class Arithmetic extends Component {
 
 
     render() {
-        let {input1, input2, output} = this.state;
+        let {input1, input2, output, defaultBase} = this.state;
         let {type, bitWidth, base} = this.props;
         let colCount = input1.length * 8 / bitWidth;
 
@@ -129,7 +134,7 @@ export default class Arithmetic extends Component {
             <div style={{'height': '260px'}}>
                 <Vector type={type}
                         bitWidth={bitWidth}
-                        base={base}
+                        base={defaultBase}
                         data={input1}
                         vectorRef={(ref) => this.vector1 = ref}
                 />
@@ -140,7 +145,7 @@ export default class Arithmetic extends Component {
                 </Container>
                 <Vector type={type}
                         bitWidth={bitWidth}
-                        base={base}
+                        base={defaultBase}
                         data={input2}
                         vectorRef={(ref) => this.vector2 = ref}
                 />
@@ -153,13 +158,13 @@ export default class Arithmetic extends Component {
                 </div>
                 <Vector type={type}
                         bitWidth={bitWidth}
-                        base={base}
-                        data={output}
+                        base={defaultBase}
+                        data={input2}
                         vectorRef={(ref) => this.vector3 = ref}
                 />
                 <Vector type={type}
                         bitWidth={bitWidth}
-                        base={base}
+                        base={defaultBase}
                         data={output}
                         vectorRef={(ref) => this.vector4 = ref}
                 />
diff --git a/src/ASMComponents/Function.js b/src/ASMComponents/Function.js
index 5d8a6fa..e07ec89 100644
--- a/src/ASMComponents/Function.js
+++ b/src/ASMComponents/Function.js
@@ -1,6 +1,7 @@
 import React, {Component} from "react";
 import styled from "styled-components";
-import * as Registry from "../Utils/Registry";
+import Registry from "../Utils/Registry";
+import {convert} from "../Utils/Converter";
 
 const FunctionContainer = styled.div`
 `
@@ -18,8 +19,11 @@ export default class Function extends Component {
         super(props);
 
         //Reset the registry because this is a new function!
-        let registry = Registry.default;
-        registry.clear()
+        Registry.clear();
+
+        props.params.forEach(param => {
+            Registry.set(param.register, convert(param.value, 'uint', 8, 'uint', param.bitWidth));
+        })
     }
 
 
diff --git a/src/ASMComponents/SequentialComponent.js b/src/ASMComponents/SequentialComponent.js
index 398cf1c..595fe4f 100644
--- a/src/ASMComponents/SequentialComponent.js
+++ b/src/ASMComponents/SequentialComponent.js
@@ -6,8 +6,7 @@ const Container = styled.div`
   margin: 40px 0 20px 0;
   opacity: 0;
   text-align: center;
-  
-  
+  pointer-events: none;
   
   :first-child, last-child{
     margin: 20px 0;
@@ -18,9 +17,14 @@ export default class SequentialComponent extends React.Component {
 
     constructor() {
         super();
+        this.state = {
+            touchable: false
+        };
+
         // create li DOM reference
         this.container = React.createRef();
         this.component = React.createRef();
+
     }
 
     allAnimationCompleted() {
@@ -46,11 +50,18 @@ export default class SequentialComponent extends React.Component {
             delay: 800,
             opacity: 1,
             complete: () => {
+
                 if (this.childAnimation) {
                     this.childAnimation.restart();
-                    this.childAnimation.finished.then(() => this.allAnimationCompleted());
+                    this.childAnimation.finished.then(() => {
+                        this.allAnimationCompleted()
+                        this.setState({touchable: true});
+                    });
+                }
+                else {
+                    this.setState({touchable: true});
+                    this.allAnimationCompleted();
                 }
-                else this.allAnimationCompleted();
             }
         });
 
@@ -81,6 +92,7 @@ export default class SequentialComponent extends React.Component {
 
         if (!nextProps.shouldBeVisible && this.props.shouldBeVisible) {
             //Component is being hidden. Rewind animation.
+            this.setState({touchable: false});
             if (this.sequentialHighlight)
                 this.sequentialHighlight.clear();
             this.animeRef.seek(0);
@@ -132,6 +144,7 @@ export default class SequentialComponent extends React.Component {
     render() {
         return (
             <Container
+                style={this.state.touchable ? {'pointerEvents': 'all'} : {}}
                 ref={this.container}
                 onMouseEnter={this.onEnter}
                 onMouseLeave={this.onLeave}
diff --git a/src/ASMComponents/Shift.js b/src/ASMComponents/Shift.js
index 17d69f7..2336e1c 100644
--- a/src/ASMComponents/Shift.js
+++ b/src/ASMComponents/Shift.js
@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import * as Registry from "../Utils/Registry";
+import Registry from "../Utils/Registry";
 import Vector from "./Vector";
 import * as _ from "lodash";
 import anime from 'animejs';
@@ -22,14 +22,16 @@ export default class Shift extends Component {
     constructor(props) {
         super(props);
 
-        let registry = Registry.default;
         let shiftLen = props.params[SHIFT_INDEX];
-        let input = registry.get(props.params[INPUT_INDEX]);
-
+        let input = Registry.get(props.params[INPUT_INDEX]);
+        const defaultBitWidth = props.defaultValues.length > 0 ? props.defaultValues[0].bitWidth : props.bitWidth;
+        const defaultBase = props.defaultValues.length > 0 ? props.defaultValues[0].base : props.base;
         this.state = {
             shiftLen,
             input,
-            output: []
+            output: [],
+            defaultBitWidth,
+            defaultBase
         };
         this.computeCommand();
     }
@@ -41,45 +43,65 @@ export default class Shift extends Component {
         //In order to make it responsive, we have to calculate the shift in percentage of the vector length. Clever.
         let shiftPercentage = 100 * directionValue[this.props.direction] * shiftLen * bitWidth / (input.length * 8);
 
-        this.timeline = anime.timeline({
+        let timeline = anime.timeline({
             easing: "easeOutCubic",
             loop: false,
             autoplay: false
         });
 
-        this.timeline
+        //TODO: Convert the visualisation from the desired visualization bitWidth (from the parameter page) to the command bitWidth (props).
+        // const nbOfConversion = Math.log2(this.props.bitWidth) - Math.log2(this.state.defaultBitWidth);
+        //
+        // _.times(Math.abs(nbOfConversion)).forEach(() => {
+        //     const multiplicative = nbOfConversion > 0 ? 2 : 0.5;
+        //     timeline
+        //        .add({
+        //            duration: 600,
+        //            delay: 300,
+        //            complete: () => {this.setState({defaultBitWidth: this.state.defaultBitWidth * multiplicative})}
+        //        })
+        // });
+
+        timeline
             .add({
                 targets: this.numbersRef.current,
                 translateX: `${shiftPercentage}%`,
                 duration: 2000,
-                delay: 300
+                delay: 1000
             });
 
-        return this.timeline;
+        // _.times(Math.abs(nbOfConversion)).forEach(() => {
+        //     const multiplicative = nbOfConversion < 0 ? 2 : 0.5;
+        //     timeline
+        //         .add({
+        //             duration: 600,
+        //             delay: 300,
+        //             complete: () => {this.setState({defaultBitWidth: this.state.defaultBitWidth * multiplicative})}
+        //         })
+        // });
+
+        return timeline;
     }
 
     //Compute the command and set the registry.
     computeCommand() {
-        let registry = Registry.default;
         let {params, bitWidth} = this.props;
         let shiftLen = params[SHIFT_INDEX] * (bitWidth / 8);
-        let input = registry.get(params[INPUT_INDEX]);
+        let input = Registry.get(params[INPUT_INDEX]);
         let output = _.cloneDeep(input);
         output.push(...new Array(shiftLen).fill(0));
         output = output.slice(-input.length);
-        registry.set(params[OUTPUT_INDEX], output);
-
-        //this.setState({output, input, shiftLen});
+        Registry.set(params[OUTPUT_INDEX], output);
     }
 
     render() {
-        let {input} = this.state;
+        let {input, defaultBitWidth, defaultBase} = this.state;
         let {type, bitWidth, base, shiftData} = this.props;
 
         return (
             <Vector type={type}
                     bitWidth={bitWidth}
-                    base={base}
+                    base={defaultBase}
                     data={input}
                     shiftData={shiftData}
                     numbersRef={(ref) => this.numbersRef = ref}/>
diff --git a/src/ASMComponents/ret.js b/src/ASMComponents/ret.js
index 72b17a3..fe34b3a 100644
--- a/src/ASMComponents/ret.js
+++ b/src/ASMComponents/ret.js
@@ -1,5 +1,5 @@
 import React, {Component} from "react";
-import * as Registry from "../Utils/Registry";
+import Registry from "../Utils/Registry";
 import Vector from "./Vector";
 import anime from 'animejs';
 
@@ -8,15 +8,14 @@ export default class Ret extends Component {
     static defaultProps = {
         type: "uint",
         bitWidth: 32,
-        base: 16,
+        base: 10,
     };
 
     constructor(props) {
         super(props);
 
-        let registry = Registry.default;
         //Ret returns value on top of the stack.  For now we will assume the value is always 128 bits... (Xmm)
-        let returnValue = registry.get('xmm0');
+        let returnValue = Registry.get('xmm0');
 
         this.state = {
             returnValue,
diff --git a/src/Utils/Compiler.js b/src/Utils/Compiler.js
index 1f1899f..156184a 100644
--- a/src/Utils/Compiler.js
+++ b/src/Utils/Compiler.js
@@ -4,7 +4,7 @@ import * as request from 'request';
 //Callback must be -> callback(error, asm, ast)
 export function compile(code, callback) {
     let options = {
-        url: 'https://godbolt.org/api/compiler/cclang700/compile',
+        url: 'https://godbolt.org/api/compiler/clang700/compile',
         method: 'POST',
         headers: {
             'content-type': 'application/json'
@@ -12,7 +12,7 @@ export function compile(code, callback) {
         json: true,
         body: {
             "source": code,
-            "compiler": "cclang700",
+            "compiler": "clang700",
             "options": {
                 "userArguments": "-O3 -march=native",
                 "compilerOptions": {
@@ -29,9 +29,10 @@ export function compile(code, callback) {
                     "trim": true,
                     "intel": true,
                     "demangle": true
-                }
+                },
+                "tools": []
             },
-            "lang": "c"
+            "lang": "c++"
         }
     };
     request(options, (error, response, body) => {
diff --git a/src/Utils/Converter.js b/src/Utils/Converter.js
index a5c43ba..85d99a4 100644
--- a/src/Utils/Converter.js
+++ b/src/Utils/Converter.js
@@ -1,6 +1,6 @@
 // should be in a distinct file
-import * as _ from "lodash";
 import uint32 from "uint32";
+import * as _ from "lodash";
 
 
 let toUINT = (array, toBitWidth, fromType, fromBitWidth) => {
@@ -48,20 +48,58 @@ let toDouble = (array, toBitWidth, fromType, fromBitWidth) => {
 export function convert(data, toType, toBitWidth, fromType, fromBitWidth) {
     let values = [];
 
-    switch (toType) {
-        case "uint":
-            values = toUINT(data, toBitWidth, fromType, fromBitWidth);
-            break;
-        case "int":
-            values = toINT(data, toBitWidth, fromType, fromBitWidth);
-            break;
-        case "double":
-            values = toDouble(data, toBitWidth, fromType, fromBitWidth);
-            break;
-        default:
-            values = data.slice(0);
+    //if (toBitWidth === 64 || fromBitWidth === 64) return null;
+
+    if (toBitWidth < fromBitWidth) {
+        _.forEach(data, lane => {
+            let newLanes = [];
+
+            _.times(fromBitWidth / toBitWidth).forEach(i => {
+                const mask = _.padEnd("0b", toBitWidth + 2, '1');
+                newLanes.push((lane >> (i * toBitWidth)) & mask);
+            });
+
+            _.forEachRight(newLanes, nl => {
+                values.push(nl)
+            });
+        });
+    }
+
+    //TODO: overflow bug in conversion! see the Arithmetic animation..
+    else if (toBitWidth > fromBitWidth) {
+        const newNbOfLanes = (data.length * fromBitWidth) / toBitWidth;
+        const nbOfOldLanesInOneNewLane = data.length / newNbOfLanes;
+        _.times(newNbOfLanes).forEach(i => {
+            const currentPosition = i * nbOfOldLanesInOneNewLane;
+            const lanesToMerge = _.slice(data, currentPosition, currentPosition + nbOfOldLanesInOneNewLane);
+            let newLane = 0;
+            const mask = _.padEnd("0b", fromBitWidth + 2, '1');
+
+            _.forEach(lanesToMerge, (laneToMerge, i) => {
+                let safeFromBitWidthNumber = laneToMerge & mask;
+                newLane = (newLane << (i * fromBitWidth)) | safeFromBitWidthNumber;
+            });
+
+            values.push(newLane);
+        });
     }
 
+    else values = data.slice(0);
+
+    // switch (toType) {
+    //     case "uint":
+    //         values = toUINT(data, toBitWidth, fromType, fromBitWidth);
+    //         break;
+    //     case "int":
+    //         values = toINT(data, toBitWidth, fromType, fromBitWidth);
+    //         break;
+    //     case "double":
+    //         values = toDouble(data, toBitWidth, fromType, fromBitWidth);
+    //         break;
+    //     default:
+    //         values = data.slice(0);
+    // }
+
     return values;
 }
 
@@ -77,7 +115,7 @@ export function convertToStrings(data, toType, toBitWidth, base = 16, precision
         _.chain(value)
             .round(precision)
             .toBase(base)
-            .padStart(toBitWidth / 4, '0')  //to be perfected.
+            //.padStart(toBitWidth / 4, '0')  //to be perfected.
             .toUpper()
             .value()
     );
diff --git a/src/Utils/Parser.js b/src/Utils/Parser.js
index f6f8dbc..2579f62 100644
--- a/src/Utils/Parser.js
+++ b/src/Utils/Parser.js
@@ -24,8 +24,35 @@ export function generateAST(editor) {
     return JSON.parse(testASR)
 }
 
-const functionName = /([\w]+): # @.*/;
+const getBitWidth = (type) => {
+    switch (type.replace(/unsigned /g, '')) {
+        case "long":
+        case "long long":
+        case "double":
+            return 64;
+        case "float":
+        case "int":
+            return 32;
+        case "short":
+            return 16;
+        case "char":
+            return 8;
+        default:
+            console.log(`hmm... I don't know this type: ${type}...`);
+            return null;
+    }
+};
+
+const simplifyType = (complexType) => {
+    if (complexType === 'double' || complexType === 'float')
+        return 'float';
+    else
+        return 'int'
+};
 
+const functionName = /([\w]+)\(.* # @.*/;
+const functionParams = /\b[^()]+\((.*)\)$/;
+const vectorParam = /(.*)[ ](__vector\(([0-9]+)\))/;
 
 export function generateASM(rawAsm) {
     let asm = [];
@@ -35,8 +62,31 @@ export function generateASM(rawAsm) {
     rawAsm.forEach(line => {
         if (functionName.test(line.text)) {
             let name = functionName.exec(line.text)[1];
+            let func = rawAsm[0].text.replace(/:.*/g, '');
+            let params = functionParams.exec(func)[1].split(", ");
+            let parsedParams = [];
+            params.forEach((p) => {
+                if (vectorParam.test(p)) {
+                    const parsedParam = vectorParam.exec(p);
+                    parsedParams.push({
+                        lanes: +parsedParam[3],
+                        type: simplifyType(parsedParam[1]),
+                        bitWidth: getBitWidth(parsedParam[1]),
+                        base: 10 //decimal
+                    })
+                }
+                else {
+                    parsedParams.push({
+                        lanes: 1,
+                        type: simplifyType(p),
+                        bitWidth: getBitWidth(p),
+                        base: 10 //decimal
+                    })
+                }
+            });
             currentFunction = new Node("Function", name, 0);
             currentFunction.body = [];
+            currentFunction.params = parsedParams;
             asm.push(currentFunction);
         }
         else if (line.text.length > 0 && line.source) {
diff --git a/src/Utils/Registry.js b/src/Utils/Registry.js
index dee5b56..3801f1a 100644
--- a/src/Utils/Registry.js
+++ b/src/Utils/Registry.js
@@ -1,44 +1,92 @@
 import * as _ from "lodash";
 
-export const NB_REGISTERS = 32;
+export const NB_SIMD_REGISTERS = 32;
+export const NB_GP_REGISTERS = 16;
+export const ARCHITECTURE_SIZE = 64;
 export const VAR_SIZE = 8; //Octets
 export const TYPE_LENGTH = {
     x: 512 / (4 * VAR_SIZE),
     y: 512 / (2 * VAR_SIZE),
     z: 512 / VAR_SIZE
 };
+const isSIMDRegister = /[x-z]mm[0-9]+/;
+
+//Containing all the names of the general purpose registers classified by their bit width.
+const GPRegistersNamesByBitWidth = {
+    64: ['rax', 'rbx', 'rcx', 'rdx', 'rsi', 'rdi', 'rbp', 'rsp', 'r8', 'r9', 'r10', 'r11', 'r12', 'r13', 'r14', 'r15'],
+    32: ['eax', 'ebx', 'ecx', 'edx', 'esi', 'edi', 'ebp', 'esp', 'r8d', 'r9d', 'r10d', 'r11d', 'r12d', 'r13d', 'r14d', 'r15d'],
+    16: ['ax', 'bx', 'cx', 'dx', 'si', 'di', 'bp', 'sp', 'r8w', 'r9w', 'r10w', 'r11w', 'r12w', 'r13w', 'r14w', 'r15w'],
+    8: ['al', 'bl', 'cl', 'dl', 'sil', 'dil', 'bpl', 'spl', 'r8b', 'r9b', 'r10b', 'r11b', 'r12b', 'r13b', 'r14b', 'r15b']
+};
+//Fastcall registers are used to pass parameters to functions.
+export const FAST_CALL_REGISTERS = ['rdi', 'rsi', 'rdx', 'rcx', 'r8', 'r9'];
+
+//A dictionary of general purpose registers.  example usage: GPRegistersNameMap["rax"] -> returns: {bitWidth: 64, index: 1}
+//index tells us which of the _GPRegisters the given name represents.
+const GPRegistersNameMap = {};
+_.forIn(GPRegistersNamesByBitWidth, (names, bitWidth) => {
+    names.forEach((name, index) => {
+        GPRegistersNameMap[name] = {
+            bitWidth,
+            index
+        }
+    });
+});
 
 class Registry {
     constructor() {
-        // the array _keys contains NB_REGISTERS arrays
-        // of size 512 / VAR_SIZE filled with byte-sized values (randomized)
-        this._keys = new Array(NB_REGISTERS).fill(0).map(() =>
+        // the array _SIMDRegisters contains NB_REGISTERS arrays
+        // of size 512 / VAR_SIZE filled with byte-sized values
+        this._SIMDRegisters = new Array(NB_SIMD_REGISTERS).fill(0).map(() =>
             new Array(TYPE_LENGTH["z"]).fill(0).map((val, i) => i)
         );
+
+        // the array _GPRegisters (general purpose registers) contains NB_GP_REGISTERS arrays
+        // of size ARCHITECTURE_SIZE (64) / (8) VAR_SIZE filled with byte-sized values
+        this._GPRegisters = new Array(NB_GP_REGISTERS).fill(0).map(() =>
+            new Array(ARCHITECTURE_SIZE / VAR_SIZE).fill(0).map((val, i) => i)
+        );
+
     }
 
     // stores the value in array into the "register" where register is something like xmm0
     set = (register, array) => {
-        const idx = +register.substring(3); // should  be the number of the register, between 0 and 32
-        const type = register[0];// should be x, y, z
+        if (isSIMDRegister.test(register)) {
+            const idx = +register.substring(3); // should  be the number of the register, between 0 and 32
+            const type = register[0];// should be x, y, z
 
-        this._keys[idx].splice(0, TYPE_LENGTH[type], ...array);
-    };
+            this._SIMDRegisters[idx].splice(0, TYPE_LENGTH[type], ...array);
+        }
+        else if (GPRegistersNameMap[register]) {
+            const {bitWidth, index} = GPRegistersNameMap[register]
+            this._GPRegisters[index].splice(0, bitWidth / VAR_SIZE, ...array);
+        }
+    }
+    ;
 
     // get either an x, a y or a z register, where "register" is a string like xmm0
     get = (register) => {
-        const idx = +register.substring(3);// number of the register, should be between 0 and 32 on x64
-        const type = register[0];// should be x, y or z
-        //return the last n elements of the register.
-        return this._keys[idx].slice(0, TYPE_LENGTH[type])// slice apparently copies the value
+        if (isSIMDRegister.test(register)) {
+            const idx = +register.substring(3);// number of the register, should be between 0 and 32 on x64
+            const type = register[0];// should be x, y or z
+            //return the last n elements of the register.
+            return this._SIMDRegisters[idx].slice(0, TYPE_LENGTH[type])// slice apparently copies the value
+        }
+
+        const {bitWidth, index} = GPRegistersNameMap[register];
+        if (bitWidth && index)
+            return this._GPRegisters[index].slice(0, bitWidth / VAR_SIZE);
+
+        else return null;
     };
 
-    // clear resets the "registers" to randomized valued (?)
+    // clear resets the "registers"
     clear = () => {
-        this._keys.map(() =>
-            new Array(TYPE_LENGTH["z"]).fill(0).map(() =>
-                _.random(1, 255)
-            ));
+        this._SIMDRegisters.map(() =>
+            new Array(TYPE_LENGTH["z"]).fill(0).map((val, i) => i));
+
+        this._GPRegisters.map(() =>
+            new Array(ARCHITECTURE_SIZE / VAR_SIZE).fill(0).map((val, i) => i));
     }
 }
 
diff --git a/src/components/ASMVisualizer.js b/src/components/ASMVisualizer.js
index f44a77a..276184a 100644
--- a/src/components/ASMVisualizer.js
+++ b/src/components/ASMVisualizer.js
@@ -8,6 +8,7 @@ import {Row, Col, Button, Container} from 'reactstrap';
 import '../css/ASMVisualizer.css'
 import Shift from "../ASMComponents/Shift";
 import Arithmetic from "../ASMComponents/Arithmetic";
+import * as _ from "lodash";
 
 
 const ButtonContainer = styled.div`
@@ -55,12 +56,13 @@ class AsmVisualizer extends Component {
         let stack = [];
         this.props.asm.forEach((func) => {
             let commands = func.body;
-            stack.push(<Function name={func.name}/>);
+            stack.push(<Function name={func.name} params={func.params}/>);
             commands.forEach(c => {
                 let command = commandFactory(c);
+                const defaultValues = _.filter(func.params, param => c.params.some(e => e === param.register));
                 stack.push(
                     //c.line - 1 because line number starts at 1 and we need to start at 0.
-                    React.cloneElement(command, {name: c.name, params: c.params, line: c.line - 1})
+                    React.cloneElement(command, {name: c.name, params: c.params, line: c.line - 1, defaultValues})
                 );
             });
         });
@@ -109,6 +111,8 @@ class AsmVisualizer extends Component {
         let buttons = [];
         //buttons.push(<FontAwesomeIcon icon="backward" onClick={this.backward.bind(this)}/>);
 
+        buttons.push({icon: <i className="fas fa-sliders-h"></i>, onClick: this.props.onGoToParameters});
+
         play === true ?
             buttons.push({icon: <i className="fas fa-pause"></i>, onClick: this.pause.bind(this)})
             :
@@ -118,7 +122,7 @@ class AsmVisualizer extends Component {
         buttons.push({icon: <i className="fas fa-sync-alt"></i>, onClick: this.restart.bind(this)});
 
         return (
-            <Container>
+            <Container style={{"marginBottom": "30px"}}>
                 <Row>
                     {
                         buttons.map((button, i) => (
diff --git a/src/components/App.js b/src/components/App.js
index 93b5e06..b52cf82 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -17,11 +17,9 @@ import {Pane, Tabs} from "../Utils/Tabs";
 import AsmVisualizer from "./ASMVisualizer";
 import {createBrowserHistory} from 'history';
 import * as qs from 'qs';
-import Vector from "../ASMComponents/Vector";
+import ParametersPage from "./ParametersPage";
 import * as _ from "lodash";
-import anime from 'animejs';
-import Shift from "../ASMComponents/Shift";
-import Arithmetic from "../ASMComponents/Arithmetic";
+
 
 
 const Container = styled.div`
@@ -57,21 +55,24 @@ class App extends Component {
             clangAst: {},
             asm: [],
             error: [],
-            visualize: false
+            visualize: false,
+            parametersChosen: false
         };
         if (this.props.match.params.code) {
             this.state.code = qs.parse(this.props.match.params.code).code
         }
         else if (savedState) {
-            this.state = JSON.parse(savedState);
+            // React wants us to mutate the state or it will lose the right reference...
+            _.assign(this.state, JSON.parse(savedState));
             this.state.visualize = false;
+            this.state.parametersChosen = false;
         }
 
         this.cm = React.createRef();
     }
 
-    componentWillUpdate(nextProps, nextState) {
-        localStorage.setItem("app-state", JSON.stringify(nextState));
+    componentDidUpdate() {
+        localStorage.setItem("app-state", JSON.stringify(this.state));
     }
 
     handleClear = (clearCode = true) => {
@@ -102,7 +103,8 @@ class App extends Component {
                             error,
                             clangAst: ast,
                             codeWasModifiedSinceLastCompile: false,
-                            visualize: true
+                            visualize: true,
+                            parametersChosen: false
                         }
                     });
                 }
@@ -114,7 +116,9 @@ class App extends Component {
                 }
             })
         }
-        else this.setState({compiling: false, visualize: true});
+        else {
+            this.setState({compiling: false, visualize: true})
+        }
     };
 
     restart = () => {
@@ -126,15 +130,20 @@ class App extends Component {
                 codeWasModifiedSinceLastCompile: true,
                 clangAst: {},
                 error: [],
-                visualize: false
+                visualize: false,
+                parametersChosen: false
             }
         });
     };
 
+    onParametersChosen() {
+        this.setState({parametersChosen: true});
+    }
+
     getShareLink = () => {
         //We need to specify the whole URL since we are in dev and bitly cannot work with localhost links.
         return 'https://piotte13.github.io/SIMD-Visualiser/#/link/' + qs.stringify({code: this.state.code})
-        //return window.location.origin + "/link" + qs.stringify(this.state)
+        //return window.location.origin + "#/link" + qs.stringify(this.state)
     };
 
     getCodeMirror() {
@@ -152,13 +161,12 @@ class App extends Component {
                     gutters: ["CodeMirror-lint-markers"],
                 }}
                 onBeforeChange={(editor, data, code) => {
-                    this.setState({codeWasModifiedSinceLastCompile: true});
                     this.history.push(this.history.location.pathname);
                     if (code === '') {
-                        this.handleClear(true)
+                        this.handleClear(true);
+                        this.setState({codeWasModifiedSinceLastCompile: true});
                     } else {
-                        this.setState({code});
-                        //this.myInterpreter = getInterpreter(code)
+                        this.setState({code, codeWasModifiedSinceLastCompile: true});
                     }
                 }}
                 onPaste={() => {
@@ -169,24 +177,8 @@ class App extends Component {
         )
     }
 
-    getTabs() {
-        return (
-            <Tabs selected={0}>
-                <Pane label="Graphical">
-                    {/*<AsmVisualizer cm={this.cm} asm={this.state.asm}/>*/}
-                </Pane>
-                <Pane label="AST">
-                    {/*<AstVisualizer cm={this.cm} ast={this.state.ast}/>*/}
-                </Pane>
-            </Tabs>
-        )
-    }
-
     render() {
-        const {disableButtons, status, compiling, error} = this.state;
-
-        //let rightPage = <Shift ref="shiftVec" direction="left" bitWidth={32} params={["xmm0", "xmm1", "2"]}/>
-        //let rightPage = <Arithmetic ref="shiftVec" bitWidth={32} base={10} params={["xmm0", "xmm1", "xmm0"]}/>;
+        const {disableButtons, status, compiling, error, visualize, parametersChosen} = this.state;
 
         let rightPage = <FrontPage/>;
 
@@ -196,16 +188,20 @@ class App extends Component {
         else if (error.length > 0) {
             rightPage = <ErrorHandler cm={this.cm} error={error}/>
         }
-        else if (this.state.visualize) {
+        else if (visualize && parametersChosen) {
             rightPage = <Tabs selected={0}>
                 <Pane label="Graphical">
-                    <AsmVisualizer cm={this.cm} asm={this.state.asm}/>
+                    <AsmVisualizer cm={this.cm} asm={this.state.asm}
+                                   onGoToParameters={() => this.setState({parametersChosen: false})}/>
                 </Pane>
                 <Pane label="AST">
                     <AstVisualizer cm={this.cm} ast={this.state.ast}/>
                 </Pane>
             </Tabs>
         }
+        else if (visualize) {
+            rightPage = <ParametersPage asm={this.state.asm} onComplete={this.onParametersChosen.bind(this)}/>
+        }
 
         return (
             <Container>
diff --git a/src/components/ParametersPage.js b/src/components/ParametersPage.js
new file mode 100644
index 0000000..465505b
--- /dev/null
+++ b/src/components/ParametersPage.js
@@ -0,0 +1,305 @@
+import React, {Component} from 'react';
+import styled from 'styled-components'
+import {
+    Button, Card, CardBody, CardTitle, Row, Col, Container, ButtonGroup
+} from 'reactstrap';
+import * as _ from "lodash";
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css';
+import 'rc-tooltip/assets/bootstrap.css';
+import {FAST_CALL_REGISTERS, TYPE_LENGTH} from "../Utils/Registry";
+import {convert} from "../Utils/Converter";
+
+const PageContainer = styled.div`
+    padding: 50px;
+`
+
+const Title = styled.div`
+    font-size: 60px;
+    font-weight: 700;
+    color: rgb(72, 72, 72);
+    margin-bottom: 15px;
+    text-align: center;
+`
+
+const SubmitButton = styled.div`
+    position: absolute;
+    bottom: 50px;
+    left: calc(75% - 55px);
+    button{font-size: 1.5rem};
+`
+const FunctionContainer = styled.div`
+
+`
+const FunctionName = styled.div`
+    text-align: center;
+    margin-top: 50px;
+    font-size: 32px;
+    font-weight: normal;
+    color: rgb(72, 72, 72);
+`
+
+const ParameterContainer = styled.div`
+    padding: 20px 0;
+    
+    .card-title {
+        margin-bottom: 0;
+        height: 100%;
+        line-height: 1.7rem;
+    }
+    
+    .card-body{
+        padding: 1rem;
+        
+        .row{
+            margin-bottom: 10px;
+        }
+    
+`
+
+const ParameterOptionTitle = styled(Col)`
+    align-self: center;
+    height: 1.5rem;
+`
+
+const RandomizeButton = styled.div`
+    float: right;
+    cursor: pointer;
+    color: var(--one);
+    font-size: 1.7rem;
+`
+
+const VectorContainer = styled(Container)`
+    width: 96% !important;
+    height: 50px;
+    background-color: var(--main);
+    border-radius: 3px;
+    //margin: 0 2%;
+    box-shadow: 3px 3px 2px rgba(0,0,0,.4);
+    
+    .row{
+        height: 100%;
+    
+        .col{
+            text-align: center;
+            padding: 0;
+            
+            input{
+                width: 100%;
+                height: 100%;
+                color: var(--clear-text-color);
+                text-align: center;
+                border-radius: 0;
+                border: none;
+                background-color: inherit;
+                border-right: solid 1px var(--gray);
+            }
+            
+            :last-child input{
+                    border-right: none;
+                }
+        }
+    }
+}
+`;
+
+export default class ParametersPage extends Component {
+    constructor(props) {
+        super(props);
+        this.setRegistersNamesAndValues();
+    }
+
+    componentDidMount() {
+
+    }
+
+    setRegistersNamesAndValues() {
+        this.props.asm.forEach((func, i) => {
+            let generalPurposeRegisterCount = 0;
+            let simdRegisterCount = 0;
+            func.params.forEach((param, j) => {
+                //if param.lanes === 1, it means we have a general purpose register. (it's not a vector)
+                if (param.lanes === 1) {
+                    param.register = FAST_CALL_REGISTERS[generalPurposeRegisterCount];
+                    generalPurposeRegisterCount++;
+                }
+                else {
+                    //reconstruct the SIMD register name.
+                    param.register = _.invert(TYPE_LENGTH)[(param.bitWidth * param.lanes) / 8] + "mm" + simdRegisterCount;
+                    simdRegisterCount++;
+                }
+                this.randomizeRegister(i, j)
+            })
+        })
+    }
+
+    getSliderMarks(paramBitLen) {
+        //Make sure laneWidth cannot be smaller than 4 bits
+        paramBitLen = _.max([4, paramBitLen]);
+        //Make sure laneWidth cannot be bigger than 64 bits
+        paramBitLen = _.min([paramBitLen, 64]);
+        const nbOfMarks = Math.log(paramBitLen) / Math.log(2) - 1;
+        let marks = {};
+        _.times(nbOfMarks).forEach(i => {
+            const percentage = 100 * (i + 1) / nbOfMarks;
+            marks[percentage] = Math.pow(2, i + 2);
+        });
+
+        return marks
+    };
+
+    onTypeChange(selected, functionNumber, paramNumber) {
+        this.props.asm[functionNumber].params[paramNumber].type = selected;
+        this.forceUpdate();
+    }
+
+    onWidthChange(newWidth, functionNumber, paramNumber) {
+        let param = this.props.asm[functionNumber].params[paramNumber];
+        const bitLen = param.bitWidth * param.lanes;
+        param.value = convert(param.value, param.type, newWidth, param.type, param.bitWidth);
+        param.bitWidth = newWidth;
+        param.lanes = bitLen / newWidth;
+
+        this.forceUpdate();
+    }
+
+    onBaseChange(selected, functionNumber, paramNumber) {
+        this.props.asm[functionNumber].params[paramNumber].base = selected;
+        this.forceUpdate();
+    }
+
+    onVectorValueChange(val, functionNumber, paramNumber, lane) {
+        let param = this.props.asm[functionNumber].params[paramNumber];
+        param.value[lane] = _.min([parseInt(val, param.base), Math.pow(2, param.bitWidth - 1)]);
+        this.forceUpdate();
+    }
+
+    randomizeRegister(functionNumber, paramNumber) {
+        let param = this.props.asm[functionNumber].params[paramNumber];
+        if (param.lanes === 1) {
+            param.value = [_.random(1, Math.pow(2, _.min([8, param.bitWidth - 1])))];
+        }
+        else {
+            param.value = new Array(param.lanes).fill(0).map(() => _.random(1, Math.pow(2, _.min([8, param.bitWidth - 1]))));
+        }
+    }
+
+    buildContent() {
+        let content = [];
+        this.props.asm.forEach((func, i) => {
+            content.push(
+                <FunctionContainer key={i}>
+                    <FunctionName>{func.name}</FunctionName>
+                    <hr/>
+                    {
+                        func.params.map((param, j) => {
+                            const paramBitLen = param.bitWidth * param.lanes;
+                            const marks = this.getSliderMarks(paramBitLen);
+
+
+                            return <ParameterContainer key={j}>
+                                <Card>
+                                    <CardBody>
+                                        <CardTitle>
+                                            {`Parameter ${j + 1}:`}&nbsp;&nbsp;
+                                            <strong>{`${paramBitLen} bits`}</strong>
+                                            <RandomizeButton onClick={() => {
+                                                this.randomizeRegister(i, j);
+                                                this.forceUpdate()
+                                            }}>
+                                                <i className="fas fa-dice"></i>
+                                            </RandomizeButton>
+                                        </CardTitle>
+                                    </CardBody>
+                                    <VectorContainer>
+                                        <Row>
+                                            {
+                                                param.value.map((val, k) => (
+                                                    <Col key={k}>
+                                                        <input type="text"
+                                                               value={val.toString(param.base)}
+                                                               onChange={(e) => this.onVectorValueChange(e.target.value, i, j, k)}/>
+                                                    </Col>
+                                                ))
+                                            }
+                                        </Row>
+                                    </VectorContainer>
+                                    <CardBody>
+                                        <Container>
+                                            <Row>
+                                                <ParameterOptionTitle xs="3" sm="2">Lane
+                                                    Width: &nbsp;</ParameterOptionTitle>
+                                                <Col>
+                                                    <Slider style={{margin: "20px auto"}}
+                                                            handleStyle={{
+                                                                height: 20,
+                                                                width: 20,
+                                                                marginLeft: -10,
+                                                                marginTop: -8,
+                                                            }}
+                                                            min={0}
+                                                            defaultValue={+_.invert(marks)[param.bitWidth]}
+                                                            marks={marks}
+                                                            step={null}
+                                                            onChange={(val) => this.onWidthChange(marks[val], i, j)}/>
+                                                </Col>
+                                            </Row>
+                                            <Row>
+                                                <ParameterOptionTitle xs="3" sm="2">Type: </ParameterOptionTitle>
+                                                <Col>
+                                                    <ButtonGroup>
+                                                        <Button disabled
+                                                                color="info"
+                                                                onClick={() => this.onTypeChange('int', i, j)}
+                                                                active={param.type === 'int'}>Integer</Button>
+                                                        <Button disabled
+                                                                color="info"
+                                                                onClick={() => this.onTypeChange('float', i, j)}
+                                                                active={param.type === 'float'}>Floating Point</Button>
+                                                    </ButtonGroup>
+                                                </Col>
+                                            </Row>
+                                            <Row>
+                                                <ParameterOptionTitle xs="3" sm="2">Base: </ParameterOptionTitle>
+                                                <Col>
+                                                    <ButtonGroup>
+                                                        <Button disabled
+                                                                color="info"
+                                                                onClick={() => this.onBaseChange(2, i, j)}
+                                                                active={param.base === 2}>Binary</Button>
+                                                        <Button color="info"
+                                                                onClick={() => this.onBaseChange(10, i, j)}
+                                                                active={param.base === 10}>Decimal</Button>
+                                                        <Button color="info"
+                                                                onClick={() => this.onBaseChange(16, i, j)}
+                                                                active={param.base === 16}>Hexadecimal</Button>
+                                                    </ButtonGroup>
+                                                </Col>
+                                            </Row>
+                                        </Container>
+                                    </CardBody>
+                                </Card>
+                            </ParameterContainer>
+                        })
+                    }
+                </FunctionContainer>
+            )
+        });
+
+        return content;
+    }
+
+    render() {
+        return (
+            <PageContainer>
+                <Title>Choose your parameters</Title>
+                {
+                    this.buildContent()
+                }
+                <SubmitButton>
+                    <Button outline color="primary" onClick={this.props.onComplete}>Let's go</Button>
+                </SubmitButton>
+            </PageContainer>
+        )
+    }
+}
\ No newline at end of file