diff --git a/quasar.conf.js b/quasar.conf.js
index 73e09f18..a73044e0 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -79,17 +79,16 @@ module.exports = configure(function (ctx) {
     devServer: {
       https: false,
       // port: 8080,
-      open: true // opens browser window automatically
-      // proxy: {
-      //   // proxy all requests starting with /api to jsonplaceholder
-      //   '/django': {
-      //     target: 'http://192.168.1.47:8000/',
-      //     changeOrigin: true,
-      //     pathRewrite: {
-      //       '^/django': ''
-      //     }
-      //   }
-      // }
+      open: true, // opens browser window automatically
+      proxy: {
+        '/api_v1_prod': {
+          target: 'https://api.mosquitoalert.com/',
+          changeOrigin: true,
+          pathRewrite: {
+            '^/api_v1_prod': 'v1/map/'
+          },
+        }
+      },
     },
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
diff --git a/src/components/CustControl.vue b/src/components/CustControl.vue
index 96196ca7..c16b9e43 100644
--- a/src/components/CustControl.vue
+++ b/src/components/CustControl.vue
@@ -6,6 +6,7 @@
   <div :class="className">
     <button
       :title="trans(titleText)"
+      :disabled="isDisabled"
       @click.stop="buttonClicked"
     >
       <i :class="faIcon"></i>
@@ -18,10 +19,14 @@ import { computed } from 'vue'
 import { useStore } from 'vuex'
 
 export default {
-  props: ['class', 'icon', 'title'],
+  props: ['class', 'icon', 'title', 'disabled'],
   emits: ['clicked'],
   setup (props, context) {
     const $store = useStore()
+    const isDisabled = computed(() => {
+      return props.disabled
+    })
+
     const className = computed(() => {
       return props.class
     })
@@ -45,6 +50,7 @@ export default {
     return {
       trans,
       className,
+      isDisabled,
       faIcon,
       titleText,
       buttonClicked
diff --git a/src/components/FaThinButtonRouter.vue b/src/components/FaThinButtonRouter.vue
index 54cd4b98..bc268886 100644
--- a/src/components/FaThinButtonRouter.vue
+++ b/src/components/FaThinButtonRouter.vue
@@ -5,7 +5,7 @@
 
 <template>
   <div class="tab-link-container" :class="isButtonDisabled?'disabled':''">
-    <router-link v-if="!isButtonDisabled" class="main-menu-item" :id="Id" :to="toLink">
+    <router-link v-if="!isButtonDisabled" class="main-menu-item" :id="Id" :to="{'name': routeName, params: {'lang': language}}">
       <button class="fa-thin-button" :class="classProp" :title="label">
         <i :class="iconCode"></i>
       </button>
@@ -20,18 +20,17 @@
 
 <script>
 import { computed } from 'vue'
+import { useStore } from 'vuex'
 
 export default {
-  props: ['name', 'label', 'link', 'class', 'item', 'id'],
+  props: ['name', 'label', 'routeName', 'class', 'item', 'id'],
   setup (props) {
+    const $store = useStore()
+
     const Id = computed(() => {
       return props.id
     })
 
-    const toLink = computed(() => {
-      return props.link
-    })
-
     const iconCode = computed(() => {
       return props.name
     })
@@ -44,12 +43,16 @@ export default {
       return props.class.toLowerCase().indexOf('disabled') > -1
     })
 
+    const language = computed(() => {
+      return $store.getters['app/getLang']
+    })
+
     return {
       Id,
-      toLink,
       iconCode,
       classProp,
-      isButtonDisabled
+      isButtonDisabled,
+      language
     }
   }
 }
diff --git a/src/components/LeftDrawer.vue b/src/components/LeftDrawer.vue
index 1600e448..bec23e44 100644
--- a/src/components/LeftDrawer.vue
+++ b/src/components/LeftDrawer.vue
@@ -394,10 +394,13 @@ export default {
 
 .toc-title-reports{
   font-family: 'Roboto';
-  text-transform: Capitalize;
   font-weight: 700;
   color: #666666;
 }
+.toc-title-reports::first-letter{
+  text-transform: uppercase;
+}
+
 .toc-title{
   font-family: 'Roboto';
   text-transform: uppercase;
diff --git a/src/components/LeftDrawerModels.vue b/src/components/LeftDrawerModels.vue
index bb22d4bc..143761c2 100644
--- a/src/components/LeftDrawerModels.vue
+++ b/src/components/LeftDrawerModels.vue
@@ -26,50 +26,45 @@
         <q-btn :label="trans('Close')" class="ma-close-btn" @click="toggleLeftDrawer"/>
       </div>
       <div class="text-h5 toc-title-estimates">
-        {{ trans('Estimates') }}
+        {{ trans('Encounter probability') }}
       </div>
 
       <div>
         <div class="category-box q-my-md">
           <q-select
             :label="trans('Select species')"
-            v-model="modelVector"
-            color="orange"
-            :label-color="modelVector?'orange':'rgba(0, 0, 0, 0.6)'"
+            :label-color="localSpeciesCode?'orange':'rgba(0, 0, 0, 0.6)'"
             :options="vectorOptions"
-            :option-value="'code'"
-            :option-label="'type'"
-            @update:model-value="filterModels"
+            option-value="code"
+            option-label="label"
+            color="orange"
+            emit-value
+            map-options
+            :model-value="localSpeciesCode"
+            @update:model-value="speciesCodeUpdated"
           />
-
         </div>
-
         <q-input
-          v-if="modelVector"
-          readonly
-          class="calendar-input"
-          input-class="cursor-pointer"
           :label="trans('Month / Year')"
-          v-model="inputDate"
-          mask="##/####"
-          :label-color="dateSelected?'orange':'rgba(0, 0, 0, 0.6)'"
-          ref="refInput"
-          @click="showCalendar"
+          :label-color="localDate?'orange':'rgba(0, 0, 0, 0.6)'"
+          :disable="!localSpeciesCode"
+          :model-value="localDateString"
+          readonly
         >
           <template v-slot:append>
-            <q-icon ref="modelsCalendar" name="event_note" class="models-calendar cursor-pointer" color="orange">
-              <q-popup-proxy ref="monthPicker" transition-show="scale" transition-hide="scale">
+            <q-icon name="event" class="cursor-pointer" color="orange">
+              <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                 <q-date
                   :title="trans('Select model date')"
-                  :navigation-min-year-month="startingModelDate"
-                  :navigation-max-year-month="getLastDate"
-                  mask="MM/YYYY"
-                  :years-in-month-view=true
-                  emit-immediately
+                  :navigation-min-year-month="minYearMonthPickerValue"
+                  :navigation-max-year-month="maxYearMonthPickerValue"
                   default-view="Years"
-                  v-model="modelDate"
                   color="orange-4"
-                  @update:model-value="checkValue"
+                  years-in-month-view
+                  emit-immediately
+                  mask="YYYY/MM"
+                  v-model="qDateModel"
+                  @update:model-value="dateUpdated"
                 />
               </q-popup-proxy>
             </q-icon>
@@ -89,126 +84,70 @@
               </div>
             </div>
           </div>
-            <div>
-            <q-btn
-              class="ma-btn no-margin"
-              :class="(disabled)?'disabled':''"
-              @click="applyfilter">
-                {{ trans('Apply') }}
-            </q-btn>
-          </div>
         </div>
         <!-- LEGEND -->
-        <div v-if="showLegend">
-          <hr class="q-my-xl">
-          <div class="flex spaceBetween">
-            <div class="uppercase text-bold">
-              {{ trans('Probability') }}
-            </div>
-            <div class="estimation-palettes">
-              <q-icon v-if="estimation" name="palette" class="text-orange cursor-pointer" size="2em" @click="showPalettes" />
-              <q-toggle checked-icon="check" v-model="estimation" @update:model-value="checkEstimation" color="orange" size="lg"/>
+        <div v-if="formIsValid">
+          <hr class="q-my-lg">
+          <div class="row title-shaded-box">{{ trans('Layer controls') }}</div>
+          <div class="row shaded-box q-pa-sm">
+            <div class="col-9 q-pr-md">
+              <div class="row">
+                <q-badge :outline="!localVisible" color="orange">
+                  {{ trans('Opacity') }}
+                </q-badge>
+              </div>
+              <q-slider
+                v-model="localOpacity"
+                :min="0"
+                :max="1"
+                :step="0.01"
+                :disable="!localVisible"
+                color="orange"
+                label/>
             </div>
+            <q-toggle class="col" checked-icon="check" v-model="localVisible" color="orange" size="lg"/>
           </div>
-          <div class="flex spaceBetween">
-            <div>
-                <q-popup-proxy ref="colorPickerEst" class="estimation-colors">
-                      <q-color
-                        no-header
-                        no-footer
-                        default-view="palette"
-                        :palette="palettes"
-                        class="my-picker q-ma-md"
-                        @click="clickColor"
-                      />
-                </q-popup-proxy>
+          <!-- LEGEND + FILTERS -->
+          <div v-if="localVisible">
+            <!-- LEGEND -->
+            <div class="row justify-between q-mt-lg">
+              <span>{{ trans('Low') }}</span>
+              <span>{{ trans('Medium') }}</span>
+              <span>{{ trans('High') }}</span>
             </div>
-          </div>
-          <!-- ESTIMATION -->
-          <div v-if="estimation" class="row">
-            <div class="col-4 text-left">{{ trans('Low') }}</div>
-            <div class="col-4 text-center">{{ trans('Medium') }}</div>
-            <div class="col-4 text-right">{{ trans('High') }}</div>
-          </div>
-          <!-- ESTIMATION LEGEND -->
-          <div v-if="estimation" class="row legend-row" :style="{'opacity': 1 - (estimationTransparency/100)}">
-              <div class="col-2" :style="{'background-color': estLegendColors[0]}"></div>
-              <div class="col-2" :style="{'background-color': estLegendColors[1]}"></div>
-              <div class="col-2" :style="{'background-color': estLegendColors[2]}"></div>
-              <div class="col-2" :style="{'background-color': estLegendColors[3]}"></div>
-              <div class="col-2" :style="{'background-color': estLegendColors[4]}"></div>
-              <div class="col-2" :style="{'background-color': estLegendColors[5]}"></div>
-          </div>
-          <!-- ESTIMATION TRANSPARENCY -->
-          <div class="row q-mt-lg">
-            <div v-if="estimation" class="col text-center">{{ trans('Transparency') }}</div>
-          </div>
-          <div v-if="estimation" class="row">
-            <q-slider
-              :min="0"
-              :max="100"
-              v-model="estimationTransparency"
-              color="orange"
-              @update:model-value="setEstimationTransparency"/>
-          </div>
-          <!-- UNCERTAINTY -->
-          <div class="flex spaceBetween">
-            <div class="uppercase text-bold">
-              {{ trans('Uncertainty') }}
+            <!-- ESTIMATION LEGEND -->
+            <div class="row legend-row" :style="{'opacity': localOpacity}">
+              <div class="col" v-for="(color, index) in palette" :key="index" :style="{'background-color': color}"></div>
             </div>
-            <div>
-              <q-icon v-if="uncertainty" name="palette" class="text-orange cursor-pointer" size="2em" @click="showPicker" />
-              <q-toggle checked-icon="check" v-model="uncertainty" @update:model-value="checkUncertainty" color="orange" size="lg"/>
-            </div>
-          </div>
-          <div class="flex spaceBetween">
-            <div>
-                <q-popup-proxy ref="colorPickerSe">
-                  <q-color
-                    v-model="uncertaintyColor"
-                    no-header
-                    no-footer
-                    default-view="palette"
-                    :palette="colorsTo"
-                    class="my-picker q-ma-md"
-                    @change="setUncertaintyColor"
-                  />
-                </q-popup-proxy>
+            <!-- FILTERS -->
+            <hr class="q-my-lg">
+            <div class="row title-shaded-box">{{ trans('Filters') }}</div>
+            <div class="shaded-box ">
+              <q-list>
+                <!-- CERTAINTY FILTER -->
+                <q-item>
+                  <q-item-section avatar class="column flex-center">
+                    <q-icon name="fas fa-handshake" color="orange"/>
+                    <q-item-label class="text-grey-8">
+                      {{ trans('Certainty') }}
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-range
+                      v-model="localFilter.certaintyRange"
+                      :min="0.0"
+                      :max="1.0"
+                      :step="0.05"
+                      label
+                      drag-range
+                      color="orange"
+                      @change="handleFilterChange"
+                      />
+                  </q-item-section>
+                </q-item>
+              </q-list>
             </div>
           </div>
-          <!-- UNCERTAINTY LEGEND -->
-          <div v-if="uncertainty" class="row q-mt-md">
-            <div class="col-3 text-center">{{ trans('Very low') }}</div>
-            <div class="col-3 text-center">{{ trans('Low') }}</div>
-            <div class="col-3 text-center">{{ trans('Medium') }}</div>
-            <div class="col-3 text-center">{{ trans('High') }}</div>
-          </div>
-          <div v-if="uncertainty" class="row q-mt-sm alignt-items-centered" :style="{'opacity': 1 - (uncertaintyTransparency/100)}">
-              <div class="col-3 text-center">
-                <div class="circle very-low" :style="{ background: seColor }"></div>
-              </div>
-              <div class="col-3 text-center">
-                <div class="circle low" :style="{ background: seColor }"></div>
-              </div>
-              <div class="col-3 text-center">
-                <div class="circle medium" :style="{ background: seColor }"></div>
-              </div>
-              <div class="col-3 text-center">
-                <div class="circle high" :style="{ background: seColor }"></div>
-              </div>
-          </div>
-          <!-- UNCERTAINTY TRANSPARENCY -->
-          <div class="row q-mt-lg">
-            <div v-if="uncertainty" class="col text-center">{{ trans('Transparency') }}</div>
-          </div>
-          <div v-if="uncertainty" class="row">
-            <q-slider
-              :min="0"
-              :max="100"
-              v-model="uncertaintyTransparency"
-              color="orange"
-              @update:model-value="setUncertaintyTransparency"/>
-          </div>
         </div>
       </div>
     </div>
@@ -216,100 +155,149 @@
 </template>
 
 <script>
-import { watch, computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import LeftMenu from 'components/LeftMenu.vue'
-// import { StatusCodes as STATUS_CODES } from 'http-status-codes'
 import axios from 'axios'
 
 export default {
   components: { LeftMenu },
-  props: ['expanded'],
+  props: {
+    expanded: {
+      type: Boolean,
+      default: true
+    },
+    speciesCode: {
+      type: String
+    },
+    date: {
+      type: Date,
+      validator (value) {
+        return value <= new Date()
+      }
+    },
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    palette: {
+      type: Array,
+      required: true
+    },
+    filters: {
+      type: Object
+    },
+    lang: {
+      type: String,
+      required: true,
+      default: 'en'
+    }
+  },
   emits: [
-    'loadModel',
-    'clearModel',
     'firstMapCall',
-    'checkModelEstimation',
-    'checkModelUncertainty',
-    'estimationTransparency',
-    'uncertaintyTransparency',
-    'estimationColorsChanged',
-    'uncertaintyColorsChanged',
-    'filterObservations',
-    'toggleLeftDrawer'
+    'toggleLeftDrawer',
+    'startShareView',
+    'speciesCodeChange',
+    'dateChange',
+    'opacityChange',
+    'visiblitiyChange',
+    'filtersChange',
+    'filtersLazyChange'
   ],
   setup (props, context) {
-    const uncertaintyColor = ref(null)
-    const colorPickerEst = ref(null)
-    const colorPickerSe = ref(null)
-    const refInput = ref(null)
-    // const inputDate = ref(null)
-    const inputDate = ref(null)
-    const legendCanvas = ref(null)
-    const modelDate = ref(null)
-    const getLastDate = ref()
-    const monthPicker = ref()
     const $store = useStore()
-    const showLegend = ref(false)
-    const disabled = ref(true)
-    const disabledInfo = ref(true)
-    const modelVector = ref()
-    const estimation = ref(true)
-    const uncertainty = ref(true)
-    const modelsCalendar = ref()
-    const backendUrl = $store.getters['app/getBackend']
-    // const defaults = JSON.parse(JSON.stringify($store.getters['app/getModelDefaults']))
+
+    // Ref for controlling month picker visibility
+    const qDateProxy = ref()
+
+    // Object to store models manifest
     const modelsManifest = {}
-    const startingModelDate = ref('2014/05')
-    // const estimationColor = ref()
-    const palettes = ref(null)
-    let estimationColors = $store.getters['app/getEstimationColors']
-    const estLegendColors = ref(estimationColors)
-    const initialSeTransparency = $store.getters['app/getModelDefaults'].uncertaintyTransparency
-    const estimationTransparency = ref(0)
-    const uncertaintyTransparency = ref(initialSeTransparency)
     const manifestUrl = $store.getters['app/getModelsManifestUrl']
+    const speciesModelManifest = computed(() => modelsManifest[localSpeciesCode.value])
+
+    const localSpeciesCode = ref(props.speciesCode)
+    const localDate = ref(props.date)
+    const qDateModel = ref()
+    watch(localDate, (newValue, oldValue) => {
+      if (localDate.value) {
+        // Same mask as in q-date
+        qDateModel.value = localDate.value.getFullYear() + '/' + (localDate.value.getMonth() + 1).toString().padStart(2, '0')
+      } else {
+        console.log('undefined')
+        qDateModel.value = undefined
+      }
 
-    // colors for uncertainty
-    const colorsTo = [
-      hexToRgb('#ff0000'), hexToRgb('#ff8000'), hexToRgb('#ffff00'),
-      hexToRgb('#00ff00'), hexToRgb('#00ff80'), hexToRgb('#00ff80'),
-      hexToRgb('#0080ff'), hexToRgb('#0000ff'), hexToRgb('#8000ff'),
-      hexToRgb('#ff00ff'), hexToRgb('#cdcdcd'), hexToRgb('#7f7f7f'),
-      hexToRgb('#191919'), hexToRgb('#000000')
-    ]
+      context.emit('dateChange', newValue)
+    })
 
-    onMounted(function () {
-      palettes.value = [].concat.apply([], $store.getters['app/getEstimationPalettes'])
-      const defaults = $store.getters['app/getModelDefaults']
-      // Check if referer is Reports map
-      if (defaults.vector !== '') {
-        const index = vectorOptions.value.findIndex(obj => {
-          return (obj.code === defaults.vector)
-        })
-        modelVector.value = vectorOptions.value[index]
-        // Init view. Get values from store
-        showLegend.value = true
-        estimation.value = defaults.estimation
-        uncertainty.value = defaults.uncertainty
-        estimationTransparency.value = defaults.estimationTransparency
-        uncertaintyTransparency.value = defaults.uncertaintyTransparency
-        uncertaintyColor.value = defaults.uncertaintyColor
-        inputDate.value = defaults.month + '/' + defaults.year
-        context.emit('loadModel', defaults)
+    const localDateString = computed(() => {
+      if (localDate.value === undefined) {
+        return ''
       }
 
-      const d = new Date(Date.now())
-      const monthIn2Digit = String(d.getMonth() + 1).padStart(2, '0')
-      getLastDate.value = d.getFullYear() + '/' + monthIn2Digit
-      uncertaintyColor.value = defaults.uncertaintyColor
-      // Get model manifest to activate/deactivate calendar
-      getManifest(manifestUrl)
+      const dateStr = localDate.value.toLocaleDateString(
+        props.lang || 'en',
+        { year: 'numeric', month: 'long' }
+      )
+
+      // Force capitalize of first letter
+      return dateStr.charAt(0).toUpperCase() + dateStr.slice(1)
     })
 
-    const callFirstMapCall = function () {
-      context.emit('firstMapCall', {})
-    }
+    // Computed properties for setting min and max values for the year-month picker
+    const minYearMonthPickerValue = computed(() => speciesModelManifest.value ? `${speciesModelManifest.value.fromYear}/${speciesModelManifest.value.fromMonth}` : undefined)
+    const maxYearMonthPickerValue = computed(() => speciesModelManifest.value ? `${speciesModelManifest.value.toYear}/${speciesModelManifest.value.toMonth}` : undefined)
+
+    const localVisible = ref(props.visible)
+    watch(localVisible, (newValue) => {
+      context.emit('visiblitiyChange', newValue)
+    })
+    const localOpacity = ref(props.opacity)
+    watch(localOpacity, (newValue, oldValue) => {
+      context.emit('opacityChange', newValue)
+    })
+    const localFilter = ref({
+      ...{
+        certaintyRange: {
+          min: 0,
+          max: 1
+        }
+      },
+      ...props.filters
+    })
+    watch(localFilter, (newValue, oldValue) => {
+      context.emit('filtersChange', newValue)
+    })
+
+    // Computed property for checking form validity
+    const formIsValid = computed(() => {
+      // Check that both localSpeciesCode and localDate have values
+      return [localSpeciesCode.value, localDate.value].every(value => value !== undefined)
+    })
+
+    const vectorOptions = computed(() => {
+      // Code is used also for building the CSV urls paths.
+      return [
+        { code: 'albopictus', label: trans('Tiger mosquito') },
+        { code: 'aegypti', label: trans('Yellow fever mosquito') },
+        { code: 'japonicus', label: trans('Japonicus mosquito') },
+        { code: 'koreicus', label: trans('Koreicus mosquito') },
+        { code: 'culex', label: trans('Culex mosquito') },
+        { code: 'biting', label: trans('Bites') }
+      ]
+    })
+
+    const mobile = computed(() => {
+      return $store.getters['app/getIsMobile']
+    })
+
+    onMounted(function () {
+      getManifest(manifestUrl)
+    })
 
     const getManifest = function (url, callback = false) {
       // IF modelsManifest already exists, then call callback
@@ -353,292 +341,69 @@ export default {
         })
     }
 
-    // Read default uncertainty color from store
-    const seColor = computed(() => {
-      return $store.getters['app/getUncertaintyColor']
-    })
-
-    const models = computed(() => {
-      return $store.getters['app/getModels']
-    })
-
-    const vectorOptions = computed(() => {
-      return [
-        { code: 'albopictus', type: trans('Tiger mosquito') },
-        { code: 'aegypti', type: trans('Yellow fever mosquito') },
-        { code: 'japonicus', type: trans('Japonicus mosquito') },
-        { code: 'koreicus', type: trans('Koreicus mosquito') },
-        { code: 'culex', type: trans('Culex mosquito') },
-        { code: 'biting', type: trans('Bites') }
-      ]
-    })
-
     const trans = function (text) {
       return $store.getters['app/getText'](text)
     }
 
+    const callFirstMapCall = function () {
+      context.emit('firstMapCall', {})
+    }
+
     // Called when TOC is toggled
     const toggleLeftDrawer = function () {
       context.emit('toggleLeftDrawer', {})
     }
 
-    const mobile = computed(() => {
-      return $store.getters['app/getIsMobile']
-    })
-
-    const dateSelected = computed(() => {
-      return modelDate.value !== null
-    })
-
-    // Called when calendar is clicked
-    const checkValue = function (val, reason, details) {
-      showLegend.value = false
-      context.emit('clearModel')
-      if (reason === 'month') {
-        modelDate.value = val
-        inputDate.value = val
-        monthPicker.value.hide()
-        $store.commit('map/setModelDate', inputDate.value)
-      }
-      disabled.value = (!modelVector.value || !inputDate.value)
-      if (inputDate.value) {
-        disabledInfo.value = false
-      }
-    }
-
-    // Called when model is selected
-    const filterModels = function () {
-      showLegend.value = false
-      context.emit('clearModel')
-
-      context.emit('filterObservations', {
-        type: modelVector.value.type,
-        code: modelVector.value.code
-      })
-
-      // Check if selected models is available. if not clear modelDate
-      // startingModelDate.value = modelsManifest[modelVector.value.code].year + '/01'
-      startingModelDate.value = modelsManifest[modelVector.value.code].fromYear + '/' + modelsManifest[modelVector.value.code].fromMonth
-      getLastDate.value = modelsManifest[modelVector.value.code].toYear + '/' + modelsManifest[modelVector.value.code].toMonth
-      if (modelDate.value) {
-        const selected = parseInt(modelDate.value.slice(-4))
-        const previous = parseInt(startingModelDate.value.substring(0, 4))
-        if (previous > selected) {
-          inputDate.value = null
-          modelDate.value = null
-        }
-      }
-
-      if (modelVector.value && inputDate.value) {
-        disabled.value = false
-      } else {
-        disabled.value = true
-      }
-    }
-
-    // Called when apply button is clicked
-    const applyfilter = async function () {
-      if (inputDate.value === null || !modelVector.value) {
-        $store.commit('app/setModal', { id: 'error', content: { visibility: true, msg: 'Must select model first' } })
-      } else {
-        const parts = inputDate.value.split('/')
-        const serverModels = $store.getters['app/getModelsUrl']
-        const selectedModel = modelVector.value.code
-        const urls = [
-          serverModels + `gadm1/${selectedModel}/${parts[1]}/${parts[0]}/` + 'gadm1_monthly.csv',
-          serverModels + `gadm2/${selectedModel}/${parts[1]}/${parts[0]}/` + 'gadm2_monthly.csv',
-          serverModels + `gadm3/${selectedModel}/${parts[1]}/${parts[0]}/` + 'gadm3_monthly.csv',
-          serverModels + `gadm4/${selectedModel}/${parts[1]}/${parts[0]}/` + 'gadm4_monthly.csv'
-        ]
-        // Add grid (2km x 2km) layer based on manifest
-        if (modelsManifest[selectedModel].cell === 'true') {
-          urls.push(serverModels + `sampling_cells_025/${selectedModel}/${parts[1]}/${parts[0]}/` + 'sampling_cells_025_monthly.csv')
-        }
-        const centroidsUrls = [
-          backendUrl + 'media/centroids/gadm1_centroid.json',
-          backendUrl + 'media/centroids/gadm2_centroid.json',
-          backendUrl + 'media/centroids/gadm3_centroid.json',
-          backendUrl + 'media/centroids/gadm4_centroid.json'
-        ]
-        const estimationPalettes = $store.getters['app/getEstimationPalettes']
-
-        // Prepare payload to update store
-        const payload = {
-          vector: selectedModel,
-          year: parts[1],
-          month: parts[0],
-          estimation: estimation.value,
-          uncertainty: uncertainty.value,
-          estimationTransparency: estimationTransparency.value,
-          estimationOpacity: 1 - (estimationTransparency.value / 100),
-          uncertaintyTransparency: uncertaintyTransparency.value,
-          uncertaintyOpacity: 1 - (uncertaintyTransparency.value / 100),
-          uncertaintyColor: uncertaintyColor.value,
-          estimationColors: estimationColors,
-          estimationPalettes: estimationPalettes,
-          modelsCsv: urls,
-          centroidsUrls: centroidsUrls
-        }
-        $store.commit('app/setModelDefaults', payload)
-        context.emit('loadModel', payload)
-        if (mobile.value) {
-          toggleLeftDrawer()
-        }
-        disabled.value = true
-        showLegend.value = true
-      }
-    }
-
-    const showCalendar = function () {
-      modelsCalendar.value.$el.click()
-    }
-
-    const checkEstimation = function () {
-      context.emit('checkModelEstimation', { status: estimation.value })
-    }
-
-    const checkUncertainty = function () {
-      context.emit('checkModelUncertainty', { status: uncertainty.value })
-    }
-
-    const errorDownloadingModels = function () {
-      showLegend.value = false
-    }
-
-    // Update UI when loading a model from a shared view
-    const loadSharedModel = async function (payload) {
-      estLegendColors.value = payload.estimationColors
-      modelVector.value = payload.vector
-      inputDate.value = payload.month + '/' + payload.year
-      modelDate.value = inputDate.value
-      estimation.value = payload.estimation
-      uncertainty.value = payload.uncertainty
-      uncertaintyColor.value = payload.uncertaintyColor
-      estimationTransparency.value = payload.estimationTransparency
-      uncertaintyTransparency.value = payload.uncertaintyTransparency
-      estimationColors = payload.estimationColors
-      // applyfilter as a callback after modelsManifest is downloaded
-      getManifest(manifestUrl, applyfilter)
-    }
-
-    const setEstimationTransparency = function () {
-      // 0 - 100 slider values
-      context.emit('estimationTransparency', { transparency: estimationTransparency.value })
-    }
-
-    const setUncertaintyTransparency = function () {
-      context.emit('uncertaintyTransparency', { transparency: uncertaintyTransparency.value })
-    }
-
-    function hexToRgb (hex) {
-      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-      const c = result ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-      } : null
-      return c ? `rgb(${c.r},${c.g},${c.b})` : null
-    }
-
-    const showPalettes = function () {
-      colorPickerEst.value.show()
-    }
-
-    const showPicker = function () {
-      colorPickerSe.value.show()
+    const goInfoModal = function () {
+      $store.commit('app/setModal', { id: 'info', content: { visibility: true, anchor: 'modeled_info' } })
     }
 
-    const setUncertaintyColor = function (e) {
-      colorPickerSe.value.hide()
-      uncertaintyColor.value = e
-      $store.commit('app/setUncertaintyColor', uncertaintyColor.value)
-      context.emit('uncertaintyColorsChanged')
+    const startShareView = function () {
+      context.emit('startShareView', {})
     }
 
-    const clickColor = function (event) {
-      let el = event.target
-      let idx = 0
-      while (el.previousElementSibling) {
-        idx += 1
-        el = el.previousElementSibling
+    // Called when calendar is clicked
+    const dateUpdated = function (val, reason, details) {
+      if (reason === 'month') {
+        localDate.value = new Date(details.year, details.month - 1)
+        // Once month is selected, hide the datePicker.
+        qDateProxy.value.hide()
       }
-      const p = $store.getters['app/getEstimationPalettes']
-      const index = Math.floor(idx / 6)
-      estimationColors = p[index]
-      estLegendColors.value = estimationColors
-      $store.commit('app/setEstimationColors', estimationColors)
-      colorPickerEst.value.hide()
-      context.emit('estimationColorsChanged')
     }
 
-    const goInfoModal = function () {
-      $store.commit('app/setModal', { id: 'info', content: { visibility: true, anchor: 'modeled_info' } })
+    const speciesCodeUpdated = function (value) {
+      localSpeciesCode.value = value
+      localDate.value = undefined
+      context.emit('speciesCodeChange', value)
     }
 
-    const startShareView = function () {
-      context.emit('startShareView', {})
+    const handleFilterChange = (value) => {
+      // Important, do { ...localFilter.value } to avoid passing a ProxyObject.
+      context.emit('filtersLazyChange', { ...localFilter.value })
     }
 
-    // Required to change lang on current selection
-    watch(vectorOptions, (cur, old) => {
-      if (modelVector.value) {
-        if (modelVector.value.code) {
-          const index = cur.findIndex(obj => {
-            return (obj.code === modelVector.value.code)
-          })
-          modelVector.value = cur[index]
-        }
-      }
-    })
-
     return {
-      trans,
-      errorDownloadingModels,
-      goInfoModal,
-      estLegendColors,
-      clickColor,
-      estimationColors,
-      startingModelDate,
-      palettes,
-      colorsTo,
-      seColor,
-      uncertaintyColor,
-      setUncertaintyColor,
-      showPalettes,
-      showPicker,
-      colorPickerEst,
-      colorPickerSe,
-      setEstimationTransparency,
-      setUncertaintyTransparency,
-      estimationTransparency,
-      uncertaintyTransparency,
-      loadSharedModel,
-      disabled,
-      disabledInfo,
-      showLegend,
-      legendCanvas,
-      checkEstimation,
-      checkUncertainty,
-      uncertainty,
-      estimation,
-      showCalendar,
-      modelsCalendar,
-      modelVector,
-      models,
+      qDateModel,
+      qDateProxy,
+      localSpeciesCode,
+      localDate,
+      localDateString,
+      localOpacity,
+      localVisible,
+      localFilter,
+      minYearMonthPickerValue,
+      maxYearMonthPickerValue,
+      formIsValid,
       vectorOptions,
       mobile,
-      dateSelected,
-      getLastDate,
-      modelDate,
-      inputDate,
-      monthPicker,
-      checkValue,
+      trans,
+      goInfoModal,
       toggleLeftDrawer,
-      applyfilter,
-      filterModels,
-      refInput,
       callFirstMapCall,
-      startShareView
+      startShareView,
+      dateUpdated,
+      speciesCodeUpdated,
+      handleFilterChange
     }
   }
 }
@@ -681,9 +446,6 @@ export default {
   color: white !important;
 }
 
-.models-calendar{
-  font-weight: 600;
-}
 .q-header,
 .q-drawer{
   width: $left-drawer-width;
@@ -730,10 +492,6 @@ div.flex-right{
 .flex{
   display:flex;
 }
-.spaceBetween{
-  justify-content: space-between;
-  align-items: center;
-}
 
 button.ma-btn{
   padding: 8px 10px;
@@ -847,10 +605,12 @@ input:checked + .cookie-comply-slider{
 }
 .toc-title-estimates{
   font-family: 'Roboto';
-  text-transform: Capitalize;
   font-weight: 700;
   color: #666666;
 }
+.toc-title-estimates::first-letter{
+  text-transform: uppercase;
+}
 .ma-close-btn::before{
   box-shadow: none;
 }
@@ -866,4 +626,15 @@ button.ma-close-btn:hover,
 .ma-close-btn:hover{
   opacity:0.7;
 }
+.title-shaded-box{
+  font-family: 'Roboto';
+  font-weight: 700;
+  color: #666666;
+  text-transform: uppercase;
+}
+.shaded-box{
+  border-radius: 5px;
+  background-color: $grey-color;
+  margin: 3px 0px;
+}
 </style>
diff --git a/src/components/LeftDrawerWms.vue b/src/components/LeftDrawerWms.vue
index 1491e18f..a310222e 100644
--- a/src/components/LeftDrawerWms.vue
+++ b/src/components/LeftDrawerWms.vue
@@ -13,7 +13,7 @@
     v-touch-swipe.mouse.left="toggleLeftDrawer"
   >
     <!-- Main menu -->
-    <left-menu item="wms"
+    <left-menu item="ew"
       @leftMenuMounted="callFirstMapCall"
       @startShareView="startShareView"
     />
@@ -26,21 +26,21 @@
         <q-btn :label="trans('Close')" class="ma-close-btn" @click="toggleLeftDrawer"/>
       </div>
       <div class="text-h5 toc-title-estimates">
-        {{ trans('Distribution') }}
+        {{ trans('Early warning') }}
       </div>
 
       <div>
         <div class="category-box q-my-md">
           <q-select
-            ref="qSelect"
             :label="trans('Select species')"
-            v-model="modelVector"
-            color="orange"
-            :label-color="modelVector?'orange':'rgba(0, 0, 0, 0.6)'"
+            :label-color="localSpeciesCode?'orange':'rgba(0, 0, 0, 0.6)'"
             :options="vectorOptions"
-            :option-value="'code'"
-            :option-label="'type'"
-            @update:model-value="getWMS"
+            option-value="code"
+            option-label="label"
+            color="orange"
+            emit-value
+            map-options
+            v-model="localSpeciesCode"
           />
           </div>
           <!-- INFO LINK -->
@@ -52,92 +52,40 @@
                       <i class="fa-thin fa-circle-info"></i>
                     </div>
                     <div class="q-ml-xs">
-                      {{ trans('Distribution data') }}
+                      {{ trans('Early warning data') }}
                     </div>
                   </div>
                 </div>
-                <!-- Not visible link. Required to export map image -->
-                <a id="image-download" download="map.png"></a>
               </div>
             <div>
             <!-- END INFO LINK -->
           </div>
-
         </div>
 
-        <!-- YEARS FOR SELECTED SPECIES -->
-        <div v-if="selectedLayers" class="wms-layers-container">
-          <hr class="q-my-xl"/>
-          <!-- Columns titles -->
-          <div class="row">
-            <div class="col-2"></div>
-            <div class="col-7 text-center q-px-md transparency-title">{{ trans('Transparency') }}</div>
-            <div class="col-3"></div>
-          </div>
-          <!-- DRAGGABLE LIST -->
-            <draggable
-              v-model="selectedLayers"
-              item-key="id"
-              ghost-class="ghost"
-              animation=450
-              handle=".handle"
-              @change="reorderLayers"
-            >
-              <template #item="{ element }">
-                <div class="flex row draggable-item">
-
-                  <div class="col-2 q-pl-sm">{{ element.year }}</div>
-
-                  <div class="col-5 q-pl-sm q-pr-xs">
-                    <q-slider
-                    :min="0"
-                    :max="1"
-                    :step="0.05"
-                    class="wms-slider"
-                    v-model="element.transparency"
-                    color="orange"
-                    @update:model-value="checkVisibility($event, element, 'transparency')"
-                    />
-                  </div>
-
-                  <div class="col-3">
-                    <!-- <q-checkbox
-                      dense
-                      checked-icon="check"
-                      v-model="element.visible"
-                      color="orange"
-                      size="lg"
-                      @update:model-value="checkVisibility($event, element, 'visible')"
-                    /> -->
-                    <q-toggle
-                      checked-icon="check"
-                      v-model="element.visible"
-                      @update:model-value="checkVisibility($event, element, 'visible')"
-                      color="orange"
-                      size="lg"/>
-                  </div>
-
-                  <div class="col-2 text-right flex justify-end">
-                    <div>
-                      <a @click.stop :href="buildDownloadUrl(element)">
-                        <i :title="trans('Download shp')" style="size:0.7em" class="fa-solid fa-download"></i>
-                      </a>
-                    </div>
-                    <div>
-                      <q-icon name="more_vert" class="handle" size="1.5em"/>
-                    </div>
-                  </div>
-
-                </div>
-              </template>
-            </draggable>
-        </div>
-        <!-- LEGEND -->
-        <div v-if="selectedLayers" class="wms-legend" >
-          <div class="legend-title q-mt-lg q-mb-md">{{ trans('Legend') }}</div>
-          <div class="q-mt-lg">
-            <img :src="legendImageSource">
+        <!-- LAYER CONTROLS -->
+        <div v-show="localSpeciesCode">
+          <hr class="q-my-lg"/>
+          <div class="title-shaded-box">{{ trans('Layer controls') }}</div>
+          <div class="row shaded-box q-pa-sm">
+            <div class="col-9 q-pr-md">
+              <div class="row">
+                <q-badge :outline="!localVisible" color="orange">
+                  {{ trans('Opacity') }}
+                </q-badge>
+              </div>
+              <q-slider
+                v-model="localOpacity"
+                :min="0"
+                :max="1"
+                :step="0.05"
+                color="orange"
+                label
+                />
+            </div>
+            <q-toggle class="col" checked-icon="check" v-model="localVisible" color="orange" size="lg"/>
           </div>
+          <!-- LEGEND -->
+          <div id="legend" class="q-pt-md" style="position: relative;" :hidden="!localVisible"></div>
         </div>
       </div>
     </div>
@@ -145,71 +93,69 @@
 </template>
 
 <script>
-import { watch, computed, onMounted, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import LeftMenu from 'components/LeftMenu.vue'
-import draggable from 'vuedraggable'
-// import { wmsSelectedLayers } from 'src/store/app/getters'
 
 export default {
-  components: { LeftMenu, draggable },
-  props: ['expanded'],
+  components: { LeftMenu },
+  props: {
+    expanded: {
+      type: Boolean,
+      default: true
+    },
+    speciesCode: {
+      type: String
+    },
+    opacity: {
+      type: Number,
+      default: 1
+    },
+    visible: {
+      type: Boolean,
+      default: true
+    }
+  },
   emits: [
     'firstMapCall',
     'toggleLeftDrawer',
-    'loadWms',
-    'layerVisibleChange',
-    'reorderLayers',
-    'exportImage'
+    'speciesCodeChange',
+    'opacityChange',
+    'visibilityChange'
   ],
   setup (props, context) {
     const $store = useStore()
-    const disabled = ref(true)
-    const disabledInfo = ref(true)
-    const modelVector = ref()
-    const qSelect = ref()
-    let currentView
-    const selectedLayers = ref()
 
-    const WMS = computed(() => {
-      return JSON.parse(JSON.stringify($store.getters['app/getWmsData']))
+    const localSpeciesCode = ref(props.speciesCode)
+    watch(localSpeciesCode, (newValue) => {
+      context.emit('speciesCodeChange', newValue)
     })
 
-    onMounted(function () {
-      currentView = JSON.parse(JSON.stringify($store.getters['app/getCurrentWMSView']))
-      if ('code' in currentView) {
-        const index = vectorOptions.value.findIndex(obj => {
-          return (obj.code === currentView.code)
-        })
-        modelVector.value = vectorOptions.value[index]
-        getWMS(currentView)
-      }
+    const localVisible = ref(props.visible)
+    watch(localVisible, (newValue) => {
+      context.emit('visibilityChange', newValue)
+    })
+
+    const localOpacity = ref(props.opacity)
+    watch(localOpacity, (newValue) => {
+      context.emit('opacityChange', newValue)
     })
 
     const vectorOptions = computed(() => {
       return [
-        { code: 'tiger', type: trans('Tiger mosquito'), disable: !WMS.value.tiger },
-        { code: 'yellow', type: trans('Yellow fever mosquito'), disable: !WMS.value.yellow },
-        { code: 'japonicus', type: trans('Japonicus mosquito'), disable: !WMS.value.japonicus },
-        { code: 'koreicus', type: trans('Koreicus mosquito'), disable: !WMS.value.koreicus },
-        { code: 'culex', type: trans('Culex mosquito'), disable: !WMS.value.culex }
+        // Code is the MVT property
+        { code: 'albopictus', label: trans('Tiger mosquito') },
+        { code: 'aegypti', label: trans('Yellow fever mosquito') },
+        { code: 'japonicus', label: trans('Japonicus mosquito') },
+        { code: 'koreicus', label: trans('Koreicus mosquito') }
       ]
     })
 
-    // // Get rid off reactiveness
-    const legendImageSource = computed(() => {
-      const data = JSON.parse(JSON.stringify($store.getters['app/legendData']))
-      const lang = $store.getters['app/getLang']
-      const geoserverUrl = data.wms_url
-      const layerName = data.layer
-      const widthSize = 40
-      const heightSize = 30
-      const fontName = 'Roboto'
-      const fontSize = '16px'
-
-      return `${geoserverUrl}?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=${widthSize}&HEIGHT=${heightSize}&LAYER=${layerName}&LANGUAGE=${lang}&LEGEND_OPTIONS=fontName:${fontName};fontSize:${fontSize};fontAntiAliasing:false`
+    const mobile = computed(() => {
+      return $store.getters['app/getIsMobile']
     })
 
+    // Get rid off reactiveness
     const callFirstMapCall = function () {
       context.emit('firstMapCall', {})
     }
@@ -223,143 +169,36 @@ export default {
       context.emit('toggleLeftDrawer', {})
     }
 
-    const mobile = computed(() => {
-      return $store.getters['app/getIsMobile']
-    })
-
-    // Called when model is selected
-    const getWMS = function (formValue) {
-      const code = formValue.code
-      selectedLayers.value = WMS.value[code]
-
-      $store.commit('app/setCurrentWMSView', {
-        code: code,
-        years: JSON.parse(JSON.stringify(WMS.value[code]))
-      })
-      context.emit('loadWms', WMS.value[code])
-    }
-
     const goInfoModal = function () {
-      $store.commit('app/setModal', { id: 'info', content: { visibility: true, anchor: 'wms_info' } })
+      $store.commit('app/setModal', { id: 'info', content: { visibility: true, anchor: 'earlyWarning_info' } })
     }
 
     const startShareView = function () {
-      if (!modelVector.value) {
+      if (!localSpeciesCode.value) {
         $store.commit('app/setModal', {
           id: 'error',
           content: {
             visibility: true,
-            msg: 'Must select wms first'
+            msg: 'Must select a species first'
           }
         })
-        context.emit('endShareView', {
-          error: 'Shareview error. No WMS is loaded',
-          visibility: true,
-          url: ''
-        })
       } else {
-      // Prepare WMS data.
-        const layersJSON = JSON.parse(JSON.stringify(selectedLayers.value))
-        // const visibleLayers = layersJSON.filter((layer) => {
-        //   return layer.visible === true
-        // })
         const payload = {
-          species: modelVector.value.code,
-          layers: layersJSON
+          speciesCode: localSpeciesCode.value
         }
         context.emit('startShareView', payload)
       }
     }
 
-    // Required to change lang on current selection
-    watch(vectorOptions, (cur, old) => {
-      if (modelVector.value) {
-        if (modelVector.value.code) {
-          const index = cur.findIndex(obj => {
-            return (obj.code === modelVector.value.code)
-          })
-          modelVector.value = cur[index]
-        }
-      }
-    })
-
-    const checkVisibility = function (e, layer, property) {
-      const selectedSpecies = modelVector.value.code
-      // WMS.value[selectedSpecies] = JSON.parse(JSON.stringify(selectedLayers.value))
-      $store.commit('app/setWMSLayers', {
-        species: selectedSpecies,
-        layers: JSON.parse(JSON.stringify(selectedLayers.value))
-      })
-
-      $store.commit('app/setWmsProperties', {
-        id: layer.id,
-        property: property,
-        value: e,
-        species: selectedSpecies
-      })
-
-      context.emit('layerChange', {
-        key: property,
-        layerId: layer.id,
-        value: e
-      })
-    }
-
-    const reorderLayers = function () {
-      const selectedSpecies = modelVector.value.code
-      $store.commit('app/setWMSLayers', {
-        species: selectedSpecies,
-        layers: JSON.parse(JSON.stringify(selectedLayers.value))
-      })
-      context.emit('reorderLayers',
-        JSON.parse(JSON.stringify(selectedLayers.value))
-      )
-    }
-
-    const setForm = function (view) {
-      const index = vectorOptions.value.findIndex(obj => {
-        return (obj.code === view.species)
-      })
-      modelVector.value = vectorOptions.value[index]
-      // override wms from shared view
-      WMS[view.species] = view.layers
-      selectedLayers.value = view.layers
-      $store.commit('app/setWMSLayers', {
-        species: view.species,
-        layers: view.layers
-      })
-      getWMS({ code: view.species })
-    }
-
-    const exportImage = function () {
-      console.log('emit')
-      context.emit('exportImage', {})
-    }
-
-    const buildDownloadUrl = (element) => {
-      const downLink = `${element.wms_url}?service=WFS&version=1.0.0&request=GetFeature&typeName=${element.layer}&outputFormat=SHAPE-ZIP`
-      console.log(downLink)
-      return downLink
-      // https://mapserver.mosquitoalert.com/geoserver/mosquitoalert/wms?service=WFS&version=1.0.0&request=GetFeature&typeName=mosquitoalert%3Astatus_2303_shp&outputFormat=SHAPE-ZIP
-    }
     return {
-      trans,
-      buildDownloadUrl,
-      exportImage,
-      selectedLayers,
-      legendImageSource,
-      setForm,
-      reorderLayers,
-      qSelect,
-      checkVisibility,
-      goInfoModal,
-      disabled,
-      disabledInfo,
-      modelVector,
+      localSpeciesCode,
+      localVisible,
+      localOpacity,
       vectorOptions,
       mobile,
+      trans,
+      goInfoModal,
       toggleLeftDrawer,
-      getWMS,
       callFirstMapCall,
       startShareView
     }
@@ -498,23 +337,11 @@ div.flex-right{
 }
 .toc-title-estimates{
   font-family: 'Roboto';
-  text-transform: Capitalize;
   font-weight: 700;
   color: #666666;
 }
-.wms-layers-container{
-  margin-top: 20px;
-  // padding: 10px;
-  color: $dark-grey;
-  // border: 1px solid $grey-color;
-}
-.wms-layers-item{
-  display: flex;
-  vertical-align: bottom;
-  align-content: stretch;
-  flex-wrap: nowrap;
-  flex-direction: row;
-  margin: 3px 0px;
+.toc-title-estimates::first-letter{
+  text-transform: uppercase;
 }
 .flex-expand{
   flex-grow: 1;
@@ -526,21 +353,16 @@ div.flex-right{
   opacity:0;
   cursor: move;
 }
-.draggable-item{
+.layer-controller{
   padding: 0px 0px;
   border-radius: 5px;
   background-color: $grey-color;
   margin: 3px 0px;
 }
-.draggable-item:hover .handle{
+.layer-controller:hover .handle{
   opacity:1
 }
-.legend-title{
-  display: none;
-}
-.wms-slider {
-  height: 2px;
-}
+
 .transparency-title{
   color: black;
 }
@@ -551,4 +373,15 @@ div.flex-right{
   cursor: pointer;
   color: #ff9800 ;
 }
+.title-shaded-box{
+  font-family: 'Roboto';
+  font-weight: 700;
+  color: #666666;
+  text-transform: uppercase;
+}
+.shaded-box{
+  border-radius: 5px;
+  background-color: $grey-color;
+  margin: 3px 0px;
+}
 </style>
diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index a00417b7..55eac36d 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -16,27 +16,27 @@
         name="fa-thin fa-map-location-dot"
         :label="trans('Reports')"
         :class="active_item=='layers'?'active':''"
-        link="/"
+        route-name="reports"
         item="reports"
         id="reports"
       >
       </fa-thin-button-router>
 
       <fa-thin-button-router
-        name="fa-thin fa-layer-group"
-        :label="trans('Distribution')"
-        :class="(wmsVisibility?(active_item=='wms'?'active':''):'disabled')"
-        link="/distribution"
-        item="wms"
-        id="wms"
+        name="fa-thin fa-triangle-exclamation"
+        :label="trans('Early warning')"
+        :class="active_item=='ew'?'active':''"
+        route-name="early_warning"
+        item="ew"
+        id="ew"
       >
       </fa-thin-button-router>
 
       <fa-thin-button-router
-        name="fa-thin fa-chart-scatter"
-        :label="trans('Estimates')"
-        :class="(estimationsVisibility?(active_item=='models'?'active':''):'disabled')"
-        link="/models"
+        name="fa-thin fa-chart-mixed"
+        :label="trans('Encounter probability')"
+        :class="active_item=='models'?'active':''"
+        route-name="models"
         item="models"
         id="estimations"
       >
@@ -69,7 +69,6 @@
         <div class="lang-wrapper">
           <div class="lang-container">
             <a v-for="item in LANGS" :key="item.code"
-              href="#"
               :id="item.code"
               class="main-menu-item"
               :class="lang==item.code?'menuItem active':'menuItem'" @click.prevent="clickLanguageSelector(item.code, $event)" ref="item.code">
@@ -98,6 +97,7 @@ import FaThinButton from 'components/FaThinButton.vue'
 import FaThinButtonRouter from 'components/FaThinButtonRouter.vue'
 import FaThinButtonMenu from 'components/FaThinButtonMenu.vue'
 import { useCookies } from 'vue3-cookies'
+import { useRoute, useRouter } from 'vue-router'
 
 export default {
   components: { FaThinButton, FaThinButtonRouter, FaThinButtonMenu },
@@ -125,6 +125,9 @@ export default {
     const $store = useStore()
     const LANGS = $store.getters['app/getAllowedLangs']
 
+    const router = useRouter()
+    const route = useRoute()
+
     const trans = function (text) {
       return $store.getters['app/getText'](text)
     }
@@ -154,24 +157,26 @@ export default {
     })
 
     const clickLanguageSelector = (lang, event) => {
-      let object = event.target
-      const nextURL = $store.getters['app/getFrontendUrl'] + lang
-      const nextTitle = 'MosquitoAlert'
-      const nextState = { additionalInformation: 'Updated the URL with JS' }
-      window.history.pushState(nextState, nextTitle, nextURL)
-      window.history.replaceState(nextState, nextTitle, nextURL)
-
-      if (!object.classList.contains('menuItem')) object = object.parentNode
-      setLanguage(lang, object)
+      setLanguage(lang, event.target)
     }
 
     const setLanguage = async function (lang, object) {
+      router.push({
+        params: {
+          ...route.params,
+          lang: lang
+        },
+        query: route.query
+      })
+
       await $store.dispatch('app/setInitData', lang)
       cookies.set('lang', lang)
-      object.parentNode.querySelectorAll('.menuItem').forEach(item => {
-        item.classList.remove('active')
-      })
-      object.classList.add('active')
+      if (object) {
+        object.parentNode.querySelectorAll('.menuItem').forEach(item => {
+          item.classList.remove('active')
+        })
+        object.classList.add('active')
+      }
       // NASTY
       let qLang = lang
       if (qLang === 'en') qLang = 'en-US'
@@ -182,27 +187,10 @@ export default {
 
     onMounted(async function () {
       lang.value = $store.getters['app/getLang']
+      setLanguage(lang.value)
       context.emit('leftMenuMounted', {})
     })
 
-    const wmsVisibility = computed(() => {
-      const tabs = $store.getters['app/getLeftMenuTabs']
-      if (Object.keys(tabs).length) {
-        return (tabs.distribution) ? tabs.distribution.active : false
-      } else {
-        return false
-      }
-    })
-
-    const estimationsVisibility = computed(() => {
-      const tabs = $store.getters['app/getLeftMenuTabs']
-      if (Object.keys(tabs).length) {
-        return (tabs.estimates) ? tabs.estimates.active : false
-      } else {
-        return false
-      }
-    })
-
     const frontendUrl = computed(() => {
       return $store.getters['app/getFrontendUrl']
     })
@@ -221,8 +209,6 @@ export default {
 
     return {
       trans,
-      wmsVisibility,
-      estimationsVisibility,
       loginLabel,
       lang,
       LANGS,
diff --git a/src/components/ModalInfo.vue b/src/components/ModalInfo.vue
index 6573c38b..599d3948 100644
--- a/src/components/ModalInfo.vue
+++ b/src/components/ModalInfo.vue
@@ -168,10 +168,10 @@
                     <a target="blank" href="https://www.nature.com/articles/s41467-017-00914-9">https://www.nature.com/articles/s41467-017-00914-9</a>-->
                     <q-separator size="1"/>
                     <!-- WMS INFO -->
-                    <a id="wms_info" class="q-py-md"></a>
+                    <a id="earlyWarning_info" class="q-py-md"></a>
                     <p></p>
                     <div class="text-subtitle1 q-my-md">
-                      {{ trans('Distribution data') }}
+                      {{ trans('Early warning data') }}
                     </div>
                     <p>{{ trans('The-distribution-maps-provide-information-about-th') }}</p>
                     <p>{{ trans('For-invasive-species-the-possible-distribution-sta') }}</p>
diff --git a/src/components/TheMap.vue b/src/components/TheMap.vue
index d608c7fd..1d5c16d8 100644
--- a/src/components/TheMap.vue
+++ b/src/components/TheMap.vue
@@ -43,7 +43,7 @@
         <ol-view ref='view'
             :maxResolution=39135.75848201024
             :constrainResolution=true
-            :multiWorld=true
+            :multiWorld=false
             :maxZoom=19
             :center='center'
             :zoom='zoom' />
@@ -64,14 +64,10 @@
           </div>
         </div>
         <!-- base map -->
-        <ol-tile-layer ref='baseMap' title='mapbox' :zIndex=0>
+        <ol-tile-layer ref='baseMap' title='mapbox' :zIndex=0 :preload="Infinity">
           <ol-source-osm />
         </ol-tile-layer>
 
-        <!-- SAMPLING EFFORT -->
-        <ol-tile-layer ref='samplingEffortLayer' name="samplingEffortLayer">
-        </ol-tile-layer>
-
         <!-- ADMINISTRATIVE LIMITS LAYER -->
         <ol-vector-layer ref='locationLayer' name="locationLayer" :zIndex=5>
           <ol-source-vector :features="locationFeatures" :format='geoJson'>
diff --git a/src/components/TheMapModels.vue b/src/components/TheMapModels.vue
index f063f2d0..77933f21 100644
--- a/src/components/TheMapModels.vue
+++ b/src/components/TheMapModels.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <div id='mapa' class='bg-white'>
+  <div id='mapa'>
     <q-linear-progress :value="progress" color="orange" class="progress-bar-absolute"  v-if="progress>0 && progress<100"/>
     <q-btn v-if="mobile"
       class="drawer-handler-mobile"
@@ -16,18 +16,18 @@
     <ol-map ref='map'
       :loadTilesWhileAnimating='true'
       :loadTilesWhileInteracting='true'
-      @movestart='hideSpinner'
-      @moveend='updateMap'
+      @moveend="positionChange"
       style='height:100%'>
-
         <ol-zoom-control :duration='600' />
+        <ol-scaleline-control />
         <ol-view ref='view'
-            :multiWorld=true
-            :maxZoom=19
-            :maxResolution=39135.75848201024
-            :center='center'
-            :zoom='zoom'
-            :constrainResolution='true' />
+          :center="center"
+          :maxZoom=12
+          :multiWorld=false
+          :zoom="zoom"
+          :projection="projection"
+          :constrainResolution='true'
+          />
 
         <div
           class="ol-attribution"
@@ -35,6 +35,7 @@
         >
           <div v-if="!mobile || attrVisible">
             © <a href="https://www.openstreetmap.org/copyright/" target="_blank">OpenStreetMap</a> contributors
+            | <a href="https://gadm.org/" target="_blank">© GADM</a>
             | <a href="https://openlayers.org" target="_blank">OpenLayers</a>
           </div>
           <div v-if="mobile"
@@ -45,80 +46,95 @@
           </div>
         </div>
         <!-- base map -->
-        <ol-tile-layer ref='baseMap' title='mapbox' :zIndex=0>
+        <ol-tile-layer ref='baseMap' :zIndex=0>
           <ol-source-osm />
-            <!-- <ol-source-xyz
-              crossOrigin='anonymous'
-              url='https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwZXNiYXNlc2lndGUiLCJhIjoiY2wxbHRmZXliMDlkeDNrcG40dm14OWZmNiJ9.UFRSz8T_c4riZkH3CyGgBQ' /> -->
         </ol-tile-layer>
-
     </ol-map>
   </div>
 </template>
 
 <script>
 import 'vue3-openlayers/dist/vue3-openlayers.css'
-import { defineComponent, ref, computed, onMounted } from 'vue'
+import { defineComponent, ref, computed, onMounted, watch } from 'vue'
 import { useStore } from 'vuex'
-import { transform } from 'ol/proj.js'
+import { toLonLat, fromLonLat } from 'ol/proj.js'
 import MVT from 'ol/format/MVT'
 import VectorTileLayer from 'ol/layer/VectorTile'
 import VectorTileSource from 'ol/source/VectorTile'
 import { Style, Fill, Stroke } from 'ol/style'
 import { Group as LayerGroup } from 'ol/layer'
-import moment from 'moment'
-import { GeojsonFromCsv } from '../js/GeojsonFromCsv.js'
-import GridModelLayer from '../js/GridModelLayer'
-import ShareMapView from '../js/ShareMapView'
-import { StatusCodes as STATUS_CODES } from 'http-status-codes'
+import Feature from 'ol/Feature'
+import Tooltip from 'ol-ext/overlay/Tooltip'
+import Hover from 'ol-ext/interaction/Hover'
+
 import axios from 'axios'
 
 export default defineComponent({
   name: 'TheMapModels',
   emits: [
     'toggleLeftDrawer',
-    'endShareView',
-    'setModelDate',
-    'loadSharedModel'
+    'move'
   ],
-  props: ['viewCode'],
+  props: ['speciesCode', 'date', 'opacity', 'visible', 'displayChoropleth', 'palette', 'filters', 'lat', 'lon', 'zoom'],
   setup (props, context) {
+    const $store = useStore()
+
     const map = ref('null')
-    const requestTimeoutMs = 20000
+    const leftDrawerIcon = ref('null')
+
     const progress = ref(0)
-    const baseMap = ref('null')
     const attrVisible = ref(false)
     const foldingIcon = ref('<')
-    const leftDrawerIcon = ref('null')
-    const $store = useStore()
+
+    const projection = ref('EPSG:3857')
+
     let CSVS = {}
-    const CENTROIDS = {}
-    // let mySession
-    const GADM1 = 'gadm1'
-    const GADM2 = 'gadm2'
-    const GADM3 = 'gadm3'
-    const GADM4 = 'gadm4'
-    const backendUrl = $store.getters['app/getBackend']
-    let estModelLayer
-    let seModelLayer
-    let seModelLayer1
-    let seModelLayer2
-    let seModelLayer3
-    let seModelLayer4
-    let ol
-    let gadm4MaxZoom
-    let dataGridGeojson
-    const RANGS = [0.16, 0.32, 0.48, 0.65, 0.82, 1]
-    $store.commit('map/selectFeature', {})
 
-    // Map general configuration
-    const zoom = computed(() => {
-      return mobile.value ? $store.getters['map/getCurrents'].MOBILEZOOM : $store.getters['map/getCurrents'].ZOOM
+    const hoverSelectedFeatureId = ref()
+    watch(hoverSelectedFeatureId, (newValue, oldValue) => {
+      selectableGadmLayers.forEach(function (layer) {
+        layer.changed()
+      })
     })
 
+    // Watcher for props
+    watch(() => [props.speciesCode, props.date], ([newSpeciesCode, newDate]) => {
+      if ([newSpeciesCode, newDate].every(item => item !== undefined)) {
+        loadLayer(newSpeciesCode, newDate)
+      }
+    })
+
+    watch(() => props.displayChoropleth, (newValue, oldValue) => {
+      modelsLayerGroup.setVisible(newValue && props.visible)
+    })
+
+    watch(() => props.opacity, (newValue, oldValue) => {
+      modelsLayerGroup.setOpacity(newValue)
+      gadm0.setOpacity(newValue)
+
+      // Disable hover if opacity is less than 25%
+      baseGadmHoverInteraction.setActive(newValue >= 0.25)
+    })
+
+    watch(() => props.visible, (newValue, oldValue) => {
+      modelsLayerGroup.setVisible(newValue)
+      gadm0.setVisible(newValue)
+    })
+
+    watch(() => props.filters, () => {
+      refresh()
+    }, { deep: true })
+
+    const mapStyleColor = ref({
+      lowLevelStroke: '#C9C9C9',
+      highLevelStroke: '#B9B9B9',
+      background: '#aad3df', // Sea color
+      unknown: '#E1E1E1'
+    })
+
+    // Map general configuration
     const center = computed(() => {
-      const center = $store.getters['map/getCurrents'].CENTER
-      return transform(center, 'EPSG:4326', 'EPSG:3857')
+      return fromLonLat([props.lon, props.lat], projection.value)
     })
 
     const mobile = computed(() => {
@@ -126,7 +142,6 @@ export default defineComponent({
     })
 
     const properties = $store.getters['app/getModelsProperties']
-    const models = JSON.parse(JSON.stringify($store.getters['app/getModels']))
     const jsonProperties = JSON.parse(JSON.stringify(properties))
 
     const toggleLeftDrawer = function () {
@@ -144,135 +159,97 @@ export default defineComponent({
     }
 
     onMounted(function () {
-      ol = map.value.map
       leftDrawerIcon.value = 'keyboard_arrow_left'
-      // const paramViewCode = (props.viewCode) ? props.viewCode : null
-      // if (paramViewCode) {
-      //   loadView(map.value.map, 'M-' + paramViewCode)
-      // }
-    })
 
-    const trans = function (text) {
-      return $store.getters['app/getText'](text)
-    }
+      // Adding base layer (gadm0)
+      map.value.map.addLayer(gadm0)
 
-    const shareViewUrl = backendUrl + 'view/save/'
-    const loadViewUrl = backendUrl + 'view/load/'
-
-    // Call when user shares view
-    function shareModelView () {
-      const modelData = JSON.parse(JSON.stringify($store.getters['app/getModelDefaults']))
-      if (!modelData.vector || !modelData.year) {
-        const content = {
-          error: 'Share view error. No model is loaded',
-          visibility: true,
-          url: ''
-        }
-        $store.commit('app/setModal', {
-          id: 'share',
-          content: content
-        })
-        context.emit('endShareView', content)
-        return
+      // Adding gadm probability model layers.
+      map.value.map.addLayer(modelsLayerGroup)
+
+      addTooltip(map.value.map)
+
+      // This should be in <ol-map>, but current vue3-openlayers version
+      // does not support these events.
+      map.value.map.on('rendercomplete', () => {
+        spinner(false)
+      })
+
+      if ([props.speciesCode, props.date].every(item => item !== undefined)) {
+        loadLayer(props.speciesCode, props.date)
       }
+    })
 
-      // After mapview is shared then handle it
-      const newView = new ShareMapView(ol, {
-        viewType: 'models',
-        csrfToken: $store.getters['app/getCsrfToken'],
-        filters: {
-          vector: modelData.vector,
-          year: modelData.year,
-          month: modelData.month,
-          estimation: modelData.estimation,
-          uncertainty: modelData.uncertainty,
-          estimationTransparency: modelData.estimationTransparency,
-          uncertaintyTransparency: modelData.uncertaintyTransparency,
-          uncertaintyColor: modelData.uncertaintyColor,
-          estimationColors: $store.getters['app/getEstimationColors']
+    const addTooltip = (map) => {
+      // Displaying tooltip
+      const tooltip = new Tooltip({
+        // Function to display information about the hovered feature
+        getHTML: function (feature, info) {
+          if (feature !== undefined) {
+            // Get the title of the feature
+            const title = feature.get(
+              // Find the attribute keys starting with 'NAME_' and select the most detailed one (highest number)
+              feature.getKeys().filter(item => item.startsWith('NAME_')).sort((a, b) => b.localeCompare(a))[0]
+            ).trim()
+
+            // Show tooltip only if the title is not 'n.a.' (indicating no info available)
+            if (!(title.toLowerCase().startsWith('n.a.') || title.toLowerCase() === 'na')) {
+              return title
+            }
+          }
         },
-        url: shareViewUrl,
-        callback: handleShareView
+        positioning: 'center-center',
+        offsetBox: [0, -15]
       })
-      newView.save()
-    }
+      map.addOverlay(tooltip)
+
+      // Add hover interaction
+      map.addInteraction(baseGadmHoverInteraction)
 
-    // Handle shared view
-    function handleShareView (status) {
-      let content
-      if (status.status !== STATUS_CODES.OK) {
-        content = {
-          error: status.msg,
-          visibility: true,
-          url: ''
+      baseGadmHoverInteraction.on('change:active', function (e) {
+        // hide tooltip on hover disabled.
+        if (e.target.get(e.key) === false) {
+          tooltip.hide()
+          tooltip.removeFeature()
         }
-        $store.commit('app/setModal', {
-          id: 'share',
-          content: content
-        })
-      } else {
-        const frontend = $store.getters['app/getFrontendUrl']
-        content = {
-          url: frontend + status.code + '/' + $store.getters['app/getLang'],
-          visibility: true,
-          error: ''
+      })
+
+      baseGadmHoverInteraction.on('hover', function (e) {
+        tooltip.setFeature(e.feature)
+
+        const featureHasChanged = (e.feature.getId() !== hoverSelectedFeatureId.value)
+
+        if (featureHasChanged) {
+          // Replace hoverSelectedFeatureId
+          hoverSelectedFeatureId.value = e.feature.getId()
         }
-        $store.commit('app/setModal', {
-          id: 'share',
-          content: content
-        })
-      }
-      context.emit('endShareView', content)
-    }
+      })
+
+      baseGadmHoverInteraction.on('leave', function (e) {
+        // Hide tooltip if no feature is hovered
+        tooltip.removeFeature()
+        tooltip.hide()
 
-    // Load shared view. Get data from database and then handle it
-    function loadView (viewCode) {
-      const newView = new ShareMapView(map.value.map, {
-        url: loadViewUrl + viewCode + '/',
-        csrfToken: $store.getters['app/getCsrfToken']
+        // Reset hoverSelectedFeatureId
+        hoverSelectedFeatureId.value = undefined
       })
-      newView.load(handleLoadView)
     }
 
-    // Handle shared view
-    function handleLoadView (response) {
-      // Check status response
-      if (response.status !== STATUS_CODES.OK) {
-        $store.commit('app/setModal', {
-          id: 'error',
-          content: {
-            visibility: true,
-            msg: response.msg,
-            redirection: false
-          }
-        })
-        return true
-      }
-      const d = response.view[0].date
-      console.log(d)
-      context.emit('setModelDate', moment(d).startOf('year').format('MM/YYYY'))
-      const jsonView = JSON.parse(response.view[0].view)
-      $store.commit('map/setCurrents', {
-        zoom: jsonView.zoom,
-        center: transform(jsonView.center, 'EPSG:3857', 'EPSG:4326'),
-        mobilezoom: jsonView.zoom
-      })
-      // Search type from code
-      const type = Object.keys(models).find((key, index) => {
-        return (models[key].modelName === jsonView.filters.vector)
-      })
-      // Send data to layout so it udpates UI accordingly
-      context.emit('loadSharedModel', {
-        vector: { code: jsonView.filters.vector, type: trans(models[type].common_name) },
-        year: jsonView.filters.year,
-        month: jsonView.filters.month,
-        estimation: jsonView.filters.estimation,
-        uncertainty: jsonView.filters.uncertainty,
-        estimationTransparency: jsonView.filters.estimationTransparency,
-        uncertaintyTransparency: jsonView.filters.uncertaintyTransparency,
-        uncertaintyColor: jsonView.filters.uncertaintyColor,
-        estimationColors: jsonView.filters.estimationColors
-      })
+    const trans = function (text) {
+      return $store.getters['app/getText'](text)
+    }
+
+    function positionChange () {
+      context.emit(
+        'move',
+        {
+          center: toLonLat(
+            map.value.map.getView().getCenter(),
+            projection.value
+          ),
+          zoom: map.value.map.getView().getZoom()
+        }
+      )
     }
 
     // Turn CSV file into dict
@@ -288,7 +265,8 @@ export default defineComponent({
         const nutsId = currentLine[indexId]
         if (nutsId !== undefined) {
           const prob = currentLine[indexEst]
-          const se = currentLine[indexSe]
+          // Converting uncertainty to certainty
+          const se = 1 - currentLine[indexSe]
           dict[nutsId] = { prob, se }
         }
       }
@@ -305,81 +283,24 @@ export default defineComponent({
       })
     }
 
-    // Do geometry grid to show probability at bigger zooms
-    const doGRID = function (data) {
-      const gridSize = $store.getters['app/getGridSize']
-      dataGridGeojson = GeojsonFromCsv(data, jsonProperties.grid, gridSize)
-      const estimationColors = $store.getters['app/getEstimationColors']
-      estModelLayer = new GridModelLayer(ol, dataGridGeojson.est, {
-        colors: estimationColors,
-        rangs: RANGS,
-        zIndex: 15,
-        minZoom: jsonProperties.grid.minZoom,
-        maxZoom: jsonProperties.grid.maxZoom
-      })
-      estModelLayer.addLayer()
-
-      // Grid SE layer
-      if (seModelLayer) {
-        map.value.map.removeLayer(seModelLayer.layer)
-      }
-      const seColor = $store.getters['app/getModelDefaults'].uncertaintyColor
-      seModelLayer = new GridModelLayer(ol, dataGridGeojson.se, {
-        zIndex: 16,
-        color: seColor.value,
-        minZoom: jsonProperties.grid.minZoom,
-        maxZoom: jsonProperties.grid.maxZoom
-      })
-      seModelLayer.addLayer()
-    }
-
-    const clearModel = async function (data) {
-      if (seModelLayer) {
-        map.value.map.removeLayer(seModelLayer.layer)
-        seModelLayer = null
-      }
-      if (seModelLayer1) {
-        map.value.map.removeLayer(seModelLayer1.layer)
-      }
-      if (seModelLayer2) {
-        map.value.map.removeLayer(seModelLayer2.layer)
-      }
-      if (seModelLayer3) {
-        map.value.map.removeLayer(seModelLayer3.layer)
-      }
-      if (seModelLayer4) {
-        map.value.map.removeLayer(seModelLayer4.layer)
-      }
-      if (estModelLayer) {
-        map.value.map.removeLayer(estModelLayer.layer)
-        estModelLayer = null
-      }
-      map.value.map.removeLayer(modelsLayer)
-    }
-
-    // function newAbortSignal (timeoutMs) {
-    //   const abortController = new AbortController()
-    //   setTimeout(abortController.abort(), timeoutMs)
-    //   return abortController.signal
-    // }
-
     // Get all data necessary to load a model and add layers to  map
-    const loadModel = async function (data) {
-      let connectionError = false
-      const process = { status: 'ok', data: {} }
-      if (estModelLayer) {
-        map.value.map.removeLayer(estModelLayer.layer)
-        estModelLayer = null
-      }
-      clearModel()
-      spinner(true)
-      CSVS = {}
-      const urls = data.modelsCsv
+    const loadLayer = async function (speciesCode, date) {
+      const year = date.getFullYear()
+      const month = (date.getMonth() + 1).toString().padStart(2, '0')
+
+      const serverModels = $store.getters['app/getModelsUrl']
+      const urls = [
+        serverModels + `gadm1/${speciesCode}/${year}/${month}/` + 'gadm1_monthly.csv',
+        serverModels + `gadm2/${speciesCode}/${year}/${month}/` + 'gadm2_monthly.csv',
+        serverModels + `gadm3/${speciesCode}/${year}/${month}/` + 'gadm3_monthly.csv',
+        serverModels + `gadm4/${speciesCode}/${year}/${month}/` + 'gadm4_monthly.csv'
+      ]
 
+      spinner(true)
       const requests = urls.map((url) => {
         return axios.get(url, {
           // withCredentials: true,
-          signal: AbortSignal.timeout(requestTimeoutMs), // Aborts request after 5 seconds
+          signal: AbortSignal.timeout(20000), // Aborts request after 5 seconds
           onDownloadProgress: (progressEvent) => {
             progress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
           }
@@ -387,460 +308,282 @@ export default defineComponent({
       })
 
       // GET CSV DATA FILES
+      // Clear CSVS object
+      CSVS = {}
+      const process = { status: 'ok', data: {} }
       await axios.all(requests).then((responses) => {
         responses.forEach((resp) => {
           const decoded = resp.data
           if (!('1' in CSVS)) {
-            CSVS['1'] = csvJSON(decoded, GADM1)
+            CSVS['1'] = csvJSON(decoded, 'gadm1')
           } else if (!('2' in CSVS)) {
-            CSVS['2'] = csvJSON(decoded, GADM2)
+            CSVS['2'] = csvJSON(decoded, 'gadm2')
           } else if (!('3' in CSVS)) {
-            CSVS['3'] = csvJSON(decoded, GADM3)
+            CSVS['3'] = csvJSON(decoded, 'gadm3')
           } else if (!('4' in CSVS)) {
-            CSVS['4'] = csvJSON(decoded, GADM4)
-          } else if (!estModelLayer) {
-            doGRID(decoded)
+            CSVS['4'] = csvJSON(decoded, 'gadm4')
           }
         })
-        gadm1.getSource().refresh()
-        gadm2.getSource().refresh()
-        gadm3.getSource().refresh()
-        gadm4.getSource().refresh()
-
-        map.value.map.addLayer(modelsLayer)
-        gadm1.on('prerender', function () {
-          spinner(true)
-        })
-        gadm2.on('prerender', function () {
-          spinner(true)
-        })
-        gadm3.on('prerender', function () {
-          spinner(true)
-        })
-        gadm4.on('prerender', function () {
-          spinner(true)
-        })
-        estimationVisibility(data.estimation)
-        estimationOpacity(1 - (data.estimationTransparency / 100))
-
-        // If cell layer is on
-        if (urls.length > 4) {
-          gadm4MaxZoom = jsonProperties.gadm4.maxZoom
-          gadm4.setMaxZoom(gadm4MaxZoom)
-          estModelLayer.layer.on('prerender', function () {
-            spinner(true)
-          })
-        } else {
-          // if it is not
-          gadm4MaxZoom = 19
-          gadm4.setMaxZoom(gadm4MaxZoom)
-        }
-        map.value.map.on('rendercomplete', function () {
-          spinner(false)
-        })
       }).catch(function (err) {
         process.status = 'error'
         process.data = err
-        connectionError = true
         let errMsg = ''
-        if (err.response.status === 404) {
+        if (err.response?.status === 404) {
           errMsg = 'Model not found on Server'
         } else {
           errMsg = err.message
         }
         spinner(false)
         $store.commit('app/setModal', { id: 'error', content: { visibility: true, msg: errMsg } })
-      })
-
-      if (connectionError) {
         return false
-      }
-
-      // GET CENTROIDS GEOJSON FOR UNCERTAINTY
-      const centroidUrls = data.centroidsUrls
-      const centroidsReq = centroidUrls.map((url) => {
-        return axios.get(url, {
-          withCredentials: true,
-          signal: AbortSignal.timeout(requestTimeoutMs), // Aborts request after 20 seconds
-          onDownloadProgress: (progressEvent) => {
-            progress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-          }
-        })
       })
+      refresh()
+    }
 
-      await axios.all(centroidsReq).then((responses) => {
-        responses.forEach((resp) => {
-          if (!('gadm1' in CENTROIDS)) {
-            CENTROIDS.gadm1 = putDataOnCentroids(resp.data, CSVS['1'])
-          } else if (!('gadm2' in CENTROIDS)) {
-            CENTROIDS.gadm2 = putDataOnCentroids(resp.data, CSVS['2'])
-          } else if (!('gadm3' in CENTROIDS)) {
-            CENTROIDS.gadm3 = putDataOnCentroids(resp.data, CSVS['3'])
-          } else if (!('gadm4' in CENTROIDS)) {
-            CENTROIDS.gadm4 = putDataOnCentroids(resp.data, CSVS['4'])
+    function getFeatureColor (feature, csvIndex) {
+      const defaultColor = mapStyleColor.value.unknown // Default color
+
+      // Get the data from CSV if provided and determine color based on probability
+      const dataObj = csvIndex !== undefined ? CSVS[csvIndex] : {}
+      const id = feature.getId()
+      if (!dataObj || dataObj[id] === undefined) {
+        // id not found in dataObj
+        return defaultColor
+      }
+
+      // Apply filters
+      if (props.filters) {
+        if (props.filters.certaintyRange) {
+          const { min, max } = props.filters.certaintyRange
+          const certainty = dataObj[id].se
+          if (certainty < min || certainty > max) {
+            // Certainty outside the filter range
+            return defaultColor
           }
-        })
-      }).catch(function (err) {
-        connectionError = true
-        spinner(false)
-        const message = $store.getters['app/getErrorMessage'] + ' ' + err.message
-        $store.commit('app/setModal', { id: 'error', content: { visibility: true, msg: message } })
-        $store.commit('app/setErrorMessage', '')
-      })
-
-      if (connectionError) {
-        return false
+        }
       }
 
-      // PUT DATA ON CENTROIDS AND ADD LAYERS TO MAP
-
-      CENTROIDS.gadm1 = putDataOnCentroids(CENTROIDS.gadm1, CSVS['1'])
-      CENTROIDS.gadm2 = putDataOnCentroids(CENTROIDS.gadm2, CSVS['2'])
-      CENTROIDS.gadm3 = putDataOnCentroids(CENTROIDS.gadm3, CSVS['3'])
-      CENTROIDS.gadm4 = putDataOnCentroids(CENTROIDS.gadm4, CSVS['4'])
-
-      const seColor = $store.getters['app/getUncertaintyColor']
-
-      seModelLayer1 = new GridModelLayer(ol, CENTROIDS.gadm1, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm1.minZoom - 1,
-        maxZoom: jsonProperties.gadm1.maxZoom
-      })
-
-      seModelLayer2 = new GridModelLayer(ol, CENTROIDS.gadm2, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm2.minZoom,
-        maxZoom: jsonProperties.gadm2.maxZoom
-      })
+      const palette = props.palette
+      const index = Math.min(
+        Math.floor(dataObj[id].prob * palette.length),
+        palette.length - 1
+      )
 
-      seModelLayer3 = new GridModelLayer(ol, CENTROIDS.gadm3, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm3.minZoom,
-        maxZoom: jsonProperties.gadm3.maxZoom
-      })
-
-      seModelLayer4 = new GridModelLayer(ol, CENTROIDS.gadm4, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm4.minZoom,
-        maxZoom: gadm4MaxZoom
-      })
-
-      seModelLayer1.addLayer()
-      seModelLayer2.addLayer()
-      seModelLayer3.addLayer()
-      seModelLayer4.addLayer()
-      uncertaintyVisibility(data.uncertainty)
-      uncertaintyOpacity(1 - (data.uncertaintyTransparency / 100))
+      return palette[index]
     }
 
-    // Filter centroids with data and add SE value from csv
-    const putDataOnCentroids = function (json, csv) {
-      const filtered = json.features.filter(f => {
-        if (f.properties.id in csv) {
-          f.properties.se = csv[f.properties.id].se
-          return f.properties.id in csv
-        } else {
-          return false
+    /**
+     * Function to create a VectorTileLayer with specified parameters.
+     * @param {number} minZoom - Minimum zoom level for the layer.
+     * @param {number} zIndex - The z-index of the layer.
+     * @param {string} tmsLayername - The name of the TMS layer.
+     * @param {string} idPropertyname - The name of the property to use as the ID.
+     * @param {number} csvIndex - Index of the CSV data.
+     * @param {boolean} triggersSpinner - Flag indicating whether to trigger spinner.
+     * @returns {VectorTileLayer} - The created VectorTileLayer.
+     */
+    function createGadmVectorTileLayer (minZoom, zIndex, tmsLayername, idPropertyname, csvIndex, triggersSpinner = true) {
+      // Get the tiles URL from the store
+      const tilesUrl = $store.getters['app/getTilesUrl']
+
+      // Create the VectorTileLayer
+      const layer = new VectorTileLayer({
+        declutter: true,
+        minZoom: minZoom,
+        zIndex: zIndex,
+        renderMode: 'hybrid',
+        source: new VectorTileSource({
+          minZoom: 2,
+          maxZoom: 7,
+          format: new MVT({
+            featureClass: Feature,
+            idProperty: idPropertyname
+          }),
+          url: tilesUrl + tmsLayername + '@EPSG:900913@pbf/{z}/{x}/{-y}.pbf'
+        }),
+        style: function (feature, resolution) {
+          return new Style({
+            fill: new Fill({
+              color: getFeatureColor(feature, csvIndex)
+            }),
+            stroke: new Stroke({
+              color: mapStyleColor.value.lowLevelStroke,
+              width: 0.4
+            })
+          })
         }
       })
-      return {
-        type: 'FeatureCollection',
-        model: json.model,
-        features: filtered
-      }
-    }
-
-    // Function styles for probability layers based on scale
-    const colorizeGadm1 = (feature, style) => {
-      return colorizeGadm(feature, style, CSVS['1'])
-    }
-    const colorizeGadm2 = (feature, style) => {
-      return colorizeGadm(feature, style, CSVS['2'])
-    }
 
-    const colorizeGadm3 = (feature, style) => {
-      return colorizeGadm(feature, style, CSVS['3'])
-    }
+      // Attach spinner trigger events if specified
+      if (triggersSpinner) {
+        layer.on(['change', 'prerender'], function (e) {
+          spinner(true)
+        })
+      }
 
-    const colorizeGadm4 = (feature, style) => {
-      return colorizeGadm(feature, style, CSVS['4'])
+      return layer
     }
 
-    // General function style for probability
-    const colorizeGadm = (feature, style, CSV) => {
-      const estimationColors = $store.getters['app/getEstimationColors']
-      const id = feature.properties_.id
-      if (CSV[id] === undefined) {
-        return null
-      }
-      const value = CSV[id].prob
-      let c
-      if (value < RANGS[0]) {
-        c = estimationColors[0]
-      } else if (value < RANGS[1]) {
-        c = estimationColors[1]
-      } else if (value < RANGS[2]) {
-        c = estimationColors[2]
-      } else if (value < RANGS[3]) {
-        c = estimationColors[3]
-      } else if (value < RANGS[4]) {
-        c = estimationColors[4]
-      } else {
-        c = estimationColors[5]
-      }
-      style = new Fill({
-        color: c
-      })
-      return new Style({
-        fill: style,
-        stroke: new Stroke({
-          color: '#fff'
-        })
+    /**
+     * Function to create a VectorTileLayer for selection based on an existing GADM layer.
+     * @param {VectorTileLayer} gadmLayer - The existing GADM VectorTileLayer.
+     * @returns {VectorTileLayer} - The created VectorTileLayer for selection.
+     */
+    function createGadmSelectionVectorTileLayer (gadmLayer) {
+      return new VectorTileLayer({
+        renderMode: 'vector',
+        minZoom: gadmLayer.getMinZoom(),
+        maxZoom: gadmLayer.getMaxZoom(),
+        zIndex: gadmLayer.getZIndex(),
+        source: gadmLayer.getSource(),
+        style: function (feature, resolution) {
+          // Check if the feature's ID exists in the hoverSelectedFeatureId object
+          if (feature.getId() === hoverSelectedFeatureId.value) {
+            // If yes, return the selected style
+            return gadmSelectedStyle
+          }
+          // If not, no style is applied (feature remains unchanged)
+        }
       })
     }
 
-    const tilesUrl = $store.getters['app/getTilesUrl']
-
-    // Define layers for probability
-    const gadm1 = new VectorTileLayer({
-      maxZoom: jsonProperties.gadm1.maxZoom,
-      declutter: true,
-      renderMode: 'hybrid',
-      source: new VectorTileSource({
-        maxZoom: jsonProperties.gadm1.maxZoom + 1,
-        format: new MVT(),
-        url: tilesUrl + '/gadm1/{z}/{x}/{y}.pbf'
-      }),
-      style: colorizeGadm1
+    const upperGadmBorderStyle = new Style({
+      stroke: new Stroke({
+        color: mapStyleColor.value.highLevelStroke,
+        width: 0.5
+      })
     })
 
-    const gadm2 = new VectorTileLayer({
-      minZoom: jsonProperties.gadm2.minZoom,
-      maxZoom: jsonProperties.gadm2.maxZoom,
-      declutter: true,
-      renderMode: 'hybrid',
-      source: new VectorTileSource({
-        maxZoom: jsonProperties.gadm2.maxZoom,
-        format: new MVT(),
-        url: tilesUrl + '/gadm2/{z}/{x}/{y}.pbf'
-      }),
-      style: colorizeGadm2
-    })
+    /**
+     * Function to create a VectorTileLayer for displaying the upper border of a GADM layer.
+     * @param {VectorTileLayer} gadmLayer - The GADM VectorTileLayer.
+     * @returns {VectorTileLayer} - The VectorTileLayer for displaying the upper border.
+     */
+    function createGadmUpperBorderVectorTileLayer (gadmLayer) {
+      return new VectorTileLayer({
+        renderMode: 'hybrid',
+        source: gadmLayer.getSource(), // Source inherited from the original layer
+        style: upperGadmBorderStyle
+      })
+    }
 
-    const gadm3 = new VectorTileLayer({
-      minZoom: jsonProperties.gadm3.minZoom,
-      maxZoom: jsonProperties.gadm3.maxZoom,
-      declutter: true,
-      renderMode: 'hybrid',
-      source: new VectorTileSource({
-        maxZoom: jsonProperties.gadm3.maxZoom - 1,
-        format: new MVT(),
-        url: tilesUrl + '/gadm3/{z}/{x}/{y}.pbf'
-      }),
-      style: colorizeGadm3
+    const gadmSelectedStyle = new Style({
+      stroke: new Stroke({
+        color: 'white',
+        width: 2
+      })
     })
 
-    const gadm4 = new VectorTileLayer({
-      minZoom: jsonProperties.gadm4.minZoom,
-      maxZoom: jsonProperties.gadm4.maxZoom,
-      declutter: true,
-      renderMode: 'hybrid',
-      source: new VectorTileSource({
-        maxZoom: jsonProperties.gadm4.maxZoom - 2,
-        format: new MVT(),
-        url: tilesUrl + '/gadm4/{z}/{x}/{y}.pbf'
-      }),
-      style: colorizeGadm4
-    })
+    // Define layers for probability
+    const gadm0 = createGadmVectorTileLayer(
+      jsonProperties.gadm1.minZoom, // Minimum zoom level for the layer
+      0, // Z-index
+      'map_gadm:ADM_0', // Name of the TMS layer
+      'COUNTRY', // Name of the ID property (MVT)
+      undefined, // CSV index (undefined in this case)
+      false // Disable spinner triggering
+    )
+    gadm0.setPreload(Infinity)
+    gadm0.setBackground(mapStyleColor.value.background)
+
+    // GADM1
+    const gadm1 = createGadmVectorTileLayer(
+      jsonProperties.gadm1.minZoom, // Minimum zoom level for the layer
+      1, // Z-index
+      'map_gadm:ADM_1', // Name of the TMS layer
+      'GID_1', // Name of the ID property (MVT)
+      '1' // CSV index
+    )
+    const gadm1selection = createGadmSelectionVectorTileLayer(gadm1)
+
+    // GADM2
+    const gadm2 = createGadmVectorTileLayer(
+      jsonProperties.gadm2.minZoom, // Minimum zoom level for the layer
+      2, // Z-index
+      'map_gadm:ADM_2', // Name of the TMS layer
+      'GID_2', // Name of the ID property (MVT)
+      '2' // CSV index
+    )
+    const gadm2selection = createGadmSelectionVectorTileLayer(gadm2)
+
+    // GADM3
+    const gadm3 = createGadmVectorTileLayer(
+      jsonProperties.gadm3.minZoom, // Minimum zoom level for the layer
+      3, // Z-index
+      'map_gadm:ADM_3', // Name of the TMS layer
+      'GID_3', // Name of the ID property (MVT)
+      '3' // CSV index
+    )
+    const gadm3selection = createGadmSelectionVectorTileLayer(gadm3)
+
+    // GADM4
+    const gadm4 = createGadmVectorTileLayer(
+      jsonProperties.gadm4.minZoom, // Minimum zoom level for the layer
+      4, // Z-index
+      'map_gadm:ADM_4', // Name of the TMS layer
+      'GID_4', // Name of the ID property (MVT)
+      '4' // CSV index
+    )
+    const gadm4selection = createGadmSelectionVectorTileLayer(gadm4)
+
+    // Setting up border
+    const gadm0border = createGadmUpperBorderVectorTileLayer(gadm0)
+    gadm0border.setMinZoom(gadm1.getMinZoom())
+    gadm0border.setMaxZoom(gadm2.getMinZoom())
+    gadm0border.setZIndex(gadm1.getZIndex())
+
+    const gadm1border = createGadmUpperBorderVectorTileLayer(gadm1)
+    gadm1border.setMinZoom(gadm2.getMinZoom())
+    gadm1border.setMaxZoom(gadm3.getMinZoom())
+    gadm1border.setZIndex(gadm2.getZIndex())
+
+    const gadm2border = createGadmUpperBorderVectorTileLayer(gadm2)
+    gadm2border.setMinZoom(gadm3.getMinZoom())
+    gadm2border.setMaxZoom(gadm4.getMinZoom())
+    gadm2border.setZIndex(gadm3.getZIndex())
+
+    const gadm3border = createGadmUpperBorderVectorTileLayer(gadm3)
+    gadm3border.setMinZoom(gadm4.getMinZoom())
+    gadm3border.setZIndex(gadm4.getZIndex())
+
+    // Define arrays to hold base GADM layers, selectable GADM layers, and upper border GADM layers
+    const baseGadmLayers = [gadm1, gadm2, gadm3, gadm4]
+    const selectableGadmLayers = [gadm1selection, gadm2selection, gadm3selection, gadm4selection]
+    const upperBorderGadmLayers = [gadm0border, gadm1border, gadm2border, gadm3border]
 
     // Group previous layers as a single map layer
-    const modelsLayer = new LayerGroup({
-      layers: [gadm1, gadm2, gadm3, gadm4]
+    const modelsLayerGroup = new LayerGroup({
+      layers: [...baseGadmLayers, ...upperBorderGadmLayers, ...selectableGadmLayers],
+      visible: props.displayChoropleth // Set the layer group initially invisible
     })
 
-    function updateMap () {
-      // Save view params into store
-      const newZoom = map.value.map.getView().getZoom()
-      $store.commit('map/setCurrents', {
-        zoom: newZoom,
-        center: transform(
-          map.value.map.getView().getCenter(),
-          'EPSG:3857', 'EPSG:4326'
-        )
-      })
-    }
-
-    // Change estimation visibility
-    const estimationVisibility = function (state) {
-      $store.commit('app/setModelEstimation', state)
-      gadm1.setVisible(state)
-      gadm2.setVisible(state)
-      gadm3.setVisible(state)
-      gadm4.setVisible(state)
-      if (estModelLayer) {
-        estModelLayer.layer.setVisible(state)
-      }
-    }
-
-    // Change uncertainty visibility
-    const uncertaintyVisibility = function (state) {
-      $store.commit('app/setModelUncertainty', state)
-      seModelLayer1.layer.setVisible(state)
-      seModelLayer2.layer.setVisible(state)
-      seModelLayer3.layer.setVisible(state)
-      seModelLayer4.layer.setVisible(state)
-      if (seModelLayer) {
-        seModelLayer.layer.setVisible(state)
-      }
-    }
-
-    // Change estimation opacity
-    const estimationOpacity = function (opacity) {
-      gadm1.setOpacity(opacity)
-      gadm2.setOpacity(opacity)
-      gadm3.setOpacity(opacity)
-      gadm4.setOpacity(opacity)
-      if (estModelLayer) {
-        estModelLayer.layer.setOpacity(opacity)
-      }
-    }
-
-    // Change uncertainty opacity
-    const uncertaintyOpacity = function (opacity) {
-      if (seModelLayer1) {
-        seModelLayer1.layer.setOpacity(opacity)
-      }
-      if (seModelLayer2) {
-        seModelLayer2.layer.setOpacity(opacity)
-      }
-      if (seModelLayer3) {
-        seModelLayer3.layer.setOpacity(opacity)
-      }
-      if (seModelLayer4) {
-        seModelLayer4.layer.setOpacity(opacity)
-      }
-      if (seModelLayer) {
-        seModelLayer.layer.setOpacity(opacity)
-      }
-    }
-
-    // Redraw estimation. Get colors from store
-    const estimationRefresh = function () {
-      if (estModelLayer) {
-        map.value.map.removeLayer(estModelLayer.layer)
-      }
-      const estimationColors = $store.getters['app/getEstimationColors']
-      if (dataGridGeojson) {
-        estModelLayer = new GridModelLayer(ol, dataGridGeojson.est, {
-          colors: estimationColors,
-          rangs: RANGS,
-          zIndex: 15,
-          minZoom: jsonProperties.grid.minZoom,
-          maxZoom: jsonProperties.grid.maxZoom
-        })
-        estModelLayer.addLayer()
-      }
-
-      gadm1.getSource().refresh()
-      gadm2.getSource().refresh()
-      gadm3.getSource().refresh()
-      gadm4.getSource().refresh()
-    }
-
-    // Redraw uncertainty. Get colors from store
-    const uncertaintyRefresh = function () {
-      const seColor = $store.getters['app/getUncertaintyColor']
-      if (seModelLayer) {
-        map.value.map.removeLayer(seModelLayer.layer)
-      }
-      if (seModelLayer1) {
-        map.value.map.removeLayer(seModelLayer1.layer)
-      }
-      if (seModelLayer2) {
-        map.value.map.removeLayer(seModelLayer2.layer)
-      }
-      if (seModelLayer3) {
-        map.value.map.removeLayer(seModelLayer3.layer)
-      }
-      if (seModelLayer4) {
-        map.value.map.removeLayer(seModelLayer4.layer)
-      }
-
-      seModelLayer1 = new GridModelLayer(ol, CENTROIDS.gadm1, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm1.minZoom,
-        maxZoom: jsonProperties.gadm1.maxZoom
-      })
-
-      seModelLayer2 = new GridModelLayer(ol, CENTROIDS.gadm2, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm2.minZoom,
-        maxZoom: jsonProperties.gadm2.maxZoom
-      })
-
-      seModelLayer3 = new GridModelLayer(ol, CENTROIDS.gadm3, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm3.minZoom,
-        maxZoom: jsonProperties.gadm3.maxZoom
-      })
+    // Creating hover interaction only for the baseGadmLayers
+    const baseGadmHoverInteraction = new Hover({
+      layers: baseGadmLayers
+    })
 
-      seModelLayer4 = new GridModelLayer(ol, CENTROIDS.gadm4, {
-        zIndex: 15,
-        color: seColor,
-        minZoom: jsonProperties.gadm4.minZoom,
-        maxZoom: gadm4MaxZoom
+    // Redraw. Get colors from store
+    const refresh = async function () {
+      // Notify each GADM layer that it has changed, triggering a redraw.
+      modelsLayerGroup.getLayers().forEach(function (layer) {
+        layer.changed()
       })
-
-      if (gadm4MaxZoom === jsonProperties.gadm4.maxZoom) {
-        seModelLayer = new GridModelLayer(ol, dataGridGeojson.se, {
-          zIndex: 16,
-          color: seColor,
-          minZoom: jsonProperties.grid.minZoom,
-          maxZoom: jsonProperties.grid.maxZoom
-        })
-        seModelLayer.addLayer()
-      }
-      seModelLayer1.addLayer()
-      seModelLayer2.addLayer()
-      seModelLayer3.addLayer()
-      seModelLayer4.addLayer()
-      uncertaintyOpacity(1 - ($store.getters['app/getModelDefaults'].uncertaintyTransparency / 100))
     }
 
-    const hideSpinner = function () {
-      spinner(false)
-    }
     return {
       trans,
-      hideSpinner,
-      uncertaintyRefresh,
-      estimationRefresh,
-      estimationVisibility,
-      uncertaintyVisibility,
-      estimationOpacity,
-      uncertaintyOpacity,
-      baseMap,
-      updateMap,
+      projection,
+      refresh,
+      positionChange,
       center,
-      zoom,
       mobile,
-      loadView,
-      shareModelView,
       toggleLeftDrawer,
       attrVisible,
       foldingIcon,
       unfoldAttribution,
       leftDrawerIcon,
       map,
-      loadModel,
-      clearModel,
+      loadLayer,
       progress
     }
   }
@@ -875,7 +618,7 @@ export default defineComponent({
   .ol-zoom button:focus,
   .ol-zoom button{
     background: $primary-button-background;
-    color: $primary-button-text;
+    color: white;
     border: none;
     width: 40px;
     height: 40px;
diff --git a/src/components/TheMapReport.vue b/src/components/TheMapReport.vue
index 52c08737..2b1de228 100644
--- a/src/components/TheMapReport.vue
+++ b/src/components/TheMapReport.vue
@@ -16,7 +16,7 @@
                     :loadTilesWhileAnimating='true'
                     :loadTilesWhileInteracting='true'
                     style="position: relative; height: 300px; display: width:100%">
-
+                <ol-scaleline-control />
                 <ol-view ref='view'
                     :maxZoom=19
                     :maxResolution=39135.75848201024
diff --git a/src/components/TheMapWms.vue b/src/components/TheMapWms.vue
index 3f7e2b66..a2523499 100644
--- a/src/components/TheMapWms.vue
+++ b/src/components/TheMapWms.vue
@@ -4,7 +4,7 @@
 
 <template>
   <div id='mapa' class='bg-white'>
-    <q-linear-progress :value="progress" color="orange" class="progress-bar-absolute"  v-if="progress>0 && progress<100"/>
+    <!-- <q-linear-progress :value="progress" color="orange" class="progress-bar-absolute"  v-if="progress>0 && progress<100"/> -->
     <q-btn v-if="mobile"
       class="drawer-handler-mobile"
       @click="toggleLeftDrawer"
@@ -16,18 +16,18 @@
     <ol-map ref='map'
       :loadTilesWhileAnimating='true'
       :loadTilesWhileInteracting='true'
-      @movestart='hideSpinner'
-      @moveend='updateMap'
+      @moveend='positionChange'
       style='height:100%'>
-
         <ol-zoom-control :duration='600' />
+        <ol-scaleline-control />
         <ol-view ref='view'
-            :multiWorld=true
-            :maxZoom=19
-            :maxResolution=39135.75848201024
-            :center='center'
-            :zoom='zoom'
-            :constrainResolution='true' />
+          :center="center"
+          :maxZoom=19
+          :multiWorld=false
+          :zoom="zoom"
+          :projection="projection"
+          :constrainResolution='true'
+          />
 
         <div
           class="ol-attribution"
@@ -45,62 +45,118 @@
           </div>
         </div>
         <!-- base map -->
-        <ol-tile-layer ref='baseMap' title='mapbox' :zIndex=0>
+        <ol-tile-layer title='mapbox' :zIndex=0 :preload="Infinity">
           <ol-source-osm />
         </ol-tile-layer>
 
     </ol-map>
-    <!-- DOWNLOAD BUTTON -->
-    <!-- <cust-control
-          ref="donwnloadControl"
-          icon="fa-solid fa-download"
-          class="wms ol-download ol-unselectable ol-control"
-          :class="wmsNumberOfVisibleLayers?'enabled':'disabled'"
-          title="Export map image"
-          @clicked="exportPNG"
-        >
-        </cust-control> -->
+      <!-- DOWNLOAD BUTTON -->
+      <cust-control
+        ref="downloadControl"
+        icon="fa-solid fa-download"
+        class="ol-download ol-unselectable ol-control"
+        title="Geopackage"
+        style="bottom:180px"
+        :disabled="!speciesCode"
+        @clicked="downloadGeopackage"
+      >
+      </cust-control>
+      <!-- DOWNLOAD SCREENSHOT BUTTON -->
+      <cust-control
+        ref="screenshotControl"
+        icon="fa-solid fa-camera-viewfinder"
+        class="ol-download ol-unselectable ol-control"
+        title="Screenshot"
+        :disabled="!speciesCode"
+        @clicked="exportPNG"
+      >
+      </cust-control>
   </div>
 </template>
 
 <script>
 import 'vue3-openlayers/dist/vue3-openlayers.css'
-// import CustControl from './CustControl'
-import { defineComponent, ref, computed, onMounted } from 'vue'
+import { defineComponent, ref, computed, onMounted, watch } from 'vue'
 import { useStore } from 'vuex'
-import { transform } from 'ol/proj.js'
-import TileLayer from 'ol/layer/Tile.js'
-import TileWMS from 'ol/source/TileWMS.js'
-import ShareMapView from '../js/ShareMapView'
-import { StatusCodes as STATUS_CODES } from 'http-status-codes'
+
+import CustControl from './CustControl'
+
+import { toLonLat, fromLonLat } from 'ol/proj.js'
+import { Group as LayerGroup } from 'ol/layer'
+import VectorTileLayer from 'ol/layer/VectorTile'
+import VectorTileSource from 'ol/source/VectorTile'
+import MVT from 'ol/format/MVT'
+import Feature from 'ol/Feature'
+import { Style, Fill, Stroke, RegularShape, Text } from 'ol/style'
+
+import Legend from 'ol-ext/legend/Legend'
+import LegendControl from 'ol-ext/control/Legend'
+import Tooltip from 'ol-ext/overlay/Tooltip'
+import Hover from 'ol-ext/interaction/Hover'
 
 export default defineComponent({
-  name: 'TheMapModels',
-  components: { },
+  name: 'TheMapEarlyWarning',
+  components: { CustControl },
   emits: [
     'toggleLeftDrawer',
-    'endShareView',
-    'loadSharedModel'
+    'move'
   ],
-  props: ['viewCode'],
+  props: ['speciesCode', 'opacity', 'visible', 'lat', 'lon', 'zoom'],
   setup (props, context) {
+    const $store = useStore()
+
     const map = ref('null')
     const leftDrawerIcon = ref('null')
-    const $store = useStore()
-    const baseMap = ref('null')
+
     const attrVisible = ref(false)
     const foldingIcon = ref('<')
-    const PREVIOUS_WMS = [] // keep layer Id
-    const backendUrl = $store.getters['app/getBackend']
 
-    // Map general configuration
-    const zoom = computed(() => {
-      return mobile.value ? $store.getters['map/getCurrents'].MOBILEZOOM : $store.getters['map/getCurrents'].ZOOM
+    const projection = ref('EPSG:3857')
+
+    // Watcher for props
+    watch(() => props.opacity, (newValue, oldValue) => {
+      statusLayerGroup.setOpacity(newValue)
+    })
+
+    watch(() => props.speciesCode, (newValue, oldValue) => {
+      loadLayer(newValue)
+    })
+
+    watch(() => props.visible, (newValue, oldValue) => {
+      statusLayerGroup.setVisible(newValue)
+    })
+
+    const hoverSelectedFeatureId = ref()
+    watch(hoverSelectedFeatureId, (newValue, oldValue) => {
+      statusSelectedLayer.changed()
+    })
+
+    // Get the tiles URL from the store
+    const tilesUrl = $store.getters['app/getTilesUrl']
+
+    const mapStyleColor = ref({
+      lowLevelStroke: '#919191',
+      highLevelStroke: '#A8A8A8',
+      background: '#aad3df', // Sea color
+      unknown: '#E1E1E1'
+    })
+
+    const choroplethData = computed(() => {
+      // Keys are the possible value of the geometry specie column.
+      return {
+        mosquito_alert: {
+          label: trans('Mosquito Alert discoveries'),
+          color: '#e34a33'
+        },
+        official: {
+          label: trans('Official data'),
+          color: '#fef0d9'
+        }
+      }
     })
 
     const center = computed(() => {
-      const center = $store.getters['map/getCurrents'].CENTER
-      return transform(center, 'EPSG:4326', 'EPSG:3857')
+      return fromLonLat([props.lon, props.lat], projection.value)
     })
 
     const mobile = computed(() => {
@@ -112,10 +168,6 @@ export default defineComponent({
       leftDrawerIcon.value = (leftDrawerIcon.value === 'keyboard_arrow_right') ? 'keyboard_arrow_left' : 'keyboard_arrow_right'
     }
 
-    const wmsNumberOfVisibleLayers = computed(() => {
-      return $store.getters['app/wmsNumberOfVisibleLayers']
-    })
-
     function unfoldAttribution () {
       // attrVisible.value = !attrVisible.value
       // if (attrVisible.value) {
@@ -126,158 +178,273 @@ export default defineComponent({
     }
 
     onMounted(function () {
+      // Set initial value for left drawer icon
       leftDrawerIcon.value = 'keyboard_arrow_left'
-      const currentWMSView = JSON.parse(JSON.stringify($store.getters['app/getCurrentWMSView']))
-      if (Object.keys(currentWMSView).length > 0) {
-        loadWmsLayer(currentWMSView.years)
+
+      // Add status layer group to the map
+      map.value.map.addLayer(statusLayerGroup)
+
+      addLegend(map.value.map)
+      addTooltip(map.value.map)
+
+      if (props.speciesCode) {
+        loadLayer(props.speciesCode)
       }
     })
 
-    const trans = function (text) {
-      return $store.getters['app/getText'](text)
-    }
+    const addLegend = (map) => {
+      // Create legend for the status layer group
+      const legend = new Legend({
+        title: 'Legend',
+        size: [14, 14],
+        layer: statusLayerGroup,
+        textStyle: new Text({
+          font: '14px Roboto'
+        }),
+        titleStyle: new Text({
+          font: '16px Roboto',
+          textAlign: 'center',
+          justify: 'center'
+        })
+      })
 
-    const shareViewUrl = backendUrl + 'view/save/'
-    // const loadViewUrl = backendUrl + 'view/load/'
-
-    // Call when user shares view
-    function shareWmsView (data) {
-      // After mapview is shared then handle it
-      const ol = map.value.map
-      const newView = new ShareMapView(ol, {
-        viewType: 'wms',
-        csrfToken: $store.getters['app/getCsrfToken'],
-        species: data.species,
-        layers: data.layers,
-        url: shareViewUrl,
-        callback: handleShareView
+      // Add legend items based on choropleth data
+      Object.entries(choroplethData.value).forEach(([colorKey, { label, color }]) => {
+        legend.addItem({
+          title: label,
+          typeGeom: 'Point',
+          style: new Style({
+            image: new RegularShape({
+              points: 4, // Rectangle
+              radius: 14,
+              angle: Math.PI / 4,
+              stroke: new Stroke({
+                color: 'gray',
+                width: 1.5
+              }),
+              fill: new Fill({
+                color: color
+              })
+            })
+          })
+        })
+      })
+
+      // Create legend control and add it to the map
+      const legendControl = new LegendControl({
+        legend: legend,
+        target: 'legend'
       })
-      newView.save()
+      map.addControl(legendControl)
     }
 
-    // Handle shared view
-    // Handle shared view
-    function handleShareView (status) {
-      let content
-      if (status.status !== STATUS_CODES.OK) {
-        content = {
-          error: status.msg,
-          visibility: true,
-          url: ''
+    const addTooltip = (map) => {
+      // Create tooltip for displaying feature information
+      const tooltip = new Tooltip({
+        getHTML: function (feature, info) {
+          if (feature !== undefined) {
+            return feature.get('locName').trim()
+          }
+        },
+        positioning: 'center-center',
+        offsetBox: [0, -15]
+      })
+
+      // Add tooltip overlay to the map
+      map.addOverlay(tooltip)
+
+      // Add hover interaction to the status layer
+      map.addInteraction(statusLayerHoverInteraction)
+
+      // Event handler for toggling tooltip visibility
+      statusLayerHoverInteraction.on('change:active', function (e) {
+        // Hide tooltip when hover interaction is disabled
+        if (e.target.get(e.key) === false) {
+          tooltip.hide()
+          tooltip.removeFeature()
         }
-        $store.commit('app/setModal', {
-          id: 'share',
-          content: content
-        })
-      } else {
-        const frontend = $store.getters['app/getFrontendUrl']
-        content = {
-          url: frontend + status.code + '/' + $store.getters['app/getLang'],
-          visibility: true,
-          error: ''
+      })
+
+      // Event handler for handling hover over features
+      statusLayerHoverInteraction.on('hover', function (e) {
+        // Set feature for tooltip display
+        tooltip.setFeature(e.feature)
+
+        // Check if the hovered feature has changed
+        const featureHasChanged = (e.feature !== hoverSelectedFeatureId.value)
+
+        // Update selected feature ID and trigger layer change
+        if (featureHasChanged) {
+          hoverSelectedFeatureId.value = e.feature.getId()
         }
-        $store.commit('app/setModal', {
-          id: 'share',
-          content: content
-        })
-      }
-      context.emit('endShareView', content)
-    }
-    // Load shared view. Get data from database and then handle it
-    // function loadView (viewCode) {
-    // }
-
-    // Handle shared view
-    // function handleLoadView (response) {
-    // }
-
-    function updateMap () {
-      // Save view params into store
-      const newZoom = map.value.map.getView().getZoom()
-      $store.commit('map/setCurrents', {
-        zoom: newZoom,
-        center: transform(
-          map.value.map.getView().getCenter(),
-          'EPSG:3857', 'EPSG:4326'
-        )
+      })
+
+      // Event handler for leaving feature hover
+      statusLayerHoverInteraction.on('leave', function (e) {
+        // Remove and hide tooltip, reset selected feature ID, trigger layer change
+        tooltip.removeFeature()
+        tooltip.hide()
+        hoverSelectedFeatureId.value = undefined
       })
     }
 
-    const reorderLayers = function (wms) {
-      loadWmsLayer(wms)
+    const trans = function (text) {
+      return $store.getters['app/getText'](text)
     }
 
-    const loadWmsLayer = function (wms) {
-      const n = wms.length
-      // Remove previous layers if any, except base layer (index = 0)
-      PREVIOUS_WMS.forEach((layerId) => {
-        const layer = findLayer(layerId)
-        map.value.map.removeLayer(layer)
-      })
-      let nVisibles = 0
-      wms.forEach((layer, index) => {
-        if (layer.visible) {
-          nVisibles += 1
+    function positionChange () {
+      context.emit(
+        'move',
+        {
+          center: toLonLat(
+            map.value.map.getView().getCenter(),
+            projection.value
+          ),
+          zoom: map.value.map.getView().getZoom()
         }
-        try {
-          const wmsSource = new TileWMS({
-            crossOrigin: 'anonymous',
-            projection: 'EPSG:3857',
-            url: layer.wms_url,
-            params: {
-              LAYERS: layer.layer,
-              SRS: 'EPSG:3857'
-            }
-          })
+      )
+    }
 
-          const wmsLayer = new TileLayer({
-            visible: layer.visible,
-            source: wmsSource,
-            opacity: 1 - (layer.transparency),
-            id: layer.id,
-            zIndex: 5 * (n - index)
-          })
-          map.value.map.addLayer(wmsLayer)
-          PREVIOUS_WMS.push(layer.id)
-          // Add layer to dict to handle it from TOC
-        } catch (err) {
-          console.log(err)
+    const statusLayer = new VectorTileLayer({
+      zIndex: 1,
+      source: new VectorTileSource({
+        maxZoom: 9,
+        format: new MVT({
+          featureClass: Feature,
+          idProperty: 'locCode'
+        }),
+        url: tilesUrl + $store.getters['app/getEarlyWarningLayername'] + '@EPSG:900913@pbf/{z}/{x}/{-y}.pbf'
+      }),
+      style: null,
+      properties: {
+        statusProperty: undefined,
+        getFeatureStatus: function (feature) {
+          return feature.get(this.statusProperty)
         }
+      }
+    })
+
+    const selectedStyle = new Style({
+      stroke: new Stroke({
+        color: 'white',
+        width: 2
       })
-      $store.commit('app/setWmsNumberOfVisibleLayers', nVisibles)
-    }
+    })
 
-    const findLayer = function (id) {
-      return map.value.map.getLayers().array_.find((layer) => {
-        return layer.get('id') === id
+    const statusSelectedLayer = new VectorTileLayer({
+      renderMode: 'vector',
+      minZoom: statusLayer.getMinZoom(),
+      maxZoom: statusLayer.getMaxZoom(),
+      zIndex: statusLayer.getZIndex() + 1,
+      source: statusLayer.getSource(),
+      style: function (feature, resolution) {
+        // Check if the feature's ID exists in the gadmHoverSelect object
+        if (feature.getId() === hoverSelectedFeatureId.value) {
+          // If yes, return the selected style
+          return selectedStyle
+        }
+        // If not, no style is applied (feature remains unchanged)
+      }
+    })
+
+    const upperBorderStyle = new Style({
+      stroke: new Stroke({
+        color: mapStyleColor.value.highLevelStroke,
+        width: 0.5
       })
-    }
+    })
+
+    const upperBorderLayer = new VectorTileLayer({
+      renderMode: 'hybrid',
+      source: statusLayer.getSource(), // Source inherited from the original layer
+      style: function (feature, resolution) {
+        if (feature.get('leave') !== 1) {
+          return upperBorderStyle
+        }
+      },
+      maxZoom: 6,
+      zIndex: statusLayer.getZIndex()
+    })
+
+    // Create the VectorTileLayer
+    const gadm0 = new VectorTileLayer({
+      zIndex: 0,
+      preload: Infinity,
+      source: new VectorTileSource({
+        minZoom: 2,
+        maxZoom: 7,
+        format: new MVT({
+          idProperty: 'COUNTRY'
+        }),
+        url: tilesUrl + 'map_gadm:ADM_0' + '@EPSG:900913@pbf/{z}/{x}/{-y}.pbf'
+      }),
+      style: new Style({
+        fill: new Fill({
+          color: mapStyleColor.value.unknown
+        }),
+        stroke: new Stroke({
+          color: mapStyleColor.value.highLevelStroke,
+          width: 0.5
+        })
+      })
+    })
+    gadm0.setBackground(mapStyleColor.value.background)
 
-    const changeLayerProperty = function (payload) {
-      try {
-        const layer = findLayer(payload.layerId)
-        if (payload.key === 'visible') {
-          layer.setVisible(payload.value)
-          if (payload.value) {
-            $store.commit('app/increaseWmsNumberOfVisibleLayers')
+    const statusLayerGroup = new LayerGroup({
+      layers: [gadm0, statusLayer, upperBorderLayer, statusSelectedLayer]
+    })
+
+    const statusLayerHoverInteraction = new Hover({
+      layers: [statusLayer]
+    })
+
+    statusLayerGroup.on('change:opacity', function (e) {
+      statusLayerHoverInteraction.setActive(e.target.get(e.key) >= 0.25)
+    })
+
+    const loadLayer = function (specieCode) {
+      statusLayer.setProperties(
+        {
+          // This is for setting the MVT column to look at
+          statusProperty: specieCode
+        }
+      )
+      statusLayer.setStyle(function (feature, resolution) {
+        if (feature.get('leave') === 1) {
+          // Setting to unknown if undefined.
+          const statusValue = statusLayer.getProperties().getFeatureStatus(feature)
+          const fillColor = statusValue ? choroplethData.value[statusValue].color : mapStyleColor.value.unknown
+
+          let stroke
+          const zoomLevel = map.value.map.getView().getZoom()
+          const codeLevel = feature.get('codeLevel')
+          if ((zoomLevel >= 6 && codeLevel > 4) || codeLevel <= 4) {
+            stroke = new Stroke({
+              color: mapStyleColor.value.lowLevelStroke,
+              width: 0.25
+            })
           } else {
-            $store.commit('app/decreaseWmsNumberOfVisibleLayers')
-          }
-        } else {
-          if (payload.key === 'transparency') {
-            layer.setOpacity(1 - payload.value)
+            // Polygons are not perfect and there are holes between them.
+            // Filling with the same color in order to prevent showing the
+            // base map color between the polygons.
+            stroke = new Stroke({
+              color: fillColor,
+              width: 1
+            })
           }
+
+          return new Style({
+            fill: new Fill({
+              color: fillColor
+            }),
+            stroke: stroke
+          })
         }
-      } catch (err) {
-        console.log(err)
-      }
-    }
-    const fitExtent = function (extent) {
-      map.value.map.getView().fit(extent, { minResolution: 50, nearest: false }
-      )
+      })
     }
 
     const exportPNG = function () {
+      // See: https://openlayers.org/en/latest/examples/export-map.html
       map.value.map.once('rendercomplete', function () {
         const mapCanvas = document.createElement('canvas')
         const size = map.value.map.getSize()
@@ -325,28 +492,58 @@ export default defineComponent({
         )
         mapContext.globalAlpha = 1
         mapContext.setTransform(1, 0, 0, 1, 0, 0)
-        const link = document.getElementById('image-download')
+
+        const link = document.createElement('a')
         link.href = mapCanvas.toDataURL()
+        link.download = 'ma_early_warning_' + props.speciesCode + '.png'
+        link.addEventListener('click', () => {
+          link.remove() // Remove the link element after it's clicked
+        })
         link.click()
+        URL.revokeObjectURL(link.href)
       })
       map.value.map.renderSync()
     }
 
+    const downloadGeopackage = () => {
+      // See: https://gis.stackexchange.com/questions/331984/create-sql-view-in-geopackage-in-geoserver
+      const url = new URL('wfs', $store.getters['app/getmapserverUrl'])
+
+      // Define the list of properties to include in the download
+      const propertyNames = ['geom', 'cntryCode', 'cntryName', 'codeLevel', 'locCode', 'locName', props.speciesCode]
+
+      // Parameters for the request
+      const params = new URLSearchParams({
+        service: 'wfs',
+        version: '2.0.0',
+        request: 'GetFeature',
+        typeNames: $store.getters['app/getEarlyWarningLayername'],
+        outputFormat: 'geopkg',
+        propertyName: propertyNames.join(','),
+        CQL_FILTER: 'leave=1'
+      })
+
+      url.search = params.toString()
+
+      const link = document.createElement('a')
+      link.href = url.toString()
+      link.download = 'ma_early_warning_' + props.speciesCode + '.gpkg'
+      link.addEventListener('click', () => {
+        link.remove() // Remove the link element after it's clicked
+      })
+      link.click()
+      URL.revokeObjectURL(link.href)
+    }
+
     return {
+      projection,
       trans,
-      wmsNumberOfVisibleLayers,
-      fitExtent,
-      reorderLayers,
-      loadWmsLayer,
-      changeLayerProperty,
+      loadLayer,
       exportPNG,
-      baseMap,
-      updateMap,
+      downloadGeopackage,
+      positionChange,
       center,
-      zoom,
       mobile,
-      // loadView,
-      shareWmsView,
       toggleLeftDrawer,
       attrVisible,
       foldingIcon,
@@ -386,7 +583,7 @@ export default defineComponent({
   .ol-zoom button:focus,
   .ol-zoom button{
     background: $primary-button-background;
-    color: $primary-button-text;
+    color: white;
     border: none;
     width: 40px;
     height: 40px;
@@ -490,12 +687,16 @@ export default defineComponent({
 .drawer-handler-mobile span i{
   color: white;
 }
-.wms.ol-download{
+.ol-download{
   bottom: 130px;
   background: transparent;
 }
 
-.wms.ol-download.ol-control button {
+.ol-download.ol-control button i{
+  font-size: 0.8em;
+}
+
+.ol-download.ol-control button {
   // background: $primary-button-background;
   color: white
 }
diff --git a/src/js/ShareMapView.js b/src/js/ShareMapView.js
index 93a7a6c3..f10f4104 100644
--- a/src/js/ShareMapView.js
+++ b/src/js/ShareMapView.js
@@ -78,11 +78,8 @@ export default class ShareMapView {
       dataView.vector = this.options.vector
       dataView.year = this.options.year
       dataView.month = this.options.month
-      dataView.estimation = this.options.estimation
-      dataView.uncertainty = this.options.uncertainty
-      dataView.estimationTransparency = this.options.estimationTransparency
-      dataView.uncertaintyTransparency = this.options.uncertaintyTransparency
-      dataView.uncertaintyColor = this.options.uncertaintyColor
+      dataView.layerIsVisible = this.options.layerIsVisible
+      dataView.estimationOpacity = this.options.estimationOpacity
       dataView.estimationColors = this.options.estimationColors
     } else if (this.options.viewType === 'wms') {
       dataView.species = this.options.species
diff --git a/src/layouts/ModelsLayout.vue b/src/layouts/ModelsLayout.vue
index 6d4d6679..9dfe53fe 100644
--- a/src/layouts/ModelsLayout.vue
+++ b/src/layouts/ModelsLayout.vue
@@ -1,38 +1,44 @@
 <template>
-  <div v-if="estimatesIsVisible">
+  <div>
     <q-layout
       :class="mobile?(expanded?'mobile expanded':'mobile collapsed'):(expanded?'expanded':'collapsed')"
     >
       <site-header v-if="!mobile" :expanded="expanded"/>
       <left-drawer-models ref="TOC"
         :expanded="expanded"
-        @loadModel="loadModel"
-        @clearModel="clearModel"
+        :species-code="mapSpeciesCode"
+        :date="mapDate"
+        :opacity="mapOpacity"
+        :visible="mapIsVisible"
+        :palette="mapPalette"
+        :filters="mapFilters"
+        :lang="lang"
         @toggleLeftDrawer="toggleLeftDrawer"
         @startShareView="startShareView"
-        @checkModelEstimation="checkModelEstimation"
-        @checkModelUncertainty="checkModelUncertainty"
-        @estimationTransparency="estimationTransparency"
-        @uncertaintyTransparency="uncertaintyTransparency"
-        @estimationColorsChanged="estimationColorsChanged"
-        @uncertaintyColorsChanged="uncertaintyColorsChanged"
-        @firstMapCall="buildSession"
+        @speciesCodeChange="handleSpeciesCodeChange"
+        @dateChange="handleDateChange"
+        @opacityChange="handleOpacityChange"
+        @visiblitiyChange="handleVisibilityChange"
+        @filtersLazyChange="handleFiltersChange"
       />
 
       <q-page
         class='flex'
         :class="mobile?(expanded?'mobile expanded':'mobile collapsed'):(expanded?'expanded':'collapsed')"
       >
-        <the-map-models ref='map'
-          init
-          :viewCode="viewCode"
-          :class="expanded?'drawer-expanded':'drawer-collapsed'"
+        <the-map-models ref='map' init
+          :species-code="mapSpeciesCode"
+          :date="mapDate"
+          :visible="mapIsVisible"
+          :display-choropleth="mapDisplayChoropleth"
+          :opacity="mapOpacity"
+          :filters="mapFilters"
+          :palette="mapPalette"
+          :lon="mapLon"
+          :lat="mapLat"
+          :zoom="mapZoom"
+          @move="handleMapChange"
           @toggleLeftDrawer="toggleLeftDrawer"
-          @workerFinishedIndexing="workerFinishedIndexing"
-          @endShareView="endShareView"
-          @setModelDate="setModelDate"
-          @loadSharedModel="loadSharedModel"
-          @errorDownloadingModels="errorDownloadingModels"
         />
       </q-page>
 
@@ -63,9 +69,6 @@
       <cookies-compliance/>
     </q-layout>
   </div>
-  <router-link v-else to="/">
-    <page-error-not-found/>
-  </router-link>
 </template>
 
 <script>
@@ -79,18 +82,14 @@ import ModalInfo from 'src/components/ModalInfo.vue'
 import ModalShare from 'src/components/ModalShare.vue'
 import ModalHelp from 'src/components/ModalHelp.vue'
 import ModalError from 'src/components/ModalError.vue'
-import PageErrorNotFound from 'src/components/PageErrorNotFound.vue'
 import ModalWait from 'src/components/ModalWait.vue'
 import SiteHeader from 'components/SiteHeader.vue'
 import SiteFooter from 'components/SiteFooter.vue'
 import LeftDrawerModels from 'components/LeftDrawerModels.vue'
 import TheMapModels from 'components/TheMapModels.vue'
-import { computed, ref } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-import MSession from '../js/session.js'
-
-// import moment from 'moment'
+import { useRoute, useRouter } from 'vue-router'
 
 export default {
   components: {
@@ -98,7 +97,6 @@ export default {
     ModalShare,
     ModalHelp,
     ModalError,
-    PageErrorNotFound,
     ModalLogin,
     ModalConfirmLogout,
     ModalLogos,
@@ -111,39 +109,100 @@ export default {
     ModalCookiePolicy,
     CookiesCompliance
   },
-  setup () {
-    let mySession
+  props: {
+    speciesCode: {
+      type: String
+    },
+    year: {
+      type: Number
+    },
+    month: {
+      type: Number
+    },
+    lang: {
+      type: String,
+      default: 'en'
+    }
+  },
+  setup (props) {
+    const router = useRouter()
     const route = useRoute()
+    const $store = useStore()
+
     const map = ref('null')
     const shareModal = ref()
     const TOC = ref()
-    const timeseries = ref()
-    const $store = useStore()
-    const lang = (route.params) ? ((route.params.lang) ? route.params.lang : '') : ''
 
-    $store.commit('timeseries/setGraphIsVisible', false)
+    const mobile = computed(() => {
+      return $store.getters['app/getIsMobile']
+    })
+    const expanded = ref(!mobile.value)
 
-    if (lang) {
-      $store.dispatch('app/setInitData', lang.toLocaleLowerCase())
-    }
+    // Map props
+    const mapSpeciesCode = ref(props.speciesCode || $store.getters['app/getEncounterProbabilitySpecieCode'])
+    const mapDate = ref(
+      [props.year, props.month].every(item => item !== undefined)
+        ? new Date(props.year, props.month - 1)
+        : $store.getters['app/getEncounterProbabilityDate'] || undefined
+    )
+    watch(mapDate, (newValue) => {
+      $store.commit('app/setEncounterProbabilityDate', newValue)
+    })
 
-    const viewCode = (route.params) ? ((route.params.code) ? route.params.code : '') : ''
-    const backend = $store.getters['app/getBackend']
+    const mapPalette = ref(['#fef0d9', '#fdd49e', '#fdbb84', '#fc8d59', '#e34a33', '#b30000'])
 
-    const estimatesIsVisible = computed(() => {
-      const tabs = $store.getters['app/getLeftMenuTabs']
-      if (Object.keys(tabs).length) {
-        return tabs.estimates.active
-      } else {
-        return true
+    const mapIsVisible = ref(true)
+    const mapOpacity = ref(1)
+    const mapFilters = ref({
+      certaintyRange: {
+        min: route.query.min_certainty || 0,
+        max: route.query.max_certainty || 1
       }
     })
 
-    const mobile = computed(() => {
-      return $store.getters['app/getIsMobile']
+    const mapDisplayChoropleth = computed(() => {
+      return [mapSpeciesCode.value, mapDate.value].every(item => item !== undefined)
     })
 
-    const expanded = ref(!mobile.value)
+    const mapLon = ref($store.getters['map/getCurrents'].CENTER[0])
+    const mapLat = ref($store.getters['map/getCurrents'].CENTER[1])
+    const mapZoom = ref(mobile.value ? $store.getters['map/getCurrents'].MOBILEZOOM : $store.getters['map/getCurrents'].ZOOM)
+
+    watch([mapSpeciesCode, mapDate, mapLon, mapLat, mapZoom, mapFilters], () => {
+      updateRouterQuery()
+    }, { deep: true })
+
+    watch(mapSpeciesCode, (newValue, oldValue) => {
+      $store.commit('app/setEncounterProbabilitySpecieCode', newValue)
+    })
+
+    onMounted(() => {
+      if (props.lang) {
+        $store.dispatch('app/setInitData', props.lang.toLocaleLowerCase())
+      }
+
+      // Parse initial values from route query
+      if (route.query.lon) mapLon.value = parseFloat(route.query.lon)
+      if (route.query.lat) mapLat.value = parseFloat(route.query.lat)
+      if (route.query.zoom) mapZoom.value = parseFloat(route.query.zoom)
+    })
+
+    const updateRouterQuery = () => {
+      router.push({
+        query: {
+          lon: mapLon.value?.toFixed(5),
+          lat: mapLat.value?.toFixed(5),
+          zoom: mapZoom.value,
+          min_certainty: mapFilters.value?.certaintyRange.min !== 0 ? mapFilters.value?.certaintyRange.min : undefined,
+          max_certainty: mapFilters.value?.certaintyRange.max !== 1 ? mapFilters.value?.certaintyRange.max : undefined
+        },
+        params: {
+          speciesCode: mapSpeciesCode.value,
+          month: (mapDate.value ? (mapDate.value.getMonth() + 1).toString().padStart(2, '0') : undefined),
+          year: mapDate.value?.getFullYear()
+        }
+      })
+    }
 
     const infoModalVisible = computed(() => {
       return $store.getters['app/getModals'].info.visibility
@@ -161,22 +220,6 @@ export default {
       return $store.getters['app/getModals'].share.visibility
     })
 
-    const buildSession = function () {
-      mySession = new MSession(backend, $store.getters['app/getCsrfToken'])
-      mySession.getSession(buildMap)
-    }
-
-    const buildMap = function () {
-      $store.commit('app/setCsrfToken', mySession.csrfToken)
-      if (viewCode) {
-        map.value.loadView('M-' + viewCode)
-      }
-    }
-
-    const shareView = function () {
-      map.value.shareModelView()
-    }
-
     const toggleLeftDrawer = function () {
       expanded.value = !expanded.value
       resizeMap({ start: 0, end: 400 })
@@ -192,100 +235,79 @@ export default {
       }
     }
 
-    const endShareView = function (payload) {
-      shareModal.value.viewContent = payload
-    }
-
-    const workerFinishedIndexing = function (payload) {
-      if (payload.mapFilters.locations.length) {
-        TOC.value.searchLocation.loading = false
+    const startShareView = function () {
+      const payload = {
+        url: new URL(route.fullPath, window.location.origin).href,
+        visibility: true,
+        error: ''
       }
+      $store.commit('app/setModal', {
+        id: 'share',
+        content: payload
+      })
+      shareModal.value.viewContent = payload
     }
 
-    const loadModel = function (payload) {
-      map.value.loadModel(payload)
-    }
-
-    const clearModel = function () {
-      map.value.clearModel()
-    }
-
-    const setModelDate = function (payload) {
-      TOC.value.inputDate = payload
-    }
-
-    const checkModelEstimation = function (payload) {
-      map.value.estimationVisibility(payload.status)
-    }
-
-    const checkModelUncertainty = function (payload) {
-      map.value.uncertaintyVisibility(payload.status)
-    }
-
-    const estimationTransparency = function (payload) {
-      $store.commit('app/setEstimationTransparency', payload.transparency)
-      const t = 1 - (payload.transparency / 100)
-      map.value.estimationOpacity(t)
+    const handleSpeciesCodeChange = (value) => {
+      mapSpeciesCode.value = value
     }
 
-    const uncertaintyTransparency = function (payload) {
-      $store.commit('app/setUncertaintyTransparency', payload.transparency)
-      const t = 1 - (payload.transparency / 100)
-      map.value.uncertaintyOpacity(t)
+    const handleDateChange = (value) => {
+      mapDate.value = value
     }
 
-    const loadSharedModel = function (payload) {
-      TOC.value.loadSharedModel(payload)
+    const handleOpacityChange = (value) => {
+      mapOpacity.value = value
     }
 
-    const errorDownloadingModels = function (payload) {
-      TOC.value.errorDownloadingModels(payload)
+    const handleVisibilityChange = (value) => {
+      mapIsVisible.value = value
     }
 
-    const estimationColorsChanged = function () {
-      map.value.estimationRefresh()
+    const handleFiltersChange = (value) => {
+      mapFilters.value = value
     }
 
-    const uncertaintyColorsChanged = function () {
-      map.value.uncertaintyRefresh()
-    }
+    const handleMapChange = (newPosition) => {
+      mapLon.value = newPosition.center[0]
+      mapLat.value = newPosition.center[1]
+      mapZoom.value = newPosition.zoom
 
-    const startShareView = function () {
-      map.value.shareModelView()
+      $store.commit('map/setCurrents', {
+        zoom: mapZoom.value,
+        center: [mapLon.value, mapLat.value]
+      })
     }
 
     return {
-      estimatesIsVisible,
-      errorDownloadingModels,
-      estimationColorsChanged,
-      uncertaintyColorsChanged,
-      loadSharedModel,
-      checkModelEstimation,
-      checkModelUncertainty,
-      estimationTransparency,
-      uncertaintyTransparency,
-      viewCode,
-      mobile,
+      mapSpeciesCode,
+      mapDate,
+      mapOpacity,
+      mapIsVisible,
+      mapFilters,
+      mapDisplayChoropleth,
+      mapPalette,
+      mapLon,
+      mapLat,
+      mapZoom,
       expanded,
-      workerFinishedIndexing,
+      mobile,
       toggleLeftDrawer,
-      shareView,
+      startShareView,
+      handleSpeciesCodeChange,
+      handleDateChange,
+      handleOpacityChange,
+      handleVisibilityChange,
+      handleFiltersChange,
+      handleMapChange,
       shareModal,
-      endShareView,
       shareModalVisible,
       infoModalVisible,
       helpModalVisible,
       errorModalVisible,
       map,
       TOC,
-      timeseries,
-      resizeMap,
-      loadModel,
-      clearModel,
-      setModelDate,
-      CookiesCompliance,
-      buildSession,
-      startShareView
+      CookiesCompliance
     }
   }
 }
diff --git a/src/layouts/WMSLayout.vue b/src/layouts/WMSLayout.vue
index 0a7187ea..a1198a40 100644
--- a/src/layouts/WMSLayout.vue
+++ b/src/layouts/WMSLayout.vue
@@ -1,17 +1,28 @@
 <template>
-  <div v-if="tabIsVisible">
+  <div>
     <q-layout
       :class="mobile ? (expanded ? 'mobile expanded' : 'mobile collapsed') : (expanded ? 'expanded' : 'collapsed')">
       <site-header v-if="!mobile" :expanded="expanded" />
-      <left-drawer-wms v-if="loadDrawer" ref="TOC" :expanded="expanded" @toggleLeftDrawer="toggleLeftDrawer"
-        @startShareView="startShareView" @firstMapCall="buildSession" @loadWms="loadWms" @layerChange="layerChange"
-        @reorderLayers="reorderLayers" @exportImage="exportImage" />
+      <left-drawer-wms ref="TOC"
+        :expanded="expanded"
+        :species-code="mapSpeciesCode"
+        @toggleLeftDrawer="toggleLeftDrawer"
+        @startShareView="startShareView"
+        @speciesCodeChange="handleSpeciesCodeChange"
+        @visibilityChange="handleVisibilityChange"
+        @opacityChange="handleOpacityChange"/>
 
       <q-page class='flex'
         :class="mobile ? (expanded ? 'mobile expanded' : 'mobile collapsed') : (expanded ? 'expanded' : 'collapsed')">
-        <the-map-wms ref='map' init :viewCode="viewCode" :class="expanded ? 'drawer-expanded' : 'drawer-collapsed'"
-          @toggleLeftDrawer="toggleLeftDrawer" @endShareView="endShareView"
-          @errorDownloadingModels="errorDownloadingModels" />
+        <the-map-wms ref='map' init
+          :species-code="mapSpeciesCode"
+          :visible="mapIsVisible"
+          :opacity="mapOpacity"
+          :lon="mapLon"
+          :lat="mapLat"
+          :zoom="mapZoom"
+          @move="handleMapChange"
+          @toggleLeftDrawer="toggleLeftDrawer"/>
       </q-page>
 
       <modal-share ref="shareModal" :open="shareModalVisible">
@@ -30,17 +41,14 @@
       <modal-wait />
       <modal-logos />
       <modal-error />
-      <modal-cookie-settings />
       <modal-login />
+      <modal-cookie-settings />
       <modal-cookie-policy />
 
       <site-footer />
       <cookies-compliance />
     </q-layout>
   </div>
-  <router-link v-else to="/">
-    <page-error-not-found />
-  </router-link>
 </template>
 
 <script>
@@ -54,19 +62,14 @@ import ModalInfo from 'src/components/ModalInfo.vue'
 import ModalShare from 'src/components/ModalShare.vue'
 import ModalHelp from 'src/components/ModalHelp.vue'
 import ModalError from 'src/components/ModalError.vue'
-import PageErrorNotFound from 'src/components/PageErrorNotFound.vue'
 import ModalWait from 'src/components/ModalWait.vue'
 import SiteHeader from 'components/SiteHeader.vue'
 import SiteFooter from 'components/SiteFooter.vue'
 import LeftDrawerWms from 'components/LeftDrawerWms.vue'
 import TheMapWms from 'components/TheMapWms.vue'
-import { computed, ref } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useStore } from 'vuex'
-import { useRoute } from 'vue-router'
-import MSession from '../js/session.js'
-import ShareMapView from '../js/ShareMapView'
-import { StatusCodes as STATUS_CODES } from 'http-status-codes'
-// import moment from 'moment'
+import { useRoute, useRouter } from 'vue-router'
 
 export default {
   components: {
@@ -74,7 +77,6 @@ export default {
     ModalShare,
     ModalHelp,
     ModalError,
-    PageErrorNotFound,
     ModalLogin,
     ModalConfirmLogout,
     ModalLogos,
@@ -87,44 +89,69 @@ export default {
     ModalCookiePolicy,
     CookiesCompliance
   },
-  setup () {
-    let mySession
+  props: {
+    speciesCode: {
+      type: String
+    },
+    lang: {
+      type: String
+    }
+  },
+  setup (props) {
     const route = useRoute()
+    const router = useRouter()
+    const $store = useStore()
+
     const map = ref('null')
     const shareModal = ref()
     const TOC = ref()
-    const loadDrawer = ref(false)
-    const $store = useStore()
-    const lang = (route.params) ? ((route.params.lang) ? route.params.lang : '') : ''
 
-    async function getInitData () {
-      await $store.dispatch('app/setInitData', lang.toLocaleLowerCase())
-      loadDrawer.value = true
-    }
-    $store.commit('timeseries/setGraphIsVisible', false)
-    if (lang) {
-      getInitData()
-    } else {
-      loadDrawer.value = true
-    }
+    const mobile = computed(() => {
+      return $store.getters['app/getIsMobile']
+    })
+    const expanded = ref(!mobile.value)
 
-    const viewCode = (route.params) ? ((route.params.code) ? route.params.code : '') : ''
-    const backend = $store.getters['app/getBackend']
+    // Map props
+    const mapSpeciesCode = ref(props.speciesCode || $store.getters['app/getEarlyWarningSpecieCode'])
 
-    const tabIsVisible = computed(() => {
-      const tabs = $store.getters['app/getLeftMenuTabs']
-      if (Object.keys(tabs).length) {
-        return tabs.distribution.active
-      } else {
-        return true
-      }
+    const mapIsVisible = ref(true)
+    const mapOpacity = ref()
+
+    const mapLon = ref($store.getters['map/getCurrents'].CENTER[0])
+    const mapLat = ref($store.getters['map/getCurrents'].CENTER[1])
+    const mapZoom = ref(mobile.value ? $store.getters['map/getCurrents'].MOBILEZOOM : $store.getters['map/getCurrents'].ZOOM)
+
+    watch(mapSpeciesCode, (newValue, oldValue) => {
+      $store.commit('app/setEarlyWarningSpecieCode', newValue)
     })
 
-    const mobile = computed(() => {
-      return $store.getters['app/getIsMobile']
+    watch([mapSpeciesCode, mapLon, mapLat, mapZoom], () => {
+      updateRouterQuery()
     })
 
-    const expanded = ref(!mobile.value)
+    onMounted(() => {
+      if (props.lang) {
+        $store.dispatch('app/setInitData', props.lang.toLocaleLowerCase())
+      }
+
+      // Parse initial values from route query
+      if (route.query.lon) mapLon.value = parseFloat(route.query.lon)
+      if (route.query.lat) mapLat.value = parseFloat(route.query.lat)
+      if (route.query.zoom) mapZoom.value = parseFloat(route.query.zoom)
+    })
+
+    const updateRouterQuery = () => {
+      router.push({
+        query: {
+          lon: mapLon.value?.toFixed(5),
+          lat: mapLat.value?.toFixed(5),
+          zoom: mapZoom.value
+        },
+        params: {
+          speciesCode: mapSpeciesCode.value
+        }
+      })
+    }
 
     const infoModalVisible = computed(() => {
       return $store.getters['app/getModals'].info.visibility
@@ -142,50 +169,6 @@ export default {
       return $store.getters['app/getModals'].share.visibility
     })
 
-    const buildSession = function () {
-      mySession = new MSession(backend, $store.getters['app/getCsrfToken'])
-      mySession.getSession(buildMap)
-    }
-
-    const buildMap = function () {
-      $store.commit('app/setCsrfToken', mySession.csrfToken)
-      const backendUrl = $store.getters['app/getBackend']
-      const loadViewUrl = backendUrl + 'view/load/'
-
-      // if loading previously shared view
-      if (viewCode) {
-        const wmsCode = 'W-' + viewCode
-        const newView = new ShareMapView(null, {
-          url: loadViewUrl + wmsCode + '/',
-          csrfToken: $store.getters['app/getCsrfToken']
-        })
-        newView.load(handleLoadView)
-      }
-    }
-
-    const handleLoadView = function (data) {
-      if (data.status === STATUS_CODES.OK) {
-        const viewProperties = JSON.parse(data.view[0].view)
-        map.value.fitExtent(viewProperties.extent)
-        TOC.value.setForm(viewProperties)
-      } else {
-        const frontend = $store.getters['app/getFrontendUrl']
-        const content = {
-          url: frontend + data.status + '/' + $store.getters['app/getLang'],
-          visibility: true,
-          error: ''
-        }
-        $store.commit('app/setModal', {
-          id: 'share',
-          content: content
-        })
-      }
-    }
-
-    const shareView = function () {
-      map.value.shareModelView()
-    }
-
     const toggleLeftDrawer = function () {
       expanded.value = !expanded.value
       resizeMap({ start: 0, end: 400 })
@@ -201,62 +184,65 @@ export default {
       }
     }
 
-    const endShareView = function (payload) {
+    const startShareView = function (data) {
+      const payload = {
+        url: new URL(route.fullPath, window.location.origin).href,
+        visibility: true,
+        error: ''
+      }
+      $store.commit('app/setModal', {
+        id: 'share',
+        content: payload
+      })
       shareModal.value.viewContent = payload
     }
 
-    const loadSharedModel = function (payload) {
-      TOC.value.loadSharedModel(payload)
+    const handleSpeciesCodeChange = (value) => {
+      mapSpeciesCode.value = value
     }
 
-    const errorDownloadingModels = function (payload) {
-      TOC.value.errorDownloadingModels(payload)
+    const handleOpacityChange = (value) => {
+      mapOpacity.value = value
     }
 
-    const startShareView = function (data) {
-      map.value.shareWmsView(data)
+    const handleVisibilityChange = (value) => {
+      mapIsVisible.value = value
     }
 
-    const loadWms = function (data) {
-      map.value.loadWmsLayer(data)
-    }
+    const handleMapChange = (newPosition) => {
+      mapLon.value = newPosition.center[0]
+      mapLat.value = newPosition.center[1]
+      mapZoom.value = newPosition.zoom
 
-    const layerChange = function (payload) {
-      map.value.changeLayerProperty(payload)
+      $store.commit('map/setCurrents', {
+        zoom: mapZoom.value,
+        center: [mapLon.value, mapLat.value]
+      })
     }
 
-    const reorderLayers = function (payload) {
-      map.value.reorderLayers(payload)
-    }
-
-    const exportImage = function () {
-      map.value.exportPNG()
-    }
     return {
-      tabIsVisible,
-      exportImage,
-      loadDrawer,
-      loadWms,
-      layerChange,
-      reorderLayers,
-      errorDownloadingModels,
-      loadSharedModel,
-      viewCode,
+      mapOpacity,
+      mapSpeciesCode,
+      mapIsVisible,
+      mapLon,
+      mapLat,
+      mapZoom,
       mobile,
       expanded,
       toggleLeftDrawer,
-      shareView,
+      startShareView,
+      handleSpeciesCodeChange,
+      handleOpacityChange,
+      handleVisibilityChange,
+      handleMapChange,
       shareModal,
-      endShareView,
       shareModalVisible,
       infoModalVisible,
       helpModalVisible,
       errorModalVisible,
       map,
       TOC,
-      CookiesCompliance,
-      buildSession,
-      startShareView
+      CookiesCompliance
     }
   }
 }
diff --git a/src/router/routes.js b/src/router/routes.js
index c38ffcad..4d40cd2f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,91 +1,64 @@
 
 const routes = [
-  // DEFAULT PAGE
+  // REPORT PAGE
   {
-    path: '/',
-    component: () => import('layouts/MainLayout.vue'),
-    props: { initView: false }
+    path: '/:lang(\\w{2})?/reports',
+    alias: '/:lang(\\w{2})?',
+    name: 'reports',
+    component: () => import('layouts/MainLayout.vue')
   },
-  // DEFAULT WITH LANG
+  // DISTRIBUTION WITH LANG
   {
-    path: '/:lang(ca|es|en)',
-    component: () => import('layouts/MainLayout.vue'),
-    props: { initView: false }
+    path: '/:lang(\\w{2})?/distribution',
+    redirect: { path: '/early_warning/', permanent: true }
   },
-  // MODELS TAB
+  // Old WMS share permalink
   {
-    path: '/models',
-    component: () => import('layouts/ModelsLayout.vue')
+    path: '/:lang(\\w{2})?/W-:code([a-zA-Z0-9]{4})',
+    redirect: { path: '/early_warning/', permanent: true }
   },
-  // MODELS WITH LANG
+  // EARLY WARNING LANG
   {
-    path: '/models/:lang(ca|es|en)',
-    component: () => import('layouts/ModelsLayout.vue')
+    path: '/:lang(\\w{2})?/early_warning/:speciesCode?',
+    component: () => import('layouts/WMSLayout.vue'),
+    name: 'early_warning',
+    props: true
   },
-  // DISTRIBUTION TAB
+  // MODELS TAB
   {
-    path: '/distribution',
-    component: () => import('layouts/WMSLayout.vue')
+    path: '/:lang(\\w{2})?/models/:speciesCode?/:year(\\d{4})?/:month(\\d{2})?',
+    component: () => import('layouts/ModelsLayout.vue'),
+    name: 'models',
+    props: (route) => ({
+      ...route.params,
+      year: route.params.year ? parseInt(route.params.year) : undefined,
+      month: route.params.month ? parseInt(route.params.month) : undefined
+    })
   },
-  // MODELS WITH LANG
+  // Old shared model permalink
   {
-    path: '/distribution/:lang(ca|es|en)',
-    component: () => import('layouts/WMSLayout.vue')
+    path: '/:lang(\\w{2})?/M-:code([a-zA-Z0-9]{4})',
+    redirect: { path: '/models/', permanent: true }
   },
   // SHARE OBSERVATIONS VIEW
   {
-    path: '/:code([a-zA-Z0-9]{4})',
-    component: () => import('layouts/MainLayout.vue')
-  },
-  // SHARE OBSERVATIONS VIEW WITH LANG
-  {
-    path: '/:code([a-zA-Z0-9]{4})/:lang(ca|es|en)',
+    path: '/:lang(\\w{2})?/:code([a-zA-Z0-9]{4})',
     component: () => import('layouts/MainLayout.vue')
   },
-  // SHARE MODELS VIEW
-  {
-    path: '/M-:code([a-zA-Z0-9]{4})',
-    component: () => import('layouts/ModelsLayout.vue')
-  },
-  // SHARE MODELS VIEW WITH LANG
-  {
-    path: '/M-:code([a-zA-Z0-9]{4})/:lang(ca|es|en)',
-    component: () => import('layouts/ModelsLayout.vue')
-  },
-  // SHARE distribution VIEW
-  {
-    path: '/W-:code([a-zA-Z0-9]{4})',
-    component: () => import('layouts/WMSLayout.vue')
-  },
-  // SHARE WMS VIEW WITH LANG
-  {
-    path: '/W-:code([a-zA-Z0-9]{4})/:lang(ca|es|en)',
-    component: () => import('layouts/WMSLayout.vue')
-  },
   {
     // Set the accepted characters and length of reports view
-    path: '/:report([a-zA-Z0-9]{6})',
-    component: () => import('layouts/ReportsLayout.vue')
-  },
-  {
-    // Set the accepted characters and length of reports view with lang
-    path: '/:report([a-zA-Z0-9]{6})/:lang(ca|es|en)',
+    path: '/:lang(\\w{2})?/report(s)?/:report([a-zA-Z0-9]{6})',
     component: () => import('layouts/ReportsLayout.vue')
   },
   {
     // Only one feature map (by observation long id)
-    path: '/:code([-a-zA-Z0-9]{36})',
-    component: () => import('src/layouts/OneFeatureLayout.vue')
-  },
-  {
-    // Only one feature map (by observation long id) with lang
-    path: '/:code([-a-zA-Z0-9]{36})/:lang(ca|es|en)',
+    path: '/:lang(\\w{2})?/report(s)?/:code([-a-zA-Z0-9]{36})',
     component: () => import('src/layouts/OneFeatureLayout.vue')
   },
   // Always leave this as last one,
   // but you can also remove it
   {
-    path: '/:catchAll(.*)*',
+    path: '/:pathMatch(.*)',
     component: () => import('pages/Error404.vue')
   }
 ]
diff --git a/src/store/app/actions.js b/src/store/app/actions.js
index 4f25ab32..606855a1 100644
--- a/src/store/app/actions.js
+++ b/src/store/app/actions.js
@@ -14,15 +14,7 @@ export const setTranslations = async (context) => {
     withCredentials: true
   }).then(function (resp) {
     context.commit('setTranslations', resp.data.trans)
-    context.commit('setTabsVisibility', resp.data.config.tabs)
-    context.commit('setWMSsetWmsData', resp.data.config.wms)
 
-    const key = Object.keys(resp.data.config.wms)[0]
-    const layer = resp.data.config.wms[key][0]
-    context.commit('setLegendData', {
-      wms_url: layer.wms_url,
-      layer: layer.layer
-    })
     const registered = ('registered-user' in resp.data) ? resp.data['registered-user'] : false
     context.commit('setAuthorized', registered)
   })
diff --git a/src/store/app/getters.js b/src/store/app/getters.js
index 8fe8c5a8..5d6f432b 100644
--- a/src/store/app/getters.js
+++ b/src/store/app/getters.js
@@ -115,10 +115,6 @@ export const getGridSize = state => {
   return state.gridsize
 }
 
-export const getModelDefaults = state => {
-  return state.DEFAULTS.model
-}
-
 export const getAuthenticateUrl = state => {
   return state.authenticateUrl
 }
@@ -131,16 +127,8 @@ export const getRegisteredWebUrl = state => {
   return state.registeredWebUrl
 }
 
-export const getEstimationColors = state => {
-  return state.DEFAULTS.model.estimationColors
-}
-
-export const getUncertaintyColor = state => {
-  return state.DEFAULTS.model.uncertaintyColor
-}
-
-export const getEstimationPalettes = state => {
-  return state.DEFAULTS.model.estimationPalettes
+export const getmapserverUrl = state => {
+  return state.mapserverUrl
 }
 
 export const getTilesUrl = state => {
@@ -155,35 +143,23 @@ export const getPossibleCategories = state => {
   return state.possibleCategories
 }
 
-export const getLeftMenuTabs = state => {
-  return state.leftMenuTabs
-}
-
-export const getWmsTabLayers = state => {
-  return state.wmsTabLayers
-}
-
-export const getSelectedWmsLayers = state => {
-  return state.selectedWmsLayer
-}
-
-export const getWmsDataFromServer = state => {
-  console.log('in getter to get ')
-  return state.getWmsDataFromServer === true
+export const getEarlyWarningLayername = state => {
+  return state.earlyWarning.mapserverLayerName
 }
 
-export const getWmsData = state => {
-  return state.WMS
+export const getEarlyWarningSpecieCode = state => {
+  return state.earlyWarning.specieCode
 }
 
-export const getCurrentWMSView = state => {
-  return state.currentWMSView
+// encounterProbability
+export const getEncounterProbabilitySpecieCode = state => {
+  return state.encounterProbability.specieCode
 }
 
-export const wmsNumberOfVisibleLayers = state => {
-  return state.wmsNumberOfVisibleLayers
+export const getEncounterProbabilityDate = state => {
+  return state.encounterProbability.date
 }
 
-export const legendData = state => {
-  return state.legendData
+export const getEncounterProbabilityFilterCertaintyRange = state => {
+  return state.encounterProbability.filters.certaintyRange
 }
diff --git a/src/store/app/mutations.js b/src/store/app/mutations.js
index 13a960ad..7c3ad817 100644
--- a/src/store/app/mutations.js
+++ b/src/store/app/mutations.js
@@ -1,5 +1,3 @@
-import { getWmsDataFromServer } from './getters'
-
 export const setErrorMessage = (state, message) => {
   state.errorMessage = message
 }
@@ -12,10 +10,6 @@ export const setTranslations = (state, payload) => {
   state.trans = payload
 }
 
-export const setTabsVisibility = (state, payload) => {
-  state.leftMenuTabs = payload
-}
-
 export const setAuthorized = (state, payload) => {
   state.authorized = payload
 }
@@ -70,36 +64,6 @@ export const setCalendarSubtitle = (state, payload) => {
   state.calendarSubtitle = payload
 }
 
-export const setModelDefaults = (state, payload) => {
-  state.DEFAULTS.model = payload
-}
-
-export const setModelEstimation = (state, payload) => {
-  state.DEFAULTS.model.estimation = payload
-}
-
-export const setModelUncertainty = (state, payload) => {
-  state.DEFAULTS.model.uncertainty = payload
-}
-
-export const setUncertaintyColor = (state, payload) => {
-  state.DEFAULTS.model.uncertaintyColor = payload
-}
-
-export const setEstimationTransparency = (state, payload) => {
-  state.DEFAULTS.model.estimationTransparency = payload
-  state.DEFAULTS.model.estimationOpacity = 1 - (payload / 100)
-}
-
-export const setUncertaintyTransparency = (state, payload) => {
-  state.DEFAULTS.model.uncertaintyTransparency = payload
-  state.DEFAULTS.model.uncertaintyOpacity = 1 - (payload / 100)
-}
-
-export const setEstimationColors = (state, payload) => {
-  state.DEFAULTS.model.estimationColors = payload
-}
-
 export const deactivateLayerIcon = (state, payload) => {
   state.layers[payload.type][payload.code].active = false
 }
@@ -112,50 +76,19 @@ export const setActiveLayer = (state, payload) => {
   state.layers[payload.type][payload.code].active = payload.active
 }
 
-export const setWmsTabLayers = (state, payload) => {
-  state.wmsTabLayers = payload
-}
-
-export const setSelectedWmsLayers = (state, payload) => {
-  state.selectedWmsLayer = payload
-}
-
-export const setWMSsetWmsData = (state, data) => {
-  if (getWmsDataFromServer) {
-    state.WMS = data
-  } else {
-    console.log('No server data allowed. Check configuration file')
-  }
-}
-
-export const setLegendData = (state, payload) => {
-  state.legendData = payload
-}
-
-export const setWMSLayers = (state, payload) => {
-  state.WMS[payload.species] = payload.layers
-}
-
-export const setCurrentWMSView = (state, payload) => {
-  state.currentWMSView = payload
-}
-
-export const setWmsProperties = (state, payload) => {
-  const index = state.currentWMSView.years.findIndex((e) => {
-    return e.id === payload.id
-  })
-  state.currentWMSView.years[index][payload.property] = payload.value
-  state.WMS[payload.species][index][payload.property] = payload.value
+export const setEarlyWarningSpecieCode = (state, code) => {
+  state.earlyWarning.specieCode = code
 }
 
-export const setWmsNumberOfVisibleLayers = (state, n) => {
-  state.wmsNumberOfVisibleLayers = n
+// encounterProbability
+export const setEncounterProbabilitySpecieCode = (state, value) => {
+  state.encounterProbability.specieCode = value
 }
 
-export const increaseWmsNumberOfVisibleLayers = (state, n) => {
-  state.wmsNumberOfVisibleLayers += 1
+export const setEncounterProbabilityDate = (state, value) => {
+  state.encounterProbability.date = value
 }
 
-export const decreaseWmsNumberOfVisibleLayers = (state, n) => {
-  state.wmsNumberOfVisibleLayers -= 1
+export const setEncounterProbabilityFilterCertaintyRange = (state, value) => {
+  state.encounterProbability.filters.certaintyRange = value
 }
diff --git a/src/store/app/state.js b/src/store/app/state.js
index ec6ecdc9..ef4bb4da 100644
--- a/src/store/app/state.js
+++ b/src/store/app/state.js
@@ -29,7 +29,7 @@ export default function () {
   }
 
   if (process.env.DEV) {
-    backendUrl = 'http://localhost:8000/'
+    backendUrl = 'api_v1_prod/' // See quasar.conf.js for proxy settings.
     frontendUrl = 'http://localhost:8080/'
     analyticsCode = 'GTM-M5PRMJ9'
   } else {
@@ -63,14 +63,6 @@ export default function () {
     currentUrl = currentUrl.slice(0, -1)
   }
 
-  if (langKeys.indexOf(currentUrl.toLowerCase().slice(-2)) === -1) {
-    const nextURL = currentUrl + '/' + defaultLang
-    const nextTitle = 'MosquitoAlert'
-    const nextState = { additionalInformation: 'Updated the URL with JS' }
-    window.history.pushState(nextState, nextTitle, nextURL)
-    window.history.replaceState(nextState, nextTitle, nextURL)
-  }
-
   // FORCE SPANISH
   // const defaultLang = (allowedLangs.includes(browserLang)) ? 'es' : allowedLangs[0]
 
@@ -102,7 +94,6 @@ export default function () {
     csrfToken: null,
     authorized: false,
     errorMessage: '',
-    leftMenuTabs: {},
     wmsTabLayers: {},
     selectedWmsLayer: {},
     browser: fnBrowserDetect(),
@@ -124,8 +115,8 @@ export default function () {
     modelsUrl: 'https://webserver.mosquitoalert.com/static/models/global_minimal_model_estimates/',
 
     // URL of vector tiles
-    tilesUrl: 'https://api.mosquitoalert.com/v1/map/tiles',
-    // tilesUrl: '//localhost:8000/api/tiles',
+    mapserverUrl: 'https://mapserver-ifca.mosquitoalert.com/geoserver/',
+    tilesUrl: 'https://mapserver-ifca.mosquitoalert.com/geoserver/gwc/service/tms/1.0.0/',
 
     // Grid size of cell format models
     gridsize: 0.025,
@@ -138,36 +129,36 @@ export default function () {
     // Info about models.
     modelsProperties: {
       gadm0: {
-        minZoom: 0,
-        maxZoom: 0,
+        minZoom: undefined,
+        maxZoom: 2,
         id: 'ID_0', // id column name
         est: 'est', // estimation column name
         se: 'se' // uncertainty column name
       },
       gadm1: {
-        minZoom: 0,
-        maxZoom: 2,
+        minZoom: undefined,
+        maxZoom: 5,
         id: 'gid_1',
         est: 'est',
         se: 'se'
       },
       gadm2: {
-        minZoom: 2,
-        maxZoom: 4,
+        minZoom: 5,
+        maxZoom: 6,
         id: 'gid_2',
         est: 'est',
         se: 'se'
       },
       gadm3: {
-        minZoom: 4,
-        maxZoom: 6,
+        minZoom: 6,
+        maxZoom: 9,
         id: 'gid_3',
         est: 'est',
         se: 'se'
       },
       gadm4: {
-        minZoom: 6,
-        maxZoom: 9,
+        minZoom: 9,
+        maxZoom: 19,
         id: 'gid_4',
         est: 'est',
         se: 'se'
@@ -200,37 +191,7 @@ export default function () {
 
       // Colors of selected administration boundaries
       fillLocationColor: 'rgb(239, 165, 1, 0.5)',
-      strokeLocationColor: 'orange',
-
-      // Default values for selected models
-      model: {
-        vector: '',
-        year: '',
-        month: '',
-        estimation: true,
-        uncertainty: true,
-        // 0 - 100 values
-        estimationTransparency: 0,
-        uncertaintyTransparency: 75,
-        // 0 - 1 values
-        estimationOpacity: 1,
-        uncertaintyOpacity: 0.25,
-        // Default uncertainty color
-        uncertaintyColor: '#191919',
-        estimationColors: ['#3288bd', '#99d594', '#e6f598', '#fee08b', '#fc8d59', '#d53e4f'],
-        modelsCsv: [],
-        centroidsUrls: [],
-        estimationPalettes: [
-          // DIVERGENTS
-          ['#3288bd', '#99d594', '#e6f598', '#fee08b', '#fc8d59', '#d53e4f'],
-          ['#fde725', '#9fda3a', '#4ac16d', '#1fa187', '#277f8e', '#365c8d'],
-          ['#1b7837', '#7fbf7b', '#d9f0d3', '#e7d4e8', '#af8dc3', '#762a83'],
-          ['#1a9850', '#91cf60', '#d9ef8b', '#fee08b', '#fc8d59', '#d73027'],
-          // GRADIENTS
-          ['#fef0d9', '#fdd49e', '#fdbb84', '#fc8d59', '#e34a33', '#b30000'],
-          ['#edf8e9', '#c7e9c0', '#a1d99b', '#74c476', '#31a354', '#006d2c']
-        ]
-      }
+      strokeLocationColor: 'orange'
     },
     BACKEND: backendUrl,
     FRONTEND: frontendUrl,
@@ -336,25 +297,20 @@ export default function () {
         modelName: 'biting'
       }
     },
-    // WMS RELATED
-    getWmsDataFromServer: true,
-    // SAMPLE STRUCTURE FOR wmswms: {
-    // {
-
-    //   tiger: [         // For every species
-    //     {             // For every year
-    //       id: 1, wms_id: 1, wms_url: "https://montesdata.creaf.cat/geoserver/SIPAN/wms",
-    //       year: 2023, layer: "MASSA_AIGUA", visible: true, transparency: 0.0
-    //     },....
-    //   ],
-    //   yellow[
-    //     {....},
-    //     {....},
-    //   ]
-    // }
-    WMS: [],
-    currentWMSView: {},
-    wmsNumberOfVisibleLayers: 0,
-    legendData: {}
+    // Early Warning
+    earlyWarning: {
+      specieCode: undefined,
+      mapserverLayerName: 'mosquito_alert:early_warning'
+    },
+    encounterProbability: {
+      specieCode: undefined,
+      date: undefined,
+      filters: {
+        certaintyRange: {
+          min: 0,
+          max: 1
+        }
+      }
+    }
   }
 }
diff --git a/src/store/map/state.js b/src/store/map/state.js
index 5686763c..dd6f9cd4 100644
--- a/src/store/map/state.js
+++ b/src/store/map/state.js
@@ -4,7 +4,7 @@ export default function () {
     firstViewMap: true,
     dataset: [],
     DEFAULTS: {
-      ZOOM: 3,
+      ZOOM: 5,
       CENTER: [13.6889, 44.8409],
       MOBILEZOOM: 1,
       length: 4
@@ -13,7 +13,7 @@ export default function () {
       // CENTER: [4.848618507385254, 52.380792836403685]
     },
     CURRENTS: {
-      ZOOM: 3,
+      ZOOM: 5,
       CENTER: [13.6889, 44.8409],
       MOBILEZOOM: 1
     },