diff --git a/.env b/.env
index c2d1ab80..560ff8d6 100644
--- a/.env
+++ b/.env
@@ -6,4 +6,5 @@ VITE_APP_ALGOLIA_INDEX=k-core_dev_published_time_desc
 VITE_APP_BL_SERVER_URL=
 VITE_APP_NL_LINK_PREFIX=
 VITE_APP_ROOT_URL=
-VITE_FLATMAPAPI_LOCATION=https://mapcore-demo.org/curation/flatmap/
\ No newline at end of file
+VITE_FLATMAPAPI_LOCATION=https://mapcore-demo.org/curation/flatmap/
+VITE_APP_CELL_CARDS_API=http://localhost:8787/cellCardsData.json
diff --git a/src/App.vue b/src/App.vue
index 3299be0d..b1e7a0c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,6 +19,7 @@
       <el-button @click="getFacets">Get facets</el-button>
       <el-button @click="toggleCreateData">Create Data/Annotation</el-button>
       <el-button @click="openConnectivitySearch()">Connectivity Search</el-button>
+      <el-button @click="showCellCardExplorer()">Show Cell Card Explorer</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -30,6 +31,7 @@
       :connectivityEntry="connectivityEntry"
       :connectivityKnowledge="connectivityKnowledge"
       :showVisibilityFilter="true"
+      :showCellCards="showCellCards"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @connectivity-hovered="onConnectivityHovered"
@@ -45,9 +47,7 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
-
-
-const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+import { capitalise } from './utils/common.js'
 
 const flatmapQuery = (flatmapApi, sql) => {
   const data = { sql: sql };
@@ -136,6 +136,7 @@ export default {
         BL_SERVER_URL: import.meta.env.VITE_APP_BL_SERVER_URL,
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
         FLATMAPAPI_LOCATION: import.meta.env.VITE_FLATMAPAPI_LOCATION,
+        CELL_CARDS_API: import.meta.env.VITE_APP_CELL_CARDS_API,
       },
       connectivityEntry: [],
       createData: {
@@ -152,6 +153,7 @@ export default {
       query: '',
       filter: [],
       target: [],
+      showCellCards: false,
     }
   },
   methods: {
@@ -366,7 +368,12 @@ export default {
     },
     onConnectivityCollapseChange: function () {
       this.connectivityEntry = [...exampleConnectivityInput]
-    }
+    },
+    showCellCardExplorer: function () {
+      this.showCellCards = true;
+      this.$refs.sideBar.tabClicked({ id: 4, type: 'cellCardExplorer' });
+      this.$refs.sideBar.setDrawerOpen(true);
+    },
   },
   mounted: async function () {
     console.log('mounted app')
diff --git a/src/components.d.ts b/src/components.d.ts
index 6b02393b..388aab43 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     AnnotationTool: typeof import('./components/AnnotationTool.vue')['default']
     BadgesGroup: typeof import('./components/BadgesGroup.vue')['default']
+    CellCard: typeof import('./components/CellCard.vue')['default']
+    CellCardExplorer: typeof import('./components/CellCardExplorer.vue')['default']
     ConnectivityCard: typeof import('./components/ConnectivityCard.vue')['default']
     ConnectivityExplorer: typeof import('./components/ConnectivityExplorer.vue')['default']
     ConnectivityInfo: typeof import('./components/ConnectivityInfo.vue')['default']
@@ -43,6 +45,7 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
+    IconOpenExternal: typeof import('./components/icons/IconOpenExternal.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
diff --git a/src/components/CellCard.vue b/src/components/CellCard.vue
new file mode 100644
index 00000000..24194b85
--- /dev/null
+++ b/src/components/CellCard.vue
@@ -0,0 +1,994 @@
+<template>
+  <div
+    ref="cardElementRef"
+    class="card"
+    :class="{ active: isActive }"
+    :style="cardStyleVars"
+  >
+    <div
+      class="card-header"
+      @click="openCard"
+    >
+      <div class="title-content">
+        <div class="card-title">
+          {{ cellType.preferredLabel }}
+        </div>
+        <div class="card-keywords">
+          <span>{{ cellType.species }}</span>
+          <div class="card-chips">
+            <span
+              v-for="somaLocation in cellType.somaLocations"
+              class="card-chip"
+              :key="somaLocation">
+              {{ somaLocation }}
+            </span>
+          </div>
+          <span class="source-publication-chip" v-if="cellType.sourceNomenclature">
+            {{ cellType.sourceNomenclatureLabel }}
+          </span>
+        </div>
+        <el-button
+          v-if="isActive && (cellType.alertNotes?.length || cellType.curatorNotes?.length)"
+          round
+          size="small"
+          class="alert-chip"
+          @click.stop="showAlertMessage"
+        >
+          <el-icon class="alert"><el-icon-warn-triangle-filled /></el-icon>
+          Notes
+        </el-button>
+      </div>
+      <div class="title-buttons" @click.stop>
+        <CopyToClipboard @copied="onCopied" :content="updatedCopyContent" />
+        <el-popover
+          width="auto"
+          trigger="hover"
+          :teleported="false"
+          popper-class="popover-map-pin"
+        >
+          <template #reference>
+            <el-button class="button-circle" circle @click="closeCard">
+              <el-icon color="white">
+                <el-icon-close />
+              </el-icon>
+            </el-button>
+          </template>
+          <span>Close</span>
+        </el-popover>
+      </div>
+    </div>
+    <div class="card-details">
+      <div class="card-details-inner">
+        <div v-if="cellType.entity" class="card-section">
+          <div class="card-section-title">Entity</div>
+          <span>{{ cellType.entity }}</span>
+        </div>
+        <div v-if="cellType.species" class="card-section">
+          <div class="card-section-title">Species</div>
+          <span>{{ cellType.species }}</span>
+        </div>
+        <div v-if="cellType.somaLocations?.length" class="card-section">
+          <div class="card-section-title">Soma Location</div>
+          <div class="card-list-items">
+            <div
+              v-for="location in somaLocations"
+              class="card-list-item"
+              :key="location.id"
+              @mouseenter="showSomaLocation(location.name)"
+              @mouseleave="showSomaLocation()"
+            >
+              <span>{{ location.name }}</span>
+              <div class="card-list-search">
+                <el-popover
+                  width="180"
+                  trigger="hover"
+                  :teleported="true"
+                  :append-to="cardElement"
+                  popper-class="popover-origin-help popover-search-actions"
+                  @show="onSearchPopoverShow(location.id)"
+                  @hide="onSearchPopoverHide(location.id)"
+                >
+                  <template #reference>
+                    <el-icon
+                      class="status-search-icon"
+                      :class="{ 'is-visible': activeSearchPopoverLocationId === location.id }"
+                    >
+                      <el-icon-search />
+                    </el-icon>
+                  </template>
+                  <div class="search-action-list">
+                    <button
+                      type="button"
+                      class="search-action-button"
+                      @click="openDatasetSearch(location.name)"
+                    >
+                      Search dataset
+                    </button>
+                    <button
+                      type="button"
+                      class="search-action-button"
+                      @click="openConnectivitySearch(location.name)"
+                    >
+                      Search connectivity
+                    </button>
+                  </div>
+                </el-popover>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="cellType.circuitRole" class="card-section">
+          <div class="card-section-title">Circuit Role</div>
+          <span>{{ cellType.circuitRole }}</span>
+        </div>
+        <div v-if="cellType.creLine" class="card-section">
+          <div class="card-section-title">Cre Line</div>
+          <span>{{ cellType.creLine }}</span>
+        </div>
+        <div v-if="formattedMarkerGenes.length" class="card-section">
+          <div class="card-section-title">Marker Genes</div>
+          <div class="marker-genes-list">
+            <a
+              v-for="markerGene in formattedMarkerGenes"
+              :key="markerGene.key"
+              class="marker-gene-link"
+              :href="markerGene.uri"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span>{{ markerGene.name }}</span>
+              <sup v-if="markerGene.expression">{{ markerGene.expression }}</sup>
+              <IconOpenExternal class="external-link-icon" />
+            </a>
+          </div>
+        </div>
+        <div v-if="cellType.fiberTypeString" class="card-section">
+          <div class="card-section-title">Axon Phenotype</div>
+          <div class="card-section-content">{{ cellType.fiberTypeString }}</div>
+        </div>
+        <div v-if="cellType.physiologyString" class="card-section">
+          <div class="card-section-title">Physiology</div>
+          <div class="card-section-content success">{{ cellType.physiologyString }}</div>
+        </div>
+        <div v-if="cellType.relatedCells?.length" class="card-section">
+          <div class="card-section-title">Related Species Variants</div>
+          <ul class="related-cell-list">
+            <li v-for="relatedCell in cellType.relatedCells" :key="relatedCell">
+              <button
+                class="related-cell-item"
+                @click.stop="$emit('related-cell-click', relatedCell)"
+                title="Click to view this cell type"
+              >
+                {{ relatedCell.label }}
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div v-if="cellType.sourceNomenclature" class="card-section source-publication-section">
+          <div class="card-section-title">Source Publication</div>
+          <p>
+            <a
+              class="source-publication-link"
+              :href="cellType.sourceNomenclature"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ cellType.sourceNomenclatureLabel }}
+              <IconOpenExternal class="external-link-icon" />
+            </a>
+          </p>
+        </div>
+        <div
+          class="card-section"
+          v-if="cellType.alertNotes?.length || cellType.curatorNotes?.length"
+          ref="alertElement"
+        >
+          <div class="card-section-title">Notes</div>
+          <div class="alert-block">
+            <div class="alert-block-section" v-if="cellType.alertNotes?.length">
+              <div class="alert-block-title">Alert Notes:</div>
+              <div v-for="note in cellType.alertNotes"
+                v-html="formatAlertText(note)"
+                class="alert-block-note"
+              ></div>
+            </div>
+            <div class="alert-block-section" v-if="cellType.curatorNotes?.length">
+              <div class="alert-block-title">Curator Notes:</div>
+              <div v-for="note in cellType.curatorNotes"
+                v-html="formatAlertText(note)"
+                class="alert-block-note"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ElButton as Button,
+  ElIcon as Icon,
+} from 'element-plus'
+import { Warning as ElIconWarning } from '@element-plus/icons-vue'
+import {
+  CopyToClipboard,
+} from '@abi-software/map-utilities';
+import '@abi-software/map-utilities/dist/style.css';
+import EventBus from './EventBus.js'
+import { capitalise, formatAlertText as formatAlertTextUtil, scrollToRef } from '../utils/common.js';
+import IconOpenExternal from './icons/IconOpenExternal.vue';
+
+const LOCATION_ID_MAP = {
+  'soma_tg': 'trigeminal ganglion',
+  'soma_drg': 'dorsal root ganglion',
+};
+
+export default {
+  name: 'CellCard',
+  components: {
+    Button,
+    Icon,
+    ElIconWarning,
+    CopyToClipboard,
+    IconOpenExternal,
+  },
+  props: {
+    cellType: {
+      type: Object,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['open', 'close', 'soma-location-hovered', 'dataset-search', 'connectivity-search', 'related-cell-click'],
+  data() {
+    return {
+      cardElement: null,
+      activeSearchPopoverLocationId: null,
+    };
+  },
+  mounted: function () {
+    this.cardElement = this.$refs.cardElementRef;
+  },
+  computed: {
+    cardStyleVars: function() {
+      return {
+        '--cell-card-source-color': this.cellType?.sourceColor || this.cellType?.color || '#8300bf',
+      };
+    },
+    formattedMarkerGenes: function() {
+      return (this.cellType?.markerGenes || [])
+        .map((markerGene, index) => {
+          const name = String(markerGene?.name || '').trim();
+          const expression = String(markerGene?.expression || '').trim();
+          const uri = this.sanitizeMarkerGeneUri(markerGene?.uri, expression);
+
+          if (!name || !uri) {
+            return null;
+          }
+
+          return {
+            key: `${name}-${expression || 'none'}-${index}`,
+            name,
+            expression,
+            uri,
+          };
+        })
+        .filter(Boolean);
+    },
+    updatedCopyContent: function() {
+      const {
+        preferredLabel,
+        entity,
+        species,
+        somaLocations,
+        circuitRole,
+        creLine,
+        geneExpressionString,
+        fiberTypeString,
+        physiologyString,
+        relatedCells,
+        alertNotes,
+        curatorNotes,
+        sourceNomenclature,
+        sourceNomenclatureLabel
+      } = this.cellType;
+
+      const contentArray = [];
+      if (preferredLabel) {
+        contentArray.push(`<div><strong>Cell Type:</strong> ${preferredLabel}</div>`);
+      }
+      if (entity) {
+        contentArray.push(`<div><strong>Entity:</strong> ${entity}</div>`);
+      }
+      if (species) {
+        contentArray.push(`<div><strong>Species:</strong> ${species}</div>`);
+      }
+      if (somaLocations?.length) {
+        const items = somaLocations.map((location) => `<li>${location}</li>`).join('');
+        contentArray.push(`<div><strong>Soma Locations:</strong><ul>${items}</ul></div>`);
+      }
+      if (circuitRole) {
+        contentArray.push(`<div><strong>Circuit Role:</strong> ${circuitRole}</div>`);
+      }
+      if (creLine) {
+        contentArray.push(`<div><strong>Cre Line:</strong> ${creLine}</div>`);
+      }
+      if (geneExpressionString) {
+        contentArray.push(`<div><strong>Marker Genes:</strong> ${geneExpressionString}</div>`);
+      }
+      if (fiberTypeString) {
+        contentArray.push(`<div><strong>Axon Phenotype:</strong> ${fiberTypeString}</div>`);
+      }
+      if (physiologyString) {
+        contentArray.push(`<div><strong>Physiology:</strong> ${physiologyString}</div>`);
+      }
+      if (relatedCells?.length) {
+        const relatedItems = relatedCells
+          .map((cell) => cell?.label)
+          .filter(Boolean)
+          .map((label) => `<li>${label}</li>`)
+          .join('');
+        if (relatedItems) {
+          contentArray.push(`<div><strong>Related Species Variants:</strong><ul>${relatedItems}</ul></div>`);
+        }
+      }
+      if (sourceNomenclatureLabel) {
+        const sourceLabel = sourceNomenclature
+          ? `${sourceNomenclatureLabel} (<a href="${sourceNomenclature}">${sourceNomenclature}</a>)`
+          : sourceNomenclatureLabel;
+        contentArray.push(`<div><strong>Source Publication:</strong> ${sourceLabel}</div>`);
+      }
+
+      if (alertNotes?.length) {
+        const alertContent = alertNotes
+          .map((note) => formatAlertTextUtil(note))
+          .join('\n');
+        contentArray.push(`<div><strong>Alert Notes:</strong></div>\n${alertContent}`);
+      }
+
+      if (curatorNotes?.length) {
+        const curatorContent = curatorNotes
+          .map((note) => formatAlertTextUtil(note))
+          .join('\n');
+        contentArray.push(`<div><strong>Curator Notes:</strong></div>\n${curatorContent}`);
+      }
+
+      return contentArray.join('\n');
+    },
+    somaLocations: function() {
+      const mappedLocations = this.cellType.somaLocations.map((location) => {
+        const locationKey = Object.keys(LOCATION_ID_MAP).find((key) => LOCATION_ID_MAP[key] === location) || '';
+        const isClustered = this.cellType.clusterAttributes?.[locationKey];
+        if (isClustered) {
+          return {
+            name: capitalise(location),
+            id: locationKey,
+          }
+        }
+        return false;
+      });
+      return mappedLocations;
+    },
+  },
+  methods: {
+    sanitizeMarkerGeneUri: function(uri, expression = '') {
+      let normalizedUri = String(uri || '').trim();
+      const normalizedExpression = String(expression || '').trim();
+
+      if (!normalizedUri) return '';
+
+      if (normalizedExpression) {
+        const escapedExpression = normalizedExpression.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        normalizedUri = normalizedUri.replace(new RegExp(`\\s+${escapedExpression}$`, 'i'), '');
+      }
+
+      return normalizedUri.trim();
+    },
+    transformString: function(str) {
+      if (!str) return '';
+      // replace the string with ^ with <sup> and the next word with </sup>
+      return str.replace(/\^(\w+)/g, '<sup>$1</sup>');
+    },
+    onCopied: function() {
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_cell_card_copy`,
+        'category': this.cellType.preferredLabel || '',
+        'location': 'map_sidebar_cell_card',
+      });
+    },
+    openCard: function() {
+      this.$emit('open', this.cellType.id);
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_cell_card_open`,
+        'category': this.cellType.id || '',
+        'location': 'map_sidebar_cell_card',
+      });
+    },
+    closeCard: function() {
+      this.$emit('close');
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_cell_card_close`,
+        'category': this.cellType.id || '',
+        'location': 'map_sidebar_cell_card',
+      });
+    },
+    showSomaLocation: function (name) {
+      this.$emit('soma-location-hovered', name);
+    },
+    openDatasetSearch: function (query) {
+      this.$emit('dataset-search', {
+        species: capitalise(this.cellType?.species),
+        location: query,
+      });
+    },
+    openConnectivitySearch: function (query) {
+      // Find the UBERON term from query value (label)
+      const availableDataRaw = localStorage.getItem('available-name-curie-mapping');
+      const availableData = availableDataRaw ? JSON.parse(availableDataRaw) : {};
+      const locationCurie = Object.keys(availableData).find(
+        (curie) => availableData[curie].toLowerCase() === query.toLowerCase()
+      );
+      const facets = locationCurie ? [
+        {
+          "facet": `[\"${locationCurie}\",[]]`,
+          "facetPropPath": "flatmap.connectivity.source.all",
+          "tagLabel": query,
+          "term": "All"
+        }
+      ] : [];
+      this.$emit('connectivity-search', {
+        facets: facets,
+        query: '',
+      });
+    },
+    onSearchPopoverShow: function (locationId) {
+      this.activeSearchPopoverLocationId = locationId;
+    },
+    onSearchPopoverHide: function (locationId) {
+      if (this.activeSearchPopoverLocationId === locationId) {
+        this.activeSearchPopoverLocationId = null;
+      }
+    },
+    showAlertMessage: function () {
+      scrollToRef(this, 'alertElement');
+    },
+    formatAlertText: function (text) {
+      return formatAlertTextUtil(text);
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: relative;
+  font-family: Asap;
+  font-size: 14px;
+  box-sizing: border-box;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: calc(100% - 15px);
+    height: calc(100% - 10px);
+    border: 3px solid transparent;
+    border-radius: 5px;
+    box-sizing: border-box;
+    z-index: 1;
+  }
+
+  &.active::before,
+  &:hover::before {
+    border-color: $app-primary-color;
+  }
+
+  &:not(:first-child) {
+    margin-top: 5px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0px;
+      left: 10px;
+      width: 455px; // Same as other cards in the sidebar
+      height: 2px; // Same as other cards in the sidebar
+      background-color: #e4e7ed;
+      z-index: 0;
+    }
+  }
+
+  .card-details {
+    display: none;
+  }
+
+  &.active {
+    background-color: #f7faff;
+
+    &::before {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .card-header {
+      cursor: default;
+
+      &::before {
+        opacity: 1;
+      }
+
+      .card-title {
+        margin: 0;
+        line-height: 1.3em !important;
+        font-size: 18px;
+        font-weight: bold;
+        color: $app-primary-color;
+      }
+
+      .card-keywords {
+        display: none;
+      }
+    }
+
+    .card-details {
+      display: block;
+    }
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  cursor: pointer;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    bottom: 7px;
+    left: 5px;
+    width: calc(100% - 10px);
+    height: 1px;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+}
+
+.card-header,
+.card-details {
+  position: relative;
+  z-index: 2;
+}
+
+.card-header,
+.card-details-inner {
+  padding: 1rem;
+}
+
+.title-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.card-title {
+  margin-bottom: 0.75rem;
+  font-weight: bold;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-details-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  padding-top: 0;
+}
+
+.card-keywords,
+.card-chips {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  span {
+    color: #606266;
+  }
+}
+
+.card-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  background-color: #f0f0f0;
+  border-radius: 12px;
+  transition: background-color 0.2s ease;
+
+  .card-details & {
+    padding: 4px 8px;
+    border: 1px solid #dcdcdc;
+
+  }
+}
+
+.card-list-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.card-list-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  position: relative;
+  box-sizing: border-box;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+    background-color: rgba($app-primary-color, 0.04);
+    border-left: 4px solid rgba($app-primary-color, 0.16);
+  }
+
+  &:hover::before {
+    background-color: rgba($app-primary-color, 0.07);
+    border-left-color: rgba($app-primary-color, 0.24);
+  }
+
+  > span {
+    line-height: 1.5em;
+    font-weight: 500;
+  }
+}
+
+.card-list-search {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.status-search-icon {
+  font-size: 16px;
+  color: $app-primary-color;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  &.is-visible {
+    opacity: 1;
+  }
+
+  &:hover {
+    color: #ac76c5;
+  }
+}
+
+.card-list-item:hover .status-search-icon {
+  opacity: 1;
+}
+
+:deep(.popover-origin-help.el-popover) {
+  font-family: 'Asap', sans-serif;
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color !important;
+  border-radius: 4px !important;
+  color: #303133 !important;
+  text-transform: none !important; // need to overide the tooltip text transform
+  font-weight: 400;
+
+  .el-popper__arrow {
+    &:before {
+      background: #f3ecf6 !important;
+      border-color: $app-primary-color;
+      background-color: #ffffff;
+    }
+  }
+}
+
+:deep(.popover-search-actions.el-popover) {
+  padding: 6px;
+}
+
+.search-action-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.search-action-button {
+  border: 0;
+  width: 100%;
+  padding: 6px 8px;
+  text-align: left;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 12px;
+  color: #303133;
+  background: transparent;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba($app-primary-color, 0.12);
+    color: $app-primary-color;
+  }
+}
+
+.card-section {
+  .card-section-title {
+    font-weight: 600;
+  }
+
+  p {
+    margin: 0;
+    color: #606266;
+  }
+
+  ul {
+    margin: 0;
+    padding-left: 1rem;
+
+    &.related-cell-list {
+      list-style-type: none;
+      padding-left: 0;
+    }
+
+    li {
+      color: #606266;
+    }
+  }
+}
+
+.card-section {
+  .card-section-title {
+    display: block;
+    margin-bottom: 0.75rem;
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+}
+
+.card-section-content {
+  padding: 0.5rem;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  border: 1px solid #dcdcdc;
+
+  &.success {
+    border-color: #b3e5b3;
+    background-color: #f0f9eb;
+  }
+}
+
+.marker-genes-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.marker-gene-link {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.1rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 12px;
+  border: 1px solid $app-primary-color;
+  border-radius: 4px;
+  color: $app-primary-color;
+  background-color: #f9f2fc;
+  text-decoration: none;
+  line-height: 1.2;
+
+  &:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
+  }
+
+  sup {
+    font-size: 0.75em;
+    line-height: 1;
+  }
+}
+
+.external-link-icon {
+  display: inline-flex;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 2px;
+  color: currentColor;
+  opacity: 0.7;
+  vertical-align: middle;
+}
+
+.source-publication-chip,
+.source-publication-link {
+  display: inline-block;
+  border-radius: 4px;
+  color: white !important;
+  text-decoration: none;
+  background-color: var(--cell-card-source-color);
+}
+
+.source-publication-chip {
+  padding: 2px 8px;
+  font-size: 13px;
+}
+
+.alert-chip {
+  margin-top: 5px;
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
+  color: #fff;
+
+  &:hover {
+    color: #fff !important;
+    background-color: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+
+  :deep(> span) {
+    gap: 2px;
+  }
+
+  .alert {
+    width: 1rem;
+    height: 1rem;
+    color: inherit;
+    margin: 0;
+  }
+}
+
+.source-publication-link {
+  padding: 4px 8px;
+
+  &:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
+  }
+}
+
+:deep(.el-popper.popover-map-pin) {
+  padding: 4px 10px;
+  min-width: max-content;
+  font-family: Asap;
+  font-size: 12px;
+  line-height: inherit;
+  color: inherit;
+  background: #f3ecf6 !important;
+  border: 1px solid $app-primary-color;
+
+  & .el-popper__arrow::before {
+    border: 1px solid;
+    border-color: $app-primary-color;
+    background: #f3ecf6;
+  }
+}
+
+.title-buttons {
+  flex: 1 0 0%;
+  max-width: 20%;
+  flex-direction: row;
+  justify-content: end;
+  gap: 0.5rem;
+  display: none;
+
+  .card.active & {
+    display: flex;
+  }
+
+  :deep(.copy-clipboard-button) {
+    &,
+    &:hover,
+    &:focus {
+      border-color: $app-primary-color !important;
+      border-radius: 50%;
+    }
+
+    &.is-disabled {
+      border-color: #dab3ec !important;
+    }
+  }
+
+  .el-button + .el-button {
+    margin-left: 0 !important;
+  }
+}
+
+.button-circle {
+  margin: 0;
+  width: 24px !important;
+  height: 24px !important;
+  border: 1px solid $app-primary-color !important;
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $app-primary-color;
+    border-color: $app-primary-color !important;
+  }
+
+  &.secondary {
+    background-color: white !important;
+  }
+}
+
+.alert-block {
+  background-color: var(--el-color-warning-light-9);
+  border: 1px dashed var(--el-color-warning);
+  padding: 0.75rem;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  :deep(a) {
+    color: $app-primary-color;
+    word-break: break-all;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.alert-block-section {
+  .alert-block-title {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+
+  .alert-block-note {
+    color: #606266;
+    padding-left: 0.5rem;
+
+    + .alert-block-note {
+      margin-top: 0.5rem;
+    }
+  }
+}
+
+.related-cell-list {
+  li + li {
+    margin-top: 0.5rem;
+  }
+}
+
+.related-cell-item {
+  cursor: pointer;
+  color: $app-primary-color;
+  background: none;
+  border: 1px solid $app-primary-color;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  transition: background-color 0.2s ease, border-color 0.2s ease, text-decoration-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba($app-primary-color, 0.08);
+  }
+}
+</style>
diff --git a/src/components/CellCardExplorer.vue b/src/components/CellCardExplorer.vue
new file mode 100644
index 00000000..17cdc24e
--- /dev/null
+++ b/src/components/CellCardExplorer.vue
@@ -0,0 +1,882 @@
+<template>
+  <el-card :body-style="bodyStyle" class="content-card">
+    <template #header>
+      <div class="header">
+        <div class="search-input-container" :class="{'is-focus': searchInput}">
+          <el-input
+            class="search-input"
+            placeholder="Search"
+            v-model="searchInput"
+            @keyup="searchEvent"
+            clearable
+            @clear="clearSearchClicked"
+          ></el-input>
+          <el-popover
+            width="350"
+            trigger="hover"
+            popper-class="filter-help-popover"
+          >
+            <template #reference>
+              <MapSvgIcon icon="help" class="help" />
+            </template>
+            <div>
+              <strong>Search rules:</strong>
+              <ul>
+                <li>
+                  <strong>Multiple Terms:</strong> Separate terms with a comma (<code>,</code>).
+                  This will find cell cards that match any of the terms (an "OR" search).
+                </li>
+                <li>
+                  <strong>Exact Phrase:</strong> Terms within a comma block will be matched as an exact phrase.
+                </li>
+              </ul>
+              <br/>
+              <strong>Examples:</strong>
+              <ul>
+                <li>
+                  <strong>To find by exact phrase:</strong>
+                  Searching for <code>soma location</code> will find any card containing <code>"soma location"</code>.
+                </li>
+                <li>
+                  <strong>To find by multiple terms:</strong>
+                  Searching for <code>mouse, vagal</code> will find cards that contain either <code>mouse</code> OR <code>vagal</code>.
+                </li>
+              </ul>
+            </div>
+          </el-popover>
+        </div>
+        <el-button
+          type="primary"
+          class="button"
+          @click="searchEvent"
+          size="large"
+        >
+          Search
+        </el-button>
+        <el-button
+          link
+          class="el-button-link"
+          @click="onResetClick"
+          size="large"
+        >
+          Reset
+        </el-button>
+      </div>
+    </template>
+
+    <SearchFilters
+      class="filters"
+      ref="filtersRef"
+      :entry="filterEntry"
+      :envVars="envVars"
+      @filterResults="filterUpdate"
+      @numberPerPage="numberPerPageUpdate"
+      @loading="filtersLoading"
+      @cascaderReady="cascaderReady"
+    ></SearchFilters>
+
+    <SearchHistory
+      ref="searchHistory"
+      localStorageKey="sparc.science-cell-card-search-history"
+      @search="searchHistorySearch"
+    ></SearchHistory>
+
+    <div class="content scrollbar" v-loading="loadingCards" ref="content">
+      <CellCard
+        v-for="cellType in cellTypes"
+        :key="cellType.id"
+        :cellType="cellType"
+        :isActive="activeCardId === cellType.id"
+        @open="openCard(cellType.id)"
+        @close="closeCard"
+        @dataset-search="onDatasetSearch"
+        @connectivity-search="onConnectivitySearch"
+        @soma-location-hovered="showSomaLocation"
+        @related-cell-click="onRelatedCellClick"
+      />
+      <el-pagination
+        class="pagination"
+        v-model:current-page="page"
+        hide-on-single-page
+        large
+        layout="prev, pager, next"
+        :page-size="numberPerPage"
+        :total="totalFilteredCount"
+        @current-change="pageChange"
+      ></el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import {
+  ElButton as Button,
+  ElCard as Card,
+  ElInput as Input,
+  ElPagination as Pagination,
+} from 'element-plus'
+import 'element-plus/es/components/message/style/css';
+import SearchFilters from './SearchFilters.vue'
+import SearchHistory from './SearchHistory.vue'
+import EventBus from './EventBus.js'
+import CellCard from './CellCard.vue'
+import { capitalise, generateUUID } from '../utils/common.js';
+import { MapSvgIcon } from '@abi-software/svg-sprite';
+
+let cachedCellCardsData = null
+let pendingCellCardsRequest = null
+
+export default {
+  components: {
+    SearchFilters,
+    SearchHistory,
+    Button,
+    Card,
+    CellCard,
+    Input,
+    MapSvgIcon,
+    Pagination,
+  },
+  name: 'CellCardExplorer',
+  emits: ['soma-location-hovered', 'dataset-search', 'connectivity-search', 'soma-locations-ready'],
+  props: {
+    envVars: {
+      type: Object,
+      default: () => {},
+    },
+    activeSpecies: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data: function () {
+    return {
+      bodyStyle: {
+        flex: '1 1 auto',
+        'flex-flow': 'column',
+        display: 'flex',
+      },
+      allCellTypes: [],
+      cellTypes: [],
+      filterOptions: [],
+      activeFilters: [],
+      searchInput: '',
+      numberPerPage: 10,
+      page: 1,
+      start: 0,
+      totalFilteredCount: 0,
+      loadingCards: false,
+      activeCardId: null,
+      cascaderIsReady: false,
+      geneBaseToDisplay: {},
+      geneDisplayToBase: {},
+    };
+  },
+  computed: {
+    filterEntry: function () {
+      return {
+        numberOfHits: this.totalFilteredCount,
+        filterFacets: this.activeFilters,
+        showFilters: true,
+        options: this.filterOptions,
+        helper: {
+          within: "'mouse' OR 'human'",
+          between: "'species' AND 'soma location'",
+        },
+      }
+    },
+  },
+  watch: {
+    activeSpecies: {
+      deep: true,
+      immediate: true,
+      handler: 'syncActiveSpeciesFilters',
+    },
+  },
+  mounted: function() {
+    this.fetchCellTypes(this.envVars.CELL_CARDS_API);
+  },
+  methods: {
+    syncCascaderFromActiveFilters: function() {
+      if (!this.cascaderIsReady || !this.$refs.filtersRef) {
+        return;
+      }
+
+      if (this.activeFilters.length) {
+        this.$refs.filtersRef.setCascader(this.activeFilters);
+        return;
+      }
+
+      this.$refs.filtersRef.checkShowAllBoxes();
+    },
+    syncActiveSpeciesFilters: function() {
+      this.page = 1;
+      this.start = 0;
+      const normalizedActiveSpecies = this.getValidatedActiveSpecies();
+      const nonSpeciesFilters = this.activeFilters.filter((activeFilter) => {
+        return activeFilter?.term?.toLowerCase() !== 'species';
+      });
+
+      const speciesFilters = normalizedActiveSpecies.map((species) => {
+        return {
+          facetPropPath: 'species',
+          facet: capitalise(species),
+          term: 'Species',
+          tagLabel: capitalise(species),
+        };
+      });
+
+      this.activeFilters = [...nonSpeciesFilters, ...speciesFilters];
+      this.syncCascaderFromActiveFilters();
+      this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
+    },
+    getCellCardsData: async function(url) {
+      if (cachedCellCardsData) {
+        return cachedCellCardsData;
+      }
+
+      if (!pendingCellCardsRequest) {
+        pendingCellCardsRequest = fetch(url)
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+          })
+          .then((data) => {
+            cachedCellCardsData = data;
+            return data;
+          })
+          .finally(() => {
+            pendingCellCardsRequest = null;
+          });
+      }
+
+      return pendingCellCardsRequest;
+    },
+    fetchCellTypes: async function(url) {
+      if (url) {
+        this.loadingCards = true;
+        try {
+          const data = await this.getCellCardsData(url);
+          if (data.DEFAULT_CELL_TYPES) {
+            const loadedCellTypes = data.DEFAULT_CELL_TYPES.map((cellType) => {
+              return {
+                ...cellType,
+                id: generateUUID(),
+              }
+            });
+
+            this.setGeneMappings(data.DEFAULT_GENES);
+            this.allCellTypes = loadedCellTypes;
+            this.filterOptions = this.buildFilterOptions(loadedCellTypes);
+            this.emitSomaLocations(this.filterOptions);
+            this.syncActiveSpeciesFilters();
+          }
+        } catch (error) {
+          console.error('Error fetching cell types:', error);
+        } finally {
+          this.loadingCards = false;
+        }
+      }
+    },
+    activateCard: function(cardId) {
+      this.activeCardId = this.activeCardId === cardId ? null : cardId;
+    },
+    openCard: function(cardId) {
+      this.activeCardId = cardId;
+    },
+    closeCard: function() {
+      this.activeCardId = null;
+    },
+    openSearch: function(filters, query) {
+      this.page = 1;
+      this.start = 0;
+      this.searchInput = String(query || '').trim();
+
+      const openSearchFilters = filters.map((filter) => {
+        return {
+          facetPropPath: 'somaLocations',
+          facet: capitalise(filter.facet || ''),
+          term: filter.term || '',
+          tagLabel: capitalise(filter.facet || ''),
+        };
+      });
+      const normalizedActiveSpecies = this.getValidatedActiveSpecies();
+      const speciesFilters = normalizedActiveSpecies.map((species) => {
+        return {
+          facetPropPath: 'species',
+          facet: capitalise(species),
+          term: 'Species',
+          tagLabel: capitalise(species),
+        };
+      });
+
+      this.activeFilters = [...openSearchFilters, ...speciesFilters];
+      this.syncCascaderFromActiveFilters();
+      this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
+      this.searchHistoryUpdate(this.activeFilters, this.searchInput);
+      this.$nextTick(() => this.scrollToTop());
+    },
+    clearSearchClicked: function() {
+      this.searchInput = '';
+      this.searchAndFilterUpdate();
+    },
+    searchEvent: function(event = false) {
+      if (event.keyCode === 13 || event instanceof MouseEvent) {
+        this.searchInput = this.searchInput.trim();
+        this.searchAndFilterUpdate();
+      }
+    },
+    onResetClick: function() {
+      this.searchInput = '';
+      this.activeFilters = [];
+      this.page = 1;
+      this.start = 0;
+      this.$refs.filtersRef?.checkShowAllBoxes();
+      if (this.$refs.searchHistory) {
+        this.$refs.searchHistory.selectValue = 'Search history';
+      }
+      this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_action_filter`,
+        'category': `reset`,
+        'location': 'map_sidebar_cell_card_explorer',
+      });
+    },
+    searchAndFilterUpdate: function() {
+      this.page = 1;
+      this.start = 0;
+      this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
+      this.searchHistoryUpdate(this.activeFilters, this.searchInput);
+    },
+    filterUpdate: function(filters) {
+      this.activeFilters = [...filters];
+      this.page = 1;
+      this.start = 0;
+      this.applyFilters(this.activeFilters);
+      this.emitSomaLocations(this.filterOptions);
+      this.searchHistoryUpdate(this.activeFilters, this.searchInput);
+      this.loadingCards = false;
+    },
+    numberPerPageUpdate: function(value) {
+      this.numberPerPage = parseInt(value, 10) || 10;
+
+      EventBus.emit('trackEvent', {
+        'event_name': `portal_maps_cell_card_perPage`,
+        'category': value + '',
+        'location': 'map_sidebar_cell_card_explorer',
+      });
+
+      const preventPaginationTracking = this.page === 1;
+      this.pageChange(1, preventPaginationTracking);
+    },
+    pageChange: function(page, preventTracking = false) {
+      this.page = page;
+      this.start = (page - 1) * this.numberPerPage;
+      this.applyFilters(this.activeFilters);
+      this.scrollToTop();
+
+      if (!preventTracking) {
+        EventBus.emit('trackEvent', {
+          'event_name': `portal_maps_cell_card_pagination`,
+          'category': `page_${this.page}`,
+          'location': 'map_sidebar_cell_card_explorer',
+        });
+      }
+    },
+    scrollToTop: function() {
+      if (this.$refs.content) {
+        this.$refs.content.scroll({ top: 0, behavior: 'smooth' });
+      }
+    },
+    filtersLoading: function() {
+      // SearchFilters only emits loading:true and never emits false.
+      // CellCardExplorer filters synchronously, so loading is reset in filterUpdate.
+    },
+    searchHistoryUpdate: function(filters, search) {
+      if (this.$refs.searchHistory) {
+        this.$refs.searchHistory.selectValue = 'Search history';
+        // save history only if there has value
+        if (filters.length || search?.trim()) {
+          this.$refs.searchHistory.addSearchToHistory(filters, search);
+        }
+      }
+    },
+    searchHistorySearch: function(item) {
+      this.searchInput = item.search || '';
+      this.activeFilters = Array.isArray(item.filters) ? [...item.filters] : [];
+      this.page = 1;
+      this.start = 0;
+      this.applyFilters(this.activeFilters);
+
+      if (this.$refs.filtersRef) {
+        if (this.activeFilters.length) {
+          this.$refs.filtersRef.setCascader(this.activeFilters);
+        } else {
+          this.$refs.filtersRef.checkShowAllBoxes();
+        }
+      }
+
+      this.emitSomaLocations(this.filterOptions);
+    },
+    cascaderReady: function() {
+      this.cascaderIsReady = true;
+      this.syncCascaderFromActiveFilters();
+    },
+    normalizeFacetValue: function(value) {
+      return String(value || '').trim().toLowerCase();
+    },
+    getSelectedSomaLocationFilters: function() {
+      return (this.activeFilters || [])
+        .filter((filter) => {
+          return (
+            this.normalizeFacetValue(filter?.term) === 'soma location' &&
+            this.normalizeFacetValue(filter?.facet) !== 'show all'
+          );
+        })
+        .map((filter) => this.normalizeFacetValue(filter?.facet))
+        .filter(Boolean);
+    },
+    getAvailableSpeciesSet: function() {
+      const availableSpecies = new Set();
+
+      this.allCellTypes.forEach((cellType) => {
+        const species = this.normalizeFacetValue(cellType?.species);
+        if (species) {
+          availableSpecies.add(species);
+        }
+      });
+
+      return availableSpecies;
+    },
+    getValidatedActiveSpecies: function() {
+      const availableSpecies = this.getAvailableSpeciesSet();
+      const normalizedActiveSpecies = this.activeSpecies
+        .map((species) => this.normalizeActiveSpeciesFilterTerm(species))
+        .filter(Boolean);
+
+      return [...new Set(normalizedActiveSpecies)].filter((species) => {
+        return availableSpecies.has(species);
+      });
+    },
+    getCellTypesForActiveSpecies: function() {
+      const normalizedActiveSpecies = this.getValidatedActiveSpecies();
+      if (!normalizedActiveSpecies.length) {
+        return this.allCellTypes;
+      }
+
+      const activeSpeciesSet = new Set(normalizedActiveSpecies);
+      return this.allCellTypes.filter((cellType) => {
+        const normalizedCellTypeSpecies = this.normalizeActiveSpeciesFilterTerm(cellType?.species);
+        return activeSpeciesSet.has(normalizedCellTypeSpecies);
+      });
+    },
+    // To update the species from the flatmap,
+    // mainly from "human male" and "human female" to "human".
+    normalizeActiveSpeciesFilterTerm: function(value) {
+      const normalized = this.normalizeFacetValue(value);
+      if (normalized === 'human male' || normalized === 'human female') {
+        return 'human';
+      }
+      return normalized;
+    },
+    setGeneMappings: function(genes) {
+      const baseToDisplay = {};
+      const displayToBase = {};
+
+      (Array.isArray(genes) ? genes : []).forEach((gene) => {
+        const base = this.normalizeFacetValue(gene?.base);
+        const display = String(gene?.display || '').trim();
+        const normalizedDisplay = this.normalizeFacetValue(display);
+
+        if (!base) return;
+
+        if (display) {
+          baseToDisplay[base] = display;
+          displayToBase[normalizedDisplay] = base;
+          return;
+        }
+
+        baseToDisplay[base] = base;
+      });
+
+      this.geneBaseToDisplay = baseToDisplay;
+      this.geneDisplayToBase = displayToBase;
+    },
+    normalizeSearchTerms: function(query) {
+      return String(query || '')
+        .split(',')
+        .map((term) => term.trim().toLowerCase())
+        .filter(Boolean);
+    },
+    getCellTypeSearchText: function(cellType) {
+      const relatedCellLabels = (cellType.relatedCells || [])
+        .map((relatedCell) => relatedCell.label)
+        .filter(Boolean)
+        .join(' ');
+
+      return [
+        cellType.preferredLabel,
+        cellType.entity,
+        cellType.species,
+        (cellType.somaLocations || []).join(' '),
+        cellType.circuitRole,
+        cellType.creLine,
+        cellType.geneExpressionString,
+        cellType.fiberTypeString,
+        cellType.physiologyString,
+        cellType.sourceNomenclatureLabel,
+        relatedCellLabels,
+      ]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+    },
+    matchSearchQuery: function(cellType, searchTerms) {
+      if (!searchTerms.length) {
+        return true;
+      }
+
+      const searchableText = this.getCellTypeSearchText(cellType);
+      return searchTerms.some((term) => searchableText.includes(term));
+    },
+    buildFacetChildren: function(cellTypes, key) {
+      const values = new Set();
+
+      cellTypes.forEach((cellType) => {
+        const fieldValue = cellType[key];
+        if (Array.isArray(fieldValue)) {
+          fieldValue.forEach((item) => {
+            const normalized = String(item || '').trim();
+            if (normalized) values.add(normalized);
+          });
+          return;
+        }
+
+        const normalized = String(fieldValue || '').trim();
+        if (normalized) values.add(normalized);
+      });
+
+      return [...values]
+        .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
+        .map((value) => ({ label: value }));
+    },
+    buildFilterOptions: function(cellTypes) {
+      const options = [
+        {
+          key: 'species',
+          label: 'Species',
+          children: this.buildFacetChildren(cellTypes, 'species'),
+        },
+        {
+          key: 'somaLocations',
+          label: 'Soma location',
+          children: this.buildFacetChildren(cellTypes, 'somaLocations'),
+        },
+        {
+          key: 'geneBaseNames',
+          label: 'Gene',
+          children: this.buildGeneFacetChildren(cellTypes),
+        },
+        {
+          key: 'sourceNomenclatureLabel',
+          label: 'Source',
+          children: this.buildFacetChildren(cellTypes, 'sourceNomenclatureLabel'),
+        },
+        {
+          key: 'notes',
+          label: 'Notes',
+          children: [
+            { label: 'with notes' },
+            { label: 'without notes' },
+          ],
+        },
+      ];
+
+      return options.filter((option) => option.children.length > 0);
+    },
+    emitSomaLocations: function(filterOptions) {
+      const somaLocationOption = (filterOptions || []).find((option) => option.key === 'somaLocations');
+      const availableDataRaw = localStorage.getItem('available-name-curie-mapping');
+      const availableData = availableDataRaw ? JSON.parse(availableDataRaw) : {};
+      const selectedSomaLocationFilters = this.getSelectedSomaLocationFilters();
+      const shouldFilterBySelectedSomaLocations = (this.activeFilters || []).length > 0 && selectedSomaLocationFilters.length > 0;
+      const selectedSomaLocationSet = new Set(selectedSomaLocationFilters);
+      const filteredCellTypes = this.getFilteredCellTypes(this.activeFilters, this.searchInput);
+      const somaLocationCounts = filteredCellTypes.reduce((counts, cellType) => {
+        (Array.isArray(cellType?.somaLocations) ? cellType.somaLocations : []).forEach((location) => {
+          const normalizedLocation = String(location || '').trim().toLowerCase();
+          if (!normalizedLocation) return;
+          counts.set(normalizedLocation, (counts.get(normalizedLocation) || 0) + 1);
+        });
+        return counts;
+      }, new Map());
+      const somaLocations = (somaLocationOption?.children || [])
+        .map((child) => String(child?.label || '').trim())
+        .filter(Boolean)
+        .filter((label) => {
+          if (!shouldFilterBySelectedSomaLocations) {
+            return true;
+          }
+
+          return selectedSomaLocationSet.has(label.toLowerCase());
+        })
+        .map((label) => {
+          const curie = Object.keys(availableData).find(
+            (curie) => String(availableData[curie] || '').toLowerCase() === label.toLowerCase()
+          ) || '';
+
+          return {
+            label,
+            curie,
+            count: somaLocationCounts.get(label.toLowerCase()) || 0,
+          };
+        });
+
+      const uniqueSomaLocations = [...new Map(
+        somaLocations.map((item) => [item.label.toLowerCase(), item])
+      ).values()];
+
+      this.$emit('soma-locations-ready', uniqueSomaLocations);
+    },
+    buildGeneFacetChildren: function(cellTypes) {
+      const values = new Set();
+
+      cellTypes.forEach((cellType) => {
+        (cellType.geneBaseNames || []).forEach((geneBaseName) => {
+          const normalizedBase = this.normalizeFacetValue(geneBaseName);
+          if (normalizedBase) values.add(normalizedBase);
+        });
+      });
+
+      return [...values]
+        .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
+        .map((base) => ({
+          label: this.geneBaseToDisplay[base] || base,
+        }));
+    },
+    matchFieldFilter: function(cellType, filter) {
+      const filterFacet = this.normalizeFacetValue(filter.facet);
+      const filterTerm = this.normalizeFacetValue(filter.term);
+
+      if (!filterFacet || filterFacet === 'show all') {
+        return true;
+      }
+
+      if (filterTerm === 'species') {
+        return this.normalizeFacetValue(cellType.species) === filterFacet;
+      }
+
+      if (filterTerm === 'soma location') {
+        return (cellType.somaLocations || []).some((location) => {
+          return this.normalizeFacetValue(location) === filterFacet;
+        });
+      }
+
+      if (filterTerm === 'gene') {
+        const selectedGeneBase = this.geneDisplayToBase[filterFacet] || filterFacet;
+        return (cellType.geneBaseNames || []).some((geneBaseName) => {
+          return this.normalizeFacetValue(geneBaseName) === selectedGeneBase;
+        });
+      }
+
+      if (filterTerm === 'circuit role') {
+        return this.normalizeFacetValue(cellType.circuitRole) === filterFacet;
+      }
+
+      if (filterTerm === 'source') {
+        return this.normalizeFacetValue(cellType.sourceNomenclatureLabel) === filterFacet;
+      }
+
+      if (filterTerm === 'notes') {
+        const hasNotes = (cellType.alertNotes?.length > 0 || cellType.curatorNotes?.length > 0);
+        if (filterFacet === 'with notes') return hasNotes;
+        if (filterFacet === 'without notes') return !hasNotes;
+        return false;
+      }
+
+      return false;
+    },
+    getFilteredCellTypes: function(filters = this.activeFilters, searchInput = this.searchInput) {
+      const searchTerms = this.normalizeSearchTerms(searchInput);
+      const activeFilters = (filters || []).filter((filter) => {
+        return filter?.term && filter?.facet && this.normalizeFacetValue(filter.facet) !== 'show all';
+      });
+
+      const filtersByTerm = activeFilters.reduce((grouped, filter) => {
+        const termKey = this.normalizeFacetValue(filter.term);
+        if (!grouped[termKey]) {
+          grouped[termKey] = [];
+        }
+        grouped[termKey].push(filter);
+        return grouped;
+      }, {});
+
+      const filterGroups = Object.values(filtersByTerm);
+
+      return this.allCellTypes
+        .filter((cellType) => {
+          return filterGroups.every((termGroup) => {
+            return termGroup.some((filter) => this.matchFieldFilter(cellType, filter));
+          });
+        })
+        .filter((cellType) => this.matchSearchQuery(cellType, searchTerms));
+    },
+    applyFilters: function(filters) {
+      const filtered = this.getFilteredCellTypes(filters, this.searchInput);
+
+      this.totalFilteredCount = filtered.length;
+      this.cellTypes = filtered.slice(this.start, this.start + this.numberPerPage);
+
+      if (!this.cellTypes.some((cellType) => cellType.id === this.activeCardId)) {
+        this.activeCardId = null;
+      }
+
+      this.$emit('search-changed', {
+        query: this.searchInput,
+        filter: filters,
+        tabType: "cellType",
+      });
+    },
+    onRelatedCellClick: function(relatedCell) {
+      const species = relatedCell.species;
+      const label = relatedCell.label;
+
+      // Normalize species (e.g., "human male" -> "human")
+      const normalizedSpecies = this.normalizeActiveSpeciesFilterTerm(species);
+
+      // Check if this species filter already exists
+      const speciesFilterExists = this.activeFilters.some(function(filter) {
+        return this.normalizeFacetValue(filter.term) === 'species'
+          && this.normalizeFacetValue(filter.facet) === this.normalizeFacetValue(normalizedSpecies);
+      }, this);
+
+      // Add species filter if not already present
+      if (!speciesFilterExists && normalizedSpecies) {
+        this.activeFilters.push({
+          facetPropPath: 'species',
+          facet: capitalise(normalizedSpecies),
+          term: 'Species',
+          tagLabel: capitalise(normalizedSpecies),
+        });
+      }
+
+      // Clear search input to avoid text search interfering
+      this.searchInput = '';
+      this.page = 1;
+      this.start = 0;
+
+      // Apply filters and sync cascader UI
+      this.applyFilters(this.activeFilters);
+      this.syncCascaderFromActiveFilters();
+      this.emitSomaLocations(this.filterOptions);
+
+      // Find the matching cell type by preferredLabel and open its card
+      const matchingCellType = this.allCellTypes.find(function(ct) {
+        return (ct.preferredLabel || '').toLowerCase() === (label || '').toLowerCase();
+      });
+
+      if (matchingCellType) {
+        this.activeCardId = matchingCellType.id;
+      }
+
+      this.$nextTick(function() {
+        this.scrollToTop();
+      });
+    },
+    showSomaLocation: function (name) {
+      this.$emit('soma-location-hovered', name);
+    },
+    onDatasetSearch: function (query) {
+      this.$emit('dataset-search', query);
+    },
+    onConnectivitySearch: function (query) {
+      this.$emit('connectivity-search', query);
+    },
+    getSearch: function () {
+      return this.searchInput;
+    },
+    getFilters: function () {
+      const hasFilters = this.activeFilters.some((f) => f.facet.toLowerCase() !== 'show all');
+      return hasFilters ? this.activeFilters : [];
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/searchPopover.scss';
+@import '../assets/pagination.scss';
+
+.content-card {
+  height: 100%;
+  flex-flow: column;
+  display: flex;
+  border: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.content-card :deep(.el-card__header) {
+  background-color: #292b66;
+  padding: 1rem;
+}
+
+.content-card :deep(.el-card__body) {
+  background-color: #f7faff;
+  overflow-y: hidden;
+  padding: 1rem;
+}
+
+.content {
+  // width: 515px;
+  flex: 1 1 auto;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #ffffff;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  border-radius: var(--el-border-radius-base);
+  position: relative;
+  max-height: 100%;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 12px;
+  right: -12px;
+  background-color: #f5f5f5;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  background-color: #979797;
+}
+
+.el-button-link {
+  color: white !important;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  border-color: transparent !important;
+  background-color: transparent !important;
+  padding: 2px !important;
+  height: auto !important;
+
+  &:hover {
+    text-decoration-color: transparent;
+    box-shadow: none !important;
+  }
+}
+</style>
diff --git a/src/components/ConnectivityCard.vue b/src/components/ConnectivityCard.vue
index 40b4f649..9bd0cb58 100644
--- a/src/components/ConnectivityCard.vue
+++ b/src/components/ConnectivityCard.vue
@@ -28,6 +28,7 @@
 
 <script>
 import EventBus from './EventBus';
+import { capitalise as capitaliseText } from '../utils/common.js';
 
 export default {
   name: "ConnectivityCard",
@@ -78,8 +79,7 @@ export default {
   },
   methods: {
     capitalise: function (text) {
-      if (text) return text.charAt(0).toUpperCase() + text.slice(1);
-      return "";
+      return capitaliseText(text);
     },
     cardClicked: function (data) {
       if (!this.loading) {
diff --git a/src/components/ConnectivityExplorer.vue b/src/components/ConnectivityExplorer.vue
index 89fd1964..42d27358 100644
--- a/src/components/ConnectivityExplorer.vue
+++ b/src/components/ConnectivityExplorer.vue
@@ -420,7 +420,7 @@ export default {
       this.openSearch([], '');
       this.$emit('search-changed', {
         value: [],
-        tabType: 'dataset',
+        tabType: 'connectivity',
         type: 'reset-update',
       })
 
@@ -468,7 +468,7 @@ export default {
         if (notFoundItems.length) {
           this.$emit('search-changed', {
             value: notFoundItems,
-            tabType: 'dataset',
+            tabType: 'connectivity',
             type: 'reset-update',
           })
         }
diff --git a/src/components/ConnectivityInfo.vue b/src/components/ConnectivityInfo.vue
index efe2d555..dc915c8d 100644
--- a/src/components/ConnectivityInfo.vue
+++ b/src/components/ConnectivityInfo.vue
@@ -330,6 +330,7 @@ import {
   ExternalResourceCard,
 } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
+import { capitalise, formatAlertText as formatAlertTextUtil, scrollToRef } from '../utils/common.js'
 
 const titleCase = (str) => {
   return str.replace(/\w\S*/g, (t) => {
@@ -337,11 +338,6 @@ const titleCase = (str) => {
   })
 }
 
-const capitalise = function (str) {
-  if (str) return str.charAt(0).toUpperCase() + str.slice(1)
-  return ''
-}
-
 export default {
   name: 'ConnectivityInfo',
   components: {
@@ -933,49 +929,10 @@ export default {
       EventBus.emit('trackEvent', data);
     },
     showAlertMessage: function () {
-      // scroll to alert message
-      this.$nextTick(() => {
-        const alertElement = this.$refs.alertElement;
-        if (alertElement) {
-          alertElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-            inline: 'nearest',
-          });
-        }
-      });
+      scrollToRef(this, 'alertElement');
     },
     formatAlertText: function (text) {
-      if (!text) return '';
-      const escaped = text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-      const linkified = escaped.replace(
-        /(https?:\/\/[^\s"<>\[]+)/g,
-        (url) => {
-          const parts = url.match(/^(.*?)([\].,;:!?]*)$/);
-          const cleanUrl = parts ? parts[1] : url;
-          const suffix = parts ? parts[2] : '';
-          return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer">${cleanUrl}</a>${suffix}`;
-        }
-      );
-
-      const normalised = linkified
-        .replace(/\\n/g, '\n')
-        .replace(/\r\n/g, '\n')
-        .replace(/\r/g, '\n');
-
-      return normalised
-        .split('\n')
-        .map((line) => {
-          const withBoldLabel = line.replace(
-            /^\s*([A-Za-z][^:<]{0,120}:)/,
-            '<strong>$1</strong>'
-          );
-          return `<div class="alert-line">${withBoldLabel}</div>`;
-        })
-        .join('\n');
+      return formatAlertTextUtil(text, { formatLines: true });
     },
   },
   mounted: function () {
diff --git a/src/components/SearchFilters.vue b/src/components/SearchFilters.vue
index ec21d8b5..34474fde 100644
--- a/src/components/SearchFilters.vue
+++ b/src/components/SearchFilters.vue
@@ -157,10 +157,7 @@ import '@abi-software/svg-sprite/dist/style.css'
 import { AlgoliaClient } from '../algolia/algolia.js'
 import { facetPropPathMapping } from '../algolia/utils.js'
 import EventBus from './EventBus.js'
-
-const capitalise = function (txt) {
-  return txt.charAt(0).toUpperCase() + txt.slice(1)
-}
+import { capitalise } from '../utils/common.js'
 
 const convertReadableLabel = function (original) {
   const name = original.toLowerCase()
@@ -288,18 +285,22 @@ export default {
       return value;
     },
     createChildrenCascaderValue: function(children, facet, facets) {
+      const parentKey = facet.key;
+
       if (children?.length) {
         for (let i = 0; i < children.length; i++) {
           const facetItem = children[i];
           //copy the facets into
           if (children[i].facetPropPath !== 'supportingAwards.consortium.name') {
-            children[i].label = convertReadableLabel(
-              facetItem.label
-            )
+            // `sourceNomenclatureLabel` is from cell card explorer filters
+            if (parentKey === 'sourceNomenclatureLabel') {
+              children[i].label = facetItem.label;
+            } else {
+              children[i].label = convertReadableLabel(facetItem.label);
+            }
           }
-          if (facetItem.key && facet.key.includes('flatmap.connectivity.source.')) {
+          if (facetItem.key && parentKey.includes('flatmap.connectivity.source.')) {
             const childKey = facetItem.key;
-            const parentKey = facet.key;
             const key = childKey.replace(`${parentKey}.`, '');
             children[i].value = this.createCascaderItemValue([facet.label, key]);
           } else {
diff --git a/src/components/SearchHistory.vue b/src/components/SearchHistory.vue
index 5996e00c..7a29285e 100644
--- a/src/components/SearchHistory.vue
+++ b/src/components/SearchHistory.vue
@@ -147,23 +147,10 @@ import {
 } from 'element-plus'
 
 import EventBus from './EventBus.js'
+import { generateUUID } from '../utils/common.js';
 
 const MAX_SEARCH_HISTORY = 12;
 
-function generateUUID() {
-  const arr = new Uint8Array(16);
-  window.crypto.getRandomValues(arr);
-
-  arr[6] = (arr[6] & 0x0f) | 0x40;
-  arr[8] = (arr[8] & 0x3f) | 0x80;
-
-  const hex = Array.from(arr)
-    .map(byte => byte.toString(16).padStart(2, '0'))
-    .join('');
-
-  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
-}
-
 export default {
   name: 'SearchHistory',
   components: {
@@ -347,7 +334,8 @@ export default {
     getParentComponentName: function () {
       const isConnectivity = this.localStorageKey?.indexOf('connectivity') !== -1;
       const isDataset = this.localStorageKey?.indexOf('dataset') !== -1;
-      const location = isConnectivity ? 'connectivity' : isDataset ? 'dataset' : '';
+      const isCellCard = this.localStorageKey?.indexOf('cell-card') !== -1;
+      const location = isConnectivity ? 'connectivity' : isDataset ? 'dataset' : isCellCard ? 'cell_card' : '';
       return location;
     },
     search: function (item) {
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index ff630c17..6710e95d 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -65,6 +65,20 @@
                 @connectivity-item-close="onConnectivityItemClose"
               />
             </template>
+            <template v-else-if="tab.type === 'cellCardExplorer' && showCellCards">
+              <CellCardExplorer
+                :ref="'cellCardExplorerTab_' + tab.id"
+                class="sidebar-content-container"
+                v-show="tab.id === activeTabId"
+                :envVars="envVars"
+                :activeSpecies="activeSpeciesForEntries"
+                @search-changed="searchChanged(tab.id, $event)"
+                @dataset-search="openDatasetSearchFromCellCard($event)"
+                @connectivity-search="openConnectivitySearch($event.facets, $event.query)"
+                @soma-location-hovered="showSomaLocation"
+                @soma-locations-ready="onSomaLocationsReady"
+              />
+            </template>
             <template v-else>
               <DatasetExplorer
                 class="sidebar-content-container"
@@ -95,6 +109,7 @@ import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import AnnotationTool from './AnnotationTool.vue'
 import ConnectivityExplorer from './ConnectivityExplorer.vue'
+import CellCardExplorer from './CellCardExplorer.vue'
 import { removeShowAllFacets } from '../algolia/utils.js'
 
 /**
@@ -110,6 +125,7 @@ export default {
     Icon,
     AnnotationTool,
     ConnectivityExplorer,
+    CellCardExplorer,
   },
   name: 'SideBar',
   props: {
@@ -119,6 +135,7 @@ export default {
         { title: 'Dataset Explorer', id: 1, type: 'datasetExplorer', closable: false },
         { title: 'Connectivity Explorer', id: 2, type: 'connectivityExplorer', closable: false },
         { title: 'Annotation', id: 3, type: 'annotation', closable: true },
+        { title: 'Cell Card Explorer', id: 4, type: 'cellCardExplorer', closable: false },
       ],
     },
     /**
@@ -184,6 +201,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showCellCards: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {
@@ -192,12 +213,17 @@ export default {
       activeTabId: 1,
       activeAnnotationData: { tabType: "annotation" },
       activeConnectivityData: { tabType: "connectivity" },
+      activeSpeciesForEntries: [],
       state: {
         dataset: {
           search: '',
           filters: [],
         },
-        connectivity:  {
+        connectivity: {
+          search: '',
+          filters: [],
+        },
+        cellCards: {
           search: '',
           filters: [],
         },
@@ -235,6 +261,16 @@ export default {
         this.activeAnnotationData = data;
       }
     },
+    /**
+     * This event is emitted when the mouse hover on or off a soma location in cell card explorer.
+     * @param name Soma location
+     */
+    showSomaLocation: function (name) {
+      this.$emit('soma-location-hovered', name);
+    },
+    onSomaLocationsReady: function (somaLocations) {
+      this.$emit('soma-locations-ready', somaLocations);
+    },
     /**
      * This event is emitted when the show connectivity button is clicked.
      * @arg featureIds
@@ -299,6 +335,42 @@ export default {
         datasetExplorerTabRef.openSearch(facets, query);
       })
     },
+    openCellCardExplorerSearch: function (filters, query) {
+      this.drawerOpen = true
+      // Because refs are in v-for, nextTick is needed here
+      this.$nextTick(() => {
+        const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer', true);
+        if (cellCardExplorerTabRef && typeof cellCardExplorerTabRef.openSearch === 'function') {
+          cellCardExplorerTabRef.openSearch(filters, query);
+        }
+      })
+    },
+    openDatasetSearchFromCellCard: function (payload) {
+      if (!payload || typeof payload !== 'object') {
+        this.openSearch([], payload);
+        return;
+      }
+
+      const facets = [];
+      if (payload.species) {
+        facets.push({
+          facet: payload.species,
+          term: 'Species',
+          facetPropPath: 'organisms.primary.species.name',
+        });
+      }
+
+      if (payload.location) {
+        facets.push({
+          facet: payload.location,
+          term: 'Anatomical structure',
+          facetPropPath: 'anatomy.organ.category.name',
+          AND: true,
+        });
+      }
+
+      this.openSearch(facets, '');
+    },
     /**
      * Get the ref id of the tab by id and type.
      */
@@ -437,6 +509,13 @@ export default {
         this.state.connectivity.filters = connectivityExplorerTabRef.getFilters();
       }
 
+      // Update cell card explorer state if available
+      const cellCardExplorerTabRef = this.getTabRef(undefined, 'cellCardExplorer');
+      if (cellCardExplorerTabRef) {
+        this.state.cellCards.search = cellCardExplorerTabRef.getSearch();
+        this.state.cellCards.filters = cellCardExplorerTabRef.getFilters();
+      }
+
       // Update connectivity entries if available
       if (this.connectivityEntry && this.connectivityEntry.length > 0) {
         this.state.connectivityEntries = this.connectivityEntry.map((entry) => entry.id);
@@ -466,11 +545,15 @@ export default {
     setState: function (state) {
       // if state is not provided or formatted incorrectly, do nothing
       if (!state || !state.dataset || !state.connectivity) return;
-      this.state = JSON.parse(JSON.stringify(state)); // deep copy to avoid reference issues
-      const datasetFilters = state.dataset.filters;
-      const connectivityFilters = state.connectivity.filters;
-      const datasetSearch = state.dataset.search;
-      const connectivitySearch = state.connectivity.search;
+      // Create a deep copy while preserving the original state structure for future extensibility
+      const newState = JSON.parse(JSON.stringify(state));
+      this.state = { ...this.state, ...newState };
+      const datasetFilters = this.state.dataset.filters;
+      const connectivityFilters = this.state.connectivity.filters;
+      const datasetSearch = this.state.dataset.search;
+      const connectivitySearch = this.state.connectivity.search;
+      const cellCardFilters = this.state.cellCards.filters || [];
+      const cellCardSearch = this.state.cellCards.search || '';
 
       if (datasetFilters.length || datasetSearch) {
         this.openSearch(datasetFilters, datasetSearch);
@@ -480,6 +563,10 @@ export default {
         this.openConnectivitySearch(connectivityFilters, connectivitySearch);
       }
 
+      if (cellCardFilters.length || cellCardSearch) {
+        this.openCellCardExplorerSearch(cellCardFilters, cellCardSearch);
+      }
+
       if (state.activeTabId) {
         this.$nextTick(() => {
           const hasTab = this.tabEntries.find((t) => t.id === state.activeTabId);
@@ -501,7 +588,17 @@ export default {
         ...data,
       };
       this.$emit('trackEvent', taggingData);
-    }
+    },
+    /**
+     * @public
+     * Update the active species to use in filters.
+     * Used by SplitFlow component.
+     * @param activeSpecies
+     */
+    updateActiveSpeciesForEntries: function (activeSpecies) {
+      const speciesEntries = Array.isArray(activeSpecies) ? activeSpecies : [activeSpecies];
+      this.activeSpeciesForEntries = [...new Set(speciesEntries.filter(Boolean))];
+    },
   },
   computed: {
     // This should respect the information provided by the property
@@ -513,6 +610,10 @@ export default {
           tab.type === "annotation" &&
           this.annotationEntry &&
           this.annotationEntry.length > 0
+        ) ||
+        (
+          tab.type === "cellCardExplorer" &&
+          this.showCellCards
         )
       );
     },
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index ba33f984..fc7ba74a 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -4,7 +4,7 @@
       class="tab"
       v-for="tab in tabs"
       :key="tab.id"
-      :class="{ 'active-tab': tab.id == activeId }"
+      :class="{ 'active-tab': tab.id == activeId, 'closable-tab': tab.closable }"
       @click="tabClicked(tab)"
     >
       <span class="tab-title">{{ tab.title }} </span>
@@ -103,14 +103,23 @@ export default {
 .tab-title {
   text-align: center;
   font-size: 14px;
-  padding: 0 1rem;
+  padding: 0 0.75rem;
+
+  .closable-tab & {
+    padding-right: 0.25rem;
+  }
 }
 
 .tab-close-icon {
-  width: 20px !important;
-  height: 20px !important;
-  font-size: 20px !important;
-  padding-right: 4px !important;
+  width: 18px !important;
+  height: 18px !important;
+  font-size: 18px !important;
+  margin-right: 4px !important;
   color: $app-primary-color !important;
+  border-radius: 2px;
+
+  &:hover {
+    background-color: rgba($app-primary-color, 0.15) !important;
+  }
 }
 </style>
diff --git a/src/components/icons/IconOpenExternal.vue b/src/components/icons/IconOpenExternal.vue
new file mode 100644
index 00000000..d909deb8
--- /dev/null
+++ b/src/components/icons/IconOpenExternal.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <polygon
+        fill="currentColor"
+        fill-rule="nonzero"
+        transform="translate(15.500000, 8.878680) rotate(225.000000) translate(-15.500000, -8.878680)"
+        points="16.25 4.12867966 16.25 13.6286797 14.75 13.6286797 14.75 4.12867966"
+      />
+      <polygon
+        fill="currentColor"
+        fill-rule="nonzero"
+        transform="translate(17.500000, 6.918996) rotate(225.000000) translate(-17.500000, -6.918996)"
+        points="20.9294459 3.82036868 22.058311 4.80812559 17.5 10.0176239 12.941689 4.80812559 14.0705541 3.82036868 17.5 7.739"
+      />
+      <polygon
+        fill="currentColor"
+        fill-rule="nonzero"
+        points="11.6570511 7.25 11.6570511 8.75 5.75 8.75 5.75 16.25 15.25 16.25 15.25 11.2267933 16.75 11.2267933 16.75 17.75 4.25 17.75 4.25 7.25"
+      />
+    </g>
+  </svg>
+</template>
diff --git a/src/utils/common.js b/src/utils/common.js
new file mode 100644
index 00000000..4b7c8d4c
--- /dev/null
+++ b/src/utils/common.js
@@ -0,0 +1,71 @@
+export function generateUUID() {
+  const arr = new Uint8Array(16);
+  window.crypto.getRandomValues(arr);
+
+  arr[6] = (arr[6] & 0x0f) | 0x40;
+  arr[8] = (arr[8] & 0x3f) | 0x80;
+
+  const hex = Array.from(arr)
+    .map(byte => byte.toString(16).padStart(2, '0'))
+    .join('');
+
+  return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+
+export function capitalise(text) {
+  if (!text) return '';
+  const value = String(text);
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+export function formatAlertText(text, { formatLines = false } = {}) {
+  if (!text) return '';
+
+  const escaped = String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  const linkified = escaped.replace(
+    /(https?:\/\/[^\s"<>\[]+)/g,
+    (url) => {
+      const parts = url.match(/^(.*?)([\].,;:!?]*)$/);
+      const cleanUrl = parts ? parts[1] : url;
+      const suffix = parts ? parts[2] : '';
+      return `<a href="${cleanUrl}" target="_blank" rel="noopener noreferrer">${cleanUrl}</a>${suffix}`;
+    }
+  );
+
+  const normalised = linkified
+    .replace(/\\n/g, '\n')
+    .replace(/\r\n/g, '\n')
+    .replace(/\r/g, '\n');
+
+  if (!formatLines) {
+    return normalised;
+  }
+
+  return normalised
+    .split('\n')
+    .map((line) => {
+      const withBoldLabel = line.replace(
+        /^\s*([A-Za-z][^:<]{0,120}:)/,
+        '<strong>$1</strong>'
+      );
+      return `<div class="alert-line">${withBoldLabel}</div>`;
+    })
+    .join('\n');
+}
+
+export function scrollToRef(vm, refName) {
+  vm?.$nextTick(() => {
+    const element = vm?.$refs?.[refName];
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+        inline: 'nearest',
+      });
+    }
+  });
+}