diff --git a/client/public/index.html b/client/public/index.html
index 334974e..70e2244 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -21,8 +21,8 @@
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
 
 <script>
-    const tilesProvider = 'https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png'
-    let myMap = L.map('myMap').setView([41.41, 2.13], 12)
+    const tilesProvider = 'https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png';
+    let myMap = L.map('myMap').setView([41.41, 2.13], 12);
     L.tileLayer(tilesProvider, {
         maxzoom: 18,
     }).addTo(myMap)
@@ -67,15 +67,43 @@
             return response.json();
         });
     };
-
-    var style = {
-        fillColor: 'white',
-        weight: 1,
-        opacity: 1,
-        color: 'grey',
-        dashArray: '3',
-        fillOpacity: 0.7
+ //canvis de color segons el valor d'una variable
+    function getColor(nom, districte) {
+    return nom == "Ciutat Vella" ? '#f7fcfd' :
+           nom == "Eixample"  ? '#e5f5f9' :
+           nom == "Sants-Montjuïc"  ? '#ccece6' :
+           nom == "Les Corts"  ? '#99d8c9' :
+           nom == "Sarrià-Sant Gervasi"   ? '#66c2a4' :
+           nom == "Gràcia"   ? '#41ae76' :
+           nom == "Horta-Guinardó"   ? '#238b45' :
+           nom == "Nou Barris"   ? '#006d2c' :
+           nom == "Sant Andreu"   ? '#00441b' :
+           nom == "Sant Martí"   ? '#e0f3db' :
+           districte == "01" ? '#f7fcfd' :
+           districte == "02"  ? '#e5f5f9' :
+           districte == "03"  ? '#ccece6' :
+           districte == "04"  ? '#99d8c9' :
+           districte == "05"   ? '#66c2a4' :
+           districte== "06"   ? '#41ae76' :
+           districte == "07"   ? '#238b45' :
+           districte == "08"   ? '#006d2c' :
+           districte == "09"   ? '#00441b' :
+           districte == "10"   ? '#e0f3db' :
+                                'grey';
     };
+    //creem una funció per donar estil segons el NOM que tingui el districte
+    
+    function style(feature) {
+        return {
+            fillColor: getColor(feature.properties.NOM, feature.properties.DISTRICTE),
+            weight: 1.5,
+            opacity: 1,
+            color: 'black',
+            dashArray: '3',
+            fillOpacity: 0.7
+        };
+    }
+    
     var layers = {
         districtes: null,
         barris: null
@@ -116,6 +144,15 @@
     myMap.on("zoom", loadData);
     myMap.on("moveend", loadData);
 
+
 </script>
 
+
+
+
+
+
+
+
+
 </html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}