From f20b1580565988d77dc01de9efc597f7930ebc9d Mon Sep 17 00:00:00 2001
From: Fran McDade <franmcdade@Frans-MacBook-Pro.local>
Date: Tue, 13 Aug 2024 22:38:06 +1000
Subject: [PATCH] feat: update documentation link for nih tutorial button
 (#4101)

---
 .../archivePreviewTable.tsx                   |   7 +-
 explorer/app/components/index.tsx             |   4 +-
 .../anvil-cmg/common/viewModelBuilders.ts     | 226 ++++++++--------
 .../azul/anvil/common/viewModelBuilders.ts    | 123 ++++-----
 .../azul/hca-dcp/common/viewModelBuilders.ts  | 246 +++++++++---------
 .../azul/lungmap/common/viewModelBuilders.ts  |  38 +--
 .../anvil-catalog/common/viewModelBuilders.ts |  80 +++---
 .../ncpi-catalog/common/viewModelBuilders.ts  |  62 ++---
 .../app/viewModelBuilders/common/entities.ts  |   4 +-
 explorer/next.config.mjs                      |  15 +-
 explorer/package-lock.json                    |  50 ++--
 explorer/package.json                         |   4 +-
 .../site-config/anvil-catalog/dev/config.ts   | 167 +++++++-----
 .../detail/consortium/overviewSideColumn.ts   |   4 +-
 .../detail/consortium/studiesMainColumn.ts    |   4 +-
 .../dev/detail/consortium/top.ts              |   4 +-
 .../detail/consortium/workspacesMainColumn.ts |   4 +-
 .../dev/detail/study/overviewMainColumn.ts    |   6 +-
 .../dev/detail/study/overviewSideColumn.ts    |   6 +-
 .../anvil-catalog/dev/detail/study/top.ts     |   4 +-
 .../dev/detail/study/workspacesMainColumn.ts  |   4 +-
 .../dev/index/consortiaEntityConfig.ts        |  64 ++---
 .../dev/index/studiesEntityConfig.ts          |  73 +++---
 .../dev/index/workspaceEntityConfig.ts        |  64 ++---
 explorer/site-config/anvil-cmg/dev/config.ts  |  58 +++--
 .../dev/detail/dataset/overviewSideColumn.ts  |   4 +-
 .../dev/index/activitiesEntityConfig.ts       |  12 +-
 .../dev/index/biosamplesEntityConfig.ts       |  12 +-
 .../dev/index/datasetsEntityConfig.ts         |   8 +-
 .../anvil-cmg/dev/index/donorsEntityConfig.ts |  12 +-
 .../anvil-cmg/dev/index/filesEntityConfig.ts  |  12 +-
 .../dev/index/librariesEntityConfig.ts        |   8 +-
 .../anvil-cmg/dev/index/summary.ts            |  10 +-
 explorer/site-config/anvil/dev/config.ts      |  89 +++----
 .../dev/detail/dataset/overviewMainColumn.ts  |   4 +-
 .../dev/detail/dataset/overviewSideColumn.ts  |   4 +-
 .../anvil/dev/detail/dataset/top.ts           |   4 +-
 .../anvil/dev/index/activitiesEntityConfig.ts |  34 +--
 .../anvil/dev/index/biosamplesEntityConfig.ts |  40 +--
 .../anvil/dev/index/datasetsEntityConfig.ts   |  40 +--
 .../anvil/dev/index/donorsEntityConfig.ts     |  34 +--
 .../anvil/dev/index/filesEntityConfig.ts      |  34 +--
 .../anvil/dev/index/librariesEntityConfig.ts  |  28 +-
 .../site-config/anvil/dev/index/summary.ts    |  10 +-
 explorer/site-config/anvil/dev/socialMedia.ts |  41 ++-
 explorer/site-config/hca-dcp/dev/config.ts    |  48 ++--
 .../hca-dcp/dev/index/filesEntityConfig.ts    |  28 +-
 .../hca-dcp/dev/index/projectsEntityConfig.ts |  20 +-
 .../hca-dcp/dev/index/samplesEntityConfig.ts  |  24 +-
 .../site-config/hca-dcp/dev/index/summary.ts  |  10 +-
 explorer/site-config/lungmap/dev/config.ts    |  50 ++--
 .../site-config/lungmap/dev/index/summary.ts  |  10 +-
 .../site-config/lungmap/dev/socialMedia.ts    |   3 +-
 .../site-config/ncpi-catalog/dev/config.ts    |  22 +-
 .../dev/detail/study/overviewMainColumn.ts    |   6 +-
 .../dev/detail/study/overviewSideColumn.ts    |   6 +-
 .../ncpi-catalog/dev/detail/study/top.ts      |   4 +-
 .../dev/index/platformsEntityConfig.ts        |  52 ++--
 .../dev/index/studiesEntityConfig.ts          |  52 ++--
 59 files changed, 1075 insertions(+), 1021 deletions(-)

diff --git a/explorer/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/components/ArchivePreviewTable/archivePreviewTable.tsx b/explorer/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/components/ArchivePreviewTable/archivePreviewTable.tsx
index 33673a77d..2abb156a2 100644
--- a/explorer/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/components/ArchivePreviewTable/archivePreviewTable.tsx
+++ b/explorer/app/components/Detail/components/GeneratedMatricesTables/components/ArchivePreviewDialog/components/ArchivePreviewTable/archivePreviewTable.tsx
@@ -1,6 +1,6 @@
 import { GridPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
 import { Table } from "@databiosphere/findable-ui/lib/components/Detail/components/Table/table";
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 import { Dispatch, SetStateAction, useEffect } from "react";
 import {
   HCA_DCP_CATEGORY_KEY,
@@ -23,7 +23,10 @@ export interface ArchivePreviewTableProps {
  * Builds the table column definition model for the archive preview table.
  * @returns archive preview table column definition.
  */
-function getArchivePreviewTableColumns<T extends object>(): ColumnDef<T>[] {
+function getArchivePreviewTableColumns<
+  T extends RowData,
+  TData = unknown
+>(): ColumnDef<T, TData>[] {
   return [
     {
       accessorKey: HCA_DCP_CATEGORY_KEY.FILE_NAME,
diff --git a/explorer/app/components/index.tsx b/explorer/app/components/index.tsx
index 179049f7e..daa4a4855 100644
--- a/explorer/app/components/index.tsx
+++ b/explorer/app/components/index.tsx
@@ -53,9 +53,7 @@ export { ManifestDownloadEntity } from "@databiosphere/findable-ui/lib/component
 export { ManifestDownloadForm } from "@databiosphere/findable-ui/lib/components/Export/components/ManifestDownload/components/ManifestDownloadForm/manifestDownloadForm";
 export { ManifestDownload } from "@databiosphere/findable-ui/lib/components/Export/components/ManifestDownload/manifestDownload";
 export { AzulFileDownload } from "@databiosphere/findable-ui/lib/components/Index/components/AzulFileDownload/azulFileDownload";
-export { Cell } from "@databiosphere/findable-ui/lib/components/Index/components/Cell/cell";
 export { Summaries } from "@databiosphere/findable-ui/lib/components/Index/components/Hero/components/Summaries/summaries";
-export { NTagCell } from "@databiosphere/findable-ui/lib/components/Index/components/NTagCell/nTagCell";
 export {
   BackPageContentMainColumn,
   BackPageContentSideColumn,
@@ -77,6 +75,8 @@ export { Details } from "@databiosphere/findable-ui/lib/components/Project/compo
 export { Publications } from "@databiosphere/findable-ui/lib/components/Project/components/Publications/publications";
 export { SupplementaryLinks } from "@databiosphere/findable-ui/lib/components/Project/components/SupplementaryLinks/supplementaryLinks";
 export { SupportRequest } from "@databiosphere/findable-ui/lib/components/Support/components/SupportRequest/supportRequest";
+export { BasicCell } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell";
+export { NTagCell } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell";
 export { ExportMethodView } from "@databiosphere/findable-ui/lib/views/ExportMethodView/exportMethodView";
 export { Announcements } from "./common/Banner/components/Announcements/announcements";
 export { ButtonOutline } from "./common/Button/components/ButtonOutline/buttonOutline";
diff --git a/explorer/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts
index 22e3abb75..b5ba23f9a 100644
--- a/explorer/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts
+++ b/explorer/app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders.ts
@@ -105,66 +105,66 @@ import { ExportMethod } from "../../../../components/Export/components/AnVILExpl
 import { METADATA_KEY } from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
 import { FEATURE_FLAGS } from "../../../common/contants";
-import { Unused } from "../../../common/entities";
+import { Unused, Void } from "../../../common/entities";
 import { SUMMARY_DISPLAY_TEXT } from "./summaryMapper/constants";
 import { mapExportSummary } from "./summaryMapper/summaryMapper";
 
 /**
- * Build props for activity type Cell component from the given activities response.
+ * Build props for activity type BasicCell component from the given activities response.
  * @param response - Response model return from activities API.
- * @returns model to be used as props for the activity type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildActivityType = (
   response: ActivityEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getActivityType(response),
   };
 };
 
 /**
- * Build props for anatomical site Cell component from the given index/biosamples response.
+ * Build props for anatomical site BasicCell component from the given index/biosamples response.
  * @param response - Response model return from index/biosamples API.
- * @returns model to be used as props for the biosample type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildAnatomicalSite = (
   response: BioSampleEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getAnatomicalSite(response),
   };
 };
 
 /**
- * Build props for biosample id Cell component from the given index/biosamples response.
+ * Build props for biosample id BasicCell component from the given index/biosamples response.
  * @param response - Response model return from index/biosamples API.
- * @returns model to be used as props for the biosample id cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildBioSampleId = (
   response: BioSampleEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getBioSampleId(response),
   };
 };
 
 /**
- * Build props for biosample type Cell component from the given index/biosamples response.
+ * Build props for biosample type BasicCell component from the given index/biosamples response.
  * @param response - Response model return from index/biosamples API.
- * @returns model to be used as props for the biosample type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildBioSampleType = (
   response: BioSampleEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getBioSampleType(response),
   };
 };
 
 /**
- * Build biosample types Cell component from the given entity response.
+ * Build biosample types NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated biosamples.
- * @returns model to be used as props for the biosample types cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildBioSampleTypes = (
   response: AggregatedBioSampleResponse
@@ -176,13 +176,13 @@ export const buildBioSampleTypes = (
 };
 
 /**
- * Build props for consent group Cell component from the given datasets response.
+ * Build props for consent group BasicCell component from the given datasets response.
  * @param datasetsResponse - Response model return from datasets API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildConsentGroup = (
   datasetsResponse: DatasetsResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getConsentGroup(datasetsResponse),
   };
@@ -191,7 +191,7 @@ export const buildConsentGroup = (
 /**
  * Build props for data modality NTagCell component from the given activities response.
  * @param response - Response model return from index/activities API.
- * @returns model to be used as props for the data modality NTagCell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildDataModality = (
   response: ActivityEntityResponse
@@ -283,9 +283,9 @@ export const buildDatasetHero = (
 };
 
 /**
- * Build dataset ID Cell component from the given entity response.
+ * Build dataset ID NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated datasets.
- * @returns model to be used as props for the dataset ID cell.
+ * @returns model to be used as props for theNTagCell component.
  */
 export const buildDatasetIds = (
   response: AggregatedDatasetResponse
@@ -299,7 +299,7 @@ export const buildDatasetIds = (
 /**
  * Build dataset list view list hero warning.
  * Warning serves as a reminder for users to log in.
- * @returns model to be used as props for Alert component.
+ * @returns model to be used as props for FluidAlert component.
  */
 export const buildDatasetListViewListHeroWarning = (): React.ComponentProps<
   typeof C.FluidAlert
@@ -326,9 +326,9 @@ export const buildDatasetTitle = (
 };
 
 /**
- * Build dataset ID Cell component from the given entity response.
+ * Build dataset ID NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated datasets.
- * @returns model to be used as props for the dataset ID cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildDatasetTitles = (
   response: AggregatedDatasetResponse
@@ -340,9 +340,9 @@ export const buildDatasetTitles = (
 };
 
 /**
- * Build props for diagnosis type cell component from the given entity response.
+ * Build props for diagnosis type NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated diagnoses.
- * @returns model to be used as props for the diagnosis cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildDiagnoses = (
   response: AggregatedDiagnosisResponse
@@ -354,26 +354,26 @@ export const buildDiagnoses = (
 };
 
 /**
- * Build props for donor ID cell component from the given donors response.
+ * Build props for donor ID BasicCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the donor ID cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildDonorId = (
   response: DonorEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getDonorId(response),
   };
 };
 
 /**
- * Build props for document ID Cell component from the given activities response.
+ * Build props for document ID BasicCell component from the given activities response.
  * @param response - Response model return from activities API.
- * @returns model to be used as props for the activity document cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildDocumentId = (
   response: ActivityEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getDocumentId(response),
   };
@@ -394,13 +394,13 @@ export const buildDRSURI = (
 
 /**
  * Build props for ExportCurrentQuery component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportCurrentQuery component.
  */
 export const buildExportCurrentQuery = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportCurrentQuery> => {
   const {
     fileManifestState: { filters, isFacetsLoading },
@@ -419,7 +419,7 @@ export const buildExportCurrentQuery = (
  */
 export const buildExportEntityToTerra = (
   datasetsResponse: DatasetsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<DatasetsResponse>
 ): React.ComponentProps<typeof C.ExportToTerra> => {
   const { fileManifestState } = viewContext;
   // Get the initial filters.
@@ -447,8 +447,8 @@ export const buildExportEntityToTerra = (
  * @returns model to be used as props for the FluidAlert component.
  */
 export const buildExportEntityWarning = (
-  _: DatasetsResponse,
-  viewContext: ViewContext
+  _: Unused,
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.FluidAlert> => {
   const {
     authState: { isAuthenticated },
@@ -467,14 +467,14 @@ export const buildExportEntityWarning = (
 };
 
 /**
- * Build props for export Hero component.
- * @param _ - Unused.
+ * Build props for export BackPageHero component.
+ * @param _ - Void.
  * @param viewContext - View context.
- * @returns model to be used as props for the Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export function buildExportHero(
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.BackPageHero> {
   const { exploreState } = viewContext;
   const { tabValue } = exploreState || {};
@@ -488,14 +488,14 @@ export function buildExportHero(
 }
 
 /**
- * Build props for manifest download Hero component.
- * @param _ - Unused.
+ * Build props for manifest download BackPageHero component.
+ * @param _ - Void.
  * @param viewContext - View context.
- * @returns model to be used as props for the Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export const buildExportMethodHeroManifestDownload = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const title = "Request File Manifest";
   const {
@@ -505,14 +505,14 @@ export const buildExportMethodHeroManifestDownload = (
 };
 
 /**
- * Build props for export to terra Hero component.
- * @param _ - Unused.
+ * Build props for export to terra BackPageHero component.
+ * @param _ - Void.
  * @param viewContext - View context.
- * @returns model to be used as props for the Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export const buildExportMethodHeroTerra = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const title = "Export to Terra";
   const {
@@ -523,13 +523,13 @@ export const buildExportMethodHeroTerra = (
 
 /**
  * Build props for ExportMethod component for display of the manifest download section.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportMethod component.
  */
 export const buildExportMethodManifestDownload = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportMethod> => {
   return {
     ...getExportMethodAccessibility(viewContext),
@@ -543,13 +543,13 @@ export const buildExportMethodManifestDownload = (
 
 /**
  * Build props for ExportMethod component for display of the export to terra metadata section.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportMethod component.
  */
 export const buildExportMethodTerra = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof ExportMethod> => {
   return {
     ...getExportMethodAccessibility(viewContext),
@@ -563,13 +563,13 @@ export const buildExportMethodTerra = (
 
 /**
  * Build props for ExportSelectedDataSummary component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportSelectedDataSummary component.
  */
 export const buildExportSelectedDataSummary = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportSelectedDataSummary> => {
   const {
     fileManifestState: {
@@ -587,13 +587,13 @@ export const buildExportSelectedDataSummary = (
 
 /**
  * Build props for ExportToTerra component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportToTerra component.
  */
 export const buildExportToTerra = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportToTerra> => {
   const {
     exploreState: { filterState },
@@ -630,9 +630,9 @@ export const buildExportWarning = (): React.ComponentProps<
 };
 
 /**
- * Build props for file data modality Cell component from the given files response.
+ * Build props for file data modality NTagCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file data modality cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildFileDataModality = (
   response: FileEntityResponse
@@ -644,9 +644,9 @@ export const buildFileDataModality = (
 };
 
 /**
- * Build props for file download.
+ * Build props for file download AzulFileDownload component.
  * @param response - Response model returned from index/files API endpoint.
- * @returns Props to be used as input to file download component.
+ * @returns model to be used as props for the AzulFileDownload component.
  */
 export const buildFileDownload = (
   response: FilesResponse
@@ -657,66 +657,66 @@ export const buildFileDownload = (
 };
 
 /**
- * Build props for file ID Cell component from the given files response.
+ * Build props for file ID BasicCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file ID cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileName = (
   response: FileEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getFileName(response),
   };
 };
 
 /**
- * Build props for file format Cell component from the given files response.
+ * Build props for file format BasicCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file format cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileFormat = (
   response: FileEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getFileFormat(response),
   };
 };
 
 /**
- * Build props for file size Cell component from the given files response.
+ * Build props for file size BasicCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file size cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileSize = (
   response: FileEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getFileSize(response),
   };
 };
 
 /**
- * Build props for library ID Cell component from the given libraries response.
+ * Build props for library ID BasicCell component from the given libraries response.
  * @param response - Response model return from index/libraries API endpoint.
- * @returns model to be used as props for the library ID cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildLibraryId = (
   response: LibraryEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getLibraryId(response),
   };
 };
 
 /**
- * Build props for list view access warning Alert component.
+ * Build props for list view access warning FluidAlert component.
  * @param _ - Unused.
  * @param viewContext - View context.
- * @returns model to be used as props for the Alert component.
+ * @returns model to be used as props for the FluidAlert component.
  */
 export const buildListWarning = (
-  _: DatasetsResponse,
-  viewContext: ViewContext
+  _: Unused,
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.FluidAlert> => {
   const {
     entityConfig: { label },
@@ -730,13 +730,13 @@ export const buildListWarning = (
 
 /**
  * Build props for ManifestDownload component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ManifestDownload component.
  */
 export const buildManifestDownload = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ManifestDownload> => {
   const {
     exploreState: { filterState },
@@ -776,8 +776,8 @@ export const buildManifestDownloadEntity = (
  * @returns model to be used as props for the FluidAlert component.
  */
 export const buildManifestDownloadEntityWarning = (
-  _: DatasetsResponse,
-  viewContext: ViewContext
+  _: Unused,
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.FluidAlert> => {
   const {
     authState: { isAuthenticated },
@@ -793,22 +793,22 @@ export const buildManifestDownloadEntityWarning = (
 };
 
 /**
- * Build props for organism type cell component from the given donors response.
+ * Build props for organism type BasicCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the organism type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildOrganismType = (
   response: DonorEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getOrganismType(response),
   };
 };
 
 /**
- * Build props for organism type cell component from the given entity response.
+ * Build props for organism type NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated donors.
- * @returns model to be used as props for the organism type cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildOrganismTypes = (
   response: AggregatedDonorResponse
@@ -820,22 +820,22 @@ export const buildOrganismTypes = (
 };
 
 /**
- * Build props for phenotypic sex cell component from the given donors response.
+ * Build props for phenotypic sex BasicCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the phenotypic sex cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildPhenotypicSex = (
   response: DonorEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getPhenotypicSex(response),
   };
 };
 
 /**
- * Build props for phenotypic sex cell component from the given donors response.
+ * Build props for phenotypic sex NTagCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the phenotypic sex cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildPhenotypicSexes = (
   response: AggregatedDonorResponse
@@ -847,36 +847,36 @@ export const buildPhenotypicSexes = (
 };
 
 /**
- * Build props for prep material name Cell component from the given libraries response.
+ * Build props for prep material name BasicCell component from the given libraries response.
  * @param response - Response model return from index/libraries API endpoint.
- * @returns model to be used as props for the prep material name cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildPrepMaterialName = (
   response: LibraryEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getPrepMaterialName(response),
   };
 };
 
 /**
- * Build props for registered identifier Cell component from the given datasets response.
+ * Build props for registered identifier BasicCell component from the given datasets response.
  * @param datasetsResponse - Response model return from datasets API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildRegisteredIdentifier = (
   datasetsResponse: DatasetsResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getDatasetRegisteredIdentifier(datasetsResponse),
   };
 };
 
 /**
- * Build reported ethnicities Cell component from the given donors response. Naming is singular here to indicate
+ * Build reported ethnicities NTagCell component from the given donors response. Naming is singular here to indicate
  * ethnicities are pulled from the core donor entity, even though the return value is an array.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the reported ethnicities cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildReportedEthnicity = (
   response: DonorEntityResponse
@@ -1032,7 +1032,7 @@ function getExportEntityFilters(datasetsResponse: DatasetsResponse): Filters {
  * @returns export method accessibility.
  */
 function getExportMethodAccessibility(
-  viewContext: ViewContext
+  viewContext: ViewContext<Void>
 ): Partial<typeof C.ExportMethod> {
   const { fileManifestState } = viewContext;
   const { isFacetsSuccess } = fileManifestState;
@@ -1230,8 +1230,8 @@ function mapCurrentQuery(
  * @returns model to be used as props for the ConditionalComponent component.
  */
 export const renderWhenUnAuthorized = (
-  _: DatasetsResponse,
-  viewContext: ViewContext
+  _: Unused,
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.ConditionalComponent> => {
   const {
     authState: { isAuthenticated },
@@ -1249,7 +1249,7 @@ export const renderWhenUnAuthorized = (
  */
 export const renderExportEntity = (
   datasetsResponse: DatasetsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<DatasetsResponse>
 ): React.ComponentProps<typeof C.ConditionalComponent> => {
   const {
     exploreState: { featureFlagState },
@@ -1269,7 +1269,7 @@ export const renderExportEntity = (
  */
 export const renderExportEntityWarning = (
   datasetsResponse: DatasetsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<DatasetsResponse>
 ): React.ComponentProps<typeof C.ConditionalComponent> => {
   const {
     exploreState: { featureFlagState },
diff --git a/explorer/app/viewModelBuilders/azul/anvil/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/anvil/common/viewModelBuilders.ts
index c0cd8df14..fea32201a 100644
--- a/explorer/app/viewModelBuilders/azul/anvil/common/viewModelBuilders.ts
+++ b/explorer/app/viewModelBuilders/azul/anvil/common/viewModelBuilders.ts
@@ -49,61 +49,61 @@ import { METADATA_KEY } from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
 
 /**
- * Build props for activity type Cell component from the given activities response.
+ * Build props for activity type BasicCell component from the given activities response.
  * @param response - Response model return from activities API.
- * @returns model to be used as props for the activity type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildActivityType = (
   response: ActivityEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getActivityType(response),
   };
 };
 
 /**
- * Build props for anatomical site Cell component from the given index/biosamples response.
+ * Build props for anatomical site BasicCell component from the given index/biosamples response.
  * @param response - Response model return from index/biosamples API.
- * @returns model to be used as props for the biosample type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildAnatomicalSite = (
   response: BioSampleEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getAnatomicalSite(response),
   };
 };
 
 /**
- * Build props for biosample id Cell component from the given index/biosamples response.
+ * Build props for biosample id BasicCell component from the given index/biosamples response.
  * @param response - Response model return from index/biosamples API.
- * @returns model to be used as props for the biosample id cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildBioSampleId = (
   response: BioSampleEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getBioSampleId(response),
   };
 };
 
 /**
- * Build props for biosample type Cell component from the given index/biosamples response.
+ * Build props for biosample type BasicCell component from the given index/biosamples response.
  * @param response - Response model return from index/biosamples API.
- * @returns model to be used as props for the biosample type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildBioSampleType = (
   response: BioSampleEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getBioSampleType(response),
   };
 };
 
 /**
- * Build biosample types Cell component from the given entity response.
+ * Build biosample types NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated biosamples.
- * @returns model to be used as props for the biosample types cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildBioSampleTypes = (
   response: AggregatedBioSampleResponse
@@ -132,7 +132,7 @@ export const buildDatasetDescription = (
  * Build props for Details component from the given datasets index or detaset detail response.
  * TODO revisit - separate from entity builder, generalize modeling/component?, revisit transformer
  * @param response - Response model return from datasets or dataset API endpoints.
- * @returns model to be used as props for the Description component.
+ * @returns model to be used as props for the Details component.
  */
 export const buildDatasetDetails = (
   response: DatasetEntityResponse
@@ -144,7 +144,7 @@ export const buildDatasetDetails = (
 };
 
 /**
- * Build props for Hero component from the given datasets response.
+ * Build props for BackPageHero component from the given datasets response.
  * TODO revisit - separate from entity builder, generalize modeling?, revisit transformer
  * @param response - Response model return from datasets API.
  * @returns model to be used as props for the BackPageHero component.
@@ -162,7 +162,7 @@ export const buildDatasetHero = (
 /**
  * Build props for data modality NTagCell component from the given activities response.
  * @param response - Response model return from index/activities API.
- * @returns model to be used as props for the data modality NTagCell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildDataModality = (
   response: ActivityEntityResponse
@@ -174,9 +174,9 @@ export const buildDataModality = (
 };
 
 /**
- * Build dataset name Cell component from the given index/datasets response.
+ * Build dataset name Link component from the given index/datasets response.
  * @param response - Response model return from index/datasets API.
- * @returns model to be used as props for the dataset name cell.
+ * @returns model to be used as props for the Link component.
  */
 export const buildDatasetName = (
   response: DatasetsResponse
@@ -188,9 +188,9 @@ export const buildDatasetName = (
 };
 
 /**
- * Build dataset names Cell component from the given entity response.
+ * Build dataset names NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated datasets.
- * @returns model to be used as props for the dataset names cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildDatasetNames = (
   response: AggregatedDatasetResponse
@@ -202,35 +202,35 @@ export const buildDatasetNames = (
 };
 
 /**
- * Build props for donor ID cell component from the given donors response.
+ * Build props for donor ID BasicCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the donor ID cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildDonorId = (
   response: DonorEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getDonorId(response),
   };
 };
 
 /**
- * Build props for document ID Cell component from the given activities response.
+ * Build props for document ID BasicCell component from the given activities response.
  * @param response - Response model return from activities API.
- * @returns model to be used as props for the activity document cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildDocumentId = (
   response: ActivityEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getDocumentId(response),
   };
 };
 
 /**
- * Build props for file data modality Cell component from the given files response.
+ * Build props for file data modality NTagCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file data modality cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildFileDataModality = (
   response: FileEntityResponse
@@ -242,74 +242,74 @@ export const buildFileDataModality = (
 };
 
 /**
- * Build props for file ID Cell component from the given files response.
+ * Build props for file ID BasicCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file ID cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileId = (
   response: FileEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getFileId(response),
   };
 };
 
 /**
- * Build props for file format Cell component from the given files response.
+ * Build props for file format BasicCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file format cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileFormat = (
   response: FileEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getFileFormat(response),
   };
 };
 
 /**
- * Build props for file type Cell component from the given files response.
+ * Build props for file type BasicCell component from the given files response.
  * @param response - Response model return from index/files API endpoint.
- * @returns model to be used as props for the file type cell.
+ * @returns model to be used as props for theBasicCell component.
  */
 export const buildFileType = (
   response: FileEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getFileType(response),
   };
 };
 
 /**
- * Build props for library ID Cell component from the given libraries response.
+ * Build props for library ID BasicCell component from the given libraries response.
  * @param response - Response model return from index/libraries API endpoint.
- * @returns model to be used as props for the library ID cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildLibraryId = (
   response: LibraryEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getLibraryId(response),
   };
 };
 
 /**
- * Build props for organism type cell component from the given donors response.
+ * Build props for organism type BasicCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the organism type cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildOrganismType = (
   response: DonorEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getOrganismType(response),
   };
 };
 
 /**
- * Build props for organism type cell component from the given entity response.
+ * Build props for organism type NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated donors.
- * @returns model to be used as props for the organism type cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildOrganismTypes = (
   response: AggregatedDonorResponse
@@ -321,22 +321,22 @@ export const buildOrganismTypes = (
 };
 
 /**
- * Build props for phenotypic sex cell component from the given donors response.
+ * Build props for phenotypic sex BasicCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the phenotypic sex cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildPhenotypicSex = (
   response: DonorEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getPhenotypicSex(response),
   };
 };
 
 /**
- * Build props for phenotypic sex cell component from the given donors response.
+ * Build props for phenotypic sex NTagCell component from the given donors response.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the phenotypic sex cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildPhenotypicSexes = (
   response: AggregatedDonorResponse
@@ -348,22 +348,22 @@ export const buildPhenotypicSexes = (
 };
 
 /**
- * Build props for prep material name Cell component from the given libraries response.
+ * Build props for prep material name BasicCell component from the given libraries response.
  * @param response - Response model return from index/libraries API endpoint.
- * @returns model to be used as props for the prep material name cell.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildPrepMaterialName = (
   response: LibraryEntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getPrepMaterialName(response),
   };
 };
 
 /**
- * Build props for prep material name cell component from the given entity response.
+ * Build props for prep material name NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated libraries.
- * @returns model to be used as props for the organism type cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildPrepMaterialNames = (
   response: AggregatedLibraryResponse
@@ -375,10 +375,11 @@ export const buildPrepMaterialNames = (
 };
 
 /**
- * Build reported ethnicities Cell component from the given donors response. Naming is singular here to indicate
- * ethnicities are pulled from the core donor entity, even though the return value is an array.
+ * Build reported ethnicities NTagCell component from the given donors response.
+ * Naming is singular here to indicate ethnicities are pulled from the core donor entity,
+ * even though the return value is an array.
  * @param response - Response model return from index/donors API endpoint.
- * @returns model to be used as props for the reported ethnicities cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildReportedEthnicity = (
   response: DonorEntityResponse
@@ -390,9 +391,9 @@ export const buildReportedEthnicity = (
 };
 
 /**
- * Build reported ethnicities Cell component from the given entity response.
+ * Build reported ethnicities NTagCell component from the given entity response.
  * @param response - Response model return from Azul that includes aggregated donors.
- * @returns model to be used as props for the reported ethnicities cell.
+ * @returns model to be used as props for the NTagCell component.
  */
 export const buildReportedEthnicities = (
   response: AggregatedDonorResponse
diff --git a/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts
index c00c36f2f..08b740cfb 100644
--- a/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts
+++ b/explorer/app/viewModelBuilders/azul/hca-dcp/common/viewModelBuilders.ts
@@ -83,7 +83,7 @@ import { METADATA_KEY } from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
 import { humanFileSize } from "../../../../utils/fileSize";
 import { DATE_TIME_FORMAT_OPTIONS } from "../../../common/contants";
-import { Unused } from "../../../common/entities";
+import { Unused, Void } from "../../../common/entities";
 import { formatDate } from "../../../common/utils";
 import { mapAccessions } from "./accessionMapper/accessionMapper";
 import { Accession } from "./accessionMapper/entities";
@@ -117,7 +117,7 @@ import {
 /**
  * Build props for the KeyValuePairs component for displaying the project accessions.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the key value pairs component.
+ * @returns model to be used as props for the KeyValuePairs component.
  */
 export const buildAccessions = (
   projectsResponse: ProjectsResponse
@@ -183,13 +183,13 @@ export const buildAggregatedDateLastModifiedDate = (
 };
 
 /**
- * Build props for biological sex Cell component from the given entity response.
+ * Build props for biological sex BasicCell component from the given entity response.
  * @param entityResponse - Response model return from entity API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildAggregatedDonorBiologicalSex = (
   entityResponse: EntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: stringifyValues(
       processAggregatedOrArrayValue(
@@ -201,13 +201,13 @@ export const buildAggregatedDonorBiologicalSex = (
 };
 
 /**
- * Build props for donor count Cell component from the given entity response.
+ * Build props for donor count BasicCell component from the given entity response.
  * @param entityResponse - Response model return from entity API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildAggregatedDonorCount = (
   entityResponse: EntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   const donorCount = processNumberEntityValue(
     entityResponse.donorOrganisms,
     HCA_DCP_CATEGORY_KEY.DONOR_COUNT
@@ -339,13 +339,13 @@ export const buildAggregatedProtocolNucleicAcidSource = (
 };
 
 /**
- * Build props for the aggregated paired end Cell component from the given entity response.
+ * Build props for the aggregated paired end BasicCell component from the given entity response.
  * @param entityResponse - Response model return from the entity response API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildAggregatedProtocolPairedEnd = (
   entityResponse: EntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: stringifyValues(
       processAggregatedBooleanOrArrayValue(
@@ -470,13 +470,13 @@ export const buildAggregatedSpecimenOrganPart = (
 };
 
 /**
- * Build props for the aggregate last modified date Cell component from the given projects response.
+ * Build props for the aggregate last modified date BasicCell component from the given projects response.
  * @param projectsResponse - Response model return from the projects API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildAggregateLastModifiedDate = (
   projectsResponse: ProjectsResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: formatAggregatedDate(
       processEntityValue(projectsResponse.dates, "aggregateLastModifiedDate")
@@ -485,13 +485,13 @@ export const buildAggregateLastModifiedDate = (
 };
 
 /**
- * Build props for the aggregate submission date Cell component from the given projects response.
+ * Build props for the aggregate submission date BasicCell component from the given projects response.
  * @param projectsResponse - Response model return from the projects API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildAggregateSubmissionDate = (
   projectsResponse: ProjectsResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: formatAggregatedDate(
       processEntityValue(projectsResponse.dates, "aggregateSubmissionDate")
@@ -502,7 +502,7 @@ export const buildAggregateSubmissionDate = (
 /**
  * Build props for analysis portals component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the analysis portals component.
+ * @returns model to be used as props for the KeyValuePairs component.
  */
 export const buildAnalysisPortals = (
   projectsResponse: ProjectsResponse
@@ -525,8 +525,8 @@ export const buildAnalysisPortals = (
 };
 
 /**
- * Build props for the data normalization and batch correction alert component.
- * @returns model to be used as props for the alert component.
+ * Build props for the data normalization and batch correction FluidAlert component.
+ * @returns model to be used as props for the FluidAlert component.
  */
 export const buildBatchCorrectionWarning = (): React.ComponentProps<
   typeof C.FluidAlert
@@ -538,9 +538,9 @@ export const buildBatchCorrectionWarning = (): React.ComponentProps<
 };
 
 /**
- * Build props for project citation component from the given projects response.
+ * Build props for project Citation component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project citation component.
+ * @returns model to be used as props for the project Citation component.
  */
 export const buildCitation = (
   projectsResponse: ProjectsResponse
@@ -558,9 +558,9 @@ export const buildCitation = (
 };
 
 /**
- * Build props for project collaborating organizations component from the given projects response.
+ * Build props for project CollaboratingOrganizations component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project collaborating organizations component.
+ * @returns model to be used as props for the CollaboratingOrganizations component.
  */
 export const buildCollaboratingOrganizations = (
   projectsResponse: ProjectsResponse
@@ -572,9 +572,9 @@ export const buildCollaboratingOrganizations = (
 };
 
 /**
- * Build props for project contacts component from the given projects response.
+ * Build props for project Contacts component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project contacts component.
+ * @returns model to be used as props for the Contacts component.
  */
 export const buildContacts = (
   projectsResponse: ProjectsResponse
@@ -588,7 +588,7 @@ export const buildContacts = (
 /**
  * Build props for GeneratedMatricesTable component from the given project response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the contributor generated matrices table component.
+ * @returns model to be used as props for the GeneratedMatricesTables component.
  */
 export const buildContributorGeneratedMatricesTable = (
   projectsResponse: ProjectsResponse
@@ -606,9 +606,9 @@ export const buildContributorGeneratedMatricesTable = (
 };
 
 /**
- * Build props for project contributors component from the given projects response.
+ * Build props for project Contributors component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project contributors component.
+ * @returns model to be used as props for the Contributors component.
  */
 export const buildContributors = (
   projectsResponse: ProjectsResponse
@@ -642,9 +642,9 @@ export const buildCookieBanner = (): React.ComponentProps<
 };
 
 /**
- * Build props for project data curators component from the given projects response.
+ * Build props for project DataCurators component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project data curators component.
+ * @returns model to be used as props for the DataCurators component.
  */
 export const buildDataCurators = (
   projectsResponse: ProjectsResponse
@@ -658,7 +658,7 @@ export const buildDataCurators = (
 /**
  * Build props for GeneratedMatricesTable component from the given project response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the generated matrices table component.
+ * @returns model to be used as props for the GeneratedMatricesTables component.
  */
 export const buildDCPGeneratedMatricesTable = (
   projectsResponse: ProjectsResponse
@@ -676,9 +676,9 @@ export const buildDCPGeneratedMatricesTable = (
 };
 
 /**
- * Build props for project description component from the given projects response.
+ * Build props for project Description component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project description component.
+ * @returns model to be used as props for the Description component.
  */
 export const buildDescription = (
   projectsResponse: ProjectsResponse
@@ -693,9 +693,9 @@ export const buildDescription = (
 };
 
 /**
- * Build props for project details component from the given projects response.
+ * Build props for project Details component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project details component.
+ * @returns model to be used as props for the Details component.
  */
 export const buildDetails = (
   projectsResponse: ProjectsResponse
@@ -712,13 +712,13 @@ export const buildDetails = (
 
 /**
  * Build props for DownloadCurlCommand component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the DownloadCurlCommand component.
  */
 export const buildDownloadCurlCommand = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.DownloadCurlCommand> => {
   const {
     exploreState: { filterState },
@@ -746,7 +746,7 @@ export const buildDownloadCurlCommand = (
  */
 export const buildDownloadEntityCurlCommand = (
   projectsResponse: ProjectsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<ProjectsResponse>
 ): React.ComponentProps<typeof C.DownloadCurlCommand> => {
   const { fileManifestState } = viewContext;
   // Get the initial filters.
@@ -766,13 +766,13 @@ export const buildDownloadEntityCurlCommand = (
 };
 
 /**
- * Build props for "Cell Count Estimate" Cell component from the given projects response.
+ * Build props for "Cell Count Estimate" BasicCell component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the "Cell Count Estimate" Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildEstimateCellCount = (
   projectsResponse: ProjectsResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getEstimatedCellCount(projectsResponse),
   };
@@ -786,7 +786,7 @@ export const buildEstimateCellCount = (
  */
 export const buildExportCurrentQuery = (
   _: Unused,
-  viewContext: ViewContext
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.ExportCurrentQuery> => {
   const {
     fileManifestState: { filesFacets, filters, isFacetsLoading },
@@ -805,7 +805,7 @@ export const buildExportCurrentQuery = (
  */
 export const buildExportEntityToTerra = (
   projectsResponse: ProjectsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<ProjectsResponse>
 ): React.ComponentProps<typeof C.ExportToTerra> => {
   const { fileManifestState } = viewContext;
   // Get the initial filters.
@@ -834,7 +834,7 @@ export const buildExportEntityToTerra = (
  */
 export const buildExportEntityWarning = (
   _: Unused,
-  viewContext: ViewContext
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.FluidAlert> => {
   const {
     authState: { isAuthenticated },
@@ -850,14 +850,14 @@ export const buildExportEntityWarning = (
 };
 
 /**
- * Build props for export Hero component.
- * @param _ - Unused.
+ * Build props for export BackPageHero component.
+ * @param _ - Void.
  * @param viewContext - View context.
- * @returns model to be used as props for the export Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export function buildExportHero(
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.BackPageHero> {
   const { exploreState } = viewContext;
   const { tabValue } = exploreState || {};
@@ -872,13 +872,13 @@ export function buildExportHero(
 
 /**
  * Build props for ExportMethod component for display of the download to curl command section.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportMethod component.
  */
 export const buildExportMethodBulkDownload = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportMethod> => {
   return {
     ...getExportMethodAccessibility(viewContext),
@@ -890,14 +890,14 @@ export const buildExportMethodBulkDownload = (
 };
 
 /**
- * Build props for download curl command Hero component.
- * @param _ - Unused.
+ * Build props for download curl command BackPageHero component.
+ * @param _ - Void.
  * @param viewContext - View context.
- * @returns model to be used as props for the Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export const buildExportMethodHeroCurlCommand = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const title = 'Download Selected Data Using "curl"';
   const {
@@ -907,14 +907,14 @@ export const buildExportMethodHeroCurlCommand = (
 };
 
 /**
- * Build props for manifest download Hero component.
- * @param _ - Unused.
+ * Build props for manifest download BackPageHero component.
+ * @param _ - Void.
  * @param viewContext - View context.
- * @returns model to be used as props for the Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export const buildExportMethodHeroManifestDownload = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const title = "Request File Manifest";
   const {
@@ -924,14 +924,14 @@ export const buildExportMethodHeroManifestDownload = (
 };
 
 /**
- * Build props for export to terra Hero component.
- * @param _ - Unused.
+ * Build props for export to terra BackPageHero component.
+ * @param _ - Void.
  * @param viewContext - View context.
- * @returns model to be used as props for the Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export const buildExportMethodHeroTerra = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const title = "Export to Terra";
   const {
@@ -942,13 +942,13 @@ export const buildExportMethodHeroTerra = (
 
 /**
  * Build props for ExportMethod component for display of the manifest download section.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportMethod component.
  */
 export const buildExportMethodManifestDownload = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportMethod> => {
   return {
     ...getExportMethodAccessibility(viewContext),
@@ -962,13 +962,13 @@ export const buildExportMethodManifestDownload = (
 
 /**
  * Build props for ExportMethod component for display of the export to terra section.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportMethod component.
  */
 export const buildExportMethodTerra = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportMethod> => {
   return {
     ...getExportMethodAccessibility(viewContext),
@@ -988,7 +988,7 @@ export const buildExportMethodTerra = (
  */
 export const buildExportSelectedDataSummary = (
   _: Unused,
-  viewContext: ViewContext
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.ExportSelectedDataSummary> => {
   const {
     fileManifestState: {
@@ -1006,13 +1006,13 @@ export const buildExportSelectedDataSummary = (
 
 /**
  * Build props for ExportToTerra component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportToTerra component.
  */
 export const buildExportToTerra = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportToTerra> => {
   const {
     exploreState: { filterState },
@@ -1070,7 +1070,7 @@ export const buildFileContentDescriptions = (
 /**
  * Build props for the KeyValuePairs component for displaying project file counts from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the key value pairs component.
+ * @returns model to be used as props for the KeyValuePairs component.
  */
 export const buildFileCounts = (
   projectsResponse: ProjectsResponse
@@ -1106,13 +1106,13 @@ export const buildFileDownload = (
 };
 
 /**
- * Build props for file format Cell component from the given files response.
+ * Build props for file format BasicCell component from the given files response.
  * @param filesResponse - Response model return from files API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileFormat = (
   filesResponse: FilesResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   // Always take the first value in the files array.
   // This is a summary value and there should only ever be single value here.
   return {
@@ -1121,13 +1121,13 @@ export const buildFileFormat = (
 };
 
 /**
- * Build props for file name Cell component from the given files response.
+ * Build props for file name BasicCell component from the given files response.
  * @param filesResponse - Response model return from files API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileName = (
   filesResponse: FilesResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   // Always take the first value in the files array.
   // This is a summary value and there should only ever be single value here.
   return {
@@ -1136,13 +1136,13 @@ export const buildFileName = (
 };
 
 /**
- * Build props for file size Cell component from the given files response.
+ * Build props for file size BasicCell component from the given files response.
  * @param filesResponse - Response model return from files API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileSize = (
   filesResponse: FilesResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   // Always take the first value in the files array.
   // This is a summary value and there should only ever be single value here.
   return {
@@ -1151,13 +1151,13 @@ export const buildFileSize = (
 };
 
 /**
- * Build props for file source Cell component from the given files response.
+ * Build props for file source BasicCell component from the given files response.
  * @param filesResponse - Response model return from files API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildFileSource = (
   filesResponse: FilesResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: processEntityValue(
       filesResponse.files,
@@ -1183,14 +1183,14 @@ export function getExportSelectedDataSummary(
 }
 
 /**
- * Build props for project Hero component from the given projects response.
+ * Build props for project BackPageHero component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
  * @param viewContext - View context.
- * @returns model to be used as props for the project Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export const buildHero = (
   projectsResponse: ProjectsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<ProjectsResponse>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   return {
     breadcrumbs: getProjectBreadcrumbs(projectsResponse, viewContext),
@@ -1201,14 +1201,14 @@ export const buildHero = (
 };
 
 /**
- * Build props for managed access Hero component from the given projects response.
+ * Build props for managed access BackPageHero component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
  * @param viewContext - View context.
- * @returns model to be used as props for the Hero component.
+ * @returns model to be used as props for the BackPageHero component.
  */
 export const buildMAHero = (
   projectsResponse: ProjectsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<ProjectsResponse>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   return {
     breadcrumbs: getProjectBreadcrumbs(projectsResponse, viewContext),
@@ -1219,13 +1219,13 @@ export const buildMAHero = (
 
 /**
  * Build props for ManifestDownload component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ManifestDownload component.
  */
 export const buildManifestDownload = (
-  _: Unused,
-  viewContext: ViewContext
+  _: Void,
+  viewContext: ViewContext<Void>
 ): React.ComponentProps<typeof C.ManifestDownload> => {
   const {
     exploreState: { filterState },
@@ -1302,7 +1302,7 @@ export function buildProjectAccessibilityBadge(
 /**
  * Build project list view list hero warning.
  * Warning serves as a reminder for users to log in.
- * @returns model to be used as props for Alert component.
+ * @returns model to be used as props for FluidAlert component.
  */
 export const buildProjectListViewListHeroWarning = (): React.ComponentProps<
   typeof C.FluidAlert
@@ -1332,9 +1332,9 @@ export const buildProjectTitle = (
 };
 
 /**
- * Build props for project publications component from the given projects response.
+ * Build props for project Publications component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project publications component.
+ * @returns model to be used as props for the Publications component.
  */
 export const buildPublications = (
   projectsResponse: ProjectsResponse
@@ -1346,39 +1346,39 @@ export const buildPublications = (
 };
 
 /**
- * Build props for sample entity type Cell component from the given sample response.
+ * Build props for sample entity type BasicCell component from the given sample response.
  * @param samplesResponse - Response model return from samples API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildSampleEntityType = (
   samplesResponse: SamplesResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: processEntityValue(samplesResponse.samples, "sampleEntityType"),
   };
 };
 
 /**
- * Build props for sample identifier Cell component from the given sample response.
+ * Build props for sample identifier BasicCell component from the given sample response.
  * @param samplesResponse - Response model return from samples API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildSampleId = (
   samplesResponse: SamplesResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: processEntityValue(samplesResponse.samples, "id"),
   };
 };
 
 /**
- * Build props for the model organ Cell component from the given samples response.
+ * Build props for the model organ BasicCell component from the given samples response.
  * @param samplesResponse - Response model return from the samples API.
- * @returns model to be used as props for the Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildSampleModelOrgan = (
   samplesResponse: SamplesResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: processEntityValue(
       samplesResponse.samples,
@@ -1388,9 +1388,9 @@ export const buildSampleModelOrgan = (
 };
 
 /**
- * Build props for project supplementary links component from the given projects response.
+ * Build props for project SupplementaryLinks component from the given projects response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the project supplementary links component.
+ * @returns model to be used as props for the SupplementaryLinks component.
  */
 export const buildSupplementaryLinks = (
   projectsResponse: ProjectsResponse
@@ -1402,13 +1402,13 @@ export const buildSupplementaryLinks = (
 };
 
 /**
- * Build props for total cells "Cell Count Estimate" Cell component from the given entity response.
+ * Build props for total cells "Cell Count Estimate" BasicCell component from the given entity response.
  * @param entityResponse - Response model return from entity API.
- * @returns model to be used as props for the total cells "Cell Count Estimate" Cell component.
+ * @returns model to be used as props for the BasicCell component.
  */
 export const buildTotalCells = (
   entityResponse: EntityResponse
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: getCellSuspensionTotalCells(entityResponse),
   };
@@ -1422,8 +1422,8 @@ export const buildTotalCells = (
  * - desktop view: 3 columns.
  * @returns model to be used as props for the Grid component.
  */
-export const buildTripleColumnGrid = (): React.ComponentProps<
-  typeof C.Grid
+export const buildTripleColumnGrid = (): Partial<
+  React.ComponentProps<typeof C.Grid>
 > => {
   return {
     gridSx: {
@@ -1757,7 +1757,7 @@ function getExportEntityFilters(projectsResponse: ProjectsResponse): Filters {
  * @returns export method accessibility.
  */
 function getExportMethodAccessibility(
-  viewContext: ViewContext
+  viewContext: ViewContext<Void>
 ): Partial<typeof C.ExportMethod> {
   const { fileManifestState } = viewContext;
   const { isFacetsSuccess } = fileManifestState;
@@ -2080,7 +2080,7 @@ export function getProjectAggregateLastModifiedDate(
  */
 export function getProjectBreadcrumbs(
   projectsResponse: ProjectsResponse,
-  viewContext?: ViewContext
+  viewContext?: ViewContext<ProjectsResponse>
 ): Breadcrumb[] {
   const { exploreState } = viewContext || {};
   const { tabValue } = exploreState || {};
@@ -2311,7 +2311,7 @@ export const renderExportEntityWarning = (
  */
 export const renderWhenUnAuthorized = (
   _: Unused,
-  viewContext: ViewContext
+  viewContext: ViewContext<Unused>
 ): React.ComponentProps<typeof C.ConditionalComponent> => {
   const {
     authState: { isAuthenticated },
diff --git a/explorer/app/viewModelBuilders/azul/lungmap/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/azul/lungmap/common/viewModelBuilders.ts
index 9550486b8..5ec768cbd 100644
--- a/explorer/app/viewModelBuilders/azul/lungmap/common/viewModelBuilders.ts
+++ b/explorer/app/viewModelBuilders/azul/lungmap/common/viewModelBuilders.ts
@@ -8,7 +8,7 @@ import {
 import { ProjectsResponse } from "../../../../apis/azul/hca-dcp/common/responses";
 import * as C from "../../../../components";
 import * as MDX from "../../../../components/common/MDXContent/lungmap";
-import { Unused } from "../../../common/entities";
+import { Void } from "../../../common/entities";
 import {
   groupProjectMatrixViewsBySpecies,
   projectMatrixMapper,
@@ -29,8 +29,8 @@ import {
 } from "../../hca-dcp/common/viewModelBuilders";
 
 /**
- * Build props for the data normalization and batch correction alert component.
- * @returns model to be used as props for the alert component.
+ * Build props for the data normalization and batch correction Alert component.
+ * @returns model to be used as props for the Alert component.
  */
 export const buildBatchCorrectionWarning = (): React.ComponentProps<
   typeof C.Alert
@@ -44,7 +44,7 @@ export const buildBatchCorrectionWarning = (): React.ComponentProps<
 /**
  * Build props for GeneratedMatricesTable component from the given project response.
  * @param projectsResponse - Response model return from projects API.
- * @returns model to be used as props for the contributor generated matrices table component.
+ * @returns model to be used as props for the GeneratedMatricesTables component.
  */
 export const buildContributorGeneratedMatricesTable = (
   projectsResponse: ProjectsResponse
@@ -80,16 +80,16 @@ function buildContributorGeneratedMatricesTableColumns<T>(): ColumnDef<T>[] {
 
 /**
  * Build props for DownloadCurlCommand component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the DownloadCurlCommand component.
  */
 export const buildDownloadCurlCommand = (
-  _: Unused,
-  viewContext?: ViewContext
+  _: Void,
+  viewContext?: ViewContext<Void>
 ): React.ComponentProps<typeof C.DownloadCurlCommand> => {
   return {
-    ...buildHCADownloadCurlCommand(_, viewContext as ViewContext),
+    ...buildHCADownloadCurlCommand(_, viewContext as ViewContext<Void>),
     DownloadCurlSuccess: MDX.DownloadCurlCommandSuccess,
   };
 };
@@ -102,7 +102,7 @@ export const buildDownloadCurlCommand = (
  */
 export const buildDownloadEntityCurlCommand = (
   projectsResponse: ProjectsResponse,
-  viewContext: ViewContext
+  viewContext: ViewContext<ProjectsResponse>
 ): React.ComponentProps<typeof C.DownloadCurlCommand> => {
   return {
     ...buildHCADownloadEntityCurlCommand(projectsResponse, viewContext),
@@ -112,16 +112,16 @@ export const buildDownloadEntityCurlCommand = (
 
 /**
  * Build props for ExportToTerra component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ExportToTerra component.
  */
 export const buildExportToTerra = (
-  _: Unused,
-  viewContext?: ViewContext
+  _: Void,
+  viewContext?: ViewContext<Void>
 ): React.ComponentProps<typeof C.ExportToTerra> => {
   return {
-    ...buildHCAExportToTerra(_, viewContext as ViewContext),
+    ...buildHCAExportToTerra(_, viewContext as ViewContext<Void>),
     ExportToTerraStart: MDX.ExportToTerraStart,
     ExportToTerraSuccess: MDX.ExportToTerraSuccessWithWarning,
   };
@@ -129,16 +129,16 @@ export const buildExportToTerra = (
 
 /**
  * Build props for ManifestDownload component.
- * @param _ - Unused.
+ * @param _ - Void.
  * @param viewContext - View context.
  * @returns model to be used as props for the ManifestDownload component.
  */
 export const buildManifestDownload = (
-  _: Unused,
-  viewContext?: ViewContext
+  _: Void,
+  viewContext?: ViewContext<Void>
 ): React.ComponentProps<typeof C.ManifestDownload> => {
   return {
-    ...buildHCAManifestDownload(_, viewContext as ViewContext),
+    ...buildHCAManifestDownload(_, viewContext as ViewContext<Void>),
     ManifestDownloadSuccess: MDX.ManifestDownloadSuccess,
   };
 };
@@ -151,8 +151,8 @@ export const buildManifestDownload = (
  * - desktop view: 3 columns.
  * @returns model to be used as props for the Grid component.
  */
-export const buildTripleColumnGrid = (): React.ComponentProps<
-  typeof C.Grid
+export const buildTripleColumnGrid = (): Partial<
+  React.ComponentProps<typeof C.Grid>
 > => {
   return {
     gridSx: {
diff --git a/explorer/app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders.ts
index 03347a207..bf5ece542 100644
--- a/explorer/app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders.ts
+++ b/explorer/app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders.ts
@@ -26,22 +26,22 @@ import { getPluralizedMetadataLabel } from "../../../../components/Index/common/
 import { formatSizeToTB } from "../../../../utils/fileSize";
 
 /**
- * Build props for bucket size cell component from the given AnVIL entity.
+ * Build props for bucket size BasicCell component from the given AnVIL entity.
  * @param anvilCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the bucket size cell.
+ * @returns Model to be used as props for the BasicCell component.
  */
 export const buildBucketSize = (
   anvilCatalogEntity: AnVILCatalogEntity
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: formatSizeToTB(anvilCatalogEntity.bucketSize),
   };
 };
 
 /**
- * Build props for consent code cell component from the given AnVIL workspace.
+ * Build props for ConsentCodesCell component from the given AnVIL workspace.
  * @param anvilCatalogWorkspace - AnVIL catalog workspace.
- * @returns Model to be used as props for the consent code cell.
+ * @returns Model to be used as props for the ConsentCodesCell component.
  */
 export const buildConsentCode = (
   anvilCatalogWorkspace: AnVILCatalogWorkspace
@@ -54,9 +54,9 @@ export const buildConsentCode = (
 };
 
 /**
- * Build props for consent codes cell component from the given AnVIL entity.
+ * Build props for ConsentCodesCell component from the given AnVIL entity.
  * @param anvilCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the consent codes cell.
+ * @returns Model to be used as props for the ConsentCodesCell component.
  */
 export const buildConsentCodes = (
   anvilCatalogEntity: Exclude<AnVILCatalogEntity, AnVILCatalogWorkspace>
@@ -69,9 +69,9 @@ export const buildConsentCodes = (
 };
 
 /**
- * Build props for consortium cell component from the given AnVIL entity.
+ * Build props for consortium Link component from the given AnVIL entity.
  * @param anVILCatalogEntity - AnVIL catalog entity .
- * @returns Model to be used as props for the consortium cell.
+ * @returns Model to be used as props for the Link component.
  */
 export const buildConsortium = (
   anVILCatalogEntity: AnVILCatalogEntity
@@ -87,7 +87,7 @@ export const buildConsortium = (
 /**
  * Build props for DetailViewTable component from the given AnVIL entity.
  * @param anVILCatalogConsortium - AnVil catalog consortium.
- * @returns Model to be used as props for the detail view table component.
+ * @returns Model to be used as props for the DetailViewTable component.
  */
 export const buildConsortiumDetailViewStudiesTable = (
   anVILCatalogConsortium: AnVILCatalogConsortium
@@ -105,7 +105,7 @@ export const buildConsortiumDetailViewStudiesTable = (
 /**
  * Build props for DetailViewTable component from the given AnVIL entity.
  * @param anVILCatalogConsortium - AnVil catalog consortium.
- * @returns Model to be used as props for the detail view table component.
+ * @returns Model to be used as props for the DetailViewTable component.
  */
 export const buildConsortiumDetailViewWorkspacesTable = (
   anVILCatalogConsortium: AnVILCatalogConsortium
@@ -165,9 +165,9 @@ export const buildConsortiumSummary = (
 };
 
 /**
- * Build props for data type cell component from the given AnVIL entity.
+ * Build props for data type NTagCell component from the given AnVIL entity.
  * @param anvilCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the data type cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildDataTypes = (
   anvilCatalogEntity: AnVILCatalogEntity
@@ -179,22 +179,22 @@ export const buildDataTypes = (
 };
 
 /**
- * Build props for dbGapId cell component from the given AnVIL entity.
+ * Build props for dbGapId BasicCell component from the given AnVIL entity.
  * @param anvilCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the dbGapId cell.
+ * @returns Model to be used as props for the BasicCell component.
  */
 export const buildDbGapId = (
   anvilCatalogEntity: AnVILCatalogStudy
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: anvilCatalogEntity.dbGapId,
   };
 };
 
 /**
- * Build props for dbGapIds cell component from the given AnVIL consortium catalog.
+ * Build props for dbGapIds NTagCell component from the given AnVIL consortium catalog.
  * @param anvilCatalogConsortium - AnVIL catalog consortium.
- * @returns Model to be used as props for the dbGapIds cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildDbGapIds = (
   anvilCatalogConsortium: AnVILCatalogConsortium
@@ -206,9 +206,9 @@ export const buildDbGapIds = (
 };
 
 /**
- * Build props for disease (indication) cell component from the given AnVIL entity.
+ * Build props for disease (indication) NTagCell component from the given AnVIL entity.
  * @param anvilCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the disease (indication) cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildDiseases = (
   anvilCatalogEntity: AnVILCatalogEntity
@@ -220,14 +220,14 @@ export const buildDiseases = (
 };
 
 /**
- * Build props for Hero component from the given AnVIL entity.
+ * Build props for BackPageHero component from the given AnVIL entity.
  * @param anvilCatalogConsortium - AnVIL catalog consortium.
  * @param viewContext - View context.
  * @returns model to be used as props for the BackPageHero component.
  */
 export const buildConsortiumHero = (
   anvilCatalogConsortium: AnVILCatalogConsortium,
-  viewContext: ViewContext
+  viewContext: ViewContext<AnVILCatalogConsortium>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const { consortium } = anvilCatalogConsortium;
   return {
@@ -237,13 +237,13 @@ export const buildConsortiumHero = (
 };
 
 /**
- * Build props for participant count cell component from the given AnVIL entity.
+ * Build props for participant count BasicCell component from the given AnVIL entity.
  * @param anvilCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the participant count cell.
+ * @returns Model to be used as props for the BasicCell component.
  */
 export const buildParticipantCount = (
   anvilCatalogEntity: AnVILCatalogEntity
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: anvilCatalogEntity.participantCount,
   };
@@ -287,9 +287,9 @@ export const buildStudyDescription = (
 };
 
 /**
- * Build props for study design cell component from the given AnVIL entity.
+ * Build props for study design NTagCell component from the given AnVIL entity.
  * @param anvilCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the study design cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildStudyDesigns = (
   anvilCatalogEntity: AnVILCatalogEntity
@@ -303,7 +303,7 @@ export const buildStudyDesigns = (
 /**
  * Build props for DetailViewTable component from the given AnVIL entity.
  * @param anVILCatalogStudy - AnVil catalog study.
- * @returns Model to be used as props for the detail view table component.
+ * @returns Model to be used as props for the DetailViewTable component.
  */
 export const buildStudyDetailViewWorkspacesTable = (
   anVILCatalogStudy: AnVILCatalogStudy
@@ -319,9 +319,9 @@ export const buildStudyDetailViewWorkspacesTable = (
 };
 
 /**
- * Build props for study design cell component from the given AnVIL entity.
+ * Build props for study design NTagCell component from the given AnVIL entity.
  * @param anVILCatalogConsortium - AnVIL catalog consortium.
- * @returns Model to be used as props for the study design cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildStudyNames = (
   anVILCatalogConsortium: AnVILCatalogConsortium
@@ -355,7 +355,7 @@ export const buildStudyDetails = (
 };
 
 /**
- * Build props for Hero component from the given AnVIL entity.
+ * Build props for BackPageHero component from the given AnVIL entity.
  * TODO revisit - separate from entity builder, generalize modeling?, revisit transformer
  * @param anVILCatalogStudy - AnVIL catalog study.
  * @param viewContext - View context.
@@ -363,7 +363,7 @@ export const buildStudyDetails = (
  */
 export const buildStudyHero = (
   anVILCatalogStudy: AnVILCatalogStudy,
-  viewContext: ViewContext
+  viewContext: ViewContext<AnVILCatalogStudy>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const { dbGapId, studyName } = anVILCatalogStudy;
   return {
@@ -378,9 +378,9 @@ export const buildStudyHero = (
 };
 
 /**
- * Build props for study name cell component from the given AnVIL entity.
+ * Build props for study name Link component from the given AnVIL entity.
  * @param workspaceOrStudy - AnVIL catalog workspace.
- * @returns Model to be used as props for the study name cell.
+ * @returns Model to be used as props for the Link component.
  */
 export const buildStudyName = (
   workspaceOrStudy: Exclude<AnVILCatalogEntity, AnVILCatalogConsortium>
@@ -424,9 +424,9 @@ export const buildStudySummary = (
 };
 
 /**
- * Build props for terra workspace name cell component from the given AnVIL workspace.
+ * Build props for terra workspace name Link component from the given AnVIL workspace.
  * @param anvilCatalogWorkspace - AnVIL catalog workspace.
- * @returns Model to be used as props for the terra workspace name cell.
+ * @returns Model to be used as props for the Link component.
  */
 export const buildTerraWorkspaceName = (
   anvilCatalogWorkspace: AnVILCatalogWorkspace
@@ -440,9 +440,9 @@ export const buildTerraWorkspaceName = (
 };
 
 /**
- * Build props for terra workspace names cell component from the given AnVIL entity.
+ * Build props for terra workspace names NTagCell component from the given AnVIL entity.
  * @param anVILCatalogEntity - AnVIL catalog entity.
- * @returns Model to be used as props for the terra workspace names cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildTerraWorkspaceNames = (
   anVILCatalogEntity: Exclude<AnVILCatalogEntity, AnVILCatalogWorkspace>
@@ -619,7 +619,9 @@ function buildWorkspaceNameTableColumn<T>(): ColumnDef<T> {
  * @returns catalog breadcrumbs.
  */
 function getCatalogBreadcrumbs(
-  viewContext: ViewContext,
+  viewContext:
+    | ViewContext<AnVILCatalogConsortium>
+    | ViewContext<AnVILCatalogStudy>,
   lastCrumbText?: string
 ): Breadcrumb[] {
   const { label, route } = viewContext.entityConfig;
diff --git a/explorer/app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders.ts b/explorer/app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders.ts
index 0246ca76d..16be7ce9b 100644
--- a/explorer/app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders.ts
+++ b/explorer/app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders.ts
@@ -17,9 +17,9 @@ import { METADATA_KEY } from "../../../../components/Index/common/entities";
 import { getPluralizedMetadataLabel } from "../../../../components/Index/common/indexTransformer";
 
 /**
- * Build props for consent codes cell component from the given NCPI entity.
+ * Build props for ConsentCodesCell component from the given NCPI entity.
  * @param ncpiCatalogEntry - NCPI catalog entity.
- * @returns Model to be used as props for the consent codes cell.
+ * @returns Model to be used as props for the ConsentCodesCell component.
  */
 export const buildConsentCodes = (
   ncpiCatalogEntry: NCPICatalogEntity
@@ -32,9 +32,9 @@ export const buildConsentCodes = (
 };
 
 /**
- * Build props for data types cell component from the given NCPI entity.
+ * Build props for data types NTagCell component from the given NCPI entity.
  * @param ncpiCatalogEntry - NCPI catalog entity.
- * @returns Model to be used as props for the data types cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildDataTypes = (
   ncpiCatalogEntry: NCPICatalogEntity
@@ -46,22 +46,22 @@ export const buildDataTypes = (
 };
 
 /**
- * Build props for dbGaPId cell component from the given NCPI entity.
+ * Build props for dbGaPId BasicCell component from the given NCPI entity.
  * @param ncpiCatalogStudy - NCPI catalog study.
- * @returns Model to be used as props for the dbGaPId cell.
+ * @returns Model to be used as props for the BasicCell component.
  */
 export const buildDbGapId = (
   ncpiCatalogStudy: NCPICatalogStudy
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: ncpiCatalogStudy.dbGapId,
   };
 };
 
 /**
- * Build props for dbGaPIds cell component from the given NCPI entity.
+ * Build props for dbGaPIds NTagCell component from the given NCPI entity.
  * @param ncpiCatalogPlatform - NCPI catalog platform.
- * @returns Model to be used as props for the dbGaPIds cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildDbGapIds = (
   ncpiCatalogPlatform: NCPICatalogPlatform
@@ -73,22 +73,22 @@ export const buildDbGapIds = (
 };
 
 /**
- * Build props for focus/disease cell component from the given NCPI entity.
+ * Build props for focus/disease BasicCell component from the given NCPI entity.
  * @param ncpiCatalogStudy - NCPI catalog study.
- * @returns Model to be used as props for the focus/disease cell.
+ * @returns Model to be used as props for the BasicCell component.
  */
 export const buildFocus = (
   ncpiCatalogStudy: NCPICatalogStudy
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: ncpiCatalogStudy.focus,
   };
 };
 
 /**
- * Build props for focus/diseases cell component from the given NCPI entity.
+ * Build props for focus/diseases NTagCell component from the given NCPI entity.
  * @param ncpiCatalogPlatform - NCPI catalog platform.
- * @returns Model to be used as props for the focus/diseases cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildFocusDiseases = (
   ncpiCatalogPlatform: NCPICatalogPlatform
@@ -100,35 +100,35 @@ export const buildFocusDiseases = (
 };
 
 /**
- * Build props for participant count cell component from the given NCPI entity.
+ * Build props for participant count BasicCell component from the given NCPI entity.
  * @param ncpiCatalogEntry - NCPI catalog entity.
- * @returns Model to be used as props for the participant count cell.
+ * @returns Model to be used as props for the BasicCell component.
  */
 export const buildParticipantCount = (
   ncpiCatalogEntry: NCPICatalogEntity
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: ncpiCatalogEntry.participantCount,
   };
 };
 
 /**
- * Build props for platform cell component from the given NCPI entity.
+ * Build props for platform BasicCell component from the given NCPI entity.
  * @param ncpiCatalogPlatform - NCPI catalog platform.
- * @returns Model to be used as props for the platform cell.
+ * @returns Model to be used as props for the BasicCell component.
  */
 export const buildPlatform = (
   ncpiCatalogPlatform: NCPICatalogPlatform
-): React.ComponentProps<typeof C.Cell> => {
+): React.ComponentProps<typeof C.BasicCell> => {
   return {
     value: ncpiCatalogPlatform.platform,
   };
 };
 
 /**
- * Build props for platforms cell component from the given NCPI entity.
+ * Build props for platforms NTagCell component from the given NCPI entity.
  * @param ncpiCatalogStudy - NCPI catalog study.
- * @returns Model to be used as props for the platforms cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildPlatforms = (
   ncpiCatalogStudy: NCPICatalogStudy
@@ -176,9 +176,9 @@ export const buildStudyDescription = (
 };
 
 /**
- * Build props for study designs cell component from the given NCPI entity.
+ * Build props for study designs NTagCell component from the given NCPI entity.
  * @param ncpiCatalogEntity - NCPI catalog entity.
- * @returns Model to be used as props for the study designs cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildStudyDesigns = (
   ncpiCatalogEntity: NCPICatalogEntity
@@ -211,14 +211,14 @@ export const buildStudyDetails = (
 };
 
 /**
- * Build props for Hero component from the given NCPI entity.
+ * Build props for BackPageHero component from the given NCPI entity.
  * @param ncpiCatalogStudy - NCPI catalog study.
  * @param viewContext - View context.
  * @returns model to be used as props for the BackPageHero component.
  */
 export const buildStudyHero = (
   ncpiCatalogStudy: NCPICatalogStudy,
-  viewContext: ViewContext
+  viewContext: ViewContext<NCPICatalogStudy>
 ): React.ComponentProps<typeof C.BackPageHero> => {
   const { dbGapId, title } = ncpiCatalogStudy;
   return {
@@ -264,9 +264,9 @@ export const buildStudySummary = (
 };
 
 /**
- * Build props for study name cell component from the given NCPI entity.
+ * Build props for study name Link component from the given NCPI entity.
  * @param ncpiCatalogStudy - NCPI catalog study.
- * @returns Model to be used as props for the study name cell.
+ * @returns Model to be used as props for the Link component.
  */
 export const buildStudyTitle = (
   ncpiCatalogStudy: NCPICatalogStudy
@@ -279,9 +279,9 @@ export const buildStudyTitle = (
 };
 
 /**
- * Build props for study names cell component from the given NCPI entity.
+ * Build props for study names NTagCell component from the given NCPI entity.
  * @param ncpiCatalogPlatform - NCPI catalog platform.
- * @returns Model to be used as props for the study names cell.
+ * @returns Model to be used as props for the NTagCell component.
  */
 export const buildStudyNames = (
   ncpiCatalogPlatform: NCPICatalogPlatform
@@ -299,7 +299,7 @@ export const buildStudyNames = (
  * @returns catalog breadcrumbs.
  */
 function getCatalogBreadcrumbs(
-  viewContext: ViewContext,
+  viewContext: ViewContext<NCPICatalogStudy>,
   lastCrumbText?: string
 ): Breadcrumb[] {
   const { label, route } = viewContext.entityConfig;
diff --git a/explorer/app/viewModelBuilders/common/entities.ts b/explorer/app/viewModelBuilders/common/entities.ts
index c81403721..20b7555a3 100644
--- a/explorer/app/viewModelBuilders/common/entities.ts
+++ b/explorer/app/viewModelBuilders/common/entities.ts
@@ -1,2 +1,2 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- type is unused and therefore possibly unknown.
-export type Unused = any;
+export type Unused = unknown;
+export type Void = void;
diff --git a/explorer/next.config.mjs b/explorer/next.config.mjs
index da8d59284..25d5cb9a1 100644
--- a/explorer/next.config.mjs
+++ b/explorer/next.config.mjs
@@ -2,6 +2,12 @@ import nextMDX from "@next/mdx";
 import withPlugins from "next-compose-plugins";
 import path from "path";
 
+const ESM_PACKAGES = [
+  "axios",
+  "@databiosphere/findable-ui",
+  "@tanstack/react-table",
+];
+
 const withMDX = nextMDX({
   extension: /\.mdx?$/,
 });
@@ -21,6 +27,7 @@ export default withPlugins(
     output: "export",
     reactStrictMode: true,
     staticPageGenerationTimeout: 120,
+    transpilePackages: [...ESM_PACKAGES],
     webpack: (config) => {
       // Add the alias for the peer dependency
       config.resolve.alias["@emotion/react"] = path.resolve(
@@ -39,14 +46,6 @@ export default withPlugins(
         process.cwd(),
         "node_modules/@mui/material"
       );
-      config.resolve.alias["@tanstack/react-table"] = path.resolve(
-        process.cwd(),
-        "node_modules/@tanstack/react-table"
-      );
-      config.resolve.alias["axios"] = path.resolve(
-        process.cwd(),
-        "node_modules/axios"
-      );
       config.resolve.alias["react-dropzone"] = path.resolve(
         process.cwd(),
         "node_modules/react-dropzone"
diff --git a/explorer/package-lock.json b/explorer/package-lock.json
index 246ce0215..b2fb2147f 100644
--- a/explorer/package-lock.json
+++ b/explorer/package-lock.json
@@ -8,7 +8,7 @@
       "name": "explorer",
       "version": "0.1.0",
       "dependencies": {
-        "@databiosphere/findable-ui": "2.1.0",
+        "@databiosphere/findable-ui": "9.1.0",
         "@emotion/react": "11.11.1",
         "@emotion/styled": "11.11.0",
         "@mdx-js/loader": "^3.0.1",
@@ -16,7 +16,7 @@
         "@mui/icons-material": "5.14.1",
         "@mui/material": "5.14.1",
         "@next/mdx": "^14.1.0",
-        "@tanstack/react-table": "8.5.11",
+        "@tanstack/react-table": "^8.19.2",
         "@types/fhir": "^0.0.35",
         "@types/mdx": "^2.0.11",
         "axios": "^1.6.7",
@@ -2727,9 +2727,9 @@
       }
     },
     "node_modules/@databiosphere/findable-ui": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@databiosphere/findable-ui/-/findable-ui-2.1.0.tgz",
-      "integrity": "sha512-ROpjBpGfK2fnxBTHboH2voe6/wxHiTuVCgCMeGWEPxXK/OEhRtKf93BUmCYfLlYz+mAVsu7BzkbPfYpjX1zioQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@databiosphere/findable-ui/-/findable-ui-9.1.0.tgz",
+      "integrity": "sha512-Kmpo1YGaFQJFTLSfIYe1VHYlTfiKFkxagN8skndRxdNH1HMkHw6l6+nhiDeprg3HlRX+kn9akxv0TOowiETSRw==",
       "engines": {
         "node": "20.10.0"
       },
@@ -2738,7 +2738,7 @@
         "@emotion/styled": "11.11.0",
         "@mui/icons-material": "5.14.1",
         "@mui/material": "5.14.1",
-        "@tanstack/react-table": "8.5.11",
+        "@tanstack/react-table": "^8.19.2",
         "@tanstack/react-virtual": "^3.0.0-beta.59",
         "axios": "^1.6.7",
         "copy-to-clipboard": "3.3.1",
@@ -8615,11 +8615,11 @@
       }
     },
     "node_modules/@tanstack/react-table": {
-      "version": "8.5.11",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.5.11.tgz",
-      "integrity": "sha512-bIegBJ3VPUX3Z7rMnFEnTRCRgPccTsciilQA1ib/pA6M7Qq1boTNPjNjSbEHmBKytaxPrPfcUfzkZLogYtvu3g==",
+      "version": "8.19.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.19.2.tgz",
+      "integrity": "sha512-itoSIAkA/Vsg+bjY23FSemcTyPhc5/1YjYyaMsr9QSH/cdbZnQxHVWrpWn0Sp2BWN71qkzR7e5ye8WuMmwyOjg==",
       "dependencies": {
-        "@tanstack/table-core": "8.5.11"
+        "@tanstack/table-core": "8.19.2"
       },
       "engines": {
         "node": ">=12"
@@ -8629,8 +8629,8 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "react": ">=16",
-        "react-dom": ">=16"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
     "node_modules/@tanstack/react-virtual": {
@@ -8651,9 +8651,9 @@
       }
     },
     "node_modules/@tanstack/table-core": {
-      "version": "8.5.11",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.5.11.tgz",
-      "integrity": "sha512-ZN61ockLaIAiiPbZfMKT2S03nbWx28OHg/nAiDnNfmN4QmAMcdwVajPn2QQwnNVGAr4jS4nbhbYzCcjq8livXQ==",
+      "version": "8.19.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.19.2.tgz",
+      "integrity": "sha512-KpRjhgehIhbfH78ARm/GJDXGnpdw4bCg3qas6yjWSi7czJhI/J6pWln7NHtmBkGE9ZbohiiNtLqwGzKmBfixig==",
       "engines": {
         "node": ">=12"
       },
@@ -32389,9 +32389,9 @@
       }
     },
     "@databiosphere/findable-ui": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@databiosphere/findable-ui/-/findable-ui-2.1.0.tgz",
-      "integrity": "sha512-ROpjBpGfK2fnxBTHboH2voe6/wxHiTuVCgCMeGWEPxXK/OEhRtKf93BUmCYfLlYz+mAVsu7BzkbPfYpjX1zioQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/@databiosphere/findable-ui/-/findable-ui-9.1.0.tgz",
+      "integrity": "sha512-Kmpo1YGaFQJFTLSfIYe1VHYlTfiKFkxagN8skndRxdNH1HMkHw6l6+nhiDeprg3HlRX+kn9akxv0TOowiETSRw==",
       "requires": {}
     },
     "@digitak/esrun": {
@@ -36215,11 +36215,11 @@
       }
     },
     "@tanstack/react-table": {
-      "version": "8.5.11",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.5.11.tgz",
-      "integrity": "sha512-bIegBJ3VPUX3Z7rMnFEnTRCRgPccTsciilQA1ib/pA6M7Qq1boTNPjNjSbEHmBKytaxPrPfcUfzkZLogYtvu3g==",
+      "version": "8.19.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.19.2.tgz",
+      "integrity": "sha512-itoSIAkA/Vsg+bjY23FSemcTyPhc5/1YjYyaMsr9QSH/cdbZnQxHVWrpWn0Sp2BWN71qkzR7e5ye8WuMmwyOjg==",
       "requires": {
-        "@tanstack/table-core": "8.5.11"
+        "@tanstack/table-core": "8.19.2"
       }
     },
     "@tanstack/react-virtual": {
@@ -36232,9 +36232,9 @@
       }
     },
     "@tanstack/table-core": {
-      "version": "8.5.11",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.5.11.tgz",
-      "integrity": "sha512-ZN61ockLaIAiiPbZfMKT2S03nbWx28OHg/nAiDnNfmN4QmAMcdwVajPn2QQwnNVGAr4jS4nbhbYzCcjq8livXQ=="
+      "version": "8.19.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.19.2.tgz",
+      "integrity": "sha512-KpRjhgehIhbfH78ARm/GJDXGnpdw4bCg3qas6yjWSi7czJhI/J6pWln7NHtmBkGE9ZbohiiNtLqwGzKmBfixig=="
     },
     "@tanstack/virtual-core": {
       "version": "3.1.2",
diff --git a/explorer/package.json b/explorer/package.json
index 03e0595a4..16487cfb0 100644
--- a/explorer/package.json
+++ b/explorer/package.json
@@ -36,7 +36,7 @@
     "test:anvil-catalog": "playwright test -c playwright_anvil-catalog.config.ts --trace retain-on-failure"
   },
   "dependencies": {
-    "@databiosphere/findable-ui": "2.1.0",
+    "@databiosphere/findable-ui": "9.1.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mdx-js/loader": "^3.0.1",
@@ -44,7 +44,7 @@
     "@mui/icons-material": "5.14.1",
     "@mui/material": "5.14.1",
     "@next/mdx": "^14.1.0",
-    "@tanstack/react-table": "8.5.11",
+    "@tanstack/react-table": "^8.19.2",
     "@types/fhir": "^0.0.35",
     "@types/mdx": "^2.0.11",
     "axios": "^1.6.7",
diff --git a/explorer/site-config/anvil-catalog/dev/config.ts b/explorer/site-config/anvil-catalog/dev/config.ts
index 04e7d3a34..dabb2ab23 100644
--- a/explorer/site-config/anvil-catalog/dev/config.ts
+++ b/explorer/site-config/anvil-catalog/dev/config.ts
@@ -1,8 +1,6 @@
-import { ELEMENT_ALIGNMENT } from "@databiosphere/findable-ui/lib/common/entities";
-import { HEADER_NAVIGATION_LABEL } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/common/constants";
 import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
 import * as C from "../../../app/components/index";
-import { socialMedia } from "../../anvil/dev/socialMedia";
+import { socialMedia, SOCIALS } from "../../anvil/dev/socialMedia";
 import { SiteConfig } from "../../common/entities";
 import {
   ANVIL_CATALOG_CATEGORY_KEY,
@@ -102,75 +100,110 @@ export function makeConfig(
         socials: socialMedia.socials,
       },
       header: {
-        Logo: C.Logo({
+        authenticationEnabled: false,
+        logo: C.Logo({
           alt: APP_TITLE,
           height: 40,
           link: portalUrl,
           src: "/images/logoAnvil.png",
         }),
-        authenticationEnabled: false,
-        navAlignment: ELEMENT_ALIGNMENT.CENTER,
-        navLinks: [
-          {
-            label: "Overview",
-            url: `${portalUrl}/overview`,
-          },
-          {
-            label: "Learn",
-            url: `${portalUrl}/learn`,
-          },
-          {
-            label: "Datasets",
-            menuItems: [
-              {
-                description:
-                  "An open-access view of studies, workspaces, and consortia.",
-                label: "Catalog",
-                url: HOME_PAGE_PATH,
-              },
-              {
-                description:
-                  "Build, download, and export cross-study cohorts of open and managed access data.",
-                label: C.LabelIconMenuItem({
-                  iconFontSize: "small",
-                  label: "Explorer",
-                }),
-                target: ANCHOR_TARGET.BLANK,
-                url: `${explorerUrl}/datasets`,
-              },
-            ],
-            url: "",
-          },
-          {
-            label: "Consortia",
-            url: `${portalUrl}/consortia`,
-          },
-          {
-            label: "News",
-            url: `${portalUrl}/news`,
-          },
-          {
-            label: "Events",
-            url: `${portalUrl}/events`,
-          },
-          {
-            label: HEADER_NAVIGATION_LABEL.MORE,
-            menuItems: [
-              {
-                label: "Team",
-                url: `${portalUrl}/team`,
-              },
-              {
-                label: "FAQ",
-                url: `${portalUrl}/faq`,
-              },
-              {
-                label: "Help",
-                url: `${portalUrl}/help`,
-              },
-            ],
-            url: "",
-          },
+        navigation: [
+          undefined,
+          [
+            {
+              label: "Overview",
+              url: `${portalUrl}/overview`,
+            },
+            {
+              label: "Learn",
+              url: `${portalUrl}/learn`,
+            },
+            {
+              label: "Datasets",
+              menuItems: [
+                {
+                  description:
+                    "An open-access view of studies, workspaces, and consortia.",
+                  label: "Catalog",
+                  url: HOME_PAGE_PATH,
+                },
+                {
+                  description:
+                    "Build, download, and export cross-study cohorts of open and managed access data.",
+                  label: C.LabelIconMenuItem({
+                    iconFontSize: "small",
+                    label: "Explorer",
+                  }),
+                  target: ANCHOR_TARGET.BLANK,
+                  url: `${explorerUrl}/datasets`,
+                },
+              ],
+              url: "",
+            },
+            {
+              label: "Consortia",
+              url: `${portalUrl}/consortia`,
+            },
+            {
+              label: "More",
+              menuItems: [
+                {
+                  label: "News",
+                  url: `${portalUrl}/news`,
+                },
+                {
+                  label: "Events",
+                  url: `${portalUrl}/events`,
+                },
+                {
+                  label: "Team",
+                  url: `${portalUrl}/team`,
+                },
+                {
+                  label: "FAQ",
+                  url: `${portalUrl}/faq`,
+                },
+                {
+                  label: "Help",
+                  url: `${portalUrl}/help`,
+                },
+                {
+                  label: "Follow Us",
+                  menuItems: [
+                    {
+                      ...SOCIALS.DISCOURSE,
+                      icon: C.DiscourseIcon({ fontSize: "small" }),
+                      target: ANCHOR_TARGET.BLANK,
+                    },
+                    {
+                      ...SOCIALS.X,
+                      icon: C.XIcon({ fontSize: "small" }),
+                      target: ANCHOR_TARGET.BLANK,
+                    },
+                    {
+                      ...SOCIALS.YOUTUBE,
+                      icon: C.YouTubeIcon({ fontSize: "small" }),
+                      target: ANCHOR_TARGET.BLANK,
+                    },
+                    {
+                      ...SOCIALS.GITHUB,
+                      icon: C.GitHubIcon({ fontSize: "small" }),
+                      target: ANCHOR_TARGET.BLANK,
+                    },
+                    {
+                      ...SOCIALS.SLACK,
+                      icon: C.SlackIcon({ fontSize: "small" }),
+                      target: ANCHOR_TARGET.BLANK,
+                    },
+                  ],
+                  url: "",
+                  visible: { lg: false, sm: false, xs: false },
+                },
+              ],
+              url: "",
+            },
+          ],
+          undefined,
         ],
         searchEnabled: true,
         searchURL: `${portalUrl}/search`,
diff --git a/explorer/site-config/anvil-catalog/dev/detail/consortium/overviewSideColumn.ts b/explorer/site-config/anvil-catalog/dev/detail/consortium/overviewSideColumn.ts
index 5fb8c4a6c..fc4658daa 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/consortium/overviewSideColumn.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/consortium/overviewSideColumn.ts
@@ -1,11 +1,11 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import { AnVILCatalogConsortium } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const sideColumn = [
   {
     component: C.Details,
-    viewBuilder: T.buildConsortiumSummary,
+    viewBuilder: V.buildConsortiumSummary,
   } as ComponentConfig<typeof C.Details, AnVILCatalogConsortium>,
 ];
diff --git a/explorer/site-config/anvil-catalog/dev/detail/consortium/studiesMainColumn.ts b/explorer/site-config/anvil-catalog/dev/detail/consortium/studiesMainColumn.ts
index 5a78d1cd6..55ae3ad3a 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/consortium/studiesMainColumn.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/consortium/studiesMainColumn.ts
@@ -1,14 +1,14 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "app/components";
 import { AnVILCatalogConsortium } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const studiesMainColumn = [
   {
     children: [
       {
         component: C.DetailViewTable,
-        viewBuilder: T.buildConsortiumDetailViewStudiesTable,
+        viewBuilder: V.buildConsortiumDetailViewStudiesTable,
       } as ComponentConfig<typeof C.DetailViewTable, AnVILCatalogConsortium>,
     ],
     component: C.BackPageContentSingleColumn,
diff --git a/explorer/site-config/anvil-catalog/dev/detail/consortium/top.ts b/explorer/site-config/anvil-catalog/dev/detail/consortium/top.ts
index 61683f229..65ff1faf8 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/consortium/top.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/consortium/top.ts
@@ -4,11 +4,11 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { AnVILCatalogConsortium } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const top: ComponentsConfig = [
   {
     component: C.BackPageHero,
-    viewBuilder: T.buildConsortiumHero,
+    viewBuilder: V.buildConsortiumHero,
   } as ComponentConfig<typeof C.BackPageHero, AnVILCatalogConsortium>,
 ];
diff --git a/explorer/site-config/anvil-catalog/dev/detail/consortium/workspacesMainColumn.ts b/explorer/site-config/anvil-catalog/dev/detail/consortium/workspacesMainColumn.ts
index a0a5067a8..f0a1d10aa 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/consortium/workspacesMainColumn.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/consortium/workspacesMainColumn.ts
@@ -1,14 +1,14 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "app/components";
 import { AnVILCatalogConsortium } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const workspacesMainColumn = [
   {
     children: [
       {
         component: C.DetailViewTable,
-        viewBuilder: T.buildConsortiumDetailViewWorkspacesTable,
+        viewBuilder: V.buildConsortiumDetailViewWorkspacesTable,
       } as ComponentConfig<typeof C.DetailViewTable, AnVILCatalogConsortium>,
     ],
     component: C.BackPageContentSingleColumn,
diff --git a/explorer/site-config/anvil-catalog/dev/detail/study/overviewMainColumn.ts b/explorer/site-config/anvil-catalog/dev/detail/study/overviewMainColumn.ts
index e6f103896..099b497e7 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/study/overviewMainColumn.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/study/overviewMainColumn.ts
@@ -1,14 +1,14 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "app/components";
 import { AnVILCatalogStudy } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const mainColumn = [
   {
     children: [
       {
         component: C.Markdown,
-        viewBuilder: T.buildStudyDescription,
+        viewBuilder: V.buildStudyDescription,
       } as ComponentConfig<typeof C.Markdown, AnVILCatalogStudy>,
     ],
     component: C.CollapsableSection,
@@ -23,7 +23,7 @@ export const mainColumn = [
         children: [
           {
             component: C.Links,
-            viewBuilder: T.buildStudyApplyingForAccess,
+            viewBuilder: V.buildStudyApplyingForAccess,
           } as ComponentConfig<typeof C.Links, AnVILCatalogStudy>,
         ],
         component: C.Stack,
diff --git a/explorer/site-config/anvil-catalog/dev/detail/study/overviewSideColumn.ts b/explorer/site-config/anvil-catalog/dev/detail/study/overviewSideColumn.ts
index 02898fa5d..b842b790e 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/study/overviewSideColumn.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/study/overviewSideColumn.ts
@@ -1,20 +1,20 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import { AnVILCatalogStudy } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const sideColumn = [
   {
     children: [
       {
         component: C.KeyValuePairs,
-        viewBuilder: T.buildStudyDetails,
+        viewBuilder: V.buildStudyDetails,
       } as ComponentConfig<typeof C.KeyValuePairs, AnVILCatalogStudy>,
     ],
     component: C.GridPaperSection,
   } as ComponentConfig<typeof C.GridPaperSection>,
   {
     component: C.Details,
-    viewBuilder: T.buildStudySummary,
+    viewBuilder: V.buildStudySummary,
   } as ComponentConfig<typeof C.Details, AnVILCatalogStudy>,
 ];
diff --git a/explorer/site-config/anvil-catalog/dev/detail/study/top.ts b/explorer/site-config/anvil-catalog/dev/detail/study/top.ts
index 02219a657..6dd3ef993 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/study/top.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/study/top.ts
@@ -4,11 +4,11 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { AnVILCatalogStudy } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const top: ComponentsConfig = [
   {
     component: C.BackPageHero,
-    viewBuilder: T.buildStudyHero,
+    viewBuilder: V.buildStudyHero,
   } as ComponentConfig<typeof C.BackPageHero, AnVILCatalogStudy>,
 ];
diff --git a/explorer/site-config/anvil-catalog/dev/detail/study/workspacesMainColumn.ts b/explorer/site-config/anvil-catalog/dev/detail/study/workspacesMainColumn.ts
index fa8abdf66..b6aface30 100644
--- a/explorer/site-config/anvil-catalog/dev/detail/study/workspacesMainColumn.ts
+++ b/explorer/site-config/anvil-catalog/dev/detail/study/workspacesMainColumn.ts
@@ -1,14 +1,14 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "app/components";
 import { AnVILCatalogStudy } from "../../../../../app/apis/catalog/anvil-catalog/common/entities";
-import * as T from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 
 export const workspacesMainColumn = [
   {
     children: [
       {
         component: C.DetailViewTable,
-        viewBuilder: T.buildStudyDetailViewWorkspacesTable,
+        viewBuilder: V.buildStudyDetailViewWorkspacesTable,
       } as ComponentConfig<typeof C.DetailViewTable, AnVILCatalogStudy>,
     ],
     component: C.BackPageContentSingleColumn,
diff --git a/explorer/site-config/anvil-catalog/dev/index/consortiaEntityConfig.ts b/explorer/site-config/anvil-catalog/dev/index/consortiaEntityConfig.ts
index 95207ea77..01fc9a520 100644
--- a/explorer/site-config/anvil-catalog/dev/index/consortiaEntityConfig.ts
+++ b/explorer/site-config/anvil-catalog/dev/index/consortiaEntityConfig.ts
@@ -11,8 +11,8 @@ import {
   getConsortiumId,
   getConsortiumTitle,
 } from "../../../../app/apis/catalog/anvil-catalog/common/utils";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 import {
   ANVIL_CATALOG_CATEGORY_KEY,
   ANVIL_CATALOG_CATEGORY_LABEL,
@@ -59,45 +59,45 @@ export const consortiaEntityConfig: EntityConfig<AnVILCatalogConsortium> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildConsortium,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildConsortium,
+        } as ComponentConfig<typeof C.Link>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.CONSORTIUM,
         id: ANVIL_CATALOG_CATEGORY_KEY.CONSORTIUM,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDbGapIds,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDbGapIds,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DB_GAP_ID,
         id: ANVIL_CATALOG_CATEGORY_KEY.DB_GAP_ID,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.ConsentCodesCell,
-          viewBuilder: ViewBuilder.buildConsentCodes,
-        } as ComponentConfig<typeof Components.ConsentCodesCell>,
+          component: C.ConsentCodesCell,
+          viewBuilder: V.buildConsentCodes,
+        } as ComponentConfig<typeof C.ConsentCodesCell>,
         header: "Consent Codes", // TODO revisit header
         id: ANVIL_CATALOG_CATEGORY_KEY.CONSENT_CODE,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDiseases,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDiseases,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DISEASE,
         id: ANVIL_CATALOG_CATEGORY_KEY.DISEASE,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDataTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDataTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DATA_TYPE,
         id: ANVIL_CATALOG_CATEGORY_KEY.DATA_TYPE,
         width: { max: "1fr", min: "120px" },
@@ -105,18 +105,18 @@ export const consortiaEntityConfig: EntityConfig<AnVILCatalogConsortium> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildStudyNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildStudyNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.STUDY_NAME,
         id: ANVIL_CATALOG_CATEGORY_KEY.STUDY_NAME,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildStudyDesigns,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildStudyDesigns,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.STUDY_DESIGN,
         id: ANVIL_CATALOG_CATEGORY_KEY.STUDY_DESIGN,
         width: { max: "1fr", min: "120px" },
@@ -124,27 +124,27 @@ export const consortiaEntityConfig: EntityConfig<AnVILCatalogConsortium> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildTerraWorkspaceNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildTerraWorkspaceNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: "Workspaces",
         id: ANVIL_CATALOG_CATEGORY_KEY.WORKSPACE_NAME,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildParticipantCount,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildParticipantCount,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.PARTICIPANT_COUNT,
         id: ANVIL_CATALOG_CATEGORY_KEY.PARTICIPANT_COUNT,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildBucketSize,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildBucketSize,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.BUCKET_SIZE,
         id: ANVIL_CATALOG_CATEGORY_KEY.BUCKET_SIZE,
         width: "max-content",
diff --git a/explorer/site-config/anvil-catalog/dev/index/studiesEntityConfig.ts b/explorer/site-config/anvil-catalog/dev/index/studiesEntityConfig.ts
index c81f8929d..3d774b7c8 100644
--- a/explorer/site-config/anvil-catalog/dev/index/studiesEntityConfig.ts
+++ b/explorer/site-config/anvil-catalog/dev/index/studiesEntityConfig.ts
@@ -11,8 +11,8 @@ import {
   getStudyId,
   getStudyTitle,
 } from "../../../../app/apis/catalog/anvil-catalog/common/utils";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 import {
   ANVIL_CATALOG_CATEGORY_KEY,
   ANVIL_CATALOG_CATEGORY_LABEL,
@@ -53,99 +53,90 @@ export const studiesEntityConfig: EntityConfig<AnVILCatalogStudy> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildStudyName,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildStudyName,
+        } as ComponentConfig<typeof C.Link>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.STUDY_NAME,
         id: ANVIL_CATALOG_CATEGORY_KEY.STUDY_NAME,
         width: { max: "2fr", min: "240px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildDbGapId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildDbGapId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DB_GAP_ID,
         id: ANVIL_CATALOG_CATEGORY_KEY.DB_GAP_ID,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildConsortium,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildConsortium,
+        } as ComponentConfig<typeof C.Link>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.CONSORTIUM,
         id: ANVIL_CATALOG_CATEGORY_KEY.CONSORTIUM,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.ConsentCodesCell,
-          viewBuilder: ViewBuilder.buildConsentCodes,
-        } as ComponentConfig<typeof Components.ConsentCodesCell>,
+          component: C.ConsentCodesCell,
+          viewBuilder: V.buildConsentCodes,
+        } as ComponentConfig<typeof C.ConsentCodesCell>,
         header: "Consent Codes", // TODO revisit header
         id: ANVIL_CATALOG_CATEGORY_KEY.CONSENT_CODE,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDiseases,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDiseases,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DISEASE,
         id: ANVIL_CATALOG_CATEGORY_KEY.DISEASE,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDataTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDataTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DATA_TYPE,
         id: ANVIL_CATALOG_CATEGORY_KEY.DATA_TYPE,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildStudyDesigns,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildStudyDesigns,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.STUDY_DESIGN,
         id: ANVIL_CATALOG_CATEGORY_KEY.STUDY_DESIGN,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildTerraWorkspaceNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildTerraWorkspaceNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: "Workspaces",
         id: ANVIL_CATALOG_CATEGORY_KEY.WORKSPACE_NAME, // workspaceNames - a list of workspace names.
         width: { max: "1fr", min: "120px" },
       },
-      // {
-      //   componentConfig: {
-      //     component: Components.Cell,
-      //     viewBuilder: ViewBuilder.buildTerraWorkspaceCount,
-      //   } as ComponentConfig<typeof Components.Cell>,
-      //   header: "Workspaces",
-      //   id: "workspaceCount",
-      //   width: { max: "1fr", min: "120px" },
-      // },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildParticipantCount,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildParticipantCount,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.PARTICIPANT_COUNT,
         id: ANVIL_CATALOG_CATEGORY_KEY.PARTICIPANT_COUNT,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildBucketSize,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildBucketSize,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.BUCKET_SIZE,
         id: ANVIL_CATALOG_CATEGORY_KEY.BUCKET_SIZE,
         width: "max-content",
diff --git a/explorer/site-config/anvil-catalog/dev/index/workspaceEntityConfig.ts b/explorer/site-config/anvil-catalog/dev/index/workspaceEntityConfig.ts
index 01f45ec37..c57ae52a5 100644
--- a/explorer/site-config/anvil-catalog/dev/index/workspaceEntityConfig.ts
+++ b/explorer/site-config/anvil-catalog/dev/index/workspaceEntityConfig.ts
@@ -10,8 +10,8 @@ import {
   anvilCatalogWorkspaceInputMapper,
   getWorkspaceId,
 } from "../../../../app/apis/catalog/anvil-catalog/common/utils";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/catalog/anvil-catalog/common/viewModelBuilders";
 import {
   ANVIL_CATALOG_CATEGORY_KEY,
   ANVIL_CATALOG_CATEGORY_LABEL,
@@ -35,9 +35,9 @@ export const workspaceEntityConfig: EntityConfig<AnVILCatalogWorkspace> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildConsortium,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildConsortium,
+        } as ComponentConfig<typeof C.Link>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.CONSORTIUM,
         id: ANVIL_CATALOG_CATEGORY_KEY.CONSORTIUM,
         width: { max: "1fr", min: "120px" },
@@ -45,81 +45,81 @@ export const workspaceEntityConfig: EntityConfig<AnVILCatalogWorkspace> = {
       {
         columnPinned: true,
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildTerraWorkspaceName,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildTerraWorkspaceName,
+        } as ComponentConfig<typeof C.Link>,
         header: "Terra Workspace", // TODO revisit header
         id: ANVIL_CATALOG_CATEGORY_KEY.WORKSPACE_NAME,
         width: { max: "1fr", min: "360px" },
       },
       {
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildStudyName,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildStudyName,
+        } as ComponentConfig<typeof C.Link>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.STUDY_NAME,
         id: ANVIL_CATALOG_CATEGORY_KEY.STUDY_NAME,
         width: { max: "1fr", min: "360px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildDbGapId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildDbGapId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DB_GAP_ID,
         id: ANVIL_CATALOG_CATEGORY_KEY.DB_GAP_ID,
         width: { max: "1.24fr", min: "124px" },
       },
       {
         componentConfig: {
-          component: Components.ConsentCodesCell,
-          viewBuilder: ViewBuilder.buildConsentCode,
-        } as ComponentConfig<typeof Components.ConsentCodesCell>,
+          component: C.ConsentCodesCell,
+          viewBuilder: V.buildConsentCode,
+        } as ComponentConfig<typeof C.ConsentCodesCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.CONSENT_CODE,
         id: ANVIL_CATALOG_CATEGORY_KEY.CONSENT_CODE,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDiseases,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDiseases,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DISEASE,
         id: ANVIL_CATALOG_CATEGORY_KEY.DISEASE,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDataTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDataTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.DATA_TYPE,
         id: ANVIL_CATALOG_CATEGORY_KEY.DATA_TYPE,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildStudyDesigns,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildStudyDesigns,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.STUDY_DESIGN,
         id: ANVIL_CATALOG_CATEGORY_KEY.STUDY_DESIGN,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildParticipantCount,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildParticipantCount,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.PARTICIPANT_COUNT,
         id: ANVIL_CATALOG_CATEGORY_KEY.PARTICIPANT_COUNT,
         width: { max: "1.16fr", min: "116px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildBucketSize,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildBucketSize,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATALOG_CATEGORY_LABEL.BUCKET_SIZE,
         id: ANVIL_CATALOG_CATEGORY_KEY.BUCKET_SIZE,
         width: "max-content",
diff --git a/explorer/site-config/anvil-cmg/dev/config.ts b/explorer/site-config/anvil-cmg/dev/config.ts
index 07f57e453..fa54261b7 100644
--- a/explorer/site-config/anvil-cmg/dev/config.ts
+++ b/explorer/site-config/anvil-cmg/dev/config.ts
@@ -1,5 +1,4 @@
 import { APIEndpoints } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
-import { ELEMENT_ALIGNMENT } from "@databiosphere/findable-ui/lib/common/entities";
 import { SystemStatusBindResponseFn } from "@databiosphere/findable-ui/lib/config/entities";
 import { CATALOG_DEFAULT } from "../../../app/apis/azul/anvil-cmg/common/constants";
 import * as C from "../../../app/components/index";
@@ -156,34 +155,37 @@ export function makeConfig(
         ],
       },
       header: {
-        Announcements: C.RenderComponents({ components: announcements }),
-        Logo: C.ANVILExplorer({ url: "/datasets" }),
+        announcements,
         authenticationEnabled: true,
-        navAlignment: ELEMENT_ALIGNMENT.RIGHT,
-        navLinks: [
-          {
-            flatten: true,
-            label: "Help & Documentation",
-            menuItems: [
-              {
-                label: "Beta Announcement",
-                url: "/beta-announcement",
-              },
-              {
-                label: "Guides",
-                url: "/guides",
-              },
-              {
-                label: "Terms of service",
-                url: "/terms-of-service",
-              },
-              {
-                label: "Privacy Policy",
-                url: "/privacy",
-              },
-            ],
-            url: "",
-          },
+        logo: C.ANVILExplorer({ url: "/datasets" }),
+        navigation: [
+          undefined,
+          undefined,
+          [
+            {
+              flatten: { md: true, sm: true, xs: true },
+              label: "Help & Documentation",
+              menuItems: [
+                {
+                  label: "Beta Announcement",
+                  url: "/beta-announcement",
+                },
+                {
+                  label: "Guides",
+                  url: "/guides",
+                },
+                {
+                  label: "Terms of service",
+                  url: "/terms-of-service",
+                },
+                {
+                  label: "Privacy Policy",
+                  url: "/privacy",
+                },
+              ],
+              url: "",
+            },
+          ],
         ],
         searchEnabled: false,
         searchURL: `${browserUrl}/search`,
diff --git a/explorer/site-config/anvil-cmg/dev/detail/dataset/overviewSideColumn.ts b/explorer/site-config/anvil-cmg/dev/detail/dataset/overviewSideColumn.ts
index 597e3a75b..8c1e84476 100644
--- a/explorer/site-config/anvil-cmg/dev/detail/dataset/overviewSideColumn.ts
+++ b/explorer/site-config/anvil-cmg/dev/detail/dataset/overviewSideColumn.ts
@@ -1,11 +1,11 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import { DatasetsResponse } from "../../../../../app/apis/azul/anvil-cmg/common/responses";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/azul/anvil-cmg/common/viewModelBuilders";
 
 export const sideColumn = [
   {
     component: C.Details,
-    viewBuilder: T.buildDatasetDetails,
+    viewBuilder: V.buildDatasetDetails,
   } as ComponentConfig<typeof C.Details, DatasetsResponse>,
 ];
diff --git a/explorer/site-config/anvil-cmg/dev/index/activitiesEntityConfig.ts b/explorer/site-config/anvil-cmg/dev/index/activitiesEntityConfig.ts
index d54e913fc..3f1a29c63 100644
--- a/explorer/site-config/anvil-cmg/dev/index/activitiesEntityConfig.ts
+++ b/explorer/site-config/anvil-cmg/dev/index/activitiesEntityConfig.ts
@@ -32,18 +32,18 @@ export const activitiesEntityConfig: EntityConfig<ActivitiesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildDocumentId,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.ACTIVITY_DOCUMENT_ID,
         id: ANVIL_CMG_CATEGORY_KEY.ACTIVITY_DOCUMENT_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildActivityType,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.ACTIVITY_ACTIVITY_TYPE,
         id: ANVIL_CMG_CATEGORY_KEY.ACTIVITY_ACTIVITY_TYPE,
         width: { max: "1fr", min: "200px" },
@@ -59,9 +59,9 @@ export const activitiesEntityConfig: EntityConfig<ActivitiesResponse> = {
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildBioSampleTypes,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.BIOSAMPLE_BIOSAMPLE_TYPE,
         id: ANVIL_CMG_CATEGORY_KEY.BIOSAMPLE_BIOSAMPLE_TYPE,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil-cmg/dev/index/biosamplesEntityConfig.ts b/explorer/site-config/anvil-cmg/dev/index/biosamplesEntityConfig.ts
index dc0a6db8b..554e1c018 100644
--- a/explorer/site-config/anvil-cmg/dev/index/biosamplesEntityConfig.ts
+++ b/explorer/site-config/anvil-cmg/dev/index/biosamplesEntityConfig.ts
@@ -32,27 +32,27 @@ export const biosamplesEntityConfig: EntityConfig<BioSamplesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildBioSampleId,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.BIOSAMPLE_BIOSAMPLE_ID,
         id: ANVIL_CMG_CATEGORY_KEY.BIOSAMPLE_BIOSAMPLE_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAnatomicalSite,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.BIOSAMPLE_ANATOMICAL_SITE,
         id: ANVIL_CMG_CATEGORY_KEY.BIOSAMPLE_ANATOMICAL_SITE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildBioSampleType,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.BIOSAMPLE_BIOSAMPLE_TYPE,
         id: ANVIL_CMG_CATEGORY_KEY.BIOSAMPLE_BIOSAMPLE_TYPE,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil-cmg/dev/index/datasetsEntityConfig.ts b/explorer/site-config/anvil-cmg/dev/index/datasetsEntityConfig.ts
index ed1a577f7..43bdb8e16 100644
--- a/explorer/site-config/anvil-cmg/dev/index/datasetsEntityConfig.ts
+++ b/explorer/site-config/anvil-cmg/dev/index/datasetsEntityConfig.ts
@@ -77,18 +77,18 @@ export const datasetsEntityConfig: EntityConfig<DatasetsResponse> = {
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildRegisteredIdentifier,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.DATASET_REGISTERED_ID,
         id: ANVIL_CMG_CATEGORY_KEY.DATASET_REGISTERED_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildConsentGroup,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.DATASET_CONSENT_GROUP,
         id: ANVIL_CMG_CATEGORY_KEY.DATASET_CONSENT_GROUP,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil-cmg/dev/index/donorsEntityConfig.ts b/explorer/site-config/anvil-cmg/dev/index/donorsEntityConfig.ts
index 861b0ccab..842092b08 100644
--- a/explorer/site-config/anvil-cmg/dev/index/donorsEntityConfig.ts
+++ b/explorer/site-config/anvil-cmg/dev/index/donorsEntityConfig.ts
@@ -32,27 +32,27 @@ export const donorsEntityConfig: EntityConfig<DonorsResponse> = {
     columns: [
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildDonorId,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.DONOR_DONOR_ID,
         id: ANVIL_CMG_CATEGORY_KEY.DONOR_DONOR_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildOrganismType,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.DONOR_ORGANISM_TYPE,
         id: ANVIL_CMG_CATEGORY_KEY.DONOR_ORGANISM_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildPhenotypicSex,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.DONOR_PHENOTYPIC_SEX,
         id: ANVIL_CMG_CATEGORY_KEY.DONOR_PHENOTYPIC_SEX,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil-cmg/dev/index/filesEntityConfig.ts b/explorer/site-config/anvil-cmg/dev/index/filesEntityConfig.ts
index 3671335bf..8d8b94010 100644
--- a/explorer/site-config/anvil-cmg/dev/index/filesEntityConfig.ts
+++ b/explorer/site-config/anvil-cmg/dev/index/filesEntityConfig.ts
@@ -47,27 +47,27 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
       {
         columnPinned: true,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildFileName,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.FILE_FILE_NAME,
         id: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_NAME,
         width: { max: "1fr", min: "240px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildFileFormat,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.FILE_FILE_FORMAT, // "Format"
         id: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_FORMAT,
         width: { max: "auto", min: "120px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildFileSize,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.FILE_FILE_SIZE,
         id: ANVIL_CMG_CATEGORY_KEY.FILE_FILE_SIZE,
         width: { max: "auto", min: "120px" },
diff --git a/explorer/site-config/anvil-cmg/dev/index/librariesEntityConfig.ts b/explorer/site-config/anvil-cmg/dev/index/librariesEntityConfig.ts
index 40c254390..850c7233e 100644
--- a/explorer/site-config/anvil-cmg/dev/index/librariesEntityConfig.ts
+++ b/explorer/site-config/anvil-cmg/dev/index/librariesEntityConfig.ts
@@ -30,18 +30,18 @@ export const librariesEntityConfig: EntityConfig<LibrariesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildLibraryId,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.LIBRARY_ID,
         id: ANVIL_CMG_CATEGORY_KEY.LIBRARY_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildPrepMaterialName,
-        } as ComponentConfig<typeof C.Cell>,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CMG_CATEGORY_LABEL.PREP_MATERIAL_NAME,
         id: ANVIL_CMG_CATEGORY_KEY.PREP_MATERIAL_NAME,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil-cmg/dev/index/summary.ts b/explorer/site-config/anvil-cmg/dev/index/summary.ts
index 4606d8690..eb911c583 100644
--- a/explorer/site-config/anvil-cmg/dev/index/summary.ts
+++ b/explorer/site-config/anvil-cmg/dev/index/summary.ts
@@ -1,11 +1,11 @@
 import { AzulSummaryResponse } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "./summaryViewModelBuilder";
+import * as C from "../../../../app/components";
+import * as V from "./summaryViewModelBuilder";
 
 export const summary = [
   {
-    component: Components.Summaries,
-    viewBuilder: ViewBuilder.buildSummaries,
-  } as ComponentConfig<typeof Components.Summaries, AzulSummaryResponse>,
+    component: C.Summaries,
+    viewBuilder: V.buildSummaries,
+  } as ComponentConfig<typeof C.Summaries, AzulSummaryResponse>,
 ];
diff --git a/explorer/site-config/anvil/dev/config.ts b/explorer/site-config/anvil/dev/config.ts
index 48d856f18..fbb09ee08 100644
--- a/explorer/site-config/anvil/dev/config.ts
+++ b/explorer/site-config/anvil/dev/config.ts
@@ -1,5 +1,3 @@
-import { ELEMENT_ALIGNMENT } from "@databiosphere/findable-ui/lib/common/entities";
-import { HEADER_NAVIGATION_LABEL } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/common/constants";
 import { SiteConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import { CATALOG_DEFAULT } from "../../../app/apis/azul/anvil/common/constants";
 import * as C from "../../../app/components/index";
@@ -104,53 +102,56 @@ const config: SiteConfig = {
       socials: socialMedia.socials,
     },
     header: {
-      Logo: C.Logo({
+      authenticationEnabled: true,
+      logo: C.Logo({
         alt: APP_TITLE,
         height: 40,
         link: BROWSER_URL,
         src: "/images/logoAnvil.png",
       }),
-      authenticationEnabled: true,
-      navAlignment: ELEMENT_ALIGNMENT.CENTER,
-      navLinks: [
-        {
-          label: "Overview",
-          url: `${BROWSER_URL}/overview`,
-        },
-        {
-          label: "Learn",
-          url: `${BROWSER_URL}/learn`,
-        },
-        {
-          label: "Datasets",
-          url: URL_DATASETS,
-        },
-        {
-          label: "News",
-          url: `${BROWSER_URL}/news`,
-        },
-        {
-          label: "Events",
-          url: `${BROWSER_URL}/events`,
-        },
-        {
-          label: HEADER_NAVIGATION_LABEL.MORE,
-          menuItems: [
-            {
-              label: "Team",
-              url: `${BROWSER_URL}/team`,
-            },
-            {
-              label: "FAQ",
-              url: `${BROWSER_URL}/faq`,
-            },
-            {
-              label: "Help",
-              url: `${BROWSER_URL}/help`,
-            },
-          ],
-          url: "",
-        },
+      navigation: [
+        undefined,
+        [
+          {
+            label: "Overview",
+            url: `${BROWSER_URL}/overview`,
+          },
+          {
+            label: "Learn",
+            url: `${BROWSER_URL}/learn`,
+          },
+          {
+            label: "Datasets",
+            url: URL_DATASETS,
+          },
+          {
+            label: "News",
+            url: `${BROWSER_URL}/news`,
+          },
+          {
+            label: "Events",
+            url: `${BROWSER_URL}/events`,
+          },
+          {
+            label: "More",
+            menuItems: [
+              {
+                label: "Team",
+                url: `${BROWSER_URL}/team`,
+              },
+              {
+                label: "FAQ",
+                url: `${BROWSER_URL}/faq`,
+              },
+              {
+                label: "Help",
+                url: `${BROWSER_URL}/help`,
+              },
+            ],
+            url: "",
+          },
+        ],
+        undefined,
       ],
       searchEnabled: true,
       searchURL: `${BROWSER_URL}/search`,
diff --git a/explorer/site-config/anvil/dev/detail/dataset/overviewMainColumn.ts b/explorer/site-config/anvil/dev/detail/dataset/overviewMainColumn.ts
index f1dc2741e..80b531b1b 100644
--- a/explorer/site-config/anvil/dev/detail/dataset/overviewMainColumn.ts
+++ b/explorer/site-config/anvil/dev/detail/dataset/overviewMainColumn.ts
@@ -1,11 +1,11 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "app/components";
 import { DatasetsResponse } from "../../../../../app/apis/azul/anvil/common/responses";
-import * as T from "../../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 
 export const mainColumn = [
   {
     component: C.Description,
-    viewBuilder: T.buildDatasetDescription,
+    viewBuilder: V.buildDatasetDescription,
   } as ComponentConfig<typeof C.Description, DatasetsResponse>,
 ];
diff --git a/explorer/site-config/anvil/dev/detail/dataset/overviewSideColumn.ts b/explorer/site-config/anvil/dev/detail/dataset/overviewSideColumn.ts
index 8d74b9b61..cc1754f59 100644
--- a/explorer/site-config/anvil/dev/detail/dataset/overviewSideColumn.ts
+++ b/explorer/site-config/anvil/dev/detail/dataset/overviewSideColumn.ts
@@ -1,10 +1,10 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 
 export const sideColumn = [
   {
     component: C.Details,
-    viewBuilder: T.buildDatasetDetails,
+    viewBuilder: V.buildDatasetDetails,
   } as ComponentConfig<typeof C.Details>,
 ];
diff --git a/explorer/site-config/anvil/dev/detail/dataset/top.ts b/explorer/site-config/anvil/dev/detail/dataset/top.ts
index 520b5d405..66c9b13e5 100644
--- a/explorer/site-config/anvil/dev/detail/dataset/top.ts
+++ b/explorer/site-config/anvil/dev/detail/dataset/top.ts
@@ -4,11 +4,11 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { DatasetsResponse } from "../../../../../app/apis/azul/anvil/common/responses";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 
 export const top: ComponentsConfig = [
   {
     component: C.BackPageHero,
-    viewBuilder: T.buildDatasetHero,
+    viewBuilder: V.buildDatasetHero,
   } as ComponentConfig<typeof C.BackPageHero, DatasetsResponse>,
 ];
diff --git a/explorer/site-config/anvil/dev/index/activitiesEntityConfig.ts b/explorer/site-config/anvil/dev/index/activitiesEntityConfig.ts
index 685f06a15..d6bcfe826 100644
--- a/explorer/site-config/anvil/dev/index/activitiesEntityConfig.ts
+++ b/explorer/site-config/anvil/dev/index/activitiesEntityConfig.ts
@@ -6,8 +6,8 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMode";
 import { ActivitiesResponse } from "../../../../app/apis/azul/anvil/common/responses";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 import { ANVIL_CATEGORY_KEY, ANVIL_CATEGORY_LABEL } from "../category";
 
 /**
@@ -27,45 +27,45 @@ export const activitiesEntityConfig: EntityConfig<ActivitiesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildDocumentId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildDocumentId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.DOCUMENT_ID,
         id: ANVIL_CATEGORY_KEY.DOCUMENT_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildActivityType,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildActivityType,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.ACTIVITY_TYPE,
         id: ANVIL_CATEGORY_KEY.ACTIVITY_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDataModality,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.DATA_MODALITY,
         id: ANVIL_CATEGORY_KEY.DATA_MODALITY,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildBioSampleTypes,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildBioSampleTypes,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.BIOSAMPLE_TYPE,
         id: ANVIL_CATEGORY_KEY.BIOSAMPLE_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildDatasetNames,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildDatasetNames,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.DATASET_NAME,
         id: ANVIL_CATEGORY_KEY.DATASET_NAME,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil/dev/index/biosamplesEntityConfig.ts b/explorer/site-config/anvil/dev/index/biosamplesEntityConfig.ts
index b28423a66..92056451e 100644
--- a/explorer/site-config/anvil/dev/index/biosamplesEntityConfig.ts
+++ b/explorer/site-config/anvil/dev/index/biosamplesEntityConfig.ts
@@ -6,8 +6,8 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMode";
 import { BioSamplesResponse } from "../../../../app/apis/azul/anvil/common/responses";
-import * as Components from "../../../../app/components";
-import * as ViewBuilders from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 import { ANVIL_CATEGORY_KEY, ANVIL_CATEGORY_LABEL } from "../category";
 
 /**
@@ -27,54 +27,54 @@ export const biosamplesEntityConfig: EntityConfig<BioSamplesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilders.buildBioSampleId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildBioSampleId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.BIOSAMPLE_ID,
         id: ANVIL_CATEGORY_KEY.BIOSAMPLE_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilders.buildBioSampleType,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildBioSampleType,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.BIOSAMPLE_TYPE,
         id: ANVIL_CATEGORY_KEY.BIOSAMPLE_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilders.buildOrganismTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildOrganismTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.ORGANISM_TYPE,
         id: ANVIL_CATEGORY_KEY.ORGANISM_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilders.buildPhenotypicSexes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildPhenotypicSexes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.PHENOTYPIC_SEX,
         id: ANVIL_CATEGORY_KEY.PHENOTYPIC_SEX,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilders.buildAnatomicalSite,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildAnatomicalSite,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.ANATOMICAL_SITE,
         id: ANVIL_CATEGORY_KEY.ANATOMICAL_SITE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilders.buildDatasetNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDatasetNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.DATASET_NAME,
         id: ANVIL_CATEGORY_KEY.DATASET_NAME,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil/dev/index/datasetsEntityConfig.ts b/explorer/site-config/anvil/dev/index/datasetsEntityConfig.ts
index 7b8fbc7ad..7939e13aa 100644
--- a/explorer/site-config/anvil/dev/index/datasetsEntityConfig.ts
+++ b/explorer/site-config/anvil/dev/index/datasetsEntityConfig.ts
@@ -7,8 +7,8 @@ import {
 import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMode";
 import { DatasetsResponse } from "../../../../app/apis/azul/anvil/common/responses";
 import { getDatasetEntryId } from "../../../../app/apis/azul/anvil/common/transformers";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 import { ANVIL_CATEGORY_KEY, ANVIL_CATEGORY_LABEL } from "../category";
 import { mainColumn } from "../detail/dataset/overviewMainColumn";
 import { sideColumn } from "../detail/dataset/overviewSideColumn";
@@ -39,45 +39,45 @@ export const datasetsEntityConfig: EntityConfig<DatasetsResponse> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildDatasetName,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildDatasetName,
+        } as ComponentConfig<typeof C.Link>,
         header: ANVIL_CATEGORY_LABEL.DATASET_NAME,
         id: ANVIL_CATEGORY_KEY.DATASET_NAME,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildOrganismTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildOrganismTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.ORGANISM_TYPE,
         id: ANVIL_CATEGORY_KEY.ORGANISM_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildPhenotypicSexes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildPhenotypicSexes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.PHENOTYPIC_SEX,
         id: ANVIL_CATEGORY_KEY.PHENOTYPIC_SEX,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildReportedEthnicities,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildReportedEthnicities,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.REPORTED_ETHNICITY,
         id: ANVIL_CATEGORY_KEY.REPORTED_ETHNICITY,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildPrepMaterialNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildPrepMaterialNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.LIBRARY_PREPARATION,
         id: ANVIL_CATEGORY_KEY.LIBRARY_PREPARATION,
         width: { max: "1fr", min: "200px" },
@@ -85,9 +85,9 @@ export const datasetsEntityConfig: EntityConfig<DatasetsResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDataModality,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.DATA_MODALITY,
         id: ANVIL_CATEGORY_KEY.DATA_MODALITY,
         width: { max: "1fr", min: "148px" },
diff --git a/explorer/site-config/anvil/dev/index/donorsEntityConfig.ts b/explorer/site-config/anvil/dev/index/donorsEntityConfig.ts
index 37a99985b..d002f3eb6 100644
--- a/explorer/site-config/anvil/dev/index/donorsEntityConfig.ts
+++ b/explorer/site-config/anvil/dev/index/donorsEntityConfig.ts
@@ -6,8 +6,8 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMode";
 import { DonorsResponse } from "../../../../app/apis/azul/anvil/common/responses";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 import { ANVIL_CATEGORY_KEY, ANVIL_CATEGORY_LABEL } from "../category";
 
 /**
@@ -27,45 +27,45 @@ export const donorsEntityConfig: EntityConfig<DonorsResponse> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildDonorId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildDonorId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.DONOR_ID,
         id: ANVIL_CATEGORY_KEY.DONOR_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildOrganismType,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildOrganismType,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.ORGANISM_TYPE,
         id: ANVIL_CATEGORY_KEY.ORGANISM_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildPhenotypicSex,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildPhenotypicSex,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.PHENOTYPIC_SEX,
         id: ANVIL_CATEGORY_KEY.PHENOTYPIC_SEX,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildReportedEthnicity,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildReportedEthnicity,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.REPORTED_ETHNICITY,
         id: ANVIL_CATEGORY_KEY.REPORTED_ETHNICITY,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDatasetNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDatasetNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.DATASET_NAME,
         id: ANVIL_CATEGORY_KEY.DATASET_NAME,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil/dev/index/filesEntityConfig.ts b/explorer/site-config/anvil/dev/index/filesEntityConfig.ts
index 808501a5a..cfc841e25 100644
--- a/explorer/site-config/anvil/dev/index/filesEntityConfig.ts
+++ b/explorer/site-config/anvil/dev/index/filesEntityConfig.ts
@@ -6,8 +6,8 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMode";
 import { FilesResponse } from "../../../../app/apis/azul/anvil/common/responses";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 import { ANVIL_CATEGORY_KEY, ANVIL_CATEGORY_LABEL } from "../category";
 
 /**
@@ -27,45 +27,45 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildFileId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildFileId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.FILE_ID,
         id: ANVIL_CATEGORY_KEY.FILE_ID,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildFileFormat,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildFileFormat,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.FILE_FORMAT,
         id: ANVIL_CATEGORY_KEY.FILE_FORMAT,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildFileType,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildFileType,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.FILE_TYPE,
         id: ANVIL_CATEGORY_KEY.FILE_TYPE,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildFileDataModality,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildFileDataModality,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.DATA_MODALITY,
         id: ANVIL_CATEGORY_KEY.DATA_MODALITY,
         width: { max: "2fr", min: "240px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDatasetNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDatasetNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.DATASET_NAME,
         id: ANVIL_CATEGORY_KEY.DATASET_NAME,
         width: { max: "2fr", min: "240px" },
diff --git a/explorer/site-config/anvil/dev/index/librariesEntityConfig.ts b/explorer/site-config/anvil/dev/index/librariesEntityConfig.ts
index 5c9da6ae2..446bbab83 100644
--- a/explorer/site-config/anvil/dev/index/librariesEntityConfig.ts
+++ b/explorer/site-config/anvil/dev/index/librariesEntityConfig.ts
@@ -6,8 +6,8 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMode";
 import { LibrariesResponse } from "../../../../app/apis/azul/anvil/common/responses";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/azul/anvil/common/viewModelBuilders";
 import { ANVIL_CATEGORY_KEY, ANVIL_CATEGORY_LABEL } from "../category";
 
 /**
@@ -27,36 +27,36 @@ export const librariesEntityConfig: EntityConfig<LibrariesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildLibraryId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildLibraryId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.LIBRARY_ID,
         id: ANVIL_CATEGORY_KEY.LIBRARY_ID,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildPrepMaterialName,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildPrepMaterialName,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: ANVIL_CATEGORY_LABEL.LIBRARY_PREPARATION,
         id: ANVIL_CATEGORY_KEY.LIBRARY_PREPARATION,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildBioSampleTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildBioSampleTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.BIOSAMPLE_TYPE,
         id: ANVIL_CATEGORY_KEY.BIOSAMPLE_TYPE,
         width: { max: "1fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDatasetNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDatasetNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: ANVIL_CATEGORY_LABEL.DATASET_NAME,
         id: ANVIL_CATEGORY_KEY.DATASET_NAME,
         width: { max: "1fr", min: "200px" },
diff --git a/explorer/site-config/anvil/dev/index/summary.ts b/explorer/site-config/anvil/dev/index/summary.ts
index 4606d8690..eb911c583 100644
--- a/explorer/site-config/anvil/dev/index/summary.ts
+++ b/explorer/site-config/anvil/dev/index/summary.ts
@@ -1,11 +1,11 @@
 import { AzulSummaryResponse } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "./summaryViewModelBuilder";
+import * as C from "../../../../app/components";
+import * as V from "./summaryViewModelBuilder";
 
 export const summary = [
   {
-    component: Components.Summaries,
-    viewBuilder: ViewBuilder.buildSummaries,
-  } as ComponentConfig<typeof Components.Summaries, AzulSummaryResponse>,
+    component: C.Summaries,
+    viewBuilder: V.buildSummaries,
+  } as ComponentConfig<typeof C.Summaries, AzulSummaryResponse>,
 ];
diff --git a/explorer/site-config/anvil/dev/socialMedia.ts b/explorer/site-config/anvil/dev/socialMedia.ts
index 01486775b..dbf5c4db5 100644
--- a/explorer/site-config/anvil/dev/socialMedia.ts
+++ b/explorer/site-config/anvil/dev/socialMedia.ts
@@ -1,34 +1,51 @@
-import { HEADER_NAVIGATION_LABEL } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/common/constants";
 import { SocialMedia } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/common/entities";
 import * as C from "../../../app/components/index";
 
+export const SOCIALS = {
+  DISCOURSE: {
+    label: "Discourse",
+    url: "https://help.anvilproject.org/",
+  },
+  GITHUB: {
+    label: "GitHub",
+    url: "https://github.com/anvilproject",
+  },
+  SLACK: {
+    label: "Slack",
+    url: "https://join.slack.com/t/anvil-community/shared_invite/zt-hsyfam1w-LXlCv~3vNLSfDj~qNd5uBg",
+  },
+  X: {
+    label: "X",
+    url: "https://twitter.com/useAnVIL",
+  },
+  YOUTUBE: {
+    label: "YouTube",
+    url: "https://www.youtube.com/channel/UCBbHCj7kUogAMFyBAzzzfUw",
+  },
+};
+
 export const socialMedia: SocialMedia = {
-  label: HEADER_NAVIGATION_LABEL.SOCIALS,
+  label: "Follow Us",
   socials: [
     {
+      ...SOCIALS.DISCOURSE,
       Icon: C.DiscourseIcon,
-      label: "Discourse",
-      url: "https://help.anvilproject.org/",
     },
     {
+      ...SOCIALS.X,
       Icon: C.XIcon,
-      label: "X",
-      url: "https://twitter.com/useAnVIL",
     },
     {
+      ...SOCIALS.YOUTUBE,
       Icon: C.YouTubeIcon,
-      label: "YouTube",
-      url: "https://www.youtube.com/channel/UCBbHCj7kUogAMFyBAzzzfUw",
     },
     {
+      ...SOCIALS.GITHUB,
       Icon: C.GitHubIcon,
-      label: "GitHub",
-      url: "https://github.com/anvilproject",
     },
     {
+      ...SOCIALS.SLACK,
       Icon: C.SlackIcon,
-      label: "Slack",
-      url: "https://join.slack.com/t/anvil-community/shared_invite/zt-hsyfam1w-LXlCv~3vNLSfDj~qNd5uBg",
     },
   ],
 };
diff --git a/explorer/site-config/hca-dcp/dev/config.ts b/explorer/site-config/hca-dcp/dev/config.ts
index b5ead6dbe..759f2b245 100644
--- a/explorer/site-config/hca-dcp/dev/config.ts
+++ b/explorer/site-config/hca-dcp/dev/config.ts
@@ -1,5 +1,4 @@
 import { APIEndpoints } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
-import { ELEMENT_ALIGNMENT } from "@databiosphere/findable-ui/lib/common/entities";
 import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
 import { SystemStatusBindResponseFn } from "@databiosphere/findable-ui/lib/config/entities";
 import { tabletUp } from "@databiosphere/findable-ui/lib/theme/common/breakpoints";
@@ -211,33 +210,36 @@ export function makeConfig(
         ],
       },
       header: {
-        Announcements: C.RenderComponents({ components: announcements }),
-        Logo: C.Logo({
+        announcements,
+        authenticationEnabled: false,
+        logo: C.Logo({
           alt: APP_TITLE,
           height: 32.5,
           link: HOME_PAGE_PATH,
           src: "/images/hcaExplorer.png",
         }),
-        authenticationEnabled: false,
-        navAlignment: ELEMENT_ALIGNMENT.RIGHT,
-        navLinks: [
-          {
-            flatten: true,
-            label: "Help & Documentation",
-            menuItems: [
-              {
-                label: C.LabelIconMenuItem({ label: "Guides" }),
-                target: ANCHOR_TARGET.BLANK,
-                url: `${portalUrl}/guides`,
-              },
-              {
-                label: C.LabelIconMenuItem({ label: "Privacy" }),
-                target: ANCHOR_TARGET.BLANK,
-                url: `${portalUrl}/privacy`,
-              },
-            ],
-            url: "",
-          },
+        navigation: [
+          undefined,
+          undefined,
+          [
+            {
+              flatten: { md: true, sm: true, xs: true },
+              label: "Help & Documentation",
+              menuItems: [
+                {
+                  label: C.LabelIconMenuItem({ label: "Guides" }),
+                  target: ANCHOR_TARGET.BLANK,
+                  url: `${portalUrl}/guides`,
+                },
+                {
+                  label: C.LabelIconMenuItem({ label: "Privacy" }),
+                  target: ANCHOR_TARGET.BLANK,
+                  url: `${portalUrl}/privacy`,
+                },
+              ],
+              url: "",
+            },
+          ],
         ],
         searchEnabled: false,
         searchURL: `${portalUrl}/search`,
diff --git a/explorer/site-config/hca-dcp/dev/index/filesEntityConfig.ts b/explorer/site-config/hca-dcp/dev/index/filesEntityConfig.ts
index d394bfb0d..3d5d46ffd 100644
--- a/explorer/site-config/hca-dcp/dev/index/filesEntityConfig.ts
+++ b/explorer/site-config/hca-dcp/dev/index/filesEntityConfig.ts
@@ -40,9 +40,9 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
       {
         columnPinned: true,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildFileName,
-        } as ComponentConfig<typeof C.Cell, FilesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, FilesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.FILE_NAME,
         id: HCA_DCP_CATEGORY_KEY.FILE_NAME,
         width: { max: "2fr", min: "240px" },
@@ -50,18 +50,18 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildFileFormat,
-        } as ComponentConfig<typeof C.Cell, FilesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, FilesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.FILE_FORMAT,
         id: HCA_DCP_CATEGORY_KEY.FILE_FORMAT,
         width: { max: "1fr", min: "120px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildFileSize,
-        } as ComponentConfig<typeof C.Cell, FilesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, FilesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.FILE_SIZE,
         id: HCA_DCP_CATEGORY_KEY.FILE_SIZE,
         width: { max: "1fr", min: "120px" },
@@ -87,9 +87,9 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildFileSource,
-        } as ComponentConfig<typeof C.Cell, FilesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, FilesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.FILE_SOURCE,
         id: HCA_DCP_CATEGORY_KEY.FILE_SOURCE,
         width: { max: "1fr", min: "120px" },
@@ -196,9 +196,9 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregatedProtocolPairedEnd,
-        } as ComponentConfig<typeof C.Cell, FilesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, FilesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.PAIRED_END,
         id: HCA_DCP_CATEGORY_KEY.PAIRED_END,
         width: { max: "1fr", min: "120px" },
@@ -216,9 +216,9 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregatedDonorBiologicalSex,
-        } as ComponentConfig<typeof C.Cell, FilesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, FilesResponse>,
         header: "Sex",
         id: HCA_DCP_CATEGORY_KEY.BIOLOGICAL_SEX,
         width: { max: "1fr", min: "120px" },
@@ -255,9 +255,9 @@ export const filesEntityConfig: EntityConfig<FilesResponse> = {
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildTotalCells,
-        } as ComponentConfig<typeof C.Cell, FilesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, FilesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.CELL_COUNT,
         id: HCA_DCP_CATEGORY_KEY.CELL_COUNT,
         width: { max: "1fr", min: "124px" },
diff --git a/explorer/site-config/hca-dcp/dev/index/projectsEntityConfig.ts b/explorer/site-config/hca-dcp/dev/index/projectsEntityConfig.ts
index b19983bad..8350001fa 100644
--- a/explorer/site-config/hca-dcp/dev/index/projectsEntityConfig.ts
+++ b/explorer/site-config/hca-dcp/dev/index/projectsEntityConfig.ts
@@ -170,9 +170,9 @@ export const projectsEntityConfig: EntityConfig = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregatedProtocolPairedEnd,
-        } as ComponentConfig<typeof C.Cell, ProjectsResponse>,
+        } as ComponentConfig<typeof C.BasicCell, ProjectsResponse>,
         header: HCA_DCP_CATEGORY_LABEL.PAIRED_END,
         id: HCA_DCP_CATEGORY_KEY.PAIRED_END,
         width: { max: "1fr", min: "146px" },
@@ -219,18 +219,18 @@ export const projectsEntityConfig: EntityConfig = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregatedDonorCount,
-        } as ComponentConfig<typeof C.Cell, ProjectsResponse>,
+        } as ComponentConfig<typeof C.BasicCell, ProjectsResponse>,
         header: HCA_DCP_CATEGORY_LABEL.DONOR_COUNT,
         id: HCA_DCP_CATEGORY_KEY.DONOR_COUNT,
         width: { max: "1fr", min: "124px" },
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildEstimateCellCount,
-        } as ComponentConfig<typeof C.Cell, ProjectsResponse>,
+        } as ComponentConfig<typeof C.BasicCell, ProjectsResponse>,
         header: HCA_DCP_CATEGORY_LABEL.EFFECTIVE_CELL_COUNT,
         id: HCA_DCP_CATEGORY_KEY.EFFECTIVE_CELL_COUNT,
         width: { max: "1fr", min: "124px" },
@@ -238,9 +238,9 @@ export const projectsEntityConfig: EntityConfig = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregateSubmissionDate,
-        } as ComponentConfig<typeof C.Cell, ProjectsResponse>,
+        } as ComponentConfig<typeof C.BasicCell, ProjectsResponse>,
         header: HCA_DCP_CATEGORY_LABEL.AGGREGATE_SUBMISSION_DATE,
         id: HCA_DCP_CATEGORY_KEY.AGGREGATE_SUBMISSION_DATE,
         width: { max: "1fr", min: "224px" },
@@ -248,9 +248,9 @@ export const projectsEntityConfig: EntityConfig = {
       {
         columnVisible: true,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregateLastModifiedDate,
-        } as ComponentConfig<typeof C.Cell, ProjectsResponse>,
+        } as ComponentConfig<typeof C.BasicCell, ProjectsResponse>,
         header: HCA_DCP_CATEGORY_LABEL.AGGREGATE_LAST_MODIFIED_DATE,
         id: HCA_DCP_CATEGORY_KEY.AGGREGATE_LAST_MODIFIED_DATE,
         width: { max: "1fr", min: "224px" },
diff --git a/explorer/site-config/hca-dcp/dev/index/samplesEntityConfig.ts b/explorer/site-config/hca-dcp/dev/index/samplesEntityConfig.ts
index 1e5a86a7c..3e5335446 100644
--- a/explorer/site-config/hca-dcp/dev/index/samplesEntityConfig.ts
+++ b/explorer/site-config/hca-dcp/dev/index/samplesEntityConfig.ts
@@ -28,9 +28,9 @@ export const samplesEntityConfig: EntityConfig<SamplesResponse> = {
     columns: [
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildSampleId,
-        } as ComponentConfig<typeof C.Cell, SamplesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, SamplesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.SAMPLE_ID,
         id: HCA_DCP_CATEGORY_KEY.SAMPLE_ID,
         width: { max: "1fr", min: "120px" },
@@ -55,9 +55,9 @@ export const samplesEntityConfig: EntityConfig<SamplesResponse> = {
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildSampleEntityType,
-        } as ComponentConfig<typeof C.Cell, SamplesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, SamplesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.SAMPLE_TYPE,
         id: HCA_DCP_CATEGORY_KEY.SAMPLE_ENTITY_TYPE,
         width: { max: "1fr", min: "124px" },
@@ -84,9 +84,9 @@ export const samplesEntityConfig: EntityConfig<SamplesResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildSampleModelOrgan,
-        } as ComponentConfig<typeof C.Cell, SamplesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, SamplesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.MODEL_ORGAN,
         id: HCA_DCP_CATEGORY_KEY.MODEL_ORGAN,
         width: { max: "1fr", min: "124px" },
@@ -123,9 +123,9 @@ export const samplesEntityConfig: EntityConfig<SamplesResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregatedProtocolPairedEnd,
-        } as ComponentConfig<typeof C.Cell, SamplesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, SamplesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.PAIRED_END,
         id: HCA_DCP_CATEGORY_KEY.PAIRED_END,
         width: { max: "1fr", min: "124px" },
@@ -153,9 +153,9 @@ export const samplesEntityConfig: EntityConfig<SamplesResponse> = {
       {
         columnVisible: false,
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildAggregatedDonorBiologicalSex,
-        } as ComponentConfig<typeof C.Cell, SamplesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, SamplesResponse>,
         header: "Sex",
         id: HCA_DCP_CATEGORY_KEY.BIOLOGICAL_SEX,
         width: { max: "1fr", min: "124px" },
@@ -191,9 +191,9 @@ export const samplesEntityConfig: EntityConfig<SamplesResponse> = {
       },
       {
         componentConfig: {
-          component: C.Cell,
+          component: C.BasicCell,
           viewBuilder: V.buildTotalCells,
-        } as ComponentConfig<typeof C.Cell, SamplesResponse>,
+        } as ComponentConfig<typeof C.BasicCell, SamplesResponse>,
         header: HCA_DCP_CATEGORY_LABEL.CELL_COUNT,
         id: HCA_DCP_CATEGORY_KEY.CELL_COUNT,
         width: { max: "1fr", min: "124px" },
diff --git a/explorer/site-config/hca-dcp/dev/index/summary.ts b/explorer/site-config/hca-dcp/dev/index/summary.ts
index 4606d8690..eb911c583 100644
--- a/explorer/site-config/hca-dcp/dev/index/summary.ts
+++ b/explorer/site-config/hca-dcp/dev/index/summary.ts
@@ -1,11 +1,11 @@
 import { AzulSummaryResponse } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "./summaryViewModelBuilder";
+import * as C from "../../../../app/components";
+import * as V from "./summaryViewModelBuilder";
 
 export const summary = [
   {
-    component: Components.Summaries,
-    viewBuilder: ViewBuilder.buildSummaries,
-  } as ComponentConfig<typeof Components.Summaries, AzulSummaryResponse>,
+    component: C.Summaries,
+    viewBuilder: V.buildSummaries,
+  } as ComponentConfig<typeof C.Summaries, AzulSummaryResponse>,
 ];
diff --git a/explorer/site-config/lungmap/dev/config.ts b/explorer/site-config/lungmap/dev/config.ts
index 218293f71..07e1089ca 100644
--- a/explorer/site-config/lungmap/dev/config.ts
+++ b/explorer/site-config/lungmap/dev/config.ts
@@ -1,4 +1,3 @@
-import { ELEMENT_ALIGNMENT } from "@databiosphere/findable-ui/lib/common/entities";
 import { CategoryGroupConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import hcaConfig, {
   DATA_URL as HCA_DATA_URL,
@@ -78,34 +77,37 @@ export function makeConfig(
         socials: socialMedia.socials,
       },
       header: {
-        Logo: C.Logo({
+        authenticationEnabled: false,
+        logo: C.Logo({
           alt: APP_TITLE,
           height: 32,
           link: HOME_PAGE_PATH,
           src: "/images/logoLungmap.png",
         }),
-        authenticationEnabled: false,
-        navAlignment: ELEMENT_ALIGNMENT.RIGHT,
-        navLinks: [
-          {
-            flatten: true,
-            label: "Help & Documentation",
-            menuItems: [
-              {
-                label: "Metadata Dictionary",
-                url: "/metadata",
-              },
-              {
-                label: "APIs",
-                url: "/apis",
-              },
-              {
-                label: "Privacy",
-                url: "/privacy",
-              },
-            ],
-            url: "",
-          },
+        navigation: [
+          undefined,
+          undefined,
+          [
+            {
+              flatten: { md: true, sm: true, xs: true },
+              label: "Help & Documentation",
+              menuItems: [
+                {
+                  label: "Metadata Dictionary",
+                  url: "/metadata",
+                },
+                {
+                  label: "APIs",
+                  url: "/apis",
+                },
+                {
+                  label: "Privacy",
+                  url: "/privacy",
+                },
+              ],
+              url: "",
+            },
+          ],
         ],
         searchEnabled: false,
         slogan: undefined,
diff --git a/explorer/site-config/lungmap/dev/index/summary.ts b/explorer/site-config/lungmap/dev/index/summary.ts
index 4606d8690..eb911c583 100644
--- a/explorer/site-config/lungmap/dev/index/summary.ts
+++ b/explorer/site-config/lungmap/dev/index/summary.ts
@@ -1,11 +1,11 @@
 import { AzulSummaryResponse } from "@databiosphere/findable-ui/lib/apis/azul/common/entities";
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "./summaryViewModelBuilder";
+import * as C from "../../../../app/components";
+import * as V from "./summaryViewModelBuilder";
 
 export const summary = [
   {
-    component: Components.Summaries,
-    viewBuilder: ViewBuilder.buildSummaries,
-  } as ComponentConfig<typeof Components.Summaries, AzulSummaryResponse>,
+    component: C.Summaries,
+    viewBuilder: V.buildSummaries,
+  } as ComponentConfig<typeof C.Summaries, AzulSummaryResponse>,
 ];
diff --git a/explorer/site-config/lungmap/dev/socialMedia.ts b/explorer/site-config/lungmap/dev/socialMedia.ts
index 8dc585eb7..0ce19fbd4 100644
--- a/explorer/site-config/lungmap/dev/socialMedia.ts
+++ b/explorer/site-config/lungmap/dev/socialMedia.ts
@@ -1,9 +1,8 @@
-import { HEADER_NAVIGATION_LABEL } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/common/constants";
 import { SocialMedia } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/common/entities";
 import * as C from "../../../app/components/index";
 
 export const socialMedia: SocialMedia = {
-  label: HEADER_NAVIGATION_LABEL.SOCIALS,
+  label: "Follow Us",
   socials: [
     {
       Icon: C.XIcon,
diff --git a/explorer/site-config/ncpi-catalog/dev/config.ts b/explorer/site-config/ncpi-catalog/dev/config.ts
index edd7e0de7..2c1095b12 100644
--- a/explorer/site-config/ncpi-catalog/dev/config.ts
+++ b/explorer/site-config/ncpi-catalog/dev/config.ts
@@ -1,4 +1,3 @@
-import { ELEMENT_ALIGNMENT } from "@databiosphere/findable-ui/lib/common/entities";
 import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities";
 import { SiteConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "../../../app/components/index";
@@ -80,20 +79,23 @@ const config: SiteConfig = {
       navLinks: [],
     },
     header: {
-      Logo: C.Logo({
+      authenticationEnabled: false,
+      logo: C.Logo({
         alt: APP_TITLE,
         height: 36,
         link: "/platforms",
         src: logoNcpi,
       }),
-      authenticationEnabled: false,
-      navAlignment: ELEMENT_ALIGNMENT.RIGHT,
-      navLinks: [
-        {
-          label: C.LabelIconMenuItem({ label: "Visit ncpi-acc.org" }),
-          target: ANCHOR_TARGET.BLANK,
-          url: PORTAL_URL,
-        },
+      navigation: [
+        undefined,
+        undefined,
+        [
+          {
+            label: C.LabelIconMenuItem({ label: "Visit ncpi-acc.org" }),
+            target: ANCHOR_TARGET.BLANK,
+            url: PORTAL_URL,
+          },
+        ],
       ],
       searchEnabled: false,
       searchURL: ``,
diff --git a/explorer/site-config/ncpi-catalog/dev/detail/study/overviewMainColumn.ts b/explorer/site-config/ncpi-catalog/dev/detail/study/overviewMainColumn.ts
index 58c5fa29f..4ed1eb4e8 100644
--- a/explorer/site-config/ncpi-catalog/dev/detail/study/overviewMainColumn.ts
+++ b/explorer/site-config/ncpi-catalog/dev/detail/study/overviewMainColumn.ts
@@ -1,14 +1,14 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import * as C from "app/components";
 import { NCPICatalogStudy } from "../../../../../app/apis/catalog/ncpi-catalog/common/entities";
-import * as T from "../../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
 
 export const mainColumn = [
   {
     children: [
       {
         component: C.Markdown,
-        viewBuilder: T.buildStudyDescription,
+        viewBuilder: V.buildStudyDescription,
       } as ComponentConfig<typeof C.Markdown, NCPICatalogStudy>,
     ],
     component: C.CollapsableSection,
@@ -23,7 +23,7 @@ export const mainColumn = [
         children: [
           {
             component: C.Links,
-            viewBuilder: T.buildStudyApplyingForAccess,
+            viewBuilder: V.buildStudyApplyingForAccess,
           } as ComponentConfig<typeof C.Links, NCPICatalogStudy>,
         ],
         component: C.Stack,
diff --git a/explorer/site-config/ncpi-catalog/dev/detail/study/overviewSideColumn.ts b/explorer/site-config/ncpi-catalog/dev/detail/study/overviewSideColumn.ts
index 3b56b2cdf..2b0a2f50d 100644
--- a/explorer/site-config/ncpi-catalog/dev/detail/study/overviewSideColumn.ts
+++ b/explorer/site-config/ncpi-catalog/dev/detail/study/overviewSideColumn.ts
@@ -1,20 +1,20 @@
 import { ComponentConfig } from "@databiosphere/findable-ui/lib/config/entities";
 import { NCPICatalogStudy } from "../../../../../app/apis/catalog/ncpi-catalog/common/entities";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
 
 export const sideColumn = [
   {
     children: [
       {
         component: C.KeyValuePairs,
-        viewBuilder: T.buildStudyDetails,
+        viewBuilder: V.buildStudyDetails,
       } as ComponentConfig<typeof C.KeyValuePairs, NCPICatalogStudy>,
     ],
     component: C.GridPaperSection,
   } as ComponentConfig<typeof C.GridPaperSection>,
   {
     component: C.Details,
-    viewBuilder: T.buildStudySummary,
+    viewBuilder: V.buildStudySummary,
   } as ComponentConfig<typeof C.Details, NCPICatalogStudy>,
 ];
diff --git a/explorer/site-config/ncpi-catalog/dev/detail/study/top.ts b/explorer/site-config/ncpi-catalog/dev/detail/study/top.ts
index e4779a53c..ae05af927 100644
--- a/explorer/site-config/ncpi-catalog/dev/detail/study/top.ts
+++ b/explorer/site-config/ncpi-catalog/dev/detail/study/top.ts
@@ -4,11 +4,11 @@ import {
 } from "@databiosphere/findable-ui/lib/config/entities";
 import { NCPICatalogStudy } from "../../../../../app/apis/catalog/ncpi-catalog/common/entities";
 import * as C from "../../../../../app/components";
-import * as T from "../../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
+import * as V from "../../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
 
 export const top: ComponentsConfig = [
   {
     component: C.BackPageHero,
-    viewBuilder: T.buildStudyHero,
+    viewBuilder: V.buildStudyHero,
   } as ComponentConfig<typeof C.BackPageHero, NCPICatalogStudy>,
 ];
diff --git a/explorer/site-config/ncpi-catalog/dev/index/platformsEntityConfig.ts b/explorer/site-config/ncpi-catalog/dev/index/platformsEntityConfig.ts
index 256e03d0c..aa1bf2d04 100644
--- a/explorer/site-config/ncpi-catalog/dev/index/platformsEntityConfig.ts
+++ b/explorer/site-config/ncpi-catalog/dev/index/platformsEntityConfig.ts
@@ -10,8 +10,8 @@ import {
   getPlatformId,
   NCPIPlatformInputMapper,
 } from "../../../../app/apis/catalog/ncpi-catalog/common/utils";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
 import {
   NCPI_CATALOG_CATEGORY_KEY,
   NCPI_CATALOG_CATEGORY_LABEL,
@@ -35,72 +35,72 @@ export const platformsEntityConfig: EntityConfig<NCPICatalogPlatform> = {
     columns: [
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildPlatform,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildPlatform,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.PLATFORM,
         id: NCPI_CATALOG_CATEGORY_KEY.PLATFORM, // platform - a singular platform.
         width: { max: "1fr", min: "100px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildStudyNames,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildStudyNames,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.TITLE,
         id: NCPI_CATALOG_CATEGORY_KEY.TITLE, // studyNames - a list of study names.
         width: { max: "2fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDbGapIds,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDbGapIds,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.DB_GAP_ID,
         id: NCPI_CATALOG_CATEGORY_KEY.DB_GAP_ID, // dbGapIds - a list of study identifiers.
         width: { max: "1.24fr", min: "124px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildFocusDiseases,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildFocusDiseases,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.FOCUS,
         id: NCPI_CATALOG_CATEGORY_KEY.FOCUS, // focusDiseases - a list of focuses / diseases.
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDataTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDataTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.DATA_TYPE,
         id: NCPI_CATALOG_CATEGORY_KEY.DATA_TYPE,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildStudyDesigns,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildStudyDesigns,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.STUDY_DESIGN,
         id: NCPI_CATALOG_CATEGORY_KEY.STUDY_DESIGN,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.ConsentCodesCell,
-          viewBuilder: ViewBuilder.buildConsentCodes,
-        } as ComponentConfig<typeof Components.ConsentCodesCell>,
+          component: C.ConsentCodesCell,
+          viewBuilder: V.buildConsentCodes,
+        } as ComponentConfig<typeof C.ConsentCodesCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.CONSENT_CODE,
         id: NCPI_CATALOG_CATEGORY_KEY.CONSENT_CODE,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildParticipantCount,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildParticipantCount,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.PARTICIPANT_COUNT,
         id: NCPI_CATALOG_CATEGORY_KEY.PARTICIPANT_COUNT,
         width: { max: "1.16fr", min: "116px" },
diff --git a/explorer/site-config/ncpi-catalog/dev/index/studiesEntityConfig.ts b/explorer/site-config/ncpi-catalog/dev/index/studiesEntityConfig.ts
index 5cb4390b7..f0352820b 100644
--- a/explorer/site-config/ncpi-catalog/dev/index/studiesEntityConfig.ts
+++ b/explorer/site-config/ncpi-catalog/dev/index/studiesEntityConfig.ts
@@ -11,8 +11,8 @@ import {
   getTitle,
   NCPIStudyInputMapper,
 } from "../../../../app/apis/catalog/ncpi-catalog/common/utils";
-import * as Components from "../../../../app/components";
-import * as ViewBuilder from "../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
+import * as C from "../../../../app/components";
+import * as V from "../../../../app/viewModelBuilders/catalog/ncpi-catalog/common/viewModelBuilders";
 import {
   NCPI_CATALOG_CATEGORY_KEY,
   NCPI_CATALOG_CATEGORY_LABEL,
@@ -47,9 +47,9 @@ export const studiesEntityConfig: EntityConfig<NCPICatalogStudy> = {
     columns: [
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildPlatforms,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildPlatforms,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.PLATFORM,
         id: NCPI_CATALOG_CATEGORY_KEY.PLATFORM,
         width: { max: "1fr", min: "100px" },
@@ -57,63 +57,63 @@ export const studiesEntityConfig: EntityConfig<NCPICatalogStudy> = {
       {
         columnPinned: true,
         componentConfig: {
-          component: Components.Link,
-          viewBuilder: ViewBuilder.buildStudyTitle,
-        } as ComponentConfig<typeof Components.Link>,
+          component: C.Link,
+          viewBuilder: V.buildStudyTitle,
+        } as ComponentConfig<typeof C.Link>,
         header: NCPI_CATALOG_CATEGORY_LABEL.TITLE,
         id: NCPI_CATALOG_CATEGORY_KEY.TITLE,
         width: { max: "2fr", min: "200px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildDbGapId,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildDbGapId,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.DB_GAP_ID,
         id: NCPI_CATALOG_CATEGORY_KEY.DB_GAP_ID,
         width: { max: "1.24fr", min: "124px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildFocus,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildFocus,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.FOCUS,
         id: NCPI_CATALOG_CATEGORY_KEY.FOCUS,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildDataTypes,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildDataTypes,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.DATA_TYPE,
         id: NCPI_CATALOG_CATEGORY_KEY.DATA_TYPE,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.NTagCell,
-          viewBuilder: ViewBuilder.buildStudyDesigns,
-        } as ComponentConfig<typeof Components.NTagCell>,
+          component: C.NTagCell,
+          viewBuilder: V.buildStudyDesigns,
+        } as ComponentConfig<typeof C.NTagCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.STUDY_DESIGN,
         id: NCPI_CATALOG_CATEGORY_KEY.STUDY_DESIGN,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.ConsentCodesCell,
-          viewBuilder: ViewBuilder.buildConsentCodes,
-        } as ComponentConfig<typeof Components.ConsentCodesCell>,
+          component: C.ConsentCodesCell,
+          viewBuilder: V.buildConsentCodes,
+        } as ComponentConfig<typeof C.ConsentCodesCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.CONSENT_CODE,
         id: NCPI_CATALOG_CATEGORY_KEY.CONSENT_CODE,
         width: { max: "1.6fr", min: "160px" },
       },
       {
         componentConfig: {
-          component: Components.Cell,
-          viewBuilder: ViewBuilder.buildParticipantCount,
-        } as ComponentConfig<typeof Components.Cell>,
+          component: C.BasicCell,
+          viewBuilder: V.buildParticipantCount,
+        } as ComponentConfig<typeof C.BasicCell>,
         header: NCPI_CATALOG_CATEGORY_LABEL.PARTICIPANT_COUNT,
         id: NCPI_CATALOG_CATEGORY_KEY.PARTICIPANT_COUNT,
         width: { max: "1.16fr", min: "116px" },