diff --git a/public/css/index.css b/public/css/index.css
index 94c8fa1..2c167f6 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,3 +1,30 @@
+:root {
+  --black: #030B12;
+  --darkdark: #0C1D2E;
+  --dark: #203A53;
+  --lightdark: #425F7C;
+  --light: #93A9BE;
+  --lightlight: #B6C5D5;
+  --white: #F0F3F7;
+  --orange: ##F5B97D;
+  --yellow: #F5F57D;
+  --green: #B9F57D;
+  --turquoise: #7DF5B9;
+  --blue: #7DB9F5;
+  --purple: #B97DF5;
+  --pink: #F57DB9;
+  --red: #F57D7D;
+
+  --pri: var(--blue);
+  --alt: var(--pink);
+  --valid: var(--green);
+  --error: var(--red);
+  --warn: var(--orange);
+  --info: var(--yellow);
+  --bg: var(--darkdark);
+  --fg: var(--white);
+}
+
 /**
  *  SETTINGS
  */
@@ -8,66 +35,66 @@
  *  BACKGROUND
  */
 .bg-primary {
-  background-color: #03a9f4;
+  background-color: var(--blue);
 }
 
 .bg-dark {
-  background-color: #18232f;
+  background-color: var(--darkdark);
 }
 
 .bg-secondary {
-  background-color: #e91e63;
+  background-color: var(--pink);
 }
 
 .bg-white {
-  background-color: #fff;
+  background-color: var(--white);
 }
 
 .bg-success {
-  background-color: #4caf50;
+  background-color: var(--green);
 }
 
 .bg-info {
-  background-color: #5bc0de;
+  background-color: var(--yellow);
 }
 
 .bg-warning {
-  background-color: #f0ad4e;
+  background-color: var(--orange);
 }
 
 .bg-error {
-  background-color: #e74c3c;
+  background-color: var(--red);
 }
 
 .bg-gray {
-  background-color: #969da6;
+  background-color: var(--lightdark);
 }
 
 .bg-gray-light {
-  background-color: #eceff1;
+  background-color: var(--lightlight);
 }
 
 /**
  *  BORDER
  */
 .border {
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
 }
 
 .border-bottom {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
 }
 
 .border-left {
-  border-left: 1px solid #d5d9db;
+  border-left: 1px solid var(--white);
 }
 
 .border-right {
-  border-right: 1px solid #d5d9db;
+  border-right: 1px solid var(--white);
 }
 
 .border-top {
-  border-top: 1px solid #d5d9db;
+  border-top: 1px solid var(--white);
 }
 
 /**
@@ -313,16 +340,16 @@ body {
 }
 
 a {
-  color: #03a9f4;
+  color: var(--blue);
   text-decoration: none;
 }
 
 a:hover {
-  color: rgba(3, 169, 244, 0.8);
+  color: color-mix(in srgb, var(--color-primary), #FFF 15%);
 }
 
 a:focus {
-  color: #03a9f4;
+  color: var(--blue);
 }
 
 .text-huge,
@@ -647,7 +674,7 @@ button {
 
 .button--outlined {
   background-color: transparent;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   color: #03a9f4;
 }
 
@@ -708,7 +735,7 @@ input:-webkit-autofill {
 .textarea,
 .input,
 .select {
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-radius: 3px;
   box-shadow: none;
   display: inline-block;
@@ -876,7 +903,7 @@ input:-webkit-autofill {
 
 .checkbox input[type="checkbox"]+label::before {
   background-color: #eceff1;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-radius: 3px;
   content: "";
   display: inline-block;
@@ -929,7 +956,7 @@ input:-webkit-autofill {
 
 .radio input[type="radio"]+label::before {
   background-color: #eceff1;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-radius: 20px;
   content: "";
   display: inline-block;
@@ -1580,7 +1607,7 @@ input:-webkit-autofill {
  */
 .table {
   background-color: #eceff1;
-  border: 1px solid #d5d9db;
+  border: 1px solid var(--white);
   border-collapse: collapse;
   color: #272727;
   max-width: 100%;
@@ -1589,13 +1616,13 @@ input:-webkit-autofill {
 
 .table th,
 .table td {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
   padding: 8px;
   position: relative;
 }
 
 .table thead {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
 }
 
 .table th {
@@ -1670,7 +1697,7 @@ input:-webkit-autofill {
 }
 
 .table--responsive td:first-child {
-  border-top: 1px solid #d5d9db;
+  border-top: 1px solid var(--white);
 }
 
 .table--responsive th,
@@ -1682,7 +1709,7 @@ input:-webkit-autofill {
 
   .table--responsive th,
   .table--responsive td {
-    border-top: 1px solid #d5d9db;
+    border-top: 1px solid var(--white);
     display: table-cell;
   }
 }
@@ -1700,7 +1727,7 @@ input:-webkit-autofill {
  *
  */
 .tabs {
-  border-bottom: 1px solid #d5d9db;
+  border-bottom: 1px solid var(--white);
   text-align: center;
 }
 
@@ -3178,7 +3205,7 @@ li {
 }
 
 .map-menu-item {
-  background-color: darkslategrey;
+  background-color: var(--darkdark);
   padding: 5px;
   border-radius: 50%;
   cursor: pointer;
@@ -3195,11 +3222,10 @@ li {
 
 .spinner {
   position: absolute;
-  right: 1px;
-  top: 1px;
+  right: 0;
+  top: 0;
   width: 40px;
-  height: 38px;
-  background: #fff;
+  height: 40px;
   display: block
 }
 
@@ -3209,14 +3235,12 @@ li {
   content: "";
   top: 50%;
   left: 50%;
-  margin: -8px 0 0 -8px;
-  width: 16px;
-  height: 16px;
+  margin: -12px 0 0 -12px;
+  width: 24px;
+  height: 24px;
   border-radius: 100%;
-  border: 2px solid transparent;
-  border-top-color: #41b883;
-  -webkit-box-shadow: 0 0 0 1px transparent;
-  box-shadow: 0 0 0 1px transparent
+  border: 3px solid transparent;
+  border-top-color: var(--blue);
 }
 
 .spinner:before {
diff --git a/src/client/old.js b/src/client/old.js
index 66f3eca..038991b 100644
--- a/src/client/old.js
+++ b/src/client/old.js
@@ -12,7 +12,7 @@ Vue.component("l-popup", window.Vue2Leaflet.LPopup);
 Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip);
 Vue.component("l-polyline", window.Vue2Leaflet.LPolyline);
 Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale);
-Vue.component("multiselect", window.VueMultiselect.default);
+// Vue.component("multiselect", window.VueMultiselect.default);
 Vue.use(window.VueTextareaAutosize);
 
 const app = new Vue({
@@ -23,7 +23,7 @@ const app = new Vue({
     map_override: { active: false, center: [0, 0] },
 
     query: {
-      type: "", res: [],
+      type: "", res: [], load: false,
     },
     impexp: "",
     lang: {
@@ -113,32 +113,28 @@ const app = new Vue({
     },
 
     search_nominatim: function (f) {
-      return (q) => {
-        this.query.type = f;
-        return api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => {
-          r.forEach((rr) => {
-            rr.latlon = [parseFloat(rr.lat), parseFloat(rr.lon)];
-            rr.sname = rr.display_name.split(",")[0];
-          });
-          this.query.res = r;
-          return r
+      return (q) => api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => {
+        r.forEach((rr) => {
+          rr.latlon = [parseFloat(rr.lat), parseFloat(rr.lon)];
+          rr.sname = rr.display_name.split(",")[0];
         });
-      }
+        this.query.load = false;
+        this.query.res = r;
+        return r
+      });
     },
     search_travel: function (f) {
-      return (q) => {
-        this.query.type = f;
-        return api.query_flight(q).then((r) => {
-          r.forEach(el => {
-            el.path = getGeoLine(
-              { lat: el.from_geo.lat, lng: el.from_geo.lon },
-              { lat: el.to_geo.lat, lng: el.to_geo.lon }, { dist: 5_000_000 }).map(v => [v.lat, v.lng])
-            el.type = "flight";
-          });
-          this.query.res = r;
-          return r;
+      return (q) => api.query_flight(q).then((r) => {
+        r.forEach(el => {
+          el.path = getGeoLine(
+            { lat: el.from_geo.lat, lng: el.from_geo.lon },
+            { lat: el.to_geo.lat, lng: el.to_geo.lon }, { dist: 5_000_000 }).map(v => [v.lat, v.lng])
+          el.type = "flight";
         });
-      }
+        this.query.load = false;
+        this.query.res = r;
+        return r;
+      });
     },
 
     drawer_hover_item: function (item) {
@@ -166,6 +162,7 @@ const app = new Vue({
 
     search_active: function (q) {
       const txt = q.target.value
+      this.query.load = true;
       switch (this.query.type) {
         case 'hotel': return this.search_hotel(txt);
         case 'restaurant': return this.search_restaurant(txt);
diff --git a/template/module/foot.pug b/template/module/foot.pug
index 0ee055f..8580614 100644
--- a/template/module/foot.pug
+++ b/template/module/foot.pug
@@ -3,7 +3,6 @@ script(src="https://unpkg.com/leaflet")
 script(src="https://unpkg.com/vue@2")
 script(src="https://unpkg.com/vue2-datepicker")
 script(src="https://unpkg.com/vue-textarea-autosize")
-script(src="https://unpkg.com/vue-multiselect@2")
 script(src="https://unpkg.com/vue2-leaflet")
 script(src="https://unpkg.com/sortablejs")
 script(src="https://unpkg.com/vuedraggable")
diff --git a/template/module/head.pug b/template/module/head.pug
index 6252ff0..f0ae469 100644
--- a/template/module/head.pug
+++ b/template/module/head.pug
@@ -11,15 +11,7 @@ head
   link(rel="stylesheet", href="/public/css/index.css")
 
   link(rel="stylesheet", href="https://unpkg.com/vue2-datepicker/index.css")
-  link(
-    rel="stylesheet",
-    href="https://unpkg.com/vue-multiselect@2/dist/vue-multiselect.min.css"
-  )
   link(rel="stylesheet", href="https://unpkg.com/leaflet/dist/leaflet.css")
-  link(
-    rel="stylesheet",
-    href="https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.css"
-  )
   link(
     rel="stylesheet",
     href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css"
diff --git a/template/module/journey/leg/drawer.pug b/template/module/journey/leg/drawer.pug
index 76b4b99..9a9a330 100644
--- a/template/module/journey/leg/drawer.pug
+++ b/template/module/journey/leg/drawer.pug
@@ -1,10 +1,12 @@
-.row.text-center 
+.row
     .input.text-dark(style="width: 100%")
         input(
             type="search"
             @input="search_active"
             placeholder="Search ... "
+            style="width:85%;"
         )
+        .spinner(v-if="query.load")
     ul
         li(
             v-for="item in query.res" 
diff --git a/template/module/journey/leg/old_cfg.pug b/template/module/journey/leg/old_cfg.pug
index 027df9c..8b9faa2 100644
--- a/template/module/journey/leg/old_cfg.pug
+++ b/template/module/journey/leg/old_cfg.pug
@@ -1,45 +1,45 @@
 div
   div
-    .row.text-center
-        div
-            label Hotel
-            multiselect#ajax(
-            v-model="journey.leg_get().hotel",
-            label="sname",
-            track-by="place_id",
-            placeholder="Type to search",
-            open-direction="bottom",
-            :options="query.res",
-            :searchable="true",
-            :loading="query.type=='hotel'",
-            :internal-search="false",
-            :clear-on-select="false",
-            :options-limit="50",
-            :limit="1",
-            :max-height="600",
-            @search-change="search_hotel"
-          )
-    .row.text-center
-        div
-            label Restoration
-            multiselect#ajax(
-            v-model="journey.leg_get().places.restaurants",
-            label="sname",
-            track-by="place_id",
-            placeholder="Type to search",
-            open-direction="bottom",
-            :multiple="true",
-            :options="query.res",
-            :searchable="true",
-            :loading="query.type == 'restaurant'",
-            :internal-search="false",
-            :clear-on-select="false",
-            :options-limit="50",
-            :limit="10",
-            :max-height="600",
-            @search-change="search_restaurant"
-          )
-    .row.text-center
+    //- .row.text-center
+    //-     div
+    //-         label Hotel
+    //-         multiselect#ajax(
+    //-         v-model="journey.leg_get().hotel",
+    //-         label="sname",
+    //-         track-by="place_id",
+    //-         placeholder="Type to search",
+    //-         open-direction="bottom",
+    //-         :options="query.res",
+    //-         :searchable="true",
+    //-         :loading="query.type=='hotel'",
+    //-         :internal-search="false",
+    //-         :clear-on-select="false",
+    //-         :options-limit="50",
+    //-         :limit="1",
+    //-         :max-height="600",
+    //-         @search-change="search_hotel"
+    //-       )
+    //- .row.text-center
+    //-     div
+    //-         label Restoration
+    //-         multiselect#ajax(
+    //-         v-model="journey.leg_get().places.restaurants",
+    //-         label="sname",
+    //-         track-by="place_id",
+    //-         placeholder="Type to search",
+    //-         open-direction="bottom",
+    //-         :multiple="true",
+    //-         :options="query.res",
+    //-         :searchable="true",
+    //-         :loading="query.type == 'restaurant'",
+    //-         :internal-search="false",
+    //-         :clear-on-select="false",
+    //-         :options-limit="50",
+    //-         :limit="10",
+    //-         :max-height="600",
+    //-         @search-change="search_restaurant"
+    //-       )
+    //- .row.text-center
         div
             label Activities
             multiselect#ajax(