diff --git a/assets/css/tooltip.css b/assets/css/tooltip.css
new file mode 100644
index 00000000..f394772f
--- /dev/null
+++ b/assets/css/tooltip.css
@@ -0,0 +1,91 @@
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+}
+.tooltip .tooltip-inner {
+  background: theme('colors.gray.900');
+  color: theme('colors.gray.200');
+  border-radius: 16px;
+  padding: 5px 10px 4px;
+}
+.tooltip .tooltip-arrow {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+  border-color: theme('colors.gray.900');
+  z-index: 1;
+}
+.tooltip[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+.tooltip[x-placement^="top"] .tooltip-arrow {
+  border-width: 5px 5px 0 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.tooltip[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+.tooltip[x-placement^="bottom"] .tooltip-arrow {
+  border-width: 0 5px 5px 5px;
+  border-left-color: transparent !important;
+  border-right-color: transparent !important;
+  border-top-color: transparent !important;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.tooltip[x-placement^="right"] {
+  margin-left: 5px;
+}
+.tooltip[x-placement^="right"] .tooltip-arrow {
+  border-width: 5px 5px 5px 0;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+.tooltip[x-placement^="left"] {
+  margin-right: 5px;
+}
+.tooltip[x-placement^="left"] .tooltip-arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+.tooltip.popover .popover-inner {
+  background: theme('colors.blue.500');
+  color: theme('colors.green.500');
+  padding: 24px;
+  border-radius: 5px;
+  box-shadow: 0 5px 30px rgba(0, 0, 0, .1);
+}
+.tooltip.popover .popover-arrow {
+  border-color: theme('colors.blue.500');
+}
+.tooltip[aria-hidden='true'] {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.15s, visibility 0.15s;
+}
+.tooltip[aria-hidden='false'] {
+  visibility: visible;
+  opacity: 1;
+  transition: opacity 0.15s;
+}
diff --git a/components/VFooter.vue b/components/common/ui/VFooter.vue
similarity index 100%
rename from components/VFooter.vue
rename to components/common/ui/VFooter.vue
diff --git a/components/VHeader.vue b/components/common/ui/VHeader.vue
similarity index 66%
rename from components/VHeader.vue
rename to components/common/ui/VHeader.vue
index b86a3b61..d3ac7311 100644
--- a/components/VHeader.vue
+++ b/components/common/ui/VHeader.vue
@@ -7,11 +7,12 @@
       w-full
       h-20
       px-4
+      invisible
       border-b border-gray-300
       dark:border-gray-700
     "
   >
-    <div title="Dashboard">
+    <div title="Dashboard" class="visible">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="
@@ -41,23 +42,92 @@
         />
       </svg>
     </div>
-    <select
-      v-model="$colorMode.preference"
-      class="
-        w-32
-        px-4
-        text-base text-gray-800
-        bg-gray-200
-        border border-gray-700
-        rounded
-        dark:text-gray-300 dark:bg-gray-900
-        form-select
-      "
-    >
-      <option value="system">System</option>
-      <option value="light">Light</option>
-      <option value="dark">Dark</option>
-    </select>
+    <div tile="Theme Picker" class="visible">
+      <span class="relative z-0 inline-flex shadow rounded-full">
+        <button
+          type="button"
+          class="
+            relative
+            inline-flex
+            items-center
+            px-3
+            py-1.5
+            rounded-l-full
+            border border-gray-300
+            bg-transparent
+            text-sm
+            font-medium
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+            focus:ring-gray-500
+            focus:border-gray-500
+            active:ring-0
+          "
+          :class="{
+            'bg-gray-500 text-white': $colorMode.preference === 'system',
+          }"
+          @click="$colorMode.preference = 'system'"
+        >
+          System
+        </button>
+        <button
+          type="button"
+          class="
+            -ml-px
+            relative
+            inline-flex
+            items-center
+            px-3
+            py-1.5
+            border border-gray-300
+            bg-transparent
+            text-sm
+            font-medium
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+            focus:ring-blueGray-500
+            focus:border-blueGray-500
+            active:ring-0
+          "
+          :class="{
+            'bg-blueGray-800 text-gray-50': $colorMode.preference === 'dark',
+          }"
+          @click="$colorMode.preference = 'dark'"
+        >
+          Dark
+        </button>
+        <button
+          type="button"
+          class="
+            -ml-px
+            relative
+            inline-flex
+            items-center
+            px-3
+            py-1.5
+            rounded-r-full
+            border border-gray-300
+            bg-transparent
+            text-sm
+            font-medium
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+            focus:ring-yellow-500
+            focus:border-yellow-500
+            active:ring-0
+          "
+          :class="{
+            'bg-yellow-500 text-gray-700': $colorMode.preference === 'light',
+          }"
+          @click="$colorMode.preference = 'light'"
+        >
+          Light
+        </button>
+      </span>
+    </div>
   </div>
 </template>
 
diff --git a/components/CommonMap.vue b/components/map/CommonMap.vue
similarity index 78%
rename from components/CommonMap.vue
rename to components/map/CommonMap.vue
index 7080ebab..57f286af 100644
--- a/components/CommonMap.vue
+++ b/components/map/CommonMap.vue
@@ -21,7 +21,7 @@
       <div v-if="loaded && styleChanged">
         <slot />
         <mgl-scale-control position="bottom-left" />
-        <!-- Search, Zoom in, Zoom out & Basemaps-->
+        <!-- Search, Basemaps & Heatmap / Cluster / Markers toggler -->
         <div
           class="
             absolute
@@ -37,38 +37,30 @@
           "
         >
           <div class="relative flex flex-col space-y-2">
-            <!-- Zoom in & out -->
+            <!-- Search -->
             <div
+              v-click-outside="() => (state.utils.geocoder.shown = false)"
               class="
-                flex flex-col
-                items-center
-                justify-center
+                relative
                 visible
                 w-10
-                h-20
+                h-10
+                text-sm text-gray-600
+                bg-gray-200
+                border border-gray-100
+                rounded-md
+                hover:bg-gray-300
+                dark:bg-gray-800
+                dark:border-gray-700
+                dark:text-white
+                dark:hover:bg-gray-800
               "
-              title="Zoom In/Out"
+              title="Search"
+              :class="{
+                'bg-gray-300 dark:bg-gray-800': state.utils.geocoder.shown,
+              }"
             >
-              <!-- Zoom In -->
-              <div
-                class="
-                  w-10
-                  h-10
-                  p-2
-                  text-sm text-gray-600
-                  bg-gray-200
-                  border border-b-0 border-gray-100
-                  rounded-md rounded-b-none
-                  cursor-pointer
-                  hover:bg-gray-300
-                  dark:bg-gray-800
-                  dark:border-gray-700
-                  dark:text-white
-                  dark:hover:bg-gray-800
-                "
-                title="Zoom In"
-                @click="mapZoomIn"
-              >
+              <div class="p-2 cursor-pointer" @click="toggleTool('geocoder')">
                 <svg
                   class="w-5 h-5"
                   fill="none"
@@ -80,48 +72,43 @@
                     stroke-linecap="round"
                     stroke-linejoin="round"
                     stroke-width="2"
-                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                   />
                 </svg>
               </div>
-              <!-- Zoom Out -->
-              <div
-                class="
-                  w-10
-                  h-10
-                  p-2
-                  text-sm text-gray-600
-                  bg-gray-200
-                  border border-t-0 border-gray-100
-                  rounded-md rounded-t-none
-                  cursor-pointer
-                  hover:bg-gray-300
-                  dark:bg-gray-800
-                  dark:border-gray-700
-                  dark:text-white
-                  dark:hover:bg-gray-800
-                "
-                title="Zoom Out"
-                @click="mapZoomOut"
+              <transition
+                enter-active-class="transition duration-100 ease-out"
+                enter-class="transform scale-95 translate-x-4 opacity-0"
+                enter-to-class="transform scale-100 opacity-100"
+                leave-active-class="transition duration-75 ease-in translate-x-4"
+                leave-class="transform scale-100 opacity-100"
+                leave-to-class="transform scale-95 opacity-0"
               >
-                <svg
-                  class="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  v-if="state.utils.geocoder.shown"
+                  class="
+                    absolute
+                    top-0
+                    right-0
+                    h-full
+                    mr-12
+                    origin-right
+                    bg-gray-200
+                    dark:bg-gray-700 dark:text-gray-50
+                    text-gray-900
+                    rounded-md
+                    shadow-lg
+                    w-80
+                    ring-1 ring-white ring-opacity-5
+                  "
                 >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M20 12H4"
-                  />
-                </svg>
-              </div>
+                  <geocoder :bbox="state.map.bbox" @fly-to="mapFlyTo" />
+                </div>
+              </transition>
             </div>
             <!-- Basemaps -->
             <div
+              v-click-outside="() => (state.utils.basemaps.shown = false)"
               class="
                 relative
                 visible
@@ -142,7 +129,15 @@
                 'bg-gray-300 dark:bg-gray-800': state.utils.basemaps.shown,
               }"
             >
-              <div class="p-2 cursor-pointer" @click="toggleTool('basemaps')">
+              <div
+                v-tooltip.left="{
+                  content: 'Click here to update basemap',
+                  offset: 4,
+                  boundariesElement: 'viewport',
+                }"
+                class="p-2 cursor-pointer"
+                @click="toggleTool('basemaps')"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 17.784 19.117"
@@ -186,8 +181,124 @@
                 </div>
               </transition>
             </div>
+          </div>
+        </div>
+        <!-- Zoom in, Zoom out, Bearing & Locate Me -->
+        <div
+          class="
+            absolute
+            bottom-6
+            right-0
+            invisible
+            p-2
+            m-2
+            text-gray-800
+            bg-opacity-50
+            rounded-md
+            dark:text-white
+          "
+        >
+          <div class="relative flex flex-col space-y-2">
+            <!-- Zoom in & out -->
+            <div
+              class="
+                flex flex-col
+                items-center
+                justify-center
+                visible
+                w-10
+                h-20
+              "
+              title="Zoom In/Out"
+            >
+              <!-- Zoom In -->
+              <div
+                v-tooltip.left="{
+                  content: 'Click here to Zoom in',
+                  offset: 4,
+                  boundariesElement: 'viewport',
+                }"
+                class="
+                  w-10
+                  h-10
+                  p-2
+                  text-sm text-gray-600
+                  bg-gray-200
+                  border border-b-0 border-gray-100
+                  rounded-md rounded-b-none
+                  cursor-pointer
+                  hover:bg-gray-300
+                  dark:bg-gray-800
+                  dark:border-gray-700
+                  dark:text-white
+                  dark:hover:bg-gray-800
+                "
+                title="Zoom In"
+                @click="mapZoomIn"
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                  />
+                </svg>
+              </div>
+              <!-- Zoom Out -->
+              <div
+                v-tooltip.left="{
+                  content: 'Click here to Zoom out',
+                  offset: 4,
+                  boundariesElement: 'viewport',
+                }"
+                class="
+                  w-10
+                  h-10
+                  p-2
+                  text-sm text-gray-600
+                  bg-gray-200
+                  border border-t-0 border-gray-100
+                  rounded-md rounded-t-none
+                  cursor-pointer
+                  hover:bg-gray-300
+                  dark:bg-gray-800
+                  dark:border-gray-700
+                  dark:text-white
+                  dark:hover:bg-gray-800
+                "
+                title="Zoom Out"
+                @click="mapZoomOut"
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M20 12H4"
+                  />
+                </svg>
+              </div>
+            </div>
             <!-- Bearing -->
             <div
+              v-tooltip.left="{
+                content: 'Click here to reset pitch / bearing',
+                offset: 4,
+                boundariesElement: 'viewport',
+              }"
               class="
                 relative
                 visible
@@ -236,6 +347,11 @@
             </div>
             <!-- Locate -->
             <div
+              v-tooltip.left="{
+                content: 'Click here to get your location',
+                offset: 4,
+                boundariesElement: 'viewport',
+              }"
               class="
                 relative
                 visible
@@ -291,9 +407,13 @@
     components: {
       MglMap,
       MglScaleControl,
+      Geocoder: () =>
+        import(
+          /* webpackChunkName: "GeocoderComponent" */ '@/components/map/_partials/Geocoder.vue'
+        ),
       Basemaps: () =>
         import(
-          /* webpackChunkName: "BasemapsComponent" */ '@/components/_partials/Basemaps.vue'
+          /* webpackChunkName: "BasemapsComponent" */ '@/components/map/_partials/Basemaps.vue'
         ),
     },
     props: {
@@ -323,8 +443,16 @@
           zoom: 11,
           maxZoom: 22,
         },
+        map: {
+          bbox: [] as number[][],
+        },
         mapboxgl,
         utils: {
+          geocoder: {
+            shown: false as boolean,
+            disabled: false as boolean,
+            data: {},
+          },
           basemaps: {
             shown: false as boolean,
             data: {
@@ -372,8 +500,10 @@
        */
       function mapLoaded(e: { map: Map }): void {
         map = e.map;
+        state.map.bbox = map.getBounds().toArray();
         emit('update:loaded', true);
         emit('update:style-changed', true);
+        emit('update:bounds', state.map.bbox);
         /**
          * This is required because we want
          * to persist the layers on the map
@@ -424,7 +554,9 @@
        */
       function mapMoved(e: { map: Map }): void {
         const coords = e.map.getCenter();
+        state.map.bbox = map.getBounds().toArray();
         emit('update:center', [coords.lng, coords.lat]);
+        emit('update:bounds', state.map.bbox);
       }
       /**
        * Updates the current map style
@@ -518,6 +650,9 @@
        */
       function toggleTool(type: string): void {
         switch (type) {
+          case 'geocoder':
+            state.utils.geocoder.shown = !state.utils.geocoder.shown;
+            break;
           case 'basemaps':
             state.utils.basemaps.shown = !state.utils.basemaps.shown;
             break;
@@ -545,11 +680,13 @@
 
       return {
         state,
+        map,
         mapLoaded,
         mapClicked,
         mapMoved,
         mapZoomIn,
         mapZoomOut,
+        mapFlyTo,
         toggleTool,
         updateBasemap,
       };
diff --git a/components/_partials/Basemaps.vue b/components/map/_partials/Basemaps.vue
similarity index 100%
rename from components/_partials/Basemaps.vue
rename to components/map/_partials/Basemaps.vue
diff --git a/components/map/_partials/Geocoder.vue b/components/map/_partials/Geocoder.vue
new file mode 100644
index 00000000..af3a50d1
--- /dev/null
+++ b/components/map/_partials/Geocoder.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="w-full h-full">
+    <label for="geocoder" class="sr-only">Search</label>
+    <input
+      id="geocoder"
+      v-model="state.search"
+      autofocus="autofocus"
+      type="text"
+      name="geocoder"
+      class="
+        block
+        w-full
+        h-full
+        dark:bg-gray-800 dark:text-gray-50
+        bg-opacity-25 bg-gray-200
+        text-gray-900
+        rounded-md
+        shadow-sm
+        sm:text-sm
+      "
+      placeholder="eg. Mumbai"
+      @input="geocode"
+    />
+    <div
+      v-if="state.results.length > 0"
+      class="
+        flex flex-col
+        mt-1
+        overflow-auto
+        divide-y divide-gray-100
+        dark:divide-gray-500
+      "
+    >
+      <div
+        v-for="({ label, lng, lat, zoom }, index) in state.results"
+        :key="index"
+        class="
+          flex-1
+          px-1
+          truncate
+          bg-gray-200 bg-opacity-50
+          dark:bg-gray-800
+          cursor-pointer
+          select-none
+          hover:bg-opacity-100
+        "
+        :title="label"
+        @click="$emit('fly-to', { lng, lat, zoom })"
+      >
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  /* eslint-disable camelcase */
+  import {
+    defineComponent,
+    reactive,
+    useContext,
+  } from '@nuxtjs/composition-api';
+  import type { PropType } from '@nuxtjs/composition-api';
+  import type { AxiosError } from 'axios';
+
+  type SearchResult = {
+    lat: number;
+    lng: number;
+    zoom: number;
+    label: string;
+  };
+
+  type GeocodedFeature = {
+    place_name: string;
+    center: number[];
+    place_type: string;
+  };
+
+  export default defineComponent({
+    name: 'Geocoder',
+    props: {
+      bbox: {
+        type: Array as PropType<number[]>,
+        required: false,
+        default: () => [],
+      },
+    },
+    setup(props) {
+      const { $axios, $config } = useContext();
+      const state = reactive({
+        search: '',
+        loading: false,
+        results: [] as SearchResult[],
+      });
+      /**
+       *
+       */
+      async function geocode() {
+        if (state.search && !state.loading) {
+          state.loading = true;
+          const { mapToken } = $config;
+          const queryStr = encodeURIComponent(state.search);
+          // minLon, minLat, maxLon, maxLat
+          const bbox = props.bbox;
+          try {
+            const { data }: { data: { features: GeocodedFeature[] } } =
+              await $axios.get(
+                `https://api.mapbox.com/geocoding/v5/mapbox.places/${queryStr}.json?access_token=${mapToken}&bbox=${bbox}`,
+              );
+            if (data && data.features) {
+              state.results = data.features.map((feature: GeocodedFeature) => {
+                return {
+                  label: feature.place_name,
+                  lng: feature.center[0],
+                  lat: feature.center[1],
+                  zoom: feature.place_type.includes('poi') ? 15 : 10,
+                };
+              });
+            }
+            state.loading = false;
+          } catch (error: unknown) {
+            const { response } = error as AxiosError;
+            state.loading = false;
+            console.log('response: ', response!.data);
+          } finally {
+            state.loading = false;
+          }
+        }
+      }
+
+      return {
+        state,
+        geocode,
+      };
+    },
+  });
+</script>
diff --git a/config/buildModules/index.ts b/config/buildModules/index.ts
index c945e0ce..9d1f30a6 100644
--- a/config/buildModules/index.ts
+++ b/config/buildModules/index.ts
@@ -13,6 +13,8 @@ const buildModules: NuxtOptionsModule[] = [
   ['@nuxtjs/color-mode', colorMode],
   // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
   '@nuxtjs/composition-api/module',
+  // https://github.com/robcresswell/nuxt-compress
+  'nuxt-compress',
 ];
 
 export { buildModules };
diff --git a/config/index.ts b/config/index.ts
index 70fee094..adf7736a 100644
--- a/config/index.ts
+++ b/config/index.ts
@@ -34,10 +34,12 @@ const css: string[] = [
   'v-mapbox/dist/v-mapbox.css',
   '~/assets/css/global.css',
   '~/assets/css/fonts.css',
+  '~/assets/css/tooltip.css',
 ];
 
 const plugins: NuxtOptionsPlugin[] = [
   { src: '~/plugins/click-outside', mode: 'client' },
+  { src: '~/plugins/tooltip', mode: 'client' },
 ];
 
 const loading: NuxtOptionsLoading = { color: '#cccccc' };
diff --git a/layouts/default.vue b/layouts/default.vue
index 71605361..0b4c4fcb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -18,8 +18,8 @@
 
 <script lang="ts">
   import { defineComponent } from '@nuxtjs/composition-api';
-  import VHeader from '@/components/VHeader.vue';
-  import VFooter from '@/components/VFooter.vue';
+  import VHeader from '@/components/common/ui/VHeader.vue';
+  import VFooter from '@/components/common/ui/VFooter.vue';
 
   export default defineComponent({
     name: 'DefaultLayout',
diff --git a/package-lock.json b/package-lock.json
index 0749ca34..99ad4443 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,8 @@
         "mapbox-gl": "1.13.1",
         "nuxt": "^2.15.8",
         "v-click-outside": "^3.1.2",
-        "v-mapbox": "^1.8.2"
+        "v-mapbox": "^1.8.2",
+        "v-tooltip": "^2.1.3"
       },
       "devDependencies": {
         "@babel/core": "^7.15.5",
@@ -48,8 +49,10 @@
         "eslint-plugin-vue": "^7.18.0",
         "husky": "^7.0.2",
         "lint-staged": "^11.1.2",
+        "nuxt-compress": "^5.0.0",
         "postcss": "^8.3.6",
         "prettier": "^2.4.1",
+        "sass": "^1.41.1",
         "shipjs": "^0.23.3",
         "stylelint": "^13.13.1",
         "stylelint-config-prettier": "^8.0.2",
@@ -7768,6 +7771,47 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/compression-webpack-plugin": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-6.1.1.tgz",
+      "integrity": "sha512-BEHft9M6lwOqVIQFMS/YJGmeCYXVOakC5KzQk05TFpMBlODByh1qNsZCWjUBxCQhUP9x0WfGidxTbGkjbWO/TQ==",
+      "dev": true,
+      "dependencies": {
+        "cacache": "^15.0.5",
+        "find-cache-dir": "^3.3.1",
+        "schema-utils": "^3.0.0",
+        "serialize-javascript": "^5.0.1",
+        "webpack-sources": "^1.4.3"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/compression-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/compression/node_modules/bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -15537,6 +15581,21 @@
         "nuxt": "bin/nuxt.js"
       }
     },
+    "node_modules/nuxt-compress": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nuxt-compress/-/nuxt-compress-5.0.0.tgz",
+      "integrity": "sha512-KxsYzgRTMJhqQfGfgLbam0gOTw8GtmrhJhQjUfcShCmBpVaL2sFM6urOKW3I/fIx+aRvF9uE0FZCFviF1TLZww==",
+      "dev": true,
+      "dependencies": {
+        "compression-webpack-plugin": "^6.1.1"
+      },
+      "engines": {
+        "node": ">= 12.10.0"
+      },
+      "peerDependencies": {
+        "nuxt": ">=2.9.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -16314,6 +16373,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -21578,6 +21647,21 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass": {
+      "version": "1.41.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.41.1.tgz",
+      "integrity": "sha512-vIjX7izRxw3Wsiez7SX7D+j76v7tenfO18P59nonjr/nzCkZuoHuF7I/Fo0ZRZPKr88v29ivIdE9BqGDgQD/Nw==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "10.1.1",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
@@ -25135,6 +25219,17 @@
         "vue": "^2.6.14"
       }
     },
+    "node_modules/v-tooltip": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
+      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "lodash": "^4.17.21",
+        "popper.js": "^1.16.1",
+        "vue-resize": "^1.0.1"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -25366,6 +25461,17 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "node_modules/vue-resize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
@@ -33022,6 +33128,32 @@
         }
       }
     },
+    "compression-webpack-plugin": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-6.1.1.tgz",
+      "integrity": "sha512-BEHft9M6lwOqVIQFMS/YJGmeCYXVOakC5KzQk05TFpMBlODByh1qNsZCWjUBxCQhUP9x0WfGidxTbGkjbWO/TQ==",
+      "dev": true,
+      "requires": {
+        "cacache": "^15.0.5",
+        "find-cache-dir": "^3.3.1",
+        "schema-utils": "^3.0.0",
+        "serialize-javascript": "^5.0.1",
+        "webpack-sources": "^1.4.3"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -39166,6 +39298,15 @@
         "@nuxt/webpack": "2.15.8"
       }
     },
+    "nuxt-compress": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nuxt-compress/-/nuxt-compress-5.0.0.tgz",
+      "integrity": "sha512-KxsYzgRTMJhqQfGfgLbam0gOTw8GtmrhJhQjUfcShCmBpVaL2sFM6urOKW3I/fIx+aRvF9uE0FZCFviF1TLZww==",
+      "dev": true,
+      "requires": {
+        "compression-webpack-plugin": "^6.1.1"
+      }
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -39769,6 +39910,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -43946,6 +44092,15 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "sass": {
+      "version": "1.41.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.41.1.tgz",
+      "integrity": "sha512-vIjX7izRxw3Wsiez7SX7D+j76v7tenfO18P59nonjr/nzCkZuoHuF7I/Fo0ZRZPKr88v29ivIdE9BqGDgQD/Nw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      }
+    },
     "sass-loader": {
       "version": "10.1.1",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
@@ -46722,6 +46877,17 @@
         "map-promisified": "^0.4.0"
       }
     },
+    "v-tooltip": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.1.3.tgz",
+      "integrity": "sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "lodash": "^4.17.21",
+        "popper.js": "^1.16.1",
+        "vue-resize": "^1.0.1"
+      }
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -46908,6 +47074,14 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "vue-resize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
+      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "vue-router": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
diff --git a/package.json b/package.json
index 9108854a..dc9af203 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
     "mapbox-gl": "1.13.1",
     "nuxt": "^2.15.8",
     "v-click-outside": "^3.1.2",
-    "v-mapbox": "^1.8.2"
+    "v-mapbox": "^1.8.2",
+    "v-tooltip": "^2.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -63,8 +64,10 @@
     "eslint-plugin-vue": "^7.18.0",
     "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
+    "nuxt-compress": "^5.0.0",
     "postcss": "^8.3.6",
     "prettier": "^2.4.1",
+    "sass": "^1.41.1",
     "shipjs": "^0.23.3",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",
diff --git a/pages/index.vue b/pages/index.vue
index 401f28e9..390228b1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -469,7 +469,7 @@
   import { MglMarker, MglPopup } from 'v-mapbox';
   import type { EventData } from 'mapbox-gl';
   import type { Feature, FeatureCollection, Point } from 'geojson';
-  import CommonMap from '@/components/CommonMap.vue';
+  import CommonMap from '@/components/map/CommonMap.vue';
 
   export default defineComponent({
     name: 'Dashboard',
@@ -599,7 +599,7 @@
   });
 </script>
 
-<style>
+<style lang="scss">
   .expense-popup-card .mapboxgl-popup-tip {
     display: none;
   }
diff --git a/plugins/tooltip.ts b/plugins/tooltip.ts
new file mode 100644
index 00000000..867aa611
--- /dev/null
+++ b/plugins/tooltip.ts
@@ -0,0 +1,4 @@
+import vToolTip from 'v-tooltip';
+import Vue from 'vue';
+
+Vue.use(vToolTip);
diff --git a/tsconfig.json b/tsconfig.json
index 536fb639..0b9f231e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,7 +33,8 @@
       "@nuxtjs/axios",
       "@types/geojson",
       "@types/mapbox-gl",
-      "@types/webpack"
+      "@types/webpack",
+      "v-tooltip"
     ]
   },
   "include": [