diff --git a/GanjooRazor/Pages/Map.cshtml b/GanjooRazor/Pages/Map.cshtml
index 4f95375c..8db62528 100644
--- a/GanjooRazor/Pages/Map.cshtml
+++ b/GanjooRazor/Pages/Map.cshtml
@@ -16,6 +16,9 @@
         .leaflet-container {
             background-color: #c5e8ff;
         }
+        .leaflet-popup-content{
+            font-family: 'Vazir'
+        }
     </style>
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
     <script src="~/js/leaflet.js"></script>
@@ -46,10 +49,28 @@
 
             L.tileLayer.provider('Stamen.Watercolor').addTo(map);
 
-            oms = new OverlappingMarkerSpiderfier(map, { keepSpiderfied: false });
+            oms = new OverlappingMarkerSpiderfier(map, { keepSpiderfied: true });
 
             poetsgroups = @(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.PoetGroupsWithBirthPlaces, Newtonsoft.Json.Formatting.Indented)));
 
+            var popup = new L.Popup();
+            oms.addListener('click', function (marker) {
+                
+                var poetDesc = marker.desc;
+                var index = $('#rangeInput').val();
+                for (var i = 0; i < poetsgroups[index].Poets.length; i++) {
+                    if (poetsgroups[index].Poets[i].Name == marker.desc) {
+                        poetDesc = '<a target="_blank" href="' + poetsgroups[index].Poets[i].FullUrl+'">' + poetsgroups[index].Poets[i].Name + '</a>'
+                        document.getElementById('maincnt').innerHTML = poetDesc;
+                        break;
+                    }
+                }
+
+                popup.setContent(poetDesc);
+                popup.setLatLng(marker.getLatLng());
+                map.openPopup(popup);
+            });
+
             var rangeValues = [];
 
             for (var i = 0; i < poetsgroups.length; i++) {
@@ -72,6 +93,8 @@
 
                 marker = L.marker([poet.BirthPlaceLatitude, poet.BirthPlaceLongitude], { icon: icon });
 
+                marker.desc = poet.Name;
+
                 marker.addTo(layerGroup);
                 oms.addMarker(marker);
             }
@@ -97,6 +120,8 @@
 
                         var marker = L.marker([poet.BirthPlaceLatitude, poet.BirthPlaceLongitude], { icon: icon });
 
+                        marker.desc = poet.Name;
+
                         marker.addTo(layerGroup);
                         oms.addMarker(marker);
                     }
@@ -112,8 +137,8 @@
     <div id="fa">
         <div id="map" style="height: 500px"></div>
         <input type="range" id="rangeInput" name="rangeInput" step="1" min="0" max="@Model.PoetGroupsWithBirthPlaces.Count" value="0">
-        <div class="century" id="rangeText">
+        <div class="century" id="rangeText"></div>
+        <div id="maincnt"></div>
         </div>
-    </div>
 </body>
 </html>
diff --git a/GanjooRazor/Pages/Map.cshtml.cs b/GanjooRazor/Pages/Map.cshtml.cs
index 0fb53f0b..56f087c3 100644
--- a/GanjooRazor/Pages/Map.cshtml.cs
+++ b/GanjooRazor/Pages/Map.cshtml.cs
@@ -4,8 +4,6 @@ using System.Net.Http;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
-using Microsoft.Extensions.Caching.Memory;
-using Microsoft.Extensions.Configuration;
 using Newtonsoft.Json.Linq;
 using RMuseum.Models.Ganjoor.ViewModels;