diff --git a/package-lock.json b/package-lock.json
index cf55df1ff..f5386af17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "kuzzle-admin-console",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1474,9 +1474,9 @@
       }
     },
     "@types/geojson": {
-      "version": "7946.0.7",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
-      "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA=="
     },
     "@types/glob": {
       "version": "7.1.3",
@@ -1501,9 +1501,9 @@
       "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
     },
     "@types/leaflet": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.0.tgz",
-      "integrity": "sha512-ltv5jR+VjKSMtoDkxH61Rsbo0zLU7iqyOXpVPkAX4F+79fg2eymC7t0msWsfNaEZO1FGTIQATCCCQe+ijWoicg==",
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.4.tgz",
+      "integrity": "sha512-a3qYlMwJ62+WRoiDmYODUD4KywA14jP2XohAkAWtELGuMAD3MohZa/MmIvQDqF52xNI9OYaY8BMsL+9z7yf2HQ==",
       "requires": {
         "@types/geojson": "*"
       }
@@ -1922,6 +1922,87 @@
         "tslint": "^5.20.1",
         "webpack": "^4.0.0",
         "yorkie": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "optional": true
+        },
+        "fork-ts-checker-webpack-plugin-v5": {
+          "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
+          "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
+          "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
+          "optional": true,
+          "requires": {
+            "@babel/code-frame": "^7.8.3",
+            "@types/json-schema": "^7.0.5",
+            "chalk": "^4.1.0",
+            "cosmiconfig": "^6.0.0",
+            "deepmerge": "^4.2.2",
+            "fs-extra": "^9.0.0",
+            "memfs": "^3.1.2",
+            "minimatch": "^3.0.4",
+            "schema-utils": "2.7.0",
+            "semver": "^7.3.2",
+            "tapable": "^1.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "optional": true
+        },
+        "schema-utils": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+          "optional": true,
+          "requires": {
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "@vue/cli-plugin-unit-mocha": {
@@ -2243,6 +2324,21 @@
         }
       }
     },
+    "@vue/composition-api": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.2.4.tgz",
+      "integrity": "sha512-8LVV6O4slsroBhRKxly3em5H3D5Q+ggPG75lcilh5MfLGs69LEdwm6dKhSOXtQoSyMGF4Rq30E4DcouopM8Rxg==",
+      "requires": {
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "@vue/eslint-config-prettier": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-4.0.1.tgz",
@@ -2468,8 +2564,8 @@
       }
     },
     "ace-builds": {
-      "version": "git://github.com/ajaxorg/ace-builds.git#5ad04a46e8e0981a65dd982693e5d19a2209311c",
-      "from": "git://github.com/ajaxorg/ace-builds.git#v1.4.7"
+      "version": "git+https://github.com/ajaxorg/ace-builds.git#5ad04a46e8e0981a65dd982693e5d19a2209311c",
+      "from": "git+https://github.com/ajaxorg/ace-builds.git#v1.4.7"
     },
     "acorn": {
       "version": "6.4.2",
@@ -7323,87 +7419,6 @@
         }
       }
     },
-    "fork-ts-checker-webpack-plugin-v5": {
-      "version": "npm:fork-ts-checker-webpack-plugin@5.2.1",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-5.2.1.tgz",
-      "integrity": "sha512-SVi+ZAQOGbtAsUWrZvGzz38ga2YqjWvca1pXQFUArIVXqli0lLoDQ8uS0wg0kSpcwpZmaW5jVCZXQebkyUQSsw==",
-      "optional": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@types/json-schema": "^7.0.5",
-        "chalk": "^4.1.0",
-        "cosmiconfig": "^6.0.0",
-        "deepmerge": "^4.2.2",
-        "fs-extra": "^9.0.0",
-        "memfs": "^3.1.2",
-        "minimatch": "^3.0.4",
-        "schema-utils": "2.7.0",
-        "semver": "^7.3.2",
-        "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "optional": true
-        },
-        "schema-utils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
-          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
-          "optional": true,
-          "requires": {
-            "@types/json-schema": "^7.0.4",
-            "ajv": "^6.12.2",
-            "ajv-keywords": "^3.4.1"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -9762,9 +9777,9 @@
       },
       "dependencies": {
         "ws": {
-          "version": "6.2.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
-          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "version": "6.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
           "requires": {
             "async-limiter": "~1.0.0"
           }
@@ -9772,12 +9787,19 @@
       }
     },
     "kuzzle-sdk-v7": {
-      "version": "npm:kuzzle-sdk@7.6.1",
-      "resolved": "https://registry.npmjs.org/kuzzle-sdk/-/kuzzle-sdk-7.6.1.tgz",
-      "integrity": "sha512-cSLvvuy6nu3Ra5EtZd+5+c8aFEgFBmjlZV6c9n/4GyGYSyOCTPvWWZ4tKBKaD6N9L1jsi+1acyUjKrzxr/xY8Q==",
+      "version": "npm:kuzzle-sdk@7.7.5",
+      "resolved": "https://registry.npmjs.org/kuzzle-sdk/-/kuzzle-sdk-7.7.5.tgz",
+      "integrity": "sha512-hUei7hm9CWPifAzXWliAZrkTtl6DFN2unqBxc4XkxGCQfUyCOe3QuwX0V+yZFdiFv7qVATFJAnchmbv8qryWfw==",
       "requires": {
         "min-req-promise": "^1.0.1",
-        "ws": "^7.4.4"
+        "ws": "^7.4.6"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "7.5.4",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.4.tgz",
+          "integrity": "sha512-zP9z6GXm6zC27YtspwH99T3qTG7bBFv2VIkeHstMLrLlDJuzA7tQ5ls3OJ1hOGGCzTQPniNJoHXIAOS0Jljohg=="
+        }
       }
     },
     "kuzzle-vault": {
@@ -16578,9 +16600,9 @@
       }
     },
     "vue-loader-v16": {
-      "version": "npm:vue-loader@16.2.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
-      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
+      "version": "npm:vue-loader@16.5.0",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
+      "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
       "optional": true,
       "requires": {
         "chalk": "^4.1.0",
@@ -16598,9 +16620,9 @@
           }
         },
         "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "optional": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -16708,20 +16730,9 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw=="
     },
     "vue2-leaflet": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-1.2.3.tgz",
-      "integrity": "sha512-dsmhswT6Xu2Nm59T64edvG0lpycSgIWQL3pUU7h6foP8QL+mSuT5gnhJGLO2mt+39w+HBTr4Rgz8bQvyELKVPA==",
-      "requires": {
-        "@types/leaflet": "^1.2.11",
-        "leaflet": "1.3.1"
-      },
-      "dependencies": {
-        "leaflet": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
-          "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
-        }
-      }
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.7.1.tgz",
+      "integrity": "sha512-K7HOlzRhjt3Z7+IvTqEavIBRbmCwSZSCVUlz9u4Rc+3xGCLsHKz4TAL4diAmfHElCQdPPVdZdJk8wPUt2fu6WQ=="
     },
     "vuedraggable": {
       "version": "2.24.3",
diff --git a/package.json b/package.json
index 5eec575cd..dd9f6ab8f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kuzzle-admin-console",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "A handy administrative console for Kuzzle",
   "author": "The Kuzzle team <support@kuzzle.io>",
   "scripts": {
@@ -19,6 +19,7 @@
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.7.5",
     "@fortawesome/fontawesome-free": "^5.8.1",
+    "@types/leaflet": "^1.7.4",
     "@types/node": "^14.6.1",
     "@typescript-eslint/eslint-plugin": "^2.12.0",
     "@typescript-eslint/parser": "^2.12.0",
@@ -29,10 +30,11 @@
     "@vue/cli-plugin-unit-mocha": "^4.1.0",
     "@vue/cli-plugin-vuex": "^4.1.0",
     "@vue/cli-service": "^4.1.0",
+    "@vue/composition-api": "^1.2.4",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/eslint-config-typescript": "^5.0.1",
     "@vue/test-utils": "^1.0.0-beta.30",
-    "ace-builds": "git://github.com/ajaxorg/ace-builds.git#v1.4.7",
+    "ace-builds": "git+https://github.com/ajaxorg/ace-builds.git#v1.4.7",
     "apexcharts": "^3.22.2",
     "babel-polyfill": "^6.26.0",
     "bootstrap-vue": "^2.13.0",
@@ -65,7 +67,7 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.1.3",
     "vue-template-compiler": "^2.6.10",
-    "vue2-leaflet": "^1.0.2",
+    "vue2-leaflet": "^2.7.1",
     "vuedraggable": "^2.24.3",
     "vuejs-logger": "1.5.4",
     "vuelidate": "^0.7.5",
diff --git a/src/assets/environment.scss b/src/assets/environment.scss
index ab336a51b..8ce65289c 100644
--- a/src/assets/environment.scss
+++ b/src/assets/environment.scss
@@ -63,6 +63,6 @@ $colors: (
 
 @each $name, $value in $colors {
   .EnvColor--#{$name} {
-    background-color: $value;
+    background-color: $value !important;
   }
 }
diff --git a/src/components/Common/AutoFocusInput.vue b/src/components/Common/AutoFocusInput.vue
deleted file mode 100644
index b8acab934..000000000
--- a/src/components/Common/AutoFocusInput.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <b-form-input
-    :ref="refName"
-    v-model="value"
-    v-bind="$attrs"
-    data-auto-focus-input="true"
-  />
-</template>
-
-<script>
-// Keep the first mounted component parent in global to ensure developers never
-// mount two AutoFocusInput component on the same page
-let componentParents = []
-
-function getParents(component, parents = []) {
-  if (!component.$parent) {
-    return parents
-  }
-
-  return getParents(component.$parent, [component.$options.name, ...parents])
-}
-
-export default {
-  name: 'AutoFocusInput',
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    initialValue: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      value: this.initialValue
-    }
-  },
-  computed: {
-    refName() {
-      return `auto-focus-input-${this.name}`
-    }
-  },
-  methods: {
-    // AutoFocusInput should not handle keypress when user is using another input
-    shouldHandleKeypress() {
-      const tagType = document.activeElement.tagName
-
-      // If we are currently selecting another input
-      if (
-        tagType === 'INPUT' &&
-        !document.activeElement.dataset.autoFocusInput
-      ) {
-        return false
-      }
-
-      return true
-    },
-    isFocus() {
-      return this.$refs[this.refName].$refs.input === document.activeElement
-    },
-    listenKeypress() {
-      document.onkeypress = keyEvent => {
-        if (!this.shouldHandleKeypress()) {
-          return
-        }
-
-        if (this.isFocus()) {
-          if (keyEvent.code === 'Enter') {
-            this.$emit('submit')
-          }
-
-          return
-        }
-
-        this.$refs[this.refName].focus()
-
-        // Firefox does not follow the key event to the input but Chrome does
-        // so after the event has finished his propagation, we check the input
-        // value and on Firefox it will be empty so we put the first letter inside
-        // Using preventDefault() to manually input the first letter and prevent
-        // to have double input on Chrome doesn't work well because then the cursor
-        // is at the wrong place
-        setTimeout(() => {
-          if (this.value === '') {
-            this.value = keyEvent.key
-          }
-        }, 1)
-      }
-    },
-    stopListenKeypress() {
-      document.onkeypress = null
-    }
-  },
-  mounted() {
-    if (componentParents.length !== 0) {
-      throw new Error(
-        `Cannot mount AutoFocusInput at: ${getParents(this).join(
-          ' > '
-        )}. \nAn AutoFocusInput is already mounted at: ${componentParents.join(
-          ' > '
-        )}.`
-      )
-    }
-
-    componentParents = getParents(this)
-
-    this.listenKeypress()
-  },
-  watch: {
-    value() {
-      this.$emit('input', this.value)
-    }
-  },
-  beforeDestroy() {
-    this.stopListenKeypress()
-    componentParents = []
-  }
-}
-</script>
diff --git a/src/components/Common/Environments/CreateEnvironment.vue b/src/components/Common/Environments/CreateEnvironment.vue
index 53d413b32..012b1111e 100644
--- a/src/components/Common/Environments/CreateEnvironment.vue
+++ b/src/components/Common/Environments/CreateEnvironment.vue
@@ -127,7 +127,11 @@ import { validationMixin } from 'vuelidate'
 import { numeric, required } from 'vuelidate/lib/validators'
 import { isValidHostname, notIncludeScheme } from '../../../validators'
 
-import { envColors, DEFAULT_COLOR } from '../../../vuex/modules/kuzzle/store'
+import {
+  envColors,
+  DEFAULT_COLOR,
+  NO_ADMIN_WARNING_HOSTS
+} from '../../../vuex/modules/kuzzle/store'
 const useHttps = window.location.protocol === 'https:'
 
 /**
@@ -167,7 +171,8 @@ export default {
         port: 7512,
         color: null,
         ssl: useHttps,
-        backendMajorVersion: null
+        backendMajorVersion: null,
+        hideAdminWarning: false
       },
       submitting: false
     }
@@ -259,15 +264,15 @@ export default {
     }
   },
   mounted() {
-    if (this.environmentId && this.environments[this.environmentId]) {
-      this.environment.name = this.environments[this.environmentId].name
-      this.environment.host = this.environments[this.environmentId].host
-      this.environment.port = this.environments[this.environmentId].port
-      this.environment.color = this.environments[this.environmentId].color
-      this.environment.ssl = this.environments[this.environmentId].ssl
-      this.environment.backendMajorVersion = this.environments[
-        this.environmentId
-      ].backendMajorVersion
+    const currentEnv = this.environments[this.environmentId]
+    if (this.environmentId && currentEnv) {
+      this.environment.name = currentEnv.name
+      this.environment.host = currentEnv.host
+      this.environment.port = currentEnv.port
+      this.environment.color = currentEnv.color
+      this.environment.ssl = currentEnv.ssl
+      this.environment.backendMajorVersion = currentEnv.backendMajorVersion
+      this.environment.hideAdminWarning = currentEnv.hideAdminWarning
       this.$nextTick(() => this.showValidationErrors())
     } else {
       this.environment.name = null
@@ -276,6 +281,7 @@ export default {
       this.environment.color = DEFAULT_COLOR
       this.environment.ssl = useHttps
       this.environment.backendMajorVersion = null
+      this.environment.hideAdminWarning = false
     }
   },
   methods: {
@@ -316,7 +322,8 @@ export default {
               host: this.environment.host,
               port: parseInt(this.environment.port),
               ssl: this.environment.ssl,
-              backendMajorVersion: this.environment.backendMajorVersion
+              backendMajorVersion: this.environment.backendMajorVersion,
+              hideAdminWarning: this.environment.hideAdminWarning
             }
           })
         } else {
@@ -328,7 +335,12 @@ export default {
               host: this.environment.host,
               port: parseInt(this.environment.port),
               ssl: this.environment.ssl,
-              backendMajorVersion: this.environment.backendMajorVersion
+              backendMajorVersion: this.environment.backendMajorVersion,
+              hideAdminWarning: NO_ADMIN_WARNING_HOSTS.includes(
+                this.environment.host
+              )
+                ? true
+                : false
             }
           })
         }
diff --git a/src/components/Common/Filters/BasicFilter.vue b/src/components/Common/Filters/BasicFilter.vue
index cf3c5a7e5..890e0db85 100644
--- a/src/components/Common/Filters/BasicFilter.vue
+++ b/src/components/Common/Filters/BasicFilter.vue
@@ -12,7 +12,11 @@
               v-if="groupIndex === filters.basic.length - 1"
               v-slot:footer
             >
-              <b-button @click="addOrCondition" variant="outline-secondary">
+              <b-button
+                :disabled="isInvalidBlock(orBlock)"
+                @click="addOrCondition"
+                variant="outline-secondary"
+              >
                 <i class="fa fa-plus left mr-2" />OR
               </b-button>
             </template>
@@ -124,7 +128,7 @@
                   </b-col>
                   <b-col sm="1" class="text-center">
                     <b-button
-                      v-if="filterIndex > 0"
+                      v-if="filterIndex > 0 || groupIndex > 0"
                       @click="removeAndCondition(groupIndex, filterIndex)"
                     >
                       <i class="fa fa-times pointer" />
@@ -136,6 +140,7 @@
                 <b-row align-v="center" align-h="center">
                   <b-button
                     v-if="filterIndex === orBlock.length - 1"
+                    :disabled="isInvalidStatement(filterIndex, orBlock)"
                     variant="outline-secondary"
                     @click="addAndCondition(groupIndex)"
                   >
@@ -146,7 +151,7 @@
             </b-row>
           </b-card>
 
-          <b-row v-if="groupIndex < filters.basic.length - 1">
+          <b-row v-if="groupIndex < filters.basic.length - 1" class="m-0">
             <b-col class="pr-0 mr-0" md="5"><hr /></b-col>
             <b-col
               md="2"
@@ -162,7 +167,7 @@
 
     <b-row align-h="center" align-v="center">
       <b-col md="4">
-        <b-input-group v-if="sortingEnabled" class="ml-1" prepend="Sort">
+        <b-input-group v-if="sortingEnabled" prepend="Sort">
           <b-form-select
             data-cy="BasicFilter-sortAttributeSelect"
             placeholder="Attribute"
@@ -263,10 +268,13 @@ export default {
   computed: {
     ...mapGetters('kuzzle', ['wrapper']),
     selectAttributesValues() {
-      return Object.keys(this.mappingAttributes).map(a => ({
-        text: a,
-        value: a
-      }))
+      return [
+        { text: '_id', value: '_id' },
+        ...Object.keys(this.mappingAttributes).map(a => ({
+          text: a,
+          value: a
+        }))
+      ]
     },
     sortAttributesValues() {
       return Object.keys(this.mappingAttributes)
@@ -331,6 +339,28 @@ export default {
     }
   },
   methods: {
+    isInvalidBlock(orBlock) {
+      return this.isInvalidStatement(orBlock.length - 1, orBlock)
+    },
+    isInvalidStatement(filterIndex, orBlock) {
+      const statement = orBlock[filterIndex]
+      const operator = statement.operator
+
+      switch (operator) {
+        case 'contains':
+        case 'not_contains':
+        case 'equal':
+        case 'not_equal':
+          return Boolean(!statement.attribute || !statement.value)
+        case 'exists':
+        case 'not_exists':
+          return Boolean(!statement.attribute)
+        case 'range':
+          return Boolean(
+            !statement.attribute || (!statement.gt_value && !statement.lt_value)
+          )
+      }
+    },
     setSortAttr(attribute) {
       this.$set(this.filters.sorting, 'attribute', attribute)
     },
diff --git a/src/components/Common/Filters/Filters.vue b/src/components/Common/Filters/Filters.vue
index abf609f4f..1e61026b4 100644
--- a/src/components/Common/Filters/Filters.vue
+++ b/src/components/Common/Filters/Filters.vue
@@ -13,23 +13,21 @@
         <quick-filter
           v-if="!advancedFiltersVisible"
           style="flex-grow: 1"
-          v-model="quickFilter"
           submit-button-label="Quick Search"
           :action-buttons-visible="actionButtonsVisible"
           :advanced-filters-visible="advancedFiltersVisible"
           :advanced-query-label="advancedQueryLabel"
           :complex-filter-active="complexFilterActive"
           :enabled="quickFilterEnabled"
-          :initialValue="quickFilter"
           :placeholder="quickFilterPlaceholder"
           :submit-on-type="quickFilterSubmitOnType"
+          :value="quickFilter"
           @display-advanced-filters="
             advancedFiltersVisible = !advancedFiltersVisible
           "
-          @filter-submitted="onQuickFilterSubmitted"
-          @refresh="onRefresh"
+          @input="onQuickFilterUpdated"
           @reset="onReset"
-          @enter-pressed="onEnterPressed"
+          @submit="onQuickFilterSubmitted"
         />
         <template v-if="advancedFiltersVisible">
           <b-nav-item
@@ -254,9 +252,6 @@ export default {
         }
 
         return this.currentFilter.quick
-      },
-      set(value) {
-        this.currentFilter.quick = value
       }
     },
     basicFilter() {
@@ -280,13 +275,18 @@ export default {
       this.objectTabActive = tab
       this.refreshace = !this.refreshace
     },
+    onQuickFilterUpdated(term) {
+      this.onFiltersUpdated({
+        ...this.currentFilter,
+        quick: term
+      })
+    },
     onQuickFilterSubmitted(term) {
-      this.onSubmit(
-        Object.assign(this.currentFilter, {
-          active: term ? ACTIVE_QUICK : NO_ACTIVE,
-          quick: term
-        })
-      )
+      this.onSubmit({
+        ...this.currentFilter,
+        active: ACTIVE_QUICK,
+        quick: term
+      })
     },
     onBasicFilterSubmitted(filter, sorting) {
       const newFilter = new Filter()
diff --git a/src/components/Common/Filters/QuickFilter.vue b/src/components/Common/Filters/QuickFilter.vue
index f12f8fb41..43be18d12 100644
--- a/src/components/Common/Filters/QuickFilter.vue
+++ b/src/components/Common/Filters/QuickFilter.vue
@@ -8,15 +8,15 @@
               <i class="fa fa-search search" />
             </b-input-group-prepend>
             <div class="QuickFilter-searchBar-input-wrapper">
-              <auto-focus-input
-                name="quick-filter"
+              <b-form-input
+                autofocus
                 data-cy="QuickFilter-input"
-                debounce="300"
+                debounce="600"
                 type="search"
-                v-model="value"
-                :initialValue="this.initialValue"
+                :value="value"
                 :placeholder="placeholder"
-                @submit="inputSubmit"
+                @input="onInput"
+                @keyup.enter="submit"
               />
             </div>
           </b-input-group>
@@ -96,13 +96,8 @@
 </template>
 
 <script>
-import AutoFocusInput from '../AutoFocusInput'
-
 export default {
   name: 'QuickFilter',
-  components: {
-    AutoFocusInput
-  },
   props: {
     advancedFiltersVisible: Boolean,
     advancedQueryLabel: {
@@ -130,19 +125,13 @@ export default {
       type: Boolean,
       default: true
     },
-    initialValue: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      value: this.initialValue
+    value: {
+      type: String
     }
   },
   methods: {
-    submitSearch() {
-      this.$emit('filter-submitted', this.value)
+    submit() {
+      this.$emit('submit', this.value)
     },
     resetSearch() {
       this.$emit('reset')
@@ -150,17 +139,8 @@ export default {
     displayAdvancedFilters() {
       this.$emit('display-advanced-filters')
     },
-    inputSubmit() {
-      this.$emit('enter-pressed')
-    }
-  },
-  watch: {
-    value() {
-      this.$emit('input', this.value)
-
-      if (this.submitOnType) {
-        this.submitSearch()
-      }
+    onInput(term) {
+      this.$emit(this.submitOnType ? 'submit' : 'input', term)
     }
   }
 }
diff --git a/src/components/Common/Filters/RawFilter.vue b/src/components/Common/Filters/RawFilter.vue
index bbf187552..bae7d1a81 100644
--- a/src/components/Common/Filters/RawFilter.vue
+++ b/src/components/Common/Filters/RawFilter.vue
@@ -69,7 +69,10 @@ export default {
   },
   data() {
     return {
-      rawFilter: '{}',
+      rawFilter: `{
+  "query": {},
+  "sort": {}
+}`,
       showError: false
     }
   },
diff --git a/src/components/Common/MainMenu.vue b/src/components/Common/MainMenu.vue
index ea170944b..691a0cda9 100644
--- a/src/components/Common/MainMenu.vue
+++ b/src/components/Common/MainMenu.vue
@@ -45,16 +45,26 @@
         >
           API Action
         </b-nav-item>
-        <b-nav-text
-          class="ml-2"
-          title="Give us your feedback on our GitHub page"
+        <b-dropdown
+          class="mr-2"
+          no-caret
+          :toggle-class="
+            `feedbackDropdown EnvColor--${currentEnvironmentColor}`
+          "
         >
-          <a
-            href="https://github.com/kuzzleio/kuzzle-admin-console"
+          <template v-slot:button-content>
+            <span class="feedbackButtonText">Feedback</span>
+          </template>
+          <b-dropdown-item
+            v-for="feedback of feedbackOptions"
+            :key="`feedback-${feedback.text}`"
+            :href="feedback.url"
             target="_blank"
-            ><i class="logout fab fa-github fa-lg"
-          /></a>
-        </b-nav-text>
+          >
+            <i :class="feedback.icon" class="mr-2 feedbackIcon" />
+            {{ feedback.text }}
+          </b-dropdown-item>
+        </b-dropdown>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto">
         <b-nav-text
@@ -72,9 +82,9 @@
           @environment::delete="deleteEnvironment"
         />
         <b-nav-item class="ml-1">
-          <a data-cy="MainMenu-logoutBtn" title="Logout" @click="doLogout"
-            ><i class="logout fas fa-power-off"
-          /></a>
+          <a data-cy="MainMenu-logoutBtn" title="Logout" @click="doLogout">
+            <i class="logout fas fa-power-off" />
+          </a>
         </b-nav-item>
       </b-navbar-nav>
     </b-collapse>
@@ -89,6 +99,29 @@ export default {
   components: {
     EnvironmentSwitch
   },
+  data() {
+    return {
+      feedbackOptions: [
+        {
+          text: 'Talk with our community',
+          url: 'http://join.discord.kuzzle.io/',
+          icon: 'fab fa-discord'
+        },
+        {
+          text: 'Ask a question',
+          url:
+            'https://stackoverflow.com/questions/ask?tags=kuzzle&title=[Admin%20Console]',
+          icon: 'fab fa-stack-overflow'
+        },
+        {
+          text: 'Fill an issue',
+          url:
+            'https://github.com/kuzzleio/kuzzle-admin-console/issues/new/choose',
+          icon: 'fab fa-github'
+        }
+      ]
+    }
+  },
   computed: {
     ...mapGetters('auth', ['hasSecurityRights', 'user']),
     currentEnvironmentColor() {
@@ -114,20 +147,10 @@ export default {
     async doLogout() {
       try {
         await this.$store.direct.dispatch.auth.doLogout()
-        this.$router.push({ name: 'Login' })
       } catch (error) {
         this.$log.error(error)
-        this.$bvToast.toast(
-          'The complete error has been printed to the console.',
-          {
-            title: 'Ooops! Something went wrong while logging out.',
-            variant: 'warning',
-            toaster: 'b-toaster-bottom-right',
-            appendToast: true,
-            dismissible: true,
-            noAutoHide: true
-          }
-        )
+      } finally {
+        this.$router.push({ name: 'Login' })
       }
     },
 
@@ -145,6 +168,23 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.feedbackButtonText {
+  opacity: 0.5;
+}
+
+.feedbackIcon {
+  width: 1em;
+}
+
+::v-deep .feedbackDropdown {
+  border: none;
+  box-shadow: none !important;
+}
+
+::v-deep .show .feedbackDropdown i {
+  transform: rotate(90deg);
+}
+
 .logo {
   padding: 0;
 
diff --git a/src/components/ConnectionAwareContainer.vue b/src/components/ConnectionAwareContainer.vue
index 86a14c920..9aff6b78b 100644
--- a/src/components/ConnectionAwareContainer.vue
+++ b/src/components/ConnectionAwareContainer.vue
@@ -170,7 +170,7 @@ export default {
     this.removeListeners()
   },
   watch: {
-    $route: {
+    '$route.path': {
       immediate: false,
       handler() {
         this.authenticationGuard()
diff --git a/src/components/Data/Collections/CollectionList.vue b/src/components/Data/Collections/CollectionList.vue
index c42f369e7..e62f10acb 100644
--- a/src/components/Data/Collections/CollectionList.vue
+++ b/src/components/Data/Collections/CollectionList.vue
@@ -1,259 +1,275 @@
 <template>
-  <b-container class="CollectionList" v-if="index">
-    <headline>
-      <b-row>
-        <b-col sm="9" class="text-truncate">
-          <i class="fa fa-database text-secondary"></i> &nbsp;
-          <span class="code">{{ indexName }}</span>
-        </b-col>
-        <b-col class="text-right">
-          <b-button
-            class="align-middle"
-            data-cy="CollectionList-create"
-            variant="primary"
-            :disabled="!canCreateCollection(indexName) || !index"
-            :title="
-              !canCreateCollection(indexName)
-                ? `Your rights disallow you to create collections on index ${indexName}`
-                : ''
-            "
-            :to="{ name: 'CreateCollection', params: { indexName } }"
-          >
-            <i class="fa fa-plus"></i> Create a collection
-          </b-button>
-        </b-col>
-      </b-row>
-    </headline>
-
-    <list-not-allowed v-if="!canSearchCollection(indexName)" />
-    <div class="CollectionList-content" v-else-if="collections">
-      <template>
-        <b-row class="mb-3">
-          <b-col sm="2" class="text-secondary">
-            {{ collections.length }}
-            {{ collections.length === 1 ? 'collection' : 'collections' }}
-          </b-col>
-          <b-col sm="10">
-            <b-row>
-              <b-col cols="6" class="text-right">
-                <b-button
-                  variant="outline-dark"
-                  class="mr-2"
-                  @click="onToggleAllClicked"
-                >
-                  <i
-                    :class="
-                      `far ${
-                        selectedCollections.length ===
-                        filteredCollections.length
-                          ? 'fa-check-square'
-                          : 'fa-square'
-                      } left`
-                    "
-                  />
-                  Toggle all
-                </b-button>
+  <div>
+    <b-container class="CollectionList" v-if="index">
+      <headline>
+        <div class="d-flex flex-row">
+          <span class="flex-grow-1 text-truncate">
+            <i class="fa fa-database text-secondary"></i> &nbsp;
+            <span class="code">{{ indexName }}</span>
+          </span>
+          <span class="text-right">
+            <b-button
+              class="align-middle"
+              data-cy="CollectionList-create"
+              variant="primary"
+              :disabled="!canCreateCollection(indexName) || !index"
+              :title="
+                !canCreateCollection(indexName)
+                  ? `Your rights disallow you to create collections on index ${indexName}`
+                  : ''
+              "
+              :to="{ name: 'CreateCollection', params: { indexName } }"
+            >
+              <i class="fa fa-plus"></i> Create a collection
+            </b-button>
+            <IndexDropdownAction
+              :indexName="indexName"
+              @delete-index-clicked="onDeleteIndexClicked"
+            />
+          </span>
+        </div>
+      </headline>
 
-                <b-button
-                  variant="outline-danger"
-                  :data-cy="`CollectionList-bulkDelete--btn`"
-                  :disabled="!bulkDeleteEnabled"
-                  v-if="
-                    $store.direct.getters.kuzzle.currentEnvironment
-                      .backendMajorVersion !== 1
-                  "
-                  @click="deleteCollections"
-                >
-                  <i class="fa fa-minus-circle left" />
-                  Delete
-                </b-button>
-              </b-col>
-              <b-col cols="6">
-                <b-input-group>
-                  <template v-slot:prepend>
-                    <b-input-group-text>Filter</b-input-group-text>
-                  </template>
+      <list-not-allowed v-if="!canSearchCollection(indexName)" />
+      <div class="CollectionList-content" v-else-if="collections">
+        <template>
+          <b-row class="mb-3">
+            <b-col sm="2" class="text-secondary">
+              {{ collections.length }}
+              {{ collections.length === 1 ? 'collection' : 'collections' }}
+            </b-col>
+            <b-col sm="10">
+              <b-row>
+                <b-col cols="6" class="text-right">
+                  <b-button
+                    variant="outline-dark"
+                    class="mr-2"
+                    @click="onToggleAllClicked"
+                  >
+                    <i
+                      :class="
+                        `far ${
+                          selectedCollections.length ===
+                          filteredCollections.length
+                            ? 'fa-check-square'
+                            : 'fa-square'
+                        } left`
+                      "
+                    />
+                    Toggle all
+                  </b-button>
 
-                  <auto-focus-input
-                    name="collection"
-                    v-model="filter"
-                    @submit="navigateToCollection"
-                    :disabled="collections.length === 0"
-                  />
-                </b-input-group>
-              </b-col>
-            </b-row>
-          </b-col>
-        </b-row>
+                  <b-button
+                    variant="outline-danger"
+                    :data-cy="`CollectionList-bulkDelete--btn`"
+                    :disabled="!bulkDeleteEnabled"
+                    v-if="
+                      $store.direct.getters.kuzzle.currentEnvironment
+                        .backendMajorVersion !== 1
+                    "
+                    @click="deleteCollections"
+                  >
+                    <i class="fa fa-minus-circle left" />
+                    Delete
+                  </b-button>
+                </b-col>
+                <b-col cols="6">
+                  <b-input-group>
+                    <template v-slot:prepend>
+                      <b-input-group-text>Filter</b-input-group-text>
+                    </template>
+                    <b-form-input
+                      autofocus
+                      debounce="300"
+                      v-model="filter"
+                      :disabled="collections.length === 0"
+                      @keyup.enter="navigateToCollection"
+                    />
+                  </b-input-group>
+                </b-col>
+              </b-row>
+            </b-col>
+          </b-row>
 
-        <b-table
-          striped
-          outlined
-          show-empty
-          data-cy="CollectionList-table"
-          :items="collections"
-          :fields="tableFields"
-          :filter="filter"
-          @filtered="updateFilteredCollections"
-        >
-          <template v-slot:empty>
-            <h4 class="text-secondary text-center">
-              This index has no collections.
-            </h4>
-            <p
-              v-if="canCreateCollection(index.name)"
-              class="text-secondary text-center"
-            >
-              You can create the collection by hitting the button above.
-            </p>
-          </template>
-          <template v-slot:emptyfiltered>
-            <h4 class="text-secondary text-center">
-              There is no collection matching your filter.
-            </h4>
-          </template>
-          <template v-slot:cell(selected)="row">
-            <b-form-checkbox
-              class="d-inline-block align-middle"
-              type="checkbox"
-              unchecked-value="false"
-              value="true"
-              :data-cy="`CollectionList-checkbox--${row.item.name}`"
-              :checked="isChecked(row.item)"
-              @change="onCheckboxClick(row.item)"
-            />
-          </template>
-          <template v-slot:cell(type)="row">
-            <i
-              class="fa fa-2x"
-              :class="{
-                'fa-bolt ml-2': row.item.type === 'realtime',
-                'fa-th-list': row.item.type === 'stored'
-              }"
-              :title="row.item.type === 'realtime' ? 'Realtime' : 'Stored'"
-            ></i>
-          </template>
-          <template v-slot:cell(name)="row">
-            <b-link
-              class="code"
-              :data-cy="`CollectionList-name--${row.item.name}`"
-              :title="row.item.name"
-              :to="
-                row.item.type === 'realtime'
-                  ? {
-                      name: 'WatchCollection',
-                      params: {
-                        indexName: indexName,
-                        collectionName: row.item.name
+          <b-table
+            striped
+            outlined
+            show-empty
+            data-cy="CollectionList-table"
+            :items="collections"
+            :fields="tableFields"
+            :filter="filter"
+            @filtered="updateFilteredCollections"
+          >
+            <template v-slot:empty>
+              <h4 class="text-secondary text-center">
+                This index has no collections.
+              </h4>
+              <p
+                v-if="canCreateCollection(index.name)"
+                class="text-secondary text-center"
+              >
+                You can create the collection by hitting the button above.
+              </p>
+            </template>
+            <template v-slot:emptyfiltered>
+              <h4 class="text-secondary text-center">
+                There is no collection matching your filter.
+              </h4>
+            </template>
+            <template v-slot:cell(selected)="row">
+              <b-form-checkbox
+                class="d-inline-block align-middle"
+                type="checkbox"
+                unchecked-value="false"
+                value="true"
+                :data-cy="`CollectionList-checkbox--${row.item.name}`"
+                :checked="isChecked(row.item)"
+                @change="onCheckboxClick(row.item)"
+              />
+            </template>
+            <template v-slot:cell(type)="row">
+              <i
+                class="fa fa-2x"
+                :class="{
+                  'fa-bolt ml-2': row.item.type === 'realtime',
+                  'fa-th-list': row.item.type === 'stored'
+                }"
+                :title="row.item.type === 'realtime' ? 'Realtime' : 'Stored'"
+              ></i>
+            </template>
+            <template v-slot:cell(name)="row">
+              <b-link
+                class="code"
+                :data-cy="`CollectionList-name--${row.item.name}`"
+                :title="row.item.name"
+                :to="
+                  row.item.type === 'realtime'
+                    ? {
+                        name: 'WatchCollection',
+                        params: {
+                          indexName: indexName,
+                          collectionName: row.item.name
+                        }
                       }
-                    }
-                  : {
-                      name: 'DocumentList',
-                      params: {
-                        indexName: indexName,
-                        collectionName: row.item.name
+                    : {
+                        name: 'DocumentList',
+                        params: {
+                          indexName: indexName,
+                          collectionName: row.item.name
+                        }
                       }
-                    }
-              "
-              >{{ truncateName(row.item.name) }}</b-link
-            >
-          </template>
-          <template v-slot:cell(count)="row">
-            {{ row.item.count }}
-          </template>
-          <template v-slot:cell(actions)="row">
-            <b-button
-              class="mx-1"
-              variant="link"
-              title="Browse contents"
-              :to="
-                row.item.type === 'realtime'
-                  ? {
-                      name: 'WatchCollection',
-                      params: {
-                        indexName: indexName,
-                        collectionName: row.item.name
+                "
+                >{{ truncateName(row.item.name) }}</b-link
+              >
+            </template>
+            <template v-slot:cell(count)="row">
+              {{ row.item.count }}
+            </template>
+            <template v-slot:cell(actions)="row">
+              <b-button
+                class="mx-1"
+                variant="link"
+                title="Browse contents"
+                :to="
+                  row.item.type === 'realtime'
+                    ? {
+                        name: 'WatchCollection',
+                        params: {
+                          indexName: indexName,
+                          collectionName: row.item.name
+                        }
                       }
-                    }
-                  : {
-                      name: 'DocumentList',
-                      params: {
-                        indexName: indexName,
-                        collectionName: row.item.name
+                    : {
+                        name: 'DocumentList',
+                        params: {
+                          indexName: indexName,
+                          collectionName: row.item.name
+                        }
                       }
-                    }
-              "
-              ><i class="fa fa-eye"></i
-            ></b-button>
-            <b-button
-              class="mx-1"
-              variant="link"
-              title="Edit collection"
-              :data-cy="`CollectionList-edit--${row.item.name}`"
-              :disabled="
-                row.item.type !== 'stored' || !canEditCollection(row.item.name)
-              "
-              :to="
-                canEditCollection(row.item.name)
-                  ? {
-                      name: 'EditCollection',
-                      params: {
-                        indexName: indexName,
-                        collectionName: row.item.name
+                "
+                ><i class="fa fa-eye"></i
+              ></b-button>
+              <b-button
+                class="mx-1"
+                variant="link"
+                title="Edit collection"
+                :data-cy="`CollectionList-edit--${row.item.name}`"
+                :disabled="
+                  row.item.type !== 'stored' ||
+                    !canEditCollection(row.item.name)
+                "
+                :to="
+                  canEditCollection(row.item.name)
+                    ? {
+                        name: 'EditCollection',
+                        params: {
+                          indexName: indexName,
+                          collectionName: row.item.name
+                        }
                       }
-                    }
-                  : ''
-              "
-              ><i class="fa fa-pencil-alt"></i
-            ></b-button>
-            <b-button
-              class="mx-1"
-              variant="link"
-              v-if="
-                $store.direct.getters.kuzzle.currentEnvironment
-                  .backendMajorVersion !== 1 && !row.item.isRealtime()
-              "
-              title="Delete collection"
-              :data-cy="`CollectionList-delete--${row.item.name}`"
-              @click="onDeleteCollectionClicked(row.item)"
-              ><i class="fa fa-trash"></i
-            ></b-button>
-          </template>
-        </b-table>
-      </template>
-    </div>
-    <DeleteCollectionModal
+                    : ''
+                "
+                ><i class="fa fa-pencil-alt"></i
+              ></b-button>
+              <b-button
+                class="mx-1"
+                variant="link"
+                v-if="
+                  $store.direct.getters.kuzzle.currentEnvironment
+                    .backendMajorVersion !== 1 && !row.item.isRealtime()
+                "
+                title="Delete collection"
+                :data-cy="`CollectionList-delete--${row.item.name}`"
+                @click="onDeleteCollectionClicked(row.item)"
+                ><i class="fa fa-trash"></i
+              ></b-button>
+            </template>
+          </b-table>
+        </template>
+      </div>
+      <DeleteCollectionModal
+        :index="index"
+        :collection="collectionToDelete"
+        :modalId="deleteCollectionModalId"
+        @delete-successful="onDeleteModalSuccess"
+      />
+      <BulkDeleteCollectionsModal
+        :index="index"
+        :collections="selectedCollections"
+        :modalId="bulkDeleteCollectionsModalId"
+        @delete-successful="onDeleteModalSuccess"
+      />
+    </b-container>
+    <DeleteIndexModal
+      :ref="deleteIndexModalId"
       :index="index"
-      :collection="collectionToDelete"
-      :modalId="deleteCollectionModalId"
-      @delete-successful="onDeleteModalSuccess"
+      :modalId="deleteIndexModalId"
+      @confirm-deletion="onDeleteIndexConfirm"
+      @cancel="onDeleteIndexCancel"
     />
-    <BulkDeleteCollectionsModal
-      :index="index"
-      :collections="selectedCollections"
-      :modalId="bulkDeleteCollectionsModalId"
-      @delete-successful="onDeleteModalSuccess"
-    />
-  </b-container>
+  </div>
 </template>
 
 <script>
+import IndexDropdownAction from '../Indexes/DropdownActions.vue'
+import DeleteIndexModal from '../Indexes/DeleteIndexModal'
 import DeleteCollectionModal from './DeleteCollectionModal'
 import BulkDeleteCollectionsModal from './BulkDeleteCollectionsModal'
 import Headline from '../../Materialize/Headline'
 import ListNotAllowed from '../../Common/ListNotAllowed'
-import AutoFocusInput from '../../Common/AutoFocusInput'
 import { truncateName } from '../../../utils'
 import { mapGetters } from 'vuex'
 
 export default {
   name: 'CollectionList',
   components: {
+    IndexDropdownAction,
+    DeleteIndexModal,
     DeleteCollectionModal,
     BulkDeleteCollectionsModal,
     Headline,
-    ListNotAllowed,
-    AutoFocusInput
+    ListNotAllowed
   },
   props: {
     indexName: String
@@ -316,10 +332,29 @@ export default {
           label: ''
         }
       ]
+    },
+    deleteIndexModalId() {
+      return `delete-index-${this.indexName}`
     }
   },
   methods: {
     truncateName,
+    onDeleteIndexCancel() {
+      this.$refs[this.deleteIndexModalId].resetForm()
+      this.$bvModal.hide(this.deleteIndexModalId)
+    },
+    async onDeleteIndexConfirm() {
+      try {
+        await this.$store.direct.dispatch.index.deleteIndex(this.index)
+        this.$bvModal.hide(this.deleteIndexModalId)
+        this.$router.push({ name: 'Indexes', params: {} })
+      } catch (err) {
+        this.$refs[this.deleteIndexModalId].setError(err.message)
+      }
+    },
+    onDeleteIndexClicked() {
+      this.$bvModal.show(`delete-index-${this.indexName}`)
+    },
     onDeleteCollectionClicked(collection) {
       this.collectionToDelete = collection
       this.$bvModal.show(this.deleteCollectionModalId)
diff --git a/src/components/Data/Collections/DeleteCollectionModal.vue b/src/components/Data/Collections/DeleteCollectionModal.vue
index 549e0874f..6d0effd02 100644
--- a/src/components/Data/Collections/DeleteCollectionModal.vue
+++ b/src/components/Data/Collections/DeleteCollectionModal.vue
@@ -49,7 +49,7 @@
 import { truncateName } from '@/utils'
 
 export default {
-  name: 'deleteIndexModal',
+  name: 'deleteCollectionModal',
   props: {
     modalId: {
       type: String,
diff --git a/src/components/Data/Collections/DropdownView.vue b/src/components/Data/Collections/DropdownView.vue
index a702a2aa2..56bcf2a94 100644
--- a/src/components/Data/Collections/DropdownView.vue
+++ b/src/components/Data/Collections/DropdownView.vue
@@ -84,8 +84,8 @@ export default {
     },
     mappingHasGeoField() {
       return (
-        Object.keys(this.mappingAttributes).filter(
-          a => this.mappingAttributes[a].type === 'geo_point'
+        Object.keys(this.mappingAttributes).filter(a =>
+          ['geo_point', 'geo_shape'].includes(this.mappingAttributes[a].type)
         ).length > 0
       )
     }
diff --git a/src/components/Data/Documents/Page.vue b/src/components/Data/Documents/Page.vue
index 9e8e1e4a3..5c0f28809 100644
--- a/src/components/Data/Documents/Page.vue
+++ b/src/components/Data/Documents/Page.vue
@@ -46,39 +46,38 @@
           />
         </b-col>
       </b-row>
-
       <list-not-allowed
         v-if="
           !canSearchDocument(indexName, collectionName) && index && collection
         "
       />
-
       <template v-else>
-        <template v-if="isCollectionEmpty">
-          <realtime-only-empty-state
-            v-if="isRealtimeCollection"
-            :index="indexName"
-            :collection="collectionName"
-          />
-          <no-geopoint-field-state v-else-if="hasGeopoints" />
-          <empty-state v-else :index="indexName" :collection="collectionName" />
-        </template>
-
-        <template v-if="!isCollectionEmpty">
-          <filters
-            class="mb-3"
-            :available-operands="searchFilterOperands"
-            :collection="collectionName"
-            :current-filter="currentFilter"
-            :index="indexName"
-            :mapping-attributes="mappingAttributes"
-            @enter-pressed="navigateToDocument"
-            @filters-updated="onFiltersUpdated"
-            @submit="onFilterSubmit"
-          />
-        </template>
-        <template>
-          <template v-if="!isCollectionEmpty">
+        <filters
+          class="mb-3"
+          :available-operands="searchFilterOperands"
+          :collection="collectionName"
+          :current-filter="currentFilter"
+          :index="indexName"
+          :mapping-attributes="mappingAttributes"
+          @enter-pressed="navigateToDocument"
+          @filters-updated="onFiltersUpdated"
+          @submit="onFilterSubmit"
+        />
+        <template v-if="!isFetching">
+          <template v-if="isCollectionEmpty">
+            <realtime-only-empty-state
+              v-if="isRealtimeCollection"
+              :index="indexName"
+              :collection="collectionName"
+            />
+            <no-geopoint-field-state v-else-if="hasGeopoints" />
+            <empty-state
+              v-else
+              :index="indexName"
+              :collection="collectionName"
+            />
+          </template>
+          <template v-else>
             <b-card
               class="light-shadow"
               :bg-variant="documents.length === 0 ? 'light' : 'default'"
@@ -137,13 +136,17 @@
                   <Map
                     v-if="listViewType === 'map'"
                     :selected-geopoint="selectedGeopoint"
+                    :selectedGeoshape="selectedGeoshape"
                     :current-page-size="paginationSize"
                     :index="indexName"
                     :geoDocuments="geoDocuments"
+                    :shapesDocuments="shapesDocuments"
                     :collection="collectionName"
                     :mappingGeopoints="mappingGeopoints"
+                    :mappingGeoshapes="mappingGeoshapes"
                     @change-page-size="changePaginationSize"
                     @on-select-geopoint="onSelectGeopoint"
+                    @on-select-geoshape="onSelectGeoshape"
                     @edit="onEditClicked"
                     @delete="onDeleteClicked"
                   />
@@ -251,6 +254,7 @@ export default {
   },
   data() {
     return {
+      isFetching: false,
       loading: false,
       searchFilterOperands: filterManager.searchFilterOperands,
       selectedDocuments: [],
@@ -264,11 +268,14 @@ export default {
       deleteModalIsLoading: false,
       candidatesForDeletion: [],
       mappingGeopoints: [],
-      selectedGeopoint: null,
+      selectedGeopoint: '',
       resultPerPage: [10, 25, 50, 100, 500],
       currentPage: 1,
       modalDeleteId: 'modal-collection-delete',
-      displayPagination: true
+      displayPagination: true,
+      mappingGeoshapes: [],
+      selectedGeoshape: '',
+      handledGeoShapesTypes: ['circle', 'polygon', 'multipolygon']
     }
   },
   computed: {
@@ -282,6 +289,20 @@ export default {
     hasGeopoints() {
       return this.listViewType === 'map' && this.mappingGeopoints.length === 0
     },
+    hasGeoshapes() {
+      return this.listViewType === 'map' && this.mappingGeoshapes.length === 0
+    },
+    shapesDocuments() {
+      return this.documents
+        .filter(document => {
+          const shape = this.getProperty(document, this.selectedGeoshape)
+          return shape ? this.handledGeoShapesTypes.includes(shape.type) : false
+        })
+        .map(d => ({
+          content: d[this.selectedGeoshape],
+          source: d
+        }))
+    },
     geoDocuments() {
       return this.documents
         .filter(document => {
@@ -328,7 +349,7 @@ export default {
       return `${this.selectedGeopoint}.lon`
     },
     isCollectionGeo() {
-      return this.mappingGeopoints.length > 0
+      return this.mappingGeopoints.length > 0 || this.mappingGeoshapes > 0
     },
     isDocumentListFiltered() {
       return this.currentFilter.active !== filterManager.NO_ACTIVE
@@ -416,6 +437,9 @@ export default {
     onSelectGeopoint(selectedGeopoint) {
       this.selectedGeopoint = selectedGeopoint
     },
+    onSelectGeoshape(selectedGeoshape) {
+      this.selectedGeoshape = selectedGeoshape
+    },
     listMappingGeopoints(mapping, path = []) {
       let attributes = []
       for (const [attributeName, { type, properties }] of Object.entries(
@@ -436,6 +460,22 @@ export default {
 
       return attributes
     },
+    listMappingGeoshapes(mapping, path = []) {
+      let attributes = []
+      for (const [attributeName, { type, properties }] of Object.entries(
+        mapping
+      )) {
+        if (properties) {
+          attributes = attributes.concat(
+            this.listMappingGeoshapes(properties, path.concat(attributeName))
+          )
+        } else if (type === 'geo_shape') {
+          attributes = attributes.concat(path.concat(attributeName).join('.'))
+        }
+      }
+
+      return attributes
+    },
 
     // CREATE
     // =========================================================================
@@ -570,6 +610,8 @@ export default {
       this.currentFilter = new filterManager.Filter()
     },
     async fetchDocuments() {
+      this.$emit('start-fetch')
+      this.isFetching = true
       this.$forceUpdate()
       this.selectedDocuments = []
 
@@ -636,12 +678,13 @@ export default {
           })
         }
       }
+      this.isFetching = false
+      this.$emit('end-fetch')
     },
 
     // PAGINATION
     // =========================================================================
     changePaginationSize(size) {
-      this.$log.debug(`changing pagination to ${size}`)
       this.onFiltersUpdated(
         Object.assign(this.currentFilter, {
           size,
@@ -732,7 +775,13 @@ export default {
 
     loadMappingInfo() {
       this.mappingGeopoints = this.listMappingGeopoints(this.collectionMapping)
-      this.selectedGeopoint = this.mappingGeopoints[0]
+      this.mappingGeoshapes = this.listMappingGeoshapes(this.collectionMapping)
+      if (this.mappingGeopoints.length) {
+        this.selectedGeopoint = this.mappingGeopoints[0]
+      }
+      if (this.mappingGeoshapes.length) {
+        this.selectedGeoshape = this.mappingGeoshapes[0]
+      }
     },
     // TODO: Refactor this method to avoid
     // cloning document list (computed property??)
diff --git a/src/components/Data/Documents/Views/Map.vue b/src/components/Data/Documents/Views/Map.vue
index e55ec1232..ba7dee037 100644
--- a/src/components/Data/Documents/Views/Map.vue
+++ b/src/components/Data/Documents/Views/Map.vue
@@ -1,18 +1,33 @@
 <template>
   <div class="ViewMap">
     <b-row class="pb-2">
-      <b-col cols="6" class="text-left">
-        GeoPoint field
-        <b-form-select
-          class="mx-2"
-          style="width: unset"
-          :options="mappingGeopoints"
-          :value="selectedGeopoint"
-          @change="$emit('on-select-geopoint', $event)"
-        >
-        </b-form-select>
+      <b-col cols="9" class="text-left">
+        <b-row no-gutters>
+          <div v-if="mappingGeopoints.length">
+            GeoPoint field
+            <b-form-select
+              class="mx-2"
+              style="width: unset"
+              :options="mappingGeopoints"
+              :value="selectedGeopoint || ''"
+              @change="$emit('on-select-geopoint', $event)"
+            >
+            </b-form-select>
+          </div>
+          <div v-if="mappingGeoshapes.length">
+            GeoShape field
+            <b-form-select
+              class="mx-2"
+              style="width: unset"
+              :options="mappingGeoshapes"
+              :value="selectedGeoshape || ''"
+              @change="$emit('on-select-geoshape', $event)"
+            >
+            </b-form-select>
+          </div>
+        </b-row>
       </b-col>
-      <b-col cols="6" class="text-right">
+      <b-col cols="3" class="text-right">
         <PerPageSelector
           :current-page-size="currentPageSize"
           :total-documents="totalDocuments"
@@ -22,15 +37,59 @@
     </b-row>
     <b-row class="align-self-stretch">
       <b-col cols="8" class="viewMap-document-map">
-        <l-map ref="map" @click="onMapClick" data-cy="mapView-map">
+        <l-map ref="map" data-cy="mapView-map">
           <l-tile-layer :url="url" :attribution="attribution" />
           <l-marker
             v-for="document in geoDocuments"
             :key="document.source._id"
             :lat-lng="document.coordinates"
             :icon="getIcon(document.source)"
-            @click="onMarkerClick(document.source)"
+            @click="
+              onItemClicked(document.source, document.coordinates, 'point')
+            "
+          />
+          <l-circle
+            v-for="shape of circleShapes"
+            :ref="`circle-${shape.source_id}`"
+            :key="shape.source_id"
+            :lat-lng="shape.content.coordinates"
+            :radius="getRadiusInMeter(shape.content.radius)"
+            :color="getShapeColor(shape.source._id)"
+            :className="`data-cy-shape data-cy-shape-${shape.source._id}`"
+            :class="getShapeCyClasse(shape)"
+            @click="
+              onItemClicked(
+                shape.source,
+                shape.content.coordinates,
+                'circle',
+                shape.content.radius
+              )
+            "
+          />
+          <l-polygon
+            v-for="shape of polygonShapes"
+            :ref="`polygon-${shape.source_id}`"
+            :key="shape.source_id"
+            :lat-lngs="shape.content.coordinates"
+            :color="getShapeColor(shape.source._id)"
+            :class="getShapeCyClasse(shape)"
+            :className="`data-cy-shape data-cy-shape-${shape.source._id}`"
+            @click="
+              onItemClicked(shape.source, shape.content.coordinates, 'array')
+            "
           />
+          <div v-for="shape of multiPolygonShapes" :key="shape.source_id">
+            <l-polygon
+              v-for="(polygon, index) in shape.content.coordinates"
+              :ref="`polygon-${shape.source_id}-${index}`"
+              :key="`${shape.source_id}-${index}`"
+              :lat-lngs="polygon"
+              :color="getShapeColor(shape.source._id)"
+              :class="getShapeCyClasse(shape)"
+              :className="`data-cy-shape data-cy-shape-${shape.source._id}`"
+              @click="onItemClicked(shape.source, polygon, 'array')"
+            />
+          </div>
         </l-map>
       </b-col>
       <b-col cols="4">
@@ -41,12 +100,12 @@
         >
           <b-card-header>
             <b-row align-v="center">
-              <b-col cols="9" align-v="center">
+              <b-col cols="8" align-v="center">
                 <span data-cy="mapView-current-document-id">{{
                   currentDocument._id
                 }}</span>
               </b-col>
-              <b-col cols="3">
+              <b-col cols="4" class="pr-1 text-right">
                 <b-button
                   class="DocumentMapItem-update"
                   href=""
@@ -78,6 +137,13 @@
                 >
                   <i class="fa fa-trash" :class="{ disabled: !canEdit }" />
                 </b-button>
+                <b-button
+                  class="ml-2"
+                  title="Close"
+                  @click.prevent="closeDocument"
+                >
+                  <i class="fa fa-times" />
+                </b-button>
               </b-col>
             </b-row>
           </b-card-header>
@@ -123,7 +189,7 @@
 </template>
 
 <script>
-import { LMap, LTileLayer, LMarker } from 'vue2-leaflet'
+import { LMap, LTileLayer, LMarker, LCircle, LPolygon } from 'vue2-leaflet'
 import L from 'leaflet'
 import '@/assets/leaflet.css'
 import JsonFormatter from '@/directives/json-formatter.directive'
@@ -137,6 +203,8 @@ export default {
     LMap,
     LTileLayer,
     LMarker,
+    LCircle,
+    LPolygon,
     PerPageSelector
   },
   directives: {
@@ -151,14 +219,26 @@ export default {
       type: String,
       required: true
     },
+    selectedGeoshape: {
+      type: String,
+      required: true
+    },
     mappingGeopoints: {
       type: Array,
       required: true
     },
+    mappingGeoshapes: {
+      type: Array,
+      required: true
+    },
     geoDocuments: {
       type: Array,
       required: true
     },
+    shapesDocuments: {
+      type: Array,
+      require: true
+    },
     index: String,
     collection: String
   },
@@ -218,7 +298,11 @@ export default {
     },
     ...mapGetters('auth', ['canEditDocument', 'canDeleteDocument']),
     coordinates() {
-      return this.geoDocuments.map(d => d.coordinates)
+      const coordinates = [
+        ...this.geoDocuments.map(d => d.coordinates),
+        ...this.getShapesCoordinates()
+      ]
+      return coordinates
     },
     canEdit() {
       if (!this.index || !this.collection) {
@@ -232,6 +316,14 @@ export default {
       }
       return this.canDeleteDocument(this.index, this.collection)
     },
+    formattedShapes() {
+      if (!this.currentDocument) {
+        return {}
+      }
+      const document = _.omit(this.currentDocument, ['_id', '_kuzzle_info'])
+      document._kuzzle_info = this.currentDocument._kuzzle_info
+      return document
+    },
     formattedDocument() {
       if (!this.currentDocument) {
         return {}
@@ -239,30 +331,126 @@ export default {
       const document = _.omit(this.currentDocument, ['_id', '_kuzzle_info'])
       document._kuzzle_info = this.currentDocument._kuzzle_info
       return document
+    },
+    circleShapes() {
+      return this.shapesDocuments.filter(
+        shape => shape.content.type === 'circle'
+      )
+    },
+    polygonShapes() {
+      return this.shapesDocuments.filter(
+        shape => shape.content.type === 'polygon'
+      )
+    },
+    multiPolygonShapes() {
+      return this.shapesDocuments.filter(
+        shape => shape.content.type === 'multipolygon'
+      )
     }
   },
   watch: {
     selectedGeopoint: {
-      handler() {
-        this.map.fitBounds(this.coordinates)
+      handler(value) {
+        if (value) {
+          this.map.fitBounds(this.coordinates, { maxZoom: 12 })
+        }
+      }
+    },
+    selectedGeoshape: {
+      handler(value) {
+        if (value) {
+          this.map.fitBounds(this.coordinates, { maxZoom: 12 })
+        }
       }
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.map = this.$refs.map.mapObject
-      this.map.fitBounds(this.coordinates)
+      if (L.latLngBounds(this.coordinates).isValid()) {
+        this.map.fitBounds(this.coordinates, { maxZoom: 12 })
+      }
     })
   },
   methods: {
-    onMarkerClick(document) {
+    getShapeCyClasse(shape) {
+      return this.currentDocument &&
+        this.currentDocument._id === shape.source._id
+        ? 'data-cy-shape-selected'
+        : ''
+    },
+    getShapeColor(id) {
+      return this.currentDocument && this.currentDocument._id === id
+        ? '#26AD23'
+        : '#2981CA'
+    },
+    getRadiusInMeter(radius) {
+      if (typeof radius === 'number') {
+        return radius
+      }
+      if (typeof radius !== 'string') {
+        return null
+      }
+      const value = parseInt(radius)
+      const unit = radius.replace(value.toString(), '')
+      let multiplicator = 1
+      switch (unit) {
+        case 'km':
+          multiplicator = 1000
+          break
+        default:
+          multiplicator = 1
+      }
+      return value * multiplicator
+    },
+    flattenShapes(arr) {
+      return arr.reduce((a, b) => {
+        return a.concat(
+          Array.isArray(b) && typeof b[0] !== 'number'
+            ? this.flattenShapes(b)
+            : [b]
+        )
+      }, [])
+    },
+    getShapesCoordinates() {
+      const circlePoints = this.circleShapes.map(
+        circle => circle.content.coordinates
+      )
+
+      const polygonArrays = this.polygonShapes.map(
+        polygon => polygon.content.coordinates
+      )
+
+      const multipolygonArrays = [
+        ...this.multiPolygonShapes.map(
+          multipolygon => multipolygon.content.coordinates
+        )
+      ]
+
+      const points = [
+        ...circlePoints,
+        ...this.flattenShapes(polygonArrays),
+        ...this.flattenShapes(multipolygonArrays)
+      ]
+      return points
+    },
+    onItemClicked(document, latlng, type, radius) {
       if (this.currentDocument === document) {
         this.currentDocument = null
-      } else {
-        this.currentDocument = document
+        return
+      }
+      this.currentDocument = document
+      if (type === 'array') {
+        this.map.fitBounds(latlng, { maxZoom: 14 })
+      } else if (type === 'point') {
+        this.map.setView(latlng, 14)
+      } else if (type === 'circle') {
+        const radiusInMeter = this.getRadiusInMeter(radius)
+        const bounds = L.latLng(latlng).toBounds(radiusInMeter * 2)
+        this.map.fitBounds(bounds, 14)
       }
     },
-    onMapClick() {
+    closeDocument() {
       this.currentDocument = null
     },
     getIcon(document) {
@@ -300,6 +488,7 @@ export default {
   }
   .json-formatter {
     max-height: 525px;
+    width: 100%;
     overflow-y: auto;
   }
 }
diff --git a/src/components/Data/Indexes/CreateIndexModal.vue b/src/components/Data/Indexes/CreateIndexModal.vue
index ece7f0cd4..e21ed5e68 100644
--- a/src/components/Data/Indexes/CreateIndexModal.vue
+++ b/src/components/Data/Indexes/CreateIndexModal.vue
@@ -4,67 +4,71 @@
     ref="createIndexModal"
     size="lg"
     title="Index creation"
+    body-class="p-0"
     :id="modalId"
     @hide="resetForm"
   >
     <template v-slot:modal-footer>
-      <b-button variant="secondary" @click="onCancel">
+      <b-button variant="secondary" @click="onCancel" :disabled="modalBusy">
         Cancel
       </b-button>
       <b-button
         data-cy="CreateIndexModal-createBtn"
         variant="primary"
+        :disabled="modalBusy"
         @click="tryCreateIndex"
       >
         OK
       </b-button>
     </template>
-    <b-form v-on:submit.prevent="tryCreateIndex">
-      <b-form-group
-        data-cy="CreateIndexModal-name"
-        label="Index name"
-        label-for="indexName"
-      >
-        <template v-slot:description
-          >The index name should contain only lowercase characters and no
-          spaces. It also must not contain de following characters:
-          <code>\</code>, <code>/</code>, <code>*</code>, <code>?</code>,
-          <code>"</code>, <code>&lt;</code>, <code>></code>, <code>|</code>,
-          <code>,</code>, <code>#</code>, <code>:</code>, <code>%</code>,
-          <code>&</code>, <code>.</code>
-        </template>
-        <template v-slot:invalid-feedback id="profile-id-feedback">
-          <span v-if="!$v.index.required">This field cannot be empty</span>
-          <span v-else-if="!$v.index.isNotWhitespace"
-            >This field cannot contain just whitespaces</span
-          >
-          <span v-else-if="!$v.index.startsWithLetter"
-            >This field cannot start with a whitespace</span
-          >
-          <span v-else-if="!$v.index.isLowercase"
-            >This field cannot contain uppercase letters</span
-          >
-          <span v-else-if="!$v.index.validChars"
-            >This field cannnot contain invalid chars</span
-          >
-        </template>
-        <b-form-input
-          id="indexName"
-          autofocus
-          required
-          type="text"
-          v-model="$v.index.$model"
-          :state="validateState('index')"
-        ></b-form-input>
-      </b-form-group>
-      <b-alert
-        data-cy="CreateIndexModal-alert"
-        style="overflow: auto"
-        :show="error.length"
-        variant="danger"
-        >{{ error }}</b-alert
-      >
-    </b-form>
+    <b-overlay :show="modalBusy" rounded="sm" class="p-3">
+      <b-form v-on:submit.prevent="tryCreateIndex">
+        <b-form-group
+          data-cy="CreateIndexModal-name"
+          label="Index name"
+          label-for="indexName"
+        >
+          <template v-slot:description
+            >The index name should contain only lowercase characters and no
+            spaces. It also must not contain de following characters:
+            <code>\</code>, <code>/</code>, <code>*</code>, <code>?</code>,
+            <code>"</code>, <code>&lt;</code>, <code>></code>, <code>|</code>,
+            <code>,</code>, <code>#</code>, <code>:</code>, <code>%</code>,
+            <code>&</code>, <code>.</code>
+          </template>
+          <template v-slot:invalid-feedback id="profile-id-feedback">
+            <span v-if="!$v.index.required">This field cannot be empty</span>
+            <span v-else-if="!$v.index.isNotWhitespace"
+              >This field cannot contain just whitespaces</span
+            >
+            <span v-else-if="!$v.index.startsWithLetter"
+              >This field cannot start with a whitespace</span
+            >
+            <span v-else-if="!$v.index.isLowercase"
+              >This field cannot contain uppercase letters</span
+            >
+            <span v-else-if="!$v.index.validChars"
+              >This field cannnot contain invalid chars</span
+            >
+          </template>
+          <b-form-input
+            id="indexName"
+            autofocus
+            required
+            type="text"
+            v-model="$v.index.$model"
+            :state="validateState('index')"
+          ></b-form-input>
+        </b-form-group>
+        <b-alert
+          data-cy="CreateIndexModal-alert"
+          style="overflow: auto"
+          :show="error.length"
+          variant="danger"
+          >{{ error }}</b-alert
+        >
+      </b-form>
+    </b-overlay>
   </b-modal>
 </template>
 
@@ -91,7 +95,8 @@ export default {
   data() {
     return {
       error: '',
-      index: ''
+      index: '',
+      modalBusy: false
     }
   },
   validations() {
@@ -114,6 +119,7 @@ export default {
       this.$v.$reset()
       this.index = ''
       this.error = ''
+      this.modalBusy = false
     },
     async onCreateSuccess() {
       this.resetForm()
@@ -125,6 +131,7 @@ export default {
       this.$bvModal.hide(this.modalId)
     },
     async tryCreateIndex() {
+      this.modalBusy = true
       this.$v.$touch()
       if (this.$v.$anyError) {
         return
@@ -135,6 +142,7 @@ export default {
         this.onCreateSuccess()
       } catch (err) {
         this.error = err.message
+        this.modalBusy = false
       }
     }
   }
diff --git a/src/components/Data/Indexes/DeleteIndexModal.vue b/src/components/Data/Indexes/DeleteIndexModal.vue
index a339532ed..e8b4ab1df 100644
--- a/src/components/Data/Indexes/DeleteIndexModal.vue
+++ b/src/components/Data/Indexes/DeleteIndexModal.vue
@@ -1,14 +1,8 @@
 <template>
-  <b-modal
-    class="DeleteIndexModal"
-    size="lg"
-    :id="modalId"
-    :ref="modalId"
-    @hide="resetForm"
-  >
+  <b-modal class="DeleteIndexModal" size="lg" :id="modalId" @hide="resetForm">
     <template v-slot:modal-title>
       Index
-      <strong>{{ truncateName(index.name) }}</strong> deletion
+      <strong>{{ truncateName(index ? index.name : '') }}</strong> deletion
     </template>
 
     <template v-slot:modal-footer>
@@ -31,6 +25,7 @@
         description="This operation is NOT reversible"
       >
         <b-form-input
+          autofocus
           data-cy="DeleteIndexModal-name"
           id="inputConfirmation"
           v-model="confirmation"
@@ -66,7 +61,7 @@ export default {
   },
   computed: {
     isConfirmationValid() {
-      return this.confirmation === this.index.name
+      return this.index && this.confirmation === this.index.name
     }
   },
   methods: {
@@ -75,14 +70,11 @@ export default {
       this.confirmation = ''
       this.error = ''
     },
-    onDeleteSuccess() {
-      this.resetForm()
-      this.$bvModal.hide(this.modalId)
-      this.$emit('delete-successful')
+    setError(error) {
+      this.error = error
     },
     onCancel() {
       this.resetForm()
-      this.$bvModal.hide(this.modalId)
       this.$emit('cancel')
     },
 
@@ -90,13 +82,7 @@ export default {
       if (!this.isConfirmationValid) {
         return
       }
-
-      try {
-        await this.$store.direct.dispatch.index.deleteIndex(this.index)
-        this.onDeleteSuccess()
-      } catch (err) {
-        this.error = err.message
-      }
+      this.$emit('confirm-deletion')
     }
   }
 }
diff --git a/src/components/Data/Indexes/DropdownActions.vue b/src/components/Data/Indexes/DropdownActions.vue
new file mode 100644
index 000000000..3142e7df1
--- /dev/null
+++ b/src/components/Data/Indexes/DropdownActions.vue
@@ -0,0 +1,69 @@
+<template>
+  <span>
+    <b-dropdown
+      v-if="backendMajorVersion !== 1"
+      data-cy="IndexDropdownAction"
+      no-caret
+      toggle-class="indexDropdown"
+      variant="light"
+      :id="`index-${indexName}`"
+    >
+      <template v-slot:button-content>
+        <i class="fas fa-ellipsis-v" />
+      </template>
+
+      <b-dropdown-group header="Actions">
+        <b-dropdown-item
+          data-cy="IndexDropdown-delete"
+          :disabled="!canDeleteIndex(indexName)"
+          :title="
+            !canDeleteIndex(indexName)
+              ? 'Your rights do not allow you to delete this index'
+              : ''
+          "
+          v-if="backendMajorVersion !== 1"
+          @click="onDeleteIndexClicked"
+        >
+          Delete index
+        </b-dropdown-item>
+      </b-dropdown-group>
+    </b-dropdown>
+  </span>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'IndexDropdownAction',
+  props: {
+    indexName: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('auth', ['canDeleteIndex']),
+    backendMajorVersion() {
+      return this.$store.direct.getters.kuzzle.currentEnvironment
+        .backendMajorVersion
+    }
+  },
+  methods: {
+    onDeleteIndexClicked() {
+      this.$emit('delete-index-clicked')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .indexDropdown {
+  background-color: $light-grey-color;
+  border: none;
+}
+
+::v-deep .show .indexDropdown i {
+  transform: rotate(90deg);
+}
+</style>
diff --git a/src/components/Data/Indexes/Page.vue b/src/components/Data/Indexes/Page.vue
index f0cf0caea..e97271416 100644
--- a/src/components/Data/Indexes/Page.vue
+++ b/src/components/Data/Indexes/Page.vue
@@ -60,11 +60,12 @@
                   <b-input-group-text>Filter</b-input-group-text>
                 </template>
 
-                <auto-focus-input
-                  name="index"
+                <b-form-input
+                  autofocus
+                  debounce="300"
                   v-model="filter"
                   :disabled="indexes.length === 0"
-                  @submit="navigateToIndex"
+                  @keyup.enter="navigateToIndex"
                 />
               </b-input-group>
             </b-col>
@@ -164,9 +165,11 @@
       @create-successful="onCreateModalSuccess"
     />
     <DeleteIndexModal
+      ref="deleteIndexModal"
       :index="indexToDelete"
       :modalId="deleteIndexModalId"
-      @delete-successful="onDeleteModalSuccess"
+      @confirm-deletion="onConfirmDeleteModal"
+      @cancel="onCancelDeleteModal"
     />
     <BulkDeleteIndexesModal
       :indexes="selectedIndexes"
@@ -182,7 +185,6 @@ import CreateIndexModal from './CreateIndexModal'
 import DeleteIndexModal from './DeleteIndexModal'
 import BulkDeleteIndexesModal from './BulkDeleteIndexesModal'
 import ListNotAllowed from '../../Common/ListNotAllowed'
-import AutoFocusInput from '../../Common/AutoFocusInput'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -192,8 +194,7 @@ export default {
     CreateIndexModal,
     DeleteIndexModal,
     BulkDeleteIndexesModal,
-    ListNotAllowed,
-    AutoFocusInput
+    ListNotAllowed
   },
   data() {
     return {
@@ -262,6 +263,20 @@ export default {
     openBulkDeleteModal() {
       this.$bvModal.show(this.bulkDeleteIndexesModalId)
     },
+    async onCancelDeleteModal() {
+      this.$refs.deleteIndexModal.resetForm()
+      this.$bvModal.hide(this.deleteIndexModalId)
+      await this.refreshIndexes()
+    },
+    async onConfirmDeleteModal() {
+      try {
+        await this.$store.direct.dispatch.index.deleteIndex(this.indexToDelete)
+        this.$bvModal.hide(this.deleteIndexModalId)
+        await this.refreshIndexes()
+      } catch (err) {
+        this.$refs.deleteIndexModal.setError(err.message)
+      }
+    },
     async onDeleteModalSuccess() {
       await this.refreshIndexes()
     },
diff --git a/src/components/Data/Layout.vue b/src/components/Data/Layout.vue
index d7de466fd..0324d69ff 100644
--- a/src/components/Data/Layout.vue
+++ b/src/components/Data/Layout.vue
@@ -1,6 +1,14 @@
 <template>
-  <Multipane class="DataLayout Custom-resizer" layout="vertical">
-    <div class="DataLayout-sidebarWrapper" data-cy="DataLayout-sidebarWrapper">
+  <Multipane
+    class="DataLayout Custom-resizer"
+    layout="vertical"
+    @paneResizeStop="saveNewPaneSize($event)"
+  >
+    <div
+      class="DataLayout-sidebarWrapper"
+      :style="{ width: this.paneSize }"
+      data-cy="DataLayout-sidebarWrapper"
+    >
       <treeview
         :indexName="$route.params.indexName"
         :collectionName="$route.params.collectionName"
@@ -8,28 +16,31 @@
     </div>
     <MultipaneResizer data-cy="sidebarResizer" />
     <div class="DataLayout-contentWrapper">
-      <template v-if="loading">
-        <main-spinner></main-spinner>
-      </template>
-      <template v-else>
-        <data-not-found v-if="dataNotFound" class="mt-3"></data-not-found>
-        <router-view v-else />
-      </template>
+      <b-overlay :show="loading || viewIsFetching" opacity="0" class="h-100">
+        <data-not-found
+          v-if="!loading && dataNotFound"
+          class="mt-3"
+        ></data-not-found>
+        <router-view
+          v-if="!loading"
+          @start-fetch="viewIsFetching = true"
+          @end-fetch="viewIsFetching = false"
+        />
+      </b-overlay>
     </div>
   </Multipane>
 </template>
 
 <script>
-import MainSpinner from '../Common/MainSpinner'
 import { Multipane, MultipaneResizer } from 'vue-multipane'
 import Treeview from '@/components/Data/Leftnav/Treeview'
 import DataNotFound from './Data404'
 import { mapGetters } from 'vuex'
+import { setPersistedItem, getPersistedItem } from './itemsStorage'
 
 export default {
   name: 'DataLayout',
   components: {
-    MainSpinner,
     Treeview,
     Multipane,
     MultipaneResizer,
@@ -38,7 +49,9 @@ export default {
   data() {
     return {
       isFetching: true,
-      dataNotFound: false
+      dataNotFound: false,
+      viewIsFetching: false,
+      paneSize: ''
     }
   },
   computed: {
@@ -67,6 +80,10 @@ export default {
     }
   },
   methods: {
+    saveNewPaneSize(size) {
+      setPersistedItem('paneSize', size.scrollWidth)
+      this.paneSize = `${getPersistedItem('paneSize')}px`
+    },
     async fetchIndexList() {
       try {
         await this.$store.direct.dispatch.index.fetchIndexList()
@@ -185,9 +202,15 @@ export default {
   },
   async mounted() {
     await this.lazyLoadingSequence()
+    this.paneSize = `${getPersistedItem('paneSize')}px`
   },
   watch: {
-    $route: {
+    '$route.params.indexName': {
+      handler() {
+        this.lazyLoadingSequence()
+      }
+    },
+    '$route.params.collectionName': {
       handler() {
         this.lazyLoadingSequence()
       }
@@ -207,7 +230,6 @@ export default {
 .DataLayout-sidebarWrapper {
   background-color: $light-grey-color;
   min-width: $sidebar-width;
-  width: $sidebar-width;
   height: 100%;
   overflow: auto;
   z-index: 1;
diff --git a/src/components/Data/itemsStorage.ts b/src/components/Data/itemsStorage.ts
new file mode 100644
index 000000000..625cffb3e
--- /dev/null
+++ b/src/components/Data/itemsStorage.ts
@@ -0,0 +1,7 @@
+export function getPersistedItem(item: string) {
+  return localStorage.getItem(item)
+}
+
+export function setPersistedItem(item: string, value: string) {
+  localStorage.setItem(item, value)
+}
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 8163d9bbc..472310244 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -12,20 +12,30 @@
       <main-spinner v-if="authInitializing"></main-spinner>
       <router-view v-else />
     </div>
-    <b-alert
-      class="rounded-0 text-center mb-0 "
-      dismissible
-      fade
-      style="z-index: 2000;"
+    <b-toast
       variant="info"
-      data-cy="noAdminAlert"
-      :show="!$store.direct.getters.auth.adminAlreadyExists"
+      no-auto-hide
+      toaster="b-toaster-bottom-right"
+      title="Warning!"
+      data-cy="noAdminWarning"
+      id="no-admin-warning"
     >
-      <i class="fa fa-exclamation-triangle mr-2" aria-hidden="true"></i>
-      <b>Warning!</b> Your Kuzzle has no administrator user. It is strongly
-      recommended <a href="#/signup" class="alert-link"> that you create one.</a
-      ><i class="fa fa-exclamation-triangle ml-2" aria-hidden="true"></i>
-    </b-alert>
+      <p>
+        Your Kuzzle has no administrator user. It is strongly recommended
+        <a href="#/signup" class="alert-link"> that you create one.</a>
+      </p>
+      <div class="text-center">
+        <b-button
+          title="Don't show this toast again for the current environment"
+          variant="primary"
+          size="sm"
+          id="noAdminGotIt"
+          @click="hideNoAdminWarning"
+        >
+          Ok, got it
+        </b-button>
+      </div>
+    </b-toast>
 
     <b-modal
       id="tokenExpired"
@@ -69,10 +79,29 @@ export default {
     }
   },
   methods: {
+    hideNoAdminWarning() {
+      this.$store.direct.dispatch.kuzzle.updateEnvironment({
+        id: this.$store.direct.state.kuzzle.currentId,
+        environment: {
+          ...this.currentEnvironment,
+          hideAdminWarning: true
+        }
+      })
+      this.$bvToast.hide('no-admin-warning')
+    },
     onTokenExpired() {
       this.$store.direct.dispatch.auth.setSession(null)
     },
-    noop() {}
+    noop() {},
+    displayNoAdminWarning() {
+      if (this.$store.direct.getters.auth.adminAlreadyExists) {
+        return
+      }
+      if (this.currentEnvironment.hideAdminWarning) {
+        return
+      }
+      this.$bvToast.show('no-admin-warning')
+    }
   },
   mounted() {
     this.$kuzzle.on('tokenExpired', () => this.onTokenExpired())
@@ -95,6 +124,7 @@ export default {
         }
       }
     })
+    this.displayNoAdminWarning()
   },
   beforeDestroy() {
     this.$kuzzle.removeListener('tokenExpired')
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 4cb095898..f246b4c6c 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -14,12 +14,16 @@
             <b-alert
               class="text-center"
               variant="info"
-              data-cy="noAdminAlert"
-              :show="!$store.direct.getters.auth.adminAlreadyExists"
+              data-cy="noAdminWarning"
+              :show="displayNoAdminWarning"
             >
               <b>Warning!</b> Your Kuzzle has no administrator user. It is
               strongly recommended
-              <a class="alert-link" data-cy="NoAdminAlert-link" href="#/signup">
+              <a
+                class="alert-link"
+                data-cy="NoAdminWarning-link"
+                href="#/signup"
+              >
                 that you create one.</a
               >
             </b-alert>
@@ -45,6 +49,7 @@
 <script>
 import LoginForm from './Common/Login/Form'
 import EnvironmentSwitch from './Common/Environments/EnvironmentsSwitch'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'Login',
@@ -57,6 +62,12 @@ export default {
       environmentId: null
     }
   },
+  computed: {
+    ...mapGetters('kuzzle', ['currentEnvironment']),
+    displayNoAdminWarning() {
+      return !this.$store.direct.getters.auth.adminAlreadyExists
+    }
+  },
   methods: {
     onLogin() {
       // Set the body overflow to visible because the login modal set it to 'hidden'.
diff --git a/src/main.ts b/src/main.ts
index c5aa4c63b..dc9fe8fe4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import VueFormGenerator from 'vue-form-generator'
 import 'vue-form-generator/dist/vfg.css'
 import JsonFormInput from '@/components/Data/Documents/FormInputs/JsonFormInput.vue'
 import DateTimeFormInput from '@/components/Data/Documents/FormInputs/DateTimeFormInput.vue'
+import 'leaflet/dist/leaflet.css'
 
 import App from './App.vue'
 import store from './vuex/store'
diff --git a/src/services/kuzzleWrapper-v1.ts b/src/services/kuzzleWrapper-v1.ts
index 145645b70..ab8961ca7 100644
--- a/src/services/kuzzleWrapper-v1.ts
+++ b/src/services/kuzzleWrapper-v1.ts
@@ -261,91 +261,73 @@ export class KuzzleWrapperV1 {
           return
         }
 
-        // TODO Convert this into a big switch/case
-        if (filter.operator === 'contains') {
-          if (mappingAttrs[filter.attribute].type === 'text') {
-            formattedFilter.bool.must.push({
-              match_phrase_prefix: { [filter.attribute]: filter.value }
-            })
-          }
-          if (mappingAttrs[filter.attribute].type === 'keyword') {
-            formattedFilter.bool.must.push({
-              regexp: {
-                [filter.attribute]:
-                  '.*' + buildCaseInsensitiveRegexp(filter.value) + '.*'
-              }
-            })
-          }
-        } else if (filter.operator === 'not_contains') {
-          if (mappingAttrs[filter.attribute].type === 'text') {
-            formattedFilter.bool.must_not.push({
-              match_phrase_prefix: { [filter.attribute]: filter.value }
-            })
-          }
-          if (mappingAttrs[filter.attribute].type === 'keyword') {
-            formattedFilter.bool.must_not.push({
-              regexp: {
-                [filter.attribute]:
-                  '.*' + buildCaseInsensitiveRegexp(filter.value) + '.*'
+        const mustOperators = ['contains', 'equal', 'range', 'exists']
+        const mustNotOperators = ['not_contains', 'not_equal', 'not_exists']
+
+        let verb: any = null
+        if (mustOperators.includes(filter.operator)) {
+          verb = 'must'
+        } else if (mustNotOperators.includes(filter.operator)) {
+          verb = 'must_not'
+        }
+
+        let filterToAdd: any = null
+        switch (filter.operator) {
+          case 'contains':
+          case 'not_contains':
+            if (filter.attribute === '_id') {
+              filterToAdd = {
+                match: { [filter.attribute]: filter.value }
               }
-            })
-          }
-        } else if (filter.operator === 'equal') {
-          formattedFilter.bool.must.push({
-            range: {
-              [filter.attribute]: {
-                gte: filter.value,
-                lte: filter.value
+            } else if (mappingAttrs[filter.attribute].type === 'text') {
+              filterToAdd = {
+                match_phrase_prefix: { [filter.attribute]: filter.value }
               }
-            }
-          })
-        } else if (filter.operator === 'not_equal') {
-          formattedFilter.bool.must_not.push({
-            range: {
-              [filter.attribute]: {
-                gte: filter.value,
-                lte: filter.value
+            } else if (mappingAttrs[filter.attribute].type === 'keyword') {
+              filterToAdd = {
+                regexp: {
+                  [filter.attribute]:
+                    '.*' + buildCaseInsensitiveRegexp(filter.value) + '.*'
+                }
               }
             }
-          })
-        } else if (filter.operator === 'range') {
-          const range = { range: {} }
-          if (filter.gt_value && filter.lt_value) {
-            range.range = {
-              [filter.attribute]: {
-                gt: filter.gt_value,
-                lt: filter.lt_value
+            break
+          case 'equal':
+          case 'not_equal':
+            filterToAdd = {
+              range: {
+                [filter.attribute]: {
+                  gte: filter.value,
+                  lte: filter.value
+                }
               }
             }
-          } else if (filter.gt_value && !filter.lt_value) {
-            range.range = {
-              [filter.attribute]: {
-                gt: filter.gt_value
+            break
+          case 'exists':
+          case 'not_exists':
+            filterToAdd = {
+              exists: {
+                field: filter.attribute
               }
             }
-          } else {
-            range.range = {
-              [filter.attribute]: {
-                lt: filter.lt_value
+            break
+          case 'range':
+            filterToAdd = {
+              range: {
+                [filter.attribute]: {
+                  gt: filter.gt_value ? filter.gt_value : null,
+                  lt: filter.lt_value ? filter.lt_value : null
+                }
               }
             }
-          }
-          formattedFilter.bool.must.push(range)
-        } else if (filter.operator === 'exists') {
-          const exists = {
-            exists: {
-              field: filter.attribute
-            }
-          }
-          formattedFilter.bool.must.push(exists)
-        } else if (filter.operator === 'not_exists') {
-          const exists = {
-            exists: {
-              field: filter.attribute
-            }
-          }
-          formattedFilter.bool.must_not.push(exists)
+            break
+          default:
+            filterToAdd = null
+        }
+        if (!verb || !filterToAdd) {
+          return
         }
+        formattedFilter.bool[verb].push(filterToAdd)
       })
 
       return formattedFilter
diff --git a/src/utils.ts b/src/utils.ts
index 9713e7cd8..73a325339 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -61,5 +61,5 @@ module.exports = {
     }),
   antiGlitchOverlayTimeout: 900,
   LS_ENVIRONMENTS: 'environments',
-  LS_CURRENT_ENV: 'currentEnvironment'
+  SS_CURRENT_ENV: 'currentEnv'
 }
diff --git a/src/vuex/modules/kuzzle/store.ts b/src/vuex/modules/kuzzle/store.ts
index 61881e708..f73e64825 100644
--- a/src/vuex/modules/kuzzle/store.ts
+++ b/src/vuex/modules/kuzzle/store.ts
@@ -5,7 +5,7 @@ import { moduleActionContext } from '@/vuex/store'
 import { getters } from './getters'
 
 export const LS_ENVIRONMENTS = 'environments'
-export const LS_CURRENT_ENV = 'currentEnv'
+export const SS_CURRENT_ENV = 'currentEnv'
 export const state: KuzzleState = {
   environments: {},
   currentId: undefined,
@@ -13,6 +13,7 @@ export const state: KuzzleState = {
   online: false,
   errorFromKuzzle: undefined
 }
+export const NO_ADMIN_WARNING_HOSTS = ['localhost', '127.0.0.1']
 
 export const DEFAULT_COLOR = 'darkblue'
 
@@ -85,7 +86,7 @@ const actions = createActions({
   setCurrentEnvironment(context, payload) {
     const { commit } = kuzzleActionContext(context)
 
-    localStorage.setItem(LS_CURRENT_ENV, payload)
+    sessionStorage.setItem(SS_CURRENT_ENV, payload)
     commit.setCurrentEnvironment(payload)
   },
   createEnvironment(context, payload) {
@@ -108,7 +109,7 @@ const actions = createActions({
 
     if (state.currentId === id) {
       dispatch.setCurrentEnvironment(null)
-      localStorage.removeItem(LS_CURRENT_ENV)
+      sessionStorage.removeItem(SS_CURRENT_ENV)
     }
 
     localStorage.setItem(LS_ENVIRONMENTS, JSON.stringify(state.environments))
@@ -202,13 +203,17 @@ const actions = createActions({
 
     loadedEnv = JSON.parse(localStorage.getItem(LS_ENVIRONMENTS) || '{}')
     Object.keys(loadedEnv).forEach(envName => {
+      const env = loadedEnv[envName]
+      if (env.hideAdminWarning === undefined) {
+        env.hideAdminWarning = NO_ADMIN_WARNING_HOSTS.includes(env.host)
+      }
       commit.createEnvironment({
-        environment: loadedEnv[envName],
+        environment: env,
         id: envName
       })
     })
 
-    currentId = localStorage.getItem(LS_CURRENT_ENV)
+    currentId = sessionStorage.getItem(SS_CURRENT_ENV)
     commit.setCurrentEnvironment(currentId)
   }
 })
diff --git a/test/e2e/cypress/integration/multi-backend/switch.spec.js b/test/e2e/cypress/integration/multi-backend/switch.spec.js
index 1e5f3ea2c..8a97a0d94 100644
--- a/test/e2e/cypress/integration/multi-backend/switch.spec.js
+++ b/test/e2e/cypress/integration/multi-backend/switch.spec.js
@@ -45,7 +45,7 @@ describe('Switch between two backends', () => {
         }
       })
     )
-    localStorage.setItem('currentEnv', backends[0].name)
+    sessionStorage.setItem('currentEnv', backends[0].name)
 
     cy.visit('/')
     cy.wait(5000)
diff --git a/test/e2e/cypress/integration/single-backend/docs.spec.js b/test/e2e/cypress/integration/single-backend/docs.spec.js
index 8cf38fb0b..d095bdb08 100644
--- a/test/e2e/cypress/integration/single-backend/docs.spec.js
+++ b/test/e2e/cypress/integration/single-backend/docs.spec.js
@@ -99,7 +99,6 @@ describe('Document List', function() {
     cy.get('[data-cy=Treeview-item--anothercollection]').click()
     cy.get(`[data-cy=Treeview-item--${collectionName}]`).click()
 
-
     cy.url().should('contain', 'listViewType=column')
     cy.get('[data-cy="DocumentList-Column"]')
 
@@ -242,7 +241,7 @@ describe('Document List', function() {
     cy.get('.col > .TimeSeriesValueSelector > .row > .col > .far').click()
   })
 
-  it('Should handle the map view properly', function() {
+  it('Should handle the map view properly for markers', function() {
     cy.request('PUT', `${kuzzleUrl}/${indexName}/mapcollectiontest`, {
       properties: {
         location: {
@@ -315,6 +314,154 @@ describe('Document List', function() {
     )
     cy.get('.leaflet-marker-pane .mapView-marker-selected').should('exist')
   })
+
+  it('Should handle the map view properly for shapes', function() {
+    cy.request('PUT', `${kuzzleUrl}/${indexName}/mapcollectiontest`, {
+      properties: {
+        location: {
+          type: 'geo_point'
+        },
+        shapeLocation: {
+          type: 'geo_shape',
+          strategy: 'recursive'
+        }
+      }
+    })
+    cy.request(
+      'POST',
+      `${kuzzleUrl}/${indexName}/mapcollectiontest/mapViewTestDoc1/_create?refresh=wait_for`,
+      {
+        location: {
+          lat: 43.64326358211144,
+          lon: 3.831031442987847
+        }
+      }
+    )
+    cy.request(
+      'POST',
+      `${kuzzleUrl}/${indexName}/mapcollectiontest/mapViewTestDoc2/_create?refresh=wait_for`,
+      {
+        location: {
+          lat: 43.664501944601604,
+          lon: 3.871200201519735
+        }
+      }
+    )
+    cy.request(
+      'POST',
+      `${kuzzleUrl}/${indexName}/mapcollectiontest/mapViewTestDoc3/_create?refresh=wait_for`,
+      {
+        location: {
+          lat: 43.67120723541598,
+          lon: 3.9499927663322842
+        }
+      }
+    )
+
+    cy.request(
+      'POST',
+      `${kuzzleUrl}/${indexName}/mapcollectiontest/mapViewTestDoc4/_create?refresh=wait_for`,
+      {
+        shapeLocation: {
+          type: 'circle',
+          coordinates: [43.730096133858524, 3.915556507504015],
+          radius: '1000m'
+        }
+      }
+    )
+
+    cy.request(
+      'POST',
+      `${kuzzleUrl}/${indexName}/mapcollectiontest/mapViewTestDoc5/_create?refresh=wait_for`,
+      {
+        shapeLocation: {
+          type: 'polygon',
+          coordinates: [
+            [
+              [43.60032923480691, 3.8878084393198136],
+              [43.60356125105433, 3.9083219719888764],
+              [43.59091188995088, 3.9090086174338654],
+              [43.59144029485811, 3.8783241491108957],
+              [43.60032923480691, 3.8878084393198136]
+            ]
+          ]
+        }
+      }
+    )
+
+    cy.request(
+      'POST',
+      `${kuzzleUrl}/${indexName}/mapcollectiontest/mapViewTestDoc6/_create?refresh=wait_for`,
+      {
+        shapeLocation: {
+          type: 'multipolygon',
+          coordinates: [
+            [
+              [
+                [43.66015088601359, 3.839142054763717],
+                [43.65959203746721, 3.8704273378510523],
+                [43.64465643574373, 3.8730880889503876],
+                [43.64596073192335, 3.8281128123035724],
+                [43.66015088601359, 3.839142054763717]
+              ]
+            ],
+            [
+              [
+                [43.71901833733811, 3.92913852182612],
+                [43.715266485411206, 3.985942880878295],
+                [43.69020926282012, 3.9893217296479504],
+                [43.69517426144837, 3.9269220225309236],
+                [43.71901833733811, 3.92913852182612]
+              ],
+              [
+                [43.70829406483838, 3.9422358371159754],
+                [43.70656068186119, 3.965451798017157],
+                [43.69706558137606, 3.966759739476379],
+                [43.70080864286678, 3.943652773696799],
+                [43.70829406483838, 3.9422358371159754]
+              ]
+            ]
+          ]
+        }
+      }
+    )
+
+    cy.waitOverlay()
+
+    cy.visit(`/#/data/${indexName}/mapcollectiontest`)
+    cy.wait(500)
+    cy.contains('mapcollectiontest')
+
+    cy.get('[data-cy="CollectionDropdownView"').click()
+    cy.wait(500)
+    cy.get('[data-cy="CollectionDropdown-map"]').click()
+    cy.url().should('contain', 'listViewType=map')
+
+    cy.get('[data-cy="mapView-map"').should('exist')
+
+    // markers well displayed
+    cy.get('.leaflet-marker-pane .mapView-marker-default').should(
+      'have.length',
+      3
+    )
+
+    // shapes well displayed
+    cy.get('.data-cy-shape').should('have.length', 4)
+    cy.get('.data-cy-shape-selected').should('not.exist')
+
+    // document card ok
+    cy.get('[data-cy="mapView-no-document-card"').should('exist')
+    cy.get('[data-cy="mapView-current-document-card"').should('not.exist')
+
+    cy.get('.data-cy-shape-mapViewTestDoc4').click({
+      force: true
+    })
+
+    cy.get('[data-cy="mapView-no-document-card"').should('not.exist')
+    cy.get('[data-cy="mapView-current-document-card"').should('exist')
+    cy.get('[data-cy="mapView-current-document-id"').contains('mapViewTestDoc4')
+    cy.get('.data-cy-shape-selected').should('exist')
+  })
 })
 
 describe('Document update/replace', () => {
diff --git a/test/e2e/cypress/integration/single-backend/environments.spec.js b/test/e2e/cypress/integration/single-backend/environments.spec.js
index df5672fbf..0e8938474 100644
--- a/test/e2e/cypress/integration/single-backend/environments.spec.js
+++ b/test/e2e/cypress/integration/single-backend/environments.spec.js
@@ -38,7 +38,8 @@ describe('Environments', function() {
           ssl: false,
           port: 7512,
           backendMajorVersion: backendVersion,
-          token: null
+          token: null,
+          hideAdminWarning: true
         }
       })
     )
@@ -114,7 +115,8 @@ describe('Environments', function() {
           ssl: false,
           port: 7512,
           backendMajorVersion: backendVersion || 2,
-          token: null
+          token: null,
+          hideAdminWarning: true
         },
         [envNames[1]]: {
           name: envNames[1],
@@ -123,11 +125,12 @@ describe('Environments', function() {
           ssl: false,
           port: 7512,
           backendMajorVersion: backendVersion || 2,
-          token: null
+          token: null,
+          hideAdminWarning: true
         }
       })
     )
-    localStorage.setItem('currentEnv', envNames[0])
+    sessionStorage.setItem('currentEnv', envNames[0])
     cy.visit('/')
     cy.contains('Connected to')
     cy.get('[data-cy="EnvironmentSwitch"]').click()
@@ -177,7 +180,7 @@ describe('Environments', function() {
       force: true
     })
     cy.wait(1000)
-    localStorage.setItem('currentEnv', envName)
+    sessionStorage.setItem('currentEnv', envName)
     cy.visit('/')
     cy.get('[data-cy="LoginAsAnonymous-Btn"]').click()
 
@@ -199,11 +202,12 @@ describe('Environments', function() {
           ssl: false,
           port: 7512,
           backendMajorVersion: backendVersion,
-          token: null
+          token: null,
+          hideAdminWarning: true
         }
       })
     )
-    localStorage.setItem('currentEnv', reachableEnvName)
+    sessionStorage.setItem('currentEnv', reachableEnvName)
 
     cy.visit('/')
     cy.contains('Connected to')
@@ -261,11 +265,12 @@ describe('Environments', function() {
           ssl: false,
           port: ports[0],
           backendMajorVersion: backendVersion,
-          token: null
+          token: null,
+          hideAdminWarning: true
         }
       })
     )
-    localStorage.setItem('currentEnv', envNames[0])
+    sessionStorage.setItem('currentEnv', envNames[0])
     cy.visit('/')
     cy.contains('Connected to')
 
@@ -314,7 +319,8 @@ describe('Environments', function() {
           host: 'localhost',
           ssl: false,
           port: 7512,
-          token: null
+          token: null,
+          hideAdminWarning: true
           // missing backendMajorVersion
         }
       })
@@ -329,7 +335,7 @@ describe('Environments', function() {
     })
   })
 
-  it('Should display a spinner when connecting to an unavailable backend and connect automatically whe the backend is up', () => {
+  it.only('Should display a spinner when connecting to an unavailable backend and connect automatically whe the backend is up', () => {
     cy.initLocalEnv(backendVersion)
     cy.task('doco', { version: backendVersion, docoArgs: ['down'] })
     cy.wait(5000)
@@ -386,11 +392,12 @@ describe('Environments', function() {
           color: 'darkblue',
           host: 'localhost',
           ssl: false,
-          port: 7512
+          port: 7512,
+          hideAdminWarning: true
         }
       })
     )
-    localStorage.setItem('currentEnv', envName)
+    sessionStorage.setItem('currentEnv', envName)
     cy.visit('/')
     cy.contains('Edit a Connection')
     cy.contains('You must select a backend version')
@@ -399,7 +406,7 @@ describe('Environments', function() {
       `v${backendVersion}.x`
     )
     cy.get('[data-cy=Environment-SubmitButton]').click()
-
+    cy.wait(5000)
     cy.url().should('contain', 'login')
   })
 
@@ -429,7 +436,7 @@ describe('Environments', function() {
       force: true
     })
     cy.wait(1000)
-    localStorage.setItem('currentEnv', 'localEnvTestTabTitle')
+    sessionStorage.setItem('currentEnv', 'localEnvTestTabTitle')
     cy.visit('/')
     cy.get('[data-cy="LoginAsAnonymous-Btn"]').click()
 
@@ -447,7 +454,8 @@ describe('Environments', function() {
           ssl: false,
           port: 7512,
           backendMajorVersion: backendVersion,
-          token: null
+          token: null,
+          hideAdminWarning: true
         }
       })
     )
@@ -495,14 +503,13 @@ describe('Import and export environments', function() {
     cy.get('[data-cy="CreateEnvironment-import"]').click()
     cy.contains('Import Connection')
 
-    cy.get('[data-cy="EnvironmentImport-fileInput"]')
-      .attachFile(
-        {
-          filePath: 'environment.json',
-          mimeType: 'application/json'
-        },
-        { subjectType: 'input', force: true }
-      )
+    cy.get('[data-cy="EnvironmentImport-fileInput"]').attachFile(
+      {
+        filePath: 'environment.json',
+        mimeType: 'application/json'
+      },
+      { subjectType: 'input', force: true }
+    )
     cy.get('[data-cy=EnvironmentImport-ok]')
       .should('exist')
       .should('contain', 'Found 2 connections')
@@ -522,14 +529,13 @@ describe('Import and export environments', function() {
     cy.get('[data-cy="CreateEnvironment-import"]').click()
     cy.contains('Import Connection')
 
-    cy.get('[data-cy="EnvironmentImport-fileInput"]')
-      .attachFile(
-        {
-          filePath: 'image.jpg',
-          mimeType: 'image/jpeg'
-        },
-        { subjectType: 'input', force: true }
-      )
+    cy.get('[data-cy="EnvironmentImport-fileInput"]').attachFile(
+      {
+        filePath: 'image.jpg',
+        mimeType: 'image/jpeg'
+      },
+      { subjectType: 'input', force: true }
+    )
     cy.get('[data-cy=EnvironmentImport-err]')
       .should('exist')
       .should('contain', 'Uploaded file type (image/jpeg) is not supported.')
@@ -598,7 +604,7 @@ describe('Import and export environments', function() {
       )
       .should(
         'equal',
-        `{"${newEnvName}":{"name":"${newEnvName}","color":"darkblue","host":"localhost","port":7512,"ssl":false,"backendMajorVersion":${backendVersion}},"${secondEnvName}":{"name":"${secondEnvName}","color":"darkblue","host":"localhost","port":7512,"ssl":false,"backendMajorVersion":${backendVersion}}}`
+        `{"${newEnvName}":{"name":"${newEnvName}","color":"darkblue","host":"localhost","port":7512,"ssl":false,"backendMajorVersion":${backendVersion},"hideAdminWarning":true},"${secondEnvName}":{"name":"${secondEnvName}","color":"darkblue","host":"localhost","port":7512,"ssl":false,"backendMajorVersion":${backendVersion},"hideAdminWarning":true}}`
       )
   })
 })
diff --git a/test/e2e/cypress/integration/single-backend/indexes.spec.js b/test/e2e/cypress/integration/single-backend/indexes.spec.js
index 2fd9a4f6e..9bf37f362 100644
--- a/test/e2e/cypress/integration/single-backend/indexes.spec.js
+++ b/test/e2e/cypress/integration/single-backend/indexes.spec.js
@@ -113,17 +113,4 @@ describe('Indexes', () => {
     cy.get('.IndexesPage').should('not.contain', `${indexName}1`)
     cy.get('.IndexesPage').should('not.contain', `${indexName}2`)
   })
-
-  it('Should be able to autofocus index search', () => {
-    cy.request('POST', 'http://localhost:7512/nyc-open-data/_create')
-    cy.request('POST', 'http://localhost:7512/iot-data/_create')
-
-    cy.waitOverlay()
-
-    cy.get('body').type('n{enter}')
-
-    cy.url().should('contain', 'nyc-open-data')
-    cy.contains('nyc-open-data')
-    cy.contains('This index has no collections.')
-  })
 })
diff --git a/test/e2e/cypress/integration/single-backend/login.spec.js b/test/e2e/cypress/integration/single-backend/login.spec.js
index 7dc994249..f701e3aaf 100644
--- a/test/e2e/cypress/integration/single-backend/login.spec.js
+++ b/test/e2e/cypress/integration/single-backend/login.spec.js
@@ -39,7 +39,7 @@ describe('Login', function() {
     cy.request('POST', 'http://localhost:7512/admin/_resetSecurity')
 
     cy.visit('/')
-    cy.get('[data-cy="NoAdminAlert-link"]').click()
+    cy.get('[data-cy="NoAdminWarning-link"]').click()
     cy.contains('Create an Admin Account')
     cy.get('[data-cy="Signup-username"]').type(admin.username)
     cy.get('[data-cy="Signup-password1"]').type(admin.password)
@@ -118,4 +118,49 @@ describe('Login', function() {
     cy.wait(700)
     cy.url().should('contain', '/#/login')
   })
+
+  it('Should be able to disconnect from a token expired session', () => {
+    cy.request('POST', 'http://localhost:7512/admin/_resetSecurity')
+    cy.request('POST', 'http://localhost:7512/admin/_resetDatabase')
+    cy.request('POST', 'http://localhost:7512/_createFirstAdmin?_id=admin', {
+      content: {},
+      credentials: {
+        local: {
+          username: admin.username,
+          password: admin.password
+        }
+      }
+    })
+    cy.request('POST', 'http://localhost:7512/_login/local', {
+      username: admin.username,
+      password: admin.password
+    }).then(response => {
+      expect(response.body.result).to.have.property('jwt')
+      localStorage.setItem(
+        'environments',
+        JSON.stringify({
+          [validEnvName]: {
+            name: validEnvName,
+            color: 'darkblue',
+            host: 'localhost',
+            ssl: false,
+            port: 7512,
+            backendMajorVersion: Cypress.env('BACKEND_VERSION') || '2',
+            token: response.body.result.jwt
+          }
+        })
+      )
+
+      cy.visit('/')
+      cy.contains('Indexes')
+      cy.request(
+        'DELETE',
+        `http://localhost:7512/users/${admin.username}/tokens`
+      )
+
+      cy.get('[data-cy=MainMenu-logoutBtn]').click()
+      cy.wait(700)
+      cy.url().should('contain', '/#/login')
+    })
+  })
 })
diff --git a/test/e2e/cypress/integration/single-backend/roles.spec.js b/test/e2e/cypress/integration/single-backend/roles.spec.js
index 768cbf614..71c1717b8 100644
--- a/test/e2e/cypress/integration/single-backend/roles.spec.js
+++ b/test/e2e/cypress/integration/single-backend/roles.spec.js
@@ -323,7 +323,7 @@ describe('Roles', () => {
         })
       )
 
-      localStorage.setItem('currentEnv', 'testEnv')
+      sessionStorage.setItem('currentEnv', 'testEnv')
 
       cy.visit('#/security/roles')
 
diff --git a/test/e2e/cypress/integration/single-backend/search.spec.js b/test/e2e/cypress/integration/single-backend/search.spec.js
index 01d7d433a..61c07cac2 100644
--- a/test/e2e/cypress/integration/single-backend/search.spec.js
+++ b/test/e2e/cypress/integration/single-backend/search.spec.js
@@ -139,26 +139,22 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-input"]').type('Keylogger', { delay: 250 })
     cy.wait(250)
 
     cy.get('[data-cy=Treeview-item-index-link--testindex]').click()
     cy.get('[data-cy=CollectionList-name--anothercollection]').click()
 
-
     cy.url().should('not.contain', 'Keylogger')
     cy.get('[data-cy="DocumentListItem"]').should('have.length', 2)
 
     cy.get('[data-cy=Treeview-item-index-link--testindex]').click()
     cy.get(`[data-cy=CollectionList-name--${collectionName}]`).click()
 
-
     cy.url().should('contain', 'Keylogger')
     cy.get('[data-cy="DocumentListItem"]').should('have.length', 1)
   })
@@ -196,11 +192,9 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-basicTab"]').click()
     cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('job')
@@ -214,14 +208,12 @@ describe('Search', function() {
     cy.get('[data-cy=Treeview-item-index-link--testindex]').click()
     cy.get(`[data-cy=CollectionList-name--anothercollection]`).click()
 
-
     cy.url().should('not.contain', 'Keylogger')
     cy.get('[data-cy="DocumentListItem"]').should('have.length', 2)
 
     cy.get('[data-cy=Treeview-item-index-link--testindex]').click()
     cy.get(`[data-cy=CollectionList-name--${collectionName}]`).click()
 
-
     cy.url().should('contain', 'Keylogger')
     cy.get('[data-cy="DocumentListItem"]').should('have.length', 1)
     cy.get('[data-cy="QuickFilter-displayActiveFilters"]').click()
@@ -236,7 +228,7 @@ describe('Search', function() {
     )
   })
 
-  it('Should be able to perform a Basic Search on a _kuzzle_info field', function() {
+  it('performs a Basic Search on a _kuzzle_info field', function() {
     cy.skipOnBackendVersion(1)
     cy.request(
       'POST',
@@ -250,12 +242,10 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-basicTab"]').click()
     cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select(
@@ -285,10 +275,8 @@ describe('Search', function() {
     cy.visit('/')
     cy.get('.IndexesPage').should('be.visible')
 
-
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-basicTab"]').click()
     cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('job')
@@ -331,7 +319,6 @@ describe('Search', function() {
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-input"]').type('Keylogger', { delay: 60 })
 
     cy.url().should('contain', 'Keylogger')
@@ -393,12 +380,10 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-basicTab"]').click()
     cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('job')
@@ -450,18 +435,16 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-rawTab"]').click()
     cy.get('#rawsearch .ace_line').should('be.visible')
     cy.wait(1000)
 
-    cy.get('#rawsearch .ace_line').click({ force: true })
+    cy.get('#rawsearch .ace_active-line').click({ force: true })
     cy.get('textarea.ace_text-input')
       .type('{selectall}{backspace}', { delay: 200, force: true })
       .type(
@@ -489,12 +472,10 @@ describe('Search', function() {
   it('transforms a search query from basic filter to raw filter', function() {
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-basicTab"]').click()
 
@@ -510,7 +491,7 @@ describe('Search', function() {
       .and('contain', 'bar')
   })
 
-  it.skip('should show aggregations in search result when aggregations are specified in the raw filter', function() {
+  it.skip('shows aggregations in search result when aggregations are specified in the raw filter', function() {
     cy.request(
       'POST',
       `${kuzzleUrl}/${indexName}/${collectionName}/_create?refresh=wait_for`,
@@ -521,12 +502,10 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-rawTab"]').click()
 
@@ -557,7 +536,7 @@ describe('Search', function() {
     })
   })
 
-  it.skip('should not show aggregations in search result when no aggregations are specified in the raw filter', function() {
+  it.skip('does not show aggregations in search result when no aggregations are specified in the raw filter', function() {
     cy.request(
       'POST',
       `${kuzzleUrl}/${indexName}/${collectionName}/_create?refresh=wait_for`,
@@ -570,7 +549,6 @@ describe('Search', function() {
     cy.get('.IndexesPage').should('be.visible')
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-rawTab"]').click()
 
@@ -592,7 +570,7 @@ describe('Search', function() {
     cy.get('[data-cy="RawFilter-submitBtn"]').click()
   })
 
-  it('should properly paginate search results', () => {
+  it('properly paginates search results', () => {
     const docCount = 50
     const documents = []
     for (let i = 0; i < docCount; i++) {
@@ -633,7 +611,7 @@ describe('Search', function() {
     cy.url().should('contain', 'from=30')
   })
 
-  it('should add my search in history', () => {
+  it('adds my search in history', () => {
     const docCount = 10
     const documents = []
     for (let i = 0; i < docCount * 2; i += 2) {
@@ -655,7 +633,6 @@ describe('Search', function() {
     )
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy=QuickFilter-optionBtn]').click()
     cy.get('[data-cy=Filters-basicTab]').click()
     cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('lastName')
@@ -666,7 +643,7 @@ describe('Search', function() {
     cy.get('[data-cy="FilterHistoryItem--0"]')
   })
 
-  it('Should be able to see previous searches in the search history.', () => {
+  it('shows previous searches in the search history.', () => {
     const docCount = 10
     const documents = []
     for (let i = 0; i < docCount * 2; i += 2) {
@@ -689,7 +666,6 @@ describe('Search', function() {
     for (let i = 0, item = 0; i < 10; i += 2, item++) {
       cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
       cy.get('[data-cy=QuickFilter-optionBtn]').click()
       cy.get('[data-cy=Filters-basicTab]').click()
       cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('lastName')
@@ -703,7 +679,7 @@ describe('Search', function() {
     }
   })
 
-  it('Should be able to delete a previous search in the search history', () => {
+  it('deletes a previous search in the search history', () => {
     cy.request(
       'POST',
       `${kuzzleUrl}/${indexName}/${collectionName}/dummy-0/_create?refresh=wait_for`,
@@ -727,12 +703,10 @@ describe('Search', function() {
     cy.get('[data-cy="FilterHistoryItem-deleteBtn--0"]').click()
     cy.get('[data-cy="FilterHistoryItem--0"]').should('not.exist')
     cy.visit(`/#/data/${indexName}/${collectionName}`)
-    cy.get('[data-cy=QuickFilter-displayActiveFilters]').click()
-    cy.get('[data-cy=Filters-historyTab]').click()
     cy.get('[data-cy="FilterHistoryItem--0"]').should('not.exist')
   })
 
-  it('should be able to add a filter to favorite', () => {
+  it('adds a filter to favorite', () => {
     const docCount = 10
     const documents = []
     for (let i = 0; i < docCount * 2; i += 2) {
@@ -755,7 +729,6 @@ describe('Search', function() {
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy=QuickFilter-optionBtn]').click()
     cy.get('[data-cy=Filters-basicTab]').click()
     cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('lastName')
@@ -769,10 +742,9 @@ describe('Search', function() {
     cy.get('[data-cy="FilterFavoriItem--0"]')
   })
 
-  it('should display message for empty favorite or history', () => {
+  it('displays a message for empty favorite or history', () => {
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy=QuickFilter-optionBtn]').click()
     cy.get('[data-cy=Filters-historyTab]').click()
     cy.contains("You haven't performed any search yet.")
@@ -780,7 +752,7 @@ describe('Search', function() {
     cy.contains("You don't have any favorite filters.")
   })
 
-  it('should be able to remove a favorite filter', () => {
+  it('removes a favorite filter', () => {
     const docCount = 10
     const documents = []
     for (let i = 0; i < docCount * 2; i += 2) {
@@ -802,7 +774,6 @@ describe('Search', function() {
     )
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy=QuickFilter-optionBtn]').click()
     cy.get('[data-cy=Filters-basicTab]').click()
     cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('lastName')
@@ -819,7 +790,7 @@ describe('Search', function() {
     cy.contains("You don't have any favorite filters.")
   })
 
-  it('should be able to perform search from history', () => {
+  it('performs a search from history', () => {
     const docCount = 10
     const documents = []
     for (let i = 0; i < docCount * 2; i += 2) {
@@ -842,7 +813,6 @@ describe('Search', function() {
     for (let i = 0, item = 0; i < 10; i += 2, item++) {
       cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
       cy.get('[data-cy=QuickFilter-optionBtn]').click()
       cy.get('[data-cy=Filters-basicTab]').click()
       cy.get('[data-cy="BasicFilter-attributeSelect--0.0"]').select('lastName')
@@ -862,7 +832,7 @@ describe('Search', function() {
     cy.contains('dummy-9').should('not.exist')
   })
 
-  it('should be able to display the range field correctly', function() {
+  it('displays the range field correctly', function() {
     cy.request(
       'POST',
       `${kuzzleUrl}/${indexName}/${collectionName}/_create?refresh=wait_for`,
@@ -876,7 +846,6 @@ describe('Search', function() {
     cy.get('.IndexesPage').should('be.visible')
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy=QuickFilter-optionBtn]').click()
     cy.get('[data-cy=Filters-basicTab]').click()
     cy.get('[data-cy="BasicFilter-operator"]').select('Range')
@@ -888,7 +857,7 @@ describe('Search', function() {
       .should('be.gt', 100)
   })
 
-  it('should be able to toggle fullscreen filters', () => {
+  it('toggles fullscreen filters', () => {
     cy.request(
       'POST',
       `${kuzzleUrl}/${indexName}/${collectionName}/_create?refresh=wait_for`,
@@ -909,7 +878,6 @@ describe('Search', function() {
     cy.get('.IndexesPage').should('be.visible')
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy=QuickFilter-optionBtn]').click()
     cy.get('[data-cy=Filters-fullscreen]').click()
     cy.get('[data-cy="Filters"]').should('have.class', 'full-screen')
@@ -931,7 +899,7 @@ describe('Search', function() {
     cy.get('[data-cy="Filters"]').should('not.have.class', 'full-screen')
   })
 
-  it('Should not be able to perform a Basic Search sort by a text field', function() {
+  it('does not perform a Basic Search sort by a text field', function() {
     cy.skipOnBackendVersion(1)
     cy.request(
       'POST',
@@ -946,12 +914,10 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-basicTab"]').click()
     cy.get('[data-cy="BasicFilter-sortAttributeSelect"] option').should(
@@ -960,7 +926,7 @@ describe('Search', function() {
     )
   })
 
-  it('Should be able to perform a Basic Search sort by a text field with keyword as sub type', function() {
+  it('does not perform a Basic Search sort by a text field with keyword as sub type', function() {
     cy.skipOnBackendVersion(1)
     cy.request(
       'POST',
@@ -975,17 +941,15 @@ describe('Search', function() {
 
     cy.visit('/')
 
-
     cy.get('.IndexesPage').should('be.visible')
 
     cy.visit(`/#/data/${indexName}/${collectionName}`)
 
-
     cy.get('[data-cy="QuickFilter-optionBtn"]').click()
     cy.get('[data-cy="Filters-basicTab"]').click()
     cy.get('[data-cy="BasicFilter-sortAttributeSelect"] option').should(
-    'contain',
-    'lastName'
+      'contain',
+      'lastName'
     )
     cy.get('[data-cy="BasicFilter-sortAttributeSelect"] option').should(
       'contain',
diff --git a/test/e2e/cypress/integration/single-backend/users.spec.js b/test/e2e/cypress/integration/single-backend/users.spec.js
index e2c3230c2..5fc9fdc66 100644
--- a/test/e2e/cypress/integration/single-backend/users.spec.js
+++ b/test/e2e/cypress/integration/single-backend/users.spec.js
@@ -104,7 +104,7 @@ describe('Users', function() {
     cy.get('#rawsearch .ace_line').should('exist')
     cy.wait(1000)
 
-    cy.get('#rawsearch .ace_line').click({ force: true })
+    cy.get('#rawsearch .ace_active-line').click({ force: true })
     cy.get('textarea.ace_text-input')
       .should('exist')
       .type('{selectall}{backspace}', { delay: 200, force: true })
diff --git a/test/e2e/cypress/support/commands.js b/test/e2e/cypress/support/commands.js
index db4c2280f..8cb51be84 100644
--- a/test/e2e/cypress/support/commands.js
+++ b/test/e2e/cypress/support/commands.js
@@ -51,7 +51,7 @@ Cypress.Commands.add(
         }
       })
     )
-    localStorage.setItem('currentEnv', envName)
+    sessionStorage.setItem('currentEnv', envName)
   }
 )
 
@@ -91,7 +91,7 @@ Cypress.Commands.add('waitForService', (url, state = 'up', tries = 30) => {
 })
 
 Cypress.Commands.add('skipOnBackendVersion', version => {
-  const currentEnvName = localStorage.getItem('currentEnv')
+  const currentEnvName = sessionStorage.getItem('currentEnv')
   const currentEnv = JSON.parse(localStorage.getItem('environments'))[
     currentEnvName
   ]
@@ -103,7 +103,7 @@ Cypress.Commands.add('skipOnBackendVersion', version => {
 })
 
 Cypress.Commands.add('skipUnlessBackendVersion', version => {
-  const currentEnvName = localStorage.getItem('currentEnv')
+  const currentEnvName = sessionStorage.getItem('currentEnv')
   const currentEnv = JSON.parse(localStorage.getItem('environments'))[
     currentEnvName
   ]