diff --git a/README.md b/README.md
index a7b12cb..157a329 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 Calcule les montants a verser pour chaque projet proposé au financement quadratique
 
-[![](./G1_FQ.png)](https://ipfs.asycn.io/ipfs/QmdLeswsEH7F3hZBUjimrRRJQNEyfWjut7u4EuQEcoXwvg/)
+[![](./G1_FQ.png)](https://ipfs.asycn.io/ipfs/QmYRuZcG58eo549FFr4Y8qQUcF559iiUnRL87Y7UZBsSWz/)
 
 Les montants de contrepartie sont calculés à l'aide de la formule suivante :
 
diff --git a/index.html b/index.html
index 7b95dd9..771bac2 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,8 @@
 <!DOCTYPE html>
-<html>
-<head>
+
       <meta charset="UTF-8">
   <title>Quadratic Funding Calculator</title>
-  <style>
+<style>
   .matchingAmount,
   .projectTable,
   .addProjectCopyURL {
@@ -127,13 +126,14 @@
     border: none; /* Remove vertical borders */
   }
 </style>
-
-  <script src="lib/jquery.min.js"></script>
 </head>
 <body>
 
+ <div class="section fit interactive">
+     <div class="container">
+<script src="lib/jquery.min.js"></script>
+
 <div id="calculation">
-</div>
 
 <script>
   $(document).ready(function () {
@@ -142,7 +142,20 @@ let quadraticFunding = {
   projects: [],
 };
 
+    // Update URL parameters on changes
+    function updateUrl() {
+      let params = new URLSearchParams();
+      params.set("match", quadraticFunding.matchAmount);
 
+      quadraticFunding.projects.forEach((project, i) => {
+        params.append("grant", project.contributions.join("-"));
+      });
+
+      // Update the URL only if it differs from the current state
+      if (window.location.search !== "?" + params.toString()) {
+        window.history.replaceState({}, "", "?" + params.toString());
+      }
+    }
 
     let matchAmountInput = $("<input>")
       .attr("id", "matchAmount")
@@ -153,11 +166,11 @@ let quadraticFunding = {
     let addProjectButton = $("<button>")
       .attr("id", "addProject")
       .attr("class", "button")
-      .text("Ajouter Projet");
+      .text("Add Project");
     let copyURLButton = $("<button>")
       .attr("id", "copyURL")
       .attr("class", "button")
-      .text("Copier URL");
+      .text("Copy URL");
     let projectTable = $("<table>").attr("id", "projectTable");
 
     $("#calculation").append(
@@ -174,11 +187,11 @@ let quadraticFunding = {
 
     $("#projectTable").append(
       $("<tr>").append(
-        $('<th colspan="2">').text("Projet"),
+        $('<th colspan="2">').text("Project"),
         $("<th>").text("Contributions"),
-        $("<th>").text("Montant financé"),
-        $("<th>").text("Montant versé"),
-        $("<th>").text("Supprimer")
+        $("<th>").text("Funded Amount"),
+        $("<th>").text("Match Amount"),
+        $("<th>").text("Remove")
       )
     );
 
@@ -193,7 +206,7 @@ let quadraticFunding = {
     });
 
     $("#addProject").on("click", function () {
-      let projectName = "Projet #" + (quadraticFunding.projects.length + 1);
+      let projectName = "Project #" + (quadraticFunding.projects.length + 1);
 
       if (projectName) {
         quadraticFunding.projects.push({
@@ -210,7 +223,7 @@ let quadraticFunding = {
             $("<td>").append(
               $("<input>")
                 .addClass("contributionInput")
-                .attr("placeholder", "Ajouter une contribution et pressez Enter")
+                .attr("placeholder", "Add a contribution and press Enter")
             ),
             $("<td>").attr("class", "contributions"),
             $("<td>").attr("class", "fundedAmount").text(0),
@@ -404,7 +417,5 @@ let quadraticFunding = {
     // Call this function on page load to load the values from the URL
     loadDefaults();
   });
-</script>
-
-</body>
-</html>
+</script></div></div></div>
+</body></html>
