diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index 799b726c..76329be8 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -75,7 +75,7 @@ L.Util.escapeHTML = (s) => {
 }
 L.Util.toHTML = (r, options) => {
   if (!r) return ''
-  const target = options && options.target || 'blank'
+  const target = (options && options.target) || 'blank'
   let ii
 
   // detect newline format
@@ -102,7 +102,10 @@ L.Util.toHTML = (r, options) => {
   r = r.replace(/({{http)/g, '{{h_t_t_p')
   r = r.replace(/(=http)/g, '=h_t_t_p') // http://xxx as query string, see https://github.com/umap-project/umap/issues/607
   r = r.replace(/(https?:[^ \<)\n]*)/g, `<a target="_${target}" href="$1">$1</a>`)
-  r = r.replace(/\[\[(h_t_t_ps?:[^\]|]*?)\]\]/g, `<a target="_${target}" href="$1">$1</a>`)
+  r = r.replace(
+    /\[\[(h_t_t_ps?:[^\]|]*?)\]\]/g,
+    `<a target="_${target}" href="$1">$1</a>`
+  )
   r = r.replace(
     /\[\[(h_t_t_ps?:[^|]*?)\|(.*?)\]\]/g,
     `<a target="_${target}" href="$1">$2</a>`
@@ -208,7 +211,14 @@ L.Util.sortFeatures = (features, sortKey) => {
     } else if (!valB) {
       score = 1
     } else {
-      score = valA.toString().toLowerCase().localeCompare(valB.toString().toLowerCase())
+      score = valA
+        .toString()
+        .toLowerCase()
+        .localeCompare(valB.toString().toLowerCase(), L.locale || 'en', {
+          sensitivity: 'base',
+          ignorePunctuation: true,
+          numeric: true,
+        })
     }
     if (score === 0 && sortKeys[i + 1]) return sort(a, b, i + 1)
     return score
diff --git a/umap/static/umap/test/DataLayer.js b/umap/static/umap/test/DataLayer.js
index b4704cfe..e2b81770 100644
--- a/umap/static/umap/test/DataLayer.js
+++ b/umap/static/umap/test/DataLayer.js
@@ -428,6 +428,37 @@ describe('L.U.DataLayer', function () {
       // This one comes from a non browsable layer
       // so it should not be affected by the filter
       assert.ok(qs('path[fill="SteelBlue"]'))
+      happen.click(qs('input[data-value="name poly"]'))  // Undo
     })
   })
+
+  describe("#openBrower()", function() {
+    let poly, marker, line
+    before(function () {
+      this.datalayer.eachLayer(function (layer) {
+        if (!poly && layer instanceof L.Polygon) {
+          poly = layer
+        } else if (!line && layer instanceof L.Polyline) {
+          line = layer
+        } else if (!marker && layer instanceof L.Marker) {
+          marker = layer
+        }
+      })
+    })
+
+    it('should sort feature in natural order', function () {
+      poly.properties.name = '9. a poly'
+      marker.properties.name = '1. a marker'
+      line.properties.name = '100. a line'
+      this.datalayer.reindex()
+      this.map.openBrowser()
+      const els = qsa('.umap-browse-features li')
+      assert.equal(els.length, 3)
+      assert.equal(els[0].textContent, '1. a marker')
+      assert.equal(els[1].textContent, '9. a poly')
+      assert.equal(els[2].textContent, '100. a line')
+    })
+
+  })
+
 })