diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2c7bc020..0a9dfd58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,307 +7,333 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [v2.4.1](https://github.com/alan-wu/map-sidebar/compare/v2.4.0...v2.4.1)
+## [v2.4.2-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.5...v2.4.2-beta.0)
 
 ### Merged
 
-- Features alert in connectivity title [`#84`](https://github.com/alan-wu/map-sidebar/pull/84)
+- Features alert in connectivity title [`#84`](https://github.com/akhuoa/map-sidebar/pull/84)
+- Copy button UI fix [`#87`](https://github.com/akhuoa/map-sidebar/pull/87)
+- Feature/copy to clipboard [`#86`](https://github.com/akhuoa/map-sidebar/pull/86)
 
 ### Commits
 
-- Update alert placement in connectivity info [`1bdd362`](https://github.com/alan-wu/map-sidebar/commit/1bdd36279a237b3fbdb4ec69353c6fc0cef897bf)
-- Alert beside connectivity title [`51a8e25`](https://github.com/alan-wu/map-sidebar/commit/51a8e25131b233aeb0f862fa7294cc0b3dad69c9)
-- Fix missing features alert [`0c88e2a`](https://github.com/alan-wu/map-sidebar/commit/0c88e2a2395f7775e6e2c47962a65dd7e892d935)
+- Show image thumbnails with species filter [`51a29aa`](https://github.com/akhuoa/map-sidebar/commit/51a29aa3f6e10c4f85ea7ea7022d08c0b5e81e71)
+- Update changelog [`fafe35b`](https://github.com/akhuoa/map-sidebar/commit/fafe35b1a804dc323b1e194f0f80bbdba1418ce3)
+- Remove unused file [`3ac4188`](https://github.com/akhuoa/map-sidebar/commit/3ac4188e822e390355a83fccbae3bc6a8af38c2f)
 
-## [v2.4.0](https://github.com/alan-wu/map-sidebar/compare/v2.3.1...v2.4.0) - 2024-08-15
+## [v2.3.2-beta.5](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.4...v2.3.2-beta.5) - 2024-08-13
 
-### Merged
+### Commits
 
-- Copy button UI fix [`#87`](https://github.com/alan-wu/map-sidebar/pull/87)
-- Feature/copy to clipboard [`#86`](https://github.com/alan-wu/map-sidebar/pull/86)
-- Replace global variable with markRaw [`#82`](https://github.com/alan-wu/map-sidebar/pull/82)
+- Update changelog [`2071470`](https://github.com/akhuoa/map-sidebar/commit/20714701b210a42cb89a2873df964e60e1e3dbd4)
+- Update map utilities for copy-to-clipboard [`d869656`](https://github.com/akhuoa/map-sidebar/commit/d8696566530482b0b681ab2c4f2c8b2f1de3b8bf)
+
+## [v2.3.2-beta.4](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.3...v2.3.2-beta.4) - 2024-08-12
 
 ### Commits
 
-- Update changelog [`fafe35b`](https://github.com/alan-wu/map-sidebar/commit/fafe35b1a804dc323b1e194f0f80bbdba1418ce3)
-- Update changelog [`2071470`](https://github.com/alan-wu/map-sidebar/commit/20714701b210a42cb89a2873df964e60e1e3dbd4)
-- Update changelog [`566fd87`](https://github.com/alan-wu/map-sidebar/commit/566fd87dcf83e85f97173f2b28e857594e7bfcb1)
+- Update changelog [`566fd87`](https://github.com/akhuoa/map-sidebar/commit/566fd87dcf83e85f97173f2b28e857594e7bfcb1)
+- Refactor code for connectivity info copy to clipboard [`bf65cf5`](https://github.com/akhuoa/map-sidebar/commit/bf65cf5a33d34336f2e1a41a541d8d6fd26bba32)
+- Add uberon information in connectivity copy data [`03aa79e`](https://github.com/akhuoa/map-sidebar/commit/03aa79ed3056eabd864ad0b67e8b9f45a3d7c9e3)
 
-## [v2.3.1](https://github.com/alan-wu/map-sidebar/compare/v2.3.0...v2.3.1) - 2024-07-11
+## [v2.3.2-beta.3](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.2...v2.3.2-beta.3) - 2024-08-09
 
-### Merged
+### Commits
+
+- Update changelog [`ef39a49`](https://github.com/akhuoa/map-sidebar/commit/ef39a49fb083988c87ac454ca9f11170e8d874a9)
+- Update connectivity info copy-to-clipboard button placement [`ac32abd`](https://github.com/akhuoa/map-sidebar/commit/ac32abd8894a7de5921d116b70682d61bc3f4014)
+
+## [v2.3.2-beta.2](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.1...v2.3.2-beta.2) - 2024-08-07
 
-- Fix connectivity tab close button style [`#78`](https://github.com/alan-wu/map-sidebar/pull/78)
+### Commits
+
+- Update changelog [`e057338`](https://github.com/akhuoa/map-sidebar/commit/e05733805ae07d4541f266dd1e71d18d749ed0f6)
+- Update copy clipboard formatting [`2f265a1`](https://github.com/akhuoa/map-sidebar/commit/2f265a134665c5ab3897fba79623ea037d277930)
+- Update formatted copy-to-clipboard content for connectivity [`3162e3c`](https://github.com/akhuoa/map-sidebar/commit/3162e3c3c794192adc8bc73fa2cbe54cd7e8b3a0)
+
+## [v2.3.2-beta.1](https://github.com/akhuoa/map-sidebar/compare/v2.3.2-beta.0...v2.3.2-beta.1) - 2024-08-05
 
 ### Commits
 
-- Update gallery. [`69cb365`](https://github.com/alan-wu/map-sidebar/commit/69cb3655782251730390c148ad7a65b16c5bfc58)
+- Update Changelog [`947446c`](https://github.com/akhuoa/map-sidebar/commit/947446c8fcbac98eb48204808f3c4a0a9a237938)
+- Update dataset card copy clipboard with dataset id and doi [`1716e8d`](https://github.com/akhuoa/map-sidebar/commit/1716e8d89e5360256f6f19baf2912c146a67b7f0)
+- Update copy to clipboard content with computed value [`72acd10`](https://github.com/akhuoa/map-sidebar/commit/72acd10b9361eb9b77f8b386694da34a08176f8a)
 
-## [v2.3.0](https://github.com/alan-wu/map-sidebar/compare/v2.2.0...v2.3.0) - 2024-07-10
+## [v2.3.2-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.2.1-beta.0...v2.3.2-beta.0) - 2024-08-02
 
 ### Merged
 
-- Display connectivity info without obstructing current map view [`#74`](https://github.com/alan-wu/map-sidebar/pull/74)
-- Create cypress testing [`#4`](https://github.com/alan-wu/map-sidebar/pull/4)
-- Connectivity explore buttons now check available facets [`#3`](https://github.com/alan-wu/map-sidebar/pull/3)
-- UI updates [`#73`](https://github.com/alan-wu/map-sidebar/pull/73)
-- Anatomy markers [`#72`](https://github.com/alan-wu/map-sidebar/pull/72)
+- Replace global variable with markRaw [`#82`](https://github.com/akhuoa/map-sidebar/pull/82)
+- Fix connectivity tab close button style [`#78`](https://github.com/akhuoa/map-sidebar/pull/78)
+- Display connectivity info without obstructing current map view [`#74`](https://github.com/akhuoa/map-sidebar/pull/74)
+- Create cypress testing [`#4`](https://github.com/akhuoa/map-sidebar/pull/4)
+- Connectivity explore buttons now check available facets [`#3`](https://github.com/akhuoa/map-sidebar/pull/3)
+- UI updates [`#73`](https://github.com/akhuoa/map-sidebar/pull/73)
+- Anatomy markers [`#72`](https://github.com/akhuoa/map-sidebar/pull/72)
+
+### Commits
+
+- Install Cypress [`d329c74`](https://github.com/akhuoa/map-sidebar/commit/d329c7481de908fe85f9bed6c229bc86854c1d19)
+- Requires more dev dependencies [`859e578`](https://github.com/akhuoa/map-sidebar/commit/859e578f498fde3e6e6c956f97738b078111380a)
+- Add testing for connectivity info [`9677c3c`](https://github.com/akhuoa/map-sidebar/commit/9677c3c1911121b2528d2cc637dc256c40b76462)
+
+## [v2.2.1-beta.0](https://github.com/akhuoa/map-sidebar/compare/v2.2.0...v2.2.1-beta.0) - 2024-06-26
 
 ### Commits
 
-- Install Cypress [`d329c74`](https://github.com/alan-wu/map-sidebar/commit/d329c7481de908fe85f9bed6c229bc86854c1d19)
-- Add provenance info in sidebar [`f65b2fe`](https://github.com/alan-wu/map-sidebar/commit/f65b2fecbadd4afb92a1212cafc545228bd14d31)
-- Requires more dev dependencies [`859e578`](https://github.com/alan-wu/map-sidebar/commit/859e578f498fde3e6e6c956f97738b078111380a)
+- Add provenance info in sidebar [`f65b2fe`](https://github.com/akhuoa/map-sidebar/commit/f65b2fecbadd4afb92a1212cafc545228bd14d31)
+- Move connectivity info tab to top with close button [`d77e018`](https://github.com/akhuoa/map-sidebar/commit/d77e0185283dae36ca851fe48117365b45bde174)
+- Move pubmed button of provenance info into title area [`a3f4ab2`](https://github.com/akhuoa/map-sidebar/commit/a3f4ab2ba9cf74d8fe644c5417f9ea867a17bd55)
 
-## [v2.2.0](https://github.com/alan-wu/map-sidebar/compare/v2.1.0...v2.2.0) - 2024-05-17
+## [v2.2.0](https://github.com/akhuoa/map-sidebar/compare/v2.1.0...v2.2.0) - 2024-05-17
 
 ### Merged
 
-- Hover dataset callback [`#71`](https://github.com/alan-wu/map-sidebar/pull/71)
+- Hover dataset callback [`#71`](https://github.com/akhuoa/map-sidebar/pull/71)
 
 ### Commits
 
-- add hover-changed callback to return anatomy [`d8e94bf`](https://github.com/alan-wu/map-sidebar/commit/d8e94bffa9d3a64c60b0aa46ff3a8e3ae53fe407)
-- add comment [`4921885`](https://github.com/alan-wu/map-sidebar/commit/49218855f4af815af068f9bab976231cd2ca31b1)
+- add hover-changed callback to return anatomy [`d8e94bf`](https://github.com/akhuoa/map-sidebar/commit/d8e94bffa9d3a64c60b0aa46ff3a8e3ae53fe407)
+- add comment [`4921885`](https://github.com/akhuoa/map-sidebar/commit/49218855f4af815af068f9bab976231cd2ca31b1)
 
-## [v2.1.0](https://github.com/alan-wu/map-sidebar/compare/v2.0.1...v2.1.0) - 2024-05-10
+## [v2.1.0](https://github.com/akhuoa/map-sidebar/compare/v2.0.1...v2.1.0) - 2024-05-10
 
 ### Merged
 
-- Add dataset click event [`#70`](https://github.com/alan-wu/map-sidebar/pull/70)
+- Add dataset click event [`#70`](https://github.com/akhuoa/map-sidebar/pull/70)
 
 ### Commits
 
-- Rename dataset click to datalink click [`b7b4411`](https://github.com/alan-wu/map-sidebar/commit/b7b44113adc33e163722a9f7f8235a7168f1757d)
-- Update gallery version for PR #70 [`54a6c69`](https://github.com/alan-wu/map-sidebar/commit/54a6c694c6d5a7cf3edc9b8e3994ab6e211c6d9d)
-- Add dataset click event from gallery [`6cbde23`](https://github.com/alan-wu/map-sidebar/commit/6cbde233626ac689121cebbde402e09315de28b0)
+- Rename dataset click to datalink click [`b7b4411`](https://github.com/akhuoa/map-sidebar/commit/b7b44113adc33e163722a9f7f8235a7168f1757d)
+- Update gallery version for PR #70 [`54a6c69`](https://github.com/akhuoa/map-sidebar/commit/54a6c694c6d5a7cf3edc9b8e3994ab6e211c6d9d)
+- Add dataset click event from gallery [`6cbde23`](https://github.com/akhuoa/map-sidebar/commit/6cbde233626ac689121cebbde402e09315de28b0)
 
-## [v2.0.1](https://github.com/alan-wu/map-sidebar/compare/v2.0.0...v2.0.1) - 2024-04-29
+## [v2.0.1](https://github.com/akhuoa/map-sidebar/compare/v2.0.0...v2.0.1) - 2024-04-29
 
 ### Commits
 
-- Fix an issue with addFilter method. [`854611c`](https://github.com/alan-wu/map-sidebar/commit/854611c9c2b369f57c5afaefffc4acbc0ba2022d)
+- Fix an issue with addFilter method. [`854611c`](https://github.com/akhuoa/map-sidebar/commit/854611c9c2b369f57c5afaefffc4acbc0ba2022d)
 
-## [v2.0.0](https://github.com/alan-wu/map-sidebar/compare/v1.6.0...v2.0.0) - 2024-04-22
+## [v2.0.0](https://github.com/akhuoa/map-sidebar/compare/v1.6.0...v2.0.0) - 2024-04-22
 
 ### Merged
 
-- Filter tags UI updates for space [`#69`](https://github.com/alan-wu/map-sidebar/pull/69)
-- API Documentation [`#68`](https://github.com/alan-wu/map-sidebar/pull/68)
-- Vue3 migration [`#67`](https://github.com/alan-wu/map-sidebar/pull/67)
+- Filter tags UI updates for space [`#69`](https://github.com/akhuoa/map-sidebar/pull/69)
+- API Documentation [`#68`](https://github.com/akhuoa/map-sidebar/pull/68)
+- Vue3 migration [`#67`](https://github.com/akhuoa/map-sidebar/pull/67)
 
 ### Commits
 
-- vue cli to vite [`13f0925`](https://github.com/alan-wu/map-sidebar/commit/13f092578d163420c7e79cc4ca87d527dd80d288)
-- vue2 to vue3 [`b5b9acd`](https://github.com/alan-wu/map-sidebar/commit/b5b9acdb64e241641bb2435dfba3b24c5f048e68)
-- Minor tweaks on the styles. [`39b47a8`](https://github.com/alan-wu/map-sidebar/commit/39b47a89d56173dd2839934fcdc78e559dcacdea)
+- vue cli to vite [`13f0925`](https://github.com/akhuoa/map-sidebar/commit/13f092578d163420c7e79cc4ca87d527dd80d288)
+- vue2 to vue3 [`b5b9acd`](https://github.com/akhuoa/map-sidebar/commit/b5b9acdb64e241641bb2435dfba3b24c5f048e68)
+- Minor tweaks on the styles. [`39b47a8`](https://github.com/akhuoa/map-sidebar/commit/39b47a89d56173dd2839934fcdc78e559dcacdea)
 
-## [v1.6.0](https://github.com/alan-wu/map-sidebar/compare/v1.5.4...v1.6.0) - 2024-01-05
+## [v1.6.0](https://github.com/akhuoa/map-sidebar/compare/v1.5.4...v1.6.0) - 2024-01-05
 
 ### Commits
 
-- Switch to using s3 uri to get the prefix before filepath. [`9fef3b6`](https://github.com/alan-wu/map-sidebar/commit/9fef3b6e73ce5410e35ef53b4e719cec2e477cc0)
+- Switch to using s3 uri to get the prefix before filepath. [`9fef3b6`](https://github.com/akhuoa/map-sidebar/commit/9fef3b6e73ce5410e35ef53b4e719cec2e477cc0)
 
-## [v1.5.4](https://github.com/alan-wu/map-sidebar/compare/v1.5.0...v1.5.4) - 2024-01-05
+## [v1.5.4](https://github.com/akhuoa/map-sidebar/compare/v1.5.0...v1.5.4) - 2024-01-05
 
 ### Merged
 
-- Create the third level of facets and hook it up with algolia: [`#64`](https://github.com/alan-wu/map-sidebar/pull/64)
-- Trim whitespace and set max-width on search pop-up [`#66`](https://github.com/alan-wu/map-sidebar/pull/66)
-- Add in basic but functional search history [`#62`](https://github.com/alan-wu/map-sidebar/pull/62)
-- Drawer control [`#61`](https://github.com/alan-wu/map-sidebar/pull/61)
+- Create the third level of facets and hook it up with algolia: [`#64`](https://github.com/akhuoa/map-sidebar/pull/64)
+- Trim whitespace and set max-width on search pop-up [`#66`](https://github.com/akhuoa/map-sidebar/pull/66)
+- Add in basic but functional search history [`#62`](https://github.com/akhuoa/map-sidebar/pull/62)
+- Drawer control [`#61`](https://github.com/akhuoa/map-sidebar/pull/61)
 
 ### Commits
 
-- Create the third level of facets and hook it up with alolia: [`a0e1d7b`](https://github.com/alan-wu/map-sidebar/commit/a0e1d7b383843b6e0947685ca089ea30d0f0abeb)
-- Added a function to find facets given without full hierchy [`4c3b4ff`](https://github.com/alan-wu/map-sidebar/commit/4c3b4ffc978f1f56a07e614bd1914dda8ffcdd22)
-- Add selector for search history [`a633920`](https://github.com/alan-wu/map-sidebar/commit/a633920312b7e9a51be81ec8e45a29b203e52636)
+- Create the third level of facets and hook it up with alolia: [`a0e1d7b`](https://github.com/akhuoa/map-sidebar/commit/a0e1d7b383843b6e0947685ca089ea30d0f0abeb)
+- Added a function to find facets given without full hierchy [`4c3b4ff`](https://github.com/akhuoa/map-sidebar/commit/4c3b4ffc978f1f56a07e614bd1914dda8ffcdd22)
+- Add selector for search history [`a633920`](https://github.com/akhuoa/map-sidebar/commit/a633920312b7e9a51be81ec8e45a29b203e52636)
 
-## [v1.5.0](https://github.com/alan-wu/map-sidebar/compare/v1.4.0...v1.5.0) - 2023-09-14
+## [v1.5.0](https://github.com/akhuoa/map-sidebar/compare/v1.4.0...v1.5.0) - 2023-09-14
 
 ### Merged
 
-- Mapintegrated context cards [`#60`](https://github.com/alan-wu/map-sidebar/pull/60)
-- Add method for retrieving Algolia facets (for dynamic markers) [`#59`](https://github.com/alan-wu/map-sidebar/pull/59)
+- Mapintegrated context cards [`#60`](https://github.com/akhuoa/map-sidebar/pull/60)
+- Add method for retrieving Algolia facets (for dynamic markers) [`#59`](https://github.com/akhuoa/map-sidebar/pull/59)
 
 ### Commits
 
-- Revert changes in dependencies. [`f39600a`](https://github.com/alan-wu/map-sidebar/commit/f39600ab2068cf2f06f514a8650950a558087333)
-- Update dependencies. [`48bbd2e`](https://github.com/alan-wu/map-sidebar/commit/48bbd2e0a4f5fec0ad820ea3fef9deafb0ca5afe)
-- Merge the label and uberon emits into one object [`739fc6a`](https://github.com/alan-wu/map-sidebar/commit/739fc6ae0c9c9cce81e04c68e8a8ec8769b0f745)
+- Revert changes in dependencies. [`f39600a`](https://github.com/akhuoa/map-sidebar/commit/f39600ab2068cf2f06f514a8650950a558087333)
+- Update dependencies. [`48bbd2e`](https://github.com/akhuoa/map-sidebar/commit/48bbd2e0a4f5fec0ad820ea3fef9deafb0ca5afe)
+- Merge the label and uberon emits into one object [`739fc6a`](https://github.com/akhuoa/map-sidebar/commit/739fc6ae0c9c9cce81e04c68e8a8ec8769b0f745)
 
-## [v1.4.0](https://github.com/alan-wu/map-sidebar/compare/v1.3.38...v1.4.0) - 2023-06-12
+## [v1.4.0](https://github.com/akhuoa/map-sidebar/compare/v1.3.38...v1.4.0) - 2023-06-12
 
 ### Merged
 
-- Update vue to 2.7.14 [`#57`](https://github.com/alan-wu/map-sidebar/pull/57)
-- Fix an issue with JSON parse on plotAnnotation. [`#58`](https://github.com/alan-wu/map-sidebar/pull/58)
-- Support scss. [`#56`](https://github.com/alan-wu/map-sidebar/pull/56)
+- Update vue to 2.7.14 [`#57`](https://github.com/akhuoa/map-sidebar/pull/57)
+- Fix an issue with JSON parse on plotAnnotation. [`#58`](https://github.com/akhuoa/map-sidebar/pull/58)
+- Support scss. [`#56`](https://github.com/akhuoa/map-sidebar/pull/56)
 
 ### Commits
 
-- Add autochangelog to release command. [`c57a6a0`](https://github.com/alan-wu/map-sidebar/commit/c57a6a020c4d3582e2e784e7b808286b22cdeedc)
-- Update package. [`1b2c4b8`](https://github.com/alan-wu/map-sidebar/commit/1b2c4b848375ecf089f1a8e5ff5d8204e1243a3c)
-- Update packages. [`e1a3924`](https://github.com/alan-wu/map-sidebar/commit/e1a3924a11421c35cff3efd1fcb4bb56707bf8af)
+- Add autochangelog to release command. [`c57a6a0`](https://github.com/akhuoa/map-sidebar/commit/c57a6a020c4d3582e2e784e7b808286b22cdeedc)
+- Update package. [`1b2c4b8`](https://github.com/akhuoa/map-sidebar/commit/1b2c4b848375ecf089f1a8e5ff5d8204e1243a3c)
+- Update packages. [`e1a3924`](https://github.com/akhuoa/map-sidebar/commit/e1a3924a11421c35cff3efd1fcb4bb56707bf8af)
 
-## [v1.3.38](https://github.com/alan-wu/map-sidebar/compare/v1.3.37...v1.3.38) - 2023-04-10
+## [v1.3.38](https://github.com/akhuoa/map-sidebar/compare/v1.3.37...v1.3.38) - 2023-04-10
 
 ### Commits
 
-- Replace css with scss. [`5970c81`](https://github.com/alan-wu/map-sidebar/commit/5970c818d705adf468e8bd62c6713fb886a74fa1)
-- Update to use the latest gallery which supports scss. [`1ec6529`](https://github.com/alan-wu/map-sidebar/commit/1ec652935bbd88797f1e46777e217e7a10c1788f)
+- Replace css with scss. [`5970c81`](https://github.com/akhuoa/map-sidebar/commit/5970c818d705adf468e8bd62c6713fb886a74fa1)
+- Update to use the latest gallery which supports scss. [`1ec6529`](https://github.com/akhuoa/map-sidebar/commit/1ec652935bbd88797f1e46777e217e7a10c1788f)
 
-## [v1.3.37](https://github.com/alan-wu/map-sidebar/compare/v1.3.36...v1.3.37) - 2023-04-10
+## [v1.3.37](https://github.com/akhuoa/map-sidebar/compare/v1.3.36...v1.3.37) - 2023-04-10
 
 ### Commits
 
-- Version 1.3.37 release. [`17c88e6`](https://github.com/alan-wu/map-sidebar/commit/17c88e6fbbfd9ad7bdd589290fdf84fd28f2fbf9)
+- Version 1.3.37 release. [`17c88e6`](https://github.com/akhuoa/map-sidebar/commit/17c88e6fbbfd9ad7bdd589290fdf84fd28f2fbf9)
 
-## [v1.3.36](https://github.com/alan-wu/map-sidebar/compare/v1.3.34...v1.3.36) - 2023-03-23
+## [v1.3.36](https://github.com/akhuoa/map-sidebar/compare/v1.3.34...v1.3.36) - 2023-03-23
 
 ### Merged
 
-- Support S3 bucket for all related resources [`#55`](https://github.com/alan-wu/map-sidebar/pull/55)
-- Sidebar feedback sprint 27 [`#54`](https://github.com/alan-wu/map-sidebar/pull/54)
-- Refactoring [`#53`](https://github.com/alan-wu/map-sidebar/pull/53)
+- Support S3 bucket for all related resources [`#55`](https://github.com/akhuoa/map-sidebar/pull/55)
+- Sidebar feedback sprint 27 [`#54`](https://github.com/akhuoa/map-sidebar/pull/54)
+- Refactoring [`#53`](https://github.com/akhuoa/map-sidebar/pull/53)
 
 ### Commits
 
-- Add a mixin for getting s3 information. Support s3 bucket with context card. [`7c9617d`](https://github.com/alan-wu/map-sidebar/commit/7c9617deae781987eab584d8cae08fbdf5044465)
-- Switch to using algolia 'type' facet [`861ee60`](https://github.com/alan-wu/map-sidebar/commit/861ee600e43ef9f371a671a257182dd8c6473e69)
-- Add s3 bucket information [`dc139dd`](https://github.com/alan-wu/map-sidebar/commit/dc139ddb685b4c2f1a40826ce8170e9baff6ffe0)
+- Add a mixin for getting s3 information. Support s3 bucket with context card. [`7c9617d`](https://github.com/akhuoa/map-sidebar/commit/7c9617deae781987eab584d8cae08fbdf5044465)
+- Switch to using algolia 'type' facet [`861ee60`](https://github.com/akhuoa/map-sidebar/commit/861ee600e43ef9f371a671a257182dd8c6473e69)
+- Add s3 bucket information [`dc139dd`](https://github.com/akhuoa/map-sidebar/commit/dc139ddb685b4c2f1a40826ce8170e9baff6ffe0)
 
-## [v1.3.34](https://github.com/alan-wu/map-sidebar/compare/v1.3.33...v1.3.34) - 2023-02-02
+## [v1.3.34](https://github.com/akhuoa/map-sidebar/compare/v1.3.33...v1.3.34) - 2023-02-02
 
 ### Merged
 
-- Fix a bug caused by retracted datasets. [`#52`](https://github.com/alan-wu/map-sidebar/pull/52)
+- Fix a bug caused by retracted datasets. [`#52`](https://github.com/akhuoa/map-sidebar/pull/52)
 
 ### Commits
 
-- Remove unused variables and make sure search is performed correctly when the app is mounted. [`bcc1ec1`](https://github.com/alan-wu/map-sidebar/commit/bcc1ec1e89a9ff1ab012b07f2a22f48c0365ac2d)
-- increment version to 1.3.34. [`b0126a1`](https://github.com/alan-wu/map-sidebar/commit/b0126a1a30a35c0caa6ec8bc5a460f18ec273663)
-- Update .gitignore [`89cfe13`](https://github.com/alan-wu/map-sidebar/commit/89cfe1341627f151f29a227768377d37a8eec9fa)
+- Remove unused variables and make sure search is performed correctly when the app is mounted. [`bcc1ec1`](https://github.com/akhuoa/map-sidebar/commit/bcc1ec1e89a9ff1ab012b07f2a22f48c0365ac2d)
+- increment version to 1.3.34. [`b0126a1`](https://github.com/akhuoa/map-sidebar/commit/b0126a1a30a35c0caa6ec8bc5a460f18ec273663)
+- Update .gitignore [`89cfe13`](https://github.com/akhuoa/map-sidebar/commit/89cfe1341627f151f29a227768377d37a8eec9fa)
 
-## [v1.3.33](https://github.com/alan-wu/map-sidebar/compare/v1.3.18...v1.3.33) - 2022-12-15
+## [v1.3.33](https://github.com/akhuoa/map-sidebar/compare/v1.3.18...v1.3.33) - 2022-12-15
 
 ### Merged
 
-- Change Biolucida Images badge to Images and add a Dataset badge. [`#51`](https://github.com/alan-wu/map-sidebar/pull/51)
-- Tab color change [`#50`](https://github.com/alan-wu/map-sidebar/pull/50)
-- Switch to using markdown and checking for XSS [`#48`](https://github.com/alan-wu/map-sidebar/pull/48)
-- remove hardcoded root url [`#46`](https://github.com/alan-wu/map-sidebar/pull/46)
-- Context card source fix [`#45`](https://github.com/alan-wu/map-sidebar/pull/45)
-- Fix a bug causing filters are not set when the cascader is yet ready. [`#44`](https://github.com/alan-wu/map-sidebar/pull/44)
+- Change Biolucida Images badge to Images and add a Dataset badge. [`#51`](https://github.com/akhuoa/map-sidebar/pull/51)
+- Tab color change [`#50`](https://github.com/akhuoa/map-sidebar/pull/50)
+- Switch to using markdown and checking for XSS [`#48`](https://github.com/akhuoa/map-sidebar/pull/48)
+- remove hardcoded root url [`#46`](https://github.com/akhuoa/map-sidebar/pull/46)
+- Context card source fix [`#45`](https://github.com/akhuoa/map-sidebar/pull/45)
+- Fix a bug causing filters are not set when the cascader is yet ready. [`#44`](https://github.com/akhuoa/map-sidebar/pull/44)
 
 ### Commits
 
-- Switch to using js-xss for sanatization [`f2ee30e`](https://github.com/alan-wu/map-sidebar/commit/f2ee30e338bfc626c6262dde244e8fe2f0d47a6c)
-- Add sidebar data input formatting to the readme [`3006ec0`](https://github.com/alan-wu/map-sidebar/commit/3006ec020e4b11432d9d79a1acbca6db59c19ebd)
-- Create link to the datasetsDetails filePath page [`3af21cb`](https://github.com/alan-wu/map-sidebar/commit/3af21cb457b71a63048d863b2ad70f3bfe04dcf7)
+- Switch to using js-xss for sanatization [`f2ee30e`](https://github.com/akhuoa/map-sidebar/commit/f2ee30e338bfc626c6262dde244e8fe2f0d47a6c)
+- Add sidebar data input formatting to the readme [`3006ec0`](https://github.com/akhuoa/map-sidebar/commit/3006ec020e4b11432d9d79a1acbca6db59c19ebd)
+- Create link to the datasetsDetails filePath page [`3af21cb`](https://github.com/akhuoa/map-sidebar/commit/3af21cb457b71a63048d863b2ad70f3bfe04dcf7)
 
-## [v1.3.18](https://github.com/alan-wu/map-sidebar/compare/v1.3.1...v1.3.18) - 2022-07-22
+## [v1.3.18](https://github.com/akhuoa/map-sidebar/compare/v1.3.1...v1.3.18) - 2022-07-22
 
 ### Merged
 
-- Facets check [`#43`](https://github.com/alan-wu/map-sidebar/pull/43)
-- Remove unused hardcoded keywords [`#42`](https://github.com/alan-wu/map-sidebar/pull/42)
-- Fix css error, add comments [`#41`](https://github.com/alan-wu/map-sidebar/pull/41)
-- Keyword search [`#40`](https://github.com/alan-wu/map-sidebar/pull/40)
-- Keyword search typo fixes [`#39`](https://github.com/alan-wu/map-sidebar/pull/39)
-- Add keyword search [`#38`](https://github.com/alan-wu/map-sidebar/pull/38)
-- Add scrollbar for content overflow on context card [`#37`](https://github.com/alan-wu/map-sidebar/pull/37)
-- Dynamic components [`#36`](https://github.com/alan-wu/map-sidebar/pull/36)
+- Facets check [`#43`](https://github.com/akhuoa/map-sidebar/pull/43)
+- Remove unused hardcoded keywords [`#42`](https://github.com/akhuoa/map-sidebar/pull/42)
+- Fix css error, add comments [`#41`](https://github.com/akhuoa/map-sidebar/pull/41)
+- Keyword search [`#40`](https://github.com/akhuoa/map-sidebar/pull/40)
+- Keyword search typo fixes [`#39`](https://github.com/akhuoa/map-sidebar/pull/39)
+- Add keyword search [`#38`](https://github.com/akhuoa/map-sidebar/pull/38)
+- Add scrollbar for content overflow on context card [`#37`](https://github.com/akhuoa/map-sidebar/pull/37)
+- Dynamic components [`#36`](https://github.com/akhuoa/map-sidebar/pull/36)
 
 ### Commits
 
-- Remove markerLevels.js (not needed) [`bd76e9a`](https://github.com/alan-wu/map-sidebar/commit/bd76e9aabf01adc09bb1cf77ed33c7c3094a750c)
-- Add missing file [`4e98a6e`](https://github.com/alan-wu/map-sidebar/commit/4e98a6ecb62b5ded440d27c3b9213aa304b6bb2b)
-- Add anatomy to the keywords, reformat document [`0f8e867`](https://github.com/alan-wu/map-sidebar/commit/0f8e867a932d74378c07702746656cbc06eaebf5)
+- Remove markerLevels.js (not needed) [`bd76e9a`](https://github.com/akhuoa/map-sidebar/commit/bd76e9aabf01adc09bb1cf77ed33c7c3094a750c)
+- Add missing file [`4e98a6e`](https://github.com/akhuoa/map-sidebar/commit/4e98a6ecb62b5ded440d27c3b9213aa304b6bb2b)
+- Add anatomy to the keywords, reformat document [`0f8e867`](https://github.com/akhuoa/map-sidebar/commit/0f8e867a932d74378c07702746656cbc06eaebf5)
 
-## [v1.3.1](https://github.com/alan-wu/map-sidebar/compare/v1.2.0-beta.11...v1.3.1) - 2022-06-09
+## [v1.3.1](https://github.com/akhuoa/map-sidebar/compare/v1.2.0-beta.11...v1.3.1) - 2022-06-09
 
 ### Merged
 
-- Fix for context card banners [`#35`](https://github.com/alan-wu/map-sidebar/pull/35)
-- Image gallery on sidebar [`#34`](https://github.com/alan-wu/map-sidebar/pull/34)
+- Fix for context card banners [`#35`](https://github.com/akhuoa/map-sidebar/pull/35)
+- Image gallery on sidebar [`#34`](https://github.com/akhuoa/map-sidebar/pull/34)
 
 ### Commits
 
-- Increment version to 1.3.0 [`415916c`](https://github.com/alan-wu/map-sidebar/commit/415916c5ddf0257df5a9b447cf2a37050d2d2765)
-- Set maximum number of downloads in paralle. [`f0d88f4`](https://github.com/alan-wu/map-sidebar/commit/f0d88f413cfbc1aadf4a2c77e3a580efb2ae758b)
-- Update gallery. [`06241ae`](https://github.com/alan-wu/map-sidebar/commit/06241aec4646306d534c9bb3b7faa71720f82217)
+- Increment version to 1.3.0 [`415916c`](https://github.com/akhuoa/map-sidebar/commit/415916c5ddf0257df5a9b447cf2a37050d2d2765)
+- Set maximum number of downloads in paralle. [`f0d88f4`](https://github.com/akhuoa/map-sidebar/commit/f0d88f413cfbc1aadf4a2c77e3a580efb2ae758b)
+- Update gallery. [`06241ae`](https://github.com/akhuoa/map-sidebar/commit/06241aec4646306d534c9bb3b7faa71720f82217)
 
-## [v1.2.0-beta.11](https://github.com/alan-wu/map-sidebar/compare/v1.2.0-beta.10...v1.2.0-beta.11) - 2022-05-23
+## [v1.2.0-beta.11](https://github.com/akhuoa/map-sidebar/compare/v1.2.0-beta.10...v1.2.0-beta.11) - 2022-05-23
 
 ### Commits
 
-- Update to gallery 0.3.0-beta.5 [`76f64a1`](https://github.com/alan-wu/map-sidebar/commit/76f64a1737072e370e659d7219fad6988728179d)
+- Update to gallery 0.3.0-beta.5 [`76f64a1`](https://github.com/akhuoa/map-sidebar/commit/76f64a1737072e370e659d7219fad6988728179d)
 
-## [v1.2.0-beta.10](https://github.com/alan-wu/map-sidebar/compare/1.1.3-fix-0...v1.2.0-beta.10) - 2022-05-18
+## [v1.2.0-beta.10](https://github.com/akhuoa/map-sidebar/compare/1.1.3-fix-0...v1.2.0-beta.10) - 2022-05-18
 
 ### Merged
 
-- Updated the way to detect a simulation dataset [`#33`](https://github.com/alan-wu/map-sidebar/pull/33)
-- Fix package number being out of date [`#32`](https://github.com/alan-wu/map-sidebar/pull/32)
-- Now populate cards from algolia, then add scicrunch data [`#31`](https://github.com/alan-wu/map-sidebar/pull/31)
-- Contex cards via scicrunch [`#30`](https://github.com/alan-wu/map-sidebar/pull/30)
-- Add hardcoded data and ability to display samples: [`#29`](https://github.com/alan-wu/map-sidebar/pull/29)
-- Contex cards via scicrunch - finishing touches [`#28`](https://github.com/alan-wu/map-sidebar/pull/28)
-- Context cards via scicrunch [`#27`](https://github.com/alan-wu/map-sidebar/pull/27)
-- Fix facets not being passed in emit [`#26`](https://github.com/alan-wu/map-sidebar/pull/26)
-- Fix an issue the auto merge caused [`#25`](https://github.com/alan-wu/map-sidebar/pull/25)
-- Switch to using dois for finding datasets as opposed to discover ids [`#24`](https://github.com/alan-wu/map-sidebar/pull/24)
-- Use the latest version of svg which fix a problem with icons on sparc-app. [`#23`](https://github.com/alan-wu/map-sidebar/pull/23)
-- Algolia search [`#22`](https://github.com/alan-wu/map-sidebar/pull/22)
-- Fix sample size text. [`#21`](https://github.com/alan-wu/map-sidebar/pull/21)
-- Fix facet not set correctly with open search [`#20`](https://github.com/alan-wu/map-sidebar/pull/20)
+- Updated the way to detect a simulation dataset [`#33`](https://github.com/akhuoa/map-sidebar/pull/33)
+- Fix package number being out of date [`#32`](https://github.com/akhuoa/map-sidebar/pull/32)
+- Now populate cards from algolia, then add scicrunch data [`#31`](https://github.com/akhuoa/map-sidebar/pull/31)
+- Contex cards via scicrunch [`#30`](https://github.com/akhuoa/map-sidebar/pull/30)
+- Add hardcoded data and ability to display samples: [`#29`](https://github.com/akhuoa/map-sidebar/pull/29)
+- Contex cards via scicrunch - finishing touches [`#28`](https://github.com/akhuoa/map-sidebar/pull/28)
+- Context cards via scicrunch [`#27`](https://github.com/akhuoa/map-sidebar/pull/27)
+- Fix facets not being passed in emit [`#26`](https://github.com/akhuoa/map-sidebar/pull/26)
+- Fix an issue the auto merge caused [`#25`](https://github.com/akhuoa/map-sidebar/pull/25)
+- Switch to using dois for finding datasets as opposed to discover ids [`#24`](https://github.com/akhuoa/map-sidebar/pull/24)
+- Use the latest version of svg which fix a problem with icons on sparc-app. [`#23`](https://github.com/akhuoa/map-sidebar/pull/23)
+- Algolia search [`#22`](https://github.com/akhuoa/map-sidebar/pull/22)
+- Fix sample size text. [`#21`](https://github.com/akhuoa/map-sidebar/pull/21)
+- Fix facet not set correctly with open search [`#20`](https://github.com/akhuoa/map-sidebar/pull/20)
 
 ### Commits
 
-- Initial commit of gallery. [`4f9e96a`](https://github.com/alan-wu/map-sidebar/commit/4f9e96a586a3f1e760331b5c35442552eb2d75bd)
-- Add badges buttons for image gallery filtering. [`a3c2958`](https://github.com/alan-wu/map-sidebar/commit/a3c29580871ff3355ef8897b3e9b4f7b04ae6143)
-- Initial supports for image gallery. [`1a178bd`](https://github.com/alan-wu/map-sidebar/commit/1a178bd86c64b378bd8dbf25574aaa02efe97acf)
+- Initial commit of gallery. [`4f9e96a`](https://github.com/akhuoa/map-sidebar/commit/4f9e96a586a3f1e760331b5c35442552eb2d75bd)
+- Add badges buttons for image gallery filtering. [`a3c2958`](https://github.com/akhuoa/map-sidebar/commit/a3c29580871ff3355ef8897b3e9b4f7b04ae6143)
+- Initial supports for image gallery. [`1a178bd`](https://github.com/akhuoa/map-sidebar/commit/1a178bd86c64b378bd8dbf25574aaa02efe97acf)
 
-## [1.1.3-fix-0](https://github.com/alan-wu/map-sidebar/compare/1.0.12...1.1.3-fix-0) - 2022-01-28
+## [1.1.3-fix-0](https://github.com/akhuoa/map-sidebar/compare/1.0.12...1.1.3-fix-0) - 2022-01-28
 
 ### Merged
 
-- Integrated features [`#19`](https://github.com/alan-wu/map-sidebar/pull/19)
-- Add published year [`#6`](https://github.com/alan-wu/map-sidebar/pull/6)
-- Remove setinterval, use cascader callback [`#4`](https://github.com/alan-wu/map-sidebar/pull/4)
-- Make labels in sidebar cascader clickable [`#3`](https://github.com/alan-wu/map-sidebar/pull/3)
+- Integrated features [`#19`](https://github.com/akhuoa/map-sidebar/pull/19)
+- Add published year [`#6`](https://github.com/akhuoa/map-sidebar/pull/6)
+- Remove setinterval, use cascader callback [`#4`](https://github.com/akhuoa/map-sidebar/pull/4)
+- Make labels in sidebar cascader clickable [`#3`](https://github.com/akhuoa/map-sidebar/pull/3)
 
 ### Commits
 
-- Updated package-lock.json. [`6cc7a9c`](https://github.com/alan-wu/map-sidebar/commit/6cc7a9cd7092ece505585979fb807ee552597290)
-- Merged in simulation branch changes. [`dfb6245`](https://github.com/alan-wu/map-sidebar/commit/dfb6245221cb0d0d93a980703f173077975f7506)
-- Updates to package-lock.json. [`e401cfc`](https://github.com/alan-wu/map-sidebar/commit/e401cfc3718cf3db65608feb5763fc497fb396ca)
+- Updated package-lock.json. [`6cc7a9c`](https://github.com/akhuoa/map-sidebar/commit/6cc7a9cd7092ece505585979fb807ee552597290)
+- Merged in simulation branch changes. [`dfb6245`](https://github.com/akhuoa/map-sidebar/commit/dfb6245221cb0d0d93a980703f173077975f7506)
+- Updates to package-lock.json. [`e401cfc`](https://github.com/akhuoa/map-sidebar/commit/e401cfc3718cf3db65608feb5763fc497fb396ca)
 
 ## 1.0.12 - 2021-07-15
 
 ### Merged
 
-- Filters and other fixes [`#18`](https://github.com/alan-wu/map-sidebar/pull/18)
-- Emit event [`#17`](https://github.com/alan-wu/map-sidebar/pull/17)
-- Add check for organ labels [`#15`](https://github.com/alan-wu/map-sidebar/pull/15)
-- Add neuron search [`#14`](https://github.com/alan-wu/map-sidebar/pull/14)
-- Tehsurfer add neuron search [`#1`](https://github.com/alan-wu/map-sidebar/pull/1)
-- Fix label 'Genotype' being wrong [`#13`](https://github.com/alan-wu/map-sidebar/pull/13)
-- Fix a bug when there is less than 2 contributors. [`#11`](https://github.com/alan-wu/map-sidebar/pull/11)
-- Change endpoint to pennsieve. [`#10`](https://github.com/alan-wu/map-sidebar/pull/10)
-- Fix sidebar not searching on load [`#9`](https://github.com/alan-wu/map-sidebar/pull/9)
-- Give the mockup label more meaningful name. [`#8`](https://github.com/alan-wu/map-sidebar/pull/8)
-- small clean up [`#7`](https://github.com/alan-wu/map-sidebar/pull/7)
-- Fix search displaying result from previous search input. [`#5`](https://github.com/alan-wu/map-sidebar/pull/5)
-- Fix sizing with information card [`#4`](https://github.com/alan-wu/map-sidebar/pull/4)
-- Fix images and css breaking mapintegratedvuer [`#3`](https://github.com/alan-wu/map-sidebar/pull/3)
-- Merge in upstream changes. [`#1`](https://github.com/alan-wu/map-sidebar/pull/1)
-- Added tabs and context cards to sidebar [`#2`](https://github.com/alan-wu/map-sidebar/pull/2)
-- Tidy up for releases. [`#1`](https://github.com/alan-wu/map-sidebar/pull/1)
+- Filters and other fixes [`#18`](https://github.com/akhuoa/map-sidebar/pull/18)
+- Emit event [`#17`](https://github.com/akhuoa/map-sidebar/pull/17)
+- Add check for organ labels [`#15`](https://github.com/akhuoa/map-sidebar/pull/15)
+- Add neuron search [`#14`](https://github.com/akhuoa/map-sidebar/pull/14)
+- Tehsurfer add neuron search [`#1`](https://github.com/akhuoa/map-sidebar/pull/1)
+- Fix label 'Genotype' being wrong [`#13`](https://github.com/akhuoa/map-sidebar/pull/13)
+- Fix a bug when there is less than 2 contributors. [`#11`](https://github.com/akhuoa/map-sidebar/pull/11)
+- Change endpoint to pennsieve. [`#10`](https://github.com/akhuoa/map-sidebar/pull/10)
+- Fix sidebar not searching on load [`#9`](https://github.com/akhuoa/map-sidebar/pull/9)
+- Give the mockup label more meaningful name. [`#8`](https://github.com/akhuoa/map-sidebar/pull/8)
+- small clean up [`#7`](https://github.com/akhuoa/map-sidebar/pull/7)
+- Fix search displaying result from previous search input. [`#5`](https://github.com/akhuoa/map-sidebar/pull/5)
+- Fix sizing with information card [`#4`](https://github.com/akhuoa/map-sidebar/pull/4)
+- Fix images and css breaking mapintegratedvuer [`#3`](https://github.com/akhuoa/map-sidebar/pull/3)
+- Merge in upstream changes. [`#1`](https://github.com/akhuoa/map-sidebar/pull/1)
+- Added tabs and context cards to sidebar [`#2`](https://github.com/akhuoa/map-sidebar/pull/2)
+- Tidy up for releases. [`#1`](https://github.com/akhuoa/map-sidebar/pull/1)
 
 ### Commits
 
-- Create map-sidebar repo [`ce887ae`](https://github.com/alan-wu/map-sidebar/commit/ce887aec6cef1cc7ee4786117624c8f143ee4411)
-- Change version to 1.0.0. [`a431eed`](https://github.com/alan-wu/map-sidebar/commit/a431eede106aa604be063ab3c71c8382d5b04757)
-- Clean up and small improvements. [`98d19cd`](https://github.com/alan-wu/map-sidebar/commit/98d19cdb59476b0d7ceb3e725ef14d18b61e67ca)
+- Create map-sidebar repo [`ce887ae`](https://github.com/akhuoa/map-sidebar/commit/ce887aec6cef1cc7ee4786117624c8f143ee4411)
+- Change version to 1.0.0. [`a431eed`](https://github.com/akhuoa/map-sidebar/commit/a431eede106aa604be063ab3c71c8382d5b04757)
+- Clean up and small improvements. [`98d19cd`](https://github.com/akhuoa/map-sidebar/commit/98d19cdb59476b0d7ceb3e725ef14d18b61e67ca)
diff --git a/package-lock.json b/package-lock.json
index 56643954..e78b445c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.1",
+  "version": "2.4.2-beta.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@abi-software/map-side-bar",
-      "version": "2.4.1",
+      "version": "2.4.2-beta.0",
       "dependencies": {
         "@abi-software/gallery": "^1.1.1",
         "@abi-software/map-utilities": "^1.1.0",
diff --git a/package.json b/package.json
index 8b175b3b..3eabe5a3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-side-bar",
-  "version": "2.4.1",
+  "version": "2.4.2-beta.0",
   "files": [
     "dist/*",
     "src/*",
diff --git a/src/App.vue b/src/App.vue
index 1258c40c..2f1afec6 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="showImages">Show Images</el-button>
     </div>
     <SideBar
       :envVars="envVars"
@@ -23,10 +24,13 @@
       :tabs="tabs"
       :activeTabId="activeId"
       :connectivityInfo="connectivityInput"
+      :imageThumbnails="imageThumbnails"
       @tabClicked="tabClicked"
       @search-changed="searchChanged($event)"
       @hover-changed="hoverChanged($event)"
       @actionClick="action"
+      @connectivity-info-close="onConnectivityInfoClose"
+      @image-thumbnail-close="onImageThumbnailClose"
     />
   </div>
 </template>
@@ -37,6 +41,7 @@
 import SideBar from './components/SideBar.vue'
 import EventBus from './components/EventBus.js'
 import exampleConnectivityInput from './exampleConnectivityInput.js'
+import imageThumbnails from './data/images.json';
 
 const capitalise = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 
@@ -101,7 +106,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: 'images' },
+      ],
       sideBarVisibility: true,
       envVars: {
         API_LOCATION: import.meta.env.VITE_APP_API_LOCATION,
@@ -114,6 +123,7 @@ export default {
         ROOT_URL: import.meta.env.VITE_APP_ROOT_URL,
       },
       connectivityInput: exampleConnectivityInput,
+      imageThumbnails: imageThumbnails,
       activeId: 1,
     }
   },
@@ -224,6 +234,19 @@ export default {
       let facets = await this.$refs.sideBar.getAlgoliaFacets()
       console.log('Algolia facets:', facets)
     },
+    showImages: function () {
+      if (this.$refs.sideBar) {
+        // this.tabClicked({id: 1, type: 'images'});
+        this.$refs.sideBar.searchType = 'images';
+        this.$refs.sideBar.setDrawerOpen(true);
+      }
+    },
+    onConnectivityInfoClose: function () {
+      console.log('connectivity-info-close');
+    },
+    onImageThumbnailClose: function () {
+      console.log('image-thumbnail-close');
+    },
   },
   mounted: function () {
     console.log('mounted app')
diff --git a/src/components.d.ts b/src/components.d.ts
index ba5eedf9..9a7122a3 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']
@@ -27,6 +29,8 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     ImageGallery: typeof import('./components/ImageGallery.vue')['default']
+    ImageThumbnails: typeof import('./components/ImageThumbnails.vue')['default']
+    ImageThumbnailsGallery: typeof import('./components/ImageThumbnailsGallery.vue')['default']
     SearchFilters: typeof import('./components/SearchFilters.vue')['default']
     SearchHistory: typeof import('./components/SearchHistory.vue')['default']
     SideBar: typeof import('./components/SideBar.vue')['default']
diff --git a/src/components/ImageThumbnails.vue b/src/components/ImageThumbnails.vue
new file mode 100644
index 00000000..812d8039
--- /dev/null
+++ b/src/components/ImageThumbnails.vue
@@ -0,0 +1,933 @@
+<template>
+  <div class="image-thumbnails-container">
+    <div class="el-card__header">
+      <div class="header">
+        <el-input
+          class="search-input"
+          placeholder="Search"
+          v-model="searchInput"
+          @keyup="searchEvent"
+          clearable
+          @clear="clearSearchClicked"
+        ></el-input>
+        <el-dropdown split-button type="primary" class="button" @click="handleDropdownClick" size="large">
+          Search Images
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="switchToDataset">Search Dataset</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+
+    <div class="toolbar">
+      <div class="filters">
+        <el-cascader
+          :options="speciesFilterOptions"
+          :props="cascaderProps"
+          collapse-tags
+          collapse-tags-tooltip
+          :max-collapse-tags="1"
+          class="cascader"
+          popper-class="sidebar-cascader-popper"
+          ref="cascader"
+          v-model="cascadeSelected"
+          size="large"
+          placeholder="Filters"
+          @change="cascadeEvent($event)"
+          @expand-change="cascadeExpandChange"
+          show-all-levels
+        />
+        <!-- <el-tag
+          v-for="(species, index) in speciesFilterTags"
+          :key="index"
+          type="info"
+          class="tag"
+          :class="{ 'active-tag': species.name === activeSpecies.name }"
+          :closable="species.name === activeSpecies.name"
+          @close="removeSpeciesFilterTag"
+          @click="filterBySpecies(species)"
+        >
+          {{ species.name }} ({{ species.count }})
+        </el-tag> -->
+      </div>
+    </div>
+
+    <div class="dataset-card-container">
+      <div class="dataset-card" v-for="imageThumbnail in imageItems">
+        <div class="card" :key="imageThumbnail.link">
+          <div class="card-left">
+            <div>
+              <div
+                class="card-image"
+                @click="cardButtonClick(imageThumbnail)"
+              >
+                <el-image :src="imageThumbnail.imgSrc" loading="lazy">
+                  <template #error>
+                    <div class="image-slot">Loading...</div>
+                  </template>
+                </el-image>
+              </div>
+            </div>
+            <div>
+              <p>{{ formattedTitle(imageThumbnail) }}</p>
+              <button
+                class="button el-button el-button--large"
+                @click="cardButtonClick(imageThumbnail)"
+              >
+                View {{ imageThumbnail.type }}
+              </button>
+            </div>
+          </div>
+          <div class="card-right" v-loading="imageThumbnail.loadingData">
+            <div class="details">
+              <a
+                :href="datasetURL(imageThumbnail.id)"
+                class="title"
+                target="_blank"
+              >
+                <strong>{{ imageThumbnail.name }}</strong>
+              </a>
+            </div>
+            <div class="details">
+              {{ imageThumbnail.contributors }}
+              {{ imageThumbnail.publishYear ? `(${imageThumbnail.publishYear})` : '' }}
+            </div>
+            <div class="details">{{ imageThumbnail.samples }}</div>
+            <!-- Copy to clipboard button container -->
+            <div class="float-button-container">
+              <CopyToClipboard :content="getCopyContent(imageThumbnail)" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ElImage,
+  ElTag as Tag,
+  ElOption as Option,
+  ElSelect as Select,
+  ElCascader as Cascader,
+  ElDropdown as Dropdown,
+} from 'element-plus';
+import { ArrowDown } 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'
+
+const BASE64PREFIX = 'data:image/png;base64,';
+
+  export default {
+    name: 'ImageThumbnails',
+    components: {
+      Tag,
+      Option,
+      Select,
+      ElImage,
+      Cascader,
+      Dropdown,
+      ArrowDown,
+      CopyToClipboard,
+    },
+    props: {
+      /**
+       * The image thumbnails data to show in sidebar.
+       */
+      imageThumbnails: {
+        type: Array,
+        default: [],
+      },
+      envVars: {
+        type: Object,
+        default: () => {},
+      },
+    },
+    data: function () {
+      return {
+        searchInput: '',
+        cascaderProps: { multiple: true },
+        cascadeSelected: [],
+        activeSpecies: { name: "" },
+        speciesFilterTags: [],
+        speciesFilterOptions: [],
+        imageItems: [],
+      };
+    },
+    computed: {
+      imageStyle() {
+        return {
+          width: "180px",
+          height: "135px",
+        };
+      },
+    },
+    mounted: function () {
+      this.prepareImages();
+    },
+    watch: {
+      imageThumbnails: {
+        handler: function (value) {
+          if (value) {
+            this.prepareImages();
+          }
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      prepareImages: function() {
+        this.imageItems = this.imageThumbnails;
+        this.injectImgSrc();
+        this.populateFilterTags();
+        this.populateData();
+      },
+      injectImgSrc: function() {
+        this.imageThumbnails.forEach((imageThumbnail) => {
+          return this.mapImage(imageThumbnail);
+        });
+      },
+      formattedTitle: function(imageThumbnail) {
+        const type = imageThumbnail.mimetype?.split('/')[1];
+        const title = imageThumbnail.title;
+        let formattedTitle = '';
+        if (type !== 'jpg') {
+          formattedTitle = title.replace('.' + type, '');
+        }
+        // formattedTitle = formattedTitle.replaceAll('_', ' ');
+        return formattedTitle;
+      },
+      datasetURL: function(id) {
+        return `https://sparc.science/datasets/${id}?type=dataset`;
+      },
+      mapImage: async function (image) {
+        const imgSrc = await this.transformedImage(image.thumbnail);
+        if (imgSrc) {
+          image.imgSrc = imgSrc;
+        }
+      },
+      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;
+        }
+      },
+      removeSpeciesFilterTag: function () {
+        this.activeSpecies = { name: "" };
+        this.imageItems = this.imageThumbnails;
+      },
+      handleDropdownClick: function () {
+
+      },
+      switchToDataset: function () {
+        this.$emit('update-search-type', '');
+      },
+      searchEvent: function (event = false) {
+        // TODO: to perform search
+        // if (event.keyCode === 13 || event instanceof MouseEvent) {
+        //   this.resetPageNavigation()
+        //   this.searchAlgolia(this.filters, this.searchInput)
+        //   this.$refs.searchHistory.selectValue = 'Full search history'
+        //   this.$refs.searchHistory.addSearchToHistory(
+        //     this.filters,
+        //     this.searchInput
+        //   )
+        // }
+      },
+      clearSearchClicked: function () {
+        // TODO: to clear search
+        this.searchInput = '';
+        // this.resetPageNavigation()
+        // this.searchAlgolia(this.filters, this.searchInput)
+      },
+      cascadeEvent: function (event) {
+        // TODO: to update cascade event
+        console.log('cascadeEvent', event)
+        this.filterBySpecies();
+      },
+      cascadeExpandChange: function (event) {
+        // TODO: to update cascade event
+      },
+      filterBySpecies: function (tagInfo) {
+        let speciesValue = '';
+        if (tagInfo) {
+          this.activeSpecies = tagInfo;
+          speciesValue = tagInfo.name;
+        } else if (this.cascadeSelected.length) {
+          speciesValue = this.cascadeSelected[0][1]; // TODO: to update
+        } else if (!this.cascadeSelected.length) {
+          this.removeSpeciesFilterTag();
+        }
+        let filteredImageItems = [];
+        this.imageThumbnails.forEach((image) => {
+          if (image.species && image.species.length) {
+            image.species.forEach((species) => {
+              if (species === speciesValue) {
+                filteredImageItems.push(image);
+              }
+            });
+          }
+        });
+        this.imageItems = filteredImageItems;
+      },
+      populateData: function () {
+        const requests = [];
+        this.imageThumbnails.forEach((imageThumbnail) => {
+          const id = imageThumbnail.id;
+          const version = imageThumbnail.version;
+          const key = `${id}-${version}`;
+          imageThumbnail['loadingData'] = true;
+
+          const existingReqest = requests.find((item) => item.key === key);
+          if (existingReqest) {
+            existingReqest.api.then((response) => this.bindData(response, imageThumbnail));
+          } else {
+            const newRequest = {
+              key: key,
+              api: this.fetchData(id, version)
+            };
+            newRequest.api.then((response) => this.bindData(response, imageThumbnail));
+            requests.push(newRequest);
+          }
+        });
+      },
+      bindData: function (response, imageThumbnail) {
+        const name = response.name;
+        const contributors = response.contributors;
+        const versionPublishedAt = response.versionPublishedAt;
+        const species = imageThumbnail.species;
+        const sample = response.modelCount.find((m) => m.modelName === 'sample');
+        const subject = response.modelCount.find((m) => m.modelName === 'animal_subject');
+        const numberSamples = sample ? sample.count : 0;
+        const numberSubjects = subject ? subject.count : 0;
+        const formattedContributors = this.getContributors(contributors);
+        const publishYear = this.getPublishYear(versionPublishedAt);
+        const samples = this.getSamples(species, numberSamples, numberSubjects);
+        const s3uri = response.uri;
+
+        imageThumbnail['name'] = name;
+        imageThumbnail['contributors'] = formattedContributors;
+        imageThumbnail['publishYear'] = publishYear;
+        imageThumbnail['samples'] = samples;
+        imageThumbnail['loadingData'] = false;
+        imageThumbnail['s3uri'] = s3uri;
+      },
+      fetchData: async function (id, version) {
+        const apiLocation = this.envVars.API_LOCATION;
+        const url = apiLocation + `sim/dataset/${id}/versions/${version}`;
+        try {
+          const response = await fetch(url);
+          const json = await response.json();
+          return json;
+        } catch (error) {
+          console.log('data fetching error', error)
+        }
+      },
+      fetchBiolucidaData: async function (id) {
+        const apiLocation = this.envVars.API_LOCATION;
+        const url = apiLocation + 'image_search/' + id;
+        try {
+          const response = await fetch(url);
+          const json = await response.json();
+          return json;
+        } catch (error) {
+          console.warn('Biolucida data fetching error', error)
+        }
+      },
+      // TODO: This function is from DatasetCard
+      getContributors: function (contributors) {
+        let text = ''
+        if (contributors) {
+          if (contributors.length === 1) {
+            text = contributors[0].lastName;
+          } else if (contributors.length === 2) {
+            text =
+            contributors[0].lastName +
+              ' & ' +
+              contributors[1].lastName
+          } else if (contributors.length > 2) {
+            text = contributors[0].lastName + ' et al.'
+          }
+        }
+        return text;
+      },
+      // TODO: This function is from DatasetCard
+      getSamples: function (species, numberSamples, numberSubjects) {
+        let text = ''
+        if (species) {
+          text = `${species}`
+        }
+        if (numberSamples > 0) {
+          text += ' ('
+          if (numberSamples === 1) {
+            text += `${numberSamples} sample`
+          } else if (numberSamples > 1) {
+            text += `${numberSamples} samples`
+          }
+          if (numberSubjects === 1) {
+            text += ` from ${numberSubjects} subject`
+          } else if (numberSamples > 1) {
+            text += ` from ${numberSubjects} subjects`
+          }
+          text += ')'
+        }
+
+        return text
+      },
+      // TODO: This function is from DatasetCard
+      getPublishYear: function (publishDate) {
+        return publishDate.split('-')[0]
+      },
+      populateFilterTags: function () {
+        let imageObjects = {};
+        this.imageThumbnails.forEach((image) => {
+          if (image.species && image.species.length) {
+            image.species.forEach((species) => {
+              if (!(species in imageObjects)) {
+                imageObjects[species] = {
+                  name: species,
+                  count: 0,
+                };
+              }
+              imageObjects[species].count++;
+            });
+          }
+        });
+        this.speciesFilterTags = Object.values(imageObjects);
+        const speciesChildren = [];
+        this.speciesFilterTags.forEach((filterTag) => {
+          speciesChildren.push({
+            value: filterTag.name,
+            label: filterTag.name,
+          });
+        });
+        this.speciesFilterOptions = [
+          {
+            value: 'species',
+            label: 'Species',
+            children: speciesChildren
+          }
+        ];
+      },
+      cardButtonClick: function (imageThumbnail) {
+        const imageType = imageThumbnail.type.toLowerCase();
+
+        switch (imageType) {
+          case 'image':
+            this.emitBiolucidaData(imageThumbnail);
+            break;
+          case 'segmentation':
+            this.emitSegmentationData(imageThumbnail);
+            break;
+          case 'scaffold':
+            this.emitScaffoldData(imageThumbnail);
+            break;
+          case 'plot':
+            this.emitPlotData(imageThumbnail);
+            break;
+
+          default:
+            console.warn('Image type not founnd!', imageType)
+            break;
+        }
+      },
+      emitBiolucidaData: function (imageThumbnail) {
+        const id = imageThumbnail.id;
+        const biolucidaData = this.fetchBiolucidaData(id);
+
+        biolucidaData.then((data) => {
+          if (data.status === 'success') {
+            const biolucidaImage = data.dataset_images.find((datasetImg) =>
+              datasetImg.image_id === imageThumbnail.biolucida_id
+            );
+
+            if (biolucidaImage) {
+              // TODO: to update label and name
+              const dataToEmit = {
+                "label": imageThumbnail.name,
+                "name": imageThumbnail.name,
+                "datasetId": id,
+                "title": "View " + imageThumbnail.type,
+                "type": "Biolucida",
+                "resource": {
+                    "share_link": biolucidaImage.share_link,
+                    "id": biolucidaImage.image_id,
+                    "itemId": biolucidaImage.sourcepkg_id,
+                }
+              };
+              this.propogateCardAction(dataToEmit);
+            } else {
+              console.warn('Image not found!', data);
+            }
+          } else {
+            console.warn('Image not found!', data);
+          }
+        });
+      },
+      emitSegmentationData: function (imageThumbnail) {
+        const prefix = this.envVars.NL_LINK_PREFIX;
+        const pathQuery = imageThumbnail.link.split('?')[1];
+        const resource = {
+          share_link: `${prefix}/dataviewer?${pathQuery}`,
+        };
+        const dataToEmit = {
+          label: imageThumbnail.name,
+          resource: resource,
+          datasetId: Number(imageThumbnail.id),
+          s3uri: imageThumbnail.s3uri,
+          title: 'View segmentation',
+          type: 'Segmentation',
+        };
+        this.propogateCardAction(dataToEmit);
+      },
+      emitScaffoldData: function (imageThumbnail) {
+        const s3uri = imageThumbnail.s3uri;
+        const filePath = imageThumbnail.link.split('files/')[1];
+        const resourcePath = `${this.envVars.API_LOCATION}s3-resource/${this.getS3Prefix(s3uri)}files/${filePath}${this.getS3Args(s3uri)}`;
+        const dataToEmit = {
+          label: imageThumbnail.name,
+          resource: resourcePath,
+          title: "View 3D scaffold",
+          type: "Scaffold",
+          discoverId: Number(imageThumbnail.id),
+          apiLocation: this.envVars.API_LOCATION,
+          version: imageThumbnail.version,
+          banner: imageThumbnail.thumbnail,
+          s3uri: s3uri,
+          contextCardUrl: '', // TODO: to find context card URL
+        };
+        this.propogateCardAction(dataToEmit);
+      },
+      emitPlotData: function (imageThumbnail) {
+        const s3uri = imageThumbnail.s3uri;
+        const filePath = imageThumbnail.link.split('files/')[1];
+        const filePathPrefix = `${this.envVars.API_LOCATION}/s3-resource/${this.getS3Prefix(s3uri)}files/`;
+        const sourceUrl = filePathPrefix + filePath + this.getS3Args(s3uri);
+        let metadata = {};
+        // TODO: to find out metadata
+        // try {
+        //   metadata = JSON.parse(
+        //     plotAnnotation.supplemental_json_metadata.description
+        //   )
+        // } catch (error) {
+        //   console.warn(error)
+        // }
+        let supplementalData = [];
+        // TODO: to find out supplementalData
+        // if (plotAnnotation.isDescribedBy) {
+        //   supplementalData.push({
+        //     url: filePathPrefix + plotAnnotation.isDescribedBy.path,
+        //   })
+        // }
+        const resource = {
+          dataSource: { url: sourceUrl },
+          metadata,
+          supplementalData,
+        };
+        const dataToEmit = {
+          label: imageThumbnail.name,
+          resource: resource,
+          s3uri: s3uri,
+          title: 'View plot',
+          type: 'Plot',
+          discoverId: Number(imageThumbnail.id),
+          version: imageThumbnail.version,
+        };
+        this.propogateCardAction(dataToEmit);
+      },
+      // TODO: to combine with s3Bucket mixin
+      getS3Prefix: function (s3uri) {
+        let s3Prefix = '';
+        if (s3uri) {
+          const substring = s3uri.split("//")[1];
+          if (substring) {
+            const n = substring.indexOf('/');
+            s3Prefix = substring.substring(n + 1);
+          }
+        }
+        return s3Prefix;
+      },
+      // TODO: to combine with s3Bucket mixin
+      getS3Args: function(s3uri) {
+        const s3Bucket = this.getS3Bucket(s3uri);
+        if (s3Bucket) {
+          return `?s3BucketName=${s3Bucket}`;
+        }
+        return '';
+      },
+      // TODO: to combine with s3Bucket mixin
+      getS3Bucket: function(s3uri) {
+        let s3Bucket = '';
+        if (s3uri) {
+          const substring = s3uri.split("//")[1];
+          if (substring) {
+            s3Bucket = substring.split("/")[0];
+          }
+        }
+        return s3Bucket;
+      },
+      // TODO: This function is from DatasetCard
+      propogateCardAction: function (action) {
+        EventBus.emit('PopoverActionClick', action)
+        EventBus.emit('contextUpdate', action) // Pass to mapintegratedvuer
+      },
+      getCopyContent: function (imageThumbnail) {
+        const contentArray = [];
+
+        // Use <div> instead of <h1>..<h6> or <p>
+        // to avoid default formatting on font size and margin
+
+        // Title
+        if (imageThumbnail.name) {
+          contentArray.push(`<div><strong>${imageThumbnail.name}</strong></div>`);
+        }
+
+        // Contributors and Publish Date
+        if (imageThumbnail.contributors) {
+          let details = imageThumbnail.contributors;
+
+          if (imageThumbnail.publishYear) {
+            details += ` (${imageThumbnail.publishYear})`;
+          }
+          contentArray.push(`<div>${details}</div>`);
+        }
+
+        // samples
+        if (imageThumbnail.samples) {
+          contentArray.push(`<div>${imageThumbnail.samples}</div>`);
+        }
+
+        // Type
+        if (imageThumbnail.type) {
+          let imageType = `<div><strong>Type:</strong></div>`;
+          imageType += `\n`;
+          imageType += `${imageThumbnail.type}`;
+          contentArray.push(`<div>${imageType}</div>`);
+        }
+
+        // Species
+        if (imageThumbnail.species?.length) {
+          let species = `<div><strong>Species:</strong></div>`;
+          species += `\n`;
+          species += imageThumbnail.species.join(', ');
+          contentArray.push(`<div>${species}</div>`);
+        }
+
+        // Image URL
+        if (imageThumbnail.link) {
+          let thumbnailLink = `<div><strong>Link:</strong></div>`;
+          thumbnailLink += `\n`;
+          thumbnailLink += `<a href="${imageThumbnail.link}">${imageThumbnail.link}</a>`;
+          contentArray.push(`<div>${thumbnailLink}</div>`);
+        }
+
+        // Dataset ID
+        if (imageThumbnail.id) {
+          let datasetIdContent = `<div><strong>Dataset ID:</strong></div>`;
+          datasetIdContent += `\n`;
+          datasetIdContent += `${imageThumbnail.id}`;
+          contentArray.push(`<div>${datasetIdContent}</div>`);
+        }
+
+        // Dataset URL
+        if (imageThumbnail.id) {
+          const datasetURL = this.datasetURL(imageThumbnail.id);
+          let dataLocationContent = `<div><strong>Dataset URL:</strong></div>`;
+          dataLocationContent += `\n`;
+          dataLocationContent += `<a href="${datasetURL}">${datasetURL}</a>`;
+          contentArray.push(`<div>${dataLocationContent}</div>`);
+        }
+
+        // Dataset version
+        if (imageThumbnail.version) {
+          let versionContent = `<div><strong>Dataset version:</strong></div>`;
+          versionContent += `\n`;
+          versionContent += `${imageThumbnail.version}`;
+          contentArray.push(`<div>${versionContent}</div>`);
+        }
+
+        const copyContent = contentArray.join('\n\n<br>');
+        return copyContent;
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.image-thumbnails-container {
+  font-size: 14px;
+  text-align: left;
+  line-height: 1.5em;
+  font-family: $font-family;
+  font-weight: 400;
+  background-color: #f7faff;
+  box-shadow: var(--el-box-shadow-light);
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 30px); // minus tabs height
+  z-index: 1;
+}
+
+// TODO: to combine with sidebarConntent
+.header {
+  border: solid 1px #292b66;
+  background-color: #292b66;
+  text-align: left;
+
+  .el-button {
+    &:hover,
+    &:focus {
+      background: $app-primary-color;
+      box-shadow: -3px 2px 4px #00000040;
+      color: #fff;
+    }
+  }
+}
+// TODO: to combine with sidebarConntent
+.image-thumbnails-container .el-card__header {
+  background-color: #292b66;
+  padding: 1rem;
+}
+// TODO: to combine with sidebarConntent
+.search-input {
+  width: 298px !important;
+  height: 40px;
+  padding-right: 14px;
+  align-items: left;
+}
+// TODO: to combine with searchFilters
+.cascader {
+  font-family: $font-family;
+  font-size: 14px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #292b66;
+  text-align: center;
+  padding-bottom: 6px;
+
+  .el-cascader__tags .el-tag {
+    font-family: $font-family;
+    font-size: 12px;
+    color: #303133 !important;
+    background-color: #fff;
+    border-color: #dcdfe6 !important;
+  }
+
+  .el-input .el-input__inner::placeholder {
+    font-family: $font-family;
+    font-size: 14px;
+    font-weight: 500;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #292b66;
+  }
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  gap: 1rem;
+  background-color: #f7faff;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.filters {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 5px;
+
+  .tag {
+    cursor: pointer;
+  }
+}
+
+.dataset-card-container {
+  margin: 1rem;
+  margin-top: 0;
+  padding: 1rem;
+  flex-grow: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
+  border: solid 1px #e4e7ed;
+  background-color: #ffffff;
+  border-radius: var(--el-border-radius-base);
+}
+
+.dataset-card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.dataset-card {
+  position: relative;
+
+  + .dataset-card {
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--el-border-color);
+  }
+}
+
+.card {
+  position: relative;
+  display: flex;
+  gap: 1.5rem;
+}
+
+.card-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+
+  > div {
+    text-align: center;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1em;
+  }
+}
+
+.card-right {
+  flex: 1.3;
+  padding-left: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.card-image {
+  display: block;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+
+  .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;
+  }
+}
+
+.loading-icon {
+  z-index: 20;
+  width: 40px;
+  height: 40px;
+  left: 80px;
+}
+
+.loading-icon :deep(.el-loading-mask) {
+  background-color: rgba(117, 190, 218, 0) !important;
+}
+
+.loading-icon :deep(.el-loading-spinner .path) {
+  stroke: $app-primary-color;
+}
+
+.title {
+  font-family: $font-family;
+  font-size: 14px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  text-decoration: none;
+  color: #484848;
+}
+
+.details {
+  font-family: $font-family;
+  font-size: 14px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 1.05px;
+  color: #484848;
+}
+
+.active-tag {
+  background-color: $app-primary-color;
+  color: #fff;
+}
+
+.button {
+  margin-left: 0px !important;
+  margin-top: 0px !important;
+  font-size: 14px !important;
+  letter-spacing: initial;
+  background-color: $app-primary-color;
+  color: #fff;
+
+  & + .button {
+    margin-top: 10px !important;
+  }
+  &:hover {
+    color: #fff !important;
+    background: #ac76c5 !important;
+    border: 1px solid #ac76c5 !important;
+  }
+}
+
+.float-button-container {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  visibility: hidden;
+
+  .dataset-card:hover & {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+</style>
+
+<style lang="scss">
+.sidebar-cascader-popper .el-checkbox__input.is-indeterminate > .el-checkbox__inner {
+  background-color: $app-primary-color;
+  border-color: $app-primary-color;
+}
+</style>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index ed69cd05..77431f81 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -22,9 +22,11 @@
         </div>
         <div class="sidebar-container">
           <Tabs
-            v-if="tabs.length > 1 && connectivityInfo"
+            v-if="tabs.length > 1 && (connectivityInfo || imageThumbnails.length)"
             :tabTitles="tabs"
             :activeId="activeTabId"
+            :hasConnectivityInfo="!!connectivityInfo"
+            :hasImageThumbnails="!!imageThumbnails.length"
             @titleClicked="tabClicked"
             @tab-close="tabClose"
           />
@@ -39,8 +41,24 @@
                 @show-connectivity="showConnectivity"
               />
             </template>
+            <template v-else-if="tab.type === 'images'">
+              <ImageThumbnails
+                v-if="imageThumbnails.length"
+                v-show="tab.id === activeTabId"
+                :envVars="envVars"
+                :imageThumbnails="imageThumbnails"
+              />
+            </template>
             <template v-else>
+            <ImageThumbnails
+              v-if="imageThumbnails.length && searchType === 'images'"
+              v-show="tab.id === activeTabId"
+              :envVars="envVars"
+              :imageThumbnails="imageThumbnails"
+              @update-search-type="onUpdateSearchType"
+            />
             <SidebarContent
+              v-if="searchType !== 'images'"
               class="sidebar-content-container"
               v-show="tab.id === activeTabId"
               :contextCardEntry="tab.contextCard"
@@ -68,6 +86,7 @@ import SidebarContent from './SidebarContent.vue'
 import EventBus from './EventBus.js'
 import Tabs from './Tabs.vue'
 import ConnectivityInfo from './ConnectivityInfo.vue'
+import ImageThumbnails from './ImageThumbnails.vue'
 
 /**
  * Aims to provide a sidebar for searching capability for SPARC portal.
@@ -81,6 +100,7 @@ export default {
     Drawer,
     Icon,
     ConnectivityInfo,
+    ImageThumbnails,
   },
   name: 'SideBar',
   props: {
@@ -108,7 +128,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: 'images' }, // Temporary
       ],
     },
     /**
@@ -132,10 +153,18 @@ export default {
       type: Object,
       default: null,
     },
+    /**
+     * The image thumbnails data to show in sidebar.
+     */
+     imageThumbnails: {
+      type: Array,
+      default: [],
+    },
   },
   data: function () {
     return {
       drawerOpen: false,
+      searchType: '',
       availableAnatomyFacets: []
     }
   },
@@ -260,7 +289,15 @@ export default {
       this.$emit('tabClicked', {id, type});
     },
     tabClose: function (id) {
-      this.$emit('connectivity-info-close');
+      const closedTab = this.tabs.find((tab) => tab.id === id);
+      if (closedTab.type === 'connectivity') {
+        this.$emit('connectivity-info-close');
+      } else if (closedTab.type === 'images') {
+        this.$emit('image-thumbnail-close');
+      }
+    },
+    onUpdateSearchType: function () {
+      this.searchType = '';
     },
   },
   created: function () {
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 676a1921..0803dbeb 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -2,7 +2,7 @@
   <div class="tab-container">
     <div
       class="title"
-      v-for="title in tabTitles"
+      v-for="title in titles"
       :key="title.id"
       :class="{ 'active-tab': title.id == activeId }"
     >
@@ -16,7 +16,7 @@
         </div>
       </div>
       <el-button
-        v-if="title.id === 2"
+        v-if="title.type === 'connectivity' || title.type === 'images'"
         @click="tabClose(title.id)"
         class="button-tab-close"
         aria-label="Close"
@@ -42,6 +42,25 @@ export default {
       type: Number,
       default: 1,
     },
+    hasConnectivityInfo: {
+      type: Boolean,
+      default: true,
+    },
+    hasImageThumbnails: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    titles: function() {
+      if (!this.hasConnectivityInfo) {
+        return this.tabTitles.filter((tab) => tab.type !== 'connectivity');
+      }
+      else if (!this.hasImageThumbnails) {
+        return this.tabTitles.filter((tab) => tab.type !== 'images');
+      }
+      return this.tabTitles;
+    },
   },
   methods: {
     titleClicked: function (id, type) {
@@ -73,6 +92,7 @@ $tab-height: 30px;
   align-items: center;
   position: relative;
   cursor: pointer;
+  z-index: 2;
 }
 
 .title-text {
diff --git a/src/data/images.json b/src/data/images.json
new file mode 100644
index 00000000..78d53304
--- /dev/null
+++ b/src/data/images.json
@@ -0,0 +1,41 @@
+[
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21567",
+      "resource": "derivative/sub-Pirt-1A/sam-7/2020-01-06_11.26.19_ AAV DRG inj.- Pirt Cre 1A_DRG T2b.jpx",
+      "id": "353",
+      "title": "2020-01-06_11.26.19_ AAV DRG inj.- Pirt Cre 1A_DRG T2b.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21567",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  },
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21568",
+      "resource": "derivative/sub-Pirt-1A/sam-7/2020-01-06_11.36.02_FusionStitcher AAV DRG inj.- Pirt Cre 1A_DRG T4ab.jpx",
+      "id": "353",
+      "title": "2020-01-06_11.36.02_FusionStitcher AAV DRG inj.- Pirt Cre 1A_DRG T4ab.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21568",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  },
+  {
+      "thumbnail": "http://localhost:8000//thumbnail/21569",
+      "resource": "derivative/sub-Pirt-2A/2020-01-13_11.16.35_ssxxs_Kim_FusionStitcher vagal ganglia.jpx",
+      "id": "353",
+      "title": "2020-01-13_11.16.35_ssxxs_Kim_FusionStitcher vagal ganglia.jpx",
+      "type": "Image",
+      "link": "http://localhost:8000//thumbnail/21569",
+      "mimetype": "image/jpx",
+      "species": [
+          "Mouse"
+      ],
+      "version": "1"
+  }
+]
\ No newline at end of file