diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1f12116..305d672 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,11 +4,12 @@
     <option name="autoReloadType" value="ALL" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="574a1b97-16f7-4ce1-94d4-63258828ba9a" name="Changes" comment="osm-zoning WORKING VERSION - one changeset per each change still">
+    <list default="true" id="574a1b97-16f7-4ce1-94d4-63258828ba9a" name="Changes" comment="osm-zoning WORKING VERSION - open changesets, sessions shared bugs still exist">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/osm-zoning/handlers/handlers.go" beforeDir="false" afterPath="$PROJECT_DIR$/osm-zoning/handlers/handlers.go" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/osm-zoning/main.go" beforeDir="false" afterPath="$PROJECT_DIR$/osm-zoning/main.go" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/osm-zoning/oauth/oauth.go" beforeDir="false" afterPath="$PROJECT_DIR$/osm-zoning/oauth/oauth.go" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/osm-zoning/static/data.js" beforeDir="false" afterPath="$PROJECT_DIR$/osm-zoning/static/data.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/osm-zoning/static/map.html" beforeDir="false" afterPath="$PROJECT_DIR$/osm-zoning/static/map.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/osm-zoning/static/map.js" beforeDir="false" afterPath="$PROJECT_DIR$/osm-zoning/static/map.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/osm-zoning/static/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/osm-zoning/static/style.css" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -101,7 +102,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="extract js into separate files" />
     <MESSAGE value="making the code more modular, add functional prog style" />
     <MESSAGE value="fix #2 Mapillary image display if exist" />
     <MESSAGE value="fix #3 search location nominatim" />
@@ -126,7 +126,8 @@
     <MESSAGE value="osm-zoning edit button exists not working to update yet" />
     <MESSAGE value="osm-zoning sane logging of the error" />
     <MESSAGE value="osm-zoning WORKING VERSION - one changeset per each change still" />
-    <option name="LAST_COMMIT_MESSAGE" value="osm-zoning WORKING VERSION - one changeset per each change still" />
+    <MESSAGE value="osm-zoning WORKING VERSION - open changesets, sessions shared bugs still exist" />
+    <option name="LAST_COMMIT_MESSAGE" value="osm-zoning WORKING VERSION - open changesets, sessions shared bugs still exist" />
   </component>
   <component name="VgoProject">
     <settings-migrated>true</settings-migrated>
diff --git a/osm-zoning/static/data.js b/osm-zoning/static/data.js
index 419e7f9..e46cba1 100644
--- a/osm-zoning/static/data.js
+++ b/osm-zoning/static/data.js
@@ -32,6 +32,3 @@ document.addEventListener("DOMContentLoaded", async function () {
     });
 });
 
-const clearMarkers = () => {
-    markers.clearLayers();
-};
diff --git a/osm-zoning/static/map.html b/osm-zoning/static/map.html
index b9ad8ba..c701f93 100644
--- a/osm-zoning/static/map.html
+++ b/osm-zoning/static/map.html
@@ -19,5 +19,7 @@
     <a href="/login">Log in with OpenStreetMap</a>
 </div>
 <button id="saveChangesButton">Save Changes</button>
+<div id="legend" class="legend"></div>
 </body>
+
 </html>
diff --git a/osm-zoning/static/map.js b/osm-zoning/static/map.js
index d52482a..d9ddd4c 100644
--- a/osm-zoning/static/map.js
+++ b/osm-zoning/static/map.js
@@ -63,16 +63,29 @@ const fetchDataAndAddMarkers = async () => {
             .map(createWay);
 
         waysToAdd.forEach(way => way.addTo(mymap));
-
+        createLegend(data);
     } catch (error) {
         console.error('Error fetching data and adding markers:', error);
     }
 };
 
+const zoningCodeColors = {
+    residential: 'blue',
+    commercial: 'green',
+    industrial: 'red',
+    A: 'gold',
+    B: 'orange',
+    C: 'red',
+    D: 'red',
+    // Add more zoning codes and their colors here
+};
+
 const createWay = (way) => {
     const latlngs = way.geometry.map(point => [point.lat, point.lon]);
+    const zoningCode = way.tags['zoning_code'];
+    const color = zoningCodeColors[zoningCode] || 'gray'; // Default color
 
-    const wayPolyline = L.polyline(latlngs, { color: 'blue' });
+    const wayPolyline = L.polyline(latlngs, { color });
 
     const popupContent = `
         <div class="popup-content">
@@ -86,6 +99,24 @@ const createWay = (way) => {
     return wayPolyline;
 };
 
+const createLegend = (data) => {
+    const legendContainer = document.getElementById('legend');
+    legendContainer.innerHTML = ''; // Clear previous legend
+
+    const zoningCodes = [...new Set(data.map(way => way.tags['zoning_code']))];
+
+    zoningCodes.forEach(zoningCode => {
+        const color = zoningCodeColors[zoningCode] || 'blue';
+        const legendItem = document.createElement('div');
+        legendItem.classList.add('legend-item');
+        legendItem.innerHTML = `
+            <span class="legend-color" style="background-color: ${color};"></span>
+            <span>${zoningCode}</span>
+        `;
+        legendContainer.appendChild(legendItem);
+    });
+};
+
 const formatTags = (tags) => {
     if (!tags) return 'No tags available';
 
diff --git a/osm-zoning/static/style.css b/osm-zoning/static/style.css
index f6f0560..7433c06 100644
--- a/osm-zoning/static/style.css
+++ b/osm-zoning/static/style.css
@@ -36,3 +36,29 @@ html, body {
     background: #fff;
     outline: none;
 }
+
+.legend {
+    position: absolute;
+    bottom: 30px;
+    left: 10px;
+    padding: 10px;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.legend-color {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}