diff --git a/.idea/webServers.xml b/.idea/webServers.xml
index 472b06c..f312376 100644
--- a/.idea/webServers.xml
+++ b/.idea/webServers.xml
@@ -1,18 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="WebServers">
     <option name="servers">
-      <webServer id="85da660e-e5cc-40ab-96cf-16c701e7bfa5" name="amasson" url="https://amasson.ch/epfl">
+      <webServer id="85da660e-e5cc-40ab-96cf-16c701e7bfa5" name="amasson (project level)" url="https://amasson.ch/epfl">
         <fileTransfer host="192.168.1.20" port="22" rootFolder="/amasson/html/epfl" accessType="SFTP">
           <advancedOptions>
             <advancedOptions dataProtectionLevel="Private" shareSSLContext="true" />
           </advancedOptions>
           <option name="port" value="22" />
         </fileTransfer>
       </webServer>
       <webServer id="59e937d2-29b3-44c8-9206-23375a1c07c3" name="test local" url="http://localhost:63342">
-        <fileTransfer port="0" mountedRoot="C:\Users\almasson\Documents\c4science clone\costcalculator" accessType="MOUNT" />
+        <fileTransfer port="0" mountedRoot="$APPLICATION_HOME_DIR$/bin/C:\Users\almasson\Documents\c4science clone\costcalculator" accessType="MOUNT" />
       </webServer>
     </option>
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2be28e1..0f0a5cd 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,559 +1,548 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="32058667-6761-4492-a704-290762d93e35" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/webServers.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/webServers.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/css/costcalc.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/costcalc.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/costcal_export.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/costcal_export.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/js/costcalc_main.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/costcalc_main.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/js/data.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/data.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
     <ignored path="$PROJECT_DIR$/tmp/" />
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="FUSProjectUsageTrigger">
     <session id="-1435277962">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
           <entry key="project.closed" value="4" />
           <entry key="project.open.time.16" value="1" />
           <entry key="project.open.time.4" value="1" />
           <entry key="project.open.time.8" value="1" />
           <entry key="project.open.time.9" value="1" />
           <entry key="project.opened" value="4" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
           <entry key="back" value="1" />
           <entry key="css" value="1" />
           <entry key="html" value="3" />
           <entry key="js" value="11" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
           <entry key="CSS" value="1" />
           <entry key="HTML" value="3" />
           <entry key="JavaScript" value="11" />
           <entry key="PLAIN_TEXT" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="html" value="1223" />
           <entry key="js" value="2620" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="HTML" value="1223" />
           <entry key="JavaScript" value="2620" />
         </counts>
       </usages-collector>
     </session>
     <session id="-1962752238">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
-          <entry key="project.open.time.4" value="1" />
-          <entry key="project.opened" value="1" />
+          <entry key="project.closed" value="2" />
+          <entry key="project.open.time.4" value="3" />
+          <entry key="project.open.time.5" value="1" />
+          <entry key="project.opened" value="4" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
-          <entry key="html" value="7" />
-          <entry key="js" value="2702" />
+          <entry key="html" value="577" />
+          <entry key="js" value="5747" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
-          <entry key="HTML" value="7" />
-          <entry key="JavaScript" value="2702" />
+          <entry key="HTML" value="577" />
+          <entry key="JavaScript" value="5747" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
           <entry key="js" value="1" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
           <entry key="JavaScript" value="1" />
         </counts>
       </usages-collector>
     </session>
     <session id="2130354723">
       <usages-collector id="statistics.lifecycle.project">
         <counts>
           <entry key="project.closed" value="5" />
           <entry key="project.open.time.10" value="1" />
           <entry key="project.open.time.14" value="1" />
           <entry key="project.open.time.17" value="1" />
           <entry key="project.open.time.19" value="1" />
           <entry key="project.open.time.2" value="1" />
           <entry key="project.open.time.20" value="1" />
           <entry key="project.open.time.9" value="1" />
           <entry key="project.opened" value="7" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.edit">
         <counts>
           <entry key="css" value="199" />
           <entry key="html" value="45" />
           <entry key="js" value="10858" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.edit">
         <counts>
           <entry key="CSS" value="199" />
           <entry key="HTML" value="45" />
           <entry key="JavaScript" value="10858" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.extensions.open">
         <counts>
           <entry key="css" value="1" />
           <entry key="js" value="2" />
         </counts>
       </usages-collector>
       <usages-collector id="statistics.file.types.open">
         <counts>
           <entry key="CSS" value="1" />
           <entry key="JavaScript" value="2" />
         </counts>
       </usages-collector>
     </session>
   </component>
   <component name="FavoritesManager">
     <favorites_list name="costcalc" />
   </component>
   <component name="FileEditorManager">
     <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="788">
-              <caret line="55" lean-forward="true" selection-start-line="55" selection-end-line="55" />
+            <state relative-caret-position="-252">
+              <caret line="39" column="47" selection-start-line="39" selection-start-column="47" selection-end-line="39" selection-end-column="47" />
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/js/costcalc_main.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="452">
-              <caret line="970" column="10" selection-start-line="970" selection-start-column="10" selection-end-line="970" selection-end-column="10" />
+            <state relative-caret-position="265">
+              <caret line="1026" column="74" selection-start-line="1026" selection-start-column="74" selection-end-line="1026" selection-end-column="74" />
               <folding>
+                <element signature="n#!!block;n#Repeat#0" />
                 <element signature="n#!!block;n#tonumeric#0" />
+                <element signature="n#!!block;n#tomoney#0" />
                 <element signature="n#!!block;n#sum#0" />
                 <element signature="n#AmountInput#0" />
                 <element signature="n#SelectorInput#0" />
-                <element signature="n#MakeknowmoreInput#0" />
-                <element signature="n#CheckboxInput#0" />
-                <element signature="n#ButtonHrefInput#0" />
-                <element signature="n#ButtonInputWpop#0" />
-                <element signature="n#ButtonInput#0" />
-                <element signature="n#!!block;n#constructor#0;n#ButtonInput#0" />
                 <element signature="n#MenuInput#0" />
                 <element signature="n#TxtInput#0" />
                 <element signature="n#CostOutput#0" />
                 <element signature="n#!!block;n#Textoutput#0" />
                 <element signature="n#AmountRatesCost#0" />
                 <element signature="n#CategoryAmountRatesCost#0" />
                 <element signature="n#CategoryCost#0" />
                 <element signature="n#NoneSelect#0" />
                 <element signature="n#UserCost#0" />
                 <element signature="n#ProviderPluginsSelector#0" />
                 <element signature="n#!!block;n#makeinfo#0" />
-                <element signature="n#ModuleHeader#0" />
                 <element signature="n#ManagePlugins#0" />
                 <element signature="n#PluginsMain#0" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/js/costcal_export.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="336">
-              <caret line="14" selection-start-line="14" selection-end-line="14" />
+            <state relative-caret-position="156">
+              <caret line="6" column="29" selection-start-line="6" selection-start-column="29" selection-end-line="6" selection-end-column="29" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/css/costcalc.css">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="96">
-              <caret line="46" column="24" lean-forward="true" selection-start-line="46" selection-start-column="24" selection-end-line="46" selection-end-column="24" />
+            <state relative-caret-position="520">
+              <caret line="20" column="1" selection-start-line="20" selection-start-column="1" selection-end-line="20" selection-end-column="1" />
             </state>
           </provider>
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/js/data.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-653">
-              <caret line="261" column="23" lean-forward="true" selection-start-line="261" selection-start-column="4" selection-end-line="261" selection-end-column="23" />
+            <state relative-caret-position="802">
+              <caret line="263" column="12" selection-start-line="263" selection-start-column="12" selection-end-line="263" selection-end-column="12" />
               <folding>
                 <element signature="n#!!doc" expanded="true" />
               </folding>
             </state>
           </provider>
         </entry>
       </file>
     </leaf>
   </component>
   <component name="FileTemplateManagerImpl">
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="HTML File" />
         <option value="JavaScript File" />
       </list>
     </option>
   </component>
   <component name="FindInProjectRecents">
     <findStrings>
       <find>console</find>
       <find>tip</find>
       <find>tooltip</find>
       <find>url</find>
       <find>icon</find>
       <find>props.data.</find>
       <find>data</find>
       <find>ButtonInput</find>
       <find>TxtInput</find>
       <find>numeric</find>
       <find>here</find>
       <find>if</find>
       <find>UserCost</find>
     </findStrings>
     <replaceStrings>
       <replace>Url</replace>
       <replace>Icon</replace>
       <replace>Data</replace>
       <replace>UserCostSelect</replace>
     </replaceStrings>
   </component>
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
   <component name="IdeDocumentHistory">
     <option name="CHANGED_PATHS">
       <list>
         <option value="$PROJECT_DIR$/costcal.js" />
         <option value="$PROJECT_DIR$/js/costcal.js" />
         <option value="$PROJECT_DIR$/js/jquery.loan-calculator.js" />
         <option value="$PROJECT_DIR$/js/back" />
         <option value="$PROJECT_DIR$/js/jquery.nas-calculator.js" />
         <option value="$PROJECT_DIR$/script.js" />
         <option value="$PROJECT_DIR$/js/script.js" />
         <option value="$PROJECT_DIR$/js/popper.-1.14.3.min.js" />
-        <option value="$PROJECT_DIR$/css/costcalc.css" />
         <option value="$PROJECT_DIR$/js/data.js" />
-        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/js/costcal_export.js" />
+        <option value="$PROJECT_DIR$/css/costcalc.css" />
+        <option value="$PROJECT_DIR$/index.html" />
         <option value="$PROJECT_DIR$/js/costcalc_main.js" />
       </list>
     </option>
   </component>
   <component name="JsBowerSettings">
     <node-interpreter value="project" />
     <bower-package value="" />
     <bower.json value="" />
   </component>
   <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
   <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
   <component name="JsFlowSettings">
     <service-enabled>true</service-enabled>
     <exe-path />
     <other-services-enabled>true</other-services-enabled>
     <auto-save>true</auto-save>
   </component>
   <component name="JsGulpfileManager">
     <detection-done>true</detection-done>
     <sorting>DEFINITION_ORDER</sorting>
   </component>
-  <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="57" />
-    <option name="width" value="1646" />
-    <option name="height" value="1028" />
+  <component name="ProjectFrameBounds">
+    <option name="x" value="72" />
+    <option name="y" value="23" />
+    <option name="width" value="1680" />
+    <option name="height" value="1027" />
   </component>
   <component name="ProjectLevelVcsManager">
     <ConfirmationsSetting value="1" id="Add" />
   </component>
   <component name="ProjectView">
     <navigator proportions="" version="1">
       <foldersAlwaysOnTop value="true" />
     </navigator>
     <panes>
       <pane id="Scope" />
       <pane id="ProjectPane">
         <subPane>
           <expand>
             <path>
-              <item name="costcalculator" type="b2602c69:ProjectViewProjectNode" />
-              <item name="costcalculator" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="costcalculator" type="b2602c69:ProjectViewProjectNode" />
-              <item name="costcalculator" type="462c0819:PsiDirectoryNode" />
-              <item name="css" type="462c0819:PsiDirectoryNode" />
+              <item name="costcalc" type="b2602c69:ProjectViewProjectNode" />
+              <item name="costcalc" type="462c0819:PsiDirectoryNode" />
             </path>
             <path>
-              <item name="costcalculator" type="b2602c69:ProjectViewProjectNode" />
-              <item name="costcalculator" type="462c0819:PsiDirectoryNode" />
+              <item name="costcalc" type="b2602c69:ProjectViewProjectNode" />
+              <item name="costcalc" type="462c0819:PsiDirectoryNode" />
               <item name="icons" type="462c0819:PsiDirectoryNode" />
             </path>
-            <path>
-              <item name="costcalculator" type="b2602c69:ProjectViewProjectNode" />
-              <item name="costcalculator" type="462c0819:PsiDirectoryNode" />
-              <item name="js" type="462c0819:PsiDirectoryNode" />
-            </path>
           </expand>
           <select />
         </subPane>
       </pane>
     </panes>
   </component>
   <component name="PropertiesComponent">
     <property name="DefaultHtmlFileTemplate" value="HTML File" />
-    <property name="WebServerToolWindowFactoryState" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="WebServerToolWindowPanel.toolwindow.highlight.mappings" value="true" />
     <property name="WebServerToolWindowPanel.toolwindow.highlight.symlinks" value="true" />
     <property name="WebServerToolWindowPanel.toolwindow.show.date" value="false" />
     <property name="WebServerToolWindowPanel.toolwindow.show.permissions" value="false" />
     <property name="WebServerToolWindowPanel.toolwindow.show.size" value="false" />
     <property name="last_opened_file_path" value="$PROJECT_DIR$/index.html" />
     <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
     <property name="nodejs_npm_path_reset_for_default_project" value="true" />
     <property name="nodejs_package_manager_path" value="npm" />
     <property name="settings.editor.selected.configurable" value="configurable.group.build" />
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="C:\Users\almasson\WebstormProjects\costcalc\js" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\almasson\WebstormProjects\costcalc\js" />
     </key>
   </component>
   <component name="RunDashboard">
     <option name="ruleStates">
       <list>
         <RuleState>
           <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
         </RuleState>
         <RuleState>
           <option name="name" value="StatusDashboardGroupingRule" />
         </RuleState>
       </list>
     </option>
   </component>
   <component name="RunManager">
     <configuration default="true" type="EMBER_SERVE_CONFIGURATION" factoryName="Ember serve configuration factory">
       <option name="PORT" value="" />
       <option name="HOST" value="" />
       <option name="ENVIRONMENT" value="development" />
       <option name="OUTPUT_PATH" value="" />
       <option name="WATCHER" value="" />
       <option name="PROXY" value="" />
       <option name="PROXY_SECURE" value="true" />
       <option name="PROXY_TRANSPARENT" value="true" />
       <option name="LIVE_RELOAD" value="true" />
       <option name="LIVE_RELOAD_HOST" value="" />
       <option name="LIVE_RELOAD_BASE_URL" value="" />
       <option name="LIVE_RELOAD_PORT" value="" />
       <option name="SSL" value="false" />
       <option name="SSL_KEY" value="" />
       <option name="SSL_CERT" value="" />
       <method v="2" />
     </configuration>
     <configuration name="Unnamed" type="JavascriptDebugType" factoryName="JavaScript Debug" uri="http://localhost:63342/index.html?_ijt=guj9n9f47nlcpp7nsqo0ugkca2" useFirstLineBreakpoints="true">
       <method v="2" />
     </configuration>
   </component>
   <component name="SvnConfiguration">
     <configuration />
   </component>
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
       <changelist id="32058667-6761-4492-a704-290762d93e35" name="Default Changelist" comment="" />
       <created>1535982823834</created>
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1535982823834</updated>
       <workItem from="1535982828668" duration="19283000" />
       <workItem from="1536218261639" duration="6867000" />
       <workItem from="1536319807631" duration="928000" />
       <workItem from="1536320859977" duration="9682000" />
       <workItem from="1536564487126" duration="16495000" />
       <workItem from="1536587075054" duration="5104000" />
       <workItem from="1536649322932" duration="826000" />
       <workItem from="1536667806952" duration="596000" />
       <workItem from="1536829100586" duration="23501000" />
       <workItem from="1537433681918" duration="7558000" />
       <workItem from="1537443755183" duration="777000" />
       <workItem from="1537444693375" duration="28067000" />
+      <workItem from="1537778687831" duration="229000" />
+      <workItem from="1537778949283" duration="9793000" />
+      <workItem from="1537868487913" duration="5889000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="119684000" />
+    <option name="totallyTimeSpent" value="135595000" />
   </component>
   <component name="TodoView">
     <todo-panel id="selected-file">
       <is-autoscroll-to-source value="true" />
     </todo-panel>
     <todo-panel id="all">
       <are-packages-shown value="true" />
       <is-autoscroll-to-source value="true" />
     </todo-panel>
   </component>
   <component name="ToolWindowManager">
-    <frame x="57" y="-8" width="1871" height="1216" extended-state="6" />
+    <frame x="72" y="23" width="1680" height="1027" extended-state="0" />
+    <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" sideWeight="0.4988263" visible="true" weight="0.18330605" />
+      <window_info active="true" content_ui="combo" id="Project" order="0" sideWeight="0.4988263" visible="true" weight="0.17842074" />
       <window_info id="Structure" order="1" sideWeight="0.50117373" side_tool="true" weight="0.2496329" />
       <window_info id="Favorites" order="2" sideWeight="0.50117373" side_tool="true" weight="0.2496329" />
       <window_info anchor="bottom" id="Message" order="0" />
       <window_info anchor="bottom" id="Find" order="1" weight="0.3284091" />
       <window_info anchor="bottom" id="Run" order="2" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.39981273" />
       <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.3297062" />
       <window_info anchor="bottom" id="Terminal" order="9" />
       <window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
-      <window_info anchor="bottom" id="File Transfer" order="11" visible="true" weight="0.22284645" />
-      <window_info active="true" anchor="right" id="Remote Host" weight="0.28879073" />
+      <window_info anchor="bottom" id="File Transfer" order="11" visible="true" weight="0.22198041" />
       <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
       <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
       <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="right" id="Remote Host" order="3" weight="0.2887668" />
     </layout>
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="1" />
   </component>
   <component name="VcsContentAnnotationSettings">
     <option name="myLimit" value="2678400000" />
   </component>
   <component name="editorHistoryManager">
     <entry file="file://$PROJECT_DIR$/js/bootstrap.js">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
     <entry file="file://$PROJECT_DIR$/js/bootstrap.bundle.js">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
     <entry file="file://$PROJECT_DIR$/js/costcal.js" />
     <entry file="file://$PROJECT_DIR$/js/jquery.loan-calculator.js" />
     <entry file="file://$PROJECT_DIR$/js/back" />
     <entry file="file://$PROJECT_DIR$/js/jquery-ui.css">
       <provider selected="true" editor-type-id="text-editor" />
     </entry>
     <entry file="file://$USER_HOME$/Desktop/6668a1f6986742109c00a581ce704605-f6c882b6ae18bde42dcf6fdb751aae93495a2275/index.html" />
     <entry file="file://$PROJECT_DIR$/js/jsonform.js" />
     <entry file="file://$PROJECT_DIR$/js/like_button.js" />
     <entry file="file://$PROJECT_DIR$/js/jquery.nas-calculator.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="4872">
           <caret line="208" column="10" selection-start-line="208" selection-start-column="10" selection-end-line="212" selection-end-column="11" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/js/popper-1.14.3.min.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="120">
           <caret line="5" selection-start-line="5" selection-end-line="5" />
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/css/costcalc.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="96">
-          <caret line="46" column="24" lean-forward="true" selection-start-line="46" selection-start-column="24" selection-end-line="46" selection-end-column="24" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/js/data.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-653">
-          <caret line="261" column="23" lean-forward="true" selection-start-line="261" selection-start-column="4" selection-end-line="261" selection-end-column="23" />
+        <state relative-caret-position="802">
+          <caret line="263" column="12" selection-start-line="263" selection-start-column="12" selection-end-line="263" selection-end-column="12" />
           <folding>
             <element signature="n#!!doc" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/js/costcal_export.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="156">
+          <caret line="6" column="29" selection-start-line="6" selection-start-column="29" selection-end-line="6" selection-end-column="29" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/css/costcalc.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="520">
+          <caret line="20" column="1" selection-start-line="20" selection-start-column="1" selection-end-line="20" selection-end-column="1" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="788">
-          <caret line="55" lean-forward="true" selection-start-line="55" selection-end-line="55" />
+        <state relative-caret-position="-252">
+          <caret line="39" column="47" selection-start-line="39" selection-start-column="47" selection-end-line="39" selection-end-column="47" />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/js/costcalc_main.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="452">
-          <caret line="970" column="10" selection-start-line="970" selection-start-column="10" selection-end-line="970" selection-end-column="10" />
+        <state relative-caret-position="265">
+          <caret line="1026" column="74" selection-start-line="1026" selection-start-column="74" selection-end-line="1026" selection-end-column="74" />
           <folding>
+            <element signature="n#!!block;n#Repeat#0" />
             <element signature="n#!!block;n#tonumeric#0" />
+            <element signature="n#!!block;n#tomoney#0" />
             <element signature="n#!!block;n#sum#0" />
             <element signature="n#AmountInput#0" />
             <element signature="n#SelectorInput#0" />
-            <element signature="n#MakeknowmoreInput#0" />
-            <element signature="n#CheckboxInput#0" />
-            <element signature="n#ButtonHrefInput#0" />
-            <element signature="n#ButtonInputWpop#0" />
-            <element signature="n#ButtonInput#0" />
-            <element signature="n#!!block;n#constructor#0;n#ButtonInput#0" />
             <element signature="n#MenuInput#0" />
             <element signature="n#TxtInput#0" />
             <element signature="n#CostOutput#0" />
             <element signature="n#!!block;n#Textoutput#0" />
             <element signature="n#AmountRatesCost#0" />
             <element signature="n#CategoryAmountRatesCost#0" />
             <element signature="n#CategoryCost#0" />
             <element signature="n#NoneSelect#0" />
             <element signature="n#UserCost#0" />
             <element signature="n#ProviderPluginsSelector#0" />
             <element signature="n#!!block;n#makeinfo#0" />
-            <element signature="n#ModuleHeader#0" />
             <element signature="n#ManagePlugins#0" />
             <element signature="n#PluginsMain#0" />
           </folding>
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/js/costcal_export.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="336">
-          <caret line="14" selection-start-line="14" selection-end-line="14" />
-        </state>
-      </provider>
-    </entry>
   </component>
   <component name="masterDetails">
     <states>
       <state key="ScopeChooserConfigurable.UI">
         <settings>
           <splitter-proportions>
             <option name="proportions">
               <list>
                 <option value="0.2" />
               </list>
             </option>
           </splitter-proportions>
         </settings>
       </state>
     </states>
   </component>
 </project>
\ No newline at end of file
diff --git a/css/costcalc.css b/css/costcalc.css
index b2755df..76ce072 100644
--- a/css/costcalc.css
+++ b/css/costcalc.css
@@ -1,84 +1,93 @@
-@media screen and (max-width: 768px) {
-    .lead {
-        font-size:25px;
+html {
+    font-size: 1rem;
+}
+
+@include media-breakpoint-up(sm) {
+    html {
+        font-size: 1.2rem;
     }
 }
 
-@media screen and (max-width: 568px) {
-    .lead {
-        font-size:0.5em;
+@include media-breakpoint-up(md) {
+    html {
+        font-size: 1.4rem;
     }
 }
 
+@include media-breakpoint-up(lg) {
+    html {
+        font-size: 1.6rem;
+    }
+}
 #plugin-name{
     text-transform: capitalize;
     font-size: $h2-font-size;
     font-weight: bold;
 }
 #plugin-number{
     font-size: large;
     text-decoration: none;
 }
 
 #plugin-info{
     font-size: large;
     text-decoration: none;
     text-align: center;
 }
 #plugin-cost{
      text-align: center;
      font-size: large;
     ;
  }
 #plugin-menu{
     padding-top: 0.5em;
     padding-bottom: 0.5em;
     padding-left: 1em;
 }
 #plugin-knowmore {
     padding-top: 0.1em;
     padding-bottom: 0.1em;
     padding-left: 0.1em;
     padding-right: 0.1em;
 }
 #plugin-add{
     padding-top: 0.1em;
     padding-bottom: 0.1em;
     padding-left: 0.1em;
     padding-right: 0.1em;
 }
 #ccost{
     text-align: center;
     font-size: large;
 }
 #module-name{
     font-weight: bold;
 }
 
 #provider-selector{
     padding-top: 1em;
     padding-bottom: 0em;
     padding-left: 2em;
     padding-right: 0.1em;
 }
 #component{
     padding-top: 1em;
     padding-bottom: 1em;
     padding-left: 1em;
     padding-right: 1em;
 }
 
 #infotxt{
     text-align: center;
 }
 #service{
     font-size: medium;
     font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     text-align: center;
 }
 
 #ctotal{
     text-align: center;
     font-size: $h2-font-size;
     font-weight: bold;
 }
\ No newline at end of file
diff --git a/icons/costcalc.png b/icons/costcalc.png
new file mode 100644
index 0000000..292e3dc
Binary files /dev/null and b/icons/costcalc.png differ
diff --git a/icons/totalcost.png b/icons/totalcost.png
new file mode 100644
index 0000000..be45da6
Binary files /dev/null and b/icons/totalcost.png differ
diff --git a/index.html b/index.html
index 4a2c565..1c28b87 100644
--- a/index.html
+++ b/index.html
@@ -1,60 +1,75 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 
-    <title>Cost Calculator (beta)</title>
+    <title>Cost Calculator</title>
 
     <!-- Load React. -->
     <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
 
     <!--Load Bootstrap-->
     <!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
     <script src="js/jquery-3.3.1.js"></script>
     <!--<script src="js/jquery-ui.js"></script>-->
 
     <!--<script src="js/popper-1.14.3.min.js"></script>-->
     <script src="js/bootstrap.bundle.js"></script>
 
     <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
     <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
 
     <link rel="stylesheet" href="css/bootstrap.css">
     <!--<script src="js/bootstrap.bundle.js"></script>-->
     <!--<script src="js/jquery.nas-calculator.js"></script>-->
     <link rel="stylesheet" href="css/costcalc.css">
     <script src="js/data.js"></script>
 
     <script type="text/jsx" src="js/costcalc_main.js"></script>
     <script src="js/costcal_export.js"></script>
     <!--<script>-->
         <!--$(window).bind('beforeunload', function(){-->
             <!--return '>>>>>Before You Go<<<<<<<< \n Your data will be lost are you sure ?';-->
         <!--});-->
     <!--</script>-->
-
+    <link rel="icon" href="./icons/costcalc.png">
 
 </head>
 <body>
 <div class="jumbotron jumbotron-fluid">
     <div class="container">
-        <h1 class="display-4">Cost Calculator (beta V1.5)</h1>
+        <div class="row">
+            <div class="col-auto">
+                <img src="./icons/costcalc.png" width="100">
+            </div>
+            <div class="col-auto">
+        <h1 class="display-4"> Cost Calculator for Data Management</h1>
+            </div>
+            <div class="col">
         <p class="lead">
-        Welcome to our cost calculator this tool will help for ...
+            Welcome to our cost calculator this tool will help researcher/professor to have an estimate of the cost of managing, storing and publishing data.
+        </p>
+        <p className="lead">
+            Many providers are included in the service and you will be able to calculate a cost based on your needs. Total cost is calculated dynamically based on your inputs.
+        </p>
+        <p className="lead">
+            We hope you will enjoy this tool and it will be useful for you.
         </p>
+            </div>
+        </div>
     </div>
 </div>
  <div id="root">
      <!-- This div's content will be managed by React. -->
  </div>
 
 
 </body>
 </html>
 
 
diff --git a/js/costcal_export.js b/js/costcal_export.js
index 65fd2c3..d9e3139 100644
--- a/js/costcal_export.js
+++ b/js/costcal_export.js
@@ -1,14 +1,16 @@
 function toJSONString( form ) {
     let obj = {};
     let elements = form.querySelectorAll( "input, select, textarea" );
-    for( let i = 0; i < elements.length; ++i ) {
+    console.log(elements);
+    for( var i = 0; i < elements.length; ++i ) {
         let element = elements[i];
-        let name = element.name;
+        let name = element.id;
         let value = element.value;
 
         if( name ) {
+            console.log(name);
             obj[ name ] = value;
         }
     }
     return JSON.stringify( obj );
 }
diff --git a/js/costcalc_main.js b/js/costcalc_main.js
index c4e8e7c..dd310ab 100644
--- a/js/costcalc_main.js
+++ b/js/costcalc_main.js
@@ -1,1025 +1,1101 @@
 'use strict';
 
 // Functions Tools
 // ---------------------
 // ---------------------
-
-
-
 function Repeat(props) {
     let items = [];
     for (let i = 0; i < props.numTimes; i++) {
         items.push(props.children(i));
     }
     return <div>{items}</div>;
 }
 
 function tonumeric (value) {
     return parseFloat(
         value.toString().replace(/[^0-9\.]+/g, '')
     );
 }
 
 function tomoney(numeric) {
     if (typeof numeric == 'string') {
         numeric = parseFloat(numeric);
     }
 
     return numeric.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') + ' '+MainData.Currency;
 }
 
 function sum(obj) {
     const val=Object.values(obj);
     var total = 0;
     for (var i = 0; i < val.length; i++) {
         total = total + tonumeric(val[i]);
     }
     return total;
 }
 
 // Inputs Definition
 // ---------------------
 // ---------------------
 class AmountInput extends React.Component {
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
     }
 
     handleChange(e) {
         this.props.onChange(e.target.value);
     }
 
     render() {
         const value = this.props.value;
         return (
             <div className="col"   >
                 <span data-toggle="tooltip" data-placement="top" title={this.props.tips}>
                 <label htmlFor={this.props.id}> {this.props.name} </label>
                 <input type="range" className="form-control-range" id={this.props.id} min={this.props.min} max={this.props.max}
                        step={this.props.step} value={value}  onChange={this.handleChange}/>
                 <small id="nas-amount-cost" className="form-text text-muted">Amount : {value} {this.props.unit} </small>
                 </span>
             </div>
         );
     }
 }
 
 class SelectorInput extends React.Component {
     constructor(props) {
         super(props);
         // this.state={listoptions:this.makelist(props.options)};
         this.handleChange = this.handleChange.bind(this);
 
     }
     rate(i){
         return i;
     }
     makelist(data){
         var listoptions=[];
 
         for (var i = 0; i < data.length; i++) {
             listoptions.push(<button className="dropdown-item btn-success " type="button" key={i}  value={this.rate(i)} onClick={this.handleChange}>{data[i]}</button>);
         }
         return listoptions;
     }
     handleChange(select) {
         this.props.onChange(select.target.value);
     }
     makerate(){
         if (this.props.rate!=null){
             return( <small id="nas-amount-cost" className="form-text text-muted">Rate : {this.props.rate}  {this.props.unit}</small> );}
     }
     maketitle(title){
         const maxstr=20
         if (title.length>maxstr){
             title=title.substr(0,maxstr)+"...";
         }
         return title;
     }
     render() {
         return (
 
             <div className="Container">
 
                 <div className="row">
                     <label htmlFor={this.props.id}> {this.props.name} </label>
                 </div>
 
 
                 <div className="row">
             <div className="btn-group">
 
 
                 <a className={"btn "+this.props.class+" dropdown-toggle"} href="#" role="button" id={this.props.id} data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" >
             <span  data-toggle="tooltip" data-placement="top" title={this.props.tips}>
                     {this.maketitle(this.props.options[this.props.selected])}
             </span>
                 </a>
                     <div className="dropdown-menu" aria-labelledby={this.props.id}>
                       {this.makelist(this.props.options)}
                     </div>
 
            </div>
             </div>
             <div className="row">
                 {this.makerate()}
             </div>
             </div>
         )
     }
 }
 
 class MakeknowmoreInput extends React.Component {
     constructor(props) {
         super(props);
         this.state={btnsize:20}
     }
     render() {
         const data = this.props.data;
         const n = this.props.n;
         if (((data.Url !== '') || (data.Url == null)) && (n === 0)) {
             // if (data.Url.length==1){
             //     return(
             //         <ButtonHrefInput name={<img src="./icons/info.png" width={this.state.btnsize}/>} url={data.Url[0].Url}
             //     id="btn-plugin-knowmore"
             // class="btn-primary btn-sm" tips={"Know more about " + data.Name}/>
             //     );
             // }else {
             return (<MenuInput name={<img src="./icons/info.png"  width={this.state.btnsize}/>} options={data.Url}
                                id="btn-plugin-knowmore"
                                class="btn-primary btn-sm" tips={"Know more about " + data.Name}/>);
         //}
         }
         else{
             return null
         }
 
     }
 }
 
-
 class CheckboxInput extends React.Component {
 
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
         this.state={checked:this.props.defaults};
     }
 
     handleChange() {
 
         this.setState({checked: !this.state.checked});
         this.props.onChange(!this.state.checked);
 
     }
 
     render() {
         return (
             <div className="form-check">
                 <input className="form-check-input" type="checkbox"  id={this.props.id} onChange={this.handleChange}
                        defaultChecked={this.state.checked}/>
                     <label className="form-check-label" htmlFor={this.props.id}>{this.props.name}</label>
             </div>
         );
     }
 }
 
-
 class ButtonHrefInput extends React.Component {
 
     constructor(props) {
         super(props);
     }
 
 
 
     render() {
         return (
             <a id={this.props.id} href={this.props.url} type="button" className="btn btn-primary" data-toggle="tooltip" data-placement="top" title={this.props.tips}  aria-disabled="true" target="_blank">{this.props.name}</a>
         );
     }
 }
 
-
 class ButtonInputWpop extends React.Component {
 
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
         this.state={target:"Modal"+this.props.idp};
 
     }
 
     handleChange() {
         const out={n:this.props.n,target:this.state.target};
         this.props.onClick(out);
 
     }
 
     render() {
         return (
-            <div>
+            <span>
                 <button type="button" className={"btn "+ this.props.class} id={this.props.id} data-toggle="modal" data-target={"#"+this.state.target}>
                     {this.props.name}
                 </button>
 
                 <div className = "modal fade" id = {this.state.target} tabIndex = "-1" role = "dialog" >
                     <div className="modal-dialog" role="document">
                         <div className="modal-content">
                             <div className="modal-header">
                                 <h5 className="modal-title" >Are you sure you want to suppress this line ?</h5>
                                 <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                     <span aria-hidden="true">&times;</span>
                                 </button>
                             </div>
                             <div className="modal-body">
                                 You are removing a item. Please confirm you want to suppress : {this.props.info}
                             </div>
                             <div className="modal-footer">
                                 <button type="button" className="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                 <button type="button" className="btn btn-danger" onClick={this.handleChange}>Yes I want to remove it</button>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            </span>
         );
     }
 }
 
-
 class ButtonInput extends React.Component {
 
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
     }
 
     handleChange() {
 
         this.props.onClick(this.props.n);
 
     }
 
     render() {
         return (
-            <div>
-                <button id={this.props.id} onClick={this.handleChange} type="button" className={"btn "+ this.props.class} data-toggle="tooltip" data-placement="top" title={this.props.tips}>{this.props.name}</button>
-            </div>
+            <span>
+                <button id={this.props.id} onClick={this.handleChange} type="button"
+                        className={"btn "+ this.props.class} data-toggle="tooltip" data-placement="top"
+                        title={this.props.tips}>{this.props.name}</button>
+            </span>
         );
     }
 }
 
-
-
-
 class MenuInput extends React.Component {
     constructor(props) {
         super(props);
         this.state={listoptions:this.makelist(props.options)};
 
     }
 
     makelist(data){
         var listoptions=[];
         for (var i = 0; i < data.length; i++) {
             listoptions.push(<a className="dropdown-item" href={data[i].Url} key={data[i].Name} target="_blank">{data[i].Name}</a>);
         }
         return listoptions;
     }
 
     render() {
         return (
 
             <div className="btn-group">
                 <a className={"btn "+this.props.class+" btn-sm dropdown-toggle"} href="#" role="button" id={this.props.id} data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" >
                      <span data-toggle="tooltip" data-placement="top" title={this.props.tips}>
                     {this.props.name}
                      </span>
                 </a>
                 <div className="dropdown-menu" aria-labelledby={this.props.id}>
                     {this.state.listoptions}
                </div>
             </div>
         );
     }
 }
 
 class TxtInput extends React.Component {
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
     }
 
     handleChange(e) {
         this.props.onChange(e.target.value);
     }
 
     render() {
         return (
             <span data-toggle="tooltip" data-placement="top" title={this.props.tips}>
                 <label htmlFor={this.props.id}> {this.props.name} </label>
                 <div className="input-group">
                     <div className="input-group-prepend">
                         <span className="input-group-text" id="inputGroupPrepend2">{this.props.Prepend}</span>
                     </div>
                     <input type="text" className={"form-control "+this.props.class} id={this.props.id} placeholder={this.props.placeholder} onChange={this.handleChange} value={this.props.value} />
                     <div className="invalid-feedback">
                         {this.props.InvalidMessage}
                     </div>
                 </div>
             </span>
         );
     }
 }
 
 // Outputs definition
 // ---------------------
 // ---------------------
 class CostOutput extends React.Component {
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
     }
 
     handleChange() {
         this.props.onCostChange(this.props.display);
     }
 
     render() {
         return (
             <div className={"form-group row align-items-center"}>
                 <label htmlFor={this.props.id} className={"col-form-label"}>{this.props.name}</label>
                 <div className="col align-self-center">
                     <input type={"text"} className={"form-control"} id={this.props.id} className={"form-control"}
                        value={this.props.value} onChange={this.handleChange} readOnly data-toggle="tooltip" data-placement="top" title={this.props.tips}/>
                 </div>
             </div>
         );
     }
 }
 
 function Textoutput(props){
     return(
         <div className="alert alert-primary" role="alert" data-toggle="tooltip" data-placement="top" title="Expand this...">
             {props.text}
         </div>
     );
 }
 
 // Plugins definition
 // ---------------------
 // ---------------------
 class AmountRatesCost extends React.Component {
     constructor(props) {
         super(props);
         this.state={amount : 1, SelectRate : 0 , Rate : this.props.data.Rates[Object.keys(this.props.data.Rates)[0]]};
         this.handleAmountChange = this.handleAmountChange.bind(this);
         this.handleRateChange = this.handleRateChange.bind(this);
     }
     handleAmountChange(amount) {
         this.setState({amount: amount});
     }
     handleRateChange(select) {
         this.setState({SelectRate: select});
         this.setState({Rate: this.props.data.Rates[Object.keys(this.props.data.Rates)[select]]});
     }
 
     render() {
         const Amount = this.state.amount;
         const Rate=this.state.Rate;
         const Cost=this.makecost(Amount,Rate);
 
         return (
             <div className="row align-items-center">
                 <div className="col">
-                <AmountInput id={this.props.name} min={this.props.data.AmountMin} max={this.props.data.AmountMax}
+                <AmountInput id={this.props.id} min={this.props.data.AmountMin} max={this.props.data.AmountMax}
                              step={this.props.data.AmountStep} value={Amount} name={this.props.data.AmountName}
                              unit={this.props.data.AmountUnit} onChange={this.handleAmountChange} tips="Select the desired amount"/>
                 </div>
                 <div className="col-3">
-                    <SelectorInput id={this.props.name+'-Rates'} name={this.props.data.RateName} options={Object.keys(this.props.data.Rates)}
+                    <SelectorInput id={this.props.id+'-Rates'} name={this.props.data.RateName} options={Object.keys(this.props.data.Rates)}
                                    class="btn-secondary" selected={this.state.SelectRate} rate={Rate} unit={this.props.data.RateUnit} onChange={this.handleRateChange} />
                 </div>
                 {/*<CostOutput id={this.props.name+'-Cost'} name={"Cost"} value={Cost} />*/}
             </div>
         );
     }
     makecost(amount,rate) {
         if (amount<=this.props.data.AmountFree){
             amount=0;
         }
         var total=amount*rate;
         total=tomoney(total);
         this.props.onCostChange(this.props.n,total);
         return total;
     }
     }
 
 class CategoryAmountRatesCost extends React.Component {
     constructor(props) {
         super(props);
         this.state={SelectCat : 0,  Cat : this.props.data.Cat[Object.keys(this.props.data.Cat)[0]],
             amount : 1, SelectRate : 0 , Rate : this.props.data.Rates[Object.keys(this.props.data.Rates)[0]]};
         this.handleCatChange = this.handleCatChange.bind(this);
         this.handleAmountChange = this.handleAmountChange.bind(this);
         this.handleRateChange = this.handleRateChange.bind(this);
         // this.handleCostChange = this.handleCostChange.bind(this);
 
     }
     handleAmountChange(amount) {
         this.setState({amount: amount});
     }
     handleRateChange(select) {
         this.setState({SelectRate: select});
         this.setState({Rate: this.props.data.Rates[Object.keys(this.props.data.Rates)[select]]});
     }
 
     handleCatChange(select) {
         this.setState({SelectCat: select});
         this.setState({Cat: this.props.data.Cat[Object.keys(this.props.data.Cat)[select]]});
     }
 
     render() {
         const Cat=this.state.Cat;
         const Amount = this.state.amount;
         const Rate=this.state.Rate;
         const Cost=this.makecost(Cat,Amount,Rate);
 
         return (
             <div className="row align-items-center">
                 <div className="col-3">
-                     <SelectorInput id={this.props.name+'-category'} name={this.props.data.CatName} options={Object.keys(this.props.data.Cat)} rate={Cat}
+                     <SelectorInput id={this.props.id+'-category'} name={this.props.data.CatName} options={Object.keys(this.props.data.Cat)} rate={Cat}
                                     class="btn-secondary" selected={this.state.SelectCat} unit={this.props.data.CatUnit} onChange={this.handleCatChange} />
                 </div>
 
                 <div className="col-4">
-                <AmountInput id={this.props.name} min={this.props.data.AmountMin} max={this.props.data.AmountMax} step={this.props.data.AmountStep}
+                <AmountInput id={this.props.id} min={this.props.data.AmountMin} max={this.props.data.AmountMax} step={this.props.data.AmountStep}
                              value={Amount} name={this.props.data.AmountName} unit={this.props.data.AmountUnit} onChange={this.handleAmountChange} />
                 </div>
                 <div className="col-4">
-                    <SelectorInput id={this.props.name+'-Rates'} name={this.props.data.RateName} options={Object.keys(this.props.data.Rates)} rate={Rate}
+                    <SelectorInput id={this.props.id+'-Rates'} name={this.props.data.RateName} options={Object.keys(this.props.data.Rates)} rate={Rate}
                                    class="btn-secondary" selected={this.state.SelectRate} unit={this.props.data.RateUnit} onChange={this.handleRateChange} />
                 </div>
 
                 {/*<CostOutput id={this.props.name+'-Cost'} name={"Cost"} value={Cost} />*/}
             </div>
         );
     }
     makecost(cat,amount,rate) {
         if (amount<=this.props.data.AmountFree){
             amount=0;
         }
         var total=cat+amount*rate;
         total=tomoney(total);
         this.props.onCostChange(this.props.n,total);
         return total;
     }
 }
 
 class CategoryCost extends React.Component {
     constructor(props) {
         super(props);
         this.state={SelectCat : 0,  Cat : this.props.data.Cat[Object.keys(this.props.data.Cat)[0]]};
         this.handleCatChange = this.handleCatChange.bind(this);
 
     }
 
 
     handleCatChange(select) {
         this.setState({SelectCat: select});
         this.setState({Cat: this.props.data.Cat[Object.keys(this.props.data.Cat)[select]]});
     }
 
     render() {
         const Cat=this.state.Cat;
 
         const Cost=this.makecost(Cat);
 
         return (
             <div className="row align-items-center">
                 <div className="col-4">
-                    <SelectorInput id={this.props.name+'-category'} name={this.props.data.CatName} options={Object.keys(this.props.data.Cat)} rate={Cat}
+                    <SelectorInput id={this.props.id+'-category'} name={this.props.data.CatName} options={Object.keys(this.props.data.Cat)} rate={Cat}
                                    class="btn-secondary" selected={this.state.SelectCat} unit={this.props.data.CatUnit} onChange={this.handleCatChange} />
 
                 </div>
             </div>
         );
     }
     makecost(cat) {
         var total=cat;
         total=tomoney(total);
         this.props.onCostChange(this.props.n,total);
         return total;
     }
 }
 
 class NoneSelect extends React.Component {
     constructor(props) {
         super(props);
 
     }
 
 
     render() {
         const Cost=tomoney(0);
         this.props.onCostChange(this.props.n,Cost);
 
         return (<div className="alert alert-info" id="infotxt">
                 Please select a provider in the list.
 
             </div>
         );
     }
 
 }
 
 class UserCost extends React.Component {
     constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
         this.handleProviderChange = this.handleProviderChange.bind(this);
         this.handleServiceChange = this.handleServiceChange.bind(this);
         this.state={total:0,
             CostError:false,
             ProviderError:true,
             ServiceError:true,
         };
     }
     handleChange(value){
         if (isNaN(value)||value===''){
            console.log("Nan Detected");
            this.setState({CostError: true});
            value=0;
         }else{
             this.setState({CostError: false});
         }
         this.setState({total:value});
         this.props.onCostChange(this.props.n,tomoney(value));
     }
     handleProviderChange(txt){
         this.props.handleProviderChange(txt);
         if(txt ===''){
             this.setState({ProviderError: true});
         }
         else {
             this.setState({ProviderError: false});
         }
     }
     handleServiceChange(txt){
         this.props.handleServiceChange(txt);
         if(txt ===''){
             this.setState({ServiceError: true});
         }
         else {
             this.setState({ServiceError: false});
         }
     }
     classtxt(error){
         if(error){
             return "is-invalid";
         }
         else {
             return "is-valid";
         }
     }
     render() {
         // this.handleChange(this.state.total);
         return (<div className="row align-items-baseline">
                 <div className="col-3">
-                    <TxtInput id="usercost-input"  name="Provider" placeholder="Put your provider here" tips="Add your own cost calculation here" onChange={this.handleProviderChange}
+                    <TxtInput id={this.props.id+'-input'}  name="Provider" placeholder="Put your provider here" tips="Add your own cost calculation here" onChange={this.handleProviderChange}
                               class={this.classtxt(this.state.ProviderError)} Prepend="" InvalidMessage="Please provide a Provider"/>
                 </div>
                 <div className="col-3">
-                    <TxtInput id="usercost-input"  name="Service" placeholder="Put your service here" tips="Add your own cost calculation here" onChange={this.handleServiceChange}
+                    <TxtInput id={this.props.id+'-input'}  name="Service" placeholder="Put your service here" tips="Add your own cost calculation here" onChange={this.handleServiceChange}
                               class={this.classtxt(this.state.ServiceError)} Prepend="" InvalidMessage="Please provide a Service"/>
                 </div>
                 <div className="col-3">
-                   <TxtInput id="usercost-input"  name="Cost" placeholder="Put your cost here" tips="Add your own cost calculation here" onChange={this.handleChange}
+                   <TxtInput id={this.props.id+'-input'}  name="Cost" placeholder="Put your cost here" tips="Add your own cost calculation here" onChange={this.handleChange}
                              class={this.classtxt(this.state.CostError)} Prepend={MainData.Currency} InvalidMessage="Please provide a correct numerical value" />
                 </div>
             </div>
         );
     }
 
 }
 
-
-
-
 // Combine plugins
 // ---------------------
 // ---------------------
 class ProviderPluginsSelector extends React.Component {
     constructor(props) {
         super(props);
         this.handleCostChange = this.handleCostChange.bind(this);
         this.handleProviderChange = this.handleProviderChange.bind(this);
         this.handleCommentChange = this.handleCommentChange.bind(this);
         this.handleAddPlugin = this.handleAddPlugin.bind(this);
         this.handleRmvPlugin = this.handleRmvPlugin.bind(this);
         this.handleProviderChangetxt = this.handleProviderChangetxt.bind(this);
         this.handleServiceChangetxt = this.handleServiceChangetxt.bind(this);
         this.state={
             selected:0,
             keys:this.ProvidersName(props.data),
-            enabled :true,
             n:1,
             cost:0,
             prevcost:0,
             comments:"",
             Provider:"",
             Name:"",
             manualname:false,
         };
     }
 
     handleCostChange(n,e) {
-        // console.log("here n : "+n+" e = "+ e);
-        if(! this.state.enabled){
-            e=0;
-        }
         if (this.state.prevcost !== e ) {
             this.setState({cost: e});
             this.setState({prevcost: e});
 
         this.props.handleCostChange(n,e);}
     }
     handleProviderChange(select){
         this.state.Provider='';
         this.state.Name='';
         this.setState({selected:select});
         // this.setState({Cdata:this.cmpdata(this.state.selected)});
         // this.setSate({kmm:this.makemenu(this.state.Cdata,0)});
     }
     handleCommentChange(com){
 
         this.setState({comments:com});
     }
     handleAddPlugin(n){
         this.props.handleAddPlugin(n);
     }
     handleRmvPlugin(n){
         this.props.handleRmvPlugin(n);
     }
 
     handleProviderChangetxt(txt){
         this.setState({Provider:txt});
 
 
     }
     handleServiceChangetxt(txt){
         this.setState({Name:txt});
     }
 
     render() {
         // console.log("n= "+this.props.n)
         const selected=this.state.selected;
         this.state.manualname=false;
         this.state.keys=this.ProvidersName(this.props.data);
         const Cmp=this.cmp2string(this.cmpdata(selected).Style);
         const Cdata=this.cmpdata(selected);
         const id=this.props.data.Name.replace(/\s/g,'')+this.props.n;
 
-
-
         return(
            <div id={"plugin"}>
 
                 <div className="card-header" id={id}>
                     <ModuleHeader id={id} data={this.props.data} selected={selected} Cdata={Cdata} n={this.props.n} Cost={this.state.cost}
                     comments={this.state.comments} handleAddPlugin={this.handleAddPlugin} handleRmvPlugin={this.handleRmvPlugin}
                                   keys={this.state.keys} show_minus={this.props.show_minus} />
                 </div>
 
 
                 <div id={"collapse"+id} className="collapse" aria-labelledby={id} data-parent="#accordion">
                     <div className="card-body">
 
                             <div className="row align-items-end">
                                 <div className="col-auto">
                                     <div id="provider-selector" >
                                          <SelectorInput id="providerselect" name="Select a provider" selected={selected} options={this.state.keys}
                                                    class="btn-primary lg-btn" onChange={this.handleProviderChange} tips="Select a provider"/>
                                     </div>
                                 </div>
                                 <div className="col-auto">
                                     <div id="plugin-knowmore" >
                                         <MakeknowmoreInput key={selected} data={Cdata}  name="" n="0" />
                                     </div>
                                 </div>
                                 <div className="col-4">
-                                    <TxtInput type="text" id="module-comments" name="My Comments" placeholder="I can put a comment here..." onChange={this.handleCommentChange}/>
+                                    <TxtInput type="text" id="module-comments" name="My Comments"
+                                              placeholder="I can put a comment here..." onChange={this.handleCommentChange}/>
                                 </div>
                             </div>
 
                             <div id="component" className="container bg-light">
-                                <Cmp data={Cdata} key={selected} name="" onCostChange={this.handleCostChange} n={this.props.n}
+                                <Cmp data={Cdata} key={selected} id="component-settings" onCostChange={this.handleCostChange} n={this.props.n}
                                 handleProviderChange={this.handleProviderChangetxt} handleServiceChange={this.handleServiceChangetxt}/>
                             </div>
                     </div>
                 </div>
             </div>
         );
     }
 
 
     cmpdata(select){
         let out=this.props.data.Data[select];
         if (this.state.manualname){
             out.Name=this.state.Name;
-            this.state.keys[select]=this.state.Provider;}
+            if ( this.state.Provider ==='') {
+                this.state.keys[select] = 'Please provide a Provider';
+            }else {
+                this.state.keys[select]=this.state.Provider;
+            }
+            }
         return out;
         }
 
     cmp2string(str){
         switch (str) {
             case "AmountRatesCost" : return AmountRatesCost;
             case "CategoryCost" : return CategoryCost;
             case "CategoryAmountRatesCost" : return CategoryAmountRatesCost;
             case "NoneSelect":return NoneSelect;
             case "UserCost":{this.state.manualname=true;  return UserCost;}
 
         }
     }
     ProvidersName(main){
         const data = main.Data;
         // console.log(data);
 
         var providers=[];
         for (var i = 0; i < data.length; i++) {
             providers.push(data[i].Provider);
         }
         return providers;
     }
 
 }
 
 function makeinfo(keys,selected,Cdata){
     let name=Cdata.Name;
     if ( name ===''&&keys[selected]===''){
         name='Please provide a Provider';
         return  (<span id="module-name">{name}</span>);
     }else if(keys[selected]==='None'){
         return  (<span id="module-name">{name}</span>);
     }else{
         return  (<span><span id="module-provider">{keys[selected]} : </span>  <span id="module-name">{name}</span></span>);
     }
 }
 
 class ModuleHeader  extends React.Component{
     constructor(props) {
         super(props);
         this.handleAddPlugin = this.handleAddPlugin.bind(this);
         this.handleRmvPlugin = this.handleRmvPlugin.bind(this);
     }
     handleAddPlugin(n){
         this.props.handleAddPlugin(n);
     }
     handleRmvPlugin(n){
         this.props.handleRmvPlugin(n);
     }
     render() {
         let minus='';
         if (this.props.show_minus){
             minus=<ButtonInputWpop class="btn-danger btn-sm" id="plugins-add-btn"
                                    name={<img className="img-fluid" src="icons\minus.png" width="20"/>}
                                    onClick={this.handleRmvPlugin} n={this.props.n} tips={"Remove this line"}
                                     idp={this.props.id} info={this.props.data.Name}/>;
         }
  return(
      <div className="container">
          <div className="row align-items-center">
              <div className="col-1 align-self-start">
                  <div className="row">
                  <div className="col-auto" id="plugin-add">
-                     <ButtonInput class="btn-success btn-sm" id="plugins-add-btn" name={<img className="img-fluid" src="icons\plus.png" width="20"/>} onClick={this.handleAddPlugin} n={this.props.n} tips={"Add a new "+this.props.data.Name}/>
+                     <ButtonInput class="btn-success btn-sm" id="plugins-add-btn" name={<img className="img-fluid" src="icons\plus.png" width="20"/>}
+                                  onClick={this.handleAddPlugin} n={this.props.n} tips={"Add a new "+this.props.data.Name}/>
                  </div>
                  <div className="col-auto" id="plugin-add">
                      {minus}
                  </div>
                  </div>
                  <div id="plugin-knowmore">
                      <MakeknowmoreInput data={this.props.data} n={this.props.n}/>
                  </div>
             </div>
              <div  className=" col-1 align-self-start">
                  <img className="img-fluid" src={"icons/"+this.props.data.Icon} width="100"/>
              </div>
              <div className="col-3 ">
                  <div className="row align-items-end">
                      <div className="col-auto">
                                     <span data-toggle="tooltip" data-placement="top" title="Expand this..." >
                                         <button className="btn btn-outline-primary  dropdown-toggle" type="button" data-toggle="collapse" data-target={"#collapse"+this.props.id}
                                                 aria-expanded="false" aria-controls={"collapse"+this.props.id} id="btn-plugins" >
                                             <span id={"plugin-number"}> {this.props.n+1}. </span> <span id={"plugin-name"}>{this.props.data.Name}</span>
                                         </button>
                                     </span>
 
                      </div>
                  </div>
              </div>
              <div id="plugin-info" className="col-4">
                  <div className="row">
                      {makeinfo(this.props.keys,this.props.selected,this.props.Cdata)}
                  </div>
                  <div className="row">
                      {this.props.comments}
                  </div>
              </div>
 
              <div id="plugin-cost" className="col-2 align-self-end">
                  <CostOutput id="ccost" name={"Cost"} value={this.props.Cost} tips="Total cost for this provider"/>
              </div>
 
          </div>
 
      </div>
  );
     }
 
 }
+
 class ManagePlugins extends React.Component{
     constructor(props) {
         super(props);
         this.handleCostChange = this.handleCostChange.bind(this);
         this.handleAddPlugin = this.handleAddPlugin.bind(this);
         this.handleRmvPlugin = this.handleRmvPlugin.bind(this);
+        this.handletest = this.handletest.bind(this);
 
         this.state={
             displayed:[],
-            varsum:{}
+            varsum:{},
+            plugins:[],
         };
         this.state.displayed.push(this.randomint());
+        this.export=[];
     }
     handleRmvPlugin(n){
-    console.log("remove : "+n);
-        console.log(this.state.displayed);
-
         $('#'+n.target).modal('hide');
-        var tmp=this.state.displayed;
-        tmp.splice(n.n,1);
-        this.setState({displayed:tmp});
-        console.log(this.state.displayed);
+        this.setState({displayed:this.state.displayed.splice(n.n,1)});
         this.handleCostChange(n.n,0);
-
     }
     handleAddPlugin(n){
-        var tmp=this.state.displayed;
-        tmp.splice(n+1,0,this.randomint());
-        this.setState({displayed:tmp});
+        this.setState({displayed:this.state.displayed.splice(n+1,0,this.randomint())});
     }
     handleCostChange(n,cost) {
         this.state.varsum[n]=cost;
         this.props.handleCostChange(this.props.n,sum(this.state.varsum));
     }
+    handletest(n){
+        console.log(this.export[0])
+    }
+
     randomint(){
         const tmp=this.state.displayed;
         var rnd;
         do {
             rnd=Math.floor(Math.random() * 100);
             var cont=false;
             for (let i = 0; i < tmp.length ; i++) {
                 if (tmp[i]===rnd){
                     cont=true;
                 }
             }
         } while(cont);
         return rnd;
     }
     give_id(index){
         return this.state.displayed[index]
     }
     give_n(){
         const disp=this.state.displayed;
         return disp.length
     }
 
     render() {
         let show_minus = false;
         if (this.give_n()>1) {
             show_minus=true;
         }
            return(
+               <div>
     <Repeat numTimes={this.give_n()}>
         {(index) => <ProviderPluginsSelector data={this.props.data} key={this.state.displayed[index]}
                                  show_minus={show_minus} n={index}
-                                 handleCostChange={this.handleCostChange} handleAddPlugin={this.handleAddPlugin} handleRmvPlugin={this.handleRmvPlugin}/>}
+                                 handleCostChange={this.handleCostChange} handleAddPlugin={this.handleAddPlugin}
+                                             handleRmvPlugin={this.handleRmvPlugin} ref={(input) => {this.export[index] = input }}/>}
     </Repeat>
-        );}
+                   {/*<ButtonInput name={'test'} onClick={this.handletest}/>*/}
+               </div>
 
 
-}
+
+        );}
 
 
+}
 
 class PluginsMain extends React.Component {
     constructor(props) {
         super(props);
         this.handleCostChange = this.handleCostChange.bind(this);
         this.state={'varsum':{}};
     }
 
     handleCostChange(name,e) {
         // console.log("name"+name);
         this.state.varsum[name]=e;
         this.props.TotalCost(sum(this.state.varsum));
 
     }
     render() {
 
         return(
             <div className="card">
                 <Repeat numTimes={this.props.data.length}>
                     {(index) => <ManagePlugins data={this.props.data[index]} key={index}
                                                          n={index} handleCostChange={this.handleCostChange}/>}
                 </Repeat>
             </div>
         );
     }
 
 }
 
+// MAIN
 // ---------------------
 // ---------------------
 class Main extends React.Component {
     constructor(props) {
         super(props);
         this.handleCostChange = this.handleCostChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.state={'total':0,'prevtotal':0};
         this.input = React.createRef();
     }
 
     handleCostChange(total) {
         // console.log("there total : "+total )
         if (this.state.prevtotal !== total){
             // console.log("updated :"+total);
             // console.log("prev :"+this.state.prevtotal);
             this.setState({'total':total});
             this.setState({'prevtotal':total});
         }
 
     }
     handleSubmit(event) {
-        alert('A name was submitted: ');
-        console.log(event);
+        // alert('A name was submitted: ');
         event.preventDefault();
+        console.log(this.input.current);
+
         //console.log(this.input)
-        var json = toJSONString(this.input);
+        var json = toJSONString(this.input.current);
         console.log(json);
     }
     render() {
         return(
             <form id="mainform"  method="post" onSubmit={this.handleSubmit} ref={this.input}>
                 <div className={"container"}>
                     <div className={"accordion"} id={"accordion"}>
-                        <PluginsMain TotalCost={this.handleCostChange} data={MainData.Data}/>
+                        <div className="card ">
+                            <div className="card-header ">
+                                <h2> <img src="./icons/sliders.png" width="40"/> HOWTO</h2>
+                            </div>
+                            <div className="card-body">
+                                <dl className="row">
+                                    <dt className="col-sm-3">Categories</dt>
+                                    <dd className="col-sm-9">
+                                        This tool is divided by category (for example Activate storage) by clicking
+                                        on the category name, and it will expand.
+                                    </dd>
+                                </dl>
+                                <dl className="row">
+                                    <dt className="col-sm-3">Providers</dt>
+                                    <dd className="col-sm-9">
+                                        <p>
+                                            Providers can be chosen from the <mark>Select a provider box</mark> You can then tune your setting for this provider to fit your needs.
+                                        </p>
+
+                                        <p>
+                                            If the provider you want is not registered, you can add it manually with <mark>Provide your own provider</mark> and then enter your provider/service and cost.
+                                        </p>
+                                    </dd>
+                                </dl>
+                                <dl className="row">
+                                    <dt className="col-sm-3">Add or Remove Line</dt>
+                                    <dd className="col-sm-9">
+                                        <p>If you want to add a new provider use the <ButtonInput class="btn-success btn-sm" id="plugins-add-btn" name={<img className="img-fluid" src="icons\plus.png" width="20"/>}
+                                                                                                  tips={"Add a new category"}/> button.
+                                        </p>
+                                        <p>
+                                            You can also remove a provider with <ButtonInput class="btn-danger btn-sm" id="plugins-add-btn"
+                                                                                             name={<img className="img-fluid" src="icons\minus.png" width="20"/>}
+                                                                                             tips={"Remove this line"}/> button.
+                                        </p>
+                                    </dd>
+                                </dl>
+                                <dl className="row">
+                                    <dt className="col-sm-3">To know more about</dt>
+                                    <dd className="col-sm-9">
+                                        Some extra information about the category or the provider can be obtained with the <ButtonInput class="btn-primary btn-sm" id="plugins-add-btn"
+                                                                                                                                        name={<img className="img-fluid" src="icons\info.png" width="20"/>}
+                                                                                                                                        tips={"Know more"}/> button.
+                                    </dd>
+                                </dl>
+                                <dl className="row">
+                                    <dt className="col-sm-3">Comments your input</dt>
+                                    <dd className="col-sm-9">
+                                        Comments are for your personnal usage, you can use for remembering what each section is and for a nice export.
+                                    </dd>
+                                </dl>
+                            </div>
+                            <div className="card-footer text-white bg-dark">
+                                <div className="row">
+                                    <div className="col-2 text-center">
+                                        Line controls
+                                    </div>
+
+                                    <div className="col-3 text-center">
+                                        Category
+                                    </div>
+                                    <div className="col-4 text-center">
+                                        Provider information
+                                    </div>
+                                    <div className="col-2 text-center">
+                                        Cost
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
+                        <PluginsMain TotalCost={this.handleCostChange} data={MainData.Data} />
                     </div>
                     <div className="card" id="finalcost">
-                        <div className="card-header">
+                        <div className="card-header ">
                             <div className="container row">
-                                <div className="col-7 align-self-start" id="plugin-name">
-                                    Total Cost
+                                <div className="col-1">
                                 </div>
-                                <div id="plugin-cost" className="col-5  text-right">
+                                <div className="col-1">
+                                     <img className="img-fluid" src="./icons/totalcost.png" width="100"/>
+                                </div>
+                                <div className="col-5 align-self-start" id="plugin-name">
+                                    <h3>Total Cost</h3>
+                                </div>
+                                <div id="plugin-cost" className="col-5  text-right ">
                                     <CostOutput name={"Total Cost per year"} id={"ctotal"} value={tomoney(this.state.total)} tips="Total cost per year"/>
                                 </div>
                             </div>
 
                         </div>
                         <div className="card-body">
-                            <input type="submit" value="Send" className="btn btn-primary btn-block"/>
+                            {/*<input type="submit" value="Send" className="btn btn-primary btn-block"/>*/}
                             <pre id="output"></pre>
 
                         </div>
                         <div className="card-footer">
                             <div className="alert alert-danger" role="alert" id="infotxt">
                                 The values published on this service are only informative and cannot be used for exact calculation. If you see some mistake or would like to
                                 have another services please contact us.
                             </div>
                             <div id="service">
-                                <p>This service has been developed by ... 2018 </p>
-                                <p>Icons are from the Noun Project (Book by Randi NI, Storage by I Pitu, Database by Novalyi, data cloud by Vectors Market)</p>
+                                <p>This service has been developed by the <a href="https://researchdata.epfl.ch">Resarch Data Management Team</a> of the <a href="https://library.epfl.ch">EPFL Library</a>  <br/>
+                                    This software is publish under CC0 and your are using <strong> Version beta 1.7</strong><br/>
+                                    Source code can be download <a href="https://c4science.ch/source/costcalc/">here</a></p>
+                                <p><small>Icons are from the Noun Project (Book by Randi NI, Storage by I Pitu, Database by Novalyi, data cloud by Vectors Market)</small></p>
                             </div>
                         </div>
                     </div>
                 </div>
             </form>
         );
     }
 }
 
+
+//Main Declaration
 // ---------------------
 // ---------------------
 ReactDOM.render(<Main />,document.getElementById('root'));
 
 
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()
 });