diff --git a/src/App.vue b/src/App.vue
index 1258c40c..9d221f31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@
       <el-button @click="neuronSearch">open neuron search</el-button>
       <el-button @click="keywordSearch">keyword search</el-button>
       <el-button @click="getFacets">Get facets</el-button>
+      <el-button @click="showFlatmapImages">Show Flatmap Images</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -23,6 +24,7 @@
       :tabs="tabs"
       :activeTabId="activeId"
       :connectivityInfo="connectivityInput"
+      :flatmapImages="flatmapImages"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
@@ -37,6 +39,7 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
+import flatmapImages from './data/flatmapImages.js';
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
@@ -101,7 +104,11 @@ export default {
   data: function () {
     return {
       contextArray: [null, null],
-      tabArray: [{ title: 'Flatmap', id: 1, type: 'search'}, { title: 'Connectivity', id: 2, type: 'connectivity' }],
+      tabArray: [
+        { title: 'Flatmap', id: 1, type: 'search'},
+        { title: 'Connectivity', id: 2, type: 'connectivity' },
+        { title: 'Images', id: 3, type: 'flatmapImages' },
+      ],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -114,6 +121,7 @@ export default {
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
       connectivityInput: exampleConnectivityInput,
+      flatmapImages: flatmapImages,
       activeId: 1,
     }
   },
@@ -224,6 +232,12 @@ export default {
       let facets = await this.$refs.sideBar.getAlgoliaFacets()
       console.log('Algolia facets:', facets)
     },
+    showFlatmapImages: function () {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.setDrawerOpen(true);
+        this.$refs.sideBar.tabClicked({id: 3, type: 'flatmapImages'})
+      }
+    },
   },
   mounted: function () {
     console.log('mounted app')
diff --git a/src/components.d.ts b/src/components.d.ts
index ba5eedf9..864675c0 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -19,6 +19,8 @@ declare module 'vue' {
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconLocation: typeof import('@element-plus/icons-vue')['Location']
     ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
+    ElIconWarnTriangleFilled: typeof import('@element-plus/icons-vue')['WarnTriangleFilled']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -26,6 +28,7 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
+    FlatmapImages: typeof import('./components/FlatmapImages.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/FlatmapImages.vue b/src/components/FlatmapImages.vue
new file mode 100644
index 00000000..15584c6c
--- /dev/null
+++ b/src/components/FlatmapImages.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="flatmap-images">
+    <div v-for="(image, i) in images" :key="i" class="card">
+        <div class="card-left">
+          <a href="#" class="card-image">
+            <el-image :src="image.imgSrc" loading="lazy">
+              <template #error>
+                <div class="image-slot">Loading<span class="dot">...</span></div>
+              </template>
+            </el-image>
+          </a>
+        </div>
+        <div class="card-right">
+          <div class="card-title">{{ 'Image Title' }}</div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ElImage } from 'element-plus';
+import MissingImage from '@/../assets/missing-image.svg'
+
+const BASE64PREFIX = 'data:image/png;base64,';
+
+export default {
+  name: 'FlatmapImages',
+  components: {
+    ElImage,
+  },
+  props: {
+    images: {
+      type: Object,
+      default: () => null,
+    }
+  },
+  mounted: function() {
+    this.images.forEach(async (image) => {
+      return this.mapImage(image);
+    });
+  },
+  watch: {
+    images: function (data) {
+      this.images = data.map((image) => {
+        return this.mapImage(image)
+      });
+    },
+  },
+  methods: {
+    mapImage: async function (image) {
+      const imgSrc = await this.transformedImage(image.thumbnail);
+      if (imgSrc) {
+        image.imgSrc = imgSrc;
+      } else {
+        image.imgSrc = MissingImage;
+      }
+    },
+    transformedImage: async function(imgUrl) {
+      try {
+        const response = await fetch(imgUrl);
+        if (!response.ok) {
+          return null;
+        }
+        const data = await response.text();
+        return BASE64PREFIX + data;
+      } catch (error) {
+        return null;
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.flatmap-images {
+  height: 100%;
+  overflow-y: auto;
+  padding: 1rem;
+  background-color: #f7faff;
+
+  .card {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    + .card {
+      margin-top: 1rem;
+    }
+  }
+
+  .card-left {
+
+  }
+
+  .card-right {
+
+  }
+
+  .card-image {
+    display: block;
+    text-decoration: none;
+    outline: none;
+
+    .el-image {
+      display: block;
+      width: 200px;
+      height: 150px;
+
+      :deep(img) {
+        aspect-ratio: 4/3;
+        object-fit: cover;
+      }
+    }
+
+    .image-slot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      background: var(--el-fill-color-light);
+      color: var(--el-text-color-secondary);
+      font-size: 14px;
+    }
+
+    .dot {
+      animation: dot 2s infinite steps(3, start);
+      overflow: hidden;
+    }
+  }
+
+  .card-title {
+    font-family: Asap;
+    font-size: 14px;
+    font-weight: bold;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: 1.5;
+    letter-spacing: 1.05px;
+    color: #484848;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index ed69cd05..87bae956 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -22,7 +22,7 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && connectivityInfo"
+            v-if="tabs.length > 1 && (connectivityInfo || flatmapImages)"
             :tabTitles="tabs"
             :activeId="activeTabId"
             @titleClicked="tabClicked"
@@ -39,6 +39,13 @@
                 @show-connectivity="showConnectivity"
               />
             </template>
+            <!-- Flatmap Images -->
+            <template v-else-if="tab.type === 'flatmapImages'">
+              <FlatmapImages
+                :images="flatmapImages"
+                v-show="tab.id === activeTabId"
+              />
+            </template>
             <template v-else>
             <SidebarContent
               class="sidebar-content-container"
@@ -68,6 +75,7 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
+import FlatmapImages from './FlatmapImages.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -81,6 +89,7 @@ export default {
     Drawer,
     Icon,
     ConnectivityInfo,
+    FlatmapImages,
   },
   name: 'SideBar',
   props: {
@@ -108,7 +117,8 @@ export default {
       type: Array,
       default: () => [
         { id: 1, title: 'Search', type: 'search' },
-        { id: 2, title: 'Connectivity', type: 'connectivity' }
+        { id: 2, title: 'Connectivity', type: 'connectivity' },
+        { id: 3, title: 'Images', type: 'flatmapImages' },
       ],
     },
     /**
@@ -132,6 +142,13 @@ export default {
       type: Object,
       default: null,
     },
+    /**
+     * Flatmap images
+     */
+    flatmapImages: {
+      type: Object,
+      default: () => [],
+    }
   },
   data: function () {
     return {
@@ -262,6 +279,9 @@ export default {
     tabClose: function (id) {
       this.$emit('connectivity-info-close');
     },
+    setFlatmapImages: function (images) {
+      this.flatmapImages.push([...images]);
+    },
   },
   created: function () {
     this.drawerOpen = this.openAtStart
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 676a1921..7fa4972c 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id === 2"
+        v-if="title.type === 'connectivity' || title.type === 'flatmapImages'"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"
@@ -118,6 +118,14 @@ $tab-height: 30px;
   box-shadow: none !important;
   outline: none !important;
   background-color: transparent !important;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.25s ease;
+
+  .title:hover & {
+    visibility: visible;
+    opacity: 1;
+  }
 
   :deep(> span) {
     height: $tab-height - 2 !important; // tab height minus border
diff --git a/src/data/flatmapImages.js b/src/data/flatmapImages.js
new file mode 100644
index 00000000..182f17f9
--- /dev/null
+++ b/src/data/flatmapImages.js
@@ -0,0 +1,86 @@
+export default [
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7543",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7544",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7542",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7545",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7546",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7527",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7526",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7528",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7529",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7533",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7534",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7536",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7535",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7537",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7530",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7531",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7532",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7538",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7540",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7539",
+    "datasetId": "226"
+  },
+  {
+    "thumbnail": "http://localhost:8000/thumbnail/7541",
+    "datasetId": "226"
+  }
+]
\ No newline at end of file