diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/deploy.yml
similarity index 55%
rename from .github/workflows/gh-pages.yml
rename to .github/workflows/deploy.yml
index 092dfca..5255203 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/deploy.yml
@@ -1,21 +1,22 @@
-name: public-build
+name: Deploy to GitHub Pages 
 
 on:
   push:
-    branches: [main, setup]
+    branches:
+      - main
+      - setup
   workflow_dispatch:
 
 jobs:
   build:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: 'main'
           fetch-depth: 0
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           ref: 'setup'
           fetch-depth: 0
@@ -25,31 +26,44 @@ jobs:
         run: cp -r _setup/* .
 
       - name: Setup Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '16'
+          node-version: '20'
 
       - name: Cache dependencies
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: npm-cache
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
+
       - name: Install dependencies
         run: npm ci
 
       - name: Build public view
         run: npm run build
 
-      - name: Deploy to GitHub Pages
-        uses: crazy-max/ghaction-github-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          target_branch: gh-pages
-          build_dir: dist
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          path: ./dist
+
+  deploy:
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
 
 permissions:
   contents: write
diff --git a/README.markdown b/README.markdown
index 60b893d..7f4c07e 100644
--- a/README.markdown
+++ b/README.markdown
@@ -53,9 +53,10 @@ TaxonPages software is in active development and changes are expected that will
 
 1. Click on "Fork" button to create your own repository from this.
 2. Uncheck `Copy the setup branch only` and press `Save`
-3. After create your repo, go to `Settings > Pages`, on "Branch" select `gh-pages` and `/(root)`. Then press save
-4. Open `router.yml` file and change `base_url` to the name of your repository.
-5. After a couple of minutes, your public page should be available at `https://<your_user_name>.github.io/<your_repo_name>`
+3. After create your repo, go to `Settings > Pages`, on "Build and deployment - Source" select `GitHub Actions`.
+4. Go to `Actions` tab and press `I understand my workflows, go ahead and enable them` button
+5. Open `router.yml` file and change `base_url` to the name of your repository.
+6. After a couple of minutes, your public page should be available at `https://<your_user_name>.github.io/<your_repo_name>`
 
 ### Setup
 
diff --git a/package.json b/package.json
index 99df9ab..83a2eda 100644
--- a/package.json
+++ b/package.json
@@ -17,34 +17,35 @@
   "dependencies": {
     "@geoman-io/leaflet-geoman-free": "^2.17.0",
     "@nuxt/devalue": "^2.0.2",
-    "@unhead/ssr": "^1.9.13",
-    "axios": "^1.7.2",
-    "glob": "^10.4.2",
+    "@sfgrp/distinguish": "^0.4.0",
+    "@unhead/ssr": "^1.11.10",
+    "axios": "^1.7.7",
+    "glob": "^11.0.0",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.9.4",
     "leaflet.markercluster": "^1.5.3",
-    "markdown-it-anchor": "^9.0.1",
-    "pinia": "^2.1.7",
-    "unhead": "^1.9.13",
+    "markdown-it-anchor": "^9.2.0",
+    "pinia": "^2.2.4",
+    "unhead": "^1.11.10",
     "unplugin-vue-markdown": "^0.26.2",
-    "vue": "^3.4.29",
-    "vue-router": "^4.3.3"
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
-    "@unhead/ssr": "^1.9.13",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "autoprefixer": "^10.4.19",
+    "@tailwindcss/typography": "^0.5.15",
+    "@unhead/ssr": "^1.11.10",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "autoprefixer": "^10.4.20",
     "compression": "^1.7.4",
-    "eslint": "^9.5.0",
-    "eslint-plugin-vue": "^9.26.0",
-    "express": "^4.19.2",
+    "eslint": "^9.13.0",
+    "eslint-plugin-vue": "^9.29.1",
+    "express": "^4.21.1",
     "minimist": "^1.2.8",
-    "postcss": "^8.4.38",
-    "sass": "^1.77.6",
-    "tailwindcss": "^3.4.4",
-    "vite": "^5.3.1",
-    "vite-plugin-pages": "^0.32.2",
+    "postcss": "^8.4.47",
+    "sass": "^1.80.4",
+    "tailwindcss": "^3.4.14",
+    "vite": "^5.4.10",
+    "vite-plugin-pages": "^0.32.3",
     "vite-plugin-radar": "^0.9.6"
   }
 }
diff --git a/src/components/Pagination/VPagination.global.vue b/src/components/Pagination/VPagination.global.vue
index a5565dc..19c487a 100644
--- a/src/components/Pagination/VPagination.global.vue
+++ b/src/components/Pagination/VPagination.global.vue
@@ -7,7 +7,7 @@
     <li>
       <button
         type="button"
-        :disabled="currentPage < 2"
+        :disabled="currentPage < 2 || !pages"
         aria-label="Go to first page"
         class="border border-base-border rounded-l-md px-2 py-1.5"
         @click="currentPage = 1"
@@ -21,7 +21,7 @@
     >
       <button
         type="button"
-        :disabled="currentPage < 2"
+        :disabled="currentPage < 2 || !pages"
         aria-label="Go to previous page"
         class="border border-base-border px-2 py-1.5"
         @click="currentPage--"
@@ -77,7 +77,7 @@
         type="button"
         aria-label="Go to next page"
         class="border border-base-border px-2 py-1.5"
-        :disabled="currentPage === pages"
+        :disabled="currentPage === pages || !pages"
         @click="() => currentPage++"
       >
         ›
@@ -86,7 +86,7 @@
     <li role="presentation">
       <button
         type="button"
-        :disabled="currentPage === pages"
+        :disabled="currentPage === pages || !pages"
         aria-label="Go to last page"
         class="border border-base-border rounded-r-md px-2 py-1.5"
         @click="() => (currentPage = pages)"
diff --git a/src/constants/objectTypes.js b/src/constants/objectTypes.js
index 73ff030..3222d71 100644
--- a/src/constants/objectTypes.js
+++ b/src/constants/objectTypes.js
@@ -3,3 +3,4 @@ export const COLLECTION_OBJECT = 'CollectionObject'
 export const ASSERTED_DISTRIBUTION = 'AssertedDistribution'
 export const GEOREFERENCE = 'Georeference'
 export const AGGREGATE = 'Aggregate'
+export const OTU = 'Otu'
diff --git a/src/modules/interactiveKeys/router/index.js b/src/modules/interactiveKeys/router/index.js
new file mode 100644
index 0000000..730084a
--- /dev/null
+++ b/src/modules/interactiveKeys/router/index.js
@@ -0,0 +1,9 @@
+import InteractiveKey from '../views/InteractiveKey.vue'
+
+export default [
+  {
+    name: 'interactive-keys-id',
+    path: '/interactive_keys/:id',
+    component: InteractiveKey
+  }
+]
diff --git a/src/modules/interactiveKeys/views/InteractiveKey.vue b/src/modules/interactiveKeys/views/InteractiveKey.vue
new file mode 100644
index 0000000..0f3b7c5
--- /dev/null
+++ b/src/modules/interactiveKeys/views/InteractiveKey.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="flex flex-col h-full overflow-y-hidden container mx-auto interactive-key-container"
+  >
+    <ClientOnly>
+      <VueInteractiveKey v-bind="options">
+        <template #remaining-item="{ item }">
+          <RouterLink
+            v-if="item.observationObjectType === OTU"
+            :to="{ name: 'otus-id', params: { id: item.observationObjectId } }"
+            v-html="item.objectTag"
+          />
+          <span
+            v-else
+            v-html="item.objectTag"
+          />
+        </template>
+        <template #eliminated-item="{ item }">
+          <RouterLink
+            v-if="item.observationObjectType === OTU"
+            :to="{ name: 'otus-id', params: { id: item.observationObjectId } }"
+            v-html="item.objectTag"
+          />
+          <span
+            v-else
+            v-html="item.objectTag"
+          />
+        </template>
+      </VueInteractiveKey>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { ref } from 'vue'
+import { OTU } from '@/constants/objectTypes.js'
+import { VueInteractiveKey } from '@sfgrp/distinguish'
+import '@sfgrp/distinguish/dist/style.css'
+
+const route = useRoute()
+
+const options = ref({
+  observationMatrixId: route.params.id,
+  apiConfig: {
+    baseURL: __APP_ENV__.url,
+    projectToken: __APP_ENV__.project_token
+  }
+})
+</script>
+
+<style>
+:root {
+  --distinguish-primary-content-color: rgb(var(--color-primary-content));
+  --distinguish-bg-color: rgb(var(--color-base-foreground));
+  --distinguish-bg-panel-color: rgb(var(--color-base-foreground));
+  --distinguish-bg-modal-color: rgb(var(--color-base-foreground));
+  --distinguish-bg-disabled-color: #e5e5e5;
+  --distinguish-disabled-color: #999;
+  --distinguish-error-color: rgb(var(--color-danger));
+  --distinguish-primary-color: rgb(var(--color-primary));
+  --distinguish-border-color: #cccccc;
+  --distinguish-link-color: rgb(var(--color-secondary));
+  --distinguish-btn-medium-size: 20px;
+}
+
+.interactive-key-container {
+  max-height: calc(100vh - 12rem);
+
+  hr {
+    @apply my-4;
+  }
+}
+
+.distinguish-grid {
+  @apply shadow-md rounded border-base-muted;
+}
+
+.distinguish-header-bar {
+  @apply rounded-t-md;
+}
+
+.distinguish-app-container {
+  h2 {
+    @apply text-lg my-2;
+  }
+}
+
+.distinguish-app-container {
+  color: rgb(var(--color-base-content));
+}
+
+.distinguish-modal-header h3 {
+  @apply text-lg;
+}
+
+.distinguish-btn {
+  @apply px-4 py-1 rounded-none text-sm;
+}
+
+.distinguish-title {
+  @apply text-xl my-4;
+}
+
+.distinguish-row-filter-buttons {
+  @apply my-4;
+}
+</style>
diff --git a/src/modules/otus/components/SiteMap.vue b/src/modules/otus/components/DataMap.vue
similarity index 93%
rename from src/modules/otus/components/SiteMap.vue
rename to src/modules/otus/components/DataMap.vue
index 14d5350..a352fda 100644
--- a/src/modules/otus/components/SiteMap.vue
+++ b/src/modules/otus/components/DataMap.vue
@@ -7,14 +7,14 @@
       @click="isModalVisible = true"
     >
       <IconJson class="w-4 h-4" />
-      Sitemap
+      Datamap
     </VButton>
     <VModal
       v-if="isModalVisible"
       @close="isModalVisible = false"
     >
       <template #header>
-        <h3 class="font-medium">Sitemap</h3>
+        <h3 class="font-medium">Datamap</h3>
       </template>
       <div class="p-4 pt-0">
         <p class="text-sm mb-2">
@@ -31,7 +31,7 @@
           </VTableHeader>
           <VTableBody>
             <VTableBodyRow
-              v-for="(item, key) in store.sitemap"
+              v-for="(item, key) in store.datamap"
               :key="key"
             >
               <VTableBodyCell class="capitalize">{{
diff --git a/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue b/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue
index d204dc4..aaf709b 100644
--- a/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue
+++ b/src/modules/otus/components/Panel/PanelContent/PanelContentTopic.vue
@@ -2,14 +2,13 @@
   <VCardHeader class="border-t border-base-muted first:border-t-0">
     {{ title }}
   </VCardHeader>
-  <VCardContent>
-    <ul 
+  <VCardContent class="panel-content-list">
+    <div
       v-for="(text, index) in textList"
       :key="index"
-      class="pt-1 text-sm "
-    >
-      <li v-html="text" />
-    </ul>
+      class="pt-1 text-sm"
+      v-html="text"
+    ></div>
   </VCardContent>
 </template>
 
@@ -25,4 +24,19 @@ defineProps({
     required: true
   }
 })
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.panel-content-list {
+  ul {
+    margin: 1rem 0;
+    list-style: disc;
+    margin-left: 1rem;
+  }
+
+  ol {
+    list-style-type: decimal;
+    margin-left: 1rem;
+  }
+}
+</style>
diff --git a/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue b/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
index 0423991..4104c2b 100644
--- a/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
+++ b/src/modules/otus/components/Panel/PanelDescendants/PanelDescendants.vue
@@ -15,11 +15,7 @@
       <ul class="tree ml-2">
         <AnimationOpacity>
           <DescendantsTree
-            v-if="
-              taxonomy &&
-              (taxonomy.nomenclatural_synonyms.length ||
-                taxonomy.descendants.length)
-            "
+            v-if="hasRecords"
             :taxonomy="taxonomy"
           />
           <p v-if="
@@ -31,12 +27,13 @@
           </p>
         </AnimationOpacity>
       </ul>
+      <span v-if="!hasRecords && !isLoading">No records found.</span>
     </VCardContent>
   </VCard>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useOtuPageRequest } from '@/modules/otus/helpers/useOtuPageRequest'
 import DescendantsTree from './DescendantsTree.vue'
 import TaxonWorks from '../../../services/TaxonWorks'
@@ -52,6 +49,13 @@ const props = defineProps({
 const taxonomy = ref(null)
 const isLoading = ref(false)
 
+const hasRecords = computed(
+  () =>
+    taxonomy.value &&
+    (taxonomy.value.nomenclatural_synonyms.length ||
+      taxonomy.value.descendants.length)
+)
+
 watch(
   () => props.otuId,
   async () => {
diff --git a/src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue b/src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue
new file mode 100644
index 0000000..f80051a
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelKeys/PanelKeys.vue
@@ -0,0 +1,79 @@
+<template>
+  <VCard v-if="count">
+    <VCardHeader>Keys ({{ count }})</VCardHeader>
+    <VCardContent>
+      <template
+        v-for="(group, key) in observationMatrices"
+        :key="key"
+      >
+        <div v-if="Object.keys(group).length">
+          <VTable>
+            <VTableHeader>
+              <VTableHeaderRow>
+                <VTableHeaderCell>
+                  {{ key }}
+                </VTableHeaderCell>
+              </VTableHeaderRow>
+            </VTableHeader>
+            <VTableBody>
+              <VTableBodyRow v-for="(label, id) in group">
+                <VTableBodyCell>
+                  <RouterLink
+                    :to="{ name: 'interactive-keys-id', params: { id } }"
+                    v-text="label"
+                  />
+                </VTableBodyCell>
+              </VTableBodyRow>
+            </VTableBody>
+          </VTable>
+        </div>
+      </template>
+    </VCardContent>
+  </VCard>
+</template>
+
+<script setup>
+import TaxonWorks from '../../../services/TaxonWorks.js'
+import { useOtuPageRequest } from '../../../helpers/useOtuPageRequest.js'
+import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
+
+const props = defineProps({
+  otuId: {
+    type: Number
+  }
+})
+
+const controller = new AbortController()
+const observationMatrices = ref({
+  to: {},
+  in: {}
+})
+
+const count = computed(
+  () =>
+    []
+      .concat(...Object.values(observationMatrices.value))
+      .filter((item) => Object.keys(item).length).length
+)
+
+onMounted(() => {
+  const params = {
+    otu_id: props.otuId
+  }
+
+  useOtuPageRequest('panel keys', () =>
+    TaxonWorks.getKeys(props.otuId, { signal: controller.signal, params })
+  )
+    .then(({ data }) => {
+      observationMatrices.value = {
+        to: data.observation_matrices.scoped,
+        in: data.observation_matrices.in
+      }
+    })
+    .catch(() => {})
+})
+
+onBeforeUnmount(() => {
+  controller?.abort()
+})
+</script>
diff --git a/src/modules/otus/components/Panel/PanelKeys/main.js b/src/modules/otus/components/Panel/PanelKeys/main.js
new file mode 100644
index 0000000..c8095b3
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelKeys/main.js
@@ -0,0 +1,6 @@
+import PanelKeys from './PanelKeys.vue'
+
+export default {
+  id: 'panel:keys',
+  component: PanelKeys
+}
diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
index beeeb90..a6786aa 100644
--- a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
+++ b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -69,9 +69,10 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useDistributionStore } from '@/modules/otus/store/useDistributionStore.js'
+import { useDistributionStore } from './store/useDistributionStore.js'
 import { makeClusterIconFor } from './clusters/makeClusterIconFor'
 import { useGeojsonOptions } from './composables/useGeojsonOptions.js'
+import { LEGEND } from './constants'
 import MapPopup from './components/MapPopup.vue'
 import CachedMap from './components/CachedMap.vue'
 import OtuSearch from './components/Search/OtuSearch.vue'
@@ -107,29 +108,6 @@ const store = useDistributionStore()
 const popupElement = ref(null)
 const { popupItem, geojsonOptions } = useGeojsonOptions({ popupElement })
 
-const LEGEND = {
-  AssertedDistribution: {
-    label: 'Asserted distribution',
-    background: 'bg-map-asserted'
-  },
-  Georeference: {
-    label: 'Georeference',
-    background: 'bg-map-georeference'
-  },
-  TypeMaterial: {
-    label: 'Type material',
-    background: 'bg-map-type-material'
-  },
-  CollectionObject: {
-    label: 'Collection object',
-    background: 'bg-map-collection-object'
-  },
-  Aggregate: {
-    label: 'Aggregate (Asserted distribution & Georeference)',
-    background: 'bg-map-aggregate'
-  }
-}
-
 onMounted(() => {
   isLoading.value = true
 
diff --git a/src/modules/otus/components/Panel/PanelMap/constants/index.js b/src/modules/otus/components/Panel/PanelMap/constants/index.js
new file mode 100644
index 0000000..e8311d6
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/constants/index.js
@@ -0,0 +1 @@
+export * from './legend'
diff --git a/src/modules/otus/components/Panel/PanelMap/constants/legend.js b/src/modules/otus/components/Panel/PanelMap/constants/legend.js
new file mode 100644
index 0000000..9107aa8
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/constants/legend.js
@@ -0,0 +1,22 @@
+export const LEGEND = {
+  Aggregate: {
+    label: 'Aggregate (Asserted distribution & Georeference)',
+    background: 'bg-map-aggregate'
+  },
+  AssertedDistribution: {
+    label: 'Asserted distribution',
+    background: 'bg-map-asserted'
+  },
+  Georeference: {
+    label: 'Georeference',
+    background: 'bg-map-georeference'
+  },
+  CollectionObject: {
+    label: 'Collection object',
+    background: 'bg-map-collection-object'
+  },
+  TypeMaterial: {
+    label: 'Type material',
+    background: 'bg-map-type-material'
+  }
+}
diff --git a/src/modules/otus/store/useDistributionStore.js b/src/modules/otus/components/Panel/PanelMap/store/useDistributionStore.js
similarity index 73%
rename from src/modules/otus/store/useDistributionStore.js
rename to src/modules/otus/components/Panel/PanelMap/store/useDistributionStore.js
index 263ba33..f4e57ee 100644
--- a/src/modules/otus/store/useDistributionStore.js
+++ b/src/modules/otus/components/Panel/PanelMap/store/useDistributionStore.js
@@ -1,12 +1,31 @@
-import TaxonWorks from '../services/TaxonWorks'
+import TaxonWorks from '../../../../services/TaxonWorks'
 import { defineStore } from 'pinia'
-import { useOtuPageRequest } from '../helpers/useOtuPageRequest'
-import { RESPONSE_ERROR } from '../constants'
+import { useOtuPageRequest } from '../../../../helpers/useOtuPageRequest'
+import { RESPONSE_ERROR } from '../../../../constants'
 import {
-  isRankGrpup,
+  isRankGroup,
   removeDuplicateShapes,
   makeGeoJSONFeature
 } from '../utils'
+import { LEGEND } from '../constants'
+
+function sortFeaturesByType(arr, reference) {
+  const referenceMap = new Map()
+
+  reference.forEach((item, index) => {
+    referenceMap.set(item, index)
+  })
+
+  return arr.toSorted((a, b) => {
+    const indexA = referenceMap.has(a.properties.base.type)
+      ? referenceMap.get(a.properties.base.type)
+      : Infinity
+    const indexB = referenceMap.has(b.properties.base.type)
+      ? referenceMap.get(b.properties.base.type)
+      : Infinity
+    return indexA - indexB
+  })
+}
 
 export const useDistributionStore = defineStore('distributionStore', {
   state: () => {
@@ -60,7 +79,7 @@ export const useDistributionStore = defineStore('distributionStore', {
 
     async loadDistribution({ otuId, rankString }) {
       const isSpeciesGroup =
-        rankString && isRankGrpup('SpeciesGroup', rankString)
+        rankString && isRankGroup('SpeciesGroup', rankString)
 
       this.controller = new AbortController()
 
@@ -75,7 +94,9 @@ export const useDistributionStore = defineStore('distributionStore', {
               this.distribution.geojson = null
               this.distribution.errorMessage = data.message
             } else {
-              const { features, shapeTypes } = removeDuplicateShapes(data)
+              const { features, shapeTypes } = removeDuplicateShapes(
+                sortFeaturesByType(data.features, Object.keys(LEGEND))
+              )
 
               this.distribution.currentShapeTypes = shapeTypes
               this.distribution.geojson = {
diff --git a/src/modules/otus/components/Panel/PanelMap/utils/index.js b/src/modules/otus/components/Panel/PanelMap/utils/index.js
new file mode 100644
index 0000000..1094c15
--- /dev/null
+++ b/src/modules/otus/components/Panel/PanelMap/utils/index.js
@@ -0,0 +1,3 @@
+export * from './isRankGroup'
+export * from './makeGeoJSONFeature'
+export * from './removeDuplicateShapes'
diff --git a/src/modules/otus/utils/isRankGroup.js b/src/modules/otus/components/Panel/PanelMap/utils/isRankGroup.js
similarity index 62%
rename from src/modules/otus/utils/isRankGroup.js
rename to src/modules/otus/components/Panel/PanelMap/utils/isRankGroup.js
index 494b968..55e244c 100644
--- a/src/modules/otus/utils/isRankGroup.js
+++ b/src/modules/otus/components/Panel/PanelMap/utils/isRankGroup.js
@@ -1,4 +1,4 @@
-export function isRankGrpup(compareRank, rank) {
+export function isRankGroup(compareRank, rank) {
   const rankGroup = rank.split('::').at(2)
 
   return rankGroup === compareRank
diff --git a/src/modules/otus/utils/makeGeoJSONFeature.js b/src/modules/otus/components/Panel/PanelMap/utils/makeGeoJSONFeature.js
similarity index 100%
rename from src/modules/otus/utils/makeGeoJSONFeature.js
rename to src/modules/otus/components/Panel/PanelMap/utils/makeGeoJSONFeature.js
diff --git a/src/modules/otus/utils/removeDuplicateShapes.js b/src/modules/otus/components/Panel/PanelMap/utils/removeDuplicateShapes.js
similarity index 96%
rename from src/modules/otus/utils/removeDuplicateShapes.js
rename to src/modules/otus/components/Panel/PanelMap/utils/removeDuplicateShapes.js
index c90bd8f..5f0a197 100644
--- a/src/modules/otus/utils/removeDuplicateShapes.js
+++ b/src/modules/otus/components/Panel/PanelMap/utils/removeDuplicateShapes.js
@@ -2,7 +2,7 @@ export function removeDuplicateShapes(data) {
   const features = []
   const shapeTypes = []
 
-  data.features.forEach((feature) => {
+  data.forEach((feature) => {
     const shapeId = feature.properties.shape.id
     const shapeType = feature.properties.shape.type
 
diff --git a/src/modules/otus/constants/layouts/overview.js b/src/modules/otus/constants/layouts/overview.js
index 4ba8eb8..d64522d 100644
--- a/src/modules/otus/constants/layouts/overview.js
+++ b/src/modules/otus/constants/layouts/overview.js
@@ -10,6 +10,7 @@ export const DEFAULT_OVERVIEW_LAYOUT = {
           'panel:map',
           'panel:descendants',
           'panel:content',
+          'panel:keys',
           'panel:statistics',
           'panel:type',
           'panel:type-specimen',
diff --git a/src/modules/otus/services/TaxonWorks.js b/src/modules/otus/services/TaxonWorks.js
index 176c042..83a093c 100644
--- a/src/modules/otus/services/TaxonWorks.js
+++ b/src/modules/otus/services/TaxonWorks.js
@@ -93,4 +93,8 @@ export default class TaxonWorks {
   static getCachedMap(id) {
     return makeAPIRequest.get(`/cached_maps/${id}`)
   }
+
+  static getKeys(otuId) {
+    return makeAPIRequest.get(`/otus/${otuId}/inventory/keys`)
+  }
 }
diff --git a/src/modules/otus/store/request.js b/src/modules/otus/store/request.js
index e5fee78..eee76ee 100644
--- a/src/modules/otus/store/request.js
+++ b/src/modules/otus/store/request.js
@@ -12,7 +12,7 @@ export const useOtuPageRequestStore = defineStore('otuPageRequest', {
       return (key) => state.requests[key]
     },
 
-    sitemap: (state) => {
+    datamap: (state) => {
       const keys = Object.keys(state.requests).sort()
 
       return Object.fromEntries(
diff --git a/src/modules/otus/store/useImageStore.js b/src/modules/otus/store/useImageStore.js
index d3d3f5b..5e88006 100644
--- a/src/modules/otus/store/useImageStore.js
+++ b/src/modules/otus/store/useImageStore.js
@@ -20,7 +20,7 @@ export const useImageStore = defineStore('imageStore', {
       const UNSUPPORTED_FORMAT = ['image/tiff']
       const params = {
         extend: ['depictions', 'attribution', 'source', 'citations'],
-        otu_scope: ['all']
+        otu_scope: ['all', 'coordinate_otus']
       }
 
       this.controller = new AbortController()
diff --git a/src/modules/otus/utils/index.js b/src/modules/otus/utils/index.js
index 1a97887..7eb39a5 100644
--- a/src/modules/otus/utils/index.js
+++ b/src/modules/otus/utils/index.js
@@ -1,4 +1 @@
 export * from './isAvailableForRank'
-export * from './isRankGroup'
-export * from './makeGeoJSONFeature'
-export * from './removeDuplicateShapes'
diff --git a/src/modules/otus/views/Index.vue b/src/modules/otus/views/Index.vue
index cb72e54..faf24d3 100644
--- a/src/modules/otus/views/Index.vue
+++ b/src/modules/otus/views/Index.vue
@@ -34,7 +34,7 @@
             </VSkeleton>
             <div class="flex flex-row gap-2">
               <ClientOnly>
-                <SiteMap />
+                <DataMap />
               </ClientOnly>
               <DWCDownload
                 v-if="isReady"
@@ -90,7 +90,7 @@ import { useSchemaOrg, defineTaxon } from '@/plugins/schemaOrg/composables'
 import { RESPONSE_ERROR } from '../constants'
 import { isAvailableForRank } from '../utils'
 import { useChildrenRoutes, useUserLifeCycles } from '../composables'
-import SiteMap from '../components/SiteMap.vue'
+import DataMap from '../components/DataMap.vue'
 import Breadcrumb from '../components/Breadcrumb/Breadcrumb.vue'
 import TaxaInfo from '../components/TaxaInfo.vue'
 import DWCDownload from '../components/DWCDownload.vue'
diff --git a/vite.config.js b/vite.config.js
index 6bae467..5d19371 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -20,12 +20,22 @@ export default () => {
     define: {
       __APP_ENV__: configuration
     },
+
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
-        '#': path.resolve(__dirname, '/')
+        '#': path.resolve(__dirname, '.')
+      }
+    },
+
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler'
+        }
       }
     },
+
     plugins: [
       Vue({
         include: [/\.vue$/, /\.md$/]